@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%;}
.row{width: 1400px; margin: auto; position: relative;}
.row:after { content:""; clear:both; display:block; overflow:hidden;}

.rowTi {border-bottom:1px solid #e2e2e2;height:81px;padding: 0;}
.rowTi h2 { position:relative; color:#021FA4; height:50px; line-height:50px; border-bottom: 2px solid #021FA4; display:inline-block; padding:0px 50px 30px;}
.rowTi h2:before {position:absolute;content:"";width:38px;height:38px;right: 38px;top:-5px;border-radius:50%;background: linear-gradient(180deg, rgba(255, 208, 0, 0.4) 0%, rgba(255, 208, 0, 0) 100%);}


@keyframes bgzoom {100%{ background-size:auto 100%; opacity:0; } 0%{ background-size:auto 120%; opacity:1; } }
@keyframes bgzoom2 {100%{ background-size:auto 100%; } 0%{ background-size:auto 120%; } }

#header { display: none;}
#headerTR{position:relative;width:100%; overflow:hidden; background: #312f7a url(../img/bg2.jpg) repeat-x center / auto 100%; animation: bgzoom2 10s linear; }
#headerTR:after { position:absolute; top:0; width:100%; height:100%; content:""; background: #312f7a url(../img/bg.jpg) repeat-x center / auto 100%; opacity:0; animation: bgzoom 10s linear;}
#headerTR .logo{display:block;width:300px;height:50px;float: left;overflow:visible;margin: 41px 0 100px;}
#headerTR .logo img { height:100%; width:auto;}
#headerTR .links {height: 36px;position: absolute;top: 48px;right: 0;}
#headerTR .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;}
#headerTR .links a:hover {background: #ccc; color: #22468c}

#headerTR .trfont { position:absolute; top:282px;font-size:18px; color:#fff; line-height:52px; font-weight:400; text-shadow:0 4px 4px rgb(0 0 0 / 25%); text-align:center; width:100%;}
#headerTR .trfont h1 {font-size: 92px;font-weight:bold; line-height:120px; }
#headerTR .trfont h1 b { display:inline-block; opacity:0}
#headerTR .trfont h1 b.animated { opacity:1}
#headerTR .trfont em { display:block; opacity:0;}
#headerTR .trfont em.animated { opacity:1}

#headerTR .row { height:997px; z-index:1 }

.productAbout {opacity:0;gap:10px;position:absolute;bottom:47px;padding:40px;line-height:48px;font-size:20px;text-align:left;background: linear-gradient(180deg, rgba(179, 190, 241, 0.95) 0%, rgba(255, 255, 255, 0.95) 16%, rgba(255, 255, 255, 0.95) 100%);border-radius:10px;margin: 0 10px;display: flex;flex-direction: column;}
.productAbout.animated { opacity:1;}
.productAbout p { text-indent:2em }


#performance { padding: 60px 0; background: #F1F7FF;}


#funList {padding: 50px 0;}
.osBox {display: grid;grid-gap: 30px 40px;grid-template-columns: repeat(3, 440px);}
.osBox dl { position:relative;background:#fff;border-radius:10px;height: 450px;padding: 50px 35px 20px;text-align: center;display:flex;flex-direction: column; transition:all 1s; overflow:hidden;}
.osBox dl:hover { box-shadow:0 0 20px #c8e0ff;}
.osBox dl::after { position:absolute; top:0; left:0; content:""; height:0; width:100%; background:linear-gradient(to top,#fff 50%,#fffdf0 100%) ; transition:all 1s}
.osBox dl:hover::after { opacity:1; height:100%;width:100%;}
.osBox dl img { margin:10px auto; transition:all 0.5s;}
.osBox dl:hover img { transform:scale(-1,1)}
.osBox dl h3 {font-size:24px;font-weight:700;padding: 20px 0;}
.osBox dl dt { position:relative; z-index:1}
.osBox dl dd {position:relative; z-index:1;font-size:16px;color:#666;text-align:left;font-weight: 400;text-indent:2em;line-height: 2em;}

.funBox .hd ul {display:flex;gap: 1.86%; margin-bottom:33px;}
.funBox .hd li { position:relative; z-index:1; width: 23.7%;height: 90px; border-radius: 10px;background: linear-gradient(180deg, #ECF4FF 0%, #D2E5FF 100%);line-height: 90px;font-size: 32px;color: #021FA4;vertical-align:middle;text-align: center; cursor:pointer;box-shadow: 0px 4px 10px 0px #1067DB1A;}
.funBox .hd li.on:after { content:""; width:48px; height:20px; display:block; background:url(../img/boxarr.png) no-repeat; position:absolute;  bottom:-34px; left:50%; margin-left:-24px; }
.funBox .hd li i {display:inline-block;background: url(../img/funico.png) no-repeat -20px 0;margin-right: 10px;width: 70px;height:90px;vertical-align: top; transition:all 0.5s}
.funBox .hd .li2 i {background-position-x: -376px;}
.funBox .hd .li3 i {background-position-x: -732px;}
.funBox .hd .li4 i {background-position-x: -1088px;}
.funBox .hd li.on { background: linear-gradient(180deg, #0D2EC4 0%, #021FA4 100%); color:#fff; font-weight:700;box-shadow: 0px 4px 8px 0px #1067DB33; }
.funBox .hd li.on i { background-position-y: -94px; }
.funBox .bd { background:#fff; border:1px solid #e2e2e2; padding:40px; border-radius:10px; line-height:32px;}

.funBox .bd dt { font-size:24px; font-weight:bold; margin-bottom:18px;}
.funBox .bd dd { font-size:16px; color:#666;}
.funBox .bd dd p { margin-bottom:18px; text-indent:2em}
.funBox .bd dl{/* margin-bottom:-18px; */}
.funBox .bd dl dl {background:#f8f8f8;padding: 30px 35px 12px;}
.funBox .bd dl dl dt { font-size:18px; height:24px; line-height:24px;}

.funBox .bd ul {padding: 20px 30px 10px;line-height:32px;background:#F8F8F8;border-radius:10px; margin-bottom:18px;}
.funBox .bd ul li { position:relative;line-height:32px; margin-bottom:10px; padding-left:20px;}
.funBox .bd ul li:before { position:absolute; left:5px; content:""; width:5px; height:5px; background:#d9d9d9; top:50%; margin-top:-3px;}

#technicalSupport {background: transparent;margin-bottom: -30px; padding-bottom:0;}

.techSupportList li a { box-shadow:0 0 0; background-color:#F8F9FA;}
.techSupportList li a:hover { background-color:#DEE8F5; color:#021FA4; font-weight:700}

.lxss { padding:60px 0;}
.lxss a, .lxss a.sq { background-color:#021FA4 }
.lxss a.sq:hover { background-color:#0013ba }


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