/* ==========================================================================
   Public
============================================================================= */
@import url("https://use.fontawesome.com/releases/v7.0.1/css/all.css");
@import url('https://fonts.googleapis.com/earlyaccess/notosanstc.css'); /* 思源黑體 */

/*body, html { width:100%; height:100%; }*/

body { 
	font:1vw/1.6 Verdana, Meiryo, "Meiryo UI", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif;
	letter-spacing:0.06em;
	color:#222;
	background:#c8f4f3 url("../img/bg-bottom.jpg") center bottom no-repeat;
	background-size:100%;
	min-height:100vh;
}
@media screen and (orientation:portrait) {
	body { font-size:16px; background:#c8f4f3 url("../img/bg-bottom.jpg") center bottom no-repeat fixed; background-size:100%; }
}

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;
}
a:hover { color:#dd5b6a; }


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

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




/* header
----------------------------------------------------------------------------------------------- */
header {
	width:100%;
	display:grid;
	grid-template-columns: 1fr 2.5fr;
	grid-template-rows:auto;
	padding:1.5vw 5vw;
}
header div:nth-child(1) { text-align:center; }
header div:nth-child(2) { text-align:right; }
header img { width:90%; }

header .pc_nav ul {
	display:inline-block;
	background:#FFF;
	border-radius:99em;
	padding:0.8vw 3vw;
	margin-top:2.5vw;
}
header .pc_nav li { display:inline-block; }
header .pc_nav li a { font-size:110%; font-weight:600; font-family:"Noto Sans TC", "Meiryo UI", sans-serif; color:#222; padding:1vw; }
header .pc_nav li a:hover { color:#6a8423; }


@media screen and (orientation:portrait) {
	header { display:block; width:100%; margin:0; padding:0; }
	header div:nth-child(2) { display:none; }
	header img { width:100%; }
}



/* main
----------------------------------------------------------------------------------------------- */
main {
	width:100%;
	/*background:url("../img/bg-bottom.jpg") center bottom no-repeat;
	background-size:100%;
	padding-bottom:10vw;*/
}

#content {
	position:relative;
	margin:1vw auto;
	width:80%;
	background:rgba(255,255,255,0.6);
	padding:2.5vw 4vw 3vw;
}

#content .line1 { position:absolute; top:-0.5vw; left:-0.5vw; }
#content .line2 { position:absolute; top:-0.5vw; right:-0.5vw; }
#content .line3 { position:absolute; bottom:-0.5vw; left:-0.5vw; }
#content .line4 { position:absolute; bottom:-9vw; right:-3vw; }
#content .line1 img, #content .line2 img, #content .line3 img { width:5vw; }
#content .line4 img { width:32vw; }

h1 { width:100%; border-bottom:#a9e1dc 0.4vw dotted; text-align:center; padding-bottom:2vw; margin-bottom:2vw; }
h1 img { width:20%; max-width:515px; }
h2 { font-size:110%; font-weight:600; color:#5d7735; padding-bottom:0.6vw; }


.content { margin-bottom:100px; }
.content p { padding-bottom:1vw; }
.content img { max-width:100%; }
.content ul { width:100%; list-style-type:trad-chinese-informal; padding-left:2em; }
.content li { padding-bottom:1vw; }

.content table { width:100%; }
.content th, .content td { padding:0.6vw; border:#ccc 1px solid; }
.content th { background:#505f8a; color:#FFF; }
.content td { background:#FFF; }
.content td:nth-child(1), .content td:nth-child(3) { text-align:center; }

.search { width:100%; text-align:center; padding:1vw 0; }
.search ul { list-style:none; }
.search li { display:inline-block; text-align:center; padding:0; padding-right:1vw; }
.search input[type="radio"] { vertical-align:middle; margin-right:3px; width:1vw; height:1vw; }

.p_line { width:100%; border-bottom:#a9e1dc 0.4vw dotted; margin:1.5vw 0;}

.table3 td { text-align:left!important; }
.table3 th:nth-child(2) { width:45%; }
.table3 th:nth-child(3) { width:45%; }


@media screen and (orientation:portrait) {
	#content { width:85%; padding:5% 5% 20px; margin:20px auto 50px; }
	#content .line1 { top:-3px; left:-3px; }
	#content .line2 { top:-3px; right:-3px; }
	#content .line3 { bottom:-3px; left:-3px; }
	#content .line4 { bottom:-60px; right:-12px; }
	#content .line1 img, #content .line2 img, #content .line3 img { width:40px; }
	#content .line4 img { width:250px; }
	h1 { border-bottom:#a9e1dc 3px dotted; padding-bottom:20px; margin-bottom:20px; }
	h1 img { width:50%; }
	
	.content p { padding-bottom:20px; }
	.content li { padding-bottom:6px; }
	
	.content td { background:#FFF; } table { font-size:80%; }
	.content th, .content td { padding:6px; vertical-align:middle; }
	.table1 th:nth-child(1) { width:85px; }
	.table1 th:nth-child(3) { width:50px; }
	.table2 th:nth-child(1) { width:70px; }
	.table2 th:nth-child(3) { width:70px; }
	.table3 th:nth-child(2) { width:40%; }
	.table3 th:nth-child(3) { width:40%; }
	
	.search { padding:15px 0 10px; }
	.search input[type="radio"] { width:25px; height:25px; }
	.search li { padding-right:20px; }
	
	.p_line { border-bottom:#a9e1dc 3px dotted; margin:20px 0;}
}



/* news
----------------------------------------------------------------------------------------------- */
.news { width:100%; padding:1vw 0 2vw; }
.news ul { display:block; width:100%; }
.news li a {
	display:block;
	color:#222;
	padding:1vw;
	border-bottom:#ffd168 1px dashed;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.news li a:hover { background:#FFF; }
.news li a span { color:#25898c; letter-spacing:0; padding-right:2vw; }
.news li a:hover span { color:#e38b4a; }

h3 {
	width:100%;
	font-size:120%;
	color:#0c7b7e;
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif; 
	font-weight:600;
	text-align:center;
	border:#a9e1dc 0.4vw dotted;
	padding:1vw;
	background:#e9f5e7;
	margin-bottom:2vw;
}
h3 span { display:block; font-size:80%; font-weight:normal; color:#888; }

@media screen and (orientation:portrait) {
	.news { width:100%; padding:10px 0 30px; }
	.news li a { overflow:auto; text-overflow:clip; white-space:normal; padding:15px 0; }
	.news li a span { display:block; padding-right:0; }
	h3 { padding:15px; border:#a9e1dc 3px dotted; margin-bottom:25px; }
}

.download ul { width:100%; list-style:none; padding-left:0; }
.download li { display:inline-block; margin:0 0.6vw 0.6vw 0; }
.download li a { display:block; background:#ceb551; color:#FFF; padding:0.5vw 1vw; border-radius:99em; }
.download li a i { opacity:0.7; margin-right:3px; }
.download li a:hover { background:#b3573e; }

@media screen and (orientation:portrait) {
	.download li { margin:6px 10px 6px 0; }
	.download li a { padding:10px 20px; }
}



/* form
----------------------------------------------------------------------------------------------- */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="file"],
select, textarea {
	width:100%;
	border:#ccc 1px solid;
	background:#FFF;
	padding:0.6vw;
	border-radius:3px;
	margin-bottom:1vw;
}

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

button { padding:0.6vw; margin-left:5px; }


label {
	display:block;
	font-weight:600;	
}
label i { color:#ffba00; margin-right:3px; }


.login { margin:0 auto; width:90%; max-width:500px; padding-bottom:1vw; }


@media screen and (orientation:portrait) {
	input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="file"], select, textarea { padding:12px 10px; margin-bottom:15px; }
	input[type="checkbox"] { width:25px; height:25px; }
	button { padding:12px 10px; }
}

.regist {
	width:100%;
	display:grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows:auto;
}

.regist div { margin:1vw; background:#FFF; border-radius:1vw; box-shadow:rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; }

.regist .title {
	font-size:110%;
	color:#FFF;
	background:#505f8a;
	padding:0.8vw;
	text-align:center;
	font-weight:600;
	border-radius:1vw 1vw 0 0;
}
.regist .list { padding:2vw; }
.regist .name, .regist .no { width:48%; margin-right:2%; }

.regist table { width:100%; font-size:90%; }
.regist th, .regist td { padding:0.6vw; border:#ccc 1px solid; }
.regist th { color:#FFF; background:#2b4f76; }
.regist td:nth-last-child(1) { text-align:center; width:5vw; }
.regist td a { color:#ef6000; font-size:120%; }
.regist td a:hover { color:#ef0000; }

.regist ul { width:100%; margin-bottom:1vw; }
.regist li { display:inline-block; padding-right:0.5vw; }

.mobile_btn { padding:0.6vw; background:#505f8a; color:#FFF; font-size:90%; border-radius:3px; }
.mobile_btn:hover { background:#cb5353; color:#FFF; }

.maintain {
	position:absolute;
	top:3.2vw;
	right:4vw;
}
.maintain a { color:#FFF; padding:0.6vw 1vw; background:#598718; border-radius:3px; font-size:90%; }
.maintain a:hover { background:#cb5353; }
.maintain a i { opacity:0.6; margin-right:3px; }



@media screen and (orientation:portrait) {
	.regist { display:block; font-size:90%; }
	.regist div { margin:10px 0 30px; width:100%; border-radius:10px; }
	.regist .title { padding:10px; border-radius:10px 10px 0 0; }
	.regist .list { padding:5%; }
	
	.regist td:nth-last-child(1) { width:50px; }
	
	.regist ul { margin-bottom:15px; }
	.regist li { padding-right:5px; padding-bottom:5px; }
	
	.mobile_btn { padding:14px 7px; font-size:14px; }
	
	.maintain { position:static; text-align:center; padding-bottom:20px; }
	.maintain a { padding:12px; }
}



/* award
----------------------------------------------------------------------------------------------- */
.select { padding-top:1vw; text-align:center; }
.select select { width:auto; }

.award {
	width:100%;
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows:auto;
}
.award div { padding:0 2vw; }
.award div:nth-child(2) { border-left:#ccc 1px solid; border-right:#ccc 1px solid; }

.award h2 { font-size:120%; font-weight:600; font-family:"Noto Sans TC", "Meiryo UI", sans-serif; color:#0a7a7d; text-align:center; }

.award h3 { font-size:100%; font-weight:600; font-family:"Noto Sans TC", "Meiryo UI", sans-serif; color:#d5466b; border:none; background:none; padding:0; text-align:left; margin-bottom:0.5vw; }
.award h3 i { color:#ffa800; }

.award p { padding-bottom:0; }
.award span { font-weight:600; }

.p_line2 { width:100%; border-bottom:#aaa 1px dashed; margin:1vw 0; }

@media screen and (orientation:portrait) {
	.select { padding-top:20px; }
	.award { display:block; }
	.award div { padding:0 0 50px; border-bottom:#0e7d7f 2px dotted; padding-top:20px; }
	.award div:nth-child(2) { border:none; border-bottom:#0e7d7f 2px dotted; }
	.award h3 { margin-bottom:5px; }
	.p_line2 { margin:15px 0; }
}


.link { text-decoration:underline; color:#ff9268; }
.link:hover { color:#cb5353; }




/*footer
----------------------------------------------------------------------------------------------- */
footer { padding:1vw 12% 5vw; font-size:80%; }

@media screen and (orientation:portrait) {
	footer { padding:20px 5% 50px;  text-align:center; }
	footer span { display:block; }
}





/* btn
----------------------------------------------------------------------------------------------- */
.btn { width:100%; border-top:#a9e1dc 0.4vw dotted; margin:1.5vw 0; text-align:center; padding-top:2vw; }
.btn a {
	display:inline-block;
	padding:1vw;
	text-align:center;
	font-size:120%;
	font-family:"Noto Sans TC", "Meiryo UI", sans-serif; 
	font-weight:600;
	color:#FFF;
	border-radius:6px;
}
.btn a i { opacity:0.7; margin-right:3px; }

.btn_r { background:#cb5353; }
.btn_b { background:#66a4b8; }

.btn a:hover { background:#555; }

.btn_1 a { width:20%; }
.btn_2 a { width:20%; margin:0 1vw; }

@media screen and (orientation:portrait) {
	.btn { border-top:#a9e1dc 3px dotted; margin:20px 0; padding-top:20px; }
	.btn a { padding:15px 0; font-size:105%; }
	.btn_1 a { width:80%; }
	.btn_2 a { width:45%; margin:0 1.5%; }
}