@charset "UTF-8";

html.fp-enabled,
.fp-enabled body{
    margin: 0;
    padding: 0;
    overflow:hidden;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
#superContainer{
    height: 100%;
    position: relative;
    -ms-touch-action: none;
    touch-action: none;
}
.fp-section{
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.fp-slide{
    float: left;
}
.fp-slide, .fp-slidesContainer{
    height: 100%;
    display: block;
}
.fp-slides{
    z-index:1;
    height: 100%;
    overflow: hidden;
    position: relative;
    -webkit-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.fp-section.fp-table, .fp-slide.fp-table{
    display: table;
    table-layout:fixed;
    width: 100%;
}
.fp-tableCell{
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}
.fp-slidesContainer{
    float: left;
    position: relative;
}
.fp-controlArrow{
    -webkit-user-select: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    -ms-user-select: none;
    position: absolute;
    z-index: 4;
    top: 50%;
    cursor: pointer;
    width: 0;
    height: 0;
    border-style: solid;
    margin-top: -38px;
    -webkit-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
.fp-controlArrow.fp-prev{
    left: 15px;
    width: 0;
    border-width: 38.5px 34px 38.5px 0;
    border-color: transparent #fff transparent transparent;
}
.fp-controlArrow.fp-next{
    right: 15px;
    border-width: 38.5px 0 38.5px 34px;
    border-color: transparent transparent transparent #fff;
}
.fp-scrollable{
    overflow: scroll;
}
.fp-notransition{
    -webkit-transition: none !important;
    transition: none !important;
}
#fp-nav{
    position: fixed;
    z-index: 100;
    margin-top: -32px;
    top: 50%;
    opacity: 1;
    -webkit-transform: translate3d(0,0,0);
}
#fp-nav.right{
    right: 17px;
}
#fp-nav.left{
    left: 17px;
}
.fp-slidesNav{
    position: absolute;
    z-index: 4;
    left: 50%;
    opacity: 1;
}
.fp-slidesNav.bottom{
    bottom: 17px;
}
.fp-slidesNav.top{
    top: 17px;
}
#fp-nav ul,
.fp-slidesNav ul{
    margin: 0;
    padding: 0;
}
#fp-nav ul li,
.fp-slidesNav ul li{
    display: block;
    width: 54px;
    height: 54px;
    margin: 15px 5px;
    position: relative;
}
.fp-slidesNav ul li{
    display: inline-block;
}
#fp-nav ul li a,
.fp-slidesNav ul li a{
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    cursor: pointer;
    text-decoration: none;
}
#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span{
    height: 54px;
    width: 54px;
    background-position: -64px 0;
    border-radius: 100%;
}
#fp-nav ul li:first-child a.active span,
.fp-slidesNav ul li:first-child a.active span,
#fp-nav ul li:first-child:hover a.active span,
.fp-slidesNav ul li:first-child:hover a.active span{
    background-position: -64px -64px;
}
#fp-nav ul li+li+li a.active span,
.fp-slidesNav ul li+li+li a.active span,
#fp-nav ul li+li+li:hover a.active span,
.fp-slidesNav ul li+li+li:hover a.active span{
    background-position: -64px -128px;
}
#fp-nav ul li a span,
.fp-slidesNav ul li a span{
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    height: 54px;
    width: 54px;
    border: 0;
    background: url("../images_app/app_side_icon.png") no-repeat 0 0;
    box-shadow: 0 0 1px rgba(0,0,0,.3);
}
#fp-nav ul li:first-child a span,
.fp-slidesNav ul li:first-child a span{
    background-position: 0 -64px;
}
#fp-nav ul li+li+li a span,
.fp-slidesNav ul li+li+li a span{
    background-position: 0 -128px;
}
#fp-nav ul li:hover a span,
.fp-slidesNav ul li:hover a span{
    width: 54px;
    height: 54px;
}
#fp-nav ul li .fp-tooltip{
    position: absolute;
    top: 50%;
    line-height: 20px;
    color: #fff;
    font-size: 14px;
    white-space: nowrap;
    max-width: 220px;
    overflow: hidden;
    display: block;
    width: auto;
    opacity: .5;
    filter: alpha(opacity=50);
    margin-top: -10px;
    text-shadow: 1px 1px 2px #999;
}
#fp-nav ul li:hover .fp-tooltip,
#fp-nav ul li a.active + div.fp-tooltip,
#fp-nav.fp-show-active a.active + .fp-tooltip{
    -webkit-transition: opacity 0.2s ease-in;
    transition: opacity 0.2s ease-in;
    width: auto;
    opacity: 1;
    filter: alpha(opacity=100);
}
#fp-nav ul li .fp-tooltip.right{
    right: 65px;
}
#fp-nav ul li .fp-tooltip.left{
    left: 20px;
}
.fp-auto-height.fp-section,
.fp-auto-height .fp-slide,
.fp-auto-height .fp-tableCell{
    height: auto !important;
}

.zxAppDownload{
    font-size: 14px;
}
.section{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
.section1{
    background: #3ab1f6;
}
.section2{
    background: #94d779;
}
.section3{
    background: #9b86e7;
}
.app_head{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background: #ffffff;
}
.app_head a{
    display: block;
    position: absolute;
    left: 50%;
    top: 10px;
    height: 50px;
    margin-left: -500px;
}
.app_head a img{
    width: 100%;
    height: 100%;
}
.first_bg{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1800px;
    height: 243px;
    background: url("../images_app/section1_bg.png") no-repeat center bottom;
    margin-left: -900px;
    margin-top: 50px;
    z-index: 5;
    animation: first_bg_move 8s linear infinite;
}
.a_title{
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    font-size: 40px;
    color: #ffffff;
    text-align: center;
    margin-top: -310px;
    z-index: 10;
}
.f_pic1{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 325px;
    height: 380px;
    background: url("../images_app/new_first_pic1.png") no-repeat center top;
    margin-left: -162px;
    margin-top: -240px;
}
.f_pic2{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 666px;
    height: 194px;
    background: url("../images_app/first_pic2.png") no-repeat center top;
    margin-left: -333px;
    margin-top: -40px;
    z-index: 7;
}
.f_pic3{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 666px;
    height: 194px;
    background: url("../images_app/first_pic3.png") no-repeat center top;
    margin-left: -333px;
    margin-top: -40px;
    z-index: 7;
}
.app_name{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 360px;
    margin-left: -180px;
    margin-top: 145px;
    z-index: 6;
}
.app_name fieldset{
    border-top: 2px solid #31ABF3;
}
.app_name fieldset legend{
    font-size: 20px;
    color: #ffffff;
    padding: 0 15px;
}
.d_code{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 136px;
    height: 136px;
    margin-left: -340px;
    margin-top: 200px;
    z-index: 6;
    padding: 8px;
    background: #fff;
    box-sizing: border-box;
}
.d_code img{
    width: 100% !important;
    height: 100% !important;
}
.download_btns {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 51px;
    margin-left: -160px;
    margin-top: 248px;
    z-index: 6;
    background-image: none;
    box-sizing: border-box;
}
.d_andorid, .d_ios, .d_harmonyos{
    display: inline-block;
    border: 2px solid rgba(255, 255, 255, 0.7);
    color: rgba(255, 255, 255, 0.7);
    font-size: 19px;
    line-height: 47px;
    text-align: center;
    cursor: pointer;
    border-radius: 100px;
    opacity: 1;
    box-sizing: border-box;
    border: 2px solid #FFFFFF;
    width: 174px;
    height: 50px;
    color: #FFFFFF;
}

.d_andorid {
    position: relative;
    margin-left: 32px;
    padding-right: 20px;
}
.d_andorid .hover-btn {
    position: absolute;
    right: 25px;
    top: 17px;
    width: 16px;
    height: 16px;
    cursor: pointer;
    background: url("../images/arrow-down.png") no-repeat center top;
}
.d_andorid32 {
    display: none;
    /* display: inline-block; */
    color: rgba(255, 255, 255, 0.7);
    background: #FFFFFF;
    border-radius: 4px;
    opacity: 1;
    width: 188px;
    font-size: 19px;
    line-height: 47px;
    text-align: center;
    cursor: pointer;
    position: absolute;
    bottom: -65px;
    left: 203px;
}
.d_andorid32.teacher {
    color: #9B86E7;
}
.d_andorid32.student {
    color: #8ecf75;
}
.d_andorid32.parent {
    color: #39acef;
}
.d_andorid32::after {
    /* 三角形箭头 箭头朝上 */
    content: "";
    position: absolute;
    left: 50%;
    bottom: 45px;
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent #FFFFFF transparent;
    transform: translateX(-50%);
}
.d_harmonyos {
    margin-left: 32px;
    position: relative;
}
.harmony_tips {
    display: none;
    /* display: inline-block; */
    color: rgba(255, 255, 255, 0.7);
    background: #FFFFFF;
    border-radius: 4px;
    opacity: 1;
    width: 188px;
    font-size: 16px;
    line-height: 1;
    padding: 10px;
    text-align: center;
    position: absolute;
    bottom: -70px;
    left: -16px;
}
.harmony_tips.teacher {
    color: #9B86E7;
}
.harmony_tips.student {
    color: #8ecf75;
}
.harmony_tips.parent {
    color: #39acef;
}
.harmony_tips::after {
    /* 三角形箭头 箭头朝上 */
    content: "";
    position: absolute;
    left: 50%;
    bottom: 50px;
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent #FFFFFF transparent;
    transform: translateX(-50%);

}
.d_andorid:hover, .d_ios:hover, .d_harmonyos:hover {
    background: rgba(255, 255, 255, 0.2);
}
.section2 .app_name fieldset{
    border-top-color: #99db7e;
}
.second_bg{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 1920px;
    height: 300px;
    background: url("../images_app/section2_bg.jpg") no-repeat center top;
    margin-left: -960px;
    margin-top: 100px;
    z-index: 2;
}
.s_pic1{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 800px;
    height: 600px;
    background: url("../images_app/new_second_pic1.png") no-repeat center top;
    margin-left: -400px;
    margin-top: -350px;
}
.s_pic2{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 111px;
    height: 111px;
    background: url("../images_app/second_pic2.png") no-repeat center top;
    margin-left: -284px;
    margin-top: -20px;
    z-index: 8;
}
.s_pic3{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 111px;
    height: 111px;
    background: url("../images_app/second_pic3.png") no-repeat center top;
    margin-left: 225px;
    margin-top: -200px;
    z-index: 8;
}
.section3 .app_name fieldset{
    border-top-color: #A985F7;
}
.t_pic1{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 600px;
    height: 424px;
    background: url("../images_app/third_pic1.png") no-repeat center top;
    margin-top: -230px;
    margin-left: -300px;
}
.t_pic2{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 168px;
    height: 168px;
    background: url("../images_app/third_pic2.png") no-repeat center top;
    margin-top: -45px;
    margin-left: -340px;
}
.t_pic3{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 176px;
    height: 176px;
    background: url("../images_app/third_pic3.png") no-repeat center top;
    margin-top: -235px;
    margin-left: 170px;
}
.app_footer{
    display: block;
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    line-height: 60px;
    color: #666;
    text-align: center;
    background: #ffffff;
}
.move_next {
    display: block;
    position: absolute;
    left: 50%;
    bottom: 40px;
    width: 31px;
    height: 30px;
    background: url("../images_app/zx_app_icon.png") no-repeat center -32px;
    margin-left: -15px;
    animation: move_next 1.2s linear infinite;
    z-index: 33;
}

/*手机WAP*/
.section4{
    background: #f5fffe;
}
.app_f_tit{
    position: absolute;
    left: 0;
    top: 10%;
    width: 100%;
    font-size: 1.2rem;
    color: #666666;
    text-align: center;
}
.app_f_icon{
    position: absolute;
    left: 50%;
    top: 22%;
    width: 13rem;
    height: 9rem;
    background: url("../images_app/wap_f_page.png") no-repeat center;
    background-size: 100% 100%;
    margin-left: -6.5rem;
}
.app_s_tit{
    position: fixed;
    left: 0;
    /*top: 64%;*/
    bottom: 8rem;
    width: 100%;
    font-size: .48rem;
    color: #999999;
    text-align: center;
}
.first_page_a{
    display: block;
    position: fixed;
    left: 50%;
    /*top: 73%;*/
    bottom: 5rem;
    width: 80%;
    line-height: 2rem;
    font-size: .66rem;
    color: #ffffff;
    background: #0dc2b3;
    border: 1px solid #0dc2b3;
    border-radius: 1.09rem;
    text-align: center;
    margin-left: -40%;
}
.first_page_a.s{
    /*top: 84%;*/
    bottom: 2rem;
    color: #0dc2b3;
    background: none;
}
.move_next.app{
    bottom: 1rem;
    width: 1.2rem;
    height: .52rem;
    background: url("../images_app/d_wap_arrow.png") no-repeat center bottom / 100% 200%;
    margin-left: -.6rem;
}
.section5{
    background: #9b86e7;
}
.move_top{
    display: block;
    position: absolute;
    left: 50%;
    top: .3rem;
    width: 1.2rem;
    height: .52rem;
    background: url("../images_app/d_wap_arrow.png") no-repeat center top / 100% 200%;
    margin-left: -.6rem;
    animation: move_next 1.2s linear infinite;
    z-index: 33;
}
.app_h{
    position: relative;
    height: 50%;
}
.app_h.stu{
    background: #3ab1f6 url("../images_app/student_app.png") no-repeat center;
    background-size: 16rem;
}
.app_h.par{
    background: #94d779 url("../images_app/parent_app.png") no-repeat center;
    background-size: 16rem;
}
.app_h.tea{
    background: #94d779 url("../images_app/teacher_app.png") no-repeat center;
    background-size: 16rem;
}
.app_h a{
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5.6rem;
    line-height: 1.6rem;
    font-size: .54rem;
    color: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 0.88rem;
    text-align: center;
    margin-top: 4.3rem;
    margin-left: -2.8rem;
}
.app_h.par a{
    margin-left: -6.6rem;
}
.app_h.tea a{
    margin-top: 3.5rem;
}
@keyframes first_bg_move{
    0%,100%{
        -webkit-transform: translate(0,0) rotateX(0deg);
        transform: translate(0,0) rotateX(0deg);
    }
    50%{
        -webkit-transform: translate(-20px,-20px) rotateX(5deg);
        transform: translate(-20px,-20px) rotateX(5deg);
    }
}
@-webkit-keyframes first_bg_move{
    0%,100%{
        -webkit-transform: translate(0,0) rotateX(0deg);
        transform: translate(0,0) rotateX(0deg);
    }
    50%{
        -webkit-transform: translate(-20px,-20px) rotateX(5deg);
        transform: translate(-20px,-20px) rotateX(5deg);
    }
}

@keyframes move_next{
    0%,100%{
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    50%{
        -webkit-transform: translateY(15px);
        transform: translateY(15px);
    }
}
@-webkit-keyframes move_next{
    0%,100%{
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    50%{
        -webkit-transform: translateY(15px);
        transform: translateY(15px);
    }
}