*{
    -webkit-touch-callout: none;
    border-radius:0px;
    -webkit-border-radius:0px;
    -webkit-touch-callout:none;
    border-radius:0;
    -webkit-border-radius:0;
    -webkit-touch-callout:none;
    -webkit-tap-highlight-color: transparent;
    // -webkit-user-select:none;
    // -khtml-user-select:none;
    // -moz-user-select:none;
    // -ms-user-select:none;
    // user-select:none;
}
/* .page1_contain,
.btn,
.page1_toupiao,
.return ,
.page2_2_submit,
.p4_submit,
.page2_2_frame,
.img_enlarge_close{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -ms-touch-action: none;
    -moz-user-select: -moz-none;
    } */
html, body {
    margin: 0;
    padding: 0;
    position: relative;
    height: 100%;
    width:100%;
}
body {
    font-size: 16px;
    line-height: 24px;
    text-align: justify;
    font-family: "Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei";
    color: #554344;
}
a,img,button,input,textarea{-webkit-tap-highlight-color:rgba(255,255,255,0);}
    /*避免产生间隙*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,input,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;-webkit-background-origin:content-box;background-origin:content-box;}section,header,footer,nav{display:block;margin:0;padding:0}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}img{border:0;font-size:0}a{text-decoration:none;}
    .cf:before,.cf:after{content:"";display:table}.cf:after{clear:both}.cf{zoom:1;width: 100%;}
html{
    -webkit-text-size-adjust:none;
}
a,img,button,input,textarea{-webkit-tap-highlight-color:rgba(255,255,255,0);}
    /*设置swiper的宽和高*/

// .swiper-container-s3,



.swiper-wrapper,
.swiper-slide {
    position: relative;
    width: 100%;
    height: 100%;
}
.swiper-container,
.swiper-container-p7{
    position: relative;
    width: 100%;
    height: 100%;
}

.swiper-container .swiper-slide {
    overflow: hidden;
}
.swiper-container-p7 .swiper-slide {
    height: auto;
    width:100%;
    overflow: visible;
}
.jcontent{
   position: absolute;
   width: 100%;
   height: 100%;
}
.loading{
    width: 100%;
    height: 100%;
    // background:url(../images/p2_bg.jpg) center no-repeat;
    // background-size:cover;
}
.loading{
    z-index:100;
    position: absolute;
    top: 0;
    // background:#000 url(../images/p2_bg.jpg) center no-repeat;
    // background-size:cover;
}
.loading_decor{
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 26%;
    height: 18%;
    top: 22%;
    // background:url(../images/loading_decor.png) center no-repeat;
    // background-size:contain;
}
.loading_line1{
    overflow: hidden;
    width: 84%;
    height: 4.4vw;
    right: 0;
    left: 0;
    margin: 0 auto;
    top: 47%;
    /* border: 1px solid #bbb; */
    box-sizing:border-box;
    border-radius: 50vh;
    -moz-box-shadow: 0px 0px 15px #929090 inset;              /* For Firefox3.6+ */
    -webkit-box-shadow: 0px 0px 15px #929090 inset;           /* For Chrome5+, Safari5+ */
    box-shadow: 0px 0px 15px #929090 inset;
}
.loading_line2{
    width: 100%;
    height: 100%;
    left: -100%;
    // background:url(../images/loading_line2.png) center no-repeat;
    // background-size: 100% 100%;
}
.loading_txt_box{
    width: 71%;
    height: 4.4vw;
    left: 8%;
    top: 51%;
}
.loading_txt{
    font-size: 1.5rem;
    color: #0256A0;
    left: 0%;
}
.disabled {
    pointer-events:none;
}
.music_btn{
    position: absolute !important;
    display: block;
    width: 5vh;
    height: 5vh;
    right: 2.5%;
    top: 1.5%;
    z-index: 99;
 }
.music_btn span{
    display: block;
    width: 100%;
    height: 100%;
    // background:url(../images/music.png) center center no-repeat;
    // background-size: contain;
}
.music_anim{
    animation: music_a 2s linear infinite;
    -webkit-animation: music_a 2s linear infinite;
}
@keyframes music_a{
    from { transform:rotate(0deg); }
    to { transform:rotate(360deg); }
}
@-webkit-keyframes music_a{
    from{ -webkit-transform:rotate(0deg); }
    to{ -webkit-transform:rotate(360deg); }
}
.next{
    opacity: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 9%;
    height: 5%;
    bottom: 0.2%;
    // background:url(../images/next.png) center no-repeat;
    // background-size:contain;
    animation: next_a 2.5s ease infinite;
    -webkit-animation: next_a 2.5s ease infinite;
}
@keyframes next_a{
   0%{
    opacity: 1;
            transform: translateY(-50%);
   }
   80%{
    opacity: 0;
            transform: translateY(0%);
   }
   90%{
    opacity: 0;
            transform: translateY(-50%);
   }
   100%{
    opacity: 1;
            transform: translateY(-50%);
   }
}
@-webkit-keyframes next_a{
   0%{
    opacity: 1;
    -webkit-transform: translateY(-50%);
   }
   80%{
    opacity: 0;
    -webkit-transform: translateY(0%);
   }
   90%{
    opacity: 0;
    -webkit-transform: translateY(-50%);
   }
   100%{
    opacity: 1;
    -webkit-transform: translateY(-50%);
   }
}

/*  .share0{
   position: fixed;
   display: none;
   z-index: 999;
   left: 0%;
   width: 100%;
   height: 100%;
   top: 0%;
   background: rgba(0,0,0,0.9) url(../images/share.png) right top no-repeat;
   background-size: 48%;
} */
.alertp{
     position: fixed;
     width: 100%;
     height: 100%;
     top: 0;
     background: rgba(0,0,0,0.7);
     z-index: 1000;
 }
 .alertpBox{
     position: absolute;
     width: 90%;
     top: 50%;
     left: 50%;
     -webkit-transform: translate3d(-50%,-50%,0);
     transform: translate3d(-50%,-50%,0);
     border-radius: 0.6rem;
     overflow: hidden;
 }
 .alertpTitle{
     position: relative;
     text-align: center;
     width: 100%;
     height: 3rem;
     line-height: 3rem;
     color: #fff;
     background: #B88222;
     font-size: 1.5rem;
     font-weight: bold;
 }
 .alertp p{
     position: relative;
     text-align: center;
     width: 100%;
     line-height: 2rem;
     padding: 1.2rem 0;
     color: #414659;
     background: #fff;
     font-size: 1.1rem;
 }
 .alertp p span{
     display: block;
     width: 90%;
     margin: 0 auto;
 }
 .alertp_close{
     position: absolute;
     width: 3rem;
     height: 3rem;
     top: -3rem;
     right: 0rem;
     background: url(../images/close_btn.png) center no-repeat;
     background-size: 60%;
 }

/*
.swiper-slide div,.loading div{
    position: absolute;
} */
.logo{
    top: 1%;
    left: 3%;
    width: 27%;
    height: 5%;
    // background:url(../images/logo.png) center no-repeat;
    // background-size:contain;
}

.swiper-wrapper,
.swiper-slide {
    position: relative;
    width: 100%;
    height: 100%;
}
.swiper-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.swiper-container .swiper-slide {
    overflow: hidden;
}

.jcontent{
   position: absolute;
   width: 100%;
   height: 100%;
}
.loading{
    width: 100%;
    height: 100%;
    background:url(../images/loading_bg.jpg) center no-repeat;
    background-size:cover;
    z-index:100;
    position: absolute;
    top: 0;
}
.loading_decor{
    position:absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 45%;
    height: 7%;
    top: 38%;
    background:url(../images/logo1.png) center no-repeat;
    background-size:contain;
}
.loading_line1{
    position: absolute;
    overflow: hidden;
    width: 55%;
    height: 1.4vw;
    right: 0;
    left: 0;
    margin: 0 auto;
    top: 49.5%;
    box-sizing:border-box;
    border-radius: 50vh;
    -moz-box-shadow: 0px 0px 15px #929090 inset;              /* For Firefox3.6+ */
    -webkit-box-shadow: 0px 0px 15px #929090 inset;           /* For Chrome5+, Safari5+ */
    box-shadow: 0px 0px 15px #929090 inset;
}
.loading_line2{
    width: 0%;
    height: 100%;
    left: 0%;
    background:url(../images/loading_lin2.png) left no-repeat;
    background-size: auto 100%;
    border-radius: 50vh;
}
.loading_txt{
    background:url(../images/loading_txt.png) center no-repeat;
    background-size: contain;
    position:absolute;
    width: 13%;
    height: 2%;
    right: 0;
    left: 0;
    margin: 0 auto;
    top: 52.5%;
}
.disabled {
    pointer-events:none;
}
.music_btn{
    position: absolute !important;
    display: block;
    width: 4.5vh;
    height: 4.5vh;
    right: 3.5%;
    top: 2.5%;
    z-index: 99;
 }
.music_btn span{
    display: block;
    width: 100%;
    height: 100%;
    background:url(../images/music.png) center center no-repeat;
    background-size: contain;
}
.music_anim{
    animation: music_a 2s linear infinite;
    -webkit-animation: music_a 2s linear infinite;
}
@keyframes music_a{
    from { transform:rotate(0deg); }
    to { transform:rotate(360deg); }
}
@-webkit-keyframes music_a{
    from{ -webkit-transform:rotate(0deg); }
    to{ -webkit-transform:rotate(360deg); }
}
.next{
    opacity: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 20%;
    height: 11%;
    bottom: 0.2%;
    background:url(../images/next.png) center no-repeat;
    background-size:contain;
    position:absolute;
    animation: next_a 2.5s ease infinite;
    -webkit-animation: next_a 2.5s ease infinite;
}
@keyframes next_a{
   0%{
    opacity: 1;
    -webkit-transform: translateY(-10%);
            transform: translateY(-10%);
   }
   80%{
    opacity: 0;
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
   }
   90%{
    opacity: 0;
    -webkit-transform: translateY(-10%);
            transform: translateY(-10%);
   }
   100%{
    opacity: 1;
    -webkit-transform: translateY(-10%);
            transform: translateY(-10%);
   }
}
@-webkit-keyframes next_a{
   0%{
    opacity: 1;
    -webkit-transform: translateY(-10%);
            transform: translateY(-10%);
   }
   80%{
    opacity: 0;
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
   }
   90%{
    opacity: 0;
    -webkit-transform: translateY(-10%);
            transform: translateY(-10%);
   }
   100%{
    opacity: 1;
    -webkit-transform: translateY(-10%);
            transform: translateY(-10%);
   }
}

/*  .share{
   position: absolute;
   display: none;
   z-index:999;
   background-color: rgba(0,0,0,0.9);
   left:0%;
   width: 100%;
   height: 100%;
   top: 0%;
}
.share1{
   position: absolute;
   right: 0%;
   width: 50%;
   height: 26%;
   top: 0%;
   // background:url(../../images/YouBangGuessWhat2/share.png) center no-repeat;
   // background-size:contain;
}
.alertp{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    // background: rgba(0,0,0,0.7);
    z-index: 1000;
}
.alertpBox{
    position: absolute;
    width: 90%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate3d(-50%,-50%,0);
    transform: translate3d(-50%,-50%,0);
    border-radius: 0.6rem;
    overflow: hidden;
}
.alertpTitle{
    position: relative;
    text-align: center;
    width: 100%;
    height: 3rem;
    line-height: 3rem;
    color: #fff;
    // background: #0367B5;
    font-size: 1.5rem;
    font-weight: bold;
}
.alertp p{
    position: relative;
    text-align: center;
    width: 100%;
    line-height: 2rem;
    padding: 1.2rem 0;
    color: #414659;
    // background: #fff;
    font-size: 1.1rem;
}
.alertp p span{
    display: block;
    width: 90%;
    margin: 0 auto;
}
.alertp_close{
    position: absolute;
    width: 3rem;
    height: 3rem;
    top: -3rem;
    right: 0rem;
    // background: url(../../images/CCBLife/close.png) center no-repeat;
    // background-size: 60%;
} */
.p1{
    width:100%;
    height:100%;
    background: url(../images/p1_pic.png) center 110% no-repeat;
    background-size: 100%;
}
.logo{
    position: absolute;
    background:url(../images/logo.png) center no-repeat;
    background-size:contain;
    width: 45%;
    height: 6%;
    top: 2%;
    left: 4%;
}
.p1_title1{
    position: absolute;
    background:url(../images/p1_title1.png) center no-repeat;
    background-size:contain;
    width: 90%;
    height: 13%;
    top: 13.5%;
    left: 5%;
}
.p1_title2{
    position: absolute;
    background:url(../images/p1_title2.png) center no-repeat;
    background-size:contain;
    width: 77%;
    height: 7%;
    top: 27%;
    left: 11.5%;
}
.p1_btn1{
    position: absolute;
    background:url(../images/p1_btn1.png) center no-repeat;
    background-size:contain;
    width: 38%;
    height: 7%;
    bottom: 7%;
    left: 9.5%;
}
.p1_btn2{
    position: absolute;
    background:url(../images/p1_btn2.png) center no-repeat;
    background-size:contain;
    width: 38%;
    height: 7%;
    bottom: 7%;
    right: 9.5%;
}
.p2,.p3,.p4,.p5,.p6{
    width:100%;
    height:100%;
    background:url(../images/loading_bg.jpg) center no-repeat;
    background-size:100% 100%;
}
.p2_title1{
    position: absolute;
    background:url(../images/p2_title1.png) center no-repeat;
    background-size:contain;
    width: 75%;
    height: 6%;
    top: 9%;
    left: 12.5%;
}
.p2_decor1{
    position: absolute;
    background:url(../images/p2_decor1.png) center no-repeat;
    background-size:contain;
    width: 90%;
    height: 16%;
    top: 18.3%;
    left: 5%;
}
.p2_decor2{
    position: absolute;
    background:url(../images/p2_decor2.png) center no-repeat;
    background-size:contain;
    width: 80%;
    height: 35%;
    bottom: 27%;
    left: 10%;
}
.p2_decor3{
    position: absolute;
    background:url(../images/p2_decor3.png) center no-repeat;
    background-size:contain;
    width: 86%;
    height: 11%;
    bottom: 14%;
    left: 7%;
}
.p3_title1{
    position: absolute;
    background:url(../images/p3_title1.png) center no-repeat;
    background-size:contain;
    width: 75%;
    height: 6%;
    top: 9%;
    left: 12.5%;
}
.p3_decor1{
    position: absolute;
    background:url(../images/p3_decor1.png) center no-repeat;
    background-size:contain;
    width: 84%;
    height: 12%;
    top: 18%;
    left: 8%;
}
.p3_decor2{
    position: absolute;
    background:url(../images/p3_decor2.png) center no-repeat;
    background-size:contain;
    width: 84%;
    height: 12%;
    top: 32%;
    left: 8%;
}
.p3_decor3{
    position: absolute;
    background:url(../images/p3_decor3.png) center no-repeat;
    background-size:contain;
    width: 77%;
    height: 8%;
    top: 46%;
    left: 8%;
}
.p3_decor4{
    position: absolute;
    background:url(../images/p3_decor4.png) center no-repeat;
    background-size:100% 100%;
    width: 84%;
    height: 13%;
    bottom: 30%;
    left: 8%;
}
.p3_decor5{
    position: absolute;
    background:url(../images/p3_decor5.png) center no-repeat;
    background-size:100% 100%;
    width: 84%;
    height: 15%;
    bottom: 13%;
    left: 8%;
}
.p4_title1{
    position: absolute;
    background:url(../images/p4_title1.png) center no-repeat;
    background-size:contain;
    width: 71%;
    height: 5%;
    top: 10%;
    left: 14.5%;
}
.p4_decor1{
    position: absolute;
    background:url(../images/p4_decor1.png) center no-repeat;
    background-size:contain;
    width: 42%;
    height: 23%;
    top: 18%;
    left: 28%;
}
.p4_decor2{
    position: absolute;
    background:url(../images/p4_decor2.png) center no-repeat;
    background-size:contain;
    width: 42%;
    height: 23%;
    bottom: 23%;
    left: 28%;
}
.p4_txt1{
    position: absolute;
    background:url(../images/p4_txt1.png) center no-repeat;
    background-size:contain;
    width: 80%;
    height: 6%;
    top: 43%;
    left: 10%;
}
.p4_txt2{
    position: absolute;
    background:url(../images/p4_txt2.png) center no-repeat;
    background-size:contain;
    width: 80%;
    height: 6%;
    bottom: 15%;
    left: 10%;
}
.p4_line{
    position: absolute;
    background:url(../images/p4_line.png) center no-repeat;
    background-size:contain;
    width: 80%;
    height: 1%;
    top: 50%;
    left: 10%;
}
.p5_title1{
    position: absolute;
    background:url(../images/p5_title1.png) center no-repeat;
    background-size:contain;
    width: 75%;
    height: 11%;
    top: 10%;
    left: 12.5%;
}
.box1{
    position: absolute;
    width: 100%;
    height: 21%;
    top: 22%;
}
.box2{
    position: absolute;
    width: 100%;
    height: 22%;
    top: 43%;
}
.box3{
    position: absolute;
    width: 100%;
    height: 21%;
    top: 65%;
}
.p5_decor1{
    position: absolute;
    background:url(../images/p5_decor1.png) center no-repeat;
    background-size:contain;
    width: 59%;
    height: 95%;
    bottom: 0;
    left: 5%;
}
.p5_decor4{
    position: absolute;
    background:url(../images/p5_decor4.png) center no-repeat;
    background-size:contain;
    width: 22%;
    height: 55%;
    bottom: 13%;
    right: 7%;
}
.p5_decor5{
    position: absolute;
    background:url(../images/p5_decor5.png) center no-repeat;
    background-size:contain;
    width: 25%;
    height: 40%;
    bottom: 13%;
    left: 10%;
}
.p5_decor2{
    position: absolute;
    background:url(../images/p5_decor2.png) center no-repeat;
    background-size:contain;
    width: 59%;
    height: 95%;
    bottom: 0;
    right: 5%;
}
.p5_decor3{
    position: absolute;
    background:url(../images/p5_decor3.png) center no-repeat;
    background-size:contain;
    width: 59%;
    height: 95%;
    bottom: 0;
    left: 5%;
}
.p5_decor6{
    position: absolute;
    background:url(../images/p5_decor6.png) center no-repeat;
    background-size:contain;
    width: 22%;
    height: 48%;
    bottom: 13%;
    right: 7%;
}
.p6_title1{
    position: absolute;
    background:url(../images/p6_title1.png) center no-repeat;
    background-size:contain;
    width: 37%;
    height: 5%;
    top: 10%;
    left: 31.5%;
}
.p6_decor1{
    position: absolute;
    background:url(../images/p6_decor1.png) center no-repeat;
    background-size:contain;
    width: 45%;
    height: 5%;
    top: 17%;
    left: 5%;
}
.p6_decor2{
    position: absolute;
    background:url(../images/p6_decor2.png) center no-repeat;
    background-size:contain;
    width: 94%;
    height: 26%;
    top: 23%;
    left: 3%;
}
.box4{
    width: 100%;
    height: 28%;
    position: absolute;
    bottom: 24%;
}
.p6_decor3{
    position: absolute;
    background:url(../images/p6_decor3.png) bottom no-repeat;
    background-size:cover;
    width: 23.8%;
    /* height: 18%; */
    bottom: 25%;
    left: 23%;
}
.p6_txt1{
    position: absolute;
    background:url(../images/p6_txt1.png) bottom no-repeat;
    background-size: contain;
    width: 23.5%;
    height: 11%;
    bottom: 12%;
    left: 22%;
}
.p6_txt2{
    position: absolute;
    background:url(../images/p6_txt2.png) bottom no-repeat;
    background-size: contain;
    width: 23.5%;
    height: 11%;
    bottom: 12%;
    right: 20%;
}
.p6_decor4{
    position: absolute;
    background:url(../images/p6_decor4.png) bottom no-repeat;
    background-size:cover;
    width: 26%;
    /* height: 59.5%; */
    bottom: 25%;
    right: 20%;
}
.p6_decor5{
    position: absolute;
    background:url(../images/p6_decor5.png) bottom no-repeat;
    background-size:cover;
    width: 78%;
    height: 1%;
    bottom: 3%;
    right: 0;
    left: 0;
    margin: 0 auto;
}
.p6_decor6{
    position: absolute;
    background: url(../images/p6_decor6.png) left no-repeat;
    background-size: cover;
    width: 0px;
    height: 35px;
    bottom: 16%;
    left: 11%;
}
.p6_decor6_ani{
    animation: p6_decor6_ani 2s linear forwards;
    -webkit-animation: p6_decor6_ani 2s linear forwards;
}
@keyframes p6_decor6_ani{
   0%{
    width: 0;
   }
   100%{
    width: 257px;
   }
}
@-webkit-keyframes p6_decor6_ani{
   0%{
    width: 0;
   }
   100%{
    width: 257px;
   }
}
.p6_new1{
    position: absolute;
    background: url(../images/p6_new1.png) left bottom no-repeat;
    background-size: cover;
    width: 254px;
    height: 0px;
    bottom: 22%;
    left: 0;
    right: 0;
    margin: 0 auto;
}
.p6_new1_ani{
    animation: p6_new1_ani 2s linear forwards;
    -webkit-animation: p6_new1_ani 2s linear forwards;
}
@keyframes p6_new1_ani{
   0%{
    height: 0%;
   }
   100%{
    height: 106px;
   }
}
@-webkit-keyframes p6_new1_ani{
   0%{
    height: 0%;
   }
   100%{
    height: 106px;
   }
}
.p6_btn1{
    position: absolute;
    background:url(../images/p6_btn1.png) center no-repeat;
    background-size:contain;
    width: 38%;
    height: 7%;
    bottom: 7%;
    left: 9.5%;
}
.p6_btn2{
    position: absolute;
    background:url(../images/p6_btn2.png) center no-repeat;
    background-size:contain;
    width: 38%;
    height: 7%;
    bottom: 7%;
    right: 9.5%;
}
.p6_anim1{
    animation: p6_anim1 2s linear forwards;
    -webkit-animation: p6_anim1 2s linear forwards;
}
@keyframes p6_anim1{
   0%{
    height: 0%;
   }
   100%{
    height: 19.2px;
   }
}
@-webkit-keyframes p6_anim1{
   0%{
    height: 0%;
   }
   100%{
    height: 19.2px;
   }
}
.p6_anim2{
    animation: p6_anim2 2s linear forwards;
    -webkit-animation: p6_anim2 2s linear forwards;
}
@keyframes p6_anim2{
   0%{
    height: 0%;
   }
   100%{
    height: 30px;
   }
}
@-webkit-keyframes p6_anim2{
   0%{
    height: 0%;
   }
   100%{
    height: 30px;
   }
}
.p6_anim3{
    animation: p6_anim3 2s linear forwards;
    -webkit-animation: p6_anim3 2s linear forwards;
}
@keyframes p6_anim3{
   0%{
    height: 0%;
   }
   100%{
    height: 47px;
   }
}
@-webkit-keyframes p6_anim3{
   0%{
    height: 0%;
   }
   100%{
    height: 47px;
   }
}
.p6_anim4{
    animation: p6_anim4 2s linear forwards;
    -webkit-animation: p6_anim4 2s linear forwards;
}
@keyframes p6_anim4{
   0%{
    height: 0%;
   }
   100%{
    height: 109px;
   }
}
@-webkit-keyframes p6_anim4{
   0%{
    height: 0%;
   }
   100%{
    height: 109px;
   }
}
.p6_data{
    width: 39px;
    bottom: 25%;
}
.p6_data1{
    position: absolute;
    background: url(../images/p6_data1.png) bottom no-repeat;
    background-size:cover;
    height: 0px;
    left: 21.5%;
}
.p6_data2{
    position: absolute;
    background: url(../images/p6_data2.png) bottom no-repeat;
    background-size:cover;
    height: 0px;
    left: 33.3%;
    width: 43px;
}
.p6_data3{
    position: absolute;
    background: url(../images/p6_data3.png) bottom no-repeat;
    background-size:cover;
    height: 0px;
    left: 51.5%;
    width: 50px;
}
.p6_data4{
    position: absolute;
    background: url(../images/p6_data4.png) bottom no-repeat;
    background-size:cover;
    height: 0px;
    left: 65.3%;
    width: 51px;
}
.p7 .p7_kuang{
    height: 71%;
    text-align: center;
}
.p7{
    background:url(../images/p7_bg.jpg) center/cover no-repeat;
}
.p7_title1,
.p7_kuang0{
    position: relative;
    width: 100%;
    height: auto;
}
.p7_img{
    height: auto;
    display: inline-block;
    pointer-events: none;
}
.p7_img1{
    width: 88%;
    margin: 11% 0% 6% 6%;
}
.p7_img2{
    width: 93%;
    margin-left: 3.5%;
}
.p7_kuangbox{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 6.6% 8% 10.5% 8%;
    box-sizing:  border-box;
    -webkit-box-sizing: border-box;
}
.p7_kuang0 div{
    display: inline-block;
}
.p7_kuangbox *{
    display: inline-block;
    position: relative;
    vertical-align: middle;
}
.p7_rows{
    width: 100%;
    height: 5.5%;
    box-sizing:  border-box;
    white-space:  nowrap;
}
.p7_rows>div{
    height: 100%;
}
.p7_rows12{
    white-space: normal;
    height: 13.3%;
    background: #C9A76A;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    margin-top: 4.1%;
    margin-bottom: 3%;
}
.p7_rows12>div>div{
    height: 100%;
}
.p7_rows12>div{
    height: 25%;
    width: 100%;
    white-space:  nowrap;
}
.kuang_input16 {
    text-align: left!important;
    text-indent: 20%;
}
.p7_rows12_1{
    white-space: nowrap;
}
.p7_btn1{
    width: 47%;
    height: 6%;
    margin-left: 26.5%;
    margin-top: 7%;
    background: url(../images/p7_btn1.png) center/contain no-repeat;
}
.p7_icon1{
    width: 5%;
    background:url(../images/p7_icon1.png) center/contain no-repeat;
}
.p7_icon2{
    width: 4.5%;
    background:url(../images/p7_icon2.png) center/contain no-repeat;
}
.p7_input1{
    width: 21.5%;
    background:url(../images/p7_input1.png) center/contain no-repeat;
}
.p7_input10{
    width: 49%;
    background:url(../images/p7_input10.png) center/contain no-repeat;
}
.p7_input11{
    width: 56%;
    background:url(../images/p7_input11.png) center/contain no-repeat;
}
.p7_input12,
.p7_input16,
.p7_input13{
    width: 22%;
}
.p7_input12{
    background:url(../images/p7_input12.png) center/contain no-repeat;
}
.p7_input13{
    background:url(../images/p7_input13.png) center/contain no-repeat;
}
.p7_input16{
    background:url(../images/p7_input16.png) center/contain no-repeat;
}
.p7_input14{
    width: 42%;
    background:url(../images/p7_input14.png) center/contain no-repeat;
}
.p7_input15{
    width: 42%;
    background:url(../images/p7_input15.png) center/contain no-repeat;
}
.p7_input17{
    margin-right: 6%;
    width: 29%;
    background:url(../images/p7_input17.png) center/contain no-repeat;
}
.p7_input18{
    width: 35%;
    background:url(../images/p7_input18.png) center/contain no-repeat;
}
.p7_input17,
.p7_input18{
    margin-left: 2%;
}
.p7_input2{
    margin-right: 22%;
    width: 22%;
    background:url(../images/p7_input2.png) center/contain no-repeat;
}
.p7_input3{
    width: 27%;
    background:url(../images/p7_input3.png) center/contain no-repeat;
}
.p7_input4{
    width: 21%;
    background:url(../images/p7_input4.png) center/contain no-repeat;
}
.p7_input5{
    width: 32%;
    background:url(../images/p7_input5.png) center/contain no-repeat;
}
.p7_input6,
.p7_input7,
.p7_input8{
    width: 18%;
}
.p7_input6{
    background:url(../images/p7_input6.png) center/contain no-repeat;
}
.p7_input7{
    margin-left: 14%;
    background:url(../images/p7_input7.png) center/contain no-repeat;
}
.p7_input8{
    background:url(../images/p7_input8.png) center/contain no-repeat;
}
.p7_input9{
    width: 32%;
    background:url(../images/p7_input9.png) center/contain no-repeat;
}
.p7_kuang{
    border: 1px solid #B88222;
    border-radius: 4px;
    -webkit-border-radius: 4px;
    background: #fff;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}
.p7_kuang_right{
    position:  absolute;
    right: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    top: 50%;
}
.p7_kuang1{
    width: 64%;
}
.p7_kuang2{
    width: 51%;
}
.p7_kuang3{
    width: 23%;
    height: 66%!important;
}
.p7_kuang4{
    width: 45%;
}
.p7_kuang5{
    width: 35%;
}
.p7_kuang6{
    width: 71%;
}
.p7_kuang7{
    width: 23.6%;
    height: 100%!important;
}
.p7_kuang7_1{
    margin-left: 3%;
}
.p7_kuang7_2{
    margin-left: 5%;
}
.p7_man{
    width: 4.1%;
    background:url(../images/p7_man.png) center/contain no-repeat;
}
.p7_man1[data-val="0"]{
    background:url(../images/p7_man1.png) center/contain no-repeat;
}
.p7_man1[data-val="1"]{
    background:url(../images/p7_man2.png) center/contain no-repeat;
}
.p7_ts{
    position: absolute;
    height: 5%;
    display: none;
}
.p7_ts1{
    width: 31%;
    left: 22%;
    top: 11%;
    background:url(../images/p7_ts1.png) center/contain no-repeat;
}
.p7_ts2{
    width: 28%;
    left: 33%;
    top: 28.5%;
    background:url(../images/p7_ts2.png) center/contain no-repeat;
}
.p7_ts3{
    width: 28%;
    left: 52%;
    top: 46%;
    background:url(../images/p7_ts3.png) center/contain no-repeat;
}
.p7_ts4{
    width: 28%;
    left: 24.5%;
    top: 50.5%;
    background:url(../images/p7_ts4.png) center/contain no-repeat;
}
.p7_ts5{
    width: 19.5%;
    left: 51%;
    top: 59.6%;
    background:url(../images/p7_ts5.png) center/contain no-repeat;
}
.p7_ts6{
    width: 26.5%;
    height: 9%;
    left: 72%;
    top: 56%;
    background:url(../images/p7_ts6.png) center/contain no-repeat;
}
.p7_txt1{
    margin-left: 48%;
    width: 8.5%;
    background:url(../images/p7_txt1.png) center/contain no-repeat;
}
.p7_txt2{
    margin-left: 14%;
    width: 11%;
    background:url(../images/p7_txt2.png) center/contain no-repeat;
}
.p7_women{
    width: 4.4%;
    background:url(../images/p7_women.png) center/contain no-repeat;
}
.p7_woman1[data-val="0"]{
    background:url(../images/p7_woman1.png) center/contain no-repeat;
}
.p7_woman1[data-val="1"]{
    background:url(../images/p7_woman2.png) center/contain no-repeat;
}
.p7_man,
.p7_women{
    margin-left: 2%;
}
.p7_man1,
.p7_woman1{
    width: 7.2%;
}
.p7_woman1{
    margin-left: 13%;
}
.p7_rows12_1{
    margin-top: 1%;
}
.p7_rows12_2{
    margin-top: 0%;
}
.p7_rows12_3{
    margin-top: 2%;
}
.p7_bottom{
    width: 100%;
    height: 6.5vw;
}
.p7_arrow{
    width: 1.45rem;
    position: absolute;
    right: 3%;
    height: 100%;
    background: url(../images/p8_decor5.png) center/contain no-repeat;
}
.kuang_input{
    width: 100%;
    height: 100%;
    line-height: 7vw;
    font-size: 1.2rem;
    color: #000;
    text-align:  center;
    font-weight: normal!important;
}
.select_input{
    pointer-events: none;
}
.p8{
    background:url(../images/loading_bg.jpg) center/cover no-repeat;
}
.p8 div{
    position: absolute;
}
.p8_btn{
    top: 86.5%;
    width: 39%;
    height: 8%;
}
.p8_btn1{
    left: 8%;
    background:url(../images/p8_btn1.png) center no-repeat;
    background-size:contain;
}
.p8_btn2{
    right: 8%;
    background:url(../images/p8_btn2.png) center no-repeat;
    background-size:contain;
}
.p8_decor{
    width: 86%;
}
.p8_decor1{
    top: 20%;
    height: 23%;
    background:url(../images/p8_decor1.png) center no-repeat;
    background-size:contain;
}
.p8_decor2{
    top: 55.6%;
    height: 13%;
    background:url(../images/p8_decor2.png) center no-repeat;
    background-size:contain;
    white-space: pre-wrap;
}
.p8_decor3{
    top: 70.7%;
    height: 12%;
    background:url(../images/p8_decor3.png) center no-repeat;
    background-size:contain;
    white-space: pre-wrap;
}
.p8_decor3_bottom{
    /* background: #4545; */
    width: 100%;
    height: 14%;
    top: 42%;
}
.p8_decor4{
    top: 50%;
    width: 4%;
    height: 400%;
/*     background:url(../images/p8_decor4.png) center no-repeat;
background-size:contain; */
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
}
.p8_decor5{
    right: 4%;
    width: 26%;
    height: 100%;
    background:url(../images/p8_decor5.png) center no-repeat;
    background-size:contain;
}
.p8_line_box{
    top: 53%;
    width: 65%;
    height: 5.3%;
    left: 17%;
}
.p8_line,
.p8_line_box0{
    width: 100%;
    height: 100%;
}
.p8_line_box0{
    overflow: hidden;
    border-radius: 5px;
    -webkit-border-radius: 5px;
}
/* .p8_line1{
    background:url(../images/p8_line1.png) center no-repeat;
    background-size: 100% 100%;
}
.p8_line2{
    background:url(../images/p8_line2.png) center no-repeat;
    background-size: 100% 100%;
} */
.p8_title1{
    top: 9.5%;
    width: 34%;
    height: 5%;
    background:url(../images/p8_title1.png) center no-repeat;
    background-size:contain;
}
.p8_txt1{
    top: 16.8%;
    width: 73%;
    height: 3%;
    background:url(../images/p8_txt1.png?v=2) center no-repeat;
    background-size:contain;
}
.p8_decor1, .p8_decor2, .p8_decor3, .p8_line1, .p8_line2, .p8_title1, .p8_txt1{
    margin: 0 auto;
    left: 0;
    right: 0;
}
.p8_decor6{
    top: 19%;
    left: 3%;
    width: 97%;
    height: 22%;
    text-align: center;
}
.p8_img{
    width: auto;
    height: 100%;
    display: inline-block;
    pointer-events: none;
}
.p8_decor6_1,
.p8_decor6_2{
    position: relative!important;
    display: inline-block;
    width: auto;
    height: 62.5%;
    vertical-align:  middle;
}
.p8_decor6_kuang{
    position: relative!important;
    display: inline-block;
    width: 15%;
    height: 95%;
    border: 1.3px solid #B88222;
    border-radius: 10px;
    -webkit-border-radius: 4px;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    vertical-align:  middle;
}
.p8_decor1 div{
    position: relative;
    display:  inline-block;
    white-space:  nowrap;
}
.p8_decor1_rows{
    position: absolute!important;
    width: 58.5%;
    /* -webkit-transform: translateX(88%); */
    /* transform: translateX(88%); */
    right: 0.3%;
}
.p8_decor1_rows1{
    /* background: #5465; */
    height: 7.5vw;
    /* margin-top: 18.4%; */
    top: 48.7%;
}
.p8_decor1_rows2{
    /* background: #4578; */
    height: 7.2vw;
    top: 66.6%;
}
.p8_d1r1_t{
    width: 32%;
    height: 100%;
}
.p8_d1r1_t1{
    /* background: #1115; */
}
.p8_d1r1_t2{
    /* background: #6044; */
}
.p8_d1r1_t3{
    /* background: #8714; */
    width: 36%;
}
.p8_minus,
.p8_plus{
    height: 418%;
    top: 50%;
    width: 5%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.p8_minus{
    left: -8%;
    background:url(../images/p8_minus.png) center no-repeat;
    background-size:contain;
}
.p8_plus{
    right: -7%;
    /* height: 418%; */
    background:url(../images/p8_plus.png) center no-repeat;
    background-size:contain;
}
.p8_txt3{
    top: 72%;
    left: 0;
    right: 0;
    margin:  0 auto;
    width: 48%;
    height: 12%;
    background:url(../images/p8_txt3.png) center no-repeat;
    background-size:contain;
}
.p8 input{
    pointer-events: none;
    line-height: 7vw;
    font-size: 1.2rem;
    color: #000;
    text-align: center;
    font-weight: bold;
}
.p8_decor2_rows{
    width: 47.5%;
    height: 28%;
    position: absolute;
    right: 0.3%;
}
.p8_decor2_rows1{
    /* background: #3356; */
    top: 35%;
}
.p8_decor2_rows2{
    /* background: #5256; */
    top: 62%;
}
.p8_decor3_rows{
    position:  absolute;
    width: 53.3%;
    height: 29%;
    right: 0.3%;
}
.p8_decor3_rows1{
    /* background: #5416; */
    top: 37%;
}
.p8_decor3_rows2{
    /* background: #1456; */
    top: 65%;
}





.example{
    height: 40px;
    width: 86%;
    position: absolute;
    top: 27%;
    left: 7%;
}
.range-left{
    float: left;
    font-size:3.8vw;
    line-height: 3.2vh;
    position: relative;
    top: 40%;
}
.range-quantity {
    background: url(../images/p8_line2.png) center no-repeat;
    background-size: 100% 100%;
    border-radius: 15px;
    display: block;
    height: 100%;
    width: 50%;
    position: absolute;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
}
.range-bar {
    position:relative;
    background: url(../images/p8_line1.png) center no-repeat;
    background-size: 100% 100%;
    top: 53%;
    width: 65%;
    height: 5.3%;
    left: 17%;
}
.range-min,
.range-max{
    display: none;
}
.range-handle{
    position: absolute;
    -webkit-transform: translate3d(-50%,-50%,0);
    background: url(../images/p8_decor4.png) center no-repeat;
    background-size: 50% 100%;
    transform: translate3d(-50%,-50%,0);
    z-index: 9;
    -webkit-box-shadow: none;
    box-shadow: none;
    top: 50%;
    width: 6vw;
    height: 5vw;
    border-radius: unset;
    -webkit-border-radius: unset;
}
.beizhu{
    top: 82%;
    left: 0;
    right: 0;
    margin:  0 auto;
    width: 86%;
    height: 3%;
    background:url(../images/beizhu.png) center no-repeat;
    background-size:contain;
}
.p8_icon{
    height: 7vw;
    vertical-align: middle;
    background:url(../images/p8_icon1.png) center no-repeat;
    background-size: 91%;
    transform: translateY(-50%);
}
.p8_icon_1{
    top: 57%;
    left: 33%;
    position: absolute!important;
}
.p8_icon_2{
    top: 76%;
    left: 36%;
}
.p8_icon_3{
    top: 77%;
    left: 50%;
}
.p8_ts1{
    top: 24%;
    left: 29%;
    width: 32%;
    height: 9%;
    background:url(../images/p8_ts1.png) center no-repeat;
    background-size:contain;
}
.p8_ts2{
    top: 55.6%;
    left: 27%;
    width: 64%;
    height: 9%;
    background:url(../images/p8_ts2.png) center no-repeat;
    background-size:contain;
}
.p8_ts3{
    top: 38.5%;
    left: 2.5%;
    width: 45%;
    height: 11%;
    background:url(../images/p8_ts3.png) center no-repeat;
    background-size:contain;
}