@charset "utf-8";
/* CSS Document */
.side, .main{padding:1em;}
.innerhtml{line-height:200%;}
.content{padding:3em 0;}
body{font-size:16px; line-height:180%;}
/*nav*/
.nav ul li a{color:#000; font-size:16px; }
.nav ul li a::after{content:""; width:8px; height:8px; border:1px solid #000; display: inline-block; transform:rotate(45deg)  translate(-2px,-2px); margin-left:0.4em; border-top:none; border-left:none;}
.nav ul li ul{background:#fff;}
.nav ul li ul li a::after{content:""; display: none; }
.nav ul li ul li a{padding:0.3em; border-top:1px dotted #efefef;}
.nav ul li a:hover, .nav ul li.one.hit{background:#c81b1d; color:#fff;}
.nav ul li ul li a:hover{background:#333;}
.nav ul li a:hover::after{border:1px solid #fff; border-top:none; border-left:none;}
.nav ul li a[style]::after{border:1px solid #fff; border-top:none; border-left:none;}
.nav ul li a.icon{padding-left:0.3em; padding-right:0.3em;}
.nav ul li.lang a{font-size:13px;}
.nav ul li.lang a:hover{color:#000; background:none;}
.nav ul li.lang a::after{display:none;}

#header{padding-top:15px; transition:.3s; background:rgba(255,255,255,0.8);}
#header .page{padding:0;}
#header.show{padding-top:0;}
.logo img{filter:drop-shadow(0 0 5px rgba(255,255,255,0.4));}

/*default use*/
.d1 .tit, .d2 .tit{font-size:250%; margin-bottom:0.3em; line-height: 180%;}
.d1 .page{max-width:85%;}
.d1 .img{padding:0.3em; position:relative;}
.d1 .img span{display:none;}
.d1 .img figcaption{position:absolute; padding:1.5em; font-size:120%; right:0; bottom:0; color:#000; transition:.3s;}
.d1 .img:hover figcaption{width:90%; height:80%; background:rgba(255,255,255,0.7); text-align:center; font-size:200%; top:10%; left:5%; }
.d1 .img:hover figcaption div{top:50%; position:absolute; left:50%; transform:translate(-50%,-50%);}
.d1 .img:hover figcaption span{display:block; font-size:70%;}
.d1 .col-10{float:right; padding:1em 1em 2em 1em;}
.d1 .dabout{position:relative; overflow: hidden;}
.d1 .dabout::after{content:""; position:absolute; width:100%; height:100%; right:0; top:0; background:url(images/img-d1-1201.jpg) no-repeat right center; z-index: -1;}
.d2{position:relative; line-height: 0; margin-top:2em;}
.d2r{width:50%; height:auto; position:absolute; right:0; top:55%; transform:translateY(-50%); line-height:180%; text-align: center;}
.d2 .tit{font-weight: normal; line-height: 130%;}
.d1 .more a, .d2 .more a{border-radius:2em; border:1px solid #000; color:#000; padding:0.5em 2em; display: inline-block;}
.d1 .more a:hover, .d2 .more a:hover{background:#000; color:#fff;}
.d2 .more{margin-top:4em;}
/*content*/
.sidetit{font-weight:normal; color:#fff; background:linear-gradient(60deg,#333 80%,#c81b1d 80%); padding:0.5em 0.3em; margin:0; position:relative; overflow: hidden;}
.sidetit::after{content:""; width:50px; height:50px; background:linear-gradient(120deg,rgba(0,0,0,0) 50%,#333 50%); display:inline-block; position:absolute; right:0; top:0;}
h1.subject{font-size:200%; font-size:280%; }

/*list*/
.list{padding:1em;}
.list h3.subject{font-size:140%; margin:0; color:#333;}
.list a{width:100%; diaplay:block; float:left; color:#666; 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 a:hover h3.subject{color:#014283;}
.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 figcaption span{color:#fff; position:absolute; top:50%; left:50%; text-align:center; transform:translate(-50%,-50%);}
.list div{padding:0.5em; 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;}
/*gallery*/
.list.gallery a{padding:0; background:#fff; box-shadow: 0 0 10px rgba(0,0,0,0.1);}
.list.gallery div{padding:0.3em 1em;}
.list.gallery h3.subject{color:#333; display:block; min-height:4em;}
.list.gallery a:hover h3.subject{color:#f00;}
.list.gallery a:hover{box-shadow:0 10px 15px rgba(0,0,0,0.1);}
/*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;}

/*footer*/
#footer{font-size:80%; background:#efefef; word-break: break-all; line-height: 1.5em; padding-top:1em; border-top:2px solid #000; color:#333;}
#footer .page{max-width:85%;}
#footer .col-4{text-align:left; border-right:1px solid #ccc; margin:2em 0;}

#footer h4{font-size:120%; margin:0; font-weight: normal; color:#000;}
#footer img{float:left; vertical-align: middle;}
#footer .copyright{background:#262626; color:#fff; padding:2em 0;}
@media screen and (max-width:1281px){/*desktop*/
	.logo{padding-top:0.5em;}
	.page{padding:0 3%;}
	.d2r{top:40%;}
	.d2 .more{margin-top:2em;}
	.d1 .dabout::after{right:-25%;}
}
@media screen and (max-width:960px){/*desktop-small pad*/
	.nav ul li a{padding-left:0.3em; padding-right:0.3em;}
	.d1 .dabout::after{right:-40%;}
	.d2{background:url(images/img-d9.jpg) no-repeat left top; background-size:cover;}
	.d2r{width:100%; float:left; position:static; transform:translateY(0); background:rgba(255,255,255,0.6); top:10%;}
}
@media screen and (max-width:767px){/*phone*/
	#header{background:rgba(255,255,255,1); padding-top:0; box-shadow: 0 5px 10px rgba(0,0,0,0.3);}
	.nav ul li ul{display:none;}
	.nav ul li a{color:#ccc;}
	.nav ul li{ border-bottom:1px solid #666;}
	.page{padding:0 3%;}
	.d1 .img:hover figcaption{font-size:130%;}
	
	.d2 .tit{font-size:200%;}
	#footer .col-4{border-right:none; margin:0;}
}