@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;}


#header { display: none;}
#headerEF{position:relative;width:100%;background: #fff url(../img/header.jpg) no-repeat top center; overflow:hidden;}
#headerEF .row { height: 780px; }
#headerEF .logo{display:block;width:300px;height:50px;float: left;overflow:visible;margin: 41px 0 100px;}
#headerEF .logo img { height:100%; width:auto;}
#headerEF .links {height: 36px;position: absolute;top: 48px;right: 0;}
#headerEF .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;}
#headerEF .links a:hover {background: #ccc; color: #22468c}
#headerEF .efh2 { position:absolute; width:100%; text-align:center; top:220px; font-size:80px; line-height:100px; color:#fff; font-weight:bold; transform:scale(2); opacity:0; transition:all 2s cubic-bezier(0, 0.65, 0.44, 0.96); }
#headerEF .efh2.animated { opacity:1; top:240px; transform:scale(1); text-shadow:0 0 18px rgb(12 12 12 / 16%) }
#headerEF .efh4 {position:absolute;top:425px;text-align:center;width:100%;font-size: 18px;letter-spacing: 5px;background:url(../img/ldh4.png) no-repeat;opacity:0;transition:all 1.5s;transition-delay:0.4s;color:#fff;}
#headerEF .efh4.animated { opacity:1; top:375px;letter-spacing:0px; text-shadow:0 0 18px rgb(12 12 12 / 16%) }
#headerEF .efpc { background: url(../img/pcicon.png) no-repeat; width:511px; height:357px; position:absolute; bottom:-200px; right:0; opacity:0; transition:all 1s; }
#headerEF .efpc.animated { bottom:0; opacity:1}

.productAbout { padding:108px 0 58px ;}
.productAbout .hd { position:absolute; background:url(../img/prodaboutbg.png) no-repeat; width:341px; height:135px; text-align:center; line-height:93px; text-align:center; margin-top:-54px; }
.productAbout .hd h2 { font-size:40px; color:#fff; font-weight:bold;  }
.productAbout .bd { background:#fff; box-shadow:0 0 15px rgb(0 0 0 / 6%); padding:70px 40px 30px 40px; border-radius:20px; font-size:20px; line-height:40px; text-indent:2em}

#mailProcess {padding: 60px 0;background: url(../img/mailprocessbg.jpg) no-repeat bottom center;height: 560px;}
#mailProcess .rowTi { margin-bottom:60px}
.processImg {width:704px;float:right;margin-left: 60px;}
.processImg h3 { font-size:14px; font-weight:400; text-align:center;}
.processIntro { padding-top:30px;}
.processIntro h2 {font-size:40px;font-weight:bold;line-height:100px;margin-bottom: 20px;}
.processIntro p { position:relative;font-size:16px; line-height:32px; padding-left:35px; margin-bottom:18px;}
.processIntro p:before { position:absolute; left:2px; top:9px; content:""; width:8px; height:8px; background:#27BAB7; background:linear-gradient( to bottom, #27BAB7, #34AE8D ); border-radius:50%; border:3px solid rgb(223 244 255 / 80%); box-shadow: 0 1px 4px rgb(146 146 146 / 25%)}

#funFrame { padding:40px 0;}
.frameBox .hd ul {height:0px;display:flex;justify-content: space-around; padding:0 2%; overflow:hidden; transition:all 1s; transition-delay:0.8s;}
.frameBox .hd.animated ul { height:100px;} 
.frameBox .hd li { float:left; width:300px; height:100px; background:#27BAB7; border-radius:20px 20px 0 0; margin:0 17px; line-height:100px; text-align:center; font-size:32px; color:#fff; font-weight:200; background:linear-gradient( to bottom, #34AE8B , #27BAB7); box-shadow:0 4px 15px rgb(49 177 149 / 25%)}
.frameBox .bd { height:620px; background:url(../img/framebg.jpg) no-repeat; border-radius:20px; box-shadow:0 0 20px rgb(0 0 0 / 10%)}
.frameBox .bd .con {display:flex;justify-content: space-around; padding:20px 2%; text-align:center;}
.frameBox .bd .con ul { float:left; width:300px; }
.frameBox .bd .con ul li { height:52px; line-height:52px; font-size:16px; margin-top:10px; opacity:0; transform:translateY(300px);transition:all 1s;}
.frameBox .bd.animated .con ul li { opacity:1; transform:translateY(0); }
.frameBox .bd.animated .con ul li:nth-child(2) { transition-delay:0.1s;}
.frameBox .bd.animated .con ul li:nth-child(3) { transition-delay:0.2s;}
.frameBox .bd.animated .con ul li:nth-child(4) { transition-delay:0.3s;}
.frameBox .bd.animated .con ul li:nth-child(5) { transition-delay:0.4s;}
.frameBox .bd.animated .con ul li:nth-child(6) { transition-delay:0.5s;}
.frameBox .bd.animated .con ul li:nth-child(7) { transition-delay:0.6s;}
.frameBox .bd.animated .con ul li:nth-child(8) { transition-delay:0.7s;}
.frameBox .bd.animated .con ul li:nth-child(9) { transition-delay:0.8s;}
.frameBox .bd.animated .con ul li:nth-child(10) { transition-delay:0.9s;}

#funList { padding-bottom:50px;}

@keyframes waving{
  0% { background-position: 142500px 0px; }
100% { background-position: 0px 0px; }
}

.funIcon {position:relative;height:280px;background:linear-gradient( to left, #44BDDF, #2FB39C);overflow: hidden;}
.funIcon i { position:absolute; width: 100vw;height: 120px;background: url(../img/wavline.png) repeat-x 0;background-size: 100% 100%;bottom: 0; left:0;animation:waving 700s linear infinite; opacity:0.33;}
.funIcon .line2 { opacity:0.4; bottom:-10px;animation:waving 850s linear infinite;  }
.funIcon .line3 { opacity:1; bottom:-20px;animation:waving 1000s linear infinite;  }
.funIcon h2 { text-align:center; font-size:40px; color:#fff; line-height:100px; padding-top:30px; font-weight:bold;}

.funBd { margin:0 -1.5%;}
.funLeft { float:left; width:47%; margin:0 1.5%; }
.funRight { float:right; width:47%; margin:0 1.5%;}
.funBox { margin-bottom:20px}
.funBox h3 {position:relative;border-bottom:1px solid #e5e5e5;line-height: 24px;height:26px;padding:15px 36px;font-size:20px;font-weight:bold;}
.funBox h3 i { position:absolute; width:26px; height:26px; left:0; border-radius:50%; background:#3CA8A8 url(../img/funico1.png) no-repeat center }
.funBox ul { padding-top:15px; margin-bottom:-10px}
.funBox ul li { position:relative; font-size:16px; line-height:30px; margin-bottom:10px; padding-left:16px; }
.funBox ul li:before {content:"";position:absolute;width:6px;height:6px;background: #9CD2C2;border-radius:50%;left:0;top:12px;}

.funBox .bd { display:grid; gap:55px; grid-row-gap:30px;grid-template-columns:1fr 1fr 1fr; padding-top:15px}
.funBox .bd dl dt { font-weight:bold; font-size:18px; line-height:36px; }
.funBox .bd dl dd {font-size:16px; line-height:30px; text-align:justify }
.funBox .bd dl dd a { display:block; color:#2F4593; text-decoration:underline; cursor:pointer }

.funBox2 h3 i { background-image:url(../img/funico2.png);}
.funBox3 h3 i { background-image:url(../img/funico3.png);}
.funBox4 h3 i { background-image:url(../img/funico4.png);}
.funBox5 h3 i { background-image:url(../img/funico5.png);}
.funBox6 h3 i { background-image:url(../img/funico6.png);}
.funBox7 h3 i { background-image:url(../img/funico7.png);}

.plist p { position:relative; font-size:16px; line-height:30px; margin-bottom:10px; padding-left:16px; }
.plist p:before {content:""; position:absolute; width:6px; height:6px; background:#ACB7D6; border-radius:50%; left:0; top:12px;}

.shadow{position: fixed; width: 100%; height: 100%; top: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 9; display: none;}
.tq_box{position: fixed; height: auto; width: 592px; padding: 38px 44px; background-color: #ffffff; box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2); border-radius: 5px; z-index: 10; top: 20%; margin: auto; left: 0; right: 0; display: none;}
.tq_box .tq_title{font-size: 24px; line-height: 24px; color: #000000; font-weight: 900; margin-bottom: 20px;}
.tq_box .tq_content{font-size: 16px; color: #000000; line-height: 24px; text-align: justify; /* font-weight: 900; */}
.tq_box .close{width: 20px; height: 20px; position: absolute; background: url(../img/close_icon.png) no-repeat; right: 30px; top: 30px; cursor: pointer;}


.techSupportList li a:hover { background:#32B092;  color:#fff;}
.lxss a{background-color:#2B8F8F!important;}