@charset "UTF-8";
/* CSS Document */

section, article, aside, footer, header, nav, h2 { display:block;}

body { padding:0; margin:0 auto; color: #000; font-size:1em; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; background-color: #E3E3E3; position: relative;}
img { border:0; display: block;}

html, body { height: 100%;}

.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

div.brk { clear: both;}


/************ video box ************/
.video-container { position:relative; padding-bottom:56.25%; padding-top:30px; width:100%; height: 0px; overflow:hidden;}
.video-container iframe, .video-container object, .video-container embed { position:absolute; top:0; left:0; width:100%; height:100%;}


/************ GIF ************/
#gif-animate { width: 100%; height: 100%; background-image: url("../images/bg_motion_press.gif"); background-repeat: no-repeat; background-size: cover; background-position: center center; position: fixed; top: 0; left: 0; z-index: 999999;}


@media screen and (min-width: 1370px) {

  /************ index show mp4 ************/
  #index-show-mp4 { width: 100%; height: 100%; background-color: #000; display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden;}
  #index-show-mp4 video { width: 100%; height: auto; position: relative; z-index: 1;}
  #index-show-mp4 .skip-icon { width: 90px; font-size: 1rem; font-weight: 500; text-align: center; cursor: pointer; position: absolute; bottom: 100px; left: calc(50% - 45px); z-index: 2;}
  #index-show-mp4 .skip-icon img { width: 100%; height: auto;}


  /************ header + nav ************/

  header#top-header { width: 100%; padding: 20px calc(50% - 640px) 0 calc(50% - 640px); box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; position: absolute; top: 0; left: 0; z-index: 9;}

  header#top-header .header-logo-bx { width: 50px;}
  header#top-header .header-logo-bx img { width: 100%; height: auto;}

  header#top-header nav { width: calc(100% - 50px); background: transparent !important; box-shadow: none; display: flex; justify-content: flex-end; align-items: center;}
  header#top-header nav .language-list { color: #fff; font-size: 1rem; letter-spacing: 0.1em;}
  header#top-header nav .language-list a { color: #fff; text-decoration: none;}
  header#top-header nav .language-list a:hover { border-bottom: 1px #fff solid;}
  header#top-header nav .language-list a.sel { border-bottom: 1px #fff solid;}
  header#top-header nav .language-list-page { color: #000; font-size: 1rem; letter-spacing: 0.1em;}
  header#top-header nav .language-list-page a { color: #000; text-decoration: none;}
  header#top-header nav .language-list-page a:hover { border-bottom: 1px #000 solid;}
  header#top-header nav .language-list-page a.sel { border-bottom: 1px #000 solid;}

  header#top-header nav .nav-icon { width: 30px; margin: 0 0 0 40px;}
  header#top-header nav .nav-icon img { width: 100%; height: auto; cursor: pointer;}

  .header-nav-list-box { width: 100%; height: 100%; padding: 20px calc(50% - 640px) 0 calc(50% - 640px); box-sizing: border-box; background-image: url("../images/header_nav_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: left top; position: absolute; top: 0; left: 0; z-index: 999; display: none;}
  .header-nav-list-box .top-bar { width: 100%; display: flex; justify-content: space-between; align-items: center;}
  .header-nav-list-box .top-bar .logo-box { width: 50px;}
  .header-nav-list-box .top-bar .logo-box img { width: 100%; height: auto;}
  .header-nav-list-box .top-bar .close-bt { color: #fff; display: flex; justify-content: flex-end; align-items: center; cursor: pointer;}
  .header-nav-list-box .top-bar .close-bt span { font-size: 1rem; letter-spacing: 0.2em;}
  .header-nav-list-box .top-bar .close-bt img { width: 16px; height: auto; margin: 0 0 0 20px;}
  .header-nav-list-box ul.menu-list { clear: both; width: 70%; padding: 40px 0; margin: 80px auto; list-style: none; display: block;}
  .header-nav-list-box ul.menu-list li { width: 100%; padding: 20px 0; margin: 0;}
  .header-nav-list-box ul.menu-list li a { height: 40px; color: rgba(255,255,255,0.5); font-size: 1.4rem; letter-spacing: 0.5em; text-decoration: none; display: block; transition: 1s;}
  .header-nav-list-box ul.menu-list li a:hover { color: #fff; font-size: 1.5rem; font-weight: 600;}


  /************ section #about ************/

  section#sec-about { width: 100%; padding: 160px calc(50% - 640px); box-sizing: border-box; position: relative; z-index: 2;}

  section#sec-about .sec-about-top-bg { width: 100%; height: 280px; background: linear-gradient(180deg, rgba(80, 71, 71, 0.7) 0%, rgba(255, 255, 255, 0) 100%); mix-blend-mode: multiply; display: block; position: absolute; top: 0; left: 0; z-index: 1;}

  section#sec-about .sec-about-slide { clear: both; width: 100%; padding: 0 0 240px 0; border-radius: 60px; overflow: hidden; display: block;}
  section#sec-about .sec-about-slide div { position: relative;}
  section#sec-about .sec-about-slide .pics-mo { display: none;}
  section#sec-about .sec-about-slide .pics { width: 100%; position: relative; z-index: 1;}
  section#sec-about .sec-about-slide .pics img { width: 100%; height: auto; border-radius: 60px; position: relative; z-index: 1;}
  section#sec-about .sec-about-slide img.text { width: 680px; height: auto; position: absolute; top: 195px; left: 85px; z-index: 2;}

  section#sec-about .sec-about-con-text { clear: both; width: 80%; margin: 180px auto 0 auto; display: flex; justify-content: flex-start; align-items: flex-start; position: relative; z-index: 3;}
  section#sec-about .sec-about-con-text .col-title { width: 260px; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.1em;}
  section#sec-about .sec-about-con-text .col-text { width: calc(100% - 260px); font-size: 1.2rem; font-weight: 500; line-height: 1.8em;}


  /************ section #works ************/

  section#sec-works { width: 100%; padding: 100px calc(50% - 640px); box-sizing: border-box; background-image: url("../images/sec_works_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top; overflow: hidden; position: relative; z-index: 1;}

  section#sec-works .sec-works-title { width: 80%; margin: 0 auto; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.1em;}

  section#sec-works .sec-works-list-slide { clear: both; width: 100%; padding: 0; margin: -160px 0 0 0; box-sizing: border-box; overflow: hidden;}

  section#sec-works .sec-works-more-bar { clear: both; width: 100%; margin: -180px 0 0 0; overflow: hidden;}
  section#sec-works .sec-works-more-bar a { width: 100%; padding: 30px 0; text-decoration: none; display: block;}
  section#sec-works .sec-works-more-bar a img { width: 90px; height: auto; margin: 0 auto;}


  /************ section #awards ************/

  section#sec-awards { width: 100%; padding: 160px calc(50% - 640px) 0 calc(50% - 640px); box-sizing: border-box; background-image: url("../images/sec_awards_bg.jpg"); background-repeat: no-repeat; background-size: 100% auto; background-position: left top; position: relative; z-index: 2;}

  section#sec-awards .sec-awards-title { width: 80%; margin: 0 auto; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.1em; position: relative; z-index: 3;}

  section#sec-awards #awards-list-pc { clear: both; width: 100%;}
  section#sec-awards #awards-list-mo { display: none;}

  section#sec-awards #awards-list-pc .sec-awards-brand-list-arrows { width: 120px; display: flex; justify-content: space-between; align-items: center; position: absolute; top: 160px; right: calc(50% - 512px); z-index: 999;}
  section#sec-awards #awards-list-pc .sec-awards-brand-list-arrows img.awards-arrow-prev, 
  section#sec-awards #awards-list-pc .sec-awards-brand-list-arrows img.awards-arrow-next { width: 16px; height: auto; cursor: pointer;}
  
  section#sec-awards #awards-list-pc .sec-awards-brand-list { clear: both; width: 1020px; margin: 100px auto 0 auto; overflow: hidden;}
  section#sec-awards #awards-list-pc .sec-awards-brand-list .brand-lis-box { width: calc(100% / 5); padding: 0 15px; box-sizing: border-box;}
  section#sec-awards #awards-list-pc .sec-awards-brand-list .brand-lis-box .brand-box { width: 100%; height: 250px; padding: 40px 0 0 0; border-radius: 100px 100px 0 0; background-color: #000; box-sizing: border-box;}
  section#sec-awards #awards-list-pc .sec-awards-brand-list .brand-lis-box .brand-box .brand-logo { width: 100%; height: 150px; display: flex; justify-content: center; align-items: center;}
  section#sec-awards #awards-list-pc .sec-awards-brand-list .brand-lis-box .brand-box .brand-logo img.style1 { width: 120px; height: auto;}
  section#sec-awards #awards-list-pc .sec-awards-brand-list .brand-lis-box .brand-box .brand-logo img.style2 { width: 120px; height: auto;}
  section#sec-awards #awards-list-pc .sec-awards-brand-list .brand-lis-box .brand-box .brand-year { width: 100%; color: #fff; font-size: 1.6rem; font-weight: 600; letter-spacing: 0.1em; text-align: center;}

  section#sec-awards img.sec-awards-pic-mo { display: none;}
  section#sec-awards img.sec-awards-pic { clear: both; width: 100%; margin: 80px 0 0 0; border-radius: 40px;}


  /************ section #news ************/

  section#sec-news { width: 100%; padding: 160px calc(50% - 640px); box-sizing: border-box; background-color: #ECEDEA; position: relative; z-index: 2;}

  section#sec-news .sec-news-title { width: 80%; margin: 0 auto; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.1em; text-align: center;}

  section#sec-news .sec-news-list { clear: both; width: 80%; margin: 60px auto 0 auto; display: flex; justify-content: flex-start; align-items: flex-start;}
  section#sec-news .sec-news-list .news-box { width: calc(100% / 4 - 30px); margin: 0 15px;}
  section#sec-news .sec-news-list .news-box a { width: 100%; color: #000; text-decoration: none; display: block;}
  section#sec-news .sec-news-list .news-box a img.news-pic-mo { display: none;}
  section#sec-news .sec-news-list .news-box a img.news-pic-pc { width: 100%; height: auto; border-radius: 30px;}
  section#sec-news .sec-news-list .news-box a .news-title { clear: both; width: 100%; padding: 10px 0 0 0; font-size: 1.2rem; font-weight: 600; text-align: center;}

  section#sec-news .sec-news-more-bar { clear: both; width: 100%; overflow: hidden;}
  section#sec-news .sec-news-more-bar a { width: 100%; padding: 30px 0; text-decoration: none; display: block;}
  section#sec-news .sec-news-more-bar a img { width: 90px; height: auto; margin: 0 auto;}


  /************ section #works-list ************/

  section#page-works-list { clear: both; width: 100%; padding: 160px calc(50% - 640px); box-sizing: border-box; background-color: #DCDED9;}

  section#page-works-list .page-works-title { width: 100%; margin: 0 0 160px 0; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.1em; text-align: center; position: relative; z-index: 3;}

  .works-list-pic-1 { width: 600px; border-radius: 30px; transition-duration: 1s; overflow: hidden;}
  .works-list-pic-1:hover { border-radius: 140px 20px 20px 140px;}
  .works-list-pic-1 img { width: 100%; height: auto; transition-duration: 1s;}
  .works-list-pic-1 img:hover { width: 110%; height: auto; margin: -2.5% 0 0 -2.5%;}  
  .works-list-pic-2 { clear: both; width: 600px; margin: -60px 0 0 0; border-radius: 30px; transition-duration: 1s; overflow: hidden; float: right;}
  .works-list-pic-2:hover { border-radius: 20px 140px 140px 20px;}
  .works-list-pic-2 img {width: 100%; height: auto; transition-duration: 1s;}
  .works-list-pic-2 img:hover { width: 110%; height: auto; margin: -2.5% 0 0 -2.5%;}
  .works-list-pic-3 { clear: both; width: 600px; margin: 200px auto; border-radius: 30px; transition-duration: 1s; overflow: hidden;}
  .works-list-pic-3:hover { border-radius: 140px 140px 20px 20px;}
  .works-list-pic-3 img { width: 100%; height: auto; transition-duration: 1s;}
  .works-list-pic-3 img:hover { width: 110%; height: auto; margin: -2.5% 0 0 -2.5%;}
  .works-list-pic-4 { clear: both; width: 600px; margin: 200px 0 0 0; border-radius: 30px; transition-duration: 1s; overflow: hidden;}
  .works-list-pic-4:hover { border-radius: 140px 20px 20px 140px;}
  .works-list-pic-4 img { width: 100%; height: auto; transition-duration: 1s;}
  .works-list-pic-4 img:hover { width: 110%; height: auto; margin: -2.5% 0 0 -2.5%;}
  .works-list-pic-5 { clear: both; width: 600px; margin: 20px 0 0 0; border-radius: 30px; transition-duration: 1s; overflow: hidden; float: right;}
  .works-list-pic-5:hover { border-radius: 20px 140px 140px 20px;}
  .works-list-pic-5 img { width: 100%; height: auto; transition-duration: 1s;}
  .works-list-pic-5 img:hover { width: 110%; height: auto; margin: -2.5% 0 0 -2.5%;}
  .works-list-pic-6 { clear: both; width: 600px; margin: 160px auto; border-radius: 30px; transition-duration: 1s; overflow: hidden;}
  .works-list-pic-6:hover { border-radius: 140px 140px 20px 20px;}
  .works-list-pic-6 img { width: 100%; height: auto; transition-duration: 1s;}
  .works-list-pic-6 img:hover { width: 110%; height: auto; margin: -2.5% 0 0 -2.5%;}


  /************ section #works-detail ************/

  section#page-works-detail { clear: both; width: 100%; padding: 160px calc(50% - 640px); box-sizing: border-box; background-color: #DCDED9;}

  section#page-works-detail .page-works-title { width: 100%; margin: 0 0 160px 0; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.1em; text-align: center; position: relative; z-index: 3;}

  .works-detail-pic-1 { width: 600px; border-radius: 30px; transition-duration: 1s; overflow: hidden;}
  .works-detail-pic-1 img { width: 100%; height: auto; transition-duration: 1s;}
  .works-detail-pic-2 { clear: both; width: 600px; margin: -60px 0 0 0; border-radius: 30px; transition-duration: 1s; overflow: hidden; float: right;}
  .works-detail-pic-2 img {width: 100%; height: auto; transition-duration: 1s;}
  .works-detail-pic-3 { clear: both; width: 600px; margin: 200px auto; border-radius: 30px; transition-duration: 1s; overflow: hidden;}
  .works-detail-pic-3 img { width: 100%; height: auto; transition-duration: 1s;}
  .works-detail-pic-4 { clear: both; width: 600px; margin: 200px 0 0 0; border-radius: 30px; transition-duration: 1s; overflow: hidden;}
  .works-detail-pic-4 img { width: 100%; height: auto; transition-duration: 1s;}
  .works-detail-pic-5 { clear: both; width: 600px; margin: 20px 0 0 0; border-radius: 30px; transition-duration: 1s; overflow: hidden; float: right;}
  .works-detail-pic-5 img { width: 100%; height: auto; transition-duration: 1s;}
  .works-detail-pic-6 { clear: both; width: 600px; margin: 160px auto; border-radius: 30px; transition-duration: 1s; overflow: hidden;}
  .works-detail-pic-6 img { width: 100%; height: auto; transition-duration: 1s;}

  .page-works-more-bar { clear: both; width: 100%; overflow: hidden;}
  .page-works-more-bar a { width: 100%; padding: 30px 0; text-decoration: none; display: block;}
  .page-works-more-bar a img { width: 90px; height: auto; margin: 0 auto;}


  /************ section #news-list ************/

  section#page-news-list { clear: both; width: 100%; padding: 160px calc(50% - 640px) 80px calc(50% - 640px); box-sizing: border-box; background-color: #CACEC5;}

  section#page-news-list .page-news-title { width: 100%; margin: 0 0 180px 0; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.1em; text-align: center; position: relative; z-index: 3;}

  .page-news-list-full { clear: both; width: 96%; margin: 0 auto; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-news-list-full .news-list-box { width: calc(100% / 2 - 60px); margin: 0 30px 120px 30px;}
  .page-news-list-full .news-list-box a { color: #000; text-decoration: none;}
  .page-news-list-full .news-list-box .news-pic-mo { display: none;}
  .page-news-list-full .news-list-box .news-pic { width: 100%;}
  .page-news-list-full .news-list-box .news-pic img { width: 100%; height: auto; border-radius: 32px;}
  .page-news-list-full .news-list-box .news-title-arrow { width: 100%; margin: 30px 0 0 0; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-news-list-full .news-list-box .news-title-arrow .news-title { width: calc(100% - 70px); padding: 0 15px 0 0; color: #000; font-size: 1.2rem; font-weight: 600; box-sizing: border-box;}
  .page-news-list-full .news-list-box .news-title-arrow .news-arrow { width: 70px; padding: 15px 0 0 0;}
  .page-news-list-full .news-list-box .news-title-arrow .news-arrow img { width: 100%; height: auto;}

  ul#news-pages-num { clear: both; width: 100%; padding: 0; margin: 30px 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  ul#news-pages-num li { padding: 0 30px 20px 30px; margin: 0;}
  ul#news-pages-num li a { color: #000; font-size: 1.4rem; font-weight: 600; text-decoration: none; transition-duration: 0.5s;}
  ul#news-pages-num li a.arrow { font-size: 2.2rem;}
  ul#news-pages-num li a:hover { color: #fff;}


  /************ section #news-detail ************/

  section#page-news-detail { clear: both; width: 100%; padding: 160px 0 0 0; background-image: url("../images/news_detail_bg.jpg"); background-repeat: no-repeat; background-size: cover;}

  section#page-news-detail .page-news-title { width: 100%; margin: 0 0 160px 0; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.1em; text-align: center; position: relative; z-index: 3;}

  .page-news-detail-con-mo { display: none}
  .page-news-detail-con { clear: both; width: 100%; padding: 0 calc(50% - 640px + 3%) 80px calc(50% - 640px + 3%); box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-news-detail-con .column-left { width: 50%; padding: 0 25px 40px 0; box-sizing: border-box;}
  .page-news-detail-con .column-left .column-text-1 { width: 100%; padding: 0 80px 40px 0; color: #fff; font-size: 1.2rem; line-height: 1.8em; box-sizing: border-box;}
  .page-news-detail-con .column-left .column-text-1 .news-title { width: 100%; padding: 0 0 40px 0; font-size: 1.8rem; font-weight: 600; letter-spacing: 0.1em; line-height: 1.4em;}
  .page-news-detail-con .column-left .column-text-1 .news-type { width: 100%; padding: 0 0 80px 0; letter-spacing: 0.1em;}
  .page-news-detail-con .column-left .column-photo-3, 
  .page-news-detail-con .column-left .column-photo-5 { width: 100%; padding: 40px 0; box-sizing: border-box;}
  .page-news-detail-con .column-left .column-photo-3 img, 
  .page-news-detail-con .column-left .column-photo-5 img { width: 100%; height: auto; border-radius: 32px;}
  .page-news-detail-con .column-right { width: 50%; padding: 0 0 0 25px; margin: -30px 0 0 0; box-sizing: border-box;}
  .page-news-detail-con .column-right .column-photo-2, 
  .page-news-detail-con .column-right .column-photo-6 { width: 100%; padding: 40px 0; box-sizing: border-box;}
  .page-news-detail-con .column-right .column-photo-2 img, 
  .page-news-detail-con .column-right .column-photo-6 img { width: 100%; height: auto; border-radius: 32px;}
  .page-news-detail-con .column-right .column-text-4 { width: 100%; padding: 40px 0 40px 80px; color: #fff; font-size: 1.2rem; line-height: 1.8em; box-sizing: border-box;}
  
  .page-othernews-list { clear: both; width: 100%; padding: 120px calc(50% - 640px + 3%); box-sizing: border-box; background-color: #CBCDC9; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-othernews-list .news-list-box { width: calc(100% / 2 - 60px); margin: 0 30px;}
  .page-othernews-list .news-list-box a { color: #000; text-decoration: none;}
  .page-othernews-list .news-list-box .news-pic-mo { display: none;}
  .page-othernews-list .news-list-box .news-pic { width: 100%;}
  .page-othernews-list .news-list-box .news-pic img { width: 100%; height: auto; border-radius: 32px;}
  .page-othernews-list .news-list-box .news-title-arrow { width: 100%; margin: 30px 0 0 0; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-othernews-list .news-list-box .news-title-arrow .news-title { width: calc(100% - 70px); color: #000; font-size: 1.2rem; font-weight: 600;}
  .page-othernews-list .news-list-box .news-title-arrow .news-arrow { width: 70px; padding: 15px 0 0 0;}
  .page-othernews-list .news-list-box .news-title-arrow .news-arrow img { width: 100%; height: auto;}


  /************ footer ************/

  footer { clear: both; width: 100%; padding: 0 calc(50% - 640px); box-sizing: border-box; background: #181D23;}

  .footer-logo-contact { width: 80%; padding: 60px 0; margin: 0 auto; display: flex; justify-content: flex-start; align-items: center;}
  .footer-logo-contact .footer-logo { width: 74px;}
  .footer-logo-contact .footer-logo img { width: 100%; height: auto;}
  .footer-logo-contact .footer-contact { width: calc(100% - 70px);}
  .footer-logo-contact .footer-contact .footer-title { width: 100%; color: #fff; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.1em; text-align: right;}
  .footer-logo-contact .footer-social { width: 100%; margin: 40px 0 0 0; display: flex; justify-content: flex-end; align-items: center;}
  .footer-logo-contact .footer-social img { width: 28px; height: auto; margin: 0 0 0 40px;}

  .copyright-bar { clear: both; width: 100%; padding: 25px calc(50% - 640px); box-sizing: border-box; color: #fff; font-size: 0.8rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; text-align: center; background-color: #000;}


}

@media screen and (min-width: 1280px) and (max-width: 1369px) {

  /************ index show mp4 ************/
  #index-show-mp4 { width: 100%; height: 100%; background-color: #000; display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden;}
  #index-show-mp4 video { width: 100%; height: auto; position: relative; z-index: 1;}
  #index-show-mp4 .skip-icon { width: 90px; font-size: 1rem; font-weight: 500; text-align: center; cursor: pointer; position: absolute; bottom: 100px; left: calc(50% - 45px); z-index: 2;}
  #index-show-mp4 .skip-icon img { width: 100%; height: auto;}


  /************ header + nav ************/

  header#top-header { width: 100%; padding: 20px calc(50% - 580px) 0 calc(50% - 580px); box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; position: absolute; top: 0; left: 0; z-index: 9;}

  header#top-header .header-logo-bx { width: 50px;}
  header#top-header .header-logo-bx img { width: 100%; height: auto;}

  header#top-header nav { width: calc(100% - 50px); background: transparent !important; box-shadow: none; display: flex; justify-content: flex-end; align-items: center;}
  header#top-header nav .language-list { color: #fff; font-size: 1rem; letter-spacing: 0.1em;}
  header#top-header nav .language-list a { color: #fff; text-decoration: none;}
  header#top-header nav .language-list a:hover { border-bottom: 1px #fff solid;}
  header#top-header nav .language-list a.sel { border-bottom: 1px #fff solid;}
  header#top-header nav .language-list-page { color: #000; font-size: 1rem; letter-spacing: 0.1em;}
  header#top-header nav .language-list-page a { color: #000; text-decoration: none;}
  header#top-header nav .language-list-page a:hover { border-bottom: 1px #000 solid;}
  header#top-header nav .language-list-page a.sel { border-bottom: 1px #000 solid;}

  header#top-header nav .nav-icon { width: 30px; margin: 0 0 0 40px;}
  header#top-header nav .nav-icon img { width: 100%; height: auto; cursor: pointer;}

  .header-nav-list-box { width: 100%; height: 100%; padding: 20px calc(50% - 580px) 0 calc(50% - 580px); box-sizing: border-box; background-image: url("../images/header_nav_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: left top; position: absolute; top: 0; left: 0; z-index: 999; display: none;}
  .header-nav-list-box .top-bar { width: 100%; display: flex; justify-content: space-between; align-items: center;}
  .header-nav-list-box .top-bar .logo-box { width: 50px;}
  .header-nav-list-box .top-bar .logo-box img { width: 100%; height: auto;}
  .header-nav-list-box .top-bar .close-bt { color: #fff; display: flex; justify-content: flex-end; align-items: center; cursor: pointer;}
  .header-nav-list-box .top-bar .close-bt span { font-size: 1rem; letter-spacing: 0.2em;}
  .header-nav-list-box .top-bar .close-bt img { width: 16px; height: auto; margin: 0 0 0 20px;}
  .header-nav-list-box ul.menu-list { clear: both; width: 70%; padding: 40px 0; margin: 80px auto; list-style: none; display: block;}
  .header-nav-list-box ul.menu-list li { width: 100%; padding: 20px 0; margin: 0;}
  .header-nav-list-box ul.menu-list li a { height: 40px; color: rgba(255,255,255,0.5); font-size: 1.4rem; letter-spacing: 0.5em; text-decoration: none; display: block; transition: 1s;}
  .header-nav-list-box ul.menu-list li a:hover { color: #fff; font-size: 1.5rem; font-weight: 600;}


  /************ section #about ************/

  section#sec-about { width: 100%; padding: 160px calc(50% - 580px); box-sizing: border-box; position: relative; z-index: 2;}

  section#sec-about .sec-about-top-bg { width: 100%; height: 280px; background: linear-gradient(180deg, rgba(80, 71, 71, 0.7) 0%, rgba(255, 255, 255, 0) 100%); mix-blend-mode: multiply; display: block; position: absolute; top: 0; left: 0; z-index: 1;}

  section#sec-about .sec-about-slide { clear: both; width: 100%; padding: 0 0 180px 0; border-radius: 60px; overflow: hidden;}
  section#sec-about .sec-about-slide div { position: relative;}
  section#sec-about .sec-about-slide .pics-mo { display: none;}
  section#sec-about .sec-about-slide .pics { width: 100%; position: relative; z-index: 1;}
  section#sec-about .sec-about-slide .pics img { width: 100%; height: auto; border-radius: 60px; position: relative; z-index: 1;}
  section#sec-about .sec-about-slide img.text { width: 620px; height: auto; position: absolute; top: 180px; left: 70px; z-index: 2;}

  section#sec-about .sec-about-con-text { clear: both; width: 80%; margin: 180px auto 0 auto; display: flex; justify-content: flex-start; align-items: flex-start; position: relative; z-index: 3;}
  section#sec-about .sec-about-con-text .col-title { width: 200px; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.1em;}
  section#sec-about .sec-about-con-text .col-text { width: calc(100% - 200px); font-size: 1.2rem; font-weight: 500; line-height: 1.8em;}


  /************ section #works ************/

  section#sec-works { width: 100%; padding: 100px calc(50% - 580px); box-sizing: border-box; background-image: url("../images/sec_works_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top; overflow: hidden; position: relative; z-index: 1;}

  section#sec-works .sec-works-title { width: 80%; margin: 0 auto; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.1em;}

  section#sec-works .sec-works-list-slide { clear: both; width: 100%; padding: 0; margin: -160px 0 0 0; box-sizing: border-box; overflow: hidden;}

  section#sec-works .sec-works-more-bar { clear: both; width: 100%; margin: -180px 0 0 0; overflow: hidden;}
  section#sec-works .sec-works-more-bar a { width: 100%; padding: 30px 0; text-decoration: none; display: block;}
  section#sec-works .sec-works-more-bar a img { width: 90px; height: auto; margin: 0 auto;}


  /************ section #awards ************/

  section#sec-awards { width: 100%; padding: 160px calc(50% - 580px) 0 calc(50% - 580px); box-sizing: border-box; background-image: url("../images/sec_awards_bg.jpg"); background-repeat: no-repeat; background-size: 140% auto; background-position: left top; position: relative; z-index: 2;}

  section#sec-awards .sec-awards-title { width: 80%; margin: 0 auto; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.1em; position: relative; z-index: 3;}

  section#sec-awards #awards-list-pc { clear: both; width: 100%;}
  section#sec-awards #awards-list-mo { display: none;}

  section#sec-awards #awards-list-pc .sec-awards-brand-list-arrows { width: 120px; display: flex; justify-content: space-between; align-items: center; position: absolute; top: 160px; right: calc(50% - 512px); z-index: 99;}
  section#sec-awards #awards-list-pc .sec-awards-brand-list-arrows img.awards-arrow-prev, 
  section#sec-awards #awards-list-pc .sec-awards-brand-list-arrows img.awards-arrow-next { width: 16px; height: auto; cursor: pointer;}

  section#sec-awards #awards-list-pc .sec-awards-brand-list { clear: both; width: 1020px; margin: 100px auto 0 auto; overflow: hidden;}
  section#sec-awards #awards-list-pc .sec-awards-brand-list .brand-lis-box { width: calc(100% / 5); padding: 0 15px; box-sizing: border-box;}
  section#sec-awards #awards-list-pc .sec-awards-brand-list .brand-lis-box .brand-box { width: 100%; height: 250px; padding: 40px 0 0 0; border-radius: 100px 100px 0 0; background-color: #000; box-sizing: border-box;}
  section#sec-awards #awards-list-pc .sec-awards-brand-list .brand-lis-box .brand-box .brand-logo { width: 100%; height: 150px; display: flex; justify-content: center; align-items: center;}
  section#sec-awards #awards-list-pc .sec-awards-brand-list .brand-lis-box .brand-box .brand-logo img.style1 { width: 120px; height: auto;}
  section#sec-awards #awards-list-pc .sec-awards-brand-list .brand-lis-box .brand-box .brand-logo img.style2 { width: 120px; height: auto;}
  section#sec-awards #awards-list-pc .sec-awards-brand-list .brand-lis-box .brand-box .brand-year { width: 100%; color: #fff; font-size: 1.6rem; font-weight: 600; letter-spacing: 0.1em; text-align: center;}

  section#sec-awards img.sec-awards-pic-mo { display: none;}
  section#sec-awards img.sec-awards-pic { clear: both; width: 100%; margin: 80px 0 0 0; border-radius: 40px;}


  /************ section #news ************/

  section#sec-news { width: 100%; padding: 160px calc(50% - 580px); box-sizing: border-box; background-color: #ECEDEA; position: relative; z-index: 2;}

  section#sec-news .sec-news-title { width: 80%; margin: 0 auto; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.1em; text-align: center;}

  section#sec-news .sec-news-list { clear: both; width: 80%; margin: 60px auto 0 auto; display: flex; justify-content: flex-start; align-items: flex-start;}
  section#sec-news .sec-news-list .news-box { width: calc(100% / 4 - 30px); margin: 0 15px;}
  section#sec-news .sec-news-list .news-box a { width: 100%; color: #000; text-decoration: none; display: block;}
  section#sec-news .sec-news-list .news-box a img.news-pic-mo { display: none;}
  section#sec-news .sec-news-list .news-box a img.news-pic-pc { width: 100%; height: auto; border-radius: 30px;}
  section#sec-news .sec-news-list .news-box a .news-title { clear: both; width: 100%; padding: 10px 0 0 0; font-size: 1.2rem; font-weight: 600; text-align: center;}

  section#sec-news .sec-news-more-bar { clear: both; width: 100%; overflow: hidden;}
  section#sec-news .sec-news-more-bar a { width: 100%; padding: 30px 0; text-decoration: none; display: block;}
  section#sec-news .sec-news-more-bar a img { width: 90px; height: auto; margin: 0 auto;}


  /************ section #works-list ************/

  section#page-works-list { clear: both; width: 100%; padding: 160px calc(50% - 580px); box-sizing: border-box; background-color: #DCDED9;}

  section#page-works-list .page-works-title { width: 100%; margin: 0 0 160px 0; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.1em; text-align: center; position: relative; z-index: 3;}

  .works-list-pic-1 { width: 540px; border-radius: 30px; transition-duration: 1s; overflow: hidden;}
  .works-list-pic-1:hover { border-radius: 140px 20px 20px 140px;}
  .works-list-pic-1 img { width: 100%; height: auto; transition-duration: 1s;}
  .works-list-pic-1 img:hover { width: 110%; height: auto; margin: -2.5% 0 0 -2.5%;}  
  .works-list-pic-2 { clear: both; width: 540px; margin: -60px 0 0 0; border-radius: 30px; transition-duration: 1s; overflow: hidden; float: right;}
  .works-list-pic-2:hover { border-radius: 20px 140px 140px 20px;}
  .works-list-pic-2 img {width: 100%; height: auto; transition-duration: 1s;}
  .works-list-pic-2 img:hover { width: 110%; height: auto; margin: -2.5% 0 0 -2.5%;}
  .works-list-pic-3 { clear: both; width: 540px; margin: 200px auto; border-radius: 30px; transition-duration: 1s; overflow: hidden;}
  .works-list-pic-3:hover { border-radius: 140px 140px 20px 20px;}
  .works-list-pic-3 img { width: 100%; height: auto; transition-duration: 1s;}
  .works-list-pic-3 img:hover { width: 110%; height: auto; margin: -2.5% 0 0 -2.5%;}
  .works-list-pic-4 { clear: both; width: 540px; margin: 200px 0 0 0; border-radius: 30px; transition-duration: 1s; overflow: hidden;}
  .works-list-pic-4:hover { border-radius: 140px 20px 20px 140px;}
  .works-list-pic-4 img { width: 100%; height: auto; transition-duration: 1s;}
  .works-list-pic-4 img:hover { width: 110%; height: auto; margin: -2.5% 0 0 -2.5%;}
  .works-list-pic-5 { clear: both; width: 540px; margin: 20px 0 0 0; border-radius: 30px; transition-duration: 1s; overflow: hidden; float: right;}
  .works-list-pic-5:hover { border-radius: 20px 140px 140px 20px;}
  .works-list-pic-5 img { width: 100%; height: auto; transition-duration: 1s;}
  .works-list-pic-5 img:hover { width: 110%; height: auto; margin: -2.5% 0 0 -2.5%;}
  .works-list-pic-6 { clear: both; width: 540px; margin: 160px auto; border-radius: 30px; transition-duration: 1s; overflow: hidden;}
  .works-list-pic-6:hover { border-radius: 140px 140px 20px 20px;}
  .works-list-pic-6 img { width: 100%; height: auto; transition-duration: 1s;}
  .works-list-pic-6 img:hover { width: 110%; height: auto; margin: -2.5% 0 0 -2.5%;}


  /************ section #works-detail ************/

  section#page-works-detail { clear: both; width: 100%; padding: 160px calc(50% - 580px); box-sizing: border-box; background-color: #DCDED9;}

  section#page-works-detail .page-works-title { width: 100%; margin: 0 0 160px 0; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.1em; text-align: center; position: relative; z-index: 3;}

  .works-detail-pic-1 { width: 540px; border-radius: 30px; transition-duration: 1s; overflow: hidden;}
  .works-detail-pic-1 img { width: 100%; height: auto; transition-duration: 1s;}
  .works-detail-pic-2 { clear: both; width: 540px; margin: -60px 0 0 0; border-radius: 30px; transition-duration: 1s; overflow: hidden; float: right;}
  .works-detail-pic-2 img {width: 100%; height: auto; transition-duration: 1s;}
  .works-detail-pic-3 { clear: both; width: 540px; margin: 200px auto; border-radius: 30px; transition-duration: 1s; overflow: hidden;}
  .works-detail-pic-3 img { width: 100%; height: auto; transition-duration: 1s;}
  .works-detail-pic-4 { clear: both; width: 540px; margin: 200px 0 0 0; border-radius: 30px; transition-duration: 1s; overflow: hidden;}
  .works-detail-pic-4 img { width: 100%; height: auto; transition-duration: 1s;}
  .works-detail-pic-5 { clear: both; width: 540px; margin: 20px 0 0 0; border-radius: 30px; transition-duration: 1s; overflow: hidden; float: right;}
  .works-detail-pic-5 img { width: 100%; height: auto; transition-duration: 1s;}
  .works-detail-pic-6 { clear: both; width: 540px; margin: 160px auto; border-radius: 30px; transition-duration: 1s; overflow: hidden;}
  .works-detail-pic-6 img { width: 100%; height: auto; transition-duration: 1s;}

  .page-works-more-bar { clear: both; width: 100%; overflow: hidden;}
  .page-works-more-bar a { width: 100%; padding: 30px 0; text-decoration: none; display: block;}
  .page-works-more-bar a img { width: 90px; height: auto; margin: 0 auto;}


  /************ section #news-list ************/

  section#page-news-list { clear: both; width: 100%; padding: 160px calc(50% - 580px) 80px calc(50% - 580px); box-sizing: border-box; background-color: #CACEC5;}

  section#page-news-list .page-news-title { width: 100%; margin: 0 0 160px 0; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.1em; text-align: center; position: relative; z-index: 3;}

  .page-news-list-full { clear: both; width: 96%; margin: 0 auto; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-news-list-full .news-list-box { width: calc(100% / 2 - 60px); margin: 0 30px 120px 30px;}
  .page-news-list-full .news-list-box a { color: #000; text-decoration: none;}
  .page-news-list-full .news-list-box .news-pic-mo { display: none;}
  .page-news-list-full .news-list-box .news-pic { width: 100%;}
  .page-news-list-full .news-list-box .news-pic img { width: 100%; height: auto; border-radius: 32px;}
  .page-news-list-full .news-list-box .news-title-arrow { width: 100%; margin: 30px 0 0 0; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-news-list-full .news-list-box .news-title-arrow .news-title { width: calc(100% - 70px); padding: 0 15px 0 0; color: #000; font-size: 1.2rem; font-weight: 600; box-sizing: border-box;}
  .page-news-list-full .news-list-box .news-title-arrow .news-arrow { width: 70px; padding: 15px 0 0 0;}
  .page-news-list-full .news-list-box .news-title-arrow .news-arrow img { width: 100%; height: auto;}

  ul#news-pages-num { clear: both; width: 100%; padding: 0; margin: 30px 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  ul#news-pages-num li { padding: 0 30px 20px 30px; margin: 0;}
  ul#news-pages-num li a { color: #000; font-size: 1.4rem; font-weight: 600; text-decoration: none; transition-duration: 0.5s;}
  ul#news-pages-num li a.arrow { font-size: 2.2rem;}
  ul#news-pages-num li a:hover { color: #fff;}


  /************ section #news-detail ************/

  section#page-news-detail { clear: both; width: 100%; padding: 160px 0 0 0; background-image: url("../images/news_detail_bg.jpg"); background-repeat: no-repeat; background-size: cover;}

  section#page-news-detail .page-news-title { width: 100%; margin: 0 0 160px 0; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.1em; text-align: center; position: relative; z-index: 3;}

  .page-news-detail-con-mo { display: none}
  .page-news-detail-con { clear: both; width: 100%; padding: 0 calc(50% - 580px + 3%) 80px calc(50% - 580px + 3%); box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-news-detail-con .column-left { width: 50%; padding: 0 25px 40px 0; box-sizing: border-box;}
  .page-news-detail-con .column-left .column-text-1 { width: 100%; padding: 0 80px 40px 0; color: #fff; font-size: 1.2rem; line-height: 1.8em; box-sizing: border-box;}
  .page-news-detail-con .column-left .column-text-1 .news-title { width: 100%; padding: 0 0 40px 0; font-size: 1.8rem; font-weight: 600; letter-spacing: 0.1em; line-height: 1.4em;}
  .page-news-detail-con .column-left .column-text-1 .news-type { width: 100%; padding: 0 0 80px 0; letter-spacing: 0.1em;}
  .page-news-detail-con .column-left .column-photo-3, 
  .page-news-detail-con .column-left .column-photo-5 { width: 100%; padding: 40px 0; box-sizing: border-box;}
  .page-news-detail-con .column-left .column-photo-3 img, 
  .page-news-detail-con .column-left .column-photo-5 img { width: 100%; height: auto; border-radius: 32px;}
  .page-news-detail-con .column-right { width: 50%; padding: 0 0 0 25px; margin: -30px 0 0 0; box-sizing: border-box;}
  .page-news-detail-con .column-right .column-photo-2, 
  .page-news-detail-con .column-right .column-photo-6 { width: 100%; padding: 40px 0; box-sizing: border-box;}
  .page-news-detail-con .column-right .column-photo-2 img, 
  .page-news-detail-con .column-right .column-photo-6 img { width: 100%; height: auto; border-radius: 32px;}
  .page-news-detail-con .column-right .column-text-4 { width: 100%; padding: 40px 0 40px 80px; color: #fff; font-size: 1.2rem; line-height: 1.8em; box-sizing: border-box;}
  
  .page-othernews-list { clear: both; width: 100%; padding: 120px calc(50% - 580px + 3%); box-sizing: border-box; background-color: #CBCDC9; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-othernews-list .news-list-box { width: calc(100% / 2 - 60px); margin: 0 30px;}
  .page-othernews-list .news-list-box a { color: #000; text-decoration: none;}
  .page-othernews-list .news-list-box .news-pic-mo { display: none;}
  .page-othernews-list .news-list-box .news-pic { width: 100%;}
  .page-othernews-list .news-list-box .news-pic img { width: 100%; height: auto; border-radius: 32px;}
  .page-othernews-list .news-list-box .news-title-arrow { width: 100%; margin: 30px 0 0 0; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-othernews-list .news-list-box .news-title-arrow .news-title { width: calc(100% - 70px); color: #000; font-size: 1.2rem; font-weight: 600;}
  .page-othernews-list .news-list-box .news-title-arrow .news-arrow { width: 70px; padding: 15px 0 0 0;}
  .page-othernews-list .news-list-box .news-title-arrow .news-arrow img { width: 100%; height: auto;}


  /************ footer ************/

  footer { clear: both; width: 100%; padding: 0 calc(50% - 580px); box-sizing: border-box; background: #181D23;}

  .footer-logo-contact { width: 80%; padding: 60px 0; margin: 0 auto; display: flex; justify-content: flex-start; align-items: center;}
  .footer-logo-contact .footer-logo { width: 74px;}
  .footer-logo-contact .footer-logo img { width: 100%; height: auto;}
  .footer-logo-contact .footer-contact { width: calc(100% - 70px);}
  .footer-logo-contact .footer-contact .footer-title { width: 100%; color: #fff; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.1em; text-align: right;}
  .footer-logo-contact .footer-social { width: 100%; margin: 40px 0 0 0; display: flex; justify-content: flex-end; align-items: center;}
  .footer-logo-contact .footer-social img { width: 28px; height: auto; margin: 0 0 0 40px;}

  .copyright-bar { clear: both; width: 100%; padding: 25px calc(50% - 580px); box-sizing: border-box; color: #fff; font-size: 0.8rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; text-align: center; background-color: #000;}


}

@media screen and (min-width: 768px) and (max-width: 1279px) {

  /************ index show mp4 ************/
  #index-show-mp4 { width: 100%; height: 100%; background-color: #000; display: flex; justify-content: center; align-items: center; overflow: hidden; position: fixed; top: 0; left: 0; z-index: 9999999;}
  #index-show-mp4 video { width: auto; height: 100%;}


  /************ header + nav ************/

  header#top-header { width: 100%; padding: 20px 40px 0 40px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; position: absolute; top: 0; left: 0; z-index: 9;}

  header#top-header .header-logo-bx { width: 50px;}
  header#top-header .header-logo-bx img { width: 100%; height: auto;}

  header#top-header nav { width: calc(100% - 50px); background: transparent !important; box-shadow: none; display: flex; justify-content: flex-end; align-items: center;}
  header#top-header nav .language-list { color: #fff; font-size: 1rem; letter-spacing: 0.1em;}
  header#top-header nav .language-list a { color: #fff; text-decoration: none;}
  header#top-header nav .language-list a:hover { border-bottom: 1px #fff solid;}
  header#top-header nav .language-list a.sel { border-bottom: 1px #fff solid;}
  header#top-header nav .language-list-page { color: #000; font-size: 1rem; letter-spacing: 0.1em;}
  header#top-header nav .language-list-page a { color: #000; text-decoration: none;}
  header#top-header nav .language-list-page a:hover { border-bottom: 1px #000 solid;}
  header#top-header nav .language-list-page a.sel { border-bottom: 1px #000 solid;}

  header#top-header nav .nav-icon { width: 30px; margin: 0 0 0 40px;}
  header#top-header nav .nav-icon img { width: 100%; height: auto; cursor: pointer;}

  .header-nav-list-box { width: 100%; height: 100%; padding: 20px 40px 0 40px; box-sizing: border-box; background-image: url("../images/header_nav_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center top; position: absolute; top: 0; left: 0; z-index: 999; display: none;}
  .header-nav-list-box .top-bar { width: 100%; display: flex; justify-content: space-between; align-items: center;}
  .header-nav-list-box .top-bar .logo-box { width: 50px;}
  .header-nav-list-box .top-bar .logo-box img { width: 100%; height: auto;}
  .header-nav-list-box .top-bar .close-bt { color: #fff; display: flex; justify-content: flex-end; align-items: center; cursor: pointer;}
  .header-nav-list-box .top-bar .close-bt span { font-size: 1rem; letter-spacing: 0.2em;}
  .header-nav-list-box .top-bar .close-bt img { width: 16px; height: auto; margin: 0 0 0 20px;}
  .header-nav-list-box ul.menu-list { clear: both; width: 70%; padding: 40px 0; margin: 80px auto; list-style: none; display: block;}
  .header-nav-list-box ul.menu-list li { width: 100%; padding: 20px 0; margin: 0;}
  .header-nav-list-box ul.menu-list li a { height: 40px; color: rgba(255,255,255,0.5); font-size: 1.4rem; letter-spacing: 0.5em; text-decoration: none; display: block; transition: 1s;}
  .header-nav-list-box ul.menu-list li a:hover { color: #fff; font-size: 1.5rem; font-weight: 600;}


  /************ section #about ************/

  section#sec-about { width: 100%; padding: 160px 40px; box-sizing: border-box; position: relative; z-index: 2;}

  section#sec-about .sec-about-top-bg { width: 100%; height: 280px; background: linear-gradient(180deg, rgba(80, 71, 71, 0.7) 0%, rgba(255, 255, 255, 0) 100%); mix-blend-mode: multiply; display: block; position: absolute; top: 0; left: 0; z-index: 1;}

  section#sec-about .sec-about-slide { clear: both; width: 100%; padding: 0 0 8.5vw 0; border-radius: 5vw; overflow: hidden;}
  section#sec-about .sec-about-slide div { position: relative;}
  section#sec-about .sec-about-slide .pics-mo { display: none;}
  section#sec-about .sec-about-slide .pics { width: 100%; position: relative; z-index: 1;}
  section#sec-about .sec-about-slide .pics img { width: 100%; height: auto; border-radius: 5vw; position: relative; z-index: 1;}
  section#sec-about .sec-about-slide img.text { width: 48vw; height: auto; position: absolute; top: 14vw; left: 6vw; z-index: 2;}

  section#sec-about .sec-about-con-text { clear: both; width: 100%; margin: 160px auto 0 auto; display: flex; justify-content: flex-start; align-items: flex-start; position: relative; z-index: 3;}
  section#sec-about .sec-about-con-text .col-title { width: 160px; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.1em;}
  section#sec-about .sec-about-con-text .col-text { width: calc(100% - 160px); font-size: 1.2rem; font-weight: 500; line-height: 1.8em;}


  /************ section #works ************/

  section#sec-works { width: 100%; padding: 100px 40px; box-sizing: border-box; background-image: url("../images/sec_works_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top; overflow: hidden; position: relative; z-index: 1;}

  section#sec-works .sec-works-title { width: 100%; margin: 0 auto; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.1em;}

  section#sec-works .sec-works-list-slide { clear: both; width: 100%; padding: 0; margin: -100px 0 0 0; box-sizing: border-box; overflow: hidden;}

  section#sec-works .sec-works-more-bar { clear: both; width: 100%; margin: -180px 0 0 0; overflow: hidden;}
  section#sec-works .sec-works-more-bar a { width: 100%; padding: 30px 0; text-decoration: none; display: block;}
  section#sec-works .sec-works-more-bar a img { width: 90px; height: auto; margin: 0 auto;}


  /************ section #awards ************/

  section#sec-awards { width: 100%; padding: 160px 40px 0 40px; box-sizing: border-box; background-image: url("../images/sec_awards_bg.jpg"); background-repeat: no-repeat; background-size: 180% auto; background-position: left top; position: relative; z-index: 2;}

  section#sec-awards .sec-awards-title { width: 80%; margin: 0 auto; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.1em; position: relative; z-index: 3;}

  section#sec-awards #awards-list-pc { clear: both; width: 100%;}
  section#sec-awards #awards-list-mo { display: none;}

  section#sec-awards #awards-list-pc .sec-awards-brand-list-arrows { width: 120px; display: flex; justify-content: space-between; align-items: center; position: absolute; top: 160px; right: calc(50% - 40%); z-index: 99;}
  section#sec-awards #awards-list-pc .sec-awards-brand-list-arrows img.awards-arrow-prev, 
  section#sec-awards #awards-list-pc .sec-awards-brand-list-arrows img.awards-arrow-next { width: 16px; height: auto; cursor: pointer;}

  section#sec-awards #awards-list-pc .sec-awards-brand-list { clear: both; width: 90%; margin: 100px auto 0 auto; overflow: hidden;}
  section#sec-awards #awards-list-pc .sec-awards-brand-list .brand-lis-box { width: calc(100% / 3); padding: 0 1.5vw; box-sizing: border-box;}
  section#sec-awards #awards-list-pc .sec-awards-brand-list .brand-lis-box .brand-box { width: 100%; height: 23vw; padding: 2vw 0 0 0; border-radius: 8vw 8vw 0 0; background-color: #000; box-sizing: border-box;}
  section#sec-awards #awards-list-pc .sec-awards-brand-list .brand-lis-box .brand-box .brand-logo { width: 100%; height: 15.5vw; display: flex; justify-content: center; align-items: center;}
  section#sec-awards #awards-list-pc .sec-awards-brand-list .brand-lis-box .brand-box .brand-logo img.style1 { width: 11vw; height: auto;}
  section#sec-awards #awards-list-pc .sec-awards-brand-list .brand-lis-box .brand-box .brand-logo img.style2 { width: 11vw; height: auto;}
  section#sec-awards #awards-list-pc .sec-awards-brand-list .brand-lis-box .brand-box .brand-year { width: 100%; color: #fff; font-size: 3vw; font-weight: 600; letter-spacing: 0.1em; text-align: center;}


  section#sec-awards img.sec-awards-pic-mo { display: none;}
  section#sec-awards img.sec-awards-pic { clear: both; width: 100%; margin: 60px 0 0 0; border-radius: 40px;}


  /************ section #news ************/

  section#sec-news { width: 100%; padding: 160px 40px; box-sizing: border-box; background-color: #ECEDEA; position: relative; z-index: 2;}

  section#sec-news .sec-news-title { width: 80%; margin: 0 auto; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.1em; text-align: center;}

  section#sec-news .sec-news-list { clear: both; width: 100%; margin: 60px auto 0 auto; display: flex; justify-content: flex-start; align-items: flex-start;}
  section#sec-news .sec-news-list .news-box { width: calc(100% / 4 - 30px); margin: 0 15px;}
  section#sec-news .sec-news-list .news-box a { width: 100%; color: #000; text-decoration: none; display: block;}
  section#sec-news .sec-news-list .news-box a img.news-pic-mo { display: none;}
  section#sec-news .sec-news-list .news-box a img.news-pic-pc { width: 100%; height: auto; border-radius: 30px;}
  section#sec-news .sec-news-list .news-box a .news-title { clear: both; width: 100%; padding: 10px 0 0 0; font-size: 1.2rem; font-weight: 600; text-align: center;}

  section#sec-news .sec-news-more-bar { clear: both; width: 100%; overflow: hidden;}
  section#sec-news .sec-news-more-bar a { width: 100%; padding: 30px 0; text-decoration: none; display: block;}
  section#sec-news .sec-news-more-bar a img { width: 90px; height: auto; margin: 0 auto;}


  /************ section #works-list ************/

  section#page-works-list { clear: both; width: 100%; padding: 160px 40px; box-sizing: border-box; background-color: #DCDED9;}

  section#page-works-list .page-works-title { width: 100%; margin: 0 0 160px 0; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.1em; text-align: center; position: relative; z-index: 3;}

  .works-list-pic-1 { width: 40vw; border-radius: 30px; transition-duration: 1s; overflow: hidden;}
  .works-list-pic-1:hover { border-radius: 140px 20px 20px 140px;}
  .works-list-pic-1 img { width: 100%; height: auto; transition-duration: 1s;}
  .works-list-pic-1 img:hover { width: 110%; height: auto; margin: -2.5% 0 0 -2.5%;}  
  .works-list-pic-2 { clear: both; width: 40vw; margin: -5vw 0 0 0; border-radius: 30px; transition-duration: 1s; overflow: hidden; float: right;}
  .works-list-pic-2:hover { border-radius: 20px 140px 140px 20px;}
  .works-list-pic-2 img {width: 100%; height: auto; transition-duration: 1s;}
  .works-list-pic-2 img:hover { width: 110%; height: auto; margin: -2.5% 0 0 -2.5%;}
  .works-list-pic-3 { clear: both; width: 40vw; margin: 16vw auto; border-radius: 30px; transition-duration: 1s; overflow: hidden;}
  .works-list-pic-3:hover { border-radius: 140px 140px 20px 20px;}
  .works-list-pic-3 img { width: 100%; height: auto; transition-duration: 1s;}
  .works-list-pic-3 img:hover { width: 110%; height: auto; margin: -2.5% 0 0 -2.5%;}
  .works-list-pic-4 { clear: both; width: 40vw; margin: 0 0 0 0; border-radius: 30px; transition-duration: 1s; overflow: hidden;}
  .works-list-pic-4:hover { border-radius: 140px 20px 20px 140px;}
  .works-list-pic-4 img { width: 100%; height: auto; transition-duration: 1s;}
  .works-list-pic-4 img:hover { width: 110%; height: auto; margin: -2.5% 0 0 -2.5%;}
  .works-list-pic-5 { clear: both; width: 40vw; margin: 2vw 0 0 0; border-radius: 30px; transition-duration: 1s; overflow: hidden; float: right;}
  .works-list-pic-5:hover { border-radius: 20px 140px 140px 20px;}
  .works-list-pic-5 img { width: 100%; height: auto; transition-duration: 1s;}
  .works-list-pic-5 img:hover { width: 110%; height: auto; margin: -2.5% 0 0 -2.5%;}
  .works-list-pic-6 { clear: both; width: 40vw; margin: 12vw auto; border-radius: 30px; transition-duration: 1s; overflow: hidden;}
  .works-list-pic-6:hover { border-radius: 140px 140px 20px 20px;}
  .works-list-pic-6 img { width: 100%; height: auto; transition-duration: 1s;}
  .works-list-pic-6 img:hover { width: 110%; height: auto; margin: -2.5% 0 0 -2.5%;}


  /************ section #works-detail ************/

  section#page-works-detail { clear: both; width: 100%; padding: 160px 40px; box-sizing: border-box; background-color: #DCDED9;}

  section#page-works-detail .page-works-title { width: 100%; margin: 0 0 160px 0; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.1em; text-align: center; position: relative; z-index: 3;}

  .works-detail-pic-1 { width: 40vw; border-radius: 30px; transition-duration: 1s; overflow: hidden;}
  .works-detail-pic-1 img { width: 100%; height: auto; transition-duration: 1s;}
  .works-detail-pic-2 { clear: both; width: 40vw; margin: -5vw 0 0 0; border-radius: 30px; transition-duration: 1s; overflow: hidden; float: right;}
  .works-detail-pic-2 img {width: 100%; height: auto; transition-duration: 1s;}
  .works-detail-pic-3 { clear: both; width: 40vw; margin: 16vw auto; border-radius: 30px; transition-duration: 1s; overflow: hidden;}
  .works-detail-pic-3 img { width: 100%; height: auto; transition-duration: 1s;}
  .works-detail-pic-4 { clear: both; width: 40vw; margin: 0 0 0 0; border-radius: 30px; transition-duration: 1s; overflow: hidden;}
  .works-detail-pic-4 img { width: 100%; height: auto; transition-duration: 1s;}
  .works-detail-pic-5 { clear: both; width: 40vw; margin: 2vw 0 0 0; border-radius: 30px; transition-duration: 1s; overflow: hidden; float: right;}
  .works-detail-pic-5 img { width: 100%; height: auto; transition-duration: 1s;}
  .works-detail-pic-6 { clear: both; width: 40vw; margin: 12vw auto; border-radius: 30px; transition-duration: 1s; overflow: hidden;}
  .works-detail-pic-6 img { width: 100%; height: auto; transition-duration: 1s;}

  .page-works-more-bar { clear: both; width: 100%; overflow: hidden;}
  .page-works-more-bar a { width: 100%; padding: 30px 0; text-decoration: none; display: block;}
  .page-works-more-bar a img { width: 90px; height: auto; margin: 0 auto;}


  /************ section #news-list ************/

  section#page-news-list { clear: both; width: 100%; padding: 160px 40px 80px 40px; box-sizing: border-box; background-color: #CACEC5;}

  section#page-news-list .page-news-title { width: 100%; margin: 0 0 160px 0; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.1em; text-align: center; position: relative; z-index: 3;}

  .page-news-list-full { clear: both; width: 100%; margin: 0 auto; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-news-list-full .news-list-box { width: calc(100% / 2 - 30px); margin: 0 15px 120px 15px;}
  .page-news-list-full .news-list-box a { color: #000; text-decoration: none;}
  .page-news-list-full .news-list-box .news-pic-mo { display: none;}
  .page-news-list-full .news-list-box .news-pic { width: 100%;}
  .page-news-list-full .news-list-box .news-pic img { width: 100%; height: auto; border-radius: 32px;}
  .page-news-list-full .news-list-box .news-title-arrow { width: 100%; margin: 30px 0 0 0; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-news-list-full .news-list-box .news-title-arrow .news-title { width: calc(100% - 70px); padding: 0 15px 0 0; color: #000; font-size: 1.2rem; font-weight: 600; box-sizing: border-box;}
  .page-news-list-full .news-list-box .news-title-arrow .news-arrow { width: 70px; padding: 15px 0 0 0;}
  .page-news-list-full .news-list-box .news-title-arrow .news-arrow img { width: 100%; height: auto;}

  ul#news-pages-num { clear: both; width: 100%; padding: 0; margin: 30px 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  ul#news-pages-num li { padding: 0 30px 20px 30px; margin: 0; transition-duration: 0.5s;}
  ul#news-pages-num li a { color: #000; font-size: 1.4rem; font-weight: 600; text-decoration: none; transition-duration: 0.5s;}
  ul#news-pages-num li a.arrow { font-size: 2.2rem;}
  ul#news-pages-num li a:hover { color: #fff;}


  /************ section #news-detail ************/

  section#page-news-detail { clear: both; width: 100%; padding: 160px 0 0 0; background-image: url("../images/news_detail_bg.jpg"); background-repeat: no-repeat; background-size: cover;}

  section#page-news-detail .page-news-title { width: 100%; margin: 0 0 160px 0; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.1em; text-align: center; position: relative; z-index: 3;}

  .page-news-detail-con-mo { display: none}
  .page-news-detail-con { clear: both; width: 100%; padding: 0 40px 80px 40px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-news-detail-con .column-left { width: 50%; padding: 0 25px 40px 0; box-sizing: border-box;}
  .page-news-detail-con .column-left .column-text-1 { width: 100%; padding: 0 40px 40px 0; color: #fff; font-size: 1.2rem; line-height: 1.8em; box-sizing: border-box;}
  .page-news-detail-con .column-left .column-text-1 .news-title { width: 100%; padding: 0 0 40px 0; font-size: 1.8rem; font-weight: 600; letter-spacing: 0.1em; line-height: 1.4em;}
  .page-news-detail-con .column-left .column-text-1 .news-type { width: 100%; padding: 0 0 40px 0; letter-spacing: 0.1em;}
  .page-news-detail-con .column-left .column-photo-3, 
  .page-news-detail-con .column-left .column-photo-5 { width: 100%; padding: 40px 0; box-sizing: border-box;}
  .page-news-detail-con .column-left .column-photo-3 img, 
  .page-news-detail-con .column-left .column-photo-5 img { width: 100%; height: auto; border-radius: 32px;}
  .page-news-detail-con .column-right { width: 50%; padding: 0 0 0 25px; margin: -30px 0 0 0; box-sizing: border-box;}
  .page-news-detail-con .column-right .column-photo-2, 
  .page-news-detail-con .column-right .column-photo-6 { width: 100%; padding: 40px 0; box-sizing: border-box;}
  .page-news-detail-con .column-right .column-photo-2 img, 
  .page-news-detail-con .column-right .column-photo-6 img { width: 100%; height: auto; border-radius: 32px;}
  .page-news-detail-con .column-right .column-text-4 { width: 100%; padding: 40px 0 40px 40px; color: #fff; font-size: 1.2rem; line-height: 1.8em; box-sizing: border-box;}
  
  .page-othernews-list { clear: both; width: 100%; padding: 120px 40px; box-sizing: border-box; background-color: #CBCDC9; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-othernews-list .news-list-box { width: calc(100% / 2 - 30px); margin: 0 15px;}
  .page-othernews-list .news-list-box a { color: #000; text-decoration: none;}
  .page-othernews-list .news-list-box .news-pic-mo { display: none;}
  .page-othernews-list .news-list-box .news-pic { width: 100%;}
  .page-othernews-list .news-list-box .news-pic img { width: 100%; height: auto; border-radius: 32px;}
  .page-othernews-list .news-list-box .news-title-arrow { width: 100%; margin: 30px 0 0 0; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-othernews-list .news-list-box .news-title-arrow .news-title { width: calc(100% - 70px); color: #000; font-size: 1.2rem; font-weight: 600;}
  .page-othernews-list .news-list-box .news-title-arrow .news-arrow { width: 70px; padding: 15px 0 0 0;}
  .page-othernews-list .news-list-box .news-title-arrow .news-arrow img { width: 100%; height: auto;}


  /************ footer ************/

  footer { clear: both; width: 100%; padding: 0 40px; box-sizing: border-box; background: #181D23;}

  .footer-logo-contact { width: 100%; padding: 60px 0; margin: 0 auto; display: flex; justify-content: flex-start; align-items: center;}
  .footer-logo-contact .footer-logo { width: 74px;}
  .footer-logo-contact .footer-logo img { width: 100%; height: auto;}
  .footer-logo-contact .footer-contact { width: calc(100% - 70px);}
  .footer-logo-contact .footer-contact .footer-title { width: 100%; color: #fff; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.1em; text-align: right;}
  .footer-logo-contact .footer-social { width: 100%; margin: 40px 0 0 0; display: flex; justify-content: flex-end; align-items: center;}
  .footer-logo-contact .footer-social img { width: 28px; height: auto; margin: 0 0 0 40px;}

  .copyright-bar { clear: both; width: 100%; padding: 25px 40px; box-sizing: border-box; color: #fff; font-size: 0.8rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; text-align: center; background-color: #000;}


}

@media screen and (max-width: 767px) {

  /************ index show mp4 ************/
  #index-show-mp4 { width: 100%; height: 100%; background-color: #000; display: flex; justify-content: center; align-items: center; overflow: hidden; position: fixed; top: 0; left: 0; z-index: 9999999;}
  #index-show-mp4 video { width: auto; height: 100%;}
  

  /************ header + nav ************/

  header#top-header { width: 100%; padding: 20px 20px 0 20px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; position: absolute; top: 0; left: 0; z-index: 9;}

  header#top-header .header-logo-bx { width: 50px;}
  header#top-header .header-logo-bx img { width: 100%; height: auto;}

  header#top-header nav { width: calc(100% - 50px); background: transparent !important; box-shadow: none; display: flex; justify-content: flex-end; align-items: center;}
  header#top-header nav .language-list { color: #fff; font-size: 1rem; letter-spacing: 0.1em;}
  header#top-header nav .language-list a { color: #fff; text-decoration: none;}
  header#top-header nav .language-list a:hover { border-bottom: 1px #fff solid;}
  header#top-header nav .language-list a.sel { border-bottom: 1px #fff solid;}
  header#top-header nav .language-list-page { color: #000; font-size: 1rem; letter-spacing: 0.1em;}
  header#top-header nav .language-list-page a { color: #000; text-decoration: none;}
  header#top-header nav .language-list-page a:hover { border-bottom: 1px #000 solid;}
  header#top-header nav .language-list-page a.sel { border-bottom: 1px #000 solid;}

  header#top-header nav .nav-icon { width: 30px; margin: 0 0 0 40px;}
  header#top-header nav .nav-icon img { width: 100%; height: auto; cursor: pointer;}

  .header-nav-list-box { width: 100%; height: 100%; padding: 20px 20px 0 20px; box-sizing: border-box; background-image: url("../images/header_nav_bg_mo.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center top; position: absolute; top: 0; left: 0; z-index: 999; display: none;}
  .header-nav-list-box .top-bar { width: 100%; display: flex; justify-content: space-between; align-items: center;}
  .header-nav-list-box .top-bar .logo-box { width: 50px;}
  .header-nav-list-box .top-bar .logo-box img { width: 100%; height: auto;}
  .header-nav-list-box .top-bar .close-bt { color: #fff; display: flex; justify-content: flex-end; align-items: center; cursor: pointer;}
  .header-nav-list-box .top-bar .close-bt span { font-size: 1rem; letter-spacing: 0.2em;}
  .header-nav-list-box .top-bar .close-bt img { width: 16px; height: auto; margin: 0 0 0 20px;}
  .header-nav-list-box ul.menu-list { clear: both; width: 70%; padding: 40px 0; margin: 80px auto; list-style: none; display: block;}
  .header-nav-list-box ul.menu-list li { width: 100%; padding: 20px 0; margin: 0;}
  .header-nav-list-box ul.menu-list li a { height: 40px; color: rgba(255,255,255,0.5); font-size: 1.4rem; letter-spacing: 0.5em; text-decoration: none; display: block; transition: 1s;}
  .header-nav-list-box ul.menu-list li a:hover { color: #fff; font-size: 1.5rem; font-weight: 600;}


  /************ section #about ************/

  section#sec-about { width: 100%; padding: 160px 20px 100px 20px; box-sizing: border-box; position: relative; z-index: 2;}

  section#sec-about .sec-about-top-bg { width: 100%; height: 30vw; background: linear-gradient(180deg, rgba(80, 71, 71, 0.7) 0%, rgba(255, 255, 255, 0) 100%); mix-blend-mode: multiply; display: block; position: absolute; top: 0; left: 0; z-index: 1;}

  section#sec-about .sec-about-slide { clear: both; width: 100%; height: 62.5vw; border-radius: 10vw; overflow: hidden;}
  section#sec-about .sec-about-slide div { position: relative;}
  section#sec-about .sec-about-slide .pics { display: none;}
  section#sec-about .sec-about-slide .pics-mo { width: 100%; position: relative; z-index: 1;}
  section#sec-about .sec-about-slide .pics-mo img { width: 100%; height: auto; border-radius: 10vw; position: relative; z-index: 1;}
  section#sec-about .sec-about-slide img.text { width: 68vw; height: auto; position: absolute; top: 14vw; left: 4vw; z-index: 2;}

  section#sec-about .sec-about-con-text { clear: both; width: 100%; margin: 90px 0 0 0; position: relative; z-index: 3;}
  section#sec-about .sec-about-con-text .col-title { width: 100%; margin: 0 0 30px 0; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.1em;}
  section#sec-about .sec-about-con-text .col-text { width: 100%; font-size: 1.2rem; font-weight: 500; line-height: 2em;}


  /************ section #works ************/

  section#sec-works { width: 100%; padding: 100px 0; background-image: url("../images/sec_works_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top; overflow: hidden; position: relative; z-index: 1;}

  section#sec-works .sec-works-title { width: 100%; padding: 0 20px 80px 20px; margin: 0 auto; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.1em; box-sizing: border-box;}

  section#sec-works .sec-works-list-slide { clear: both; width: 100%; padding: 0; margin: -20vw 0 0 0; box-sizing: border-box; overflow: hidden;}

  section#sec-works .sec-works-more-bar { clear: both; width: 100%; margin: -100px 0 0 0; overflow: hidden;}
  section#sec-works .sec-works-more-bar a { width: 100%; padding: 30px 0; text-decoration: none; display: block;}
  section#sec-works .sec-works-more-bar a img { width: 90px; height: auto; margin: 0 auto;}


  /************ section #awards ************/

  section#sec-awards { width: 100%; padding: 100px 0 0 0; box-sizing: border-box; background-image: url("../images/sec_awards_bg.jpg"); background-repeat: no-repeat; background-size: 340% auto; background-position: left top; position: relative; z-index: 2;}

  section#sec-awards .sec-awards-title { width: 100%; padding: 0 0 0 40px; box-sizing: border-box; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.1em; position: relative; z-index: 3;}

  section#sec-awards .sec-awards-brand-list-arrows { width: 120px; display: flex; justify-content: space-between; align-items: center; position: absolute; top: 100px; right: 40px; z-index: 99;}
  section#sec-awards .sec-awards-brand-list-arrows img.awards-arrow-prev, 
  section#sec-awards .sec-awards-brand-list-arrows img.awards-arrow-next { width: 16px; height: auto; cursor: pointer;}

  section#sec-awards #awards-list-mo { clear: both; width: 100%;}
  section#sec-awards #awards-list-pc { display: none;}

  section#sec-awards #awards-list-mo .sec-awards-brand-list { clear: both; width: 100%; margin: 100px auto 0 auto; overflow: hidden;}
  section#sec-awards #awards-list-mo .sec-awards-brand-list .brand-lis-box { width: 50%; padding: 0 2vw; box-sizing: border-box;}
  section#sec-awards #awards-list-mo .sec-awards-brand-list .brand-lis-box .brand-box { width: 100%; height: 60vw; padding: 8vw 0 0 0; border-radius: 22vw 22vw 0 0; background-color: #000; box-sizing: border-box;}
  section#sec-awards #awards-list-mo .sec-awards-brand-list .brand-lis-box .brand-box .brand-logo { width: 100%; height: 38vw; display: flex; justify-content: center; align-items: center;}
  section#sec-awards #awards-list-mo .sec-awards-brand-list .brand-lis-box .brand-box .brand-logo img.style1 { width: 30vw; height: auto;}
  section#sec-awards #awards-list-mo .sec-awards-brand-list .brand-lis-box .brand-box .brand-logo img.style2 { width: 30vw; height: auto;}
  section#sec-awards #awards-list-mo .sec-awards-brand-list .brand-lis-box .brand-box .brand-year { width: 100%; color: #fff; font-size: 5vw; font-weight: 600; letter-spacing: 0.1em; text-align: center;}  

  section#sec-awards img.sec-awards-pic { display: none;}
  section#sec-awards img.sec-awards-pic-mo { clear: both; width: calc(100% - 40px); margin: 40px 20px 0 20px; border-radius: 40px;}


  /************ section #news ************/

  section#sec-news { width: 100%; padding: 160px 20px 100px 20px; box-sizing: border-box; background-color: #ECEDEA; position: relative; z-index: 2;}

  section#sec-news .sec-news-title { width: 80%; margin: 0 auto; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.1em; text-align: center;}

  section#sec-news .sec-news-list { clear: both; width: 100%; margin: 60px auto 0 auto;}
  section#sec-news .sec-news-list .news-box { width: 100%; margin: 0 0 30px 0;}
  section#sec-news .sec-news-list .news-box a { width: 100%; color: #000; text-decoration: none; display: block;}
  section#sec-news .sec-news-list .news-box a img.news-pic-pc { display: none;}
  section#sec-news .sec-news-list .news-box a img.news-pic-mo { width: 100%; height: auto; border-radius: 30px;}
  section#sec-news .sec-news-list .news-box a .news-title { clear: both; width: 100%; padding: 20px 0 0 0; font-size: 1.2rem; font-weight: 600; text-align: center;}

  section#sec-news .sec-news-more-bar { clear: both; width: 100%; overflow: hidden;}
  section#sec-news .sec-news-more-bar a { width: 100%; padding: 30px 0; text-decoration: none; display: block;}
  section#sec-news .sec-news-more-bar a img { width: 90px; height: auto; margin: 0 auto;}


  /************ section #works-list ************/

  section#page-works-list { clear: both; width: 100%; padding: 160px 0; box-sizing: border-box; background-color: #DCDED9; overflow: hidden;}

  section#page-works-list .page-works-title { width: 100%; margin: 0 0 160px 0; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.1em; text-align: center; position: relative; z-index: 3;}

  .works-list-pic-1 { width: 80vw; height: auto; margin: 0 0 0 -10vw; border-radius: 30px; overflow: hidden;}
  .works-list-pic-1 img { width: 100%; height: auto;}
  .works-list-pic-2 { clear: both; width: 80vw; height: auto; margin: 30vw -20vw 0 0; border-radius: 30px; overflow: hidden; float: right;}
  .works-list-pic-2 img { width: 100%; height: auto;}
  .works-list-pic-3 { clear: both; width: 80vw; height: auto; margin: 30vw auto; border-radius: 30px; overflow: hidden;}
  .works-list-pic-3 img { width: 100%; height: auto;}
  .works-list-pic-5 { clear: both; width: 80vw; height: auto; margin: 30vw -10vw 0 0; border-radius: 30px; overflow: hidden; float: right;}
  .works-list-pic-5 img { width: 100%; height: auto;}
  .works-list-pic-4 { width: 80vw; height: auto; margin: 30vw 0 0 -10vw; border-radius: 30px; overflow: hidden;}
  .works-list-pic-4 img { width: 100%; height: auto;}
  .works-list-pic-6 { clear: both; width: 80vw; height: auto; margin: 30vw auto; border-radius: 30px; overflow: hidden;}
  .works-list-pic-6 img { width: 100%; height: auto;}


  /************ section #works-detail ************/

  section#page-works-detail { clear: both; width: 100%; padding: 160px 0; box-sizing: border-box; background-color: #DCDED9; overflow: hidden;}

  section#page-works-detail .page-works-title { width: 100%; margin: 0 0 160px 0; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.1em; text-align: center; position: relative; z-index: 3;}

  .works-detail-pic-1 { width: 80vw; height: auto; margin: 0 0 0 -10vw; border-radius: 30px; overflow: hidden;}
  .works-detail-pic-1 img { width: 100%; height: auto;}
  .works-detail-pic-2 { clear: both; width: 80vw; height: auto; margin: 30vw -20vw 0 0; border-radius: 30px; overflow: hidden; float: right;}
  .works-detail-pic-2 img { width: 100%; height: auto;}
  .works-detail-pic-3 { clear: both; width: 80vw; height: auto; margin: 30vw auto; border-radius: 30px; overflow: hidden;}
  .works-detail-pic-3 img { width: 100%; height: auto;}
  .works-detail-pic-5 { clear: both; width: 80vw; height: auto; margin: 30vw -10vw 0 0; border-radius: 30px; overflow: hidden; float: right;}
  .works-detail-pic-5 img { width: 100%; height: auto;}
  .works-detail-pic-4 { width: 80vw; height: auto; margin: 30vw 0 0 -10vw; border-radius: 30px; overflow: hidden;}
  .works-detail-pic-4 img { width: 100%; height: auto;}
  .works-detail-pic-6 { clear: both; width: 80vw; height: auto; margin: 30vw auto; border-radius: 30px; overflow: hidden;}
  .works-detail-pic-6 img { width: 100%; height: auto;}

  .page-works-more-bar { clear: both; width: 100%; overflow: hidden;}
  .page-works-more-bar a { width: 100%; padding: 30px 0; text-decoration: none; display: block;}
  .page-works-more-bar a img { width: 90px; height: auto; margin: 0 auto;}


  /************ section #news-list ************/

  section#page-news-list { clear: both; width: 100%; padding: 160px 20px 80px 20px; box-sizing: border-box; background-color: #CACEC5;}

  section#page-news-list .page-news-title { width: 100%; margin: 0 0 160px 0; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.1em; text-align: center; position: relative; z-index: 3;}

  .page-news-list-full { clear: both; width: 100%; margin: 0 auto; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-news-list-full .news-list-box { width: 100%; margin: 0 0 120px 0;}
  .page-news-list-full .news-list-box a { color: #000; text-decoration: none;}
  .page-news-list-full .news-list-box .news-pic { display: none;}
  .page-news-list-full .news-list-box .news-pic-mo { width: 100%;}
  .page-news-list-full .news-list-box .news-pic-mo img { width: 100%; height: auto; border-radius: 32px;}
  .page-news-list-full .news-list-box .news-title-arrow { width: 100%; margin: 30px 0 0 0; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-news-list-full .news-list-box .news-title-arrow .news-title { width: calc(100% - 70px); padding: 0 15px 0 0; color: #000; font-size: 1.2rem; font-weight: 600; box-sizing: border-box;}
  .page-news-list-full .news-list-box .news-title-arrow .news-arrow { width: 70px; padding: 15px 0 0 0;}
  .page-news-list-full .news-list-box .news-title-arrow .news-arrow img { width: 100%; height: auto;}

  ul#news-pages-num { clear: both; width: 100%; padding: 0; margin: 30px 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  ul#news-pages-num li { padding: 0 10px 20px 10px; margin: 0; transition-duration: 0.5s;}
  ul#news-pages-num li a { color: #000; font-size: 1.4rem; font-weight: 600; text-decoration: none; transition-duration: 0.5s;}
  ul#news-pages-num li a.arrow { font-size: 2.2rem;}
  ul#news-pages-num li a:active { color: #fff;}


  /************ section #news-detail ************/

  section#page-news-detail { clear: both; width: 100%; padding: 160px 0 0 0; background-image: url("../images/news_detail_bg.jpg"); background-repeat: no-repeat; background-size: cover;}

  section#page-news-detail .page-news-title { width: 100%; margin: 0 0 80px 0; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.1em; text-align: center; position: relative; z-index: 3;}

  .page-news-detail-con { display: none}
  .page-news-detail-con-mo { clear: both; width: 100%; padding: 0 20px; margin: 0 0 100px 0; box-sizing: border-box;}
  .page-news-detail-con-mo .column-text { width: 100%; padding: 80px 0; color: #fff; font-size: 1.2rem; line-height: 1.8em;}
  .page-news-detail-con-mo .column-text .news-title { width: 100%; padding: 0 0 40px 0; font-size: 1.8rem; font-weight: 600; letter-spacing: 0.1em; line-height: 1.4em;}
  .page-news-detail-con-mo .column-text .news-type { width: 100%; padding: 0 0 80px 0; letter-spacing: 0.1em;}
  .page-news-detail-con-mo .column-photo { width: 100%; padding: 20px 0;}
  .page-news-detail-con-mo .column-photo img { width: 100%; height: auto; border-radius: 32px;}
  
  .page-othernews-list { clear: both; width: 100%; padding: 120px 40px 80px 40px; box-sizing: border-box; background-color: #CBCDC9; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-othernews-list .news-list-box { width: 100%; margin: 0 0 60px 0;}
  .page-othernews-list .news-list-box a { color: #000; text-decoration: none;}
  .page-othernews-list .news-list-box .news-pic { display: none;}
  .page-othernews-list .news-list-box .news-pic-mo { width: 100%;}
  .page-othernews-list .news-list-box .news-pic-mo img { width: 100%; height: auto; border-radius: 32px;}
  .page-othernews-list .news-list-box .news-title-arrow { width: 100%; margin: 30px 0 0 0; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-othernews-list .news-list-box .news-title-arrow .news-title { width: calc(100% - 70px); color: #000; font-size: 1.2rem; font-weight: 600;}
  .page-othernews-list .news-list-box .news-title-arrow .news-arrow { width: 70px; padding: 15px 0 0 0;}
  .page-othernews-list .news-list-box .news-title-arrow .news-arrow img { width: 100%; height: auto;}


  /************ footer ************/

  footer { clear: both; width: 100%; padding: 0 20px; box-sizing: border-box; background: #181D23;}

  .footer-logo-contact { width: 100%; padding: 60px 0;}
  .footer-logo-contact .footer-logo { width: 100%; margin: 0 0 80px 0;}
  .footer-logo-contact .footer-logo img { width: 74px; height: auto; margin: 0 auto;}
  .footer-logo-contact .footer-contact { width: 100%;}
  .footer-logo-contact .footer-contact .footer-title { width: 100%; color: #fff; font-size: 1.6rem; font-weight: 700; letter-spacing: 0.1em; text-align: center;}
  .footer-logo-contact .footer-social { width: 100%; margin: 40px 0 0 0; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  .footer-logo-contact .footer-social img { width: 28px; height: auto; margin: 0 25px;}

  .copyright-bar { clear: both; width: 100%; padding: 25px 40px; box-sizing: border-box; color: #fff; font-size: 0.8rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; text-align: center; background-color: #000;}
  

}