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

.rowTi {text-align:center;margin-bottom: 40px;padding:10px;height: 40px;line-height: 40px;}
.rowTi h2 { font-size:40px; font-weight:bold; color:#333; opacity:0; transform:translateY(100px); transition:all 1s; }
.rowTi h2.animated { opacity:1;  transform:translateY(0)}

#header { display: none;}
#headerSS{position:relative;width:100%;height: 760px;background:#f8f8f8 url(../img/header.jpg) no-repeat top center;}
#headerSS .logo{display:block;width:300px;height:50px;float: left;overflow:visible;margin: 41px 0 100px;}
#headerSS .logo img { height:100%; width:auto;}
#headerSS .links {height: 36px;position: absolute;top: 48px;right: 0;}
#headerSS .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;}
#headerSS .links a:hover {background: #ccc; color: #22468c}
#headerSS .ssh2 { position:absolute; width: 620px; top:290px; opacity:0; transition:all 1s; left:50%; margin-left:-310px; text-align:center; background: #fff; font-size:90px; line-height: 1.4em; font-weight:bold; -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow( 0 0 18px rgb(12 12 12 / 40%)); -webkit-transition:all 1s; -moz-transition:all 1s; -ms-transition:all 1s; -o-transition:all 1s; }
#headerSS .ssh2.animated {opacity:1;top: 220px;}
#headerSS .ssh4 {position:absolute;top: 373px;text-align:center;width:100%;font-size: 18px;letter-spacing:0em;opacity:0;transition:all 1.5s;transition-delay:0.6s;color:#fff;}
#headerSS .ssh4.animated {opacity:1;}
#headerSS .ssimg {opacity:0; transition:all 1.5s;transition-delay:1s;width:500px;height:50px;background:url(../img/searchimg.png) no-repeat;position:absolute;top:473px;left:50%;margin-left:-250px;color: rgb(255 255 255 / 50%);font-size: 18px;padding-left: 67px;line-height: 48px;}
#headerSS .ssimg.animated {opacity:1;}
.line {
	margin-top: 9px;
	height: 30px;
	line-height: 30px;
	width: 72px;
	border-right: 1px solid #fff;
	font-size: 18px;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	color: #5ec4ff;
	background: #fff;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	opacity: .5;
}

.animation {
	animation: grow 4s steps(4) 0.25s normal infinite,
                blink 0.3s steps(4) infinite normal; 
	animation-delay:1.5s;
}

@keyframes grow {
    0% {
        width: 0;
    }
    25% {
        width: 72px;
    }
    100%{
       width: 72px;
    }
}
@keyframes blink {
    from {
        border-right-color: #fff;
    }
    to {
        border-right-color: #759fd3;
    }
}

#advantage {position: relative; padding: 80px 0; }
#advantage { background:url(../img/advantagebg.jpg) no-repeat center top}
.advantageBox ul { margin:0 -0.7%;}
.advantageBox ul li {position:relative;float:left;width:18.6%;margin:0 0.7%;height:300px;border-radius:20px;margin-bottom:20px;overflow:hidden;}
.advantageBox ul li>div {height:260px;padding:20px;transition:all .5s;position:relative;border-radius:20px;z-index: 0;}
.advantageBox ul li .cont { background:#fff; overflow:hidden; }
.advantageBox ul li .layer {position:absolute;visibility:hidden;top:150px;opacity:0;z-index: 9;}
.advantageBox ul li i { width:60px; height:60px; display:block; margin:20px auto 10px; background:url(../img/advico1.png) no-repeat center;}
.advantageBox ul li h3 { font-size:20px; line-height:26px; font-weight:400; text-align:center; padding:10px;}
.advantageBox ul li .intro { height:40px; line-height:20px; color:#666; display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2; overflow: hidden;text-overflow: ellipsis;}
.advantageBox ul li span { position:absolute; bottom:20px; left:50%; margin-left:-60px; height:36px; line-height:36px; background:rgb(14 105 215 / 10%); width:120px; text-align:center; font-size:18px; color:#0062D9; border-radius:18px; }
.advantageBox ul li .layer .intro { text-indent:2em }

.advantageBox ul .li2 i { background-image:url(../img/advico2.png)}
.advantageBox ul .li3 i { background-image:url(../img/advico3.png)}
.advantageBox ul .li4 i { background-image:url(../img/advico4.png)}
.advantageBox ul .li5 i { background-image:url(../img/advico5.png)}
.advantageBox ul .li6 i { background-image:url(../img/advico6.png)}
.advantageBox ul .li7 i { background-image:url(../img/advico7.png)}
.advantageBox ul .li8 i { background-image:url(../img/advico8.png)}
.advantageBox ul .li9 i { background-image:url(../img/advico9.png)}
.advantageBox ul .li10 i { background-image:url(../img/advico10.png)}
.advantageBox ul .li11 i { background-image:url(../img/advico11.png)}
.advantageBox ul .li12 i { background-image:url(../img/advico12.png)}
.advantageBox ul .li13 i { background-image:url(../img/advico13.png)}
.advantageBox ul .li14 i { background-image:url(../img/advico14.png)}
.advantageBox ul .li15 i { background-image:url(../img/advico15.png)}

.advantageBox ul li:hover { overflow:visible;}
.advantageBox ul li:hover .layer {visibility:visible;top:0;opacity:1}
.advantageBox ul li .layer {background:#0E69D7;height:auto;min-height:260px;width: calc(100% - 40px);}
.advantageBox ul li .layer i { display:none;}
.advantageBox ul li .layer h3 { color:#fff; font-weight:bold; margin-bottom:5px; margin-top:-5px;}
.advantageBox ul li .layer .intro { color:#fff; padding:13px 0 0; height:auto; display:block; border-top:1px solid rgb(255 255 255 / 20%)}
.advantageBox ul li .layer span {display:none;}
.advantageBox ul .li3 .layer .intro { }

#funList {position:relative;padding: 80px 0;}
#funList .funBd {position:relative;/* padding-top:45px; */}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.funIcon { background:#0062D9 url(../img/funico.png) no-repeat center; width:60px; height:60px; display:block; margin:0 auto; border-radius:50%;animation: rotate 5s linear infinite;}
.funLeft {width: 699px;float:left;border-right: 1px solid #ddd;padding-top: 45px;}
.funRight {float:right; width:700px;padding-top: 113px;}
.funRight .funBox { padding-left:5.7%; padding-right:0; }
.funBox { position:relative;border-top:1px solid #ddd;padding: 25px 5.7% 45px 0;}
.funBox:before { position:absolute; right:-4px; width:7px; height:7px; background:#0062D9; border-radius:50%; top:-4px; content:"";}
.funBox h3 { font-size:24px; line-height:32px; font-weight:bold; margin-bottom:20px; }
.funBox li {background:url(../img/yesico.png) no-repeat 0 8px;line-height: 28px;margin-bottom:10px;color:#666;font-size:16px;padding: 1px 0 1px 25px;}
.funRight .funBox:before { right:auto; left:-4px;} 


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