@charset "utf-8";
/* Reset */
*{margin: 0;padding: 0;}
body,html{height: 100%;width: 100%;font-size: 12px;}
html {-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-size: 100%; }
body {color: #333333; background-color: white; height: 100%; overflow-x: hidden; -webkit-overflow-scrolling: touch;}
html,body,button, input, select, textarea { font-family:FZSJKK,"Microsoft YaHei","Microsoft JhengHei",STHeiti,MingLiu;}
ul,ol,li{ list-style-type:none;}
a { background: transparent; text-decoration: none; -webkit-tap-highlight-color: transparent; color: #505050; }
a:active { outline: 0; }
fieldset, img { border:0;outline: 0; }
table { border-collapse:collapse; border-spacing:0; }
button { border: 0 none; }
img,p,label{-moz-user-select: none;-webkit-user-select: none;-ms-user-select: none;-khtml-user-select: none;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
h1, h2, h3 {font-weight: normal;}
h1,.big{ font-size: 1.8rem;}
h2,.mid{ font-size: 1.6rem;}
h3,.small{ font-size: 1.4rem;}
/*p,label,input,option,select,textarea{font-size: 1.4rem;}*/
*{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
.f12{font-size: 1.2rem;}
.f14{font-size: 1.4rem;}
.f16{font-size: 1.6rem;}
.f18{font-size: 1.8rem;}
.f20{font-size: 2.0rem;}
.hor{display:-webkit-box;display:-ms-flexbox;-webkit-box-orient:horizontal;-ms-flex-direction:row;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;}
.ver{display:-webkit-box;display:-ms-flexbox;-webkit-box-orient:vertical;-ms-flex-direction:column;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-box-align:center;-ms-flex-align:center;}
.aligin_end{-webkit-box-align:end;-ms-flex-align:end;-webkit-align-items:flex-end;align-items:flex-end;}
.aligin_start{-webkit-box-align:start;-ms-flex-align:start;-webkit-align-items:flex-start;align-items:flex-start;}
.pack_justify{-webkit-box-pack: justify;-ms-flex-pack:justify;-webkit-justify-content: space-between;justify-content:space-between;}
.pack_start{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;}
.pack_end{-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;}
.t_center{text-align: center;}
.t_left{text-align:left;}
.t_right{text-align:right;}
.absolute{position: absolute;top: 0;left: 0;right: 0;bottom: 0;z-index: 3;}
.relative{position: relative; left: 0;top: 0;}
.maskBlack{background-color: rgba(0,0,0,0.9);}
.clear{clear: both;}
.f_l{float: left;}
.f_r{float: right;}
.n_wrapper{width: 100%;height: 100%;}
.f_wrapper{width: 640px;height: 100%;}
.hidden {overflow: hidden;}
div,img{-webkit-user-select: none;-ms-user-select: none;}
img{-webkit-transform: translate3d(0,0,0);}
a, input, select, div,textarea {-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
.hand{ cursor: pointer;}
.op{opacity: 0;}
.dn{display: none;}
.sound{opacity: 0;position: absolute;left:0;top:0}
@-webkit-keyframes rota {
    0%
    {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100%
    {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}
.rota{
    -webkit-animation-name: rota;
    -moz-animation-name: rota;
    -o-animation-name: rota;
    animation-name: rota;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
}
@-webkit-keyframes rota2 {
    0%
    {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);

    }
    100%
    {
        -webkit-transform: rotate(-360deg);
        -moz-transform: rotate(-360deg);
        -ms-transform: rotate(-360deg);
        -o-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}
.rota2{
    -webkit-animation-name: rota2;
    -moz-animation-name: rota2;
    -o-animation-name: rota2;
    animation-name: rota2;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
}

@-webkit-keyframes scaleIn {
      0%
      {
          -webkit-transform: scale(0.2);
          -moz-transform: scale(0.2);
          -ms-transform: scale(0.2);
          -o-transform: scale(0.2);
          transform: scale(0.2);
          opacity: 0;
      }
    10%
    {
        opacity: 1;
    }
    100%
    {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}
.scaleIn{
    -webkit-animation-name: scaleIn;
    -moz-animation-name: scaleIn;
    -o-animation-name: scaleIn;
    animation-name: scaleIn;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
}

@-webkit-keyframes scaleInD {
    0%
    {
        -webkit-transform: scale(1.5);
        -moz-transform: scale(1.5);
        -ms-transform: scale(1.5);
        -o-transform: scale(1.5);
        transform: scale(1.5);
        opacity: 0;
    }
    10%
    {
        opacity: 1;
    }
    100%
    {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
        opacity: 1;
    }
}
.scaleInD{
    -webkit-animation-name: scaleInD;
    -moz-animation-name: scaleInD;
    -o-animation-name: scaleInD;
    animation-name: scaleInD;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
}

@-webkit-keyframes lr {
    0%
    {
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -ms-transform: translateX(0px);
        -o-transform: translateX(0px);
        transform: translateX(0px);
    }
    100%
    {
        -webkit-transform: translateX(-30px);
        -moz-transform: translateX(-30px);
        -ms-transform: translateX(-30px);
        -o-transform: translateX(-30px);
        transform: translateX(-30px);
    }
}
.lr{
    -webkit-animation-name: lr;
    -moz-animation-name: lr;
    -o-animation-name: lr;
    animation-name: lr;
    -webkit-animation-timing-function: linear;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-direction: alternate;
    -moz-animation-direction: alternate;
    -o-animation-direction: alternate;
    animation-direction: alternate;
    -webkit-animation-duration: 6s;
    -moz-animation-duration: 6s;
    -o-animation-duration: 6s;
    animation-duration: 6s;
}

.stretchLeft {
    -moz-animation-name: stretchLeft;
    -o-animation-name: stretchLeft;
    animation-name: stretchLeft;
    -webkit-animation-name: stretchLeft;
    -moz-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;
    -moz-transform-origin: 100% 0%;
    -o-transform-origin: 100% 0%;
    transform-origin: 100% 0%;
    -ms-transform-origin: 100% 0%;
    -webkit-transform-origin: 100% 0%;
}
@-webkit-keyframes stretchLeft {
    0%
    {
        opacity: 0;
        -webkit-transform: scaleX(0.3);
        -moz-transform: scaleX(0.3);
        -o-transform: scaleX(0.3);
        transform: scaleX(0.3);
    }
    40%
    {
        opacity: 1;
        -webkit-transform: scaleX(1.02);
        -moz-transform: scaleX(1.02);
        -o-transform: scaleX(1.02);
        transform: scaleX(1.02);
    }
    60%
    {
        -webkit-transform: scaleX(0.98);
        -moz-transform: scaleX(0.98);
        -o-transform: scaleX(0.98);
        transform: scaleX(0.98);
    }
    80% {
        -webkit-transform: scaleX(1.01);
        -moz-transform: scaleX(1.01);
        -o-transform: scaleX(1.01);
        transform: scaleX(1.01);
    }
    100%
    {
        -webkit-transform: scaleX(0.98);
        -moz-transform: scaleX(0.98);
        -o-transform: scaleX(0.98);
        transform: scaleX(0.98);
    }
    80% {
        -webkit-transform: scaleX(1.01);
        -moz-transform: scaleX(1.01);
        -o-transform: scaleX(1.01);
        transform: scaleX(1.01);
    }
    100% {
        -webkit-transform: scaleX(1);
        -moz-transform: scaleX(1);
        -o-transform: scaleX(1);
        transform: scaleX(1);
    }
}
.stretchRight {
    -moz-animation-name: stretchLeft;
    -o-animation-name: stretchLeft;
    animation-name: stretchLeft;
    -webkit-animation-name: stretchLeft;
    -moz-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;
    -moz-transform-origin: 0% 0%;
    -o-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -webkit-transform-origin: 0% 0%;
}

.stretchDown {
    -moz-animation-name: stretchDown;
    -o-animation-name: stretchDown;
    animation-name: stretchDown;
    -webkit-animation-name: stretchDown;
    -moz-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;
    -moz-transform-origin: 0% 0%;
    -o-transform-origin: 0% 0%;
    transform-origin: 0% 0%;
    -ms-transform-origin: 0% 0%;
    -webkit-transform-origin: 0% 0%;
}

.stretchUp {
    -moz-animation-name: stretchDown;
    -o-animation-name: stretchDown;
    animation-name: stretchDown;
    -webkit-animation-name: stretchDown;
    -moz-animation-timing-function: ease-out;
    -o-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-timing-function: ease-out;
    -moz-transform-origin: 0% 100%;
    -o-transform-origin: 0% 100%;
    transform-origin: 0% 100%;
    -ms-transform-origin: 0% 100%;
    -webkit-transform-origin: 0% 100%;
}
@-webkit-keyframes stretchDown
{
    0% {
        opacity: 0;
        -webkit-transform: scaleY(0.3);
        -moz-transform: scaleY(0.3);
        -o-transform: scaleY(0.3);
        transform: scaleY(0.3);
    }
    40%
    {
        opacity: 1;
        -webkit-transform: scaleY(1.02);
        -moz-transform: scaleY(1.02);
        -o-transform: scaleY(1.02);
        transform: scaleY(1.02);
    }
    60%
    {
        -webkit-transform: scaleY(0.98);
        -moz-transform: scaleY(0.98);
        -o-transform: scaleY(0.98);
        transform: scaleY(0.98);
    }
    80% {
        -webkit-transform: scaleY(1.01);
        -moz-transform: scaleY(1.01);
        -o-transform: scaleY(1.01);
        transform: scaleY(1.01);
    }
    100%
    {
        -webkit-transform: scaleY(0.98);
        -moz-transform: scaleY(0.98);
        -o-transform: scaleY(0.98);
        transform: scaleY(0.98);
    }

    80% {
        -webkit-transform: scaleY(1.01);
        -moz-transform: scaleY(1.01);
        -o-transform: scaleY(1.01);
        transform: scaleY(1.01);
    }
    100% {
        -webkit-transform: scaleY(1);
        -moz-transform: scaleY(1);
        -o-transform: scaleY(1);
        transform: scaleY(1);
    }
}
@-webkit-keyframes shakeTB {
    0%{
        -webkit-transform: translateY(-10px);
        -ms-transform: translateY(-10px);
        -o-transform: translateY(-10px);
        transform: translateY(-10px)
    }
    50%
    {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        -o-transform: translateY(0);
        transform: translateY(0)
    }

    100%{
        -webkit-transform: translateY(10px);
        -ms-transform: translateY(10px);
        -o-transform: translateY(10px);
        transform: translateY(10px)
    }
}
.shakeTB {
    -moz-animation-name: shakeTB;
    -o-animation-name: shakeTB;
    animation-name: shakeTB;
    -webkit-animation-name: shakeTB;
    -moz-animation-timing-function: linear;
    -o-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    -webkit-animation-direction: alternate;
    -moz-animation-direction: alternate;
    -o-animation-direction: alternate;
    animation-direction: alternate;
}