@charset "utf-8";
/*  ===== 基本覆寫 ===== */
*{font-family:Verdana,微軟正黑體, Microsoft JhengHei, Arial, Helvetica, sans-serif;}
html,body{height:100%; margin:0; padding:0;}
body{background:url("../images/headerBg.jpg") no-repeat top center;}

/*  ===== ochi框架 ===== */
.WrapperHeader{}
.WrapperHeader .loginfo{padding-top:5px; text-align:right;}
.WrapperHeader .logo{padding-top:0px; padding-bottom:30px;}
.MainMenu{
height:3em;background-color:#f8ae5e; font-size:14px; z-index: 99;
background-image: -webkit-linear-gradient(top, #f8ae5e 0%, #f48e17 90%,#dadada 91%,#ffffff 100%);
background-image: -moz-linear-gradient(top, #f8ae5e 0%, #f48e17 90%,#dadada 91%,#ffffff 100%);
background-image: -ms-linear-gradient(top, #f8ae5e 0%, #f48e17 90%,#dadada 91%,#ffffff 100%);
background-image: -o-linear-gradient(top, #f8ae5e 0%, #f48e17 90%,#dadada 91%,#ffffff 100%);
background-image: linear-gradient(to bottom, #f8ae5e 0%, #f48e17 90%,#dadada 91%,#ffffff 100%);
}
.WrapperFooter{background:#e9e9e9;}
.WrapperFooter .footerblock{text-align:center; font-size:13px; line-height:1.5em; padding:10px 0;}
/* 側邊欄 */
.sidebar-wrapper {
  position: relative;
  height: 100%;
  overflow: auto;
  background-color: #fff;
}
#toggle-sidebar{ padding:0 5px; cursor:pointer; font-size:36px;}

/* 回到頂部 */
.WrapperBody .backTop{position:fixed; bottom:2%; right:-100px;opacity:0.7;}
.WrapperBody .backTop a{color:#fff; padding:10px 20px 10px 20px;background:#000;-webkit-border-radius:10px 0 0 10px;-moz-border-radius:10px 0 0 10px;border-radius:10px 0 0 10px; height:20px; text-decoration:none; font-size:16px;}
/*  ===== 系統使用第三方套件 ===== */
/* 預載畫面 */
#preloader {
	position: fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:#fff; /* change if the mask should have another color then white */
	z-index:999; /* makes sure it stays on top */
}

#status {
	text-align:center;
	position:absolute;
	width:100%;
	top:42%;/* 位置依使用圖示大小而微調 */
}
#loadingword{color:#999999;}

/* loading icon */
.sk-three-bounce {
  margin: 10px auto;
  width: 80px;
  text-align: center; }
  .sk-three-bounce .sk-child {
    width: 20px;
    height: 20px;
    background-color: #333;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-three-bounce 1.4s ease-in-out 0s infinite both;
            animation: sk-three-bounce 1.4s ease-in-out 0s infinite both; }
  .sk-three-bounce .sk-bounce1 {
    -webkit-animation-delay: -0.32s;
            animation-delay: -0.32s; }
  .sk-three-bounce .sk-bounce2 {
    -webkit-animation-delay: -0.16s;
            animation-delay: -0.16s; }

@-webkit-keyframes sk-three-bounce {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0); }
  40% {
    -webkit-transform: scale(1);
            transform: scale(1); } }

@keyframes sk-three-bounce {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0); }
  40% {
    -webkit-transform: scale(1);
            transform: scale(1); } }


/* superfish menu */
.superfishmenu ul a {
	padding: 0.7em 1em;
	text-decoration: none;
    text-shadow: 1px 1px 1px #000000;
	color: #fff;
}
.superfishmenu  ul  li:hover a,.superfishmenu  ul  li.sfHover a{
	background: #d57107;
}
.superfishmenu  ul  li  ul  li{
	background: #d57107;
	border-bottom:1px solid #bc7120;
}
.superfishmenu  ul  li  ul  li:last-child{border-bottom:0;}

.superfishmenu  ul  li  ul  li a:hover,
.superfishmenu  ul  li  ul  li.sfHover a:hover,
.superfishmenu ul li ul li ul li,
.superfishmenu ul li ul li.sfHover ul li a{
	background: #e88e2d;
}
.superfishmenu ul li ul li.sfHover ul li a:hover{
	background: #e88e2d;
}
.superfishmenu > ul li.activemenu{background: #e88e2d;}

/* easytab style */
    .easytabH ul.menubar{ margin:0;  padding: 0; }
    .easytabH .menubar li { display: inline-block; zoom:1; *display:inline; background: #e9e9e9; border: solid 1px #dbdbdb; border-bottom: none; -moz-border-radius: 10px 10px 0 0; -webkit-border-radius: 10px 10px 0 0; border-radius:10px 10px 0 0; border:0;}
    .easytabH .menubar li a { font-size: 14px; line-height: 2em; display: block; padding: 2px 15px; outline: none; text-decoration:none;}
    .easytabH .menubar li a:hover { background-color:#d1e4e9;-moz-border-radius: 10px 10px 0 0; -webkit-border-radius: 10px 10px 0 0; border-radius:10px 10px 0 0; text-decoration:none;}
    .easytabH .menubar li.active {border: solid #ccc 1px; border-bottom:0; background: #fff; padding-top: 6px; position: relative; top: 1px; border-radius:10px 10px 0 0; }
    .easytabH .menubar li a.active { font-weight:bold; color:#000; }
	.easytabH .menubar li a.active:hover{ background-color:transparent; text-decoration:none; cursor:default;}
    .easytabH .panel-container{ background: #fff; border: solid #dbdbdb 1px; padding: 10px; -moz-border-radius: 0 5px 5px 5px; -webkit-border-radius: 0 5px 5px 5px; border-radius: 0 5px 5px 5px;}
    /* easytab垂直tabs */
	.easytabV ul.menubar {list-style: none; margin: 0; padding: 0;float:left; border-right:1px solid #dbdbdb;}
	.easytabV .menubar li { width:auto; display: block; margin: 0; padding: 0; text-align:left; }
	.easytabV .menubar li a { display: block; padding: 5px 3px;  outline: none; background:#e9e9e9; margin-bottom:5px;}
	.easytabV .menubar li a:hover { text-decoration:none;-moz-border-radius:0; -webkit-border-radius:0; border-radius:0; }
	.easytabV .menubar li.selected-tab a{position: relative; left: 1px; background:#fff; border:1px solid #dbdbdb; border-right:0; border-left:0; color:#000;}
	.easytabV .panel-container{}
	
/* Magnific Popup */
.magpopup{
  position: relative;
  background: #FFF;
  padding: 0px;
  width: auto;
  width:95%;
  margin: 20px auto;
  border-radius:10px;
}
.magSizeS{max-width: 600px;}
.magSizeM{max-width: 900px;}
.magSizeL{max-width: 1300px;}

.magpopupTitle{padding:10px; border-radius:10px 10px 0 0; font-size:15px;
border-bottom:1px solid #c8c8c8; background-color:#f1f1f1;
background-image: -webkit-linear-gradient(top, #f1f1f1 0%, #ededed 60%, #dedede 100%);
background-image: -moz-linear-gradient(top, #f1f1f1 0%, #ededed 60%, #dedede 100%);
background-image: -ms-linear-gradient(top, #f1f1f1 0%, #ededed 60%, #dedede 100%);
background-image: -o-linear-gradient(top, #f1f1f1 0%, #ededed 60%, #dedede 100%);
background-image: linear-gradient(to bottom, #f1f1f1 0%, #ededed 60%, #dedede 100%);
}


/* overlay at start */
.mfp-fade.mfp-bg {
  opacity: 0;

  -webkit-transition: all 0.15s ease-out;
  -moz-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
}
/* overlay animate in */
.mfp-fade.mfp-bg.mfp-ready {
  opacity: 0.5;
}
/* overlay animate out */
.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}

/* content at start */
.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;

  -webkit-transition: all 0.15s ease-out;
  -moz-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
}
/* content animate it */
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}
/* content animate out */
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
}	
/*  ===== 套件覆寫用CSS ===== */
/* 覆寫bootstrap初始設定 */
.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 0px;
  padding-right: 0px;
}
/* 小於768px以下的螢幕 */
@media (max-width: 767px) {
	.no-gutter > [class*='col-'] {
    padding-right:0px;
    padding-left:0px;
	}
    .deskOnly{display: none;}
    .mobileOnly{display: inherit;}
    .btnmobile{width: 100%; display: block;}
    a.btnmobile{margin-bottom: 5px;}
    .DSBtitle{text-align: center;}
    .FontAwPa{padding-left: 0px;}
}
/* 介於991~768px的螢幕 */
@media (min-width: 768px) {
	.no-gutter > [class*='col-'] {
    padding-right:0px;
    padding-left:0px;
	}
	.container {
    width:100%;
  	}
    .deskOnly{display: none;}
    .mobileOnly{display: inherit;}
    .btnmobile{width:inherit; display: inline-block;}
    a.btnmobile{margin-bottom:inherit;}
    .DSBtitle{text-align: center;}
    .FontAwPa{padding-left: 0px;}
	
}
/* 介於1199~992px的螢幕 */
@media (min-width: 992px) { 
	.no-gutter > [class*='col-'] {
    padding-right:0px;
    padding-left:0px;
	}
	.container {
        max-width: 970px;
  	}
    .deskOnly{display: inline-block;}
    .mobileOnly{display: none;}
    .DSBtitle{text-align: left;}
    .FontAwPa{padding-left: 5px;}
	
}
/* 大於1200px的螢幕 內容最大到970px,故需覆寫bootstrap container原始設定 */
@media (min-width: 1200px) {
    .no-gutter > [class*='col-'] {
    padding-right:0px;
    padding-left:0px;
	}
	.container {
    max-width: 970px;
  	}
    .deskOnly{display: inline-block;}
    .mobileOnly{display: none;}
    .DSBtitle{text-align: left;}
    .FontAwPa{padding-left: 5px;}
	
}

/* 修正datepicker年月寬度 */
.xdsoft_datetimepicker .xdsoft_month {
	width: 80px;
}
.xdsoft_datetimepicker .xdsoft_year{
	width: 68px;
}

/*  ===== 本系統專用 ===== */
.maxHeightA{max-height: 150px;}
.maxHeightB{max-height: 200px;}
.maxHeightC{max-height: 250px;}
.maxHeightD{max-height: 400px;}
.maxWithA{max-width: 680px;}
.minWithA{min-width: 400px; overflow-x:hidden;}

.BoxBorderA{border:1px solid #dedede;}
.BoxBorderB{border:1px dashed #e6c550;}
.BoxBgA{background: #ffffff;}
.BoxBgB{background: #fff9e5;}
.BoxBgC{background: #ffa800;}
.BoxBgD{background: #9dcb12;}
.BoxBgE{background: #409de5;}
.BoxBgF{background: #e55abc;}
.BoxRadiusA{border-radius:10px;}
.BoxRadiusB{border-radius:5px;}
.BoxRadiusF{border-radius:30px;}

.BoxShadowA{box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.05), 0 2px 10px 0 rgba(0, 0, 0, 0.05);}
.iconA{color: #ba0c0c;}
.iconB{color: #ff9600;}
.iconC{color: #62b203;}
.iconD{color:#1970bd;}
.iconE{color:#cacaca;}
.titleLineA{border-bottom: 1px dashed #ababab; padding-bottom: 5px;}
.logoPadding{padding-top: 18px;}
.areabtn{transition:all 0.2s ease; border: 1px solid #dedede; background: #fff; padding: 5px; border-radius: 5px; display: block; text-align: center; color: #000;}
.areabtn:hover{cursor: pointer; background:#1a9d4e; color: #fff; text-decoration: none; }
.areabtn i{opacity: 0.3;}
.areabtn:hover i{opacity: 1;}
.searchinput{background: transparent; border: 0; width: 200px; color: #000; margin-right: 5px;}
a.searchbtn{ color:#1a9d4e;}

.font-black{color:#181818;}
.font-black a{color:#000000;text-decoration: none;border-bottom: 1px solid transparent;transition: all ease-in-out 0.2s;}
.font-black a:hover{color:#00b0c5;border-color:#00b0c5;}
.blockdisplay{display: block;}


/* 頁籤式按鈕V2 layout */
.tabmenublockV2wrapper{overflow-x: auto; overflow-y: hidden; padding-top: 6px;}
.tabmenublockV2{padding:0; padding-bottom:2px;  white-space: nowrap;}
.SlimTabBtnV2{margin:0; padding:0;}
.SlimTabBtnV2 a{margin:0; text-decoration:none; padding:5px 15px 4px 15px;}
.SlimTabBtnV2Current a{margin:0; padding:5px 15px;}
/* 頁籤式按鈕V2 color */
.tabmenublockV2{border-bottom:1px solid #d3d3d3;}
.SlimTabBtnV2 a{color:#177b7f; text-decoration:none; transition: all ease-in-out 0.2s;}
.SlimTabBtnV2 a:hover{color:#0ed6de;}
.SlimTabBtnV2Current a{background:#ffffff; border:1px solid #d3d3d3; border-top:2px solid #109fa5;  border-bottom:0; font-weight:bold; color: #000;}
.SlimTabBtnV2Current a:hover{color:#000; cursor:default;}

/* taiwan */
#taiwanmap .areabox{transition:all 0.5s ease;fill:#A6D47D;}
#taiwanmap .areabox:hover{fill:#1a9d4e;  cursor:pointer;}
#taiwanmap .areaboxactive{fill:#067432;}
#taiwanmap .areaboxactive:hover{fill:#067432; cursor:default;}

#taiwanmap .areaboxW{transition:all 0.5s ease;fill: #dadada;}
#taiwanmap .areaboxW:hover{fill: #a2a2a2;  cursor:pointer;}
#taiwanmap .areaboxWactive{fill:#666666;}
#taiwanmap .areaboxWactive:hover{fill:#666666; cursor:default;}

#taiwanmap .areaboxB{transition:all 0.5s ease;fill: #56c9d4;}
#taiwanmap .areaboxB:hover{fill: #3e8e9d;  cursor:pointer;}
#taiwanmap .areaboxBactive{fill: #284a74;}
#taiwanmap .areaboxBactive:hover{fill:#284a74; cursor:default;}

/* 開啟台灣地圖 */
a.twbtn{
    position: fixed;
    bottom: 20px;
    left: 0;
    border-radius: 0 30px 30px 0;
    padding: 10px 15px 10px 5px;
    font-size: 16px;
    color: #000;
    display: inline;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 1);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.54) inset, 0 -2px 1px rgba(0, 0, 0, 0.31) inset;
    background: #ffbf00;
    background: -moz-linear-gradient(top,  #ffbf00 0%, #ff9700 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffbf00), color-stop(100%,#ff9700));
    background: -webkit-linear-gradient(top,  #ffbf00 0%,#ff9700 100%);
    background: -o-linear-gradient(top,  #ffbf00 0%,#ff9700 100%);
    background: -ms-linear-gradient(top,  #ffbf00 0%,#ff9700 100%);
    background: linear-gradient(to bottom,  #ffbf00 0%,#ff9700 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffbf00', endColorstr='#ff9700',GradientType=0 );
    transition: all ease-in-out 0.2s;
}


a.twbtn:hover {
    background: #ffdc00;
    text-decoration: none;
    background: -moz-linear-gradient(top,  #ffdc00 0%, #ffa700 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffdc00), color-stop(100%,#ffa700));
    background: -webkit-linear-gradient(top,  #ffdc00 0%,#ffa700 100%);
    background: -o-linear-gradient(top,  #ffdc00 0%,#ffa700 100%);
    background: -ms-linear-gradient(top,  #ffdc00 0%,#ffa700 100%);
    background: linear-gradient(to bottom,  #ffdc00 0%,#ffa700 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffdc00', endColorstr='#ffa700',GradientType=0 );
}
@media (max-width: 767px) {
    a.twbtn{
        width: 100%;
        text-align: center;
        border-radius:0 0 0 0;
        bottom:0;
    }
    .WrapperFooter .footerblock{padding-bottom: 50px;}
}

a.genbtnfull,input.genbtnfull,button.genbtnfull{
    border:1px solid #7ad0d3; padding:5px 15px;*padding:5px;_padding:5px;color:#014e51; font-size:15px; font-weight:bold;
    background-color:#e3feff;text-shadow: 1px 1px 1px #fff;
    background-image: -webkit-linear-gradient(top, #e3feff, #a5edf0);
    background-image: -moz-linear-gradient(top, #e3feff, #a5edf0);
    background-image: -ms-linear-gradient(top, #e3feff, #a5edf0);
    background-image: -o-linear-gradient(top, #e3feff, #a5edf0);
    background-image: linear-gradient(to bottom, #e3feff, #a5edf0);
    transition: all ease-in-out 0.2s;
    display: block; width: 100%; text-align: center;
}
a.genbtnfull:hover,input.genbtnfull:hover,button.genbtnfull:hover{
    cursor:pointer;color:#fff;border:1px solid #014a4d;text-decoration:none;
    background-color:#179ca2;text-shadow: 1px 1px 1px #000;
    background-image: -webkit-linear-gradient(top, #179ca2, #04696e);
    background-image: -moz-linear-gradient(top, #179ca2, #04696e);
    background-image: -ms-linear-gradient(top, #179ca2, #04696e);
    background-image: -o-linear-gradient(top, #179ca2, #04696e);
    background-image: linear-gradient(to bottom, #179ca2, #04696e);
}

/* svg 外框 */
.obj-wrapperT1 {
    position:relative;
    width:100%;
    padding-bottom:100%;
    height:0;
    overflow:hidden;
}
.SVGcontent {
    position:absolute;
    width:100%;
    height:100%;
}

a#searchbtn {
    position: absolute;
    right: 10px;
    top: 52px;
    border-radius: 10px 10px 0 0;
    padding: 10px;
    font-size: 16px;
    color: #a65805;
    display: inline;
    text-shadow: 1px 1px 1px rgba(255, 255, 255, 1);
    background: #f8ae5e;
    background: -moz-linear-gradient(top, #ffc587 0%, #f8ae5e 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffc587), color-stop(100%,#f8ae5e));
    background: -webkit-linear-gradient(top, #ffc587 0%,#f8ae5e 100%);
    background: -o-linear-gradient(top, #ffc587 0%,#f8ae5e 100%);
    background: -ms-linear-gradient(top, #ffc587 0%,#f8ae5e 100%);
    background: linear-gradient(to bottom, #ffc587 0%,#f8ae5e 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffc587', endColorstr='#f8ae5e',GradientType=0 );
    transition: all ease-in-out 0.2s;
}

a#searchbtn:hover {
    color: #000;
}