.clearfix{*zoom:1}
i,em{ font-style:normal;}

body{ overflow-x:hidden;}

.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/lefts.png) no-repeat;}
.banner .slick-next {right: 10%; display: none;background:url(../images/rights.png) no-repeat;}   
.slick-dots { position: absolute;left: 50%; font-size:0; bottom: 15%;width: 300px;text-align: center;margin-left: -175px;z-index: 11;}
.slick-dots li {display: inline-block;margin: 0 8px; }
.slick-dots li button { border: 0;display: block;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0dabea+0,32c4b5+100 */
background: rgb(13,171,234); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(13,171,234,1) 0%, rgba(50,196,181,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(13,171,234,1) 0%,rgba(50,196,181,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(13,171,234,1) 0%,rgba(50,196,181,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0dabea', endColorstr='#32c4b5',GradientType=1 ); /* IE6-9 */
width: 10px;height: 10px;color: #1352ba; border-radius: 10px; -webkit-transition: .5s;-moz-transition: .5s;transition: .5s;}
.slick-dots .slick-active button {background-color: #0dabea;width: 40px;border: 0;} 

.tit{ font:50px "Microsoft YaHei UI"; color:#000; font-weight:bold; text-align:center;}
.tit a{ display:block; color:#000;}
.tit em{ font:24px "Microsoft YaHei UI"; display:block;}

.guide{background:url(../images/guide_bg.jpg) no-repeat center bottom; height:735px;}
.digital{ width:1200px; margin:-68px auto 0; background:#fff; height:96px; padding:20px 30px; box-shadow:0 0 1rem #ccc; position:relative;}
.digital li{ width:240px; float:left; position:relative; text-align:center; font:16px "Microsoft YaHei UI"; color:#333; height:96px;}
.digital li:before{ content:""; position:absolute; top:0; right:0; width:1px; height:100%; border-right:1px dashed #666;}
.digital li:last-child:before{border:0;}
.digital li span{ display:block; font:50px Arial, Helvetica, sans-serif; font-weight:bold; margin-bottom:8px;}
.digital li span em{ display:inline-block; width:61px; height:25px; font:18px "Microsoft YaHei UI"; text-align:center; line-height:25px; border-radius:25px;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0dabea+0,32c4b5+100 */
background: rgb(13,171,234); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(13,171,234,1) 0%, rgba(50,196,181,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(13,171,234,1) 0%,rgba(50,196,181,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(13,171,234,1) 0%,rgba(50,196,181,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0dabea', endColorstr='#32c4b5',GradientType=1 ); /* IE6-9 */ color:#fff;}
.digital li:hover span{ color:#0caaeb;}
.guide dl{ margin-top:116px;}
.guide dt{ width:600px; height:386px; overflow:hidden; position:relative; margin-left:-5px; float:left;}
.guide dt img{ display:block;width:600px; height:386px;-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;}
.guide dt em{ display:block; position:absolute; top:150px; left:258px; background:url(../images/guide_v.png) no-repeat; width:90px; height:90px; z-index:2;}
.guide dd{ width:545px; float:right; margin-top:15px;}
.guide dd h3{ font:30px "Microsoft YaHei UI"; font-weight:bold; color:#12aee3;}
.guide dd h3 i{ display:block; font:28px Arial, Helvetica, sans-serif; text-transform:uppercase; color:#000;}
.guide dd h3 span{ display:block; font:22px "Microsoft YaHei UI"; color:#000000;}
.guide dd p{ font:16px "Microsoft YaHei UI"; line-height:25px; color:#666; margin:20px 0 40px;}
.guide dd h5{ height:90px; width:600px;}
.guide dd h5 span{ display:block; float:left; margin-right:45px;}
.guide dd h5 span b{ display:block; float:left; font:58px Arial, Helvetica, sans-serif; font-weight:bold; color:#0DABEA;background-image: -webkit-gradient(linear,left 0, right 0, from(#0DABEA), to(#32C4B5));-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
.guide dd h5 span em{ display:block; font:14px "Microsoft YaHei UI"; color:#000; line-height:25px; float:left; margin:5px 0 0 8px;}
.guide dt:hover img{-webkit-transform:scale(1.1,1.1);
    -moz-transform:scale(1.1,1.1);
    -transform:scale(1.1,1.1);}


.super{ margin:65px 0; position:relative;}
.super:before{content: "";position: absolute;width:100%;height:1px;left:0;top:186px;background:#e1e1e1;z-index: -1;}
.super1 dl{ position:relative;}
.super1 dt{ height:670px;}
.super1 dt img{ display:block; width:100%; height:auto;}
.super1 dd{ width:535px; height:410px; padding:35px 30px 15px; background:rgba(255,255,255,0.95); position:absolute; top:12%;left:50%; z-index:1;}
.super1 dd:before{ content:""; position:absolute; bottom:0; left:0; width:100%; height:8px;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0dabea+0,32c4b5+100 */
background: rgb(13,171,234); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(13,171,234,1) 0%, rgba(50,196,181,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(13,171,234,1) 0%,rgba(50,196,181,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(13,171,234,1) 0%,rgba(50,196,181,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0dabea', endColorstr='#32c4b5',GradientType=1 );}
.super1 dd h3{ font:26px "Microsoft YaHei UI"; font-weight:bold; color:#000000;}
.super1 dd p{ font:16px "Microsoft Yahei"; line-height:26px; color:#666; margin:8px 0 10px;}
.super1 dd h5{ height:85px;}
.super1 dd h5 span{ display:block; float:left; width:50%; font:16px "Microsoft YaHei UI"; text-align:center; font-weight:bold; color:#333;}
.super1 dd h5 span:last-child{margin-right:0;}
.super1 dd h5 em{ display:block; font:36px Arial, Helvetica, sans-serif; font-weight:bold; color:#0DABEA;background-image: -webkit-gradient(linear,left 0, right 0, from(#0DABEA), to(#32C4B5));-webkit-background-clip: text;-webkit-text-fill-color: transparent; height:50px; line-height:50px; overflow:hidden;}
.super_t{height: 116px;text-align: center;z-index: 2;font-size: 24px;line-height: 58px;color: #212121; width:1200px; margin:0 auto;}
.super_t li{width: 300px;float: left;position: relative;}
.super_t li:before{content: "";position: absolute;width:18px;height:18px;left:50%;top:83px;background:#fff;z-index: 1;box-sizing:border-box;border: solid 3px #999;border-radius: 100%;margin-left: -9px;}
.super_t li:after{content: "";position: absolute;width:10px;height:3px;top:91px;left:50%;background:#26afe5;transform: translateX(-50%);transition: all 0.6s cubic-bezier(.075, .82, .165, 1);}
.super_t li span{display: block;font-size: 24px;line-height:94px;height: 94px;color: #333;}
.super_t li.cur span{color: #26afe5;font-weight: bold;}
.super_t li.cur:before{border-color: #26afe5;}
.super_t li.cur:after{width:90%;}

@media (min-width: 1200px) and (max-width: 1440px) {
.super1 dt{ height:500px;}
}
@media (min-width: 1441px) and (max-width: 1600px) {
.super1 dt{ height:570px;}
}
@media (min-width: 1601px) and (max-width: 1680px) {
.super1 dt{ height:620px;}
}


.fanw{ margin-bottom:60px;}
.fanwt{ height:90px; background:#f5f5f5; border:1px solid #eaeaea; border-right:0; margin:28px 0 7px;}
.fanwt h3{ width:33.33%; text-align:center; height:90px; float:left; font:28px "Microsoft YaHei UI";border-right:1px solid #eaeaea; box-sizing:border-box;}
.fanwt h3 a{ display:block; color:#000; padding-top:20px; height:70px;}
.fanwt h3 em{ display:block; font:12px "Microsoft YaHei UI"; color:#c1c1c1; text-transform:uppercase; line-height:20px;}
.fanwt h3 a:hover,.fanwt .cur a{ color:#fff;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0dabea+0,32c4b5+100 */
background: rgb(13,171,234); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(13,171,234,1) 0%, rgba(50,196,181,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(13,171,234,1) 0%,rgba(50,196,181,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(13,171,234,1) 0%,rgba(50,196,181,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0dabea', endColorstr='#32c4b5',GradientType=1 ); /* IE6-9 */}
.fanwt h3 a:hover em,.fanwt .cur em{ color:rgba(255,255,255,0.5);}
.fanw1 dl{ border:1px solid #eaeaea; height:400px; overflow:hidden;}
.fanw1 dt{ width:599px; height:400px; overflow:hidden; position:relative; float:left;}
.fanw1 dt img{ display:block;width:599px; height:400px;}
.fanw1 dt span{ display:block; height:55px; background:rgba(0,0,0,0.8); width:100%; position:absolute; bottom:0; font:20px "Microsoft YaHei UI"; text-align:center; line-height:55px; color:#fff;}
.fanw1 dt span em{ display:inline-block; width:34px; height:34px; background:url(../images/fanw_v.png) no-repeat; vertical-align:middle; margin-right:1%;}
.fanw1 dd{ width:510px; float:right; margin:32px 38px 0 0;}
.fanw1 dd h4 a{ display:block; font:28px "Microsoft YaHei UI"; font-weight:bold; color:#000;}
.fanw1 dd .fanwdd{ margin:12px 0; height:212px; overflow:hidden;}
.fanw1 dd p{ font:16px "Microsoft YaHei UI"; line-height:28px; color:#666;}
.fanw1 dd em,.fanw3 h4{ display:block; font:20px "Microsoft YaHei UI"; font-weight:bold; color:#000000; line-height:28px; padding-left:20px; position:relative; margin:8px 0;}
.fanw1 dd em:before,.fanw3 h4:before{ content:""; position:absolute; top:8px; left:0; width:0; height:0; border-left:5px solid #27aee6; border-top:5px solid rgba(0,0,0,0); border-bottom:5px solid rgba(0,0,0,0);}
.fanw1 dd h5 a{ display:block; width:130px; height:40px; font:16px "Microsoft YaHei UI"; text-align:center; line-height:40px; color:#fff;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0cabeb+0,34c4b3+100 */
background: rgb(12,171,235); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(12,171,235,1) 0%, rgba(52,196,179,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(12,171,235,1) 0%,rgba(52,196,179,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(12,171,235,1) 0%,rgba(52,196,179,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0cabeb', endColorstr='#34c4b3',GradientType=1 ); /* IE6-9 */} 
.fanw3{ position:relative;}
.fanw3 h4{ margin:16px 0;}
.fanw3 li{ width:237px; float:left; margin-right:4px;}
.fanw3 li img{ display:block; width:100%; height:134px;}
.fanw3 li:hover img{ border:0.2rem solid #0cabeb; box-sizing:border-box;}
.fanw3 li em{ display:block; font:16px "Microsoft YaHei UI"; text-align:center; height:40px; line-height:40px; color:#333;}
.fanw_l{ width:40px; height:45px; font:32px "宋体"; font-weight:bold; text-align:center; line-height:45px; color:#fff; background:#bbbbbb; position:absolute; top:86px; left:-50px; cursor:pointer;}
.fanw_r{ width:40px; height:45px; font:32px "宋体"; font-weight:bold; text-align:center; line-height:45px; color:#fff; background:#bbbbbb; position:absolute; top:86px; right:-50px;cursor:pointer;}
.fanw_l:hover,.fanw_r:hover{/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0cabea+0,33c4b4+100 */
background: rgb(12,171,234); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(12,171,234,1) 0%, rgba(51,196,180,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(12,171,234,1) 0%,rgba(51,196,180,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(12,171,234,1) 0%,rgba(51,196,180,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0cabea', endColorstr='#33c4b4',GradientType=1 ); /* IE6-9 */}
.fanw1 dt:before{content: '';
            cursor: pointer;
            position: absolute;
            left: -100%;
            top: 0;
            width: 100%;
            height: 100%;
            background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
            background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0));
            transform: skewx(-25deg);}
.fanw1 dt:hover:before{
            left: 100%;
            -moz-transition: 1s;
            -o-transition: 1s;
            -webkit-transition: 1s;
            transition: 1s;
        }

.yanf{ background:#efefef; height:900px; padding-top:60px; overflow:hidden;}
.yanf1{ height:600px; background:#fff; overflow:hidden; margin:28px 0 35px;}
.yanf2{ width:960px; height:600px; overflow:hidden; float:left;}
.yanf2 li{width:960px; height:600px; overflow:hidden; position:relative;}
.yanf2 li img{ display:block;width:960px; height:auto;}
.yanf2 li span{ display:block; height:60px; background:rgba(0,0,0,0.5); font:16px "Microsoft YaHei UI"; line-height:60px; color:#fff; padding:0 10px 0 30px; position:absolute; bottom:0; width:920px;}
.yanf2 li span em{ display:block; float:right; width:124px; height:40px; border:1px solid #fff; font:16px "Microsoft YaHei UI"; text-align:center; line-height:40px; color:#fff; margin-top:9px;}

.yanf3{ width:200px; float:right; margin-right:20px; height:600px;}
.yanf4{ padding-top:10px;}
.yanf3 li{ width:200px;}
.yanf3 li img{ display:block; width:100%; height:150px;}
.yanf3 li span{ display:block; font:12px "Microsoft YaHei UI"; text-align:center; line-height:30px; height:30px; overflow:hidden; color:#333;}
.yanf3 li.on img{border:3px solid #0cabeb; box-sizing:border-box;}
.yanf3 li.on span{ color:#0cabeb; font-weight:bold;}
.yanf_btn{ height:15px; margin-top:10px; text-align:center;}
.yanf_btn a{ display:inline-block; width:15px; height:15px; border-radius:15px; background:#c7c7c7; margin:0 6px;}
.yanf_btn a:hover{/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0cabea+0,33c4b4+100 */
background: rgb(12,171,234); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(12,171,234,1) 0%, rgba(51,196,180,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(12,171,234,1) 0%,rgba(51,196,180,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(12,171,234,1) 0%,rgba(51,196,180,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0cabea', endColorstr='#33c4b4',GradientType=1 ); /* IE6-9 */}

.yanf_numb{ height:95px;}
.yanf_numb p{ float:left; margin-right:138px;}
.yanf_numb p:last-child{ float:right; margin:0;}
.yanf_numb p:nth-child(3){ margin:0;}
.yanf_numb p b{ display:block; float:left; font:80px Arial, Helvetica, sans-serif; font-weight:bold;color: #0DABEA;background-image: -webkit-gradient(linear,left 0, right 0, from(#0DABEA), to(#32C4B5));-webkit-background-clip: text;-webkit-text-fill-color: transparent;}
.yanf_numb p span{ display:block; float:left; font:20px "Microsoft YaHei UI"; color:#333; line-height:27px; margin:15px 0 0 8px;}
.yanf_numb p span em{ display:block;}














.case{ background:url(../images/case_bg.jpg) no-repeat center top; padding-top:65px;}
.case1{ background:#fff; padding:20px; margin-top:35px;}
.caset{ height:50px; margin-bottom:15px;}
.caset h3{ width:145px; height:50px; float:left; font:18px "Microsoft YaHei UI"; text-align:center; line-height:50px; color:#000; overflow:hidden;}
.caset h3 a{ display:block; color:#000;}
.caset h3 a:hover,.caset .cur a{ color:#fff;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#04a2e3+0,30c1af+100 */
background: rgb(4,162,227); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(4,162,227,1) 0%, rgba(48,193,175,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(4,162,227,1) 0%,rgba(48,193,175,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(4,162,227,1) 0%,rgba(48,193,175,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#04a2e3', endColorstr='#30c1af',GradientType=1 ); /* IE6-9 */}
.case1 dl{ width:386px; float:left; background:#f5f5f5; height:518px; overflow:hidden;}
.case1 dt{ width:386px; height:259px; overflow:hidden; position:relative;}
.case1 dt img{ display:block;width:386px; height:259px;-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;}
.case1 dt:before{ content:""; position:absolute; bottom:0; left:50%; width:0; height:0; border-bottom:10px solid #f5f5f5; border-left:20px solid rgba(0,0,0,0);border-right:20px solid rgba(0,0,0,0); z-index:8; margin-left:-20px;}
.case1 dl:nth-child(2) dt:before{ border:0;}
.case1 dl:nth-child(2) dt:after{ content:""; position:absolute; top:0; left:50%; width:0; height:0; border-top:10px solid #f5f5f5; border-left:20px solid rgba(0,0,0,0);border-right:20px solid rgba(0,0,0,0); z-index:8; margin-left:-20px;}
.case1 dd{ padding:30px 28px 0 28px; height:229px;}
.case1 dd h4 a{ display:block; font:20px "Microsoft YaHei UI"; font-weight:bold; color:#333; overflow:hidden;}
.case1 dd p{ font:16px "Microsoft YaHei UI"; line-height:25px; height:75px; overflow:hidden; margin:12px 0;}
.case1 dd span a{ display:block; width:101px; height:32px; border:1px solid #23baca; font:14px "Microsoft YaHei UI"; text-align:center; line-height:32px; color:#666;}
.case1 dl:hover dd span a{ color:#fff;background: rgb(4,162,227); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(4,162,227,1) 0%, rgba(48,193,175,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(4,162,227,1) 0%,rgba(48,193,175,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(4,162,227,1) 0%,rgba(48,193,175,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#04a2e3', endColorstr='#30c1af',GradientType=1 );}
.case1 dl:hover dd h4 a{ color:#20b8ce;}
.case1 dl:hover dt img,.par li:hover img,.pro li:hover img,.pic li:hover img,.news .news-left dl dt:hover img,.news .news-rig dl dt:hover img{-webkit-transform:scale(1.1,1.1);
    -moz-transform:scale(1.1,1.1);
    -transform:scale(1.1,1.1);}

.par{ margin-bottom:80px;}
.par ul{border-right:1px solid #ccc; border-bottom:1px solid #ccc; box-sizing:border-box;}
.par li{ border-top:1px solid #ccc; border-left:1px solid #ccc; box-sizing:border-box; float:left; width:20%; overflow:hidden;}
.par li img{ display:block; width:100%;-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;}


/*pro*/
.prot{ height:56px; margin:32px 0; text-align:center;}
.prot a{ display:inline-block; margin-left:-1px; font:20px "Microsoft YaHei UI"; text-align:center; line-height:54px; color:#000; width:210px; height:54px; background:#f7f7f7; border:1px solid #eaeaea; box-sizing:border-box;}
.prot a:hover{ color:#fff;background: rgb(4,162,227); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(4,162,227,1) 0%, rgba(48,193,175,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(4,162,227,1) 0%,rgba(48,193,175,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(4,162,227,1) 0%,rgba(48,193,175,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#04a2e3', endColorstr='#30c1af',GradientType=1 );}
.pro ul{min-width:1200px; max-width:1920px; width:100%;margin:0 auto;}
.pro li{ float:left; position:relative; width:24.9%; float:left; margin:0 0 1px 1px; overflow:hidden;}
.pro li img{ display:block; width:100%;-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;}
.pro li em{ display:block; position:absolute; bottom:0; width:100%; font:18px "Microsoft YaHei UI"; height:0; background:rgba(0,0,0,0.7); line-height:55px; color:#fff;overflow:hidden; text-align:center;-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);}
.pro li:nth-child(1){ width:49.9%;}
.pro li:hover em{ height:55px;}


/**/
.newsbj {height: 860px; margin-top:85px;}
.news{ padding-top:20px;}
.news .news-left {width: 613px;float: left;}
.news-tit{ height:72px; overflow:hidden; font:24px "Microsoft YaHei UI"; font-weight:bold; line-height:72px;}
.news-tit a{ display:block; color:#1d1d1d;}
.news-tit a:hover{ color:#0cabeb;}
.news-tit em{ font:16px "Microsoft YaHei UI"; color:#adadad; padding-left:5px;}
.news-tit b{ float:right; font:14px Arial, Helvetica, sans-serif; color:#1d1d1d; line-height:72px;}
.news .news-left dl { margin-bottom: 25px; }
.news .news-left dl dt { width:613px; height:345px; overflow:hidden;}
.news .news-left dl dt img { width:613px; height:345px; display:block;-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;}
.news .news-left dl dd {padding-top: 26px;}
.news .news-left dl dd h4 {height: 32px;margin-bottom: 12px;}
.news .news-left dl dd h4 i {
        display: block;
        float: left;
        margin-right: 15px;
        width: 57px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        font-size: 18px;
        color: #FFF;
        font-weight: normal;
       /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#04a2e3+0,30c1af+100 */
background: rgb(4,162,227); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(4,162,227,1) 0%, rgba(48,193,175,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(4,162,227,1) 0%,rgba(48,193,175,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(4,162,227,1) 0%,rgba(48,193,175,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#04a2e3', endColorstr='#30c1af',GradientType=1 ); /* IE6-9 */}
.news .news-left dl dd h4 a {display: block;height: 32px;line-height: 32px;font-size: 20px;color: #000000;font-weight: bold;}
.news .news-left dl dd p { line-height: 22px;font-size: 14px; color: #666666;}
.news .news-left ul li {height: 44px;border-top: 1px dashed #e3e3e3;box-sizing: border-box;}
.news .news-left ul li span {
        display: block;
        height: 44px;
        line-height: 44px;
        float: left;
        font-size: 16px;
        color: #333333;
        padding-left: 18px;
        background:url(../images/dy_arr.png) no-repeat left center;}
.news .news-left ul li em {display: block;height: 44px;line-height: 44px;font-size: 13px;color: #999999;font-weight: normal;float: right;}
.news .news-rig {width: 558px;float: right;}
.news .news-rig dl { height:132px; margin-bottom:10px;}
.news .news-rig dl dt { width:236px; height:132px; float:left; overflow:hidden;}
.news .news-rig dl dt img { display:block;width:236px; height:132px;-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;}
.news .news-rig dl dd { width:305px; float:right;}
.news .news-rig dl dd h4 { height: 38px;line-height: 38px;margin:10px 0 3px;}
.news .news-rig dl dd h4 a { font-size: 16px;color: #333333;font-weight: bold;}
.news .news-rig dl dd p {line-height: 24px; font-size: 16px; color: #666666;}
.news .news-rig ul li {height: 65px; border-bottom: 1px dashed #e3e3e3;}
.news .news-rig ul li a { display: block;background:url(../images/dy_arr.png) no-repeat right center;height: 65px;}
.news .news-rig ul li i {
        display: block;
        width: 20px;
        height: 20px;
        background: #999999;
        text-align: center;
        line-height: 20px;
        font-size: 14px;
        color: #FFFFFF;
        float: left;
        margin: 24px 14px 0 0;
    }
.news .news-rig ul li span {display: block; height: 65px;line-height: 65px; float: left;font-size: 16px;color: #666666;}
.news .news-rig ul li:hover a { background:url(../images/dy_arr2.png) no-repeat right center;}
.news .news-rig ul li:hover i {/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#04a2e3+0,30c1af+100 */
background: rgb(4,162,227); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(4,162,227,1) 0%, rgba(48,193,175,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(4,162,227,1) 0%,rgba(48,193,175,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(4,162,227,1) 0%,rgba(48,193,175,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#04a2e3', endColorstr='#30c1af',GradientType=1 ); /* IE6-9 */}
.news .news-rig ul li:hover span,.news .news-left dl dd h4 a:hover,.news .news-left ul li:hover span,.news .news-rig dl dd h4 a:hover { color: #0cabea; font-weight:bold;}

.about h2 img{ display:block; width:100%;}
.about dl{ width:1200px; height:140px; margin:-180px auto 0; background:#fff; box-shadow:0 0 1rem #ccc; text-align:center; padding:45px 0 55px; z-index:1; position:relative;}
.about dt{ font:44px "Microsoft YaHei UI"; color:#000;}
.about dt a{ color:#000;}
.about dd{ width:1110px; margin:10px auto 0; font:16px "Microsoft YaHei UI"; line-height:28px;}
.about h5{ width:250px; height:60px; margin:-30px auto 34px; position:relative; z-index:2; font:16px "Microsoft YaHei UI"; font-weight:bold; line-height:60px;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#04a2e3+0,30c1af+100 */
background: rgb(4,162,227); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(4,162,227,1) 0%, rgba(48,193,175,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(4,162,227,1) 0%,rgba(48,193,175,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(4,162,227,1) 0%,rgba(48,193,175,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#04a2e3', endColorstr='#30c1af',GradientType=1 ); /* IE6-9 */}
.about h5 a{ color:#fff; display:block; text-align:center;}

.pic{ height:340px; overflow:hidden;}
.pict{ height:60px; text-align:center; font:20px "Microsoft YaHei UI"; line-height:60px;}
.pict a{ display:inline-block; color:#333; padding:0 45px;}
.pict a:hover,.pict .cur{ color:#0caaeb;}
.pic li{ width:293px; height:208px; float:left; overflow:hidden; position:relative; margin-right:7px;}
.pic li:last-child{ margin-right:0;}
.pic li img{ display:block;width:293px; height:208px;-webkit-transition: 1s;
-moz-transition: 1s;
transition: 1s;}
.pic li em{display:block; position:absolute; bottom:0; width:100%; font:16px "Microsoft YaHei UI"; height:0; line-height:35px; color:#fff;overflow:hidden; text-align:center;-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);/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#04a2e3+0,30c1af+100 */
background: rgb(4,162,227); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(4,162,227,1) 0%, rgba(48,193,175,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(4,162,227,1) 0%,rgba(48,193,175,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(4,162,227,1) 0%,rgba(48,193,175,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#04a2e3', endColorstr='#30c1af',GradientType=1 ); /* IE6-9 */}
.pic li:hover em{ height:35px;}

.link{ height:75px; position:relative;font:14px "Microsoft YaHei"; color:#fff; line-height:75px;/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#0cabea+0,33c4b4+100 */
background: rgb(12,171,234); /* Old browsers */
background: -moz-linear-gradient(left,  rgba(12,171,234,1) 0%, rgba(51,196,180,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  rgba(12,171,234,1) 0%,rgba(51,196,180,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  rgba(12,171,234,1) 0%,rgba(51,196,180,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0cabea', endColorstr='#33c4b4',GradientType=1 ); /* IE6-9 */}
.link a{ display: inline-block;padding:0 20px; font:14px "Microsoft YaHei"; color:#fff; line-height:75px; height:75px; position:relative;}
.link a:hover{font-weight:bold; }

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