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

img, object, embed, video {
	max-width: 100%;
}
* img{ width: 100%; margin: auto 0;}
/* 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: 'font-style';
   src: local("en-font-style"),
      url('../webfonts/GenSenRounded-M.woff') format("woff"),
      url('../webfonts/GenSenRounded-M.ttf') format("opentype");
}
.body-font{font-family: 'font-style', '微軟正黑體' , 'Arial', sans-serif !important;}


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

/* 行動版面: 480px 以下。 */
.top-bg{ width: 100%; margin: 0; padding: 8px 6% 12px; box-sizing: border-box; position: fixed; top: 0; left: auto; background-color: #FFF; border-radius: 0 0 25px 25px; z-index: 999;}
   .top-box{ align-items: center; width: 100%; margin: 0;}
      .top-box-logo{ width: 130px; margin: 0 2% 0 0; z-index: 100;}
      .top-box-operate{flex-direction: row-reverse; justify-content:  flex-start; align-items: center; width: calc(98% - 130px); margin: 0;}
         .top-box-operate-menu{ width: 60px; margin: -55px 0 0;}
            .top-box-operate-menu ul a{font-size: 1.25em;}
         .top-box-operate-button{ width: 100px; margin: 0; z-index: 100;}
            .top-box-operate-button a{ justify-content: center; width: 100%; margin: 0; padding: 6px 0; text-decoration: none; font-size: 0.95em; font-weight: bolder; line-height: 1em; letter-spacing: 2px; color: #FFF; background-color: #ff9e18; border-radius: 50px; transition: 0.25s ease-in-out;}
               .top-box-operate-button a:visited{ color: #FFF; background-color: #ff9e18;}
               .top-box-operate-button a:hover{ color: #FFF; background-color: #b86b00;}
               .top-box-operate-button a:active{ color: #FFF; background-color: #ff9e18;}

.box01-bg{ width: 100%; margin: 0; padding: 80px 0 0; background-color: #feb252; position: relative; overflow: hidden;}
   .box01-bgi1{ position: absolute; top: 0; right: 0; width: 20%; margin: 0; z-index: 1;}
   .box01-bgi2{ position: absolute; top: 8%; left: 2%; width: 60px; margin: 0; z-index: 1;}
   .box01{ align-items: center; width: 90%; margin: 0 5%;}
      .box01-text{ width: 100%; margin: 0 0 16px; z-index: 5;}
         .box01-text h1{ width: 90%; margin: 0 5% 20px;}
            .box01-text h1 font{ display: none;}
         .box01-text h2{ width: 100%; margin: 0;}
      .box01-img{ width: 106%; margin: 0 -3%; z-index: 3; position: relative;}
         .box01-img-bg{ position: absolute; top: 10%; left: 15%; width: 160%; z-index: -1;}
      .box01-label{ justify-content: center; align-items: center; width: 100%; margin: 20px 0 0; z-index: 8;}
         .box01-label-box, .box01-label-box-b{ margin: 3px 1%; text-align: center; padding: 8px 0 6px; font-size: 0.85em; font-weight: bolder; line-height: 1em; color: #333; background-color: #FFF; border-radius: 50px;}
         .box01-label-box{ width: 23%;}
         .box01-label-box-b{ width: 28%;}
   .box01-bgi-round{ position: absolute; bottom: 1%; right: 2%; width: 60px; margin: 0; z-index: 1;}
   .box01-bottom-pc{ display: none; width: 100%; margin: 0;}
   .box01-bottom-ph{ display: inline-block; width: 100%; margin: 0;}

.box02-bg{ width: 100%; margin: 0; background-color: #faf1e3;}
   .box02{ align-items: center; width: 100%; margin: 0; padding: 5px 5% 20px; box-sizing: border-box;}
      .box02-img{ width: 35%; margin: 0;}
      .box02-text{ width: 65%; margin: 0 ;}
         .box02-text-t1, .box02-text-t3{ width: 90%; margin: 0 10% 0 0;}
         .box02-text-t2{ width: 90%; margin: 3% 0 3% 10%;}
   .box02-bottom{ width: 100%;}

.box03-bg{ width: 100%; margin: 0; background-color: #FFF;}
   .box03{ width: 100%; margin: 0; padding: 0 5%; box-sizing: border-box;}
      .box03-project-title{ width: 74%; margin: 10px 13% 35px;}
      .box03-project{ justify-content: space-between; align-items: stretch; width: 100%; margin: 0 0 35px;}
         .box03-project-items{ width: 60%; margin: 25px 20%; padding: 10px 0 0; position: relative;}
            .box03-decorate{ position: absolute; top: -9%; left: 0; width: 40px; margin: 0;}
            .box03-project-items-title{ width: 60%; margin: 0 20%; z-index: 10; position: relative;}
            .box03-project-items-content{ width: 100%; margin: -20px 0 0; padding: 35px 20px 20px; box-sizing: border-box; background-color: #fed7a8; border-radius: 25px; z-index: 5;}
               .box03-project-items-content h2{ width: 100%; margin: 0 0 15px;}
               .box03-project-items-content h3{ width: 100%; margin: 0;}
      .box03-achievements-title{ width: 90%; margin: 25px 5%;}
      .box03-achievements-content{ justify-content: space-between; align-items: flex-start; width: 100%; margin: 0 0 35px;}
         .box03-achievements-content-item{ width: 70%; margin: 16px 15%;}
            .achievements-content-item-title{ width: 100%; margin: 0 0 16px; padding: 8px 0 6px; text-align: center; font-size: 1.15em; font-weight: bolder; color: #333; background-color: #fed7a8; border-radius: 50px;}
            .achievements-content-item-counter{ justify-content: center; align-items: center; width: 100%; margin: 0; font-size: 2em; font-weight: bolder; line-height: 1em; color: #ff3078;}
               .achievements-content-item-counter span{ font-size: 0.8em;}
            .box03-achievements-content-item h3{ width: 100%; margin:13px 0 0; text-align: center; font-size: 1.15em; line-height: 1em; color: #333;}
      .box03-milestone-title{ width: 46%; margin: 25px 27%;}
      .box03-milestone-content{ width: 100%; margin: 0;}
         .box03-milestone-item{ align-items: center; width: 50%; margin: 40px 25%;}
            .box03-milestone-item-logo{ width: 100%; margin: 0 0 8px;}
            .box03-milestone-item-text{ width: 100%; margin: 0;}
         .box03-milestone-t1{ width: 74%; margin: 50px 13% 0;}
         .box03-milestone-t2{ width: 92%; margin:20px 4%;}
   .box03-bottom{ width: 100%; margin: 0;}

.box04-bg{ width: 100%; margin: 0; padding: 35px 0 0; background-color: #faf1e3; position: relative;}
   .box04-bgi1{ position: absolute; top: 0; left: 0; width: 25.4%; margin: 0; z-index: 1;}
   .box04-bgi2{ position: absolute; bottom: 0; right: 0; width: 25.4%; margin: 0; z-index: 1;}
   .box04-bgi-round{ position: absolute; bottom: 1%; left: 1%; width: 70px; margin: 0; z-index: 30;}
   .box04-decorate-i{ position: absolute; top: 6%; right: 10%; width: 80px; margin: 0; z-index: 1;}
   .box04-title{ width: 46%; margin: 0 27% 35px;}
   .box04{ width: 100%; margin: 0; padding: 0 2%; box-sizing: border-box; position: relative; z-index: 10;}
      .box04-content{ width: 100%; margin: 0; position: relative;}
         .box04-content-bg-line{ display: none; position: absolute; top: 300px; left: 35%; width: 30%; z-index: -1;}
         .box04-content-box{ float: left; width: 80%; margin: 12px 10%; position: relative;}
            .box04-content-box-mask{ position: absolute; width: 100%; height: 100%; margin: 0; background-color: #faf1e3; z-index: 5;}
   .box04-bottom{ width: 100%; margin:15px 0 0; position: relative; z-index: 20;}

.box05-bg{ width: 100%; margin: 0; background-color: #ffa329;}
   .box05-case-title{ width: 52%; margin: -8px 24% 45px; position: relative; z-index: 25;}
   .box05-case{ width: 100%; margin: 0; padding: 0 13% 30px; box-sizing: border-box; position: relative;}
      .box05-case-scroll{ align-items: flex-start; width: 100%; margin: 0;}
         .box05-case-text{ width: 100%; margin: 0 0 16px; z-index: 10;}
         .box05-case-img{ width: 100%; margin: 0; position: relative;}
            .box05-case-button{ position: absolute; bottom: 18%; right: calc(50% - 65PX); width: 130px; z-index: 10;}
               .box05-case-button a{ padding: 5px 0; font-size: 14px;}
                  .box05-case-button .finger_mov { bottom: -15%; right: -2%; width: 18%;}
      .box05-decorate-text{ position: absolute; bottom: 0; right: 6%; width: 25px; z-index: 10;}

.button-style{ width: 100%; margin: 0; position: relative;}
   .button-style a{ justify-content: center; width: 100%; margin: 0; box-sizing: border-box; text-decoration: none;  color: #FFF; background-color: #e83679; border-radius: 50px; border: 2px #e83679 solid; transition: 0.25s ease-in-out;}
      .button-style a:visited{ color: #FFF; background-color: #e83679;}
      .button-style a:hover{ color: #e83679; background-color: #FFF;}
      .button-style a:active{ color: #FFF; background-color: #e83679;}

   .box05-evaluate-title{ width: 88%; margin: 25px 6%; position: relative; z-index: 30;}
      .box05-evaluate-bg{ width: 100%; margin: 0; padding: 0 8% 60px; box-sizing: border-box; position: relative;}
         .box05-evaluate-bg-img{ position: absolute; top: -30%; right: 2%; width: 200%; z-index: 1;}
         .box05-evaluate{ width: 86%; margin: 0 7%; z-index: 10;}
         .box05-bgi-round{ position: absolute; bottom: -5%; right: 2%; width: 80px; z-index: 30;}
   .box05-marquee-bg{ width: 92%; margin: 60px 4% 35px; padding: 20px; box-sizing: border-box; background-color: #FFF; border-radius: 30px; position: relative; z-index: 50;}
      .marquee-box{ width: 100%; margin: 0; overflow: hidden;}
         .marquee{ width: 100%; margin: 0;}
            .marquee img{ width: 1300px !important;}
   .box05-bottom-text{ width: 86%; margin: 35px 7%;}
   .box05-bottom-button{ justify-content: center; width: 64%; margin: 0 18% -30px; z-index: 30;}
      .box05-bottom-button a{ padding: 8px 0; font-size: 1.05em; font-weight: bold;}
      .box05-bottom-button .finger_mov { bottom: -20%; right: -8%; width: 13%;}
   .box05-bottom{ width: 100%; margin: 0;}


.footer-bg{ width: 100%; margin: 0; padding: 25px 6%; box-sizing: border-box; background-color: #FFF;}
   .footer-box{align-items: flex-start; width: 100%; margin: 0; font-size: 0.9em; font-weight: bolder; line-height: 1.5em; color: #383838;}
      .footer-box-logo{ width: 42%; margin: 0 28%;}
      .footer-box-name{ width: 100%; margin: 18px 0 8px; text-align: center;}
      .footer-box-information{ width: 100%; margin: 0; text-align: center;}
         .footer-box-information p{ width: 100%; margin: 0 0 8px; line-height: 1em;}
   
.contactus-bg{ background-color: #faf1e3;}
   .contact-form-bg{ width: 100%; margin: 25px 0; padding: 0 5%; box-sizing: border-box;}
      .contact-form-bg h1{ display: none;}
      .contact-title{ align-items: center; width: 100%; margin: 0;}
         .contact-title-img{ width: 90%; margin: 0 5% 8px;}
         .contact-title-text{ width: 96%; margin: 0 0 0 4%;}
         .contact-title-triangle{ width: 20px; margin: 16px calc(50% - 10px) 25px;}
      .contact-form{ justify-content: space-between; align-items: center; width: 100%; margin: 0;}
         .contact-form h2{ width: 160px; margin: 0 calc(100% - 160px) 12px 0;}
         .contact-form-boxs, .contact-form-boxb{ width: 100%; margin: 0 0 10px;}
            .contact-form-style{ position: relative;}
               .contact-form-style input{ width: 100%; margin: 0; padding: 8px; box-sizing: border-box; font-size: 16px; background-color: #FFF; border: none; border-radius: 8px;}
               .contact-form-style input::placeholder, .contact-form-boxc-label textarea::placeholder{ color: #c7c8c8;}
               .contact-form-style font{position: absolute; bottom: -8px; right:10px;font-size: 22px; color: #da3716; z-index: 3;}
         .contact-form-boxc{ align-items: flex-start; width: 100%; margin:25px 0;}
            .contact-form-boxc h3{ width: 100%; margin: 0; padding: 0 0 0 8px; box-sizing: border-box; font-size: 17px; font-weight: bolder; color: #3e3a39; position: relative;}
               .contact-form-boxc h3 p{ position: absolute; top: 0; left: 0; width: 8px; margin: 0; color: #da3716;}
            .contact-form-boxc-label{ justify-content: space-between; align-items: center; width: 100%; margin: 18px 0 0; color: #3e3a39;}
               .label-style-ws, .label-style-wm, .label-style-wb{ position: relative; width: 96%; margin: 0 2% 18px;}
               .contact-form-boxc-label TT{ position: absolute; top: 2px; left: 30px; font-size: 18px; font-weight: bolder;}
                  .contact-form-boxc-label TT:hover{ cursor: pointer;}
               .label-style-input{ position: absolute; top: 0; left: 80px; width: calc(90% - 80px); padding: 6px; box-sizing: border-box; background-color: #fff; border: none; border-radius: 8px;}
               .contact-form-boxc-label textarea{ width: 100%; height: 20vh; margin: 15px 0 0; padding: 8px; box-sizing: border-box; font-size: 16px; background-color: #fff; border: none; border-radius: 8px;}
            .contact-form-box-Warning{ width: 100%; margin: 18px 0 0;text-align: justify; font-size: 15px; font-weight: bolder; color: #999;}
         .contact-form-button{ width: 100%; margin: 25px 0 0;}
            .contact-form-button a{ justify-content: center; width: 180px; margin: 0 calc(50% - 90px); padding:13px 0; box-sizing: border-box; text-decoration: none; font-size: 22px; font-weight: bolder; line-height: 1em; letter-spacing: 5px; color: #e73679; border: 2px #e73679 solid; border-radius: 50px; transition: 0.25s ease-in-out;}
               .contact-form-button a:visited{ color: #e73679;}
               .contact-form-button a:hover{ color: #FFF; background-color: #e73679;}
               .contact-form-button a:visited{ color: #e73679;}
   .contact-bottom-logo{ width: 100px; margin: 35px calc(50% - 50px) 0;}
               
               

@media only screen and (min-width: 330px) {
            .box03-achievements-content-item{ width: 48%; margin: 18px 1%;}
               .achievements-content-item-title{ width: 96%; margin: 0 2% 13px; padding: 8px 0 6px; font-size: 1em;}
               .achievements-content-item-counter{ width: 100%; margin: 0; font-size: 1.35em;}
               .box03-achievements-content-item h3{ width: 100%; margin:13px 0 0; font-size: 1em;}
}

/* 表格版面: 481px 到 768px。樣式繼承自: 行動版面。 */
@media only screen and (min-width: 481px) {
   .top-bg{ width: 100%; margin: 0; padding: 6px 8% 10px; border-radius: 0 0 25px 25px;}
      .top-box{ width: 100%; margin: 0;}
         .top-box-logo{ width: 180px; margin: 0 3% 0 0;}
         .top-box-operate{ width: calc(97% - 180px); margin: 0;}
            .top-box-operate-menu{ width: 60px; margin: -53px 0 0;}
               .top-box-operate-menu ul a{font-size: 1.25em;}
            .top-box-operate-button{ width: 130px; margin: 0;}
               .top-box-operate-button a{ width: 100%; margin: 0; padding: 8px 0; font-size: 1em; letter-spacing: 3px;}
               
   .box01-bg{ width: 100%; margin: 0; padding: 80px 0 0;}
      .box01-bgi1{ width: 18%;}
      .box01-bgi2{ top: 10%; left: 3%; width: 80px;}
      .box01{ width: 76%; margin: 0 12%;}
         .box01-text{ width: 100%; margin: 0 0 20px;}
            .box01-text h1{ width: 100%; margin: 0 0 20px;}
            .box01-text h2{ width: 90%; margin: 0 10% 0 0;}
         .box01-img{ width: 110%; margin: 0 -5%;}
            .box01-img-bg{ top: 10%; left: 15%; width: 160%;}
         .box01-label{ width: 100%; margin: 30px 0 0;}
            .box01-label-box, .box01-label-box-b{ margin: 3px 1%; padding: 10px 0; font-size: 1em;}
            .box01-label-box{ width: 23%;}
            .box01-label-box-b{ width: 28%;}
      .box01-bgi-round{ bottom: 1%; right: 2%; width: 80px;}

   .box02-bg{ width: 100%; margin: 0;}
      .box02{ width: 100%; margin: 0; padding: 25px 3%;}
         .box02-img{ width: 35%; margin: 0 0 0 5%;}
         .box02-text{ width: 60%; margin: 0 ;}
            .box02-text-t1, .box02-text-t3{ width: 85%; margin: 0 15% 0 0;}
            .box02-text-t2{ width: 85%; margin: 6% 0 6% 15%;}

   .box03-bg{ width: 100%; margin: 0;}
      .box03{ width: 100%; margin: 0; padding: 0 8%;}
         .box03-project-title{ width: 66%; margin: 0 17% 30px;}
         .box03-project{ width: 100%; margin: 0 0 50px;}
            .box03-project-items{ width: 50%; margin: 25px 25%; padding: 10px 0 0;}
               .box03-decorate{ top: -9%; left: 1%; width: 40px; margin: 0;}
               .box03-project-items-title{ width: 70%; margin: 0 15%;}
               .box03-project-items-content{ width: 100%; margin: -25px 0 0; padding: 35px 25px 20px; border-radius: 25px;}
                  .box03-project-items-content h2{ width: 100%; margin: 0 0 20px;}
         .box03-achievements-title{ width: 88%; margin: 30px 6%;}
         .box03-achievements-content{ width: 100%; margin: 0 0 50px;}
            .box03-achievements-content-item{ width: 48%; margin: 20px 1%;}
               .achievements-content-item-title{ width: 100%; margin: 0 0 16px; padding: 12px 0 8px; font-size: 1.15em;}
               .achievements-content-item-counter{ width: 100%; margin: 0; font-size: 1.85em;}
               .box03-achievements-content-item h3{ width: 100%; margin:16px 0 0; font-size: 1.15em;}
         .box03-milestone-title{ width: 44%; margin: 30px 28% 40px;}
         .box03-milestone-content{ width: 100%; margin: 0;}
            .box03-milestone-item{ width: 70%; margin: 30px 15%;}
               .box03-milestone-item-logo{ width: 45%; margin: 0 5% 0 0;}
               .box03-milestone-item-text{ width: 50%; margin: 0;}
            .box03-milestone-t1{ width: 70%; margin: 60px 15% 0;}
            .box03-milestone-t2{ width: 92%; margin:20px 4%;}

   .box04-bg{ width: 100%; margin: 0; padding: 50px 0 0;}
      .box04-bgi1{ width: 25.4%;}
      .box04-bgi-round{ bottom: 1%; left: 3%; width: 90px;}
      .box04-decorate-i{ top: 6%; right: 13%; width: 100px;}
      .box04-title{ width: 44%; margin: 0 28% 50px;}
      .box04{ width: 100%; margin: 0; padding: 0 5%;}
         .box04-content{ width: 100%; margin: 0;}
            .box04-content-box{ width: 70%; margin: 15px 15%;}
      .box04-bottom{ width: 100%; margin:0;}

   .box05-bg{ width: 100%; margin: 0;}
      .box05-case-title{ width: 50%; margin: -15px 25% 50px;}
      .box05-case{ width: 100%; margin: 0; padding: 0 18% 45px;}
         .box05-case-scroll{ width: 100%; margin: 0;}
            .box05-case-text{ width: 100%; margin: 0 0 20px;}
            .box05-case-img{ width: 100%; margin: 0;}
               .box05-case-button{ bottom: 18%; right: calc(50% - 70px); width: 140px;}
                  .box05-case-button a{ padding: 6px 0; font-size: 16px;}
         .box05-decorate-text{ bottom: 0; right: 12%; width: 25px;}

      .box05-evaluate-title{ width: 80%; margin: 30px 10% 35px;}
         .box05-evaluate-bg{ width: 100%; margin: 0; padding: 0 10% 80px;}
            .box05-evaluate-bg-img{ top: -20%; right: 3%; width: 180%;}
            .box05-evaluate{ width: 80%; margin: 0 10%;}
            .box05-bgi-round{ bottom: -6%; right: 3%; width: 100px;}
      .box05-marquee-bg{ width: 90%; margin: 90px 5% 50px; padding: 25px; border-radius: 50px;}
               .marquee img{ width: 1600px !important;}
      .box05-bottom-text{ width: 70%; margin: 50px 15%;}
      .box05-bottom-button{ width: 56%; margin: 0 22% -40px;}
         .box05-bottom-button a{ padding: 9px 0; font-size: 1.25em;}


   .footer-bg{ width: 100%; margin: 0; padding: 25px 12%;}
      .footer-box{ width: 100%; margin: 0; font-size: 0.95em;}
         .footer-box-logo{ width: 38%; margin: 0 31%;}
         .footer-box-name{ width: 90%; margin: 30px 5% 10px;}
         .footer-box-information{ width: 90%; margin:0 5%;}
            .footer-box-information p{ width: 100%; margin: 0 0 10px;}

   
      .contact-form-bg{ width: 100%; margin: 35px 0; padding: 0 8%;}
         .contact-title{ width: 100%; margin: 0;}
            .contact-title-img{ width: 70%; margin: 0 15% 10px;}
            .contact-title-text{ width: 94%; margin: 0 0 0 5%;}
            .contact-title-triangle{ width: 26px; margin: 15px calc(50% - 13px) 30px;}
         .contact-form{ width: 100%; margin: 0;}
            .contact-form h2{ width: 200px; margin: 0 calc(100% - 200px) 12px 0;}
            .contact-form-boxs, .contact-form-boxb{ width: 100%; margin: 0 0 12px;}
                  .contact-form-style input{ width: 100%; margin: 0; padding: 8px; font-size: 18px;}
            .contact-form-boxc{ width: 100%; margin:30px 0;}
               .contact-form-boxc h3{ width: 100%; margin: 0; padding: 0 0 0 10px; font-size: 20px;}
                  .contact-form-boxc h3 p{ width: 10px;}
               .contact-form-boxc-label{ width: 100%; margin: 18px 0 0;}
                  .label-style-ws{ width: 48%; margin: 0 1% 18px 0;}
                  .label-style-wm{ width: 100%; margin: 0 0 18px;}
                  .label-style-wb{ width: 100%; margin: 0 0 18px;}
                  .contact-form-boxc-label TT{ top: 3px;  left: 35px; font-size: 18px;}
                  .label-style-input{ top: 0; left: 90px; width: calc(90% - 90px); padding: 10px;}
                  .contact-form-boxc-label textarea{ width: 100%; height: 20vh; margin: 15px 0 0; padding: 10px; font-size: 18px;}
               .contact-form-box-Warning{ width: 100%; margin: 35px 0 0; font-size: 16px;}
            .contact-form-button{ width: 100%; margin: 30px 0 0;}
               .contact-form-button a{ width: 230px; margin: 0 calc(50% - 115px); padding:16px 0; font-size: 24px;}
      .contact-bottom-logo{ width: 130px; margin: 50px calc(50% - 65px) 0;}

}

@media only screen and (min-width: 681px) {
            .box05-evaluate-bg-img{ top: -60%; right: 3%; width: 160%;}
}

/* 桌面版面: 768px 到1024繼承自: 行動版面和表格版面。 */
@media only screen and (min-width: 769px) {
   .top-bg{ width: 100%; margin: 0; padding: 8px 8% 13px; border-radius: 0 0 30px 30px;}
      .top-box{ width: 100%; margin: 0;}
         .top-box-logo{ width: 200px; margin: 0 3% 0 0;}
         .top-box-operate{ width: calc(97% - 200px); margin: 0;}
            .top-box-operate-menu{ width: 60px; margin: -50px 0 0 ;}
               .top-box-operate-menu ul a{font-size: 1.25em;}
            .top-box-operate-button{ width: 150px; margin: 0;}
               .top-box-operate-button a{ width: 100%; margin: 0; padding: 10px 0; font-size: 1.15em; letter-spacing: 4px;}

   .box01-bg{ width: 100%; margin: 0; padding: 100px 0 0;}
      .box01-bgi1{ width: 12%;}
      .box01-bgi2{ top: 12%; left: 1%; width: 90px;}
      .box01{ width: 80%; margin: 0 10%;}
         .box01-text{ width: 50%; margin: 0;}
            .box01-text h1{ width: 100%; margin: 0 0 20px;}
            .box01-text h2{ width: 90%; margin: 0 10% 0 0;}
         .box01-img{ width: 60%; margin: 0 0 0 -10%;}
            .box01-img-bg{ top: 10%; left: 15%; width: 160%;}
         .box01-label{ width: 100%; margin: 40px 0 0;}
            .box01-label-box, .box01-label-box-b{ margin: 0 0.5%; padding: 12px 0 10px; font-size: 0.9em;}
            .box01-label-box{ width: 13%;}
            .box01-label-box-b{ width: 15%;}
      .box01-bgi-round{ bottom: 3%; right: 1%; width: 90px;}
      .box01-bottom-pc{ display: inline-block;}
      .box01-bottom-ph{ display: none;}

   .box02-bg{ width: 100%; margin: 0;}
      .box02{ width: 100%; margin: 0; padding: 35px 10% 45px;}
         .box02-img{ width: 35%; margin: 0 0 0 5%;}
         .box02-text{ width: 60%; margin: 0 ;}
            .box02-text-t1, .box02-text-t3{ width: 85%; margin: 0 15% 0 0;}
            .box02-text-t2{ width: 85%; margin: 6% 0 6% 15%;}

   .box03-bg{ width: 100%; margin: 0;}
      .box03{ width: 100%; margin: 0; padding: 0 8%;}
         .box03-project-title{ width: 50%; margin: 0 25% 70px;}
         .box03-project{ width: 100%; margin: 0 0 90px;}
            .box03-project-items{ width: 32%; margin: 0; padding: 10px 0 0;}
               .box03-decorate{ top: -10%; left: 2%; width: 45px; margin: 0;}
               .box03-project-items-title{ width: 60%; margin: 0 20%;}
               .box03-project-items-content{ width: 100%; margin: -25px 0 0; padding: 40px 22px 25px; border-radius: 30px;}
                  .box03-project-items-content h2{ width: 100%; margin: 0 0 20px;}
         .box03-achievements-title{ width: 64%; margin: 30px 18% 50px;}
         .box03-achievements-content{ width: 80%; margin: 0 10% 90px;}
            .box03-achievements-content-item{ width: 48%; margin: 25px 0;}
               .achievements-content-item-title{ width: 100%; margin: 0 0 20px; padding: 13px 0 10px; font-size: 1.5em;}
               .achievements-content-item-counter{ width: 100%; margin: 0; font-size: 2.35em;}
               .box03-achievements-content-item h3{ width: 100%; margin:18px 0 0; font-size: 1.45em;}
         .box03-milestone-title{ width: 40%; margin: 30px 30% 50px;}
         .box03-milestone-content{ width: 100%; margin: 0;}
            .box03-milestone-item{ width: 58%; margin: 35px 31%;}
               .box03-milestone-item-logo{ width: 45%; margin: 0 5% 0 0;}
               .box03-milestone-item-text{ width: 50%; margin: 0;}
            .box03-milestone-t1{ width: 50%; margin: 60px 25% 0;}
            .box03-milestone-t2{ width: 76%; margin: 25px 12%;}

   .box04-bg{ width: 100%; margin: 0; padding: 60px 0 0;}
      .box04-bgi1{ width: 25.4%;}
      .box04-bgi-round{ bottom: 3%; left: 3%; width: 120px;}
      .box04-decorate-i{ top: 9%; right: 9%; width: 160px;}
      .box04-title{ width: 40%; margin: 0 30%;}
      .box04{ width: 100%; margin: 0; padding: 0 5%;}
         .box04-content{ width: 100%; margin: 0;}
            .box04-content-bg-line{ display: inline-block; top: 110px; left: 36%; width: 36%;}
            .box04-content-box{ width: 42%;}
            .box04-content-distance1{ margin: 0 0 0 4%;}
            .box04-content-distance2{ margin: 18% 0 0 8%;}
            .box04-content-distance3{ margin: -6% 0 0 4%;}
            .box04-content-distance4{ margin: 20% 0 0 8%;}
            .box04-content-distance5{ margin: 0 0 0 10%;}
            .box04-content-distance6{ margin: 16% 0 0 0;}
            .box04-content-distance7{ margin: 8% 0 100px 18%;}

   .box05-bg{ width: 100%; margin: 0;}
      .box05-case-title{ width: 46%; margin: -35px 27% 90px;}
      .box05-case{ width: 100%; margin: 0; padding: 0 10% 130px;}
         .box05-case-scroll{ width: 100%; margin: 0;}
            .box05-case-text{ width: 60%; margin: 0;}
            .box05-case-img{ width: 65%; margin: 0 0 0 -25%;}
               .box05-case-button{ bottom: 24%; right: 10%; width: 180px;}
                  .box05-case-button a{ padding: 10px 0; font-size: 1.25em;}
         .box05-decorate-text{ bottom: 0; right: 8%; width: 30px;}

      .box05-evaluate-title{ width: 70%; margin: 60px 15% 50px;}
         .box05-evaluate-bg{ width: 100%; margin: 0; padding: 0 12% 100px;}
            .box05-evaluate-bg-img{ top: -60%; right: 3%; width: 140%;}
            .box05-evaluate{ width: 100%; margin: 0;}
            .box05-bgi-round{ bottom: -10%; right: 3%; width: 120px;}
      .box05-marquee-bg{ width: 80%; margin: 120px 10% 90px; padding: 30px; border-radius: 60px;}
               .marquee img{ width: 1800px !important;}
      .box05-bottom-text{ width: 68%; margin: 60px 16%;}
      .box05-bottom-button{ width: 50%; margin: 0 25% -60px;}
         .box05-bottom-button a{ padding: 12px 0; font-size: 1.65em;}


   .footer-bg{ width: 100%; margin: 0; padding: 30px 8%;}
      .footer-box{ width: 100%; margin: 0; font-size: 15px;}
         .footer-box-logo{ width: 16%; margin: 0;}
         .footer-box-name{ width: 29%; margin: 2% 2% 0; text-align: left;}
         .footer-box-information{ width: 51%; margin:2% 0 0; text-align: left;}
            .footer-box-information p{ width: 100%; margin: 2px 0 8px;}

   
      .contact-form-bg{ width: 100%; margin: 40px 0; padding: 0 6%;}
         .contact-title{ width: 100%; margin: 0;}
            .contact-title-img{ width: 35%; margin: 0 5% 0 0;}
            .contact-title-text{ width: 60%; margin: 0;}
            .contact-title-triangle{ width: 30px; margin: 20px calc(50% - 15px) 40px;}
         .contact-form{ width: 100%; margin: 0;}
            .contact-form h2{ width: 200px; margin: 0 calc(100% - 200px) 12px 0;}
            .contact-form-boxs{ width: 32.3%; margin: 0 0 12px;}         
            .contact-form-boxb{ width: 49%; margin: 0 0 12px;}
                  .contact-form-style input{ width: 100%; margin: 0; padding: 8px; font-size: 18px;}
            .contact-form-boxc{ width: 100%; margin:30px 0;}
               .contact-form-boxc h3{ width: 100%; margin: 0; padding: 0 0 0 10px; font-size: 20px;}
                  .contact-form-boxc h3 p{ width: 10px;}
               .contact-form-boxc-label{ width: 100%; margin: 20px 0 0;}
                  .label-style-ws{ width: 31%; margin: 0 1% 20px 0;}
                  .label-style-wm{ width: 64.5%; margin: 0 0 20px;}
                  .label-style-wb{ width: 64.5%; margin: 0 0 20px;}
                  .contact-form-boxc-label TT{ top: 2px;  left: 35px; font-size: 20px;}
                  .label-style-input{ top: 0; left: 90px; width: calc(90% - 90px); padding: 10px;}
                  .contact-form-boxc-label textarea{ width: 100%; height: 30vh; margin: 15px 0 0; padding: 10px; font-size: 20px;}
               .contact-form-box-Warning{ width: 100%; margin: 35px 0 0; font-size: 18px;}
            .contact-form-button{ width: 100%; margin: 40px 0 0;}
               .contact-form-button a{ width: 240px; margin: 0 calc(50% - 120px); padding:18px 0; font-size: 26px;}
      .contact-bottom-logo{ width: 130px; margin: 50px calc(50% - 65px) 0;}

}

@media only screen and (min-width: 811px) {
            .box04-content-distance7{ margin: 3% 0 100px 15%;}
}

@media only screen and (min-width: 881px) {
      .box04-decorate-i{ top: 9%; right: 10%; width: 160px;}
      .box04{ width: 100%; margin: 0; padding: 0 5%;}
         .box04-content{ width: 100%; margin: 0;}
            .box04-content-bg-line{ top: 120px; left: 36%; width: 36%;}
            .box04-content-box{ width: 40%;}
            .box04-content-distance1{ margin: 0 0 0 5%;}
            .box04-content-distance2{ margin: 20% 0 0 10%;}
            .box04-content-distance3{ margin: -5% 0 0 5%;}
            .box04-content-distance4{ margin: 20% 0 0 10%;}
            .box04-content-distance5{ margin: 2% 0 0 12%;}
            .box04-content-distance6{ margin: 18% 0 0;}
            .box04-content-distance7{ margin: 7% 0 120px 20%;}
}

@media only screen and (min-width: 921px) {
            .box04-content-bg-line{ top: 155px; left: 35%; width: 36%;}
            .box04-content-distance6{ margin: 20% 0 0;}
            .box04-content-distance7{ margin: 6% 0 120px 15%;}
}

/* 桌面版面: 1025px 到1440繼承自: 行動版面和表格版面。 */
@media only screen and (min-width: 1025px) {
   .top-bg{ width: 100%; margin: 0; padding: 7px 5% 8px; border-radius: 0 0 40px 40px;}
      .top-box{ width: 100%; margin: 0;}
         .top-box-logo{ width: 200px; margin: 0 3% 0 0;}
         .top-box-operate{flex-direction: row; justify-content: flex-end; width: calc(97% - 200px); margin: 0;}
            .top-box-operate-menu{ width: calc(100% - 230px); margin: 0 80px 0 0;}
               .top-box-operate-menu ul a{font-size: 1.25em;}
            .top-box-operate-button{ width: 150px; margin: 0;}
               .top-box-operate-button a{ width: 100%; margin: 0; padding: 10px 0; font-size: 1.15em; letter-spacing: 5px;}

   .box01-bg{ width: 100%; margin: 0; padding: 130px 0 0;}
      .box01-bgi1{ width: 12%;}
      .box01-bgi2{ top: 12%; left: 1%; width: 120px;}
      .box01{ width: 76%; margin: 0 12%;}
         .box01-text{ width: 50%; margin: 0;}
            .box01-text h1{ width: 100%; margin: 0 0 30px;}
            .box01-text h2{ width: 90%; margin: 0 10% 0 0;}
         .box01-img{ width: 60%; margin: 0 0 0 -10%;}
            .box01-img-bg{ top: 10%; left: 15%; width: 160%;}
         .box01-label{ width: 100%; margin: 40px 0 0;}
            .box01-label-box, .box01-label-box-b{ margin: 0 0.5%; padding: 15px 0 13px; font-size: 1.15em;}
            .box01-label-box{ width: 13%;}
            .box01-label-box-b{ width: 15%;}
      .box01-bgi-round{ bottom: 1%; right: 1%; width: 120px;}

   .box02-bg{ width: 100%; margin: 0;}
      .box02{ width: 100%; margin: 0; padding: 50px 10% 70px;}
         .box02-img{ width: 40%; margin: 0 0 0 10%;}
         .box02-text{ width: 50%; margin: 0 ;}
            .box02-text-t1, .box02-text-t3{ width: 85%; margin: 0 15% 0 0;}
            .box02-text-t2{ width: 85%; margin: 8% 0 8% 15%;}

   .box03-bg{ width: 100%; margin: 0;}
      .box03{ width: 100%; margin: 0; padding: 0 12%;}
         .box03-project-title{ width: 50%; margin: 0 25% 80px;}
         .box03-project{ width: 100%; margin: 0 0 100px;}
            .box03-project-items{ width: 31%; margin: 0; padding: 10px 0 0;}
               .box03-decorate{ top: -12%; left: 2%; width: 55px; margin: 0;}
               .box03-project-items-title{ width: 60%; margin: 0 20%;}
               .box03-project-items-content{ width: 100%; margin: -25px 0 0; padding: 40px 25px 25px; border-radius: 35px;}
                  .box03-project-items-content h2{ width: 100%; margin: 0 0 20px;}
         .box03-achievements-title{ width: 60%; margin: 50px 20%;}
         .box03-achievements-content{ width: 80%; margin: 0 10% 100px;}
            .box03-achievements-content-item{ width: 48%; margin: 30px 0;}
               .achievements-content-item-title{ width: 100%; margin: 0 0 20px; padding: 15px 0 10px; font-size: 1.65em;}
               .achievements-content-item-counter{ width: 100%; margin: 0; font-size: 2.65em;}
               .box03-achievements-content-item h3{ width: 100%; margin:20px 0 0; font-size: 1.65em;}
         .box03-milestone-title{ width: 36%; margin: 50px 32% 60px;}
         .box03-milestone-content{ width: 100%; margin: 0;}
            .box03-milestone-item{ width: 60%; margin: 35px 20%;}
               .box03-milestone-item-logo{ width: 45%; margin: 0 5% 0 0;}
               .box03-milestone-item-text{ width: 50%; margin: 0;}
            .box03-milestone-t1{ width: 68%; margin: 90px 16% 0;}
            .box03-milestone-t2{ width: 90%; margin:30px 5%;}

   .box04-bg{ width: 100%; margin: 0; padding: 80px 0 0;}
      .box04-bgi1{ width: 25.4%;}
      .box04-bgi-round{ bottom: 5%; left: 5%; width: 160px;}
      .box04-decorate-i{ top: 9%; right: 8%; width: 200px;}
      .box04-title{ width: 36%; margin: 0 32%;}
      .box04{ width: 100%; margin: 0; padding: 0 8%;}
         .box04-content{ width: 100%; margin: 0;}
            .box04-content-bg-line{ top: 140px; left: 36%; width: 36%;}
            .box04-content-box{ width: 40%;}
            .box04-content-distance1{ margin: 0 0 0 5%;}
            .box04-content-distance2{ margin: 20% 0 0 10%;}
            .box04-content-distance3{ margin: -4% 0 0 5%;}
            .box04-content-distance4{ margin: 20% 0 0 10%;}
            .box04-content-distance5{ margin: 2% 0 0 12%;}
            .box04-content-distance6{ margin: 18% 0 0 0;}
            .box04-content-distance7{ margin: 6% 0 120px 20%;}

   .box05-bg{ width: 100%; margin: 0;}
      .box05-case-title{ width: 40%; margin: -40px 30% 120px;}
      .box05-case{ width: 100%; margin: 0; padding: 0 16% 140px;}
         .box05-case-scroll{ width: 100%; margin: 0;}
            .box05-case-text{ width: 60%; margin: 0 ;}
            .box05-case-img{ width: 65%; margin: 0 0 0 -25%;}
               .box05-case-button{ bottom: 26%; right: 10%; width: 220px;}
                  .box05-case-button a{ padding: 11px 0; font-size: 23px;}
         .box05-decorate-text{ bottom: 0; right: 8%; width: 34px;}

      .box05-evaluate-title{ width: 60%; margin: 100px 20% 60px;}
         .box05-evaluate-bg{ width: 100%; margin: 0; padding: 0 14% 100px;}
            .box05-evaluate-bg-img{ top: -60%; right: 3%; width: 140%;}
            .box05-evaluate{ width: 100%; margin: 0;}
            .box05-bgi-round{ bottom: -10%; right: 3%; width: 160px;}
      .box05-marquee-bg{ width: 78%; margin: 140px 11% 100px; padding: 40px; border-radius: 80px;}
               .marquee img{ width: 2100px !important;}
      .box05-bottom-text{ width: 60%; margin: 80px 20%;}
      .box05-bottom-button{ width: 46%; margin: 0 29% -100px;}
         .box05-bottom-button a{ padding: 12px 0; font-size: 2em;}


   .footer-bg{ width: 100%; margin: 0; padding: 40px 10%;}
      .footer-box{ width: 100%; margin: 0; font-size: 17px;}
         .footer-box-logo{ width: 18%; margin: 0;}
         .footer-box-name{ width: 26%; margin: 2% 5% 0;}
         .footer-box-information{ width: 46%; margin: 2% 0 0;}
            .footer-box-information p{ width: 100%; margin: 3px 0 12px;}

   
      .contact-form-bg{ width: 100%; margin: 50px 0; padding: 0 8%;}
         .contact-title{ width: 100%; margin: 0;}
            .contact-title-img{ width: 35%; margin: 0 5% 0 0;}
            .contact-title-text{ width: 60%; margin: 0;}
            .contact-title-triangle{ width: 40px; margin: 25px calc(50% - 20px) 50px;}
         .contact-form{ width: 100%; margin: 0;}
            .contact-form h2{ width: 230px; margin: 0 calc(100% - 230px) 15px 0;}
            .contact-form-boxs{ width: 31.3%; margin: 0 0 15px;}         
            .contact-form-boxb{ width: 48%; margin: 0 0 15px;}
                  .contact-form-style input{ width: 100%; margin: 0; padding: 10px; font-size: 20px;}
            .contact-form-boxc{ width: 100%; margin:35px 0;}
               .contact-form-boxc h3{ width: 100%; margin: 0; padding: 0 0 0 12px; font-size: 22px;}
                  .contact-form-boxc h3 p{ width: 10px;}
               .contact-form-boxc-label{ width: 100%; margin: 25px 0 0;}
                  .label-style-ws{ width: 23%; margin: 0 1% 25px 0;}
                  .label-style-wm{ width: 26%; margin: 0 0 25px;}
                  .label-style-wb{ width: 50%; margin: 0 0 25px;}
                  .contact-form-boxc-label TT{ top: 2px;  left: 30px; font-size: 18px;}
                  .label-style-input{ top: 0; left: 90px; width: calc(90% - 90px); padding: 10px;}
                  .contact-form-boxc-label textarea{ width: 100%; height: 30vh; margin: 15px 0 0; padding: 10px; font-size: 20px;}
               .contact-form-box-Warning{ width: 100%; margin: 35px 0 0; font-size: 20px;}
            .contact-form-button{ width: 100%; margin: 50px 0 0;}
               .contact-form-button a{ width: 260px; margin: 0 calc(50% - 130px); padding:20px 0; font-size: 28px;}
      .contact-bottom-logo{ width: 150px; margin: 60px calc(50% - 75px) 0;}


}

@media only screen and (min-width: 1101px) {
      .box04{ width: 100%; margin: 0; padding: 0 8%;}
         .box04-content{ width: 100%; margin: 0;}
            .box04-content-bg-line{ top: 150px; left: 36%; width: 36%;}
            .box04-content-box{ width: 40%;}
            .box04-content-distance1{ margin: 0 0 0 5%;}
            .box04-content-distance2{ margin: 20% 0 0 10%;}
            .box04-content-distance3{ margin: -6% 0 0 5%;}
            .box04-content-distance4{ margin: 20% 0 0 10%;}
            .box04-content-distance5{ margin: 2% 0 0 12%;}
            .box04-content-distance6{ margin: 18% 0 0 0;}
            .box04-content-distance7{ margin: 7% 0 120px 20%;}
}

@media only screen and (min-width: 1201px) {
   .top-bg{ width: 100%; margin: 0; padding: 8px 5% 10px; border-radius: 0 0 50px 50px;}
      .top-box{ width: 100%; margin: 0;}
         .top-box-logo{ width: 220px; margin: 0 5% 0 0;}
         .top-box-operate{ width: calc(95% - 220px); margin: 0;}
            .top-box-operate-menu{ width: calc(100% - 240px); margin: 0 80px 0 0;}
               .top-box-operate-menu ul a{font-size: 1.4em;}
            .top-box-operate-button{ width: 160px; margin: 0;}
               .top-box-operate-button a{ width: 100%; margin: 0; padding: 10px 0; font-size: 1.25em; letter-spacing: 6px;}

   .box01-bg{ width: 100%; margin: 0; padding: 130px 0 0;}
      .box01-bgi1{ width: 12%;}
      .box01-bgi2{ top: 12%; left: 2%; width: 140px;}
      .box01{ width: 76%; margin: 0 12%;}
         .box01-text{ width: 50%; margin: 0;}
            .box01-text h1{ width: 100%; margin: 0 0 30px;}
            .box01-text h2{ width: 90%; margin: 0 10% 0 0;}
         .box01-img{ width: 60%; margin: 0 0 0 -10%;}
            .box01-img-bg{ top: 10%; left: 15%; width: 160%;}
         .box01-label{ width: 100%; margin: 50px 0 0;}
            .box01-label-box, .box01-label-box-b{ margin: 0 0.5%; padding: 14px 0 12px; font-size: 1.35em;}
            .box01-label-box{ width: 13%;}
            .box01-label-box-b{ width: 15%;}
      .box01-bgi-round{ bottom: 2%; right: 2%; width: 140px;}

   .box03-bg{ width: 100%; margin: 0;}
      .box03{ width: 100%; margin: 0; padding: 0 12%;}
         .box03-project-title{ width: 50%; margin: 0 25% 90px;}
         .box03-project{ width: 100%; margin: 0 0 120px;}
            .box03-project-items{ width: 31%; margin: 0; padding: 10px 0 0;}
               .box03-decorate{ top: -10%; left: 3%; width: 60px; margin: 0;}
               .box03-project-items-title{ width: 60%; margin: 0 20%;}
               .box03-project-items-content{ width: 100%; margin: -30px 0 0; padding: 50px 35px 25px; border-radius: 50px;}
                  .box03-project-items-content h2{ width: 100%; margin: 0 0 30px;}
         .box03-achievements-title{ width: 50%; margin: 80px 25% 60px;}
         .box03-achievements-content{ width: 76%; margin: 0 12% 120px;}
            .box03-achievements-content-item{ width: 48%; margin: 35px 0;}
               .achievements-content-item-title{ width: 100%; margin: 0 0 30px; padding: 15px 0 10px; font-size: 2em;}
               .achievements-content-item-counter{ width: 100%; margin: 0; font-size: 3em;}
               .box03-achievements-content-item h3{ width: 100%; margin:30px 0 0; font-size: 1.85em;}
         .box03-milestone-title{ width: 32%; margin: 80px 34% 60px;}
         .box03-milestone-content{ width: 100%; margin: 0;}
            .box03-milestone-item{ width: 44%; margin: 40px 28%;}
               .box03-milestone-item-logo{ width: 45%; margin: 0 5% 0 0;}
               .box03-milestone-item-text{ width: 50%; margin: 0;}
            .box03-milestone-t1{ width: 50%; margin: 100px 25% 0;}
            .box03-milestone-t2{ width: 66%; margin: 30px 17%;}

   .box04-bg{ width: 100%; margin: 0; padding: 100px 0 0;}
      .box04-bgi1{ width: 25.4%;}
      .box04-bgi-round{ bottom: 5%; left: 5%; width: 160px;}
      .box04-decorate-i{ top: 9%; right: 13%; width: 230px;}
      .box04-title{ width: 32%; margin: 0 34%;}
      .box04{ width: 100%; margin: 0; padding: 0 8%;}
         .box04-content{ width: 100%; margin: 0;}
            .box04-content-bg-line{ top: 180px; left: 35%; width: 35%;}
            .box04-content-box{ width: 40%;}
            .box04-content-distance1{ margin: 0 0 0 5%;}
            .box04-content-distance2{ margin: 20% 0 0 10%;}
            .box04-content-distance3{ margin: -5% 0 0 5%;}
            .box04-content-distance4{ margin: 20% 0 0 10%;}
            .box04-content-distance5{ margin: 0 0 0 12%;}
            .box04-content-distance6{ margin: 18% 0 0 0;}
            .box04-content-distance7{ margin: 4% 0 120px 15%;}

   .box05-bg{ width: 100%; margin: 0;}
      .box05-case-title{ width: 34%; margin: -50px 33% 130px;}
      .box05-case{ width: 100%; margin: 0; padding: 0 18% 160px;}
         .box05-case-scroll{ width: 100%; margin: 0;}
            .box05-case-text{ width: 55%; margin: 0;}
            .box05-case-img{ width: 65%; margin: 0 0 0 -20%;}
               .box05-case-button{ bottom: 26%; right: 10%; width: 200px;}
                  .box05-case-button a{ padding: 13px 0; font-size: 23px;}
         .box05-decorate-text{ bottom: 0; right: 10%; width: 45px;}

      .box05-evaluate-title{ width: 50%; margin: 120px 25% 80px;}
         .box05-evaluate-bg{ width: 100%; margin: 0; padding: 0 16% 100px;}
            .box05-evaluate-bg-img{ top: -60%; right: 3%; width: 120%;}
            .box05-evaluate{ width: 100%; margin: 0;}
            .box05-bgi-round{ bottom: -8%; right: 6%; width: 160px;}
      .box05-marquee-bg{ width: 70%; margin: 160px 15% 120px; padding: 40px; border-radius: 100px;}
               .marquee img{ width: 2300px !important;}
      .box05-bottom-text{ width: 56%; margin: 90px 22%;}
      .box05-bottom-button{ width: 40%; margin: 0 30% -130px;}
         .box05-bottom-button a{ padding: 12px 0; font-size: 2.35em;}


   .footer-bg{ width: 100%; margin: 0; padding: 50px 12%;}
      .footer-box{ width: 100%; margin: 0; font-size: 19px;}
         .footer-box-logo{ width: 18%; margin: 0;}
         .footer-box-name{ width: 26%; margin: 2% 5% 0;}
         .footer-box-information{ width: 46%; margin: 2% 0 0;}
            .footer-box-information p{ width: 100%; margin: 4px 0 14px;}

   
      .contact-form-bg{ width: 100%; margin: 60px 0; padding: 0 10%;}
         .contact-title{ width: 100%; margin: 0;}
            .contact-title-img{ width: 35%; margin: 0 5% 0 0;}
            .contact-title-text{ width: 60%; margin: 0;}
            .contact-title-triangle{ width: 40px; margin: 30px calc(50% - 20px) 60px;}
         .contact-form{ width: 100%; margin: 0;}
            .contact-form h2{ width: 250px; margin: 0 calc(100% - 250px) 15px 0;}
            .contact-form-boxs{ width: 31.3%; margin: 0 0 15px;}         
            .contact-form-boxb{ width: 48%; margin: 0 0 15px;}
                  .contact-form-style input{ width: 100%; margin: 0; padding: 10px; font-size: 20px;}
            .contact-form-boxc{ width: 100%; margin:35px 0;}
               .contact-form-boxc h3{ width: 100%; margin: 0; padding: 0 0 0 12px; font-size: 22px;}
                  .contact-form-boxc h3 p{ width: 10px;}
               .contact-form-boxc-label{ width: 100%; margin: 25px 0 0;}
                  .label-style-ws{ width: 22%; margin: 0 2% 25px 0;}
                  .label-style-wm{ width: 26%; margin: 0 0 25px;}
                  .label-style-wb{ width: 50%; margin: 0 0 25px;}
                  .contact-form-boxc-label TT{ top: 0; left: 35px; font-size: 20px;}
                  .label-style-input{ top: 0; left: 90px; width: calc(90% - 90px); padding: 10px;}
                  .contact-form-boxc-label textarea{ width: 100%; height: 30vh; margin: 15px 0 0; padding: 10px; font-size: 20px;}
               .contact-form-box-Warning{ width: 100%; margin: 35px 0 0; font-size: 20px;}
            .contact-form-button{ width: 100%; margin: 50px 0 0;}
               .contact-form-button a{ width: 300px; margin: 0 calc(50% - 150px); padding:20px 0; font-size: 30px;}
      .contact-bottom-logo{ width: 150px; margin: 60px calc(50% - 75px) 0;}

}

@media only screen and (min-width: 1291px) {
      .box04-decorate-i{ top: 10%; right: 10%; width: 260px;}
      .box04{ width: 100%; margin: 0; padding: 0 8%;}
         .box04-content{ width: 100%; margin: 0;}
            .box04-content-bg-line{ top: 200px; left: 38%; width: 30%;}
            .box04-content-box{ width: 40%;}
            .box04-content-distance1{ margin: 0 0 0 5%;}
            .box04-content-distance2{ margin: 20% 0 0 10%;}
            .box04-content-distance3{ margin: -10% 0 0 5%;}
            .box04-content-distance4{ margin: 12% 0 0 10%;}
            .box04-content-distance5{ margin: -4% 0 0 12%;}
            .box04-content-distance6{ margin: 12% 0 0;}
            .box04-content-distance7{ margin: 2% 0 120px 22%;}
}

/* 桌面版面: 1441px 到最大樣式繼承自: 行動版面和表格版面。 */
@media only screen and (min-width: 1441px) {
   .top-bg{ width: 100%; margin: 0; padding: 8px 8% 12px;}
      .top-box{ width: 100%; margin: 0;}
         .top-box-logo{ width: 220px; margin: 0 5% 0 0;}
         .top-box-operate{ width: calc(95% - 220px); margin: 0;}
            .top-box-operate-menu{ width: calc(100% - 240px); margin: 0 80px 0 0;}
               .top-box-operate-menu ul a{font-size: 1.45em;}
            .top-box-operate-button{ width: 160px; margin: 0;}
               .top-box-operate-button a{ width: 100%; margin: 0; padding: 12px 0; font-size: 1.25em; letter-spacing: 6px;}

   .box01-bg{ width: 100%; margin: 0; padding: 150px 0 0;}
      .box01-bgi1{ width: 8%;}
      .box01-bgi2{ top: 12%; left: 3%; width: 160px;}
      .box01{ width: 74%; margin: 0 13%;}
         .box01-text{ width: 50%; margin: 0;}
            .box01-text h1{ width: 100%; margin: 0 0 30px;}
            .box01-text h2{ width: 90%; margin: 0 10% 0 0;}
         .box01-img{ width: 60%; margin: 0 0 0 -10%;}
            .box01-img-bg{ top: 10%; left: 15%; width: 160%;}
         .box01-label{ width: 100%; margin: 50px 0 0;}
            .box01-label-box, .box01-label-box-b{ margin: 0 0.5%; padding: 20px 0 16px; font-size: 1.5em;}
            .box01-label-box{ width: 13%;}
            .box01-label-box-b{ width: 15%;}
      .box01-bgi-round{ bottom: 5%; right: 3%; width: 160px;}

   .box02-bg{ width: 100%; margin: 0;}
      .box02{ width: 100%; margin: 0; padding: 60px 15% 80px;}
         .box02-img{ width: 40%; margin: 0 0 0 10%;}
         .box02-text{ width: 50%; margin: 0 ;}
            .box02-text-t1, .box02-text-t3{ width: 85%; margin: 0 15% 0 0;}
            .box02-text-t2{ width: 85%; margin: 6% 0 6% 15%;}

   .box03-bg{ width: 100%; margin: 0;}
      .box03{ width: 100%; margin: 0; padding: 0 12%;}
         .box03-project-title{ width: 40%; margin: 0 30% 120px;}
         .box03-project{ width: 86%; margin: 0 7% 180px;}
            .box03-project-items{ width: 31%; margin: 0; padding: 10px 0 0;}
               .box03-decorate{ top: -50px; left: 3%; width: 70px; margin: 0;}
               .box03-project-items-title{ width: 60%; margin: 0 20%;}
               .box03-project-items-content{ width: 100%; margin: -40px 0 0; padding: 55px 40px 35px; border-radius: 60px;}
                  .box03-project-items-content h2{ width: 100%; margin: 0 0 35px;}
         .box03-achievements-title{ width: 40%; margin: 90px 30% 60px;}
         .box03-achievements-content{ width: 64%; margin: 0 18% 160px;}
            .box03-achievements-content-item{ width: 48%; margin: 45px 0;}
               .achievements-content-item-title{ width: 100%; margin: 0 0 35px; padding: 15px 0 10px; font-size: 2em;}
               .achievements-content-item-counter{ width: 100%; margin: 0; font-size: 3.25em;}
               .box03-achievements-content-item h3{ width: 100%; margin:35px 0 0; font-size: 2em;}
         .box03-milestone-title{ width: 26%; margin: 90px 37%;}
         .box03-milestone-content{ width: 100%; margin: 0;}
            .box03-milestone-item{ width: 42%; margin: 80px 29%;}
               .box03-milestone-item-logo{ width: 45%; margin: 0 5% 0 0;}
               .box03-milestone-item-text{ width: 50%; margin: 0;}
            .box03-milestone-t1{ width: 40%; margin: 120px 30% 0;}
            .box03-milestone-t2{ width: 50%; margin: 40px 25%;}

   .box04-bg{ width: 100%; margin: 0; padding: 100px 0 0;}
      .box04-bgi1{ width: 25.4%;}
      .box04-bgi-round{ bottom: 8%; left: 5%; width: 180px;}
      .box04-decorate-i{ top: 10%; right: 15%; width: 260px;}
      .box04-title{ width: 26%; margin: 0 37%;}
      .box04{ width: 100%; margin: 0; padding: 0 8%;}
         .box04-content{ width: 100%; margin: 0;}
            .box04-content-bg-line{ top: 220px; left: 38%; width: 30%;}
            .box04-content-box{ width: 40%;}
            .box04-content-distance1{ margin: 0 0 0 5%;}
            .box04-content-distance2{ margin: 20% 0 0 10%;}
            .box04-content-distance3{ margin: -10% 0 0 5%;}
            .box04-content-distance4{ margin: 12% 0 0 10%;}
            .box04-content-distance5{ margin: -4% 0 0 12%;}
            .box04-content-distance6{ margin: 12% 0 0 ;}
            .box04-content-distance7{ margin: 2% 0 120px 22%;}

   .box05-bg{ width: 100%; margin: 0;}
      .box05-case-title{ width: 28%; margin: -50px 36% 180px;}
      .box05-case{ width: 100%; margin: 0; padding: 0 18% 220px;}
         .box05-case-scroll{ width: 100%; margin: 0;}
            .box05-case-text{ width: 55%; margin: 0;}
            .box05-case-img{ width: 65%; margin: 0 0 0 -20%;}
               .box05-case-button{ bottom: 26%; right: 10%; width: 260px;}
                  .box05-case-button a{ padding: 13px 0; font-size: 24px;}
                  .box05-case-button .finger_mov { bottom: -15%; right: -2%; width: 18%;}
         .box05-decorate-text{ bottom: 0; right: 12%; width: 50px;} 
      .box05-evaluate-title{ width: 50%; margin: 120px 25% 100px;}
         .box05-evaluate-bg{ width: 100%; margin: 0; padding: 0 21% 120px;}
            .box05-evaluate-bg-img{ top: -60%; right: 3%; width: 120%;}
            .box05-evaluate{ width: 100%; margin: 0;}
            .box05-bgi-round{ bottom: -8%; right: 6%; width: 180px;}
      .box05-marquee-bg{ width: 70%; margin: 160px 15%; padding: 50px; border-radius: 100px;}
               .marquee img{ width: 2500px !important;}
      .box05-bottom-text{ width: 50%; margin: 120px 25%;}
      .box05-bottom-button{ width: 36%; margin: 0 32% -130px;}
         .box05-bottom-button a{ padding: 12px 0; font-size: 2.5em;}


   .footer-bg{ width: 100%; margin: 0; padding: 60px 15%;}
      .footer-box{ width: 100%; margin: 0; font-size: 21px;}
         .footer-box-logo{ width: 18%; margin: 0;}
         .footer-box-name{ width: 27%; margin: 3% 4% 0;}
         .footer-box-information{ width: 47%; margin: 3% 0 0;}
            .footer-box-information p{ width: 100%; margin: 3px 0 17px;}

   
      .contact-form-bg{ width: 1100px; margin: 60px calc(50% - 550px); padding: 0;}
         .contact-title{ width: 100%; margin: 0;}
            .contact-title-img{ width: 35%; margin: 0 5% 0 0;}
            .contact-title-text{ width: 60%; margin: 0;}
            .contact-title-triangle{ width: 40px; margin: 30px calc(50% - 20px) 60px;}
         .contact-form{ width: 100%; margin: 0;}
            .contact-form h2{ width: 250px; margin: 0 calc(100% - 250px) 15px 0;}
            .contact-form-boxs{ width: 31.3%; margin: 0 0 15px;}         
            .contact-form-boxb{ width: 48%; margin: 0 0 15px;}
                  .contact-form-style input{ width: 100%; margin: 0; padding: 10px; font-size: 20px;}
            .contact-form-boxc{ width: 100%; margin:35px 0;}
               .contact-form-boxc h3{ width: 100%; margin: 0; padding: 0 0 0 12px; font-size: 22px;}
                  .contact-form-boxc h3 p{ width: 10px;}
               .contact-form-boxc-label{ width: 100%; margin: 25px 0 0;}
                  .label-style-ws{ width: 22%; margin: 0 2% 25px 0;}
                  .label-style-wm{ width: 27%; margin: 0 0 25px;}
                  .label-style-wb{ width: 51%; margin: 0 0 25px;}
                  .contact-form-boxc-label TT{  left: 35px; font-size: 20px;}
                  .label-style-input{ top: 0; left: 90px; width: calc(90% - 90px); padding: 10px;}
                  .contact-form-boxc-label textarea{ width: 100%; height: 30vh; margin: 15px 0 0; padding: 10px; font-size: 20px;}
               .contact-form-box-Warning{ width: 100%; margin: 35px 0 0; font-size: 20px;}
            .contact-form-button{ width: 100%; margin: 50px 0 0;}
               .contact-form-button a{ width: 300px; margin: 0 calc(50% - 150px); padding:20px 0; font-size: 30px;}
      .contact-bottom-logo{ width: 150px; margin: 60px calc(50% - 75px) 0;}
}

@media only screen and (min-width: 1601px) {
      .box01-label-box, .box01-label-box-b{ font-size: 2em;}

      .box04-decorate-i{ top: 10%; right: 15%; width: 280px;}
      .box04{ width: 100%; margin: 0; padding: 0 8%;}
         .box04-content{ width: 100%; margin: 0;}
            .box04-content-bg-line{ top: 255px; left: 38%; width: 30%;}
            .box04-content-box{ width: 40%;}
            .box04-content-distance1{ margin: 0 0 0 5%;}
            .box04-content-distance2{ margin: 20% 0 0 10%;}
            .box04-content-distance3{ margin: -8% 0 0 5%;}
            .box04-content-distance4{ margin: 12% 0 0 10%;}
            .box04-content-distance5{ margin: -3% 0 0 12%;}
            .box04-content-distance6{ margin: 12% 0 0 0;}
            .box04-content-distance7{ margin: 2% 0 120px 22%;}
   
   .footer-bg{ width: 1000px; margin: 0 calc(50% - 500px); padding: 60px 0;}
}
@media only screen and (min-width: 1801px) {
      .box04{ width: 1800px; margin: 0 calc(50% - 900px); padding: 0 8%;}
         .box04-content{ width: 100%; margin: 0;}
            .box04-content-bg-line{ top: 280px; left: 38%; width: 30%;}
            .box04-content-box{ width: 40%;}
            .box04-content-distance1{ margin: 0 0 0 5%;}
            .box04-content-distance2{ margin: 20% 0 0 10%;}
            .box04-content-distance3{ margin: -12% 0 0 5%;}
            .box04-content-distance4{ margin: 10% 0 0 10%;}
            .box04-content-distance5{ margin: -1% 0 0 12%;}
            .box04-content-distance6{ margin: 14% 0 0;}
            .box04-content-distance7{ margin: 2% 0 120px 22%;}
}

/* 動畫 */
.img-floating{ animation: img-floating-mov 8s ease-in-out infinite;}
@keyframes img-floating-mov {
   0%, 50%, 100%{
      transform: translate3d( 0);
   }
   50% {
      transform: translate3d( 0, -6px, 0);
   }
   75% {
      transform: translate3d( 0, 6px, 0);
   }
}
@media only screen and (min-width: 769px) {
   @keyframes img-floating-mov {
      0%, 50%, 100%{
         transform: translate3d( 0);
      }
      25% {
         transform: translate3d( 0, -13px, 0);
      }
      75% {
         transform: translate3d( 0, 13px, 0);
      }
   }
}

[data-aos="rw-100"] {
   transform-origin: right;
   transform: scaleX(100%);
   opacity: 1;
}

[data-aos="rw-100"].aos-animate {
   opacity: 1;
   transform: scaleX(0);
}

.finger_mov {
   animation: finger-a 2s ease infinite;
   position: absolute;
   z-index: 20;
   /* bottom: -15%;
   right: -2%;
   width: 18%; */
}

@keyframes finger-a {
  /* At the beginning of the animation */
   0% {
      /* Scale the element to its original size */
      transform: scale(1, 1);
   }
   /* At the middle of the animation */
   50% {
      /* Scale the element to 1.5 times its original size */
      transform: scale(1.2, 1.2);
   }
   /* At the end of the animation */
   100% {
    /* Scale the element back to its original size */
      transform: scale(1, 1);
   }
}

.an_z {
   animation: azoom-in 1.8s ease infinite;
   /* position: relative;
   z-index: 8;
   top: 55%;
   left: 5%;
   transform-origin: center; */
}

@keyframes azoom-in {
 /* At the beginning of the animation */

0% {
   /* Scale the element to its original size */
   transform:rotate(3deg);
}

 /* At the middle of the animation */

50% {
   /* Scale the element to 1.5 times its original size */
   transform:rotate(-3deg);
}

 /* At the end of the animation */

100% {
   /* Scale the element back to its original size */
   transform:rotate(3deg);
}

}

/*totop*/
#gotop { display: inline-block;  position: fixed; width:48px;  right: 10px;  bottom: 25px; z-index:99;}
	#gotop img{ width:100%; margin-bottom:5px;}
   #gotop:hover{ cursor: pointer;}

   #rline-icon{ margin: 8px 0 0;}

@media only screen and (max-width: 541px) {
   #gotop { bottom: 60px;}
}

@media only screen and (max-width: 481px) {
   #gotop { width: 45px; right: 3px;}   
}

/* 表單選擇樣式 */

.dz-switch input[type="checkbox"] {
   -webkit-appearance: none;
   -moz-appearance: none;
   position: relative;
   display: inline-block;
   vertical-align: middle;
   margin: -0.3em 0.25em 0 0;
   padding: 0;
   width: 24px;
   height: 24px;
   border: 3px solid #3e3a39;
   font-size: 0.9em;
   cursor: pointer;
   outline: none;
   transition: all .2s ease;
}
   
.dz-switch input[type="checkbox"] {
   border-radius: .2em;
   margin-top: 3px;
   padding: 0 9px;
}
.dz-switch input[type="checkbox"]:checked{
   background-color: #e73679;
}

@media only screen and (max-width: 991px) {
   .dz-switch input[type="checkbox"] {
   height: 24px;
   }
}