/* ---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: "微軟正黑體", GOTHIC; 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/GOTHICB.TTF);}
/* --電腦版型------------------------------------- */
body { background: url(../images/mainBG.jpg) no-repeat center top fixed;}
.mainCon { width:90%; margin:0 auto; position:relative; font-size:14px; line-height:22px; max-width:1250px;}
a.signup { position: fixed; right:10px; bottom:10px; display:block; z-index:99999; background:none; border:none;}
a.signup img { opacity:.95; filter:alpha(opacity=95);}
a.signup:hover img { opacity:1; filter:alpha(opacity=100);}
h4 { width:60px; height:45px; background: url(../images/menuM.png) no-repeat center center; background-size:60px 45px; position: fixed; top:45%; right:0; display:block; z-index:99999;}
h4:hover { display:block; width:60px; height:45px; background: url(../images/menuM.png) no-repeat center center; background-size:60px 45px; cursor: pointer;}
#SUBMENU { width:100%; height:100%; padding:0; margin:0; position: fixed; top:0; left:0; display:none; z-index:99998; background: url(../images/slogo.png) no-repeat center bottom rgba(0,173,169,.9); border-top:#efc467 2px solid;}
#SUBMENU ul { padding: 0; margin: 20% auto 0 auto; width:90%; text-align:center;}
#SUBMENU ul li { width:150px; height:150px; margin: 0 10px; display:inline-block;}
#SUBMENU ul li a { width:150px; height:150px; display:inline-block; border-radius:200px; background:#f9596c; color:#fff; padding-top:55px; font-size:11px;}
#SUBMENU ul li a.ye { background:#f9c059;}
#SUBMENU ul li a.gr { background:#008e8b;}
#SUBMENU ul li a.or { background:#ec741f;}
#SUBMENU ul li a:hover { background:#fff; color:#00ada9;}
#SUBMENU ul li b { font-size:24px; display:block; margin: 0 0 5px 0; font-weight:bold;}
#SUBMENU ul li a:hover b { color:#00ada9;}
/* -- develop chester -- */
.menu_tag { color: #fff; background:url(../images/navBG.png) no-repeat right top;}
.menu_tag b { color:#fff;}
.menu_tag:hover { display:block; color: #fff;}
.menu_tag:hover a,
.menu_tag:hover a b { color:#fff;}
/* -- 首頁標題logo -- */
#home { width:100%; position:relative; margin: 0 auto; min-height:940px; background:url(../images/intropic.png) no-repeat center bottom;}
#home img.toplogo { display:block; position:absolute; right:30px; top:40px;}
#home img.title1 { margin: 235px 0 0 22%; width:30.88%; height:auto;}
#home img.title2 { margin: 5px 0 0 22%; width:50.16%; height:auto; display:inline-block;}
#home img.title3 { margin: 5px 5px 0 5px; display:inline-block;}
#home img.title4 { margin: 5px 0 0 0; width:8.88%; display:inline-block;}
#home img.title5 { margin: 0 0 0 -5px; width:35.12%; height:auto; display:inline-block;}
#home img.title6 { margin: 310px 0 0 30%; width:30.32%; display:inline-block;}
#home img.title7 { margin: 5px 0 0 22%; width:50.16%; height:auto; display:block;}
#hTxt { font-size:16px; line-height:30px; color: #f2e0a9; margin: 180px 0 0 0; text-align:center; font-weight:normal;}
#hTxt b { font-size:24px; color:#fff; display:block; font-weight:bold; line-height:36px; margin:35px auto; background:url(../images/fontxtL.png) no-repeat left center; width:65%; min-width:650px;}
#hTxt .bg { background:url(../images/fontxtR.png) no-repeat right center; display:block;}
/* -- 活動引言 -- */
#about { background: url(../images/introBG.gif) no-repeat center top #d8d8d8; width:100%; }
#abouText { float:right; color: #333; font-size:18px; line-height:32px; text-align:justify; width:70%; padding: 80px 0 65px 0;}
/* -- 講員區 -- */
#speaker { width:100%; position:relative;/* z-index:-1;*/ background: #00ada9; z-index:99997;}
#mainSpeaker { float:left; margin: -230px 0 0 0;}
#mainSpeaker img { display:block; margin-bottom:20px;}
#aboutMain { float:right; color:#fff; font-size:18px; line-height:32px; text-align:justify; width:70%;}
img.speaker { margin:-3px 0 50px 0; display:block;}
#speaker ul { padding:0; margin-top:20px;}
#speaker ul li { width:32%; margin: 0 1% -155px 0; display:inline-block; position:relative; line-height:24px; text-align:left; vertical-align:top;}
#speaker ul li:hover { }
#speaker ul li a { color:#e8d8fa;}
#speaker ul li img { opacity:.95; filter:alpha(opacity=95); float:left; margin: 0 20px 30px 0;}
#speaker ul li:hover img { opacity:1; filter:alpha(opacity=100);}
.Pic { position:relative; display:block;}
#speaker ul li a img.more { display:block; position:absolute; left:240px; bottom:-20px; opacity:.9; filter:alpha(opacity=90);}
#speaker ul li a:hover img.more { opacity:1; filter:alpha(opacity=100);}
.speakerName { font-size:18px; color:#98d4d2;}
.speakerName b { display:block; font-size:56px; font-weight:bold; color:#fff; margin: 0 0 15px 0; font-family: GOTHIC; line-height:55px;}
.speakerTitle { color: #FFC; font-size:18px; font-weight:bold;}
.titleT18 { font-size:18px; color:#fff; font-weight:bold; display:block; padding-top:55px;}
.titleT18 b { font-size:16px; display:block; margin: 20px 0 10px 0; color:#00ada9; font-weight:normal;}
.nameT36 { font-family:"微軟正黑體"; font-size:36px; color:#00ada9;}
/* -- 活動議程 -- */
#agenda { width:100%; position:relative; color:#333; line-height:28px; background: url(../images/infoBG1.gif) no-repeat center bottom #fff; padding-top: 200px;}
.bottomSpace { display:block; height:130px;}
#agenda table.M { display:none;}
#agenda table.pc { width:100%; margin: 0 auto; font-weight:bold;}
#agenda table.pc tr { border-bottom:#c1c1c1 1px solid;}
#agenda table.pc tr.mark { background:#f6f6f6;}
#agenda table.pc th { color:#fff; font-size:16px; background:#00ada9; font-weight:normal; text-align:left; padding:15px 5px 0 10px; border-bottom:none;}
#agenda table.pc th b { font-size:12px; color:$bce2e1; display:inline-block; margin: 0 0 0 5px;}
#agenda table.pc td { font-size:18px; color:#3f3f3f; padding:10px 5px 10px 10px; line-height:25px; background:none;}
#agenda table.pc td.time { font-size:16px; color:#3f3f3f;}
#agenda table.pc td .issue { font-size:18px; color:#666;}
#agenda table.pc td .issue b { color:#00ada9; display:block; font-size:22px; font-weight:bold;}
#agenda table.pc td.speaker { color:#333; font-size:15px;}
#agenda table.pc td.speaker b { font-size:20px; color:#e95377;}
.gray { font-weight:normal; color:#666;}
/* -- 活動資訊 -- */
#infor { width:100%; background: url(../images/infoBG2.gif) no-repeat center top; color:#fff; height:416px; padding-top:65px;}
.date { font-size:75px; font-weight:bold; font-family: GOTHIC;}
.time { font-size:53px; font-weight:bold; font-family: GOTHIC; display:block;}
.week { font-size:36px; font-family: "微軟正黑體", GOTHIC; font-weight:bold; display:inline-block; margin: -10px 8px 15px 8px; background:#fff; color:#f9596c; border-radius:50px; text-align:center; width:55px; height:55px; line-height:55px; vertical-align: top;}
.add { font-size:25px; font-weight:bold; display:block; margin: 40px 0 25px 0;}
.add b { font-size:18px;}
iframe { width:46%; height:380px; float:right; margin: -120px 0 0 0;}
/* -- Footer -- */
footer { width:100%;; padding:25px 20px 50px 20px; background: url(../images/infoBG3.gif) no-repeat center top;}
footer img.bottom { float:left; display:inline-block; padding-top:15px;}
footer ul { float:right;}
footer ul li { display:inline-block; font-size:15px; color:#666;}
footer b { font-size:11px; color: #666; display:block; float:right;}
footer ul li img { margin: 5px 10px 0 0;}
/* --窄螢幕版型------------------------------------- */
@media screen and (min-width: 1025px) and (max-width: 1249px) {
}
/* --平板版型------------------------------------- */
@media screen and (min-width: 768px) and (max-width: 1024px) {
/* -- 首頁標題logo -- */
#home { width:100%; position:relative; margin: 0 auto; min-height:880px; background:url(../images/intropic.png) no-repeat center bottom;}
#home img.toplogo { display:block; position:absolute; right:15px; top:40px;}
#home img.title1 { margin: 285px 0 0 10%; width:40%; height:auto;}
#home img.title2 { margin: 5px 0 0 10%; width:60.16%; height:auto; display:inline-block;}
#home img.title3 { margin: 5px 5px 0 5px; display:inline-block; width:1.3%;}
#home img.title4 { margin: 5px 0 0 0; width:8.88%; display:inline-block;}
#home img.title5 { margin: 0 0 0 -5px; width:45.12%; height:auto; display:inline-block;}
#home img.title6 { margin: 280px 0 30px 18%; width:48%; display:inline-block;}
#home img.title7 { margin: 5px 0 0 10%; width:60.16%; height:auto; display:block;}
/* -- 活動引言 -- */
#abouText { float:right; color: #333; font-size:16px; line-height:26px; text-align:justify; width:62%; padding: 80px 0 65px 0;}
/* -- 講員區 -- */
#mainSpeaker { float:left; margin: -200px 0 0 0; width:35%;}
#mainSpeaker img.L { width:100%; height:auto;}
#aboutMain { float:right; color:#fff; font-size:16px; line-height:26px; text-align:justify; width:62%;}
img.speaker { margin:-3px 0 30px 0; display:block;}
#speaker ul li { width:30%; margin: 0 1.5% -320px 1.5%; display:inline-block; position:relative; line-height:24px; text-align:left; vertical-align:top;}
#speaker ul li img.L { opacity:.95; filter:alpha(opacity=95); float:left; margin: 0 20px 10px 0; width:100%; height:auto;}
.Pic { position:relative; display:block;}
#speaker ul li a img.more { margin-top:10px; display:block; position: relative; left:0; bottom:0; opacity:.9; filter:alpha(opacity=90);}
#speaker ul li a:hover img.more { opacity:1; filter:alpha(opacity=100);}
.speakerName { font-size:18px; color:#98d4d2;}
.speakerName b { display:block; font-size:52px; font-weight:bold; color:#fff; margin: 0 0 0px 0; font-family: GOTHIC; line-height:50px;}
.speakerTitle { color: #FFC;font-size:18px; font-weight:bold;}
.titleT18 { font-size:16px; color:#666; font-weight:bold; display:block; padding-top:0px;}
.titleT18 b { font-size:14px; display:block; margin: 5px 0 10px 0; color:#00ada9; font-weight:normal; line-height:18px;}
.nameT36 { font-family:"微軟正黑體"; font-size:32px; color:#00ada9;}
/* -- 活動議程 -- */
#agenda { width:100%; position:relative; color:#333; line-height:28px; background: url(../images/infoBG1-M.gif) no-repeat center bottom #fff; padding-top: 320px;}
#agenda table.pc th b { font-size:12px; color:$bce2e1; display:block; margin: 0 0 0 5px;}
/* -- 活動資訊 -- */
#infor { width:100%; background: url(../images/infoBG2-M.gif) no-repeat center top #f9596c; color:#fff; height:auto; padding:30px 0;}
.date { font-size:50px; font-weight:bold; font-family: GOTHIC; width:100%;}
.time { font-size:50px; font-weight:bold; font-family: GOTHIC; display: inline-block;}
.week { font-size:25px; font-family: "微軟正黑體", GOTHIC; font-weight:bold; display:inline-block; margin: -10px 8px 15px 8px; background:#fff; color:#f9596c; border-radius:50px; text-align:center; width:40px; height:40px; line-height:40px; vertical-align: top;}
.add { font-size:25px; font-weight:bold; display:block; margin: 10px 0 25px 0;}
.add b { font-size:18px;}
iframe { width:100%; height:250px; float:none; margin: 0 0 30px 0;}
/* -- Footer -- */
footer { width:100%;; padding:25px 20px 50px 20px; background: none; background:#fff;}
footer img.bottom { float:none; display:block; padding-top:15px; width:auto; margin: 0 auto 20px auto;}
footer ul { float:none; text-align:center;}
footer ul li { display:inline-block; font-size:15px; color:#666; text-align:left;}
footer b { font-size:11px; color: #666; display:block; float:none; text-align:center;}
footer ul li img { margin: 5px 10px 0 0;}
}
/* --手機版型------------------------------------- */
@media screen and (max-width: 767px) {
body { background: url(../images/mainBG-M.jpg) no-repeat center top fixed;}
h4 { width:60px; height:45px; background: url(../images/menuM.png) no-repeat center center; background-size:60px 45px; position: fixed; top:25px; left:10px; display:block; z-index:99999;}
#SUBMENU ul { padding: 0; margin: 20px auto 0 auto; width:95%; text-align:center;}
#SUBMENU ul li { width:90px; height:90px; margin: 0 auto 5px auto; display:block;}
#SUBMENU ul li a { width:90px; height:90px; display:block; border-radius:100px; background:#f9596c; color:#fff; padding-top:30px; font-size:11px;}
#SUBMENU ul li b { font-size:16px; display:block; margin: 0 0 5px 0; font-weight:bold;}
a.signup { position: fixed; right:10px; bottom:10px; display:block; z-index:99999; background:none; border:none; width:90px; height:90px;}
a.signup img { opacity:1; filter:alpha(opacity=100); width:90px; height:90px;}
a.signup:hover img { opacity:1; filter:alpha(opacity=100); width:90px; height:90px;}
/* -- 首頁標題logo -- */
#home { width:100%; position:relative; margin: 0 auto; min-height:850px; background:url(../images/intropic-M.png) no-repeat center bottom;}
#home img.toplogo { display:block; position:absolute; right:10px; top:30px; width:100px; height:auto;}
#home img.title1 { margin: 175px 0 0 10%; width:60%; height:auto;}
#home img.title2 { margin: 5px 0 0 10%; width:80.16%; height:auto; display:inline-block;}
#home img.title3 { margin: 5px 5px 0 5px; display:inline-block; width:1.9%;}
#home img.title4 { margin: 5px 0 0 10%; width:30%; display:block;}
#home img.title5 { margin: -40px 0 0 10%; width:80%; height:auto; display:inline-block;}
#home img.title6 { margin: 130px 0 0 10%; width:80%; display:inline-block;}
#home img.title7 { margin: 5px 0 0 10%; width:80.16%; height:auto; display:block;}
/* -- 活動引言 -- */
#about { background: url(../images/introBG-M.png) no-repeat center top #d8d8d8; width:100%; }
#abouText { float:none; color: #333; font-size:16px; line-height:26px; text-align:justify; width:90%; padding: 80px 0 115px 0; margin:0 auto;}
/* -- 講員區 -- */
#mainSpeaker { float:left; margin: -100px 0 20px 5%; width:60%;}
#mainSpeaker img.L { width:100%; height:auto;}
#aboutMain { float:none; color:#fff; font-size:16px; line-height:26px; text-align:justify; width:90%; margin:0 auto;}
img.speaker { margin:-3px 0 15px 0; display:block; width:100%; height:auto;}
#speaker ul { padding-bottom:20px;}
#speaker ul li { width:97%; margin: 20px 1.5% 0 1.5%; display:inline-block; position:relative; line-height:24px; text-align:left; vertical-align:top;}
#speaker ul li img.L { opacity:.95; filter:alpha(opacity=95); float:left; margin: 0 20px 10px 0; width:45%; height:auto;}
.Pic { position:relative; display:block;}
#speaker ul li a img.more { margin-top:10px; display:block; position: relative; left:0; bottom:0; opacity:.9; filter:alpha(opacity=90);}
#speaker ul li a:hover img.more { opacity:1; filter:alpha(opacity=100);}
.speakerName { font-size:18px; color:#98d4d2;}
.speakerName b { display:block; font-size:52px; font-weight:bold; color:#fff; margin: 0 0 0px 0; font-family: GOTHIC; line-height:50px;}
.speakerTitle { color: #FFC;font-size:18px; font-weight:bold;}
.titleT18 { font-size:16px; color:#98d4d2; font-weight:bold; display:block; padding-top:0px;}
.titleT18 b { font-size:14px; display:block; margin: 5px 0 10px 0; color:#fff; font-weight:normal; line-height:18px;}
.nameT36 { font-family:"微軟正黑體"; font-size:32px; color:#fff;}
/* -- 活動議程 -- */
#agenda { width:100%; position:relative; color:#333; line-height:28px; background: url(../images/infoBG1-M.gif) no-repeat center bottom #fff; padding-top:30px;}
#agenda table.pc { display:none;}
#agenda table.M { display:block; width:100%; margin: 0 auto; font-weight:bold;}
#agenda table.M tr { border-bottom:#c1c1c1 1px solid;}
#agenda table.M tr.mark { background:#f6f6f6;}
#agenda table.M th { color:#fff; font-size:16px; background:#00ada9; font-weight:normal; text-align:left; padding:15px 5px 0 10px; border-bottom:none;}
#agenda table.M th b { font-size:12px; color:$bce2e1; display:block; margin: 0 0 0 5px;}
#agenda table.M td { font-size:18px; color:#3f3f3f; padding:10px 5px 10px 10px; line-height:25px; background:none; vertical-align:top;}
#agenda table.M td.time { font-size:16px; color:#3f3f3f;}
#agenda table.M td .issue { font-size:18px; color:#666;}
#agenda table.M td .issue b { color:#00ada9; display:block; font-size:22px; font-weight:bold;}
#agenda table.M td .speaker { color:#333; font-size:15px;}
#agenda table.M td .speaker b { font-size:20px; color:#e95377;}
/* -- 活動資訊 -- */
#infor { width:100%; background: url(../images/infoBG2-M.gif) no-repeat center top #f9596c; color:#fff; height:auto; padding:30px 0;}
.date { font-size:42px; font-weight:bold; font-family: GOTHIC; width:100%;}
.time { font-size:42px; font-weight:bold; font-family: GOTHIC; display: inline-block;}
.week { font-size:25px; font-family: "微軟正黑體", GOTHIC; font-weight:bold; display:inline-block; margin: -10px 8px 15px 8px; background:#fff; color:#f9596c; border-radius:50px; text-align:center; width:40px; height:40px; line-height:40px; vertical-align: top;}
.add { font-size:20px; font-weight:bold; display:block; margin: 10px 0 25px 0; line-height:26px;}
.add b { font-size:15px;}
iframe { width:100%; height:200px; float:none; margin: 0 0 30px 0;}
/* -- Footer -- */
footer { width:100%;; padding:15x 20px 30px 20px; background: none; background:#fff;}
footer img.bottom { float:none; display:block; padding-top:5px; width:auto; margin: 0 auto 20px auto;}
footer ul { float:none; text-align:center;}
footer ul li { display:block; font-size:15px; color:#666; text-align: center;}
footer b { font-size:11px; color: #666; display:block; float:none; text-align:center;}
footer ul li img { margin: 5px 10px 0 0; width:auto; height:40px;}
}