@charset "utf-8";
/* 優吉兒網頁編號News開發
   開發日期:2014/1/23
   開發人員：Jay
----------------------------------*/
@import url('../../css/ugC_Main.css');

/*================================================================1.基礎樣式設定(不能修改)======================================================================*/

/*1-1.內頁內容版頭+麵包屑設定
------------------------*/
.PageTitle { width:1000px; height:50px; overflow:hidden; margin:0 auto;}
.PageTitle h1 { font-size:20px; height:30px; line-height:30px; float:left;}
.PageTitle .BreadCrumbs { height:50px; line-height:50px; font-size:12px; float:right;}
.PageTitle .BreadCrumbs a { text-decoration:none;}

/*1-2.內頁分頁選單設定
------------------------*/
.PageMenu { width:100%; min-width:1000px; height:45px; background:url(../images/Bg_PageMenu.jpg); background-repeat:repeat-x; overflow:hidden; margin:0 auto;}
.PageMenu ul { width:1000px; height:45px; overflow:hidden; margin:0 auto;}
.PageMenu li { width:140px; height:45px; line-height:50px; float:left; background:url(../images/Bg_PageMenuLi.jpg); background-repeat:no-repeat; text-align:center; list-style:none; margin:0 5px; font-size:14px;}
.PageMenu li a:link { width:140px; height:45px; display:block; text-decoration:none; color:#919192; background:url(../images/Bg_PageMenuLiA.jpg);}
.PageMenu li a:visited { color:#919192;}
.PageMenu li a:hover { color:#000;}
.PageMenu li a:active { color:#000;}

/*1-2.內頁內容設定
------------------------*/
.PageContent { width:100%; min-width:1000px; height:auto; overflow:visible; padding:50px 0; background:#fff; float:left;}
.PageContent .PageNews{ width:1000px; height:auto; overflow:hidden; margin:0 auto;}
.PageContent .PageNews li { list-style:none; height:auto; line-height:26px; padding:10px 0; border-bottom:#999 1px dotted; color:#333; font-size:16px;}
.PageContent .PageArticle { width:980px; height:auto; overflow:auto; padding:5px 10px; margin:0 auto;}
.PageContent .PageArticle .PageArticleH1 { font-size:20px; height:auto; line-height:30px; padding:5px 0; margin-bottom:1em;}
.PageContent .PageArticle p { font-size:14px; line-height:1.5em; color:#4c4b4b; margin-bottom:1em;}
.PageContent .PageArticle h2 { font-size:16px; line-height:1.5em; height:1.5em; color:#000; margin-bottom:1em;}
.PageContent .PageArticle img { /*max-width:980px;*/ height:auto; /*margin-bottom:1em;*/}
.PageContent .PageArticle img.Large { width:1000px; height:auto;}
.PageContent .PageArticle img.Small { width:150px; height:auto;}

/*1-3.回上一頁按鈕設定
------------------------*/
a.GoBack:link { width:120px; height:35px; line-height:35px; text-align:center; color:#fff; font-size:12px; text-decoration:none; display:block; background:#666; margin:20px auto;}
a.GoBack:visited { color:#fff; background:#666; }
a.GoBack:hover { color:#fff100; background:#333;}
a.GoBack:active { color:#fff100; background:#333;}

/*================================================================2.個別樣式設定(可以依設計修改樣式)======================================================================*/

/*2-1.內頁內容版頭+麵包屑設定
------------------------*/
.PageTitle { background:url(../images/PageTitle.png); background-repeat:no-repeat; background-position:center bottom;}
.PageTitle h1 { color:#fff; border-left:#fef224 10px solid; margin:10px 0; padding-left:10px;}
.PageTitle .BreadCrumbs { color:#fff;}
.PageTitle .BreadCrumbs a:link { color:#fff;}
.PageTitle .BreadCrumbs a:visited { color:#fff;}
.PageTitle .BreadCrumbs a:hover { color:#fef224; text-decoration:underline;}
.PageTitle .BreadCrumbs a:active { color:#fef224; text-decoration:underline;}

/*2-2.內頁內容設定
------------------------*/
.PageContent .PageNews li a:link { color:#333; text-decoration:none; display:block;}
.PageContent .PageNews li a:visited { color:#000;}
.PageContent .PageNews li a:hover { color:#008cd6;}
.PageContent .PageNews li a:active { color:#008cd6;}
.PageContent .PageNews time { float:left; margin:0 20px; color:#666;}
.PageContent .PageNews li a:hover time { color:#000;}

/*圖片外框*/
.ImgBorder{
	border:#cccccc 1px solid;
	background-color:#ffffff;
	text-align: center;  		/* 相片水平居中 */
	vertical-align: middle;  	/* 相片垂直居中 */
	padding: 6px;
}
.ImgBorder02{border:#cccccc 1px solid;}
.ImgBorder03{
	border:#cccccc 1px solid;
	background-color:#ffffff;
	text-align: center;  		/* 相片水平居中 */
	vertical-align: middle;  	/* 相片垂直居中 */
	padding: 4px;
}

.ShowImgBorder{border:#cccccc 1px solid;}
.ShowImgBorderOn{border:#900 1px solid;}


.PageMenuContent { width:100%; height:auto; overflow:hidden; margin:0 auto; background:#fff;}
.PageMenuContent .Div-W1000 { width:1000px; padding-top:50px;}

.BTN_Back { width:36px; height:36px; background:url(../Images/BTN_Back.png) no-repeat left; display:block; float:right; line-height:36px; text-align:right; font-size:16px; font-weight:normal;}
.BTN_Back:hover { background:url(../Images/BTN_Back_o.png) no-repeat; color:#fff67f; text-decoration:none;}

#page { min-width:0; background:#eee;}
#page *, #page *:before, #page *:after {box-sizing:border-box; padding:0; margin:0; list-style:none;}
#page .content { width:100%; height:auto; overflow:hidden; margin:0 auto; padding:15px;}
#page .ClientList { width:100%; height:auto; overflow:hidden; margin:0 auto;}
#page .ClientList ul { width:100%; height:auto; overflow:hidden; margin:0 auto;}
#page .ClientList li { width:19%; height:auto; overflow:hidden;/* border:1px solid #ccc;*/ float:left; margin:10px 0.5%; /*background:#fff;*/
 color: #666; font-size: 15px; line-height: 26px;word-wrap:break-word;word-break:break-all; }
#page .ClientList li:nth-of-type(5n+1) { clear:both;}
#page .ClientList li a { text-decoration:none; color:#333;}
#page .ClientList li:hover {/* border:1px solid #888; opacity:0.9;-webkit-border-opacity:0.9;-moz-border-opacity:0.9;-khtml-opacity::0.9; */ color:#8e8e8e;}
#page .ClientList li:hover a { color:#f28b1d;}
#page .ClientList li a h1 { width:100%; height:auto; overflow:hidden; padding:15px 0; font-size:17px; color:#333;}
#page .ClientList li:hover a h1 { color:#666;}
#page .ClientList li .ClientListPhoto { width:100%; height:auto; overflow:hidden; text-align:center; border:1px solid #ccc;
/*圓角*/
-webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;
/*陰影*/
-webkit-box-shadow: 2px 2px 2px 0px rgba(50, 50, 50, 0.1);-moz-box-shadow:2px 2px 2px 0px rgba(50, 50, 50, 0.1);
box-shadow:2px 2px 2px 0px rgba(50, 50, 50, 0.1);
}
#page .ClientList li .ClientListPhoto img { max-width:100%; height:auto; display:block; margin:0 auto; }
.PageArticlePhoto { width:100%; height:auto; overflow:hidden; margin:0 auto;}
.PageArticlePhoto img {box-sizing:border-box; display:block; margin:0; margin-bottom:10px; padding:10px;
/*陰影*/
-webkit-box-shadow: 2px 2px 2px 0px rgba(50, 50, 50, 0.1);-moz-box-shadow:2px 2px 2px 0px rgba(50, 50, 50, 0.1);
box-shadow:2px 2px 2px 0px rgba(50, 50, 50, 0.1);}

@media only screen and (min-width:0px) and (max-width:1024px) {
	#page .ClientList li { width:23%; margin:10px 1%;}
	#page .ClientList li:nth-of-type(5n+1) { clear:none; float:left;}
	#page .ClientList li:nth-of-type(4n+1) { clear:both;}
	}
@media only screen and (min-width:0px) and (max-width:768px) {
	#page .ClientList li { width:48%;}
	#page .ClientList li:nth-of-type(5n+1) { clear:none; float:left;}
	#page .ClientList li:nth-of-type(4n+1) { clear:none; float:left;}
	#page .ClientList li:nth-of-type(2n+1) { clear:both;}
	
	}