/* ==========================================================================
   Public
============================================================================= */
@import url("https://use.fontawesome.com/releases/v6.4.0/css/all.css");
@import url('https://fonts.googleapis.com/earlyaccess/notosanstc.css'); /* 思源黑體 */
/* body, html { width:100%; height:100%; } */


body { 
	font:1vw/1.6 Arial, Meiryo, "Meiryo UI", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif;
	letter-spacing:0.06em;
	color:#222;
	background-color:#e8e0d6;
}
@media screen and (max-width:1024px) {
	body { font-size:16px; }
}

img {
	border:none;
	vertical-align:middle;
	
	backface-visibility:hidden;
	-webkit-backface-visibility:hidden;	/* Chrome 和 Safari */
    -moz-backface-visibility:hidden; 	/* Firefox */
    -ms-backface-visibility:hidden; 	/* Internet Explorer */
	
	/*image-rendering:-moz-crisp-edges;          /* Firefox        */
    image-rendering:-o-crisp-edges;            /* Opera          */
    image-rendering:-webkit-optimize-contrast; /* Safari         */
    image-rendering:optimize-contrast;         /* CSS3 Proposed  */
    /*-ms-interpolation-mode:nearest-neighbor;   /* IE8+           */
}


*, *:after, *:before {
  -webkit-box-sizing:border-box;
     -moz-box-sizing:border-box;
          box-sizing:border-box;
}


a {
	text-decoration:none;
	-webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}


.clearfix {
    clear: both;
    display: table;
}

.font-block { font-family:"Noto Sans TC", "Meiryo UI", sans-serif; }

/* 長寬比 */
.aspect-ratio {
  aspect-ratio: 4 / 3;
}


/* home
------------------------------------------------------------------------------------------------- */
#home {
	width:100vw;
	height:100vh;
	display:flex;
	align-items:center;
	justify-content:center;
}
.home {
	position:relative;
	width:75%;
	max-width:1706px;
	aspect-ratio: 2 / 1;
	background:url("../img/home-bg.jpg") center center no-repeat;
	background-size:100%;
	border-radius:4vw;
	margin-bottom:1.5vw;
}
.home_menu {
	width:100%;
	text-align:center;
	padding-top:3vw;
}
.home_menu a {
	display:inline-block;
	color:#222;
	font-size:105%;
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif;
	font-weight:600;
	letter-spacing:0.2vw;
	background:rgba(255,255,255,0.6);
	border:#FFF 0.2vw solid;
	padding:0.4vw 1vw;
	border-radius:99em;
	margin:0 0.3vw;
}
.home_menu a:hover {
	background:#dd4f47;
	border:#dd4f47 0.2vw solid;
	color:#FFF;
}
.home h1 {
	position:absolute;
	top:15.5vw;
	width:100%;
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif;
	font-weight:600;
	color:#6e5313;
	text-align:center;
	font-size:3.2vw;
	letter-spacing:0.5vw;
}
.home_copyright {
	position:absolute;
	width:100%;
	bottom:-3vw;
	font-size:0.6vw;
	color:#735025;
	text-align:center;
}


@media screen and (max-width:1024px) {
	.home {
		background:url("../img/home-bg-sp.jpg") center center no-repeat;
		background-size:100%;
		aspect-ratio: 10 / 13.7;
		border-radius:5vw;
	}
	.home h1 { top:30vw; font-size:5.3vw; }
	.home_menu { margin-top:40vw; }
	.home_menu a { font-size:3vw; padding:1.5vw 3vw; border:#FFF 0.5vw solid; margin:1.5vw 0.3vw; }
	.home_copyright { bottom:-8vw; font-size:2vw; }
}

@media screen and (max-width:640px) {
	.home h1 { top:-10vw; }
	.home_menu { margin:0 auto; width:60%; padding-top:2vw; }
	.home_menu a { display:block; margin:4vw 0; width:100%; font-size:4vw; border:#FFF 0.8vw solid; }
	
}

/* mobile menu
------------------------------------------------------------------------------------------------- */
header { display:none; }

@media screen and (max-width:1024px) {
	header {
		display:block;
		position:fixed;
		width:100%;
		background:#f4f0eb;
		padding-left:6%;
		font-size:4.5vw;
		font-family:"Noto Sans TC", "Meiryo UI", sans-serif;
		font-weight:600;
		line-height:13vw;
		-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.2);
		-moz-box-shadow: 0 1px 5px rgba(0,0,0,0.2);
		box-shadow: 0 1px 5px rgba(0,0,0,0.2);
		z-index:100;
	}
	header a { color:#6e5313; }
}



/* content
------------------------------------------------------------------------------------------------- */
aside { position:fixed; top:0; left:0; width:29%; height:100vh; }
aside img { width:100%; height:100%; object-fit:cover; }


main {
	position:absolute;
	top:0;
	right:0;
	width:71%;
	height:auto;
	min-height:100vh;
	background:url("../img/bg.jpg") top center no-repeat fixed;
	background-size:cover;
	padding:1.5vw 6vw 3vw;
}

main h1 { text-align:right; }
main h1 a {
	color:#6e5313;
	font-size:2.5vw;
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif;
	font-weight:600;	
}

main h2 {
	display:inline-block;
	color:#434343;
	font-size:2vw;
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif;
	font-weight:600;
	border-bottom:#FFF 0.5vw dashed;
	padding-right:2vw;
	padding-bottom:0.5vw;
	margin-bottom:1.5vw;
}

main h3 {
	width:100%;
	text-align:center;
	font-size:1.5vw;
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif;
	font-weight:600;
	padding-bottom:2vw;
}
main h3 span { display:block; font-size:80%; color:#6e5313; }

.pc_menu { text-align:right; padding:0.5vw 0 2vw; }
.pc_menu a {
	display:inline-block;
	color:#222;
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif;
	font-weight:600;
	letter-spacing:0.2vw;
	background:rgba(255,255,255,0.6);
	border:#FFF 0.2vw solid;
	padding:0.4vw 1vw;
	border-radius:99em;
	margin:0 0.3vw;
}
.pc_menu a:hover {
	background:#dd4f47;
	border:#dd4f47 0.2vw solid;
	color:#FFF;
}
.pc_menu .action {
	background:#dd4f47;
	border:#dd4f47 0.2vw solid;
	color:#FFF;
}

.content p { padding-bottom:1vw; }
.content img { max-width:100%; }

.p_point { color:#9a5129; font-weight:600; font-family:"Noto Sans TC", "Meiryo UI", sans-serif; }

@media screen and (max-width:1024px) {
	aside, main { position:static; width:100%; height:auto; }
	main { padding:20vw 8% 8%; }	
	main h1, .pc_menu { display:none; }
	main h2 { font-size:3.5vw; border-bottom:#FFF 1vw dashed; padding-right:5vw; padding-bottom:1vw; margin-bottom:3vw; }
	main h3 { font-size:2.5vw; padding-bottom:30px; }
	.content p { padding-bottom:2vw; }
	.no_1000 { display:none; }
}
@media screen and (max-width:640px) {
	main h2 { font-size:6vw; border-bottom:#FFF 1.2vw dashed; padding-bottom:6px; margin-bottom:22px; }
	main h3 { font-size:18px; }
	.content p { padding-bottom:20px; }
}



/* chairman
------------------------------------------------------------------------------------------------- */
#chairman {
	display:inline-flex;
	flex-wrap:wrap;
	width:100%;
}

#chairman .box {
	position:relative;
	align-items:stretch;
	align-content:stretch;
	background:#6e5313;
	color:#FFF;
	width:22%;
	margin:1.5%;
	border-radius:1vw;
	overflow:hidden;
	-webkit-box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.15);
	-moz-box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.15);
	box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.15);
}
#chairman .box .img { aspect-ratio: 3 / 4; }
#chairman .box .img img { width:100%; height:100%; object-fit:cover; }
#chairman .box p { text-align:center; padding:1vw 0; }
#chairman .box span { font-size:80%; opacity:0.7; }
	

@media screen and (max-width:1024px) {
	#chairman .box { width:30%; margin:1.5%; border-radius:10px; }
	#chairman .box p { padding:15px 0; }
}
@media screen and (max-width:640px) {
	#chairman .box { width:100%; margin:5% 0; }
}



/* plan
------------------------------------------------------------------------------------------------- */
#plan {
	width:100%;
	display:grid;
	grid-template-columns: 12vw calc(100% - 12vw);
	grid-template-rows:auto;
}
#plan div { padding:0.8vw 0; border-bottom:#FFF 1px dotted; }
#plan div:nth-child(odd) { color:#9a5129; }

@media screen and (max-width:1024px) {
	#plan { display:block; }
	#plan div { width:100%; }
	#plan div:nth-child(even) { padding:0 0 15px; }
	#plan div:nth-child(odd) { border-bottom:none; padding:15px 0 0; }
}


/* gallery
------------------------------------------------------------------------------------------------- */
.gallery {
	display:inline-flex;
	flex-wrap:wrap;
	width:100%;
}

.gallery a {
	position:relative;
	align-items:stretch;
	align-content:stretch;
	background:#6e5313;
	color:#FFF;
	width:23%;
	margin:1%;
	border-radius:1vw;
	overflow:hidden;
	-webkit-box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.15);
	-moz-box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.15);
	box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.15);
}
.gallery a .img { aspect-ratio: 4 / 3; }
.gallery a .img img { width:100%; height:100%; object-fit:cover; }
.gallery a p { padding:1vw 1.5vw; }
.gallery a span { display:block; font-size:80%; opacity:0.7; }

.gallery a:hover { background:#dd4f47; }
.gallery a:hover img { opacity:0.8; }

@media screen and (max-width:1024px) {
	.gallery a { width:30%; margin:1.6%; border-radius:10px; }
	.gallery a p { padding:15px; }
}
@media screen and (max-width:640px) {
	.gallery a { width:100%; margin:5% 0; }
	.gallery a p { padding:20px 25px; }
}


.photo_list {
	display:inline-flex;
	flex-wrap:wrap;
	width:100%;
	margin-top:2vw;
}

.photo_list a {
	position:relative;
	align-items:stretch;
	align-content:stretch;
	background:#6e5313;
	color:#FFF;
	width:23%;
	margin:1%;
	border-radius:0.5vw;
	overflow:hidden;
	-webkit-box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.15);
	-moz-box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.15);
	box-shadow: 1px 1px 5px 1px rgba(0,0,0,0.15);
}
.photo_list a .img { aspect-ratio: 4 / 3; }
.photo_list a .img img { width:100%; height:100%; object-fit:cover; }

.photo_list a:hover { background:#dd4f47; }
.photo_list a:hover img { opacity:0.8; }

@media screen and (max-width:1024px) {
	.photo_list { margin-top:30px; }
	.photo_list a { width:30%; margin:1.6%; border-radius:8px; }
}
@media screen and (max-width:640px) {
	.photo_list a { width:46%; margin:2%; }
}

.select {
	position:absolute;
	top:11.5vw;
	right:7vw;
}
.select select { padding:1vw; border-radius:3px; backgroune:#FFF; border:none; text-align:center; font-size:120%; }

@media screen and (max-width:1024px) {
	.select { position:static; width:100%; }
	.select select { width:100%; padding:15px 0; margin-bottom:15px; }
}





/* btn
-------------------------------------------------------------------------- */
.btn { width:100%; margin-top:2vw; padding:2vw 0; text-align:center; border-top:#FFF 1px solid; }
.btn a {
	display:inline-block;
	width:25%;
	border-radius:99em;
	padding:1vw;
	text-align:center;
	background:#6e5313;
	color:#FFF;
	font-size:110%;
	font-weight:600;
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif;
}
.btn a i { opacity:0.7; padding-right:5px; }

@media screen and (max-width:1024px) {
	.btn { margin-top:30px; padding:30px 0; }
	.btn a { width:50%; padding:20px; }
}
@media screen and (max-width:640px) {
	.btn a { width:80%; }
}




/* youtube 比例自動縮放
-------------------------------------------------------------------------- */
.iframe-16x9 {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
	margin:0.8vw 0; 
}
.iframe-16x9 iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}