body{
font-weight: lighter;
}
main { zoom: 1 }

/*banner*/
.banner { position: relative; display: flex; justify-content: center; align-items: center; width: 100%; max-height: 440px; background: #eef2f5; overflow: hidden }
.banner picture { width: 100%; max-height: 100% }
.banner picture img.slide-img { display: block; width: 100%; max-height: 100% }

/*title*/
.title { text-align: center }
.title h2 { font-size: 30px; font-weight: bold; color: #000; line-height: 50px }
.title p { font-size: 18px; font-weight: 400; line-height: 28px; color: #999; padding-top: 20px; display: inline-block }
@media(max-width:768px) {
    .title h2 { font-size: 28px }
    .title p { font-size: 16px; padding-top: 6px; line-height: 20px }
}

/*position*/
.position { padding: 25px 0; font-size: 12px; color: #666 }
.position i.icon-marker { margin-right: 10px; font-size: 14px }
.position a { padding: 0 5px; color: #666 }
.position a:hover { color: #4a84c3 }

/*mainnav*/
.mainnav { width: 100%; padding: 46px 0; display: flex; align-items: center; justify-content: center }
.mainnav li { margin-left: 3rem; padding-left: 3rem; line-height: 1.2; border-left: 1px solid #777 }
.mainnav li:first-child { margin-left: 0 !important; padding-left: 0 !important; border-left: none }
.mainnav li a { color: #000; font-size: 18px; transition: color .25s ease-in-out }
.mainnav li a:hover { color: #004a83 }

/*list*/
.list { margin-top: 40px }
.list li { margin-top: 0.75rem; margin-bottom: 0.75rem }
.list li a { display: block; min-width: 0; background-color: #fff; transition: all .1s ease; -webkit-box-shadow: 0 0 0 10px 0 rgba(0, 0, 0, .2); box-shadow: 0 0 10px 0 rgba(0, 0, 0, .2); overflow: hidden }
.list li a:hover { background-color: #999; box-shadow: 0 0 15px 2px rgba(0, 0, 0, .3) }
.list li a figure { position: relative; margin: 0; overflow: hidden }
.list li a figure:before { content: ""; display: block; background-size: cover; background-position: 50%; padding-bottom: 70.416666% }
.list li a figure img { display: inline-block; width: 100%; height: 100%; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); transition: all .3s ease; position: absolute; top: 0 }
.list li a:hover figure img { transform: scale3d(1.1, 1.1, 1) }
.list li a h3 { display: block; height: 60px; padding: 0 15px; line-height: 60px; text-align: center; font-size:16px; color: #333 }
.list li a:hover h3 { color: #fff;font-weight:bold;}

/*pro*/
.probox { padding-top: 50px; padding-bottom: 50px; background: #e9e9e9 }
.prolist { margin-top: 60px }
.proitem { height: 536px; margin-top: 50px; color: #333 }
.proitem:first-child { margin-top: 0 }
.proitem a { display: flex; width: 100%; height: 100%; padding: 36px; background-color: #fff; transition: all .1s ease; -webkit-box-shadow: 0 0 0 10px 0 rgba(0, 0, 0, .2); box-shadow: 0 0 10px 0 rgba(0, 0, 0, .2) }
.proitem a:hover { color: #fff; background-color: #999; box-shadow: 0 0 15px 2px rgba(0, 0, 0, .3) }
.proitem a .col-l, .proitem a .col-r { flex: 0 0 50%; max-width: 50%; padding: 0 15px; display: flex; justify-content: center; align-items: center }
.proitem a .col-l { flex-direction: column }
.proitem a .col-l span { display: block; font-size: 36px }
.proitem a .col-l p { margin-top: 40px; padding-bottom: 50px; font-size: 18px }
.proitem a .col-r { max-height: 464px; margin: 0 }
.proitem a .col-r img { display: inline-block; max-width: 100%; max-height: 464px }
.proitem.lr a { flex-direction: row-reverse }
.proitem a:hover .col-l span{ font-weight:bold;}

.propic { width: 100%; height: 720px; background: #e9e9e9 }
.propic .flex { width: 100%; height: 720px; justify-content: space-between; align-items: center }
.propic .col-l { flex: 0 0 50%; max-width: 50%; max-height: 500px; padding: 0 15px; display: flex; justify-content: center; align-items: center }
.propic .col-l img { display: inline-block; max-width: 100%; max-height: 500px }
.propic .col-r { flex: 0 0 50%; max-width: 50%; padding: 0 15px; box-sizing: border-box }
.propic .col-r span { display: block; margin-bottom: 49px; font-size: 40px; color: #000; position: relative }
.propic .col-r span em { margin-left: 10px; font-style: normal; font-size: 20px; color: #065b9c }
.propic .col-r span:before { content: ""; width: 20%; height: 4px; background: #065b9c; border-radius: 4px; position: absolute; bottom: -21px }
.propic .col-r p { font-size: 18px; color: #000; line-height: 35px; margin-bottom: 68px; -webkit-line-clamp: 4; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis }

.proinfo { padding-top: 80px; padding-bottom: 80px }
.probg { background: #e9e9e9 }
.proinfo .title { display: flex; justify-content: center; flex-direction: column; align-items: center }
.proinfo .title h3 { display: block; font-size: 30px; font-weight: bold; color: #3c3c3b; line-height: 50px }
.proinfo .title h3::after { content: ""; display: block; width: 70px; height: 5px; margin: 10px auto 0; background: #065b9d }
.proinfo .info { padding-top: 50px; padding-bottom: 50px; line-height: 1.8; font-size: 16px }
.proinfo .info:last-child { padding-bottom: 0 }
.proinfo .info p { text-indent: 0; line-height: 32px; color: #1c1f21 }
.proinfo .info img { max-width: 100%; vertical-align: top }
.proinfo .info a { color: #4a84c3 }
.proinfo .info a:hover { text-decoration: underline }
.proinfo .info strong, .proinfo .info th { font-weight: bold }

/*news*/
.newsbox { padding-top: 50px; padding-bottom: 50px; background: #e9e9e9 }
.newslist { margin-top: 40px }
.newslist li { margin-top: 0.75rem; margin-bottom: 0.75rem }
.newslist .item { display: block; padding-bottom: 20px; min-width: 0; background-color: #f7f7f7; transition: all .1s ease; /*-webkit-box-shadow: 0 0 0 10px 0 rgba(0, 0, 0, .2); box-shadow: 0 0 10px 0 rgba(0, 0, 0, .2);*/ overflow: hidden }
.newslist .item figure { position: relative; margin: 0; overflow: hidden }
.newslist .item figure:before { content: ""; display: block; background-size: cover; background-position: 50%; padding-bottom: 70.416666% }
.newslist .item figure img { display: inline-block; width: 100%; height: 100%; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); transition: all .3s ease; position: absolute; top: 0 }
.newslist .item:hover figure img { transform: scale3d(1.1, 1.1, 1) }
.newslist .item .info { margin-top: 15px; padding: 0 20px }
.newslist .item .info h3.tit { margin-top: 10px; font-weight: 600; font-size: 16px; color: #333 }
.newslist .item .info p.txt { margin-top: 15px;font-size: 14px;
    color: #666; }
.newslist .item .info time.date { display: block; margin-top: 10px;font-size: 14px;}
.newslist .item:hover { color: #fff; background: #999; box-shadow: 0 0 10px 2px rgba(0, 0, 0, .2) }
.newslist .item:hover h3.tit { color: #fff }
.newslist .item:hover p.txt{color: #fff;font-weight:bold;}


/*case*/
.casebox { padding-top: 50px; padding-bottom: 100px; background: #f3f3f3 }
.casebox .title { margin-top: 50px }

/*video*/
.videobox { padding-top: 50px; padding-bottom: 100px; background: #f3f3f3 }
.videobox .title { margin-top: 50px }
.videolist li a figure i { display: block; position: absolute; top: 50%; left: 50%; z-index: 3; transform: translate(-50%, -50%); width: 80px; height: 80px; background: url(../images/cplay.png) no-repeat center/ cover; transition: .42s ease }
.videolist.video-douyin li a figure:before { padding-bottom: 130% }
.videolist li a figure::after { content: ""; width: 100%; height: 100%; opacity: .4; background-image: linear-gradient(#222222, #000000); position: absolute; top: 0; left: 0; z-index: 2; margin: auto }
.videolist li a:hover figure::after { opacity: .8 }
.videolayer { background-color: #000 !important }
.videolayer .layui-layer-content { display: flex; justify-content: center; align-items: center }

/*about*/
.aboutinfo { padding-top: 80px; padding-bottom: 80px }
.aboutbg { background: #e9e9e9 }
.aboutinfo .info { padding-top: 50px; padding-bottom: 50px; line-height: 1.8; font-size: 16px }
.aboutinfo .info:last-child { padding-bottom: 0 }
.aboutinfo .info p { text-indent: 0; line-height: 32px; color: #1c1f21 }
.aboutinfo .info img { max-width: 100%; vertical-align: top }
.aboutinfo .info a { color: #4a84c3 }
.aboutinfo .info a:hover { text-decoration: underline }
.aboutinfo .info strong, .aboutinfo .info th { font-weight: bold }
.aboutinfo .info-table { width: 100%; margin-top: 50px; box-shadow: 0 0 13px 2px #dbdbdb; border-collapse: collapse; transition: all 500ms ease 0s !important }
.aboutinfo .info-table tr td { height: 70px; text-align: center; background: #e8e8e8; font-weight: bold; font-size: 16px; border-right: 2px solid #f1f1f1; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; -webkit-transition: all 500ms ease 0s; -moz-transition: all 500ms ease 0s; -ms-transition: all 500ms ease 0s; -o-transition: all 500ms ease 0s; transition: all 500ms ease 0s !important }
.aboutinfo .info-table tr.jobsitem td { cursor: pointer; background: #fff; font-size: 14px; font-weight: 500; border-top: 2px solid #f1f1f1 }
.aboutinfo .info-table tr.jobsitem td .tablemore { width: 12px; height: 12px; border-right: 2px solid #999; border-bottom: 2px solid #999; transform: rotate(-45deg); -ms-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -o-transform: rotate(-45deg) }
.aboutinfo .info-table tr.jobsitem td:nth-child(1) { text-align: left; padding: 0 20px 0 50px }
.aboutinfo .info-table tr.jobsitem td:nth-child(2) { text-align: left; padding: 0 20px 0 50px }
.aboutinfo .info-table tr.jobsitem:hover td { color: #4673b9 }
.aboutinfo .info-table tr.jobsitem:hover td .tablemore { border-color: #fe240c; }
.aboutinfo .info-table tr td:nth-child(4) { border-right: none }
.aboutcontact { margin-top: 30px; align-items: center }
.aboutcontact .col-l { display: flex; justify-content: center }
.aboutcontact .col-l .footcode figure img { width: 230px; height: 230px }
.aboutcontact .col-r { position: relative; padding: 55px; border-left: 1px solid #fff }
.aboutcontact .col-r::after { content: ""; position: absolute; top: 0; left: 0; display: block; width: 1px; height: 100%; background: #d7d7d7 }
.aboutcontact .col-r h3 { font-weight: bold; font-size: 24px; letter-spacing: 3px }
.aboutcontact .col-r span { font-weight: bold; font-size: 18px; letter-spacing: 6px }
.aboutcontact .col-r p { margin-top: 15px; line-height: 1.6; font-size: 18px }

.jobs .hd { width: 100%; background: #ffffff; padding: 110px 90px 40px }
.jobs .hd span { display: block; width: 100%; position: relative; padding-bottom: 24px; font-size: 32px; color: #000 }
.jobs .hd span::before { width: 100px; height: 4px; background: #4673b9; position: absolute; left: 0; bottom: 0; z-index: 2; content: '' }
.jobs .hd ul { display: flex; width: 100%; margin-top: 46px }
.jobs .hd ul li { margin-right: 50px }
.jobs .bd{ width:100%; background:#fff;}
.jobs .bd tr td{ line-height:200%; letter-spacing:1px; font-size:14px; border-top:1px solid #cecece; padding:30px 0; -webkit-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box;}
.jobs .bd tr td:nth-child(1){ font-size:16px; padding-left:110px;}
.jobs .bd tr td:nth-child(2){ padding-right:30px;}
.jobs .bd tr td.send{ font-size:14px; padding:70px;}
.jobs .bd tr td.send a{ text-decoration:underline; color:#ff0a04;}

/*contact*/
.contactbox { padding-top: 50px; padding-bottom: 50px; background: #f3f3f3 }
.contact { margin-top: 50px; background: #fff }
.contact .col-l { padding: 55px 45px;}
.contact .col-l h3 { font-weight: bold; font-size: 24px; letter-spacing: 3px }
.contact .col-l span { font-weight: bold; font-size: 18px; letter-spacing: 6px }
.contact .col-l p { margin-top: 15px; line-height: 1.6; font-size: 18px }
.contact .col-l .footcode { margin-top: 20px }
.contact .col-r { width: 100%; height: 100%; overflow: hidden;padding: 35px 45px 35px 0;}
.contact .col-r map { display: block; width: 100%; height: 110% }

/*article*/
.article { position: relative; width: 100%; padding: 24px 40px; background: #fff; box-shadow: 0 0 10px -7px rgba(87, 53, 117, 0.13), 0 5px 30px -6px rgba(0, 60, 170, 0.1); border-radius: 10px }
.article-tit { padding-bottom: 30px; border-bottom: 3px solid #f0f1f2 }
.article-tit h1 { font-size: 24px; color: rgba(0, 0, 0, .85); line-height: 40px; margin: 8px 0; word-wrap: break-word; word-break: break-all }
.article-tit .profile { font-size: 12px; color: #9199a1; line-height: 24px }
.article-tit .profile span { margin-right: 24px }
.article-tit .profile span i { margin-right: 5px; font-style: normal }
.article-info { overflow: hidden; padding-top: 24px }
.article-info .info { line-height: 1.8; font-size: 16px }
.article-info .info p { text-indent: 0; line-height: 26px; color: #1c1f21 }
.article-info .info img { max-width: 100%; vertical-align: top }
.article-info .info a { color: #4a84c3 }
.article-info .info a:hover { text-decoration: underline }
.article-info .info strong, .article-info .info th { font-weight: bold }
.fanye { margin-bottom: 10px; padding: 10px 0; line-height: 32px; border-top: 1px solid #f0f1f2 }
.fanye strong { color: #4a84c3; font-weight: normal }
.go-back { position: relative; font-size: 14px; font-weight: 700; color: rgba(0, 0, 0, .85); text-align: center; margin-top: 50px; line-height: 1; display: block }
.go-back img { vertical-align: middle; margin-right: 10px }
.go-back i { display: inline-block; width: 18px; height: 18px; background: url(../images/return.svg) center no-repeat; background-size: cover; vertical-align: middle; margin-right: 10px }
.go-back:hover i { background-image: url(../images/return_hover.svg) }
.go-back::before { content: ''; display: inline-block; vertical-align: middle; width: 12.637%; height: 1px; background-color: rgba(0, 0, 0, .85); margin-right: 30px }
.go-back::after { content: ''; display: inline-block; vertical-align: middle; width: 12.637%; height: 1px; background-color: rgba(0, 0, 0, .85); margin-left: 30px }

.single{ padding-bottom: 50px }
.sidebar h4 { margin: 30px 0 20px; padding-bottom: 30px; font-size: 20px; color: #333; border-bottom: 1px solid #f0f1f2 }
.sidebar h4 span { display: block; color: rgba(0, 0, 0, .4); font-size: 15px; line-height: 1.5; text-transform: capitalize; font-weight: 400 }
.sidenews > a { display: block; padding:25px 0; position: relative; transition: all .5s ease }
.sidenews > a .rec_title { width: calc(100% - 18px); font-size: 18px; line-height: 1.7; color: #333; margin-left: 0; transition: all .5s ease }
.sidenews > a .rec_time { width: calc(100% - 18px); margin-top: 5px; position: relative; font-size: 16px; font-family: 'tel'; line-height: 1.5; color: #333; margin-left: 0; transition: all .5s ease }
.sidenews > a .rec_time span { color: #bfc3c6 }
.sidenews > a .rec_time i { position: absolute; right: 0; transition: all .5s ease; color: #4a84c3; top: 0; font-size: 18px; vertical-align: middle; opacity: 0 }
.sidenews > a::after { content: ''; display: block; left: 0; bottom: 0; position: absolute; background-color: #f0f1f2; transition: all .5s ease; width: 48px; height: 1px }
.sidenews > a:hover .rec_title, .sidenews > a:hover .rec_time { margin-left: 18px }
.sidenews > a:hover .rec_title { color: #4a84c3 }
.sidenews > a:hover .rec_time i { opacity: 1; right: -2px }
.sidenews > a:hover::after { width: 100%; background-color: #4a84c3 }

/*pages*/
.pagebar { width: 100%; margin-top: 20px; padding: 20px 0 }
.pagebar .pagination { display: flex; justify-content: center }
.pagebar .pagination a, .pagebar .pagination span { min-width: 36px; height: 36px; line-height: 36px; text-align: center; color: #606266; font-size: 16px; padding: 0 12px; margin: 0 6px; background: #fff; border-radius: 3px; box-sizing: border-box; text-decoration: none }
.pagebar .pagination a.page-size { font-size: 20px }
.pagebar .pagination a:hover, .pagebar .pagination a.page-num-current { color: #fff; background: #4a84c3 }
.pageno { padding: 20px 0; text-align: center

}

.about_box4 ol li:hover{

    background: rgba(0,0,0,.05);

}
/*************************************************************/
.about_box3{

    padding: 70px 0 80px;
	clear:both;
	overflow:hidden;

    background-color: rgb(255, 255, 255);

    background: url(../images/about.jpg) no-repeat center 91px/cover;

    background-attachment: fixed;

}

.about_box3 .title h3,

.about_box3 .title p{

    color: #fff;

}
.about_box3 .title h3{
	font-size:30px;
}
.about_box3 .title p{ font-size:14px;}
.about_box3 ol{

    margin-top: 40px;

}

.about_box3 ol li{

    float: left;

    width:25%;

    text-align: center;

}

.about_box3 ol li .bt{

    font-size: 60px;

    background-image: linear-gradient(90deg, #0083ff, #00d1ff);
	    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    /*height:70px;*/
	font-weight: bold;

}

.about_box3 ol li .bt span{

    font-family: "DINPro-bold"!important;

    font-size: 90px;

    position: relative;

    bottom: -8px;
	   background-image: linear-gradient(90deg, #0083ff, #00d1ff);
	    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

}

.about_box3 ol li h3{

    font-size: 25px;

    color: #fff;

    font-weight: normal;

}

.about_box3 ol li .t{

    margin-top: 30px;

    color: #fff;

    line-height: 24px;

}

.about_box4{

    padding: 60px 0;	clear:both;
	overflow:hidden;

}
.about_box4 .title h3{ font-size:30px; color:#333;}
.about_box4 .title p{ font-size:14px; color:#333;}
.about_box4 ol{

    margin-top: 40px;

}

.about_box4 ol li{

    float: left;

    width: 19.2%;

    margin-right: 1%;

    height: 95px;

    position: relative;

    background: rgba(0,0,0,.01);

    transition: all .4s ease-in-out;

    padding: 10px;

    margin-bottom: 10px;

}

.about_box4 ol li:nth-child(5n){

    margin-right: 0;

}

.about_box4 ol li img{

  display: block;

  max-width: 100%;

  max-height: 100%;

  position: absolute;

  margin: auto;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

}

.about_box4 ol li:hover{

    background: rgba(0,0,0,.05);

}


/**************************************************/

@media only screen and (max-width:1400px){}
@media only screen and (max-width:1200px){}
@media only screen and (max-width:992px){
	.contact .col-6 { flex: 0 0 100%; max-width: 100% }
	.contact .col-r { height: 500px }

	.aboutcontact .col-l .footcode figure img { width: 180px; height: 180px }
	.jobsinfo{ width: 88% !important }
}
@media only screen and (max-width:768px){
	.proitem { margin-top: 30px }
	.proitem a { flex-direction: column }
	.proitem a .col-l, .proitem a .col-r { max-width: initial }
	.proitem a { padding: 30px 15px }
	.proitem a .col-l span { font-size: 28px }
	.proitem a .col-l p { margin-top: 20px; padding-bottom: 30px; font-size: 16px }
	.proitem a .col-r { max-height: 243px }
	.proitem a .col-r img { max-height: 243px }
	.proitem.lr a { flex-direction: column }

	.propic { height: 560px; padding-top: 30px; padding-bottom: 30px }
	.propic .flex { height: 500px; flex-direction: column-reverse }
	.propic .col-l { flex: initial; max-width: initial; max-height: 250px; width: 100% }
	.propic .col-l img { max-height: 250px }
	.propic .col-r { max-width: 100%; display: flex; flex-direction: column; justify-content: center }
	.propic .col-r span { font-size: 28px }
	.propic .col-r span em { font-size: 18px }
	.propic .col-r p { line-height: 32px; margin-bottom: 20px; font-size: 16px; -webkit-line-clamp: 4 }
	.proinfo, .aboutinfo { padding-top: 60px; padding-bottom: 60px }

	.aboutcontact { margin-top: 30px; align-items: center }
	.aboutcontact .col-l { display: none }
	.aboutcontact .col-r { position: relative; padding: 0 15px; border-left: none }
	.aboutcontact .col-r::after { content: normal }

	.mainnav { padding: 10px 0 }
	.mainnav li{ margin-left: 1rem; padding-left: 1rem }
	.mainnav li a { font-size: 16px }

	.aboutinfo .info-table tr td { height: 50px; font-size: 14px }
	.aboutinfo .info-table tr.jobsitem td { font-size: 12px }
	.aboutinfo .info-table tr.jobsitem td:nth-child(1) { padding: 10px 16px }
	.aboutinfo .info-table tr.jobsitem td:nth-child(2) { padding: 10px 16px }

	.jobs .hd { padding: 16px }
	.jobs .hd span { font-size: 16px; padding-bottom: 8px }
	.jobs .hd ul { margin-top: 16px }
	.jobs .hd ul li { font-size: 12px }
	.jobs .bd tr td { padding: 12px }
	.jobs .bd tr td:nth-child(1) { font-size: 12px; padding-left: 40px }
	.jobs .bd tr td:nth-child(2) { font-size: 12px }
	.jobs .bd tr td.send { font-size: 12px; padding: 20px }

	.videolayer { width: 92% !important; height: 200px !important }

	.pagebar{ margin-top: 20px; padding-top: 1.25rem }
	.page-num{ display: none }

	.sidebar { margin-top: 50px; padding-bottom: 0 }
	.sidenews > a { padding: 15px 0 }
	.article { padding: 15px }
    .article .layui-row { padding: 0 !important; overflow-y: hidden }
    .article .layui-row::-webkit-scrollbar { width: 2px; height: 2px }
}
@media only screen and (max-width:576px){
	
	.about_box3 ol li{
		width:50%;
	}
	
}
.proinfo .info{
text-align: center;
}
.aboutinfo .info img {
    max-width: 100%;
    vertical-align: top;
    filter: drop-shadow(#333 11100px 0);
     /* transform: translateX(-11100px); */
}