@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;}
h5{font-weight:bold;}
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:url('../images/headerBg.png') no-repeat center; background-size:cover; padding: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; padding-top:5px; display:inline-block;}
header .in .info .button{margin-top:10px; min-height:25px; line-height:25px; display:inline-block;}
#headerTitle{width:90%; max-width:406px;}
header .in .info{margin-top:0;}
header .in #headerTitle{display:none;}
header .in #headerSubtitle{margin-bottom:10px;}
header .in #headerSubtitle, header .in .inBr{display:inline-block; margin:0;}
#logo{display: inline-block; margin-bottom:15px;}
#logo img{width:90%; max-width:454px;}
nav{text-align: center; clear: both; padding: 5px 0;}
nav a{color:#0969ad; font-weight:bold; letter-spacing:1px; margin: 0 5px 0 10px; padding: 0 14px; font-size:15px; line-height:50px; position: relative;}
nav a:after{content: ''; border-right: 2px #0969ad solid; position:absolute; right: -10px; top: 8px; height: 15px}
nav a img{position: relative; top: 3px;}
nav a:hover:before, nav a.current:before{background:#0969ad; position:absolute; bottom:-5px; display:inline-block; width:calc(100% - 28px); height:2px; content:'';}
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:8%; bottom:10%; width:35%;}
#indexBanner #iwant img{width:30%;}
.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; text-align:left;}
.col3 li:nth-child(3n+2){margin:0 calc(6% - 9px);}
.col3 li .img{margin:0 auto 10px auto; display:block; max-height:297px;}
.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;}
.col3 li ul li{width:100%; float:none; margin:0 0 0 20px; position:relative; padding-bottom:0;}
.col3 li ul li:before{content:''; display:inline-block; width:6px; height:6px; border-radius:3px; margin:13px 0 0 -15px; background:#2a2a2a; position:absolute;}
.col3 li ul li:nth-child(3n+2){margin:0 0 0 20px;}
.titleBlue{width:100%; max-width:275px; text-align:center; margin:0 auto 20px auto; display:block; background:#4c8ed2; border-left:none; border-right:none;}
.titleBlue.line{max-width:none;}
.titleBlue strong{width:213px; font-size:18px; line-height:40px; color:#fff; display:inline-block; letter-spacing:1px;}
.titleBlue1{position:relative; text-align:center;}
.titleBlue1:before{content:''; width:100%; height:3px; background:#136ba7; display:block; position:absolute; z-index:-1; top:12px;}
.titleBlue1 strong{font-size:18px; line-height:18px; color:#fff; display:inline-block; letter-spacing:1px; background:#136ba7; border-radius:10px; padding:3px 20px 5px 22px;}
.page_title{text-align:center; margin:30px 0; background:#d6eafe;}
.page_title span{ color:#0969ad; font-size:26px; font-weight:bold; text-decoration:underline; line-height:44px; margin:5px 10px 10px 10px; 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{text-align:center;}
.img2 div{display:inline-block; text-align:left;}
.img2 div:nth-child(1){margin-right:10px;}
.img2 img{margin:0 3px;}
.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:500px; 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:0px; text-align:center;}
#indexCompanys a{margin:0 9% 20px 0; display:inline-block; color:#0e6eb8; vertical-align:top;}
#indexCompanys a:nth-child(3), #indexCompanys a:nth-child(6), #indexCompanys a:nth-child(9), #indexCompanys a:nth-child(12){margin-right:0;}
img.fr{float:right; margin:0 0 15px 15px;}
.companyInfo{float:left; color:#0e6eb8; width:100%; max-width:320px; margin-bottom:10px; text-align:left;}
.companyInfo a{color:#0e6eb8;}
.companyInfo .title{display:inline-block; width:120px; text-align:right;}
.companyInfo .link{display:block; text-align:center;}
.companyInfo .info{display:inline-block; color:#0e6eb8; float:right;}
.companyIntroduction{float:right; width:100%; max-width:600px;}
.dir a:nth-child(2){float:right;}
footer{background: #c4e1ff; padding: 20px 0;}
footer .main{color: #15424b; text-align: center;}
footer .main img{display:inline-block; position:relative; top:6px;}
footer .main, footer .main a{color:#15424b; font-size:14px; line-height:13px;}
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;}
.img3 img{width:32%; display:inline-block;}
.img3 img:nth-child(2){margin:0 1.5%;}
.img4 div{width:48%; float:left; color:#0969ad; margin-bottom:30px; text-align:left;}
.img4 div:nth-child(even){float:right;}
.img4 div:nth-child(3){clear:both;}
.img4 div img{width:100%;}
.img4:after{content:''; clear:both; display:block;}
.line2{position:relative; border:5px #d6eafe solid; border-left:none; border-right:none; height:15px; margin:80px 0;}
.line2 #iwant{margin-top:-50px;}
.line2 .prev, .line2 .next{margin-top:-35px;}
.blue{color:#0969ad;}
.gray{color:#aaa;}
.w35p{width:35%;}
.w60p{width:60%;}
.imgsBox img{display:inline-block;}
.fr.imgsBox img{display:block; width:100%; margin-bottom:30px;}
.fl{float:left;}
.fr{float:right;}
.fr.margin30{margin:0 0 30px 30px;}
.mobile{display:none;}
.mobile-x{display:inline-block;}
.blueDot{width:10px; height:10px; border-radius:5px; display:inline-block; background:#1878af; top:-2px; position:relative;}
@media screen and (max-width:600px){
  #logo{display: block; text-align:center; margin-top:10px;}
  header .main{padding-bottom:10px;}
  header .tool{margin-right:5%;}
  header .info{float: none; text-align: right; clear: both; font-size: 14px; margin:0 5% 0px 0;}
  header .info .button img{width:45%;}
  nav a{font-size: 14px; line-height:30px; display:inline-block; margin:0 5px 5px 0; padding:0 8px;}
  nav a:after{display:none;}
  nav a img{height:14px;}
  nav a:hover:before, nav a.current:before{width:calc(100% - 16px); bottom:0px;}
  .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;}
  .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; line-height:26px;}
  #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;}
  footer .main img{top:0px; margin-bottom:10px;}
  footer .main a{line-height:25px;}
  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;}
  .fl, .fr{float:none;}
  .fr.margin30{margin:0 0 30px 0px;}
  .line2 .prev{margin-top:-80px; float:left;}
  .line2 .next{margin-top:-80px; float:right;}
  .w35p, .w60p{width:100%;}
  .mobile{display:inline-block;}
  .mobile-x{display:none;}
}