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

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

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

html, body { 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;}

.color-org { color: #f29700;}


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


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

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

  header { width: 100%; height: 100px; display: flex; justify-content: flex-start; align-items: center; position: relative;}

  .logo-box { width: 332px; margin: 0 0 0 15px;}
  .logo-box img { width: 100%; height: auto;}

  #nav-icon { display: none;}

  nav#mo { display: none;}

  nav#pc { width: calc(100% - 657px);}
  nav#pc ul.menu { padding: 0; margin: 10px 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center;}
  nav#pc ul.menu li { padding: 0; margin: 0; font-size: 1.5em; font-weight: 500;}
  nav#pc ul.menu li a { padding: 15px; color: #414141; text-decoration: none; display: block;}

  .language-box-mo { display: none;}

  .language-box { width: 120px; display: flex; justify-content: center; position: absolute; top: 5px; right: 330px;}
  .language-box .box { width: 26px; height: 26px; margin: 0 3px;}
  .language-box .box a { width: 100%; height: 100%; color: #009144; line-height: 1em; border: 1px #009144 solid; border-radius: 6px; display: flex; justify-content: center; align-items: center; text-decoration: none;}
  .language-box .box a:hover { background-color: #eee;}
  .language-box .box a.sel { color: #fff; background-color: #009144;}

  .phone-box { width: 310px; height: 100%; color: #fff; font-size: 1.4em; font-family: Arial; background-color: #009144; display: flex; justify-content: center; align-items: center;}


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

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

  img.banner { width: 100%; height: auto;}
  img.banner-slogan { width: 60vw; height: auto; position: absolute; top: 26vw; left: 0;}


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

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

  .page-title { clear: both; width: 100%;}
  .page-title .title { width: 320px; margin: 0 auto; color: #009144; font-size: 2.4em; font-weight: 600; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  .page-title .title img { width: 73px; height: auto;}

  .hp-serv-items { clear: both; width: 100%; margin: 80px 0 0 0; display: flex; justify-content: center; align-items: stretch;}
  .hp-serv-items .items-box { width: 16vw; margin: 0 1vw;}
  .hp-serv-items .items-box a { color: #414141; text-decoration: none;}
  .hp-serv-items .items-box .pic { width: 16vw; height: 16vw; margin: 0 0 25px 0; border-radius: 100%; overflow: hidden;}
  .hp-serv-items .items-box .pic img.pic-1 {width: auto; height: 100%; margin: 0 0 0 -3.5vw;}
  .hp-serv-items .items-box .pic img.pic-2 {width: 100%; height: auto; margin: -1vw 0 0 0;}
  .hp-serv-items .items-box .pic img.pic-3 {width: 100%; height: auto; margin: -1vw 0 0 0;}
  .hp-serv-items .items-box .pic img.pic-4 {width: auto; height: 100%; margin: 0 0 0 -4vw;}
  .hp-serv-items .items-box .pic img.pic-5 {width: auto; height: 100%; margin: 0 0 0 -5vw;}
  .hp-serv-items .items-box .title { width: 100%; font-size: 1.4vw; font-weight: 500; text-align: center;}


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

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

  img.hp-about-pic-1 { width: 60%; height: auto; padding: 0 0 0 10vw; box-sizing: border-box; float: left;}
  img.hp-about-pic-2 { clear: both; width: 50%; height: auto; padding: 0 6vw; margin: -5vw 0 0 0; box-sizing: border-box; float: left;}
  img.hp-about-pic-3 { width: 50%; height: auto; padding: 0 6vw; margin: -1vw 0 0 0; box-sizing: border-box; float: left;}

  .page-title .title-lt { width: 320px; color: #009144; font-size: 2.4em; font-weight: 600; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  .page-title .title-lt img { width: 73px; height: auto;}

  .hp-about-content { width: 40%; padding: 0 5vw 0 2vw; box-sizing: border-box; float: right; position: relative;}
  .hp-about-content .text { width: 100%; margin: 40px 0 0 0; font-size: 1.2em; line-height: 1.6em;}
  .hp-about-content img.hp-more-bt { position: absolute; bottom: -5vw; left: 2vw;}


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

  section#hp-products { clear: both; width: 100%; padding: 80px calc(50% - 650px); box-sizing: border-box;}

  .hp-prod-list { clear: both; width: 100%; margin: 80px 0 0 0; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .hp-prod-list .list-box { width: calc(100% / 4 - 30px); margin: 0 15px 30px 15px; border: 1px #ccc solid; box-sizing: border-box; position: relative;}
  .hp-prod-list .list-box a { color: #414141; text-decoration: none; display: block;}
  .hp-prod-list .list-box img { width: 100%; height: auto;}
  .hp-prod-list .list-box .title-box { width: 100%; padding: 10px 5px; font-size: 1.2em; font-weight: 500; text-align: center; box-sizing: border-box; background-color: rgba(0,164,219,0.5); position: absolute; bottom: 0; left: 0;}

  img.hp-more-bt2 { margin: 60px auto 0 auto;}


  /************ section#hp-value ************/

  section#hp-value { clear: both; width: 100%; padding: 12vw 0 8vw 0; background-image: url("../images/hp_value_bg.jpg"); background-repeat: no-repeat; background-size: 100% auto; background-position: center top;}

  img.hp-value-text { width: 70vw; height: auto; margin: 0 auto;}


  /************ section#hp-process ************/

  section#hp-process { clear: both; width: 100%; padding: 80px calc(50% - 650px); box-sizing: border-box;}

  .hp-process-list-full { clear: both; width: 100%; margin: 80px 0 0 0; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  .hp-process-list-full .hp-process-list { width: 240px; padding: 15px; margin: 0 0 30px 0; background-color: #eee; box-sizing: border-box;}
  .hp-process-list-full .hp-process-list .icon-box { width: 140px; height: 140px; margin: 0 auto 30px auto; color: #fff; font-size: 4em; border-radius: 100%; background-color: #009144; display: flex; justify-content: center; align-items: center;}
  .hp-process-list-full .hp-process-list .text-box { clear: both; width: 100%;}
  .hp-process-list-full .hp-process-list .text-box .title { width: 100%; padding: 0 0 20px 0; font-size: 1.2em; font-weight: 500; line-height: 1.2em; border-bottom: 1px #ccc solid;}
  .hp-process-list-full .hp-process-list .text-box .text { width: 100%; padding: 20px 0 0 0; font-size: 1em; line-height: 1.6em;}

  .hp-process-list-full .hp-process-arrow { clear: both; width: 80px; padding: 100px 0 0 0; color: #f29700; font-size: 3em; text-align: center;}
  .hp-process-list-full .hp-process-arrow-mo { display: none;}


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

  .page-banner-box { clear: both; width: 100%; height: 22vw; overflow: hidden;}
  .page-banner-box img { width: 100%; height: auto;}


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

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

  .page-about-text { width: 50%; padding: 0 50px 0 0; margin: 80px 0 0 0; font-size: 1.1em; line-height: 1.8em; box-sizing: border-box; float: left;}

  .page-about-licenses { width: 50%; margin: 80px 0 0 0; float: left; display: flex; justify-content: flex-start;}
  .page-about-licenses img.license-1 { width: calc(50% - 15px); margin: 0 15px 0 0;}
  .page-about-licenses img.license-2 { width: calc(50% - 15px); margin: 0 0 0 15px;}

  .page-about-column-lf { clear: both; width: 50%; margin: 60px 0; float: left;}
  .page-about-column-lf img.pic-1 { width: 100%; height: auto;}
  .page-about-column-lf img.pic-2 { width: 70%; height: auto; margin: -220px 0 0 300px;}

  .page-about-column-rt { width: 50%; margin: 60px 0; float: left;}
  .page-about-column-rt img { clear: both; width: 60%; height: auto; margin: 0 0 20px 0; float: right;}

  .page-about-text2 { width: 40%; margin: 80px 0 0 0; font-size: 1.1em; line-height: 1.8em; float: left;}

  .page-quality-pics { width: 50%; margin: 80px 0 0 0; float: right; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  .page-quality-pics .qc-pic { width: calc(50% - 20px); height: 160px; margin: 0 10px 20px 10px; overflow: hidden;}
  .page-quality-pics .qc-pic img { width: 100%; height: auto;}


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

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

  .page-serv-items { clear: both; width: 100%; margin: 80px 0 0 0; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-serv-items .items-box { width: 25vw; margin: 0 1.5vw 3vw 1.5vw;}
  .page-serv-items .items-box a { color: #414141; text-decoration: none;}
  .page-serv-items .items-box .pic { width: 18vw; height: 18vw; margin: 0 auto 25px auto; border-radius: 100%; overflow: hidden;}
  .page-serv-items .items-box .pic img.pic-1 {width: auto; height: 100%; margin: 0 0 0 -4vw;}
  .page-serv-items .items-box .pic img.pic-2 {width: 100%; height: auto; margin: -1vw 0 0 0;}
  .page-serv-items .items-box .pic img.pic-3 {width: 100%; height: auto; margin: -1vw 0 0 0;}
  .page-serv-items .items-box .pic img.pic-4 {width: auto; height: 100%; margin: 0 0 0 -5vw;}
  .page-serv-items .items-box .pic img.pic-5 {width: auto; height: 100%; margin: 0 0 0 -4.5vw;}
  .page-serv-items .items-box .title { width: 100%; font-size: 1.4vw; font-weight: 500; text-align: center;}
  .page-serv-items .items-box .intro { width: 100%; padding: 15px 0 0 0; margin: 10px 0 0 0; border-top: 1px #ccc solid; font-size: 1vw; line-height: 1.4vw;}
  .page-serv-items .items-box .photo { width: 100%; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  .page-serv-items .items-box .photo a { width: calc(50% - 20px); height: 7vw; margin: 20px 10px; border: 0; overflow: hidden; display: block;}
  .page-serv-items .items-box .photo a img { width: 100%; height: auto;}


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

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


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

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

  .page-title2 { clear: both; width: 100%;}
  .page-title2 .title { width: 200px; margin: 0 auto; color: #009144; font-size: 2.4em; font-weight: 600; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  .page-title2 .title img { width: 73px; height: auto;}

  .page-contact-infor { clear: both; width: 100%; margin: 80px 0 0 0; display: flex; justify-content: flex-start; align-items: center;}
  .page-contact-infor .map-box { width: 50%; border: 6px #ccc solid; box-sizing: border-box;}
  .page-contact-infor .map-box iframe { width: 100%; height: 300px;}
  .page-contact-infor .infor-box { width: 50%; padding: 0 0 0 80px; font-size: 1.1em; line-height: 2.4em; box-sizing: border-box;}


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

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

  .page-products-sort { clear: both; width: 100%; margin: 80px 0 0 0; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-products-sort .prod-sort-box { width: calc(100% / 3); margin: 0 0 50px 0;}
  .page-products-sort .prod-sort-box a { color: #414141; text-decoration: none;}
  .page-products-sort .prod-sort-box .pic { width: 300px; height: 300px; margin: 0 auto; border: 4px #ccc solid; border-radius: 100%; overflow: hidden; box-sizing: border-box;}
  .page-products-sort .prod-sort-box .pic img { width: auto; height: 100%; display: flex; justify-content: center;}
  .page-products-sort .prod-sort-box .sort { width: 100%; padding: 20px 0 0 0; font-size: 1.4em; text-align: center;}

  .page-products-details { clear: both; width: 100%; margin: 80px 0 0 0;}
  .page-products-details .title { width: 100%; margin: 0 0 60px 0; color: #009144; font-size: 1.8em; font-weight: 600; text-align: center;}
  .page-products-details .pic-list { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-products-details .pic-list ul#pg-prod-big { width: 50%; padding: 0; margin: 0; list-style: none; display: block;}
  .page-products-details .pic-list ul#pg-prod-big li { width: 100%; padding: 0; margin: 0; border: 1px #ccc solid; display: none; box-sizing: border-box;}
  .page-products-details .pic-list ul#pg-prod-big li img { width: 100%; height: auto;}
  .page-products-details .pic-list ul#pg-prod-thumbnail { width: 50%; padding: 0 0 0 40px; margin: 0; list-style: none; display: flex; justify-content: flex-start; flex-wrap: wrap; box-sizing: border-box;}
  .page-products-details .pic-list ul#pg-prod-thumbnail li { width: calc(100% / 5 - 20px); margin: 10px; border: 1px #ccc solid; box-sizing: border-box;}
  .page-products-details .pic-list ul#pg-prod-thumbnail li img { width: 100%; height: auto; cursor: pointer;}
  .page-products-details .intro { clear: both; width: 100%; padding: 40px 0 0 0; margin: 40px 0 0 0; font-size: 1.1em; line-height: 1.8em; border-top: 3px #ccc solid;}

  .page-prod-table { clear: both; width: 100%;}
  .page-prod-table .caption-full { width: 100%; background-color: #eee; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-prod-table .caption-full .caption { width: calc(100% / 4); padding: 10px; font-weight: 600; text-align: center; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-prod-table .caption-full .caption:last-child { border-right: 0;}
  .page-prod-table .column-full { width: 100%; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-prod-table .column-full .column { width: calc(100% / 4); padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
  .page-prod-table .column-full .column:last-child { border-right: 0;}
  .page-prod-table .column-full .column img { width: 160px; height: auto;}

  .page-goback-bt { clear: both; width: 200px; margin: 60px auto 0 auto;}
  .page-goback-bt a { width: 100%; padding: 8px 0; color: #fff; font-size: 1.1em; text-align: center; text-decoration: none; border-radius: 10px; background-color: #009144; display: block;}
  .page-goback-bt a:hover { background-color: #0ea856;}

  .page-prod3-table { clear: both; width: 100%;}
  .page-prod3-table .caption-full { width: 100%; background-color: #eee; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-prod3-table .caption-full .caption { width: calc(100% / 6); padding: 10px; font-weight: 600; line-height: 1.4em; text-align: center; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-prod3-table .caption-full .caption:last-child { border-right: 0;}
  .page-prod3-table .column-full { width: 100%; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-prod3-table .column-full .column { width: calc(100% / 6); padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  .page-prod3-table .column-full .column:last-child { border-right: 0;}

  .page-prod9-table { clear: both; width: 100%;}
  .page-prod9-table .caption-full { width: 100%; background-color: #eee; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-prod9-table .caption-full .caption { width: calc(100% / 7); padding: 10px; font-weight: 600; line-height: 1.4em; text-align: center; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-prod9-table .caption-full .caption:last-child { border-right: 0;}
  .page-prod9-table .column-full { width: 100%; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-prod9-table .column-full .column { width: calc(100% / 7); padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  .page-prod9-table .column-full .column:last-child { border-right: 0;}


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

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

  ul.page-sitemap-list { clear: both; width: 100%; padding: 0; margin: 80px 0 0 0; list-style: none; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
  ul.page-sitemap-list li { padding: 0; margin: 20px;}
  ul.page-sitemap-list li a { color: #414141; font-size: 1.4em; font-weight: 600; text-decoration: none;}
  ul.page-sitemap-list li a:hover { border-bottom: 1px #414141 solid;}


  /************ section#page-error ************/

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

  .error-title { width: 100%; margin: 0 0 80px 0; color: #009144; font-size: 3em; font-weight: 600; text-align: center;}

  .error-text { width: 100%; margin: 0 0 80px 0; color: #009144; font-size: 2em; text-align: center;}
  

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

  footer { clear: both; width: 100%; padding: 80px calc(50% - 650px); color: #fff; background-color: #505050; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start;}

  .footer-colum-lf { width: 50%; font-size: 1.1em; line-height: 2em;}
  .footer-colum-lf span.title { font-size: 1.4rem; font-weight: 500;}

  .footer-colum-rt-mo { display: none;}

  .footer-colum-rt { width: 50%; font-size: 1.2em; line-height: 2em; text-align: right;}
  .footer-colum-rt a { color: #fff; text-decoration: none;}
  .footer-colum-rt a:hover { border-bottom: 1px #fff solid;}

  .footer-copyright { clear: both; width: 100%; padding: 20px 0; color: #414141; font-size: 1em; line-height: 1.8em; text-align: center; background-color: #fff;}
  .footer-copyright a { color: #414141; text-decoration: none;}
  .footer-copyright a:hover { border-bottom: 1px #414141 solid;}


}

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

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

  header { width: 100%; height: 100px; display: flex; justify-content: flex-start; align-items: center; position: relative;}

  .logo-box { width: 210px; margin: 0 0 0 15px;}
  .logo-box img { width: 100%; height: auto;}

  #nav-icon { display: none;}

  nav#mo { display: none;}

  nav#pc { width: calc(100% - 435px);}
  nav#pc ul.menu { padding: 0; margin: 10px 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center;}
  nav#pc ul.menu li { padding: 0; margin: 0; font-size: 1.2em; font-weight: 500;}
  nav#pc ul.menu li a { padding: 15px; color: #414141; text-decoration: none; display: block;}

  .language-box-mo { display: none;}

  .language-box { width: 120px; display: flex; justify-content: center; position: absolute; top: 5px; right: 250px;}
  .language-box .box { width: 26px; height: 26px; margin: 0 3px;}
  .language-box .box a { width: 100%; height: 100%; color: #009144; line-height: 1em; border: 1px #009144 solid; border-radius: 6px; display: flex; justify-content: center; align-items: center; text-decoration: none;}
  .language-box .box a:hover { background-color: #eee;}
  .language-box .box a.sel { color: #fff; background-color: #009144;}

  .phone-box { width: 210px; height: 100%; color: #fff; font-size: 1.1em; font-family: Arial; background-color: #009144; display: flex; justify-content: center; align-items: center;}


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

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

  img.banner { width: 100%; height: auto;}
  img.banner-slogan { width: 60vw; height: auto; position: absolute; top: 26vw; left: 0;}


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

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

  .page-title { clear: both; width: 100%;}
  .page-title .title { width: 320px; margin: 0 auto; color: #009144; font-size: 2.4em; font-weight: 600; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  .page-title .title img { width: 73px; height: auto;}

  .hp-serv-items { clear: both; width: 100%; margin: 80px 0 0 0; display: flex; justify-content: center; align-items: stretch;}
  .hp-serv-items .items-box { width: 16vw; margin: 0 1vw;}
  .hp-serv-items .items-box a { color: #414141; text-decoration: none;}
  .hp-serv-items .items-box .pic { width: 16vw; height: 16vw; margin: 0 0 25px 0; border-radius: 100%; overflow: hidden;}
  .hp-serv-items .items-box .pic img.pic-1 {width: auto; height: 100%; margin: 0 0 0 -3.5vw;}
  .hp-serv-items .items-box .pic img.pic-2 {width: 100%; height: auto; margin: -1vw 0 0 0;}
  .hp-serv-items .items-box .pic img.pic-3 {width: 100%; height: auto; margin: -1vw 0 0 0;}
  .hp-serv-items .items-box .pic img.pic-4 {width: auto; height: 100%; margin: 0 0 0 -4vw;}
  .hp-serv-items .items-box .pic img.pic-5 {width: auto; height: 100%; margin: 0 0 0 -5vw;}
  .hp-serv-items .items-box .title { width: 100%; font-size: 1.4vw; font-weight: 500; text-align: center;}


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

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

  img.hp-about-pic-1 { width: 55%; height: auto; padding: 0 0 0 8vw; box-sizing: border-box; float: left;}
  img.hp-about-pic-2 { clear: both; width: 30%; height: auto; padding: 0 2vw; margin: -7vw 0 0 0; box-sizing: border-box; float: left;}
  img.hp-about-pic-3 { width: 25%; height: auto; padding: 0 2vw; margin: -7vw 0 0 0; box-sizing: border-box; float: left;}

  .page-title .title-lt { width: 320px; color: #009144; font-size: 2.4em; font-weight: 600; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  .page-title .title-lt img { width: 73px; height: auto;}

  .hp-about-content { width: 45%; padding: 0 3vw 0 2vw; box-sizing: border-box; float: right; position: relative;}
  .hp-about-content .text { width: 100%; margin: 40px 0 0 0; font-size: 1.1em; line-height: 1.6em;}
  .hp-about-content img.hp-more-bt { position: absolute; bottom: -5vw; left: 2vw;}


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

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

  .hp-prod-list { clear: both; width: 100%; margin: 80px 0 0 0; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .hp-prod-list .list-box { width: calc(100% / 4 - 30px); margin: 0 15px 30px 15px; border: 1px #ccc solid; box-sizing: border-box; position: relative;}
  .hp-prod-list .list-box a { color: #414141; text-decoration: none; display: block;}
  .hp-prod-list .list-box img { width: 100%; height: auto;}
  .hp-prod-list .list-box .title-box { width: 100%; padding: 10px 5px; font-size: 1.1em; font-weight: 500; text-align: center; box-sizing: border-box; background-color: rgba(0,164,219,0.5); position: absolute; bottom: 0; left: 0;}

  img.hp-more-bt2 { margin: 60px auto 0 auto;}


  /************ section#hp-value ************/

  section#hp-value { clear: both; width: 100%; padding: 14vw 0 10vw 0; background-image: url("../images/hp_value_bg.jpg"); background-repeat: no-repeat; background-size: 140% auto; background-position: center top;}

  img.hp-value-text { width: 70vw; height: auto; margin: 0 auto;}


  /************ section#hp-process ************/

  section#hp-process { clear: both; width: 100%; padding: 80px calc(50% - 480px); box-sizing: border-box;}

  .hp-process-list-full { clear: both; width: 100%; margin: 80px 0 0 0; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  .hp-process-list-full .hp-process-list { width: 240px; padding: 15px; margin: 0 0 30px 0; background-color: #eee; box-sizing: border-box;}
  .hp-process-list-full .hp-process-list .icon-box { width: 140px; height: 140px; margin: 0 auto 30px auto; color: #fff; font-size: 4em; border-radius: 100%; background-color: #009144; display: flex; justify-content: center; align-items: center;}
  .hp-process-list-full .hp-process-list .text-box { clear: both; width: 100%;}
  .hp-process-list-full .hp-process-list .text-box .title { width: 100%; padding: 0 0 20px 0; font-size: 1.2em; font-weight: 500; line-height: 1.2em; border-bottom: 1px #ccc solid;}
  .hp-process-list-full .hp-process-list .text-box .text { width: 100%; padding: 20px 0 0 0; font-size: 1em; line-height: 1.6em;}

  .hp-process-list-full .hp-process-arrow { clear: both; width: 80px; padding: 100px 0 0 0; color: #f29700; font-size: 3em; text-align: center;}
  .hp-process-list-full .hp-process-arrow-mo { display: none;}


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

  .page-banner-box { clear: both; width: 100%; height: 28vw; overflow: hidden;}
  .page-banner-box img { width: 120%; height: auto; margin: 0 0 0 -10%;}


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

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

  .page-about-text { width: 50%; padding: 0 50px 0 0; margin: 80px 0 0 0; font-size: 1.1em; line-height: 1.8em; box-sizing: border-box; float: left;}

  .page-about-licenses { width: 50%; margin: 80px 0 0 0; float: left; display: flex; justify-content: flex-start;}
  .page-about-licenses img.license-1 { width: calc(50% - 15px); margin: 0 15px 0 0;}
  .page-about-licenses img.license-2 { width: calc(50% - 15px); margin: 0 0 0 15px;}

  .page-about-column-lf { clear: both; width: 50%; margin: 60px 0; float: left;}
  .page-about-column-lf img.pic-1 { width: 100%; height: auto;}
  .page-about-column-lf img.pic-2 { width: 70%; height: auto; margin: -15vw 0 0 20vw;}

  .page-about-column-rt { width: 50%; margin: 60px 0; float: left;}
  .page-about-column-rt img { clear: both; width: 60%; height: auto; margin: 0 0 20px 0; float: right;}

  .page-about-text2 { width: 40%; margin: 80px 0 0 0; font-size: 1.1em; line-height: 1.8em; float: left;}

  .page-quality-pics { width: 50%; margin: 80px 0 0 0; float: right; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  .page-quality-pics .qc-pic { width: calc(50% - 20px); height: 14vw; margin: 0 10px 20px 10px; overflow: hidden;}
  .page-quality-pics .qc-pic img { width: 100%; height: auto;}


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

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

  .page-serv-items { clear: both; width: 100%; margin: 80px 0 0 0; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-serv-items .items-box { width: 38vw; margin: 0 2vw 4vw 2vw;}
  .page-serv-items .items-box a { color: #414141; text-decoration: none;}
  .page-serv-items .items-box .pic { width: 30vw; height: 30vw; margin: 0 auto 25px auto; border-radius: 100%; overflow: hidden;}
  .page-serv-items .items-box .pic img.pic-1 {width: auto; height: 100%; margin: 0 0 0 -5vw;}
  .page-serv-items .items-box .pic img.pic-2 {width: 100%; height: auto; margin: -1vw 0 0 0;}
  .page-serv-items .items-box .pic img.pic-3 {width: 100%; height: auto; margin: -1vw 0 0 0;}
  .page-serv-items .items-box .pic img.pic-4 {width: auto; height: 100%; margin: 0 0 0 -8vw;}
  .page-serv-items .items-box .pic img.pic-5 {width: auto; height: 100%; margin: 0 0 0 -7vw;}
  .page-serv-items .items-box .title { width: 100%; font-size: 2.2vw; font-weight: 500; text-align: center;}
  .page-serv-items .items-box .intro { width: 100%; padding: 15px 0 0 0; margin: 10px 0 0 0; border-top: 1px #ccc solid; font-size: 1.6vw; line-height: 2.2vw;}
  .page-serv-items .items-box .photo { width: 100%; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  .page-serv-items .items-box .photo a { width: calc(50% - 20px); height: 11vw; margin: 20px 10px; border: 0; overflow: hidden; display: block;}
  .page-serv-items .items-box .photo a img { width: 100%; height: auto;}


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

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


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

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

  .page-title2 { clear: both; width: 100%;}
  .page-title2 .title { width: 200px; margin: 0 auto; color: #009144; font-size: 2.4em; font-weight: 600; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  .page-title2 .title img { width: 73px; height: auto;}

  .page-contact-infor { clear: both; width: 100%; margin: 80px 0 0 0; display: flex; justify-content: flex-start; align-items: center;}
  .page-contact-infor .map-box { width: 50%; border: 6px #ccc solid; box-sizing: border-box;}
  .page-contact-infor .map-box iframe { width: 100%; height: 300px;}
  .page-contact-infor .infor-box { width: 50%; padding: 0 0 0 80px; font-size: 1.1em; line-height: 2.4em; box-sizing: border-box;}


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

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

  .page-products-sort { clear: both; width: 100%; margin: 80px 0 0 0; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-products-sort .prod-sort-box { width: calc(100% / 3); margin: 0 0 50px 0;}
  .page-products-sort .prod-sort-box a { color: #414141; text-decoration: none;}
  .page-products-sort .prod-sort-box .pic { width: 260px; height: 260px; margin: 0 auto; border: 4px #ccc solid; border-radius: 100%; overflow: hidden; box-sizing: border-box;}
  .page-products-sort .prod-sort-box .pic img { width: auto; height: 100%; display: flex; justify-content: center;}
  .page-products-sort .prod-sort-box .sort { width: 100%; padding: 20px 0 0 0; font-size: 1.4em; text-align: center;}

  .page-products-details { clear: both; width: 100%; margin: 80px 0 0 0;}
  .page-products-details .title { width: 100%; margin: 0 0 60px 0; color: #009144; font-size: 1.8em; font-weight: 600; text-align: center;}
  .page-products-details .pic-list { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-products-details .pic-list ul#pg-prod-big { width: 50%; padding: 0; margin: 0; list-style: none; display: block;}
  .page-products-details .pic-list ul#pg-prod-big li { width: 100%; padding: 0; margin: 0; border: 1px #ccc solid; display: none; box-sizing: border-box;}
  .page-products-details .pic-list ul#pg-prod-big li img { width: 100%; height: auto;}
  .page-products-details .pic-list ul#pg-prod-thumbnail { width: 50%; padding: 0 0 0 40px; margin: 0; list-style: none; display: flex; justify-content: flex-start; flex-wrap: wrap; box-sizing: border-box;}
  .page-products-details .pic-list ul#pg-prod-thumbnail li { width: calc(100% / 4 - 20px); margin: 10px; border: 1px #ccc solid; box-sizing: border-box;}
  .page-products-details .pic-list ul#pg-prod-thumbnail li img { width: 100%; height: auto; cursor: pointer;}
  .page-products-details .intro { clear: both; width: 100%; padding: 40px 0 0 0; margin: 40px 0 0 0; font-size: 1.1em; line-height: 1.8em; border-top: 3px #ccc solid;}

  .page-prod-table { clear: both; width: 100%;}
  .page-prod-table .caption-full { width: 100%; background-color: #eee; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-prod-table .caption-full .caption { width: calc(100% / 4); padding: 10px; font-weight: 600; text-align: center; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-prod-table .caption-full .caption:last-child { border-right: 0;}
  .page-prod-table .column-full { width: 100%; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-prod-table .column-full .column { width: calc(100% / 4); padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
  .page-prod-table .column-full .column:last-child { border-right: 0;}
  .page-prod-table .column-full .column img { width: 160px; height: auto;}

  .page-goback-bt { clear: both; width: 200px; margin: 60px auto 0 auto;}
  .page-goback-bt a { width: 100%; padding: 8px 0; color: #fff; font-size: 1.1em; text-align: center; text-decoration: none; border-radius: 10px; background-color: #009144; display: block;}
  .page-goback-bt a:hover { background-color: #0ea856;}

  .page-prod3-table { clear: both; width: 100%;}
  .page-prod3-table .caption-full { width: 100%; background-color: #eee; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-prod3-table .caption-full .caption { width: calc(100% / 6); padding: 10px; font-weight: 600; line-height: 1.4em; text-align: center; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-prod3-table .caption-full .caption:last-child { border-right: 0;}
  .page-prod3-table .column-full { width: 100%; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-prod3-table .column-full .column { width: calc(100% / 6); padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  .page-prod3-table .column-full .column:last-child { border-right: 0;}

  .page-prod9-table { clear: both; width: 100%;}
  .page-prod9-table .caption-full { width: 100%; background-color: #eee; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-prod9-table .caption-full .caption { width: calc(100% / 7); padding: 10px; font-weight: 600; line-height: 1.4em; text-align: center; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-prod9-table .caption-full .caption:last-child { border-right: 0;}
  .page-prod9-table .column-full { width: 100%; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-prod9-table .column-full .column { width: calc(100% / 7); padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  .page-prod9-table .column-full .column:last-child { border-right: 0;}


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

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

  ul.page-sitemap-list { clear: both; width: 100%; padding: 0; margin: 80px 0 0 0; list-style: none; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
  ul.page-sitemap-list li { padding: 0; margin: 20px;}
  ul.page-sitemap-list li a { color: #414141; font-size: 1.4em; font-weight: 600; text-decoration: none;}
  ul.page-sitemap-list li a:hover { border-bottom: 1px #414141 solid;}


  /************ section#page-error ************/

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

  .error-title { width: 100%; margin: 0 0 80px 0; color: #009144; font-size: 3em; font-weight: 600; text-align: center;}

  .error-text { width: 100%; margin: 0 0 80px 0; color: #009144; font-size: 2em; text-align: center;}


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

  footer { clear: both; width: 100%; padding: 80px 40px; color: #fff; background-color: #505050; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start;}

  .footer-colum-lf { width: 50%; font-size: 1.1em; line-height: 2em;}
  .footer-colum-lf span.title { font-size: 1.4rem; font-weight: 500;}

  .footer-colum-rt-mo { display: none;}

  .footer-colum-rt { width: 50%; font-size: 1.2em; line-height: 2em; text-align: right;}
  .footer-colum-rt a { color: #fff; text-decoration: none;}
  .footer-colum-rt a:hover { border-bottom: 1px #fff solid;}

  .footer-copyright { clear: both; width: 100%; padding: 20px 0; color: #414141; font-size: 1em; line-height: 1.8em; text-align: center; background-color: #fff;}
  .footer-copyright a { color: #414141; text-decoration: none;}
  .footer-copyright a:hover { border-bottom: 1px #414141 solid;}


}

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

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

  header { width: 100%; height: 100px; display: flex; justify-content: flex-start; align-items: center; position: relative;}

  .logo-box { width: 280px; margin: 0 0 0 15px;}
  .logo-box img { width: 100%; height: auto;}

  #nav-icon { width: 60px; margin: 0 auto; font-size: 3em; text-align: center;}

  nav#pc { display: none;}  

  nav#mo { width: 100%; padding: 60px; box-sizing: border-box; background-color: #f29700; position: absolute; top: 100px; left: 0; z-index: 999; display: none;}
  nav#mo ul.menu { width: 100%; padding: 0; margin: 10px 0 0 0; list-style: none; display: block;}
  nav#mo ul.menu li { width: 100%; padding: 0; margin: 0; font-size: 1.3em; font-weight: 500;}
  nav#mo ul.menu li a { width: 100%; padding: 15px; box-sizing: border-box; color: #414141; text-align: center; text-decoration: none; display: block;}

  .language-box { display: none;}

  .language-box-mo { width: 100%; margin: 30px 0 0 0; display: flex; justify-content: center; align-items: center;}
  .language-box-mo .box { width: 26px; height: 26px; margin: 0 5px;}
  .language-box-mo .box a { width: 100%; height: 100%; color: #009144; line-height: 1em; border: 1px #009144 solid; background-color: #fff; border-radius: 6px; display: flex; justify-content: center; align-items: center; text-decoration: none;}
  .language-box-mo .box a:hover { background-color: #eee;}
  .language-box-mo .box a.sel { color: #fff; background-color: #009144;}

  .phone-box { width: 240px; height: 100%; color: #fff; font-size: 1.2em; font-family: Arial; background-color: #009144; display: flex; justify-content: center; align-items: center;}


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

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

  img.banner { width: 140%; height: auto; margin: 0 0 0 -20%;}
  img.banner-slogan { width: 70vw; height: auto; position: absolute; top: 30vw; left: 0;}


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

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

  .page-title { clear: both; width: 100%;}
  .page-title .title { width: 320px; margin: 0 auto; color: #009144; font-size: 2.4em; font-weight: 600; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  .page-title .title img { width: 73px; height: auto;}

  .hp-serv-items { clear: both; width: 100%; margin: 80px 0 0 0; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .hp-serv-items .items-box { width: 28vw; margin: 0 1.5vw 5vw 1.5vw;}
  .hp-serv-items .items-box a { color: #414141; text-decoration: none;}
  .hp-serv-items .items-box .pic { width: 28vw; height: 28vw; margin: 0 0 25px 0; border-radius: 100%; overflow: hidden;}
  .hp-serv-items .items-box .pic img.pic-1 {width: auto; height: 100%; margin: 0 0 0 -8vw;}
  .hp-serv-items .items-box .pic img.pic-2 {width: 100%; height: auto; margin: -3vw 0 0 0;}
  .hp-serv-items .items-box .pic img.pic-3 {width: 100%; height: auto; margin: -3vw 0 0 0;}
  .hp-serv-items .items-box .pic img.pic-4 {width: auto; height: 100%; margin: 0 0 0 -7vw;}
  .hp-serv-items .items-box .pic img.pic-5 {width: auto; height: 100%; margin: 0 0 0 -5vw;}
  .hp-serv-items .items-box .title { width: 100%; font-size: 2.2vw; font-weight: 500; text-align: center;}


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

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

  img.hp-about-pic-1 { width: 55%; height: auto; padding: 0 0 0 8vw; box-sizing: border-box; float: left;}
  img.hp-about-pic-2 { width: 30%; height: auto; padding: 0 2vw; margin: -7vw 0 0 0; box-sizing: border-box; float: left;}
  img.hp-about-pic-3 { width: 25%; height: auto; padding: 0 2vw; margin: -7vw 0 0 0; box-sizing: border-box; float: left;}

  .page-title .title-lt { width: 320px; color: #009144; font-size: 2.4em; font-weight: 600; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  .page-title .title-lt img { width: 73px; height: auto;}

  .hp-about-content { width: 45%; padding: 0 3vw 0 2vw; box-sizing: border-box; float: right; position: relative;}
  .hp-about-content .text { width: 100%; margin: 40px 0 0 0; font-size: 1.1em; line-height: 1.6em;}
  .hp-about-content img.hp-more-bt { position: absolute; bottom: -5vw; left: 2vw;}


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

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

  .hp-prod-list { clear: both; width: 100%; margin: 80px 0 0 0; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .hp-prod-list .list-box { width: calc(100% / 2 - 30px); margin: 0 15px 30px 15px; border: 1px #ccc solid; box-sizing: border-box; position: relative;}
  .hp-prod-list .list-box a { color: #414141; text-decoration: none; display: block;}
  .hp-prod-list .list-box img { width: 100%; height: auto;}
  .hp-prod-list .list-box .title-box { width: 100%; padding: 10px 5px; font-size: 1.2em; font-weight: 500; text-align: center; box-sizing: border-box; background-color: rgba(0,164,219,0.5); position: absolute; bottom: 0; left: 0;}

  img.hp-more-bt2 { margin: 60px auto 0 auto;}


  /************ section#hp-value ************/

  section#hp-value { clear: both; width: 100%; padding: 16vw 0 12vw 0; background-image: url("../images/hp_value_bg.jpg"); background-repeat: no-repeat; background-size: 160% auto; background-position: center top;}

  img.hp-value-text { width: 85vw; height: auto; margin: 0 auto;}


  /************ section#hp-process ************/

  section#hp-process { clear: both; width: 100%; padding: 80px calc(50% - 320px); box-sizing: border-box;}

  .hp-process-list-full { clear: both; width: 100%; margin: 80px 0 0 0; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  .hp-process-list-full .hp-process-list { width: 240px; padding: 15px; margin: 0 0 30px 0; background-color: #eee; box-sizing: border-box;}
  .hp-process-list-full .hp-process-list .icon-box { width: 140px; height: 140px; margin: 0 auto 30px auto; color: #fff; font-size: 4em; border-radius: 100%; background-color: #009144; display: flex; justify-content: center; align-items: center;}
  .hp-process-list-full .hp-process-list .text-box { clear: both; width: 100%;}
  .hp-process-list-full .hp-process-list .text-box .title { width: 100%; padding: 0 0 20px 0; font-size: 1.2em; font-weight: 500; line-height: 1.2em; border-bottom: 1px #ccc solid;}
  .hp-process-list-full .hp-process-list .text-box .text { width: 100%; padding: 20px 0 0 0; font-size: 1em; line-height: 1.6em;}

  .hp-process-list-full .hp-process-arrow { clear: both; width: 80px; padding: 100px 0 0 0; color: #f29700; font-size: 3em; text-align: center;}
  .hp-process-list-full .hp-process-arrow-mo { display: none;}


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

  .page-banner-box { clear: both; width: 100%; height: 28vw; overflow: hidden;}
  .page-banner-box img { width: 120%; height: auto; margin: 0 0 0 -10%;}


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

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

  .page-about-text { width: 100%; margin: 80px 0 0 0; font-size: 1.1em; line-height: 1.8em;}

  .page-about-licenses { width: 100%; margin: 40px 0 0 0; display: flex; justify-content: flex-start;}
  .page-about-licenses img.license-1 { width: calc(50% - 15px); margin: 0 15px 0 0;}
  .page-about-licenses img.license-2 { width: calc(50% - 15px); margin: 0 0 0 15px;}

  .page-about-column-lf { clear: both; width: 50%; margin: 60px 0; float: left;}
  .page-about-column-lf img.pic-1 { width: 100%; height: auto;}
  .page-about-column-lf img.pic-2 { width: 70%; height: auto; margin: -15vw 0 0 20vw;}

  .page-about-column-rt { width: 50%; margin: 60px 0; float: left;}
  .page-about-column-rt img { clear: both; width: 60%; height: auto; margin: 0 0 20px 0; float: right;}

  .page-about-text2 { width: 45%; margin: 80px 0 0 0; font-size: 1.1em; line-height: 1.8em; float: left;}

  .page-quality-pics { width: 50%; margin: 80px 0 0 0; float: right; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  .page-quality-pics .qc-pic { width: calc(50% - 20px); height: 12vw; margin: 0 10px 20px 10px; overflow: hidden;}
  .page-quality-pics .qc-pic img { width: 100%; height: auto;}


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

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

  .page-serv-items { clear: both; width: 100%; margin: 80px 0 0 0; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .page-serv-items .items-box { width: 38vw; margin: 0 2vw 4vw 2vw;}
  .page-serv-items .items-box a { color: #414141; text-decoration: none;}
  .page-serv-items .items-box .pic { width: 30vw; height: 30vw; margin: 0 auto 25px auto; border-radius: 100%; overflow: hidden;}
  .page-serv-items .items-box .pic img.pic-1 {width: auto; height: 100%; margin: 0 0 0 -10vw;}
  .page-serv-items .items-box .pic img.pic-2 {width: 100%; height: auto; margin: -1vw 0 0 0;}
  .page-serv-items .items-box .pic img.pic-3 {width: 100%; height: auto; margin: -1vw 0 0 0;}
  .page-serv-items .items-box .pic img.pic-4 {width: auto; height: 100%; margin: 0 0 0 -8vw;}
  .page-serv-items .items-box .pic img.pic-5 {width: auto; height: 100%; margin: 0 0 0 -7vw;}
  .page-serv-items .items-box .title { width: 100%; font-size: 2.2vw; font-weight: 500; text-align: center;}
  .page-serv-items .items-box .intro { width: 100%; padding: 15px 0 0 0; margin: 10px 0 0 0; border-top: 1px #ccc solid; font-size: 1.8vw; line-height: 2.6vw;}
  .page-serv-items .items-box .photo { width: 100%; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  .page-serv-items .items-box .photo a { width: calc(50% - 20px); height: 11vw; margin: 20px 10px; border: 0; overflow: hidden; display: block;}
  .page-serv-items .items-box .photo a img { width: 100%; height: auto;}


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

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


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

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

  .page-title2 { clear: both; width: 100%;}
  .page-title2 .title { width: 200px; margin: 0 auto; color: #009144; font-size: 2.4em; font-weight: 600; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  .page-title2 .title img { width: 73px; height: auto;}

  .page-contact-infor { clear: both; width: 100%; margin: 80px 0 0 0;}
  .page-contact-infor .map-box { width: 100%; margin: 0 0 40px 0; border: 6px #ccc solid; box-sizing: border-box;}
  .page-contact-infor .map-box iframe { width: 100%; height: 40vw;}
  .page-contact-infor .infor-box { width: 100%; padding: 0 40px; font-size: 1.1em; line-height: 2.4em; box-sizing: border-box;}


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

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

  .page-products-sort { clear: both; width: 100%; margin: 80px 0 0 0; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-products-sort .prod-sort-box { width: calc(100% / 2); margin: 0 0 50px 0;}
  .page-products-sort .prod-sort-box a { color: #414141; text-decoration: none;}
  .page-products-sort .prod-sort-box .pic { width: 34vw; height: 34vw; margin: 0 auto; border: 4px #ccc solid; border-radius: 100%; overflow: hidden; box-sizing: border-box;}
  .page-products-sort .prod-sort-box .pic img { width: auto; height: 100%; display: flex; justify-content: center;}
  .page-products-sort .prod-sort-box .sort { width: 100%; padding: 20px 0 0 0; font-size: 1.4em; text-align: center;}

  .page-products-details { clear: both; width: 100%; margin: 80px 0 0 0;}
  .page-products-details .title { width: 100%; margin: 0 0 60px 0; color: #009144; font-size: 1.8em; font-weight: 600; text-align: center;}
  .page-products-details .pic-list { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-products-details .pic-list ul#pg-prod-big { width: 50%; padding: 0; margin: 0; list-style: none; display: block;}
  .page-products-details .pic-list ul#pg-prod-big li { width: 100%; padding: 0; margin: 0; border: 1px #ccc solid; display: none; box-sizing: border-box;}
  .page-products-details .pic-list ul#pg-prod-big li img { width: 100%; height: auto;}
  .page-products-details .pic-list ul#pg-prod-thumbnail { width: 50%; padding: 0 0 0 40px; margin: 0; list-style: none; display: flex; justify-content: flex-start; flex-wrap: wrap; box-sizing: border-box;}
  .page-products-details .pic-list ul#pg-prod-thumbnail li { width: calc(100% / 3 - 20px); margin: 10px; border: 1px #ccc solid; box-sizing: border-box;}
  .page-products-details .pic-list ul#pg-prod-thumbnail li img { width: 100%; height: auto; cursor: pointer;}
  .page-products-details .intro { clear: both; width: 100%; padding: 40px 0 0 0; margin: 40px 0 0 0; font-size: 1.1em; line-height: 1.8em; border-top: 3px #ccc solid;}

  .page-prod-table { clear: both; width: 100%;}
  .page-prod-table .caption-full { width: 100%; background-color: #eee; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-prod-table .caption-full .caption { width: calc(100% / 4); padding: 10px; font-weight: 600; line-height: 1.4em; text-align: center; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-prod-table .caption-full .caption:last-child { border-right: 0;}
  .page-prod-table .column-full { width: 100%; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-prod-table .column-full .column { width: calc(100% / 4); padding: 10px; line-height: 1.4em; border-right: 1px #ccc solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
  .page-prod-table .column-full .column:last-child { border-right: 0;}
  .page-prod-table .column-full .column img { width: 90%; height: auto;}

  .page-goback-bt { clear: both; width: 200px; margin: 60px auto 0 auto;}
  .page-goback-bt a { width: 100%; padding: 8px 0; color: #fff; font-size: 1.1em; text-align: center; text-decoration: none; border-radius: 10px; background-color: #009144; display: block;}
  .page-goback-bt a:hover { background-color: #0ea856;}

  .page-prod3-table { clear: both; width: 100%;}
  .page-prod3-table .caption-full { width: 100%; background-color: #eee; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-prod3-table .caption-full .caption { width: calc(100% / 6); padding: 10px; font-weight: 600; line-height: 1.4em; text-align: center; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-prod3-table .caption-full .caption:last-child { border-right: 0;}
  .page-prod3-table .column-full { width: 100%; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-prod3-table .column-full .column { width: calc(100% / 6); padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  .page-prod3-table .column-full .column:last-child { border-right: 0;}

  .page-prod9-table { clear: both; width: 100%;}
  .page-prod9-table .caption-full { width: 100%; background-color: #eee; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-prod9-table .caption-full .caption { width: calc(100% / 7); padding: 10px; font-weight: 600; line-height: 1.4em; text-align: center; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-prod9-table .caption-full .caption:last-child { border-right: 0;}
  .page-prod9-table .column-full { width: 100%; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-prod9-table .column-full .column { width: calc(100% / 7); padding: 10px; border-right: 1px #ccc solid; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  .page-prod9-table .column-full .column:last-child { border-right: 0;}


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

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

  ul.page-sitemap-list { clear: both; width: 100%; padding: 0; margin: 80px 0 0 0; list-style: none; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
  ul.page-sitemap-list li { padding: 0; margin: 20px;}
  ul.page-sitemap-list li a { color: #414141; font-size: 1.4em; font-weight: 600; text-decoration: none;}
  ul.page-sitemap-list li a:hover { border-bottom: 1px #414141 solid;}


  /************ section#page-error ************/

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

  .error-title { width: 100%; margin: 0 0 80px 0; color: #009144; font-size: 3em; font-weight: 600; text-align: center;}

  .error-text { width: 100%; margin: 0 0 80px 0; color: #009144; font-size: 2em; text-align: center;}


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

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

  .footer-colum-lf { width: 100%; margin: 0 0 40px 0; font-size: 1.1em; line-height: 2em; text-align: center;}
  .footer-colum-lf span.title { font-size: 1.4rem; font-weight: 500;}

  .footer-colum-rt-mo { display: none;}

  .footer-colum-rt { width: 100%; font-size: 1.2em; line-height: 2em; text-align: center;}
  .footer-colum-rt a { color: #fff; text-decoration: none;}
  .footer-colum-rt a:hover { border-bottom: 1px #fff solid;}

  .footer-copyright { clear: both; width: 100%; padding: 20px 0; color: #414141; font-size: 1em; line-height: 1.8em; text-align: center; background-color: #fff;}
  .footer-copyright a { color: #414141; text-decoration: none;}
  .footer-copyright a:hover { border-bottom: 1px #414141 solid;}


}

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

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

  header { width: 100%; height: 80px; display: flex; justify-content: space-between; align-items: center; position: relative;}

  .logo-box { width: 220px; margin: 0 0 0 15px;}
  .logo-box img { width: 100%; height: auto;}

  #nav-icon { width: 70px; font-size: 2.6em; line-height: 1em; text-align: center;}

  nav#pc { display: none;}  

  nav#mo { width: 100%; padding: 60px; box-sizing: border-box; background-color: #f29700; position: absolute; top: 80px; left: 0; z-index: 999; display: none;}
  nav#mo ul.menu { width: 100%; padding: 0; margin: 10px 0 0 0; list-style: none; display: block;}
  nav#mo ul.menu li { width: 100%; padding: 0; margin: 0; font-size: 1.3em; font-weight: 500;}
  nav#mo ul.menu li a { width: 100%; padding: 15px; box-sizing: border-box; color: #414141; text-align: center; text-decoration: none; display: block;}

  .language-box { display: none;}

  .language-box-mo { width: 100%; margin: 30px 0 0 0; display: flex; justify-content: center; align-items: center;}
  .language-box-mo .box { width: 26px; height: 26px; margin: 0 5px;}
  .language-box-mo .box a { width: 100%; height: 100%; color: #009144; line-height: 1em; border: 1px #009144 solid; background-color: #fff; border-radius: 6px; display: flex; justify-content: center; align-items: center; text-decoration: none;}
  .language-box-mo .box a:hover { background-color: #eee;}
  .language-box-mo .box a.sel { color: #fff; background-color: #009144;}

  .phone-box { display: none;}


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

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

  img.banner { width: 160%; height: auto; margin: 0 0 0 -30%;}
  img.banner-slogan { width: 80vw; height: auto; position: absolute; top: 35vw; left: 0;}


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

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

  .page-title { clear: both; width: 100%;}
  .page-title .title { width: 320px; color: #009144; font-size: 2.4em; font-weight: 600; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  .page-title .title img { width: 73px; height: auto;}

  .hp-serv-items { clear: both; width: 100%; margin: 80px 0 0 0; display: flex; justify-content: center; align-items: stretch; flex-wrap: wrap;}
  .hp-serv-items .items-box { width: 40vw; margin: 0 2vw 5vw 2vw;}
  .hp-serv-items .items-box a { color: #414141; text-decoration: none;}
  .hp-serv-items .items-box .pic { width: 40vw; height: 40vw; margin: 0 0 20px 0; border-radius: 100%; overflow: hidden;}
  .hp-serv-items .items-box .pic img.pic-1 {width: auto; height: 100%; margin: 0 0 0 -9vw;}
  .hp-serv-items .items-box .pic img.pic-2 {width: 100%; height: auto; margin: -5vw 0 0 0;}
  .hp-serv-items .items-box .pic img.pic-3 {width: 100%; height: auto; margin: -5vw 0 0 0;}
  .hp-serv-items .items-box .pic img.pic-4 {width: auto; height: 100%; margin: 0 0 0 -9vw;}
  .hp-serv-items .items-box .pic img.pic-5 {width: auto; height: 100%; margin: 0 0 0 -8vw;}
  .hp-serv-items .items-box .title { width: 100%; font-size: 3.4vw; font-weight: 500; text-align: center;}


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

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

  img.hp-about-pic-1 { width: 100%; height: auto; margin: 0 0 40px 0;}
  img.hp-about-pic-2 { width: 100%; height: auto; margin: 0 0 40px 0;}
  img.hp-about-pic-3 { width: 100%; height: auto;}

  .page-title .title-lt { width: 320px; color: #009144; font-size: 2.4em; font-weight: 600; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  .page-title .title-lt img { width: 73px; height: auto;}

  .hp-about-content { clear: both; width: 100%; margin: 0 0 40px 0;}
  .hp-about-content .text { width: 100%; margin: 40px 0 0 0; font-size: 1.1em; line-height: 1.6em;}
  .hp-about-content img.hp-more-bt { margin: 40px 0 0 0;}


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

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

  .hp-prod-list { clear: both; width: 100%; margin: 80px 0 0 0; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .hp-prod-list .list-box { width: calc(100% / 2 - 10px); margin: 0 5px 20px 5px; border: 1px #ccc solid; box-sizing: border-box; position: relative;}
  .hp-prod-list .list-box a { color: #414141; text-decoration: none; display: block;}
  .hp-prod-list .list-box img { width: 100%; height: auto;}
  .hp-prod-list .list-box .title-box { width: 100%; padding: 10px 5px; font-size: 1.1em; font-weight: 500; text-align: center; box-sizing: border-box; background-color: rgba(0,164,219,0.5); position: absolute; bottom: 0; left: 0;}

  img.hp-more-bt2 { margin: 60px auto 0 auto;}


  /************ section#hp-value ************/

  section#hp-value { clear: both; width: 100%; padding: 26vw 0 22vw 0; background-image: url("../images/hp_value_bg.jpg"); background-repeat: no-repeat; background-size: 240% auto; background-position: center top;}

  img.hp-value-text { width: 96%; height: auto; margin: 0 auto;}


  /************ section#hp-process ************/

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

  .hp-process-list-full { clear: both; width: 100%; margin: 80px 0 0 0;}
  .hp-process-list-full .hp-process-list { clear: both; width: 100%; padding: 15px; margin: 0 0 30px 0; background-color: #eee; box-sizing: border-box;}
  .hp-process-list-full .hp-process-list .icon-box { width: 140px; height: 140px; margin: 0 auto 30px auto; color: #fff; font-size: 4em; border-radius: 100%; background-color: #009144; display: flex; justify-content: center; align-items: center;}
  .hp-process-list-full .hp-process-list .text-box { clear: both; width: 100%;}
  .hp-process-list-full .hp-process-list .text-box .title { width: 100%; padding: 0 0 20px 0; font-size: 1.2em; font-weight: 500; line-height: 1.2em; border-bottom: 1px #ccc solid;}
  .hp-process-list-full .hp-process-list .text-box .text { width: 100%; padding: 20px 0 0 0; font-size: 1em; line-height: 1.6em;}

  .hp-process-list-full .hp-process-arrow { display: none;}
  .hp-process-list-full .hp-process-arrow-mo { clear: both; width: 100%; padding: 0 0 30px 0; color: #f29700; font-size: 3em; text-align: center;}


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

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


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

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

  .page-about-text { width: 100%; margin: 80px 0 0 0; font-size: 1.1em; line-height: 1.8em;}

  .page-about-licenses { width: 100%; margin: 40px 0 0 0; display: flex; justify-content: flex-start;}
  .page-about-licenses img.license-1 { width: calc(50% - 15px); margin: 0 15px 0 0;}
  .page-about-licenses img.license-2 { width: calc(50% - 15px); margin: 0 0 0 15px;}

  .page-about-column-lf { clear: both; width: 100%; margin: 60px 0 0 0;}
  .page-about-column-lf img.pic-1 { width: 100%; height: auto; margin: 0 0 20px 0;}
  .page-about-column-lf img.pic-2 { width: 100%; height: auto;}

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

  .page-about-text2 { width: 100%; margin: 80px 0 0 0; font-size: 1.1em; line-height: 1.8em;}

  .page-quality-pics { width: 100%; margin: 40px 0 0 0; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  .page-quality-pics .qc-pic { width: calc(50% - 20px); height: 22vw; margin: 0 10px 20px 10px; overflow: hidden;}
  .page-quality-pics .qc-pic img { width: 100%; height: auto;}


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

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

  .page-serv-items { clear: both; width: 100%; margin: 80px 0 0 0;}
  .page-serv-items .items-box { width: 100%; margin: 0 0 30px 0;}
  .page-serv-items .items-box a { color: #414141; text-decoration: none;}
  .page-serv-items .items-box .pic { width: 300px; height: 300px; margin: 0 auto 25px auto; border-radius: 100%; overflow: hidden;}
  .page-serv-items .items-box .pic img.pic-1 {width: auto; height: 100%; margin: 0 0 0 -90px;}
  .page-serv-items .items-box .pic img.pic-2 {width: 100%; height: auto; margin: -20px 0 0 0;}
  .page-serv-items .items-box .pic img.pic-3 {width: 100%; height: auto; margin: -20px 0 0 0;}
  .page-serv-items .items-box .pic img.pic-4 {width: auto; height: 100%; margin: 0 0 0 -80px;}
  .page-serv-items .items-box .pic img.pic-5 {width: auto; height: 100%; margin: 0 0 0 -70px;}
  .page-serv-items .items-box .title { width: 100%; font-size: 1.6em; font-weight: 500; text-align: center;}
  .page-serv-items .items-box .intro { width: 100%; padding: 15px 0 0 0; margin: 10px 0 0 0; border-top: 1px #ccc solid; font-size: 1.1em; line-height: 1.4em}
  .page-serv-items .items-box .photo { width: 100%; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  .page-serv-items .items-box .photo a { width: calc(50% - 20px); height: 25vw; margin: 20px 10px; border: 0; overflow: hidden; display: block;}
  .page-serv-items .items-box .photo a img { width: 100%; height: auto;}


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

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


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

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

  .page-title2 { clear: both; width: 100%;}
  .page-title2 .title { width: 200px; margin: 0 auto; color: #009144; font-size: 2.4em; font-weight: 600; display: flex; justify-content: flex-start; flex-wrap: wrap;}
  .page-title2 .title img { width: 73px; height: auto;}

  .page-contact-infor { clear: both; width: 100%; margin: 80px 0 0 0;}
  .page-contact-infor .map-box { width: 100%; margin: 0 0 40px 0; border: 6px #ccc solid; box-sizing: border-box;}
  .page-contact-infor .map-box iframe { width: 100%; height: 60vw;}
  .page-contact-infor .infor-box { width: 100%; font-size: 1.1em; line-height: 2.4em;}


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

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

  .page-products-sort { clear: both; width: 100%; margin: 80px 0 0 0; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-products-sort .prod-sort-box { width: 100%; margin: 0 0 50px 0;}
  .page-products-sort .prod-sort-box a { color: #414141; text-decoration: none;}
  .page-products-sort .prod-sort-box .pic { width: 70vw; height: 70vw; margin: 0 auto; border: 4px #ccc solid; border-radius: 100%; overflow: hidden; box-sizing: border-box;}
  .page-products-sort .prod-sort-box .pic img { width: auto; height: 100%; display: flex; justify-content: center;}
  .page-products-sort .prod-sort-box .sort { width: 100%; padding: 20px 0 0 0; font-size: 1.4em; text-align: center;}

  .page-products-details { clear: both; width: 100%; margin: 80px 0 0 0;}
  .page-products-details .title { width: 100%; margin: 0 0 60px 0; color: #009144; font-size: 1.8em; font-weight: 600; text-align: center;}
  .page-products-details .pic-list { width: 100%;}
  .page-products-details .pic-list ul#pg-prod-big { width: 100%; padding: 0; margin: 0 0 30px 0; list-style: none; display: block;}
  .page-products-details .pic-list ul#pg-prod-big li { width: 100%; padding: 0; margin: 0; border: 1px #ccc solid; display: none; box-sizing: border-box;}
  .page-products-details .pic-list ul#pg-prod-big li img { width: 100%; height: auto;}
  .page-products-details .pic-list ul#pg-prod-thumbnail { width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: flex-start; flex-wrap: wrap; box-sizing: border-box;}
  .page-products-details .pic-list ul#pg-prod-thumbnail li { width: calc(100% / 3 - 20px); margin: 10px; border: 1px #ccc solid; box-sizing: border-box;}
  .page-products-details .pic-list ul#pg-prod-thumbnail li img { width: 100%; height: auto; cursor: pointer;}
  .page-products-details .intro { clear: both; width: 100%; padding: 40px 0 0 0; margin: 40px 0 0 0; font-size: 1em; line-height: 1.6em; border-top: 3px #ccc solid;}

  .page-prod-table { clear: both; width: 100%;}
  .page-prod-table .caption-full { width: 100%; background-color: #eee; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-prod-table .caption-full .caption { width: calc(100% / 4); padding: 5px; font-weight: 600; font-size: 0.8rem; line-height: 1.2em; text-align: center; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-prod-table .caption-full .caption:last-child { border-right: 0;}
  .page-prod-table .column-full { width: 100%; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-prod-table .column-full .column { width: calc(100% / 4); padding: 5px; font-size: 0.8rem; line-height: 1.2em; border-right: 1px #ccc solid; box-sizing: border-box; display: flex; justify-content: center; align-items: center;}
  .page-prod-table .column-full .column:last-child { border-right: 0;}
  .page-prod-table .column-full .column img { width: 90%; height: auto;}

  .page-goback-bt { clear: both; width: 200px; margin: 60px auto 0 auto;}
  .page-goback-bt a { width: 100%; padding: 8px 0; color: #fff; font-size: 1.1em; text-align: center; text-decoration: none; border-radius: 10px; background-color: #009144; display: block;}
  .page-goback-bt a:hover { background-color: #0ea856;}

  .page-prod3-table { clear: both; width: 100%;}
  .page-prod3-table .caption-full { width: 100%; background-color: #eee; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-prod3-table .caption-full .caption { width: calc(100% / 6); padding: 5px; font-weight: 600; font-size: 0.8rem; line-height: 1.2em; text-align: center; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-prod3-table .caption-full .caption:last-child { border-right: 0;}
  .page-prod3-table .column-full { width: 100%; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-prod3-table .column-full .column { width: calc(100% / 6); padding: 5px; font-size: 0.8rem; border-right: 1px #ccc solid; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  .page-prod3-table .column-full .column:last-child { border-right: 0;}

  .page-prod9-table { clear: both; width: 100%;}
  .page-prod9-table .caption-full { width: 100%; background-color: #eee; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-prod9-table .caption-full .caption { width: calc(100% / 7); padding: 5px; font-weight: 600; font-size: 0.6rem; line-height: 1.2em; text-align: center; border-right: 1px #ccc solid; box-sizing: border-box;}
  .page-prod9-table .caption-full .caption:last-child { border-right: 0;}
  .page-prod9-table .column-full { width: 100%; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-prod9-table .column-full .column { width: calc(100% / 7); padding: 5px; font-size: 0.6rem; line-height: 1.2em; border-right: 1px #ccc solid; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  .page-prod9-table .column-full .column:last-child { border-right: 0;}


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

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

  ul.page-sitemap-list { clear: both; width: 100%; padding: 0; margin: 80px 0 0 0; list-style: none; display: block;}
  ul.page-sitemap-list li { padding: 0; margin: 20px 0;}
  ul.page-sitemap-list li a { color: #414141; font-size: 1.4em; font-weight: 600; text-decoration: none;}
  ul.page-sitemap-list li a:hover { border-bottom: 1px #414141 solid;}


  /************ section#page-error ************/

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

  .error-title { width: 100%; margin: 0 0 80px 0; color: #009144; font-size: 3em; font-weight: 600; text-align: center;}

  .error-text { width: 100%; margin: 0 0 80px 0; color: #009144; font-size: 2em; text-align: center;}


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

  footer { clear: both; width: 100%; padding: 80px 20px; color: #fff; background-color: #505050; box-sizing: border-box;}

  .footer-colum-lf { width: 100%; margin: 0 0 40px 0; font-size: 0.8em; line-height: 2em;}
  .footer-colum-lf span.title { font-size: 1.4rem; font-weight: 500;}

  .footer-colum-rt { display: none;}

  .footer-colum-rt-mo { width: 100%; font-size: 1em; line-height: 2em;}
  .footer-colum-rt-mo a { color: #fff; text-decoration: none;}
  .footer-colum-rt-mo a:hover { border-bottom: 1px #fff solid;}

  .footer-copyright { clear: both; width: 100%; padding: 20px; box-sizing: border-box; color: #414141; font-size: 0.7em; line-height: 1.8em; text-align: center; background-color: #fff;}
  .footer-copyright a { color: #414141; text-decoration: none;}
  .footer-copyright a:hover { border-bottom: 1px #414141 solid;}
  

}