@charset "utf-8";
html{color:#000;background:#FFF; }
body { color:#666;font:12px/1.231 "Microsoft Yahei";} /*网站字体颜色*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,th,var,optgroup{font-style:inherit;font-weight:inherit;}
del,ins{text-decoration:none;}
li{list-style:none;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:baseline;}
sub{vertical-align:baseline;} 
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit; }
input,button,textarea,select{*font-size:100%;}
input,select{vertical-align:middle;}
i,em{ font-style:normal;}
select,input,button,textarea,button{font:99% arial,helvetica,clean,sans-serif;}
table{font-size:inherit;font:100%; border-collapse:collapse;}
pre,code,kbd,samp,tt{font-family:monospace;*font-size:108%;line-height:100%;}
/*title*/
h1 { font-size:32px;}
h2 { font-size:26px;}
h3 { font-size:20px;}
h4 { font-size:14px;}
h5 { font-size:12px;}
h6 { font-size:10px;}

.mt10{ margin-top:10px;}

a { color:#666; text-decoration:none;}  /*for ie f6n.net*/
a:focus{outline:0;} /*for ff f6n.net*/
.vam { vertical-align:middle;}
.clear{ clear:both; height:0; line-height:0; font-size:0;}
.clearfix:after{ content:""; clear:both; height:0; visibility:hidden; display:block;}
.clearfix{*zoom:1}
p{ word-spacing:-1.5px;}
.tr { text-align:right;}
.tl { text-align:left;}
.center { text-align:center;}
.fl { float:left;}
.fr { float:right;}
.pa{ position:absolute;}
.pr{ position:relative}
/* -- 购物车外部框�?-- */
.cart_header , .cart_content , .cart_footer { width:760px; margin:0 auto;}

/* -- 页面整体布局 -- */
.header , .content , .footer { width:1200px; margin:0 auto;  }
.h_nav li a:-webkit-any-link{ display:block;}






/* -- 以上部分以前resetcommon -- */



/* -- 首页样式开�?-- */
.clearfix{*zoom:1}
i,em{ font-style:normal;}

body{min-width: 1200px;max-width: 1920px;margin: 0 auto;overflow-x: hidden; width: 100%; background:#e7edf6;}

.bantest {position: relative;width: 100%;overflow: hidden;}  
.banner{ width:100%; position:relative;}
.banner .slick-dotted.slick-slider{ margin:0;}
.banner img{ display:block; width:100%;}
.banner .slick-arrow {position: absolute;font-size: 0;top: 50%;z-index: 9; width:73px; height: 73px; margin-top: -73px;border: 0; outline: none;overflow:hidden;}
.banner .slick-prev {left: 10%; display: none; background:url(../images/ban_prev.png) no-repeat;}
.banner .slick-next {right: 10%; display: none;background:url(../images/ban_next.png) no-repeat;}   
.slick-dots { position: absolute;left: 50%; font-size:0; bottom: 8%;width: 300px;text-align: center;margin-left: -175px;z-index: 11;}
.slick-dots li {display: inline-block;margin: 0 8px; }
.slick-dots li button {display: block;background:#005ad0;width: 14px;height: 14px;border-radius: 14px;border:0; box-shadow:0; -webkit-transition: .5s;-moz-transition: .5s;transition: .5s;}
.slick-dots .slick-active button {background:#005ad0;border:0; width:30px;} 

.tit{ font:50px "Microsoft YaHei UI"; text-align:center; color:#000;}
.tit a{ color:#000;}
.tit em{ display:block; font-size:20px; padding:15px 0 0; color:#666;}

.ted{ background:#005ad0; height:127px; padding-top:40px; overflow:hidden;}
.ted ul{ width:1400px; margin:0 auto;}
.ted li{ width:20%; float:left;}
.ted li img{ display:block; width:75px; height:75px; float:left;}
.ted li span{ display:block; width:180px; float:left; margin-left:12px; font:24px "Microsoft YaHei UI"; font-weight:bold; color:#fff; margin-top:8px;}
.ted li span em{ display:block; font:13px "Microsoft YaHei UI"; margin-top:10px;}
.ted li:hover{transform: translateY(-10px);transition: all 0.5s linear;-webkit-transition: all 0.5s linear;-moz-transition: all 0.5s linear;-o-transition: all 0.5s linear;}

.pro{ width:1400px; margin:64px auto 110px;}
.pro .tit{ font-size:40px;}
.pro dl{ margin:40px 0 0 0; float:left; width:21.71%; overflow:hidden; position:relative;}
.pro dl:nth-child(3){ margin-left:0.71%;}
.pro dl:nth-child(4){ float:right;}
.pro dt{ position:relative;}
.pro dt:before{ content:""; position:absolute; top:0; left:0; width:100%; height:35%;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#005ad0+0,7db9e8+100&1+0,0+100 */
background: -moz-linear-gradient(top,  rgba(0,90,208,1) 0%, rgba(125,185,232,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,90,208,1) 0%,rgba(125,185,232,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,90,208,1) 0%,rgba(125,185,232,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#005ad0', endColorstr='#007db9e8',GradientType=0 ); /* IE6-9 */}
.pro dt:after{ content:""; position:absolute; bottom:0; left:0; width:100%; height:35%;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#005ad0+0,005ad0+100&0+0,1+100 */
background: -moz-linear-gradient(top,  rgba(0,90,208,0) 0%, rgba(0,90,208,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(0,90,208,0) 0%,rgba(0,90,208,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(0,90,208,0) 0%,rgba(0,90,208,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00005ad0', endColorstr='#005ad0',GradientType=0 ); /* IE6-9 */}
.prodd1{ position:absolute; top:75px; left:40px;}
.prodd1 b{ display:block; height:117px;}
.prodd1 h3{ height:70px; position:relative; font:30px "Microsoft YaHei UI"; font-weight:bold; color:#fff; margin-bottom:40px;}
.prodd1 h3 a{ color:#fff;}
.prodd1 h3:before{ content:""; position:absolute; bottom:0; left:0; width:30px; height:4px; background:#fff;}
.prodd1 h5 em{ font:16px "Microsoft YaHei UI"; font-weight:bold; color:#005ad0; background:#fff; padding:8px; border-radius:20px;}
.prodd1 h5 span{ display:block; font:22px "Microsoft YaHei UI"; font-weight:bold; line-height:32px; color:#fff; margin-top:21px; /*padding-right:15%;*/}
.prodd1 h4 a{ display:block; width:100px; height:100px; background:url(../images/pro_btn.png) no-repeat; margin-top:40px;}
.prodd2{ display:none; height:305px; position:absolute; bottom:0; left:0; width:100%;}
.prodd2 h3{ height:125px; position:relative; font:40px "Microsoft YaHei UI"; font-weight:bold; color:#fff; line-height:115px; margin-left:5%;}
.prodd2 h3:before{ content:""; position:absolute; top:0; left:0; width:30px; height:4px; background:#fff;}
.prodd2 h3 a{ display:block; color:#fff;}
.prodd2 h3 em{ font-size:20px; padding-left:3%;}
.prodd21{ height:155px; background:#005ad0; padding:25px 0 0 35px;}
.prodd21 p{ width:70%; float:left; font:20px "Microsoft YaHei UI"; color:#fff; line-height:30px; margin-top:5px;}
.prodd21 p b{ color:#2fbcff;}
.prodd21 h5{ float:left; font:18px "Microsoft YaHei UI"; line-height:30px; color:#fff;}
.prodd21 h5 span{ display:block; background:url(../images/pro_arr.png) no-repeat left center; padding-left:30px;} 
.pro .cur{ width:55.07%;-webkit-transition:all 0.7s;
	transition:all 0.7s;}
.pro .cur .prodd1{ display:none;}
.pro .cur .prodd2{ display:block;}
.pro .cur dt:before,.pro .cur dt:after{ width:0; height:0; background:none;}

.process{ height:516px; background:url(../images/process_bg.jpg) no-repeat center top; padding-top:50px; overflow:hidden; box-sizing:border-box;}
.process .tit,.process .tit em{ color:#fff;}
.process .tit{height:157px;}
.process1{ position:relative;  height:180px;}
.process ul{ width:1400px; margin:0 auto; position:relative; z-index:2;}
.process li{ width:25%; float:left; text-align:center; font:22px "Microsoft YaHei UI"; font-weight:bold; color:#fff;}
.process li b{ display:block; height:136px;}
.process li em{ display:block; width:60px; height:60px; border-radius:60px; font:26px Arial, Helvetica, sans-serif; color:#fff; text-align:center; line-height:60px; margin:0 auto 18px; background:#005ad0;}
.process li:hover img{-webkit-animation:hvr-buzz-out 0.75s linear;animation:hvr-buzz-out 0.75s linear;}
.process h5{ width:570px; margin:0 auto; height:58px;}
.process h5 em{ display:block; width:308px; height:44px; border:2px solid #fff; border-radius:30px; font:16px "Microsoft YaHei UI"; text-align:center; line-height:44px; color:#fff; float:left;}
.process h5 em i{ font-size:24px;}
.process h5 a{ display:block; width:227px; height:48px; float:right; background:#fff; font:22px "Microsoft YaHei UI"; font-weight:bold; color:#005ad0; text-align:center; line-height:48px; border-radius:30px;}

@media screen and  (min-width:760px) and (max-width:1440px){
    .process ul{width:1200px;}
}


.foot{
  height: 540px !important;
}

.fnav{
  height: 240px !important;
  margin-top: 35px !important;
}
.fwz{
  margin-top: 35px !important;
}
.fcode{
  margin-top: 35px !important;
}
.super{ margin:50px 0;}
.super1{ width:83.33%; margin:45px auto 0;}
.super dl{ width:24.125%; float:left; background:#dbe6f4; height:500px; position:relative; overflow:hidden;}
.super dl:nth-child(2){ margin:0 1.25%;}
.super dt{ position:relative;height:500px; padding:0 10%;}
.super dt:before{ content:""; position:absolute; top:0; left:0; width:100%; height:1px; background:#005ad0;}
.super dt:after{ content:""; position:absolute;bottom:0; left:0; width:100%; height:1px; background:#005ad0;}
.super dt h3{ padding-top:30px; font:34px "Microsoft YaHei UI"; font-weight:bold; color:#282828; position:relative; padding-bottom:38px; margin-bottom:15px;}
.super dt h3:before{ content:""; position:absolute; bottom:0; left:0; width:24px; height:4px; background:#005ad0;}
.super dt h3 em{ display:block; margin:20px 0 15px;}
.super dt h3 i{ display:block; font-size:20px;}
.super dt p{ font:16px "Microsoft YaHei UI"; line-height:30px; color:#282828; height:90px;}
.super dt span{ display:block; font:16px "Microsoft YaHei UI"; color:#666666; margin-top:34px;}
.super dt span b{ color:#000000; font-size:30px;}
.super dd{background:#1250a2; position:absolute; top:0; height:0; width:100%;-webkit-transition: height .5s cubic-bezier(0.52, 1.64, 0.37, 0.66);
    -webkit-transition: height .5s cubic-bezier(0.52, 1.64, 0.37, 0.66);}
.super dd b{ display:none;overflow: hidden;
  height: 360px;}
.super dd b img{}
.super dd h5{ padding:6% 0 0 5%; width:95%; display:none;}
.super dd h5 em{display:block; width:15%; float:left;}
.super dd h5 em img{display:block; width:100%;}
.super dd h5 span{ display:block; float:right; font:30px "Microsoft YaHei UI"; font-weight:bold; color:#fff; width:79%;}
.super dd h5 span i{ display:block; font-size:18px; margin-top:4px;}
.super dl:last-child{ float:right;}
.super .cur dd{ height:100%;}
.super .cur dd b,.super .cur dd h5{ display:block;}

.super2{ margin:60px 0;}
.super1{ width:83.33%; margin:45px auto 0;}
.super2 dl{ width:19%; margin-left:1%;float:left; background:#dbe6f4; height:660px; position:relative; overflow:hidden;}
/* .super2 dl:nth-child(2){ margin:0 1.25%;} */
.super2 dt{ position:relative;height:675px; padding:0 10%;}
/* .super2 dt:before{ content:""; position:absolute; top:0; left:0; width:100%; height:1px; background:#005ad0;} */
/* .super2 dt:after{ content:""; position:absolute;bottom:0; left:0; width:100%; height:1px; background:#005ad0;} */
.super2 dt h3{ padding-top:20px; font:34px "Microsoft YaHei UI"; font-weight:bold; color:#282828; position:relative; padding-bottom:38px; margin-bottom:15px;}
.super2 dt h3:before{ content:""; position:absolute; bottom:0; left:0; width:24px; height:4px; background:#005ad0;}
.super2 dt h3 em{ display:block; margin:20px 0 15px;}
.super2 dt h3 i{ display:block; font-size:20px;}
.super2 dt p{ font:16px "Microsoft YaHei UI"; line-height:30px; color:#282828; height:90px;}
.super2 dt span{ display:block; font:16px "Microsoft YaHei UI"; color:#666666; margin-top:34px;}
.super2 dt span b{ color:#000000; font-size:30px;}
.super2 dd{background:#1250a2; position:absolute; top:0; height:0; width:100%;-webkit-transition: height .5s cubic-bezier(0.52, 1.64, 0.37, 0.66);
    -webkit-transition: height .5s cubic-bezier(0.52, 1.64, 0.37, 0.66);}
.super2 dd b{ display:none;}
.super2 dd b img{ }
.super2 dd h5{ padding:8% 0 0 5%; width:95%; display:none;}
.super2 dd h5 em{display:block; width:15%; float:left;}
.super2 dd h5 em img{display:block; width:100%;}
.super2 dd h5 span{ display:block; float:right; font:30px "Microsoft YaHei UI"; font-weight:bold; color:#fff; width:79%;}
.super2 dd h5 span i{ display:block; font-size:18px; margin-top:4px;}
.super2 dl:last-child{ float:right;}
.super2 .cur dd{ height:100%;}
.super2 .cur dd b,.super .cur dd h5{ display:block;}


.about1{ background:url(../images/about.jpg) no-repeat center center; margin-top:40px; height:660px; position:relative;}
.about2{ padding:2% 0 0 6%; font:30px "Microsoft YaHei UI"; color:#fff; line-height:80px; float:left; }
.about2:nth-child(2){ float:right; width:25%;padding:2% 6% 0 0;}
.about2 p em{ font:16px "Microsoft YaHei UI"; font-weight:bold;}
.about3{ width:88%; float:left; margin:2% 6% 0 6%; overflow:hidden;}
.about3 li{ width:24.05%; float:left; margin-right:20px;}
.about3 li img{ display:block; width:100%; border:2px solid #fff; box-sizing:border-box; border-radius:15px;}
.about4{ width:47.92%; background:#005ad0; height:18rem; position:absolute; bottom:0; right:0; border-radius:2rem 0 0 0;}
.about4 li{ width:33.33%; float:left; position:relative; font:28px "Microsoft YaHei UI"; text-align:center; color:#fff;}
.about4 li:before{ content:""; position:absolute; top:70%; right:0; width:1px; height:3.875rem; background:#fff;}
.about4 li:last-child:before{ background:none;}
.about4 li b{ display:block; width:51%; margin:-50px auto 33px; position:relative;-moz-transition: all 0.8s ease-in-out;
 -webkit-transition: all 0.8s ease-in-out;
 -o-transition: all 0.8s ease-in-out;
 -ms-transition: all 0.8s ease-in-out;
 transition: all 0.8s ease-in-out;}
.about4 li b img{ display:block; width:100%;}
.about4 li em{ display:block; font-size:20px; color:rgba(255,255,255,0.6); margin-top:15px;}
.about4 li:hover b{-moz-transform: rotate(360deg);
 -webkit-transform: rotate(360deg);
 -o-transform: rotate(360deg);
 -ms-transform: rotate(360deg);
 transform: rotate(360deg);}
 
@media screen and (max-width: 1680px) {
	 .about3{ margin:4% 6% 0 6%;}
	 .about3 li{width:23.85%;}
}
 
@media screen and (max-width: 1600px) {
	 .about3{}
}
@media screen and (max-width: 1440px) {
	 .about3{ margin:2% 6% 0 6%;}
	 .about3 li{width:23.75%;}
}
@media screen and (max-width: 1366px) {
	 .about1{ height:700px;}
	 .about3 li{width:23.65%;}
}

.team{ height:740px; margin-top:60px;}
.team .content{ width:1400px; margin:45px auto 0; position:relative;}
.team_l{ position:absolute; top:240px; left:-100px;background:url(../images/ban_prev.png) no-repeat; width:73px; height:73px; opacity:0.5;}
.team_r{ position:absolute; top:240px; right:-100px;background:url(../images/ban_next.png) no-repeat;width:73px; height:73px; opacity:0.5;}
.team2{ width:47.14%; float:left; margin-right:80px;}
.team dl{ height:260px; margin-bottom:20px; background:#fff;}
.team dt{ width:31.8%; height:auto; float:left; margin:26px 0 0 7.5%;}
.team dt img{ display:block; width:100%; border-radius:100%; border:2px solid #fff; box-sizing:border-box;}
.team dd{ width:55.3%; float:right; margin-top:50px;}
.team dd h3{ font:26px "Microsoft YaHei UI"; font-weight:bold; color:#282828;}
.team dd h3 a{ display:block; color:#282828;}
.team dd h3 em{ font:18px "Microsoft YaHei UI"; color:#8a8a8a; padding-left:4%;}
.team dd p{ font:16px "Microsoft YaHei UI"; color:#8a8a8a; margin:12px 0;}
.team dd h5{ font:16px "Microsoft YaHei UI"; font-weight:bold; color:#282828;}
.team dd h5 a{ display:block; margin-top:27px; width:125px; height:32px; background:#005ad0; font:16px "Microsoft YaHei UI"; text-align:center; line-height:32px; color:#fff;}
.team dl:hover{ background:#005ad0;-webkit-transition:all 0.7s;
	transition:all 0.7s;transition-property:background;
-moz-transition-property: background; /* Firefox 4 */
-webkit-transition-property:background; /* Safari å’�?Chrome */
-o-transition-property:background;}
.team dl:hover h3 a{ color:#fff;}
.team dl:hover h3 em,.team dl:hover p{ color:rgba(255,255,255,0.7);}
.team dl:hover h5{ color:#5fa4ff;}
.team dl:hover h5 a{ background:#fff; color:#005ad0;}

.news{ overflow:hidden;}
.dy{ width:375px; float:left;}
.dy:nth-child(3){ margin-left:38px;}
.dy:nth-child(4){float:right;}
.tit1{ height:50px; margin:40px 0 25px; font:20px "Microsoft YaHei UI"; line-height:50px; color:#000; position:relative;}
.tit1 a{ display:block; color:#000;}
.tit1 b{ display:block; width:22px; height:23px; float:left; overflow:hidden; margin:15px 10px 0 0;}
.tit1 b img{ display:block;}
.tit1:before{ content:""; position:absolute; bottom:0; left:0; width:0; height:2px; background:#1250a2;-webkit-transition: 1s;-moz-transition: 1s;transition: 1s;}
.tit1:hover:before{ width:110px;}
.tit1 em{ font:12px "Microsoft YaHei UI"; text-transform:uppercase; line-height:50px; color:#000; float:right;}
.tit1:hover a{ font-weight:bold; color:#1250a2;}
.tit1:hover b img{ position:relative; margin-top:-23px;}
.news dl{ height:355px; border-bottom:1px solid #d4d9e2; margin-bottom:40px;}
.news dt{ width:375px; height:211px; overflow:hidden;}
.news dt img{ display:block;width:375px; height:211px;-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;}
.news dd h3{ font:16px "Microsoft YaHei UI"; color:#000; margin:25px 0 18px;}
.news dd h3 a{ color:#000;}
.news dd h3 em{ float:right; font-size:12px;}
.news dd p{ font:14px "Microsoft YaHei UI"; line-height:24px; color:#5d6064;}
.news li{ font:16px "Microsoft YaHei UI"; line-height:30px; height:30px; overflow:hidden;}
.news li a{ color:#000;}
.news li em{ float:right; font-size:12px;}
.news dl:hover dt img{-webkit-transform:scale(1.1,1.1);
    -moz-transform:scale(1.1,1.1);
    -transform:scale(1.1,1.1);}
.news dl:hover dd h3 a,.news li a:hover{ font-weight:bold; color:#005ad0;}


@media (min-width: 1200px) and (max-width: 1680px) {
	.ted ul{ width:1200px;}
	.ted li span{ width:130px; margin-top:0;}
	.pro{ width:1300px;}
	.prodd2 h3{ font-size:36px;}
	.super1{ width:1280px;}
	.super dt h3 i{ font-size:18px;}
	.super dd h5 span i{ padding-right:8%;}
	.team .content{ margin:45px auto 0; width:1200px;}
}


@keyframes living {
    0%{
        transform: scale(1);
        /* opacity: 1; */margin-top: 6px;
    }
    50%{
        transform: scale(1);
        /* opacity: 0.7; */margin-top:0px;
    }
    100%{
        transform: scale(1);
        /* opacity: 1; */margin-top: 6px;
    }
}
@keyframes living1 {
    0%{
        transform: scale(1);
        /* opacity: 1; */margin-top: 0;
    }
    50%{
        transform: scale(1);
        /* opacity: 0.7; */margin-top: 0;
    }
    100%{
        transform: scale(1);
        /* opacity: 1; */margin-top: 0;
    }
}
@-webkit-keyframes spin{
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }

  50% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}


/*animation*/
@-webkit-keyframes hvr-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }
  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}
@keyframes hvr-buzz-out {
  10% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  20% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  30% {
    -webkit-transform: translateX(3px) rotate(2deg);
    transform: translateX(3px) rotate(2deg);
  }
  40% {
    -webkit-transform: translateX(-3px) rotate(-2deg);
    transform: translateX(-3px) rotate(-2deg);
  }
  50% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  60% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  70% {
    -webkit-transform: translateX(2px) rotate(1deg);
    transform: translateX(2px) rotate(1deg);
  }
  80% {
    -webkit-transform: translateX(-2px) rotate(-1deg);
    transform: translateX(-2px) rotate(-1deg);
  }
  90% {
    -webkit-transform: translateX(1px) rotate(0);
    transform: translateX(1px) rotate(0);
  }
  100% {
    -webkit-transform: translateX(-1px) rotate(0);
    transform: translateX(-1px) rotate(0);
  }
}

.tong{width:100%;margin-top:45px; display: grid; grid-template-columns: repeat(2,1fr); gap:25px;}
.tong li{background:#fff;padding:22px;position:relative; display: flex; height: 175px;}
.tong li:after{content:"";display:block;width:100%;height:60%;background:#e61f4d;background:linear-gradient(to right,#e61f4d,#b96551);position:absolute;left:0;top:20%;opacity:0;transition:all .5s;-webkit-transition:all .5s}
.tong li i{margin-right: 15px; display:block;flex:0 0 48px;height:48px;border-radius:50%;float:left;background:#e61f4d;background:linear-gradient(to right,#e61f4d,#b96551);position:relative;z-index:2;transition:all .5s;-webkit-transition:all .5s}
.tong li i:after{content:"";display:block;width:20px;height:24px;background:url(../images/artico01.png) center no-repeat;position:absolute;margin:auto;left:0;right:0;top:0;bottom:0;transition:all .5s;-webkit-transition:all .5s}
.tong li .fr{position:relative;z-index:2}
.tong li .name{font-size:18px;font-weight:bold;margin-bottom:10px;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:block}
.tong li .ms{font-size:16px;color:#999;line-height:26px;height:52px;margin-bottom:25px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tong li time{float:left;display:flex;display:-webkit-flex;align-items:center;transition:all .5s;-webkit-transition:all .5s}
.tong li time em{display:inline-block;width:13px;height:12px;background:url(../images/time01.png) center no-repeat;margin-right:7px;transition:all .5s;-webkit-transition:all .5s}
.tong li .more{float:right;display:flex;display:-webkit-flex;align-items:center;transition:all .5s;-webkit-transition:all .5s}
.tong li .more em{margin-left:7px;display:inline-block;width:20px;height:6px;background:url(../images/jt09.png) center no-repeat;transition:all .5s;-webkit-transition:all .5s}
.tong li:hover:after{height:100%;opacity:1;top:0}
.tong li:hover i{background:#fff}
.tong li:hover i:after{background:url(../images/artico02.png) center no-repeat}
.tong li:hover .name{color:#fff}
.tong li:hover .ms{color:rgba(255,255,255,.45)}
.tong li:hover time{color:#fff}
.tong li:hover time em{background:url(../images/time02.png) center no-repeat;margin-right:5px}
.tong li:hover .more{color:#fff}
.tong li:hover .more em{margin-left:5px;background:url(../images/jt10.png) center no-repeat}