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

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

body { color: #333; font-size:1em; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #fff; position: relative;}
img { border: 0; display: block;}

html, body { padding: 0; margin: 0; 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%;}


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

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

  header.ind-top { clear: both; width: 100%; height: 70px; background-color: #0e6b88; background-image: url("../images/header_bg.webp"); background-repeat: no-repeat; background-size: auto 100%; background-position: right top; overflow: hidden; position: absolute; top: 0; left: 0; z-index: 2;}

  header.page-top { clear: both; width: 100%; height: 70px; background-color: #fff; background-image: url("../images/header_page_bg.webp"); background-repeat: no-repeat; background-size: auto 100%; background-position: right top; overflow: hidden;}

  .header-content { width: 100%; height: 100%; padding: 0 calc(50% - 620px); box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
  .header-content .header-logo-mo { display: none;}
  .header-content .header-logo { width: 200px;}
  .header-content .header-logo img { width: 187px; height: auto;}
  
  .header-content nav#mo { display: none;}
  .header-content nav#pc { width: calc(100% - 200px);}
  .header-content nav#pc ul.nav-menu { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: center;}
  .header-content nav#pc ul.nav-menu li { padding: 0 15px; margin: 0;}
  .header-content nav#pc ul.nav-menu li a { color: #fff; font-size: 1.1rem; text-decoration: none;}
  .header-content nav#pc ul.nav-menu li a:hover { color: aqua;}

  .header-content nav#page-mo { display: none;}
  .header-content nav#page-pc { width: calc(100% - 200px);}
  .header-content nav#page-pc ul.nav-menu { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: center;}
  .header-content nav#page-pc ul.nav-menu li { padding: 0 15px; margin: 0;}
  .header-content nav#page-pc ul.nav-menu li a { color: #005b75; font-size: 1.1rem; text-decoration: none;}
  .header-content nav#page-pc ul.nav-menu li a:hover { color: #333;}


  /************ section #ind-banner ************/

  section#ind-banner { clear: both; width: 100%; padding: 70px 0 0 0; box-sizing: border-box; position: relative; z-index: 1;}

  .ind-banner-slide { width: 100%; height: calc(100vh - 70px); overflow: hidden;}
  .ind-banner-slide img.banner { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; position: relative; z-index: 1;}
  .ind-banner-slide img.ind-banner-text { width: 32vw; height: auto; position: absolute; top: 9vw; left: 25vw; z-index: 2;}
  .ind-banner-slide img.about-btn { width: 5.5vw; height: auto; position: absolute; bottom: 10vh; right: 10vw; z-index: 9;}


  /************ section #page-content ************/

  section#page-content { clear: both; width: 100%;}

  .about-contain-1 { clear: both; width: 100%; padding: 7.3vw 0 5vw 0; background-color: #edf1f2; background-image: url("../images/page_about_bg.webp"); background-repeat: no-repeat; background-size: 100% auto; background-position: left top;}
  .about-contain-1 img.about-top-text { width: 748px; height: auto; margin: 0 auto;}
  .about-contain-1 .about-top-intro-mo { display: none;}
  .about-contain-1 .about-top-intro { width: 100%; margin: 5.5vw auto 0 auto; color: #474747; font-size: 1.2rem; text-align: center; line-height: 1.8em;}
  .about-contain-1 .about-top-intro span.weight { color: #1b1b1b; font-weight: 600;}
  .about-contain-1 .about-ideas-title { width: 100%; margin: 5vw 0 0 0; color: #c1a352; font-size: 1.8rem; font-weight: 500; text-align: center;}
  .about-contain-1 .about-ideas-box { width: 1111px; margin: 2.5vw auto 0 auto; position: relative;}
  .about-contain-1 .about-ideas-box img.bg-mo { display: none;}
  .about-contain-1 .about-ideas-box img.bg { width: 100%; height: auto; position: relative; z-index: 1;}
  .about-contain-1 .about-ideas-box .idea-box-full { width: 100%; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; z-index: 2;}
  .about-contain-1 .about-ideas-box .idea-box { width: calc(100% / 3); padding: 130px 0 0 0; box-sizing: border-box;}
  .about-contain-1 .about-ideas-box .idea-box .content-1 { width: 100%; padding: 0 40px 0 80px; font-size: 1.4rem; text-align: center; box-sizing: border-box;}
  .about-contain-1 .about-ideas-box .idea-box .content-2 { width: 100%; padding: 0 40px 0 40px; font-size: 1.4rem; text-align: center; box-sizing: border-box;}
  .about-contain-1 .about-ideas-box .idea-box .content-3 { width: 100%; padding: 0 80px 0 40px; font-size: 1.4rem; text-align: center; box-sizing: border-box;}
  .about-contain-1 .about-ideas-box .idea-box .content-1 .title, 
  .about-contain-1 .about-ideas-box .idea-box .content-2 .title, 
  .about-contain-1 .about-ideas-box .idea-box .content-3 .title { width: 100%; padding: 0 0 10px 0; color: #728b93; font-size: 2.8rem; font-family: "Noto Serif TC", serif; font-weight: 700;}

  .about-contain-2 { width: 100%; position: relative;}
  .about-contain-2 img.about-con-2 { width: 100%; height: auto; position: relative; z-index: 1;}
  .about-contain-2 .slogan-text-left { width: 50%; padding: 0 8vw 0 0; box-sizing: border-box; color: #fff; font-size: 1.6vw; letter-spacing: 0.3em; text-align: right; position: absolute; top: 18vw; left: 0; z-index: 2;}
  .about-contain-2 .slogan-text-right { width: 50%; padding: 0 0 0 9.5vw; box-sizing: border-box; color: #fff; font-size: 1.6vw; letter-spacing: 0.3em; text-align: left; position: absolute; top: 18vw; right: 0; z-index: 2;}


  /************ service content ************/

  .service-contain-1 { clear: both; width: 100%; padding: 95px 0 70px 0; background-image: url("../images/service_top_bg.webp"); background-repeat: no-repeat; background-size: cover; background-position: center top;}

  .serv-items-list-mo { display: none;}
  .serv-items-list { clear: both; width: 100%; padding: 0 calc(50% - 600px); margin: 0; box-sizing: border-box; list-style: none; display: flex; justify-content: center; align-items: center;}
  .serv-items-list a { width: 183px; padding: 8px 0; margin: 0 10px; color: #fff; font-size: 1.2rem; text-align: center; text-decoration: none; border-radius: 20px; background-color: rgba(255,255,255,0.3); display: block;}
  .serv-items-list a:hover { color: #ffc332;}
  .serv-items-list a.sel { color: #ffc332; background-color: rgba(0,0,0,0.3);}

  .service-contain-1 .item-content { clear: both; width: 100%; padding: 60px calc(50% - 440px); box-sizing: border-box;}
  .service-contain-1 .item-content .intro-text { width: 100%; color: #fff; font-size: 1.1rem; line-height: 2em; display: none;}
  .service-contain-1 .item-content .intro-text:first-child { display: block;}
  .service-contain-1 .item-content .intro-stitle { width: 100%; margin: -100px 0 0 0;}
  .service-contain-1 .item-content .intro-stitle img.stitle { width: 260px; height: auto; margin: 0 auto;}
  .service-contain-1 .item-content .intro-stitle img.intro-1 { width: 486px; height: auto; margin: 0 auto;}
  .service-contain-1 .feature-list-full { clear: both; width: 100%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  .service-contain-1 .feature-list-full.position-1 { margin: -150px 0 0 0;}
  .service-contain-1 .feature-list-full.position-2 { margin: -100px 0 0 0;}
  .service-contain-1 .feature-list-full.position-3 { margin: -80px 0 0 0;}
  .service-contain-1 .feature-list-full img.item-1 { width: 171px; height: auto; margin: 0 12vw 0 0;}
  .service-contain-1 .feature-list-full img.item-2 { width: 196px; height: auto; margin: 0 0 0 12vw;}
  .service-contain-1 .feature-list-full img.item-3 { width: 287px; height: auto; margin: 0 8vw 0 0;}
  .service-contain-1 .feature-list-full img.item-4 { width: 192px; height: auto; margin: 0 8.5vw 0 8vw;}
  .service-contain-1 .feature-list-full img.item-5 { width: 174px; height: auto; margin: 0 0 0 8.5vw;}
  .service-contain-1 .feature-list-full img.item-6 { width: 243px; height: auto; margin: 0 5vw 0 0;}
  .service-contain-1 .feature-list-full img.item-7 { width: 267px; height: auto; margin: 0 0 0 7.5vw;}


  .service-contain-2 { clear: both; width: 100%; height: 600px; position: relative; overflow: hidden;}
  .service-contain-2 img.serv-con-2-bg { width: 100%; height: 100%; object-fit: cover; object-position: center; position: relative; z-index: 1;}
  .service-contain-2 img.linebar { width: 946px; height: auto; margin: 0 auto; position: absolute; top: 195px; left: calc(50% - 473px); z-index: 2;}
  .service-contain-2 .intro-text { width: 946px; font-size: 1.6rem; font-weight: 500; text-align: center; position: absolute; top: 290px; left: calc(50% - 473px); z-index: 2;}


  /************ cases content ************/

  .page-banner-box { clear: both; width: 100%; height: 364px; position: relative; overflow: hidden;}
  .page-banner-box img.banner-bg { width: 100%; height: 100%; object-fit: cover; object-position: center; position: relative; z-index: 1;}
  .page-banner-box .path-title { width: 100%; padding: 0 calc(50% - 600px); color: #fff; box-sizing: border-box; position: absolute; top: 140px; left: 0; z-index: 2;}
  .page-banner-box .path-title span.father-path { font-size: 1.4rem;}
  .page-banner-box .path-title span.father-path a { color: #fff; text-decoration: none;}
  .page-banner-box .path-title span.father-path a:hover { border-bottom: 2px #fff solid;}
  .page-banner-box .path-title span.page-title { font-size: 3.4rem; letter-spacing: 0.1em; line-height: 1.6em;}
  .page-banner-box .path-title span.page-title a { color: #fff; text-decoration: none;}
  .page-banner-box .path-title span.page-title a:hover { border-bottom: 2px #fff solid;}


  .case-contain { clear: both; width: 100%; padding: 75px calc(50% - 600px); box-sizing: border-box; background-image: url("../images/case_bg.webp"); background-repeat: no-repeat; background-size: cover; background-position: center top;}
  .case-contain .cases-list-full { width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .case-contain .cases-list-full .case-box { width: calc(100% / 3 - 20px); margin: 0 10px 45px 10px;}
  .case-contain .cases-list-full .case-box a { width: 100%; text-decoration: none; box-sizing: border-box; display: block;}
  .case-contain .cases-list-full .case-box a .pic { width: 100%; height: 225px; border-radius: 10px; display: flex; justify-content: center; align-items: center; overflow: hidden;}
  .case-contain .cases-list-full .case-box a .pic img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: 0.8s;}
  .case-contain .cases-list-full .case-box a:hover .pic img { width: 140%; height: 140%; object-fit: cover; object-position: center; display: block; transition: 0.8s;}
  .case-contain .cases-list-full .case-box a .area { width: 200px; margin: 20px auto 10px auto; padding: 8px 0; color: #303030; font-size: 1.1rem; text-align: center; border-radius: 20px; background-color: #dccda4;}
  .case-contain .cases-list-full .case-box a .intro { width: 100%; color: #4f4f4f; font-size: 1.4rem; text-align: center;}

  ul.page-num { clear: both; width: 100%; padding: 0; margin: 100px 0 0 0; list-style: none; display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap;}
  ul.page-num li { padding: 0; margin: 0 5px 10px 5px;}
  ul.page-num li a { width: 30px; height: 30px; color: #303030; font-size: 0.9rem; text-decoration: none; border: 2px #303030 solid; border-radius: 100%; display: flex; justify-content: center; align-items: center;}
  ul.page-num li.last a { width: 100px; height: 30px; color: #303030; font-size: 0.9rem; text-decoration: none; border: 2px #303030 solid; border-radius: 30px; display: flex; justify-content: center; align-items: center;}
  ul.page-num li a:hover, 
  ul.page-num li.last a:hover { background-color: #eee;}
  ul.page-num li a.sel, 
  ul.page-num li.last a.sel { color: #fff; background-color: #303030;}


  /************ cases details content ************/

  .case-details-contain { clear: both; width: 100%; padding: 0 0 40px calc(50% - 600px); box-sizing: border-box; background-image: url("../images/case_bg.webp"); background-repeat: no-repeat; background-size: cover; background-position: center top; display: flex; justify-content: flex-start; align-items: flex-start;}

  .case-list-open-mo { display: none;}

  .case-details-contain .col-lf-nav { width: 150px; padding: 20px 0 0 0; box-sizing: border-box;}
  .case-details-contain .col-lf-nav .arrow-prev-mo, 
  .case-details-contain .col-lf-nav .arrow-next-mo { display: none;}
  .case-details-contain .col-lf-nav .arrow-prev, 
  .case-details-contain .col-lf-nav .arrow-next { width: 150px; padding: 10px 0;}
  .case-details-contain .col-lf-nav .arrow-prev-mo img, 
  .case-details-contain .col-lf-nav .arrow-next-mo img { display: none;}
  .case-details-contain .col-lf-nav .arrow-prev img, 
  .case-details-contain .col-lf-nav .arrow-next img { width: 39px; height: auto; margin: 0 auto; cursor: pointer;}
  .case-details-contain .col-lf-nav .s-title-mo { display: none;}
  .case-details-contain .col-lf-nav .s-title { width: 100%; padding: 10px 0; color: #afafaf; font-size: 1.1rem; font-weight: 500; text-align: center;}
  .case-details-contain .col-lf-nav .case-box { width: 100%; padding: 10px 0;}
  .case-details-contain .col-lf-nav .case-box a { width: 100%; color: #4f4f4f; text-decoration: none; display: block;}
  .case-details-contain .col-lf-nav .case-box a .pic { width: 136px; height: 97px; margin: 0 auto; border-radius: 10px; display: flex; justify-content: center; align-items: center; overflow: hidden;}
  .case-details-contain .col-lf-nav .case-box a .pic img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: 0.8s;}
  .case-details-contain .col-lf-nav .case-box a .pic:hover img { width: 120%; height: 120%; object-fit: cover; object-position: center; display: block; transition: 0.8s;}
  .case-details-contain .col-lf-nav .case-box a .title { width: 150px; padding: 10px 0 0 0; font-size: 0.9rem; line-height: 1.2em; text-align: center;}

  .case-details-contain .col-rt-details-mo { display: none;}
  .case-details-contain .col-rt-details { width: calc(100% - 150px); padding: 70px 0 0 80px; box-sizing: border-box; background-repeat: no-repeat; background-size: 740px auto; background-position: right 8.5vw top 0;}
  .case-details-contain .col-rt-details .year-box { width: 95px; color: #b0b0b0; font-size: 5rem; font-family: "Noto Serif TC", serif; font-weight: 700; line-height: 0.8em; word-break: break-all;}
  .case-details-contain .col-rt-details .title-addr { width: 100%; padding: 30px 0 0 0; color: #14657d; font-size: 1.8rem; font-weight: 500; line-height: 1.2em;}
  .case-details-contain .col-rt-details .title-type { width: 100%; color: #14657d; font-size: 3rem; font-weight: 600;}
  .space-block { padding: 12vw 0 0 0;}
  .case-details-contain .col-rt-details .results-title { width: 100%; padding: 40px 0 0 0; color: #aa8420; font-size: 1.6rem; font-weight: 600;}
  .case-details-contain .col-rt-details .results-intro { width: 70%; color: #858585; font-size: 1.1rem; line-height: 1.8em; background-color: rgba(255,255,255,0.8);}
  .case-details-contain .col-rt-details .info-table-full { clear: both; width: 860px; margin: 30px 0 0 0; border-top: 3px #aa8420 solid;}
  .case-details-contain .col-rt-details .info-table-full .column-full { width: 100%; padding: 10px 0; font-size: 1.1rem; border-bottom: 3px #e8e8e8 solid; background-color: #f5f5f5; display: flex; justify-content: flex-start; align-items: stretch;}
  .case-details-contain .col-rt-details .info-table-full .column-full:nth-child(even) { background-color: #fff;}
  .case-details-contain .col-rt-details .info-table-full .column-full .column-1 { width: 20%; padding: 0 10px 0 50px; font-weight: 500; box-sizing: border-box;}
  .case-details-contain .col-rt-details .info-table-full .column-full .column-2 { width: 35%; padding: 0 10px 0 10px; box-sizing: border-box;}
  .case-details-contain .col-rt-details .info-table-full .column-full .column-3 { width: 20%; padding: 0 10px 0 10px; font-weight: 500; box-sizing: border-box;}
  .case-details-contain .col-rt-details .info-table-full .column-full .column-4 { width: 25%; padding: 0 50px 0 10px; box-sizing: border-box;}
  .info-table-full { clear: both; width: 860px; margin: 30px 0 0 0; border-top: 3px #aa8420 solid;}
  .info-table-full .column-full { width: 100%; padding: 10px 0; font-size: 1.1rem; border-bottom: 3px #e8e8e8 solid; background-color: #f5f5f5; display: flex; justify-content: flex-start; align-items: stretch;}
  .info-table-full .column-full:nth-child(even) { background-color: #fff;}
  .info-table-full .column-full .column-1 { width: 20%; padding: 0 10px 0 50px; font-weight: 500; box-sizing: border-box;}
  .info-table-full .column-full .column-2 { width: 35%; padding: 0 10px 0 10px; box-sizing: border-box;}
  .info-table-full .column-full .column-3 { width: 20%; padding: 0 10px 0 10px; font-weight: 500; box-sizing: border-box;}
  .info-table-full .column-full .column-4 { width: 25%; padding: 0 50px 0 10px; box-sizing: border-box;}
  
  .case-details-contain .col-rt-details .goback-btn { clear: both; width: 860px; margin: 40px 0 0 0; display: flex; justify-content: flex-end; box-sizing: border-box;}
  .case-details-contain .col-rt-details .goback-btn img { width: 127px; height: auto;}


  /************ news list content ************/

  .news-list-contain { clear: both; width: 100%; padding: 70px calc(50% - 600px) 40px calc(50% - 600px); box-sizing: border-box; background-image: url("../images/news_list_bg.webp"); background-repeat: no-repeat; background-size: cover; background-position: center top; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}

  .news-list-contain .col-news-sort { width: 230px;}
  .news-list-contain .col-news-sort ul.sort-nav { width: 156px; padding: 0; margin: 0 auto; list-style: none; display: block;}
  .news-list-contain .col-news-sort ul.sort-nav li { width: 100%; padding: 0 0 20px 0; margin: 0;}
  .news-list-contain .col-news-sort ul.sort-nav li a { width: 100%; padding: 10px 0; color: #4c4b4b; font-size: 1.2rem; font-weight: 500; text-align: center; text-decoration: none; border-radius: 30px; background-color: rgba(4,0,0,0.3); display: block;}
  .news-list-contain .col-news-sort ul.sort-nav li a:hover { background-color: rgba(4,0,0,0.2);}
  .news-list-contain .col-news-sort ul.sort-nav li a.sel { background-color: rgba(4,0,0,0.1);}

  .news-list-contain .col-news-list { width: calc(100% - 230px);}
  .news-list-contain .col-news-list ul.news-list { width: 100%; padding: 0 30px; margin: 0; box-sizing: border-box; list-style: none; display: block;}
  .news-list-contain .col-news-list ul.news-list li { width: 100%; padding: 10px 0; margin: 0 0 20px 0; font-size: 1.2rem; line-height: 1.4em; border-bottom: 1px #3d3d3d solid; display: flex; justify-content: flex-start; align-items: flex-start;}
  .news-list-contain .col-news-list ul.news-list li .date { width: 140px; padding: 5px 0 0 0; color: #3d3d3d; font-weight: 600;}
  .news-list-contain .col-news-list ul.news-list li .news-title { width: calc(100% - 140px - 160px); padding: 5px 10px 0 0; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
  .news-list-contain .col-news-list ul.news-list li .news-title a { color: #3d3d3d; text-decoration: none;}
  .news-list-contain .col-news-list ul.news-list li .news-title a:hover { color: #0e6b88;}
  .news-list-contain .col-news-list ul.news-list li .sort-box { width: 160px;}
  .news-list-contain .col-news-list ul.news-list li .sort-box a { width: 100%; padding: 6px 10px; box-sizing: border-box; color: #3d3d3d; font-weight: 500; text-decoration: none; border-radius: 30px; background-color: #efefef; display: flex; justify-content: flex-start; align-items: center;}
  .news-list-contain .col-news-list ul.news-list li .sort-box a:hover { background-color: #ccc;} 
  .news-list-contain .col-news-list ul.news-list li .sort-box a .sort { width: calc(100% - 34px); font-size: 1.1rem; font-weight: 500; text-align: center;}
  .news-list-contain .col-news-list ul.news-list li .sort-box a img.arrow { width: 34px; height: auto;}


  /************ news details content ************/

  .news-details-contain { clear: both; width: 100%; padding: 70px calc(50% - 600px) 40px calc(50% - 600px); box-sizing: border-box; background-image: url("../images/news_list_bg.webp"); background-repeat: no-repeat; background-size: cover; background-position: center top;}

  .news-details-contain .news-title-date { width: 100%; padding: 0 0 25px 0; color: #3d3d3d; font-size: 1.4rem; font-weight: 600; text-align: center; line-height: 1.2em; border-bottom: 1px #3d3d3d solid;}

  .news-details-contain .news-content { clear: both; width: 100%; padding: 60px 0; color: #3d3d3d; font-size: 1.1rem; line-height: 2em;}
  .news-details-contain .news-content img.news-photo { max-width: 100%; width: 450px; height: auto;}
  .news-details-contain .news-content img.news-photo.left { margin: 0 30px 30px 0; float: left;}
  .news-details-contain .news-content img.news-photo.right { margin: 0 0 30px 30px; float: right;}

  .news-details-contain .goback-btn { clear: both; width: 100%; margin: 40px 0 0 0; display: flex; justify-content: flex-end; box-sizing: border-box;}
  .news-details-contain .goback-btn img { width: 127px; height: auto;}


  /************ contact content ************/

  .contact-contain-1 { clear: both; width: 100%; padding: 100px calc(50% - 600px) 60px calc(50% - 600px); box-sizing: border-box; background-image: url("../images/contact_bg_1.webp"); background-repeat: no-repeat; background-size: cover; background-position: center top; display: flex; justify-content: flex-start; align-items: flex-start;}

  .contact-contain-1 .col-title { width: 350px; padding: 35px 0 0 50px; box-sizing: border-box;}
  .contact-contain-1 .col-title .path-title { width: 100%; color: #555;}
  .contact-contain-1 .col-title .path-title span.father-path { font-size: 1.4rem;}
  .contact-contain-1 .col-title .path-title span.father-path a { color: #555; text-decoration: none;}
  .contact-contain-1 .col-title .path-title span.father-path a:hover { border-bottom: 2px #555 solid;}
  .contact-contain-1 .col-title .path-title span.page-title { font-size: 3.4rem; letter-spacing: 0.1em; line-height: 1.6em;}
  .contact-contain-1 .col-title .path-title span.page-title a { color: #555; text-decoration: none;}
  .contact-contain-1 .col-title .path-title span.page-title a:hover { border-bottom: 2px #555 solid;}

  .contact-contain-1 .col-form-table { width: calc(100% - 350px);}
  .contact-contain-1 .col-form-table .top-words { width: 100%; padding: 0 0 0 100px; box-sizing: border-box;}
  .contact-contain-1 .col-form-table .top-words img.slogan { width: 574px; height: auto;}
  .contact-contain-1 .col-form-table .top-words .text-mo { display: none;}
  .contact-contain-1 .col-form-table .top-words .text { width: 100%; padding: 35px 0 0 0; color: #777; font-size: 1.2rem; line-height: 1.8em;}
  .contact-contain-1 .col-form-table .contact-form { width: 100%; margin: 40px 0 0 0; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .contact-contain-1 .col-form-table .contact-form .caption { width: 135px; padding: 10px 0 30px 0; color: #494848; font-size: 1.2rem; font-weight: 500; text-align: right;}
  .contact-contain-1 .col-form-table .contact-form .column { width: calc(100% - 135px); padding: 0 0 30px 30px; color: #494848; font-size: 1.2rem; box-sizing: border-box;}
  .contact-contain-1 .col-form-table .contact-form .column input[type=text], 
  .contact-contain-1 .col-form-table .contact-form .column input[type=tel], 
  .contact-contain-1 .col-form-table .contact-form .column input[type=email] { width: 100%; padding: 15px 30px; color: #494848; font-size: 1.2rem; border: 1px #494848 solid; border-radius: 30px; box-sizing: border-box;}
  .contact-contain-1 .col-form-table .contact-form .column input[type=radio] { width: 20px; height: 20px; margin: 15px 0 0 0;}
  .contact-contain-1 .col-form-table .contact-form .column textarea { width: 100%; height: 200px; padding: 15px 30px; color: #494848; font-size: 1.2rem; border: 1px #494848 solid; border-radius: 30px; box-sizing: border-box;}
  .contact-contain-1 .col-form-table .submit-btn { width: 100%; margin: 40px 0 0 0; display: flex; justify-content: flex-end;}
  .contact-contain-1 .col-form-table .submit-btn input[type=submit], 
  .contact-contain-1 .col-form-table .submit-btn input[type=button] { width: 160px; padding: 8px 0; color: #fff; font-size: 1.1rem; border-radius: 30px; border: 1px #494848 solid; background-color: #494848; box-sizing: border-box; cursor: pointer;}
  .contact-contain-1 .col-form-table .submit-btn input[type=submit]:hover, 
  .contact-contain-1 .col-form-table .submit-btn input[type=button]:hover { color: #494848; background-color: #ccc;}

  .contact-map { clear: both; width: 100%;}
  .contact-map iframe { width: 100%; height: 580px;}

  .contact-contain-2 { clear: both; width: 100%; padding: 50px calc(50% - 600px) 50px calc(50% - 600px); box-sizing: border-box; background-image: url("../images/contact_bg_2.webp"); background-repeat: no-repeat; background-size: cover; background-position: center top;}
  .contact-contain-2 img.slogan { width: 616px; height: auto;}
  .contact-contain-2 .text { width: 100%; padding: 30px 0 0 0; color: #ddb856; font-size: 1.8rem;}
  .contact-contain-2 ul.info-text { width: 100%; padding: 40px 0 0 0; margin: 0; list-style: none; display: block;}
  .contact-contain-2 ul.info-text li { padding: 0 0 10px 0; margin: 0; font-size: 1.1rem; line-height: 1.2em;}


  /************ site map ************/

  ul.sitemap { clear: both; width: 100%; padding: 140px calc(50% - 600px); margin: 0; list-style: none; box-sizing: border-box; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
  ul.sitemap li { padding: 0 10px; margin: 10px 0;}
  ul.sitemap li a { padding: 3px 10px; color: #333; font-size: 1.2rem; font-weight: 500; text-decoration: none; display: block;}
  ul.sitemap li a:hover { color: #fff; background-color: #0e6b88;}
  

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

  footer { clear: both; width: 100%; padding: 45px calc(50% - 600px); box-sizing: border-box; background-color: #7b7b7b; background-image: url("../images/footer_bg.webp"); background-repeat: no-repeat; background-size: cover; background-position: center top;}

  .foot-contain { width: 100%; display: flex; justify-content: flex-start; align-items: flex-end;}
  
  .foot-contain .col-lf { width: 55%; display: flex; justify-content: flex-start; align-items: flex-end; flex-wrap: wrap;}
  .foot-contain .col-lf img.qr-code { width: 100px; height: auto; margin: 0 15px 0 0;}
  .foot-contain .col-lf .contact-info { width: calc(100% - 100px - 15px); color: #fff; font-size: 1.1rem;}
  .foot-contain .col-lf .contact-info img.icon { width: 75px; height: auto;}
  .foot-contain .col-lf .contact-info .title-en { width: 100%; padding: 5px 0; color: #ffe9ae; font-size: 1.2rem; font-weight: 600; letter-spacing: 0.1em;}
  .foot-contain .col-lf ul.info-text { width: 100%; padding: 40px 0 0 0; margin: 0; list-style: none; display: block;}
  .foot-contain .col-lf ul.info-text li { padding: 0 0 10px 0; margin: 0; color: #fff; font-size: 1.1rem; line-height: 1.2em;}
  
  .foot-contain .col-rt { width: 45%; display: flex; justify-content: flex-end; flex-wrap: wrap;}
  .foot-contain .col-rt img.footer-logo { width: 158px; height: auto;}
  .foot-contain .col-rt ul.footer-menu { clear: both; width: 100%; padding: 0; margin: 10px 0 0 0; list-style: none; display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap;}
  .foot-contain .col-rt ul.footer-menu li { padding: 0; margin: 10px 0 0 15px;}
  .foot-contain .col-rt ul.footer-menu li a { color: #fff; font-size: 1.2rem; text-decoration: none;}
  .foot-contain .col-rt ul.footer-menu li a:hover { border-bottom: 2px #fff solid;}


}

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

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

  header.ind-top { clear: both; width: 100%; height: 70px; background-color: #0e6b88; background-image: url("../images/header_bg.webp"); background-repeat: no-repeat; background-size: auto 100%; background-position: right top; overflow: hidden; position: absolute; top: 0; left: 0; z-index: 2;}

  header.page-top { clear: both; width: 100%; height: 70px; background-color: #fff; background-image: url("../images/header_page_bg.webp"); background-repeat: no-repeat; background-size: auto 100%; background-position: right top; overflow: hidden;}

  .header-content { width: 100%; height: 100%; padding: 0 calc(50% - 480px); box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
  .header-content .header-logo-mo { display: none;}
  .header-content .header-logo { width: 200px;}
  .header-content .header-logo img { width: 187px; height: auto;}
  
  .header-content nav#mo { display: none;}
  .header-content nav#pc { width: calc(100% - 200px);}
  .header-content nav#pc ul.nav-menu { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: center;}
  .header-content nav#pc ul.nav-menu li { padding: 0 15px; margin: 0;}
  .header-content nav#pc ul.nav-menu li a { color: #fff; font-size: 1.1rem; text-decoration: none;}
  .header-content nav#pc ul.nav-menu li a:hover { color: aqua;}

  .header-content nav#page-mo { display: none;}
  .header-content nav#page-pc { width: calc(100% - 200px);}
  .header-content nav#page-pc ul.nav-menu { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: center;}
  .header-content nav#page-pc ul.nav-menu li { padding: 0 15px; margin: 0;}
  .header-content nav#page-pc ul.nav-menu li a { color: #005b75; font-size: 1.1rem; text-decoration: none;}
  .header-content nav#page-pc ul.nav-menu li a:hover { color: #333;}


  /************ section #ind-banner ************/

  section#ind-banner { clear: both; width: 100%; padding: 70px 0 0 0; box-sizing: border-box; position: relative; z-index: 1;}

  .ind-banner-slide { width: 100%; height: calc(100vh - 70px); overflow: hidden;}
  .ind-banner-slide img.banner { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; position: relative; z-index: 1;}
  .ind-banner-slide img.ind-banner-text { width: 32vw; height: auto; position: absolute; top: 9vw; left: 25vw; z-index: 2;}
  .ind-banner-slide img.about-btn { width: 10vw; height: auto; position: absolute; bottom: 10vh; right: 10vw; z-index: 9;}


  /************ section #page-content ************/

  section#page-content { clear: both; width: 100%;}

  .about-contain-1 { clear: both; width: 100%; padding: 7.3vw 0 5vw 0; background-color: #edf1f2; background-image: url("../images/page_about_bg.webp"); background-repeat: no-repeat; background-size: 100% auto; background-position: left top;}
  .about-contain-1 img.about-top-text { width: 700px; height: auto; margin: 0 auto;}
  .about-contain-1 .about-top-intro-mo { display: none;}
  .about-contain-1 .about-top-intro { width: 100%; margin: 5.5vw auto 0 auto; color: #474747; font-size: 1.2rem; text-align: center; line-height: 1.8em;}
  .about-contain-1 .about-top-intro span.weight { color: #1b1b1b; font-weight: 600;}
  .about-contain-1 .about-ideas-title { width: 100%; margin: 5vw 0 0 0; color: #c1a352; font-size: 1.8rem; font-weight: 500; text-align: center;}
  .about-contain-1 .about-ideas-box { width: 900px; margin: 2.5vw auto 0 auto; position: relative;}
  .about-contain-1 .about-ideas-box img.bg-mo { display: none;}
  .about-contain-1 .about-ideas-box img.bg { width: 100%; height: auto; position: relative; z-index: 1;}
  .about-contain-1 .about-ideas-box .idea-box-full { width: 100%; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; z-index: 2;}
  .about-contain-1 .about-ideas-box .idea-box { width: calc(100% / 3); padding: 90px 0 0 0; box-sizing: border-box;}
  .about-contain-1 .about-ideas-box .idea-box .content-1 { width: 100%; padding: 0 30px 0 60px; font-size: 1.2rem; text-align: center; box-sizing: border-box;}
  .about-contain-1 .about-ideas-box .idea-box .content-2 { width: 100%; padding: 0 30px 0 30px; font-size: 1.2rem; text-align: center; box-sizing: border-box;}
  .about-contain-1 .about-ideas-box .idea-box .content-3 { width: 100%; padding: 0 60px 0 30px; font-size: 1.2rem; text-align: center; box-sizing: border-box;}
  .about-contain-1 .about-ideas-box .idea-box .content-1 .title, 
  .about-contain-1 .about-ideas-box .idea-box .content-2 .title, 
  .about-contain-1 .about-ideas-box .idea-box .content-3 .title { width: 100%; padding: 0 0 10px 0; color: #728b93; font-size: 2.4rem; font-family: "Noto Serif TC", serif; font-weight: 700;}

  .about-contain-2 { width: 100%; position: relative;}
  .about-contain-2 img.about-con-2 { width: 100%; height: auto; position: relative; z-index: 1;}
  .about-contain-2 .slogan-text-left { width: 50%; padding: 0 8vw 0 0; box-sizing: border-box; color: #fff; font-size: 1.8vw; letter-spacing: 0.3em; text-align: right; position: absolute; top: 18vw; left: 0; z-index: 2;}
  .about-contain-2 .slogan-text-right { width: 50%; padding: 0 0 0 9.5vw; box-sizing: border-box; color: #fff; font-size: 1.8vw; letter-spacing: 0.3em; text-align: left; position: absolute; top: 18vw; right: 0; z-index: 2;}


  /************ service content ************/

  .service-contain-1 { clear: both; width: 100%; padding: 95px 0 70px 0; background-image: url("../images/service_top_bg.webp"); background-repeat: no-repeat; background-size: cover; background-position: center top;}

  .serv-items-list-mo { display: none;}
  .serv-items-list { clear: both; width: 100%; padding: 0 calc(50% - 480px); margin: 0; box-sizing: border-box; list-style: none; display: flex; justify-content: center; align-items: center;}
  .serv-items-list a { width: 183px; padding: 8px 0; margin: 0 10px; color: #fff; font-size: 1.2rem; text-align: center; text-decoration: none; border-radius: 20px; background-color: rgba(255,255,255,0.3); display: block;}
  .serv-items-list a:hover { color: #ffc332;}
  .serv-items-list a.sel { color: #ffc332; background-color: rgba(0,0,0,0.3);}

  /*ul.serv-items-list { clear: both; width: 100%; padding: 0 calc(50% - 540px); margin: 0; box-sizing: border-box; list-style: none; display: flex; justify-content: center; align-items: center;}
  ul.serv-items-list li { width: 183px; padding: 0 5px; margin: 0;}
  ul.serv-items-list li a { width: 100%; padding: 8px 0; color: #fff; font-size: 1.2rem; text-align: center; text-decoration: none; border-radius: 20px; background-color: rgba(255,255,255,0.3); display: block;}
  ul.serv-items-list li a:hover { color: #ffc332;}
  ul.serv-items-list li a.sel { color: #ffc332; background-color: rgba(0,0,0,0.3);}*/

  .service-contain-1 .item-content { clear: both; width: 100%; padding: 60px calc(50% - 440px); box-sizing: border-box;}
  .service-contain-1 .item-content .intro-text { width: 100%; color: #fff; font-size: 1.1rem; line-height: 2em; display: none;}
  .service-contain-1 .item-content .intro-text:first-child { display: block;}
  .service-contain-1 .item-content .intro-stitle { width: 100%; margin: -100px 0 0 0;}
  .service-contain-1 .item-content .intro-stitle img.stitle { width: 260px; height: auto; margin: 0 auto;}
  .service-contain-1 .item-content .intro-stitle img.intro-1 { width: 486px; height: auto; margin: 0 auto;}
  .service-contain-1 .feature-list-full { clear: both; width: 100%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  .service-contain-1 .feature-list-full.position-1 { margin: -100px 0 0 0;}
  .service-contain-1 .feature-list-full.position-2 { margin: -50px 0 0 0;}
  .service-contain-1 .feature-list-full.position-3 { margin: -30px 0 0 0;}
  .service-contain-1 .feature-list-full img.item-1 { width: 171px; height: auto; margin: 0 12vw 0 0;}
  .service-contain-1 .feature-list-full img.item-2 { width: 196px; height: auto; margin: 0 0 0 12vw;}
  .service-contain-1 .feature-list-full img.item-3 { width: 287px; height: auto; margin: 0 8vw 0 0;}
  .service-contain-1 .feature-list-full img.item-4 { width: 192px; height: auto; margin: 0 8.5vw 0 8vw;}
  .service-contain-1 .feature-list-full img.item-5 { width: 174px; height: auto; margin: 0 0 0 8.5vw;}
  .service-contain-1 .feature-list-full img.item-6 { width: 243px; height: auto; margin: 0 5vw 0 0;}
  .service-contain-1 .feature-list-full img.item-7 { width: 267px; height: auto; margin: 0 0 0 7.5vw;}


  .service-contain-2 { clear: both; width: 100%; height: 600px; position: relative;}
  .service-contain-2 img.serv-con-2-bg { width: 100%; height: 100%; object-fit: cover; object-position: center; position: relative; z-index: 1;}
  .service-contain-2 img.linebar { width: 946px; height: auto; margin: 0 auto; position: absolute; top: 195px; left: calc(50% - 473px); z-index: 2;}
  .service-contain-2 .intro-text { width: 946px; font-size: 1.4rem; font-weight: 500; text-align: center; position: absolute; top: 290px; left: calc(50% - 473px); z-index: 2;}


  /************ cases content ************/

  .page-banner-box { clear: both; width: 100%; height: 364px; position: relative; overflow: hidden;}
  .page-banner-box img.banner-bg { width: 100%; height: 100%; object-fit: cover; object-position: center; position: relative; z-index: 1;}
  .page-banner-box .path-title { width: 100%; padding: 0 calc(50% - 480px); color: #fff; box-sizing: border-box; position: absolute; top: 140px; left: 0; z-index: 2;}
  .page-banner-box .path-title span.father-path { font-size: 1.4rem;}
  .page-banner-box .path-title span.father-path a { color: #fff; text-decoration: none;}
  .page-banner-box .path-title span.father-path a:hover { border-bottom: 2px #fff solid;}
  .page-banner-box .path-title span.page-title { font-size: 3.4rem; letter-spacing: 0.1em; line-height: 1.6em;}
  .page-banner-box .path-title span.page-title a { color: #fff; text-decoration: none;}
  .page-banner-box .path-title span.page-title a:hover { border-bottom: 2px #fff solid;}


  .case-contain { clear: both; width: 100%; padding: 75px calc(50% - 480px); box-sizing: border-box; background-image: url("../images/case_bg.webp"); background-repeat: no-repeat; background-size: cover; background-position: center top;}
  .case-contain .cases-list-full { width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .case-contain .cases-list-full .case-box { width: calc(100% / 3 - 20px); margin: 0 10px 45px 10px;}
  .case-contain .cases-list-full .case-box a { width: 100%; text-decoration: none; box-sizing: border-box; display: block;}
  .case-contain .cases-list-full .case-box a .pic { width: 100%; height: 225px; border-radius: 10px; display: flex; justify-content: center; align-items: center; overflow: hidden;}
  .case-contain .cases-list-full .case-box a .pic img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: 0.8s;}
  .case-contain .cases-list-full .case-box a:hover .pic img { width: 130%; height: 130%; object-fit: cover; object-position: center; display: block; transition: 0.8s;}
  .case-contain .cases-list-full .case-box a .area { width: 200px; margin: 20px auto 10px auto; padding: 8px 0; color: #303030; font-size: 1.1rem; text-align: center; border-radius: 20px; background-color: #dccda4;}
  .case-contain .cases-list-full .case-box a .intro { width: 100%; color: #4f4f4f; font-size: 1.3rem; text-align: center;}

  ul.page-num { clear: both; width: 100%; padding: 0; margin: 100px 0 0 0; list-style: none; display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap;}
  ul.page-num li { padding: 0; margin: 0 5px 10px 5px;}
  ul.page-num li a { width: 30px; height: 30px; color: #303030; font-size: 0.9rem; text-decoration: none; border: 2px #303030 solid; border-radius: 100%; display: flex; justify-content: center; align-items: center;}
  ul.page-num li.last a { width: 100px; height: 30px; color: #303030; font-size: 0.9rem; text-decoration: none; border: 2px #303030 solid; border-radius: 30px; display: flex; justify-content: center; align-items: center;}
  ul.page-num li a:hover, 
  ul.page-num li.last a:hover { background-color: #eee;}
  ul.page-num li a.sel, 
  ul.page-num li.last a.sel { color: #fff; background-color: #303030;}


  /************ cases details content ************/

  .case-details-contain { clear: both; width: 100%; padding: 0 0 40px 40px; box-sizing: border-box; background-image: url("../images/case_bg.webp"); background-repeat: no-repeat; background-size: cover; background-position: center top; display: flex; justify-content: flex-start; align-items: flex-start;}

  .case-list-open-mo { display: none;}

  .case-details-contain .col-lf-nav { width: 150px; padding: 20px 0 0 0; box-sizing: border-box;}
  .case-details-contain .col-lf-nav .arrow-prev-mo, 
  .case-details-contain .col-lf-nav .arrow-next-mo { display: none;}
  .case-details-contain .col-lf-nav .arrow-prev, 
  .case-details-contain .col-lf-nav .arrow-next { width: 150px; padding: 10px 0;}
  .case-details-contain .col-lf-nav .arrow-prev-mo img, 
  .case-details-contain .col-lf-nav .arrow-next-mo img { display: none;}
  .case-details-contain .col-lf-nav .arrow-prev img, 
  .case-details-contain .col-lf-nav .arrow-next img { width: 39px; height: auto; margin: 0 auto; cursor: pointer;}
  .case-details-contain .col-lf-nav .s-title-mo { display: none;}
  .case-details-contain .col-lf-nav .s-title { width: 100%; padding: 10px 0; color: #afafaf; font-size: 1.1rem; font-weight: 500; text-align: center;}
  .case-details-contain .col-lf-nav .case-box { width: 100%; padding: 10px 0;}
  .case-details-contain .col-lf-nav .case-box a { width: 100%; color: #4f4f4f; text-decoration: none; display: block;}
  .case-details-contain .col-lf-nav .case-box a .pic { width: 136px; height: 97px; margin: 0 auto; border-radius: 10px; display: flex; justify-content: center; align-items: center; overflow: hidden;}
  .case-details-contain .col-lf-nav .case-box a .pic img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: 0.8s;}
  .case-details-contain .col-lf-nav .case-box a .pic:hover img { width: 120%; height: 120%; object-fit: cover; object-position: center; display: block; transition: 0.8s;}
  .case-details-contain .col-lf-nav .case-box a .title { width: 150px; padding: 10px 0 0 0; font-size: 0.9rem; line-height: 1.2em; text-align: center;}

  .case-details-contain .col-rt-details-mo { display: none;}
  .case-details-contain .col-rt-details { width: calc(100% - 150px); padding: 70px 40px 0 80px; box-sizing: border-box; background-repeat: no-repeat; background-size: 640px auto; background-position: right 40px top 0;}
  .case-details-contain .col-rt-details .year-box { width: 95px; color: #b0b0b0; font-size: 5rem; font-family: "Noto Serif TC", serif; font-weight: 700; line-height: 0.8em; word-break: break-all;}
  .case-details-contain .col-rt-details .title-addr { width: 100%; padding: 30px 0 0 0; color: #14657d; font-size: 1.8rem; font-weight: 500; line-height: 1.2em;}
  .case-details-contain .col-rt-details .title-type { width: 100%; color: #14657d; font-size: 3rem; font-weight: 600;}
  .space-block { padding: 12vw 0 0 0;}
  .case-details-contain .col-rt-details .results-title { width: 100%; padding: 40px 0 0 0; color: #aa8420; font-size: 1.6rem; font-weight: 600;}
  .case-details-contain .col-rt-details .results-intro { width: 80%; color: #858585; font-size: 1.1rem; line-height: 1.8em; background-color: rgba(255,255,255,0.8);}
  .case-details-contain .col-rt-details .info-table-full { clear: both; width: 100%; margin: 30px 0 0 0; border-top: 3px #aa8420 solid;}
  .case-details-contain .col-rt-details .info-table-full .column-full { width: 100%; padding: 10px 0; font-size: 1.1rem; border-bottom: 3px #e8e8e8 solid; background-color: #f5f5f5; display: flex; justify-content: flex-start; align-items: stretch;}
  .case-details-contain .col-rt-details .info-table-full .column-full:nth-child(even) { background-color: #fff;}
  .case-details-contain .col-rt-details .info-table-full .column-full .column-1 { width: 20%; padding: 0 10px 0 50px; font-weight: 500; box-sizing: border-box;}
  .case-details-contain .col-rt-details .info-table-full .column-full .column-2 { width: 35%; padding: 0 10px 0 10px; box-sizing: border-box;}
  .case-details-contain .col-rt-details .info-table-full .column-full .column-3 { width: 20%; padding: 0 10px 0 10px; font-weight: 500; box-sizing: border-box;}
  .case-details-contain .col-rt-details .info-table-full .column-full .column-4 { width: 25%; padding: 0 50px 0 10px; box-sizing: border-box;}
  .info-table-full { clear: both; width: 100%; margin: 30px 0 0 0; border-top: 3px #aa8420 solid;}
  .info-table-full .column-full { width: 100%; padding: 10px 0; font-size: 1.1rem; border-bottom: 3px #e8e8e8 solid; background-color: #f5f5f5; display: flex; justify-content: flex-start; align-items: stretch;}
  .info-table-full .column-full:nth-child(even) { background-color: #fff;}
  .info-table-full .column-full .column-1 { width: 20%; padding: 0 10px 0 50px; font-weight: 500; box-sizing: border-box;}
  .info-table-full .column-full .column-2 { width: 35%; padding: 0 10px 0 10px; box-sizing: border-box;}
  .info-table-full .column-full .column-3 { width: 20%; padding: 0 10px 0 10px; font-weight: 500; box-sizing: border-box;}
  .info-table-full .column-full .column-4 { width: 25%; padding: 0 50px 0 10px; box-sizing: border-box;}
  
  .case-details-contain .col-rt-details .goback-btn { clear: both; width: 100%; margin: 40px 0 0 0; display: flex; justify-content: flex-end; box-sizing: border-box;}
  .case-details-contain .col-rt-details .goback-btn img { width: 127px; height: auto;}


  /************ news list content ************/

  .news-list-contain { clear: both; width: 100%; padding: 70px calc(50% - 480px) 40px calc(50% - 480px); box-sizing: border-box; background-image: url("../images/news_list_bg.webp"); background-repeat: no-repeat; background-size: cover; background-position: center top; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}

  .news-list-contain .col-news-sort { width: 180px;}
  .news-list-contain .col-news-sort ul.sort-nav { width: 156px; padding: 0; margin: 0 auto; list-style: none; display: block;}
  .news-list-contain .col-news-sort ul.sort-nav li { width: 100%; padding: 0 0 20px 0; margin: 0;}
  .news-list-contain .col-news-sort ul.sort-nav li a { width: 100%; padding: 10px 0; color: #4c4b4b; font-size: 1.2rem; font-weight: 500; text-align: center; text-decoration: none; border-radius: 30px; background-color: rgba(4,0,0,0.3); display: block;}
  .news-list-contain .col-news-sort ul.sort-nav li a:hover { background-color: rgba(4,0,0,0.2);}
  .news-list-contain .col-news-sort ul.sort-nav li a.sel { background-color: rgba(4,0,0,0.1);}

  .news-list-contain .col-news-list { width: calc(100% - 180px);}
  .news-list-contain .col-news-list ul.news-list { width: 100%; padding: 0 30px; margin: 0; box-sizing: border-box; list-style: none; display: block;}
  .news-list-contain .col-news-list ul.news-list li { width: 100%; padding: 10px 0; margin: 0 0 20px 0; font-size: 1.2rem; line-height: 1.4em; border-bottom: 1px #3d3d3d solid; display: flex; justify-content: flex-start; align-items: flex-start;}
  .news-list-contain .col-news-list ul.news-list li .date { width: 140px; padding: 5px 0 0 0; color: #3d3d3d; font-weight: 600;}
  .news-list-contain .col-news-list ul.news-list li .news-title { width: calc(100% - 140px - 160px); padding: 5px 10px 0 0; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
  .news-list-contain .col-news-list ul.news-list li .news-title a { color: #3d3d3d; text-decoration: none;}
  .news-list-contain .col-news-list ul.news-list li .news-title a:hover { color: #0e6b88;}
  .news-list-contain .col-news-list ul.news-list li .sort-box { width: 160px;}
  .news-list-contain .col-news-list ul.news-list li .sort-box a { width: 100%; padding: 6px 10px; box-sizing: border-box; color: #3d3d3d; font-weight: 500; text-decoration: none; border-radius: 30px; background-color: #efefef; display: flex; justify-content: flex-start; align-items: center;}
  .news-list-contain .col-news-list ul.news-list li .sort-box a:hover { background-color: #ccc;} 
  .news-list-contain .col-news-list ul.news-list li .sort-box a .sort { width: calc(100% - 34px); font-size: 1.1rem; font-weight: 500; text-align: center;}
  .news-list-contain .col-news-list ul.news-list li .sort-box a img.arrow { width: 34px; height: auto;}


  /************ news details content ************/

  .news-details-contain { clear: both; width: 100%; padding: 70px calc(50% - 480px) 40px calc(50% - 480px); box-sizing: border-box; background-image: url("../images/news_list_bg.webp"); background-repeat: no-repeat; background-size: cover; background-position: center top;}

  .news-details-contain .news-title-date { width: 100%; padding: 0 0 25px 0; color: #3d3d3d; font-size: 1.4rem; font-weight: 600; text-align: center; line-height: 1.2em; border-bottom: 1px #3d3d3d solid;}

  .news-details-contain .news-content { clear: both; width: 100%; padding: 60px 0; color: #3d3d3d; font-size: 1.1rem; line-height: 2em;}
  .news-details-contain .news-content img.news-photo { max-width: 100%; width: 450px; height: auto;}
  .news-details-contain .news-content img.news-photo.left { margin: 0 30px 30px 0; float: left;}
  .news-details-contain .news-content img.news-photo.right { margin: 0 0 30px 30px; float: right;}

  .news-details-contain .goback-btn { clear: both; width: 100%; margin: 40px 0 0 0; display: flex; justify-content: flex-end; box-sizing: border-box;}
  .news-details-contain .goback-btn img { width: 127px; height: auto;}


  /************ contact content ************/

  .contact-contain-1 { clear: both; width: 100%; padding: 100px calc(50% - 480px) 60px calc(50% - 480px); box-sizing: border-box; background-image: url("../images/contact_bg_1.webp"); background-repeat: no-repeat; background-size: cover; background-position: center top; display: flex; justify-content: flex-start; align-items: flex-start;}

  .contact-contain-1 .col-title { width: 320px; padding: 35px 0 0 20px; box-sizing: border-box;}
  .contact-contain-1 .col-title .path-title { width: 100%; color: #555;}
  .contact-contain-1 .col-title .path-title span.father-path { font-size: 1.4rem;}
  .contact-contain-1 .col-title .path-title span.father-path a { color: #555; text-decoration: none;}
  .contact-contain-1 .col-title .path-title span.father-path a:hover { border-bottom: 2px #555 solid;}
  .contact-contain-1 .col-title .path-title span.page-title { font-size: 3.4rem; letter-spacing: 0.1em; line-height: 1.6em;}
  .contact-contain-1 .col-title .path-title span.page-title a { color: #555; text-decoration: none;}
  .contact-contain-1 .col-title .path-title span.page-title a:hover { border-bottom: 2px #555 solid;}

  .contact-contain-1 .col-form-table { width: calc(100% - 320px);}
  .contact-contain-1 .col-form-table .top-words { width: 100%; padding: 0 0 0 100px; box-sizing: border-box;}
  .contact-contain-1 .col-form-table .top-words img.slogan { max-width: 100%; width: 574px; height: auto;}
  .contact-contain-1 .col-form-table .top-words .text-mo { display: none;}
  .contact-contain-1 .col-form-table .top-words .text { width: 100%; padding: 35px 0 0 0; color: #777; font-size: 1.2rem; line-height: 1.8em;}
  .contact-contain-1 .col-form-table .contact-form { width: 100%; margin: 40px 0 0 0; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .contact-contain-1 .col-form-table .contact-form .caption { width: 135px; padding: 10px 0 30px 0; color: #494848; font-size: 1.2rem; font-weight: 500; text-align: right;}
  .contact-contain-1 .col-form-table .contact-form .column { width: calc(100% - 135px); padding: 0 0 30px 30px; color: #494848; font-size: 1.2rem; box-sizing: border-box;}
  .contact-contain-1 .col-form-table .contact-form .column input[type=text], 
  .contact-contain-1 .col-form-table .contact-form .column input[type=tel], 
  .contact-contain-1 .col-form-table .contact-form .column input[type=email] { width: 100%; padding: 15px 30px; color: #494848; font-size: 1.2rem; border: 1px #494848 solid; border-radius: 30px; box-sizing: border-box;}
  .contact-contain-1 .col-form-table .contact-form .column input[type=radio] { width: 20px; height: 20px; margin: 15px 0 0 0;}
  .contact-contain-1 .col-form-table .contact-form .column textarea { width: 100%; height: 200px; padding: 15px 30px; color: #494848; font-size: 1.2rem; border: 1px #494848 solid; border-radius: 30px; box-sizing: border-box;}
  .contact-contain-1 .col-form-table .submit-btn { width: 100%; margin: 40px 0 0 0; display: flex; justify-content: flex-end;}
  .contact-contain-1 .col-form-table .submit-btn input[type=submit], 
  .contact-contain-1 .col-form-table .submit-btn input[type=button] { width: 160px; padding: 8px 0; color: #fff; font-size: 1.1rem; border-radius: 30px; border: 1px #494848 solid; background-color: #494848; box-sizing: border-box; cursor: pointer;}
  .contact-contain-1 .col-form-table .submit-btn input[type=submit]:hover, 
  .contact-contain-1 .col-form-table .submit-btn input[type=button]:hover { color: #494848; background-color: #ccc;}

  .contact-map { clear: both; width: 100%;}
  .contact-map iframe { width: 100%; height: 580px;}

  .contact-contain-2 { clear: both; width: 100%; padding: 50px calc(50% - 480px) 50px calc(50% - 480px); box-sizing: border-box; background-image: url("../images/contact_bg_2.webp"); background-repeat: no-repeat; background-size: cover; background-position: center top;}
  .contact-contain-2 img.slogan { width: 616px; height: auto;}
  .contact-contain-2 .text { width: 100%; padding: 30px 0 0 0; color: #ddb856; font-size: 1.8rem;}
  .contact-contain-2 ul.info-text { width: 100%; padding: 40px 0 0 0; margin: 0; list-style: none; display: block;}
  .contact-contain-2 ul.info-text li { padding: 0 0 10px 0; margin: 0; font-size: 1.1rem; line-height: 1.2em;}


  /************ site map ************/

  ul.sitemap { clear: both; width: 100%; padding: 140px calc(50% - 480px); margin: 0; list-style: none; box-sizing: border-box; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
  ul.sitemap li { padding: 0 10px; margin: 10px 0;}
  ul.sitemap li a { padding: 3px 10px; color: #333; font-size: 1.2rem; font-weight: 500; text-decoration: none; display: block;}
  ul.sitemap li a:hover { color: #fff; background-color: #0e6b88;}


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

  footer { clear: both; width: 100%; padding: 177px calc(50% - 480px) 45px calc(50% - 480px); box-sizing: border-box; background-color: #7b7b7b; background-image: url("../images/footer_bg.webp"); background-repeat: no-repeat; background-size: cover; background-position: center top;}

  .foot-contain { width: 100%; display: flex; justify-content: flex-start; align-items: flex-end;}
  
  .foot-contain .col-lf { width: 55%; display: flex; justify-content: flex-start; align-items: flex-end; flex-wrap: wrap;}
  .foot-contain .col-lf img.qr-code { width: 100px; height: auto; margin: 0 15px 0 0;}
  .foot-contain .col-lf .contact-info { width: calc(100% - 100px - 15px); color: #fff; font-size: 1.1rem;}
  .foot-contain .col-lf .contact-info img.icon { width: 75px; height: auto;}
  .foot-contain .col-lf .contact-info .title-en { width: 100%; padding: 5px 0; color: #ffe9ae; font-size: 1.2rem; font-weight: 600; letter-spacing: 0.1em;}
  .foot-contain .col-lf ul.info-text { width: 100%; padding: 40px 0 0 0; margin: 0; list-style: none; display: block;}
  .foot-contain .col-lf ul.info-text li { padding: 0 0 10px 0; margin: 0; color: #fff; font-size: 1.1rem; line-height: 1.2em;}
  
  .foot-contain .col-rt { width: 45%; display: flex; justify-content: flex-end; flex-wrap: wrap;}
  .foot-contain .col-rt img.footer-logo { width: 158px; height: auto;}
  .foot-contain .col-rt ul.footer-menu { clear: both; width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap;}
  .foot-contain .col-rt ul.footer-menu li { padding: 0; margin: 10px 0 0 15px;}
  .foot-contain .col-rt ul.footer-menu li a { color: #fff; font-size: 1.2rem; text-decoration: none;}
  .foot-contain .col-rt ul.footer-menu li a:hover { border-bottom: 2px #fff solid;}


}

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

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

  header.ind-top { clear: both; width: 100%; height: 70px; position: absolute; top: 0; left: 0; z-index: 99;}

  header.page-top { clear: both; width: 100%; height: 70px; position: absolute; top: 0; left: 0; z-index: 99;}

  .header-content { width: 100%; height: 100%; padding: 0 20px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  .header-content .header-logo { display: none;}
  .header-content .header-logo-mo { width: 200px;}
  .header-content .header-logo-mo img { width: 187px; height: auto;}
  
  .header-content nav#pc { display: none;}
  .header-content nav#mo { width: calc(100% - 200px);}
  .header-content nav#mo .nav-icon { width: 50px; color: #fff; font-size: 2rem; text-align: right; cursor: pointer; float: right;}
  .header-content nav#mo ul.nav-menu { width: 300px; height: 100vh; padding: 20px 40px; margin: 0; box-sizing: border-box; background-color: rgba(0,0,0,0.9); list-style: none; display: block; transition: right 0.3s linear; position: fixed; top: 0; right: -300px; z-index: 1000;}
  .header-content nav#mo ul.nav-menu li { width: 100%; padding: 0; margin: 0; border-bottom: 1px rgba(255,255,255,0.2) solid;}
  .header-content nav#mo ul.nav-menu li:first-child, 
  .header-content nav#mo ul.nav-menu li:last-child { border-bottom: 0;}
  .header-content nav#mo ul.nav-menu li a { width: 100%; padding: 15px 0; color: #fff; font-size: 1.1rem; text-align: center; text-decoration: none; display: block;}
  .header-content nav#mo ul.nav-menu li a:hover { color: aqua;}
  .header-content nav#mo ul.nav-menu li .close-icon { width: 50px; padding: 0 0 30px 0; margin: 0 auto; color: #fff; font-size: 2rem; text-align: center;}

  .header-content nav#page-pc { display: none;}
  .header-content nav#page-mo { width: calc(100% - 200px);}
  .header-content nav#page-mo .nav-icon { width: 50px; color: #fff; font-size: 2rem; text-align: right; cursor: pointer; float: right;}
  .header-content nav#page-mo ul.nav-menu { width: 300px; height: 100vh; padding: 20px 40px; margin: 0; box-sizing: border-box; background-color: rgba(0,0,0,0.9); list-style: none; display: block; transition: right 0.3s linear; position: fixed; top: 0; right: -300px; z-index: 1000;}
  .header-content nav#page-mo ul.nav-menu li { width: 100%; padding: 0; margin: 0; border-bottom: 1px rgba(255,255,255,0.2) solid;}
  .header-content nav#page-mo ul.nav-menu li:first-child, 
  .header-content nav#page-mo ul.nav-menu li:last-child { border-bottom: 0;}
  .header-content nav#page-mo ul.nav-menu li a { width: 100%; padding: 15px 0; color: #fff; font-size: 1.1rem; text-align: center; text-decoration: none; display: block;}
  .header-content nav#page-mo ul.nav-menu li a:hover { color: aqua;}
  .header-content nav#page-mo ul.nav-menu li .close-icon { width: 50px; padding: 0 0 30px 0; margin: 0 auto; color: #fff; font-size: 2rem; text-align: center;}


  /************ section #ind-banner ************/

  section#ind-banner { clear: both; width: 100%; height: 100vh; display: block; position: relative; z-index: 1;}

  .ind-banner-slide { width: 100%; height: 100vh; display: block; overflow: hidden;}
  .ind-banner-slide img.banner { width: 100%; height: 100vh; object-fit: cover; object-position: top 0 right 30%; display: block; position: relative; z-index: 1;}
  .ind-banner-slide img.ind-banner-text { width: 60vw; height: auto; position: absolute; top: calc(9vw + 70px); left: 15vw; z-index: 2;}
  .ind-banner-slide img.about-btn { width: 10vw; height: auto; position: absolute; bottom: 10vh; right: 10vw; z-index: 9;}


  /************ section #page-content ************/

  section#page-content { clear: both; width: 100%;}

  .about-contain-1 { clear: both; width: 100%; padding: 12vw 0 8vw 0; background-color: #edf1f2; background-image: url("../images/page_about_bg.webp"); background-repeat: no-repeat; background-size: 180% auto; background-position: center top;}
  .about-contain-1 img.about-top-text { width: 600px; height: auto; margin: 0 auto;}
  .about-contain-1 .about-top-intro-mo { display: none;}
  .about-contain-1 .about-top-intro { width: 100%; margin: 10vw auto 0 auto; color: #474747; font-size: 1.1rem; text-align: center; line-height: 1.8em;}
  .about-contain-1 .about-top-intro span.weight { color: #1b1b1b; font-weight: 600;}
  .about-contain-1 .about-ideas-title { width: 100%; margin: 10vw 0 0 0; color: #c1a352; font-size: 1.8rem; font-weight: 500; text-align: center;}
  .about-contain-1 .about-ideas-box { width: 90%; margin: 2.5vw auto 0 auto; position: relative;}
  .about-contain-1 .about-ideas-box img.bg-mo { display: none;}
  .about-contain-1 .about-ideas-box img.bg { width: 100%; height: auto; position: relative; z-index: 1;}
  .about-contain-1 .about-ideas-box .idea-box-full { width: 100%; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; z-index: 2;}
  .about-contain-1 .about-ideas-box .idea-box { width: calc(100% / 3); padding: 10vw 0 0 0; box-sizing: border-box;}
  .about-contain-1 .about-ideas-box .idea-box .content-1 { width: 100%; padding: 0 2vw 0 4vw; font-size: 1.8vw; text-align: center; box-sizing: border-box;}
  .about-contain-1 .about-ideas-box .idea-box .content-2 { width: 100%; padding: 0 2vw 0 2vw; font-size: 1.8vw; text-align: center; box-sizing: border-box;}
  .about-contain-1 .about-ideas-box .idea-box .content-3 { width: 100%; padding: 0 4vw 0 2vw; font-size: 1.8vw; text-align: center; box-sizing: border-box;}
  .about-contain-1 .about-ideas-box .idea-box .content-1 .title, 
  .about-contain-1 .about-ideas-box .idea-box .content-2 .title, 
  .about-contain-1 .about-ideas-box .idea-box .content-3 .title { width: 100%; padding: 0 0 0.5vw 0; color: #728b93; font-size: 4vw; font-family: "Noto Serif TC", serif; font-weight: 700;}

  .about-contain-2 { width: 100%; position: relative;}
  .about-contain-2 img.about-con-2 { width: 100%; height: auto; position: relative; z-index: 1;}
  .about-contain-2 .slogan-text-left { width: 50%; padding: 0 8vw 0 0; box-sizing: border-box; color: #fff; font-size: 1.8vw; letter-spacing: 0.3em; text-align: right; position: absolute; top: 18vw; left: 0; z-index: 2;}
  .about-contain-2 .slogan-text-right { width: 50%; padding: 0 0 0 9.5vw; box-sizing: border-box; color: #fff; font-size: 1.8vw; letter-spacing: 0.3em; text-align: left; position: absolute; top: 18vw; right: 0; z-index: 2;}


  /************ service content ************/

  .service-contain-1 { clear: both; width: 100%; padding: 95px 0 70px 0; background-image: url("../images/service_top_bg.webp"); background-repeat: no-repeat; background-size: cover; background-position: center top;}

  .serv-items-list { display: none;}
  .serv-items-list-mo { clear: both; width: 100%; padding: 40px 40px 0 40px; margin: 0; box-sizing: border-box; list-style: none;}
  .serv-items-list-mo a { width: 183px; padding: 8px 0; margin: 0 10px 20px 10px; color: #fff; font-size: 1.2rem; text-align: center; text-decoration: none; border-radius: 20px; background-color: rgba(255,255,255,0.3); display: block;}
  .serv-items-list-mo a:hover { color: #ffc332;}
  .serv-items-list-mo a.sel { color: #ffc332; background-color: rgba(0,0,0,0.3);}

  /*ul.serv-items-list { clear: both; width: 100%; padding: 0 40px; margin: 0; box-sizing: border-box; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  ul.serv-items-list li { width: 183px; padding: 0 5px; margin: 0 0 10px 0;}
  ul.serv-items-list li a { width: 100%; padding: 8px 0; color: #fff; font-size: 1.2rem; text-align: center; text-decoration: none; border-radius: 20px; background-color: rgba(255,255,255,0.3); display: block;}
  ul.serv-items-list li a:hover { color: #ffc332;}
  ul.serv-items-list li a.sel { color: #ffc332; background-color: rgba(0,0,0,0.3);}*/

  .service-contain-1 .item-content { clear: both; width: 100%; padding: 60px 40px; box-sizing: border-box;}
  .service-contain-1 .item-content .intro-text { width: 100%; color: #fff; font-size: 1.1rem; line-height: 2em; display: none;}
  .service-contain-1 .item-content .intro-text:first-child { display: block;}
  .service-contain-1 .item-content .intro-stitle { width: 100%; margin: -50px 0 0 0;}
  .service-contain-1 .item-content .intro-stitle img.stitle { width: 260px; height: auto; margin: 0 auto;}
  .service-contain-1 .item-content .intro-stitle img.intro-1 { width: 486px; height: auto; margin: 0 auto;}
  .service-contain-1 .feature-list-full { clear: both; width: 100%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  .service-contain-1 .feature-list-full.position-1 { margin: -50px 0 0 0;}
  .service-contain-1 .feature-list-full.position-2 { margin: 0 0 0 0;}
  .service-contain-1 .feature-list-full.position-3 { margin: 0 0 0 0;}
  .service-contain-1 .feature-list-full img.item-1 { width: 171px; height: auto; margin: 0 12vw 0 0;}
  .service-contain-1 .feature-list-full img.item-2 { width: 196px; height: auto; margin: 0 0 0 12vw;}
  .service-contain-1 .feature-list-full img.item-3 { width: 287px; height: auto; margin: 0 8vw 0 0;}
  .service-contain-1 .feature-list-full img.item-4 { width: 192px; height: auto; margin: 0 8.5vw 0 8vw;}
  .service-contain-1 .feature-list-full img.item-5 { width: 174px; height: auto; margin: 0 0 0 8.5vw;}
  .service-contain-1 .feature-list-full img.item-6 { width: 243px; height: auto; margin: 0 5vw 0 0;}
  .service-contain-1 .feature-list-full img.item-7 { width: 267px; height: auto; margin: 0 0 0 7.5vw;}


  .service-contain-2 { clear: both; width: 100%; height: 600px; position: relative;}
  .service-contain-2 img.serv-con-2-bg { width: 100%; height: 100%; object-fit: cover; object-position: center; position: relative; z-index: 1;}
  .service-contain-2 img.linebar { width: 700px; height: auto; margin: 0 auto; position: absolute; top: 195px; left: calc(50% - 350px); z-index: 2;}
  .service-contain-2 .intro-text { width: 700px; font-size: 1.4rem; font-weight: 500; text-align: center; position: absolute; top: 290px; left: calc(50% - 350px); z-index: 2;}


  /************ cases content ************/

  .page-banner-box { clear: both; width: 100%; height: 364px; position: relative; overflow: hidden;}
  .page-banner-box img.banner-bg { width: 100%; height: 100%; object-fit: cover; object-position: center; position: relative; z-index: 1;}
  .page-banner-box .path-title { width: 100%; padding: 0 40px; color: #fff; box-sizing: border-box; position: absolute; top: 140px; left: 0; z-index: 2;}
  .page-banner-box .path-title span.father-path { font-size: 1.4rem;}
  .page-banner-box .path-title span.father-path a { color: #fff; text-decoration: none;}
  .page-banner-box .path-title span.father-path a:hover { border-bottom: 2px #fff solid;}
  .page-banner-box .path-title span.page-title { font-size: 3.4rem; letter-spacing: 0.1em; line-height: 1.6em;}
  .page-banner-box .path-title span.page-title a { color: #fff; text-decoration: none;}
  .page-banner-box .path-title span.page-title a:hover { border-bottom: 2px #fff solid;}


  .case-contain { clear: both; width: 100%; padding: 75px 40px; box-sizing: border-box; background-image: url("../images/case_bg.webp"); background-repeat: no-repeat; background-size: cover; background-position: center top;}
  .case-contain .cases-list-full { width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .case-contain .cases-list-full .case-box { width: calc(100% / 2 - 20px); margin: 0 10px 45px 10px;}
  .case-contain .cases-list-full .case-box a { width: 100%; text-decoration: none; box-sizing: border-box; display: block;}
  .case-contain .cases-list-full .case-box a .pic { width: 100%; height: 225px; border-radius: 10px; display: flex; justify-content: center; align-items: center; overflow: hidden;}
  .case-contain .cases-list-full .case-box a .pic img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: 0.8s;}
  .case-contain .cases-list-full .case-box a:hover .pic img { width: 130%; height: 130%; object-fit: cover; object-position: center; display: block; transition: 0.8s;}
  .case-contain .cases-list-full .case-box a .area { width: 200px; margin: 20px auto 10px auto; padding: 8px 0; color: #303030; font-size: 1.1rem; text-align: center; border-radius: 20px; background-color: #dccda4;}
  .case-contain .cases-list-full .case-box a .intro { width: 100%; color: #4f4f4f; font-size: 1.3rem; text-align: center;}

  ul.page-num { clear: both; width: 100%; padding: 0; margin: 100px 0 0 0; list-style: none; display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap;}
  ul.page-num li { padding: 0; margin: 0 5px 10px 5px;}
  ul.page-num li a { width: 30px; height: 30px; color: #303030; font-size: 0.9rem; text-decoration: none; border: 2px #303030 solid; border-radius: 100%; display: flex; justify-content: center; align-items: center;}
  ul.page-num li.last a { width: 100px; height: 30px; color: #303030; font-size: 0.9rem; text-decoration: none; border: 2px #303030 solid; border-radius: 30px; display: flex; justify-content: center; align-items: center;}
  ul.page-num li a:hover, 
  ul.page-num li.last a:hover { background-color: #eee;}
  ul.page-num li a.sel, 
  ul.page-num li.last a.sel { color: #fff; background-color: #303030;}


  /************ cases details content ************/

  .case-details-contain { clear: both; width: 100%; padding: 0 0 40px 0; box-sizing: border-box; background-image: url("../images/case_bg.webp"); background-repeat: no-repeat; background-size: cover; background-position: center top; overflow: hidden;}

  .case-list-open-mo { width: 65px; padding: 10px 0; color: #fff; font-size: 1.1rem; text-align: center; border-radius: 0 30px 30px 0; background-color: rgba(220,164,18,0.8); transition: right 0.3s linear; position: absolute; top: 60vh; left: 0; z-index: 999;}
  .case-list-open-mo img { width: 30px; height: auto; margin: 0 auto 5px auto;}

  .case-details-contain .col-lf-nav { width: 130px; padding: 20px 10px; box-sizing: border-box; background-color: rgba(240,235,222,0.8); transition: right 0.3s linear; position: absolute; top: 48vh; left: -130px; z-index: 999;}
  .case-details-contain .col-lf-nav .arrow-prev, 
  .case-details-contain .col-lf-nav .arrow-next { width: 100%; padding: 10px 0;}
  .case-details-contain .col-lf-nav .arrow-prev img, 
  .case-details-contain .col-lf-nav .arrow-next img { width: 39px; height: auto; margin: 0 auto; cursor: pointer;}
  .case-details-contain .col-lf-nav .s-title { width: 100%; padding: 10px 0; color: #afafaf; font-size: 1rem; font-weight: 500; text-align: center;}
  .case-details-contain .col-lf-nav .case-box { width: 100%; padding: 10px 0;}
  .case-details-contain .col-lf-nav .case-box a { width: 100%; color: #4f4f4f; text-decoration: none; display: block;}
  .case-details-contain .col-lf-nav .case-box a .pic { width: 110px; height: 78px; margin: 0 auto; border-radius: 10px; display: flex; justify-content: center; align-items: center; overflow: hidden;}
  .case-details-contain .col-lf-nav .case-box a .pic img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: 0.8s;}
  .case-details-contain .col-lf-nav .case-box a .pic:hover img { width: 120%; height: 120%; object-fit: cover; object-position: center; display: block; transition: 0.8s;}
  .case-details-contain .col-lf-nav .case-box a .title { width: 100%; padding: 10px 0 0 0; font-size: 0.8rem; line-height: 1.2em; text-align: center;}

  .case-details-contain .col-rt-details-mo { display: none;}
  .case-details-contain .col-rt-details { width: 100%; padding: 40px 40px 0 60px; box-sizing: border-box; background-repeat: no-repeat; background-size: 540px auto; background-position: right 0 top 0;}
  .case-details-contain .col-rt-details .year-box { width: 95px; color: #b0b0b0; font-size: 5rem; font-family: "Noto Serif TC", serif; font-weight: 700; line-height: 0.8em; word-break: break-all;}
  .case-details-contain .col-rt-details .title-addr { width: 100%; padding: 30px 0 0 0; color: #14657d; font-size: 1.8rem; font-weight: 500; line-height: 1.2em;}
  .case-details-contain .col-rt-details .title-type { width: 100%; color: #14657d; font-size: 3rem; font-weight: 600;}
  .space-block { padding: 12vw 0 0 0;}
  .case-details-contain .col-rt-details .results-title { width: 100%; padding: 40px 0 0 0; color: #aa8420; font-size: 1.6rem; font-weight: 600;}
  .case-details-contain .col-rt-details .results-intro { width: 100%; color: #858585; font-size: 1.1rem; font-weight: 500; line-height: 1.8em; background-color: rgba(255,255,255,0.8);}
  .case-details-contain .col-rt-details .info-table-full { clear: both; width: 100%; margin: 30px 0 0 0; border-top: 3px #aa8420 solid;}
  .case-details-contain .col-rt-details .info-table-full .column-full { width: 100%; padding: 10px 0; font-size: 1.1rem; border-bottom: 3px #e8e8e8 solid; background-color: #f5f5f5; display: flex; justify-content: flex-start; align-items: stretch;}
  .case-details-contain .col-rt-details .info-table-full .column-full:nth-child(even) { background-color: #fff;}
  .case-details-contain .col-rt-details .info-table-full .column-full .column-1 { width: 20%; padding: 0 10px 0 30px; font-weight: 500; box-sizing: border-box;}
  .case-details-contain .col-rt-details .info-table-full .column-full .column-2 { width: 35%; padding: 0 10px 0 10px; box-sizing: border-box;}
  .case-details-contain .col-rt-details .info-table-full .column-full .column-3 { width: 20%; padding: 0 10px 0 10px; font-weight: 500; box-sizing: border-box;}
  .case-details-contain .col-rt-details .info-table-full .column-full .column-4 { width: 25%; padding: 0 30px 0 10px; box-sizing: border-box;}
  
  .case-details-contain .col-rt-details .goback-btn { clear: both; width: 100%; margin: 40px 0 0 0; display: flex; justify-content: flex-end; box-sizing: border-box;}
  .case-details-contain .col-rt-details .goback-btn img { width: 127px; height: auto;}


  /************ news list content ************/

  .news-list-contain { clear: both; width: 100%; padding: 60px 40px; box-sizing: border-box; background-image: url("../images/news_list_bg.webp"); background-repeat: no-repeat; background-size: cover; background-position: center top;}

  .news-list-contain .col-news-sort { width: 100%;}
  .news-list-contain .col-news-sort ul.sort-nav { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  .news-list-contain .col-news-sort ul.sort-nav li { width: 156px; padding: 0 10px 20px 10px; margin: 0;}
  .news-list-contain .col-news-sort ul.sort-nav li a { width: 160px; padding: 10px 0; color: #4c4b4b; font-size: 1.2rem; font-weight: 500; text-align: center; text-decoration: none; border-radius: 30px; background-color: rgba(4,0,0,0.3); display: block;}
  .news-list-contain .col-news-sort ul.sort-nav li a:hover { background-color: rgba(4,0,0,0.2);}
  .news-list-contain .col-news-sort ul.sort-nav li a.sel { background-color: rgba(4,0,0,0.1);}

  .news-list-contain .col-news-list { width: 100%; margin: 30px 0 0 0;}
  .news-list-contain .col-news-list ul.news-list { width: 100%; padding: 0; margin: 0; box-sizing: border-box; list-style: none; display: block;}
  .news-list-contain .col-news-list ul.news-list li { width: 100%; padding: 10px 0; margin: 0 0 20px 0; font-size: 1.2rem; line-height: 1.4em; border-bottom: 1px #3d3d3d solid; display: flex; justify-content: flex-start; align-items: flex-start;}
  .news-list-contain .col-news-list ul.news-list li .date { width: 140px; padding: 5px 0 0 0; color: #3d3d3d; font-weight: 600;}
  .news-list-contain .col-news-list ul.news-list li .news-title { width: calc(100% - 140px - 160px); padding: 5px 10px 0 0; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
  .news-list-contain .col-news-list ul.news-list li .news-title a { color: #3d3d3d; text-decoration: none;}
  .news-list-contain .col-news-list ul.news-list li .news-title a:hover { color: #0e6b88;}
  .news-list-contain .col-news-list ul.news-list li .sort-box { width: 160px;}
  .news-list-contain .col-news-list ul.news-list li .sort-box a { width: 100%; padding: 6px 10px; box-sizing: border-box; color: #3d3d3d; font-weight: 500; text-decoration: none; border-radius: 30px; background-color: #efefef; display: flex; justify-content: flex-start; align-items: center;}
  .news-list-contain .col-news-list ul.news-list li .sort-box a:hover { background-color: #ccc;} 
  .news-list-contain .col-news-list ul.news-list li .sort-box a .sort { width: calc(100% - 34px); font-size: 1.1rem; font-weight: 500; text-align: center;}
  .news-list-contain .col-news-list ul.news-list li .sort-box a img.arrow { width: 34px; height: auto;}


  /************ news details content ************/

  .news-details-contain { clear: both; width: 100%; padding: 70px 40px 40px 40px; box-sizing: border-box; background-image: url("../images/news_list_bg.webp"); background-repeat: no-repeat; background-size: cover; background-position: center top;}

  .news-details-contain .news-title-date { width: 100%; padding: 0 0 25px 0; color: #3d3d3d; font-size: 1.4rem; font-weight: 600; text-align: center; line-height: 1.2em; border-bottom: 1px #3d3d3d solid;}

  .news-details-contain .news-content { clear: both; width: 100%; padding: 60px 0; color: #3d3d3d; font-size: 1.1rem; line-height: 2em;}
  .news-details-contain .news-content img.news-photo { max-width: 100%; width: 450px; height: auto;}
  .news-details-contain .news-content img.news-photo.left { margin: 0 30px 30px 0; float: left;}
  .news-details-contain .news-content img.news-photo.right { margin: 0 0 30px 30px; float: right;}

  .news-details-contain .goback-btn { clear: both; width: 100%; margin: 40px 0 0 0; display: flex; justify-content: flex-end; box-sizing: border-box;}
  .news-details-contain .goback-btn img { width: 127px; height: auto;}


  /************ contact content ************/

  .contact-contain-1 { clear: both; width: 100%; padding: 100px 40px 60px 40px; box-sizing: border-box; background-image: url("../images/contact_bg_mo.webp"); background-repeat: no-repeat; background-size: cover; background-position: center top;}

  .contact-contain-1 .col-title { width: 100%;}
  .contact-contain-1 .col-title .path-title { width: 100%; color: #555;}
  .contact-contain-1 .col-title .path-title span.father-path { font-size: 1.4rem;}
  .contact-contain-1 .col-title .path-title span.father-path a { color: #555; text-decoration: none;}
  .contact-contain-1 .col-title .path-title span.father-path a:hover { border-bottom: 2px #555 solid;}
  .contact-contain-1 .col-title .path-title span.page-title { font-size: 3.4rem; letter-spacing: 0.1em; line-height: 1.6em;}
  .contact-contain-1 .col-title .path-title span.page-title a { color: #555; text-decoration: none;}
  .contact-contain-1 .col-title .path-title span.page-title a:hover { border-bottom: 2px #555 solid;}

  .contact-contain-1 .col-form-table { width: 100%; margin: 40px 0 0 0;}
  .contact-contain-1 .col-form-table .top-words { width: 100%;}
  .contact-contain-1 .col-form-table .top-words img.slogan { max-width: 100%; width: 574px; height: auto;}
  .contact-contain-1 .col-form-table .top-words .text-mo { display: none;}
  .contact-contain-1 .col-form-table .top-words .text { width: 100%; padding: 35px 0 0 0; color: #777; font-size: 1.2rem; font-weight: 500; line-height: 1.8em;}
  .contact-contain-1 .col-form-table .contact-form { width: 100%; margin: 40px 0 0 0; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .contact-contain-1 .col-form-table .contact-form .caption { width: 135px; padding: 10px 0 30px 0; color: #494848; font-size: 1.2rem; text-align: right;}
  .contact-contain-1 .col-form-table .contact-form .column { width: calc(100% - 135px); padding: 0 0 30px 30px; color: #494848; font-size: 1.2rem; box-sizing: border-box;}
  .contact-contain-1 .col-form-table .contact-form .column input[type=text], 
  .contact-contain-1 .col-form-table .contact-form .column input[type=tel], 
  .contact-contain-1 .col-form-table .contact-form .column input[type=email] { width: 100%; padding: 15px 30px; color: #494848; font-size: 1.2rem; border: 1px #494848 solid; border-radius: 30px; box-sizing: border-box;}
  .contact-contain-1 .col-form-table .contact-form .column input[type=radio] { width: 20px; height: 20px; margin: 15px 0 0 0;}
  .contact-contain-1 .col-form-table .contact-form .column textarea { width: 100%; height: 200px; padding: 15px 30px; color: #494848; font-size: 1.2rem; border: 1px #494848 solid; border-radius: 30px; box-sizing: border-box;}
  .contact-contain-1 .col-form-table .submit-btn { width: 100%; margin: 40px 0 0 0; display: flex; justify-content: flex-end;}
  .contact-contain-1 .col-form-table .submit-btn input[type=submit], 
  .contact-contain-1 .col-form-table .submit-btn input[type=button] { width: 160px; padding: 8px 0; color: #fff; font-size: 1.1rem; border-radius: 30px; border: 1px #494848 solid; background-color: #494848; box-sizing: border-box; cursor: pointer;}
  .contact-contain-1 .col-form-table .submit-btn input[type=submit]:hover, 
  .contact-contain-1 .col-form-table .submit-btn input[type=button]:hover { color: #494848; background-color: #ccc;}

  .contact-map { clear: both; width: 100%;}
  .contact-map iframe { width: 100%; height: 460px;}

  .contact-contain-2 { clear: both; width: 100%; padding: 50px 40px 50px 40px; box-sizing: border-box; background-image: url("../images/contact_bg_2.webp"); background-repeat: no-repeat; background-size: cover; background-position: center top;}
  .contact-contain-2 img.slogan { width: 616px; height: auto;}
  .contact-contain-2 .text { width: 100%; padding: 30px 0 0 0; color: #ddb856; font-size: 1.8rem;}
  .contact-contain-2 ul.info-text { width: 100%; padding: 40px 0 0 0; margin: 0; list-style: none; display: block;}
  .contact-contain-2 ul.info-text li { padding: 0 0 10px 0; margin: 0; font-size: 1.1rem; line-height: 1.2em;}


  /************ site map ************/

  ul.sitemap { clear: both; width: 100%; padding: 140px 40px; margin: 0; list-style: none; box-sizing: border-box; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
  ul.sitemap li { padding: 0 10px; margin: 10px 0;}
  ul.sitemap li a { padding: 3px 10px; color: #333; font-size: 1.2rem; font-weight: 500; text-decoration: none; display: block;}
  ul.sitemap li a:hover { color: #fff; background-color: #0e6b88;}


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

  footer { clear: both; width: 100%; padding: 45px 40px; box-sizing: border-box; background-color: #7b7b7b; background-image: url("../images/footer_bg.webp"); background-repeat: no-repeat; background-size: cover; background-position: center top;}

  .foot-contain { width: 100%;}
  
  .foot-contain .col-lf { width: 100%; display: flex; justify-content: flex-start; align-items: flex-end; flex-wrap: wrap;}
  .foot-contain .col-lf img.qr-code { width: 100px; height: auto; margin: 0 15px 0 0;}
  .foot-contain .col-lf .contact-info { width: calc(100% - 100px - 15px); color: #fff; font-size: 1.1rem;}
  .foot-contain .col-lf .contact-info img.icon { width: 75px; height: auto;}
  .foot-contain .col-lf .contact-info .title-en { width: 100%; padding: 5px 0; color: #ffe9ae; font-size: 1.2rem; font-weight: 600; letter-spacing: 0.1em;}
  .foot-contain .col-lf ul.info-text { width: 100%; padding: 40px 0 0 0; margin: 0; list-style: none; display: block;}
  .foot-contain .col-lf ul.info-text li { padding: 0 0 10px 0; margin: 0; color: #fff; font-size: 1.1rem; line-height: 1.2em;}
  
  .foot-contain .col-rt { width: 100%; margin: 30px 0 0 0; display: flex; justify-content: flex-end; flex-wrap: wrap;}
  .foot-contain .col-rt img.footer-logo { width: 158px; height: auto;}
  .foot-contain .col-rt ul.footer-menu { clear: both; width: 100%; padding: 0; margin: 10px 0 0 0; list-style: none; display: flex; justify-content: flex-end; align-items: center;}
  .foot-contain .col-rt ul.footer-menu li { padding: 0; margin: 0 0 0 15px;}
  .foot-contain .col-rt ul.footer-menu li a { color: #fff; font-size: 1.2rem; text-decoration: none;}
  .foot-contain .col-rt ul.footer-menu li a:hover { border-bottom: 2px #fff solid;}


}

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

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

  header.ind-top { clear: both; width: 100%; height: 70px; position: absolute; top: 0; left: 0; z-index: 99;}

  header.page-top { clear: both; width: 100%; height: 70px; position: absolute; top: 0; left: 0; z-index: 99;}

  .header-content { width: 100%; height: 100%; padding: 0 20px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  .header-content .header-logo { display: none;}
  .header-content .header-logo-mo { width: 200px;}
  .header-content .header-logo-mo img { width: 187px; height: auto;}
  
  .header-content nav#pc { display: none;}
  .header-content nav#mo { width: calc(100% - 200px);}
  .header-content nav#mo .nav-icon { width: 50px; color: #fff; font-size: 2rem; text-align: right; cursor: pointer; float: right;}
  .header-content nav#mo ul.nav-menu { width: 300px; height: 100vh; padding: 20px 40px; margin: 0; box-sizing: border-box; background-color: rgba(0,0,0,0.9); list-style: none; display: block; transition: right 0.3s linear; position: fixed; top: 0; right: -300px; z-index: 1000;}
  .header-content nav#mo ul.nav-menu li { width: 100%; padding: 0; margin: 0; border-bottom: 1px rgba(255,255,255,0.2) solid;}
  .header-content nav#mo ul.nav-menu li:first-child, 
  .header-content nav#mo ul.nav-menu li:last-child { border-bottom: 0;}
  .header-content nav#mo ul.nav-menu li a { width: 100%; padding: 15px 0; color: #fff; font-size: 1.1rem; text-align: center; text-decoration: none; display: block;}
  .header-content nav#mo ul.nav-menu li a:hover { color: aqua;}
  .header-content nav#mo ul.nav-menu li .close-icon { width: 50px; padding: 0 0 30px 0; margin: 0 auto; color: #fff; font-size: 2rem; text-align: center;}

  .header-content nav#page-pc { display: none;}
  .header-content nav#page-mo { width: calc(100% - 200px);}
  .header-content nav#page-mo .nav-icon { width: 50px; color: #fff; font-size: 2rem; text-align: right; cursor: pointer; float: right;}
  .header-content nav#page-mo ul.nav-menu { width: 300px; height: 100vh; padding: 20px 40px; margin: 0; box-sizing: border-box; background-color: rgba(0,0,0,0.9); list-style: none; display: block; transition: right 0.3s linear; position: fixed; top: 0; right: -300px; z-index: 1000;}
  .header-content nav#page-mo ul.nav-menu li { width: 100%; padding: 0; margin: 0; border-bottom: 1px rgba(255,255,255,0.2) solid;}
  .header-content nav#page-mo ul.nav-menu li:first-child, 
  .header-content nav#page-mo ul.nav-menu li:last-child { border-bottom: 0;}
  .header-content nav#page-mo ul.nav-menu li a { width: 100%; padding: 15px 0; color: #fff; font-size: 1.1rem; text-align: center; text-decoration: none; display: block;}
  .header-content nav#page-mo ul.nav-menu li a:hover { color: aqua;}
  .header-content nav#page-mo ul.nav-menu li .close-icon { width: 50px; padding: 0 0 30px 0; margin: 0 auto; color: #fff; font-size: 2rem; text-align: center;}


  /************ section #ind-banner ************/

  section#ind-banner { clear: both; width: 100%; height: 100%; position: relative; z-index: 1;}

  .ind-banner-slide { width: 100%; height: 100%; overflow: hidden;}
  .ind-banner-slide img.banner { width: 100%; height: 100%; object-fit: cover; object-position: top 0 left 65%; display: block; position: relative; z-index: 1;}
  .ind-banner-slide img.ind-banner-text { width: 90vw; height: auto; position: absolute; top: 35vw; left: 5vw; z-index: 2;}
  .ind-banner-slide img.about-btn { width: 20vw; height: auto; position: absolute; bottom: 10vh; right: 10vw; z-index: 9;}


  /************ section #page-content ************/

  section#page-content { clear: both; width: 100%;}

  .about-contain-1 { clear: both; width: 100%; padding: 140px 20px 80px 20px; box-sizing: border-box; background-color: #edf1f2; background-image: url("../images/page_about_bg.webp"); background-repeat: no-repeat; background-size: 260% auto; background-position: center top;}
  .about-contain-1 img.about-top-text { max-width: 100%; height: auto; margin: 0 auto;}
  .about-contain-1 .about-top-intro { display: none;}
  .about-contain-1 .about-top-intro-mo { width: 100%; margin: 80px 0 0 0; color: #474747; font-size: 1.1rem; text-align: center; line-height: 1.8em;}
  .about-contain-1 .about-top-intro-mo span.weight { color: #1b1b1b; font-weight: 600;}
  .about-contain-1 .about-ideas-title { width: 100%; margin: 80px 0 0 0; color: #c1a352; font-size: 1.8rem; font-weight: 500; text-align: center;}
  .about-contain-1 .about-ideas-box { width: 90%; margin: 2.5vw auto 0 auto; position: relative;}
  .about-contain-1 .about-ideas-box img.bg { display: none;}
  .about-contain-1 .about-ideas-box img.bg-mo { width: 70vw; height: auto; margin: 0 auto; position: relative; z-index: 1;}
  .about-contain-1 .about-ideas-box .idea-box-full { width: 100%; padding: 5vw 0 0 0; box-sizing: border-box; position: absolute; top: 0; left: 0; z-index: 2;}
  .about-contain-1 .about-ideas-box .idea-box { width: 100%;}
  .about-contain-1 .about-ideas-box .idea-box .content-1 { width: 100%; padding: 12vw 0 23vw 0; font-size: 4vw; text-align: center; box-sizing: border-box}
  .about-contain-1 .about-ideas-box .idea-box .content-2 { width: 100%; padding: 6vw 0 23vw 0; font-size: 4vw; text-align: center; box-sizing: border-box}
  .about-contain-1 .about-ideas-box .idea-box .content-3 { width: 100%; padding: 3vw 0 23vw 0; font-size: 4vw; text-align: center; box-sizing: border-box}
  .about-contain-1 .about-ideas-box .idea-box .content-1 .title, 
  .about-contain-1 .about-ideas-box .idea-box .content-2 .title, 
  .about-contain-1 .about-ideas-box .idea-box .content-3 .title { width: 100%; padding: 0 0 2vw 0; color: #728b93; font-size: 8vw; font-family: "Noto Serif TC", serif; font-weight: 700;}

  .about-contain-2 { width: 100%; position: relative; overflow: hidden;}
  .about-contain-2 img.about-con-2 { width: 180%; height: auto; margin: 0 0 0 -40%; position: relative; z-index: 1;}
  .about-contain-2 .slogan-text-left { width: 100%; color: #fff; font-size: 4vw; letter-spacing: 0.2em; text-align: center; position: absolute; top: 30vw; left: 0; z-index: 2;}
  .about-contain-2 .slogan-text-right { width: 100%; color: #fff; font-size: 4vw; letter-spacing: 0.2em; text-align: center; position: absolute; top: 40vw; left: 0; z-index: 2;}


  /************ service content ************/

  .service-contain-1 { clear: both; width: 100%; padding: 135px 0 70px 0; background-image: url("../images/service_top_bg.webp"); background-repeat: no-repeat; background-size: cover; background-position: center top;}

  .serv-items-list { display: none;}
  .serv-items-list-mo { clear: both; width: 100%; padding: 40px 20px 0 20px; margin: 0; box-sizing: border-box; list-style: none;}
  .serv-items-list-mo a { width: 183px; padding: 8px 0; margin: 0 10px 20px 10px; color: #fff; font-size: 1.2rem; text-align: center; text-decoration: none; border-radius: 20px; background-color: rgba(255,255,255,0.3); display: block;}
  .serv-items-list-mo a:hover { color: #ffc332;}
  .serv-items-list-mo a.sel { color: #ffc332; background-color: rgba(0,0,0,0.3);}

  /*ul.serv-items-list { clear: both; width: 100%; padding: 0 20px; margin: 0; box-sizing: border-box; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  ul.serv-items-list li { width: 170px; padding: 0 5px; margin: 0 0 10px 0;}
  ul.serv-items-list li a { width: 100%; padding: 8px 0; color: #fff; font-size: 1.2rem; text-align: center; text-decoration: none; border-radius: 20px; background-color: rgba(255,255,255,0.3); display: block;}
  ul.serv-items-list li a:hover { color: #ffc332;}
  ul.serv-items-list li a.sel { color: #ffc332; background-color: rgba(0,0,0,0.3);}*/

  .service-contain-1 .item-content { clear: both; width: 100%; padding: 60px 20px; box-sizing: border-box;}
  .service-contain-1 .item-content .intro-text { width: 100%; color: #fff; font-size: 1.1rem; line-height: 2em; display: none;}
  .service-contain-1 .item-content .intro-text:first-child { display: block;}
  .service-contain-1 .item-content .intro-stitle { width: 100%; margin: -50px 0 0 0;}
  .service-contain-1 .item-content .intro-stitle img.stitle { width: 260px; height: auto; margin: 0 auto;}
  .service-contain-1 .item-content .intro-stitle img.intro-1 { max-width: 100%; width: 486px; height: auto; margin: 0 auto;}
  .service-contain-1 .feature-list-full { clear: both; width: 100%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  .service-contain-1 .feature-list-full.position-1 { margin: -50px 0 0 0;}
  .service-contain-1 .feature-list-full.position-2 { margin: 0 0 0 0;}
  .service-contain-1 .feature-list-full.position-3 { margin: 0 0 0 0;}
  .service-contain-1 .feature-list-full img.item-1 { width: 171px; height: auto; margin: 0 5vw 0 0;}
  .service-contain-1 .feature-list-full img.item-2 { width: 196px; height: auto; margin: 0 0 0 5vw;}
  .service-contain-1 .feature-list-full img.item-3 { width: 287px; height: auto; margin: 0 5vw 0 0;}
  .service-contain-1 .feature-list-full img.item-4 { width: 192px; height: auto; margin: 0 5vw 0 5vw;}
  .service-contain-1 .feature-list-full img.item-5 { width: 174px; height: auto; margin: 0 0 0 5vw;}
  .service-contain-1 .feature-list-full img.item-6 { width: 243px; height: auto; margin: 0 5vw 0 0;}
  .service-contain-1 .feature-list-full img.item-7 { width: 267px; height: auto; margin: 0 0 0 5vw;}


  .service-contain-2 { clear: both; width: 100%; height: 600px; position: relative;}
  .service-contain-2 img.serv-con-2-bg { width: 100%; height: 100%; object-fit: cover; object-position: center; position: relative; z-index: 1;}
  .service-contain-2 img.linebar { width: 90vw; height: auto; margin: 0 auto; position: absolute; top: 195px; left: calc(50% - 45vw); z-index: 2;}
  .service-contain-2 .intro-text { width: 90vw; font-size: 1.4rem; font-weight: 500; text-align: center; position: absolute; top: 290px; left: calc(50% - 45vw); z-index: 2;}


  /************ cases content ************/

  .page-banner-box { clear: both; width: 100%; height: 264px; position: relative; overflow: hidden;}
  .page-banner-box img.banner-bg { width: 100%; height: 100%; object-fit: cover; object-position: center; position: relative; z-index: 1;}
  .page-banner-box .path-title { width: 100%; padding: 40px 20px 0 20px; color: #fff; box-sizing: border-box; position: absolute; top: 80px; left: 0; z-index: 2;}
  .page-banner-box .path-title span.father-path { font-size: 1.2rem;}
  .page-banner-box .path-title span.father-path a { color: #fff; text-decoration: none;}
  .page-banner-box .path-title span.father-path a:hover { border-bottom: 2px #fff solid;}
  .page-banner-box .path-title span.page-title { font-size: 2.6rem; letter-spacing: 0.1em; line-height: 1.2em;}
  .page-banner-box .path-title span.page-title a { color: #fff; text-decoration: none;}
  .page-banner-box .path-title span.page-title a:hover { border-bottom: 2px #fff solid;}


  .case-contain { clear: both; width: 100%; padding: 75px 20px; box-sizing: border-box; background-image: url("../images/case_bg.webp"); background-repeat: no-repeat; background-size: cover; background-position: center top;}
  .case-contain .cases-list-full { width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .case-contain .cases-list-full .case-box { width: 100%; margin: 0 0 30px 0;}
  .case-contain .cases-list-full .case-box a { width: 100%; text-decoration: none; box-sizing: border-box; display: block;}
  .case-contain .cases-list-full .case-box a .pic { width: 100%; height: 225px; border-radius: 10px; display: flex; justify-content: center; align-items: center; overflow: hidden;}
  .case-contain .cases-list-full .case-box a .pic img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: 0.8s;}
  .case-contain .cases-list-full .case-box a:hover .pic img { width: 130%; height: 130%; object-fit: cover; object-position: center; display: block; transition: 0.8s;}
  .case-contain .cases-list-full .case-box a .area { width: 200px; margin: 20px auto 10px auto; padding: 8px 0; color: #303030; font-size: 1.1rem; text-align: center; border-radius: 20px; background-color: #dccda4;}
  .case-contain .cases-list-full .case-box a .intro { width: 100%; color: #4f4f4f; font-size: 1.3rem; text-align: center;}

  ul.page-num { clear: both; width: 100%; padding: 0; margin: 100px 0 0 0; list-style: none; display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap;}
  ul.page-num li { padding: 0; margin: 0 5px 10px 5px;}
  ul.page-num li a { width: 30px; height: 30px; color: #303030; font-size: 0.9rem; text-decoration: none; border: 2px #303030 solid; border-radius: 100%; display: flex; justify-content: center; align-items: center;}
  ul.page-num li.last a { width: 100px; height: 30px; color: #303030; font-size: 0.9rem; text-decoration: none; border: 2px #303030 solid; border-radius: 30px; display: flex; justify-content: center; align-items: center;}
  ul.page-num li a:hover, 
  ul.page-num li.last a:hover { background-color: #eee;}
  ul.page-num li a.sel, 
  ul.page-num li.last a.sel { color: #fff; background-color: #303030;}


  /************ cases details content ************/

  .case-details-contain { clear: both; width: 100%; padding: 0 0 40px 0; box-sizing: border-box; background-image: url("../images/case_bg.webp"); background-repeat: no-repeat; background-size: cover; background-position: center top;}

  .case-list-open-mo { width: 55px; padding: 10px 0; color: #fff; font-size: 1.1rem; text-align: center; border-radius: 0 30px 30px 0; background-color: rgba(220,164,18,0.8); transition: right 0.3s linear; position: absolute; top: 40vh; left: 0; z-index: 999;}
  .case-list-open-mo img { width: 30px; height: auto; margin: 0 auto 5px auto;}

  .case-details-contain .col-lf-nav { width: 130px; padding: 20px 10px; box-sizing: border-box; background-color: rgba(240,235,222,0.8); transition: right 0.3s linear; position: absolute; top: 38vh; left: -130px; z-index: 999;}
  .case-details-contain .col-lf-nav .arrow-prev, 
  .case-details-contain .col-lf-nav .arrow-next { width: 100%; padding: 10px 0;}
  .case-details-contain .col-lf-nav .arrow-prev img, 
  .case-details-contain .col-lf-nav .arrow-next img { width: 39px; height: auto; margin: 0 auto; cursor: pointer;}
  .case-details-contain .col-lf-nav .s-title { width: 100%; padding: 10px 0; color: #afafaf; font-size: 1rem; font-weight: 500; text-align: center;}
  .case-details-contain .col-lf-nav .case-box { width: 100%; padding: 10px 0;}
  .case-details-contain .col-lf-nav .case-box a { width: 100%; color: #4f4f4f; text-decoration: none; display: block;}
  .case-details-contain .col-lf-nav .case-box a .pic { width: 110px; height: 78px; margin: 0 auto; border-radius: 10px; display: flex; justify-content: center; align-items: center; overflow: hidden;}
  .case-details-contain .col-lf-nav .case-box a .pic img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: 0.8s;}
  .case-details-contain .col-lf-nav .case-box a .pic:hover img { width: 120%; height: 120%; object-fit: cover; object-position: center; display: block; transition: 0.8s;}
  .case-details-contain .col-lf-nav .case-box a .title { width: 100%; padding: 10px 0 0 0; font-size: 0.8rem; line-height: 1.2em; text-align: center;}

  .case-details-contain .col-rt-details { display: none;}
  .case-details-contain .col-rt-details-mo { width: 100%; padding: 30px 20px 0 40px; box-sizing: border-box; background-repeat: no-repeat; background-size: 60vw auto; background-position: right 0 top 0;}  
  .case-details-contain .col-rt-details-mo .top-title { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start;}
  .case-details-contain .col-rt-details-mo .top-title .year-box { width: 100px; color: #b0b0b0; font-size: 4rem; font-family: "Noto Serif TC", serif; font-weight: 700; line-height: 0.8em; word-break: break-all;}
  .case-details-contain .col-rt-details-mo .top-title .addr-type { width: calc(100% - 100px);}
  .case-details-contain .col-rt-details-mo .top-title .addr-type .title-addr { width: 100%; color: #14657d; font-size: 1.4rem; font-weight: 500; line-height: 1.2em;}
  .case-details-contain .col-rt-details-mo .top-title .addr-type .title-type { width: 100%; color: #14657d; font-size: 2.6rem; font-weight: 600;}
  .case-details-contain .col-rt-details-mo img.case-photo { clear: both; width: 100%; height: auto; margin: 40px 0 0 0;}
  .case-details-contain .col-rt-details-mo .results-title { width: 100%; padding: 40px 0 0 0; color: #aa8420; font-size: 1.6rem; font-weight: 600;}
  .case-details-contain .col-rt-details-mo .results-intro { width: 100%; color: #858585; font-size: 1.1rem; font-weight: 500; line-height: 1.8em; background-color: rgba(255,255,255,0.8);}
  .case-details-contain .col-rt-details-mo .info-table-full { clear: both; width: 100%; margin: 30px 0 0 0; border-top: 3px #aa8420 solid;}
  .case-details-contain .col-rt-details-mo .info-table-full .column-full { width: 100%; font-size: 1rem; background-color: #f5f5f5; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .case-details-contain .col-rt-details-mo .info-table-full .column-full .column-1 { width: 35%; padding: 10px; font-weight: 500; box-sizing: border-box; border-bottom: 3px #e8e8e8 solid;}
  .case-details-contain .col-rt-details-mo .info-table-full .column-full .column-2 { width: 65%; padding: 10px; box-sizing: border-box; border-bottom: 3px #e8e8e8 solid;}
  .case-details-contain .col-rt-details-mo .info-table-full .column-full .column-3 { width: 35%; padding: 10px; font-weight: 500; box-sizing: border-box; border-bottom: 3px #e8e8e8 solid; background-color: #fff;}
  .case-details-contain .col-rt-details-mo .info-table-full .column-full .column-4 { width: 65%; padding: 10px; box-sizing: border-box; border-bottom: 3px #e8e8e8 solid; background-color: #fff;}
  
  .case-details-contain .col-rt-details-mo .goback-btn { clear: both; width: 100%; margin: 40px 0 0 0; display: flex; justify-content: flex-end; box-sizing: border-box;}
  .case-details-contain .col-rt-details-mo .goback-btn img { width: 127px; height: auto;}


  /************ news list content ************/

  .news-list-contain { clear: both; width: 100%; padding: 60px 20px; box-sizing: border-box; background-image: url("../images/news_list_bg.webp"); background-repeat: no-repeat; background-size: cover; background-position: center top;}

  .news-list-contain .col-news-sort { width: 100%;}
  .news-list-contain .col-news-sort ul.sort-nav { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  .news-list-contain .col-news-sort ul.sort-nav li { width: 100px; padding: 0; margin: 0 5px;}
  .news-list-contain .col-news-sort ul.sort-nav li a { width: 100px; padding: 6px 0; color: #4c4b4b; font-size: 1rem; font-weight: 500; text-align: center; text-decoration: none; border-radius: 30px; background-color: rgba(4,0,0,0.3); display: block;}
  .news-list-contain .col-news-sort ul.sort-nav li a:hover { background-color: rgba(4,0,0,0.2);}
  .news-list-contain .col-news-sort ul.sort-nav li a.sel { background-color: rgba(4,0,0,0.1);}

  .news-list-contain .col-news-list { width: 100%; margin: 30px 0 0 0;}
  .news-list-contain .col-news-list ul.news-list { width: 100%; padding: 0; margin: 0; box-sizing: border-box; list-style: none; display: block;}
  .news-list-contain .col-news-list ul.news-list li { width: 100%; padding: 10px 0; margin: 0 0 20px 0; font-size: 1.2rem; line-height: 1.4em; border-bottom: 1px #3d3d3d solid;}
  .news-list-contain .col-news-list ul.news-list li .date { width: 100%; padding: 5px 0 0 0; color: #3d3d3d; font-weight: 600;}
  .news-list-contain .col-news-list ul.news-list li .news-title { width: 100%; padding: 10px 0; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
  .news-list-contain .col-news-list ul.news-list li .news-title a { color: #3d3d3d; text-decoration: none;}
  .news-list-contain .col-news-list ul.news-list li .news-title a:hover { color: #0e6b88;}
  .news-list-contain .col-news-list ul.news-list li .sort-box { clear: both; width: 160px; float: right;}
  .news-list-contain .col-news-list ul.news-list li .sort-box a { width: 100%; padding: 6px 10px; box-sizing: border-box; color: #3d3d3d; font-weight: 500; text-decoration: none; border-radius: 30px; background-color: #efefef; display: flex; justify-content: flex-start; align-items: center;}
  .news-list-contain .col-news-list ul.news-list li .sort-box a:hover { background-color: #ccc;} 
  .news-list-contain .col-news-list ul.news-list li .sort-box a .sort { width: calc(100% - 34px); font-size: 1.1rem; font-weight: 500; text-align: center;}
  .news-list-contain .col-news-list ul.news-list li .sort-box a img.arrow { width: 34px; height: auto;}


  /************ news details content ************/

  .news-details-contain { clear: both; width: 100%; padding: 70px 20px 40px 20px; box-sizing: border-box; background-image: url("../images/news_list_bg.webp"); background-repeat: no-repeat; background-size: cover; background-position: center top;}

  .news-details-contain .news-title-date { width: 100%; padding: 0 0 25px 0; color: #3d3d3d; font-size: 1.4rem; font-weight: 600; text-align: center; line-height: 1.2em; border-bottom: 1px #3d3d3d solid;}

  .news-details-contain .news-content { clear: both; width: 100%; padding: 60px 0; color: #3d3d3d; font-size: 1.1rem; line-height: 2em;}
  .news-details-contain .news-content img.news-photo { max-width: 100%; width: 450px; height: auto;}
  .news-details-contain .news-content img.news-photo.left { margin: 0 0 30px 0;}
  .news-details-contain .news-content img.news-photo.right { margin: 0 0 30px 0;}

  .news-details-contain .goback-btn { clear: both; width: 100%; margin: 40px 0 0 0; display: flex; justify-content: flex-end; box-sizing: border-box;}
  .news-details-contain .goback-btn img { width: 127px; height: auto;}


  /************ contact content ************/

  .contact-contain-1 { clear: both; width: 100%; padding: 100px 20px 60px 20px; box-sizing: border-box; background-image: url("../images/contact_bg_mo.webp"); background-repeat: no-repeat; background-size: cover; background-position: left top;}

  .contact-contain-1 .col-title { width: 100%;}
  .contact-contain-1 .col-title .path-title { width: 100%; color: #555;}
  .contact-contain-1 .col-title .path-title span.father-path { font-size: 1.2rem;}
  .contact-contain-1 .col-title .path-title span.father-path a { color: #555; text-decoration: none;}
  .contact-contain-1 .col-title .path-title span.father-path a:hover { border-bottom: 2px #555 solid;}
  .contact-contain-1 .col-title .path-title span.page-title { font-size: 2.6rem; letter-spacing: 0.1em; line-height: 1.6em;}
  .contact-contain-1 .col-title .path-title span.page-title a { color: #555; text-decoration: none;}
  .contact-contain-1 .col-title .path-title span.page-title a:hover { border-bottom: 2px #555 solid;}

  .contact-contain-1 .col-form-table { width: 100%; margin: 40px 0 0 0;}
  .contact-contain-1 .col-form-table .top-words { width: 100%;}
  .contact-contain-1 .col-form-table .top-words img.slogan { max-width: 100%; width: 574px; height: auto;}
  .contact-contain-1 .col-form-table .top-words .text { display: none;}
  .contact-contain-1 .col-form-table .top-words .text-mo { width: 100%; padding: 35px 0 0 0; color: #777; font-size: 1.2rem; line-height: 1.8em;}
  .contact-contain-1 .col-form-table .contact-form { width: 100%; margin: 40px 0 0 0;}
  .contact-contain-1 .col-form-table .contact-form .caption { width: 100%; padding: 10px 0; color: #494848; font-size: 1.2rem; font-weight: 500;}
  .contact-contain-1 .col-form-table .contact-form .column { width: 100%; padding: 0 0 30px 0; color: #494848; font-size: 1.2rem; box-sizing: border-box;}
  .contact-contain-1 .col-form-table .contact-form .column input[type=text], 
  .contact-contain-1 .col-form-table .contact-form .column input[type=tel], 
  .contact-contain-1 .col-form-table .contact-form .column input[type=email] { width: 100%; padding: 15px 30px; color: #494848; font-size: 1.2rem; border: 1px #494848 solid; border-radius: 30px; box-sizing: border-box;}
  .contact-contain-1 .col-form-table .contact-form .column input[type=radio] { width: 20px; height: 20px; margin: 15px 0 0 0;}
  .contact-contain-1 .col-form-table .contact-form .column textarea { width: 100%; height: 200px; padding: 15px 30px; color: #494848; font-size: 1.2rem; border: 1px #494848 solid; border-radius: 30px; box-sizing: border-box;}
  .contact-contain-1 .col-form-table .submit-btn { width: 100%; margin: 40px 0 0 0; display: flex; justify-content: flex-end;}
  .contact-contain-1 .col-form-table .submit-btn input[type=submit], 
  .contact-contain-1 .col-form-table .submit-btn input[type=button] { width: 160px; padding: 8px 0; color: #fff; font-size: 1.1rem; border-radius: 30px; border: 1px #494848 solid; background-color: #494848; box-sizing: border-box; cursor: pointer;}
  .contact-contain-1 .col-form-table .submit-btn input[type=submit]:hover, 
  .contact-contain-1 .col-form-table .submit-btn input[type=button]:hover { color: #494848; background-color: #ccc;}

  .contact-map { clear: both; width: 100%;}
  .contact-map iframe { width: 100%; height: 400px;}

  .contact-contain-2 { clear: both; width: 100%; padding: 50px 20px 50px 20px; box-sizing: border-box; background-image: url("../images/contact_bg_2.webp"); background-repeat: no-repeat; background-size: cover; background-position: center top;}
  .contact-contain-2 img.slogan { max-width: 100%; width: 616px; height: auto;}
  .contact-contain-2 .text { width: 100%; padding: 30px 0 0 0; color: #ddb856; font-size: 1.6rem;}
  .contact-contain-2 ul.info-text { width: 100%; padding: 40px 0 0 0; margin: 0; list-style: none; display: block;}
  .contact-contain-2 ul.info-text li { padding: 0 0 10px 0; margin: 0; font-size: 1.1rem; line-height: 1.2em;}


  /************ site map ************/

  ul.sitemap { clear: both; width: 100%; padding: 80px; margin: 0; list-style: none; box-sizing: border-box; display: block;}
  ul.sitemap li { padding: 0 10px; margin: 15px 0;}
  ul.sitemap li a { padding: 3px 10px; color: #333; font-size: 1.2rem; font-weight: 500; text-decoration: none; display: block;}
  ul.sitemap li a:active { color: #fff; background-color: #0e6b88;}


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

  footer { clear: both; width: 100%; padding: 45px 20px; box-sizing: border-box; background-color: #7b7b7b; background-image: url("../images/footer_bg.webp"); background-repeat: no-repeat; background-size: cover; background-position: center top;}

  .foot-contain { width: 100%;}
  
  .foot-contain .col-lf { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .foot-contain .col-lf img.qr-code { width: 100px; height: auto; margin: 0 10px 0 0;}
  .foot-contain .col-lf .contact-info { width: calc(100% - 100px - 15px); color: #fff; font-size: 1.1rem;}
  .foot-contain .col-lf .contact-info img.icon { width: 75px; height: auto;}
  .foot-contain .col-lf .contact-info .title-en { width: 100%; padding: 5px 0; color: #ffe9ae; font-size: 1.2rem; font-weight: 600; letter-spacing: 0.1em;}
  .foot-contain .col-lf ul.info-text { width: 100%; padding: 40px 0 0 0; margin: 0; list-style: none; display: block;}
  .foot-contain .col-lf ul.info-text li { padding: 0 0 10px 0; margin: 0; color: #fff; font-size: 1.1rem; line-height: 1.2em;}
  
  .foot-contain .col-rt { width: 100%; margin: 40px 0 0 0; display: flex; justify-content: flex-end; flex-wrap: wrap;}
  .foot-contain .col-rt img.footer-logo { width: 158px; height: auto; margin: 0 auto;}
  .foot-contain .col-rt ul.footer-menu { clear: both; width: 100%; padding: 0; margin: 20px 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  .foot-contain .col-rt ul.footer-menu li { padding: 0; margin: 0 10px 15px 10px;}
  .foot-contain .col-rt ul.footer-menu li a { color: #fff; font-size: 1.2rem; text-decoration: none;}
  .foot-contain .col-rt ul.footer-menu li a:hover { border-bottom: 2px #fff solid;}
  

}