@charset "utf-8";
/* 簡單流變媒體
   注意: 流變媒體要求您必須移除 HTML 中媒體的高度和寬度屬性
   http://www.alistapart.com/articles/fluid-images/ 
*/

img, object, embed, video {
	max-width: 100%;
}
/* IE 6 不支援最大寬度，因此寬度預設為 100% */
.ie6 img {
	width:100%;
}
body, main, footer{ font-family: "微軟正黑體", "Arial", sans-serif;}
input:focus, textarea:focus, select:focus, option:focus{ outline: none;}

form{width: 100%;}

a:active,
a:visited,
a:hover { outline: 0; text-decoration:none;}

@font-face {
   font-family: "Solway";
   src: url("../webfonts/Solway-Regular.woff") format("woff"), url("../webfonts/Solway-Regular.ttf") format("truetype"), url("../webfonts/Solway-Regular.eot") format("embedded-opentype");
   
   font-family: "Quicksand";
   src: url("../webfonts/Quicksand-VariableFont_wght.woff") format("woff"), url("../webfonts/Quicksand-VariableFont_wght.ttf") format("truetype"), url("../webfonts/Quicksand-VariableFont_wght.eot") format("embedded-opentype");

}

.en-font-family-style{font-family: "Quicksand", Arial, "微軟正黑", Helvetica, sans-serif !important;}

/* 行動版面: 480px 以下。 */
.display-style{ display: -webkit-flex; display: flex; flex-wrap: wrap;}
.max-width-style{ width: 96%; margin: auto 2%;}

.top-box{ align-items: flex-start; width: 100%; margin: 0; padding: 7px 5px; box-sizing: border-box; position: fixed; background: #FFF; border-bottom: 1px #EEE solid; z-index: 10000;}
   .top-box-logo{ width: 220px; margin: 8px 0 -40px; z-index: 20;}
      .top-box-logo a{ align-items: center; text-decoration: none;}
         .top-box-logo a:visited, .top-box-logo a:hover, .top-box-logo a:active{text-decoration: none;}
         .top-box-logo img{ width: 38px;}
         .top-box-logo h2{ width: calc(97% - 38px); margin: 0 0 0 3%; font-size: 1.2em; font-weight: bolder; color: #333;}
   .top-box-operating{flex-direction: row-reverse; justify-content: space-between; align-items: center; width: 100%;}
      .top-box-search{ align-items: center; width: 220px; margin: 10px calc(50% - 110px) 15px ;}
         .top-box-search input{ width: 180px; margin: 0 5px 0 0; padding: 5px 12px; border: 1px #DDD solid; border-radius: 30px;}
         .top-box-search a{ justify-content: center; align-items: center; width: 35px; height: 35px; font-size: 1em; color: #FFF;  text-decoration: none; background-color: #5a8dde; border: 1px #DDD solid; border-radius: 50%; transition: 0.2s ease-in-out;}
            .top-box-search a:hover{ color: #333; text-decoration: none; background-color: #efd43d;}
            .top-box-search i{ z-index: 0;}
      .pc-search{ display: none;}
      .ph-search{ display: flex;}
      .top-box-menu{ width: 100%; margin:-18px 0 0; font-size: 1.15em;}
         .menu-br-style{display: none;}

.index-runimg{ display: inline-block; width: 100%; margin: 52px 0 0;}

.index-title{ width: 100%; margin: 0 0 30px; text-align: center;}
   .index-title h3{ width: 100%; margin: 0 0 8px; font-size: 1.45em; font-weight: bolder; letter-spacing: 2px; color: #333;}
   .index-title h4{ width: 100%; margin: 0; font-size: 1em; letter-spacing: 1px; color: #666;}
  

.index-operation{ justify-content: space-between; width: 100%; margin: 35px 0 5px;}
   .index-operation-box{width: 90%; margin: 0 5% 30px; text-align: center;}
      .index-operation-box span{ float: left; width: 50%; margin: 0 25% 15px; border: 2px #DDD solid; border-radius: 50%; overflow: hidden; transition: 0.2s ease-in-out;}
      .index-operation-box h3{ width: 100%; margin: 0 0 8px; font-size: 1.25em; font-weight: bolder; letter-spacing: 1px; color: #30a3dc;}
      .index-operation-box h4{ width: 100%; margin: 0; font-size: 1em; color: #666;}
      .index-operation-box:hover > span{ border-color: #efd43d; transform:scaleX(-1);}

.index-about-bg{ width: 100%; margin: 0; padding: 35px 0; background-repeat: no-repeat; background-position: center center; background-image: url(../images/index-about-bg-ph.jpg);}
   .index-about{text-align: center; color: #FFF;}
      .index-about h1{ width: 100%; margin: 0 0 20px; font-size: 1.45em; font-weight: bolder; letter-spacing: 2px;}
      .index-about h3{ width: 96%; margin: 0 2%; font-size: 1em; line-height: 1.5em;}

.button-style{justify-content: center; width: 100%; margin: 30px 0 0;}
   .button-style a{ width: auto; padding: 6px 20px; font-size: 0.9em; letter-spacing: 2px; border: 1px solid; transition: 0.3s ease-in-out;}
      .button-style a, .button-style a:visited, .button-style a:hover, .button-style a:active{ text-decoration: none;}
      .button-style a:hover{transform: rotate(360deg); background-color: #30a3dc; color: #FFF; border-color: transparent !important;}
      .button-white-style{ color: #FFF; border-color: #FFF !important;}
      .button-orange-style{ color: #ef7c3d; border-color: #ef7c3d !important;}

.index-service{ width: 100%; padding: 30px 0; background-repeat: no-repeat; background-position: top left; background-image: url(../images/project-bg.jpg);}
   .index-service a, .index-service a:visited, .index-service a:hover, .index-service a:active{ text-decoration: none;}
   .index-service-box{ align-items: stretch; width: 90%; margin: 0 5% 20px; background-color: #EEE; transition: 0.2s ease-in-out;}
   .index-service-box:hover{ background-color: #5a8dde;}
      .index-service-box-img{ width: 100%; margin: 0; position: relative; overflow: hidden;}
         .index-service-box-img img{ width: 100%; transition: 0.5s ease-in-out;}
         .index-service-box-text{ position: absolute; align-items: center; width: 80%; height: 80%; top: 10%; left: 10%; text-align: center; background-color: rgba(0, 0, 0, 0.7); opacity: 0; transition: 0.3s ease-in-out;}
            .index-service-box-text h3{ width: 96%; margin: 0 2%; font-size: 3.5em; color: #FFF;}
         .index-service-box:hover > .index-service-box-img > img{ transform: scale(1.1);}
         .index-service-box:hover > .index-service-box-img > .index-service-box-text{ width: 100%; height: 100%; top: 0; left: 0; opacity: 1;}
      .index-service-box-name{ align-items: stretch; width: 100%; margin: 0; padding: 20px 10px; box-sizing: border-box; text-align: center;}
         .index-service-box-name h4{ width: 100%; margin: 0 0 5px; font-size: 1.25em; font-weight: bolder; letter-spacing: 1px; color: #333; transition: 0.1s ease-in-out;}
         .index-service-box-name p{ width: 100%; margin: 0; font-size: 0.95em; color: #666; transition: 0.1s ease-in-out;}
         .index-service-box:hover > .index-service-box-name > h4,.index-service-box:hover > .index-service-box-name >  p{ color: #FFF;}

.index-contact{ width: 100%; margin: 0; padding: 60px 0; background-size: cover; background-position: center; background-image: url(../images/index-contact-bg-ph.jpg);}
   .index-contact-text p{width: 85%; margin: 0 12% 20px 3%; font-size: 1.15em; letter-spacing: 1px; color: #FFF;}
   .index-contact-text a{width: auto; margin-left: 3%; padding: 6px 15px; text-align: center; font-size: 0.95em; font-weight: bolder; letter-spacing: 1px; color: #FFF; background-color: #30a3dc; border: 1px #30a3dc solid; border-radius: 5px; transition: 0.2s ease-in-out;}
      .index-contact-text a, .index-contact-text a:visited, .index-contact-text a:hover, .index-contact-text a:active{ text-decoration: none;}
      .index-contact-text a:hover{ color: #FFF; background-color: transparent; border-color: #FFF;}

.page-content{ display: inline-block; margin: 52px auto 30px;}
   .page-title{ width: 100%; margin: 0; position: relative;}
      .page-title img{ width: 100%; z-index: 1;}
      .page-title-img-pc{ display: none;}
      .page-title-img-ph{ display: inline-block;}
      .page-title-text-bg{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.4);}
         .page-title-text{ position: absolute; bottom: 44%; color: #FFF; z-index: 5;}
            .page-title-text h3{ width: 100%; margin: 0; font-size: 1.05em; font-weight: bolder; letter-spacing: 1px;}
            .page-title-text h4{ display: none;}
   .project-bg-style{ width: 100%; padding: 20px 0 0; background-repeat: no-repeat; background-position: top left; background-image: url(../images/project-bg.jpg); z-index: -10 !important;}

   .page-headline{ width: 80%; margin: 0 10% 35px; text-align: center; position: relative; z-index: 0;}
      .page-headline h3{ width: 100%; margin:  0 0 5px; font-size: 1.45em; font-weight: bolder; line-height: 1.35em ; letter-spacing: 1px; color: #333;}
      .page-headline h4{ width: 100%; margin: 0; font-size: 1em; line-height: 0 ; color: #666;}
      .page-headline::before{ position: absolute; content: ""; width: 140px; height: 20px; top: 12px; left: calc(50% - 70px); background-color: #F0F0F0; transform: skewX(45deg); z-index: -1;}

   .page-content-about{ width: 100%;}
      .about-box, .about-box-en{ justify-content: space-between; align-items: center; width: 100%; margin: 0 0 50px;}
      .about-box-en{flex-direction: row-reverse;}
         .about-box-img{width: 96%; margin: 0 2%;} 
            .about-box-img img{width: 100%;}
         .about-box-text, .about-box-text-en{ width: 96%; margin: 0 2%; padding:0 15px 30px; box-sizing: border-box; font-size: 1.05em; letter-spacing: 1px; color: #666; background-color: #FFF; border: 1px #DDD solid; box-shadow: 6px 6px 7px rgba(0, 0, 0, 0.2);}
            .about-box-text-title, .about-box-text-title-en{ justify-content: center; width: 100%;}
               .about-box-text-title h3, .about-box-text-en h3{ width: auto; padding:10px 30px; box-sizing: border-box; font-size: 1.05em; font-weight: bolder; color: #FFF; background-color: #5a8dde;}      
               .about-box-text-title h3{ margin: -20px 0 20px; letter-spacing: 3px;}
               .about-box-text-title-en h3{ margin: -20px 0 20px; letter-spacing: 1px;}
      .about-slogan{ align-items: center; width: 100%; background-color: #506e76;}
         .about-slogan-img{ width: 100%;}
            .about-slogan-img img{ width: 100%;}
         .about-slogan-text{ width: 100%; margin: 0; padding: 18px 10px; box-sizing: border-box;  color: #FFF;}
            .about-slogan-text h3{ width: 100%; margin: 0 0 15px; font-size: 1.15em; line-height: 1.5em; font-weight: bolder; letter-spacing: 2px;}
            .about-slogan-text p{ width: 100%; margin:  0 0 20px; font-size: 0.95em;}
            .about-slogan-text img{ width: auto; max-width: 100%; display:block; margin: auto;}

   .page-content-equipment{ width: 100%;}
      .page-content-equipment img{ width: auto; max-width: 100%; display:block; margin: auto;}
      .equipment-box{ width: 100%; margin: 0 0 20px; padding: 10px; box-sizing: border-box; font-size: 1.15em; line-height: 1.5em; color: #666; background-color: rgba(255, 255, 255, 0.7);}
      .equipment-main-img{ width: 100%; margin: 0 0 20px;}
         .equipment-main-img img{ width: auto; max-width: 100% !important; display:block; margin: auto;}
         .equipment-main-img-pc{ display: none;}
         .equipment-main-img-ph{ display: inline-block;}
   .page-content-equipment-img{ width: 100%; margin: 35px 0 0;}
      .page-content-title-style{ justify-content: center; width: 100%; margin: 0 0 20px;}
         .page-content-title-style h3{ width: auto; margin: 0; padding: 10px 35px; box-sizing: border-box; font-size: 1.25em; font-weight: bolder; letter-spacing: 2px; color: #333; border: 2px #DDD solid;}
         .content-equipment-img-box{ width: 90%; margin: 0 5% 25px;}
            .content-equipment-img-box a, .content-equipment-img-box img{ width: 100%;}
            .content-equipment-img-box h5{ width: 100%; margin: 0; padding: 10px 5px; box-sizing: border-box; text-align: center; font-size: 1.15em; color: #666; background-color: #F2F2F2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

   .content-product-title{ align-items: stretch; width: 100%; margin: 0 0 20px;}
      .content-product-title a{justify-content: center; align-items: center; text-align: center; padding: 8px; border-radius: 5px;}
         .options-in{ width: 48%; margin: 0 1% 10px; border: 2px #5a8dde solid; background-color: #FFF; color: #5a8dde;}
         .options-out{ width: 48%; margin: 0 1% 10px; border: 2px #5a8dde solid; background-color: #5a8dde; color: #FFF;}
         .content-product-title a:hover{ border-color: #ef7c3d; background-color: #ef7c3d; color: #FFF; text-decoration: none;}
      .content-product-title h3{ width: 100%; margin: 0 0 2px; font-size: 1.15em; font-weight: bolder; letter-spacing: 1px; line-height: 1.35em;}
      .content-product-title h4{ width: 100%; margin: 0; font-size: 1em; line-height: 1.35em;}
   .content-product-main{ width: 100%; margin: 0;}
      .content-product-main h1{ width: 100%; margin: 0 0 35px; text-align: center; font-size: 1.15em; color: #333;}
      .product-main-description{ justify-content: space-between; align-items: center; width: 100%; margin: 0 0 30px; }
         .product-main-description-img{ width: 96%; margin:  0 2% 20px;}
            .product-main-description-img img{ width: 100%; border-radius: 3px;}
         .product-main-description-text{ width: 96%; margin: 0 2%; font-size: 1.05em; line-height: 1.5em; color: #666;}
      .content-product-main hr{ width: 90%; height: 2px; margin: 80px 5%; background-color: #F0F0F0; border: none;}
      .product-main-other{ width: 100%;}
         .product-main-other-box{ width: 90%; margin: 0 5% 25px; border-bottom: 2px #EEE solid; transition: 0.2s ease-in-out;}
            .product-main-other-box:hover{ border-color: #5a8dde;}
            .product-main-other-box a, .content-equipment-img-box img{ width: 100%;}
            .product-main-other-box img{ border: 1px #EEE solid;}
            .product-main-other-box h5{ width: 100%; margin: 0; padding: 10px 5px; box-sizing: border-box; text-align: center; font-size: 1.15em; color: #506e76; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
   
   .content-contact-information{ justify-content: space-between; align-items: center; width: 100%; margin: 0 0 35px; padding: 0 0 35px;}
      .contact-information-text{ width: 90%; margin: 0 5% 20px; padding:25px 25px 10px; box-sizing: border-box; background-color: #FFF; border: 1px #DDD solid; box-shadow: 6px 6px 7px rgba(0, 0, 0, 0.2);}
         .contact-information-text h3{ width: 100%; margin: 0 0 25px; text-align: center; font-size: 1.35em; font-weight: bolder; color: #333;}
         .contact-information-text font{ white-space: nowrap;}
         .contact-information-text-box{ align-items: flex-start; width: 100%; margin: 0 0 8px;}
            .contact-information-text-box span{ width: 35px; font-size: 1.35em; color: #ef7c3d;}
            .contact-information-text-box p{ width: calc(100% - 35px); margin: 0; font-size: 1.05em; color: #666;}
            .contact-information-text-box a{ font-weight: bolder; color: #5a8dde; white-space: nowrap;}
               .contact-information-text-box a:visited{ color: #5a8dde;}
               .contact-information-text-box a:hover{ color: #ef7c3d;}
      .contact-information-map{ width: 100%;}
         .contact-information-map iframe{ width: 100%; height: 30vh;}
   .content-contact-form{ width: 100%;}
      .content-contact-form form{ width: 96%; margin: 0 2%;}
      .content-contact-form form p{ width: 100%; margin: 0 0 25px;}
         .content-contact-form form p label{ width: 100%; margin: 0 0 5px; font-size: 1.15em; font-weight: bolder; letter-spacing: 1px;}
         .content-contact-form form p input{ width: 100%; padding: 8px; font-size: 1em; color: #506e76; border: 1px #CCC solid; border-radius: 5px;}
         .content-contact-form form p textarea{ width: 100%; height: 90px; border: 1px #CCC solid; border-radius: 5px;}
   



.footer-bg{ width: 100%; margin: 0; padding: 25px 5px; box-sizing: border-box; background-color: #DDD;}
   .footer{ justify-content: space-between; align-items: center;}
   .footer-logo{ width: 260px; margin: 0 calc(50% - 130px) 30px; text-align: center; text-decoration: none;}
      .footer-logo:hover{ text-decoration: none;}
      .footer-logo img{ width: 100%; max-width: 70px;}
      .footer-logo h3{ width: 100%; margin: 8px 0 4px; font-size: 1.25em; font-weight: bolder; letter-spacing: 1px; color: #333;}
      .footer-logo h4{ width: 100%; margin: 0 0 0 5px; font-size: 1em; color: #999;}
   .footen-information{ width: 96%; margin: 0 2%;}
      .footen-information-box{ align-items: flex-start; width: 100%; margin: 0 0 4px;}
         .footen-information-box span{ width: 21px; margin: 0 4px 0 0; text-align: center; font-size: 1.15em; color: #ef7c3d;}
         .footen-information-box p{ width: calc(100% - 25px); margin: 0; font-size: 0.95em;}
         .footen-information-box a{ white-space: nowrap; color: #5a8dde;}
         .footen-information-box a:hover{ font-weight: bolder; color: #5a8dde;}
         .footen-information-box font{ white-space: nowrap;}
.footer-copyright{ width: 100%; padding: 10px 0; text-align: center; font-size: 0.85em; color: #FFF; background-color: #506e76;}

/* 表格版面: 481px 到 768px。樣式繼承自: 行動版面。 */
@media only screen and (min-width: 481px) {
   .max-width-style{ width: 96%; margin: auto 2%;}

   .top-box{ width: 100%; margin: 0; padding: 10px 25px 6px;}
      .top-box-logo{ width: 280px; margin: 5px 0 -30px;}
         .top-box-logo a{ align-items: center;}
            .top-box-logo img{ width: 45px;}
            .top-box-logo h2{ width: calc(97% - 45px); margin: 0 0 0 3%; font-size: 1.45em;}
      .top-box-operating{ width: 100%; margin:-5px 0 0;}
         .top-box-search{ width: 90%; margin: 30px 5% 20px 5%;}
            .top-box-search input{ width: 220px; margin: 0 10px 0 0; padding: 6px 15px;}
            .top-box-search a{ justify-content: center; align-items: center; width: 38px; height: 38px; font-size: 1.05em;}
         .top-box-menu{ width:100%; margin:-18px 0 0; font-size: 1.05em; z-index: 3;}

   .index-runimg{ margin: 52px 0 0;}

   .index-title{ width: 90%; margin: 0 5% 50px;}
      .index-title h3{ width: 100%; margin: 0 0 8px; font-size: 1.65em;}
      .index-title h4{ width: 100%; margin: 0; font-size: 1.15em;}
   
   .index-operation{ width: 100%; margin: 50px 0;}
      .index-operation-box{width: 31.3%; margin: 0 1%;}
         .index-operation-box span{ width: 70%; margin: 0 15% 20px; border: 2px #DDD solid;}
         .index-operation-box h3{ width: 100%; margin: 10px 0; font-size: 1.2em;}
         .index-operation-box h4{ width: 100%; margin: 0; font-size: 1em;}   

   .index-about-bg{ width: 100%; margin: 0; padding: 40px 0;}
      .index-about{text-align: center;}
         .index-about h1{ width: 100%; margin: 0 0 20px; font-size: 1.65em;}
         .index-about h3{ width: 94%; margin: 0 3%; font-size: 1.15em; line-height: 1.5em;}
   
   .button-style{width: 100%; margin: 35px 0 0;}
      .button-style a{ width: auto; padding: 10px 20px; font-size: 1.05em;}

   .index-service{ width: 100%; padding: 50px 0;}
      .index-service-box{width: 50%; margin: 20px 0 0;}
         .index-service-box-img{ width: 100%; margin: 0 0 20px;}
            .index-service-box-text{ width: 80%; height: 80%; top: 10%; left: 10%;}
               .index-service-box-text h3{ width: 96%; margin: 0 2%; font-size: 4em;}
      .index-service-box h4{ width: 96%; margin: 0 2% 5px; font-size: 1.35em;}
      .index-service-box p{ width: 96%; margin: 0 2% 20px; font-size: 1.05em;}

   .index-contact{ width: 100%; margin: 0; padding: 80px 0;}
      .index-contact-text p{width: 45%; margin: 0 55% 20px 0; font-size: 1.25em;}
      .index-contact-text a{width: auto; margin-left: 0; padding: 6px 25px; font-size: 1.05em; border: 2px #30a3dc solid;}
   

   .page-content{ margin: 52px auto 40px;}
      .page-title{ width: 100%; margin: 0;}
         .page-title img{ width: 100%; z-index: 1;}
            .page-title-text{ bottom: 42%;}
               .page-title-text h3{ width: 100%; margin: 0 0 8px; font-size: 1.25em; letter-spacing: 2px;}
               .page-title-text h4{ display: inline-block; width: 100%; margin: 0; font-size: 1.05em;}
      .project-bg-style{ width: 100%; padding: 30px 0 0;}

      .page-headline{ width: 90%; margin: 0 5% 50px;}
         .page-headline h3{ width: 100%; margin:  0 0 10px; font-size: 1.85em; line-height: 1.35em;}
         .page-headline h4{ width: 100%; margin: 0; font-size: 1.25em; }
         .page-headline::before{ width: 160px; height: 30px; top: 15px; left: calc(50% - 80px)}        

   .page-content-about{ width: 100%;}
      .about-box, .about-box-en{ width: 100%; margin: 0 0 50px;}
         .about-box-img{width: 90%; margin: 0 5%;} 
            .about-box-img img{width: 100%;}
         .about-box-text, .about-box-text-en{ width: 90%; margin: -50px 5% 0; padding:0 35px 20px; font-size: 1.15em;}
            .about-box-text-title, .about-box-text-title-en{ justify-content: center; width: 100%;}
               .about-box-text-title h3, .about-box-text-en h3{ width: auto; padding:12px 50px; font-size: 1.15em;}      
               .about-box-text-title h3{ margin: -30px 0 20px; letter-spacing: 3px;}
               .about-box-text-title-en h3{ margin:  -30px 0 20px; letter-spacing: 1px;}
      .about-slogan{ width: 100%;}
         .about-slogan-img{ width: 100%;}
            .about-slogan-img img{ width: 100%;}
         .about-slogan-text{ width: 90%; margin: 0 5%; padding: 30px 0;}
            .about-slogan-text h3{ width: 100%; margin: 0 0 15px; font-size: 1.4em;}
            .about-slogan-text p{ width: 100%; margin: 0 0 35px; font-size: 1.05em;}

   .page-content-equipment{ width: 100%;}
      .equipment-box{ width: 100%; margin: 0 0 30px; padding: 15px; font-size: 1.25em;}
   .page-content-equipment-img{ width: 100%; margin: 50px 0 0;}
      .page-content-title-style{ justify-content: center; width: 100%; margin: 0 0 30px;}  
         .page-content-title-style h3{ font-size: 1.35em;}
         .content-equipment-img-box{ width: 48%; margin: 0 1% 25px;}
            .content-equipment-img-box h5{ width: 100%; margin: 0; padding: 10px 5px; font-size: 1.15em;}

   .content-product-title{ width: 100%; margin: 0 0 50px;}
      .content-product-title a{ padding: 8px; border-radius: 5px;}
         .options-in{ width: 48%; margin: 0 1% 10px; border: 2px #5a8dde solid;}
         .options-out{ width: 48%; margin: 0 1% 10px; border: 2px #5a8dde solid;}
      .content-product-title h3{ width: 100%; margin: 0 0 2px; font-size: 1.35em; letter-spacing: 2px; line-height: 1.5em;}
      .content-product-title h4{ width: 100%; margin: 0; font-size: 1.05em; line-height: 1.35em;}
   .content-product-main{ width: 100%; margin: 0;}
      .content-product-main h1{ width: 100%; margin: 0 0 30px; font-size: 1.35em;}
      .product-main-description{ width: 100%; margin: 0 0 30px; }
         .product-main-description-img{ width: 90%; margin:  0 5% 30px;}
            .product-main-description-img img{ width: 100%;}
         .product-main-description-text{ width: 90%; margin: 0 5%; font-size: 1.25em;}
      .content-product-main hr{ width: 98%; height: 2px; margin: 45px 1%;}
      .product-main-other{ width: 100%;}
         .product-main-other-box{ width: 48%; margin: 0 1% 25px}
            .product-main-other-box h5{ width: 100%; margin: 0; padding: 10px 5px; font-size: 1.15em;}  

   .content-contact-information{ width: 100%; margin: 0 0 40px; padding: 0 0 40px;}
      .contact-information-text{ width: 90%; margin: 0 5% 20px; padding: 30px;}
         .contact-information-text h3{ width: 100%; margin: 0 0 30px; font-size: 1.45em;}
         .contact-information-text-box{ width: 100%; margin: 0 0 10px;}
            .contact-information-text-box span{ width: 40px; font-size: 1.45em;}
            .contact-information-text-box p{ width: calc(100% - 40px); margin: 0; font-size: 1.15em;}
      .contact-information-map{ width: 100%;}
         .contact-information-map iframe{ width: 100%; height: 35vh;}
   .content-contact-form{ width: 100%;}
      .content-contact-form form{ width: 90%; margin: 0 5%;}
      .content-contact-form form p{ width: 100%; margin: 0 0 25px;}
         .content-contact-form form p label{ width: 100%; margin: 0 0 5px; font-size: 1.15em;}
         .content-contact-form form p input{ width: 100%; padding: 8px; font-size: 1.05em;}
         .content-contact-form form p textarea{ width: 100%; height: 100px;}




   .footer-bg{ width: 100%; margin: 0; padding: 35px 25px;}
      .footer-logo{ width: 280px; margin: 0 calc(50% - 140px) 35px;}
         .footer-logo img{ width: 100%; max-width: 70px;}
         .footer-logo h3{ width: 100%; margin: 10px 0 5px; font-size: 1.25em;}
         .footer-logo h4{ width: 100%; margin: 0; font-size: 1.05em;}
      .footen-information{ width: 94%; margin: 0 3%;}
         .footen-information-box{ width: 100%; margin: 0 0 6px;}
            .footen-information-box span{ width: 22px; margin: 0 6px 0 0; font-size: 1.15em;}
            .footen-information-box p{ width: calc(100% - 30px); margin: 0; font-size: 1em;}
}

@media only screen and (min-width: 681px) {
   .top-box{ width: 100%; margin: 0; padding: 10px 25px;}
      .top-box-logo{ width: 300px; margin: 8px 0 -30px;}
         .top-box-logo a{ align-items: center;}
            .top-box-logo img{ width: 45px;}
            .top-box-logo h2{ width: calc(97% - 45px); margin: 0 0 0 3%; font-size: 1.65em;}
      .top-box-menu{ width:100%; margin:-18px 0 0; font-size: 1.25em; z-index: 3;}

   .index-about-bg{ width: 100%; margin: 0; padding: 50px 0; background-size: cover; background-attachment: fixed; background-image: url(../images/index-about-bg.jpg);}

   .index-contact{ padding: 80px 0; background-image: url(../images/index-contact-bg.jpg);}

   
   .page-title{ width: 100%; margin: 0;}
      .page-title img{ width: 100%; z-index: 1;}
      .page-title-img-pc{ display: inline-block;}
      .page-title-img-ph{ display: none;}
      .page-title-text{ bottom: 40%;}
         .page-title-text h3{ width: 100%; margin: 0 0 8px; font-size: 1.45em;}
         .page-title-text h4{ width: 100%; margin: 0; font-size: 1.15em;}
   .project-bg-style{ width: 100%; padding: 35px 0 0;}

   .page-content-about{ width: 100%;}
      .about-box, .about-box-en{ width: 100%; margin: 0 0 50px;}
         .about-box-img{width: 90%; margin: 0 5%;} 
            .about-box-img img{width: 100%;}
         .about-box-text, .about-box-text-en{ width: 90%; margin: -50px 5% 0; padding:0 35px 30px; font-size: 1.25em; box-shadow: 12px 12px 7px rgba(0, 0, 0, 0.3);}
            .about-box-text-title, .about-box-text-title-en{ justify-content: center; width: 100%;}
               .about-box-text-title h3, .about-box-text-en h3{ width: auto; padding:15px 50px; font-size: 1.15em;}      
               .about-box-text-title h3{ margin: -30px -30px 30px 0; letter-spacing: 3px;}
               .about-box-text-title-en h3{ margin:  -30px -30px 30px 0; letter-spacing: 1px;}
      .about-slogan{ width: 100%;}
         .about-slogan-img{ width: 100%;}
            .about-slogan-img img{ width: 100%;}
         .about-slogan-text{ width: 90%; margin: 0 5%; padding: 30px 0;}
            .about-slogan-text h3{ width: 100%; margin: 0 0 15px; font-size: 1.4em;}
            .about-slogan-text p{ width: 100%; margin: 0 0 35px; font-size: 1.05em;}


   .footer-bg{ width: 100%; margin: 0; padding: 40px 20px;}
      .footer-logo{ width: 90%; margin: 0 5% 20px;}
         .footer-logo img{ width: 100%; max-width: 80px;}
         .footer-logo h3{ width: calc(100% - 5px); margin: 10px 0 5px 5px; font-size: 1.45em;}
         .footer-logo h4{ width: calc(100% - 5px); margin: 0 0 0 5px; font-size: 1.15em;}
      .footen-information{ width: 46%; margin: 0 2%;}
         .footen-information-box{ width: 100%; margin: 0 0 6px;}
            .footen-information-box span{ width: 22px; margin: 0 8px 0 0; font-size: 1.25em;}
            .footen-information-box p{ width: calc(100% - 30px); margin: 0; font-size: 1.15em;}
}

/* 桌面版面: 768px 到1024繼承自: 行動版面和表格版面。 */
@media only screen and (min-width: 769px) {
   .max-width-style{ width: 94%; margin: auto 3%;}

   .top-box{ width: 100%; margin: 0; padding: 8px 25px;}
      .top-box-logo{ width: 300px; margin: 5px 0 -20px;}
         .top-box-logo a{ align-items: center;}
            .top-box-logo img{ width: 55px;}
            .top-box-logo h2{ width: calc(95% - 55px); margin: 0 0 0 5%; font-size: 1.65em;}
      .top-box-operating{ width: 100%; margin: 0;}
         .top-box-search{ width: 90%; margin: 30px 5% 20px 5%;}
            .top-box-search input{ width: 250px; margin: 0 10px 0 0; padding: 8px 15px;}
            .top-box-search a{ justify-content: center; align-items: center; width: 40px; height: 40px; font-size: 1.25em;}
         .top-box-menu{ width:100%; margin:-30px 0 0; font-size: 1.25em; z-index: 3;}

   .index-runimg{ margin: 65px 0 0;}

   .index-title{ width: 80%; margin: 0 10% 50px;}
      .index-title h3{ width: 100%; margin: 0 0 15px; font-size: 2em;}
      .index-title h4{ width: 100%; margin: 0; font-size: 1.35em;}
   
   .index-operation{ width: 100%; margin: 80px 0;}
      .index-operation-box{width: 31.3%; margin: 20px 1% 0;}
         .index-operation-box span{ width: 70%; margin: 0 15% 25px; border: 3px #DDD solid;}
         .index-operation-box h3{ width: 100%; margin: 10px 0; font-size: 1.35em;}
         .index-operation-box h4{ width: 100%; margin: 0; font-size: 1.05em;}

   .index-about-bg{ width: 100%; margin: 0; padding: 80px 0;}
      .index-about{text-align: center;}
         .index-about h1{ width: 100%; margin: 0 0 20px; font-size: 2em;}
         .index-about h3{ width: 90%; margin: 0 5%; font-size: 1.25em; line-height: 1.5em;}
   
   .button-style{width: 100%; margin: 50px 0 0;}
      .button-style a{ width: auto; padding: 10px 25px; font-size: 1.15em;}

   .index-service{ width: 100%; padding: 80px 0;}
      .index-service-box{width: 25%; margin: 25px 0 0;}
         .index-service-box-img{ width: 100%; margin: 0;}
            .index-service-box-text{ width: 80%; height: 80%; top: 10%; left: 10%;}
               .index-service-box-text h3{ width: 96%; margin: 0 2%; font-size: 4em;}
         .index-service-box-name{ width: 100%; margin: 0; padding: 20px 10px;}
            .index-service-box-name h4{ width: 96%; margin: 0 2% 5px; font-size: 1.35em;}
            .index-service-box-name p{ width: 96%; margin: 0 2% 20px; font-size: 1.05em;}

   .index-contact{ width: 100%; margin: 0; padding: 80px 0;}
      .index-contact-text p{width: 50%; margin: 0 50% 25px 0; font-size: 1.35em;}
      .index-contact-text a{width: auto; padding: 6px 25px; font-size: 1.15em;}

   .page-content{ margin: 65px auto 60px;}
      .page-title{ width: 100%; margin: 0;}
         .page-title img{ width: 100%; z-index: 1;}
            .page-title-text{ bottom: 40%;}
               .page-title-text h3{ width: 100%; margin: 0 0 8px; font-size: 1.45em;}
               .page-title-text h4{ width: 100%; margin: 0; font-size: 1.15em;}
      .project-bg-style{ width: 100%; padding: 35px 0 0;}

      .page-headline{ width: 90%; margin: 0 5% 60px;}
         .page-headline h3{ width: 100%; margin:  0 0 10px; font-size: 2em; line-height: 1.35em ;}
         .page-headline h4{ width: 100%; margin: 0; font-size: 1.45em; }
         .page-headline::before{ width: 200px; height: 35px; top: 15px; left: calc(50% - 100px)}   

   .page-content-about{ width: 100%;}
      .about-box, .about-box-en{ width: 100%; margin: 0 0 80px;}
         .about-box-img{width: 60%; margin: 0 40% 0 0;} 
            .about-box-img img{width: 100%;}
         .about-box-text, .about-box-text-en{ width: 80%; margin: -50px 2% 0 18%; padding:0 45px 50px; font-size: 1.25em;}
            .about-box-text-title, .about-box-text-title-en{ justify-content: flex-end; width: 100%;}
               .about-box-text-title h3, .about-box-text-en h3{ width: auto; padding:15px 50px; font-size: 1.15em;}      
               .about-box-text-title h3{ margin: -30px -30px 30px 0; letter-spacing: 3px;}
               .about-box-text-title-en h3{ margin:  -30px -30px 30px 0; letter-spacing: 1px;}
      .about-slogan{ width: 100%;}
         .about-slogan-img{ width: 100%;}
            .about-slogan-img img{ width: 100%;}
         .about-slogan-text{ width: 90%; margin: 0 5%; padding: 30px 0;}
            .about-slogan-text h3{ width: 100%; margin: 0 0 15px; font-size: 1.4em;}
            .about-slogan-text p{ width: 100%; margin: 0 0 35px; font-size: 1.05em;}

   .page-content-equipment{ width: 100%;}
      .equipment-box{ width: 50%; margin: 0; padding: 20px; font-size: 1.35em;}      
         .equipment-main-img-pc{ display: inline-block;}
         .equipment-main-img-ph{ display: none;}
   .page-content-equipment-img{ width: 100%; margin: 120px 0 0;}
      .page-content-title-style{ justify-content: center; width: 100%; margin: 0 0 50px;} 
         .page-content-title-style h3{  font-size: 1.65em;}
         .content-equipment-img-box{ width: 31.3%; margin: 0 1% 30px;}
            .content-equipment-img-box h5{ width: 100%; margin: 0; padding: 10px 5px; font-size: 1.15em;}

   .content-product-title{ width: 100%; margin: 0 0 80px;}
      .content-product-title a{ padding: 8px; border-radius: 5px;}
         .options-in{ width: 29%; margin: 0 1%; border: 2px #5a8dde solid;}
         .options-out{ width: 21%; margin: 0 1%; border: 2px #5a8dde solid;}
      .content-product-title h3{ width: 100%; margin: 0 0 2px; font-size: 1.35em; line-height: 1.5em;}
      .content-product-title h4{ width: 100%; margin: 0; font-size: 1.05em; line-height: 1.35em;}
   .content-product-main{ width: 100%; margin: 0;}
      .content-product-main h1{ width: 100%; margin: 0 0 30px; font-size: 1.65em;}
      .product-main-description{ width: 100%; margin: 0 0 30px; }
         .product-main-description-img{ width: 40%; margin:  0 5% 0 0;}
            .product-main-description-img img{ width: 100%;}
         .product-main-description-text{ width: 55%; margin: 0; font-size: 1.25em;}
      .content-product-main hr{ width: 90%; height: 2px; margin: 60px 5%;}
      .product-main-other{ width: 100%;}
         .product-main-other-box{ width: 31.3%; margin: 0 1% 30px;}
            .product-main-other-box h5{ width: 100%; margin: 0; padding: 10px 5px; font-size: 1.15em;}   

   .content-contact-information{ width: 100%; margin: 0 0 60px; padding: 0 0 60px;}
      .contact-information-text{ width: 48%; margin: 0 2% 0 0; padding: 30px;}
         .contact-information-text h3{ width: 100%; margin: 0 0 35px; font-size: 1.65em;}
         .contact-information-text-box{ width: 100%; margin: 0 0 15px;}
            .contact-information-text-box span{ width: 40px; font-size: 1.45em;}
            .contact-information-text-box p{ width: calc(100% - 40px); margin: 0; font-size: 1.15em;}
      .contact-information-map{ width: 50%;}
         .contact-information-map iframe{ width: 100%; height: 40vh;}
   .content-contact-form{ width: 100%;}
      .content-contact-form form{ width: 80%; margin: 0 10%;}
      .content-contact-form form p{ width: 100%; margin: 0 0 25px;}
         .content-contact-form form p label{ width: 100%; margin: 0 0 5px; font-size: 1.25em;}
         .content-contact-form form p input{ width: 100%; padding: 8px; font-size: 1.15em;}
         .content-contact-form form p textarea{ width: 100%; height: 120px;}



   .footer-bg{ width: 100%; margin: 0; padding: 50px 25px;}
      .footer-logo{ width: 160px; margin: 0 6% 0 0;}
         .footer-logo img{ width: 100%; max-width: 80px;}
         .footer-logo h3{ width: 100%; margin: 10px 0 5px; font-size: 1.35em;}
         .footer-logo h4{ width: 100%; margin: 0 ; font-size: 1.15em;}
      .footen-information{ width: calc(45% - 80px); margin: 0 1%;}
         .footen-information-box{ width: 100%; margin: 0 0 6px;}
            .footen-information-box span{ width: 22px; margin: 0 8px 0 0; font-size: 1.25em;}
            .footen-information-box p{ width: calc(100% - 30px); margin: 0; font-size: 1.15em;}
}

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

   .top-box{ align-items: center; width: 100%; margin: 0; padding: 5px 25px;}
      .top-box-logo{ width: 250px; margin: 0;}
         .top-box-logo a{ align-items: center;}
            .top-box-logo img{ width: 60px;}
            .top-box-logo h2{ width: calc(97% - 60px); margin: 0 0 0 3%; font-size: 1.55em;}
      .top-box-operating{ width: calc(100% - 250px);}
         .top-box-search{ width: auto; margin: 0;}
            .top-box-search input{ width: 180px; margin: 0 10px 0 0; padding: 8px 15px;}
            .top-box-search a{ justify-content: center; align-items: center; width: 40px; height: 40px; font-size: 1.25em;}
            .pc-search{ display: flex;}
            .ph-search{ display: none;}
         .top-box-menu{ width: 60%; margin: -12px 5% 0 0; font-size: 1.05em;}
            .menu-br-style{display: inline-block;}

   .index-runimg{ margin: 67px 0 0;}

   .page-content{ margin: 67px auto 80px;}
}


/* 桌面版面: 1025px 到最大樣式繼承自: 行動版面和表格版面。 */
@media only screen and (min-width: 1025px) {
   .max-width-style{ width: 90%; margin: auto 5%;}

   .top-box{ width: 100%; margin: 0; padding: 10px 20px;}
      .top-box-logo{ width: 250px; margin: 0;}
         .top-box-logo a{ align-items: center;}
            .top-box-logo img{ width: 65px;}
            .top-box-logo h2{ width: calc(96% - 65px); margin: 0 0 0 4%; font-size: 1.55em;}
      .top-box-operating{ width: calc(100% - 250px);}
         .top-box-search{ width: auto; margin: 0;}
            .top-box-search input{ width: 180px; margin: 0 10px 0 0; padding: 8px 15px;}
            .top-box-search a{ justify-content: center; align-items: center; width: 40px; height: 40px; font-size: 1.25em;}
         .top-box-menu{ width: 60%; margin: -12px 5% 0 0; font-size: 1.15em;}

   .index-runimg{ margin: 65px 0 0;}
   
   .index-operation{ width: 100%; margin: 80px 0;}
      .index-operation-box{width: 31.3%; margin: 20px 1% 0;}
         .index-operation-box span{ width: 60%; margin: 0 20% 35px;}
         .index-operation-box h3{ width: 100%; margin: 10px 0; font-size: 1.65em;}
         .index-operation-box h4{ width: 100%; margin: 0; font-size: 1.25em;}

   .index-title{ width: 50%; margin: 0 25% 50px;}
      .index-title h3{ width: 100%; margin: 0 0 15px; font-size: 2em;}
      .index-title h4{ width: 100%; margin: 0; font-size: 1.35em;}

   .index-about-bg{ width: 100%; margin: 0; padding: 80px 0;}
      .index-about{text-align: center;}
         .index-about h1{ width: 100%; margin: 0 0 25px; font-size: 2.65em;}
         .index-about h3{ width: 80%; margin: 0 10%; font-size: 1.35em; line-height: 1.5em;}
   
   .button-style{width: 100%; margin: 50px 0 0;}
      .button-style a{ width: auto; padding: 10px 25px; font-size: 1.25em;}

   .index-service{ width: 100%; padding: 80px 0;}
      .index-service-box{width: 25%; margin: 30px 0 0;}
         .index-service-box-img{ width: 100%; margin: 0;}
            .index-service-box-text{ width: 80%; height: 80%; top: 10%; left: 10%;}
               .index-service-box-text h3{ width: 96%; margin: 0 2%; font-size: 5em;}
         .index-service-box-name{ width: 100%; margin: 0; padding: 20px 10px;}
            .index-service-box-name h4{ width: 100%; margin: 0 0 5px; font-size: 1.5em;}
            .index-service-box-name p{ width: 100%; margin: 0; font-size: 1.15em;}

   .index-contact{ width: 100%; margin: 0; padding: 120px 0;}
      .index-contact-text p{width: 60%; margin: 0 40% 35px 0; font-size: 1.35em;}
      .index-contact-text a{width: auto; padding: 7px 25px; font-size: 1.15em;}

   .page-content{ margin: 65px auto 80px;}
      .page-title{ width: 100%; margin: 0;}
         .page-title img{ width: 100%; z-index: 1;}
            .page-title-text{ bottom: 45%;}
               .page-title-text h3{ width: 100%; margin: 0 0 10px; font-size: 1.65em;}
               .page-title-text h4{ width: 100%; margin: 0; font-size: 1.25em;}
      .project-bg-style{ width: 100%; padding: 50px 0 ;}

      .page-headline{ width: 80%; margin: 0 10% 80px;}
         .page-headline h3{ width: 100%; margin:  0 0 10px; font-size: 2.35em; line-height: 1.35em ;}
         .page-headline h4{ width: 100%; margin: 0; font-size: 1.65em; }
         .page-headline::before{ width: 220px; height: 40px; top: 15px; left: calc(50% - 110px)}

   .page-content-about{ width: 100%;}
      .about-box, .about-box-en{ width: 100%; margin: 0 0 80px;}
         .about-box-img{width: 40%; margin: 0;} 
            .about-box-img img{width: 100%;}
         .about-box-text, .about-box-text-en{ width: 58%; padding:0 45px 50px; font-size: 1.25em;}
         .about-box-text{ margin: 0 0 0 2%;}
         .about-box-text-en{ margin: 0 2% 0 0;}
            .about-box-text-title{ justify-content: flex-end; width: 100%;}
            .about-box-text-title-en{ justify-content: flex-start; width: 100%;}
               .about-box-text-title h3, .about-box-text-en h3{ width: auto; padding:15px 50px; font-size: 1.15em;}      
               .about-box-text-title h3{ margin: -30px -30px 30px 0; letter-spacing: 3px;}
               .about-box-text-title-en h3{ margin: -30px 0 30px -30px; letter-spacing: 1px;}
      .about-slogan{ width: 100%;}
         .about-slogan-img{ width: 30%;}
            .about-slogan-img img{ width: 100%;}
         .about-slogan-text{ width: 64%; margin: 0 3%; padding: 10px 0;}
            .about-slogan-text h3{ width: 100%; margin: 0 0 15px; font-size: 1.4em;}
            .about-slogan-text p{ width: 100%; margin: 0 0 35px; font-size: 1.05em;}

   .page-content-equipment{ width: 100%;}
      .equipment-box{ width: 50%; margin: 0; padding: 25px; font-size: 1.35em;}      
   .page-content-equipment-img{ width: 100%; margin: 80px 0 0;}
      .page-content-equipment-img h3{  font-size: 1.65em;}
         .content-equipment-img-box{ width: 23%; margin: 0 1% 30px;}
            .content-equipment-img-box h5{ width: 100%; margin: 0; padding: 10px 5px; font-size: 1.15em;}

   .content-product-title{ width: 100%; margin: 0 0 80px;}
      .content-product-title a{ padding: 8px; border-radius: 5px;}
         .options-in{ width: 29%; margin: 0 1%; border: 2px #5a8dde solid;}
         .options-out{ width: 21%; margin: 0 1%; border: 2px #5a8dde solid;}
      .content-product-title h3{ width: 100%; margin: 0 0 2px; font-size: 1.65em; line-height: 1.5em;}
      .content-product-title h4{ width: 100%; margin: 0; font-size: 1.15em; line-height: 1.35em;}
   .content-product-main{ width: 100%; margin: 0;}
      .content-product-main h1{ width: 100%; margin: 0 0 35px; font-size: 2em;}
      .product-main-description{ width: 100%; margin: 0 0 30px; }
         .product-main-description-img{ width: 40%; margin:  0 5% 0 0;}
            .product-main-description-img img{ width: 100%;}
         .product-main-description-text{ width: 55%; margin: 0; font-size: 1.45em;}
      .content-product-main hr{ width: 90%; height: 2px; margin: 80px 5%;}
      .product-main-other{ width: 100%;}
         .product-main-other-box{ width: 23%; margin: 0 1% 30px;}
            .product-main-other-box h5{ width: 100%; margin: 0; padding: 10px 5px; font-size: 1.15em;}   

   .content-contact-information{ width: 100%; margin: 0 0 80px; padding: 0 0 80px;}
      .contact-information-text{ width: 45%; margin: 0 5% 0 0; padding: 35px;}
         .contact-information-text h3{ width: 100%; margin: 0 0 35px; font-size: 1.85em;}
         .contact-information-text-box{ width: 100%; margin: 0 0 15px;}
            .contact-information-text-box span{ width: 40px; font-size: 1.45em;}
            .contact-information-text-box p{ width: calc(100% - 40px); margin: 0; font-size: 1.15em;}
      .contact-information-map{ width: 50%;}
         .contact-information-map iframe{ width: 100%; height: 40vh;}
   .content-contact-form{ width: 100%;}
      .content-contact-form form{ width: 60%; margin: 0 20%;}
      .content-contact-form form p{ width: 100%; margin: 0 0 25px;}
         .content-contact-form form p label{ width: 100%; margin: 0 0 5px; font-size: 1.25em;}
         .content-contact-form form p input{ width: 100%; padding: 8px; font-size: 1.15em;}
         .content-contact-form form p textarea{ width: 100%; height: 120px;}


   .footer-bg{ width: 100%; margin: 0; padding: 50px 20px;}
      .footer-logo{ width: 180px; margin: 0 8% 0 0;}
         .footer-logo img{ width: 100%; max-width: 90px;}
         .footer-logo h3{ width: 100%; margin: 10px 0 5px; font-size: 1.35em;}
         .footer-logo h4{ width: 100%; margin: 0; font-size: 1.05em;}
      .footen-information{ width: calc(44% - 90px); margin: 0 1%;}
         .footen-information-box{ width: 100%; margin: 0 0 8px;}
            .footen-information-box span{ width: 30px; margin: 0 10px 0 0; font-size: 1.25em;}
            .footen-information-box p{ width: calc(100% - 40px); margin: 0; font-size: 1.05em;}
}

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

   .top-box{ width: 100%; margin: 0; padding: 10px 25px;}
      .top-box-logo{ width: 235px; margin: 0;}
         .top-box-logo a{ align-items: center;}
            .top-box-logo img{ width: 60px;}
            .top-box-logo h2{ width: calc(96% - 60px); margin: 0 0 0 4%; font-size: 1.45em;}
      .top-box-operating{ width: calc(100% - 235px);}
         .top-box-search{ width: auto;}
            .top-box-search input{ width: 160px; margin: 0 10px 0 0; padding: 8px 14px;}
            .top-box-search a{ justify-content: center; align-items: center; width: 40px; height: 40px; font-size: 1.25em;}
         .top-box-menu{ width: 60%; margin: 0 3% 0 0; font-size: 1.1em;}


   .menu-br-style{display: none;}

   .index-runimg{ margin: 73px 0 0;}

   .page-content{ margin: 73px auto 80px;}
            .page-title-text{ bottom: 45%;}
               .page-title-text h3{ width: 100%; margin: 0 0 10px; font-size: 1.85em;}
               .page-title-text h4{ width: 100%; margin: 0; font-size: 1.35em;}

   

   .page-content-about{ width: 100%;}
      .about-box, .about-box-en{ width: 100%; margin: 0 0 80px;}
         .about-box-img{width: 50%; margin: 0;} 
            .about-box-img img{width: 100%;}
         .about-box-text, .about-box-text-en{ width: 48%; padding:0 60px 50px; font-size: 1.35em;}
         .about-box-text{ margin: 0 0 0 2%;}
         .about-box-text-en{ margin: 0 2% 0 0;}
            .about-box-text-title{ justify-content: flex-end; width: 100%;}
            .about-box-text-title-en{ justify-content: flex-start; width: 100%;}
               .about-box-text-title h3, .about-box-text-en h3{ width: auto; padding:15px 50px; font-size: 1.25em;}      
               .about-box-text-title h3{ margin: -30px -30px 30px 0; letter-spacing: 3px;}
               .about-box-text-title-en h3{ margin: -30px 0 30px -30px; letter-spacing: 1px;}
      .about-slogan{ width: 100%;}
         .about-slogan-img{ width: 40%;}
            .about-slogan-img img{ width: 100%;}
         .about-slogan-text{ width: 54%; margin: 0 3%;}
            .about-slogan-text h3{ width: 100%; margin: 0 0 15px; font-size: 1.65em;}
            .about-slogan-text p{ width: 100%; margin: 0 0 35px; font-size: 1.15em;}

      
            .contact-information-text{padding: 50px;}

   .footer-logo{ width: 200px; margin: 0 20% 0 0;}
   .footen-information{ width: calc(38% - 100px); margin: 0 1%;}   
      .footen-information-box{ width: 100%; margin: 0 0 10px;}
         .footen-information-box span{font-size: 1.35em;}
         .footen-information-box p{font-size: 1.15em;}
}


@media only screen and (min-width: 1441px) {
   .max-width-style{ width: 1440px; margin: auto calc(50% - 720px);}

   .top-box{ width: 100%; margin: 0; padding: 10px 25px;}
      .top-box-logo{ width: 280px; margin: 0;}
         .top-box-logo a{ align-items: center;}
            .top-box-logo img{ width: 80px;}
            .top-box-logo h2{ width: calc(96% - 80px); margin: 0 0 0 4%; font-size: 1.65em;}
      .top-box-operating{ width: calc(100% - 280px);}
         .top-box-search{ width: auto;}
            .top-box-search input{ width: 200px; margin: 0 10px 0 0; padding: 8px 18px;}
            .top-box-search a{ justify-content: center; align-items: center; width: 40px; height: 40px; font-size: 1.25em;}
         .top-box-menu{ width: 60%; margin: 0 5% 0 0; font-size: 1.35em;}

   .index-runimg{ margin: 82px 0 0;}

   .page-content{ margin: 82px auto 80px;}

      .content-equipment-img-box h5{ font-size: 1.25em;}
}

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

   .top-box{ width: 100%; margin: 0; padding: 10px 25px;}
      .top-box-logo{ width: 330px; margin: 0;}
         .top-box-logo a{ align-items: center;}
            .top-box-logo img{ width: 90px;}
            .top-box-logo h2{ width: calc(95% - 90px); margin: 0 0 0 5%; font-size: 1.85em;}
      .top-box-operating{ width: calc(100% - 330px);}
         .top-box-search{ width: auto; margin: 0;}
            .top-box-search input{ width: 200px; margin: 0 10px 0 0; padding: 8px 18px;}
            .top-box-search a{ justify-content: center; align-items: center; width: 40px; height: 40px; font-size: 1.25em;}
         .top-box-menu{ width: 60%; margin: 0 5% 0 0; font-size: 1.45em;}

   .index-runimg{ margin: 87px 0 0;}

   .page-content{ margin: 87px auto 80px;}
}

@media only screen and (min-width: 1920px) {
   .top-box{ width: 100%; margin: 0; padding: 10px 25px;}
      .top-box-logo{ width: 400px; margin: 0;}
         .top-box-logo a{ align-items: center;}
            .top-box-logo img{ width: 110px;}
            .top-box-logo h2{ width: calc(95% - 110px); margin: 0 0 0 5%; font-size: 2.35em;}
      .top-box-operating{ width: calc(100% - 400px);}
         .top-box-search{ width: auto; margin: 0;}
            .top-box-search input{ width: 220px; margin: 0 10px 0 0; padding: 8px 18px;}
            .top-box-search a{ justify-content: center; align-items: center; width: 40px; height: 40px; font-size: 1.45em;}
         .top-box-menu{ width: 60%; margin: 0 5% 0 0; font-size: 1.85em;}

}



/*totop*/
#gotop { display: none;  position: fixed; width:50px;  right: 5px;  bottom: 3px; z-index:9100; transition: 0.3s ease-in-out;}
   #gotop img{ width:100%; margin-bottom:5px; opacity: 0.6;}
   #gotop img:hover{ opacity: 1;}
  #gotop-icon{ cursor: pointer;}
@media only screen and (max-width: 531px) {
   #gotop { width: 40px;}
}