@charset "utf-8";

/* frame */
a { transition:all 0.5s;}
body{min-width: 1400px;font-weight:400;background: transparent;}
.clear{clear: both;}
#content{zoom: 1;width: 100%;overflow: hidden;}
.row{width: 1400px; margin: auto; position: relative;}
.row:after { content:""; clear:both; display:block; overflow:hidden;}

.rowTi { position:relative;display: block;padding: 0 0 30px;width: 288px;border-bottom: 1px solid #d9d9d9;margin: 0 auto;margin-bottom: 40px;}
.rowTi h2 { }
.rowTi h2 b { display:inline-block; background:linear-gradient( to right, #0B48AB, #007C5D );-webkit-background-clip: text; background-clip: text; color: transparent;}
.rowTi h2:before {content:"";width:0px;height:19px;background:url(../img/rowtileftarr.png) no-repeat right;display:inline-block; margin-top:-5px; margin-right:20px;vertical-align: middle;transition:all 2s;transition-delay:.5s;opacity:0}
.rowTi h2:after {content:"";width:0px;height:19px;background:url(../img/rowtirightarr.png) no-repeat left;display:inline-block; margin-top:-5px; margin-left:20px;vertical-align: middle;transition:all 2s;transition-delay:.5s;opacity:0}
.rowTi h2.animated:before {width: 43px;opacity:1}
.rowTi h2.animated:after { width:43px; opacity:1}
.rowTi:after, .rowTi:before { content:""; width:5px; height:5px; display:block; background:#d9d9d9; border-radius:50%; position:absolute; bottom:-3px; }
.rowTi:after { right:0;}


@keyframes pclight {100%{ filter:hue-rotate(0)} 50%{filter:hue-rotate(180deg)} 0%{ filter:hue-rotate(0)} }

#header { display: none;}
#headerTeachRes{position:relative;width:100%;height: 760px;background: #0a48ab url(../img/bg.jpg) repeat-x center;overflow: hidden; background-size:cover}
#headerTeachRes .logo{display:block;width:300px;height:50px;float: left;overflow:visible;margin: 41px 0 100px;}
#headerTeachRes .logo img { height:100%; width:auto;}
#headerTeachRes .links {height: 36px;position: absolute;top: 48px;right: 0;}
#headerTeachRes .links a { height:36px;background-color: rgb(0 0 0 / 34%);border-radius: 18px;line-height: 36px;text-align: center;color: #fff;font-size: 16px; float:left; padding:0 1.5em; box-shadow: 0 5px 5px rgb(0 0 0 / 10%); margin-left:10px;}
#headerTeachRes .links a:hover {background: #ccc; color: #22468c}

#headerTeachRes .trefont {position: absolute;top:282px;font-size:18px;text-align: left!important;color:#fff;line-height:52px;font-weight:400;text-shadow:0 4px 4px rgb(0 0 0 / 25%);text-align:center;transition:all 2s;opacity:0;}
#headerTeachRes .trefont h1 {font-size: 80px;font-weight:bold; line-height:120px; transition:all 4s; }

#headerTeachRes .trepc {position:absolute;left: 890px;top:156px;}
#headerTeachRes .trepc .i1 { transition:all 1s; transition-delay:0s; background:url(../img/group1.png) no-repeat;width:465px;height:329px;position:absolute;left:134px;top:258px; z-index:7; opacity:0;}
#headerTeachRes .trepc .i2 { transition:all 0.6s; transition-delay:0.4s; background:url(../img/group2.png) no-repeat;width:263px;height:366px;position:absolute;left:258px;top:-80px; z-index:8; opacity:0; }
#headerTeachRes .trepc .i3 { transition:all 1s; transition-delay:1.3s; background:url(../img/group3.png) no-repeat;width:231px;height:303px;position:absolute;left:177px;top:6px; z-index:9; opacity:0; }
#headerTeachRes .trepc .i4 { transition:all 1s; transition-delay:0.8s; background:url(../img/group4.png) no-repeat;width:160px;height:105px;position:absolute;left:227px;top:524px; z-index:6; opacity:0;}
#headerTeachRes .trepc .i5 { transition:all 1s; transition-delay:0.6s; background:url(../img/group5.png) no-repeat;width:360px;height:376px;position:absolute;left:121px;top:-37px; z-index:5; opacity:0;}
#headerTeachRes .trepc .i6 { transition:all 1s; transition-delay:1s; background:url(../img/group6.png) no-repeat;width:411px;height:303px;position:absolute;left:-78px;top:359px; z-index:4; opacity:0;}
#headerTeachRes .trepc.animated .i1 { top:208px; opacity:1 }
#headerTeachRes .trepc.animated .i2 { top:0; opacity:1 }
#headerTeachRes .trepc.animated .i3 { left:227px; opacity:1; }
#headerTeachRes .trepc.animated .i4 { left:335px;top:462px; opacity:1 }
#headerTeachRes .trepc.animated .i5 { left:0px;top:44px; opacity:1 }
#headerTeachRes .trepc.animated .i6 { left:19px;top:300px; opacity:1 }

.productAbout {line-height:2em;font-size:20px;padding: 80px 0 66px;;text-align:left; text-indent:2em; background:#F8F8F8; }
.productAbout p { margin-bottom:14px;}

#content .intro {line-height:30px;font-size:18px;text-align:center;padding:0 200px;margin-bottom: 60px;}

#background { padding: 100px 0; position:relative;}
#background .bgBox {display: flex;gap: 36px;margin: 0 100px;padding-bottom: 255px;}
#background .bgBox dl {position:relative;flex:1;background:#fff;box-shadow: 0 0 10px rgb(111 192 116 / 40%);border-radius:20px;padding: 53px 28px 30px;font-size:16px;line-height:30px;height: 215px;z-index: 1;}
#background .bgBox dl dt { position:absolute; width:120px; line-height:50px; left:50%; margin-left:-60px; top:-18px;; background:#6fc074; border-radius:10px; text-align:center; font-size:24px; font-weight:bold; color:#fff;   }
#background .bgBox dl i {position:absolute;top:300px;width: 1px;border-left:1px dashed #6FC074;display:block;height:69px;left: 50%;z-index: 11;}
#background .bgBox dl i:after {  position:absolute; bottom:-8px; left:-11px;; content:""; display:block; width:11px; height:11px; background:#6FC074; border-radius:50%; border:6px solid #FFFCB6; box-shadow:-2px -2px 0 #6FC074; }
#background .bgBox dl dd {text-indent:2em;text-align: justify;}
#background .bgBox .dl2 i { height:211px;}
#background .bgBox .dl1 i { height:240px;}
#background .bgBox .arrowline {position:absolute;bottom:0;background:url(../img/arrowline.png) no-repeat;height:326px;width:1200px;z-index: 0;}
#background .bgBox:before { content:""; position:absolute; width:100px; height:100px;background:url(../img/arrowline.png) no-repeat right top; right:100px; z-index:9; top:458px; }

#advantage { background:#F7FBF8; padding:100px 0;}
.advantageList {display:flex;flex-wrap: wrap;flex-direction: row;gap:1.4%;margin-bottom: -20px;}
.advantageList dl { width:49.3%; background:#fff; border-radius:20px; box-shadow:0 0 10px rgb(111 192 116 / 20%); margin-bottom:20px;}
.advantageList dl dt {padding: 30px 30px 0px;line-height:34px;font-size:24px;}
.advantageList dl dt i {width:34px;height:34px;float:left;margin-right: 12px;}
.advantageList dl .pic {float:right;margin-top: 10px;}
.advantageList dl dd { padding:20px 30px 30px; font-size:16px; line-height:2em; text-indent:2em; color:#555;}

.funBox { position:relative; border:1px solid #d9d9d9; border-top:2px solid #007C5D; margin-bottom:20px; border-radius:10px 2px 0 0 }
.funBox img { width:100%}
.funBox .hd { height:66px; }
.funBox .hd h3 {position:absolute;top:-2px;border-radius:10px 0 0 0;background:linear-gradient(to right, #0B48AB 0%, #007C5D 70%);height:68px;line-height:68px;font-size:24px;color:#fff;padding:0 30px;padding-right:69px;font-weight: 400;}
.funBox .hd h3:after { content:"";position:absolute; background:url(../img/teachhdbg.png) no-repeat ; width:59px; height:68px; right:0;  }
.funBox .bd {padding: 9px 29px 9px;position: relative;}
.funBox .bd::after { content:"";  display:block; clear:both;}
.funBox .bd .largebox { background:#F8F8F8; text-align:center; }
.funBox .bd .largebox {float: left;height: 410px;line-height: 1em;}
.funBox .bd .largebox img { }

.funBox .bd h3 {border-bottom:1px solid #d9d9d9;height:40px;line-height:30px;font-size:18px;font-weight:bold;margin-top: 15px;}
.funBox .bd h3:before { content:""; width:6px; height:20px; background:#007C5D; float:left; margin:5px 14px 0 1px}
.funBox .bd ul {margin-bottom: 15px;}

#funList { padding:80px 0 ; overflow:hidden;}
#funList ul { margin-left: -9px;}
#funList li {padding: 8px 0 8px 40px;font-size:16px;line-height: 32px;transition:all 1s;overflow:hidden;position: relative;}
#funList li:hover {background:#fff;color: #007C5D;}
#funList p {line-height:30px;font-size:16px;color:#666;background:#fff;padding: 13px 0;margin:6px 0;text-indent: 2em;}

#funList dl.animated { transform:translateX(0)translateY(0);opacity:1; }

#funList li svg{float:left;width: 40px;height: 40px;transform: scale(.5);position: absolute;left: 0;top: 4px;}
@keyframes suc{100%{transform: scale(1);} 20%{transform: scale(0.8);} 0%{transform: scale(0.6);}}
#funList li:hover svg{animation: suc 0.5s ease-in-out;animation-delay: .2s;animation-fill-mode: forwards;transform: scale(.8);}
.circle{stroke-dasharray: 0; stroke-dashoffset: 0; stroke: #007C5D;}
@keyframes circle{from{stroke-dasharray: 119; stroke-dashoffset: 119;} to{stroke-dasharray: 119; stroke-dashoffset: 119;}}
#funList li:hover svg .circle{animation: circle 1s ease-in-out; animation-delay: .8s; animation-fill-mode: forwards;stroke-dasharray: 119; stroke-dashoffset: 119; stroke: #007C5D;}
.tick{stroke-dasharray: 0; stroke-dashoffset: 0; stroke: #007C5D;}
@keyframes tick{from{stroke-dashoffset: 60;} to{stroke-dashoffset: 0;}}
#funList li:hover svg .tick{animation: tick 1.2s ease-in-out; animation-fill-mode: forwards; stroke-dasharray: 60; stroke-dashoffset: 60; stroke: #007C5D;}

#funList .item { float:left; width:48.5%}
#funList .item:nth-child(2n+1) { margin-right:3%}

#technicalSupport {background: #F8F8F8; padding:80px 0 60px;}
#technicalSupport .rowTi { width:530px; border:0;}
#technicalSupport .rowTi:before,
#technicalSupport .rowTi:after { display:none}

.techSupportList li a { box-shadow:0 0 0; border:1px solid #ededed; z-index:9; position:relative; }
.techSupportList li a:hover { background-color:#1E5BB3 }
.techSupportList li { position:relative; }
.techSupportList li:before { content:""; width:100%; height:100%; position:absolute; background: linear-gradient(85.42deg, #CCDBFF -4.15%, #5F81EF 95.78%); border-radius:10px; opacity:0; transition:all 0.5s } 
.techSupportList li:hover::before { opacity:1}

.lxss a{background-color: transparent!important; position:relative;}
.lxss a span { position:relative; z-index:1; background: url(../../products/img/lx-icon.png) 36px 50% no-repeat; display:block;}
.lxss a.sq span { position:relative; z-index:1; background: url(../../products/img/tymk-icon.png) 25px 50% no-repeat; display:block; background-size: 14%;}
.lxss a:after { position:absolute; top:0; z-index:0; content:""; display:block; width:100%; height:100%;background: linear-gradient(85.42deg, #0B48AB 0%, #007C5D 100%); border-radius:30px;}

@media only screen and (max-width: 1400px){}