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

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

body { padding:0; margin:0 auto; color: #1A1A1A; 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%; overflow-x: hidden;}

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

div.brk { clear: both;}


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


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

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

  header { width: 100%; position: relative; z-index: 9;}

  img.index-banner { width: 100%; height: auto;}
  img.about-banner { width: 100%; height: auto;}

  .header-logo-box { width: 9vw; position: absolute; top: 2.5vw; left: 18vw;}
  .header-logo-box img { width: 100%; height: auto;}

  .header-tel-box { width: 17vw; display: flex; justify-content: flex-end; align-items: center; position: absolute; top: 3.5vw; right: 18vw;}
  .header-tel-box .icon { width: 2vw; margin: 0 0.5vw 0 0;}
  .header-tel-box .icon img { width: 100%; height: auto;}
  .header-tel-box .tel { width: calc(100% - 2.5vw); color: #fff; font-size: 1vw; font-weight: 500; line-height: 1.2vw;}

  .header-social-icons { width: 8vw; display: flex; justify-content: flex-end; align-items: center; position: absolute; top: 3.5vw; right: 18vw;}
  .header-social-icons img { width: 1.5vw; height: auto; margin: 0 0 0 0.5vw;}

  nav#mo { display: none;}

  nav#pc { width: calc(100% - 36vw); border-top: 4px rgba(255,255,255,0.4) solid; box-sizing: border-box; position: absolute; top: 7.5vw; left: 18vw;}
  nav#pc ul#nav { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-start; align-items: stretch;}
  nav#pc ul#nav li { width: calc(100% / 6); padding: 0; margin: -4px 0 0 0;}
  nav#pc ul#nav li a { width: calc(100% - 2.5vw); padding: 0.5vw 0 0.5vw 0.5vw; margin: 0 2.5vw 0 0; color: #fff; text-decoration: none; display: block; cursor: pointer;}
  nav#pc ul#nav li a span.cn { font-size: 1.2vw; font-weight: 600; letter-spacing: 0.1vw;}
  nav#pc ul#nav li a span.en { font-size: 0.9vw; font-weight: 300;}
  nav#pc ul#nav li a:hover { background-color: rgba(41,171,226,0.6);}
  nav#pc ul#nav li a.sel { background-color: rgba(41,171,226,0.6);}
  nav#pc ul#nav li ul#nav-popup { width: calc(100% - 2vw); padding: 0; margin: 0; background-color: rgba(41,171,226,0.6); list-style: none; display: none;}
  nav#pc ul#nav li ul#nav-popup li { width: 100%; padding: 0; margin: 0; border-top: 1px #fff solid;}
  nav#pc ul#nav li ul#nav-popup li a { width: 100%; padding: 0.3vw 0.5vw; color: #fff; font-size: 1.2vw; font-weight: 600; letter-spacing: 0.1vw; box-sizing: border-box; display: block;}
  nav#pc ul#nav li ul#nav-popup li a:hover { background-color: rgba(41,171,226,1);}

  img.index-banner-text { width: 28.5vw; height: auto; position: absolute; top: 17.5vw; right: 21vw;}
  img.about-banner-text { width: 28.5vw; height: auto; position: absolute; top: 15vw; right: 18vw;}


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

  section#hp-about { clear: both; width: 100%; padding: 4vw 14vw 13vw 14vw; background-color: #fff; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-end; flex-wrap: wrap; position: relative; z-index: 9;}

  .hp-about-title-text { width: 29vw; margin: 2vw 0 3vw 0;}

  .hp-about-title { width: 22vw;}
  .hp-about-title .en-title { width: 100%; color: #366B9D; font-size: 4.6vw; font-weight: 300; line-height: 4.6vw;}
  .hp-about-title .en-title-s { width: 96%; color: #808080; font-size: 0.7vw; font-weight: 300;}
  .hp-about-title .cn-title { width: 100%; color: #366B9D; font-size: 2.4vw; font-weight: 900;}

  .hp-about-text { width: 100%; margin: 1vw 0 0 0; font-size: 1.1vw; font-weight: 500; line-height: 1.8vw;}

  .hp-about-photos { width: calc(100% - 29vw); margin: 0 0 4vw 0; display: flex; justify-content: flex-end;}
  .hp-about-photos img { width: 11.5vw; height: auto; margin: 0 0 0 1vw;}

  .hp-about-more-bt { width: 8.5vw; position: absolute; top: 4vw; right: 14vw;}
  .hp-about-more-bt img { width: 100%; height: auto;}


  /************ section#hp-service ************/

  section#hp-service { clear: both; width: 100%; padding: 8vw 0; background-image: url("../images/index_service_bg.jpg"); background-repeat: no-repeat; background-size: cover; position: relative; z-index: 9;}

  .hp-service-item { clear: both; width: calc(100% - 24vw); padding: 3vw 2vw; margin: -20.8vw auto 0 auto; box-sizing: border-box; background-color: #fff; display: flex; justify-content: center; align-items: stretch; -moz-box-shadow:2px 2px 6px 2px rgba(20%,20%,40%,0.3); -webkit-box-shadow:2px 2px 6px 2px rgba(20%,20%,40%,0.3); box-shadow:2px 2px 6px 2px rgba(20%,20%,40%,0.3); position: relative; z-index: 9;}
  .hp-service-item .item-box { width: calc(100% / 6);}
  .hp-service-item .item-box .icon { width: 100%; border-right: 1px #ccc solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
  .hp-service-item .item-box .icon img { width: 5vw; height: auto;}
  .hp-service-item .item-box:last-child .icon { border-right: 0;}
  .hp-service-item .item-box .text { width: 100%; padding: 0.5vw 0 0 0; color: #366B9D; font-size: 1vw; text-align: center;}

  .hp-service-red-block { width: 20vw; height: 12vw; display: block; background-color: #C1272D; position: absolute; top: -7vw; left: 0;}

  .hp-service-content { clear: both; width: 100%; padding: 0 12vw; margin: 9vw 0 0 0; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start;}
  .hp-service-content .photos { width: calc(50% - 2vw); margin: 0 2vw 0 0; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .hp-service-content .photos img { width: 100%; height: auto;}
  .hp-service-content .title-text { width: calc(50% - 2vw); margin: 0 0 0 2vw;}
  .hp-service-content .title-text .text { width: 100%; margin: 1.5vw 0 0 0; font-size: 1.1vw;}
  .hp-service-content .title-text .text span.top { color: #07254F; font-size: 1.6vw; font-weight: 600;}
  
  .hp-service-title { width: 28vw;}
  .hp-service-title .en-title { width: 100%; color: #366B9D; font-size: 4.6vw; font-weight: 300; line-height: 4.6vw;}
  .hp-service-title .en-title-s { width: 76%; color: #808080; font-size: 0.7vw; font-weight: 300;}
  .hp-service-title .cn-title { width: 100%; color: #366B9D; font-size: 2.4vw; font-weight: 900;}

  .hp-service-more-bt { width: 5vw; position: absolute; bottom: 0; right: 12vw;}
  .hp-service-more-bt img { width: 100%; height: auto;}


  /************ section#hp-news ************/

  section#hp-news { clear: both; width: 100%; position: relative; z-index: 9;}

  .hp-news-top { width: 100%; padding: 4vw 12vw; background-color: #366B9D; box-sizing: border-box; position: relative; z-index: 1;}

  .hp-news-title { width: 28vw;}
  .hp-news-title .en-title { width: 100%; color: #fff; font-size: 4.6vw; font-weight: 300; line-height: 4.6vw;}
  .hp-news-title .en-title-s { width: 76%; color: #fff; font-size: 0.7vw; font-weight: 300;}
  .hp-news-title .cn-title { width: 100%; color: #fff; font-size: 2.4vw; font-weight: 900;}

  .hp-news-more-bt { width: 8.5vw; position: absolute; bottom: 2.5vw; right: 14vw;}
  .hp-news-more-bt img { width: 100%; height: auto;}

  .hp-news-list { clear: both; width: 100%; padding: 0 12vw 4vw 12vw; box-sizing: border-box; background-color: rgba(54,107,157,0.88); position: relative; z-index: 2;}
  .hp-news-list .news-list-box { width: 100%; margin: -2px 0 0 0; border-top: 5px #2b1b2c solid;}
  .hp-news-list .news-list-box .list-box { width: 100%; padding: 1.5vw 0; border-bottom: 1px #fff solid; display: flex; justify-content: flex-start; align-items: flex-start;}
  .hp-news-list .news-list-box .list-box .date { width: 6vw; text-align: center;}
  .hp-news-list .news-list-box .list-box .date .news-day { color: #C1272D; font-size: 3.2vw; font-size: 700; line-height: 3vw;}
  .hp-news-list .news-list-box .list-box .date .news-mon-year { color: #ccc; font-size: 1.2vw;}
  .hp-news-list .news-list-box .list-box .text { width: calc(100% - 12vw); padding: 0.6vw 1vw 0 1vw; box-sizing: border-box;}
  .hp-news-list .news-list-box .list-box .text span.title { color: #000; font-size: 2vw; font-weight: 600; line-height: 2.2vw;}
  .hp-news-list .news-list-box .list-box .text span.intro { color: #E6E6E6; font-size: 1.2vw;}
  .hp-news-list .news-list-box .list-box .link { width: 6vw;}
  .hp-news-list .news-list-box .list-box .link img { width: 3vw; height: auto; margin: 0.8vw auto 0 auto;}


  /************ section#hp-cases ************/

  section#hp-cases { clear: both; width: 100%; position: relative; z-index: 9;}

  .hp-cases-red-block { width: 24vw; height: 12vw; display: block; background-color: #C1272D; position: absolute; top: 0; left: 0; z-index: 2;}

  .hp-cases-title { width: 28vw; position: absolute; top: 6.2vw; left: 13vw; z-index: 3;}
  .hp-cases-title .en-title { width: 100%; color: #fff; font-size: 4.6vw; font-weight: 300; line-height: 6vw;}
  .hp-cases-title .en-title-s { width: 76%; color: #808080; font-size: 0.7vw; font-weight: 300;}
  .hp-cases-title .cn-title { width: 100%; color: #366B9D; font-size: 2.4vw; font-weight: 900;}

  .hp-cases-content { width: 100%; padding: 5vw 0 0 0; display: flex; justify-content: flex-end; align-items: stretch; position: relative; z-index: 1;}
  .hp-cases-content .column-lf { width: 31vw; padding: 15vw 0 2vw 4vw; background-color: #F2F2F2; box-sizing: border-box;}
  .hp-cases-content .column-lf ul.cases-tab { width: 20vw; padding: 0; margin: 0; list-style: none; display: block;}
  .hp-cases-content .column-lf ul.cases-tab li { width: 100%; padding: 0; margin: 0 0 1.6vw 0; position: relative;}
  .hp-cases-content .column-lf ul.cases-tab li .point { width: 3vw; height: 0.7vw; background-color: #bbb; display: none; position: absolute; top: 1.5vw; right: -7vw;}
  .hp-cases-content .column-lf ul.cases-tab li a { width: 100%; color: #07254F; font-size: 1.6vw; font-weight: 500; line-height: 1.8vw; text-decoration: none; display: block;}
  .hp-cases-content .column-lf ul.cases-tab li a:hover { color: #366B9D;}
  .hp-cases-content .column-lf ul.cases-tab li.sel a { color: #366B9D; background-color: rgba(255,255,255,0.7);}
  .hp-cases-content .column-lf ul.cases-tab li.sel .point { display: block;}
  .hp-cases-content .column-rt { width: 59vw; padding: 6vw 4vw 2vw 4vw; background-image: url("../images/hp_cases_bg_rt.jpg"); background-repeat: no-repeat; background-size: cover; background-position: left top; box-sizing: border-box;}
  .hp-cases-content .column-rt .cases-list-rt { width: 42vw;}
  .hp-cases-content .column-rt .cases-list-rt > div { display: none;}
  .hp-cases-content .column-rt .cases-list-rt ul.case-list { padding: 0; margin: 0 0 1.5vw 0; color: #000; font-size: 1.3vw; line-height: 2.2vw; list-style: disc; display: block;}
  .hp-cases-content .column-rt .cases-list-rt ul.case-list li { padding: 0; margin: 0;}
  .hp-cases-content .column-rt .cases-list-rt ul.case-list li a { color: #000; text-decoration: none;}
  .hp-cases-content .column-rt .cases-list-rt ul.case-list li a:hover { border-bottom: 1px #000 dashed;}
  .hp-cases-content .column-rt .cases-list-rt img.case-pic { width: 23vw; height: auto;}

  .hp-cases-more-bt { width: 5vw; position: absolute; bottom: 0; right: 11vw; z-index: 4;}
  .hp-cases-more-bt img { width: 100%; height: auto;}


  /************ section#hp-certification ************/

  section#hp-certification { clear: both; width: 100%; padding: 4vw 12vw 0 12vw; box-sizing: border-box;}

  .hp-certifi-title { width: 100%;}
  .hp-certifi-title .en-title { width: 100%; color: #366B9D; font-size: 4.6vw; font-weight: 300; line-height: 4.6vw; text-align: center;}
  .hp-certifi-title .en-title-s { width: 28%; margin: 0 auto; color: #808080; font-size: 0.7vw; font-weight: 300; text-align: center;}
  .hp-certifi-title .cn-title { width: 100%; color: #366B9D; font-size: 2.4vw; font-weight: 900; text-align: center;}

  .hp-certifi-intro { width: 74%; margin: 0 auto; font-size: 1.3vw; line-height: 2.2vw; text-align: center;}

  .hp-certifi-pics { width: 100%; margin: 2vw 0 0 0; display: flex; justify-content: center; align-items: center;}
  /*.hp-certifi-pics img.certifi-pic { width: 10.5vw; height: auto; margin: 0 0.5vw}*/
  .hp-certifi-pics img.certifi-pic { width: 12vw; height: auto; margin: 0 0.5vw}
  .hp-certifi-pics img.certifi-logos { width: 26vw; height: auto; margin: 0 3vw;}

  .hp-certifi-more-bt { clear: both; width: 5vw; margin: 2vw auto 0 auto;}
  .hp-certifi-more-bt img { width: 100%; height: auto;}


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

  section#page-about { clear: both; width: 100%; padding: 0 14vw 13vw 14vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-end; flex-wrap: wrap; position: relative; z-index: 9;}

  .page-about-title-text { width: 30.5vw; margin: 0 0 3vw 0;}

  .page-about-text { width: 100%; font-size: 1.1vw; font-weight: 500; line-height: 1.8vw;}

  .page-about-photos { width: calc(100% - 30.5vw); margin: 0 0 3vw 0; display: flex; justify-content: flex-end;}
  .page-about-photos img { width: 12vw; height: auto; margin: 0 0 0 1vw;}

  section#page-about-philosophy { clear: both; width: 100%; padding: 8vw 0 6vw 0; background-image: url("../images/page_philosophy_bg.jpg"); background-repeat: no-repeat; background-size: cover; position: relative; z-index: 9;}

  .page-philosophy-content { clear: both; width: 100%; padding: 0 12vw; margin: 6vw 0 0 0; box-sizing: border-box;}
  .page-philosophy-content .title-text { width: 90%; padding: 0 0 0 45%; box-sizing: border-box;}
  .page-philosophy-content .title-text .text { width: 100%; font-size: 1.1vw;}
  .page-philosophy-content .title-text .text span.top { color: #07254F; font-size: 1.6vw; font-weight: 600;}
  .page-philosophy-content .certification-logos { width: 100%; padding: 0 0 0 45%; margin: 1.5vw 0 0 0; box-sizing: border-box;}
  .page-philosophy-content .certification-logos img { width: 31vw; height: auto;}

  section#page-about-feature { clear: both; width: 100%; padding: 5vw 0; position: relative; z-index: 9;}

  img.page-about-feature-bg { width: 100%; height: auto;}

  .about-features-text { clear: both; width: 32vw; position: absolute; top: 4vw; left: 12vw;}
  .about-features-text .features-text { width: 100%; margin: 1vw 0 0 0; font-size: 1.1vw;}
  .about-features-text .features-text span.top { color: #07254F; font-size: 1.6vw; line-height: 1.8vw; font-weight: 600;}

  img.about-sti-logo { width: 5vw; height: auto; position: absolute; bottom: 0; right: -6vw;}


  /************ section#page-service ************/

  section#page-service { clear: both; width: 100%; position: relative; z-index: 9;}

  .page-service-title { clear: both; width: 100%; padding: 0 12vw; margin: 0 0 3vw 0; text-align: center; box-sizing: border-box;}
  .page-service-title .en-title { width: 100%; color: #366B9D; font-size: 4.6vw; font-weight: 300; line-height: 4.6vw;}
  .page-service-title .en-title-s { width: 40%; margin: 0 auto; color: #808080; font-size: 0.7vw; font-weight: 300;}
  .page-service-title .cn-title { width: 100%; color: #366B9D; font-size: 2.4vw; font-weight: 900;}

  .page-service-items { clear: both; width: 100%; padding: 0 12vw; margin: 0 0 4vw 0; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-service-items .item-column { width: calc(50% - 3vw); padding: 2vw; margin: 0 1.5vw; color: #fff; box-sizing: border-box; border-radius: 2vw; background-color: #366B9D; overflow: hidden;}
  .page-service-items .item-column .title { width: 100%; font-size: 1.6vw; font-weight: 600; text-align: center;}
  .page-service-items .item-column .text { width: 100%; margin: 1vw 0; font-size: 1.1vw; line-height: 1.6vw;}

  .page-service-infor { clear: both; width: 100%; padding: 4vw 12vw; box-sizing: border-box; background-image: url("../images/index_service_bg.jpg"); background-repeat: no-repeat; background-size: cover; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-service-infor .photos { width: calc(50% - 2vw); margin: 0 2vw 0 0; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-service-infor .photos img { width: 100%; height: auto;}
  .page-service-infor .title-text { width: calc(50% - 2vw); margin: 0 0 0 2vw;}
  .page-service-infor .title-text .text { width: 100%; margin: 1.5vw 0 0 0; font-size: 1.1vw;}
  .page-service-infor .title-text .text span.top { color: #07254F; font-size: 1.6vw; font-weight: 600;}


  /************ section#page-process ************/

  section#page-process { clear: both; width: 100%; padding: 0 14vw 4vw 14vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; position: relative; z-index: 9;}

  .page-pro-step-text { width: 40vw; margin: 0 2vw 0 0;}
  .page-pro-step-text .process-step { width: 100%; margin: 1vw 0 0 0; font-size: 1.1vw;}
  .page-pro-step-text .process-step span.top { color: #07254F; font-size: 1.6vw; line-height: 1.8vw; font-weight: 600;}

  .page-pro-step-pic { width: calc(100% - 42vw); margin: 5vw 0 0 0; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  .page-pro-step-pic img { width: 13vw; height: auto; margin: 0 0.5vw 2vw 0.5vw;}


  /************ section#page-qanda ************/

  section#page-qanda { clear: both; width: 100%; padding: 0 18vw 5vw 18vw; box-sizing: border-box; position: relative; z-index: 9;}

  .page-qanda-title { clear: both; width: 100%; text-align: center;}
  .page-qanda-title .en-title { width: 100%; color: #366B9D; font-size: 4.6vw; font-weight: 300; line-height: 4.6vw;}
  .page-qanda-title .en-title-s { width: 50%; margin: 0 auto; color: #808080; font-size: 0.7vw; font-weight: 300;}
  .page-qanda-title .cn-title { width: 100%; color: #366B9D; font-size: 2.4vw; font-weight: 900;}
  
  ul.page-qanda-list { width: 100%; padding: 0; margin: 4vw 0 0 0; list-style: none; display: block;}
  ul.page-qanda-list li { padding: 0; margin: 0 0 1vw 0;}
  ul.page-qanda-list li .q-bar { width: 100%; padding: 0.5vw 1vw; color: #fff; font-size: 1.1vw; font-weight: 500; background-color: #366B9D; box-sizing: border-box; display: flex; justify-content: flex-start; cursor: pointer;}
  ul.page-qanda-list li .q-bar:hover { background-color: #07254F;}
  ul.page-qanda-list li .a-bar { width: 100%; padding: 1vw 2vw; margin: 0.3vw 0; font-size: 1vw; line-height: 1.4vw; border: 1px #366B9D solid; box-sizing: border-box; display: none; justify-content: flex-start;}

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

  section#page-news { clear: both; width: 100%; margin: -4.5vw 0 0 0; position: relative; z-index: 8;}

  ul#page-num { clear: both; width: 100%; padding: 0; margin: 4vw 0 0 0; list-style: none; display: flex; justify-content: center; flex-wrap: wrap;}
  ul#page-num li { padding: 0; margin: 0 0.3vw;}
  ul#page-num li a { width: 2vw; height: 2vw; color: #07254F; font-size: 1vw; text-decoration: none; border-radius: 100%; background-color: #fff; display: flex; justify-content: center; align-items: center;}
  ul#page-num li a:hover { color: #fff; background-color: #07254F;}
  ul#page-num li a.sel { background-color: rgba(255,255,255,0.5);}

  .page-news-content { clear: both; width: 100%; padding: 0 12vw 4vw 12vw; box-sizing: border-box; background-color: rgba(54,107,157,0.88); position: relative; z-index: 2;}
  .page-news-content .title-bar { width: 100%; padding: 1vw 0; border-bottom: 1px #fff solid;}
  .page-news-content .title-bar .date { width: 100%; margin: 0 0 0.5vw 0; color: #fff; font-size: 1vw;}
  .page-news-content .title-bar .title { width: 100%; color: #000; font-size: 2vw; font-weight: 600; line-height: 2.2vw;}
  .page-news-content .content-text { width: 100%; padding: 2vw; color: #fff; font-size: 1.2vw; line-height: 1.8vw; box-sizing: border-box;}
  .page-news-content .content-text a { color: #fff; text-decoration: none; border-bottom: 1px #fff dashed;}
  .page-news-content .content-text img { max-width: 100%; height: auto;}

  #goback-bt-w { width: 8vw; margin: 4vw auto 0 auto;}
  #goback-bt-w a { padding: 0.5vw 0; color: #07254F; font-size: 1.1vw; line-height: 1.1vw; font-weight: 500; text-align: center; text-decoration: none; border-radius: 1vw; background-color: #fff; display: block;}
  #goback-bt-w a:hover { background-color: rgba(255,255,255,0.6);}


  /************ section#page-case ************/

  section#page-case { clear: both; width: 100%; margin: -5.6vw 0 0 0; position: relative; z-index: 10;}

  .page-case-sub-title { width: 20vw; color: #07254F; font-size: 1.6vw; font-weight: 500; line-height: 1.8vw;}

  .page-case-sample-title { width: 100%; padding: 0.5vw 0; color: #000; font-size: 1.6vw; font-weight: 500; border-bottom: 1px #000 solid;}

  .page-case-sample-infor { width: 100%; padding: 1vw; font-size: 1.1vw; line-height: 1.6vw; box-sizing: border-box;}

  #goback-bt-b { width: 8vw; margin: 4vw 0 0 0;}
  #goback-bt-b a { padding: 0.5vw 0; color: #fff; font-size: 1.1vw; line-height: 1.1vw; font-weight: 500; text-align: center; text-decoration: none; border-radius: 1vw; background-color: #07254F; display: block;}
  #goback-bt-b a:hover { background-color: #366B9D;}


  /************ section#page-certification ************/

  section#page-certi { clear: both; width: 100; padding: 0 12vw 6vw 12vw; box-sizing: border-box; position: relative; z-index: 9;}

  .page-certi-logos { clear: both; width: 100%; margin: 3vw 0 0 0; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
  .page-certi-logos img { width: auto; height: 5vw; margin: 0 0.5vw;}

  .page-certi-papers { clear: both; width: 100%; margin: 3vw 0 0 0; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
  .page-certi-papers img { width: 14vw; height: auto; margin: 0 0.5vw; -moz-box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5); -webkit-box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5); box-shadow:4px 4px 3px rgba(20%,20%,40%,0.5);}


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

  section#page-contact { clear: both; width: 100%; padding: 0 0 6vw 0; position: relative; z-index: 9;}

  .page-contact-content { clear: both; width: 65vw; margin: 4vw auto 0 auto; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-contact-content .column-lf { width: 30vw;}
  .page-contact-content .column-lf .contact-infor { width: 100%; font-size: 1.2vw; line-height: 2.4vw;}
  .page-contact-content .column-lf .line-code { width: 12vw; margin: 2vw 0 0 0; font-size: 1.1vw; font-weight: 500; text-align: center;}
  .page-contact-content .column-lf .line-code img { width: 100%; height: auto;}
  .page-contact-content .column-rt { width: 35vw;}
  .page-contact-content .column-rt form { width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .page-contact-content .column-rt form .caption { width: 10vw; margin: 0 0 1vw 0; font-size: 1.2vw; font-weight: 600; text-align: right;}
  .page-contact-content .column-rt form .column { width: calc(100% - 10vw); margin: 0 0 1vw 0; color: #07254F; font-size: 1.2vw;}
  .page-contact-content .column-rt form .column input[type=text] { width: 100%; padding: 0.5vw 1vw; color: #07254F; font-size: 1.2vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #07254F solid; box-sizing: border-box;}
  .page-contact-content .column-rt form .column textarea { width: 100%; height: 6vw; padding: 0.5vw 1vw; color: #07254F; font-size: 1.1vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #07254F solid; box-sizing: border-box;}
  .page-contact-content .column-rt form .column img.con-code { width: 10vw; height: auto; margin: 0 0 0.5vw 0;}
  .page-contact-content .column-rt form .column input[type=submit] { padding: 0.5vw 1vw; color: #fff; font-size: 1.1vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #07254F; box-sizing: border-box; cursor: pointer;}


  /************ section#page-sitemap ************/

  section#page-sitemap { clear: both; width: 100; padding: 0 16vw 6vw 16vw; box-sizing: border-box; position: relative; z-index: 9;}

  ul.page-sitemap-list { clear: both; width: 100%; padding: 1vw 0; margin: 4vw 0 0 0; list-style: none; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
  ul.page-sitemap-list li { padding: 0; margin: 0 1vw 2vw 1vw;}
  ul.page-sitemap-list li a { color: #07254F; font-size: 1.3vw; font-weight: 500; text-decoration: none; border-bottom: 4px #07254F solid;}
  ul.page-sitemap-list li a:hover { color: #366B9D; border-bottom: 4px #366B9D solid;}
  ul.page-sitemap-list li ul.popup { padding: 0; margin: 1vw 0 0 0; list-style: none; display: block;}
  ul.page-sitemap-list li ul.popup li { padding: 0; margin: 0 0 0.5vw 0; text-align: center;}
  ul.page-sitemap-list li ul.popup li a { color: #366B9D; font-size: 1.2vw; font-weight: normal; text-decoration: none; border: 0;}
  ul.page-sitemap-list li ul.popup li a:hover { color: #07254F;}


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

  footer { clear: both; width: 100%;}

  .footer-top-infor { width: 100%; padding: 3vw 20vw; background-color: #C1272D; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  .footer-top-infor .footer-logo { width: 50%;}
  .footer-top-infor .footer-logo img { width: 20vw; height: auto; margin: 0 auto;}
  .footer-top-infor .footer-infor { width: 50%; padding: 1vw 0 0 0;}
  .footer-top-infor .footer-infor .infor { width: 20vw; margin: 0 auto; color: #fff; font-size: 1vw; font-weight: 500; line-height: 1.8vw; letter-spacing: 0.1vw;}
  .footer-top-infor .footer-infor .social-icons { width: 20vw; margin: 1vw auto 0 auto; display: flex; justify-content: flex-start; align-items: center;}
  .footer-top-infor .footer-infor .social-icons img { width: 1.5vw; height: auto; margin: 0 0.5vw 0 0;}

  .footer-nav { width: 100%; padding: 2vw 16vw; background-color: #000; box-sizing: border-box;}
  .footer-nav ul.footer-nav { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
  .footer-nav ul.footer-nav li { padding: 0; margin: 0 2.5vw;}
  .footer-nav ul.footer-nav li a { color: #fff; font-size: 1vw; text-align: center; text-decoration: none;}
  .footer-nav ul.footer-nav li a:hover { border-bottom: 1px #fff solid;}
  .footer-nav ul.footer-nav li ul.footer-nav-popup { padding: 0; margin: 0.5vw 0 0 0; list-style: none; display: block;}
  .footer-nav ul.footer-nav li ul.footer-nav-popup li { padding: 0; margin: 0;}
  .footer-nav ul.footer-nav li ul.footer-nav-popup li a { color: 0; font-size: 1vw; line-height: 1.8vw; text-align: center; text-decoration: none;}
  .footer-nav ul.footer-nav li ul.footer-nav-popup li a:hover { border-bottom: 1px #fff solid;}

  .copyright { width: 100%; padding: 0.5vw 0; font-size: 1vw; text-align: center; background-color: #fff;}


}

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

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

  header { width: 100%; position: relative; z-index: 9;}

  img.index-banner { width: 120%; height: auto; margin: 0 0 0 -10%;}
  img.about-banner { width: 120%; height: auto; margin: 0 0 0 -10%;}

  .header-logo-box { width: 11vw; position: absolute; top: 3.5vw; left: 14vw;}
  .header-logo-box img { width: 100%; height: auto;}

  .header-tel-box { width: 20vw; display: flex; justify-content: flex-end; align-items: center; position: absolute; top: 4.5vw; right: 16vw;}
  .header-tel-box .icon { width: 2.5vw; margin: 0 0.5vw 0 0;}
  .header-tel-box .icon img { width: 100%; height: auto;}
  .header-tel-box .tel { width: calc(100% - 3vw); color: #fff; font-size: 1.3vw; font-weight: 500; line-height: 1.3vw;}

  .header-social-icons { width: 5vw; display: flex; justify-content: flex-end; align-items: center; position: absolute; top: 5vw; right: 14vw;}
  .header-social-icons img { width: 1.8vw; height: auto; margin: 0 0 0 0.5vw;}

  nav#mo { display: none;}

  nav#pc { width: calc(100% - 28vw); border-top: 4px rgba(255,255,255,0.4) solid; box-sizing: border-box; position: absolute; top: 8.5vw; left: 14vw;}
  nav#pc ul#nav { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-start; align-items: stretch;}
  nav#pc ul#nav li { width: calc(100% / 6); padding: 0; margin: -4px 0 0 0;}
  nav#pc ul#nav li a { width: calc(100% - 2.5vw); padding: 0.5vw 0 0.5vw 0.5vw; margin: 0 2.5vw 0 0; color: #fff; text-decoration: none; display: block; cursor: pointer;}
  nav#pc ul#nav li a span.cn { font-size: 1.4vw; font-weight: 600; letter-spacing: 0.1vw;}
  nav#pc ul#nav li a span.en { font-size: 1.1vw; font-weight: 300;}
  nav#pc ul#nav li a:hover { background-color: rgba(41,171,226,0.6);}
  nav#pc ul#nav li a.sel { background-color: rgba(41,171,226,0.6);}
  nav#pc ul#nav li ul#nav-popup { width: calc(100% - 2vw); padding: 0; margin: 0; background-color: rgba(41,171,226,0.6); list-style: none; display: none;}
  nav#pc ul#nav li ul#nav-popup li { width: 100%; padding: 0; margin: 0; border-top: 1px #fff solid;}
  nav#pc ul#nav li ul#nav-popup li a { width: 100%; padding: 0.3vw 0.5vw; color: #fff; font-size: 1.4vw; font-weight: 600; letter-spacing: 0.1vw; box-sizing: border-box; display: block;}
  nav#pc ul#nav li ul#nav-popup li a:hover { background-color: rgba(41,171,226,1);}

  img.index-banner-text { width: 30vw; height: auto; position: absolute; top: 21vw; right: 19vw;}
  img.about-banner-text { width: 30vw; height: auto; position: absolute; top: 18vw; right: 14vw;}


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

  section#hp-about { clear: both; width: 100%; padding: 4vw 12vw 13vw 12vw; background-color: #fff; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-end; flex-wrap: wrap; position: relative; z-index: 9;}

  .hp-about-title-text { width: 29vw; margin: 2vw 0 3vw 0;}

  .hp-about-title { width: 28vw;}
  .hp-about-title .en-title { width: 100%; color: #366B9D; font-size: 4.6vw; font-weight: 300; line-height: 4.6vw;}
  .hp-about-title .en-title-s { width: 100%; color: #808080; font-size: 0.7vw; font-weight: 300;}
  .hp-about-title .cn-title { width: 100%; color: #366B9D; font-size: 2.4vw; font-weight: 900;}

  .hp-about-text { width: 100%; margin: 1vw 0 0 0; font-size: 1.1vw; font-weight: 500; line-height: 1.8vw;}

  .hp-about-photos { width: calc(100% - 29vw); margin: 0 0 4vw 0; display: flex; justify-content: flex-end;}
  .hp-about-photos img { width: 11.5vw; height: auto; margin: 0 0 0 1vw;}

  .hp-about-more-bt { width: 8.5vw; position: absolute; top: 4vw; right: 12vw;}
  .hp-about-more-bt img { width: 100%; height: auto;}


  /************ section#hp-service ************/

  section#hp-service { clear: both; width: 100%; padding: 8vw 0; background-image: url("../images/index_service_bg.jpg"); background-repeat: no-repeat; background-size: cover; position: relative; z-index: 9;}

  .hp-service-item { clear: both; width: calc(100% - 20vw); padding: 3vw 2vw; margin: -20.8vw auto 0 auto; box-sizing: border-box; background-color: #fff; display: flex; justify-content: center; align-items: stretch; -moz-box-shadow:2px 2px 6px 2px rgba(20%,20%,40%,0.3); -webkit-box-shadow:2px 2px 6px 2px rgba(20%,20%,40%,0.3); box-shadow:2px 2px 6px 2px rgba(20%,20%,40%,0.3); position: relative; z-index: 9;}
  .hp-service-item .item-box { width: calc(100% / 6);}
  .hp-service-item .item-box .icon { width: 100%; border-right: 1px #ccc solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
  .hp-service-item .item-box .icon img { width: 5vw; height: auto;}
  .hp-service-item .item-box:last-child .icon { border-right: 0;}
  .hp-service-item .item-box .text { width: 100%; padding: 0.5vw 0 0 0; color: #366B9D; font-size: 1vw; text-align: center;}

  .hp-service-red-block { width: 20vw; height: 12vw; display: block; background-color: #C1272D; position: absolute; top: -7vw; left: 0;}

  .hp-service-content { clear: both; width: 100%; padding: 0 10vw; margin: 9vw 0 0 0; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start;}
  .hp-service-content .photos { width: calc(50% - 2vw); margin: 0 2vw 0 0; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .hp-service-content .photos img { width: 100%; height: auto;}
  .hp-service-content .title-text { width: calc(50% - 2vw); margin: 0 0 0 2vw;}
  .hp-service-content .title-text .text { width: 100%; margin: 1.5vw 0 0 0; font-size: 1.1vw;}
  .hp-service-content .title-text .text span.top { color: #07254F; font-size: 1.6vw; font-weight: 600;}
  
  .hp-service-title { width: 28vw;}
  .hp-service-title .en-title { width: 100%; color: #366B9D; font-size: 4.6vw; font-weight: 300; line-height: 4.6vw;}
  .hp-service-title .en-title-s { width: 100%; color: #808080; font-size: 0.7vw; font-weight: 300;}
  .hp-service-title .cn-title { width: 100%; color: #366B9D; font-size: 2.4vw; font-weight: 900;}

  .hp-service-more-bt { width: 5vw; position: absolute; bottom: 0; right: 12vw;}
  .hp-service-more-bt img { width: 100%; height: auto;}


  /************ section#hp-news ************/

  section#hp-news { clear: both; width: 100%; position: relative; z-index: 9;}

  .hp-news-top { width: 100%; padding: 4vw 10vw; background-color: #366B9D; box-sizing: border-box; position: relative; z-index: 1;}

  .hp-news-title { width: 28vw;}
  .hp-news-title .en-title { width: 100%; color: #fff; font-size: 4.6vw; font-weight: 300; line-height: 4.6vw;}
  .hp-news-title .en-title-s { width: 100%; color: #fff; font-size: 0.7vw; font-weight: 300;}
  .hp-news-title .cn-title { width: 100%; color: #fff; font-size: 2.4vw; font-weight: 900;}

  .hp-news-more-bt { width: 8.5vw; position: absolute; bottom: 2.5vw; right: 12vw;}
  .hp-news-more-bt img { width: 100%; height: auto;}

  .hp-news-list { clear: both; width: 100%; padding: 0 10vw 4vw 10vw; box-sizing: border-box; background-color: rgba(54,107,157,0.88); position: relative; z-index: 2;}
  .hp-news-list .news-list-box { width: 100%; margin: -2px 0 0 0; border-top: 5px #2b1b2c solid;}
  .hp-news-list .news-list-box .list-box { width: 100%; padding: 1.5vw 0; border-bottom: 1px #fff solid; display: flex; justify-content: flex-start; align-items: flex-start;}
  .hp-news-list .news-list-box .list-box .date { width: 6vw; text-align: center;}
  .hp-news-list .news-list-box .list-box .date .news-day { color: #C1272D; font-size: 3.2vw; font-size: 700; line-height: 3vw;}
  .hp-news-list .news-list-box .list-box .date .news-mon-year { color: #ccc; font-size: 1.2vw;}
  .hp-news-list .news-list-box .list-box .text { width: calc(100% - 12vw); padding: 0.6vw 1vw 0 1vw; box-sizing: border-box;}
  .hp-news-list .news-list-box .list-box .text span.title { color: #000; font-size: 2vw; font-weight: 600; line-height: 2.2vw;}
  .hp-news-list .news-list-box .list-box .text span.intro { color: #E6E6E6; font-size: 1.2vw;}
  .hp-news-list .news-list-box .list-box .link { width: 6vw;}
  .hp-news-list .news-list-box .list-box .link img { width: 3vw; height: auto; margin: 0.8vw auto 0 auto;}


  /************ section#hp-cases ************/

  section#hp-cases { clear: both; width: 100%; position: relative; z-index: 9;}

  .hp-cases-red-block { width: 24vw; height: 12vw; display: block; background-color: #C1272D; position: absolute; top: 0; left: 0; z-index: 2;}

  .hp-cases-content { width: 100%; padding: 5vw 0 0 0; display: flex; justify-content: flex-end; align-items: stretch; position: relative; z-index: 1;}
  .hp-cases-content .column-lf { width: 31vw; padding: 16vw 0 2vw 4vw; background-color: #F2F2F2; box-sizing: border-box;}
  .hp-cases-content .column-lf ul.cases-tab { width: 20vw; padding: 0; margin: 0; list-style: none; display: block;}
  .hp-cases-content .column-lf ul.cases-tab li { width: 100%; padding: 0; margin: 0 0 1.6vw 0; position: relative;}
  .hp-cases-content .column-lf ul.cases-tab li .point { width: 3vw; height: 0.7vw; background-color: #bbb; display: none; position: absolute; top: 1.5vw; right: -7vw;}
  .hp-cases-content .column-lf ul.cases-tab li a { width: 100%; color: #07254F; font-size: 1.6vw; font-weight: 500; line-height: 1.8vw; text-decoration: none; display: block;}
  .hp-cases-content .column-lf ul.cases-tab li a:hover { color: #366B9D;}
  .hp-cases-content .column-lf ul.cases-tab li.sel a { color: #366B9D; background-color: rgba(255,255,255,0.7);}
  .hp-cases-content .column-lf ul.cases-tab li.sel .point { display: block;}
  .hp-cases-content .column-rt { width: 59vw; padding: 6vw 4vw 2vw 4vw; background-image: url("../images/hp_cases_bg_rt.jpg"); background-repeat: no-repeat; background-size: cover; background-position: left top; box-sizing: border-box;}
  .hp-cases-content .column-rt .cases-list-rt { width: 42vw;}
  .hp-cases-content .column-rt .cases-list-rt > div { display: none;}
  .hp-cases-content .column-rt .cases-list-rt ul.case-list { padding: 0; margin: 0 0 1.5vw 0; color: #000; font-size: 1.3vw; line-height: 2.2vw; list-style: disc; display: block;}
  .hp-cases-content .column-rt .cases-list-rt ul.case-list li { padding: 0; margin: 0;}
  .hp-cases-content .column-rt .cases-list-rt ul.case-list li a { color: #000; text-decoration: none;}
  .hp-cases-content .column-rt .cases-list-rt ul.case-list li a:hover { border-bottom: 1px #000 dashed;}
  .hp-cases-content .column-rt .cases-list-rt img.case-pic { width: 23vw; height: auto;}

  .hp-cases-title { width: 24vw; position: absolute; top: 6.2vw; left: 13vw; z-index: 3;}
  .hp-cases-title .en-title { width: 100%; color: #fff; font-size: 4.6vw; font-weight: 300; line-height: 6vw;}
  .hp-cases-title .en-title-s { width: 100%; color: #808080; font-size: 0.7vw; font-weight: 300;}
  .hp-cases-title .cn-title { width: 100%; color: #366B9D; font-size: 2.4vw; font-weight: 900;}

  .hp-cases-more-bt { width: 5vw; position: absolute; bottom: 0; right: 11vw; z-index: 4;}
  .hp-cases-more-bt img { width: 100%; height: auto;}


  /************ section#hp-certification ************/

  section#hp-certification { clear: both; width: 100%; padding: 4vw 10vw 0 10vw; box-sizing: border-box;}

  .hp-certifi-title { width: 100%;}
  .hp-certifi-title .en-title { width: 100%; color: #366B9D; font-size: 4.6vw; font-weight: 300; line-height: 4.6vw; text-align: center;}
  .hp-certifi-title .en-title-s { width: 36%; margin: 0 auto; color: #808080; font-size: 0.7vw; font-weight: 300; text-align: center;}
  .hp-certifi-title .cn-title { width: 100%; color: #366B9D; font-size: 2.4vw; font-weight: 900; text-align: center;}

  .hp-certifi-intro { width: 74%; margin: 0 auto; font-size: 1.3vw; line-height: 2.2vw; text-align: center;}

  .hp-certifi-pics { width: 100%; margin: 2vw 0 0 0; display: flex; justify-content: center; align-items: center;}
  /*.hp-certifi-pics img.certifi-pic { width: 10.5vw; height: auto; margin: 0 0.5vw}*/
  .hp-certifi-pics img.certifi-pic { width: 12vw; height: auto; margin: 0 0.5vw}
  .hp-certifi-pics img.certifi-logos { width: 26vw; height: auto; margin: 0 3vw;}

  .hp-certifi-more-bt { clear: both; width: 5vw; margin: 2vw auto 0 auto;}
  .hp-certifi-more-bt img { width: 100%; height: auto;}


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

  section#page-about { clear: both; width: 100%; padding: 0 12vw 13vw 12vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-end; flex-wrap: wrap; position: relative; z-index: 9;}

  .page-about-title-text { width: 30.5vw; margin: 0 0 3vw 0;}

  .page-about-text { width: 100%; font-size: 1.1vw; font-weight: 500; line-height: 1.8vw;}

  .page-about-photos { width: calc(100% - 30.5vw); margin: 0 0 3vw 0; display: flex; justify-content: flex-end;}
  .page-about-photos img { width: 12vw; height: auto; margin: 0 0 0 1vw;}

  section#page-about-philosophy { clear: both; width: 100%; padding: 8vw 0 6vw 0; background-image: url("../images/page_philosophy_bg.jpg"); background-repeat: no-repeat; background-size: cover; position: relative; z-index: 9;}

  .page-philosophy-content { clear: both; width: 100%; padding: 0 12vw; margin: 6vw 0 0 0; box-sizing: border-box;}
  .page-philosophy-content .title-text { width: 90%; padding: 0 0 0 45%; box-sizing: border-box;}
  .page-philosophy-content .title-text .text { width: 100%; font-size: 1.1vw;}
  .page-philosophy-content .title-text .text span.top { color: #07254F; font-size: 1.6vw; font-weight: 600;}
  .page-philosophy-content .certification-logos { width: 100%; padding: 0 0 0 45%; margin: 1.5vw 0 0 0; box-sizing: border-box;}
  .page-philosophy-content .certification-logos img { width: 31vw; height: auto;}

  section#page-about-feature { clear: both; width: 100%; padding: 5vw 0; position: relative; z-index: 9;}

  img.page-about-feature-bg { width: 100%; height: auto;}

  .about-features-text { clear: both; width: 32vw; position: absolute; top: 4vw; left: 12vw;}
  .about-features-text .features-text { width: 100%; margin: 1vw 0 0 0; font-size: 1.1vw;}
  .about-features-text .features-text span.top { color: #07254F; font-size: 1.6vw; line-height: 1.8vw; font-weight: 600;}

  img.about-sti-logo { width: 5vw; height: auto; position: absolute; bottom: 0; right: -6vw;}


  /************ section#page-service ************/

  section#page-service { clear: both; width: 100%; position: relative; z-index: 9;}

  .page-service-title { clear: both; width: 100%; padding: 0 12vw; margin: 0 0 3vw 0; text-align: center; box-sizing: border-box;}
  .page-service-title .en-title { width: 100%; color: #366B9D; font-size: 4.6vw; font-weight: 300; line-height: 4.6vw;}
  .page-service-title .en-title-s { width: 40%; margin: 0 auto; color: #808080; font-size: 0.7vw; font-weight: 300;}
  .page-service-title .cn-title { width: 100%; color: #366B9D; font-size: 2.4vw; font-weight: 900;}

  .page-service-items { clear: both; width: 100%; padding: 0 12vw; margin: 0 0 4vw 0; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-service-items .item-column { width: calc(50% - 3vw); padding: 2vw; margin: 0 1.5vw; color: #fff; box-sizing: border-box; border-radius: 2vw; background-color: #366B9D; overflow: hidden;}
  .page-service-items .item-column .title { width: 100%; font-size: 1.6vw; font-weight: 600; text-align: center;}
  .page-service-items .item-column .text { width: 100%; margin: 1vw 0; font-size: 1.1vw; line-height: 1.6vw;}

  .page-service-infor { clear: both; width: 100%; padding: 4vw 12vw; box-sizing: border-box; background-image: url("../images/index_service_bg.jpg"); background-repeat: no-repeat; background-size: cover; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-service-infor .photos { width: calc(50% - 2vw); margin: 0 2vw 0 0; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-service-infor .photos img { width: 100%; height: auto;}
  .page-service-infor .title-text { width: calc(50% - 2vw); margin: 0 0 0 2vw;}
  .page-service-infor .title-text .text { width: 100%; margin: 1.5vw 0 0 0; font-size: 1.1vw;}
  .page-service-infor .title-text .text span.top { color: #07254F; font-size: 1.6vw; font-weight: 600;}


  /************ section#page-process ************/

  section#page-process { clear: both; width: 100%; padding: 0 14vw 4vw 14vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; position: relative; z-index: 9;}

  .page-pro-step-text { width: 40vw; margin: 0 2vw 0 0;}
  .page-pro-step-text .process-step { width: 100%; margin: 1vw 0 0 0; font-size: 1.1vw;}
  .page-pro-step-text .process-step span.top { color: #07254F; font-size: 1.6vw; line-height: 1.8vw; font-weight: 600;}

  .page-pro-step-pic { width: calc(100% - 42vw); margin: 5vw 0 0 0; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  .page-pro-step-pic img { width: 13vw; height: auto; margin: 0 0.5vw 2vw 0.5vw;}


  /************ section#page-qanda ************/

  section#page-qanda { clear: both; width: 100%; padding: 0 16vw 5vw 16vw; box-sizing: border-box; position: relative; z-index: 9;}

  .page-qanda-title { clear: both; width: 100%; text-align: center;}
  .page-qanda-title .en-title { width: 100%; color: #366B9D; font-size: 4.6vw; font-weight: 300; line-height: 4.6vw;}
  .page-qanda-title .en-title-s { width: 50%; margin: 0 auto; color: #808080; font-size: 0.7vw; font-weight: 300;}
  .page-qanda-title .cn-title { width: 100%; color: #366B9D; font-size: 2.4vw; font-weight: 900;}
  
  ul.page-qanda-list { width: 100%; padding: 0; margin: 4vw 0 0 0; list-style: none; display: block;}
  ul.page-qanda-list li { padding: 0; margin: 0 0 1vw 0;}
  ul.page-qanda-list li .q-bar { width: 100%; padding: 0.5vw 1vw; color: #fff; font-size: 1.4vw; font-weight: 500; background-color: #366B9D; box-sizing: border-box; display: flex; justify-content: flex-start; cursor: pointer;}
  ul.page-qanda-list li .q-bar:hover { background-color: #07254F;}
  ul.page-qanda-list li .a-bar { width: 100%; padding: 1vw 2vw; margin: 0.3vw 0; font-size: 1.3vw; line-height: 1.7vw; border: 1px #366B9D solid; box-sizing: border-box; display: none; justify-content: flex-start;}


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

  section#page-news { clear: both; width: 100%; margin: -4.5vw 0 0 0; position: relative; z-index: 8;}

  ul#page-num { clear: both; width: 100%; padding: 0; margin: 4vw 0 0 0; list-style: none; display: flex; justify-content: center; flex-wrap: wrap;}
  ul#page-num li { padding: 0; margin: 0 0.3vw;}
  ul#page-num li a { width: 2vw; height: 2vw; color: #07254F; font-size: 1vw; text-decoration: none; border-radius: 100%; background-color: #fff; display: flex; justify-content: center; align-items: center;}
  ul#page-num li a:hover { color: #fff; background-color: #07254F;}
  ul#page-num li a.sel { background-color: rgba(255,255,255,0.5);}

  .page-news-content { clear: both; width: 100%; padding: 0 10vw 4vw 10vw; box-sizing: border-box; background-color: rgba(54,107,157,0.88); position: relative; z-index: 2;}
  .page-news-content .title-bar { width: 100%; padding: 1vw 0; border-bottom: 1px #fff solid;}
  .page-news-content .title-bar .date { width: 100%; margin: 0 0 0.5vw 0; color: #fff; font-size: 1vw;}
  .page-news-content .title-bar .title { width: 100%; color: #000; font-size: 2vw; font-weight: 600; line-height: 2.2vw;}
  .page-news-content .content-text { width: 100%; padding: 2vw; color: #fff; font-size: 1.2vw; line-height: 1.8vw; box-sizing: border-box;}
  .page-news-content .content-text a { color: #fff; text-decoration: none; border-bottom: 1px #fff dashed;}
  .page-news-content .content-text img { max-width: 100%; height: auto;}

  #goback-bt-w { width: 8vw; margin: 4vw auto 0 auto;}
  #goback-bt-w a { padding: 0.5vw 0; color: #07254F; font-size: 1.1vw; line-height: 1.1vw; font-weight: 500; text-align: center; text-decoration: none; border-radius: 1vw; background-color: #fff; display: block;}
  #goback-bt-w a:hover { background-color: rgba(255,255,255,0.6);}


  /************ section#page-case ************/

  section#page-case { clear: both; width: 100%; margin: -6.7vw 0 0 0; position: relative; z-index: 10;}

  .page-case-sub-title { width: 20vw; color: #07254F; font-size: 1.6vw; font-weight: 500; line-height: 1.8vw;}

  .page-case-sample-title { width: 100%; padding: 0.5vw 0; color: #000; font-size: 1.6vw; font-weight: 500; border-bottom: 1px #000 solid;}

  .page-case-sample-infor { width: 100%; padding: 1vw; font-size: 1.1vw; line-height: 1.6vw; box-sizing: border-box;}

  #goback-bt-b { width: 8vw; margin: 4vw 0 0 0;}
  #goback-bt-b a { padding: 0.5vw 0; color: #fff; font-size: 1.1vw; line-height: 1.1vw; font-weight: 500; text-align: center; text-decoration: none; border-radius: 1vw; background-color: #07254F; display: block;}
  #goback-bt-b a:hover { background-color: #366B9D;}


  /************ section#page-certification ************/

  section#page-certi { clear: both; width: 100; padding: 0 12vw 6vw 12vw; box-sizing: border-box; position: relative; z-index: 9;}

  .page-certi-logos { clear: both; width: 100%; margin: 3vw 0 0 0; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
  .page-certi-logos img { width: auto; height: 5vw; margin: 0 0.5vw;}

  .page-certi-papers { clear: both; width: 100%; margin: 3vw 0 0 0; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
  .page-certi-papers img { width: 14vw; height: auto; margin: 0 0.5vw;}


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

  section#page-contact { clear: both; width: 100%; padding: 0 0 6vw 0; position: relative; z-index: 9;}

  .page-contact-content { clear: both; width: 65vw; margin: 4vw auto 0 auto; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-contact-content .column-lf { width: 30vw;}
  .page-contact-content .column-lf .contact-infor { width: 100%; font-size: 1.2vw; line-height: 2.4vw;}
  .page-contact-content .column-lf .line-code { width: 12vw; margin: 2vw 0 0 0; font-size: 1.1vw; font-weight: 500; text-align: center;}
  .page-contact-content .column-lf .line-code img { width: 100%; height: auto;}
  .page-contact-content .column-rt { width: 35vw;}
  .page-contact-content .column-rt form { width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .page-contact-content .column-rt form .caption { width: 10vw; margin: 0 0 1vw 0; font-size: 1.2vw; font-weight: 600; text-align: right;}
  .page-contact-content .column-rt form .column { width: calc(100% - 10vw); margin: 0 0 1vw 0; color: #07254F; font-size: 1.2vw;}
  .page-contact-content .column-rt form .column input[type=text] { width: 100%; padding: 0.5vw 1vw; color: #07254F; font-size: 1.2vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #07254F solid; box-sizing: border-box;}
  .page-contact-content .column-rt form .column textarea { width: 100%; height: 6vw; padding: 0.5vw 1vw; color: #07254F; font-size: 1.1vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #07254F solid; box-sizing: border-box;}
  .page-contact-content .column-rt form .column img.con-code { width: 10vw; height: auto; margin: 0 0 0.5vw 0;}
  .page-contact-content .column-rt form .column input[type=submit] { padding: 0.5vw 1vw; color: #fff; font-size: 1.1vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #07254F; box-sizing: border-box; cursor: pointer;}


  /************ section#page-sitemap ************/

  section#page-sitemap { clear: both; width: 100; padding: 0 10vw 6vw 10vw; box-sizing: border-box; position: relative; z-index: 9;}

  ul.page-sitemap-list { clear: both; width: 100%; padding: 1vw 0; margin: 4vw 0 0 0; list-style: none; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
  ul.page-sitemap-list li { padding: 0; margin: 0 2vw 3vw 2vw;}
  ul.page-sitemap-list li a { color: #07254F; font-size: 1.8vw; font-weight: 500; text-decoration: none; border-bottom: 4px #07254F solid;}
  ul.page-sitemap-list li a:hover { color: #366B9D; border-bottom: 4px #366B9D solid;}
  ul.page-sitemap-list li ul.popup { padding: 0; margin: 1.5vw 0 0 0; list-style: none; display: block;}
  ul.page-sitemap-list li ul.popup li { padding: 0; margin: 0 0 0.8vw 0; text-align: center;}
  ul.page-sitemap-list li ul.popup li a { color: #366B9D; font-size: 1.7vw; font-weight: normal; text-decoration: none; border: 0;}
  ul.page-sitemap-list li ul.popup li a:hover { color: #07254F;}


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

  footer { clear: both; width: 100%;}

  .footer-top-infor { width: 100%; padding: 3vw 20vw; background-color: #C1272D; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  .footer-top-infor .footer-logo { width: 50%;}
  .footer-top-infor .footer-logo img { width: 20vw; height: auto; margin: 0 auto;}
  .footer-top-infor .footer-infor { width: 50%; padding: 1vw 0 0 0;}
  .footer-top-infor .footer-infor .infor { width: 24vw; margin: 0 auto; color: #fff; font-size: 1.2vw; font-weight: 500; line-height: 2vw; letter-spacing: 0.1vw;}
  .footer-top-infor .footer-infor .social-icons { width: 24vw; margin: 1vw auto 0 auto; display: flex; justify-content: flex-start; align-items: center;}
  .footer-top-infor .footer-infor .social-icons img { width: 1.8vw; height: auto; margin: 0 0.5vw 0 0;}

  .footer-nav { width: 100%; padding: 2vw 16vw; background-color: #000; box-sizing: border-box;}
  .footer-nav ul.footer-nav { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
  .footer-nav ul.footer-nav li { padding: 0; margin: 0 2.5vw;}
  .footer-nav ul.footer-nav li a { color: #fff; font-size: 1vw; text-align: center; text-decoration: none;}
  .footer-nav ul.footer-nav li a:hover { border-bottom: 1px #fff solid;}
  .footer-nav ul.footer-nav li ul.footer-nav-popup { padding: 0; margin: 0.5vw 0 0 0; list-style: none; display: block;}
  .footer-nav ul.footer-nav li ul.footer-nav-popup li { padding: 0; margin: 0;}
  .footer-nav ul.footer-nav li ul.footer-nav-popup li a { color: 0; font-size: 1vw; line-height: 1.8vw; text-align: center; text-decoration: none;}
  .footer-nav ul.footer-nav li ul.footer-nav-popup li a:hover { border-bottom: 1px #fff solid;}

  .copyright { width: 100%; padding: 0.5vw 0; font-size: 1vw; text-align: center; background-color: #fff;}
  

}

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

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

  header { width: 100%; position: relative;}

  img.index-banner { width: 140%; height: auto; margin: 0 0 0 -20%;}
  img.about-banner { width: 140%; height: auto; margin: 0 0 0 -20%;}

  .header-logo-box { width: 14vw; position: absolute; top: 5vw; left: 10vw;}
  .header-logo-box img { width: 100%; height: auto;}

  .header-tel-box { width: 29vw; display: flex; justify-content: flex-end; align-items: center; position: absolute; top: 6.5vw; right: 8vw;}
  .header-tel-box .icon { width: 4vw; margin: 0 1vw 0 0;}
  .header-tel-box .icon img { width: 100%; height: auto;}
  .header-tel-box .tel { width: calc(100% - 3vw); color: #fff; font-size: 1.6vw; font-weight: 500; line-height: 1.8vw;}

  .header-social-icons { width: 12vw; display: flex; justify-content: flex-end; align-items: center; position: absolute; top: 7vw; right: 10vw;}
  .header-social-icons img { width: 2.6vw; height: auto; margin: 0 0 0 0.8vw;}

  nav#pc { display: none;}

  nav#mo { width: calc(100% - 20vw); border-top: 4px rgba(255,255,255,0.4) solid; box-sizing: border-box; position: absolute; top: 12vw; left: 10vw;}
  nav#mo .nav-icon-open { width: 3vw; margin: 0 auto; color: #fff; font-size: 2.4em; text-align: center;}
  nav#mo ul#nav { width: 100%; padding: 3vw; margin: -4px 0 0 0; background-color: rgba(41,171,226,0.8); box-sizing: border-box; list-style: none; display: none; position: absolute; top: 0; left: 0; z-index: 99;}
  nav#mo ul#nav .nav-icon-close { width: 3vw; margin: 0 auto; color: #fff; font-size: 2.4em; text-align: center;}
  nav#mo ul#nav li { width: 100%; padding: 0; margin: 0;}
  nav#mo ul#nav li a { width: 100%; padding: 3vw 0; color: #fff; text-align: center; text-decoration: none; display: block; cursor: pointer;}
  nav#mo ul#nav li a span.cn { font-size: 2.4vw; font-weight: 600; letter-spacing: 0.1vw;}
  nav#mo ul#nav li a span.en { font-size: 2.1vw; font-weight: 300;}
  nav#mo ul#nav li a:hover { background-color: rgba(41,171,226,1);}
  nav#mo ul#nav li a.sel { background-color: rgba(41,171,226,1);}
  nav#mo ul#nav li ul#nav-popup { width: 100%; padding: 0; margin: 0; background-color: rgba(41,171,226,1); list-style: none; display: none;}
  nav#mo ul#nav li ul#nav-popup li { width: 100%; padding: 0; margin: 0; border-top: 1px #fff solid;}
  nav#mo ul#nav li ul#nav-popup li a { width: 100%; padding: 3vw; color: #fff; font-size: 2.4vw; font-weight: 600; letter-spacing: 0.1vw; box-sizing: border-box; display: block;}
  nav#mo ul#nav li ul#nav-popup li a:hover { background-color: rgba(41,171,226,1);}

  img.index-banner-text { width: 36vw; height: auto; position: absolute; top: 28vw; right: 12vw;}
  img.about-banner-text { width: 36vw; height: auto; position: absolute; top: 24vw; right: 10vw;}


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

  section#hp-about { clear: both; width: 100%; padding: 4vw 8vw 13vw 8vw; background-color: #fff; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-end; flex-wrap: wrap; position: relative; z-index: 9;}

  .hp-about-title-text { width: 34vw; margin: 2vw 0 3vw 0;}

  .hp-about-title { width: 34vw;}
  .hp-about-title .en-title { width: 100%; color: #366B9D; font-size: 5.6vw; font-weight: 300; line-height: 4.6vw;}
  .hp-about-title .en-title-s { width: 100%; padding: 1vw 0 0 0; color: #808080; font-size: 1.4vw; font-weight: 300; line-height: 1.4vw;}
  .hp-about-title .cn-title { width: 100%; color: #366B9D; font-size: 3.4vw; font-weight: 900;}

  .hp-about-text { width: 100%; margin: 1vw 0 0 0; font-size: 2.1vw; font-weight: 500; line-height: 2.8vw;}

  .hp-about-photos { width: calc(100% - 34vw); margin: 0 0 4vw 0; display: flex; justify-content: flex-end;}
  .hp-about-photos img { width: 13.5vw; height: auto; margin: 0 0 0 1vw;}

  .hp-about-more-bt { width: 13vw; position: absolute; top: 6vw; right: 10vw;}
  .hp-about-more-bt img { width: 100%; height: auto;}


  /************ section#hp-service ************/

  section#hp-service { clear: both; width: 100%; padding: 8vw 0; background-image: url("../images/index_service_bg.jpg"); background-repeat: no-repeat; background-size: 180% auto; background-position: center top; position: relative; z-index: 9;}

  .hp-service-item { clear: both; width: calc(100% - 10vw); padding: 3vw 2vw; margin: -20.8vw auto 0 auto; box-sizing: border-box; background-color: #fff; display: flex; justify-content: center; align-items: stretch; -moz-box-shadow:2px 2px 6px 2px rgba(20%,20%,40%,0.3); -webkit-box-shadow:2px 2px 6px 2px rgba(20%,20%,40%,0.3); box-shadow:2px 2px 6px 2px rgba(20%,20%,40%,0.3); position: relative; z-index: 9;}
  .hp-service-item .item-box { width: calc(100% / 6);}
  .hp-service-item .item-box .icon { width: 100%; border-right: 1px #ccc solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
  .hp-service-item .item-box .icon img { width: 6vw; height: auto;}
  .hp-service-item .item-box:last-child .icon { border-right: 0;}
  .hp-service-item .item-box .text { width: 100%; padding: 0.5vw 0 0 0; color: #366B9D; font-size: 1.1vw; text-align: center;}

  .hp-service-red-block { width: 24vw; height: 16vw; display: block; background-color: #C1272D; position: absolute; top: -7vw; left: 0;}

  .hp-service-content { clear: both; width: 100%; padding: 0 8vw; margin: 12vw 0 0 0; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start;}
  .hp-service-content .photos { width: calc(50% - 2vw); margin: 0 2vw 0 0; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .hp-service-content .photos img { width: 100%; height: auto;}
  .hp-service-content .title-text { width: calc(50% - 2vw); margin: 0 0 0 2vw;}
  .hp-service-content .title-text .text { width: 100%; margin: 1.5vw 0 0 0; font-size: 2.1vw;}
  .hp-service-content .title-text .text span.top { color: #07254F; font-size: 2.6vw; font-weight: 600;}
  
  .hp-service-title { width: 34vw;}
  .hp-service-title .en-title { width: 100%; color: #366B9D; font-size: 5.6vw; font-weight: 300; line-height: 5.6vw;}
  .hp-service-title .en-title-s { width: 100%; color: #808080; font-size: 1.4vw; font-weight: 300; line-height: 1.4vw;}
  .hp-service-title .cn-title { width: 100%; color: #366B9D; font-size: 3.4vw; font-weight: 900;}

  .hp-service-more-bt { width: 8vw; position: absolute; bottom: 0; right: 8vw;}
  .hp-service-more-bt img { width: 100%; height: auto;}


  /************ section#page-process ************/

  section#page-process { clear: both; width: 100%; padding: 0 8vw 6vw 8vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; position: relative; z-index: 9;}

  .page-pro-step-text { width: 50vw; margin: 0 2vw 0 0;}
  .page-pro-step-text .process-step { width: 100%; margin: 1vw 0 0 0; font-size: 2.1vw;}
  .page-pro-step-text .process-step span.top { color: #07254F; font-size: 2.6vw; line-height: 2.8vw; font-weight: 600;}

  .page-pro-step-pic { width: calc(100% - 52vw); margin: 8vw 0 0 0;}
  .page-pro-step-pic img { width: 18vw; height: auto; margin: 0 0 3vw 0;}


  /************ section#hp-news ************/

  section#hp-news { clear: both; width: 100%; position: relative; z-index: 9;}

  .hp-news-top { width: 100%; padding: 6vw 8vw; background-color: #366B9D; box-sizing: border-box; position: relative; z-index: 1;}

  .hp-news-title { width: 34vw;}
  .hp-news-title .en-title { width: 100%; color: #fff; font-size: 5.6vw; font-weight: 300; line-height: 5.6vw;}
  .hp-news-title .en-title-s { width: 100%; color: #fff; font-size: 1.4vw; font-weight: 300; line-height: 1.4vw;}
  .hp-news-title .cn-title { width: 100%; color: #fff; font-size: 3.4vw; font-weight: 900;}

  .hp-news-more-bt { width: 13vw; position: absolute; bottom: 4vw; right: 8vw;}
  .hp-news-more-bt img { width: 100%; height: auto;}

  .hp-news-list { clear: both; width: 100%; padding: 0 8vw 6vw 8vw; box-sizing: border-box; background-color: rgba(54,107,157,0.88); position: relative; z-index: 2;}
  .hp-news-list .news-list-box { width: 100%; margin: -2px 0 0 0; border-top: 5px #2b1b2c solid;}
  .hp-news-list .news-list-box .list-box { width: 100%; padding: 2.5vw 0; border-bottom: 1px #fff solid; display: flex; justify-content: flex-start; align-items: flex-start;}
  .hp-news-list .news-list-box .list-box .date { width: 10vw; text-align: center;}
  .hp-news-list .news-list-box .list-box .date .news-day { color: #C1272D; font-size: 4.2vw; font-size: 700; line-height: 4vw;}
  .hp-news-list .news-list-box .list-box .date .news-mon-year { color: #ccc; font-size: 2.2vw;}
  .hp-news-list .news-list-box .list-box .text { width: calc(100% - 20vw); padding: 0.6vw 1vw 0 1vw; box-sizing: border-box;}
  .hp-news-list .news-list-box .list-box .text span.title { color: #000; font-size: 3vw; font-weight: 600; line-height: 3.2vw;}
  .hp-news-list .news-list-box .list-box .text span.intro { color: #E6E6E6; font-size: 2.2vw;}
  .hp-news-list .news-list-box .list-box .link { width: 10vw;}
  .hp-news-list .news-list-box .list-box .link img { width: 5vw; height: auto; margin: 1.2vw auto 0 auto;}


  /************ section#hp-cases ************/

  section#hp-cases { clear: both; width: 100%; position: relative; z-index: 9;}

  .hp-cases-red-block { width: 26vw; height: 10vw; display: block; background-color: #C1272D; position: absolute; top: 0; left: 0; z-index: 2;}

  .hp-cases-content { width: 100%; padding: 5vw 0 0 0; display: flex; justify-content: flex-end; align-items: stretch; position: relative; z-index: 1;}
  .hp-cases-content .column-lf { width: 38vw; padding: 17vw 0 2vw 3vw; background-color: #F2F2F2; box-sizing: border-box;}
  .hp-cases-content .column-lf ul.cases-tab { width: 24vw; padding: 0; margin: 0; list-style: none; display: block;}
  .hp-cases-content .column-lf ul.cases-tab li { width: 100%; padding: 0; margin: 0 0 2vw 0; position: relative;}
  .hp-cases-content .column-lf ul.cases-tab li .point { width: 3vw; height: 0.7vw; background-color: #bbb; display: none; position: absolute; top: 1.5vw; right: -11vw;}
  .hp-cases-content .column-lf ul.cases-tab li a { width: 100%; color: #07254F; font-size: 2vw; font-weight: 500; line-height: 2.2vw; text-decoration: none; display: block;}
  .hp-cases-content .column-lf ul.cases-tab li a:hover { color: #366B9D;}
  .hp-cases-content .column-lf ul.cases-tab li.sel a { color: #366B9D; background-color: rgba(255,255,255,0.7);}
  .hp-cases-content .column-lf ul.cases-tab li.sel .point { display: block;}
  .hp-cases-content .column-rt { width: 59vw; padding: 6vw 4vw 4vw 5vw; background-image: url("../images/hp_cases_bg_rt.jpg"); background-repeat: no-repeat; background-size: cover; background-position: left top; box-sizing: border-box;}
  .hp-cases-content .column-rt .cases-list-rt { width: 100%;}
  .hp-cases-content .column-rt .cases-list-rt > div { display: none;}
  .hp-cases-content .column-rt .cases-list-rt ul.case-list { padding: 0; margin: 0 0 1.5vw 0; color: #000; font-size: 1.9vw; line-height: 2.9vw; list-style: disc; display: block;}
  .hp-cases-content .column-rt .cases-list-rt ul.case-list li { padding: 0; margin: 0;}
  .hp-cases-content .column-rt .cases-list-rt ul.case-list li a { color: #000; text-decoration: none;}
  .hp-cases-content .column-rt .cases-list-rt ul.case-list li a:hover { border-bottom: 1px #000 dashed;}
  .hp-cases-content .column-rt .cases-list-rt img.case-pic { width: 27vw; height: auto;}

  .hp-cases-title { width: 34vw; position: absolute; top: 3vw; left: 4vw; z-index: 3;}
  .hp-cases-title .en-title { width: 100%; color: #fff; font-size: 5.6vw; font-weight: 300; line-height: 7.6vw;}
  .hp-cases-title .en-title-s { width: 100%; color: #808080; font-size: 1.4vw; font-weight: 300; line-height: 1.4vw;}
  .hp-cases-title .cn-title { width: 100%; color: #366B9D; font-size: 3.4vw; font-weight: 900;}

  .hp-cases-more-bt { width: 8vw; position: absolute; bottom: 0; right: 8vw; z-index: 4;}
  .hp-cases-more-bt img { width: 100%; height: auto;}


  /************ section#hp-certification ************/

  section#hp-certification { clear: both; width: 100%; padding: 6vw 8vw 0 8vw; box-sizing: border-box;}

  .hp-certifi-title { width: 100%;}
  .hp-certifi-title .en-title { width: 100%; color: #366B9D; font-size: 5.6vw; font-weight: 300; line-height: 6vw; text-align: center;}
  .hp-certifi-title .en-title-s { width: 62%; margin: 0 auto; color: #808080; font-size: 1.4vw; font-weight: 300; line-height: 1.4vw; text-align: center;}
  .hp-certifi-title .cn-title { width: 100%; color: #366B9D; font-size: 3.4vw; font-weight: 900; text-align: center;}

  .hp-certifi-intro { width: 94%; margin: 0 auto; font-size: 2.3vw; line-height: 3.2vw; text-align: center;}

  .hp-certifi-pics { width: 100%; margin: 3vw 0 0 0; display: flex; justify-content: center; align-items: center;}
  /*.hp-certifi-pics img.certifi-pic { width: 13vw; height: auto; margin: 0 1vw}*/
  .hp-certifi-pics img.certifi-pic { width: 16vw; height: auto; margin: 0 1vw}
  .hp-certifi-pics img.certifi-logos { width: 30vw; height: auto; margin: 0 3vw;}

  .hp-certifi-more-bt { clear: both; width: 8vw; margin: 2vw auto 0 auto;}
  .hp-certifi-more-bt img { width: 100%; height: auto;}


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

  section#page-about { clear: both; width: 100%; padding: 0 8vw 13vw 8vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-end; flex-wrap: wrap; position: relative; z-index: 9;}

  .page-about-title-text { width: 45vw; margin: 0 0 3vw 0;}

  .page-about-text { width: 100%; font-size: 2.1vw; font-weight: 500; line-height: 2.8vw;}

  .page-about-photos { width: calc(100% - 45vw); margin: 0 0 3vw 0;}
  .page-about-photos img { width: 14vw; height: auto; margin: 0 0 1vw 14vw;}

  section#page-about-philosophy { clear: both; width: 100%; padding: 8vw 0 6vw 0; background-image: url("../images/page_philosophy_bg.jpg"); background-repeat: no-repeat; background-size: cover; position: relative; z-index: 9;}

  .page-philosophy-content { clear: both; width: 100%; padding: 0 12vw; margin: 6vw 0 0 0; box-sizing: border-box;}
  .page-philosophy-content .title-text { width: 100%; padding: 0 0 0 45%; box-sizing: border-box;}
  .page-philosophy-content .title-text .text { width: 100%; font-size: 2.1vw;}
  .page-philosophy-content .title-text .text span.top { color: #07254F; font-size: 2.6vw; font-weight: 600;}
  .page-philosophy-content .certification-logos { width: 100%; padding: 0 0 0 45%; margin: 1.5vw 0 0 0; box-sizing: border-box;}
  .page-philosophy-content .certification-logos img { width: 36vw; height: auto;}

  section#page-about-feature { clear: both; width: 100%; padding: 5vw 0; position: relative; z-index: 9;}

  img.page-about-feature-bg { width: 190%; height: auto; margin: 0 0 0 -45%;}

  .about-features-text { clear: both; width: 44vw; position: absolute; top: 5vw; left: 4vw;}
  .about-features-text .features-text { width: 100%; margin: 1vw 0 0 0; font-size: 2.1vw;}
  .about-features-text .features-text span.top { color: #07254F; font-size: 2.6vw; line-height: 2.8vw; font-weight: 600;}

  img.about-sti-logo { width: 10vw; height: auto; position: absolute; bottom: 0; right: -3vw;}


  /************ section#page-service ************/

  section#page-service { clear: both; width: 100%; position: relative; z-index: 9;}

  .page-service-title { clear: both; width: 100%; padding: 0 8vw; margin: 0 0 5vw 0; text-align: center; box-sizing: border-box;}
  .page-service-title .en-title { width: 100%; color: #366B9D; font-size: 5.6vw; font-weight: 300; line-height: 7.6vw;}
  .page-service-title .en-title-s { width: 70%; margin: 0 auto; color: #808080; font-size: 1.4vw; font-weight: 300; line-height: 1.4vw;}
  .page-service-title .cn-title { width: 100%; color: #366B9D; font-size: 3.4vw; font-weight: 900;}

  .page-service-items { clear: both; width: 100%; padding: 0 4vw; margin: 0 0 6vw 0; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-service-items .item-column { width: calc(50% - 3vw); padding: 2vw; margin: 0 1.5vw; color: #fff; box-sizing: border-box; border-radius: 2vw; background-color: #366B9D; overflow: hidden;}
  .page-service-items .item-column .title { width: 100%; font-size: 3.6vw; font-weight: 600; text-align: center;}
  .page-service-items .item-column .text { width: 100%; margin: 2vw 0; font-size: 2.1vw; line-height: 2.6vw;}

  .page-service-infor { clear: both; width: 100%; padding: 6vw 4vw; box-sizing: border-box; background-image: url("../images/index_service_bg.jpg"); background-repeat: no-repeat; background-size: cover; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-service-infor .photos { width: calc(50% - 2vw); margin: 0 2vw 0 0; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-service-infor .photos img { width: 100%; height: auto;}
  .page-service-infor .title-text { width: calc(50% - 2vw); margin: 0 0 0 2vw;}
  .page-service-infor .title-text .text { width: 100%; margin: 1.5vw 0 0 0; font-size: 2.1vw;}
  .page-service-infor .title-text .text span.top { color: #07254F; font-size: 2.6vw; font-weight: 600;}


  /************ section#page-qanda ************/

  section#page-qanda { clear: both; width: 100%; padding: 0 8vw 5vw 8vw; box-sizing: border-box; position: relative; z-index: 9;}

  .page-qanda-title { clear: both; width: 100%; text-align: center;}
  .page-qanda-title .en-title { width: 100%; color: #366B9D; font-size: 5.6vw; font-weight: 300; line-height: 7.6vw;}
  .page-qanda-title .en-title-s { width: 70%; margin: 0 auto; color: #808080; font-size: 1.4vw; font-weight: 300; line-height: 1.4vw;}
  .page-qanda-title .cn-title { width: 100%; color: #366B9D; font-size: 3.4vw; font-weight: 900;}
  
  ul.page-qanda-list { width: 100%; padding: 0; margin: 4vw 0 0 0; list-style: none; display: block;}
  ul.page-qanda-list li { padding: 0; margin: 0 0 1.5vw 0;}
  ul.page-qanda-list li .q-bar { width: 100%; padding: 1vw 1.5vw; color: #fff; font-size: 2.1vw; font-weight: 500; background-color: #366B9D; box-sizing: border-box; display: flex; justify-content: flex-start; cursor: pointer;}
  ul.page-qanda-list li .q-bar:hover { background-color: #07254F;}
  ul.page-qanda-list li .a-bar { width: 100%; padding: 1.5vw 2.5vw; margin: 0.8vw 0; font-size: 2vw; line-height: 2.6vw; border: 1px #366B9D solid; box-sizing: border-box; display: none; justify-content: flex-start;}


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

  section#page-news { clear: both; width: 100%; margin: -4vw 0 0 0; position: relative; z-index: 8;}

  ul#page-num { clear: both; width: 100%; padding: 0; margin: 4vw 0 0 0; list-style: none; display: flex; justify-content: center; flex-wrap: wrap;}
  ul#page-num li { padding: 0; margin: 0 0.6vw;}
  ul#page-num li a { width: 4vw; height: 4vw; color: #07254F; font-size: 2.4vw; text-decoration: none; border-radius: 100%; background-color: #fff; display: flex; justify-content: center; align-items: center;}
  ul#page-num li a:hover { color: #fff; background-color: #07254F;}
  ul#page-num li a.sel { background-color: rgba(255,255,255,0.5);}

  .page-news-content { clear: both; width: 100%; padding: 0 8vw 6vw 8vw; box-sizing: border-box; background-color: rgba(54,107,157,0.88); position: relative; z-index: 2;}
  .page-news-content .title-bar { width: 100%; padding: 2vw 0; border-bottom: 1px #fff solid;}
  .page-news-content .title-bar .date { width: 100%; margin: 0 0 1vw 0; color: #fff; font-size: 2.2vw;}
  .page-news-content .title-bar .title { width: 100%; color: #000; font-size: 3vw; font-weight: 600; line-height: 3.2vw;}
  .page-news-content .content-text { width: 100%; padding: 2vw; color: #fff; font-size: 2.2vw; line-height: 3.2vw; box-sizing: border-box;}
  .page-news-content .content-text a { color: #fff; text-decoration: none; border-bottom: 1px #fff dashed;}
  .page-news-content .content-text img { max-width: 100%; height: auto;}

  #goback-bt-w { width: 14vw; margin: 4vw auto 0 auto;}
  #goback-bt-w a { padding: 1vw 0; color: #07254F; font-size: 2.1vw; line-height: 2.1vw; font-weight: 500; text-align: center; text-decoration: none; border-radius: 2vw; background-color: #fff; display: block;}
  #goback-bt-w a:hover { background-color: rgba(255,255,255,0.6);}


  /************ section#page-case ************/

  section#page-case { clear: both; width: 100%; margin: -7.9vw 0 0 0; position: relative; z-index: 10;}

  .page-case-sub-title { width: 24vw; color: #07254F; font-size: 2vw; font-weight: 500; line-height: 2.4vw;}

  .page-case-sample-title { width: 100%; padding: 0.5vw 0; color: #000; font-size: 2.2vw; font-weight: 500; border-bottom: 1px #000 solid;}

  .page-case-sample-infor { width: 100%; padding: 1vw; font-size: 1.8vw; line-height: 2.4vw; box-sizing: border-box;}

  #goback-bt-b { width: 14vw; margin: 4vw 0 0 0;}
  #goback-bt-b a { padding: 1vw 0; color: #fff; font-size: 2.1vw; line-height: 2.1vw; font-weight: 500; text-align: center; text-decoration: none; border-radius: 2vw; background-color: #07254F; display: block;}
  #goback-bt-b a:hover { background-color: #366B9D;}


  /************ section#page-certification ************/

  section#page-certi { clear: both; width: 100; padding: 0 8vw 6vw 8vw; box-sizing: border-box; position: relative; z-index: 9;}

  .page-certi-logos { clear: both; width: 100%; margin: 6vw 0 0 0; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
  .page-certi-logos img { width: auto; height: 7.5vw; margin: 0 1vw 2vw 1vw;}

  .page-certi-papers { clear: both; width: 100%; margin: 3vw 0 0 0; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
  .page-certi-papers img { width: 19vw; height: auto; margin: 0 0.5vw;}

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

  section#page-contact { clear: both; width: 100%; padding: 0 0 6vw 0; position: relative; z-index: 9;}

  .page-contact-content { clear: both; width: 90vw; margin: 4vw auto 0 auto; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-contact-content .column-lf { width: 45vw;}
  .page-contact-content .column-lf .contact-infor { width: 100%; font-size: 2.2vw; line-height: 3.6vw;}
  .page-contact-content .column-lf .line-code { width: 100%; margin: 2vw 0 0 0; font-size: 2vw; font-weight: 500;}
  .page-contact-content .column-lf .line-code img { width: 20vw; height: auto;}
  .page-contact-content .column-rt { width: 45vw;}
  .page-contact-content .column-rt form { width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .page-contact-content .column-rt form .caption { width: 15vw; margin: 0 0 1.5vw 0; font-size: 2.2vw; font-weight: 600; text-align: right;}
  .page-contact-content .column-rt form .column { width: calc(100% - 15vw); margin: 0 0 1.5vw 0; color: #07254F; font-size: 2.2vw;}
  .page-contact-content .column-rt form .column input[type=text] { width: 100%; padding: 0.5vw 1vw; color: #07254F; font-size: 2.2vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #07254F solid; box-sizing: border-box;}
  .page-contact-content .column-rt form .column textarea { width: 100%; height: 6vw; padding: 0.5vw 1vw; color: #07254F; font-size: 2vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #07254F solid; box-sizing: border-box;}
  .page-contact-content .column-rt form .column img.con-code { width: 15vw; height: auto; margin: 0 0 0.5vw 0;}
  .page-contact-content .column-rt form .column input[type=submit] { padding: 0.5vw 1vw; color: #fff; font-size: 2.1vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #07254F; box-sizing: border-box; cursor: pointer;}


  /************ section#page-sitemap ************/

  section#page-sitemap { clear: both; width: 100; padding: 0 8vw 6vw 8vw; box-sizing: border-box; position: relative; z-index: 9;}

  ul.page-sitemap-list { clear: both; width: 100%; padding: 1vw 0; margin: 4vw 0 0 0; list-style: none; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
  ul.page-sitemap-list li { padding: 0; margin: 0 2vw 3vw 2vw;}
  ul.page-sitemap-list li a { color: #07254F; font-size: 2.6vw; font-weight: 500; text-decoration: none; border-bottom: 4px #07254F solid;}
  ul.page-sitemap-list li a:hover { color: #366B9D; border-bottom: 4px #366B9D solid;}
  ul.page-sitemap-list li ul.popup { padding: 0; margin: 1.5vw 0 0 0; list-style: none; display: block;}
  ul.page-sitemap-list li ul.popup li { padding: 0; margin: 0 0 0.8vw 0; text-align: center;}
  ul.page-sitemap-list li ul.popup li a { color: #366B9D; font-size: 2.4vw; font-weight: normal; text-decoration: none; border: 0;}
  ul.page-sitemap-list li ul.popup li a:hover { color: #07254F;}


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

  footer { clear: both; width: 100%;}

  .footer-top-infor { width: 100%; padding: 3vw 14vw; background-color: #C1272D; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  .footer-top-infor .footer-logo { width: 50%;}
  .footer-top-infor .footer-logo img { width: 26vw; height: auto; margin: 0 auto;}
  .footer-top-infor .footer-infor { width: 50%; padding: 2vw 0 0 0;}
  .footer-top-infor .footer-infor .infor { width: 30vw; margin: 0 auto; color: #fff; font-size: 1.4vw; font-weight: 500; line-height: 2.2vw; letter-spacing: 0.1vw;}
  .footer-top-infor .footer-infor .social-icons { width: 30vw; margin: 2vw auto 0 auto; display: flex; justify-content: flex-start; align-items: center;}
  .footer-top-infor .footer-infor .social-icons img { width: 2.6vw; height: auto; margin: 0 0.8vw 0 0;}

  .footer-nav { width: 100%; padding: 4vw; background-color: #000; box-sizing: border-box;}
  .footer-nav ul.footer-nav { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
  .footer-nav ul.footer-nav li { padding: 0; margin: 0 2.5vw;}
  .footer-nav ul.footer-nav li a { color: #fff; font-size: 1.8vw; text-align: center; text-decoration: none;}
  .footer-nav ul.footer-nav li a:hover { border-bottom: 1px #fff solid;}
  .footer-nav ul.footer-nav li ul.footer-nav-popup { padding: 0; margin: 0.5vw 0 0 0; list-style: none; display: block;}
  .footer-nav ul.footer-nav li ul.footer-nav-popup li { padding: 0; margin: 0;}
  .footer-nav ul.footer-nav li ul.footer-nav-popup li a { color: 0; font-size: 1.8vw; line-height: 2.8vw; text-align: center; text-decoration: none;}
  .footer-nav ul.footer-nav li ul.footer-nav-popup li a:hover { border-bottom: 1px #fff solid;}

  .copyright { width: 100%; padding: 1vw 0; font-size: 1.6vw; text-align: center; background-color: #fff;}


}

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

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

  header { width: 100%; position: relative;}

  img.index-banner { width: 200%; height: auto; margin: 0 0 0 -50%;}
  img.about-banner { width: 220%; height: auto; margin: 0 0 0 -80%;}

  .header-logo-box { width: 30vw; position: absolute; top: 8vw; left: 4vw;}
  .header-logo-box img { width: 100%; height: auto;}

  .header-tel-box { width: 50vw; display: flex; justify-content: flex-end; align-items: center; position: absolute; top: 11vw; right: 4vw;}
  .header-tel-box .icon { width: 8vw; margin: 0 2vw 0 0;}
  .header-tel-box .icon img { width: 100%; height: auto;}
  .header-tel-box .tel { width: calc(100% - 10vw); color: #fff; font-size: 3vw; font-weight: 500; line-height: 3.6vw;}

  .header-social-icons { width: 12vw; display: flex; justify-content: flex-end; align-items: center; position: absolute; top: 3vw; right: 10vw;}
  .header-social-icons img { width: 6vw; height: auto; margin: 0 0 0 1vw;}

  nav#pc { display: none;}

  nav#mo { width: calc(100% - 8vw); border-top: 4px rgba(255,255,255,0.4) solid; box-sizing: border-box; position: absolute; top: 22vw; left: 4vw;}
  nav#mo .nav-icon-open { width: 5vw; margin: 0 auto; color: #fff; font-size: 3.4em; text-align: center;}
  nav#mo ul#nav { width: 100%; padding: 3vw; margin: -4px 0 0 0; background-color: rgba(41,171,226,0.8); box-sizing: border-box; list-style: none; display: none; position: absolute; top: 0; left: 0; z-index: 99;}
  nav#mo ul#nav .nav-icon-close { width: 5vw; margin: 0 auto; color: #fff; font-size: 3.4em; text-align: center;}
  nav#mo ul#nav li { width: 100%; padding: 0; margin: 0;}
  nav#mo ul#nav li a { width: 100%; padding: 4vw 0; color: #fff; text-align: center; text-decoration: none; display: block; cursor: pointer;}
  nav#mo ul#nav li a span.cn { font-size: 5.4vw; font-weight: 600; letter-spacing: 0.1vw;}
  nav#mo ul#nav li a span.en { font-size: 5.1vw; font-weight: 300;}
  nav#mo ul#nav li a:hover { background-color: rgba(41,171,226,1);}
  nav#mo ul#nav li a.sel { background-color: rgba(41,171,226,1);}
  nav#mo ul#nav li ul#nav-popup { width: 100%; padding: 0; margin: 0; background-color: rgba(41,171,226,1); list-style: none; display: none;}
  nav#mo ul#nav li ul#nav-popup li { width: 100%; padding: 0; margin: 0; border-top: 1px #fff solid;}
  nav#mo ul#nav li ul#nav-popup li a { width: 100%; padding: 4vw; color: #fff; font-size: 5.4vw; font-weight: 600; letter-spacing: 0.1vw; box-sizing: border-box; display: block;}
  nav#mo ul#nav li ul#nav-popup li a:hover { background-color: rgba(41,171,226,1);}

  img.index-banner-text { width: 48vw; height: auto; position: absolute; top: 50vw; right: 8vw;}
  img.about-banner-text { width: 48vw; height: auto; position: absolute; top: 44vw; right: 4vw;}


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

  section#hp-about { clear: both; width: 100%; padding: 8vw 4vw 24vw 4vw; background-color: #fff; box-sizing: border-box; position: relative; z-index: 9;}

  .hp-about-title-text { width: 100%; margin: 4vw 0 5vw 0;}

  .hp-about-title { width: 100%;}
  .hp-about-title .en-title { width: 100%; color: #366B9D; font-size: 9.6vw; font-weight: 300; line-height: 9.6vw;}
  .hp-about-title .en-title-s { width: 100%; padding: 1vw 0 0 0; margin: 0 auto; color: #808080; font-size: 2.4vw; font-weight: 300; line-height: 2.4vw;}
  .hp-about-title .cn-title { width: 100%; color: #366B9D; font-size: 7.4vw; font-weight: 900;}

  .hp-about-text { width: 100%; margin: 1vw 0 0 0; font-size: 3vw; font-weight: 500; line-height: 3.8vw;}

  .hp-about-photos { width: 100%; margin: 0 0 8vw 0; display: flex; justify-content: center;}
  .hp-about-photos img { width: 20vw; height: auto; margin: 0 1vw;}

  .hp-about-more-bt { width: 24vw; position: absolute; top: 4vw; right: 4vw;}
  .hp-about-more-bt img { width: 100%; height: auto;}


  /************ section#hp-service ************/

  section#hp-service { clear: both; width: 100%; padding: 8vw 0; background-image: url("../images/index_service_bg.jpg"); background-repeat: no-repeat; background-size: 500% auto; background-position: center top; position: relative; z-index: 9;}

  .hp-service-item { clear: both; width: calc(100% - 8vw); padding: 3vw 2vw; margin: -30vw auto 0 auto; box-sizing: border-box; background-color: #fff; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap; -moz-box-shadow:2px 2px 6px 2px rgba(20%,20%,40%,0.3); -webkit-box-shadow:2px 2px 6px 2px rgba(20%,20%,40%,0.3); box-shadow:2px 2px 6px 2px rgba(20%,20%,40%,0.3); position: relative; z-index: 9;}
  .hp-service-item .item-box { width: calc(100% / 3);}
  .hp-service-item .item-box .icon { width: 100%; padding: 1vw 0 0 0; border-right: 1px #ccc solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
  .hp-service-item .item-box:nth-child(3) .icon { border-right: 0;}
  .hp-service-item .item-box .icon img { width: 10vw; height: auto;}
  .hp-service-item .item-box:last-child .icon { border-right: 0;}
  .hp-service-item .item-box .text { width: 100%; padding: 1vw 0; color: #366B9D; font-size: 2vw; text-align: center;}

  .hp-service-red-block { width: 30vw; height: 34vw; display: block; background-color: #C1272D; position: absolute; top: -10vw; left: 0;}

  .hp-service-content { clear: both; width: 100%; padding: 0 4vw; margin: 16vw 0 0 0; box-sizing: border-box;}
  .hp-service-content .photos { width: 100%; margin: 0 0 4vw 0;}
  .hp-service-content .photos img { width: 80%; height: auto; margin: 0 auto;}
  .hp-service-content .title-text { width: 100%;}
  .hp-service-content .title-text .text { width: 100%; margin: 5vw 0 0 0; font-size: 3.6vw;}
  .hp-service-content .title-text .text span.top { color: #07254F; font-size: 5vw; font-weight: 600;}
  
  .hp-service-title { width: 100%;}
  .hp-service-title .en-title { width: 100%; color: #366B9D; font-size: 9.6vw; font-weight: 300; line-height: 9.6vw;}
  .hp-service-title .en-title-s { width: 100%; color: #808080; font-size: 2.4vw; font-weight: 300; line-height: 2.4vw;}
  .hp-service-title .cn-title { width: 100%; color: #366B9D; font-size: 7.4vw; font-weight: 900;}

  .hp-service-more-bt { width: 14vw; position: absolute; bottom: 0; right: 8vw;}
  .hp-service-more-bt img { width: 100%; height: auto;}


  /************ section#hp-news ************/

  section#hp-news { clear: both; width: 100%; position: relative; z-index: 9;}

  .hp-news-top { width: 100%; padding: 8vw 4vw; background-color: #366B9D; box-sizing: border-box; position: relative; z-index: 1;}

  .hp-news-title { width: 100%;}
  .hp-news-title .en-title { width: 100%; color: #fff; font-size: 9.6vw; font-weight: 300; line-height: 9.6vw;}
  .hp-news-title .en-title-s { width: 100%; color: #fff; font-size: 2.4vw; font-weight: 300; line-height: 2.4vw;}
  .hp-news-title .cn-title { width: 100%; color: #fff; font-size: 7.4vw; font-weight: 900;}

  .hp-news-more-bt { width: 24vw; position: absolute; bottom: 2vw; right: 4vw;}
  .hp-news-more-bt img { width: 100%; height: auto;}

  .hp-news-list { clear: both; width: 100%; padding: 0 4vw 8vw 4vw; box-sizing: border-box; background-color: rgba(54,107,157,0.88); position: relative; z-index: 2;}
  .hp-news-list .news-list-box { width: 100%; margin: -2px 0 0 0; border-top: 5px #2b1b2c solid;}
  .hp-news-list .news-list-box .list-box { width: 100%; padding: 4vw 0; border-bottom: 1px #fff solid; display: flex; justify-content: flex-start; align-items: flex-start;}
  .hp-news-list .news-list-box .list-box .date { width: 16vw; text-align: center;}
  .hp-news-list .news-list-box .list-box .date .news-day { color: #C1272D; font-size: 8vw; font-size: 700; line-height: 8vw;}
  .hp-news-list .news-list-box .list-box .date .news-mon-year { color: #ccc; font-size: 3.2vw;}
  .hp-news-list .news-list-box .list-box .text { width: calc(100% - 28vw); padding: 0.8vw 1vw 0 1vw; box-sizing: border-box;}
  .hp-news-list .news-list-box .list-box .text span.title { color: #000; font-size: 6vw; font-weight: 600; line-height: 6vw;}
  .hp-news-list .news-list-box .list-box .text span.intro { color: #E6E6E6; font-size: 4.2vw;}
  .hp-news-list .news-list-box .list-box .link { width: 12vw;}
  .hp-news-list .news-list-box .list-box .link img { width: 10vw; height: auto; margin: 2vw auto 0 auto;}


  /************ section#hp-cases ************/

  section#hp-cases { clear: both; width: 100%; position: relative; z-index: 9;}

  .hp-cases-red-block { width: 50vw; height: 20vw; display: block; background-color: #C1272D; position: absolute; top: 0; left: 0; z-index: 2;}

  .hp-cases-content { width: 100%; padding: 5vw 0 0 0; position: relative; z-index: 1;}
  .hp-cases-content .column-lf { width: 100%; padding: 36vw 0 4vw 20vw; background-color: #F2F2F2; box-sizing: border-box;}
  .hp-cases-content .column-lf ul.cases-tab { width: 60vw; padding: 0; margin: 0; list-style: none; display: block;}
  .hp-cases-content .column-lf ul.cases-tab li { width: 100%; padding: 0; margin: 0 0 3vw 0; position: relative;}
  .hp-cases-content .column-lf ul.cases-tab li .point { width: 8vw; height: 2vw; background-color: #bbb; display: none; position: absolute; top: 3vw; right: -14vw;}
  .hp-cases-content .column-lf ul.cases-tab li a { width: 100%; color: #07254F; font-size: 4.2vw; font-weight: 500; line-height: 5.2vw; text-decoration: none; display: block;}
  .hp-cases-content .column-lf ul.cases-tab li a:hover { color: #366B9D;}
  .hp-cases-content .column-lf ul.cases-tab li.sel a { color: #366B9D; background-color: rgba(255,255,255,0.7);}
  .hp-cases-content .column-lf ul.cases-tab li.sel .point { display: block;}
  .hp-cases-content .column-rt { width: 100%; padding: 4vw 4vw 4vw 8vw; background-image: url("../images/hp_cases_bg_rt.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center top; box-sizing: border-box;}
  .hp-cases-content .column-rt .cases-list-rt { width: 100%;}
  .hp-cases-content .column-rt .cases-list-rt > div { display: none;}
  .hp-cases-content .column-rt .cases-list-rt ul.case-list { padding: 0; margin: 0 0 2vw 0; color: #000; font-size: 4.4vw; line-height: 8vw; list-style: disc; display: block;}
  .hp-cases-content .column-rt .cases-list-rt ul.case-list li { padding: 0; margin: 0;}
  .hp-cases-content .column-rt .cases-list-rt ul.case-list li a { color: #000; text-decoration: none;}
  .hp-cases-content .column-rt .cases-list-rt ul.case-list li a:hover { border-bottom: 1px #000 dashed;}
  .hp-cases-content .column-rt .cases-list-rt img.case-pic { width: 50vw; height: auto;}

  .hp-cases-title { width: 76vw; position: absolute; top: 8vw; left: 20vw; z-index: 3;}
  .hp-cases-title .en-title { width: 100%; color: #fff; font-size: 9.6vw; font-weight: 300; line-height: 12.6vw;}
  .hp-cases-title .en-title-s { width: 100%; color: #808080; font-size: 2.4vw; font-weight: 300; line-height: 2.4vw;}
  .hp-cases-title .cn-title { width: 100%; color: #366B9D; font-size: 7.4vw; font-weight: 900;}

  .hp-cases-more-bt { width: 14vw; position: absolute; bottom: 0; right: 4vw; z-index: 4;}
  .hp-cases-more-bt img { width: 100%; height: auto;}


  /************ section#hp-certification ************/

  section#hp-certification { clear: both; width: 100%; padding: 8vw 4vw 0 4vw; box-sizing: border-box;}

  .hp-certifi-title { width: 100%;}
  .hp-certifi-title .en-title { width: 100%; color: #366B9D; font-size: 9.6vw; font-weight: 300; line-height: 9.6vw; text-align: center;}
  .hp-certifi-title .en-title-s { width: 100%; margin: 0 auto; color: #808080; font-size: 2.4vw; font-weight: 300; line-height: 2.4vw; text-align: center;}
  .hp-certifi-title .cn-title { width: 100%; color: #366B9D; font-size: 7.4vw; font-weight: 900; text-align: center;}

  .hp-certifi-intro { width: 100%; margin: 0 auto; font-size: 6.3vw; line-height: 7.2vw; text-align: center;}

  .hp-certifi-pics { width: 100%; margin: 6vw 0 0 0; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  .hp-certifi-pics img.certifi-pic { width: calc(50% - 4vw); height: auto; margin: 0 2vw;}
  .hp-certifi-pics img.certifi-logos { width: 100%; height: auto; margin: 4vw 0;}

  .hp-certifi-more-bt { clear: both; width: 14vw; margin: 6vw auto 0 auto;}
  .hp-certifi-more-bt img { width: 100%; height: auto;}


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

  section#page-about { clear: both; width: 100%; padding: 0 4vw 24vw 4vw; box-sizing: border-box; position: relative; z-index: 9;}

  .page-about-title-text { width: 100%; margin: 0 0 3vw 0;}

  .page-about-text { width: 100%; font-size: 3.1vw; font-weight: 500; line-height: 3.8vw;}

  .page-about-photos { width: 100%; margin: 2vw 0 8vw 0; display: flex; justify-content: center;}
  .page-about-photos img { width: 24vw; height: auto; margin: 0 1vw;}

  section#page-about-philosophy { clear: both; width: 100%; padding: 8vw 0 6vw 0; background-image: url("../images/page_philosophy_bg.jpg"); background-repeat: no-repeat; background-size: cover; position: relative; z-index: 9;}

  .page-philosophy-content { clear: both; width: 100%; padding: 0 4vw; margin: 10vw 0 0 0; box-sizing: border-box;}
  .page-philosophy-content .title-text { width: 100%; box-sizing: border-box;}
  .page-philosophy-content .title-text .text { width: 100%; font-size: 3.1vw;}
  .page-philosophy-content .title-text .text span.top { color: #07254F; font-size: 3.6vw; font-weight: 600;}
  .page-philosophy-content .certification-logos { width: 100%; margin: 4vw 0 0 0; box-sizing: border-box;}
  .page-philosophy-content .certification-logos img { width: 90%; height: auto; margin: 0 auto;}

  section#page-about-feature { clear: both; width: 100%; padding: 8vw 0; position: relative; z-index: 9;}

  img.page-about-feature-bg { width: 270%; height: auto; margin: 0 0 0 -80%;}

  .about-features-text { clear: both; width: calc(100% - 8vw); position: absolute; top: 8vw; left: 4vw;}
  .about-features-text .features-text { width: 100%; margin: 1vw 0 0 0; font-size: 3.1vw;}
  .about-features-text .features-text span.top { color: #07254F; font-size: 3.6vw; line-height: 3.8vw; font-weight: 600;}

  img.about-sti-logo { width: 10vw; height: auto; position: absolute; bottom: -8vw; left: 46vw;}


  /************ section#page-service ************/

  section#page-service { clear: both; width: 100%; position: relative; z-index: 9;}

  .page-service-title { clear: both; width: 100%; padding: 0 4vw; margin: 0 0 6vw 0; text-align: center; box-sizing: border-box;}
  .page-service-title .en-title { width: 100%; color: #366B9D; font-size: 9.6vw; font-weight: 300; line-height: 12.6vw;}
  .page-service-title .en-title-s { width: 100%; margin: 0 auto; color: #808080; font-size: 2.4vw; font-weight: 300; line-height: 2.4vw;}
  .page-service-title .cn-title { width: 100%; color: #366B9D; font-size: 7.4vw; font-weight: 900;}

  .page-service-items { clear: both; width: 100%; padding: 0 4vw; margin: 0 0 10vw 0; box-sizing: border-box;}
  .page-service-items .item-column { width: 100%; padding: 3vw; margin: 0 0 2vw 0; color: #fff; box-sizing: border-box; border-radius: 3vw; background-color: #366B9D; overflow: hidden;}
  .page-service-items .item-column .title { width: 100%; font-size: 5.6vw; font-weight: 600; text-align: center;}
  .page-service-items .item-column .text { width: 100%; margin: 3vw 0; font-size: 4.1vw; line-height: 5.1vw;}

  .page-service-infor { clear: both; width: 100%; padding: 8vw 4vw; box-sizing: border-box; background-image: url("../images/index_service_bg.jpg"); background-repeat: no-repeat; background-size: cover;}
  .page-service-infor .photos { width: 100%; margin: 0 0 4vw 0;}
  .page-service-infor .photos img { width: 80%; height: auto; margin: 0 auto;}
  .page-service-infor .title-text { width: 100%;}
  .page-service-infor .title-text .text { width: 100%; margin: 5vw 0 0 0; font-size: 3.6vw;}
  .page-service-infor .title-text .text span.top { color: #07254F; font-size: 5vw; font-weight: 600;}


  /************ section#page-process ************/

  section#page-process { clear: both; width: 100%; padding: 0 4vw 6vw 4vw; box-sizing: border-box; position: relative; z-index: 9;}

  .page-pro-step-text { width: 100%;}
  .page-pro-step-text .process-step { width: 100%; margin: 3vw 0 0 0; font-size: 3.4vw;}
  .page-pro-step-text .process-step span.top { color: #07254F; font-size: 4.6vw; line-height: 4.8vw; font-weight: 600;}

  .page-pro-step-pic { width: 100%; margin: 8vw 0 0 0; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  .page-pro-step-pic img { width: 40vw; height: auto; margin: 0 1.5vw 3vw 1.5vw;}


  /************ section#page-qanda ************/

  section#page-qanda { clear: both; width: 100%; padding: 0 4vw 8vw 4vw; box-sizing: border-box; position: relative; z-index: 9;}

  .page-qanda-title { clear: both; width: 100%; text-align: center;}
  .page-qanda-title .en-title { width: 100%; color: #366B9D; font-size: 9.6vw; font-weight: 300; line-height: 12.6vw;}
  .page-qanda-title .en-title-s { width: 100%; margin: 0 auto; color: #808080; font-size: 2.4vw; font-weight: 300; line-height: 2.4vw;}
  .page-qanda-title .cn-title { width: 100%; color: #366B9D; font-size: 7.4vw; font-weight: 900;}
  
  ul.page-qanda-list { width: 100%; padding: 0; margin: 4vw 0 0 0; list-style: none; display: block;}
  ul.page-qanda-list li { padding: 0; margin: 0 0 2vw 0;}
  ul.page-qanda-list li .q-bar { width: 100%; padding: 2vw 3vw; color: #fff; font-size: 5.1vw; font-weight: 500; background-color: #366B9D; box-sizing: border-box; display: flex; justify-content: flex-start; cursor: pointer;}
  ul.page-qanda-list li .q-bar:hover { background-color: #07254F;}
  ul.page-qanda-list li .a-bar { width: 100%; padding: 2vw 3vw; margin: 1vw 0; font-size: 4.4vw; line-height: 5.6vw; border: 1px #366B9D solid; box-sizing: border-box; display: none; justify-content: flex-start;}


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

  section#page-news { clear: both; width: 100%; margin: -7vw 0 0 0; position: relative; z-index: 8;}

  ul#page-num { clear: both; width: 100%; padding: 0; margin: 8vw 0 0 0; list-style: none; display: flex; justify-content: center; flex-wrap: wrap;}
  ul#page-num li { padding: 0; margin: 0 1vw;}
  ul#page-num li a { width: 8vw; height: 8vw; color: #07254F; font-size: 4vw; text-decoration: none; border-radius: 100%; background-color: #fff; display: flex; justify-content: center; align-items: center;}
  ul#page-num li a:hover { color: #fff; background-color: #07254F;}
  ul#page-num li a.sel { background-color: rgba(255,255,255,0.5);}

  .page-news-content { clear: both; width: 100%; padding: 0 4vw 8vw 4vw; box-sizing: border-box; background-color: rgba(54,107,157,0.88); position: relative; z-index: 2;}
  .page-news-content .title-bar { width: 100%; padding: 4vw 0; border-bottom: 1px #fff solid;}
  .page-news-content .title-bar .date { width: 100%; margin: 0 0 1vw 0; color: #fff; font-size: 3.2vw;}
  .page-news-content .title-bar .title { width: 100%; color: #000; font-size: 5.4vw; font-weight: 600; line-height: 5.8vw;}
  .page-news-content .content-text { width: 100%; padding: 3vw 0; color: #fff; font-size: 4.4vw; line-height: 6.4vw; box-sizing: border-box;}
  .page-news-content .content-text a { color: #fff; text-decoration: none; border-bottom: 1px #fff dashed;}
  .page-news-content .content-text img { max-width: 100%; height: auto;}

  #goback-bt-w { width: 30vw; margin: 6vw auto 0 auto;}
  #goback-bt-w a { padding: 1.5vw 0; color: #07254F; font-size: 4vw; line-height: 4vw; font-weight: 500; text-align: center; text-decoration: none; border-radius: 3.5vw; background-color: #fff; display: block;}
  #goback-bt-w a:hover { background-color: rgba(255,255,255,0.6);}


  /************ section#page-case ************/

  section#page-case { clear: both; width: 100%; margin: -12vw 0 0 0; position: relative; z-index: 10;}

  .page-case-sub-title { width: 60vw; color: #07254F; font-size: 4.2vw; font-weight: 500; line-height: 5.2vw;}

  .page-case-sample-title { width: 100%; padding: 1vw 0; color: #000; font-size: 5vw; font-weight: 500; border-bottom: 1px #000 solid;}

  .page-case-sample-infor { width: 100%; padding: 2vw 0; font-size: 3.8vw; line-height: 4.4vw; box-sizing: border-box;}

  #goback-bt-b { width: 30vw; margin: 6vw 0 0 0;}
  #goback-bt-b a { padding: 1.5vw 0; color: #fff; font-size: 4vw; line-height: 4vw; font-weight: 500; text-align: center; text-decoration: none; border-radius: 3.5vw; background-color: #07254F; display: block;}
  #goback-bt-b a:hover { background-color: #366B9D;}


  /************ section#page-certification ************/

  section#page-certi { clear: both; width: 100; padding: 0 4vw 8vw 4vw; box-sizing: border-box; position: relative; z-index: 9;}

  .page-certi-logos { clear: both; width: 100%; margin: 8vw 0 0 0; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
  .page-certi-logos img { width: auto; height: 17vw; margin: 0 3vw 6vw 3vw;}

  .page-certi-papers { clear: both; width: 100%; margin: 3vw 0 0 0; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
  .page-certi-papers img { width: calc(50% - 2vw); height: auto; margin: 0 1vw 3vw 1vw;}


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

  section#page-contact { clear: both; width: 100%; padding: 0 4vw 6vw 4vw; box-sizing: border-box; position: relative; z-index: 9;}

  .page-contact-content { clear: both; width: 100%; margin: 4vw 0 0 0;}
  .page-contact-content .column-lf { width: 100%;}
  .page-contact-content .column-lf .contact-infor { width: 100%; font-size: 3.6vw; line-height: 7vw;}
  .page-contact-content .column-lf .line-code { width: 100%; margin: 4vw 0 0 0; font-size: 4vw; font-weight: 500; text-align: center;}
  .page-contact-content .column-lf .line-code img { width: 60vw; height: auto; margin: 0 auto;}
  .page-contact-content .column-rt { width: 100%; margin: 6vw 0 0 0;}
  .page-contact-content .column-rt form { width: 100%;}
  .page-contact-content .column-rt form .caption { width: 100%; margin: 0 0 1.5vw 0; font-size: 4vw; font-weight: 600;}
  .page-contact-content .column-rt form .column { width: 100%; margin: 0 0 3vw 0; color: #07254F; font-size: 4vw;}
  .page-contact-content .column-rt form .column input[type=text] { width: 100%; padding: 1vw 2vw; color: #07254F; font-size: 4vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #07254F solid; box-sizing: border-box;}
  .page-contact-content .column-rt form .column textarea { width: 100%; height: 20vw; padding: 1vw 2vw; color: #07254F; font-size: 2vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #07254F solid; box-sizing: border-box;}
  .page-contact-content .column-rt form .column img.con-code { width: 30vw; height: auto; margin: 0 0 0.5vw 0;}
  .page-contact-content .column-rt form .column input[type=submit] { padding: 1vw 2vw; color: #fff; font-size: 4vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; background-color: #07254F; box-sizing: border-box; cursor: pointer;}


  /************ section#page-sitemap ************/

  section#page-sitemap { clear: both; width: 100; padding: 0 8vw 6vw 8vw; box-sizing: border-box; position: relative; z-index: 9;}

  ul.page-sitemap-list { clear: both; width: 100%; padding: 1vw 0; margin: 6vw 0 0 0; list-style: none; display: block;}
  ul.page-sitemap-list li { padding: 0; margin: 0 2vw 5vw 2vw;}
  ul.page-sitemap-list li a { color: #07254F; font-size: 5.4vw; font-weight: 500; text-decoration: none; border-bottom: 4px #07254F solid;}
  ul.page-sitemap-list li a:hover { color: #366B9D; border-bottom: 4px #366B9D solid;}
  ul.page-sitemap-list li ul.popup { padding: 0; margin: 4vw 0 0 0; list-style: none; display: block;}
  ul.page-sitemap-list li ul.popup li { padding: 0 0 0 8vw; margin: 0 0 1vw 0; box-sizing: border-box;}
  ul.page-sitemap-list li ul.popup li a { color: #366B9D; font-size: 5vw; font-weight: normal; text-decoration: none; border: 0;}
  ul.page-sitemap-list li ul.popup li a:hover { color: #07254F;}


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

  footer { clear: both; width: 100%;}

  .footer-top-infor { width: 100%; padding: 8vw 4vw; background-color: #C1272D; box-sizing: border-box;}
  .footer-top-infor .footer-logo { width: 100%; margin: 0 0 8vw 0;}
  .footer-top-infor .footer-logo img { width: 90%; height: auto; margin: 0 auto;}
  .footer-top-infor .footer-infor { width: 100%;}
  .footer-top-infor .footer-infor .infor { width: 100%; margin: 0 auto; color: #fff; font-size: 4.4vw; font-weight: 500; line-height: 5.2vw; letter-spacing: 0.1vw;}
  .footer-top-infor .footer-infor .social-icons { width: 100%; margin: 5vw auto 0 auto; display: flex; justify-content: flex-start; align-items: center;}
  .footer-top-infor .footer-infor .social-icons img { width: 6vw; height: auto; margin: 0 2vw 0 0;}

  .footer-nav { width: 100%; padding: 8vw 4vw; background-color: #000; box-sizing: border-box;}
  .footer-nav ul.footer-nav { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
  .footer-nav ul.footer-nav li { padding: 0; margin: 0 4vw 4vw 4vw;}
  .footer-nav ul.footer-nav li a { color: #fff; font-size: 4.8vw; text-align: center; text-decoration: none;}
  .footer-nav ul.footer-nav li a:hover { border-bottom: 1px #fff solid;}
  .footer-nav ul.footer-nav li ul.footer-nav-popup { padding: 0; margin: 2vw 0 4vw 0; list-style: none; display: block;}
  .footer-nav ul.footer-nav li ul.footer-nav-popup li { padding: 0; margin: 0 0 3vw 0;}
  .footer-nav ul.footer-nav li ul.footer-nav-popup li a { color: 0; font-size: 4.8vw; text-align: center; text-decoration: none;}
  .footer-nav ul.footer-nav li ul.footer-nav-popup li a:hover { border-bottom: 1px #fff solid;}

  .copyright { width: 100%; padding: 4vw; font-size: 3.6vw; text-align: center; background-color: #fff; box-sizing: border-box;}
  

}