article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}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;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
.swiper-container{margin:0 auto;position:relative;overflow:hidden;z-index:1}.swiper-container-no-flexbox .swiper-slide{float:left}.swiper-container-vertical>.swiper-wrapper{-webkit-box-orient:vertical;-moz-box-orient:vertical;-ms-flex-direction:column;-webkit-flex-direction:column;flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-transition-property:-webkit-transform;-moz-transition-property:-moz-transform;-o-transition-property:-o-transform;-ms-transition-property:-ms-transform;transition-property:transform;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}.swiper-container-android .swiper-slide,.swiper-wrapper{-webkit-transform:translate3d(0px,0,0);-moz-transform:translate3d(0px,0,0);-o-transform:translate(0px,0px);-ms-transform:translate3d(0px,0,0);transform:translate3d(0px,0,0)}.swiper-container-multirow>.swiper-wrapper{-webkit-box-lines:multiple;-moz-box-lines:multiple;-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap}.swiper-container-free-mode>.swiper-wrapper{-webkit-transition-timing-function:ease-out;-moz-transition-timing-function:ease-out;-ms-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out;margin:0 auto}.swiper-slide{-webkit-flex-shrink:0;-ms-flex:0 0 auto;flex-shrink:0;width:100%;height:100%;position:relative}.swiper-container-autoheight,.swiper-container-autoheight .swiper-slide{height:auto}.swiper-container-autoheight .swiper-wrapper{-webkit-box-align:start;-ms-flex-align:start;-webkit-align-items:flex-start;align-items:flex-start;-webkit-transition-property:-webkit-transform,height;-moz-transition-property:-moz-transform;-o-transition-property:-o-transform;-ms-transition-property:-ms-transform;transition-property:transform,height}.swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-wp8-horizontal{-ms-touch-action:pan-y;touch-action:pan-y}.swiper-wp8-vertical{-ms-touch-action:pan-x;touch-action:pan-x}.swiper-button-prev,.swiper-button-next{position:absolute;top:50%;z-index:10;cursor:pointer;-moz-background-size:27px 44px;-webkit-background-size:27px 44px;background-size:27px 44px;background-position:center;background-repeat:no-repeat}.swiper-button-prev.swiper-button-disabled,.swiper-button-next.swiper-button-disabled{opacity:0;cursor:auto;pointer-events:none}.swiper-pagination{position:absolute;text-align:center;-webkit-transition:300ms;-moz-transition:300ms;-o-transition:300ms;transition:300ms;-webkit-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-fraction,.swiper-pagination-custom,.swiper-container-horizontal>.swiper-pagination-bullets{bottom:10px;left:0;width:100%}.swiper-pagination-bullet{width:8px;height:8px;display:inline-block;border-radius:100%;background:#000;opacity:.2}button.swiper-pagination-bullet{border:0;margin:0;padding:0;box-shadow:none;-moz-appearance:none;-ms-appearance:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-white .swiper-pagination-bullet{background:#fff}.swiper-pagination-bullet-active{opacity:1;background:#007aff}.swiper-pagination-white .swiper-pagination-bullet-active{background:#fff}.swiper-pagination-black .swiper-pagination-bullet-active{background:#000}.swiper-container-vertical>.swiper-pagination-bullets{right:10px;top:50%;-webkit-transform:translate3d(0px,-50%,0);-moz-transform:translate3d(0px,-50%,0);-o-transform:translate(0px,-50%);-ms-transform:translate3d(0px,-50%,0);transform:translate3d(0px,-50%,0)}.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:5px 0;display:block}.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 5px}.swiper-pagination-progress{background:rgba(0,0,0,0.25);position:absolute}.swiper-pagination-progress .swiper-pagination-progressbar{background:#007aff;position:absolute;left:0;top:0;width:100%;height:100%;-webkit-transform:scale(0);-ms-transform:scale(0);-o-transform:scale(0);transform:scale(0);-webkit-transform-origin:left top;-moz-transform-origin:left top;-ms-transform-origin:left top;-o-transform-origin:left top;transform-origin:left top}.swiper-container-rtl .swiper-pagination-progress .swiper-pagination-progressbar{-webkit-transform-origin:right top;-moz-transform-origin:right top;-ms-transform-origin:right top;-o-transform-origin:right top;transform-origin:right top}.swiper-container-horizontal>.swiper-pagination-progress{width:100%;height:4px;left:0;top:0}.swiper-container-vertical>.swiper-pagination-progress{width:4px;height:100%;left:0;top:0}.swiper-pagination-progress.swiper-pagination-white{background:rgba(255,255,255,0.5)}.swiper-pagination-progress.swiper-pagination-white .swiper-pagination-progressbar{background:#fff}.swiper-pagination-progress.swiper-pagination-black .swiper-pagination-progressbar{background:#000}.swiper-container-3d{-webkit-perspective:1200px;-moz-perspective:1200px;-o-perspective:1200px;perspective:1200px}.swiper-container-3d .swiper-wrapper,.swiper-container-3d .swiper-slide,.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-slide-shadow-bottom,.swiper-container-3d .swiper-cube-shadow{-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d}.swiper-container-3d .swiper-slide-shadow-left,.swiper-container-3d .swiper-slide-shadow-right,.swiper-container-3d .swiper-slide-shadow-top,.swiper-container-3d .swiper-slide-shadow-bottom{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-container-3d .swiper-slide-shadow-left{background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,0.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(right,rgba(0,0,0,0.5),rgba(0,0,0,0));background-image:-moz-linear-gradient(right,rgba(0,0,0,0.5),rgba(0,0,0,0));background-image:-o-linear-gradient(right,rgba(0,0,0,0.5),rgba(0,0,0,0));background-image:linear-gradient(to left,rgba(0,0,0,0.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-right{background-image:-webkit-gradient(linear,right top,left top,from(rgba(0,0,0,0.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(left,rgba(0,0,0,0.5),rgba(0,0,0,0));background-image:-moz-linear-gradient(left,rgba(0,0,0,0.5),rgba(0,0,0,0));background-image:-o-linear-gradient(left,rgba(0,0,0,0.5),rgba(0,0,0,0));background-image:linear-gradient(to right,rgba(0,0,0,0.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-top{background-image:-webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(bottom,rgba(0,0,0,0.5),rgba(0,0,0,0));background-image:-moz-linear-gradient(bottom,rgba(0,0,0,0.5),rgba(0,0,0,0));background-image:-o-linear-gradient(bottom,rgba(0,0,0,0.5),rgba(0,0,0,0));background-image:linear-gradient(to top,rgba(0,0,0,0.5),rgba(0,0,0,0))}.swiper-container-3d .swiper-slide-shadow-bottom{background-image:-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,0.5)),to(rgba(0,0,0,0)));background-image:-webkit-linear-gradient(top,rgba(0,0,0,0.5),rgba(0,0,0,0));background-image:-moz-linear-gradient(top,rgba(0,0,0,0.5),rgba(0,0,0,0));background-image:-o-linear-gradient(top,rgba(0,0,0,0.5),rgba(0,0,0,0));background-image:linear-gradient(to bottom,rgba(0,0,0,0.5),rgba(0,0,0,0))}.swiper-container-coverflow .swiper-wrapper,.swiper-container-flip .swiper-wrapper{-ms-perspective:1200px}.swiper-container-cube,.swiper-container-flip{overflow:visible}.swiper-container-cube .swiper-slide,.swiper-container-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-container-cube .swiper-slide .swiper-slide,.swiper-container-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-cube .swiper-slide-active,.swiper-container-flip .swiper-slide-active,.swiper-container-cube .swiper-slide-active .swiper-slide-active,.swiper-container-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-container-cube .swiper-slide-shadow-top,.swiper-container-flip .swiper-slide-shadow-top,.swiper-container-cube .swiper-slide-shadow-bottom,.swiper-container-flip .swiper-slide-shadow-bottom,.swiper-container-cube .swiper-slide-shadow-left,.swiper-container-flip .swiper-slide-shadow-left,.swiper-container-cube .swiper-slide-shadow-right,.swiper-container-flip .swiper-slide-shadow-right{z-index:0;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden}.swiper-container-cube .swiper-slide{visibility:hidden;-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;width:100%;height:100%}.swiper-container-cube.swiper-container-rtl .swiper-slide{-webkit-transform-origin:100% 0;-moz-transform-origin:100% 0;-ms-transform-origin:100% 0;transform-origin:100% 0}.swiper-container-cube .swiper-slide-active,.swiper-container-cube .swiper-slide-next,.swiper-container-cube .swiper-slide-prev,.swiper-container-cube .swiper-slide-next+.swiper-slide{pointer-events:auto;visibility:visible}.swiper-container-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0;width:100%;height:100%;background:#000;opacity:.6;-webkit-filter:blur(50px);filter:blur(50px);z-index:0}.swiper-container-fade.swiper-container-free-mode .swiper-slide{-webkit-transition-timing-function:ease-out;-moz-transition-timing-function:ease-out;-ms-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out}.swiper-container-fade .swiper-slide{pointer-events:none;-webkit-transition-property:opacity;-moz-transition-property:opacity;-o-transition-property:opacity;transition-property:opacity}.swiper-container-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-container-fade .swiper-slide-active,.swiper-container-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-scrollbar{border-radius:10px;position:relative;-ms-touch-action:none;background:rgba(0,0,0,0.1)}.swiper-container-horizontal>.swiper-scrollbar{position:absolute;left:1%;bottom:3px;z-index:50;height:5px;width:98%}.swiper-container-vertical>.swiper-scrollbar{position:absolute;right:3px;top:1%;z-index:50;width:5px;height:98%}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:rgba(0,0,0,0.5);border-radius:10px;left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;-webkit-transform-origin:50%;-moz-transform-origin:50%;transform-origin:50%;-webkit-animation:swiper-preloader-spin 1s steps(12,end) infinite;-moz-animation:swiper-preloader-spin 1s steps(12,end) infinite;animation:swiper-preloader-spin 1s steps(12,end) infinite}.swiper-lazy-preloader:after{display:block;content:"";width:100%;height:100%;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");background-position:50%;-webkit-background-size:100%;background-size:100%;background-repeat:no-repeat}.swiper-lazy-preloader-white:after{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E")}@-webkit-keyframes swiper-preloader-spin{100%{-webkit-transform:rotate(360deg)}}@keyframes swiper-preloader-spin{100%{transform:rotate(360deg)}}

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, 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, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
	width: 100vw;
	height: 100vh;
	position: absolute;
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
a{
    cursor: pointer;
    text-decoration: none;  
    }
input,
button,
select,
textarea{
    outline:none
}
 *:focus { outline: none; }

/*
 * === General Demo Styles ===
 */
html {
    overflow: hidden;
}

body {
	font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu;
	color: #fff;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
    overflow: hidden;
}

a {
	text-decoration: none;
	color: #8e8f9a;
	outline: none;
}

a:hover,
a:focus {
	color: #2d2e36;
	outline: none;
}

audio {
	display: none;
}

.outer-container {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.loading {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 100;
    overflow: hidden;
}

.loadAnimate {
    width: 224px;
    height: 256px;
    background-image: url(../img/animate/loading.png);
    -webkit-animation: loading .5s steps(10) infinite;
    animation: loading .5s steps(10) infinite;
    position: absolute;
    top: 45%;
    left: 50%;
    margin-left: -112px;
    margin-top: -128px;
}

@keyframes loading {
    100% { background-position: 0px -2560px;}
}

@-webkit-keyframes loading {
    100% { background-position: 0px -2560px;}
}

.loadAnimate2 {
    width: 224px;
    height: 263px;
    background-image: url(../img/animate/loading2.png);
    -webkit-animation: loading2 .5s steps(10) infinite;
    animation: loading2 .5s steps(10) infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -112px;
    margin-top: -131px;
}

@keyframes loading2 {
    100% { background-position: 0px -2630px;}
}

@-webkit-keyframes loading2 {
    100% { background-position: 0px -2630px;}
}

.loadAnimate3 {
    width: 224px;
    height: 263px;
    background-image: url(../img/animate/loading3.png);
    -webkit-animation: loading2 .5s steps(10) infinite;
    animation: loading2 .5s steps(10) infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -112px;
    margin-top: -131px;
}

@keyframes loading3 {
    100% { background-position: 0px -2630px;}
}

@-webkit-keyframes loading3 {
    100% { background-position: 0px -2630px;}
}

.loadAnimate4 {
    width: 224px;
    height: 256px;
    background-image: url(../img/animate/loading4.png);
    -webkit-animation: loading4 .5s steps(10) infinite;
    animation: loading4 .5s steps(10) infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -112px;
    margin-top: -128px;
}

@keyframes loading4 {
    100% { background-position: 0px -2560px;}
}

@-webkit-keyframes loading4 {
    100% { background-position: 0px -2560px;}
}

.loadAnimate5 {
    width: 224px;
    height: 263px;
    background-image: url(../img/animate/loading5.png);
    -webkit-animation: loading5 .5s steps(10) infinite;
    animation: loading5 .5s steps(10) infinite;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -112px;
    margin-top: -128px;
}

@keyframes loading5 {
    100% { background-position: 0px -2630px;}
}

@-webkit-keyframes loading5 {
    100% { background-position: 0px -2630px;}
}

#header {
    width: 100%;
    height: 10vh;
    position: absolute;
    z-index: 5;
    left: 0;
    right: 0;
    margin: 0 auto;
    -webkit-transform: translateY(-100%) scale(0.8);
    -ms-transform: translateY(-100%) scale(0.8);
    transform: translateY(-100%) scale(0.8);
    opacity: 0;
}

.uniosModel #header {
    -webkit-transform: translateY(0%) scale(1);
    -ms-transform: translateY(0%) scale(1);
    transform: translateY(0%) scale(1);
    opacity: 1;
}

.header-bg {
    width: 100%;
    position: absolute;
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
    opacity: 0;
}

.header-bg:first-child {
    -webkit-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
    opacity: 1;
}

#content {
    width: 640px;
	height: 100vh;
    position: relative;
    overflow: hidden;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
}

.uniosModel #content {
	opacity: 0;
}

#content .container {
    width: 100%;
    height: 100%;
    position: relative;
}

#control,
#share-bottom {
    width: 100%;
    height: auto;
    position: absolute;
    margin: 0 auto;
    z-index: 10;
    left: 0;
    right: 0;
    bottom: 0px;
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
    opacity: 0;
}

.close #control {
	height: 15%;
}

.uniosModel #control {
    -webkit-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
    opacity: 1;
}

#share-bottom {

}

#control.index-control {
	height: 11%;
} 

#control .control-bg,
#control .control-bg img,
#share-bottom .share-bottom-bg {
    width: 100%;
}

.share #control {
    display: none;
}

@-webkit-keyframes flash {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes flash {
  0% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }

  50% {
    -webkit-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
  }

  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

.flash {
  -webkit-animation-name: flash;
  animation-name: flash;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.teach-mask {
    width: 100%;
    height: 100%;
    position: absolute;
    background-color: rgba(0,0,0,0.7);
    z-index: 9;
    display: none;
}

.teach-img {
   width: 271px;
   height: 180px;
   position: absolute;
   top: 40%;
   left: 50%;
   margin: -80px 0 0 -135.5px; 
}

.teach-hand {
    width: 103px;
    height: 95px;
    position: absolute;
    z-index: 10;
    -webkit-transform: scale(0.5);
    -ms-transform: scale(0.5);
    transform: scale(0.5);
    left: 0%;
    top: -7%;
}

.close .teach-img {
	top: 55%;
}

.start-btn {
	width: 640px;
    position: absolute;
    top: 67%;
    margin: 0 auto;
    left: 0;
    right: 0;
}

.start-btn img {
	width: 100%
}

.desktop .teach-hand {
    width: 103px;
    height: 95px;
    position: absolute;
    z-index: 10;
    -webkit-transform: scale(0.8);
    -ms-transform: scale(0.8);
    transform: scale(0.8);
    left: 43%;
    top: 7%;
}

.into-animate {
     -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;   
}

.alpha {
	opacity: 0.8;
}

/*----index----*/
.prev,
.next {
    width: 40px;
    height: 60px;
    position: absolute;
    bottom: 146px;
    top: 50%;
    margin-top: -30px;
    cursor: pointer;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    opacity: 0.8;
}

.next {
    right: 5vw;
}

.prev {
    left: 5vw;
}

.desktop .next {
    right: 3vw;
}

.desktop .prev {
    left: 3vw;
}

#prev-date,
#next-date {
    width: 60%;
    height: 100%;
    position: absolute;
    top: 5%;
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: center center;
}

#prev-date {
    left: 100%;
}

#next-date {
    right: 100%;
}

.date1 {
    background-image: url(../img/date_0806.png);
}

.date2 {
    background-image: url(../img/date_0807.png);
}

.date3 {
    background-image: url(../img/date_0808.png);
}

.date4 {
    background-image: url(../img/date_0809.png);
}

.date5 {
    background-image: url(../img/date_0810.png);
}

.date6 {
    background-image: url(../img/date_0811.png);
}

.date7 {
    background-image: url(../img/date_0812.png);
}

.date8 {
    background-image: url(../img/date_0813.png);
}

.date9 {
    background-image: url(../img/date_0814.png);
}

.date10 {
    background-image: url(../img/date_0815.png);
}

.date11 {
    background-image: url(../img/date_0816.png);
}

.date12 {
    background-image: url(../img/date_0817.png);
}

.date13 {
    background-image: url(../img/date_0818.png);
}

.date14 {
    background-image: url(../img/date_0819.png);
}

.date15 {
    background-image: url(../img/date_0820.png);
}

.date16 {
    background-image: url(../img/date_0821.png);
}

.date17 {
    background-image: url(../img/date_0822.png);
}

.date18 {
    background-image: url(../img/date_0822.png);
}


i.arrow {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    backface-visibility: hidden;
}
i.arrow:before,
i.arrow:after {
    content: "";
    display: block;
    position: absolute;
    border-radius: 100px;
    background: #fff;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
i.arrow:before {
    -webkit-animation: transform: rotate(-45deg);
    -moz-animation: transform: rotate(-45deg);
    transform: rotate(-45deg);
    background: linear-gradient(-45deg,rgba(139,238,234,1) 0%, rgba(238,238,146,1) 100%);
    background: -moz-linear-gradient(-45deg,rgba(139,238,234,1) 0%, rgba(238,238,146,1) 100%);
    background: -webkit-linear-gradient(-45deg,rgba(139,238,234,1) 0%, rgba(238,238,146,1) 100%);
}
i.arrow:after {
    -webkit-animation: transform: rotate(45deg);
    -moz-animation: transform: rotate(45deg);
    transform: rotate(45deg);
    background: linear-gradient(-45deg,rgba(139,238,234,1) 0%, rgba(238,238,146,1) 100%);
    background: -moz-linear-gradient(-45deg,rgba(139,238,234,1) 0%, rgba(238,238,146,1) 100%);
    background: -webkit-linear-gradient(-45deg,rgba(139,238,234,1) 0%, rgba(238,238,146,1) 100%);
}
i.arrow-left,
i.arrow-right {
    width: 40px;
    height: 60px;
}
i.arrow-left:before,
i.arrow-right:before,
i.arrow-left:after,
i.arrow-right:after {
    width: 42px;
    height: 12px;
    top: 50%;
    left: 0;
}
i.arrow-left:after,
i.arrow-right:before {
    margin-top: -7px;
}
i.arrow-left:before,
i.arrow-left:after {
    -webkit-transform-origin: 0% 50%;
    -moz-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
}
i.arrow-right:before,
i.arrow-right:after {
    -webkit-transform-origin: 100% 50%;
    -moz-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
}
i.arrow:hover:before {
    -webkit-animation: transform: rotate(-45deg);
    -moz-animation: transform: rotate(-45deg);
    transform: rotate(-45deg);
}
i.arrow:hover:after {
    -webkit-animation: transform: rotate(45deg);
    -moz-animation: transform: rotate(45deg);
    transform: rotate(45deg);
}
i.arrow:active:before {
    -webkit-animation: transform: rotate(-30deg);
    -moz-animation: transform: rotate(-30deg);
    transform: rotate(-30deg);
}
i.arrow:active:after {
    -webkit-animation: transform: rotate(30deg);
    -moz-animation: transform: rotate(30deg);
    transform: rotate(30deg);
}

.swiper-container {
    width: 640px;
    height: 100%;
    position: relative;
    opacity: 0;
}

.swiper-slide {
  -webkit-flex-shrink: 0;
  -ms-flex: 0 0 auto;
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
}

/*----main----*/
.box,
.teach-btn {
	background-color: #91e600;
	text-align: center;
	font-family: Asap, Avenir, Arial, sans-serif;
	width: 11%;
	height: 37.4%;
	color: black;
	position: absolute;
    top: 52.2%;
    border-radius: 34px;
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center center;
    -moz-box-shadow:    inset 0 0 15px rgba(256,256,256,0.6);
    -webkit-box-shadow: inset 0 0 15px rgba(256,256,256,0.6);
    box-shadow:         inset 0 0 15px rgba(256,256,256,0.6);
}

.teach-btn {
    display: none;
    z-index: 10;
}

.dragger1,
.teach-btn {
  	left: 30.85%;
    background-color: rgba(242,204,74,0.8);
}

.dragger2 {
  	left: 44.45%;
    background-color: rgba(88,218,152,0.8);
}

.dragger3 {
  	left: 58.04%;
    background-color: rgba(118,177,237,0.8);
}

.close .teach-btn,
.close .box {
    left: 44.45%;
    top: 5%;
    height: 80%;
	background-color: rgba(88,218,152,0.8);
}

.draggable_rain {
    background-image: url(../img/draggable/rain.png);
}

.draggable_rain2 {
    background-image: url(../img/draggable/rain2.png);
}

.draggable_rain2_over {
    background-image: url(../img/draggable/rain2.png);
}

.draggable_rain_over {
    background-image: url(../img/draggable/rain_over.png);
}

.draggable_thunder {
    background-image: url(../img/draggable/thunder.png);
}

.draggable_thunder_over {
    background-image: url(../img/draggable/thunder_over.png);
}

.draggable_wind {
    background-image: url(../img/draggable/wind.png);
}

.draggable_wind_over {
    background-image: url(../img/draggable/wind_over.png);
}

.draggable_wind_over2 {
    background-image: url(../img/draggable/wind_over2.png);
}

.draggable_sun {
    background-image: url(../img/draggable/sun.png);
}

.draggable_sun_over2 {
    background-image: url(../img/draggable/sun_over2.png);
}

.draggable_humidity {
	background-image: url(../img/draggable/humidity.png);
}

.draggable_humidity_over {
	background-image: url(../img/draggable/humidity_over.png);
}

.draggable_humidity_over2 {
	background-image: url(../img/draggable/humidity_over2.png);
}

.draggable_press {
	background-image: url(../img/draggable/press.png);
}

.draggable_press_over2 {
	background-image: url(../img/draggable/press_over2.png);
}

.draggable_cloudy {
	background-image: url(../img/draggable/cloudy.png);
}

.draggable_cloudy_over {
	background-image: url(../img/draggable/cloudy_over.png);
}

.draggable_click {
	background-image: url(../img/draggable/click.png);
}

.target-groups {
    width: 88.8%;
    height: 37.7%;
    position: absolute;
    padding-top: 5.7%;
    padding-left: 5.6%;
    top: 0;
}

.target {
    text-align: center;
    font-family: Asap, Avenir, Arial, sans-serif;
    width: 12.5%;
    height: 100%;
    line-height: 70px;
    color: black;
    float: left;
    margin: 0;
    padding: 0;
    border-radius: 36px;
    position: relative;
    background-color: rgba(256,256,256,0.2);
    -moz-box-shadow:    inset 0 0 20px rgba(256,256,256,0.6);
    -webkit-box-shadow: inset 0 0 20px rgba(256,256,256,0.6);
    box-shadow:         inset 0 0 20px rgba(256,256,256,0.6);
}

.target:after {
    content: '';
    width: 0.5px;
    height: 30%;
    border-right: 1px #fff solid;
    position: absolute;
    right: -0.5px;
    top: 35%;
    opacity: 0.5;
    z-index: 5;
}

.target:before {
    content: '';
    width: 0.5px;
    height: 30%;
    border-right: 1px #313131 solid;
    position: absolute;
    right: 0.5px;
    top: 35%;
    opacity: 0.2;
    z-index: 5;
}

.last-target:after,
.last-target:before {
    display: none;
}

#control .fail {
    opacity: 0.7;
}

#control .btn {
    font-size: 1em;
    width: 20vw;
    height: 20vw;
    position: absolute;
    bottom: 0px;
    background: linear-gradient(left,rgba(92,211,204,1) 0%, rgba(163,213,167,1) 40%, rgba(235,232,128,0.8) 100%);
    background: -moz-linear-gradient(left,rgba(92,211,204,1) 0%, rgba(163,213,167,1) 40%, rgba(235,232,128,0.8) 100%);
    background: -webkit-linear-gradient(left,rgba(92,211,204,1) 0%, rgba(163,213,167,1) 40%, rgba(235,232,128,0.8) 100%);
    -moz-box-shadow:    inset 0 0 20px rgba(256,256,256,0.7);
    -webkit-box-shadow: inset 0 0 20px rgba(256,256,256,0.7);
    box-shadow:         inset 0 0 20px rgba(256,256,256,0.7);
    border-radius: 20px;
    text-align: center;
    letter-spacing: 2px;
    bottom: 5%;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

.close #control .btn {
    bottom: 16%;
}

.desktop #control .btn {
    width: 22%;
    height: 38%;
    border-radius: 36px;
    cursor: pointer;
}

.desktop #control .close-style-btn {
    width: 22%;
    height: 80%;
    border-radius: 36px;
    cursor: pointer;
}

.play-btn {
    cursor: pointer;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.play-btn-bg {
    width: 100%;
    position: absolute;
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
    opacity: 0;
    position: absolute;
}

.play-btn-bg:first-child {
    -webkit-transform: translateY(0%);
    -ms-transform: translateY(0%);
    transform: translateY(0%);
    opacity: 1;
}

#control .btn:active,
.play-btn:active {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
}

#control .btn img {
    width: 100%;
    position: relative;
    opacity: 1;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

#control .fail img {
    opacity: 0.7;
}

#control .fail {
    opacity: 0.7;
    background: rgba(256,256,256,0.2) !important;
}

#control .next-btn {
    right: 3%;
    background: linear-gradient(left,rgba(235,232,128,0.8) 0%, rgba(163,213,167,1) 40%, rgba(92,211,204,1) 100%);
    background: -moz-linear-gradient(left,rgba(235,232,128,0.8) 0%, rgba(163,213,167,1) 40%, rgba(92,211,204,1) 100%);
    background: -webkit-linear-gradient(left,rgba(235,232,128,0.8) 0%, rgba(163,213,167,1) 40%, rgba(92,211,204,1) 100%);
}

#control .rest-btn {
    left: 3%;
}

#content-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#content-bg {
    width: 100%;
    height: 120%;
    position: absolute;
    top: 0;
    left: 0;
}

.day1-bg {
    background: linear-gradient(top,rgba(22,112,222,1) 0%,rgba(80,218,221,1) 40%, rgba(200,242,179,1) 100%);
    background: -moz-linear-gradient(top,rgba(22,112,222,1) 0%,rgba(80,218,221,1) 40%, rgba(200,242,179,1) 100%);
    background: -webkit-linear-gradient(top,rgba(22,112,222,1) 0%,rgba(80,218,221,1) 40%, rgba(200,242,179,1) 100%);
}

.day2-bg {
    background:linear-gradient(top,#257fca,#3ac6be);
    background:-moz-linear-gradient(top,#257fca,#3ac6be);
    background:-webkit-linear-gradient(top,#257fca,#3ac6be);
}

.day3-bg {
    background:linear-gradient(top,#279cbf,#73e7c0);
    background:-moz-linear-gradient(top,#279cbf,#73e7c0);
    background:-webkit-linear-gradient(top,#279cbf,#73e7c0);
}

.day4-bg {
    background:linear-gradient(top,#00afba,#89cd92);
    background:-moz-linear-gradient(top,#00afba,#89cd92);
    background:-webkit-linear-gradient(top,#00afba,#89cd92);
}

.day5-bg {
    background:linear-gradient(top,#775fdb,#5cd8e1);
    background:-moz-linear-gradient(top,#775fdb,#5cd8e1);
    background:-webkit-linear-gradient(top,#775fdb,#5cd8e1);
}

.day6-bg {
    background: linear-gradient(top,rgba(226,64,102,1) 0%,rgba(229,110,80,1) 30%, rgba(229,195,105,1) 100%);
    background: -moz-linear-gradient(top,rgba(226,64,102,1) 0%,rgba(229,110,80,1) 30%, rgba(229,195,105,11) 100%);
    background: -webkit-linear-gradient(top,rgba(226,64,102,1) 0%,rgba(229,110,80,1) 30%, rgba(229,195,105,1) 100%);
}

.day7-bg {
    background: linear-gradient(top,#0f9762 0%,#36b870 40%,#d1ca6c 100%);
    background: -moz-linear-gradient(top,#0f9762 0%,#36b870 40%,#d1ca6c 100%);
    background: -webkit-linear-gradient(top,#0f9762 0%,#36b870 40%,#d1ca6c 100%);
}

.day8-bg {
    background: linear-gradient(top,#1d384c 0%,#1d5c5d 100%);
    background: -moz-linear-gradient(top,#1d384c 0%,#1d5c5d 100%);
    background: -webkit-linear-gradient(top,#1d384c 0%,#1d5c5d 100%);
}

.day9-bg {
    background: linear-gradient(top,#57305f 0%,#cc5e6e 100%);
    background: -moz-linear-gradient(top,#57305f 0%,#cc5e6e 100%);
    background: -webkit-linear-gradient(top,#57305f 0%,#cc5e6e 100%);
}

.day10-bg {
    background: linear-gradient(top,#2719b4 0%,#299ac0 100%);
    background: -moz-linear-gradient(top,#2719b4 0%,#299ac0 100%);
    background: -webkit-linear-gradient(top,#2719b4 0%,#299ac0 100%);
}

.day11-bg {
    background: linear-gradient(top,#a87c36 0%,#c4a466 100%);
    background: -moz-linear-gradient(top,#a87c36 0%,#c4a466 100%);
    background: -webkit-linear-gradient(top,#a87c36 0%,#c4a466 100%);
}

.day12-bg {
    background: linear-gradient(top,#134ec2 0%,#afeeff 80%);
    background: -moz-linear-gradient(top,#134ec2 0%,#afeeff 80%);
    background: -webkit-linear-gradient(top,#134ec2 0%,#afeeff 80%);
}

.day13-bg {
    background: linear-gradient(top,#da5d2f 0%,#e3a167 80%);
    background: -moz-linear-gradient(top,#da5d2f 0%,#e3a167 80%);
    background: -webkit-linear-gradient(top,#da5d2f 0%,#e3a167 80%);
}

.day14-bg {
    background: linear-gradient(top,#e84570 0%,#efb1c4 80%);
    background: -moz-linear-gradient(top,#e84570 0%,#efb1c4 80%);
    background: -webkit-linear-gradient(top,#e84570 0%,#efb1c4 80%);
}

.day15-bg {
    background: linear-gradient(top,#686868 0%,#b4b4b4 90%);
    background: -moz-linear-gradient(top,#686868 0%,#b4b4b4 90%);
    background: -webkit-linear-gradient(top,#686868 0%,#b4b4b4 90%);
}

.day16-bg {
    background: linear-gradient(top,#e84a4b 0%,#eed872 80%);
    background: -moz-linear-gradient(top,#e84a4b 0%,#eed872 80%);
    background: -webkit-linear-gradient(top,#e84a4b 0%,#eed872 80%);
}

.day17-bg {
    background: linear-gradient(top,#341839 0%,#a3a3a3 90%);
    background: -moz-linear-gradient(top,#341839 0%,#a3a3a3 90%);
    background: -webkit-linear-gradient(top,#341839 0%,#a3a3a3 90%);
}

.day18-bg {
    background: linear-gradient(top,#101846 0%,#363f86 90%);
    background: -moz-linear-gradient(top,#101846 0%,#363f86 90%);
    background: -webkit-linear-gradient(top,#101846 0%,#363f86 90%);
}

.error-bg {
    background: linear-gradient(top,#b7340b 0%,#e16724 90%);
    background: -moz-linear-gradient(top,#b7340b 0%,#e16724 90%);
    background: -webkit-linear-gradient(top,#b7340b 0%,#e16724 90%);
}

.bg1 {
    background:linear-gradient(top,#de8339,#edca51);
    background:-moz-linear-gradient(top,#de8339,#edca51);
    background:-webkit-linear-gradient(top,#de8339,#edca51);
}

.bg2 {
    background:linear-gradient(top,#379188,#6acd83);
    background:-moz-linear-gradient(top,#379188,#6acd83);
    background:-webkit-linear-gradient(top,#379188,#6acd83);
}

.bg3 {
    background:linear-gradient(top,#5163a2,#55a7b0);
    background:-moz-linear-gradient(top,#5163a2,#55a7b0);
    background:-webkit-linear-gradient(top,#5163a2,#55a7b0);
}

.day0806-bg1 {
    background:linear-gradient(top,#5c54a7,#0a9c53);
    background:-moz-linear-gradient(top,#5c54a7,#0a9c53);
    background:-webkit-linear-gradient(top,#5c54a7,#0a9c53);
}

.day0806-bg2 {
    background:linear-gradient(top,#f55440,#9f8cff);
    background:-moz-linear-gradient(top,#f55440,#9f8cff);
    background:-webkit-linear-gradient(top,#f55440,#9f8cff);
}

.day0806-bg3 {
    background:linear-gradient(top,#3c3c3c,#a3a3a3);
    background:-moz-linear-gradient(top,#3c3c3c,#a3a3a3);
    background:-webkit-linear-gradient(top,#3c3c3c,#a3a3a3);
}

.bg-mask {
    width: 100vw;
    height: 100vh;
    position: absolute;
    background: url(../img/mask.png) center center;
    background-repeat: repeat;
}

.star-bg {
    width: 100vw;
    height: 100vh;
    position: absolute;
    background: url(../img/close/star_bg.png);
    background-size: 100%; 
}

.guide {
	width: 6px;
	height: 42%;
	background: #ff376b; 
	position: absolute;
	top: 40%;
	z-index: 10000;
    border-radius: 20px;
}

#window {
    height: 60%;
    width: 100%;
    position: relative;
    opacity: 0;
    margin: 10vh auto 0 auto;
    z-index: 2;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

#window img {
    width: 100%;
    position: absolute;
    display: none;
}

#window .window-slogan {
    top: 10.4%;
}

#window .window-slogan2 {
    top: 24%;
}

.close #window {
	height: 70%;
}

.shareModel #window,
.share #window,
.index #window {
    height: 100%;
    width: 100%;
    position: relative;
    opacity: 0;
    margin: 0 auto;
}

#window .prev,
#window .next {
	top: 42%;
    display: none;
}

.shareModel #window img,
.share #window img,
.shareModel #window .prev,
.share #window .next {
    display: block;
}

.share #window .prev,
.shareModel #window .next {
    display: block;
}

.climate {
    width: 640px;
    height: 1029px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -320px;
    margin-top: -480px;
    background-position: 0px 0px;
    z-index: 2;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.close .climate {
	display: none;
}

.climateSun {
    background-image: url(../img/animate/climate_sun.png);
    -webkit-animation: climateSun 1s steps(15) infinite;
    animation: climateSun 1s steps(15) infinite;
}

.climateSun2 {
    background-image: url(../img/animate/climate_sun2.png);
    -webkit-animation: climateSun 1s steps(15) infinite;
    animation: climateSun 1s steps(15) infinite;
}

.climateCloudy {
    background-image: url(../img/animate/climate_cloudy.png);
    -webkit-animation: climateSun 1s steps(15) infinite;
    animation: climateSun 1s steps(15) infinite;
}

.climateRain {
    background-image: url(../img/animate/climate_rain.png);
    -webkit-animation: climateSun 1s steps(15) infinite;
    animation: climateSun 1s steps(15) infinite;
}

.climateMist {
    background-image: url(../img/animate/climate_mist.png);
    -webkit-animation: climateSun 1s steps(15) infinite;
    animation: climateSun 1s steps(15) infinite;
}

.climateThunder {
    background-image: url(../img/animate/climate_thunder.png);
    -webkit-animation: climateSun 1s steps(15) infinite;
    animation: climateSun 1s steps(15) infinite;
}

.character {
    width: 640px;
    height: 1029px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -320px;
    margin-top: -480px;
    background-position: 0px 0px;
    z-index: 2;
    -webkit-animation: characterAnimate 1s steps(15) infinite;
    animation: characterAnimate 1s steps(15) infinite;
}

.close .character {
	opacity: 0;
}

.shareModel .character,
.share .character,
.share .climate,
.shareModel .climate {
	display: block !important;
}

.share .close-num,
.shareModel .close-num {
	top: 23.5vh;
}

.share .close-num {
	display: none;
}

.share .game-group,
.shareModel .game-group {
	display: none;
}

.character0806 {
    background-image: url(../img/animate/0806_main_normal.png);
}

.character0807 {
    background-image: url(../img/animate/0807_main_normal.png);
    -webkit-animation: characterAnimate30 2s steps(30) infinite;
    animation: characterAnimate30 2s steps(30) infinite;
    margin-top: -460px;
}

.character0808 {
    background-image: url(../img/animate/0808_main_normal.png);
    margin-top: -470px;
}

.character0809 {
    background-image: url(../img/animate/0809_main_normal.png);
    margin-top: -455px;
}

.character0810 {
    background-image: url(../img/animate/0810_main_normal.png);
    margin-top: -465px;
}

.character0811 {
    background-image: url(../img/animate/0811_main_normal.png);
    margin-top: -450px;
}

.character0812 {
    background-image: url(../img/animate/0812_main_normal.png);
    margin-top: -455px;
}

.character0813 {
    background-image: url(../img/animate/0813_main_normal.png);
    margin-top: -455px;
}

.character0814 {
    background-image: url(../img/animate/0814_main_normal.png);
    margin-top: -455px;
}

.character0815 {
    background-image: url(../img/animate/0815_main_normal.png);
    margin-top: -460px;
}

.character0816 {
    background-image: url(../img/animate/0816_main_normal.png);
    margin-top: -460px;
}

.character0817 {
    background-image: url(../img/animate/0817_main_normal.png);
    margin-top: -460px;
}

.character0818 {
    background-image: url(../img/animate/0818_main_normal.png);
    margin-top: -460px;
}

.character0819 {
    background-image: url(../img/animate/0819_main_normal.png);
    margin-top: -460px;
}

.character0820 {
    background-image: url(../img/animate/0820_main_normal.png);
    margin-top: -460px;
}

.character0821 {
    background-image: url(../img/animate/0821_main_normal.png);
    margin-top: -460px;
}

.character0822 {
    background-image: url(../img/animate/0822_main_normal.png);
    margin-top: -460px;
}

.character0823 {
    background-image: url(../img/animate/0823_main_normal.png);
    margin-top: -520px;
}

.character-info {
    width: 100%;
    margin-top: 18%;
}

.character-info img {
    width: 100%;
}

.character-animate {
    width: 640px;
    height: 1029px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -320px;
    margin-top: -520px;
    background-position: 0px 0px;
    z-index: 2;
    -webkit-animation: characterAnimate 1s steps(15) infinite;
    animation: characterAnimate 1s steps(15) infinite;
}

.character-animate0806 {
    background-image: url(../img/animate/0806_index_img.png);
}

.character-animate0807 {
    background-image: url(../img/animate/0807_index_img.png);
    -webkit-animation: characterAnimate30 2s steps(30) infinite;
    animation: characterAnimate30 2s steps(30) infinite;	
}

.character-animate0808 {
    background-image: url(../img/animate/0808_index_img.png);
}

.character-animate0809 {
    background-image: url(../img/animate/0809_index_img.png);
}

.character-animate0810 {
    background-image: url(../img/animate/0810_index_img.png);
}

.character-animate0811 {
    background-image: url(../img/animate/0811_index_img.png);
}

.character-animate0812 {
    background-image: url(../img/animate/0812_index_img.png);
}

.character-animate0813 {
    background-image: url(../img/animate/0813_index_img.png);
}

.character-animate0814 {
    background-image: url(../img/animate/0814_index_img.png);
}

.character-animate0815 {
    background-image: url(../img/animate/0815_index_img.png);
}

.character-animate0816 {
    background-image: url(../img/animate/0816_index_img.png);
}

.character-animate0817 {
    background-image: url(../img/animate/0817_index_img.png);	
}

.character-animate0818 {
    background-image: url(../img/animate/0818_index_img.png);	
}

.character-animate0819 {
    background-image: url(../img/animate/0819_index_img.png);	
}

.character-animate0820 {
    background-image: url(../img/animate/0820_index_img.png);	
}

.character-animate0821 {
    background-image: url(../img/animate/0821_index_img.png);	
}

.character-animate0822 {
    background-image: url(../img/animate/0822_index_img.png);	
}

.character-animate0823 {
    background-image: url(../img/animate/0823_index_img.png);	
    -webkit-animation: characterAnimate30 2s steps(30) infinite;
    animation: characterAnimate30 2s steps(30) infinite;
    margin-top: -510px;	
}

.character-bottom {
    width: 100%;
    height: 40%;
    position: absolute;
    bottom: 0;
    background-color: #a9a79f; 
    background-image: url(../img/mask.png);
    background-repeat: repeat;
}

.base-0806 {
    background-image: url(../img/animate/0806_main_rain.png);
    -webkit-animation: characterAnimate1 1s steps(15) infinite;
    animation: characterAnimate1 1s steps(15) infinite;
}

.action-0806-1 {
    background-image: url(../img/animate/0806_main_thunder.png);
    -webkit-animation: characterAnimate2 1s steps(15) infinite;
    animation: characterAnimate2 1s steps(15) infinite;
}

.action-0806-2 {
    background-image: url(../img/animate/0806_main_wind.png);
    -webkit-animation: characterAnimate3 1s steps(15) infinite;
    animation: characterAnimate3 1s steps(15) infinite;
}

.base-0807 {
    background-image: url(../img/animate/0807_main_sun.png);
    -webkit-animation: characterAnimate1 1s steps(15) infinite;
    animation: characterAnimate1 1s steps(15) infinite;
}

.action-0807-1 {
    background-image: url(../img/animate/0807_main_humid.png);
    -webkit-animation: characterAnimate2 1s steps(15) infinite;
    animation: characterAnimate2 1s steps(15) infinite;
}

.action-0807-2 {
    background-image: url(../img/animate/0807_main_pressure.png);
    -webkit-animation: characterAnimate3 1s steps(15) infinite;
    animation: characterAnimate3 1s steps(15) infinite;
}


.base-0808 {
    background-image: url(../img/animate/0808_main_ahead.png);
    -webkit-animation: characterAnimate1 1s steps(15) infinite;
    animation: characterAnimate1 1s steps(15) infinite;
}

.action-0808-1 {
    background-image: url(../img/animate/0808_main_sports.png);
    -webkit-animation: characterAnimate2 1s steps(15) infinite;
    animation: characterAnimate2 1s steps(15) infinite;
}

.action-0808-2 {
    background-image: url(../img/animate/0808_main_heat.png);
    -webkit-animation: characterAnimate3 1s steps(15) infinite;
    animation: characterAnimate3 1s steps(15) infinite;
}

.base-0809 {
    background-image: url(../img/animate/0809_main_weather.png);
    -webkit-animation: characterAnimate1 1s steps(15) infinite;
    animation: characterAnimate1 1s steps(15) infinite;
}

.action-0809-1 {
    background-image: url(../img/animate/0809_main_swim.png);
    -webkit-animation: characterAnimate2 1s steps(15) infinite;
    animation: characterAnimate2 1s steps(15) infinite;
}

.action-0809-2 {
    background-image: url(../img/animate/0809_main_pia.png);
    -webkit-animation: characterAnimate3 1s steps(15) infinite;
    animation: characterAnimate3 1s steps(15) infinite;
}

.base-0810 {
    background-image: url(../img/animate/0810_main_1.png);
    -webkit-animation: characterAnimate1 1s steps(15) infinite;
    animation: characterAnimate1 1s steps(15) infinite;
}

.action-0810-1 {
    background-image: url(../img/animate/0810_main_2.png);
    -webkit-animation: characterAnimate2 1s steps(15) infinite;
    animation: characterAnimate2 1s steps(15) infinite;
}

.action-0810-2 {
    background-image: url(../img/animate/0810_main_3.png);
    -webkit-animation: characterAnimate3 1s steps(15) infinite;
    animation: characterAnimate3 1s steps(15) infinite;
}

.base-0811 {
    background-image: url(../img/animate/0811_main_1.png);
    -webkit-animation: characterAnimate1 1s steps(15) infinite;
    animation: characterAnimate1 1s steps(15) infinite;
}

.action-0811-1 {
    background-image: url(../img/animate/0811_main_2.png);
    -webkit-animation: characterAnimate2 1s steps(15) infinite;
    animation: characterAnimate2 1s steps(15) infinite;
}

.action-0811-2 {
    background-image: url(../img/animate/0811_main_3.png);
    -webkit-animation: characterAnimate3 1s steps(15) infinite;
    animation: characterAnimate3 1s steps(15) infinite;
}

.base-0812 {
    background-image: url(../img/animate/0812_main_1.png);
    -webkit-animation: characterAnimate1 1s steps(15) infinite;
    animation: characterAnimate1 1s steps(15) infinite;
}

.action-0812-1 {
    background-image: url(../img/animate/0812_main_2.png);
    -webkit-animation: characterAnimate2 1s steps(15) infinite;
    animation: characterAnimate2 1s steps(15) infinite;
}

.action-0812-2 {
    background-image: url(../img/animate/0812_main_3.png);
    -webkit-animation: characterAnimate3 1s steps(15) infinite;
    animation: characterAnimate3 1s steps(15) infinite;
}

.base-0813 {
    background-image: url(../img/animate/0813_main_1.png);
    -webkit-animation: characterAnimate1 1s steps(15) infinite;
    animation: characterAnimate1 1s steps(15) infinite;
}

.action-0813-1 {
    background-image: url(../img/animate/0813_main_2.png);
    -webkit-animation: characterAnimate2 1s steps(15) infinite;
    animation: characterAnimate2 1s steps(15) infinite;
}

.action-0813-2 {
    background-image: url(../img/animate/0813_main_3.png);
    -webkit-animation: characterAnimate3 1s steps(15) infinite;
    animation: characterAnimate3 1s steps(15) infinite;
}

.base-0814 {
    background-image: url(../img/animate/0814_main_1.png);
    -webkit-animation: characterAnimate1 1s steps(15) infinite;
    animation: characterAnimate1 1s steps(15) infinite;
}

.action-0814-1 {
    background-image: url(../img/animate/0814_main_2.png);
    -webkit-animation: characterAnimate2 1s steps(15) infinite;
    animation: characterAnimate2 1s steps(15) infinite;
}

.action-0814-2 {
    background-image: url(../img/animate/0814_main_3.png);
    -webkit-animation: characterAnimate3 1s steps(15) infinite;
    animation: characterAnimate3 1s steps(15) infinite;
}

.base-0815 {
    background-image: url(../img/animate/0815_main_1.png);
    -webkit-animation: characterAnimate1 1s steps(15) infinite;
    animation: characterAnimate1 1s steps(15) infinite;
}

.action-0815-1 {
    background-image: url(../img/animate/0815_main_2.png);
    -webkit-animation: characterAnimate2 1s steps(15) infinite;
    animation: characterAnimate2 1s steps(15) infinite;
}

.action-0815-2 {
    background-image: url(../img/animate/0815_main_3.png);
    -webkit-animation: characterAnimate3 1s steps(15) infinite;
    animation: characterAnimate3 1s steps(15) infinite;
}

.base-0816 {
    background-image: url(../img/animate/0816_main_1.png);
    -webkit-animation: characterAnimate1 1s steps(15) infinite;
    animation: characterAnimate1 1s steps(15) infinite;
}

.action-0816-1 {
    background-image: url(../img/animate/0816_main_2.png);
    -webkit-animation: characterAnimate2 1s steps(15) infinite;
    animation: characterAnimate2 1s steps(15) infinite;
}

.action-0816-2 {
    background-image: url(../img/animate/0816_main_3.png);
    -webkit-animation: characterAnimate3 1s steps(15) infinite;
    animation: characterAnimate3 1s steps(15) infinite;
}

.base-0817 {
    background-image: url(../img/animate/0817_main_1.png);
    -webkit-animation: characterAnimate1 1s steps(15) infinite;
    animation: characterAnimate1 1s steps(15) infinite;
}

.action-0817-1 {
    background-image: url(../img/animate/0817_main_2.png);
    -webkit-animation: characterAnimate2 1s steps(15) infinite;
    animation: characterAnimate2 1s steps(15) infinite;
}

.action-0817-2 {
    background-image: url(../img/animate/0817_main_3.png);
    -webkit-animation: characterAnimate3 1s steps(15) infinite;
    animation: characterAnimate3 1s steps(15) infinite;
}

.base-0818 {
    background-image: url(../img/animate/0818_main_1.png);
    -webkit-animation: characterAnimate1 1s steps(15) infinite;
    animation: characterAnimate1 1s steps(15) infinite;
}

.action-0818-1 {
    background-image: url(../img/animate/0818_main_2.png);
    -webkit-animation: characterAnimate2 1s steps(15) infinite;
    animation: characterAnimate2 1s steps(15) infinite;
}

.action-0818-2 {
    background-image: url(../img/animate/0818_main_3.png);
    -webkit-animation: characterAnimate3 1s steps(15) infinite;
    animation: characterAnimate3 1s steps(15) infinite;
}

.base-0819 {
    background-image: url(../img/animate/0819_main_1.png);
    -webkit-animation: characterAnimate1 1s steps(15) infinite;
    animation: characterAnimate1 1s steps(15) infinite;
}

.action-0819-1 {
    background-image: url(../img/animate/0819_main_2.png);
    -webkit-animation: characterAnimate2 1s steps(15) infinite;
    animation: characterAnimate2 1s steps(15) infinite;
}

.action-0819-2 {
    background-image: url(../img/animate/0819_main_3.png);
    -webkit-animation: characterAnimate3 1s steps(15) infinite;
    animation: characterAnimate3 1s steps(15) infinite;
}

.base-0820 {
    background-image: url(../img/animate/0820_main_1.png);
    -webkit-animation: characterAnimate1 1s steps(15) infinite;
    animation: characterAnimate1 1s steps(15) infinite;
}

.action-0820-1 {
    background-image: url(../img/animate/0820_main_2.png);
    -webkit-animation: characterAnimate2 1s steps(15) infinite;
    animation: characterAnimate2 1s steps(15) infinite;
}

.action-0820-2 {
    background-image: url(../img/animate/0820_main_3.png);
    -webkit-animation: characterAnimate3 1s steps(15) infinite;
    animation: characterAnimate3 1s steps(15) infinite;
}

.base-0821 {
    background-image: url(../img/animate/0821_main_1.png);
    -webkit-animation: characterAnimate1 1s steps(15) infinite;
    animation: characterAnimate1 1s steps(15) infinite;
}

.action-0821-1 {
    background-image: url(../img/animate/0821_main_2.png);
    -webkit-animation: characterAnimate2 1s steps(15) infinite;
    animation: characterAnimate2 1s steps(15) infinite;
}

.action-0821-2 {
    background-image: url(../img/animate/0821_main_3.png);
    -webkit-animation: characterAnimate3 1s steps(15) infinite;
    animation: characterAnimate3 1s steps(15) infinite;
}

.base-0822 {
    background-image: url(../img/animate/0822_main_1.png);
    -webkit-animation: characterAnimate1 1s steps(15) infinite;
    animation: characterAnimate1 1s steps(15) infinite;
}

.action-0822-1 {
    background-image: url(../img/animate/0822_main_2.png);
    -webkit-animation: characterAnimate2 1s steps(15) infinite;
    animation: characterAnimate2 1s steps(15) infinite;
}

.action-0822-2 {
    background-image: url(../img/animate/0822_main_3.png);
    -webkit-animation: characterAnimate3 1s steps(15) infinite;
    animation: characterAnimate3 1s steps(15) infinite;
}

@keyframes characterAnimate {
    0% { background-position: 0px 0px;}
    100% { background-position: 0px -15435px;}
}

@-webkit-keyframes characterAnimate {
    0% { background-position: 0px 0px;}
    100% { background-position: 0px -15435px;}
}

@keyframes characterAnimate1 {
    0% { background-position: 0px 0px;}
    100% { background-position: 0px -15435px;}
}

@-webkit-keyframes characterAnimate1 {
    0% { background-position: 0px 0px;}
    100% { background-position: 0px -15435px;}
}

@keyframes characterAnimate2 {
    0% { background-position: 0px 0px;}
    100% { background-position: 0px -15435px;}
}

@-webkit-keyframes characterAnimate2 {
    0% { background-position: 0px 0px;}
    100% { background-position: 0px -15435px;}
}

@keyframes characterAnimate3 {
    0% { background-position: 0px 0px;}
    100% { background-position: 0px -15435px;}
}

@-webkit-keyframes characterAnimate3 {
    0% { background-position: 0px 0px;}
    100% { background-position: 0px -15435px;}
}

@keyframes characterAnimate30 {
    0% { background-position: 0px 0px;}
    100% { background-position: 0px -30870px;}
}

@-webkit-keyframes characterAnimate30 {
    0% { background-position: 0px 0px;}
    100% { background-position: 0px -30870px;}
}

@keyframes climateSun {
    0% { background-position: 0px 0px;}
    100% { background-position: 0px -15435px;}
}

@-webkit-keyframes climateSun {
    0% { background-position: 0px 0px;}
    100% { background-position: 0px -15435px;}
}

@keyframes god {
    0% { background-position: 0px 0px;}
    100% { background-position: 0px -4200px;}
}

@-webkit-keyframes god{
    0% { background-position: 0px 0px;}
    100% { background-position: 0px -4200px;}
}

.god {
	width: 170px;
	height: 280px;
	position: relative;
	margin: 0 auto;
	left: 0;
	right: 0;
	z-index: 2;
}

.god-animate {
	width: 170px;
	height: 280px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -140px 0 0 -85px;
    background-image: url(../img/animate/god.png);
    -webkit-animation: god 1s steps(15) infinite;
    animation: god 1s steps(15) infinite;
}

.earth-group {
	width: 396px;
	height: 396px;
	position: relative;
	margin: 20% auto 0 auto;
	left: 0;
	right: 0;
	position: relative;
    z-index: 2;
	border-radius: 50%;
}

.earth-img {
	width: 100%;
	height: 100%;
	background-image: url(../img/close/earth.png);
	background-size: 100%;
	border-radius: 50%;
    position: relative;
    z-index: 2;
}

.earth-success {
	background-image: url(../img/close/earth2.png);
}

.earth-error {
	background-image: url(../img/close/earth3.png);
}

.earth-line {
    width: 420px;
    height: 420px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -210px 0 0 -210px;
	background-color: rgba(256,256,256,0.1);
	border-radius: 50%;
}

.earth-style {
	width: 100%;
	height: 100%;
	position: absolute;
	border-radius: 50%;
	top: 0;
}

.level1-1 {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.level1-2 {
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

.level1-3 {
    -webkit-transform: rotate(-180deg);
    transform: rotate(-180deg);
}

.level1-4 {
    -webkit-transform: rotate(-225deg);
    transform: rotate(-225deg);
}

.level1-5 {
    -webkit-transform: rotate(-270deg);
    transform: rotate(-270deg);
}

.level1-6 {
    -webkit-transform: rotate(-315deg);
    transform: rotate(-315deg);
}

.level1-7 {
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
}

.level1-8 {
    -webkit-transform: rotate(-405deg);
    transform: rotate(-405deg);
}

.level2-1 {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.level2-2 {
    -webkit-transform: rotate(-125deg);
    transform: rotate(-125deg);
}

.level2-3 {
    -webkit-transform: rotate(-195deg);
    transform: rotate(-195deg);
}

.level2-4 {
    -webkit-transform: rotate(-215deg);
    transform: rotate(-215deg);
}

.level2-5 {
    -webkit-transform: rotate(-235deg);
    transform: rotate(-235deg);
}

.level2-6 {
    -webkit-transform: rotate(-270deg);
    transform: rotate(-270deg);
}

.level2-7 {
    -webkit-transform: rotate(-305deg);
    transform: rotate(-305deg);
}

.level2-8 {
    -webkit-transform: rotate(-375deg);
    transform: rotate(-375deg);
}

.level2-9 {
    -webkit-transform: rotate(-395deg);
    transform: rotate(-395deg);
}

.level2-10 {
    -webkit-transform: rotate(-415deg);
    transform: rotate(-415deg);
}

.level3-1 {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.level3-2 {
    -webkit-transform: rotate(-125deg);
    transform: rotate(-125deg);
}

.level3-3 {
    -webkit-transform: rotate(-195deg);
    transform: rotate(-195deg);
}

.level3-4 {
    -webkit-transform: rotate(-215deg);
    transform: rotate(-215deg);
}

.level3-5 {
    -webkit-transform: rotate(-235deg);
    transform: rotate(-235deg);
}

.level3-6 {
    -webkit-transform: rotate(-270deg);
    transform: rotate(-270deg);
}

.level3-7 {
    -webkit-transform: rotate(-305deg);
    transform: rotate(-305deg);
}

.level3-8 {
    -webkit-transform: rotate(-375deg);
    transform: rotate(-375deg);
}

.level3-9 {
    -webkit-transform: rotate(-395deg);
    transform: rotate(-395deg);
}

.level3-10 {
    -webkit-transform: rotate(-415deg);
    transform: rotate(-415deg);
}

.earth-mark {
	width: 86px;
	height: 219px;
	position: absolute;
	margin: -160px auto 0 auto;
	left: 0;
	right: 0;
	background-size: 100%;
    -webkit-transform: translateY(110%);
    transform: translateY(110%);
}

.earth-mark1 {
	background-image: url(../img/close/head1.png);
}

.earth-mark2 {
	background-image: url(../img/close/head2.png);
}

.earth-mark3 {
	background-image: url(../img/close/head3.png);
}

.earth-mark4 {
	background-image: url(../img/close/head4.png);
}

.earth-mark5 {
	background-image: url(../img/close/head5.png);
}

.earth-mark6 {
	background-image: url(../img/close/head6.png);
}

.earth-mark7 {
	background-image: url(../img/close/head7.png);
}

.earth-mark8 {
	background-image: url(../img/close/head8.png);
}

.earth-mark9 {
	background-image: url(../img/close/head9.png);
}

.earth-mark10 {
	background-image: url(../img/close/head10.png);
}

.earth-mark11 {
	background-image: url(../img/close/head11.png);
}

.earth-mark12 {
	background-image: url(../img/close/head12.png);
}

.earth-mark13 {
	background-image: url(../img/close/head13.png);
}

.earth-mark14 {
	background-image: url(../img/close/head14.png);
}

.earth-mark15 {
	background-image: url(../img/close/head1.png);
}

.earth-mark16 {
	background-image: url(../img/close/head2.png);
}

.earth-mark17 {
	background-image: url(../img/close/head3.png);
}

.earth-mark18 {
	background-image: url(../img/close/head4.png);
}

.earth-mark19 {
	background-image: url(../img/close/head5.png);
}

.earth-mark20 {
	background-image: url(../img/close/head6.png);
}

.earth-mark21 {
	background-image: url(../img/close/head7.png);
}

.earth-mark22 {
	background-image: url(../img/close/head8.png);
}

.earth-mark23 {
	background-image: url(../img/close/head9.png);
}

.earth-mark24 {
	background-image: url(../img/close/head10.png);
}

.earth-mark25 {
	background-image: url(../img/close/head11.png);
}

.earth-mark26 {
	background-image: url(../img/close/head12.png);
}

.earth-mark27 {
	background-image: url(../img/close/head13.png);
}

.earth-mark28 {
	background-image: url(../img/close/head14.png);
}

.earth-mark1-over {
	background-image: url(../img/close/head1_over.png);
}

.earth-mark2-over {
	background-image: url(../img/close/head2_over.png);
}

.earth-mark3-over {
	background-image: url(../img/close/head3_over.png);
}

.earth-mark4-over {
	background-image: url(../img/close/head4_over.png);
}

.earth-mark5-over {
	background-image: url(../img/close/head5_over.png);
}

.earth-mark6-over {
	background-image: url(../img/close/head6_over.png);
}

.earth-mark7-over {
	background-image: url(../img/close/head7_over.png);
}

.earth-mark8-over {
	background-image: url(../img/close/head8_over.png);
}

.earth-mark9-over {
	background-image: url(../img/close/head9_over.png);
}

.earth-mark10-over {
	background-image: url(../img/close/head10_over.png);
}

.earth-mark11-over {
	background-image: url(../img/close/head11_over.png);
}

.earth-mark12-over {
	background-image: url(../img/close/head12_over.png);
}

.earth-mark13-over {
	background-image: url(../img/close/head13_over.png);
}

.earth-mark14-over {
	background-image: url(../img/close/head14_over.png);
}

.earth-mark15-over {
	background-image: url(../img/close/head1_over.png);
}

.earth-mark16-over {
	background-image: url(../img/close/head2_over.png);
}

.earth-mark17-over {
	background-image: url(../img/close/head3_over.png);
}

.earth-mark18-over {
	background-image: url(../img/close/head4_over.png);
}

.earth-mark19-over {
	background-image: url(../img/close/head5_over.png);
}

.earth-mark20-over {
	background-image: url(../img/close/head6_over.png);
}

.earth-mark21-over {
	background-image: url(../img/close/head7_over.png);
}

.earth-mark22-over {
	background-image: url(../img/close/head8_over.png);
}

.earth-mark23-over {
	background-image: url(../img/close/head9_over.png);
}

.earth-mark24-over {
	background-image: url(../img/close/head10_over.png);
}

.earth-mark25-over {
	background-image: url(../img/close/head11_over.png);
}

.earth-mark26-over {
	background-image: url(../img/close/head12_over.png);
}

.earth-mark27-over {
	background-image: url(../img/close/head13_over.png);
}

.earth-mark28-over {
	background-image: url(../img/close/head14_over.png);
}
 
.light {
    width: 0;
    height: 30%;
	background-color: rgba(256,256,256,0.3);
	position: absolute;
	margin: -2% auto 0 auto;
	left: 0;
	right: 0;
	background-size: 100%;
    -webkit-transition: all 0.05s ease-in;
    -moz-transition: all 0.05s ease-in;
    transition: all 0.05s ease-in;
	overflow: hidden;
}

.light-active {
    width: 14%;
	-webkit-box-shadow: 0 10px 10px 10px rgba(255,252,253,0.2);
	-moz-box-shadow: 0 10px 10px 10px rgba(255,252,253,0.2);
	box-shadow: 0 10px 10px 10px rgba(255,252,253,0.2);
}

.light1 {
	background-image: url(../img/close/light1.png);
	background-repeat: no-repeat; 
}

.light2 {
	background-image: url(../img/close/light2.png);
	background-repeat: no-repeat; 
}

.light3 {
	background-image: url(../img/close/light3.png);
	background-repeat: no-repeat; 
}
/*----share----*/

.lyric-group {
    width: 100%;
    height: 30%;
    position: absolute;
    top: 25%;
}

.lyric-group img {
    width: 100%;
    position: absolute;
}

.lyric1,
.lyric2,
.lyric3,
.lyric4,
.lyric5 {
    opacity: 0; 
    -webkit-transform: translateY(15px);
    -ms-transform: translateY(15px);
    transform: translateY(15px);
}

.btn-group {
    width: 96%;
    height: 32%;
    position: absolute;
    bottom: 5%;
    left: 0;
    right: 0;
    margin: 0 auto;
}

.btn-group .btn,
.btn-group a {
    width: 33.3%;
    height: 100%;
    float: left;
    cursor: pointer;
    position: relative;
}

.content-bottom {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: -60%;
    background-color: #a9a79f;
    background-image: url(../img/mask.png);
    background-repeat: repeat;
}

.share-bottom-bg {
    width: 100%;
    display: none;
}

.share-bottom-bg2 {
    width: 100%;
    position: absolute;
    bottom: 0;
    display: none;
}

.share-bottom-again-bg {
    width: 100%;
    display: block;
}

.share .share-bottom-bg,
.share .share-bottom-bg2 {
    display: block;
}

.share .share-bottom-again-bg {
    display: none;
}

/*----other----*/

#popup {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.4);
    z-index: 100;
    display: none;
}

#popup .popup-container {
    width: 80%;
    height: 65%;
    position: relative;
    top: 12%;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    background: rgba(256,256,256,0.4);
    border-radius: 30px;
    -moz-box-shadow:    inset 0 0 20px rgba(256,256,256,0.7);
    -webkit-box-shadow: inset 0 0 20px rgba(256,256,256,0.7);
    box-shadow:         inset 0 0 20px rgba(256,256,256,0.7);
    opacity: 0;
    -webkit-transform: translateY(60px);
    -ms-transform: translateY(60px);
    transform: translateY(60px);
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
    overflow: hidden;
}
.popup-title {
    width: 100%;
    height: auto;
}

.next-popup-content {
    width: 100%;
    height: 90%;
    overflow-y: scroll;
}

.next-popup-content2 {
    height: 80%;
}

.next-popup-content-container {
    width: 100%;
}

.next-popup-content-top {
	width: 100%;
	position: relative;
}

.next-icon {
    width: 191px;
    height: 191px;
    position: absolute;
    top: 3%;
    left: 3%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
}

.next-popup-content-top .next-icon {
	top: -25%;
}

.next-icon img {
    width: 191px;
    height: 191px;
    position: absolute;
}

.desktop .next-icon {
    top: 13%;
    left: 15%;
}

.popup-icon {
    -webkit-animation: spin 3s linear infinite;
    -moz-animation: spin 3s linear infinite;
    animation: spin 3s linear infinite;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.popup-icon2 {
    -webkit-animation: bounceInUp 2s linear infinite;
    -moz-animation: bounceInUp 2s linear infinite;
    animation: bounceInUp 2s linear infinite;
}
@-webkit-keyframes bounceInUp {
  0% {
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
  }

  33% {
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px);
  }

  66% {
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
  }

  66% {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
  }

  100% {
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
  }
}

@keyframes bounceInUp {
  0% {
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
  }

  33% {
    -webkit-transform: translateY(10px);
    -ms-transform: translateY(10px);
    transform: translateY(10px);
  }

  66% {
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
  }

  66% {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
  }

  100% {
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
  }
}

.flag-animate {
    width: 191px;
    height: 191px;
    background-image: url(../img/animate/flag.png);
    -webkit-animation: flag 2s steps(11) infinite;
    animation: flag 2s steps(11) infinite;
    position: absolute;
    top: 3%;
    right: 3%;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
}

.desktop .flag-animate {
    top: 13% !important;
    right: 15%;
}

@keyframes flag {
    100% { background-position: 0px -2101px;}
}

@-webkit-keyframes flag {
    100% { background-position: 0px -2101px;}
}

.next-popup-content-top .flag-animate {
	top: -25%;
}

.air-popup-content {
    width: 100%;
    height: 90%;
    overflow-y: scroll;
}

.popup-arrow {
    width: 8%;
    position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: 3.5%;
    cursor: pointer;
}

.arrow-animate {
    -webkit-animation: arrow 2s linear infinite;
    -moz-animation: arrow 2s linear infinite;
    animation: arrow 2s linear infinite;
}

@-webkit-keyframes arrow {
  0% {
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
  }

  33% {
    -webkit-transform: translateY(5px);
    -ms-transform: translateY(5px);
    transform: translateY(5px);
  }

  66% {
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
  }

  66% {
    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
  }

  100% {
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
  }
}

@keyframes arrow {
  0% {
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
  }

  33% {
    -webkit-transform: translateY(5px);
    -ms-transform: translateY(5px);
    transform: translateY(5px);
  }

  66% {
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
  }

  66% {
    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
  }

  100% {
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
  }
}

.air-popup-content img,
.next-popup-content img,
.popup-arrow img,
.popup-title img {
    width: 100%;
}

#popup .close-btn {
    width: 100%;
    position: relative;
    top: 20%;
    opacity: 0;
    -webkit-transform: translateY(60px);
    -ms-transform: translateY(60px);
    transform: translateY(60px);
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
    cursor: pointer;
}

#popup .close-btn {
    width: 100%;
    position: relative;
    top: 14%;
}

#popup .popup-bottom {
    width: 100%;
    position: absolute;
    margin: 0 auto;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    -webkit-transition: all 0.6s ease-in-out;
    -moz-transition: all 0.6s ease-in-out;
    transition: all 0.6s ease-in-out;
}

.close-btn img,
#popup .popup-bottom img {
    width: 100%;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

#popup .bottom img:active,
.close-btn img:active {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
}

.air-close-btn {
    width: 92%;
    margin: 0 auto;
}

.air-close-btn,
.air-popup-title,
.air-popup-content {
    display: none;
}

.air-popup .close-btn .air-close-btn,
.air-popup .popup-title .air-popup-title,
.air-popup .air-popup-content {
    display: block;
}

.air-popup .close-btn .next-close-btn,
.air-popup .popup-title .next-popup-title,
.air-popup .popup-title .next-popup-title2,
.air-popup .next-popup-content {
    display: none !important;
}

.next-popup-title2  {
    display: none;
}

.blur {
    -webkit-filter: blur(5px);
    -moz-filter: blur(5px);
    -ms-filter: blur(5px);
    filter: blur(5px);
}

.air-popup .popup-arrow {
    display: none;
}

#popup .slideInUp {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
}

#popup .fadeIn {
    opacity: 1;
}

#prompt-mask {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    background-color: rgba(0,0,0,1);
    z-index: 50;
    display: none;
}

#prompt-mask .container {
    width: 201px;
    height: 201px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -100px 0 0 -100px;
    -webkit-transform: scale(0.6);
    transform: scale(0.6);
}

#prompt-mask .container img {
    width: 100%;
}

.desktop #popup .popup-container,
.desktop #popup .close-btn,
.desktop #popup .popup-bottom {
    width: 640px;
    margin: 0 auto;    
}

.cosmic-man {
    position: absolute;
}
.cosmic-man1 {
    top: 0;
    left: -50px;
}
.cosmic-man2 {
    top: 0;
    right: -50px;
}
.cosmic-man3 {
    bottom: 0;
    left: -50px;
}
.cosmic-man4 {
    bottom: 0;
    right: -50px;
}

.cosmic-man-container1 {
    -webkit-transform: scale(0.5) rotate(-240deg) translateY(100%);
    transform: scale(0.5) rotate(-240deg) translateY(100%);
}

.cosmic-man-container2 {
    -webkit-transform: scale(0.5) rotate(240deg) translateY(100%);
    transform: scale(0.5) rotate(240deg) translateY(100%);
}

.cosmic-man-container3 {
    -webkit-transform: scale(0.5) rotate(60deg) translateY(100%);
    transform: scale(0.5) rotate(60deg) translateY(100%);
}

.cosmic-man-container4 {
    -webkit-transform: scale(0.5) rotate(-55deg) translateY(100%);
    transform: scale(0.5) rotate(-55deg) translateY(100%);
}

.desktop .cosmic-man-container1 {
    -webkit-transform: scale(1) rotate(-240deg) translateY(100%);
    transform: scale(1) rotate(-240deg) translateY(100%);
}

.desktop .cosmic-man-container2 {
    -webkit-transform: scale(1) rotate(240deg) translateY(100%);
    transform: scale(1) rotate(240deg) translateY(100%);
}

.desktop .cosmic-man-container3 {
    -webkit-transform: scale(1) rotate(60deg) translateY(100%);
    transform: scale(1) rotate(60deg) translateY(100%);
}

.desktop .cosmic-man-container4 {
    -webkit-transform: scale(1) rotate(-55deg) translateY(100%);
    transform: scale(1) rotate(-55deg) translateY(100%);
}

#banner_statistic {
    display: none;
}

/*---- close ----*/
.close-num { 
	width: 142px; 
	height: 142px; 
	position: absolute; 
	top: 1vh;
	left: 2.5%;
}

.num { 
	background-image: url(../img/close/num.png); 
	width: 142px; 
	height: 142px; 
}

.num-bg { 
	background-image: url(../img/close/num_bg.png); 
	width: 142px; 
	height: 142px; 
	position: absolute; 
	top: 0; 
	left: 0; 
}

.num-0 { background-position: 0 0; }
.num-1 { background-position: 0 -142px; }
.num-2 { background-position: 0 -284px; }
.num-3 { background-position: 0 -426px; }
.num-4 { background-position: 0 -568px; }
.num-5 { background-position: 0 -710px; }
.num-6 { background-position: 0 -852px; }
.num-7 { background-position: 0 -994px; }
.num-8 { background-position: 0 -1136px; }
.num-9 { background-position: 0 -1278px; }
.num-10 { background-position: 0 -1420px; }
.num-11 { background-position: 0 -1562px; }
.num-12 { background-position: 0 -1704px; }
.num-13 { background-position: 0 -1846px; }
.num-14 { background-position: 0 -1988px; }
.num-15 { background-position: 0 -2130px; }
.num-16 { background-position: 0 -2272px; }
.num-17 { background-position: 0 -2414px; }
.num-18 { background-position: 0 -2556px; }
.num-19 { background-position: 0 -2698px; }
.num-20 { background-position: 0 -2840px; }
.num-21 { background-position: 0 -2982px; }
.num-22 { background-position: 0 -3124px; }
.num-23 { background-position: 0 -3266px; }
.num-24 { background-position: 0 -3408px; }
.num-25 { background-position: 0 -3550px; }
.num-26 { background-position: 0 -3692px; }
.num-27 { background-position: 0 -3834px; }
.num-28 { background-position: 0 -3976px; }
.num-29 { background-position: 0 -4118px; }
.num-30 { background-position: 0 -4260px; }
.num-31 { background-position: 0 -4402px; }
.num-32 { background-position: 0 -4544px; }

@media (max-width: 750px) {
    #content {
        width: 100vw;
        height: 100vh;
    }

    .swiper-container {
        width: 100vw;
        height: 100vh;   
    }

	.loadAnimate,
	.loadAnimate2 {
        -webkit-transform: scale(0.6);
        transform: scale(0.6); 
	}

	.close-num { 
		width: 71px; 
		height: 71px; 
		position: absolute; 
	}

	.num { 
		background: url(../img/close/num.png) no-repeat; 
		width: 142px; 
		height: 142px; 
		position: absolute;
		top: 50%;
		left: 50%;
		margin: -71px 0 0 -71px;
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
	}

	.num-bg { 
		background: url(../img/close/num_bg.png) no-repeat; 
		width: 71px; 
		height: 71px; 
		position: absolute; 
		top: 0; 
		left: 0; 
		background-size: 100%;
	}

	.start-btn {
		width: 100%;
	}

	.god {
		width: 85px;
		height: 133px;
	}

	.god-animate {
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
	}

	.earth-group {
		width: 198px;
		height: 198px;
	}

	.earth-line {
	    width: 220px;
	    height: 220px;
	    position: absolute;
	    top: 50%;
	    left: 50%;
	    margin: -110px 0 0 -110px;
		background-color: rgba(256,256,256,0.1);
		border-radius: 50%;
	}

	.earth-mark {
		width: 43px;
		height: 109.5px;
		position: absolute;
		margin: -80px auto 0 auto;
		left: 0;
		right: 0;
	}
}

@media (max-height: 900px) {
    .desktop #content,
    .desktop .swiper-container {
        width: 480px;
    }

    .desktop #popup .popup-container,
    .desktop #popup .close-btn,
    .desktop #popup .popup-bottom {
        width: 480px;
        margin: 0 auto;    
    }

    .desktop #control .btn {
        border-radius: 24px;
    }
}

@media (max-height: 800px) {
    .desktop #content {
        width: 400px;
    } 

    .desktop .swiper-container {
        width: 400px;
    }

    .desktop #popup .popup-container,
    .desktop #popup .close-btn,
    .desktop #popup .popup-bottom {
        width: 400px;
        margin: 0 auto;    
    }
}

@media (max-width: 600px) {
    .prev,
    .next {
        -webkit-transform: scale(0.8);
        transform: scale(0.8);
    }

    .loadAnimate,
    .loadAnimate2,
    .loadAnimate3,
    .loadAnimate4,
    .loadAnimate5 {
        margin-left: -110px;
        -webkit-transform: scale(0.6);
        transform: scale(0.6);
    }

    .teach-img {
        -webkit-transform: scale(0.6);
        transform: scale(0.6); 
    }
}

@media (max-width: 380px) {
    .prev,
    .next {
        -webkit-transform: scale(0.7);
        transform: scale(0.7);
    }
    #control .btn {
        font-size: 0.8em;
    }
    .loadAnimate,
    .loadAnimate2,
    .loadAnimate3,
    .loadAnimate4,
    .loadAnimate5 {
        margin-left: -114px;
        -webkit-transform: scale(0.55);
        transform: scale(0.55);
    }
    .teach-img {
        -webkit-transform: scale(0.55);
        transform: scale(0.55); 
    }
    .teach-hand {
        left: -30%;
        top: -20%;
    }
    .flag-animate {
        top: 0%;
        right: 0%;
        -webkit-transform: scale(0.4);
        transform: scale(0.4);
    }
    .next-icon {
        top: -0.2%;
        left: -0%;
        -webkit-transform: scale(0.4);
        transform: scale(0.4);
    }
}

@media (max-width: 330px) {
    .prev,
    .next {
        -webkit-transform: scale(0.6);
        transform: scale(0.6);
    }
    #control .btn {
        font-size: 0.8em;
    }
    .loadAnimate,
    .loadAnimate2,
    .loadAnimate3,
    .loadAnimate4,
    .loadAnimate5 {
        margin-left: -107px;
        -webkit-transform: scale(0.5);
        transform: scale(0.5);
    }
    .teach-img {
        -webkit-transform: scale(0.5);
        transform: scale(0.5); 
    }
    .teach-hand {
        left: -30%;
        top: -20%;
    }
    .flag-animate {
        top: -3%;
        right: -5%;
        -webkit-transform: scale(0.4);
        transform: scale(0.4);
    }
    .next-icon {
        top: -3%;
        left: -5%;
        -webkit-transform: scale(0.4);
        transform: scale(0.4);
    }
}