@charset "utf-8";
/* CSS Document */

/*****首頁加外框******/

	header {
		padding: 10px 0 2px;
	}
	
	#footer_frame,.rightarrowclass,.headerLink{
		display: none;
	}
	.footer .container {
		border-top: none;
	}
	
	.footer .container>div{
		float:inherit;
		text-align: center;
	}
	
	.overflow_headerLink{
		display: block;
		position: fixed;
		z-index: 999;
		top: 10px;
		left: 10px;
	}
	.overflow_headerLink .certificateLogin{
		width: 100%;
		background: #fff;
		display: block;
		position: fixed;
		top: 70px;
		left: 0;
		padding: 0 10px;
    	line-height: 50px;
		font-size: 18px;
    	font-weight: bold;
		text-align: center;

	}
	.overflow_headerLink .word{
		display: none;
	}
	
	/*menu*/
	.menuBar {
		background-color: none;
		background-image:none;
		height: auto;
		margin: 0;
    	display: block;
	}
	#main-menu > li a span {
		display: block;
	}
	.mobileMenu{
		display: block;
	}
	#main-menu > li a img{
		display: none;
	}
	.sub-arrow{
		color: #fff!important;
	}
	#menu{
		width:100%;
		margin-left: 0%;
	}
	header.sticky nav a {
		padding: 8px;
	}
	a:focus, input:focus {
		outline: none;
	}
	.sm-blue a, .sm-blue a:hover, .sm-blue a:focus, .sm-blue a:active {
		padding: 10px 20px;
		padding-right: 58px;
		border-bottom:1px #fff solid;
		color: #000;
		font-size: 18px;
		font-weight: bold;
		line-height: 23px;
		text-decoration: none;
		background: #f7f7f7;
	}
	.sm-blue > li:first-child > a, .sm-blue > li:first-child > :not(ul) a {
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		-ms-border-radius: 0;
		-o-border-radius: 0;
		border-radius: 0;
	}
	#menu {
		background: none;
		position: fixed;
		top: 62px
	}
	.nav > li {
		float: none;
	}
	.nav > li > .parent {
		background-position: 95% 50%;
	}
	.nav li li .parent {
		background-image: url("../img/downArrow.png");
		background-repeat: no-repeat;
		background-position: 95% 50%;
	}
	.nav ul {
		display: block;
		width: 100%;
	}
	.nav > li.hover > ul, .nav li li.hover ul {
		position: static;
	}
	.icon_font {
		display: block;
		text-align: left;
	}
	.icon_pic {
		display: none
	}
	.toggleMenu {
		display: block;
		position: fixed;
		top: 7px;
		right: 0;
		z-index: 3;
		padding: 10px;
	}
	.menu_bg {
		background:rgba(0,0,0,0.6);
		width: 100%;
		position: fixed !important;
		top: 70px;
		bottom: 0 !important;
		z-index: 99;
		left: 0;
	}
	.scrollbar_menu {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		overflow-x: hidden;
		overflow-y: auto;
		top: 120px !important;
	}
	.top_link_show {
		position: fixed;
		left: 0;
		z-index: 7;
		top: 10px;
		display: block !important;
		margin-right: 60px;
	}
	.top_link_show .top_text{
		background: none;
		color: #333;
		line-height: 20px;
	}
	.top_link_show .top_text a{
		color: #333;
	}
	.top_link_show .search {
		left: 10px;
		display: block;
		position: relative;
		top: 0;
	}
	.overflow {
		overflow: hidden;
	}
	.sticky {
		padding-top: 0;
		box-shadow: none;
	}
	.gif {
		display: none;
	}
	.search_a {
		float: left;
	}
	.sm-blue > li:hover a:before, .sm-blue > li:hover a:after , .sm-blue > li.focus a:before ,.sm-blue > li.focus a:after { 				width:0;
	}
	#menu .sm-blue a{
		padding: 0 10px;
		line-height: 42px;
		border-bottom: 1px solid #fff;
		text-align: center;
	}
	#menu2{
		width: 100%;
	}
	.sm-blue>li {
		padding: 0!important;
	}
	#main-menu > li a span {
		margin-top: 0!important;
	}
	#main-menu > li a span.sub-arrow {
		display: block;
		margin-top: -15px!important;
	}
	/*end menu*/
	
	.searchArea{
		width: 100%;
	}
	
	#marquee {
		height: 40px;
		width: 100%;
	}
	#marquee ul{
		padding: 0;
	}
	#marquee ul li {
		line-height:inherit; 
		margin-bottom: 15px;
	}
	
	.logo{
		display: block;
		max-width: 300px;
		margin-bottom: 5px;
	}
	.logo img{
		width: 100%;
	}

	.m-search{
		display: block;
		position: fixed;
		top: 15px;
		right: 55px;
		z-index: 3;
		padding: 10px;
	}
	
	.m-searchArea .search{
		width: calc(100% - 40px);
		display: inline-block;
		margin-right: 10px;
	}
	
	.search-bg{
		display: none;
		background: rgba(0,0,0,0.7);
		width: 100%;
		position: fixed !important;
		top: 0;
		bottom: 0 !important;
		z-index: 2;
		left: 0;
	}
	#marquee a {
		font-size: 14px;
	}
	
	.word a {
		background: rgba(251,216,106,0.6);
	}
	.word a.active, .word a:hover {
		background: rgba(251,216,106,1);
	}
	
	.indexBox > a {
		width: calc((100% - 40px)/ 2);
		min-height: 140px;
	}
	.indexBox > a:nth-child(4n){
		margin-right: 10px;
	}
	.indexBox > a:nth-child(4n+1){
		margin-left: 10px;
	}
	
	.linkArea a {
		width: calc(100% / 3);
		margin-bottom: 20px;
	}

	.index-pic .search {
		display: none;
	}
	
	.index-pic h2 {
		display: none;
	}
	
	.searchAreaHome{
		display: none;
	}
.homeContent {
    background: #fff;
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    padding: 20px 10px;	
    margin-bottom: 60px;
}



@media screen and (max-width: 480px) {
	.container {
    padding-right: 10px;
    padding-left: 10px;
    margin-right: auto;
    margin-left: auto;
}
	.indexBox > a {
		width: 100%;
	}
	.indexBox > a{
		margin: 0 0 20px!important;
	}
	.linkArea a {
		width: calc(100% / 2);
		margin-bottom: 10px;
	}
	
	.index-pic {
		padding: 10px 10px 0;
		border-radius:0;
	}

	
	.index-pic h2 {
		font-size: 22px;
	}
	.index-picArea .container{
		padding: 0;
	}
	
	.logo {
		width: calc(100% - 85px);
		padding: 8px 0;
	}
	.scrollbar_menu {
    top: 151px !important;
}

.certificateLogin a {
    display: inline-block;
}

.overflow_headerLink .certificateLogin {
    line-height: 40px;
    font-size: 16px;
}

}

/*****首頁加外框結束******/
.leftArea,.rightArea,.fieldArea .leftArea,.fieldArea .rightArea{
	width: 100%;
	text-align: left;
	padding: 0 5px;
	margin-bottom: 5px;
}
.leftArea .required:after {
    position: relative;
    top: 0;
}
.rightArea{
	padding-bottom: 10px;
}
.fieldArea{
	width: 100%;
}
.fieldArea {
    padding: 15px 10px;
}
.fieldArea table td{
	display: block;
	text-align: left!important;
}

.input-mini,.input-small,.input-medium,.input-large{
    width: 100%;
}
.m-small{
	width: 20%!important;
}
.m-medium{
	width: 50%!important;
}
.m-large{
	width: 80%!important;
}
.m-lefts{
	float: left;
}

.newOne button {
    right: 5px;
    top: 5px;
    font-size: 16px;
}
.singleColumn button {
    right: 0;
    top: 0;
}


.inbox_left{
	width: 100%;
	text-align: left;
}
.inbox_right{
   width: 100%;
}
.inbox_left .required:after{
	 position: relative;
    top: 0;
}
.inbox_outer{
	width: 100%;
}
.root{
	display: none;
}
/******申辦服務分類******/
.tab_obox{
	width: 100%;
    border-bottom: 2px solid #fbd86a;
}
#myTab.nav-tabs {
    /*border-bottom: 2px solid #fbd86a;*/
    padding-left: 0%;
    padding-right: 0%;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus {
    border: 0px;
}
/** 申辦項目說明小字在手機板隱藏 20210219 By Tony **/
.divTableCell.tb_cell >span.font_s {
    display: none;
}
/** 申辦項目說明小字在手機板隱藏 20210219 By Tony **/

/** 申辦項目說明字體 20210219 By Tony **/
element.style {
    font-size: 16px;
}
.divTable.sch_tbout >.divTableBody >.divTableRow >.divTableCell.text-center {
    text-align: center;
}
/** 申辦項目說明字體 20210219 By Tony **/
.type_view{
	font-size: 18px!important;
    line-height: 40px;
    padding: 0px 5px;
    font-weight: bold;
    border: 0px;
    width: calc( 100% / 3 );
}
.type_view.active >a{
	background-color: #FBD86A!important;
    padding: 20px;
	font-weight: bold;
	color: #000!important;
	border: 0px;
}
.type_view >a{
	background-color: #FEF7E2!important;
    border-radius: 4px 4px 0 0;
    padding: 20px;
	font-weight: bold;
	color: #000;
}
.nav>li>a{
	padding: 10px;
	border: 0px;
	text-align: center;
	}
.tab-content{
	padding:40px 20px;
	background-color: #F7F7F7;
	overflow: hidden;
}

.content_box{
    border-radius: 10px;
	background-color: #fff;
    width: 100%;
    float: inherit;
    padding: 20px 15px;
    font-size: 20px;
    font-weight: bold;
    box-shadow: 1px 2px 8px #dedede;
    height: 126px;
    margin-right: 12px;
    margin-bottom: 25px;
}
.content_box:hover, .content_box:focus{
	border: 2px solid #fbd86a;
	cursor: pointer;
}
.box_itemname{
	border-bottom: 2px solid #fbd86a;
	color: #000;
    padding-bottom: 5px;
}
.box_itemnumber{
	color: #000;
}
.contbox_description{
	font-size: 16px;
	padding-top: 15px;
}
/****送件流程*****/
.step_outer{
	clear: both;
    margin: 0px auto;
    padding: 15px 0px 5px;
    box-sizing: border-box;
    display: table;
    text-align: center;
}
.step_box{
	width: 70px;
	float: left;
    position: relative;
	text-align: center;
}
.step_circle{
	border-radius: 50%;
	width: 34px;
	height: 34px;
	line-height: 28px;
	text-align: center;
	color: #000;
	font-weight: bold;
	border: 2px solid #FBD86A;
    margin: 10px auto;
	background-color: #fff;
}
.step_box >.step_circle::after{
	width: 20px;
	height: 2px;
	background-color: #FBD86A;
	display: block;
	content: "";
	position: absolute;
	top: 25px;
	right: 0;
	z-index: 0;
}
.step_box >.step_circle::before{
	width: 20px;
	height: 2px;
	background-color: #FBD86A;
	display: block;
	content: "";
	position: absolute;
	top: 25px;
	left: 0;
	z-index: 0;
}
.step_hilight{
	background-color: #FBD86A;
}
.step_box:first-child >.step_circle::before{
	background-color: #fff;
	height: 2px;
	opacity: 0;
}
.step_box:last-child >.step_circle::after{
	background-color: #fff;
	height: 2px;
	opacity: 0;
}


.flow_title{
	font-size: 24px;
	font-weight: bold;
	padding: 30px 0px 10px  0px;
}
.nobg{
	background-color: transparent;
	border: 3px solid #FBD86A;
	margin-left: 0px;
	margin-top: 20px;
	margin-bottom: 20px;
}
.terms_text{
	line-height: 28px;
	margin-bottom: 30px;
}
.btn-sendOut{
	width: 100%;
}
.text-center >.btn-sendOut{
	width: 100%;
}
.divTable {
    display: table;
    width: 100%;
    border-radius: 0px;
   border: 0px;
    margin-bottom: 30px;
}
.m_100pt{
	clear: both;
	width:100%;
	box-sizing: border-box;
    display: block;
	padding: 10px;
}
/*.m_100pt:nth-child(5n+1) {
    background-color: #eee!important;
}*/

.divTableCell, .divTableHead {
    border: none;
    display: block;
    padding: 5px 10px;
    border-bottom: 0px;
    vertical-align: middle;
}
.divTableRow {
    margin-bottom: 30px;
	/*display: block;*/
}
.divTableCell .text-center{
	display: none;
}
.divTableCell.text-center.course_num {
    text-align: left;
}
.course_num{
	
}
.course_num::before{
	content: "課程編號";
    text-align: left;
    display: block;
    float: left;
    padding-right: 10px;
	
}
.course_fee{
	
}
.course_fee::before{
	content: "費用 (元)";
    text-align: left;
    display: block;
    float: left;
    padding-right: 10px;
}
.row_detail{
    text-align: left;
}
.row_detail >a img {
    margin-top: -1px;
    display: block;
}
.row_detail::before{
	content: "詳細資料";
    text-align: left;
    display: block;
    float: left;
    padding-right: 10px;
}
.signbg {
    width: 100%;
    word-break: keep-all;
}
.pagination-lg>li>a, .pagination-lg>li>span {
    padding: 10px 10px;
    font-size: 18px;
}

#myTab.nav-tabs {
    width: 100%;
    margin: 0 auto;
}
.tab-content {
    padding: 25px 10px;
    width: 100%;
}
.nav > li {
   width: calc( 100% / 3);
    text-align: center;
    margin: 0px;
    float: left;
}

.type_view.active >a {
    background-color: #FBD86A!important;
    padding: 10px;
    font-weight: bold;
    color: #000!important;
    border: 0px;
}

.divTable.sch_tbout >.divTableBody >.divTableRow >.divTableCell {
    border: none;
    padding: 10px;
    text-align: left;
    overflow: hidden;
}
.divTable.sch_tbout >.divTableBody >.divTableRow{
    padding: 10px 0px;
    margin-bottom: 0px;
}
.divTableRow.Heading.search_listbg {
    display: none;
}
.wbg{
	background-color: #fff;
}
.Heading * {
    font-size: 15px!important;
}
h2.ft_bold {
    font-size: 20px;
}
.m_hide{
	display: none!important;
}
.pc_hide{
    display: block!important;
    font-weight: bold;
    font-size: 18px;
    /*padding: 0px 10px!important;*/
}

.mnopd{
	padding: 0px!important;
}

/******黃底色標題 白底色內容區塊*************/
.yw_box_outer {
    width: 100%;
	margin-bottom: 0px;
}
.yw_box{
	margin-right: 0px;
	margin-bottom: 25px;
	width: 100%;
}
.yw_boxtitle{
	font-size: 20px;
	padding: 10px;
	margin-bottom: 10px;
}
.yw_box ul {
    padding: 0px 10px;
}
.yw_box ul li{
	list-style: none;
	font-size: 18px;
	font-weight: bold;
    line-height: 48px;
}

h2.ft_bold {
    clear: both;
    margin: 20px 0px;
}
.mtxt_center{
	text-align: center;
    word-break: keep-all;
}

.ct_service{
	text-align: center;
}

.lince_login{
	width: 100%;
}

input.btn.btn-sendOut {
	margin: 0px;
    width: 100%;
	margin-bottom: 10px;
}

input.btn.btn-sendOut.nobg,button.btn.btn-sendOut.nobg {
	margin: 0px;
    width: 100%;
	margin-bottom: 10px;
}
input.btn.btn-printMail {
	margin: 0px;
   width: 100%;
	margin-bottom: 10px;
}

/***日曆****/
.cal_divTable{
	display: table;
	width: 100%;
    border-radius: 8px;
    overflow: hidden;
	margin-bottom: 20px;
}
.cal_divTableRow {
	display: table-row;
}
.cal_divTableHeading {
	background-color: #EEE;
	display: table-header-group;
}
.cal_divTableCell, .cal_divTableHead {
	border: 1px solid #999999;
	display: block;
	padding: 3px 10px;
	height: inherit;
	max-height: auto;
    word-break: break-word;
    width:100%;
	
}
.cal_divTableCell:first-child, .cal_divTableCell:last-child{
	border-radius: 10px;
	
}
.cal_divTableHeading {
	background-color: #EEE;
	display: table-header-group;
	font-weight: bold;
}
.cal_divTableFoot {
	background-color: #EEE;
	display: table-footer-group;
	font-weight: bold;
}
.cal_divTableBody {
	display: table-row-group;
}
.cal_reserved{
	clear: both;
	width: 100%;
	background-color: transparent;
    display: block;
	padding: 5px;
	margin:2px 0px 5px 0px;
	text-align: center;
}
.cal_empty{
	clear: both;
    width: 100%;
    background-color: #FBD86A;
    border-radius: 8px;
    display: block;
    padding: 5px;
    margin: 2px 0px 5px 0px;
    text-align: center;
}
.cal_empty a:link, .cal_empty a:visited{
	color: inherit;
	text-decoration: none;
}
.cal_empty a:hover{
	color: #inherit;
	text-decoration: none;
}
.cal_empty:hover{
	background-color: #fef7e1;
	text-decoration: none;
	cursor: pointer;
}
.cal_week{
	display: none;
}
.cal_date{
	width: 35px;
    text-align: left;
    padding: 0px;
    float: left;
    margin: 5px 0px;
}
.open_reservation{
	
}
.cal_divTableCell:not(.open_reservation){
	display: none;
}
.cal_unit{
	width: 100%;
	font-size: 20px;
	margin-left: 0px;
	margin-right: 0px;
	font-weight: bold;
}
.cal_month {
    margin-left: 0px;
}
.week_dsplay{
	display: block;
    margin: 5px 0px;
	float: left;
}
/***日曆結束**/


/*1907*/
.mobileHide{
	display: none;
}
.step_small.step_box {
    width: 55px;
}
.step_small.step_box >.step_circle::before,.step_small.step_box >.step_circle::after{
    width: 13px;
}
/*end 1907*/


.home{
	margin-top: 90px!important;
}
.pc_login{
	display: none;
}
.login_two.mobile_login{
	width: 100%;
}


/*202002*/
.usedList{
	width: 100%;
}

.tab_used .nav > li {
    width: calc( 100% / 3 );
    margin: 2px 0px;
}

.tab_used .type_view {
    font-size: 14px!important;
}


.tab_used .nav>li>a, .tab_used .type_view.active >a {
    padding: 15px 1px;
}

/*20200513 量化數據*/
.data_graph > div {
   color: #1d3f59;
   display: block;
}
.data_number {
    display: inline-block;
    font-size: 30px;
}
.data_number span {
    font-size: 18px;
}
.data_graph {
    margin-bottom: 20px;
}
@media screen and (max-width: 480px) {
	.explanation_up{
		width: 255px;
	}
	.explanation{
		display: block;
	}
}
/*end 20200513 量化數據*/