@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 以下。 */
.max-width-style{ width: 92%; margin: auto 4%;}

.top-box-bg{ align-items: center; width:100%; margin: 0; padding: 10px 3%; box-sizing: border-box; position: fixed; top: 0; background-color: #fdfaf6; z-index: 3000;}
   .top-box-logo{ width:110px; margin: 0; z-index: 10000;}
      .top-box-logo img{ width: 100%;}
      .top-box-logo:hover{ cursor: pointer;}
   .top-box-operate{ justify-content: flex-end; align-items: center; width:calc(100% - 110px); margin: 0;}
      .top-box-operate-menu{ width: 40px; margin:-65px 5px 0 -5px;}
         .top-box-operate-menu a{font-size: 1.15em;} 
      .top-box-operate-fb{ width:30px; margin: 0 60px 0 0; z-index: 10000;}
         .top-box-operate-fb a{justify-content: center; align-items: center; text-decoration:none; width: 100%; font-size: 1.85em; color: #c58511; transition: 0.2s ease-in-out;}
         .top-box-operate-fb a:hover{ color:#33599c;}

.img-box-bg{ width:100%; margin:60px 0 0; position: relative;}
   .img-box-bg img{ width: 100%;}
   .img-box-text{ position:absolute; top:calc(50% - 35px); left:calc(50% - 105px); width: auto; padding:8px 12px; text-align: center; font-size: 1.25em; letter-spacing: 2px; line-height: 1.25em; color: #c58511; background-color: rgba(255, 255, 255, 0.8); border-radius: 10px;} 

.movie-box{ width:100%; margin: 0; padding:18px; box-sizing: border-box;}
   .movie-box video{ width: 100%;}

.aboutus-box-bg{ width:100%; margin:0; padding:45px 0; background-color: #f6f3ef; border-top: 5px #452720 solid; border-bottom: 5px #f4e8d2 solid;}
   .aboutus-box{ align-items: center; width:92%; margin:0 4%;}
      .aboutus-box-img{ width:100%; margin: 0;}
         .aboutus-box-img img{ width: 100%;}
      .aboutus-box-text{ width:100%; margin: 0; padding:20px 25px; box-sizing: border-box; background-color: rgba(255, 255, 255, 0.8); z-index: 5;}
         .aboutus-box-text h3{ width:100%; margin:0 0 8px; text-align: center; font-size: 1.25em; font-weight: bolder; letter-spacing: 3px; color: #c58511;}
         .aboutus-box-text p{ width: 100%; margin: 0; text-align: justify; font-size: 1em; letter-spacing: 1px; line-height: 1.35em; color:#595757;}

.core-idea{ align-items: center; width:100%; margin: 0; padding: 45px 0; background-color: #FFF; border-bottom: 5px #f4e8d2 solid;}
   .core-idea-left{ width:95%; margin:0 0 0 5%; position: relative;}
      .core-idea-left-img{ width:100%;}
         .core-idea-left-img h3{ width:100%; margin:0 0 10px; font-size: 1.25em; font-weight: bolder; letter-spacing: 3px; color: #c58511;}
         .core-idea-left-img img{ width:calc(100% - 16px); margin: 0 0 0 16px;}
      .core-idea-left-text{ position:absolute; width:105%; bottom:10%; left: -5%; margin: 0; padding:12px; text-align: justify; box-sizing: border-box; font-size: 1em; font-weight: bolder; letter-spacing: 1px; line-height: 1.35em; color:#c58511; background-color: #f3e4ce; z-index: 5;}
   .core-idea-right{ width:80%; margin:35px 10% 0;}
      .core-idea-right h3{ width:100%; margin:0 0 20px; font-size: 1.25em; font-weight: bolder; letter-spacing: 3px; color: #c58511;}
      .core-idea-right-box{ align-items: flex-start; width:90%; margin:0 5%;}
         .core-idea-right-box:not(:last-child){ margin-bottom: 30px;}
         .core-idea-right-box-img{ width:15%; margin: 0;}
            .core-idea-right-box-img img{ width:100%;}
         .core-idea-right-box-text{ width:calc(85% - 20px);  margin:0 0 0 20px; padding:0 0 0 20px; box-sizing: border-box; color:#727171; border-left: 2px #727171 solid; border-top:none;}
            .core-idea-right-box-text h4{ width: 100%; margin:0 0 10px; font-size: 1.15em; font-weight: bolder; letter-spacing: 1px;}
            .core-idea-right-box-text h5{ width:100%; margin: 0; text-align:justify; font-size: 1em;}

.enterprise-box-bg{ width:100%; margin: 0; padding:45px 0; background-color: #f6f3ef; border-bottom: 5px #f4e8d2 solid;}
   .enterprise-box{ width:80%; margin:0 10%; text-align: center;}
      .enterprise-box img{ width:100%;}
      .enterprise-box h3{ width: 100%; margin:0 0 35px; font-size: 1.65em; font-weight: bolder; letter-spacing: 5px; color:#c58511;}
      .enterprise-box span{ width:180px; margin: 0 calc(50% - 90px);}
      .enterprise-box h4{ width: 100%; margin: 18px 0; font-size: 1.25em; letter-spacing: 2px; color:#595757;}

#tab3{ position: relative;}
.hot-works-img-bg-all{position:absolute; top:0; left:0; width: 100%; padding:25px 45px; box-sizing: border-box; background-color: #f6f3ef; z-index:-1;}
.hot-works{ align-items: center; width:100%; margin: 0;}
   .hot-works-img{ width: 100%; margin:0; padding:25px 45px; box-sizing: border-box;  z-index: 10;}
      .hot-works-img-bg-all img, .hot-works-img img{ width:100%;}      
   .hot-works-introduce{ width:96%; margin:-12% 2% 0; padding:8% 3%; box-sizing: border-box; border:5px #FFF solid; z-index: 5;}
      .hot-works-introduce-simg{ justify-content: center; align-items: center; width:100%; margin:6% 0 8%;}
         .hot-works-introduce-simg p{ width:32.3%; margin:0 0.5%;}
            .hot-works-introduce-simg p:hover{ cursor: pointer;}
      .hot-works-introduce-text{ width:100%; margin: 0; color:#231815;}
         .hot-works-introduce-text h3{ width:100%; margin:0 0 15px; font-size: 1.25em; font-weight: bolder; letter-spacing: 2px;}
         .hot-works-introduce-text h4{ width:100%; margin:8px 0 0; font-size: 0.9em; letter-spacing: 1px; }
   .hot-works-title{position:absolute; top:3%; right:0; width:45px; z-index: 25;}
      .hot-works-title img{ width:100%;}

   .hot-works-introduce2{ width:100%; margin:0; padding:0 1%; box-sizing: border-box;}
      .hot-works-introduce2-text{ align-items: flex-start; width:100%; margin:10% 0 5%;}
         .hot-works-introduce2-box-text{ width:50%;}
            .hot-works-introduce2-box-text h4{ width:100%; margin:0 0 10px; font-size: 0.85em; letter-spacing: 1px; color:#231815;}
      .hot-works-introduce2-simg{ align-items: center; width:100%; margin:0;}
         .hot-works-introduce2-simg p{ width:32.3%; margin:0 0.5%;}
   .hot-works-img2{ width: 100%; margin:0; padding:25px 45px; box-sizing: border-box; }

   #bootstrap-touch-hot-works .carousel-control { top: 26%;}
   #bootstrap-touch-hot-works .carousel-control.left {left: 1%;}
   #bootstrap-touch-hot-works .carousel-control.right {right: 1%;}

.classic-works-bg{ width:100%; margin: 0; padding:45px 3%; box-sizing: border-box; background-color: #FFF; border-bottom: 5px #f4e8d2 solid;}
   .classic-works{flex-direction: column; align-items: center; width:100%; margin: 0;}
      .classic-works-img{ width:90%; margin:0 5% 30px;}
         .classic-works-img img{ width:100%;}
      .classic-works-introduce{ width:90%; margin: 0 5%; padding:0; box-sizing: border-box; color: #595757;}
         .classic-works-introduce h3{ width:100%; margin:0 0 20px; text-align: center; font-size: 1.35em; font-weight: bolder; letter-spacing: 3px; color:#c58511;}
         .classic-works-introduce h4{ width:100%; margin:0 0 5px; font-size: 1.05em; font-weight: bolder; letter-spacing: 1px;}
         .classic-works-introduce h5{ width:100%; margin:6px 0; font-size: 0.9em;}
         .classic-works-specification{ align-items: center; width: 100%; margin: 6px 0; font-size: 0.9em; font-weight: bolder;}
            .classic-works-specification XX{ width: auto; margin: 0 6px 0 0; padding: 2px 5px; box-sizing: border-box; border: 1px #595757 solid;}
         .case-from-line{ width: 100%; margin: -18px 0 20px;}
            .case-from-line a{ justify-content: center; width: 100%; font-size: 1.15em; font-weight: bolder; letter-spacing: 2px; color: #F00; transition: 0.25s ease-in-out;}
            .case-from-line a:hover{ color: #7f4f21;}

   #bootstrap-touch-classic-works .carousel-control { top: 25%;}
   #bootstrap-touch-classic-works .carousel-control.left {left: -3%;}
   #bootstrap-touch-classic-works .carousel-control.right {right: -3%;}

.service-box-bg{ width:100%; margin: 0; padding: 45px 0; text-align: center; color:#c58511; background-color: #f6f3ef; border-top: 5px #f4e8d2 solid; border-bottom: 5px #f4e8d2 solid;}
   .service-box-bg h3{ width: 100%; margin:0 0 6px; font-size:1.35em; font-weight: bolder; letter-spacing: 3px;}
   .service-box-bg h4{ width: 100%; margin:0; font-size: 1.05em; font-weight: bolder; letter-spacing: 2px;}
   .service-box{ align-items: center; width:94%; margin: 0 3%;}
      .service-box-items{width: 80%; margin:10px 10%;}
         .service-box-items span{ width: 100%; margin:0; z-index: 1;}
         .service-box-items p{ width: 90%; margin:calc(-9% - 8px) 10% 0 0; font-size: 1em; font-weight: bolder; letter-spacing: 1px; z-index: 5;}

.contactus-box-bg{ width:100%; margin: 0; padding:45px 0; background-color: #FFF; border-bottom: 5px #f4e8d2 solid;}
   .contactus-box-bg h3{ width:100%; margin:0 0 25px; text-align: center; font-size: 1.35em; font-weight: bolder; letter-spacing: 5px; color:#c58511;}
   .contactus-box{ width:94%; margin:0 3%; padding: 20px; box-sizing: border-box; background-color: #f6f3ef;}
      .contactus-box form{ align-items: center; width: 100%; margin:0;}
         .contactus-box-project{ width:100%; margin: 0;}
            .contactus-box-project-items{ align-items: flex-start; width:100%; margin:10px 0;}
               .contactus-box-project-items span{ width:70px; margin: 0 5px 0 0; text-align: justify; text-align-last: justify; font-size:1em; font-weight: bolder; letter-spacing: 1px; color:#646464;}
               .contactus-box-project-items p{ width:calc(100% - 75px); margin:0; box-sizing: border-box; font-size: 1em; border-bottom: 2px #646464 solid;}
               .contactus-box-project-items input{width: 100%; padding:8px 4px; background:none; border:none;}
               .contactus-box-project-items textarea{ width:calc(100% - 75px); height:15vh; margin:0; padding:8px 4px; box-sizing: border-box; font-size: 1em; background-color: #FFF; border:none;}
         .contactus-box-opinion{ width:100%; margin:0 0 20px;}
         .contactus-box-button{ width:80%; margin: 0 10%;}
            .footer-form-code{ justify-content: center; align-items: center; width:100%; margin: 0 0 20px;}
               .footer-form-code img{ width: 100%;}
            .contactus-box-button a{justify-content: center; align-items: center; width:80%; margin: 10px 10%; padding:8px 0; text-decoration:none; font-size: 0.85em; font-weight: bolder; letter-spacing: 2px; color:#FFF; border-radius: 30px; transition:0.2s ease-in-out;}
               .button-bg1{ background-color: #b5b5b6;}
               .button-bg2{ background-color: #eec687;}
               .button-bg1:hover{ background-color: #646464;}
               .button-bg2:hover{ background-color: #c58511;}

.footer-bg{ width:100%; margin: 0; padding:45px 0; background:url(../images/footer-bg.jpg) no-repeat; background-position: top right; background-size:cover;}
   .footer-box{ width:80%; margin:0 10%;}
      .footer-box p{ width: 100%; margin:8px 0; font-size: 0.85em; font-weight: bolder; letter-spacing: 1px; color:#7f4f21;}
      .footer-box iframe{ width: 100%; height:20vh}



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

   .top-box-bg{ width:100%; margin: 0; padding: 10px 2%;}
      .top-box-logo{ width:160px; margin: 0;}
      .top-box-operate{ width:calc(100% - 160px); margin: 0;}
         .top-box-operate-menu{ width: 40px; margin:-65px 0 0;}
            .top-box-operate-menu a{font-size: 1.25em;} 
         .top-box-operate-fb{ width:35px; margin: 0 70px 0 0;}
            .top-box-operate-fb a{ width: 100%; font-size: 2.25em;}

   .img-box-bg{ width:100%; margin:78px 0 0;}
      .img-box-text{ top:calc(50% - 50px); left:calc(50% - 120px); padding:10px 15px; font-size: 1.45em; line-height: 1.35em; border-radius: 15px;} 

   .movie-box{ width:100%; margin: 0; padding:25px;}

   .aboutus-box-bg{ width:100%; margin:0; padding:60px 0;}
      .aboutus-box{ width:90%; margin:0 5%;}
         .aboutus-box-img{ width:100%; margin: 0;}
         .aboutus-box-text{ width:100%; margin: 0; padding:25px 35px;}
            .aboutus-box-text h3{ width:100%; margin:0 0 12px; font-size: 1.45em;}
            .aboutus-box-text p{ width: 100%; margin: 0; font-size: 1.05em;}

   .core-idea{ width:100%; margin: 0; padding: 60px 0;}
      .core-idea-left{ width:85%; margin:0 10% 0 5%;}
            .core-idea-left-img h3{ width:100%; margin:0 0 8px; font-size: 1.45em;}
            .core-idea-left-img img{ width:calc(100% - 20px); margin: 0 0 0 20px;}
         .core-idea-left-text{ width:106%; bottom:6%; left: -6%; margin: 0; padding:10px 12px 10px 10%; font-size: 1.05em;}
      .core-idea-right{ width:90%; margin:45px 5% 0;}
         .core-idea-right h3{ width:100%; margin:0 0 18px; font-size: 1.45em;}
         .core-idea-right-box{ width:80%; margin:0 10%;}
            .core-idea-right-box:not(:last-child){ margin-bottom: 35px;}
            .core-idea-right-box-img{ width:15%; margin: 0;}
            .core-idea-right-box-text{ width:calc(85% - 20px);  margin:0 0 0 20px; padding:0 0 0 25px;}
            .core-idea-right-box-text h4{ width: 100%; margin:0 0 8px; font-size: 1.35em;}
               .core-idea-right-box-text h5{ width:100%; margin: 0; font-size: 1.15em;}

   .enterprise-box-bg{ width:100%; margin: 0; padding:60px 0;}
      .enterprise-box{ width:60%; margin:0 20%;}
         .enterprise-box h3{ width: 100%; margin:0 0 45px; font-size: 2em;}
         .enterprise-box span{ width:230px; margin: 0 calc(50% - 115px);}
         .enterprise-box h4{ width: 100%; margin: 25px 0; font-size: 1.65em;}

   .hot-works{ width:100%; margin: 0;}
      .hot-works-img-bg-all, .hot-works-img{ width: 100%; margin:0; padding:35px 60px;}
      .hot-works-introduce{ width:90%; margin:-12% 5% 0; padding:10% 5%; border:6px #FFF solid;}
         .hot-works-introduce-simg{ width:100%; margin:6% 0 10%;}
            .hot-works-introduce-simg p{ width:30.3%; margin:0 1.5%;}
         .hot-works-introduce-text{ width:98%; margin: 0 1%;}
            .hot-works-introduce-text h3{ width:100%; margin:0 0 30px; font-size: 1.25em;}
            .hot-works-introduce-text h4{ width:100%; margin:10px 0 0; font-size: 1em;}
      .hot-works-title{ top:3%; right:0; width:60px;}

      .hot-works-introduce2{ width:90%; margin:0 5%; padding:10% 5%;}
         .hot-works-introduce2-text{ width:100%; margin:10% 0 5%;}
            .hot-works-introduce2-box-text{ width:50%;}
               .hot-works-introduce2-box-text h4{ width:100%; margin:0 0 12px; font-size: 1em;}
         .hot-works-introduce2-simg{ width:100%; margin:0;}
            .hot-works-introduce2-simg p{ width:27.3%; margin:0 3%;}
      .hot-works-img2{ width: 100%; margin:0; padding:25px 60px;}

      #bootstrap-touch-hot-works .carousel-control { top: 28%;}
      #bootstrap-touch-hot-works .carousel-control.left {left: 1%;}
      #bootstrap-touch-hot-works .carousel-control.right {right: 1%;}

   .classic-works-bg{ width:100%; margin: 0; padding:60px 3%;}
      .classic-works{ width:100%; margin: 0;}
         .classic-works-img{ width:70%; margin:0 15% 45px;}
         .classic-works-introduce{ width:60%; margin: 0 20%; padding:0;}
            .classic-works-introduce h3{ width:100%; margin:0 0 20px; font-size: 1.65em;}
            .classic-works-introduce h4{ width:100%; margin:0 0 5px; font-size: 1.25em;}
            .classic-works-introduce h5{ width:100%; margin:5px 0; font-size: 1em;}
            .classic-works-specification{ width: 100%; margin: 8px 0; font-size: 1em;}
               .classic-works-specification XX{ width: auto; margin: 0 10px 0 0; padding: 2px 6px; border: 2px #595757 solid;}
            .case-from-line{ width: 100%; margin: -20px 0 25px;}
               .case-from-line a{ font-size: 1.25em;}


      #bootstrap-touch-classic-works .carousel-control { top: 25%;}         
      #bootstrap-touch-classic-works .carousel-control.left {left: -4%;}
      #bootstrap-touch-classic-works .carousel-control.right {right: -4%;}

   .service-box-bg{ width:100%; margin: 0; padding: 60px 0;}
      .service-box-bg h3{ width: 100%; margin:0 0 6px; font-size:1.65em;}
      .service-box-bg h4{ width: 100%; margin:0; font-size: 1.25em;}
      .service-box{ width:94%; margin: 0 3%;}
         .service-box-items{width: 49%; margin:10px 0.5%;}
            .service-box-items span{ width: 100%; margin:0;}
            .service-box-items p{ width: 90%; margin:calc(-9% - 8px) 10% 0 0; font-size: 0.9em;}
            
   .contactus-box-bg{ width:100%; margin: 0; padding:60px 0;}
      .contactus-box-bg h3{ width:100%; margin:0 0 35px; font-size: 1.65em;}
      .contactus-box{ width:90%; margin:0 5%; padding: 30px;}
         .contactus-box form{ width: 100%; margin:0;}
            .contactus-box-project{ width:100%; margin: 0;}
               .contactus-box-project-items{ width:100%; margin:12px 0;}
                  .contactus-box-project-items span{ width:75px; margin: 0 5px 0 0; font-size:1em;}
                  .contactus-box-project-items p{ width:calc(100% - 80px); margin:0; font-size: 1em;}
                  .contactus-box-project-items input{width: 100%; padding:8px 4px;}
                  .contactus-box-project-items textarea{ width:calc(100% - 80px); height:15vh; margin:0; padding:8px 4px; font-size: 1em;}
            .contactus-box-opinion{ width:100%; margin:0 0 30px;}
            .contactus-box-button{ width:60%; margin: 0 20%;}
               .footer-form-code{ width:100%; margin: 0 0 20px;}
               .contactus-box-button a{ width:80%; margin: 10px 10%; padding:8px 0; font-size: 0.85em;}

   .footer-bg{ width:100%; margin: 0; padding:60px 0;}
      .footer-box{ width:70%; margin:0 15%;}
         .footer-box p{ width: 100%; margin:10px 0; font-size: 1em;}
         .footer-box iframe{ width: 100%; height:20vh}



            
}

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

   .aboutus-box-bg{ width:100%; margin:0; padding:80px 0;}
      .aboutus-box{ width:90%; margin:0 5%;}
         .aboutus-box-img{ width:55%; margin: 0;}
         .aboutus-box-text{ width:calc(45% + 35px); margin: 0 0 0 -35px; padding:20px 35px;}
            .aboutus-box-text h3{ width:100%; margin:0 0 18px; font-size: 1.45em;}
            .aboutus-box-text p{ width: 100%; margin: 0; font-size: 1.05em;}

   .core-idea{ width:100%; margin: 0; padding: 70px 0;}
      .core-idea-left{ width:85%; margin:0 10% 0 5%;}
            .core-idea-left-img h3{ width:100%; margin:0 0 10px; font-size: 1.45em;}
            .core-idea-left-img img{ width:calc(100% - 20px); margin: 0 0 0 20px;}
         .core-idea-left-text{ width:106%; bottom:8%; left: -6%; margin: 0; padding:10px 12px 10px 10%; font-size: 1em; line-height: 1.65em;}
      .core-idea-right{ width:80%; margin:35px 10% 0;}
         .core-idea-right h3{ width:100%; margin:0 0 25px; font-size: 1.45em;}
         .core-idea-right-box{ width:27.3%; margin:0 3%;}
            .core-idea-right-box:not(:last-child){ margin-bottom: 0;}
            .core-idea-right-box-img{ width:50%; margin: 0  25%;}
            .core-idea-right-box-text{ width:100%;  margin:20px 0 0; padding:20px 0 0; border-left: none; border-top: 3px #727171 solid;}
            .core-idea-right-box-text h4{ width: 100%; margin:0 0 8px; font-size: 1.35em;}
               .core-idea-right-box-text h5{ width:100%; margin: 0; font-size: 1.15em;}

   .hot-works{ width:100%; margin: 0;}
      .hot-works-img-bg-all, .hot-works-img{ width: 45%; margin:0; padding:45px 30px;}
      .hot-works-introduce{ width:62%; margin:0 0 0 -7%; padding: 2% 6%; border:6px #FFF solid;}
         .hot-works-introduce-simg{ width:100%; margin:6% 0 10%;}
            .hot-works-introduce-simg p{ width:30.3%; margin:0 1.5%;}
         .hot-works-introduce-text{ width:98%; margin: 0 1%;}
            .hot-works-introduce-text h3{ width:100%; margin:0 0 30px; font-size: 1.25em;}
            .hot-works-introduce-text h4{ width:100%; margin:10px 0 0; font-size: 0.85em;}
      .hot-works-title{ top:5%; right:0; width:45px;}

      .hot-works-introduce2{ width:55%; margin:0; padding:0 2%;}
         .hot-works-introduce2-text{ width:100%; margin:10% 0 14%;}
            .hot-works-introduce2-box-text{ width:50%;}
               .hot-works-introduce2-box-text h4{ width:100%; margin:0 0 12px; font-size: 0.85em;}
         .hot-works-introduce2-simg{ width:100%; margin:0;}
            .hot-works-introduce2-simg p{ width:27.3%; margin:0 3%;}
      .hot-works-img2{ width: 45%; margin:0; padding:45px 30px;}

      #bootstrap-touch-hot-works .carousel-control { top: 45%;}
      #bootstrap-touch-hot-works .carousel-control.left {left: -2%;}
      #bootstrap-touch-hot-works .carousel-control.right {left: 39%;}

   .classic-works-bg{ width:100%; margin: 0; padding:70px 3%;}
      .classic-works{flex-direction: row-reverse; width:100%; margin: 0;}
         .classic-works-img{ width:40%; margin:0;}
         .classic-works-introduce{ width:60%; margin: 0; padding:0 25px;}
            .classic-works-introduce h3{ width:100%; margin:10px 0 45px; font-size: 1.85em;}
            .classic-works-introduce h4{ width:100%; margin:0 0 5px; font-size: 1.25em;}
            .classic-works-introduce h5{ width:100%; margin:5px 0; font-size: 1.05em;}
            .classic-works-specification{ width: 100%; margin: 8px 0; font-size: 1em;}
               .classic-works-specification XX{ width: auto; margin: 0 10px 0 0; padding: 2px 6px;}
            .case-from-line{ width: 100%; margin: -40px 0 35px;}
               .case-from-line a{ font-size: 1.25em;}

      #bootstrap-touch-classic-works .carousel-control { top: 45%;}         
      #bootstrap-touch-classic-works .carousel-control.left {left: -4%;}
      #bootstrap-touch-classic-works .carousel-control.right {right: -4%;}

   .service-box-bg{ width:100%; margin: 0; padding: 70px 0;}
      .service-box-bg h3{ width: 100%; margin:0 0 8px; font-size:1.85em;}
      .service-box-bg h4{ width: 100%; margin:0; font-size: 1.25em;}
      .service-box{ width:94%; margin: 0 3%;}
         .service-box-items{width: 32.3%; margin:15px 0.5%;}
            .service-box-items span{ width: 100%; margin:0;}
            .service-box-items p{ width: 96%; margin:calc(-9% - 8px) 4% 0 0; font-size: 0.8em;}
            
   .contactus-box-bg{ width:100%; margin: 0; padding:70px 0;}
      .contactus-box-bg h3{ width:100%; margin:0 0 40px; font-size: 1.85em;}
      .contactus-box{ width:90%; margin:0 5%; padding: 40px;}
         .contactus-box form{ width: 100%; margin:0;}
            .contactus-box-project{ width:49%; margin: 0 1% 0 0;}
               .contactus-box-project-items{ width:100%; margin:12px 0;}
                  .contactus-box-project-items span{ width:75px; margin: 0 5px 0 0; font-size:1em;}
                  .contactus-box-project-items p{ width:calc(100% - 80px); margin:0; font-size: 1.05em;}
                  .contactus-box-project-items input{width: 100%; padding:10px 6px;}
                  .contactus-box-project-items textarea{ width:calc(100% - 80px); height:15vh; margin:0; padding:10px 6px; font-size: 1.05em;}
            .contactus-box-opinion{ width:100%; margin:0 0 30px;}
            .contactus-box-button{ width:60%; margin: 0 20%;}
               .footer-form-code{ width:100%; margin: 0 0 20px;}
               .contactus-box-button a{ width:80%; margin: 10px 10%; padding:8px 0; font-size: 0.85em;}

   .footer-bg{ width:100%; margin: 0; padding:70px 0;}
      .footer-box{ width:320px; margin:0 5% 0 calc(95% - 320px);}
         .footer-box p{ width: 100%; margin:12px 0; font-size: 1.05em;}
         .footer-box iframe{ width: 100%; height:25vh}



   



}

@media only screen and (min-width: 768px) {
   .top-box-bg{ width:100%; margin: 0; padding: 12px 2%;}
      .top-box-operate-menu{ width: 40px; margin:-65px 0 0;}
      .top-box-operate-fb{ width:35px; margin: 0 70px 0 0;}
         .top-box-operate-fb a{ width: 100%; font-size: 2.25em;}

   .img-box-bg{ width:100%; margin:84px 0 0;}
      .img-box-text{ top:calc(50% - 85px); left:calc(50% - 190px); padding: 15px; font-size: 2.35em; line-height: 1.45em; border-radius: 20px;} 
      

}


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

   .top-box-bg{ width:100%; margin: 0; padding: 12px 3%;}
      .top-box-logo{ width:160px; margin: 0;}
      .top-box-operate{ width:calc(100% - 160px); margin: 0;}
         .top-box-operate-menu{ width: calc(95% - 40px); margin: 0;}
            .top-box-operate-menu a{font-size: 1em;} 
         .top-box-operate-fb{ width:35px; margin: 0 0 0 5px;}
            .top-box-operate-fb a{ width: 100%; font-size: 2em;}

   .movie-box{ width:100%; margin: 0; padding:30px;}

   .aboutus-box-bg{ width:100%; margin:0; padding:100px 0;}
      .aboutus-box{ width:90%; margin:0 5%;}
         .aboutus-box-img{ width:45%; margin: 0;}
         .aboutus-box-text{ width:calc(55% + 50px); margin: 0 0 0 -50px; padding:35px 50px;}
            .aboutus-box-text h3{ width:100%; margin:0 0 20px; font-size: 1.65em;}
            .aboutus-box-text p{ width: 100%; margin: 0; font-size: 1.15em; line-height: 1.65em;}

   .core-idea{ width:100%; margin: 0; padding: 80px 0;}
      .core-idea-left{ width:48%; margin:0 0 0 5%;}
            .core-idea-left-img h3{ width:100%; margin:0 0 10px; font-size: 1.65em;}
            .core-idea-left-img img{ width:calc(100% - 20px); margin: 0 0 0 20px;}
         .core-idea-left-text{ width:111%; bottom:6%; left: -11%; margin: 0; padding:10px 12px 10px 10%; font-size: 1.05em;}
      .core-idea-right{ width:35%; margin:0 5% 0 7%;}
         .core-idea-right h3{ width:100%; margin:0 0 25px; font-size: 1.65em;}
         .core-idea-right-box{ width:100%; margin:0;}
            .core-idea-right-box:not(:last-child){ margin-bottom: 60px;}
            .core-idea-right-box-img{ width:20%; margin: 0;}
            .core-idea-right-box-text{ width:calc(80% - 20px);  margin:0 0 0 20px; padding:0 0 0 25px; border-left: 3px #727171 solid; border-top:none;}
            .core-idea-right-box-text h4{ width: 100%; margin:0 0 10px; font-size: 1.45em;}
               .core-idea-right-box-text h5{ width:100%; margin: 0; font-size: 1.15em;}

   .enterprise-box-bg{ width:100%; margin: 0; padding:100px 0;}
      .enterprise-box{ width:60%; margin:0 20%;}
         .enterprise-box h3{ width: 100%; margin:0 0 60px; font-size: 2.45em;}
         .enterprise-box span{ width:260px; margin: 0 calc(50% - 130px);}
         .enterprise-box h4{ width: 100%; margin: 30px 0; font-size: 1.85em;}

   .hot-works{ width:100%; margin: 0;}
      .hot-works-img-bg-all, .hot-works-img{ width: 42%; margin:0; padding:55px 40px;}
      .hot-works-introduce{ width:66%; margin:0 0 0 -8%; padding: 1% 6%; border:6px #FFF solid;}
         .hot-works-introduce-simg{ width:100%; margin:6% 0 10%;}
            .hot-works-introduce-simg p{ width:27.3%; margin:0 3%;}
         .hot-works-introduce-text{ width:90%; margin: 0 5%;}
            .hot-works-introduce-text h3{ width:100%; margin:0 0 35px; font-size: 1.35em;}
            .hot-works-introduce-text h4{ width:100%; margin:10px 0 0; font-size: 1.05em;}
      .hot-works-title{ top:5%; right:0; width:60px;}

      .hot-works-introduce2{ width:58%; margin:0; padding:0 3%;}
         .hot-works-introduce2-text{ width:100%; margin:10% 0;}
            .hot-works-introduce2-box-text{ width:50%;}
               .hot-works-introduce2-box-text h4{ width:100%; margin:0 0 15px; font-size: 1.05em;}
         .hot-works-introduce2-simg{ width:100%; margin:0;}
            .hot-works-introduce2-simg p{ width:27.3%; margin:0 3%;}
      .hot-works-img2{ width: 42%; margin:0; padding:55px 40px;}

      #bootstrap-touch-hot-works .carousel-control.left {left: -0.5%;}
      #bootstrap-touch-hot-works .carousel-control.right {left: 37%;}

   .classic-works-bg{ width:100%; margin: 0; padding:80px 3%;}
      .classic-works{ width:100%; margin: 0;}
         .classic-works-img{ width:50%; margin:0;}
         .classic-works-introduce{ width:50%; margin: 0; padding:0 30px;}
            .classic-works-introduce h3{ width:100%; margin:20px 0 60px; font-size: 2em;}
            .classic-works-introduce h4{ width:100%; margin:0 0 5px; font-size: 1.35em;}
            .classic-works-introduce h5{ width:100%; margin:10px 0; font-size: 1.05em;}
            .classic-works-specification{ width: 100%; margin: 8px 0; font-size: 1.05em;}
               .classic-works-specification XX{ width: auto; margin: 0 10px 0 0; padding: 2px 6px;}
            .case-from-line{ width: 100%; margin: -55px 0 40px;}
               .case-from-line a{ font-size: 1.45em;}
               
      #bootstrap-touch-classic-works .carousel-control.left {left: -3%;}
      #bootstrap-touch-classic-works .carousel-control.right {right: -3%;}

   .service-box-bg{ width:100%; margin: 0; padding: 80px 0;}
      .service-box-bg h3{ width: 100%; margin:0 0 8px; font-size:2em;}
      .service-box-bg h4{ width: 100%; margin:0; font-size: 1.45em;}
      .service-box{ width:94%; margin: 0 3%;}
         .service-box-items{width: 31.3%; margin:15px 1%;}
            .service-box-items span{ width: 100%; margin:0;}
            .service-box-items p{ width: 90%; margin:calc(-10% - 8px) 10% 0 0; font-size: 0.9em;}
            
   .contactus-box-bg{ width:100%; margin: 0; padding:80px 0;}
      .contactus-box-bg h3{ width:100%; margin:0 0 50px; font-size: 2em;}
      .contactus-box{ width:90%; margin:0 5%; padding: 50px;}
         .contactus-box form{ width: 100%; margin:0;}
            .contactus-box-project{ width:48%; margin: 0 2% 0 0;}
               .contactus-box-project-items{ width:100%; margin:12px 0;}
                  .contactus-box-project-items span{ width:90px; margin: 0 10px 0 0; font-size:1.25em;}
                  .contactus-box-project-items p{ width:calc(100% - 100px); margin:0; font-size: 1.15em;}
                  .contactus-box-project-items input{width: 100%; padding:10px 6px;}
                  .contactus-box-project-items textarea{ width:calc(100% - 100px); height:20vh; margin:0; padding:10px 6px; font-size: 1.15em;}
            .contactus-box-opinion{ width:68%; margin:0 2% 0 0;}
            .contactus-box-button{ width:30%; margin: 0;}
               .footer-form-code{ width:100%; margin: 0 0 30px;}
               .contactus-box-button a{ width:70%; margin: 12px 15%; padding:8px 0; font-size: 1em;}

   .footer-bg{ width:100%; margin: 0; padding:80px 0;}
      .footer-box{ width:320px; margin:0 5% 0 calc(95% - 320px);}
         .footer-box p{ width: 100%; margin:12px 0; font-size: 1.05em;}
         .footer-box iframe{ width: 100%; height:25vh}





      

}


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

   .top-box-bg{ width:100%; margin: 0; padding: 12px 3%;}
      .top-box-logo{ width:160px; margin: 0;}
      .top-box-operate{ width:calc(100% - 160px); margin: 0;}
         .top-box-operate-menu{ width: calc(95% - 40px); margin: 0;}
            .top-box-operate-menu a{font-size: 1em;} 
         .top-box-operate-fb{ width:35px; margin: 0 0 0 5px;}
            .top-box-operate-fb a{ width: 100%; font-size: 2em;}

   .img-box-bg{ width:100%; margin:84px 0 0;}
      .img-box-text{ top:calc(50% - 110px); left:calc(50% - 240px); padding: 15px; font-size: 3em; line-height: 1.45em;} 

   .movie-box{ width:100%; margin: 0; padding:40px;}

   .aboutus-box-bg{ width:100%; margin:0; padding:100px 0;}
      .aboutus-box{ width:80%; margin:0 10%;}
         .aboutus-box-img{ width:45%; margin: 0;}
         .aboutus-box-text{ width:calc(55% + 60px); margin: 0 0 0 -60px; padding:45px 60px;}
            .aboutus-box-text h3{ width:100%; margin:0 0 25px; font-size: 2em;}
            .aboutus-box-text p{ width: 100%; margin: 0; font-size: 1.25em;}

   .core-idea{ width:100%; margin: 0; padding: 100px 0;}
      .core-idea-left{ width:45%; margin:0 0 0 8%;}
            .core-idea-left-img h3{ width:100%; margin:0 0 10px; font-size: 2em;}
            .core-idea-left-img img{ width:calc(100% - 20px); margin: 0 0 0 20px;}
         .core-idea-left-text{ width:117%; bottom:10%; left: -17%; margin: 0; padding:15px 18px 15px 12%; font-size: 1.15em;}
      .core-idea-right{ width:29%; margin:0 8% 0 10%;}
         .core-idea-right h3{ width:100%; margin:0 0 25px; font-size: 2em;}
         .core-idea-right-box{ width:100%; margin:0;}
            .core-idea-right-box:not(:last-child){ margin-bottom: 80px;}
            .core-idea-right-box-img{ width:20%; margin: 0;}
            .core-idea-right-box-text{ width:calc(80% - 25px);  margin:0 0 0 25px; padding:0 0 0 25px;}
            .core-idea-right-box-text h4{ width: 100%; margin:0 0 12px; font-size: 1.65em;}
               .core-idea-right-box-text h5{ width:100%; margin: 0; font-size: 1.25em;}

   .enterprise-box-bg{ width:100%; margin: 0; padding:100px 0;}
      .enterprise-box{ width:60%; margin:0 20%;}
         .enterprise-box h3{ width: 100%; margin:0 0 60px; font-size: 2.45em;}
         .enterprise-box span{ width:300px; margin: 0 calc(50% - 150px);}
         .enterprise-box h4{ width: 100%; margin: 30px 0; font-size: 2em;}

   .hot-works{ width:100%; margin: 0;}
      .hot-works-img-bg-all, .hot-works-img{ width: 38%; margin:0; padding:50px;}
      .hot-works-introduce{ width:68%; margin:6% 0 0 -6%; padding: 0 8%; border:8px #FFF solid;}
         .hot-works-introduce-simg{ width:100%; margin:6% 0 10%;}
            .hot-works-introduce-simg p{ width:27.3%; margin:0 3%;}
         .hot-works-introduce-text{ width:80%; margin: 0 10%;}
            .hot-works-introduce-text h3{ width:100%; margin:0 0 35px; font-size: 1.45em;}
            .hot-works-introduce-text h4{ width:100%; margin:10px 0 0; font-size: 1.15em;}
      .hot-works-title{ top:5%; right:0; width:70px;}

      .hot-works-introduce2{ width:62%; margin:0; padding:0 8%;}
         .hot-works-introduce2-text{ width:100%; margin:10% 0;}
            .hot-works-introduce2-box-text{ width:50%;}
               .hot-works-introduce2-box-text h4{ width:100%; margin:0 0 15px; font-size: 1.15em;}
         .hot-works-introduce2-simg{ width:100%; margin:0;}
            .hot-works-introduce2-simg p{ width:27.3%; margin:0 3%;}
      .hot-works-img2{ width: 38%; margin:0; padding:50px;}

      #bootstrap-touch-hot-works .carousel-control.left {left: 0%;}
      #bootstrap-touch-hot-works .carousel-control.right {left: 33.5%;}

   .classic-works-bg{ width:100%; margin: 0; padding:100px 5%;}
      .classic-works{ width:100%; margin: 0;}
         .classic-works-img{ width:50%; margin:0;}
         .classic-works-introduce{ width:50%; margin: 0; padding:60px;}
            .classic-works-introduce h3{ width:100%; margin:50px 0 100px; font-size: 2.35em;}
            .classic-works-introduce h4{ width:100%; margin:0 0 5px; font-size: 1.65em;}
            .classic-works-introduce h5{ width:100%; margin:10px 0; font-size: 1.25em;}
            .classic-works-specification{ width: 100%; margin: 10px 0; font-size: 1.15em;}
               .classic-works-specification XX{ width: auto; margin: 0 15px 0 0; padding: 2px 6px;}
            .case-from-line{ width: 100%; margin: -90px 0 60px;}
               .case-from-line a{ font-size: 1.65em;}
               
      #bootstrap-touch-classic-works .carousel-control.left {left: -5%;}
      #bootstrap-touch-classic-works .carousel-control.right {right: -5%;}

   .service-box-bg{ width:100%; margin: 0; padding: 100px 0;}
      .service-box-bg h3{ width: 100%; margin:0 0 10px; font-size:2em;}
      .service-box-bg h4{ width: 100%; margin:0; font-size: 1.65em;}
      .service-box{ width:90%; margin: 0 5%;}
         .service-box-items{width: 31.3%; margin:20px 1%;}
            .service-box-items span{ width: 100%; margin:0;}
            .service-box-items p{ width: 88%; margin:calc(-10% - 8px) 12% 0 0; font-size: 1.15em;}
            
   .contactus-box-bg{ width:100%; margin: 0; padding:100px 0;}
      .contactus-box-bg h3{ width:100%; margin:0 0 50px; font-size: 2em;}
      .contactus-box{ width:90%; margin:0 5%; padding: 50px;}
         .contactus-box form{ width: 100%; margin:0;}
            .contactus-box-project{ width:48%; margin: 0 2% 0 0;}
               .contactus-box-project-items{ width:100%; margin:15px 0;}
                  .contactus-box-project-items span{ width:110px; margin: 0 10px 0 0; font-size:1.35em;}
                  .contactus-box-project-items p{ width:calc(100% - 120px); margin:0; font-size: 1.25em;}
                  .contactus-box-project-items input{width: 100%; padding:10px 6px;}
                  .contactus-box-project-items textarea{ width:calc(100% - 120px); height:30vh; margin:0; padding:10px 6px; font-size: 1.25em;}
            .contactus-box-opinion{ width:65%; margin:0 5% 0 0;}
            .contactus-box-button{ width:30%; margin: 0;}
               .footer-form-code{ width:100%; margin: 0 0 30px;}
               .contactus-box-button a{ width:60%; margin: 12px 20%; padding:10px 0; font-size: 1.05em;}

   .footer-bg{ width:100%; margin: 0; padding:100px 0;}
      .footer-box{ width:380px; margin:0 5% 0 calc(95% - 380px);}
         .footer-box p{ width: 100%; margin:15px 0; font-size: 1.25em;}
         .footer-box iframe{ width: 100%; height:35vh}



      


}

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

   .top-box-bg{ width:100%; margin: 0; padding: 15px 5%;}
      .top-box-logo{ width:200px; margin: 0;}
      .top-box-operate{ width:calc(100% - 200px); margin: 0;}
         .top-box-operate-menu{ width: calc(85% - 55px); margin: 0;}
            .top-box-operate-menu a{font-size: 1.25em;} 
         .top-box-operate-fb{ width:45px; margin: 0 0 0 10px;}
            .top-box-operate-fb a{ width: 100%; font-size: 2.65em;}

   .img-box-bg{ width:100%; margin:102px 0 0;}
      .img-box-text{ top:calc(50% - 110px); left:calc(50% - 300px); padding: 15px; font-size: 3.85em; line-height: 1.45em;} 

   .movie-box{ width:100%; margin: 0; padding:50px;}

   .aboutus-box-bg{ width:100%; margin:0; padding:120px 0;}
      .aboutus-box{ width:60%; margin:0 20%;}
         .aboutus-box-img{ width:50%; margin: 0;}
         .aboutus-box-text{ width:calc(50% + 70px); margin: 0 0 0 -70px; padding:50px 70px;}
            .aboutus-box-text h3{ width:100%; margin:0 0 25px; font-size: 2.25em;}
            .aboutus-box-text p{ width: 100%; margin: 0; font-size: 1.35em;}

   .core-idea{ width:100%; margin: 0; padding: 120px 0;}
      .core-idea-left{ width:40%; margin:0 0 0 10%;}
            .core-idea-left-img h3{ width:100%; margin:0 0 10px; font-size: 2.25em;}
            .core-idea-left-img img{ width:calc(100% - 20px); margin: 0 0 0 20px;}
         .core-idea-left-text{ width:125%; bottom:15%; left: -25%; margin: 0; padding:25px 25px 25px 15%; font-size: 1.45em;}
      .core-idea-right{ width:25%; margin:0 10% 0 15%;}
         .core-idea-right h3{ width:100%; margin:0 0 25px; font-size: 2.25em;}
         .core-idea-right-box{ width:100%; margin:0;}
            .core-idea-right-box:not(:last-child){ margin-bottom: 100px;}
            .core-idea-right-box-img{ width:15%; margin: 0;}
            .core-idea-right-box-text{ width:calc(85% - 30px);  margin:0 0 0 30px; padding:0 0 0 30px;}
            .core-idea-right-box-text h4{ width: 100%; margin:0 0 12px; font-size: 1.85em;}
               .core-idea-right-box-text h5{ width:100%; margin: 0; font-size: 1.45em;}

   .enterprise-box-bg{ width:100%; margin: 0; padding:120px 0;}
      .enterprise-box{ width:60%; margin:0 20%;}
         .enterprise-box h3{ width: 100%; margin:0 0 65px; font-size: 2.65em;}
         .enterprise-box span{ width:380px; margin: 0 calc(50% - 190px);}
         .enterprise-box h4{ width: 100%; margin: 30px 0; font-size: 2em;}

   .hot-works{ width:100%; margin: 0;}
      .hot-works-img-bg-all, .hot-works-img{ width: 35%; margin:0; padding:80px;}
      .hot-works-introduce{ width:73%; margin:5% 0 0 -8%; padding: 0 8%; border:8px #FFF solid;}
         .hot-works-introduce-simg{ width:100%; margin:6% 0 10%;}
            .hot-works-introduce-simg p{ width:23.3%; margin:0 5%;}
         .hot-works-introduce-text{ width:80%; margin: 0 10%;}
            .hot-works-introduce-text h3{ width:100%; margin:0 0 35px; font-size: 1.65em;}
            .hot-works-introduce-text h4{ width:100%; margin:10px 0 0; font-size: 1.25em;}
      .hot-works-title{ top:5%; right:0; width:100px;}

      .hot-works-introduce2{ width:65%; margin:0; padding:0 8%;}
         .hot-works-introduce2-text{ width:80%; margin:0 10% 10%;}
            .hot-works-introduce2-box-text{ width:50%;}
               .hot-works-introduce2-box-text h4{ width:100%; margin:0 0 15px; font-size: 1.25em;}
         .hot-works-introduce2-simg{ width:100%; margin:0;}
            .hot-works-introduce2-simg p{ width:23.3%; margin:0 5%;}
      .hot-works-img2{ width: 35%; margin:0; padding:80px;}

      #bootstrap-touch-hot-works .carousel-control.left {left: 1%;}
      #bootstrap-touch-hot-works .carousel-control.right {left: 31.5%;}

   .classic-works-bg{ width:100%; margin: 0; padding:120px 8%;}
      .classic-works{ width:100%; margin: 0;}
         .classic-works-img{ width:50%; margin:0;}
         .classic-works-introduce{ width:50%; margin: 0; padding:80px;}
            .classic-works-introduce h3{ width:100%; margin:50px 0 120px; font-size: 2.65em;}
            .classic-works-introduce h4{ width:100%; margin:0 0 5px; font-size: 1.85em;}
            .classic-works-introduce h5{ width:100%; margin:10px 0; font-size: 1.35em;}
            .classic-works-specification{ width: 100%; margin: 12px 0; font-size: 1.25em;}
               .classic-works-specification XX{ width: auto; margin: 0 15px 0 0; padding: 3px 8px;}
            .case-from-line{ width: 100%; margin: -100px 0 80px;}
               .case-from-line a{ font-size: 1.65em;}
            
      #bootstrap-touch-classic-works .carousel-control.left {left: -8%;}
      #bootstrap-touch-classic-works .carousel-control.right {right: -8%;}

   .service-box-bg{ width:100%; margin: 0; padding: 120px 0;}
      .service-box-bg h3{ width: 100%; margin:0 0 10px; font-size:2.25em;}
      .service-box-bg h4{ width: 100%; margin:0; font-size: 1.85em;}
      .service-box{ width:84%; margin: 0 8%;}
         .service-box-items{width: 31.3%; margin:25px 1%;}
            .service-box-items span{ width: 100%; margin:0;}
            .service-box-items p{ width: 88%; margin:calc(-10% - 8px) 12% 0 0; font-size: 1.45em;}

            
   .contactus-box-bg{ width:100%; margin: 0; padding:120px 0;}
      .contactus-box-bg h3{ width:100%; margin:0 0 50px; font-size: 2.25em;}
      .contactus-box{ width:90%; margin:0 5%; padding: 50px;}
         .contactus-box form{ width: 100%; margin:0;}
            .contactus-box-project{ width:48%; margin: 0 2% 0 0;}
               .contactus-box-project-items{ width:100%; margin:15px 0;}
                  .contactus-box-project-items span{ width:110px; margin: 0 10px 0 0; font-size:1.35em;}
                  .contactus-box-project-items p{ width:calc(100% - 120px); margin:0; font-size: 1.25em;}
                  .contactus-box-project-items input{width: 100%; padding:10px 6px;}
                  .contactus-box-project-items textarea{ width:calc(100% - 120px); height:30vh; margin:0; padding:10px 6px; font-size: 1.25em;}
            .contactus-box-opinion{ width:70%; margin:0 5% 0 0;}
            .contactus-box-button{ width:25%; margin: 0;}
               .footer-form-code{ width:100%; margin: 0 0 30px;}
               .contactus-box-button a{ width:60%; margin: 12px 20%; padding:10px 0; font-size: 1.15em;}

   .footer-bg{ width:100%; margin: 0; padding:120px 0;}
      .footer-box{ width:400px; margin:0 5% 0 calc(95% - 400px);}
         .footer-box p{ width: 100%; margin:15px 0; font-size: 1.35em;}
         .footer-box iframe{ width: 100%; height:35vh}

      
}

/*文字閃爍*/

@keyframes blink {
   0% {
      color: #c58511;
      border-color: #F00;
   }
   40% {
      color: #F00;
      border-color: #c58511;
   }
   60% {
      color: #F00;
      border-color: #FFE;
   }
   85% {
      color: #ff3f47;
      border-color: #c58511;
   }
   95% {
      color: #c58511;
      border-color: #F00;
   }
}

.text-highlight {
   animation: 0.85s blink infinite steps(2);
   border: 2px #c58511 solid;
}