/* ---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:nonep; background: url(../images/homeBG.jpg) no-repeat center -110px fixed;}
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: GOTHIC; src: url(../fonts/GOTHIC.TTF);}
/* --電腦版型------------------------------------- */
h1 { position:absolute; left:0; top:-1000px;}
.mainCon { position:relative; max-width:1250px; margin: 0 auto 0 auto; width:90%;}
/* -- 首頁 -- */
#home { width:100%; position:relative; padding: 90px 0 30px 0; min-height:630px; background-size:1900px auto;}
.topHeader { width:100%; height:90px; background:#004165; padding:25px 0; position:absolute; top:0; left:0;}
.topHeader img { height:40px; display:block;}
.fonTxt { font-size:20px; line-height:36px; color:#fff; width:90%; margin: 140px auto 0 auto; text-align:center;}
.fonTxt b { font-size:55px; font-weight:bolder; line-height:60px; display:block; margin-bottom:15px;}
img.mainView { display:block; width:100%; height:auto;}
/* -- who we are -- */
#about { padding:85px 0 70px 0; background:#fff; font-size:18px; line-height:30px; color:#000; text-align:justify;}
#about p { display:block; margin-bottom:30px;}
h3 { font-family:"微軟正黑體"; font-size:45px; font-weight: bold; display:block; margin-bottom:65px; color:#004165; text-align: left; line-height:55px;}
.whiteTxt { color:#fff;}
/* -- Pillars -- */
#Pillars { padding:85px 0 90px 0; background:#f1f1f2; font-size:18px; line-height:30px; color:#000; text-align:justify;}
ul.tree-M { display:none;}
ul.tree { text-align:center; width:100%;}
ul.tree li { width:100%; font-size:30px; color:#333; font-weight:bold;}
ul.tree li .subT { font-size:20px; display:block; margin-bottom:15px; font-weight:bold; line-height:30px;}
ul.tree li b { font-size:24px; font-weight:bold;}
ul.tree li .blue1 { color:#00476f;}
ul.tree li .blue2 { color:#35b0dd;}
ul.tree li .blue3 { color:#007ac9;}
ul.tree li img.line { width:100%; display:block; margin: 10px auto 20px auto; max-width:710px;}
ul.tree li.three { display:inline-block; width:32%; margin: 0 0.5%; vertical-align:top; background:url(../images/treeLine-2.gif) no-repeat center bottom; padding-bottom:75px; font-size:15px; font-weight:normal; line-height:22px;}
ul.tree li.three img { width:100%; margin: 5px auto 15px auto; max-width:110px; display:block;}
ul.tree li.six { display:inline-block; width:15%; margin: 0 0.5%; vertical-align:top; font-size:15px; font-weight:normal; line-height:22px;}
ul.tree li.six img { width:100%; margin: 10px auto 15px auto; max-width:110px; display:block;}
/* -- History -- */
#History { padding:85px 0 110px 0; background:linear-gradient(to bottom, #003a61, #006eb8); color:#fff;}
ul.year { background:url(../images/yearline.gif) repeat-y 250px top;}
ul.year li { list-style-type:none; padding: 35px 0 35px 80px; font-size:18px; vertical-align:top; line-height:22px;}
ul.year li b { font-size: 33px; font-weight:bold; font-family:Arial, Helvetica, sans-serif; background:url(../images/yearpoint.png) no-repeat right center; padding-right: 50px; margin-right:25px; display:inline-block; width:180px; float:left;}
.yearTxt { float: right; width: calc(100% - 220px); display:inline-block; text-align:left;}
/* -- Commitment -- */
#Commitment { padding:85px 0 70px 0; background:#f1f1f2; font-size:18px; line-height:30px; color:#000; text-align:justify;}
#Commitment p { display:block; margin-bottom:30px;}
/* -- Recognition -- */
#Recognition { padding:85px 0 70px 0; background:#fff; font-size:18px; line-height:30px; color:#000;}
ul.list { margin-bottom:60px;}
ul.list li { width:100%; margin: 0 0 40px 0; display:block;}
ul.list li b { display:block; font-size:24px; line-height:30px; font-weight:bold; margin-bottom:30px;}
ul.list li img { width:48%; border-radius:10px; margin-right:5%; float:left; transition: transform 0.6s ease; opacity: 1;}
ul.list li:hover img { transform: scale(1.015); opacity: 0.8;}
.note { font-size:16px; color:#333; line-height:24px; border-top: #CCC 1px solid; padding-top:30px; text-align:justify;}
.note p { display:block; margin-bottom:30px;}
/* -- Subscribe -- */
#Subscribe { padding:85px 0 70px 0; background:#004165; font-size:18px; line-height:30px; color:#fff;}
a.btn { font-size:15px; font-weight:bold; color:#004165; padding: 5px 30px; border-radius:80px; text-align:center; background:#fff; display:inline-block; margin-left:35px;}
a.btn:hover { background:#d4dfe5;}
/* -- Footer -- */
footer { width:100%; color:#666; background:#fff; padding: 20px 0; font-size:15px;}
img.PIC-M { display:none;}
img.PIC-PC { display:block;}
/* --窄螢幕版型------------------------------------- */
@media screen and (min-width: 1025px) and (max-width: 1249px) {
}
/* --平板版型------------------------------------- */
@media screen and (min-width: 768px) and (max-width: 1024px) {
html { background: url(../images/homeBG.jpg) no-repeat center -50px fixed; background-size:1500px auto;}
h3 { font-family:"微軟正黑體"; font-size:40px; font-weight: bold; display:block; margin-bottom:65px; color:#004165; text-align: left; line-height:55px;}
/* -- Pillars -- */
#Pillars { padding:85px 0 90px 0; background:#f1f1f2; font-size:18px; line-height:30px; color:#000; text-align:justify;}
ul.tree { display:none;}
ul.tree-M { text-align:center; width:100%; display:block;}
ul.tree-M li { width:100%; font-size:15px; font-weight:normal; line-height:22px; font-weight:bold;background: url(../images/treeLine-2.gif) no-repeat center bottom; padding-bottom:75px; background-size:50% 45px;}
ul.tree-M li .subT { font-size:20px; display:block; margin-bottom:15px; font-weight:bold; line-height:30px;}
ul.tree-M li b { font-size:16px;}
ul.tree-M li .blue1 { color:#00476f;}
ul.tree-M li .blue2 { color:#35b0dd;}
ul.tree-M li .blue3 { color:#007ac9;}
ul.tree-M li img.line { width:100%; display:block; margin: 10px auto 20px auto; max-width:710px;}
ul.tree-M li.two { display:inline-block; width:45%; margin: 0 2%; vertical-align:top; font-size:15px; font-weight:normal; line-height:22px; background:none;}
ul.tree-M li img,
ul.tree-M li.two img { width:100%; margin: 5px auto 15px auto; max-width:110px; display:block;}
.treeTitle { text-align:left; display:block; font-size:24px; font-weight:bolder; margin-bottom:30px;}
ul.year { background:url(../images/yearline.gif) repeat-y 30px top;}
ul.year li { list-style-type:none; padding: 35px 0 35px 20px; font-size:18px; vertical-align:top; line-height:22px;}
ul.year li b { font-size: 32px; font-weight:bold; font-family:Arial, Helvetica, sans-serif; background:url(../images/yearpoint.png) no-repeat left center; padding-left: 30px; margin: 0 0 15px 0; display:block; float:none; width:250px;}
.yearTxt { float: none; width: 100%; display: block; text-align:left; padding-left:30px;}
/* -- Recognition -- */
#Recognition { padding:85px 0 70px 0; background:#fff; font-size:18px; line-height:30px; color:#000;}
ul.list { margin-bottom:60px;}
ul.list li { width:100%; margin: 0 0 40px 0; display:block;}
ul.list li b { display:block; font-size:24px; line-height:30px; font-weight:bold; margin-bottom:30px;}
ul.list li img { width:48%; border-radius:10px; margin-right:5%; float:left; transition: transform 0.6s ease; opacity: 1;}
ul.list li:hover img { transform: scale(1.015); opacity: 0.8;}
}
/* --手機版型------------------------------------- */
@media screen and (max-width: 767px) {
html { background: url(../images/homeBG.jpg) no-repeat -450px -50px fixed; background-size:1200px auto;}
/* -- 首頁 -- */
#home { width:100%; position:relative; padding: 60px 0 30px 0; min-height:500px; background-size:1900px auto;}
h3 { font-family:"微軟正黑體"; font-size:32px; font-weight: bold; display:block; margin-bottom:50px; color:#004165; text-align: left; line-height:40px;}
.topHeader { width:100%; height:70px; background:#004165; padding:20px 0; position:absolute; top:0; left:0;}
.topHeader img { height:30px; display:block;}
.fonTxt { font-size:18px; line-height:30px; color:#fff; width:90%; margin: 90px auto 0 auto; text-align:center;}
.fonTxt b { font-size:38px; font-weight:bolder; line-height:50px; display:block; margin-bottom:15px;}
img.mainView { display:block; width:100%; height:auto;}
#about { padding:50px 0 40px 0; background:#fff; font-size:15px; line-height:24px; color:#333; text-align:justify;}
/* -- Pillars -- */
#Pillars { padding:50px 0 40px 0; background:#f1f1f2; font-size:15px; line-height:24px; color:#333; text-align:justify;}
ul.tree { display:none;}
ul.tree-M { text-align:center; width:100%; display:block;}
ul.tree-M li { width:100%; font-size:15px; font-weight:normal; line-height:22px; font-weight:bold;background: url(../images/treeLine-2.gif) no-repeat center bottom; padding-bottom:75px; background-size:50% 45px;}
ul.tree-M li .subT { font-size:20px; display:block; margin-bottom:15px; font-weight:bold; line-height:30px;}
ul.tree-M li b { font-size:16px;}
ul.tree-M li .blue1 { color:#00476f;}
ul.tree-M li .blue2 { color:#35b0dd;}
ul.tree-M li .blue3 { color:#007ac9;}
ul.tree-M li img.line { width:100%; display:block; margin: 10px auto 20px auto; max-width:710px;}
ul.tree-M li.two { display:inline-block; width:45%; margin: 0 2%; vertical-align:top; font-size:15px; font-weight:normal; line-height:22px; background:none;}
ul.tree-M li img,
ul.tree-M li.two img { width:100%; margin: 5px auto 15px auto; max-width:110px; display:block;}
.treeTitle { text-align:left; display:block; font-size:24px; font-weight:bolder; margin-bottom:30px;}
#History { padding:50px 0 110px 0; background:linear-gradient(to bottom, #003a61, #006eb8); color:#fff;}
ul.year { background:url(../images/yearline.gif) repeat-y 30px top;}
ul.year li { list-style-type:none; padding: 35px 0 35px 20px; font-size:18px; vertical-align:top; line-height:22px;}
ul.year li b { font-size: 30px; font-weight:bold; font-family:Arial, Helvetica, sans-serif; background:url(../images/yearpoint.png) no-repeat left center; padding-left: 30px; margin: 0 0 15px 0; display:block; float:none;}
.yearTxt { float: none; width: 100%; display: block; text-align:left; padding-left:30px; font-size:15px; line-height:24px;}
/* -- Recognition -- */
#Recognition { padding:50px 0 40px 0; background:#fff; font-size:15px; line-height:24px; color:#333;}
ul.list { margin-bottom:60px;}
ul.list li { width:100%; margin: 0 0 50px 0; display:block;}
ul.list li b { display:block; font-size:20px; line-height:28px; font-weight:bold; margin-bottom:30px;}
ul.list li img { width:100%; border-radius:10px; margin:0 0 15px 0; float:none; transition: transform 0.6s ease; opacity: 1;}
ul.list li:hover img { transform: scale(1.015); opacity: 0.8;}
#Commitment { padding:50px 0 40px 0; background:#f1f1f2; font-size:15px; line-height:24px; color:#333; text-align:justify;}
.note { font-size:14px; color:#333; line-height:22px; border-top: #CCC 1px solid; padding-top:30px; text-align:justify;}
.note p { display:block; margin-bottom:30px;}
#Subscribe { padding:40px 0 50px 0; background:#004165; font-size:15px; line-height:24px; color:#fff;}
a.btn { font-size:15px; font-weight:bold; color:#004165; padding: 5px 30px; border-radius:80px; text-align:center; background:#fff; display: block; margin:25px 0 0 0; width: fit-content;}
}
@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; }
}