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


body { 
	font:0.9em/1.5 Arial, Meiryo, "Meiryo UI", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif;
	letter-spacing:0.06em;
	color:#000;
	background:#565656;
}

@media screen and (max-width:1000px) {
	body { font-size:110%; }	
}

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


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


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


a { color:#005860; text-decoration:none; }
a:hover { color:#c04900; }
a:focus { background:rgba(255,0,0,0.30); }


input:focus, select:focus, textarea:focus {
    border-color:#FFF!important;
    box-shadow:0 0 8px 0 #cd4d00!important;
	color:#FFFFFF!important;
	background:#cd4d00!important;
}


input::-webkit-input-placeholder { color:#666; }
input:focus::-webkit-input-placeholder { color:rgba(255,255,255,0.8)!important; }
/* Firefox < 19 */
input:-moz-placeholder { color:#666; }
input:focus:-moz-placeholder { color:rgba(255,255,255,0.8)!important; }
/* Firefox > 19 */
input::-moz-placeholder { color:#666; }
input:focus::-moz-placeholder { color:rgba(255,255,255,0.8)!important; }
/* Internet Explorer 10 */
input:-ms-input-placeholder { color:#666; }
input:focus:-ms-input-placeholder { color:rgba(255,255,255,0.8)!important; }


.guide {
	position:absolute;
	top:0;
	left:3px;
	font-size:0.7em;
	color:#858585!important;
}


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



/* nav
-------------------------------------------------------------------------------------------------*/
#pc-nav {
	position:relative;
	width:100%;
	height:100px;
	background:#FFF;
	-webkit-box-shadow: 0 1px 5px 2px rgba(0,0,0,0.19);
    -moz-box-shadow: 0 1px 5px 2px rgba(0,0,0,0.19);
    box-shadow: 0 1px 5px 2px rgba(0,0,0,0.19);
	z-index:2;
}
#pc-nav .logo { float:left; padding-left:2%; }
#pc-nav .menu {
	position:relative;
	float:right;
	padding-left:100px;
	background:url(../img/menu-bg.png) left center no-repeat;
}
#pc-nav .menu i { padding-right:3px; }

#pc-nav .menu td, #pc-nav .menu th {
	width:180px;
	height:50px;
	font-size:95%;
	line-height:49px;
	text-align:center;
	vertical-align:middle;
}
#pc-nav .menu td a, #pc-nav .menu th a { display:block; color:#222; }
#pc-nav .menu td:hover { background:#cd4d00; color:#FFF; }
#pc-nav .menu td a:hover { background:#cd4d00; color:#FFF; }

#pc-nav .menu td { border:#ffae0c 1px solid; }
#pc-nav .menu th { border:#f9d68e 1px solid; }
#pc-nav .menu th a { background:#cd4d00; color:#FFF; }
#pc-nav .menu th a:hover, #pc-nav .menu th a:focus { background:#444; color:#ffaa00; }


#pc-nav .menu2 {
	width:900px;
}
#pc-nav .menu2 a {
	float:left;
	width:180px;
	height:50px;
	color:#222;
	font-size:95%;
	line-height:49px;
	text-align:center;
	border:#ffae0c 1px solid;
	border-top:none;
	border-right:none;
}
#pc-nav .menu2 a:hover, #pc-nav .menu2 a:focus { background:#cd4d00; color:#FFF; }
#pc-nav .menu2 .link { background:#cd4d00; color:#FFF; }
#pc-nav .menu2 .link:hover, #pc-nav .menu2 .link:focus { background:#444; color:#ffaa00; }


.sp_logo { position:fixed; left:2%; top:0; z-index:100; }


@media screen and (max-width:1400px) {
	#pc-nav .logo { width:280px; padding-top:10px; }
	#pc-nav .logo img { width:100%; }
	#pc-nav .menu td, #pc-nav .menu th { width:160px; font-size:86%; }
	#pc-nav .menu2 { width:800px; }
	#pc-nav .menu2 a { width:160px; font-size:86%; }
}

@media screen and (max-width:1200px) {
	#pc-nav { display:none; }
}


#sp_nav { display:none; }

@media screen and (max-width:1200px) {
	#sp_nav {
		display:block;
		width:100%;
		margin-top:-5%;
		margin-bottom:3%;
		-webkit-box-shadow: 0 3px 5px 1px rgba(255,104,0,0.4);
        -moz-box-shadow: 0 3px 5px 1px rgba(255,104,0,0.4);
        box-shadow: 0 3px 5px 1px rgba(255,104,0,0.4);
	}
    #sp_nav ul { width:100%; border:#ffae0c 1px solid; border-right:none; border-top:none; background:#FFF; }
	#sp_nav li { display:inline-block; width:calc((100% - 250px) / 6); border-right:#ffae0c 1px solid; border-top:#ffae0c 1px solid; padding:10px 0; }
	#sp_nav li:nth-child(5) { width:250px; }
	#sp_nav li a {
		display:block;
		text-align:center;
    }	
}

@media screen and (max-width:1000px) {
	#sp_nav ul { background:#cd4d00; }
	#sp_nav li { width:calc(100% / 4); }
	#sp_nav li:nth-child(5) { width:40%; }
	#sp_nav li:nth-child(6), #sp_nav li:nth-child(7) { width:30%; }
	#sp_nav li a { color:#FFF; }
} 

@media screen and (max-width:680px) {
	#sp_nav li:nth-child(5) { width:50%; }
	#sp_nav li:nth-child(6), #sp_nav li:nth-child(7) { width:25%; }
	#sp_nav { margin-bottom:6%; }
}

@media screen and (max-width:540px) {
	#sp_nav li { width:50%; }
	#sp_nav li:nth-child(5) { width:100%; }
	#sp_nav li:nth-child(6), #sp_nav li:nth-child(7) { width:50%; }
}


/* content
-------------------------------------------------------------------------------------------------*/
section {
	position:relative;
	width:100%;
	min-height:calc(100vh - 310px);	
	background:#f5f5f5;
}

#banner {
	width:100%;
	-webkit-box-shadow: 0 1px 5px 2px rgba(0,0,0,0.19);
    -moz-box-shadow: 0 1px 5px 2px rgba(0,0,0,0.19);
    box-shadow: 0 1px 5px 2px rgba(0,0,0,0.19);
}
#banner img { width:100%; }


#content {
	position:relative;
	width:100%;
	padding:2% 5% 4%;
}

#content_1400 {
	margin:0 auto; 
	width:100%;
	max-width: 1400px;
}


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



@media screen and (max-width:1250px) {
	#content { padding:4% 3%; }
}

@media screen and (max-width:1000px) {
	section { padding-top:57px; }
}

@media screen and (max-width:640px) {
	#content { padding:5%; }
}


.breadcrumb {
	width:100%;
	font-size:0.85em;
    letter-spacing:0;
	padding-bottom:15px;
}
.breadcrumb i { color:#cd4d00; }

.breadcrumb a { text-decoration:underline; }

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




/* home
-------------------------------------------------------------------------------------------------*/
#home {
	display:inline-flex;
	flex-wrap:wrap;
	width:100%;
}

#home .box {
	position:relative;
	align-items:stretch;
	align-content:stretch;
	text-align:center;
}

#home .content { width:52%; padding:3% 4% 0 4%; }

#home .header {
	width:48%;
	background:#565656 url(../img/home-title.jpg) center center no-repeat;
	background-size:cover;
}
#home .header img { display:none; }

#home h2 { text-align:center; padding-bottom:3%; }
#home h2 img { width:20%; max-width:151px; }


#flow {
	display:inline-flex;
	flex-wrap:wrap;
	width:100%;
	margin-bottom:3rem;
}
#flow .box {
	position:relative;
	align-items:stretch;
	align-content:stretch;
	width:43%;
	text-align:left;
	padding:1.2vw 1.5vw;
	background:#f5f5f5;
	border:#FFF 6px solid;
	border-radius:0.7vw;
	margin:3% 3.5%;
	-webkit-box-shadow: 0 3px 5px 1px rgba(255,104,0,0.4);
    -moz-box-shadow: 0 3px 5px 1px rgba(255,104,0,0.4);
    box-shadow: 0 3px 5px 1px rgba(255,104,0,0.4);
	
}

#flow .box .title {
	width:100%;
	font-family:'Noto Sans TC', sans-serif;
	font-size:1.17em;
	padding-bottom:8px;
	color:#9b6301;
	font-weight:500;
	border-bottom:#bbbbbb 1px dotted;
	margin-bottom:10px;
}

#flow .box .no {
	position:absolute;
	bottom:-1.9vw;
	right:4.5%;
	width:3.5vw;
	height:3.5vw;
	font-size:1.9vw;
	line-height:2.85vw;
	color:#FFF;
	border:#FFF 6px solid;
	border-radius:99em;
	text-align:center;
	font-weight:700;
	background:#cd4d00;
	-webkit-box-shadow: 0 3px 5px 1px rgba(255,104,0,0.4);
    -moz-box-shadow: 0 3px 5px 1px rgba(255,104,0,0.4);
    box-shadow: 0 3px 5px 1px rgba(255,104,0,0.4);
}


@media screen and (max-width:1250px) {
	#flow .box .title { font-size:1.12em; }
	#flow .box .no { right:2.5%; bottom:-2.5vw; width:4vw; height:4vw; font-size:2vw; line-height:3vw; border:#FFF 5px solid; }
}

@media screen and (max-width:1200px) {
	#home {	display:block; padding-top:57px; }
	#home .content { width:100%; margin-bottom:0; }
	#home .header { width:100%; margin-bottom:5%; }
	#home .header img { display:block; width:100%; }
	#home h2 img { width:40%; }
	#flow .box { border-radius:1.6vw; margin:4% 3.5%; }
	#flow .box .no { right:3%; bottom:-4.5vw; width:7vw; height:7vw; font-size:4vw; line-height:5.8vw; }
}

@media screen and (max-width:540px) {
	#flow .box { width:100%; border-radius:1.6vw; margin:25px 3.5%; padding:4vw; }
	#flow .box .no { right:3%; bottom:-30px; width:50px; height:50px; font-size:1.5em; line-height:40px; }
}
#home_news { min-height:25vh; }
#home_news ul {	width:100%; margin-bottom:20px; }
#home_news li {
	width:100%;
	border-bottom:#afafaf 1px dashed;
	padding:1vw 0;
	font-size:110%;
	text-align:left;
}
#home_news li .day { float:left; width:110px; color:#cd4d00; }
#home_news li a { float:left; width:calc(100% - 110px); color:#222; }
#home_news li a:hover { color:#cd4d00; }

#home_news .btn { width:100%; text-align:right; margin-bottom:6%; }
#home_news .btn a { color:#FFF; background:#cd4d00; padding:0.6vw 1vw; border-radius:5px; }
#home_news .btn a:hover { background:#444; color:#ffaa00; }

@media screen and (max-width:1000px) {
	#home_news li { font-size:100%; padding:2vw 0; }
	#home_news li .day, #home_news li a {float:none; width:100%; }
	#home_news .btn { margin-bottom:10%; }
	#home_news .btn a { padding:2vw 4vw; }
}

#news_info { border-bottom:#bbbbbb 1px dotted; padding-bottom:25px;  }
#news_info h3 { width:100%; font-size:130%; text-align:center; color:#9b6301; margin-top:30px; margin-bottom:10px; }
#news_info .day { background:#8f6d2f; color:#FFF; text-align:center; font-size:90%; padding:0.4vw 0; margin-bottom:2%; }
#news_info img { max-width:100%; }
#news_info p { padding-bottom:20px; word-wrap:break-word; }
#news_info a { color:#cd4d00; }
#news_info a:hover { text-decoration:underline; }
#news_info .dw { width:100%; }
#news_info h4 { color:#9b6301; font-size:110%; border-top:#bbbbbb 1px dotted; padding-top:25px; padding-bottom:10px; margin-top:20px; }
#news_info ol { width:100%; }
#news_info li { display:inline-block; margin-right:5%;  }
#news_info li a { display:block; color:#222; }
#news_info li a:hover { color:#cd4d00; }
#news_info ol i { color:#ffac3d; padding-right:3px; }


@media screen and (max-width:1000px) {
	#news_info .day { font-size:80%; padding:1vw 0; margin-bottom:5%; }
}






/* download
-------------------------------------------------------------------------------------------------*/
#download {
	display:inline-flex;
	flex-wrap:wrap;
	width:100%;
}

#download .box {
	position:relative;
	align-items:stretch;
	align-content:stretch;
	width:22%;
	margin-right:4%;
}
#download .box:nth-last-child(1) { margin-right:0!important; }

#download .box .title {
	width:100%;
	font-family:'Noto Sans TC', sans-serif;
	font-size:140%;
	color:#9b6301;
	font-weight:500;
}

#download .box p {
	width:100%;
	padding:15px 0;
	border-top:#bbbbbb 1px dotted;
	border-bottom:#bbbbbb 1px dotted;
	margin:10px 0;
}

#download .box ul { margin-left:20px; }
#download .box li { vertical-align:middle; padding:5px 0; }
#download .box li i { color:#ffaa00; padding-right:3px; font-size:150%; }


#download .box li:before {
	font-family:"Font Awesome 5 Free";
	content:"\f0a9";
	font-weight:bold;
	color:#ffaa00;
	margin-right:3px;
	font-size:100%;
	margin-left:-20.5px;
}


@media screen and (min-width:1765px) {
	.show_1765 { display:none; }
}


@media screen and (max-width:1250px) {
	#download .box { width:23.8%; margin-right:1.5%; }
	#download .box .title { font-size:120%; }
	#download .box p { font-size:90%; }
	#download .box ul { margin-left:18px; }
	#download .box li { font-size:85%; }
	#download .box li:before { margin-left:-18px; }
	.no_1250 { display:none; }
}

@media screen and (max-width:1000px) {
	#download .box { width:46%; margin:4% 2%; }
	#download .box ul { margin-left:21px; }
	#download .box li:before { margin-left:-21px; }
}

@media screen and (max-width:640px) {
	#download .box { width:100%; margin:5% 0; }
	.no_640 { display:none; }
}





/* FAQ
-------------------------------------------------------------------------------------------------*/
#faq {
	background:#f5f5f5 url(../img/faq-bg.png) right bottom no-repeat;
	background-size:60%;
}

#faq .box {
	float:left;
	width:45%;
	margin:0 2.5% 2.5%;
}

#faq .box .q {
	float:left;
	width:40px;
	height:40px;
	font-size:140%;
	line-height:40px;
	border-radius:99em;
	color:#FFF;
	text-align:center;
	margin-right:8px;
	background:#cd4d00;
}
#faq .box .title {
	float:left;
	width:calc(100% - 48px);
	font-family:'Noto Sans TC', sans-serif;
	font-size:130%;
	color:#9b6301;
	font-weight:500;
	padding-top:5px;
}

#faq .box p {
	border-top:#bbb 1px dotted;
	padding:15px 0;
	margin-top:10px;
}



@media screen and (max-width:1000px) {
	#faq { background-size:100%; }
	#faq .box {	float:none;	width:100%;	margin:5% 0; }
	#faq .box .title { padding-top:3px; font-size:120%; }
}


#faq .memo { padding-top:30px;  }
#faq .memo ul { width:100%; border:none; padding:0; margin:0; margin-top:15px; }
#faq .memo li { display:block; padding:5px 0; text-indent:-1.5rem; padding-left:1.5rem; }
#faq .memo li::before { font-family: "Font Awesome 5 Free"; content:"\f35a"; vertical-align:middle; margin-right:5px; color:#ffaa00; }







/* schedule
-------------------------------------------------------------------------------------------------*/
#schedule {
	background:#f5f5f5 url(../img/schedule-bg.png) right bottom no-repeat;
	background-size:36%;
}

#schedule .left {
	float:left;
	width:330px;
	margin-right:5%;
}

#schedule .left .no {
	float:left;
	width:33px;
	height:33px;
	font-size:140%;
	line-height:33px;
	border-radius:99em;
	color:#FFF;
	text-align:center;
	margin-right:8px;
	background:#cd4d00;
}
#schedule .left .title {
	float:left;
	width:calc(100% - 48px);
	font-family:'Noto Sans TC', sans-serif;
	font-size:130%;
	color:#9b6301;
	font-weight:500;
	line-height:33px;
}

#schedule .left input { padding:6px 10px; border:#ffaa00 1px solid; background:#FFF; border-radius:5px; margin-top:15px; width:168px; }
#schedule .left ::-webkit-input-placeholder { color:rgba(255,255,255,0); }
#schedule .left input::-moz-placeholder { color:rgba(255,255,255,0); }
#schedule .left input:-ms-input-placeholder { color:rgba(255,255,255,0); }

#schedule .left .btn { width:65px; padding:5px 0; }



#schedule .right {
	float:left;
	width:calc(100% - 330px - 5%);
}

#schedule .right .title { width:100%; background:#565656; color:#FFF; line-height:40px; text-align:center; font-size:110%; }
#schedule .right table { width:100%; }
#schedule .right th, #schedule .right td { border:#dedede 1px solid; padding:0.6vw; }
#schedule .right th { background:#8f6d2f; color:#FFF; }
#schedule .right td { background:#FFF; }


#schedule .right ul { width:100%; border:none; padding:0; margin:0; margin-top:30px; }
#schedule .right li { display:block; padding:5px 0; text-indent:-1.3rem; padding-left:1.5rem; }
#schedule .right li::before { font-family: "Font Awesome 5 Free"; content:"\f35a"; vertical-align:middle; margin-right:5px; color:#ffaa00; }



@media screen and (max-width:1000px) {
	#schedule .left, #schedule .right { float:none; width:100%; }
	
	#schedule .left input { padding:15px; margin-top:10px; width:calc(100% - 210px); }	
	#schedule .left .btn { width:auto; padding:13px; }
	#schedule .left .btn i { padding-right:0; font-size:150%; vertical-align:middle; }
	
	#schedule .right th, #schedule .right td { padding:10px; }
	#schedule .right th { min-width:60px; }
	
	#schedule .right li { text-indent:-1.5rem; }
}


@media screen and (max-width:640px) {
	#schedule .left { padding-top:10px; }
	#schedule .left input { width:calc(100% - 60px); }
	#schedule .left ::-webkit-input-placeholder { color:#555; }
    #schedule .left input::-moz-placeholder { color:#555; }
}


#c_search {
	display:table;
	width:100%;
	border-left:#aaa 1px dotted;
}
#c_search .box {
	display:table-cell;
	border-right:#aaa 1px dotted;
	padding:15px 0;
	padding-left:calc((33.3333333333% - 330px) / 2);	
}

#c_search .box .no {
	float:left;
	width:33px;
	height:33px;
	font-size:140%;
	line-height:33px;
	border-radius:99em;
	color:#FFF;
	text-align:center;
	margin-right:8px;
	background:#cd4d00;
}
#c_search .box .title {
	float:left;
	width:calc(100% - 48px);
	font-family:'Noto Sans TC', sans-serif;
	font-size:130%;
	color:#9b6301;
	font-weight:500;
	line-height:33px;
}

#c_search .box input { padding:6px 10px; border:#ffaa00 1px solid; background:#FFF; border-radius:5px; margin-top:15px; width:168px; }
#c_search .box ::-webkit-input-placeholder { color:rgba(255,255,255,0); }
#c_search .box input::-moz-placeholder { color:rgba(255,255,255,0); }
#c_search .box input:-ms-input-placeholder { color:rgba(255,255,255,0); }

#c_search .box .btn { width:65px; padding:5px 0; }


#schedule .info { width:100%; margin:50px 0; }

#schedule .info .title { width:100%; background:#565656; color:#FFF; line-height:40px; text-align:center; font-size:110%; }
#schedule .info table { width:100%; }
#schedule .info th, #schedule .info td { border:#dedede 1px solid; padding:0.6vw; }
#schedule .info th { background:#8f6d2f; color:#FFF; }
#schedule .info td { background:#FFF; }


#schedule .info ul { width:100%; border:none; padding:0; margin:0; margin-top:30px; }
#schedule .info li { display:block; padding:5px 0; text-indent:-1.3rem; padding-left:1.5rem; }
#schedule .info li::before { font-family: "Font Awesome 5 Free"; content:"\f35a"; vertical-align:middle; margin-right:5px; color:#ffaa00; }



@media screen and (max-width:1200px) {
	#c_search .box { padding-left:calc((33.3333333333% - 283px) / 2); }
	#c_search .box input { width:120px; }
}

@media screen and (max-width:1000px) {
	#c_search, #c_search .box { display:block; width:100%; border:none; }
	#c_search .box { border-bottom:#aaa 1px dotted; padding:20px 0; }
	#c_search .box input { padding:15px; margin-top:10px; width:calc(100% - 210px); }	
	#c_search .box .btn { width:auto; padding:13px; }
	#c_search .box .btn i { padding-right:0; font-size:150%; vertical-align:middle; }
	#schedule .info th, #schedule .right td { padding:10px; }
	#schedule .info th { min-width:60px; }
	#schedule .info li { text-indent:-1.5rem; }
}

@media screen and (max-width:640px) {
	#c_search .box { padding-top:10px; }
	#c_search .box input { width:calc(100% - 60px); }
	#c_search .box ::-webkit-input-placeholder { color:#555; }
    #c_search .box input::-moz-placeholder { color:#555; }
}

	
	
	




/* name book
-------------------------------------------------------------------------------------------------*/
#namebook { position:relative; padding:2% 3% 4%; }

#tab { width:100%; text-align:center; }
.tab {
	display:inline-block;
	width:25%;
	background:#4e4e4e;
	color:#ddd;
	text-align:center;
	line-height:45px;
	border-top-left-radius:8px;
	border-top-right-radius:8px;
	font-family:'Noto Sans TC', sans-serif;
	font-size:120%;
	font-weight:400;
	letter-spacing:0.2rem;
	margin:0 5px;
}	

.tab:hover {
	background:#cd4d00;
	color:#FFF;
}

#tab i { background:#727b00; color:#FFF; }
#tab i:hover {	background:#727b00; }

#tab_content {
	width:100%;
	border-radius:8px;
	padding:12px;
	background:#727b00;
}

#tab_content .title {
	width:100%;
	background:#4e4e4e;
	color:#FFF;
	text-align:center;
	font-family:'Noto Sans TC', sans-serif;
	font-size:110%;
	font-weight:400;
	letter-spacing:0.2rem;
	line-height:40px;
	border-top-left-radius:8px;
	border-top-right-radius:8px;
}


#tab_content .form { width:100%; padding:6px 0; text-align:center; background:#ddd; }
#tab_content .form select { padding:6px 10px; }



@media screen and (max-width:1000px) {
	.tab { font-size:100%; line-height:42px; width:30%; }
	#tab_content .title { font-size:95%; }
	.no_1000 { display:none; }
}

@media screen and (max-width:640px) {
	#namebook { padding:0; }
	.tab { width:calc(100% / 3); font-size:90%; line-height:50px; letter-spacing:0; margin:0; border-right:#ccc 1px solid; }
	#tab_content { border-radius:0; padding:0; }
	#tab_content .title { letter-spacing:0; background:#727b00; border-radius:0; padding:10px 0; }
	#tab_content .form { padding:0; }
    #tab_content .form select { width:100%; padding:15px 10px; background:#eee; }
}



/* form
-------------------------------------------------------------------------------------------------*/
#form {	position:relative; width:100%; padding:2% 4% 4%; }

#form .title {
	width:100%;
	color:#FFF;
	background:#444;
	text-align:center;
	font-family:'Noto Sans TC', sans-serif;
	font-size:120%;
	font-weight:400;
	padding:9px 0;
}

#form .info_line { padding:9px; background:#FFF; }

#form .info {
	float:left;
	padding:9px 10px;
	/*background:#FFF;*/
}
#form input[type="text"], #form select, #form input[type="date"] {
	border:#bbb 1px solid;
	border-radius:3px;
	background:#FFF;
	padding:8px;
	vertical-align:middle;
	width:100%;
}
#form .info select { padding:6.5px 8px; }
#form input[type="date"] { padding:6px 8px; }

.addr select { width:80px!important; margin-right:5px; }
.addr input { width:calc(100% - 170px)!important; }


#form .w1 { width:40%; }
#form .w2 { width:15%; }
#form .w3 { width:30%; }
#form .w4 { width:55%; }
#form .w5 { width:45%; }
#form .w6 { width:100%; }

#form .w33 { width:33%; }
#form .w33 { width:33%; }
#form .w34 { width:34%; }


#form ul { width:100%; border-top:#ccc 1px dashed; margin:15px 0 5px; }
#form li {
	display:inline-block;
	padding:10px;
}
#form li i { color:#cd4d00; }


#form input[type="radio"] { width:25px; height:25px; margin:5px; vertical-align:middle; }


@media screen and (max-width:640px) {
	#form { padding:0; }
	#form .info_line { padding:12px; }
	#form .info input[type="text"], #form .info select, #form .info input[type="date"] { padding:15px; }
	#form .w1, #form .w2, #form .w3, #form .w4, #form .w5 , #form .w33, #form .w34{ float:none; width:100%; }	
    .addr select { width:auto!important; }
	.addr input { width:100%!important; margin-top:6px; }
}


#form .t { background:#dfdfdf; }

#form .t .w1 { float:left; width:36%; }
#form .t .w2 { float:left; width:330px; }
#form .t .w3 { float:left; width:calc(64% - 330px); }
#form .t .w4 { float:left; width:64%; }
#form .t .w5 { float:left; width:36%; }
#form .t .w6 { width:100%; }

#form .t .w1, #form .t .w2, #form .t .w3, #form .t .w4, #form .t .w5 { border-bottom:#FFF 1px solid; }


#form .t .th {
	float:left;
	width:130px;
	color:#FFF;
	text-align:center;
	background:#444444;
	line-height:50px;
}
#form .t .td {
	float:left;
	width:calc(100% - 130px);
	padding:0 8px;
	line-height:50px;
}

#form .t .td select { width:auto; }

#form .t .iw { width:200px; }

#form .btn { width:28%; text-align:center; padding:12px 0; font-size:130%; }

.show_1000, .show_640 { display:none; }


@media screen and (max-width:1200px) {
	#form .t .w1 { width:calc(100% - 330px); }
	#form .t .w3 { float:none; width:100%; }
	#form .t .w4 { float:left; width:100%; }
	#form .t .w5 { float:left; width:100%; }
}

@media screen and (max-width:1000px) {
	#form .t { font-size:90%; }
	#form .t .th { width:90px; }
	#form .t .td { width:calc(100% - 90px); }
	#form .t .h1 { height:100px; }
	#form .btn { width:50%; }
	.show_1000 { display:block; }
}

@media screen and (max-width:840px) {
	#form .t .w1, #form .t .w2 { float:none; width:100%; }
}

@media screen and (max-width:640px) {
	.show_640 { display:block; }
	#form .t .h1 { height:150px; }
	#form .t .iw { width:150px; }
	#form .btn { width:80%; }
}



#form table { width:100%; }
#form td input, #form td select { width:auto; }
#form tr { border-top:#FFF 1px solid;  }
#form th { background:#444; color:#FFF; width:130px; vertical-align:middle; }
#form td { padding:8px; }

@media screen and (max-width:1000px) {
	#form th { width:90px; vertical-align:top; padding:12px 0; }
}




#form .memo { padding:30px 0; border-bottom:#ccc 1px dashed; }
#form .memo ul { width:100%; border:none; padding:0; margin:0;  }
#form .memo li { display:block; padding:5px 0; text-indent:-1.5rem; padding-left:1.5rem; }
#form .memo li::before { font-family: "Font Awesome 5 Free"; content:"\f35a"; vertical-align:middle; margin-right:5px; color:#ffaa00; }



@media screen and (max-width:640px) {
	#form .memo { margin:0 auto; width:90%; }
}


#form input[type="button"] {
	padding:10px 15px;
	color:#FFF;
	background:#8f6d2f;
	border:none;
	border-radius:5px;
	text-align:center;
	margin:10px;
}
#form input[type="button"]:hover {
	color:#FFF;
	background:#333;
}





/* thanks
-------------------------------------------------------------------------------------- */
#thanks {
	position:relative;
	width:100%;
	background:url(../img/thank-bg.png) left top no-repeat;	
	padding:5%;
}

.thanks {
	margin:0 auto;
	display:table;
	width:800px;
}

.thanks_photo {
	display:table-cell;
	width:272px;
}
.thanks_photo img { width:100%; }

.thanks_info {
	display:table-cell;
	font-size:140%;	
	line-height:180%;
	padding-left:5%;
	vertical-align:middle;
}
.thanks_info i { color:#cd4d00; font-weight:600; font-size:160%; }


@media screen and (max-width:1000px) {
	#thanks { background-size:70%; }
	.thanks { width:100%; }
	.thanks_photo { width:30%; }
	.thanks_info { font-size:100%; }
}

@media screen and (max-width:640px) {
	.thanks, .thanks_photo, .thanks_info { display:block; width:100%; }
	.thanks_photo, .thanks_info { text-align:center; padding-bottom:2rem; }
	.thanks_photo img { width:50%; }
}






/* sitemap
-------------------------------------------------------------------------------------- */
#sitemap .box { float:left; }

#sitemap .box ul {
	list-style:disc;
	padding-left:1.5rem;
	border-bottom:#bbb 1px dashed;
	padding-bottom:20px;
	margin-bottom:20px;
}

#sitemap .info { width:calc(100% - 340px); padding-right:5%; padding-top:1.5rem; }


.sitemap { display:table; width:340px; }
.sitemap .bb { display:table-cell; vertical-align:middle!important; }
 
.sitemap .btn {
	display:inline-block;
	color:#323600!important;
	border-radius:5px;
	background:#c3ca69;
	text-align:center;
    padding:10px 20px;
	margin:10px 0;
	vertical-align:middle!important;
}
.sitemap .btn:hover, .sitemap .btn:focus {
	color:#FFF!important;
	background:#333;
}


.sitemap .line {
    display:table-cell;
	width:51px;
	height:367px;
	background:url(../img/map-line2.png) center right no-repeat;
}


@media screen and (max-width:1000px) {
	#sitemap .box { float:none; width:100%; }
	.sitemap { margin:0 auto; }
	.sitemap .line { height:397px; }
}


/* data
-------------------------------------------------------------------------------------- */
.data_title {
	float:left;
	width:140px;
	color:#1c5a6e;
	font-size:180%;
	font-family:'Noto Sans TC', sans-serif;
	font-weight:600;
	border-right:#bbb 1px dashed;
	padding:0 50px;
}

.data_info {
	float:left;
	width:calc(100% - 140px);
	padding-left:50px;
}


@media screen and (max-width:1000px) {
	.data_title, .data_info { float:none; width:100%; }
	.data_title { font-size:150%; border-right:none; border-bottom:#bbb 1px dashed; padding:0; text-align:center; padding-bottom:1.5rem; } 
	.data_info { padding:1.5rem 0;}
}




/* group
-------------------------------------------------------------------------------------- */
#g_list {
	display:inline-flex;
	flex-wrap:wrap;
	width:100%;
}

#g_list .box {
	position:relative;
	align-items:stretch;
	align-content:stretch;
	width:22%;
	margin:1.5%;
	border:#ccc 1px solid;
	border-radius:8px;
	background:#eee;
	-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.2);
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}
#g_list .box:hover { background:#cd4d00; color:#FFF; }
#g_list .box:focus { background:#cd4d00; color:#FFF; }

#g_list .box i { color:#FF8E00; padding-right:5px; }

#g_list .box .title {
	background:#333;
	padding:10px;
	color:#FFF;
	border-top-left-radius:8px;
	border-top-right-radius:8px;
}

#g_list .box .info {	
	width:100%;
	padding:15px 20px;
}

.g_info {
	width:100%;
	background:#fbfbfb;
	padding:20px;
}
.g_info ul { margin-top:15px; }
.g_info li { display:inline-block; margin-right:20px; color:#7c5610; padding:5px 0;; }
.g_info li i { color:#929b25; padding-right:3px; }


@media screen and (max-width:1500px) {
	#g_list .box { width:30%; }
}

@media screen and (max-width:1000px) {
	#g_list .box { width:47%; margin:2% 1.5%; }
}

@media screen and (max-width:640px) {
	#g_list .box { width:100%; margin:2% 0; }
}



/* footer
-------------------------------------------------------------------------------------- */
footer {
	position:relative;
	font-size:0.8em;
	color:#e0e0e0;
	padding:45px 5vw;
	background:#565656;
	letter-spacing:0.12em;
	line-height:1.7em;
}
footer a { color:#ffc44e; }
footer a:hover { color:#FFF; }

footer .right {
	position:absolute;
	bottom:45px;
	right:5vw;
	text-align:right;
}

.footer_home { margin-top:-6px; }

@media screen and (max-width:1000px) {
	footer, footer .right { text-align:center; font-size:0.7em; }
	footer .right { position:static; padding-top:40px; }
	.footer_home { margin-top:0; }
}




/* btn
-------------------------------------------------------------------------------------- */
.btn_brown {
	display:inline-block;
	color:#FFF!important;
	border-radius:5px;
	background:#8f6d2f;
	text-align:center;
}
.btn_brown:hover,.btn_brown:focus {
	color:#FFF;
	background:#333;
}
.btn_brown i { color:#ffd130; padding-right:3px; }

.btn_b {
	width:40%;
	font-size:130%;
	padding:30px 5px;
	margin:50px 10px;
	line-height:200%;
}
@media screen and (max-width:1000px) {
	.btn_b { width:45%; margin:10px; }
}
@media screen and (max-width:540px) {
	.btn_b { width:90%; margin:10px; }
}
.btn_b i { font-size:200%; }