@import url("//at.alicdn.com/t/font_2763899_k6d53saop.css");
body{ color:#333; font-size:14px;font-family: "Microsoft Yahei";} /*网站字体颜色*/
body,ul,ol,li,div,p,h1,h2,h3,h4,h5,h6,dl,dt,dd,img,span,input{margin:0;padding:0;list-style:none;}
a { color:#333; text-decoration:none;font-family: "Microsoft Yahei";}  /*for ie f6n.net*/
a:focus{outline:0;} 
img{border:none;}
.vam { vertical-align:middle;}
.clear{clear:both; height:0; line-height:0; font-size:0;}
p{ word-spacing:-1.5px;font-family: "Microsoft Yahei"; }
h1,h2,h3,h4,h5,h6{ font-family:"Microsoft Yahei";}

.tr { text-align:right;}
.tl { text-align:left;}
.center { text-align:center;}
.fl { float:left;}
.fr { float:right;}
.pa{ position:absolute;}
.pr{ position:relative;}
i,em{ font-style:normal;}
.clearfix:after{content:"";height:0;clear:both;display:block;visibility:hidden;}
.clearfix{zoom:1;}
/* -- 页面整体布局 -- */
.content{ width:1200px; margin:0 auto;font-family: "Microsoft Yahei";}
.links{ display:block!important;}
.tit{text-align: center;font-weight: normal;font-size: 0;line-height: 0;}
.tit span{display:block;font-size: 42px;color: #333;line-height: 42px;font-weight: bold;font-family: 思源黑体 CN;}
.tit i{display:block;font-size: 24px;line-height:24px;color: #333333;margin-top: 12px;font-family: 思源黑体 CN;}

/*详情内容*/
.endit-content{ line-height:28px;}
.endit-content p{margin:15px 0;}
.endit-content img{max-width:100%;}
/*百度地图图片*/
.endit-content #map img,.endit-content #dituContent img,.endit-content #platform img{max-width: inherit;}
.endit-content em,.endit-content i{font-style: italic;}
.endit-content .img-p{text-indent: 0px; padding-top: 14px; margin: 0px; text-align: center;}
.endit-content .img-container{}
.endit-content .img-block {text-indent: 0px;padding-top: 14px;margin: 0px;text-align: center;}
/*详情关键字飘红加粗*/
.endit-content a{color:#f00; font-weight: bold;}

/*banner*/
.banner{height: 750px;position: relative;}
.bdu{width: 100% !important;height: 750px;}
.bdu li{width: 100% !important;height: 750px;position:relative;}
.bdu li a{display: block;height: 750px;}
.bdu li img{height:750px;position:absolute;}
.hdu{position: absolute;width: 100%;height: 10px;right: 0;bottom: 44px;text-align: center;}
.hdu li{display: inline-block;width: 12px;height: 12px;background: #fff;margin:0 10px;border-radius: 6px;}
.hdu li.on{background: #0190ae;}
.banner p {  position: absolute; top: 50%; width: 80px; height: 80px; z-index: 9; opacity: 1; text-align: center; margin-top: -39px; }
.banner .b_prev{ left: 3%;}
.banner .b_next { right: 3%;}


.yz{height: 647px;background: url(../image/yz_bg.jpg) no-repeat center;padding-top: 80px;box-sizing: border-box;}
.yz p{ font-size: 16px;line-height: 26px;color: #666666;text-align: center;padding-top: 35px;}
.yz ul{ margin-top: 45px;}
.yz ul li{ float: left;width: 159px;margin-right: 49px;}
.yz ul li:last-child{ margin-right: 0;}
.yz ul li img{ width: 159px;height: 159px;display: block;margin: 0 auto;border-radius: 50%;border: 3px solid #0468b6;}
.yz ul li:hover img{border: 3px solid #333; }
.yz ul li span{ display: block;text-align: center;font-size: 18px;font-weight:600; line-height: 20px;padding-top: 28px;position: relative;}
.yz ul li span:after{ position: absolute;left: 50%;top: 70px;width: 26px;margin-left:-13px ;background: #000000;height: 3px;content:"";}
.yz ul li:hover span{ color: #333;}
.yz ul li:hover span:after{ background: #333;}


.pro{padding: 80px 0;}
.pro_t { height: 63px; background: #f5f5f5;  clear: both;margin-top: 39px;}
.pro_t li { position: relative; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.pro_t li:last-child>a:after{display: none;}
.pro_t li>a:before { position: absolute; content: ""; width: 100%; height: 0; background: #333;
     left: 0; bottom: 0; transition: .3s ease; -o-transition: .3s ease; z-index: -1; }
.pro_t li>a:after{position: absolute;content: "";width: 1px;height: 100%;background: url(../image/pro_line.png) no-repeat center; right: -1px;top: 0;}
.pro_t li>a { position: relative; display: block; font-size: 16px; color: #666; text-align: center; line-height: 63px; height:63px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 30.8px; z-index: 2;transition: .3s ease; -o-transition: .3s ease; }
.pro_t li:hover>a, .pro_t li.cur>a { color: #fff; }
.pro_t li:hover>a:before, .pro_t li.cur>a:before { height: 100%; }
.pro_t li:hover>a:after, .pro_t li.cur>a:after { display: none; }
.pro_con{ margin-top: 20px;height: 453px!important;}
.pro_con dt{ display: block;width: 807px;height: 453px;float: left;} 
.pro_con dt img{ display: block;width: 807px;height: 453px;} 
.pro_con dd{ float: left;padding:20px 20px 0 20px;width:393px ;box-sizing: border-box;border: 1px solid #e3e3e3;height: 453px;}
.pro_con dd h3{ padding-top: 80px;}
.pro_con dd h3 a{ display: block;font-size: 28px;line-height:28px ;color: #333;height: 28px;margin-bottom: 20px;}
.pro_con dd p{ font-size: 16px;line-height: 28px;color: #666666;}
.pro_con dd .more{ margin-top: 30px;width: 154px;height:43px;line-height: 43px;padding-left: 59px;box-sizing: border-box;font-size:18px ;color: #fff;display: block;background: url(../image/more_bg.jpg) no-repeat center;float: left;margin-right: 8px;}
.pro_con dd .zx{ margin-top: 30px;width: 154px;height:43px;line-height: 43px;padding-left: 59px;box-sizing: border-box;font-size:18px ;color: #001831;display: block;background: url(../image/zx_bg.jpg) no-repeat center;float: left;}
.pro_z{ position: relative;}
.pro_z li{ margin-top: 30px;float: left;width:379px ;margin-right:29px ;border: 1px solid #e5e5e5;position:relative;}
.pro_z li img{ display: block;width: 100%;height:auto;}

.pro_z li h4{ display: block;height: 54px;line-height: 54px;font-weight: normal;font-size: 16px;color: #666666;background: #e5e5e5;text-align: center;position:absolute;left:0;bottom:0;width:100%;}
.pro_z li:hover h4{background: #333;
      color: #0d4888;color: #fff;}
.pro_z .sprev{position: absolute;left:-56px;top:50%;width:30px;height: 54px;background:url(../image/sprev.png) no-repeat;z-index: 10;cursor: pointer;}
.pro_z .snext{position: absolute;right:-56px;top:50%;width:30px;height: 54px;background:url(../image/snext.png) no-repeat;z-index: 10;cursor: pointer;}
.dz_list{ height: 108px;background:url(../image/dz_bg.jpg) no-repeat center;margin-top: 32px;}
.dz_list h3{ display: block; width: 212px; height:108px;color: #fff; font-size: 22px; padding-top:30px; padding-left: 24px; float:left;box-sizing: border-box;}
.dz_list h3 em{ display: block;font-size: 14px;color: #85888c;font-family: Arial;line-height: 14px;padding-top: 2px;font-weight: normal;}
.dz_list p{ float: left; padding:24px 40px 0px; width: 988px;box-sizing: border-box;}
.dz_list p a{ display: inline-block; height: 32px; line-height: 32px; font-size: 16px; color: #666666;float: left;margin-right: 36px;}


.sl{height: 1030px;background: url(../image/sl_bg.jpg) no-repeat center;padding-top: 80px;box-sizing: border-box;}
.sl dl{ height: 385px;margin-top: 25px;background: #fff;}
.sl dt{ display: block;width: 683px;height: 385px;float: left;} 
.sl dt img{ display: block;width: 683px;height: 385px;} 
.sl dd{ float: left;padding:90px 45px 0 54px;width:517px ;box-sizing: border-box;height: 385px;}
.sl dd p{ font-size: 15px;line-height: 26px;color: #5c5c5c;}
.sl dd p b{ color: #333;}
.sl dd .zx{ margin-top: 30px;width: 160px;height:40px;line-height: 40px;box-sizing: border-box;font-size:18px ;color: #fff;display: block;background: #333;
    float: left;text-align: center;}
.flhd{height: 48px;margin-bottom: 26px;position: relative;box-sizing: border-box;margin-top: 36px;border-bottom: 1px solid #d3d8da;}
.flhd li{float: left;width: 145px;font-size: 18px;color: #fff;line-height: 48px;height: 48px;color: #666666;box-sizing: border-box;text-align: center;}
.flhd li a{ color: #666666;}
.flhd .on{background: #333; }
.flhd .on a{ color: #fff;}
.flhd .xq{position: absolute;right: 0;top:23px;line-height: 64px;display: block;}
.flhd .xq a{color: #999999;font-size: 16px;text-transform: uppercase;display: block;line-height: 20px;box-sizing: border-box;}
.flbdc{ position: relative;}
.flbdc li{ float: left;width: 215px;height: auto;position: relative;margin-right: 30px;}
.flbdc li:last-child{ margin-right: 0;}
.flbdc li i{ width: 210px;height: auto;display: block;}
.flbdc li img{ width: 210px;height: auto;}
.flbdc li em{ display: block;height: 0;position: absolute;left: 0;bottom: 0;width: 100%;height: 0;transition:all 0.5s;color: #fff;text-align: center;font-size: 16px;line-height: 240px;overflow: hidden;background: url(../image/yan.png) no-repeat 127px 80px rgba(0,0,0,0.77);}
.flbdc li:hover em{ height: 100%;}
.flbdc .dprev{position: absolute;left:-56px;top:120px;width:30px;height: 54px;background:url(../image/sprev.png) no-repeat;z-index: 10;cursor: pointer;}
.flbdc .dnext{position: absolute;right:-56px;top:120px;width:30px;height: 54px;background:url(../image/snext.png) no-repeat;z-index: 10;cursor: pointer;}

.sys{ padding-top: 90px;height: 790px;background:url(../image/sys_bg.jpg) no-repeat center;box-sizing:border-box;}
.sys .content{ position: relative;}
.sys_con{ padding-top: 38px;height: 584px;}
.sys_con dl:nth-child(2)  dd p b{ width: 110px;display: inline-block;}
.sys_con dt{display: block;width: 960px;height: 584px;margin-left: -360px;float: left; }
.sys_con dt img{display: block;width: 960px;height: 584px; }
.sys_con dd{ float: left;padding-left: 95px;width: 600px;box-sizing: border-box;}
.sys_con dd h2{ font-size: 20px;line-height:20px ;color: #a2a6aa;font-weight: normal;text-transform: uppercase;}
.sys_con dd h3{ padding-top: 100px; display: block;font-size: 24px;line-height:45px ;color: #333;height: 45px;margin-bottom: 30px;padding-bottom: 15px;background: url(../image/sys_line.png) no-repeat left bottom;}
.sys_con dd p{ font-size: 16px;line-height: 28px;color: #333;padding-left:27px ;background: url(../image/e7405987b9294b9ea58200fb6f45d36b_8.png) no-repeat left 8px;}
.sys_con dd p b{ width: 65px;display: inline-block;}
.sys_con dd p.fit{ font-weight: bold;color: #333;}
.sys_con dd .zx{ margin-top: 30px;width: 160px;height:40px;line-height: 40px;box-sizing: border-box;font-size:18px ;color: #fff;display: block;background: #333;
    float: left;text-align: center;}
.sys_t{ position: absolute;left: 382px;top: 270px;width: 218px;}
.sys_t li{ height: 65px;background: #374545;color: #fff;margin-bottom: 3px;width: 218px;padding-left: 38px;box-sizing: border-box;}
.sys_t li em{ display: block;font-size: 18px;color: #fff;line-height: 24px;padding-top: 26px;}
.sys_t li span{display: block;font-size: 14px;color: #9ba2a2;line-height: 14px;padding-top: 8px;font-family: Arial;}
.sys_t li.on{background: #333;background: linear-gradient(90deg,rgb(1, 14, 16),rgb(121, 121, 121));}
 .sys_t li.on span{ color: #989d9d;}

.ys{ padding-top: 80px;}
.ys_t{ margin-top: 76px;margin-bottom: 70px;}
.ys_t li{ float: left;margin-right: 75px;}
.ys_t li:last-child{ margin-right: 0;}
.ys_t li i{ overflow: hidden;width: 102px;height: 102px;border-radius: 90px; font-size: 50px; border: 2px solid #000;    color: #000;    background: #fff;    margin: 0 auto;    display: flex; flex-direction: column;justify-content: center;float: left; text-align: center;}
.ys_t .cur i{ background: #000; color: #fff; border:none; box-shadow: 0px 14px 20.37px 0.63px rgba(23, 64, 188, 0.3);}

.ys_t li span{ display: block;float: left;padding-left: 22px;font-size: 14px;line-height: 14px;color: #333333;text-transform: uppercase;font-family: Arial;padding-top: 32px;}
.ys_t li span em{ display: block;font-size: 22px;line-height: 22px;color: #333333;padding-top: 14px;}
.ys_t li.cur span{ color: #333;}
.ys_t li.cur span em{ color: #333;font-weight: bold;}
.ys_con{ position: relative;} 
.ys_con dl{ position: relative;width: 1920px;height: 704px;margin-left: -360px;}
.ys_con dt{display: block;width: 1920px;height: 704px; }
.ys_con dt img{display: block;width: 1920px;height: 704px; }
.ys_con dd{ position: absolute;left: 0; bottom: 0;height: 138px;background: rgba(57,58,58,0.9);width: 100%;padding-left: 360px;box-sizing: border-box;}
.ys_con dd h2 { float: left; padding-top:35px; }
.ys_con dd h2 img { width: 100px;height: 75px; }
.ys_con dd h3{ float: left; margin-top: 35px; padding-left: 15px;font-weight: normal;width: 250px;}
.ys_con dd h3 b { display: block; font-size: 30px; color: #eef5fb; line-height: 1;  font-weight: bold;}
.ys_con dd h3 span { display: block;  font-size: 26px; color: #eef5fb; line-height: 1; margin-top: 8px;font-weight: normal;}
.ys_con dd p{ padding-left: 35px;margin-top: 22px;height: 94px;box-sizing: border-box;padding-top: 24px;border-left: 1px solid #5e6b6d;font-size: 16px;line-height:24px ;color:#eef5fb ;width: 836px;float: left;opacity: 0.88;}
.ys_con .zprev{position: absolute;left:-56px;top:250px;width:35px;height: 78px;background:url(../image/b_prev.png) no-repeat;z-index: 10;cursor: pointer;}
.ys_con .znext{position: absolute;right:-56px;top:250px;width:35px;height: 78px;background:url(../image/b_next.png) no-repeat;z-index: 10;cursor: pointer;}

.case{padding: 80px 0px;background: #eef5fb;}
.case_con{ margin-top: 44px;}
.case .case_l{ float: left; width: 344px;}
.case .case_l li{ float: left; width: 163px; height:115px; margin-right: 8px; margin-bottom: 7px; background: #fefdfb; font-size: 18px; color: #333;padding-left: 23px;box-sizing: border-box;position: relative;}
.case .case_l li:after{ position: absolute;right: -6px;top: 52px;width: 6px;height: 10px;background: url(../image/san.png) no-repeat center;content: "";display: none;}

.case .case_l li.cur:after,.case .case_l li:hover:after{ display: block;}
.case .case_l li i{ width: 30px; height: 30px; margin:18px 0  10px 0; display: block;transition: all 0.5s ease-in-out;}
.case .case_l li em{ display: block;font-size: 18px;line-height: 18px;color: #000000;}
.case .case_l li em span{ display: block;font-size: 12px;line-height: 14px;color: #000000;opacity: 0.5;padding-top: 4px;font-family: Arial;text-transform: uppercase;}

.case .case_l li:hover i{transform: rotateY(180deg);}
.case .case1 i{background:url(../image/so1.png) no-repeat center; }
.case .case2 i{background:url(../image/so2.png) no-repeat center; }
.case .case3 i{background:url(../image/so3.png) no-repeat center; }
.case .case4 i{background:url(../image/so4.png) no-repeat center; }
.case .case5 i{background:url(../image/so5.png) no-repeat center; }
.case .case6 i{background:url(../image/so6.png) no-repeat center; }
.case .case7 i{background:url(../image/so7.png) no-repeat center; }
.case .case8 i{background:url(../image/so8.png) no-repeat center; }
.case .case_l li:hover,.case .case_l li.cur{ background: #333;
     color: #fff;}
.case .case_l li:hover em,.case .case_l li.cur em{ color: #fff;font-weight: bold;}
.case .case_l li:hover em span,.case .case_l li.cur em span{ color: #fff;}

.case .case_l .case1:hover i,.case .case_l .case1.cur i{background:url(../image/so1h.png) no-repeat center; }
.case .case_l .case2:hover i,.case .case_l .case2.cur i{background:url(../image/so2h.png) no-repeat center; }
.case .case_l .case3:hover i,.case .case_l .case3.cur i{background:url(../image/so3h.png) no-repeat center; }
.case .case_l .case4:hover i,.case .case_l .case4.cur i{background:url(../image/so4h.png) no-repeat center; }
.case .case_l .case5:hover i,.case .case_l .case5.cur i{background:url(../image/so5h.png) no-repeat center; }
.case .case_l .case6:hover i,.case .case_l .case6.cur i{background:url(../image/so6h.png) no-repeat center; }
.case .case_l .case7:hover i,.case .case_l .case7.cur i{background:url(../image/so7h.png) no-repeat center; }
.case .case_l .case8:hover i,.case .case_l .case8.cur i{background:url(../image/so8h.png) no-repeat center; }
.case .case_r{float: right;}
.case .case_r dl{position: relative;}
.case .case_r dt img{ width: 850px; height: 480px;}
.case .case_r dd{position: absolute; left: 0 ;bottom: 0; background: #374545; width:850px;height: 115px;}
.case .case_r dd h3{ padding-top: 30px; padding-left: 35px;}
.case .case_r dd h3 a{ font-size: 18px; line-height: 24px;color: #ffffff; font-weight: normal;}
.case .case_r dd p{ padding-left: 35px; color: #aeb2b2; font-size: 14px; line-height: 24px; color:#aeb2b2;padding-top: 8px;}
.case .case_r dd p .zx{ width: 116px;height:40px;line-height: 40px;box-sizing: border-box;font-size:16px ;color: #fff;display: block;background: #333;
    float: right;text-align: center;margin-right: 26px;margin-top: -9px;}

.news{ padding-top: 80px;}
.new_con{margin-top: 35px;height: 520px;}
.new_l{width: 713px;}
.new_l h3{height: 48px;margin-bottom: 26px;position: relative;box-sizing: border-box;border-bottom: 1px solid #d3d8da;}
.new_l h3 em{float: left;font-size: 20px;color: #000000;line-height: 48px;height: 48px;color: #000000;box-sizing: border-box;text-align: center;margin-right: 28px;}
.new_l h3 em a{ color: #333333;}
.new_l h3 em.on,.new_l h3 em:hover{background: url(../image/new_line.png) no-repeat bottom;}

.new_l h3 span a{float: right;    color: #999999;
    font-size: 16px;
    text-transform: uppercase;
    display: block;
    line-height: 58px;
    box-sizing: border-box;display: block;font-weight: normal;}

.new_l dl{height: 160px;}
.new_l dt img{display:block;width: 214px;height: 160px;float: left;}
.new_l dd { padding-left: 28px;width: 470px;float:left;}
.new_l dd h5{display: block; padding-right: 20px; padding-bottom: 20px;}
.new_l dd h5 a{display:block;font-size: 16px;color: #000000;line-height: 16px;font-weight: bold; overflow: hidden;    white-space: nowrap;    text-overflow: ellipsis;}
.new_l dd p{font-size: 16px;color: #666666;line-height: 26px;}
.new_l dd span{float: right;font-size:16px ;line-height: 16px;color:#333 ;margin-top: 12px;}
.new_list{padding-top:11px; }
.new_list p{background: #e3e3e3; line-height: 36px;font-size: 14px;width:351px;float: left;margin-right: 10px;margin-bottom:10px;padding: 20px;height: 89px;box-sizing: border-box;overflow: hidden;    white-space: nowrap;    text-overflow: ellipsis;}
.new_list p:hover{background: #000; color: #fff;}
.new_list p:hover a,.new_list p:hover span{ color: #fff;}
.new_list p:nth-child(2n){margin-right: 0;}
.new_list p a{color: #000000;font-size: 16px;line-height: 16px; }
.new_list p span{display: block;font-size: 14px;line-height: 14px;color: #888888;padding-top: 0px; }
.new_r{width:419px;}
.new_r h3{height: 48px;margin-bottom: 26px;position: relative;box-sizing: border-box;border-bottom: 1px solid #d3d8da;}
.new_r h3 em{float: left;font-size: 20px;color: #000000;line-height: 48px;height: 48px;color: #000000;box-sizing: border-box;text-align: center;margin-right: 28px;}
.new_r h3 em a{ color: #333333;}
.new_r h3 em.on,.new_l h3 em:hover{background: url(../image/new_line.png) no-repeat bottom;}

.new_r h3 span a{float: right;    color: #999999;
    font-size: 16px;
    text-transform: uppercase;
    display: block;
    line-height: 58px;
    box-sizing: border-box;display: block;font-weight: normal;}
.new_r dt img{width: 419px;height: 163px;display: block;}
.new_s { padding: 40px 30px; background: #e3e3e3;height: 300px;box-sizing: border-box;}
.new_s p{ font-size: 16px; color: #666666;line-height:32px; overflow: hidden;    white-space: nowrap;    text-overflow: ellipsis;}
.new_s p a{color: #666666;}

.abt{ padding: 80px 0;}
.abt dt{ display: block;width: 1920px;height:645px ;margin-left: -360px;}
.abt dt img{ display: block;width: 1920px;height:645px ; }
.abt dd{ width: 1200px;background: #fff;margin-top: -135px;z-index: 100;position: relative; padding: 25px;}
.abt dd .tit{ padding-top: 48px; padding-bottom:25px;}
.abt dd p{ font-size: 16px;line-height: 32px;color: #666666; text-indent:2rem;}
.abt_t li a{ width: 197px;height:54px;line-height: 54px;padding-left: 79px;box-sizing: border-box;font-size:18px ;color: #212121;display: block;float: left;margin-right: 8px;font-weight: bold;border: 2px solid #98a199;box-sizing: border-box;}
.abt_t li:first-child a{margin-left: 266px;}
.abt_t li:nth-child(1) a{ background: url(../image/abt_ic1.png) no-repeat 36px 13px;}
.abt_t li:nth-child(2) a{ background: url(../image/abt_ic2.png) no-repeat 36px 13px;}
.abt_t li:nth-child(3) a{ background: url(../image/abt_ic3.png) no-repeat 36px 13px;}
.abt_t li.cur a,.abt_t li:hover a{ border: 0;color: #fff;}
.abt_t li:nth-child(1).cur a,.abt_t li:nth-child(1):hover a{background: url(../image/abt_ic1h.png) no-repeat 36px 13px #333;
 background: linear-gradient(90deg,rgba(1,144,174,1),rgba(0,207,172,1)) url(../image/abt_ic1h.png) no-repeat 36px 13px;}
.abt_t li:nth-child(2).cur a,.abt_t li:nth-child(2):hover a{background: url(../image/abt_ic2h.png) no-repeat 36px 13px #333;
 background: linear-gradient(90deg,rgba(1,144,174,1),rgba(0,207,172,1)) url(../image/abt_ic2h.png) no-repeat 36px 13px;}
 .abt_t li:nth-child(3).cur a,.abt_t li:nth-child(3):hover a{background: url(../image/abt_ic3h.png) no-repeat 36px 13px #333;
 background: linear-gradient(90deg,rgba(1,144,174,1),rgba(0,207,172,1)) url(../image/abt_ic3h.png) no-repeat 36px 13px;}
 .abt_con{ margin-top: 30px;}
.abt_con li{ float: left;width: 284px;height: 214px;position: relative;margin-right: 21px;}
.abt_con li:last-child{ margin-right: 0;}
.abt_con li i{ width: 284px;height: 214px;display: block;}
.abt_con li img{ width: 284px;height: 214px;}
.abt_con li em{ display: block;height: 0;position: absolute;left: 0;bottom: 0;width: 100%;height: 0;transition:all 0.5s;color: #fff;text-align: center;font-size: 16px;line-height: 240px;overflow: hidden;background: url(../image/yan.png) no-repeat 127px 80px rgba(0,0,0,0.77);}
.abt_con li:hover em{ height: 100%;}


html {font-size: 10px;}
@media screen and (min-width:800px) {
    html {
        font-size:11px;
    }
}
@media screen and (min-width:1024px) {
    html {
        font-size:13px;
    }
}
@media screen and (min-width:1280px) {
    html {
        font-size:14px;
    }
}
@media screen and (min-width:1440px) {
    html {
        font-size:16px;
    }
}
@media screen and (min-width:1600px) {
    html {
        font-size:18px;
    }
}
@media screen and (min-width:1920px) {
    html {
        font-size:20px;
    }
}

@-webkit-keyframes fadeInDown1 {
    from { opacity: 0; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0) }
    to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) }
}
@keyframes fadeInDown1 {
    from { opacity: 0; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0) }
    to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) }
}
.fadeInDown1 { -webkit-animation-name: fadeInDown1; animation-name: fadeInDown1 }
@-webkit-keyframes fadeInDown2 {
    from { opacity: 0; -webkit-transform: translate3d(0, -20%, 0); transform: translate3d(0, -20%, 0) }
    to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) }
}
@keyframes fadeInDown2 {
    from { opacity: 0; -webkit-transform: translate3d(0, -20%, 0); transform: translate3d(0, -20%, 0) }
    to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) }
}
.fadeInDown2 { -webkit-animation-name: fadeInDown2; animation-name: fadeInDown2 }
@-webkit-keyframes fadeInLeft1 {
    from { -webkit-transform: translate3d(-10%, 0, 0); transform: translate3d(-10%, 0, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
@keyframes fadeInLeft1 {
    from { -webkit-transform: translate3d(-10%, 0, 0); transform: translate3d(-10%, 0, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
.fadeInLeft1 { -webkit-animation-name: fadeInLeft1; animation-name: fadeInLeft1 }
@-webkit-keyframes fadeInLeft2 {
    from { -webkit-transform: translate3d(-5%, 0, 0); transform: translate3d(-5%, 0, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
@keyframes fadeInLeft2 {
    from { -webkit-transform: translate3d(-5%, 0, 0); transform: translate3d(-5%, 0, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
.fadeInLeft2 { -webkit-animation-name: fadeInLeft2; animation-name: fadeInLeft2 }
@-webkit-keyframes fadeInRight1 {
    from { -webkit-transform: translate3d(10%, 0, 0); transform: translate3d(10%, 0, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
@keyframes fadeInRight1 {
    from { -webkit-transform: translate3d(10%, 0, 0); transform: translate3d(10%, 0, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
.fadeInRight1 { -webkit-animation-name: fadeInRight1; animation-name: fadeInRight1 }
@-webkit-keyframes zoomLeft {
    from { -webkit-transform: scale3d(0.3, .3, .3); transform: scale3d(0.3, .3, .3); opacity: 0 }
    50% { opacity: 1 }
}
@keyframes zoomLeft {
    from { -webkit-transform: scale3d(0.3, .3, .3); transform: scale3d(0.3, .3, .3); opacity: 0 }
    50% { opacity: 1 }
}
.zoomLeft { -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-animation-name: zoomLeft; animation-name: zoomLeft }
.zoomRight { -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-animation-name: zoomLeft; animation-name: zoomLeft }
@-webkit-keyframes fadeInUp1 {
    from { -webkit-transform: translate3d(0, 10%, 0); transform: translate3d(0, 10%, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
@keyframes fadeInUp1 {
    from { -webkit-transform: translate3d(0, 10%, 0); transform: translate3d(0, 10%, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
.fadeInUp1 { -webkit-animation-name: fadeInUp1; animation-name: fadeInUp1 }
@-webkit-keyframes fadeInUp2 {
    from { -webkit-transform: translate3d(0, 2%, 0); transform: translate3d(0, 2%, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
@keyframes fadeInUp2 {
    from { -webkit-transform: translate3d(0, 2%, 0); transform: translate3d(0, 2%, 0); opacity: 0 }
    to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
.fadeInUp2 { -webkit-animation-name: fadeInUp2; animation-name: fadeInUp2 }
@keyframes myfirst {
    0% { top: 0; left: 0 }
    25% { top: 10px; left: 0 }
    50% { top: 0; left: 0 }
    100% { top: 0; left: 0 }
}
@-moz-keyframes myfirst {
    0% { top: 0; left: 0 }
    25% { top: 10px; left: 0 }
    50% { top: 0; left: 0 }
    100% { top: 0; left: 0 }
}
@-webkit-keyframes myfirst {
    0% { top: 0; left: 0 }
    25% { top: 10px; left: 0 }
    50% { top: 0; left: 0 }
    100% { top: 0; left: 0 }
}
@-o-keyframes myfirst {
    0% { top: 0; left: 0 }
    25% { top: 10px; left: 0 }
    50% { top: 0; left: 0 }
    100% { top: 0; left: 0 }
}