@charset "UTF-8";
html {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

body {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    background: #000000;
    line-height: 1.4;
}

/*@font-face {*/
/*font-family: 'yueyuan';*/
/*src: url('../fonts/yueyuan.ttf');*/
/*}*/

/*主要*/

#loader {
    z-index: 2000;
}

#sloganBlack {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -351px;
    margin-top: -134px;
    background: url(../images/page1/slogan.png) center no-repeat;
    height: 82px;
    width: 703px
}

#header {
    display: none;
}

.page2, .page3, .page4, .page5, .page6, .page7, .page8, .page9 {
    display: none;
}

#container {
    display: none;
    width: 100%;
    height: 100%;
}

#container .section {
    text-align: center;
    font-size: 0.18rem;
    color: #fff;
}

#container .section.page1 {
    width: 100%;
    height: 100%;
}

#container .section .down {
    position: absolute;
    bottom: 12px;
    left: 50%;
    margin-left: -17.5px;
    z-index: 3;
    width: 35px;
    height: 20px;
    background: url("../images/page1/downb.png");
    -webkit-background-size: cover;
    background-size: cover;
}

#container .section .down.b {
    width: 27px;
    height: 16px;
    margin-left: -13.5px;
    background: url("../images/page1/downb.png");
}

#container .page8.section .down {
    display: none;
}

#container .page8.active.section .down {
    display: block;
}

.covervid-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#bg1-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 100% !important;
    width: auto !important;
}

#container .section .title {
    position: absolute;
    margin-top: 0.5rem;
    width: 100%;
    height: 0.84rem;
    position: absolute;
    top: 0;
    left: 0;
    text-align: center;
}

#container .section .title img {
    width: 35%;
    display: inline-block;
}

#container .section.page1 .slide {
    float: left;
    width: 100%;
    height: 100%;
    position: relative;
}

#container .section.page1 .wave{
    background-image: url(../images/page1/wave.png);
    width: 100%;
    height: 180px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    bottom: 0;
}

#container .section.page6 .wave_top{
    background-image: url(../images/page6/wave_top.png);
    width: 100%;
    height: 180px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: 0;
}
#container .section.page6 .wave_bottom{
    background-image: url(../images/page6/wave_bottom.png);
    width: 100%;
    height: 180px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    bottom: 0;
}

#container .section.page8 .wave{
    background-image: url(../images/page8/wave.png);
    width: 100%;
    height: 180px;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    top: -5px;
    z-index: 999;
}

#container .section.page1 .slide .sd1, #container .section.page1 .slide .sd2, #container .section.page1 .slide .sd3 {
    position: absolute;
    margin-top: -1.75rem;
    z-index: 2;
}

#container .page1 .slide1 {
    /*-webkit-background-image: url(../images/page1/bg1.jpg);*/
    /*-moz-background-image: url(../images/page1/bg1.jpg);*/
    /*-o-background-image: url(../images/page1/bg1.jpg);*/
    /*background-image: url(../images/page1/bg1.jpg);*/
    /*-webkit-background-size: cover;*/
    /*-moz-background-size: cover;*/
    /*-o-background-size: cover;*/
    /*background-size: cover;*/
    /*background-position: center;*/
}

#container .page1 .slide .shadow {
    margin: 0;
    padding: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url("../images/page1/shadow.png") repeat;
    opacity: 0.6;

}

.page1 .slide1 .sd1 {
    /*background-color: #e60044;*/
    width: 100%;
    height: 3.5rem;
    text-align: center;
    margin: 0 auto;
    top: 50%;
    /*font-family: 'yueyuan';*/

}

.page1.active .slide1.active .sd1 {
    -webkit-animation: zoomIn .5s linear;
    -moz-animation: zoomIn .5s linear;
    -o-animation: zoomIn .5s linear;
    animation: zoomIn .5s linear;
}

.page1 .slide1 .sd1 .word0 {
    top: -1rem;
    position: absolute;
    width: 100%;

    /*font-family: Impact;*/
}

.page1 .slide1 .sd1 .word0 > div {
    width: 1.8rem;
    height: 1.8rem;

    margin: 0 auto 0;
    text-align: center;
}

.page1 .slide1 .sd1 .word0 .word0_logow {
    width: 2.37rem;
    height: 0.95rem;
    display: block;
    margin: 0.25rem auto 0;
    text-align: center;
}

.page1 .slide1 .sd1 .word0 > div > img {
    float: left;
    width: 0.6rem;
    opacity: 0;
    /*-webkit-transform: rotate3d(0, 0, 1, 270deg);*/
    /*transform: rotate3d(0, 0, 1, 270deg);*/
}

.page1.active .slide1.active .sd1 .word0 > div > img {
    -webkit-animation: logolist 0.8s 0.5s forwards;
    -o-animation: logolist 0.8s 0.5s forwards;
    animation: logolist 0.4s 0.5s forwards;
}

.page1.active .slide1.active .sd1 .word0 > div > img:nth-child(1) {
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
}

.page1.active .slide1.active .sd1 .word0 > div > img:nth-child(2) {
    -webkit-animation-delay: 0.7s;
    animation-delay: 0.7s;
}

.page1.active .slide1.active .sd1 .word0 > div > img:nth-child(3) {
    -webkit-animation-delay: 0.8s;
    animation-delay: 0.8s;
}

.page1.active .slide1.active .sd1 .word0 > div > img:nth-child(4) {
    -webkit-animation-delay: 0.9s;
    animation-delay: 0.9s;
}

.page1.active .slide1.active .sd1 .word0 > div > img:nth-child(5) {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

.page1.active .slide1.active .sd1 .word0 > div > img:nth-child(6) {
    -webkit-animation-delay: 1.1s;
    animation-delay: 1.1s;
}

.page1.active .slide1.active .sd1 .word0 > div > img:nth-child(7) {
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
}

.page1.active .slide1.active .sd1 .word0 > div > img:nth-child(8) {
    -webkit-animation-delay: 1.3s;
    animation-delay: 1.3s;
}

.page1.active .slide1.active .sd1 .word0 > div > img:nth-child(9) {
    -webkit-animation-delay: 1.4s;
    animation-delay: 1.4s;
}

@keyframes logolist {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0px, 200px, 0px) rotate3d(0, 0, 1, 00deg);
        transform: translate3d(0px, 200px, 0px) rotate3d(0, 0, 1, 00deg);
    }
    to {
        opacity: 1;
        -webkit-transform: translate3d(0px, 0px, 0px) rotate3d(0, 0, 1, 0deg);
        transform: translate3d(0px, 0px, 0px) rotate3d(0, 0, 1, 0deg);
    }
}

@-webkit-keyframes logolist {
    from {
        opacity: 0;
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
    }
    to {
        opacity: 1;
        -webkit-transform: rotate3d(0, 0, 1, 0deg);
        transform: rotate3d(0, 0, 1, 0deg);
    }
}

.page1.active .slide1.active .sd1 .word0 {
    opacity: 0;
    -webkit-animation: bounceIn .8s linear 0.5s forwards;
    -moz-animation: bounceIn .8s linear 0.5s forwards;
    -o-animation: bounceIn .8s linear 0.5s forwards;
    animation: bounceIn .8s linear 0.5s forwards;
}

.page1 .slide1 .sd1 .word2 {
    margin: 0 auto;
    /* top: 3.2rem; */
    top: 2.2rem;
    position: relative;
    font-size: 0.68rem;
}

.page1.active .slide1.active .sd1 .word2 {
    opacity: 0;
    -webkit-animation: zoomIn .8s linear 0.5s forwards;
    -moz-animation: zoomIn .8s linear 0.5s forwards;
    -o-animation: zoomIn .8s linear 0.5s forwards;
    animation: zoomIn .8s linear 0.5s forwards;
}

.page1 .slide1 .sd1 .word2 img {
    display: inline-block;
    width: 67%;
}

.page1 .slide1 .sd1 .word3 {
    margin: 0 auto;
    top: 2.5rem;
    position: relative;
    font-size: 0.17rem;
    letter-spacing: 20px;
}

.page1.active .slide1.active .sd1 .word3 {
    opacity: 0;
    -webkit-animation: fadeInRight .8s linear 0.5s forwards;
    -moz-animation: fadeInRight .8s linear 0.5s forwards;
    -o-animation: fadeInRight .8s linear 0.5s forwards;
    animation: fadeInRight .8s linear 0.5s forwards;
}

#container .page1 .slide2 {
    /*display: none;*/
    /*-webkit-background-image: url(../images/page1/bg2.jpg);*/
    /*-moz-background-image: url(../images/page1/bg2.jpg);*/
    /*-o-background-image: url(../images/page1/bg2.jpg);*/
    /*background-image: url(../images/page1/bg2.jpg);*/
    /*-webkit-background-size: cover;*/
    /*-moz-background-size: cover;*/
    /*-o-background-size: cover;*/
    /*background-size: cover;*/
    /*background-position: center;*/
}

.page1 .slide2 .sd2 {
    width: 10.64rem;
    height: 3.5rem;
    text-align: center;
    margin: 0 auto;
    top: 50%;
    left: 50%;
    margin-left: -5.32rem;
}

.page1 .slide2 .sd2 .word1 {
    -webkit-background-image: url(../images/page1/word2-1.png);
    -moz-background-image: url(../images/page1/word2-1.png);
    -o-background-image: url(../images/page1/word2-1.png);
    background-image: url(../images/page1/word2-1.png);
    width: 7.02rem;
    height: 2.48rem;
    margin: 0 auto;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.page1.active .slide2.active .sd2 .word1 {
    -webkit-opacity: 0;
    opacity: 0;
    -webkit-animation: myroate .8s linear forwards;
    -moz-animation: myroate .8s linear forwards;
    -o-animation: myroate .8s linear forwards;
    animation: myroate .8s linear forwards;
}

@keyframes myroate {
    0% {
        -webkit-transform-origin: center;
        -ms-transform-origin: center;
        transform-origin: center;
        -webkit-transform: scale3d(0, 0, 0) rotate3d(0, 0, 1, -200deg);
        -ms-transform: scale3d(0, 0, 0) rotate3d(0, 0, 1, -200deg);
        transform: scale3d(0, 0, 0) rotate3d(0, 0, 1, -200deg);
        opacity: 0
    }
    100% {
        -webkit-transform-origin: center;
        -ms-transform-origin: center;
        transform-origin: center;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        opacity: 1
    }
}

@-webkit-keyframes myroate {
    0% {
        -webkit-transform-origin: center;
        -ms-transform-origin: center;
        transform-origin: center;
        -webkit-transform: scale3d(0, 0, 0) rotate3d(0, 0, 1, -200deg);
        -ms-transform: scale3d(0, 0, 0) rotate3d(0, 0, 1, -200deg);
        transform: scale3d(0, 0, 0) rotate3d(0, 0, 1, -200deg);
        opacity: 0
    }
    100% {
        -webkit-transform-origin: center;
        -ms-transform-origin: center;
        transform-origin: center;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
        opacity: 1
    }
}

.page1 .slide2 .sd2 .word2 {
    color: #fff;
    font-size: 0.4rem;
    margin-top: -2rem;
    margin-left: 5rem;
}

.page1.active .slide2.active .sd2 .word2 {
    opacity: 0;
    -webkit-animation: fadeInDown .8s linear 0.8s forwards;
    -moz-animation: fadeInDown .8s linear 0.8s forwards;
    -o-animation: fadeInDown .8s linear 0.8s forwards;
    animation: fadeInDown .8s linear 0.8s forwards;
}

.page1 .slide2 .sd2 .words_add {
    font-size: 0.5rem;
    margin-top: -0.1rem;
    position: absolute;
    margin-left: -0.14rem;
}

.page1.active .slide.active .words_add {
    -webkit-animation: rubberBand .8s linear 1.7s 2 forwards;
    -moz-animation: rubberBand .8s linear 1.7s 2 forwards;
    -o-animation: rubberBand .8s linear 1.7s 2 forwards;
    animation: rubberBand .8s linear 1.7s 2 forwards;
}

.page1 .slide2 .sd2 .word3 {
    color: #fff;
    font-size: 0.3rem;
    font-weight: 400;
    letter-spacing: 0.18rem;
    margin-left: 3.7rem;
    margin-top: 1.5rem;
}

.page1.active .slide2.active .sd2 .word3 {
    opacity: 0;
    -webkit-animation: fadeInUp .8s linear 0.8s forwards;
    -moz-animation: fadeInUp .8s linear 0.8s forwards;
    -o-animation: fadeInUp .8s linear 0.8s forwards;
    animation: fadeInUp .8s linear 0.8s forwards;
}

#container .page1 .slide3 {
    /*-webkit-background-image: url(../images/page1/bg3.jpg);*/
    /*-moz-background-image: url(../images/page1/bg3.jpg);*/
    /*-o-background-image: url(../images/page1/bg3.jpg);*/
    /*background-image: url(../images/page1/bg3.jpg);*/
    /*-webkit-background-size: cover;*/
    /*-moz-background-size: cover;*/
    /*-o-background-size: cover;*/
    /*background-size: cover;*/
    /*background-position: center;*/
}

.page1 .slide3 .sd3 {
    width: 10.64rem;
    height: 3.5rem;
    text-align: center;
    margin: 0 auto;
    top: 50%;
    left: 50%;
    margin-left: -5.32rem;
}

.page1 .slide3 .sd3 .word1 {
    -webkit-background-image: url(../images/page1/word3-1.png);
    -moz-background-image: url(../images/page1/word3-1.png);
    -o-background-image: url(../images/page1/word3-1.png);
    background-image: url(../images/page1/word3-1.png);
    width: 6.46rem;
    height: 2.46rem;
    margin: 0 auto;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.page1.active .slide3.active .sd3 .word1 {
    -webkit-opacity: 0;
    opacity: 0;
    -webkit-animation: myroate .8s linear forwards;
    -moz-animation: myroate .8s linear forwards;
    -o-animation: myroate .8s linear forwards;
    animation: myroate .8s linear forwards;
}

.page1 .slide3 .sd3 .word2 {
    color: #fff;
    font-size: 0.4rem;
    font-weight: 200;
    margin-top: -1.74rem;
    margin-left: 4.27rem;
    letter-spacing: 0.08rem;
}

.page1.active .slide3.active .sd3 .word2 {
    opacity: 0;
    -webkit-animation: fadeInDown .8s linear 0.8s forwards;
    -moz-animation: fadeInDown .8s linear 0.8s forwards;
    -o-animation: fadeInDown .8s linear 0.8s forwards;
    animation: fadeInDown .8s linear 0.8s forwards;
}

.page1 .slide3 .sd3 .word2 .words_add {
    font-size: 0.6rem;
    margin-top: -0.2rem;
    position: absolute;
    margin-left: 0rem;
}

.page1 .slide3 .sd3 .word3 {
    color: #fff;
    font-size: 0.3rem;
    font-weight: 400;
    letter-spacing: 0.08rem;
    margin-left: 3.9rem;
    margin-top: 1.1rem;
}

.page1 .slide3 .sd3 .word3 .words_add {
    font-size: 0.5rem;
    margin-top: -0.2rem;
    position: absolute;
    margin-left: -0.4rem;
}

.page1.active .slide3.active .sd3 .word3 {
    opacity: 0;
    -webkit-animation: fadeInUp .8s linear 0.8s forwards;
    -moz-animation: fadeInUp .8s linear 0.8s forwards;
    -o-animation: fadeInUp .8s linear 0.8s forwards;
    animation: fadeInUp .8s linear 0.8s forwards;
}

.page1 .fp-slidesNav ul li {
    display: inline-block;
    width: 120px;
    height: 7px;
    margin: 1px;
}

.page1 .fp-slidesNav ul li a.active span {
    background-color: #e60044;
}

.page1 .fp-slidesNav ul li a:hover span {
    background-color: #e60044;
}

.page1 .fp-slidesNav ul li a span {
    top: 0;
    left: 0;
    width: 120px;
    height: 7px;
    background: #fff;
    position: absolute;
    z-index: 1;
    transition: all 0.5s;
}

.page1 .fp-slidesNav.bottom {
    bottom: 48px;
}

#container .page2 {
    background: url(../images/page2/bg.jpg) no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center;
}

.page2 .content {
    width: 50%;
    height: 100%;
    background-color: rgba(155, 16, 49, .9);
    float: right;
    -webkit-animation: fadeOutLeft .8s linear forwards;
    -moz-animation: fadeOutLeft .8s linear forwards;
    -o-animation: fadeOutLeft .8s linear forwards;
    animation: fadeOutLeft .8s linear forwards;
}

.page2.active .content {
    opacity: 0;
    -webkit-animation: fadeInLeft .8s linear 0.5s forwards;
    -moz-animation: fadeInLeft .8s linear 0.5s forwards;
    -o-animation: fadeInLeft .8s linear 0.5s forwards;
    animation: fadeInLeft .8s linear 0.5s forwards;
}

.page2 .content .words .layer {
    position: absolute;
}

.page2 .content .words .word {
    position: absolute;
    font-size: 0.3rem;

}

.page2 .content .words {
    margin-top: 2.2rem;
    text-align: left;
    margin-left: 1.5rem;
    letter-spacing: 0.02rem;
    line-height: 0.74rem;
    color: #590015;
    font-weight: bold;
    width: 7.5rem;
    height: 5.94rem;
}

.page2 .content .words li {
    height: 0.8rem;
    width: 100%;
}

.page2 .content .words .word1 .word {
    -webkit-transform: scale3d(0, 0, 0);
    -moz-transform: scale3d(0, 0, 0);
    -ms-transform: scale3d(0, 0, 0);
    transform: scale3d(0, 0, 0);
    top: 3.02rem;
    -webkit-animation: smain1 .6s forwards;
    -moz-animation: smain1 .6s forwards;
    -o-animation: smain1 .6s forwards;
    animation: smain1 .6s forwards;
}

.page2.active .content .words .word1 .word {
    -webkit-animation: big1 .6s 1.5s ease-out forwards;
    -moz-animation: big1 .6s 1.5s ease-out forwards;
    -o-animation: sbig1 .6s 1.5s ease-out forwards;
    animation: big1 .6s 1.5s ease-out forwards;
}

@keyframes big1 {
    0% {
        -webkit-transform: scale3d(0, 0, 0);
        -moz-transform: scale3d(0, 0, 0);
        -o-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0);
        top: 3.02rem;
    }
    80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        -moz-transform: scale3d(1.1, 1.1, 1.1);
        -o-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
        top: 0;
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        -moz-transform: scale3d(1, 1, 1);
        -o-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        top: 0;
    }
}

@-webkit-keyframes big1 {
    0% {
        -webkit-transform: scale3d(0, 0, 0);
        -moz-transform: scale3d(0, 0, 0);
        -o-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0);
        top: 3.02rem;
    }
    80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        -moz-transform: scale3d(1.1, 1.1, 1.1);
        -o-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
        top: 0;
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        -moz-transform: scale3d(1, 1, 1);
        -o-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        top: 0;
    }
}

@keyframes smain1 {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        -moz-transform: scale3d(1, 1, 1);
        -o-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        top: 0;
    }
    to {
        -webkit-transform: scale3d(0, 0, 0);
        -moz-transform: scale3d(0, 0, 0);
        -o-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0);
        top: 3.02rem;
    }
}

@-webkit-keyframes smain1 {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        -moz-transform: scale3d(1, 1, 1);
        -o-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        top: 0;
    }
    to {
        -webkit-transform: scale3d(0, 0, 0);
        -moz-transform: scale3d(0, 0, 0);
        -o-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0);
        top: 3.02rem;
    }
}

.page2 .content .words .word2 .word {
    -webkit-transform: scale3d(0, 0, 0);
    -moz-transform: scale3d(0, 0, 0);
    -o-transform: scale3d(0, 0, 0);
    transform: scale3d(0, 0, 0);
    top: 3.02rem;
    -webkit-animation: smain2 .8s forwards;
    -moz-animation: smain2 .8s forwards;
    -o-animation: smain2 .8s forwards;
    animation: smain2 .8s forwards;

}

.page2.active .content .words .word2 .word {
    -webkit-animation: big2 .6s 1.6s ease-out forwards;
    -moz-animation: big2 .6s 1.6s ease-out forwards;
    -o-animation: big2 .6s 1.6s ease-out forwards;
    animation: big2 .6s 1.6s ease-out forwards;
}

@-webkit-keyframes big2 {
    0% {
        -webkit-transform: scale3d(0, 0, 0);
        -moz-transform: scale3d(0, 0, 0);
        -o-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0);
        top: 3.02rem;
    }
    80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        -moz-transform: scale3d(1.1, 1.1, 1.1);
        -o-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
        top: 0.65rem;
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        -moz-transform: scale3d(1, 1, 1);
        -o-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        top: 0.7rem;
    }
}

@-webkit-keyframes smain2 {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        -moz-transform: scale3d(1, 1, 1);
        -o-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        top: 0.7rem;
    }
    to {
        -webkit-transform: scale3d(0, 0, 0);
        -moz-transform: scale3d(0, 0, 0);
        -o-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0);
        top: 3.02rem;
    }
}

.page2 .content .words .word3 .word {
    -webkit-transform: scale3d(0, 0, 0);
    -moz-transform: scale3d(0, 0, 0);
    -o-transform: scale3d(0, 0, 0);
    transform: scale3d(0, 0, 0);
    top: 3.02rem;
    -webkit-animation: smain3 .6s forwards;
    -moz-animation: smain3 .6s forwards;
    -o-animation: smain3 .6s forwards;
    animation: smain3 .6s forwards;

}

.page2.active .content .words .word3 .word {
    -webkit-animation: big3 .6s 1.8s ease-out forwards;
    -moz-animation: big3 .6s 1.8s ease-out forwards;
    -o-animation: big3 .6s 1.8s ease-out forwards;
    animation: big3 .6s 1.8s ease-out forwards;
}

@-webkit-keyframes big3 {
    0% {
        -webkit-transform: scale3d(0, 0, 0);
        -moz-transform: scale3d(0, 0, 0);
        -o-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0);
        top: 3.02rem;
    }
    80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        -moz-transform: scale3d(1.1, 1.1, 1.1);
        -o-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
        top: 1.42rem;
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        -moz-transform: scale3d(1, 1, 1);
        -o-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        top: 1.52rem;
    }
}

@-webkit-keyframes smain3 {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        -moz-transform: scale3d(1, 1, 1);
        -o-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        top: 1.52rem;
    }
    to {
        -webkit-transform: scale3d(0, 0, 0);
        -moz-transform: scale3d(0, 0, 0);
        -o-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0);
        top: 3.02rem;
    }
}

.page2 .content .words .word4 .word {
    -webkit-transform: scale3d(0, 0, 0);
    -moz-transform: scale3d(0, 0, 0);
    -o-transform: scale3d(0, 0, 0);
    transform: scale3d(0, 0, 0);
    top: 3.02rem;
    -webkit-animation: smain43 .6s forwards;
    -moz-animation: smain43 .6s forwards;
    -o-animation: smain43 .6s forwards;
    animation: smain43 .6s forwards;

}

.page2.active .content .words .word4 .word {
    -webkit-animation: big4 .6s 2s ease-out forwards;
    -moz-animation: big4 .6s 2s ease-out forwards;
    -o-animation: big4 .6s 2s ease-out forwards;
    animation: big4 .6s 2s ease-out forwards;
}

@-webkit-keyframes big4 {
    0% {
        -webkit-transform: scale3d(0, 0, 0);
        -moz-transform: scale3d(0, 0, 0);
        -o-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0);
        top: 3.02rem;
    }
    80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        -moz-transform: scale3d(1.1, 1.1, 1.1);
        -o-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
        top: 2.22rem;
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        -moz-transform: scale3d(1, 1, 1);
        -o-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        top: 2.37rem;
    }
}

@-webkit-keyframes smain4 {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        -moz-transform: scale3d(1, 1, 1);
        -o-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        top: 2.37rem;
    }
    to {
        -webkit-transform: scale3d(0, 0, 0);
        -moz-transform: scale3d(0, 0, 0);
        -o-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0);
        top: 3.02rem;
    }
}

.page2 .content .words .word5 .word {
    -webkit-transform: scale3d(0, 0, 0);
    -moz-transform: scale3d(0, 0, 0);
    -o-transform: scale3d(0, 0, 0);
    transform: scale3d(0, 0, 0);
    top: 3.02rem;
    -webkit-animation: smain5 .6s forwards;
    -moz-animation: smain5 .6s forwards;
    -o-animation: smain5 .6s forwards;
    animation: smain5 .6s forwards;

}

.page2.active .content .words .word5 .word {
    -webkit-animation: big5 .6s 2.2s ease-out forwards;
    -moz-animation: big5 .6s 2.2s ease-out forwards;
    -o-animation: big5 .6s 2.2s ease-out forwards;
    animation: big5 .6s 2.2s ease-out forwards;
}

@-webkit-keyframes big5 {
    0% {
        -webkit-transform: scale3d(0, 0, 0);
        -moz-transform: scale3d(0, 0, 0);
        -o-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0);
        top: 3.02rem;
    }
    80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        -moz-transform: scale3d(1.1, 1.1, 1.1);
        -o-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
        top: 3.02rem;
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        -moz-transform: scale3d(1, 1, 1);
        -o-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        top: 3.22rem;
    }
}

@-webkit-keyframes smain5 {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        -moz-transform: scale3d(1, 1, 1);
        -o-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        top: 3.22rem;
    }
    to {
        -webkit-transform: scale3d(0, 0, 0);
        -moz-transform: scale3d(0, 0, 0);
        -o-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0);
        top: 3.02rem;
    }
}

.page2 .content .words .word6 .word {
    -webkit-transform: scale3d(0, 0, 0);
    -moz-transform: scale3d(0, 0, 0);
    -o-transform: scale3d(0, 0, 0);
    transform: scale3d(0, 0, 0);
    top: 3.02rem;
    -webkit-animation: smain6 .6s forwards;
    -moz-animation: smain6 .6s forwards;
    -o-animation: smain6 .6s forwards;
    animation: smain6 .6s forwards;

}

.page2.active .content .words .word6 .word {
    -webkit-animation: big6 .6s 2s ease-out forwards;
    -moz-animation: big6 .6s 2s ease-out forwards;
    -o-animation: big6 .6s 2s ease-out forwards;
    animation: big6 .6s 2s ease-out forwards;
}

@-webkit-keyframes big6 {
    0% {
        -webkit-transform: scale3d(0, 0, 0);
        -moz-transform: scale3d(0, 0, 0);
        -o-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0);
        top: 3.02rem;
    }
    80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        -moz-transform: scale3d(1.1, 1.1, 1.1);
        -o-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
        top: 3.82rem;
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        -moz-transform: scale3d(1, 1, 1);
        -o-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        top: 4.07rem;
    }
}

@-webkit-keyframes smain6 {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        -moz-transform: scale3d(1, 1, 1);
        -o-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        top: 4.07rem;
    }
    to {
        -webkit-transform: scale3d(0, 0, 0);
        -moz-transform: scale3d(0, 0, 0);
        -o-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0);
        top: 3.02rem;
    }
}

.page2 .content .words .word7 .word {
    -webkit-transform: scale3d(0, 0, 0);
    -moz-transform: scale3d(0, 0, 0);
    -o-transform: scale3d(0, 0, 0);
    transform: scale3d(0, 0, 0);
    top: 3.02rem;
    -webkit-animation: smain7 .6s forwards;
    -moz-animation: smain7 .6s forwards;
    -o-animation: smain7 .6s forwards;
    animation: smain7 .6s forwards;

}

.page2.active .content .words .word7 .word {
    -webkit-animation: big7 .6s 1.8s ease-out forwards;
    -moz-animation: big7 .6s 1.8s ease-out forwards;
    -o-animation: big7 .6s 1.8s ease-out forwards;
    animation: big7 .6s 1.8s ease-out forwards;
}

@-webkit-keyframes big7 {
    0% {
        -webkit-transform: scale3d(0, 0, 0);
        -moz-transform: scale3d(0, 0, 0);
        -o-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0);
        top: 3.02rem;
    }
    80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        -moz-transform: scale3d(1.1, 1.1, 1.1);
        -o-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
        top: 4.62rem;
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        -moz-transform: scale3d(1, 1, 1);
        -o-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        top: 4.92rem;
    }
}

@-webkit-keyframes smain7 {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        -moz-transform: scale3d(1, 1, 1);
        -o-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        top: 4.92rem;
    }
    to {
        -webkit-transform: scale3d(0, 0, 0);
        -moz-transform: scale3d(0, 0, 0);
        -o-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0);
        top: 3.02rem;
    }
}

.page2 .content .words .word8 .word {
    -webkit-transform: scale3d(0, 0, 0);
    -moz-transform: scale3d(0, 0, 0);
    -o-transform: scale3d(0, 0, 0);
    transform: scale3d(0, 0, 0);
    top: 3.02rem;
    -webkit-animation: smain8 .6s forwards;
    -moz-animation: smain8 .6s forwards;
    -o-animation: smain8 .6s forwards;
    animation: smain8 .6s forwards;

}

.page2.active .content .words .word8 .word {
    -webkit-animation: big8 .6s 1.6s ease-out forwards;
    -moz-animation: big8 .6s 1.6s ease-out forwards;
    -o-animation: big8 .6s 1.6s ease-out forwards;
    animation: big8 .6s 1.6s ease-out forwards;
}

@-webkit-keyframes big8 {
    0% {
        -webkit-transform: scale3d(0, 0, 0);
        -moz-transform: scale3d(0, 0, 0);
        -o-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0);
        top: 3.02rem;
    }
    80% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        -moz-transform: scale3d(1.1, 1.1, 1.1);
        -o-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
        top: 5.48rem;
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        -moz-transform: scale3d(1, 1, 1);
        -o-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        top: 5.83rem;
    }
}

@-webkit-keyframes smain8 {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        -moz-transform: scale3d(1, 1, 1);
        -o-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
        top: 5.83rem;
    }
    to {
        -webkit-transform: scale3d(0, 0, 0);
        -moz-transform: scale3d(0, 0, 0);
        -o-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0);
        top: 3.02rem;
    }
}

.page2 .content .words span {
    font-size: 0.38rem;
    margin-left: 0.06rem;
    margin-right: 0.06rem;
    font-weight: bold;
    color: #fff;
}

#container .page3 {
    /*background-image: url(../images/page3/bg.jpg);*/
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center;
}

.shadow {
    margin: 0;
    padding: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /*background:url("../images/page1/bg3video.png");*/
    -webkit-background-size: cover;
    background-size: cover;
    opacity: 0.4;
}

.shadow2 {
    margin: 0;
    padding: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.5;
}

#container .page3 .content {
    width: 100%;
    height: 100%;
    /*width: 10rem;*/
    /*height: 7.68rem;*/
    /*top: 50%;*/
    /*left: 50%;*/
    /*margin-top: -3.3rem;*/
    /*margin-left: -5rem;*/
    position: relative;
    /*display: none;*/
}

#container .page3.active .content {
    /*display: block;*/
}

.page3 .media {
    overflow: hidden;
    /*background-image: url(../images/frame/partner_bg.jpg);*/
    width: 100%;
    height: 100%;
    /*background-position: center center;*/
    position: relative;
    text-align: center;
    line-height: 1499px;
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
}

.page3 .media .nGyroParallax1 {
    position: absolute;
    top: 50% !important;
    left: 50% !important;
    transition: 1s ease-out;
}

.page3 .media .nGyroParallax1 > div {
    width: 100%;
    height: 100%;
}

.page3 .media .nGyroParallax1 .yuan_main {
    /*width: 1.22rem;*/
    /*height: 1.22rem;*/
    position: absolute;
    top: 50%;
    left: 50%;
    /*margin-left: -0.61rem;*/
    /*margin-top: -0.61rem;*/

}

/*.page3 .media #yuan1 .yuan_main {*/
/*width: 75px;*/
/*height:75px;*/
/*margin-left: -32.5px;*/
/*margin-top: -32.5px;*/
/*}*/

/*.page3 .media #yuan3 .yuan_main {*/
/*width: 0.55rem;*/
/*height: 0.55rem;*/
/*margin-left: -0.275rem;*/
/*margin-top: -0.275rem;*/
/*}*/

/*.page3 .media #yuan4 .yuan_main {*/
/*width: 0.48rem;*/
/*height: 0.48rem;*/
/*margin-left: -0.24rem;*/
/*margin-top: -0.24rem;*/
/*}*/

/*.page3 .media #yuan5 .yuan_main {*/
/*width: 0.40rem;*/
/*height: 0.40rem;*/
/*margin-left: -0.20rem;*/
/*margin-top: -0.20rem;*/
/*}*/

.page3 .media #yuan1 img {
    width: 1.0rem;
    min-width: 75px;
    margin-top: -0.5rem;
    margin-left: -0.5rem;
    position: absolute;
    top: 0;
    left: 0;
}

.page3 .media #yuan3 img {
    width: 0.7rem;
    margin-top: -0.35rem;
    margin-left: -0.35rem;;
    position: absolute;
    top: 0;
    left: 0;
}

.page3 .media #yuan4 img {
    width: 0.5rem;
    margin-top: -0.25rem;
    margin-left: -0.25rem;
    position: absolute;
    top: 0;
    left: 0;
}

.page3 .media #yuan5 img {
    width: 0.38rem;
    margin-left: -0.19rem;
    margin-top: -0.19rem;

    position: absolute;
    top: 0;
    left: 0;
}

#tooltip {
    border: 1px solid #fff;
    background: #e60044;
    position: absolute;
    padding: 3px 6px 3px 6px;
    color: #ffffff;
    display: none;
    border-radius: 3px;
    z-index: 50;
    font-size: 14px;

}

.page3 .media #yuan1 > div {
    position: relative;
    margin-left: -1.5rem;
    margin-top: -1.5rem;
    top: 50%;
    left: 50%;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    /*border: 1px dashed #fff;*/
    background: url("../images/page3/yuan1.png") no-repeat center center;
    -webkit-background-size: cover;
    background-size: cover;
}

.page3 .media #yuan2 > div {
    position: relative;
    top: 50%;
    left: 50%;
    margin-left: -1.96rem;
    margin-top: -1.96rem;
    width: 3.92rem;
    height: 3.92rem;
    border-radius: 50%;
    /*border: 1px dashed #fff;*/
    background: url("../images/page3/yuan2.png") no-repeat center center;
    -webkit-background-size: cover;
    background-size: cover;
}

.page3 .media #yuan3 > div {
    position: relative;
    top: 50%;
    left: 50%;
    margin-left: -2.47rem;
    margin-top: -2.47rem;
    width: 4.94rem;
    height: 4.94rem;
    border-radius: 50%;
    /*border: 1px dashed #fff;*/
    background: url("../images/page3/yuan3.png") no-repeat center center;
    -webkit-background-size: cover;
    background-size: cover;
}

.page3 .media #yuan4 > div {
    position: relative;
    top: 50%;
    left: 50%;
    margin-left: -3.11rem;
    margin-top: -3.11rem;
    width: 6.22rem;
    height: 6.22rem;
    border-radius: 50%;
    /*border: 1px dashed #fff;*/
    background: url("../images/page3/yuan4.png") no-repeat center center;
    -webkit-background-size: cover;
    background-size: cover;
}

.page3 .media #yuan5 > div {
    position: relative;
    top: 50%;
    left: 50%;
    margin-left: -3.75rem;
    margin-top: -3.75rem;
    width: 7.50rem;
    height: 7.50rem;
    /*border-radius: 50%;*/
    /*border: 1px dashed #fff;*/
    background: url("../images/page3/yuan5.png") no-repeat center center;
    -webkit-background-size: cover;
    background-size: cover;
}

.page3 .media #yuan1 {
    width: 1.22rem;
    height: 1.22rem;
    top: 50%;
    left: 50%;
    margin-left: -0.61rem;
    margin-top: -0.61rem;
}

.page3 .media #yuan2 {
    width: 1.22rem;
    height: 1.22rem;
    top: 50%;
    left: 50%;
    margin-left: -0.61rem;
    margin-top: -0.61rem;
}

.page3 .media #yuan3 {
    width: 1.22rem;
    height: 1.22rem;
    top: 50%;
    left: 50%;
    margin-left: -0.61rem;
    margin-top: -0.61rem;
}

.page3 .media #yuan4 {
    width: 1.22rem;
    height: 1.22rem;
    top: 50%;
    left: 50%;
    margin-left: -0.61rem;
    margin-top: -0.61rem;
}

.page3 .media #yuan5 {
    position: absolute !important;
    width: 1.22rem;
    height: 1.22rem;
    top: 50%;
    left: 50%;
    margin-left: -0.61rem;
    margin-top: -0.61rem;
}

.page3 .media #yuan1 img, .page3 .media #yuan2 img, .page3 .media #yuan3 img, .page3 .media #yuan4 img, .page3 .media #yuan5 img {
    transform: translate3d(0, 0, 0);
    transition: .5s 0.8s;
    z-index: 40;

}

.page3 .media #yuan1 > div, .page3 .media #yuan2 > div, .page3 .media #yuan3 > div, .page3 .media #yuan4 > div, .page3 .media #yuan5 > div {
    transform: translate3d(0, 0, 0);
    transition: .5s;
}

/*

#container .page3 em {
    position: absolute;
    opacity: 0.6;
    height: 1px;
    width: 1.4rem;
    background-color: #fff;
}

#container .page3 .yuan {
    width: 0.16rem;
    height: 0.16rem;
    border-radius: 50%;
    position: absolute;
    border: 1px solid #fff;
    opacity: 1;
    transition: all 0.4s;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
}

#container .page3 .media.current .yuan {
    background: #fff;
}

#container .page3 .media.current .word {
    background-color: #941130;
    padding: 0.1rem 0.2rem;
    border-radius: 10px;

}

#container .page3 .word {
    position: absolute;
    font-size: 0.36rem;
    letter-spacing: 0.02rem;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    cursor: pointer;
}

#container .page3.active .word {
    -webkit-transform: scale3d(0, 0, 0);
    -moz-transform: scale3d(0, 0, 0);
    -o-transform: scale3d(0, 0, 0);
    transform: scale3d(0, 0, 0);
    -webkit-animation: words1 0.8s 0.6s linear forwards;
    -moz-animation: words1 0.8s 0.6s linear forwards;
    -o-animation: words1 0.8s 0.6s linear forwards;
    animation: words1 0.8s 0.6s linear forwards;
}

@keyframes words1 {
    from {
        -webkit-transform: scale3d(0, 0, 0);
        -moz-transform: scale3d(0, 0, 0);
        -o-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0);
    }
    to {
        -webkit-transform: scale3d(1, 1, 1);
        -moz-transform: scale3d(1, 1, 1);
        -o-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@-webkit-keyframes words1 {
    from {
        -webkit-transform: scale3d(0, 0, 0);
        -moz-transform: scale3d(0, 0, 0);
        -o-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0);
    }
    to {
        -webkit-transform: scale3d(1, 1, 1);
        -moz-transform: scale3d(1, 1, 1);
        -o-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@keyframes words2 {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        -moz-transform: scale3d(1, 1, 1);
        -o-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    to {
        -webkit-transform: scale3d(0, 0, 0);
        -moz-transform: scale3d(0, 0, 0);
        -o-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0);
    }
}
@-webkit-keyframes words2 {
    from {
        -webkit-transform: scale3d(1, 1, 1);
        -moz-transform: scale3d(1, 1, 1);
        -o-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
    to {
        -webkit-transform: scale3d(0, 0, 0);
        -moz-transform: scale3d(0, 0, 0);
        -o-transform: scale3d(0, 0, 0);
        transform: scale3d(0, 0, 0);
    }
}
#container .page3 .icon {
    -webkit-transform-origin: 5.05rem 3.32rem;
    -moz-transform-origin: 5.05rem 3.32rem;
    -o-transform-origin: 5.05rem 3.32rem;
    transform-origin: 5.05rem 3.32rem;
    !*-webkit-transform: scale3d(0, 0, 0) rotate3d(0, 0, 1, 180deg);*!
    !*-moz-transform: scale3d(0, 0, 0) rotate3d(0, 0, 1, 180deg);*!
    !*-o-transform: scale3d(0, 0, 0) rotate3d(0, 0, 1, 180deg);*!
    !*transform: scale3d(0, 0, 0) rotate3d(0, 0, 1, 180deg);*!
    -webkit-animation: meiti1 0.4s linear forwards;
    -moz-animation: meiti1 0.4s linear forwards;
    -o-animation: meiti1 0.4s linear forwards;
    animation: meiti1 0.4s linear forwards;
}

#container .page3.active .media.current .icon {
    -webkit-transform: scale3d(0, 0, 0) rotate3d(0, 0, 1, 180deg);
    -moz-transform: scale3d(0, 0, 0) rotate3d(0, 0, 1, 180deg);
    -o-transform: scale3d(0, 0, 0) rotate3d(0, 0, 1, 180deg);
    transform: scale3d(0, 0, 0) rotate3d(0, 0, 1, 180deg);
    -webkit-animation: meiti2 0.6s 1s linear forwards;
    -moz-animation: meiti2 0.6s 1s linear forwards;
    -o-animation: meiti2 0.6s 1s linear forwards;
    animation: meiti2 0.6s 1s linear forwards;
}
@keyframes meiti1 {
    0% {
        -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 0deg);
        -moz-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 0deg);
        -o-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 0deg);
        transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 0deg);
    }
    20% {
        -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -8deg);
        -moz-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -8deg);
        -o-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -8deg);
        transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -8deg);
    }
    100% {
        -webkit-transform: scale3d(0, 0, 0) rotate3d(0, 0, 1, 180deg);
        -moz-transform: scale3d(0, 0, 0) rotate3d(0, 0, 1, 180deg);
        -o-transform: scale3d(0, 0, 0) rotate3d(0, 0, 1, 180deg);
        transform: scale3d(0, 0, 0) rotate3d(0, 0, 1, 180deg);
    }
}
@-webkit-keyframes meiti1 {
    0% {
        -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 0deg);
        -moz-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 0deg);
        -o-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 0deg);
        transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 0deg);
    }
    20% {
        -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -8deg);
        -moz-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -8deg);
        -o-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -8deg);
        transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, -8deg);
    }
    100% {
        -webkit-transform: scale3d(0, 0, 0) rotate3d(0, 0, 1, 180deg);
        -moz-transform: scale3d(0, 0, 0) rotate3d(0, 0, 1, 180deg);
        -o-transform: scale3d(0, 0, 0) rotate3d(0, 0, 1, 180deg);
        transform: scale3d(0, 0, 0) rotate3d(0, 0, 1, 180deg);
    }
}
@keyframes meiti2 {
    0% {
        -webkit-transform: scale3d(0, 0, 0) rotate3d(0, 0, 1, -360deg);
        -moz-transform: scale3d(0, 0, 0) rotate3d(0, 0, 1, -360deg);
        -o-transform: scale3d(0, 0, 0) rotate3d(0, 0, 1, -360deg);
        transform: scale3d(0, 0, 0) rotate3d(0, 0, 1, -360deg);
    }
    80% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, -8deg);
        -moz-transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, -8deg);
        -o-transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, -8deg);
        transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, -8deg);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 0deg);
        -moz-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 0deg);
        -o-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 0deg);
        transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 0deg);
    }
}
@-webkit-keyframes meiti2 {
    0% {
        -webkit-transform: scale3d(0, 0, 0) rotate3d(0, 0, 1, 180deg);
        -moz-transform: scale3d(0, 0, 0) rotate3d(0, 0, 1, 180deg);
        -o-transform: scale3d(0, 0, 0) rotate3d(0, 0, 1, 180deg);
        transform: scale3d(0, 0, 0) rotate3d(0, 0, 1, 180deg);
    }
    80% {
        -webkit-transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, -8deg);
        -moz-transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, -8deg);
        -o-transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, -8deg);
        transform: scale3d(1.05, 1.05, 1.05) rotate3d(0, 0, 1, -8deg);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 0deg);
        -moz-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 0deg);
        -o-transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 0deg);
        transform: scale3d(1, 1, 1) rotate3d(0, 0, 1, 0deg);
    }
}

#container .page3 .icon .c {
    height: 3rem;
    width: 3rem;
    position: absolute;
    -webkit-transform: scale(0.01);
    -moz-transform: scale(0.01);
    -o-transform: scale(0.01);
    transform: scale(0.01);

}

!*第五屏icon 图片*!
#container .page3 .icon .c img {
    display: block;
    width: 100%;
    height: 100%;
}

#container .page3 .icon .c b{
    !*margin-top: 20px;*!
    text-align: center;
    font-size: 40px;
    color:#ffffff;
    display: none;
    opacity:0;
}

#container .page3 .icon .c:hover b{
    display: block;
    -webkit-animation:swing2 0.8s 0.3s forwards ;
    -o-animation:swing2 0.8s 0.3s forwards ;
    animation:swing2 0.8s 0.3s forwards;
}
@-webkit-keyframes swing2 {
    0% {
        opacity: 0;
        -webkit-transform: translatey(0px) rotate3d(0, 0, 1, 0deg);
        -ms-transform: translatey(0px) rotate3d(0, 0, 1, 0deg);
        transform: translatey(0px) rotate3d(0, 0, 1, 0deg)
    }
    50% {
        opacity:1;
        -webkit-transform: translatey(20px) rotate3d(0, 0, 1, 0deg);
        -ms-transform: translatey(20px) rotate3d(0, 0, 1, 0deg);
        transform: translatey(20px) rotate3d(0, 0, 1, 0deg)
    }
    60% {
        opacity:1;
        -webkit-transform: translatey(20px) rotate3d(0, 0, 1, 15deg);
        -ms-transform: translatey(20px) rotate3d(0, 0, 1, 15deg);
        transform: translatey(20px) rotate3d(0, 0, 1, 15deg)
    }
    70% {
        opacity:1;
        -webkit-transform: translatey(20px)  rotate3d(0, 0, 1, -10deg);
        -ms-transform: translatey(20px) rotate3d(0, 0, 1, -10deg);
        transform: translatey(20px) rotate3d(0, 0, 1, -10deg)
    }
    80% {
        opacity:1;
        -webkit-transform: translatey(20px) rotate3d(0, 0, 1, 5deg);
        -ms-transform: translatey(20px) rotate3d(0, 0, 1, 5deg);
        transform: translatey(20px) rotate3d(0, 0, 1, 5deg)
    }
    90% {
        opacity:1;
        -webkit-transform: translatey(20px) rotate3d(0, 0, 1, -5deg);
        -ms-transform: translatey(20px) rotate3d(0, 0, 1, -5deg);
        transform: translatey(20px) rotate3d(0, 0, 1, -5deg)
    }
    100% {
        opacity:1;
        -webkit-transform: translatey(20px) rotate3d(0, 0, 1, 0deg);
        -ms-transform: translatey(20px) rotate3d(0, 0, 1, 0deg);
        transform: translatey(20px) rotate3d(0, 0, 1, 0deg)
    }
}
@keyframes swing2 {
    0% {
        opacity: 0;
        -webkit-transform: translatey(0px) rotate3d(0, 0, 1, 0deg);
        -ms-transform: translatey(0px) rotate3d(0, 0, 1, 0deg);
        transform: translatey(0px) rotate3d(0, 0, 1, 0deg)
    }
    50% {
        opacity:1;
        -webkit-transform: translatey(20px) rotate3d(0, 0, 1, 0deg);
        -ms-transform: translatey(20px) rotate3d(0, 0, 1, 0deg);
        transform: translatey(20px) rotate3d(0, 0, 1, 0deg)
    }
    60% {
        opacity:1;
        -webkit-transform: translatey(20px) rotate3d(0, 0, 1, 15deg);
        -ms-transform: translatey(20px) rotate3d(0, 0, 1, 15deg);
        transform: translatey(20px) rotate3d(0, 0, 1, 15deg)
    }
    70% {
        opacity:1;
        -webkit-transform: translatey(20px)  rotate3d(0, 0, 1, -10deg);
        -ms-transform: translatey(20px) rotate3d(0, 0, 1, -10deg);
        transform: translatey(20px) rotate3d(0, 0, 1, -10deg)
    }
    80% {
        opacity:1;
        -webkit-transform: translatey(20px) rotate3d(0, 0, 1, 5deg);
        -ms-transform: translatey(20px) rotate3d(0, 0, 1, 5deg);
        transform: translatey(20px) rotate3d(0, 0, 1, 5deg)
    }
    90% {
        opacity:1;
        -webkit-transform: translatey(20px) rotate3d(0, 0, 1, -5deg);
        -ms-transform: translatey(20px) rotate3d(0, 0, 1, -5deg);
        transform: translatey(20px) rotate3d(0, 0, 1, -5deg)
    }
    100% {
        opacity:1;
        -webkit-transform: translatey(20px) rotate3d(0, 0, 1, 0deg);
        -ms-transform: translatey(20px) rotate3d(0, 0, 1, 0deg);
        transform: translatey(20px) rotate3d(0, 0, 1, 0deg)
    }
}

.swing {
    -webkit-transform-origin: top center;
    -ms-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing;
    animation-name: swing
}

#container .page3 .icon .c:hover img{
    opacity:1!important;
    -webkit-animation: shake 0.4s forwards;
    -moz-animation: shake 0.4s forwards;
    -o-animation: shake 0.4s forwards;
    animation: shake 0.4s forwards;
}

#container .page3 .media1 em {
    top: 2.07rem;
    left: -0.07rem;
}

#container .page3 .media1 .yuan {
    top: 1.98rem;
    left: -0.26rem;
}

#container .page3 .media1 .word {
    top: 2.28rem;
    left: -2.32rem;
}

#container .page3 .media1 .icon .c1 {
    -webkit-transform: scale(0.32);
    -moz-transform: scale(0.32);
    -ms-transform: scale(0.32);
    transform: scale(0.32);
    left: 5.91rem;
    top: 2.34rem;

}
#container .page3 .media1 .icon .c1 img{
    opacity: 0.7;
}

#container .page3 .media1 .icon .c2 {
    -webkit-transform: scale(0.25);
    -moz-transform: scale(0.25);
    -ms-transform: scale(0.25);
    transform: scale(0.25);
    left: 3.85rem;
    top: 1.68rem;

}
#container .page3 .media1 .icon .c2 img{
    opacity: 0.6;
}

#container .page3 .media1 .icon .c3 {
    -webkit-transform: scale(0.44);
    -moz-transform: scale(0.44);
    -ms-transform: scale(0.44);
    transform: scale(0.44);
    top: 0.18rem;
    left: 5.43rem;

}
#container .page3 .media1 .icon .c3 img{
    opacity: 0.8;
}

#container .page3 .media1 .icon .c4 {
    -webkit-transform: scale(0.44);
    -moz-transform: scale(0.44);
    -ms-transform: scale(0.44);
    transform: scale(0.44);
    top: 4.3rem;
    left: 3.66rem;

}
#container .page3 .media1 .icon .c4 img{
    opacity: 1;
}
#container .page3 .media1 .icon .c5 {
    -webkit-transform: scale(0.44);
    -moz-transform: scale(0.44);
    -ms-transform: scale(0.44);
    transform: scale(0.44);
    left: 1.86rem;
    top: 2.54rem;

}
#container .page3 .media1 .icon .c5 img{
    opacity: 0.9;
}

#container .page3 .media1 .icon .c6 {
    -webkit-transform: scale(0.54);
    -moz-transform: scale(0.54);
    -ms-transform: scale(0.54);
    transform: scale(0.54);
    top: 0.25rem;
    left: 1.41rem;

}
#container .page3 .media1 .icon .c6 img{
    opacity: 1;
}

#container .page3 .media2 em {
    top: 3.97rem;
    left: 0.42rem;
}

#container .page3 .media2 .yuan {
    top: 3.88rem;
    left: 0.24rem;
}

#container .page3 .media2 .word {
    top: 4.15rem;
    left: -0.44rem;
}

#container .page3 .media2 .icon .c1 {
    -webkit-transform: scale(0.54);
    -moz-transform: scale(0.54);
    -ms-transform: scale(0.54);
    -o-transform: scale(0.54);
    transform: scale(0.54);
    left: 1.3rem;
    top: 0.2rem;
}
#container .page3 .media2 .icon .c1 img{

}
#container .page3 .media2 .icon .c2 {
    -webkit-transform: scale(0.34);
    -moz-transform: scale(0.34);
    -ms-transform: scale(0.34);
    -o-transform: scale(0.34);
    transform: scale(0.34);
    left: 5.9rem;
    top: 2.34rem;

}
#container .page3 .media2 .icon .c2 img{
    opacity: 0.7;
}
#container .page3 .media2 .icon .c3 {
    -webkit-transform: scale(0.38);
    -moz-transform: scale(0.38);
    -ms-transform: scale(0.38);
    -o-transform: scale(0.38);
    transform: scale(0.38);
    top: 0.18rem;
    left: 5.52rem;

}
#container .page3 .media2 .icon .c3 img{
    opacity: 0.8;
}
#container .page3 .media2 .icon .c4 {
    -webkit-transform: scale(0.44);
    -moz-transform: scale(0.44);
    -ms-transform: scale(0.44);
    -o-transform: scale(0.44);
    transform: scale(0.44);
    top: 2.54rem;
    left: 1.84rem;

}
#container .page3 .media2 .icon .c4 img{
    opacity: 0.8;
}

#container .page3 .media2 .icon .c5 {
    -webkit-transform: scale(0.42);
    -moz-transform: scale(0.42);
    -ms-transform: scale(0.42);
    -o-transform: scale(0.42);
    transform: scale(0.42);
    top: 4.3rem;
    left: 3.66rem;

}

#container .page3 .media2 .icon .c5 img{
    opacity: 0.9;
}

#container .page3 .media2 .icon .c6 {
    -webkit-transform: scale(0.26);
    -moz-transform: scale(0.26);
    -ms-transform: scale(0.26);
    -o-transform: scale(0.26);
    transform: scale(0.26);
    top: 1.7rem;
    left: 3.88rem;

}
#container .page3 .media2 .icon .c6 img{
    opacity: 0.7;
}
#container .page3 .media2 .icon .c7 {
    -webkit-transform: scale(0.3);
    -moz-transform: scale(0.3);
    -ms-transform: scale(0.3);
    -o-transform: scale(0.3);
    transform: scale(0.3);
    top: -0.3rem;
    left: 3.48rem;

}
#container .page3 .media2 .icon .c7 img{
    opacity: 1;
}

#container .page3 .media3 em {
    top: 5.82rem;
    left: 1.02rem;
}

#container .page3 .media3 .yuan {
    top: 5.73rem;
    left: 0.84rem;
}

#container .page3 .media3 .word {
    top: 5.98rem;
    left: 0.16rem;
}

#container .page3 .media3 .icon .c1 {
    -webkit-transform: scale(0.4);
    -moz-transform: scale(0.4);
    -ms-transform: scale(0.4);
    -o-transform: scale(0.4);
    transform: scale(0.4);
    left: 1.78rem;
    top: 0.35rem;
}
#container .page3 .media3 .icon .c1 img{

}

#container .page3 .media3 .icon .c2 {
    -webkit-transform: scale(0.28);
    -moz-transform: scale(0.28);
    -ms-transform: scale(0.28);
    -o-transform: scale(0.28);
    transform: scale(0.28);
    left: 1.08rem;
    top: 2.26rem;

}
#container .page3 .media3 .icon .c2 img{
    opacity: 0.9;
}

#container .page3 .media3 .icon .c3 {
    -webkit-transform: scale(0.54);
    -moz-transform: scale(0.54);
    -ms-transform: scale(0.54);
    -o-transform: scale(0.54);
    transform: scale(0.54);
    top: 0.42rem;
    left: 5.4rem;

}

#container .page3 .media3 .icon .c3 img{
    opacity: 1;
}

#container .page3 .media3 .icon .c4 {
    -webkit-transform: scale(0.46);
    -moz-transform: scale(0.46);
    -ms-transform: scale(0.46);
    -o-transform: scale(0.46);
    transform: scale(0.46);
    top: 4.02rem;
    left: 2.13rem;

}
#container .page3 .media3 .icon .c4 img{
    opacity: 0.95;
}

#container .page3 .media3 .icon .c5 {
    -webkit-transform: scale(0.34);
    -moz-transform: scale(0.34);
    -ms-transform: scale(0.34);
    -o-transform: scale(0.34);
    transform: scale(0.34);
    left: 4.75rem;
    top: 4.44rem;
}

#container .page3 .media3 .icon .c5 img{

}

#container .page3 .media3 .icon .c6 {
    -webkit-transform: scale(0.22);
    -moz-transform: scale(0.22);
    -ms-transform: scale(0.22);
    -o-transform: scale(0.22);
    transform: scale(0.22);
    top: 2.14rem;
    left: 3.4rem;

}

#container .page3 .media3 .icon .c6 img{
    opacity: 0.7;
}

#container .page3 .media3 .icon .c7 {
    -webkit-transform: scale(0.46);
    -moz-transform: scale(0.46);
    -ms-transform: scale(0.46);
    -o-transform: scale(0.46);
    transform: scale(0.46);
    left: 5.9rem;
    top: 2.52rem;

}
#container .page3 .media3 .icon .c7 img{
    opacity: 0.75;
}

#container .page3 .media4 em {
    top: 2.07rem;
    left: 9.03rem;
}

#container .page3 .media4 .yuan {
    top: 1.96rem;
    left: 10.44rem;
}

#container .page3 .media4 .word {
    top: 2.28rem;
    right: -1.6rem;
}

#container .page3 .media4 .icon .c1 {
    -webkit-transform: scale(0.54);
    -moz-transform: scale(0.54);
    -ms-transform: scale(0.54);
    -o-transform: scale(0.54);
    transform: scale(0.54);
    left: 1.3rem;
    top: 0.2rem;
}

#container .page3 .media4 .icon .c2 {
    -webkit-transform: scale(0.46);
    -moz-transform: scale(0.46);
    -ms-transform: scale(0.46);
    -o-transform: scale(0.46);
    transform: scale(0.46);
    left: 1.9rem;
    top: 2.56rem;

}
#container .page3 .media4 .icon .c2 img{
    opacity: 0.9;
}

#container .page3 .media4 .icon .c3 {
    -webkit-transform: scale(0.38);
    -moz-transform: scale(0.38);
    -ms-transform: scale(0.38);
    -o-transform: scale(0.38);
    transform: scale(0.38);
    top: 0.18rem;
    left: 5.52rem;

}
#container .page3 .media4 .icon .c3 img{
    opacity: 0.8;
}

#container .page3 .media4 .icon .c4 {
    -webkit-transform: scale(0.2);
    -moz-transform: scale(0.2);
    -ms-transform: scale(0.2);
    -o-transform: scale(0.2);
    transform: scale(0.2);
    top: 4.08rem;
    left: 2.4rem;

}
#container .page3 .media4 .icon .c4 img{
    opacity: 0.5;
}

#container .page3 .media4 .icon .c5 {
    -webkit-transform: scale(0.25);
    -moz-transform: scale(0.25);
    -ms-transform: scale(0.25);
    -o-transform: scale(0.25);
    transform: scale(0.25);
    left: 4.8rem;
    top: 3.88rem;
}
#container .page3 .media4 .icon .c5 img{

}

#container .page3 .media4 .icon .c6 {
    -webkit-transform: scale(0.26);
    -moz-transform: scale(0.26);
    -ms-transform: scale(0.26);
    -o-transform: scale(0.26);
    transform: scale(0.26);
    top: 1.56rem;
    left: 3.88rem;

}

#container .page3 .media4 .icon .c6 img{
    opacity: 0.7;
}

#container .page3 .media4 .icon .c7 {
    -webkit-transform: scale(0.26);
    -moz-transform: scale(0.26);
    -ms-transform: scale(0.26);
    -o-transform: scale(0.26);
    transform: scale(0.26);
    left: 5.96rem;
    top: 2.38rem;

}
#container .page3 .media4 .icon .c7 img{
    opacity: 0.75;
}

#container .page3 .media5 em {
    top: 3.98rem;
    left: 8.54rem;
}

#container .page3 .media5 .yuan {
    top: 3.89rem;
    left: 9.96rem;
}

#container .page3 .media5 .word {
    top: 4.15rem;
    right: -1.6rem;
}

#container .page3 .media5 .icon .c1 {
    -webkit-transform: scale(0.54);
    -moz-transform: scale(0.54);
    -ms-transform: scale(0.54);
    -o-transform: scale(0.54);
    transform: scale(0.54);
    left: 1.26rem;
    top: 0.24rem;
}

#container .page3 .media5 .icon .c2 {
    -webkit-transform: scale(0.52);
    -moz-transform: scale(0.52);
    -ms-transform: scale(0.52);
    -o-transform: scale(0.52);
    transform: scale(0.52);
    left: 1.9rem;
    top: 2.5rem;

}
#container .page3 .media5 .icon .c2 img{
    opacity: 0.9;
}

#container .page3 .media5 .icon .c3 {
    -webkit-transform: scale(0.38);
    -moz-transform: scale(0.38);
    -ms-transform: scale(0.38);
    -o-transform: scale(0.38);
    transform: scale(0.38);
    top: 0.18rem;
    left: 5.48rem;

}
#container .page3 .media5 .icon .c3 img{
    opacity: 0.9;
}

#container .page3 .media5 .icon .c4 {
    -webkit-transform: scale(0.48);
    -moz-transform: scale(0.48);
    -ms-transform: scale(0.48);
    -o-transform: scale(0.48);
    transform: scale(0.48);
    left: 3.66rem;
    top: 4.23rem;
}
#container .page3 .media5 .icon .c4 img{

}

#container .page3 .media5 .icon .c5 {
    -webkit-transform: scale(0.24);
    -moz-transform: scale(0.24);
    -ms-transform: scale(0.24);
    -o-transform: scale(0.24);
    transform: scale(0.24);
    top: 1.68rem;
    left: 3.88rem;

}
#container .page3 .media5 .icon .c5 img{
    opacity: 0.8;
}

#container .page3 .media5 .icon .c6 {
    -webkit-transform: scale(0.32);
    -moz-transform: scale(0.32);
    -ms-transform: scale(0.32);
    -o-transform: scale(0.32);
    transform: scale(0.32);
    left: 5.92rem;
    top: 2.38rem;

}
#container .page3 .media5 .icon .c6 img{
    opacity: 0.9;
}
#container .page3 .media5 .icon .c7 {
    -webkit-transform: scale(0.32);
    -moz-transform: scale(0.32);
    -ms-transform: scale(0.32);
    -o-transform: scale(0.32);
    transform: scale(0.32);
    left: 3.32rem;
    top: -0.3rem;

}
#container .page3 .media5 .icon .c7 img{
    opacity: 0.9;
}

#container .page3 .media6 em {
    top: 5.82rem;
    left: 7.94rem;
}

#container .page3 .media6 .yuan {
    top: 5.73rem;
    left: 9.36rem;
}

#container .page3 .media6 .word {
    top: 5.98rem;
    right: -0.68rem;
}

#container .page3 .media6 .icon .c1 {
    -webkit-transform: scale(0.32);
    -moz-transform: scale(0.32);
    -ms-transform: scale(0.32);
    -o-transform: scale(0.32);
    transform: scale(0.32);
    left: 1.3rem;
    top: 0.42rem;
}

#container .page3 .media6 .icon .c2 {
    -webkit-transform: scale(0.46);
    -moz-transform: scale(0.46);
    -ms-transform: scale(0.46);
    -o-transform: scale(0.46);
    transform: scale(0.46);
    left: 1.9rem;
    top: 2.75rem;

}
#container .page3 .media6 .icon .c2 img{
    opacity: 0.9;
}

#container .page3 .media6 .icon .c3 {
    -webkit-transform: scale(0.38);
    -moz-transform: scale(0.38);
    -ms-transform: scale(0.38);
    -o-transform: scale(0.38);
    transform: scale(0.38);
    top: 0.38rem;
    left: 5.52rem;

}
#container .page3 .media6 .icon .c3 img{
    opacity: 0.9;
}

#container .page3 .media6 .icon .c4 {
    -webkit-transform: scale(0.2);
    -moz-transform: scale(0.2);
    -ms-transform: scale(0.2);
    -o-transform: scale(0.2);
    transform: scale(0.2);
    top: 4.3rem;
    left: 2.4rem;

}
#container .page3 .media6 .icon .c4 img{
    opacity: 0.5;
}

#container .page3 .media6 .icon .c5 {
    -webkit-transform: scale(0.46);
    -moz-transform: scale(0.46);
    -ms-transform: scale(0.46);
    -o-transform: scale(0.46);
    transform: scale(0.46);
    left: 4.8rem;
    top: 4.15rem;
}

#container .page3 .media6 .icon .c6 {
    -webkit-transform: scale(0.54);
    -moz-transform: scale(0.54);
    -ms-transform: scale(0.54);
    -o-transform: scale(0.54);
    transform: scale(0.54);
    top: 1.82rem;
    left: 3.81rem;

}
#container .page3 .media6 .icon .c6 img{
    opacity: 1;
}

#container .page3 .media6 .icon .c7 {
    -webkit-transform: scale(0.26);
    -moz-transform: scale(0.26);
    -ms-transform: scale(0.26);
    -o-transform: scale(0.26);
    transform: scale(0.26);
    left: 5.96rem;
    top: 2.57rem;

}
#container .page3 .media6 .icon .c7 img{
    opacity: 0.9;
}


#container .page3 .media7 .icon .c1 {
    -webkit-transform: scale(0.4);
    -moz-transform: scale(0.4);
    -ms-transform: scale(0.4);
    -o-transform: scale(0.4);
    transform: scale(0.4);
    top: 4.08rem;
    left: 2.54rem;
}
#container .page3 .media7 .icon .c2 {
    -webkit-transform: scale(0.4);
    -moz-transform: scale(0.4);
    -ms-transform: scale(0.4);
    -o-transform: scale(0.4);
    transform: scale(0.4);
    top: 4.08rem;
    left: 4.66rem;
}
#container .page3 .media7 .icon .c3 {
    -webkit-transform: scale(0.4);
    -moz-transform: scale(0.4);
    -ms-transform: scale(0.4);
    -o-transform: scale(0.4);
    transform: scale(0.4);
    top: 2.46rem;
    left: 1.8rem;
}
#container .page3 .media7 .icon .c4 {
    -webkit-transform: scale(0.4);
    -moz-transform: scale(0.4);
    -ms-transform: scale(0.4);
    -o-transform: scale(0.4);
    transform: scale(0.4);
    top: 2.46rem;
    left: 3.61rem;
}
#container .page3 .media7 .icon .c5 {
    -webkit-transform: scale(0.4);
    -moz-transform: scale(0.4);
    -ms-transform: scale(0.4);
    -o-transform: scale(0.4);
    transform: scale(0.4);
    top: 2.46rem;
    left: 5.42rem;
}
#container .page3 .media7 .icon .c6 {
    -webkit-transform: scale(0.4);
    -moz-transform: scale(0.4);
    -ms-transform: scale(0.4);
    -o-transform: scale(0.4);
    transform: scale(0.4);
    top: 0.6rem;
    left: 1.17rem;
}
#container .page3 .media7 .icon .c7 {
    -webkit-transform: scale(0.4);
    -moz-transform: scale(0.4);
    -ms-transform: scale(0.4);
    -o-transform: scale(0.4);
    transform: scale(0.4);
    top: 0.6rem;
    left: 3.66rem;
}
#container .page3 .media7 .icon .c8 {
    -webkit-transform: scale(0.4);
    -moz-transform: scale(0.4);
    -ms-transform: scale(0.4);
    -o-transform: scale(0.4);
    transform: scale(0.4);
    top: 0.6rem;
    left: 6.03rem;
}

*/

#container .page4 {
    -webkit-background-image: url(../images/page4/bg.jpg);
    -moz-background-image: url(../images/page4/bg.jpg);
    -o-background-image: url(../images/page4/bg.jpg);
    background-image: url(../images/page4/bg.jpg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

#container .page4 .content {
    width: 10rem;
    height: 7.68rem;
    top: 50%;
    left: 50%;
    margin-top: -3.3rem;
    margin-left: -5rem;
    position: absolute;
}

#container .page4 em {
    position: absolute;
    opacity: 0.6;
    height: 1px;
    background-color: #fff;
    width: 0.8rem;
}

#container .page4 .yuan {
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 50%;
    position: absolute;
    background: #c2c2c3;
    box-shadow: 0px 0.04rem 0.04rem rgba(69, 66, 66, 0.66);
    -webkit-box-shadow: 0px 0.04rem 0.04rem rgba(69, 66, 66, 0.66);
    -moz-box-shadow: 0px 0.04rem 0.04rem rgba(69, 66, 66, 0.66);
    -o-box-shadow: 0px 0.04rem 0.04rem rgba(69, 66, 66, 0.66);
}

#container .page4 .word {
    position: absolute;
    font-weight: bold;
    font-size: 0.41rem;
    letter-spacing: 0.02rem;
}

#container .page4 .word2 {
    position: absolute;
    font-size: 0.32rem;
    letter-spacing: 0.02rem;
    opacity: 0;
}

#container .page4 .word3 {
    position: absolute;
    font-size: 0.18rem;
    letter-spacing: 0.02rem;
}

.page4.active .word3 {
    opacity: 0;
    -webkit-animation: bounceIn 3s linear .5s forwards;
    -moz-animation: bounceIn 3s linear .5s forwards;
    -o-animation: bounceIn 3s linear .5s forwards;
    animation: bounceIn 3s linear .5s forwards;
}

.page4.active .word3 .wei {
    -webkit-animation: rubberBand 3.5s linear 1.2s 2 forwards;
    -moz-animation: rubberBand 3.5s linear 1.2s 2 forwards;
    -o-animation: rubberBand 3.5s linear 1.2s 2 forwards;
    animation: rubberBand 3.5s linear 1.2s 2 forwards;
}

.page4.active .word {
    opacity: 0;
    -webkit-animation: rollIn linear .8s forwards;
    -moz-animation: rollIn linear .8s forwards;
    -o-animation: rollIn linear .8s forwards;
    animation: rollIn linear .8s forwards;
}

#container .page4 .content .perform1 em {
    top: 1.71rem;
    left: 2.64rem;
    -webkit-transform: rotate(38deg);
    -moz-transform: rotate(38deg);
    -ms-transform: rotate(38deg);
    transform: rotate(38deg);
}

#container .page4 .content .perform1 .yuan {
    top: 1.21rem;
    left: 2.37rem;
}

#container .page4 .content .perform1 .word {
    top: 0.91rem;
    left: 0.28rem;
}

#container .page4 .content .perform1 .word2 {
    top: 1.49rem;
    left: -2.56rem;
}

#container .page4 .content .perform2 em {
    top: 3.82rem;
    left: 2.25rem;
    -webkit-transform: rotate(352deg);
    -moz-transform: rotate(352deg);
    -ms-transform: rotate(352deg);
    transform: rotate(352deg);
}

#container .page4 .content .perform2 .yuan {
    top: 3.76rem;
    left: 1.88rem;
}

#container .page4 .content .perform2 .word {
    top: 3.55rem;
    left: -0.34rem;
}

#container .page4 .content .perform2 .word2 {
    top: 4.1rem;
    left: -3.42rem;
}

#container .page4 .content .perform3 em {
    top: 5.78rem;
    left: 2.72rem;
    -webkit-transform: rotate(314deg);
    -moz-transform: rotate(314deg);
    -ms-transform: rotate(314deg);
    transform: rotate(314deg);
}

#container .page4 .content .perform3 .yuan {
    top: 5.9rem;
    left: 2.62rem;
}

#container .page4 .content .perform3 .word {
    top: 5.74rem;
    left: 0.4rem;
}

#container .page4 .content .perform3 .word2 {
    top: 6.26rem;
    left: -2.64rem;
}

#container .page4 .content .perform4 em {
    top: 1.62rem;
    left: 6.96rem;
    -webkit-transform: rotate(325deg);
    -moz-transform: rotate(325deg);
    -ms-transform: rotate(325deg);
    transform: rotate(325deg);
    width: 1rem;
}

#container .page4 .content .perform4 .yuan {
    top: 1.10rem;
    left: 7.94rem;
}

#container .page4 .content .perform4 .word {
    top: 0.87rem;
    left: 8.44rem;
    font-size: 0.46rem;
}

#container .page4 .content .perform4 .word2 {
    top: 1.00rem;
    right: -1.88rem;
    font-size: 0.28rem;
}

#container .page4 .content .perform4 .word3 {
    top: 0.85rem;
    left: 9.48rem;
}

#container .page4 .content .perform5 em {
    top: 2.69rem;
    left: 7.44rem;
    -webkit-transform: rotate(352deg);
    -moz-transform: rotate(352deg);
    -ms-transform: rotate(352deg);
    transform: rotate(352deg);
    width: 0.86rem;
}

#container .page4 .content .perform5 .yuan {
    top: 2.50rem;
    left: 8.42rem;
}

#container .page4 .content .perform5 .word {
    top: 2.30rem;
    left: 8.88rem;
    font-size: 0.46rem;
}

#container .page4 .content .perform5 .word2 {
    top: 2.43rem;
    right: -1.33rem;
    font-size: 0.28rem;
}

#container .page4 .content .perform5 .word3 {
    top: 2.30rem;
    left: 9.59rem;
}

#container .page4 .content .perform6 em {
    top: 4.00rem;
    left: 7.42rem;
    -webkit-transform: rotate(5deg);
    -moz-transform: rotate(5deg);
    -ms-transform: rotate(5deg);
    transform: rotate(5deg);
    width: 0.8rem;
}

#container .page4 .content .perform6 .yuan {
    top: 4rem;
    left: 8.3rem;
}

#container .page4 .content .perform6 .word {
    top: 3.8rem;
    left: 8.80rem;
    font-size: 0.46rem;
}

#container .page4 .content .perform6 .word2 {
    top: 4rem;
    right: -2.15rem;
    font-size: 0.28rem;
}

#container .page4 .content .perform6 .word3 {
    top: 3.8rem;
    left: 9.48rem;
}

#container .page4 .content .perform7 em {
    top: 5.64rem;
    left: 6.55rem;
    -webkit-transform: rotate(35deg);
    -moz-transform: rotate(35deg);
    -ms-transform: rotate(35deg);
    transform: rotate(35deg);
    width: 1rem;
}

#container .page4 .content .perform7 .yuan {
    top: 5.94rem;
    left: 7.5rem;
}

#container .page4 .content .perform7 .word {
    top: 5.86rem;
    left: 8rem;
    font-size: 0.46rem;
}

#container .page4 .content .perform7 .word2 {
    top: 6.02rem;
    right: -0.18rem;
    font-size: 0.28rem;
}

#container .page4 .content .perform7 .word3 {
    top: 5.9rem;
    left: 8.70rem;
}

#container .page5 {
    -webkit-background-image: url(../images/page5/bg.jpg);
    -moz-background-image: url(../images/page5/bg.jpg);
    -o-background-image: url(../images/page5/bg.jpg);
    background-image: url(../images/page5/bg.jpg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center;
}

/*#container .page5 .content {*/
/*position: absolute;*/
/*width: 100%;*/
/*height: 100%;*/
/*top: 0;*/
/*}*/

#container .page5 .content .page5-tab {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -6.5rem;
    width: 13rem;
    height: 6rem;
    margin-top: -3rem;
}

#container .page5 .content .page5-tab li {
    float: left;
    width: 4.12rem;
    height: 2.78rem;
    margin: 0.1rem 0.1rem;
    text-align: center;
    line-height: 2.78rem;
    -webkit-background-size: cover;
    background-size: cover;
}

#container .page5 .content .page5-tab li.cl1 {
    background-image: url(../images/page5/w1.jpg);
}

#container .page5 .content .page5-tab li.cl2 {
    background-image: url(../images/page5/w2.jpg);
}

#container .page5 .content .page5-tab li.cl3 {
    background-image: url(../images/page5/w3.jpg);
}

#container .page5 .content .page5-tab li.cl4 {
    background-image: url(../images/page5/w4.jpg);
}

#container .page5 .content .page5-tab li.cl5 {
    background-image: url(../images/page5/w5.jpg);
}

#container .page5 .content .page5-tab li.cl6 {
    background-image: url(../images/page5/w6.jpg);
}

#container .page5 .content .page5-tab li.cl1 span {
    background-image: url(../images/page5/bw1.jpg);
}

#container .page5 .content .page5-tab li.cl2 span {
    background-image: url(../images/page5/bw2.jpg);
}

#container .page5 .content .page5-tab li.cl3 span {
    background-image: url(../images/page5/bw3.jpg);
}

#container .page5 .content .page5-tab li.cl4 span {
    background-image: url(../images/page5/bw4.jpg);
}

#container .page5 .content .page5-tab li.cl5 span {
    background-image: url(../images/page5/bw5.jpg);
}

#container .page5 .content .page5-tab li.cl6 span {
    background-image: url(../images/page5/bw6.jpg);
}

#container .page5 .content .page5-tab li span {
    display: inline-block;
    width: 0;
    height: 0;
    opacity: 0;
    -webkit-transition: all 0.4s ease-out;
    -moz-transition: all 0.4s ease-out;
    -ms-transition: all 0.4s ease-out;
    transition: all 0.4s ease-out;
    -webkit-transform-origin: center center;
    -moz-transform-origin: center center;
    -ms-transform-origin: center center;
    transform-origin: center center;
    -webkit-background-size: cover;
    background-size: cover;
    /*border-radius: 50%;*/
}

#container .page5 .content .page5-tab li:hover span {
    display: inline-block;
    width: 4.12rem;
    height: 2.78rem;
    opacity: 1;
    /*border-radius: 0%;*/
}

#container .page5 .content .tanchuang {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0%;
    height: 0%;
    background-color: #ffffff;
    -webkit-transform: translate3d(-50%, -50%, 0);
    -moz-transform: translate3d(-50%, -50%, 0);
    -ms-transform: translate3d(-50%, -50%, 0);
    transform: translate3d(-50%, -50%, 0);

}

#container .page6 {
    -webkit-background-image: url(../images/page6/bg.jpg);
    -moz-background-image: url(../images/page6/bg.jpg);
    -o-background-image: url(../images/page6/bg.jpg);
    background-image: url(../images/page6/bg.jpg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center;
}

#container .page6 .content {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -5rem;
    width: 9.83rem;
    height: 5.52rem;
    margin-top: -1.9rem;
}

#container .page6 .video {
    /*position: absolute;*/
    /*top: 0;*/
    /*left: 0;*/
    /*width: 100%;*/
    /*height: 100%;*/
    /*z-index: 120;*/
    /*background-color: #000;*/
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -5rem;
    width: 9.83rem;
    height: 5.52rem;
    margin-top: -1.9rem;
    z-index: 120;
}

.page6 .video-js {
    height: 100%;
    width: 100%;
}

.page6 .content ul li {
    height: 100%;
}

.page6 .content ul .vactive span {
    color: #e60044;
}

.page6 .video em {
    position: absolute;
    opacity: 0.4;
    height: 0.3rem;
    width: 0.01rem;
    background-color: #fff;
}

.playIcon {
    position: relative;
}

.playIcon img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.playIcon .Icon {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.playIcon .Icon .zicon {
    margin: 0 auto 0;
    width: 0.86rem;
    height: 2.70rem;
}

.playIcon .Icon .zicon b {
    display: block;
    width: 2px;
    margin: 0 auto 0;
    height: 0%;
    background-color: #ffffff;
    -webkit-transform-origin: top center;
    -moz-transform-origin: top center;
    -o-transform-origin: top center;
    transform-origin: top center;
}

.playIcon .Icon .zicon .yuan {
    width: 0.86rem;
    height: 0.86rem;
    border-radius: 50%;
    border: 2px solid #ffffff;
    text-align: center;
    background: url(../images/page6/sanjiao.png) no-repeat center center;
    -webkit-transform: scale3d(1, 1, 1) translatey(0px);
    -moz-transform: scale3d(1, 1, 1) translatey(0px);
    -o-transform: scale3d(1, 1, 1) translatey(0px);
    transform: scale3d(1, 1, 1) translatey(0px);
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
    margin: 0 auto 0;
}

.playIcon .Icon .zicon .yuan:hover {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) translatey(2px);
    -moz-transform: scale3d(1.1, 1.1, 1.1) translatey(2px);
    -o-transform: scale3d(1.1, 1.1, 1.1) translatey(2px);
    transform: scale3d(1.1, 1.1, 1.1) translatey(2px);
    /*background-color: rgba(255,255,255,0.8);*/
}

.page6.active .playIcon .zicon b {
    -webkit-animation: hiht 1s 0.5s forwards;
    -o-animation: hiht 1s 0.5s forwards;
    animation: hiht 1s 0.5s forwards;
    transform-origin: top center;
}

@-webkit-keyframes hiht {
    0% {
        height: 0;
    }
    86% {
        height: 70%;
    }
    100% {
        height: 67%;
    }
}

@keyframes hiht {
    0% {
        height: 0;
    }
    86% {
        height: 70%;
    }
    100% {
        height: 67%;
    }
}

#container .page7 {
    -webkit-background-image: url(../images/page7/bg.jpg);
    -moz-background-image: url(../images/page7/bg.jpg);
    -o-background-image: url(../images/page7/bg.jpg);
    background-image: url(../images/page7/bg.jpg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

#container .page7 .content {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -8.51rem;
    width: 17.02rem;
    height: 5.76rem;
    margin-top: -2.36rem;
}

.page7 .content ul li {
    margin-right: 0.75rem;
    float: left;
    width: 1.3rem;
    height: 0.32rem;
    margin-top: 0.06rem;
    font-size: 16px;
    font-weight: bold;
}

.page7 .partner em {
    position: absolute;
    opacity: 0.4;
    height: 0.2rem;
    width: 0.01rem;
    background-color: #fff;
    top: 0.1rem;
}

.page7 .content .grid {
    width: 17.4rem;
    height: 4.5rem;
    perspective: 5rem;
    margin-top: 0.66rem;
    margin-left: 0.36rem;
}

.page7 .content .gridie {
    display: none;
    display: none !important;
}

.page7 .content .grid div {
    width: 1.32rem;
    height: 1.32rem;
    display: block;
    float: left;
    opacity: 0;
}

#container .page8 {
    background-image: url(../images/page8/bg.jpg);
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center;
}

/*#container .page8 ul, li {*/
/*padding: 0.24rem;*/
/*}*/

#container .page8 #wrapper {
    position: absolute;
    top: 58%;
    width: 100%;
    height: 6rem;
    margin-top: -3rem;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    /*-webkit-box-pack: left;*/
    /*-webkit-justify-content: left;*/
    /*-ms-flex-pack: left;*/
    justify-content: left;
    overflow: hidden;
    opacity: 0;
    -webkit-transition: all 0.8s 0.8s;
    -moz-transition: all 0.8s 0.8s;
    -ms-transition: all 0.8s 0.8s;
    transition: all 0.8s 0.8s;
    -webkit-transform: translateY(-100px);
    -moz-transform: translateY(-100px);
    -ms-transform: translateY(-100px);
    transform: translateY(-100px);
}

#container .page8.active #wrapper {
    opacity: 1;
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
}

#container .page8 #left-side {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    z-index: 10;
    width: 17%;
    height: 100%;
    background-color: #ececec;
    top: 0%;
}

#container .page8 #left-side ul li {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    line-height: 0.34rem;
    color: #333333;
    /*font-weight: 500;*/
    cursor: pointer;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
    border-radius: 10px;
    font-size: 16px;
    padding: 0.1rem 0.22rem;
    margin: 0.3rem 0px;
    font-weight: bold;
}

#container .page8 #left-side ul li em {
    opacity: 0;
    position: absolute;
    width: 0.3rem;
    height: 0.58rem;
    right: -0.3rem;
    background-image: url(../images/page8/jiantou.png);
    -webkit-background-size: cover;
    background-size: cover;
}

#container .page8 #left-side ul li.active em {
    opacity: 1;
}

#container .page8 #left-side ul li:hover {
    color: #000;
    -webkit-transition: all .2s ease-out;
    -moz-transition: all .2s ease-out;
    -o-transition: all .2s ease-out;
    transition: all .2s ease-out;
}

#container .page8 #left-side ul li.active {
    color: #ffffff;
    background: #e60044;
    box-shadow: 0.02rem 0.04rem 0.04rem #585353;
    border-radius: 10px;
    padding: 0.1rem 0.22rem;
    margin: 0.3rem 0px;
}

#container .page8 #right-side {
    left: 17%;
    position: absolute;
    background-color: rgba(168, 14, 50, 0.85);
    width: 83%;
    height: 100%;
    top: 0%;
}

#right-side #first, #right-side #second, #right-side #third, #right-side #fourth, #right-side #five, #right-side #six {
    position: absolute;
    height: 100%;
    width: 100%;
}

#right-side #first .left, #right-side #second .left, #right-side #third .left, #right-side #fourth .left, #right-side #five .left, #right-side #six .left {
    position: absolute;
    height: 3rem;
    width: 100%;
    -webkit-transition: all .6s ease-out;
    -moz-transition: all .6s ease-out;
    -o-transition: all .6s ease-out;
    transition: all .6s ease-in-out;
    margin-top: -3.5rem;
    opacity: 0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

#right-side #first.active .left, #right-side #second.active .left, #right-side #third.active .left, #right-side #fourth.active .left, #right-side #five.active .left, #right-side #six.active .left {
    margin-top: 0px;
    opacity: 1;
    -webkit-transition: all .6s ease-in-out;
    -moz-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
    width: 100%;
    height: 100%;
}

#right-side #first .right, #right-side #second .right, #right-side #third .right, #right-side #fourth .right, #right-side #five .right, #right-side #six .right {
    opacity: 0;
    -webkit-transition: all .6s ease-out;
    -moz-transition: all .6s ease-out;
    -o-transition: all .6s ease-out;
    transition: all .6s ease-in-out;
}

#right-side #first.active .right, #right-side #second.active .right, #right-side #third.active .right, #right-side #fourth.active .right, #right-side #five.active .right, #right-side #six.active .right {
    opacity: 1;
    -webkit-transition: all .6s ease-in-out;
    -moz-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    transition: all .6s ease-in-out;
}

#container .page8 #first .left {
    -webkit-background-image: url(../images/page8/huabei.jpg);
    -moz-background-image: url(../images/page8/huabei.jpg);
    -o-background-image: url(../images/page8/huabei.jpg);
    background-image: url(../images/page8/huabei.jpg);
}

#container .page8 #second .left {
    -webkit-background-image: url(../images/page8/huadong.jpg);
    -moz-background-image: url(../images/page8/huadong.jpg);
    -o-background-image: url(../images/page8/huadong.jpg);
    background-image: url(../images/page8/huadong.jpg);
}

#container .page8 #third .left {
    -webkit-background-image: url(../images/page8/huanan.jpg);
    -moz-background-image: url(../images/page8/huanan.jpg);
    -o-background-image: url(../images/page8/huanan.jpg);
    background-image: url(../images/page8/huanan.jpg);
}

/*#container .page8 #fourth .left {*/
/*-webkit-background-image: url(../images/page8/hangzhou.jpg);*/
/*-moz-background-image: url(../images/page8/hangzhou.jpg);*/
/*-o-background-image: url(../images/page8/hangzhou.jpg);*/
/*background-image: url(../images/page8/hangzhou.jpg);*/
/*}*/

/*#container .page8 #five .left {*/
/*-webkit-background-image: url(../images/page8/guangzhou.jpg);*/
/*-moz-background-image: url(../images/page8/guangzhou.jpg);*/
/*-o-background-image: url(../images/page8/guangzhou.jpg);*/
/*background-image: url(../images/page8/guangzhou.jpg);*/
/*}*/

/*#container .page8 #six .left {*/
/*-webkit-background-image: url(../images/page8/xiamen.jpg);*/
/*-moz-background-image: url(../images/page8/xiamen.jpg);*/
/*-o-background-image: url(../images/page8/xiamen.jpg);*/
/*background-image: url(../images/page8/xiamen.jpg);*/
/*}*/

#container .page8 #first .left, #container .page8 #second .left, #container .page8 #third .left, #container .page8 #fourth .left, #container .page8 #five .left, #container .page8 #six .left {
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center center;
    height: 100%;
    width: 100%;
    float: left;
}

#container .page8 #first .right, #container .page8 #second .right, #container .page8 #third .right, #container .page8 #fourth .right, #container .page8 #five .right, #container .page8 #six .right {
    height: 100%;
    text-align: left;
    /*margin-left: 11.8rem;*/
    margin-right: -0.52rem;
    /*position: absolute;*/
    width: 30%;
    padding-left: 0.8rem;
    /*top: 0%;*/
    /*float: right;*/
    position: absolute;
    right: 0;
    background-color: rgba(230, 0, 68, 0.7);
}

#container .page8 #first .word, #container .page8 #second .word, #container .page8 #third .word, #container .page8 #fourth .word, #container .page8 #five .word, #container .page8 #six .word {
    /*position: absolute;*/
    font-size: 14px;
    /*width: 17%;*/
    margin-top: 0.7rem;;
}

@media (min-width: 1152px) {
    #container .page8 #first .word, #container .page8 #second .word, #container .page8 #third .word, #container .page8 #fourth .word, #container .page8 #five .word, #container .page8 #six .word {
        /*position: absolute;*/
        font-size: 14px;
        /*width: 17%;*/
        margin-top: 0.7rem;;
    }
}

#container .page8 #second .right {
    width: 100%;
}

#container .page8 #second .right > div {
    width: 33.33%;
    height: 100%;
    float: left;
    padding-left: 43px;
    box-sizing: border-box;
}

#container .page8 .footer {
    position: absolute;
    height: 76px;
    width: 100%;
    background-color: #000000;
    text-align: center;
    bottom: 0%;
    line-height: 76px;
    opacity: 90;
}

.backtop {
    display: none;
    position: fixed;
    bottom: 15%;
    right: -0.56rem;
    width: 1rem;
    height: 0.42rem;
    /*background-color: pink;*/
}

.backtop img {
    position: absolute;
    top: 0;
    left: 0;
}

.backtop .bk1 {
    left: 0;
}

.backtop .bk2 {
    position: absolute;
    top: 0;
    left: 1.20rem;
    width: 1.22rem;
    height: 0.42rem;
    color: #ffffff;
    font-size: 0.18rem;
    line-height: 0.42rem;
    text-align: center;
    border-radius: 6px;
    background-color: rgba(0, 0, 0, 0.5);

}

.page9 .footer {
    /*position: absolute;*/
    height: 428px;
    width: 100%;
    background-color: #000000;
    text-align: center;
    bottom: 0%;
    z-index: 30;
    font-size: 0.18rem;
    color: #ffffff;
}

/*.section.active {*/
/*-webkit-animation: bgimage 20s  infinite;*/
/*-o-animation: bgimage 20s  infinite;*/
/*animation: bgimage 20s  infinite;*/
/*background-position: center center;*/
/*}*/
/*@-webkit-keyframes bgimage {*/
/*from{*/
/*-webkit-background-size: 100% 100%;*/
/*background-size:100% 100%;*/
/*}50%{*/
/*-webkit-background-size: 110% 110%;*/
/*background-size: 110% 110%;*/
/*}*/
/*to{*/
/*-webkit-background-size: 100% 100%;*/
/*background-size:100% 100%;*/
/*}*/
/*}*/

/*footer*/
.footer {
    position: relative;
    background-color: #1f2228
}

.footer .content {
    width: 80%;
    height: 323px;
    min-width: 989px;
    margin: 60px auto 0
}

.footer .left {
    width: 50%;
    min-width: 662px;
    height: 302px;
    position: relative;
    float: left;
    margin-left: 12px
}

.footer .left .ban {
    width: 100%;
    height: 16px
}

.footer .left .ban li {
    height: 16px;
    line-height: 16px
}

.footer .left .ban a {
    font-size: 20px;
    color: #fff;
    display: block
}

.footer .left .ban a:hover {
    color: #e60044
}

.footer .left .ban .ban1 {
    position: absolute;
    left: 0%
}

.footer .left .ban .ban2 {
    position: absolute;
    left: 16%
}

.footer .left .ban .ban3 {
    position: absolute;
    left: 32%
}

.footer .left .ban .ban4 {
    position: absolute;
    left: 48%
}

.footer .left .ban .ban5 {
    position: absolute;
    left: 64%
}

.footer .left .ban .ban6 {
    position: absolute;
    left: 80%
}

.footer .left .con {
    width: 100%;
    height: 200px;
    margin-top: 50px;
    border-bottom: 1px solid hsla(0, 0%, 100%, .3);
    border-top: 1px solid hsla(0, 0%, 100%, .3);
    position: relative;
    padding: 27px;
    box-sizing: border-box
}

.footer .left .con > div {
    width: 33%;
    float: left
}

.footer .left .con > div > div {
    width: 100%;
    height: 100%;
    border-right: 1px solid hsla(0, 0%, 100%, .3);
    box-sizing: border-box;
    position: relative
}

.footer .left .con .img {
    width: 63px;
    height: 63px;
    margin: 20px auto
}

.footer .left .con .detail {
    font-size: 14px;
    color: #fff;
    word-wrap: break-word;
    letter-spacing: 1px;
    font-weight: 700;
    text-align: center;
    padding: 0 10px
}

.footer .left .con .con22 .detail, .footer .left .con .con33 .detail {
    font-size: 16px;
    font-family: Arial
}

.footer .left .con1 {
    width: 277px;
    margin-top: -68px;
    position: absolute;
    top: 50%
}

.footer .left .con1, .footer .left .con .con11 {
    height: 140px;
    float: left
}

.footer .left .con .con11 .img:hover {
    background-image: url(../images/frame/dzhong1.png);
    background-position: 50%;
    background-size: cover
}

.footer .left .con .con11 .img {
    background-image: url(../images/frame/dzbai1.png);
    background-position: 50%;
    background-size: cover
}

.footer .left .con2 {
    width: 208px;
    margin-top: -68px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -99px
}

.footer .left .con2, .footer .left .con .con22 {
    height: 140px;
    float: left
}

.footer .left .con .con22 .img:hover {
    background-image: url(../images/frame/lxhong2.png);
    background-position: 50%;
    background-size: cover
}

.footer .left .con .con22 .img {
    background-image: url(../images/frame/lxbai2.png);
    background-position: 50%;
    background-size: cover
}

.footer .left .con3 {
    width: 266px;
    height: 140px;
    float: left;
    margin-top: -68px;
    position: absolute;
    top: 50%;
    right: 0
}

.footer .left .con .con33 {
    height: 140px;
    float: left;
    border-right: 1px solid hsla(0, 0%, 100%, 0)
}

.footer .left .con .con33 .img:hover {
    background-image: url(../images/frame/yxhong3.png);
    background-position: 50%;
    background-size: cover
}

.footer .left .con .con33 .img {
    background-image: url(../images/frame/yxbai3.png);
    background-position: 50%;
    background-size: cover
}

.footer .left .banquan {
    font-size: 16px;
    color: #fff;
    text-align: center;
    font-weight: 700;
    margin-top: 20px;
    font-family: Arial
}

.footer .left .banquan a{
    color: #fff;
    display: inline-block;
}

.footer .right {
    width: 290px;
    height: 302px;
    position: relative;
    float: right;
    margin-right: 12px
}

.footer .right img {
    width: 116px;
    height: 174px;
    position: absolute;
    left: 50%;
    margin-left: -59px
}

.footer .right .tel {
    /* font-size: 47px;
    color: #fff;
    font-weight: 700;
    margin-top: 190px;
    text-align: center;
    font-family: Impact */
    margin-top: 190px;
    background-image: url("../images/frame/footer_solgan.png");
    background-repeat: no-repeat;
    background-size: cover;
    width: 302px;
    height: 46px;
}

.footer .right .link {
    position: absolute;
    width: 100px;
    height: 40px;
    bottom: 0;
    left: 50%;
    margin-left: -50px
}

.footer .right .link a {
    background-image: url(../images/frame/link1.png);
    background-size: cover
}

.footer .right .link a:hover {
    background-image: url(../images/frame/link2.png);
    background-size: cover
}

.footer .right .sina {
    background-position: 0 39px;
    float: left;
    width: 40px;
    height: 39px
}

.footer .right .sem {
    background-position: 40px 0;
    float: right;
    width: 40px;
    height: 39px
}

.footer .right .sem:hover .code{
    display: block;
}

.footer .right .sem .code{
    background-image: url(../images/frame/code.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 100px;
    height: 100px;
    position: absolute;
    left: 35px;
    top: -115px;
    display: none;
}

.footer .right .sem .code .jiantou{
    display: block;
    border-width: 5px 5px 0;
    border-style: solid;
    border-color: #fff transparent transparent;
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}

#fp-nav.right {
    right: 4px;
}

/*IE9*/
:root #loader {
    display: none \9;
}

:root .header .logo .ws .shine {
    display: none \9;
}

:root .page1 .slide3 .sd3 .word2 .words_add {
    margin-left: 1.9rem \9;
}

:root .page1 .slide3 .sd3 .word3 .words_add {
    margin-left: 1.7rem \9;
}

:root .page1 .slide2 .sd2 .words_add {
    margin-left: 1.9rem \9;
}

:root #container .page1.active .slide1.active .sd1 .word0 {
    opacity: 1 \9;
}

:root #container .page1.active .slide1.active .sd1 .word2 {
    opacity: 1 \9;
}

:root #container .page1.active .slide1.active .sd1 .word3 {
    opacity: 1 \9;
}

:root #container .page1.active .slide2.active .sd2 .word1 {
    opacity: 1 \9;
}

:root #container .page1.active .slide2.active .sd2 .word2 {
    opacity: 1 \9;
}

:root #container .page1.active .slide2.active .sd2 .word3 {
    opacity: 1 \9;
}

:root #container .page1.active .slide3.active .sd3 .word1 {
    opacity: 1 \9;
}

:root #container .page1.active .slide3.active .sd3 .word2 {
    opacity: 1 \9;
}

:root #container .page1.active .slide3.active .sd3 .word3 {
    opacity: 1 \9;
}

:root #container .page2.active .content {
    opacity: 1 \9;
}

:root #container .page2 .content .words .word1 .word {
    top: 0.08rem \9;
}

:root #container .page2 .content .words .word2 .word {
    top: 0.88rem \9;
}

:root #container .page2 .content .words .word3 .word {
    top: 1.68rem \9;
}

:root #container .page2 .content .words .word4 .word {
    top: 2.48rem \9;
}

:root #container .page2 .content .words .word5 .word {
    top: 3.28rem \9;
}

:root #container .page2 .content .words .word6 .word {
    top: 4.08rem \9;
}

:root #container .page2 .content .words .word7 .word {
    top: 4.88rem \9;
}

:root #container .page2 .content .words .word8 .word {
    top: 5.68rem \9;
}

:root #container .page4.active .word {
    opacity: 1 \9;
}

:root #container .page8 #left-side ul li em {
    display: none \9;
}

/*IE9*/
:root #container .page1.active .slide1.active .sd1 .word0 {
    opacity: 1 \9;
}

:root #container .page1.active .slide1.active .sd1 .word2 {
    opacity: 1 \9;
}

:root #container .page1.active .slide1.active .sd1 .word3 {
    opacity: 1 \9;
}

:root #container .page1.active .slide2.active .sd2 .word1 {
    opacity: 1 \9;
}

:root #container .page1.active .slide2.active .sd2 .word2 {
    opacity: 1 \9;
}

:root #container .page1.active .slide2.active .sd2 .word3 {
    opacity: 1 \9;
}

:root #container .page1.active .slide3.active .sd3 .word1 {
    opacity: 1 \9;
}

:root #container .page1.active .slide3.active .sd3 .word2 {
    opacity: 1 \9;
}

:root #container .page1.active .slide3.active .sd3 .word3 {
    opacity: 1 \9;
}

:root #container .page2.active .content {
    opacity: 1 \9;
}

:root #container .page2 .content .words .word1 .word {
    top: 0.08rem \9;
}

:root #container .page2 .content .words .word2 .word {
    top: 0.88rem \9;
}

:root #container .page2 .content .words .word3 .word {
    top: 1.68rem \9;
}

:root #container .page2 .content .words .word4 .word {
    top: 2.48rem \9;
}

:root #container .page2 .content .words .word5 .word {
    top: 3.28rem \9;
}

:root #container .page2 .content .words .word6 .word {
    top: 4.08rem \9;
}

:root #container .page2 .content .words .word7 .word {
    top: 4.88rem \9;
}

:root #container .page2 .content .words .word8 .word {
    top: 5.68rem \9;
}

:root #container .page4.active .word {
    opacity: 1 \9;
}

:root #container .page8 #left-side ul li em {
    display: none \9;
}

/*IE9*/
:root #container .page1.active .slide1.active .sd1 .word0 {
    opacity: 1 \9;
}

:root #container .page1.active .slide1.active .sd1 .word2 {
    opacity: 1 \9;
}

:root #container .page1.active .slide1.active .sd1 .word3 {
    opacity: 1 \9;
}

:root #container .page1.active .slide2.active .sd2 .word1 {
    opacity: 1 \9;
}

:root #container .page1.active .slide2.active .sd2 .word2 {
    opacity: 1 \9;
}

:root #container .page1.active .slide2.active .sd2 .word3 {
    opacity: 1 \9;
}

:root #container .page1.active .slide3.active .sd3 .word1 {
    opacity: 1 \9;
}

:root #container .page1.active .slide3.active .sd3 .word2 {
    opacity: 1 \9;
}

:root #container .page1.active .slide3.active .sd3 .word3 {
    opacity: 1 \9;
}

:root #container .page2.active .content {
    opacity: 1 \9;
}

:root #container .page2 .content .words .word1 .word {
    top: 0.08rem \9;
}

:root #container .page2 .content .words .word2 .word {
    top: 0.88rem \9;
}

:root #container .page2 .content .words .word3 .word {
    top: 1.68rem \9;
}

:root #container .page2 .content .words .word4 .word {
    top: 2.48rem \9;
}

:root #container .page2 .content .words .word5 .word {
    top: 3.28rem \9;
}

:root #container .page2 .content .words .word6 .word {
    top: 4.08rem \9;
}

:root #container .page2 .content .words .word7 .word {
    top: 4.88rem \9;
}

:root #container .page2 .content .words .word8 .word {
    top: 5.68rem \9;
}

:root #container .page3.active .media .icon {
    display: none \9;
}

:root #container .page3.active .media.current .icon {
    display: block \9;
}

:root #container .page4.active .word {
    opacity: 1 \9;
}

:root #container .page4.active .word3 {
    opacity: 1 \9;
}

:root #container .page5 .flipster {
    text-align: center \9;
}

:root #container .page5 .flipster ul {
    text-align: center \9;
    display: inline \9;
}

:root #container .page5 .flipster ul li {
    padding-right: 0.1rem \9;
    display: inline \9;
}

:root #container .page5 .flipster img {
    width: 3.09rem \9;
}

:root #container .page6 .playIcon .Icon .zicon .yuan {
    margin-top: 1.5rem \9;
}

:root #container .page8 #left-side ul li em {
    display: none \9;
}

:root #container .page8 #left-side ul {
    margin-top: 1.1rem \9;
}

/*IE9*/

.pz-dialog{
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}
.pz-dialog .pz-dialog__mask{
    z-index: 1001;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: .5;
    background: #000;
}
.pz-dialog-center{
    display: flex;
    align-items: center;
    justify-content: center;
}
.pz-dialog .pz-dialog-close{
    z-index: 1002;
    position: absolute;
    top: 40px;
    right: 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    opacity: .8;
    cursor: pointer;
    font-size: 20px;
    color: #fff;
    background-color: #606266;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pz-dialog .pz-dialog-close .icon{
    width: 26px;
    height: 26px;
}
.pz-dialog .preview{
    z-index: 1002;
    max-height: 80%;
    max-width: 100%;
    display: block;
    margin: 0 auto;
}