/*
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
說明：
CSS主要Div區塊命名原則如下
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
--------------------------------------------------
Frame(框架)CssFrame
	在傳統Html中的Frame框架不再使用。
	Html & Asp & VB.Net & C#
	使用Div組成的模擬框架，例：CssFrameHead，CssFrameMenu，CssFrameFoot....
	.Net
	使用Master Page，例：同上
--------------------------------------------------
Area(最外層區塊)CssArea
	基本頁面中，整個排版配置為一個一個主要Div由上至下組成，這些可以說是一列一列，這每一列(區塊)中再去置入不同的區塊產生變化
	此最外層區塊，通常僅用於區分區域，不要有太多設定。
	通常只會有以下少少屬性：
	屬性例：
	height
	overflow
	名稱例：
	CssArea1,CssArea2,CssArea....
	CssAreaSlogan，CssAreaSlideshow....
--------------------------------------------------
Position()CssPosition
	Area中並無控制間距或邊距，為Area中的第一層子區塊，用於控制內間距or外邊距or置中
	名稱例：
	CssPosition1,CssPosition2,CssPosition....
	CssPositionSlogan，CssPositionSlideshow....
--------------------------------------------------
Unit(分割欄區塊)CssUnit
	控制整個Position中的欄分割，同一列分成幾個欄(單元)，1/2分割，1/3分割....
	屬性例：
	Float:left;
	display:inline-block;
--------------------------------------------------
Container(容器)CssContainer
	用於某一單元的最外層容器
--------------------------------------------------
FullScreenBackground(滿版背景)CssFullScreenBackground
	用於彈出視窗滿版背景，當遮罩使用
	名稱例：CssFullScreenBackgroundPopup
--------------------------------------------------
自訂特別使用名詞
	Slideshow	(輪播)
	Slider		(滑塊)
	Sliding		(滑動)
--------------------------------------------------
＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊
*/

/*////////////////////////////////////////////////////////////////////////////////////////////////////
共用
////////////////////////////////////////////////////////////////////////////////////////////////////*/
	body{
		width:100%; /*寬度*/
		/*height:100%; /*高度*/
		margin:0px; /*外邊距*/
		padding:0px; /*內間距*/
	}
/*////////////////////////////////////////////////////////////////////////////////////////////////////
共用
////////////////////////////////////////////////////////////////////////////////////////////////////*/
	*{
		/*邊界不外擴*/
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		/*消除手機點擊連結出現藍色*/
		-webkit-tap-highlight-color:transparent;
	}
/*////////////////////////////////////////////////////////////////////////////////////////////////////
預設連結樣式
////////////////////////////////////////////////////////////////////////////////////////////////////*/
	a:link{ /*一般的、未被點擊過的連結*/
		color:#6699FF;
		text-decoration:none;
	}
	a:visited{ /*已被點擊的連結*/
		color:#6699FF;
		text-decoration:none;
	}
	a:hover{ /*滑鼠指標移到連結上方時的狀態*/
		color:#FF0066;
		text-decoration:none;
	}
	a:active{ /*連結被點擊時的狀態*/
		color:#DD0000;
		text-decoration:none;
	}
/*////////////////////////////////////////////////////////////////////////////////////////////////////
字型
////////////////////////////////////////////////////////////////////////////////////////////////////*/
	*{
        /*微軟正黑體（Microsoft JhengHei）、細明體（MingLiU）、標楷體（DFKai-sb）*/
		font-family: Verdana, Tahoma, Arial, Helvetica, 微軟正黑體, Microsoft JhengHei, 新細明體, 標楷體;
		/*文字強迫換行，英文字會被切一半*/
		word-break:break-all;
		/*依單字換行*/
		/*word-wrap:break-word;*/
		/*強迫文字不換行*/
		/*white-space:nowrap;*/
	}
	body,th,td,div,span,label,input[type=text],input[type=area],input[type=select]{
        /*微軟正黑體（Microsoft JhengHei）、細明體（MingLiU）、標楷體（DFKai-sb）*/
		font-family: Verdana, Tahoma, Arial, Helvetica, 微軟正黑體, Microsoft JhengHei, 新細明體, 標楷體;
	}
/*////////////////////////////////////////////////////////////////////////////////////////////////////
表單物件
////////////////////////////////////////////////////////////////////////////////////////////////////*/
	form{
		margin-top:0px;
		margin-bottom:0px;
	}
	/*--------------------------------------------------
	補充說明：
	checkbox(多選)，radio(單選)預設都無法與文字水平對齊，所以加上下面這些設定
	--------------------------------------------------*/
	input[type=checkbox], input[type=radio]{
	    height:14px;
	    vertical-align: middle;
	    position: relative;
	    bottom: 1px;
		cursor:pointer;
	}
	input[type=radio]{
	    bottom: 2px;
	}

	input:focus{outline:none} /*消除Google Chrome 輸入框藍線*/
	textarea:focus{outline:none} /*消除Google Chrome 輸入框藍線*/
	select:focus{outline:none} /*消除Google Chrome 輸入框藍線*/

	input:-webkit-input-placeholder { /* 輸入框提示文字 , WebKit browsers */
		color:#DDDDDD;
	}
	input:-moz-placeholder { /* 輸入框提示文字 , Mozilla Firefox 4 to 18 */
		color:#DDDDDD;
	}
	input::-moz-placeholder { /* 輸入框提示文字 , Mozilla Firefox 19+ */
		color:#DDDDDD;
	}
	input:-ms-input-placeholder { /* 輸入框提示文字 , Internet Explorer 10+ */
		color:#DDDDDD;
	}

	input::-webkit-calendar-picker-indicator { /* 去除 Input Datalist 輸入框上的下拉箭頭 */
		display:none;
		-webkit-appearance:none;
		line-height:100%;
	}
/*////////////////////////////////////////////////////////////////////////////////////////////////////
共用
////////////////////////////////////////////////////////////////////////////////////////////////////*/
	.CssUpdateHistoryContainer{
		margin-top:0px;
		margin-bottom:5px;
		display:inline-block;
		overflow:hidden;
	}
		.CssUpdateHistoryBoxLink{
			margin-top:0px;
			margin-bottom:0px;
			color:#6699FF;
			text-decoration:none;
			cursor:pointer;
		}
		.CssUpdateHistoryBoxLink:hover{
			color:#FF0066;
			text-decoration:underline;
		}
		.CssUpdateHistoryBoxThis{
			margin-top:0px;
			margin-bottom:0px;
			color:#CC0000;
			text-decoration:none;
			cursor:pointer;
		}
		.CssUpdateHistoryBoxThis:hover{
			color:#CC0000;
			text-decoration:underline;
		}
/*		.CssUpdateHistoryBox a{
			color:#6699FF;
			text-decoration:none;
		}
		.CssUpdateHistoryBox a:hover{
			color:#FF0066;
			text-decoration:underline;
		}*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////
顏色
////////////////////////////////////////////////////////////////////////////////////////////////////*/
	.CssRequired{
		color:#DD0000 !important;
	}
	.CssRed{
		color:#FF0000 !important;
	}
	.CssBlue{
		color:#0000FF !important;
	}
	.CssWhite{
		color:#FFFFFF !important;
	}
	.CssDD0000{
		color:#DD0000 !important;
	}
	.Css3366FF{
		color:#3366FF !important;
	}
	.Css6699FF{
		color:#6699FF !important;
	}
	.CssFF0066{
		color:#FF0066 !important;
	}
	.CssFFFFFF{
		color:#FFFFFF !important;
	}
	.Css333333{
		color:#333333 !important;
	}
	.Css666666{
		color:#666666 !important;
	}
	.Css999999{
		color:#999999 !important;
	}
	.CssAAAAAA{
		color:#AAAAAA !important;
	}
	.CssCCCCCC{
		color:#CCCCCC !important;
	}
	.CssHidden{
		color:#999999;
		text-shadow:#FFFFFF 1px 1px;
	}
/*////////////////////////////////////////////////////////////////////////////////////////////////////
游標
////////////////////////////////////////////////////////////////////////////////////////////////////*/
	.CssDefault{
		cursor:default !important;
	}
	.CssPointer{
		cursor:pointer !important;
	}
/*////////////////////////////////////////////////////////////////////////////////////////////////////
捲軸
////////////////////////////////////////////////////////////////////////////////////////////////////*/
	body{
		scrollbar-3d-light-color:#FFE1C4;	/**/
		scrollbar-arrow-color:#000000;		/*箭頭*/
		scrollbar-base-color:#666666;		/**/
		scrollbar-dark-shadow-color:#F3F3F3;/**/
		scrollbar-face-color:#666666;		/*捲軸面板*/
		scrollbar-highlight-color:#FFFFFF;	/*捲軸底色*/
		scrollbar-shadow-color:#000000;		/*捲軸陰影*/
	}


    ::-webkit-scrollbar{
        width: 10px;
    }
    ::-webkit-scrollbar-track{
        -webkit-border-radius: 10px;
        border-radius: 10px;
        margin:0px 0px 0px 0px;
    }
    ::-webkit-scrollbar-thumb{
        -webkit-border-radius: 4px;
        border-radius: 4px;
        /*background: rgb(219,219,219);*/
		background: rgb(99,195,194,0.3);
    }

	.CssViewImg{
		width:100%;
	}
/*////////////////////////////////////////////////////////////////////////////////////////////////////
Html5 Color
////////////////////////////////////////////////////////////////////////////////////////////////////*/
	input[type=color]{
		/*border: 0;*/
		padding:0px;
		outline: none;
		color:#000000;
	}
		::-webkit-color-swatch-wrapper{
			background-color:#FFCC00;
			border:mome;
			padding:0px;
			margin:0px;
		}
		::-webkit-color-swatch{position: relative;}
		/*說明*/
		/*::-webkit-color-swatch-wrapper; /*這個是外面的容器*/
		/*::-webkit-color-swatch; /*這個是內部的顏色按鈕，改變顏色後會改變*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////
文字閃爍
////////////////////////////////////////////////////////////////////////////////////////////////////*/
	.CssBlink{
		animation-duration: 0.5s;
		animation-name: blink;
		animation-iteration-count: infinite;
		animation-direction: alternate;
		animation-timing-function: ease-in-out;
	}
/*	@keyframes blink{
		from{
			opacity: 1;
		}
		to{
			opacity: 0.3;
		}
	}*/
	@keyframes blink{
		0%{
			opacity: 1;
		}
		80%{
			opacity: 1;
		}
		81%{
			opacity: 0;
		}
		100%{
			opacity: 0;
		}
	}
/*////////////////////////////////////////////////////////////////////////////////////////////////////
jsTree右鍵選單
////////////////////////////////////////////////////////////////////////////////////////////////////*/
	.vakata-context{
		z-index:1;
	}
/*////////////////////////////////////////////////////////////////////////////////////////////////////
RWD 設定
////////////////////////////////////////////////////////////////////////////////////////////////////*/
@media (min-width: 1281px){

}
@media (max-width: 1280px){

}
@media (max-width: 768px){

}
@media (max-width: 480px){

}
/*////////////////////////////////////////////////////////////////////////////////////////////////////

////////////////////////////////////////////////////////////////////////////////////////////////////*/

/*////////////////////////////////////////////////////////////////////////////////////////////////////

////////////////////////////////////////////////////////////////////////////////////////////////////*/