@charset "utf-8";
/* CSS Document */

video{
    object-fit:fill;
 }
video::-internal-media-controls-download-button {
    display:none;
}
video::-webkit-media-controls-enclosure {
    overflow:hidden;
}
video::-webkit-media-controls-panel {
       overflow:hidden;
}


article, aside, figure, footer, header, nav, section, details, summary {
    display: block;
}

body { margin:0px; padding:0px; background:#fff; text-align:left; height:100vh;}

body{
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -moz-font-feature-settings: "liga", "kern";
    color:#323232;
    font-family:"Microsoft YaHei","Lucida Grande", "Lucida Sans Unicode", "STHeiti", "Helvetica","Arial","Verdana","sans-serif";
    font-size:20px;
    line-height:1.4;
    -webkit-text-size-adjust:none;
    letter-spacing:0.08em;
    
}

body,html,div{margin:0px;padding:0px;border:none;}
header,section,article,footer{
    clear: both;
}
ul,li{
    display: block;
    margin:0px;
    padding: 0px;
    list-style-type:none;

}

#main{
    width: 100%;
    height: 100%;
    position: absolute;
    overflow: hidden;
    background-color: #fff;
    background-repeat-x: no-repeat;
    background-repeat-y: repeat;
}
.hide_bg{
    background: #666666 url("../images/msg.jpg") center center no-repeat;
    width: 100%;
    height: 100%;
    position: absolute;
    background-position:50%;
    background-size: 30%;
}
.wrapper{
    width: 100%;
    height: 100%;

    /*width:640px;
    height: 1100px;*/
    transform-origin:0 0;
    -webkit-transform-origin:0 0;
    -moz-transform-origin:0 0;
    -o-transform-origin:0 0;
}

.swiper-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #fff;
    background-repeat-x: no-repeat;
    background-repeat-y: repeat;
}

.wiper-wrapper{

}

.swiper-slide{
    overflow: hidden;
}

.icon-arrow-up {
    left: 0;
    right: 0;
    margin: 0 auto;
    bottom: 2%;
    position: absolute;
    z-index: 99999;
    width: 66px;
    height: 33px;

}

.icon-arrow-up i {
    -webkit-animation: arrowUp 1.5s ease-out infinite;
    animation: arrowUp 1.5s ease-out infinite;
    display: block;
    width: 100%;
    height: 100%;
    z-index: 100;
    background-image: url(../images/arrow-up.png);
    background-repeat: no-repeat;
    background-size: 66px 33px;

}

@-webkit-keyframes arrowUp{
    0%{opacity:1;-webkit-transform:translate3d(0,0,0)}
    50%{opacity:1;-webkit-transform:translate3d(0,10px,0)}
    100%{opacity:0;-webkit-transform:translate3d(0,10px,0)}
}

@keyframes arrowUp{
    0%{opacity:1;transform:translate3d(0,0,0)}
    50%{opacity:1;transform:translate3d(0,10px,0)}
    100%{opacity:0;transform:translate3d(0,10px,0)}
}


@-webkit-keyframes popshow{
    0%{opacity:0;-webkit-transform:scale(0.9,0.9);visibility: visible;}
    100%{opacity:1;-webkit-transform:scale(1,1);visibility: visible;}
}

@keyframes popshow{
   0%{opacity:0;transform:scale(0.9,0.9);visibility: visible;}
    100%{opacity:1;transform:scale(1,1);visibility: visible;}
}

@-webkit-keyframes pophide{
    0%{opacity:1;-webkit-transform:scale(1,1);visibility: visible;}
    100%{opacity:0;-webkit-transform:scale(1.2,1.2);visibility: hidden;}
}

@keyframes pophide{
   0%{opacity:1;transform:scale(1,1);visibility: visible;}
    100%{opacity:0;transform:scale(1.2,1.2);visibility: hidden;}
}

.wiper-wrapper div{
    text-align: center;
    background-color: transparent;
}

.swiper-wrapper .container{
    text-align: center;
    position: absolute;
    width: 100%;
    bottom: 12%;
}

.tvc{
    position: relative;
    text-align: center;
    background-color: #000;
}
.title{
    padding-bottom:20px; 
}
.t_l{
    position: absolute;
    left: 0px;
    top: 0px;
}

.b_l{
    position: absolute;
    left: 0px;
    bottom: 0px;
}

.b_r{
    position: absolute;
    right: 0px;
    bottom: 0px;
}

.up{
    position: absolute;
    top:0px;
    left:0px;
}

.gif{
    width:100%;
    height: 100%;
}
/*p1*/
/* #p1 .tvc{
    width: 640px;
    height: 100%;
}
#p1 .container{
    top: 50%;
}

#kv{
    width: 640px;
    height: 640px;
    background-color: #000;
} */
#p1{
    background-image: url('../images/top_tvc.jpg');
    background-size: 100% 100%;
}
.p1_btn {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: 256px;
    bottom: 5%;
    overflow: hidden;
}
/*p2*/
#p2{
    background-image: url('../imgs/p1_bg.jpg');
    background-size: 100% 100%;
}
#p2 .t_t{
    position: absolute;
    top: 10%;
    width: 74%;
    max-width: 474px;
    margin:auto;
    left:0;
    right: 0;
}
#p2 .t_t img,#p2 .t_l img,#p2 .t_r img{
    width: 100%;
}
#p2 .t_l{
    position: absolute;
    left:4%;
    top: 24.8%;
    width: 48%;
    z-index: 1;
}
#p2 .t_r{
    position: absolute;
    left:38.2%;
    top: 37%;
    width: 37.5%;
    z-index: 2;
}
#p2 .b_l{
    position: absolute;
    left: 21.8%;
    top: 67%;
    width: 48%;
    z-index: 1;
    bottom:unset;
}
#p2 .b_r{
    left: 54.6%;
    top: 60%;
    width: 37.5%;
    z-index: 2;
    bottom:unset;
}

/*p3*/
#p3{
    background-image: url('../imgs/p2_bg.jpg');
    background-size: 100% 100%;
}
#p3 .t_t{
    position: absolute;
    top: 7%;
    width: 70%;
    max-width: 514px;
    margin:auto;
    left:0;
    right: 0;
}
#p3 .p2_product{
    width: 18.6%;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 35%;
    z-index: 2;
}
#p3 .p2_product img{
    width:100%
    
}
#p3 .p2_light{
    z-index: 1;
    position: absolute;
    top: 27%;
}
#p3 .p2_desc_01{
    top: 78%;
    position: absolute;
    z-index: 2;
    left: 13%;
}
#p3 .p2_desc_02{
    position: absolute;
    top: 83%;
    left: 27%;
    z-index: 2;
}
#p3 .p2_desc_03{
    position: absolute;
    top: 88%;
    left: 42%;
    z-index: 2;
}
/*p4*/

#p4{
    background-image: url('../imgs/p3_bg.jpg');
    background-size: 100% 100%;
}
#p4 .t_t{
    position: absolute;
    top: 7%;
    width: 70%;
    max-width: 446px;
    margin:auto;
    left:0;
    right: 0;
}
#p4 .p3_product_1{
    position: absolute;
    top: 26%;
    left: 30%;
    z-index: 1;
}
#p4 .p3_product_2{
    position: absolute;
    left: 41%;
    top: 23%;
    z-index: 2;
}
#p4 .p3_product_3{
    position: absolute;
    left: 54.5%;
    top: 21%;
    z-index: 3;
}
#p4 .p3_desc{
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: 80%;
    top: 62%;
}
/*p5*/

#p5{
    background-image: url('../imgs/p4_bg.jpg');
    background-size: 100% 100%;
}
#p5 .face{
    width: 54%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
}
#p5 .face_light{
    width: 54%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    animation: slideOutLeft 3s ease-out infinite;
    -webkit-animation: slideOutLeft 3s ease-out infinite;
       -moz-animation: slideOutLeft 3s ease-out infinite;
        -ms-animation: slideOutLeft 3s ease-out infinite;
         -o-animation: slideOutLeft 3s ease-out infinite;
}
#p5 .p4_product{
    width: 15%;
    position: absolute;
    left: 80%;
    top: 39%;
    z-index: 1;
}
#p5 .p4_desc{
    width: 70%;
    position: absolute;
    left: 8%;
    top: 43%;
    z-index: 1;
}
#p5 .p4_btn{
    position: absolute;
    top: 87%;
    width: 38%;
    margin: auto;
    left: 0;
    right: 0;
}
#p5 .p4_btn:before,.pop_but:before,#pop2 .pop_save:before,.p1_btn:before{
    content: "";
    position: absolute;
    width: 120px;
    height: 100%;
    top: 0;
    left: -50px;
    overflow: hidden;
    background: -moz-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,0.15)50%, rgba(255,255,255,0)100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(50%, rgba(255,255,255,0.15)), color-stop(100%, rgba(255,255,255,0)));
    background: -webkit-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,0.15)50%, rgba(255,255,255,0)100%);
    background: -o-linear-gradient(left, rgba(255,255,255,0)0, rgba(255,255,255,0.15)50%, rgba(255,255,255,0)100%);
    background: linear-gradient(to left, rgba(255,255,255,0)0, rgba(255,255,255,0.15)50%, rgba(255,255,255,0)100%);
    -webkit-transform: skewX(25deg);
    -moz-transform: skewX(25deg);
    transform: skewX(25deg);
    animation: slideInLeft2 1.5s ease-out infinite;
    -webkit-animation: slideInLeft2 1.5s ease-out infinite;
       -moz-animation: slideInLeft2 1.5s ease-out infinite;
        -ms-animation: slideInLeft2 1.5s ease-out infinite;
         -o-animation: slideInLeft2 1.5s ease-out infinite;
}
@keyframes slideInLeft2
{
    from {left:-30px; visibility: hidden;}
    to {left: 85%; visibility: visible;}
}
@-moz-keyframes slideInLeft2
{
    from {left:-30px; visibility: hidden;}
    to {left: 85%; visibility: visible;}
}
@-webkit-keyframes slideInLeft2
{
    from {left:-30px; visibility: hidden;}
    to {left: 85%; visibility: visible;}
}
@-o-keyframes slideInLeft2
{
    from {left:-30px; visibility: hidden;}
    to {left: 85%; visibility: visible;}
}
@-ms-keyframes slideInLeft2
{
    from {left:-30px; visibility: hidden;}
    to {left: 85%; visibility: visible;}
}
@keyframes slideOutLeft
{
    from {left:0px; visibility: hidden;}
    to {left: -85%; visibility: visible;}
}
@-moz-keyframes slideOutLeft
{
    from {left:0px; visibility: hidden;}
    to {left: -85%; visibility: visible;}
}
@-webkit-keyframes slideOutLeft
{
    from {left:0px; visibility: hidden;}
    to {left: -85%; visibility: visible;}
}
@-o-keyframes slideOutLeft
{
    from {left:0px; visibility: hidden;}
    to {left: -85%; visibility: visible;}
}
@-ms-keyframes slideOutLeft
{
    from {left:0px; visibility: hidden;}
    to {left: -85%; visibility: visible;}
}

/*pop*/
#pop{
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 18;
    background-image: url(../imgs/pop_bg.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-color: #fff;
}
#pop2,#pop3 {
    position: absolute;
    overflow: hidden;

    width: 100%;
    height: 100%;
    top:0px;
    left:0px;
    z-index: 8;
}
#pop.init,#pop2.init,#pop3.init{
     visibility: hidden;
     display: none;
}
#pop.show,#pop2.show,#pop3.show{
     -webkit-animation: popshow 0.5s ease-out  1;
    animation: popshow 0.5s ease-out  1;
    -webkit-animation-fill-mode : both;
    animation-fill-mode : both;
}
#pop.hide,#pop2.hide,#pop3.hide{
     -webkit-animation: pophide 0.5s ease-out  1;
    animation: pophide 0.5s ease-out  1;
    -webkit-animation-fill-mode : both;
    animation-fill-mode : both;
}
.pop_title{
    position: absolute;
    width: 58%;
    left: 0;
    right: 0;
    margin: auto;
    top: 10%;
}
.pop_product{
    position: absolute;
    width: 23%;
    left: 37%;
    right: 0;
    top: 28%;
}
.pop_desc{
    position: absolute;
    margin: auto;
    left: 0;
    right: 0;
    width: 41%;
    top: 52%;
}
.pop_top{
     position: absolute;
     top:0px;
    left:0px;
}

.pop-container{

    width: 100%;
    height: 100%;
}
.pop_close{
    position: absolute;
    top:20px;
    right: 20px;
}
.pop_close:active{
    opacity: 0.6;
}
#pop .pop-wapper{
    position: absolute;
    width: 100%;
    height: 45%;
    top: 60%;
    text-align: center;
    margin: 0px;
    background: #fff;
}
#pop .pop_rule{
    cursor: pointer;
}
#pop2 .pop-wapper{
    position: absolute;
    background: transparent url("../images/end.jpg") no-repeat center center;
    width: 100%;
    height: 100%;
    background-size: 100% 100%;
}
#pop2 .pop_save{
    position: absolute;
    width: 244px;
    margin: auto;
    left: 0;
    right: 0;
    top: 80%;
    overflow: hidden;
}
#pop3 {
    background: rgba(0,0,0,.5);
    z-index: 19;
}
#pop3 .pop-container{
    position: relative;
}
#pop3 .pop-wapper{
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    width: 85%;
    top: 0;
    bottom: 0;
    height: 70%;
}
#pop3 .pop_close{
    top: 15%;
    right: 7.5%;
}
#pop .container,#pop2 .container,#pop3 .container{
    position: absolute;
    width: 75%;
    left: 12.5%;
}

#pop .container>div,#pop2 .container>div{
    position: relative;
    margin:0px;
    margin-bottom: 10px;
}
#pop .container .copy{
    margin-bottom: 50px;
}
#pop .container .lost{
    position: absolute;
    left: 45px;
    top: 80px;
    display: none;
}
.in1,.in2,.select.in5{
    width: 100%;
    height: 65px;
    border: none;
    border-top-style:none;
    border-right-style:none;
    border-left-style:none;
    border-bottom-style:none;
    background: transparent url("../images/pop_input_bg.png") no-repeat center center;
    font-size: 24px;
    color: #2b2b2b;
    text-align: center;
    outline:none;
    border-radius:0px;
    box-shadow:none;
    -webkit-box-shadow:none;
    -moz-box-shadow:none;
    background-size: 100%;
    line-height: 65px;
    clear: both;
    font-family: "Microsoft YaHei","Lucida Grande", "Lucida Sans Unicode", "STHeiti", "Helvetica","Arial","Verdana","sans-serif";
}
.in1 input,.in2 input {
    width: 90%;
    height: 35px !important;
    border: none;
    border-top-style: none;
    border-right-style: none;
    border-left-style: none;
    border-bottom-style: none;
    font-size: 24px;
    color: #2b2b2b;
    text-align: center;
    outline: none;
    border-radius: 0px;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    background-size: 100%;
    line-height: 35px;
    clear: both;
    font-family: "Microsoft YaHei","Lucida Grande", "Lucida Sans Unicode", "STHeiti", "Helvetica","Arial","Verdana","sans-serif";
    margin-top: 10px;
}
input:focus {
    outline:none;
    outline:none;
    border-radius:0px;
    box-shadow:none;
    -webkit-box-shadow:none;
    -moz-box-shadow:none;
}
input::-webkit-input-placeholder{
    color:#2b2b2b;
}
input:-moz-placeholder {
    color:#2b2b2b;
}
input::-moz-placeholder {
    color:#2b2b2b;
}
input:-ms-input-placeholder {
    color:#2b2b2b;
}
input:focus::-webkit-input-placeholder{
    color:transparent;
}
input:focus::-moz-placeholder {
    color:transparent;
}
input:focus::-moz-placeholder {
    color:transparent;
}
input:focus::-ms-input-placeholder {
    color:transparent;
}
.select{
    width: 48%;
    height: 65px;
    background: transparent url("../images/pop_input_bg.png") no-repeat center center;
    font-size: 24px;
    color: #2b2b2b;
    text-align: center;
    background-size: 100% 100%;
    line-height: 65px;
}
.select.in3, .select.in4{
    float:left;
    margin-right: 4% !important;
}
.select.in4{
    margin-right: 0 !important;
}
select{
    position: absolute;
    left: 0px;
    top: 0px;
    opacity: 0;
    width:331px;
    height: 37px;
    border: none;
}
#pop .container .in5{
     margin-bottom: 10px;
}
#pop .container .msg{
    width:100%;
    height: 30px;
    margin-bottom: 10px;
    color: #FF0000;
}
.pop_but:active{
    opacity: 0.8;
}
.audio_icon {
    position: absolute;
    right: 35px;
    top: 35px;
    cursor: pointer;
    z-index: 9999;
    width: 50px;
    height: 50px;
    background: url(../images/audio_icon.png);
}

.audio_icon.audio_open {
    background: url(../images/audio_icon_open.png);
    -webkit-animation: circling 3s linear infinite;
    -o-animation: circling 3s linear infinite;
    animation: circling 3s linear infinite;
}
@keyframes circling
{
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
@-moz-keyframes circling
{
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
@-webkit-keyframes circling
{
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
@-o-keyframes circling
{
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
@-ms-keyframes circling
{
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
#p3 .p2_product img,#p3 img,#p4 img,#p5 img {
    width: 90%;
    margin: auto;
    display: block;
}

#p3 .p2_light img {
    width: 100%;
}

#p5 .face img {
    width: 100%;
}
#pop{
    background-size: 100% 60%;
}
#pop .pop_title{
    top:6%;
}
#pop .pop_title img,#pop .pop_desc img{
    width: 90%;
    margin: auto;
    display: block;
}
#pop .pop_product{
    top:25%;
    height:25.5%;
    left: 33%;
}
#pop .pop_product img{
    height: 100%;
    width: unset;
    display: block;
    margin: auto;
}
#pop .pop_desc{
    top:50.5%;
}
#pop .pop-wapper{
    top:58%;
}
#pop .container>div, #pop2 .container>div,#pop .container .in5,#pop .container .msg{
    margin-bottom: 5px;
}

#p1, #p2, #p3, #p4, #p5, #pop, #pop2, #pop3{
    max-width: 640px;
}

body {
    max-width: 640px;
    position: relative;
}