@charset "utf-8";



/*==================統一規範==================*/
/*網頁內容*/
body {
    margin:0;
    font-family: Arial, Helvetica, sans-serif,Microsoft JhengHei,PMingLiU,MingLiU;
    background-image: url(/class/css/sample/img/bg/eggbg.jpg);
	-webkit-text-size-adjust:none;
}
body.confidential {
    background-image: url(/class/css/sample/img/bg/confidential_bg.jpg);
}
body.none {
	background-image:none;
}
/*所有填寫選取表單元素*/
input,select,textarea,button {
    font-family: Arial, Helvetica, sans-serif,Microsoft JhengHei,PMingLiU,MingLiU;
}
input[type="text"],input[type="password"],select,textarea {
    padding:3px;
    background-color: #fff;
    border-radius:2px;
    border: solid 1px #d0d0d0;
    font-size:15px;
}
/*所有勾選表單元素*/
input[type="checkbox"],input[type="radio"] {
    transform:scale(1.2);
    margin-right:5px;
    margin-left:10px;
}
input[type="checkbox"],input[type="radio"],select {
    cursor:pointer;
}
input:disabled,select:disabled,textarea:disabled {
    cursor:not-allowed;
    color:#999;
	background:#f2f2f2;
}
/*所有按鈕元素*/
input[type="button"],input[type="submit"] {
    font-size: 15px;
    border-radius: 3px;    
    padding: 3px 8px;
    cursor:pointer;
}
input[type="button"]:hover,input[type="submit"]:hover {
    opacity:0.8;
}
button {
    font-size: 16px;
    border-radius: 3px;    
    padding: 4px 10px;
    cursor:pointer;    
}
button:hover {
    opacity:0.8;
}
/*表單背景顏色樣式*/
input.bg-red[type="text"],select.bg-red,textarea.bg-red {
    background-color: #FFC0C0;
}
input.bg-green[type="text"],select.bg-green,textarea.bg-green {
    background-color: #D1FFBE;
}
input.bg-blue[type="text"],select.bg-blue,textarea.bg-blue {
    background-color: #CBECFD;
}
input.bg-orange[type="text"],select.bg-orange,textarea.bg-orange {
    background-color: #FFE4BE;
}
input.bg-purple[type="text"],select.bg-purple,textarea.bg-purple {
    background-color: #D1CCFF;
}
input.bg-pink[type="text"],select.bg-pink,textarea.bg-pink {
    background-color: #FFDCFF;
}
input.bg-yellow[type="text"],select.bg-yellow,textarea.bg-yellow {
    background-color: #FFFFC2;
}
input.bg-white[type="text"],select.bg-white,textarea.bg-white {
    background-color: #fff;
}
input.bg-gray[type="text"],select.bg-gray,textarea.bg-gray {
    background-color: #e0e0e0;
}
input.bg-lgray[type="text"],select.bg-lgray,textarea.bg-lgray {
    background-color: #f8f8f8;
}
input.bg-black[type="text"],select.bg-black,textarea.bg-black {
    background-color: #333;
}
/*表單外框顏色樣式*/
input.bor-red[type="text"],select.bor-red,textarea.bor-red {
    border: solid 1px #F00;
}
input.bor-green[type="text"],select.bor-green,textarea.bor-green {
    border: solid 1px #090;
}
input.bor-blue[type="text"],select.bor-blue,textarea.bor-blue {
    border: solid 1px #06C;
}
input.bor-orange[type="text"],select.bor-orange,textarea.bor-orange {
    border: solid 1px #F60;
}
input.bor-purple[type="text"],select.bor-purple,textarea.bor-purple {
    border: solid 1px #60C;
}
input.bor-pink[type="text"],select.bor-pink,textarea.bor-pink {
    border: solid 1px #F3C;
}
input.bor-yellow[type="text"],select.bor-yellow,textarea.bor-yellow {
    border: solid 1px #FF0;
}
input.bor-white[type="text"],select.bor-white,textarea.bor-white {
    border: solid 1px #fff;
}
input.bor-gray[type="text"],select.bor-gray,textarea.bor-gray {
    border: solid 1px #777;
}
input.bor-lgray[type="text"],select.bor-lgray,textarea.bor-lgray {
    border: solid 1px #d0d0d0;
}
input.bor-black[type="text"],select.bor-black,textarea.bor-black {
    border: solid 1px #333;
}
/*所有連結元素*/
a {
    text-decoration:none;
    color:#06F;
}
a:hover {
    text-decoration:underline;
    opacity:0.8;
}
a.visited:visited {
    color:#906;
}
/*清單元素*/
ol,ul,li {
    margin:0;
}
/*程式碼標示*/
.code-area {
    background:#444;
    color:#fff;
    font-size: 14px;
    border:solid 1px #333;
    border-radius:3px;
    line-height: 25px;
    padding: 10px 20px;
    margin: 10px 0 30px 0;
    overflow-y:scroll;
    max-height:300px;
}
.code-area code {
    font-family: Microsoft JhengHei;
}
.code-cls {
    color:#FF0;
    font-weight:bold;
}
.code-js {
    color:#6FF;
    font-weight:bold;
}
.code-remark {
    color:#aaa;
}
/*目錄說明*/
ul.ul-index {
    list-style-type: none;
    line-height: 30px;
    font-size: 16px;
    margin-left: -30px;
}
ul.ul-index-disc > li {
    list-style-type:disc;
    margin-left: 20px;
}
ul.ul-index-decimal > li {
    list-style-type:decimal;
    margin-left: 20px;
}
ul.ul-index > ul > li {
    list-style-type:disc;
    font-size: 15px;
}
ul.ul-index a {    
    color:#333;
}
ul.ul-index > ul a {    
    color:#666;
}
/*標籤按鈕*/
.label_btn label {
	cursor:pointer;
}

/*==================CSS樣式==================
說明:以下呈現不同類型的css樣式及使用方式*/
/*主頁樣式*/
p.title {
    font-size:36px;
    text-align:center;
    line-height:40px;
}
/*主框架排版*/
.main {
    margin-top:20px;
    margin-bottom:30px;
}
.main > tbody > tr > td {
    padding: 8px 6px;
}
.main > tbody > tr > td.none {
    padding: 0;
}
/*主標題*/
.title-m {
    color: #68b0ea;
    width: 100%;
    font-weight: bold;
    font-size: 30px;
    border-bottom: dashed 1px #68b0ea;
}
/*副標題*/
.title-s {
    color: #333;
    width: 100%;
    font-size: 22px;
    border-bottom: dotted 1px #999;
}
/*功能區表單*/
.func {
    background-color: #f2f2f2;
}
.func td {
    padding:5px;
}
.func legend {
    padding: 0 8px;
    color:#0A80DE;
    font-size: 18px;
}
/*按鈕樣式*/
.bt-send {
    background-color: #19e;
    color: #fff;
    border: 1px solid #07b;    
    margin:0 5px;
}
.bt-add {
    background-color: #74b900;
    color: #fff;
    border: 1px solid #588c00;
    margin: 0 5px;
}
.bt-edit {
    background-color: #F90;
    color: #fff;
    border: 1px solid #F60;    
    margin:0 5px;
}
.bt-del {
    background-color: #ff7575;
    color: #fff;
    border: 1px solid #c35656;
    margin: 0 5px;
}
.bt-export {
    background-color: #5bc0de;
    color: #fff;
    border: 1px solid #3793af;
    margin:0 5px;
}
.bt-white {
    background-color: #fff;
    color: #000;
    border: 1px solid #333;
    margin:0 5px;
}
.bt-gray {
    background-color: #e8e8e8;
    color: #666;
    border: 1px solid #999;
    margin:0 5px;
}
.bt-lgray {
    background-color: #f8f8f8;
    color: #666;
    border: 1px solid #999;
    margin:0 5px;
}
.bt-black {
    background-color: #666;
    color: #fff;
    border: 1px solid #333;
    margin:0 5px;
}
/*功能按鈕*/
.bt-back {
    background-color: #989898;
    color: #fff;
    border: 1px solid #676767;
    margin:0 5px;
}
.bt-admit {
    background-color: #4fab5b;
    color: #fff;
    border: 1px solid #3c8245;
    margin: 0 5px;
}
.bt-deny {
    background-color: #C1272D;
    color: #fff;
    border: 1px solid #881d21;
    margin:0 5px;
}
.bt-return {
    background-color: #4D4D4D;
    color: #fff;
    border: 1px solid #212121;
    margin:0 5px;
}
.bt-print {
    background-color: #00a6e2;
    color: #fff;
    border: 1px solid #0086b7;
    margin:0 5px;
}
.bt-mail {
    background-color: #00cab4;
    color: #fff;
    border: 1px solid #009686;
    margin:0 5px;
}
.bt-search {
	background-color: #d3f3ff;
	color: #00719e;
	border: 1px solid #adc8d2;
	margin:0 5px;
}
.bt-config {
	background-color: #F2F2F2;
    color: #2b5269;
    border: 1px solid #b9b9b9;
    margin:0 5px;
}
/*按鈕超連結樣式*/
a.bt-send,a.bt-add,a.bt-edit,a.bt-del,a.bt-export,a.bt-white,a.bt-gray,a.bt-lgray,a.bt-black,a.bt-back,a.bt-admit,a.bt-deny,a.bt-return,a.bt-print,a.bt-mail,a.bt-search,a.bt-config {
    border-radius: 3px;
    padding: 6px 10px 5px 10px;
    cursor: pointer;
}
a.bt-send:hover,a.bt-add:hover,a.bt-edit:hover,a.bt-del:hover,a.bt-export:hover,a.bt-white:hover,a.bt-gray:hover,a.bt-lgray:hover,a.bt-black:hover,a.bt-back:hover,a.bt-admit:hover,a.bt-deny:hover,a.bt-return:hover,a.bt-print:hover,a.bt-mail:hover,a.bt-search:hover,a.bt-config:hover {
    text-decoration:none;
}
/*按鈕圖示*/
/*bt-back個別設置*/
.bt-back > span.bticon-back:before{
	display:inline-block;font:normal normal normal 14px/1 FontAwesome;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;content:"\f053";
}

/*表格*/
/*預設樣式*/
.tbl {
    font-size: 15px;
    line-height: 1.5;
    color: #333;
    border-collapse: collapse;
    background-color:#fff;
}
.tbl > thead > tr > td,.tbl > tbody > tr > td {
    border: solid 1px #ccc;
    padding: 5px;
}
/*標題樣式*/
.tbl > thead > tr.tbl-title,.tbl > tbody > tr.tbl-title,.tbl > thead.tbl-title > tr {
    text-align:center;
    font-weight:bold;    
    background:#f2f2f2;
    line-height:30px;
}
.tbl > thead > tr > td.tbl-title,.tbl > tbody > tr > td.tbl-title,.tbl > thead.tbl-title > tr > td {
    font-weight:bold;    
    background:#f2f2f2;
}
/*小計,總計樣式*/
.tbl > tbody > tr.tbl-result {
    text-align:center;
    font-weight:bold;
    background:#f2f2f2;
    border-top:solid 2px #d0d0d0;
    border-bottom:solid 2px #d0d0d0;
    line-height:30px;
}
/*條紋樣式*/
.tbl-stripe:not(#tbl-fix) > tbody > tr:nth-child(odd){
    background-color:#f2f2f2;        
}
.tbl-stripe#tbl-fix > tbody > tr:nth-child(even){
    background-color:#f2f2f2;        
}
/*列表顏色變化*/
.tbl-hover > tbody > tr:hover {
    background:#f2f2f2;
}
.tbl-td-hover > tbody > tr > td:hover {
    background:#f2f2f2;
}
.tbl-hover-red > tbody > tr:hover {
    background-color:#FFC0C0;
}
.tbl-hover-green > tbody > tr:hover {
    background-color:#D1FFBE;
}
.tbl-hover-blue > tbody > tr:hover {
    background-color:#CBECFD;
}
.tbl-hover-orange > tbody > tr:hover {
    background-color:#FFE4BE;
}
.tbl-hover-purple > tbody > tr:hover {
    background-color:#D1CCFF;
}
.tbl-hover-pink > tbody > tr:hover {
    background-color:#FFDCFF;
}
.tbl-hover-yellow > tbody > tr:hover {
    background-color:#FFFFC2;
}
/*.tbl-hover-white > tbody > tr:hover {
    background-color:#fff;
}
.tbl-hover-gray > tbody > tr:hover {
    background-color:#e0e0e0;
}
.tbl-hover-black > tbody > tr:hover {
    background-color:#333;
}*/
/*無邊框*/
.bor-none,.bor-none > thead > tr > td,.tbl > thead > tr.bor-none > td,.tbl > thead > tr > td.bor-none,.bor-none > tbody > tr > td,.tbl > tbody > tr.bor-none > td,.tbl > tbody > tr > td.bor-none {
    border:0;
}
/*表格外框顏色樣式*/
table.bor-red > thead > tr > td,table.bor-red > tbody > tr > td {
    border: solid 1px #F00;
}
table.bor-green > thead > tr > td,table.bor-green > tbody > tr > td {
    border: solid 1px #090;
}
table.bor-blue > thead > tr > td,table.bor-blue > tbody > tr > td {
    border: solid 1px #06C;
}
table.bor-orange > thead > tr > td,table.bor-orange > tbody > tr > td {
    border: solid 1px #F60;
}
table.bor-purple > thead > tr > td,table.bor-purple > tbody > tr > td {
    border: solid 1px #60C;
}
table.bor-pink > thead > tr > td,table.bor-pink > tbody > tr > td {
    border: solid 1px #F3C;
}
table.bor-yellow > thead > tr > td,table.bor-yellow > tbody > tr > td {
    border: solid 1px #FF0;
}
table.bor-white > thead > tr > td,table.bor-white > tbody > tr > td {
    border: solid 1px #fff;
}
table.bor-gray > thead > tr > td,table.bor-gray > tbody > tr > td {
    border: solid 1px #777;
}
table.bor-lgray > thead > tr > td,table.bor-lgray > tbody > tr > td {
    border: solid 1px #d0d0d0;
}
table.bor-black > thead > tr > td,table.bor-black > tbody > tr > td {
    border: solid 1px #333;
}
/*小計,總計外框顏色*/
table.bor-red > tbody > tr.tbl-result > td {
    border-top:solid 2px #F00;
    border-bottom:solid 2px #F00;
}
table.bor-green > tbody > tr.tbl-result > td {
    border-top:solid 2px #090;
    border-bottom:solid 2px #090;
}
table.bor-blue > tbody > tr.tbl-result > td {
    border-top:solid 2px #06C;
    border-bottom:solid 2px #06C;
}
table.bor-orange > tbody > tr.tbl-result > td {
    border-top:solid 2px #F60;
    border-bottom:solid 2px #F60;
}
table.bor-purple > tbody > tr.tbl-result > td {
    border-top:solid 2px #60C;
    border-bottom:solid 2px #60C;
}
table.bor-pink > tbody > tr.tbl-result > td {
    border-top:solid 2px #F3C;
    border-bottom:solid 2px #F3C;
}
table.bor-yellow > tbody > tr.tbl-result > td {
    border-top:solid 2px #FF0;
    border-bottom:solid 2px #FF0;
}
table.bor-white > tbody > tr.tbl-result > td {
    border-top:solid 2px #fff;
    border-bottom:solid 2px #fff;
}
table.bor-gray > tbody > tr.tbl-result > td {
    border-top:solid 2px #777;
    border-bottom:solid 2px #777;
}
table.bor-lgray > tbody > tr.tbl-result > td {
    border-top:solid 2px #d0d0d0;
    border-bottom:solid 2px #d0d0d0;
}
table.bor-black > tbody > tr.tbl-result > td {
    border-top:solid 2px #333;
    border-bottom:solid 2px #333;
}
/*無背景*/
.bg-none,.bg-none > thead > tr,.tbl > thead > tr.bg-none > td,.tbl > thead > tr > td.bg-none,.bg-none > tbody > tr,.tbl > tbody > tr.bg-none > td,.tbl > tbody > tr > td.bg-none {
    background-color:transparent;
}
/*表格背景顏色*/
.tbl > thead > tr.bg-red,.tbl > thead > tr > td.bg-red,.tbl > tbody > tr.bg-red,.tbl > tbody > tr > td.bg-red {
    background-color:#ffcfcf;
}
.tbl > thead > tr.bg-green,.tbl > thead > tr > td.bg-green,.tbl > tbody > tr.bg-green,.tbl > tbody > tr > td.bg-green {
    background-color:#D1FFBE;
}
.tbl > thead > tr.bg-blue,.tbl > thead > tr > td.bg-blue,.tbl > tbody > tr.bg-blue,.tbl > tbody > tr > td.bg-blue {
    background-color:#CBECFD;
}
.tbl > thead > tr.bg-orange,.tbl > thead > tr > td.bg-orange,.tbl > tbody > tr.bg-orange,.tbl > tbody > tr > td.bg-orange {
    background-color:#FFE4BE;
}
.tbl > thead > tr.bg-purple,.tbl > thead > tr > td.bg-purple,.tbl > tbody > tr.bg-purple,.tbl > tbody > tr > td.bg-purple {
    background-color:#D1CCFF;
}
.tbl > thead > tr.bg-pink,.tbl > thead > tr > td.bg-pink,.tbl > tbody > tr.bg-pink,.tbl > tbody > tr > td.bg-pink {
    background-color:#FFDCFF;
}
.tbl > thead > tr.bg-yellow,.tbl > thead > tr > td.bg-yellow,.tbl > tbody > tr.bg-yellow,.tbl > tbody > tr > td.bg-yellow {
    background-color:#ffffca;
}
.tbl > thead > tr.bg-white,.tbl > thead > tr > td.bg-white,.tbl > tbody > tr.bg-white,.tbl > tbody > tr > td.bg-white {
    background-color:#fff;
}
.tbl > thead > tr.bg-gray,.tbl > thead > tr > td.bg-gray,.tbl > tbody > tr.bg-gray,.tbl > tbody > tr > td.bg-gray {
    background-color:#e6e6e6;
}
.tbl > thead > tr.bg-lgray,.tbl > thead > tr > td.bg-lgray,.tbl > tbody > tr.bg-lgray,.tbl > tbody > tr > td.bg-lgray {
    background-color:#f8f8f8;
}
.tbl > thead > tr.bg-black,.tbl > thead > tr > td.bg-black,.tbl > tbody > tr.bg-black,.tbl > tbody > tr > td.bg-black {
    background-color:#333;
}
/*說明*/
.alert-red {
    width: 100%;
    font-size: 15px;
    color: #ad0704;
    background-color: #f3bdbd;
    border: solid 1px #d28e8e;
    padding: 8px 12px;
    border-radius:3px;
    line-height: 26px;
    font-weight: bold;
}
.alert-yellow {
    width: 100%;
    font-size: 15px;
    color: #9e6501;
    background-color: #fff2b6;
    border: solid 1px #e0c32b;
    padding: 8px 12px;
    border-radius:3px;
    line-height: 26px;
    font-weight: bold;
}
.alert-blue {
    width: 100%;
    font-size: 15px;
    color: #045f8c;
    background-color: #c5e5f5;
    border: solid 1px #89c7e6;
    padding: 8px 12px;
    border-radius:3px;
    line-height: 26px;
    font-weight: bold;
}
.alert-green {
    width: 100%;
    font-size: 15px;
    color: #1e651f;
    background-color: #d0f5c0;
    border: solid 1px #9dcc8a;
    padding: 8px 12px;
    border-radius:3px;
    line-height: 26px;
    font-weight: bold;
}
.alert-normal {
    width: 100%;
    font-size: 15px;
    color: #333;
    background-color: #f8f8f8;
    border: solid 1px #d2d2d2;
    padding: 8px 12px;
    border-radius:3px;
    line-height: 26px;
    font-weight: bold;
}
/*字級樣式*/
.wd-6 {
    font-size:6px !important;
}
.wd-7 {
    font-size:7px !important;
}
.wd-8 {
    font-size:8px !important;
}
.wd-9 {
    font-size:9px !important;
}
.wd-10 {
    font-size:10px !important;
}
.wd-11 {
    font-size:11px !important;
}
.wd-12 {
    font-size:12px !important;
}
.wd-13 {
    font-size:13px !important;
}
.wd-14 {
    font-size:14px !important;
}
.wd-15 {
    font-size:15px !important;
}
.wd-16 {
    font-size:16px !important;
}
.wd-17 {
    font-size:17px !important;
}
.wd-18 {
    font-size:18px !important;
}
.wd-19 {
    font-size:19px !important;
}
.wd-20 {
    font-size:20px !important;
}
.wd-21 {
    font-size:21px !important;
}
.wd-22 {
    font-size:22px !important;
}
.wd-23 {
    font-size:23px !important;
}
.wd-24 {
    font-size:24px !important;
}
.wd-25 {
    font-size:25px !important;
}
.wd-26 {
    font-size:26px !important;
}
.wd-27 {
    font-size:27px !important;
}
.wd-28 {
    font-size:28px !important;
}
.wd-29 {
    font-size:29px !important;
}
.wd-30 {
    font-size:30px !important;
}
.wd-31 {
    font-size:31px !important;
}
.wd-32 {
    font-size:32px !important;
}
.wd-33 {
    font-size:33px !important;
}
.wd-34 {
    font-size:34px !important;
}
.wd-35 {
    font-size:35px !important;
}
.wd-36 {
    font-size:36px !important;
}
.wd-37 {
    font-size:37px !important;
}
.wd-38 {
    font-size:38px !important;
}
.wd-39 {
    font-size:39px !important;
}
.wd-40 {
    font-size:40px !important;
}
/*文字粗細*/
.wd-bold,.tbl > thead > tr.wd-bold,.tbl > tbody > tr.wd-bold {
    font-weight:bold;
}
.wd-normal,.tbl > thead > tr.wd-normal,.tbl > tbody > tr.wd-normal {
    font-weight:normal;
}
.wd-light,.tbl > thead > tr.wd-light,.tbl > tbody > tr.wd-light {
    font-weight:lighter;
}
/*文字樣式*/
.wd-underline {
	text-decoration:underline !important;
}
.wd-deleteline {
	text-decoration:line-through !important;
}
/*文字靠齊樣式*/
.wd-left {
    text-align:left;
}
.wd-center {
    text-align:center;
}
.wd-right {
    text-align:right;
}
/*文字顏色*/
.wd-red {
    color:#F00 !important;
}
.wd-green {
    color:#090 !important;
}
.wd-blue {
    color:#06C !important;
}
.wd-orange {
    color:#F60 !important;
}
.wd-purple {
    color:#60C !important;
}
.wd-pink {
    color:#F3C !important;
}
.wd-yellow {
    color:#FF0 !important;
}
.wd-white {
    color:#fff !important;
}
.wd-gray {
    color:#777 !important;
}
.wd-lgray {
    color:#d0d0d0 !important;
}
.wd-black {
    color:#333 !important;
}
/*背景顏色*/
.bg-primary {
	background-color:#337ab7 !important;
}
.bg-primary {
    background-color:#337ab7 !important;
}
.bg-success {
    background-color:#dff0d8 !important;
}
.bg-info {
    background-color:#d9edf7 !important;
}
.bg-warning {
    background-color:#fcf8e3 !important;
}
.bg-danger {
    background-color:#f2dede !important;
}
.bg-red {
    background-color:#FFC0C0 !important;
}
.bg-green {
    background-color:#D1FFBE !important;
}
.bg-blue {
    background-color:#CBECFD !important;
}
.bg-dblue {
    background-color:#337ab7 !important;
}
.bg-orange {
    background-color:#FFE4BE !important;
}
.bg-purple {
    background-color:#D1CCFF !important;
}
.bg-pink {
    background-color:#FFDCFF !important;
}
.bg-yellow {
    background-color:#FFFFC2 !important;
}
.bg-white {
    background-color:#fff !important;
}
.bg-gray {
    background-color:#e0e0e0 !important;
}
.bg-lgray {
    background-color:#f8f8f8 !important;
}
.bg-black {
    background-color:#333 !important;
}
/*邊框樣式*/
.bor {
    border:solid 1px #333;
}
.bor-red {
    border:solid 1px #F00;    
}
.bor-green {
    border:solid 1px #090;    
}
.bor-blue {
    border:solid 1px #06C;    
}
.bor-orange {
    border:solid 1px #F60;    
}
.bor-purple {
    border:solid 1px #60C;    
}
.bor-pink {
    border:solid 1px #F3C;
}
.bor-yellow {
    border:solid 1px #FF0;
}
.bor-white {
    border:solid 1px #fff;    
}
.bor-gray {
    border:solid 1px #777;    
}
.bor-lgray {
    border:solid 1px #d0d0d0;    
}
.bor-black {
    border:solid 1px #333;
}
/*圖片寬度大小*/
img.img-s {
    width:240px;
}
img.img-m {
    width:480px;
}
img.img-l {
    width:720px;
}
/*元素寬度*/
.w-10 {
    width:10px;
}
.w-20 {
    width:20px;
}
.w-30 {
    width:30px;
}
.w-40 {
    width:40px;
}
.w-50 {
    width:50px;
}
.w-100 {
    width:100px;
}
.w-150 {
    width:150px;
}
.w-200 {
    width:200px;
}
.w-250 {
    width:250px;
}
.w-300 {
    width:300px;
}
.w-350 {
    width:350px;
}
.w-400 {
    width:400px;
}
.w-450 {
    width:450px;
}
.w-500 {
    width:500px;
}
.w-550 {
    width:550px;
}
.w-600 {
    width:600px;
}
.w-650 {
    width:650px;
}
.w-700 {
    width:700px;
}
.w-750 {
    width:750px;
}
.w-800 {
    width:800px;
}
.w-full {
    width:100%;
}
input.w-full[type="button"],input.w-full[type="text"],select.w-full,textarea.w-full {
    width:98%;
}
/*最小寬度*/
.min-w-800 {
	min-width:800px;
}
/*元素高度*/
.h-10 {
    height:10px;
}
.h-20 {
    height:20px;
}
.h-30 {
    height:30px;
}
.h-40 {
    height:40px;
}
.h-50 {
    height:50px;
}
.h-100 {
    height:100px;
}
.h-150 {
    height:150px;
}
.h-200 {
    height:200px;
}
.h-250 {
    height:250px;
}
.h-300 {
    height:300px;
}
.h-350 {
    height:350px;
}
.h-400 {
    height:400px;
}
.h-450 {
    height:450px;
}
.h-500 {
    height:500px;
}
.h-550 {
    height:550px;
}
.h-600 {
    height:600px;
}
.h-full {
    height:100%;
}
/*行間距*/
.line-h-10 {
    line-height:10px;
}
.line-h-20 {
    line-height:20px;
}
.line-h-30 {
    line-height:30px;
}
.line-h-40 {
    line-height:40px;
}
.line-h-50 {
    line-height:50px;
}
.line-h-60 {
    line-height:60px;
}
.line-h-70 {
    line-height:70px;
}
.line-h-80 {
    line-height:80px;
}
.line-h-90 {
    line-height:90px;
}
.line-h-100 {
    line-height:100px;
}
.line-h-150 {
    line-height:150px;
}
.line-h-200 {
    line-height:200px;
}
.line-h-250 {
    line-height:250px;
}
.line-h-300 {
    line-height:300px;
}
.line-h-350 {
    line-height:350px;
}
.line-h-400 {
    line-height:400px;
}
.line-h-450 {
    line-height:450px;
}
.line-h-500 {
    line-height:500px;
}
.line-h-550 {
    line-height:550px;
}
.line-h-600 {
    line-height:600px;
}
/*排版/位移*/
.mar-bm-0 {
	margin-bottom:0px;	
}
.mar-bm-10 {
	margin-bottom:10px;	
}
.mar-bm-20 {
	margin-bottom:20px;	
}
.mar-bm-30 {
	margin-bottom:30px;	
}
.mar-bm-40 {
	margin-bottom:40px;	
}
.mar-bm-50 {
	margin-bottom:50px;	
}
.mar-tp-0 {
	margin-top:0px;	
}
.mar-tp-10 {
	margin-top:10px;	
}
.mar-tp-20 {
	margin-top:20px;	
}
.mar-tp-30 {
	margin-top:30px;	
}
.mar-tp-40 {
	margin-top:40px;	
}
.mar-tp-50 {
	margin-top:50px;	
}
.mar-rt-0 {
	margin-right:0px;	
}
.mar-rt-10 {
	margin-right:10px;	
}
.mar-rt-20 {
	margin-right:20px;	
}
.mar-rt-30 {
	margin-right:30px;	
}
.mar-rt-40 {
	margin-right:40px;	
}
.mar-rt-50 {
	margin-right:50px;	
}
/*元素位置*/
.float-center {
    margin:0 auto;
}
.float-left {
    float:left;
}
.float-right {
    float:right;
}
/*圖示元件*/
.icon-admit {
    width:24px;
    height:24px;
    background-image:url(/class/css/sample/img/icon/icon-admit.png);
    background-size:24px 24px;
    background-repeat: no-repeat;
    display: inline-block;
}
.icon-forbidden {
    width:24px;
    height:24px;
    background-image:url(/class/css/sample/img/icon/icon-forbidden.png);
    background-size:24px 24px;
    background-repeat: no-repeat;
    display: inline-block;
}
.icon-attention {
    width:24px;
    height:24px;
    background-image:url(/class/css/sample/img/icon/icon-attention.png);
    background-size:24px 24px;
    background-repeat: no-repeat;
    display: inline-block;
}
.icon-question {
    width:24px;
    height:24px;
    background-image:url(/class/css/sample/img/icon/icon-question.png);
    background-size:24px 24px;
    background-repeat: no-repeat;
    display: inline-block;
}
.icon-info {
    width:24px;
    height:24px;
    background-image:url(/class/css/sample/img/icon/icon-info.png);
    background-size:24px 24px;
    background-repeat: no-repeat;
    display: inline-block;
}
.icon-star {
    width:24px;
    height:24px;
    background-image:url(/class/css/sample/img/icon/icon-star.png);
    background-size:24px 24px;
    background-repeat: no-repeat;
    display: inline-block;
}
.icon-search {
    width:24px;
    height:24px;
    background-image:url(/class/css/sample/img/icon/icon-search.png);
    background-size:24px 24px;
    background-repeat: no-repeat;
    display: inline-block;
}
.icon-data {
    width:24px;
    height:24px;
    background-image:url(/class/css/sample/img/icon/icon-data.png);
    background-size:24px 24px;
    background-repeat: no-repeat;
    display: inline-block;
}
.icon-save {
    width:24px;
    height:24px;
    background-image:url(/class/css/sample/img/icon/icon-save.png);
    background-size:24px 24px;
    background-repeat: no-repeat;
    display: inline-block;
}
.icon-edit {
    width:24px;
    height:24px;
    background-image:url(/class/css/sample/img/icon/icon-edit.png);
    background-size:24px 24px;
    background-repeat: no-repeat;
    display: inline-block;
}
.icon-delete {
    width:24px;
    height:24px;
    background-image:url(/class/css/sample/img/icon/icon-delete.png);
    background-size:24px 24px;
    background-repeat: no-repeat;
    display: inline-block;
}
.icon-copy {
    width:24px;
    height:24px;
    background-image:url(/class/css/sample/img/icon/icon-copy.png);
    background-size:24px 24px;
    background-repeat: no-repeat;
    display: inline-block;
}
.icon-editor {
    width:24px;
    height:24px;
    background-image:url(/class/css/sample/img/icon/icon-editor.png);
    background-size:24px 24px;
    background-repeat: no-repeat;
    display: inline-block;
}
.icon-file {
    width:24px;
    height:24px;
    background-image:url(/class/css/sample/img/icon/icon-file.png);
    background-size:24px 24px;
    background-repeat: no-repeat;
    display: inline-block;
}
.icon-upload {
    width:24px;
    height:24px;
    background-image:url(/class/css/sample/img/icon/icon-upload.png);
    background-size:24px 24px;
    background-repeat: no-repeat;
    display: inline-block;
}
.icon-download {
    width:24px;
    height:24px;
    background-image:url(/class/css/sample/img/icon/icon-download.png);
    background-size:24px 24px;
    background-repeat: no-repeat;
    display: inline-block;
}
.icon-mail {
    width:24px;
    height:24px;
    background-image:url(/class/css/sample/img/icon/icon-mail.png);
    background-size:24px 24px;
    background-repeat: no-repeat;
    display: inline-block;
}
.icon-member {
    width:24px;
    height:24px;
    background-image:url(/class/css/sample/img/icon/icon-member.png);
    background-size:24px 24px;
    background-repeat: no-repeat;
    display: inline-block;
}
.icon-password {
    width:24px;
    height:24px;
    background-image:url(/class/css/sample/img/icon/icon-password.png);
    background-size:24px 24px;
    background-repeat: no-repeat;
    display: inline-block;
}
.icon-print {
    width:24px;
    height:24px;
    background-image:url(/class/css/sample/img/icon/icon-print.png);
    background-size:24px 24px;
    background-repeat: no-repeat;
    display: inline-block;
}
.icon-home {
    width:24px;
    height:24px;
    background-image:url(/class/css/sample/img/icon/icon-home.png);
    background-size:24px 24px;
    background-repeat: no-repeat;
    display: inline-block;
}
.icon-refresh {
    width:24px;
    height:24px;
    background-image:url(/class/css/sample/img/icon/icon-refresh.png);
    background-size:24px 24px;
    background-repeat: no-repeat;
    display: inline-block;
}
.icon-repair {
    width:24px;
    height:24px;
    background-image:url(/class/css/sample/img/icon/icon-repair.png);
    background-size:24px 24px;
    background-repeat: no-repeat;
    display: inline-block;
}
.icon-news {
    width:24px;
    height:24px;
    background-image:url(/class/css/sample/img/icon/icon-news.png);
    background-size:24px 24px;
    background-repeat: no-repeat;
    display: inline-block;
}
.icon-time {
    width:24px;
    height:24px;
    background-image:url(/class/css/sample/img/icon/icon-time.png);
    background-size:24px 24px;
    background-repeat: no-repeat;
    display: inline-block;
}
.icon-click {
    width:24px;
    height:24px;
    background-image:url(/class/css/sample/img/icon/icon-click.png);
    background-size:24px 24px;
    background-repeat: no-repeat;
    display: inline-block;
}
.icon-call {
    width:24px;
    height:24px;
    background-image:url(/class/css/sample/img/icon/icon-call.png);
    background-size:24px 24px;
    background-repeat: no-repeat;
    display: inline-block;
}
.icon-calendar {
    width:24px;
    height:24px;
    background-image:url(/class/css/sample/img/icon/icon-calendar.png);
    background-size:24px 24px;
    background-repeat: no-repeat;
    display: inline-block;
}
.icon-happy {
    width:24px;
    height:24px;
    background-image:url(/class/css/sample/img/icon/icon-happy.png);
    background-size:24px 24px;
    background-repeat: no-repeat;
    display: inline-block;
}
.icon-boring {
    width:24px;
    height:24px;
    background-image:url(/class/css/sample/img/icon/icon-boring.png);
    background-size:24px 24px;
    background-repeat: no-repeat;
    display: inline-block;
}
.icon-angry {
    width:24px;
    height:24px;
    background-image:url(/class/css/sample/img/icon/icon-angry.png);
    background-size:24px 24px;
    background-repeat: no-repeat;
    display: inline-block;
}
.icon-airset {
    width:24px;
    height:24px;
    background-image:url(/class/css/sample/img/icon/icon-airset.png);
    background-size:24px 24px;
    background-repeat: no-repeat;
    display: inline-block;
}
.icon-truck {
    width:24px;
    height:24px;
    background-image:url(/class/css/sample/img/icon/icon-truck.png);
    background-size:24px 24px;
    background-repeat: no-repeat;
    display: inline-block;
}

/*分頁樣式*/
div.pagination {
    width: 100%;
    font-size: 16px;
    padding:3px;
    margin:3px;
    text-align:center;
}
div.pagination ul {
    list-style: none;
    padding: 2px 0;
    line-height: 16px;
    margin-top: 30px;
}
div.pagination li {
    display: inline;
}
div.pagination li a {
    padding: 4px 8px;
    border: 1px solid #676767;
    text-decoration: none;
    color: #676767;
}
div.pagination li a:hover, div.pagination li a:active {
    color: #FFF;
    background:#989898;
    font-weight: bold;
}
div.pagination li.current,div.pagination li.current:hover {
    padding: 4px 8px;
    border: 1px solid #676767;
    font-weight: bold;
    color: #FFF;
    background:#989898;
    cursor:default;
}
div.pagination li.disabled,div.pagination li.disabled:hover {
    padding: 4px 8px;
    border: 1px solid #d0d0d0;
    color: #d0d0d0;
    cursor:default;
}
div.pagination li.pre {
    margin-right:20px;
}
div.pagination li.next {
    margin-left:20px;
}
div.pagination li select {
    padding: 4px 8px;
    font-size: 16px;
    background: none;
    color: #676767;
    border: 1px solid #676767;
}
div.pagination li select option {
    background: #none;
}
/*其他設定*/
span.required {
    margin-right: 5px;
    color: #F00;
    font-size: 26px;
    vertical-align: middle;
    line-height: 26px;
}

/*Masonry*/
.grid-item {
    float: left;
    border-radius: 5px;
	-webkit-box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.5);
	-moz-box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.5);
	box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.5);
}
.grid-item > p {
    margin: 15px 10px;
    font-size: 14px;
}
.grid-item > p > span.fa {
	width:30px;
}
/*Masonry option*/
.grid-item-venteam .grid-item {
    border: 1px solid #d0d0d0;
    background: #f2f2f2;
    width: 17%;
    min-width: 250px;
    padding: 5px;
    margin: 1%;
	color:#333;
}
.grid-item-venteam .grid-item p.grid-img {
	height: 200px;
	text-align: center;
}
.grid-item-venteam .grid-item p.grid-img > img {
	max-height: 100%;
	max-width: 100%;
}
.grid-item-gallery .grid-item {
    border: 1px solid #d0d0d0;
    background: #f2f2f2;
    width: 300px;
    padding: 3px;
    margin: 10px;
    color:#333;
    border-radius: 0;
}
.grid-item-gallery .grid-item p {
	margin: 0;
}
.grid-item-gallery .grid-item p.grid-img {
	text-align: center;
	/*height: 200px;*/
	/*overflow: hidden;*/
}
.grid-item-gallery .grid-item p.grid-img > img {
	max-width: 100%;
    max-height: 100%;
}
.grid-item-gallery .grid-item p.grid-remark {
    font-size: 14px;
    max-height: 19px;
    overflow: hidden;
    width: 98%;
    color: #fff;
    padding: 1%;
    background: #000;
    /* margin-top: -25px; */
    /*position: relative;*/
    /*background: rgba(0,0,0,0.8);*/
}