@charset "utf-8";
* {
    margin: 0;
    padding: 0;
}

html{font-size:10px;}
ul li{list-style:none;}
html,body{font-family:Helvetica;}
body{background-color:#000 }

a {
    text-decoration: none
}

img {
    display: block;
    border: none;
}


/*第一屏*/

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

.m_bg img {
    height: 100%;
    width: 100%;
}

.opa {
    opacity: 0;
    background-color: #fff;
    height: 100%;
    width: 100%;
    position: absolute;
}

.m_logo {
    position: absolute;
    left: 42%;
    top: 5%;
    margin: 0 0 0 -2rem;
}

.m_logo img {
    width: 10rem;
}

.active .m_logo img {
    width: 10rem;
    -webkit-animation: scaleIn .6s ease .6s both;
    -moz-animation: scaleIn .6s ease .6s both;
    -ms-animation: scaleIn .6s ease .6s both;
    animation: scaleIn .6s ease .6s both;
}

.m_logo2 {
    position: absolute;
    left: 48%;
    top: 5%;
    margin: 0 0 0 -2rem;
}

.m_logo2 img {
    width: 6rem;
}

.active .m_logo2 img {
    width: 6rem;
    -webkit-animation: scaleIn .6s ease .6s both;
    -moz-animation: scaleIn .6s ease .6s both;
    -ms-animation: scaleIn .6s ease .6s both;
    animation: scaleIn .6s ease .6s both;
}

.m_logo1 {
    position: absolute;
    left: 30%;
    top: 5%;
    margin: 0 0 0 -2rem;
}

.m_logo1 img {
    width: 18rem;
}

.active .m_logo1 img {
    width: 18rem;
    -webkit-animation: scaleIn .6s ease .6s both;
    -moz-animation: scaleIn .6s ease .6s both;
    -ms-animation: scaleIn .6s ease .6s both;
    animation: scaleIn .6s ease .6s both;
}

.m_title {
    font-size: 1.4rem;
    color: #fff;
    line-height: 150%;
    text-align: center;
    position: absolute;
    left: 0;
    top: 30%;
    width: 100%;
}

.active .m_title {
    font-size: 1.4rem;
    color: #fff;
    line-height: 150%;
    text-align: center;
    position: absolute;
    left: 0;
    top: 30%;
    width: 100%;
    -webkit-animation: dragTop .7s ease-in-out 1s both;
    -moz-animation: dragTop .7s ease-in-out 1s both;
    -ms-animation: dragTop .7s ease-in-out 1s both;
    animation: dragTop .7s ease-in-out 1s both;
}
/*
.m_hr {
    height: 2px;
    width: 74px;
    position: absolute;
    left: 50%;
    top: 40%;
    border-bottom: 2px solid #fff;
    margin-left: -32px;
}

.active .m_hr {
    height: 2px;
    width: 74px;
    position: absolute;
    ;
    left: 50%;
    top: 40%;
    border-bottom: 2px solid #fff;
    margin-left: -32px;
    -webkit-animation: dragTop .7s ease-in-out 1s both;
    -moz-animation: dragTop .7s ease-in-out 1s both;
    -ms-animation: dragTop .7s ease-in-out 1s both;
    animation: dragTop .7s ease-in-out 1s both;
}

.active .m_p11 {
    font-size: 0.5rem;
    color: #fff;
    line-height: 150%;
    text-align: center;
    position: absolute;
    left: 0;
    top: 43%;
    width: 100%;
    -webkit-animation: dragTop .7s ease-in-out 1.2s both;
    -moz-animation: dragTop .7s ease-in-out 1.2s both;
    -ms-animation: dragTop .7s ease-in-out 1.2s both;
    animation: dragTop .7s ease-in-out 1.2s both;
}
*/
.m_qrcode {
    position: absolute;
    left: 50%;
    top: 56%;
    margin-left: -5rem;
}

.m_qrcode img {
    width: 10rem;
    background-color: #fff;
    border-radius:4px; 
}

.active .m_qrcode img {
    width: 10rem;
    background-color: #fff;
    -webkit-animation: dragbot .7s ease-in-out 1.6s both;
    -moz-animation: dragbot .7s ease-in-out 1.6s both;
    -ms-animation: dragbot .7s ease-in-out 1.6s both;
    animation: dragbot .7s ease-in-out 1.6s both;
}

.m_download_button {
    position: absolute;
    left: 50%;
    top: 80%;
    margin-left: -12rem;
}

.m_download_button li {
    padding-right: 1.2rem;
    width: 12rem;
    float: left;
}

.active .m_download_button li {
    padding-right: 1.2rem;
    width: 12rem;
    float: left;
    -webkit-animation: dragbot .7s ease-in-out 1.6s both;
    -moz-animation: dragbot .7s ease-in-out 1.6s both;
    -ms-animation: dragbot .7s ease-in-out 1.6s both;
    animation: dragbot .7s ease-in-out 1.6s both;
}

.m_download_button li a {
    display: inline-block;
    float: left;
}

.m_download_button li img {
    width: 12rem;
}

.m_download_button li:nth-child(2) {
    padding-right: 0;
    float: right;
}


/*第二屏*/

.m_class_list {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    padding-top:0.6rem;
}

.m_class_list li {
    width: 43.75%;
    float: left;
    text-align: center;
    padding-top:3rem;
    padding-left:6.25%;
}

.active .m_class_list li {
    -webkit-animation: scaleAll .7s ease-in-out .8s both;
    -moz-animation: scaleAll .7s ease-in-out .8s both;
    -ms-animation: scaleAll .7s ease-in-out .8s both;
    animation: scaleAll .7s ease-in-out .8s both;
}

.m_class_list li img {
    width: 8rem;
    height: 8rem;
    display: initial;
}

.m_class_list li:nth-child(2),.m_class_list li:nth-child(4),.m_class_list li:nth-child(6){padding-right:6%;padding-left:0;}
.rectangle{text-align: center;position: absolute;top:1rem;left:50%;margin-left:-1.2rem;}
.rectangle li{padding-bottom:11.1rem;}
.rectangle li:last-child{padding-bottom:0;}
.rectangle li img{width: 2.5rem;height:2.5rem;}
@media (device-height:480px) {
    .m_class_list {
        
    }
}


/*第三屏*/

.m_media_ul {
    width: 100%;
    margin: 0 100% 0 0;
    opacity: 1;
    transition: all 1s;
}

.m_media_ul li {
    float: left;
    height: auto;
    width: 50%;
    position: relative;
}

.active .m_media_ul li {
    float: left;
    height: auto;
    width: 50%;
    -webkit-animation: dragleft .7s ease-in-out .8s both;
    -moz-animation: dragleft .7s ease-in-out .8s both;
    -ms-animation: dragleft .7s ease-in-out .8s both;
    animation: dragleft .7s ease-in-out .8s both;
}


/*@media (device-width:320px){
.active .m_media_ul li{height: 10rem;width: 10rem;}
}*/

.m_media_ul li img {
    width: 100%;
    height: 100%;
}

.m_media_ul li p {
    position: absolute;
    border-radius: 4px;
    width: 6rem;
    height: 2rem;
    line-height: 2rem;
    left: 50%;
    top: 50%;
    margin: -1rem 0 0 -3rem;
    border: 1px solid #ccc;
    display: block;
    text-align: center;
    font-size: 1rem;
    color: #fff;
    z-index: 1
}

.page3opa {
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.3;
}

.page3_con {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: #f0f0f0;
}

.m_qrcode_ul {
    clear: both;
    text-align: center;
    position: absolute;
    top: 71%;
    width: 100%;
}

.m_qrcode_ul li {
    display: inline-block;
    width: 48%;
}

.active .m_qrcode_ul li {
    display: inline-block;
    width: 48%;
    -webkit-animation: dragbot .7s ease-in-out 1.2s both;
    -moz-animation: dragbot .7s ease-in-out 1.2s both;
    -ms-animation: dragbot .7s ease-in-out 1.2s both;
    animation: dragbot .7s ease-in-out 1.2s both;
}

.m_qrcode_ul li img {
    display: inherit;
    width: 54%;
    border: 1px solid #ccc;
    padding: 2px;
}
.m_qrcode_ul li p img {width: 1.2rem;padding:0 0.4rem 0 0;border: 0;display: inline-block;vertical-align: -1px;}
.m_qrcode_ul li p {
    font-size: 0.8rem;
    padding-top:1rem;
    line-height: 150%;
}
/*
.footer {
    background-color: #e6e6e6;
    color: #a6a6a6;
    font-size: 0.6rem;
    text-align: center;
    height: 2rem;
    line-height: 2rem;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.footer a {
    color: #a6a6a6;
    margin-right: 0.2rem;
}
*/

.up {
    position: absolute;
    left: 50%;
    margin: 0 0 0 -0.9rem;
    bottom: 1%;
}

.active .up {
    position: absolute;
    left: 50%;
    margin: 0 0 0 -0.7rem;
    bottom: 1%;
    -webkit-animation: dragleft .7s ease-in-out 1.6s both;
    -moz-animation: dragleft .7s ease-in-out 1.6s both;
    -ms-animation: dragleft .7s ease-in-out 1.6s both;
    animation: dragleft .7s ease-in-out 1.6s both;
}

.up img {
    width: 1.5rem;
}


/*第四屏*/
.about_logo{padding:1rem 0 1.5rem;}
.about_logo img{width: 12rem;height:5rem;margin:0 auto;}
.m_about {
    padding:0 2.5rem 2rem;
}

.active .m_about {
    -webkit-animation: dragTop .7s ease-in-out .8s both;
    -moz-animation: dragTop .7s ease-in-out .8s both;
    -ms-animation: dragTop .7s ease-in-out .8s both;
    animation: dragTop .7s ease-in-out .8s both;
}
.m_about p {
    font-size: 1.1rem;
    line-height: 150%;
    color:#666;
}
.investor{width:100%;clear: both;padding-bottom:0.65rem;overflow: auto;}
.investor li{line-height:100%;font-size:1.1rem;color:#666;padding:0 0px 8px 11px;background-image:url(../images/d.png);background-repeat: no-repeat;background-position:0px 4px;}
.investor li:nth-child(1){float: right;}
.investor li:nth-child(2){position: absolute;left:50%;width: 6rem;margin:0 0 0 -2rem;}
.investor li:nth-child(3){float: left;}
/*第五屏*/
.m_leader {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.active .m_leader {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    -webkit-animation: dragbot .7s ease-in-out 1.2s both;
    -moz-animation: dragbot .7s ease-in-out 1.2s both;
    -ms-animation: dragbot .7s ease-in-out 1.2s both;
    animation: dragbot .7s ease-in-out 1.2s both;
    height: 100%;
}
.investor_con {
    padding:0 2.5rem;
}

.active .investor_con {
    -webkit-animation: dragbot .7s ease-in-out .8s both;
    -moz-animation: dragbot .7s ease-in-out .8s both;
    -ms-animation: dragbot .7s ease-in-out .8s both;
    animation: dragbot .7s ease-in-out .8s both;
}
.m_about h2,
.m_leader h2,.investor_con h2{
    font-size: 1.3rem;
    text-align: center;
    padding-bottom: 1.5rem;
    font-weight:100;
    color:#333;
}
.m_leader h2{padding:1.5rem 0 2rem;}

.m_leader{
    position: relative;
    width: 100%;
    height: 100%;
}

.m_leader ul li:nth-child(1) {
    position: absolute;
    left: 50%;
    top: 20%;
    margin-left: -48px;

}
.m_leader ul li:nth-child(2) {
    position: absolute;
    left: 50%;
    top: 40%;
    margin-left: -48px;
}
/* .m_leader ul li {
    float: left;
    padding:4rem 0 0rem;
    text-align: center;
} */

/* .m_leader ul li:nth-child(1) {
    padding-left: 5rem;
} */

/* .m_leader ul li:nth-child(3) {
    padding-left:5rem;
}
.m_leader ul li:nth-child(5) {
    padding-left: 5rem;
}
.m_leader ul li:nth-child(2) {
    padding-right: 5rem;
    float: right;
}

.m_leader ul li:nth-child(4) {
    padding-right: 5rem;
    float: right;
} */

.m_leader ul li img {
    width: 8rem;
    margin: 0 auto;
}

.m_leader ul li h3 {
    font-size: 1.1rem;
    margin-top: 1rem;
    color:#666;
    font-weight:100;
}
.top {
    position: absolute;
    display: block;
    right: 3rem;
    bottom: 5rem;
    width: 6rem;
    background: url(../images/top.png) no-repeat center top;
    background-size:1.4rem;
    height: 2.6rem;
    padding-top: 1.2rem;
    font-size: 1.2rem;
    color: #5d5d5d;
    line-height: 150%;
    text-align: center;
    z-index: 1;
}
.active .top {
    -webkit-animation: dragleft .7s ease-in-out 1.2s both;
    -moz-animation: dragleft .7s ease-in-out 1.2s both;
    -ms-animation: dragleft .7s ease-in-out 1.2s both;
    animation: dragleft .7s ease-in-out 1.2s both;
}
 @media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){
    .m_download_button {top:86%;}
    .m_class_list li {padding-top:1rem;}
    .m_qrcode_ul{top:60%;}
    .m_media_ul li:nth-child(3),.m_media_ul li:nth-child(4){display: none;}
    .active .investor_con{padding-top:0;}
    .about_logo{display: none}
    .m_about h2{padding-top:1rem;}
    .investor li{padding-bottom:0.1rem;}
    .m_leader h2{padding-bottom:1rem;}
    .m_leader ul li {padding:1% 3%;}
    .top {bottom:0.5rem;}
}
@media (device-width:414px) and (-webkit-min-device-pixel-ratio:3.0){
.m_about p {padding-bottom:1rem;}
}
/*
@media screen and (min-width: 321px) and (max-width: 374px) {
    .m_about p {
        font-size: 1rem;
        line-height: 150%;
    }
    .m_leader ul li {
        padding: 1% 3%;
    }
    .m_leader ul li img {
        width: 6.4rem;
    }
    .m_leader {
        bottom: 0;
    }
    .m_leader ul li h3 {
        font-size: 1rem;
        padding-top: 0;
    }
    .m_about h2,
    .m_leader h2 {
        font-size: 1.1rem;
        text-align: center;
        padding-bottom: 0%;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 2) {
    .m_about p {
        font-size: 1rem;
        line-height: 160%;
    }
    .m_leader ul li img {
        width: 6.7rem;
    }
    .m_leader {
        top: 44%;
    }
    .m_leader ul li h3 {
        font-size: 1rem;
        padding-top: 0rem;
    }
    .m_about h2,
    .m_leader h2 {
        font-size: 1.2rem;
        text-align: center;
        padding-bottom: 1%;
    }
}
@keyframes dragup {
    0% {
        transform:translatY(0px)
    }
    25%{
        transform:translateY(-20px)
    }
    50%{
        transform:translateY(0px)
    }
    75%{
        transform:translateY(20px)  
    }
    100% {
        transform:translateY(0px)
    }
}
@-webkit-keyframes dragup {
    0% {
        -webkit-transform:translatY(0px)
    }
    25%{
        -webkit-transform:translateY(-20px)
    }
    50%{
        -webkit-transform:translateY(0px)
    }
    75%{
        -webkit-transform:translateY(20px)  
    }
    100% {
        -webkit-transform:translateY(0px)
    }

    0% {
        opacity:0;
        -webkit-transform:translatX(-70px)
    }
    100% {
        opacity:1;
        -webkit-transform:translateX(0px)
    }
}
@-ms-keyframes dragleft {
    0% {
        opacity:0;
        -ms-transform:translatX(-70px)
    }
    100% {
        opacity:1;
        -ms-transform:translateX(0px)
    }
}
*/

@keyframes dragleft {
    0% {
        opacity: 0;
        transform: translatX(-70px)
    }
    100% {
        opacity: 1;
        transform: translateX(0px)
    }
}

@-webkit-keyframes dragleft {
    0% {
        opacity: 0;
        -webkit-transform: translatX(-70px)
    }
    100% {
        opacity: 1;
        -webkit-transform: translateX(0px)
    }
}

@-moz-keyframes dragleft {
    0% {
        opacity: 0;
        -moz-transform: translatX(-70px)
    }
    100% {
        opacity: 1;
        -moz-transform: translateX(0px)
    }
}

@-ms-keyframes dragleft {
    0% {
        opacity: 0;
        -ms-transform: translatX(-70px)
    }
    100% {
        opacity: 1;
        -ms-transform: translateX(0px)
    }
}

@keyframes dragTop {
    0% {
        opacity: 0;
        transform: translateY(-70px)
    }
    60% {
        opacity: 1;
        transform: translateY(20px)
    }
    90% {
        transform: translateY(-5px)
    }
    97% {
        transform: translateY(-1px)
    }
    100% {
        transform: translateY(0px)
    }
}

@-webkit-keyframes dragTop {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-70px)
    }
    60% {
        opacity: 1;
        -webkit-transform: translateY(20px)
    }
    90% {
        -webkit-transform: translateY(-5px)
    }
    97% {
        -webkit-transform: translateY(-1px)
    }
    100% {
        -webkit-transform: translateY(0px)
    }
}

@-moz-keyframes dragTop {
    0% {
        opacity: 0;
        -moz-transform: translateY(-70px)
    }
    60% {
        opacity: 1;
        -moz-transform: translateY(20px)
    }
    90% {
        -moz-transform: translateY(-5px)
    }
    97% {
        -moz-transform: translateY(-1px)
    }
    100% {
        -moz-transform: translateY(0px)
    }
}

@-ms-keyframes dragTop {
    0% {
        opacity: 0;
        -ms-transform: translateY(-70px)
    }
    60% {
        opacity: 1;
        -ms-transform: translateY(20px)
    }
    90% {
        -ms-transform: translateY(-5px)
    }
    97% {
        -ms-transform: translateY(-1px)
    }
    100% {
        -ms-transform: translateY(0px)
    }
}

@keyframes dragbot {
    0% {
        opacity: 0;
        transform: translateY(70px)
    }
    60% {
        opacity: 1;
        transform: translateY(-20px)
    }
    90% {
        transform: translateY(5px)
    }
    97% {
        transform: translateY(1px)
    }
    100% {
        transform: translateY(0px)
    }
}

@-webkit-keyframes dragbot {
    0% {
        opacity: 0;
        -webkit-transform: translateY(70px)
    }
    60% {
        opacity: 1;
        -webkit-transform: translateY(-20px)
    }
    90% {
        -webkit-transform: translateY(5px)
    }
    97% {
        -webkit-transform: translateY(1px)
    }
    100% {
        -webkit-transform: translateY(0px)
    }
}

@-moz-keyframes dragbot {
    0% {
        opacity: 0;
        -moz-transform: translateY(70px)
    }
    60% {
        opacity: 1;
        -moz-transform: translateY(-20px)
    }
    90% {
        -moz-transform: translateY(5px)
    }
    97% {
        -moz-transform: translateY(1px)
    }
    100% {
        -moz-transform: translateY(0px)
    }
}

@-ms-keyframes dragbot {
    0% {
        opacity: 0;
        -ms-transform: translateY(70px)
    }
    60% {
        opacity: 1;
        -ms-transform: translateY(-20px)
    }
    90% {
        -ms-transform: translateY(5px)
    }
    97% {
        -ms-transform: translateY(1px)
    }
    100% {
        -ms-transform: translateY(0px)
    }
}

@keyframes scaleAll {
    0% {
        opacity: 0;
        transform: scale(0) rotate(30deg);
    }
    30% {
        opacity: 1;
    }
    100% {
        transform: scale(1) rotate(0);
    }
}

@-webkit-keyframes scaleAll {
    0% {
        opacity: 0;
        -webkit-transform: scale(0) rotate(30deg);
    }
    30% {
        opacity: 1;
    }
    100% {
        -webkit-transform: scale(1) rotate(0);
    }
}

@-moz-keyframes scaleAll {
    0% {
        opacity: 0;
        -moz-transform: scale(0) rotate(30deg);
    }
    30% {
        opacity: 1;
    }
    100% {
        -moz-transform: scale(1) rotate(0);
    }
}

@-ms-keyframes scaleAll {
    0% {
        opacity: 0;
        -ms-transform: scale(0) rotate(30deg);
    }
    100% {
        opacity: 1;
        -ms-transform: scale(1) rotate(0);
    }
}

@keyframes scaleIn {
    0% {
        opacity: 0;
        transform: scale(3);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@-webkit-keyframes scaleIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(3);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
    }
}

@-moz-keyframes scaleIn {
    0% {
        opacity: 0;
        transform: scale(3);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@-ms-keyframes scaleIn {
    0% {
        opacity: 0;
        -ms-transform: scale(3);
    }
    100% {
        opacity: 1;
        -ms-transform: scale(1);
    }
}


.wxtip{background: rgba(0,0,0,0.8); text-align: center; position: fixed; left:0; top: 0; width: 100%; height: 100%; z-index: 998; display: none;}
.wxtip-icon{width: 52px; height: 67px; background: url(weixin-tip.png) no-repeat; display: block; position: absolute; right: 20px; top: 20px;}
.wxtip-txt{margin-top: 200px; color: #fff; font-size: 20px; line-height: 1.5;}