/* ---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;}
body,
html { overflow-x: hidden; background:#e8ecd1;}
* { -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/mainView.jpg) no-repeat center -50px #fff;}
/*-- 選單 --*/
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;}
#navigation { width:100%; padding: 10px 15px 0 15px; font-size:18px; text-align: right;}
#navigation img { position:absolute; top:20px; left:20px; height:50px;}
a.home { font-size:16px; color:#b5c6d8; padding: 30px 10px 0 10px; line-height:80px;}
a.home:hover { color:#fff;}
a.noline { border:none;}
.mainCon { width:96%; margin: 0 auto; max-width:1300px;}
/*-- 主標題 --*/
#mainView { position:relative; width:95%; padding-top:100px; text-align:center; margin: 0 auto; max-width:1300px; min-height:710px;}
img.LOGO { display:block; margin: 100px 0 0 140px; float:left;}
/*-- 登入區 --*/
ul.LOGIN { float:right; background:url(../images/BG-login.png) no-repeat center top; width:424px; padding: 100px 35px 0 40px; text-align:left;}
ul.LOGIN li { width:100%; font-size:18px; font-weight:bold; color:#fff; padding:10px 0; display:block;}
ul.LOGIN li img { display:inline-block; margin: 0 5px; vertical-align:middle;}
input[type="text"] { font-size:18px; color:#333; padding: 12px 10px; margin: 0 5px; outline:none; border:none; width:75%;}
input[type="password"] { font-size:18px; color:#333; padding: 12px 10px; margin: 0 5px; outline:none; border:none; width:75%;}
a.PW { background: url(../images/icon-forget.png) no-repeat right top; font-size:18px; color:#121b58; display:inline-block; padding: 0 18px 0 5px; font-weight:normal; height:21px;}
a.PW:hover { color:#fff; background: url(../images/icon-forget.png) no-repeat right bottom;}
a.reload { background:url(../images/icon-reload.png) no-repeat center top; width:20px; height:22px; display:inline-block; vertical-align:middle;}
a.reload:hover { background:url(../images/icon-reload.png) no-repeat center bottom; width:20px; height:22px; display:inline-block;}
button[type="submit"] { font-size:20px; color:#0d5d76; padding: 20px 0; margin: 0; outline:none; border:none; width:100%; background:#e0e0e0; cursor:pointer; font-weight:bold;}
button[type="submit"]:hover { color:#0d5d76; padding: 20px 0; margin: 0; outline:none; border:none; width:100%; background: #fff;}
/*-- 內容小標 --*/
img.flow { width:96%; max-width:979px; margin: 60px auto 0 auto;}
img.PC { display:block;}
img.M { display:none;}
img.item { display:block; margin: 0 auto 60px auto;}
#information { width:100%; background: url(../images/tabBG.png) no-repeat center bottom; padding: 90px 3% 90px 3%; margin-top:-250px;}
.tabL { float:left; width:48%;}
.tabR { float:right; width:48%;}
.itemL { width:100%; background:url(../images/tab-1.png) no-repeat center center; height:117px; color:#fff; font-size:26px; text-align:center; line-height:100px; letter-spacing:2px; font-weight:bold;}
.itemR { width:100%; background:url(../images/tab-2.png) no-repeat center center; height:117px; color:#fff; font-size:26px; text-align:center; line-height:100px; letter-spacing:2px; font-weight:bold;}
.itemL img, .itemR img { display:inline-block; margin: 0 5px 0 0; vertical-align: middle;}
ul.bookmark-3 { text-align:center; border-bottom:#66a1b8 1px solid;}
ul.bookmark-3 li { font-size:20px; text-align:center; margin: 0 5px; display:inline-block; padding: 20px 5px; font-weight: bold; color:#afafaf; width: auto; cursor:pointer;}
ul.bookmark-3 li.click { border-bottom: #11a6d6 5px solid; color:#058cb8;}
ul.bookmark-4 { text-align:center; border-bottom:#96c787 1px solid;}
ul.bookmark-4 li { font-size:20px; text-align:center; margin: 0 5px; display:inline-block; padding: 20px 5px; font-weight: bold; color:#afafaf; width: auto; cursor:pointer;}
ul.bookmark-4 li.click { border-bottom:#60aa49 5px solid; color:#3d8926;}
.content { font-size:20px; color:#333; line-height:36px;}
.tab-center { text-align:center;}
.slick-next:before, .slick-prev:before { display:none;}
#content-1 { width: 100%; background: url(../images/issueBG-1.jpg) no-repeat center center; height:610px; position:relative;}
ul.number1 { margin: 0 1% 20px 0; text-align: right; vertical-align: baseline; position:absolute; bottom:30px; right:3%; width:100%;}
ul.number1 li { display: inline-block; margin: 0; color:#fff; font-size:22px; font-weight:bold; line-height:30px; width:fit-content; border-right:#ccc 1px dotted; padding-right:15px; vertical-align:top;}
ul.number1 li b { display: block; color:#fff; font-size:20px; margin-top:30px; font-weight:normal;}
.contentL { float:left; color:#fff; font-size:20px; line-height:36px; width:32%; margin: 150px 0 0 6%;}
#content-2 { width: 100%; background: url(../images/issueBG-2.jpg) no-repeat center center; height:610px; position:relative;}
ul.number2 { margin: 0 0 20px 1%; text-align: left; vertical-align: baseline; position:absolute; bottom:30px; left:3%; width:100%;}
ul.number2 li { display: inline-block; margin: 0; color:#fff; font-size:22px; font-weight:bold; line-height:30px; width:fit-content; border-left:#ccc 1px dotted; padding-left:15px; vertical-align:top}
ul.number2 li b { display: block; color:#fff; font-size:20px; margin-top:30px; font-weight:normal;}
.contentR { float:right; color:#fff; font-size:20px; line-height:36px; width:32%; margin: 150px 6% 0 0;}
ul.list, ul.list2 { width:100%; font-size:20px; line-height:28px;}
ul.list li, ul.list2 li { border-bottom:#5b8797 1px dotted; padding: 15px 0; width:100%; display:block; font-weight:bold;}
ul.list li a b, ul.list2 li a b { font-size:16px; display:block; margin-top:5px; color:#999; font-weight:normal;}
ul.list li a, ul.list2 li a { color:#131313;}
ul.list li a:hover { color:#058cb8;}
ul.list2 li a:hover { color:#3d8926;}
a.morelink { display:block; float:right; margin: 80px 0 0 0;}
.counter { font-size:90px; display:inline-block; font-family:bahnschrift; letter-spacing:-3px;}
#num1, #num2, #num3, #num4, #num5 { width:17%;}
h5 { border-bottom:#d8d8d8 1px solid; width:100%; font-size:36px; font-weight:bold; color:#0d256c; letter-spacing:10px; text-align:center; max-width:1350px; margin: 0 auto 50px auto;}
h5 b { width:fit-content; background:url(../images/colorBG.jpg) no-repeat center bottom; background-size: 100% 6px; display:block; margin:15px auto -1px auto; padding: 0 15px 23px 15px; color:#aaa; font-size:12px; letter-spacing:5px; min-width: 200px;}
h5.white { border-bottom:none; width:100%; font-size:50px; font-weight:bold; color:#fff; letter-spacing:0; text-align:center; max-width:1350px; margin: 0 auto 50px auto;}
h5.white b { width:fit-content; background:url(../images/colorBG.jpg) no-repeat center bottom; background-size: 100% 6px; display:block; margin:15px auto -1px auto; padding: 0 15px 23px 15px; color:#fff; font-size:12px; letter-spacing:5px; min-width: 200px;}
/*-- 相關連結 --*/
#LINK { width:100%; background:#ececec; padding: 90px 3%;}
ul.site { width:96%; max-width:1350px; text-align:center; margin: 0 auto;}
ul.site li { position: relative; width: 23%; margin: 0 0.5%; font-size:22px; line-height:30px; vertical-align:top; display:inline-block; font-weight:bold;}
ul.site li a img { width:100%; display:block; margin-bottom:15px; border:#f6f6f6 4px solid;opacity:1;
filter:alpha(opacity=100);}
ul.site li a:hover img {opacity:0.5;
filter:alpha(opacity=50);}
ul.site li a { color:#929292; width:100%; display:block; height:100%;}
ul.site li a:hover { color:#006586;}
/*-- 版權宣告 --*/
footer { background: url(../images/colorBG.jpg) repeat-y center top; background-size:100% 100%; width:100%; padding: 50px 20px 60px 20px; font-size:13px; text-align: right; color:#b7d9c3; line-height:20px;}
footer a { color:#fff;}
footer img.sLOGO { display: inline-block; float:left; vertical-align:middle; margin-top:10px;}
/* --窄螢幕版型------------------------------------- */
@media screen and (min-width: 1025px) and (max-width: 1350px) {
img.LOGO { display:block; margin: 100px 0 0 2%; float:left;}
ul.bookmark-3 li { font-size:18px; text-align:center; margin: 0 2px; display:inline-block; padding: 20px 3px; font-weight: bold; color:#afafaf; width: auto; cursor:pointer;}
ul.bookmark-4 li { font-size:18px; text-align:center; margin: 0 2px; display:inline-block; padding: 20px 3px; font-weight: bold; color:#afafaf; width: auto; cursor:pointer;}
ul.site li { position: relative; width: 23%; margin: 0 0.5%; font-size:18px; line-height:30px; vertical-align:top; display:inline-block; font-weight:bold;}
ul.list, ul.list2 { width:100%; font-size:18px; line-height:28px;}
ul.list li a b, ul.list2 li a b { font-size:15px; display:block; margin-top:5px; color:#999; font-weight:normal;}
}
/* --平板版型------------------------------------- */
@media screen and (min-width: 768px) and (max-width: 1024px) {
body { background:url(../images/mainView-PAD.jpg) no-repeat center top #fff;}
img.LOGO { display:block; margin: 100px auto 0 auto; float:none;}
#navigation { text-align: center;}
a.home { font-size:15px; color:#b5c6d8; padding: 10px 10px 0 10px; line-height:50px;}
h5 { border-bottom:#d8d8d8 1px solid; width:100%; font-size:30px; font-weight:bold; color:#0d256c; letter-spacing:10px; text-align:center; max-width:1350px; margin: 0 auto 50px auto;}
h5 b { width:fit-content; background:url(../images/colorBG.jpg) no-repeat center bottom; background-size: 100% 6px; display:block; margin:15px auto -1px auto; padding: 0 15px 23px 15px; color:#aaa; font-size:12px; letter-spacing:5px; min-width: 200px; line-height:18px;}
h5.white { border-bottom:none; width:100%; font-size:42px; font-weight:bold; color:#fff; letter-spacing:0; text-align:center; max-width:1350px; margin: 0 auto 50px auto;}
h5.white b { width:fit-content; background:url(../images/colorBG.jpg) no-repeat center bottom; background-size: 100% 6px; display:block; margin:15px auto -1px auto; padding: 0 15px 23px 15px; color:#fff; font-size:12px; letter-spacing:5px; min-width: 200px; line-height:18px;}
/*-- 登入區 --*/
ul.LOGIN { float:none; background:url(../images/BG-login-PAD.png) no-repeat center top; width:424px; padding: 100px 35px 0 40px; text-align:left; margin: 120px auto 10px auto;}
ul.LOGIN li { width:100%; font-size:18px; font-weight:bold; color:#fff; padding:10px 0; display:block;}
ul.LOGIN li img { display:inline-block; margin: 0 5px; vertical-align:middle;}
input[type="text"] { font-size:18px; color:#333; padding: 12px 10px; margin: 0 5px; outline:none; border:none; width:75%;}
input[type="password"] { font-size:18px; color:#333; padding: 12px 10px; margin: 0 5px; outline:none; border:none; width:75%;}
#information { width:100%; background: url(../images/tabBG.png) no-repeat center bottom; padding: 30px 3% 90px 3%; margin-top:50px;}
ul.bookmark-3 li { font-size:15px; text-align:center; margin: 0; display:inline-block; padding: 20px 5px; font-weight: bold; color:#afafaf; width: auto; cursor:pointer;}
ul.bookmark-4 li { font-size:15px; text-align:center; margin: 0; display:inline-block; padding: 20px 5px; font-weight: bold; color:#afafaf; width: auto; cursor:pointer;}
.itemL { width:100%; background:url(../images/tab-1.png) no-repeat center center; background-size: auto 95px; height:95px; color:#fff; font-size:20px; text-align:center; line-height:80px; letter-spacing:0; font-weight:bold;}
.itemR { width:100%; background:url(../images/tab-2.png) no-repeat center center; background-size: auto 95px; height:95px; color:#fff; font-size:20px; text-align:center; line-height:80px; letter-spacing:0; font-weight:bold;}
ul.site li { position: relative; width: 24%; margin: 0 0.5%; font-size:18px; line-height:30px; vertical-align:top; display:inline-block; font-weight:bold;}
ul.list, ul.list2 { width:100%; font-size:16px; line-height:26px;}
ul.list li a b, ul.list2 li a b { font-size:13px; display:block; margin-top:5px; color:#999; font-weight:normal;}
#content-1 { width: 100%; background: url(../images/issueBG-1-PAD.jpg) no-repeat center center; height:610px; position:relative;}
ul.number1 { margin: 0 1% 20px 0; text-align: right; vertical-align: baseline; position:absolute; bottom:30px; right:3%; width:100%;}
ul.number1 li { display: inline-block; margin: 0; color:#fff; font-size:18px; font-weight:bold; line-height:30px; width:fit-content; border-right:#ccc 1px dotted; padding-right:15px; vertical-align:top;}
ul.number1 li b { display: block; color:#fff; font-size:16px; margin-top:30px; font-weight:normal;}
.contentL { float:left; color:#fff; font-size:16px; line-height:30px; width:32%; margin: 100px 0 0 6%;}
#content-2 { width: 100%; background: url(../images/issueBG-2-PAD.jpg) no-repeat center center; height:610px; position:relative;}
ul.number2 { margin: 0 0 20px 1%; text-align: left; vertical-align: baseline; position:absolute; bottom:30px; left:3%; width:100%;}
ul.number2 li { display: inline-block; margin: 0; color:#fff; font-size:18px; font-weight:bold; line-height:30px; width:fit-content; border-left:#ccc 1px dotted; padding-left:15px; vertical-align:top}
ul.number2 li b { display: block; color:#fff; font-size:16px; margin-top:30px; font-weight:normal;}
.contentR { float:right; color:#fff; font-size:16px; line-height:30px; width:32%; margin: 100px 6% 0 0;}
.counter { font-size:60px; display:inline-block; font-family:bahnschrift; letter-spacing:-3px;}
#num1, #num2, #num3, #num4, #num5 { width:35%;}
a.morelink { display:block; float:right; margin: 40px 0 0 0;}
/*-- 相關連結 --*/
#LINK { width:100%; background:#ececec; padding: 60px 3%;}
ul.site li { position: relative; width: 45%; margin: 0 2% 30px 2%; font-size:22px; line-height:30px; vertical-align:top; display:inline-block; font-weight:bold;}
/*-- 版權宣告 --*/
footer { background: url(../images/colorBG.jpg) repeat-y center top; background-size:100% 100%; width:100%; padding: 40px 20px 50px 20px; font-size:13px; text-align: center; color:#b7d9c3; line-height:20px;}
footer img.sLOGO { display: block; float:none; vertical-align:middle; margin:10px auto 30px auto;}
}
/* --手機版型------------------------------------- */
@media screen and (min-width: 450px) and (max-width: 767px) {
}
@media screen and (max-width: 767px) {
body { background:url(../images/mainView-M.jpg) no-repeat center top #fff; background-size: 600px auto;}
img.LOGO { display:block; margin: 10px auto 0 auto; float:none; width:80%;}
#navigation { text-align: center;}
a.home { font-size:13px; color:#b5c6d8; padding: 10px 5px 0 5px; line-height:50px; letter-spacing:-1px;}
h5 { border-bottom:#d8d8d8 1px solid; width:100%; font-size:30px; font-weight:bold; color:#0d256c; letter-spacing:10px; text-align:center; max-width:1350px; margin: 0 auto 20px auto;}
h5 b { width:fit-content; background:url(../images/colorBG.jpg) no-repeat center bottom; background-size: 100% 6px; display:block; margin:15px auto -1px auto; padding: 0 15px 23px 15px; color:#aaa; font-size:12px; letter-spacing:5px; min-width: 200px; line-height:18px;}
h5.white { border-bottom:none; width:100%; font-size:36px; font-weight:bold; color:#fff; letter-spacing:0; text-align:center; max-width:1350px; margin: 0 auto 20px auto;}
h5.white b { width:fit-content; background:url(../images/colorBG.jpg) no-repeat center bottom; background-size: 100% 6px; display:block; margin:15px auto -1px auto; padding: 0 15px 23px 15px; color:#fff; font-size:12px; letter-spacing:5px; min-width: 200px; line-height:18px;}
/*-- 登入區 --*/
ul.LOGIN { float:none; background:url(../images/BG-login-PAD.png) no-repeat center top; background-size: 100% 446px; width:96%; padding: 100px 35px 0 40px; text-align:left; margin: 120px auto 10px auto;}
ul.LOGIN li { width:100%; font-size:18px; font-weight:bold; color:#fff; padding:5px 0; display:block;}
ul.LOGIN li img { display:inline-block; margin: 0 5px; vertical-align:middle;}
input[type="text"].half, input[type="text"] { font-size:16px; color:#333; padding: 9px 8px; margin: 5px 0; outline:none; border:none; width:100%; display:block;}
input[type="password"].half, input[type="password"] { font-size:16px; color:#333; padding: 9px 8px; margin: 5px 0; outline:none; border:none; width:100%; display:block;}
#information { width:100%; background: url(../images/tabBG.png) no-repeat center bottom; padding: 30px 3% 90px 3%; margin-top:50px;}
.tabL, .tabR { float:none; width:96%; margin: 0 auto}
ul.bookmark-3 li { font-size:16px; text-align:center; margin: 0; display:inline-block; padding: 20px 6px; font-weight: bold; color:#afafaf; width: auto; cursor:pointer;}
ul.bookmark-4 li { font-size:16px; text-align:center; margin: 0; display:inline-block; padding: 20px 6px; font-weight: bold; color:#afafaf; width: auto; cursor:pointer;}
.itemL { width:100%; background:url(../images/tab-1.png) no-repeat center center; background-size: auto 95px; height:95px; color:#fff; font-size:20px; text-align:center; line-height:80px; letter-spacing:0; font-weight:bold;}
.itemR { width:100%; background:url(../images/tab-2.png) no-repeat center center; background-size: auto 95px; height:95px; color:#fff; font-size:20px; text-align:center; line-height:80px; letter-spacing:0; font-weight:bold;}
ul.site li { position: relative; width: 24%; margin: 0 0.5%; font-size:18px; line-height:30px; vertical-align:top; display:inline-block; font-weight:bold;}
ul.list, ul.list2 { width:100%; font-size:16px; line-height:26px;}
ul.list li a b, ul.list2 li a b { font-size:13px; display:block; margin-top:5px; color:#999; font-weight:normal;}
#content-1 { width: 100%; background: url(../images/issueBG-1-M.jpg) no-repeat -1100px center; height:610px; position:relative;}
ul.number1 { margin: 0 1% 20px 0; text-align: right; vertical-align: baseline; position:absolute; bottom:30px; right:3%; width:100%;}
ul.number1 li { display: inline-block; margin: 0; color:#fff; font-size:18px; font-weight:bold; line-height:30px; width:fit-content; border-right:#ccc 1px dotted; padding-right:15px; vertical-align:top;}
ul.number1 li b { display: block; color:#fff; font-size:16px; margin-top:30px; font-weight:normal;}
.contentL { float:left; color:#fff; font-size:16px; line-height:30px; width:70%; margin: 100px 0 0 6%;}
#content-2 { width: 100%; background: url(../images/issueBG-2-M.jpg) no-repeat -900px center; height:610px; position:relative;}
ul.number2 { margin: 0 0 20px 1%; text-align: left; vertical-align: baseline; position:absolute; bottom:30px; left:3%; width:100%;}
ul.number2 li { display: inline-block; margin: 0; color:#fff; font-size:18px; font-weight:bold; line-height:30px; width:fit-content; border-left:#ccc 1px dotted; padding-left:15px; vertical-align:top}
ul.number2 li b { display: block; color:#fff; font-size:16px; margin-top:30px; font-weight:normal;}
.contentR { float:right; color:#fff; font-size:16px; line-height:30px; width:70%; margin: 100px 6% 0 0;}
.counter { font-size:50px; display:inline-block; font-family:bahnschrift; letter-spacing:-3px;}
#num1, #num2, #num3, #num4, #num5 { width:48%;}
a.morelink { display:block; float:right; margin: 40px 0 0 0;}
/*-- 相關連結 --*/
#LINK { width:100%; background:#ececec; padding: 60px 3%;}
ul.site li { position: relative; width: 80%; margin: 0 auto 30px auto; font-size:18px; line-height:26px; vertical-align:top; display:inline-block; font-weight:bold;}
ul.site li a img { width:100%; display:block; margin-bottom:7px; border:#f6f6f6 4px solid;opacity:1;
filter:alpha(opacity=100);}
/*-- 版權宣告 --*/
footer { background: url(../images/colorBG.jpg) repeat-y center top; background-size:100% 100%; width:100%; padding: 40px 20px 50px 20px; font-size:13px; text-align: center; color:#b7d9c3; line-height:20px;}
footer img.sLOGO { display: block; float:none; vertical-align:middle; margin:10px auto 30px auto; width:80%;}
}
@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; }
}