@charset "utf-8";

/* frame */
.wrap { overflow:hidden; }
a { transition:all 0.5s;}
body{min-width: 1400px;font-weight:400; background: linear-gradient(135deg, #f4f7fb 0%, #e3effa 100%); }
.clear{clear: both;}
#content{zoom: 1;width: 100%;}
.row{width: 1400px; margin: auto; position: relative;}
.row:after { content:""; clear:both; display:block; overflow:hidden;}


#header { display: none;}
#headerChannel{ position:relative; width:100%; height: 986px; background: linear-gradient(90deg, #48C6EF 0%, #6F86D6 100%); }
#headerChannel .logo{display:block;width:300px;height:50px;float: left;overflow:visible;margin: 41px 0 100px;}
#headerChannel .logo img { height:100%; width:auto;}
#headerChannel .links {height: 36px;position: absolute;top: 48px;right: 0;}
#headerChannel .links a { height:36px; background: rgba(0, 0, 0, 0.37); box-shadow: 0px 6px 8px 0px rgba(0, 0, 0, 0.16); border-radius: 18px;line-height: 36px;text-align: center;color: #fff;font-size: 16px; float:left; padding:0 1.5em;margin-left:10px;}
#headerChannel .links a:hover {background: linear-gradient(180deg, #FFFFFF 0%, #EEFCFF 100%); color: #4F77E4;}

#headerChannel .con { position: absolute; left: 0; top: 308px; right: 750px; line-height: 1.3; color: #fff; text-align: left; }
#headerChannel .con h1 { font-size: 80px; font-weight: bold; }
#headerChannel .con h3 { margin-top: 20px; font-size: 18px; }
#headerChannel .pics { position: absolute; z-index: 1; right: 0; top: 161px; width: 762px; height: 729px; transform-origin: right bottom; transform: scale(0.92); }
#headerChannel .pics > div { background-size: contain; }
#headerChannel .p-01,
#headerChannel .p-02,
#headerChannel .p-03 { position: absolute; left: 0; bottom: 380px; width: 69px; height: 108px; background: url(../img/pic-02.png) no-repeat; }
#headerChannel .p-02 { bottom: 283px; background-image: url(../img/pic-02.png); }
#headerChannel .p-03 { bottom: 184px; background-image: url(../img/pic-01.png); }
#headerChannel .p-04 { position: absolute; left: 44px; bottom: 0; width: 487px; height: 281px; background: url(../img/pic-03.png) no-repeat; }
#headerChannel .p-05 { position: absolute; left: 88px; top: 0; width: 250px; height: 602px; background: url(../img/pic-04.png) no-repeat; }
#headerChannel .p-06,
#headerChannel .p-07,
#headerChannel .p-08 { position: absolute; left: 139px; bottom: 100px; width: 231px; height: 573px; background: url(../img/pic-05.png) no-repeat; }
#headerChannel .p-07 { left: 209px; bottom: 60px; background-image: url(../img/pic-06.png); }
#headerChannel .p-08 { left: 277px; bottom: 20px; background-image: url(../img/pic-07.png); }

#headerChannel .p-09 { position: absolute; right: 0; top: 127px; width: 231px; height: 483px; background: url(../img/pic-08.png) no-repeat; }

.rowBox { margin-top: 50px; }
.rowBox:first-child { margin-top: 0; }
.rowBox > .hd { font-size: 0; line-height: 1; text-align: center; margin-bottom: 65px; }
.rowBox > .hd h3 { position: relative; display: inline-block; vertical-align: top; padding: 0 17px; font-size: 48px; line-height: 63px; font-weight: bold; background: linear-gradient(90deg, #4CB5EF, #3E61BB); background-clip: text; color: transparent; }
.rowBox > .hd h3::before,
.rowBox > .hd h3::after { position: absolute; content: ''; top: 50%; right: 100%; width: 257px; height: 27px; background: url(../img/bg-hd.png) no-repeat right top; transform: translateY(-50%); }
.rowBox > .hd h3::after { right: auto; left: 100%; background-position: left bottom; }

/* 页面信息 */
.rowInfo { margin-top: -124px; display: flex; align-items: center; gap: 40px; background: #fff; border-radius: 30px; padding: 60px 50px; }
.rowInfo .pic { width: 154px; height: 204px; background: url(../img/pic-09.png) no-repeat center center; background-size: contain; }
.rowInfo .con { flex: 1 0 0%; }
.rowInfo .intro { font-size: 20px; line-height: 1.7; text-indent: 2em; text-align: justify; }
.rowInfo .intro p { margin-bottom: 0.9em; }
.rowInfo .intro p:last-of-type { margin-bottom: 0; }


/* 产品优势 */
.advantageList { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 45px 40px; }
.advantageList li { flex: 1 0 440px; }
.advantageList .item { height: 100%; background: #fff; border-radius: 30px; padding: 50px 30px; box-sizing: border-box; }
.advantageList .pic span { position: relative; display: block; margin: 0 auto; width: 160px; height: 160px; border-radius: 50%; background: #f4f4f4; }
.advantageList .pic span::before { display: block; content: ''; width: 100%; height: 100%; background: url(../img/icons-advantage.png) no-repeat 0 0; background-size: auto 100%; }
.advantageList .con { margin-top: 40px; }
.advantageList .title span { display: flex; min-height: 60px; align-items: center; justify-content: center; line-height: 30px; text-align: center; color: #000; font-size: 24px; }
.advantageList .intro { margin-top: 30px; font-size: 16px; color: #666; line-height: 2; text-align: justify; text-indent: 2em; }
.advantageList .intro p { margin-bottom: 1.1em; }
.advantageList .intro p:last-of-type { margin-bottom: 0; }

.advantageList .li2 .pic span::before { background-position: -160px 0; }
.advantageList .li3 .pic span::before { background-position: -320px 0; }
.advantageList .li4 .pic span::before { background-position: -480px 0; }
.advantageList .li5 .pic span::before { background-position: -640px 0; }
.advantageList .li6 .pic span::before { background-position: -800px 0; }

.advantageList .item { transition: all ease 0.5s; }

.advantageList li:hover .pic span { animation: bgIcon 0.5s ease 1;  }
.advantageList li:hover .pic span::before { animation: icon 1s ease 1 0.5s; }
.advantageList li:hover .item { transform: translateY(-10px); box-shadow: 5px 5px 20px rgba(0, 45, 75, 0.1); }

.functionBox { margin-top: 37px; }
.functionBox:first-child { margin-top: 0; }
.functionBox > .hd { position: relative; text-align: center; font-size: 0; line-height: 1; margin-bottom: 33px; }
.functionBox > .hd::after { position: absolute; left: 0; right: 0; bottom: 0; margin: auto; content: ''; width: 900px; height: 1px; background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #3E63BC 51.5%, rgba(102, 102, 102, 0) 100%); }
.functionBox > .hd h3 { position: relative; z-index: 1; display: inline-block; vertical-align: top; padding: 0 32px; line-height: 64px; text-align: center; color: #fff; font-size: 32px; font-weight: bold; perspective: 120px; }
.functionBox > .hd h3::before { display: inline-block; vertical-align: top; width: 34px; height: 34px; margin: 15px 10px 0 0; content: ''; background: url(../img/icons-hd.png) no-repeat 0 0; background-size: auto 100%; }
.functionBox > .hd h3::after { position: absolute; z-index: -1; content: ''; left: 0; top: -5px; right: 0; bottom: 0; background: linear-gradient(90deg, #4CB5EF 0%, #3E61BB 100%); border-radius: 15px 15px 0 0; transform-origin: center bottom; transform: rotateX(8deg); }

/* 前端小程序功能一览表 */
.functionTable { width: 100%; border-radius: 30px; overflow: hidden; border: 1px solid #e5e5e5; }
.functionTable th,
.functionTable td { width: 16.66%; background: #fff; border: 1px solid #e5e5e5; padding: 25px 30px; font-size: 18px; line-height: 1.8; text-align: center; }
.functionTable th { padding-top: 34px; padding-bottom: 34px; font-weight: bold; font-size: 24px; background: #49C3EE; color: #fff; border: none; }
.functionTable th:nth-child(2) { background: #53B4E8; }
.functionTable th:nth-child(3) { background: #58abe4; }
.functionTable th:nth-child(4) { background: #5f9fe0; }
.functionTable th:nth-child(5) { background: #6694db; }
.functionTable th:nth-child(6) { background: #6e87d6; }
.functionTable th.col-tit { background: #71C6E4; font-size: 18px; }
.functionTable tr:nth-child(even) td { background: #F5F5F5; }
.functionTable tr:nth-child(even) th.col-tit { background: #7AD2F1; }

/* 老师端小程序 */
#function-02 > .hd h3::before { background-position: -34px 0; }
.box-01 { margin-top: 35px; }
.box-01:first-child { margin-top: 0; }
.box-01 .item { display: flex; padding: 68px 40px; gap: 40px; box-sizing: border-box; background: #fff; border-radius: 30px; }
.box-01 .pics { display: flex; justify-content: center; width: 344px; gap: 10px; }
.box-01 .pics img { width: 104px; height: auto; border: 2px solid #000; border-radius: 10px; }
.box-01 .con { flex: 1 0 0%; }
.box-01 .title { font-size: 24px; line-height: 32px; font-weight: bold; }
.box-01 .intro { margin-top: 28px; font-size: 16px; line-height: 2; text-indent: 2em; text-align: justify; color: #666; }
.box-01 .intro p { margin-bottom: 1.1em; }
.box-01 .intro p:last-of-type { margin-bottom: 0; }

.box-02 { margin-top: 35px; }
.box-02:first-child { margin-top: 0; }
.box-02 .item { padding: 40px 40px; background: #fff; border-radius: 30px; }
.box-02 .con { text-align: center; }
.box-02 .title { font-size: 24px; line-height: 32px; font-weight: bold; }
.box-02 .intro { margin-top: 28px; font-size: 16px; line-height: 2; text-align: center; color: #666; }
.box-02 .intro p { margin-bottom: 1.1em; }
.box-02 .intro p:last-of-type { margin-bottom: 0; }

.tabBox { margin: 25px 80px 0; }
.tabBox:first-child { margin-top: 0; }
.tabBox > .hd ul { display: flex; gap: 30px; justify-content: center; border-bottom: 1px solid #eee; }
.tabBox > .hd li { position: relative; padding: 38px 38px 27px; line-height: 26px; font-size: 20px; cursor: pointer; color: #000; }
.tabBox > .hd li::after { position: absolute; left: 0; right: 0; bottom: -3px; width: 45px; content: ''; margin: auto; height: 5px; background: linear-gradient(90deg, #3D3393 0%, #2B76B9 37%, #2CACD1 65%, #35EB93 100%); border-radius: 500px; transition: all ease 0.6s; transform: scaleX(0); visibility: hidden; }
.tabBox > .hd li.on { background: linear-gradient(90deg, #3D3393 0%, #2B76B9 37%, #2CACD1 65%, #35EB93 100%); background-clip: text; color: transparent; }
.tabBox > .hd li.on::after { transform: scaleX(1); visibility: visible; }
.tabBox > .bd { padding-top: 50px; }

.tabBox .in { display: flex; align-items: flex-start; gap: 50px; }
.tabBox .pics { display: flex; justify-content: center; width: 344px; gap: 10px; }
.tabBox .pics img { width: 104px; height: auto; border: 2px solid #000; border-radius: 10px; }
.tabBox .intro { margin-top: 0; flex: 1 0 0%; text-align: justify; text-indent: 2em; }

#workbenches-01 .tabBox .in { min-height: 245px; }

/* 学生及家长端小程序 */
#function-03 > .hd h3::before { background-position: -68px 0; }
#function-03 .list { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 45px 40px; }
#function-03 .list li { flex: 1 0 440px; }
#function-03 .list .item { height: 100%; background: #fff; border-radius: 30px; padding: 50px 40px; box-sizing: border-box; }
#function-03 .list .pic { text-align: center; }
#function-03 .list .pic img { width: 152px; height: auto; border: 2px solid #000; border-radius: 10px; vertical-align: top; }
#function-03 .list .con { margin-top: 40px; }
#function-03 .list .title span { display: block; line-height: 30px; text-align: center; font-size: 24px; font-weight: bold; }
#function-03 .list .intro { margin-top: 28px; font-size: 16px; color: #666; line-height: 2; text-align: justify; text-indent: 2em; }
#function-03 .list .intro p { margin-bottom: 1.1em; }
#function-03 .list .intro p:last-of-type { margin-bottom: 0; }

#function-03 .list .item,
#function-03 .list .pic img { transition: all ease 0.5s; }

#function-03 .list li:hover .pic img { transform: scale(1.1);  }
#function-03 .list li:hover .item { transform: translateY(-10px); box-shadow: 5px 5px 20px rgba(0, 45, 75, 0.1); }

/* 后台 */
#function-04 { margin-bottom: 55px; }
#function-04 > .hd h3 { perspective: 40px; }
#function-04 > .hd h3::before { background-position: -102px 0; }
#function-04 .list { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; }
#function-04 .list li { flex: 1 0 680px; }
#function-04 .list li:nth-of-type(1),
#function-04 .list li:nth-of-type(4) { flex-basis: 100%; }
#function-04 .list .item { display: flex; gap: 40px; height: 100%; background: #fff; border-radius: 30px; padding: 50px 30px; box-sizing: border-box; }
#function-04 .list .pic span { position: relative; display: block; margin: 0 auto; width: 120px; height: 120px; border-radius: 50%; background: #f4f4f4; }
#function-04 .list .pic span::before { display: block; content: ''; width: 100%; height: 100%; background: url(../img/icons-nweb.png) no-repeat 0 0; background-size: auto 100%; }
#function-04 .list .con { flex: 1 0 0%; }
#function-04 .list .title span { display: block; line-height: 32px; font-weight: bold; font-size: 24px;  }
#function-04 .list .intro { margin-top: 20px; font-size: 16px; color: #666; line-height: 2; text-align: justify; }
#function-04 .list .intro p { position: relative; padding-left: 20px; margin-bottom: 1.1em; }
#function-04 .list .intro p::before { position: absolute; left: 0; top: 14px; content: ''; width: 6px; height: 6px; border-radius: 50%; background: linear-gradient(90deg, #3D3393 0%, #2B76B9 37%, #2CACD1 65%, #35EB93 100%); }
#function-04 .list .intro p:last-of-type { margin-bottom: 0; }

#function-04 .list .li2 .pic span::before { background-position: -120px 0; }
#function-04 .list .li3 .pic span::before { background-position: -240px 0; }
#function-04 .list .li4 .pic span::before { background-position: -360px 0; }
#function-04 .list .li5 .pic span::before { background-position: -480px 0; }
#function-04 .list .li6 .pic span::before { background-position: -600px 0; }
#function-04 .list .li7 .pic span::before { background-position: -720px 0; }
#function-04 .list .li8 .pic span::before { background-position: -840px 0; }

#function-04 .list .item { transition: all ease 0.5s; }

#function-04 .list li:hover .pic span { animation: bgIcon 0.5s ease 1;  }
#function-04 .list li:hover .pic span::before { animation: icon 1s ease 1 0.5s; }
#function-04 .list li:hover .item { transform: translateY(-10px); box-shadow: 5px 5px 20px rgba(0, 45, 75, 0.1); }


/* 底部通用 */
.techSupportList li { box-sizing: border-box; border-radius: 10px; background: #fff; overflow: hidden; }
.techSupportList li:hover { background: linear-gradient(90deg, #5C98EE 0%, #4F77E4 100%); }
.techSupportList li a { box-shadow: none; border-radius: 0; }
.techSupportList li:hover a { background-color: transparent; color: #fff; }

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


@keyframes icon {
    0% {
        transform: rotateY(0deg);
    }
    50% {
        transform: rotateY(180deg);
    }
    100% {
        transform: rotateY(0deg);
    }
}