html,body{font:12px 'microsoft yahei';overflow:hidden;width:100%;height:100%;margin:0;padding:0;}
a{text-decoration: none; color:inherit;}
.load{font-size:50px;position:relative;z-index:9999;width:100%;height:100%;text-align:center;color:#fff;background:rgba(0,0,0,.8);}
ul,li{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4,p,figure{margin:0;}
.music{position:absolute;width:31px;height:31px;z-index:2;top:50px;right:25px; zoom: 0.6; display:none;}
a.arr,.u-arrow-bottom{position:absolute;z-index:100;bottom: 15px;left:50%;margin-left:-45px;-webkit-animation:arr2 1.2s linear infinite;animation:arr2 1.2s linear infinite;width:90px;height:67px;text-align:center;}
.loader{position:absolute;top:0;right:0;bottom:0;left:0;width:35px;height:35px;margin:auto;-webkit-animation:spin 1.5s linear infinite;-moz-animation:spin 1.5s linear infinite;}
.loader i{position:absolute;display:block;width:35px;height:35px;border-radius:25px;}
.loader i:before,.loader i:after{position:absolute;display:block;width:inherit;height:inherit;content:'';border-radius:inherit;}
.loader i:first-child:before{-webkit-animation:rotate-top-left 1.5s linear infinite;-moz-animation:rotate-top-left 1.5s linear infinite;background:rgba(52,149,221,.9);}
.loader i:first-child:after{-webkit-animation:rotate-top-right 1.5s linear infinite;-moz-animation:rotate-top-right 1.5s linear infinite;background:rgba(225,73,44,.9);}
.loader i:last-child:before{-webkit-animation:rotate-bottom-left 1.5s linear infinite;-moz-animation:rotate-bottom-left 1.5s linear infinite;background:rgba(249,206,43,.9);}
.loader i:last-child:after{-webkit-animation:rotate-bottom-right 1.5s linear infinite;-moz-animation:rotate-bottom-right 1.5s linear infinite;background:rgba(0,153,117,.9);}
.wrap{position:absolute;top:0;left:0;overflow:hidden;width:100%;height:100%;}
.cont{width:100%;height:100%;-webkit-transition:.5s ease;transition:.5s ease;-webkit-transform:translate3d(0%,0,0) scale3d(1,1,1);transform:translate3d(0%,0,0) scale3d(1,1,1);-webkit-backface-visibility:hidden;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;}
/*.cont>section{position:relative;overflow:hidden;width:320px;height:100%;}*/
.cont>section{position:absolute;overflow:hidden;width:100%;height:100%; left: 0; top: 0;}
.sect-inner{width:320px;height:840px;position:absolute;margin:auto;top:0;left:0;right:0;bottom:0;font-size:20px;line-height:1.5;text-align:center;z-index:1; z-index: 9;}
.sharepic{position:absolute;top:0;/* right:60px; */height:100%;width:100%;z-index:1000;background:#000;opacity:.8;display:none;/* -webkit-animation:arr1 1.2s linear infinite; */-animation:arr1 1.2s linear infinite;}
.music{position: absolute; right: 10px; top: 10px; padding: 30px; }
.musicplay{-webkit-animation:music 1.5s linear infinite;-moz-animation:music 1.5s linear infinite;animation:music 1.5s linear infinite;}
.music img{max-width: 45px;}
#pre_page{background: #ccc;}

.qrcode{  width: 260px;
  height: 300px;
  position: absolute;
  left: 50%;
  margin-left: 200px;
  top: 50%;
  margin-top: -185px;}
 
.mainAll{width:356px; height: auto;overflow: hidden; position: absolute; left: 27%;top: 50%; margin-top: -340px;}
.mobile_top{
    height: 56px;
    width: 320px;
    background-size: 100%;
}
.phone_menubar {
    width: 320px;
    height: 20px;
}
.mobile_title{
    width: 320px;
    height: 40px;
    line-height: 40px;
    background: #000;
    color: #fff;
    text-align: center;
    border-left: 1px solid #F6F6F6;
    border-right: 1px solid #F6F6F6;
    font-size: 18px; font-weight: bold;
    margin-left: -1px;
}
.mobile_bot{    height: 75px;width: 320px;
    text-align: center;
    background-size: 100%;}
 .mobile_tip {
    width: 320px;
    margin-top: 5px;
    text-align: center;
    color: #999;
}
.nr{width: 320px; height: 486px;position: relative;}
.codebot{width: 100%; height: 30px; line-height: 30px; font-size: 16px;text-align: center;}
.nrmobile{width: 100%; height: 100%;}
.ctrl_panel{
  position: absolute;
  right: -30px;
  width: 30px;
  top: 0px;
  height: 150px;
}
.mobile_box{width: 100%; height: 100%;}
.ctrl_panel a{width:30px; display: block; height:85px; background: #2096f9; border-bottom-right-radius: 5px; border-top-right-radius: 5px; color: #fff; font-size: 16px; text-align: center;  padding:15px 3px 0; cursor: pointer;}
#pre_page{margin-bottom: 10px;}


.submit_tips{width: 100%; height: 100%;position: absolute; left: 0; top: 0; z-index: 99; background: rgba(0,0,0,0.7); display: none;}
.submit_tips .suc_tip,.submit_tips .err_tip{width: 250px; height: 80px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin:auto; background: #fff; text-align: center; font-size: 30px; line-height: 80px; color: #333; border-radius: 10px; display: none;}

.tab_background{width:100%; height: 100%; position:absolute; left:0; top:0;z-index:999;}
            .tabtitle_div{width:100%; height:60px; position:absolute; left:0; bottom:0;z-index:999;overflow:hidden;}
            .tabcont_div{width:100%; height: 100%; position:absolute; left:0; top:0;z-index:99;}
            .tabtitle_a{float:left;height:100%;text-align:center;font-size:16px;margin:0 1px;padding:0 1px;box-sizing:border-box; }
            .tabcont_a{position:absolute;left:0;top:0;right:0;bottom:0;margin:auto;width:100%;display:none;}








.comp_anchor {
  width: 240px;
  height: 32px;
  display: block;
  text-align: center;
  white-space: nowrap;
  line-height: 32px;
  font-size: 16px;
}

.element-box{opacity: 0;}



.boxtop{width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 9; background: rgba(0,0,0,0); display: none;}
.edit_wrapper2{width: 100%; height: 100%; overflow: hidden;}
.m-img{width: 100%; height: 100%;}
.edit_area2 li{position: absolute; }
.edit_area2>li {
    color: #676767;
    line-height: 1;
    background: 0;
    position: absolute;
    list-style: none!important;
    margin: 0!important;
    padding: 0;
    -webkit-transition: padding .5s;
    -moz-transition: padding .5s;
    transition: padding .5s;
    min-height: 24px;
    min-width: 24px;
    width: 100%;
    -webkit-user-select: none;
}
.u-arrow-bottom{width: 30px; height: 30px; position: absolute;bottom:25px; left: 50%; margin-left: -15px;}
.comp_paragraph {
    font-size: 24px;
    color: #404449;
    line-height: inherit;
    padding: .3em 15px;
    margin: 0;
    width: 100%;
    height: 100%;
    word-wrap: break-word;
    text-align: left;
}
.edit_area2>li * {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}
.edit_area2 {
    position: absolute;
    top: 0;
    left: 0; right: 0; bottom: 0; margin: auto;
    text-align: left;
    width: 320px;
    height: 486px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}


.main-page.z-current {
    z-index: 2;
    display: inline-block;
    display: block;
}

.main-page {
    border: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background-position: top center;
    background-size: cover;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    z-index: 0;
    display: none;
    -webkit-transform-origin: center center;
    background: #fff;
}

.u-arrow-right {
    position: absolute;
    width: 14px;
    height: 24px;
    z-index: 150;
    top: 50%;
    margin-top: -10px;
    right: 20px;
    transform: scaleX(-1);
    -webkit-transform: scaleX(-1)
}

.u-arrow-right img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -7px 0 0 -14px;
    width: 14px;
    height: 24px;
    background-position: 0 -82px;
    -webkit-animation: rightflip 1.5s infinite ease-in-out ;
    -moz-animation: rightflip 1.5s infinite ease-in-out;
    animation: rightflip 1.5s infinite ease-in-out
}
.validate-error{position: absolute; right: 8px; top: 0; color: #f00;}
.edit_area2 .element {
    min-width: 24px;
    min-height: 24px;
    color: inherit;
}
.edit_area2 .element {
    min-width: 24px;
    min-height: 24px;
    color: inherit;
}
.wsite-input .element-box {
    color: #676767;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: #f9f9f9;
}
.wsite-button .element-box {
    text-align: center;
    color: #676767;
    border-radius: 5px;
    background: #f9f9f9;
}
.comp_input {
    width: 240px;
    height: 36px;
    background: transparent;
    border: 0;
    padding: 8px!important;
    font-family: 'Open Sans',sans-serif;
    font-weight: 400;
    font-size: 16px;
}
.comp_button {
    width: 240px;
    height: 36px;
    min-width: 50px;
    white-space: nowrap;
    border: 0;
    background: transparent;
    font-size: 16px;
    color: #999;
}
.active{
    transform-origin: center bottom forwards;
    -webkit-transform-origin: center bottom;
}




.z-active-pre {
    -webkit-animation: sixspeac_pre .6s linear forwards;
    -moz-animation: sixspeac_pre .6s linear forwards;
    animation: sixspeac_pre .6s linear forwards;
}
.z-active-now {
    -webkit-animation: sixspeac_now .6s 0s linear forwards;
    -moz-animation: sixspeac_now .6s 0s linear forwards;
    animation: sixspeac_now .6s 0s linear forwards;
}
.z-active-now1 {
    -webkit-animation: sixspeac_now1 .6s 0s linear forwards;
    -moz-animation: sixspeac_now1 .6s 0s linear forwards;
    animation: sixspeac_now1 .6s 0s linear forwards;
}
.z-active-next {
    -webkit-animation: sixspeac_next .6s 0s linear forwards;
    -moz-animation: sixspeac_next .6s 0s linear forwards;
    animation: sixspeac_next .6s 0s linear forwards;
}

@-webkit-keyframes sixspeac_pre {
    0%{
        -webkit-transform: rotateX(0deg) translateY(0px) translateZ(0px);
        transform: rotateX(0deg) translateY(0px) translateZ(0px);
    }
    100%{
        transform: rotateX(90deg) translateY(-284px) translateZ(284px);
    }
}
@keyframes sixspeac_pre {
    0%{
        -webkit-transform: rotateX(0deg) translateY(0px) translateZ(0px);
        transform: rotateX(0deg) translateY(0px) translateZ(0px);
    }
    100%{
        transform: rotateX(90deg) translateY(-284px) translateZ(284px);
    }
}
@keyframes sixspeac_now {
    0%{
        -webkit-transform: rotateX(-90deg) translateY(284px) translateZ(284px);
        transform: rotateX(-90deg) translateY(284px) translateZ(284px);
    }
    100%{
        transform: rotateX(0deg) translateY(0px) translateZ(0px);
    }
}
@-webkit-keyframes sixspeac_now {
    0%{
        -webkit-transform: rotateX(-90deg) translateY(284px) translateZ(284px);
        transform: rotateX(-90deg) translateY(284px) translateZ(284px);
    }
    100%{
        transform: rotateX(0deg) translateY(0px) translateZ(0px);
    }
}
@keyframes sixspeac_now1 {
    0%{
        -webkit-transform: rotateX(90deg) translateY(-284px) translateZ(284px);
        transform: rotateX(90deg) translateY(-284px) translateZ(284px);
    }
    100%{
        transform: rotateX(0deg) translateY(0px) translateZ(0px);
    }
}
@-webkit-keyframes sixspeac_now1 {
    0%{
        -webkit-transform: rotateX(90deg) translateY(-284px) translateZ(284px);
        transform: rotateX(90deg) translateY(-284px) translateZ(284px);
    }
    100%{
        transform: rotateX(0deg) translateY(0px) translateZ(0px);
    }
}
@keyframes sixspeac_next {
    0%{
        -webkit-transform: rotateX(0deg) translateY(0px) translateZ(0px);
        transform: rotateX(0deg) translateY(0px) translateZ(0px);
    }
    100%{
        transform: rotateX(-90deg) translateY(284px) translateZ(284px);
    }
}
@-webkit-keyframes sixspeac_next {
    0%{
        -webkit-transform: rotateX(0deg) translateY(0px) translateZ(0px);
        transform: rotateX(0deg) translateY(0px) translateZ(0px);
    }
    100%{
        transform: rotateX(-90deg) translateY(284px) translateZ(284px);
    }
}

@-webkit-keyframes rightflip {
    0%,
    30% {
        opacity: 0;
        -webkit-transform: translate(10, 0)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate(0, 0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translate(-8px, 0)
    }
}

@-moz-keyframes rightflip {
    0%,
    30% {
        opacity: 0;
        -moz-transform: translate(10, 0)
    }
    60% {
        opacity: 1;
        -moz-transform: translate(0, 0)
    }
    100% {
        opacity: 0;
        -moz-transform: translate(-8px, 0)
    }
}

@keyframes rightflip {
    0%,
    30% {
        opacity: 0;
        transform: translate(10, 0)
    }
    60% {
        opacity: 1;
        transform: translate(0, 0)
    }
    100% {
        opacity: 0;
        transform: translate(-8px, 0)
    }
}
.u-arrow-bottom {
    position: absolute;
    bottom: 20px;
    left: 50%;
    z-index: 150;
    width: 24px;
    height: 14px;
    margin-left: -7px
}

.u-arrow-bottom img {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -7px 0 0 -14px;
    max-width: 30px;
    /*height: 14px;*/
    background-position: 0 -82px;
    -webkit-animation: start 1.5s infinite ease-in-out;
    -moz-animation: start 1.5s infinite ease-in-out;
    animation: start 1.5s infinite ease-in-out
}

@-webkit-keyframes start {
    0%,
    30% {
        opacity: 0;
        -webkit-transform: translate(0, 10px)
    }
    60% {
        opacity: 1;
        -webkit-transform: translate(0, 0)
    }
    100% {
        opacity: 0;
        -webkit-transform: translate(0, -8px)
    }
}

@-moz-keyframes start {
    0%,
    30% {
        opacity: 0;
        -moz-transform: translate(0, 10px)
    }
    60% {
        opacity: 1;
        -moz-transform: translate(0, 0)
    }
    100% {
        opacity: 0;
        -moz-transform: translate(0, -8px)
    }
}

@keyframes start {
    0%,
    30% {
        opacity: 0;
        transform: translate(0, 10px)
    }
    60% {
        opacity: 1;
        transform: translate(0, 0)
    }
    100% {
        opacity: 0;
        transform: translate(0, -8px)
    }
}















/*Loading CSS*/ 
.loadwrap{  width: 100%;height: 100%;background: #155fc9;position: absolute;z-index: 101;}
#caseBlanche {  height: 150px;  width : 150px;  float : left;  position: absolute;  z-index: 99;  left: 0;right: 0;top: -17%;bottom: 0;margin: auto;zoom: 0.5;}
#caseBlanche #load {height: 150px;width: 100%;color : #fff;font-family : calibri;text-align : center;position : absolute;/* top: 53px; */font-size: 2rem;line-height: 50px;text-align: center;}
#load i{height: 100%;display: inline-block;width: 100%;text-align: center;line-height: 150px;}
#load i img{ max-width: 150px;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;}
#test {height : 10px;width : 10px;position : absolute;background-color : #fff;border-radius : 50%;top : 0px;left: 38px;}
#rond {height: 150px;width: 150px;border: 1px solid #fff;border-radius : 50%;position :absolute;animation : rond 2s infinite;-webkit-animation : rond 2s infinite;}
.loading{width: 100%;color: #fff;font-size: 2rem;position: absolute;top: 171px;text-align: center;}


/* loading */
@keyframes rond {
  0% {transform : rotate(0deg);}
  100% {transform : rotate(360deg);}
}

@-webkit-keyframes rond {
  0% {-webkit-transform : rotate(0deg);}
  100% {-webkit-transform : rotate(360deg);}
}
/*Loading*/

/* loading */
@-webkit-keyframes spin{
  0%{-webkit-transform:rotate(0deg);}
  50%{-webkit-transform:rotate(-180deg);}
  100%{-webkit-transform:rotate(-360deg);}
}
@-webkit-keyframes rotate-top-right{
  0%{-webkit-transform:rotate(0deg);}
  50%{-webkit-transform:rotate(-180deg);-webkit-transform-origin:20% 20%;}
  100%{-webkit-transform:rotate(-360deg);}
}
@-webkit-keyframes rotate-top-left{
  0%{-webkit-transform:rotate(0deg);}
  50%{-webkit-transform:rotate(180deg);-webkit-transform-origin:80% 20%;}
  100%{-webkit-transform:rotate(360deg);}
}
@-webkit-keyframes rotate-bottom-right{
  0%{-webkit-transform:rotate(0deg);}
  50%{-webkit-transform:rotate(-180deg);-webkit-transform-origin:80% 80%;}
  100%{-webkit-transform:rotate(-360deg);}
}
@-webkit-keyframes rotate-bottom-left{
  0%{-webkit-transform:rotate(0deg);}
  50%{-webkit-transform:rotate(180deg);-webkit-transform-origin:20% 80%;}
  100%{-webkit-transform:rotate(360deg);}
}
@-moz-keyframes spin{
  0%{-moz-transform:rotate(0deg);}
  50%{-moz-transform:rotate(-180deg);}
  100%{-moz-transform:rotate(-360deg);}
}
@-moz-keyframes rotate-top-right{
  0%{-moz-transform:rotate(0deg);}
  50%{-moz-transform:rotate(-180deg);-moz-transform-origin:20% 20%;}
  100%{-moz-transform:rotate(-360deg);}
}
@-moz-keyframes rotate-top-left{
  0%{-moz-transform:rotate(0deg);}
  50%{-moz-transform:rotate(180deg);-moz-transform-origin:80% 20%;}
  100%{-moz-transform:rotate(360deg);}
}
@-moz-keyframes rotate-bottom-right{
  0%{-moz-transform:rotate(0deg);}
  50%{-moz-transform:rotate(-180deg);-moz-transform-origin:80% 80%;}
  100%{-moz-transform:rotate(-360deg);}
}
@-moz-keyframes rotate-bottom-left{
  0%{-moz-transform:rotate(0deg);}
  50%{-moz-transform:rotate(180deg);-moz-transform-origin:20% 80%;}
  100%{-moz-transform:rotate(360deg);}
}
@-webkit-keyframes scaleInUp{
  0%{-webkit-transform:scale3d(0,0,0);transform:scale3d(0,0,0);-webkit-transform-origin:bottom;transform-origin:bottom;opacity:0;}
  100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);-webkit-transform-origin:bottom;transform-origin:bottom;opacity:1;}
}
@keyframes scaleInUp{
  0%{-webkit-transform:scale3d(0,0,0);transform:scale3d(0,0,0);-webkit-transform-origin:bottom;transform-origin:bottom;opacity:0;}
  100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);-webkit-transform-origin:bottom;transform-origin:bottom;opacity:1;}
}


@media screen and (max-height:900px){
  .sect-inner{height:900px;-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9);}
}
@media screen and (max-device-height:480px){
    .s6 .sect-inner{margin-top: -50px;}
    .s2 .sect-inner,.s3 .sect-inner{padding-top: 100px;}
    .s2 .im1{top: 100px;}
    .s3 .im1{padding-top: 50px;}
    .s5 .im14,.s6 .im15{bottom: 10px;}
    #wrapper{transform: scale(0.85); -webkit-transform: scale(0.85); margin-top: -30px;}
    .page9 .imn1{padding-top: 30px;}
}


.load_bot{width: 100%; height: 3px; background: #ccc; position: absolute; left: 0; bottom: 0; z-index: 9999;}
.now_page{position: absolute; right: 3px;bottom: 3px; color: #fff;}
.progress-bar-rail{position: absolute; left: 0; bottom: 0; height: 3px; background: transparent; width: 100%;}
.progress-bar{height: 100%; background: #155fc9; width: 100%;}
.success{width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 99; background: rgba(0,0,0,0.7); display: none; }
.success img{position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto;}
.cas {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
    opacity: 1;
    -webkit-transition: opacity .5s;
    -ms-transition: opacity .5s;
    -moz-transition: opacity .5s;
}

.finger_background {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
}
.finger_div {
  position: absolute;
  width: 200px;
  height: 200px;
  left: 50%;
  top: 50%;
  margin-left: -100px;
  margin-top: -100px;
  z-index: 1000;
  text-align: center;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}
.finger_zw {
  width: 140px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -70px;
  margin-top: -70px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
}
.finger_line {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  display: none;
  width: 180px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -90px;
  margin-top: 70px;
}
.finger_info {
  color: #fff;
  position: absolute;
  top: 130px;
  left: 0;
  width: 320px;
  text-align: center;
  font-size: 14px;
}
.tip {
    z-index: 10000;
    font-size: 20px;
    position: absolute;
    width: 180px;
    top: 320px;
    text-align: center;
    background-color: #000;
    opacity: .8;
    color: #fff;
    line-height: 45px;
    border-radius: 10px;
    filter: alpha(opacity=80);
    left: 50%;
    margin-left: -90px;
    word-wrap: break-word;
}
.popclose {
    /* still bad on picking color */
    background: rgba(0,0,0,0.7);
    color: #fff;
    /* make a round button */
    border-radius: 40px;
    /* center text */
    line-height: 30px;
    text-align: center;
    height: 30px;
    width: 30px;
    font-size: 22px;
    padding: 1px;
}
/* use cross as close button */
.popclose::before {
    content: "\2716";
}
/* place the button on top-right */
.popclose {
    top: 10px;
    right: 10px;
    position: absolute;
    z-index: 9999; display:none;
}
.main-page .element-box-popimg{    width: 320px;
    height: 486px;
    position: absolute;
    left: 0; 
    top: 0;display:none;
    z-index: 999;}
.element-box-popimg img{max-width: 320px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto;}