@charset "utf-8";
/* CSS Document */
.side, .main{padding:1em;}
.innerhtml{line-height:200%;}
.content{padding:3em 0;}
/*nav*/
.nav ul li a{color:#333; font-size:18px; padding:2em 1em 1.3em 1.3em;}
.nav ul li a:hover{background:#0e70b6; color: #fff;}
.nav ul li a.icon{padding-left:0.3em; padding-right:0.3em;}
#header{padding:0; transition:.3s; background:#fff; color:#fff; border-top:5px solid #0e70b6; box-shadow:0 0 5px rgba(0,0,0,0.3);}
#header .page{max-width:85%;}
#header.show{transform:translateY(-20%); overflow: hidden;}
.logo{position:relative; border:1px solid rgba(0,0,0,0); padding-top:1em;}

.logo div.small{transform:translateY(-20%);}
.nav ul li a.hit{background:#006699; color: #fff; border-radius: 0.3em 0.3em 0 0;}
/*default use*/
.d-ad{line-height:0; overflow: hidden;}
.dabout{background:url(images/dabout-bg.jpg?ver20200424) no-repeat top center; padding:3em 25%; font-size:15px; line-height: 200%; border-bottom:7px solid #847f7f; border-top:1px solid #847f7f; background-size:cover;}
/*.dabout div{background: linear-gradient(to top,white,rgba(0,0,0,0));}*/
.dabout h4.tit,.dcooperate h4.tit, .content .tit{text-align: center; font-size:32px; position:relative; padding-bottom:1em;}
.dabout h4.tit::before, .content .tit::before{content:""; width:3em; height:5px; background:#184e7d; display: block; left:50%; bottom:0; transform:translateX(-50%); position:absolute;}
.dcooperate h4.tit::before{content:""; width:6em; height:5px; background:#184e7d; display: block; left:50%; bottom:0; transform:translateX(-50%); position:absolute;}
.dabout a.more{display:inline-block; padding:0.3em 3em; border:1px solid #184e7d; color:#184e7d;}
.dabout a.more:hover{background:#184e7d; color:#fff;}
.dcooperate{padding-bottom:6em; overflow: hidden;}
.dcooperate .page,.dnewproduct .page{max-width:80%;}
.dcooperate a{vertical-align: middle; padding:0 1em;}
.dcooperate img{max-width:100%; height:auto;}
.dnewproduct{padding:4em 0 3em 0;}
.dnewproduct h4.tit{text-align:center; font-size:24px; line-height:1.3em;}
.dnewproduct h4.tit span{display:block; font-weight: normal;}
.dnewproduct .list a{background:none; box-shadow: none; text-align: center;}
.dnewproduct .list h3.subject{color:#000; font-size:15px;}
/*content*/
.sidetit{font-weight:normal; color:#163f92; background:#efefef; padding:0.5em 0.3em;}
.bannerbg{position:absolute; top:0; left:0; z-index: -1;}
/*list*/
.list{padding:1em;}

.list h3{font-weight:normal; margin:0; color:#226EB5;}
.list a{width:100%; diaplay:block; float:left; color:#666; background:#fff; padding:10px;}
.list a:hover{color:#014283;}
.list figure img{transition:.3s;}
.list a:hover img{transform:scale(1.05, 1.05);}
.list a:hover div{color:#333;}
.list a:hover p.more{color:#f00;}
.list a:hover figcaption{opacity:1;}
.list figure{diaplay:block; line-height:0; overflow: hidden; position:relative;}
.list figcaption{position:absolute; top:0; left:0; width:100%; height:100%; opacity:1; text-align: center; color:#fff; background:rgba(0,0,0,0.6); z-index: 100; font-size: 14px; padding-top:30%; opacity:0; transition:.3s;}
.list div{padding:0.3em; font-size:14px; color:#666; line-height: 160%;}
.list div p.more{text-align:right; margin:0; color:#666; font-size:12px;}
.list figcaption span{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
.list .rr{padding-left:1em;}
.list.news a{box-shadow:0 0 5px rgba(0,0,0,0.3);}
.list.news a:hover h3.subject{color:#003366;}
/*gallery*/
.list.service a{padding:0; background:none; box-shadow: none;}
.list.service a:hover{ background:none; box-shadow: none;}
.list.gallery a{padding:0; background:#fff;}

.list.gallery div{padding:0.3em 1em;}
.list.gallery h3.subject{color:#333; text-align: center;}
.list.gallery a:hover h3.subject{color:#f00;}
/*prolist*/
.list.prolist a{border:1px solid #ccc; text-align:center; position:relative; overflow: hidden;}
.list.prolist h3.subject{color:#666; font-size:18px; padding-top:1em;}
.list.prolist a:hover h3.subject{color:#333;}
.list.prolist a:hover{box-shadow:0 10px 15px rgba(0,0,0,0.3);}
.list.prolist div.mask{width:100%; height:100%; position:absolute; background:#333; left:0; top:0; z-index: 3; transition:.3s; opacity:0;}
.list.prolist div.mask::before{content:""; width:90%; height:90%; left:5%; top:5%; border:1px solid #fff; position:absolute;}
.list.prolist div.mask > div{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:20px; display: block; width:80%; height:auto; font-weight:bold; color:#fff;}
.list.prolist a:hover div.mask{top:0; opacity:1;}
.list.pro a{text-align: center;}
.list.pro a:hover{box-shadow:0 0 15px rgba(0,0,0,0.2);}
.list.pro h3.subject{color:#000;}
/*prodetail*/
.list.propic a{border:1px solid #ccc; background:#fff; overflow:hidden; line-height: 0;}
.prodetail h1.subject{font-size:22px; margin-top:0; color:#226EB5;}
.prodetail .col-6, .prodetail .col-12{padding:0 1em;}
.prodetail .col-6 img{border:10px solid #fff; filter: drop-shadow(0 -7px 5px rgba(0,0,0,0.1));}
.prodetail h4.subtit{margin-bottom:0.5em; color:#999; border-bottom:1px solid #ccc;}
.prodetail h4.subtit span{display:inline-block; padding:0.3em 1em; border-radius:0.5em 0.5em 0 0; border:1px solid #ccc; border-bottom:none; transform:translateY(2px); background:#fff;}
.prodetail .innerhtml img{border: 0;box-shadow: 0;}
.prodetail .innerhtml .left{background: #E5E0DD;padding: 1em;text-align: center;}
.prodetail .innerhtml .left p{text-align: center;color: #828282;font-family: Lato,"Helvetica Neue",Helvetica,Arial,sans-serif;}
.prodetail .innerhtml ul{list-style:none;padding: 0;}
.prodetail .innerhtml ul li{border-bottom: 1px solid #E5E0DD;padding: 1em;}
.prodetail .innerhtml ul li div{width: 50%;float: left;padding-right: 5px;}
.prodetail .innerhtml h4{width: 100%;height: auto;float: left;color: #666;font-weight: normal;font-size: 18px;padding-left: 0.5em;border-left: 5px solid #ccc;}
a.minus, a.add{width:30px; background:#fff; font-size:20px; color:#333; border:1px solid #CCC; line-height:28px; display:block; float:left; text-align:center;}
a.minus:hover, a.add:hover{background:#CCC; color:#666;}
.bookmark{width:100%; height:auto; border-bottom:1px solid #ccc; display:inline-block; margin:1em 0 0 0; padding:0; list-style:none;}
.bookmark li{font-weight:bold; cursor:pointer; background:#efefef; color:#666; display:inline-block; width:50%; height:auto; text-align:center; float:left; padding:0.5em; border-radius:0.5em 0.5em 0 0; border-left:1px solid #fff; border-right:1px solid #fff; border-top:1px solid #fff;}
.bookmark li:hover{color:#000;}
.bookmark li.hit{background:#ccc; color:#333;}
/*product qa*/
.qalist{display:none;}
.qablock{border:1px solid #efefef; background:#efefef; margin-top:3px; margin-bottom:3px;}
.qnum{color:#000; font-weight:bold; display:inline-block; width:40%; float:left; margin:0; padding:0.2em;}
.qdate{font-size:13px; color:#999; text-align:right; width:60%; display:inline-block; float:right;  margin:0; padding:0.2em;}
.qablock, .qablock section{width:100%; height:auto; float:left;}
.qablock .innerhtml{padding:0.2em;}

/*footer*/
#footer{font-size:13px; color:#fff; background:#444444; word-break: break-all; line-height:2em; padding-top:1em; padding-bottom:0;}
#footer h4{margin-top:0; margin-bottom:0.5em;}
#footer .rr{text-align: right; color:#ccc;}
@media screen and (max-width:1286px){/*desktop*/
	.logo{padding-top:0.5em;}
	.page{padding:0 3%;}
	#header .page, .dcooperate .page,.dnewproduct .page{max-width:100%;}
	.nav ul li a{padding:1.5em 0.5em 1.3em 0.5em;}
	.dabout{padding:3em 3%; font-size:14px;}
}
@media screen and (max-width:960px){/*desktop-small pad*/
	
	
	.nav ul li a{padding-left:0.3em; padding-right:0.3em; font-size:16px;}
	
	#footer .rr{margin-top:0; text-align: right;}
}
@media screen and (max-width:767px){/*phone*/
	#header{padding:0;}
	#header .page{max-width:100%; padding:0;}
	.logo{padding-top:1em; padding-bottom:5px; padding-left:4px;}
	.nav ul li a{color:#ccc; padding:0.5em; font-size:16px;}
	.nav ul li{ border-bottom:1px solid #666;}
	.page{padding:0 3%;}
	.dabout{background-size:cover;}
	#footer{text-align:center;}
	#footer h4{margin:1em 0 0 0;}
	#footer .rr{text-align:center;}
	/*list*/
	.list .rr{padding-left:0em;}
}