/* Html5 Reset */
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
body{margin:0;padding:0;border:0;}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
audio,canvas,progress,video{display:inline-block;vertical-align:baseline;}
audio:not([controls]){display:none;height:0;}
[hidden],template{display:none;}
a {background:transparent;}
a:focus{outline:thin dotted;}
a:active,a:hover{outline:0;}
abbr[title]{border-bottom:1px dotted;}
b,strong{font-weight:bold;}
dfn{font-style:italic;}
h1{font-size:2em;margin:.67em 0;}
mark{background:#ff0;color:#000;}
small{font-size:80%;}
img{border:0;}
svg:not(:root){overflow:hidden;}
figure{margin:0;}
figcaption {-webkit-nbsp-mode:normal;}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}
button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0;}
button{overflow:visible;}
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;}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
input{line-height:normal}
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;}
legend{border:0;padding:0;}
textarea{overflow:auto;}
optgroup{font-weight:bold;}
table{border-collapse:collapse;border-spacing:0;}
td,th{padding:0;}
menu,ol,ul{padding:0;list-style:none;list-style-image:none;}
.vh{visibility:hidden;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4,h5,h6,dl,dd,ol,ul,menu,figure,blockquote,p,pre,form{margin:0;}
.hidden{ display:none;}
::-webkit-input-placeholder{color:#4b6983;}
:-moz-placeholder{color:#4b6983;}
::-moz-placeholder{color:#4b6983;}
:-ms-input-placeholder{color:#4b6983;}

body,html{background:#fff;font-family:"Heiti SC",Helvetica;width:100%;height:100%;-webkit-overflow-scrolling:touch;}
html{font-size:62.5%;line-height:1.8;}
body{font-size:1.4rem;background-color:#fff;}

.wrapper,.main{position:absolute;left:0;right:0;top:0;bottom:0;}
.wrapper{display:none;opacity:0;}
.wrapper.current{display:block;}
.main{background-image:url(../img/body-bg.jpg);background-position:50% 100%;background-size:cover;overflow:hidden;border:solid 9px #b81820;}
.mbg-0{background-image:url(../img/cover-bg.jpg);}

.cover{}
.cover-cri,.cover-logo,.cover-title,.cover-earth{background-image:url(../img/cover-bg-3.png);background-repeat:no-repeat;position:absolute;opacity:0;}
.cover-cri{width:113px;height:61px;background-position:-539px -716px;top:20px;left:20px;}
.cover-logo{width:109px;height:108px;background-position:-539px -606px;top:338px;left:50%;margin-left:-54px;}
.cover-title{width:537px;height:142px;background-position:0 -606px;top:680px;left:50%;margin-left:-268px;}
.cover-earth{opacity:1;width:604px;height:604px;background-position:0 0;top:50%;left:50%;margin-left:-307px;margin-top:-302px;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;}
.current .cover-cri{-webkit-animation:fadeIn .75s forwards; animation:fadeIn .75s forwards;}
.current .cover-logo{-webkit-animation:fadeIn .75s forwards; animation:fadeIn .75s forwards;}
.current .cover-title{-webkit-animation:logoAn .5s .75s forwards; animation:logoAn .5s .75s forwards;}
.current .cover-earth{-webkit-animation:earth 20s 1.5s linear infinite; animation:earth 20s 1.5s linear infinite;}

.page1-txt{padding:70px 47px 0;font-size:26px;line-height:42px;color:#000;}
.page1-txt p{text-indent:2em;}
.page1-logo{position:absolute;width:212px;height:210px;background-image:url(../img/page2-bg.png);background-repeat:no-repeat;background-position:0 -572px;top:690px;left:50%;margin-left:-106px;opacity:1;}

.page2-title,.page2-earth,.page2-logo{position:absolute;background-image:url(../img/page2-bg.png);background-repeat:no-repeat;}
.page2-logo{width:113px;height:61px;background-position:-214px -572px;top:348px;left:50%;margin-left:-56px;opacity:1;}
.page2-logo i{position:absolute;font-size:28px;color:#e00d0d;font-style:normal;font-weight:bold;word-break:keep-all;white-space:nowrap;opacity:0;}
.page2-logo i.page2-txt-1{left:-120px;top:-210px;}
.page2-logo i.page2-txt-2{left:-10px;top:-120px;}
.page2-logo i.page2-txt-3{left:-170px;top:-100px;}
.page2-logo i.page2-txt-4{left:150px;top:-80px;}
.page2-logo i.page2-txt-5{left:-230px;top:-30px;}
.page2-logo i.page2-txt-6{left:220px;top:20px;}
.page2-logo i.page2-txt-7{left:-225px;top:60px;}
.page2-logo i.page2-txt-8{left:195px;top:120px;}
.page2-logo i.page2-txt-9{left:-140px;top:140px;}
.page2-logo i.page2-txt-10{left:50px;top:180px;}
.page2-logo i.page2-txt-11{left:-145px;top:245px;}
.p2-hand{position:absolute;top:510px;right:40px;width:103px;height:101px;background:url(../img/hand-2.png) no-repeat;background-size:contain;}
.current .p2-hand{-webkit-animation:fadeInUp 2s linear infinite; animation:fadeInUp 2s linear infinite;}
.current .page2-left{-webkit-animation:txtLeft .5s 1s forwards;animation:txtLeft .5s 1s forwards;}
.current .page2-right{-webkit-animation:txtRight .5s 1s forwards;animation:txtRight .5s 1s forwards;}
.page2-title{width:212px;height:210px;background-position:0 -572px;top:690px;left:50%;margin-left:-106px;opacity:0;}
.page2-earth{width:570px;height:570px;background-position:0 0;top:50%;left:50%;margin-left:-285px;margin-top:-285px;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;}
.current .page2-title{-webkit-animation:txtTop 1s 2s forwards; animation:txtTop 1s 2s forwards;}
.current .page2-earth{-webkit-animation:earth 20s linear infinite; animation:earth 20s linear infinite;}

.pop{position:absolute;left:0;right:0;top:0;bottom:0;background-color:#fff;border:solid 9px #b81820;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transform:perspective(800px) rotate3d(0,1,0,90deg);transform:perspective(800px) rotate3d(0,1,0,90deg);-webkit-transition:all .5s linear;transition:all .5s linear;opacity:0;overflow:hidden;}
.pop.current{z-index:2;-webkit-transform:perspective(800px) rotate3d(0,1,0,0);transform:perspective(800px) rotate3d(0,1,0,0);opacity:1;}
.pop-txt{position:absolute;left:0;right:0;top:0;bottom:0;text-align:center;overflow:hidden;}
.pop-txt img{width:100%;vertical-align:top;}
.pop-goback{position:absolute;left:20px;top:20px;width:15%;}
.pop-goback img{width:100%;vertical-align:top;}
.pop-hand{position:absolute;left:18%;top:5%;width:7%;}
.pop-hand img{width:100%;vertical-align:top;}
.pop-hand{-webkit-animation:fadeInUp 2s linear infinite; animation:fadeInUp 2s linear infinite;}
.music{position:absolute;right:15px;top:15px;width:30px;height:30px;background-repeat:no-repeat;background-position:50% 50%; background-size:contain;z-index:3;overflow:hidden;}
.music.on{background-image:url(../img/play.png);}
.music.off{background-image:url(../img/stop.png);}

.backcover img{vertical-align:top;}
.foot-goback{position:absolute;left:20px;top:20px;width:15%;}
.foot-goback img{width:100%;}
.foot-share{position:absolute;right:30px;top:20px;width:18%;}
.foot-share img{width:100%;}
.foot-top{width:100%;margin:0 auto;margin-top:0;}
.foot-top img{width:100%;}
.foot-logo{width:61%;margin:0 auto;}
.foot-logo img{width:100%;}
.foot-qr{width:70%;margin:0 auto;margin-top:1%;}
.foot-qr img{width:40%;margin:0 4%;vertical-align:top;}
.foot-txt{margin-top:3%;text-align:center;}
.foot-txt img{width:72%;vertical-align:top;}
.foot-bt{position:absolute;left:0;right:0;bottom:5%;text-align:center;}
.foot-bt img{width:50%;vertical-align:top;}

.updownbtn{position:absolute;left:50%;bottom:130px;margin-left:-36px;width:72px;height:54px;background-image:url(../img/up.png);background-repeat:no-repeat;}
.updownbtn{-webkit-animation:upDown 1s infinite;animation:upDown 1s infinite;}

/*** flipInY ***/
@-webkit-keyframes flipInY {
    0% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
        opacity: 0;
    }
    100% {
        opacity: 1;
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}
@keyframes flipInY {
    0% {
        -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
        -webkit-transition-timing-function: ease-in;
        transition-timing-function: ease-in;
        opacity: 0;
    }
    100% {
        opacity: 1;
        -webkit-transform: perspective(400px);
        transform: perspective(400px);
    }
}
@-webkit-keyframes txtTop{
    0% {opacity:0;-webkit-transform:translate3d(0,-20%,0);transform:translate3d(0,-20%,0);}
    100% {opacity:1;-webkit-transform:none;transform:none;}
}
@keyframes txtTop{
    0% {opacity:0;-webkit-transform:translate3d(0,-20%,0);transform:translate3d(0,-20%,0);}
    100% {opacity:1;-webkit-transform:none;transform:none;}
}
@-webkit-keyframes txtLeft{
    0% {opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);}
    100% {opacity:1;-webkit-transform:none;transform:none;}
}
@keyframes txtLeft{
    0% {opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);}
    100% {opacity:1;-webkit-transform:none;transform:none;}
}
@-webkit-keyframes txtRight{
    0% {opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);}
    100% {opacity:1;-webkit-transform:none;transform:none;}
}
@keyframes txtRight{
    0% {opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);}
    100% {opacity:1;-webkit-transform:none;transform:none;}
}

/**/
@-webkit-keyframes earth{
    0%{-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg);}
    50%{-webkit-transform:rotate3d(0,0,1,179deg);transform:rotate3d(0,0,1,179deg);}
    100%{-webkit-transform:rotate3d(0,0,1,359deg);transform:rotate3d(0,0,1,359deg);}
}
@keyframes earth{
    0%{-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg);}
    50%{-webkit-transform:rotate3d(0,0,1,179deg);transform:rotate3d(0,0,1,179deg);}
    100%{-webkit-transform:rotate3d(0,0,1,359deg);transform:rotate3d(0,0,1,359deg);}
}
/**/
@-webkit-keyframes fadeIn{
    0%{opacity:0;}
    100%{opacity:1;}
}
@keyframes fadeIn{
    0%{opacity:0;}
    100%{opacity:1;}
}
.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}
/*** fadeInLeft ***/
@-webkit-keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
@keyframes fadeInLeft {
    0% {
        opacity: 0;
        -webkit-transform: translate3d(100%,0,0);
        transform: translate3d(100%,0,0);
    }
    100% {
        opacity: 1;
        -webkit-transform: none;
        transform: none;
    }
}
/*** fadeInUp ***/
@-webkit-keyframes fadeInUp{
    0%,100%{opacity:0;-webkit-transform:translate3d(10%,10%,0);transform:translate3d(10%,10%,0);}
    50%{opacity:1;-webkit-transform:none;transform:none;}
}
@keyframes fadeInUp{
    0%,100%{opacity:0;-webkit-transform:translate3d(10%,10%,0);transform:translate3d(10%,10%,0);}
    50%{opacity:1;-webkit-transform:none;transform:none;}
}
/*** pulse ***/
@-webkit-keyframes pulse {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        opacity:1;
    }
    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        opacity:1;
    }
}
@keyframes pulse {
    0% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        opacity:1;
    }
    50% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05);
        transform: scale3d(1.05, 1.05, 1.05);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        opacity:1;
    }
}
.pulse {
    -webkit-animation-name: pulse;
    animation-name: pulse;
}
/*** logoAn ***/
@-webkit-keyframes logoAn {
    0%, 20%, 40%, 60%, 80%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        -webkit-transform: scale3d(2,2,2);
        transform: scale3d(2,2,2);
    }
    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        -webkit-transform: scale3d(.97, .97, .97);
        transform: scale3d(.97, .97, .97);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@keyframes logoAn {
    0%, 20%, 40%, 60%, 80%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }
    0% {
        opacity: 0;
        -webkit-transform: scale3d(2,2,2);
        transform: scale3d(2,2,2);
    }
    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        -webkit-transform: scale3d(.97, .97, .97);
        transform: scale3d(.97, .97, .97);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
/**/
@-webkit-keyframes upDown{
    0%{opacity:0;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
    100%{opacity:.8;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0);}
}
@keyframes upDown{
    0%{opacity:0;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
    100%{opacity:.8;-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0);}
}

/*
 ****** animated ******
 */
.animated {
    -webkit-animation-duration: 1s;/* time */
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;/* mode */
    animation-fill-mode: both;
}
.animated.infinite {
    -webkit-animation-iteration-count: infinite;/* loop */
    animation-iteration-count: infinite;
}
.animated.quick {
    -webkit-animation-duration: .5s;
    animation-duration: .5s;
}
.animated.hinge {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}
.animated.bounce {
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
}

/*.top-page{position:absolute;left:0;top:0;right:0;bottom:0;z-index:10;background-color:#fff;display:-webkit-box;-webkit-box-pack:center;-webkit-box-align:center;display:-webkit-flex;display:flex;-webkit-align-content:center;align-content:center;-webkit-align-items:center;align-items:center;}
.top-page img{display:block;height:auto;width:50%;margin:0 auto;}*/

@media only screen and (max-height:440px){
    .foot-logo{}
    .foot-qr{width:64%;}
    .foot-txt{bottom:10%;}
    .foot-txt img{width:50%;}
    .pop-txt img{width:auto;height:100%;}
}
@media only screen and (min-width:768px){
    .pop-txt img{width:auto;height:100%;}
}