/*
 * Version: 0.0.3
 * Author: Fun
 * Create: 2015-09-06
 * Update: 2016-01-07
 */
@charset "UTF-8";
html {-webkit-tap-highlight-color: transparent;}
html,body{width: 100%;height: 100%;overflow: auto}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td ,img ,button{padding: 0;margin: 0;}
body {position: relative;background: #FFF;font-family: "Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3",FontAwesome,sans-serif;color: #333;font-size: 0.28rem;}
table {border-collapse: collapse;border-spacing: 0;}
fieldset,img,a img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var {font-weight: normal;font-style: normal;}
ol,ul,li{list-style: none;}
h1,h2,h3,h4,h5,h6 {font-weight: normal;font-size: 100%;}
img{display: block;}
*, :before, :after {-webkit-box-sizing: border-box;box-sizing: border-box;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, main, nav, section, summary {display: block;}
a{-webkit-appearance: none;text-decoration: none;-webkit-text-decoration:none;}
.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
.clearfix { *zoom:1; }
.hidden{display: none;}
.center { margin: 0 auto; }
.black-mask{
  background-color: rgba(0,0,0,0.8);
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
}
input, textarea, select{border:none; outline: none;background-color: transparent;}
/*  swiper必备样式 */
.swiper-container,.swiper-wrapper,.swiper-slide { width: 100%; height: 100%; }
.swiper-slide { position: relative;  }
/*  音乐图标样式 */
.musicBtn{opacity: 0.7;position: fixed;right: 0.1rem;  top: 0.1rem; background-repeat: no-repeat; background-size: 100% 100%; z-index: 999;width: .4rem;height: .4rem;}
.music_open{ -webkit-animation: arotate 2s linear infinite;animation: arotate 2s linear infinite;}
/* 下滑图标样式 */
.arrow{width: 0.58rem; z-index: 1009; position: fixed; bottom: 0.4rem; left: 50%; margin-left: -0.29rem;}
/* 公司logo */
.bootom_logo{width: 5.8rem;position: absolute;bottom: 0.1rem;left: 50%;margin-left: -2.9rem;z-index: 999;}
.loading{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    -webkit-transition: all 1s;
    transition: all 1s;
    background-color: #333333;
}
.loading .loadingArea{
    left: 50%;
    width: 200px;
    height: 200px;
    top: 50%;
    margin-left: -100px;
    margin-top: -100px;
    position: absolute;
}
.loading .loadingArea img { width: 100%; }
.loading .loading-percent{
    position: absolute;
    left: 50%;
    top:4.3rem;
    transform: translate(-50%);
    font-size: 0.24rem;
    text-align: center;
    opacity: 0;
    color:#ffffff;
}

._center{left: 50%; transform: translateX(-50%);-webkit-transform: translateX(-50%);}
.myalert{z-index: 10000;width: 100%; height: 100%;position: fixed; overflow: auto;top: 0;left: 0;}
._alert{position: fixed; width: 5.4rem;background-color: white;-webkit-transform: translate(-50%,-50%);left: 50%;top: 50%;border-radius: 4px;overflow: hidden;}
.alert-title{
    width: 100%;
    text-align: center;
    padding: 0.3rem;
    color: #040404;
    font-size: 16px;
    line-height: 0.48rem;
}
.alert-ok{
    width: 100%;
    color: #62b900;
    line-height: 0.8rem;
    text-align: center;
    font-size: 16px;
}
.alert-line{
    transform-origin: 0 0;
    width: 200%;
    transform: scale(0.5);
    border-top: 1px solid #b5b5b5;
}
.alert-mask{
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: black;
    opacity: 0.7;
    position: absolute;
}
.animated {-webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
.animate_int{-webkit-animation-duration: 1s; animation-duration: 1s;animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite; -webkit-animation-fill-mode: both; animation-fill-mode: both;}
/*.animate{opacity: 0;-webkit-transition: all 1s;transition: all 1s;position: relative;-webkit-animation-fill-mode: forwards;animation-fill-mode: forwards;-webkit-animation-timing-function: ease-out;animation-timing-function: ease-out;}*/

@-webkit-keyframes arotate{
  100%{-webkit-transform: rotateZ(-360deg);transform: rotateZ(-360deg);}
}@keyframes arotate{
  100%{-webkit-transform: rotateZ(-360deg);transform: rotateZ(-360deg);}
}

.spinner {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 10000;
}
.spinner-wrap{
    position: absolute;
    width: 100px;
    height:100px;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: rgba(0,0,0,0.6);
    border-radius: 5px;
}
.spinnerSvg{
    display: block;
    position: absolute;
    top:40%;
    left: 50%;
    width: 25px;
    height: 25px;
    font-size: 25px;
    color:#ffffff;
    margin-left: -12.5px;
    margin-top: -12.5px;
    transform-origin: center center;
}
@keyframes rotate {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}
.spinner-text{
    position: absolute;
    top:calc(40% + 23px);
    width: 100%;
    text-align: center;
    color: #FFFFFF;
    font-size: 12px;
}
@-webkit-keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {
  0%, 20%, 40%, 60%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
    -ms-transform: scale3d(.3, .3, .3);
    transform: scale3d(.3, .3, .3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    -ms-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(.9, .9, .9);
    -ms-transform: scale3d(.9, .9, .9);
    transform: scale3d(.9, .9, .9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    -ms-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(.97, .97, .97);
    -ms-transform: scale3d(.97, .97, .97);
    transform: scale3d(.97, .97, .97);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
  -webkit-animation-duration: .75s;
  animation-duration: .75s;
}



@-webkit-keyframes agz{
  from{-webkit-transform: perspective(600px) translateZ(300px);transform: perspective(600px) translateZ(300px);opacity: 0.5;opacity: 0;}
  to{-webkit-transform: perspective(600px) translateZ(0px);transform: perspective(600px) translateZ(0px);opacity: 1;}
}
.agz{opacity: 0;-webkit-animation-name: agz;animation-name: agz;-webkit-animation-duration: 0.8s;animation-duration: 0.8s;}



.delay0p2{-webkit-animation-delay: 0.2s;animation-delay: 0.2s;}
.delay0p4{-webkit-animation-delay: 0.4s;animation-delay: 0.4s;}
.delay0p6{-webkit-animation-delay: 0.6s;animation-delay: 0.6s;}
.delay0p8{-webkit-animation-delay: 0.8s;animation-delay: 0.8s;}
.delay1p2{-webkit-animation-delay: 1.2s;animation-delay: 1.2s;}
.delay1p4{-webkit-animation-delay: 1.4s;animation-delay: 1.4s;}
.delay1p6{-webkit-animation-delay: 1.6s;animation-delay: 1.6s;}
.delay1p8{-webkit-animation-delay: 1.8s;animation-delay: 1.8s;}
.delay2p2{-webkit-animation-delay: 2.2s;animation-delay: 2.2s;}
.delay2p4{-webkit-animation-delay: 2.4s;animation-delay: 2.4s;}
.delay2p6{-webkit-animation-delay: 2.6s;animation-delay: 2.6s;}
.delay2p8{-webkit-animation-delay: 2.8s;animation-delay: 2.8s;}
.delay3p2{-webkit-animation-delay: 3.2s;animation-delay: 3.2s;}
.delay3p4{-webkit-animation-delay: 3.4s;animation-delay: 3.4s;}
.delay3p6{-webkit-animation-delay: 3.6s;animation-delay: 3.6s;}
.delay3p8{-webkit-animation-delay: 3.8s;animation-delay: 3.8s;}
.delay4{-webkit-animation-delay: 4s;animation-delay: 4s;}
.delay4p2{-webkit-animation-delay: 4.2s;animation-delay: 4.2s;}
.delay4p4{-webkit-animation-delay: 4.4s;animation-delay: 4.4s;}
.delay4p6{-webkit-animation-delay: 4.6s;animation-delay: 4.6s;}
.delay4p8{-webkit-animation-delay: 4.8s;animation-delay: 4.8s;}
.delay5{-webkit-animation-delay: 5s;animation-delay: 5s;}
.delay5p2{-webkit-animation-delay: 5.2s;animation-delay: 5.2s;}
.delay5p4{-webkit-animation-delay: 5.4s;animation-delay: 5.4s;}
.delay6{-webkit-animation-delay: 6s;animation-delay: 6s;}
.delay8{-webkit-animation-delay: 8s;animation-delay: 8s;}
.delay0p5{-webkit-animation-delay: 0.5s;animation-delay: 0.5s;}
.delay1{-webkit-animation-delay: 1s;animation-delay: 1s;}
.delay1p5{-webkit-animation-delay: 1.5s;animation-delay: 1.5s;}
.delay2{-webkit-animation-delay: 2s;animation-delay: 2s;}
.delay2p5{-webkit-animation-delay: 2.5s;animation-delay: 2.5s;}
.delay3{-webkit-animation-delay: 3s;animation-delay: 3s;}
.delay3p5{-webkit-animation-delay: 3.5s;animation-delay: 3.5s;}
.delay4p5{-webkit-animation-delay: 4.5s;animation-delay: 4.5s;}
.delay7{-webkit-animation-delay: 7s;animation-delay: 7s;}


.animated1p5 {
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated2 {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated3 {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated4 {
  -webkit-animation-duration: 4s;
  animation-duration: 4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated5 {
  -webkit-animation-duration: 5s;
  animation-duration: 5s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}


html {
    font-size: 100px;
}
/* iphone4 ~ iphone6plus */
@media (min-width: 320px) {
    html {
        font-size: 50px;
    }
}

@media (min-width: 360px) {
    html {
        font-size: 56.25px;
    }
}

@media (min-width: 375px) {
    html {
        font-size: 58.6px;
    }
}

@media (min-width: 393px) {
    html {
        font-size: 61.40px;
    }
}

@media (min-width: 414px) {
    html {
        font-size: 64.6875px;
    }
}

@media (min-width: 416px) {
    html {
        font-size: 65px;
    }
}

@media (min-width: 504px) {
    html {
        font-size: 78.75px;
    }
}

@media (min-width: 603px) {
    html {
        font-size: 94.21px;
    }
}

@media (min-width: 640px) {
    html {
        font-size: 100px;
    }
}

@media (min-width: 670px) {
    html {
        font-size: 104.68px;
    }
}

@media (min-width: 672px) {
    html {
        font-size: 105px;
    }
}

/* other phone  */

@media (min-width: 704px) {
    html {
        font-size: 110px;
    }
}

@media (min-width: 768px) {
    html {
        font-size: 120px;
    }
}

@media (min-width: 832px) {
    html {
        font-size: 130px;
    }
}

@media (min-width: 896px) {
    html {
        font-size: 140px;
    }
}

@media (min-width: 1080px) {
    html {
        font-size: 168.75px;
    }
}
.pannaTip{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 0.3rem;
    line-height: 0.3rem;
    z-index:999;
    background: rgba(0,0,0,0.5);
    color: #ffffff;
    text-align: center;
    font-size: 0.24rem;
}
.rotateTipArea{
    position: absolute;
    top:1rem;
    width: 100%;
}
.rotateSvg{
    position: absolute;
    left: 50%;
    transform: translate(-50%,0);
}
.loadingSvg{
    position: absolute;
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%);
}
.rotateTipText{
    position: absolute;
    width: 100%;
    text-align: center;
    color: #ffffff;
    top:70px;
}
.pannaToastWrap{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 10000;
}
.pannaToast{
    position: absolute;
    padding: 25px 35px 20px 35px;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: rgba(0,0,0,0.4);
    border-radius: 5px;
}
.toastSvg{
    display: block;
    width: 30px;
    margin: 0 auto;
    font-size: 30px;
    color:#ffffff;
}
.toastText{
    display: block;
    width: 100%;
    margin-top: 10px;
    color: #ffffff;
    font-size: 14px;
    text-align: center;
    line-height: 20px;
}
@keyframes toastAnimation{
    0%{
        opacity:0;
        -webkit-transform:translate3d(-50%,-70%,0);
        -ms-transform:translate3d(-50%,-70%,0);
        transform:translate3d(-50%,-70%,0)
    }
    20%{
        opacity:1;
        -webkit-transform:translate3d(-50%,-50%,0);
        -ms-transform:translate3d(-50%,-50%,0);
        transform:translate3d(-50%,-50%,0)
    }
    80%{
        opacity:1;
        -webkit-transform:translate3d(-50%,-50%,0);
        -ms-transform:translate3d(-50%,-50%,0);
        transform:translate3d(-50%,-50%,0)
    }
    100%{
        opacity:0;
        -webkit-transform:translate3d(-50%,-70%,0);
        -ms-transform:translate3d(-50%,-70%,0);
        transform:translate3d(-50%,-70%,0)
    }
}
.toastAnimation{
    -webkit-animation-name:toastAnimation;
    animation-name:toastAnimation;
    animation-duration: 2s;
}
.toastSvg{
    width: 50px;
    margin: 0 auto;
}
circle{
    -webkit-transition: stroke-dasharray 600ms ease-in-out;
    transition: stroke-dasharray 600ms ease-in-out;
    transform-origin: center center;
}
.toastCircleM{
    stroke-dasharray:125 15;
    transform: rotate(-20deg);
}
.failLineLeft{
    -webkit-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
    transform-origin: center center;
}
.failLineRight{
    -webkit-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
    transition-delay: 200ms;
    transform-origin: center center;
}
.sucLineLeft{
    -webkit-transition: all 100ms linear;
    transition: all 100ms linear;
    transition-delay: 200ms;
    transform-origin: center center;
}
.sucLineRight{
    -webkit-transition: all 200ms ease-in;
    transition: all 200ms ease-in;
    transition-delay: 300ms;
    transform-origin: center center;
}
.failLineM{
    stroke-width:2!important;
    stroke-dasharray:20 0;
}
.sucLineM{
    stroke-width:2!important;
    stroke-dasharray:30 0;
}
.tipLineTop{
    -webkit-transition: all 200ms ease-in;
    transition: all 200ms ease-in;
    transition-delay: 100ms;
    transform-origin: center center;
}
.tipLineBottom{
    -webkit-transition: all 200ms ease-in;
    transition: all 200ms ease-in;
    transition-delay: 300ms;
    transform-origin: center center;
}
.tipLineM{
    stroke-width:2!important;
    stroke-dasharray:3 0;
}
.tipLineM2{
    stroke-width:2!important;
    stroke-dasharray:40 0;
}