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

.display-style{ display: -webkit-flex; display: flex; flex-wrap: wrap;}

/* 行動版面: 480px 以下。 */
.top-bg{ width: 100%; margin: 0; position: relative;}
   .top-bg-pc, .top-bg h1{ display: none;}
   .top-bg-ph{ display: inline-block;}
   .top-bg h2{ position: absolute; top: 25%; left: 15%; width: 70%; margin: 0; z-index: 5;}

.box01-bg{ align-items: center; width: 100%; margin: 0; position: relative; background-color: #b1cd81;}
   .box01-top{ position: absolute; top: 0; left: 0; width: 80%; margin: 0; z-index: 5;}
   .box01-text{ width: 75%; margin: 0 0 0 3%;}
   .box01-img{ width: 65%; margin: 0 0 0 -43%;}
   .box01-bottom{ position: absolute; bottom: 0; left: 0; width: 55%; margin: 0; z-index: 5;}

.box-img-pc{ display: none;}
.box-img-ph{ display: inline-block;}

.box01_2-bg{ width: 100%; margin: 0; padding: 45px 3%; box-sizing: border-box; background: url(../images/box04-bg-ph.jpg) repeat-y;}
   .box01_2-yt{ width: 100%; margin: 0;}
      .embed-container{ position: relative; padding-bottom: 35vh; height: 0; overflow: hidden; max-width: 100%;}
         .embed-container iframe, .embed-container object, .embed-container embed{ position: absolute; top: 0; left: 0; width: 100%; height: 35vh;  margin: 0;}

.box02-bg{ align-items: center; width: 100%; margin: 0;}
   .box02-text{ width: 38%; margin: 50px 30% 25px 32%;}
   .box02-img{ justify-content: center; width: 80%; margin: 0 10% 50px;}
      .box02-img-box{ width: 31.3%; margin: 2px 1%;}
   .box02-bottom{ width: 100%; margin: 0;}

.box03-bg{ width: 100%; margin: 0; position: relative;}
   .box03-img{ width: 100%; margin: 0;}
   .box03-text{ position: absolute; top: 33%; right: 3%; width: 57%; z-index: 5;}

.box04-bg{ width: 100%; margin: 0; padding: 45px 3%; box-sizing: border-box; background: url(../images/box04-bg-ph.jpg) repeat-y;}
   .box04-si{ justify-content: space-between; width: 100%; margin: 0;}
      .box04-si-box{ width: 48.5%; margin: 0 0 20px;}
   .box04-bi{ width: 100%; margin: 15px 0 0;}
      .box04-bi h3{ width: 100%; margin: 10px 0 0;}

.box05-bg{ width: 100%; margin: 0; padding: 45px 3%; box-sizing: border-box; background: url(../images/box05-bg-ph.jpg) repeat-y;}
   .box05-top{ align-items: center; width: 100%; margin: 0 0 35px;}
      .box05-top-text{ width: 82%; margin: 0 9% 20px;}
      .box05-top-img{ width: 50%; margin: 0 25%;}
   .box05-img{ width: 100%; margin: 20px 0;}
   .box05-si{ justify-content: space-between; align-items: stretch; width: 100%; margin: 0;}
      .box05-si-box{ width: 48.5%; margin: 20px 0 0;}
         .box05-si-box BS{ width: 100%; height: 0; margin: 0;}


.footer-box{ width: 80%; margin: 0 10%; padding: 45px 0 0;}
   .footer-box img{ width: 100%; margin: auto 0;}
   .footer-box h2{ width: 70%; margin: 0 15%;}
   .footer-box h3{ width: 100%; margin: 20px 0;}
   .footer-box h5{ width: 40%; margin: 0 30%;}

/* 表格版面: 481px 到 768px。樣式繼承自: 行動版面。 */
@media only screen and (min-width: 481px) {
      .top-bg h2{ top: 25%; left: 20%; width: 60%;}

      .box01-top{ width: 90%;}
      .box01-text{ width: 60%; margin: 0 0 0 5%;}
      .box01-img{ width: 65%; margin: 0 0 0 -30%;}
      .box01-bottom{ width: 60%;}

   .box01_2-bg{ width: 100%; margin: 0; padding: 60px 5%;}
      .box01_2-yt{ width: 100%; margin: 0;}
         .embed-container{ padding-bottom: 40vh; height: 0;}
            .embed-container iframe, .embed-container object, .embed-container embed{ width: 100%; height: 40vh;}
      
      .box02-text{ width: 32%; margin: 60px 0 60px 5%;}
      .box02-img{ width: 53%; margin: 0 5%;}
         .box02-img-box{ width: 48%; margin: 3px 1%;}
   
      .box03-text{ top: 35%; right: 5%; width: 50%;}

   .box04-bg{ width: 100%; margin: 0; padding: 60px 5%;}
         .box04-si-box{ width: 48%; margin: 0 0 25px;}
      .box04-bi{ width: 100%; margin: 25px 0 0;}
         .box04-bi h3{ width: 90%; margin: 15px 5% 0;}

   .box05-bg{ width: 100%; margin: 0; padding: 60px 5%;}
      .box05-top{ width: 100%; margin: 0 0 50px;}
         .box05-top-text{ width: 67%; margin: 0 3% 0 0;}
         .box05-top-img{ width: 27%; margin: 0 0 0 3%;}
      .box05-img{ width: 100%; margin: 30px 0;}
      .box05-si-box{ width: 48%; margin: 25px 0 0;}


   .footer-box{ width: 70%; margin: 0 15%; padding: 60px 0 0;}
      .footer-box h3{ width: 100%; margin: 30px 0;}


}

@media only screen and (min-width: 576px) {
         .box02-img-box{ width: 31.3%; margin: 3px 1%;}

}


/* 桌面版面: 768px 到1024繼承自: 行動版面和表格版面。 */
@media only screen and (min-width: 769px) {
      .top-bg-pc{ display: inline-block;}
      .top-bg-ph{ display: none;}
      .top-bg h2{ top: 9%; left: 28%; width: 44%;}

      .box01-top{ width: 100%;}
      .box01-text{ width: 50%; margin: 0 0 0 5%;}
      .box01-img{ width: 75%; margin: 0 0 0 -30%;}
      .box01-bottom{ width: 65%;}

   .box-img-pc{ display: inline-block;}
   .box-img-ph{ display: none;}

   .box01_2-bg{ width: 100%; margin: 0; padding: 90px 6%; background: url(../images/box04-bg.jpg) repeat-y;}
      .box01_2-yt{ width: 100%; margin: 0;}
         .embed-container{ padding-bottom: 60vh; height: 0;}
            .embed-container iframe, .embed-container object, .embed-container embed{ width: 100%; height: 60vh;}
      
      .box02-text{ width: 27%; margin: 90px 0 90px 5%;}
      .box02-img{ width: 58%; margin: 0 5%;}
         .box02-img-box{ width: 31.3%; margin: 8px 1%;}

      .box03-text{ top: 30%; right: 5%; width: 42%;}

   .box04-bg{ width: 100%; margin: 0; padding: 90px 6%; background: url(../images/box04-bg.jpg) repeat-y;}
         .box04-si-box{ width: 47%; margin: 0 0 35px;}
      .box04-bi{ width: 100%; margin: 30px 0 0;}
         .box04-bi h3{ width: 80%; margin: 25px 10% 0;}

   .box05-bg{ width: 100%; margin: 0; padding: 90px 6%; background: url(../images/box05-bg.jpg) repeat-y;}
      .box05-top{ width: 100%; margin: 0 0 70px;}
         .box05-top-text{ width: 62%; margin: 0 3% 0 0;}
         .box05-top-img{ width: 32%; margin: 0 0 0 3%;}
      .box05-img{ width: 100%; margin: 40px 0;}
      .box05-si-box{ width: 47%; margin: 35px 0 0;}
         .box05-si-box BS{ width: 100%; height: 5%; margin: 0;}


   .footer-box{ width: 60%; margin: 0 20%; padding: 90px 0 0;}
      .footer-box h3{ width: 100%; margin: 50px 0;}

}


/* 桌面版面: 1025px 到最大樣式繼承自: 行動版面和表格版面。 */
@media only screen and (min-width: 1025px) {
      .top-bg h2{ top: 12%; left: 32%; width: 36%;}

      .box01-text{ width: 45%; margin: 0 0 0 5%;}
      .box01-img{ width: 80%; margin: 0 0 0 -30%;}

   .box01_2-bg{ width: 100%; margin: 0; padding: 120px 8%;}
      .box01_2-yt{ width: 100%; margin: 0;}
         .embed-container{ padding-bottom: 80vh; height: 0;}
            .embed-container iframe, .embed-container object, .embed-container embed{ width: 100%; height: 80vh;}
      
      .box02-text{ width: 23%; margin: 120px 0 120px 5%;}
      .box02-img{ width: 62%; margin: 0 5%;}
         .box02-img-box{ width: 31.3%; margin: 15px 1%;}

      .box03-text{ top: 30%; right: 5%; width: 35%;}

   .box04-bg{ width: 100%; margin: 0; padding: 120px 8%;}
         .box04-si-box{ width: 47%; margin: 0 0 35px;}
      .box04-bi{ width: 100%; margin: 40px 0 0;}
         .box04-bi h3{ width: 80%; margin: 30px 10% 0;}

   .box05-bg{ width: 100%; margin: 0; padding: 120px 8%;}
      .box05-top{ width: 100%; margin: 0 0 100px;}
         .box05-top-text{ width: 55%; margin: 0 5% 0 0;}
         .box05-top-img{ width: 35%; margin: 0 0 0 5%;}
      .box05-img{ width: 100%; margin: 60px 0;}
      .box05-si-box{ width: 47%; margin: 35px 0 0;}


   .footer-box{ width: 50%; margin: 0 25%; padding: 120px 0 0;}
      .footer-box h3{ width: 100%; margin: 60px 0;}

}

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

      .box01-text{ width: 40%; margin: 0 0 0 10%;}
      .box01-img{ width: 80%; margin: 0 0 0 -30%;}

   .box01_2-bg{ width: 100%; margin: 0; padding: 160px 10%;}
      .box01_2-yt{ width: 100%; margin: 0;}
         .embed-container{ padding-bottom: 90vh; height: 0;}
            .embed-container iframe, .embed-container object, .embed-container embed{ width: 100%; height: 90vh;}

      .box02-text{ width: 20%; margin: 160px 0 160px 10%;}
      .box02-img{ width: 50%; margin: 0 10%;}

      .box03-text{ top: 30%; right: 10%; width: 33%;}

   .box04-bg{ width: 100%; margin: 0; padding: 160px 10%;}
         .box04-si-box{ width: 47%; margin: 0 0 50px;}
      .box04-bi{ width: 100%; margin: 50px 0 0;}
         .box04-bi h3{ width: 1000px; margin: 35px calc(50% - 500px) 0;}

   .box05-bg{ width: 100%; margin: 0; padding: 160px 10%;}
      .box05-top{ width: 100%; margin: 0 0 150px;}
         .box05-top-text{ width: 50%; margin: 0 5% 0 0;}
         .box05-top-img{ width: 40%; margin: 0 0 0 5%;}
      .box05-img{ width: 100%; margin: 80px 0;}
      .box05-si-box{ width: 47%; margin: 50px 0 0;}


   .footer-box{ width: 800px; margin: 0 calc(50% - 400px); padding: 160px 0 0;}
      .footer-box h3{ width: 100%; margin: 80px 0;}
}