/* ==========================================================================
   Public
============================================================================= */
@import url('../fontawesome-free-7.1.0-web/css/all.min.css');
@import url('https://fonts.googleapis.com/earlyaccess/notosanstc.css'); /* 思源黑體 */

html {
	font-family:Arial, Meiryo, "Meiryo UI", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif;
	font-size: 100%;
	scroll-behavior: auto;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body { 
	width:100%;
	font-size:clamp(0.875rem, 0.5rem + 0.5vw, 1rem);
	line-height:1.6;
	color:#222;
	background:#f1f1f1 url(../img/bg.jpg) center bottom no-repeat;
	background-size:100%;
	overflow-wrap:break-word;
    word-break:break-word;
}
@media (max-width:1279px) {
	body {
		font-size:1rem;
		background:#f1f1f1 url(../img/bg.jpg) center calc(100% - 300px) no-repeat;
		background-size:100%;
	}
}
@media (max-width:767px) {
	body {
		font-size:1rem;
		background:#f1f1f1 url(../img/bg.jpg) center calc(100% - 530px) no-repeat;
		background-size:100%;
	}
}
@media (max-width:390px) {
	body {
		background:#f1f1f1 url(../img/bg.jpg) center calc(100% - 440px) no-repeat;
		background-size:100%;
	}
}



*[lang|=zh], *[lang|=zh] * { letter-spacing:0.08em; }
*[lang|=zh], *[lang]:not([lang|=zh]) { letter-spacing:0.12em; }


form { display:contents!important; }


img {
	display:inline-block;
	border:none;
	vertical-align:middle;
	/*
	width:100%;
	height:100%;
	object-fit:cover;
	*/
}


a {
	display:inline-block;
	text-decoration:none;
    transition: all 300ms ease-in-out;
}

:focus-visible {
	box-shadow:0 0 0 2px #c6494f;
    outline:2px solid #c6494f;
}
:focus:not(:focus-visible){ outline:none; } /* 瀏覽器初始focus樣式關閉 */



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


input, select, textarea {
	color:#222;
	border-radius:3px;
	background:#FFF;
	border:#949494 1px solid;
}

input:focus {
    border-color:dodgerBlue;
    box-shadow:0 0 8px 0 dodgerBlue;
	color:#FFF;
	background:#333;
}

select:focus {
    border-color:dodgerBlue;
    box-shadow:0 0 8px 0 dodgerBlue;
	color:#FFF;
	background:#333;
}


::placeholder { color:#555; font-size:90%; }
:focus::placeholder { color:#FFF; }



input[type="checkbox"], input[type="radio"] { width:2vw; height:2vw; vertical-align:middle; margin-right:5px; }


.icon_guide {
	position:absolute;
	top:0; left:2px;
	font-size:0.75em!important;
	font-weight:normal!important;
	font-family:Arial!important;
}
.icon_guide a { color:#222!important; text-decoration:none; }

@media screen and (max-width:1279px) {
	input[type="checkbox"], input[type="radio"] { width:30px; height:30px; }
	.icon_guide { display:none; }
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.sr-only-focusable:focus,
.sr-only-focusable:focus-within {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto;
    clip-path: none;
    white-space: normal;
}




/* mobile nav
-----------------------------------------------------------------------------*/
#mobile-nav input {
	width:100%;
	font-size:120%;
	/*padding:10px;*/
	border-radius:3px;
	margin-bottom:10px;
}
#mobile-nav input:focus {
    border-color:dodgerBlue;
    box-shadow:0 0 8px 0 dodgerBlue;
	color:#000;
	background:#93fff7;
}

.sp_logo { position:fixed; left:1rem; top:5px; z-index:100; }
.sp_logo img { width:100%; height:auto; }
.sp_nav_btn { width:100%!important; text-align:center; font-size:120%!important; padding:10px 0!important; border:#999 1px solid; }




/* header
-----------------------------------------------------------------------------*/
header {
	display:grid;
	grid-template-columns: 1fr 1.3fr;
	
	position:relative;
	font-family:"Noto Sans TC", sans-serif;
	background:#97a884;
}

header h1 {
	background:#d8d9d9;
	padding:1.2vw 4vw 0;
	text-align:center;
}
header h1 img { width:100%; }

header .search {
	padding:0.5vw 1vw;
	color:#CCC;
	text-align:right;
	font-size:0.8vw;
}
header .search p { display:inline-block; vertical-align:middle; }
header .search p a { color:#323b28; padding:0 0.2vw; }
header .search p a:is(:hover, :focus) { color:#FFF; }
header .search input { padding:0.1vw 0.5vw; vertical-align:middle; }
header .search button { background:#323b28; color:#FFF; margin-left:3px; border-radius:3px; padding:0.35vw; vertical-align:middle; }
header .search button:is(:hover, :focus) { background:#5c3b20; }

.search_sp { padding:15px 20px; text-align:center; }
.search_sp input { padding:10px; width:80%; vertical-align:middle; }
.search_sp button { padding:16px; background:#709d3e; color:#FFF; vertical-align:middle; margin-left:5px; border-radius:3px; }


@media screen and (max-width:1279px) {
	header { display:none; }
}



/* banner
-----------------------------------------------------------------------------*/
#banner { width:100%; margin-bottom:3vw; }
#banner img {
	width:100%;
	height:auto;
    /*aspect-ratio: attr(width) / attr(height);*/
}


#banner2 { width:100%; height:25vw; margin-bottom:5vw; }
#banner2 img { width:100%; }

@media screen and (max-width:1279px) {
	#banner { margin-top:60px; }
	#banner2 { margin-top:60px; margin-bottom:50px; }
}
@media screen and (max-width:767px) {
	#banner2 { margin-bottom:30px; }
}


/* home
-----------------------------------------------------------------------------*/
.home_news {
	display:grid;
	grid-template-columns: 1fr 1fr;
}
.home_news div:first-child { padding-right:4vw; }
.home_news div:last-child { padding-left:4vw; border-left:#FFF 2px solid; }

.home h2 {
	font-family:"Noto Sans TC", sans-serif;
	font-size:2vw;
	color:#31737a;
	font-weight:600;
	margin-bottom:1vw;
}
.home h2 img { margin-right:1.2vw; height:2vw; }
.home h2 a { color:#ba4a21; margin-left:0.5vw; }
.home h2 a:is(:hover, :focus) { color:#333; }

.home_news li {	display:block; border-bottom:#b9b9b9 2px dotted; }
.home_news li a { display:block; padding:1vw 0; }
.home_news li span { display:block; color:#31737b; }
.home_news li a:is(:hover, :focus) { background:#FFF; padding:1vw; }

@media screen and (max-width:1279px) {
	.home h2 { font-size:160%; }
	.home h2 img { margin-right:12px; height:28px; }
}

@media screen and (max-width:767px) {
	.home_news { display:block; }
	.home_news div:first-child, .home_news div:last-child { padding:20px 0; border-left:none; }
	.home_news li a { padding:12px 0; }
	.home_news li span { font-size:90%; }
}

.home_photo { padding:4vw 0 6vw; }

.home_photo_list {
	display:grid;
	grid-template-columns: repeat(6, 1fr);
	gap:1vw;
}
.home_photo_list div { aspect-ratio: 1 / 1; border:#FFF 1px solid; }
.home_photo_list div:is(:hover, :focus) { opacity:0.6; }
.home_photo_list div img {
	width:100%;
	height:100%;
	object-fit:cover;
}

@media screen and (max-width:767px) {
	.home_photo_list { grid-template-columns: repeat(3, 1fr); gap:10px; margin:15px 0; }
}



/* page banner
------------------------------------------------------------------------------ */
.page_banner {
	margin-bottom:3vw;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
@media screen and (max-width:1279px) {
	.page_banner { width:100%; margin-bottom:30px; margin-top:60px; overflow:hidden; }	
}
@media screen and (max-width:767px) {
	.page_banner img { width:112%; max-width:150%; }
}




/* content
------------------------------------------------------------------------------ */
main {
	position:relative;
	margin:0 auto 8vw;
	width:80%;
	min-height:50vh;
}

@media screen and (max-width:1279px) {
	main { margin:0 auto 50px; width:85%; }
}


.breadcrumb { width:100%; color:#5b3b20; font-size:0.75em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.breadcrumb i { color:#5c3b20; padding-right:5px;}
.breadcrumb a { color:#27522b; text-decoration:underline; }
.breadcrumb a:hover, .breadcrumb a:focus { color:#5b3b20; }

@media screen and (max-width:1279px) {
	.breadcrumb { display:none; }
}


.p_search { text-align:center; margin-bottom:1.2vw; }
.p_search select { padding:0.68vw 1vw; vertical-align:middle; }
.p_search input { padding:0.5vw 1vw; vertical-align:middle; }
.keyword { display:inline-block; }
.keyword button { background:var(--brown); color:#FFF; padding:0.8vw; border-radius:3px; vertical-align:middle; margin-left:5px; }
.keyword button:is(:hover, :focus) { background:var(--red); }
.keyword a { background:var(--brown); color:#FFF; padding:0.8vw; border-radius:3px; vertical-align:middle; margin-left:5px; }
.keyword a:is(:hover, :focus) { background:var(--red); }


@media screen and (max-width:1279px) {
	.p_search { margin-bottom:20px; }
	.p_search select { padding:13.5px 10px; }
	.p_search input { padding:10px; }
	.keyword button { padding:16px; }
	.keyword a { padding:16px; }
}

@media screen and (max-width:767px) {
	.p_search select { width:100%; margin-bottom:10px; }
	.keyword { display:block;  }
	.keyword input { width:calc(100% - 57px); }
}


.pp_content h3 {
	font-family:"Noto Sans TC", sans-serif;
	font-weight:600;
	font-size:140%;
	color:var(--brown);
	text-align:center;
	border-bottom:#d2caaf 2px solid;
	padding:1vw 0;
	margin-bottom:2vw;
}
.pp_content h3 span { display:block; color:#31737b; font-size:80%; }

.pp_content p { padding-bottom:1vw; }
.pp_content a { text-decoration:underline; }
.pp_content a:is(:hover, :focus) { color:var(--red); }

@media screen and (max-width:1279px) {
	.pp_content h3 { padding:0 0 15px; margin-bottom:20px; }
	.pp_content p { padding-bottom:20px; }
}
@media screen and (max-width:767px) {
	.pp_content h3 { font-size:120%; }
}


.download { margin:2vw 0; }
.download h4 {
	font-family:"Noto Sans TC", sans-serif;
	font-weight:600;
	font-size:120%;
	color:var(--green);
}
.download h4 img { width:2vw; margin-right:5px; }

.download ul { margin-top:0.5vw; }
.download li { padding:0.6vw 0; border-top:#aaa 1px dashed; }
.download li i { color:var(--brown); }
.download li a:is(:hover, :focus) { color:var(--red); text-decoration:underline; }

@media screen and (max-width:1279px) {
	.download { margin:20px 0; }
	.download h4 img { width:25px; }
	.download ul { margin-top:6px; }
	.download li { padding:15px 0; }
}




/* regulation
------------------------------------------------------------------------------ */
.regulation_list td:last-child { text-align:left; }

.regulation_info_box {
	background:#FFF;
	padding:1vw 2vw;
	margin-bottom:1.5vw;
	border-radius:1vw;
}
.regulation_info_box span { color:var(--green); font-weight:600; }



@media screen and (min-width:1280px) {
	.regulation_list td:last-child { width:70%; }
}
@media screen and (max-width:1279px) {
	.regulation_list td:last-child { width:60%; }
	.regulation_info_box { padding:15px; border-radius:10px; margin-bottom:20px; }
}
@media screen and (max-width:767px) {
	.regulation_list td:last-child { width:auto; }
	.regulation_info_box { padding:5px 15px; }
	.regulation_info_box li { border-bottom:#ccc 1px dashed; padding:10px 0; }
	.regulation_info_box li:last-child { border-bottom:none; }
}


/* plan
------------------------------------------------------------------------------ */
.plan_list td:last-child { text-align:left; width:88%; }

@media screen and (max-width:1279px) {
	.plan_list td:last-child { width:82%; }
}
@media screen and (max-width:767px) {
	.plan_list td:last-child { width:auto; }
}



/* share
------------------------------------------------------------------------------ */
.talent_list {
	display:grid;
	grid-template-columns: repeat(5, 1fr);
	gap:2vw;
}

.talent_list > div { background:#FFF; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; padding:0.6vw; }

.talent_list h3 {
	font-family:"Noto Sans TC", sans-serif;
	font-weight:600;
	font-size:120%;
	color:#5b3b20;
	text-align:center;
	padding:0.5vw 0;
}

.talent_list .photo { aspect-ratio: 3.3 / 4; }
.talent_list .photo img {
	width:100%;
	height:100%;
	object-fit:cover;
}
.talent_list .info { padding:0 5px; }
.talent_list .info span { color:#2c7b9c; font-weight:600; }

.talent_list .link { padding:0.3vw 0 0; text-align:center; font-size:180%; }

.talent_list .link .mail { color:#238636; }
.talent_list .link .fb { color:#0863f7; }
.talent_list .link .youtube { color:#c71f1e; }

.talent_list .link a:is(:hover, :focus) { color:#333; }

@media screen and (max-width:1279px) {
	.talent_list { grid-template-columns: repeat(3, 1fr); gap:25px; }
	.talent_list > div { padding:12px; }
	.talent_list h3 { padding:10px 0; }
}
@media screen and (max-width:768px) {
	.talent_list { grid-template-columns: repeat(2, 1fr); gap:40px; }
	.talent_list h3 { font-size:150%; }
}
@media screen and (max-width:640px) {
	.talent_list { grid-template-columns: repeat(1, 1fr); gap:30px; }
}




/* event
------------------------------------------------------------------------------ */
.event_list {
	display:grid;
	grid-template-columns: repeat(4, 1fr);
	gap:2vw;
}
.event_list a {
	position:relative;
	background:#FFF;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	border-radius:1vw;
	overflow:hidden;
}

.event_list .photo { aspect-ratio: 4 / 2.5; overflow: hidden; }
.event_list .photo img {
	width:100%;
	height:100%;
	object-fit:cover;
	transition: transform 0.3s ease;
}


.event_list .info { padding:1vw 1vw 3vw; } 

.event_list .info h3 {
	font-family:"Noto Sans TC", sans-serif;
	font-weight:600;
}
.event_list .info p {
	position:absolute;
	right:1vw;
	bottom:1vw;
	font-size:80%;
	color:var(--gb);
	padding-top:5px;
}

.event_list a:is(:hover, :focus) { background:var(--gb); color:#FFF; }
.event_list a:is(:hover, :focus) p { color:#97eae1; }
.event_list a:is(:hover, :focus) .photo img { transform: scale(1.2); }

.event_list .news_bottom { padding-bottom:1.5vw; }

@media screen and (max-width:1279px) {
	.event_list { grid-template-columns: repeat(3, 1fr); gap:30px; }
	.event_list a { border-radius:10px; }
	.event_list .info { padding:10px 15px 40px; }
	.event_list .info p { right:15px; bottom:10px; }
	.event_list .news_bottom { padding-bottom:15px; }
}
@media screen and (max-width:1000px) {
	.event_list { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width:767px) {
	.event_list { grid-template-columns: repeat(1, 1fr); }
}



.e_box {
	position:absolute;
	bottom:1vw;
	width:100%;
	font-size:80%;
	color:var(--gb);
	padding:0 1vw;
}
.e_box .people { text-align:right; }

.e_box_line {
	width:100%;
	height:20px;
	border-radius:10px;
	overflow:hidden;
	background:#eee;
	-webkit-box-shadow: inset 1px 1px 4px rgba(0,0,0,0.23);
    -moz-box-shadow: inset 1px 1px 4px rgba(0,0,0,0.23);
    box-shadow: inset 1px 1px 4px rgba(0,0,0,0.23);	
}
.e_box_line_p {
	height:20px;
	color:#FFF;
	font-size:13px;
	line-height:20px;
	text-align:left;
	padding-left:10px;
	background:#ff7800;
	-webkit-box-shadow: inset 1px 1px 4px rgba(0,0,0,0.23);
    -moz-box-shadow: inset 1px 1px 4px rgba(0,0,0,0.23);
    box-shadow: inset 1px 1px 4px rgba(0,0,0,0.23);	
}

.e_box_bottom { margin-bottom:2.2vw; }

.e_box span { display:block; text-align:center; padding-top:8px; letter-spacing:0; }


.event_list a:is(:hover, :focus) .e_box span { color:#97eae1; }
.event_list a:is(:hover, :focus) .people { color:#97eae1; }



@media screen and (max-width:1650px) {
	.e_box_bottom { margin-bottom:3vw; }
}
@media screen and (max-width:1450px) {
	.e_box_bottom { margin-bottom:4vw; }
}

@media screen and (max-width:1279px) {
	.e_box { padding:0 16px; bottom:15px; }
	.e_box_bottom { margin-bottom:55px; }
}


.event_regist { margin:2vw auto; }
.event_regist2 { width:70%; }


.event_regist h4 {
	font-family:"Noto Sans TC", sans-serif;
	font-weight:600;
	font-size:120%;
	color:var(--green);
	margin-bottom:0.5vw;
}
.event_regist h4 img { width:2vw; margin-right:5px; }

.event_regist label i { margin-right:5px; }
.event_regist input { width:100%; padding:0.5vw 0.5vw; }
.event_regist select { width:100%; padding:0.7vw 0.5vw; }

.w4 {
	display:grid;
	grid-template-columns: repeat(4, 1fr);
	gap:1vw 2vw;
	margin-bottom:1vw;
}

.w3 {
	display:grid;
	grid-template-columns: repeat(3, 1fr);
	gap:1vw 2vw;
	margin-bottom:1vw;
}

.w2 {
	display:grid;
	grid-template-columns: repeat(2, 1fr);
	gap:1vw 2vw;
	margin-bottom:1vw;
}

.w1 {
	display:grid;
	grid-template-columns: repeat(1, 1fr);
	gap:1vw;
	margin-bottom:1vw;
}


@media screen and (max-width:1279px) {
	.event_regist { margin:20px auto; }
	.event_regist2 { width:100%; }
	.event_regist h4 { margin-bottom:15px; }
	.event_regist h4 img { width:25px; }
	.event_regist input { padding:10px; }
	.event_regist select { padding:13px 10px; }
}

@media screen and (max-width:1000px) {
	.w4 { grid-template-columns: repeat(2, 1fr); gap:15px 25px; margin-bottom:15px; }
	.w3, .w2 { gap:15px 25px; margin-bottom:15px; }
	.w1 { gap:15px; margin-bottom:15px; }
}

@media (max-width:767px) {
	.w4, .w3, .w2, .w1 { display:block; margin-bottom:0; }
	.event_regist input, .event_regist select { margin-bottom:15px; }
}


.item_select { text-align:center; padding-bottom:1.5vw; }
.item_select ul { display:inline-block; }
.item_select li { display:inline-block; }
.item_select li a {
	display:block;
	margin:5px;
	padding:0.5vw 1vw;
	border-radius:5px;
	background:var(--blue);
	color:#FFF;
	text-decoration:none;
}
.item_select li a:is(:hover, :focus) { background:#333; color:#FFF; }

@media screen and (max-width:1000px) {
	.item_select { padding-bottom:10px; }
	.item_select li a { padding:10px 15px; margin:5px 2.5px; }
}


/* gallery
------------------------------------------------------------------------------ */
.gallery {
	display:grid;
	grid-template-columns:repeat(5, 1fr);
	gap:1vw;
	margin-top:1.5vw;
}

.gallery a {
	display:block;
	aspect-ratio: 4 / 3;
	border-radius:0.5vw;
	border-radius:0.5vw;
	overflow:hidden;
}
.gallery a:is(:hover, :focus) { opacity:0.6; }
.gallery img {
	width:100%;
	height:100%;
	object-fit:cover;	
}


@media (max-width:1279px) {
	.gallery { grid-template-columns:repeat(4, 1fr); gap:10px; }
	.gallery a { border-radius:5px; }
}

@media (max-width:767px) {
	.gallery { margin:10px 0 30px; }
	.gallery { grid-template-columns:repeat(2, 1fr); gap:10px; }
}



/* login
------------------------------------------------------------------------------ */
.login { margin:2vw auto; width:40%; }

.login input { padding:0.6vw; width:100%; margin-bottom:1vw; }
.login img { margin-left:5px; max-width:40%; }
.login i { color:var(--brown); margin-right:3px; }

@media (max-width:1279px) {
	.login { margin:30px auto; width:60%; }
	.login input { padding:10px; margin-bottom:15px; }
	.login i { margin-right:5px; }
}
@media (max-width:767px) {
	.login { width:100%; }
}




/* sitemap
------------------------------------------------------------------------------ */
.sitemap {
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:3vw;
}

.sitemap a {
	display:block;
	background:#FFF;
	padding:1vw;
	text-align:center;
	border-bottom:#ccc 1px dashed;
	border-left:#ccc 1px solid;
	border-right:#ccc 1px solid;
}
.sitemap a:last-child { border-bottom:#ccc 1px solid; }

.sitemap .action {
	background:var(--blue);
	color:#FFF;
	margin-bottom:1vw;
	font-weight:600;
	border-bottom:none;
}

.sitemap a:is(:hover, :focus) { background:var(--brown)!important; color:#FFF; }


@media (max-width:1279px) {
	.sitemap a { padding:15px; }
	.sitemap .action { margin-top:10px; }
}

@media screen and (max-width:828px) {
	.sitemap { grid-template-columns:repeat(1, 1fr); }	
}







/* form
------------------------------------------------------------------------------ */
fieldset { border:none; padding:0; margin:0; }
fieldset i { color:#BB5100; padding-left:5px; }





/* footer
------------------------------------------------------------------------------ */
footer {
	position:relative;
	background:#807556;
	padding:2.2vw 5vw;	
	display:grid;
	grid-template-columns: 20% 60% 20%;
}
footer a:focus {
	box-shadow:0 0 0 2px #FFF;
    outline:2px solid #FFF;
}

.qrcode a:is(:hover, :focus) { opacity:0.6; }
.qrcode img { width:5.5vw; margin:0 0.3vw; }

address { font-size:90%; color:#FFF; line-height:180%; }
address a { color:#FFF; }
address a:is(:hover, :focus) { text-decoration:underline; }
address ul { margin-bottom:0.6vw; }
address li { display:inline-block; border-left:#aaa 1px solid; padding:0 1vw; }
address li:last-child { border-right:#aaa 1px solid; }

.mark { text-align:right; }
.mark .gov { width:3vw; }
.mark .aplus { width:10vw; }

@media (max-width:1279px) {
	footer { padding:50px 30px; display:block; }
	.qrcode, address, .mark { width:100%; text-align:center; }
	.qrcode img { width:100px; margin:10px; }
	address { padding:10px 0; font-size:80%; }
	address ul { margin-bottom:15px; }
	address li { padding:0 15px; }
	.mark { margin-top:15px; }
	.mark .gov { width:50px; }
	.mark .aplus { width:150px; }
}

@media (max-width:680px) {
	.qrcode img { width:100px; }
}
@media (max-width:400px) {
	address { font-size:70%; }
}



/* btn
------------------------------------------------------------------------------ */
.btn {
	margin-top:2vw;
	padding-top:2vw;
	border-top:#bbb 1px solid;
	text-align:center;
}

.btn a {
	display:inline-block;
	font-family:"Noto Sans TC", sans-serif;
	font-weight:600;
	font-size:140%;
	color:#FFF;
	padding:1vw 0;
	border-radius:0.5vw;
	text-align:center;
}
.btn a i { margin-right:0.3vw; opacity:.6; font-size:120%; vertical-align:middle; }
.btn a:is(:hover, :focus) { background:#333; }


.btn_r { background:var(--red); }
.btn_o { background:var(--o); }
.btn_blue { background:var(--blue); }
.btn_green { background:var(--green); }
.btn_br { background:var(--brown); }

.btn_1 a { width:25%; }
.btn_2 a, .btn_3 a, .btn_4 a { width:20%; margin:0 1%; }

@media (max-width:1279px) {
	.btn { padding-top:20px; margin-top:20px; margin-bottom:30px; }
	.btn a { width:50%; border-radius:8px; padding:15px 0; }
	.btn a i { margin-right:3px; }
	.btn_2 a { width:25%; }
	.btn_3 a { width:20%; }
	.btn_4 a { width:20%; font-size:95%; }
}
@media (max-width:768px) {
	.btn_1 a { width:100%; }
	.btn_2 a, .btn_4 a  { width:45%; margin:2%; font-size:120%; }
	.btn_3 a { width:31%; margin:0 0.5%; font-size:90%; }	
}




/* color
------------------------------------------------------------------------------ */
:root {
	--brown:#765f34;
	--gb:#4b747e;
	--red:#992323;
	--green:#50796b;
	--blue:#007090;
}



/* youtube 比例自動縮放
-------------------------------------------------------------------------- */
.video-16x9 {
  aspect-ratio: 16 / 9;
}

.video-16x9 iframe {
  width: 100%;
  height: 100%;
  display: block;
}

/* 直式（手機短影音） */
.video-9x16 {
  aspect-ratio: 9 / 16;
  max-width: 500px;
  margin: 0 auto;
}

.video-9x16 iframe {
  width: 100%;
  height: 100%;
  display: block;
}