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

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

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

html, body { height: 100%;}

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

div.brk { clear: both;}


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


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

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

  header { clear: both; width: 100%; padding: 15px 40px 0 40px; border-bottom: 10px #1c2e68 solid; background-color: #fff; box-sizing: border-box;}

  img.header-logo { clear: both; width: 312px; height: auto; margin: 0 auto 30px auto;}

  nav#mo { display: none;}
  nav#pc { clear: both; width: 100%;}
  nav#pc ul.nav-menu { width: 100%; padding: 0 0 15px 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  nav#pc ul.nav-menu li { padding: 0; margin: 0 20px; position: relative;}
  nav#pc ul.nav-menu li a { color: #03733a; font-size: 1.4rem; font-weight: 600; text-decoration: none; cursor: pointer;}
  nav#pc ul.nav-menu li a:hover { color: #1c2e68;}
  nav#pc ul.nav-menu li a.sel { color: #1c2e68;}
  nav#pc ul.nav-menu li ul.nav-popup { width: 200px; padding: 20px 0; margin: 0; background-color: #03733a; list-style: none; display: none; position: absolute; top: 40px; left: calc(50% - 100px); z-index: 999;}
  nav#pc ul.nav-menu li ul.nav-popup li { width: 100%; padding: 0; margin: 0; position: relative;}
  nav#pc ul.nav-menu li ul.nav-popup li a { padding: 10px; color: #fff; font-size: 1.2rem; font-weight: 400; text-align: center; text-decoration: none; display: block;}
  nav#pc ul.nav-menu li ul.nav-popup li a:hover { background-color: rgba(255,255,255,0.3);}
  nav#pc ul.nav-menu li ul.nav-popup li ul.nav-popup-2nd { width: 200px; padding: 20px 0; margin: 0; background-color: #07542d; list-style: none; display: none; position: absolute; top: 0; left: 195px; z-index: 9999;}
  nav#pc ul.nav-menu li ul.nav-popup li ul.nav-popup-2nd li { width: 100%; padding: 0; margin: 0;}
  nav#pc ul.nav-menu li ul.nav-popup li ul.nav-popup-2nd li a { width: 100%; padding: 10px; color: #fff; font-size: 1rem; font-weight: 400; text-align: center; text-decoration: none; display: block; box-sizing: border-box;}
  nav#pc ul.nav-menu li ul.nav-popup li ul.nav-popup-2nd li a:hover { background-color: rgba(255,255,255,0.2);}


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

  .hp-banner-box { clear: both; width: 100%; position: relative;}
  .hp-banner-box div { position: relative; z-index: 1;}
  .hp-banner-box div .hp-banner-img { width: 100%; overflow: hidden;}
  .hp-banner-box div .hp-banner-img img.hp-banner-mo { display: none;}
  .hp-banner-box div .hp-banner-img img.hp-banner-pc { width: 100%; height: auto;}
  .hp-banner-box img.hp-banner-prev { width: 45px; height: auto; position: absolute; top: 50%; transform: translateY(-50%); left: 80px; z-index: 10; cursor: pointer;}
  .hp-banner-box img.hp-banner-next { width: 45px; height: auto; position: absolute; top: 50%; transform: translateY(-50%); right: 80px; z-index: 10; cursor: pointer;}


  /************ section #hp-new-prods ************/

  section#hp-new-prods { clear: both; width: 100%; padding: 90px 144px; box-sizing: border-box;}

  .hp-new-prods-title { width: 100%; padding: 0 10px; color: #03733a; font-size: 3rem; font-weight: 700; line-height: 1em; border-left: 10px #03733a solid; box-sizing: border-box; position: relative;}
  .veiw-more-mo { display: none;}
  .hp-new-prods-title .veiw-more { width: 200px; text-align: right; position: absolute; top: 0; right: 0; z-index: 2;}
  .hp-new-prods-title .veiw-more a { color: #03733a; font-size: 1.1rem; text-decoration: none;}
  .hp-new-prods-title .veiw-more a:hover { border-bottom: 2px #03733a solid;}

  .hp-new-prods-list { clear: both; width: 100%; padding: 40px 40px 0 40px; box-sizing: border-box; position: relative;}
  .hp-new-prods-list div { position: relative; z-index: 1;}
  .hp-new-prods-list img.hp-new-prods-prev { width: 35px; height: auto; position: absolute; top: 50%; transform: translateY(-50%); left: 0; z-index: 2; cursor: pointer;}
  .hp-new-prods-list img.hp-new-prods-next { width: 35px; height: auto; position: absolute; top: 50%; transform: translateY(-50%); right: 0; z-index: 2; cursor: pointer;}
  .hp-new-prods-list div .new-prods-box { width: calc(100% / 4); padding: 0 1.5vw; box-sizing: border-box;}
  .hp-new-prods-list div .new-prods-box div.prod-box { width: 100%; border: 1px #000 solid; border-radius: 10px; box-sizing: border-box; overflow: hidden;}
  .hp-new-prods-list div .new-prods-box div.prod-box .photo { width: 100%;}
  .hp-new-prods-list div .new-prods-box div.prod-box .photo img { width: 100%; height: auto;}
  .hp-new-prods-list div .new-prods-box div.prod-box .title { width: 100%; padding: 15px 0; color: #000; font-size: 1.4rem; font-weight: 500; text-align: center;}
  .hp-new-prods-list div .new-prods-box div.prod-box .more { width: 100%; margin: 15px 0;}
  .hp-new-prods-list div .new-prods-box div.prod-box .more a { width: 140px; padding: 8px 0; margin: 0 auto; color: #fff; font-size: 1.1rem; text-align: center; text-decoration: none; border-radius: 20px; background-color: #03733a; display: block;}
  .hp-new-prods-list div .new-prods-box div.prod-box .more a:hover { background-color: #0c5b33;}


  /************ section #banner-links ************/

  section#banner-links { clear: both; width: 100%;}

  .hp-prod-add-link-box { width: 100%;}
  .hp-prod-add-link-box img { width: 100%; height: auto;}


  /************ section #hp-new-prods-link ************/

  section#hp-new-prods-link { clear: both; width: 100%; padding: 80px 144px; box-sizing: border-box;}

  img.hp-new-prod-link-mo { display: none;}
  img.hp-new-prod-link { width: 100%; height: auto;}


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

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


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

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


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

  section#page-about { clear: both; width: 100%; padding: 0 144px 80px 144px; box-sizing: border-box;}

  .page-about-title { width: 100%; padding: 0 10px; margin: 0 0 40px 0; color: #03733a; font-size: 3rem; font-weight: 700; line-height: 1em; border-left: 10px #03733a solid; box-sizing: border-box; position: relative;}
  .page-about-title span.prod-sort { font-size: 2rem;}

  .page-about-con { clear: both; width: 100%; margin: 0 auto; font-size: 1.1rem; line-height: 2em;}
  .page-about-con span.title { font-size: 1.4rem; font-weight: 500;}

  img.page-about-pic { width: 35vw; height: auto; margin: 0 0 20px 20px; float: right;}


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

  section#page-products { clear: both; width: 100%; padding: 0 144px 80px 144px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}

  .page-prods-sort-nav { width: 240px;}
  .page-prods-sort-nav ul.sort-nav { width: 100%; padding: 0; margin: 0; list-style: none; display: block;}
  .page-prods-sort-nav ul.sort-nav li { width: 100%; padding: 0; margin: 0; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .page-prods-sort-nav ul.sort-nav li:last-child { border-bottom: 0;}
  .page-prods-sort-nav ul.sort-nav li a { width: calc(100% - 40px); padding: 10px; box-sizing: border-box; color: #1c2e68; font-size: 1.2rem; font-weight: 500; text-decoration: none; display: block;}
  .page-prods-sort-nav ul.sort-nav li a:hover { color: #03733a; background-color: #eee;}
  .page-prods-sort-nav ul.sort-nav li .popup-plus { width: 30px; color: #1c2e68; font-size: 1.6rem; text-align: center; cursor: pointer;}
  .page-prods-sort-nav ul.sort-nav li ul.prodnav-popup { width: 100%; padding: 0 0 0 20px; margin: 0; list-style: none; display: none; box-sizing: border-box;}
  .page-prods-sort-nav ul.sort-nav li ul.prodnav-popup li { width: 100%; padding: 0; margin: 0; border-bottom: 1px #ccc solid;}
  .page-prods-sort-nav ul.sort-nav li ul.prodnav-popup li:last-child { border-bottom: 0;}
  .page-prods-sort-nav ul.sort-nav li ul.prodnav-popup li a { width: 100%; padding: 15px; box-sizing: border-box; color: #1c2e68; font-size: 1rem; text-decoration: none; display: block;}
  .page-prods-sort-nav ul.sort-nav li ul.prodnav-popup li a:hover { color: #03733a; background-color: #eee;}
  

  .page-sort-prods-list { width: calc(100% - 240px); padding: 0 0 0 80px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-sort-prods-list .prod-box { width: calc(100% / 4 - 20px); padding: 10px; margin: 0 10px 30px 10px; border: 1px #444 solid; border-radius: 10px; box-sizing: border-box;}
  .page-sort-prods-list .prod-box .photo { width: 100%;}
  .page-sort-prods-list .prod-box .photo img { width: 100%; height: auto;}
  .page-sort-prods-list .prod-box .title { width: 100%; padding: 10px 0; color: #03733a; font-size: 1.2rem; font-weight: 500; text-align: center;}
  .page-sort-prods-list .prod-box .view-more { width: 100%;}
  .page-sort-prods-list .prod-box .view-more a { width: 120px; padding: 6px 0; margin: 10px auto; color: #fff; font-size: 1rem; text-align: center; text-decoration: none; border-radius: 20px; background-color: #03733a; display: block;}
  .page-sort-prods-list .prod-box .view-more a:hover { background-color: #0c5b33;}


  ul.page-num-list { clear: both; width: 100%; padding: 0; margin: 60px 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  ul.page-num-list li { padding: 0; margin: 0 5px 10px 5px;}
  ul.page-num-list li a { padding: 10px; color: #03733a; font-size: 0.9rem; text-decoration: none; border: 1px #03733a solid; background-color: #fff;}
  ul.page-num-list li a:hover { background-color: #eee;}
  ul.page-num-list li a.sel { color: #fff; background-color: #03733a;}


  /************ section #page-product-details ************/

  section#page-product-details { clear: both; width: 100%; padding: 0 0 80px 0;}

  .page-prod-details { clear: both; width: 100%; padding: 0 144px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-prod-details .prod-photo { width: 45%; position: relative;}
  .page-prod-details .prod-photo img.page-prods-prev { width: 2vw; height: auto; position: absolute; top: 14vw; left: 0; z-index: 2; cursor: pointer;}
  .page-prod-details .prod-photo img.page-prods-next { width: 2vw; height: auto; position: absolute; top: 14vw; right: 0; z-index: 2; cursor: pointer;}
  .page-prod-details .prod-photo img.photo-big { width: 85%; height: auto; margin: 0 auto;}
  .page-prod-details .prod-photo img.photo-thumb { width: 90%; height: auto; margin: 0 auto; border: 1px #ccc solid; box-sizing: border-box;}

  .page-prod-details .prod-feature { width: 55%; padding: 0 0 0 70px; box-sizing: border-box;}
  .page-prod-details .prod-feature .prod-title { width: 100%; padding: 0 0 10px 0; color: #000; font-size: 3rem; font-weight: 600; line-height: 1.4em; border-bottom: 1px #000 solid;}
  .page-prod-details .prod-feature .prod-content { width: 100%; padding: 20px 0; color: #000; font-size: 1.2rem; line-height: 2em;}
  .page-prod-details .prod-feature .prod-content ul.dot { width: 100%; padding: 0 0 0 30px; margin: 0; list-style-type: disc; display: block; box-sizing: border-box;}
  .page-prod-details .prod-feature .prod-content ul.dot li { padding: 0; margin: 0;}

  .page-prod-info-full { clear: both; width: 100%;}
  .page-prod-info-full ul.prod-info-tab { width: 100%; padding: 0 144px; margin: 80px 0 0 0; list-style: none; display: flex; justify-content: flex-start; align-items: center; background-color: #1d2d68; box-sizing: border-box;}
  .page-prod-info-full ul.prod-info-tab li { width: 170px; padding: 10px 0; margin: 0 5px 0 0;}
  .page-prod-info-full ul.prod-info-tab li a { width: 100%; padding: 15px 0; color: #fff; font-size: 1.1rem; line-height: 1.2em; text-align: center; text-decoration: none; background-color: rgba(255,255,255,0.15); display: block;}
  .page-prod-info-full ul.prod-info-tab li:nth-child(odd) a { border-radius: 0 30px 0 30px;}
  .page-prod-info-full ul.prod-info-tab li:nth-child(even) a { border-radius: 30px 0 30px 0;}
  .page-prod-info-full ul.prod-info-tab li a:hover { background-color: rgba(255,255,255,0.3);}
  .page-prod-info-full ul.prod-info-tab li a.sel { background-color: #03733a;}

  .page-prod-info-full .prod-info-content { clear: both; width: 100%; padding: 60px 144px; box-sizing: border-box;}
  .page-prod-info-full .prod-info-content > div { display: none;}
  .page-prod-info-full .prod-info-content .specification-table { clear: both; width: 80%; font-size: 1.2rem;}
  .page-prod-info-full .prod-info-content .specification-table .row-full { width: 100%; padding: 10px; box-sizing: border-box;}
  .page-prod-info-full .prod-info-content .specification-table .row-full:nth-child(odd) { background-color: #eee;}
  .page-prod-info-full .prod-info-content .specification-table .row-full .caption { width: 30%; font-weight: 500; float: left;}
  .page-prod-info-full .prod-info-content .specification-table .row-full .column { width: 70%; float: left;}
  .page-prod-info-full .prod-info-content .specification-table .row-full .column .column-3x { width: calc(100% / 3); align-items: center; float: left;}
  .page-prod-info-full .prod-info-content .pics-list { width: 100%; display: flex !important; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-prod-info-full .prod-info-content .pics-list .photo { width: calc(100% / 5 - 30px); margin: 0 15px 30px 15px; border: 1px #ccc solid; box-sizing: border-box;}
  .page-prod-info-full .prod-info-content .pics-list .photo img { width: 100%; height: auto;}
  .page-prod-info-full .prod-info-content .description-con { width: 100%; color: #000; font-size: 1.2rem; line-height: 2em;}
  .page-prod-info-full .prod-info-content .prod-video { width: 100%;}
  .page-prod-info-full .prod-info-content .prod-video .video-box { clear: both; width: 80%; margin: 0 auto 40px auto;}
  .page-prod-info-full .prod-info-content .download-bt { width: 100%;}
  .page-prod-info-full .prod-info-content .download-bt a { width: 200px; padding: 10px 0; color: #fff; font-size: 1.4rem; font-weight: 500; text-align: center; text-decoration: none; border-radius: 30px; background-color: #03733a; display: block;}
  .page-prod-info-full .prod-info-content .download-bt a:hover { background-color: #0c5b33;}
  .page-prod-info-full .prod-info-content .patents-list { width: 100%; display: flex !important; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-prod-info-full .prod-info-content .patents-list .list-box { width: calc(100% / 4 - 40px); margin: 0 20px 40px 20px;}
  .page-prod-info-full .prod-info-content .patents-list .list-box img { width: 100%; height: auto;}
  .page-prod-info-full .prod-info-content .patents-list .list-box .title { width: 100%; padding: 10px 0; color: #000; font-size: 1.4rem; text-align: center;}

  .page-prod-info-full .prod-info-content .intro-text { clear: both; width: 100%; color: #000; font-size: 1.2rem; line-height: 1.8em;}
  .page-prod-info-full .prod-info-content .intro-text a { color: #000; text-decoration: none; border-bottom: 1px #000 dashed;}


  /************ news ************/

  ul.page-news-list { clear: both; width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  ul.page-news-list li { width: 50%; padding: 0 20px; margin: 0 0 30px 0; box-sizing: border-box;}
  ul.page-news-list li a { width: 100%; padding: 5px; color: #000; text-decoration: none; border: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: flex-start; box-sizing: border-box;}
  ul.page-news-list li a .pic { width: 40%;}
  ul.page-news-list li a .pic img { width: 100%; height: auto;}
  ul.page-news-list li a .date-title { width: 60%; padding: 0 0 0 10px; box-sizing: border-box;}
  ul.page-news-list li a .date-title .date { width: 100%; color: #666; font-size: 0.8rem;}
  ul.page-news-list li a .date-title .title { width: 100%; padding: 10px 0; color: #000; font-size: 1.2rem; font-weight: 500; line-height: 1.2em;}
  ul.page-news-list li a .date-title .intro { width: 100%; color: #444; font-size: 0.8rem; line-height: 1.2em;}
  ul.page-news-list li a:hover { border: 2px #ccc solid;}


  .page-news-con-title { clear: both; width: 80%; margin: 0 auto;}
  .page-news-con-title .date { width: 100%; color: #666; font-size: 0.8rem;}
  .page-news-con-title .title { width: 100%; padding: 10px 0; color: #000; font-size: 1.4rem; font-weight: 500; line-height: 1.4em; border-bottom: 1px #ccc solid;}

  .page-news-content { clear: both; width: 80%; color: #000; font-size: 1rem; line-height: 2em; margin: 40px auto;}
  .page-news-content img { max-width: 100%; height: auto;}
  .page-news-content a { color: #000; text-decoration: none; border-bottom: 1px #000 dashed;}

  .page-goback-bt { clear: both; width: 100%;}
  .page-goback-bt a { width: 120px; padding: 8px 0; margin: 0 auto; color: #fff; font-size: 0.9rem; text-align: center; text-decoration: none; border-radius: 12px; background-color: #03733a; display: block;}
  .page-goback-bt a:hover { background-color: #0c5b33;}


  /************ contact ************/

  .page-contact-con { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-contact-con .contact-info-mo { display: none;}
  .page-contact-con .contact-info { width: 60%; padding: 0 40px 0 0; color: #000; font-size: 1.2rem; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; box-sizing: border-box;}
  .page-contact-con .contact-info .title { width: 100%; padding: 0 0 30px 0; color: #03733a; font-size: 1.4rem; font-weight: 500;}
  .page-contact-con .contact-info .icon { width: 40px; padding: 0 0 15px 0; color: #03733a;}
  .page-contact-con .contact-info .column { width: calc(100% - 40px); padding: 0 0 15px 0;}
  .page-contact-con .contact-map { width: 40%;}
  .page-contact-con .contact-map img.pic { width: 100%; height: auto;}


  /************ site map ************/

  ul.sitemap-nav { clear: both; width: 100%; padding: 0; margin: 100px 0; list-style: none; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
  ul.sitemap-nav li { padding: 0; margin: 0 40px; color: #666; font-size: 1.6rem; font-weight: 500;}
  ul.sitemap-nav li a { color: #000; text-decoration: none;}
  ul.sitemap-nav li a:hover { border-bottom: 3px #000 solid;}
  ul.sitemap-nav li ul.nav-pop { padding: 0; margin: 0; list-style: none; display: block;}
  ul.sitemap-nav li ul.nav-pop li { padding: 0; margin: 5px 0; text-align: center;}
  ul.sitemap-nav li ul.nav-pop li a { color: #000; font-size: 1.1rem; font-weight: 300;}
  ul.sitemap-nav li ul.nav-pop li a:hover { border-bottom: 1px #000 solid;}


  /************ 404 error ************/

  .page-error-con { clear: both; width: 100%; padding: 60px 0; color: #03733a; text-align: center;}
  .page-error-con .error-title { width: 100%; margin: 0 0 20px 0; font-size: 4rem; font-weight: 600;}
  .page-error-con .error-text-mo { display: none;}
  .page-error-con .error-text { width: 100%; margin: 0 0 60px 0; font-size: 2rem;}
  .page-error-con a { width: 200px; padding: 5px 0; margin: 0 auto; color: #fff; font-size: 1.4rem; text-align: center; text-decoration: none; border-radius: 26px; background-color: #03733a; display: block;}


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

  footer { clear: both; width: 100%; background-color: #03733a;}

  .footer-col-full { width: 100%; padding: 80px 144px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch;}
  .footer-col-full .col-lf { width: 60%;}
  .footer-col-full .col-lf img.footer-logo { width: 290px; height: auto; margin: 0 0 20px 0;}
  .footer-col-full .col-lf .infor { clear: both; width: 100%; color: #fff; font-size: 1.1rem; font-weight: 300; line-height: 1.6em;}
  .footer-col-full .col-lf .infor span.title { font-size: 1.4rem; font-weight: 500;}
  
  .footer-col-full .col-rt { width: 40%;}
  .footer-col-full .col-rt ul.nav-footer { width: 100%; padding: 0; margin: 0; list-style: none; display: block;}
  .footer-col-full .col-rt ul.nav-footer li { width: 100%; padding: 0 0 10px 0; margin: 0; text-align: right;}
  .footer-col-full .col-rt ul.nav-footer li a { color: #fff; font-size: 1.2rem; text-decoration: none;}
  .footer-col-full .col-rt ul.nav-footer li a:hover { border-bottom: 2px #fff solid;}

  .footer-col-full ul.nav-footer-mo { display: none;}

  .footer-copyright { clear: both; width: 100%; padding: 10px 20px; color: #000; font-size: 0.8rem; text-align: center; background-color: #fff; box-sizing: border-box;}


}

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

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

  header { clear: both; width: 100%; padding: 15px 40px 0 40px; border-bottom: 10px #1c2e68 solid; background-color: #fff; box-sizing: border-box;}

  img.header-logo { clear: both; width: 312px; height: auto; margin: 0 auto 30px auto;}

  nav#mo { display: none;}
  nav#pc { clear: both; width: 100%;}
  nav#pc ul.nav-menu { width: 100%; padding: 0 0 15px 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  nav#pc ul.nav-menu li { padding: 0; margin: 0 15px; position: relative;}
  nav#pc ul.nav-menu li a { color: #03733a; font-size: 1.4rem; font-weight: 600; text-decoration: none; cursor: pointer;}
  nav#pc ul.nav-menu li a:hover { color: #1c2e68;}
  nav#pc ul.nav-menu li a.sel { color: #1c2e68;}
  nav#pc ul.nav-menu li ul.nav-popup { width: 200px; padding: 20px 0; margin: 0; background-color: #03733a; list-style: none; display: none; position: absolute; top: 40px; left: calc(50% - 100px); z-index: 999;}
  nav#pc ul.nav-menu li ul.nav-popup li { width: 100%; padding: 0; margin: 0; position: relative;}
  nav#pc ul.nav-menu li ul.nav-popup li a { padding: 10px; color: #fff; font-size: 1.2rem; font-weight: 400; text-align: center; text-decoration: none; display: block;}
  nav#pc ul.nav-menu li ul.nav-popup li a:hover { background-color: rgba(255,255,255,0.3);}
  nav#pc ul.nav-menu li ul.nav-popup li ul.nav-popup-2nd { width: 200px; padding: 20px 0; margin: 0; background-color: #07542d; list-style: none; display: none; position: absolute; top: 0; left: 195px; z-index: 9999;}
  nav#pc ul.nav-menu li ul.nav-popup li ul.nav-popup-2nd li { width: 100%; padding: 0; margin: 0;}
  nav#pc ul.nav-menu li ul.nav-popup li ul.nav-popup-2nd li a { width: 100%; padding: 10px; color: #fff; font-size: 1rem; font-weight: 400; text-align: center; text-decoration: none; display: block; box-sizing: border-box;}
  nav#pc ul.nav-menu li ul.nav-popup li ul.nav-popup-2nd li a:hover { background-color: rgba(255,255,255,0.2);}


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

  .hp-banner-box { clear: both; width: 100%; position: relative;}
  .hp-banner-box div { position: relative; z-index: 1;}
  .hp-banner-box div .hp-banner-img { width: 100%; overflow: hidden;}
  .hp-banner-box div .hp-banner-img img.hp-banner-mo { display: none;}
  .hp-banner-box div .hp-banner-img img.hp-banner-pc { width: 100%; height: auto;}
  .hp-banner-box img.hp-banner-prev { width: 45px; height: auto; position: absolute; top: 50%; transform: translateY(-50%); left: 80px; z-index: 10; cursor: pointer;}
  .hp-banner-box img.hp-banner-next { width: 45px; height: auto; position: absolute; top: 50%; transform: translateY(-50%); right: 80px; z-index: 10; cursor: pointer;}


  /************ section #hp-new-prods ************/

  section#hp-new-prods { clear: both; width: 100%; padding: 90px 70px; box-sizing: border-box;}

  .hp-new-prods-title { width: 100%; padding: 0 10px; color: #03733a; font-size: 3rem; font-weight: 700; line-height: 1em; border-left: 10px #03733a solid; box-sizing: border-box; position: relative;}
  .veiw-more-mo { display: none;}
  .hp-new-prods-title .veiw-more { width: 200px; text-align: right; position: absolute; top: 0; right: 0; z-index: 2;}
  .hp-new-prods-title .veiw-more a { color: #03733a; font-size: 1.1rem; text-decoration: none;}
  .hp-new-prods-title .veiw-more a:hover { border-bottom: 2px #03733a solid;}

  .hp-new-prods-list { clear: both; width: 100%; padding: 40px 40px 0 40px; box-sizing: border-box; position: relative;}
  .hp-new-prods-list div { position: relative; z-index: 1;}
  .hp-new-prods-list img.hp-new-prods-prev { width: 35px; height: auto; position: absolute; top: 50%; transform: translateY(-50%); left: 0; z-index: 2; cursor: pointer;}
  .hp-new-prods-list img.hp-new-prods-next { width: 35px; height: auto; position: absolute; top: 50%; transform: translateY(-50%); right: 0; z-index: 2; cursor: pointer;}
  .hp-new-prods-list div .new-prods-box { width: calc(100% / 4); padding: 0 1.5vw; box-sizing: border-box;}
  .hp-new-prods-list div .new-prods-box div.prod-box { width: 100%; border: 1px #000 solid; border-radius: 10px; box-sizing: border-box; overflow: hidden;}
  .hp-new-prods-list div .new-prods-box div.prod-box .photo { width: 100%;}
  .hp-new-prods-list div .new-prods-box div.prod-box .photo img { width: 100%; height: auto;}
  .hp-new-prods-list div .new-prods-box div.prod-box .title { width: 100%; padding: 15px 0; color: #000; font-size: 1.4rem; font-weight: 500; text-align: center;}
  .hp-new-prods-list div .new-prods-box div.prod-box .more { width: 100%; margin: 15px 0;}
  .hp-new-prods-list div .new-prods-box div.prod-box .more a { width: 140px; padding: 8px 0; margin: 0 auto; color: #fff; font-size: 1.1rem; text-align: center; text-decoration: none; border-radius: 20px; background-color: #03733a; display: block;}
  .hp-new-prods-list div .new-prods-box div.prod-box .more a:hover { background-color: #0c5b33;}


  /************ section #banner-links ************/

  section#banner-links { clear: both; width: 100%;}

  .hp-prod-add-link-box { width: 100%;}
  .hp-prod-add-link-box img { width: 100%; height: auto;}


  /************ section #hp-new-prods-link ************/

  section#hp-new-prods-link { clear: both; width: 100%; padding: 80px 70px; box-sizing: border-box;}

  img.hp-new-prod-link-mo { display: none;}
  img.hp-new-prod-link { width: 100%; height: auto;}


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

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


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

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


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

  section#page-about { clear: both; width: 100%; padding: 0 70px 80px 70px; box-sizing: border-box;}

  .page-about-title { width: 100%; padding: 0 10px; margin: 0 0 40px 0; color: #03733a; font-size: 3rem; font-weight: 700; line-height: 1em; border-left: 10px #03733a solid; box-sizing: border-box; position: relative;}
  .page-about-title span.prod-sort { font-size: 2rem;}

  .page-about-con { clear: both; width: 100%; margin: 0 auto; font-size: 1.1rem; line-height: 2em;}
  .page-about-con span.title { font-size: 1.4rem; font-weight: 500;}

  img.page-about-pic { width: 45vw; height: auto; margin: 0 0 20px 20px; float: right;}


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

  section#page-products { clear: both; width: 100%; padding: 0 70px 80px 70px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}

  .page-prods-sort-nav { width: 200px;}
  .page-prods-sort-nav ul.sort-nav { width: 100%; padding: 0; margin: 0; list-style: none; display: block;}
  .page-prods-sort-nav ul.sort-nav li { width: 100%; padding: 0; margin: 0; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .page-prods-sort-nav ul.sort-nav li:last-child { border-bottom: 0;}
  .page-prods-sort-nav ul.sort-nav li a { width: calc(100% - 40px); padding: 10px; box-sizing: border-box; color: #1c2e68; font-size: 1.1rem; font-weight: 500; text-decoration: none; display: block;}
  .page-prods-sort-nav ul.sort-nav li a:hover { color: #03733a; background-color: #eee;}
  .page-prods-sort-nav ul.sort-nav li .popup-plus { width: 30px; color: #1c2e68; font-size: 1.6rem; text-align: center; cursor: pointer;}
  .page-prods-sort-nav ul.sort-nav li ul.prodnav-popup { width: 100%; padding: 0 0 0 20px; margin: 0; list-style: none; display: none; box-sizing: border-box;}
  .page-prods-sort-nav ul.sort-nav li ul.prodnav-popup li { width: 100%; padding: 0; margin: 0; border-bottom: 1px #ccc solid;}
  .page-prods-sort-nav ul.sort-nav li ul.prodnav-popup li:last-child { border-bottom: 0;}
  .page-prods-sort-nav ul.sort-nav li ul.prodnav-popup li a { width: 100%; padding: 15px; box-sizing: border-box; color: #1c2e68; font-size: 1rem; text-decoration: none; display: block;}
  .page-prods-sort-nav ul.sort-nav li ul.prodnav-popup li a:hover { color: #03733a; background-color: #eee;}


  .page-sort-prods-list { width: calc(100% - 200px); padding: 0 0 0 40px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-sort-prods-list .prod-box { width: calc(100% / 3 - 20px); padding: 10px; margin: 0 10px 30px 10px; border: 1px #444 solid; border-radius: 10px; box-sizing: border-box;}
  .page-sort-prods-list .prod-box .photo { width: 100%;}
  .page-sort-prods-list .prod-box .photo img { width: 100%; height: auto;}
  .page-sort-prods-list .prod-box .title { width: 100%; padding: 10px 0; color: #03733a; font-size: 1.2rem; font-weight: 500; text-align: center;}
  .page-sort-prods-list .prod-box .view-more { width: 100%;}
  .page-sort-prods-list .prod-box .view-more a { width: 120px; padding: 6px 0; margin: 10px auto; color: #fff; font-size: 1rem; text-align: center; text-decoration: none; border-radius: 20px; background-color: #03733a; display: block;}
  .page-sort-prods-list .prod-box .view-more a:hover { background-color: #0c5b33;}


  ul.page-num-list { clear: both; width: 100%; padding: 0; margin: 60px 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  ul.page-num-list li { padding: 0; margin: 0 5px 10px 5px;}
  ul.page-num-list li a { padding: 10px; color: #03733a; font-size: 0.9rem; text-decoration: none; border: 1px #03733a solid; background-color: #fff;}
  ul.page-num-list li a:hover { background-color: #eee;}
  ul.page-num-list li a.sel { color: #fff; background-color: #03733a;}


  /************ section #page-product-details ************/

  section#page-product-details { clear: both; width: 100%; padding: 0 0 80px 0;}

  .page-prod-details { clear: both; width: 100%; padding: 0 70px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-prod-details .prod-photo { width: 45%; position: relative;}
  .page-prod-details .prod-photo img.page-prods-prev { width: 2vw; height: auto; position: absolute; top: 14vw; left: 0; z-index: 2; cursor: pointer;}
  .page-prod-details .prod-photo img.page-prods-next { width: 2vw; height: auto; position: absolute; top: 14vw; right: 0; z-index: 2; cursor: pointer;}
  .page-prod-details .prod-photo img.photo-big { width: 85%; height: auto; margin: 0 auto;}
  .page-prod-details .prod-photo img.photo-thumb { width: 90%; height: auto; margin: 0 auto; border: 1px #ccc solid; box-sizing: border-box;}

  .page-prod-details .prod-feature { width: 55%; padding: 0 0 0 40px; box-sizing: border-box;}
  .page-prod-details .prod-feature .prod-title { width: 100%; padding: 0 0 10px 0; color: #000; font-size: 3rem; font-weight: 600; line-height: 1.4em; border-bottom: 1px #000 solid;}
  .page-prod-details .prod-feature .prod-content { width: 100%; padding: 20px 0; color: #000; font-size: 1.2rem; line-height: 2em;}
  .page-prod-details .prod-feature .prod-content ul.dot { width: 100%; padding: 0 0 0 30px; margin: 0; list-style-type: disc; display: block; box-sizing: border-box;}
  .page-prod-details .prod-feature .prod-content ul.dot li { padding: 0; margin: 0;}

  .page-prod-info-full { clear: both; width: 100%;}
  .page-prod-info-full ul.prod-info-tab { width: 100%; padding: 0 70px; margin: 80px 0 0 0; list-style: none; display: flex; justify-content: flex-start; align-items: center; background-color: #1d2d68; box-sizing: border-box;}
  .page-prod-info-full ul.prod-info-tab li { width: 170px; padding: 10px 0; margin: 0 5px 0 0;}
  .page-prod-info-full ul.prod-info-tab li a { width: 100%; padding: 15px 0; color: #fff; font-size: 1.1rem; line-height: 1.2em; text-align: center; text-decoration: none; background-color: rgba(255,255,255,0.15); display: block;}
  .page-prod-info-full ul.prod-info-tab li:nth-child(odd) a { border-radius: 0 30px 0 30px;}
  .page-prod-info-full ul.prod-info-tab li:nth-child(even) a { border-radius: 30px 0 30px 0;}
  .page-prod-info-full ul.prod-info-tab li a:hover { background-color: rgba(255,255,255,0.3);}
  .page-prod-info-full ul.prod-info-tab li a.sel { background-color: #03733a;}

  .page-prod-info-full .prod-info-content { clear: both; width: 100%; padding: 60px 70px; box-sizing: border-box;}
  .page-prod-info-full .prod-info-content > div { display: none;}
  .page-prod-info-full .prod-info-content .specification-table { clear: both; width: 100%; font-size: 1.2rem;}
  .page-prod-info-full .prod-info-content .specification-table .row-full { width: 100%; padding: 10px; box-sizing: border-box;}
  .page-prod-info-full .prod-info-content .specification-table .row-full:nth-child(odd) { background-color: #eee;}
  .page-prod-info-full .prod-info-content .specification-table .row-full .caption { width: 30%; font-weight: 500; float: left;}
  .page-prod-info-full .prod-info-content .specification-table .row-full .column { width: 70%; float: left;}
  .page-prod-info-full .prod-info-content .specification-table .row-full .column .column-3x { width: calc(100% / 3); align-items: center; float: left;}
  .page-prod-info-full .prod-info-content .pics-list { width: 100%; display: flex !important; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-prod-info-full .prod-info-content .pics-list .photo { width: calc(100% / 4 - 30px); margin: 0 15px 30px 15px; border: 1px #ccc solid; box-sizing: border-box;}
  .page-prod-info-full .prod-info-content .pics-list .photo img { width: 100%; height: auto;}
  .page-prod-info-full .prod-info-content .description-con { width: 100%; color: #000; font-size: 1.2rem; line-height: 2em;}
  .page-prod-info-full .prod-info-content .prod-video { width: 100%;}
  .page-prod-info-full .prod-info-content .prod-video .video-box { clear: both; width: 100%; margin: 0 auto 40px auto;}
  .page-prod-info-full .prod-info-content .download-bt { width: 100%;}
  .page-prod-info-full .prod-info-content .download-bt a { width: 200px; padding: 10px 0; color: #fff; font-size: 1.4rem; font-weight: 500; text-align: center; text-decoration: none; border-radius: 30px; background-color: #03733a; display: block;}
  .page-prod-info-full .prod-info-content .download-bt a:hover { background-color: #0c5b33;}
  .page-prod-info-full .prod-info-content .patents-list { width: 100%; display: flex !important; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-prod-info-full .prod-info-content .patents-list .list-box { width: calc(100% / 3 - 40px); margin: 0 20px 40px 20px;}
  .page-prod-info-full .prod-info-content .patents-list .list-box img { width: 100%; height: auto;}
  .page-prod-info-full .prod-info-content .patents-list .list-box .title { width: 100%; padding: 10px 0; color: #000; font-size: 1.4rem; text-align: center;}

  .page-prod-info-full .prod-info-content .intro-text { clear: both; width: 100%; color: #000; font-size: 1.2rem; line-height: 1.8em;}
  .page-prod-info-full .prod-info-content .intro-text a { color: #000; text-decoration: none; border-bottom: 1px #000 dashed;}


  /************ news ************/

  ul.page-news-list { clear: both; width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  ul.page-news-list li { width: 50%; padding: 0 20px; margin: 0 0 30px 0; box-sizing: border-box;}
  ul.page-news-list li a { width: 100%; padding: 5px; color: #000; text-decoration: none; border: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: flex-start; box-sizing: border-box;}
  ul.page-news-list li a .pic { width: 40%;}
  ul.page-news-list li a .pic img { width: 100%; height: auto;}
  ul.page-news-list li a .date-title { width: 60%; padding: 0 0 0 10px; box-sizing: border-box;}
  ul.page-news-list li a .date-title .date { width: 100%; color: #666; font-size: 0.8rem;}
  ul.page-news-list li a .date-title .title { width: 100%; padding: 10px 0; color: #000; font-size: 1.2rem; font-weight: 500; line-height: 1.2em;}
  ul.page-news-list li a .date-title .intro { width: 100%; color: #444; font-size: 0.8rem; line-height: 1.2em;}
  ul.page-news-list li a:hover { border: 2px #ccc solid;}


  .page-news-con-title { clear: both; width: 100%; margin: 0 auto;}
  .page-news-con-title .date { width: 100%; color: #666; font-size: 0.8rem;}
  .page-news-con-title .title { width: 100%; padding: 10px 0; color: #000; font-size: 1.4rem; font-weight: 500; line-height: 1.4em; border-bottom: 1px #ccc solid;}

  .page-news-content { clear: both; width: 100%; color: #000; font-size: 1rem; line-height: 2em; margin: 40px auto;}
  .page-news-content img { max-width: 100%; height: auto;}
  .page-news-content a { color: #000; text-decoration: none; border-bottom: 1px #000 dashed;}

  .page-goback-bt { clear: both; width: 100%;}
  .page-goback-bt a { width: 120px; padding: 8px 0; margin: 0 auto; color: #fff; font-size: 0.9rem; text-align: center; text-decoration: none; border-radius: 12px; background-color: #03733a; display: block;}
  .page-goback-bt a:hover { background-color: #0c5b33;}


  /************ contact ************/

  .page-contact-con { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-contact-con .contact-info-mo { display: none;}
  .page-contact-con .contact-info { width: 60%; padding: 0 40px 0 0; color: #000; font-size: 1.2rem; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; box-sizing: border-box;}
  .page-contact-con .contact-info .title { width: 100%; padding: 0 0 30px 0; color: #03733a; font-size: 1.4rem; font-weight: 500;}
  .page-contact-con .contact-info .icon { width: 40px; padding: 0 0 15px 0; color: #03733a;}
  .page-contact-con .contact-info .column { width: calc(100% - 40px); padding: 0 0 15px 0;}
  .page-contact-con .contact-map { width: 40%;}
  .page-contact-con .contact-map img.pic { width: 100%; height: auto;}


  /************ site map ************/

  ul.sitemap-nav { clear: both; width: 100%; padding: 0; margin: 100px 0; list-style: none; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
  ul.sitemap-nav li { padding: 0; margin: 0 40px; color: #666; font-size: 1.6rem; font-weight: 500;}
  ul.sitemap-nav li a { color: #000; text-decoration: none;}
  ul.sitemap-nav li a:hover { border-bottom: 3px #000 solid;}
  ul.sitemap-nav li ul.nav-pop { padding: 0; margin: 0; list-style: none; display: block;}
  ul.sitemap-nav li ul.nav-pop li { padding: 0; margin: 5px 0; text-align: center;}
  ul.sitemap-nav li ul.nav-pop li a { color: #000; font-size: 1.1rem; font-weight: 300;}
  ul.sitemap-nav li ul.nav-pop li a:hover { border-bottom: 1px #000 solid;}


  /************ 404 error ************/

  .page-error-con { clear: both; width: 100%; padding: 60px 0; color: #03733a; text-align: center;}
  .page-error-con .error-title { width: 100%; margin: 0 0 20px 0; font-size: 4rem; font-weight: 600;}
  .page-error-con .error-text-mo { display: none;}
  .page-error-con .error-text { width: 100%; margin: 0 0 60px 0; font-size: 2rem;}
  .page-error-con a { width: 200px; padding: 5px 0; margin: 0 auto; color: #fff; font-size: 1.4rem; text-align: center; text-decoration: none; border-radius: 26px; background-color: #03733a; display: block;}


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

  footer { clear: both; width: 100%; background-color: #03733a;}

  .footer-col-full { width: 100%; padding: 80px 70px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch;}
  .footer-col-full .col-lf { width: 60%;}
  .footer-col-full .col-lf img.footer-logo { width: 290px; height: auto; margin: 0 0 20px 0;}
  .footer-col-full .col-lf .infor { clear: both; width: 100%; color: #fff; font-size: 1.1rem; font-weight: 300; line-height: 1.6em;}
  .footer-col-full .col-lf .infor span.title { font-size: 1.4rem; font-weight: 500;}
  
  .footer-col-full .col-rt { width: 40%;}
  .footer-col-full .col-rt ul.nav-footer { width: 100%; padding: 0; margin: 0; list-style: none; display: block;}
  .footer-col-full .col-rt ul.nav-footer li { width: 100%; padding: 0 0 10px 0; margin: 0; text-align: right;}
  .footer-col-full .col-rt ul.nav-footer li a { color: #fff; font-size: 1.2rem; text-decoration: none;}
  .footer-col-full .col-rt ul.nav-footer li a:hover { border-bottom: 2px #fff solid;}

  .footer-col-full ul.nav-footer-mo { display: none;}

  .footer-copyright { clear: both; width: 100%; padding: 10px 20px; color: #000; font-size: 0.8rem; text-align: center; background-color: #fff; box-sizing: border-box;}


}

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

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

  header { clear: both; width: 100%; padding: 15px 40px; border-bottom: 10px #1c2e68 solid; background-color: #fff; box-sizing: border-box; position: relative;}

  img.header-logo { clear: both; width: 312px; height: auto; margin: 0 auto 30px auto;}

  nav#pc { display: none;}
  nav#mo { clear: both; width: 100%;}
  nav#mo .nav-icon { width: 50px; margin: 0 auto; color: #03733a; font-size: 2.4rem; text-align: center; cursor: pointer;}
  nav#mo ul.nav-menu { width: 100%; padding: 60px 40px; margin: 0; background-color: #03733a; box-sizing: border-box; list-style: none; display: none; position: absolute; top: 184px; left: 0; z-index: 99999;}
  nav#mo ul.nav-menu li { width: 100%; padding: 0; margin: 0;}
  nav#mo ul.nav-menu li a { width: 100%; padding: 15px 0; color: #fff; font-size: 1.4rem; font-weight: 600; text-align: center; text-decoration: none; display: block;}
  nav#mo ul.nav-menu li a:active { color: #1c2e68;}
  nav#mo ul.nav-menu li a.sel { color: #1c2e68;}
  nav#mo ul.nav-menu ul.nav-popup { width: 100%; padding: 40px 0; margin: 0; background-color: #03733a; list-style: none; display: none;}
  nav#mo ul.nav-menu ul.nav-popup li { width: 100%; padding: 0; margin: 0;}
  nav#mo ul.nav-menu ul.nav-popup li a { width: 100%; padding: 20px; box-sizing: border-box; color: #fff; font-size: 1.2rem; font-weight: 400; text-align: center; text-decoration: none; border-bottom: 1px rgba(255,255,255,0.5) dashed; display: block;}
  nav#mo ul.nav-menu ul.nav-popup li:first-child a { border-top: 1px rgba(255,255,255,0.5) dashed;}
  nav#mo ul.nav-menu ul.nav-popup li a:active { background-color: rgba(255,255,255,0.3);}
  nav#mo ul.nav-menu ul.nav-popup ul.nav-popup-2nd { width: 100%; padding: 20px 0; margin: 0; background-color: #07542d; list-style: none; display: none;}
  nav#mo ul.nav-menu ul.nav-popup ul.nav-popup-2nd li { width: 100%; padding: 0; margin: 0;}
  nav#mo ul.nav-menu ul.nav-popup ul.nav-popup-2nd li:first-child a { border-top: 0;}
  nav#mo ul.nav-menu ul.nav-popup ul.nav-popup-2nd li:last-child a { border-bottom: 0;}
  nav#mo ul.nav-menu ul.nav-popup ul.nav-popup-2nd li a { width: 100%; padding: 10px; color: #fff; font-size: 1rem; font-weight: 400; text-align: center; text-decoration: none; display: block; box-sizing: border-box;}
  nav#mo ul.nav-menu ul.nav-popup ul.nav-popup-2nd li a:active { background-color: rgba(255,255,255,0.2);}


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

  .hp-banner-box { clear: both; width: 100%; position: relative;}
  .hp-banner-box div { position: relative; z-index: 1;}
  .hp-banner-box div .hp-banner-img { width: 100%; overflow: hidden;}
  .hp-banner-box div .hp-banner-img img.hp-banner-mo { display: none;}
  .hp-banner-box div .hp-banner-img img.hp-banner-pc { width: 100%; height: auto;}
  .hp-banner-box img.hp-banner-prev { width: 35px; height: auto; position: absolute; top: 50%; transform: translateY(-50%); left: 40px; z-index: 10; cursor: pointer;}
  .hp-banner-box img.hp-banner-next { width: 35px; height: auto; position: absolute; top: 50%; transform: translateY(-50%); right: 40px; z-index: 10; cursor: pointer;}


  /************ section #hp-new-prods ************/

  section#hp-new-prods { clear: both; width: 100%; padding: 90px 40px; box-sizing: border-box;}

  .hp-new-prods-title { width: 100%; padding: 0 10px; color: #03733a; font-size: 3rem; font-weight: 700; line-height: 1em; border-left: 10px #03733a solid; box-sizing: border-box; position: relative;}
  .veiw-more-mo { display: none;}
  .hp-new-prods-title .veiw-more { width: 200px; text-align: right; position: absolute; top: 0; right: 0; z-index: 2;}
  .hp-new-prods-title .veiw-more a { color: #03733a; font-size: 1.1rem; text-decoration: none;}
  .hp-new-prods-title .veiw-more a:hover { border-bottom: 2px #03733a solid;}

  .hp-new-prods-list { clear: both; width: 100%; padding: 40px 40px 0 40px; box-sizing: border-box; position: relative;}
  .hp-new-prods-list div { position: relative; z-index: 1;}
  .hp-new-prods-list img.hp-new-prods-prev { width: 35px; height: auto; position: absolute; top: 50%; transform: translateY(-50%); left: 0; z-index: 2; cursor: pointer;}
  .hp-new-prods-list img.hp-new-prods-next { width: 35px; height: auto; position: absolute; top: 50%; transform: translateY(-50%); right: 0; z-index: 2; cursor: pointer;}
  .hp-new-prods-list div .new-prods-box { width: calc(100% / 4); padding: 0 1.5vw; box-sizing: border-box;}
  .hp-new-prods-list div .new-prods-box div.prod-box { width: 100%; border: 1px #000 solid; border-radius: 10px; box-sizing: border-box; overflow: hidden;}
  .hp-new-prods-list div .new-prods-box div.prod-box .photo { width: 100%;}
  .hp-new-prods-list div .new-prods-box div.prod-box .photo img { width: 100%; height: auto;}
  .hp-new-prods-list div .new-prods-box div.prod-box .title { width: 100%; padding: 15px 0; color: #000; font-size: 1.4rem; font-weight: 500; text-align: center;}
  .hp-new-prods-list div .new-prods-box div.prod-box .more { width: 100%; margin: 15px 0;}
  .hp-new-prods-list div .new-prods-box div.prod-box .more a { width: 140px; padding: 8px 0; margin: 0 auto; color: #fff; font-size: 1.1rem; text-align: center; text-decoration: none; border-radius: 20px; background-color: #03733a; display: block;}
  .hp-new-prods-list div .new-prods-box div.prod-box .more a:hover { background-color: #0c5b33;}


  /************ section #banner-links ************/

  section#banner-links { clear: both; width: 100%;}

  .hp-prod-add-link-box { width: 100%;}
  .hp-prod-add-link-box img { width: 100%; height: auto;}


  /************ section #hp-new-prods-link ************/

  section#hp-new-prods-link { clear: both; width: 100%; padding: 80px 40px; box-sizing: border-box;}

  img.hp-new-prod-link-mo { display: none;}
  img.hp-new-prod-link { width: 100%; height: auto;}


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

  .page-banner { clear: both; width: 100%; overflow: hidden;}
  .page-banner img { width: 140%; height: auto; margin: 0 0 0 -20%;}


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

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


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

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

  .page-about-title { width: 100%; padding: 0 10px; margin: 0 0 40px 0; color: #03733a; font-size: 3rem; font-weight: 700; line-height: 1em; border-left: 10px #03733a solid; box-sizing: border-box; position: relative;}
  .page-about-title span.prod-sort { font-size: 2rem;}

  .page-about-con { clear: both; width: 100%; margin: 0 auto; font-size: 1.1rem; line-height: 2em;}
  .page-about-con span.title { font-size: 1.4rem; font-weight: 500;}

  img.page-about-pic { width: 40vw; height: auto; margin: 0 0 20px 20px; float: right;}


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

  section#page-products { clear: both; width: 100%; padding: 0 40px 80px 40px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}

  .page-prods-sort-nav { width: 200px;}
  .page-prods-sort-nav ul.sort-nav { width: 100%; padding: 0; margin: 0; list-style: none; display: block;}
  .page-prods-sort-nav ul.sort-nav li { width: 100%; padding: 0; margin: 0; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .page-prods-sort-nav ul.sort-nav li:last-child { border-bottom: 0;}
  .page-prods-sort-nav ul.sort-nav li a { width: calc(100% - 30px); padding: 10px; box-sizing: border-box; color: #1c2e68; font-size: 1.1rem; font-weight: 500; text-decoration: none; display: block;}
  .page-prods-sort-nav ul.sort-nav li a:hover { color: #03733a; background-color: #eee;}
  .page-prods-sort-nav ul.sort-nav li .popup-plus { width: 20px; color: #1c2e68; font-size: 1.2rem; text-align: center; cursor: pointer;}
  .page-prods-sort-nav ul.sort-nav li ul.prodnav-popup { width: 100%; padding: 0 0 0 20px; margin: 0; list-style: none; display: none; box-sizing: border-box;}
  .page-prods-sort-nav ul.sort-nav li ul.prodnav-popup li { width: 100%; padding: 0; margin: 0; border-bottom: 1px #ccc solid;}
  .page-prods-sort-nav ul.sort-nav li ul.prodnav-popup li:last-child { border-bottom: 0;}
  .page-prods-sort-nav ul.sort-nav li ul.prodnav-popup li a { width: 100%; padding: 15px; box-sizing: border-box; color: #1c2e68; font-size: 1rem; text-decoration: none; display: block;}
  .page-prods-sort-nav ul.sort-nav li ul.prodnav-popup li a:hover { color: #03733a; background-color: #eee;}


  .page-sort-prods-list { width: calc(100% - 200px); padding: 0 0 0 40px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-sort-prods-list .prod-box { width: calc(100% / 2 - 20px); padding: 10px; margin: 0 10px 30px 10px; border: 1px #444 solid; border-radius: 10px; box-sizing: border-box;}
  .page-sort-prods-list .prod-box .photo { width: 100%;}
  .page-sort-prods-list .prod-box .photo img { width: 100%; height: auto;}
  .page-sort-prods-list .prod-box .title { width: 100%; padding: 10px 0; color: #03733a; font-size: 1.2rem; font-weight: 500; text-align: center;}
  .page-sort-prods-list .prod-box .view-more { width: 100%;}
  .page-sort-prods-list .prod-box .view-more a { width: 120px; padding: 6px 0; margin: 10px auto; color: #fff; font-size: 1rem; text-align: center; text-decoration: none; border-radius: 20px; background-color: #03733a; display: block;}
  .page-sort-prods-list .prod-box .view-more a:hover { background-color: #0c5b33;}


  ul.page-num-list { clear: both; width: 100%; padding: 0; margin: 60px 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  ul.page-num-list li { padding: 0; margin: 0 5px 10px 5px;}
  ul.page-num-list li a { padding: 10px; color: #03733a; font-size: 0.9rem; text-decoration: none; border: 1px #03733a solid; background-color: #fff;}
  ul.page-num-list li a:hover { background-color: #eee;}
  ul.page-num-list li a.sel { color: #fff; background-color: #03733a;}


  /************ section #page-product-details ************/

  section#page-product-details { clear: both; width: 100%; padding: 0 0 80px 0;}

  .page-prod-details { clear: both; width: 100%; padding: 0 40px; box-sizing: border-box;}
  .page-prod-details .prod-photo { width: 100%; position: relative;}
  .page-prod-details .prod-photo img.page-prods-prev { width: 6vw; height: auto; position: absolute; top: 34vw; left: 0; z-index: 2; cursor: pointer;}
  .page-prod-details .prod-photo img.page-prods-next { width: 6vw; height: auto; position: absolute; top: 34vw; right: 0; z-index: 2; cursor: pointer;}
  .page-prod-details .prod-photo img.photo-big { width: 85%; height: auto; margin: 0 auto;}
  .page-prod-details .prod-photo img.photo-thumb { width: 90%; height: auto; margin: 0 auto; border: 1px #ccc solid; box-sizing: border-box;}

  .page-prod-details .prod-feature { width: 100%; margin: 60px 0 0 0;}
  .page-prod-details .prod-feature .prod-title { width: 100%; padding: 0 0 10px 0; color: #000; font-size: 3rem; font-weight: 600; line-height: 1.4em; border-bottom: 1px #000 solid;}
  .page-prod-details .prod-feature .prod-content { width: 100%; padding: 20px 0; color: #000; font-size: 1.2rem; line-height: 2em;}
  .page-prod-details .prod-feature .prod-content ul.dot { width: 100%; padding: 0 0 0 30px; margin: 0; list-style-type: disc; display: block; box-sizing: border-box;}
  .page-prod-details .prod-feature .prod-content ul.dot li { padding: 0; margin: 0;}

  .page-prod-info-full { clear: both; width: 100%;}
  .page-prod-info-full ul.prod-info-tab { width: 100%; padding: 10px 40px 5px 40px; margin: 80px 0 0 0; list-style: none; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; background-color: #1d2d68; box-sizing: border-box;}
  .page-prod-info-full ul.prod-info-tab li { width: calc(100% / 5 - 2px); padding: 0; margin: 0 5px 5px 0;}
  .page-prod-info-full ul.prod-info-tab li a { width: 100%; padding: 15px 0; color: #fff; font-size: 1.1rem; line-height: 1.2em; text-align: center; text-decoration: none; background-color: rgba(255,255,255,0.15); display: block;}
  .page-prod-info-full ul.prod-info-tab li:nth-child(odd) a { border-radius: 0 30px 0 30px;}
  .page-prod-info-full ul.prod-info-tab li:nth-child(even) a { border-radius: 30px 0 30px 0;}
  .page-prod-info-full ul.prod-info-tab li a:hover { background-color: rgba(255,255,255,0.3);}
  .page-prod-info-full ul.prod-info-tab li a.sel { background-color: #03733a;}

  .page-prod-info-full .prod-info-content { clear: both; width: 100%; padding: 60px 40px; box-sizing: border-box;}
  .page-prod-info-full .prod-info-content > div { display: none;}
  .page-prod-info-full .prod-info-content .specification-table { clear: both; width: 100%; font-size: 1.2rem;}
  .page-prod-info-full .prod-info-content .specification-table .row-full { width: 100%; padding: 10px; box-sizing: border-box;}
  .page-prod-info-full .prod-info-content .specification-table .row-full:nth-child(odd) { background-color: #eee;}
  .page-prod-info-full .prod-info-content .specification-table .row-full .caption { width: 35%; font-weight: 500; float: left;}
  .page-prod-info-full .prod-info-content .specification-table .row-full .column { width: 65%; float: left;}
  .page-prod-info-full .prod-info-content .specification-table .row-full .column .column-3x { width: calc(100% / 3); align-items: center; float: left;}
  .page-prod-info-full .prod-info-content .pics-list { width: 100%; display: flex !important; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-prod-info-full .prod-info-content .pics-list .photo { width: calc(100% / 3 - 30px); margin: 0 15px 30px 15px; border: 1px #ccc solid; box-sizing: border-box;}
  .page-prod-info-full .prod-info-content .pics-list .photo img { width: 100%; height: auto;}
  .page-prod-info-full .prod-info-content .description-con { width: 100%; color: #000; font-size: 1.2rem; line-height: 2em;}
  .page-prod-info-full .prod-info-content .prod-video { width: 100%;}
  .page-prod-info-full .prod-info-content .prod-video .video-box { clear: both; width: 100%; margin: 0 auto 40px auto;}
  .page-prod-info-full .prod-info-content .download-bt { width: 100%;}
  .page-prod-info-full .prod-info-content .download-bt a { width: 200px; padding: 10px 0; color: #fff; font-size: 1.4rem; font-weight: 500; text-align: center; text-decoration: none; border-radius: 30px; background-color: #03733a; display: block;}
  .page-prod-info-full .prod-info-content .download-bt a:hover { background-color: #0c5b33;}
  .page-prod-info-full .prod-info-content .patents-list { width: 100%; display: flex !important; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-prod-info-full .prod-info-content .patents-list .list-box { width: calc(100% / 2 - 40px); margin: 0 20px 40px 20px;}
  .page-prod-info-full .prod-info-content .patents-list .list-box img { width: 100%; height: auto;}
  .page-prod-info-full .prod-info-content .patents-list .list-box .title { width: 100%; padding: 10px 0; color: #000; font-size: 1.4rem; text-align: center;}

  .page-prod-info-full .prod-info-content .intro-text { clear: both; width: 100%; color: #000; font-size: 1.2rem; line-height: 1.8em;}
  .page-prod-info-full .prod-info-content .intro-text a { color: #000; text-decoration: none; border-bottom: 1px #000 dashed;}


  /************ news ************/

  ul.page-news-list { clear: both; width: 100%; padding: 0; margin: 0; list-style: none; display: block;}
  ul.page-news-list li { width: 100%; padding: 0 20px; margin: 0 0 30px 0; box-sizing: border-box;}
  ul.page-news-list li a { width: 100%; padding: 5px; color: #000; text-decoration: none; border: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: flex-start; box-sizing: border-box;}
  ul.page-news-list li a .pic { width: 40%;}
  ul.page-news-list li a .pic img { width: 100%; height: auto;}
  ul.page-news-list li a .date-title { width: 60%; padding: 0 0 0 10px; box-sizing: border-box;}
  ul.page-news-list li a .date-title .date { width: 100%; color: #666; font-size: 0.8rem;}
  ul.page-news-list li a .date-title .title { width: 100%; padding: 10px 0; color: #000; font-size: 1.2rem; font-weight: 500; line-height: 1.2em;}
  ul.page-news-list li a .date-title .intro { width: 100%; color: #444; font-size: 0.8rem; line-height: 1.2em;}
  ul.page-news-list li a:hover { border: 2px #ccc solid;}


  .page-news-con-title { clear: both; width: 100%; margin: 0 auto;}
  .page-news-con-title .date { width: 100%; color: #666; font-size: 0.8rem;}
  .page-news-con-title .title { width: 100%; padding: 10px 0; color: #000; font-size: 1.4rem; font-weight: 500; line-height: 1.4em; border-bottom: 1px #ccc solid;}

  .page-news-content { clear: both; width: 100%; color: #000; font-size: 1rem; line-height: 2em; margin: 40px auto;}
  .page-news-content img { max-width: 100%; height: auto;}
  .page-news-content a { color: #000; text-decoration: none; border-bottom: 1px #000 dashed;}

  .page-goback-bt { clear: both; width: 100%;}
  .page-goback-bt a { width: 120px; padding: 8px 0; margin: 0 auto; color: #fff; font-size: 0.9rem; text-align: center; text-decoration: none; border-radius: 12px; background-color: #03733a; display: block;}
  .page-goback-bt a:hover { background-color: #0c5b33;}


  /************ contact ************/

  .page-contact-con { clear: both; width: 100%;}
  .page-contact-con .contact-info-mo { display: none;}
  .page-contact-con .contact-info { width: 100%; padding: 0 40px 0 0; color: #000; font-size: 1.2rem; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; box-sizing: border-box;}
  .page-contact-con .contact-info .title { width: 100%; padding: 0 0 30px 0; color: #03733a; font-size: 1.4rem; font-weight: 500;}
  .page-contact-con .contact-info .icon { width: 40px; padding: 0 0 15px 0; color: #03733a;}
  .page-contact-con .contact-info .column { width: calc(100% - 40px); padding: 0 0 15px 0;}
  .page-contact-con .contact-map { clear: both; width: 100%; margin: 30px 0 0 0;}
  .page-contact-con .contact-map img.pic { width: 100%; height: auto;}


  /************ site map ************/

  ul.sitemap-nav { clear: both; width: 100%; padding: 0; margin: 100px 0; list-style: none; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
  ul.sitemap-nav li { padding: 0; margin: 0 20px; color: #666; font-size: 1.6rem; font-weight: 500;}
  ul.sitemap-nav li a { color: #000; text-decoration: none;}
  ul.sitemap-nav li a:hover { border-bottom: 3px #000 solid;}
  ul.sitemap-nav li ul.nav-pop { padding: 0; margin: 0; list-style: none; display: block;}
  ul.sitemap-nav li ul.nav-pop li { padding: 0; margin: 5px 0; text-align: center;}
  ul.sitemap-nav li ul.nav-pop li a { color: #000; font-size: 1.1rem; font-weight: 300;}
  ul.sitemap-nav li ul.nav-pop li a:hover { border-bottom: 1px #000 solid;}


  /************ 404 error ************/

  .page-error-con { clear: both; width: 100%; padding: 60px 0; color: #03733a; text-align: center;}
  .page-error-con .error-title { width: 100%; margin: 0 0 20px 0; font-size: 4rem; font-weight: 600;}
  .page-error-con .error-text-mo { display: none;}
  .page-error-con .error-text { width: 100%; margin: 0 0 60px 0; font-size: 2rem;}
  .page-error-con a { width: 200px; padding: 5px 0; margin: 0 auto; color: #fff; font-size: 1.4rem; text-align: center; text-decoration: none; border-radius: 26px; background-color: #03733a; display: block;}


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

  footer { clear: both; width: 100%; background-color: #03733a;}

  .footer-col-full { width: 100%; padding: 80px 40px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: stretch;}
  .footer-col-full .col-lf { width: 65%;}
  .footer-col-full .col-lf img.footer-logo { width: 290px; height: auto; margin: 0 0 20px 0;}
  .footer-col-full .col-lf .infor { clear: both; width: 100%; color: #fff; font-size: 1.1rem; font-weight: 300; line-height: 1.6em;}
  .footer-col-full .col-lf .infor span.title { font-size: 1.4rem; font-weight: 500;}
  
  .footer-col-full .col-rt { width: 35%;}
  .footer-col-full .col-rt ul.nav-footer { width: 100%; padding: 0; margin: 0; list-style: none; display: block;}
  .footer-col-full .col-rt ul.nav-footer li { width: 100%; padding: 0 0 10px 0; margin: 0; text-align: right;}
  .footer-col-full .col-rt ul.nav-footer li a { color: #fff; font-size: 1.2rem; text-decoration: none;}
  .footer-col-full .col-rt ul.nav-footer li a:hover { border-bottom: 2px #fff solid;}

  .footer-col-full ul.nav-footer-mo { display: none;}

  .footer-copyright { clear: both; width: 100%; padding: 10px 20px; color: #000; font-size: 0.8rem; text-align: center; background-color: #fff; box-sizing: border-box;}


}

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

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

  header { clear: both; width: 100%; padding: 10px 20px; border-bottom: 10px #1c2e68 solid; background-color: #fff; box-sizing: border-box; position: relative;}

  img.header-logo { clear: both; width: 200px; height: auto; margin: 0 auto 20px auto;}

  nav#pc { display: none;}
  nav#mo { clear: both; width: 100%;}
  nav#mo .nav-icon { width: 50px; margin: 0 auto; color: #03733a; font-size: 2.4rem; text-align: center; cursor: pointer;}
  nav#mo ul.nav-menu { width: 100%; padding: 40px 20px; margin: 0; background-color: #03733a; box-sizing: border-box; list-style: none; display: none; position: absolute; top: 143px; left: 0; z-index: 99999;}
  nav#mo ul.nav-menu li { width: 100%; padding: 0; margin: 0;}
  nav#mo ul.nav-menu li a { width: 100%; padding: 15px 0; color: #fff; font-size: 1.4rem; font-weight: 600; text-align: center; text-decoration: none; display: block;}
  nav#mo ul.nav-menu li a:active { color: #1c2e68;}
  nav#mo ul.nav-menu li a.sel { color: #1c2e68;}
  nav#mo ul.nav-menu ul.nav-popup { width: 100%; padding: 40px 0; margin: 0; background-color: #03733a; list-style: none; display: none;}
  nav#mo ul.nav-menu ul.nav-popup li { width: 100%; padding: 0; margin: 0;}
  nav#mo ul.nav-menu ul.nav-popup li a { width: 100%; padding: 20px; box-sizing: border-box; color: #fff; font-size: 1.2rem; font-weight: 400; text-align: center; text-decoration: none; border-bottom: 1px rgba(255,255,255,0.5) dashed; display: block;}
  nav#mo ul.nav-menu ul.nav-popup li:first-child a { border-top: 1px rgba(255,255,255,0.5) dashed;}
  nav#mo ul.nav-menu ul.nav-popup li a:active { background-color: rgba(255,255,255,0.3);}
  nav#mo ul.nav-menu ul.nav-popup ul.nav-popup-2nd { width: 100%; padding: 20px 0; margin: 0; background-color: #07542d; list-style: none; display: none;}
  nav#mo ul.nav-menu ul.nav-popup ul.nav-popup-2nd li { width: 100%; padding: 0; margin: 0;}
  nav#mo ul.nav-menu ul.nav-popup ul.nav-popup-2nd li:first-child a { border-top: 0;}
  nav#mo ul.nav-menu ul.nav-popup ul.nav-popup-2nd li:last-child a { border-bottom: 0;}
  nav#mo ul.nav-menu ul.nav-popup ul.nav-popup-2nd li a { width: 100%; padding: 10px; color: #fff; font-size: 1rem; font-weight: 400; text-align: center; text-decoration: none; display: block; box-sizing: border-box;}
  nav#mo ul.nav-menu ul.nav-popup ul.nav-popup-2nd li a:active { background-color: rgba(255,255,255,0.2);}


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

  .hp-banner-box { clear: both; width: 100%; position: relative;}
  .hp-banner-box div { position: relative; z-index: 1;}
  .hp-banner-box div .hp-banner-img { width: 100%; overflow: hidden;}
  .hp-banner-box div .hp-banner-img img.hp-banner-pc { display: none;}
  .hp-banner-box div .hp-banner-img img.hp-banner-mo { width: 100%; height: auto;}
  .hp-banner-box img.hp-banner-prev { width: 25px; height: auto; position: absolute; top: 50%; transform: translateY(-50%); left: 20px; z-index: 10; cursor: pointer;}
  .hp-banner-box img.hp-banner-next { width: 25px; height: auto; position: absolute; top: 50%; transform: translateY(-50%); right: 20px; z-index: 10; cursor: pointer;}


  /************ section #hp-new-prods ************/

  section#hp-new-prods { clear: both; width: 100%; padding: 90px 20px; box-sizing: border-box;}

  .hp-new-prods-title { width: 100%; padding: 0 10px; color: #03733a; font-size: 3rem; font-weight: 700; line-height: 1em; border-left: 10px #03733a solid; box-sizing: border-box;}
  .hp-new-prods-title .veiw-more { display: none;}
  .veiw-more-mo { clear: both; width: 100%; margin: 20px 0 0 0; text-align: right;}
  .veiw-more-mo a { color: #03733a; font-size: 1.1rem; text-decoration: none;}
  .veiw-more-mo a:hover { border-bottom: 2px #03733a solid;}

  .hp-new-prods-list { clear: both; width: 100%; padding: 40px 40px 0 40px; box-sizing: border-box; position: relative;}
  .hp-new-prods-list div { position: relative; z-index: 1;}
  .hp-new-prods-list img.hp-new-prods-prev { width: 30px; height: auto; position: absolute; top: 50%; transform: translateY(-50%); left: 0; z-index: 2; cursor: pointer;}
  .hp-new-prods-list img.hp-new-prods-next { width: 30px; height: auto; position: absolute; top: 50%; transform: translateY(-50%); right: 0; z-index: 2; cursor: pointer;}
  .hp-new-prods-list div .new-prods-box { width: calc(100% / 4); padding: 0 1.5vw; box-sizing: border-box;}
  .hp-new-prods-list div .new-prods-box div.prod-box { width: 100%; border: 1px #000 solid; border-radius: 10px; box-sizing: border-box; overflow: hidden;}
  .hp-new-prods-list div .new-prods-box div.prod-box .photo { width: 100%;}
  .hp-new-prods-list div .new-prods-box div.prod-box .photo img { width: 100%; height: auto;}
  .hp-new-prods-list div .new-prods-box div.prod-box .title { width: 100%; padding: 15px 0; color: #000; font-size: 1.4rem; font-weight: 500; text-align: center;}
  .hp-new-prods-list div .new-prods-box div.prod-box .more { width: 100%; margin: 15px 0;}
  .hp-new-prods-list div .new-prods-box div.prod-box .more a { width: 140px; padding: 8px 0; margin: 0 auto; color: #fff; font-size: 1.1rem; text-align: center; text-decoration: none; border-radius: 20px; background-color: #03733a; display: block;}
  .hp-new-prods-list div .new-prods-box div.prod-box .more a:hover { background-color: #0c5b33;}


  /************ section #banner-links ************/

  section#banner-links { clear: both; width: 100%;}

  .hp-prod-add-link-box { width: 100%;}
  .hp-prod-add-link-box img { width: 100%; height: auto;}


  /************ section #hp-new-prods-link ************/

  section#hp-new-prods-link { clear: both; width: 100%; padding: 60px 40px; box-sizing: border-box;}

  img.hp-new-prod-link { display: none;}
  img.hp-new-prod-link-mo { width: 100%; height: auto;}


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

  .page-banner { clear: both; width: 100%; overflow: hidden;}
  .page-banner img { width: 180%; height: auto; margin: 0 0 0 -40%;}


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

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


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

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

  .page-about-title { width: 100%; padding: 0 10px; margin: 0 0 40px 0; color: #03733a; font-size: 3rem; font-weight: 700; line-height: 1em; border-left: 10px #03733a solid; box-sizing: border-box; position: relative;}
  .page-about-title span.prod-sort { width: 100%; font-size: 2rem; display: block;}

  .page-about-con { clear: both; width: 100%; margin: 0 auto; font-size: 1.1rem; line-height: 2em;}
  .page-about-con span.title { font-size: 1.4rem; font-weight: 500;}

  img.page-about-pic { width: 100%; height: auto; margin: 0 0 20px 0;}


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

  section#page-products { clear: both; width: 100%; padding: 0 20px 80px 20px; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}

  .page-prods-sort-nav { display: none;}

  .page-sort-prods-list { width: 90%; margin: 30px auto 0 auto;}
  .page-sort-prods-list .prod-box { width: 100%; padding: 10px; margin: 0 0 30px 0; border: 1px #444 solid; border-radius: 10px; box-sizing: border-box;}
  .page-sort-prods-list .prod-box .photo { width: 100%;}
  .page-sort-prods-list .prod-box .photo img { width: 100%; height: auto;}
  .page-sort-prods-list .prod-box .title { width: 100%; padding: 10px 0; color: #03733a; font-size: 1.2rem; font-weight: 500; text-align: center;}
  .page-sort-prods-list .prod-box .view-more { width: 100%;}
  .page-sort-prods-list .prod-box .view-more a { width: 120px; padding: 6px 0; margin: 10px auto; color: #fff; font-size: 1rem; text-align: center; text-decoration: none; border-radius: 20px; background-color: #03733a; display: block;}
  .page-sort-prods-list .prod-box .view-more a:hover { background-color: #0c5b33;}


  ul.page-num-list { clear: both; width: 100%; padding: 0; margin: 60px 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  ul.page-num-list li { padding: 0; margin: 0 5px 10px 5px;}
  ul.page-num-list li a { padding: 10px; color: #03733a; font-size: 0.9rem; text-decoration: none; border: 1px #03733a solid; background-color: #fff;}
  ul.page-num-list li a:hover { background-color: #eee;}
  ul.page-num-list li a.sel { color: #fff; background-color: #03733a;}


  /************ section #page-product-details ************/

  section#page-product-details { clear: both; width: 100%; padding: 0 0 80px 0;}

  .page-prod-details { clear: both; width: 100%; padding: 0 20px; box-sizing: border-box;}
  .page-prod-details .prod-photo { width: 100%; position: relative;}
  .page-prod-details .prod-photo img.page-prods-prev { width: 6vw; height: auto; position: absolute; top: 34vw; left: 0; z-index: 2; cursor: pointer;}
  .page-prod-details .prod-photo img.page-prods-next { width: 6vw; height: auto; position: absolute; top: 34vw; right: 0; z-index: 2; cursor: pointer;}
  .page-prod-details .prod-photo img.photo-big { width: 85%; height: auto; margin: 0 auto;}
  .page-prod-details .prod-photo img.photo-thumb { width: 90%; height: auto; margin: 0 auto; border: 1px #ccc solid; box-sizing: border-box;}

  .page-prod-details .prod-feature { width: 100%; margin: 60px 0 0 0;}
  .page-prod-details .prod-feature .prod-title { width: 100%; padding: 0 0 10px 0; color: #000; font-size: 3rem; font-weight: 600; line-height: 1.4em; border-bottom: 1px #000 solid;}
  .page-prod-details .prod-feature .prod-content { width: 100%; padding: 20px 0; color: #000; font-size: 1.2rem; line-height: 2em;}
  .page-prod-details .prod-feature .prod-content ul.dot { width: 100%; padding: 0 0 0 30px; margin: 0; list-style-type: disc; display: block; box-sizing: border-box;}
  .page-prod-details .prod-feature .prod-content ul.dot li { padding: 0; margin: 0;}

  .page-prod-info-full { clear: both; width: 100%;}
  .page-prod-info-full ul.prod-info-tab { width: 100%; padding: 10px 20px 5px 20px; margin: 80px 0 0 0; list-style: none; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; background-color: #1d2d68; box-sizing: border-box;}
  .page-prod-info-full ul.prod-info-tab li { width: calc(100% / 2 - 5px); padding: 0; margin: 0 5px 5px 0;}
  .page-prod-info-full ul.prod-info-tab li a { width: 100%; padding: 15px 0; color: #fff; font-size: 1.1rem; line-height: 1.2em; text-align: center; text-decoration: none; background-color: rgba(255,255,255,0.15); display: block;}
  .page-prod-info-full ul.prod-info-tab li:nth-child(odd) a { border-radius: 0 30px 0 30px;}
  .page-prod-info-full ul.prod-info-tab li:nth-child(even) a { border-radius: 30px 0 30px 0;}
  .page-prod-info-full ul.prod-info-tab li a:hover { background-color: rgba(255,255,255,0.3);}
  .page-prod-info-full ul.prod-info-tab li a.sel { background-color: #03733a;}

  .page-prod-info-full .prod-info-content { clear: both; width: 100%; padding: 60px 20px; box-sizing: border-box;}
  .page-prod-info-full .prod-info-content > div { display: none;}
  .page-prod-info-full .prod-info-content .specification-table { clear: both; width: 100%; font-size: 1.2rem;}
  .page-prod-info-full .prod-info-content .specification-table .row-full { width: 100%; padding: 10px; box-sizing: border-box;}
  .page-prod-info-full .prod-info-content .specification-table .row-full:nth-child(odd) { background-color: #eee;}
  .page-prod-info-full .prod-info-content .specification-table .row-full .caption { width: 100%; font-weight: 500; border-bottom: 1px #ccc solid;}
  .page-prod-info-full .prod-info-content .specification-table .row-full .column { width: 100%;}
  .page-prod-info-full .prod-info-content .specification-table .row-full .column .column-3x { width: 100%; align-items: center;}
  .page-prod-info-full .prod-info-content .pics-list { width: 100%; display: flex !important; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-prod-info-full .prod-info-content .pics-list .photo { width: calc(100% / 2 - 30px); margin: 0 15px 30px 15px; border: 1px #ccc solid; box-sizing: border-box;}
  .page-prod-info-full .prod-info-content .pics-list .photo img { width: 100%; height: auto;}
  .page-prod-info-full .prod-info-content .description-con { width: 100%; color: #000; font-size: 1.2rem; line-height: 2em;}
  .page-prod-info-full .prod-info-content .prod-video { width: 100%;}
  .page-prod-info-full .prod-info-content .prod-video .video-box { clear: both; width: 100%; margin: 0 auto 40px auto;}
  .page-prod-info-full .prod-info-content .download-bt { width: 100%;}
  .page-prod-info-full .prod-info-content .download-bt a { width: 200px; padding: 10px 0; color: #fff; font-size: 1.4rem; font-weight: 500; text-align: center; text-decoration: none; border-radius: 30px; background-color: #03733a; display: block;}
  .page-prod-info-full .prod-info-content .download-bt a:hover { background-color: #0c5b33;}
  .page-prod-info-full .prod-info-content .patents-list { width: 100%; display: flex !important; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-prod-info-full .prod-info-content .patents-list .list-box { width: calc(100% / 2 - 40px); margin: 0 20px 40px 20px;}
  .page-prod-info-full .prod-info-content .patents-list .list-box img { width: 100%; height: auto;}
  .page-prod-info-full .prod-info-content .patents-list .list-box .title { width: 100%; padding: 10px 0; color: #000; font-size: 1.4rem; text-align: center;}

  .page-prod-info-full .prod-info-content .intro-text { clear: both; width: 100%; color: #000; font-size: 1.2rem; line-height: 1.8em;}
  .page-prod-info-full .prod-info-content .intro-text a { color: #000; text-decoration: none; border-bottom: 1px #000 dashed;}


  /************ news ************/

  ul.page-news-list { clear: both; width: 100%; padding: 0; margin: 0; list-style: none; display: block;}
  ul.page-news-list li { width: 100%; padding: 0; margin: 0 0 30px 0;}
  ul.page-news-list li a { width: 100%; padding: 5px; color: #000; text-decoration: none; border: 1px #ccc solid; display: block; box-sizing: border-box;}
  ul.page-news-list li a .pic { width: 100%;}
  ul.page-news-list li a .pic img { width: 100%; height: auto;}
  ul.page-news-list li a .date-title { width: 100%; padding: 10px 0 0 0;}
  ul.page-news-list li a .date-title .date { width: 100%; color: #666; font-size: 0.8rem;}
  ul.page-news-list li a .date-title .title { width: 100%; padding: 10px 0; color: #000; font-size: 1.2rem; font-weight: 500; line-height: 1.2em;}
  ul.page-news-list li a .date-title .intro { width: 100%; color: #444; font-size: 0.8rem; line-height: 1.2em;}
  ul.page-news-list li a:active { border: 2px #ccc solid;}


  .page-news-con-title { clear: both; width: 100%; margin: 0 auto;}
  .page-news-con-title .date { width: 100%; color: #666; font-size: 0.8rem;}
  .page-news-con-title .title { width: 100%; padding: 10px 0; color: #000; font-size: 1.4rem; font-weight: 500; line-height: 1.4em; border-bottom: 1px #ccc solid;}

  .page-news-content { clear: both; width: 100%; color: #000; font-size: 1rem; line-height: 2em; margin: 40px auto;}
  .page-news-content img { max-width: 100%; height: auto;}
  .page-news-content a { color: #000; text-decoration: none; border-bottom: 1px #000 dashed;}

  .page-goback-bt { clear: both; width: 100%;}
  .page-goback-bt a { width: 120px; padding: 8px 0; margin: 0 auto; color: #fff; font-size: 0.9rem; text-align: center; text-decoration: none; border-radius: 12px; background-color: #03733a; display: block;}
  .page-goback-bt a:hover { background-color: #0c5b33;}


  /************ contact ************/

  .page-contact-con { clear: both; width: 100%;}
  .page-contact-con .contact-info { display: none;}
  .page-contact-con .contact-info-mo { width: 100%; padding: 0 40px 0 0; color: #000; font-size: 1.2rem; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; box-sizing: border-box;}
  .page-contact-con .contact-info-mo .title { width: 100%; padding: 0 0 30px 0; color: #03733a; font-size: 1.4rem; font-weight: 500;}
  .page-contact-con .contact-info-mo .icon { width: 40px; padding: 0 0 15px 0; color: #03733a;}
  .page-contact-con .contact-info-mo .column { width: calc(100% - 40px); padding: 0 0 15px 0;}
  .page-contact-con .contact-map { clear: both; width: 100%; margin: 30px 0 0 0;}
  .page-contact-con .contact-map img.pic { width: 100%; height: auto;}


  /************ site map ************/

  ul.sitemap-nav { clear: both; width: 80%; padding: 0; margin: 100px auto; list-style: none; display: block}
  ul.sitemap-nav li { padding: 0; margin: 0 0 40px 0; color: #666; font-size: 1.6rem; font-weight: 500;}
  ul.sitemap-nav li a { color: #000; text-decoration: none;}
  ul.sitemap-nav li a:active { border-bottom: 3px #000 solid;}
  ul.sitemap-nav li ul.nav-pop { padding: 0 0 0 20px; margin: 0; list-style: none; display: block;}
  ul.sitemap-nav li ul.nav-pop li { padding: 0; margin: 5px 0;}
  ul.sitemap-nav li ul.nav-pop li a { color: #000; font-size: 1.1rem; font-weight: 300;}
  ul.sitemap-nav li ul.nav-pop li a:active { border-bottom: 1px #000 solid;}


  /************ 404 error ************/

  .page-error-con { clear: both; width: 100%; padding: 60px 0; color: #03733a; text-align: center;}
  .page-error-con .error-title { width: 100%; margin: 0 0 20px 0; font-size: 4rem; font-weight: 600;}
  .page-error-con .error-text { display: none;}
  .page-error-con .error-text-mo { width: 100%; margin: 0 0 60px 0; font-size: 2rem;}
  .page-error-con a { width: 200px; padding: 5px 0; margin: 0 auto; color: #fff; font-size: 1.4rem; text-align: center; text-decoration: none; border-radius: 26px; background-color: #03733a; display: block;}


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

  footer { clear: both; width: 100%; background-color: #03733a;}

  .footer-col-full { clear: both; width: 100%; padding: 80px 20px; box-sizing: border-box;}
  .footer-col-full .col-lf { width: 100%;}
  .footer-col-full .col-lf img.footer-logo { width: 200px; height: auto; margin: 0 auto 20px auto;}
  .footer-col-full .col-lf .infor { clear: both; width: 100%; color: #fff; font-size: 1.1rem; font-weight: 300; line-height: 1.8em; text-align: center;}
  .footer-col-full .col-lf .infor span.title { font-size: 1.4rem; font-weight: 500;}
  
  .footer-col-full .col-rt { display: none;}
  
  .footer-col-full ul.nav-footer-mo { width: 100%; padding: 0; margin: 0 0 30px 0; list-style: none; display: flex; justify-content: center; flex-wrap: wrap;}
  .footer-col-full ul.nav-footer-mo li { padding: 0 10px 10px 10px; margin: 0;}
  .footer-col-full ul.nav-footer-mo li a { color: #fff; font-size: 1.2rem; text-decoration: none;}
  .footer-col-full ul.nav-footer-mo li a:hover { border-bottom: 2px #fff solid;}

  .footer-copyright { clear: both; width: 100%; padding: 10px 20px; color: #000; font-size: 0.8rem; text-align: center; background-color: #fff; box-sizing: border-box;}
  

}

/* 按鈕區塊樣式 */
    .zoom-controls {
    margin-bottom: 20px;
    }

    .zoom-controls button {
    font-size: 16px;
    height: 40px;
    min-width: 40px;
    padding: 0 10px;
    cursor: pointer;
    margin-right: 5px;    
    }

    button.zoom-btn { width: 40px; height: 40px; margin: 0 5px; color: #fff; font-size: 2rem; line-height: 1em; border: 0; border-radius: 100%; background-color: #07542d; display: flex; justify-content: center; align-items: center; float: left;}
    button.reset-btn { width: 100px; height: 40px; margin: 0 5px; color: #fff; font-size: 1.1rem; line-height: 1em; border: 0; border-radius: 30px; background-color: #07542d; display: flex; justify-content: center; align-items: center; float: left;}

    /* 百分比文字樣式 */
    #zoom-percentage {
    margin-left: 10px;
    font-size: 16px;
    font-weight: bold;
    font-family: monospace;
    display: inline-block;
    width: 50px;
    }

    /* 圖片外層容器：改回最單純的區塊，不使用 flex 置中 */
    #image-container {
      clear: both;
    width: 100%;  /* 可依需求自行調整 */
    height: 100vh; /* 可依需求自行調整 */
    margin-top: 20px;
    border: 0;
    overflow: hidden;
    position: relative;
    background-color: #f0f0f0;
    }

    /* 圖片基本樣式：強迫靠上、寬度滿版、高度自動 */
    #zoomable-image {
    width: 100%;
    height: auto;
    display: block;
    
    position: absolute;
    top: 0;   /* 關鍵：絕對定位在容器最頂端 */
    left: 0;  /* 關鍵：絕對定位在容器最左端 */
    
    /* 關鍵：把縮放的中心點固定在「頂部中央」，放大時才會順著往下擴展，而不是往上跑 */
    transform-origin: top center; 
    
    cursor: grab;
    touch-action: none; 
    }

    /* 拖曳中的樣式 */
    #zoomable-image.dragging {
    cursor: grabbing;
    }