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

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;700;900&display=swap');


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

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

html, body { padding: 0; margin: 0;}

.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: 1366px) {

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

  header { clear: both; width: 100%; height: 6.4vw; padding: 0 9vw; box-sizing: border-box; background-color: rgba(35,44,53,0.9); display: flex; justify-content: flex-start; align-items: center; position: absolute; top: 0; left: 0; z-index: 99;}

  .header-logo-title { width: 26.8vw;}
  .header-logo-title img { width: 100%; height: auto;}

  nav#mo { display: none;}
  nav#pc { width: calc(100% - 26.8vw); height: 100%;}
  nav#pc ul.nav-menu { width: 100%; height: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-end; align-items: center;}
  nav#pc ul.nav-menu li { height: 100%; padding: 0 1vw; margin: 0;}
  nav#pc ul.nav-menu li a { height: 100%; padding: 0 1.5vw; color: #fff; font-size: 1.1vw; text-decoration: none; box-sizing: border-box; display: flex; justify-content: center; align-items: center; transition: 0.5s;}
  nav#pc ul.nav-menu li a:hover { background-color: rgba(93,93,93,0.8);}
  nav#pc ul.nav-menu li a.sel { background-color: rgba(93,93,93,0.8);}


  /************ section #hp-banner ************/

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

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

  .banner-text { width: 35vw; position: absolute; top: 10vw; left: 13vw; z-index: 2;}
  .banner-text .text-1 { width: 100%; color: #00305D; font-size: 1.4vw;}
  .banner-text .text-2 { width: 100%; color: #00305D; font-size: 5vw; font-weight: 700;}
  .banner-text .text-3 { width: 100%; color: #1371C9; font-size: 5vw; font-weight: 700; line-height: 1em;}
  .banner-text .text-4 { width: 100%; padding: 2vw 0 0 0; color: #0057B2; font-size: 2.4vw;}


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

  section#hp-about { clear: both; width: 100%; padding: 0 13vw 4vw 13vw; box-sizing: border-box; position: relative;}

  .hp-about-title { clear: both; width: 100%; padding: 0 5.5vw; box-sizing: border-box;}
  .hp-about-title .about-title { width: 100%; color: #00305D; font-size: 3vw; font-weight: 700; line-height: 1.2em; text-align: center;}
  .hp-about-title .about-title-en { width: 100%; color: #1371C9; font-size: 1vw; line-height: 2em; text-align: center;}
  .hp-about-title .about-title-line { width: 5vw; height: 10px; margin: 0 auto; background-color: #1371C9; display: block;}

  .hp-about-con-mo { display: none;}
  .hp-about-con { width: 100%; margin: 2vw 0 0 0; font-size: 1.1vw; line-height: 1.6em; text-align: center;}


  /************ section #hp-products ************/

  section#hp-products { clear: both; width: 100%; padding: 5vw 8.5vw; box-sizing: border-box; background-image: url("../images/hp_pro_bg.webp"); background-repeat: no-repeat; background-size: 100% auto; background-position: top center;}

  .hp-pro-title { clear: both; width: 100%; padding: 0 4.5vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .hp-pro-title .pro-title { width: 100%; color: #00305D; font-size: 3vw; font-weight: 700; line-height: 1.2em;}
  .hp-pro-title .pro-title-line { width: 7.5vw; height: 5px; background-color: #1371C9; display: block;}
  .hp-pro-title .pro-title-en { width: calc(100% - 7.5vw); padding: 0 0 0 0.5vw; color: #00305D; font-size: 1vw; line-height: 2em; box-sizing: border-box;}

  .hp-pro-list { clear: both; width: 100%; margin: 4.5vw 0 0 0; display: flex; justify-content: flex-start;  align-items: center;}
  .hp-pro-list .arrow-prev { width: 3.5vw; padding: 0 0.5vw 0 0; box-sizing: border-box; transition: 0.5s;} 
  .hp-pro-list .arrow-next { width: 3.5vw; padding: 0 0 0 0.5vw; box-sizing: border-box; transition: 0.5s;}
  .hp-pro-list .arrow-prev img.arrow-prev-hover, 
  .hp-pro-list .arrow-next img.arrow-next-hover { width: 3vw; height: auto; cursor: pointer; display: none;}
  .hp-pro-list .arrow-prev img.arrow-prev, 
  .hp-pro-list .arrow-next img.arrow-next { width: 3vw; height: auto; cursor: pointer; display: block;}
  .hp-pro-list .arrow-prev:hover img.arrow-prev-hover, 
  .hp-pro-list .arrow-next:hover img.arrow-next-hover { width: 3vw; height: auto; cursor: pointer; display: block;}
  .hp-pro-list .arrow-prev:hover img.arrow-prev, 
  .hp-pro-list .arrow-next:hover img.arrow-next { width: 3vw; height: auto; cursor: pointer; display: none;}  
  .hp-pro-list .pro-list-full { width: calc(100% - 7vw);}
  .hp-pro-list .pro-list-full a { text-decoration: none;}
  .hp-pro-list .pro-list-full img { width: 24vw; height: auto;}
  .hp-pro-list .pro-list-full .title { width: 24vw; padding: 0.3vw 0; margin: 0.5vw 0 0 0; color: #fff; font-size: 1.2vw; text-align: center; background-color: #1371C9;}


  /************ section #hp-products-intro ************/

  section#hp-products-intro { clear: both; width: 100%; padding: 0 13vw 6vw 13vw; box-sizing: border-box; background-image: url("../images/hp_pro_intro_bg.webp"); background-repeat: no-repeat; background-size: 100% auto; background-position: top center;}

  .hp-pro-intro-text { width: 100%; padding: 11vw 0 0 50%; box-sizing: border-box;}
  .hp-pro-intro-text .title-name-en { width: 100%; color: #fff; font-size: 4vw; font-weight: 700; line-height: 1em; text-align: center;}
  .hp-pro-intro-text .text-en { width: 100%; padding: 1.5vw 0; color: #fff; font-size: 1.2vw; text-align: center;}
  .hp-pro-intro-text .title-name { width: 100%; color: #fff; font-size: 3.2vw; font-weight: 700; line-height: 1em; text-align: center;}
  .hp-pro-intro-text .line { width: 5.5vw; height: 10px; margin: 2.5vw auto; background-color: #1371C9; display: block;}
  .hp-pro-intro-text .text { clear: both; width: 100%; padding: 0 0 1vw 0; color: #fff; font-size: 2.4vw; line-height: 1em; text-align: center;}
  .hp-pro-intro-text .slogan { width: 22.5vw; height: 5vw; margin: 2vw auto 0 auto; color: #fff; font-size: 2.6vw; line-height: 1em; border: 3px #fff solid; display: flex; justify-content: center; align-items: center;}

  .hp-pro-intro-list { clear: both; width: 100%; margin: 6vw 0 0 0; display: flex; justify-content: center; align-items: center;}
  .hp-pro-intro-list .pro-intro-box { width: calc(100% / 3); padding: 0 1.5vw; box-sizing: border-box; background-image: linear-gradient(to bottom, #707070 50%, transparent 50%); background-size: 1px 12px; background-repeat: repeat-y; background-position: right; border: none;}
  .hp-pro-intro-list .pro-intro-box:last-of-type { background-image: none;}
  .hp-pro-intro-list .pro-intro-box a { text-decoration: none;}
  .hp-pro-intro-list .pro-intro-box .pro-pic { width: 100%;}
  .hp-pro-intro-list .pro-intro-box .pro-pic img { width: 100%; height: auto;}
  .hp-pro-intro-list .pro-intro-box .title { width: 100%; padding: 1vw 0 0 0; color: #00305D; font-size: 1.2vw; text-align: center;}

  .hp-more-btn { clear: both; width: 100%; margin: 6vw 0 0 0;}
  .hp-more-btn a { width: 14vw; height: 3.5vw; margin: 0 auto; color: #00305D; font-size: 1.4vw; text-decoration: none; border: 3px #00305D solid; display: flex; justify-content: center; align-items: center; transition: 0.5s;}
  .hp-more-btn a:hover { color: #fff; background-color: #00305D;}


  /************ page about ************/

  .page-about-title { clear: both; width: 100%; padding: 2vw 13vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-end;}
  .page-about-title .title { width: 14vw; color: #00305D; font-size: 3vw; font-weight: 700; line-height: 1em;}  
  .page-about-title .title-en { width: 6.5vw; color: #00305D; font-size: 1.2vw; font-weight: 500; line-height: 1em;}
  .page-about-title .line { width: 80px; height: 5px; margin: 0 0 0.3vw 0; background-color: #1371C9; display: block;}
  
  .page-about-text { clear: both; width: 100%; padding: 0 13vw 8vw 13vw; color: #232C35; font-size: 1.1vw; line-height: 1.6em; box-sizing: border-box;}


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

  section#page-service { clear: both; width: 100%; padding: 0; background-image: url("../images/page_contact_bg.webp"); background-repeat: no-repeat; background-size: cover; background-position: center top;}

  .page-service-banner { width: 100%; position: relative;}
  .page-service-banner img.service-banner-bg { width: 100%; height: auto; position: relative; z-index: 1;}
  .page-service-banner .banner-title { width: 50%; position: absolute; top: 8.5vw; left: 13vw; z-index: 2;}
  .page-service-banner .banner-title span.style-cn { color: #fff; font-size: 3vw; font-weight: 600;}
  .page-service-banner .banner-title span.style-en { color: #fff; font-size: 1.2vw;}

  .page-service-intro { clear: both; width: 100%; padding: 2vw 5vw 3.5vw 13vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-service-intro .col-left { width: calc(100% - 38.4vw);}
  .page-service-intro .col-left .service-title { width: 100%; display: flex; justify-content: flex-start; align-items: flex-end;}
  .page-service-intro .col-left .service-title .title { width: 14vw; color: #00305D; font-size: 3vw; font-weight: 700; line-height: 1em;}  
  .page-service-intro .col-left .service-title .title-en { width: 6.5vw; color: #00305D; font-size: 1.2vw; font-weight: 500; line-height: 1em;}
  .page-service-intro .col-left .service-title .line { width: 80px; height: 5px; margin: 0 0 0.3vw 0; background-color: #1371C9; display: block;}
  .page-service-intro .col-left .intro-text { width: 100%; margin: 2vw 0 0 0; color: #232C35; font-size: 1vw; line-height: 1.6em;}
  .page-service-intro .col-left .intro-text span.bigger { font-size: 1.4vw; font-weight: 600;}
  .page-service-intro .col-right { width: 38.4vw;}
  .page-service-intro .col-right img { width: 100%; height: auto;}


  section#page-serv-prod-intro { clear: both; width: 100%; position: relative;}

  img.serv-prod-intro-bg { width: 100%; height: auto; position: relative; z-index: 1;}

  .page-serv-prod-intro-btn { width: 16.6vw; height: 16.6vw; position: absolute; top: calc(50% - 8.3vw); left: calc(50% - 8.3vw); z-index: 2;}
  .page-serv-prod-intro-btn a { width: 100%; height: 100%; color: #fff; font-size: 2.4vw; font-width: 600; text-decoration: none; border: 3px #fff solid; background-color: rgba(0,0,0,0.5); border-radius: 100%; display: flex; justify-content: center; align-items: center;}
  .page-serv-prod-intro-btn a:hover { background-color: rgba(0,0,0,0.8);}


  section#page-serv-slogan { clear: both; width: 100%; padding: 3vw 0 5.5vw 0; position: relative;}

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

  .page-serv-slogn-words { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; z-index: 2;}
  .page-serv-slogn-words .col-word { width: 10vw; color: #fff; font-size: 3vw; font-weight: 600; text-align: center;}
  .page-serv-slogn-words .col-word span.line { border-bottom: 5px #fff solid;}


  /************ section #page-products ************/

  section#page-products { clear: both; width: 100%; padding: 0;}

  .page-products-banner { width: 100%; position: relative;}
  .page-products-banner img.prod-banner-bg { width: 100%; height: auto; position: relative; z-index: 1;}
  .page-products-banner .banner-title { width: 50%; position: absolute; top: 8.5vw; left: 13vw; z-index: 2;}
  .page-products-banner .banner-title span.style-cn { color: #fff; font-size: 3vw; font-weight: 600;}
  .page-products-banner .banner-title span.style-en { color: #fff; font-size: 1.2vw;}

  ul.prod-sort-list { clear: both; width: 100%; padding: 0 6vw; margin: 3.3vw 0 7vw 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; box-sizing: border-box;}
  ul.prod-sort-list li { padding: 0 2vw; margin: 0 0 1vw 0;}
  ul.prod-sort-list li a { color: #232C35; font-size: 1.2vw; font-weight: 500; text-decoration: none; display: flex; justify-content: flex-start; align-items: center;}
  ul.prod-sort-list li a img.arrow, 
  ul.prod-sort-list li a img.arrow-sel { width: 1.8vw; height: auto; margin: 0 1vw 0 0;}
  ul.prod-sort-list li a:hover span { border-bottom: 2px #232C35 solid;}

  .page-prod-list-full { clear: both; width: 100%; padding: 0 13vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-prod-list-full .prod-box { width: calc(100% / 4); padding: 0 0.4vw; margin: 0 0 9.5vw 0; box-sizing: border-box; background-image: linear-gradient(to bottom, #707070 50%, transparent 50%); background-size: 1px 14px; background-repeat: repeat-y; background-position: right; border: none;}
  .page-prod-list-full .prod-box:nth-child(4n) { background-image: none;}
  .page-prod-list-full .prod-box a { text-decoration: none;}
  .page-prod-list-full .prod-box .pic { width: 100%;}
  .page-prod-list-full .prod-box .pic img { width: 100%; height: auto;}
  .page-prod-list-full .prod-box .title { width: 100%; padding: 1vw 0 0.5vw 0; color: #232C35; font-size: 1.2vw; text-align: center;}


  section#page-prod-slogan { clear: both; width: 100%; padding: 0 0 3.5vw 0; position: relative;}

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

  .page-prod-slogn-words { width: 100%; display: flex; justify-content: center; align-items: center; position: absolute; top: 20vw; left: 0; z-index: 2;}
  .page-prod-slogn-words .col-word { width: 10vw; color: #fff; font-size: 3vw; font-weight: 600; text-align: center;}
  .page-prod-slogn-words .col-word span.line { border-bottom: 5px #fff solid;}

  .page-prev-next { clear: both; width: 100%; padding: 0 13vw; box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
  .page-prev-next a.prev { width: 2vw; height: 2vw; margin: 0 1vw; background-image: url(../images/page_prev.webp); background-repeat: no-repeat; background-size: 2vw 2vw; display: block;}
  .page-prev-next a.next { width: 2vw; height: 2vw; margin: 0 1vw; background-image: url(../images/page_next.webp); background-repeat: no-repeat; background-size: 2vw 2vw; display: block;}
  .page-prev-next a.prev:hover { width: 2vw; height: 2vw; margin: 0 1vw; background-image: url(../images/page_prev_hover.webp); background-repeat: no-repeat; background-size: 2vw 2vw; display: block;}
  .page-prev-next a.next:hover { width: 2vw; height: 2vw; margin: 0 1vw; background-image: url(../images/page_next_hover.webp); background-repeat: no-repeat; background-size: 2vw 2vw; display: block;}


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

  section#page-contact { clear: both; width: 100%; padding: 0; background-image: url("../images/page_contact_bg.webp"); background-repeat: no-repeat; background-size: cover; background-position: center top;}

  .page-contact-banner { width: 100%; position: relative;}
  .page-contact-banner img.contact-banner-bg { width: 100%; height: auto; position: relative; z-index: 1;}
  .page-contact-banner .banner-title { width: 50%; position: absolute; top: 8.5vw; left: 13vw; z-index: 2;}
  .page-contact-banner .banner-title span.style-cn { color: #fff; font-size: 3vw; font-weight: 600;}
  .page-contact-banner .banner-title span.style-en { color: #fff; font-size: 1.4vw;}

  .page-contact-form-table { clear: both; width: 100%; padding: 2.5vw 0 11vw 0;}
  .page-contact-form-table .contact-title { width: 100%; margin: 0 0 5.6vw 0; color: #00305D;}
  .page-contact-form-table .contact-title .title { width: 100%; font-size: 3vw; font-weight: 700; text-align: center; line-height: 1.2em;}
  .page-contact-form-table .contact-title .title-en { width: 100%; margin: 1.5vw 0 0.5vw; font-size: 1vw; text-align: center;}
  .page-contact-form-table .contact-title .line { width: 100px; height: 10px; margin: 0 auto; background-color: #1371C9; display: block;}
  .page-contact-form-table .contact-form { width: 40vw; margin: 0 auto;}
  .page-contact-form-table .contact-form .column-full { width: 100%; padding: 1vw 5vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  .page-contact-form-table .contact-form .column-full:nth-child(even) { background-color: rgba(19,113,201,0.15);}
  .page-contact-form-table .contact-form .column-full .icon { width: 2.3vw; margin: 0 1.5vw 0 0;}
  .page-contact-form-table .contact-form .column-full .icon img { width: 100%; height: auto;}
  .page-contact-form-table .contact-form .column-full .caption { width: 4.8vw; color: #232C35; font-size: 1.2vw;}
  .page-contact-form-table .contact-form .column-full .column { width: calc(100% - 2.3vw - 1.5vw - 4.8vw); color: #232C35; font-size: 1.2vw;}

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


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

  footer { clear: both; width: 100%; margin: -5px 0 0 0;}

  .footer-contact-con { clear: both; width: 100%; padding: 3vw 13vw 4.5vw 13vw; background-color: #232C35; box-sizing: border-box;}
  .footer-contact-con .contact-title { width: 100%;}
  .footer-contact-con .contact-title .title-en { width: 100%; color: #fff; font-size: 1.8vw; font-weight: 600; line-height: 1.2em; text-align: center;}
  .footer-contact-con .contact-title .title { width: 100%; color: #fff; font-size: 1.2vw; line-height: 1.4em; text-align: center;}
  .footer-contact-con .contact-title .line { width: 5.5vw; height: 10px; margin: 0.3vw auto; background-color: #1371C9; display: block;}
  .footer-contact-con .contact-tel-fax { clear: both; width: 100%; padding: 0 3.5vw; margin: 3vw 0; display: flex; justify-content: center; align-items: center; box-sizing: border-box;}
  .footer-contact-con .contact-tel-fax .tel, 
  .footer-contact-con .contact-tel-fax .fax { width: calc(50% - 1.8vw); color: #fff; font-size: 1.8vw; text-align: center;}
  .footer-contact-con .contact-tel-fax .tel span.num, 
  .footer-contact-con .contact-tel-fax .fax span.num { font-size: 2.4vw;}
  .footer-contact-con .contact-tel-fax .slash { width: 3.6vw;}
  .footer-contact-con .contact-tel-fax .slash img { width: 100%; height: auto;}
  .footer-contact-con .contact-addr-email { clear: both; width: 100%; padding: 0 3.5vw; display: flex; justify-content: center; align-items: center; box-sizing: border-box;}
  .footer-contact-con .contact-addr-email .column-box { width: 25vw; height: 3.5vw; margin: 0 2.5vw;}
  .footer-contact-con .contact-addr-email .column-box a { width: 100%; height: 100%; color: #fff; font-size: 1.2vw; text-decoration: none; border: 3px #fff solid; display: flex; justify-content: center; align-items: center; box-sizing: border-box; transition: 0.5s;}
  .footer-contact-con .contact-addr-email .column-box a img.icon { width: 2.1vw; height: auto; margin: 0 1vw 0 0;}
  .footer-contact-con .contact-addr-email .column-box a:hover { border: 3px #1371C9 solid; background-color: #1371C9;}

  .footer-logo-nav { clear: both; width: 100%; padding: 1vw 13vw; box-sizing: border-box; background-color: #F7F7F5; display: flex; justify-content: flex-start; align-items: center;}
  .footer-logo-nav .footer-logo-title { width: 50%;}
  .footer-logo-nav .footer-logo-title img { width: 29vw; height: auto; margin: 0 0 0 2vw;}
  .footer-logo-nav ul.footer-nav { width: 50%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-end; align-items: center;}
  .footer-logo-nav ul.footer-nav li { padding: 0 2vw; margin: 0; border-right: 1px #232C35 solid;}
  .footer-logo-nav ul.footer-nav li:last-of-type { border-right: 0;}
  .footer-logo-nav ul.footer-nav li a { color: #232C35; font-size: 1.1vw; text-decoration: none;}
  .footer-logo-nav ul.footer-nav li a:hover { border-bottom: 2px #232C35 solid;}

  .footer-copyright-views { clear: both; width: 100%; position: relative;}
  .footer-copyright-views .copyright { width: 100%; padding: 1.5vw 13vw; color: #232C35; font-size: 0.9vw; text-align: center; box-sizing: border-box; position: relative; z-index: 1;}
  .footer-copyright-views .views-box { width: 10vw; color: #232C35; font-size: 0.9vw; text-align: right; position: absolute; top: 1.5vw; right: 13vw; z-index: 2;}


}

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

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

  header { clear: both; width: 100%; height: 6.4vw; padding: 0 9vw; box-sizing: border-box; background-color: rgba(35,44,53,0.9); display: flex; justify-content: flex-start; align-items: center; position: absolute; top: 0; left: 0; z-index: 99;}

  .header-logo-title { width: 26.8vw;}
  .header-logo-title img { width: 100%; height: auto;}

  nav#mo { display: none;}
  nav#pc { width: calc(100% - 26.8vw); height: 100%;}
  nav#pc ul.nav-menu { width: 100%; height: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-end; align-items: center;}
  nav#pc ul.nav-menu li { height: 100%; padding: 0 1vw; margin: 0;}
  nav#pc ul.nav-menu li a { height: 100%; padding: 0 1.5vw; color: #fff; font-size: 1.1vw; text-decoration: none; box-sizing: border-box; display: flex; justify-content: center; align-items: center; transition: 0.5s;}
  nav#pc ul.nav-menu li a:hover { background-color: rgba(93,93,93,0.8);}
  nav#pc ul.nav-menu li a.sel { background-color: rgba(93,93,93,0.8);}


  /************ section #hp-banner ************/

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

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

  .banner-text { width: 35vw; position: absolute; top: 10vw; left: 13vw; z-index: 2;}
  .banner-text .text-1 { width: 100%; color: #00305D; font-size: 1.4vw;}
  .banner-text .text-2 { width: 100%; color: #00305D; font-size: 5vw; font-weight: 700;}
  .banner-text .text-3 { width: 100%; color: #1371C9; font-size: 5vw; font-weight: 700; line-height: 1em;}
  .banner-text .text-4 { width: 100%; padding: 2vw 0 0 0; color: #0057B2; font-size: 2.4vw;}


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

  section#hp-about { clear: both; width: 100%; padding: 0 13vw 4vw 13vw; box-sizing: border-box; position: relative;}

  .hp-about-title { clear: both; width: 100%; padding: 0 5.5vw; box-sizing: border-box;}
  .hp-about-title .about-title { width: 100%; color: #00305D; font-size: 3vw; font-weight: 700; line-height: 1.2em; text-align: center;}
  .hp-about-title .about-title-en { width: 100%; color: #1371C9; font-size: 1vw; line-height: 2em; text-align: center;}
  .hp-about-title .about-title-line { width: 5vw; height: 10px; margin: 0 auto; background-color: #1371C9; display: block;}

  .hp-about-con-mo { display: none;}
  .hp-about-con { width: 100%; margin: 2vw 0 0 0; font-size: 1.1vw; line-height: 1.6em; text-align: center;}


  /************ section #hp-products ************/

  section#hp-products { clear: both; width: 100%; padding: 5vw 8.5vw; box-sizing: border-box; background-image: url("../images/hp_pro_bg.webp"); background-repeat: no-repeat; background-size: 100% auto; background-position: top center;}

  .hp-pro-title { clear: both; width: 100%; padding: 0 4.5vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .hp-pro-title .pro-title { width: 100%; color: #00305D; font-size: 3vw; font-weight: 700; line-height: 1.2em;}
  .hp-pro-title .pro-title-line { width: 7.5vw; height: 5px; background-color: #1371C9; display: block;}
  .hp-pro-title .pro-title-en { width: calc(100% - 7.5vw); padding: 0 0 0 0.5vw; color: #00305D; font-size: 1vw; line-height: 2em; box-sizing: border-box;}

  .hp-pro-list { clear: both; width: 100%; margin: 4.5vw 0 0 0; display: flex; justify-content: flex-start;  align-items: center;}
  .hp-pro-list .arrow-prev { width: 3.5vw; padding: 0 0.5vw 0 0; box-sizing: border-box; transition: 0.5s;} 
  .hp-pro-list .arrow-next { width: 3.5vw; padding: 0 0 0 0.5vw; box-sizing: border-box; transition: 0.5s;}
  .hp-pro-list .arrow-prev img.arrow-prev-hover, 
  .hp-pro-list .arrow-next img.arrow-next-hover { width: 3vw; height: auto; cursor: pointer; display: none;}
  .hp-pro-list .arrow-prev img.arrow-prev, 
  .hp-pro-list .arrow-next img.arrow-next { width: 3vw; height: auto; cursor: pointer; display: block;}
  .hp-pro-list .arrow-prev:hover img.arrow-prev-hover, 
  .hp-pro-list .arrow-next:hover img.arrow-next-hover { width: 3vw; height: auto; cursor: pointer; display: block;}
  .hp-pro-list .arrow-prev:hover img.arrow-prev, 
  .hp-pro-list .arrow-next:hover img.arrow-next { width: 3vw; height: auto; cursor: pointer; display: none;}  
  .hp-pro-list .pro-list-full { width: calc(100% - 7vw);}
  .hp-pro-list .pro-list-full a { text-decoration: none;}
  .hp-pro-list .pro-list-full img { width: 24vw; height: auto;}
  .hp-pro-list .pro-list-full .title { width: 24vw; padding: 0.3vw 0; margin: 0.5vw 0 0 0; color: #fff; font-size: 1.2vw; text-align: center; background-color: #1371C9;}


  /************ section #hp-products-intro ************/

  section#hp-products-intro { clear: both; width: 100%; padding: 0 13vw 6vw 13vw; box-sizing: border-box; background-image: url("../images/hp_pro_intro_bg.webp"); background-repeat: no-repeat; background-size: 100% auto; background-position: top center;}

  .hp-pro-intro-text { width: 100%; padding: 11vw 0 0 50%; box-sizing: border-box;}
  .hp-pro-intro-text .title-name-en { width: 100%; color: #fff; font-size: 4vw; font-weight: 700; line-height: 1em; text-align: center;}
  .hp-pro-intro-text .text-en { width: 100%; padding: 1.5vw 0; color: #fff; font-size: 1.2vw; text-align: center;}
  .hp-pro-intro-text .title-name { width: 100%; color: #fff; font-size: 3.2vw; font-weight: 700; line-height: 1em; text-align: center;}
  .hp-pro-intro-text .line { width: 5.5vw; height: 10px; margin: 2.5vw auto; background-color: #1371C9; display: block;}
  .hp-pro-intro-text .text { clear: both; width: 100%; padding: 0 0 1vw 0; color: #fff; font-size: 2.4vw; line-height: 1em; text-align: center;}
  .hp-pro-intro-text .slogan { width: 22.5vw; height: 5vw; margin: 2vw auto 0 auto; color: #fff; font-size: 2.6vw; line-height: 1em; border: 3px #fff solid; display: flex; justify-content: center; align-items: center;}

  .hp-pro-intro-list { clear: both; width: 100%; margin: 6vw 0 0 0; display: flex; justify-content: center; align-items: center;}
  .hp-pro-intro-list .pro-intro-box { width: calc(100% / 3); padding: 0 1.5vw; box-sizing: border-box; background-image: linear-gradient(to bottom, #707070 50%, transparent 50%); background-size: 1px 12px; background-repeat: repeat-y; background-position: right; border: none;}
  .hp-pro-intro-list .pro-intro-box:last-of-type { background-image: none;}
  .hp-pro-intro-list .pro-intro-box a { text-decoration: none;}
  .hp-pro-intro-list .pro-intro-box .pro-pic { width: 100%;}
  .hp-pro-intro-list .pro-intro-box .pro-pic img { width: 100%; height: auto;}
  .hp-pro-intro-list .pro-intro-box .title { width: 100%; padding: 1vw 0 0 0; color: #00305D; font-size: 1.2vw; text-align: center;}

  .hp-more-btn { clear: both; width: 100%; margin: 6vw 0 0 0;}
  .hp-more-btn a { width: 14vw; height: 3.5vw; margin: 0 auto; color: #00305D; font-size: 1.4vw; text-decoration: none; border: 3px #00305D solid; display: flex; justify-content: center; align-items: center; transition: 0.5s;}
  .hp-more-btn a:hover { color: #fff; background-color: #00305D;}


  /************ page about ************/

  .page-about-title { clear: both; width: 100%; padding: 2vw 13vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-end;}
  .page-about-title .title { width: 14vw; color: #00305D; font-size: 3vw; font-weight: 700; line-height: 1em;}  
  .page-about-title .title-en { width: 6.5vw; color: #00305D; font-size: 1.2vw; font-weight: 500; line-height: 1em;}
  .page-about-title .line { width: 80px; height: 5px; margin: 0 0 0.3vw 0; background-color: #1371C9; display: block;}
  
  .page-about-text { clear: both; width: 100%; padding: 0 13vw 8vw 13vw; color: #232C35; font-size: 1.4vw; line-height: 1.6em; box-sizing: border-box;}


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

  section#page-service { clear: both; width: 100%; padding: 0; background-image: url("../images/page_contact_bg.webp"); background-repeat: no-repeat; background-size: cover; background-position: center top;}

  .page-service-banner { width: 100%; position: relative;}
  .page-service-banner img.service-banner-bg { width: 100%; height: auto; position: relative; z-index: 1;}
  .page-service-banner .banner-title { width: 50%; position: absolute; top: 8.5vw; left: 13vw; z-index: 2;}
  .page-service-banner .banner-title span.style-cn { color: #fff; font-size: 3vw; font-weight: 600;}
  .page-service-banner .banner-title span.style-en { color: #fff; font-size: 1.2vw;}

  .page-service-intro { clear: both; width: 100%; padding: 2vw 5vw 3.5vw 13vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-service-intro .col-left { width: calc(100% - 38.4vw);}
  .page-service-intro .col-left .service-title { width: 100%; display: flex; justify-content: flex-start; align-items: flex-end;}
  .page-service-intro .col-left .service-title .title { width: 14vw; color: #00305D; font-size: 3vw; font-weight: 700; line-height: 1em;}  
  .page-service-intro .col-left .service-title .title-en { width: 6.5vw; color: #00305D; font-size: 1.2vw; font-weight: 500; line-height: 1em;}
  .page-service-intro .col-left .service-title .line { width: 80px; height: 5px; margin: 0 0 0.3vw 0; background-color: #1371C9; display: block;}
  .page-service-intro .col-left .intro-text { width: 100%; margin: 2vw 0 0 0; color: #232C35; font-size: 1vw; line-height: 1.6em;}
  .page-service-intro .col-left .intro-text span.bigger { font-size: 1.4vw; font-weight: 600;}
  .page-service-intro .col-right { width: 38.4vw;}
  .page-service-intro .col-right img { width: 100%; height: auto;}


  section#page-serv-prod-intro { clear: both; width: 100%; position: relative;}

  img.serv-prod-intro-bg { width: 100%; height: auto; position: relative; z-index: 1;}

  .page-serv-prod-intro-btn { width: 16.6vw; height: 16.6vw; position: absolute; top: calc(50% - 8.3vw); left: calc(50% - 8.3vw); z-index: 2;}
  .page-serv-prod-intro-btn a { width: 100%; height: 100%; color: #fff; font-size: 2.4vw; font-width: 600; text-decoration: none; border: 3px #fff solid; background-color: rgba(0,0,0,0.5); border-radius: 100%; display: flex; justify-content: center; align-items: center;}
  .page-serv-prod-intro-btn a:hover { background-color: rgba(0,0,0,0.8);}


  section#page-serv-slogan { clear: both; width: 100%; padding: 3vw 0 5.5vw 0; position: relative;}

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

  .page-serv-slogn-words { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; z-index: 2;}
  .page-serv-slogn-words .col-word { width: 10vw; color: #fff; font-size: 3vw; font-weight: 600; text-align: center;}
  .page-serv-slogn-words .col-word span.line { border-bottom: 5px #fff solid;}


  /************ section #page-products ************/

  section#page-products { clear: both; width: 100%; padding: 0;}

  .page-products-banner { width: 100%; position: relative;}
  .page-products-banner img.prod-banner-bg { width: 100%; height: auto; position: relative; z-index: 1;}
  .page-products-banner .banner-title { width: 50%; position: absolute; top: 8.5vw; left: 13vw; z-index: 2;}
  .page-products-banner .banner-title span.style-cn { color: #fff; font-size: 3vw; font-weight: 600;}
  .page-products-banner .banner-title span.style-en { color: #fff; font-size: 1.2vw;}

  ul.prod-sort-list { clear: both; width: 100%; padding: 0 6vw; margin: 3.3vw 0 7vw 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; box-sizing: border-box;}
  ul.prod-sort-list li { padding: 0 2vw; margin: 0 0 1vw 0;}
  ul.prod-sort-list li a { color: #232C35; font-size: 1.4vw; font-weight: 500; text-decoration: none; display: flex; justify-content: flex-start; align-items: center;}
  ul.prod-sort-list li a img.arrow, 
  ul.prod-sort-list li a img.arrow-sel { width: 1.8vw; height: auto; margin: 0 1vw 0 0;}
  ul.prod-sort-list li a:hover span { border-bottom: 2px #232C35 solid;}

  .page-prod-list-full { clear: both; width: 100%; padding: 0 10vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-prod-list-full .prod-box { width: calc(100% / 4); padding: 0 0.6vw; margin: 0 0 9.5vw 0; box-sizing: border-box; background-image: linear-gradient(to bottom, #707070 50%, transparent 50%); background-size: 1px 14px; background-repeat: repeat-y; background-position: right; border: none;}
  .page-prod-list-full .prod-box:nth-child(4n) { background-image: none;}
  .page-prod-list-full .prod-box a { text-decoration: none;}
  .page-prod-list-full .prod-box .pic { width: 100%;}
  .page-prod-list-full .prod-box .pic img { width: 100%; height: auto;}
  .page-prod-list-full .prod-box .title { width: 100%; padding: 1vw 0 0.5vw 0; color: #232C35; font-size: 1.4vw; text-align: center;}


  section#page-prod-slogan { clear: both; width: 100%; padding: 0 0 3.5vw 0; position: relative;}

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

  .page-prod-slogn-words { width: 100%; display: flex; justify-content: center; align-items: center; position: absolute; top: 20vw; left: 0; z-index: 2;}
  .page-prod-slogn-words .col-word { width: 10vw; color: #fff; font-size: 3vw; font-weight: 600; text-align: center;}
  .page-prod-slogn-words .col-word span.line { border-bottom: 5px #fff solid;}

  .page-prev-next { clear: both; width: 100%; padding: 0 10vw; box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
  .page-prev-next a.prev { width: 3vw; height: 3vw; margin: 0 1.5vw; background-image: url(../images/page_prev.webp); background-repeat: no-repeat; background-size: 3vw 3vw; display: block;}
  .page-prev-next a.next { width: 3vw; height: 3vw; margin: 0 1.5vw; background-image: url(../images/page_next.webp); background-repeat: no-repeat; background-size: 3vw 3vw; display: block;}
  .page-prev-next a.prev:hover { width: 3vw; height: 3vw; margin: 0 1.5vw; background-image: url(../images/page_prev_hover.webp); background-repeat: no-repeat; background-size: 3vw 3vw; display: block;}
  .page-prev-next a.next:hover { width: 3vw; height: 3vw; margin: 0 1.5vw; background-image: url(../images/page_next_hover.webp); background-repeat: no-repeat; background-size: 3vw 3vw; display: block;}


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

  section#page-contact { clear: both; width: 100%; padding: 0; background-image: url("../images/page_contact_bg.webp"); background-repeat: no-repeat; background-size: cover; background-position: center top;}

  .page-contact-banner { width: 100%; position: relative;}
  .page-contact-banner img.contact-banner-bg { width: 100%; height: auto; position: relative; z-index: 1;}
  .page-contact-banner .banner-title { width: 50%; position: absolute; top: 8.5vw; left: 13vw; z-index: 2;}
  .page-contact-banner .banner-title span.style-cn { color: #fff; font-size: 3vw; font-weight: 600;}
  .page-contact-banner .banner-title span.style-en { color: #fff; font-size: 1.4vw;}

  .page-contact-form-table { clear: both; width: 100%; padding: 2.5vw 0 11vw 0;}
  .page-contact-form-table .contact-title { width: 100%; margin: 0 0 5.6vw 0; color: #00305D;}
  .page-contact-form-table .contact-title .title { width: 100%; font-size: 3vw; font-weight: 700; text-align: center; line-height: 1.2em;}
  .page-contact-form-table .contact-title .title-en { width: 100%; margin: 1.5vw 0 0.5vw; font-size: 1vw; text-align: center;}
  .page-contact-form-table .contact-title .line { width: 100px; height: 10px; margin: 0 auto; background-color: #1371C9; display: block;}
  .page-contact-form-table .contact-form { width: 60vw; margin: 0 auto;}
  .page-contact-form-table .contact-form .column-full { width: 100%; padding: 1vw 5vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  .page-contact-form-table .contact-form .column-full:nth-child(even) { background-color: rgba(19,113,201,0.15);}
  .page-contact-form-table .contact-form .column-full .icon { width: 3vw; margin: 0 1.5vw 0 0;}
  .page-contact-form-table .contact-form .column-full .icon img { width: 100%; height: auto;}
  .page-contact-form-table .contact-form .column-full .caption { width: 4.8vw; color: #232C35; font-size: 1.4vw;}
  .page-contact-form-table .contact-form .column-full .column { width: calc(100% - 3vw - 1.5vw - 4.8vw); color: #232C35; font-size: 1.4vw;}

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


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

  footer { clear: both; width: 100%; margin: -5px 0 0 0;}

  .footer-contact-con { clear: both; width: 100%; padding: 3vw 13vw 4.5vw 13vw; background-color: #232C35; box-sizing: border-box;}
  .footer-contact-con .contact-title { width: 100%;}
  .footer-contact-con .contact-title .title-en { width: 100%; color: #fff; font-size: 1.8vw; font-weight: 600; line-height: 1.2em; text-align: center;}
  .footer-contact-con .contact-title .title { width: 100%; color: #fff; font-size: 1.2vw; line-height: 1.4em; text-align: center;}
  .footer-contact-con .contact-title .line { width: 5.5vw; height: 10px; margin: 0.3vw auto; background-color: #1371C9; display: block;}
  .footer-contact-con .contact-tel-fax { clear: both; width: 100%; padding: 0 3.5vw; margin: 3vw 0; display: flex; justify-content: center; align-items: center; box-sizing: border-box;}
  .footer-contact-con .contact-tel-fax .tel, 
  .footer-contact-con .contact-tel-fax .fax { width: calc(50% - 1.8vw); color: #fff; font-size: 1.8vw; text-align: center;}
  .footer-contact-con .contact-tel-fax .tel span.num, 
  .footer-contact-con .contact-tel-fax .fax span.num { font-size: 2.4vw;}
  .footer-contact-con .contact-tel-fax .slash { width: 3.6vw;}
  .footer-contact-con .contact-tel-fax .slash img { width: 100%; height: auto;}
  .footer-contact-con .contact-addr-email { clear: both; width: 100%; padding: 0 3.5vw; display: flex; justify-content: center; align-items: center; box-sizing: border-box;}
  .footer-contact-con .contact-addr-email .column-box { width: 25vw; height: 3.5vw; margin: 0 2.5vw;}
  .footer-contact-con .contact-addr-email .column-box a { width: 100%; height: 100%; color: #fff; font-size: 1.2vw; text-decoration: none; border: 3px #fff solid; display: flex; justify-content: center; align-items: center; box-sizing: border-box; transition: 0.5s;}
  .footer-contact-con .contact-addr-email .column-box a img.icon { width: 2.1vw; height: auto; margin: 0 1vw 0 0;}
  .footer-contact-con .contact-addr-email .column-box a:hover { border: 3px #1371C9 solid; background-color: #1371C9;}

  .footer-logo-nav { clear: both; width: 100%; padding: 1vw 13vw; box-sizing: border-box; background-color: #F7F7F5; display: flex; justify-content: flex-start; align-items: center;}
  .footer-logo-nav .footer-logo-title { width: 50%;}
  .footer-logo-nav .footer-logo-title img { width: 29vw; height: auto; margin: 0 0 0 2vw;}
  .footer-logo-nav ul.footer-nav { width: 50%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-end; align-items: center;}
  .footer-logo-nav ul.footer-nav li { padding: 0 2vw; margin: 0; border-right: 1px #232C35 solid;}
  .footer-logo-nav ul.footer-nav li:last-of-type { border-right: 0;}
  .footer-logo-nav ul.footer-nav li a { color: #232C35; font-size: 1.1vw; text-decoration: none;}
  .footer-logo-nav ul.footer-nav li a:hover { border-bottom: 2px #232C35 solid;}

  .footer-copyright-views { clear: both; width: 100%; position: relative;}
  .footer-copyright-views .copyright { width: 100%; padding: 1.5vw 13vw; color: #232C35; font-size: 0.9vw; text-align: center; box-sizing: border-box; position: relative; z-index: 1;}
  .footer-copyright-views .views-box { width: 10vw; color: #232C35; font-size: 0.9vw; text-align: right; position: absolute; top: 1.5vw; right: 13vw; z-index: 2;}


}

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

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

  header { clear: both; width: 100%; height: 120px; padding: 0 20px; box-sizing: border-box; background-color: rgba(35,44,53,0.9); display: flex; justify-content: flex-start; align-items: center; position: absolute; top: 0; left: 0; z-index: 99;}

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

  nav#pc { display: none;}
  nav#mo { width: calc(100% - 500px); height: 100%; display: flex; justify-content: flex-end; align-items: center;}
  nav#mo .nav-icon { width: 50px; color: #fff; font-size: 2.4rem; text-align: center; cursor: pointer;}
  nav#mo ul.nav-menu { width: 100%; padding: 40px 0; margin: 0; box-sizing: border-box; list-style: none; background-color: rgba(35,44,53,1); display: none; position: absolute; top: 120px; left: 0; z-index: 999;}
  nav#mo ul.nav-menu li { width: 100%; padding: 0; margin: 0;}
  nav#mo ul.nav-menu li a { width: 100%; padding: 20px 0; color: #fff; font-size: 1.2rem; text-align: center; text-decoration: none; box-sizing: border-box; transition: 0.5s; display: block;}
  nav#mo ul.nav-menu li a:active { background-color: rgba(93,93,93,0.8);}
  nav#mo ul.nav-menu li a.sel { background-color: rgba(93,93,93,0.8);}


  /************ section #hp-banner ************/

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

  img.hp-banner-bg { width: 140%; height: auto; margin: 0 0 0 -10%; position: relative; z-index: 1;}

  .banner-text { width: 45vw; position: absolute; top: 160px; left: 40px; z-index: 2;}
  .banner-text .text-1 { width: 100%; color: #00305D; font-size: 1.8vw;}
  .banner-text .text-2 { width: 100%; color: #00305D; font-size: 6vw; font-weight: 700;}
  .banner-text .text-3 { width: 100%; color: #1371C9; font-size: 6vw; font-weight: 700; line-height: 1em;}
  .banner-text .text-4 { width: 100%; padding: 2vw 0 0 0; color: #0057B2; font-size: 3.4vw;}


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

  section#hp-about { clear: both; width: 100%; padding: 0 40px 40px 40px; box-sizing: border-box; position: relative;}

  .hp-about-title { clear: both; width: 100%;}
  .hp-about-title .about-title { width: 100%; color: #00305D; font-size: 2.6rem; font-weight: 700; line-height: 1.2em; text-align: center;}
  .hp-about-title .about-title-en { width: 100%; color: #1371C9; font-size: 1rem; line-height: 2em; text-align: center;}
  .hp-about-title .about-title-line { width: 100px; height: 10px; margin: 0 auto; background-color: #1371C9; display: block;}

  .hp-about-con { display: none;}
  .hp-about-con-mo { width: 100%; margin: 40px 0 0 0; font-size: 1.1rem; line-height: 1.6em;}


  /************ section #hp-products ************/

  section#hp-products { clear: both; width: 100%; padding: 80px 40px; box-sizing: border-box; background-image: url("../images/hp_pro_bg.webp"); background-repeat: no-repeat; background-size: 100% auto; background-position: top center;}

  .hp-pro-title { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .hp-pro-title .pro-title { width: 100%; color: #00305D; font-size: 2.6rem; font-weight: 700; line-height: 1.2em;}
  .hp-pro-title .pro-title-line { width: 150px; height: 5px; background-color: #1371C9; display: block;}
  .hp-pro-title .pro-title-en { width: calc(100% - 150px); padding: 0 0 0 10px; color: #00305D; font-size: 1rem; line-height: 2em; box-sizing: border-box;}

  .hp-pro-list { clear: both; width: 100%; margin: 60px 0 0 0; display: flex; justify-content: flex-start;  align-items: center;}
  .hp-pro-list .arrow-prev { width: 40px; padding: 0 10px 0 0; box-sizing: border-box; transition: 0.5s;} 
  .hp-pro-list .arrow-next { width: 40px; padding: 0 0 0 10px; box-sizing: border-box; transition: 0.5s;}
  .hp-pro-list .arrow-prev img.arrow-prev-hover, 
  .hp-pro-list .arrow-next img.arrow-next-hover { width: 30px; height: auto; cursor: pointer; display: none;}
  .hp-pro-list .arrow-prev img.arrow-prev, 
  .hp-pro-list .arrow-next img.arrow-next { width: 30px; height: auto; cursor: pointer; display: block;}
  .hp-pro-list .arrow-prev:hover img.arrow-prev-hover, 
  .hp-pro-list .arrow-next:hover img.arrow-next-hover { width: 30px; height: auto; cursor: pointer; display: block;}
  .hp-pro-list .arrow-prev:hover img.arrow-prev, 
  .hp-pro-list .arrow-next:hover img.arrow-next { width: 30px; height: auto; cursor: pointer; display: none;}  
  .hp-pro-list .pro-list-full { width: calc(100% - 100px);}
  .hp-pro-list .pro-list-full a { text-decoration: none;}
  .hp-pro-list .pro-list-full img { width: 24vw; height: auto;}
  .hp-pro-list .pro-list-full .title { width: 24vw; padding: 0.5vw 0; margin: 0.5vw 0 0 0; color: #fff; font-size: 1.8vw; text-align: center; background-color: #1371C9;}


  /************ section #hp-products-intro ************/

  section#hp-products-intro { clear: both; width: 100%; padding: 0 40px 120px 40px; box-sizing: border-box; background-image: url("../images/hp_pro_intro_bg.webp"); background-repeat: no-repeat; background-size: 100% auto; background-position: top center;}

  .hp-pro-intro-text { width: 100%; padding: 11vw 0 0 50%; box-sizing: border-box;}
  .hp-pro-intro-text .title-name-en { width: 100%; color: #fff; font-size: 4vw; font-weight: 700; line-height: 1em; text-align: center;}
  .hp-pro-intro-text .text-en { width: 100%; padding: 1.5vw 0; color: #fff; font-size: 1.2vw; text-align: center;}
  .hp-pro-intro-text .title-name { width: 100%; color: #fff; font-size: 3.2vw; font-weight: 700; line-height: 1em; text-align: center;}
  .hp-pro-intro-text .line { width: 5.5vw; height: 10px; margin: 2.5vw auto; background-color: #1371C9; display: block;}
  .hp-pro-intro-text .text { clear: both; width: 100%; padding: 0 0 1vw 0; color: #fff; font-size: 2.4vw; line-height: 1em; text-align: center;}
  .hp-pro-intro-text .slogan { width: 22.5vw; height: 5vw; margin: 2vw auto 0 auto; color: #fff; font-size: 2.6vw; line-height: 1em; border: 3px #fff solid; display: flex; justify-content: center; align-items: center;}

  .hp-pro-intro-list { clear: both; width: 100%; margin: 6vw 0 0 0; display: flex; justify-content: center; align-items: center;}
  .hp-pro-intro-list .pro-intro-box { width: calc(100% / 3); padding: 0 1.5vw; box-sizing: border-box; background-image: linear-gradient(to bottom, #707070 50%, transparent 50%); background-size: 1px 12px; background-repeat: repeat-y; background-position: right; border: none;}
  .hp-pro-intro-list .pro-intro-box:last-of-type { background-image: none;}
  .hp-pro-intro-list .pro-intro-box a { text-decoration: none;}
  .hp-pro-intro-list .pro-intro-box .pro-pic { width: 100%;}
  .hp-pro-intro-list .pro-intro-box .pro-pic img { width: 100%; height: auto;}
  .hp-pro-intro-list .pro-intro-box .title { width: 100%; padding: 1vw 0 0 0; color: #00305D; font-size: 1.8vw; text-align: center;}

  .hp-more-btn { clear: both; width: 100%; margin: 100px 0 0 0;}
  .hp-more-btn a { width: 280px; height: 70px; margin: 0 auto; color: #00305D; font-size: 1.4rem; text-decoration: none; border: 3px #00305D solid; display: flex; justify-content: center; align-items: center; transition: 0.5s; box-sizing: border-box;}
  .hp-more-btn a:hover { color: #fff; background-color: #00305D;}


  /************ page about ************/

  .page-about-title { clear: both; width: 100%; padding: 40px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-end;}
  .page-about-title .title { width: 220px; color: #00305D; font-size: 3rem; font-weight: 700; line-height: 1em;}  
  .page-about-title .title-en { width: 100px; color: #00305D; font-size: 1.2rem; font-weight: 500; line-height: 1em;}
  .page-about-title .line { width: 80px; height: 5px; margin: 0 0 5px 0; background-color: #1371C9; display: block;}
  
  .page-about-text { clear: both; width: 100%; padding: 0 40px 100px 40px; color: #232C35; font-size: 1.1rem; line-height: 1.6em; box-sizing: border-box;}


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

  section#page-service { clear: both; width: 100%; padding: 0; background-image: url("../images/page_contact_bg.webp"); background-repeat: no-repeat; background-size: cover; background-position: center top;}

  .page-service-banner { width: 100%; position: relative; overflow: hidden;}
  .page-service-banner img.service-banner-bg { width: 170%; height: auto; position: relative; z-index: 1;}
  .page-service-banner .banner-title { width: 100%; position: absolute; top: 16vw; left: 40px; z-index: 2;}
  .page-service-banner .banner-title span.style-cn { color: #fff; font-size: 5vw; font-weight: 600;}
  .page-service-banner .banner-title span.style-en { color: #fff; font-size: 2vw;}

  .page-service-intro { clear: both; width: 100%; padding: 40px; box-sizing: border-box;}
  .page-service-intro .col-left { width: 100%;}
  .page-service-intro .col-left .service-title { width: 100%; display: flex; justify-content: flex-start; align-items: flex-end;}
  .page-service-intro .col-left .service-title .title { width: 220px; color: #00305D; font-size: 3rem; font-weight: 700; line-height: 1em;}  
  .page-service-intro .col-left .service-title .title-en { width: 100px; color: #00305D; font-size: 1.2rem; font-weight: 500; line-height: 1em;}
  .page-service-intro .col-left .service-title .line { width: 80px; height: 5px; margin: 0 0 5px 0; background-color: #1371C9; display: block;}
  .page-service-intro .col-left .intro-text { width: 100%; margin: 40px 0 0 0; color: #232C35; font-size: 1.1rem; line-height: 1.6em;}
  .page-service-intro .col-left .intro-text span.bigger { font-size: 1.4rem; font-weight: 600;}
  .page-service-intro .col-right { width: 100%;}
  .page-service-intro .col-right img { width: 100%; height: auto;}


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

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

  .page-serv-prod-intro-btn { width: 230px; height: 230px; position: absolute; top: calc(50% - 115px); left: calc(50% - 115px); z-index: 2;}
  .page-serv-prod-intro-btn a { width: 100%; height: 100%; color: #fff; font-size: 2rem; font-width: 600; text-decoration: none; border: 3px #fff solid; background-color: rgba(0,0,0,0.5); border-radius: 100%; display: flex; justify-content: center; align-items: center;}
  .page-serv-prod-intro-btn a:active { background-color: rgba(0,0,0,0.8);}


  section#page-serv-slogan { clear: both; width: 100%; padding: 60px 0 110px 0; position: relative; overflow: hidden;}

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

  .page-serv-slogn-words { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; z-index: 2;}
  .page-serv-slogn-words .col-word { width: 120px; color: #fff; font-size: 2.2rem; font-weight: 600; text-align: center;}
  .page-serv-slogn-words .col-word span.line { border-bottom: 5px #fff solid;}


  /************ section #page-products ************/

  section#page-products { clear: both; width: 100%; padding: 0;}

  .page-products-banner { width: 100%; position: relative; overflow: hidden;}
  .page-products-banner img.prod-banner-bg { width: 170%; height: auto; position: relative; z-index: 1;}
  .page-products-banner .banner-title { width: 100%; position: absolute; top: 16vw; left: 40px; z-index: 2;}
  .page-products-banner .banner-title span.style-cn { color: #fff; font-size: 5vw; font-weight: 600;}
  .page-products-banner .banner-title span.style-en { color: #fff; font-size: 2vw;}

  ul.prod-sort-list { clear: both; width: 100%; padding: 0 40px; margin: 60px 0 140px 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; box-sizing: border-box;}
  ul.prod-sort-list li { padding: 0 20px; margin: 0 0 20px 0;}
  ul.prod-sort-list li a { color: #232C35; font-size: 1.2rem; font-weight: 500; text-decoration: none; display: flex; justify-content: flex-start; align-items: center;}
  ul.prod-sort-list li a img.arrow, 
  ul.prod-sort-list li a img.arrow-sel { width: 30px; height: auto; margin: 0 10px 0 0;}
  ul.prod-sort-list li a:hover span { border-bottom: 2px #232C35 solid;}

  .page-prod-list-full { clear: both; width: 100%; padding: 0 40px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-prod-list-full .prod-box { width: calc(100% / 4); padding: 0 10px; margin: 0 0 100px 0; box-sizing: border-box; background-image: linear-gradient(to bottom, #707070 50%, transparent 50%); background-size: 1px 14px; background-repeat: repeat-y; background-position: right; border: none;}
  .page-prod-list-full .prod-box:nth-child(4n) { background-image: none;}
  .page-prod-list-full .prod-box a { text-decoration: none;}
  .page-prod-list-full .prod-box .pic { width: 100%;}
  .page-prod-list-full .prod-box .pic img { width: 100%; height: auto;}
  .page-prod-list-full .prod-box .title { width: 100%; padding: 20px 0 10px 0; color: #232C35; font-size: 1rem; text-align: center;}


  section#page-prod-slogan { clear: both; width: 100%; padding: 0 0 70px 0; position: relative; overflow: hidden;}

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

  .page-prod-slogn-words { width: 100%; display: flex; justify-content: center; align-items: center; position: absolute; top: 28vw; left: 0; z-index: 2;}
  .page-prod-slogn-words .col-word { width: 15vw; color: #fff; font-size: 5vw; font-weight: 600; text-align: center;}
  .page-prod-slogn-words .col-word span.line { border-bottom: 5px #fff solid;}

  .page-prev-next { clear: both; width: 100%; padding: 0 40px; box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
  .page-prev-next a.prev { width: 36px; height: 36px; margin: 0 20px; background-image: url(../images/page_prev.webp); background-repeat: no-repeat; background-size: 36px 36px; display: block;}
  .page-prev-next a.next { width: 36px; height: 36px; margin: 0 20px; background-image: url(../images/page_next.webp); background-repeat: no-repeat; background-size: 36px 36px; display: block;}
  .page-prev-next a.prev:hover { width: 36px; height: 36px; margin: 0 20px; background-image: url(../images/page_prev_hover.webp); background-repeat: no-repeat; background-size: 36px 36px; display: block;}
  .page-prev-next a.next:hover { width: 36px; height: 36px; margin: 0 20px; background-image: url(../images/page_next_hover.webp); background-repeat: no-repeat; background-size: 36px 36px; display: block;}


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

  section#page-contact { clear: both; width: 100%; padding: 0; background-image: url("../images/page_contact_bg.webp"); background-repeat: no-repeat; background-size: cover; background-position: center top;}

  .page-contact-banner { width: 100%; position: relative; overflow: hidden;}
  .page-contact-banner img.contact-banner-bg { width: 170%; height: auto; position: relative; z-index: 1;}
  .page-contact-banner .banner-title { width: 100%; position: absolute; top: 150px; left: 40px; z-index: 2;}
  .page-contact-banner .banner-title span.style-cn { color: #fff; font-size: 3rem; font-weight: 600;}
  .page-contact-banner .banner-title span.style-en { color: #fff; font-size: 1.4rem;}

  .page-contact-form-table { clear: both; width: 100%; padding: 50px 0 200px 0;}
  .page-contact-form-table .contact-title { width: 100%; margin: 0 0 80px 0; color: #00305D;}
  .page-contact-form-table .contact-title .title { width: 100%; font-size: 3rem; font-weight: 700; text-align: center; line-height: 1.2em;}
  .page-contact-form-table .contact-title .title-en { width: 100%; margin: 30px 0 10px; font-size: 1rem; text-align: center;}
  .page-contact-form-table .contact-title .line { width: 100px; height: 10px; margin: 0 auto; background-color: #1371C9; display: block;}
  .page-contact-form-table .contact-form { width: 100%; padding: 0 40px; box-sizing: border-box;}
  .page-contact-form-table .contact-form .column-full { width: 100%; padding: 10px 50px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  .page-contact-form-table .contact-form .column-full:nth-child(even) { background-color: rgba(19,113,201,0.15);}
  .page-contact-form-table .contact-form .column-full .icon { width: 36px; margin: 0 20px 0 0;}
  .page-contact-form-table .contact-form .column-full .icon img { width: 100%; height: auto;}
  .page-contact-form-table .contact-form .column-full .caption { width: 70px; color: #232C35; font-size: 1.2rem;}
  .page-contact-form-table .contact-form .column-full .column { width: calc(100% - 40px - 20px - 90px); color: #232C35; font-size: 1.2rem;}

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


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

  footer { clear: both; width: 100%; margin: -5px 0 0 0;}

  .footer-contact-con { clear: both; width: 100%; padding: 40px 40px 60px 40px; background-color: #232C35; box-sizing: border-box;}
  .footer-contact-con .contact-title { width: 100%;}
  .footer-contact-con .contact-title .title-en { width: 100%; color: #fff; font-size: 1.8rem; font-weight: 600; line-height: 1.2em; text-align: center;}
  .footer-contact-con .contact-title .title { width: 100%; color: #fff; font-size: 1.2rem; line-height: 2.4em; text-align: center;}
  .footer-contact-con .contact-title .line { width: 110px; height: 10px; margin: 6px auto; background-color: #1371C9; display: block;}
  .footer-contact-con .contact-tel-fax { clear: both; width: 100%; padding: 0; margin: 40px 0; display: flex; justify-content: center; align-items: center; box-sizing: border-box;}
  .footer-contact-con .contact-tel-fax .tel, 
  .footer-contact-con .contact-tel-fax .fax { width: calc(50% - 35px); color: #fff; font-size: 1.2rem; text-align: center;}
  .footer-contact-con .contact-tel-fax .tel span.num, 
  .footer-contact-con .contact-tel-fax .fax span.num { font-size: 1.6rem;}
  .footer-contact-con .contact-tel-fax .slash { width: 60px;}
  .footer-contact-con .contact-tel-fax .slash img { width: 100%; height: auto;}
  .footer-contact-con .contact-addr-email { clear: both; width: 100%; padding: 0; display: flex; justify-content: center; align-items: center; box-sizing: border-box;}
  .footer-contact-con .contact-addr-email .column-box { width: 320px; height: 70px; margin: 0 10px;}
  .footer-contact-con .contact-addr-email .column-box a { width: 100%; height: 100%; color: #fff; font-size: 1.1rem; text-decoration: none; border: 3px #fff solid; display: flex; justify-content: center; align-items: center; box-sizing: border-box; transition: 0.5s;}
  .footer-contact-con .contact-addr-email .column-box a img.icon { width: 40px; height: auto; margin: 0 10px 0 0;}
  .footer-contact-con .contact-addr-email .column-box a:hover { border: 3px #1371C9 solid; background-color: #1371C9;}

  .footer-logo-nav { clear: both; width: 100%; padding: 20px 40px; box-sizing: border-box; background-color: #F7F7F5;}
  .footer-logo-nav .footer-logo-title { width: 100%;}
  .footer-logo-nav .footer-logo-title img { width: 560px; height: auto; margin: 0 auto;}
  .footer-logo-nav ul.footer-nav { width: 100%; padding: 0; margin: 30px 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center;}
  .footer-logo-nav ul.footer-nav li { padding: 0 20px; margin: 0; border-right: 1px #232C35 solid;}
  .footer-logo-nav ul.footer-nav li:last-of-type { border-right: 0;}
  .footer-logo-nav ul.footer-nav li a { color: #232C35; font-size: 1.1rem; text-decoration: none;}
  .footer-logo-nav ul.footer-nav li a:hover { border-bottom: 2px #232C35 solid;}

  .footer-copyright-views { clear: both; width: 100%; padding: 30px 40px; box-sizing: border-box;}
  .footer-copyright-views .copyright { width: 100%; color: #232C35; font-size: 0.9rem; text-align: center; box-sizing: border-box;}
  .footer-copyright-views .views-box { width: 100%; padding: 0 0 20px 0; color: #232C35; font-size: 0.9rem; text-align: center;}


}

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

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

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

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

  nav#pc { display: none;}
  nav#mo { width: calc(100% - 270px); height: 100%; display: flex; justify-content: flex-end; align-items: center;}
  nav#mo .nav-icon { width: 50px; color: #fff; font-size: 2.4rem; text-align: center; cursor: pointer;}
  nav#mo ul.nav-menu { width: 100%; padding: 40px 0; margin: 0; box-sizing: border-box; list-style: none; background-color: rgba(35,44,53,1); display: none; position: absolute; top: 80px; left: 0; z-index: 999;}
  nav#mo ul.nav-menu li { width: 100%; padding: 0; margin: 0;}
  nav#mo ul.nav-menu li a { width: 100%; padding: 20px 0; color: #fff; font-size: 1.2rem; text-align: center; text-decoration: none; box-sizing: border-box; transition: 0.5s; display: block;}
  nav#mo ul.nav-menu li a:active { background-color: rgba(93,93,93,0.8);}
  nav#mo ul.nav-menu li a.sel { background-color: rgba(93,93,93,0.8);}


  /************ section #hp-banner ************/

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

  img.hp-banner-bg { width: 160%; height: auto; margin: 0 0 0 -15%; position: relative; z-index: 1;}

  .banner-text { width: 55vw; position: absolute; top: 100px; left: 20px; z-index: 2;}
  .banner-text .text-1 { width: 100%; color: #00305D; font-size: 2.4vw;}
  .banner-text .text-2 { width: 100%; color: #00305D; font-size: 8vw; font-weight: 700;}
  .banner-text .text-3 { width: 100%; color: #1371C9; font-size: 8vw; font-weight: 700; line-height: 1em;}
  .banner-text .text-4 { width: 100%; padding: 2vw 0 0 0; color: #0057B2; font-size: 4vw;}


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

  section#hp-about { clear: both; width: 100%; padding: 0 20px 80px 20px; box-sizing: border-box; position: relative;}

  .hp-about-title { clear: both; width: 100%;}
  .hp-about-title .about-title { width: 100%; color: #00305D; font-size: 2.6rem; font-weight: 700; line-height: 1.2em; text-align: center;}
  .hp-about-title .about-title-en { width: 100%; color: #1371C9; font-size: 1rem; line-height: 2em; text-align: center;}
  .hp-about-title .about-title-line { width: 100px; height: 10px; margin: 0 auto; background-color: #1371C9; display: block;}

  .hp-about-con { display: none;}
  .hp-about-con-mo { width: 100%; margin: 40px 0 0 0; font-size: 1.1rem; line-height: 1.6em;}


  /************ section #hp-products ************/

  section#hp-products { clear: both; width: 100%; padding: 20px 20px 80px 20px; box-sizing: border-box; background-image: url("../images/hp_pro_bg.webp"); background-repeat: no-repeat; background-size: 160% auto; background-position: top center;}

  .hp-pro-title { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .hp-pro-title .pro-title { width: 100%; color: #00305D; font-size: 2.6rem; font-weight: 700; line-height: 1.2em;}
  .hp-pro-title .pro-title-line { width: 150px; height: 5px; background-color: #1371C9; display: block;}
  .hp-pro-title .pro-title-en { width: calc(100% - 150px); padding: 0 0 0 10px; color: #00305D; font-size: 1rem; line-height: 2em; box-sizing: border-box;}

  .hp-pro-list { clear: both; width: 100%; margin: 60px 0 0 0; display: flex; justify-content: flex-start;  align-items: center;}
  .hp-pro-list .arrow-prev { width: 40px; padding: 0 10px 0 0; box-sizing: border-box; transition: 0.5s;} 
  .hp-pro-list .arrow-next { width: 40px; padding: 0 0 0 10px; box-sizing: border-box; transition: 0.5s;}
  .hp-pro-list .arrow-prev img.arrow-prev-hover, 
  .hp-pro-list .arrow-next img.arrow-next-hover { width: 30px; height: auto; cursor: pointer; display: none;}
  .hp-pro-list .arrow-prev img.arrow-prev, 
  .hp-pro-list .arrow-next img.arrow-next { width: 30px; height: auto; cursor: pointer; display: block;}
  .hp-pro-list .arrow-prev:hover img.arrow-prev-hover, 
  .hp-pro-list .arrow-next:hover img.arrow-next-hover { width: 30px; height: auto; cursor: pointer; display: block;}
  .hp-pro-list .arrow-prev:hover img.arrow-prev, 
  .hp-pro-list .arrow-next:hover img.arrow-next { width: 30px; height: auto; cursor: pointer; display: none;}  
  .hp-pro-list .pro-list-full { width: calc(100% - 100px);}
  .hp-pro-list .pro-list-full a { text-decoration: none;}
  .hp-pro-list .pro-list-full img { width: 100%; height: auto;}
  .hp-pro-list .pro-list-full .title { width: 100%; padding: 0.5vw 0; margin: 0.5vw 0 0 0; color: #fff; font-size: 4vw; text-align: center; background-color: #1371C9;}


  /************ section #hp-products-intro ************/

  section#hp-products-intro { clear: both; width: 100%; padding: 0 20px 120px 20px; box-sizing: border-box; background-image: url("../images/hp_pro_intro_bg.webp"); background-repeat: no-repeat; background-size: 200% auto; background-position: top center;}

  .hp-pro-intro-text { width: 100%; padding: 100px 0 0 0; box-sizing: border-box;}
  .hp-pro-intro-text .title-name-en { width: 100%; color: #fff; font-size: 3rem; font-weight: 700; line-height: 1em; text-align: center; text-shadow: 0px 0px 5px #000,0px 0px 5px #000,0px 0px 5px #000,0px 0px 5px #000;}
  .hp-pro-intro-text .text-en { width: 100%; padding: 30px 0; color: #fff; font-size: 1.2rem; text-align: center; text-shadow: 0px 0px 5px #000,0px 0px 5px #000,0px 0px 5px #000,0px 0px 5px #000;}
  .hp-pro-intro-text .title-name { width: 100%; color: #fff; font-size: 2.6rem; font-weight: 700; line-height: 1em; text-align: center; text-shadow: 0px 0px 5px #000,0px 0px 5px #000,0px 0px 5px #000,0px 0px 5px #000;}
  .hp-pro-intro-text .line { width: 110px; height: 10px; margin: 30px auto; background-color: #1371C9; display: block;}
  .hp-pro-intro-text .text { clear: both; width: 100%; padding: 0 0 20px 0; color: #fff; font-size: 1.8rem; line-height: 1em; text-align: center; text-shadow: 0px 0px 5px #000,0px 0px 5px #000,0px 0px 5px #000,0px 0px 5px #000;}
  .hp-pro-intro-text .slogan { width: 300px; height: 60px; margin: 20px auto 0 auto; color: #fff; font-size: 2rem; line-height: 1em; border: 3px #fff solid; background-color: transparent; display: flex; justify-content: center; align-items: center; text-shadow: 0px 0px 5px #000,0px 0px 5px #000,0px 0px 5px #000,0px 0px 5px #000; -moz-box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.5);-webkit-box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.5);box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.5);}

  .hp-pro-intro-list { clear: both; width: 100%; margin: 60px 0 0 0;}
  .hp-pro-intro-list .pro-intro-box { width: 100%; padding: 20px; box-sizing: border-box; background-image: linear-gradient(to right, #707070 50%, transparent 50%); background-size: 12px 2px; background-repeat: repeat-x; background-position: bottom; border: none;}
  .hp-pro-intro-list .pro-intro-box:last-of-type { background-image: none;}
  .hp-pro-intro-list .pro-intro-box a { text-decoration: none;}
  .hp-pro-intro-list .pro-intro-box .pro-pic { width: 100%;}
  .hp-pro-intro-list .pro-intro-box .pro-pic img { width: 100%; height: auto;}
  .hp-pro-intro-list .pro-intro-box .title { width: 100%; padding: 20px 0 0 0; color: #00305D; font-size: 1.2rem; text-align: center;}

  .hp-more-btn { clear: both; width: 100%; margin: 100px 0 0 0;}
  .hp-more-btn a { width: 280px; height: 70px; margin: 0 auto; color: #00305D; font-size: 1.4rem; text-decoration: none; border: 3px #00305D solid; display: flex; justify-content: center; align-items: center; transition: 0.5s; box-sizing: border-box;}
  .hp-more-btn a:hover { color: #fff; background-color: #00305D;}


  /************ page about ************/

  .page-about-title { clear: both; width: 100%; padding: 40px 20px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-end;}
  .page-about-title .title { width: 220px; color: #00305D; font-size: 3rem; font-weight: 700; line-height: 1em;}  
  .page-about-title .title-en { width: 100px; color: #00305D; font-size: 1.2rem; font-weight: 500; line-height: 1em;}
  .page-about-title .line { width: 80px; height: 5px; margin: 0 0 5px 0; background-color: #1371C9; display: block;}
  
  .page-about-text { clear: both; width: 100%; padding: 0 20px 100px 20px; color: #232C35; font-size: 1.1rem; line-height: 1.6em; box-sizing: border-box;}


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

  section#page-service { clear: both; width: 100%; padding: 0; background-image: url("../images/page_contact_bg.webp"); background-repeat: no-repeat; background-size: cover; background-position: center top;}

  .page-service-banner { width: 100%; position: relative; overflow: hidden;}
  .page-service-banner img.service-banner-bg { width: 250%; height: auto; position: relative; z-index: 1;}
  .page-service-banner .banner-title { width: 100%; position: absolute; top: 22vw; left: 20px; z-index: 2;}
  .page-service-banner .banner-title span.style-cn { color: #fff; font-size: 8vw; font-weight: 600;}
  .page-service-banner .banner-title span.style-en { color: #fff; font-size: 3vw;}

  .page-service-intro { clear: both; width: 100%; padding: 40px 20px; box-sizing: border-box;}
  .page-service-intro .col-left { width: 100%;}
  .page-service-intro .col-left .service-title { width: 100%; display: flex; justify-content: flex-start; align-items: flex-end;}
  .page-service-intro .col-left .service-title .title { width: 220px; color: #00305D; font-size: 3rem; font-weight: 700; line-height: 1em;}  
  .page-service-intro .col-left .service-title .title-en { width: 100px; color: #00305D; font-size: 1.2rem; font-weight: 500; line-height: 1em;}
  .page-service-intro .col-left .service-title .line { width: 80px; height: 5px; margin: 0 0 5px 0; background-color: #1371C9; display: block;}
  .page-service-intro .col-left .intro-text { width: 100%; margin: 40px 0 0 0; color: #232C35; font-size: 1.1rem; line-height: 1.6em;}
  .page-service-intro .col-left .intro-text span.bigger { font-size: 1.4rem; font-weight: 600;}
  .page-service-intro .col-right { width: 100%;}
  .page-service-intro .col-right img { width: 100%; height: auto;}


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

  img.serv-prod-intro-bg { width: 180%; height: auto; margin: 0 0 0 -40%; position: relative; z-index: 1;}

  .page-serv-prod-intro-btn { width: 200px; height: 200px; position: absolute; top: calc(50% - 100px); left: calc(50% - 100px); z-index: 2;}
  .page-serv-prod-intro-btn a { width: 100%; height: 100%; color: #fff; font-size: 2rem; font-width: 600; text-decoration: none; border: 3px #fff solid; background-color: rgba(0,0,0,0.5); border-radius: 100%; display: flex; justify-content: center; align-items: center;}
  .page-serv-prod-intro-btn a:active { background-color: rgba(0,0,0,0.8);}


  section#page-serv-slogan { clear: both; width: 100%; padding: 60px 0 110px 0; position: relative; overflow: hidden;}

  img.serv-slogan-bg { width: 180%; height: auto; margin: 0 0 0 -40%; position: relative; z-index: 1;}

  .page-serv-slogn-words { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; z-index: 2;}
  .page-serv-slogn-words .col-word { width: 100px; margin: 0 0 40px 0; color: #fff; font-size: 2.2rem; font-weight: 600; line-height: 1em; text-align: center;}
  .page-serv-slogn-words .col-word span.line { border-bottom: 5px #fff solid;}


  /************ section #page-products ************/

  section#page-products { clear: both; width: 100%; padding: 0;}

  .page-products-banner { width: 100%; position: relative; overflow: hidden;}
  .page-products-banner img.prod-banner-bg { width: 250%; height: auto; position: relative; z-index: 1;}
  .page-products-banner .banner-title { width: 100%; position: absolute; top: 22vw; left: 20px; z-index: 2;}
  .page-products-banner .banner-title span.style-cn { color: #fff; font-size: 8vw; font-weight: 600;}
  .page-products-banner .banner-title span.style-en { color: #fff; font-size: 3vw;}

  ul.prod-sort-list { clear: both; width: 100%; padding: 0 20px; margin: 60px 0 80px 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; box-sizing: border-box;}
  ul.prod-sort-list li { padding: 0 20px; margin: 0 0 20px 0;}
  ul.prod-sort-list li a { color: #232C35; font-size: 1.1rem; font-weight: 500; text-decoration: none; display: flex; justify-content: flex-start; align-items: center;}
  ul.prod-sort-list li a img.arrow, 
  ul.prod-sort-list li a img.arrow-sel { width: 26px; height: auto; margin: 0 10px 0 0;}
  ul.prod-sort-list li a:active span { border-bottom: 2px #232C35 solid;}

  .page-prod-list-full { clear: both; width: 100%; padding: 0 20px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-prod-list-full .prod-box { width: calc(100% / 2); padding: 0 5px; margin: 0 0 60px 0; box-sizing: border-box; background-image: linear-gradient(to bottom, #707070 50%, transparent 50%); background-size: 1px 14px; background-repeat: repeat-y; background-position: right; border: none;}
  .page-prod-list-full .prod-box:nth-child(2n) { background-image: none;}
  .page-prod-list-full .prod-box a { text-decoration: none;}
  .page-prod-list-full .prod-box .pic { width: 100%;}
  .page-prod-list-full .prod-box .pic img { width: 100%; height: auto;}
  .page-prod-list-full .prod-box .title { width: 100%; padding: 20px 0 10px 0; color: #232C35; font-size: 1rem; text-align: center;}


  section#page-prod-slogan { clear: both; width: 100%; padding: 0 0 70px 0; position: relative; overflow: hidden;}

  img.prod-slogan-bg { width: 180%; height: auto; margin: 0 0 0 -40%; position: relative; z-index: 1;}

  .page-prod-slogn-words { width: 100%; display: flex; justify-content: center; align-items: center; position: absolute; top: 34vw; left: 0; z-index: 2;}
  .page-prod-slogn-words .col-word { width: 100px; color: #fff; font-size: 2.2rem; font-weight: 600; text-align: center;}
  .page-prod-slogn-words .col-word span.line { border-bottom: 5px #fff solid;}

  .page-prev-next { clear: both; width: 100%; padding: 0 40px; box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
  .page-prev-next a.prev { width: 36px; height: 36px; margin: 0 20px; background-image: url(../images/page_prev.webp); background-repeat: no-repeat; background-size: 36px 36px; display: block;}
  .page-prev-next a.next { width: 36px; height: 36px; margin: 0 20px; background-image: url(../images/page_next.webp); background-repeat: no-repeat; background-size: 36px 36px; display: block;}
  .page-prev-next a.prev:active { width: 36px; height: 36px; margin: 0 20px; background-image: url(../images/page_prev_hover.webp); background-repeat: no-repeat; background-size: 36px 36px; display: block;}
  .page-prev-next a.next:active { width: 36px; height: 36px; margin: 0 20px; background-image: url(../images/page_next_hover.webp); background-repeat: no-repeat; background-size: 36px 36px; display: block;}


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

  section#page-contact { clear: both; width: 100%; padding: 0; background-image: url("../images/page_contact_bg.webp"); background-repeat: no-repeat; background-size: cover; background-position: center top;}

  .page-contact-banner { width: 100%; position: relative; overflow: hidden;}
  .page-contact-banner img.contact-banner-bg { width: 250%; height: auto; position: relative; z-index: 1;}
  .page-contact-banner .banner-title { width: 100%; position: absolute; top: 22vw; left: 20px; z-index: 2;}
  .page-contact-banner .banner-title span.style-cn { color: #fff; font-size: 8vw; font-weight: 600;}
  .page-contact-banner .banner-title span.style-en { color: #fff; font-size: 3vw;}

  .page-contact-form-table { clear: both; width: 100%; padding: 50px 0 100px 0;}
  .page-contact-form-table .contact-title { width: 100%; margin: 0 0 80px 0; color: #00305D;}
  .page-contact-form-table .contact-title .title { width: 100%; font-size: 3rem; font-weight: 700; text-align: center; line-height: 1.2em;}
  .page-contact-form-table .contact-title .title-en { width: 100%; margin: 30px 0 10px; font-size: 1rem; text-align: center;}
  .page-contact-form-table .contact-title .line { width: 100px; height: 10px; margin: 0 auto; background-color: #1371C9; display: block;}
  .page-contact-form-table .contact-form { width: 100%; padding: 0 20px; box-sizing: border-box;}
  .page-contact-form-table .contact-form .column-full { width: 100%; padding: 10px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  .page-contact-form-table .contact-form .column-full:nth-child(even) { background-color: rgba(19,113,201,0.15);}
  .page-contact-form-table .contact-form .column-full .icon { width: 36px; margin: 0 20px 0 0;}
  .page-contact-form-table .contact-form .column-full .icon img { width: 100%; height: auto;}
  .page-contact-form-table .contact-form .column-full .caption { width: 70px; color: #232C35; font-size: 1.2rem;}
  .page-contact-form-table .contact-form .column-full .column { width: calc(100% - 40px - 20px - 90px); color: #232C35; font-size: 1.2rem;}

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


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

  footer { clear: both; width: 100%; margin: -5px 0 0 0;}

  .footer-contact-con { clear: both; width: 100%; padding: 40px 2px 60px 20px; background-color: #232C35; box-sizing: border-box;}
  .footer-contact-con .contact-title { width: 100%;}
  .footer-contact-con .contact-title .title-en { width: 100%; color: #fff; font-size: 1.8rem; font-weight: 600; line-height: 1.2em; text-align: center;}
  .footer-contact-con .contact-title .title { width: 100%; color: #fff; font-size: 1.2rem; line-height: 1.4em; text-align: center;}
  .footer-contact-con .contact-title .line { width: 110px; height: 10px; margin: 6px auto; background-color: #1371C9; display: block;}
  .footer-contact-con .contact-tel-fax { clear: both; width: 100%; padding: 0; margin: 40px 0; box-sizing: border-box;}
  .footer-contact-con .contact-tel-fax .tel, 
  .footer-contact-con .contact-tel-fax .fax { width: 100%; color: #fff; font-size: 1.8rem; text-align: center;}
  .footer-contact-con .contact-tel-fax .tel span.num, 
  .footer-contact-con .contact-tel-fax .fax span.num { font-size: 2.4rem;}
  .footer-contact-con .contact-tel-fax .slash { width: 30px; margin: 0 auto;}
  .footer-contact-con .contact-tel-fax .slash img { width: 100%; height: auto;}
  .footer-contact-con .contact-addr-email { clear: both; width: 100%;}
  .footer-contact-con .contact-addr-email .column-box { width: 320px; height: 70px; margin: 10px auto;}
  .footer-contact-con .contact-addr-email .column-box a { width: 100%; height: 100%; color: #fff; font-size: 1.1rem; text-decoration: none; border: 3px #fff solid; display: flex; justify-content: center; align-items: center; box-sizing: border-box; transition: 0.5s;}
  .footer-contact-con .contact-addr-email .column-box a img.icon { width: 40px; height: auto; margin: 0 10px 0 0;}
  .footer-contact-con .contact-addr-email .column-box a:hover { border: 3px #1371C9 solid; background-color: #1371C9;}

  .footer-logo-nav { clear: both; width: 100%; padding: 20px 20px; box-sizing: border-box; background-color: #F7F7F5;}
  .footer-logo-nav .footer-logo-title { width: 100%;}
  .footer-logo-nav .footer-logo-title img { width: 560px; max-width: 100%; height: auto; margin: 0 auto;}
  .footer-logo-nav ul.footer-nav { width: 100%; padding: 0; margin: 30px 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center;}
  .footer-logo-nav ul.footer-nav li { padding: 0 10px; margin: 0; border-right: 1px #232C35 solid;}
  .footer-logo-nav ul.footer-nav li:last-of-type { border-right: 0;}
  .footer-logo-nav ul.footer-nav li a { color: #232C35; font-size: 1rem; text-decoration: none;}
  .footer-logo-nav ul.footer-nav li a:hover { border-bottom: 2px #232C35 solid;}

  .footer-copyright-views { clear: both; width: 100%; padding: 30px 40px; box-sizing: border-box;}
  .footer-copyright-views .copyright { width: 100%; color: #232C35; font-size: 0.9rem; text-align: center; box-sizing: border-box;}
  .footer-copyright-views .views-box { width: 100%; padding: 0 0 20px 0; color: #232C35; font-size: 0.9rem; text-align: center;}
  

}