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

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

/*1-1.內頁內容版頭+麵包屑設定
------------------------*/
.PageTitle { width:100%; height:auto; overflow:hidden; float:left; background:#fff;}
.PageTitle h1 { font-size:22px; height:auto; line-height:30px; float:left; font-weight:bold; text-align:center;}
.PageTitle .BreadCrumbs { display:none;}

/*1-2.內頁分頁選單設定
------------------------*/
.PageMenu { width:100%; height:auto; overflow:hidden; text-align:right; padding-bottom:55px; position:relative;}
.PageMenu ul { height:auto; overflow:hidden;}
.PageMenu li { height:40px; line-height:40px; text-align:center; list-style:none; font-size:18px; padding:0 15px; float:left ; color:#00b0ec; background:#4ad0fe; margin-right:10px;
/*左上及右上圓角*/
-moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px;  border-top-left-radius: 5px;
-moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; border-top-right-radius: 5px;}
.PageMenu li a:link { text-decoration:none; color:#fff;}
.PageMenu li a:visited { color:#fff;}
.PageMenu li a:hover { color:#000;}
.PageMenu li a:active { color:#000;}
.PageMenu li.Active { background:#fff;}
.PageMenu li.Active a:link,
.PageMenu li.Active a:visited,
.PageMenu li.Active a:hover,
.PageMenu li.Active a:active { color:#00b0ec;}
.PageMenu li .SubMenu { height:auto; padding:10px 0; min-height:50px; width:100%; overflow:hidden; position:absolute; top:40px; left:0; z-index:9999; text-align:left; background:#fff; 
/*圓角(左上無)*/
-moz-border-radius-topright: 5px;-webkit-border-top-right-radius: 5px;border-top-right-radius: 5px;
background:#fff;}

.PageMenu li .SubMenu ul { width:100%; height:auto; overflow:hidden;}
.PageMenu li .SubMenu ul li.SubMenuLi { height:35px; line-height:35px; font-size:16px; font-weight:normal; display:inline-block; margin:0 5px; background:#e95377; background:#31cafe; padding:0 15px; border:1px solid #1ebef4; width:auto; overflow:hidden;
/*圓角*/
-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;}
.PageMenu li .SubMenu ul li.SubMenuLi:hover { background:#e73e67; border:1px solid #e73e67;}
.PageMenu li .SubMenu ul li.SubMenuLi:hover a {color:#fff;}
.PageMenu li .SubMenu ul li.SubMenuLi a { height:35px; line-height:35px; color:#fff; display:block; width:auto; float:left; overflow:hidden;}
.PageMenu li .SubMenu ul li.SubMenuLi a:hover { height:35px; line-height:35px; color:#fff;}

.PageMenu li a:link ~ .SubMenu, .PageMenu li a ~ .SubMenu { display:none;}

/*1-2.內頁內容設定
------------------------*/
.PageContent { width:904px; height:auto; overflow:hidden; padding:40px 60px; background:#00b0ec; margin:10px auto; position:relative; }
.PageContentTop { position:absolute; left:0; top:0;}
.PageContentBottom { position:absolute; left:0; bottom:0;}

/*1-3.內頁內容設定
------------------------*/
.PageFAQ{ width:100%; height:auto; overflow:hidden; margin:0 auto;  background:#fff;}
.PageFAQ li { list-style:none; height:auto; min-height:46px; line-height:46px; border-bottom:#999 1px dotted; color:#333; font-size:18px; overflow:hidden;}
.PageFAQ h1 { font-size:18px;}
.PageFAQ .PageAnswer { width:814px; max-width:100%; padding-right:20px; height:auto; background:#fff; overflow:hidden; float:right;}
.PageFAQ .PageAnswer table { table-layout:auto;}
.PageFAQ .PageAnswer td { text-align:left; vertical-align:top;}

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

/*2-1.內頁內容版頭+麵包屑設定
------------------------*/
.PageTitle h1 { color:#333; width:90%; height:auto; border-bottom:1px dotted #333; border-top:1px dotted #333; padding:10px 5%; margin-bottom:20px;}

/*2-2.內頁內容設定
------------------------*/
.PageFAQ li a:link { color:#333; text-decoration:none; display:block; float:left; width:100%; background:#fff;}
.PageFAQ li a:visited { color:#000;}
.PageFAQ li a:hover { color:#008cd6;}
.PageFAQ li a:active { color:#008cd6;}
.PageFAQ strong { float:left; margin:0 20px; color:#666; width:30px;}
.PageFAQ li a:hover strong{ color:#008cd6;}
.PageFAQ .PageAnswer h1{ float:left; margin:0 20px; color:#666; width:30px; font-size:16px; display:block;}
.PageFAQ .PageAnswer article { width:920px; height:auto; float:right; padding:11px 10px 0 0;}
.PageFAQ .PageAnswer article p { line-height:1.5em; margin-bottom:1em;}
.PageFAQ .PageAnswer article h2 { font-size:16px; line-height:1.5em; height:1.5em; color:#000; margin-bottom:1em; color:#333;}
.PageFAQ .PageAnswer strong { float:none; margin:0; width:100%; color:#333; font-weight:bold;}
.PageFAQ h1 { width:30px; float:left; height:46px; line-height:46px; margin:0 20px;}

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

.SliderDiv { width:100%; height:auto; overflow:hidden; background:#fff;}

@media only screen and (min-width:0px) and (max-width:1024px) {
	.PageFAQ .PageAnswer { padding-left:10px;}
	.PageFAQ h1 { margin:0 5px;}
}


@media only screen and (min-width:0px) and (max-width:768px) {
	.PageFAQ li a { display:block; width:100%; padding:5px;}
	.PageFAQ strong { margin:0;}
}