/**
 *  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";
/* CSS Document */
body { position:relative; }
/* 2026-09 common.css 的 body{background:#fff !important} 是全站強制白底，
   下面幫 #box_features/#footer/.page_content 留的左右邊距（margin）雖然數值上
   真的有生效（用 devtools 量過沒問題），但那圈 margin 範圍露出來的就是 body 的
   白色，跟卡片本身的白色背景幾乎一樣，肉眼完全看不出「有留邊」。這裡給 #wrapper
   一個淺灰底色，讓留白的邊界能實際被看到，不是只有數字上存在 */
#wrapper {
	position:relative;
	overflow:hidden;
	background:#eef1f5;
}

/* QRcode */
#box_qrcode {
	position:fixed;
	top:195px;
	right:0;
	background:url(../images/default/qrcode_prev.png) no-repeat left top;
	width:109px;
	height:111px;
	z-index:999;
}
#box_qrcode.over{ background:#ff3; }
#box_qrcode .qr_bg img{ margin:5px 4px; }
#box_qrcode img { display:none; }
#box_qrcode.over .qr_bg img { display:block; }

/* 會員專區 */
#box_member {
	display:block;
	position:absolute;
	background:url(../images/default/mamber_bg.png) repeat-x left top;
	width:100%;
	height:31px;
	left:0;
	top:0;
}
#box_login { display : none; }
.box_member_open {
	background:url(../images/default/member_open.png) no-repeat left top;
	width:16px;
	height:8px;
	position:absolute;
	bottom:-30px;
	right:0;
}
.member { }
.member_l {
	float:left;
	width:48%;
}
.member_l a, .member_l a:hover { color:#008aff; }
.member_r {
	float:right;
	width:9%;
	text-align:right;
	color:#000000;
}
.member_r a { color:#000000;/*#AFAEAE;*/ }
.inline_colorbox { display:none; }
.member_help {
	width:740px;
	padding:30px 30px 15px;
	background:#ffffff;		/*	2026-08 原本是刺眼的黃色 #FFFF33，改成白底+陰影，跟現在整站的卡片式彈窗風格一致 */
	border-radius:12px;
	box-shadow:0 10px 40px rgba(0,0,0,0.15);
	overflow:hidden;
}
.member_help h3 {
	display:block;
	margin:0 0 15px;
	color:#0e3963;
	font-size:20px;
}
.member_help ol {
	margin-bottom:10px;
	padding:30px 0 30px;
	border-bottom:1px dotted #999;
}
.member_help li {
	margin-left:20px;
	list-style:decimal outside none;
}
.member_help .form_btn {
	float:right;
	border-radius:0px;
}

/* 區塊上 */
#box_banner { margin-bottom:14px; }

/* 2026-09 首頁滿版嘗試：拿掉 .container 原本的定寬，讓橫幅/特色列/內容區/頁尾都
   撐滿瀏覽器寬度，左右只留一點呼吸空間，不再置中留白。#footer.container 的
   width:1200px 是 common.css 訂的全站共用值，這裡放在只有首頁會載入的 index.css，
   選擇器優先度相同、載入順序在後面，只會蓋掉首頁這一份，其他頁面的頁尾不受影響。
   #page .container 這層本身沒有背景色，白底其實是它的子層 .page_content 畫的，
   在這層加 padding 只會把 .page_content 往內推、留下一圈跟 body 同色的縫，
   .page_content 自己的白色背景反而看起來「沒有滿版」——跟 #footer/#box_features
   的背景直接畫在有 padding 那層(自己就是 .container)不一樣，背景會畫到 padding
   底下所以能貼齊邊界。所以 #page .container 這裡不留 padding，改到下面
   .page_content 本身加，讓它的背景真的頂到邊界，內距只推它「裡面的」三欄內容 */
#box_banner.container {
	width:auto;
	max-width:none;
	padding-left:100px;
	padding-right:100px;
	box-sizing:border-box;
}
/* 2026-09 上面 #box_banner 的背景其實畫在子層 #sliderx，所以 padding 本來就會露出
   一圈背景色當邊界，看起來自然有「留邊」的感覺。但 #box_features/#footer 是自己
   本身就有背景色的元素，加 padding 只會撐開它「自己的」白底，背景一樣會畫到 padding
   底下、貼齊瀏覽器邊界，變成完全滿版沒有留邊。改成 margin 40px（背景本身跟瀏覽器
   邊界之間真正留白的邊，跟 #box_banner 的 40px padding 留出來的視覺寬度對齊一致）
   + padding 20px（裡面內容自己的呼吸空間，不影響外側留邊寬度） */
#box_features.container,
#footer.container {
	width:auto;
	max-width:none;
	margin-left:100px;
	margin-right:100px;
	padding-left:20px;
	padding-right:20px;
	box-sizing:border-box;
}
#page .container {
	width:auto;
	max-width:none;
}

/* Slider */
/* 2026-09 #sliderx/.mask 用一般的 100%，相對 #box_banner.container 扣掉 padding
   後的實際內容寬度計算，這個寬度就是「捲軸以外可用寬度」，跟下面 #box_features/
   .page_content/#footer 用 width:auto+margin 撐出來的寬度基準一致，兩者右邊界
   才會真正對齊。

   .items_bar li 不能沿用同一招——scroll_slider.js 的水平滑動(direction:'x')會在
   set_detail() 裡把 <ul class="items_bar"> 的寬度改成「單張寬度 x 張數」的一個很大的
   固定px值，這步驟一發生，li 的 width:100% 基準就從「可視區域(.mask)」變成「這個
   被撐到很大的 <ul>」，算出來的寬度暴增，圖片雖然還在但整個被推到可視範圍外面看不到。
   一度改用 100vw 換算的 calc() 繞開這問題，但 100vw 是「初始包含區塊」寬度，
   定義上就含捲軸寬度，會比上面 width:100% 算出來的寬度多出一個捲軸寬度(15~17px)，
   導致橫幅右邊界跟下面幾塊對不齊(這正是這次要修的問題)。改成用 CSS 變數
   --slide-w，實際數值由 layout/footer.php 裡的一小段 JS 在頁面載入/resize 時，
   用 jQuery 量 .mask 「真正渲染出來」的寬度（不含捲軸，量測的是實際框而不是
   viewport）寫入，li 直接吃這個變數；vw 版本留著當 JS 還沒跑之前的極短暫 fallback */
#sliderx {							/*slider_detail寬高*/
	margin:0 auto;
	height:390px;
	width:100%;
}
#sliderx .mask {
	width:100%;
	height:390px;		/*slider遮罩寬高*/
}
#sliderx .items_bar li {
	width:var(--slide-w, calc(100vw - 80px));
	height:390px;		/*內容區寬高自定，一般同遮罩區*/
}
/* 2026-09 舊的 6 張橫幅圖檔(960x390)本身帶有內縮留白(約5~8%，兩側對稱)，當時
   改成強制裁掉兩側各 8% 來補償，見本檔案的 git 歷史。
   2026-10 上傳尺寸設定(include/project.php 的 vdaer->v001)已經改成 1920x390，
   新上傳的圖片不會再有舊圖那種留白問題——但這條「固定裁兩側 8%」的規則是全部
   橫幅共用的，套在乾淨無留白的新圖上就變成「平白無故裁掉兩側畫面內容」，不是
   裁多裁少的問題，是這個規則本身已經不適用了。改回單純的 object-fit:cover，
   讓瀏覽器依實際容器寬高比裁切，不再用寫死的百分比——圖片本身已經在上傳時就
   被裁成 1920x390(見 cls_upload.php 的 smartCut)，容器比例越接近這個尺寸，
   object-fit:cover 需要裁掉的部分就越少。
   代價：還沒重新上傳的舊圖，留白邊會重新露出來，需要重新上傳乾淨版本才會徹底解決 */
#sliderx .items_bar li img {
	position:absolute;
	top:0;
	left:50%;
	transform:translateX(-50%);
	width:100%;
	height:100%;
	object-fit:cover;
}
#sliderx .arrow {				/*設定左右按鈕定位及寬高，top 對應上面 390px 高度垂直置中：(390-46)/2*/
	width:28px;
	height:46px;
	top:171px;
	opacity:0.5;
	transition:opacity .2s;
}
#sliderx .arrow:hover {
	opacity:1;
}
#sliderx .arrow.arrow_prev {	/*設定左右按鈕定位及背景*/
	background:url(../images/default/arrow_prev.png) left center no-repeat;
	left:0px;
}
#sliderx .arrow.arrow_next {	/*設定左右按鈕定位及背景*/
	background:url(../images/default/arrow_next.png) right center no-repeat;
	right:0px;
}

/* 2026-08 首頁 Hero 疊字：蓋在輪播圖上的標語＋JOIN NOW 按鈕 */
/* 2026-09 絕對定位元素的 left/width:100% 是相對「最近定位祖先的 padding box」算的，
   不是 content box，所以跟 #box_banner.container 的 40px padding 完全無關——
   hero_overlay 這個疊字漸層原本會直接蓋到 padding 露出來的留邊上，把那圈灰色
   染成一半深藍(漸層本身的顏色)，看起來就像banner整個是滿版貼齊、沒有留邊。改成
   left/right:40px（對應 #box_banner.container 的 padding 值）取代 left:0+width:100%，
   讓疊字漸層的範圍跟 #sliderx 圖片本身對齊，不再蓋到留白的邊界 */
.hero_overlay {
	position:absolute;
	left:100px;
	right:100px;
	bottom:0;
	box-sizing:border-box;
	padding:40px 60px 36px;
	background:linear-gradient(to top, rgba(14,57,99,0.85) 0%, rgba(14,57,99,0.35) 55%, rgba(14,57,99,0) 100%);
	color:#ffffff;
	pointer-events:none;		/*	讓底下輪播圖點擊/拖曳不受阻擋，只有文字跟按鈕本身要能點 */
}
.hero_overlay > * { pointer-events:auto; }
.hero_tagline {
	margin:0 0 4px;
	font-size:22px;
	font-weight:bold;
	letter-spacing:2px;
}
.hero_headline {
	margin:0 0 18px;
	font-size:56px;
	font-weight:900;
	font-style:italic;
	letter-spacing:1px;
	line-height:1;
}
.hero_cta {
	display:inline-block;
	background:#ff3600;		/*	跟報名頁金額強調色一致 (css/register.css) */
	color:#ffffff;
	font-size:16px;
	font-weight:bold;
	letter-spacing:2px;
	padding:12px 32px;
	border-radius:30px;
	text-decoration:none;
	box-shadow:0 4px 10px rgba(0,0,0,0.25);
}
.hero_cta:hover { background:#d92c00; }

/* 2026-08 首頁特色圖示列 */
#box_features {
	margin-bottom:28px;
	background:#ffffff;		/*	原本沒設底色，直接透出 body 的紋理背景，桌面上還好，
								但 body 底圖改深之後，下面 .features_desc 的淺灰字幾乎看不見 (2026-08) */
}
.features_list {
	display:flex;
	justify-content:space-between;
	list-style:none;
	margin:0;
	padding:24px 0;
	border-top:1px solid #e5e5e5;
	border-bottom:1px solid #e5e5e5;
}
.features_list li {
	flex:1;
	display:flex;
	flex-direction:column;
	align-items:center;
	text-align:center;
	padding:0 16px;
	border-left:1px solid #e5e5e5;
}
.features_list li:first-child { border-left:none; }
.features_list li a {		/*	2026-10 六格圖示加上超連結，<a> 要撐滿整個 <li> 並沿用原本
							置中直排的版面，顏色/底線都繼承、不要吃到瀏覽器預設的連結藍 */
	display:flex;
	flex-direction:column;
	align-items:center;
	width:100%;
	color:inherit;
	text-decoration:none;
}
.features_list li a:hover .features_title { text-decoration:underline; }
.features_icon {
	display:block;
	width:48px;
	height:48px;
	color:#0e3963;
	margin-bottom:10px;
}
.features_icon svg { width:100%; height:100%; }
.features_icon img { width:100%; height:100%; object-fit:contain; }	/*	2026-10 賽事活動/專業課程用使用者提供的點陣圖示（JPEG 去背轉 PNG），
																		跟其餘 currentColor 的 inline SVG 不同不能繼承顏色，
																		但尺寸行為要跟 svg 保持一致，加這條才會等比縮放不變形	*/
.features_title {
	font-size:16px;
	font-weight:bold;
	color:#0e3963;
	margin-bottom:6px;
}
.features_desc {
	font-size:13px;
	color:#666666;
}

/* partners_slider */

.partners_slider {							/*slider_detail寬高*/
	margin:0;
	height:54px;
	width:100%;
}
.partners_slider .mask {
	margin:0 auto;
	width:840px;
	height:54px;		/*slider遮罩寬高*/
}
.partners_slider .items_bar li {
	width:140px;
	height:54px;			/*內容區寬高自定，一般同遮罩區*/
	float:left;
}
.partners_slider .items_bar li a{ margin-top:10px;}
.partners_slider .arrow {				/*設定左右按鈕定位及寬高*/
	width:20px;
	height:54px;
	top:0px;
}
.partners_slider .arrow.arrow_prev {	/*設定左右按鈕定位及背景*/
	background:url(../images/default/arrow2_prev.png) left center no-repeat;
	left:0px;
}
.partners_slider .arrow.arrow_next {	/*設定左右按鈕定位及背景*/
	background:url(../images/default/arrow2_next.png) right center no-repeat;
	right:0px;
}

/* 主要資訊區 */

/* 2026-09 拿掉底圖(bg_02.jpg)，改跟其他滿版區塊一樣讓 #wrapper 的淺灰底色
   (#eef1f5) 直接透出來當左右留邊，不要有自己的底圖花紋 */
#page {
	overflow:hidden;
}
.page_content {
	background: #dfdfdf;
	background: -moz-linear-gradient(top, #dfdfdf 0%, #ffffff 15%, #ffffff 100%, #ffffff 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #dfdfdf), color-stop(15%, #ffffff), color-stop(100%, #ffffff), color-stop(100%, #ffffff));
	background: -webkit-linear-gradient(top, #dfdfdf 0%, #ffffff 15%, #ffffff 100%, #ffffff 100%);
	background: -o-linear-gradient(top, #dfdfdf 0%, #ffffff 15%, #ffffff 100%, #ffffff 100%);
	background: -ms-linear-gradient(top, #dfdfdf 0%, #ffffff 15%, #ffffff 100%, #ffffff 100%);
	background: linear-gradient(to bottom, #dfdfdf 0%, #ffffff 15%, #ffffff 100%, #ffffff 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dfdfdf', endColorstr='#ffffff', GradientType=0 );
	margin-left:100px;
	margin-right:100px;
	padding:17px 20px;
	box-sizing:border-box;
	overflow:hidden;
	/*	2026-09 跟下面 footer 的頂部緊貼在一起(用 devtools 量過中間完全零間距)，
		合起來看是同一塊卡片，只有整塊的四個外角要圓角，中間接縫維持直角，
		所以這裡只圓上面兩角，下面兩角留給 footer 圓 */
	border-radius:16px 16px 0 0;
}
/* 2026-09 最新訊息/活動公告/課程公告三個區塊原本用各自寫死的 width(210/365/245px)
   分配寬度，三塊看起來一塊比一塊窄或寬，改成 flex 版面讓三塊平分寬度。
   中間的虛線分隔線原本是背景圖 index_page_bg.png 裡兩條算好固定 x 座標的淡線，
   校準的是舊版三塊固定寬度的間隔位置，改成平分寬度後間隔位置整個位移，虛線就對不上
   縫隙了——背景圖不會跟著版面重新計算位置。改成直接在前兩塊右邊界畫 border-right，
   虛線位置永遠跟著實際欄位邊界走，不管欄寬怎麼變都不會再對不齊 */
.page_content_bg {
	overflow:hidden;
	display:flex;
}

/* 最新消息 */
#box_news {
	position:relative;
	flex:1 1 0;
	min-width:0;
	padding-right:25px;
	margin-right:25px;
	border-right:1px dashed #999;
}
.news_title { margin-bottom:5px; }
#box_news .tab_header {
	position:absolute;
	right:0;
	top:8px;
}
#box_news .tab_header li {
	float:left;
	background:url(../images/default/icon_03.png) no-repeat left top;
	width:10px;
	height:9px;
	margin-right:3px;
	text-indent: 110%;
	white-space: nowrap;
	overflow: hidden;
}
#box_news .tab_header li:hover, #box_news .tab_header li.on { background:url(../images/default/icon_04.png) no-repeat left top; }
.tab_detail {
	width: 100%;
	margin:0;
	padding:0;
	visibility:hidden;
}
.tab_body {
	width: 100%;
	margin:0;
	padding:0;
	position:relative;
	overflow:hidden;
}
.tab_body .tab_item {
	position:absolute;
	visibility:hidden;
	line-height:1.4;
}
.tab_body .tab_item a { line-height:1.4; }
.tab_item.on {
	position:relative;
	visibility:visible;
}
.news_time {
	display:block;
	color:#ff3600;
	font-weight:bold;
}

/* 活動公告 */
#box_activities {
	flex:1 1 0;
	min-width:0;
	padding-right:25px;
	margin-right:25px;
	border-right:1px dashed #999;
}
.activities_left {
	float:left;
	width:100px;
	height:97px;
	margin-right:10px;
	border:#a7a8a7 1px solid;
	padding:1px;
}
.activities_left img { width:100%; height:100%; object-fit:cover; }
.activities_right {
	overflow:hidden;
}
.activities_title { margin-bottom:5px; }
.activities_content { }
.activities_content li, .activities_content li a { line-height:1.4; }
.activities_content li a:hover {
	color:#019391;
	font-weight:bold;
	padding:0 0 0 1em;
}

/* 聯絡我們 */
#box_course {
	flex:1 1 0;
	min-width:0;
}
.course_title { margin-bottom:5px; }
.course_content { font-size:12px; }
.course_content li, .course_content li a { line-height:1.4; }
.course_content li a:hover {
	color:#019391;
	font-weight:bold;
	padding:0 0 0 1em;
}
/* Footer */
/* 2026-09 拿掉底圖(bg_02.jpg)，改跟其他滿版區塊一樣讓 #wrapper 的淺灰底色
   (#eef1f5) 直接透出來當左右留邊，不要有自己的底圖花紋 */
footer {
	position:relative;
	overflow:hidden;
}
#footer {
	background:#ffffff;
	padding:25px 0 15px 0;
	/*	2026-09 上面接 .page_content，中間接縫直角、只圓下面兩角，見 .page_content 的說明 */
	border-radius:0 0 16px 16px;
	overflow:hidden;
}
footer nav {
	position:relative;
	border-top:#cecfce 1px solid;
	border-bottom:#cecfce 1px solid;
	padding:10px 0;
	margin:0 19px 18px 19px;
	color:#5b6c8e;
	font-size:13px;
	font-weight:bold;
}
ul.footer_menu {
	display:inline-table;
	overflow:hidden;
}
ul.footer_menu li {
	float:left;
	padding:0 11px;
	border-right:#9e9f9d 1px dotted;
}
ul.footer_menu li a { color:#5b6c8e; }
ul.footer_menu li a:hover { color:#ff3600; }
ul.footer_link { display:inline-table; }
ul.footer_link li {
	float:left;
	padding:0 4px;
}
footer .text {
	float:left;
	width:50%;
	color:#000000;/*#444343;*/
	font-size:11px;
	margin-left:19px;
}
footer .copyright {
	float:right;
	width:45%;
	color:#000000;/*#444343;*/
	font-size:11px;
	text-align:right;
	margin-right:19px;
}
footer .copyright a, footer .copyright a:hover { color:#000000;/*#444343;*/ }

/* 網站搜尋 */
.box_search {
	position: absolute;
	top:10px;
	right:0px;
}
#keyword { width: 90px; }
.box_search span.err { border:1px solid red; }

/*box_sitemap*/
#box_sitemap { visibility:hidden; }

/* 合作夥伴 */
#box_partners {
	background:#cecfce;
	padding:5px 19px;
}
.partners_arrow {
	position:absolute;
	left:230px;
	top:26px;
}
.fb_like .fb-like span { overflow:hidden; }