@charset "utf-8";
/* CSS Document */
/*header*/
#header{ background:#fff; box-shadow:0 10px 10px rgba(0,0,0,0.3); transition:.3s;}
#header.shadow{box-shadow:0 10px 10px rgba(0,0,0,0.3); top:0;}
.topblue{background:linear-gradient(45deg,#217fc4 30%,#efefef 30%);}

.nav a{font-size:16px; color:#333; padding:1.2em 0 1.2em 3em;}
.nav li:hover a{transform: translateY(5%); position:relative; color:#217fc4;}
.nav li:hover a::after{content:""; width:100%; height:100%; position:absolute; background:linear-gradient(rgba(255,255,255,0) 90%,#217fc4 90%); left:1.5em; top:0; z-index: -1;}
.lang{float:right; background: #fff; color: #999; font-size:12px; position: relative; z-index: 210; margin-top:0.5em;}
.lang h4{font-weight:normal; display: block; position: relative; margin:0; padding:0.5em; cursor: pointer;}
.lang h4::after{content:""; width:7px; height:7px; border-bottom:1px solid #999; border-right:1px solid #999; transform:rotate(45deg) translateY(-50%); position:absolute; top:50%; right:10%;}
.lang ul{list-style: none; margin: 0; padding:0; position: absolute; width: 100%; background: #fff; display: none; box-shadow:0 10px 10px rgba(0,0,0,0.1);}
.lang ul li{padding:0.5em 1em; border-top:1px solid #efefef; cursor: pointer;}
.lang ul li:hover{background:#fff;}
/*content*/
.col-12.title{text-align: center;}
.col-12.title h4{display:inline-block; font-size: 36px; font-weight: normal; color:#333; position: relative; padding:0.5em 0; margin-top:0;}
.col-12.title h4::after{content:""; width:100%; height: 3px; background: #f28f1b; position: absolute; bottom:0; left: 50%; transform: translateX(-50%);}
/*default*/
#defaultimg{border-bottom:3px solid #f5f5f5; background:#fff;}
#defaultimg p{background:#26629b; color: #fff; padding:1em; font-size: 22px; margin:0; text-align: center;}
.dpro{padding:2em 0; background:#fff;}
.dpro .tit{font-size:36px; text-align: center;}
.dpro .frm{border:10px solid #bfdaee; background:#fff; padding:2em; text-align: center; height:100%; line-height: 1.5em; color: #666;}
.dpro .col-3, .dpro .col-6{padding:1em 0.5em; overflow: hidden; }
.dpro figure, .dpro .col-3 div{width:100%;}
.dpro .col-3 div{line-height:0; overflow: hidden; background:#fff;}
.dpro .col-3 img{transition:.3s;}
.dpro .col-3 figure{ box-shadow: 0 0 10px rgba(0,0,0,0.2); background:#f5f5f5; float:left; cursor: pointer; color:#666; transition:.3s;}
.dpro .col-3 figure:hover img{transform:scale(1.05,1.05);}
.dpro .col-3 figure:hover{background:#217fc4; color:#fff; box-shadow: 0 10px 15px rgba(0,0,0,0.2);}
.dpro h3{font-size: 14px;  line-height: 1.3em; text-align: center;}
.dnews{background:url(images/dnews-bg.jpg) no-repeat top; background-size: cover; min-height: 50vh; padding:2em 0;}
.dnews section{padding-top:0.5em;}
.dnews h2{font-size:30px;}
.dnews h2 span{font-weight: normal; padding-left:1em;}
.dnews span.path{display:inline-block; padding:0.5em; color: #fff; background:#f08200; float:left;}
.dnews .col-10{border-bottom:1px dotted #111010; font-size: 13px; padding: 0  0 1em 0;}
.dnews .more a{border:1px solid #294c6a; color: #294c6a; display:block; padding:0.5em; font-size:18px; border-radius: 1em; text-align: center;}
.dnews .more a:hover{background:#294c6a; color:#fff;}
.dnews .more{margin-top:2.5em;}
.dnews h3{font-size:16px; color: #444242;}
.dabout{background: #f4f4f4 url(images/bg.jpg) no-repeat bottom; background-attachment: fixed;}
.dabout .col-12{padding:2em 6em; line-height: 2em; text-align:center;}
.dabout .more a{border-radius:2em; background:#f08200; color: #fff; display: inline-block; padding:0.5em 3em;}
.dabout .more a:hover{background:#217fc4;}
/*news*/
.news h3{font-size:16px; color: #444242; transition: .3s; margin:0;}
.news img{transition:.5s;}
.news figure{line-height:0; background:#fff;}
.news .frm:hover img{transform:scale(1.1,1.1);}
.news .col-4{padding:1em 1.5em;}
.news .frm{font-size:14px; line-height: 1.7em; color: #666; transition: .3s;}
.news a.more{color:#52b1e9;}
.news .frm figure{overflow:hidden;}
.news .frm .path{text-align:left;}
.news .frm div{padding:0.5em; cursor: pointer; background:#fff;}
.news .frm:hover h3{color:#217fc4;}
.news .frm:hover a.more{color:#f08200;}
.news .frm:hover{color:#333; background:#f5f5f5;}
/*product*/
.pro .col-3{padding:1em;}
.pro .frm{box-shadow: 0px 5px 15px rgba(0,0,0,0.5); transition: .3s;}
.pro figure{position:relative; background:#fff;}
.pro figure div{overflow:hidden;}
.pro figure img{opacity:1; transition:.3s;}
.pro figcaption{padding:0.5em; line-height: 1.5em; text-align: center;  width:100%; height:80px;   color: #fff; font-size: 20px;  display:inline-block; background:linear-gradient(45deg,rgba(0,0,0,0.5) 20%,rgba(8,70,115,0.8) 20%); transition:.3s;}
.pro .more a{border:1px solid #ccc; color: #ccc; display:inline-block; padding:0 1em; font-size:18px; border-radius: 1em; text-align: center;}
/*.pro figcaption div{position:absolute; bottom:50%; left:50%; transform:translate(-50%,-50%);}*/
.pro .frm{overflow:hidden; line-height: 0; cursor: pointer;}
.pro .frm:hover{box-shadow: 0px 15px 20px rgba(0,0,0,0.5);}
.pro .frm:hover figcaption{background:linear-gradient(45deg,rgba(0,0,0,0.8) 80%,rgba(8,70,115,0.8) 80%);}
.pro .frm:hover img{opacity:1; transform:scale(1.1,1.1);}
.pro .frm:hover .more a{background:#fff; border:1px solid #fff; color: rgba(8,70,115,0.8);}
.prolist h1, .service h2{font-size:24px; margin-top:0; padding:0.5em 0.5em 0.5em 1em; border-radius:1em 0 0 1em; background:linear-gradient(45deg,#e4e4e4 35%,#efefef 35%,rgba(255,255,255,0)); position:relative;}
.prolist h1::after, .service h2::after{content:""; position:absolute; right:3%; top:50%; width:7%; height:1px; border-top:10px dotted #efefef; }
.prolist .col-4{padding:1em;}
.prolist figure{background:#f5f5f5; cursor: pointer; box-shadow:0 0 10px rgba(0,0,0,0.3);}
.prolist figcaption{padding:0.5em; height:80px; background:linear-gradient(45deg,rgba(8,70,115,0.8) 10%,#7096b9 10%);}
.prolist figcaption.item{padding:0.5em; height:80px; background:linear-gradient(45deg,rgba(8,70,115,0.8) 10%,#666 10%);}
.prolist figcaption h2{font-size:16px; text-align: center; color:#fff;}
.prolist figure div{overflow:hidden;}
.prolist figure img, .prolist figure, .prolist figcaption h2{transition:.3s;}
.prolist figure:hover{box-shadow:0 15px 20px rgba(0,0,0,0.2); background:#217fc4;}
.prolist figure:hover img{transform:scale(1.1,1.1);}
.prolist figure:hover h2{color:#fff;}
.prolist figure:hover figcaption{background:linear-gradient(45deg,rgba(8,70,115,0.8) 90%,#666 90%);}
.prolist figure:hover figcaption.item{background:linear-gradient(45deg,#f08200 90%,#666 90%);}
.prodetail, .service, .prolist{background:linear-gradient(rgba(255,255,255,0.3),rgba(255,255,255,0.9));}
.prodetail .col-6{padding:1em;}
.prodetail .col-6 h1{margin:0; font-size:24px;}
.contact{background:rgba(255,255,255,0.8);}
.contact .col-6{padding:0 1em;}
.contact .col-12{padding:0 1em;}
/*contact*/
.selection li a.hit{color:#333;}
.contact h2{font-size:20px; margin:2em 0 0 0; color:#fff; background:#217fc4; padding-left:0.5em;}
.contact .qq{padding:1em;}
/*footer*/
#footer{text-align:center; color:#fff; padding:1.5em 0; background:#217fc4; font-size: 14px;}
@media screen and (max-width:1024px){/*desktop-s size*/
.nav a{font-size:16px; color:#333333; padding:1em 1em;}
.nav li:hover a::after{left:0;}
.dabout{background-size:cover;}

.nav{padding-right:2%;}
.dpro .frm{padding:1em;}
	
	
}
@media screen and (max-width:920px){/*pad*/
.nav a{font-size:14px; color:#333333; padding:1em 0 1em 0.5em;}
.nav li:hover a::after{content:""; width:100%; height:100%; position:absolute; background:linear-gradient(rgba(255,255,255,0) 90%,#217fc4 90%); left:0.5em; top:0; z-index: -1;}
	.dabout{background-size:cover;}

.news .col-4{padding:1em;}

}
@media screen and (max-width:767px) {/*mobile*/

	.dnews{padding:1em;}
	.dnews h2 span{padding-left:0;}
	.dabout .col-12{padding:1em;}
	.selection .col-4{font-size:16px;}
	.contact .col-6{padding:0;}
	.contact .col-12{padding:0;}
	.contact .qq{padding:0;}
	.contact .qq h3{font-size:16px;}
}