/* ==========================================================================
   Public
============================================================================= */
@import url("https://use.fontawesome.com/releases/v7.2.0/css/all.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap'); /*思源黑體 */
@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap'); /* 小杉圓體 */


html { scroll-behavior: auto; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body { 
	font:1vw/1.5 Verdana, Meiryo, "Meiryo UI", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif;
	letter-spacing:0.06em;
	color:#222;
	background-color:#fafafa;
	overflow-wrap:break-word;
	word-break:break-word;
}
@media screen and (max-width:1279px) {
	body { font-size:16px; }
}


img {
	display:inline-block;
	border:none;
	vertical-align:middle;
}


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

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



/* header
--------------------------------------------------------------------------------- */
header {
	position:relative;
	height:24vw;
}
header img { width:100%; }

header .menu {
	position:absolute;
	right:5vw;
	bottom:2.5vw;
}

header .menu li { display:inline-block; }

header .menu li a {
	display:block;
	width:13vw;
	border-radius:99em;
	border:#ff828a 0.3vw solid;
	padding:0.8vw;
	text-align:center;
	font-size:130%;
	font-family: 'Kosugi Maru', sans-serif;
	color:#ff828a;
	font-weight:600;
	background:#FFF;
	margin:0 0.5vw;
}
header .menu li a:hover { background:#ff828a; color:#FFF; }

@media screen and (max-width:1279px) {
	header { height:30vw; margin-top:55px; }
	header .menu { display:none; }
}



/* content
--------------------------------------------------------------------------------- */
main {
	margin:0 auto 5vw;
	width:80%;
	max-width:1400px;
	min-height:calc(100vh - 37vw);
}

h1 {
	text-align:center;
	color:#a1706e;
	font-family: 'Kosugi Maru', sans-serif;
	font-weight:600;
	font-size:250%;
	letter-spacing:5px;
	margin-bottom:1vw;
}
h1 img { width:3vw; margin-right:8px; }

.content h2 {
	text-align:center;
	color:#3b87a4;
	font-size:160%;
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif;
	font-weight:600;
	border-bottom:#ccc 1px dashed;
	padding-bottom:1vw;
	margin-bottom:2vw;
}
.content h2 span { display:block; font-size:85%; color:#aaa; font-size:60%; font-weight:normal; }

.content p { padding-bottom:1vw; }

@media screen and (max-width:1279px) {
	main { margin:20px auto 50px; min-height:calc(100vh - 30vw - 225px); }
	h1 { font-size:5vw; }
	h1 img { width:6vw; }
	.content { padding-top:10px; }
	.content h2 { font-size:130%; padding-bottom:15px; margin-bottom:20px; }
	.content h2 span { padding-top:5px; }
	.content p { padding-bottom:20px; }
}
@media screen and (max-width:767px) {
	h1 { font-size:7vw; }
	h1 img { width:10vw; }
	h1 span { display:block; font-size:60%; color:#888; }
}

label { display:block; padding-bottom:3px; }
label i { color:#ff9fa5; }
input, select, textarea {
	padding:0.6vw; width:100%;
	border:#ccc 1px solid;
	border-radius:5px;
	background:#FFF;
}

input[type="radio"] { width:1vw; height:1vw; vertical-align:middle; margin-right:3px; }

@media screen and (max-width:1279px) {
	input, select, textarea { padding:12px; }
	input[type="radio"] { width:25px; height:25px; }
}




/* news
--------------------------------------------------------------------------------- */
.news li a {
	display:block;
	color:#222;
	border-bottom:#ccc 1px dashed;
	padding:1vw 0;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis; 
}
.news li a span { color:#a1706e; margin-right:2vw; letter-spacing:0; }

.news li a:hover { padding:1vw; background:#ffdad9; color:#a1706e; }


@media screen and (max-width:1279px) {
	.news li a {
		padding:15px 0;
		white-space:normal;
		overflow:visible;
		text-overflow:clip; 
	}
	.news li a span { display:block; margin-right:0; font-size:90%; }
}

.download li { display:inline-block; }
.download li a {
	display:block;
	border-radius:99em;
	background:#3b87a4;color:#FFF;
	padding:0.8vw 1.5vw;
	margin:0.5vw 0.5vw 0.5vw 0;
}
.download li a i { opacity:0.6; }
.download li a:hover { background:#9d2a32; }

@media screen and (max-width:1279px) {
	.download li a { padding:15px; margin:5px 10px 5px 0; }
}



/* video
--------------------------------------------------------------------------------- */
.video {
	display:grid;
	grid-template-columns:1.5fr 1fr;
}

.video video { width:100%; border-radius:10px; }

.video > div:last-child { padding-left:4vw; }

@media screen and (max-width:1279px) {
	.video { grid-template-columns:1fr; margin-top:10px; }
	.video > div:last-child { padding-left:0; padding-top:20px; }
}

.video :is(.w1, .w2, .w3) { padding-bottom:1vw; gap:2vw; }

.video .w1 ul { padding-left:1.5vw; }
.video .w1 li {
	display:inline-block;
	padding-right:10px;
}

.video .w2 {
	display:grid;
	grid-template-columns:1fr 1fr;
}
.video .w3 {
	display:grid;
	grid-template-columns:repeat(3, 1fr);
}

.video textarea { height:37vw; }

@media screen and (max-width:1279px) {
	.video :is(.w1, .w2, .w3) { padding-bottom:20px; gap:15px; }
	.video :is(.w2, .w3) { grid-template-columns:1fr; }
	.video textarea { height:30vh; }
}



/* plan
--------------------------------------------------------------------------------- */
.plan h2 {
	font-family: 'Kosugi Maru', sans-serif;
	font-weight:600;
	font-size:180%;
	color:#3b87a4
}
.plan h2 img { width:3vw; }


.plan_list {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:2.5vw;
	margin-bottom:2vw;
	padding-bottom:2vw;
	border-bottom:#CCC 1px dashed;
}
.plan_list a {
	border:#ff9fa5 1px solid;
	border-radius:10px;
	padding:1vw;
}

.plan_list a {
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:2vw;
}
.plan_list a:hover {
	background:#ffdad9;
}

.plan_list .photo {
	aspect-ratio: 1 / 1;
	overflow:hidden;
}
.plan_list .photo img {
	width:100%;
	height:100%;
	object-fit:cover;
}

.plan_list h3 {
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif;
	color:#3b87a4;
	font-weight:600;
	font-size:130%;
	margin-bottom:0.5vw;
}
.plan_list h3 span {
	color:#FFF;
	font-weight:normal;
	font-size:60%;
	padding:3px 10px;
	border-radius:2px;
	background:#ff828a;
}

@media screen and (max-width:1279px) {
	.plan h2 { font-size:150%; }
	.plan h2 img { width:40px; }
	.plan_list { gap:20px; margin-bottom:30px; padding-bottom:30px; }
	.plan_list a { grid-template-columns:1fr; gap:10px; padding:15px; align-content: start; }
	.plan_list .photo { aspect-ratio: 4 / 3; }
}

@media screen and (max-width:767px) {
	.plan_list { grid-template-columns:1fr; }
}



/* login
--------------------------------------------------------------------------------- */
.login {
	margin:0 auto;
	max-width:500px;
}
.login :is(input, select) { margin-bottom:1vw; }

@media screen and (max-width:767px) {
	.login { margin-top:20px; }
	.login :is(input, select) { margin-bottom:15px; }
}




/* reflections
--------------------------------------------------------------------------------- */
.reflections td a {
	font-size:150%;
	margin:0 5px;
}
.reflections td a:nth-child(1) { color:#ff6c00; }
.reflections td a:nth-child(2) { color:#29af00; }
.reflections td a:hover { color:#9d2a32; }


.add { text-align:center; margin-bottom:0.8vw; }
.add a {
	display:inline-block;
	padding:0.6vw 1.5vw;
	border-radius:99em;
	color:#FFF;
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif;
}
.add a i { opacity:0.6; }
.add a:hover { background:#9d2a32; }

@media screen and (max-width:1279px) {
	.add { margin:15px 0; }
	.add a { padding:15px 20px; }
}

.winner {
	display:grid;
	grid-template-columns:repeat(4, 1fr);
	gap:2.5vw;
	border-bottom:#ccc 1px dashed;
	padding-bottom:2vw;
	margin-bottom:2vw;
}

.winner a {
	display:block;
	border:#ff9fa5 1px solid;
	border-radius:10px;
	padding:1vw;
}
.winner a:hover {
	background:#ffdad9;
}

.winner p {
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif;
	font-weight:600;
	font-size:170%;
	color:#3b87a4;
	text-align:center;
}

.flag span {
	color:#FFF;
	font-size:90%;
	padding:3px 8px;
	border-radius:2px;
	background:#ff828a;
	margin-right:5px;
}

@media screen and (max-width:1279px) {
	.winner { grid-template-columns:repeat(2, 1fr); gap:15px; padding-bottom:20px; margin-bottom:20px; }
	.winner a { padding:12px 15px; }
}
@media screen and (max-width:767px) {
	.winner { grid-template-columns:1fr; }
}




/* footer
--------------------------------------------------------------------------------- */
footer {
	height:8vw;
	background:url("../img/copyright.png") bottom center no-repeat;
	background-size:100%;
	text-align:center;
	font-size:80%;
	color:#a1706e;
	padding-top:2.7vw;
}

@media screen and (max-width:1279px) {
	footer {
		height:100px;
		background:url("../img/copyright.png") top left no-repeat;
		background-size:170%;
		font-size:10px;
		padding-top:30px;
	 }
}

@media screen and (max-width:767px) {
	footer { background-size:340%; }
}



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

.btn a {
	display:inline-block;
	border-radius:99em;
	padding:1vw 0;
	margin:0 1vw;
	color:#FFF;
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif; 
	font-weight:600;
	font-size:120%;
}
.btn a i { margin-right:5px; opacity:0.6; }
.btn a:hover { background:#9d2a32; }

.btn_1 a { width:25%; }
.btn_2 a { width:40%; }
.btn_video a { width:60%; }

.btn_pink { background:#ff8189; }
.btn_blue { background:#3b87a4; }
.btn_green { background:#548b70; }

@media screen and (max-width:1279px) {
	.btn { padding-top:30px; margin-top:20px; }
	.btn a { padding:15px 0; }
	.btn_1 a { width:40%; }
	.btn_video a { width:40%; }
}
@media screen and (max-width:767px) {
	.btn_1 a { width:80%; }
	.btn_2 a { width:46%; }
	.btn_video a { width:80%; }
}