@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;}

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

header{ position: fixed; top: 0; width: 100%; padding:10px 0; background-color: #2E1B13; z-index: 100000;}
   .top-box{ align-items:center;}
      .top-logo{width: 50px; margin: 0 10px;}
         .top-logo img{width: 100%;}
         .pc-logo-style{display: none;}
         .ph-logo-style{ display: inline-block;}
      .top-operating{flex-direction: reverse; justify-content: flex-end; align-items:center; width: calc(100% - 70px); margin: 0;}
         .top-icon{ width:120px; margin: 0 10px 0 0;}
            .top-icon a{ width: 34px; margin: 0 6px 0 0; text-align: center; color: #FEFEFE; text-decoration: none; transition: 0.2s ease-in-out;}
               .top-icon a:hover{ color: #a48b77;}
            .top-icon i{ font-size: 2.3em;}
         .top-menu{ width: 50px;}
.top-distance{ float: left; width: 100%; height: 20px; margin-top: 79px;}
.index-runimg{ width: 100%; margin-top: 84px;}
   .index-runimg ul{list-style: none outside none; padding-left: 0; margin: 0;}
   .index-runimg .content-slider li{ background-color: #66677c; text-align: center; color: #FFF;}

.index-title-box{ width: 100%; margin: 0 0 10px; align-items: flex-end;}
   .index-title-box h3{ width: auto; margin: 0 20px 0 0; font-size: 1.65em; font-weight: bolder; letter-spacing: 2px; color: #333;}
   .index-title-box h4{ width: auto; margin: 0; font-size: 1.25em; letter-spacing: 1px; color: #999;}

.index-button{ width: 100%; margin: 0 0 8px; justify-content: flex-end; text-align: right;}

.index-information-bg{ width: 100%; margin: 50px 0; padding: 30px 0; background-attachment: fixed; background-repeat: no-repeat; background-position: center center; background-image: url(../images/index-news-bg-ph.jpg);}
   .index-information-style{ align-items:center; }
      .index-news{ width: 100%; margin-right: 0; padding: 30px 2% ; box-sizing: border-box; border-right:none; border-bottom: 1px #a48b77 solid;}
         .index-news-content{ width: 100%;}
         .index-news-content a{ width: 100%; padding: 15px 0;  align-items: center; transition: 0.3s ease-in-out;}
         .index-news-content a:not(:last-child){ border-bottom: 1px #FEFEFE solid;}
            .index-news-content a:visited{text-decoration: none;}
            .index-news-content a:hover{ background: rgba(211, 157, 71, 0.2); text-decoration: none;} 
            .index-news-img{ width: 80px; margin:  0 15px; overflow: hidden;}
               .index-news-img img{ width: 100%; border:1px #C7B7AB solid; transition: 0.2s ease-in-out;}
               .index-news-content a:hover > .index-news-img img{transform: scale(1.05);}
            .index-news-text{ width: calc(100% - 110px);}
               .index-news-text h6{ width: 80px; margin: 0 calc(100% - 80px) 8px 0; padding:6px 0 5px; text-align: center; font-size: 0.85em; font-weight: bolder; letter-spacing: 1px; color: #FEFEFE; background-color: #999;}
               .index-news-text p{ width: 100%; margin: 0; font-size: 1em; color: #40210f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
      .index-about{ width: 100%; padding: 50px 2%; box-sizing: border-box; border-left:none;}
         .index-about span{ float: left; width: 100%; margin:20px 0;}
            .index-about img{width: 100%;}
         .index-about p{ width: 100%; margin: 30px 0; font-size: 1em; letter-spacing: 1px; color: #666;}

.index-project{ align-items: center; width: 100%; margin: 35px 0;}
   .index-project a{ float: left; width: calc(50% - 20px); margin:15px 10px; text-align: center; position: relative; font-size: 1em; letter-spacing: 1px; line-height: 3.2em; color: #666; transition: 0.3s ease-in-out; z-index: 3;}
      .index-project a::before,  .index-project a::after{ position: absolute; content: ""; width: 100%; height: 100%; border-radius: 5px; transition: 0.2s ease-in-out;}
      .index-project a::before{ top: -5px; left: 4px; border: 1px #DDD solid; z-index: -1;}
      .index-project a::after{ bottom: -5px; left: -4px; background-color: #EEE; z-index: -2;}
      .index-project a:visited{ text-decoration: none; color: #666;}
      .index-project a:hover{ text-decoration: none; color: #FFF; font-weight: bolder;}
      .index-project a:hover::before{ top: 0; left: 0; border: 1px #FFF solid; border-radius: 20px;}
      .index-project a:hover::after{ bottom: 0; left: 0; background-color: #d39d47; border-radius: 20px;  box-shadow:0px 0px 3px #40210f;}

.page-content{ width: 100%; margin: 0 0 30px;}
   .page-title{ justify-content: center; width: 100%; margin: 0 0 20px; text-align: center; overflow: hidden;}
      .page-title div {width: auto;}
         .page-title h1{ width: auto; margin:  0; padding: 15px 45px 25px; font-size: 1.65em; letter-spacing: 1px; font-weight: bolder; color: #333; border: 1px #DDD solid; border-radius: 4px;}
         .page-title h4{ width: auto; margin: -15px 10% 0; padding: 15px 0 0; font-size: 1em; letter-spacing: 2px; color: #AAA; background-color: #FFF;  border-top: 2px #A48B77 solid; }
   .page-path{ align-items: center; width: 100%; margin: 0 0 5px;}
      .page-path a{ width: auto; margin: 0; font-size: 0.95em; font-weight: bolder; letter-spacing: 1px; color: #d39d47; text-decoration: underline;}
         .page-path a:visited{ color: #d39d47;}
         .page-path a:hover{ color: #4799d3; text-decoration: none;}
      .page-path h6{ width: auto; margin:0 12px ; font-size: 0.7em; color: #CCC;}
      .page-path h5{ width: auto; font-size: 0.95em; color: #666;}

   .page-news, .page-news-content{ width: 100%; margin: 10px 0 0;}
      .page-news-box{ align-items: center; width: 100%; padding: 35px 0; border-bottom: 1px #a48b77 solid; transition: 0.2s ease-in-out;}
         .page-news-box:hover{ background-color: #F3F3F3;}
         .page-news-img{ width: 100%; margin: 0 0 20px; overflow: hidden;}
            .page-news-img img{ width: 100%; border: 1px #EFEFEF solid; transition: 0.3s ease-in-out;}
            .page-news-img a:hover > img{transform: scale(1.05);}
         .page-news-text{ width: 100%; margin: 0;}
            .page-news-text h2{ width: 100%; margin: 0; font-size: 1.35em; font-weight: bolder; letter-spacing: 1px; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
            .page-news-text h6{ width: 100%; margin: 10px 0; font-size: 0.85em; font-weight: bolder; letter-spacing: 1px; color: #AAA;}
            .page-news-text p{ width: 100%; margin: 0; font-size: 1em; color: #666; line-height: 1.35em; overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
            .news-button{ justify-content: flex-end; width: 100%; margin: 10px 0 0; font-size: 0.95em;} 
      .page-news-content h2{ width: 100%; margin: 0; font-size: 1.35em; font-weight: bolder; color: #333; line-height: 1.35em;}   
      .page-news-content h6{ width: 100%; margin: 20px 0; font-size: 1em; letter-spacing: 1px; color: #AAA;}
      .page-news-content p{ width: 100%; margin: 0;}
      .page-news-content img{ width: auto; max-width: 100%; display:block; margin:auto;}
      .news-page-button{ justify-content: center; width: 100%; margin: 10px 0 0; font-size: 0.95em;}       
   
   .page-number{ width: 100%; margin: 25px 0 0;}

   .page-about{ width: 100%; margin: 0;}
      .about-img { width: 100%; margin: 0 0 25px;}
         .about-img img{ width: auto; max-width: 100%; display:block; margin:auto;}
      .page-about p{ width: 100%; font-size: 1.05em; letter-spacing: 1px; color: #666; }

   .page-product{ width: 100%; margin: 0;}
      .product-item{ justify-content: flex-start; width: 100%; margin: 0 0 20px;}
         .product-item p, .product-item a{ float: left; width: auto; margin: 0 5px 8px; padding: 8px 12px ; white-space: nowrap; font-size: 1em; letter-spacing: 1px; border-radius: 4px;}
         .product-item p{ color: #333; border: 1px #DDD solid;}
         .product-item a{ color: #FFF; background-color: #d39d47; transition: 0.2s ease-in-out;} 
            .product-item a:visited{ color: #FFF;}
            .product-item a:hover{ background-color: #4799d3; text-decoration: none;}
      .product-project{ align-items: stretch; width: 100%; margin: 0;}
         .product-project a{ width: 48%; margin:  0 1% 20px;}
            .product-project a:hover{text-decoration: none;}
         .product-project-box{ width: 100%; margin: 0; padding: 12px 6px; box-sizing: border-box; border: 1px #F0F0F0 solid; transition: 0.3s ease-in-out;}
            .product-project-box:hover{ background-color: #f2e9e1; border: 1px #d39d47 solid;}
            .product-project-box img{ width: 100%;}
            .product-project-box h3{ width: 100%; margin: 15px 0 0; text-align: center; font-size: 1em; letter-spacing: 1px; color: #d39d47; transition: 0.3s ease-in-out;}   
               .product-project-box:hover > h3{ color: #666;}
      .product-content{ align-items: flex-start; width: 100%; margin: 0;}
         .product-content-img{ width: 100%; margin: 0 0 20px;}
         .product-content-text{ align-items: stretch; width: 100%; margin: 0 ; padding: 20px; box-sizing: border-box;}
            .product-content-text h1{ width: 100%; margin: 0 0 15px; font-size: 1.45em; font-weight: bolder; letter-spacing: 1px; color: #333;}
            .product-content-text span{ width: 90px; margin: 0 5px 10px 0; font-size: 1.05em; font-weight: bolder; letter-spacing: 1px; color: #666;}
            .product-content-text p{ width: calc(100% - 95px); margin: 0 0 10px; font-size: 1.05em; color: #666;}
      .product-content-description{ width: 100%; margin: 50px 0; padding: 50px 0; border-top: 1px #AAA solid; border-bottom: 1px #AAA solid;}
         .product-title{ width: 100%; margin: 0 0 20px; padding: 4px 0 0 15px; font-size: 1.35em; font-weight: bolder; letter-spacing: 2px; color: #a48b77; border-left: 6px #d39d47 solid ;}
         .product-content-description-box{ width: 96%; margin: 0 2%; font-size: 1em; line-height: 1.35em; letter-spacing: 1px; color: #666;}
      .product-content-form{ width: 100%;}
         .product-content-form form{ width: 96%; margin: 0 2%;}
            .product-content-form p{ align-items: center; width: 100%; margin: 0 0 15px; font-size: 1.25em;}
            .product-content-form  label{ margin: 0 0 5px; font-size: 0.8em; font-weight: normal; color: #666;}
            .product-content-form  input, .product-content-form  textarea{ width: 100%; padding: 8px; border-radius: 3px; border: 1px #DDD solid; font-size: 0.8em;}
            .product-content-form  textarea{ height: 80px;}

   .page-calculation{ width: 100%; margin:30px 0;}
      .page-calculation img{ width: 100%;}

      .calculation-table{ width: 90%; margin:  0 5% 50px;}
         .calculation-table-enter{ align-items: center; width: 100%; margin:0 0 25px;}
            .calculation-table-enter-title{ width: 100%; margin: 0 0 5px; text-align: left; font-size: 1.15em; color: #666;}
            .calculation-table-enter-box{ width: 100%;}
               .calculation-table-enter-box select{ width: 100%; padding:8px 6px; font-size: 1.15em; border: none; border-bottom: 1px #DDD solid; background-color: #F3F3F3;}
            .calculation-table-enter-box2{ width: 100%; padding: 8px 6px; border: none; font-size: 1.15em; border-bottom: 1px #DDD solid; background-color: #F3F3F3;}
               .calculation-table-enter-box2 input{ width: calc(100% - 40px); margin: 0; padding: 0; background: none; border: none;}
               .calculation-table-enter-box2 span{ width: 40px; text-align: right;}
               .calculation-table-enter p{ width: 100%; margin: 4px 0 0; font-size: 1em; color: #F00;}
                  .calculation-table-enter-box2-left{ width: 70%; padding-right: 2%; border-right: 1px #333 solid;}
                  .calculation-table-enter-box2-right{ width: 30%; padding-left: 2%;}
               #customize-select{ width: 100%; margin: 15px 0 0;}
      .calculation-result{ align-items: center; width: 100%;}
         .calculation-result-box{ width: 80%; margin: 0 10% 30px;}
            .calculation-result-chart{ width: 100%; position: relative;}
               .calculation-result-chart-text{ width: 100%; position: absolute; top:35%; z-index: 3; text-align: center; font-size: 1.15em; color: #666;}
            .calculation-result-box-text{ justify-content: center; width: 100%; margin: 5px 0; font-size: 1.15em; color: #666;}
               .calculation-result-box-text p{ width: 15px; height: 15px; margin: 3px 8px 0 0;}
         .calculation-result-button{ justify-content: center; width: 100%; margin:20px 0 0;}

      .calculation-convert{ width: 80%; margin: 0 10%;}
   
   .page-contact{ align-items: center; width: 100%; margin:30px 0 0;}
      .contact-text{ width: 100%; margin:0 0 35px;  padding: 0 0 35px; border-right:none; border-bottom: 1px #40210f solid;}
         .contact-text p{ width: 100%; margin: 0 0 20px; font-size: 1.15em; letter-spacing: 1px; color: #666;}
         .contact-text a{ color: #666; text-decoration: underline; transition: 0.2s ease-in-out;}
         .contact-text a:visited{ color: #666;}
         .contact-text a:hover{ color: #4799d3; text-decoration: none;}
         .contact-text iframe{ width: 100%; height: 30vh; margin: 15px 0;}
      .contact-form{ width: 100%; padding:0; border-left:none;}
         .contact-form form{ width: 96%; margin: 0 2%;}
            .contact-form p{ align-items: center; width: 100%; margin: 0 0 15px; font-size: 1.25em;}
            .contact-form label{ margin: 0 0 5px; font-size: 0.8em; font-weight: normal; color: #666;}
            .contact-form input, .contact-form  textarea{ width: 100%; padding: 8px; border-radius: 3px; border: 1px #DDD solid; font-size: 0.8em;}
            .contact-form textarea{ height: 80px;}



.footer{ width: 100%; margin: 0; padding: 20px 0; background-color: #2E1B13;}
   .footer-box{ align-items: center;}
      .footer-text{ width: 100%; margin: 0;}
         .footer-information{ justify-content: center; width: 100%; margin: 0 0 8px; }
            .footer-information p{ width: auto; margin: 0 10px 6px; font-size:0.95em; color: #FFF; white-space: nowrap;}
            .footer-information i{ margin-right: 5px; font-size: 1.15em; font-weight: bolder; color: #d39d47;}
            .footer-information a{ color: #FFF; text-decoration: underline;}
            .footer-information a:visited{ color: #FFF;}
            .footer-information a:hover{ color: #C7B7AB; text-decoration: none;}
         .footer-copyright{ width: 100%; font-size: 0.7em; color: #AAA; text-align: center;}

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

   header{padding:15px 0;}
      .top-box{ align-items:center;}
         .top-logo{width: 49%; margin: 0 1% 0 0;}
            .pc-logo-style{display: inline-block;}
            .ph-logo-style{ display: none;}
         .top-operating{width: 49%; margin:0 0 0 1%;}
            .top-icon{ width:120px; margin: 0 10px 0 0;}
               .top-icon a{ width: 34px; margin: 0 6px 0 0;}
               .top-icon i{ font-size: 2.3em;}
            .top-menu{ width: 50px;}
   .top-distance{ width: 100%; margin-top: 88px;}
   .index-runimg{margin-top: 84px;}

   .index-title-box{ width: 100%; margin: 0 0 20px;}
      .index-title-box h3{ width: auto; margin: 0 20px 0 0; font-size: 1.65em;}
      .index-title-box h4{ width: auto; margin: 0; font-size: 1.35em;}

   .index-button{ width: 100%; margin: 0 0 10px;}

   .index-information-bg{ width: 100%; margin: 80px 0; padding: 30px 0;}
      .index-information-style{ align-items:center; }
         .index-news{ width: 100%; margin-right: 0; padding: 50px 2%;}
            .index-news-content{ width: 100%;}
            .index-news-content a{ width: 100%; padding: 15px 0;}
               .index-news-img{ width: 80px; margin:  0 15px;}
               .index-news-text{ width: calc(100% - 110px);}
                  .index-news-text h6{ width: 100px; margin: 0 calc(100% - 100px) 12px 0; padding:8px 0 6px; font-size: 0.9em;}
                  .index-news-text p{ width: 100%; margin: 0; font-size: 1.05em;}
         .index-about{ width: 100%; padding: 50px 10%;}
            .index-about p{ width: 100%; margin: 25px 0; font-size: 1.05em;}

   .index-project{ width: 100%; margin: 50px 0;}
      .index-project a{ width: calc(25% - 30px); margin: 0 15px; font-size: 1.05em; line-height: 3.6em;}
         .index-project a::before{ top: -6px; left: 8px;}
         .index-project a::after{ bottom: -6px; left: -8px;}   
   
   .page-content{ width: 100%; margin: 0 0 50px;}
      .page-title{ width: 100%; margin: 0 0 30px;}
         .page-title div {width: auto;}
            .page-title h1{ width: auto; margin:  0; padding: 15px 45px 20px; font-size: 1.65em; }
            .page-title h4{ width: auto; margin: -15px 10% 0; padding: 15px 0 0; font-size: 1.05em; }
      .page-path{ align-items: center; width: 100%; margin: 0 0 20px;}
         .page-path a{ width: auto; margin: 0; font-size: 0.95em;}
         .page-path h6{ width: auto; margin:0 12px ; font-size: 0.7em;}
         .page-path h5{ width: auto; font-size: 0.95em;}

      .page-news, .page-news-content{ width: 100%; margin: 25px 0 0;}
         .page-news-box{ align-items: center; width: 100%; padding: 30px 20px;}
            .page-news-img{ width: 25%; margin: 0 5% 0 0;}
            .page-news-text{ width: 70%; margin: 0;}
               .page-news-text h2{ width: 100%; margin: 0; font-size: 1.45em;}
               .page-news-text h6{ width: 100%; margin: 12px 0; font-size: 0.95em;}
               .page-news-text p{ width: 100%; margin: 0; font-size: 1.05em;}
               .news-button{ width: 100%; margin: 10px 0 0; font-size: 0.9em;} 
         .page-news-content h2{ width: 100%; margin: 0; font-size: 1.85em; line-height: 2em;}   
         .page-news-content h6{ width: 100%; margin: 0 0 40px; font-size: 1.05em;}
         .news-page-button{ width: 100%; margin: 10px 0 0; font-size: 0.95em;} 
      
      .page-number{ width: 100%; margin: 40px 0 0;}

      .page-about{ width: 100%; margin: 0;}
         .about-img { width: 100%; margin: 0 0 35px;}
         .page-about p{ width: 100%; font-size: 1.15em;}

      .page-product{ width: 100%; margin: 0;}
         .product-item{ justify-content: center; width: 100%; margin: 0 0 35px;}
            .product-item p, .product-item a{ margin: 0 8px 10px; padding: 10px 15px 8px; font-size: 1.05em;}
         .product-project{ width: 100%; margin: 0;}
            .product-project a{ width: 31%; margin:  0 1% 25px;}
            .product-project-box{ padding: 15px 10px;}
               .product-project-box h3{ width: 100%; margin: 15px 0 0; font-size: 1.05em;}  

      .page-product{ width: 100%; margin: 0;}
         .product-item{ width: 100%; margin: 0 0 50px;}
            .product-item p, .product-item a{ margin: 0 10px 10px; padding: 12px 20px 8px; font-size: 1.15em;}
         .product-project{ width: 100%; margin: 0;}
            .product-project a{ width: 23%; margin:  0 1% 30px;}
            .product-project-box{ padding: 15px 10px;}
               .product-project-box h3{ width: 100%; margin: 15px 0 0; font-size: 1.05em;} 
         .product-content{ width: 100%; margin: 0;}
            .product-content-img{ width: 100%; margin: 0 0 30px;}
            .product-content-text{ width: 100%; margin: 0 ; padding: 25px;}
               .product-content-text h1{ width: 100%; margin: 0 0 20px; font-size: 1.65em;}
               .product-content-text span{ width: 100px; margin: 0 10px 15px 0; font-size: 1.25em;}
               .product-content-text p{ width: calc(100% - 110px); margin: 0 0 15px; font-size: 1.25em;}
         .product-content-description{ width: 100%; margin: 60px 0; padding: 60px 0;}
            .product-title{ width: 100%; margin: 0 0 30px; padding: 4px 0 0 15px; font-size: 1.45em; }
            .product-content-description-box{ width: 96%; margin: 0 2%; font-size: 1.15em; line-height: 1.65em;}
         .product-content-form{ width: 100%;}
            .product-content-form form{ width: 80%; margin: 0 10%;}
               .product-content-form p{ width: 100%; margin: 0 0 15px; font-size: 1.25em;}
               .product-content-form  label{ margin: 0 0 5px; font-size: 0.8em;}
               .product-content-form  input, .product-content-form  textarea{ width: 100%; padding: 8px; font-size: 0.8em;}
               .product-content-form  textarea{ height: 120px;}  

      .page-calculation{ width: 100%; margin:50px 0;}

      .calculation-table{ width: 90%; margin:  0 5% 80px;}
         .calculation-table-enter{ width: 100%; margin:0 0 25px;}
            .calculation-table-enter-title{ width: 70px; margin:  0 10px 0 0; text-align: right; font-size: 1.15em;}
            .calculation-table-enter-box{ width: calc(100% - 80px);}
               .calculation-table-enter-box select{ width: 100%; padding:12px 8px; font-size: 1.15em;}
            .calculation-table-enter-box2{ width: calc(100% - 80px); padding: 12px 8px; font-size: 1.15em;}
               .calculation-table-enter-box2 input{ width: calc(100% - 40px); margin: 0; padding: 0;}
               .calculation-table-enter-box2 span{ width: 40px;}
               .calculation-table-enter p{ width: calc(100% - 80px); margin: 8px 0 0 80px; font-size: 1em;}
                  .calculation-table-enter-box2-left{ width: 70%; padding-right: 2%;}
                  .calculation-table-enter-box2-right{ width: 30%; padding-left: 2%;}
               #customize-select{ width: calc(100% - 80px); margin: 15px 0 0 80px;}
      .calculation-result{ width: 100%;}
         .calculation-result-box{ width: 48%; margin: 0 1%;}
            .calculation-result-box-text{ width: 100%; margin: 10px 0; font-size: 1.15em;}
               .calculation-result-box-text p{ width: 15px; height: 15px; margin: 3px 8px 0 0;}
         .calculation-result-button{ width: 100%; margin:20px 0 0;}

      .calculation-convert{ width: 80%; margin: 0 10%;}
   
      .page-contact{ width: 100%; margin: 0;}
         .contact-text{ width: 80%; margin:0 10% 50px;  padding: 0 0 50px;}
            .contact-text p{ width: 100%; margin: 0 0 20px; font-size: 1.15em;}
            .contact-text iframe{ width: 100%; height: 30vh; margin: 15px 0;}
         .contact-form{ width: 100%; padding: 15px 0 15px 5%;}
            .contact-form form{ width: 70%; margin: 0 15%;}
               .contact-form p{ width: 100%; margin: 0 0 15px; font-size: 1.25em;}
               .contact-form label{ margin: 0 0 5px; font-size: 0.8em;}
               .contact-form input, .contact-form  textarea{ width: 100%; padding: 8px; font-size: 0.8em;}
               .contact-form textarea{ height: 120px;}

         

   .footer{ width: 100%; margin: 0; padding: 20px 0;}
         .footer-text{ width: 100%; margin: 0;}
            .footer-information{ width: 100%; margin: 0 0 8px; }
               .footer-information p{ width: auto; margin: 0 15px 10px 0; font-size:0.95em;}
               .footer-information i{ margin-right: 5px; font-size: 1.15em;}
            .footer-copyright{ width: 100%; font-size: 0.8em;}
}


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

   header{padding:8px 0 0;}
      .top-box{ align-items:center;}
         .top-logo{width: 50%; margin: 0 50% 0 0;}
         .top-operating{flex-direction: row-reverse;  justify-content: space-between; width: 100%; margin: -30px 0 0;}
            .top-icon{ width:123px; margin: -15px 0 15px calc(100% - 123px);}
               .top-icon a{ width: 35px; margin: 0 3px;}
               .top-icon i{ font-size: 2.3em;}
            .top-menu{ width: 100%;}
   .top-distance{ width: 100%; margin-top: 109px;}
   .index-runimg{margin-top: 114px;}
}

/* 桌面版面: 767px 到1024繼承自: 行動版面和表格版面。 */
@media only screen and (min-width: 767px) {

   .index-title-box{ width: 100%; margin: 0 0 20px;}
      .index-title-box h3{ width: auto; margin: 0 20px 0 0; font-size: 1.65em;}
      .index-title-box h4{ width: auto; margin: 0; font-size: 1.35em;}

   .index-button{ width: 100%; margin: 0 0 10px;}

   .index-information-bg{ width: 100%; margin: 120px 0; padding: 50px 0; background-size: cover; background-attachment: fixed; background-image: url(../images/index-news-bg.jpg);}
      .index-information-style{ align-items:center; }
         .index-news{ width: 65%; margin-right: -1px; padding: 20px 2% 20px 0; border-right: 1px #a48b77 solid; border-bottom: none;}
            .index-news-content{ width: 100%;}
            .index-news-content a{ width: 100%; padding: 15px 0;}
               .index-news-img{ width: 80px; margin:  0 15px;}
               .index-news-text{ width: calc(100% - 110px);}
                  .index-news-text h6{ width: 100px; margin: 0 calc(100% - 100px) 12px 0; padding:8px 0 6px; font-size: 0.9em;}
                  .index-news-text p{ width: 100%; margin: 0; font-size: 1.15em;}
         .index-about{ width: 35%; padding: 20px 0 20px 2%; border-left: 1px #a48b77 solid;}
            .index-about p{ width: 100%; margin: 30px 0; font-size: 1.15em;}

   .index-project{ width: 100%; margin: 80px 0;}
      .index-project a{ width: calc(25% - 30px); margin: 0 15px; font-size: 1.25em; line-height: 3.8em;}
         .index-project a::before{ top: -8px; left: 8px;}
         .index-project a::after{ bottom: -8px; left: -8px;}   
   
   .page-content{ width: 100%; margin: 20px 0 80px;}
      .page-title{ width: 100%; margin: 0 0 50px;}
         .page-title div {width: auto;}
            .page-title h1{ width: auto; margin:  0; padding: 15px 45px 20px; font-size: 1.85em; }
            .page-title h4{ width: auto; margin: -15px 10% 0; padding: 15px 0 0; font-size: 1.15em; }
      .page-path{ align-items: center; width: 100%; margin: 0 0 20px;}
         .page-path a{ width: auto; margin: 0; font-size: 1.05em;}
         .page-path h6{ width: auto; margin:0 12px ; font-size: 1em;}
         .page-path h5{ width: auto; font-size: 1.05em;}

      .page-news, .page-news-content{ width: 100%; margin: 30px 0 0;}
         .page-news-box{ align-items: center; width: 100%; padding: 35px 20px;}
            .page-news-img{ width: 20%; margin: 0 5% 0 0;}
            .page-news-text{ width: 75%; margin: 0;}
               .page-news-text h2{ width: 100%; margin: 0; font-size: 1.65em;}
               .page-news-text h6{ width: 100%; margin: 10px 0 30px; font-size: 1.05em;}
               .page-news-text p{ width: 100%; margin: 0; font-size: 1.15em;}
               .news-button{ width: 100%; margin: 30px 0 0; font-size: 0.95em;} 
         .page-news-content h2{ width: 100%; margin: 0; font-size: 2em; line-height: 2.3em;}   
         .page-news-content h6{ width: 100%; margin: 0 0 50px; font-size: 1.15em;}
         .news-page-button{ width: 100%; margin: 10px 0 0; font-size: 0.95em;} 
      
      .page-number{ width: 100%; margin: 50px 0 0;}

      .page-about{ width: 100%; margin: 0;}
         .about-img { width: 100%; margin: 0 0 50px;}
         .page-about p{ width: 100%; font-size: 1.15em;}

      .page-product{ width: 100%; margin: 0;}
         .product-item{ width: 100%; margin: 0 0 50px;}
            .product-item p, .product-item a{ margin: 0 10px 10px; padding: 12px 20px 8px; font-size: 1.15em;}
         .product-project{ width: 100%; margin: 0;}
            .product-project a{ width: 23%; margin:  0 1% 30px;}
            .product-project-box{ padding: 15px 10px;}
               .product-project-box h3{ width: 100%; margin: 15px 0 0; font-size: 1.05em;} 
         .product-content{ width: 100%; margin: 0;}
            .product-content-img{ width: 53%; margin: 0 2% 0 0;}
            .product-content-text{ width: 45%; margin: 0 ; padding: 25px;}
               .product-content-text h1{ width: 100%; margin: 0 0 20px; font-size: 1.65em;}
               .product-content-text span{ width: 100px; margin: 0 10px 15px 0; font-size: 1.25em;}
               .product-content-text p{ width: calc(100% - 110px); margin: 0 0 15px; font-size: 1.25em;}
         .product-content-description{ width: 100%; margin: 60px 0; padding: 60px 0;}
            .product-title{ width: 100%; margin: 0 0 30px; padding: 4px 0 0 15px; font-size: 1.65em; }
            .product-content-description-box{ width: 96%; margin: 0 2%; font-size: 1.15em; line-height: 1.65em;}
         .product-content-form{ width: 100%;}
            .product-content-form form{ width: 70%; margin: 0 15%;}
               .product-content-form p{ width: 100%; margin: 0 0 15px; font-size: 1.25em;}
               .product-content-form  label{ margin: 0 0 5px; font-size: 0.8em;}
               .product-content-form  input, .product-content-form  textarea{ width: 100%; padding: 8px; font-size: 0.8em;}
               .product-content-form  textarea{ height: 120px;} 
   
      .page-contact{ width: 100%; margin: 0;}
         .contact-text{ width: 45%; margin:0 -1px 0 0; padding: 15px 5% 15px 0; border-right: 1px #40210f solid; border-bottom: none;}
            .contact-text p{ width: 100%; margin: 0 0 20px; font-size: 1.15em;}
            .contact-text iframe{ width: 100%; height: 30vh; margin: 15px 0;}
         .contact-form{ width: 55%; padding: 15px 0 15px 5%; border-left: 1px #40210f solid;}
            .contact-form form{ width: 70%; margin: 0 15%;}
               .contact-form p{ width: 100%; margin: 0 0 15px; font-size: 1.25em;}
               .contact-form label{ margin: 0 0 5px; font-size: 0.8em;}
               .contact-form input, .contact-form  textarea{ width: 100%; padding: 8px; font-size: 0.8em;}
               .contact-form textarea{ height: 120px;}

      .calculation-table{ width: 80%; margin:  0 10% 80px;}
         .calculation-table-enter{ width: 100%; margin:0 0 25px;}
            .calculation-table-enter-title{ width: 70px; margin:  0 10px 0 0; font-size: 1.15em;}
            .calculation-table-enter-box{ width: calc(100% - 80px);}
               .calculation-table-enter-box select{ width: 100%; padding:12px 8px; font-size: 1.15em;}
            .calculation-table-enter-box2{ width: calc(100% - 80px); padding: 12px 8px; font-size: 1.15em;}
               .calculation-table-enter-box2 input{ width: calc(100% - 40px); margin: 0; padding: 0;}
               .calculation-table-enter-box2 span{ width: 40px;}
               .calculation-table-enter p{ width: calc(100% - 80px); margin: 8px 0 0 80px; font-size: 1em;}
                  .calculation-table-enter-box2-left{ width: 70%; padding-right: 2%;}
                  .calculation-table-enter-box2-right{ width: 30%; padding-left: 2%;}
               #customize-select{ width: calc(100% - 80px); margin: 15px 0 0 80px;}
      .calculation-result{ width: 100%;}
         .calculation-result-box{ width: 48%; margin: 0 1%;}
            .calculation-result-box-text{ width: 100%; margin: 10px 0; font-size: 1.15em;}
               .calculation-result-box-text p{ width: 15px; height: 15px; margin: 3px 8px 0 0;}
         .calculation-result-button{ width: 100%; margin:20px 0 0;}

      .calculation-convert{ width: 70%; margin: 0 15%;}



   .footer{ width: 100%; margin: 0; padding: 20px 0;}
         .footer-text{ width: 100%; margin: 0;}
            .footer-information{ width: 100%; margin: 0 0 8px; }
               .footer-information p{ width: auto; margin: 0 20px 0 0; font-size:1.05em;}
               .footer-information i{ margin-right: 5px; font-size: 1.15em;}
}

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

   header{padding:10px 0;}
      .top-box{ align-items:center;}
         .top-logo{width: 33%; margin: 0 2% 0 0;}
         .top-operating{width: 65%; margin: 0;}
            .top-icon{ width:123px; margin: 0 0 0 calc(100% - 123px);}
               .top-icon a{ width: 35px; margin: 0 3px;}
               .top-icon i{ font-size: 2.3em;}
            .top-menu{ width: 100%;}
   .top-distance{ width: 100%; margin-top: 103px;}
   .index-runimg{margin-top: 108px;}
}


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

   header{padding:10px 0;}
      .top-box{ align-items:center;}
         .top-logo{width: 24%; margin: 0 1% 0 0;}
         .top-operating{width: 75%;}
            .top-icon{ width:123px; margin: 0 0 0 10px;}
               .top-icon a{ width: 35px; margin: 0 3px;}
               .top-icon i{ font-size: 2.3em;}
            .top-menu{ width: calc(100% - 133px);}

   .top-distance{ width: 100%; margin-top: 76px;}
   .index-runimg{margin-top: 81px;}

   .index-title-box{ width: 100%; margin: 0 0 20px;}
      .index-title-box h3{ width: auto; margin: 0 20px 0 0; font-size: 1.65em;}
      .index-title-box h4{ width: auto; margin: 0; font-size: 1.35em;}

   .index-button{ width: 100%; margin: 0 0 10px;}

   .index-information-bg{ width: 100%; margin: 120px 0; padding: 80px 0;}
      .index-information-style{ align-items:center; }
         .index-news{ width: 65%; margin-right: -1px; padding: 20px 2% 20px 0;}
            .index-news-content{ width: 100%;}
            .index-news-content a{ width: 100%; padding: 15px 0;}
               .index-news-img{ width: 80px; margin:  0 15px;}
               .index-news-text{ width: calc(100% - 110px);}
                  .index-news-text h6{ width: 100px; margin: 0 calc(100% - 100px) 12px 0; padding:8px 0 6px; font-size: 0.9em;}
                  .index-news-text p{ width: 100%; margin: 0; font-size: 1.25em;}
         .index-about{ width: 35%; padding: 20px 0 20px 2%;}
            .index-about p{ width: 100%; margin: 30px 0; font-size: 1.25em;}

   .index-project{ width: 100%; margin: 120px 0;}
      .index-project a{ width: calc(25% - 40px); margin: 0 20px; font-size: 1.65em; line-height: 3.8em;}
         .index-project a::before{ top: -8px; left: 10px;}
         .index-project a::after{ bottom: -8px; left: -10px;}   
   
   .page-content{ width: 100%; margin: 30px 0 80px;}
      .page-title{ width: 100%; margin: 0 0 50px;}
         .page-title div {width: auto;}
            .page-title h1{ width: auto; margin:  0; padding: 15px 55px 20px; font-size: 2em; }
            .page-title h4{ width: auto; margin: -15px 10% 0; padding: 15px 0 0; font-size: 1.25em; }
      .page-path{ align-items: center; width: 100%; margin: 0 0 20px;}
         .page-path a{ width: auto; margin: 0; font-size: 1.05em;}
         .page-path h6{ width: auto; margin:0 12px ; font-size: 1em;}
         .page-path h5{ width: auto; font-size: 1.05em;}

      .page-news, .page-news-content{ width: 100%; margin: 30px 0 0;}
         .page-news-box{ align-items: center; width: 100%; padding: 35px 20px;}
            .page-news-img{ width: 20%; margin: 0 5% 0 0;}
            .page-news-text{ width: 75%; margin: 0;}
               .page-news-text h2{ width: 100%; margin: 0; font-size: 1.65em;}
               .page-news-text h6{ width: 100%; margin: 10px 0 30px; font-size: 1.05em;}
               .page-news-text p{ width: 100%; margin: 0; font-size: 1.25em;}
               .news-button{ width: 100%; margin: 30px 0 0; font-size: 0.95em;} 
         .page-news-content h2{ width: 100%; margin: 0; font-size: 2em; line-height: 2.3em;}   
         .page-news-content h6{ width: 100%; margin: 0 0 50px; font-size: 1.15em;}
         .news-page-button{ width: 100%; margin: 10px 0 0; font-size: 0.95em;} 
      
      .page-number{ width: 100%; margin: 50px 0 0;}

      .page-about{ width: 100%; margin: 0;}
         .about-img { width: 100%; margin: 0 0 50px;}
         .page-about p{ width: 100%; font-size: 1.25em;}

      .page-product{ width: 100%; margin: 0;}
         .product-item{ width: 100%; margin: 0 0 50px;}
            .product-item p, .product-item a{ margin: 0 10px 10px; padding: 12px 20px 8px; font-size: 1.25em;}
         .product-project{ width: 100%; margin: 0;}
            .product-project a{ width: 23%; margin:  0 1% 30px;}
            .product-project-box{ padding: 15px 10px;}
               .product-project-box h3{ width: 100%; margin: 15px 0 0; font-size: 1.15em;} 
         .product-content{ width: 100%; margin: 0;}
            .product-content-img{ width: 53%; margin: 0 2% 0 0;}
            .product-content-text{ width: 45%; margin: 0 ; padding: 25px;}
               .product-content-text h1{ width: 100%; margin: 0 0 20px; font-size: 1.65em;}
               .product-content-text span{ width: 100px; margin: 0 10px 15px 0; font-size: 1.25em;}
               .product-content-text p{ width: calc(100% - 110px); margin: 0 0 15px; font-size: 1.25em;}
         .product-content-description{ width: 100%; margin: 80px 0; padding: 80px 0;}
            .product-title{ width: 100%; margin: 0 0 30px; padding: 4px 0 0 15px; font-size: 1.65em; }
            .product-content-description-box{ width: 96%; margin: 0 2%; font-size: 1.15em; line-height: 1.65em;}
         .product-content-form{ width: 100%;}
            .product-content-form form{ width: 70%; margin: 0 15%;}
               .product-content-form p{ width: 100%; margin: 0 0 15px; font-size: 1.25em;}
               .product-content-form  label{ margin: 0 0 5px; font-size: 0.8em;}
               .product-content-form  input, .product-content-form  textarea{ width: 100%; padding: 8px; font-size: 0.8em;}
               .product-content-form  textarea{ height: 120px;}

      .calculation-table{ width: 43%; margin:  0 2% 0 0;}
         .calculation-table-enter{ width: 100%; margin:0 0 25px;}
            .calculation-table-enter-title{ width: 70px; margin:  0 10px 0 0; font-size: 1.15em;}
            .calculation-table-enter-box{ width: calc(100% - 80px);}
               .calculation-table-enter-box select{ width: 100%; padding:12px 8px; font-size: 1.15em;}
            .calculation-table-enter-box2{ width: calc(100% - 80px); padding: 12px 8px; font-size: 1.15em;}
               .calculation-table-enter-box2 input{ width: calc(100% - 40px); margin: 0; padding: 0;}
               .calculation-table-enter-box2 span{ width: 40px;}
               .calculation-table-enter p{ width: calc(100% - 80px); margin: 8px 0 0 80px; font-size: 1em;}
                  .calculation-table-enter-box2-left{ width: 70%; padding-right: 2%;}
                  .calculation-table-enter-box2-right{ width: 30%; padding-left: 2%;}
               #customize-select{ width: calc(100% - 80px); margin: 15px 0 0 80px;}
      .calculation-result{ width: 55%;}
         .calculation-result-box{ width: 48%; margin: 0 1%;}
            .calculation-result-box-text{ width: 100%; margin: 10px 0; font-size: 1.25em;}
               .calculation-result-box-text p{ width: 15px; height: 15px; margin: 3px 8px 0 0;}
         .calculation-result-button{ width: 100%; margin: 0;}

      .calculation-convert{ width: 70%; margin: 0 15%;}
   
      .page-contact{ width: 100%; margin: 0;}
         .contact-text{ width: 45%; margin:0 -1px 0 0; padding: 15px 5% 15px 0;}
            .contact-text p{ width: 100%; margin: 0 0 20px; font-size: 1.15em;}
            .contact-text iframe{ width: 100%; height: 30vh; margin: 15px 0;}
         .contact-form{ width: 55%; padding: 15px 0 15px 5%;}
            .contact-form form{ width: 80%; margin: 0 10%;}
               .contact-form p{ width: 100%; margin: 0 0 15px; font-size: 1.25em;}
               .contact-form label{ margin: 0 0 5px; font-size: 0.8em;}
               .contact-form input, .contact-form  textarea{ width: 100%; padding: 8px; font-size: 0.8em;}
               .contact-form textarea{ height: 120px;}




   .footer{ width: 100%; margin: 0; padding: 20px 0;}
         .footer-text{ width: 100%; margin: 0;}
            .footer-information{ width: 100%; margin: 0 0 8px; }
               .footer-information p{ width: auto; margin: 0 20px 0 0; font-size:1.05em;}
               .footer-information i{ margin-right: 5px; font-size: 1.15em;}
}

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

   .top-box{ align-items:center;}
      .top-logo{width: 30%; margin: 0 7% 0 0;}
      .top-operating{width: 63%;}

      .top-distance{ width: 100%; margin-top: 81px;}
      .index-runimg{margin-top: 88px;}
}


/*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;}
  #gotop-icon{ cursor: pointer;}
@media only screen and (max-width: 531px) {
   #gotop { width: 40px;}
}

/*page number*/
div.megas512{padding:6px;margin:3px;text-align:center;}
div.megas512 a{border:#dedfde 1px solid;padding:5px 8px;background-position:50% bottom;color:#40210f;margin-right:3px;text-decoration:none;}
div.megas512 a:hover{border:#DDD 1px solid;background-image:none;color:#fff;background-color: #d39d47;}
div.megas512 a:active{border:#DDD 1px solid;background-image:none;color:#fff;background-color:#777777;}
div.megas512 span.current{padding:5px 8px;font-weight:bold;color:#40210f;margin-right:3px;}
div.megas512 span.disabled{padding:5px 8px;color:#adaaad;margin-right:3px;}