@charset "utf-8";
/* CSS Document */
.side, .main{padding:1em;}
.innerhtml{line-height:200%;}
.content{padding:5em 0;}
/*nav*/
.nav ul li a{color:#fff;font-size: 18px;    padding: 2.1em 1em;}
.nav ul li a:hover{background: #f1795e; color: #fff; border-radius: 0.3em 0.3em 0 0;}
.nav ul li a.icon{padding-left:0.3em; padding-right:0.3em;}
#header{padding-top:10px; transition:.3s; background:rgba(5,3,8,0.7);}
#header .page{padding:0;}
#header.show{background:linear-gradient(rgba(5,3,8,0.6) 60%,rgba(255,255,255,0)); padding-top:0;}
.logo img{filter:drop-shadow(0 0 5px rgba(255,255,255,0.4));}
.nav ul li a.hit{background:#006699; color: #fff; border-radius: 0.3em 0.3em 0 0;}
/*default use*/
.d-area{padding: 2em 0;}
.d-area .list a{padding: 0;background: #fff;box-shadow: none;}
.d-area2{background: #082b4e;color: #fff;padding: 3em 0;}
.d-area2 .col-6{padding: 1em;}
.d-area2 .left h4{font-size: 46px;margin: 0;}
.d-area2 .left p{font-size: 15px;line-height: 200%;}
.d-area2 .right{line-height: 0;}
.d-area3 h4.tit{color: #082b4e;}
.d-news{padding: 1em 0 4em 0;}
.d-news .list a{border-bottom: 1px #eeeeee solid;color: #787878;}
.d-news .list h3{color: #000;font-weight: bold;font-size: 20px;margin: 10px 0;line-height: 200%;}
.d-news .list span.path{text-align: left;color: #000;font-weight: bold;font-size: 15px;}
.d-news .list span.tag{color: #fff;font-size: 13px;padding: 4px 16px;margin-left: 1em;border-bottom: }



/*content*/
.sidetit{font-weight:700; color: #4f4c4c; padding:0.5em 0.3em;font-size: 47px;text-align: center; margin-bottom: 0;}
h1.subject{font-size:24px;}
h4.tit{text-align: center;font-size: 28px;}
h4.tit2{text-align: center;font-size: 47px;font-weight: normal;position: relative;margin-bottom: 0;}
h4.tit2 span{font-size:18px;display: block;}
h4.tit2::before{content: "";display: inline-block;width: 4em;height: 1px;transform: translate(-15px,-15px);background: #000;}
h4.tit2::after{content: "";display: inline-block;width: 4em;height: 1px;transform: translate(15px,-15px);background: #000;}
p.tit2{text-align: center;margin-top: 0;}
.content.about{padding: 0;}
.about .bg{background: url(images/sidebg.png)top left no-repeat;}
.about .side{padding-top: 5em;}
.about .main{padding-top: 9em;}
.contactus h1{margin: 2em 0 1em 0;text-align: center;}
.contact .col-6{padding: 0.5em 0;}
.contact .col-6 p{width: 15%;float: left;margin: 0;padding: 4px 10px;}
.contact p.info{text-align: center;font-weight: bold;font-size: 22px;line-height: 200%;margin: 1em;}
.contactus .btn{background: #461d19;    margin-top: 1em; }
.contactus .btn:hover{background: #000;}
.news .list a{border-bottom: 1px dotted #999999;}
.news .list .path{text-align: left;color: #389339;}
.news .list h3{color: #41220e;}
.news .list div{padding: 0.3em 1em;}
.more{text-align: right;}
.more span{background: #f1795e;color: #fff;padding: 0.5em 1.5em;border-radius: 0.5em;}
.news .list a:hover .more span{background: #41220e;}
.p_class.list a{padding: 0;position: relative;}
.p_class.list figcaption{background: rgba(0,0,0,0.6);padding-top: 0;}
.p_class.list div{position: absolute;bottom:40%;left: 40%;opacity: 0;z-index: 200;transition:.3s;}
.p_class.list a:hover div{opacity: 1;}
.p_class.list a:hover figcaption{ border: 10px solid rgba(255,255,255,0.3);}
.p_class.list h3{color: #fff;}
.product.list a{padding: 0;position: relative;border: 1px solid #ccc;}
.product.list figcaption{background:rgba(65,34,14,0);}

/*list*/
.list{padding:1em;}

.list h3{font-weight:normal; margin:0; color:#000;}
.list a{width:100%; diaplay:block; float:left; color:#666;/* background:linear-gradient(45deg,#f5f5f5 30%,#e6e5db 50%,#f5f5f5 60%); box-shadow: 0 0 10px rgba(0,0,0,0.2);*/ padding:10px;}
.list a:hover{color:#014283; box-shadow: 0 10px 20px rgba(0,0,0,0.2); background:linear-gradient(45deg,#f5f5f5 0%,#e6e5db 10%,#f5f5f5 20%);}
.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(65,34,14,0.3); z-index: 100; font-size: 14px; padding-top:30%; opacity:0; transition:.3s;}
.list div{padding:0.3em; min-height: 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%);}
/*gallery*/
.list.gallery a{padding:0; background:#fff;}
.list.gallery div{padding:0.3em 1em;}
.list.gallery h3.subject{color:#333;}
.list.gallery a:hover h3.subject{color:#f00;}
/*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:#41220e;}
.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;}

/*footer*/
#footer{font-size:13px; color:#fff; background:#080808; word-break: break-all; line-height: 1.5em; padding-top:3em;}
#footer h4{font-size: 15px;}
#footer .col-9 .col-20{float: right;padding: 0 0.5em;}
#footer ul{list-style: none;margin: 0;padding: 0;}
#footer ul li a{color: #fff;line-height: 180%;font-size: 13px;}
#footer ul li a:hover{color:#f1795e;;}
.copyright{text-align: right;border-top: 1px solid #fff;padding: 1em 0;margin: 1em 0 0 0;}

/*ani*/
.ani7{opacity:0; transition:1s; transform:scale(0.8,0.8); transition-timing-function: ease;}
.ani7.zoomintype{opacity:1; transform:scale(1,1);}


@media screen and (max-width:1280px){/*desktop*/
	.logo{padding-top:0.5em;}
	.page{padding:0 3%;}
	
}
@media screen and (max-width:960px){/*desktop-small pad*/
	.nav ul li a{padding-left:0.3em; padding-right:0.3em;}
	
	
}
@media screen and (max-width:767px){/*phone*/
	#header{background:rgba(255,255,255,0.7); padding-top: 0;}
	.nav ul li a{color:#ccc;padding: 1em;}
	.nav ul li{ border-bottom:1px solid #666;}
	.page{padding:0 3%;}
	.contact{padding: 1.5em;}
	.contact p.info{font-size: 16px;}
	.contact .col-6 p{width: 100%;}
	.contact input{width: 95%;}
	.about .side {padding-top: 8em;}
	.about .main { padding-top: 0em;}
	.d-area2 .left h4 {font-size: 30px;}
	 h4.tit2 { font-size: 30px;}
	h4.tit2::before {width: 2em;transform: translate(-15px,-10px);}
	h4.tit2::after {width: 2em;transform: translate(15px,-10px);}
	.news .list h3 {margin-bottom: 0.5em}
	.more { margin-top: 1.5em;}
}