/* ---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;
}
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;}

* { -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: GOTHIC; src: url(../fonts/GOTHIC.TTF);}

/* --電腦版型------------------------------------- */
body { background: url(../images/mainBG.jpg) no-repeat center top;}
#bottomBG { background:url(../images/bottomBG.gif) no-repeat right bottom; width:100%;}
h4 { display:none;}
h4:hover { display:block; width:69px; height:69px; background: url(../images/icon_Menu.png) no-repeat #43727a center center;}
#SUBMENU { display:none;}

nav { text-align: right; z-index:9999; margin: 50px 0 10px 0;}
nav a { display:inline-block; color: #fff772; font-size:18px; font-weight:bold; margin: 0　20px; padding: 0 20px;}
nav a b { display:block; font-size:18px; margin-top:5px;}
nav a:hover,
nav a.join:hover,
nav a.join:hover b { color:#fff;}
nav a.join, nav a.join b { color:#49b9d4;}

#mainView { width:100%; max-width:1300px; margin: 0 auto;}
img.top01 { margin: 0px 0 0 5px; float:left; display: inline-block; width:450px;}
#titleZone { float: right; margin: 230px 2% 0 0; text-align:right;}
#titleZone img {}
img.title01 { display:block; margin-bottom:10px; float:right; clear:right;}
img.title02 { display:block; margin-bottom:10px; float:right; clear:right; width:477px;}
img.title03 { display:block; margin: 0 0 10px 75px; float:right; clear:right;}
img.title04 { display:block; margin: 0 0 0 135px; float:right; clear:right;}

img.title03-M, img.title04-M { display:none;}

.mainCon { position:relative; max-width:1250px; margin: 0 auto; width:90%;}

#time { width:100%; background:url(../images/timeBG.png) no-repeat center top; height:225px; text-align:center; padding:38px 0 0 0;}


#fp:first-letter { font-size : 500%;/*表示首字要放大的比率大小*/
font-weight : bold;/*首字粗體*/
float : left;
padding-right: 3px;
/*首字與右邊的距離*/
line-height: 100%;/*表示首字放大的行高*/
}

.demo{line-height: 180%;/*表示段落其他小字要放大的行高*/
text-align:justify; width:100%; max-width:1300px; margin: 110px auto 40px auto; padding: 0 5% 0 22%; }

.fonTxt {font-size:20px; line-height:32px;}

a.signup { display:block; position:fixed; right:10px; bottom:20px; z-index:9999;}
a.signup img { display:inline-block; vertical-align: central; margin-left:10px; width:200px;}

.title { width:100%; background:url(../images/itemBG.png) no-repeat center top; height:74px; display:block; margin: 75px auto 50px auto;}
.title img { display:block; width:auto; margin: 0 auto;}

/* -- 講員區 -- */
#speaker { font-size:18px; line-height:30px; width:90%; padding: 0; margin: 0 auto 100px auto;}
#speaker ul.mm { padding:0; clear:both; margin:80px auto 60px auto; width:100%; text-align:center; max-width:1300px;}
#speaker ul.mm li { width:19%; margin: 0 1px 90px 1px; display:inline-block; position:relative; text-align: left; vertical-align:top; padding-bottom:25px; font-size:15px; line-height:25px;}
#speaker ul.mm li img { width:100%; display:block; max-width:370px; margin-bottom:25px;}
#speaker ul.mm li a .more { display:block; z-index:9999; position:absolute; bottom:-45px; left:0px; background:#0ca3a3; border:#0ca3a3 1px solid; color:#fff; text-align:center; padding: 6px 15px; font-size:16px;}
#speaker ul.mm li a:hover .more { color:#0ca3a3; background:#fff; border:#0ca3a3 1px solid;}

#speaker ul.mm li .name { font-size:16px; color:#5b5b5b; display:block; line-height:24px;}
#speaker ul.mm li .name b { font-size:36px; font-weight:bold; display:block; color:#0ca3a3; margin-bottom:20px;}
#speaker ul.mm li a:hover .name b { color:#058a8a;}

/* -- 活動議程 -- */

#agenda { font-size:18px; line-height:30px; margin:20px auto; width:90%;}
.warning { display:block; margin: 15px auto; text-align:center; display:block; color:#d7c5a3;}
#agenda>b { color:#cbb49b; display:block; margin: 30px auto 5px auto; font-size:15px;}
#agenda table.M { display:none;}
#agenda table.pc { width:100%; margin: 20px auto 50px auto; text-align:left; max-width:1250px;}
#agenda table.pc th { text-align: left; padding: 20px 15px; letter-spacing:1px; color:#666; background:rgba(0,0,0,.05); font-size:18px; border-bottom:#ccc 1px solid; font-weight:bold; border-top:#666 2px solid;}
#agenda table.pc tr { background:rgba(255,255,255,.6);}
#agenda table.pc tr.rest { background:rgba(0,0,0,.1); color:#030303;}
#agenda table.pc td { font-size:18px; padding:20px 10px; border-bottom:#dadada 1px solid; line-height:27px; vertical-align: middle;}
#agenda table.pc td.time { font-size:15px; width:12%;}
#agenda table.pc td.issue { font-weight:normal;}
#agenda table.pc td.issue b { font-size:24px; color:#333; font-weight:bold; line-height:32px; display:block;}
#agenda table.pc td.people { font-size:15px; font-weight: normal; width:40%;}
#agenda table.pc td.people b { font-size:22px; color:#333; font-weight:bold; display: inline-block; margin-right:10px;}

#note { width:100%; color:#666; font-size:18px; line-height:32px; padding: 0 30px 50px 30px; text-align:center;}
#note b { font-size:24px; font-weight:bold; display:block; margin-bottom:20px; color:#000;}

/* -- Footer -- */
footer { width:100%; color:#ccc; text-align:center; font-size:18px; padding:30px 0 50px 0; position:relative; vertical-align:central; border-top: #2196b9 1px dotted;}
footer img { display: block; margin: 0 35px 0 15px; vertical-align:middle;}
footer b { color: #999; font-size:12px; display:block; margin: 30px 0 15px 0;}
ul.logo { width:100%;}
ul.logo li { display:inline-block; font-size:15px; color:#666; margin: 0 20px;}
ul.logo li img { display:block; height:50px; margin: 15px 0;}


/* --窄螢幕版型------------------------------------- */
@media screen and (min-width: 1025px) and (max-width: 1249px) {
body { background: url(../images/mainBG.jpg) no-repeat center -130px;}
img.top01 { margin: 30px 2% 0 3%; float:left; display: inline-block; width:30%;}
#titleZone { float: right; margin: 100px 0 0 80px; width:50%; padding-right:3%;}

/* -- 講員區 -- */
#speaker { font-size:18px; line-height:30px; width:90%; padding: 0; margin: 0 auto 100px auto;}
#speaker ul.mm { padding:0; clear:both; margin:80px auto 60px auto; width:100%; text-align:center; max-width:1300px;}
#speaker ul.mm li { width:30%; margin: 0 1px 90px 1px; display:inline-block; position:relative; text-align: left; vertical-align:top; padding-bottom:25px; font-size:15px; line-height:25px;}
#speaker ul.mm li img { width:100%; display:block; max-width:280px; margin-bottom:25px;}
#speaker ul.mm li a .more { display:block; z-index:9999; position:absolute; bottom:-45px; left:0px; background:#0ca3a3; border:#0ca3a3 1px solid; color:#fff; text-align:center; padding: 6px 15px; font-size:16px;}
#speaker ul.mm li a:hover .more { color:#0ca3a3; background:#fff; border:#0ca3a3 1px solid;}

#speaker ul.mm li .name { font-size:16px; color:#5b5b5b; display:block; line-height:24px;}
#speaker ul.mm li .name b { font-size:36px; font-weight:bold; display:block; color:#0ca3a3; margin-bottom:20px;}
#speaker ul.mm li a:hover .name b { color:#058a8a;}

#agenda { font-size:18px; line-height:30px; margin:20px auto 90px auto; width:90%;}
a.signup img { display:inline-block; vertical-align: central; margin-left:10px; width:160px;}
}

/* --平板版型------------------------------------- */

@media screen and (min-width: 768px) and (max-width: 1024px) {

body { background: url(../images/mainBG.jpg) no-repeat center -10px;}
#bottomBG { background:url(../images/bottomBG.gif) no-repeat right bottom; width:100%; background-size: 80% auto;}
img.top01 { margin: 0 2% 0 6%; float:left; display: inline-block; width:400px;}
img.title01 { display:block; margin-bottom:10px; float:right; clear:right;}
img.title02 { display:block; margin-bottom:50px; float:right; clear:right; width:477px;}
img.title03-M { display:block; margin: 0 0 10px 75px; float:right; clear:right;}
img.title04-M { display:block; margin: 0 0 0 135px; float:right; clear:right;}

img.title03, img.title04 { display:none;}

#titleZone { float: right; margin: 0 0 0 80px; width:50%; padding-right:3%;}

.demo{line-height: 180%;/*表示段落其他小字要放大的行高*/
text-align:justify; width:100%; max-width:1300px; margin: 60px auto 40px auto; padding: 0 5%; }

#agenda { font-size:18px; line-height:30px; margin:20px auto 90px auto; width:90%;}
a.signup img { display:inline-block; vertical-align: central; margin-left:10px; width:120px;}
#agenda table.pc td.time { color: #333}
#agenda table.pc td.people { color:#333;}
#about { width:40%; display:inline-block; font-size:16px; color:#fff; line-height:30px; padding: 0 0 15px 5%; border-left:#4a727d 1px solid; letter-spacing:1px; text-align:left; vertical-align:top;}
#about b { border-left:#6a624a 1px solid; padding-left:50px; display:inline-block;}

ul.special { width:90%; max-width:1250px; margin: 30px auto 130px auto; display: block; align-items: stretch; text-align:center;}
ul.special li { width:30%; margin: 0 1% 30px 1%; background:#939; text-align:center; font-size:16px; line-height:24px; padding: 20px 10px; display:inline-block; vertical-align: top; flex: 0 0 30%; border-radius:300px;}

/* -- 講員區 -- */
#speaker ul.mm li { width:46%; margin: 0 1% 100px 1%;}
#speaker ul.mm li a .photo { width:100%; display:block; position:relative; min-height: 350px; background-position: center top:}

}

/* --手機版型------------------------------------- */

@media screen and (max-width: 767px) {
body { background: url(../images/mainBG.jpg) no-repeat -700px -10px; background-size:1900px;}
#bottomBG { background:url(../images/bottomBG.gif) no-repeat right bottom; width:100%; background-size: 100% auto;}

nav { text-align: center; z-index:9999; margin: 40px 0 40px 0;}
nav a { display:inline-block; color:#000; font-size:15px; font-weight:bold; margin: 0 5px; padding: 0;}
nav a b { display:block; font-size:16px; margin-top:5px;}

#mainView { width:100%; max-width:1300px; margin: 0 auto;}
img.top01 { margin: 0px auto 0 auto; float:none; display: block; width:60%; max-width:390px;}
#titleZone { float:none; margin: 20px auto 0 auto; width:100%; text-align:center;}
img.title01 { display:block; margin: 0 auto 10px auto; width:90%; float:none;}
img.title02 { display:block; margin: 0 auto 50px auto; width:90%; float:none;}
img.title03-M { display:block; margin: 0 auto 10px auto; width:90%}
img.title04-M { display:block; margin: 0 auto 10px auto; width:90%}

img.title03, img.title04 { display:none;}

a.signup img { display:inline-block; vertical-align: central; margin-left:10px; width:100px; right:5px; bottom:5px;}

#fp:first-letter { font-size : 300%;/*表示首字要放大的比率大小*/
font-weight : bold;/*首字粗體*/
float : left;
padding-right: 3px;
/*首字與右邊的距離*/
line-height: 100%;/*表示首字放大的行高*/
}

.fonTxt {font-size:20px; line-height:32px;}

#time { width:100%; background:url(../images/timeBG.png) no-repeat center top; height:225px; text-align:center; padding:38px 0 0 0;}
#time img { width:95%; margin: 25px auto 0 auto;}

.title { width:100%; background:url(../images/itemBG.png) no-repeat center top; background-size: auto 60px; height:60px; display:block; margin: 45px auto 30px auto;}
.title img { display:block; width:auto; height:60px; margin: 0 auto;}

ul.special { width:90%; max-width:1250px; margin: 30px auto 130px auto; display: block; align-items: stretch; text-align:center;}
ul.special li { width:100%; margin: 0 0 30px 0; background:#939; text-align:center; font-size:16px; line-height:24px; padding: 20px 10px; display:inline-block; vertical-align: top; flex: 0 0 30%; border-radius:300px;}

#speaker { width:100%;}
#speaker ul.mm li { width:44%; margin: 0 1.5% 100px 1.5%; display:inline-block; position:relative; text-align: left; vertical-align:top; line-height:26px; padding-bottom:25px; font-size:13px; }
#speaker ul.mm li .name { font-size:15px; line-height:20px;}
#speaker ul.mm li .name b { font-size:24px; font-weight:bold; display:block; color:#2196b9; margin-bottom:20px;}

#agenda { font-size:15px; width:100%;}
#agenda table.pc { display:none;}
#agenda table.M { display:block; width:92%; margin: 60px auto 50px auto; text-align:left;}
#agenda table.M th { text-align: left; padding: 8px 10px; letter-spacing:0; color:#666; background:rgba(0,0,0,.05); font-size:18px; border-bottom:#ccc 1px solid; font-weight:bold; border-top:#666 2px solid;}

#agenda table.M td { font-size:16px; padding:10px; border-bottom:#dadada 1px solid; line-height:24px; letter-spacing:0; vertical-align: middle;}
#agenda table.M td.time { font-size:13px; width:12%; line-height:18px; text-align:center;}
#agenda table.M td.issue { font-weight:normal; font-size:14px;}
#agenda table.M td.issue b { font-size:22px; color:#333; font-weight:bold; line-height:30px; display:block; margin-bottom:5px;}
#agenda table.M td .people { display:block; margin-top:15px; padding-top:10px; border-top:#999 1px dotted; font-size:14px; font-weight: normal;}
#agenda table.M td .people b { font-size:20px; color:#333; font-weight:bold; display: inline-block; margin-right:10px;}

#note { width:100%; color:#666; font-size:18px; line-height:32px; padding: 0 30px 50px 30px; text-align:center;}
#note b { font-size:24px; font-weight:bold; display:block; margin-bottom:20px; color:#000;}
/* -- 講員區 -- */

img.title { display:block; width:auto; margin: 0 auto; height:70px;}
#note { width:100%; font-size:16px; line-height:30px; padding: 30px 30px 50px 30px; text-align: left;}
.demo{line-height: 180%;/*表示段落其他小字要放大的行高*/
text-align:justify; width:100%; max-width:1300px; margin: 40px auto 30px auto; padding: 0 8%; }
}

@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; }
}