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

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

body { width: 100%; padding:0; margin:0 auto; color: #fff; font-size:1em; font-family: "Noto Sans TC", sans-serif, "微軟正黑體", Arial; background-color: #f0f1f1; display: block; position: relative; overflow-x: hidden;}

img { border:0; display: block;}

html, body { height: 100%;}

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

div.brk { clear: both;}


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

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

  header { width: 100%; height: 100px; padding: 0 calc(50% - 660px); background-color: #fff; box-sizing: border-box; position: relative;}

  header img.logo-header { width: 197px; height: auto; position: absolute; top: 0; left: calc(50% - 660px); z-index: 9999;}
  
  header nav#pc { width: 100%; height: 100px; display: flex; justify-content: flex-end; align-items: center;}
  header nav#pc ul.nav { width: calc(100% - 160px); height: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-end;}
  header nav#pc ul.nav li { height: 100%; padding: 0; margin: 0;}
  header nav#pc ul.nav li a { height: 100%; padding: 0 10px; color: #414141; font-size: 1.4em; text-decoration: none; display: flex; align-items: center;}
  header nav#pc ul.nav li a:hover { color: #fff;}
  header nav#pc .social-icon { width: 160px; display: flex; justify-content: flex-end; align-items: center;}
  header nav#pc .social-icon img { width: 30px; height: auto; margin: 0 8px;}

  header .nav-icon { display: none;}
  nav#mo { display: none;}


  /************ banner ************/

  .banner-box { clear: both; width: 100%; height: 40vw; overflow: hidden; position: relative;}
  .banner-box img { width: 100%; height: auto;}

  .banner-box img.hp-banner-text { width: 24vw; height: auto; position: absolute; top: 13vw; right: 25vw; z-index: 99;}

  .page-banner { clear: both; width: 100%; height: 21vw; overflow: hidden; position: relative;}
  .page-banner img.banner { width: 100%; height: auto; position: relative; z-index: 1;}
  .page-banner img.text { width: 21vw; height: auto; position: absolute; top: 3.5vw; right: 30vw; z-index: 2;}


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

  section#hp-service { clear: both; width: 100%; padding: 55px calc(50% - 660px); box-sizing: border-box;}

  .hp-serv-title { width: 100%; margin: 0 0 60px 0;}
  .hp-serv-title img { width: 648px; height: auto;}

  .hp-serv-items { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: flex-start;}
  .hp-serv-items .item-box { width: calc(100% / 4); padding: 0 20px; box-sizing: border-box;}
  .hp-serv-items .item-box .pic { width: 100%;}
  .hp-serv-items .item-box .pic img { width: 100%; height: auto; margin: 0 0 35px 0;}
  .hp-serv-items .item-box .text { width: 100%; color: #3E3A39; font-size: 1.4em; font-weight: 600; line-height: 2em; text-align: center;}


  /************ section #hp-case-sample ************/

  section#hp-case-sample { clear: both; width: 75%; background-color: #fff; float: right; display: flex; justify-content: flex-start;}

  .hp-sample-pic { width: 45%;}
  .hp-sample-pic img { width: 100%; height: auto;}

  .hp-sample-content { width: 55%; padding: 75px 120px; box-sizing: border-box;}
  .hp-sample-title { width: 100%; margin: 0 0 40px 0;}
  .hp-sample-title img { width: 430px; height: auto;}
  .hp-sample-intro { width: 100%; color: #3E3A39; font-size: 1.1em; line-height: 1.8em;}


  /************ section #hp-goodserv ************/

  section#hp-goodserv { clear: both; width: 100%; padding: 90px calc(50% - 660px) 0 calc(50% - 660px); box-sizing: border-box; display: flex; justify-content: flex-start; flex-wrap: wrap;}

  .hp-goodserv-item-lf { width: 50%; margin: 0 0 50px 0;}
  .hp-goodserv-item-lf .hp-goodserv-title { width: 100%; margin: 0 0 30px 0;}
  .hp-goodserv-item-lf .hp-goodserv-title img { width: 618px; height: auto;}
  .hp-goodserv-item-lf .hp-goodserv-text { width: 525px; color: #3E3A39; font-size: 1.2em; line-height: 2em;}
  .hp-goodserv-item-lf .hp-goodserv-text font.title { font-size: 1.4em; font-weight: 600;}

  .hp-goodserv-item-rt { width: 50%; margin: 0 0 50px 0;}
  .hp-goodserv-item-rt .hp-goodserv-title { width: 100%; margin: 60px 0 30px 0;}
  .hp-goodserv-item-rt .hp-goodserv-title img { width: 623px; height: auto;}
  .hp-goodserv-item-rt .hp-goodserv-text { width: 525px; color: #3E3A39; font-size: 1.2em; line-height: 2em;}
  .hp-goodserv-item-rt .hp-goodserv-text font.title { font-size: 1.4em; font-weight: 600;}
  
  .hp-goodserv-illu { width: 50%; margin: 0 0 50px 0;}
  .hp-goodserv-illu img { width: 70%; margin: 0 0 0 70px;}


  /************ section #hp-moreinfor ************/

  section#hp-moreinfor { clear: both; width: 100%; padding: 60px calc(50% - 660px); background-image: url("../images/hp_moreinfor_bg.jpg"); background-size: cover; background-repeat: no-repeat; box-sizing: border-box; position: relative;}

  .hp-moreinfor-title { width: 100%; padding: 0 70px; margin: 0 0 35px 0; box-sizing: border-box;}
  .hp-moreinfor-title img { width: 650px; height: auto;}

  .hp-moreinfor-list { clear: both; width: 48%; padding: 0 70px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; float: left;}
  .hp-moreinfor-list .dot { width: 40px; margin: 0 0 12px 0;}
  .hp-moreinfor-list .dot img { width: 26px; height: auto;}
  .hp-moreinfor-list .title { width: calc(100% - 40px); margin: 0 0 12px 0; color: #000; font-size: 1.6em; font-weight: 600; letter-spacing: 0.1em;}

  .hp-moreinfor-bt { width: 52%; float: right;}
  .hp-moreinfor-bt img.bt { width: 480px; height: auto; margin: 130px 0 0 0; border: 2px #fff solid;}

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

  section#page-case { clear: both; width: 100%; padding: 50px calc(50% - 660px); box-sizing: border-box;}

  img.page-title-case { clear: both; width: 700px; height: auto; margin: 0 auto 15px auto;}

  .page-title-text { clear: both; width: 100%; margin: 0 0 45px 0; color: #595757; font-size: 1.2em; text-align: center;}

  hr { clear: both; width: 100%; margin: 0 0 20px 0; border: 1px #E35514 solid;}

  .case-full-list { clear: both; width: 100%; padding: 40px 0; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .case-full-list .case-box { width: calc(100% / 4 - 40px); margin: 0 20px 30px 20px; position: relative;}
  .case-full-list .case-box a { width: 100%; text-decoration: none; display: block;}
  .case-full-list .case-box a .mask { width: 100%; height: 100%; color: #fff; font-size: 4em; background-color: rgba(0, 0, 0, 0.6); position: absolute; top: 0; left: 0; z-index: 9; display: none; justify-content: center; align-items: center;}
  .case-full-list .case-box a:hover .mask { display: flex;}
  .case-full-list .case-box a .pic { width: 100%;}
  .case-full-list .case-box a .pic img { width: 100%; height: auto;}
  .case-full-list .case-box a .title { width: 100%; padding: 10px; color: #414141; font-size: 0.9em; display: flex; align-items: center; box-sizing: border-box;}
  .case-full-list .case-box a .title img.icon { width: 20px; height: auto; margin: 0 5px 0 0;}

  ul#case-tabs { clear: both; width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-start;}
  ul#case-tabs li { width: 142px; padding: 0; margin: 0 15px 15px 0;}
  ul#case-tabs li a { width: 100%; padding: 5px 0; color: #000; font-size: 1.2em; font-weight: 600; text-align: center; text-decoration: none; border: 1px #fff solid; background-color: #fff; display: block;}
  ul#case-tabs li a:hover { background-color: #ccc;}
  ul#case-tabs li a.sel { color: #fff; background-color: #E35514;}

  #panel div { display: none;}

  .case-tab-content { clear: both; width: 1320px; padding: 35px 0; color: #000;}
  .case-tab-content #panel .case-list-full { clear: both; width: 100%;}
  .case-tab-content #panel .case-list-full .case-box { width: 440px; padding: 0 20px 40px 20px; box-sizing: border-box; float: left;}
  .case-tab-content #panel .case-list-full .case-box .case-pic  { width: 100%;}
  .case-tab-content #panel .case-list-full .case-box .case-pic img { width: 100%; height: auto;}
  .case-tab-content #panel .case-list-full .case-box .case-title { width: 100%; padding: 15px 0 0 0; display: flex; justify-content: center; align-items: flex-start;}
  .case-tab-content #panel .case-list-full .case-box .case-title .icon { width: 30px; margin: 5px 0 0 0;}
  .case-tab-content #panel .case-list-full .case-box .case-title .icon img { width: 20px; height: auto;}
  .case-tab-content #panel .case-list-full .case-box .case-title .title { color: #000; font-size: 1.2em;}
  .case-tab-content #panel .case-list-full .case-box .case-title .title a { color: #000; text-decoration: none;}
  .case-tab-content #panel .case-list-full .case-box .case-title .title a:hover { color: #E35514;}

  #pages-num-box { clear: both; width: 100%; display: flex; justify-content: center; align-items: flex-start;}
  #pages-num-box.top { margin: 0 0 35px 0;}
  #pages-num-box.bottom { margin: 35px 0 0 0;}
  #pages-num-box .arrow { width: 28px; margin: 10px 0 0 0;}
  #pages-num-box img.arrow { width: 22px; height: auto; margin: 0 auto;}
  #pages-num-box ul.pages { padding: 0; margin: 0 5px; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  #pages-num-box ul.pages li { padding: 0; margin: 5px;}
  #pages-num-box ul.pages li a { color: #000; font-size: 1.1em; text-decoration: none;}
  #pages-num-box ul.pages li a:hover { color: #E35514; font-weight: 600;}
  #pages-num-box ul.pages li a.sel { color: #E35514; font-size: 1.4em; font-weight: 600;}


  /************ section #page-inquire ************/

  section#page-inquire { clear: both; width: 100%; padding: 50px calc(50% - 660px); box-sizing: border-box;}

  .inquire-form-table { width: 80%; margin: 40px auto 0 auto;}
  .inquire-form-table form { display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .inquire-form-table .caption { width: 130px; padding: 8px 10px 0 0; margin: 0 0 20px 0; color: #414141; font-size: 1.2em; text-align: right; box-sizing: border-box;}
  .inquire-form-table .column-1 { width: calc(50% - 130px); margin: 0 0 20px 0;}
  .inquire-form-table .column-1-2 { width: calc(50% - 130px); padding: 8px 0 0 0; margin: 0 0 20px 0; color: #414141; font-size: 1.2em;}
  .inquire-form-table .column-1 input[type=text], .column-1 input[type=email], .column-1 input[type=tel], .column-2 input[type=text] { width: 100%; padding: 10px; color: rgb(71, 71, 71); font-size:1em; font-family: "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; box-sizing: border-box;}
  .inquire-form-table .column-1 select { width: 100%; padding: 10px; color: rgb(71, 71, 71); font-size:1em; font-family: "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; box-sizing: border-box;}
  .inquire-form-table .column-2 { width: calc(100% - 130px); margin: 0 0 20px 0;}
  .inquire-form-table .column-2 textarea { width: 100%; height: 160px; padding: 10px; color: rgb(71, 71, 71); font-size:1em; font-family: "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; box-sizing: border-box;}
  .inquire-form-table .column-2 input[type=submit] { width: 160px; padding: 8px 0; color: #fff; font-size: 1.2em; text-align: center; border: 0; border-radius: 10px; background-color: #E35514; cursor: pointer;}


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

  footer { clear: both; width: 100%; padding: 60px 0; position: relative;}

  .footer-bar { width: 100%; padding: 15px calc(50% - 660px); background-color: #E35514; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start;}
  .footer-bar .footer-nav { width: calc(100% - 400px); padding: 0 0 0 175px; box-sizing: border-box;}
  .footer-bar .footer-nav .nav { width: 100%; margin: 0 0 10px 0; color: #fff; font-size: 1.4em; font-weight: 300;}
  .footer-bar .footer-nav .nav a { padding: 0 0 2px 0; color: #fff; text-decoration: none; border-bottom: 1px transparent solid;}
  .footer-bar .footer-nav .nav a:hover { border-bottom: 1px #fff solid;}
  .footer-bar .footer-nav .address { width: 100%; margin: 20px 0 0 0; color: #231815; font-size: 0.9em; font-weight: 600;}
  .footer-bar .footer-social-icon { width: 400px; padding: 5px 35px 0 0; box-sizing: border-box;}
  .footer-bar .footer-social-icon .icon { clear: both; width: 100%; margin: 0 0 5px 0; display: flex; justify-content: flex-end; align-items: center;}
  .footer-bar .footer-social-icon .icon img { width: 30px; height: auto; margin: 0 0 0 6px;}
  .footer-bar .footer-social-icon .copyright { clear: both; width: 100%; font-size: 0.8em; text-align: right;}
  
  img.logo-footer { width: 148px; height: auto; position: absolute; top: 15px; left: calc(50% - 660px);}


}

@media screen and (min-width: 1024px) and (max-width: 1359px) {
    
  /************ header + nav ************/

  header { width: 100%; height: 100px; padding: 0 calc(50% - 495px); background-color: #fff; box-sizing: border-box; position: relative;}

  header img.logo-header { width: 197px; height: auto; position: absolute; top: 0; left: calc(50% - 495px); z-index: 9999;}
  
  header nav#pc { width: 100%; height: 100px; display: flex; justify-content: flex-end; align-items: center;}
  header nav#pc ul.nav { width: calc(100% - 160px); height: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-end;}
  header nav#pc ul.nav li { height: 100%; padding: 0; margin: 0;}
  header nav#pc ul.nav li a { height: 100%; padding: 0 10px; color: #414141; font-size: 1.4em; text-decoration: none; display: flex; align-items: center;}
  header nav#pc ul.nav li a:hover { color: #fff;}
  header nav#pc .social-icon { width: 160px; display: flex; justify-content: flex-end; align-items: center;}
  header nav#pc .social-icon img { width: 30px; height: auto; margin: 0 8px;}

  header .nav-icon { display: none;}
  nav#mo { display: none;}


  /************ banner ************/

  .banner-box { clear: both; width: 100%; height: 40vw; overflow: hidden; position: relative;}
  .banner-box img { width: 100%; height: auto;}

  .banner-box img.hp-banner-text { width: 24vw; height: auto; position: absolute; top: 13vw; right: 15vw; z-index: 99;}

  .page-banner { clear: both; width: 100%; height: 21vw; overflow: hidden; position: relative;}
  .page-banner img.banner { width: 100%; height: auto; position: relative; z-index: 1;}
  .page-banner img.text { width: 30vw; height: auto; position: absolute; top: 3.5vw; right: 20vw; z-index: 2;}


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

  section#hp-service { clear: both; width: 100%; padding: 55px calc(50% - 495px); box-sizing: border-box;}

  .hp-serv-title { width: 100%; margin: 0 0 60px 0;}
  .hp-serv-title img { width: 648px; height: auto;}

  .hp-serv-items { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: flex-start;}
  .hp-serv-items .item-box { width: calc(100% / 4); padding: 0 15px; box-sizing: border-box;}
  .hp-serv-items .item-box .pic { width: 100%;}
  .hp-serv-items .item-box .pic img { width: 100%; height: auto; margin: 0 0 35px 0;}
  .hp-serv-items .item-box .text { width: 100%; color: #3E3A39; font-size: 1.2em; font-weight: 600; line-height: 2em; text-align: center;}


  /************ section #hp-case-sample ************/

  section#hp-case-sample { clear: both; width: 92%; background-color: #fff; float: right; display: flex; justify-content: flex-start;}

  .hp-sample-pic { width: 45%;}
  .hp-sample-pic img { width: 100%; height: auto;}

  .hp-sample-content { width: 55%; padding: 55px 40px; box-sizing: border-box;}
  .hp-sample-title { width: 100%; margin: 0 0 40px 0;}
  .hp-sample-title img { width: 430px; height: auto;}
  .hp-sample-intro { width: 100%; color: #3E3A39; font-size: 1.1em; line-height: 1.8em;}


  /************ section #hp-goodserv ************/

  section#hp-goodserv { clear: both; width: 100%; padding: 90px calc(50% - 495px) 0 calc(50% - 495px); box-sizing: border-box; display: flex; justify-content: flex-start; flex-wrap: wrap;}

  .hp-goodserv-item-lf { width: 50%; margin: 0 0 50px 0;}
  .hp-goodserv-item-lf .hp-goodserv-title { width: 100%; margin: 0 0 30px 0;}
  .hp-goodserv-item-lf .hp-goodserv-title img { width: 100%; height: auto;}
  .hp-goodserv-item-lf .hp-goodserv-text { width: 100%; color: #3E3A39; font-size: 1.2em; line-height: 2em;}
  .hp-goodserv-item-lf .hp-goodserv-text font.title { font-size: 1.4em; font-weight: 600;}

  .hp-goodserv-item-rt { width: 50%; margin: 0 0 50px 0;}
  .hp-goodserv-item-rt .hp-goodserv-title { width: 100%; margin: 10px 0 30px 0;}
  .hp-goodserv-item-rt .hp-goodserv-title img { width: 95%; height: auto;}
  .hp-goodserv-item-rt .hp-goodserv-text { width: 100%; color: #3E3A39; font-size: 1.2em; line-height: 2em;}
  .hp-goodserv-item-rt .hp-goodserv-text font.title { font-size: 1.4em; font-weight: 600;}
  
  .hp-goodserv-illu { width: 50%; margin: 0 0 50px 0;}
  .hp-goodserv-illu img { width: 70%; margin: 0 0 0 70px;}


  /************ section #hp-moreinfor ************/

  section#hp-moreinfor { clear: both; width: 100%; padding: 60px calc(50% - 495px); background-image: url("../images/hp_moreinfor_bg.jpg"); background-size: cover; background-position: 40% top; background-repeat: no-repeat; box-sizing: border-box;}

  .hp-moreinfor-title { width: 100%; padding: 0 40px; margin: 0 0 35px 0; box-sizing: border-box;}
  .hp-moreinfor-title img { width: 650px; height: auto;}

  .hp-moreinfor-list { clear: both; width: 44%; padding: 0 40px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; float: left;}
  .hp-moreinfor-list .dot { width: 40px; margin: 0 0 12px 0;}
  .hp-moreinfor-list .dot img { width: 26px; height: auto;}
  .hp-moreinfor-list .title { width: calc(100% - 40px); margin: 0 0 12px 0; color: #000; font-size: 1.6em; font-weight: 600; letter-spacing: 0.1em;}

  .hp-moreinfor-bt { width: 56%; float: right;}
  .hp-moreinfor-bt img.bt { width: 480px; height: auto; margin: 130px 0 0 0; border: 2px #fff solid;}


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

  section#page-case { clear: both; width: 100%; padding: 50px calc(50% - 495px); box-sizing: border-box;}

  img.page-title-case { clear: both; width: 700px; height: auto; margin: 0 auto 15px auto;}

  .page-title-text { clear: both; width: 100%; margin: 0 0 45px 0; color: #595757; font-size: 1.2em; text-align: center;}

  hr { clear: both; width: 100%; margin: 0 0 20px 0; border: 1px #E35514 solid;}

  .case-full-list { clear: both; width: 100%; padding: 40px 0; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .case-full-list .case-box { width: calc(100% / 4 - 30px); margin: 0 15px 30px 15px; position: relative;}
  .case-full-list .case-box a { width: 100%; text-decoration: none; display: block;}
  .case-full-list .case-box a .mask { width: 100%; height: 100%; color: #fff; font-size: 4em; background-color: rgba(0, 0, 0, 0.6); position: absolute; top: 0; left: 0; z-index: 9; display: none; justify-content: center; align-items: center;}
  .case-full-list .case-box a:hover .mask { display: flex;}
  .case-full-list .case-box a .pic { width: 100%;}
  .case-full-list .case-box a .pic img { width: 100%; height: auto;}
  .case-full-list .case-box a .title { width: 100%; padding: 10px; color: #414141; font-size: 0.9em; display: flex; align-items: center; box-sizing: border-box;}
  .case-full-list .case-box a .title img.icon { width: 20px; height: auto; margin: 0 5px 0 0;}


  /************ section #page-inquire ************/

  section#page-inquire { clear: both; width: 100%; padding: 50px calc(50% - 495px); box-sizing: border-box;}

  .inquire-form-table { width: 100%; margin: 40px auto 0 auto;}
  .inquire-form-table form { display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .inquire-form-table .caption { width: 130px; padding: 8px 10px 0 0; margin: 0 0 20px 0; color: #414141; font-size: 1.2em; text-align: right; box-sizing: border-box;}
  .inquire-form-table .column-1 { width: calc(50% - 130px); margin: 0 0 20px 0;}
  .inquire-form-table .column-1-2 { width: calc(50% - 130px); padding: 8px 0 0 0; margin: 0 0 20px 0; color: #414141; font-size: 1.2em;}
  .inquire-form-table .column-1 input[type=text], .column-1 input[type=email], .column-1 input[type=tel], .column-2 input[type=text] { width: 100%; padding: 10px; color: rgb(71, 71, 71); font-size:1em; font-family: "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; box-sizing: border-box;}
  .inquire-form-table .column-1 select { width: 100%; padding: 10px; color: rgb(71, 71, 71); font-size:1em; font-family: "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; box-sizing: border-box;}
  .inquire-form-table .column-2 { width: calc(100% - 130px); margin: 0 0 20px 0;}
  .inquire-form-table .column-2 textarea { width: 100%; height: 160px; padding: 10px; color: rgb(71, 71, 71); font-size:1em; font-family: "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; box-sizing: border-box;}
  .inquire-form-table .column-2 input[type=submit] { width: 160px; padding: 8px 0; color: #fff; font-size: 1.2em; text-align: center; border: 0; border-radius: 10px; background-color: #E35514; cursor: pointer;}


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

  footer { clear: both; width: 100%; padding: 40px 0; position: relative;}

  .footer-bar { width: 100%; padding: 15px calc(50% - 495px); background-color: #E35514; box-sizing: border-box;}
  .footer-bar .footer-nav { width: 100%; padding: 0 0 0 175px; box-sizing: border-box;}
  .footer-bar .footer-nav .nav { width: 100%; margin: 0 0 10px 0; color: #fff; font-size: 1.4em; font-weight: 300;}
  .footer-bar .footer-nav .nav a { padding: 0 0 2px 0; color: #fff; text-decoration: none; border-bottom: 1px transparent solid;}
  .footer-bar .footer-nav .nav a:hover { border-bottom: 1px #fff solid;}
  .footer-bar .footer-nav .address { width: 100%; margin: 20px 0 0 0; color: #231815; font-size: 0.9em; font-weight: 600;}
  .footer-bar .footer-social-icon { width: 100%; padding: 5px 35px 0 0; box-sizing: border-box;}
  .footer-bar .footer-social-icon .icon { clear: both; width: 100%; margin: 0 0 5px 0; display: flex; justify-content: flex-end; align-items: center;}
  .footer-bar .footer-social-icon .icon img { width: 30px; height: auto; margin: 0 0 0 6px;}
  .footer-bar .footer-social-icon .copyright { clear: both; width: 100%; font-size: 0.8em; text-align: right;}
  
  img.logo-footer { width: 148px; height: auto; position: absolute; top: 25px; left: calc(50% - 495px);}


}

@media screen and (min-width: 768px) and (max-width: 1023px) {
    
  /************ header + nav ************/

  header { width: 100%; height: 100px; padding: 0 20px; background-color: #fff; box-sizing: border-box; position: relative;}

  header img.logo-header { width: 150px; height: auto; position: absolute; top: 0; left: 20px; z-index: 99;}
  
  header .nav-icon { width: 50px; margin: 10px 0 0 0; color: #414141; font-size: 3em; text-align: center; float: right;}

  header nav#pc { width: 100%; height: 100px; display: flex; justify-content: flex-end; align-items: center;}
  header nav#pc ul.nav { width: calc(100% - 160px); height: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-end;}
  header nav#pc ul.nav li { height: 100%; padding: 0; margin: 0;}
  header nav#pc ul.nav li a { height: 100%; padding: 0 10px; color: #414141; font-size: 1.4em; text-decoration: none; display: flex; align-items: center;}
  header nav#pc ul.nav li a:hover { color: #fff;}
  header nav#pc .social-icon { width: 160px; display: flex; justify-content: flex-end; align-items: center;}
  header nav#pc .social-icon img { width: 30px; height: auto; margin: 0 8px;}

  header .nav-icon { display: none;}
  nav#mo { display: none;}


  /************ banner ************/

  .banner-box { clear: both; width: 100%; height: 40vw; overflow: hidden; position: relative;}
  .banner-box img { width: 100%; height: auto;}

  .banner-box img.hp-banner-text { width: 24vw; height: auto; position: absolute; top: 13vw; right: 15vw; z-index: 99;}

  .page-banner { clear: both; width: 100%; height: 21vw; overflow: hidden; position: relative;}
  .page-banner img.banner { width: 100%; height: auto; position: relative; z-index: 1;}
  .page-banner img.text { width: 30vw; height: auto; position: absolute; top: 3.5vw; right: 20vw; z-index: 2;}


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

  section#hp-service { clear: both; width: 100%; padding: 55px 20px; box-sizing: border-box;}

  .hp-serv-title { width: 100%; margin: 0 0 60px 0;}
  .hp-serv-title img { width: 648px; height: auto;}

  .hp-serv-items { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .hp-serv-items .item-box { width: calc(100% / 2); padding: 0 15px; margin: 0 0 30px 0; box-sizing: border-box;}
  .hp-serv-items .item-box .pic { width: 100%;}
  .hp-serv-items .item-box .pic img { width: 90%; height: auto; margin: 0 auto 20px auto;}
  .hp-serv-items .item-box .text { width: 100%; color: #3E3A39; font-size: 1.2em; font-weight: 600; line-height: 2em; text-align: center;}


  /************ section #hp-case-sample ************/

  section#hp-case-sample { clear: both; width: 100%; background-color: #fff; display: flex; justify-content: flex-start;}

  .hp-sample-pic { width: 45%;}
  .hp-sample-pic img { width: 100%; height: auto;}

  .hp-sample-content { width: 55%; padding: 55px 40px; box-sizing: border-box;}
  .hp-sample-title { width: 100%; margin: 0 0 40px 0;}
  .hp-sample-title img { max-width: 100%; width: 430px; height: auto;}
  .hp-sample-intro { width: 100%; color: #3E3A39; font-size: 1.1em; line-height: 1.8em;}


  /************ section #hp-goodserv ************/

  section#hp-goodserv { clear: both; width: 100%; padding: 90px 20px 0 20px; box-sizing: border-box; display: flex; justify-content: flex-start; flex-wrap: wrap;}

  .hp-goodserv-item-lf { width: 50%; margin: 0 0 50px 0;}
  .hp-goodserv-item-lf .hp-goodserv-title { width: 100%; margin: 0 0 30px 0;}
  .hp-goodserv-item-lf .hp-goodserv-title img { width: 100%; height: auto;}
  .hp-goodserv-item-lf .hp-goodserv-text { width: 100%; color: #3E3A39; font-size: 1.2em; line-height: 2em;}
  .hp-goodserv-item-lf .hp-goodserv-text font.title { font-size: 1.4em; font-weight: 600;}

  .hp-goodserv-item-rt { width: 50%; margin: 0 0 50px 0;}
  .hp-goodserv-item-rt .hp-goodserv-title { width: 100%; margin: 10px 0 30px 0;}
  .hp-goodserv-item-rt .hp-goodserv-title img { width: 95%; height: auto;}
  .hp-goodserv-item-rt .hp-goodserv-text { width: 100%; color: #3E3A39; font-size: 1.2em; line-height: 2em;}
  .hp-goodserv-item-rt .hp-goodserv-text font.title { font-size: 1.4em; font-weight: 600;}
  
  .hp-goodserv-illu { width: 50%; margin: 0 0 50px 0;}
  .hp-goodserv-illu img { width: 80%; margin: 0 auto;}


  /************ section #hp-moreinfor ************/

  section#hp-moreinfor { clear: both; width: 100%; padding: 60px 20px; background-image: url("../images/hp_moreinfor_bg.jpg"); background-size: cover; background-position: 40% top; background-repeat: no-repeat; box-sizing: border-box;}

  .hp-moreinfor-title { width: 100%; padding: 0 40px; margin: 0 0 35px 0; box-sizing: border-box;}
  .hp-moreinfor-title img { max-width: 100%; width: 650px; height: auto;}

  .hp-moreinfor-list { clear: both; width: 100%; padding: 0 40px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .hp-moreinfor-list .dot { width: 40px; margin: 0 0 12px 0;}
  .hp-moreinfor-list .dot img { width: 26px; height: auto;}
  .hp-moreinfor-list .title { width: calc(100% - 40px); margin: 0 0 12px 0; color: #000; font-size: 1.6em; font-weight: 600; letter-spacing: 0.1em;}

  .hp-moreinfor-bt { clear: both; width: 100%;}
  .hp-moreinfor-bt img.bt { width: 480px; height: auto; margin: 60px auto 0 auto; border: 2px #fff solid;}


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

  section#page-case { clear: both; width: 100%; padding: 50px 20px; box-sizing: border-box;}

  img.page-title-case { clear: both; width: 700px; height: auto; margin: 0 auto 15px auto;}

  .page-title-text { clear: both; width: 100%; margin: 0 0 45px 0; color: #595757; font-size: 1.2em; text-align: center;}

  hr { clear: both; width: 100%; margin: 0 0 20px 0; border: 1px #E35514 solid;}

  .case-full-list { clear: both; width: 100%; padding: 40px 0; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .case-full-list .case-box { width: calc(100% / 3 - 40px); margin: 0 20px 30px 20px; position: relative;}
  .case-full-list .case-box a { width: 100%; text-decoration: none; display: block;}
  .case-full-list .case-box a .mask { width: 100%; height: 100%; color: #fff; font-size: 4em; background-color: rgba(0, 0, 0, 0.6); position: absolute; top: 0; left: 0; z-index: 9; display: none; justify-content: center; align-items: center;}
  .case-full-list .case-box a:active .mask { display: flex;}
  .case-full-list .case-box a .pic { width: 100%;}
  .case-full-list .case-box a .pic img { width: 100%; height: auto;}
  .case-full-list .case-box a .title { width: 100%; padding: 10px; color: #414141; font-size: 0.9em; display: flex; align-items: center; box-sizing: border-box;}
  .case-full-list .case-box a .title img.icon { width: 20px; height: auto; margin: 0 5px 0 0;}


  /************ section #page-inquire ************/

  section#page-inquire { clear: both; width: 100%; padding: 50px 20px; box-sizing: border-box;}

  .inquire-form-table { width: 80%; margin: 40px auto 0 auto;}
  .inquire-form-table form { display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .inquire-form-table .caption { width: 130px; padding: 8px 10px 0 0; margin: 0 0 20px 0; color: #414141; font-size: 1.2em; text-align: right; box-sizing: border-box;}
  .inquire-form-table .column-1 { width: calc(100% - 130px); margin: 0 0 20px 0;}
  .inquire-form-table .column-1-2 { width: calc(100% - 130px); padding: 8px 0 0 0; margin: 0 0 20px 0; color: #414141; font-size: 1.2em;}
  .inquire-form-table .column-1 input[type=text], .column-1 input[type=email], .column-1 input[type=tel], .column-2 input[type=text] { width: 100%; padding: 10px; color: rgb(71, 71, 71); font-size:1em; font-family: "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; box-sizing: border-box;}
  .inquire-form-table .column-1 select { width: 100%; padding: 10px; color: rgb(71, 71, 71); font-size:1em; font-family: "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; box-sizing: border-box;}
  .inquire-form-table .column-2 { width: calc(100% - 130px); margin: 0 0 20px 0;}
  .inquire-form-table .column-2 textarea { width: 100%; height: 160px; padding: 10px; color: rgb(71, 71, 71); font-size:1em; font-family: "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; box-sizing: border-box;}
  .inquire-form-table .column-2 input[type=submit] { width: 160px; padding: 8px 0; color: #fff; font-size: 1.2em; text-align: center; border: 0; border-radius: 10px; background-color: #E35514; cursor: pointer;}


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

  footer { clear: both; width: 100%; padding: 40px 0; position: relative;}

  .footer-bar { width: 100%; padding: 15px 20px; background-color: #E35514; box-sizing: border-box;}
  .footer-bar .footer-nav { width: 100%; padding: 0 0 0 130px; box-sizing: border-box;}
  .footer-bar .footer-nav .nav { width: 100%; margin: 0 0 10px 0; color: #fff; font-size: 1.2em; font-weight: 300;}
  .footer-bar .footer-nav .nav a { padding: 0 0 2px 0; color: #fff; text-decoration: none; border-bottom: 1px transparent solid;}
  .footer-bar .footer-nav .nav a:hover { border-bottom: 1px #fff solid;}
  .footer-bar .footer-nav .address { width: 100%; margin: 20px 0 0 0; color: #231815; font-size: 0.9em; font-weight: 600;}
  .footer-bar .footer-social-icon { width: 100%; padding: 15px 0 0 0; box-sizing: border-box;}
  .footer-bar .footer-social-icon .icon { clear: both; width: 100%; margin: 0 0 5px 0; display: flex; justify-content: flex-end; align-items: center;}
  .footer-bar .footer-social-icon .icon img { width: 30px; height: auto; margin: 0 0 0 6px;}
  .footer-bar .footer-social-icon .copyright { clear: both; width: 100%; font-size: 0.8em; text-align: right;}
  
  img.logo-footer { width: 100px; height: auto; position: absolute; top: 25px; left: 20px;}


}

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

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

  header { width: 100%; height: 100px; padding: 0 20px; background-color: #fff; box-sizing: border-box; position: relative;}

  header img.logo-header { width: 120px; height: auto; position: absolute; top: 0; left: 20px; z-index: 99;}
  
  header .nav-icon { width: 50px; margin: 10px 0 0 0; color: #414141; font-size: 3em; text-align: center; float: right;}

  header nav#pc { display: none;}

  header nav#pc { width: 100%; height: 100px; display: flex; justify-content: flex-end; align-items: center;}
  header nav#pc ul.nav { width: calc(100% - 160px); height: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-end;}
  header nav#pc ul.nav li { height: 100%; padding: 0; margin: 0;}
  header nav#pc ul.nav li a { height: 100%; padding: 0 10px; color: #414141; font-size: 1.4em; text-decoration: none; display: flex; align-items: center;}
  header nav#pc ul.nav li a:hover { color: #fff;}
  header nav#pc .social-icon { width: 160px; display: flex; justify-content: flex-end; align-items: center;}
  header nav#pc .social-icon img { width: 30px; height: auto; margin: 0 8px;}

  header .nav-icon { display: none;}
  nav#mo { display: none;}


  /************ banner ************/

  .banner-box { clear: both; width: 100%; height: 40vw; overflow: hidden; position: relative;}
  .banner-box img { width: 100%; height: auto;}

  .banner-box img.hp-banner-text { width: 24vw; height: auto; position: absolute; top: 13vw; right: 15vw; z-index: 99;}

  .page-banner { clear: both; width: 100%; height: 21vw; overflow: hidden; position: relative;}
  .page-banner img.banner { width: 100%; height: auto; position: relative; z-index: 1;}
  .page-banner img.text { width: 30vw; height: auto; position: absolute; top: 3.5vw; right: 20vw; z-index: 2;}


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

  section#hp-service { clear: both; width: 100%; padding: 55px 20px; box-sizing: border-box;}

  .hp-serv-title { width: 100%; margin: 0 0 60px 0;}
  .hp-serv-title img { max-width: 100%; width: 648px; height: auto;}

  .hp-serv-items { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .hp-serv-items .item-box { width: calc(100% / 2); padding: 0 5px; margin: 0 0 30px 0; box-sizing: border-box;}
  .hp-serv-items .item-box .pic { width: 100%;}
  .hp-serv-items .item-box .pic img { width: 90%; height: auto; margin: 0 auto 20px auto;}
  .hp-serv-items .item-box .text { width: 100%; color: #3E3A39; font-size: 1.1em; font-weight: 600; line-height: 1.6em; text-align: center;}


  /************ section #hp-case-sample ************/

  section#hp-case-sample { clear: both; width: 100%; background-color: #fff;}

  .hp-sample-pic { width: 100%;}
  .hp-sample-pic img { width: 100%; height: auto;}

  .hp-sample-content { width: 100%; padding: 55px 40px; box-sizing: border-box;}
  .hp-sample-title { width: 100%; margin: 0 0 40px 0;}
  .hp-sample-title img { max-width: 100%; width: 430px; height: auto;}
  .hp-sample-intro { width: 100%; color: #3E3A39; font-size: 1.1em; line-height: 1.8em;}


  /************ section #hp-goodserv ************/

  section#hp-goodserv { clear: both; width: 100%; padding: 60px 20px; box-sizing: border-box;}

  .hp-goodserv-item-lf { width: 100%;}
  .hp-goodserv-item-lf .hp-goodserv-title { width: 100%; margin: 0 0 30px 0;}
  .hp-goodserv-item-lf .hp-goodserv-title img { width: 100%; height: auto;}
  .hp-goodserv-item-lf .hp-goodserv-text { width: 100%; color: #3E3A39; font-size: 1.2em; line-height: 2em;}
  .hp-goodserv-item-lf .hp-goodserv-text font.title { font-size: 1.4em; font-weight: 600;}

  .hp-goodserv-item-rt { width: 100%;}
  .hp-goodserv-item-rt .hp-goodserv-title { width: 100%; margin: 10px 0 30px 0;}
  .hp-goodserv-item-rt .hp-goodserv-title img { width: 95%; height: auto;}
  .hp-goodserv-item-rt .hp-goodserv-text { width: 100%; color: #3E3A39; font-size: 1.2em; line-height: 2em;}
  .hp-goodserv-item-rt .hp-goodserv-text font.title { font-size: 1.4em; font-weight: 600;}
  
  .hp-goodserv-illu { width: 100%; margin: 0 0 50px 0;}
  .hp-goodserv-illu img { width: 80%; margin: 0 auto;}


  /************ section #hp-moreinfor ************/

  section#hp-moreinfor { clear: both; width: 100%; padding: 60px 20px; background-image: url("../images/hp_moreinfor_bg.jpg"); background-size: cover; background-position: 50% top; background-repeat: no-repeat; box-sizing: border-box;}

  .hp-moreinfor-title { width: 100%; margin: 0 0 35px 0;}
  .hp-moreinfor-title img { max-width: 100%; width: 650px; height: auto;}

  .hp-moreinfor-list { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .hp-moreinfor-list .dot { width: 40px; margin: 0 0 12px 0;}
  .hp-moreinfor-list .dot img { width: 26px; height: auto;}
  .hp-moreinfor-list .title { width: calc(100% - 40px); margin: 0 0 12px 0; color: #000; font-size: 1.4em; font-weight: 600; letter-spacing: 0.1em;}

  .hp-moreinfor-bt { clear: both; width: 100%;}
  .hp-moreinfor-bt img.bt { max-width: 100%; width: 480px; height: auto; margin: 60px auto 0 auto; border: 2px #fff solid;}


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

  section#page-case { clear: both; width: 100%; padding: 50px 20px; box-sizing: border-box;}

  img.page-title-case { clear: both; width: 700px; height: auto; margin: 0 0 15px calc(50% - 350px);}

  .page-title-text { clear: both; width: 100%; margin: 0 0 45px 0; color: #595757; font-size: 1.2em; text-align: center;}

  hr { clear: both; width: 100%; margin: 0 0 20px 0; border: 1px #E35514 solid;}

  .case-full-list { clear: both; width: 100%; padding: 40px 0; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .case-full-list .case-box { width: calc(100% / 2 - 20px); margin: 0 10px 30px 10px; position: relative;}
  .case-full-list .case-box a { width: 100%; text-decoration: none; display: block;}
  .case-full-list .case-box a .mask { width: 100%; height: 100%; color: #fff; font-size: 4em; background-color: rgba(0, 0, 0, 0.6); position: absolute; top: 0; left: 0; z-index: 9; display: none; justify-content: center; align-items: center;}
  .case-full-list .case-box a:active .mask { display: flex;}
  .case-full-list .case-box a .pic { width: 100%;}
  .case-full-list .case-box a .pic img { width: 100%; height: auto;}
  .case-full-list .case-box a .title { width: 100%; padding: 10px; color: #414141; font-size: 0.9em; display: flex; align-items: center; box-sizing: border-box;}
  .case-full-list .case-box a .title img.icon { width: 20px; height: auto; margin: 0 5px 0 0;}


  /************ section #page-inquire ************/

  section#page-inquire { clear: both; width: 100%; padding: 50px 20px; box-sizing: border-box;}

  .inquire-form-table { width: 100%; margin: 40px auto 0 auto;}
  .inquire-form-table form { }
  .inquire-form-table .caption { width: 100%; color: #414141; font-size: 1.2em; text-align: left; box-sizing: border-box;}
  .inquire-form-table .column-1 { width: 100%; margin: 0 0 20px 0;}
  .inquire-form-table .column-1-2 { width: 100%; margin: 0 0 20px 0; color: #414141; font-size: 1.2em;}
  .inquire-form-table .column-1 input[type=text], .column-1 input[type=email], .column-1 input[type=tel], .column-2 input[type=text] { width: 100%; padding: 10px; color: rgb(71, 71, 71); font-size:1em; font-family: "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; box-sizing: border-box;}
  .inquire-form-table .column-1 select { width: 100%; padding: 10px; color: rgb(71, 71, 71); font-size:1em; font-family: "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; box-sizing: border-box;}
  .inquire-form-table .column-2 { width: 100%; margin: 0 0 20px 0;}
  .inquire-form-table .column-2 textarea { width: 100%; height: 160px; padding: 10px; color: rgb(71, 71, 71); font-size:1em; font-family: "Noto Sans TC", sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; box-sizing: border-box;}
  .inquire-form-table .column-2 input[type=submit] { width: 160px; padding: 8px 0; margin: 0 auto; color: #fff; font-size: 1.2em; text-align: center; border: 0; border-radius: 10px; background-color: #E35514; cursor: pointer; display: block;}


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

  footer { clear: both; width: 100%; padding: 40px 0; position: relative;}

  .footer-bar { width: 100%; padding: 15px 20px; background-color: #E35514; box-sizing: border-box;}
  .footer-bar .footer-nav { width: 100%; padding: 90px 0 0 0;}
  .footer-bar .footer-nav .nav { width: 100%; margin: 0 0 10px 0; color: #fff; font-size: 1.2em; font-weight: 300; text-align: center;}
  .footer-bar .footer-nav .nav a { padding: 0 0 2px 0; color: #fff; text-decoration: none; border-bottom: 1px transparent solid;}
  .footer-bar .footer-nav .nav a:hover { border-bottom: 1px #fff solid;}
  .footer-bar .footer-nav .address { width: 100%; color: #231815; font-size: 0.9em; font-weight: 600; text-align: center;}
  .footer-bar .footer-social-icon { width: 100%; padding: 15px 0 0 0; box-sizing: border-box;}
  .footer-bar .footer-social-icon .icon { clear: both; width: 100%; margin: 0 0 5px 0; display: flex; justify-content: center; align-items: center;}
  .footer-bar .footer-social-icon .icon img { width: 30px; height: auto; margin: 0 10px;}
  .footer-bar .footer-social-icon .copyright { clear: both; width: 100%; font-size: 0.8em; text-align: center;}
  
  img.logo-footer { width: 80px; height: auto; position: absolute; top: 25px; left: calc(50% - 40px);}


}