@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:18px;}
.nav ul li a:hover{background:#ff6600; color: #fff; border-radius: 0.3em;}
.nav ul li a.icon{padding-left:0.3em; padding-right:0.3em;}
#header{transition:.3s; background:rgba(255,255,255,0.8);}
#header .page{padding-top:15px; border-top:10px solid #3f4448;}
#header.show{ padding-top:0;}

.nav ul li a.hit{background:#006699; color: #fff; border-radius: 0.3em 0.3em 0 0;}
/*default use*/
.d1{text-align:center; padding:3em 0; background:url(images/bg.jpg) no-repeat bottom center; background-size:cover;}
.d1 .page{padding:0 3%;}
.d1 h1.title{color:#996600; font-weight:normal; font-size:30px;}
.d1 p{font-size:18px; line-height: 200%; padding:0 15%;}
.d1 h4{font-size:24px; color:#666; margin:2em 0 1em 0;}
.d1 .col-20{padding:1em;}
.d1 .col-20 figcaption{font-size:20px; font-weight: bold;}
.d1 .col-20 img{filter:drop-shadow(0 0 5px rgba(0,0,0,0.5));}
/*content*/
.banner{position:relative;}
.banner::before{content:""; width:100%; height:100%; background:rgba(61,52,34,0.3); position:absolute; top:0; left:0;}
.banner h4{position:absolute; top:60%; left:50%; transform:translate(-50%,-50%); font-size:200%; margin:0; color:#fff; line-height: 100%;}
.banner h4 span{text-align:center; display: block; font-size:14px; font-weight: normal;}
.tit{font-size:24px; color:#996600;}
.content{padding:2em 3%;}

/*list*/
.list{padding:1em;}
.list h3.subject{font-weight:normal; margin:0; }
.list a{display:block; width:100%; height:auto; 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:#ff6600; 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 p{color:#333;}
.list figure{display:block;}
.list figure div{line-height:0; overflow: hidden; position:relative;}
.list a:hover div::before{opacity:1;}
.list figure div::before{content:"詳細內容→";  text-align: center; color:#fff; width:100%; height:100%; position:absolute;  background:rgba(51,51,51,0.6); z-index: 100; font-size: 14px; padding-top:30%; opacity:0; transition:.3s;}
.list figure div.detail::before{content:"VIEW"}
.list figcaption{padding:0.3em; min-height: 3em; display:block;}
.list figcaption p{font-size:14px; color:#666; border-top:1px dashed #ccc; padding-top:0.5em;}

/*footer*/
#footer{background:#3f4448; color:#fff; font-size:14px; padding:2em 0; text-align: center;}
.line{position: fixed;right: 1%;bottom:30%;text-align: center;}
.line p{margin: 5px 0;}
.line a{color: #556FB5;font-weight: bold;}

@media screen and (max-width:1280px){/*desktop*/
	.logo{padding: 0.2em 0 0.5em 0;}

}
@media screen and (max-width:960px){/*desktop-small pad*/
	.nav ul li a{padding-left:0.5em; padding-right:0.5em;}

}
@media screen and (max-width:767px){/*phone*/
	#header .page{padding-left:0; padding-right:0;}
	#header{position: static;padding-top: 4.5em;}
	.nav ul li a{color:#ccc;}
	.nav ul li{ border-bottom:1px solid #666;}
	.page{padding:0 3%;}
	.page.all{padding:0;}
	.d1 h1.title{font-size:22px; font-weight:bold;}
	.d1 p{font-size:18px; line-height: 200%; padding: 0 3%;}
	.tel{position: fixed;z-index: 300;background: #fff;padding: 10px 0;}
	.tel img{vertical-align: middle;}
	.tel p{color: #556FB5;font-size: 21px;font-weight: bold;margin: 0 5px;display: inline-block;}
}