@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Noto+Serif+TC:600&display=swap');
/* CSS Document */
.side, .main{padding:1em;}
.main{padding-left:2em; padding-top:2em;}
.innerhtml{line-height:200%;}
.content{padding:0 0 3em 0;}
/*nav*/
.nav ul li a{color:#000; font-size:110%; padding:3em 1em 2em 1em;}
.nav ul li a:hover{background:#4c362a; color: #fff;}
.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 10px 15px rgba(0,0,0,0.3);}
.logo img{filter:drop-shadow(0 0 5px rgba(255,255,255,0.4));}
.nav ul li a.hit{background:#4c362a; color: #fff; border-radius: 0.3em 0.3em 0 0;}
.nav ul li a.icon  span{border:1px solid #000; margin:0; padding:0.2em; font-size:80%; margin:0 2em;}
.nav ul li a.icon:hover{background:none;}
.nav ul li a.icon:hover span{border:1px solid #4c362a; background:#4c362a; }
/*defaultimg title*/
.dtit{position:absolute; bottom:0; left:0; width:100%; height:auto;}

/*list*/
.list{padding:1em;}
.list h3.subject{font-weight:normal; margin:0; color:#4c362a; }
.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%; text-align: center; color:#fff; background:rgba(49,35,23,0.5); z-index: 100; 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;}
/*default use*/
.dabout{padding:3em 0; color:#542d0e; background:url(images/bg.jpg) no-repeat top center; overflow: hidden;}
.dabout .col-6{padding:1em;}
.dabout .col-6 img{filter:drop-shadow(10px 10px 10px rgba(0,0,0,0.3)); padding:1em;}
.dabout h3.tit{font-size:200%; color:#595447;}
.dabout p.more a{display:inline-block; padding:0.5em 1.5em; background:#4f4937; color:#fff;}
.dabout p.more a::after{content:""; width:10px; height:10px; border:1px solid #fff; border-bottom:0; border-left:0; transform:rotate(45deg); margin-left:1em; display: inline-block; transition:.3s;}
.dabout p.more a:hover::after{margin-left:2em;}
.dabout p.more a:hover{background:#333;}
.dservice{background:url(images/dmember-bg2.jpg) no-repeat right center; overflow: hidden;}
.dservice .col-6{background:#4c362a url(images/dmember-bg1.png) no-repeat left center; background-size:contain; color:#ccc; position:relative;}
.dservice .col-6::after{content:""; display:inline-block; width:12em; height:100%; position:absolute; background:linear-gradient(110deg,#4c362a 50%,rgba(0,0,0,0) 50%); top:0; right:-12em;}
.dservice .col-9{float:right; padding:1.5em 1em; line-height: 170%; }
.dservice h3.tit{font-size:200%; font-family: 'Noto Serif TC', serif; font-weight: normal; text-shadow: 5px 5px 5px rgba(0,0,0,0.7); letter-spacing: 1px; line-height: 140%; color:#fff;}
.dservice h3.tit span{font-size:80%; color:#f69aa3; font-weight: bold; font-family: 'Microsoft JhengHei';}
.dservice p.more a{display:inline-block; padding:0.5em 1.5em; border:1px solid #bb8e86; color:#fff;}
.dservice p.more a::after{content:""; width:10px; height:10px; border:1px solid #fff; border-bottom:0; border-left:0; transform:rotate(45deg); margin-left:1em; display: inline-block; transition:.3s;}
.dservice p.more a:hover::after{margin-left:2em;}
.dservice p.more a:hover{background:#bb8e86;}
.dblock{padding:3em 0;}
.dblock .list a{padding:0; }
.dblock .list figcaption{opacity:1;}
.dblock .list figcaption img{padding-bottom:1em;}
.dblock .list figcaption p{display:inline-block; line-height: 130%; font-size:120%; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); margin:0;}
.dblock .list.rr figcaption p{left:0; bottom:0; padding:1em 2em; width:100%; transform:translate(0,0); top:auto; text-align:left;}
/*.dblock .list.rr p::after{content:""; width:50%; height:1px; display:inline-block; background:#fff; margin-left:1em;}*/
.dblock .list figcaption p span{font-size:80%;}
/*content*/
#defaultimg{position:relative; overflow: hidden;}
#defaultimg .bannertit{position:absolute; top:50%; left:50%; border:1px solid #fff; color:#fff; background:rgba(76,54,42,0.7); display:inline-block; transform:translate(-50%,-40%); line-height: 160%; text-align: center;  font-family: 'Noto Serif TC', serif; letter-spacing: 4px; padding:0.1em 46px 0.1em 50px; text-align: center;}
#defaultimg .bannertit span{font-size:45%; font-family: 'Microsoft JhengHei'; letter-spacing: 2px;}
.content{background:url(images/bg-content.jpg) no-repeat center bottom; background-attachment: fixed;}
.content.member{padding-top:3em;}
.sidetit{font-weight:normal; color:#fff; background:linear-gradient(#4c362a 3em,#efefef 3em,#fff); box-shadow:0 -10px 10px rgba(0,0,0,0.3); padding:0.8em 0.3em 0.8em 0.7em; position:relative;}
.sidetit::before{content:""; position:absolute; width:106%; height:100%; top:-15px; left:-3%; border:1px solid #fff; border-bottom:0;}
.side{transform:translateY(-80px); background:linear-gradient(rgba(0,0,0,0) 5em,#efefef); position:relative; border-bottom:3px solid #4c362a;}
h1.subject{font-size:24px;}
h2.title{ color:#990000; border-bottom:1px dotted #ccc; padding-bottom:0.5em;}
/*member list*/
.list.member h3.subject{ font-size:160%; font-family: 'Noto Serif TC', serif; padding-bottom:0.5em; margin-bottom:0.5em; position:relative; z-index: 4;}
.list.member a:hover img{transform:scale(1,1);}
.list.member .rr{padding-left:1.5em;}
.list.member .ll{position:relative;}
.list.member .ll img{position:relative; z-index: 2;}
.list.member .ll::before{content:""; width:100%; height:100%; background:#f5f5f5; position:absolute; top:3%; left:5%; z-index:1;}
/*footer*/
#footer{color:#fff; background:#5b544e; word-break: break-all; line-height: 1.5em; padding:2em 0;}
#footer .col-10 [class*="col-"]{border-left:1px solid rgba(255,255,255,0.3); padding:2em 1em;}

@media screen and (max-width:1286px){/*desktop*/
	.logo{padding-top:0.5em;}
	.page{padding:0 3%;}
	.dservice{background-position:130%;}
	.dservice h3.tit{font-size:180%;}
}
@media screen and (max-width:960px){/*desktop-small pad*/
	.nav ul li a{padding:2em 1em 1em 1em;}
	.dabout .ll{float:right;}
	.sidetit{ padding:0.8em 0.3em; font-size:20px; }
	.subnav ul li a{padding:0.5em;}
}
@media screen and (max-width:767px){/*phone*/
	#header{ padding-top:5px; padding-bottom:5px; box-shadow: 0 10px 15px rgba(0,0,0,0.3);}
	.nav ul li a{color:#ccc; padding:0.5em;}
	.nav ul li{ border-bottom:1px solid #666;}
	.main{padding-left:1em;}
	.page{padding:0 3%;}
	.side{transform:translateY(0); background:none; border-bottom:none; padding-top:2em;}
	.dabout{padding:1em 0;}
	#footer{text-align: center;}
	#footer .col-10 [class*="col-"]{border-left:0; padding:0.5em;}
	#defaultimg .bannertit{width:80%;}
}