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

html { scroll-behavior:smooth; }

body { 
	font:1vw/1.6 Arial, Meiryo, "Meiryo UI", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif;
	letter-spacing:0.06em;
	color:#222;
	background-color:#FFF;
}
@media screen and (max-width:1000px) {
	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 {
	color:#545454;
	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;
}
a:hover { color:#dd5b6a; }


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

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


/* header
--------------------------------------------------------------------------------------------- */
header {
	position:fixed;
	width:100%;
	height:8.5vw;
	background:#fdedd6 url(../img/header-bg.jpg) no-repeat;
	background-size:100%;
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif;
	/*font-weight:600;*/
	padding:0 5vw;
	text-align:right;
	z-index:5;
}
header .pc_menu { line-height:8vw; font-size:1.7vw; }
header a { color:#40210f; padding:0 1vw; }
header a:hover { color:#d55c53; }

header .logo { position:absolute; top:0; left:3vw; padding:1.2vw 0; }
header .logo img { height:6vw; }

@media screen and (max-width:1000px) {
	header { position:fixed; top:0; height:60px; z-index:10; }
	header .logo { padding:7.5px 0; }
	header .logo img { height:45px; }
	header .pc_menu { display:none; }
}




/* content
--------------------------------------------------------------------------------------------- */
section { margin:6vw auto 8vw; width:85%; }

.banner { width:100%; padding-top:8.5vw; }
.banner img { width:100%; }

.home_title { width:100%; padding-bottom:3vw; }
.home_title img { width:100%; }


@media screen and (max-width:1000px) {
	section { margin:60px auto; }
	.home_title { padding-bottom:20px; }
	.banner { margin-top:60px; padding-top:0; }
}


/* about
--------------------------------------------------------------------------------------------- */
#about { width:100%; padding:50vw auto; }

#about .photo, #about .info { float:left; }

#about .photo { width:32vw; }
#about .photo img { width:100%; }

#about .info {
	font-size:1.6vw;
	width:calc(100% - 32vw);
	padding-left:5%;
}
#about .info p { padding-top:3vw; line-height:170%; }
#about h2 {
	color:#c5a069;
	font-size:130%;
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif;
}

@media screen and (max-width:1000px) {
	#about .info { font-size:16px; }
	#about .info p { padding-top:10px; line-height:160%; }
}
@media screen and (max-width:780px) {
	#about .photo, #about .info { float:none; width:100%; }
	#about .info { padding:0; padding-top:20px; }
	#about h2 { font-size:25px; line-height:140%; }
	#about .info p { padding-top:15px; }
}



/* news
--------------------------------------------------------------------------------------------- */
#news { width:100%; }

#news a {
	display:block;
	padding:0 5%;
}
#news a { color:#222; }
#news a:hover { color:#9c681d; opacity:0.7;  }

#news .photo {
	width:100%;
	aspect-ratio: 4 / 3;
	overflow:hidden;
}
#news .photo img {
    width:100%;
    height:100%;
    object-fit:cover;
}
#news h2 {
	width:100%;
	font-size:1.6vw;
	color:#d06255;
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif;
	padding:10px 0;
}
#news h2 span { display:block; color:#dfba36; }

#news .info {
	width:100%;
	/*
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:4;
    -webkit-box-orient: vertical;
	*/
}

@media screen and (max-width:840px) {
	#news h2 { font-size:20px; }
}
@media screen and (max-width:540px) {
	#news h2 { font-size:25px; }
}


/* event
--------------------------------------------------------------------------------------------- */
#event { width:100%; }

#event .event { padding:0 5%; }

#event .photo {
	width:100%;
	aspect-ratio: 4 / 3;
	overflow:hidden;
}
#event .photo img {
    width:100%;
    height:100%;
    object-fit:cover;
}
#event h2 {
	width:100%;
	font-size:1.6vw;
	color:#d06255;
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif;
	padding:10px 0;
}

#event .info {
	width:100%;
	/*
    overflow:hidden;
    display:-webkit-box;
    -webkit-line-clamp:5;
    -webkit-box-orient: vertical;
	*/
}

#event .btn { width:100%; text-align:center; margin-top:1vw; padding-bottom:1vw; }
#event .btn a {
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif;
	color:#FFF;
	font-size:120%;
	background:#dbba37;
	border-radius: 99em;
	padding:0.3vw 2vw 0.5vw;
}
#event .btn a:hover { background:#d95e56; }

.event_calender {
	width:100%;
	text-align:center;
	margin-top:5vw;
}
.event_calender img { width:30vw; max-width:584px; }
.event_calender img:hover { opacity:0.8; }


@media screen and (max-width:840px) {
	#event h2 { font-size:20px; }
	#event .btn { margin-top:15px; padding-bottom:30px; }
	#event .btn a { padding:6px 25px; }
	.event_calender { margin-top:60px; }
	.event_calender img { width:60%; }
}
@media screen and (max-width:540px) {
	#event h2 { font-size:25px; }
	#event .btn { margin-top:20px; }
	#event .btn a { padding:6px 35px; }
	.event_calender { margin-top:20px; }
	.event_calender img { width:80%; }
}



/* footer
--------------------------------------------------------------------------------------------- */
footer {
	font-size:120%;
	background:#eee6db;
}
footer img { max-width:100%; }

address { float:left; width:60%; padding-right:8%; padding-bottom:8%; }
address a { color:#222; text-decoration:underline; }
address a:hover { color:#d36254; }
address iframe { margin-top:1vw; width:100%; height:23vw; }

.content_form { float:right; width:40%; }
.content_form table { width:100%; }
.content_form th { width:6vw; vertical-align:top; text-align:right; padding-top:0.25vw; padding-right:0.8vw; }
.content_form input, .content_form textarea {
	width:100%;
	padding:0.5vw 1vw;
	border:#5c6d9b 1px solid;
	background:#d8e1f0;
	margin-bottom:1.2vw;
}
.content_form textarea { height:15vw; }
.content_form a {
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif;
	color:#FFF;
	background:#dbba37;
	border-radius: 99em;
	padding:0.3vw 2vw 0.5vw;
}
.content_form a:hover { background:#d95e56; }

.copyright { width:100%; background:#dbae6d; text-align:center; padding:2.3vw 2vw 2vw; }

@media screen and (max-width:1000px) {
	footer { font-size:100%; }
	address, .content_form { float:none; width:100%; padding:0; }
	address { padding:50px 0; }
	address iframe { margin-top:20px; height:450px; }
	.content_form th { width:78px; padding-top:10px; padding-right:10px; }
	.content_form input, .content_form textarea { padding:15px; }
	.content_form tr:nth-last-child(1) td { text-align:center; }
	.content_form a { font-size:120%; padding:6px 35px; }
	.copyright { padding:30px 10px; }
}
@media screen and (max-width:480px) {
	.copyright { font-size:90%; }
}