@font-face{
    font-family:"STXingkai";
    src:url(assets/fonts/STXINGKA.ttf) format("truetype")
}
html,body{
    font:16px"Microsoft YaHei", SimSun, arial, helvetica, "Source Sans Pro", sans-serif, verdana !important;
    -webkit-tap-highlight-color:#FFF498 background-color: #000;
    font-size:16px;
    line-height:1.6;
    color:#000;
    -webkit-font-smoothing:antialiased;
    -webkit-text-size-adjust:100%
}
ul{
    padding:0px;
    margin:0px
}
a:hover,a,a:focus{
    text-decoration:none !important;
    outline:none !important;
    color:#ff0d40 !important
}
p{
    font-size:16px;
    line-height:1.6
}

#scroll .desc iframe{min-height: 250px;height:auto;width: 100%;margin:auto;display: block;}

.region p span{
    display:block
}
.fa-angle-down{
    color:#fff
}
#introduction .container{
    height:95%
}
#audioControl{
    color:#fff;
    background-color:#E71D36;
    padding:0.5em;
    border-radius:50%
}
#instruction{
    text-align:center;
    margin-left:-6em
}
#hand-animation{
    display:inline-block;
    cursor:pointer
}
#hand-animation p{
    margin-left:-5.5em;
    vertical-align:0.5em
}
.social-icons i{
    font-size:18px;
    background-color:rgba(0,0,0,0.2);
    color:#fff;
    padding:0.6em;
    height:35px;
    width:35px;
    margin:0 0.1em !important;
    border-radius:50%
}
#menu{
    position:relative;
    z-index:70;
    -webkit-font-smoothing:antialiased;
    -moz-font-smoothing:antialiased;
    letter-spacing:1px;
    font-size:1.1em;
    width:100%
}
.better-experience{
    display:none;
    position:absolute;
    text-align:center;
    background:rgba(0,0,0,1);
    color:white;
    padding:5px;
    height:100vh;
    width:100%
}
.social-icons{
    display:inline-block;
    position:absolute;
    right:20px;
    top:20px
}
@media screen and (max-width: 900px){
    #menu{
        text-align:center;
        left:0;
        right:0
    }
}
#introduction{
    background-color:#f5f3ed
}
#introduction .cube{
    margin:1.4em auto;
    display:block
}
#introduction .cube2{
    float:right;
    margin-right:1em
}
#introduction .cube3{
    float:left;
    margin-left:1em
}
#introduction #zbsg{
     max-width:120px;
    margin-top:1.2em;
}
#introduction #title{
    max-width:400px;
    margin:0.5em auto
}
#introduction img{
    display:block;
    margin:auto
}
#introduction p{
    text-align:center
}
#introduction p span{
    *margin-top:1em
}
#introduction button{
    font-family:"Microsoft YaHei",SimSun,arial,helvetica,"Source Sans Pro",sans-serif,verdana !important;
    border:none;
    color:#fff;
    position:relative;
    margin:1rem 3rem;
    padding:0.5rem 1rem;
    font-size:18px;
    background-color:transparent;
    cursor:pointer;
    display:block;
    margin:3em auto;
    background-color:#ff0d40;
    box-shadow:0px 5px 0px 0px #b30027;
    border-radius:15px
}
#introduction button:hover{
    background-color:#ff6687;
    border-color:#ff0d40
}
#introduction .button--bop:active{
    transform:translateY(3px)
}
#introduction .button--bop{
    animation-iteration-count:infinite
}
#introduction .button--bop:focus{
    outline:none !important
}
#scroll{
    position:relative;
    height:100%;
    width:100%;
    float:right;
    background:url("../img/scroll.png") no-repeat right center;
    background-size:contain
}
.scroll{
    display:none
}
.scroll .desc{
    display:none
}
.word-profile p{
    text-align:center;
    position:relative
}
.word-profile a{
    z-index:9 !important
}
.word-profile{
    height:100%
}
.word-profile img{
    width:50%;
    margin:auto;
    display:block;
    top:10%;
    position:relative;
    height:65%
}
.move-item{
    height:800px;
    width:100%;
    position:absolute
}
section{
    display:block;
    position:relative;
    width:100%;
    height:100vh;
    border-bottom:5px solid #444
}
section .bg-panel{
    display:block;
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    background-size:100%;
    background-size:cover
}
section .zone{
    position:relative;
    z-index:1;
    height:100%
}
section .image{
    display:block;
    width:40%;
    height:100%;
    position:absolute;
    top:0
}
section.alt .zone .region{
    float:left;
    display:block;
    width:65%;
    height:100%
}
section.alt .image{
    float:right;
    right:0
}
section.alt #scroll{
    background:url("../img/scroll-hor.png") no-repeat left center;
    background-size:contain
}
section.credits{
    background-image:url(../img/home-bg.png?v0.3);
    background-size:cover
}
section.origin img{
    max-width:400px;
    display:block;
    margin:auto;
    margin-bottom:2em
}
section.origin{
    background-color:#f5f3ed
}
section.intro{
    background-image:url(../img/home-bg.png?v0.3);
    background-size:cover
}
section.intro .third{
    background-image:url(../img/characters-02.svg);
    background-size:cover
}
section.intro .second{
    background-image:url(../img/characters-01.svg);
    background-size:cover
}
section.xin .zone .region{
    float:right;
    display:block;
    width:65%;
    margin-right:0;
    height:100%
}
section.xin{
    background-image:url(../img/xin-02.png), linear-gradient(#fff, #fee95d);
    background-size:contain;
    background-repeat:no-repeat;
    background-position:center bottom
}
section.xin .bg-panel{
    background-image:url(../img/xin-01.png);
    background-size:contain;
    background-position:center top;
    background-repeat:no-repeat
}
section.sen .second{
    background-image:url(../img/sen-02.png);
    background-size:20%;
    background-repeat:no-repeat;
    background-position:75% 5%
}
section.sen .third{
    background:#f6f5e8 url(../img/sen-01.png);
    background-size:cover;
    background-position:center top;
    background-repeat:no-repeat
}
section.miao{
    background:linear-gradient(#e9e9e9, #2574b7);
    background:-webkit-gradient(linear, left 35%, left bottom, from(#e9e9e9), to(#2574b7))
}
section.miao .third{
    background-image:url(../img/miao-01.png);
    background-size:20%;
    background-position:5% 90%;
    background-repeat:no-repeat
}
section.miao .second{
    background-image:url(../img/miao-02.png);
    background-size:30%;
    background-position:left 30%;
    background-repeat:no-repeat
}
section.miao .zone .region{
    float:right;
    display:block;
    width:65%;
    margin-right:0;
    height:100%
}
section.yan .bg-panel{
    background-image:url(../img/yan-01.png), linear-gradient(#fff, #ecc344);
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center bottom
}
section.yao .bg-panel{
    background-image:url(../img/yao-01.png), linear-gradient(#fff, #f0e1c8);
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center bottom
}
section.yao .zone .region{
    float:right;
    display:block;
    width:65%;
    margin-right:0;
    height:100%
}
section.origin .third{
    background-image:url(../img/);
    background-size:cover
}
section.origin .second{
    background-image:url(../img/origin-01.png);
    background-size:contain
}
.cta-wrapper{
    max-width:300px;
    margin:auto
}
.video-thumbnail img{
    width:100%;
    border:5px solid white;
    -webkit-box-shadow:-1px 4px 5px 0px rgba(0,0,0,0.13);
    -moz-box-shadow:-1px 4px 5px 0px rgba(0,0,0,0.13);
    box-shadow:-1px 4px 5px 0px rgba(0,0,0,0.13)
}
#open-video{
    cursor:pointer
}
.cta-wrapper{
    margin-top:5em
}
.cta-play-button-wrapper{
    position:relative;
    margin-right: .75rem;
    top:0px;
    left:0px;
    width:50px;
    height:50px;
    cursor:pointer;
    margin:auto;
    margin-bottom:-36%
}

.cta-play-button-wrapper svg{
    z-index:2;
    position:absolute;
    top:15px;
    left:18px;
    width:20px;
    height:20px;
    fill:tomato
}
.video-cta-circle{
    position:absolute;
    width:100%;
    height:100%;
    border-radius:50%;
    background:#f1f1f1;
    -webkit-transform:scale(1);
    transform:scale(1);
    transition:-webkit-transform .4s ease-in-out;
    transition:transform .4s ease-in-out;
    transition:transform .4s ease-in-out, -webkit-transform .4s ease-in-out
}
.overlay{
    position:fixed;
    width:100%;
    height:100%;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index:10000000;
    opacity:0;
    visibility:hidden;
    flex-direction:column;
    display:flex;
    justify-content:center;
    align-items:center;
    background:#000;
    color:#222;
    transition:opacity .2s ease-in
}
.openVideo .overlay{
    visibility:visible;
    opacity:1
}
.openVideo.openVideo .video-cta-circle{
    -webkit-transform:scale(14);
    transform:scale(14)
}
.media{
    max-width:800px;
    width:100%;
    height:100%
}
.media__video{
    position:relative;
    padding-bottom:56.25%;
    padding-top:30px;
    height:0;
    width:100%;
    overflow:hidden;
    top:25%
}
.media__video iframe, .media__video object, .media__video embed{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%
}
.stop-scrolling{
    height:100%;
    overflow:hidden
}
#close-video{
    width:20px;
    height:20px;
    position:absolute;
    right:20px;
    top:20px;
    cursor:pointer;
    fill:white
}
@keyframes slideUp{
    0%{
        transform:translateY(0);
        -ms-transform:translateY(0);
        -webkit-transform:translateY(0);
        -moz-transform:translateY(0)
    }
    50%{
        transform:translateY(-5%);
        -ms-transform:translateY(-5%);
        -webkit-transform:translateY(-5%);
        -moz-transform:translateY(-5%)
    }
}
@keyframes slideDown{
    0%{
        transform:translateY(0);
        -ms-transform:translateY(0);
        -webkit-transform:translateY(0);
        -moz-transform:translateY(0)
    }
    50%{
        transform:translateY(10%);
        -ms-transform:translateY(10%);
        -webkit-transform:translateY(10%);
        -moz-transform:translateY(10%)
    }
}
.animate-slide-up{
    animation:slideUp 15s infinite ease-in-out;
    -webkit-animation:slideUp 15s infinite ease-in-out;
    -ms-animation:slideUp 15s infinite ease-in-out
}
.animate-slide-down{
    animation:slideDown 10s infinite ease-in-out;
    -webkit-animation:slideDown 10s infinite ease-in-out;
    -ms-animation:slideDown 10s infinite ease-in-out
}
.animate-float-up{
    animation:slideUp 8s infinite ease-in-out;
    -webkit-animation:slideUp 8s infinite ease-in-out;
    -ms-animation:slideUp 8s infinite ease-in-out
}
#fp-nav{
    *background:rgba(0, 0, 0, 0.1);
    border-radius:3px
}
#fp-nav ul li, .fp-slidesNav ul li{
    width:16px;
    height:16px;
    margin:9px
}
#fp-nav ul li .fp-tooltip{
    color:#E71D36;
    font-weight:bold
}
#fp-nav ul li a span, .fp-slidesNav ul li a span{
    background:white;
    border:1px solid #E71D36
}
#fp-nav ul li a.active span, .fp-slidesNav ul li a.active span{
    background:#E71D36
}
#fp-nav ul li .fp-tooltip{
    top:0
}
a#nextSlide{
    position:fixed;
    z-index:999;
    bottom:2rem;
    right:48.5%;
    display:block;
    overflow:hidden;
    font-size: .85em;
    color:white;
    font-family:"Open Sans",Arial,sans-serif;
    text-decoration:none;
    text-align:center;
    background:rgba(0, 0, 0, 0.25);
    border-radius:32px;
    transition:opacity 0.25s linear
}
a#nextSlide i{
    font-size:3rem;
    height:3rem;
    width:3rem;
    line-height:3rem;
    cursor:pointer
}
a#nextSlide:hover,a#nextSlide:focus{
    -webkit-animation:bounce 2s infinite;
    animation:bounce 2s infinite
}
body.fp-viewing-7 a#nextSlide{
    opacity:0
}
#credits{
    text-align:center
}
#credits p{
    margin-bottom:5px;
    display:block;
    font-size:14px
}
@media screen and (max-width: 1023px){
    p{
        font-size:14px
    }
    a#nextSlide{
        right:46%
    }
    .fp-tableCell{
        vertical-align:middle
    }
    .word-profile p{
        margin-bottom:0 !important
    }
    .word-profile img{
        width:22%
    }
    #scroll .desc{
        position:relative;
        width:100%;
        padding:0.5em 2em 1em 3em;
        margin-left:0
    }
    #scroll{
        background:transparent !important
    }
    section .image, section .zone{
        height:auto
    }
    section .zone .region{
        width:100% !important;
        position:relative
    }
    section .image{
        width:100% !important;
        position:relative
    }
    section.intro{
        *background-size:contain;
        *background-position:bottom center;
        background-repeat:no-repeat
    }
    section.intro .third{
        display:none
    }
    section.intro .second{
        background-size:contain;
        background-position:top center;
        background-repeat:no-repeat
    }
    .cta-wrapper{
        margin-bottom:1em
    }
        .cta-play-button-wrapper:hover .video-cta-circle{
    -webkit-transform:scale(1.2);
    transform:scale(1.2)
}
}
@media screen and (max-width: 767px){
    #introduction #zbsg{
        max-width:100px
    }
    #instruction{
        margin-top:-2em
    }
    #hand-animation p{
        margin-left:-7em;
        background-color:rgba(255,255,255,0.7);
        padding:0 0 0 0.5em
    }
    a#nextSlide{
        background:transparent;
        bottom:0
    }
    #introduction #title{
        max-width:250px
    }
    .cta-wrapper{
        max-width:220px;
        margin-top:2.5em
    }
    #introduction button{
        margin:1.5em auto
    }
    a#nextSlide i{
        font-size:2rem;
        height:2rem;
        width:2rem;
        line-height:2rem;
        cursor:pointer
    }
    section .image{
        margin-top:-1em
    }
    #credits span, .copyright span{
        display:block
    }
    section.origin .container{
        padding:0.5em 3em 1em 4em
    }
    section.origin h2{
        margin:0.5em 0
    }
    #fp-nav.left{
        left:0 !important
    }
    .word-profile img, .word-profile p{
        display:inline-block
    }
    .word-profile{
        text-align:left;
        margin-top:1em;
        padding:0 2em 0.5em 2em
    }
    .word-profile p{
        vertical-align:bottom;
        padding-bottom:1em;
    }
}

@media screen and (max-width: 767px) and (orientation:portrait){
#scroll .desc iframe {
    min-height: 180px !important;}
}


@media screen and (max-width: 767px) and (orientation:landscape){
    #scroll .desc iframe{
        max-width: 400px !important;
     }
    #introduction #zbsg{margin:2em;} 
    #introduction #title {
    max-width: 180px;
    margin-top: -5em;}
    .word-profile img {
    width: 12%;
    }
    section.origin img {
    max-width: 200px;}
}

@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation:portrait){
    a#nextSlide{
        right:46%
    }
    #scroll .desc{
        position:relative;
        width:80%;
        padding:1em 2em;
        display:block;
        margin:auto
    }
    .intro .container{
        margin-top:20%
    }
    #introduction #title{
        *max-width:250px
    }
    #introduction p{
        width:80%;
        margin:auto
    }
    #hand-animation p{
        width:auto;
        margin-left:-6em
    }
    .cta-wrapper{
        max-width:400px;
        margin-top:7em;
        margin-bottom:2em
    }
        #scroll .desc iframe{
        max-width: 400px !important;
     }
}
@media screen and (min-device-width: 768px) and (max-device-width: 1365px) and (orientation:landscape){
    #introduction #title{
        max-width:280px
    }
    #introduction button{
        margin:1.5em auto;
        z-index:10000
    }
}
@media screen and (min-device-width: 768px) and (max-device-width: 1365px) and (orientation:landscape){
    #scroll{
        background:url(../img/scroll.png) no-repeat 0;
        background-size:155%
    }
    section.alt #scroll{
        background:url("../img/scroll-hor.png") no-repeat 100% center;
        background-size:155%
    }
    section.alt #scroll .desc{
        left:12% !important
    }
    #scroll .desc{
        left:25% !important
    }
    .word-profile img{
        width:60%
    }
      #scroll .desc iframe{
        min-height: 200px;
        max-width: 350px !important;
     }

}
@media screen and (min-width: 1024px) and (max-width: 1366px) and (orientation:portrait){
    section .zone .region{
        width:100% !important;
        position:relative
    }
    section .image{
        width:100%;
        position:relative;
        height:auto;
        margin-top:15%
    }
    .word-profile img{
        width:35%
    }
    section.alt #scroll{
        background-position:left 0;
        background-size:95%
    }
    #scroll{
        background-position:right 0;
        background-size:95%
    }
    #scroll .desc{
        width:75%;
        top:4% !important
    }
    .fp-tableCell{
        display:table-cell;
        vertical-align:top
    }
    .cta-wrapper{
        max-width:350px;
        margin-top:8em
    }

      #scroll .desc iframe{
        min-height: 200px;
        max-width: 320px !important;
     }
}
@media screen and (min-width: 1024px){
    #scroll .desc{
        text-align:left;
        color:#000;
        width:65%;
        left:15%;
        top:18%;
        position:absolute
    }
    #introduction span{
        display:block
    }

    #scroll .desc iframe{max-width: 450px;}

}
@media (min-width: 1366px) and (max-width: 1600px){
    #introduction #title{
        max-width:300px
    }
    #introduction .cube{
        margin:1.2em auto
    }
    #introduction button{
        margin:1em auto
    }

    #scroll .desc iframe{max-width: 300px; min-height: 170px;}
}
@media (max-width: 1365px){
    a#nextSlide{
        background:transparent;
        bottom:0.2rem
    }
    section.origin .container{
        width:80%;
        padding:1em 2em
    }
    .origin .fp-tableCell, #credits .fp-tableCell{
        vertical-align:middle
    }
}
@media (max-width: 1500px){
    #hand-animation p{
        background-color:rgba(255,255,255,0.7)
    }
}
@media (min-width: 1500px){
    p{
        line-height:1.8;
        font-size:17px
    }
    .cta-wrapper{
        max-width:460px !important;
        margin-top:10em
    }
}
@media (min-height: 1024px) and (max-width: 1366px) and (orientation:landscape){
    #scroll .desc{
        top:32% !important
    }
     #scroll .desc iframe{
        min-height: 150px;
        max-width: 300px;
     }

}
@media (min-height: 900px) and (max-width: 1440px) and (orientation:landscape){
    #scroll .desc{
        top:28%
    }
}
/* @media (max-height: 550px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 2){
     body .rotate-screen{
        display:block
    }
}
 @media (min-width: 768px) and (max-width: 1366px) and (max-height: 600px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 2){
     body .rotate-screen{
        display:block;
    }
}
 */
 @media (max-width: 812px){
    p{
        font-size:14px;
        *line-height:20px
    }
}
 @media (max-width: 812px) and (orientation: landscape){
    /* body .rotate-screen{
        display:block
    }
     */
     .outer-container{
        margin-top:1em !important
    }
}
 .rotate-screen #wrap{
    top:35%;
    position:fixed;
    width:100%
}
.rotate-screen img{
    width:25%;
    margin:auto
}
.rotate-screen p{
    color:#fff;
    padding-top:15px;
    margin:0 6em
}
.txt-center{
    text-align:center
}
.rotate-screen svg#rotate{
    width:80px;
    height:80px
}
.rotate-screen{
    z-index:1000000000 !important;
    display:none;
    z-index:8;
    background-color:rgba(0,0,0,1);
    width:100vw;
    height:100vh;
    position:fixed;
    top:0;
    left:0;
    padding-top:16%
}
@media screen and (max-width: 1365px){
    .scroll{
        display:block
    }
    .scroll .desc{
        display:block
    }
}