@charset "UTF-8";
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
html, body{overflow:hidden; height:100vh;}
body{overflow-x:hidden; overflow-y:auto;}
*, body, div, p, input, button, a, strong, td, li, i, h1, h2, h3, h4, h5, strong, button, span, .btn{font-size:16px; line-height:25px; color:#575757; font-weight:normal; font-family:'Noto Sans TC', 'FontAwesome', '微軟正黑體', sans-serif; text-decoration:none; text-shadow:none; margin:0; padding:0;}
.main{width:94%; max-width: 946px; margin:0 auto; position:relative; text-align:justify;}
.hideit{display:none;}
.clear{clear:both;}
p{margin:30px 0;}
hr{border:1px #9f9f9f solid; border-top:none; border-left:none; border-right:none; margin:20px 0;}
hr.line{border:1px #6cc5f1 solid; border-top:none; border-left:none; border-right:none; margin-top:40px; margin-bottom:20px; display:block;}
header{background: #0e6eb8; padding: 10px 0;}
header .tool{font-size: 12px; color: #fff; text-align: right;}
header .tool a{font-size: 12px; color: #fff;}
header .info{float: right; text-align: right; clear: both; font-size: 30px; color: #fff; margin-top: 5px;}
header .info h1{color: #fff65f; font-size: 47px; font-weight: bold; line-height: 47px; margin: 0 0 5px 0; padding: 0;}
header .info .text{font-size: 22px; letter-spacing:4px; color:#fff;}
header .info .button img{height:27px;}
#logo{display: inline-block; margin-bottom:15px;}
#logo img{width:90%; max-width:507px;}
nav{background: #0e6eb8; text-align: center; clear: both; padding: 5px 0;}
nav a{color: #fffec7; margin: 0 10px; padding: 0 8px; font-size: 21px; position: relative;}
nav a:after{content: ''; border-right: 1px #fffec7 solid; position:absolute; right: -10px; top: 8px; height: 21px}
nav a img{position: relative; top: 3px;}
nav a:hover, nav a.current{background: #55b9ea; color: #fff65f; border-radius: 9px;}
nav a:nth-last-child(1):after{border:none;}
main img{max-width:100%;}
#indexBanner{position:relative; width:100%;}
#indexBanner #iwant{position:absolute; z-index:2; text-align:right; right:4%; bottom:5%; width:30%;}
#indexBanner #iwant img{width:30%;}
.col2{width:100%; margin:30px auto; padding:0;}
.col2:after{content:''; display:block; clear:both;}
.col2 a{width:calc(50% - 10px); display:inline-block;}
.col2 a:nth-child(2){float:right;}
.col2 a img{width:100%;}
.col3{width: 100%; margin:30px auto; padding:0;}
.col3 li{position:relative; list-style:none; line-height:28px; width:31%; max-width:280px; padding-bottom:20px; display:inline-block; vertical-align:top; font-size:14px;}
.col3 li:nth-child(3n+2){margin:0 calc(6% - 9px);}
.col3 li .img{margin:0 auto 10px auto; display:block;}
.col3 .title, .title{color:#0e6eb8; font-size:16px;}
.pageTitle{color:#0e6eb8;  font-size:20px;}
.col3.center li{text-align:center;}
.col3.company1{text-align:center;}
.col3.company1 li{text-align:left;}
ul.col3.report li, .col3.report h5{color:#0e6eb8;}
ul.col3.report li .img{margin-bottom:30px;}
div.col3 img{width:33%;}
.titleBlue{width:275px; text-align:center; margin:0 auto 20px auto; display:block; border:1px #6cc5f1 solid; border-left:none; border-right:none;}
.titleBlue strong{width:213px; font-size:18px; line-height:40px; background:#6cc5f1; color:#fff; display:inline-block; letter-spacing:1px;}
.titleBlue.line{width:100%;}
.titleBlue.line strong{width:calc(100% - 62px); margin:0 31px;}
.page_title{text-align:center; margin:30px 0;}
.page_title span{background: #55b9ea; color:#fff65f; border-radius: 6px; font-size:30px; line-height:35px; padding:8px 15px; display:inline-block;}
.imgBox{text-align:center;}
.imgBox div{display:inline-block; text-align:left;}
.imgBox.news div{max-width:750px;}
.imgBox.news11 div{max-width:446px;}
.imgBox.news12 div{max-width:454px;}
.img2 div{width:49%; display:inline-block; float:left;}
.img2 div img{width:100%; height:auto;}
.img2 div:nth-child(2){float:right;}
.img2:after{content:''; display:block; clear:both; margin-bottom:20px;}
.img2.news2 div img{width:auto; height:270px;}
.img2.report div:nth-child(1){width:29%;}
.img2.report div:nth-child(2){width:calc(71% - 20px);}
.img2.report div img{width:100%; height:auto;}
.left{width:100%; max-width:580px; float:left; text-align:justify;}
.rightImg{width:96%; max-width:300px; float:right; text-align:center;}
.rightImg div{margin-bottom:50px; color:#0e6eb8;}
#indexCompanys{margin-bottom:50px; text-align:center;}
#indexCompanys a{margin:0 9% 20px 0; display:inline-block; color:#0e6eb8;}
#indexCompanys a:nth-child(3), #indexCompanys img:nth-child(5){margin-right:0;}
img.fr{float:right; margin:0 0 15px 15px;}
.companyInfo{float:left; color:#0e6eb8; width:100%; max-width:250px; margin-bottom:10px;}
.companyIntroduction{float:right; width:100%; max-width:600px;}
.dot{width:5px; height:5px; display:inline-block; border-radius:2.5px; background:#0E6EB8; top:-3px; position:relative;}
.blue{color:#0E6EB8;}
h5.blue{font-size:18px;}
div.blue{font-weight:normal; margin-top:10px;}
div.blue .icon{color:#0E6EB8; font-size:10px; line-height:10px; top:-2px; position:relative;}
.dir a:nth-child(2){float:right;}
.col4{margin-bottom:30px;}
.col4 a{width:calc(25% - 15px); display:inline-block; margin-right:15px; text-align:center; color:#0e6eb8; margin-bottom:15px; vertical-align:top;}
.col4 a img{width:100%;}
.col4 a:nth-last-child(1){margin-right:0;}
.moreInfo{text-align:center; color:#f4ad04; font-size:18px; font-weight:bold;}
.moreInfo a{color:#f4ad04; font-size:18px; font-weight:bold; border-bottom:1px #f4ad04 solid;}
footer{background: #bee8ff; padding: 20px 0;}
footer .main{color: #15424b; text-align: center;}
footer .brands{margin-bottom: 10px;}
footer .brands a{display: inline-block; margin:0 20px; position: relative;}
footer .brands a:after{content: ''; border-right: 1px #fff solid; position:absolute; right: -20px; top: 0; height: 100%;}
footer .brands a:nth-last-child(1):after{border: none;}
footer .brands img{margin-right:15px;}
footer .brands img:nth-last-child(1){margin:0;}
@media screen and (max-width:767px){
  #logo{display: block; text-align:center; margin-top:10px;}
  header .tool{margin-right:5%;}
  header .info{float: none; text-align: right; clear: both; font-size: 14px; margin-right: 5%;}
  header .info h1{font-size: 30px; font-weight: bold; line-height: 30px; margin: 0 0 10px 0; padding: 0;}
  nav a{font-size: 14px; display:inline-block; margin:0 5px 5px 0;}
  nav a:after{display:none;}
  nav a img{height:14px;}
  .col2 a{width:100%;}
  .col2 a img:nth-child(2){float:none;}
  .col3{width:90%; margin:20px auto; display:block;}
  .col3 li{width:100%; max-width:none; maring:0 auto 50px auto; float:none; display:block;}
  .col3 li:nth-child(3n+2){margin:0 auto 50px auto;}
  .col4:after{content:''; display:block; clear:both;}
  .col4 a{width:calc(50% - 10px); margin:0 0 20px 0; font-size:12px;}
  .col4 a:nth-child(even){float:right;}
  .img2 div{width:100%; float:none; margin-bottom:20px;}
  .img2 div:nth-child(2){float:none;}
  .img2.news2 div img{height:auto;}
  .img2.report div:nth-child(1){width:100%; margin-bottom:20px;}
  .img2.report div:nth-child(2){width:100%;}
  .titleBlue{margin:0 auto 20px auto;}
  .page_title span{font-size:18px;}
  #indexCompanys img{margin-right:0;}
  .left{float:none; max-width:none; margin:0 auto 30px auto;}
  .rightImg{float:none; max-width:none;}
  img.fr{float:none; display:block; width:80%; margin:0 auto 15px auto;}
  .col5 a{width:calc(50% - 15px);}
  .col5 a:nth-child(even){margin-right:0;}
  div.col3 img{width:100%;}
  footer .brands a:after{display:none;}
  footer .brands a{float:left; width:40%; display:inline-block; text-align:left; margin-bottom:10px;}
  footer .brands a:nth-child(even){margin-left:20px;}
  footer .brands img{margin:0 20px 20px 0;}
  footer .brands img:nth-child(2n){margin-right:0;}
}