/* ==========================================================================
   Public
============================================================================= */
@import url('https://use.fontawesome.com/releases/v5.15.4/css/all.css');
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
body, html { width:100%; height:100%; }

body { 
	font:15px/1.5 Arial, Meiryo, "Meiryo UI", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif;
	letter-spacing:0.06em;
	color:#222;
	background-color:#f0e8d8;
}

@media screen and (max-width:1000px) {
	body { font:18px/1.5 Arial, Meiryo, "Meiryo UI", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif; }
}





.print { display:inline-block; font-size:90%; color:#FFF; background:#b26a29; padding:5px 6px; border-radius:5px; margin-left:5px; cursor: pointer; }
.print:hover { background:#a92828; }
@media screen and (max-width:1000px) {
	.print { width:180px; padding:10px; text-align:center; margin-left:10px; }
}


img {
	border:none;
	vertical-align:middle;
}


*, *:after, *:before {
  -webkit-box-sizing:border-box;
     -moz-box-sizing:border-box;
          box-sizing:border-box;
}


a {
	color:#d76700;
	text-decoration:none;
}
a:hover { color:#e60454; }


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


input[type="text"], input[type="password"], select {
	color:#222;
	background:#ededed;
	padding:10px;
	border:#c9c9c9 1px solid;
	border-radius:5px;
	margin:5px 0;
}


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



/* content
-----------------------------------------------------------------------------------------*/
header { position:fixed; top:0; left:0; width:26.5%; height:100vh;  }
section {
	position:absolute;
	top:0;
	right:0;
	width:73.5%;
	min-height:100vh;
	padding:2.5% 3%;
}

#bg1 {
	background:#f8f8f6 url(../img/content-bg.jpg) right center no-repeat;
	background-size:cover;
	-moz-background-size:cover;
	padding-bottom:100px;
}

#bg2 {
	background:#f8f8f6 url(../img/content-bg2.jpg) right center no-repeat;
	background-size:cover;
	-moz-background-size:cover;
	padding-bottom:100px;
}

@media screen and (max-width:1300px) {
	header { width:335px;  }
    section { width:calc(100% - 335px); }
}

@media screen and (max-width:1000px) {
	header, section { position:static; }
	header { width:100%; height:250px; }
	section {
		width:100%;
		min-height:calc(100vh - 250px);
		padding:5%;
	}
	#bg1 {
	    background:#f8f8f6 url(../img/content-bg.jpg) right bottom no-repeat;
	    background-size:cover;
	    -moz-background-size:cover;
	}
	#bg2 {
	    background:#f8f8f6 url(../img/content-bg2.jpg) right bottom no-repeat;
	    background-size:cover;
	    -moz-background-size:cover;
	}
}

@media screen and (max-width:640px) {
	header { height:150px; }
	section { min-height:calc(100vh - 150px); }
}

#content_title { width:100%; margin-bottom:40px; }
#content_title img { max-width:30%; }

@media screen and (max-width:1000px) {
	#content_title { margin-top:0.5rem; }
	#content_title img { max-width:60%; }
}

.p_line { width:100%; height:5px; border-bottom:#d2ccba 5px dotted; margin:2rem 0; }

.text1 { width:100%; color:#994f4f; text-align:center; margin-top:1.5rem; }
.text2 { width:100%; color:#994f4f; margin-bottom:1.5rem; }
.text3 { color:#994f4f; font-size:13px; font-weight:normal; }
.text4 { color:#e60454; font-weight:normal; text-align:center; margin-bottom:1rem; }
.text4 i { color:#fd9033; }


	


/* mobile nav
-----------------------------------------------------------------------------------------*/
#nav_pc {
	position:relative;
	width:100%;
	min-height:100%;
	color:#8c7634;
	background:#f0e8d8 url(../img/nav-bg.jpg) center bottom no-repeat;
	background-size:cover;
	-moz-background-size:cover;
	padding:10%;
	padding-bottom:185px;
}

#nav_pc .logo { width:100%; text-align:center; margin-bottom:10%; }
#nav_pc .logo img { width:100%; max-width:620px; }

#nav_pc .menu_pc {
	margin:0 auto;
	width:100%;
	max-width:620px
}

#nav_pc .texts { font-size:11px; letter-spacing:0.04rem; }

#nav_pc .nav_box {
	float:left;
	width:21%;
    height:0;
    padding-bottom:20%;
	background:rgba(255,255,255,0.6);
	border-radius:8px;
	cursor:pointer;
	margin:2%; 
}
#nav_pc .nav_box:hover { background:#FFF; }
#nav_pc .nav_box img { width:100%; }

#nav_pc .nav_name { float:left; width:21%; text-align:center; font-size:14px; margin:-0.5% 2%;   }

#nav_pc .line {
	width:100%;
	height:5px;
	border-bottom:#FFF 5px dotted;
	margin:1.5rem 0 1.1rem 0;
}

@media screen and (max-width:1400px) {
	#nav_pc .nav_name { font-size:13px; }
}

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



/* footer
-----------------------------------------------------------------------------------------*/
footer {
	position:absolute;
	left:10%;
	bottom:0;
	width:80%;
	max-width:620px;
	height:185px;
	font-size:0.7rem;
	letter-spacing:0;
	padding-top:50px;
}
footer p {
	font-size:12px;
	letter-spacing:0.06rem;
	margin-bottom:10px;
	text-shadow:-2px 0 #FFF, 0 2px #FFF, 2px 0 #FFF, 0 -2px #FFF;
	color:#846c25;
}
footer i { padding-right:3px; }

#footer_sp { display:none; }

@media screen and (max-width:1000px) {
#footer_sp {
	display:block;
	width:100%;
	background:#8c7942;
	padding:1.5rem 1rem;
	text-align:center;
	font-size:12px;
	color:#FFF;
}
#footer_sp i { padding-right:3px; color:#f2bf2f; }
#footer_sp .copyright { color:#afafaf; font-size:0.6rem; padding-top:1rem; }
}



/* mobile header
-----------------------------------------------------------------------------------------*/
#header { display:none; }

@media screen and (max-width:1000px) {
	#header {
		display:block;
		width:100%;
		height:250px;
		padding:0 5rem;
		line-height:230px;
		background:url(../img/sp-bg.jpg) right center no-repeat;
    }
	#header img { height:170px }
}

@media screen and (max-width:640px) {
	#header { text-align:center; padding:2rem 0; height:150px; padding:0; line-height:140px; }
	#header img { height:110px }
}


/* news
-----------------------------------------------------------------------------------------*/
.news_list ul {
	width:100%;
	padding:0;
	margin:0;
	border-top:#8c7634 1px solid;
}

.news_list li {
	display:table;
	width:100%;
	padding:5px 0;	
	border-bottom:#8c7634 1px solid;
}

.news_list_day, .news_list_flag, .news_list_post, .news_list_title { display:table-cell; padding:5px 10px; }
.news_list_day {	
	width:110px;
	text-align:center;
	color:#8c7634;
    letter-spacing:0;	
}

.news_list_flag {
	width:100px;
	font-size:13px;
	text-align:center;
	color:#FFF;
	border-left:#f5af5e 2px dotted;
	border-right:#f5af5e 2px dotted;
}
.news_list_flag1 { background:#43923c; padding:4px; }
.news_list_flag2 { background:#d02100; padding:4px; }
.news_list_flag3 { background:#c15809; padding:4px; }


.news_list_post {
	width:90px;
	text-align:center;
	color:#108283;
	border-right:#f5af5e 2px dotted;
}

.news_list_title a { color:#222; }
.news_list_title a:hover { color:#DD5900; }



@media screen and (max-width:1200px) {
	.news_list li { display:block; padding:1px 0; }
	.news_list_day, .news_list_flag, .news_list_post, .news_list_title { display:block; float:left; }
	.news_list_day { width:120px; }
	.news_list_flag { border-left:#f5af5e 1px dotted; border-right:#f5af5e 1px dotted; }
	.news_list_post { border:none; }
	.news_list_title { width:100%; border-top:#f5af5e 1px dotted; }
}

.news_title { font-size:115%; color:#FFF; background:#8c7634; padding:10px 15px; border-radius:5px;  }
.news_info { margin: 1.5rem 0; }



/* schedule
-----------------------------------------------------------------------------------------*/
.schedule_list ul {
	width:100%;
	padding:0;
	margin:0;
	margin-top:-10px; 
}

.schedule_list li {
	display:table;
	width:100%;
	padding:10px 0;	
	border-bottom:#d4d4d2 3px dotted;
}

.schedule_list_p {
	display:table-cell;
	width:60px;
	vertical-align:middle;
}

.schedule_list_t {
	display:table-cell;
	width:calc(100% - 60px);
	vertical-align:middle;
}

.schedule_list_t a { color:#222; }
.schedule_list_t a:hover { color:#DD5900; }



/* download
-----------------------------------------------------------------------------------------*/
.download_title {
	width:100%;
	color:#8c7634;
	font-size:115%;
	font-weight:700;
	font-family:"Noto Sans TC", sans-serif;
}
.download_title i { padding-right:5px; font-size:130%; }

.download_list {
	border:#8c7634 3px solid;
	border-radius:10px;
	padding:25px 30px 20px 30px;
	background:rgba(255,255,255,0.7);
	-webkit-box-shadow: 0 1px 7px 1px rgba(0,0,0,0.25);
    -moz-box-shadow: 0 1px 7px 1px rgba(0,0,0,0.25);
    box-shadow: 0 1px 7px 1px rgba(0,0,0,0.25);
}

.download_list ul {
	width:100%;
	padding:0;
	margin:0;
	margin-top:-10px;
}
.download_list li {
	display:table;
	width:100%;
	padding:10px 0;	
	border-bottom:#d4d4d2 3px dotted;
}
.download_list li:nth-last-child(1) { border-bottom:none; }


@media screen and (max-width:640px) {
	.download_list { padding:1.5rem 1rem 1rem 1rem; } 
}

.download_area, .download_area- { display:flex; }
.download_area2_t {	float:left; width:50%; padding-left:10px; color:#8c7634; font-size:115%; font-weight:700; font-family:"Noto Sans TC", sans-serif; }
.download_area2_t i { padding-right:5px; font-size:130%; }
.download_area2_s { padding-left:calc(2% + 10px); }
.download_area2 {
	flex:1;
	width:48%;
	border:#8c7634 3px solid;
	border-radius:10px;
	padding:15px 30px;
	background:rgba(255,255,255,0.7);
	-webkit-box-shadow: 0 1px 7px 1px rgba(0,0,0,0.25);
    -moz-box-shadow: 0 1px 7px 1px rgba(0,0,0,0.25);
    box-shadow: 0 1px 7px 1px rgba(0,0,0,0.25);
}
.download_area2 li { border-bottom:#d4d4d2 3px dotted; padding:10px 0; }
.download_area2 li:nth-last-child(1) { border-bottom:hidden; }


.download_area3_t {	float:left; width:33.333333%; padding-left:10px; color:#8c7634; font-size:115%; font-weight:700; font-family:"Noto Sans TC", sans-serif; }
.download_area3_t i { padding-right:5px; font-size:130%; }
.download_area3_s { padding-left:calc(1.2% + 10px); }
.download_area3 {
	flex:2;
	width:31%;
	border:#8c7634 3px solid;
	border-radius:10px;
	padding:15px 30px;
	background:rgba(255,255,255,0.7);
	-webkit-box-shadow: 0 1px 7px 1px rgba(0,0,0,0.25);
    -moz-box-shadow: 0 1px 7px 1px rgba(0,0,0,0.25);
    box-shadow: 0 1px 7px 1px rgba(0,0,0,0.25);
}
.download_area3 li { border-bottom:#d4d4d2 3px dotted; padding:10px 0; }
.download_area3 li:nth-last-child(1) { border-bottom:hidden; }


.show_780 { display:none; }
.show_1200 { display:none; }


@media screen and (max-width:1200px) {
	.download_area- { display:block; }
	.download_area3_t { float:none; width:100%; }
	.download_area3_s { display:none; }
	.download_area3 { flex:none; width:100%; padding:0.5rem 1rem; }
	.show_1200 { display:block; }
}


@media screen and (max-width:780px) {
	.download_area { display:block; }
	.download_area2_t { float:none; width:100%; }
	.download_area2_s { display:none; }
	.download_area2 { flex:none; width:100%; padding:0.5rem 1rem; }	
	.show_780 { display:block; }
}



/* registration
-----------------------------------------------------------------------------------------*/
.reg_box {
	float:left;
	width:25%;
	text-align:center;
}
.reg_box img { width:100%; max-width:277px; }
.reg_box img:hover { opacity:0.6; }

@media screen and (max-width:540px) {
	.reg_box { width:50%; }
}

.reg_info1 { float:left; width:45%; }
.reg_info1 img { width:100%; padding-bottom:2rem; }
.reg_info2 { float:left; width:55%; padding:1rem 0 0 20px; }
.reg_info2 i { color:#d05d00; text-decoration:underline; }
.reg_info2 ul { width:100%; list-style:decimal!important; padding-left:2.5rem; }

@media screen and (max-width:1400px) {
	.reg_info1, .reg_info2 { float:none; width:100%; padding:0; }
	.reg_info1 img { width:80%; }
}
@media screen and (max-width:1000px) {
	.reg_info2 ul { padding-left:2rem; }
	.reg_info2 li { list-style:decimal!important;  }
}
@media screen and (max-width:900px) {
	.reg_info1 img { width:100%; }	
}



/* login
-----------------------------------------------------------------------------------------*/
.login { display:table; max-width:100%; margin:0 auto; margin-top:50px;   }
.login_info1 { display:table-cell; width:250px; vertical-align:middle; }
.login_info2 { display:table-cell; width:415px; vertical-align:middle; }
.login_info2 i { color:#ff963f; padding-right:5px; font-size:120%; }
.login_info2 a { color:#3b6a50; text-decoration:underline; }
.login_info2 a:hover { color:#ff963f; }
.login_info2 input { width:300px; }
.login_info3 { display:table-cell; width:200px; padding-left:30px; vertical-align:middle; }
.login_info3 .btn1 { width:100%; font-size:150%; border-radius:15px; padding:2rem 0;  }
.login_info3 .btn2 { width:100%; font-size:120%; border-radius:15px; padding:1rem 0; margin-top:15px;  }
.login_info4 { margin:1rem auto; width:870px; text-align:right; font-size:80%; }

@media screen and (max-width:1250px) {
	.login, .login_info1, .login_info2, .login_info3 { display:block; }
	.login_info1, .login_info2 { float:left; }
	.login_info2 { width:calc(100% - 250px); }
	.login_info2 input { width:calc(100% - 105px); }
	.login_info3 { width:100%; padding:0; }
	.login_info3 .btn1, .login_info3 .btn2 { width:45%; padding:15px; font-size:130%; margin:3rem 2.2% 0 2.2%;  }
	.login_info4 { width:100%; text-align:center; margin-top:1.5rem; font-size:100%;  }
}
@media screen and (max-width:1000px) {
	.login_info2 input { width:calc(100% - 125px); }
}

@media screen and (max-width:700px) {
	.login_info1 { width:35%; padding-right:2rem; }
	.login_info1 img { width:100%; }
	.login_info2 { width:65%; }
	.login_info2 input { width:calc(100% - 86px); }
	.no_700 { display:none; }
}

@media screen and (max-width:570px) {
	.login { margin-top:0; }
	.login_info1, .login_info2 { float:none; width:100%;  }
	.login_info1 { text-align:center; padding:0; margin-bottom:1rem; }
	.login_info1 img { width:35%; }
	.login_info2 a { font-size:85%; }
	.login_info3 .btn1, .login_info3 .btn2 { width:100%; padding:20px 0; font-size:130%; margin:0; margin-top:1rem;  }
}




/* form
-----------------------------------------------------------------------------------------*/
#flow { display:table; width:100%; max-width:1155px; margin:0 auto; margin-bottom:2rem;  }
.flow_1, .flow_2 { display:table-cell; vertical-align:middle; }
.flow_1 { width:23%;}
.flow_1 img { width:80%; max-width:210px; }
.flow_2 { width:77%; text-align:right; }
.flow_2 img { width:100%; }

@media screen and (max-width:780px) {
	#flow, .flow_1, .flow_2 { display:block; width:100%; }
	.flow_1 { text-align:center; padding-bottom:1rem; margin-top:-1rem;  }
	.flow_1 img { width:25%; }
}

@media screen and (max-width:480px) {
	.flow_1 img { width:35%; }
}


.fome_area { margin:0 auto; width:100%; max-width:1155px; }
.fome_area ul li { list-style:decimal; }


.fome_title {
	width:100%;
	padding-left:10px;
	color:#8c7634;
	font-size:115%;
	font-weight:700;
	font-family:"Noto Sans TC", sans-serif;
}
.fome_title i { font-size:130%;  }

.f_box {
	width:100%;
	border:#8c7634 10px solid;
	border-radius:10px;
	background:#fff;
	-webkit-box-shadow: 0 1px 5px rgba(0,0,0,0.4);
    -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.4);
    box-shadow: 0 1px 5px rgba(0,0,0,0.4);
}

.f_tbody {
	display:flex;
    flex-wrap:wrap;
}
.f_basic {
	flex:0 0 auto;
	display:flex;
    align-items:center;
	width:12.5%;
    min-height:45px;
	border-bottom:#8c7634 1px solid;
	padding:4px 8px;
	margin:0;
}

.f_td {
  flex-grow:1;
  flex-shrink:1;
  flex-basis:auto;
  width:87.5%;
}

.f_td1 {
  flex-basis:auto;
  width:12.5%;
}

.f_td2 {
  flex-grow:1;
  flex-shrink:1;
  flex-basis:auto;
  width:37.5%;
}

.f_td3 {
  flex-grow:1;
  flex-shrink:1;
  flex-basis:auto;
  width:62.5%;
}


.f_th { background:#3b6a50; color:#FFF; justify-content:center;  }

.f_box input[type="checkbox"] { width:1.5rem; height:1.5rem; vertical-align:middle; margin-right:3px; }
.f_box input[type="text"], .f_box input[type="password"] { width:100%; border:#b6b6b6 1px solid; border-radius:5px; padding:6px 5px; }
.f_box select { border:#b6b6b6 1px solid; border-radius:5px; padding:5px 2px; }
.f_box i { color:#ffbf00; }

.f_td li { display:inline-block; padding-right:10px; }


.show_480 { display:none; }


@media screen and (max-width:1400px) {
	.f_basic { flex:0 0 auto; width:140px; }
	.f_td { width:calc(100% - 140px); }
	.f_td1, .f_td3 { width:calc((100% - 240px) / 2); }
	.f_td2 { width:calc(100% - 140px); }
}

@media screen and (max-width:680px) {
	.f_td li { padding:5px 10px 5px 0; }
}

@media screen and (max-width:640px) {
	.f_td1, .f_td3 { width:calc(100% - 140px); }	
}

@media screen and (max-width:480px) {
	.no_480 { display:none; }
	.f_basic { flex:0 0 auto; width:80px; font-size:85%; letter-spacing:0;  }
	.f_td, .f_td1, .f_td2, .f_td3 { width:calc(100% - 80px); }
	.show_480 { display:block; }
}


.f_tbody ul { width:100%;}
.f_tbody ul li { border-bottom:#8c7634 1px solid; padding:15px; list-style-type:none; }
.f_tbody ol li { display:inline-block; padding:0; padding-right:10px; border:none;  }
.f_tbody ol li input[type="radio"] { vertical-align:middle; margin-right:5px;}
.f_tbody th input[type="radio"] { vertical-align:middle; margin-right:5px;}
.f_box textarea { width:100%; border:#b6b6b6 1px solid; border-radius:5px; padding:6px 5px; background:#eee; margin:5px 0; height:200px; }

@media screen and (max-width:1000px) {
	.f_tbody ol li { padding-top:5px; }
	.f_tbody ol li input[type="radio"] { width:25px; height:25px; }
	.f_tbody th input[type="radio"] { width:25px; height:25px; }
	.f_tbody th, .f_tbody td { padding:3px 0; }
}

#pop_content { width:90%; max-width:1200px; max-height:90%; overflow-y:auto; }
#pop_content h2 { text-align:center; font-weight:600; font-size:130%; border-bottom:#8c7634 1px solid; color:#3b6a50; margin-bottom:15px; padding-bottom:10px; }
#pop_content h3 { font-weight:600; font-size:120%; padding-bottom:5px; }
#pop_content p { padding-bottom:15px; }
#pop_content .example { padding:15px; background:#eee; }
#pop_content .example ol li { display:inline-block; padding-right:10px; }
#pop_content .example ul li { padding:3px 0; }
#pop_content input[type="radio"] { margin-right:3px; vertical-align:middle; }

@media screen and (max-width:1000px) {
	#pop_content input[type="radio"] { width:25px; height:25px; } 	
}




.form_left, .form_right { float:left; }
.form_left { width:32%; margin-right:3%; }
.form_right { width:65%; }

@media screen and (max-width:1500px) {
	.form_left { width:37%; }
	.form_right { width:60%; }
}
@media screen and (max-width:1300px) {
	.form_left, .form_right { float:none; width:100%; }
	.form_right { margin-top:2rem; border-top:#d2ccba 5px dotted; padding-top:2rem;  }
}


.f_basic2 {
	flex:0 0 auto;
	display:flex;
    align-items:center;
	width:33.3333333%;
    min-height:45px;
	border-bottom:#8c7634 1px solid;
	padding:4px 8px;
	margin:0;
}

.fl_th { width:80px; }

.fl_td {
	flex-grow:1;
	flex-shrink:1;
	flex-basis:auto;
	width:calc(100% - 80px);
}

.fl_th, .fr_th { background:#3b6a50; color:#FFF; justify-content:center;  }

@media screen and (max-width:1300px) {
	.fl_th { width:100px; }
	.fl_td { width:calc((100% - 200px) / 2); }
}
@media screen and (max-width:1100px) {
	.fl_th { width:120px; }
	.fl_td { width:calc(100% - 120px); }
}



.f_basic3 {
	flex:0 0 auto;
	display:flex;
    align-items:center;
	width:25%;
    min-height:50px;
	border-bottom:#8c7634 1px solid;
	padding:4px 8px;
	margin:0;
}
.fr_th, .fr_td { border-right:#8c7634 1px solid; }

.fr_th { width:120px; }

.fr_td {
	flex-grow:1;
	flex-shrink:1;
	flex-basis:auto;
	width:calc((100% - 120px) / 3);
}
.fr_td_top { background:#3b6a50; color:#FFF; justify-content:center; }

.f_basic4 {
	flex:0 0 auto;
	display:flex;
    align-items:center;
	width:25%;
    min-height:45px;
	border-bottom:#8c7634 1px solid;
	padding:4px 8px;
	margin:0;
}

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

@media screen and (max-width:780px) {
	.fr_th { width:95px; }
	.fr_td { width:calc((100% - 95px) / 3); }
}

@media screen and (max-width:480px) {
	.fr_th, .fr_td, .fl_th, .fl_td { font-size:85%; letter-spacing:0;  }
	.fr_th { width:65px; }
	.fr_td { width:calc((100% - 65px) / 3); }
	.fl_th { width:85px; }
	.fl_td { width:calc(100% - 85px); }
}



#fromxx {
	display:inline-flex;
	flex-wrap:wrap;
	width:100%;
}

#fromxx .th, #fromxx .td {
	position:relative;
	display:flex;
	align-items:center;
	align-content:stretch;
	border-right:#8c7634 1px solid;
	border-bottom:#8c7634 1px solid;
	padding:4px 8px;
    min-height:45px;
}
#fromxx .th { justify-content:center; }

#fromxx .th1 { background:#3b6a50; color:#FFF; width:150px; }
#fromxx .th2 { background:#3b6a50; color:#FFF; width:120px; }
#fromxx .td1 { background:#FFF; width:calc(100% - 150px); }
#fromxx .td2 { background:#FFF; width:calc((100% - 270px) / 2); }

@media screen and (max-width:1000px) {
	#fromxx .th1, #fromxx .th2 { width:170px; }
	#fromxx .td1, #fromxx .td2 { width:calc(100% - 170px); }
}





#fromxx2 {
	display:inline-flex;
	flex-wrap:wrap;
	width:100%;
}

#fromxx2 .th, #fromxx2 .td {
	position:relative;
	display:flex;
	align-items:center;
	align-content:stretch;
	border-right:#8c7634 1px solid;
	border-bottom:#8c7634 1px solid;
	padding:4px 8px;
    min-height:45px;
}
#fromxx2 .th { justify-content:center; }

#fromxx2 .th1 { background:#3b6a50; color:#FFF; width:170px; }
#fromxx2 .th2 { background:#3b6a50; color:#FFF; width:120px; }
#fromxx2 .td1 { background:#FFF; width:calc(100% - 170px); }
#fromxx2 .td2 { background:#FFF; width:calc((100% - 270px) / 2); }

@media screen and (max-width:1000px) {
	#fromxx2 .th1, #fromxx2 .th2 { width:190px; }
	#fromxx2 .td1, #fromxx2 .td2 { width:calc(100% - 190px); }
}



#fromxx3 {
	display:inline-flex;
	flex-wrap:wrap;
	width:100%;
}

#fromxx3 .th, #fromxx3 .td {
	position:relative;
	display:flex;
	align-items:center;
	align-content:stretch;
	border-right:#8c7634 1px solid;
	border-bottom:#8c7634 1px solid;
	padding:4px 8px;
    min-height:45px;
}
#fromxx3 .th { justify-content:center; }

#fromxx3 .th1 { background:#3b6a50; color:#FFF; width:170px; }
#fromxx3 .th2 { background:#3b6a50; color:#FFF; width:120px; }
#fromxx3 .td1 { background:#FFF; width:calc(100% - 170px); }
#fromxx3 .td2 { background:#FFF; width:calc((100% - 270px) / 2); }

@media screen and (max-width:1000px) {
	#fromxx3 .th1, #fromxx3 .th2 { width:190px; }
	#fromxx3 .td1, #fromxx3 .td2 { width:calc(100% - 190px); }
}




#fromxx4 {
	display:inline-flex;
	flex-wrap:wrap;
	width:100%;
}

#fromxx4 .th, #fromxx4 .td {
	position:relative;
	display:flex;
	align-items:center;
	align-content:stretch;
	border-right:#8c7634 1px solid;
	border-bottom:#8c7634 1px solid;
	padding:4px 8px;
    min-height:45px;
}
#fromxx4 .th { justify-content:center; }

#fromxx4 .th1 { background:#3b6a50; color:#FFF; width:170px; }
#fromxx4 .th2 { background:#3b6a50; color:#FFF; width:120px; }
#fromxx4 .td1 { background:#FFF; width:calc(100% - 170px); }
#fromxx4 .td2 { background:#FFF; width:calc((100% - 270px) / 2); }

@media screen and (max-width:1000px) {
	#fromxx4 .th1, #fromxx4 .th2 { width:190px; }
	#fromxx4 .td1, #fromxx4 .td2 { width:calc(100% - 190px); }
}




#fromxx6 {
	display:inline-flex;
	flex-wrap:wrap;
	width:100%;
}

#fromxx6 .th, #fromxx6 .td {
	position:relative;
	display:flex;
	align-items:center;
	align-content:stretch;
	border-right:#8c7634 1px solid;
	border-bottom:#8c7634 1px solid;
	padding:4px 8px;
    min-height:45px;
}
#fromxx6 .th { justify-content:center; }

#fromxx6 .th1 { background:#3b6a50; color:#FFF; width:170px; }
#fromxx6 .th2 { background:#3b6a50; color:#FFF; width:120px; }
#fromxx6 .td1 { background:#FFF; width:calc(100% - 170px); }
#fromxx6 .td2 { background:#FFF; width:calc((100% - 270px) / 2); }

@media screen and (max-width:1000px) {
	#fromxx6 .th1, #fromxx6 .th2 { width:190px; }
	#fromxx6 .td1, #fromxx6 .td2 { width:calc(100% - 190px); }
}




#fromxx29 {
	display:inline-flex;
	flex-wrap:wrap;
	width:100%;
}

#fromxx29 .th, #fromxx29 .td {
	position:relative;
	display:flex;
	align-items:center;
	align-content:stretch;
	border-right:#8c7634 1px solid;
	border-bottom:#8c7634 1px solid;
	padding:4px 8px;
    min-height:45px;
}
#fromxx29 .th { justify-content:center; }

#fromxx29 .th1 { background:#3b6a50; color:#FFF; width:170px; }
#fromxx29 .th2 { background:#3b6a50; color:#FFF; width:120px; }
#fromxx29 .td1 { background:#FFF; width:calc(100% - 170px); }
#fromxx29 .td2 { background:#FFF; width:calc((100% - 270px) / 2); }

@media screen and (max-width:1000px) {
	#fromxx29 .th1, #fromxx29 .th2 { width:190px; }
	#fromxx29 .td1, #fromxx29 .td2 { width:calc(100% - 190px); }
}




.big_font { font-size:120%; }
@media screen and (max-width:1000px) {
 .big_font { font-size:100%; }
}





/* pop
-----------------------------------------------------------------------------------------*/
#pop {
	margin:0 auto;
	width:360px;
	max-width:80%;
	background:#fbfcfa;
	border:#8c7634 5px solid;
	border-radius:8px;
	padding:15px 20px 25px 20px;
	text-align:center;
	-webkit-box-shadow: 0 1px 5px 1px rgba(0,0,0,0.44);
    -moz-box-shadow: 0 1px 5px 1px rgba(0,0,0,0.44);
    box-shadow: 0 1px 5px 1px rgba(0,0,0,0.44);
	
	position: relative;
    top:50%;
    transform:translateY(-50%);
}

#pop h1 {
	width:100%;	
	color:#ff525d;
	font-size:160%;
	font-family:"Noto Sans TC", sans-serif;
	margin-bottom:15px;
}

#pop .btn {
	font-size:18px;
	padding:5px 20px;
	border-radius:5px;
	margin-top:-10px;
}

@media screen and (max-width:1000px) {
	#pop h1 { font-size:140%; }
}


/* pop
-----------------------------------------------------------------------------------------*/
#pop41 {
	margin:0 auto;
	width:650px;
	max-width:80%;
	background:#fbfcfa;
	border:#8c7634 5px solid;
	border-radius:8px;
	padding:15px 20px 25px 20px;
	text-align:center;
	-webkit-box-shadow: 0 1px 5px 1px rgba(0,0,0,0.44);
    -moz-box-shadow: 0 1px 5px 1px rgba(0,0,0,0.44);
    box-shadow: 0 1px 5px 1px rgba(0,0,0,0.44);
	
	position: relative;
    top:50%;
    transform:translateY(-50%);
}

#pop41 h1 {
	width:100%;	
	color:#ff525d;
	font-size:160%;
	font-family:"Noto Sans TC", sans-serif;
	margin-bottom:15px;
}

#pop41 .btn {
	font-size:18px;
	padding:5px 20px;
	border-radius:5px;
	margin-top:-10px;
}

@media screen and (max-width:1000px) {
	#pop41 h1 { font-size:140%; }
}



/* pop
-----------------------------------------------------------------------------------------*/
#pop1 {
	margin:0 auto;
	width:650px;
	max-width:80%;
	background:#fbfcfa;
	border:#8c7634 5px solid;
	border-radius:8px;
	padding:15px 20px 25px 20px;
	text-align:center;
	-webkit-box-shadow: 0 1px 5px 1px rgba(0,0,0,0.44);
    -moz-box-shadow: 0 1px 5px 1px rgba(0,0,0,0.44);
    box-shadow: 0 1px 5px 1px rgba(0,0,0,0.44);
	
	position: relative;
    top:50%;
    transform:translateY(-50%);
}

#pop1 h1 {
	width:100%;	
	color:#ff525d;
	font-size:160%;
	font-family:"Noto Sans TC", sans-serif;
	margin-bottom:15px;
}

#pop1 .btn {
	font-size:18px;
	padding:5px 20px;
	border-radius:5px;
	margin-top:-10px;
}

@media screen and (max-width:1000px) {
	#pop1 h1 { font-size:140%; }
}



/* btn
-----------------------------------------------------------------------------------------*/
.btn1 { padding:10px 40px; margin-top:2rem; font-size:130%;	border-radius:10px; }
.btn-tw { margin-right:10px; margin-left:10px; }

@media screen and (max-width:640px) {
	.btn-tw { width:85%; }
}


.btn_g {
	display:inline-block;
	color:#FFF;
	letter-spacing:2px;
	text-shadow: 1px 1px #999, -1px -1px #318354;
	text-align:center;
	border:#FFF 2px solid;
    background: #6ba684; /* Old browsers */
    background: -moz-linear-gradient(top, #6ba684 0%, #5b9674 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #6ba684 0%,#5b9674 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #6ba684 0%,#5b9674 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6ba684', endColorstr='#5b9674',GradientType=0 ); /* IE6-9 */
	-webkit-box-shadow: 0 1px 5px 1px rgba(255,122,0,0.5);
    -moz-box-shadow: 0 1px 5px 1px rgba(255,122,0,0.5);
    box-shadow: 0 1px 5px 1px rgba(255,122,0,0.5);
}
.btn_g:hover {
	color:#bfffef;
	background: #5b9674; /* Old browsers */
    background: -moz-linear-gradient(top, #5b9674 0%, #6ba684 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #5b9674 0%,#6ba684 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #5b9674 0%,#6ba684 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5b9674', endColorstr='#6ba684',GradientType=0 ); /* IE6-9 */
}
.btn_g i { padding-right:5px; font-size:120%;vertical-align:text-bottom; }


.btn_o {
	display:inline-block;
	color:#FFF;
	letter-spacing:2px;
	text-shadow: 1px 1px #feb168, -1px -1px #cb6200;
	text-align:center;
	border:#FFF 2px solid;
    background: #ffb36b; /* Old browsers */
    background: -moz-linear-gradient(top, #ffb36b 0%, #ee8525 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ffb36b 0%,#ee8525 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ffb36b 0%,#ee8525 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb36b', endColorstr='#ee8525',GradientType=0 ); /* IE6-9 */
	-webkit-box-shadow: 0 1px 5px 1px rgba(255,122,0,0.5);
    -moz-box-shadow: 0 1px 5px 1px rgba(255,122,0,0.5);
    box-shadow: 0 1px 5px 1px rgba(255,122,0,0.5);
}
.btn_o:hover {
	color:#FFF;
    background: #ee8525; /* Old browsers */
    background: -moz-linear-gradient(top, #ee8525 0%, #ffb36b 100%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ee8525 0%,#ffb36b 100%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ee8525 0%,#ffb36b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ee8525', endColorstr='#ffb36b',GradientType=0 ); /* IE6-9 */
}
.btn_o i { padding-right:5px; font-size:120%;vertical-align:text-bottom; }



/* select
--------------------------------------------------------------*/
.select_area {
	float:left;
	width:calc((100% - 50px) / 2);
	background:#FFF;
	padding:10px;
}

.select_area select {
	width:100%;
}
.select_area .s_list { width:100%; height:390px; }
.select_area .s_list option { padding:7px; border-bottom:#999 1px solid;  }
.select_area .s_color { background:#3b6a50; color:#FFF; }
.select_area .s_color:hover { background:#ff9742; }

.select_area .s_list2 { width:100%; height:430px; }
.select_area .s_list2 option { padding:7px; border-bottom:#ccc 1px solid;  }
.select_area .s_color2:hover { background:#ffbf00; }

.select_arrow {
	float:left;
	width:50px;
	background:#FFF;
	text-align:center;
	font-size:30px;
	padding-top:180px;
}
.select_arrow a i { color:#3b6a50; }
.select_arrow a:hover i { color:#ff9742; }

.select_arrow_sp { display:none; }

@media screen and (max-width:1000px) {
	.select_area, .select_arrow, .select_sp { float:none; width:100%; }
	.select_arrow { padding-top:0; }
	.select_arrow_pc { display:none; }
	.select_arrow_sp { display:block; font-size:50px; }
}