﻿/* ---reset.css--- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
body {
	line-height: 1;
}
ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* ---reset.css--- */

html { font-family: "微軟正黑體", Arial; font-size:16px; -webkit-text-size-adjust:none;}

body,
html { overflow-x: hidden;}
* { -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */}
	
* a:link, * a:visited { text-decoration:none;}
* a:hover, * a:active { text-decoration:none;}
.clear { clear:both;}
@font-face { font-family: bah; src: url(../fonts/bahnschrift.ttf);}

/* --電腦版型------------------------------------- */
h1 { position:absolute; left:0; top:-1000px;}

/*-- 選單 --*/
h4, #SUBMENU { display:none;}
.mainCon { position:relative; max-width:1250px; margin: 0 auto 0 auto; width:90%;}

/*-- 伸縮選單 -- */
header { position: fixed; top: 0; width: 100%; height: 120px; background: #fff; border-bottom:#a2cad6 1px solid; color:#CCC; font-weight:normal; display: flex; justify-content: space-between; align-items: center; padding: 0 40px; transition: all 0.3s ease; z-index: 1000; flex-wrap: wrap; /* 為了RWD在小螢幕時換行 */}

nav { width:100%; position: fixed; z-index:9999; padding:20px; background:rgba(0,0,0,.3); text-align:right;}
nav ul { list-style: none; color:#bbb; text-align:right; width:100%;}
nav ul li { display:inline-block; width:fit-content; padding: 0 10px;}
nav ul li a { color:#e1e1e1; font-weight:bold; font-size: 18px; transition: all 0.3s ease;}
nav ul li a:hover { color:#fff;}

#btnZone { position:fixed; bottom:5%; right:10px; width:150px; z-index:9999;}
#btnZone a img { width:100%; transition: transform 0.3s ease; display:block;}
#btnZone a:hover img { width:100%; transform: scale(1.1);}

/* -- 首頁 -- */
#home { width:100%; position:relative; padding: 65px 0 0 0; text-align:center; background:url(../images/homeBG-new.gif) no-repeat center 225px; min-height:955px;}
#home img.homelogo { float:left; display:inline-block; margin: 0 0 0 2%;}
#maintitle { float:right; display:inline-block; width:39.44%; max-width: 493px; margin: 0 2% 0 0;}
#home img.main01 { display:block; width:100%;}
#home img.main02 { display:block; width:100%; margin: -5px 0 0 0;}
#home img.main05 { display:block; margin: 0 auto; width:38.64%; max-width:483px;}
#home img.main03 { display:block; margin: -200px 0 130px 0; width:71.6%; max-width:895px;}
img.main04 { display:inline-block; float:right; width:42.72%; max-width:532px;}

/* 1. 定義動畫的變化過程 */
@keyframes blurFadeIn {
0% {
	opacity: 0;                 /* 一開始：完全透明 */
	filter: blur(25px);         /* 一開始：強烈模糊 */
	transform: scale(0.95);     /* 一開始：稍微縮小（增加動態延伸感） */
	}
100% {
	opacity: 1;                 /* 最後：完全顯現 */
	filter: blur(0px);          /* 最後：完全清晰 */
	transform: scale(1);        /* 最後：恢復正常尺寸 */
	}
}

/* 2. 套用動畫到圖片上 */
.blur-in-animation {
	animation: blurFadeIn 2.5s ease-out forwards;
	/* 優化瀏覽器渲染效能 */
	will-change: filter, opacity;
	}

#secondZone { width:100%; background:url(../images/mainBG.jpg) no-repeat center bottom;}
.fonTxt { font-size:16px; line-height:24px; color:#000; text-align:left; width: 54%; margin: 0 1% 85px 0; font-family: 'Noto Sans1 TC', sans-serif; font-weight: 500; float:left; display:inline-block;}
.fonTxt b { font-size:38px; font-family: 'Noto Sans1 TC', sans-serif; font-weight: 800; display:block; margin-bottom:10px;}
img.item { width:auto; display:block; margin: 0 auto 60px auto;}

#agenda { padding: 70px 0 90px 0; text-align:center; width:100%; margin: 0 auto; background:url(../images/agendaBG.jpg) repeat-x center bottom;}
table.M { display: none;}
table.pc { width:90%; margin: 20px auto 30px auto; text-align:left; max-width:1250px; border-bottom:#529cb9 1px solid;}
table.pc th { text-align: left; padding: 23px 15px; font-size:18px; font-weight:bold; color:#fff;}
table.pc tr.linear { background-image: linear-gradient(to right, #719acc, #7ccdec);}
table.pc th.time { width:15%;}
table.pc th.issue { width:35%;}
table.pc th.speaker { width:50%;}
table.pc .radius1 { border-radius: 30px 0 0 30px; padding-left: 30px;}
table.pc .radius2 { border-radius: 0 30px 30px 0;}
table.pc .radius3 { border-radius: 0 0 15px 0;}
table.pc .radius4 { border-radius: 0 0 0 15px;}
table.agenda1 td { font-size:16px; padding: 15px 10px; border-bottom:#bbd5de 1px solid; line-height:24px; vertical-align: middle;}
table.pc td.time { font-size:20px; width:15%; color:#333; padding-left: 30px;}
table.pc tr:last-child td { border:none;}
table.agenda1 td.issue { font-size:28px; color: #2f537c; font-weight: bolder; line-height:36px; width:40%; font-family: 'Noto Sans1 TC', sans-serif; font-weight: 800;}
table.agenda1 td.issue .en { font-size:18px; color:#666; display:block; line-height:20px;}
table.agenda1 tr.rest td.issue .en { display: inline-block; margin-left:10px;}
table.pc td.speaker { font-size:20px; font-weight: bolder; color:#666; line-height:22px;}
table.pc td.speaker b { font-size:24px; color:#427a6b; font-family: 'Noto Sans1 TC', sans-serif; font-weight: 900; display: block; margin: 10px 0 5px 0;}
.smallT { font-size:16px; color:#999; font-weight:normal;}
.nameLine { display:block; padding-left:10px; border-left:#6c988e 1px solid; margin-top:3px;}
.block-1 { display:block; border-left:#679fc5 4px solid; padding-left:10px; color:#679fc5; font-size:20px; font-weight:500; line-height:18px; margin-bottom:8px;}

.date { font-size:40px; line-height:55px; display:block; font-weight: 700;}
.noteTxt { color:#a3a7b3; font-size:18px; line-height:25px; margin: 25px; auto;}

#logo { width: 100%; background:url(../images/logoBG.jpg) no-repeat center top; padding: 70px 0 40px 0; text-align:center;}
#logo b { display:block; font-size:20px; color:#dc98f9; font-weight:bolder; margin-bottom:5px;}
#logo img { display:inline-block; margin: 0 20px 40px 20px;}

footer { background:url(../images/footBG.jpg) no-repeat center bottom; width:100%; padding: 80px 0 90px 0; color:#d8eedd; font-size:22px; font-family: "Microsoft JhengHei", "微軟正黑體", sans-serif; font-weight: bolder; text-align:center;}
.tel { font-size: 74px; font-weight:bolder; display:block; margin-bottom:15px; font-family:bah; color:#fff; letter-spacing:-1px;}
.tel img { display:inline-block; vertical-align:middle; margin: 0 10px 0 0;}
footer b { font-size:36px; display:block; line-height:48px;}
.copy { font-size:15px; color:#999; display:block; margin-top:30px;}

ul.logo { width:90%; max-width:1250px; margin: 95px auto 50px auto;}
ul.logo li { display:inline-block; color:#fff; font-size:14px; margin: 0 2%; width: fit-content; text-align:left;}
ul.logo li img { display:block; margin: 15px 0 0 0; height:60px;}
a.reserve { display:block; width: fit-content; font-size: 24px; padding: 20px 60px; text-align:center; background:#0d152f; color:#fff; margin: 30px auto 70px auto; border-radius:200px; transition: all 0.5s ease;}
a.reserve:hover { transform: scale(1.2); background:#000;}

img.img-PC { display:block;}
img.img-M { display:none;}

/* swiper */
.speaker-swiper {
  overflow: hidden; width:100%; max-width:2000px; margin: 0 auto;
}

/* ⭐ 等高關鍵 */
.speaker-swiper .swiper-wrapper {
  align-items: stretch;
}

/* 卡片 */
.speaker-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  transition: 0.3s;
}

/* hover效果 */
.speaker-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}

/* 圖片 */
.speaker-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* 內容 */
.speaker-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.speaker-content h3 {
  margin: 0 0 8px;
  font-size: 18px;
}

.speaker-content p {
  margin: 0;
  color: #666;
  flex-grow: 1;
}

/* 分頁點 */
.swiper-pagination {
  margin: 40px 0 60px 0;
  position: relative;
}

.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  opacity: 0.4;
}

.swiper-pagination-bullet-active {
  opacity: 1;
  transform: scale(1.2);
}

.swiper-pagination-bullet { width:15px; height:15px; opacity:0.5; color:#fff;}
:root{--swiper-theme-color: #fff;}

.speakerInfo { width:100%; text-align:right; font-size:18px; line-height:24px; position:relative; font-weight:normal;}
.speakerInfo img { display:block; margin: 0 auto -30px auto; max-width:240px; width:100%; opacity: 0.95; filter: alpha(opacity=95); transition: transform 0.5s ease; z-index:-1;position: relative;}
.speakerInfo a { color:#ebf5fb; width:100%; display:block; transform: scale(0.95);}
.speakerInfo a:hover { color:#fff;}
.speakerInfo a:hover img { opacity: 1.0; filter: alpha(opacity=100); transform: scale(1.02); transition: transform 0.5s ease;filter: brightness(90%);}
.speakerInfo b { display:block; font-size:48px; font-weight:800; color:#ebf5fb; margin-bottom:15px; line-height:35px; letter-spacing:-1px; font-family: 'Noto Sans TC', sans-serif;}
.speakerInfo a:hover b { color:#fff;}
.speakerInfo a .moreIssue { display:block; font-size:20px; color:#C30; visibility:hidden; position:absolute; top: 180px; left:0; text-align:center; width:100%;}
.speakerInfo a:hover .moreIssue { visibility:visible; transition: transform 0.5s ease; color:#fff}

#article { width:100%; background: #F2F2F2; padding: 70px 0 30px 0;}
ul.read { width:100%; margin: 0 auto; text-align:center;}
ul.read li { width:45%; max-width:615px; display:inline-block; margin: 0 2% 100px 2%; position:relative; text-align:left;}
ul.read li img { width:100%; display:block; margin-bottom:25px; transform: scale(0.98); transition: transform 0.5s ease; border-radius:25px; position:relative; filter: brightness(55%);}
ul.read li a:hover img { opacity: 1.0; filter: alpha(opacity=100); transform: scale(0.99); transition: transform 0.5s ease; filter: brightness(85%);}
ul.read li a .articleTitle { color:#fff; border-left: #d4e6f4 6px solid; padding: 0 0 0 25px; display:block; margin:-130px 0 0 7%; width: 90%; position:relative; z-index:1; line-height:40px; font-size:30px; letter-spacing:-1px; font-family: 'Noto Sans TC', sans-serif; font-weight:800;}
ul.read li a .readmore { display:block; margin-top:40px; font-size:14px; line-height:24px; position:relative; font-weight:normal; color:#999;}
ul.read li a:hover .readmore { color:#336699;}

#join { padding: 70px 0 90px 0; text-align:center; width:100%; margin: 0 auto;}
iframe { width: 100%; height:900px; margin: 0 auto; display:block;}

/* --窄螢幕版型------------------------------------- */
@media screen and (min-width: 1025px) and (max-width: 1249px) {

#home { background-size:90%; min-height:860px;}
img.main04 { width:50%; max-width:532px;}
.fonTxt { width:48%;}
.fonTxt b { font-size:32px; letter-spacing:-1px;}

ul.read li { width:47%; margin: 0 1% 100px 1%;}
ul.read li a .articleTitle { padding: 0 0 0 20px; margin:-110px 0 0 5%; width: 94%; line-height:32px; font-size:25px; }
ul.read li a .readmore { margin-top:30px;}
}


/* --平板版型------------------------------------- */

@media screen and (min-width: 768px) and (max-width: 1024px) {

#home { background-size:800px auto; min-height:700px; padding-top:40px; background-position: center 180px;}
#home img.main05 { width:48%; margin: 0 0 0 24%;}
img.main04 { width:60%; max-width:532px; display:block; margin: 0 auto 30px auto; float:none;}
.fonTxt { width:100%; font-size:16px; font-weight: 300; line-height:24px; float:none; margin: 0 auto 50px auto; text-align:center;}
.fonTxt b { font-size:28px; letter-spacing:-1px;}
img.item { width:380px; margin-bottom: 25px;}

table.pc { width:95%;}
table.pc th { padding: 23px 15px; font-size:16px;}
table.pc th.time { width:15%;}
table.pc th.issue { width:35%;}
table.pc th.speaker { width:50%;}
table.pc .radius1 { border-radius: 80px 0 0 80px; padding-left: 30px;}
table.pc .radius2 { border-radius: 0 80px 80px 0;}
table.pc .radius3 { border-radius: 0 0 80px 0;}
table.pc .radius4 { border-radius: 0 0 0 80px;}
table.agenda1 td { font-size:15px; line-height:22px;}
table.pc td.time { font-size:16px; width:20%;}
table.agenda1 td.issue { font-size:24px; line-height:32px;}
table.pc td.speaker { font-size:18px; line-height:24px;}
table.pc td.speaker b { font-size:22px; margin: 10px 0 5px 0;}
.smallT { font-size:14px; }

footer { width:100%; font-size:18px; padding-bottom:60px;}
.tel { font-size: 65px;}
.tel img { display:inline-block; vertical-align:middle; margin: 0 10px 0 0;}
footer b { font-size:32px; line-height:40px;}
.copy { font-size:14px; color:#999; display:block; margin-top:30px;}

ul.logo li img { height:40px;}
img.img-M { display:block;}
img.img-PC { display:none;}

ul.read li { width:47%; margin: 0 1% 100px 1%;}
ul.read li a .articleTitle { padding: 0 0 0 20px; margin:-110px 0 0 5%; width: 94%; line-height:32px; font-size:25px; }
ul.read li a .readmore { margin-top:30px;}

}

/* --手機版型------------------------------------- */

@media screen and (max-width: 767px) {

#home { background-size:550px auto; min-height:530px; padding-top:40px; background-position: center 170px;}
#btnZone { width:95px; right:2%; bottom:3%;} 
#maintitle { width:55%;}
#home img.homelogo { width:35%;}
#home img.main05 { width:65%; margin: 45px 0 0 12%;}
#home img.main03 { width:100%; margin-top:-100px;}
img.main04 { width:80%; max-width:532px; display:block; margin: 0 auto 60px auto; float:none;}
.fonTxt { width:100%; font-size:16px; font-weight: 300; line-height:24px; float:none; margin: 0 auto 50px auto; text-align:center;}
.fonTxt b { font-size:24px; letter-spacing:-1px;}
img.item { width:70%; margin-bottom: 25px;}

table.pc { display: none;}
table.M { width:95%; display:block; margin: 0 auto;}
table.M th { padding: 15px 10px; font-size:16px; color:#fff; text-align: left;}
table.M tr.linear { background-image: linear-gradient(to right, #719acc, #7ccdec);}
table.M th.time { width:10%;}
table.M th.issue { width:35%;}
table.M th.speaker { width:50%;}
table.M .radius1 { border-radius: 40px 0 0 40px; padding-left: 20px;}
table.M .radius2 { border-radius: 0 40px 40px 0;}
table.M .radius3 { border-radius: 0 0 40px 0;}
table.M .radius4 { border-radius: 0 0 0 40px;}
table.agenda1 td { font-size:15px; line-height:22px; text-align:left;}
table.M td.time { font-size:15px; width:10%; padding-left:15px;}
table.agenda1 td.issue { font-size:24px; line-height:32px; width:70%; color:#2f537c;}
table.M td .speaker { font-size:15px; line-height:20px; display:block; font-weight:500; color:#333; display:block; margin-top:15px;}
table.M td .speaker b { font-size:24px; margin: 10px 0 5px 0; color:#427a6b; display:block;}
.smallT { font-size:14px;}
.block-1 { font-size:16px;}

footer { width:100%; font-size:16px; padding: 70px 2% 60px 2%; line-height:24px;}
.tel { font-size: 45px;}
.tel img { display:inline-block; vertical-align:middle; margin: 0 10px 0 0; height:45px;}
footer b { font-size:24px; line-height:36px;}
.copy { font-size:12px; color:#999; display:block; margin-top:30px;}

ul.logo li img { height:40px;}
img.img-M { display:block;}
img.img-PC { display:none;}

.speakerInfo b { display:block; font-size:40px;}
.speakerInfo a .moreIssue { display:block; font-size:14px; letter-spacing:-1px;}

ul.read li { width:90%; margin: 0 auto 40px auto; display:block;}
ul.read li img { border-radius: 15px;}
ul.read li a .articleTitle { padding: 0 0 0 20px; margin:-100px 0 0 5%; width: 96%; line-height:30px; font-size:22px; border-left:#d4e6f4 4px solid;}
ul.read li a .readmore { margin-top:20px;}
}

@media all {
	.lightbox { display: none; }
	.fl-page .jumbotron { margin-top: 2em; }
	.fl-page .doc { margin: 2em 0;}
	.fl-page .btn-download { float: right; }
	.fl-page .btn-default { vertical-align: bottom; }
	.fl-page .btn-lg span { font-size: 0.7em; }
	.fl-page .footer { margin-top: 3em; color: #aaa; font-size: 0.9em;}
	.fl-page .footer a { color: #999; text-decoration: none; margin-right: 0.75em;}
	.fl-page .github { margin: 2em 0; }
	.fl-page .github a { vertical-align: top; }
	.fl-page .marketing a { color: #999; }
	/* override default feather style... */
	.fixwidth {	background: rgba(256,256,256, 0.8);}
	.fixwidth .featherlight-content { width: 500px; padding: 25px; color: #fff;	background: #111;}
	.fixwidth .featherlight-close {	color: #fff; background: #333;}
}
#myVideo { position: absolute; top: 0; left: 0; object-fit: cover; min-width: 100%; min-height: 100%; width: 100%; height: 100%;}
@media(max-width: 768px){
	.fl-page h1 span { display: block; }
	.fl-page .btn-download { float: none; margin-bottom: 1em; }
}