@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 100;
  src: url(font/NotoSansTC-Thin.woff2) format('woff2');
}
@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 300;
  src: url(font/NotoSansTC-Light.woff2) format('woff2');
}
@font-face {
   font-family: 'Noto Sans TC';
   font-style: normal;
   font-weight: 400;
   src: url(font/NotoSansTC-Regular.woff2) format('woff2');
 }
@font-face {
   font-family: 'Noto Sans TC';
   font-style: normal;
   font-weight: 500;
   src: url(font/NotoSansTC-Medium.woff2) format('woff2');
 }
@font-face {
   font-family: 'Noto Sans TC';
   font-style: normal;
   font-weight: 700;
   src: url(font/NotoSansTC-Bold.woff2) format('woff2');
 }
@font-face {
   font-family: 'Noto Sans TC';
   font-style: normal;
   font-weight: 900;
   src: url(font/NotoSansTC-Black.woff2) format('woff2');
 }
body{line-height:normal; font-family: "微軟正黑體", "Microsoft JhengHei" ,Arial; }
#banner{position:relative;}
#banner ul, #banner li{margin:0; padding:0; list-style:none;}
#banner .text{background:rgba(0,0,0,.55); color:#fff; width:438px; padding:27px 34px;}
#banner .text .title{font-size:54px;}
#banner .text .smallText{font-size:51px;}
#banner .text .center{font-size:24px;}
#banner .text .center+a{color:#fff; text-decoration:none; transition:all .2s ease-in-out; position:relative; z-index:9997; display:block; padding:10px 0;}
#banner .text .center+a:hover{padding-left:10px;}
#banner .text .center .computex { color:#fff; text-decoration:none; transition:all .2s ease-in-out; position:relative; z-index:9997; display:inline-block; padding:10px 0;}
#banner .text .center .computex:hover{padding-left:10px;}
#banner .content{position:absolute; top:50%; left:-179px; transform:translate(50%,-50%);}
.owl-nav{position:absolute; bottom:0; height:100%; width:100%; z-index:9996;}
#banner .owl-nav div{position:absolute; bottom:50%; transform:scale(1) translateY(50%);}
.owl-carousel .owl-nav .owl-next, .owl-carousel .owl-nav .owl-prev{background:url("../images/banner-arrow.png") no-repeat; width:73px; height:105px; font-size:0; position:absolute;}
.owl-carousel .owl-nav>div{opacity:.7;}
.owl-carousel .owl-nav>div:hover{opacity:1;}
.owl-carousel .owl-nav>div.disabled{opacity:.5;}
.owl-carousel .owl-nav .owl-next{background-position:-73px; right:0;}
.owl-carousel .owl-nav .owl-prev{left:0;}
.owl-dots{position:absolute; bottom:-30px; left:50%; transform:translateX(-50%); z-index:9996}
.owl-dot{height:12px; width:12px; border-radius:12px; background:rgba(255,255,255,.4); position:relative; display:inline-block; margin:0 5px; border:1px solid rgba(0,0,0,.7);}
.owl-dot.active::before{content:""; background:#002589; height:10px; width:10px; left:50%; top:50%; transform:translate(-50%, -50%); position:absolute; border-radius:10px;}
/*#banner .owl-carousel .owl-item img{max-width:none; width:auto;}*/

#mainbox .top, #mainbox .product{width:1200px; margin:0 auto;}
#mainbox .top{display:flex; justify-content:space-between; margin:50px auto 36px auto;}
#mainbox .slogan{position:relative; max-width:734px;}
#mainbox .slogan img{display:block;}
#mainbox .slogan .text{background:linear-gradient(to right, rgba(0,0,0,.5) 50%,rgba(0,0,0,0) 90%); position:absolute; bottom:14px; left:0; padding:12px 20px; width:50%;}
#mainbox .slogan .text h1{font-size:18px; font-weight:bold; color:#fff; padding:0;}
#mainbox .slogan .text p{font-size:13px; font-weight:100; color:#fff; padding:0; line-height:1.7; display:inline;}
#mainbox .slogan a{background:url("../images/index-about-btn.png") no-repeat; width:64px; height:10px; display:inline-block; margin-left:21px;}
#mainbox .slogan a.link_arrow{ background:none; width:auto; height:auto; color:#fff; text-decoration:none; font-size:12px; font-style:italic; margin:0 0 0 12px; }
#mainbox .slogan a.link_arrow::after{ content:''; background:url("../images/index-about-btn-1.png") no-repeat; width:18px; height:10px; display:inline-block; margin-left:6px;}
#mainbox .video{width:430px; position:relative; height:270px; overflow:hidden;}
#mainbox .video iframe{position:absolute; top:0; left:0; width:100%; height:100%; border:0 none;display: none;}
#mainbox .center {background:#e9f7fd;}
#mainbox .product{padding:41px 0 52px;}
#mainbox .product a{color:#003399; font-size:18px; text-decoration:none;}
#mainbox .product .title{color:#0098f0; font-size:36px; font-weight:bold; margin-bottom:46px;}
#mainbox .product ul, #mainbox .product li{margin:0; padding:0; list-style:none;}
#mainbox .product ul{display:inline-flex; flex-wrap:wrap;}
#mainbox .product li{width:370px; background:#fcfcfc; margin:0 22px 36px; box-shadow: 0 0 4px 0px rgba(0,0,0,.23);}
#mainbox .product li:nth-child(3n+1){margin-left:0;}
#mainbox .product li:nth-child(3n+3){margin-right:0;}
#mainbox .product .img{position:relative; overflow:hidden; min-height:266px;}
#mainbox .product .img::before{content:""; position:absolute; bottom:10px; left:50%; transform:translateX(-50%); width:82%; height:20px; box-shadow:0 0 20px 0 rgba(0,0,0,.3);}
#mainbox .product img{z-index:2; position:absolute; transform:translate(-50%, -50%); top:50%; left:50%; transition:transform .5s ease-in-out; max-width:none; min-width:100%; height:266px;}
#mainbox .product li:hover img{transform:translate(-50%, -50%) scale(1.15);}
#mainbox .product .text{width:70%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin:16px auto;}
#mainbox .product .text{box-shadow:0 0 0 0 rgba(0,0,0,.5); text-align:center;}

@media only screen and (max-width:1200px) {
  header.top-bar .header, #mainbox .top, #mainbox .product{width:auto;}
  #mainbox .top{display:block;}
  #mainbox .video, #mainbox .slogan{width:auto; margin:10px 0;}
  #mainbox .video{height:0; padding-bottom:56.25%; padding-top:30px;}
  #mainbox .video .fancy-box{display: none;}
  #mainbox .video iframe{display: block;}
  #mainbox .slogan{margin:0 auto; overflow:hidden;}
  #mainbox .slogan .img{position:absolute; top:0; left:0;}
  #mainbox .slogan img{height:100vw; max-width:none;}
  #mainbox .slogan .text{width:auto; position:relative; bottom:0;}
  #mainbox .product .title{text-align:center;}
  #mainbox .product ul{display:block; text-align:center;}
  #mainbox .product li, #mainbox .product li:nth-child(3n+1), #mainbox .product li:nth-child(3n+3){display:inline-block; vertical-align:top; margin:3%; width:42%;}
  #mainbox .product .img{min-height:auto;}
  #mainbox .product img{position:relative; transform:translate(0,0); top:0; left:0; height:auto; max-width:100%; width:100%;}
  #mainbox .product li:hover img{transform:translate(0,0) scale(1.15);}
  #banner .content{top:0; left:0; transform:translate(0,0); width:100%; height:100%; display: flex; flex-wrap: wrap; align-items: flex-end; }    
  #banner .text .title{font-size:2.5em;}
  #banner .text .center, #banner .text .center + a{font-size:1em;}
  #banner .text .center + a{padding:1% 0;}
  #banner .text{/*width:calc(100% - 10px); height:calc(100% - 10px);*/ padding:5px;}
  #banner .owl-carousel .owl-item img{max-width:100%; width:auto;}
  .owl-carousel .owl-nav .owl-next, .owl-carousel .owl-nav .owl-prev{transform:scale(.4);}
  .owl-nav{display:none;}
  .owl-dots{ transform:translateX(-50%) scale(.6); bottom:5%; display: none;}
}

@media only screen and (max-width: 570px) {
  #banner .text .title{font-size:1.5em;}
  #banner .text .center, #banner .text .center + a{font-size:.5em;}
  #banner .text .center .computex {font-size:.5em;}   
}