@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;}
body img, form{width: 100%;}
body{ overflow-x:hidden; overflow-y:auto; overflow: hidden;}

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

.position-relative-style{ position: relative;}
.box-bg-img{ width: 100%; z-index: 1;}


/* 行動版面: 480px 以下。 */

.hr-style{ position: absolute; width: 1px; height: 65px; margin: 0 calc(50% - 0.5px); background-color: #211613; border: none;}
.h6-style{ position: absolute; font-size: 0.75em; letter-spacing: 2px; font-weight: bolder; z-index: 5;}
   .h6-align-left{text-align: left;}
   .h6-align-right{text-align: right;}   
   .h6-color-white{ color: #FFF;}
   .h6-color-black{ color: #333;}


.box01{ width: 100%; margin: 0;}
   .box01-img{ position: absolute; width: 100%; top: 0; left: 0; z-index: 2;}
   .box01-text{ position: absolute; width: 100%; top: 30%; left: 0; z-index: 5;}
      .box01-text p{ width: 70%; margin: 0 15% 10%;}
   .box01-img2{ position: absolute; width: 100%; top: 2%; left: 0; z-index: 8;}

.box02{ width: 100%; margin: 0;}
   .box02 hr{ top: 4%;}
   .box02-img{ position: absolute; width: 100%; top: 18%; left: 0; z-index: 2;}
   .box02-text{ position: absolute; width: 70%; top: 23%; left: 15%; z-index: 5;}
   .box02 h6{width: 90%; right: 5%; bottom: 1%;}

.box03{ width: 100%; margin: 0;}
   .box03-img{ position: absolute; width: 93%; top: 12%; left: 3.5%; z-index: 2;}
   .box03-text{ position: absolute; width: 80%; top: 10%; right: 10%; z-index: 5;}
      .box03-text p{ width: 40%; margin: 0 0 0 60%;}
   .box03-text2{ position: absolute; width: 70%; top: 54%; left: 15%; z-index: 5;}
      .box03-text2 p{ width: 100%; margin: 0 0 30px;}
   .box03-img2{ position: absolute; width: 100%; top: 56%; left: 0; z-index: 8;}
   .box03 h6{ width: 90%; right: 5%; bottom: 7%;}

.box04{ width: 100%; margin: 0;}
   .box04-run{ position: absolute; width: 90%; top: 15%; left: 5%; z-index: 3;}
   .box04-text{ position: absolute; width: 90%; top: 13%; left: 5%; z-index: 5;}
      .box04-text p{ width: 45%; margin: 0 0 0 55%;}
   .box04-text2{ position: absolute; width: 76%; top: 60%; left: 12%; z-index: 5;}
      .box04-text2 p{ width: 100%; margin: 0 0 10%;}
   .box04-img{ position: absolute; width: 100%; top: 8%; left: 0; z-index: 8;}
   .box04-img2{ position: absolute; width: 100%; top: 56%; left: 0; z-index: 8;}

.box05{ width: 100%; margin: 0;}
   .box05-run{ position: absolute; width: 90%; top: 15%; left: 5%; z-index: 3;}
   .box05-text{ position: absolute; width: 90%; top: 13%; left: 5%; z-index: 5;}
      .box05-text p{ width: 45%; margin: 0 55% 0 0;}
   .box05-text2{ position: absolute; width: 76%; top: 60%; left: 12%; z-index: 5;}
      .box05-text2 p{ width: 100%; margin: 0 0 10%;}
   .box05-img{ position: absolute; width: 100%; top: 8%; left: 0; z-index: 8;}
   .box05-img2{ position: absolute; width: 100%; top: 56%; left: 0; z-index: 8;}

.box06{ width: 100%; margin: 0;}
   .box06-bg{ position: absolute; width: 100%; top: 0; left: 0; z-index: 2;}
   .box06-run{ position: absolute; width: 90%; top: 15%; left: 5%; z-index: 3;}
   .box06-text{ position: absolute; width: 80%; top: 13%; left: 10%; z-index: 5;}
      .box06-text p{ width: 45%; margin: 0 0 0 55%;}
   .box06-text2{ position: absolute; width: 76%; top: 60%; left: 12%; z-index: 5;}
      .box06-text2 p{ width: 100%; margin: 0 0 10%;}
   .box06-img{ position: absolute; width: 100%; top: 9.3%; left: 0; z-index: 8;}
   .box06-img2{ position: absolute; width: 100%; top: 56%; left: 0; z-index: 8;}

.box07{ width: 100%; margin: 0;}
   .box07-run{ position: absolute; width: 90%; top: 15%; left: 5%; z-index: 3;}
   .box07-text{ position: absolute; width: 80%; top: 13%; left: 10%; z-index: 5;}
      .box07-text p{ width: 50%; margin: 0 50% 0 0;}
   .box07-text2{ position: absolute; width: 76%; top: 60%; left: 12%; z-index: 5;}
      .box07-text2 p{ width: 100%; margin: 0 0 10%;}
   .box07-img{ position: absolute; width: 100%; top: -4.5%; left: 0; z-index: 8;}
   .box07-img2{ position: absolute; width: 100%; top: 56%; left: 0; z-index: 8;}

.box08{ width: 100%; margin: 0;}
   .box08-bg{ position: absolute; width: 100%; top: 0; left: 0; z-index: 2;}
   .box08-run{ position: absolute; width: 90%; top: 15%; left: 5%; z-index: 3;}
   .box08-text{ position: absolute; width: 80%; top: 13%; left: 10%; z-index: 5;}
      .box08-text p{ width: 50%; margin: 0 50% 0 0;}
   .box08-text2{ position: absolute; width: 76%; top: 60%; left: 12%; z-index: 5;}
      .box08-text2 p{ width: 100%; margin: 0 0 10%;}
   .box08-img{ position: absolute; width: 100%; top: 9.3%; left: 0; z-index: 8;}
   .box08-img2{ position: absolute; width: 100%; top: 56%; left: 0; z-index: 8;}
   .box08 hr{ bottom: -4%; z-index: 8;}


.footer{ width: 100%; margin: 0 0 38px;}
   .footer-text{ position: absolute; width: 60%; top: 8%; left: 20%; z-index: 5;}
      .footer-text p{ width: 100%; margin: 0 0 8%;}
   .footer-form{ position: absolute; width: 70%; top: 30%; left: 15%; z-index: 10;}
      .footer-form form{ width: 100%;}
         .footer-form form p{ width: 100%; margin: 4px 0;}
            .footer-form form input{ width: 100%; padding: 8px; box-sizing: border-box; background-color: #DDD; font-size: 0.85em; font-weight: bolder; color: #000; border: none; border-radius: 4px;}
         .footer-form form div{display: -webkit-flex; display: flex; flex-wrap: wrap; justify-content: center; width: 100%; margin: 10px 0;}
         .footer-form form a{float: left; width: 100%; margin: 0; padding: 6px 0; text-align: center; font-size: 1.05em; font-weight: bolder; letter-spacing: 3px; color: #FFF; background-color: #004471; transition: 0.2s ease-in-out;}
            .footer-form form a:hover{ background-color: #00233a; text-decoration: none;}
   .footer-text2{ position: absolute; width: 80%; top: 78.5%; left: 10%; z-index: 8;}
      .footer-text2 p{ width: 100%; margin: 0 0 5%;}
   .footer-img{ position: absolute; width: 100%; top: 18%; left: 0; z-index: 5;}

   
.button-box{display: -webkit-flex; display: flex; flex-wrap: wrap; align-items: center; width: 100%; padding: 8px 0; background-color: #004471; z-index: 100; position: fixed; bottom: 0; display: none;}
   .button-box a{ float: left; width: 25%; padding: 4px 0; text-align: center; font-size: 0.85em; font-weight: bolder; letter-spacing: 2px; color: #FFF; transition: 0.2s ease-in-out;}
   .button-box a:not(:last-child){ border-right: 1px #FFF solid;}
   .button-box a:visited{ color: #FFF; text-decoration: none;}
   .button-box a:hover{ color: #F3DD77; text-decoration: none;}
   .button-box a:active{ color: #FFF; text-decoration: none;}
   #tofooter-contact-form{cursor: pointer;}





/* 表格版面: 481px 到 768px。樣式繼承自: 行動版面。 */
@media only screen and (min-width: 481px) {

   .hr-style{ width: 2px; height: 100px; margin: 0 calc(50% - 1px);}
   .h6-style{ font-size: 0.95em;}

   .box01{ width: 100%; margin: 0;}
      .box01-img{ width: 100%; top: 0; left: 0;}
      .box01-text{ width: 100%; top: 28%; left: 0;}
         .box01-text p{ width: 60%; margin: 0 20% 15%;}
      .box01-img2{ width: 100%; top: 2%; left: 0;}

   .box02{ width: 100%; margin: 0;}
      .box02 hr{ top: 4%;}
      .box02-img{ width: 100%; top: 17%; left: 0;}
      .box02-text{ width: 60%; top: 25%; left: 20%;}
      .box02 h6{ width: 90%; bottom: 1%; right: 5%;}

   .box03{ width: 100%; margin: 0;}
      .box03-img{ width: 92%; top: 9%; left: 4%;}
      .box03-text{ width: 80%; top: 7%; right: 10%;}
         .box03-text p{ width: 40%; margin: 0 0 0 60%;}
      .box03-text2{ width: 60%; top: 50%; left: 20%;}
         .box03-text2 p{ width: 100%; margin: 0 0 60px;}
      .box03-img2{ width: 100%; top: 53%; left: 0;}
      .box03 h6{ width: 80%; right: 10%; bottom: 12%;}

   .box04{ width: 100%; margin: 0;}
      .box04-run{ width: 92%; top: 15%; left: 4%;}
      .box04-text{ width: 90%; top: 13.5%; left: 5%;}
         .box04-text p{ width: 45%; margin: 0 0 0 55%;}
      .box04-text2{ width: 76%; top: 60%; left: 12%;}
         .box04-text2 p{ width: 100%; margin: 0 0 10%;}
      .box04-img{ width: 100%; top: 8%; left: 0;}
      .box04-img2{ width: 100%; top: 56%; left: 0;}

   .box05{ width: 100%; margin: 0;}
      .box05-run{ width: 92%; top: 15%; left: 4%;}
      .box05-text{ width: 90%; top: 13.5%; left: 5%;}
         .box05-text p{ width: 45%; margin: 0 55% 0 0;}
      .box05-text2{ width: 76%; top: 60%; left: 12%;}
         .box05-text2 p{ width: 100%; margin: 0 0 10%;}
      .box05-img{ width: 100%; top: 8%; left: 0;}
      .box05-img2{ width: 100%; top: 56%; left: 0;}

   .box06{ width: 100%; margin: 0;}
      .box06-bg{ width: 100%; top: 0; left: 0;}
      .box06-run{ width: 92%; top: 14.2%; left: 4%;}
      .box06-text{ width: 80%; top: 12.7%; left: 10%;}
         .box06-text p{ width: 45%; margin: 0 0 0 55%;}
      .box06-text2{ width: 76%; top: 60%; left: 12%;}
         .box06-text2 p{ width: 100%; margin: 0 0 10%;}
      .box06-img{ width: 100%; top: 9.3%; left: 0;}
      .box06-img2{ width: 100%; top: 56%; left: 0;}

   .box07{ width: 100%; margin: 0;}
      .box07-run{ width: 92%; top: 15%; left: 4%;}
      .box07-text{ width: 80%; top: 12.5%; left: 10%;}
         .box07-text p{ width: 50%; margin: 0 50% 0 0;}
      .box07-text2{ width: 76%; top: 60%; left: 12%;}
         .box07-text2 p{ width: 100%; margin: 0 0 10%;}
      .box07-img{ width: 100%; top: -4.5%; left: 0;}
      .box07-img2{ width: 100%; top: 58%; left: 0;}

   .box08{ width: 100%; margin: 0;}
      .box08-bg{ width: 100%; top: 0; left: 0;}
      .box08-run{ width: 92%; top: 14.2%; left: 4%;}
      .box08-text{ width: 80%; top: 12.5%; left: 10%;}
         .box08-text p{ width: 50%; margin: 0 50% 0 0;}
      .box08-text2{ width: 76%; top: 60%; left: 12%;}
         .box08-text2 p{ width: 100%; margin: 0 0 10%;}
      .box08-img{ width: 100%; top: 9.3%; left: 0;}
      .box08-img2{ width: 100%; top: 56%; left: 0;}
      .box08 hr{ bottom: -5%;}

   


   .footer{ width: 100%; margin: 0 0 35px;}
      .footer-text{ width: 50%; top: 8%; left: 25%;}
         .footer-text p{ width: 100%; margin: 0 0 10%;}
      .footer-form{ width: 70%; top: 26%; left: 15%;}
         .footer-form form{ width: 100%;}
            .footer-form form p{ width: 100%; margin: 10px 0;}
               .footer-form form input{ width: 100%; padding: 10px 12px; font-size: 1.05em;}
            .footer-form form div{ width: 100%; margin: 20px 0;}
            .footer-form form a{ width: 70%; margin: 0 15%; padding: 10px 0; font-size: 1.35em;}
      .footer-text2{ width: 80%; top: 75%; left: 10%;}
         .footer-text2 p{ width: 100%; margin: 0 0 8%;}
      .footer-img{ width: 100%; top: 20%; left: 0;}
   
   .button-box{ width: 100%; padding: 8px 0;}
      .button-box a{ width: 25%; padding: 4px 0; font-size: 1em;}

      
}


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

   .hr-style{ width: 3px; height: 160px; margin: 0 calc(50% - 1.5px);}
   .h6-style{ font-size: 1.15em;}

   .box01{ width: 100%; margin: 0;}
      .box01-img{ width: 100%; top: 0; left: 0;}
      .box01-text{ width: 100%; top: 28%; left: 0;}
         .box01-text p{ width: 60%; margin: 0 20% 10%;}
      .box01-img2{ width: 100%; top: 2%; left: 0;}

   .box02{ width: 100%; margin: 0;}
      .box02 hr{ top: 4%;}
      .box02-img{ width: 100%; top: 15%; left: 0;}
      .box02-text{ width: 60%; top: 23%; left: 20%;}
      .box02 h6{ width: 90%; bottom: 1%; right: 5%;}

   .box03{ width: 100%; margin: 0;}
      .box03-img{ width: 92%; top: 11%; left: 4%;}
      .box03-text{ width: 80%; top: 9%; right: 10%;}
         .box03-text p{ width: 40%; margin: 0 0 0 60%;}
      .box03-text2{ width: 68%; top: 55%; left: 16%;}
         .box03-text2 p{ width: 100%; margin: 0 0 80px;}
      .box03-img2{ width: 100%; top: 55%; left: 0;}
      .box03 h6{ width: 80%; right: 10%; bottom: 9%;}

   .box04{ width: 100%; margin: 0;}
      .box04-run{ width: 92%; top: 15%; left: 4%;}
      .box04-text{ width: 90%; top: 13.5%; left: 5%;}
         .box04-text p{ width: 45%; margin: 0 0 0 55%;}
      .box04-text2{ width: 68%; top: 60%; left: 16%;}
         .box04-text2 p{ width: 100%; margin: 0 0 10%;}
      .box04-img{ width: 100%; top: 8%; left: 0;}
      .box04-img2{ width: 100%; top: 55%; left: 0;}

   .box05{ width: 100%; margin: 0;}
      .box05-run{ width: 92%; top: 15%; left: 4%;}
      .box05-text{ width: 90%; top: 13.5%; left: 5%;}
         .box05-text p{ width: 45%; margin: 0 55% 0 0;}
      .box05-text2{ width: 68%; top: 60%; left: 16%;}
         .box05-text2 p{ width: 100%; margin: 0 0 10%;}
      .box05-img{ width: 100%; top: 8%; left: 0;}
      .box05-img2{ width: 100%; top: 55%; left: 0;}

   .box06{ width: 100%; margin: 0;}
      .box06-bg{ width: 100%; top: 0; left: 0;}
      .box06-run{ width: 92%; top: 14.2%; left: 4%;}
      .box06-text{ width: 80%; top: 12.7%; left: 10%;}
         .box06-text p{ width: 45%; margin: 0 0 0 55%;}
      .box06-text2{ width: 68%; top: 60%; left: 16%;}
         .box06-text2 p{ width: 100%; margin: 0 0 10%;}
      .box06-img{ width: 100%; top: 9%; left: 0;}
      .box06-img2{ width: 100%; top: 56%; left: 0;}

   .box07{ width: 100%; margin: 0;}
      .box07-run{ width: 92%; top: 15%; left: 4%;}
      .box07-text{ width: 80%; top: 12.5%; left: 10%;}
         .box07-text p{ width: 50%; margin: 0 50% 0 0;}
      .box07-text2{ width: 68%; top: 60%; left: 16%;}
         .box07-text2 p{ width: 100%; margin: 0 0 10%;}
      .box07-img{ width: 100%; top: -4.5%; left: 0;}
      .box07-img2{ width: 100%; top: 58%; left: 0;}

   .box08{ width: 100%; margin: 0;}
      .box08-bg{ width: 100%; top: 0; left: 0;}
      .box08-run{ width: 92%; top: 14.2%; left: 4%;}
      .box08-text{ width: 80%; top: 12.5%; left: 10%;}
         .box08-text p{ width: 50%; margin: 0 50% 0 0;}
      .box08-text2{ width: 68%; top: 60%; left: 16%;}
         .box08-text2 p{ width: 100%; margin: 0 0 10%;}
      .box08-img{ width: 100%; top: 9%; left: 0;}
      .box08-img2{ width: 100%; top: 56%; left: 0;}
      .box08 hr{ bottom: -5%;}

   


   .footer{ width: 100%; margin: 0 0 10px;}
      .footer-text{ width: 50%; top: 10%; left: 25%;}
         .footer-text p{ width: 100%; margin: 0 0 10%;}
      .footer-form{ width: 70%; top: 30%; left: 15%;}
         .footer-form form{ width: 100%;}
            .footer-form form p{ width: 100%; margin: 20px 0;}
               .footer-form form input{ width: 100%; padding: 12px; font-size: 1.15em;}
            .footer-form form div{ width: 80%; margin: 35px 10%;}
            .footer-form form a{ width: 60%; margin: 0 20%; padding: 15px 0; font-size: 1.65em;}
      .footer-text2{ width: 70%; top: 73%; left: 15%;}
         .footer-text2 p{ width: 100%; margin: 0 0 10%;}
      .footer-img{ width: 100%; top: 20%; left: 0;}
   
   .button-box{ width: 100%; padding: 12px 0;}
      .button-box a{ width: 25%; padding: 6px 0; font-size: 1.15em;}
}


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

   .hr-style{ width: 3px; height: 220px; margin: 0 calc(50% - 1.5px);}
   .h6-style{ font-size: 1.45em;}

   .box01{ width: 100%; margin: 0;}
      .box01-img{ width: 100%; top: 0; left: 0;}
      .box01-text{ width: 100%; top: 30%; left: 0;}
         .box01-text p{ width: 60%; margin: 0 20% 15%;}
      .box01-img2{ width: 100%; top: 5%; left: 0;}

   .box02{ width: 100%; margin: 0;}
      .box02 hr{ top: 6%;}
      .box02-img{ width: 100%; top: 15%; left: 0;}
      .box02-text{ width: 60%; top: 25%; left: 20%;}
      .box02 h6{ width: 90%; bottom: 1%; right: 5%;}

   .box03{ width: 100%; margin: 0;}
      .box03-img{ width: 90%; top: 13%; left: 5%;}
      .box03-text{ width: 80%; top: 11%; right: 10%;}
         .box03-text p{ width: 40%; margin: 0 0 0 60%;}
      .box03-text2{ width: 60%; top: 60%; left: 20%;}
         .box03-text2 p{ width: 100%; margin: 0 0 18%;}
      .box03-img2{ width: 100%; top: 55%; left: 0;}
      .box03 h6{ width: 80%; right: 10%; bottom: 9.5%;}

   .box04{ width: 100%; margin: 0;}
      .box04-run{ width: 90%; top: 15%; left: 5%;}
      .box04-text{ width: 90%; top: 13.5%; left: 5%;}
         .box04-text p{ width: 45%; margin: 0 0 0 55%;}
      .box04-text2{ width: 70%; top: 60%; left: 15%;}
         .box04-text2 p{ width: 100%; margin: 0 0 10%;}
      .box04-img{ width: 100%; top: 8%; left: 0;}
      .box04-img2{ width: 100%; top: 54%; left: 0;}

   .box05{ width: 100%; margin: 0;}
      .box05-run{ width: 90%; top: 15%; left: 5%;}
      .box05-text{ width: 90%; top: 13.5%; left: 5%;}
         .box05-text p{ width: 45%; margin: 0 55% 0 0;}
      .box05-text2{ width: 70%; top: 60%; left: 15%;}
         .box05-text2 p{ width: 100%; margin: 0 0 10%;}
      .box05-img{ width: 100%; top: 8%; left: 0;}
      .box05-img2{ width: 100%; top: 54%; left: 0;}

   .box06{ width: 100%; margin: 0;}
      .box06-bg{ width: 100%; top: 0; left: 0;}
      .box06-run{ width: 90%; top: 15%; left: 5%;}
      .box06-text{ width: 80%; top: 13%; left: 10%;}
         .box06-text p{ width: 45%; margin: 0 0 0 55%;}
      .box06-text2{ width: 70%; top: 60%; left: 15%;}
         .box06-text2 p{ width: 100%; margin: 0 0 10%;}
      .box06-img{ width: 100%; top: 9%; left: 0;}
      .box06-img2{ width: 100%; top: 56%; left: 0;}

   .box07{ width: 100%; margin: 0;}
      .box07-run{ width: 90%; top: 15%; left: 5%;}
      .box07-text{ width: 80%; top: 13.5%; left: 10%;}
         .box07-text p{ width: 50%; margin: 0 50% 0 0;}
      .box07-text2{ width: 70%; top: 60%; left: 15%;}
         .box07-text2 p{ width: 100%; margin: 0 0 10%;}
      .box07-img{ width: 100%; top: -4.5%; left: 0;}
      .box07-img2{ width: 100%; top: 58%; left: 0;}

   .box08{ width: 100%; margin: 0;}
      .box08-bg{ width: 100%; top: 0; left: 0;}
      .box08-run{ width: 90%; top: 15%; left: 5%;}
      .box08-text{ width: 80%; top: 13.5%; left: 10%;}
         .box08-text p{ width: 50%; margin: 0 50% 0 0;}
      .box08-text2{ width: 70%; top: 60%; left: 15%;}
         .box08-text2 p{ width: 100%; margin: 0 0 10%;}
      .box08-img{ width: 100%; top: 9%; left: 0;}
      .box08-img2{ width: 100%; top: 56%; left: 0;}
      .box08 hr{ bottom: -5%;}

   


   .footer{ width: 100%; margin: 0;}
      .footer-text{ width: 50%; top: 10%; left: 25%;}
         .footer-text p{ width: 100%; margin: 0 0 10%;}
      .footer-form{ width: 60%; top: 30%; left: 20%;}
         .footer-form form{ width: 100%;}
            .footer-form form p{ width: 100%; margin: 25px 0;}
               .footer-form form input{ width: 100%; padding: 20px; font-size: 1.25em;}
            .footer-form form div{ width: 80%; margin: 50px 10%;}
            .footer-form form a{ width: 60%; margin: 0 20%; padding: 20px 0; font-size: 1.65em;}
      .footer-text2{ width: 70%; top: 70%; left: 15%;}
         .footer-text2 p{ width: 100%; margin: 0 0 12%;}
      .footer-img{ width: 100%; top: 20%; left: 0;}
   
   .button-box{ width: 100%; padding: 12px 0;}
      .button-box a{ width: 25%; padding: 8px 0; font-size: 1.25em;}


}


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

   .hr-style{ width: 4px; height: 300px; margin: 0 calc(50% - 2px);}
   .h6-style{ font-size: 1.65em;}

   .box01{ width: 100%; margin: 0;}
      .box01-img{ width: 100%; top: 0; left: 0;}
      .box01-text{ width: 100%; top: 30%; left: 0;}
         .box01-text p{ width: 70%; margin: 0 15% 20%;}
      .box01-img2{ width: 100%; top: 5%; left: 0;}

   .box02{ width: 100%; margin: 0;}
      .box02 hr{ top: 8%;}
      .box02-img{ width: 100%; top: 15%; left: 0;}
      .box02-text{ width: 70%; top: 25%; left: 15%;}
      .box02 h6{ width: 90%; bottom: 1%; right: 5%;}

   .box03{ width: 100%; margin: 0;}
      .box03-img{ width: 90%; top: 15%; left: 5%;}
      .box03-text{ width: 80%; top: 13%; right: 10%;}
         .box03-text p{ width: 35%; margin: 0 0 0 65%;}
      .box03-text2{ width: 70%; top: 55%; left: 15%;}
         .box03-text2 p{ width: 100%; margin: 0 0 20%}
      .box03-img2{ width: 100%; top: 55%; left: 0;}
      .box03 h6{ width: 80%; right: 10%; bottom: 8%;}

   .box04{ width: 100%; margin: 0;}
      .box04-run{ width: 90%; top: 15%; left: 5%;}
      .box04-text{ width: 90%; top: 13.5%; left: 5%;}
         .box04-text p{ width: 45%; margin: 0 0 0 55%;}
      .box04-text2{ width: 76%; top: 60%; left: 12%;}
         .box04-text2 p{ width: 100%; margin: 0 0 10%;}
      .box04-img{ width: 100%; top: 8%; left: 0;}
      .box04-img2{ width: 100%; top: 56%; left: 0;}

   .box05{ width: 100%; margin: 0;}
      .box05-run{ width: 90%; top: 15%; left: 5%;}
      .box05-text{ width: 90%; top: 13.5%; left: 5%;}
         .box05-text p{ width: 45%; margin: 0 55% 0 0;}
      .box05-text2{ width: 76%; top: 60%; left: 12%;}
         .box05-text2 p{ width: 100%; margin: 0 0 10%;}
      .box05-img{ width: 100%; top: 8%; left: 0;}
      .box05-img2{ width: 100%; top: 56%; left: 0;}

   .box06{ width: 100%; margin: 0;}
      .box06-bg{ width: 100%; top: 0; left: 0;}
      .box06-run{ width: 90%; top: 15%; left: 5%;}
      .box06-text{ width: 80%; top: 13%; left: 10%;}
         .box06-text p{ width: 45%; margin: 0 0 0 55%;}
      .box06-text2{ width: 76%; top: 60%; left: 12%;}
         .box06-text2 p{ width: 100%; margin: 0 0 10%;}
      .box06-img{ width: 100%; top: 9%; left: 0;}
      .box06-img2{ width: 100%; top: 56%; left: 0;}

   .box07{ width: 100%; margin: 0;}
      .box07-run{ width: 90%; top: 15%; left: 5%;}
      .box07-text{ width: 80%; top: 13.5%; left: 10%;}
         .box07-text p{ width: 50%; margin: 0 50% 0 0;}
      .box07-text2{ width: 76%; top: 60%; left: 12%;}
         .box07-text2 p{ width: 100%; margin: 0 0 10%;}
      .box07-img{ width: 100%; top: -4.5%; left: 0;}
      .box07-img2{ width: 100%; top: 58%; left: 0;}

   .box08{ width: 100%; margin: 0;}
      .box08-bg{ width: 100%; top: 0; left: 0;}
      .box08-run{ width: 90%; top: 15%; left: 5%;}
      .box08-text{ width: 80%; top: 13.5%; left: 10%;}
         .box08-text p{ width: 50%; margin: 0 50% 0 0;}
      .box08-text2{ width: 76%; top: 60%; left: 12%;}
         .box08-text2 p{ width: 100%; margin: 0 0 10%;}
      .box08-img{ width: 100%; top: 9%; left: 0;}
      .box08-img2{ width: 100%; top: 56%; left: 0;}
      .box08 hr{ bottom: -4%;}

   


   .footer{ width: 100%; margin: 0;}
      .footer-text{ width: 50%; top: 18%; left: 25%;}
         .footer-text p{ width: 100%; margin: 0 0 10%;}
      .footer-form{ width: 60%; top: 40%; left: 20%;}
         .footer-form form{ width: 100%;}
            .footer-form form p{ width: 100%; margin: 25px 0;}
               .footer-form form input{ width: 100%; padding: 25px; font-size: 1.25em;}
            .footer-form form div{ width: 80%; margin: 50px 10%;}
            .footer-form form a{ width: 60%; margin: 0 20%; padding: 20px 0; font-size: 1.65em;}
      .footer-text2{ width: 70%; top: 70%; left: 15%;}
         .footer-text2 p{ width: 100%; margin: 0 0 20%;}
      .footer-img{ width: 100%; top: 25%; left: 0;}   

   
   .button-box{ width: 100%; padding: 15px 0;}
      .button-box a{ width: 25%; padding: 8px 0; font-size: 1.25em;}

   
}