﻿@charset "utf-8";
/* 基本樣式:版型使用顏色(青)V1801 */

/*  ===== 網站元件樣式 ===== */
/* font style */
.font-normal{color:#181818;}
.font-normal a{color:#00899a;text-decoration: none;border-bottom: 1px solid transparent;transition: all ease-in-out 0.2s;}
.font-normal a:hover{color:#00b0c5;border-color:#00b0c5;}

.font-white{color:#FFFFFF;}
.font-white a{color:#FFFFFF; text-decoration:none;border-bottom: 1px solid transparent;transition: all ease-in-out 0.2s;}
.font-white a:hover{color:#FF0;border-color:#FF0;}
.font-title{color:#00899a;}
.font-title a{color:#00899a; text-decoration:none;border-bottom: 1px solid transparent;transition: all ease-in-out 0.2s;}
.font-title a:hover{color:#00b0c5; border-color:#00b0c5;}
.font-red{color:red;}

/* 指引步驟 */
.processtable .prononework{background:#f1f1f1; border:1px solid #cbcbcb; color:#9c9c9c; }
.processtable .procurrent{ font-weight:bold; border:1px solid #01656a; background:#008e94; color:#fff;}
.processtable .profinish{background:#ddf5f6; color:#45a8ac; border:1px solid #bbdbdd;}
.processtable .proiconfinish{color:#8dcfd1;}
.processtable .proiconcurrent{color:#21797c;}
.processtable .proiconnone{color:#e9e9e9;}
/* 指引步驟樣式二 */
.OchiStep li a {color: white;background-color: hsla(0, 0%, 83%, 1);text-align: center;text-transform: capitalize;}
.OchiStep li.completed a {background:#ddf5f6;color:#45a8ac;}
.OchiStep li.completed a:after {border-left: 30px solid #ddf5f6;}
.OchiStep li.active a {background: #008e94;}
.OchiStep li.active a:after {border-left: 30px solid #008e94;}
.OchiStep li a:before {border-left: 30px solid white;}
.OchiStep li a:after {border-left: 30px solid hsla(0, 0%, 83%, 1);}

/* 頁籤式按鈕 */
.tabmenublock{border-bottom:1px solid #d3d3d3;}
.SlimTabBtnCurrent{background:#FFFFFF; border:1px solid #d3d3d3; border-bottom:0; font-weight:bold;}
.SlimTabBtn a{color:#177b7f; text-decoration:none; background:#ddf5f6;border:1px solid #d3d3d3;transition: all ease-in-out 0.2s;}
.SlimTabBtn a:hover{color:#0ed6de; background:#fff;}

/* 按鈕樣式:一般 */
a.genbtn,input.genbtn,button.genbtn{
border:1px solid #7ad0d3; padding:5px 15px;*padding:5px;_padding:5px;color:#014e51; font-size:15px; margin:0px 2px;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);
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
transition: all ease-in-out 0.2s;
}
a.genbtn:hover,input.genbtn:hover,button.genbtn: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);
}
a.genbtnS,input.genbtnS,button.genbtnS{
border:1px solid #7ad0d3; padding:3px 15px;*padding:5px;_padding:5px;color:#014e51; font-size:12px; margin:0px 2px;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);
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
transition: all ease-in-out 0.2s;
}
a.genbtnS:hover,input.genbtnS:hover,button.genbtnS: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);
}
a.genbtn:hover,a.genbtnS:hover{cursor:pointer;}

input.genbtn{
padding:3px 15px;*padding:5px;_padding:5px;
}
input.genbtnS{
padding:2px 15px;*padding:5px;_padding:5px;
}
button.genbtn{
padding:3px 15px;*padding:5px;_padding:5px;
}
button.genbtnS{
padding:2px 15px;*padding:5px;_padding:5px;
}
/* 按鈕樣式:特殊 */
a.keybtn,input.keybtn,button.keybtn{
border:1px solid #cdb469; padding:5px 15px;*padding:5px;_padding:5px;color:#6d5941; font-size:15px; margin:0px 2px;font-weight:bold;
background-color:#fefad9;text-shadow: 1px 1px 1px #fff;
background-image: -webkit-linear-gradient(top, #fefad9, #fff17c);
background-image: -moz-linear-gradient(top, #fefad9, #fff17c);
background-image: -ms-linear-gradient(top, #fefad9, #fff17c);
background-image: -o-linear-gradient(top, #fefad9, #fff17c);
background-image: linear-gradient(to bottom, #fefad9, #fff17c);
-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
transition: all ease-in-out 0.2s;
}
a.keybtn:hover,input.keybtn:hover,button.keybtn:hover{
cursor:pointer;color:#fff;border:1px solid #925712;text-decoration:none;
background-color:#ed9700;text-shadow: 1px 1px 1px #000;
background-image: -webkit-linear-gradient(top, #ed9700, #be6700);
background-image: -moz-linear-gradient(top, #ed9700, #be6700);
background-image: -ms-linear-gradient(top, #ed9700, #be6700);
background-image: -o-linear-gradient(top, #ed9700, #be6700);
background-image: linear-gradient(to bottom, #ed9700, #be6700);
}
a.keybtnS,input.keybtnS,button.keybtnS{
border:1px solid #cdb469; padding:3px 15px;*padding:5px;_padding:5px;color:#6d5941; font-size:12px; margin:0px 2px;font-weight:bold;
background-color:#fefad9;text-shadow: 1px 1px 1px #fff;
background-image: -webkit-linear-gradient(top, #fefad9, #fff17c);
background-image: -moz-linear-gradient(top, #fefad9, #fff17c);
background-image: -ms-linear-gradient(top, #fefad9, #fff17c);
background-image: -o-linear-gradient(top, #fefad9, #fff17c);
background-image: linear-gradient(to bottom, #fefad9, #fff17c);
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
transition: all ease-in-out 0.2s;
}
a.keybtnS:hover,input.keybtnS:hover,button.keybtnS:hover{
cursor:pointer;color:#fff;border:1px solid #925712;text-decoration:none;
background-color:#ed9700;text-shadow: 1px 1px 1px #000;
background-image: -webkit-linear-gradient(top, #ed9700, #be6700);
background-image: -moz-linear-gradient(top, #ed9700, #be6700);
background-image: -ms-linear-gradient(top, #ed9700, #be6700);
background-image: -o-linear-gradient(top, #ed9700, #be6700);
background-image: linear-gradient(to bottom, #ed9700, #be6700);
}
a.keybtn:hover,a.keybtnS:hover{cursor:pointer;}

input.keybtn{
padding:3px 15px;*padding:5px;_padding:5px;
}
input.keybtnS{
padding:2px 15px;*padding:5px;_padding:5px;
}
button.keybtn{
padding:3px 15px;*padding:5px;_padding:5px;
}
button.keybtnS{
padding:2px 15px;*padding:5px;_padding:5px;
}


/* 輸入框 */
.inputex{border:1px solid #c5c5c5;transition: all ease-in-out 0.2s;}
.inputex:hover{border:1px solid #7b7b7b;}
.inputex:focus{border:1px solid #202020;}
/* 表單樣式 */
.gentable table{}
.gentable th{border-bottom:1px dotted #bababa;}
.gentable td{border-bottom:1px dotted #bababa;}
.gentable td.titlebg{background:#f1f9f9;}
.titlebackicon{padding-right:10px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='20' %3E%3Ccircle cx='5' cy='6' r='1' fill='rgb(119, 155, 160)' /%3E%3Ccircle cx='5' cy='14' r='1' fill='rgb(119, 155, 160)' /%3E%3C/svg%3E") no-repeat right;}

/* 雙色表格 */
.stripeMe table{border:1px solid #f2dcae;}
.stripeMe table tr td{border:1px solid #e8dcac; background-color:#fffefb;}
.stripeMe th{color:#513e20; border:1px solid #ca8738; background:#f7c95b;}
.stripeMe th a{color:#cb7e0f; text-decoration:none;border-bottom: 1px solid transparent;transition: all ease-in-out 0.2s;}
.stripeMe th a:hover{color:#e75903; border-color:#e75903;}
.stripeMe tr.alt td{background-color:#f7eec9;}
.stripeMe tr td:first-child{border-left-color:#f2dcae;}
.stripeMe tr th:first-child{border-left-color:#f2dcae;}
.stripeMe tr td:last-child{border-right-color:#f2dcae;}
.stripeMe tr th:last-child{border-right-color:#f2dcae;}
.stripeMe tr:last-child td{border-bottom-color:#f2dcae;}
.stripeMe tr.spe td{background-color:#FEFBC2;}

/* 雙色表格CSS雙色 */
.stripeMeCS table{border:1px solid #f2dcae;}
.stripeMeCS table tr td{border:1px solid #e8dcac; background-color:#fffefb;}
.stripeMeCS th{color:#513e20; border:1px solid #ca8738; background:#f7c95b;}
.stripeMeCS th a{color:#cb7e0f; text-decoration:none;border-bottom: 1px solid transparent;transition: all ease-in-out 0.2s;}
.stripeMeCS th a:hover{color:#e75903; border-color:#e75903;}
.stripeMeCS tr:nth-child(even) td{background-color:#f7eec9;}
.stripeMeCS tr td:first-child{border-left-color:#f2dcae;}
.stripeMeCS tr th:first-child{border-left-color:#f2dcae;}
.stripeMeCS tr td:last-child{border-right-color:#f2dcae;}
.stripeMeCS tr th:last-child{border-right-color:#f2dcae;}
.stripeMeCS tr:last-child td{border-bottom-color:#f2dcae;}
.stripeMeCS tr.spe td{background-color:#FEFBC2;}

/* input group */
.Ochi-inputgroup .itemcell .adomicon{background:#EBEBEB; border:1px solid #c5c5c5; color:#999999;text-shadow: 1px 1px 1px #fff;}
.Ochi-inputgroup .itemcell input.typein{border:1px solid #c5c5c5;transition: all ease-in-out 0.2s;}
.Ochi-inputgroup .itemcell input.typein:hover{border:1px solid #7b7b7b;}
.Ochi-inputgroup .itemcell input.typein:focus{border:1px solid #202020;}
.Ochi-inputgroup .itemcell a.btnlink,.Ochi-inputgroup .itemcell input.btnlink,.Ochi-inputgroup .itemcell button.btnlink{
border:1px solid #7ad0d3; color:#014e51;
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);
}
.Ochi-inputgroup .itemcell a.btnlink:hover,.Ochi-inputgroup .itemcell input.btnlink:hover,.Ochi-inputgroup .itemcell button.btnlink:hover{
color:#fff;border:1px solid #014a4d;
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);
}


/* 使用font-awesome美化checkbox、radio */
input[type=radio].with-font ~ label:before,
input[type=checkbox].with-font ~ label:before {
    color: #909090;
}

input[type=radio].with-font:checked ~ label:before,
input[type=checkbox].with-font:checked ~ label:before  {
    color: #09c2c4;
}

input[type=checkbox].with-font:checked ~ label:before {
    color: #09c2c4;
}