/**
 *  use CSS Classes for Slopoo studio
 *  Copyright (c) 2009-2012 Varmus Lin (http://www.slopoo.com.tw/)
 *  varmus@slopoo.com.tw
 *  Dual licensed under the MIT and GPL licenses:
 *  http://www.opensource.org/licenses/mit-license.php
 *  http://www.gnu.org/licenses/gpl.html
 */

@charset "utf-8";
body {
	font-size:12px;
	color:#000000;/*#605f5f;*/
	vertical-align:middle;
	margin:0 auto;
}
/* 2026-08 全站底色改白色：body 背景原本是 layout/header.php 用 inline style
   套上去的磚紋圖(bg_file)，這裡用 !important 蓋掉，套用到所有模組(含首頁) */
body{ background:#ffffff !important; }

/* 連結定義 */
a{ text-decoration:none; color:#000000;/*#333333;*/}
a:link{}
a:visited{}
a:hover, a:active{}


/* 基本設定 */
h1{
	display:inline;
}
h1.webname{ display:none;}
.weblogo{ display:none;}

h2{
	font-size:18px;
	line-height:33px;
	color:#ffffff;
}

h3{
	color:#383737;
	font-size:18px;
	display:inline;
	vertical-align:middle;
}
h4{
	color:#000000;
	font-size:16px;
}

img{ vertical-align:middle;}
select,input,textarea,radio,checkbox{vertical-align:middle;}
/*	2026-08 前台表單元件統一風格：比照會員登入頁改版（user/login_form.php）的淡灰底、無邊框、
	圓角樣式，原本是灰階漸層+灰色邊框，跟登入頁的新樣式對不起來 */
input[type="email"], input[type="password"], input[type="text"], input[type="url"], input[type="search"],textarea{
	border:1px solid transparent;
	background:#f5f6f8;
	border-radius:8px;
	padding:6px 10px;
	margin-left:3px;
	box-sizing:border-box;
	transition:border-color .15s, background .15s;
}
input[type="email"]:focus, input[type="password"]:focus, input[type="text"]:focus, input[type="url"]:focus, input[type="search"]:focus,textarea:focus{
	border:1px solid #0e3963;		/*	原本是 Google 慣用的藍色 #4D90FE，改成品牌深藍 */
	background:#ffffff;
	outline:none;
	box-shadow:0 1px 2px rgba(14,57,99,0.15);
}
input[type="image"]{border:none;}
input[type="radio"]{background:none; border:none;}
input[type="submit"], input[type="resed"]{
	border:none;
	padding:2px 3px;
	cursor:pointer;
}
input[type="checkbox"]{background:none;	border:none;}

/* 按鈕樣式 */
.btn_style01{
	background:url(../images/default/register_send.png) left top no-repeat;	/*	2026-08 圖檔本身已經從黃色改成品牌深藍 #0e3963 */
	color:#ffffff;		/*	原本是配黃底用的深咖啡色 #79522c，深藍底要換白字才有對比 */
	font-size:16px;
	font-weight:bold;
	padding:0;
	width:94px;
	height:36px;
}
.btn_style02{
	background:url(../images/default/register_reset.png) left top no-repeat;
	color:#ffffff;
	font-size:15px;
	font-weight:bold;
	width:95px;
	height:36px;
	text-align:center;
	border:none;
}


/* 共用區塊 */
.container{
	width:960px;
	margin:0 auto;
	position:relative;
}
/* 2026-08 各模組內容區加寬（只鎖定 #pagebody，避免影響 header 導覽列也用到的 .container）。
   register_new 頁面有載入 Bootstrap，這些帶 id 的 .container 一樣會被 Bootstrap 自己的
   .container 斷點 max-width 蓋掉（例如量出來變 1296px 而不是 1360px），這裡統一補上
   max-width:none，跟 header .container 那邊同樣的修法 */
#pagebody.container{
	width:1200px;
	max-width:none;
}
/* 2026-08 頁尾也同步加寬，避免比上面內容區窄看起來變小 */
#footer.container{
	width:1200px;
	max-width:none;
}
/* 2026-08 報名頁最上方的步驟進度條也同步加寬，避免跟下方內容區寬度不一致 */
#box_step.container{
	width:1200px;
	max-width:none;
}
/* 2026-08 首頁（home/navi.php）主內容區、頂部輪播區、特色圖示列用的是 #page 底下的 .container、
   #box_banner.container、#box_features.container，不是 #pagebody，之前加寬時漏掉，同步補上 */
#page .container,
#box_banner.container,
#box_features.container{
	width:1200px;
	max-width:none;
}
/* 2026-08 navbar 拉寬跟 #pagebody.container(page_content 所在的容器)同寬(1360px)，
   讓上面導覽列跟下面內容區左右對齊 */
/* 2026-08 register_new 頁面有載入 Bootstrap，Bootstrap 自己的 .container 在各斷點會設
   max-width(例如 1320px)，max-width 不管誰的 specificity 高都會直接把 width 蓋掉，
   這裡明確蓋回 max-width:none。另外 box-sizing 也明確設 border-box，這樣不管有沒有
   載入 Bootstrap 的全域 box-sizing:border-box 重置，這個 .container 的 padding 都
   算在 width 裡面、不會讓實際渲染寬度跑掉(常見的 content-box 額外撐開問題) */
header .container{
	width:1200px;
	max-width:none;
	box-sizing:border-box;
}

/* 2026-08 header 改成照 dribbble 那支參考影片的「浮動藥丸狀導覽列」
   （白底灰框全圓角、跟頁面背景之間有留白跟陰影，最右邊一個深色膠囊狀的動作按鈕）。
   原本只在 register_new(線上報名)實驗性模組生效，2026-08 確認過設計沒問題後
   套用到全站，取代下面被取代的舊版橫向選單(float+線條分隔圖，已整段移除)。
   header 本身背景拿掉、留出上下留白，真正的藥丸是 .container 這層 */
header{
	background:none;
	padding:16px 0;
	overflow:hidden;
}
header .container{
	display:flex;
	align-items:center;
	background:#fff;
	border:1px solid #cbd5e1;
	border-radius:999px;
	padding:6px 10px 6px 60px;
	box-shadow:0 4px 12px rgba(0,0,0,0.06);
}
/* 2026-08 navbar 整體拉小：LOGO 圖也跟著縮小(原本101x62)，nav 的固定高度跟著改成配合縮小後的LOGO高度 */
header h3{ margin:0 32px 0 0; flex-shrink:0; line-height:0; }
header h3 img{ height:44px; width:auto; }
/* 2026-08 選項沒垂直置中：img 預設是 inline，會照文字基線對齊，底下會多留幾 px
   的「幻影空隙」(descender 空間)，導致 LOGO 圖片的框比圖片本身高一點，
   這個多出來的高度會讓 .container 的 align-items:center 拿它當基準，
   選單文字看起來就會偏上一點點。改用 flex 讓 LOGO 圖片本身的高度就是 h3 的高度，
   沒有多餘空隙 */
header h3 a{ display:flex; align-items:center; }
/* 2026-08 nav 改用 flex(取代原本 float:right/float:left 那套)，
   好讓「登入/登出」那顆用 margin-left:auto 頂到藥丸最右邊、變成深色按鈕，
   跟參考影片裡右邊那顆按鈕的角色一樣 */
/* 2026-08 選項還是偏上：改用「整條 nav 給固定高度、每一層都 stretch 到 100% 高、
   最後 a 自己用 flex 置中文字」，不要再靠 align-items:center 疊好幾層去猜文字置中位置
   （CJK 字型的 line-height 上下留白本來就不對稱，疊越多層 align-items 越容易看起來偏）。
   高度抓跟 LOGO 圖片一樣的 62px，這樣文字置中的參考基準跟 LOGO 是同一個高度 */
/* 2026-08 選項整組偏左：LOGO(101px)比登出按鈕(含自己的左內距)的固定寬度大，
   兩邊 auto margin 雖然數學上平分剩餘空間，但因為左右兩側「固定物」大小不對稱，
   整組選項的視覺中心還是會偏靠比較小的那個固定物（這裡是靠近LOGO）。
   加一點 padding-left 把整組再往右推一點來補償，不影響 auto margin 的置中機制 */
header nav{ float:none; margin:0; padding-left:150px; background:none; flex:1; min-width:0; position:relative; height:44px; display:flex; align-items:center; }
/* 2026-08 前面用 justify-content:center + padding-right 猜按鈕寬度去補償，
   一直對不準(不是猜太多就是猜太少)。改用數學上精確、不用猜的作法：
   nav_logout 移回正常 flex 流程(不要 position:absolute)，
   對「第一個一般選項」給 margin-left:auto、「登出前最後一個一般選項」給
   margin-right:auto——flexbox 規則是同一行裡所有 auto margin 平分剩餘空間，
   算出來的結果剛好就是這群選項在「LOGO 到登出按鈕之間」這段可用空間裡精確置中，
   不管登出按鈕實際多寬都自動準確，不用手動調數字 */
/* 2026-08 選項跟登出一起偏上：懷疑是前面把 height:100% 一路疊到 li/a 每一層，
   跟登出按鈕自己的 padding:8px 22px 疊加起來，撐出比 62px 更高的內容、把整行內容
   往上推（溢出）。簡化掉：li/a 都不強制 height:100%，只靠 ul.subnav 這一層的
   align-items:center 去對齊每個高矮不一的項目，各自的高度讓內容自然撐開就好 */
/* 2026-08 用 DevTools 量出真正原因：Bootstrap 5 的預設樣式把 ul/ol 加了
   margin-bottom:16px、padding-left:32px（載入順序在 reset.css 之後，把歸零蓋掉了），
   這個看不見的 16px 下邊界讓 align-items:center 置中時把它也算進去，
   選單文字才會一直偏上、置中軸線跟著跑掉。明確蓋掉 Bootstrap 這兩個預設值 */
header nav ul.subnav{ display:flex; align-items:center; height:100%; margin:0; padding:0; }
header nav li{ float:none; background:none; padding:0 10px; display:flex; align-items:center; flex-shrink:0; white-space:nowrap; }
header nav li:first-child{ margin-left:auto; }
header nav li:nth-last-child(2){ margin-right:auto; }
/* 2026-08 這頁有載入 Bootstrap，Bootstrap 5 預設 a 是 text-decoration:underline，
   跟 common.css 的 a{text-decoration:none} 特異度打平，因為 Bootstrap 後載入所以贏了，
   hover 時才會突然冒出底線、畫面跳一下，這裡明確蓋回 none。
   字調大一點(16px->18px)，並且 a 自己也是 flex+height:100%，文字用 align-items:center
   在這個跟 LOGO 同高的框裡置中，不再依賴 line-height 去猜位置 */
header nav li a{
	display:flex;
	align-items:center;
	color:#1e293b;
	font-weight:500;
	font-size:15px;
	line-height:1;
	text-decoration:none;
	/* 2026-08 中文字體常見的字重心偏上(em-box上方留白比下方多)，line-height:1 +
	   flex 置中只能置中「行框」，置中不到「看起來」的字重心，文字視覺上還是會偏上一點，
	   這裡補一點點 padding-top 讓視覺重心往下移一點點來補償 */
	padding-top:2px;
}
header nav li a:hover{ color:#f37021; text-decoration:none; }
/* 2026-08 目前所在的分類加選中效果：橘色文字 + 淺橘底圓角，跟 hover 用同一個橘色系但更明顯 */
header nav li.active a{
	color:#f37021;
	background:#fff1e8;
	border-radius:999px;
	padding:6px 12px;
}
header nav li.nav_logout{ margin:0; padding:0 0 0 16px; }
/* 2026-08 登入/登出按鈕加「掃光」特效：一道斜向亮光從左掃到右，hover 時觸發一次，
   比單純的放大/陰影更有質感。position:relative + overflow:hidden 讓掃光只在按鈕範圍內可見 */
header nav li.nav_logout a{
	position:relative;
	overflow:hidden;
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	background:#1e293b;
	color:#ffffff;
	border-radius:999px;
	padding:8px 18px 5px;
	font-weight:700;
	transition:background 0.15s;
}
header nav li.nav_logout a::before{
	content:'';
	position:absolute;
	top:0;
	left:-75%;
	width:50%;
	height:100%;
	background:linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%);
	transform:skewX(-20deg);
	transition:left 0.55s ease;
}
header nav li.nav_logout a:hover{ background:#0f172a; color:#ffffff; }
header nav li.nav_logout a:hover::before{ left:125%; }

#box_login{
	position:absolute;
	left:140px;
	top:25px;
	z-index:99;
	color:#0e3963;
}
.login_wrapper{
	background:#ffff33;
	padding:15px 25px;
	margin:18px 0 0 0;
	box-shadow:0 0 6px #d7d7d7;
}
.login_box{
	float:left;
	width:300px;
}
.or_line{
	margin:0 10px;
	width:27px;height:180px;
	float:left;
	display:block;
	background:url(../images/default/or_line.png) no-repeat center;
}
.fb_login_box{
	float:left;
	width:180px;
}
.fb_login_box .login_note{ font-size:11px; }
.fb_login_box .title{ color:#023285; margin:0 0 16px 4px; }
.fb_login_box p{ color:#023285; margin:8px 0 0 4px; }
.login_arrow{
	position:absolute;
	top:0px;
	left:44px;
}
#box_login .title{
	font-size:16px;
}
#box_login .title span{ font-size:12px; padding-left:12px; vertical-align:bottom;}
.login_input table td{
	padding:3px 2px;
	font-size:13px;
}
.login_btn{
	padding:10px 0 0 0;
	margin:10px 0 0 0;
	border-top:dotted #9e9f23 1px;
	overflow:hidden;
}
.form_btn{
	display:blcok;
	float:left;
	background:#a0a0a0;
	width:90px;
	height:33px;
	border-radius:5px;
	color:#ffffff;
	font-size:13px;
	text-align:center;
	font-weight:bold;
	overflow:hidden;
	margin-left:15px;
}
.form_btn a{
	color:#ffffff;
	font-size:14px;
	display:block;
	height:33px;
	line-height:33px;
	font-weight:bold;
}
.form_btn input{
	color:#ffffff;
	font-size:13px;
	background:none;
	height:33px;
	font-weight:bold;
}
.form_btn.over{
	margin:0;
	background:#0e3963;		/*	2026-08 主要動作按鈕統一成品牌深藍，原本是灰藍 #0e3963 */
}
.login_btn01{
	background:#0e3963;		/*	2026-08 同上，跟 .form_btn.over 統一 */
	width:90px;
	height:33px;
	border-radius:5px;
	color:#ffffff;
	font-size:13px;
	text-align:center;
	font-weight:bold;
}
.login_btn02{
	background:#a0a0a0;
	width:90px;
	height:33px;
	border-radius:5px;
	color:#ffffff;
	font-size:13px;
	text-align:center;
	margin:0 0 0 12px;
	font-weight:bold;
}

#box_sitemap{
	width:100%;
	position:absolute;
	bottom:0;
	left:0;
	background: rgba(9%,9%,9%,0.85);
}
#box_sitemap ul{ width:160px; float:left; }
#box_sitemap ul li{ }
#box_sitemap li a{ display:block; margin:0px 10px; padding:10px 0; border-bottom:1px dotted #989898; color:#989898;}
#box_sitemap li.site_top a{ color:#fff100; }
.sitemap_box{}
.sitemap_content{
	padding:37px 0px;
}
.box_search{
	display:inline-table;
	width:180px;
	color:#5b6c8e;
	font-size:13px;
	padding-top:-10px;
}
.box_search span{
	background:#ffffff;
	border:#cdcdcd 1px solid;
	padding:4px 0;
}
.box_search span.err{border:#ff0000 2px solid;}
.box_search span input{
	background:none;
	border:none;
	padding:0;
}
.box_search span input[type="image"]{padding:2px 4px 2px 0;}
.box_search span input:focus{
	border:none;
	box-shadow:none;
}

/* 大寫 */
.uppercase, .code { text-transform:uppercase;}
#blood_type, #id_number{
	text-transform: uppercase;
}

/* 編輯器 */
.edtor ol, .edtor ul{
	list-style:decimal;
	padding:0 0 0 2em;
}

/* 表單 */
.required{
	color:#ff0000;
}

/*清除浮動*/
.clear:after{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
}

/* g-style */
.g_style{
	display:inline-block;
	float:right;
}
.g_style a{ color:#000000;/*#AFAEAE;*/; text-decoration:none;}