/* ==========================================================================
   Public
============================================================================= */
@import url("https://use.fontawesome.com/releases/v6.7.2/css/all.css");
@import url('https://fonts.googleapis.com/earlyaccess/notosanstc.css'); /* 思源黑體 */
@font-face {
    font-family:"粉圓";
	src:url(../font/jf-openhuninn-2.1.woff);
}

body, html { width:100%; height:auto; min-height:100%; margin:0px; padding:0px; }

body { 
	font:1vw/1.6 Arial, Meiryo, "Meiryo UI", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif;
	letter-spacing:0.06em;
	color:#222;
	background:#eee url("../img/bg1.jpg") center bottom no-repeat;
	background-size:100%;
	word-break:break-all;
}
@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 {
	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;
}


.top_bg { position:absolute; top:0; left:0; width:28vw; z-index:-1; }
.top_bg img { width:100%; }
@media screen and (max-width:1000px) {
	.top_bg { top:55px; }
	.top_bg img { width:200%; }
}



/* PC header
------------------------------------------------------------------------------ */
header {
	position:relative;
	margin:0 auto;
	width:85%;
	text-align:center;
	z-index:10;
}

header .logo {
	width:100%;
	font-family:"粉圓", "Meiryo UI", sans-serif;
	font-size:3vw;
	margin:0.8vw 0 1.6vw;
}
header .logo a { color:#222; }
header .logo p { color:#818181; font-size:0.8vw; line-height:0; }

header .pc_menu {
	position:relative;
	width:100%;
	height:3vw;
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif;
	font-weight:600;
	background:#FFF;
	border-radius:99em;
	padding-top:0.2vw;
}

header .icon {
	position:absolute;
	right:2vw;
	top:0.6vw;
}
header .icon a {
	display:inline-block;
	width:5vw;
	height:5vw;
	color:#FFF;
	border-radius:99em;
	text-align:center;
	font-size:0.8vw;
	letter-spacing:0;
	padding-top:0.6vw;
	margin:0 0.1vw;
}
header .icon a img { width:3vw;}
header .icon a:hover { background:#a52525!important; }


.sp_logo { position:fixed; top:10px; left:15px; font-size:20px; }
.sp_logo img { width:28px; margin-right:5px; }
.sp_logo a { color:#FFF; font-family:"粉圓", "Meiryo UI", sans-serif; }


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




/* content
------------------------------------------------------------------------------ */
#content {
	margin:3vw auto;
	width:85%;
	display:grid;
	grid-template-columns:65% 35%;
	grid-template-rows:auto;
}

#content .banner { width:100%; padding-left:9%; margin-top:2.2vw; }
#content .banner a {
	display:inline-block;
	width:46%;
	margin:2% 0 2% 4%;
	color:#FFF;
	font-family:"粉圓", "Meiryo UI", sans-serif;
	font-size:1.4vw;
	text-align:center;
	padding-top:1.1vw;
	text-shadow:rgba(0, 0, 0, 0.7) 2px 2px 3px;
	aspect-ratio: 10 / 3.8;
} 
#content .banner a:nth-last-child(1) { width:96%; aspect-ratio: 10 / 1.8; }
#content .banner a:hover {
	-webkit-filter: brightness(120%); /* Safari */
    filter: brightness(120%);
}
#content .banner a img { width:100%; }


#content .right_photo {
	position:relative;
	width:87%;
	min-height:12vw;
	background:rgba(255, 255, 255, 0.7);
	border-radius:3vw;
	padding:2.1vw 1.7vw 2.2vw 2vw;
	margin-left:13%;
	margin-top:5vw;
}
#content .right_photo img { width:100%; }

#content .right_photo_bg1 {
	position:absolute;
	top:-3.2vw;
	left:0;
	width:20vw;
	height:7.5vw;
	font-family:"粉圓", "Meiryo UI", sans-serif;
	font-size:2vw;
	padding-left:5.2vw;
	background:url("../img/home-line-3-1.png") no-repeat;
	background-size:100%;
}
#content .right_photo_bg2 { position:absolute; top:-3.0vw; right:0; width:4.2vw; }
#content .right_photo_bg3 { position:absolute;	bottom:0; left:0; width:4.2vw; }
#content .right_photo_bg4 {
	position:absolute;
	bottom:0;
	right:0;
	width:15.2vw;
	height:4.4vw;
	background:url("../img/home-line-3-4.png") no-repeat;
	background-size:100%;
}

#content .right_photo .more {
	position:absolute;
	right:5.2vw;
	bottom:-0.6vw;
}
#content .right_photo .more a {
	display:block;
	border-radius:99em;
	color:#FFF;
	padding:0.3vw 0.8vw;
	font-size:90%;
	background:#f2a0c7;
}
#content .right_photo .more a i { padding-left:2px; }
#content .right_photo .more a:hover { background:#a52525; }

#content .right_photo .show a {
	display:inline-block;
	width:30%;
	margin:1.5%;
	aspect-ratio: 1 / 1;
	border:#FFF 2px solid;
}
#content .right_photo .show a img {
	width:100%;
	height:100%;
	object-fit:cover;
}

#content .right_photo .show a:hover { opacity:0.6; border:#f464a9 2px solid; }


#content h1 { font-family:"粉圓", "Meiryo UI", sans-serif; font-size:90%; line-height:240%; color:#42a94b; margin-bottom:1.5vw; }
#content h1 p { font-size:2.5vw; color:#222; }

.content { padding:1vw 0; }
.content p { padding-bottom:1.5vw; }
.content a { text-decoration:underline; color:#c7769c; }
.content a:hover { color:var(--ahover); }
.content img { max-width:100%; }
.content ul { padding-left:1.5rem; }

.p_line {
	width:100%;
	height:2px;
	border-bottom:#ffd839 2px dotted;
	margin:1vw 0 1.5vw;
}


@media screen and (width:1024px) {
	#content { min-height:70vh; }
}
@media screen and (max-width:1000px) {
	#content { margin:80px auto 0; display:block; min-height:65vh; }
	#content .banner { padding-left:0; padding-bottom:10%; margin-top:0; }
	#content .banner a { display:inline-block; width:46%; margin:2%; font-size:4vw; padding-top:3.8vw; }
	
	#content .right_photo { width:100%; border-radius:30px; min-height:150px; margin:2% 0; padding:6% 5% 10% 6%; }
	#content .right_photo img { width:auto; }
	
	#content .right_photo_bg1 {
		top:-34px;
		left:0;
		width:180px;
		height:85px;
		font-size:23px;
		padding-left:58px;
		overflow:hidden;
		background:url("../img/home-line-3-1.png") no-repeat left bottom;
		background-size:127%;
	}
	#content .right_photo_bg2 { top:-35px; right:0; width:50px; overflow:hidden; }
	#content .right_photo_bg2 img { height:85px; }
	#content .right_photo_bg3 { bottom:0; left:0; width:50px; height:50px; overflow:hidden; }
	#content .right_photo_bg3 img { height:50px; }
	#content .right_photo_bg4 {
		bottom:0;
		right:0;
		width:140px;
		height:50px;
		overflow:hidden;
		background:url("../img/home-line-3-4.png") no-repeat right bottom;
		background-size:116%;
	}
	#content .right_photo .more { position:absolute; right:32px; bottom:-15px; }
	#content .right_photo .more a { padding:6px 10px; }
	
	#content h1 { line-height:240%; margin-bottom:20px; }
	#content h1 p { font-size:30px; }
	
	.content p { padding-bottom:20px; }
	
	.p_line { margin:15px 0 25px; }
	
	.no_1000 { display:none; }
}

@media screen and (max-width:680px) {
	#content .right_photo { margin:10% 0; }
}



/* home
------------------------------------------------------------------------------ */
.home_news {
	position:relative;
	width:100%;
	min-height:12vw;
	background:rgba(255, 255, 255, 0.7);
	border-radius:3vw;
	padding:2.2vw;
	margin:3vw 0 7vw;
}
.home_news img { width:100%; }

.home_news:nth-last-child(1) { margin-bottom:0; }

.home_news_bg1 {
	position:absolute;
	top:-3.2vw;
	left:0;
	width:36%;
	height:7.5vw;
	font-family:"粉圓", "Meiryo UI", sans-serif;
	font-size:2vw;
	padding-left:5.2vw;
}
.home_news_bg2 { position:absolute;	top:-3.2vw;	right:0; width:8%; }
.home_news_bg3 { position:absolute;	bottom:0; left:0; width:8%; }
.home_news_bg4 {
	position:absolute;
	bottom:0;
	right:0;
	width:28%;
	height:4.4vw;
}

.home_news_c1_bg1 { background:url("../img/home-line-1-1.png") no-repeat; background-size:100%; }
.home_news_c1_bg4 { background:url("../img/home-line-1-4.png") no-repeat; background-size:100%; }
.home_news_c2_bg1 { background:url("../img/home-line-2-1.png") no-repeat; background-size:100%; }
.home_news_c2_bg4 { background:url("../img/home-line-2-4.png") no-repeat; background-size:100%; }


.home_news ul { width:100%; }
.home_news li a {
	display:block;
	color:#222;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	padding:1.02vw 1vw;
	font-size:110%;
}
.home_news li a span { letter-spacing:0; padding-right:2vw; font-size:90%; }

.news_c1 li { border-bottom:#ffd839 2px dotted; }
.news_c1 li a span { color:#ab9022; }
.news_c1 li a:hover { background:#ffe57b; }

.news_c2 li { border-bottom:#64d6f2 2px dotted; }
.news_c2 li a span { color:#3399b2; }
.news_c2 li a:hover { background:#91e9ff; }


.home_news li:nth-last-child(1) { border:none; }

.home_news .more {
	position:absolute;
	right:5vw;
	bottom:-0.8vw;
}
.home_news .more a {
	display:block;
	border-radius:99em;
	color:#FFF;
	padding:0.3vw 0.8vw;
	font-size:90%;
}
.home_news .more a i { padding-left:2px; }
.home_news .more a:hover { background:#a52525!important; }


@media screen and (max-width:1000px) {
	.home_news { border-radius:30px; min-height:150px; margin:0 0 75px; padding:6% 6% 8%; }
	.home_news:nth-child(1) { margin-top:110px; }
	.home_news:nth-last-child(1) { margin-bottom:10vw; }
	.home_news img { width:auto; }
	
	.home_news li a {
		white-space:normal;
		overflow:visible;
		text-overflow:clip;
		padding:10px;
		font-size:100%;
	}
	.home_news li a span { display:block; }
	
	.home_news_bg1 {
		top:-34px;
		left:0;
		width:180px;
		height:85px;
		font-size:23px;
		padding-left:58px;
		overflow:hidden;
	}
	.home_news_bg2 { top:-35px; right:0; width:50px; overflow:hidden; }
	.home_news_bg2 img { height:85px; }
	.home_news_bg3 { bottom:0; left:0; width:50px; height:50px; overflow:hidden; }
	.home_news_bg3 img { height:50px; }
	.home_news_bg4 { bottom:0; right:0; width:140px; height:50px; overflow:hidden; }
	
	.home_news_c1_bg1 { background:url("../img/home-line-1-1.png") no-repeat left bottom; background-size:127%; }
	.home_news_c1_bg4 { background:url("../img/home-line-1-4.png") no-repeat right bottom; background-size:116%; }
	.home_news_c2_bg1 { background:url("../img/home-line-2-1.png") no-repeat left bottom; background-size:127%; }
	.home_news_c2_bg4 { background:url("../img/home-line-2-4.png") no-repeat right bottom; background-size:116%; }
	
	.home_news .more { position:absolute; right:32px; bottom:-15px; }
	.home_news .more a { padding:6px 10px; }
}

@media screen and (max-width:680px) {
	/*.home_news { margin-bottom:20vw; }*/
	.home_news:nth-last-child(1) { margin-bottom:13vw; }
}



/* home
------------------------------------------------------------------------------ */
.news_list { width:100%; }
.news_list ul { width:100%; border:#ffd839 0.3vw solid; border-left:none; border-right:none;  }
.news_list li { border-bottom:#ffd839 2px dotted; }
.news_list li a {
	display:block;
	color:#222;
	padding:1vw 0;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.news_list li a:hover { background:#FFF; padding:1vw; }
.news_list li:nth-last-child(1) { border-bottom:none; }
.news_list li a span { color:#ab9022; margin-right:2vw; }

@media screen and (max-width:1000px) {
	.news_list { padding-bottom:20px; }
	.news_list ul { border:#ffd839 4px solid; border-left:none; border-right:none; }
	.news_list li a { white-space:normal; overflow:visible; text-overflow:clip; padding:15px 0; }
	.news_list li a span { display:block; }
}

.news_content h2 {
	border:#64d6f2 0.3vw solid;
	border-left:none;
	border-right:none;
	font-family:"粉圓", "Meiryo UI", sans-serif;
	font-size:1.5vw;
	text-align:center;
	padding:0.6vw;
	margin-bottom:1vw;
	background:rgba(255, 255, 255, 0.5);
}
.news_content h2 p { font-size:0.8vw; line-height:220%; color:#888; }

.download { width:100%; padding:1vw 0; }
.download ul { width:100%; }
.download li { display:inline-block; }
.download li a {
	display:block;
	padding:0.6vw 1vw;
	color:#FFF;
	background:var(--green);
	border-radius:5px;
	margin:0 0.5vw 0.5vw 0;
}
.download li a i { padding-right:3px; opacity:0.6; }
.download li a:hover { background:var(--ahover); }

@media screen and (max-width:1000px) {
	.news_content h2 {
		font-size:20px;
		border:#64d6f2 3px solid;
		border-left:none;
		border-right:none;
		padding:10px;
		margin-bottom:20px;
		line-height:130%;
	}
	.news_content h2 p { font-size:13px; line-height:150%; padding-top:10px; }
	.download li a { padding:15px 20px; margin:0 10px 10px 0; }
}



/* about
------------------------------------------------------------------------------ */
.about_4 {
	position:relative;
	width:100%;
	border-radius:3vw;
	background:rgba(255,255,255,0.7);
	padding:1vw 2vw 1vw;
	margin:4.5vw 0;
}
.about_4 h2 {
	position:absolute;
	top:-1.6vw;
	left:3vw;
	font-family:"粉圓", "Meiryo UI", sans-serif;
	font-size:1.8vw;
	color:#47adc6;
}
.about_4 h2 i { font-size:70%; color:#ffd839; padding-right:5px; }

.about_4 .photo a {
	display:inline-block;
	width:18%;
	margin:1%;
	aspect-ratio: 1 / 1;
	border-radius:0.5vw;
	overflow:hidden;
}
.about_4 .photo a img {
	width:100%;
	height:100%;
	object-fit:cover;
}
.about_4 .photo a:hover { opacity:0.7; }


@media screen and (max-width:1000px) {
	.about_4 { border-radius:30px; padding:22px 23px 15px 23px; margin:50px 0; }
	.about_4 h2 { font-size:20px; top:-20px; left:22px; }
	.about_4 h2 i { padding-right:0; }
	.about_4 .photo a { width:23%; border-radius:8px; }
}
@media screen and (max-width:680px) {
	.about_4 .photo a { width:31%; }
}

.about_left, .about_right { float:left; width:50%; }
.about_right { padding-left:5%; border-left:#ccc 1px solid; }

@media screen and (max-width:840px) {
	.about_left, .about_right { float:none; width:100%; }
	.about_right { padding-left:0; border-left:none; }
}


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

.grid article {
	display: block;
	float: left;
	margin: 1%;
	width: 31.3%;
	background:#FFF;
	border-radius:10px;
	padding:0.8vw;
	-webkit-box-shadow: 0 1px 5px 2px rgba(0,0,0,0.05);
	-moz-box-shadow: 0 1px 5px 2px rgba(0,0,0,0.05);
	box-shadow: 0 1px 5px 2px rgba(0,0,0,0.05);
}

.grid article img {
	aspect-ratio: 4 / 3;
	width:100%;
	height:100%;
	object-fit:cover;
}

.grid article h2 { font-size:115%; font-weight:600; color:#2996aa; padding:0.5vw 0; border-bottom:#ffd839 2px dotted; margin-bottom:1vw; }
.grid article p { padding-bottom:0.8vw; }



@media (max-width: 1024px) {
  .grid article {
    width: 30%;
	margin:1.5%;
	padding:15px;
  }
  .grid article h2 { padding:10px 0; margin-bottom:15px; }
  .grid article p { padding-bottom:10px; }
}

@media (max-width: 767px) {
  .grid article {
    width: 45%;
	margin:2.5%;
  }
}

@media (max-width: 479px) {
  .grid article {
    margin: 4% 0;
    width: 100%;
  }
}











/* guide
------------------------------------------------------------------------------ */
.guide h2 {
	font-family:"粉圓", "Meiryo UI", sans-serif;
	font-size:120%;
	color:#3d9db4;
	margin-bottom:1vw;
}

.guide table { width:100%; }
.guide th, .guide td { padding:0.3vw 0; }
.guide th { text-align:right; width:8vw; color:#2f8349; font-weight:600; }


@media screen and (max-width:1000px) {
	.guide h2 { margin-bottom:20px; line-height:130%; }
	.guide th, .guide td { padding:3px 0; }
	.guide th { width:115px;letter-spacing:0; }
}



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

.photo_list a {
	position:relative;
	align-items:stretch;
	align-content:stretch;
	width:32%;
	border-radius:6px;
	padding:0.6vw;
	background:#FFF;
	margin:0 2% 2% 0;
	color:#222;
}
.photo_list a:nth-child(3n) { margin-right:0; }

.photo_list .photo { width:100%; aspect-ratio: 4 / 3; }
.photo_list .photo img {
	width:100%;
	height:100%;
	object-fit:cover;
}
.photo_list a p { font-family:"粉圓", "Meiryo UI", sans-serif; text-align:center; padding:0.6vw 0 0.5vw; }
.photo_list a span { display:block; font-size:80%; color:#888; }

.photo_list a:hover { background:#ffd839; }


@media screen and (max-width:1000px) {
	.photo_list a { padding:10px; }
	.photo_list a p { padding:10px 0 6px; line-height:140%; }
	.photo_list a span { padding-top:5px; }
}
@media screen and (max-width:680px) {
	.photo_list a { width:48%; margin:0 4% 4% 0; }
	.photo_list a:nth-child(3n) { margin-right:auto; }
	.photo_list a:nth-child(even) { margin-right:0; }
}
@media screen and (max-width:460px) {
	.photo_list a { width:100%; margin:0 0 8%; }
}


.photo_gallery a {
	display:inline-block;
	width:18%;
	margin:1%;
	aspect-ratio: 1 / 1;
	border-radius:0.5vw;
	overflow:hidden;
}
.photo_gallery a img {
	width:100%;
	height:100%;
	object-fit:cover;
}
.photo_gallery a:hover { opacity:0.7; }


@media screen and (max-width:1000px) {
	.photo_gallery a { width:23%; border-radius:8px; }
}
@media screen and (max-width:680px) {
	.photo_gallery a { width:31%; }
}




/* contact
------------------------------------------------------------------------------ */
.map { width:100%; border:#FFF 5px solid; border-radius:5px; margin-top:10px; }




/* footer
------------------------------------------------------------------------------ */
footer { width:100%; padding:6vw 0 8vw; }
address { padding-left:60vw; font-weight:600; line-height:200%; }
address a { color:#222; }
address a:hover { text-decoration:underline; color:#a52525; }

@media screen and (max-width:1000px) {
	footer { padding:5vw 0 25vw; }
	address { font-size:85%; padding:0 0; text-align:center; }
}




/* btn
------------------------------------------------------------------------------ */
.btn {
	width:100%;
	border-top:#64d6f2 0.3vw solid;
	margin:3vw 0;
	padding:3vw 0;
	text-align:center;
}
.btn a {
	display:inline-block;
	padding:1vw;
	border-radius:99em;
	color:#FFF;
	font-family:"粉圓", "Meiryo UI", sans-serif;
	font-size:120%;
}
.btn a:hover { background:var(--ahover); }
.btn a i { padding-right:5px; opacity:0.6; }

.btn_1 a { width:28%; }


.btn_p { background:var(--pp); }
.btn_g { background:var(--green); }


@media screen and (max-width:1000px) {
	.btn { border-top:#64d6f2 3px solid; margin:30px 0; padding:30px 0; }
	.btn a { padding:15px 5px; }
	.btn_1 a { width:80%; }
}




/* go top
------------------------------------------------------------------------------ */
.bck {
	position:fixed;
	bottom:10px;
	right:0;
	visibility:hidden;
	width:86px;
	height:96px;
	transition-property:all;
	z-index:2;
}

.bck.bck-on {visibility:visible;}
.fade{opacity: 0;}
.bck-on.fade{opacity: 1;}
.rightToLeft {right : -86px;}
.bck-on.rightToLeft{right:0;}
.bottomToTop {bottom: -50px;}
.bck-on.bottomToTop {bottom:1rem;}
.bck-leftToRight {left: -86px;}
.bck-on.leftToRight {left:0;}
.topToBottom {top: -50px;}
.bck-on.topToBottom {top:1rem;}




/* 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%;
}



/* color
------------------------------------------------------------------------------ */
:root {
	--pp:#db6b96;
	--green:#79ac6a;
	--ahover:#c0485e;
}