﻿@charset "UTF-8";

/*桌機預設值
------------------------------------------------------------*/
*{
/*outline:0 !important;*/
font-family:sans-serif,微軟正黑體;
}

body{
padding:0;
margin:0;
font-size:1.5em;
}

a:focus{
border:2px dashed #b10000 !important;
outline:none !important;
}

img {
display: block;
max-width: 100%;
height: auto;
}

br{
border-bottom:1px dashed transparent;
content: "";
display: block;
padding:6px 0;
}

@media (max-width: 768px) {
.container{
width:100%;
margin:0 0;
padding:0;
}

.row{
margin:0;
padding:0;
}
}

/*col row padding設定為0*/
.no-gutter{
padding:0 !important;
margin:0 !important;
}

.no-gutter-left{
padding:30px 20px 0 0 !important;
margin:0;
}

.no-gutter-right{
padding:30px 0 10px 15px;
margin:0;
}

.no-gutter-homeleft{
padding:0 10px 0 0;
margin:0;
}

.no-gutter-homeright{
padding:0 0 0 10px;
margin:0;
}

.no-gutter-homemiddle{
padding:0 10px;
margin:0;
}

.mb-clear{
clear:both;
margin:15px 0 0 0;
padding:0;
display:block;
}

@media (max-width: 768px) {
.mb-nogutter-carousel{
margin:0 0 20px 0;
padding:0;
}

.mb-nogutter{
margin:0;
padding:0;
}

.m-center{
margin:0 15px !important;
padding:0;
width:90%;
}

.no-gutter-right{
padding:0 0 10px 15px;
margin:0;
}
}

@media (min-width: 767px) and (max-width: 991px) {

}

/*導盲磚設定
------------------------------------------------------------*/
.nojvs-type{
color:#fff;
}

a.skip-main{
position: absolute;
top: 10px;
left: 10px;
z-index: 99;
width: 1px;
height: 1px;
white-space: nowrap;
overflow: hidden;
color: #000;
}

a.skip-main:focus {
color:#fff;
background-color: rgba(0,0,0,.85);
top: auto;
left: auto;
width: auto;
height: auto;
overflow: auto;
margin: 10px auto;
padding: 6px;
border-radius: 10px;
text-align: center;
font-size: 1em;
z-index: 999;
}


a.top-guideBricks{
color:#fff;
text-decoration:none;
margin:0;
padding:0;
position:relative;
top:5px;
left:-2px;
float:left;
}

p.guideBricks{
float:left;
font-weight:400;
color:#999;
text-align:left;
}

p.guideBricks a{
color:#999;
text-decoration:none;
margin:0;
padding:0;
}

p.guideBricks-service{
float:left;
font-weight:400;
color:#999;
text-align:left;
position:relative;
left:-15px;
}

p.guideBricks-service a{
color:#999;
text-decoration:none;
}

@media (max-width: 768px) {
p.guideBricks{
position: absolute;
top:0;
left:0;
z-index:0;
}
}

/*header自訂
------------------------------------------------------------*/
/*pc header 不固定，但 mobile 固定*/
.navbar-fixed-top {
position: relative;
top: auto;
}

.navbar-collapse {
max-height: none;
}

@media (max-width: 767px) /* @grid-float-breakpoint -1 */{
.navbar-fixed-top{
position: fixed;
right: 0;
left: 0;
z-index: 1030;
}
}

.navbar-header {
background-color: #197d9c;
height:102px;
padding:0;
margin:0 0 0 0;
}

h1.navbar-brand{
width:325px;
height:85px;
padding:0;
margin:6px 0 0 0;
}

h1.navbar-brand a{
width:325px;
height:85px;
margin:0;
display:block;
}

@media (max-width: 768px) {
.navbar-header {
background-color: #197d9c;
height:70px;
margin:0 0 0 15px;
}

h1.navbar-brand{
width:210px;
height:55px;
padding:0;
margin:8px 0 0 0;
}

h1.navbar-brand a{
width:210px;
height:55px;
z-index:1050;
}

.top-width{
width:100%;
margin:0;
}
}

@media (min-width: 767px) and (max-width: 991px) {

}

/*主選單樣式設定
------------------------------------------------------------*/
.navbar-default {
background-color: #197d9c;
border-color: #197d9c;
border-width: 0px;
border-radius: 0px;
padding:0;
margin:0;
}

/* 連結 */
.navbar-default .navbar-nav > li > a {
color:#fff;
background-color:#197d9c;
font-size:1.3em;
height:20px;
margin:0 0 15px 0;
padding:0 15px;
background:url(../../images/menu-rightLine.gif) no-repeat right center;
}

.navbar-default .navbar-nav>li.last-noborder a,
.navbar-default .navbar-nav>li.last-noborder a:hover {
background:url(../../images/empty.png) no-repeat right center;
}

.navbar-default .navbar-nav>li.last-noborder a:focus {
background:url(../../images/empty.png) no-repeat right center;
border-bottom:4px solid #fff !important;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus{
color:#fff;
margin:0;
padding:0 15px 10px 15px;
height:35px;
background:url(../../images/menu-rightLine.gif) no-repeat right 1px;
border-bottom:4px solid #fff !important;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color:#fff;
background-color: #197d9c !important;
margin:0;
padding:3px 20px 10px 20px;
height:35px;
border-bottom:4px solid #fff !important;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
color: #fff;
background-color: #197d9c;
}

/* 下拉箭頭 */
.navbar-default .navbar-nav > .dropdown > a .caret {
border-top-color: #fff;
border-bottom-color: #fff;
}
.navbar-default .navbar-nav > .dropdown > a:hover .caret,
.navbar-default .navbar-nav > .dropdown > a:focus .caret {
border-top-color: #fff;
border-bottom-color: #fff;
}
.navbar-default .navbar-nav > .open > a .caret,
.navbar-default .navbar-nav > .open > a:hover .caret,
.navbar-default .navbar-nav > .open > a:focus .caret {
border-top-color: #fff;
border-bottom-color: #fff;
}

/* 下拉選單 */
.dropdown-menu-custom {
min-width:100%;
padding:0;
margin:0;
transform: translateX(0%);/*也會影響日曆的下拉*/
top: 100%;
left: 0%;
position: absolute;
z-index:999999;

display: none;
float: left;
text-align: left;
list-style: none;
background-color: #fff;
/*-webkit-background-clip: padding-box;*/
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .15);
border-radius: 0;
/*-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);*/
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}

.dropdown-menu-custom ul{
padding:0;
margin:0;
}

.dropdown-menu-custom li{
padding:0;
margin:0;
width: 300px;
list-style:none none !important;
background:url(../../images/svg/service-icon.svg) no-repeat 10px 50%;
}

.dropdown-menu-custom li a {
padding:0 0 0 35px;
margin:0;
text-decoration:none;
list-style:none none !important;
font-size:1.2em;
font-weight: 400;
line-height:50px;
height:50px;
color:#666;
text-align:left;
display:block;
border-bottom:1px dashed #ddd;
}

.dropdown-menu-custom li a:hover,.dropdown-menu-custom li a:focus {
color:#333;
display:block;
border-bottom:1px dashed #ddd;
background: #eee url(../../images/svg/service-icon-bk.svg) no-repeat 10px 50%;
}


@media (max-width: 768px) {
/*top fixed 背景設定*/
.navbar-default {
padding:0;
}

.navbar-default .navbar-nav{
position:relative;
top:47px;
height:100%;
}

.navbar-default .navbar-nav>li>a,
.navbar-default .navbar-nav>li>a:hover,
.navbar-default .navbar-nav>li>a:focus {
line-height:50px;
height:50px;
clear:both;
margin:0 15px !important;
padding:0;
display:block;
text-align:center;
border-bottom:1px solid #bad8e1 !important;
background:url(../../images/empty.png) no-repeat right center;
}

.navbar-default .navbar-nav>li.last-noborder a,
.navbar-default .navbar-nav>li.last-noborder a:hover {
background:url(../../images/empty.png) no-repeat right center;
}

.navbar-default .navbar-nav>li.last-noborder a:focus {
background:url(../../images/empty.png) no-repeat right center;
border-bottom:1px solid #bad8e1 !important;
}

.dropdown-menu-custom {
min-width: 91%;
left: 0%;
position: relative;/*重要:手機下拉展開*/
z-index:999999;
text-align: center;
margin:0 15px !important;
}

.dropdown-menu-custom ul{
padding:0;
margin:0;
}

.dropdown-menu-custom li{
width:100%;
text-align:center;
margin:0;
padding:0;
background:#fff url(../../images/empty.png) no-repeat right center;
}

.dropdown-menu-custom li a {
width:100% !important;
text-align:center;
margin:0;
padding:0;
font-size:1.2em;
border-bottom:1px dashed #197d9c;
}

.dropdown-menu-custom li a:hover,.dropdown-menu-custom li a:focus {
border-bottom:1px dashed #197d9c;
background: #eeeeee url(../../images/empty.png) no-repeat right center;
}
}

/* 手機版右方關閉按鈕 */
.navbar-toggle {
border-radius: 0px;
border:1px solid #fff !important;
background-color:#fff;
position: relative;
float: right;
padding: 8px 4px;
margin: 18px 15px 0 0;
background-image: none;
}

.navbar-toggle:hover ,.navbar-toggle:focus {
outline: 0;
border:1px solid #fff !important;
background-color: #fff !important;
}

.navbar-toggle .icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
background-color: #197d9c !important;
}

.navbar-toggle .icon-bar + .icon-bar {
margin-top: 4px;
}

/*動態*/
.navbar-toggle .icon-bar:nth-of-type(2) {
top: 1px;
}

.navbar-toggle .icon-bar:nth-of-type(3) {
top: 2px;
}

.navbar-toggle .icon-bar {
position: relative;
transition: all 500ms ease-in-out;
}

.navbar-toggle.active .icon-bar:nth-of-type(1) {
top: 6px;
transform: rotate(45deg);
}

.navbar-toggle.active .icon-bar:nth-of-type(2) {
background-color: transparent !important;
}

.navbar-toggle.active .icon-bar:nth-of-type(3) {
top: -6px;
transform: rotate(-45deg);
}

@media (max-width: 767px) {
/*手機選單高度展開*/
.navbar-collapse { 
height: 100vh !important;
background-color:#197d9c;
border:1px solid #197d9c !important;
} 
.navbar-default .navbar-nav .open .dropdown-menu-custom > li > a {
color: #197d9c;
}
.navbar-default .navbar-nav .open .dropdown-menu-custom > li > a:hover,
.navbar-default .navbar-nav .open .dropdown-menu-custom > li > a:focus {
color: #197d9c;
}
}

/*平版右邊小按鈕出現設定*/
@media (min-width: 767px) and (max-width: 991px) {
.navbar-header {
float: none !important;
}
.navbar-toggle {
display: block !important;
}
.navbar-collapse {
border-top: 1px solid transparent !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1) !important;
}

.navbar-collapse.collapse {
display: none !important;
}
.navbar-nav {
float: none !important;
margin: 7.5px -15px !important;
}
.navbar-nav>li {
float: none !important;
}
.navbar-nav>li>a {
padding-top: 10px !important;
padding-bottom: 10px !important;
}
.navbar-text {
float: none!important;
margin: 15px 0!important;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in { 
display: block !important;
}
.collapsing {
overflow: hidden !important;
}
}

/*全站右上角資訊
------------------------------------------------------------*/
.rightTop{
background-color:#1a7d9c;
width:100%;
}

p.calendar-m{
margin:0;
padding:0;
color:#1a7d9c;
clear:both;
height:40px;
line-height:40px;
font-weight:400;
display: block;
text-align:center !important;
}

.top-sub{
margin:15px 0;
padding:0;
float:right;
width:630px;
}

.top-sub p.calendar{
margin:0 20px 0 0;
padding:0;
float:left;
color:#fff;
font-weight:400;
height:35px;
line-height:35px;
}

.top-sub ul{
margin:0;
padding:0;
}

.top-sub ul a{
margin:0;
padding:0;
float:left;
color:#fff;
font-weight:400;
text-decoration:none;
}

.top-sub ul li{
margin:0;
padding:0;
float:left;
list-style: none none;
font-size:1em;
height:35px;
line-height:35px;
}

.top-sub ul li a{
margin:0;
padding:0 7px;
color:#fff;
font-weight:400;
text-decoration:none;
height:35px;
line-height:35px;
}

p.icon-fb{
width:35px;
height:35px;
float:left;
margin:4px 0 0 4px;
}

p.icon-fb a{
background:url(../../images/svg/icon-fb.svg) no-repeat 0 0;
width:35px;
height:35px;
display:block;
text-indent:-99999px;
}

p.icon-line{
width:35px;
height:35px;
float:right;
margin:4px 0 0 0;
}

p.icon-line a{
background:url(../../images/svg/icon-line.svg) no-repeat 0 0;
width:35px;
height:35px;
display:block;
text-indent:-99999px;
}

@media (max-width: 768px) {
p.calendar-m{
margin:0;
padding:0;
color:#1a7d9c;
clear:both;
height:40px;
line-height:40px;
font-weight:400;
display: block;
text-align:center !important;

position:relative;
top:15px;
}

.top-sub{
margin:0 0 17px 0 !important;
padding:0 !important;
width:100%;
height:102px;
display:block;
clear:both;
background-color:#197d9c;
position:relative;
top:65px;
left:0;
z-index:2;
}

.top-sub ul a{
margin:0;
padding:0;
font-size:1em;
color:#fff;
font-weight:700;
text-decoration:none;
}

.top-sub ul li{
margin:0;
padding:0;
font-size:1.3em;
height:50px;
line-height:50px;
border-bottom:1px solid #bad8e1; 
color:#333;
font-weight:700;
text-decoration:none;
text-align:center;
width:100%;
display:block;
}

.top-sub ul li a{
margin:0 !important;
padding:0!important;
text-align:center !important;
height:50px;
line-height:50px;
width:100%;
display:block;
}
}

@media (min-width: 767px) and (max-width: 991px){

}

/*search bar*/
.search-place{
width:310px;
float:right;
margin:0;
padding:0;
}

#custom-search-input{
padding: 0;
border: solid 1px #fff;
border-radius: 0;
background-color:#fff !important;
width:150px;
float:left;
margin:0 0 0 15px;
}

#custom-search-input input{
border: 0;
box-shadow: none;
}

label.search-type{
color:#fff;
font-weight:400;
float:left;
height:35px;
line-height:35px;
margin:0;
padding:0;
}

#custom-search-input button{
margin: 2px 0 0 0;
background: none;
box-shadow: none;
border: 0;
color: #197d9c;
padding: 0 8px 0 10px;
}

#custom-search-input button:hover{
border: 0;
box-shadow: none;
}

#custom-search-input button:focus{
border:2px dashed #b10000 !important;
outline:none !important;
height:35px;
line-height:35px;
margin:0;
padding: 0 8px 0 10px;
}

#custom-search-input .glyphicon-search{
font-size: 1.3em;
}

.form-control {
display: block;
width: 100%;
height: 35px;
padding: 0 10px;
font-size: 1em;
line-height: 1.42857143;
color: #666;
background-color: transparent !important;
background-image: none;
border: 1px solid #ddd;
border-radius: 0px;
/*-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);*/
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
/*-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;*/
/*-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;*/
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.form-control:focus,
.form-control-other:focus {
border: 2px solid #b10000 !important;
border-color: #b10000 !important;

/*-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(0, 0, 0, .6);*/
box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(0, 0, 0, .6);
}

/*.form-control::-moz-placeholder,
.form-control-other::-moz-placeholder {
color: #666;
opacity: 1;
}

.form-control:-ms-input-placeholder,
.form-control-other:-ms-input-placeholder{
color: #666;
}

.form-control::-webkit-input-placeholder,
.form-control-other::-webkit-input-placeholder {
color: #666;
}*/

.form-control-other {
display: block;
width: 100%;
height: 35px;
padding: 0 10px;
font-size: .9em;
line-height: 1.42857143;
color: #666;
background-color: transparent !important;
background-image: none;
border: 1px solid #999 !important;
border-radius: 0px;
/*-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);*/
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
/*-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;*/
/*-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;*/
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.btn-info {
color: #fff;
background-color: #197d9c;
border-color: #197d9c;
}

.btn-info:hover,
.btn-info:focus,
.btn-info.focus,
.btn-info:active,
.btn-info.active,
.open > .dropdown-toggle.btn-info {
color: #fff;
background-color: #197d9c;
border-color: #197d9c;
}

@media (max-width: 768px) {
.search-place{
width:95%;
margin:0;
padding:0;
background-color: #fff;
position:relative;
top:-151px;
left:-15px;
z-index:3;
clear:both;
}

#custom-search-input{
width:100%;
}

#custom-search-input{
padding: 1px;
border-radius: 0;
background-color: #fff;
width:100%;
}

.form-control {
display: block;
width: 100%;
height: 45px;
padding: 10px 17px 10px 0;
margin:0;
font-size: 1.3em;
color: #333;
background-color: #fff;
background-image: none;
border: 1px solid #fff;
}
}

/*首頁形象圖輸播
------------------------------------------------------------*/
/* Carousel Styles */
.carousel-indicators .active {
background-color: #fff;
}
.carousel-indicators-numbers li{
text-indent: 0;
margin: 0 2px;
width: 30px;
height: 30px;
border: none;
border-radius: 100%;
line-height: 30px;
color: #197d9c;
background-color: #fff;
}

.carousel-indicators-numbers li a{
color: #197d9c;
background-color: #fff;
text-decoration:none;

}
.carousel-indicators-numbers li.active , .carousel-indicators-numbers li:hover {
margin: 0 2px;
width: 30px;
height: 30px;
color: #fff !important;
background-color: #197d9c;
text-decoration:none;
display:inline-block;
}

.carousel-indicators-numbers li.active a, .carousel-indicators-numbers li:hover a, .carousel-indicators-numbers li:hover a:focus {
margin: 0 2px;
width: 30px;
height: 30px;
color: #fff !important;
background-color: #197d9c;
text-decoration:none;
}

.carousel-inner .item img {
width:100%;
margin:0 0 0 15px;
padding:0;
}

.carousel-inner .item a{
margin:0;
padding:0;
}

.carousel-inner .item a:focus{
border:2px dashed #b10000 !important;
outline:none !important;
display: block;
margin:0;
padding:0;
}


/* 移除首頁banner大圖兩邊漸層 carousel remove gradient */
.carousel-control.left, .carousel-control.right {
background-image: none !important;
}

.carousel-line {
border-top:1px solid #f5eacd;
border-bottom:1px solid #f5eacd;
background-color:#000;
box-shadow: -2px 3px 20px #000; 
}

/*首頁banner大圖改左右 arrow*/
.carousel-control {
position: absolute;
top: 50%; /* pushes the icon in the middle of the height */
z-index: 5;
display: inline-block;
}

.carousel-control > img{        
position: absolute;
/*set position of image from top to be 50%...*/
top: 50%;
/*and then shift it down to make it perfectly center.*/
transform: translate(-50%, -50%) !important;

z-index: 5;
display: inline-block;
}

.carousel-control.left{
width: 40px;
height: 250px;
position: absolute;
top: 0;
left:0;
z-index: 5;
display: inline-block;
margin-top: 0;
margin-left: 0;
}

.carousel-control.right{
width: 40px;
height: 250px;
position: absolute;
top: 0;
right: 0;
z-index: 5;
display: inline-block;
margin-top: 0;
margin-left: 0;
}

@media (max-width: 768px) {
a.left:focus,a.right:focus {
width:60px;
display: block;
}
}

/*淡入淡出效果*/
.carousel-fade .carousel-inner .item {
transition-property: opacity;
}
.carousel-fade .carousel-inner .item,  
.carousel-fade .carousel-inner .active.left,  
.carousel-fade .carousel-inner .active.right {
opacity: 0;
}
.carousel-fade .carousel-inner .active,  
.carousel-fade .carousel-inner .next.left,  
.carousel-fade .carousel-inner .prev.right {
opacity: 1;
}
.carousel-fade .carousel-inner .next,  
.carousel-fade .carousel-inner .prev,  
.carousel-fade .carousel-inner .active.left,  
.carousel-fade .carousel-inner .active.right {
left: 0;
transform: translate3d(0, 0, 0);
}
.carousel-fade .carousel-control {
z-index: 2;
}

/*宣導專區
------------------------------------------------------------*/
a.pro-img-infor{
text-decoration:none;
}

a.pro-img-infor b{
font-size:1.2em;
font-weight:400;
color:#333;
text-align:center;
margin:0;
padding:10px 0;
display:block;
}

a.pro-img-infor img{
border:1px solid #ddd;
}

.media-carousel {
margin-bottom: 0;
padding: 0 40px 5px 40px;
margin-top: 20px;
}

/* Previous button  */
.media-carousel .carousel-control.left {
left: 0;
width : 40px;
height: 40px;
display:block;
overflow:hidden;
margin-top: 9%;
background-image: none;
background: none repeat scroll 0 0 #333;
border-radius: 23px 23px 23px 23px;
}

.media-carousel .carousel-control.left:before {
content: "\f053"; /*--You can add font icon code here--*/
font-family: FontAwesome;
font-size:1.3em;
margin:0;
padding:30px 200px 50px 0 !important;
position:relative;
top:3px;
left:9px;
}

/* Next button  */
.media-carousel .carousel-control.right {
right: 0px !important;
width : 40px;
height: 40px;
display:block;
overflow:hidden;
margin-top: 9%;
background-image: none;
background: none repeat scroll 0 0 #333;
border-radius: 23px 23px 23px 23px;
}

.media-carousel .carousel-control.right:before {
content: "\f054"; /*--You can add font icon code here--*/
font-family: FontAwesome;
font-size:1.3em;
margin:0;
padding:30px 200px 50px 0 !important;
position:relative;
top:3px;
left:12px;
}

/* Changes the position of the indicators */
.media-carousel .carousel-indicators {
right: 50%;
top: auto;
bottom: 0px;
margin-right: 0px;
}

/* Changes the colour of the indicators */
.media-carousel .carousel-indicators li {
background: #c0c0c0;
}

.media-carousel .carousel-indicators .active {
background: #333;
}
.media-carousel img{
width: 100%;
height: 100%;
}

@media (max-width: 768px) {
a.pro-img-infor b{
font-size:1.1em;
line-height:25px;
}

a.pro-img-infor img{
border:1px solid #ddd;
margin:0;
padding:0;
}

.media-carousel .carousel-control.left {
width : 35px;
height: 35px;
margin-top: 24%;
}

.media-carousel .carousel-control.right {
width : 35px;
height: 35px;
margin-top: 24%;
}
}

/*首頁中間內容設定
------------------------------------------------------------*/
h2.service-title{
font-size:1.3em;
font-weight:700;
color:#197d9c;
text-align:left;
border-bottom:5px solid #197d9c;
margin:0 0 0 0;
padding:0 0 5px 0;
width:105px;
position:relative;
top:0;
z-index:2;
}

.service-box{
border:1px solid #197d9c;
display:block;
background:url(../../images/service-bg.png) no-repeat center bottom;
margin:0;
padding:0;
height:447px;
position:relative;
top:-3px;
z-index:1;
}

.service-box-in{
border:1px solid #197d9c;
display:block;
background:url(../../images/service-bg.png) no-repeat center bottom;
margin:0 0 50px 0;
padding:0 0 150px 0;
height:100%;
position:relative;
top:-3px;
z-index:1;
}

ul.service-list{
margin:10px 10px;
padding:0;
}

ul.service-list li{
margin:0;
padding:0;
list-style:none none;
}

ul.service-list li a{
margin:0 0 13px 0;
padding:0 0 0 20px;
font-size:1.1em;
font-weight:400;
color:#666;
text-align:left;
text-decoration:none;
line-height:23px;
width:100%;
display:block;
background:url(../../images/svg/service-icon.svg) no-repeat 0 0;
}

ul.service-list li a:hover,ul.service-list li a:focus{
color:#333;
background:url(../../images/svg/service-icon-bk.svg) no-repeat 0 0;
}

h2.login-svg{
width:400px;
height:400px;
display:block;
margin:20px 0 0 0;
padding:0;
overflow:hidden;
}

h2.login-svg a{
width:400px;
height:400px;
display:block !important;
margin:0;
padding:0;
}

h2.login-svg a:focus{
border:2px dashed #b10000 !important;
outline:none !important;
}

h2.login-svg a img{
width:95%;
}

h3.home-title-color1{
margin:20px 0 0 0;
padding:0;
font-size:1.4em;
font-weight:400;
text-align:center;
width:100%;
height:30px;
}

h3.home-title-color1 b{
margin:0 auto;
padding:5px 0;
font-weight:400;
color:#197d9c;
width:100px;
border-bottom:5px solid #197d9c;
}

h3.home-title-color1 a{
margin:0;
padding:0;
font-size:.8em;
font-weight:100;
color:#666;
text-align:right;
text-decoration:none;
float:right;
}

h3.home-title-color2{
margin:20px 0 0 0;
padding:0;
font-size:1.4em;
font-weight:400;
text-align:center;
width:100%;
height:30px;
}

h3.home-title-color2 b{
margin:0 auto;
padding:5px 0;
font-weight:400;
color:#797125;
width:100px;
border-bottom:5px solid #797125;
}

h3.home-title-color3{
margin:20px 0 0 0;
padding:0;
font-size:1.4em;
font-weight:400;
text-align:center;
width:100%;
height:30px;
}

h3.home-title-color3 b{
margin:0 auto;
padding:5px 0;
font-weight:400;
color:#197d9c;
width:100px;
border-bottom:5px solid #197d9c;
}

.home-infoHeight{
margin:0 0 20px 0;
padding:15px 0;
display:block;
height:280px;
border-top:1px solid #197d9c;
border-bottom:1px solid #197d9c;
}

.home-infoHeight-Propaganda{
margin:0 0 50px 0;
padding:15px 0;
display:block;
height:auto;
border-top:1px solid #197d9c;
border-bottom:1px solid #197d9c;
}

.border-color{
border-top:1px solid #797125 !important;
border-bottom:1px solid #797125 !important;
}

ul.home-news{
margin:0 0 0 5px;
padding:0;
}

ul.home-news li{
margin:0 0 15px 0;
padding:0;
list-style:none none;
}

ul.home-news li a{
margin:0;
padding:0;
font-size:1.1em;
font-weight:400;
text-align:left;
text-decoration:none;
line-height:23px;
color:#666;
height:70px;
display:block;
overflow:hidden;
}

ul.home-news li a:hover,
ul.home-news li a:focus{
color:#333 !important;
}

ul.home-news li a b{
margin:0;
padding:0;
font-weight:400;
color:#197d9c;
line-height:10px;
}

ul.home-news li a b:before {
content: "\f0da"; /*--You can add font icon code here--*/
font-family: FontAwesome;
color:#197d9c;
padding:0 5px 0 0;
margin:0;
}

ul.home-news li a br{
border-bottom:1px dashed transparent;
content: "";
display: block;
padding:1px 0
}

ul.home-Certificate{
margin:0;
padding:0;
text-align:center;
}

ul.home-Certificate li{
margin:0;
padding:0;
list-style:none none;
float:left;
width:50%;
height:80%;
display:inline-block;
}

ul.home-Certificate li a{
margin:0;
padding:0;
display:block;
text-indent:-99999px;
}

ul.home-Certificate li.certificate-logo1,
ul.home-Certificate li.certificate-logo2,
ul.home-Certificate li.certificate-logo3,
ul.home-Certificate li.certificate-logo4{
width:50%;
}

ul.home-Certificate li.certificate-logo1 a{
background: url(../../images/svg/certificate-logo1.svg) no-repeat center 0;
height:125px;
display:block;
}

ul.home-Certificate li.certificate-logo2 a{
background: url(../../images/svg/certificate-logo2.svg) no-repeat center 0;
height:125px;
display:block;
}

ul.home-Certificate li.certificate-logo3 a{
background: url(../../images/svg/certificate-logo3.svg) no-repeat center 0;
height:125px;
display:block;
}

ul.home-Certificate li.certificate-logo4 a{
background: url(../../images/svg/certificate-logo4.svg) no-repeat center 0;
height:125px;
display:block;
}

ul.home-links{
margin:0;
padding:0;
}

ul.home-links li{
margin:0;
padding:0;
list-style:none none;
text-align:center;
}

ul.home-links li a{
margin:0;
padding:0;
font-size:1.1em;
line-height:35px;
font-weight:400;
text-decoration:none;
color:#666;
width:100%;
display:block;
}

ul.home-links li a:hover,ul.home-links li a:focus{
color:#333;
}

@media (max-width: 768px) {
.service-box{
background:url(../../images/empty.png) no-repeat center bottom;
margin:0 15px 20px 0;
padding:0;
height:auto;
}

h2.login-svg{
width:100%;
margin:0 auto;
height:100%;
display:block;
}

h2.login-svg a{
width:100%;
margin:0 auto;
height:100%;
display:block;
}

h2.login-svg a img{
width:100%;
}

h3.home-title-color1 b,
h3.home-title-color2 b,
h3.home-title-color3 b{
padding:5px 0 6px 0;
}

h3.home-title-color1 b{
position:relative;
left:19px;
}

.home-infoHeight{
margin:0 0 5px 0;
height:auto;
}

.home-infoHeight-Propaganda{
margin:0 15px 10px 15px;
padding:0;
height:auto;
}

ul.home-news li{
margin:0 0 5px 0;
}

ul.home-Certificate{
display: block;
overflow: hidden;
}
}

@media (min-width: 767px) and (max-width: 991px) {
.home-infoHeight{
margin:0 0 5px 0;
height:270px;
}

.service-box{
height:275px;
}

ul.service-list li a{
font-size:1em;
margin:0 0 5px 0;
line-height:20px;
}

h3.home-title-color1 b,
h3.home-title-color2 b,
h3.home-title-color3 b{
padding:5px 0 1px 0;
}
}

/*麵包屑
------------------------------------------------------------*/
.breadcrumb-custom {
padding: 0;
margin:0 0 15px 0;
list-style: none;
font-size:1.1em;
}

.breadcrumb-custom > li {
color: #666;
display: inline-block;
}

.breadcrumb-custom li a{
padding:0;
margin:0;
color: #666;
text-align:left;
text-decoration:none;
}

.breadcrumb-custom li a.gBricksBread{
padding:0;
margin:0;
color: #666;
text-align:left;
text-decoration:none;
font-weight:400;
position:relative;
top:-2px;
left:0;
}

.breadcrumb-custom > li + li:before {
padding: 0 5px 0 0;
color: #666;
content: "/";
}

.breadcrumb-custom > .active {
color: #1a7d9c;
}

.breadcrumb-custom span {
padding:0;
float:right;
}

@media (max-width: 768px) {
.breadcrumb-custom {
margin:0 0 10px 0;
padding:0;
font-size:1.1em;
}
}

/*內頁：
------------------------------------------------------------*/
.in-titleImg{
margin:0 0 30px 0;
padding:0;
display:block;
border-top:1px solid #fff;
text-indent:-99999px;
width:100%;
height:250px;
background:url(../../images/in-titleImg.jpg) no-repeat center top;
}

h3.in-title{
margin:0;
padding:0 0 0 20px;
border-bottom:1px solid #1a7d9c;
width:100%;
}

h3.in-title b{
margin:0;
padding:0 5px 5px 5px;
border-bottom:5px solid #1a7d9c;
text-align:center;
font-size:1em;
color:#1a7d9c;
height:40px;
line-height:40px;
}

blockquote {
padding: 5px 10px;
margin:20px 0;
font-size: 1.1em;
line-height:25px;
color:#666;
border-left: 5px solid #eee;
}

.con-box{
margin:0;
padding:20px 0 50px 0;
overflow:hidden;
display:block;
}

p.m-seemore{
padding:0;
margin:20px 0;
font-size: 1.1em;
line-height:25px;
text-align:center;
color:#666;
}

p.m-seemore:before {
content: ""; /*--You can add font icon code here--*/
margin:0 5px 0 0;
padding: 20px 30px;
background:url(../../images/svg/finger.svg) no-repeat center center;
width:50px;
height:50px;
}

@media (max-width: 768px) {
.in-titleImg{
margin:0 0 10px 0;
height:108px;
background:url(../../images/in-titleImg-m.jpg) no-repeat center top;
/*-moz-background-size:100%;        /*for Firefox*/
/*-webkit-background-size:100%;        /*for Google Chrome、Safari*/
/*-o-background-size:100%;        /*for Opera*/
background-size:100%;        /*for IE*/
}

h3.in-title{
margin:0 0 25px 0;
padding:0;
border-bottom:1px solid #1a7d9c;
width:100%;
}

h3.in-title b{
margin:0 auto !important;
display:block;
width:200px;
position:relative;
top:3px;
}

.long1{
width:135px !important;
}

.long2{
width:255px !important;
}

.con-box{
padding: 0;
}
}

@media (min-width: 767px) and (max-width: 991px){

}

/*按鈕
------------------------------------------------------------*/
.btn {
display: inline-block;
padding: 11px 16px;
margin: 6px 0;
/*font-size: 1.1em;*/
font-weight: normal;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
border-radius: 4px;
}

.btn2 {
display: inline-block;
padding: 4px 20px;
margin: 3px 0;
/*font-size: 1.1em;*/
font-weight: normal;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
border-radius: 4px;
}

.btn-green {
font-size: 1.1em;
color: #fff !important;
background-color: #497f3e;
border-color: #497f3e;
}

.btn-green:hover,
.btn-green:focus,
.btn-green:active{
color: #fff !important;
background-color: #497f3e;
border-color: #497f3e;
}


.btn-hsnbackground {
font-size: 1.1em;
color: #fff !important;
background-color: #197d9c;
border-color: #197d9c;
}


.btn-gold {
font-size: 1.1em;
color: #fff !important;
background-color: #7c7531;
border-color: #7c7531;
}

.btn-gold:hover,
.btn-gold:focus,
.btn-gold:active{
color: #fff !important;
background-color: #7c7531;
border-color: #7c7531;
}

.input-group-addon {
padding:1px 8px;
height:35px;
line-height:1px;
font-size: 1em;
font-weight: normal;
color: #666;
text-align: center;
background-color: #eeeeee;
border: 1px solid #999;
border-radius: 0;
position:relative;
top:2px;
left:-1px;
}

.input-group-addon:hover,
.input-group-addon:focus {
color: #333;
}

.form-control-customize {
display: block;
width: 100%;
height: 49px;
padding: 6px 15px;
font-size: 1.2em;
line-height: 1.42857143;
color: #fff;
background-color: #197d9c ;
background-image: none;
border: 1px solid #197d9c;
border-radius: 0;
}

.form-control-customize:focus {
border-color: #197d9c;
outline: 0;
}

/*.form-control-customize::-moz-placeholder {
color: #fff;
opacity: 1;
}
.form-control-customize:-ms-input-placeholder {
color: #fff;
}
.form-control-customize::-webkit-input-placeholder {
color: #fff;
}*/

/*跳出視窗設定
------------------------------------------------------------*/
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 9999999; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(255,255,255); /* Fallback color */
background-color: rgba(255,255,255,0.3); /* Black w/ opacity */
}

.modal-dialog {
position: relative;
width: 100% !important;
margin: 0 !important;
padding:0 !important;
}

.modal-content {
position: relative;
background-color: transparent !important;
margin: 0 auto; /* 15% from the top and centered */
padding: 0;
border-radius: 0;
width: 825px; /* Could be more or less, depending on screen size */
border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, 0);
/*-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0);*/
box-shadow: 0 3px 9px rgba(0, 0, 0, 0);
}

.modal-header {
min-height: 0px;
padding:0;
margin:100px 0 0 0;
border-bottom: 0px solid transparent !important;
}

.modal-header .close {
position: relative;
/*set position of image from top to be 50%...*/
top:-25px;
right:-25px;
z-index:2;
width:50px;
height:50px;
text-indent:-99999px;
background:url(../../images/svg/lightbox_close.svg) no-repeat right 0;
}

.close {
width:50px;
height:50px;
display:block;
/*filter: alpha(opacity=100) !important;*/
opacity: 1 !important;
}

.close:focus {
border:2px dashed #b10000 !important;
outline:none !important;
}

.modal-body {
padding:0 25px 20px 25px;
margin:0 0 30px 0;
background-color:#fff;
border-bottom:5px groove #5da3d6;
}

p.modal-explainType{
font-size:1.2em;
color:#666;
text-align:center;
line-height:30px;
margin:0 0 10px 0;
padding:0;
}

@media (max-width: 768px) {
.modal-content {
width:95%;
}

.modal-header {
margin:85px 0 0 0;
}

.modal-header .close {
width:100%;
right:0;
background:url(../../images/svg/lightbox_close.svg) no-repeat center center;
}

.modal-body {
padding:0 0 0 0;
/*-moz-background-size:120% !important;        /*for Firefox*/
/*-webkit-background-size:120% !important;        /*for Google Chrome、Safari*/
/*-o-background-size:120% !important;        /*for Opera*/
background-size:120% !important;        /*for IE*/
}

.number-votes b{
font-size:1.2em !important;
}
}

@media (min-width: 767px) and (max-width: 991px) {

}

/*表格
------------------------------------------------------------*/
.table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-x: hidden;
overflow-y: hidden;
/*-ms-overflow-style: -ms-autohiding-scrollbar;*/
border: 1px solid transparent !important;
}

table,td,th {
vertical-align: middle !important;
}

th.table-title {
vertical-align: middle !important;
border-bottom: 1px solid #7c7531 !important;
border-right: 8px solid #fff !important;
height: 40px;
text-align:center;
background-color: #7c7531;
color:#fff;
font-size:1.1em;
font-weight:400;
margin:0;
padding:0;
}


th.table-title2 {
vertical-align: middle !important;
border-bottom: 1px solid #7c7531 !important;
height: 40px;
text-align:center;
background-color: #7c7531;
color:#fff;
font-size:1.1em;
font-weight:400;
margin:0;
padding:0;
}

th.toleft{
text-align:left;
vertical-align: middle !important;
border-bottom: 1px solid #7c7531 !important;
border-right: 8px solid #fff !important;
height: 40px;
background-color: #7c7531;
color:#fff;
font-size:1.1em;
font-weight:400;
margin:0;
padding:0;
}

td.width-custom  {
border-top: 1px solid #fff;
border-right: 8px solid #fff;
border-bottom: 2px dashed #7c7531;
border-left: 1px solid #fff;
font-size:1.1em;
font-weight:400;
color:#666;
text-align:left;
margin:0;
padding:0;
}

td.width-custom2-left  {
font-size:1.1em;
font-weight:400;
color:#666;
text-align:left;
margin:0;
padding:0;
}

td.width-custom2-center  {
font-size:1.1em;
font-weight:400;
color:#666;
text-align:center;
margin:0;
padding:0;
}

tr.line-hover:hover{
background-color:#e8f2f5 !important;
}

td.width-custom p {
vertical-align: middle !important;
text-align:center;
color:#666;
margin:0;
padding:0;
}

td.width-custom p a{
text-align:center;
color:#197d9c;
text-decoration:none;
}

td.width-custom a,td.width-custom a:hover{
font-size:1.1em;
line-height:23px;
color:#666;
text-align:center;
text-decoration: none;
display:block;
}

td.width-custom a:focus{
color:#333;
text-decoration:none;
}

td.width-custom br,
td.width-custom p br{
border-bottom:1px dashed transparent;
content: "";
display: block;
padding:0px 0
}

tr.odd-color1 {
background-color:#f4f3eb;
}

tr.odd-color2 {
background-color:#eff5ed;
}

.widt5{
width:5%;
}

.widt10{
width:10%;
}

.widt15{
width:15%;
}

.widt20{
width:20%;
}

.widt25{
width:25%;
}

.widt40{
width:40%;
}

.widt50{
width:50%;
}

.widt60{
width:60%;
}

.widt70{
width:70%;
}

.widt80{
width:80%;
}

ul.info-list,
ul.letter-list{
margin:0;
padding:0;
}

ul.info-list li{
margin:0 0 0 20px;
padding:0 0 5px 0;
list-style:outside decimal;
}

ul.letter-list li{
margin:0 0 0 20px;
padding:0 0 5px 0;
list-style:outside upper-alpha;
}

@media (max-width: 768px) {
.table-responsive {
overflow-x: auto;
padding:0 20px 20px 0 !important;
border:1px solid #fff;
}
}

@media (min-width: 767px) and (max-width: 991px){

}

/*新手上路
------------------------------------------------------------*/
h4.quick-title{
font-size:1.3em;
color:#333;
text-align:center;
display:block;
margin:0 0 20px 0;
}

@media (max-width: 768px) {

}

@media (min-width: 767px) and (max-width: 991px){

}
/*公佈欄
------------------------------------------------------------*/
.news-header{
font-size:1.1em;
background-color:#e1dfc8;
margin:100px 0 0 0;
padding:0;
height:40px;
line-height:40px;
display:block;
border-radius: 4px;
clear:both;
color:#333;
}

.news-header b.news-date{
width:90px;
font-weight:400;
text-align:center;
display:block;
float:left;
}

.news-header b.news-county{
width:80px;
font-weight:400;
text-align:center;
display:block;
float:left;
}

.news-header b.news-subject{
font-weight:400;
text-align:left;
display:block;
}

.news-detail{
font-size:1.1em;
margin:0 0 10px 0;
padding:10px 0;
height:75px;

text-align:center;
display:block;
clear:both;
color:#666;
}

.news-detail b.news-date{
width:90px;
font-weight:400;
text-align:center !important;
float:left;
line-height:25px;
border-bottom:1px dotted #999;

height:75px;
display:flex;/*Flex布局*/
/*display: -webkit-flex; /* Safari */
align-items:center !important;/*指定垂直居中*/
}

.news-detail b.news-county{
width:80px;
font-weight:400;
text-align:center;
display:block;
float:left;
height:75px;
line-height:75px;
border-bottom:1px dotted #999;
}

.news-detail b.news-subject{
font-weight:400;
text-align:left;
display:block;
overflow:hidden;
height:75px;
line-height:25px;
padding:0 10px 0 0;
border-bottom:1px dotted #999;
}

.news-detail b.news-subject a{
color:#666;
text-decoration:none;
height:75px;
display:flex;/*Flex布局*/
/*display: -webkit-flex; /* Safari */
align-items:center;/*指定垂直居中*/
}

.news-detail b.news-subject a:hover{
color:#333;
}

p.title-name-right{
text-align:left !important;
margin:0;
padding:0;
}

h3.lb-title{
font-size:1.3em;
color:#197d9c;
text-align:left;
line-height:30px;
display:block;
margin:20px 0;
padding:0 0 20px 0;
border-bottom:1px dotted #197d9c;
}

h1.lb-title{
font-size:1.3em;
color:#197d9c;
text-align:left;
line-height:30px;
display:block;
margin:20px 0;
padding:0 0 20px 0;
border-bottom:1px dotted #197d9c;
}
p.lb-newsCon{
font-size:1.1em;
color:#666;
text-align:left;
display:block;
margin:0 0 20px 0;
padding:0;
}

p.test{
font-size:9.1em;
}

@media (max-width: 768px) {
.news-header{
margin:70px 0 0 0;
}

.news-detail b.news-subject a{
display:flex;/*Flex布局*/
/*display: -webkit-flex; /* Safari */
align-items:flex-start;/*指定垂直*/
}
}

@media (min-width: 767px) and (max-width: 991px){
.news-detail b.news-subject a{
display:flex;/*Flex布局*/
/*display: -webkit-flex; /* Safari */
align-items:center;/*指定垂直居中*/
}
}

/*下載專區
------------------------------------------------------------*/
ul.download-list{
margin:0 0 20px 0;
padding:0;
display:block;
overflow:hidden;
}

ul.download-list li{
margin:0 0 0 25px;
padding:0 0 0 25px;
list-style:none none;
}

ul.download-list li a{
margin:0;
padding:0;
font-size:1.1em;
color:#666;
line-height:40px;
text-align:left;
text-decoration:none;
height:40px;
display:block;
}

ul.download-list li.file-download{
background:url(../../images/svg/file-download.svg) no-repeat left center;
}

ul.download-list li.file-alt{
background:url(../../images/svg/file-alt.svg) no-repeat left center;
}

ul.download-list li.file-word{
background:url(../../images/svg/file-word.svg) no-repeat left center;
}

ul.download-list li.file-pdf{
background:url(../../images/svg/file-pdf.svg) no-repeat left center;
}

ul.download-list-pdf{
margin:0 0 20px 0;
padding:0;
display:block;
overflow:hidden;
}

ul.download-list-pdf li{
margin:0 0 0 25px;
padding:0 0 0 25px;
list-style:none none;
float:left;
width:70%;
height:40px;
display:block;
background:url(../../images/svg/file-pdf.svg) no-repeat left center;
}

ul.download-list-pdf li a{
margin:0;
padding:0;
font-size:1.1em;
color:#666;
line-height:40px;
text-align:left;
text-decoration:none;
height:40px;
display:block;
float:left;
}

ul.download-list-pdf li b{
margin:0 0 0 25px;
padding:0 0 0 25px;
font-weight:400;width:25%;float:right;
background:url(../../images/svg/file-video.svg) no-repeat left center;
}

ul.download-list-pdf li b a{
margin:0;
padding:0;
font-weight:400;
color:#437e36;
height:40px;
display:block;
}

ul.download-list li a:hover,
ul.download-list-pdf li a:hover,
ul.download-list-pdf li b a:hover,
ul.download-list li a:focus,
ul.download-list-pdf li a:focus,
ul.download-list-pdf li b a:focus{
color:#333;
}

@media (max-width: 768px) {
ul.download-list li a{
margin:0 0 10px 0;
line-height:23px;
height:auto;
}

ul.download-list li.file-download{
background:url(../../images/svg/file-download.svg) no-repeat left top;
}

ul.download-list li.file-alt{
background:url(../../images/svg/file-alt.svg) no-repeat left top;
}

ul.download-list li.file-word{
background:url(../../images/svg/file-word.svg) no-repeat left top;
}

ul.download-list li.file-pdf{
background:url(../../images/svg/file-pdf.svg) no-repeat left top;
}

ul.download-list-pdf li{
margin:0 0 5px 25px;
width:90%;
height:auto;
background:url(../../images/svg/file-pdf.svg) no-repeat left top;
}

ul.download-list-pdf li a{
margin:0 0 5px 0;
line-height:23px;
height:auto;
}

ul.download-list-pdf li b{
margin:0;
width:100%;
float:left;
background:url(../../images/svg/file-video.svg) no-repeat left top;
}
}

@media (min-width: 767px) and (max-width: 991px){
}

/*常見問題
------------------------------------------------------------*/
/*QA 折疊面版*/
.panel-group .panel {
box-shadow: none;
border-color: #e1dfc8;
border-radius: 4px;
}

.panel-default > .panel-heading {
cursor: pointer;
padding: 0 0 5px 0;
border-radius: 0;
background-color:#e1dfc8;
}

.panel-default > .panel-heading + .panel-collapse > .panel-body {
border-top-color: #fff;
background-color:#fff;
padding:0 10px;
font-size:1.1em;
line-height:22px;
}

.panel-heading a:after {
content: "\f0d7"; /*--You can add font icon code here--*/
font-family: FontAwesome;
color: #333;
font-weight:400;
float: right;
position:relative;
right:-20px;
}

.panel-heading a.collapsed:after {
content: "\f0d7" !important; /*--You can add font icon code here--*/
font-family: FontAwesome;
color: #fff;
}

h4.panel-title {
margin: 0;
padding: 5px 30px 5px 5px;
font-size:1.1em;
font-weight:400;
line-height:22px;
color: #333;
}

h4.panel-title a{
padding: 0px;
display: block;
text-decoration:none;
}

h4.panel-title em{
margin: 0;
padding:0 8px 0 0;
font-size: 1.1em;
font-style:normal;
color: #333;
}

.QA-con {
margin: 5px;
padding: 0 0 10px 0;
transition: max-height 0.2s ease-out;
overflow: hidden;
}

.QA-con p{
color: #666;
}

.label-og {
background-color: #333;
}

.label-og[href]:hover,
.label-og[href]:focus {
background-color: #333;
}

@media (max-width: 768px) {

}

@media (min-width: 767px) and (max-width: 991px){

}

/*最新消息
------------------------------------------------------------*/
.page-all{
float:left;
margin:0;
padding:0;
width:100%;
height:40px;
clear:both;
display:block;
overflow:hidden;
}

.choose-all{
font-size:1.1em;
font-weight:400 !important;
color:#333;
text-align:left;
margin:0;
padding:0;
float:left;
width:100%;
height:40px;
}

.choose-all label{
font-weight:400 !important;
color:#333;
text-align:left;
margin:0;
padding:0;
float:left;
height:35px;
line-height:35px;
width:90px;
}

.questionList{
font-weight:400 !important;
width:150px;
}

.page-all2{
float:left;
margin:0;
padding:0;
width:100%;
height:50px;
clear:both;
display:block;
overflow:hidden;
}

.county-all{
font-size:1.1em;
font-weight:400 !important;
color:#333;
text-align:left;
margin:0;
padding:0;
float:left;
width:100%;
height:40px;
}

.county-all label{
font-weight:400 !important;
color:#333;
text-align:left;
margin:0;
padding:0;
float:left;
height:35px;
line-height:35px;
}

.county-all label.place{
font-weight:400 !important;
color:#333;
text-align:left;
margin:0 0 0 15px;
padding:0;
float:left;
height:35px;
line-height:35px;
}

.county-all label.placelast{
display:none;
}

.countyList{
font-weight:400 !important;
width:60%;
float:right;
}

.countyDate{
font-size:1em;
font-weight:400 !important;
position: relative;
top:0;
left:0px;
z-index:1029;
}

.countyDate2{
font-size:1em;
font-weight:400 !important;
width:85%;
float:right;
position: relative;
top:-21px;
left:0;
z-index:1029;
}

.toplace{
position: relative;
top:0px;
left:0;
}

.outline-btn a{
outline:none !important;
}

.date-go{
position: relative;
top:-7px;
right:0px;
float:right;
width:60%;
height:35px !important;
line-height:35px !important;
}

.date-go b{
font-weight:400;
position: relative;
top:-11px;
right:0;
height:35px !important;
line-height:35px !important;
}

b.toto{
color:#666;
padding:0 0 0 0;
font-weight:400;
float:left;
position: relative;
top:5px;
right:-8px;
}

.page-right{
float:right;
margin:0;
padding:0;
width:35%;
height:40px;
clear:both;
display:block;
overflow:hidden;
}

.page-number{
font-size:1.1em;
color:#333;
text-align:right;
display:block;
margin:0 10px 0 0;
padding:0;
height:35px;
line-height:35px;
width:45%;
float:right;
position:relative;
top:-40px;
}

.choose-page{
font-size:1.1em;
font-weight:400 !important;
color:#333;
text-align:left;
margin:0;
padding:0;
float:left;
width:60%;
height:40px;
position:relative;
top:0;
z-index:2;
}

.choose-page label{
font-weight:400 !important;
color:#333;
text-align:left;
margin:0;
padding:0;
float:left;
width:55px;
height:35px;
line-height:35px;
}

.pageList{
font-weight:400 !important;
width:45%;
}

p.news-date{
font-size:1.1em;
color:#333;
text-align:center;
display:block;
margin:20px 0 0 0;
padding:6px 4px;
border:1px solid #999;
border-radius: 4px;
float:left;
}

p.news-title{
font-size:1.1em;
color:#333;
text-align:left;
display:block;
line-height:23px;
margin:20px 0 20px 0;
padding:6px 0;
border-bottom:1px dotted #333;
}

p.news-title a{
color:#333;
text-align:left;
display:block;
line-height:23px;
margin:0;
padding:0;
text-decoration:none;
}

p.news-con{
font-size:1.1em;
color:#666;
text-align:left;
display:block;
line-height:23px;
margin:0 0 10px 0;
padding:0;
}

p.news-con a{
color:#197d9c;
}

.to-right{
float:right;
}

em#totalCount{
font-style:normal !important;
font-weight:400;
}

@media (max-width: 768px) {
.page-all{
width:100%;
height:45px;
margin:0px 0 0 0;
}

.page-all2{
float:none;
height:190px;
margin:15px 0 0 0;
}

.page-all-m{
width:100%;
height:220px;
}

.page-all-faq{
width:100%;
height:120px !important;
}

.for-bullitin{
margin:15px 0 0 0 !important;
height:80px !important;
}

.choose-all{
height:60px;
clear:both;
}

.choose-all label{
position: relative;
top:0;
left:0;
}

.countyList{
width:70%;
}

.county-all{
width:100%;
height:50px;
}

.county-all label.place{
margin:0;
}

.countyDate{
left:0;
width:70%;
position: relative;
top:0;
float:right;
}

.countyDate2{
top:-20px;
left:0;
width:70%;
}

.date-go{
position: relative;
top:0;
right:0;
float:right;
width:100%;
height:40px !important;
line-height:40px !important;
margin:0 0 100px 0;
}

.date-go b{
top:-12px;
right:0;
}

b.toto{
position: relative;
top:8px;
right:-70px;
}

.page-right{
width:100%;
height:60px;
}

.page-number{
width:30%;
float:right;
position:relative;
top:0;
}

.page-number-faq{
font-size:1.1em;
width:30%;
float:right;
position:relative;
top:-40px;
}

.choose-page{
width:55%;
margin:0;
}

.choose-page label{
position:relative;
top:0px;
width:55px;
}

.pageList{
font-size:1em;
font-weight:400 !important;
position: relative;
top:0;
left:0;
}

p.news-date{
float:none;
}

p.news-title{
margin:5px 0 20px 0;
}

.to-right{
float:none;
width:100%;
}
}

@media (min-width: 767px) and (max-width: 991px){
p.news-date{
float:left;
clear:both;
}

p.news-con{
margin:5px 0 20px 0;
float:right;
}

.page-all-m{
width:100%;
height:140px;
}

.page-all2{
height:90px;
margin:15px 0 0 0;
}

.questionList{
position: relative;
top:5px;
left:0;
}

.choose-all label{
position: relative;
top:5px;
left:0;
}

.countyList{
width:55%;
margin:0;
position: relative;
top:0;
left:0;
}

.county-all{
width:100%;
height:50px;
}

.county-all label.place{
margin:0;
}

.countyDate{
width:67%;
position: relative;
top:0;
left:0;
}

.countyDate2{
top:-20px;
left:0;
width:85%;
margin:0;
padding:0;
}

b.toto{
position: relative;
top:8px;
right:-12px;
}

.choose-page label{
top:5px;
}

.pageList{
top:5px;
}

.page-number-faq{
top:-35px;
}

.date-go{
position: relative;
top:-20px;
right:0;
float:left;
margin:0;
width:100%;
}

}

/*專業人士
------------------------------------------------------------*/
h4.wayType{
font-size:1.2em;
color:#333;
line-height:25px;
text-align:left;
display:block;
margin:10px 0;
padding:0;
clear:both;
}

.wayBlock{
font-size:1.1em;
color:#666;
line-height:28px;
text-align:left;
display:block;
margin:0 0 20px 0;
padding:0;
clear:both;
}

.wayBlock b{
font-size:1em;
font-weight:400;
color:#fff;
line-height:28px;
text-align:center;
margin:0 10px 20px 0 !important;
padding:4px 8px;
background-color:#197d9c;
border-radius: 4px;
}

@media (max-width: 768px) {

}

@media (min-width: 767px) and (max-width: 991px){

}

/*影音專區
------------------------------------------------------------*/
.video-box{
margin:0;
padding:0;
width:100%;
height:200px;
display: block;
}

.video-box a{
margin:0 0 30px 0;
padding:0;
display:block;
text-decoration:none;
position: relative;/*出現video圖示關鍵*/
overflow: hidden;
}

.video-box p{
margin:0;
padding:0;
font-size:1.05em;
text-align:left;
color:#333;
height:35px;
line-height:35px;
text-decoration:none;
}

.video-box a img{
margin:0;
padding:0;
width:100%;
}

.video-box:hover .empty-img {
opacity: 0.6;
}

.video-box:hover .middle {
opacity: 1;
}

.empty-img {
opacity: 1;
display: block;
width: 100%;
height: auto;
transition: .5s ease;
backface-visibility: hidden;
}

.middle {
transition: .5s ease;
opacity: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/*-ms-transform: translate(-50%, -50%);*/
}

.icon-video {
background:url(../../images/svg/icon-video.svg) no-repeat left top;
width:50px;
height:50px;
text-indent:-999999px;
}

@media (max-width: 768px) {
.video-box{
height:100%;
}
}

@media (min-width: 767px) and (max-width: 991px){
.video-box p{
height:55px;
line-height:22px;
}
}

/*網站導覽
------------------------------------------------------------*/
h4.smpTitle {
margin: 0;
padding:0 0 0 25px;
font-size: 1.3em;
font-weight: 700;
color: #7c7531;
text-align: left;
clear: both;
height:50px;
line-height:50px;
background:url(../../images/svg/circle.svg) no-repeat 0 50%;
}

.smp-list{
margin:0;
padding:0;
}

.smp-list p{
margin:0;
padding:0;
font-size: 1.1em;
font-weight: 700;
line-height: 40px;
color: #666;
text-align: left;
}

.smp-list ul{
margin:0 0 10px 0;
padding:0;
}

.smp-list ul li{
margin:0 0 0 45px;
padding:0;
font-size: 1.1em;
font-weight: 400;
line-height: 30px;
color: #666;
text-align: left;
list-style: outside decimal;
}

.smp-list-number-X{
margin:10px 0 0 0;
padding:20px 0 0 0;
border-top:1px dashed #ccc;
}

.smp-list-number-X ul{
margin:0;
padding:0;
}

.smp-list-number-X ul li{
margin:0;
padding:0;
font-size: 1.1em;
font-weight: 400;
line-height: 30px;
text-align: left;
list-style: none none;
}

.smp-list-number-X ul li a{
color: #333;
text-decoration:none;
float:left;
width:25%;
height:35px;
line-height:35px;
display:block;
}

h5.smp-title{
color: #1a7d9c;
height:35px;
line-height:35px;
margin:10px 8px;
}

h5.smp-title a{
color: #1a7d9c;
font-size:1.2em;
text-align:left;
border-bottom:3px solid #1a7d9c;
text-decoration:none;
width:100%;
height:35px;
line-height:35px;
display:block;
}

ul.smp-list-all{
margin:15px 8px;
padding:0;
display:block;
overflow:hidden;
}

ul.smp-list-all li{
margin:0;
padding:0;
list-style:none none;
}

ul.smp-list-all li a{
color: #666;
font-size:1.1em;
text-align:left;
text-decoration:none;
width:100%;
line-height:25px;
display:block;
}

h5.smp-title a:hover,
h5.smp-title a:focus,
ul.smp-list-all li a:hover,
ul.smp-list-all li a:focus{
color: #333;
}

@media (max-width: 768px) {
h4.smpTitle {
font-size: 1.2em;
margin: 0 0 10px 0;
height:auto;
line-height:25px;
display:block;
background:url(../../images/svg/circle.svg) no-repeat 0 top;
}

h5.smp-title{
margin:10px 0;
}

ul.smp-list-all{
margin:10px 0;
}

.smp-list ul{
margin:0 0 30px 0;
}

.smp-list ul li{
line-height: 23px;
margin:0 0 10px 45px;
}

.smp-list-number-X ul li a{
width:50%;
}

.smp-list-number-X{
margin:20px 0 0 0;
clear:both;
display:block;
height:91px;
}
}

/*搜尋頁
------------------------------------------------------------*/
.notfond{
width:100%;
margin:0 auto 70px auto;
padding:0;
display:block;
}

p.searchT{
font-size:1.2em;
text-align:left;
color:#333;
line-height:23px;
margin:0 0 10px 0;
}

@media (max-width: 768px) {
.notfond{
width:100%;
display:block;
}

p.searchT{
font-size:1.1em;
padding:0;
position:relative;
top:-10px;
left:0;
}
}

/*安全政策、隱私權政策、政府網站資料開放宣告
------------------------------------------------------------*/
h4.privacyTitle{
margin:0 0 10px 0;
padding:0 0 0 30px;
font-size:1.2em;
font-weight:700;
text-align:left;
color:#197d9c;
line-height:25px;
height:25px;
clear:both;
}

ul.expainList-none,ul.expainList-number{
margin:0 0 30px 0;
padding:0;
list-style:none none;
display:block;
}

ul.expainList-none li{
margin:0 0 20px 0;
padding:0;
font-size:1.1em;
font-weight:400;
text-align:left;
color:#666;
line-height:25px;
}

ul.expainList-none li b{
margin:0;
padding:10px 0 0 0;
font-weight:700;
color:#1a7d9c;
}

ul.expainList-number li{
margin:0 0 10px 60px;
padding:0;
font-size:1.1em;
font-weight:400;
text-align:left;
color:#666;
line-height:25px;
list-style:outside decimal-leading-zero;
}

ul.expainList-number b{
margin:0;
padding:10px 0 0 0;
font-size:1.1em;
font-weight:700;
color:#1a7d9c;
}

ul.expainList-icon{
margin:0 0 30px 50px;
padding:0;
list-style: outside disc;
display:block;
}

ul.expainList-icon li{
margin:0 0 20px 0;
padding:0;
font-size:1.1em;
font-weight:400;
text-align:left;
color:#666;
line-height:25px;
}

ul.expainList-icon ul{
margin:10px 0 20px 20px;
padding:0;
list-style: outside decimal;
display:block;
font-size:.9em;
}

ul.expainList-icon ul li{
margin:0 0 10px 0;
padding:0;
font-weight:400;
text-align:left;
color:#666;
line-height:25px;
}

p.explainType{
margin:0 0 30px 0;
padding:0 0 0 30px;
font-size:1.1em;
font-weight:400;
text-align:left;
color:#666;
line-height:25px;
}

p.explainType span{
color:#FF0004;
}

p.explainType br{
border-bottom:1px dashed transparent;
content: "";
display: block;
padding:1px 0
}

ul.expainList-number b:before,
ul.expainList-none li b:before{
content: "\f111";
font-family: FontAwesome;
padding:0 10px 0 0;
font-size:.5em !important;
font-weight:400;
color:#1a7d9c;
position:relative;
top:-1px;
}

ul.expainList-number br,
ul.expainList-none li br{
border-bottom:1px dashed transparent;
content: "";
display: block;
padding:4px 0
}

@media (max-width: 768px) {
h4.privacyTitle{
padding:0;
height:100%;
}

ul.expainList-number li{
margin:0 0 8px 30px;
padding:0;
}

p.explainType{
margin:0 0 30px 0;
padding:0;
}
}

/*footer自訂
------------------------------------------------------------*/
.footerbg-color{
background-color:#e8f2f5;
width:100%;
margin:0;
padding:30px 0 0 0;
}

ul.copyright-info{
margin:0;
padding:0;
text-align: center;
}

ul.copyright-info li{
margin:0 auto;
padding:0;
display: inline-block;
float:left;
width:17%;
list-style:none none;
}

ul.copyright-info li a{
margin:0 auto;
padding:0;
display: inline-block;
float:left;
width:100%;
text-indent:-999999px;
}

p.footer-contant{
font-size:1.1em;
color:#666;
text-align:left;
line-height:25px;
}

p.footer-contant a{
color:#666;
text-decoration:none;
}

p.footer-contant br{
border-bottom:1px dashed #e8f2f5;
content: "";
display: block;
padding:2px 0
}

p.footer-contant span{
font-size:2.5em;
font-weight:400;
}

p.footer-contant b{
font-size:1.3em;
font-weight:400;
line-height:35px;
}

p.copyright-text{
background-color:#197d9c;
width:100%;
margin:10px 0 0 0;
padding:6px 0;
text-align:center;
color:#fff;
font-size:.9em;
font-weight:400;
}

p.copyright-text br{
padding:1px 0;
}

p.footer_AA{
margin:0;
padding:0;
}

p.footer_AA a{
margin:0;
padding:0;
float:right;
}

@media (max-width: 768px) {
.footerbg-color{
margin:30px 0 0 0 !important;
}

ul.copyright-info{
border-bottom: 1px solid #197d9c;
display:block;
overflow:hidden;
margin:0 0 30px 0;
padding:0 0 30px 15px;
}

ul.copyright-info li{
width:50%;
}

p.footer-contant{
font-size:1em;
line-height:22px;
margin:0 15px;
}

p.footer-contant br{
padding:1px 0
}

p.footer-contant span{
font-size:2.1em;
}

p.footer-contant b{
font-size:1.2em;
line-height:30px;
}

p.copyright-text{
font-size:.8em;
padding:8px 3px;
}

p.copyright-text br{
padding:1px 0;
}

p.footer_AA a{
margin:0 15px 0 0;
position:relative;
top:-5px;
}
}

@media (min-width: 767px) and (max-width: 991px) {
ul.copyright-info{
margin:0 0 30px 0;
padding:0;
text-align:center;
border-bottom:1px solid #1a7d9c;
}

ul.copyright-info li{
width:24%;
}

ul.copyright-info{
margin:0;
border-bottom:1px solid transparent;
}

p.footer-contant{
font-size:1em;
line-height:20px;
}

p.footer-contant span{
font-size:1.8em;
}

p.footer-contant b{
font-size:1em;
line-height:30px;
}

p.footer_AA a{
margin:0 15px 0 0;
position:relative;
top:-8px;
}
}

/*footer永遠置底
------------------------------------------------------------*/*
html, body {
margin:0;
padding:0;
height:100%;
}

#id_wrapper {
position: relative;
min-height: 100%;
}

* html #id_wrapper{
height: 100%;
}

#id_header {
padding:0px 0 0 0;
}

#id_content {
overflow:auto;
}

#id_footer {
position: relative;
margin: 0 auto 0 auto;
}

* html #id_footer {
margin-bottom: 0px;
}

@media (max-width: 768px) {
#id_header {
padding:0px 0 0 0;
}

#id_content {
overflow:auto;
padding:70px 0 0 0;
}
}

@media (min-width: 767px) and (max-width: 991px) {
#id_content {
padding:0;
}
}

/*回頂端 go top自訂
------------------------------------------------------------*/
.go-top{
position:fixed;
right:15px;
bottom:213px;
width: 40px;
height: 70px;
display: none;
text-decoration: none;
border-radius: 23px 23px 23px 23px;
color:#fff;
text-align:center;
padding:0;
z-index:999;
border:2px solid transparent !important;
/*background-color: rgba(25, 125, 156, 0.8);*/
}

.go-top a,.go-top a:focus{
width: 45px;
height: 45px;
display:block;
border-radius: 0;
}

@media (max-width: 768px) {
.go-top{
right:13px;
bottom:220px;
}
}

@media screen and (orientation:landscape) {
.mb-nogutter{
margin:0;
padding:0;
}

.news-detail b.news-subject a{
display:flex;/*Flex布局*/
/*display: -webkit-flex; /* Safari */
align-items:center;/*指定垂直居中*/
}
}


#robot_icon {
  position: fixed;
  bottom: 150px;
  right: 10px;
  z-index: 15;
}
#robot_icon > a img {
  height: 94px;
  width: auto;
}

