/* ==========================================================================
   Public 2023/10/20
============================================================================= */
@import url('../font/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%; } */

body { 
	font:1em/1.6 Arial, Meiryo, "Meiryo UI", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif;
	letter-spacing:0.06em;
	color:#222;
	background-color:#FFF;
	width:100%;
}
@media screen and (max-width:1300px) {
	body { font-size:0.938em; }
}
@media screen and (max-width:1000px) {
	body { font-size:1.125em; }
}




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:#c33f2a;
	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:#0e6400; }
a:focus { background:rgba(228,8,107,0.3); }



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


#gotop {
    display:none;
    position:fixed;
    right:10px;
    bottom:20px;
    cursor:pointer;
	z-index:2;
}


input, select {
	border:none;
	border-radius:6px;
	color:#00749e;
	background:#FFF;
}

input::-webkit-input-placeholder { /* Chrome */
  color:#000000; font-size:80%;
}
input:-ms-input-placeholder { /* IE 10+ */
  color:#000000;
}
input::-moz-placeholder { /* Firefox 19+ */
  color:#000000;
  opacity: 1;
}
input:-moz-placeholder { /* Firefox 4 - 18 */
  color:#000000;
  opacity: 1;
}

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

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


::placeholder { color:#555; }
:-ms-input-placeholder { color:#555; }
::-ms-input-placeholder { color:#555; }



.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; }

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


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


/* header
-----------------------------------------------------------------------------*/
header {
	position:relative;
	margin:0 auto;
	width:85%;
	padding:1.3vw 0 0.5vw;
	text-align:right;
}
h1 {
	position:absolute;
	left:0;
	top:1.2vw;
	width:22vw;
}
h1 img { width:100%; max-width:394px; }


header #link { width:100%; font-size:0.75em; color:#919191; }
header #link a { color:#222; }
header #link a:hover { color:#d02404; }


header input {
	width:150px;
	color:#222;
	font-size:0.813em!important;
	border:none;
	background:#dbdbdb;
	padding:8px 10px;
	border-radius:5px;
	margin-left:10px;
}
header input:focus { background:#222; color:#FFF; }

header #link .btn {
	padding:7px 8px;
	border-radius:5px; 
	background:#d02404;	
}
header #link .btn img { width:15px;}
header #link .btn:hover, header #link .btn:focus { background:#333; }

header #menu { margin-top:8px; }
header #menu a {
	color:#277d82;
	font-family:"Noto Sans TC", sans-serif;
	font-weight:500;
	padding-left:20px;
}
header #menu a:hover { color:#d02404; }


.slideshow {
	margin:auto;
    position:relative;
    overflow:hidden;
    width:100%;
	height:45.75vw;
}
.slideshow img {
	position:absolute;
    top:0;
    left:50%;
	width:100%;
    transform:translateX(-50%);
    display:none;
}

@media screen and (max-width:1500px) {
	h1 { width:25vw; }
	header #menu { margin-top:5px; }
	header #menu a { font-size:0.938em; padding-left:10px; }
	.slideshow { height:45.6vw; }
}
@media screen and (max-width:1200px) {
	h1 { position:absolute;	top:4px; width:22vw; }
	header #menu { width:100%; text-align:center; margin:12px 0; }
	header #menu a { padding:0 10px; }
	.slideshow { height:45.5vw; }
}
@media screen and (max-width:1000px) {
	header { display:none; }
	.slideshow { margin-top:55px; height:45.3vw; }
}
@media screen and (max-width:840px) {
	.slideshow { margin-top:55px; height:91.6vw; }
}




/* 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_nav_btn { width:100%!important; text-align:center; font-size:120%!important; padding:10px 0!important; }





/* content
-----------------------------------------------------------------------------*/
#content {
	position:relative;
	width:100%;
	min-height:35vw;
	background:url(../img/bg.jpg) bottom right no-repeat;
	background-size:100%;
	padding-bottom:10%;
}

#page_banner { width:100%; }
#page_banner img { width:100%; }

@media screen and (max-width:1000px) {
	#page_content { width:90%; }
	#page_banner { padding-top:80px; }
}
@media screen and (max-width:840px) {
	#page_banner { padding-top:55px; }
}


#page_content {
	position:relative;
	margin:0 auto;
	width:85%;
	min-height:40vh;
	padding-bottom:6%;
}

#page_left, #page_left2, #page_right { float:left; margin-top:40px; }


#page_left, #page_left2 {
	width:20%;
	padding-right:3%;
}

#page_left2 select, #page3_1 select {
	width:100%;
	padding:0.6vw;
	color:#222;
	text-align:center;
	font-family:"Noto Sans TC", sans-serif;
	font-weight:500;
	background:#dbdbdb;
	border-radius:99em;
	margin-bottom:10px;
}
#page_left2 select:focus, #page3_1 select:focus { background:#222;}


.page_left_btn {
	position:absolute;
	left:0;
	top:9vw;
	width:17%;
	font-size:1.3vw;
	font-family:"Noto Sans TC", sans-serif;
	font-weight:500;
}
.page_left_btn a { width:100%; padding:0.4vw; }





#page_right {
	width:80%;
	min-height:30vh;
	padding-left:3%;
	border-left:#9b9b9b 1px solid;
	text-align:left;
	word-break:break-all;
}

#page_right h2 {
	width:100%;
	font-size:150%;
	color:#277d82;
	font-family:"Noto Sans TC", sans-serif;
	font-weight:500;
	line-height:150%;
}
#page_right h2 img { width:3vw; vertical-align:middle; }

#page_right .day { font-size:80%; letter-spacing:0; padding:15px 0; }

#page_right p { padding-bottom:20px; }
#page_right img { max-width:100%; }

#page_right .download {
	padding:50px 0 30px;
}
#page_right .download ul { width:100%; }
#page_right .download li {
	display:inline-block;
	margin-right:5px;
	margin-top:15px;
}
#page_right .download li a {
	display:block;
	border:#949494 1px solid;
	padding:6px 15px;
	color:#222;
	border-radius:3px;
}
#page_right .download li i { color:#ff7309;}
#page_right .download li a:hover { color:#FFF; background:#de3400; }



@media screen and (max-width:1200px) {
	.page_left_btn { top:11vw; }
}
@media screen and (max-width:1000px) {
	#page_content { min-height:50vh; }
	.page_left_btn { top:14vw; }
	#page_right h2 { font-size:130%; }
	#page_right h2 img { width:40px; }
}
@media screen and (max-width:840px) {
	#page_left, #page_left2, #page_right { float:none; margin-top:0; padding:0; }
	#page_left {
		position:absolute;
		top:-1.55%;
		right:-3%;
		width:auto;
	}
	
	#page_left2 { width:100%; }
	#page_left2 select { width:85vw; font-size:150%; margin:20px 0 5px;  }
	
	
	#page_right {
		width:100%;
		border:none;
		padding-top:25px;
	}
	.page_left_btn {
		position:static;
		margin:0 auto;
		width:100%;
		font-size:1.25em;
		border-top:#9b9b9b 1px dashed;
		margin-top:30px;
		padding-top:30px;
	}
	.page_left_btn a { width:250px; padding:10px 0; }
}


.show_840 { display:none; }
@media screen and (max-width:840px) {
	.show_840 { display:block; }
}


#page3 {
	display:inline-flex;
	flex-wrap:wrap;
	width:100%;
	margin-bottom:6.5%;
}

#page3_1, #page3_2, #page3_3 {
	position:relative;
	align-items:stretch;
	align-content:stretch;
	margin-top:40px;
	text-align:left;
}
#page3_1 { width:28%; padding-right:3%; }

#page3_1 ul { margin-top:15px; }
#page3_1 li { list-style-type:none; padding:5px 0; margin-left:1.7em; text-indent:-1.7em; }
#page3_1 li:before { content:"\f138"; font-family:"Font Awesome 5 Free"; font-weight:bold; color:#ff7309; margin:0 5px; }
#page3_1 a { color:#222; }
#page3_1 a:hover { color:#de3400; }

#page3_1 h2, #page3_2 h2, #page3_3 h2 {
	width:100%;
	font-size:130%;
	color:#277d82;
	font-family:"Noto Sans TC", sans-serif;
	font-weight:500;
	line-height:150%;
	padding-top:1vw;
}
#page3_1 h2 img { width:2vw; vertical-align:middle; }



#page3_2 {
	width:36%;
	padding:0 3%;
	border-right:#9b9b9b 1px solid;
	border-left:#9b9b9b 1px solid;
}

#page3_3 {
	width:36%;
	padding-left:3%;
}
#page3_3 h3 { color:#277d82; font-family:"Noto Sans TC", sans-serif; }
#page3_3 h3 i { color:#ff7309; padding-right:5px; }

#page3_3 a { display:inline-block; width:31%; height:6vw; margin:1.15%; border-radius:5px; }
#page3_3 a img { width:100%; }
#page3_3 a:hover, #page3_3 a:focus { opacity:0.7; }


#page3_4 { width:72%; padding-left:3%; text-align:left; }
#page3_4 h2	{
	width:100%;
	font-size:130%;
	color:#277d82;
	font-family:"Noto Sans TC", sans-serif;
	font-weight:500;
	line-height:150%;
	padding-top:1vw;
}
#page3_4 h2 img { width:2vw; vertical-align:middle; }

#page3_4 table { margin:1vw 0 2vw; }
#page3_4 caption { width:100%; font-size:110%; font-weight:600; background:#277d82; color:#FFF; padding:0.6vw;  }
#page3_4 td a { color:#222; }
#page3_4 td a i { color:#ff8e09; padding-left:3px; }
#page3_4 td a:is(:hover, :focus) { color:#de3400; }

#page3_4 td:nth-child(1) { width:20%; }
#page3_4 td:nth-child(2), #page3_4 td:nth-child(3) { width:40%; }
.p_line {
	width:100%;
	height:1px;
	border-bottom:#9b9b9b 1px dashed;
	margin:20px 0 25px;
}


@media screen and (max-width:1000px) {
	#page3_1, #page3_2, #page3_3 { float:none; width:100%; padding:0; }
	#page3_1 { margin-top:0; }
	#page3_1 select { width:85vw; font-size:150%; margin:20px 0 5px;  }
	#page3_1 li { margin-left:1.6em; text-indent:-1.6em; }
	#page3_1 h2, #page3_4 h2 { padding-top:30px; }
	#page3_1 h2 img, #page3_4 h2 img { width:40px; }
	#page3_2 { border:none; }
	#page3_3 { margin-top:0;  }
	#page3_3 a { height:16.5vw; }
	
	#page3_4 { width:100%; padding:0; }
	#page3_4 table { margin:15px 0 30px; font-size:90%; }
	#page3_4 caption { font-size:100%; padding:10px;  }
	#page3_4 td:nth-child(1), #page3_4 td:nth-child(2), #page3_4 td:nth-child(3) { width:100%; }

}


.sub_menu li {
	width:100%;
	border-bottom:#aaa 1px dashed;
}
.sub_menu li a {
	display:block;
	color:#277d82;
	padding:15px 0;
}
.sub_menu li a:hover, .sub_menu li a:focus { background:#277d82; color:#FFF; }


/* breadcrumb
-----------------------------------------------------------------------------*/
#breadcrumbs {
	width:100%;
	color:#3f3f3f;
	font-size:0.75em;
	text-align:left;
	letter-spacing:0;
	overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
#breadcrumbs i { color:#f783ac; }
#breadcrumbs a { color:#4f6f2d; }
#breadcrumbs a:hover { text-decoration:underline; }

.page_share {
	font-size:3vw;
	letter-spacing:-2px;
	text-align:center;
}
.share_c1 { color:#3a5997; }
.share_c2 { color:#2c799b; }
.share_c3 { color:#008800; }
.share_c1:hover, .share_c2:hover, .share_c3:hover { color:#d02404; }
.share_c1:focus, .share_c2:focus, .share_c3:focus { color:#d02404; }

@media screen and (max-width:1000px) {
	.page_share { font-size:3.5vw; }
}
@media screen and (max-width:840px) {
	#breadcrumbs { width:65%; }
	.page_share { font-size:2.3em; letter-spacing:-5px; }
}





/* home
-----------------------------------------------------------------------------*/
#home_banner {
	position:relative;
	margin: 0 auto;
	width:100%;
	background:url(../img/home-banner-bg.jpg) no-repeat;
	background-size:100%;
}
#home_banner .fish {
	position:absolute;
	left:0;
	bottom:0;
	width:25vw;
}
#home_banner .fish img { width:100%; }

@media screen and (max-width:840px) {
	#home_banner { background:url(../img/home-banner-bg-sp.jpg) no-repeat; background-size:100%; }
	#home_banner .fish { left:auto; right:0; bottom:0; width:44vw; }
}


#home_content {
	width:100%;
	min-height:16vw;
	background:url(../img/home-fish-bg.png) top left no-repeat;
	background-size:100%;
	text-align:center;
}
@media screen and (max-width:840px) {
	#home_content { background:none; }
}


#home_news {
	display:inline-flex;
	flex-wrap:wrap;
	width:82%;
	margin-top:30px;
	margin-bottom:6.5%;
}

#home_news a {
	position:relative;
	align-items:stretch;
	align-content:stretch;
	width:29.3%;
	margin:2%;
	color:#277d82;
	background:#FFF;
	padding:0.6vw;
	border-radius:15px;
	cursor:pointer;	
	-webkit-box-shadow: 1px 2px 4px 1px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 2px 4px 1px rgba(0,0,0,0.2);
    box-shadow: 1px 2px 4px 1px rgba(0,0,0,0.2);
}
#home_news a:hover, #home_news a:focus { background:#eee; color:#d02404; }

#home_news .photo { width:100%; height:15vw; border-radius:12px; }
#home_news .info { font-size:120%; text-align:left; padding:1vw 0.5vw; }
#home_news .day { font-size:80%; text-align:left; color:#555; padding:0 0.5vw 0.5vw; letter-spacing:0;  }

@media screen and (max-width:1400px) {
	#home_news a { border-radius:10px; }
	#home_news .photo { border-radius:8px; }
	#home_news .info { font-size:110%; }
}
@media screen and (max-width:1200px) {
	#home_news { width:90%; border-radius:1.5vw; }
}
@media screen and (max-width:1000px) {
	#home_news a { padding:1vw; }
	#home_news .info { font-size:100%; }
}
@media screen and (max-width:860px) {
	#home_news a { width:45%; margin:2.5%; }
	#home_news .photo { height:23vw; }
}
@media screen and (max-width:580px) {
	#home_news a { width:100%; margin:3% 0; padding:2vw; }
	#home_news .photo { height:48vw; }
	#home_news .info { padding:2vw 0.8vw; }
	#home_news .day { padding:0 0.8vw 0.8vw;  }
}





/* home banner-s
------------------------------------------------------------------------------------------*/
#s_banner {
	margin:0 auto;
	width:100%;
	margin-bottom:5%;
}

@media screen and (max-width:1200px) {
	#s_banner { margin:2% auto; }
}
@media screen and (max-width:1000px) {
	#s_banner { margin:3% auto; }
}
@media screen and (max-width:680px) {
	#s_banner { margin:5% auto; }
}


.adSlider {
	position:relative;
	min-height:1px;
}
.adSlider img a:focus:before{ display:block; }
.adSlider .img-container { width:100%; margin:2px 15px; height:4.5vw; overflow:hidden; }
.adSlider .img-container a { display:block; text-align:center; }
.adSlider .img-container a img { margin:0 auto;	width:100%; height:100%; object-fit:cover; border:#aec65a 1px solid; border-radius:0; }

@media screen and (max-width:1300px) {
	#s_banner { padding-bottom:3%; }
	.adSlider .img-container { height:5.5vw; }
}
@media screen and (max-width:1000px) {
	.adSlider .img-container { height:7vw; }
}
@media screen and (max-width:768px) {
	.adSlider .img-container { height:9.4vw; }
}
@media screen and (max-width:600px) {
	.adSlider .img-container { height:12.8vw; }
}


.adSlider a {
	position:relative;
	display:block;
	height:100%;
	width:100%;
}

.adSlider a .caption{
	position:absolute;
	width:100%;
	height:3em;
	margin:0;
	bottom:0;
	background:rgba(0,0,0,0.45);
	padding:1em .5em .5em;
	font-size:1.125em;
	color:#FFF;	
	text-align:center;	
	overflow:hidden;
}


.adSlider a:before{
	content:'';
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	border:3px solid #ffc000;
	display:none;
}
.adSlider a:focus:before{ display:block; }

.adSlider .slick-prev,.adSlider .slick-next { background-color:transparent; /*opacity:0.5; filter:alpha(opacity=50);*/ }
.adSlider .slick-prev { left:-30px; background-image:url(../img/icon_arrow_left2.png)!important; opacity:0.3; filter:alpha(opacity=30);    }
.adSlider .slick-next { right:-30px; background-image:url(../img/icon_arrow_right2.png)!important; opacity:0.3; filter:alpha(opacity=30); }
.adSlider .slick-next:hover,.adSlider .slick-next:focus,.adSlider .slick-prev:hover { opacity:1; filter:alpha(opacity=100); background-color:transparent;  }
.adSlider .slick-prev:hover,.adSlider .slick-prev:hover,.adSlider .slick-prev:focus { opacity:1; filter:alpha(opacity=100); background-color:transparent; }


@media screen and (max-width:1000px) {
	.adSlider .slick-prev { display:none!important; }
	.adSlider .slick-next { display:none!important; }
}





/* plan
-----------------------------------------------------------------------------*/
#outdoor_plan {
	display:inline-flex;
	flex-wrap:wrap;
	width:100%;
	min-height:30vh;
}
#outdoor_plan .box {
	position:relative;
	align-items:stretch;
	align-content:stretch;
	width:50%;
}
#outdoor_plan .box:nth-child(1) { padding-right:3%; }
#outdoor_plan .box:nth-child(1) ul { margin-top:15px; }
#outdoor_plan .box:nth-child(1) li { list-style-type:none; padding:5px 0; margin-left:1.7em; text-indent:-1.7em; }
#outdoor_plan .box:nth-child(1) li:before { content:"\f138"; font-family:"Font Awesome 5 Free"; font-weight:bold; color:#ff7309; margin:0 5px; }
#outdoor_plan .box:nth-child(1) a { color:#222; }
#outdoor_plan .box:nth-child(1) a:hover { color:#de3400; }

#outdoor_plan .box:nth-child(2) { padding-left:3%; border-left:#9b9b9b 1px solid; }


@media screen and (max-width:1400px) {
	#outdoor_plan .box { width:100%; padding:0!important; border:0!important; }
}


@media screen and (max-width:1000px) {
	#outdoor_plan .box:nth-child(1) li { margin-left:1.6em; text-indent:-1.6em; }
}



.school {  margin:20px 0; }

.school h3 {
	width:100%;
	font-family:"Noto Sans TC", sans-serif;
	font-size:115%!important;
	letter-spacing:0.1vw;
	color:#277d82;
	border:#277d82 3px solid;
	padding:4px 20px;
	background:#FFF;
	text-align:left;
}

/*
.school button {
	position:relative;
	width:100%;
	font-family:"Noto Sans TC", sans-serif;
	font-size:120%;
	letter-spacing:0.1vw;
	color:#277d82;
	border:#277d82 3px solid;
	padding:8px 20px;
	background:#FFF;
	text-align:left;
}

.school_icon {
	position:absolute;
	top:7px;
	right:20px;
}*/
		
.school_content {
	width:100%;
	/*display:none;*/
	padding:20px 0;
}
.school_content ul { width:100%;  }
.school_content li {
	display:inline-block;
	/*margin-left:8px;*/
	margin-bottom:10px;
}
.school_content li i { color:#ff8e09; padding-left:5px; }
.school_content li a {
	display:block;
	padding:6px 10px;
	color:#222;
	background:#FFF;
	border:#949494 1px solid;
}
.school_content li a:hover, .school_content li a:focus {
	color:#FFF;
	background:#de3400;
}
.hitter{
	/*width:600px;
	height:500px;
	border:1px solid #ee0000;*/
	display:none;
}



#outdoor_photo {
	display:inline-flex;
	flex-wrap:wrap;
	width:100%;
	margin-bottom:6.5%;
}

#outdoor_photo a {
	position:relative;
	align-items:stretch;
	align-content:stretch;
	width:29.3%;
	margin:2%;
	color:#277d82;
	background:#FFF;
	padding:0.6vw;
	border-radius:15px;
	cursor:pointer;	
	-webkit-box-shadow: 1px 2px 4px 1px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 2px 4px 1px rgba(0,0,0,0.2);
    box-shadow: 1px 2px 4px 1px rgba(0,0,0,0.2);
}
#outdoor_photo a:hover, #outdoor_photo a:focus { background:#eee; color:#d02404; }

#outdoor_photo .photo { width:100%; height:12vw; border-radius:12px; }
#outdoor_photo .info { font-size:120%; text-align:left; padding:1vw 0.5vw; }
@media screen and (max-width:1400px) {
	#outdoor_photo a { border-radius:10px; }
	#outdoor_photo .photo { border-radius:8px; }
	#outdoor_photo .info { font-size:110%; }
}
@media screen and (max-width:1200px) {
	#outdoor_photo { border-radius:1.5vw; }
}
@media screen and (max-width:1000px) {
	#outdoor_photo a { padding:1vw; width:45%; margin:2.5%; }
	#outdoor_photo .info { font-size:100%; }
	#outdoor_photo .photo { height:17vw; }
}
@media screen and (max-width:860px) {
	#outdoor_photo .photo { height:22vw; }
}
@media screen and (max-width:580px) {
	#outdoor_photo a { width:100%; margin:3% 0; padding:2vw; }
	#outdoor_photo .photo { height:48vw; }
	#outdoor_photo .info { padding:2vw 0.8vw; }
}




/* Gallery
-------------------------------------------------------------------------- */
#content_gallery {
	width:100%;
	border-top:#cccaca 1px dashed;
	padding:30px 0;
}

@media screen and (max-width:1400px) {
	#content_gallery {	padding:30px 0; }
}

.img-responsive {
  display:block;
  width:100%;
  height:auto;
}

.grid div {
  background-color:#eee;
  display: block;
  float: left;
  margin: 1%;
  width: 23%;
}
.grid div p { font-size:85%; padding:10px; }

@media (max-width: 1024px) {
  .grid div {
    width: 31.3%;
  }
}
@media (max-width: 767px) {
  .grid div {
    width: 48%;
  }
}
@media (max-width: 479px) {
  .grid div {
    margin: 2% 0;
    width: 100%;
  }
}





/* travel area
-----------------------------------------------------------------------------*/
.area_list ul {	width:100%; }
.area_list li a { display:block; padding:10px; border-bottom:#c2c2c2 1px dashed; color:#222; text-align:center; }
.area_list li a:hover { background:#de3400; color:#FFF; }
.area_list_right { min-height:100vh!important; }

#area_list {
	display:inline-flex;
	flex-wrap:wrap;
	width:100%;
	margin-bottom:6.5%;
}

#area_list a {
	position:relative;
	align-items:stretch;
	align-content:stretch;
	width:29.3%;
	margin:2%;
	color:#277d82;
	background:#FFF;
	padding:0.6vw;
	border-radius:15px;
	cursor:pointer;	
	-webkit-box-shadow: 1px 2px 4px 1px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 2px 4px 1px rgba(0,0,0,0.2);
    box-shadow: 1px 2px 4px 1px rgba(0,0,0,0.2);
}
#area_list a:hover, #home_news a:focus { background:#eee; color:#d02404; }

#area_list .photo { width:100%; height:11vw; border-radius:12px; }
#area_list .info { text-align:center; padding:0.6vw 0.5vw; }

#area_list .info p {
	font-size:85%;
	color:#222;
	text-align:left;
	padding:0;
	margin-top:5px;	
	display: -webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    overflow:hidden;
}

.area_info { padding:30px 0; }
.area_info span { color:#277d82; }
.area_info i { color:#ff7309; padding-right:3px; }

.area_btn {
	width:100%;
	font-size:1.8vw;
	font-family:"Noto Sans TC", sans-serif;
	font-weight:500;
    text-align:center;
	margin-top:2vw;
	padding-top:30px;
}
.area_btn a { width:35%; padding:10px 0; }



@media screen and (-ms-high-contrast: active),(-ms-high-contrast: none){ /* 僅IE適用 */
    #area_list .info p {
		font-size:85%;
		color:#222;
		text-align:left;
		padding:0;
		margin-top:5px;
		line-height:1.5em;
        height:4.5em;
        overflow:hidden;
	}
    #area_list .info p:after {
		content:"";
		position:absolute;
		bottom:calc(15px + 0.6vw);
		right:calc(15px + 0.5vw);
		padding: 0 5px;
		background-color:#fff;
	}
}


@media screen and (max-width:1400px) {
	#area_list a { border-radius:10px; }
	#area_list .photo { border-radius:8px; }
	#area_list .info { font-size:110%; }
}
@media screen and (max-width:1200px) {
	#area_list { border-radius:1.5vw; }
	#area_list a { width:45%; margin:2.5%; }
	#area_list .photo { height:17vw; }
}
@media screen and (max-width:1000px) {
	#area_list a { padding:1vw; }
	#area_list .info { font-size:100%; }
	.area_btn { font-size:1.5em; }
	.area_btn a { width:300px; max-width:90%; }
}
@media screen and (max-width:840px) {
	.area_list { display:none; }
	.area_list_right { min-height:inherit!important; }
	#area_list .photo { height:22vw; }
}
@media screen and (max-width:640px) {
	#area_list a { width:100%; margin:3% 0; padding:2vw; }
	#area_list .photo { height:48vw; }
	#area_list .info { padding:2vw 0.8vw; }
}





/* path
-----------------------------------------------------------------------------*/
.path_select {
	text-align:center;
}

.path_select img { width:35%; margin:2%; }
.path_select a:is(:hover, :focus) { -webkit-filter:brightness(1.3); background:none; }

@media screen and (max-width:740px) {
	.path_select { padding-top:10px; }
	.path_select img { width:80%; margin:2% 0; }
}

.path_list { margin:20px auto; width:85%; }

.path_list li a {
	display:block;
	color:#222;
	padding:15px 10px;
	border-bottom:#c6c6c6 1px dotted;
}
.path_list li a i { color:#ff7309; padding-right:5px; }

.path_list li a:is(:hover, :focus) { color:#FFF; background:rgba(0,0,0,0.7); }




/* map
-----------------------------------------------------------------------------*/
.map {
	position:relative;
	width:100%;
	margin-top:2vw;
}
.map img { width:100%; }

.map a { position:absolute; }
.map .area {
	width:4.5vw;
	color:#FFF;
	font-size:1vw;
	background:#bc4227;
	padding:0.2vw 0;
	border:#FFF 1px solid;
	text-align:center;
	border-radius:5px;
	-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);
}
.map .flag {
	margin:-1px auto 0;
	width:0;
	height:0;
	border-style: solid;
	border-width: 0.5vw 0.4vw 0 0.4vw;
	border-color: #bc4227 transparent transparent transparent;
}

.map a:is(:hover, :focus) .area { background:#333; }
.map a:is(:hover, :focus) .flag { border-color:#333 transparent transparent transparent; }


.map_select { display:none; width:100%; margin-top:10px; }
.map_select a {
	display:inline-block;
	width:30%;
	color:#222;
	font-size:5.5vw;
	border:#aaa 1px solid;
	border-radius:5px;
	margin:1.5%;
	padding:10px 0;
	background:rgba(255,255,255,0.8);
	
}



@media screen and (max-width:1000px) {
	.no_1000 { display:none; }
	.map_select { display:block; }
}




/* 2025 plan
------------------------------------------------------------------------------ */
#plan_2025 {
	width:100%;
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows:auto;
	margin:2vw 0;
}
#plan_2025 div { text-align:left; border-right:#ccc 1px solid; padding:0 2.5vw; }
#plan_2025 div:nth-last-child(1) { border:none; }

#plan_2025 h2 {
	width:100%;
	font-size:150%;
	color:#277d82;
	font-family:"Noto Sans TC", sans-serif;
	font-weight:500;
	line-height:150%;
}
#plan_2025 h2 img { width:3vw; vertical-align:middle; }

#plan_2025 select {
	width:100%;
	padding:0.6vw;
	color:#222;
	text-align:center;
	font-family:"Noto Sans TC", sans-serif;
	font-weight:500;
	background:#dbdbdb;
	border-radius:99em;
	margin-bottom:2vw;
}
#plan_2025 select:focus { background:#222;}


#plan_2025 ul { margin-top:15px; }
#plan_2025 li { list-style-type:none; padding:5px 0; margin-left:1.7em; text-indent:-1.7em; text-align:left; }
#plan_2025 li:before { content:"\f138"; font-family:"Font Awesome 5 Free"; font-weight:bold; color:#ff7309; margin:0 5px; }
#plan_2025 a { color:#222; }
#plan_2025 a:hover { color:#de3400; }



@media screen and (max-width:1000px) {
	#plan_2025 { display:block; }
	#plan_2025 div { width:100%; border-right:none; border-bottom:#ccc 1px solid; padding:10px 0 20px; }
	#plan_2025 select { width:85vw; font-size:150%; margin:20px 0 5px;  }
	#plan_2025 li { margin-left:1.6em; text-indent:-1.6em; }
	#plan_2025 h2 { padding-top:30px; }
	#plan_2025 h2 img { width:40px; }
}




/* sitemap
------------------------------------------------------------------------------ */
#sitemap ul { width:100%; margin:20px 0 30px; }
#sitemap li { display:inline-block; margin:5px; }
#sitemap li a {
	display:block;
	width:100%;
	color:#FFF;
	text-align:center;
	background:#00749e;
	padding:10px 20px;
	border-radius:5px;
}
#sitemap li a:hover, #sitemap li a:focus { background:#de3400; }
#sitemap li i { padding-right:5px; color:#ffb109; }

@media screen and (max-width:1400px) {
}




/* footer
------------------------------------------------------------------------------ */
footer {
	position:relative;
	width:100%;
	background:#4bb571 url(../img/copyright-bg.jpg) top center no-repeat;
	background-size:100%;
	padding:4vw 0;
	margin-top:-1px;
}

address {
	display:table;
	margin:0 auto;
	font-size:0.813em;
	line-height:200%;
}
address span { color:#a0ffc2;}
address a { color:#122e1c; }
address a:hover { color:#FFF; }
address .qrcode, address .addr { display:table-cell; vertical-align: middle; }
address .qrcode { padding-right:5%; }
address .qrcode img { width:100%; max-width:217px; }

@media screen and (max-width:860px) {
	footer { padding:6vw; }
	address, address .qrcode, address .addr { display:block; text-align:center; }
	address .qrcode { padding-right:0; }
	address .addr { padding-top:30px; }
}




/* btn
------------------------------------------------------------------------------ */
.btn_r, .btn_g {
	display:inline-block;
	color:#FFF!important;
	text-align:center;
	border-radius:99em;
	font-family:"cwTeXYen", sans-serif;
}
.btn_r { background:#c33f2a; }
.btn_g { background:#008a28; }
.btn_r:hover, .btn_g:hover { background:#333; }

.btn_r i { padding-right:3px; }







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