@font-face { font-family:"MiSans Medium"; src:url("../../../../static/css/font/MiSans/MiSans-Medium.woff2")}
@font-face { font-family:"MiSans Regular"; src:url("../../../../static/css/font/MiSans/MiSans-Regular.woff2")}
@font-face { font-family:"MiSans Light"; src:url("../../../../static/css/font/MiSans/MiSans-Light.woff2")}
@font-face { font-family:"MiSans Semibold"; src:url("../../../../static/css/font/MiSans/MiSans-Semibold.woff2")}
@font-face { font-family:"MiSans Heavy"; src:url("../../../../static/css/font/MiSans/MiSans-Heavy.woff2")}

.generic{ width:100%; min-width:320px; float:left; position:relative; overflow:hidden}
.generic .box{ width:430px; position:relative; left:50%; margin:0 0 0 -215px}
.generic .tit_box{ width:100%; float:left; position:relative; margin-top:72px; z-index:10}
.generic .t_1{ width:100%; float:left; position:relative; overflow:hidden; font-size:23px; line-height:31px; padding-bottom:22px; font-family:"MiSans Medium"}
.generic .t_2{ width:100%; float:left; position:relative; overflow:hidden; line-height:21px; color: rgba(0,0,0,0.8); font-family:"MiSans Regular"}
.generic .img_box{ width:430px; float:left; position:absolute; top:0; left:0}
.generic .img_box img{ max-width:100%}

.main_1{ height:666px; background-image: linear-gradient(#F6F9FE,#fff)}
.main_1 .tit_box{ text-align: center; opacity:0}
.main_1 .t_1{ padding-bottom: 4px}
.main_1 .t_1 .co_red{ color: #ff0000}
.main_1 .t_2{ font-size:16px; line-height:24px; letter-spacing:9px; text-indent: 9px}
.main_1 .img_box{ height:666px}

.main_2{ width: calc(100% - 40px); height:740px; padding: 0 20px}
.main_2 .imgs{ width: 100%; float: left; background-color: #F6FBFF; text-align: center; border-radius: 8px; overflow: hidden; opacity: 0}
.main_2 .imgs img{ float: left; position: relative; left: 50%}
.main_2 .img_1{ height: 174px; margin-bottom: 8px}
.main_2 .img_1 img{ width: 354px; margin-left: -177px}
.main_2 .img_2{ width: calc(50% - 4px); height: 202px; margin-bottom: 8px}
.main_2 .img_2 img{ width: 174px; margin-left: -87px}
.main_2 .img_3{ width: calc(50% - 4px); float: right; height: 202px; margin-bottom: 8px}
.main_2 .img_3 img{ width: 174px; margin-left: -87px}
.main_2 .img_4{ width: calc(65% - 8px); height: 229px; background-color: #F1F7FB; margin-bottom: 8px}
.main_2 .img_4 img{ width: 219px; margin-left: -109px}
.main_2 .wp_35{ width: 35%; height: 229px; float: right; margin-bottom: 8px}
.main_2 .img_5{ height: 110px; margin-bottom: 6px}
.main_2 .img_5 img{ width: 129px; margin-left: -64px}
.main_2 .img_6{ height: 113px; margin-bottom: 8px}
.main_2 .img_6 img{ width: 129px; margin-left: -64px}
.main_2 .img_7{ width: calc(50% - 4px); height: 66px; margin-bottom: 8px}
.main_2 .img_7 img{ width: 174px; margin-left: -87px}
.main_2 .img_8{ width: calc(50% - 4px); height: 66px; float: right; margin-bottom: 8px}
.main_2 .img_8 img{ width: 174px; margin-left: -87px}

.main_3 .tit_box{ width:100%; float: left; margin-top: 77px; text-align: center}
.main_3 .t_1{ font-size: 25px; color: #363a51; line-height: 30px; padding-bottom: 79px; opacity: 0; transition: opacity 0.2s ease; font-family:"MiSans Heavy";}
.main_3 .t_2{ font-size: 22px; color: #000; line-height: 32px; padding-bottom: 17px; opacity: 0; font-family:"MiSans Semibold"}
.main_3 .t_3{ width: 100%; float: left; text-align: center; line-height:21px; opacity: 0; color: rgba(0,0,0,0.8); font-family:"MiSans Regular"}
.main_3 ul{ width: 100%; float: left; padding-top: 47px}
.main_3 li{ width: 50%; height: 157px; float: left; position: relative; overflow: hidden}
.main_3 .bg_1{ background: url("../../images/accessories/vibrationMassageDevicePB2/3_1.jpg") no-repeat center 0; background-size: 215px 157px}
.main_3 .bg_2{ background: url("../../images/accessories/vibrationMassageDevicePB2/3_2.jpg") no-repeat center 0; background-size: 215px 157px}
.main_3 .bg_3{ background: url("../../images/accessories/vibrationMassageDevicePB2/3_3.jpg") no-repeat center 0; background-size: 215px 157px}
.main_3 .bg_4{ background: url("../../images/accessories/vibrationMassageDevicePB2/3_4.jpg") no-repeat center 0; background-size: 215px 157px}
.main_3 .img_1{ width: 134px; height: 118px; float: left; position: absolute; left: 50%; margin-left: -67px; bottom: 0; opacity: 0}
.main_3 .img_2{ width: 138px; height: 130px; float: left; position: absolute; left: 50%; margin-left: -69px; bottom: 0; opacity: 0}
.main_3 .img_3{ width: 118px; height: 116px; float: left; position: absolute; left: 50%; margin-left: -59px; bottom: 0; opacity: 0}
.main_3 .img_4{ width: 122px; height: 113px; float: left; position: absolute; left: 50%; margin-left: -61px; bottom: 0; opacity: 0}
.main_3 .tips{ width: calc(100% - 64px); float: left; font-size: 8px; line-height: 12px; color: rgba(0,0,0,0.6); text-align: center; padding: 30px 32px 0; font-family:"MiSans Light"}

.main_4 .tit_box{ width:100%; margin-top: 84px; text-align: center}
.main_4 .t_1{ padding-bottom: 19px; opacity: 0}
.main_4 .t_2{ width: calc(100% - 64px); padding: 0 32px; opacity: 0}
.main_4 .imgs_box{ width: 100%; height: 388px; float: left; position: relative; margin-top: 49px}
.main_4 .bg_4{ background-image:url("../../images/accessories/vibrationMassageDevicePB2/4.png"); background-repeat:no-repeat; background-size: 700px 500px}
.main_4 .video_box{ width: 490px; height: 233px; float: left; position:relative; left: 50%; margin-left: -245px; z-index: 1; transition: all 0.1s linear; transform-origin: top center; transforma: scale(0.61)}
.main_4 .video_box .video_bg{ width: 490px; height: 233px; float: left; position: absolute; background-position: 0 -200px; left: 0; z-index: 1}
.main_4 .video_box .video{ max-width: calc(100% - 16px); float: left; position: absolute; top: 8px; left: 8px; border-radius: 10px}
.main_4 .motion_box{ width: 213px; height: 98px; float: left; position: absolute; left: 50%; margin-left: -106px; top: 52px; z-index: 2}
.main_4 .motion_box .mImg_1{ width: 57px; height: 72px; float: left; position: absolute; bottom: 0; opacity: 0}
.main_4 .motion_box .mImg_2{ width: 77px; height: 98px; float: left; position: absolute; left: 31px; z-index: 2; opacity: 0}
.main_4 .motion_box .mImg_3{ width: 57px; height: 72px; float: left; position: absolute; left: 102px; bottom: 0; z-index: 1; opacity: 0}
.main_4 .motion_box .mImg_4{ width: 57px; height: 72px; float: left; position: absolute; right: 0; bottom: 0; opacity: 0}
.main_4 .shadow{ width: 100%; height: 65px; float: left; background-position: center 0; position: absolute; top: 139px; left: 0; opacity: 0}
.main_4 ul{ width: 50%; float: left; position: absolute; top: 189px; padding: 0 25%; z-index: 1}
.main_4 li{ width: 25%; height: 84px; float: left; position: relative; font-family:"MiSans Regular"; opacity: 0}
.main_4 li.wp_14{ width: 14%}
.main_4 li.wp_43{ width: 43%}
.main_4 li .lt_1{ width: 100%; float: left; font-size: 10px; color: rgba(0,0,0,0.8); text-align: center; line-height: 16px; position: absolute; left: 0; bottom: 0; transition: all 0.3s ease 3s}
.main_4 li .lt_1.cur{ font-size: 13px}
.main_4 li .ic{ float: left; position: absolute; left: 50%;}
.main_4 li .ic_1{ width: 54px; height: 40px; background-position: 0 -100px; margin-left: -27px; top: 7px; transition: all 0.3s ease 3s}
.main_4 li .ic_2{ width: 54px; height: 48px; background-position: -100px -100px; margin-left: -27px; top: 2px; transition: all 0.3s ease 3s}
.main_4 li .ic_3{ width: 28px; height: 55px; background-position: -200px -100px; margin-left: -14px; top: 1px; transition: all 0.3s ease 3s}
.main_4 li .ic_4{ width: 30px; height: 32px; background-position: -300px -100px; margin-left: -15px; top: 29px}
.main_4 li .ic_5{ width: 28px; height: 36px; background-position: -400px -100px; margin-left: -14px; top: 26px}
.main_4 li .ic_6{ width: 22px; height: 27px; background-position: -500px -100px; margin-left: -11px; top: 31px}
.main_4 li .ic_7{ width: 39px; height: 12px; background-position: -600px -100px; margin-left: -19px; top: 39px}
.main_4 li.dis .ic{ transform: scale(0.6) translateY(20px); opacity: 0.3}
.main_4 li.dis .lt_1{ font-size: 10px; bottom: 8px}
.main_4 .tips{ width: 100%; float: left; font-size: 8px; line-height: 12px; color: rgba(0,0,0,0.6); text-align: center; font-family:"MiSans Light"; opacity: 0}

@keyframes ul_4{ 0%{ width: 50%; padding: 0 25%} 100%{ width: 68%; padding: 0 16%}}


.main_5 .tit_box{ width:100%; margin-top: 84px; text-align: center}
.main_5 .t_1{ padding-bottom: 19px; opacity: 0}
.main_5 .t_2{ width: calc(100% - 64px); padding: 0 32px; opacity: 0}
.main_5 .video_box{ width: 80%; float: left; margin: 0 10%}
.main_5 .video_box .video{ max-width: 100%}
.main_5 ul{ width: 310px; float: left; position: relative; left: 50%; margin:18px 0 43px -155px}
.main_5 li{ width: 100%; float: left; padding-bottom: 10px; font-family:"MiSans Regular"}
.main_5 li .lt_1{ width: 36px; float: left; line-height: 24px; font-size: 8px; color: rgba(0,0,0,0.8)}
.main_5 li .lt_1 .fs_21{ font-size: 21px; color: #000; font-style: italic}
.main_5 li .con{ width: calc(100% - 36px); float: left}
.main_5 li .lt_2{ float: left; line-height: 16px; font-size: 15px; padding-right: 15px}
.main_5 li .lt_3{ float: left; line-height: 16px; font-size: 8px; color: rgba(0,0,0,0.8); padding-top: 1px}
.main_5 li .lt_4{ float: right; line-height: 16px; font-size: 10px; color: rgba(0,0,0,0.6); padding-top: 1px}
.main_5 li .bar_box{ width: 100%; float: left; height: 4px; background-color: #DDD; border-radius: 50px; position: relative; overflow: hidden}
.main_5 li .bar_box .bar{ width: 0; height: 4px; float: left; background-color: #FF6514; border-radius: 50px; transition: all 1s ease}
.main_5 li .bar_box .bar_1{ width: 42%}
.main_5 li .bar_box .bar_2{ width: 57.3%}
.main_5 li .bar_box .bar_3{ width: 78%}

.main_6{ height:780px; background-color: #000}
.main_6 .box{ height:780px}
.main_6 .tit_box{ width:100%; margin-top:89px; left:0; position: absolute; text-align: center}
.main_6 .t_1{ font-size: 25px; line-height: 32px; color: #fff; opacity: 1; transition: opacity 0.2s ease; font-family:"MiSans Heavy"}
.main_6 .img_box{ top: 320px; opacity: 1; transition: opacity 0.2s ease}
.main_6 .tit_box_2{ top: 326px}
.main_6 .tit_box_2 .t_1{ padding-bottom: 17px; opacity: 0}
.main_6 .tit_box_2 .t_2{ width: calc(100% - 96px); padding: 0 48px; color: rgba(255,255,255,0.8); opacity: 0}
.main_6 ul{ width:62%; float:left; position: relative; left: 50%; margin:47px 0 0 -31%}
.main_6 li{ width:33.33%; float:left; padding-top:18px; font-size:10px; text-align:center; color: #fff; line-height:26px; background:url("../../images/accessories/vibrationMassageDevicePB2/6.png") no-repeat center 0; background-size: 100px 300px; opacity:0; font-family:"MiSans Regular"}
.main_6 .ic_2{ background-position:center -100px}
.main_6 .ic_3{ background-position:center -200px}

.main_7{ height:786px}
.main_7 .box{ height:786px}
.main_7 .tit_box{ margin-top: 53px; text-align: center}
.main_7 .t_1{ padding-bottom: 18px; opacity: 0}
.main_7 .t_2{ width: calc(100% - 96px); padding: 0 48px; opacity: 0}
.main_7 ul{ width:80%; float:left; position: relative; left: 50%; margin:49px 0 0 -40%}
.main_7 li{ width:33.33%; float:left; padding-top:25px; font-size:10px; text-align:center; line-height:12px; background:url("../../images/accessories/vibrationMassageDevicePB2/7.png") no-repeat center 0; background-size: 100px 300px; opacity:0; font-family:"MiSans Regular"}
.main_7 .ic_2{ background-position:center -100px}
.main_7 .ic_3{ background-position:center -200px}
.main_7 .tips{ width: 100%; float: left; font-size: 8px; line-height: 12px; color: #9d9b9b; text-align: center; position: absolute; bottom: 17px; font-family:"MiSans Light"}

.main_8{ height:500px; background-color: #E5E8EB}
.main_8 .box{ height:500px}
.main_8 .tit_box{ margin-top: 51px; text-align: center}
.main_8 .t_1{ padding-bottom: 20px; opacity: 1}
.main_8 .t_2{ width: calc(100% - 96px); padding: 0 48px; opacity: 1}
.main_8 .img_1{ width: 173px; height: 170px; float: left; position: absolute; top: 285px; left: 112px; z-index: 10; opacity: 0}
.main_8 .img_box{ top: 120px; opacity: 0}

.main_9{ height:660px}
.main_9 .box{ height:660px}
.main_9 .tit_box{ margin-top: 54px; text-align: center}
.main_9 .t_1{ padding-bottom: 17px; color: #fff; opacity: 0}
.main_9 .t_2{ width: calc(100% - 96px); color: rgba(255,255,255,0.8); padding: 0 48px; opacity: 0}
.main_9 ul{ width:50%; float:left; position: relative; margin:47px 0 0 25%}
.main_9 li{ width:33.33%; float:left; opacity: 0.3; cursor: pointer; font-family:"MiSans Regular"; transition: opacity 0.3s ease}
.main_9 li .ring{ width: 20px; height: 20px; float: left; border: 1px solid #fff; border-radius: 50px; position: relative; left: 50%; margin-left: -10px; opacity: 0}
.main_9 li .ring_1{ border-color: #63B4DD}
.main_9 li .ring_2{ border-color: #001AFF}
.main_9 li .ring_3{ border-color: #FF2B0F}
.main_9 li .lt_1{ width: 100%; float: left; font-size: 10px; color: #fff; text-align: center; line-height: 18px; padding-top: 3px; opacity: 0}
.main_9 li.cur{ opacity: 1}
.main_9 .imgs{ width: 234px; height: 277px; float: left; position: absolute; bottom: 0; left: 117px; z-index: 1}
.main_9 .img{ width: 146px; height: 128px; float: left; position: absolute; bottom: 149px; left: 117px; z-index: 2; opacity: 0; transition: opacity 0.3s ease}
.main_9 .img:first-child{ opacity: 1}

.main_10{ height:1138px}
.main_10 .box{ height:1138px}
.main_10 .tit_box{ margin-top: 393px; text-align: center}
.main_10 .t_1{ padding-bottom: 20px; opacity: 0}
.main_10 .t_1 .op_0{ opacity: 0}
.main_10 .t_2{ width: calc(100% - 96px); padding: 0 48px; opacity: 0}
.main_10 .img_box{ height:1138px}
.main_10 ul{ width: 350px; float: left; position: relative; left: 50%; margin:51px 0 0 -175px; z-index: 2}
.main_10 li{ width: calc(50% - 8px); height: 238px; margin: 0 4px; float: left; position: relative; font-family:"MiSans Regular"; opacity: 0}
.main_10 li .img{ width: 100%; height: 119px; overflow: hidden; border-radius: 10px; float: left}
.main_10 li .img img{ width: 167px; height: 119px; float: left; position: relative; left: 50%; margin-left: -83px}
.main_10 li .con{ width: calc(100% - 18px); float: left; padding: 17px 0 0 18px}
.main_10 li .lt_1{ float: left; font-size: 13px; line-height: 16px; padding: 0 4px 0 0}
.main_10 li .star_box{ width: 16px; height: 15px; float: left; position: relative}
.main_10 li .star_box .star_dis{ width: 16px; height: 15px; float: left; background: url("../../images/accessories/vibrationMassageDevicePB2/10.png") no-repeat; background-size: 50px 100px; position: absolute; top: 0; left: 0}
.main_10 li .star_box .star_cur{ width: 16px; height: 15px; float: left; background: url("../../images/accessories/vibrationMassageDevicePB2/10.png") no-repeat 0 -50px; background-size: 50px 100px; position: absolute; top: 0; left: 0; opacity: 0; z-index: 1}
.main_10 li .lt_2{ width: calc(100% - 8px); float: left; font-size: 10px; line-height: 16px; padding-top: 10px}
.main_10 li .tips{ width: 34px; height: 15px; overflow: hidden; float: left; background-color: #FF6514; color: #fff; font-size: 8px; text-align: center; line-height: 15px; position: absolute; border-radius: 4px; top: 106px; left: -7px; font-family:"MiSans Regular"}
.main_10 li .tips.v_2{ left: 138px}

@keyframes star{ 0%{ opacity: 0; transform: scale(3)} 100%{ opacity: 1; transform: scale(1)}}

.main_11{ height:669px}
.main_11 .box{ height:669px}
.main_11 .tit_box{ margin-top: 53px; text-align: center}
.main_11 .t_1{ padding-bottom: 16px; color: #fff; opacity: 0}
.main_11 .t_2{ width: calc(100% - 96px); color: rgba(255,255,255,0.8); padding: 0 48px; opacity: 0}
.main_11 ul{ width:84%; float:left; position: relative; left: 50%; margin:46px 0 0 -42%}
.main_11 li{ width:25%; float:left; padding-top:28px; font-size:10px; text-align:center; line-height:12px; color: rgba(255,255,255,0.8); background:url("../../images/accessories/vibrationMassageDevicePB2/11.png") no-repeat center 0; background-size: 100px 400px; opacity:0; font-family:"MiSans Regular"}
.main_11 .ic_2{ background-position:center -100px}
.main_11 .ic_3{ background-position:center -200px}
.main_11 .ic_4{ background-position:center -300px}
.main_11 .tips{ width: calc(100% - 128px); float: left; font-size: 8px; line-height: 12px; color: rgba(255,255,255,0.6); text-align: center; position: absolute; left: 64px; bottom: 15px; font-family:"MiSans Light"}

.main_12{ width: 100%; float: left; text-align: center}
.main_12 img{ max-width: 100%}

.main_15{ height:604px}
.main_15 .box{ height:604px}
.main_15 .tit_box{ margin-top: 54px; text-align: center}
.main_15 .t_1{ padding-bottom: 17px; color: #fff; opacity: 0}
.main_15 .t_2{ width: calc(100% - 96px); color: rgba(255,255,255,0.8); padding: 0 48px; opacity: 0}


@keyframes y_30{ 0%{ opacity:0; transform:translate3d(0,30px,0) rotate(0.0001deg)} 99.99%{ opacity:1; transform:translate3d(0,0,0) rotate(0.0001deg)} 100%{ opacity:1; transform:translate3d(0,0,0) rotate(0)}}
@-webkit-keyframes y_30{ 0%{ opacity:0; -webkit-transform:translate3d(0,30px,0) rotate(0.0001deg)} 99.99%{ opacity:1; -webkit-transform:translate3d(0,0,0) rotate(0.0001deg)} 100%{ opacity:1; -webkit-transform:translate3d(0,0,0) rotate(0)}}

@keyframes y_100{ 0%{ opacity:0; transform:translate3d(0,100px,0) rotate(0.0001deg)} 99.99%{ opacity:1; transform:translate3d(0,0,0) rotate(0.0001deg)} 100%{ opacity:1; transform:translate3d(0,0,0) rotate(0)}}
@-webkit-keyframes y_100{ 0%{ opacity:0; -webkit-transform:translate3d(0,100px,0) rotate(0.0001deg)} 99.99%{ opacity:1; -webkit-transform:translate3d(0,0,0) rotate(0.0001deg)} 100%{ opacity:1; -webkit-transform:translate3d(0,0,0) rotate(0)}}