@charset "UTF-8";
/*===== 表單設計 開始 =====*/
/*-----------------------------------
 字型
-----------------------------------*/
@font-face{
	/*指定的日文符號*/
	font-family: ff-PGothic;
	src:local('MS PGothic'),url('font/MS Gothic.ttf') format('truetype');
	unicode-range: U+3010,U+3011,U+25cf,U+25cb,U+25a0,U+25c6,U+25b2,U+306e,U+203b,U+ff1a,U+25ce,U+2018,U+2019,U+201c,U+201d;
	/*【】●○■◆▲の※：◎‘’“”*/
}
@font-face{
	/*Verdana*/
	font-family:ff-Verdana;
	src: local("Verdana");
}
@font-face{
	/*新細明體*/
	font-family:ff-PMingLiU;
	src: local("PMingLiU");
}
@font-face{
	/*微軟正黑體*/
	font-family:ff-JhengHei;
	src: local("Microsoft JhengHei");
}
@font-face{
	/*標楷體*/
	font-family:ff-DFKai-sb;
	src: local("DFKai-sb");
}

/*-----------------------------------
 大小,位置
-----------------------------------*/
/*
 *  元件字型,元件字級
 */
.art_word span,
.art_text input,
.art_password input,
.art_num input,
.art_select select,
.art_upload_raw input[type='text'],
.art_radio_ico span,
.art_checkbox_ico span,
.art_radio_own span,
.art_checkbox_own span,
.art_switch span,
.art_textarea textarea,
.art_button,
.art_select_own .art_select_own_box .list div,
.art_select_own .art_select_own_box .list span,
.art_list,
.art_list .art_list_header input[type='text'],
.art_datetime .art_datetime_date input[type='text'],
.art_datetime .art_datetime_time input[type='text'],
.art_cal,
.art_time{
	/*文字較清晰
	font-family: Verdana, ff-PGothic, ff-PMingLiU, sans-serif;
	font-size:15px;*/
	font-family: ff-PGothic, Verdana, "Microsoft JhengHei", sans-serif;
	font-size:14px;
}
 
/*
 *  元件 Inline Block
 */
.art_word,
.art_word span,
.art_text,
.art_text input,
.art_password,
.art_password input,
.art_num,
.art_num input,
.art_select,
.art_select select,
.art_upload_raw,
.art_upload_raw input[type='text'],
.art_radio_ico,
.art_radio_ico span,
.art_checkbox_ico,
.art_checkbox_ico span,
.art_radio_own,
.art_radio_own span,
.art_checkbox_own,
.art_checkbox_own span,
.art_switch,
.art_switch span,
.art_textarea,
.art_textarea textarea,
.art_button{
	display:inline-block;
}


/*
 *  元件 relative
 */
.art_word,
.art_text,
.art_password,
.art_num,
.art_select,
.art_upload_raw,
.art_radio_ico,
.art_checkbox_ico,
.art_radio_own,
.art_checkbox_own,
.art_switch{
	position:relative;
}



/*
 *  元件寬度
 */
.art_text,
.art_password,
.art_select,
.art_upload_raw,
.art_textarea{
	/*log_05*/
	width:100%;
	/*log_06*/
	max-width:500px;
}
.art_word,
.art_radio_ico,
.art_checkbox_ico{
	/*log_02*/
	min-width:24px;
}
.art_radio_own,
.art_checkbox_own{
	/*log_a*/
	min-width:24px;
}
.art_switch{
	/*log_b*/
	min-width:42px;
}
.art_num{
	width:120px;
}

 
/*
 *  元件高度
 */
.art_word span,
.art_text input,
.art_password input,
.art_num input,
.art_select select,
.art_upload_raw input[type='text'],
.art_radio_ico span,
.art_checkbox_ico span,
.art_radio_own span,
.art_checkbox_own span,
.art_switch span,
.art_button{
	/*log_04*/
	height:34px;
}
.art_textarea textarea{
	height:120px;
}



/*
 *  元件行高
 */
.art_text input,
.art_password input,
.art_num input,
.art_select select,
.art_upload_raw input[type='text']{
	/*log_04*/
	line-height:calc(34px - 2px);
}
.art_word span,
.art_radio_ico span,
.art_checkbox_ico span,
.art_radio_own span,
.art_checkbox_own span,
.art_switch span{
	/*log_04*/
	line-height:34px;
}
.art_textarea textarea{
	line-height:1.4em;
}
.art_button{
	/*log_04*/
	line-height:calc(34px - 4px);
}


/*
 *  元件內部寬度
 */
.art_text input,
.art_password input,
.art_num input,
.art_select select,
.art_upload_raw input[type='text'],
.art_textarea textarea{
	width:100%;
}




/*
 *  元件內部padding
 *  FF不可設定padding-top和padding-bottom,因為視覺錯誤.
 */
.art_text input,
.art_password input,
.art_num input,
.art_select select,
.art_upload_raw input[type='text'],
.art_textarea textarea{
	/*log_01*/
	padding-left:10px;
}
.art_text input,
.art_password input,
.art_num input,
.art_select select,
.art_upload_raw input[type='text'],
.art_textarea textarea{
	/*log_01*/
	padding-right:10px;
}
.art_word .art_icon.l ~ span,
.art_text .art_icon.l ~ input,
.art_password .art_icon.l ~ input,
.art_num .art_icon.l ~ input,
.art_select .art_icon.l ~ select,
.art_upload_raw .art_icon.l ~ input[type='text'],
.art_radio_ico .art_icon.l ~ span,
.art_checkbox_ico .art_icon.l ~ span{
	/*log_02*/
	padding-left:24px;
}
.art_word .art_icon.r ~ span,
.art_text .art_icon.r ~ input,
.art_password .art_icon.r ~ input,
.art_num .art_icon.r ~ input,
.art_select .art_icon.r ~ select,
.art_upload_raw .art_icon.r ~ input[type='text'],
.art_radio_ico .art_icon.r ~ span,
.art_checkbox_ico .art_icon.r ~ span{
	/*log_02*/
	padding-right:24px;
}
.art_radio_own .l ~ span,
.art_checkbox_own .l ~ span{
	/*log_a*/
	padding-left:24px;
}
.art_radio_own .r ~ span,
.art_checkbox_own .r ~ span{
	/*log_a*/
	padding-right:24px;
}
.art_switch .l ~ span{
	/*log_b*/
	padding-left:calc(42px + 5px);
}
.art_switch .r ~ span{
	/*log_b*/
	padding-right:calc(42px + 5px);
}
.art_button{
	padding-right:10px;
	padding-left:10px;
}
.art_textarea textarea{
	padding-top:10px;
	padding-bottom:10px;
}


/*
 *  元件因無文字造成基線錯誤，需用:before補加假字
 */
.art_word:before,
.art_radio_ico:before,
.art_checkbox_ico:before,
.art_radio_own:before,
.art_checkbox_own:before,
.art_switch:before{
	/*為了補加假字*/
	content: "\0000";
	/*為了看不到假字*/
	font-size: 0px;
}



/*
 *  元件圓角
 */
.art_text input,
.art_password input,
.art_num input,
.art_select select,
.art_upload_raw input[type='text'],
.art_textarea textarea,
.art_button{
	border-radius:4px;
}




/*
 *  自訂版單選\自訂版多選繪製圖形
 */
.art_radio_own i,
.art_checkbox_own i{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	/*log_a*/
	width:24px;
}
.art_radio_own i.l,
.art_checkbox_own i.l{
	left:0;
}
.art_radio_own i.r,
.art_checkbox_own i.r{
	right:0;
}

.art_radio_own i:before,
.art_radio_own i:after,
.art_checkbox_own i:before,
.art_checkbox_own i:after{
	content:" ";
	display:block;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}
.art_radio_own i:before,
.art_checkbox_own i:before{
	width:14px;
	height:14px;
	border:2px solid;
}
.art_radio_own i:before{
	border-radius:16px;
}
.art_checkbox_own i:before{
	border-radius:2px;
}
.art_radio_own i:after,
.art_checkbox_own i:after{
	width:10px;
	height:10px;
	opacity:0;
}
.art_radio_own i:after{
	border-radius:12px;
}
.art_radio_own input:checked ~ i:after,
.art_checkbox_own input:checked ~ i:after{
	opacity:1;
}


/*
 *  開關按鈕
 */
.art_switch i{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	/*log_b*/
	width:42px;
}
.art_switch i.l{
	left:0;
}
.art_switch i.r{
	right:0;
}
.art_switch i:before,
.art_switch i:after{
	content:" ";
	display:block;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
}
.art_switch i:before{
	left:0;
	width:40px;
	height:22px;
	border:1px solid;
	border-radius:2px;
}
.art_switch i:after{
	width:16px;
	height:16px;
	border:1px solid;
	border-radius:2px;
	left:3px;
}
.art_switch input:checked ~ i:after{
	left:21px;
}


/*
 *  按鈕
 */
.art_button{
	text-align:center;
}


/*
 *  覆蓋
 */
.art_overlay{
	position:fixed;
	width:100%;
	height:100%;
	top:0; 
	left:0;
	right:0;
	bottom:0;
}
.art_overlay{
	background-color:rgba(0,0,0,0.5);
}
.art_overlay.only_mobile{
	display: none;
}
@media (max-width: 600px) {
.art_overlay.only_mobile{
	display: block;
}
}




/*
 *  Icon寬度,Icon水平中間
 */
.art_icon{
	/*log_02*/
	width:24px;
	height:100%;
	background-repeat:no-repeat;
	background-position:50% 50%;
	font-style:inherit;
}

/*
 *  Icon垂直位置
 */
.art_icon{
	position:absolute;
	top:50%;
	transform:translateY(-50%);
}

/*
 *  Icon水平位置
 */
.art_word .art_icon.l,
.art_radio_ico .art_icon.l,
.art_checkbox_ico .art_icon.l{
	left:0;
}
.art_word .art_icon.r,
.art_radio_ico .art_icon.r,
.art_checkbox_ico .art_icon.r{
	right:0;
}
.art_text .art_icon.l,
.art_password .art_icon.l,
.art_num .art_icon.l,
.art_select .art_icon.l,
.art_upload_raw .art_icon.l{
	/*log_03*/
	left:1px;
}
.art_text .art_icon.r,
.art_password .art_icon.r,
.art_num .art_icon.r,
.art_select .art_icon.r,
.art_upload_raw .art_icon.r{
	/*log_03*/
	right:1px;
}



/*-----------------------------------
 粗線
-----------------------------------*/
.art_text input,
.art_password input,
.art_num input,
.art_select select,
.art_upload_raw input[type='text'],
.art_textarea textarea{
	/*log_03*/
	border-width:1px;
	border-style:solid;
}
.art_button{
	border-width:2px;
	border-style:solid;
}


/*-----------------------------------
 游標
-----------------------------------*/
a.art_word,
.art_select select,
.art_upload_raw label,
.art_radio_ico label,
.art_checkbox_ico label,
.art_radio_own label,
.art_checkbox_own label,
.art_switch label,
.art_button{
	cursor:pointer;
}


/*-----------------------------------
 顏色
-----------------------------------*/
/*
 *  文字
 */
.art_word,
.art_text input,
.art_password input,
.art_num input,
.art_select select,
.art_upload_raw input[type='text'],
.art_radio_ico span,
.art_checkbox_ico span,
.art_radio_own span,
.art_checkbox_own span,
.art_textarea textarea{
	color:#333;
}
.art_radio_own i:before,
.art_checkbox_own i:before{
	border-color:#25bf7f;	
}
.art_radio_own i:after,
.art_checkbox_own i:after{
	background:#25bf7f;
}




/*
 *  框線
 */
.art_text input,
.art_password input,
.art_num input,
.art_select select,
.art_upload_raw input[type='text'],
.art_switch i:before,
.art_textarea textarea{
	border-color:#25bf7f;
}


/*
 *  背景
 */
.art_text input,
.art_password input,
.art_num input,
.art_select select,
.art_upload_raw input[type='text'],
.art_switch i:before,
.art_textarea textarea{
	background-color:#ffffff;
}
.art_switch input:checked ~ i:before{
	background-color:#25bf7f;
}


/*
 *  控制按鈕框線
 */
.art_switch i:after{
	border-color:#25bf7f;
}


/*
 *  控制按鈕背景
 */
.art_switch i:after{
	background-color:#fff;
}

/*
 *  連結
 */
a.art_word{
	color:#25bf7f;
}

/*
 *  連結 - 作用中
 */
a.art_word:hover{
	color:#1da56c;
}


/*
 *  凍結:文字
 */
.disabled.art_word,
.disabled.art_text input,
.disabled.art_password input,
.disabled.art_num input,
.disabled.art_select select,
.disabled.art_upload_raw input[type='text'],
.disabled.art_radio_ico span,
.disabled.art_checkbox_ico span,
.disabled.art_radio_own span,
.disabled.art_checkbox_own span,
.disabled.art_switch span,
.disabled.art_textarea textarea{
	color:#999;
}
.disabled.art_radio_own i:before,
.disabled.art_checkbox_own i:before{
	border-color:#999;	
}
.disabled.art_radio_own i:after,
.disabled.art_checkbox_own i:after{
	background-color:#999;
}


/*
 *  凍結:背景
 */
.disabled.art_text input,
.disabled.art_password input,
.disabled.art_num input,
.disabled.art_select select,
.disabled.art_upload_raw input[type='text'],
.disabled.art_switch i:before,
.disabled.art_switch i:after,
.disabled.art_textarea textarea{
	background-color:#f7f7f7;
}
.disabled.art_switch input:checked ~ i:before{
	background-color:#e4e4e4;
}

/*
 *  凍結:ICON圖示
 */
.disabled .art_icon{
	opacity:.5;
}


/*
 *  按鈕
 */
.art_button{
	color:#fff;
	border-color:#ff822e;
	background:#ff822e;
}

/*
 *  按鈕 - 作用中
 */
.art_button:hover{
	color:#fff;
	border-color:#ff6600;
	background:#ff6600;
}

/*
 *  凍結:按鈕
 */
.disabled.art_button{
	color:#fff;
	border-color:#d2d2d2;
	background:#999999;
}





/*-----------------------------------
 動畫
-----------------------------------*/
.art_text input,
.art_password input,
.art_num input,
.art_select select{
	transition:border 0.5s;
}

.art_radio_own i:after,
.art_checkbox_own i:after{
	transition:opacity 0.2s;
}
.art_switch input ~ i:before{
	transition:background 0.2s;
}
.art_switch input ~ i:after{
	transition:left 0.2s;
}
.art_button{
	transition:all 0.2s;
}
.art_overlay{
	transition:all 1s;
}



/*-----------------------------------
 功能
-----------------------------------*/
/*
 *  元件文字不斷行
 */
.art_word span,
.art_upload_raw input[type='text'],
.art_radio_ico span,
.art_checkbox_ico span,
.art_radio_own span,
.art_checkbox_own span,
.art_switch span,
.art_button{
	white-space:nowrap;
}

/*
 *  元件字尾...
 */
.art_text input,
.art_password input,
.art_num input,
.art_select select,
.art_upload_raw input[type='text']{
	text-overflow:ellipsis;
}


/*
 *  字距
 */
.art_password input,
.art_num input{
	letter-spacing: 1px;
}


/*
 *  文字居中
 */
.art_num input{
	text-align: center;
}


/*
 *  元件移除預設作用樣式
 */
.art_text input:focus,
.art_password input:focus,
.art_num input:focus,
.art_select select,
.art_upload_raw input[type='text'],
.art_textarea textarea,
.art_button,
a.art_icon{
	outline:none;
}



/*
 *  使ICON失去阻擋元件的功能
 */
.art_text i.art_icon,
.art_password i.art_icon,
.art_select i.art_icon,
.art_upload_raw input[type='text']
/*.art_upload_raw i.art_icon因為手機版點下沒反應，只好讓ICON來反應*/{
	pointer-events: none;
}


/*
 *  禁用功能
 */
.disabled.art_word,
.disabled.art_text input,
.disabled.art_password input,
.disabled.art_num input,
.disabled.art_select select,
.disabled.art_upload_raw label,
.disabled.art_radio_ico label,
.disabled.art_checkbox_ico label,
.disabled.art_radio_own label,
.disabled.art_checkbox_own label,
.disabled.art_switch label,
.disabled.art_textarea textarea,
.disabled.art_button,
.disabled a.art_icon{
	pointer-events: none;
}




/*
 *  游標禁用圖示
 */
.disabled.art_text,
.disabled.art_password,
.disabled.art_num,
.disabled.art_select,
.disabled.art_upload_raw,
.disabled.art_radio_ico,
.disabled.art_checkbox_ico,
.disabled.art_radio_own,
.disabled.art_checkbox_own,
.disabled.art_switch,
.disabled.art_button,
.disabled.art_textarea{
	cursor:not-allowed;
}




/*
 *  禁用選取文字
 */
.art_upload_raw,
.art_radio_ico,
.art_checkbox_ico,
.art_radio_own,
.art_checkbox_own,
.art_switch,
.art_button{
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}


/*
 *  移除手機版預設樣式
 */
.art_text input,
.art_password input,
.art_num input,
.art_upload_raw input[type='text'],
.art_textarea textarea,
.art_button{
	-webkit-appearance:none;
	-moz-appearance:none;
}
 
/*
 *  移除下拉式選單的預設方向ICON
 */
.art_select select{
	-webkit-appearance:none;
	-moz-appearance:none;
}
/*IE用的*/
.art_select select::-ms-expand{
    display: none;
}


/*
 *  移除預設連結底線
 */
a.art_icon,
a.art_button{
	text-decoration:none;
}

/*
 *  上傳檔案\單選\多選\開關按鈕 input隱藏化
 */
.art_upload_raw input[type='file'],
.art_radio_ico input,
.art_checkbox_ico input,
.art_radio_own input,
.art_checkbox_own input,
.art_switch input{
	display:none;
}

/*
 *  層階
 */
.art_overlay{
	z-index:101;
}
.js_html{
	z-index:102;
}


/*-----------------------------------
 對應js產生的html
-----------------------------------*/
/*
 *  js_html
 */
.js_html{
	display:none;
	position:absolute;
	left:0;
}
.js_html.js_current{
	display: block;
}
@media (max-width: 600px) {
.js_html{
	position:fixed;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
}
}




/*-----------------------------------
 客製化元件
-----------------------------------*/
/*
 *  自動選單
 */
.art_select_own .art_select_own_box select{
	display:none;
}
.art_select_own,
.art_select_own .art_select_own_box{
	/*log_05*/
	width:100%;
	/*log_06*/
	max-width:500px;
}
.art_select_own,
.art_select_own .art_select_own_box{
	display:inline-block;
}
.art_select_own,
.art_select_own .art_select_own_box{
	position:relative;
}
.art_select_own .art_select_own_box .list .placeholder{
	display:inline-block;
	height:28px;
	line-height:26px;
	color:#333;
}
.art_select_own .art_select_own_box .list span ~ .placeholder{
	display:none;
}
.art_select_own .art_select_own_box select ~ .list span{
	display:inline-block;
	line-height:27px;
	height:26px;
	border-radius:4px;
	font-size:13px;
	padding:0 5px;
}
.art_select_own .art_select_own_box select ~ .list span a{
	display:none;
}
.art_select_own .art_select_own_box select[multiple] ~ .list span{
	position:relative;
	padding:0 24px 0 5px;
	color:#fff;
	background-color:#25bf7f;
}
.art_select_own .art_select_own_box select[multiple] ~ .list span a{
	display:inline-block;
	border-left:1px solid #fff;
	width:20px;
	height:100%;
	background:url(images/icon_close_ffffff.svg) 50% 50% no-repeat;
	position:absolute;
	top:50%;
	right:0;
	transform:translateY(-50%);
}

.art_select_own .art_select_own_box .list{
	/*log_01*/
	padding-left:10px;
}
.art_select_own .art_select_own_box .list{
	/*log_01*/
	padding-right:10px;
}
.art_select_own .art_select_own_box .art_icon.l ~ .list{
	/*log_02*/
	padding-left:24px;
}
.art_select_own .art_select_own_box .art_icon.r ~ .list{
	/*log_02*/
	padding-right:24px;
}
.art_select_own{
	border-radius:4px;
}
.art_select_own .art_select_own_box .art_icon.l{
	left:0;
}
.art_select_own .art_select_own_box .art_icon.r{
	right:0;
}
.art_select_own{
	/*log_03*/
	border-width:1px;
	border-style:solid;
}
.art_select_own .art_select_own_box{
	cursor:pointer;
}
.art_select_own .art_select_own_box select[multiple] ~ .list span{
	cursor:default;
}
.art_select_own{
	/*log_04*/
	min-height:34px;
	/*log_04*/
	line-height:calc(34px - 2px);
	border-color:#25bf7f;
	background-color:#fff;
}
.disabled.art_select_own{
	background:#f7f7f7;
}
.art_select_own .art_select_own_box input:focus{
	outline:none;
}
.disabled.art_select_own .art_select_own_box{
	pointer-events: none;
}
.disabled.art_select_own{
	cursor:not-allowed;
}



/*
 *  自動選單和自動多選選單和建議清單的列表
 */
.art_list{
	/*width:???;由js設定*/
	border-radius:4px;
	background-color:#fff;
	box-shadow: 0 0 5px 0 rgba(0,0,0,0.2);
}
.art_list .art_list_header{
	padding:5px 10px;
	border-radius:4px 4px 0 0;
	border-bottom:1px solid #dbdbdb;
}
.art_list .art_list_header input[type='text']{
	width:100%;
	height:30px;
	line-height:28px;
	padding:0 10px;
	outline:none;
	border:none;
}

.art_list .art_list_content{
	padding:10px;
	border-bottom:1px solid #dbdbdb;
	height: 260px;/*由chrome測量*/
	overflow-y:auto;
}
.art_list .art_list_content a{
	display:block;
	line-height:calc(30px - 1px);
	border-bottom:1px solid #dbdbdb;
	text-decoration:none;
	color:inherit;
	padding:2px 10px;
}
.art_list .art_list_content a:hover,
.art_list .art_list_content a.active:hover{
	color:#fff;
	background:#13c4d9;
}
.art_list .art_list_content a.active{
	color:#fff;
	background:#25bf7f;
}
.art_list .art_list_content a.sub{
	padding:2px 10px 2px 30px;
}
.art_list .art_list_content .group{
	line-height:calc(30px - 1px);
	border-bottom:1px solid #dbdbdb;
	text-decoration:none;
	color:inherit;
	padding:2px 10px;
	font-weight:bold;
}




/*
 *  輸入日期時間
 */
.art_datetime,
.art_datetime .art_datetime_date,
.art_datetime .art_datetime_date input[type='text'],
.art_datetime .art_datetime_time,
.art_datetime .art_datetime_time input[type='text']{
	display:inline-block;
}
.art_datetime,
.art_datetime .art_datetime_date,
.art_datetime .art_datetime_time{
	position:relative;
}
.art_datetime .art_datetime_date input[type='text'],
.art_datetime .art_datetime_time input[type='text']{
	/*log_04*/
	height:34px;
}
.art_datetime .art_datetime_date input[type='text'],
.art_datetime .art_datetime_time input[type='text']{
	/*log_04*/
	line-height:calc(34px - 2px);
}
.art_datetime .art_datetime_date input[type='text']{
	width:135px;/*由chrome測量*/
}
.art_datetime .art_datetime_time input[type='text']{
	width:85px;/*由chrome測量*/
}
.art_datetime .art_datetime_date input[type='text'],
.art_datetime .art_datetime_time input[type='text']{
	/*log_01*/
	padding-left:10px;
}
.art_datetime .art_datetime_date input[type='text'],
.art_datetime .art_datetime_time input[type='text']{
	/*log_01*/
	padding-right:10px;
}
.art_datetime .art_datetime_date .art_icon.l ~ input[type='text'],
.art_datetime .art_datetime_time .art_icon.l ~ input[type='text']{
	/*log_02*/
	padding-left:24px;
}
.art_datetime .art_datetime_date .art_icon.r ~ input[type='text'],
.art_datetime .art_datetime_time .art_icon.r ~ input[type='text']{
	/*log_02*/
	padding-right:24px;
}
.art_datetime{
	border-radius:4px;
}
.art_datetime .art_datetime_date .art_icon.l,
.art_datetime .art_datetime_time .art_icon.l{
	left:0;
}
.art_datetime .art_datetime_date .art_icon.r,
.art_datetime .art_datetime_time .art_icon.r{
	right:0;
}
.art_datetime{
	/*log_03*/
	border-width:1px;
	border-style:solid;
}
.art_datetime .art_datetime_date input[type='text'],
.art_datetime .art_datetime_time input[type='text']{
	border-style:none;
}
.art_datetime .art_datetime_date,
.art_datetime .art_datetime_time{
	cursor:pointer;
}
.art_datetime .art_datetime_date input[type='text'],
.art_datetime .art_datetime_time input[type='text']{
	color:#333;
}
.art_datetime{
	border-color:#dbdbdb;
}
.art_datetime{
	background-color:#fcfcfc;
}
.art_datetime .art_datetime_date input[type='text'],
.art_datetime .art_datetime_time input[type='text']{
	background:transparent;
}
.disabled.art_datetime .art_datetime_date input[type='text'],
.disabled.art_datetime .art_datetime_time input[type='text']{
	color:#999;
}
.disabled.art_datetime{
	background:#f7f7f7;
}
.art_datetime .art_datetime_date input:focus,
.art_datetime .art_datetime_time input:focus{
	outline:none;
}
.disabled.art_datetime .art_datetime_date,
.disabled.art_datetime .art_datetime_time{
	pointer-events: none;
}
.disabled.art_datetime{
	cursor:not-allowed;
}

/*
 *  月曆
 */
.art_cal{
	width:274px;/*由chrome測量*/
	border-radius:4px;
	background-color:#fff;
	box-shadow: 0 0 5px 0 rgba(0,0,0,0.2);
}
.art_cal .art_cal_header{
	padding:10px;
	border-radius:4px 4px 0 0;
	border-bottom:1px solid #dbdbdb;
}
.art_cal .art_cal_header div:nth-child(1){
	display:flex;
}
.art_cal .art_cal_header div:nth-child(1) div{
	color:#333;
	padding-right:10px;
}
.art_cal .art_cal_header div:nth-child(1) a{
	flex:1;
}
.art_cal .art_cal_header div:nth-child(1) a:nth-child(4){
	text-align:right;
}
.art_cal .art_cal_header div:nth-child(2){
	display:flex;
}
.art_cal .art_cal_header div:nth-child(2) span{
	flex:1;
	text-align:center;
	color:#888;
}
.art_cal .art_cal_content{
	padding:10px;
	border-bottom:1px solid #dbdbdb;
	height: 260px;/*由chrome測量*/
}
.art_cal .art_cal_content div{
	display:flex;
}
.art_cal .art_cal_content div span{
	flex:1;
	text-align:center;
	width:36px;
	height:36px;
	margin: 2px 0;
}
/*日期範圍 - 底色*/
.art_cal .art_cal_content div span.in{
	background:#25bf7f;
}
.art_cal .art_cal_content div span.in.in_first.active{
	background:#25bf7f;
}
.art_cal .art_cal_content div span.in.in_last.active{
	background:#25bf7f;
}
/*日期範圍 - 形狀*/
.art_cal .art_cal_content div span.in.in_first{
	border-top-left-radius:18px;
	border-bottom-left-radius:18px;
}
.art_cal .art_cal_content div span.in.in_last{
	border-top-right-radius:18px;
	border-bottom-right-radius:18px;
}
.art_cal .art_cal_content div span.in.begin_date{
	border-top-right-radius:0;
	border-bottom-right-radius:0;
}
.art_cal .art_cal_content div span.in.end_date{
	border-top-left-radius:0;
	border-bottom-left-radius:0;
}
.art_cal .art_cal_content div span.in.begin_date.end_date{
	border-radius:18px;
}
/*日期數字 - 位置*/
.art_cal .art_cal_content div span a{
	display:block;
	border-radius:18px;
	line-height:32px;
	border:2px solid;
	text-decoration:none;
}
/*日期數字 - 字色及背色 - 正常*/
.art_cal .art_cal_content div span a{
	color:#333;
	background-color:transparent;
	border-color:transparent;
}
.art_cal .art_cal_content div span a:hover{
	color:#25bf7f;
	background-color:#fff;
	border-color:#25bf7f;
}
.art_datetime[data-type='date_begin'] .art_cal .art_cal_content div span a:hover{
	border-top-right-radius:0;
	border-bottom-right-radius:0;
}
.art_datetime[data-type='date_end'] .art_cal .art_cal_content div span a:hover{
	border-top-left-radius:0;
	border-bottom-left-radius:0;
}
/*日期數字 - 字色及背色 - 日期範圍內*/
.art_cal .art_cal_content div span.in a{
	color:#fff;
	background-color:transparent;
	border-color:transparent;
}
.art_cal .art_cal_content div span.in a:hover{
	color:#25bf7f;
	background-color:#fff;
	border-color:#25bf7f;
}
/*日期數字 - 今天*/
.art_cal .art_cal_content div span.today a{
	position:relative;
}
.art_cal .art_cal_content div span.today a:before{
	content:" ";
	display:block;
	border-bottom:2px;
	width:16px;
	height:2px;
	position:absolute;
	bottom:6px;
	left:50%;
	transform:translateX(-50%);
}
.art_cal .art_cal_content div span.today a:before{
	background:#333;
}
.art_cal .art_cal_content div span.today a:hover:before{
	background:#25bf7f;
}
.art_cal .art_cal_content div span.in.today a:before{
	background:#fff;
}
.art_cal .art_cal_content div span.in.today a:hover:before{
	background:#25bf7f;
}
.art_cal .art_cal_footer{
	display:flex;
	padding:10px;
	text-align:center;
}
.art_cal .art_cal_footer a.done{
	flex:2;
	margin-left:10px;
}

/*日期 錯誤*/
.error.art_cal .art_cal_content div span.in{
	background:#ff8899;
}
.error.art_cal .art_cal_content div span.in.in_first{
	background:#ff5566;
}
.error.art_cal .art_cal_content div span.in.in_last{
	background:#ff5566;
}

/*
日期 凍結 (重寫方法) Begin
*/
/*日期範圍 - 底色*/
.art_cal .art_cal_content div span.disabled.in{
	background:#eaeaea;/*由photoshop測量*/
}
.art_cal .art_cal_content div span.disabled.in.in_first.active{
	background:#d8d8d8;/*由photoshop測量*/
}
.art_cal .art_cal_content div span.disabled.in.in_last.active{
	background:#d8d8d8;/*由photoshop測量*/
}
/*日期數字 - 字色及背色 - 正常*/
.art_cal .art_cal_content div span.disabled a{
	pointer-events: none;
	color:#999;
}
/*日期數字 - 今天*/
.art_cal .art_cal_content div span.disabled.today a:before{
	background:#999;
}
/*日期 錯誤*/
.error.art_cal .art_cal_content div span.disabled.in{
	background:#eaeaea;/*由photoshop測量*/
}
.error.art_cal .art_cal_content div span.disabled.in.in_first{
	background:#d8d8d8;/*由photoshop測量*/
}
.error.art_cal .art_cal_content div span.disabled.in.in_last{
	background:#d8d8d8;/*由photoshop測量*/
}
/*
日期 凍結 (重寫方法) end
*/

/*
 *  時間
 */
.art_time{
	width:274px;/*由chrome測量*/
	border-radius:4px;
	background-color:#fff;
	box-shadow: 0 0 5px 0 rgba(0,0,0,0.2);
}
.art_time .art_time_header{
	padding:10px;
	border-radius:4px 4px 0 0;
	border-bottom:1px solid #dbdbdb;
}
.art_time .art_time_header div{
	display:flex;
}
.art_time .art_time_header div .art_num{
	flex:1;
}
.art_time .art_time_header div .art_word{
	padding-left:5px;
}
.art_time .art_time_content{
	padding:10px;
	border-bottom:1px solid #dbdbdb;
	height: 270px;/*由chrome測量*/
}
.art_time .art_time_content table{
	width:100%;
}
.art_time .art_time_content table th{
	padding:0;
	font-weight:normal;
	min-width:36px;
}
.art_time .art_time_content table th .art_word{
	color:#888;	
}
.art_time .art_time_content table td{
	padding:0;
	width:0;
}
.art_time .art_time_content table td div span{
	display:inline-block;
	text-align:center;
	width:36px;
	height:36px;
	margin: 2px 0;
}
.art_time .art_time_content hr{
	border:0;
	border-bottom:1px dashed #888;
	height:1px;
	margin:5px 0;
}
/*時間 - 底色*/
.art_time .art_time_content div span.active{
	background:#25bf7f;
}
/*時間 - 形狀*/
.art_time .art_time_content div span.active{
	border-radius:18px;
}
/*時間數字 - 位置*/
.art_time .art_time_content div span a{
	display:block;
	border-radius:18px;
	line-height:32px;
	border:2px solid;
	text-decoration:none;
}
/*時間數字 - 字色及背色 - 正常*/
.art_time .art_time_content div span a{
	color:#333;
	background-color:transparent;
	border-color:transparent;
}
.art_time .art_time_content div span a:hover{
	color:#25bf7f;
	background-color:#fff;
	border-color:#25bf7f;
}
/*時間數字 - 字色及背色 - 範圍內*/
.art_time .art_time_content div span.active a{
	color:#fff;
	background-color:transparent;
	border-color:transparent;
}
.art_time .art_time_content div span.active a:hover{
	color:#25bf7f;
	background-color:#fff;
	border-color:#25bf7f;
}
.art_time .art_time_footer{
	display:flex;
	padding:10px;
	text-align:center;
}
.art_time .art_time_footer a.done{
	flex:2;
	margin-left:10px;
}

/*===== 表單設計 結束 =====*/


/*
 *  Icon圖示
 */
.art_icon.icon-default{
	background-image: url(images/icon_default_333333.svg);
}
.art_icon.icon-bottom{
	background-image: url(images/icon_bottom_333333.svg);
}
.art_icon.icon-upload{
	background-image: url(images/icon_upload_333333.svg);
}
.art_radio_ico input ~ .art_icon.icon-radio{
	background-image: url(images/icon_radio_333333.svg);
}
.art_radio_ico input:checked ~ .art_icon.icon-radio{
	background-image: url(images/icon_radio_checked_333333.svg);
}
.art_checkbox_ico input ~ .art_icon.icon-checkbox{
	background-image: url(images/icon_checkbox_333333.svg);
}
.art_checkbox_ico input:checked ~ .art_icon.icon-checkbox{
	background-image: url(images/icon_checkbox_checked_333333.svg);
}
.art_icon.icon-link{
	background-image: url(images/icon_link_25bf7f.svg);
}
.art_icon.icon-link:hover{
	background-image: url(images/icon_link_1da56c.svg);
}
.art_icon.icon-eye-open{
	background-image: url(images/icon_eye_open_25bf7f.svg);
}
.art_icon.icon-eye-open:hover{
	background-image: url(images/icon_eye_open_1da56c.svg);
}
.art_icon.icon-eye-close{
	background-image: url(images/icon_eye_close_25bf7f.svg);
}
.art_icon.icon-eye-close:hover{
	background-image: url(images/icon_eye_close_1da56c.svg);
}
.art_icon.icon-cancel{
	background-image: url(images/icon_cancel_25bf7f.svg);
}
.art_icon.icon-cancel:hover{
	background-image: url(images/icon_cancel_1da56c.svg);
}
.art_icon.icon-calendar{
	background-image: url(images/icon_calendar_25bf7f.svg);
}
.art_icon.icon-calendar:hover{
	background-image: url(images/icon_calendar_1da56c.svg);
}
.art_icon.icon-time{
	background-image: url(images/icon_time_25bf7f.svg);
}
.art_icon.icon-time:hover{
	background-image: url(images/icon_time_1da56c.svg);
}
.art_icon.icon-add{
	background-image: url(images/icon_add_25bf7f.svg);
}
.art_icon.icon-add:hover{
	background-image: url(images/icon_add_1da56c.svg);
}
.art_icon.icon-subtract{
	background-image: url(images/icon_subtract_25bf7f.svg);
}
.art_icon.icon-subtract:hover{
	background-image: url(images/icon_subtract_1da56c.svg);
}



*{
	box-sizing:border-box;
	margin:0;
	padding:0;
}
html { 
	background:url(images/bg.jpg) no-repeat center center fixed;
	background-size:cover;
}
body {
	font-family: Verdana, "Microsoft JhengHei", sans-serif;
	font-size: 15px;
	color:#333;
	overflow-y:scroll;
}
img{
	border:0;
}


/* art ui 微調 */
.art_select_own .art_select_own_box .list{
	padding-top:5px;
	padding-bottom:5px;
}
@media(max-width:600px){
.art_select_own .art_select_own_box .list{
	padding-top:3px;
}
}

/*通知*/
.snackbar{
	position:fixed;
	bottom:10px;
	width:100%;
	max-width:500px;
	left:50%;
	transform:translateX(-50%);
}
.snackbar div{
	margin:0 20px 5px 20px;
	padding:8px 0 8px 0;
	/**/
	display:flex;
	align-items:center;
	border-radius:4px;
	border:1px solid #ff6600;
	background:#fff;
	/**/
	opacity:0;
}
.snackbar div p{
	flex:1;
	font-size:15px;
	color:#ff6600;
	line-height:20px;
	padding:0 0 0 20px;
}
.snackbar div a{
	width:40px;
	height:1em;
	text-align:center;
	display:block;
	text-decoration:none;
	cursor:pointer;
	background:url(images/icon_cancel_ffffff.svg) 50% 50% no-repeat;
}
.snackbar div.warning{
	background:#fff;
}
.snackbar div.warning a:hover{
	color:#ff6600;
}


/*對話框*/
.dialog{
	height:0;
	overflow:hidden;
}
.dialog.show{
	height:auto;
}
.dialog .dialog_overlay{
	position:static;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0, 0, 0, 0);
	transition:all 0.5s;
}
.dialog.show .dialog_overlay{
	position:fixed;
	background:rgba(0, 0, 0, 0.5);
}
.dialog .dialog_content{
	position:static;
	top:35%;
	left:50%;
	transform:translate(-50%,-50%);
	border-radius:4px;
	transition:top 0.5s;
	/**/
	background:#fff;
	min-width:310px;
	max-width:500px;
}
.dialog .dialog_content.full{
	min-width:400px !important;
	max-width:none !important;
}
.dialog.show .dialog_content{
	position:fixed;
	top:40%;
}
.dialog .dialog_content .text{
	padding:20px 20px 0 20px;
}
.dialog .dialog_content .text p{
	font-size:15px;
	line-height:20px;
	padding:0 0 6px 0;
}
.dialog .dialog_content .func{
	padding:0 10px 10px 10px;
	text-align:center;
}
.dialog .dialog_content .func a{
	display:inline-block;
	text-decoration:none;
	text-align:center;
	font-size:14px;
	line-height:28px;
	border-radius:4px;
	margin:10px;
	padding:0 30px;
	cursor:pointer;
	max-width:150px;
	color:#fff;
	transition:all .2s;
	background:#ff822e;
}
.dialog .dialog_content .func a:hover{
	background:#ff6600;
}


/* 登入區 */
.login{
	margin:60px auto 0 auto;
	padding:0 20px;
}
.login table{
	width:100%;
	max-width:360px;
	margin:0 auto;
}
.login table tr:nth-child(1) th img{
	width:70%;
}
.login table th{
	padding:0 0 10px 0;
}
.login table td[align="right"]{
	padding:5px 0 5px 0;
	min-width:60px;
	text-align:left;
}
.login table td[align="left"]{
	padding:5px 0 5px 0;
}
.login table td .bottom{
	margin:10px 0 0 0;
}
.login table td .bottom .art_button{
	display:block;
	width:100%;
	height:40px;
	line-height:calc(40px - 4px);
}
.login table table th{
	padding:0;
}
.login table table td{
	padding:0;
}
.login table table td img{
	margin:0 0 0 5px;
}
.login table table td .reset{
	display:block;
	margin:0 0 0 5px;
	width:16px;
	height:16px;
	background-image: url(images/icon_reset_25bf7f.svg);
}
.login table table td .reset:hover{
	background-image: url(images/icon_reset_1da56c.svg);
}

/* login_footer */
.login_footer{
	margin:30px 0 0 0;
	padding:10px 0 10px 0;
	font-size:12px;
	line-height:18px;
	text-align:center;
}
.login_footer span{
	white-space:nowrap;
}
.footer{
	padding:50px 0 10px 0;
	font-size:12px;
	line-height:18px;
	color:#4c4743;
	text-align:center;
}
.footer span{
	white-space:nowrap;
}


/* header */
.header{
	margin:0 0 50px 0;
	padding:0 10px;
	background:#fff;
	overflow:auto;
	border: 1px solid transparent;
	border-width: 0 0 4px 0;
	border-image: linear-gradient(to right, rgb(19, 196, 217) 0%, rgb(37, 191, 127) 100%);
	border-image-slice: 1;
}
.header .header_box{
	margin:0 auto;
	max-width:900px;
}
.header .header_box a{
	text-decoration:none;
	display:inline-block;
	float:left;
}
.header .header_box a:nth-child(1){
	margin:15px 30px 0 0;
}
.header .header_box a:nth-child(1) img{
	height:50px;
}
.header .header_box a:nth-child(2),
.header .header_box a:nth-child(3),
.header .header_box a:nth-child(4),
.header .header_box a:nth-child(5){
	margin:40px 10px 0 0;
	font-size:16px;
	text-align:center;
	min-width:100px;
	line-height:40px;
	color:#fff;
	background: #13c4d9; /* Old browsers */
	background: -moz-linear-gradient(left,  #13c4d9 0%, #25bf7f 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  #13c4d9 0%,#25bf7f 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  #13c4d9 0%,#25bf7f 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#13c4d9', endColorstr='#25bf7f',GradientType=1 ); /* IE6-9 */
}
@media(max-width:600px){
.header{
	margin:0 0 20px 0;
	padding:10px 10px 10px 10px;
}
.header .header_box a{
	float:none;
}
.header .header_box a:nth-child(1){
	margin:0 20px 10px 20px;
	display:block;
	text-align:center;
}
.header .header_box a:nth-child(1) img{
	width:80%;
	height:auto;
}

.header .header_box a:nth-child(2),
.header .header_box a:nth-child(3),
.header .header_box a:nth-child(4),
.header .header_box a:nth-child(5){
	margin:10px 0 0 0;
	line-height:40px;
	width:49%;
}
}


/* 內容 */
.container{
	padding:10px;
}
@media(max-width:600px){
.container{
	padding:10px 20px;
}
}

/*table_A*/
.container .table_A{
	width:100%;
	max-width:600px;
	margin:0 auto;
}
.container .table_A th,
.container .table_A td{
	padding:0 0 20px 0;
	vertical-align:top;
}
.container .table_A th{
	font-weight:normal;
	text-align:left;
	padding-top:7px;
	padding-right:10px;
	color:#22b075;
}
.container .table_A td .bottom{
	padding:20px 0 0 0;
	text-align:center;
}
.container .table_A td .bottom .art_button{
	min-width:120px;
}
.container .table_A td .bottom .art_word span{
	font-size:12px;
	color:#ff6600;
}
@media(max-width:600px){
.container .table_A th,
.container .table_A td{
	display:block;
	padding:0 0 5px 0;
}
.container .table_A th{
	padding-top:0px;
	padding-right:0px;
	font-size:20px;
}
.container .table_A td{
	padding-bottom:20px;
}
}


/*table_B*/
.container .table_B{
	width:100%;
	max-width:600px;
	margin:0 auto;
}
.container .table_B .tr_copy{
	display:none;
}
.container .table_B th{
	font-weight:normal;
	text-align:left;
	border-bottom:1px dashed #333;
	padding:20px 10px 20px 20px;
}
.container .table_B td{
	border-bottom:1px dashed #333;
	padding:20px 20px 20px 10px;
}
.container .table_B tr:first-child th{
	padding:0 20px 0 20px;
}
.container .table_B tr:first-child td{
	padding:0 20px 0 10px;
	color:#22b075;
}
.container .table_B th .art_word{
	color:#ff822e;
}
.container .table_B th .art_word:hover{
	color:#ff6600;
}
.container .table_B td .art_text,
.container .table_B td .art_password{
	margin-bottom:5px;
}
.container .table_B .bottom{
	text-align:center;
}
.container .table_B tr:last-child th,
.container .table_B tr:last-child td{
	border-bottom:none;
}
@media(max-width:600px){
.container .table_B th,
.container .table_B td{
	display:block;
}
.container .table_B th{
	text-align:right;
	border-bottom:none;
	padding:10px 0 0px 0;
	
}
.container .table_B th .art_word span{
	font-size:16px;
}
.container .table_B td{
	padding:0px 0 10px 0;
}
.container .table_B tr:first-child th{
	padding:0 0 0 0;
}
.container .table_B tr:first-child td{
	padding:0 0 10px 0;
}
.container .table_B .bottom{
	padding-top:20px;
}
}

.container .logout{
	max-width:600px;
	margin:100px auto 0 auto;
	text-align:center;
}
.container .logout p{
	font-size:16px;
}

.note{
	margin:5px 0 0 0;
}
.note p{
	font-size:14px;
}

.box_01,
.box_02{
	display:none;
}

.fix_01{
	width:auto;
}
@media(max-width:600px){
.fix_01 select{
	padding-left:5px;
	padding-right:20px;
}
.fix_02{
	min-width:0;
}
.fix_02:before{
	display:none;
}
.fix_03{
	display:block;
}

}