@charset "utf-8";
/* CSS Document */

.side{padding:1em 1.5em 1em 0;}
.main{padding:1em 0 1em 1.5em;}
.content{padding:2em 0;}
.innerhtml{min-height:50vh; line-height: 180%;}
h1.subject{margin:0 0 0.5em 0; color:#00487d;}
#tablescroll{width:100%; height:auto; float:left; overflow-x: hidden; overflow-y:hidden;}
/*header*/
#header{background:linear-gradient(#fff 80%,#ccc);}
.nav ul li a{display:block; padding:2em 1em 1em 1em; font-size:16px; line-height:1.3em; color:#666;}
.nav ul li a:hover{background:linear-gradient(#00487d 10px,rgba(255,255,255,0) 10px); color:#00487d; transform:translateY(-5px);}
.nav ul span{display:inline-block; width:1px; height:1em; background:#ccc; margin:0;}
.nav ul li ul{background:#ccc; display: none;}
.nav ul li ul li a{padding:0.3em; border-bottom:1px dotted #efefef; font-size:13px;}
.nav ul li ul li a:hover{background:#666; color:#fff; transform:translateY(0);}
.logo{width:28%; background:rgba(0,72,125,1); position:absolute; top:0; left:0; transform:skewX(-30deg); padding:12px 12px 12px 0; box-shadow: 5px 0 10px rgba(0,0,0,0.3);}
.logo::before{content:""; position:absolute; top:0; left:-100%; width:100%; height:100%; background:rgba(0,72,125,1); box-shadow:none;}
.logo img{max-width:100%; height:auto; transform:skewX(30deg);}
/*defaultimg*/
#defaultimg{width:100%; overflow: hidden; padding:0; position:relative;}
.defaulmask{background:rgba(0,72,125,.8); position:absolute; top:0; right:-20%; height:100%; transform: skewX(-30deg); z-index: 100;}
.defaulmask div{left:-25%; bottom:10%; position:absolute; transform: skewX(30deg); width:100%;}
@media screen and (max-width:1440px){/*desktop*/
	.defaulmask div{left:-40%; right:0;}
	}
.defaulmask div img{max-width:100%; height:auto;}
.bannertit{position:absolute; bottom:5%; text-align: right; color:#fff; font-weight: bold; font-size:300%; transform:skewX(30deg); opacity:0.5;}
/*d1*/
.tit{color:#153771; font-size:42px; margin:0;}
.d1{text-align: center; background: #f7f7f7; padding:5em 0; background:url("images/bg1202.jpg") no-repeat left; background-size:cover;}
.d1 figcaption{font-size:14px; font-weight: bold;}
.d1 figure div{border-radius:100%; overflow:hidden; margin-bottom:1em; position:relative; line-height:0; transition:.3s; z-index: 8;}
.d1 .col-20{padding:1em;}
.d1 .col-20 img{transition:.3s;}
.d1 .col-20:hover figure div{transform:scale(1.3,1.3);}
.d1 .col-20:hover h3{color:#00487d; position:relative; z-index: 10;}
/*d2*/
.d2{width:60%; margin:auto 20% 2% 20%;}

/*dcompany*/
.dabout{background:url("images/dabout-bg1127-2.jpg") no-repeat ; overflow: hidden; background-size:cover;}
.dabout h1 span{font-size:20px; font-weight: normal;}
.dabout .col-6{background:#e6e4e4; float: right; position:relative; z-index:2; padding:5em 2em 1em 2em; line-height: 2em;}
.dabout .img{width:309px; height:309px; overflow:hidden; border:5px solid #fff; line-height: 0; border-radius: 100%; position:absolute; left:0; top:20%; transform:translate(-120%, -10%);}
.dabout .col-6::before{content:""; width:100%; height:100%; background:#e6e4e4; position:absolute; left:-30%; top:0; transform:skewX(-30deg); z-index: -1;}
.dabout .col-6::after{content:""; width:100%; height:100%; background:#e6e4e4; position:absolute; right:-100%; top:0;}
.dabout .more{text-align:right; padding-right:1em;}
.dabout .more a{font-size:15px; color:rgba(0,72,125,1); font-weight: bold;}
.dabout .more a::after{content:""; width:8em; height:1em; display:inline-block; border-bottom: 1px solid rgba(0,72,125,1); border-right:1px solid #00487d; transform:skewX(30deg); }
/*hotpro*/
.d1.hotpro{background:none; padding:1em 0; width:125%; transform:translateX(-25%);}
.d1.hotpro figure{padding:0.5em; cursor: pointer;}
/*.d1.hotpro figure div {border-radius:0; border:none; margin:0; padding:2em; height: auto; background:#fff; box-shadow: 0 0 10px rgba(0,0,0,0.2); min-height: 250px;}*/
.d1.hotpro figure div {border-radius:0; border:none; margin:0; padding:2em; height: auto; min-height: 250px;}
.d1.hotpro h3{color:#fa4a05; margin:0; font-size:14px;}
.d1.hotpro figcaption{font-weight:normal; font-size:12px;}
.mask{width:100%; height:100vh; position:fixed; z-index:999; background:rgba(255,255,255,0.2); text-align:center; padding:1em; color:#333; overflow:scroll; display: none; vertical-align: middle; top:0; left:0;}
.mask::before{content:""; width:0; height:100%; display:inline-block; vertical-align: middle;}
.mask .col-6{display:inline-block; float:left; margin-left:25%; margin-top:25%; vertical-align: middle; padding:1em; border:1px solid #00487d; background:rgba(255,255,255,1); transform:translateY(-50%); box-shadow: 0 0 10px rgba(0,0,0,0.3);}
.mask .col-6 .close{background:#ccc; width:35px; height:35px; float:right; margin-bottom:1em; position:relative; cursor: pointer;}
.mask .col-6 .close:hover{background:#fff;}
.mask .col-6 .close::before{content:""; width:1px; height:100%; transform:rotate(45deg); background:#333; position:absolute;}
.mask .col-6 .close::after{content:""; width:1px; height:100%; transform:rotate(-45deg); background:#333; position:absolute;}
/*contnet*/
.content{background:linear-gradient(-60deg,rgba(255,255,255,1) 80%,#f5f5f5  80%);}
.sidetit{color:#fff; font-size:20px; background:#00487d; margin:0; padding:1em;}
/*application*/
.application a{color:#666;}
.application figure div{line-height:0;}
/*news*/
.news .col-12{border-bottom:1px dotted #ccc; cursor: pointer; color:#666;}
.news .col-12 h3{color:#000;}
.news .col-12:hover h3{color:#00487d;}
.news .col-12:hover a{background:#fa4a05;}
.news .col-12:hover{color:#000;}
.news p.more a{display:inline-block; border-radius:0.5em; background:#666; color:#fff; padding:0.2em 1em;}
.news p.more a:hover{background:#fa4a05;}
.news .picdiv{width: 33.33%; padding: 1em 1em 1em 0; float: left;}
.news .listdiv{width: 66.66%; float: left;}

/*product*/
.proall h3{color:#00487d; font-weight: normal; font-size:22px;}

ul.proclass{list-style:none; margin:0; padding:0;}
ul.proclass li{display:inline-block; padding:0.2em;}
ul.proclass li a{display:block; padding:0; margin:0; color:#333; border: 1px solid #ccc; background:#fff;}
ul.proclass li a:hover{color:#00487d; background: #66FFFF;}

.tableheader{position:absolute; z-index: 10;}
.tablefrm{overflow-y:hidden; height:500px; position:relative; width:100%;}
.prolisthead{text-align: center; background:#ccc; font-size:14px;}
.prolisthead td{background:#99ccff; padding-top:0.3em; padding-bottom:0.2em;}
.prolisthead th{background:#99ccff; padding-top:0.3em; padding-bottom:0.2em;}
 td.prolisthead{background:#99ccff;}
.prolist th{background:#99ccff; padding:0.3em 0 0.2em 0;}
.prolist{text-align: center; background:#ccc; font-size:14px; float:left; width:1280px; table-layout:fixed;}
.prolist tr:nth-of-type(even){background:#fff;}
.prolist tr{background:#efefef;}
.prolist td{padding:0.3em 0 0.2em 0; text-align:center; word-break:break-all;}
/*agent*/
.agent .col-12{padding:1em 2em; position:relative; font-size:14px; line-height: 1.5em;}
.agent h2{color:#00487d; font-weight: normal; font-size:22px;}
.agent h3{border-left:3px solid #ccc; padding-left:0.5em; margin:0; font-size:18px;}
.agent p{border-top:1px dashed #ccc; padding-top:1em; display: block;}
/*footer*/
#footer{background:#29291f; color:#fff; font-size:12px; padding:3em 0; line-height: 1.5em; word-wrap:break-word; word-break:break-all;}
#footer h4{font-size:16px; font-weight: 800; margin:0.5em 0;}
#footer a{color:#fff;}
#footer a:hover{text-decoration:underline;}
#footer i{color:#666; margin:0 0.7em; font-size:16px; transform:translateX(-0.7em);}
@media screen and (max-width:1280px){/*desktop*/
	.logo{padding:12px 2em 12px 12px;}
	.nav ul li a{padding:2em 0.5em 1em 0.5em;}
	.d1.hotpro figure div {min-height:180px;}
	#tablescroll{overflow-x: scroll; overflow-y:hidden;}
	.tablefrm{overflow:scroll; overflow-y: hidden;}
	/*d2*/
	.d2{max-width:70%;width:70%; margin:auto 13%;}
	.news .picdiv{width: 33.33%; padding: 1em;}
	.news .listdiv{width: 66.66%;}	
}
@media screen and (max-width:960px){/*desktop-small pad*/
	.nav ul li a{font-size:14px; padding:2em 0.5em 1em 0.5em; letter-spacing: -1px;}
	.d1{background:url("images/bg1202.jpg") no-repeat left; background-size:cover;}
	.d1.hotpro figure div {min-height: 150px;}
	#tablescroll{width:90%; height:auto; float:left; overflow:scroll;}
	/*d2*/
	.d2{max-width:95%;width:95%; margin:auto 3%;}
	.news .picdiv{width: 33.33%; padding: 1em;}
	.news .listdiv{width: 66.66%;}		
}
@media screen and (max-width:767px){/*phone*/
	.page{padding:0 3%;}
	.logo{width:60%;}
	.bannertit{display:none;}
	.nav ul li a{padding:1em 0; color:#fff;}
	.nav ul li a:hover{background:#666;}
	.side, .main{padding:1em;}
	.d1.hotpro figure div {min-height: 130px; padding:0.3em;}
	.mask .col-6{margin-left:0;}
	.content{background:#fff;}
	#tablescroll{max-width:90vw; height:auto; clear:both; overflow:scroll;}
	.d1{padding:3em 0;}
	.d1.hotpro{transform:translateX(-10%);}
	.news .picdiv{width: 100%; padding: 1em;}
	.news .listdiv{width: 100%;}	
	
	
}