html, body { height: 100%; -webkit-tap-highlight-color: transparent; }
html{font-size: 110%;}
@media screen and (max-device-width:768px) 
{
    html{font-size: 200%;}
    
}
@media screen and (max-device-width:414px) 
{
    html{font-size: 120%;}
    
}
@media screen and (max-device-width:375px) 
{
    html{font-size: 110%;}
    
}
@media screen and (max-device-width:320px) 
{
    html{font-size: 90.5%;}
    
}
body { margin: 0; /* font-family: Arial,Verdana; */ background-color: #fff; }
#screen { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical;position: relative; /* margin-top: -50px; */}
/*全屏*/
#screen{top: 0;left: 0;width: 100%; }
/*居中*/
.p1_kv,.p2_kv,.p3_kv,.p4_kv,.p5_kv,.p6_kv,.p7_kv{position: absolute;top: 50%;left: 0;width: 100%;
  -webkit-transform:translateY(-50%);}
@media only screen and (min-width: 1000px) { #screen { position: relative; width: 480px; margin: 0 auto; } }
img{display: block;width: 100%}
#logo{position: absolute;width: 100%;z-index: 101;top: 0;left: 0}
@-webkit-keyframes arrowup{
  0%    {opacity: 0;-webkit-transform:translate3d(0,30%,0);}
  70%   {opacity: 1;-webkit-transform:translate3d(0,0,0);}
  100%  {opacity: 0;-webkit-transform:translate3d(0,-30%,0);}
}
@-webkit-keyframes fadein{
  0%    {opacity: 0;}
  100%  {opacity: 1;}
}
.page1,.page2,.page3,.page4,.page5,.page6,.page7,.page8,.page9,.page55{position: absolute;top: 0;
  left: 0;bottom: 0;right: 0;overflow: hidden;}
#arrowup{position: absolute;bottom: 4%;left: 45%;width: 10%;z-index: 200;
  -webkit-animation:arrowup 2s 1s infinite ease forwards;}
#page_box{position: relative;overflow: hidden;-webkit-box-flex:1;}
#share{position: absolute;top: 0;left: 0;right: 0;bottom: 0;width: 100%;display: none;
  z-index: 9999999}


.swiper-slide
{
    text-align: center;
    font-size: 18px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    opacity: 0.4;
}
.swiper-slide-next
{
    opacity: 1;
}
.videobox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 99;
    display: none;
}

.swiperwwj{position: absolute;top: 90%;left: 0;width: 150%;
    margin: 0 -25%!important;}
	.swiperwwj img{width: 96%;
    margin: 0 2%;
    display: block;}
div[data-video]{position: absolute;top: 18%;left: 10%;width: 80%;height: 9%;}
.a1{position: absolute;top: 30.7%;left: 9%;width: 26%;height: 2%;}
.a2{position: absolute;top: 30.7%;left: 37%;width: 26%;height: 2%;}
.a3{position: absolute;top: 30.7%;left: 65%;width: 26%;height: 2%;}
.a4{position: absolute;top: 87%;left: 65%;width: 26%;height: 2%;}

@-webkit-keyframes road1{
  0%    {width: 8%}
  100%  {width: 93%}
}
@-webkit-keyframes road2{
  0%    {height: 45%}
  100%  {height: 100%}
}
@-webkit-keyframes road3{
  0%    {width: 3%}
  100%  {width: 100%}
}
.banner{position: relative;}
.tao1{position: absolute;bottom: 54%;left: 31%;width: 13%;}
.tao2{position: absolute;bottom: 54%;left: 56%;width: 10%;}
@-webkit-keyframes tao{
  0%    {-webkit-transform:translateY(1%);}
  50%    {-webkit-transform:translateY(10%);}
  100%  {-webkit-transform:translateY(1%);}
}
.tao1 img:first-child{position: absolute;top: 0;left: 0;}
  .show .tao1 img:first-child{-webkit-animation:tao 1.5s 0s ease infinite;}
.show .tao2 img:first-child{position: absolute;top: 1%;left: 0;}

@-webkit-keyframes zhang{
  0%    {opacity: 0;-webkit-transform:scale(2);}
  100%  {opacity: 1;-webkit-transform:scale(1);}
}
@-webkit-keyframes r_1top{
  0%    {-webkit-transform:translateY(30%);}
  100%  {-webkit-transform:translateY(1%);}
}
.road{position: absolute;top: 74%;left: 0;width: 100%;}
  .roadline{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
    .roadline div{position: absolute;overflow: hidden;}
    .move .roadline div:nth-child(1){top: 0;left: 0;width: 8%;height: 56%;-webkit-animation:road1 5s 0s linear forwards;}
      .roadline div:nth-child(1) img{position: absolute;top: 0;left: 0}
    .move .roadline div:nth-child(2){top: 0;right: 0;width: 7%;height: 45%;-webkit-animation:road2 1.5s 5s linear forwards;}
      .roadline div:nth-child(2) img{position: absolute;top: 0;right: 0}
    .move .roadline div:nth-child(3){bottom: 0;right: 0;width: 3%;height: 20%;-webkit-animation:road3 5s 6.2s linear forwards;}
      .roadline div:nth-child(3) img{position: absolute;bottom: 0;right: 0}
.r_1,.r_2,.r_3,.r_4,.r_5,.r_6{position: absolute;top: 0;left: 0;width: 100%;}
.r_anim>img,.r_anim>div{position: absolute;top: 0;left: 0}
.r_anim>img:first-child{position: relative;}

@-webkit-keyframes r_1chi{
  0%    {width: 0%}
  100%  {width: 100%}
}
  .r_anim .r_1zhang{top: 21%;left: 20%;width: 35%;z-index: 2;opacity: 0}
  .move .r_anim .r_1zhang{-webkit-animation:zhang 1s 0.4s ease-in forwards;}
  .r_anim .r_1top{z-index: 1;-webkit-transform:translateY(30%);}
  .move .r_anim .r_1top{-webkit-animation:r_1top 1s 0s ease forwards;}
  .r_1chi{height: 100%;width: 100%}
  .r_1chi div{position: absolute;top: 0;left: 0;width: 0;height: 100%;overflow: hidden;}
    .move .r_1chi div{-webkit-animation:r_1chi 1s 0s ease forwards;}
  .r_1chi img{width: auto;height: 100%;position: absolute;top: 0;left: 0}
  .r_anim .r_1title{top: -30%;left: 15%;width: 70%}

@-webkit-keyframes r_2top{
  0%    {-webkit-transform:translateY(20%);}
  100%  {-webkit-transform:translateY(1%);}
}
  .r_anim .r_2top{top: 12%;left: 43%;width: 35%;z-index: 1;-webkit-transform:translateY(20%);}
    .move .r_anim .r_2top{-webkit-animation:r_2top 1s 2s ease forwards;}
  .r_anim .r_2bottom{top: 12%;left: 43%;width: 35%;}
  .r_anim .r_2zhang{top: 31%;left: 26%;width: 45%;z-index: 2;opacity: 0}
  .move .r_anim .r_2zhang{-webkit-animation:zhang 1s 2.4s ease-in forwards;}
  .r_anim .r_2title{top: -30%;left: 25%;width: 81%}


@-webkit-keyframes blink{
  0%    {opacity: 0;}
  33%    {opacity: 1;}
  66%    {opacity: 0;}
  100%  {opacity: 1;}
}
@-webkit-keyframes bigger{
  0%    {opacity: 0;-webkit-transform:scale(0.3);}
  100%  {opacity: 1;-webkit-transform:scale(1);}
}

  .r_anim .r_3title{top: -22%;left: 30%;width: 60%}
  .r_anim .r_3water1{top: 29%;left: 54%;width: 29%;opacity: 0}
    .move .r_anim .r_3water1{-webkit-animation:blink 1.5s 3.8s ease forwards;}
  .r_anim .r_3water2{top: 29%;left: 54%;width: 29%;opacity: 0}
    .move .r_anim .r_3water2{-webkit-animation:blink 1.5s 4s ease forwards;}
  .r_anim .r_3three{top: 29%;left: 54%;width: 29%;opacity: 0}
    .move .r_anim .r_3three{-webkit-animation:blink 1.5s 4.1s ease forwards;}
  .r_anim .r_3light{top: 29%;left: 54%;width: 29%;opacity: 0;-webkit-transform-origin:60% 100%;}
    .move .r_anim .r_3light{-webkit-animation:bigger 1.5s 4s ease forwards;}
  .r_anim .r_3wave{top: 29%;left: 54%;width: 29%;opacity: 0;-webkit-transform-origin:50% 70%;}
    .move .r_anim .r_3wave{-webkit-animation:bigger 1.5s 4s ease forwards;}
  .r_anim .r_3zhang{top: 51%;left: 60%;width: 35%;z-index: 2;opacity: 0}
    .move .r_anim .r_3zhang{-webkit-animation:zhang 1s 4.5s ease-in forwards;}

@-webkit-keyframes hand{
  0%    {-webkit-transform:rotateZ(0deg);}
  25%    {-webkit-transform:rotateZ(10deg);}
  50%    {-webkit-transform:rotateZ(0deg);}
  75%    {-webkit-transform:rotateZ(10deg);}
  100%  {-webkit-transform:rotateZ(0deg);}
}
@-webkit-keyframes r_4man{
  0%    {-webkit-transform:translateX(0);}
  100%  {-webkit-transform:translateX(10%);}
}

  .r_anim .r_4title{top: -30%;left: -60%;width: 210%}
  .r_anim .r_4hand{top: 0;left: 20%;width: 40%;-webkit-transform-origin:0 100%;}
    .move .r_anim .r_4hand{-webkit-animation:hand 1.5s 6.2s ease forwards;}
  .r_anim .r_4person{top: 45%;left: 35%;width: 55%;}
    .move .r_anim .r_4person{-webkit-animation:r_4man 1.5s 6.2s ease forwards;}
  .r_anim .r_4zhang{top: 17%;left: 40%;width: 65%;z-index: 2;opacity: 0}
    .move .r_anim .r_4zhang{-webkit-animation:zhang 1s 7s ease-in forwards;}
  .r_anim .r_4pic{top: 0;left: -90%;width: 60%;}

@-webkit-keyframes r_5durex{
  0%    {-webkit-transform:translateX(0);}
  100%  {-webkit-transform:translateX(4%);}
}
  .r_anim .r_5title{top: -38%;left: -40%;width: 170%}
  .r_anim .r_5pool{top: 63%;left: -80%;width: 250%}
  .r_anim .r_5durex{top: 63%;left: -87%;width: 250%}
    .move .r_anim .r_5durex{-webkit-animation:r_5durex 1s 8.5s ease forwards;}
  .r_anim .r_5zhang1{top: 37%;left: -30%;width: 75%;z-index: 2;opacity: 0}
    .move .r_anim .r_5zhang1{-webkit-animation:zhang 1s 8.5s ease-in forwards;}
  .r_anim .r_5zhang2{top: 117%;left: 10%;width: 75%;z-index: 2;opacity: 0}
    .move .r_anim .r_5zhang2{-webkit-animation:zhang 1s 8.7s ease-in forwards;}
  .r_anim .r_5wave{top: 63%;left: -80%;width: 250%}

@-webkit-keyframes bigger2{
  0%    {opacity: 0;-webkit-transform:scale(0.3);}
  60%  {opacity: 1;-webkit-transform:scale(4);}
  100%  {opacity: 0;-webkit-transform:scale(4);}
}
  .r_anim .r_6title{top: -27%;left: 49%;width: 60%;}
  .r_anim .r_6person{top: -17%;left: 19%;width: 53%;opacity: 0}
    .move .r_anim .r_6person{-webkit-animation:fadein 1s 10s ease forwards;}
  .r_anim .r_6person2{top: 15%;left: 80%;width: 28%;opacity: 0}
    .move .r_anim .r_6person2{-webkit-animation:fadein 1s 10s ease forwards;}
  .r_anim .r_6fire{top: -17%;left: 19%;width: 53%;opacity: 0;-webkit-transform-origin:40% 40%;}
    .move .r_anim .r_6fire{-webkit-animation:bigger2 2s 10.5s ease forwards;}
  .r_anim .r_6zhang{top: 33%;left: 56%;width: 35%;opacity: 0}
    .move .r_anim .r_6zhang{-webkit-animation:zhang 1s 10.5s ease-in forwards;}

.r_1{position: absolute;top: 12%;left: 8%;width: 25%;opacity: 0;-webkit-transition:0.5s all ease;}
  .move .r_1{-webkit-animation:fadein 1s 0s ease forwards;}
.r_2{position: absolute;top: 11%;left: 40%;width: 20%;opacity: 0;-webkit-transition:0.5s all ease;}
  .move .r_2{-webkit-animation:fadein 1s 2s ease forwards;}
.r_3{position: absolute;top: 6%;left: 65%;width: 27%;opacity: 0;-webkit-transition:0.5s all ease;}
  .move .r_3{-webkit-animation:fadein 1s 4s ease forwards;}
.r_4{position: absolute;top: 63%;left: 78%;width: 10%;opacity: 0;-webkit-transition:0.5s all ease;}
  .move .r_4{-webkit-animation:fadein 1s 6.5s ease forwards;}
.r_5{position: absolute;top: 67%;left: 46%;width: 11%;opacity: 0;-webkit-transition:0.5s all ease;}
  .move .r_5{-webkit-animation:fadein 1s 8s ease forwards;}
.r_6{position: absolute;top: 63%;left: 5%;width: 19%;opacity: 0;-webkit-transition:0.5s all ease;}
  .move .r_6{-webkit-animation:fadein 1s 10s ease forwards;}

@-webkit-keyframes line1{
  0%    {width: 0%;}
  40%  {width: 48%;}
  100%  {width: 48%;}
}
@-webkit-keyframes line2{
  0%    {height: 56%;}
  40%  {height: 91%;}
  100%  {height: 91%;}
}
@-webkit-keyframes thunder{
  0%    {opacity: 0;-webkit-transform:rotateZ(0deg);}
  40%    {opacity: 0;-webkit-transform:rotateZ(0deg);}
  43%    {opacity: 1;-webkit-transform:rotateZ(10deg);}
  46%    {opacity: 1;-webkit-transform:rotateZ(0deg);}
  49%    {opacity: 1;-webkit-transform:rotateZ(10deg);}
  52%    {opacity: 1;-webkit-transform:rotateZ(0deg);}
  55%    {opacity: 1;-webkit-transform:rotateZ(10deg);}
  58%    {opacity: 1;-webkit-transform:rotateZ(0deg);}
  61%    {opacity: 1;-webkit-transform:rotateZ(10deg);}
  64%    {opacity: 1;-webkit-transform:rotateZ(0deg);}
  67%    {opacity: 1;-webkit-transform:rotateZ(10deg);}
  70%    {opacity: 1;-webkit-transform:rotateZ(0deg);}
  73%    {opacity: 1;-webkit-transform:rotateZ(10deg);}
  76%    {opacity: 1;-webkit-transform:rotateZ(0deg);}
  79%    {opacity: 1;-webkit-transform:rotateZ(10deg);}
  82%    {opacity: 0;-webkit-transform:rotateZ(0deg);}
  100%  {opacity: 0;-webkit-transform:rotateZ(0deg);}
}
@-webkit-keyframes hand2{
  0%    {opacity:1;-webkit-transform:rotateZ(0deg);}
  25%    {opacity:1;-webkit-transform:rotateZ(10deg);}
  50%    {opacity:1;-webkit-transform:rotateZ(0deg);}
  75%    {opacity:1;-webkit-transform:rotateZ(10deg);}
  100%  {opacity:1;-webkit-transform:rotateZ(0deg);}
}
.man{position: absolute;top: 42.5%;left: 43%;width: 10%;}
.machine{position: absolute;top: 58.3%;left: 7.7%;width: 50%;}
  .r_zhu{position: absolute;top: 0;left: 0;width: 100%;z-index: 1}
  .r_line1{position: absolute;top: 0;right: 0;width: 100%;height: 100%}
    .r_line1 div{position: absolute;top: 0;right: 0;height: 100%;overflow: hidden;width: 0%}
    .kai .r_line1 div{-webkit-animation:line1 5s 0s ease-out forwards;}
    .r_line1 img{position: absolute;height: 100%;width: auto;right: 0;top: 0}
  .r_line2{position: absolute;top: 0;left: 0;width: 100%;height: 100%}
    .r_line2 div{position: absolute;top: 0;right: 0;width: 100%;overflow: hidden;height: 56%}
    .kai .r_line2 div{-webkit-animation:line2 5s 0s ease-out forwards;}
    .r_line2 img{position: absolute;left: 0;top: 0}
.thunder{position: absolute;top: 58.2%;left: 6%;width: 13%;-webkit-transform-origin:60% 100%;
  opacity: 0}
  .dian .thunder{-webkit-animation:hand2 1s 0s ease infinite;}

.taotao{position: absolute;top: 58.8%;left: 13.6%;width: 44%;}
  .taotao img{position: absolute;top: 0;left: 0;opacity: 0}
.new_menu{position: fixed;top: 0;left: 0;width: 100%;height: 100%;display: none;
  background: rgba(0,0,0,0.9);z-index: 2}
  .new_menu.on{display: block;}
.new_menubtn{position: absolute;top: 2%;right: 110%;width: 20%;z-index: 1}
  .new_menubtn img{position: absolute;top: 0;left: 0;display: none;}
  .new_menubtn img:first-child,.on .new_menubtn img:last-child{display: block;}
  .on .new_menubtn img:first-child{display: none;}
  .right{position: fixed;top: 0;left: 100%;width: 44%;height: 100%;text-align: center;
    background: #fff;z-index: 11;-webkit-transition:0.5s all ease;-webkit-transform:translateX(0%);}
    .right a{text-decoration: none;display: block;}
  .menu_title{font-size: 1rem;line-height: 3rem;color: #fff;background:#3ea2da;}
    .menu_title::before{content: "";background:url(https://m.durex.com.cn/images2/icon.png) no-repeat;
    background-size:auto 100%;-webkit-transform:translateY(25%);display: inline-block;
    width:1.5rem;margin-right: 0.5rem;height:1.5rem;z-index: 100}
    .menu_btn a{height: 2.5rem;line-height: 2.5rem;color: #000;font-size: 0.9rem;
      border-bottom: 1px solid #cdcdcd}
      .menu_btn a{background: #f1f1f1}
      .menu_btn.open a:not(.topic){display: block;}
      .menu_btn a:not(.topic){display: none;}
      .menu_btn a:first-child{background: #fff;font-size: 1rem}
      .menu_btn a:first-child::before{content: "";background:url(https://m.durex.com.cn/images2/add.png) no-repeat;
    background-size:auto 100%;display: inline-block;
    width:0.7rem;margin-right: 0.5rem;height:0.7rem;z-index: 100}
      .menu_btn.open a:first-child::before{background:url(https://m.durex.com.cn/images2/minus.png) no-repeat;background-size:auto 100%;}
    .kepu{height: 2.5rem;line-height: 2.5rem;color: #000;font-size: 1rem;
      border-bottom: 1px solid #cdcdcd;display: block;text-decoration: none;padding-left:0.5rem;}

    .kepu::before{content: "";background:url(https://m.durex.com.cn/images2/back.png) no-repeat; 
    background-size:100% auto;-webkit-transform:translateY(25%);display: inline-block;
    width:1.2rem;margin-right: 0.5rem;height:1.2rem;z-index: 100}

@-webkit-keyframes menuon{
  0%    {-webkit-transform:translateX(0);}
  100%  {-webkit-transform:translateX(-100%);}
}
  .right.on{-webkit-transform:translateX(-100%);}