@charset "utf-8";
body {font:normal 16px/100% Arial, Helvetica, "微軟正黑體";color:#636363;background-color:#fff;margin:0;padding:0;}
html, body {height: 100%;}
a{text-decoration:underline; color:#067288;}
a:hover{ text-decoration:none;}
:hover {transition:all 0.3s;-moz-transition:all 0.3s;-webkit-transition:all 0.3s;}
div, p, span, ul, ol, li, h1, h2, h3, h4, h5, h6, input, table, td, th, img {margin: 0;padding: 0;border: none;}
img {border: none;}
ul, li {list-style: none;}
.fL {float:left;}
.fR {float:right;}
.tL {text-align:left;}
.tR {text-align:right;}
.tC {text-align:center;}
.clr {clear:both;}

h2, h3, h4, h5 {font-weight:normal;}
h2 {font-size:1.75rem;line-height:36px;}
h3 {font-size:1.5rem;line-height:2em;}
h4 {font-size:1.3125rem;line-height:1.5em;}
h5 {font-size:1.125rem;line-height:1.5em;}
h6{font-size:1rem;}
p.bb{ font-weight:bold; color:#2e2e2e;}
span.small{ font-size:0.875rem; color:#666; line-height:16px;}
/*form元素設定*/
input[type="text"], textarea, select {font: 14px/140% Arial, "微軟正黑體";color: #636363; width:100%;}
select{ border:none; background:url(../images/icon_select_allow.png) right center no-repeat;padding:0 5px;background-image:none \9;border:none;-webkit-appearance: none; /*Chrome ios*/-moz-appearance: none; /*FF*/appearance: none;/*CSS3 ios*/}
/*wrapper*/
.wrapper{ background:url(../images/bg_top.jpg) center 0 no-repeat;}
.wrapper.type1{ background:url(../images/bg_index.jpg) center 0 no-repeat; background-size:cover;}
.block{margin:0 auto}


/*無障礙導盲:::*/
.sr-only {position: absolute; z-index: 1000000; margin: 0.4rem; text-decoration: none; color: #333; border: 0; width: 0; height:0; overflow: hidden; font-weight: bold;}
.sr-only:active, .sr-only:focus {position: absolute; padding: 0.4rem; width: auto; height: auto; overflow: visible;}

.hotlink{ display: inline-block; }
.hotlink a { text-decoration: none; font-weight: bold; color: #333;}
.hotlink:last-child a { color: #fff;}
.breadcrumbs li.hotlink a { background: none; padding-right: 5px}
/*header*/
.header{ height:60px; width:1000px; margin:0 auto; padding:30px 0 20px 0; position:relative;}
.wrapper.type1 .header{  padding:40px 0;}
.header h1{ float:left;}
.header h1 a{ display: block; width: 100%; height:100%; }
.topNav{ position:absolute; right:0; top:70px;}
.topNav li{ display:inline-block; padding:0 10px;}
.topNav li a{ color:#575757; text-align:center; text-decoration:none;}
.topNav li a:hover{ color:#0a98b7; border-bottom:3px solid #0a98b7;}
/*footer*/
.footer{ background-color:#4c4e4f; padding:30px 10px; color:#bfbfbf; font-size:0.875rem; line-height:18px;}
.footer .container{display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; max-width: 1000px; margin: 0 auto;}
.footer .zone{ width: 40%;}
.footer .zone .subZone{  display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; }
.footer .zone .subZone .hotlink a {color: #fff;}
.footer .zone .tit{font-size: 2.4rem; margin: 0 1rem 0 0.5rem; line-height: 2.4rem; color:#fff; text-shadow: 0.1em 0.1em 0.2em black}
.footer .zone .subTit{color:#fff; text-shadow: 0.1em 0.1em 0.2em black}
.footer .zone.right{ line-height: 1.9rem; }
.footer .zone .list{ display: flex; flex-wrap: wrap; }
.footer .zone .list .items{ width: 75px; }
.footer .zone .list .items::before{ content: " "; border-right: 8px solid white; margin-right: 0.5rem; }
.footMenu{ text-align:center; padding: 0.3rem 0; border-top: 1px solid #fff; border-bottom: 1px solid #fff; }
.footMenu li{ display:inline-block;}
.footMenu li a{ color:#fff; border-left:1px solid #fff; padding:0 10px; display:block;text-decoration:none;}
.footMenu li a:hover{ color:#88eaff;}
.footMenu li:first-child a{ border:none; }
.accessibility-badge{ margin-top: 0.8rem; text-align: center; }

/*navBlock*/
.navBlock{ width:900px; height:600px; margin:0 auto; position:relative; background:url(../images/bg_nb.png) center 0 no-repeat;}
.navBlock li{ position:absolute; height:260px; width:140px; text-align:center;padding:140px 0 0; box-sizing:border-box; transition: 0.2s linear;}
.navBlock li a{ position:absolute; top:0; left:0; right:0; bottom:0; display:block; }
.navBlock p{ border-radius:4px;color:#fff; line-height:24px; font-size:0.875rem; margin:0 0 10px;}
.navBlock h3, .navBlock h5{ color:#272727;}
.navBlock h5{ line-height:21px;}
.navBlock li.nb1{ background:url(../images/btn_icon_GRCA.png) center 0 no-repeat; width:220px; left:50%; margin-left:-110px; top:0; padding:200px 0 0;}
.navBlock li.nb1 p{ margin:0; display:inline-block; padding: 0 20px;}
.navBlock li.nb2{ background:url(../images/btn_icon_GCA.png) center 0 no-repeat; left:20px; top:180px;}
.navBlock li.nb3{ background:url(../images/btn_icon_MOICA.png) center 0 no-repeat;left:200px; top:240px;}
.navBlock li.nb4{ background:url(../images/btn_icon_MOEACA.png) center 0 no-repeat;left:50%; margin-left:-70px; top:300px;}
.navBlock li.nb5{ background:url(../images/btn_icon_XCA.png) center 0 no-repeat; right:200px; top:240px;}
.navBlock li.nb6{ background:url(../images/btn_icon_HCA.png) center 0 no-repeat;right:20px; top:180px;}
.nb1 p{ background-color:#2fb1cd;}
.nb2 p{ background-color:#4a7fc1;}
.nb3 p{ background-color:#5f9057;}
.nb4 p{ background-color:#663695;}
.nb5 p{ background-color:#8a3f69;}
.nb6 p{ background-color:#377e78;}

/*linkNav*/
.linkArea{width:1000px; height:240px; margin:0 auto; box-sizing:border-box; padding:90px 0 0; text-align:right;}
.linkNav li{ width:120px; height:130px; display:inline-block;}
.linkNav li a{ display:block; width:120px; height:130px; }
.linkNav li a:hover{filter:alpha(opacity=80);-moz-opacity:0.8;opacity:0.8; -khtml-opacity: 0.8;}
.linkNav li a img { width: 100%; }

/*container*/
.content{ position:relative; width:1000px; min-height:200px;/* padding:0 0 0 300px;*/ box-sizing:border-box; margin:0 auto;}
/*menuArea*/
.menuArea{ /*position:absolute; top:-180px; left:0;*/width:280px; padding:125px 0 0; float:left; margin-top:-180px; margin-right:20px; position:relative;}
.menuArea .menuIcon{ background:url(../images/btn_icon_s_GRCA.png) center 0 no-repeat; height:180px; width:280px;position:absolute; top:0;}
.menuArea .menuBar{ width:280px; background:#b1abab url(../images/bg_menu.jpg) 0 bottom repeat-x; color:#fff; box-sizing:border-box; padding:30px 0 ;}
.menuArea .menuBar.type1{background:#6bc4d8 url(../images/bg_menu_blue.jpg) 0 0 repeat-x; }
.menuArea .menuBar .hotlink{padding-left: 20px; position: absolute; z-index: 1000; top: 140px;}
.menuBar .arrow{ height:30px;  margin:0; background:url(../images/icon_arrow_menu_b_open.png) center 0 no-repeat; }
.menuBar.type1 .arrow{  background:url(../images/icon_arrow_menu_a_open.png) center 0 no-repeat;}
.menuBar h2{ padding:10px 20px;letter-spacing:2px; color: #000000;}
.menuBar h2 a{ display:block; width: 100%; color:#000000; text-decoration:none; }
.menuBar h2 a:hover{ background: url(../images/bg_menu_hover.png) repeat; }

.menuBar li a{ padding:10px 20px; display:block; color:#000;text-decoration:none;}
.menuBar li a:hover{ background: url(../images/bg_menu_hover.png) repeat; }
.menuBar.on ul{ display:block;}
.menuBar ul{ display:none;}
.menuBox{background: url(../images/bg_menu_shadow.png) center bottom no-repeat; padding:0 0 22px;}
/*徽章*/
.badge{ text-align:center; margin:0 0 20px;}
.badge h6{ font-size:1rem; line-height:24px;}
.badge p{ font-size:0.8125rem; line-height:18px;}

/*右邊內容*/
.mainBlock{ width:700px; float:left;}
/*breadcrumbs*/
.breadcrumbs{ margin:0 0 20px;}
.breadcrumbs li{ display:inline-block; color:#cf380a;}
.breadcrumbs li a{ color:#000; padding:0 20px 0 0; background:url(../images/bg_arrow_bc.png) right center no-repeat;text-decoration:none;}
.breadcrumbs li a:hover{color:#cf380a;}
.desc p{ padding: 0 15px; line-height: 1.6rem; margin-bottom: 20px;}
.desc p .hint{color: #107a91;}
/*標題*/
h3.tit{ text-align:center; color:#000; line-height:50px; margin:0 0 20px; letter-spacing:2px; text-indent:-2px;}
.tit .line{ border-bottom:3px solid #4878b4; width:500px; display:inline-block;}
.tit .subSize{ font-size:1rem;}
h4.subTit{ color:#107a91; padding:0 0 0 50px; height:50px; line-height:40px; letter-spacing:1px;}
.subTit.s1{ background:url(../images/icon_h4_s1.png) 0 0 no-repeat;}
.subTit.s2{ background:url(../images/icon_h4_s2.png) 0 0 no-repeat;}
.subTit.s3{ background:url(../images/icon_h4_s3.png) 0 0 no-repeat;padding:0 0 0 60px;}
.subTit.s4{ background:url(../images/icon_h4_s4.png) 0 0 no-repeat; }
.subTit.s5{ background:url(../images/icon_h4_s5.png) 0 0 no-repeat; padding:0 0 0 60px;}
.subTit.s6{ background:url(../images/icon_h4_s6.png) 0 0 no-repeat; }
/*btnSet*/
.btnSet { text-align:center; margin:0 0 20px;}
.btnSet a{ display:inline-block; border-radius:4px; background-color:#4878b4; font-size:1.3125rem; color:#fff; line-height:50px; padding:0 10px; text-decoration:none;}
.btnSet a:hover{ background-color:#cf380a;}

/*newsBlock*/
.newsBlock{ margin:0 0 20px;}
.newsBlock li{ display:block; padding:15px 130px 15px 30px; min-height:20px; position:relative; background:#fff url(../images/icon_dot_news.png) 10px 16px no-repeat; text-align:justify; }
.newsBlock li.bg{ background-color:#ebebeb;}

.newsBlock p{ line-height:21px;}
.newsBlock .date{ display:block; position:absolute; top:18px; right:10px; color:#9b5625;}
/*mainBox*/
.mainBox{ margin:0 0 20px;}
.mainBox ol { padding: 10px 40px;}
.mainBox ol li {list-style: decimal; margin-bottom: 20px; line-height:24px;}
.mainBox p{ margin:0 0 10px; line-height:24px; }
/*tbstyle 表格樣式*/
.tbstyle{ margin:0 0 20px;border:1px solid #ddd; }
.tbstyle th{ background-color:#585858; color:#fff;}
.tbstyle th, .tbstyle td{ padding:10px; line-height:24px;}
.tbstyle tr.bg{ background-color:#ebebeb;}
.tbstyle td{ border-left:1px solid #ddd; }
.tbstyle td:first-child{ border:none;}
.tbstyle td.bbt{border-bottom:1px solid #eee;}

.tbstyle.type2 th{ background-color:#ebebeb;}
.tbstyle.type2 td{ border-top:1px solid #ddd}
.tbstyle.type2 td.bLnone{ border-left:none;}
.tbstyle2{ color:#666;}

.tbstyle.repository{ width: 95%; margin: 0 auto; border-collapse:collapse }
.tbstyle.repository tr { display: flex; align-items: center; width: 100%; margin: 0 auto; }
.tbstyle.repository tr td{ display: block; }
.tbstyle.repository tr th:first-child, .tbstyle.repository tr td:first-child { width: 30%; word-break: break-all;}
.tbstyle.repository tr th:nth-child(2), .tbstyle.repository tr td:nth-child(2) { width: 45%; border-right: 1px solid #ddd; border-left: 1px solid #ddd;}
.tbstyle.repository tr th:last-child, .tbstyle.repository tr td:last-child { width: 25%; border-left: 0;  }





.linebar{ border-bottom:1px solid #999; height:10px; display:block; margin:0 0 20px;}/*分隔線*/

/*decList*/
ul.decList{ margin:0 0 20px;}
ul.decList li{ margin:0 0 10px 20px; line-height:24px; list-style:decimal; color:#000;}
ul.decList p, ul.dotList p{ margin:0; color:#666;}
ul.decList li li{ list-style:none;}
/*dotList*/
ul.dotList{ margin:0 0 10px;}
.dotList li{ background:url(../images/icon_dot_org.png) 0 2px no-repeat; padding:0 0 0 20px; line-height:24px;color:#b45b1b;}
.dotList.type2 li{ color:#666;}
ul.decList .dotList li{ margin:0 0 10px;color:#b45b1b;}
/*linkList*/
.linkList li{ margin:0 0 10px;}
.linkList li a { background: url(../images/icon_link_arrow.png) 0 0 no-repeat; padding:0 0 0 20px;}


.f_word, .f_pdf{ display:inline-block; width:24px; height:24px; vertical-align:middle;}
.f_pdf2, .f_word2, .f_ie, .f_wb, .f_cert, .f_crl{display:inline-block; width:30px; height:30px; vertical-align:middle;}


.f_link{ position:relative;}
.f_link a{ display:block; position:absolute; top:0; right:0; bottom:0; left:0; overflow: hidden; }


/*無障礙tab時提示邊框*/
@keyframes accessible-hint {
	0%{
		outline: 3px dotted red;
	}
	50%{
		outline: 3px dotted transparent;
	}
}

a:focus, button:focus, input:focus, select:focus{ 
	outline: 3px dotted red;
	animation-name: accessible-hint;
	animation-duration: 1.8s;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
}


/* 不支援JavaScript時, <noscript>內容之css */
.not-support-javascript{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 200;
	height: 100%;
	width: 100%;
	background-color: black;
	opacity: 0.8;
}

.not-support-javascript p{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 70%;
	text-align: center;
	color: #fff;
	font-size: medium;
	line-height: 30px;
}


/* mobile mode hambuger */
.header .hambuger{
    position: fixed;
    z-index: 10;
    right: 20px;
    top: 20px;
    padding: 10px 15px;
    border: 1px solid black;
    border-radius: 5px;
    cursor: pointer;
    display: none;
}

.header .hambuger:hover{
    background-color: black;
    border: 1px solid #fff;
}

.header .hambuger:hover .line{
    border: 3px solid #fff;
    background-color: #fff;
}

.header .hambuger:hover span{
    color: #fff;
}

.header .hambuger.opened .top{
    transform: translate(0, 11px) rotate(405deg);
}

.header .hambuger.opened .middle{
    opacity: 0;
}

.header .hambuger.opened .bottom{
    transform: translate(0, -11px) rotate(-405deg);
}

.header .hambuger .line{
    width: 30px;
    border: 3px solid black;
    background-color: black;
    border-radius: 5px;
    margin: 5px auto;
    transition: 0.5s linear;
}


/* mobile mode menu */
.mobileMenuWrapper{
    position: fixed;
    top:0;
    z-index: 8;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.575);
    display: none;
}

.mobileMenuWrapper.active{
    display: block;
}

.mobileMenuWrapper .mobileMenu{
    position: fixed;
    top: 0;
    right: 0;
    z-index: 9;
    background-color: #fff;
    border: 1px solid gray;
    display: none;
}

.mobileMenuWrapper .mobileMenu a{
	text-decoration: none;
	color: #03728b;
}

.mobileMenuWrapper .mobileMenu.active{
    display: block;
}

.mobileMenuWrapper .mobileMenu .title{
	display: flex;
	align-items: center;
    margin-top: 11px;
    height: 70px;
    font-size: 2.5rem;
    line-height: 78px;
	padding: 10px 10px 10px 25px;
    background-color: #e4e0e0;
}

.mobileMenuWrapper .mobileMenu .title span{
	margin-right: 20px;
}

.mobileMenuWrapper .mobileMenu .map{
    position: relative;
    padding: 1.8rem;
    max-height: calc(100vh - 149px);
    overflow-y: auto;
}

.mobileMenuWrapper .mobileMenu .map .part{
    line-height: 2rem;
}

.mobileMenuWrapper .mobileMenu .map .part .primary{
	font-size: 1.3rem;
    margin-top: 30px;
    border-bottom: 1px solid lightgray;
}

.mobileMenuWrapper .mobileMenu .map .part:nth-of-type(1) .primary{
    margin-top: 0px;
}

.mobileMenuWrapper .mobileMenu .map .part:nth-of-type(8) .primary{
    margin-bottom: 20px;
}

.mobileMenuWrapper .mobileMenu .map .part .primary::before{
    content: ' ';
    margin-right: 10px;
    border-right: 10px solid rgb(56, 56, 56);
}

.mobileMenuWrapper .mobileMenu .map .part .secondary{
	margin: 15px 0 0 1.5rem;
}

.mobileMenuWrapper .mobileMenu .map .part .badge{
	margin-top: 3rem;
}

.mobileMenuWrapper .mobileMenu .map .part .secondary a::before{
	content: ' ';
	display: inline-block;
	width: 3px;
	height: 3px;
    margin-right: 10px;
	border: 3px solid #c0c0c0;
	border-radius: 50%;
}

.mobileMenuWrapper .mobileMenu .map .part .primary a:hover,
.mobileMenuWrapper .mobileMenu .map .part .secondary a:hover{
    font-weight: bold;
	transition: 0s;
}




/* RWD */
/* 全尺寸通用設定 */
@media screen and (max-width: 1200px) {
	/* 版面調整 */
	.header{
		width: 100%;
		position: sticky;
		top: 0;
		z-index: 10;
	}

	.header h1 {
		margin-left: 10px;
	}

	.content, .linkArea {
		width: 95%;
		margin: 0 auto;
	}

	.content{
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}
	
	.topNav, .menuArea .badge {
		display: block;
	}

	.tbstyle.repository tr th{
		font-size: 0.7rem;
	}

	/* 區塊隱藏 */
	.topNav, .menuArea {
		display: none;
	}


	/* 漢堡選單：開啟 */
    .header .hambuger {
        display: block;
    }
}



/* 各尺寸設定 */
@media screen and (max-width: 576px) {
	/* 版面調整 */
	.mainBlock, .tit .line {
		width: 95%;
		margin: 0 auto;
	}

	.header h1 a img{
		width: 70%;
		margin-top: 10px;
	}

	h4.subTit.RWD{ 
		height: auto 
	}

	.tit .subSize {
		font-size: 0.8rem;
		display: block;
	}

	.breadcrumbs{
		font-size: 0.7rem;
		background-color: #DDECF3;
	}

	.footer .zone{ 
		width: 90%;
		margin: 20px 0;
	}


	/* 區塊隱藏 */
	.linkArea .linkNav {
		display: none;
	}	
}


@media screen and (min-width: 577px) and (max-width: 768px) {
	/* 版面調整 */
	.footer .zone{ 
		width: 90%;
		margin: 20px 0;
	}

	.footer .zone.right { 
		margin-left: 70px;
	}


	/* 區塊隱藏 */
	.linkArea .linkNav {
		display: none;
	}
}


@media screen and (min-width: 769px) and (max-width: 992px) {
	.footer .zone .list {
		flex-wrap: nowrap;
	}
}