html, body{width:100%; height:100%; overflow:hidden; background:#efefef;}
#header{position:relative;}
#footer{position:absolute; bottom:0; left:0; height:65px;}


#content{position:absolute; top:70px; left:0; right:0; bottom:70px;}
#content .wrap{position:relative; width:100%; height:55%;}
#content .banner{position:relative; float:left; width:74.7%; height:100%; background:url(../img/banner.jpg) 30% 50% no-repeat; background-size:cover;}
#content .banner a{position:relative; display:block; height:100%;}
#content .banner .slogan{position:absolute; top:40%; right:8%; width:40%; max-width:425px;}
#content .banner-news{position:absolute; right:0; bottom:5%; width:60%; height:160px; padding-top:20px; border-top-left-radius:30px; background:#3239b3; overflow:hidden;}
#content .banner-news h2, #content .banner-news span{display:block; margin:0 4%; color:#fff; font-size:12px;}
 #content .banner-news h2{font-size:18px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;font-weight:bold;}
 #content .banner-news p{margin-top:2%; padding:2% 4% 0; border-top:1px solid #474dbb; color:#F2F7FF; font-size:13px; -webkit-transition:0.3s; -moz-transition:0.3s; transition:0.3s;}
  #content .banner-news a:hover p{color:#ddd;}

#content .download{position:relative; float:right; width:24.1%; height:100%; background:#f2f7ff;}
#content .download h2{height:40px; margin:10px 4%; color:#1d24ab; font-size:18px; line-height:40px;font-weight:bold;}
#content .download ul{position:absolute; top:60px; right:0; bottom:0; left:0; border-top:1px solid #d7d7d7;}
#content .download ul li{height:31%; border-bottom:1px dotted #d7d7d7;}
#content .download ul li:last-of-type{border-bottom:0;}
#content .download ul li a{display:block; height:100%;}
#content .download ul li a:before{content:''; display:inline-block; width:0; height:100%; vertical-align:middle;}
#content .download ul li a div{display:inline-block; *display:inline; *zoom:1; width:20%; margin:0 2%; padding:5px 0; color:#fff; background:#1d24ab; vertical-align:middle; text-align:center; overflow:hidden;}
#content .download ul li a div i{display:block; font-size:16px;}
#content .download ul li a div span{display:block; font-size:12px;}
#content .download ul li a p{display:inline-block; *display:inline; *zoom:1; width:70%; color:#1d24ab; vertical-align:middle; white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}




#product-type{position:absolute; bottom:0; left:0; width:100%; height:43%;}
#product-type li{position:relative; float:left; width:24.1%; height:100%; margin-right:1.2%; background-position:50% 30%; background-repeat:no-repeat; background-size:cover;}
#product-type li.daily{background-image:url(../img/type_01.jpg);}
#product-type li.incontinence{background-image:url(../img/type_02.jpg);}
#product-type li.women{background-image:url(../img/type_03.jpg);}
#product-type li.baby{margin-right:0; background-image:url(../img/type_04.jpg);}

#product-type li a{display:block; width:100%; height:100%; overflow:hidden; background:rgba(255,255,255,0); -webkit-transition:0.4s; -moz-transition:0.4s; transition:0.4s;}
#product-type li div{opacity:1; position:relative; height:100%; vertical-align:middle; text-align:center;}
#product-type li div:after{content:''; display:inline-block; width:0; height:68%; vertical-align:middle;}
#product-type li div picture{display:inline-block; *display:inline; *zoom:1; width:97%; vertical-align:middle;}
#product-type li div img{vertical-align:middle; opacity:0; -webkit-transform:translate3d(0,100px,0); -moz-transform:translate3d(0,100px,0); transform:translate3d(0,100px,0);}

#product-type li.daily div img{width:20%; margin:0 4%; }
#product-type li.incontinence div img{width:30%; margin:0 4%; }
#product-type li.women div img{width:30%; margin:0 4%; }
#product-type li.baby div img{width:30%; margin:0 4%; }

#product-type li div article{ position:absolute; bottom:0; left:0; width:76%; padding:2% 10%; color:#fff; text-align:left; opacity:1; /*-webkit-transform:translate3d(0,100px,0); -moz-transform:translate3d(0,100px,0); transform:translate3d(0,100px,0);*/}
#product-type li.daily article{background:rgba(29,36,171,0.95);}
#product-type li.incontinence article{background:rgba(85,184,121,0.95);}
#product-type li.women article{background:rgba(232,77,145,0.95);}
#product-type li.baby article{background:rgba(249,190,0,0.95);}
#product-type li article h3{font-size:22px;}
#product-type li article p{white-space:nowrap; text-overflow:ellipsis; overflow:hidden;}
#product-type li article i{position:absolute; top:50%; right:12%; width:10px; height:17px; margin:-8px 0 0 -5px; background:url(../img/circle_arr.png) no-repeat;}

#product-type li a:hover{background:#fff; background:rgba(255,255,255,0.8);}
#product-type li a:hover div{ opacity:1;} 
#product-type li a:hover div img, #product-type li a:hover div article{opacity:1; -webkit-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); transform:translate3d(0,0,0);}
#product-type li a:hover div img{ opacity: 1; -webkit-transition:0.7s; -moz-transition:0.7s; transition:0.7s;}
#product-type li a:hover div img:nth-of-type(2){-webkit-transition-delay:0.1s; -moz-transition-delay:0.1s; transition-delay:0.1s;}
#product-type li a:hover div img:nth-of-type(3){-webkit-transition-delay:0.2s; -moz-transition-delay:0.2s; transition-delay:0.2s;}
#product-type li a:hover div img:nth-of-type(4){-webkit-transition-delay:0.3s; -moz-transition-delay:0.3s; transition-delay:0.3s;}
#product-type li a:hover div img:nth-of-type(5){-webkit-transition-delay:0.4s; -moz-transition-delay:0.4s; transition-delay:0.4s;}
#product-type li a:hover div article{-webkit-transition:0.6s 0.3s; -moz-transition:0.6s 0.3s; transition:0.6s 0.3s;}

#product-type li:hover.daily div img{ -webkit-transform:translate3d(0,15px,0); -moz-transform:translate3d(0,15px,0); transform:translate3d(0,15px,0);}
#product-type li:hover.incontinence div img{  -webkit-transform:translate3d(0,15px,0); -moz-transform:translate3d(0,15px,0); transform:translate3d(0,15px,0);}
#product-type li:hover.women div img{ -webkit-transform:translate3d(0,15px,0); -moz-transform:translate3d(0,15px,0); transform:translate3d(0,15px,0);}
#product-type li:hover.baby div img{ -webkit-transform:translate3d(0,30px,0); -moz-transform:translate3d(0,30px,0); transform:translate3d(0,30px,0);}



@media (max-width:1024px){
#header{position:absolute; background:none;}
#logo, .menu{z-index:11;}
#nav{position:fixed; top:0; padding-top:70px;}
#content{top:0; bottom:64px;}
#content .wrap{height:39.6%;}
#content .banner{width:100%; background-position:0 50%;}
#content .banner-news{bottom:0; width:100%; height:54px; padding-top:10px; border-radius:0;}
#content .banner-news h2{font-size:14px;}
#content .banner-news p{display:none;}


#product-type{height:60%;}
#product-type li{width:49.8%; height:49.4%; margin:0 0.4% 2px 0;}
#product-type li:nth-of-type(2n){margin-right:0;}
#product-type li a:hover{background:none;}
#product-type li div{opacity:1;}
#product-type li div img{display:none;}
#product-type li div article{width:96%; height:28%; padding:4% 2%; opacity:1; -webkit-transform:translate3d(0,0,0); -moz-transform:translate3d(0,0,0); transform:translate3d(0,0,0);}
#product-type li article h3{font-size:14px;}
#product-type li article p{font-size:10px; white-space:normal;}
#product-type li article i{display:none;}
 
#content .download{display:none;}
}
@media (max-width:767px){
    #footer{position: static; height: auto;  bottom: auto;  left: auto; text-align: center;}
    #content{ bottom:125px;}
    #header{ position: static; }
    #content{ position: static;top: auto;    left: auto;    right: auto;    bottom: auto; overflow:hidden;}
    #content .wrap{overflow:hidden;}
    #content .banner{ padding-top: 50%; }
    #product-type{height:auto; position: static; bottom: auto; left: auto;}
    #product-type li { height: auto; padding-top: 30%; }
    #product-type li div article{  height: auto; }
    html,body{ height: auto !important; overflow:auto;} 
    #footer .ft-copyright{text-align: center; }
    
      #product-type li{padding-top: 45%; }
    #product-type li div{ position: absolute;    top: 0;    bottom: 0;    left: 0;    right: 0;  opacity: 1;}
    #product-type li article{ position: absolute;   bottom: 0;    left: 0;    right: 0; height: 30px; height: 30px;    line-height: 30px; }
}