@charset "utf-8";
/* CSS Document */
@import url("reset.css");
* {
	margin: 0;
	padding: 0;
	
}


html {}
a{text-decoration:none; color:#000000; word-wrap: break-word;}
a:hover{ color:#0f6f7c;}
body {
	font-family:Arial,"微軟正黑體", sans-serif;
	font-size:0.9375rem;
	line-height: 130%;
	background-color:#F6F6F6;
	
}
caption{ display: none;}
input{font-family:Arial,"微軟正黑體", sans-serif;font-size:0.9375rem; float:none;}
input[type="text"]{border:1px solid #999; background-color:#fff; height:25px; line-height:25px; padding:0 5px;}
input[type="password"]{border:1px solid #999; background-color:#fff; height:25px; line-height:25px; padding:0 5px;}
input[type="submit"]{border:0; }

input.full{ width:98%;}
input.code{border:1px solid #999; background-color:#fff; height:25px; line-height:25px; padding:0 5px; width:45px;}	
input.code2{border:1px solid #999; background-color:#fff; height:25px; line-height:25px; padding:0 5px; width:80px;}
input.code3{width:68%;}
input.code4{border:1px solid #999; background-color:#fff; height:25px; line-height:25px; padding:0 5px; width:150px;}

input.btn1{ width:170px; height:30px; background:url(../images/btnbg.jpg) no-repeat; color:#fff;}
input.clear{ margin-top:5px; padding:0 5px;}

input.inbtn01{ width:180px; height:42px; background:url(../images/xca_btn.jpg) no-repeat; text-align:center; line-height:42px; font-size:1.125rem; color:#fff;text-shadow:1px 1px 1px #86ae1e; font-weight:bold;margin:0 5px; border:0;}
input.inbtn02{ width:180px; height:42px; background:url(../images/xca_btn2.jpg) no-repeat; text-align:center; line-height:42px; font-size:1.125rem; color:#fff;text-shadow:1px 1px 1px #999; font-weight:bold;margin:0 5px;}


select{font-family:Arial,"微軟正黑體", sans-serif;font-size:0.9375rem;float:none;}
select.add{ width:185px;border:1px solid #999; background-color:#fff; height:25px; line-height:25px; margin-bottom:5px;}

.clr{ clear:both;}

.t_center{ text-align:center;}
.t_left{ text-align:left;}
.t_right{ text-align:right;}

.f_r{ float:right;}
.f_l{ float:left;}

.wallpaper{ width:100%; background:url(../images/xca_border.jpg) repeat-x top center; padding-top:5px;}
.header{width:1000px; margin:0 auto;height:105px;position:relative;}
.header .links{ position: absolute; right:10px; top:27px; width:480px;}
.header .links li{
	float:left;
	padding-left:10px;
	word-spacing: 10px;
}
h1{ width:430px; height:105px; background:url(../images/xca_logo.jpg) no-repeat; text-indent:-9999px;}
h1 a{ width:430px; height:105px; display:block;}

.sr-only {position: absolute;width: 0.063rem;height: 0.063rem;padding: 0.4rem;margin: 0;overflow: hidden;clip: rect(0, 0, 0, 0);border: 0; z-index: 1000000;color: #333; }
.sr-only:active,.sr-only:focus {position: absolute;width: auto;height: auto;margin: 0;overflow: visible;clip: auto;}

/*選單*/
.nav{ height:40px; background-color:#404040; margin-bottom:20px;}
.nav ul{ width:970px; margin:0 auto; position:relative; padding-left:30px;}
.nav li{ float:left; width:155px; border-left:1px solid #0F0F0F; border-right:1px solid #959595; line-height:40px; text-align:center;}
.nav li a{ color:#fff; display:block;}
.nav li a:hover{ color:#0f6f7c;}
.nav li.home{ background:url(../images/xca_home.jpg) no-repeat center 5px; width:50px; text-indent:-9999px;}
.nav li.accesskey{ position:absolute; color:#FFF;float:none; width:15px;border-left:none; border-right:none; left:10px; z-index:33;}

/*頁寬*/
.pagesize{ width:980px; margin:0 auto; position: relative; padding:0 10px; padding-bottom:15px; min-height:calc(100vh - 5px - 105px - 40px - 184.5px - 60px - 35px)}
.index{ width:990px; margin:0 auto;padding:0 5px;padding-bottom:15px; position: relative;}

/*XCA簡介*/
.section p{margin-top:10px;}
.section .red{ color: #C00;}

/*index*/
.firstrow{ margin-bottom:20px;}
.frequentlink{ width:185px; border:1px solid #A0A0A0; background-color:#fff; float:left; position:relative; margin-left:5px;}
.frequentlink h2{ background-color:#40638f; color:#fff; line-height:42px; height:42px; font-size:1rem; font-weight:normal; text-indent:15px;}
.frequentlink li{ border-bottom:1px solid #CACACA;}
.frequentlink li:last-child{ border-bottom:none;}
.frequentlink li a{ display:block; padding:6px 5px; padding-right:15px}
.frequentlink li a:hover{background-color:#efefef;}
.bigbanner{ float:right; width:780px; height: 269px; border:1px solid #A0A0A0; margin-right:5px; }
.bigbanner ul li { display: block; height: 100%; }
.bigbanner img{ width:780px; height: 269px; }

.secondrow{ margin-bottom:15px;}
.secondrow li{ float:left; width:165px; height:135px; margin:0 6px 0 5px;border:1px solid #A0A0A0; background-color:#fff; padding:10px; position:relative;}
.secondrow li h3{ font-weight:bold;}
.secondrow li .btn{ width:103px; height:28px; position:absolute; bottom:10px; left:10px;}
.secondrow li .btn a{ width:103px; height:28px; display:block;}
.secondrow li .btn span{ display:none;}
.secondrow li.work01{ background:url(../images/work01.jpg) no-repeat right bottom;background-color:#fff;}
.secondrow li.work01 h3{ color:#b43e46}
.secondrow li.work01 .btn{ background: url(../images/wbtn01.jpg) no-repeat;}
.secondrow li.work02{ background:url(../images/work02.jpg) no-repeat right bottom;background-color:#fff;}
.secondrow li.work02 h3{ color:#577c01}
.secondrow li.work02 .btn{ background: url(../images/wbtn02.jpg) no-repeat;}
.secondrow li.work03{ background:url(../images/work03.jpg) no-repeat right bottom;background-color:#fff;}
.secondrow li.work03 h3{ color:#995c00}
.secondrow li.work03 .btn{ background: url(../images/wbtn03.jpg) no-repeat;}
.secondrow li.work04{ background:url(../images/work04.jpg) no-repeat right bottom;background-color:#fff;}
.secondrow li.work04 h3{ color:#40638f}
.secondrow li.work04 .btn{ background: url(../images/wbtn04.jpg) no-repeat;}
.secondrow li.work05{ background:url(../images/work05.jpg) no-repeat right bottom;background-color:#fff;}
.secondrow li.work05 h3{ color:#8760a5}
.secondrow li.work05 .btn{ background: url(../images/wbtn05.jpg) no-repeat;}

.thirddrow { padding:0 5px;}
.thirddrow .news{ width:710px; float:left;}
.thirddrow h4{background:url(../images/xca_titbg.jpg) repeat-x; border:1px solid #C7CCCF; text-indent:15px; height:34px; line-height:34px; color: #333; font-size:0.9375rem; margin-bottom:15px;}
.thirddrow .news h5{ font-size:1.125rem; color:#40638f; font-weight:bold; }
.thirddrow .news p{ margin-right: 25px; }
.thirddrow .news .date{ font-size:0.8125rem; color:#999; line-height:30px;}
.thirddrow .news .txt{border-bottom:1px solid #ccc; line-height:25px; margin-bottom:10px; font-weight:bold; padding-bottom:10px;}
.thirddrow .news .list li{ background:url(../images/xca_li.jpg) no-repeat 5px 5px; margin:10px 0; padding-left:20px;}
.thirddrow .news .list li a{ color:rgb(180, 72, 1)}
.thirddrow .news .appliance{ width:710px; border-bottom:1px solid #C3C3C3;border-top:1px solid #C3C3C3; background-color:#fff;}
.thirddrow .news .appliance li{ float:left; height:95px; width:88px; font-size:1.125rem;padding-left:80px;}
.thirddrow .news .appliance li.a00{ background:url(../images/appliance00.jpg) no-repeat center center;width:34px;background-color:#34B9CA; padding-left:0;}
.thirddrow .news .appliance li.a00 span{ display:none;}
.thirddrow .news .appliance li.a01{ background:url(../images/appliance01.jpg) no-repeat; line-height:95px; border-right:1px solid #C3C3C3;}
.thirddrow .news .appliance li.a02{ background:url(../images/appliance02.jpg) no-repeat;border-right:1px solid #C3C3C3;padding-top:30px;height:65px;}
.thirddrow .news .appliance li.a03{ background:url(../images/appliance03.jpg) no-repeat;border-right:1px solid #C3C3C3;padding-top:20px;height:75px;}
.thirddrow .news .appliance li.a04{ background:url(../images/appliance04.jpg) no-repeat;border-right:1px solid #C3C3C3;padding-top:30px;height:65px;}

/*新手上路*/
.newuser{ float:right; width:250px;}
.newuser li{ width:250px; height:96px; margin-bottom:7px;}
.newuser li a{ width:100%; height:100%; display:block;}
.newuser li span{ display:none;}
.newuser li.n00{ background:url(../images/newuser00.jpg) no-repeat}
.newuser li.n01{ background:url(../images/newuser01.jpg) no-repeat}
.newuser li.n02{ background:url(../images/newuser02.jpg) no-repeat}
.newuser li.n03{ background:url(../images/newuser03.jpg) no-repeat}
.newuser li.n04{ background:url(../images/newuser04.jpg) no-repeat}
.newuser li.badge{ width: fit-content; height: fit-content;}

/*次選單*/
.sub{ width:175px; border:1px solid #A0A0A0; background-color:#fff; float:left; position:relative;}
.sub .accesskey{ position:absolute; top:-20px;}
.sub h2{ background-color:#404040; color:#fff; line-height:36px; height:36px; font-size:1rem; font-weight:normal; text-indent:15px;}
.sub li{ border-bottom:1px solid #CACACA;}
.sub li:last-child{ border-bottom:none;}
.sub li a{ display:block; padding:10px 5px; padding-right:15px}
.sub li a:hover{ color:#fff; background-color:#0f6f7c;}
.sub li.select{ color:#fff; background-color:#0f6f7c;}
.sub li.select a{ color:#fff;}

/*右側內容區*/
.content{ float:right; width:785px; position: relative; min-height:350px;}
.content .accesskey{ position:absolute; top:-20px;}
.content p{ line-height:24px; padding:0 15px;}
.content p a{color:#0f6f7c}
.content h3{ background:url(../images/xca_tit.jpg) no-repeat; border-bottom:2px solid #F18C00; text-indent:35px; height:fit-content; line-height:34px; color:#cc7700; font-size:1.4375rem; margin:10px 0;}
.content h4{background:url(../images/xca_titbg.jpg) repeat-x; border:1px solid #C7CCCF; text-indent:15px; height:34px; line-height:34px; color: #333; font-size:0.9375rem; margin-bottom:10px; position:relative;}
.content h4 p{ position: absolute; top:0; left:140px; color:#F90; padding:0; margin:0; height:34px; line-height:34px;}
.content h5{ font-size:0.9375rem; margin-bottom:5px; }
.content .title{ font-size:0.9375rem; margin-bottom:5px; font-weight: bold;}


.content .note{border:1px solid #C00; padding:10px;color: #C00; font-size:0.9375rem; margin-bottom:10px; background-color:#fff;}
.section{ margin-bottom:15px;}

.register img{ width: 100%; height: 100%;}
.register ul li{ display: flex; justify-content: left; margin-bottom: 20px;  }
.register ul li .list-dot{ min-width: 80px; }

/*按鈕區*/
.btnset{ width:570px; margin:10px auto; text-align:center; border-radius: 5px;}
.btnset4{ width:760px; margin:5px auto; text-align:center;}
.btnset .btn{ width:202px; height:42px; background-color: #527005; text-align:center; line-height:42px; font-size:1.125rem; color:#fff;text-shadow:1px 1px 1px #86ae1e; font-weight:bold; margin:0 auto; border-radius: 5px;}
.btnset .btn a{ width:202px; height:42px; display:block; color:#fff; }
.btnset .btn a:hover{box-shadow: 0px 0px 8px 2px rgb(129, 129, 129); border-radius: 5px;}

.btnset .btn2{ width:270px; height:42px; background-color: #527005; text-align:center; line-height:42px; font-size:1.125rem; color:#fff;text-shadow:1px 1px 1px #86ae1e; font-weight:bold; margin:0 auto; border-radius: 5px;}
.btnset .btn2 a{ width:270px; height:42px; display:block; color:#fff;}
.btnset .btn2 a:hover{box-shadow: 0px 0px 8px 2px rgb(129, 129, 129); border-radius: 5px;}

.btnset .tips{ color:#c00; font-size:0.8125rem; margin-top:5px;}
.btnset .tips2{font-size:1.125rem;margin-top:5px;}
.btnset .tips2 a{color:#0f6f7c;}

.btnset2{ width:450px;}


.btnset .btn01{ width:180px; height:42px; background:url(../images/xca_btn2.jpg) no-repeat; text-align:center; line-height:42px; font-size:1.125rem; color:#ccc;font-weight:bold; margin:0 5px;}
.btnset .btn01 a{ width:180px; height:42px; display:block; color:#fff;text-shadow:1px 1px 5px #666;}
.btnset .btn01 a:hover{color:#0f6f7c;text-shadow:0px 0px 0px #666;}

.btnset .btn02{ width:180px; height:42px; background:url(../images/xca_btn.jpg) no-repeat; text-align:center; line-height:42px; font-size:1.125rem; color:#fff;text-shadow:1px 1px 1px #86ae1e; font-weight:bold; margin:0 5px;}
.btnset .btn02 a{ width:180px; height:42px; display:block; color:#fff;text-shadow:0px 0px 2px #333;}
.btnset .btn02 a:hover{color:#333;text-shadow:0px 0px 0px #333;}

.btnset .btn03{ width:180px; height:42px; background:url(../images/xca_btn.jpg) no-repeat; text-align:center; line-height:42px; font-size:1.125rem; color:#fff;text-shadow:1px 1px 1px #86ae1e; font-weight:bold;margin:0 5px;}
.btnset .btn03 a{ width:180px; height:42px; display:block; color:#fff;text-shadow:0px 0px 2px #333;}
.btnset .btn03 a:hover{color:#333;text-shadow:0px 0px 0px #333;}

.btnset .btn04{ width:180px; height:42px; background:url(../images/gca_btn.jpg) no-repeat; text-align:center; line-height:42px; font-size:1.125rem; color:#fff;text-shadow:1px 1px 1px #86ae1e; font-weight:bold; margin-right:10px;}
.btnset .btn04 a{ width:180px; height:42px; display:block; color:#fff;text-shadow:0px 0px 2px #333;}
.btnset .btn04 a:hover{color:#333;text-shadow:0px 0px 0px #333; }


.btnset .last{ margin-right:0;}

/*single btn*/
.openbtn{width:170px; height:30px; background:url(../images/btnbg.jpg) no-repeat; color:#fff; text-align:center; line-height:30px; float:left; margin-left:10px;}
.openbtn a{width:170px; height:30px;color:#fff; display:block;}

/*下載按鈕*/
.download01{ width:112px; height:28px; line-height:28px; text-align:center; color:#fff; background:url(../images/dwonload01.jpg) no-repeat;}
.download01 a{ width:112px; height:28px; display:block;color:#fff;}
.download01 a:hover{ color:#333;}
.download02{ width:112px; height:28px; line-height:28px; text-align:center; color:#fff; background:url(../images/dwonload02.jpg) no-repeat;}
.download02 a{ width:112px; height:28px; display:block;color:#fff;}
.download02 a:hover{ color:#333;}



/*路徑*/
.route { color:#636363;}
.route a{ color:#636363;}
.route span{ color:#406da5;}

/*表格設定*/
.tabstyle{ border-top:1px solid #ccc;border-left:1px solid #ccc; margin:10px 0;}
.tabstyle th{ padding:10px; background-color:#727272; color:#fff; text-align:center;}
.tabstyle td{ padding:10px;border-bottom:1px solid #ccc;border-right:1px solid #ccc;}
.tabstyle p{ line-height:24px; padding:0px; margin-top:0;}
.tabstyle .red{ color:#C00; font-size:0.8125rem;}
.tabstyle .tips{ color:#C00; font-size:0.8125rem;}
.tabstyle .point{ color:#C00; }
.tabstyle .add a{ color:#0f6f7c; font-size:0.75rem;}
.tabstyle .codetxt{ font-size:0.8125rem;}
.tabstyle.database06 th{ background-color: transparent; color: #000000; text-align: left; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc;}

.tabstyle2{ border-top:1px solid #ccc;border-left:1px solid #ccc; margin:10px 0;}
.tabstyle2 th{ padding:10px; background-color:#727272; color:#fff; border-bottom:1px solid #ccc;}
.tabstyle2 td{ padding:10px;border-bottom:1px solid #ccc;border-right:1px solid #ccc;}
.tabstyle2 p{ line-height:24px; padding:0px;margin-top:0;}
.tabstyle2 .work{ color:#40638f;}
.tabstyle2 .notwork{ color:#de4c84;}

.tabstyle3{ border-top:1px solid #ccc;border-left:1px solid #ccc; margin:10px 0; background-color:#FFF}
.tabstyle3 th{ padding:5px; background-color: #666; color: #fff; border-bottom:1px solid #ccc; text-align:center}
.tabstyle3 td{ padding:5px;border-bottom:1px solid #ccc;border-right:1px solid #ccc;}
.tabstyle3 tr.color01{ background-color: #F2F2F2}
.tabstyle3 tr.color02{ background-color: #E3E3E3}



/*步驟圖*/
.step{}
.step .stepimg{height:150px; text-indent:-9999px;}
.step .point{ color:#C00;}
/*正卡*/
.step .step01a{ background:url(../images/xca_step01a.jpg) no-repeat; }
.step .step01{ background:url(../images/xca_step01.jpg) no-repeat; }
.step .step02{ background:url(../images/xca_step02.jpg) no-repeat; }
.step .step03{ background:url(../images/xca_step03.jpg) no-repeat; }
.step .step04{ background:url(../images/xca_step04.jpg) no-repeat; }
.step .step05{ background:url(../images/xca_step05.jpg) no-repeat; }
.step .step06{ background:url(../images/xca_step06.jpg) no-repeat; }

/*附卡*/
.step .bstep01{ background:url(../images/b_step01.jpg) no-repeat; }
.step .bstep02{ background:url(../images/b_step02.jpg) no-repeat; }
.step .bstep03{ background:url(../images/b_step03.jpg) no-repeat; }
.step .bstep04{ background:url(../images/b_step04.jpg) no-repeat; }
.step .bstep05{ background:url(../images/b_step05.jpg) no-repeat; }
.step .bstep06{ background:url(../images/b_step06.jpg) no-repeat; }


/*非IC卡*/
.step .cstep01{ background:url(../images/c_step01.jpg) no-repeat; }
.step .cstep02{ background:url(../images/c_step02.jpg) no-repeat; }
.step .cstep03{ background:url(../images/c_step03.jpg) no-repeat; }
.step .cstep04{ background:url(../images/c_step04.jpg) no-repeat; }
.step .cstep05{ background:url(../images/c_step05.jpg) no-repeat; }
.step .cstep06{ background:url(../images/c_step06.jpg) no-repeat; }

/*IC卡*/
.step .dstep01{ background:url(../images/d_step01.jpg) no-repeat; }
.step .dstep02{ background:url(../images/d_step02.jpg) no-repeat; }
.step .dstep03{ background:url(../images/d_step03.jpg) no-repeat; }
.step .dstep04{ background:url(../images/d_step04.jpg) no-repeat; }
.step .dstep06{ background:url(../images/d_step06.jpg) no-repeat; }

/*申請憑證*/
.step .estep01{ background:url(../images/e_step01.jpg) no-repeat; }
.step .estep02{ background:url(../images/e_step02.jpg) no-repeat; }
.step .estep03{ background:url(../images/e_step03.jpg) no-repeat; }
.step .estep04{ background:url(../images/e_step04.jpg) no-repeat; }
.step .estep05{ background:url(../images/e_step05.jpg) no-repeat; }
.step .estep06{ background:url(../images/e_step06.jpg) no-repeat; }





/*step 選取卡片類別*/
.step .selectbox li{ float: left; list-style:none; margin-right:10px; padding-left:15px;}
.step .selectbox li input{ vertical-align:middle;}

/*安全保密函step*/
.voucherstep{ background: url(../images/stepbg.jpg) no-repeat; width:785px; height:220px;}
.voucherstep li{ width:130px; height:170px; float:left; margin:40px 14px 0 14px ;}
.voucherstep li a{color:#0f6f7c;}
.voucherstep li.last{ margin-right:0;}

/*查詢條件*/	
.condition{ border-top:1px solid #ccc;}
.condition li{ width:350px; float:left; text-align:center; padding:20px 10px;}
.condition li.w300{ width:300px;}
.condition li.w400{ width:430px;}

/*輸入憑證*/
.cardinput{ border-top:1px solid #ccc; padding:15px 0; text-align:center;}
.cardinput2{padding:15px 0; text-align:center;}

/*說明樣式*/
.notetxt{ padding:10px; background-color:#e9e9e9; margin-bottom:15px;}


/*成功訊息*/
.successbox{ border:1px solid #5687C2; margin-bottom:20px; text-align:center; line-height:20px;padding:10px 0;}
.successbox .number{ font-size:1.125rem; padding-top:10px;  color:#de4c84;}

/*注意事項列表*/
.tips li{ list-style:decimal; padding:5px 0px;padding-right:15px;margin-left:35px;}
.tips li a{ color:#0f6f7c;}
.tips li span{ color:#de4c84;}
.tips li span.point{ color:#C00;}
.tips li.point{ color:#C00;}


/*列表有底線樣式*/
.style{}
.style li{ list-style: none; padding:15px 15px;margin:0;margin-left:15px; background:url(../images/xca_li.jpg) no-repeat 0 18px; border-bottom:1px solid #ccc; }
.style li span{ color:#C00;}
.style li a{color:#0f6f7c;}
.style li .tit{ font-weight:bold; color:#C00;}


/*列表無底線樣式*/
.style2{}
.style2 li{ list-style: none; padding:10px 15px;margin:0;margin-left:15px; background:url(../images/xca_li.jpg) no-repeat 0 15px;}
.style2 li span{ color:#de4c84;}
.style2 li a{color:#0f6f7c;}

.style2.order-list{ list-style: disc; background: none; }
.style2.order-list li{ text-indent: -1.2em; background: none;}
.style2.order-list li span{ color: #c90202; font-weight: bold; }

/*數字列表*/
.style4{}
.style4 li{ list-style:decimal; padding:5px 0px;padding-right:15px;margin-left:35px; background:none; border-bottom:0;}
.style4 li a{ color:#0f6f7c;}


/*查詢結果列表*/
.results{}
.results li{ padding:8px 10px;}
.results li:nth-child(even){ background-color:#e5e5e5;}

/*主管機關列表*/
.officelist{ padding:10px 0;}
.officelist li{ width:16%; float:left; text-align:center; border-right:1px solid #ccc; padding:10px 0;}
.civil-union{ margin: 15px 0 0 32px; }

/*other*/
.oidsearch{ width:500px; margin:0 auto;}
.success{ text-align:center; padding:20px;}
.success span{ font-size:1.25rem; }
.topline{ border-top:1px solid #ccc;}




/*列表無底線無點點樣式*/
.style3{ text-align:justify;}
.style3 li{ list-style: none; padding:5px 15px;margin:0;}
.style3 li span{ color:#b53b69;}
.style3 li a{color:#0f6f7c;}

/*年分選擇*/
.year{ border:1px solid #40638f; margin-bottom:15px;}
.year li{ float:left; padding:10px; text-align:center; width:85px;}
.year li.select{ background-color:#40638f; color:#fff;}
.year li.select a{ color:#fff;}

/*特別樣式框*/
.spbox{ border:1px solid #40638f; border-top:3px solid #40638f; padding:15px; margin:10px 0;}
.spbox h5{ border-bottom:1px dashed #40638f; padding-bottom:10px;color:#40638f;}
.spbox a{ color:#40638f;}

/*另開頁面CSS*/
.newpage{ width:800px; margin:0 auto; padding:20px 0;}
.newpage h3{ background:url(../images/xca_tit.jpg) no-repeat; border-bottom:2px solid #F18C00; text-indent:35px; height:34px; line-height:34px; color:#F18C00; font-size:1.4375rem; margin:10px 0;}


/*表單與資料下載*/
.formbox{ border:1px solid #40638f; border-top:3px solid #40638f; padding:15px; margin:10px 0; position:relative;}
.formbox .icon{ position:absolute; right:10px; top:10px; }
.formbox .icon li{width:90px; height:24px; float:right; margin-left:10px;}
.formbox .icon li span{ visibility:hidden;}
.formbox .icon li a{width:90px; height:24px; display:block;}
.formbox .icon li.pdf{ background:url(../images/pdficon.jpg) no-repeat;}
.formbox .icon li.word{ background:url(../images/wordicon.jpg) no-repeat;}
.formbox .icon li.excel{ background:url(../images/excelicon.jpg) no-repeat;}
.formbox .icon li.zip{ background:url(../images/zipicon.jpg) no-repeat;}
.formbox .icon li.ie{ background:url(../images/ie.jpg) no-repeat;}
.formbox .icon li.card{ background:url(../images/card.jpg) no-repeat;}
.formbox .icon li.key{ background:url(../images/key.jpg) no-repeat;}
.formbox h5, .formbox .title{ border-bottom:1px dashed #40638f; padding-bottom:10px;color:#35619f; padding-right:200px;}
.formbox a{ color:#40638f;}

.formbox .twodown{ margin-top:15px;}
.formbox .pzip{width:90px; height:24px;margin-left:10px;background:url(../images/zipicon.jpg) no-repeat; float:left}
.formbox .pzip a{width:90px; height:24px; display:block;}
.formbox .pzip span{ visibility:hidden;}


/*簽發統計資料*/
.statistics{ width:380px; margin-top:15px;}
.statistics h5{ color:#35619f; font-size:1rem; font-weight:bold;}
.statistics .card{ color:#000; font-weight:bold;}
.statistics .blu{ color:#35619f;}
.statistics .pink{ color:#af1d35;}
.statistics .box{ border:1px solid #4C7FC1; border-top:2px solid #4C7FC1;}
.statistics .box .tit{ padding:5px; text-align:center; border-bottom:1px  solid #ccc;}
.statistics .box .tit p{ padding:0; margin:0;}
.statistics .box td{ padding:10px 5px;}
.statistics .box tr.bg{ background-color:#E5E5E5}
.statistics .box td li{ background:url(../images/xca_li.gif) no-repeat 5px; padding-left:20px;}
.statistics .box .noic{ }
.statistics .box .noic li{background:url(../images/xca_li.gif) no-repeat 5px;padding:10px; padding-left:20px;}
.statistics .box .noic li span{color:#35619f;}
.statistics .box .noic li:nth-child(even){background-color:#E5E5E5}

/*憑證相關系統*/
.voucher{ width:145px; margin:15px auto;}
.voucher h5, .voucher .title{ padding-top:10px; color:#40638f;}

/*FAQ*/
.faq h4{ position:relative;}
.faq h4 span{ position: absolute; right:5px;}
.faq h4 span a{color:#0f6f7c;}
.faq .aa{ margin-top:5px; background-color:#efefef; padding:10px 10px 10px 30px; text-align:justify;}
.faq .aa p{ margin:0; padding:0; padding-left: 10px; border-left: 2px solid rgb(156, 156, 156);}
.faq .aa table{ border-top:1px solid #ccc; border-left:1px solid #ccc; background-color:#fff;}
.faq .aa td{ border-bottom:1px solid #ccc; border-right:1px solid #ccc; padding:5px;}
.faq .aa th{ border-bottom:1px solid #ccc; border-right:1px solid #ccc; padding:5px; background-color:#efefef; text-align:center;}
.faq .faqQuestion, .faq .question-list li a{ display: flex; align-items: start; }
.faq .faqQuestion .hint-triangle{ margin-top: 5px; }

/*sitemap*/
.sitemap{}
.sitemap ol li{ border-bottom:1px solid #ccc; padding:10px 0;}
.sitemap ol li .title{ float:left; font-size:1.25rem; font-weight:bold; width:220px;margin-bottom:0;}
.sitemap ol li .color1{ color:#8d6b3e; }
.sitemap ol li .color2{ color:#c06000; }
.sitemap ol li .color3{ color:#947807; }
.sitemap ol li .color4{ color:#6f9717; }
.sitemap ol li .color5{ color:#359155; }
.sitemap ol li .color6{ color:#2b8b7d; }
.sitemap ol li .color7{ color:#4778a3; }
.sitemap ol li .color8{ color:#6f86d2; }
.sitemap ol li .color8 a{ color:#6f86d2; }
.sitemap ol li .color9{ color:#6859a3; }
.sitemap ol li .color9 a{ color:#6859a3; }
.sitemap ol li .color10{ color:#b278be; }
.sitemap ol li .color10 a{ color:#b278be; }
.sitemap ol li .color11{ color:#e12a85; }
.sitemap ol li .color11 a{ color:#e12a85; }
.sitemap ol li .color12{ color:#e12a51; }
.sitemap ol li .color12 a{ color:#e12a51; }
.sitemap ol li .color13{ color:#ff0202; }
.sitemap ol li .color13 a{ color:#ff0202; }
.sitemap ul{ float:left;}
.sitemap ul li{ border-bottom:none; font-size:0.9375rem; padding:0; padding-bottom:5px;}


/*print*/
.printarea{ width:785px; margin:0 auto; padding-top:10px;}
.printarea ul{ border-bottom:1px dashed #ccc;margin:20px 0;}
.printarea li{ font-size:1rem; font-weight:bold; margin:10px 0;}
.printarea h2{margin-bottom:10px;}
.printarea h4{background:url(../images/xca_titbg.jpg) repeat-x; border:1px solid #C7CCCF; text-indent:5px; height:34px; line-height:34px; color: #F00; font-size:0.875rem; font-weight:none; margin:10px 0; }
.printarea table{ margin:0; margin-bottom:10px;}
.printarea th{ border-bottom:1px solid #A0A0A0; border-right:1px solid #A0A0A0; padding:0;}
.printarea .tips{ text-align:center;font-size:0.9375rem;}
.printarea .tips p{ margin:3px 0;}
.printarea .tips strong{ font-weight:bold;}
.printarea .tips .red{color: #F00;}


/*快速連結*/
.linkarea{ width:100%; background-color:#fff; border-top:2px solid #E3E3E3; padding:20px 0;}
.linkarea p{ line-height:18px;}
.linkarea .title{ font-size:1.125rem; margin-bottom:5px; font-weight: bold;}
.linkarea .c01{ color:#0f6f7c;}
.linkarea .c02{ color:#587a0c;}
.linkarea .c03{ color:#40638f;}
.linkarea .c04{ color:#037dab;}
.linkarea p{ padding:5px 0;}
.linkarea ul{ width:1000px; margin:0 auto;}
.linkarea ul li{ width:225px; float:left; color:#666;margin-left:10px; position:relative; }
.linkarea ul li .accesskey{ position:absolute; top:-20px;}

.linkarea ol li{padding:5px 0; margin-left:0;}
.linkarea .contact{ color:#037dab}
.linkarea .contact a{ color: #037dab}
.linkarea .company{ font-size:0.8125rem;}

.footer{ display: flex; align-items: center; justify-content: center; flex-wrap: wrap; background-color: #3b689f; height:60px; text-align:center; color:#fff; line-height:40px;}
.footer a{color:#fff; margin:0 5px;}
.footer a:hover{color:#D1DFEF;}
.footer a#accessibility-badge{ margin-right: 30px; }


/* list裝飾 */
.list-dot{
	display: inline-block; 
	vertical-align: top;
}

.list-dot::before{
	content:' ';
	display: inline-block;
	width: 5px;
	height: 5px;
	margin-right: 15px;
	vertical-align: middle;
	background-color: black;
	border-radius: 50%;
}

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

a:focus, button:focus, input: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;
	z-index: 200;
	height: 100%;
	width: 100%;
	background-color: black;
	opacity: 0.8;
}

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


/*問答集：問題標題前的題示小三角形*/
.hint-triangle{
	display: inline-block;
	margin-right: 5px;
	border-top: 9px solid black;;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	transform-origin: center;
	transform: rotate(-90deg);
	transition: 0.2s linear;
}

.hint-triangle.active{
	transform: rotate(0deg);
}


.style6 li{
	margin: 0 0 10px 20px;
}

.question-list li{
	margin-bottom: 20px;
}

.question-list li:last-child{
	margin-bottom: 50px;
}

.question-list li a::before{
	content: ' ';
	display: inline-block;
	height: 3px;
	width: 3px;
	border: 4px solid #948383;
	border-radius: 50%;
	margin:5px 8px 0 0;
}




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

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

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

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

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

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

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

.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: 200;
    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 .title .function{
	display: inline-block;
	margin: 0 5px;
	line-height: 1rem;
	font-size: 1.1rem;
	padding: 8px 5px;
	color: #272727;
	background-color: #fff;
	border: 1px solid grey;
	border-radius: 5px;
}

.mobileMenuWrapper .mobileMenu .title .function:hover{
	cursor: pointer;
	background-color: #000;
	color: #fff;
}

.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{
	display: flex;
	justify-content: center;
	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 h1{
		transform: scale(0.8);
    	transform-origin: left;
		background-size: contain;
	}

	.header h1 a{
		width: 100%;
	}

	.header, 	 
	.linkarea ul {
		width: 95%;
	}

	.linkarea > ul {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}

	.linkarea > ul > li {
		width: 35vw;
		margin: 30px;
	}

	.linkarea > ul li ol{
		height: 100%;
		border-top: 1px solid #d1d1d1;
		padding: 5px;
	}

	/* 通用設定：隱藏內容 */
	.header .links,	
	.nav, 
	.frequentlink {
		display: none;
	}

	/* 通用設定：漢堡按鈕顯示 */
	.hambuger{
		display: block;
	}

	/* 個別調整: 非index.html之共版設定 */
	.pagesize{
		width: 90vw;
		margin: 45px auto;
	}

	.sub{
		display: none;
	}

	.content{
		width: 100%;
	}

	.content .btnset{
		width: 100%;
	}


	/* 個別調整: vorcher01.html */
	.cert-application tr{
		width: 100%;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}

	.cert-application td{
		width: 25%;
		min-width: 160px;
	}

	/* 個別調整: sitemap.html */
	.sitemap ol li{
		width: 90vw;
		display: flex;
		flex-wrap: wrap;
	}

	.sitemap ol li .title{
		min-width: 200px;
		margin: 20px 0 10px;
	}

	.sitemap ol li ul{
		width: 100%;
	}

	/* 個別調整: database03.CEXE */
	.statistics-wrapper{
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}

	.statistics-wrapper .statistics{
		margin: 20px 30px;
	}



	/* 個別調整: index.html */
	.index{
		width: 95vw;
	}

	.bigbanner {
		float: none;
		margin: 0 auto;
	}

	.firstrow,
	.secondrow{
		width: 95%;
		margin: 0 auto;
	}

	.secondrow ul{
		display: flex;
		align-items: center;
		justify-content: center;
		flex-wrap: wrap;
	}

	.secondrow li{
		float: none;
		width: 25vw;
		margin: 15px;
	}
	
	.thirddrow{
		width: 95%;
		margin: 0 auto;
	}

	.thirddrow .news{
		width: 100%;
		margin-bottom: 50px;
		
	}

	.thirddrow .newuser{
		width: 100%;
	}

	.thirddrow .newuser ul{
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}

	.thirddrow .newuser ul li{
		background-position: center;
		margin: 0 5px 50px 5px;
	}

	.thirddrow .newuser ul > a {
		display: none;
	}
}




/* 各尺寸設定 */
@media screen and (max-width: 576px) {
	/* 通用設定: header logo  */
	h1{
		width: 100%;
	}

	/* 通用設定: footer  */
	.linkarea ul{
		width: 100%;
	}

	.linkarea ul > li{
		width: 80%;
	}

	.footer{
		height: fit-content;
	}

	.footer a:first-child{
		width: 100%;
		order: 99;
		margin: 10px;
	}

	/* 通用設定：內容標題 */
	.content h3 {
		font-size: 1.3rem;
		background: none;
		text-indent: 0;
		margin: 20px 0;
		border-bottom: 0;
		border-left: 4px solid rgb(185, 185, 185);
    	padding-left: 5px;
	}

	/* 個別調整: index.html */
	.index{
		width: 90vw;
	}
	.bigbanner, .appliance{
		display: none;
	}

	.secondrow ul li{
		width: 80vw;
	}
}


@media screen and (min-width: 577px) and (max-width: 768px) {
	/* 個別調整: index.html */
	.bigbanner, .appliance{
		display: none;
	}
}


@media screen and (min-width: 769px) and (max-width: 992px) {
	/* 個別調整: index.html */
	.bigbanner{
		display: none;
	}	
}