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

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

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

html, body { height: 100%;}

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

div.brk { clear: both;}


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


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

  section#index-pic-box { clear: both; width: 100%; height: 100%; padding: 0; margin: 0; overflow: hidden;}

  section#index-pic-box img.index-pic { width: 100%; height: auto;}
  section#index-pic-box img.index-pic-mo { display: none;}


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

  header { clear: both; width: 100%; height: 110px; padding: 0 10vw; box-sizing: border-box; background-color: rgba(0,0,0,0.4); display: flex; justify-content: flex-start; align-items: center; position: fixed; top: 0; left: 0; z-index: 9999;}

  .logo-bx { width: 300px;}
  .logo-bx img { width: 300px; height: auto;}

  nav#mo { display: none;}

  nav#pc { width: calc(100% - 300px);}
  nav#pc ul.nav-menu { padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-end; align-items: center;}
  nav#pc ul.nav-menu li { padding: 0; margin: 0; border-right: 1px #ccc solid;}
  nav#pc ul.nav-menu li:last-child { border-right: 0;}
  nav#pc ul.nav-menu li a { padding: 10px 30px; color: #fff; font-size: 1.1rem; line-height: 1em; text-decoration: none; display: block;}
  nav#pc ul.nav-menu li a:hover { color: #ccc;}


  /************ top-banner ************/

  .top-banner-box { clear: both; width: 100%; overflow: hidden; position: relative; z-index: 1;}
  .top-banner-box img.banner-mo { display: none;}
  .top-banner-box img.banner-pc { width: 100%; height: auto; position: relative; z-index: 1;}
  .top-banner-box img.banner-text { width: 29vw; height: auto; position: absolute; top: 13vw; right: 16vw; z-index: 2;}
  .top-banner-box img.banner-text-mo { display: none;}


  /************ section#sec-main ************/

  section#sec-main { clear: both; width: 100%; padding: 0; position: relative;}

  img.sec-main-bg { width: 100%; height: auto; position: relative; z-index: 1;}

  img.sec-main-text-1 { width: 35vw; height: auto; position: absolute; top: calc(110px + 4.5vw); left: calc(50% - 17.5vw); z-index: 2;}
  img.sec-main-text-2 { width: 40vw; height: auto; position: absolute; top: calc(110px + 17vw); left: calc(50% - 20vw); z-index: 2;}
  img.sec-main-text-3 { width: 37vw; height: auto; position: absolute; top: calc(110px + 22vw); left: calc(50% - 18.5vw); z-index: 2;}


  /*** 20250704新增 ***/
  .notice-slash { clear: both; width: 200px; position: absolute; top: 7vw; right: 0; z-index: 9;}
  .notice-slash a { display: block;}
  .notice-slash a img { width: 100%; height: auto;}


  /************ section#factory-office-banner(20251222新增 20260130修改) ************/

  section#factory-office-banner { clear: both; width: 100%; padding: 130px 0 40px 0; background-color: #000;}
  section#factory-office-banner img.pic-mo { display: none;}
  section#factory-office-banner img.pic-pc { width: 100%; height: auto;}


  /************ section#video-intro(20251217新增) ************/

  section#video-intro { clear: both; width: 100%; padding: 80px 4vw; background-color: #333; box-sizing: border-box;}

  .sec-video-intro { width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .sec-video-intro .intro-pic { width: 100%; padding: 2vw; box-sizing: border-box;}
  .sec-video-intro .intro-pic img { width: 100%; height: auto;}
  .sec-video-intro .text-intro .video-box { width: 100%; margin: 40px auto 0 auto;}
  .sec-video-intro .text-intro { width: 100%; padding: 2vw; color: #fff; font-size: 1.4vw; font-weight: 300; line-height: 2.2vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .sec-video-intro .text-intro .title { width: 100%; padding: 0 0 2vw 0; color: #41a5a5; font-size: 4vw; font-weight: 500; line-height: 4.4vw; text-align: center;}
  .sec-video-intro .text-intro .title span.font-s { font-size: 2.4vw;}
  .sec-video-intro .text-intro .title-s-mo { display: none;}
  .sec-video-intro .text-intro .title-s { width: 100%; color: #41a5a5; font-size: 2vw; text-align: center;}
  .sec-video-intro .text-intro hr { width: 100%; border: 0; border-top: 1px rgba(255,255,255,0.3) solid;}
  .sec-video-intro .text-intro .pic-box { width: calc(50% - 4%); margin: 2vw 2%; border: 10px #ccc solid; box-sizing: border-box;}
  .sec-video-intro .text-intro .pic-box img.factory-office-pic { width: 100%; height: auto;}


  /****  20260130修改 ****/
  .sec-video-intro .text-intro-pic { width: 100%; padding: 4vw 2vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .sec-video-intro .text-intro-pic .pic-box { width: calc(50% - 4%); margin: 0 2%; border: 10px #41a5a5 solid; box-sizing: border-box;}
  .sec-video-intro .text-intro-pic .pic-box img { width: 100%; height: auto;}

  .factory-office-text { width: 100%; padding: 2vw; color: #e6e501; box-sizing: border-box;}
  .factory-office-text .title { width: 100%; padding: 0 0 2vw 0; font-size: 6vw; font-weight: 600; line-height: 1.2em; letter-spacing: 0.05em; text-align: center;}
  .factory-office-text .title span.font-s { font-size: 2.4vw;}
  .factory-office-text .title-s-mo { display: none;}
  .factory-office-text .title-s { width: 65vw; margin: 0 auto; color: #000; font-size: 4vw; font-weight: 600; text-align: center; letter-spacing: 0.05em; background-color: #fff;}
  

  /************ section#sec-main(20250704新增) ************/

  section#ettody-video { clear: both; width: 100%; padding: 40px 4vw; box-sizing: border-box; position: relative;}

  .ettody-video-box { width: 100%; padding: 0 2vw; box-sizing: border-box; margin: 0 auto;}
  .ettody-video-box .text-title { width: 100%; margin: 1vw auto 0 auto; font-size: 1.2vw;}


  /************ sec-01 ************/

  section#sec-01 { clear: both; width: 100%; padding: 130px 0; background-image: url("../images/sec_01_bg.png"); background-repeat: repeat-y; background-size: 100% auto;}

  .sec-01-content { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start;}
  .sec-01-content .photos-list { width: 56vw;}
  .sec-01-content .photos-list img.photo { width: 100%; height: auto;}
  .sec-01-content .text-box { width: calc(100% - 56vw);}
  .sec-01-content .text-box img { width: 30vw; height: auto; margin: 5vw 0 0 5vw;}


  /************ sec-02 ************/

  section#sec-02 { clear: both; width: 100%; padding: 70px 0; background-color: #333;}
  
  .sec-02-content { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start;}
  .sec-02-content .text-box { width: calc(100% - 63.3vw);}
  .sec-02-content .text-box img { width: 26vw; height: auto; margin: 13vw 0 0 3.7vw;}
  .sec-02-content .photos-list { width: 63.3vw; padding: 0 3.3vw 0 0; box-sizing: border-box;}
  .sec-02-content .photos-list img.photo { width: 100%; height: auto;}


  /************ #sec-03 ************/

  section#sec-03 { clear: both; width: 100%; padding: 0; background-color: #E6E6E6;}

  .sec-03-text { width: 100%; padding: 3vw 0;}
  .sec-03-text img { width: 43vw; height: auto; margin: 0 auto;}

  .sec-environment-location { width: 100%;}
  .sec-environment-location .point-tip { display: none;}
  .sec-environment-location img.location-map { width: 100%; height: auto;}


  /************ sec-04 ************/

  section#sec-04 { clear: both; width: 100%; padding: 80px 0; background-color: #F2F2F2;}

  .sec-04-content { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start;}
  .sec-04-content .map-box { width: 64.4vw; padding: 0 0 0 4.4vw; box-sizing: border-box;}
  .sec-04-content .map-box img { width: 100%; height: auto;}
  .sec-04-content .text-box { width: calc(100% - 64.4vw);}
  .sec-04-content .text-box img { width: 22vw; height: auto; margin: 11vw 0 0 5.3vw;}


  /************ sec-05 ************/

  section#sec-05 { clear: both; width: 100%; padding: 0; position: relative;}

  img.sec-05-bg { width: 100%; height: auto; position: relative; z-index: 1;}

  img.sec-05-text-mo { display: none;}
  img.sec-05-text { width: 26vw; height: auto; position: absolute; top: 13.2vw; left: 5.3vw; z-index: 2;}


  /************ sec-06 ************/

  section#sec-06 { clear: both; width: 100%; padding: 0; position: relative;}

  img.sec-06-bg { width: 100%; height: auto; position: relative; z-index: 1;}

  img.sec-06-text-mo { display: none;}
  img.sec-06-text { width: 30vw; height: auto; position: absolute; bottom: 3vw; left: 3.1vw; z-index: 2;}


  /************ sec-07 ************/

  section#sec-07 { clear: both; width: 100%; padding: 130px 0; background-color: #F2F2F2;}

  .sec-07-content { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start;}
  .sec-07-content .photo-box { width: 59vw;}
  .sec-07-content .photo-box img { width: 100%; height: auto;}
  .sec-07-content .text-box { width: calc(100% - 59vw); padding: 0 0 0 3.1vw; box-sizing: border-box;}
  /*.sec-07-content .text-box img.text { width: 33.6vw; height: auto;}*/
  .sec-07-content .text-box img.text { width: 27vw; height: auto;}
  .sec-07-content .text-box .social-box { width: 100%; padding: 2vw 0 0 2vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  .sec-07-content .text-box .social-box img.icon { width: 3vw; height: auto; margin: 0 0.8vw 0 0;}


  /************ sec-videos ************/

  section#sec-videos { clear: both; width: 100%; padding: 100px 0; display: flex; justify-content: center; align-items: flex-start;}

  .video-box { width: calc(100% / 3 - 4vw); margin: 0 2vw;}
  .video-box .text-box { width: 100%; padding: 10px 0; color: #333; font-size: 1.1vw;}


  /************ sec-tpwl-org ************/

  section#sec-tpwl-org { clear: both; width: 100%; padding: 100px 10vw; box-sizing: border-box; background-color: #f1f1f1;}
  section#sec-tpwl-org .intro-text { width: 100%; color: #000; font-size: 1.2vw; line-height: 2vw; text-align: center;}
  section#sec-tpwl-org .intro-text span.style-1 { font-size: 2vw;}
  section#sec-tpwl-org .intro-text span.style-2 { font-size: 1vw; font-weight: 600;}
  section#sec-tpwl-org .logo-title { width: 100%; margin: 2vw 0 0 0; text-align: center;}
  section#sec-tpwl-org .logo-title img { width: 38vw; height: auto; margin: 0 auto;}
  section#sec-tpwl-org .logo-title a { color: #333; font-size: 1.1vw; text-decoration: none;}
  section#sec-tpwl-org .logo-title a:hover { color: #ce5959;}
 

  /************ sec-08 ************/

  section#sec-08 { clear: both; width: 100%; padding: 0;}

  section#sec-08 iframe { width: 100%; height: 30vw;}


  /************ section #sec-contact ************/

  section#sec-contact { clear: both; width: 100%; padding: 140px calc(50% - 660px); box-sizing: border-box; background-color: #fff; display: flex; justify-content: flex-start; align-items: flex-start;}

  .contact-col-lf { width: calc(100% - 770px); padding: 0 50px 50px 50px; box-sizing: border-box;}
  .contact-col-lf img.logo-title { width: 212px; height: auto; margin: 0 0 70px 0;}
  .contact-col-lf .text-con { width: 100%; color: #000; font-size: 1.1rem; line-height: 2em;}

  .contact-col-rt { width: 770px; padding: 50px; box-sizing: border-box; background-color: #fff;}
  .contact-col-rt .title-text { width: 100%; font-size: 3rem; font-weight: 300;}
  .contact-col-rt .title-text-small { width: 100%; padding: 20px 0 50px 0; font-size: 1.1rem;}
  .contact-col-rt .form-caption { width: 100%; padding: 10px 0; font-size: 1.1rem; font-weight: 600;}
  .contact-col-rt .form-column { width: 100%; margin: 0 0 20px 0;}
  .contact-col-rt .form-column input, 
  .contact-col-rt .form-column select { width: 100%; padding: 10px; margin: 0 0 5px 0; color: #414141; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #f2f2f2; box-sizing: border-box;}
  .contact-col-rt input[type=button] { padding: 15px 40px; margin: 40px 0 0 0; color: #fff; font-size: 1.1rem; font-weight: 600; line-height: 1em; background-color: #000; cursor: pointer;}
  .contact-col-rt input[type=button]:hover { color: #fff; background-color: #000;}


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

  footer { clear: both; width: 100%; padding: 40px calc(50% - 660px); box-sizing: border-box; background-color: #247C81;}

  .footer-tel { width: 100%; color: #fff; font-size: 2.4rem; font-weight: 500; line-height: 1.2em; display: flex; justify-content: center; align-items: center;}
  .footer-tel a { color: #fff; text-decoration: none;}
  .footer-copyright-mo { display: none;}
  .footer-copyright { width: 100%; padding: 10px 0 0 0; color: #fff; font-size: 1rem; text-align: center;}


}

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

  section#index-pic-box { clear: both; width: 100%; height: 100%; padding: 0; margin: 0; overflow: hidden;}

  section#index-pic-box img.index-pic { width: 100%; height: auto;}
  section#index-pic-box img.index-pic-mo { display: none;}


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

  header { clear: both; width: 100%; height: 110px; padding: 0 3vw; box-sizing: border-box; background-color: rgba(0,0,0,0.4); display: flex; justify-content: flex-start; align-items: center; position: fixed; top: 0; left: 0; z-index: 9999;}

  .logo-bx { width: 300px;}
  .logo-bx img { width: 300px; height: auto;}

  nav#mo { display: none;}

  nav#pc { width: calc(100% - 300px);}
  nav#pc ul.nav-menu { padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-end; align-items: center;}
  nav#pc ul.nav-menu li { padding: 0; margin: 0; border-right: 1px #ccc solid;}
  nav#pc ul.nav-menu li:last-child { border-right: 0;}
  nav#pc ul.nav-menu li a { padding: 10px 20px; color: #fff; font-size: 1.1rem; line-height: 1em; text-decoration: none; display: block;}
  nav#pc ul.nav-menu li a:hover { color: #ccc;}


  /************ top-banner ************/

  .top-banner-box { clear: both; width: 100%; overflow: hidden; position: relative; z-index: 1;}
  .top-banner-box img.banner-mo { display: none;}
  .top-banner-box img.banner-pc { width: 100%; height: auto; position: relative; z-index: 1;}
  .top-banner-box img.banner-text { width: 29vw; height: auto; position: absolute; top: 13vw; right: 16vw; z-index: 2;}
  .top-banner-box img.banner-text-mo { display: none;}


  /************ section#sec-main ************/

  section#sec-main { clear: both; width: 100%; padding: 0; position: relative;}

  img.sec-main-bg { width: 100%; height: auto; position: relative; z-index: 1;}

  img.sec-main-text-1 { width: 35vw; height: auto; position: absolute; top: calc(110px + 4.5vw); left: calc(50% - 17.5vw); z-index: 2;}
  img.sec-main-text-2 { width: 40vw; height: auto; position: absolute; top: calc(110px + 17vw); left: calc(50% - 20vw); z-index: 2;}
  img.sec-main-text-3 { width: 37vw; height: auto; position: absolute; top: calc(110px + 22vw); left: calc(50% - 18.5vw); z-index: 2;}


  /*** 20250704新增 ***/
  .notice-slash { clear: both; width: 200px; position: absolute; top: 12vw; right: 0; z-index: 9;}
  .notice-slash a { display: block;}
  .notice-slash a img { width: 100%; height: auto;}


  /************ section#sec-main(20250704新增 20260130修改) ************/

  section#ettody-video { clear: both; width: 100%; padding: 40px 2vw; box-sizing: border-box; position: relative;}

  .ettody-video-box { width: 100%; padding: 0 2vw; box-sizing: border-box; margin: 0 auto;}
  .ettody-video-box .text-title { width: 100%; margin: 1vw auto 0 auto; font-size: 1.2vw;}


  /************ section#factory-office-banner(20251222新增) ************/

  section#factory-office-banner { clear: both; width: 100%; padding: 130px 0 40px 0; background-color: #000;}
  section#factory-office-banner img.pic-mo { display: none;}
  section#factory-office-banner img.pic-pc { width: 100%; height: auto;}

  .factory-office-text { width: 100%; padding: 2vw; color: #e6e501; box-sizing: border-box;}
  .factory-office-text .title { width: 100%; padding: 0 0 2vw 0; font-size: 6vw; font-weight: 600; line-height: 1.2em; letter-spacing: 0.05em; text-align: center;}
  .factory-office-text .title span.font-s { font-size: 2.4vw;}
  .factory-office-text .title-s-mo { display: none;}
  .factory-office-text .title-s { width: 65vw; margin: 0 auto; color: #000; font-size: 4vw; font-weight: 600; text-align: center; letter-spacing: 0.05em; background-color: #fff;}


  /************ section#video-intro(20251217新增) ************/

  section#video-intro { clear: both; width: 100%; padding: 80px 2vw; background-color: #333; box-sizing: border-box;}

  .sec-video-intro { width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .sec-video-intro .intro-pic { width: 100%; padding: 2vw; box-sizing: border-box;}
  .sec-video-intro .intro-pic img { width: 100%; height: auto;}
  .sec-video-intro .text-intro .video-box { width: 100%; margin: 40px auto 0 auto;}
  .sec-video-intro .text-intro { width: 100%; padding: 2vw; color: #fff; font-size: 1.4vw; font-weight: 300; line-height: 2.2vw; box-sizing: border-box;}
  .sec-video-intro .text-intro .title { width: 100%; padding: 0 0 2vw 0; color: #41a5a5; font-size: 4vw; font-weight: 500; line-height: 4.4vw; text-align: center;}
  .sec-video-intro .text-intro .title span.font-s { font-size: 2.4vw;}
  .sec-video-intro .text-intro .title-s-mo { display: none;}
  .sec-video-intro .text-intro .title-s { width: 100%; color: #41a5a5; font-size: 2vw; text-align: center;}
  .sec-video-intro .text-intro hr { width: 100%; border: 0; border-top: 1px rgba(255,255,255,0.3) solid;}
  .sec-video-intro img.factory-office-pic { width: 46%; padding: 2vw 2%; float: left;}


  /****  20260130修改 ****/
  .sec-video-intro .text-intro-pic { width: 100%; padding: 4vw 2vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .sec-video-intro .text-intro-pic .pic-box { width: calc(50% - 4%); margin: 0 2%; border: 10px #41a5a5 solid; box-sizing: border-box;}
  .sec-video-intro .text-intro-pic .pic-box img { width: 100%; height: auto;}


  /************ sec-01 ************/

  section#sec-01 { clear: both; width: 100%; padding: 130px 0; background-image: url("../images/sec_01_bg.png"); background-repeat: repeat-y; background-size: 100% auto;}

  .sec-01-content { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start;}
  .sec-01-content .photos-list { width: 56vw;}
  .sec-01-content .photos-list img.photo { width: 100%; height: auto;}
  .sec-01-content .text-box { width: calc(100% - 56vw);}
  .sec-01-content .text-box img { width: 30vw; height: auto; margin: 5vw 0 0 5vw;}


  /************ sec-02 ************/

  section#sec-02 { clear: both; width: 100%; padding: 70px 0; background-color: #333;}
  
  .sec-02-content { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start;}
  .sec-02-content .text-box { width: calc(100% - 63.3vw);}
  .sec-02-content .text-box img { width: 26vw; height: auto; margin: 13vw 0 0 3.7vw;}
  .sec-02-content .photos-list { width: 63.3vw; padding: 0 3.3vw 0 0; box-sizing: border-box;}
  .sec-02-content .photos-list img.photo { width: 100%; height: auto;}


  /************ #sec-03 ************/

  section#sec-03 { clear: both; width: 100%; padding: 0; background-color: #E6E6E6;}

  .sec-03-text { width: 100%; padding: 3vw 0;}
  .sec-03-text img { width: 43vw; height: auto; margin: 0 auto;}

  .sec-environment-location { width: 100%;}
  .sec-environment-location .point-tip { display: none;}
  .sec-environment-location img.location-map { width: 100%; height: auto;}


  /************ sec-04 ************/

  section#sec-04 { clear: both; width: 100%; padding: 80px 0; background-color: #F2F2F2;}

  .sec-04-content { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start;}
  .sec-04-content .map-box { width: 64.4vw; padding: 0 0 0 4.4vw; box-sizing: border-box;}
  .sec-04-content .map-box img { width: 100%; height: auto;}
  .sec-04-content .text-box { width: calc(100% - 64.4vw);}
  .sec-04-content .text-box img { width: 22vw; height: auto; margin: 11vw 0 0 5.3vw;}


  /************ sec-05 ************/

  section#sec-05 { clear: both; width: 100%; padding: 0; position: relative;}

  img.sec-05-bg { width: 100%; height: auto; position: relative; z-index: 1;}

  img.sec-05-text-mo { display: none;}
  img.sec-05-text { width: 26vw; height: auto; position: absolute; top: 13.2vw; left: 5.3vw; z-index: 2;}


  /************ sec-06 ************/

  section#sec-06 { clear: both; width: 100%; padding: 0; position: relative;}

  img.sec-06-bg { width: 100%; height: auto; position: relative; z-index: 1;}

  img.sec-06-text-mo { display: none;}
  img.sec-06-text { width: 30vw; height: auto; position: absolute; bottom: 3vw; left: 3.1vw; z-index: 2;}


  /************ sec-07 ************/

  section#sec-07 { clear: both; width: 100%; padding: 130px 0; background-color: #F2F2F2;}

  .sec-07-content { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start;}
  .sec-07-content .photo-box { width: 59vw;}
  .sec-07-content .photo-box img { width: 100%; height: auto;}
  .sec-07-content .text-box { width: calc(100% - 59vw); padding: 0 0 0 3.1vw; box-sizing: border-box;}
  /*.sec-07-content .text-box img.text { width: 33.6vw; height: auto;}*/
  .sec-07-content .text-box img.text { width: 27vw; height: auto;}
  .sec-07-content .text-box .social-box { width: 100%; padding: 2vw 0 0 2vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  .sec-07-content .text-box .social-box img.icon { width: 3vw; height: auto; margin: 0 0.8vw 0 0;}


  /************ sec-videos ************/

  section#sec-videos { clear: both; width: 100%; padding: 100px 0; display: flex; justify-content: center; align-items: flex-start;}

  .video-box { width: calc(100% / 3 - 4vw); margin: 0 2vw;}
  .video-box .text-box { width: 100%; padding: 10px 0; color: #333; font-size: 1.1vw;}


  /************ sec-tpwl-org ************/

  section#sec-tpwl-org { clear: both; width: 100%; padding: 100px 10vw; box-sizing: border-box; background-color: #f1f1f1;}
  section#sec-tpwl-org .intro-text { width: 100%; color: #000; font-size: 1.2vw; line-height: 2vw; text-align: center;}
  section#sec-tpwl-org .intro-text span.style-1 { font-size: 2vw;}
  section#sec-tpwl-org .intro-text span.style-2 { font-size: 1vw; font-weight: 600;}
  section#sec-tpwl-org .logo-title { width: 100%; margin: 2vw 0 0 0; text-align: center;}
  section#sec-tpwl-org .logo-title img { width: 38vw; height: auto; margin: 0 auto;}
  section#sec-tpwl-org .logo-title a { color: #333; font-size: 1.1vw; text-decoration: none;}
  section#sec-tpwl-org .logo-title a:hover { color: #ce5959;}


  /************ sec-08 ************/

  section#sec-08 { clear: both; width: 100%; padding: 0;}

  section#sec-08 iframe { width: 100%; height: 30vw;}

  
  /************ section #sec-contact ************/

  section#sec-contact { clear: both; width: 100%; padding: 140px calc(50% - 480px); box-sizing: border-box; background-color: #fff; display: flex; justify-content: flex-start; align-items: flex-start;}

  .contact-col-lf { width: calc(100% - 550px); padding: 0 50px 50px 50px; box-sizing: border-box;}
  .contact-col-lf img.logo-title { width: 212px; height: auto; margin: 0 0 70px 0;}
  .contact-col-lf .text-con { width: 100%; color: #000; font-size: 1.1rem; line-height: 2em;}

  .contact-col-rt { width: 550px; padding: 50px; box-sizing: border-box; background-color: #fff;}
  .contact-col-rt .title-text { width: 100%; font-size: 3rem; font-weight: 300;}
  .contact-col-rt .title-text-small { width: 100%; padding: 20px 0 50px 0; font-size: 1.1rem;}
  .contact-col-rt .form-caption { width: 100%; padding: 10px 0; font-size: 1.1rem; font-weight: 600;}
  .contact-col-rt .form-column { width: 100%; margin: 0 0 20px 0;}
  .contact-col-rt .form-column input, 
  .contact-col-rt .form-column select { width: 100%; padding: 10px; margin: 0 0 5px 0; color: #414141; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #f2f2f2; box-sizing: border-box;}
  .contact-col-rt input[type=button] { padding: 15px 40px; margin: 40px 0 0 0; color: #fff; font-size: 1.1rem; font-weight: 600; line-height: 1em; background-color: #000; cursor: pointer;}
  .contact-col-rt input[type=button]:hover { color: #fff; background-color: #000;}


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

  footer { clear: both; width: 100%; padding: 40px 40px; box-sizing: border-box; background-color: #247C81;}

  .footer-tel { width: 100%; color: #fff; font-size: 2.4rem; font-weight: 500; line-height: 1.2em; display: flex; justify-content: center; align-items: center;}
  .footer-tel a { color: #fff; text-decoration: none;}
  .footer-copyright-mo { display: none;}
  .footer-copyright { width: 100%; padding: 10px 0 0 0; color: #fff; font-size: 1rem; text-align: center;}


}

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

  section#index-pic-box { clear: both; width: 100%; height: 100%; padding: 0; margin: 0; overflow: hidden;}

  section#index-pic-box img.index-pic { width: 100%; height: auto;}
  section#index-pic-box img.index-pic-mo { display: none;}


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

  header { clear: both; width: 100%; height: 110px; padding: 0 3vw; box-sizing: border-box; background-color: rgba(0,0,0,0.4); display: flex; justify-content: flex-start; align-items: center; position: fixed; top: 0; left: 0; z-index: 9999;}

  .logo-bx { width: 200px;}
  .logo-bx img { width: 200px; height: auto;}

  nav#mo { display: none;}

  nav#pc { width: calc(100% - 200px);}
  nav#pc ul.nav-menu { padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-end; align-items: center;}
  nav#pc ul.nav-menu li { padding: 0; margin: 0; border-right: 1px #ccc solid;}
  nav#pc ul.nav-menu li:last-child { border-right: 0;}
  nav#pc ul.nav-menu li a { padding: 10px 15px; color: #fff; font-size: 1.1rem; line-height: 1em; text-decoration: none; display: block;}
  nav#pc ul.nav-menu li a:hover { color: #ccc;}


  /************ top-banner ************/

  .top-banner-box { clear: both; width: 100%; overflow: hidden; position: relative; z-index: 1; overflow: hidden;}
  .top-banner-box img.banner-mo { display: none;}
  .top-banner-box img.banner-pc { width: 140%; height: auto; margin: 0 0 0 -10%; position: relative; z-index: 1;}
  .top-banner-box img.banner-text { width: 40vw; height: auto; position: absolute; top: 20vw; right: 6vw; z-index: 2;}
  .top-banner-box img.banner-text-mo { display: none;}


  /************ section#sec-main ************/

  section#sec-main { clear: both; width: 100%; padding: 0; position: relative; overflow: hidden;}

  img.sec-main-bg { width: 160%; height: auto; margin: 0 0 0 -30%; position: relative; z-index: 1;}

  img.sec-main-text-1 { width: 45vw; height: auto; position: absolute; top: calc(110px + 6vw); left: calc(50% - 22.5vw); z-index: 2;}
  img.sec-main-text-2 { width: 50vw; height: auto; position: absolute; top: calc(110px + 24vw); left: calc(50% - 25vw); z-index: 2;}
  img.sec-main-text-3 { width: 47vw; height: auto; position: absolute; top: calc(110px + 32vw); left: calc(50% - 23.5vw); z-index: 2;}


  /*** 20250704新增 ***/
  .notice-slash { clear: both; width: 160px; position: absolute; top: 15vw; right: 0; z-index: 9;}
  .notice-slash a { display: block;}
  .notice-slash a img { width: 100%; height: auto;}


  /************ section#sec-main(20250704新增) ************/

  section#ettody-video { clear: both; width: 100%; padding: 40px 2vw; box-sizing: border-box; position: relative;}

  .ettody-video-box { width: 100%; margin: 0 auto; padding: 0 2vw; box-sizing: border-box;}
  .ettody-video-box .text-title { width: 100%; margin: 1.5vw auto 0 auto; font-size: 1.6vw;}


  /************ section#factory-office-banner(20251222新增 20260130修改) ************/

  section#factory-office-banner { clear: both; width: 100%; padding: 130px 0 40px 0; background-color: #000;}
  section#factory-office-banner img.pic-pc { display: none;}
  section#factory-office-banner img.pic-mo { width: 100%; height: auto;}


  /************ section#video-intro(20251217新增) ************/

  section#video-intro { clear: both; width: 100%; padding: 80px 2vw; background-color: #333; box-sizing: border-box;}

  .sec-video-intro { width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .sec-video-intro .intro-pic { width: 100%; padding: 2vw; box-sizing: border-box;}
  .sec-video-intro .intro-pic img { width: 100%; height: auto;}
  .sec-video-intro .text-intro .video-box { width: 100%; margin: 40px auto 0 auto;}
  .sec-video-intro .text-intro { width: 100%; padding: 2vw; color: #fff; font-size: 1.8vw; font-weight: 300; line-height: 3vw; box-sizing: border-box;}
  .sec-video-intro .text-intro .title { width: 100%; padding: 0 0 2vw 0; color: #41a5a5; font-size: 5.4vw; font-weight: 500; line-height: 6vw; text-align: center;}
  .sec-video-intro .text-intro .title span.font-s { font-size: 3.8vw;}
  .sec-video-intro .text-intro .title-s-mo { display: none;}
  .sec-video-intro .text-intro .title-s { width: 100%; color: #41a5a5; font-size: 2.8vw; text-align: center;}
  .sec-video-intro .text-intro hr { width: 100%; border: 0; border-top: 1px rgba(255,255,255,0.3) solid;}
  .sec-video-intro img.factory-office-pic { width: 46%; padding: 2vw 2%; float: left;}


  /****  20260130修改 ****/
  .sec-video-intro .text-intro-pic { width: 100%; padding: 4vw 2vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .sec-video-intro .text-intro-pic .pic-box { width: calc(50% - 4%); margin: 0 2%; border: 10px #41a5a5 solid; box-sizing: border-box;}
  .sec-video-intro .text-intro-pic .pic-box img { width: 100%; height: auto;}

  .factory-office-text { width: 100%; padding: 2vw; color: #e6e501; box-sizing: border-box;}
  .factory-office-text .title { width: 100%; padding: 0 0 2vw 0; font-size: 8vw; font-weight: 600; line-height: 1.2em; letter-spacing: 0.05em; text-align: center;}
  .factory-office-text .title span.font-s { font-size: 2.4vw;}
  .factory-office-text .title-s-mo { display: none;}
  .factory-office-text .title-s { width: 90vw; margin: 0 auto; color: #000; font-size: 6vw; font-weight: 600; text-align: center; letter-spacing: 0.05em; background-color: #fff;}
    
  
  /************ sec-01 ************/

  section#sec-01 { clear: both; width: 100%; padding: 80px 0; background-image: url("../images/sec_01_bg.png"); background-repeat: repeat-y; background-size: 100% auto;}

  .sec-01-content { width: 100%;}
  .sec-01-content .photos-list { width: 100%;}
  .sec-01-content .photos-list img.photo { width: 100%; height: auto;}
  .sec-01-content .text-box { width: 100%; margin: 8vw 0 0 0;}
  .sec-01-content .text-box img { width: 50vw; height: auto; margin: 0 auto;}


  /************ sec-02 ************/

  section#sec-02 { clear: both; width: 100%; padding: 70px 0; background-color: #333;}
  
  .sec-02-content { width: 100%;}
  .sec-02-content .text-box { width: 100%;}
  .sec-02-content .text-box img { width: 40vw; height: auto; margin: 0 auto 5vw auto;}
  .sec-02-content .photos-list { width: 100%; padding: 0 2vw; box-sizing: border-box;}
  .sec-02-content .photos-list img.photo { width: 100%; height: auto;}


  /************ #sec-03 ************/

  section#sec-03 { clear: both; width: 100%; padding: 0; background-color: #E6E6E6;}

  .sec-03-text { width: 100%; padding: 5vw 0;}
  .sec-03-text img { width: 76vw; height: auto; margin: 0 auto;}

  .sec-environment-location { width: 100%;}
  .sec-environment-location .point-tip { display: none;}
  .sec-environment-location img.location-map { width: 100%; height: auto;}


  /************ sec-04 ************/

  section#sec-04 { clear: both; width: 100%; padding: 80px 0; background-color: #F2F2F2;}

  .sec-04-content { width: 100%;}
  .sec-04-content .map-box { width: 100%; padding: 0 2vw; box-sizing: border-box;}
  .sec-04-content .map-box img { width: 100%; height: auto;}
  .sec-04-content .text-box { width: 100%;}
  .sec-04-content .text-box img { width: 40vw; height: auto; margin: 5vw auto 0 auto;}


  /************ sec-05 ************/

  section#sec-05 { clear: both; width: 100%; padding: 0; position: relative;}

  img.sec-05-bg { width: 100%; height: auto; position: relative; z-index: 1;}

  img.sec-05-text-mo { display: none;}
  img.sec-05-text { width: 34vw; height: auto; position: absolute; top: 13.2vw; left: 2vw; z-index: 2;}


  /************ sec-06 ************/

  section#sec-06 { clear: both; width: 100%; padding: 0; position: relative; overflow: hidden;}

  img.sec-06-bg { width: 160%; height: auto; margin: 0 0 0 -55%; position: relative; z-index: 1;}

  img.sec-06-text-mo { display: none;}
  img.sec-06-text { width: 36vw; height: auto; position: absolute; bottom: 5vw; left: 2vw; z-index: 2;}


  /************ sec-07 ************/

  section#sec-07 { clear: both; width: 100%; padding: 80px 0; background-color: #F2F2F2;}

  .sec-07-content { width: 100%;}
  .sec-07-content .photo-box { width: 100%;}
  .sec-07-content .photo-box img { width: 100%; height: auto;}
  .sec-07-content .text-box { width: 100%; padding: 10vw 0 0 0; box-sizing: border-box;}
  .sec-07-content .text-box img.text { width: 46%; height: auto; margin: 0 auto;}
  .sec-07-content .text-box .social-box { width: 100%; padding: 5vw 0 0 0; box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
  .sec-07-content .text-box .social-box img.icon { width: 6vw; height: auto; margin: 0 2vw 0 0;}


  /************ sec-videos ************/

  section#sec-videos { clear: both; width: 100%; padding: 100px 40px; box-sizing: border-box;}

  .video-box { width: 100%; margin: 0 0 30px 0;}
  .video-box .text-box { width: 100%; padding: 10px 0; color: #333; font-size: 1.1rem;}


  /************ sec-tpwl-org ************/

  section#sec-tpwl-org { clear: both; width: 100%; padding: 100px 40px; box-sizing: border-box; background-color: #f1f1f1;}
  section#sec-tpwl-org .intro-text { width: 100%; color: #000; font-size: 1.2rem; line-height: 2em; text-align: center;}
  section#sec-tpwl-org .intro-text span.style-1 { font-size: 2rem;}
  section#sec-tpwl-org .intro-text span.style-2 { font-size: 1rem; font-weight: 600;}
  section#sec-tpwl-org .logo-title { width: 100%; margin: 40px 0 0 0; text-align: center;}
  section#sec-tpwl-org .logo-title img { max-width: 100%; height: auto; margin: 0 auto;}
  section#sec-tpwl-org .logo-title a { color: #333; font-size: 1.1rem; text-decoration: none;}
  section#sec-tpwl-org .logo-title a:hover { color: #ce5959;}


  /************ sec-08 ************/

  section#sec-08 { clear: both; width: 100%; padding: 0; overflow: hidden;}

  section#sec-08 iframe { width: 100%; height: 40vw;}


  /************ section #sec-contact ************/

  section#sec-contact { clear: both; width: 100%; padding: 80px 40px; box-sizing: border-box; background-color: #fff;}

  .contact-col-lf { width: 100%; padding: 0 50px 50px 50px; box-sizing: border-box;}
  .contact-col-lf img.logo-title { display: none;}
  .contact-col-lf .text-con { width: 100%; color: #000; font-size: 1.1rem; line-height: 2em;}

  .contact-col-rt { width: 100%; padding: 50px; box-sizing: border-box; background-color: #fff;}
  .contact-col-rt .title-text { width: 100%; font-size: 3rem; font-weight: 300;}
  .contact-col-rt .title-text-small { width: 100%; padding: 20px 0 50px 0; font-size: 1.1rem;}
  .contact-col-rt .form-caption { width: 100%; padding: 10px 0; font-size: 1.1rem; font-weight: 600;}
  .contact-col-rt .form-column { width: 100%; margin: 0 0 20px 0;}
  .contact-col-rt .form-column input, 
  .contact-col-rt .form-column select { width: 100%; padding: 10px; margin: 0 0 5px 0; color: #414141; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #f2f2f2; box-sizing: border-box;}
  .contact-col-rt input[type=button] { padding: 15px 40px; margin: 40px 0 0 0; color: #fff; font-size: 1.1rem; font-weight: 600; line-height: 1em; background-color: #000; cursor: pointer;}
  .contact-col-rt input[type=button]:hover { color: #fff; background-color: #000;}


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

  footer { clear: both; width: 100%; padding: 40px 40px; box-sizing: border-box; background-color: #247C81;}

  .footer-tel { width: 100%; color: #fff; font-size: 2.4rem; font-weight: 500; line-height: 1.2em; display: flex; justify-content: center; align-items: center;}
  .footer-tel a { color: #fff; text-decoration: none;}
  .footer-copyright-mo { display: none;}
  .footer-copyright { width: 100%; padding: 10px 0 0 0; color: #fff; font-size: 1rem; text-align: center;}


}

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

  section#index-pic-box { clear: both; width: 100%; height: 100%; padding: 0; margin: 0; overflow: hidden;}

  section#index-pic-box img.index-pic { width: 100%; height: auto;}
  section#index-pic-box img.index-pic-mo { display: none;}


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

  header { clear: both; width: 100%; height: 80px; padding: 0 20px; box-sizing: border-box; background-color: rgba(0,0,0,0.4); display: flex; justify-content: flex-start; align-items: center; position: fixed; top: 0; left: 0; z-index: 9999;}

  .logo-bx { width: 200px; margin: 0 auto;}
  .logo-bx img { width: 100%; height: auto;}

  nav#pc { display: none;}

  nav#mo { width: 100%; position: fixed; bottom: 0; left: 0; z-index: 9999;}
  nav#mo ul.nav-menu { width: 100%; padding: 10px 0; margin: 0; background-color: #ce5959; list-style: none; display: flex; justify-content: flex-end; align-items: center;}
  nav#mo ul.nav-menu li { width: calc(100% / 5); padding: 0; margin: 0; border-right: 1px #ccc solid; box-sizing: border-box;}
  nav#mo ul.nav-menu li:last-child { border-right: 0;}
  nav#mo ul.nav-menu li a { width: 100%; padding: 10px 0; text-decoration: none; display: flex; justify-content: center; align-items: center;}
  nav#mo ul.nav-menu li a img.icon { width: 9vw; height: auto;}


  /************ top-banner ************/

  .top-banner-box { clear: both; width: 100%; overflow: hidden; position: relative; z-index: 1; overflow: hidden;}
  .top-banner-box img.banner-mo { width: 100%; height: auto; position: relative; z-index: 1;}
  .top-banner-box img.banner-pc { display: none;}
  .top-banner-box img.banner-text { width: 70vw; height: auto; position: absolute; bottom: 15vw; left: calc(50% - 35vw); z-index: 2;}


  /************ section#sec-main ************/

  section#sec-main { clear: both; width: 100%; padding: 0; position: relative; overflow: hidden;}

  img.sec-main-bg { width: 300%; height: auto; margin: 0 0 0 -100%; position: relative; z-index: 1;}

  img.sec-main-text-1 { width: 70vw; height: auto; position: absolute; top: calc(80px + 20vw); left: calc(50% - 35vw); z-index: 2;}
  img.sec-main-text-2 { width: 79vw; height: auto; position: absolute; top: calc(80px + 48vw); left: calc(50% - 39.5vw); z-index: 2;}
  img.sec-main-text-3 { width: 72vw; height: auto; position: absolute; top: calc(80px + 62vw); left: calc(50% - 36vw); z-index: 2;}


  /*** 20250704新增 ***/
  .notice-slash { clear: both; width: 160px; position: absolute; top: 20vw; right: 0; z-index: 9;}
  .notice-slash a { display: block;}
  .notice-slash a img { width: 100%; height: auto;}


  /************ section#sec-main(20250704新增) ************/

  section#ettody-video { clear: both; width: 100%; padding: 40px 20px; box-sizing: border-box; position: relative;}

  .ettody-video-box { width: 100%; margin: 0 auto; padding: 0 2vw; box-sizing: border-box;}
  .ettody-video-box .text-title { width: 100%; margin: 3vw auto 0 auto; font-size: 2.6vw;}


  /************ section#factory-office-banner(20251222新增 20260130修改) ************/

  section#factory-office-banner { clear: both; width: 100%; padding: 100px 0 40px 0; background-color: #000;}
  section#factory-office-banner img.pic-pc { display: none;}
  section#factory-office-banner img.pic-mo { width: 100%; height: auto;}


  /************ section#video-intro(20251217新增) ************/

  section#video-intro { clear: both; width: 100%; padding: 40px 20px; background-color: #333; box-sizing: border-box;}

  .sec-video-intro { width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .sec-video-intro .intro-pic { width: 100%; padding: 2vw; box-sizing: border-box;}
  .sec-video-intro .intro-pic img { width: 100%; height: auto;}
  .sec-video-intro .text-intro .video-box { width: 100%; margin: 0 auto;}
  .sec-video-intro .text-intro { width: 100%; padding: 2vw; color: #fff; font-size: 3vw; font-weight: 300; line-height: 4vw; box-sizing: border-box;}
  .sec-video-intro .text-intro .title { width: 100%; padding: 0 0 2vw 0; color: #41a5a5; font-size: 7vw; font-weight: 500; line-height: 7.4vw; text-align: center;}
  .sec-video-intro .text-intro .title span.font-s { font-size: 4.8vw;}
  .sec-video-intro .text-intro .title-s-mo { display: none;}
  .sec-video-intro .text-intro .title-s { width: 100%; color: #41a5a5; font-size: 4vw; text-align: center;}
  .sec-video-intro .text-intro hr { width: 100%; border: 0; border-top: 1px rgba(255,255,255,0.3) solid;}
  .sec-video-intro img.factory-office-pic { width: 46%; padding: 2vw 2%; float: left;}


  /****  20260130修改 ****/
  .sec-video-intro .text-intro-pic { width: 100%; padding: 4vw 2vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .sec-video-intro .text-intro-pic .pic-box { width: 100%; margin: 0 0 4vw 0; border: 10px #41a5a5 solid; box-sizing: border-box;}
  .sec-video-intro .text-intro-pic .pic-box img { width: 100%; height: auto;}

  .factory-office-text { width: 100%; padding: 2vw 2vw 8vw 2vw; color: #e6e501; box-sizing: border-box;}
  .factory-office-text .title { width: 100%; padding: 0 0 2vw 0; font-size: 8vw; font-weight: 600; line-height: 1.2em; letter-spacing: 0.05em; text-align: center;}
  .factory-office-text .title span.font-s { font-size: 2.4vw;}
  .factory-office-text .title-s-mo { display: none;}
  .factory-office-text .title-s { width: 90vw; margin: 0 auto; color: #000; font-size: 6vw; font-weight: 600; text-align: center; letter-spacing: 0.05em; background-color: #fff;}


  /************ sec-01 ************/

  section#sec-01 { clear: both; width: 100%; padding: 80px 0; background-image: url("../images/sec_01_bg.png"); background-repeat: repeat-y; background-size: 100% auto;}

  .sec-01-content { width: 100%;}
  .sec-01-content .photos-list { width: 100%;}
  .sec-01-content .photos-list img.photo { width: 100%; height: auto;}
  .sec-01-content .text-box { width: 100%; margin: 10vw 0 0 0;}
  .sec-01-content .text-box img { width: 66vw; height: auto; margin: 0 auto;}


  /************ sec-02 ************/

  section#sec-02 { clear: both; width: 100%; padding: 80px 0; background-color: #333;}
  
  .sec-02-content { width: 100%;}
  .sec-02-content .text-box { width: 100%;}
  .sec-02-content .text-box img { width: 58vw; height: auto; margin: 0 auto 10vw auto;}
  .sec-02-content .photos-list { width: 100%; padding: 0 2vw; box-sizing: border-box;}
  .sec-02-content .photos-list img.photo { width: 100%; height: auto;}


  /************ #sec-03 ************/

  section#sec-03 { clear: both; width: 100%; padding: 0; background-color: #E6E6E6;}

  .sec-03-text { width: 100%; padding: 80px 0 10vw 0;}
  .sec-03-text img { width: 90%; height: auto; margin: 0 auto;}

  .sec-environment-location { width: 100%; overflow-x: scroll; position: relative;}
  .sec-environment-location::-webkit-scrollbar { display: none;}
  .sec-environment-location .point-tip { width: 100%; height: 100%; background-color: rgba(0,0,0,0.25); display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; z-index: 2;}
  .sec-environment-location .point-tip img.point { width: 30vw; height: auto;}
  .sec-environment-location .point-tip img.finger { animation-name: finger; -moz-animation-name: finger; animation-timing-function: ease; animation-timing-function: ease-in; animation-timing-function: ease-out; animation-timing-function: linear; animation-timing-function: steps(5, end); animation-direction: normal;}
  .sec-environment-location img.location-map { width: auto; height: 170vw; position: relative; z-index: 1;}


  /************ sec-04 ************/

  section#sec-04 { clear: both; width: 100%; padding: 80px 0; background-color: #F2F2F2;}

  .sec-04-content { width: 100%;}
  .sec-04-content .map-box { width: 100%; padding: 0 2vw; box-sizing: border-box;}
  .sec-04-content .map-box img { width: 100%; height: auto;}
  .sec-04-content .text-box { width: 100%;}
  .sec-04-content .text-box img { width: 56vw; height: auto; margin: 5vw auto 0 auto;}


  /************ sec-05 ************/

  section#sec-05 { clear: both; width: 100%; padding: 0; overflow: hidden; background-color: #000;}

  img.sec-05-bg { width: 160%; height: auto; margin: 0 0 0 -60%;}

  img.sec-05-text { display: none;}
  img.sec-05-text-mo { clear: both; width: 60vw; height: auto; margin: 10vw auto 80px auto;}


  /************ sec-06 ************/

  section#sec-06 { clear: both; width: 100%; padding: 0; position: relative; overflow: hidden;}

  img.sec-06-bg { width: 160%; height: auto; margin: 0 0 0 -55%;}

  img.sec-06-text { display: none;}
  img.sec-06-text-mo { clear: both; width: 66vw; height: auto; margin: 0 0 80px 5vw;}


  /************ sec-07 ************/

  section#sec-07 { clear: both; width: 100%; padding: 80px 0; background-color: #F2F2F2;}

  .sec-07-content { width: 100%;}
  .sec-07-content .photo-box { width: 100%;}
  .sec-07-content .photo-box img { width: 100%; height: auto;}
  .sec-07-content .text-box { width: 100%; padding: 10vw 0 0 0; box-sizing: border-box;}
  .sec-07-content .text-box img.text { width: 65%; height: auto; margin: 0 auto;}
  .sec-07-content .text-box .social-box { width: 100%; padding: 10vw 0 0 0; box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
  .sec-07-content .text-box .social-box img.icon { width: 10vw; height: auto; margin: 0 2vw 0 0;}


  /************ sec-videos ************/

  section#sec-videos { clear: both; width: 100%; padding: 100px 20px; box-sizing: border-box;}

  .video-box { width: 100%; margin: 0 0 30px 0;}


  /************ sec-tpwl-org ************/

  section#sec-tpwl-org { clear: both; width: 100%; padding: 100px 20px; box-sizing: border-box; background-color: #f1f1f1;}
  section#sec-tpwl-org .intro-text { width: 100%; color: #000; font-size: 1.2rem; line-height: 2em; text-align: center;}
  section#sec-tpwl-org .intro-text span.style-1 { font-size: 2rem;}
  section#sec-tpwl-org .intro-text span.style-2 { font-size: 1rem; font-weight: 600;}
  section#sec-tpwl-org .logo-title { width: 100%; margin: 40px 0 0 0; text-align: center;}
  section#sec-tpwl-org .logo-title img { max-width: 100%; height: auto; margin: 0 auto;}
  section#sec-tpwl-org .logo-title a { color: #333; font-size: 1.1rem; text-decoration: none;}
  section#sec-tpwl-org .logo-title a:hover { color: #ce5959;}


  /************ sec-08 ************/

  section#sec-08 { clear: both; width: 100%; padding: 0; overflow: hidden;}

  section#sec-08 iframe { width: 100%; height: 60vw;}
  .video-box .text-box { width: 100%; padding: 10px 0; color: #333; font-size: 1rem;}


  /************ section #sec-contact ************/

  section#sec-contact { clear: both; width: 100%; padding: 80px 20px; box-sizing: border-box; background-color: #fff;}

  .contact-col-lf { width: 100%; padding: 0 0 50px 0; box-sizing: border-box;}
  .contact-col-lf img.logo-title { display: none;}
  .contact-col-lf .text-con { width: 100%; color: #000; font-size: 1.1rem; line-height: 2em;}

  .contact-col-rt { width: 100%; padding: 50px 0; box-sizing: border-box; background-color: #fff;}
  .contact-col-rt .title-text { width: 100%; font-size: 3rem; font-weight: 300;}
  .contact-col-rt .title-text-small { width: 100%; padding: 20px 0 50px 0; font-size: 1.1rem;}
  .contact-col-rt .form-caption { width: 100%; padding: 10px 0; font-size: 1.1rem; font-weight: 600;}
  .contact-col-rt .form-column { width: 100%; margin: 0 0 20px 0;}
  .contact-col-rt .form-column input, 
  .contact-col-rt .form-column select { width: 100%; padding: 10px; margin: 0 0 5px 0; color: #414141; font-size: 1.1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #f2f2f2; box-sizing: border-box;}
  .contact-col-rt input[type=button] { padding: 15px 40px; margin: 40px 0 0 0; color: #fff; font-size: 1.1rem; font-weight: 600; line-height: 1em; background-color: #000; cursor: pointer;}
  .contact-col-rt input[type=button]:hover { color: #fff; background-color: #000;}


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

  footer { clear: both; width: 100%; padding: 40px 20px; box-sizing: border-box; background-color: #247C81;}

  .footer-tel { width: 100%; color: #fff; font-size: 2.4rem; font-weight: 500; line-height: 1.2em; display: flex; justify-content: center; align-items: center;}
  .footer-tel a { color: #fff; text-decoration: none;}
  .footer-copyright { display: none;}
  .footer-copyright-mo { width: 100%; padding: 20px 0 calc(20px + 9vw + 20px) 0; color: #fff; font-size: 0.8rem; text-align: center;}
  

}