/*////////////////////////////////////////////////////////////////////////////////////////////////////
說明：
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; /*內間距*/
		/*background-color:#F2F2F2;*/
		background-color:#FFFFFF;
	}
	*{
		/*邊界不外擴*/
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		/*消除手機點擊連結出現藍色*/
		-webkit-tap-highlight-color:transparent;
		padding:0px;
		margin:0px;
	}
/*////////////////////////////////////////////////////////////////////////////////////////////////////
LOGO 顏色
////////////////////////////////////////////////////////////////////////////////////////////////////*/

/*////////////////////////////////////////////////////////////////////////////////////////////////////
字型
////////////////////////////////////////////////////////////////////////////////////////////////////*/
	*{
        /*微軟正黑體（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輸入框預設背景顏色*/
	input:-webkit-autofill {
		/*填充偽元素*/
		-webkit-background-clip: text; /* 根據被景色剪裁字體填充進輸入框 */
		/*-webkit-text-fill-color: #000000; /* 填充字體色，根據自己想要的字體顏色進行填充 */
	}

	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:#EEEEEE;
	}
	input:-moz-placeholder { /* 輸入框提示文字 , Mozilla Firefox 4 to 18 */
		color:#EEEEEE;
	}
	input::-moz-placeholder { /* 輸入框提示文字 , Mozilla Firefox 19+ */
		color:#EEEEEE;
	}
	input:-ms-input-placeholder { /* 輸入框提示文字 , Internet Explorer 10+ */
		color:#EEEEEE;
	}

	.CssDisabled{
		color:#AAAAAA;
		text-shadow:#FFFFFF 1px 1px;
		border:#CCCCCC 1px solid;
		background-color:#EEEEEE;
	}
/*////////////////////////////////////////////////////////////////////////////////////////////////////
顯示
////////////////////////////////////////////////////////////////////////////////////////////////////*/
	.CssHide{
		display:none;
	}
	.CssShow{
		display:block;
	}
	.CssHiddenContainer{
		display:none;
	}
/*////////////////////////////////////////////////////////////////////////////////////////////////////
顏色
////////////////////////////////////////////////////////////////////////////////////////////////////*/
	.CssRequired{
		color:#DD0000 !important;
	}
	.CssRed{
		color:#FF0000 !important;
	}
	.CssBlue{
		color:#0000FF !important;
	}
	.CssWhite{
		color:#FFFFFF !important;
	}
	.CssDD0000{
		color:#DD0000 !important;
	}
	.CssAAAAAA{
		color:#AAAAAA !important;
	}
/*////////////////////////////////////////////////////////////////////////////////////////////////////
捲軸
////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*    ::-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);
    }*/
/*////////////////////////////////////////////////////////////////////////////////////////////////////
連結預設樣式
////////////////////////////////////////////////////////////////////////////////////////////////////*/
	a:link{
		color:#6699FF;
		text-decoration:none;
	}
	a:visited{
		color:#6699FF;
		text-decoration:none;
	}
	a:hover{
		color:#FF0066;
		text-decoration:underline;
	}
	a:active{
		color:#6699FF;
		text-decoration:none;
	}
/*////////////////////////////////////////////////////////////////////////////////////////////////////
文字閃爍
////////////////////////////////////////////////////////////////////////////////////////////////////*/
	.CssBlink{
		animation-duration: 0.5s;
		animation-name: blink;
		animation-iteration-count: infinite;
		animation-direction: alternate;
		animation-timing-function: ease-in-out;
	}
	@keyframes blink{
		0%{
			opacity: 1;
		}
		80%{
			opacity: 1;
		}
		81%{
			opacity: 0;
		}
		100%{
			opacity: 0;
		}
	}
/*////////////////////////////////////////////////////////////////////////////////////////////////////

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