@charset "UTF-8";
@import url(noto.css);
html{overflow-x:hidden; overflow-y:auto; font-size:14pt; background: #fff;}
html#index{background: #e0f8ff;}
*, body, div, p, input, button, a, strong, td, li, i, h1, h2, h3, h4, h5, strong, button, span{font-size:1rem; line-height:1.6; font-family:'Noto Sans TC', '微軟正黑體', sans-serif; text-decoration:none; text-shadow:none; margin:0; padding:0;}
a:hover{text-decoration:none; transition:All 0.2s ease;}
td{padding:5px;}
h1{font-size: 1.6rem; font-weight: bold; margin-bottom: 1rem;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{display:block;}
section{width:958px; min-width:958px; margin:0 auto; position: relative;}
section img{max-width:100%; height: auto;}
header{padding-top: 1rem;}
#logo{margin-top:1rem; display: inline-block;}
#tools{position: absolute; right:0; top:0; display: inline-block; color:#016890;}
#tools .email{position: absolute; right: 55px; top:2rem;}
#tools .facebook{position: absolute; right: 0; top:2rem;}
#tools a{color:#016890;}
#btns{position: absolute; right: 0; top:8rem;}
html#index #btns{top:7rem;}
nav{margin:2rem 0 1rem 0;}
html#index nav{margin-bottom: 2rem;}
nav a{display: inline-block; width:18%; color:#0095bc; font-size: 1.1rem; font-weight: bold; text-align: center; position: relative;}
nav a.active, html#page01 nav a:nth-child(3), html#page02 nav a:nth-child(4), html#page03 nav a:nth-child(5), html#page04 nav a:nth-child(6){color:#bda8e4;}
nav a:before{content:''; display: inline-block; width:4px; height: 0.7rem; background: #bda8e4; position: absolute; left:-1.5px; top:0.3rem;}
nav a:nth-child(1){text-align: left; width:10%;}
nav a:nth-child(1):before{display: none;}
main{padding:10rem 0 0rem 0; display: block; background: #3dbddf; border-top:10px #e0f8ff solid;}
main section{background: #fff;}
article{margin:3rem 3rem 0 3rem; padding: 4rem 0 4rem 0; font-size: 0.8rem;}
article{text-align: justify;}
h1{color:#fff; text-align: center; left:0; top:-11rem; position:absolute; width:100%;}
h2{color:#3dbddf;}
.list{position: relative; padding-left: 2rem; margin-bottom: 2rem; font-size: 0.8rem;}
.list h5, .list a.h5{color:#0095bc; font-size: 1.2rem; font-weight: bold; line-height: 1;}
.list .icon{position: absolute; left:0;}
#article_header{position: absolute; left:0; top:-4rem; width:100%;}
#article_footer{position: absolute; left:0; bottom:-4.5rem; width:100%;}
html#index main{margin-top:370px; border:none; padding:2rem 0;}
html#index main section{background: none;}
html#index main #banner{margin:-368px 0 2rem 0;}
#index_imgs{width:calc(100% - 109px); float: right;}
#index_imgs:after{content: ''; display: block; clear: left;}
#index_imgs a{width:calc(33% - 1.1rem); text-align: center; display: inline-block; color:#fff; margin:0 1.5rem 1.5rem 0; vertical-align: top; font-size: 0.9rem; line-height: 1.2;}
#index_imgs a:nth-child(3n){margin-right: 0;}
#index_imgs a img{width:100%;}
.imgBox{display: inline-block; color:#999; font-size: 0.68rem;}
.imgBox div{color:#999; font-size: 0.68rem;}
.imgBox.fr{float: right; width:339px; margin:0 0 2rem 2rem;}
.info{background: url('../images/info_bg.png') no-repeat; width:calc(362px - 5rem); float:left; position: relative; left:-3rem; top:-2rem; margin-right:-1rem; padding: 5rem 3rem 2rem 3rem; color:#2d89a2; font-size: 0.8rem; font-weight: bold;}
.info .title{font-size: 1rem; font-weight: bold; white-space:nowrap; border-bottom: 1px #2d89a2 solid; margin-bottom: 0rem; display: block;}
.info a{color:#2d89a2; font-size: 0.8rem; font-weight: bold;}
h4.title{color:#2d89a2; border-bottom: 1px #2d89a2 solid; font-weight: bold; margin-bottom: 1rem; padding-bottom: 5px;}
.next{float: right;}
.source{font-size: 0.8rem; color:#0095bc;}
.underline{font-size: 0.8rem; border-bottom: 1px #0095bc solid; color:#0095bc;}
.blueList{padding-left: 1rem; font-size: 0.8rem; position: relative; display: block;}
.blueList img{margin:3px 0 0 -1rem; position: absolute;}
.blueList.small{font-size: 0.7rem;}
.blueList.small img{height:0.7rem;}
.firms_img{width:250px; float: left;}
.firms_img img{margin-top:1rem; max-width: 260px;}
.firms_info{width:100%; max-width:calc(100% - 300px); float: right; text-align: justify; display: inline-block; font-size: 0.8rem;}
.firms_info .list{margin:3px 0 0px 0; padding: 0 0 0 20px; position: relative;}
.firms_info .list:before{content: ''; width:9px; height: 14px; display: inline-block; background: url('../images/icon_wather.png') no-repeat; background-size: cover; position: absolute; left:2px; top:5px;}
.imgBoxInfo{font-size: 0.7rem;}
img.fr{margin-left:2rem;}
.tagTitle, .tagTitle1{color:#fff; background: #3dbddf; padding: 3px 1.2rem 3px 1rem; border-radius: 0 1rem 1rem 0; display: inline-block; font-size: 0.8rem; font-weight: bold; margin-bottom: 1rem;}
.tagTitle1{border-radius:1rem;}
ol{display: inline-block; width:calc(100% - 406px); margin:0; padding: 0;}
ol li{font-size: 0.8rem; list-style: decimal; margin:0 0 0 1rem; padding: 0;}
.footer_link{font-size: 1.2rem; color:#3dbddf; font-weight: bold;}
footer{background: #e0f8ff; padding-top:4rem;}
html#index footer{background: none; padding: 0;}
footer section{color:#3b3b3b; text-align: center; font-size: 0.8rem; font-weight: bold; padding: 1rem 0;}
footer section a{color:#3b3b3b; font-size: 0.8rem; font-weight: bold;}
footer section img{position: relative; top:6px;}
.blue{color:#3dbddf; font-size: 0.8rem;}
.more{display: inline-block; position: relative; top:4px;}
.fl{float:left; margin-right: 10px;}
.fr{float: right;}
.w50{width:47%; display: inline-block; font-size: 0.8rem;}
.w50 img.title{float: left; margin-right: 15px;}
.w50 .w50_info{float: right; display: inline-block; width:calc(100% - 110px); font-size: 0.8rem;}
.w50 hr{border:none; border-bottom: 1px #fff solid; margin:0.5rem 0;}
html#index main section .w50{color:#fff;}
html#index main section .w50 h4{color:#21405e;}
.clear{clear:both;}