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

.generic{ width:100%; min-width:930px; float:left; overflow:hidden; position:relative}
.generic .box{ width:1920px; overflow:hidden; float:left; position:absolute; left:50%; margin-left:-960px}
.generic .tit_box{ width:720px; float:left; position:absolute; opacity:1; z-index:10}
.generic .t_1{ width:100%; float:left; font-size:60px; line-height:72px; padding-bottom:19px; font-family:"MiSans Medium"}
.generic .t_2{ width:100%; float:left; font-size:24px; line-height:48px; padding-bottom:32px; color: rgba(0,0,0,0.8); font-family:"MiSans Regular"}
.generic .img_box{ width:1920px; float:left; position:absolute; top:0; left:0}
.generic .img_box img{ width:1920px; float:left; position:absolute; top:0; left:0}

.sticky{ width: 100%; float: left; position:relative}
.sticky .sbox{ width: 100%; height: 0px; visibility:visible; position:sticky; top: 0}

.main_1{ height:1193px}
.main_1 .box{ height:1193px; background-color: #F6F9FE}
.main_1 .tit_box{ width:100%; height:300px; top:196px; left:0; opacity:0; text-align: center}
.main_1 .t_1{ font-size:50px; line-height:60px}
.main_1 .t_1 .co_red{ color: #ff0000}
.main_1 .t_2{ font-size:36px; line-height:40px; letter-spacing:18px; text-indent: 18px}
.main_1 .img_box{ height:1193px; overflow: hidden}
.main_1 .img_box img{ opacity: 0}

.main_2{ height:1700px}
.main_2 .box{ width: 1300px; height:1446px; margin:254px 0 0 -650px}
.main_2 .box img{ max-width: 100%}
.main_2 .img_1{ position: absolute; top: 0; left: 0; opacity: 0}
.main_2 .img_2{ position: absolute; top: 0; left: 860px; opacity: 0}
.main_2 .img_3{ position: absolute; top: 439px; left: 0; opacity: 0}
.main_2 .img_4{ position: absolute; top: 439px; left: 660px; opacity: 0}
.main_2 .img_5{ position: absolute; top: 879px; left: 0; opacity: 0}
.main_2 .img_6{ position: absolute; top: 879px; left: 421px; opacity: 0}
.main_2 .img_7{ position: absolute; top: 879px; left: 842px; opacity: 0}
.main_2 .img_8{ position: absolute; top: 1087px; left: 842px; opacity: 0}

.main_3{ height:3000px}
.main_3 .box{ height:3000px}
.main_3 .tit_box{ width:100%; height:1200px; top:90px; left:0; text-align: center}
.main_3 .t_1{ font-size: 80px; color: #363a51; line-height: 96px; padding-bottom: 250px; opacity: 0; transition: opacity 0.2s ease; font-family:"MiSans Heavy";}
.main_3 .t_2{ font-size: 60px; color: #000; line-height: 72px; padding-bottom: 77px; opacity: 0; font-family:"MiSans Semibold"}
.main_3 .t_3{ width:100%; float:left; font-size:24px; line-height:48px; padding-bottom:32px; color: rgba(0,0,0,0.8); font-family:"MiSans Regular"; opacity: 0}
.main_3 ul{ width: 100%; float: left; position: absolute; top: 1271px; left: 0}
.main_3 li{ width: 50%; height: 700px; float: left; position: relative; overflow: hidden}
.main_3 .bg_1{ background: url("../../images/accessories/vibrationMassageDevicePB2/3_1.jpg") no-repeat center 0}
.main_3 .bg_2{ background: url("../../images/accessories/vibrationMassageDevicePB2/3_2.jpg") no-repeat center 0}
.main_3 .bg_3{ background: url("../../images/accessories/vibrationMassageDevicePB2/3_3.jpg") no-repeat center 0}
.main_3 .bg_4{ background: url("../../images/accessories/vibrationMassageDevicePB2/3_4.jpg") no-repeat center 0}
.main_3 .img_1{ width: 574px; height: 518px; float: left; position: absolute; left: 50%; margin-left: -277px; bottom: 0; opacity: 0}
.main_3 .img_2{ width: 589px; height: 533px; float: left; position: absolute; left: 50%; margin-left: -298px; bottom: 0; opacity: 0}
.main_3 .img_3{ width: 480px; height: 500px; float: left; position: absolute; left: 50%; margin-left: -254px; bottom: 0; opacity: 0}
.main_3 .img_4{ width: 533px; height: 498px; float: left; position: absolute; left: 50%; margin-left: -311px; bottom: 0; opacity: 0}
.main_3 .tips{ width: 100%; float: left; font-size: 20px; color: rgba(0,0,0,0.6); text-align: center; position: absolute; top: 2768px; left: 0; font-family:"MiSans Light"}

.main_4{ height:1737px}
.main_4 .box{ height:1737px}
.main_4 .tit_box{ width:100%; height:500px; top:27px; left:0; text-align: center}
.main_4 .t_1{ padding-bottom: 81px; opacity: 0}
.main_4 .t_2{ opacity: 0}
.main_4 .img_box{ top: 589px}
.main_4 .bg_4{ background-image:url("../../images/accessories/vibrationMassageDevicePB2/4.png"); background-repeat:no-repeat}
.main_4 .video_box{ width: 1920px; height: 913px; float: left; position: absolute; left: 0; z-index: 1; transition: all 0.1s linear; transform-origin: top center}
.main_4 .video_box .video_bg{ width: 1920px; height: 913px; float: left; position: absolute; background-position: 0 -600px; left: 0; z-index: 1}
.main_4 .video_box .video{ max-width: calc(100% - 78px); float: left; position: absolute; top: 37px; left: 39px; border-radius: 10px}
.main_4 .motion_box{ width: 696px; height: 319px; float: left; position: absolute; left: 50%; margin-left: -348px; top: 172px; z-index: 2}
.main_4 .motion_box .mImg_1{ width: 186px; height: 235px; top:auto; bottom: 0; opacity: 0}
.main_4 .motion_box .mImg_2{ width: 253px; height: 319px; left: 104px; z-index: 2; opacity: 0}
.main_4 .motion_box .mImg_3{ width: 186px; height: 235px; left: 337px; top: auto; bottom: 0; z-index: 1; opacity: 0}
.main_4 .motion_box .mImg_4{ width: 186px; height: 235px; left: auto; right: 0; top: auto; bottom: 0; opacity: 0}
.main_4 .shadow{ width: 100%; height: 213px; float: left; background-position: center 0; position: absolute; top: 457px; left: 0; opacity: 0}
.main_4 ul{ width: 900px; float: left; position: absolute; top: 586px; left: 50%; margin-left: -450px; z-index: 1}
.main_4 li{ width: 14.2%; height: 177px; float: left; position: relative; font-family:"MiSans Regular"; opacity: 0}
.main_4 li .lt_1{ width: 100%; float: left; font-size: 24px; color: rgba(0,0,0,0.8); text-align: center; line-height: 40px; position: absolute; left: 0; bottom: 0; transition: all 0.3s ease 2.6s}
.main_4 li .lt_1.cur{ font-size: 32px}
.main_4 li .ic{ float: left; position: absolute; left: 50%;}
.main_4 li .ic_1{ width: 60px; height: 65px; background-position: 0 -300px; margin-left: -30px; top: 17px}
.main_4 li .ic_2{ width: 56px; height: 72px; background-position: -200px -300px; margin-left: -28px; top: 15px}
.main_4 li .ic_3{ width: 102px; height: 76px; background-position: -400px -300px; margin-left: -52px; top: 13px; transition: all 0.3s ease 2.6s}
.main_4 li .ic_4{ width: 104px; height: 91px; background-position: -600px -300px; margin-left: -52px; top: 3px; transition: all 0.3s ease 2.6s}
.main_4 li .ic_5{ width: 53px; height: 105px; background-position: -800px -300px; margin-left: -26px; top: 0; transition: all 0.3s ease 2.6s}
.main_4 li .ic_6{ width: 46px; height: 54px; background-position: -1000px -300px; margin-left: -23px; top: 23px}
.main_4 li .ic_7{ width: 77px; height: 22px; background-position: -1200px -300px; margin-left: -38px; top: 40px}
.main_4 li .dis{ transform: scale(0.6); opacity: 0.3}
.main_4 .tips{ width: 100%; float: left; font-size: 20px; color: rgba(0,0,0,0.6); text-align: center; position: absolute; top: 1464px; left: 0; font-family:"MiSans Light"}

@keyframes ul_4{ 0%{ width: 900px; margin-left: -450px} 100%{ width: 1350px; margin-left: -675px}}


.main_5{ height:1616px}
.main_5 .box{ height:1616px}
.main_5 .tit_box{ width:1250px; height:240px; top:0; left:50%; margin-left: -625px; opacity: 0}
.main_5 .t_1{ width: 558px; padding-top: 7px}
.main_5 .t_2{ width: calc(100% - 564px)}
.main_5 .img_box{ top: 229px}
.main_5 .video_box{ width: 1250px; float: left; position: absolute; top: 219px; left: 50%; margin-left: -640px; z-index: 1}
.main_5 .video_box .video{ max-width: 100%}
.main_5 ul{ width: 940px; float: left; position: absolute; top: 1176px; left: 50%; margin-left: -470px}
.main_5 li{ width: 100%; float: left; padding-bottom: 30px; font-family:"MiSans Regular"}
.main_5 li .lt_1{ width: 103px; float: left; line-height: 60px; font-size: 24px; color: rgba(0,0,0,0.8)}
.main_5 li .lt_1 .fs_60{ font-size: 60px; color: #000; font-style: italic}
.main_5 li .con{ width: calc(100% - 103px); float: left}
.main_5 li .lt_2{ float: left; line-height: 44px; font-size: 42px; padding-right: 24px}
.main_5 li .lt_3{ float: left; line-height: 28px; font-size: 24px; color: rgba(0,0,0,0.8); padding-top: 13px}
.main_5 li .lt_4{ float: right; line-height: 28px; font-size: 24px; color: rgba(0,0,0,0.6); padding-top: 13px}
.main_5 li .bar_box{ width: 100%; float: left; height: 11px; background-color: #DDD; border-radius: 50px; position: relative; overflow: hidden; margin-top: 6px}
.main_5 li .bar_box .bar{ width: 0; height: 11px; 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:1830px; background-color: #000}
.main_6 .box{ height:2630px}
.main_6 .tit_box{ width:100%; height:500px; top:255px; left:0; text-align: center}
.main_6 .t_1{ font-size: 80px; line-height: 90px; color: #fff; opacity: 0; transition: opacity 0.2s ease; font-family:"MiSans Heavy"}
.main_6 .img_box{ top: 680px; opacity: 0; transition: opacity 0.2s ease}
.main_6 .tit_box_2{ top: 986px}
.main_6 .tit_box_2 .t_1{ font-size: 60px; line-height: 72px; padding-bottom: 77px; opacity: 0}
.main_6 .tit_box_2 .t_2{ color: rgba(255,255,255,0.8); opacity: 0}
.main_6 ul{ width:46%; float:left; position: relative; left: 50%; margin:59px 0 0 -23%}
.main_6 li{ width:33.33%; float:left; padding-top:60px; font-size:24px; text-align:center; color: #fff; line-height:36px; background:url("../../images/accessories/vibrationMassageDevicePB2/6.png") no-repeat center 0; opacity:0; font-family:"MiSans Regular"}
.main_6 .ic_2{ background-position:center -200px}
.main_6 .ic_3{ background-position:center -400px}

.main_7{ height:1161px}
.main_7 .box{ height:1161px}
.main_7 .tit_box{ width:640px; height: 960px; top:208px; left:968px}
.main_7 .t_1{ padding-bottom: 63px; opacity: 0}
.main_7 .t_2{ opacity: 0}
.main_7 ul{ width:108%; float:left; position: relative; margin:53px 0 0 -7%}
.main_7 li{ width:33.33%; float:left; padding-top:70px; font-size:24px; text-align:center; line-height:30px; background:url("../../images/accessories/vibrationMassageDevicePB2/7.png") no-repeat center 0; opacity:0; font-family:"MiSans Regular"}
.main_7 .ic_2{ background-position:center -200px}
.main_7 .ic_3{ background-position:center -400px}
.main_7 .tips{ width: 100%; float: left; font-size: 20px; color: rgba(0,0,0,0.6); position: absolute; bottom: 45px; font-family:"MiSans Light"}

.main_8{ height:1121px; background-color: #E5E8EB}
.main_8 .box{ height:1121px}
.main_8 .tit_box{ width:100%; top:157px; left:0; text-align: center}
.main_8 .t_1{ padding-bottom: 85px}
.main_8 .t_2{ color: rgba(0,0,0,0.5)}
.main_8 .img_box{ top:200px; opacity: 0}
.main_8 .img_1{ width: 462px; height: 451px; float: left; position: absolute; top: 595px; left: 686px; z-index: 10; opacity: 0}

.main_9{ height:1018px}
.main_9 .box{ height:1018px}
.main_9 .tit_box{ width:540px; top:194px; left:330px}
.main_9 .t_1{ color: #fff; padding-bottom: 82px; opacity: 0}
.main_9 .t_2{ color: rgba(255,255,255,0.8); opacity: 0}
.main_9 ul{ width:84%; float:left; position: relative; margin:53px 0 0 -6%}
.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: 47px; height: 47px; float: left; border: 3px solid #fff; border-radius: 50px; position: relative; left: 50%; margin-left: -26px; 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: 24px; color: #fff; text-align: center; line-height: 28px; padding-top: 23px; opacity: 0}
.main_9 li.cur{ opacity: 1}
.main_9 .imgs{ width: 531px; height: 801px; float: left; position: absolute; top: 218px; left: 1003px; z-index: 1}
.main_9 .img{ width: 330px; height: 290px; float: left; position: absolute; top: 218px; left: 1003px; z-index: 2; opacity: 0; transition: opacity 0.4s linear}
.main_9 .img:first-child{ opacity: 1}

.main_10{ height:2972px}
.main_10 .box{ height:2972px}
.main_10 .tit_box{ width:100%; top:946px; left:0; text-align: center}
.main_10 .t_1{ font-size: 65px; line-height: 78px; padding-bottom: 82px; opacity: 0}
.main_10 .t_1 .op_0{ opacity: 0}
.main_10 .t_2{ font-size: 28px; opacity: 0}
.main_10 .img_box{ height:2972px; background-color: #E8EDF5}
.main_10 ul{ width: 1002px; float: left; position: absolute; top: 1416px; left: 50%; margin-left: -501px}
.main_10 li{ width: 481px; height: 686px; margin: 0 10px; float: left; position: relative; font-family:"MiSans Regular"; opacity: 0}
.main_10 li .img{ width: 481px; height: 341px; float: left}
.main_10 li .con{ width: calc(100% - 90px); float: left; padding: 53px 0 0 52px}
.main_10 li .lt_1{ float: left; font-size: 32px; line-height: 34px; padding: 8px 24px 0 0}
.main_10 li .star_box{ width: 44px; height: 43px; float: left; position: relative; margin-right: 1px}
.main_10 li .star_box .star_dis{ width: 44px; height: 43px; float: left; background: url("../../images/accessories/vibrationMassageDevicePB2/10.png") no-repeat; position: absolute; top: 0; left: 0}
.main_10 li .star_box .star_cur{ width: 44px; height: 43px; float: left; background: url("../../images/accessories/vibrationMassageDevicePB2/10.png") no-repeat 0 -100px; position: absolute; top: 0; left: 0; opacity: 0; z-index: 1}
.main_10 li .lt_2{ width: 100%; float: left; font-size: 24px; line-height: 48px; padding-top: 32px}
.main_10 li .tips{ width: 98px; height: 44px; float: left; background-color: #FF6514; color: #fff; font-size: 20px; text-align: center; line-height: 44px; position: absolute; border-radius: 10px; top: 306px; left: -11px; font-family:"MiSans Regular"}
.main_10 li .tips.v_2{ left: 403px}

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

.main_11{ height:1423px}
.main_11 .box{ height:1423px}
.main_11 .tit_box{ width:100%; top:133px; left:0; text-align: center}
.main_11 .t_1{ color: #fff; padding-bottom: 76px; opacity: 0}
.main_11 .t_2{ color: rgba(255,255,255,0.8); opacity: 0}
.main_11 ul{ width:52%; float:left; position: relative; margin:24px 0 0 24%; font-family:"MiSans Regular"}
.main_11 li{ width:25%; float:left; padding-top:78px; font-size:24px; color: #fff; text-align:center; line-height:30px; background:url("../../images/accessories/vibrationMassageDevicePB2/11.png") no-repeat center 0; opacity:0}
.main_11 .ic_2{ background-position:center -200px}
.main_11 .ic_3{ background-position:center -400px}
.main_11 .ic_4{ background-position:center -600px}
.main_11 .tips{ width: 100%; float: left; font-size: 20px; color: rgba(255,255,255,0.6); text-align: center; line-height: 36px; position: absolute; left: 0; bottom: 37px}

.main_12{ height:1084px}
.main_12 .box{ height:1084px}
.main_12 .img_box{ overflow: hidden; height: 1084px}

.main_12_1{ height:1084px}
.main_12_1 .box{ height:1084px}

.main_13{ height:879px}
.main_13 .box{ height:879px}

.main_15{ height:1212px}
.main_15 .box{ height:1212px}
.main_15 .tit_box{ width:100%; top:133px; left:0; text-align: center}
.main_15 .t_1{ color: #fff; padding-bottom: 76px; opacity: 0}
.main_15 .t_2{ color: rgba(255,255,255,0.8); opacity: 0}

@media only screen and (min-width : 1960px){
	
}