@charset "utf-8";
/* CSS Document */
html { font-size: 20px; min-height: 100%; }
body { font-family: PingFang Regular,Arial; font-size: 16px; margin: 0 auto; /*max-width: 750px; min-height: 100%;*/ }

* { -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; /* For some Androids */ }
* {
    margin: 0;
    padding: 0;
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre,
form, fieldset, input, textarea, p, blockquote, th, td, img, span { padding: 0; margin: 0; }

fieldset, img { border: 0; }
address, caption, cite, code, dfn, em, th, var, i { font-weight: normal; font-style: normal; }
ol, ul, li { list-style: none; }
div, dl, dt, dd, ol, ul, li { zoom: 1; }
caption, th { text-align: left; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; font-size: 100%; }
q:before, q:after { content: ''; }
abbr, acronym { border: 0; }
b, strong { font-weight: bold; }
a, img, button, input, textarea { -webkit-tap-highlight-color: rgba(255,255,255,0); }
table { border-collapse: collapse; }
input, textarea { outline: 0; resize: none; border: 0; }
button,
input,
optgroup,
textarea { -webkit-appearance: none; color: inherit; font: inherit; margin: 0; }
select { color: inherit; font: inherit; margin: 0; }
button { overflow: visible; }
button,
select { text-transform: none; }
input[type="text"] { border-radius: 0; }
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] { -webkit-appearance: button; cursor: pointer; }
button[disabled],
html input[disabled] { cursor: default; }
button::-moz-focus-inner,
input::-moz-focus-inner { border: 0; padding: 0; }

input { line-height: normal; box-sizing: border-box; }
input[type="checkbox"],
input[type="radio"] { box-sizing: border-box; padding: 0; }
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button { height: auto; }
input[type="search"] { -webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
/*label { display: inline-block; max-width: 100%; font-weight: bold; }*/

img { border: 0; vertical-align: middle;}
a { text-decoration: none; color: #666666; }
a:hover { text-decoration: none; }
.fl { float: left; }
.fr { float: right; }
.clearfix:after { content: "."; display: block; height: 0; font-size: 0; clear: both; visibility: hidden; }
.clearfix { +height:1%; }
.hide { display: none; }
.pr { position: relative; }
.pa { position: absolute; }
.vertical { display: inline-block; vertical-align: middle; }
.center { text-align: center; }
.hidden { overflow: hidden; }

.ellipsis { overflow: hidden; text-overflow: ellipsis; display: block; white-space: nowrap; }

.ellipsis_2 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.ellipsis_3 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

.ellipsis_4 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.flex { position: relative; display: -webkit-box; display: -webkit-flex; display: flex; }

.flex_center { position: relative; display: -webkit-box; display: -webkit-flex; display: flex; align-items: center; -webkit-box-align: center; -webkit-align-items: center; }

.flex_end { position: relative; display: -webkit-box; display: -webkit-flex; display: flex; align-items: flex-end; -webkit-box-align: flex-end; -webkit-align-items: flex-end; }

.flex_1 { -webkit-box-flex: 1; -webkit-flex: 1; flex: 1; min-width: 0; }





/*背景色*/


/*文字大小*/
.f0 { font-size: 0; }
.f10 { font-size: 1.0rem; }
.f11 { font-size: 1.1rem; }
.f12 { font-size: 1.2rem; }
.f13 { font-size: 1.3rem; }
.f14 { font-size: 1.4rem; }
.f15 { font-size: 1.5rem; }
.f16 { font-size: 1.6rem; }
.f17 { font-size: 1.7rem; }
.f18 { font-size: 1.8rem; }
.f19 { font-size: 1.9rem; }
.f20 { font-size: 2.0rem; }
.f21 { font-size: 2.1rem; }
.f22 { font-size: 2.2rem; }
.f23 { font-size: 2.3rem; }
.f24 { font-size: 2.4rem; }

/*宽度*/


/*颜色*/

/*margin*/

/*padding*/


/****************  特殊字体  ****************/
@font-face { font-family: 'HappyZcool'; src: url('../fonts/HappyZcool.eot') format('embedded-opentype'), url('../fonts/HappyZcool.svg') format('svg'), url('../fonts/HappyZcool.ttf') format('truetype'), url('../fonts/HappyZcool.woff') format('woff'), url('../fonts/HappyZcool.woff2') format('woff2'); font-weight: normal; font-style: normal; }
@font-face { font-family: 'zcoolwen'; src: url('../fonts/zcoolwen.eot') format('embedded-opentype'), url('../fonts/zcoolwen.svg') format('svg'), url('../fonts/zcoolwen.ttf') format('truetype'), url('../fonts/zcoolwen.woff') format('woff'),url('../fonts/zcoolwen.woff2') format('woff2'); }

@font-face { font-family: 'SourceHanSerifSC-Bold'; src: url('../fonts/SourceHanSerifSC-Bold.eot') format('embedded-opentype'), url('../fonts/SourceHanSerifSC-Bold.svg') format('svg'), url('../fonts/SourceHanSerifSC-Bold.ttf') format('truetype'), url('../fonts/SourceHanSerifSC-Bold.woff') format('woff'), url('../fonts/SourceHanSerifSC-Bold.woff2') format('woff2'); }


/**********  公用样式 *********/
.white::-webkit-input-placeholder { color: #f0e0dc; }


/*动画*/
/*-webkit-animation: ani-arrow 1.5s infinite ease-in-out;
-moz-animation: ani-arrow 1.5s infinite ease-in-out;
animation: ani-arrow 1.5s infinite ease-in-out;*/

@-webkit-keyframes ani-arrow {
    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 ani-arrow {
    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 ani-arrow {
    0%,30% { opacity: 0; transform: translate(0,10px); }

    60% { opacity: 1; transform: translate(0,0); }

    100% { opacity: 0; transform: translate(0,-8px); }
}

@-moz-keyframes ani-arrow {
    0% { -moz-transform: translate(0,0); opacity: 0; }

    30% { -moz-transform: translate(-20px,-20px); opacity: 1; }

    100% { -moz-transform: translate(-30px,-30px); opacity: 0; }
}



@-webkit-keyframes rocketArray {
    0%,30% { opacity: 0; -webkit-transform: translate(0,-8px); }

    60% { opacity: 1; -webkit-transform: translate(0,0); }

    100% { opacity: 0; -webkit-transform: translate(0,10px); }
}

@-moz-keyframes rocketArray {
    0%,30% { opacity: 0; -moz-transform: translate(0,-8px); }

    60% { opacity: 1; -moz-transform: translate(0,0); }

    100% { opacity: 0; -moz-transform: translate(0,10px); }
}

@keyframes rocketArray {
    0%,30% { opacity: 0; transform: translate(0,-8px); }

    60% { opacity: 1; transform: translate(0,0); }

    100% { opacity: 0; transform: translate(0,10px); }
}

@-moz-keyframes rocketArray {
    0% { -moz-transform: translate(-30px,-30px); opacity: 0; }

    30% { -moz-transform: translate(-20px,-20px); opacity: 1; }

    100% { -moz-transform: translate(0,0); opacity: 0; }
}



@keyframes rotate2 {
    from { transform: rotate(0deg); -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); }
    to { transform: rotate(360deg); -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); }
}

@-webkit-keyframes rotate2 {
    from { transform: rotate(0deg); -ms-transform: rotate(0deg); -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); }
    to { transform: rotate(360deg); -ms-transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); }
}

@-webkit-keyframes wobble2 {
    0% { -webkit-transform: rotate3d(0,0,1,-15deg); transform: rotate3d(0,0,1,-15deg); -webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom; }
    100% { -webkit-transform: rotate3d(0,0,1,10deg); transform: rotate3d(0,0,1,15deg); -webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom; }
}

@keyframes wobble2 {
    0% { -webkit-transform: rotate3d(0,0,1,-30deg); transform: rotate3d(0,0,1,-15deg); -webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom; }
    100% { -webkit-transform: rotate3d(0,0,1,15deg); transform: rotate3d(0,0,1,15deg); -webkit-transform-origin: center bottom; -ms-transform-origin: center bottom; transform-origin: center bottom; }
}


@-webkit-keyframes up_down2 {
    0% { transform: translateY(-10%); -webkit-transform: translateY(-10%); }
    100% { transform: translateY(10%); -webkit-transform: translateY(10%); }
}

@keyframes up_down2 {
    0% { transform: translateY(-10%); -webkit-transform: translateY(-10%); }
    100% { transform: translateY(10%); -webkit-transform: translateY(10%); }
}

@-webkit-keyframes scaleDraw {
    0% { transform: scale(0.5); -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -o-transform: scale(0.5); }
    100% { transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); }
}

@keyframes scaleDraw {
    0% { transform: scale(0.5); -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -o-transform: scale(0.5); }
    100% { transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); -o-transform: scale(1); }
}


@-webkit-keyframes leftRight {
    0% { transform: translateX(-10%); -webkit-transform: translateX(-10%); }
    100% { transform: translateX(10%); -webkit-transform: translateX(10%); }
}

@keyframes leftRight {
    0% { transform: translateX(-10%); -webkit-transform: translateX(-10%); }
    100% { transform: translateX(10%); -webkit-transform: translateX(10%); }
}