@charset "utf-8";
/* CSS Document */
.side, .main{padding:1em;}
.innerhtml{line-height:200%;}
.content{padding:3em 0;}
/*nav*/
.nav ul li a{color:#000; font-size:20px; font-weight: bold; padding:1.5em 1em;}
.nav ul li a:hover{color:#006699;}
.nav ul li a.icon{padding-left:0.3em; padding-right:0.3em;}
#header{padding-top:10px; transition:.3s; background:#fff;}
#header .page{padding:0;}
#header.show{padding-top:0; box-shadow:0 5px 10px rgba(0,0,0,0.3);}
.logo img{filter:drop-shadow(0 0 5px rgba(255,255,255,0.4)); width:360px;}
.nav ul li a.hit{background:#006699; color: #fff; border-radius: 0.3em 0.3em 0 0;}
/*default use*/
.tit{border-bottom:1px solid #ccc;}
.tit h4{font-size:160%; color:#077ecb; margin:0; padding:0.5em 0; width:calc(100% - 4em); display: inline-block; position:relative;}
.tit h4::before{content:""; width:4em; height:4px; background:#077ecb; display:inline-block; position:absolute; left:0; bottom:0;}
.tit h4 span{font-size:70%; color:#666; font-weight:normal; margin-left:1em;}
.tit .more{display:inline-block; background:#ffcc33; color:#fff; width:4em; text-align: center;  float:right; margin:1em;}
.d-area .col-4, .d-area .col-8{padding:2em;}
.list.news {margin:0; padding:0;}
.list.news a{padding:0.5em; vertical-align: top;}
.list.news a:hover h3.subject{color:#077ecb;}
.list.news .path{font-size:16px; width:5.5em; display:inline-block;  vertical-align: top; line-height: 160%;}
.list.news h3.subject{margin:0; padding:0; font-size:16px; line-height: 160%; width:calc(100% - 6em); display:inline-block;  vertical-align: top; color:#333; text-align: left;}
.dservice{background:#f0f0f0 url(images/dservice-bg.jpg) no-repeat left; background-size:contain;}
.dservice h3.tit{font-size:160%; color:#077ecb; border:none;}
.dservice .col-8{float:right; text-align: left; padding:2em;}
.dservice ul{margin:0; padding:0; list-style: none;}
.dservice ul ol.col-6{display:inline-block; margin:0; padding:0;}
.dservice ul ol li{display:block; padding:0.3em 0.5em;}
.dservice ul ol li::before{content:""; width:8px; height:8px; display:inline-block; border-radius:100%; background:#ccc; margin-right:0.5em;}
/*content*/
.sidetit{font-weight:normal; color:#fff; background:linear-gradient(90deg, #077ecb 5em,#333 5em); padding:0.3em 0.3em; margin:0; font-size:150%; position:relative;}
.sidetit::before{content:""; width:15px; height:15px; display:block; position:absolute; left:0; top:0; background:linear-gradient(135deg,#fff 50%,rgba(0,0,0,0) 50%);}
.sidetit span{margin-left:1.5em; color:#666;}
h1.title{font-size:250%; text-align:center; position:relative; font-weight: normal; color:#666; padding-bottom:0.4em; margin:0 0 0.5em 0;}
h1.title::before{content:""; position:absolute; width:4em; height:3px; display:inline-block; background:#077ecb; left:50%; bottom:0; transform:translateX(-50%);}
.content .page{max-width:1200px;}
p.path{text-align:right; border-bottom:1px solid #ccc; padding:0.6em 0;}
/*subnav*/
.subnav ul li a{position:relative;}
.subnav ul li a::before{content:""; width:6px; height:6px; display:inline-block; background:#ccc; transform:translateY(-50%); margin-right:0.5em; position:absolute; left:3px; top:50%;}
.subnav ul li a:hover{padding-left:1.5em; background:#666; color:#fff;}
/*list*/
.list{padding:1em;}
.list h3.subject{font-weight:normal; margin:0; color:#333; text-align: center;}
.list a{width:100%; diaplay:block; float:left; color:#666;  padding:10px;}
.list a:hover{color:#014283; }
.list a:hover h3.subject{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(1,66,131,0.6); z-index: 100; font-size: 14px; padding-top:30%; opacity:0; transition:.3s;}

.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%);}
/*news*/
.list.newslist{padding:0;}
.list.newslist a{padding:0.3em; border-bottom:1px dotted #ccc;}
.list.newslist h3.subject{text-align:left;}
.list.newslist .innerhtml{font-size:14px;}
/*prodetail*/
.list.prolist{border-right:1px dotted #ccc; padding:0; text-align: left;}
.list.prolist h3.subject{text-align:left;}
.list.prolist .innerhtml{line-height:1.4em !important; font-size:13px !important; color:#999 !important; height:5em; overflow: hidden;}
.list.propic a{border:1px solid #ccc; background:#fff; overflow:hidden; line-height: 0;}
.list.prolist .more span{display:inline-block; background:#666; color:#fff; border-radius:1em; padding:1px 1em; font-size:12px;}
.list.prolist a:hover .more span{background:#077ecb;}
.list.prolist a:hover figcaption{opacity:0;}
.list.prolist a:hover .innerhtml{color:#666 !important;}
.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;}
.prodetail .form input,.prodetail .form textarea{width:100%;}
.prodetail .form input{height:30px;}
.prodetail .form textarea{height:290px;}
.prodetail .form p{margin:0; padding:0.4em 0;}
/*login*/
.login .page{padding:0 25%;}
.login input{border:1px solid #ccc; height:30px; width:100%;}
/*download*/
.list.download{margin:0; padding:0; border-bottom:1px dotted #ccc;}
.list.download a{padding:0.5em;}
.list.download h3{margin:0; padding:0;}
.list.download p.more{margin:0; padding:0; text-align: right;}
.list.download p.more span{display:inline-block; padding:0.3em; background:#077ecb; border-radius:1em; color:#fff; font-size:14px;}
.list.download a:hover p.more span{background:#333;}
/*faq*/
.qa{margin:0; padding:0; list-style: none;}
.qa li{display:block; background:#efefef; padding:0.5em 0.3em; cursor: pointer; border-bottom:2px solid #fff;}
.qa li:hover{background:#e0e7ec;}
.qa li .innerhtml{padding-left:2.2em; background:#fff; color:#333; padding-right:1em;}
.qa li .qq{padding-left:0.5em; margin-left:0.5em; border-left:1px solid #ccc;}
.qa li::before{content:"Q"; font-size:150%; color:#666;}
/*footer*/
#footer{font-size:13px; color:#fff; background:#077ecb; word-break: break-all; line-height: 1.5em; padding-top:2em;}
#footer ul{margin:0; padding:0 1em; list-style: none;}
#footer ul li a{font-size:18px; color:#fff; display:block; line-height:200%;}
#footer ul li a:hover{text-decoration:underline;}
#footer .col-8{text-align:right; float:right; padding:1em;}
#footer .col-8 h3{margin:0; padding:0; font-size:20px;}

@media screen and (max-width:1286px){/*desktop*/
	.logo{padding-top:0.5em;}
	.page{padding:0 3%;}
	.dservice ul ol li{font-size:14px;}
	.dservice{background-position:-30%;}
	
}
@media screen and (max-width:1024px){/*desktop-small pad*/
	.logo img{max-width:100%; height:auto;}
	.nav ul li a{padding-left:0.3em; font-size:16px;}
	.d-area .col-4, .d-area .col-8{padding:2em 1em;}
	.tit h4{font-size:120%;}
	.tit h4 span{font-size:50%; margin-left:0;}
	.tit .more{font-size:10px;}
	.list.news .path, .list.news h3.subject{font-size:14px;}
	.dservice{background-position:-80%;}
	.subnav ul{font-size:14px;}
	.list.prolist{border-right:none;}
}
@media screen and (max-width:767px){/*phone*/
	#header{padding-top:3px; padding-bottom:3px;}
	.nav ul li a{color:#ccc; padding:0.5em;}
	.nav ul li{ border-bottom:1px solid #666;}
	.subnav ul li a::before{display:none;}
	.dservice{background:#f0f0f0;}
	.dservice .col-8{padding:1em;}
	.page{padding:0 3%;}
	#footer .col-8,#footer ul li a{text-align:center;}
	#footer .col-8{padding-top:2em;}
	#footer .col-8 span{display:inline-block;}
}