@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; width: 100%; display: block;}


/************ 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) {

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

  header { clear: both; width: 100%; height: 170px; display: flex; justify-content: flex-start; align-items: center;}

  .header-logo { width: 300px; padding: 0 0 0 124px; box-sizing: border-box;}
  .header-logo img { width: 156px; height: auto;}

  nav#mo { display: none;}
  nav#pc { width: calc(100% - 300px); height: 170px;}
  nav#pc ul.nav-menu { width: 100%; height: 100%; padding: 0 20px 0 0; margin: 0; list-style: none; display: flex; justify-content: flex-end; align-items: center; box-sizing: border-box}
  nav#pc ul.nav-menu li { height: 100%; padding: 0 55px 0 0; margin: 0; position: relative;}
  nav#pc ul.nav-menu li a { width: 90px; height: 100%; color: #000; font-size: 1.1rem; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 600; text-decoration: none; display: flex; justify-content: center; align-items: center; position: relative; cursor: pointer;}
  nav#pc ul.nav-menu li a .line-v { width: 3px; height: 60px; background-color: #B11C26; display: none; position: absolute; top: 0; left: calc(50% - 1.5px);}
  nav#pc ul.nav-menu li a:hover { font-size: 1.4rem;}
  nav#pc ul.nav-menu li a:hover .line-v { display: block;}
  nav#pc ul.nav-menu li a.sel { font-size: 1.4rem;}
  nav#pc ul.nav-menu li a.sel .line-v { display: block;}
  nav#pc ul.nav-menu li ul#nav-popup { padding: 0; margin: 0; list-style: none; display: none; justify-content: center; align-items: center; position: absolute; bottom: 20px; left: 0; z-index: 99999;}
  nav#pc ul.nav-menu li ul#nav-popup li { padding: 0; margin: 5px;}
  nav#pc ul.nav-menu li ul#nav-popup li a { width: 80px; padding: 3px 0; color: #000; font-size: 1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; font-weight: 300; text-align: center; text-decoration: none; border: 1px #A7A7A7 solid; background-color: #fff; display: block;}
  nav#pc ul.nav-menu li ul#nav-popup li a:hover { color: #fff; border: 1px #007E82 solid; background-color: #007E82;}


  /************ hp-banner ************/

  .hp-banner-bx { clear: both; width: 100%; position: relative;}
  .hp-banner-bx .banner-con { width: 100%; background-color: #F2F2F2; display: flex !important; justify-content: flex-start; align-items: center; position: relative; z-index: 1;}
  .hp-banner-bx .banner-con img.banner { width: 68vw; height: auto;}
  .hp-banner-bx .banner-con .text-content { width: calc(100% - 68vw); padding: 0 2.5vw; color: #000; font-size: 0.8vw; font-weight: 300; line-height: 1vw; box-sizing: border-box;}
  .hp-banner-bx .banner-con .text-content span.title-en { color: #4D4D4D; font-size: 1vw; font-weight: 300; border-bottom: 3px #4D4D4D solid;}
  .hp-banner-bx .banner-con .text-content span.title-zh { color: #000; font-size: 1.5vw; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 700; line-height: 3vw;}
  .hp-banner-bx .banner-con .text-content img.more-bt { width: 2vw; height: auto;}
  .hp-banner-bx img.arrow_prev { width: 3.5vw; height: auto; position: absolute; bottom: 5.7vw; left: 64.5vw; z-index: 2; cursor: pointer;}
  .hp-banner-bx img.arrow_next { width: 3.5vw; height: auto; position: absolute; bottom: 5.7vw; left: 68vw; z-index: 2; cursor: pointer;}


  /************ breadcrumbs ************/

  #breadcrumbs-bar { clear: both; width: 100%; padding: 30px calc(50% - 660px) 20px calc(50% - 660px); color: #03733a; font-size: 1rem; line-height: 1.4em; box-sizing: border-box;}
  #breadcrumbs-bar a { color: #007E82; text-decoration: none;}
  #breadcrumbs-bar a:hover { border-bottom: 2px #007E82 solid;}


  /************ section #hp-about ************/

  section#hp-about { clear: both; width: 100%; padding: 70px calc(50% - 600px) 85px calc(50% - 600px); box-sizing: border-box; background-color: #fff; position: relative;}

  .hp-about-con { clear: both; width: 100%; position: relative; z-index: 2;}
  .hp-about-con .title-en { width: 100%; text-align: center;}
  .hp-about-con .title-en span { color: #4D4D4D; font-size: 1.4rem; font-family: 300; border-bottom: 3px #4D4D4D solid;}
  .hp-about-con .title-zh { width: 100%; margin: 60px 0 50px 0; color: #000; font-size: 2.4rem; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 700; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; display: flex; justify-content: center; align-items: center;}
  .hp-about-con .text-con { width: 100%; margin: 0 0 90px 0; color: #4D4D4D; font-size: 1.2rem; line-height: 1.6em; text-align: center;}
  .hp-about-con .more-bt { width: 550px; margin: 0 auto;}
  .hp-about-con .more-bt a { width: 100%; padding: 10px 0; color: #fff; font-size: 1.1rem; font-weight: 300; text-align: center; text-decoration: none; letter-spacing: 0.15em; border-radius: 30px; background-color: #4D4D4D; display: block;}

  img.hp-about-bg { width: 756px; height: auto; position: absolute; top: 120px; left: calc(50% - 378px); z-index: 1;}


  /************ section #hp-articles ************/

  section#hp-articles { clear: both; width: 100%; padding: 0 0 70px 0; background-image: url("../images/hp_articles_bg.jpg"); background-repeat: no-repeat; background-size: auto 600px; background-position: center top;}

  .hp-articles-intro { clear: both; width: 100%; padding: 30px 0 100px 50%; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start;}
  .hp-articles-intro .title-zh { width: 140px; padding: 60px 20px 0 0; color: #000; font-size: 2.4rem; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 700; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; box-sizing: border-box;}
  .hp-articles-intro .text-con { width: calc(100% - 140px);}
  .hp-articles-intro .text-con .title-en { width: 100%;}
  .hp-articles-intro .text-con .title-en span { color: #4D4D4D; font-size: 1.4rem; font-family: 300; border-bottom: 3px #4D4D4D solid;}
  .hp-articles-intro .text-con .intro { width: 100%; margin: 20px 0 0 0; color: #4D4D4D; font-size: 1.2rem; line-height: 2em;}

  .hp-articles-list { clear: both; width: 100%; position: relative;}
  .hp-articles-list img.arrow_prev { width: 3.3vw; height: auto; position: absolute; top: 16.5vw; left: 0; z-index: 2; cursor: pointer;}
  .hp-articles-list img.arrow_next { width: 3.3vw; height: auto; position: absolute; top: 16.5vw; right: 0; z-index: 2; cursor: pointer;}
  .hp-articles-list .articles-slider { width: 70%; margin: 0 auto; position: relative; z-index: 1;}
  .hp-articles-list .articles-slider .article-box { width: 36vw; padding: 0 1vw; box-sizing: border-box;}
  .hp-articles-list .articles-slider .article-box img.article-pic { width: 100%; height: auto;}
  .hp-articles-list .articles-slider .date { width: 100%; padding: 1vw 0 0 0; color: #333; font-size: 1.1vw; font-weight: 300;}
  .hp-articles-list .articles-slider .title { width: 100%; padding: 0.5vw 0; color: #007E87; font-size: 1.6vw; font-weight: 300;}
  .hp-articles-list .articles-slider .intro { width: 100%; padding: 0 0 1vw 0; color: #333; font-size: 1vw; font-weight: 300; line-height: 2vw;}
  .hp-articles-list .articles-slider img.more-bt { clear: both; width: 2vw; height: auto;}

  .articles-more-bt { width: 550px; margin: 45px auto 0 auto;}
  .articles-more-bt a { width: 100%; padding: 10px 0; color: #fff; font-size: 1.1rem; font-weight: 300; text-align: center; text-decoration: none; letter-spacing: 0.15em; border-radius: 30px; background-color: #4D4D4D; display: block;}


  /************ page-banner-bx ************/

  .page-banner-bx { clear: both; width: 100%;}
  .page-banner-bx img { width: 100%; height: auto;}


  /************ section #page-about-part2 ************/

  section#page-about-part2 { clear: both; width: 100%; padding: 80px calc(50% - 660px); background-image: url("../images/page_about_sec_bg.jpg"); background-repeat: no-repeat; background-size: 100% auto; background-position: left top; box-sizing: border-box;}

  .about-p2-sub-title { width: 100%; color: #000; font-size: 2.4rem; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 700;}

  .about-p2-con { clear: both; width: 100%; margin: 0 0 70px 0; display: flex; justify-content: flex-start; align-items: flex-start;}
  .about-p2-con .col-lf { width: 50%; padding: 0 30px 0 0; box-sizing: border-box;}
  .about-p2-con .col-lf .text { width: 100%; padding: 10px 0; color: #333; font-size: 1.2rem; font-weight: 300; line-height: 1.8em;}
  .about-p2-con .col-lf img.pic-1-1 { width: 410px; height: auto; margin: 0 auto;}
  .about-p2-con .col-lf img.pic-1-2 { width: 100%; height: auto;}
  .about-p2-con .col-rt { width: 50%; padding: 20px 0 0 30px; box-sizing: border-box;}
  .about-p2-con .col-rt img.pic-2 { width: 100%; height: auto;}


  /************ section #page-about-part3 ************/

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

  img.page-about-sec3-pic { width: 100%; height: auto;}

  .about-p3-text { clear: both; width: 100%; padding: 60px 60px 80px 60px; box-sizing: border-box;}
  .about-p3-text .title { width: 100%; color: #000; font-size: 2.4rem; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 700; text-align: center;}
  .about-p3-text .text { width: 100%; padding: 20px 0 0 0; color: #333; font-size: 1.2rem; line-height: 1.8em; text-align: center;}


  /************ section #page-news ************/

  section#page-news-top { clear: both; width: 100%; padding: 70px calc(50% - 600px) 40px calc(50% - 600px); box-sizing: border-box; background-color: #fff; position: relative;}

  .page-news-con { clear: both; width: 100%; position: relative; z-index: 2;}
  .page-news-con .title-en { width: 100%; text-align: center;}
  .page-news-con .title-en span { color: #4D4D4D; font-size: 1.4rem; font-family: 300; border-bottom: 3px #4D4D4D solid;}
  .page-news-con .title-zh { width: 100%; margin: 60px 0 50px 0; color: #000; font-size: 2.4rem; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 700; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; display: flex; justify-content: center; align-items: center;}
  .page-news-con .text-con { width: 100%; margin: 0 0 90px 0; color: #4D4D4D; font-size: 1.2rem; line-height: 1.6em; text-align: center;}
  .page-news-con .more-bt { width: 550px; margin: 0 auto;}
  .page-news-con .more-bt a { width: 100%; padding: 10px 0; color: #fff; font-size: 1.1rem; font-weight: 300; text-align: center; text-decoration: none; letter-spacing: 0.15em; border-radius: 30px; background-color: #4D4D4D; display: block;}

  img.page-news-bg { width: 756px; height: auto; position: absolute; top: 120px; left: calc(50% - 378px); z-index: 1;}


  section#page-news { clear: both; width: 100%; padding: 60px calc(50% - 640px) 120px calc(50% - 640px); background-image: url("../images/page_about_sec_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top; box-sizing: border-box;}

  .page-news-top-hot { width: calc(100% - 20px); margin: 0 auto; background-color: #E0E0E0; position: relative;}
  .page-news-top-hot .news-title { width: 100px; padding: 5px 0; color: #fff; font-size: 1.2rem; text-align: center; background-color: #007E88; position: absolute; top: -20px; left: calc(50% - 50px); z-index: 2;}
  .page-news-top-hot a { width: 100%; text-decoration: none; display: flex; justify-content: flex-start; align-items: center;}
  .page-news-top-hot a .news-photo { width: 50%; position: relative; z-index: 1;}
  .page-news-top-hot a .news-photo img { width: 100%; height: auto;}
  .page-news-top-hot a .news-infor { width: 50%; padding: 0 80px; box-sizing: border-box; position: relative; z-index: 1;}
  .page-news-top-hot a .news-infor .date { width: 100%; color: #333; font-size: 1.1rem;}
  .page-news-top-hot a .news-infor .title { width: 100%; padding: 10px 0; color: #007E88; font-size: 2rem; font-weight: 300; line-height: 1.4em;}
  .page-news-top-hot a .news-infor .intro { width: 100%; color: #333; font-size: 1.1rem; line-height: 2rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;}

  .page-news-list { clear: both; width: 100%; margin: 60px 0 0 0; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-news-list .news-list-bx { width: calc(100% / 4); margin: 0 0 40px 0;}
  .page-news-list .news-list-bx a { width: 100%; padding: 10px; border: 1px transparent solid; text-decoration: none; box-sizing: border-box; display: block;}
  .page-news-list .news-list-bx a:hover { border: 1px #4D4D4D solid;}
  .page-news-list .news-list-bx a .photo { width: 100%; margin: 0 0 15px 0;}
  .page-news-list .news-list-bx a .photo img { width: 100%; height: auto;}
  .page-news-list .news-list-bx a .intro { width: 100%; padding: 0 10px; box-sizing: border-box;}
  .page-news-list .news-list-bx a .intro .date { width: 100%; color: #333; font-size: 1rem;}
  .page-news-list .news-list-bx a .intro .title { width: 100%; padding: 5px 0 10px 0; color: #007E88; font-size: 1.4rem; font-weight: 500; line-height: 1.4em;}
  .page-news-list .news-list-bx a .intro .text { width: 100%; color: #333; font-size: 1rem; line-height: 1.8rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;}


  .page-news-detail { clear: both; width: 100%;}
  .page-news-detail .news-title { width: 100%; padding: 0 0 20px 0; color: #333; font-size: 2rem; font-weight: 500; line-height: 1.4em;}
  .page-news-detail .news-date { width: 100%; padding: 0 0 40px 0; color: #4D4D4D; font-size: 1.1rem;}
  .page-news-detail .news-content { width: 100%; padding: 0 0 40px 0; color: #000; font-size: 1.2rem; line-height: 1.8em;}
  .page-news-detail .news-content img.photo { clear: both; max-width: 100%; height: auto; margin: 0 0 20px 0;}
  .page-news-detail .news-content a { color: #000; text-decoration: none; border-bottom: 1px #000 dashed;}
  .page-news-detail .news-content a:hover { color: #007E82; border-bottom: 1px #007E82 dashed;}


  /************ section #page-works ************/

  section#page-works { clear: both; width: 100%; padding: 60px 0; background-image: url("../images/page_works_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top; box-sizing: border-box; position: relative;}

  .page-works-con { clear: both; width: 100%; position: relative; z-index: 2;}
  .page-works-con .title-en { width: 100%; text-align: center;}
  .page-works-con .title-en span { color: #4D4D4D; font-size: 1.4rem; font-family: 300; border-bottom: 3px #4D4D4D solid;}
  .page-works-con .title-zh { width: 100%; margin: 60px 0 50px 0; color: #000; font-size: 2.4rem; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 700; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; display: flex; justify-content: center; align-items: center;}
  .page-works-con .text-con { width: 100%; margin: 0 0 90px 0; color: #4D4D4D; font-size: 1.2rem; line-height: 1.6em; text-align: center;}
  .page-works-con .more-bt { width: 550px; margin: 0 auto;}
  .page-works-con .more-bt a { width: 100%; padding: 10px 0; color: #fff; font-size: 1.1rem; font-weight: 300; text-align: center; text-decoration: none; letter-spacing: 0.15em; border-radius: 30px; background-color: #4D4D4D; display: block;}

  img.page-works-bg { width: 756px; height: auto; position: absolute; top: 120px; left: calc(50% - 378px); z-index: 1;}

  .page-works-history { clear: both; width: 100%; margin: 65px 0 0 0;}
  .page-works-history .works-title { width: 100px; padding: 5px 0; margin: 0 auto; color: #fff; font-size: 1.2rem; text-align: center; background-color: #007E88;}
  .page-works-history .works-timeline { width: 100%; padding: 80px calc(50% - 550px) 0 calc(50% - 550px); box-sizing: border-box; background-image: url("../images/page_works_history_line_v.png"); background-repeat: repeat-y; background-position: center top; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
  /*col-lf*/
  .page-works-history .works-timeline .col-lf { width: calc(50% - 52px);}
  .page-works-history .works-timeline .col-lf img.dotdot-v { width: 94px; height: auto; margin: 25px 153px 0 0; float: right;}
  .page-works-history .works-timeline .col-lf .works-box { display: block;}
  .page-works-history .works-timeline .col-lf .works-box.year-1 { width: 500px;}
  .page-works-history .works-timeline .col-lf .works-box.year-3 { width: 400px; margin: -213px 0 0 0; float: right;}
  .page-works-history .works-timeline .col-lf .works-box.year-1 .photo { width: 500px; height: 500px; border-radius: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden;}
  .page-works-history .works-timeline .col-lf .works-box.year-3 .photo { width: 400px; height: 400px; border-radius: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden;}
  .page-works-history .works-timeline .col-lf .works-box .photo img { width: 100%; height: auto;}
  .page-works-history .works-timeline .col-lf .works-box .year { width: 100%; margin: 20px 0 0 0; color: #80BDDB; font-size: 4rem; font-weight: 600; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; line-height: 1.2em; text-align: center;}
  .page-works-history .works-timeline .col-lf .works-box .title { width: 100%; color: #000; font-size: 3.4rem; font-weight: 700; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; text-align: center;}
  .page-works-history .works-timeline .col-lf .works-box .infor { width: 100%; color: #000; font-size: 1.4rem; font-weight: 600; text-align: center;}
  .page-works-history .works-timeline .col-lf .works-box .more { width: 100%; margin: 10px 0 0 0;}
  .page-works-history .works-timeline .col-lf .works-box .more img { width: 40px; height: auto; margin: 0 auto;}
  /*col-rt*/
  .page-works-history .works-timeline .col-rt { width: calc(50% - 52px);}
  .page-works-history .works-timeline .col-rt img.dotdot-h { width: 400px; height: auto; margin: 196px 0 0 60px;}
  .page-works-history .works-timeline .col-rt .works-box { display: block;}
  .page-works-history .works-timeline .col-rt .works-box.year-2 { width: 450px; margin: -275px 0 0 0;}
  .page-works-history .works-timeline .col-rt .works-box.year-4 { width: 400px; margin: -190px 0 0 0;}
  .page-works-history .works-timeline .col-rt .works-box.year-2 .photo { width: 450px; height: 450px; border-radius: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden;}
  .page-works-history .works-timeline .col-rt .works-box.year-4 .photo { width: 400px; height: 400px; border-radius: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden;}
  .page-works-history .works-timeline .col-rt .works-box .photo img { width: 100%; height: auto;}
  .page-works-history .works-timeline .col-rt .works-box .year { width: 100%; margin: 20px 0 0 0; color: #80BDDB; font-size: 4rem; font-weight: 600; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; line-height: 1.2em; text-align: center;}
  .page-works-history .works-timeline .col-rt .works-box .title { width: 100%; color: #000; font-size: 3.4rem; font-weight: 700; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; text-align: center;}
  .page-works-history .works-timeline .col-rt .works-box .infor { width: 100%; color: #000; font-size: 1.4rem; font-weight: 600; text-align: center;}
  .page-works-history .works-timeline .col-rt .works-box .more { width: 100%; margin: 10px 0 0 0;}
  .page-works-history .works-timeline .col-rt .works-box .more img { width: 40px; height: auto; margin: 0 auto;}
  /*col-md*/
  .page-works-history .works-timeline .col-md-1 { width: 104px; margin: 230px 0 0 0; background-image: url("../images/page_works_history_line.png"); background-repeat: repeat-x; background-position: center center;}
  .page-works-history .works-timeline .col-md-2 { width: 104px; margin: -60px 0 0 0; background-image: url("../images/page_works_history_line.png"); background-repeat: repeat-x; background-position: center center;}
  .page-works-history .works-timeline .col-md-3 { width: 104px; margin: -20px 0 0 0; background-image: url("../images/page_works_history_line.png"); background-repeat: repeat-x; background-position: center center;}
  .page-works-history .works-timeline .col-md-4 { width: 104px; margin: 10px 0 0 0; background-image: url("../images/page_works_history_line.png"); background-repeat: repeat-x; background-position: center center;}
  .page-works-history .works-timeline .col-md-1 .red-dot, 
  .page-works-history .works-timeline .col-md-2 .red-dot, 
  .page-works-history .works-timeline .col-md-3 .red-dot, 
  .page-works-history .works-timeline .col-md-4 .red-dot { width: 26px; height: 26px; margin: 0 auto; border-radius: 100%; background-color: #AC1C26; display: block;}
  .page-works-history img.timeline-end { width: 100px; height: auto; margin: 0 auto;}


  /************ section #page-works-hot ************/

  section#page-works-hot { clear: both; width: 100%; background-image: url("../images/page_works_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top; box-sizing: border-box; position: relative;}

  .page-works-hot-title { width: 100%; padding: 2.5vw 0 0 58vw; box-sizing: border-box; position: absolute; top: 0; left: 0; z-index: 3;}
  .page-works-hot-title span { color: #4D4D4D; font-size: 1vw; font-family: 300; border-bottom: 3px #4D4D4D solid;}

  .works-hot-top-text { clear: both; width: 100%; padding: 2vw 1.5vw 1.5vw 1.5vw; color: #fff; font-size: 0.7vw; font-weight: 300; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; line-height: 1vw; box-sizing: border-box; background-color: #E6E6E6; position: relative; z-index: 1;}

  .page-works-hot-list { clear: both; width: 100%; position: relative;}
  .page-works-hot-list img.works-hot-photo { clear: both; width: 68vw; height: auto; margin: 5vw 0 0 0; position: relative; z-index: 2; float: left;}
  .page-works-hot-list .works-hot-infor { width: 45vw; padding: 11.7vw 1vw 2.5vw 17.5vw; margin: -45vw 0 0 0; box-sizing: border-box; background-color: #fff; position: relative; z-index: 1; float: right;}
  .page-works-hot-list .works-hot-infor .works-infor { width: 100%;}
  .page-works-hot-list .works-hot-infor .works-infor .works-title { width: 5.4vw; padding: 0.1vw 0; color: #fff; font-size: 0.9vw; text-align: center; background-color: #007E88;}
  .page-works-hot-list .works-hot-infor .works-infor .year { width: 100%; color: #80BDDB; font-size: 3vw; font-weight: 600; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; line-height: 3vw;}
  .page-works-hot-list .works-hot-infor .works-infor .title { width: 100%; padding: 0.3vw 0; color: #000; font-size: 2.4vw; font-weight: 700; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial;}
  .page-works-hot-list .works-hot-infor .works-infor .infor { width: 100%; color: #333; font-size: 1.1vw; font-weight: 300; line-height: 3vw;}
  .page-works-hot-list img.works-hot-infor-arrow { clear: both; width: 8.5vw; height: auto; margin: -4vw 9vw 0 0; float: right; position: relative; z-index: 3;}
  .page-works-hot-list .works-hot-contact-bar { clear: both; width: 100%; padding: 2.5vw 2vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  .page-works-hot-list .works-hot-contact-bar img.works-hot-illu { width: 20vw; height: auto; margin: 0 2vw 0 0;}
  .page-works-hot-list .works-hot-contact-bar .contact-icon-box { width: 3.2vw; margin: 0 1.8vw;}
  .page-works-hot-list .works-hot-contact-bar .contact-icon-box a { width: 100%; text-align: center; text-decoration: none; display: block;}
  .page-works-hot-list .works-hot-contact-bar .contact-icon-box a img { width: 2.7vw; height: auto; margin: 0 auto 0.3vw auto;}
  .page-works-hot-list .works-hot-contact-bar .contact-icon-box a span { color: #007E82; font-size: 0.8vw; font-weight: 500;}


  /************ section #page-works-hot-con ************/

  section#page-works-hot-con { clear: both; width: 100%; background-image: url("../images/page_works_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top; box-sizing: border-box; position: relative;}

  .works-hot-con-intro { width: 100%;}
  .works-hot-con-intro .photos-big { width: 100%; display: flex; justify-content: center; align-items: flex-start;}
  .works-hot-con-intro .photos-big img { width: 50%; height: auto;}
  .works-hot-con-intro .intro-content { clear: both; width: 100%; padding: 40px calc(50% - 540px); box-sizing: border-box; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
  .works-hot-con-intro .intro-content .text-con-1-mo { display: none;}
  .works-hot-con-intro .intro-content .text-con-1 { width: 100%; margin: 0 0 40px 0; color: #333; font-size: 1.2rem; text-align: center; line-height: 2em;}
  .works-hot-con-intro .intro-content img.intro-photos { clear: both; width: calc(50% - 20px); margin: 10px;}
  .works-hot-con-intro .intro-content .text-con-2 { width: 100%; padding: 0 150px; margin: 40px 0; color: #333; font-size: 1.2rem; text-align: center; line-height: 2em; box-sizing: border-box;}
  .works-hot-con-intro .intro-content .text-con-2 span.title { color: #000; font-size: 1.6rem; font-weight: 600;}
  .works-hot-con-intro .map-contact { clear: both; width: 100%; position: relative;}
  .works-hot-con-intro .map-contact .map { width: 61vw; padding: 0 0 40px 0; background-color: #fff;}
  .works-hot-con-intro .map-contact .map img { width: 100%; height: auto;}
  .works-hot-con-intro .map-contact .contact-icon { width: calc(100% - 61vw); background-color: #fff; position: absolute; bottom: 0; right: 0; z-index: 1;}
  .works-hot-con-intro .map-contact .contact-icon img.illu { width: 20vw; height: auto; margin: 2vw auto 0 auto;}
  .works-hot-con-intro .map-contact .contact-icon .icons-box-full { clear: both; width: 20vw; margin: 3vw auto; display: flex; justify-content: center; align-items: flex-start;}
  .works-hot-con-intro .map-contact .contact-icon .icons-box-full .icon-box { width: 4vw; margin: 0 1.5vw;}
  .works-hot-con-intro .map-contact .contact-icon .icons-box-full .icon-box a { width: 100%; text-decoration: none; display: block;}
  .works-hot-con-intro .map-contact .contact-icon .icons-box-full .icon-box a img { width: 2.8vw; height: auto; margin: 0 auto;}
  .works-hot-con-intro .map-contact .contact-icon .icons-box-full .icon-box a .title { width: 100%; padding: 0.4vw 0 0 0; color: #007E82; font-size: 0.8vw; font-weight: 500; text-align: center;}
  .works-hot-con-intro .map-contact .contact-icon .arrow-top { clear: both; width: 4.3vw; margin: 0 auto;}
  .works-hot-con-intro .map-contact .contact-icon .arrow-top a { width: 100%; display: block;}
  .works-hot-con-intro .map-contact .contact-icon .arrow-top a img { width: 100%; height: auto;}


  /************ section #page-articles ************/

  section#page-articles { clear: both; width: 100%; padding: 0 7.5vw 120px 7.5vw; margin: -90px 0 0 0; background-image: url("../images/page_about_sec_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top; box-sizing: border-box;}

  .page-articles-con { clear: both; width: 100%; padding: 0 0 150px 0; position: relative; z-index: 2;}
  .page-articles-con .title-en { width: 100%; text-align: center;}
  .page-articles-con .title-en span { color: #4D4D4D; font-size: 1.4rem; font-family: 300; border-bottom: 3px #4D4D4D solid;}
  .page-articles-con .title-zh { width: 100%; margin: 60px 0 50px 0; color: #000; font-size: 2.4rem; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 700; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; display: flex; justify-content: center; align-items: center;}
  .page-articles-con .text-con { width: 100%; margin: 0 0 90px 0; color: #4D4D4D; font-size: 1.2rem; line-height: 1.6em; text-align: center;}
  
  img.page-articles-bg { width: 756px; height: auto; position: absolute; top: 120px; left: calc(50% - 378px); z-index: 1;}

  .page-articles-list { clear: both; width: 100%; margin: 0 auto; position: relative;}
  .page-articles-list .article-title { width: 100px; padding: 5px 0; color: #fff; font-size: 1.2rem; text-align: center; background-color: #007E88; position: absolute; top: -20px; left: calc(50% - 50px); z-index: 2;}
  .page-articles-list a { width: 100%; margin: 0 0 40px 0; text-decoration: none; background-color: #E0E0E0; display: flex; justify-content: flex-start; align-items: center;}
  .page-articles-list a .article-photo { width: 50%; position: relative; z-index: 1;}
  .page-articles-list a .article-photo img { width: 100%; height: auto;}
  .page-articles-list a .article-infor { width: 50%; padding: 0 85px; box-sizing: border-box; position: relative; z-index: 1;}
  .page-articles-list a .article-infor .date { width: 100%; color: #333; font-size: 1.1rem;}
  .page-articles-list a .article-infor .title { width: 100%; padding: 10px 0; color: #007E88; font-size: 2rem; font-weight: 300; line-height: 1.4em;}
  .page-articles-list a .article-infor .intro { width: 100%; color: #333; font-size: 1.1rem; line-height: 2rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;}


  ul.page-number-bar { clear: both; width: 100%; padding: 0; margin: 60px 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center;}
  ul.page-number-bar li { padding: 0; margin: 0 5px 10px 5px;}
  ul.page-number-bar li a { padding: 8px; color: #007E87; font-size: 1.1rem; line-height: 1em; text-decoration: none; border: 1px #007E87 solid; background-color: #fff; display: block;}
  ul.page-number-bar li a:hover { background-color: #eee;}
  ul.page-number-bar li a.sel { color: #fff; background-color: #007E87;}


  /************ section #page-articles-con ************/

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

  .page-articles-con-title { clear: both; width: 64.5vw; padding: 2vw 3vw; margin: 0 7.5vw 90px 0; background-color: #DFDFDF; box-sizing: border-box; float: right;}
  .page-articles-con-title .date { width: 100%; color: #333; font-size: 1.1rem;}
  .page-articles-con-title .title { width: 100%; padding: 10px 0 0 0; color: #007E88; font-size: 2rem; font-weight: 300; line-height: 1.4em;}

  .page-articles-con-text { clear: both; width: 100%; padding: 0 7.5vw 80px 7.5vw; box-sizing: border-box; background-image: url("../images/page_about_sec_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top; position: relative;}
  .page-articles-con-text img.articles-pic { width: 100%; height: auto; position: relative; top: -90px; left: 0; z-index: 1;}
  .page-articles-con-text .content { clear: both; width: 80%; margin: -40px auto 50px auto; color: #333; font-size: 1.2rem; line-height: 1.8em;}

  img.goback-bt { width: 36px; height: auto; margin: 0 auto;}


  /************ section #page-progress ************/

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

  .page-progress-title { clear: both; width: 100%; padding: 50px 0;}
  .page-progress-title .title-en { width: 100%; text-align: center;}
  .page-progress-title .title-en span { color: #4D4D4D; font-size: 1.4rem; font-family: 300; border-bottom: 3px #4D4D4D solid;}
  .page-progress-title .title-zh { clear: both; width: 140px; padding: 5px 0; margin: 15px auto 30px auto; color: #fff; font-size: 1.4rem; text-align: center; background-color: #007E88;}
  .page-progress-title .text-intro-mo { display: none;}
  .page-progress-title .text-intro { clear: both; width: 100%; margin: 0 auto; color: #4D4D4D; font-size: 1.2rem; line-height: 1.6em; text-align: center;}

  .page-progress-list { clear: both; width: 100%; padding: 90px 7vw; box-sizing: border-box;}
  .page-progress-list:nth-child(even) { background-image: url("../images/page_about_sec_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top;}
  .page-progress-list:nth-child(odd) { background-color: #E0E0E0;}
  .page-progress-list .title-box { width: 100%; padding: 0 7.5vw; margin: 0 0 30px 0; display: flex; justify-content: flex-start; align-items: center; box-sizing: border-box;}
  .page-progress-list .title-box span.title-zh { padding: 0 10px 0 0; border-right: 2px #007E88 solid; color: #000; font-size: 4rem; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 700; line-height: 1.2em;}
  .page-progress-list .title-box span.title-info { padding: 0 0 0 10px; color: #4D4D4D; font-size: 1.4rem; line-height: 1.2em;}
  .page-progress-list .progress-list-slide { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: center;}
  .page-progress-list .progress-list-slide .arrow-prev { width: 7.5vw; padding: 0 4.2vw 0 0; box-sizing: border-box;}
  .page-progress-list .progress-list-slide .arrow-next { width: 7.5vw; padding: 0 0 0 4.2vw; box-sizing: border-box;}
  .page-progress-list .progress-list-slide .arrow-prev img, 
  .page-progress-list .progress-list-slide .arrow-next img { width: 100%; height: auto; cursor: pointer;}
  .page-progress-list .progress-list-slide .progress-list-full { width: calc(100% - 15vw);}
  .page-progress-list .progress-list-slide .progress-list-full .list-box { width: calc(100% / 3);}
  .page-progress-list .progress-list-slide .progress-list-full .list-box .photo { width: 100%;}
  .page-progress-list .progress-list-slide .progress-list-full .list-box .photo a img { width: 100%; height: auto;}
  .page-progress-list .progress-list-slide .progress-list-full .list-box .photo a:hover img { opacity: 0.5;}
  .page-progress-list .progress-list-slide .progress-list-full .list-box .date-title { width: 100%; margin: 10px 0 0 0; display: flex; justify-content: flex-start; align-items: center;}
  .page-progress-list .progress-list-slide .progress-list-full .list-box .date-title .date { width: 6.3vw; padding: 0.5vw 0; color: #007E88; font-size: 1.8vw; line-height: 1.8vw; text-align: center; border: 2px #007E88 solid; box-sizing: border-box;}
  .page-progress-list .progress-list-slide .progress-list-full .list-box .date-title .date span.year { font-size: 2vw;}
  .page-progress-list .progress-list-slide .progress-list-full .list-box .date-title .title { width: calc(100% - 6.3vw); padding: 0 0 0 0.8vw; color: #007E88; font-size: 1.6vw; box-sizing: border-box;}


  /*20250307更新*/
  .page-progress-login { clear: both; width: 100%; padding: 90px 7vw; box-sizing: border-box; background-color: #eee;}
  .page-progress-login form { width: 400px; margin: 0 auto; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .page-progress-login form .caption { width: 130px; padding: 5px 0; font-size: 1.4rem; text-align: left;}
  .page-progress-login form .column { width: calc(100% - 130px); padding: 5px 0;}
  .page-progress-login form .column input[type=text], 
  .page-progress-login form .column input[type=password] { width: 100%; padding: 10px; font-size: 1.4rem; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .page-progress-login form .column img.code { width: 200px; height: auto; margin: 0 0 10px 0;}
  .page-progress-login form .column input[type=submit], 
  .page-progress-login form .column input[type=button] { width: 140px; padding: 5px 10px; margin: 30px 0 0 0; color: #fff; font-size: 1.4rem; text-align: center; border: 0; border-radius: 20px; background-color: #00545b; box-sizing: border-box; cursor: pointer;}


  /************ section #page-progress-con ************/

  section#page-progress-con { clear: both; width: 100%; padding: 90px 0 40px 10vw; background-image: url("../images/page_about_sec_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top; box-sizing: border-box;}

  .page-progress-con-title { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: center;}
  .page-progress-con-title .title-name { width: 250px; color: #000; font-size: 4rem; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 700; line-height: 1.2em;}
  .page-progress-con-title .progress-on { width: calc(100% - 250px); height: 60px; padding: 8px 13vw 8px 3vw; background-color: #007E88; display: flex; justify-content: flex-end; align-items: center;}
  .page-progress-con-title .progress-on .last { width: 600px; color: #fff; font-size: 0.9rem; font-weight: 300; line-height: 1.4em;}
  .page-progress-con-title .progress-on select { width: 300px; padding: 10px; color: #000; font-size: 1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box; float: right;}

  .page-progress-con-infor { clear: both; width: 100%; padding: 0 15vw 0 0; margin: 80px 0 0 0; box-sizing: border-box;}
  .page-progress-con-infor .progress-step { clear: both; width: 100%; margin: 0 0 80px 0;}
  .page-progress-con-infor .progress-step .col-photo { width: 45vw; position: relative; float: left;}
  .page-progress-con-infor .progress-step .col-photo img.photo-big { width: 100%; height: auto; margin: 0 0 30px 0; position: relative; z-index: 1;}
  .page-progress-con-infor .progress-step .col-photo img.photo-thumb { width: calc(100% - 1vw); margin: 0 0.5vw; cursor: pointer;}
  .page-progress-con-infor .progress-step .col-infor { width: calc(100% - 45vw); padding: 0 0 0 3.4vw; box-sizing: border-box; float: right;}
  .page-progress-con-infor .progress-step .col-infor .date-bx { width: 6.3vw; padding: 0.5vw 0; color: #007E88; font-size: 1.8vw; line-height: 1.8vw; text-align: center; border: 2px #007E88 solid; box-sizing: border-box;}
  .page-progress-con-infor .progress-step .col-infor .date-bx span.year { font-size: 2vw;}
  .page-progress-con-infor .progress-step .col-infor .name-bx { clear: both; width: 100%; padding: 1.2vw 0; color: #000; font-size: 2.4vw; font-weight: 500;}
  .page-progress-con-infor .progress-step .col-infor .text-bx { clear: both; width: 100%; color: #000; font-size: 1.2vw; font-weight: 300; line-height: 2.8vw;}

  hr.step-line { clear: both; width: 100%; border: 1px #03733a solid; margin: 0 0 90px 0;}


  .progress-goback { clear: both; width: 100%; display: flex; justify-content: flex-end;}
  .progress-goback img.progress-goback { clear: both; width: 8vw; height: auto; margin: 0 0 2vw 0;}


  /************ section #page-mem-login ************/

  section#page-mem-login { clear: both; width: 100%; position: relative;}

  img.page-mem-login-bg { width: 100%; height: auto; position: relative; z-index: 1;}

  .page-mem-login-table { width: 29vw; position: absolute; top: 9.5vw; left: 12vw; z-index: 2;}
  .page-mem-login-table .page-title { width: 100%;}
  .page-mem-login-table .page-title .title-en { width: 100%; text-align: center;}
  .page-mem-login-table .page-title .title-en span { color: #4D4D4D; font-size: 1.1vw; font-family: 300; border-bottom: 3px #4D4D4D solid;}
  .page-mem-login-table .page-title .title-zh { clear: both; width: 7vw; padding: 5px 0; margin: 15px auto 30px auto; color: #fff; font-size: 1.1vw; text-align: center; background-color: #007E88;}
  .page-mem-login-table .page-title .text-intro-mo { display: none;}
  .page-mem-login-table .page-title .text-intro { clear: both; width: 100%; margin: 0 auto; color: #4D4D4D; font-size: 1vw; line-height: 1.6vw; text-align: center;}

  .page-mem-login-table .login-table { clear: both; width: 100%; margin: 2.5vw 0 0 0; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .page-mem-login-table .login-table .icon { width: 2.5vw; margin: 0 0 1.5vw 0;}
  .page-mem-login-table .login-table .icon img { width: 1.5vw; height: auto; margin: 0 auto;}
  .page-mem-login-table .login-table .caption { width: 5.5vw; margin: 0 0 1.5vw 0; font-size: 1.6vw; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 700;}
  .page-mem-login-table .login-table .column { width: calc(100% - 2.5vw - 5.5vw); margin: 0 0 1.5vw 0;}
  .page-mem-login-table .login-table .column input { width: 80%; padding: 1vw; color: #000; font-size: 1.2vw; border: 0; background-color: #fff; box-sizing: border-box;}
  .page-mem-login-table .login-table input[type=button], 
  .page-mem-login-table .login-table input[type=submit] { width: 100%; padding: 1vw 0; margin: 1vw 0 0 0; color: #fff; font-size: 1.4vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #007E88; box-sizing: border-box; cursor: pointer;}
  .page-mem-login-table .login-table input[type=button]:hover, 
  .page-mem-login-table .login-table input[type=submit]:hover { background-color: #00545b;}


  /************ page-mem-works-list ************/

  .page-mem-works-list { clear: both; width: 100%; padding: 120px calc(50% - 650px); background-image: url("../images/page_about_sec_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-mem-works-list .mem-work-box { width: calc(50% - 70px); margin: 0 35px 70px 35px;}
  .page-mem-works-list .mem-work-box a { width: 100%; height: 100%; padding: 10px; text-decoration: none; border: 1px transparent solid; display: block; box-sizing: border-box;}
  .page-mem-works-list .mem-work-box a:hover { border: 1px #333 solid;}
  .page-mem-works-list .mem-work-box a .work-title-info { width: 100%; margin: 0 0 30px 0; display: flex; justify-content: flex-start; align-items: center;}
  .page-mem-works-list .mem-work-box a .work-title-info span.title { padding: 0 10px 0 0; border-right: 2px #007E88 solid; color: #000; font-size: 4rem; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 700; line-height: 1.2em;}
  .page-mem-works-list .mem-work-box a .work-title-info span.info { padding: 0 0 0 10px; color: #4D4D4D; font-size: 1.4rem; line-height: 1.2em;}
  .page-mem-works-list .mem-work-box a .work-pic { width: 100%;}
  .page-mem-works-list .mem-work-box a .work-pic img { width: 100%; height: auto;}


  /************ section #page-contact ************/

  section#page-contact { clear: both; width: 100%; position: relative;}

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

  .page-contact-con { width: 49vw; height: 100%; background-color: rgba(255,255,255,0.3); position: absolute; top: 0; left: calc(50% - 24.5vw); z-index: 2;}
  .page-contact-con .contact-form { width: 100%; padding: 2.5vw 7.8vw 0 12.5vw; box-sizing: border-box;}
  .page-contact-con .contact-form .title-en { width: 100%;}
  .page-contact-con .contact-form .title-en span { color: #fff; font-size: 1.1vw; font-family: 300; border-bottom: 3px #fff solid;}
  .page-contact-con .contact-form .contact-title { width: 5vw; padding: 0.25vw 0; margin: 0.5vw 0 0.75vw 0; color: #fff; font-size: 1vw; text-align: center; background-color: #007E88;}
  .page-contact-con .contact-form .text-mo { display: none;}
  .page-contact-con .contact-form .text { clear: both; width: 100%; color: #1A1A1A; font-size: 0.9vw; line-height: 1.4vw;}
  .page-contact-con .contact-form .form-table { width: 100%; margin: 2.5vw 0 0 0; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .page-contact-con .contact-form .form-table .caption-1 { width: 5.5vw; padding: 0 0 1vw 0; font-size: 1.5vw; font-weight: 500; text-align: right;}
  .page-contact-con .contact-form .form-table .column-1 { width: calc(100% - 5.5vw); padding: 0 0 1vw 0; color: #000; font-size: 1.2vw;}
  .page-contact-con .contact-form .form-table .column-1 input[type=text].style-1 { width: 11vw; padding: 0.5vw; box-sizing: border-box; color: #000; font-size: 1vw; border: 0; background-color: rgba(255,255,255,0.6);}
  .page-contact-con .contact-form .form-table .column-1 input[type=text].style-2 { width: 15vw; padding: 0.5vw; box-sizing: border-box; color: #000; font-size: 1vw; border: 0; background-color: rgba(255,255,255,0.6);}
  .page-contact-con .contact-form .form-table .column-1 input[type=radio] { width: 1vw; height: 1vw; margin: 0 0.3vw 0 0; border: 1px #fff solid; background-color: transparent;}
  .page-contact-con .contact-form .form-table .column-1 textarea { width: 15vw; height: 4vw; padding: 0.5vw; box-sizing: border-box; color: #000; font-size: 1vw; border: 0; background-color: rgba(255,255,255,0.6);}
  .page-contact-con .contact-form .form-table .caption-2 { width: 7vw; padding: 0 0 1vw 0; font-size: 1.5vw; font-weight: 500; text-align: right;}
  .page-contact-con .contact-form .form-table .column-2 { width: calc(100% - 7vw); padding: 0 0 1vw 0; color: #000; font-size: 0.9vw;}
  .page-contact-con .contact-form .form-table .column-2 img.code { width: 7.2vw; height: auto; margin: 0 0.5vw 0 0; float: left;}
  .page-contact-con .contact-form .form-table .column-2 input[type=text] { clear: both; width: 11vw; padding: 0.6vw; box-sizing: border-box; color: #000; font-size: 0.8vw; border: 0; background-color: rgba(255,255,255,0.6);}
  .page-contact-con .contact-form .form-table .column-2 a { color: #000; font-size: 0.8vw;}
  .page-contact-con .contact-form .form-table .full-submit { width: 100%; margin: 1vw 0 0 0; border-top: 1px #007E88 solid;}
  .page-contact-con .contact-form .form-table .full-submit input[type=button] { padding: 0.3vw 1vw; color: #fff; font-size: 1vw; border: 0; background-color: #007E88; cursor: pointer; float: right;}

  .page-contact-con .contact-infor { clear: both; width: 14.5vw; margin: 4.5vw; color: #000; font-size: 1.1vw; line-height: 1.8vw; float: right;}
  .page-contact-con .contact-infor span.title { color: #B21C26; font-size: 1.8vw; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 700;}


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

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

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

  ul.footer-nav { clear: both; width: 100%; padding: 0; margin: 30px 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  ul.footer-nav li { padding: 0; margin: 0 35px;}
  ul.footer-nav li a { color: #000; font-size: 1.2rem; font-weight: 300; text-decoration: none;}
  ul.footer-nav li a:hover { color: #fff;}

  .footer-infor-mo { display: none;}
  .footer-infor { clear: both; width: 100%; margin: 25px 0 0 0; color: #fff; font-size: 1.1rem; font-weight: 300; text-align: center;}


}

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

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

  header { clear: both; width: 100%; height: 170px; display: flex; justify-content: flex-start; align-items: center;}

  .header-logo { width: 200px; padding: 0 0 0 44px; box-sizing: border-box;}
  .header-logo img { width: 156px; height: auto;}

  nav#mo { display: none;}
  nav#pc { width: calc(100% - 200px); height: 170px;}
  nav#pc ul.nav-menu { width: 100%; height: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-end; align-items: center; box-sizing: border-box}
  nav#pc ul.nav-menu li { height: 100%; padding: 0 20px 0 0; margin: 0; position: relative;}
  nav#pc ul.nav-menu li a { width: 90px; height: 100%; color: #000; font-size: 1.1rem; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 600; text-decoration: none; display: flex; justify-content: center; align-items: center; position: relative; cursor: pointer;}
  nav#pc ul.nav-menu li a .line-v { width: 3px; height: 60px; background-color: #B11C26; display: none; position: absolute; top: 0; left: calc(50% - 1.5px);}
  nav#pc ul.nav-menu li a:hover { font-size: 1.4rem;}
  nav#pc ul.nav-menu li a:hover .line-v { display: block;}
  nav#pc ul.nav-menu li a.sel { font-size: 1.4rem;}
  nav#pc ul.nav-menu li a.sel .line-v { display: block;}
  nav#pc ul.nav-menu li ul#nav-popup { padding: 0; margin: 0; list-style: none; display: none; justify-content: center; align-items: center; position: absolute; bottom: 20px; left: 0; z-index: 99999;}
  nav#pc ul.nav-menu li ul#nav-popup li { padding: 0; margin: 5px;}
  nav#pc ul.nav-menu li ul#nav-popup li a { width: 80px; padding: 3px 0; color: #000; font-size: 1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; font-weight: 300; text-align: center; text-decoration: none; border: 1px #A7A7A7 solid; background-color: #fff; display: block;}
  nav#pc ul.nav-menu li ul#nav-popup li a:hover { color: #fff; border: 1px #007E82 solid; background-color: #007E82;}


  /************ hp-banner ************/

  .hp-banner-bx { clear: both; width: 100%; position: relative;}
  .hp-banner-bx .banner-con { width: 100%; background-color: #F2F2F2; display: flex !important; justify-content: flex-start; align-items: center; position: relative; z-index: 1;}
  .hp-banner-bx .banner-con img.banner { width: 68vw; height: auto;}
  .hp-banner-bx .banner-con .text-content { width: calc(100% - 68vw); padding: 0 2.5vw; color: #000; font-size: 0.8vw; font-weight: 300; line-height: 1vw; box-sizing: border-box;}
  .hp-banner-bx .banner-con .text-content span.title-en { color: #4D4D4D; font-size: 1vw; font-weight: 300; border-bottom: 3px #4D4D4D solid;}
  .hp-banner-bx .banner-con .text-content span.title-zh { color: #000; font-size: 1.5vw; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 700; line-height: 3vw;}
  .hp-banner-bx .banner-con .text-content img.more-bt { width: 2vw; height: auto;}
  .hp-banner-bx img.arrow_prev { width: 3.5vw; height: auto; position: absolute; bottom: 5.7vw; left: 64.5vw; z-index: 2; cursor: pointer;}
  .hp-banner-bx img.arrow_next { width: 3.5vw; height: auto; position: absolute; bottom: 5.7vw; left: 68vw; z-index: 2; cursor: pointer;}


  /************ breadcrumbs ************/

  #breadcrumbs-bar { clear: both; width: 100%; padding: 30px calc(50% - 480px) 20px calc(50% - 480px); color: #03733a; font-size: 1rem; line-height: 1.4em; box-sizing: border-box;}
  #breadcrumbs-bar a { color: #007E82; text-decoration: none;}
  #breadcrumbs-bar a:hover { border-bottom: 2px #007E82 solid;}


  /************ section #hp-about ************/

  section#hp-about { clear: both; width: 100%; padding: 70px calc(50% - 480px) 85px calc(50% - 480px); box-sizing: border-box; background-color: #fff; position: relative;}

  .hp-about-con { clear: both; width: 100%; position: relative; z-index: 2;}
  .hp-about-con .title-en { width: 100%; text-align: center;}
  .hp-about-con .title-en span { color: #4D4D4D; font-size: 1.4rem; font-family: 300; border-bottom: 3px #4D4D4D solid;}
  .hp-about-con .title-zh { width: 100%; margin: 60px 0 50px 0; color: #000; font-size: 2.4rem; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 700; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; display: flex; justify-content: center; align-items: center;}
  .hp-about-con .text-con { width: 100%; margin: 0 0 90px 0; color: #4D4D4D; font-size: 1.2rem; line-height: 1.6em; text-align: center;}
  .hp-about-con .more-bt { width: 550px; margin: 0 auto;}
  .hp-about-con .more-bt a { width: 100%; padding: 10px 0; color: #fff; font-size: 1.1rem; font-weight: 300; text-align: center; text-decoration: none; letter-spacing: 0.15em; border-radius: 30px; background-color: #4D4D4D; display: block;}

  img.hp-about-bg { width: 756px; height: auto; position: absolute; top: 120px; left: calc(50% - 378px); z-index: 1;}


  /************ section #hp-articles ************/

  section#hp-articles { clear: both; width: 100%; padding: 0 0 70px 0; background-image: url("../images/hp_articles_bg.jpg"); background-repeat: no-repeat; background-size: auto 600px; background-position: center top;}

  .hp-articles-intro { clear: both; width: 100%; padding: 30px 0 100px 40%; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start;}
  .hp-articles-intro .title-zh { width: 140px; padding: 60px 20px 0 0; color: #000; font-size: 2.4rem; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 700; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; box-sizing: border-box;}
  .hp-articles-intro .text-con { width: calc(100% - 140px);}
  .hp-articles-intro .text-con .title-en { width: 100%;}
  .hp-articles-intro .text-con .title-en span { color: #4D4D4D; font-size: 1.4rem; font-family: 300; border-bottom: 3px #4D4D4D solid;}
  .hp-articles-intro .text-con .intro { width: 100%; margin: 20px 0 0 0; color: #4D4D4D; font-size: 1.2rem; line-height: 2em;}

  .hp-articles-list { clear: both; width: 100%; position: relative;}
  .hp-articles-list img.arrow_prev { width: 3.3vw; height: auto; position: absolute; top: 16.5vw; left: 0; z-index: 2; cursor: pointer;}
  .hp-articles-list img.arrow_next { width: 3.3vw; height: auto; position: absolute; top: 16.5vw; right: 0; z-index: 2; cursor: pointer;}
  .hp-articles-list .articles-slider { width: 80%; margin: 0 auto; position: relative; z-index: 1;}
  .hp-articles-list .articles-slider .article-box { width: 40vw; padding: 0 1vw; box-sizing: border-box;}
  .hp-articles-list .articles-slider .article-box img.article-pic { width: 100%; height: auto;}
  .hp-articles-list .articles-slider .date { width: 100%; padding: 1vw 0 0 0; color: #333; font-size: 1.1vw; font-weight: 300;}
  .hp-articles-list .articles-slider .title { width: 100%; padding: 0.5vw 0; color: #007E87; font-size: 1.6vw; font-weight: 300;}
  .hp-articles-list .articles-slider .intro { width: 100%; padding: 0 0 1vw 0; color: #333; font-size: 1vw; font-weight: 300; line-height: 2vw;}
  .hp-articles-list .articles-slider img.more-bt { clear: both; width: 2vw; height: auto;}

  .articles-more-bt { width: 550px; margin: 45px auto 0 auto;}
  .articles-more-bt a { width: 100%; padding: 10px 0; color: #fff; font-size: 1.1rem; font-weight: 300; text-align: center; text-decoration: none; letter-spacing: 0.15em; border-radius: 30px; background-color: #4D4D4D; display: block;}


  /************ page-banner-bx ************/

  .page-banner-bx { clear: both; width: 100%;}
  .page-banner-bx img { width: 100%; height: auto;}


  /************ section #page-about-part2 ************/

  section#page-about-part2 { clear: both; width: 100%; padding: 80px calc(50% - 480px); background-image: url("../images/page_about_sec_bg.jpg"); background-repeat: no-repeat; background-size: 100% auto; background-position: left top; box-sizing: border-box;}

  .about-p2-sub-title { width: 100%; color: #000; font-size: 2.4rem; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 700;}

  .about-p2-con { clear: both; width: 100%; margin: 0 0 70px 0; display: flex; justify-content: flex-start; align-items: flex-start;}
  .about-p2-con .col-lf { width: 50%; padding: 0 20px 0 0; box-sizing: border-box;}
  .about-p2-con .col-lf .text { width: 100%; padding: 10px 0; color: #333; font-size: 1.2rem; font-weight: 300; line-height: 1.8em;}
  .about-p2-con .col-lf img.pic-1-1 { width: 360px; height: auto; margin: 0 auto;}
  .about-p2-con .col-lf img.pic-1-2 { width: 100%; height: auto;}
  .about-p2-con .col-rt { width: 50%; padding: 20px 0 0 20px; box-sizing: border-box;}
  .about-p2-con .col-rt img.pic-2 { width: 100%; height: auto;}


  /************ section #page-about-part3 ************/

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

  img.page-about-sec3-pic { width: 100%; height: auto;}

  .about-p3-text { clear: both; width: 100%; padding: 60px 60px 80px 60px; box-sizing: border-box;}
  .about-p3-text .title { width: 100%; color: #000; font-size: 2.4rem; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 700; text-align: center;}
  .about-p3-text .text { width: 100%; padding: 20px 0 0 0; color: #333; font-size: 1.2rem; line-height: 1.8em; text-align: center;}


  /************ section #page-news ************/

  section#page-news-top { clear: both; width: 100%; padding: 70px calc(50% - 480px) 40px calc(50% - 480px); box-sizing: border-box; background-color: #fff; position: relative;}

  .page-news-con { clear: both; width: 100%; position: relative; z-index: 2;}
  .page-news-con .title-en { width: 100%; text-align: center;}
  .page-news-con .title-en span { color: #4D4D4D; font-size: 1.4rem; font-family: 300; border-bottom: 3px #4D4D4D solid;}
  .page-news-con .title-zh { width: 100%; margin: 60px 0 50px 0; color: #000; font-size: 2.4rem; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 700; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; display: flex; justify-content: center; align-items: center;}
  .page-news-con .text-con { width: 100%; margin: 0 0 90px 0; color: #4D4D4D; font-size: 1.2rem; line-height: 1.6em; text-align: center;}
  .page-news-con .more-bt { width: 550px; margin: 0 auto;}
  .page-news-con .more-bt a { width: 100%; padding: 10px 0; color: #fff; font-size: 1.1rem; font-weight: 300; text-align: center; text-decoration: none; letter-spacing: 0.15em; border-radius: 30px; background-color: #4D4D4D; display: block;}

  img.page-news-bg { width: 756px; height: auto; position: absolute; top: 120px; left: calc(50% - 378px); z-index: 1;}


  section#page-news { clear: both; width: 100%; padding: 40px calc(50% - 480px) 120px calc(50% - 480px); background-image: url("../images/page_about_sec_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top; box-sizing: border-box;}

  .page-news-top-hot { width: calc(100% - 20px); margin: 0 auto; background-color: #E0E0E0; position: relative;}
  .page-news-top-hot .news-title { width: 100px; padding: 5px 0; color: #fff; font-size: 1.2rem; text-align: center; background-color: #007E88; position: absolute; top: -20px; left: calc(50% - 50px); z-index: 2;}
  .page-news-top-hot a { width: 100%; text-decoration: none; display: flex; justify-content: flex-start; align-items: center;}
  .page-news-top-hot a .news-photo { width: 50%; position: relative; z-index: 1;}
  .page-news-top-hot a .news-photo img { width: 100%; height: auto;}
  .page-news-top-hot a .news-infor { width: 50%; padding: 0 60px; box-sizing: border-box; position: relative; z-index: 1;}
  .page-news-top-hot a .news-infor .date { width: 100%; color: #333; font-size: 1.1rem;}
  .page-news-top-hot a .news-infor .title { width: 100%; padding: 10px 0; color: #007E88; font-size: 1.8rem; font-weight: 300; line-height: 1.4em;}
  .page-news-top-hot a .news-infor .intro { width: 100%; color: #333; font-size: 1.1rem; line-height: 2rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;}

  .page-news-list { clear: both; width: 100%; margin: 40px 0 0 0; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-news-list .news-list-bx { width: calc(100% / 4); margin: 0 0 40px 0;}
  .page-news-list .news-list-bx a { width: 100%; padding: 10px; border: 1px transparent solid; text-decoration: none; box-sizing: border-box; display: block;}
  .page-news-list .news-list-bx a:hover { border: 1px #4D4D4D solid;}
  .page-news-list .news-list-bx a .photo { width: 100%; margin: 0 0 15px 0;}
  .page-news-list .news-list-bx a .photo img { width: 100%; height: auto;}
  .page-news-list .news-list-bx a .intro { width: 100%; padding: 0 10px; box-sizing: border-box;}
  .page-news-list .news-list-bx a .intro .date { width: 100%; color: #333; font-size: 1rem;}
  .page-news-list .news-list-bx a .intro .title { width: 100%; padding: 5px 0 10px 0; color: #007E88; font-size: 1.2rem; font-weight: 500; line-height: 1.4em;}
  .page-news-list .news-list-bx a .intro .text { width: 100%; color: #333; font-size: 1rem; line-height: 1.8rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;}


  .page-news-detail { clear: both; width: 100%;}
  .page-news-detail .news-title { width: 100%; padding: 0 0 20px 0; color: #333; font-size: 2rem; font-weight: 500; line-height: 1.4em;}
  .page-news-detail .news-date { width: 100%; padding: 0 0 40px 0; color: #4D4D4D; font-size: 1.1rem;}
  .page-news-detail .news-content { width: 100%; padding: 0 0 40px 0; color: #000; font-size: 1.2rem; line-height: 1.8em;}
  .page-news-detail .news-content img.photo { clear: both; max-width: 100%; height: auto; margin: 0 0 20px 0;}
  .page-news-detail .news-content a { color: #000; text-decoration: none; border-bottom: 1px #000 dashed;}
  .page-news-detail .news-content a:hover { color: #007E82; border-bottom: 1px #007E82 dashed;}


  /************ section #page-works ************/

  section#page-works { clear: both; width: 100%; padding: 60px 0; background-image: url("../images/page_works_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top; box-sizing: border-box; position: relative;}

  .page-works-con { clear: both; width: 100%; position: relative; z-index: 2;}
  .page-works-con .title-en { width: 100%; text-align: center;}
  .page-works-con .title-en span { color: #4D4D4D; font-size: 1.4rem; font-family: 300; border-bottom: 3px #4D4D4D solid;}
  .page-works-con .title-zh { width: 100%; margin: 60px 0 50px 0; color: #000; font-size: 2.4rem; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 700; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; display: flex; justify-content: center; align-items: center;}
  .page-works-con .text-con { width: 100%; margin: 0 0 90px 0; color: #4D4D4D; font-size: 1.2rem; line-height: 1.6em; text-align: center;}
  .page-works-con .more-bt { width: 550px; margin: 0 auto;}
  .page-works-con .more-bt a { width: 100%; padding: 10px 0; color: #fff; font-size: 1.1rem; font-weight: 300; text-align: center; text-decoration: none; letter-spacing: 0.15em; border-radius: 30px; background-color: #4D4D4D; display: block;}

  img.page-works-bg { width: 756px; height: auto; position: absolute; top: 120px; left: calc(50% - 378px); z-index: 1;}

  .page-works-history { clear: both; width: 100%; margin: 65px 0 0 0;}
  .page-works-history .works-title { width: 100px; padding: 5px 0; margin: 0 auto; color: #fff; font-size: 1.2rem; text-align: center; background-color: #007E88;}
  .page-works-history .works-timeline { width: 100%; padding: 80px 10vw 0 10vw; box-sizing: border-box; background-image: url("../images/page_works_history_line_v.png"); background-repeat: repeat-y; background-position: center top; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
  /*col-lf*/
  .page-works-history .works-timeline .col-lf { width: 35vw; display: block;}
  .page-works-history .works-timeline .col-lf img.dotdot-v { width: 5vw; height: auto; margin: 1.5vw 11.5vw 0 0; float: right;}
  .page-works-history .works-timeline .col-lf .works-box { display: block;}
  .page-works-history .works-timeline .col-lf .works-box.year-1 { width: 35vw;}
  .page-works-history .works-timeline .col-lf .works-box.year-3 { width: 28vw; margin: -14vw 0 0 0; float: right;}
  .page-works-history .works-timeline .col-lf .works-box.year-1 .photo { width: 35vw; height: 35vw; border-radius: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden;}
  .page-works-history .works-timeline .col-lf .works-box.year-3 .photo { width: 28vw; height: 28vw; border-radius: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden;}
  .page-works-history .works-timeline .col-lf .works-box .photo img { width: 100%; height: auto;}
  .page-works-history .works-timeline .col-lf .works-box .year { width: 100%; margin: 1vw 0 0 0; color: #80BDDB; font-size: 5vw; font-weight: 600; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; line-height: 6vw; text-align: center;}
  .page-works-history .works-timeline .col-lf .works-box .title { width: 100%; color: #000; font-size: 4vw; font-weight: 700; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; text-align: center;}
  .page-works-history .works-timeline .col-lf .works-box .infor { width: 100%; color: #000; font-size: 1.8vw; font-weight: 600; text-align: center;}
  .page-works-history .works-timeline .col-lf .works-box .more { width: 100%; margin: 1vw 0 0 0;}
  .page-works-history .works-timeline .col-lf .works-box .more img { width: 3.6vw; height: auto; margin: 0 auto;}
  /*col-rt*/
  .page-works-history .works-timeline .col-rt { width: 35vw; display: block;}
  .page-works-history .works-timeline .col-rt img.dotdot-h { width: 25vw; height: auto; margin: 13.8vw 0 0 3vw;}
  .page-works-history .works-timeline .col-rt .works-box { display: block;}
  .page-works-history .works-timeline .col-rt .works-box.year-2 { width: 32.5vw; margin: -21.5vw 0 0 0;}
  .page-works-history .works-timeline .col-rt .works-box.year-4 { width: 28vw; margin: -13vw 0 0 0;}
  .page-works-history .works-timeline .col-rt .works-box.year-2 .photo { width: 32.5vw; height: 32.5vw; border-radius: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden;}
  .page-works-history .works-timeline .col-rt .works-box.year-4 .photo { width: 28vw; height: 28vw; border-radius: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden;}
  .page-works-history .works-timeline .col-rt .works-box .photo img { width: 100%; height: auto;}
  .page-works-history .works-timeline .col-rt .works-box .year { width: 100%; margin: 1vw 0 0 0; color: #80BDDB; font-size: 5vw; font-weight: 600; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; line-height: 6vw; text-align: center;}
  .page-works-history .works-timeline .col-rt .works-box .title { width: 100%; color: #000; font-size: 4vw; font-weight: 700; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; text-align: center;}
  .page-works-history .works-timeline .col-rt .works-box .infor { width: 100%; color: #000; font-size: 1.8vw; font-weight: 600; text-align: center;}
  .page-works-history .works-timeline .col-rt .works-box .more { width: 100%; margin: 1vw 0 0 0;}
  .page-works-history .works-timeline .col-rt .works-box .more img { width: 3.6vw; height: auto; margin: 0 auto;}
  /*col-md*/
  .page-works-history .works-timeline .col-md-1 { width: 6vw; margin: 16vw 0 0 0; background-image: url("../images/page_works_history_line.png"); background-repeat: repeat-x; background-position: center center;}
  .page-works-history .works-timeline .col-md-2 { width: 6vw; margin: -6vw 0 0 0; background-image: url("../images/page_works_history_line.png"); background-repeat: repeat-x; background-position: center center;}
  .page-works-history .works-timeline .col-md-3 { width: 6vw; margin: -2vw 0 0 0; background-image: url("../images/page_works_history_line.png"); background-repeat: repeat-x; background-position: center center;}
  .page-works-history .works-timeline .col-md-4 { width: 6vw; margin: 0.5vw 0 0 0; background-image: url("../images/page_works_history_line.png"); background-repeat: repeat-x; background-position: center center;}
  .page-works-history .works-timeline .col-md-1 .red-dot, 
  .page-works-history .works-timeline .col-md-2 .red-dot, 
  .page-works-history .works-timeline .col-md-3 .red-dot, 
  .page-works-history .works-timeline .col-md-4 .red-dot { width: 1.8vw; height: 1.8vw; margin: 0 auto; border-radius: 100%; background-color: #AC1C26; display: block;}
  .page-works-history img.timeline-end { width: 100px; height: auto; margin: 0 auto;}


  /************ section #page-works-hot ************/

  section#page-works-hot { clear: both; width: 100%; background-image: url("../images/page_works_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top; box-sizing: border-box; position: relative;}

  .page-works-hot-title { width: 100%; padding: 2vw 0 0 58vw; box-sizing: border-box; position: absolute; top: 0; left: 0; z-index: 3;}
  .page-works-hot-title span { color: #4D4D4D; font-size: 1vw; font-family: 300; border-bottom: 3px #4D4D4D solid;}

  .works-hot-top-text { clear: both; width: 100%; padding: 2vw 1.5vw 1.5vw 1.5vw; color: #fff; font-size: 0.7vw; font-weight: 300; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; line-height: 1vw; box-sizing: border-box; background-color: #E6E6E6; position: relative; z-index: 1;}

  .page-works-hot-list { clear: both; width: 100%; position: relative;}
  .page-works-hot-list img.works-hot-photo { clear: both; width: 68vw; height: auto; margin: 5vw 0 0 0; position: relative; z-index: 2; float: left;}
  .page-works-hot-list .works-hot-infor { width: 45vw; padding: 11.7vw 1vw 2.5vw 17.5vw; margin: -45vw 0 0 0; box-sizing: border-box; background-color: #fff; position: relative; z-index: 1; float: right;}
  .page-works-hot-list .works-hot-infor .works-infor { width: 100%;}
  .page-works-hot-list .works-hot-infor .works-infor .works-title { width: 5.4vw; padding: 0.1vw 0; color: #fff; font-size: 0.9vw; text-align: center; background-color: #007E88;}
  .page-works-hot-list .works-hot-infor .works-infor .year { width: 100%; color: #80BDDB; font-size: 3vw; font-weight: 600; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; line-height: 3vw;}
  .page-works-hot-list .works-hot-infor .works-infor .title { width: 100%; padding: 0.3vw 0; color: #000; font-size: 2.4vw; font-weight: 700; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial;}
  .page-works-hot-list .works-hot-infor .works-infor .infor { width: 100%; color: #333; font-size: 1.1vw; font-weight: 300; line-height: 3vw;}
  .page-works-hot-list img.works-hot-infor-arrow { clear: both; width: 8.5vw; height: auto; margin: -4vw 9vw 0 0; float: right; position: relative; z-index: 3;}
  .page-works-hot-list .works-hot-contact-bar { clear: both; width: 100%; padding: 2.5vw 2vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  .page-works-hot-list .works-hot-contact-bar img.works-hot-illu { width: 20vw; height: auto; margin: 0 2vw 0 0;}
  .page-works-hot-list .works-hot-contact-bar .contact-icon-box { width: 3.2vw; margin: 0 1.8vw;}
  .page-works-hot-list .works-hot-contact-bar .contact-icon-box a { width: 100%; text-align: center; text-decoration: none; display: block;}
  .page-works-hot-list .works-hot-contact-bar .contact-icon-box a img { width: 2.7vw; height: auto; margin: 0 auto 0.3vw auto;}
  .page-works-hot-list .works-hot-contact-bar .contact-icon-box a span { color: #007E82; font-size: 0.8vw; font-weight: 500;}


  /************ section #page-works-hot-con ************/

  section#page-works-hot-con { clear: both; width: 100%; background-image: url("../images/page_works_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top; box-sizing: border-box; position: relative;}

  .works-hot-con-intro { width: 100%;}
  .works-hot-con-intro .photos-big { width: 100%; display: flex; justify-content: center; align-items: flex-start;}
  .works-hot-con-intro .photos-big img { width: 50%; height: auto;}
  .works-hot-con-intro .intro-content { clear: both; width: 100%; padding: 40px calc(50% - 480px); box-sizing: border-box; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
  .works-hot-con-intro .intro-content .text-con-1-mo { display: none;}
  .works-hot-con-intro .intro-content .text-con-1 { width: 100%; margin: 0 0 40px 0; color: #333; font-size: 1.2rem; text-align: center; line-height: 2em;}
  .works-hot-con-intro .intro-content img.intro-photos { clear: both; width: calc(50% - 20px); margin: 10px;}
  .works-hot-con-intro .intro-content .text-con-2 { width: 100%; padding: 0 150px; margin: 40px 0; color: #333; font-size: 1.2rem; text-align: center; line-height: 2em; box-sizing: border-box;}
  .works-hot-con-intro .intro-content .text-con-2 span.title { color: #000; font-size: 1.6rem; font-weight: 600;}
  .works-hot-con-intro .map-contact { clear: both; width: 100%; position: relative;}
  .works-hot-con-intro .map-contact .map { width: 61vw; padding: 0 0 40px 0; background-color: #fff;}
  .works-hot-con-intro .map-contact .map img { width: 100%; height: auto;}
  .works-hot-con-intro .map-contact .contact-icon { width: calc(100% - 61vw); background-color: #fff; position: absolute; bottom: 0; right: 0; z-index: 1;}
  .works-hot-con-intro .map-contact .contact-icon img.illu { width: 20vw; height: auto; margin: 2vw auto 0 auto;}
  .works-hot-con-intro .map-contact .contact-icon .icons-box-full { clear: both; width: 20vw; margin: 3vw auto; display: flex; justify-content: center; align-items: flex-start;}
  .works-hot-con-intro .map-contact .contact-icon .icons-box-full .icon-box { width: 4vw; margin: 0 1.5vw;}
  .works-hot-con-intro .map-contact .contact-icon .icons-box-full .icon-box a { width: 100%; text-decoration: none; display: block;}
  .works-hot-con-intro .map-contact .contact-icon .icons-box-full .icon-box a img { width: 2.8vw; height: auto; margin: 0 auto;}
  .works-hot-con-intro .map-contact .contact-icon .icons-box-full .icon-box a .title { width: 100%; padding: 0.4vw 0 0 0; color: #007E82; font-size: 0.8vw; font-weight: 500; text-align: center;}
  .works-hot-con-intro .map-contact .contact-icon .arrow-top { clear: both; width: 4.3vw; margin: 0 auto;}
  .works-hot-con-intro .map-contact .contact-icon .arrow-top a { width: 100%; display: block;}
  .works-hot-con-intro .map-contact .contact-icon .arrow-top a img { width: 100%; height: auto;}


  /************ section #page-articles ************/

  section#page-articles { clear: both; width: 100%; padding: 0 40px 120px 40px; margin: -90px 0 0 0; background-image: url("../images/page_about_sec_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top; box-sizing: border-box;}

  .page-articles-con { clear: both; width: 100%; padding: 0 0 150px 0; position: relative; z-index: 2;}
  .page-articles-con .title-en { width: 100%; text-align: center;}
  .page-articles-con .title-en span { color: #4D4D4D; font-size: 1.4rem; font-family: 300; border-bottom: 3px #4D4D4D solid;}
  .page-articles-con .title-zh { width: 100%; margin: 60px 0 50px 0; color: #000; font-size: 2.4rem; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 700; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; display: flex; justify-content: center; align-items: center;}
  .page-articles-con .text-con { width: 100%; margin: 0 0 90px 0; color: #4D4D4D; font-size: 1.2rem; line-height: 1.6em; text-align: center;}
  
  img.page-articles-bg { width: 756px; height: auto; position: absolute; top: 120px; left: calc(50% - 378px); z-index: 1;}

  .page-articles-list { clear: both; width: 100%; margin: 0 auto; position: relative;}
  .page-articles-list .article-title { width: 100px; padding: 5px 0; color: #fff; font-size: 1.2rem; text-align: center; background-color: #007E88; position: absolute; top: -20px; left: calc(50% - 50px); z-index: 2;}
  .page-articles-list a { width: 100%; margin: 0 0 40px 0; text-decoration: none; background-color: #E0E0E0; display: flex; justify-content: flex-start; align-items: center;}
  .page-articles-list a .article-photo { width: 50%; position: relative; z-index: 1;}
  .page-articles-list a .article-photo img { width: 100%; height: auto;}
  .page-articles-list a .article-infor { width: 50%; padding: 0 40px; box-sizing: border-box; position: relative; z-index: 1;}
  .page-articles-list a .article-infor .date { width: 100%; color: #333; font-size: 1rem;}
  .page-articles-list a .article-infor .title { width: 100%; padding: 10px 0; color: #007E88; font-size: 1.6rem; font-weight: 300; line-height: 1.4em;}
  .page-articles-list a .article-infor .intro { width: 100%; color: #333; font-size: 1rem; line-height: 1.6rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;}


  ul.page-number-bar { clear: both; width: 100%; padding: 0; margin: 60px 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center;}
  ul.page-number-bar li { padding: 0; margin: 0 5px 10px 5px;}
  ul.page-number-bar li a { padding: 8px; color: #007E87; font-size: 1.1rem; line-height: 1em; text-decoration: none; border: 1px #007E87 solid; background-color: #fff; display: block;}
  ul.page-number-bar li a:hover { background-color: #eee;}
  ul.page-number-bar li a.sel { color: #fff; background-color: #007E87;}


  /************ section #page-articles-con ************/

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

  .page-articles-con-title { clear: both; width: 64.5vw; padding: 2vw 3vw; margin: 0 7.5vw 90px 0; background-color: #DFDFDF; box-sizing: border-box; float: right;}
  .page-articles-con-title .date { width: 100%; color: #333; font-size: 1.1rem;}
  .page-articles-con-title .title { width: 100%; padding: 10px 0 0 0; color: #007E88; font-size: 2rem; font-weight: 300; line-height: 1.4em;}

  .page-articles-con-text { clear: both; width: 100%; padding: 0 7.5vw 80px 7.5vw; box-sizing: border-box; background-image: url("../images/page_about_sec_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top; position: relative;}
  .page-articles-con-text img.articles-pic { width: 100%; height: auto; position: relative; top: -90px; left: 0; z-index: 1;}
  .page-articles-con-text .content { clear: both; width: 80%; margin: -40px auto 50px auto; color: #333; font-size: 1.2rem; line-height: 1.8em;}

  img.goback-bt { width: 36px; height: auto; margin: 0 auto;}


  /************ section #page-progress ************/

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

  .page-progress-title { clear: both; width: 100%; padding: 50px 0;}
  .page-progress-title .title-en { width: 100%; text-align: center;}
  .page-progress-title .title-en span { color: #4D4D4D; font-size: 1.4rem; font-family: 300; border-bottom: 3px #4D4D4D solid;}
  .page-progress-title .title-zh { clear: both; width: 140px; padding: 5px 0; margin: 15px auto 30px auto; color: #fff; font-size: 1.4rem; text-align: center; background-color: #007E88;}
  .page-progress-title .text-intro-mo { display: none;}
  .page-progress-title .text-intro { clear: both; width: 100%; margin: 0 auto; color: #4D4D4D; font-size: 1.2rem; line-height: 1.6em; text-align: center;}

  .page-progress-list { clear: both; width: 100%; padding: 90px 40px; box-sizing: border-box;}
  .page-progress-list:nth-child(even) { background-image: url("../images/page_about_sec_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top;}
  .page-progress-list:nth-child(odd) { background-color: #E0E0E0;}
  .page-progress-list .title-box { width: 100%; padding: 0 7.5vw; margin: 0 0 30px 0; display: flex; justify-content: flex-start; align-items: center; box-sizing: border-box;}
  .page-progress-list .title-box span.title-zh { padding: 0 10px 0 0; border-right: 2px #007E88 solid; color: #000; font-size: 4rem; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 700; line-height: 1.2em;}
  .page-progress-list .title-box span.title-info { padding: 0 0 0 10px; color: #4D4D4D; font-size: 1.4rem; line-height: 1.2em;}
  .page-progress-list .progress-list-slide { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: center;}
  .page-progress-list .progress-list-slide .arrow-prev { width: 7.5vw; padding: 0 4.2vw 0 0; box-sizing: border-box;}
  .page-progress-list .progress-list-slide .arrow-next { width: 7.5vw; padding: 0 0 0 4.2vw; box-sizing: border-box;}
  .page-progress-list .progress-list-slide .arrow-prev img, 
  .page-progress-list .progress-list-slide .arrow-next img { width: 100%; height: auto; cursor: pointer;}
  .page-progress-list .progress-list-slide .progress-list-full { width: calc(100% - 15vw);}
  .page-progress-list .progress-list-slide .progress-list-full .list-box { width: calc(100% / 3);}
  .page-progress-list .progress-list-slide .progress-list-full .list-box .photo { width: 100%;}
  .page-progress-list .progress-list-slide .progress-list-full .list-box .photo a img { width: 100%; height: auto;}
  .page-progress-list .progress-list-slide .progress-list-full .list-box .photo a:hover img { opacity: 0.5;}
  .page-progress-list .progress-list-slide .progress-list-full .list-box .date-title { width: 100%; margin: 10px 0 0 0; display: flex; justify-content: flex-start; align-items: center;}
  .page-progress-list .progress-list-slide .progress-list-full .list-box .date-title .date { width: 6.3vw; padding: 0.5vw 0; color: #007E88; font-size: 1.8vw; line-height: 1.8vw; text-align: center; border: 2px #007E88 solid; box-sizing: border-box;}
  .page-progress-list .progress-list-slide .progress-list-full .list-box .date-title .date span.year { font-size: 2vw;}
  .page-progress-list .progress-list-slide .progress-list-full .list-box .date-title .title { width: calc(100% - 6.3vw); padding: 0 0 0 0.8vw; color: #007E88; font-size: 1.6vw; box-sizing: border-box;}


  /*20250307更新*/
  .page-progress-login { clear: both; width: 100%; padding: 90px 7vw; box-sizing: border-box; background-color: #eee;}
  .page-progress-login form { width: 400px; margin: 0 auto; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .page-progress-login form .caption { width: 130px; padding: 5px 0; font-size: 1.4rem; text-align: left;}
  .page-progress-login form .column { width: calc(100% - 130px); padding: 5px 0;}
  .page-progress-login form .column input[type=text], 
  .page-progress-login form .column input[type=password] { width: 100%; padding: 10px; font-size: 1.4rem; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .page-progress-login form .column img.code { width: 200px; height: auto; margin: 0 0 10px 0;}
  .page-progress-login form .column input[type=submit], 
  .page-progress-login form .column input[type=button] { width: 140px; padding: 5px 10px; margin: 30px 0 0 0; color: #fff; font-size: 1.4rem; text-align: center; border: 0; border-radius: 20px; background-color: #00545b; box-sizing: border-box; cursor: pointer;}


  /************ section #page-progress-con ************/

  section#page-progress-con { clear: both; width: 100%; padding: 90px 0 40px 8vw; background-image: url("../images/page_about_sec_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top; box-sizing: border-box;}

  .page-progress-con-title { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: center;}
  .page-progress-con-title .title-name { width: 250px; color: #000; font-size: 4rem; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 700; line-height: 1.2em;}
  .page-progress-con-title .progress-on { width: calc(100% - 250px); padding: 8px 3vw; background-color: #007E88; display: flex; justify-content: flex-end; align-items: center;}
  .page-progress-con-title .progress-on .last { width: 360px; color: #fff; font-size: 0.9rem; font-weight: 300; line-height: 1.4em;}
  .page-progress-con-title .progress-on select { width: 240px; padding: 10px; color: #000; font-size: 1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}

  .page-progress-con-infor { clear: both; width: 100%; padding: 0 13vw 0 0; margin: 80px 0 0 0; box-sizing: border-box;}
  .page-progress-con-infor .progress-step { clear: both; width: 100%; margin: 0 0 80px 0;}
  .page-progress-con-infor .progress-step .col-photo { width: 45vw; float: left;}
  .page-progress-con-infor .progress-step .col-photo img.photo-big { width: 100%; height: auto; margin: 0 0 30px 0;}
  .page-progress-con-infor .progress-step .col-photo img.photo-thumb { width: calc(100% - 1vw); margin: 0 0.5vw; cursor: pointer;}
  .page-progress-con-infor .progress-step .col-infor { width: calc(100% - 45vw); padding: 0 0 0 3.4vw; box-sizing: border-box; float: right;}
  .page-progress-con-infor .progress-step .col-infor .date-bx { width: 6.3vw; padding: 0.5vw 0; color: #007E88; font-size: 1.8vw; line-height: 1.8vw; text-align: center; border: 2px #007E88 solid; box-sizing: border-box;}
  .page-progress-con-infor .progress-step .col-infor .date-bx span.year { font-size: 2vw;}
  .page-progress-con-infor .progress-step .col-infor .name-bx { clear: both; width: 100%; padding: 1.2vw 0; color: #000; font-size: 2.4vw; font-weight: 500;}
  .page-progress-con-infor .progress-step .col-infor .text-bx { clear: both; width: 100%; color: #000; font-size: 1.2vw; font-weight: 300; line-height: 2.8vw;}

  hr.step-line { clear: both; width: 100%; border: 1px #03733a solid; margin: 0 0 90px 0;}


  .progress-goback { clear: both; width: 100%; display: flex; justify-content: flex-end;}
  .progress-goback img.progress-goback { clear: both; width: 8vw; height: auto; margin: 0 0 2vw 0;}


  /************ section #page-mem-login ************/

  section#page-mem-login { clear: both; width: 100%; position: relative;}

  img.page-mem-login-bg { width: 100%; height: auto; position: relative; z-index: 1;}

  .page-mem-login-table { width: 29vw; position: absolute; top: 9.5vw; left: 8vw; z-index: 2;}
  .page-mem-login-table .page-title { width: 100%;}
  .page-mem-login-table .page-title .title-en { width: 100%; text-align: center;}
  .page-mem-login-table .page-title .title-en span { color: #4D4D4D; font-size: 1.3vw; font-family: 300; border-bottom: 3px #4D4D4D solid;}
  .page-mem-login-table .page-title .title-zh { clear: both; width: 7vw; padding: 5px 0; margin: 15px auto 30px auto; color: #fff; font-size: 1.3vw; text-align: center; background-color: #007E88;}
  .page-mem-login-table .page-title .text-intro { display: none;}
  .page-mem-login-table .page-title .text-intro-mo { clear: both; width: 100%; margin: 0 auto; color: #4D4D4D; font-size: 1.2vw; line-height: 1.6vw; text-align: center;}

  .page-mem-login-table .login-table { clear: both; width: 100%; margin: 2.5vw 0 0 0; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .page-mem-login-table .login-table .icon { width: 2.5vw; margin: 0 0 1.5vw 0;}
  .page-mem-login-table .login-table .icon img { width: 1.5vw; height: auto; margin: 0 auto;}
  .page-mem-login-table .login-table .caption { width: 5.5vw; margin: 0 0 1.5vw 0; font-size: 1.6vw; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 700;}
  .page-mem-login-table .login-table .column { width: calc(100% - 2.5vw - 5.5vw); margin: 0 0 1.5vw 0;}
  .page-mem-login-table .login-table .column input { width: 80%; padding: 1vw; color: #000; font-size: 1.2vw; border: 0; background-color: #fff; box-sizing: border-box;}
  .page-mem-login-table .login-table input[type=button], 
  .page-mem-login-table .login-table input[type=submit] { width: 100%; padding: 1vw 0; margin: 1vw 0 0 0; color: #fff; font-size: 1.4vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #007E88; box-sizing: border-box; cursor: pointer;}
  .page-mem-login-table .login-table input[type=button]:hover, 
  .page-mem-login-table .login-table input[type=submit]:hover { background-color: #00545b;}


  /************ page-mem-works-list ************/

  .page-mem-works-list { clear: both; width: 100%; padding: 120px calc(50% - 480px); background-image: url("../images/page_about_sec_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-mem-works-list .mem-work-box { width: calc(50% - 40px); margin: 0 20px 50px 20px;}
  .page-mem-works-list .mem-work-box a { width: 100%; height: 100%; padding: 10px; text-decoration: none; border: 1px transparent solid; display: block; box-sizing: border-box;}
  .page-mem-works-list .mem-work-box a:hover { border: 1px #333 solid;}
  .page-mem-works-list .mem-work-box a .work-title-info { width: 100%; margin: 0 0 30px 0; display: flex; justify-content: flex-start; align-items: center;}
  .page-mem-works-list .mem-work-box a .work-title-info span.title { padding: 0 10px 0 0; border-right: 2px #007E88 solid; color: #000; font-size: 3rem; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 700; line-height: 1.2em;}
  .page-mem-works-list .mem-work-box a .work-title-info span.info { padding: 0 0 0 10px; color: #4D4D4D; font-size: 1.2rem; line-height: 1.2em;}
  .page-mem-works-list .mem-work-box a .work-pic { width: 100%;}
  .page-mem-works-list .mem-work-box a .work-pic img { width: 100%; height: auto;}


  /************ section #page-contact ************/

  section#page-contact { clear: both; width: 100%; position: relative;}

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

  .page-contact-con { width: 49vw; height: 100%; background-color: rgba(255,255,255,0.3); position: absolute; top: 0; left: calc(50% - 24.5vw); z-index: 2;}
  .page-contact-con .contact-form { width: 100%; padding: 2.5vw 6vw 0 6vw; box-sizing: border-box;}
  .page-contact-con .contact-form .title-en { width: 100%;}
  .page-contact-con .contact-form .title-en span { color: #fff; font-size: 1.6vw; font-family: 300; border-bottom: 3px #fff solid;}
  .page-contact-con .contact-form .contact-title { width: 8vw; padding: 0.25vw 0; margin: 0.5vw 0 0.75vw 0; color: #fff; font-size: 1.5vw; text-align: center; background-color: #007E88;}
  .page-contact-con .contact-form .text-mo { display: none;}
  .page-contact-con .contact-form .text { clear: both; width: 100%; color: #1A1A1A; font-size: 1.1vw; line-height: 1.6vw;}
  .page-contact-con .contact-form .form-table { width: 100%; margin: 2.5vw 0 0 0; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .page-contact-con .contact-form .form-table .caption-1 { width: 6.5vw; padding: 0 0 1.5vw 0; font-size: 1.8vw; font-weight: 500; text-align: right;}
  .page-contact-con .contact-form .form-table .column-1 { width: calc(100% - 6.5vw); padding: 0 0 1.5vw 0; color: #000; font-size: 1.6vw;}
  .page-contact-con .contact-form .form-table .column-1 input[type=text].style-1 { width: 14vw; padding: 1vw; box-sizing: border-box; color: #000; font-size: 1.2vw; border: 0; background-color: rgba(255,255,255,0.6);}
  .page-contact-con .contact-form .form-table .column-1 input[type=text].style-2 { width: 20vw; padding: 1vw; box-sizing: border-box; color: #000; font-size: 1.2vw; border: 0; background-color: rgba(255,255,255,0.6);}
  .page-contact-con .contact-form .form-table .column-1 input[type=radio] { width: 1.6vw; height: 1.6vw; margin: 0 0.3vw 0 0; border: 1px #fff solid; background-color: transparent;}
  .page-contact-con .contact-form .form-table .column-1 textarea { width: 20vw; height: 6vw; padding: 1vw; box-sizing: border-box; color: #000; font-size: 1.2vw; border: 0; background-color: rgba(255,255,255,0.6);}
  .page-contact-con .contact-form .form-table .caption-2 { width: 8.5vw; padding: 0 0 1vw 0; font-size: 1.8vw; font-weight: 500; text-align: right;}
  .page-contact-con .contact-form .form-table .column-2 { width: calc(100% - 8.5vw); padding: 0 0 1vw 0; color: #000;}
  .page-contact-con .contact-form .form-table .column-2 img.code { width: 10vw; height: auto; margin: 0 0.5vw 0 0; float: left;}
  .page-contact-con .contact-form .form-table .column-2 input[type=text] { clear: both; width: 15vw; padding: 0.8vw; box-sizing: border-box; color: #000; font-size: 1.1vw; border: 0; background-color: rgba(255,255,255,0.6);}
  .page-contact-con .contact-form .form-table .column-2 a { color: #000; font-size: 1.1vw;}
  .page-contact-con .contact-form .form-table .full-submit { width: 100%; margin: 2vw 0 0 0; border-top: 1px #007E88 solid;}
  .page-contact-con .contact-form .form-table .full-submit input[type=button] { padding: 0.5vw 1.5vw; color: #fff; font-size: 1.4vw; border: 0; background-color: #007E88; cursor: pointer; float: right;}

  .page-contact-con .contact-infor { clear: both; width: 18vw; margin: 5vw; color: #000; font-size: 1.4vw; line-height: 2vw; float: right;}
  .page-contact-con .contact-infor span.title { color: #B21C26; font-size: 2.4vw; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 700;}


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

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

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

  ul.footer-nav { clear: both; width: 100%; padding: 0; margin: 30px 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  ul.footer-nav li { padding: 0; margin: 0 35px;}
  ul.footer-nav li a { color: #000; font-size: 1.2rem; font-weight: 300; text-decoration: none;}
  ul.footer-nav li a:hover { color: #fff;}

  .footer-infor-mo { display: none;}
  .footer-infor { clear: both; width: 100%; margin: 25px 0 0 0; color: #fff; font-size: 1.1rem; font-weight: 300; text-align: center;}


}

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

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

  header { clear: both; width: 100%; padding: 20px 40px; box-sizing: border-box; display: flex; justify-content: space-around; align-items: center; position: relative; z-index: 9999;}

  .header-logo { width: 100px;}
  .header-logo img { width: 100%; height: auto;}

  nav#pc { display: none;}
  nav#mo { width: calc(100% - 200px);}
  nav#mo .nav-icon { width: 50px; color: #000; font-size: 2.4rem; text-align: right; float: right; cursor: pointer;}
  nav#mo ul.nav-menu { width: 100%; padding: 40px 0; margin: 0; background-color: #007E82; list-style: none; display: none; box-sizing: border-box; position: absolute; top: 98px; left: 0;}
  nav#mo ul.nav-menu li { height: 100%; padding: 0; margin: 0;}
  nav#mo ul.nav-menu li a { width: 100%; padding: 20px 0; color: #000; font-size: 1.4rem; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 600; text-align: center; text-decoration: none; display: block; cursor: pointer;}
  nav#mo ul.nav-menu li ul#nav-popup { width: 100%; padding: 0; margin: 0; list-style: none; background-color: rgba(255,255,255,0.8); display: none;}
  nav#mo ul.nav-menu li ul#nav-popup li { width: 100%; padding: 0; margin: 0;}
  nav#mo ul.nav-menu li ul#nav-popup li a { width: 100%; padding: 15px 0; color: #000; font-size: 1.2rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; font-weight: 300; text-align: center; text-decoration: none; display: block;}
 

  /************ hp-banner ************/

  .hp-banner-bx { clear: both; width: 100%; position: relative;}
  .hp-banner-bx .banner-con { width: 100%; margin: 0 0 4vw 0; background-color: #F2F2F2; display: flex !important; justify-content: flex-start; align-items: center; position: relative; z-index: 1;}
  .hp-banner-bx .banner-con img.banner { width: 74vw; height: auto;}
  .hp-banner-bx .banner-con .text-content { width: calc(100% - 74vw); padding: 0 2vw; color: #000; font-size: 1.3vw; font-weight: 300; line-height: 2vw; box-sizing: border-box;}
  .hp-banner-bx .banner-con .text-content span.title-en { color: #4D4D4D; font-size: 2vw; font-weight: 300; border-bottom: 3px #4D4D4D solid;}
  .hp-banner-bx .banner-con .text-content span.title-zh { color: #000; font-size: 3vw; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 700; line-height: 3vw;}
  .hp-banner-bx .banner-con .text-content img.more-bt { width: 3vw; height: auto;}
  .hp-banner-bx img.arrow_prev { width: 3.5vw; height: auto; position: absolute; bottom: 5.7vw; left: 70.5vw; z-index: 2; cursor: pointer;}
  .hp-banner-bx img.arrow_next { width: 3.5vw; height: auto; position: absolute; bottom: 5.7vw; left: 74vw; z-index: 2; cursor: pointer;}


  /************ breadcrumbs ************/

  #breadcrumbs-bar { clear: both; width: 100%; padding: 30px 40px 20px 40px; color: #03733a; font-size: 1rem; line-height: 1.4em; box-sizing: border-box;}
  #breadcrumbs-bar a { color: #007E82; text-decoration: none;}
  #breadcrumbs-bar a:hover { border-bottom: 2px #007E82 solid;}


  /************ section #hp-about ************/

  section#hp-about { clear: both; width: 100%; padding: 70px 40px 85px 40px; box-sizing: border-box; background-color: #fff; position: relative; overflow: hidden;}

  .hp-about-con { clear: both; width: 100%; position: relative; z-index: 2;}
  .hp-about-con .title-en { width: 100%; text-align: center;}
  .hp-about-con .title-en span { color: #4D4D4D; font-size: 1.4rem; font-family: 300; border-bottom: 3px #4D4D4D solid;}
  .hp-about-con .title-zh { width: 100%; margin: 60px 0 50px 0; color: #000; font-size: 2.4rem; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 700; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; display: flex; justify-content: center; align-items: center;}
  .hp-about-con .text-con { width: 100%; margin: 0 0 90px 0; color: #4D4D4D; font-size: 1.2rem; line-height: 1.6em; text-align: center;}
  .hp-about-con .more-bt { width: 550px; margin: 0 auto;}
  .hp-about-con .more-bt a { width: 100%; padding: 10px 0; color: #fff; font-size: 1.1rem; font-weight: 300; text-align: center; text-decoration: none; letter-spacing: 0.15em; border-radius: 30px; background-color: #4D4D4D; display: block;}

  img.hp-about-bg { width: 756px; height: auto; position: absolute; top: 120px; left: calc(50% - 378px); z-index: 1;}


  /************ section #hp-articles ************/

  section#hp-articles { clear: both; width: 100%; padding: 0 0 70px 0; background-image: url("../images/hp_articles_bg.jpg"); background-repeat: no-repeat; background-size: auto 60vw; background-position: center top;}

  .hp-articles-intro { clear: both; width: 100%; padding: 30px 40px 60px 40px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start;}
  .hp-articles-intro .title-zh { width: 140px; padding: 60px 20px 0 0; color: #000; font-size: 2.4rem; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 700; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; box-sizing: border-box;}
  .hp-articles-intro .text-con { width: calc(100% - 140px);}
  .hp-articles-intro .text-con .title-en { width: 100%;}
  .hp-articles-intro .text-con .title-en span { color: #4D4D4D; font-size: 1.4rem; font-family: 300; border-bottom: 3px #4D4D4D solid;}
  .hp-articles-intro .text-con .intro { width: 100%; margin: 20px 0 0 0; color: #4D4D4D; font-size: 1.2rem; line-height: 2em;}

  .hp-articles-list { clear: both; width: 100%; position: relative;}
  .hp-articles-list img.arrow_prev { width: 5vw; height: auto; position: absolute; top: 20vw; left: 0; z-index: 2; cursor: pointer;}
  .hp-articles-list img.arrow_next { width: 5vw; height: auto; position: absolute; top: 20vw; right: 0; z-index: 2; cursor: pointer;}
  .hp-articles-list .articles-slider { width: 90%; margin: 0 auto; position: relative; z-index: 1;}
  .hp-articles-list .articles-slider .article-box { width: 70vw; padding: 0 1vw; box-sizing: border-box;}
  .hp-articles-list .articles-slider .article-box img.article-pic { width: 100%; height: auto;}
  .hp-articles-list .articles-slider .date { width: 100%; padding: 1vw 0 0 0; color: #333; font-size: 2vw; font-weight: 300;}
  .hp-articles-list .articles-slider .title { width: 100%; padding: 0.5vw 0; color: #007E87; font-size: 3vw; font-weight: 300;}
  .hp-articles-list .articles-slider .intro { width: 100%; padding: 0 0 1vw 0; color: #333; font-size: 1.8vw; font-weight: 300; line-height: 3vw;}
  .hp-articles-list .articles-slider img.more-bt { clear: both; width: 4vw; height: auto;}

  .articles-more-bt { width: 550px; margin: 45px auto 0 auto;}
  .articles-more-bt a { width: 100%; padding: 10px 0; color: #fff; font-size: 1.1rem; font-weight: 300; text-align: center; text-decoration: none; letter-spacing: 0.15em; border-radius: 30px; background-color: #4D4D4D; display: block;}


  /************ page-banner-bx ************/

  .page-banner-bx { clear: both; width: 100%;}
  .page-banner-bx img { width: 100%; height: auto;}


  /************ section #page-about-part2 ************/

  section#page-about-part2 { clear: both; width: 100%; padding: 80px 40px; background-image: url("../images/page_about_sec_bg.jpg"); background-repeat: no-repeat; background-size: 100% auto; background-position: left top; box-sizing: border-box;}

  .about-p2-sub-title { width: 100%; color: #000; font-size: 2.4rem; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 700;}

  .about-p2-con { clear: both; width: 100%; margin: 0 0 70px 0; display: flex; justify-content: flex-start; align-items: flex-start;}
  .about-p2-con .col-lf { width: 50%; padding: 0 20px 0 0; box-sizing: border-box;}
  .about-p2-con .col-lf .text { width: 100%; padding: 10px 0; color: #333; font-size: 1.2rem; font-weight: 300; line-height: 1.8em;}
  .about-p2-con .col-lf img.pic-1-1 { width: 90%; height: auto; margin: 0 auto;}
  .about-p2-con .col-lf img.pic-1-2 { width: 100%; height: auto;}
  .about-p2-con .col-rt { width: 50%; padding: 20px 0 0 20px; box-sizing: border-box;}
  .about-p2-con .col-rt img.pic-2 { width: 100%; height: auto;}


  /************ section #page-about-part3 ************/

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

  img.page-about-sec3-pic { width: 100%; height: auto;}

  .about-p3-text { clear: both; width: 100%; padding: 60px 60px 80px 60px; box-sizing: border-box;}
  .about-p3-text .title { width: 100%; color: #000; font-size: 2.4rem; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 700; text-align: center;}
  .about-p3-text .text { width: 100%; padding: 20px 0 0 0; color: #333; font-size: 1.2rem; line-height: 1.8em; text-align: center;}


  /************ section #page-news ************/

  section#page-news-top { clear: both; width: 100%; padding: 70px 40px 40px 40px; box-sizing: border-box; background-color: #fff; position: relative;}

  .page-news-con { clear: both; width: 100%; position: relative; z-index: 2;}
  .page-news-con .title-en { width: 100%; text-align: center;}
  .page-news-con .title-en span { color: #4D4D4D; font-size: 1.4rem; font-family: 300; border-bottom: 3px #4D4D4D solid;}
  .page-news-con .title-zh { width: 100%; margin: 60px 0 50px 0; color: #000; font-size: 2.4rem; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 700; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; display: flex; justify-content: center; align-items: center;}
  .page-news-con .text-con { width: 100%; margin: 0 0 90px 0; color: #4D4D4D; font-size: 1.2rem; line-height: 1.6em; text-align: center;}
  .page-news-con .more-bt { width: 550px; margin: 0 auto;}
  .page-news-con .more-bt a { width: 100%; padding: 10px 0; color: #fff; font-size: 1.1rem; font-weight: 300; text-align: center; text-decoration: none; letter-spacing: 0.15em; border-radius: 30px; background-color: #4D4D4D; display: block;}

  img.page-news-bg { width: 756px; height: auto; position: absolute; top: 120px; left: calc(50% - 378px); z-index: 1;}


  section#page-news { clear: both; width: 100%; padding: 60px 40px 120px 40px; background-image: url("../images/page_about_sec_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top; box-sizing: border-box;}

  .page-news-top-hot { width: calc(100% - 20px); margin: 0 auto; background-color: #E0E0E0; position: relative;}
  .page-news-top-hot .news-title { width: 100px; padding: 5px 0; color: #fff; font-size: 1.2rem; text-align: center; background-color: #007E88; position: absolute; top: -40px; left: calc(50% - 50px); z-index: 2;}
  .page-news-top-hot a { width: 100%; text-decoration: none; display: flex; justify-content: flex-start; align-items: center;}
  .page-news-top-hot a .news-photo { width: 50%; position: relative; z-index: 1;}
  .page-news-top-hot a .news-photo img { width: 100%; height: auto;}
  .page-news-top-hot a .news-infor { width: 50%; padding: 0 20px; box-sizing: border-box; position: relative; z-index: 1;}
  .page-news-top-hot a .news-infor .date { width: 100%; color: #333; font-size: 1.1rem;}
  .page-news-top-hot a .news-infor .title { width: 100%; padding: 10px 0; color: #007E88; font-size: 1.6rem; font-weight: 300; line-height: 1.4em;}
  .page-news-top-hot a .news-infor .intro { width: 100%; color: #333; font-size: 1.1rem; line-height: 2rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;}

  .page-news-list { clear: both; width: 100%; margin: 40px 0 0 0; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-news-list .news-list-bx { width: calc(100% / 2); margin: 0 0 40px 0;}
  .page-news-list .news-list-bx a { width: 100%; padding: 10px; border: 1px transparent solid; text-decoration: none; box-sizing: border-box; display: block;}
  .page-news-list .news-list-bx a:hover { border: 1px #4D4D4D solid;}
  .page-news-list .news-list-bx a .photo { width: 100%; margin: 0 0 15px 0;}
  .page-news-list .news-list-bx a .photo img { width: 100%; height: auto;}
  .page-news-list .news-list-bx a .intro { width: 100%; padding: 0 10px; box-sizing: border-box;}
  .page-news-list .news-list-bx a .intro .date { width: 100%; color: #333; font-size: 1rem;}
  .page-news-list .news-list-bx a .intro .title { width: 100%; padding: 5px 0 10px 0; color: #007E88; font-size: 1.2rem; font-weight: 500; line-height: 1.4em;}
  .page-news-list .news-list-bx a .intro .text { width: 100%; color: #333; font-size: 1rem; line-height: 1.8rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;}


  .page-news-detail { clear: both; width: 100%;}
  .page-news-detail .news-title { width: 100%; padding: 0 0 20px 0; color: #333; font-size: 2rem; font-weight: 500; line-height: 1.4em;}
  .page-news-detail .news-date { width: 100%; padding: 0 0 40px 0; color: #4D4D4D; font-size: 1.1rem;}
  .page-news-detail .news-content { width: 100%; padding: 0 0 40px 0; color: #000; font-size: 1.2rem; line-height: 1.8em;}
  .page-news-detail .news-content img.photo { clear: both; max-width: 100%; height: auto; margin: 0 0 20px 0;}
  .page-news-detail .news-content a { color: #000; text-decoration: none; border-bottom: 1px #000 dashed;}
  .page-news-detail .news-content a:hover { color: #007E82; border-bottom: 1px #007E82 dashed;}


  /************ section #page-works ************/

  section#page-works { clear: both; width: 100%; padding: 60px 0; background-image: url("../images/page_works_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top; box-sizing: border-box; position: relative;}

  .page-works-con { clear: both; width: 100%; position: relative; z-index: 2;}
  .page-works-con .title-en { width: 100%; text-align: center;}
  .page-works-con .title-en span { color: #4D4D4D; font-size: 1.4rem; font-family: 300; border-bottom: 3px #4D4D4D solid;}
  .page-works-con .title-zh { width: 100%; margin: 60px 0 50px 0; color: #000; font-size: 2.4rem; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 700; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; display: flex; justify-content: center; align-items: center;}
  .page-works-con .text-con { width: 100%; margin: 0 0 90px 0; color: #4D4D4D; font-size: 1.2rem; line-height: 1.6em; text-align: center;}
  .page-works-con .more-bt { width: 550px; margin: 0 auto;}
  .page-works-con .more-bt a { width: 100%; padding: 10px 0; color: #fff; font-size: 1.1rem; font-weight: 300; text-align: center; text-decoration: none; letter-spacing: 0.15em; border-radius: 30px; background-color: #4D4D4D; display: block;}

  img.page-works-bg { width: 756px; height: auto; position: absolute; top: 120px; left: calc(50% - 378px); z-index: 1;}

  .page-works-history { clear: both; width: 100%; margin: 65px 0 0 0;}
  .page-works-history .works-title { width: 100px; padding: 5px 0; margin: 0 auto; color: #fff; font-size: 1.2rem; text-align: center; background-color: #007E88;}
  .page-works-history .works-timeline { width: 100%; padding: 80px 10vw 0 10vw; box-sizing: border-box; background-image: url("../images/page_works_history_line_v.png"); background-repeat: repeat-y; background-position: center top; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
  /*col-lf*/
  .page-works-history .works-timeline .col-lf { width: 35vw; display: block;}
  .page-works-history .works-timeline .col-lf img.dotdot-v { width: 5vw; height: auto; margin: 1.5vw 11.5vw 0 0; float: right;}
  .page-works-history .works-timeline .col-lf .works-box { display: block;}
  .page-works-history .works-timeline .col-lf .works-box.year-1 { width: 35vw;}
  .page-works-history .works-timeline .col-lf .works-box.year-3 { width: 28vw; margin: -14vw 0 0 0; float: right;}
  .page-works-history .works-timeline .col-lf .works-box.year-1 .photo { width: 35vw; height: 35vw; border-radius: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden;}
  .page-works-history .works-timeline .col-lf .works-box.year-3 .photo { width: 28vw; height: 28vw; border-radius: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden;}
  .page-works-history .works-timeline .col-lf .works-box .photo img { width: 100%; height: auto;}
  .page-works-history .works-timeline .col-lf .works-box .year { width: 100%; margin: 1vw 0 0 0; color: #80BDDB; font-size: 5vw; font-weight: 600; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; line-height: 6vw; text-align: center;}
  .page-works-history .works-timeline .col-lf .works-box .title { width: 100%; color: #000; font-size: 4vw; font-weight: 700; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; text-align: center;}
  .page-works-history .works-timeline .col-lf .works-box .infor { width: 100%; color: #000; font-size: 1.8vw; font-weight: 600; text-align: center;}
  .page-works-history .works-timeline .col-lf .works-box .more { width: 100%; margin: 1vw 0 0 0;}
  .page-works-history .works-timeline .col-lf .works-box .more img { width: 3.6vw; height: auto; margin: 0 auto;}
  /*col-rt*/
  .page-works-history .works-timeline .col-rt { width: 35vw; display: block;}
  .page-works-history .works-timeline .col-rt img.dotdot-h { width: 25vw; height: auto; margin: 13.8vw 0 0 3vw;}
  .page-works-history .works-timeline .col-rt .works-box { display: block;}
  .page-works-history .works-timeline .col-rt .works-box.year-2 { width: 32.5vw; margin: -21.5vw 0 0 0;}
  .page-works-history .works-timeline .col-rt .works-box.year-4 { width: 28vw; margin: -13vw 0 0 0;}
  .page-works-history .works-timeline .col-rt .works-box.year-2 .photo { width: 32.5vw; height: 32.5vw; border-radius: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden;}
  .page-works-history .works-timeline .col-rt .works-box.year-4 .photo { width: 28vw; height: 28vw; border-radius: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden;}
  .page-works-history .works-timeline .col-rt .works-box .photo img { width: 100%; height: auto;}
  .page-works-history .works-timeline .col-rt .works-box .year { width: 100%; margin: 1vw 0 0 0; color: #80BDDB; font-size: 5vw; font-weight: 600; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; line-height: 6vw; text-align: center;}
  .page-works-history .works-timeline .col-rt .works-box .title { width: 100%; color: #000; font-size: 4vw; font-weight: 700; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; text-align: center;}
  .page-works-history .works-timeline .col-rt .works-box .infor { width: 100%; color: #000; font-size: 1.8vw; font-weight: 600; text-align: center;}
  .page-works-history .works-timeline .col-rt .works-box .more { width: 100%; margin: 1vw 0 0 0;}
  .page-works-history .works-timeline .col-rt .works-box .more img { width: 3.6vw; height: auto; margin: 0 auto;}
  /*col-md*/
  .page-works-history .works-timeline .col-md-1 { width: 6vw; margin: 16vw 0 0 0; background-image: url("../images/page_works_history_line.png"); background-repeat: repeat-x; background-position: center center;}
  .page-works-history .works-timeline .col-md-2 { width: 6vw; margin: -6vw 0 0 0; background-image: url("../images/page_works_history_line.png"); background-repeat: repeat-x; background-position: center center;}
  .page-works-history .works-timeline .col-md-3 { width: 6vw; margin: -2vw 0 0 0; background-image: url("../images/page_works_history_line.png"); background-repeat: repeat-x; background-position: center center;}
  .page-works-history .works-timeline .col-md-4 { width: 6vw; margin: 0.5vw 0 0 0; background-image: url("../images/page_works_history_line.png"); background-repeat: repeat-x; background-position: center center;}
  .page-works-history .works-timeline .col-md-1 .red-dot, 
  .page-works-history .works-timeline .col-md-2 .red-dot, 
  .page-works-history .works-timeline .col-md-3 .red-dot, 
  .page-works-history .works-timeline .col-md-4 .red-dot { width: 1.8vw; height: 1.8vw; margin: 0 auto; border-radius: 100%; background-color: #AC1C26; display: block;}
  .page-works-history img.timeline-end { width: 10vw; height: auto; margin: 0 auto;}


  /************ section #page-works-hot ************/

  section#page-works-hot { clear: both; width: 100%; background-image: url("../images/page_works_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top; box-sizing: border-box; position: relative;}

  .page-works-hot-title { width: 100%; padding: 2vw 0 0 8vw; box-sizing: border-box; position: absolute; top: 0; left: 0; z-index: 3;}
  .page-works-hot-title span { color: #4D4D4D; font-size: 2.4vw; font-family: 300; border-bottom: 3px #4D4D4D solid;}

  .works-hot-top-text { clear: both; width: 100%; padding: 20px 40px; color: #fff; font-size: 0.7rem; font-weight: 300; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; line-height: 1.2em; box-sizing: border-box; background-color: #E6E6E6; position: relative; z-index: 1;}

  .page-works-hot-list { clear: both; width: 100%; padding: 8vw 0 0 0; position: relative;}
  .page-works-hot-list img.works-hot-photo { clear: both; width: 100%; height: auto; position: relative; z-index: 2;}
  .page-works-hot-list .works-hot-infor { width: 100%; padding: 40px 20vw; box-sizing: border-box; background-color: #fff;}
  .page-works-hot-list .works-hot-infor .page-title { width: 100%; margin: 0 0 20px 0;}
  .page-works-hot-list .works-hot-infor .page-title span { color: #4D4D4D; font-size: 1.4rem; font-family: 300; border-bottom: 3px #4D4D4D solid;}
  .page-works-hot-list .works-hot-infor .works-infor { width: 100%;}
  .page-works-hot-list .works-hot-infor .works-infor .works-title { width: 100px; padding: 5px 0; color: #fff; font-size: 1.2rem; text-align: center; background-color: #007E88;}
  .page-works-hot-list .works-hot-infor .works-infor .year { width: 100%; margin: 0 0 10px 0; color: #80BDDB; font-size: 3.2rem; font-weight: 600; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; line-height: 1em;}
  .page-works-hot-list .works-hot-infor .works-infor .title { width: 100%; color: #000; font-size: 2.6rem; font-weight: 700; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial;}
  .page-works-hot-list .works-hot-infor .works-infor .infor { width: 100%; color: #333; font-size: 1.4rem; font-weight: 300; line-height: 3em;}
  .page-works-hot-list img.works-hot-infor-arrow { clear: both; width: 165px; height: auto; position: absolute; bottom: 300px; right: 10vw; z-index: 3;}
  .page-works-hot-list .works-hot-contact-bar { clear: both; width: 100%; padding: 40px 20px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  .page-works-hot-list .works-hot-contact-bar img.works-hot-illu { width: 300px; height: auto; margin: 0 40px 0 0;}
  .page-works-hot-list .works-hot-contact-bar .contact-icon-box { width: 70px; margin: 0 15px;}
  .page-works-hot-list .works-hot-contact-bar .contact-icon-box a { width: 100%; text-align: center; text-decoration: none; display: block;}
  .page-works-hot-list .works-hot-contact-bar .contact-icon-box a img { width: 56px; height: auto; margin: 0 auto 10px auto;}
  .page-works-hot-list .works-hot-contact-bar .contact-icon-box a span { color: #007E82; font-size: 1rem; font-weight: 500;}


  /************ section #page-works-hot-con ************/

  section#page-works-hot-con { clear: both; width: 100%; background-image: url("../images/page_works_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top; box-sizing: border-box; position: relative;}

  .works-hot-con-intro { width: 100%;}
  .works-hot-con-intro .photos-big { width: 100%; display: flex; justify-content: center; align-items: flex-start;}
  .works-hot-con-intro .photos-big img { width: 50%; height: auto;}
  .works-hot-con-intro .intro-content { clear: both; width: 100%; padding: 40px calc(50% - 480px); box-sizing: border-box; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
  .works-hot-con-intro .intro-content .text-con-1-mo { display: none;}
  .works-hot-con-intro .intro-content .text-con-1 { width: 100%; margin: 0 0 40px 0; color: #333; font-size: 1.2rem; text-align: center; line-height: 2em;}
  .works-hot-con-intro .intro-content img.intro-photos { clear: both; width: calc(45% - 20px); margin: 10px;}
  .works-hot-con-intro .intro-content .text-con-2 { width: 100%; padding: 0 150px; margin: 40px 0; color: #333; font-size: 1.2rem; text-align: center; line-height: 2em; box-sizing: border-box;}
  .works-hot-con-intro .intro-content .text-con-2 span.title { color: #000; font-size: 1.6rem; font-weight: 600;}
  .works-hot-con-intro .map-contact { clear: both; width: 100%;}
  .works-hot-con-intro .map-contact .map { width: 100%; padding: 0 0 40px 0; background-color: #fff;}
  .works-hot-con-intro .map-contact .map img { width: 100%; height: auto;}
  .works-hot-con-intro .map-contact .contact-icon { clear: both; width: 100%; background-color: #fff;}
  .works-hot-con-intro .map-contact .contact-icon img.illu { width: 400px; height: auto; margin: 0 auto;}
  .works-hot-con-intro .map-contact .contact-icon .icons-box-full { clear: both; width: 400px; margin: 60px auto; display: flex; justify-content: center; align-items: flex-start;}
  .works-hot-con-intro .map-contact .contact-icon .icons-box-full .icon-box { width: 80px; margin: 0 30px;}
  .works-hot-con-intro .map-contact .contact-icon .icons-box-full .icon-box a { width: 100%; text-decoration: none; display: block;}
  .works-hot-con-intro .map-contact .contact-icon .icons-box-full .icon-box a img { width: 56px; height: auto; margin: 0 auto;}
  .works-hot-con-intro .map-contact .contact-icon .icons-box-full .icon-box a .title { width: 100%; padding: 10px 0 0 0; color: #007E82; font-size: 1.1rem; font-weight: 500; text-align: center;}
  .works-hot-con-intro .map-contact .contact-icon .arrow-top { clear: both; width: 86px; margin: 0 auto;}
  .works-hot-con-intro .map-contact .contact-icon .arrow-top a { width: 100%; display: block;}
  .works-hot-con-intro .map-contact .contact-icon .arrow-top a img { width: 100%; height: auto;}


  /************ section #page-works-hot-con ************/

  section#page-works-hot-con { clear: both; width: 100%; background-image: url("../images/page_works_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top; box-sizing: border-box; position: relative;}

  .works-hot-con-intro { width: 100%;}
  .works-hot-con-intro .photos-big { width: 100%; display: flex; justify-content: center; align-items: flex-start;}
  .works-hot-con-intro .photos-big img { width: 50%; height: auto;}
  .works-hot-con-intro .intro-content { clear: both; width: 100%; padding: 40px calc(50% - 480px); box-sizing: border-box; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
  .works-hot-con-intro .intro-content .text-con-1-mo { display: none;}
  .works-hot-con-intro .intro-content .text-con-1 { width: 100%; margin: 0 0 40px 0; color: #333; font-size: 1.2rem; text-align: center; line-height: 2em;}
  .works-hot-con-intro .intro-content img.intro-photos { clear: both; width: calc(50% - 20px); margin: 10px;}
  .works-hot-con-intro .intro-content .text-con-2 { width: 100%; padding: 0 150px; margin: 40px 0; color: #333; font-size: 1.2rem; text-align: center; line-height: 2em; box-sizing: border-box;}
  .works-hot-con-intro .intro-content .text-con-2 span.title { color: #000; font-size: 1.6rem; font-weight: 600;}
  .works-hot-con-intro .map-contact { clear: both; width: 100%; position: relative;}
  .works-hot-con-intro .map-contact .map { width: 61vw; padding: 0 0 40px 0; background-color: #fff;}
  .works-hot-con-intro .map-contact .map img { width: 100%; height: auto;}
  .works-hot-con-intro .map-contact .contact-icon { width: calc(100% - 61vw); background-color: #fff; position: absolute; bottom: 0; right: 0; z-index: 1;}
  .works-hot-con-intro .map-contact .contact-icon img.illu { width: 20vw; height: auto; margin: 2vw auto 0 auto;}
  .works-hot-con-intro .map-contact .contact-icon .icons-box-full { clear: both; width: 20vw; margin: 3vw auto; display: flex; justify-content: center; align-items: flex-start;}
  .works-hot-con-intro .map-contact .contact-icon .icons-box-full .icon-box { width: 4vw; margin: 0 1.5vw;}
  .works-hot-con-intro .map-contact .contact-icon .icons-box-full .icon-box a { width: 100%; text-decoration: none; display: block;}
  .works-hot-con-intro .map-contact .contact-icon .icons-box-full .icon-box a img { width: 2.8vw; height: auto; margin: 0 auto;}
  .works-hot-con-intro .map-contact .contact-icon .icons-box-full .icon-box a .title { width: 100%; padding: 0.4vw 0 0 0; color: #007E82; font-size: 0.8vw; font-weight: 500; text-align: center;}
  .works-hot-con-intro .map-contact .contact-icon .arrow-top { clear: both; width: 4.3vw; margin: 0 auto;}
  .works-hot-con-intro .map-contact .contact-icon .arrow-top a { width: 100%; display: block;}
  .works-hot-con-intro .map-contact .contact-icon .arrow-top a img { width: 100%; height: auto;}


  /************ section #page-articles ************/

  section#page-articles { clear: both; width: 100%; padding: 0 40px 120px 40px; margin: -90px 0 0 0; background-image: url("../images/page_about_sec_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top; box-sizing: border-box;}

  .page-articles-con { clear: both; width: 100%; padding: 0 0 150px 0; position: relative; z-index: 2;}
  .page-articles-con .title-en { width: 100%; text-align: center;}
  .page-articles-con .title-en span { color: #4D4D4D; font-size: 1.4rem; font-family: 300; border-bottom: 3px #4D4D4D solid;}
  .page-articles-con .title-zh { width: 100%; margin: 60px 0 50px 0; color: #000; font-size: 2.4rem; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 700; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; display: flex; justify-content: center; align-items: center;}
  .page-articles-con .text-con { width: 100%; margin: 0 0 90px 0; color: #4D4D4D; font-size: 1.2rem; line-height: 1.6em; text-align: center;}
  
  img.page-articles-bg { width: 756px; height: auto; position: absolute; top: 120px; left: calc(50% - 378px); z-index: 1;}

  .page-articles-list { clear: both; width: 100%; margin: 0 auto; position: relative;}
  .page-articles-list .article-title { width: 100px; padding: 5px 0; color: #fff; font-size: 1.2rem; text-align: center; background-color: #007E88; position: absolute; top: -20px; left: calc(50% - 50px); z-index: 2;}
  .page-articles-list a { width: 100%; margin: 0 0 40px 0; text-decoration: none; display: block;}
  .page-articles-list a .article-photo { width: 100%; position: relative; z-index: 1;}
  .page-articles-list a .article-photo img { width: 100%; height: auto;}
  .page-articles-list a .article-infor { width: 100%; padding: 40px; box-sizing: border-box; background-color: #E0E0E0; position: relative; z-index: 1;}
  .page-articles-list a .article-infor .date { width: 100%; color: #333; font-size: 1rem;}
  .page-articles-list a .article-infor .title { width: 100%; padding: 10px 0; color: #007E88; font-size: 1.6rem; font-weight: 300; line-height: 1.4em;}
  .page-articles-list a .article-infor .intro { width: 100%; color: #333; font-size: 1rem; line-height: 1.6rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;}


  ul.page-number-bar { clear: both; width: 100%; padding: 0; margin: 60px 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center;}
  ul.page-number-bar li { padding: 0; margin: 0 5px 10px 5px;}
  ul.page-number-bar li a { padding: 8px; color: #007E87; font-size: 1.1rem; line-height: 1em; text-decoration: none; border: 1px #007E87 solid; background-color: #fff; display: block;}
  ul.page-number-bar li a:hover { background-color: #eee;}
  ul.page-number-bar li a.sel { color: #fff; background-color: #007E87;}


  /************ section #page-articles-con ************/

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

  .page-articles-con-title { clear: both; width: 64.5vw; padding: 2vw 3vw; margin: 0 40px 90px 0; background-color: #DFDFDF; box-sizing: border-box; float: right;}
  .page-articles-con-title .date { width: 100%; color: #333; font-size: 1rem;}
  .page-articles-con-title .title { width: 100%; padding: 10px 0 0 0; color: #007E88; font-size: 1.6rem; font-weight: 300; line-height: 1.4em;}

  .page-articles-con-text { clear: both; width: 100%; padding: 0 40px 80px 40px; box-sizing: border-box; background-image: url("../images/page_about_sec_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top; position: relative;}
  .page-articles-con-text img.articles-pic { width: 100%; height: auto; position: relative; top: -90px; left: 0; z-index: 1;}
  .page-articles-con-text .content { clear: both; width: 100%; margin: -40px 0 50px 0; color: #333; font-size: 1.1rem; line-height: 1.8em;}

  img.goback-bt { width: 36px; height: auto; margin: 0 auto;}


  /************ section #page-progress ************/

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

  .page-progress-title { clear: both; width: 100%; padding: 50px 0;}
  .page-progress-title .title-en { width: 100%; text-align: center;}
  .page-progress-title .title-en span { color: #4D4D4D; font-size: 1.4rem; font-family: 300; border-bottom: 3px #4D4D4D solid;}
  .page-progress-title .title-zh { clear: both; width: 140px; padding: 5px 0; margin: 15px auto 30px auto; color: #fff; font-size: 1.4rem; text-align: center; background-color: #007E88;}
  .page-progress-title .text-intro-mo { display: none;}
  .page-progress-title .text-intro { clear: both; width: 100%; margin: 0 auto; color: #4D4D4D; font-size: 1.2rem; line-height: 1.6em; text-align: center;}

  .page-progress-list { clear: both; width: 100%; padding: 90px 40px; box-sizing: border-box;}
  .page-progress-list:nth-child(even) { background-image: url("../images/page_about_sec_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top;}
  .page-progress-list:nth-child(odd) { background-color: #E0E0E0;}
  .page-progress-list .title-box { width: 100%; padding: 0 7.5vw; margin: 0 0 30px 0; display: flex; justify-content: flex-start; align-items: center; box-sizing: border-box;}
  .page-progress-list .title-box span.title-zh { padding: 0 10px 0 0; border-right: 2px #007E88 solid; color: #000; font-size: 4rem; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 700; line-height: 1.2em;}
  .page-progress-list .title-box span.title-info { padding: 0 0 0 10px; color: #4D4D4D; font-size: 1.4rem; line-height: 1.2em;}
  .page-progress-list .progress-list-slide { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: center;}
  .page-progress-list .progress-list-slide .arrow-prev { width: 7.5vw; padding: 0 2.4vw 0 0; box-sizing: border-box;}
  .page-progress-list .progress-list-slide .arrow-next { width: 7.5vw; padding: 0 0 0 2.4vw; box-sizing: border-box;}
  .page-progress-list .progress-list-slide .arrow-prev img, 
  .page-progress-list .progress-list-slide .arrow-next img { width: 100%; height: auto; cursor: pointer;}
  .page-progress-list .progress-list-slide .progress-list-full { width: calc(100% - 15vw);}
  .page-progress-list .progress-list-slide .progress-list-full .list-box { width: calc(100% / 2);}
  .page-progress-list .progress-list-slide .progress-list-full .list-box .photo { width: 100%;}
  .page-progress-list .progress-list-slide .progress-list-full .list-box .photo a img { width: 100%; height: auto;}
  .page-progress-list .progress-list-slide .progress-list-full .list-box .photo a:hover img { opacity: 0.5;}
  .page-progress-list .progress-list-slide .progress-list-full .list-box .date-title { width: 100%; margin: 10px 0 0 0; display: flex; justify-content: flex-start; align-items: center;}
  .page-progress-list .progress-list-slide .progress-list-full .list-box .date-title .date { width: 8vw; padding: 0.5vw 0; color: #007E88; font-size: 2.2vw; line-height: 2.2vw; text-align: center; border: 2px #007E88 solid; box-sizing: border-box;}
  .page-progress-list .progress-list-slide .progress-list-full .list-box .date-title .date span.year { font-size: 2.6vw;}
  .page-progress-list .progress-list-slide .progress-list-full .list-box .date-title .title { width: calc(100% - 6.3vw); padding: 0 0 0 0.8vw; color: #007E88; font-size: 2vw; box-sizing: border-box;}


  /*20250307更新*/
  .page-progress-login { clear: both; width: 100%; padding: 90px 40px; box-sizing: border-box; background-color: #eee;}
  .page-progress-login form { width: 400px; margin: 0 auto; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .page-progress-login form .caption { width: 130px; padding: 5px 0; font-size: 1.4rem; text-align: left;}
  .page-progress-login form .column { width: calc(100% - 130px); padding: 5px 0;}
  .page-progress-login form .column input[type=text], 
  .page-progress-login form .column input[type=password] { width: 100%; padding: 10px; font-size: 1.4rem; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .page-progress-login form .column img.code { width: 200px; height: auto; margin: 0 0 10px 0;}
  .page-progress-login form .column input[type=submit], 
  .page-progress-login form .column input[type=button] { width: 140px; padding: 5px 10px; margin: 30px 0 0 0; color: #fff; font-size: 1.4rem; text-align: center; border: 0; border-radius: 20px; background-color: #00545b; box-sizing: border-box; cursor: pointer;}


  /************ section #page-progress-con ************/

  section#page-progress-con { clear: both; width: 100%; padding: 90px 0 40px 40px; background-image: url("../images/page_about_sec_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top; box-sizing: border-box;}

  .page-progress-con-title { clear: both; width: 100%;}
  .page-progress-con-title .title-name { width: 100%; color: #000; font-size: 4rem; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 700; line-height: 1.2em;}
  .page-progress-con-title .progress-on { clear: both; width: 100%; padding: 8px 3vw; background-color: #007E88; display: flex; justify-content: flex-end; align-items: center; box-sizing: border-box;}
  .page-progress-con-title .progress-on .last { width: 360px; color: #fff; font-size: 0.9rem; font-weight: 300; line-height: 1.4em;}
  .page-progress-con-title .progress-on select { width: 300px; padding: 10px; color: #000; font-size: 1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}

  .page-progress-con-infor { clear: both; width: 100%; padding: 0 40px 0 0; margin: 80px 0 0 0; box-sizing: border-box;}
  .page-progress-con-infor .progress-step { clear: both; width: 100%; margin: 0 0 80px 0;}
  .page-progress-con-infor .progress-step .col-photo { width: 45vw; float: left;}
  .page-progress-con-infor .progress-step .col-photo img.photo-big { width: 100%; height: auto; margin: 0 0 30px 0;}
  .page-progress-con-infor .progress-step .col-photo img.photo-thumb { width: calc(100% - 1vw); margin: 0 0.5vw; cursor: pointer;}
  .page-progress-con-infor .progress-step .col-infor { width: calc(100% - 45vw); padding: 0 0 0 3.4vw; box-sizing: border-box; float: right;}
  .page-progress-con-infor .progress-step .col-infor .date-bx { width: 8vw; padding: 0.5vw 0; color: #007E88; font-size: 2.2vw; line-height: 2.2vw; text-align: center; border: 2px #007E88 solid; box-sizing: border-box;}
  .page-progress-con-infor .progress-step .col-infor .date-bx span.year { font-size: 2.6vw;}
  .page-progress-con-infor .progress-step .col-infor .name-bx { clear: both; width: 100%; padding: 1.2vw 0; color: #000; font-size: 4vw; font-weight: 500;}
  .page-progress-con-infor .progress-step .col-infor .text-bx { clear: both; width: 100%; color: #000; font-size: 2.4vw; font-weight: 300; line-height: 5vw;}

  hr.step-line { clear: both; width: 100%; border: 1px #03733a solid; margin: 0 0 90px 0;}


  .progress-goback { clear: both; width: 100%; display: flex; justify-content: flex-end;}
  .progress-goback img.progress-goback { clear: both; width: 14vw; height: auto; margin: 0 0 2vw 0;}


  /************ section #page-mem-login ************/

  section#page-mem-login { clear: both; width: 100%; position: relative; overflow: hidden;}

  img.page-mem-login-bg { width: 140%; height: auto; margin: 0 0 0 -15%; position: relative; z-index: 1;}

  .page-mem-login-table { width: 40vw; position: absolute; top: 9.5vw; left: 8vw; z-index: 2;}
  .page-mem-login-table .page-title { width: 100%;}
  .page-mem-login-table .page-title .title-en { width: 100%; text-align: center;}
  .page-mem-login-table .page-title .title-en span { color: #4D4D4D; font-size: 3vw; font-family: 300; border-bottom: 3px #4D4D4D solid;}
  .page-mem-login-table .page-title .title-zh { clear: both; width: 16vw; padding: 5px 0; margin: 15px auto 30px auto; color: #fff; font-size: 3vw; text-align: center; background-color: #007E88;}
  .page-mem-login-table .page-title .text-intro { display: none;}
  .page-mem-login-table .page-title .text-intro-mo { clear: both; width: 100%; margin: 0 auto; color: #4D4D4D; font-size: 2vw; line-height: 2.6vw; text-align: center;}

  .page-mem-login-table .login-table { clear: both; width: 100%; margin: 4vw 0 0 0; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .page-mem-login-table .login-table .icon { width: 4vw; margin: 0 0 1.5vw 0;}
  .page-mem-login-table .login-table .icon img { width: 2vw; height: auto; margin: 0 auto;}
  .page-mem-login-table .login-table .caption { width: 8vw; margin: 0 0 1.5vw 0; font-size: 2.4vw; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 700;}
  .page-mem-login-table .login-table .column { width: calc(100% - 4vw - 8vw); margin: 0 0 1.5vw 0;}
  .page-mem-login-table .login-table .column input { width: 90%; padding: 1.5vw; color: #000; font-size: 2vw; border: 0; background-color: #fff; box-sizing: border-box;}
  .page-mem-login-table .login-table input[type=button], 
  .page-mem-login-table .login-table input[type=submit] { width: 100%; padding: 1.5vw 0; margin: 1.5vw 0 0 0; color: #fff; font-size: 2.4vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #007E88; box-sizing: border-box; cursor: pointer;}
  .page-mem-login-table .login-table input[type=button]:hover, 
  .page-mem-login-table .login-table input[type=submit]:hover { background-color: #00545b;}


  /************ page-mem-works-list ************/

  .page-mem-works-list { clear: both; width: 100%; padding: 120px 80px; background-image: url("../images/page_about_sec_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-mem-works-list .mem-work-box { width: 100%; margin: 0 0 40px 0;}
  .page-mem-works-list .mem-work-box a { width: 100%; height: 100%; padding: 10px; text-decoration: none; border: 1px transparent solid; display: block; box-sizing: border-box;}
  .page-mem-works-list .mem-work-box a:hover { border: 1px #333 solid;}
  .page-mem-works-list .mem-work-box a .work-title-info { width: 100%; margin: 0 0 30px 0; display: flex; justify-content: flex-start; align-items: center;}
  .page-mem-works-list .mem-work-box a .work-title-info span.title { padding: 0 10px 0 0; border-right: 2px #007E88 solid; color: #000; font-size: 4rem; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 700; line-height: 1.2em;}
  .page-mem-works-list .mem-work-box a .work-title-info span.info { padding: 0 0 0 10px; color: #4D4D4D; font-size: 1.4rem; line-height: 1.2em;}
  .page-mem-works-list .mem-work-box a .work-pic { width: 100%;}
  .page-mem-works-list .mem-work-box a .work-pic img { width: 100%; height: auto;}


  /************ section #page-contact ************/

  section#page-contact { clear: both; width: 100%; position: relative; overflow: hidden;}

  img.page-contact-bg { width: 140%; height: auto; margin: 0 0 0 -20%; position: relative; z-index: 1;}

  .page-contact-con { width: 60vw; height: 100%; background-color: rgba(255,255,255,0.3); position: absolute; top: 0; left: calc(50% - 30vw); z-index: 2;}
  .page-contact-con .contact-form { width: 100%; padding: 2.5vw 3vw 0 3vw; box-sizing: border-box;}
  .page-contact-con .contact-form .title-en { width: 100%;}
  .page-contact-con .contact-form .title-en span { color: #fff; font-size: 2.4vw; font-family: 300; border-bottom: 3px #fff solid;}
  .page-contact-con .contact-form .contact-title { width: 12vw; padding: 0.5vw 0; margin: 1vw 0 1.2vw 0; color: #fff; font-size: 2.2vw; text-align: center; background-color: #007E88;}
  .page-contact-con .contact-form .text-mo { display: none;}
  .page-contact-con .contact-form .text { clear: both; width: 100%; color: #1A1A1A; font-size: 1.6vw; line-height: 2.2vw;}
  .page-contact-con .contact-form .form-table { width: 100%; margin: 4vw 0 0 0; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .page-contact-con .contact-form .form-table .caption-1 { width: 8vw; padding: 0 0 2vw 0; font-size: 2.2vw; font-weight: 500; text-align: right;}
  .page-contact-con .contact-form .form-table .column-1 { width: calc(100% - 8vw); padding: 0 0 2vw 0; color: #000; font-size: 2vw;}
  .page-contact-con .contact-form .form-table .column-1 input[type=text].style-1 { width: 18vw; padding: 1vw; box-sizing: border-box; color: #000; font-size: 1.8vw; border: 0; background-color: rgba(255,255,255,0.6);}
  .page-contact-con .contact-form .form-table .column-1 input[type=text].style-2 { width: 28vw; padding: 1vw; box-sizing: border-box; color: #000; font-size: 1.8vw; border: 0; background-color: rgba(255,255,255,0.6);}
  .page-contact-con .contact-form .form-table .column-1 input[type=radio] { width: 2vw; height: 2vw; margin: 0 0.3vw 0 0; border: 1px #fff solid; background-color: transparent;}
  .page-contact-con .contact-form .form-table .column-1 textarea { width: 28vw; height: 8vw; padding: 1vw; box-sizing: border-box; color: #000; font-size: 1.8vw; border: 0; background-color: rgba(255,255,255,0.6);}
  .page-contact-con .contact-form .form-table .caption-2 { width: 10vw; padding: 0 0 2vw 0; font-size: 2.2vw; font-weight: 500; text-align: right;}
  .page-contact-con .contact-form .form-table .column-2 { width: calc(100% - 10vw); padding: 0 0 1vw 0; color: #000;}
  .page-contact-con .contact-form .form-table .column-2 img.code { width: 14vw; height: auto; margin: 0 0.5vw 0 0; float: left;}
  .page-contact-con .contact-form .form-table .column-2 input[type=text] { clear: both; width: 24vw; padding: 1vw; box-sizing: border-box; color: #000; font-size: 1.8vw; border: 0; background-color: rgba(255,255,255,0.6);}
  .page-contact-con .contact-form .form-table .column-2 a { color: #000; font-size: 1.4vw;}
  .page-contact-con .contact-form .form-table .full-submit { width: 100%; margin: 4vw 0 0 0; border-top: 1px #007E88 solid;}
  .page-contact-con .contact-form .form-table .full-submit input[type=button] { padding: 0.5vw 1.5vw; color: #fff; font-size: 2vw; border: 0; background-color: #007E88; cursor: pointer; float: right;}

  .page-contact-con .contact-infor { clear: both; width: 24vw; margin: 8vw 5vw 5vw 5vw; color: #000; font-size: 1.8vw; line-height: 2.4vw; float: right;}
  .page-contact-con .contact-infor span.title { color: #B21C26; font-size: 3vw; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 700;}


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

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

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

  ul.footer-nav { clear: both; width: 100%; padding: 0; margin: 30px 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  ul.footer-nav li { padding: 0; margin: 0 20px 10px 20px;}
  ul.footer-nav li a { color: #000; font-size: 1.2rem; font-weight: 300; text-decoration: none;}
  ul.footer-nav li a:hover { color: #fff;}

  .footer-infor { display: none;}
  .footer-infor-mo { clear: both; width: 100%; margin: 25px 0 0 0; color: #fff; font-size: 1.1rem; font-weight: 300; line-height: 1.8em; text-align: center;}


}

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

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

  header { clear: both; width: 100%; padding: 20px 0; box-sizing: border-box; display: flex; justify-content: space-around; align-items: center; position: relative; z-index: 9999;}

  .header-logo { width: 100px;}
  .header-logo img { width: 100%; height: auto;}

  nav#pc { display: none;}
  nav#mo { width: calc(100% - 200px);}
  nav#mo .nav-icon { width: 50px; color: #000; font-size: 2.4rem; text-align: right; float: right; cursor: pointer;}
  nav#mo ul.nav-menu { width: 100%; padding: 40px 0; margin: 0; background-color: #007E82; list-style: none; display: none; box-sizing: border-box; position: absolute; top: 98px; left: 0;}
  nav#mo ul.nav-menu li { height: 100%; padding: 0; margin: 0;}
  nav#mo ul.nav-menu li a { width: 100%; padding: 20px 0; color: #000; font-size: 1.4rem; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 600; text-align: center; text-decoration: none; display: block; cursor: pointer;}
  nav#mo ul.nav-menu li ul#nav-popup { width: 100%; padding: 0; margin: 0; list-style: none; background-color: rgba(255,255,255,0.8); display: none;}
  nav#mo ul.nav-menu li ul#nav-popup li { width: 100%; padding: 0; margin: 0;}
  nav#mo ul.nav-menu li ul#nav-popup li a { width: 100%; padding: 15px 0; color: #000; font-size: 1.2rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; font-weight: 300; text-align: center; text-decoration: none; display: block;}
 

  /************ hp-banner ************/

  .hp-banner-bx { clear: both; width: 100%; position: relative;}
  .hp-banner-bx .banner-con { width: 100%; margin: 0 0 4vw 0; background-color: #F2F2F2; display: flex !important; justify-content: flex-start; align-items: center; position: relative; z-index: 1;}
  .hp-banner-bx .banner-con img.banner { width: 74vw; height: auto;}
  .hp-banner-bx .banner-con .text-content { width: calc(100% - 74vw); padding: 0 2vw; color: #000; font-size: 1.3vw; font-weight: 300; line-height: 2vw; box-sizing: border-box;}
  .hp-banner-bx .banner-con .text-content span.title-en { color: #4D4D4D; font-size: 2vw; font-weight: 300; border-bottom: 3px #4D4D4D solid;}
  .hp-banner-bx .banner-con .text-content span.title-zh { color: #000; font-size: 3vw; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 700; line-height: 3vw;}
  .hp-banner-bx .banner-con .text-content img.more-bt { width: 3vw; height: auto;}
  .hp-banner-bx img.arrow_prev { width: 3.5vw; height: auto; position: absolute; bottom: 5.7vw; left: 70.5vw; z-index: 2; cursor: pointer;}
  .hp-banner-bx img.arrow_next { width: 3.5vw; height: auto; position: absolute; bottom: 5.7vw; left: 74vw; z-index: 2; cursor: pointer;}


  /************ breadcrumbs ************/

  #breadcrumbs-bar { clear: both; width: 100%; padding: 30px 20px 20px 20px; color: #03733a; font-size: 1rem; line-height: 1.4em; box-sizing: border-box;}
  #breadcrumbs-bar a { color: #007E82; text-decoration: none;}
  #breadcrumbs-bar a:active { border-bottom: 2px #007E82 solid;}

  /************ section #hp-about ************/

  section#hp-about { clear: both; width: 100%; padding: 70px 40px 85px 40px; box-sizing: border-box; background-color: #fff; position: relative;}

  .hp-about-con { clear: both; width: 100%; position: relative; z-index: 2;}
  .hp-about-con .title-en { width: 100%; text-align: center;}
  .hp-about-con .title-en span { color: #4D4D4D; font-size: 1.4rem; font-family: 300; border-bottom: 3px #4D4D4D solid;}
  .hp-about-con .title-zh { width: 100%; margin: 60px 0 50px 0; color: #000; font-size: 2.4rem; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 700; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; display: flex; justify-content: center; align-items: center;}
  .hp-about-con .text-con { width: 100%; margin: 0 0 90px 0; color: #4D4D4D; font-size: 1.2rem; line-height: 1.6em; text-align: center;}
  .hp-about-con .more-bt { width: 100%; margin: 0 auto;}
  .hp-about-con .more-bt a { width: 100%; padding: 10px 0; color: #fff; font-size: 1.1rem; font-weight: 300; text-align: center; text-decoration: none; letter-spacing: 0.15em; border-radius: 30px; background-color: #4D4D4D; display: block;}

  img.hp-about-bg { width: 100%; height: auto; position: absolute; top: 120px; left: 0; z-index: 1;}


  /************ section #hp-articles ************/

  section#hp-articles { clear: both; width: 100%; padding: 0 0 70px 0; background-image: url("../images/hp_articles_bg.jpg"); background-repeat: no-repeat; background-size: auto 80vw; background-position: center top;}

  .hp-articles-intro { clear: both; width: 100%; padding: 30px 20px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start;}
  .hp-articles-intro .title-zh { width: 60px; padding: 60px 20px 0 0; color: #000; font-size: 2.4rem; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 700; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; box-sizing: border-box;}
  .hp-articles-intro .text-con { width: calc(100% - 60px);}
  .hp-articles-intro .text-con .title-en { width: 100%;}
  .hp-articles-intro .text-con .title-en span { color: #4D4D4D; font-size: 1.4rem; font-family: 300; border-bottom: 3px #4D4D4D solid;}
  .hp-articles-intro .text-con .intro { width: 100%; margin: 20px 0 0 0; color: #4D4D4D; font-size: 1.2rem; line-height: 2em;}

  .hp-articles-list { clear: both; width: 100%; position: relative;}
  .hp-articles-list img.arrow_prev { width: 10vw; height: auto; position: absolute; top: 35vw; left: 0; z-index: 2; cursor: pointer;}
  .hp-articles-list img.arrow_next { width: 10vw; height: auto; position: absolute; top: 35vw; right: 0; z-index: 2; cursor: pointer;}
  .hp-articles-list .articles-slider { width: 76%; margin: 0 auto; position: relative; z-index: 1;}
  .hp-articles-list .articles-slider .article-box { width: 100%; margin: 0 0 30px 0;}
  .hp-articles-list .articles-slider .article-box img.article-pic { width: 100%; height: auto;}
  .hp-articles-list .articles-slider .date { width: 100%; padding: 20px 0 0 0; color: #333; font-size: 1.1rem; font-weight: 300;}
  .hp-articles-list .articles-slider .title { width: 100%; padding: 10px 0; color: #007E87; font-size: 1.6rem; font-weight: 300;}
  .hp-articles-list .articles-slider .intro { width: 100%; padding: 0 0 10px 0; color: #333; font-size: 0.9rem; font-weight: 300; line-height: 1.6em;}
  .hp-articles-list .articles-slider img.more-bt { clear: both; width: 40px; height: auto;}

  .articles-more-bt { clear: both; width: calc(100% - 80px); margin: 45px 40px 0 40px;}
  .articles-more-bt a { width: 100%; padding: 10px 0; color: #fff; font-size: 1.1rem; font-weight: 300; text-align: center; text-decoration: none; letter-spacing: 0.15em; border-radius: 30px; background-color: #4D4D4D; display: block;}


  /************ page-banner-bx ************/

  .page-banner-bx { clear: both; width: 100%;}
  .page-banner-bx img { width: 100%; height: auto;}


  /************ section #page-about-part2 ************/

  section#page-about-part2 { clear: both; width: 100%; padding: 80px 20px; background-image: url("../images/page_about_sec_bg.jpg"); background-repeat: no-repeat; background-size: 100% auto; background-position: left top; box-sizing: border-box;}

  .about-p2-sub-title { width: 100%; color: #000; font-size: 2.2rem; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 700;}

  .about-p2-con { clear: both; width: 100%; margin: 0 0 70px 0;}
  .about-p2-con .col-lf { width: 100%;}
  .about-p2-con .col-lf .text { width: 100%; padding: 10px 0; color: #333; font-size: 1.2rem; font-weight: 300; line-height: 1.8em;}
  .about-p2-con .col-lf img.pic-1-1 { width: 90%; height: auto; margin: 0 auto;}
  .about-p2-con .col-lf img.pic-1-2 { width: 100%; height: auto;}
  .about-p2-con .col-rt { width: 100%; padding: 20px 0 0 0;}
  .about-p2-con .col-rt img.pic-2 { width: 100%; height: auto;}


  /************ section #page-about-part3 ************/

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

  img.page-about-sec3-pic { width: 100%; height: auto;}

  .about-p3-text { clear: both; width: 100%; padding: 60px 20px 80px 20px; box-sizing: border-box;}
  .about-p3-text .title { width: 100%; color: #000; font-size: 2.2rem; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 700; text-align: center;}
  .about-p3-text .text { width: 100%; padding: 20px 0 0 0; color: #333; font-size: 1.2rem; line-height: 1.8em; text-align: center;}


  /************ section #page-news ************/

  section#page-news-top { clear: both; width: 100%; padding: 70px 20px 40px 20px; box-sizing: border-box; background-color: #fff; position: relative;}

  .page-news-con { clear: both; width: 100%; position: relative; z-index: 2;}
  .page-news-con .title-en { width: 100%; text-align: center;}
  .page-news-con .title-en span { color: #4D4D4D; font-size: 1.4rem; font-family: 300; border-bottom: 3px #4D4D4D solid;}
  .page-news-con .title-zh { width: 100%; margin: 60px 0 50px 0; color: #000; font-size: 2.4rem; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 700; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; display: flex; justify-content: center; align-items: center;}
  .page-news-con .text-con { width: 100%; margin: 0 0 90px 0; color: #4D4D4D; font-size: 1.2rem; line-height: 1.6em; text-align: center;}
  .page-news-con .more-bt { width: 550px; margin: 0 auto;}
  .page-news-con .more-bt a { width: 100%; padding: 10px 0; color: #fff; font-size: 1.1rem; font-weight: 300; text-align: center; text-decoration: none; letter-spacing: 0.15em; border-radius: 30px; background-color: #4D4D4D; display: block;}

  img.page-news-bg { width: 100%; height: auto; position: absolute; top: 120px; left: 0; z-index: 1;}


  section#page-news { clear: both; width: 100%; padding: 60px 20px 120px 20px; background-image: url("../images/page_about_sec_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top; box-sizing: border-box;}

  .page-news-top-hot { width: calc(100% - 20px); margin: 0 auto; background-color: #E0E0E0; position: relative;}
  .page-news-top-hot .news-title { width: 100px; padding: 5px 0; color: #fff; font-size: 1.2rem; text-align: center; background-color: #007E88; position: absolute; top: -40px; left: calc(50% - 50px); z-index: 2;}
  .page-news-top-hot a { width: 100%; text-decoration: none;}
  .page-news-top-hot a .news-photo { width: 100%; position: relative; z-index: 1;}
  .page-news-top-hot a .news-photo img { width: 100%; height: auto;}
  .page-news-top-hot a .news-infor { width: 100%; padding: 20px; box-sizing: border-box; position: relative; z-index: 1;}
  .page-news-top-hot a .news-infor .date { width: 100%; color: #333; font-size: 1.1rem;}
  .page-news-top-hot a .news-infor .title { width: 100%; padding: 10px 0; color: #007E88; font-size: 1.6rem; font-weight: 300; line-height: 1.4em;}
  .page-news-top-hot a .news-infor .intro { width: 100%; color: #333; font-size: 1.1rem; line-height: 2rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;}

  .page-news-list { clear: both; width: 100%; margin: 40px 0 0 0;}
  .page-news-list .news-list-bx { width: 100%; margin: 0 0 40px 0;}
  .page-news-list .news-list-bx a { width: 100%; padding: 10px; border: 1px transparent solid; text-decoration: none; box-sizing: border-box; display: block;}
  .page-news-list .news-list-bx a:active { border: 1px #4D4D4D solid;}
  .page-news-list .news-list-bx a .photo { width: 100%; margin: 0 0 15px 0;}
  .page-news-list .news-list-bx a .photo img { width: 100%; height: auto;}
  .page-news-list .news-list-bx a .intro { width: 100%; padding: 0 10px; box-sizing: border-box;}
  .page-news-list .news-list-bx a .intro .date { width: 100%; color: #333; font-size: 1rem;}
  .page-news-list .news-list-bx a .intro .title { width: 100%; padding: 5px 0 10px 0; color: #007E88; font-size: 1.2rem; font-weight: 500; line-height: 1.4em;}
  .page-news-list .news-list-bx a .intro .text { width: 100%; color: #333; font-size: 1rem; line-height: 1.8rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;}


  .page-news-detail { clear: both; width: 100%;}
  .page-news-detail .news-title { width: 100%; padding: 0 0 20px 0; color: #333; font-size: 2rem; font-weight: 500; line-height: 1.4em;}
  .page-news-detail .news-date { width: 100%; padding: 0 0 40px 0; color: #4D4D4D; font-size: 1.1rem;}
  .page-news-detail .news-content { width: 100%; padding: 0 0 40px 0; color: #000; font-size: 1.2rem; line-height: 1.8em;}
  .page-news-detail .news-content img.photo { clear: both; max-width: 100%; height: auto; margin: 0 0 20px 0;}
  .page-news-detail .news-content a { color: #000; text-decoration: none; border-bottom: 1px #000 dashed;}
  .page-news-detail .news-content a:hover { color: #007E82; border-bottom: 1px #007E82 dashed;}


  /************ section #page-works ************/

  section#page-works { clear: both; width: 100%; padding: 60px 0; background-image: url("../images/page_works_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top; box-sizing: border-box; position: relative;}

  .page-works-con { clear: both; width: 100%; position: relative; z-index: 2;}
  .page-works-con .title-en { width: 100%; text-align: center;}
  .page-works-con .title-en span { color: #4D4D4D; font-size: 1.4rem; font-family: 300; border-bottom: 3px #4D4D4D solid;}
  .page-works-con .title-zh { width: 100%; margin: 60px 0 50px 0; color: #000; font-size: 2.4rem; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 700; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; display: flex; justify-content: center; align-items: center;}
  .page-works-con .text-con { width: 100%; margin: 0 0 90px 0; color: #4D4D4D; font-size: 1.2rem; line-height: 1.6em; text-align: center;}
  .page-works-con .more-bt { width: 550px; margin: 0 auto;}
  .page-works-con .more-bt a { width: 100%; padding: 10px 0; color: #fff; font-size: 1.1rem; font-weight: 300; text-align: center; text-decoration: none; letter-spacing: 0.15em; border-radius: 30px; background-color: #4D4D4D; display: block;}

  img.page-works-bg { width: 100%; height: auto; position: absolute; top: 120px; left: 0; z-index: 1;}

  .page-works-history { clear: both; width: 100%; margin: 65px 0 0 0;}
  .page-works-history .works-title { width: 100px; padding: 5px 0; margin: 0 auto; color: #fff; font-size: 1.2rem; text-align: center; background-color: #007E88;}
  .page-works-history .works-timeline { width: 100%; padding: 80px 10vw 0 10vw; box-sizing: border-box; background-image: url("../images/page_works_history_line_v.png"); background-repeat: repeat-y; background-position: center top; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
  /*col-lf*/
  .page-works-history .works-timeline .col-lf { width: 35vw; display: block;}
  .page-works-history .works-timeline .col-lf img.dotdot-v { width: 5vw; height: auto; margin: 1.5vw 11.5vw 0 0; float: right;}
  .page-works-history .works-timeline .col-lf .works-box { display: block;}
  .page-works-history .works-timeline .col-lf .works-box.year-1 { width: 35vw;}
  .page-works-history .works-timeline .col-lf .works-box.year-3 { width: 28vw; margin: -14vw 0 0 0; float: right;}
  .page-works-history .works-timeline .col-lf .works-box.year-1 .photo { width: 35vw; height: 35vw; border-radius: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden;}
  .page-works-history .works-timeline .col-lf .works-box.year-3 .photo { width: 28vw; height: 28vw; border-radius: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden;}
  .page-works-history .works-timeline .col-lf .works-box .photo img { width: 100%; height: auto;}
  .page-works-history .works-timeline .col-lf .works-box .year { width: 100%; margin: 1vw 0 0 0; color: #80BDDB; font-size: 5vw; font-weight: 600; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; line-height: 6vw; text-align: center;}
  .page-works-history .works-timeline .col-lf .works-box .title { width: 100%; color: #000; font-size: 4vw; font-weight: 700; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; text-align: center;}
  .page-works-history .works-timeline .col-lf .works-box .infor { width: 100%; color: #000; font-size: 1.8vw; font-weight: 600; text-align: center;}
  .page-works-history .works-timeline .col-lf .works-box .more { width: 100%; margin: 1vw 0 0 0;}
  .page-works-history .works-timeline .col-lf .works-box .more img { width: 5vw; height: auto; margin: 0 auto;}
  /*col-rt*/
  .page-works-history .works-timeline .col-rt { width: 35vw; display: block;}
  .page-works-history .works-timeline .col-rt img.dotdot-h { width: 25vw; height: auto; margin: 13.8vw 0 0 3vw;}
  .page-works-history .works-timeline .col-rt .works-box { display: block;}
  .page-works-history .works-timeline .col-rt .works-box.year-2 { width: 32.5vw; margin: -21.5vw 0 0 0;}
  .page-works-history .works-timeline .col-rt .works-box.year-4 { width: 28vw; margin: -13vw 0 0 0;}
  .page-works-history .works-timeline .col-rt .works-box.year-2 .photo { width: 32.5vw; height: 32.5vw; border-radius: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden;}
  .page-works-history .works-timeline .col-rt .works-box.year-4 .photo { width: 28vw; height: 28vw; border-radius: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden;}
  .page-works-history .works-timeline .col-rt .works-box .photo img { width: 100%; height: auto;}
  .page-works-history .works-timeline .col-rt .works-box .year { width: 100%; margin: 1vw 0 0 0; color: #80BDDB; font-size: 5vw; font-weight: 600; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; line-height: 6vw; text-align: center;}
  .page-works-history .works-timeline .col-rt .works-box .title { width: 100%; color: #000; font-size: 4vw; font-weight: 700; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; text-align: center;}
  .page-works-history .works-timeline .col-rt .works-box .infor { width: 100%; color: #000; font-size: 1.8vw; font-weight: 600; text-align: center;}
  .page-works-history .works-timeline .col-rt .works-box .more { width: 100%; margin: 1vw 0 0 0;}
  .page-works-history .works-timeline .col-rt .works-box .more img { width: 5vw; height: auto; margin: 0 auto;}
  /*col-md*/
  .page-works-history .works-timeline .col-md-1 { width: 6vw; margin: 16vw 0 0 0; background-image: url("../images/page_works_history_line.png"); background-repeat: repeat-x; background-position: center center;}
  .page-works-history .works-timeline .col-md-2 { width: 6vw; margin: -6vw 0 0 0; background-image: url("../images/page_works_history_line.png"); background-repeat: repeat-x; background-position: center center;}
  .page-works-history .works-timeline .col-md-3 { width: 6vw; margin: -2vw 0 0 0; background-image: url("../images/page_works_history_line.png"); background-repeat: repeat-x; background-position: center center;}
  .page-works-history .works-timeline .col-md-4 { width: 6vw; margin: 0.5vw 0 0 0; background-image: url("../images/page_works_history_line.png"); background-repeat: repeat-x; background-position: center center;}
  .page-works-history .works-timeline .col-md-1 .red-dot, 
  .page-works-history .works-timeline .col-md-2 .red-dot, 
  .page-works-history .works-timeline .col-md-3 .red-dot, 
  .page-works-history .works-timeline .col-md-4 .red-dot { width: 1.8vw; height: 1.8vw; margin: 0 auto; border-radius: 100%; background-color: #AC1C26; display: block;}
  .page-works-history img.timeline-end { width: 15vw; height: auto; margin: 0 auto;}


  /************ section #page-works-hot ************/

  section#page-works-hot { clear: both; width: 100%; background-image: url("../images/page_works_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top; box-sizing: border-box; position: relative;}

  .page-works-hot-title { width: 100%; padding: 20px 0; text-align: center;}
  .page-works-hot-title span { color: #4D4D4D; font-size: 1.4rem; font-family: 300; border-bottom: 3px #4D4D4D solid;}

  .works-hot-top-text { clear: both; width: 100%; padding: 20px 40px; color: #fff; font-size: 0.7rem; font-weight: 300; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; line-height: 1.2em; box-sizing: border-box; background-color: #E6E6E6; position: relative; z-index: 1;}

  .page-works-hot-list { clear: both; width: 100%; padding: 8vw 0 0 0; position: relative;}
  .page-works-hot-list img.works-hot-photo { clear: both; width: 100%; height: auto; position: relative; z-index: 2;}
  .page-works-hot-list .works-hot-infor { width: 100%; padding: 40px 10vw; box-sizing: border-box; background-color: #fff;}
  .page-works-hot-list .works-hot-infor .works-infor { width: 100%;}
  .page-works-hot-list .works-hot-infor .works-infor .works-title { width: 100px; padding: 5px 0; color: #fff; font-size: 1.2rem; text-align: center; background-color: #007E88;}
  .page-works-hot-list .works-hot-infor .works-infor .year { width: 100%; margin: 0 0 10px 0; color: #80BDDB; font-size: 3.2rem; font-weight: 600; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; line-height: 1em;}
  .page-works-hot-list .works-hot-infor .works-infor .title { width: 100%; color: #000; font-size: 2.6rem; font-weight: 700; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial;}
  .page-works-hot-list .works-hot-infor .works-infor .infor { width: 100%; color: #333; font-size: 1.4rem; font-weight: 300; line-height: 3em;}
  .page-works-hot-list img.works-hot-infor-arrow { clear: both; width: 165px; height: auto; margin: 20px auto;}
  .page-works-hot-list .works-hot-contact-bar { clear: both; width: 100%; padding: 40px 20px; box-sizing: border-box; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  .page-works-hot-list .works-hot-contact-bar img.works-hot-illu { width: 400px; max-width: 100%; height: auto; margin: 0 auto 40px auto;}
  .page-works-hot-list .works-hot-contact-bar .contact-icon-box { width: 70px; margin: 0 15px;}
  .page-works-hot-list .works-hot-contact-bar .contact-icon-box a { width: 100%; text-align: center; text-decoration: none; display: block;}
  .page-works-hot-list .works-hot-contact-bar .contact-icon-box a img { width: 56px; height: auto; margin: 0 auto 10px auto;}
  .page-works-hot-list .works-hot-contact-bar .contact-icon-box a span { color: #007E82; font-size: 1rem; font-weight: 500;}


  /************ section #page-works-hot-con ************/

  section#page-works-hot-con { clear: both; width: 100%; background-image: url("../images/page_works_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top; box-sizing: border-box; position: relative;}

  .works-hot-con-intro { width: 100%;}
  .works-hot-con-intro .photos-big { width: 100%;}
  .works-hot-con-intro .photos-big img { width: 100%; height: auto;}
  .works-hot-con-intro .intro-content { clear: both; width: 100%; padding: 40px 20px; box-sizing: border-box; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
  .works-hot-con-intro .intro-content .text-con-1 { display: none;}
  .works-hot-con-intro .intro-content .text-con-1-mo { width: 100%; padding: 0 20px; margin: 0 0 40px 0; color: #333; font-size: 1.2rem; text-align: center; line-height: 2em; box-sizing: border-box;}
  .works-hot-con-intro .intro-content img.intro-photos { clear: both; width: calc(50% - 10px); margin: 5px;}
  .works-hot-con-intro .intro-content .text-con-2 { width: 100%; padding: 0 20px; margin: 40px 0; color: #333; font-size: 1.2rem; text-align: center; line-height: 2em; box-sizing: border-box;}
  .works-hot-con-intro .intro-content .text-con-2 span.title { color: #000; font-size: 1.6rem; font-weight: 600;}
  .works-hot-con-intro .map-contact { clear: both; width: 100%;}
  .works-hot-con-intro .map-contact .map { width: 100%; padding: 0 0 40px 0; background-color: #fff;}
  .works-hot-con-intro .map-contact .map img { width: 100%; height: auto;}
  .works-hot-con-intro .map-contact .contact-icon { clear: both; width: 100%; padding: 0 20px; box-sizing: border-box; background-color: #fff;}
  .works-hot-con-intro .map-contact .contact-icon img.illu { width: 400px; max-width: 100%; height: auto; margin: 0 auto;}
  .works-hot-con-intro .map-contact .contact-icon .icons-box-full { clear: both; width: 100%; margin: 60px auto; display: flex; justify-content: center; align-items: flex-start;}
  .works-hot-con-intro .map-contact .contact-icon .icons-box-full .icon-box { width: 80px; margin: 0 15px;}
  .works-hot-con-intro .map-contact .contact-icon .icons-box-full .icon-box a { width: 100%; text-decoration: none; display: block;}
  .works-hot-con-intro .map-contact .contact-icon .icons-box-full .icon-box a img { width: 56px; height: auto; margin: 0 auto;}
  .works-hot-con-intro .map-contact .contact-icon .icons-box-full .icon-box a .title { width: 100%; padding: 10px 0 0 0; color: #007E82; font-size: 1.1rem; font-weight: 500; text-align: center;}
  .works-hot-con-intro .map-contact .contact-icon .arrow-top { clear: both; width: 86px; margin: 0 auto;}
  .works-hot-con-intro .map-contact .contact-icon .arrow-top a { width: 100%; display: block;}
  .works-hot-con-intro .map-contact .contact-icon .arrow-top a img { width: 100%; height: auto;}


  /************ section #page-articles ************/

  section#page-articles { clear: both; width: 100%; padding: 0 20px 120px 20px; margin: -90px 0 0 0; background-image: url("../images/page_about_sec_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top; box-sizing: border-box;}

  .page-articles-con { clear: both; width: 100%; padding: 0 0 80px 0; position: relative; z-index: 2;}
  .page-articles-con .title-en { width: 100%; text-align: center;}
  .page-articles-con .title-en span { color: #4D4D4D; font-size: 1.4rem; font-family: 300; border-bottom: 3px #4D4D4D solid;}
  .page-articles-con .title-zh { width: 100%; margin: 60px 0 50px 0; color: #000; font-size: 2.4rem; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 700; -webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; display: flex; justify-content: center; align-items: center;}
  .page-articles-con .text-con { width: 100%; margin: 0 0 90px 0; color: #4D4D4D; font-size: 1.2rem; line-height: 1.6em; text-align: center;}
  
  img.page-articles-bg { width: 100%; height: auto; position: absolute; top: 120px; left: 0; z-index: 1;}

  .page-articles-list { clear: both; width: 100%; margin: 0 auto; position: relative;}
  .page-articles-list .article-title { width: 100px; padding: 5px 0; color: #fff; font-size: 1.2rem; text-align: center; background-color: #007E88; position: absolute; top: -20px; left: calc(50% - 50px); z-index: 2;}
  .page-articles-list a { width: 100%; margin: 0 0 40px 0; text-decoration: none; display: block;}
  .page-articles-list a .article-photo { width: 100%; position: relative; z-index: 1;}
  .page-articles-list a .article-photo img { width: 100%; height: auto;}
  .page-articles-list a .article-infor { width: 100%; padding: 20px; box-sizing: border-box; background-color: #E0E0E0; position: relative; z-index: 1;}
  .page-articles-list a .article-infor .date { width: 100%; color: #333; font-size: 1rem;}
  .page-articles-list a .article-infor .title { width: 100%; padding: 10px 0; color: #007E88; font-size: 1.6rem; font-weight: 300; line-height: 1.4em;}
  .page-articles-list a .article-infor .intro { width: 100%; color: #333; font-size: 1rem; line-height: 1.6rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden;}


  ul.page-number-bar { clear: both; width: 100%; padding: 0; margin: 60px 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center;}
  ul.page-number-bar li { padding: 0; margin: 0 5px 10px 5px;}
  ul.page-number-bar li a { padding: 8px; color: #007E87; font-size: 1.1rem; line-height: 1em; text-decoration: none; border: 1px #007E87 solid; background-color: #fff; display: block;}
  ul.page-number-bar li a:hover { background-color: #eee;}
  ul.page-number-bar li a.sel { color: #fff; background-color: #007E87;}


  /************ section #page-articles-con ************/

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

  .page-articles-con-title { clear: both; width: calc(100% - 40px); padding: 3vw; margin: 0 20px 90px 20px; background-color: #DFDFDF; box-sizing: border-box;}
  .page-articles-con-title .date { width: 100%; color: #333; font-size: 1rem;}
  .page-articles-con-title .title { width: 100%; padding: 10px 0 0 0; color: #007E88; font-size: 1.6rem; font-weight: 300; line-height: 1.4em;}

  .page-articles-con-text { clear: both; width: 100%; padding: 0 20px 80px 20px; box-sizing: border-box; background-image: url("../images/page_about_sec_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top; position: relative;}
  .page-articles-con-text img.articles-pic { width: 100%; height: auto; position: relative; top: -90px; left: 0; z-index: 1;}
  .page-articles-con-text .content { clear: both; width: 100%; margin: -40px 0 50px 0; color: #333; font-size: 1.1rem; line-height: 1.8em;}

  img.goback-bt { width: 36px; height: auto; margin: 0 auto;}


  /************ section #page-progress ************/

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

  .page-progress-title { clear: both; width: 100%; padding: 50px 20px; box-sizing: border-box;}
  .page-progress-title .title-en { width: 100%; text-align: center;}
  .page-progress-title .title-en span { color: #4D4D4D; font-size: 1.4rem; font-family: 300; border-bottom: 3px #4D4D4D solid;}
  .page-progress-title .title-zh { clear: both; width: 140px; padding: 5px 0; margin: 15px auto 30px auto; color: #fff; font-size: 1.4rem; text-align: center; background-color: #007E88;}
  .page-progress-title .text-intro { display: none;}
  .page-progress-title .text-intro-mo { clear: both; width: 100%; margin: 0 auto; color: #4D4D4D; font-size: 1.2rem; line-height: 1.6em; text-align: center;}

  .page-progress-list { clear: both; width: 100%; padding: 90px 20px; box-sizing: border-box;}
  .page-progress-list:nth-child(even) { background-image: url("../images/page_about_sec_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top;}
  .page-progress-list:nth-child(odd) { background-color: #E0E0E0;}
  .page-progress-list .title-box { width: 100%; padding: 0 10vw; margin: 0 0 30px 0; box-sizing: border-box;}
  .page-progress-list .title-box span.title-zh { width: 100%; padding: 0 10px 0 0; color: #000; font-size: 4rem; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 700; line-height: 1.2em; display: block;}
  .page-progress-list .title-box span.title-info { width: 100%; padding: 0 0 0 10px; color: #4D4D4D; font-size: 1.4rem; line-height: 1.2em; display: block;}
  .page-progress-list .progress-list-slide { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: center;}
  .page-progress-list .progress-list-slide .arrow-prev { width: 10vw;}
  .page-progress-list .progress-list-slide .arrow-next { width: 10vw;}
  .page-progress-list .progress-list-slide .arrow-prev img, 
  .page-progress-list .progress-list-slide .arrow-next img { width: 100%; height: auto; cursor: pointer;}
  .page-progress-list .progress-list-slide .progress-list-full { width: calc(100% - 20vw);}
  .page-progress-list .progress-list-slide .progress-list-full .list-box { width: 100%;}
  .page-progress-list .progress-list-slide .progress-list-full .list-box .photo { width: 100%;}
  .page-progress-list .progress-list-slide .progress-list-full .list-box .photo a img { width: 100%; height: auto;}
  .page-progress-list .progress-list-slide .progress-list-full .list-box .photo a:hover img { opacity: 0.5;}
  .page-progress-list .progress-list-slide .progress-list-full .list-box .date-title { width: 100%; margin: 10px 0 0 0; display: flex; justify-content: flex-start; align-items: center;}
  .page-progress-list .progress-list-slide .progress-list-full .list-box .date-title .date { width: 22vw; padding: 1vw 0; color: #007E88; font-size: 6vw; line-height: 6vw; text-align: center; border: 2px #007E88 solid; box-sizing: border-box;}
  .page-progress-list .progress-list-slide .progress-list-full .list-box .date-title .date span.year { font-size: 7vw;}
  .page-progress-list .progress-list-slide .progress-list-full .list-box .date-title .title { width: calc(100% - 22vw); padding: 0 0 0 1.5vw; color: #007E88; font-size: 5vw; box-sizing: border-box;}


  /*20250307更新*/
  .page-progress-login { clear: both; width: 100%; padding: 90px 40px; box-sizing: border-box; background-color: #eee;}
  .page-progress-login form { width: 100%; margin: 0 auto;}
  .page-progress-login form .caption { width: 100%; padding: 5px 0; font-size: 1.4rem;}
  .page-progress-login form .column { width: 100%; padding: 5px 0; margin: 0 0 20px 0;}
  .page-progress-login form .column input[type=text], 
  .page-progress-login form .column input[type=password] { width: 100%; padding: 10px; font-size: 1.4rem; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .page-progress-login form .column img.code { width: 200px; height: auto; margin: 0 0 10px 0;}
  .page-progress-login form .column input[type=submit], 
  .page-progress-login form .column input[type=button] { width: 140px; padding: 5px 10px; margin: 30px 0 0 0; color: #fff; font-size: 1.4rem; text-align: center; border: 0; border-radius: 20px; background-color: #00545b; box-sizing: border-box; cursor: pointer;}


  /************ section #page-progress-con ************/

  section#page-progress-con { clear: both; width: 100%; padding: 90px 0; background-image: url("../images/page_about_sec_bg.jpg"); background-repeat: repeat-y; background-size: 300% auto; background-position: left top; box-sizing: border-box;}

  .page-progress-con-title { clear: both; width: 100%;}
  .page-progress-con-title .title-name { width: 100%; padding: 0 20px; color: #000; font-size: 4rem; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 700; line-height: 1.2em; box-sizing: border-box;}
  .page-progress-con-title .progress-on { width: 100%; padding: 8px 20px; background-color: #007E88; box-sizing: border-box;}
  .page-progress-con-title .progress-on .last { width: 100%; color: #fff; font-size: 0.9rem; font-weight: 300; line-height: 1.4em;}
  .page-progress-con-title .progress-on select { width: 100%; padding: 10px; margin: 10px 0 0 0; color: #000; font-size: 1rem; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}

  .page-progress-con-infor { clear: both; width: 100%; padding: 0 20px; margin: 80px 0 0 0; box-sizing: border-box;}
  .page-progress-con-infor .progress-step { clear: both; width: 100%; margin: 0 0 80px 0;}
  .page-progress-con-infor .progress-step .col-photo { width: 100%; margin: 30px 0 0 0;}
  .page-progress-con-infor .progress-step .col-photo img.photo-big { width: 100%; height: auto; margin: 0 0 30px 0;}
  .page-progress-con-infor .progress-step .col-photo img.photo-thumb { width: calc(100% - 1vw); margin: 0 0.5vw; cursor: pointer;}
  .page-progress-con-infor .progress-step .col-infor { width: 100%;}
  .page-progress-con-infor .progress-step .col-infor .date-bx { width: 22vw; padding: 1vw 0; color: #007E88; font-size: 6vw; line-height: 6vw; text-align: center; border: 2px #007E88 solid; box-sizing: border-box;}
  .page-progress-con-infor .progress-step .col-infor .date-bx span.year { font-size: 7vw;}
  .page-progress-con-infor .progress-step .col-infor .name-bx { clear: both; width: 100%; padding: 2vw 0; color: #000; font-size: 8vw; font-weight: 500;}
  .page-progress-con-infor .progress-step .col-infor .text-bx { clear: both; width: 100%; color: #000; font-size: 4.4vw; font-weight: 300; line-height: 9vw;}
  .page-progress-con-infor .progress-step .col-infor img.progress-goback { clear: both; width: 160px; height: auto; margin: 60px auto 0 auto;}

  hr.step-line { clear: both; width: 100%; border: 1px #03733a solid; margin: 0 0 90px 0;}


  .progress-goback { clear: both; width: 100%; display: flex; justify-content: flex-end;}
  .progress-goback img.progress-goback { clear: both; width: 160px; height: auto; margin: 0 auto;}


  /************ section #page-mem-login ************/

  section#page-mem-login { clear: both; width: 100%; position: relative; overflow: hidden;}

  img.page-mem-login-bg { width: 240%; height: auto; margin: 0 0 0 -50%; position: relative; z-index: 1;}

  .page-mem-login-table { width: 86vw; position: absolute; top: 16vw; left: calc(50% - 43vw); z-index: 2;}
  .page-mem-login-table .page-title { width: 100%;}
  .page-mem-login-table .page-title .title-en { width: 100%; text-align: center;}
  .page-mem-login-table .page-title .title-en span { color: #4D4D4D; font-size: 6vw; font-family: 300; border-bottom: 3px #4D4D4D solid;}
  .page-mem-login-table .page-title .title-zh { clear: both; width: 34vw; padding: 5px 0; margin: 15px auto 30px auto; color: #fff; font-size: 6vw; text-align: center; background-color: #007E88;}
  .page-mem-login-table .page-title .text-intro { display: none;}
  .page-mem-login-table .page-title .text-intro-mo { clear: both; width: 100%; margin: 0 auto; color: #4D4D4D; font-size: 4vw; line-height: 6vw; text-align: center;}

  .page-mem-login-table .login-table { clear: both; width: 100%; margin: 6vw 0 0 0; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .page-mem-login-table .login-table .icon { width: 12vw; margin: 0 0 3vw 0;}
  .page-mem-login-table .login-table .icon img { width: 8vw; height: auto; margin: 0 auto;}
  .page-mem-login-table .login-table .caption { width: 18vw; margin: 0 0 3vw 0; font-size: 6vw; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 700;}
  .page-mem-login-table .login-table .column { width: calc(100% - 12vw - 18vw); margin: 0 0 3vw 0;}
  .page-mem-login-table .login-table .column input { width: 100%; padding: 2vw; color: #000; font-size: 6vw; border: 0; background-color: #fff; box-sizing: border-box;}
  .page-mem-login-table .login-table input[type=button], 
  .page-mem-login-table .login-table input[type=submit] { width: 100%; padding: 2vw 0; margin: 2vw 0 0 0; color: #fff; font-size: 6vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #007E88; box-sizing: border-box; cursor: pointer;}
  .page-mem-login-table .login-table input[type=button]:hover, 
  .page-mem-login-table .login-table input[type=submit]:hover { background-color: #00545b;}


  /************ page-mem-works-list ************/

  .page-mem-works-list { clear: both; width: 100%; padding: 120px 20px; background-image: url("../images/page_about_sec_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto; background-position: left top; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-mem-works-list .mem-work-box { width: 100%; margin: 0 0 40px 0;}
  .page-mem-works-list .mem-work-box a { width: 100%; height: 100%; padding: 10px; text-decoration: none; border: 1px transparent solid; display: block; box-sizing: border-box;}
  .page-mem-works-list .mem-work-box a:hover { border: 1px #333 solid;}
  .page-mem-works-list .mem-work-box a .work-title-info { width: 100%; margin: 0 0 30px 0;}
  .page-mem-works-list .mem-work-box a .work-title-info span.title { width: 100%; color: #000; font-size: 3rem; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 700; line-height: 1.2em; display: block;}
  .page-mem-works-list .mem-work-box a .work-title-info span.info { width: 100%; padding: 5px 0 0 0; color: #4D4D4D; font-size: 1.4rem; line-height: 1.2em; display: block;}
  .page-mem-works-list .mem-work-box a .work-pic { width: 100%;}
  .page-mem-works-list .mem-work-box a .work-pic img { width: 100%; height: auto;}


  /************ section #page-contact ************/

  section#page-contact { clear: both; width: 100%; position: relative; overflow: hidden;}

  img.page-contact-bg { width: 260%; height: auto; margin: 0 0 0 -80%; position: relative; z-index: 1;}

  .page-contact-con { width: 90vw; height: 100%; background-color: rgba(255,255,255,0.3); position: absolute; top: 0; left: calc(50% - 45vw); z-index: 2;}
  .page-contact-con .contact-form { width: 100%; padding: 5vw 3vw 0 3vw; box-sizing: border-box;}
  .page-contact-con .contact-form .title-en { width: 100%;}
  .page-contact-con .contact-form .title-en span { color: #fff; font-size: 5vw; font-family: 300; border-bottom: 3px #fff solid;}
  .page-contact-con .contact-form .contact-title { width: 24vw; padding: 1vw 0; margin: 2vw 0; color: #fff; font-size: 4.6vw; text-align: center; background-color: #007E88;}
  .page-contact-con .contact-form .text { display: none;}
  .page-contact-con .contact-form .text-mo { clear: both; width: 100%; color: #1A1A1A; font-size: 3.4vw; line-height: 4vw;}
  .page-contact-con .contact-form .form-table { width: 100%; margin: 4vw 0 0 0; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .page-contact-con .contact-form .form-table .caption-1 { width: 18vw; padding: 0 0 2vw 0; font-size: 5vw; font-weight: 500; text-align: right;}
  .page-contact-con .contact-form .form-table .column-1 { width: calc(100% - 18vw); padding: 0 0 2vw 0; color: #000; font-size: 4vw;}
  .page-contact-con .contact-form .form-table .column-1 input[type=text].style-1 { width: 100%; padding: 1vw; margin: 0 0 1vw 0; box-sizing: border-box; color: #000; font-size: 4vw; border: 0; background-color: rgba(255,255,255,0.6);}
  .page-contact-con .contact-form .form-table .column-1 input[type=text].style-2 { width: 100%; padding: 1vw; box-sizing: border-box; color: #000; font-size: 4vw; border: 0; background-color: rgba(255,255,255,0.6);}
  .page-contact-con .contact-form .form-table .column-1 input[type=radio] { width: 4vw; height: 4vw; margin: 0 0.3vw 0 0; border: 1px #fff solid; background-color: transparent;}
  .page-contact-con .contact-form .form-table .column-1 textarea { width: 100%; height: 16vw; padding: 1vw; box-sizing: border-box; color: #000; font-size: 4vw; border: 0; background-color: rgba(255,255,255,0.6);}
  .page-contact-con .contact-form .form-table .caption-2 { width: 24vw; padding: 0 0 2vw 0; font-size: 5vw; font-weight: 500; text-align: right;}
  .page-contact-con .contact-form .form-table .column-2 { width: calc(100% - 24vw); padding: 0 0 1vw 0; color: #000;}
  .page-contact-con .contact-form .form-table .column-2 img.code { width: 40vw; height: auto;}
  .page-contact-con .contact-form .form-table .column-2 input[type=text] { clear: both; width: 100%; padding: 1vw; margin: 1vw 0 0 0; box-sizing: border-box; color: #000; font-size: 4vw; border: 0; background-color: rgba(255,255,255,0.6);}
  .page-contact-con .contact-form .form-table .column-2 a { color: #000; font-size: 3vw;}
  .page-contact-con .contact-form .form-table .full-submit { width: 100%; margin: 4vw 0 0 0; border-top: 1px #007E88 solid;}
  .page-contact-con .contact-form .form-table .full-submit input[type=button] { padding: 0.5vw 1.5vw; color: #fff; font-size: 4vw; border: 0; background-color: #007E88; cursor: pointer; float: right;}

  .page-contact-con .contact-infor { clear: both; width: 60vw; margin: 16vw 5vw 5vw 5vw; color: #000; font-size: 4vw; line-height: 6vw; float: right;}
  .page-contact-con .contact-infor span.title { color: #B21C26; font-size: 7vw; font-family: 'Noto Serif TC', serif, "微軟正黑體", Arial; font-weight: 700;}


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

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

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

  ul.footer-nav { clear: both; width: 100%; padding: 0; margin: 30px 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  ul.footer-nav li { padding: 0; margin: 0 20px 10px 20px;}
  ul.footer-nav li a { color: #000; font-size: 1.2rem; font-weight: 300; text-decoration: none;}
  ul.footer-nav li a:hover { color: #fff;}

  .footer-infor { display: none;}
  .footer-infor-mo { clear: both; width: 100%; margin: 25px 0 0 0; color: #fff; font-size: 1.1rem; font-weight: 300; line-height: 1.8em; text-align: center;}
  

}