@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,
a:active,
a:visited,
a:hover { outline: 0; text-decoration:none !important;}

.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: 8px 2%; box-sizing: border-box; position: fixed; top: 0; left: auto; background-color: rgba(255, 255, 255, 1); border-bottom:1px #E0E0E0 solid; z-index: 999;}
   .top-box-logo{ align-items: center; width: 170px; margin: 0 3% 0 0;}
      .top-box-logo img{ display: none;}
      .top-box-logo h4{ width: 100%; margin: 0; font-size: 1.15em; font-weight: bolder; letter-spacing: 2px; color: #333;}
      .top-box-logo:visited, .top-box-logo:hover, .top-box-logo:active{ color: #333;}
   .top-box-button{ justify-content: flex-end; align-items: center; width: calc(97% - 170px); margin: 0;}
      .top-box-button-operate{ align-items: center; width: auto; margin: 0 0 0 8px; padding: 6px 8px; box-sizing: border-box; font-size: 13.5px; font-weight: bolder; line-height: 1em; color: #666; border-radius: 30px; border: 1px #666 solid; transition: 0.25s ease-in-out;}
         .top-box-button-operate i{ font-size: 0.9em; margin-right: 8px;}
         .top-box-button-operate:hover{ color: #FFF; background-color: #666;}

.content-box{ align-items: flex-start; width: 100%; margin:60px 0 0; padding: 0 2%; box-sizing: border-box;}
   .content-box-left{ display: none; width: 260px; margin: 0; position: sticky; top: 120px; left: 0; border-right: 1px #AAA solid;}
      .content-box-left h3{ width: 100%; margin: 0; padding: 12px 0 ; text-align: center; font-size: 1em; font-weight: bolder; letter-spacing: 2px; color: #FFF; background-color: #333; position: relative;}
         .content-box-left h3::after{ position: absolute; bottom: -20px; left: 0; content: ""; width: 25px; height: 20px; background-color: #000; clip-path: polygon(0 0, 100% 100%, 100% 0);}
      .content-box-left > ul.topnav{  margin: 0 ;	padding: 0 0 0 25px; box-sizing: border-box; overflow-y: auto;}
         .content-box-left > ul.topnav li{ list-style: none; font-size: 1em; font-weight: bolder;}
            .content-box-left > ul.topnav li a { display: block; padding: 10px 12px; text-decoration: none;  color: #333; border-bottom:1px #DDD solid; transition: 0.25s ease-in-out;}
               .content-box-left > ul.topnav li a:hover { background-color:#DDD; color:#333;}
   .content-box-left-ph{ display: inline-block; width: 90%; margin: 0 5% 20px; padding: 3px 15px; box-sizing: border-box; border: 2px #666 solid; border-radius: 6px;}
      .content-box-left-ph select{ width: 100%; margin: 0; padding: 5px; box-sizing: border-box; font-size: 1.05em; font-weight: bolder; background-color: #FFF; border: none;}
   .content-box-right{ width: 100%; margin: 0; padding: 0 5px 25px; box-sizing: border-box;}
      .title-style{ width: 100%; margin: 0 0 18px;}
         .title-style h1{ width: 100%; margin: 0; text-align: justify; font-size: 1.15em; font-weight: bolder; letter-spacing: 2px; color: #333;}
         .title-style h6{ width: 100%; margin:6px 0 0; text-align: right; font-size: 13px; font-weight: bolder; letter-spacing: 1px; color: #999;}
            .title-style h6 i{ margin-right: 8px;}
         .title-style hr{ width: 100%; height: 1px; margin: 10px 0 0; background-color: #ffba5a; border: none;}
      .content-box-item{ align-items: stretch; width: 100%; margin: 0; position: relative;}
         .speech-box{ align-content:flex-start; width: 88%; margin: 10px 6%; padding: 8px; box-sizing: border-box; border: 1px #DDD solid; transition: 0.25s ease-in-out; position: relative;}
            .speech-box-img{ width: 100%; height: 260px; margin: 0; background-size: contain; background-position: center; background-repeat: no-repeat; background-color: #FFF;}
            .speech-box h2{ width: 100%; margin: 12px 0 0; text-align: justify; font-size: 1.15em; font-weight: bolder; letter-spacing: 1px; color: #333;}
            .speech-box-text{ width: calc(100% - 16px); margin: 0 8px 45px;}
               .speech-box-text p{ width: 100%; margin: 6px 0; font-size: 1em; font-weight: bolder; line-height: 1.35em; letter-spacing: 1px; color: #666;}
            .speech-box-button{ position: absolute; left: 8px; bottom: 8px; width: calc(100% - 16px);}
               .speech-box-text-button{ justify-content: center; align-items: center; width: 100%; margin: 12px 0 0; padding: 8px 12px; box-sizing: border-box; font-size: 1em; font-weight: bolder; letter-spacing: 3px; color: #666; border-radius: 30px; background-color: #EEE; transition: 0.25s ease-in-out;}
                  .speech-box-text-button i{ font-size: 0.95em; margin-right: 8px;}
            .speech-box:hover{ background-color: #F0F0F0; border-color: #635f77;}
            .speech-box:hover > .speech-box-button > .speech-box-text-button{ color: #FFF; background-color: #635f77;}
      .speech-box-item{ justify-content: space-between; align-items: flex-start; width: 100%; margin: 0;}
         .speech-box-projuct{ align-items: flex-start; width: 100%; margin: 5px 0; font-size: 0.95em; color: #333;}
            .speech-box-projuct span{ width: 95px; margin: 0 10px 0 0; font-weight: bolder; letter-spacing: 2px; border-right: 1px #AAA solid;}
            .speech-box-projuct p{ width: calc(100% - 105px); margin: 0; letter-spacing: 1px;}
         .speech-box-projuct-B{ width: 100%; margin: 25px 0;}
            .speech-box-projuct-B h3{ width: 100%; margin: 0 0 16px; padding: 0 10px; box-sizing: border-box; font-size: 1.25em; font-weight: bolder; letter-spacing: 3px; color: #009dc1; border-left: 4px #009dc1 solid;}
            .speech-box-projuct-B-content{ width: 100%; margin: 0; padding: 0 3%; box-sizing: border-box;}
               .speech-box-projuct-B-content img{ width: auto; max-width: 100%; margin: auto;}
               .speech-box-projuct-B-content-QRcode{ justify-content: center; width: 100%; margin: 0;}
         .speech-box-projuct-button{ justify-content: center; align-items: center; width: 100%; margin:10px 0 0;}
            .button-style a, .button-style p{ justify-content: center; width: 60%; margin: 5px 20%; padding: 6px 10px; box-sizing: border-box; font-size: 0.95em; font-weight: bolder; letter-spacing: 3px; border-radius: 30px; transition: 0.25s ease-in-out;}
               .button-style a{ color: #FFF;}
               .button-style-bg1{ background-color: #635f77;}
               .button-style-bg2{ background-color: #ec9626;}
               .button-style a:visited{ color: #FFF;}
               .button-style a:hover{ color: #FFF; background-color: #666;}
               .button-style a:active{ color: #FFF;}
               .button-style p{ color: #333; background-color: #DDD;}

      .member-item{ width: 100%; margin: 0;}
         .member-item form{ width: 96%; margin: 0 2% 25px;}
            .member-item form h6{ width: 100%; margin: 0 0 20px; font-size: 0.9em; font-weight: bolder; letter-spacing: 2px; color: #F00;}
            .form-style-bg{ justify-content: space-between; align-items: flex-start; width: 100%; margin:0;}
               .form-style-box-b, .form-style-box-s{ width: 100%; margin: 0 auto 18px;}
               .form-style-css span{ width: 100%; margin: 0 0 8px; font-size: 0.9em; font-weight: bolder; line-height: 1em; letter-spacing: 3px; color: #333;}
               .form-style-css font{ font-size: 1.25em; color: #F00;}
               .form-style-css FI{ width: 100%; margin: 0; padding: 8px 0; background-color: #EAEAEA;}
               .form-style-css FMT{ width: 100%; margin: 0; padding: 4px 0; font-size: 1.15em; line-height: 1.25em; font-weight: bolder; color: #635f77;}
               .form-style-css input{ width: 100%; margin: 0; padding: 5px 10px; box-sizing: border-box; background-color: #EAEAEA; border: 1px #FFF solid; border-radius: 4px;}
               .form-style-css PWFI{ align-items: center; width: 100%; margin: 0; padding: 8px 0;}
                  .form-style-css PWFI input{ width: calc(100% - 35px); margin: 0;}
                  .form-style-css PWFI a{ justify-content: center; align-items: center; width: 40px; margin: 0 0 0 -5px; padding: 7.8px 0; font-size: 1.15em; color: #666; background-color: #EAEAEA; border-radius: 4px; z-index: 3;}
            .members-form-button{ justify-content: center; width: 100%; margin: 10px 0 0;} 
            .members-form-title{ width: 100%; margin: 50px 0 25px; padding: 0 0 10px; text-align: center; font-size: 1.35em; font-weight: bolder; line-height: 1em; letter-spacing: 3px; color: #009dc1; border-bottom: 1px #DDD solid;}     

      .order-item{ width: 280px; margin: 0 calc(50% - 140px) 25px;}  
         .order-item-title{ display: none;}
         .order-item h3{  width: 100%; margin: 0; padding: 10px 0 8px; text-align: center; font-size: 1.15em; font-weight: bolder; letter-spacing: 2px; color: #333; background-color: #DDD; border-bottom: 2px #333 solid;}
         .order-item-content{ align-items: center; width: 100%; padding:10px 15px; text-align: left; font-size: 1em; letter-spacing: 1px; border-bottom: 1px #DDD solid; transition: 0.25s ease-in-out;}
            .order-item-content-1, .order-item-content-2, .order-item-content-3, .order-item-content-4{ width: 100%; line-height: 1.25em;}
            .order-item-content-1{ margin-bottom: 15px; font-weight: bolder;}
            .order-item-content font{display: inline-block; width: 85px; margin: 0 5px 5px 0;}
               .order-item-content-4 a{ justify-content: center; width: 100px; margin: 10px calc(50% - 50px) 0; padding: 5px 0; box-sizing: border-box; font-size: 15px; letter-spacing: 2px; color: #FFF; background-color: #ec9626; border-radius: 5px; transition: 0.25s ease-in-out;}  
                  .order-item-content-4 a:visited{ color: #FFF;}
                  .order-item-content-4 a:hover{ color: #FFF; background-color: #666;}
                  .order-item-content-4 a:active{ color: #FFF;}
            .order-item-content:hover{ background-color: #F0F0F0;} 

      .login-item{ width: 100%; margin: 0;}
         .page-login-box{ width: 90%; margin: 0 5%;}
            .member-login-box-content{ width: 100%; margin: 0 0 20px; padding: 15px 2%;}
               .member-login-box-content h3{ width: 100%; margin: 0 0 20px; font-size: 1.25em; font-weight: bolder; text-align: center; letter-spacing: 1px; color: #009dc1;}
               .member-login-box-content-project{ align-items: center; width: 100%; margin: 0 0 12px; padding: 6px 12px; box-sizing: border-box; background-color: #FFF; border: 1px #DDD solid; border-radius: 30px;}
                  .member-login-box-content-project p{ width: 36px; margin: 0 4px 0 0; text-align: center; font-size: 1.25em; color: #333;}
                  .member-login-box-content-project input{ width: calc(100% - 40px); border: none;}
               .member-login-box-content-button{ width: 100%; margin: 0; padding: 5px 0; text-align: center; font-size: 1em; font-weight: bolder; letter-spacing: 10px; color: #FFF; background-color: #ec9626; border: none; border-radius: 30px; cursor: pointer; transition: 0.35s ease-in-out;}
                  .member-login-box-content-button:hover{ background-color: #666;}




.footer-bg{ width: 100%; margin: 0; padding: 18px 5%; background-color: #323232;}
   .footer-box{ justify-content: center; align-items: center; width: 100%; margin: 0;}
      .footer-logo{ width: 100%; max-width: 260px; margin: 0 0 8px;}
      .footer-box-text{ justify-content: flex-end; width: 100%; margin: 0;}
         .footer-box-text p{ width: 100%; margin: 2px 0; font-size: 11px; line-height: 1.35em; letter-spacing: 1px; color: #FFF;}
            .footer-box-text p a{ width: auto; margin-left: 5px; color: #FFF; transition: 0.25s ease-in-out;}
            .footer-box-text a:visited{ color: #FFF;}
            .footer-box-text a:hover{ color: #999;}
            .footer-box-text a:active{ color: #FFF;}


/* 表格版面: 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: 220px; margin: 0 5% 0 0;}
         .top-box-logo h4{ width: 100%; margin: 0; font-size: 1.35em;}
      .top-box-button{ width: calc(95% - 220px); margin: 0;}
         .top-box-button-operate{ margin: 0 0 0 8px; padding: 6px 12px; font-size: 15px;}

   .content-box{ width: 100%; margin: 75px 0 0; padding: 0 2%;}
      .content-box-left{ width: 180px; margin: 0; top: 85px;}
         .content-box-left h3{ width: 100%; margin: 0; padding: 10px 0 ; font-size: 1.05em;}
            .content-box-left h3::after{ bottom: -20px; width: 25px; height: 20px;}
         .content-box-left > ul.topnav{ max-height: calc(100vh - 180px);  margin: 0 ;	padding: 0 0 0 25px;}
            .content-box-left > ul.topnav li{ font-size: 0.9em;}
               .content-box-left > ul.topnav li a { padding: 8px 10px;}
      .content-box-right{ width: 100%; margin: 0 0 0 -1px; padding: 18px 0 40px 2%;}
         .title-style{ width: 100%; margin: 0 0 20px;}
            .title-style h1{ width: 100%; margin: 0; font-size: 1.25em;}
            .title-style h6{ width: 100%; margin: 8px 0 0; font-size: 14px;}
            .title-style hr{ width: 100%; height: 2px; margin: 15px 0 0;}
         .content-box-item{ width: 100%; margin: 0;}
            .speech-box{ width: 48%; margin: 12px 1%; padding: 8px;}
               .speech-box-img{ width: 100%; height: 180px; margin: 0;}
               .speech-box h2{ width: 100%; margin: 15px 0 0; font-size: 1.05em;}
               .speech-box-text{ width: calc(100% - 16px); margin: 0 8px 30px;}
                  .speech-box-text p{ width: 100%; margin: 10px 0; font-size: 0.95em;}               
               .speech-box-button{ left: 8px; bottom: 10px; width: calc(100% - 16px);}
                  .speech-box-text-button{ width: 100%; margin: 16px 0 0; padding: 6px 10px; font-size: 0.9em;}
         .speech-box-item{ width: 100%; margin: 0;}
            .speech-box-projuct{ width: 100%; margin: 6px 0; font-size: 1em;}
               .speech-box-projuct span{ width: 100px; margin: 0 10px 0 0;}
               .speech-box-projuct p{ width: calc(100% - 110px); margin: 0;}
            .speech-box-projuct-B{ width: 100%; margin: 30px 0;}
               .speech-box-projuct-B h3{ width: 100%; margin: 0 0 20px; padding: 0 12px; font-size: 1.25em; border-left: 5px #009dc1 solid;}
               .speech-box-projuct-B-content{ width: 100%; margin: 0; padding: 0 2%;}
            .speech-box-projuct-button{ width: 100%; margin:10px 0 0;}
               .button-style a, .button-style p{ width: 160px; margin: 0 10px; padding: 6px 8px; font-size: 1em;}

         .member-item{ width: 100%; margin: 0;}
            .member-item form{ width: 100%; margin: 0 0 25px;}
               .member-item form h6{ width: 90%; margin: 0 5% 18px; font-size: 1em;}
               .form-style-bg{ width: 100%; margin:0;}
                  .form-style-box-b{ width: 90%; margin: 0 5% 16px;}
                  .form-style-box-s{ width: 90%; margin: 0 5% 16px;}
                  .form-style-css span{ width: 100%; margin: 0 0 6px; font-size: 1em;}
                  .form-style-css input{ width: 100%; margin: 0; padding: 8px 10px;}
                     .form-style-css PWFI a{ padding: 10.8px 0;}
               .members-form-button{ width: 100%; margin: 20px 0 0;} 
               .members-form-title{ width: 100%; margin: 60px 0 30px; padding: 0 0 12px; font-size: 1.45em;}      

         .order-item{ width: 400px; margin: 0 calc(50% - 200px) 35px;}  
            .order-item h3{  width: 100%; margin: 0; padding: 13px 0 10px; font-size: 1.25em;}
            .order-item-content{ width: 100%; padding:18px 20px; text-align: left; font-size: 1.05em;}
               .order-item-content font{display: inline-block; width: 90px; margin: 0 5px 5px 0;}
                  .order-item-content-5 a{ width: 120px; margin: 10px calc(50% - 60px) 0; font-size: 16px;}   




.footer-bg{ width: 100%; margin: 0; padding: 20px 10%;}
   .footer-box{ width: 100%; margin: 0;}
      .footer-logo{ width: 260px; margin: 0 calc(50% - 130px) 8px;}
      .footer-box-text{ width: 100%; margin: 0;}
         .footer-box-text p{ width: 100%; margin: 2px 0; font-size: 13px; line-height: 1.35em;}
}


@media only screen and (min-width: 579px) {          
      .page-login-box{ width: 500px; margin: 0 calc(50% - 250px);}         
         .member-login-box-content h3{ width: 100%; margin: 0 0 25px; font-size: 1.5em;}
            .member-login-box-content-project{ width: 100%; margin: 0 0 15px; padding: 8px 15px;}
               .member-login-box-content-project p{ width: 40px; margin: 0 5px 0 0; font-size: 1.35em;}
               .member-login-box-content-project input{ width: calc(100% - 45px);}
            .member-login-box-content-button{ width: 100%; margin: 0; padding: 6px 0; font-size: 1.15em;}
}


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

   .top-box-bg{ width: 100%; margin: 0; padding: 8px 2%;}
      .top-box-logo{ width: 60%; margin: 0 5% 0 0;}
         .top-box-logo img{ display: inline-block; width: 160px; margin: 0 10px 0 0;}
         .top-box-logo h4{ width: auto; margin: 0; font-size: 1.45em;}
      .top-box-button{ width: 35%; margin: 0;}
         .top-box-button-operate{ margin: 0 0 0 8px; padding: 6px 12px; font-size: 15px;}

   .content-box{ width: 100%; margin: 71px 0 0; padding: 0 2%;}
      .content-box-left{ display: inline-block; width: 180px; margin: 0; top: 85px;}
         .content-box-left h3{ width: 100%; margin: 0; padding: 10px 0 ; font-size: 1.05em;}
            .content-box-left h3::after{ bottom: -20px; width: 25px; height: 20px;}
         .content-box-left > ul.topnav{ max-height: calc(100vh - 180px);  margin: 0 ;	padding: 0 0 0 25px;}
            .content-box-left > ul.topnav li{ font-size: 0.9em;}
               .content-box-left > ul.topnav li a { padding: 8px 10px;}
      .content-box-left-ph{ display: none;}
      .content-box-right{ width: calc(100% - 180px); min-height: calc(100vh - 215px); margin: 0 0 0 -1px; padding: 18px 0 40px 2%; border-left: 1px #AAA solid;}
         .title-style{ width: 100%; margin: 0 0 20px;}
            .title-style h1{ width: 100%; margin: 0; font-size: 1.35em;}
            .title-style h6{ width: 100%; margin:6px 0 0; font-size: 0.9em;}
            .title-style hr{ width: 100%; height: 2px; margin: 15px 0 0;}
         .content-box-item{ width: 100%; margin: 0;}
            .speech-box{ width: 48%; margin: 16px 1%; padding: 8px;}
               .speech-box-img{ width: 100%; height: 220px; margin: 0;}
               .speech-box h2{ width: 100%; margin: 15px 0 0; font-size: 1.05em;}
               .speech-box-text{ width: calc(100% - 16px); margin: 0 8px 35px;}
                  .speech-box-text p{ width: 100%; margin: 10px 0; font-size: 0.95em;}               
               .speech-box-button{ left: 8px; bottom: 10px; width: calc(100% - 16px);}
                  .speech-box-text-button{ width: 90%; margin: 20px 5% 0; padding: 6px 10px; font-size: 0.9em;}
         .speech-box-item{ width: 100%; margin: 0;}
            .speech-box-projuct{ width: 100%; margin: 8px 0; font-size: 1em;}
               .speech-box-projuct span{ width: 100px; margin: 0 10px 0 0;}
               .speech-box-projuct p{ width: calc(100% - 110px); margin: 0;}
            .speech-box-projuct-B{ width: 100%; margin: 35px 0;}
               .speech-box-projuct-B h3{ width: 100%; margin: 0 0 25px; padding: 0 15px; font-size: 1.35em; border-left: 5px #009dc1 solid;}
               .speech-box-projuct-B-content{ width: 100%; margin: 0; padding: 0 3%;}
            .speech-box-projuct-button{ width: 100%; margin:15px 0 0;}
               .button-style a, .button-style p{ width: 160px; margin: 0 10px; padding: 6px 10px; font-size: 1em;}

         .member-item{ width: 100%; margin: 0;}
            .member-item form{ width: 100%; margin: 0 0 25px;}
               .member-item form h6{ width: 100%; margin: 0 0 18px; font-size: 1em;}
               .form-style-bg{ width: 100%; margin:0;}
                  .form-style-box-b{ width: 100%; margin: 0 auto 20px;}
                  .form-style-box-s{ width: 48%; margin: 0 auto 20px;}
                  .form-style-css span{ width: 100%; margin: 0 0 8px; font-size: 1em;}
                  .form-style-css input{ width: 100%; margin: 0; padding: 8px 10px;}
                     .form-style-css PWFI input{ width: calc(100% - 45px); margin: 0;}
                     .form-style-css PWFI a{ width: 50px; margin: 0 0 0 -5px; padding: 10.8px 0; font-size: 1.15em;}
               .members-form-button{ width: 100%; margin: 20px 0 0;} 
               .members-form-title{ width: 100%; margin: 80px 0 35px; padding: 0 0 12px; font-size: 1.45em;}     
               
         .order-item{ width: 100%; margin: 0;}  
            .order-item-title{ display: flex; width: 100%; padding: 8px 0; text-align: center; font-size: 1em; font-weight: bolder; color: #333; background-color: #DDD; border-bottom: 2px #333 solid;}
            .order-item h3{ display: none;}
            .order-item-content{ width: 100%; padding: 8px 0; text-align: center; font-size: 14px; line-height: 1.35em;}
               .order-item-title-1, .order-item-content-1{ width: 50%;}
               .order-item-title-2, .order-item-content-2{ width: 18%;}
               .order-item-title-3, .order-item-content-3{ width: 24%;}
               .order-item-title-4, .order-item-content-4{ width: 8%;}
               .order-item-content font{display: none;}
                  .order-item-content-1{ text-align: left; margin-bottom: 0;}
                  .order-item-content-4 a{ width: 46px; margin: 0 calc(50% - 23px); font-size: 13.5px;} 




.footer-bg{ width: 100%; margin: 0; padding: 25px 2%;}
   .footer-box{ width: 100%; margin: 0;}
      .footer-logo{ width: 200px; margin: 0 3% 0 0;}
      .footer-box-text{ width: calc(97% - 200px); margin: 0;}
         .footer-box-text p{ width: 100%; margin: 2px 0; font-size: 13px; line-height: 1.35em;}
}


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

   .top-box-bg{ width: 100%; margin: 0; padding: 10px 3%;}
      .top-box-logo{ width: 60%; margin: 0 5% 0 0;}
         .top-box-logo img{ width: 190px; margin: 0 10px 0 0;}
         .top-box-logo h4{ width: auto; margin: 0; font-size: 1.5em;}
      .top-box-button{ width: 35%; margin: 0;}
         .top-box-button-operate{ margin: 0 0 0 8px; padding: 6px 12px; font-size: 15px;}

   .content-box{ width: 100%; margin: 85px 0 0; padding: 0 3%;}
      .content-box-left{ width: 220px; margin: 0; top: 100px;}
         .content-box-left h3{ width: 100%; margin: 0; padding: 12px 0 ; font-size: 1.15em;}
            .content-box-left h3::after{ bottom: -20px; width: 25px; height: 20px;}
         .content-box-left > ul.topnav{ max-height: calc(100vh - 180px);  margin: 0 ;	padding: 0 0 0 25px;}
            .content-box-left > ul.topnav li{ font-size: 0.95em;}
               .content-box-left > ul.topnav li a { padding: 10px 12px;}
      .content-box-right{ width: calc(100% - 220px); min-height: calc(100vh - 225px); margin: 0 0 0 -1px; padding: 20px 0 50px 3%;}
         .title-style{ width: 100%; margin: 0 0 30px;}
            .title-style h1{ width: 100%; margin: 0; font-size: 1.65em;}
            .title-style h6{ width: 100%; margin:6px 0 0; font-size: 0.95em;}
            .title-style hr{ width: 100%; height: 2px; margin: 15px 0 0;}
         .content-box-item{ width: 100%; margin: 0;}
            .speech-box{ width: 31.3%; margin: 20px 1%; padding: 10px;}
               .speech-box-img{ width: 100%; height: 200px; margin: 0;}
               .speech-box h2{ width: 100%; margin: 15px 0 0; font-size: 1.05em;}
               .speech-box-text{ width: calc(100% - 20px); margin: 0 10px 35px;}
                  .speech-box-text p{ width: 100%; margin: 10px 0; font-size: 0.9em;}
               .speech-box-button{ left: 10px; bottom: 10px; width: calc(100% - 20px);}
                  .speech-box-text-button{ width: 90%; margin: 20px 5% 0; padding: 6px 10px; font-size: 0.9em;}
         .speech-box-item{ width: 100%; margin: 0;}
            .speech-box-projuct{ width: 48%; margin: 8px 0; font-size: 1em;}
               .speech-box-projuct span{ width: 100px; margin: 0 10px 0 0;}
               .speech-box-projuct p{ width: calc(100% - 110px); margin: 0;}
            .speech-box-projuct-B{ width: 100%; margin: 50px 0;}
               .speech-box-projuct-B h3{ width: 100%; margin: 0 0 25px; padding: 0 15px; font-size: 1.5em; border-left: 5px #009dc1 solid;}
               .speech-box-projuct-B-content{ width: 100%; margin: 0; padding: 0 3%;}
            .speech-box-projuct-button{ width: 100%; margin:20px 0 0;}
               .button-style a, .button-style p{ width: 180px; margin: 0 10px; padding: 8px 10px; font-size: 1.05em;}

         .member-item{ width: 100%; margin: 0;}
            .member-item form{ width: 100%; margin: 0 0 30px;}
               .member-item form h6{ width: 100%; margin: 0 0 20px; font-size: 1.05em;}
               .form-style-bg{ width: 100%; margin:0;}
                  .form-style-box-b{ width: 100%; margin: 0 auto 25px;}
                  .form-style-box-s{ width: 48%; margin: 0 auto 25px;}
                  .form-style-css span{ width: 100%; margin: 0 0 8px; font-size: 1.15em;}
                  .form-style-css input{ width: 100%; margin: 0; padding: 8px 12px;}
                     .form-style-css PWFI input{ width: calc(100% - 60px); margin: 0;}
                     .form-style-css PWFI a{ width: 65px; margin: 0 0 0 -5px; padding: 10px 0; font-size: 1.25em;}
               .members-form-button{ width: 100%; margin: 30px 0 0;} 
               .members-form-title{ width: 100%; margin: 100px 0 50px; padding: 0 0 15px; font-size: 1.5em;}      

         .order-item{ width: 100%; margin: 0;}  
            .order-item-title{ width: 100%; padding: 15px 0 12px; font-size: 1.15em;}
            .order-item-content{ width: 100%; padding: 12px 0; font-size: 1em;}
               .order-item-title-1, .order-item-content-1{ width: 57%;}
               .order-item-title-2, .order-item-content-2{ width: 15%;}
               .order-item-title-3, .order-item-content-3{ width: 20%;}
               .order-item-title-4, .order-item-content-4{ width: 8%;}
                  .order-item-content-4 a{ width: 60px; margin: 0 calc(50% - 30px); font-size: 15px;} 




.footer-bg{ width: 100%; margin: 0; padding: 30px 3%;}
   .footer-box{ width: 100%; margin: 0;}
      .footer-logo{ width: 240px; margin: 0 5% 0 0;}
      .footer-box-text{ width: calc(95% - 240px); margin: 0;}
         .footer-box-text p{ width: 100%; margin: 3px 0; font-size: 15px; line-height: 1.35em;}
}


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

   .top-box-bg{ width: 100%; margin: 0; padding: 10px calc(50% - 700px);}
      .top-box-logo{ width: 60%; margin: 0 5% 0 0;}
         .top-box-logo img{ width: 190px; margin: 0 10px 0 0;}
         .top-box-logo h4{ width: auto; margin: 0; font-size: 1.65em;}
      .top-box-button{ width: 35%; margin: 0;}
         .top-box-button-operate{ margin: 0 0 0 8px; padding: 6px 12px; font-size: 16px;}

   .content-box{ width: 1300px; margin: 85px calc(50% - 650px) 0; padding: 0;}
      .content-box-left{ width: 240px; margin: 0; top: 100px;}
         .content-box-left h3{ width: 100%; margin: 0; padding: 12px 0 ; font-size: 1.25em;}
            .content-box-left h3::after{ bottom: -20px; width: 25px; height: 20px;}
         .content-box-left > ul.topnav{ max-height: calc(100vh - 180px);  margin: 0 ;	padding: 0 0 0 25px;}
            .content-box-left > ul.topnav li{ font-size: 1em;}
               .content-box-left > ul.topnav li a { padding: 10px 12px;}
      .content-box-right{ width: calc(100% - 240px); min-height: calc(100vh - 235px); margin: 0 0 0 -1px; padding: 20px 0 80px 5%;}
         .title-style{ width: 100%; margin: 0 0 30px;}
            .title-style h1{ width: 100%; margin: 0; font-size: 2em;}
            .title-style h6{ width: 100%; margin:6px 0 0; font-size: 1em;}
            .title-style hr{ width: 100%; height: 2px; margin: 15px 0 0;}
         .content-box-item{ width: 100%; margin: 0;}
            .speech-box{ width: 23%; margin: 25px 1%; padding: 10px;}
               .speech-box-img{ width: 100%; height: 205px; margin: 0;}
               .speech-box h2{ width: 100%; margin: 15px 0 0; font-size: 1.05em;}
               .speech-box-text{ width: calc(100% - 20px); margin: 0 10px 40px;}
                  .speech-box-text p{ width: 100%; margin: 10px 0; font-size: 0.95em;}
               .speech-box-button{ left: 10px; bottom: 10px; width: calc(100% - 20px);}
                  .speech-box-text-button{ width: 80%; margin: 20px 10% 0; padding: 8px 12px; font-size: 0.9em;}
         .speech-box-item{ width: 100%; margin: 0;}
            .speech-box-projuct{ width: 48%; margin: 12px 0; font-size: 1.15em;}
               .speech-box-projuct span{ width: 110px; margin: 0 10px 0 0;}
               .speech-box-projuct p{ width: calc(100% - 120px); margin: 0;}
            .speech-box-projuct-B{ width: 100%; margin: 50px 0;}
               .speech-box-projuct-B h3{ width: 100%; margin: 0 0 30px; padding: 0 15px; font-size: 1.65em; border-left: 8px #009dc1 solid;}
               .speech-box-projuct-B-content{ width: 100%; margin: 0; padding: 0 2%;}
            .speech-box-projuct-button{ width: 100%; margin:20px 0 0;}
               .button-style a, .button-style p{ width: 180px; margin: 0 10px; padding: 8px 12px; font-size: 1.15em;}

         .member-item{ width: 100%; margin: 0;}
            .member-item form{ width: 100%; margin: 0 0 35px;}
               .member-item form h6{ width: 100%; margin: 0 0 25px; font-size: 1.15em;}
               .form-style-bg{ width: 100%; margin:0;}
                  .form-style-box-b{ width: 100%; margin: 0 auto 30px;}
                  .form-style-box-s{ width: 48%; margin: 0 auto 30px;}
                  .form-style-css span{ width: 100%; margin: 0 0 8px; font-size: 1.15em;}
                  .form-style-css input{ width: 100%; margin: 0; padding: 8px 12px;}
               .members-form-button{ width: 100%; margin: 35px 0 0;} 
               .members-form-title{ width: 100%; margin: 120px 0 50px; padding: 0 0 15px; font-size: 1.65em;}  

         .order-item{ width: 100%; margin: 0;}
            .order-item-title{ width: 100%; padding: 15px 0 12px; font-size: 1.25em;}
            .order-item-content{ width: 100%; padding: 12px 0; font-size: 1.05em;}
               .order-item-title-1, .order-item-content-1{ width: 57%;}
               .order-item-title-2, .order-item-content-2{ width: 15%;}
               .order-item-title-3, .order-item-content-3{ width: 20%;}
               .order-item-title-4, .order-item-content-4{ width: 8%;}
                  .order-item-content-4 a{ width: 60px; margin: 0 calc(50% - 30px); font-size: 15px;}




.footer-bg{ width: 100%; margin: 0; padding: 35px 5%;}
   .footer-box{ width: 940px; margin: 0 calc(50% - 470px);}
      .footer-logo{ width: 240px; margin: 0 5% 0 0;}
      .footer-box-text{ width: calc(95% - 240px); margin: 0;}
         .footer-box-text p{ width: 100%; margin: 3px 0; font-size: 15px; line-height: 1.35em;}
}

/*totop*/
#gotop { display: inline-block;  position: fixed; width:40px;  right: 10px;  bottom: 25px; z-index:99;}
	#gotop img{ width:100%; margin-bottom:5px;}
	#gotop a{ display:inherit; text-decoration: none;}
	#gotop-icon{ cursor: pointer;}#gotop a:visited, #gotop a:hover{ text-decoration: none; color: #FFF;}

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

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

/* page number */
.page-pagenumber{ width: 100%; margin: 25px 0 0;}
div.pagenumber-style{ justify-content: center; align-items: center; padding:3px;margin:3px;text-align:center; font-size: 15px; line-height: 16px;}
div.pagenumber-style .page-pagenumber-line{ justify-content: center; align-items: center; width: 26px; height: 26px; margin: 0 3px; text-align: center; font-weight: bolder; border:#323232 1px solid;background-position:50% bottom;color:#FFF !important; background-color: #323232; text-decoration:none; border-radius: 50%; transition: 0.25s ease-in-out;}
   div.pagenumber-style .page-pagenumber-line:hover{background-image:none;color:#fff !important;background-color:#525252; cursor: pointer;}
   div.pagenumber-style .page-pagenumber-line:active{background-image:none;color:#fff !important;background-color:#323232;}
div.pagenumber-style span.current{ justify-content: center; align-items: center; width: 29px; height: 29px;font-weight:bold;color:#333;margin-right:3px; border:2px #E3E3E3 solid; border-radius: 50%;}
div.pagenumber-style span.disabled{padding:6px;color:#CCC;margin-right:3px;}
div.pagenumber-style a, div.pagenumber-style a:visited, div.pagenumber-style a:hover, div.pagenumber-style a:active{ color: #FFF;}

@media only screen and (min-width: 481px) {
   div.pagenumber-style{ font-size: 16px;}
   div.pagenumber-style .page-pagenumber-line{ width: 30px; height: 30px; margin: 0 2px;}
   div.pagenumber-style span.current{ width: 33px; height: 33px; margin-right:2px; border:3px #E3E3E3 solid;}
   .page-pagenumber{ width: 100%; margin: 30px 0 0;}
}

@media only screen and (min-width: 576px) {
   .page-pagenumber{ width: 100%; margin: 35px 0 0;}
}

@media only screen and (min-width: 769px) {
   .page-pagenumber{ width: 100%; margin: 40px 0 0;}
}

@media only screen and (min-width: 1025px) {
   .page-pagenumber{ width: 100%; margin: 50px 0 0;}
}