@charset "UTF-8";
/* CSS Document */

section, article, aside, footer, header, nav, h2 { display:block;}

body { padding:0; margin:0 auto; color: #000; font-size:1em; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; background-color: #fff; position: relative;}
img { border:0; display: block;}

html, body { height: 100%;}

.clearfix:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }
.clearfix { display: block; }

div.brk { clear: both;}


/************ video box ************/
.video-container { position:relative; padding-bottom:56.25%; padding-top:30px; width:100%; height: 0px; overflow:hidden;}
.video-container iframe, .video-container object, .video-container embed { position:absolute; top:0; left:0; width:100%; height:100%;}


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

  /************ aside ************/

  aside { width: 4vw; position: fixed; top: 200px; right: 0; z-index: 999;}
  aside .aside-bt-box { width: 100%;}
  aside .aside-bt-box a.tel { width: 4vw; height: 4vw; color: #fff; font-size: 2.4vw; background-color: #991e23; display: flex; justify-content: center; align-items: center;}
  aside .aside-bt-box a.order { width: 4vw; height: 4vw; color: #fff; font-size: 2.8vw; background-color: #eaa61e; display: flex; justify-content: center; align-items: center;}
  aside .aside-bt-box a.line { width: 4vw; height: 4vw; color: #fff; font-size: 2.8vw; background-color: #158072; display: flex; justify-content: center; align-items: center;}


  /************ header + nav ************/

  header { width: 100%; height: 5vw; padding: 0 3vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; position: fixed; top: 0; left: 0; z-index: 9999;}

  .header-logo { width: 18.5vw;}
  .header-logo img.logo { width: 17.5vw; height: auto;}

  nav#mo { display: none;}
  nav#pc { width: calc(100% - 18.5vw - 8vw);}
  nav#pc ul.nav-menu { width: 100%; padding: 0 1.9vw; margin: 0; box-sizing: border-box; list-style: none; display: flex; justify-content: flex-start; align-items: center;}
  nav#pc ul.nav-menu li { padding: 0; margin: 0;}
  nav#pc ul.nav-menu li a { width: 7.8vw; height: 5vw; color: #000; font-size: 1.1vw; text-align: center; text-decoration: none; display: flex; justify-content: center; align-items: center; position: relative; transition: 0.3s;}
  nav#pc ul.nav-menu li a:hover::before { position: absolute; z-index: -1; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: #158072; transform: skew(-41.5deg);}
  nav#pc ul.nav-menu li a:hover { color: #fff; font-weight: 500;}

  .header-icons-mo { display: none;}
  .header-icons { width: 8vw; display: flex; justify-content: flex-end; align-items: center;}
  .header-icons a { width: 2.8vw; margin: 0 0 0 0.7vw; text-decoration: none; display: block; position: relative;}
  .header-icons a img.icon { width: 100%; height: auto; position: relative; z-index: 1;}
  .header-icons a .shopping-num { width: 1.5vw; height: 1.5vw; color: #fff; font-size: 0.8vw; line-height: 0.8vw; display: flex; justify-content: center; align-items: center; border-radius: 100%; background-color: #971e23; position: absolute; top: -0.3vw; right: -0.3vw; z-index: 2;}


  /************ section #index-banner ************/

  section#index-banner { clear: both; width: 100%; padding: 5vw 0 0 0; position: relative; z-index: 1;}

  .index-banner-box { clear: both; width: 100%; position: relative;}
  .index-banner-box .banner-arrow-prev img.arrow-prev { width: 2vw; height: auto; position: absolute; top: 20vw; left: 40px; z-index: 2; cursor: pointer;}
  .index-banner-box .banner-arrow-next img.arrow-next { width: 2vw; height: auto; position: absolute; top: 20vw; right: 40px; z-index: 2; cursor: pointer;}
  .index-banner-box img { width: 100%; height: auto; position: relative; z-index: 1;}
  

  /************ section #index-about ************/

  section#index-about { clear: both; width: 100%; padding: 4.5vw 0 6vw 13vw; box-sizing: border-box; background-image: url("../images/index_about_bg.jpg"); background-repeat: no-repeat; background-size: cover;}

  .index-about-title { width: 100%; position: relative; z-index: 1;}
  .index-about-title span.title-b { color: rgba(255,255,255,0.8); font-size: 8vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 8vw;}
  .index-about-title span.title-s { padding: 0.2vw 1.5vw; color: #fff; font-size: 2.2vw; font-weight: 700; line-height: 2.2vw; background-color: #991e23;}

  .index-about-content { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; position: relative; z-index: 2;}
  .index-about-content .column-lf-text { width: 40%; padding: 0 9vw 0 0; margin: 1.5vw 0 0 0; box-sizing: border-box;}
  .index-about-content .column-lf-text .text-bigger { width: 100%; font-size: 1.4vw; font-weight: 500; line-height: 2.2vw; letter-spacing: 0.1em;}
  .index-about-content .column-lf-text .text-smaller { width: 100%; margin: 1.5vw 0 0 0; font-size: 1.1vw; font-weight: 300; line-height: 1.8vw; letter-spacing: 0.1em;}
  .index-about-content .column-lf-text img.more-bt { clear: both; width: 16.8vw; height: auto; margin: 5vw 0 0 0;}
  .index-about-content .column-rt-pics { width: 60%;}
  .index-about-content .column-rt-pics img.photo-1 { width: 100%; height: auto; margin: -3vw 0 0 0; position: relative; z-index: 2;}
  .index-about-content .column-rt-pics img.photo-2 { width: 25vw; height: auto; margin: -3.8vw 0 0 -5.3vw; position: relative; z-index: 1;}


  .index-about-content .column-lf-text img.photo-3 { width: 25.5vw; height: auto; margin: 3vw 0 0 0; position: relative; z-index: 1;}


  /************ section #index-news ************/

  section#index-news { clear: both; width: 100%; padding: 4.5vw calc(50% - 38vw); box-sizing: border-box; background-color: #fff;}

  .index-news-title { width: 66%; margin: 0 auto; text-align: center; position: relative; z-index: 1;}
  .index-news-title span.title-b { color: rgba(165,165,165,0.8); font-size: 8vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 8vw;}
  .index-news-title span.title-s { padding: 0.2vw 1.5vw; margin: 0 30vw 0 0; color: #fff; font-size: 2.2vw; font-weight: 700; line-height: 2.2vw; background-color: #991e23;}
  .index-news-title img.more-bt { width: 16.8vw; height: auto; position: absolute; bottom: 0; right: 5vw;}

  .index-news-list { clear: both; width: 100%; margin: 3vw 0 0 0; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .index-news-list .news-box { width: calc(100% / 3 - 1vw); margin: 0 0.5vw 1vw 0.5vw;}
  .index-news-list .news-box a { width: 100%; height: 100%; padding: 0.5vw; text-decoration: none; border: 1px #fff solid; box-sizing: border-box; display: block; transition: 0.5s;}
  .index-news-list .news-box a:hover { border: 1px #ccc solid;}
  .index-news-list .news-box .news-pic { width: 100%;}
  .index-news-list .news-box .news-pic img { width: 100%; height: auto;}
  .index-news-list .news-box .news-date { width: 100%; padding: 1vw 0.5vw; box-sizing: border-box;}
  .index-news-list .news-box .news-date span.date { padding: 0 1vw; color: #000; font-size: 1.1vw; border-radius: 1vw; background-color: #eaa61e;}
  .index-news-list .news-box .news-title { width: 100%; padding: 0 0.5vw; color: #000; font-size: 1.1vw; line-height: 1.8vw; letter-spacing: 0.1em; box-sizing: border-box;}



  ul.page-news-list-pagenum { clear: both; width: 100%; padding: 0; margin: 3vw 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  ul.page-news-list-pagenum li { padding: 0; margin: 0 0.3vw 1vw 0.3vw;}
  ul.page-news-list-pagenum li a { padding: 0.5vw; color: #eaa61e; font-size: 1.1vw; border: 1px #fff solid; text-decoration: none; display: block;}
  ul.page-news-list-pagenum li a:hover { border: 1px #eaa61e solid;}
  ul.page-news-list-pagenum li a.sel { color: #000; background-color: #eaa61e; border: 1px #eaa61e solid;}



  .page-news-content { clear: both; width: 100%; padding: 2vw 0 0 0; margin: 3vw 0 0 0; border-top: 1px #ccc solid; border-bottom: 1px #ccc solid;}
  .page-news-content .news-title { width: 100%; font-size: 1.4vw; font-weight: 500; line-height: 2vw; text-align: center;}
  .page-news-content .news-date { width: 100%; padding: 1vw 0 0 0; text-align: center;}
  .page-news-content .news-date span.date { padding: 0 1vw; color: #000; font-size: 1.1vw; border-radius: 1vw; background-color: #eaa61e;}
  .page-news-content .news-content { width: 100%; padding: 3vw; font-size: 1.1vw; line-height: 2vw; box-sizing: border-box;}
  .page-news-content .news-content a { color: #000; border-bottom: 1px #000 solid; text-decoration: none;}
  .page-news-content .news-content a:hover { color: #eaa61e; border-bottom: 1px #eaa61e solid;}
  .page-news-content .news-content img { clear: both; max-width: 100%; height: auto;}


  /************ section #index-service ************/

  section#index-service { clear: both; width: 100%; padding: 4.5vw 0 7vw 0; box-sizing: border-box; background-image: url("../images/index_service_bg.jpg"); background-repeat: no-repeat; background-size: cover; position: relative; z-index: 2;}

  .index-service-title { width: 100%; padding: 0 0 0 14.5vw; box-sizing: border-box; display: flex; align-items: center; position: relative; z-index: 1;}
  .index-service-title span.title-b { color: #a5a5a5; font-size: 8vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 8vw;}
  .index-service-title span.title-s { padding: 0.5vw 1.5vw; color: #fff; font-size: 2.2vw; font-weight: 700; line-height: 2.2vw; background-color: #991e23;}

  .index-service-item-1 { clear: both; width: 100%; margin: 2.5vw 0 5vw 0; position: relative;}
  .index-service-item-1 .service-item-bg { width: 72vw; height: 18vw; padding: 4vw 0 0 14.5vw; box-sizing: border-box; background-color: #f5b11e; position: relative; z-index: 1;}
  .index-service-item-1 .service-item-bg .bigger { width: 23vw; color: #000; font-size: 1.8vw; font-weight: 500; letter-spacing: 0.1em;}
  .index-service-item-1 .service-item-bg .smaller { width: 23vw; color: #000; font-size: 1.1vw; font-weight: 300; line-height: 2vw; letter-spacing: 0.1em;}
  .index-service-item-1 .service-item-bg .more-bt { width: 23vw; margin: 0.5vw 0 0 0;}
  .index-service-item-1 .service-item-bg .more-bt img { width: 16.8vw; height: auto;}
  .index-service-item-1 img.service-item-pic { width: 42vw; height: auto; position: absolute; top: 2.5vw; right: 14.5vw; z-index: 2;}

  .index-service-item-2 { clear: both; width: 100%; margin: 2.5vw 0 5vw 0; position: relative; display: flex; justify-content: flex-end;}
  .index-service-item-2 .service-item-bg { width: 72vw; height: 18vw; padding: 1vw 0 0 34.2vw; box-sizing: border-box; background-color: #a21e23; position: relative; z-index: 1;}
  .index-service-item-2 .service-item-bg .bigger { width: 23vw; color: #fff; font-size: 1.8vw; font-weight: 500; letter-spacing: 0.1em;}
  .index-service-item-2 .service-item-bg .smaller { width: 23vw; color: #fff; font-size: 1.1vw; font-weight: 300; line-height: 2vw; letter-spacing: 0.1em;}
  .index-service-item-2 .service-item-bg .more-bt { width: 23vw; margin: 0.5vw 0 0 0;}
  .index-service-item-2 .service-item-bg .more-bt img { width: 16.8vw; height: auto;}
  .index-service-item-2 img.service-item-pic { width: 42vw; height: auto; position: absolute; top: 2.5vw; left: 12.3vw; z-index: 2;}

  .index-service-item-3 { clear: both; width: 100%; margin: 2.5vw 0 5vw 0; position: relative;}
  .index-service-item-3 .service-item-bg { width: 72vw; height: 18vw; padding: 2.5vw 0 0 7.7vw; margin: 0 auto; box-sizing: border-box; background-color: #158872; position: relative; z-index: 1;}
  .index-service-item-3 .service-item-bg .bigger { width: 21vw; color: #fff; font-size: 1.8vw; font-weight: 500; letter-spacing: 0.1em;}
  .index-service-item-3 .service-item-bg .smaller { width: 21vw; color: #fff; font-size: 1.1vw; font-weight: 300; line-height: 2vw; letter-spacing: 0.1em;}
  .index-service-item-3 .service-item-bg .more-bt { width: 21vw; margin: 0.5vw 0 0 0;}
  .index-service-item-3 .service-item-bg .more-bt img { width: 16.8vw; height: auto;}
  .index-service-item-3 img.service-item-pic { width: 42vw; height: auto; position: absolute; top: 2.5vw; left: 50%; z-index: 2;}

  img.index-reviews-order { width: 28vw; height: auto; position: absolute; bottom: -6vw; left: calc(50% - 14vw);}


  /************ section #index-reviews ************/

  section#index-reviews { clear: both; width: 100%; padding: 20vw 0 4.5vw 0; box-sizing: border-box; background-color: #4d4d4d; background-image: url("../images/index_reviews_bg.jpg"); background-repeat: no-repeat; background-size: cover; position: relative; z-index: 1;}

  .index-reviews-title { width: 100%; text-align: center;}
  .index-reviews-title span.title-b { color: rgba(255,255,255,0.5); font-size: 8vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 8vw;}
  .index-reviews-title span.title-s { padding: 0.2vw 1.5vw; color: #fff; font-size: 2.2vw; font-weight: 700; line-height: 2.2vw; background-color: #991e23;}

  .index-reviews-text { clear: both; width: 100%; color: #fff; font-size: 1.1vw; font-weight: 300; letter-spacing: 0.1em; text-align: center;}

  .index-reviews-list { clear: both; width: 72vw; margin: 2vw auto 0 auto;}
  .index-reviews-list .reviews-box { width: calc(100% - 3vw); margin: 0 1.5vw; padding: 2vw; box-sizing: border-box; background-color: #eba71e;}
  .index-reviews-list .reviews-box .icon { width: 100%; margin: 0 0 1vw 0; color: #fff; font-size: 2vw; text-align: center;}
  .index-reviews-list .reviews-box .text { width: 100%; color: #000; font-size: 1.1vw; line-height: 2.2vw;}

  .index-reviews-list .slick-arrow { clear: both; width: 100%; margin: 2vw 0 0 0; display: flex; justify-content: center; align-items: center;}
  .index-reviews-list .slick-arrow img.reviews-slick-arrow-prev, 
  .index-reviews-list .slick-arrow img.reviews-slick-arrow-next { width: 1vw; height: auto; margin: 0 2.2vw; cursor: pointer;}


  /************ section #index-knowledge ************/

  section#index-knowledge { clear: both; width: 100%; padding: 4.5vw 0 6vw 14vw; box-sizing: border-box; background-image: url("../images/index_knowledge_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: left center;}

  .index-knowledge-title { width: 100%; position: relative; z-index: 1;}
  .index-knowledge-title span.title-b { color: rgba(165,165,165,0.8); font-size: 8vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 8vw;}
  .index-knowledge-title span.title-s { padding: 0.2vw 1.5vw; color: #fff; font-size: 2.2vw; font-weight: 700; line-height: 2.2vw; background-color: #158072;}

  ul.index-knowledge-list { clear: both; width: 30vw; padding: 0; margin: 2vw 0 0 0; box-sizing: border-box; list-style: none; display: block;}
  ul.index-knowledge-list li { width: 100%; padding: 1.8vw 0; margin: 0; color: #000; border-bottom: 1px #8b8b8b solid;}
  ul.index-knowledge-list li a { width: 100%; color: #333; font-size: 1.2vw; text-decoration: none; display: flex; justify-content: flex-start; align-items: flex-start; transition: 0.5s;}
  ul.index-knowledge-list li a:hover { color: #158872;}
  ul.index-knowledge-list li a .num { width: 2vw;}
  ul.index-knowledge-list li a .title { width: calc(100% - 2vw);}

  img.index-knowledge-more-bt { clear: both; width: 16.8vw; height: auto; margin: 3vw 0 0 0;}



  ul.page-knowledge-pagenum { clear: both; width: 30vw; padding: 0; margin: 3vw 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  ul.page-knowledge-pagenum li { padding: 0; margin: 0 0.3vw 1vw 0.3vw;}
  ul.page-knowledge-pagenum li a { padding: 0.5vw; color: #158872; font-size: 1.1vw; border: 1px transparent solid; text-decoration: none; display: block;}
  ul.page-knowledge-pagenum li a:hover { border: 1px #158872 solid;}
  ul.page-knowledge-pagenum li a.sel { color: #fff; background-color: #158872; border: 1px #158872 solid;}



  section#page-knowledge { clear: both; width: 100%; padding: 4.5vw 14vw 6vw 14vw; box-sizing: border-box; background-image: url("../images/page_knowledge_bg.jpg"); background-repeat: no-repeat; background-size: cover;}

  .page-knowledge-content { clear: both; width: 100%; margin: 3vw auto 0 auto;}
  .page-knowledge-content .knowledge-title { width: 100%; padding: 0 0 0.5vw 0; font-size: 1.2vw; font-weight: 500; border-bottom: 1px #000 solid; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-knowledge-content .knowledge-title .num { width: 2vw;}
  .page-knowledge-content .knowledge-title .title { width: calc(100% - 2vw);}
  .page-knowledge-content .knowledge-content { width: 100%; padding: 1vw 0; font-size: 1vw; line-height: 1.8vw;}
  .page-knowledge-content .knowledge-content img { clear: both; max-width: 100%; height: auto;}


  /************ section #index-shopping ************/

  section#index-shopping { clear: both; width: 100%; padding: 4.5vw 0 2.5vw 0; box-sizing: border-box;}

  .index-shopping-title { width: 100%; display: flex; justify-content: center; align-items: center;}
  .index-shopping-title span.title-b { color: rgba(165,165,165,0.8); font-size: 8vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 8vw;}
  .index-shopping-title span.title-s { padding: 0.5vw 1.5vw; color: #fff; font-size: 2.2vw; font-weight: 700; line-height: 2.2vw; background-color: #991e23;}

  .index-shopping-list { clear: both; width: 100%;}
  .index-shopping-list ul.shopping-sort-tab { clear: both; width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: center;}
  .index-shopping-list ul.shopping-sort-tab li { padding: 0 0.5vw; margin: 0; font-size: 1.6vw; font-weight: 500; letter-spacing: 0.1em;}
  .index-shopping-list ul.shopping-sort-tab li a { padding: 0.2vw 1vw; color: #000; text-decoration: none; display: block;}
  .index-shopping-list ul.shopping-sort-tab li a:hover { background-color: #eee;}
  .index-shopping-list ul.shopping-sort-tab li a.sel { background-color: #eba71e;}

  .index-shopping-list .shopping-pro-list { clear: both; width: 100%;}
  .index-shopping-list .shopping-pro-list .shopping-pro-con { clear: both; width: 100%;}
  .index-shopping-list .shopping-pro-list .shopping-pro-con .pro-list-full { width: 100%; padding: 5vw 0 1.5vw 0; background-color: #eba71e;}
  .index-shopping-list .shopping-pro-list .shopping-pro-con .pro-list-full img { width: auto; height: 17.5vw;}
  .index-shopping-list .shopping-pro-list .shopping-pro-con .pro-list-full .pro-list-box { width: auto;}
  .index-shopping-list .shopping-pro-list .shopping-pro-con .pro-list-full .pro-list-box a { width: 100%; height: 100%; text-decoration: none; display: block;}
  .index-shopping-list .shopping-pro-list .shopping-pro-con .pro-list-full .pro-list-box .pro-pic { width: 100%;}
  .index-shopping-list .shopping-pro-list .shopping-pro-con .pro-list-full .pro-list-box .pro-pic img { width: auto; height: 20vw;}
  .index-shopping-list .shopping-pro-list .shopping-pro-con .pro-list-full .pro-list-box .pro-name { width: 100%; padding: 0.5vw 0 0 0; color: #000; font-size: 1vw; font-weight: 300; letter-spacing: 0.1em; text-align: center;}
  .index-shopping-list .shopping-pro-list .shopping-pro-con .pro-list-full .pro-list-box .pro-price { width: 100%; color: #fff; font-size: 1.4vw; text-align: center;}
  .index-shopping-list .shopping-pro-list .shopping-pro-con .pro-list-arrow { clear: both; width: 100%; padding: 2vw 0; display: flex; justify-content: center; align-items: center; position: relative;}
  .index-shopping-list .shopping-pro-list .shopping-pro-con .pro-list-arrow img.pro-list-arrow-prev, 
  .index-shopping-list .shopping-pro-list .shopping-pro-con .pro-list-arrow img.pro-list-arrow-next { width: 1vw; height: auto; margin: 0 2.2vw; cursor: pointer;}
  
  img.index-shopping-more-bt { width: 16.8vw; height: auto; position: absolute; top: 1.4vw; right: calc(50% - 37vw);}


  /** 20240520修改 **/
  .page-prod-list-full { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-prod-list-full .prod-box { width: calc(100% / 4 - 1vw); margin: 0 0.5vw 1vw 0.5vw;}
  .page-prod-list-full .prod-box a { width: 100%; padding: 0.2vw; border: 1px #fff solid; box-sizing: border-box; text-decoration: none; display: block;}
  .page-prod-list-full .prod-box .prod-pic { width: 100%;}
  .page-prod-list-full .prod-box .prod-pic img { width: 100%; height: auto;}
  .page-prod-list-full .prod-box .prod-name { width: 100%; padding: 0.5vw 0 0 0; color: #000; font-size: 0.8vw; font-weight: 300; letter-spacing: 0.1em; text-align: center;}
  .page-prod-list-full .prod-box .prod-price { width: 100%; color: #a21e23; font-size: 1.2vw; text-align: center;}
  .page-prod-list-full .prod-box a:hover { border: 1px #ccc solid;}

  ul.page-pro-pagenum { clear: both; width: 100%; padding: 0; margin: 3vw 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  ul.page-pro-pagenum li { padding: 0; margin: 0 0.3vw 1vw 0.3vw;}
  ul.page-pro-pagenum li a { padding: 0.5vw; color: #eba71e; font-size: 1.1vw; border: 1px transparent solid; text-decoration: none; display: block;}
  ul.page-pro-pagenum li a:hover { border: 1px #eba71e solid;}
  ul.page-pro-pagenum li a.sel { color: #fff; background-color: #eba71e; border: 1px #eba71e solid;}


  /************ section #page-banner ************/

  section#page-banner { width: 100%; padding: 5vw 0 0 0; background-image: url("../images/header_banner_bg.png"); background-repeat: no-repeat; background-size: 50% auto; background-position: left top; position: relative; z-index: 1;}

  img.page-banner { clear: both; width: 100%;}

  #breadcrumbs-bar { clear: both; width: 100%; padding: 1vw 0 1vw 20vw; box-sizing: border-box; color: #333; font-size: 0.9vw;}
  #breadcrumbs-bar a { color: #333; text-decoration: none;}
  #breadcrumbs-bar a:hover { border-bottom: 1px #333 solid;}


  /************ section #about-HTL ************/

  section#about-HTL { clear: both; width: 100%; padding: 3vw 0 0 0;}

  .about-HTL-title { width: 100%; text-align: center; position: relative; z-index: 1;}
  .about-HTL-title span.title-b { color: #d7d7d7; font-size: 6vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 8vw;}
  .about-HTL-title span.title-s { padding: 0.2vw 1.5vw; color: #fff; font-size: 2.2vw; font-weight: 700; line-height: 2.2vw; background-color: #991e23;}

  .about-HTL-col-1 { clear: both; width: 100%; margin: 1.3vw 0; display: flex; justify-content: flex-start; align-items: stretch;}
  .about-HTL-col-1 .col-color { width: 50%;}
  .about-HTL-col-1 .col-color div { width: 26.5vw; height: 20vw; margin: 0 1vw 0 0; background-color: #158072; display: block; float: right;}
  .about-HTL-col-1 .col-text { width: 50%; height: 20vw; border-bottom: 1px #a4a4a4 solid; display: flex; align-items: center;}
  .about-HTL-col-1 .col-text div { width: 26.5vw; padding: 0 2.8vw; box-sizing: border-box; font-size: 1.2vw; line-height: 1.8vw;}
  .about-HTL-col-1 .col-text div span.title { font-size: 2.2vw; font-weight: 500;}

  .about-HTL-col-2 { clear: both; width: 100%; margin: 1.3vw 0; display: flex; justify-content: flex-start; align-items: stretch;}
  .about-HTL-col-2 .col-text { width: calc(50% - 1vw); height: 20vw; margin: 0 1vw 0 0; border-bottom: 1px #a4a4a4 solid; display: flex; justify-content: flex-end; align-items: center;}
  .about-HTL-col-2 .col-text div { width: 26.5vw; padding: 0 2.8vw; box-sizing: border-box; font-size: 1.2vw; line-height: 1.8vw;}
  .about-HTL-col-2 .col-text div span.title { font-size: 2.2vw; font-weight: 500;}
  .about-HTL-col-2 .col-color { width: 50%;}
  .about-HTL-col-2 .col-color div { width: 100%; height: 20vw; background-color: #eaa61e; display: block;}

  .about-HTL-col-3 { clear: both; width: 100%; margin: 1.3vw 0; display: flex; justify-content: flex-start; align-items: stretch;}
  .about-HTL-col-3 .col-color { width: 50%;}
  .about-HTL-col-3 .col-color div { width: 26.5vw; height: 20vw; margin: 0 1vw 0 0; background-color: #981e23; display: block; float: right;}
  .about-HTL-col-3 .col-text { width: 50%; height: 20vw; border-bottom: 1px #a4a4a4 solid; display: flex; align-items: center;}
  .about-HTL-col-3 .col-text div { width: 26.5vw; padding: 0 2.8vw; box-sizing: border-box; font-size: 1.2vw; line-height: 1.8vw;}
  .about-HTL-col-3 .col-text div span.title { font-size: 2.2vw; font-weight: 500;}

  .about-HTL-col-4 { clear: both; width: 100%; padding: 4.5vw 0 6vw 0; margin: 2vw 0 0 0; background-image: url("../images/about_HTL_col_4_bg.jpg"); background-repeat: no-repeat; background-size: calc(50% - 1vw) auto; background-position: left top; display: flex; justify-content: center; align-items: center;}
  .about-HTL-col-4 img.logo { width: 19.5vw; height: auto; margin: 0 2.3vw 0 0;}
  .about-HTL-col-4 .col-text { width: 31vw; font-size: 1.6vw; font-weight: 500; line-height: 2.8vw;}
  .about-HTL-col-4 .col-text img { width: 100%; height: auto; margin: 0 0 1vw 0;}


  /************ section #page-service ************/

  section#page-service { clear: both; width: 100%; padding: 4.5vw 0 7vw 0; box-sizing: border-box; background-image: url("../images/index_about_bg.jpg"); background-repeat: no-repeat; background-size: cover; position: relative; z-index: 2;}

  .page-service-title { width: 100%; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
  .page-service-title span.title-b { color: #fff; font-size: 8vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 8vw;}
  .page-service-title span.title-s { padding: 0.5vw 1.5vw; color: #fff; font-size: 2.2vw; font-weight: 700; line-height: 2.2vw; background-color: #991e23;}

  .page-service-items { clear: both; width: 100%; margin: 3vw 0 0 0; display: flex; justify-content: center; align-items: stretch;}
  .page-service-items .service-item-box { width: 25vw;}
  .page-service-items .service-item-box a { width: 100%; height: 100%; text-decoration: none; display: block;}
  .page-service-items .service-item-box .photo { width: 100%;}
  .page-service-items .service-item-box .photo img { width: 100%; height: auto;}
  .page-service-items .service-item-box .title { width: 100%; padding: 0.5vw 0; font-size: 1.1vw; font-weight: 500; text-align: center;}
  .page-service-items .service-item-box .title.bg-red { color: #fff; background-color: #981e23;}
  .page-service-items .service-item-box .title.bg-yellow { color: #000; background-color: #eaa61e;}
  .page-service-items .service-item-box .title.bg-green { color: #fff; background-color: #158072;}


  section#service-item-list { clear: both; width: 100%; padding: 0 0 3.5vw 11vw; box-sizing: border-box; background-color: #fff;}

  .service-item-intro-more { clear: both; width: 100%; margin: 3.5vw 0 0 0; position: relative;}
  .service-item-intro-more img.service-item-bg { width: 100%; height: auto; position: relative; z-index: 1;}
  .service-item-intro-more .serv-item-con { width: 50vw; padding: 3.5vw 0 0 2.5vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; position: absolute; top: 0; left: 0; z-index: 2;}
  .service-item-intro-more .serv-item-con .col-lf-num { width: 10vw; font-size: 8vw; font-weight: 700; font-family: Arial;}
  .service-item-intro-more .serv-item-con .col-lf-num.color-red { color: #971e23;}
  .service-item-intro-more .serv-item-con .col-lf-num.color-yellow { color: #e9a51e;}
  .service-item-intro-more .serv-item-con .col-lf-num.color-green { color: #158072;}
  .service-item-intro-more .serv-item-con .col-rt-intro { width: calc(100% - 10vw);}
  .service-item-intro-more .serv-item-con .col-rt-intro .title-more { width: 100%; margin: 2.6vw 0 0 0; display: flex; justify-content: space-between; align-items: flex-end;}
  .service-item-intro-more .serv-item-con .col-rt-intro .title-more span.title { font-size: 3.4vw; font-weight: 500; line-height: 3.4vw;}
  .service-item-intro-more .serv-item-con .col-rt-intro .title-more img.more-bt { width: 17vw; height: auto;}
  .service-item-intro-more .serv-item-con .col-rt-intro .text-con { width: 100%; margin: 2vw 0 0 0; padding: 0 2vw 0 0; font-size: 1.4vw; line-height: 2.4vw; box-sizing: border-box;}


  /************ section #page-serv-item ************/

  section#page-serv-item-1 { clear: both; width: 100%; background-image: url(../images/page_service_items_bg.png); background-repeat: repeat-y; background-size: 100% auto;}

  .page-serv-items-title { width: 100%; padding: 23vw 0 0 calc(50% - 38vw); box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; position: absolute; top: 0; left: 0; z-index: 2;}
  .page-serv-items-title span.title-b { color: #fff; font-size: 8vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 8vw;}
  .page-serv-items-title span.title-s { padding: 0.5vw 1.5vw; color: #fff; font-size: 2.2vw; font-weight: 700; line-height: 2.2vw; background-color: #991e23;}

  .page-serv-item-con { clear: both; width: 100%; padding: 2.5vw 0;}
  .page-serv-item-con .content { width: 76vw; margin: 0 auto; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-serv-item-con .content .col-lf-num { width: 12vw; padding: 0 0 0 2vw; font-size: 8vw; font-weight: 700; font-family: Arial; box-sizing: border-box;}
  .page-serv-item-con .content .col-lf-num.color-red { color: #971e23;}
  .page-serv-item-con .content .col-lf-num.color-yellow { color: #e9a51e;}
  .page-serv-item-con .content .col-lf-num.color-green { color: #158072;}
  .page-serv-item-con .content .col-rt-intro { width: calc(100% - 12vw);}
  .page-serv-item-con .content .col-rt-intro .title { width: 100%; margin: 2.6vw 0 0 0; font-size: 3.4vw; font-weight: 500; line-height: 3.4vw; display: flex; justify-content: space-between; align-items: flex-end;}
  .page-serv-item-con .content .col-rt-intro .text-con { width: 100%; margin: 2vw 0 0 0; padding: 0 6vw 2.5vw 0; font-size: 1.4vw; line-height: 2.4vw; box-sizing: border-box;}
  .page-serv-item-con .sub-title { clear: both; width: 78vw; margin: 0 auto; color: #fff; font-size: 8vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 8vw; text-align: right;}
  .page-serv-item-con .interior { clear: both; width: 100%; margin: 3vw 0 0 0; position: relative;}
  .page-serv-item-con .interior .intro-people { width: 53vw; position: relative; z-index: 1;}
  .page-serv-item-con .interior .intro-people img { width: 100%; height: auto;}
  .page-serv-item-con .interior .intro-text { width: 29vw; position: absolute; top: 4vw; right: calc(50% - 39vw + 7.5vw); z-index: 2;}
  .page-serv-item-con .interior .intro-text .title { width: 100%; color: #971e23; font-size: 2.4vw; font-weight: 500; line-height: 3.6vw; border-bottom: 1px #971e23 solid;}
  .page-serv-item-con .interior .intro-text .intro { width: 100%; padding: 0.5vw 0 1.5vw 0; font-size: 1.4vw; font-weight: 500; line-height: 2.4vw;}
  .page-serv-item-con .interior .intro-text .infor { width: 100%; font-size: 1.2vw; line-height: 2.4vw;}
  .page-serv-item-con .interior .intro-text .infor .name { width: 100%; font-size: 1.4vw; font-weight: 500; line-height: 3vw;}
  .page-serv-item-con .award-exp { clear: both; width: 76vw; padding: 2vw 4.5vw 4vw 4.5vw; margin: 0 auto; box-sizing: border-box;}
  .page-serv-item-con .award-exp .title { width: 100%; color: #971e23; font-size: 2.4vw; font-weight: 500; line-height: 3.6vw; text-align: center; border-bottom: 1px #971e23 solid;}
  .page-serv-item-con .award-exp .award-exp-list { width: 100%; padding: 1vw 0 0 0; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-serv-item-con .award-exp .award-exp-list .year { width: 4vw; padding: 0.3vw 0; color: #000; font-size: 1.4vw; line-height: 2.4vw;}
  .page-serv-item-con .award-exp .award-exp-list .infor { width: calc(100% - 4vw); padding: 0.3vw 0; color: #000; font-size: 1.4vw; line-height: 2.4vw;}

  
  section#page-serv-items-works { clear: both; width: 100%;}

  .page-serv-works-title { width: 76vw; margin: 2.5vw auto; color: #971e23; font-size: 2.4vw; font-weight: 500; line-height: 3.6vw; text-align: center; border-bottom: 1px #971e23 solid; box-sizing: border-box;}

  .page-serv-item-back-bt { clear: both; width: 100%;}
  .page-serv-item-back-bt a { display: block;}
  .page-serv-item-back-bt a img { width: 17vw; height: auto; margin: 2.5vw auto;}


  /** 20240516新增 **/
  .page-serv-works-bt { width: 16vw; margin: 2.5vw auto;}
  .page-serv-works-bt a { width: 100%; padding: 0.5vw 0; color: #fff; font-size: 1.8vw; text-align: center; text-decoration: none; border-radius: 2vw; background-color: #971e23; display: block;}

  .page-serv-works-list { clear: both; width: 76vw; margin: 0 auto; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .page-serv-works-list img { width: calc(100% / 3 - 1vw); height: auto; margin: 0 0.5vw 1vw 0.5vw;}


  .page-serv-item-con .inspection-steps { clear: both; width: 100%; margin: 3vw 0 0 0;}
  .page-serv-item-con .inspection-steps .title-box { width: 54vw; margin: 0 0 3.5vw 0; position: relative;}
  .page-serv-item-con .inspection-steps .title-box img.title-bg { width: 100%; height: auto; position: relative; z-index: 1;}
  .page-serv-item-con .inspection-steps .title-box span.title-text { color: #fff; font-size: 3vw; font-weight: 500; border-bottom: 1px #fff solid; position: absolute; top: 2vw; right: 15vw; z-index: 2;}
  .page-serv-item-con .inspection-steps .steps-content { clear: both; width: 52vw; margin: 0 auto;}
  .page-serv-item-con .inspection-steps .steps-content .step-box { clear: both; width: 100%; margin: 0 0 4vw 0; position: relative;}
  .page-serv-item-con .inspection-steps .steps-content .step-box .top-title-bar { width: 100%; display: flex; justify-content: flex-start; align-items: center;}
  .page-serv-item-con .inspection-steps .steps-content .step-box .top-title-bar img.step-icon { width: 5vw; height: auto; margin: 0 1vw 0 0;}
  .page-serv-item-con .inspection-steps .steps-content .step-box .top-title-bar span.step-num { padding: 0 1.5vw; font-size: 1.6vw; font-weight: 500; line-height: 2.4vw; border-radius: 0.8vw; background-color: #e9a51e;}
  .page-serv-item-con .inspection-steps .steps-content .step-box .top-title-bar span.step-title { padding: 0 0 0 1vw; font-size: 1.6vw; font-weight: 500; line-height: 2.4vw;}
  .page-serv-item-con .inspection-steps .steps-content .step-box .text-con { clear: both; width: 100%; padding: 0 14vw 0 6.5vw; font-size: 1.4vw; font-weight: 300; line-height: 2.6vw; box-sizing: border-box;}
  .page-serv-item-con .inspection-steps .steps-content .step-box img.pre-order-bt { width: 12.5vw; height: auto; position: absolute; top: 0; right: 3vw; z-index: 2;}
  .page-serv-item-con .inspection-steps .steps-content .step-box img.arrow-down { width: 3.5vw; height: auto; position: absolute; top: 8vw; right: 6vw; z-index: 2;}

  section#page-serv-item-2 { clear: both; width: 100%; padding: 6.5vw 0 0 0;}

  .inspection-serv-list-title { width: 54vw; margin: 0 0 3.5vw 0; position: relative; z-index: 2;}
  .inspection-serv-list-title img.title-bg { width: 100%; height: auto; position: relative; z-index: 1;}
  .inspection-serv-list-title span.title-text { color: #fff; font-size: 3vw; font-weight: 500; border-bottom: 1px #fff solid; position: absolute; top: 2vw; right: 15vw; z-index: 2;}

  .inspection-serv-items-list { clear: both; width: 100%; padding: 7vw calc(50% - 38vw + 8vw) 2vw calc(50% - 38vw + 8vw); margin: -7vw auto 0 auto; box-sizing: border-box; background-image: url(../images/page_service_items_bg.png); background-repeat: repeat-y; background-size: 100% auto; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; position: relative; z-index: 1;}

  ul.inspection-serv-list { width: 50%; padding: 0 4vw; margin: 0 0 4.5vw 0; box-sizing: border-box; list-style: none; display: block;}
  ul.inspection-serv-list ::marker { content: "● "; font-size: 1.8vw; line-height: 2vw;}
  ul.inspection-serv-list li { width: 100%; padding: 0; margin: 0 0 1vw 0; font-size: 1.8vw; font-weight: 500; line-height: 2vw;}
  ul.inspection-serv-list li ul.serv-list { width: 100%; padding: 0; margin: 1vw 0 0 0; list-style: none; display: block;}
  ul.inspection-serv-list li ul.serv-list ::marker { content: "";}
  ul.inspection-serv-list li ul.serv-list li { width: 100%; padding: 0; margin: 0; font-size: 1.2vw; font-weight: 300; line-height: 2vw;}


  .page-serv-works-title-green { width: 76vw; margin: 2.5vw auto; color: #158072; font-size: 2.4vw; font-weight: 500; line-height: 3.6vw; text-align: center; border-bottom: 1px #158072 solid; box-sizing: border-box;}

  .decoration-steps-list { clear: both; width: 100%; margin: 2vw 0 0 0;}
  .decoration-steps-list .title-box { width: 54vw; position: relative;}
  .decoration-steps-list .title-box img.title-bg { width: 100%; height: auto; position: relative; z-index: 1;}
  .decoration-steps-list .title-box span.title-text { color: #fff; font-size: 3vw; font-weight: 500; border-bottom: 1px #fff solid; position: absolute; top: 2vw; right: 15vw; z-index: 2;}

  .decoration-steps-con { clear: both; width: 76vw; padding: 4vw 0; margin: 0 auto;}
  .decoration-steps-con .steps-list-row-mo { display: none;}
  .decoration-steps-con .steps-list-row { clear: both; width: 100%; margin: 0 0 5vw 0; display: flex; justify-content: center; align-items: center;}
  .decoration-steps-con .steps-list-row .step-box { width: 15vw;}
  .decoration-steps-con .steps-list-row .step-box .top-title-bar { width: 100%; margin: 0 0 1vw 0; text-align: center;}
  .decoration-steps-con .steps-list-row .step-box .top-title-bar span.step-num { padding: 0 1.5vw; color: #fff; font-size: 1.6vw; font-weight: 500; line-height: 2.4vw; border-radius: 0.8vw; background-color: #158072;}
  .decoration-steps-con .steps-list-row .step-box .top-title-bar span.title { font-size: 1.6vw; font-weight: 500; line-height: 2.4vw;}
  .decoration-steps-con .steps-list-row .step-box img.step-icon { clear: both; width: 12vw; height: auto; margin: 0 auto;}
  .decoration-steps-con .steps-list-row img.arrow-right { width: 10vw; height: auto;}
  .decoration-steps-con .steps-list-row .step-box-2 { width: 25vw;}
  .decoration-steps-con .steps-list-row .step-box-2 .top-title-bar { width: 100%; margin: 0 0 1vw 0; text-align: center;}
  .decoration-steps-con .steps-list-row .step-box-2 .top-title-bar span.step-num { padding: 0 1.5vw; color: #fff; font-size: 1.6vw; font-weight: 500; line-height: 2.4vw; border-radius: 0.8vw; background-color: #158072;}
  .decoration-steps-con .steps-list-row .step-box-2 .top-title-bar span.title { font-size: 1.6vw; font-weight: 500; line-height: 2.4vw;}
  .decoration-steps-con .steps-list-row .step-box-2 img.step-icon { clear: both; width: 25vw; height: auto; margin: 0 auto;}

  img.page-serv-item-3-preorder-bt { clear: both; width: 12vw; height: auto; margin: 0 auto;}


  /************ section #page-reviews ************/

  section#page-reviews { clear: both; width: 100%; padding: 4vw 8vw; background-color: #4d4d4d; box-sizing: border-box;}

  .page-reviews-title { width: 100%; margin: 2.5vw 0; text-align: center;}
  .page-reviews-title span.title-b { color: rgba(255,255,255,0.5); font-size: 8vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 8vw;}
  .page-reviews-title span.title-s { padding: 0.2vw 1.5vw; color: #fff; font-size: 2.2vw; font-weight: 700; line-height: 2.2vw; background-color: #991e23;}

  .page-reviews-article-list { clear: both; width: 100%;}
  .page-reviews-article-list .reviews-article-box { clear: both; width: 70%; margin: 2vw auto; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-reviews-article-list .reviews-article-box .col-photo-mo { display: none;}
  .page-reviews-article-list .reviews-article-box .col-photo { width: 50%; background-color: #eba71e; display: block;}
  .page-reviews-article-list .reviews-article-box .col-photo img { width: 100%; height: auto;}
  .page-reviews-article-list .reviews-article-box .col-text { width: 50%; padding: 3vw; color: #fff; font-size: 1.1vw; line-height: 1.8vw; background-color: #eba71e; box-sizing: border-box;}
  .page-reviews-article-list .reviews-article-box .col-text span.nickname { color: #eee; font-size: 0.9vw;}


  /************ page-pro-content ************/

  .page-pro-content { clear: both; width: 100%; padding: 4vw calc(50% - 38vw) 0 calc(50% - 38vw); box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-pro-content .col-lf-nav { width: 16vw;}
  .page-pro-content .col-lf-nav input[type=search] { width: 100%; padding: 0.3vw 1vw; color: #000; font-size: 1.1vw; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .page-pro-content .col-lf-nav .sort-title-mo { display: none;}
  .page-pro-content .col-lf-nav .sort-title { width: 100%; padding: 0.3vw 0.5vw; margin: 2vw 0 0 0; font-size: 1.2vw; font-weight: 500; border-radius: 0.5vw; background-color: #eba71e; box-sizing: border-box;}
  .page-pro-content .col-lf-nav ul.pro-sort-nav { clear: both; width: 100%; padding: 0; margin: 1vw 0 0 0; list-style: none; display: block;}
  .page-pro-content .col-lf-nav ul.pro-sort-nav li { width: 100%; padding: 0; margin: 0;}
  .page-pro-content .col-lf-nav ul.pro-sort-nav li a { width: 100%; padding: 0.5vw; color: #000; font-size: 1.1vw; font-weight: 300; text-decoration: none; display: block; box-sizing: border-box; cursor: pointer;}
  .page-pro-content .col-lf-nav ul.pro-sort-nav li a:hover { font-weight: 400; background-color: #eee;}
  .page-pro-content .col-lf-nav ul.pro-sort-nav li ul.sort-nav-popup { width: 100%; padding: 0.5vw 0 0.5vw 1vw; margin: 0; list-style: none; display: none; box-sizing: border-box;}
  .page-pro-content .col-lf-nav ul.pro-sort-nav li ul.sort-nav-popup li { width: 100%; padding: 0; margin: 0;}
  .page-pro-content .col-lf-nav ul.pro-sort-nav li ul.sort-nav-popup li a { width: 100%; padding: 0.5vw; color: #000; font-size: 1.1vw; font-weight: 300; text-decoration: none; display: block; box-sizing: border-box; cursor: pointer;}
  .page-pro-content .col-lf-nav ul.pro-sort-nav li ul.sort-nav-popup li a:hover { font-weight: 400; background-color: #eee;}

  /** 20240520新增 **/
  .page-pro-content .col-lf-nav .all-sort-title-mo { display: none;}
  
  .page-pro-content .col-rt-con { width: calc(100% - 16vw); padding: 0 0 0 3vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-pro-content .col-rt-con .pro-pic { width: 50%;}
  .page-pro-content .col-rt-con .pro-pic img { width: 100%; height: auto;}
  .page-pro-content .col-rt-con .pro-infor { width: 50%; padding: 0 0 0 2vw; box-sizing: border-box;}
  .page-pro-content .col-rt-con .pro-infor .pro-title { width: 100%; padding: 0 0 0.5vw 0; font-size: 1.4vw; font-weight: 500; border-bottom: 1px #ccc solid;}
  .page-pro-content .col-rt-con .pro-infor .pro-feature { width: 100%; padding: 0.5vw 0; margin: 0 0 1vw 0; font-size: 1.1vw; font-weight: 300; line-height: 1.8vw; border-bottom: 1px #ccc solid;}
  .page-pro-content .col-rt-con .pro-infor .pro-feature .title { width: 100%; font-size: 1.4vw; font-weight: 400;}
  .page-pro-content .col-rt-con .pro-infor .pro-quantity { width: 100%; padding: 0.5vw 0; font-size: 1.1vw;}
  .page-pro-content .col-rt-con .pro-infor .pro-quantity input[type=number] { width: 5vw; padding: 0.2vw 0.5vw; color: #000; font-size: 1vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid;}
  .page-pro-content .col-rt-con .pro-infor .pro-price { width: 100%; font-size: 1.1vw;}
  .page-pro-content .col-rt-con .pro-infor .pro-price span.price { color: #971e23; font-size: 1.4vw; font-weight: 600;}
  .page-pro-content .col-rt-con .pro-intro { width: 100%; margin: 2vw 0 0 0;}
  .page-pro-content .col-rt-con .pro-intro .title { width: 100%; padding: 0 0 0.5vw 0; font-size: 1.4vw; text-align: center; border-top: 1px #ccc solid; border-bottom: 1px #ccc solid; background-color: #eee;}
  .page-pro-content .col-rt-con .pro-intro .content { width: 100%; padding: 2vw 0; font-size: 1.1vw; line-height: 2.2vw;}
  .page-pro-content .col-rt-con .pro-intro .content img { max-width: 100%; height: auto; margin: 0.5vw auto;}

  .page-pro-content .col-full-recommend { clear: both; width: 100%; padding: 2vw 2vw 0 2vw; margin: 2vw 0 0 0; background-color: #eee; box-sizing: border-box;}
  .page-pro-content .col-full-recommend .rec-title { width: 100%; font-size: 1.4vw; font-weight: 500; text-align: center;}
  .page-pro-content .col-full-recommend .pro-rec-list { width: 100%; margin: 2vw 0 0 0; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-pro-content .col-full-recommend .pro-rec-list .pro-box { width: calc(100% / 4 - 2vw); margin: 0 1vw 2vw 1vw;}
  .page-pro-content .col-full-recommend .pro-rec-list .pro-box a { color: #000; text-decoration: none;}
  .page-pro-content .col-full-recommend .pro-rec-list .pro-box .pic { width: 100%;}
  .page-pro-content .col-full-recommend .pro-rec-list .pro-box .pic img { width: 100%; height: auto;}
  .page-pro-content .col-full-recommend .pro-rec-list .pro-box .title { width: 100%; padding: 0.5vw 0 0 0; font-size: 0.9vw;}

  
  /************ section #page-qanda ************/

  section#page-qanda { clear: both; width: 100%; padding: 4vw 14.5vw; box-sizing: border-box; background-image: url("../images/index_service_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto;}

  .page-qanda-title { width: 100%; margin: 0 0 3vw 0;}
  .page-qanda-title span.title-b { color: #a5a5a5; font-size: 8vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 8vw;}

  .page-qanda-list { width: 100%;}
  .page-qanda-list ul.qanda-list-box { width: 100%; padding: 0; margin: 0; border-top: 1px #000 solid; list-style: none; display: block;}
  .page-qanda-list ul.qanda-list-box li { width: 100%; padding: 0; margin: 0; border-bottom: 1px #000 solid;}
  .page-qanda-list ul.qanda-list-box li .qanda-title { width: 100%; padding: 1.5vw 0; display: flex; justify-content: flex-start; align-items: flex-start; cursor: pointer;}
  .page-qanda-list ul.qanda-list-box li .qanda-title:hover { color: #971e23;}
  .page-qanda-list ul.qanda-list-box li .qanda-title .icon { width: 2vw; font-size: 1.4vw; line-height: 2vw;}
  .page-qanda-list ul.qanda-list-box li .qanda-title .title { width: calc(100% - 4vw); font-size: 1.2vw; font-weight: 500; line-height: 2vw;}
  .page-qanda-list ul.qanda-list-box li .qanda-title .open { width: 2vw; font-size: 1.4vw; line-height: 2vw; text-align: right;}
  .page-qanda-list ul.qanda-list-box li .qanda-title .close { width: 2vw; font-size: 1.4vw; line-height: 2vw; text-align: right; display: none;}
  .page-qanda-list ul.qanda-list-box li .qanda-con { width: 100%; padding: 2vw 2vw 2vw 0; border-top: 1px #ccc solid; display: none; justify-content: flex-start; align-items: flex-start; box-sizing: border-box; transition: 0.5s;}
  .page-qanda-list ul.qanda-list-box li .qanda-con .icon { width: 2vw; font-size: 1.4vw; line-height: 2vw;}
  .page-qanda-list ul.qanda-list-box li .qanda-con .text { width: calc(100% - 2vw); font-size: 1vw; font-weight: 300; line-height: 2vw;}
  .page-qanda-list ul.qanda-list-box li .qanda-con .text img { max-width: 100%; height: auto;}


  /** 20240522新增 **/
  ul.page-qanda-nav { width: 100%; padding: 0; margin: 0 0 4vw 0; list-style: none; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
  ul.page-qanda-nav li { padding: 0; margin: 0.5vw;}
  ul.page-qanda-nav li a { padding: 0.5vw 2vw; color: #000; font-size: 1.2vw; text-decoration: none; border-radius: 0.6vw; border: 1px #000 solid; display: block;}
  ul.page-qanda-nav li a:hover { background-color: #fff;}
  ul.page-qanda-nav li a.sel { background-color: #fff;}


  /************ page-contact-con ************/

  .page-contact-title { width: 100%; margin: 2.5vw 0;}
  .page-contact-title span.title-b { color: #a5a5a5; font-size: 8vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 8vw;}
  .page-contact-title span.title-s { padding: 0.2vw 1.5vw; margin: 0 0 0 4vw; color: #fff; font-size: 2.2vw; font-weight: 700; line-height: 2.2vw; background-color: #991e23;}

  .page-contact-con { clear: both; width: 90%; padding: 0 13vw 0 0; margin: 4vw auto 0 auto; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; box-sizing: border-box;}
  .page-contact-con .contact-infor { width: 45%; font-size: 1.2vw; line-height: 2.4vw; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-contact-con .contact-infor .column-full { width: 100%; font-size: 1.6vw; font-weight: 500;}
  .page-contact-con .contact-infor .caption { width: 2vw;}
  .page-contact-con .contact-infor .column { width: calc(100% - 2vw);}
  .page-contact-con .contact-form { width: 55%;}
  .page-contact-con .contact-form form { width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .page-contact-con .contact-form form .caption { width: 6vw; padding: 0 0 0.5vw 0; font-size: 1.2vw; text-align: right;}
  .page-contact-con .contact-form form .column { width: calc(100% - 6vw); padding: 0 0 0.5vw 0; font-size: 1.2vw;}
  .page-contact-con .contact-form form .column input[type=text], 
  .page-contact-con .contact-form form .column input[type=tel], 
  .page-contact-con .contact-form form .column input[type=email] { width: 80%; padding: 0.3vw 0.5vw; font-size: 1.1vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .page-contact-con .contact-form form .column textarea { width: 80%; height: 6vw; padding: 0.3vw 0.5vw; font-size: 1.1vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .page-contact-con .contact-form form .column input[type=button] { padding: 0.3vw 2vw; color: #fff; font-size: 1.1vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 1vw; background-color: #158072; cursor: pointer;}


  /************ page-shopping-cart ************/

  section#page-shopping-cart { clear: both; width: 100%; padding: 0 0 4.5vw 0; box-sizing: border-box;}

  .page-shoppingcart-title { width: 100%; margin: 2.5vw 0; text-align: center;}
  .page-shoppingcart-title span.title-b { color: rgba(165,165,165,0.8); font-size: 8vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 8vw;}
  .page-shoppingcart-title span.title-s { padding: 0 1.5vw; color: #fff; font-size: 2.2vw; font-weight: 700; line-height: 3vw; background-color: #991e23;}

  .page-shoppingcart-order { clear: both; width: 80vw; margin: 2.5vw auto;}
  .page-shoppingcart-order .step-line-bar { width: 40vw; margin: 0 auto; display: flex; justify-content: center; align-items: flex-start; position: relative;}
  .page-shoppingcart-order .step-line-bar .step-box { width: 2vw; height: 2vw; color: #fff; font-size: 1.1vw; line-height: 1.8vw; text-align: center; border-radius: 100%; background-color: #ccc;}
  .page-shoppingcart-order .step-line-bar .step-box.sel { background-color: #666;}
  .page-shoppingcart-order .step-line-bar .step-line { width: 10vw; height: 2px; margin: 1vw 0 0 0; background-color: #ccc; display: block;}
  .page-shoppingcart-order .step-line-bar .step-line.sel { background-color: #666;}
  .page-shoppingcart-order .step-line-bar .text-sub-1 { width: 4vw; color: #000; font-size: 1.1vw; text-align: center; position: absolute; top: 2.5vw; left: 6vw; z-index: 1;}
  .page-shoppingcart-order .step-line-bar .text-sub-2 { width: 5vw; color: #000; font-size: 1.1vw; text-align: center; position: absolute; top: 2.5vw; left: calc(50% - 2.5vw); z-index: 1;}
  .page-shoppingcart-order .step-line-bar .text-sub-3 { width: 5vw; color: #000; font-size: 1.1vw; text-align: center; position: absolute; top: 2.5vw; right: 5.5vw; z-index: 1;}
  .page-shoppingcart-order .member-signup { clear: both; width: 100%; margin: 4vw 0 2vw 0; padding: 2vw 4vw; background-color: #eee; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  .page-shoppingcart-order .member-signup .notice-text { width: calc(100% - 21vw); color: #000; font-size: 1.1vw; font-weight: 300;}
  .page-shoppingcart-order .member-signup .signup-bt { width: 10vw;}
  .page-shoppingcart-order .member-signup .signup-bt a { width: 100%; padding: 0.3vw 0; color: #fff; font-size: 1.1vw; text-align: center; text-decoration: none; border-radius: 0.6vw; background-color: #eba71e; display: block;}
  .page-shoppingcart-order .member-signup .fb-signup-bt { width: 10vw;}
  .page-shoppingcart-order .member-signup .fb-signup-bt a { width: 100%; padding: 0.3vw 0; margin: 0 0 0 1vw; color: #fff; font-size: 1.1vw; text-align: center; text-decoration: none; border-radius: 0.6vw; background-color: #0866ff; display: block;}

  .page-shoppingcart-order .shoppingcart-order-table { clear: both; width: 100%;}
  .page-shoppingcart-order .shoppingcart-order-table .caption-full { width: 100%; font-size: 1.1vw; font-weight: 500; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: center;}
  .page-shoppingcart-order .shoppingcart-order-table .caption-full .caption-1 { width: 35%; padding: 0.5vw; box-sizing: border-box;}
  .page-shoppingcart-order .shoppingcart-order-table .caption-full .caption-2 { width: 15%; padding: 0.5vw; text-align: center; box-sizing: border-box;}
  .page-shoppingcart-order .shoppingcart-order-table .caption-full .caption-3 { width: 15%; padding: 0.5vw; text-align: center; box-sizing: border-box;}
  .page-shoppingcart-order .shoppingcart-order-table .caption-full .caption-4 { width: 15%; padding: 0.5vw; text-align: center; box-sizing: border-box;}
  .page-shoppingcart-order .shoppingcart-order-table .caption-full .caption-5 { width: 15%; padding: 0.5vw; text-align: center; box-sizing: border-box;}
  .page-shoppingcart-order .shoppingcart-order-table .caption-full .caption-6 { width: 5%; padding: 0.5vw; box-sizing: border-box;}
  .page-shoppingcart-order .shoppingcart-order-table .column-full { width: 100%; font-size: 1vw; border-bottom: 1px #ccc dashed; display: flex; justify-content: flex-start; align-items: center;}
  .page-shoppingcart-order .shoppingcart-order-table .column-full .column-1 { width: 35%; padding: 0.5vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  .page-shoppingcart-order .shoppingcart-order-table .column-full .column-1 .pic { width: 7vw;}
  .page-shoppingcart-order .shoppingcart-order-table .column-full .column-1 .pic img { width: 100%; height: auto;}
  .page-shoppingcart-order .shoppingcart-order-table .column-full .column-1 .pro-name { width: calc(100% - 7vw); padding: 0 0 0 1vw; box-sizing: border-box;}
  .page-shoppingcart-order .shoppingcart-order-table .column-full .column-2 { width: 15%; padding: 0.5vw; text-align: center; box-sizing: border-box;}
  .page-shoppingcart-order .shoppingcart-order-table .column-full .column-3 { width: 15%; padding: 0.5vw; text-align: center; box-sizing: border-box;}
  .page-shoppingcart-order .shoppingcart-order-table .column-full .column-4 { width: 15%; padding: 0.5vw; text-align: center; box-sizing: border-box;}
  .page-shoppingcart-order .shoppingcart-order-table .column-full .column-4 button { width: 2vw; padding: 0.2vw 0; color: #000; font-size: 1vw; font-weight: 500; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; text-align: center; border-radius: 6px; border: 1px #ccc solid; background-color: #eee; cursor: pointer;}
  .page-shoppingcart-order .shoppingcart-order-table .column-full .column-4 input[type=text] { width: 3vw; padding: 0.3vw 0.5vw; color: #000; font-size: 1vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; text-align: center; border: 1px #ccc solid; background-color: #fff;}
  .page-shoppingcart-order .shoppingcart-order-table .column-full .column-5 { width: 15%; padding: 0.5vw; text-align: center; box-sizing: border-box;}
  .page-shoppingcart-order .shoppingcart-order-table .column-full .column-6 { width: 5%; padding: 0.5vw; text-align: center; box-sizing: border-box;}


  /** 20240522修改 **/
  .page-shoppingcart-order .continue-shop { width: 100%; margin: 3vw 0 0 0; text-align: right; box-sizing: border-box; display: flex; justify-content: flex-end; align-items: center;}
  .page-shoppingcart-order .continue-shop a.shopping-bt { width: 4vw; padding: 0.5vw 2vw; margin: 0 0.5vw; color: #fff; font-size: 1vw; font-weight: 500; text-align: center; text-decoration: none; border-radius: 0.6vw; background-color: #eaa61e; display: block;}
  .page-shoppingcart-order .continue-shop a.checkout-bt { width: 3vw; padding: 0.5vw 2vw; margin: 0 0.5vw; color: #fff; font-size: 1vw; font-weight: 500; text-align: center; text-decoration: none; border-radius: 0.6vw; background-color: #eaa61e; display: block;}
  .page-shoppingcart-order .continue-shop a.confirm-bt { width: 4vw; padding: 0.5vw 2vw; margin: 0 auto; color: #fff; font-size: 1vw; font-weight: 500; text-align: center; text-decoration: none; border-radius: 0.6vw; background-color: #eaa61e; display: block;}
  .page-shoppingcart-order .continue-shop a:hover { color: #000;}

  .shopping-checkout-infor { clear: both; width: 100%; margin: 4vw 0 0 0; display: flex; justify-content: flex-start; align-items: flex-start;}
  .shopping-checkout-infor .column-lf { width: calc(50% - 1vw); padding: 1.5vw; margin: 0 1vw 0 0; border-radius: 1.6vw; border: 1px #ccc solid; box-sizing: border-box;}
  .shopping-checkout-infor .column-lf .title-bar, 
  .shopping-checkout-infor .column-rt .title-bar { width: 100%; padding: 0 0 0.5vw 0; font-size: 1.4vw; font-weight: 500; border-bottom: 1px #ccc solid;}
  .shopping-checkout-infor .column-lf .infor-form { width: 100%; padding: 0.5vw 0 0 0; font-size: 1.1vw; line-height: 2vw;}
  .shopping-checkout-infor .column-lf .infor-form input[type=radio] { width: 1vw; height: 1vw;}
  .shopping-checkout-infor .column-lf .infor-form .form { width: 100%; padding: 0 0 0 1.7vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .shopping-checkout-infor .column-lf .infor-form .form .col-x3 { width: calc(100% / 3);}
  .shopping-checkout-infor .column-lf .infor-form .form .col-x3 input[type=text].style-1, 
  .shopping-checkout-infor .column-lf .infor-form .form .col-x3 input[type=tel] { width: 96%; padding: 0.3vw 0.5vw; margin: 0 0 1vw 0; font-size: 1.1vw; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .shopping-checkout-infor .column-lf .infor-form .form .twzipcode { clear: both; width: 100%;}
  .shopping-checkout-infor .column-lf .infor-form .form .twzipcode select { width: 49%; padding: 0.3vw 0.5vw; font-size: 1.1vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .shopping-checkout-infor .column-lf .infor-form .form input[type=text].style-2 { width: 98.5%; padding: 0.3vw 0.5vw; margin: 0.5vw 0 1vw 0; font-size: 1.1vw; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .shopping-checkout-infor .column-lf .infor-form .form .col-full { width: 100%;}
  .shopping-checkout-infor .column-lf .infor-form .form .col-full input[type=checkbox] { width: 1.1vw; height: 1.1vw;}

  .shopping-checkout-infor .shopping-confirm-text { width: 100%; padding: 2vw 0; font-size: 1.4vw; text-align: center;}

  .shopping-checkout-infor .column-rt { width: calc(50% - 1vw); padding: 1.5vw; margin: 0 0 0 1vw; border-radius: 1.6vw; border: 1px #ccc solid; box-sizing: border-box;}
  .shopping-checkout-infor .column-rt .col-full { clear: both; width: 100%; padding: 0.5vw 0; font-size: 1.1vw; line-height: 2vw; border-bottom: 1px #ccc dashed; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .shopping-checkout-infor .column-rt .col-full:last-child { border-bottom: 0;}
  .shopping-checkout-infor .column-rt .col-full .caption { width: 60%;}
  .shopping-checkout-infor .column-rt .col-full .column { width: 40%; font-weight: 600; text-align: right;}
  .shopping-checkout-infor .column-rt .col-full .column span.color-red { color: #971e23;}
  .shopping-checkout-infor .column-rt .col-full .col-x3 { width: calc(100% / 3);}
  .shopping-checkout-infor .column-rt .col-full .col-x3 input[type=radio] { width: 1vw; height: 1vw;}

  ul#invoice-tab { clear: both; width: 100%; padding: 0; margin: 0.5vw 0 0 0; list-style: none; display: flex; justify-content: flex-start;}
  ul#invoice-tab li { width: 7vw; padding: 0; margin: 0 0.5vw 0 0;}
  ul#invoice-tab li a { width: 100%; color: #000; font-size: 1vw; text-align: center; border: 1px #000 solid; background-color: #fff; text-decoration: none; box-sizing: border-box; display: block;}
  ul#invoice-tab li a:hover { background-color: #63c1d1;}
  ul#invoice-tab li a.sel { color: #fff; background-color: #000;}
  
  .invoice-detail { clear: both; width: 100%; padding: 1.5vw; margin: 0 0 0.5vw 0; box-sizing: border-box; background-color: #f1f1f1;}
  .invoice-detail div { display: none;}
  .invoice-detail div .content-table { width: 100%;}
  .invoice-detail div .content-table .caption-title { clear: both; width: 6vw; padding: 0.5vw 0 0 0; float: left;}
  .invoice-detail div .content-table .column-detail { width: calc(100% - 6vw); float: left;}
  .invoice-detail div .content-table .column-detail input[type=text].style-full, 
  .invoice-detail div .content-table .column-detail select.style-full { width: 100%; padding: 0.3vw 0.5vw; margin: 0.5vw 0; color: #000; font-size: 1.1vw; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #cacaca solid; background-color: #fff; box-sizing: border-box;}


  /************ page-members ************/

  .page-members-login { clear: both; width: 65%; margin: 3vw auto; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-members-login .col-half { width: 50%;}
  .page-members-login .col-half .s-title { width: 100%; font-size: 1.4vw; margin: 0 0 2vw 0;}
  .page-members-login .col-half input[type=text], 
  .page-members-login .col-half input[type=password] { width: 24vw; margin: 0 0 1vw 0; padding: 0.5vw 1vw; color: #000; font-size: 1.2vw; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .page-members-login .col-half input[type=submit], 
  .page-members-login .col-half input[type=button] { width: 24vw; margin: 0 0 1vw 0; padding: 0.3vw 1vw; color: #fff; font-size: 1vw; border: 0; border-radius: 0.3vw; background-color: #eaa61e; box-sizing: border-box; cursor: pointer;}
  .page-members-login .col-half .forget-note { clear: both; width: 24vw; padding: 1vw 0 0 0; margin: 1vw 0 0 0; border-top: 1px #ccc solid; color: #333; font-size: 0.9vw;}
  .page-members-login .col-half .forget-note a { color: #000; text-decoration: none; border-bottom: 1px #333 solid;}
  .page-members-login .col-half .forget-note a:hover { color: #0866ff; border-bottom: 1px #0866ff solid;}
  .page-members-login .col-half .sign-up-note { clear: both; width: 100%; padding: 2vw; font-size: 1vw; border-radius: 0.5vw; background-color: #eee; box-sizing: border-box;}
  .page-members-login .col-half .sign-up-note .sign-up-bt { clear: both; width: 16vw; margin: 1vw auto 0 auto;}
  .page-members-login .col-half .sign-up-note .sign-up-bt a { width: 100%; padding: 0.3vw 1vw; color: #fff; font-size: 1vw; text-align: center; text-decoration: none; border-radius: 0.3vw; background-color: #eaa61e; display: block; box-sizing: border-box;}


  .page-members-sign-up { clear: both; width: 80%; margin: 3vw auto; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-members-sign-up .column-left { width: 65%;}
  .page-members-sign-up .column-left .s-title { width: 100%; padding: 0 0 0.5vw 0; font-size: 1.4vw;}
  .page-members-sign-up .column-left input.style-1 { width: calc(50% - 2vw); margin: 0.5vw 1vw 0.5vw 0; padding: 0.5vw 1vw; color: #000; font-size: 1.2vw; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .page-members-sign-up .column-left input[type=date] { width: calc(50% - 2vw); margin: 0.5vw 1vw 0.5vw 0; padding: 0.5vw 1vw 0.5vw 7vw; color: #000; font-size: 1.2vw; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .page-members-sign-up .column-left select { width: calc(50% - 2vw); margin: 0.5vw 1vw 0.5vw 0; padding: 0.5vw 1vw; color: #000; font-size: 1.2vw; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .page-members-sign-up .column-left input.style-2 { width: calc(100% - 2.75vw); margin: 0.5vw 1vw 0.5vw 0; padding: 0.5vw 1vw; color: #000; font-size: 1.2vw; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .page-members-sign-up .column-right { width: 35%;}
  .page-members-sign-up .column-right .s-title { width: 100%; padding: 0 0 0.5vw 0; font-size: 1.4vw;}
  .page-members-sign-up .column-right input.style-1 { width: 100%; margin: 0.5vw 1vw 0.5vw 0; padding: 0.5vw 1vw; color: #000; font-size: 1.2vw; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .page-members-sign-up .column-right input.style-2 { width: 100%; margin: 0.5vw 1vw 0.5vw 0; padding: 0.5vw 1vw; color: #000; font-size: 1.2vw; border: 1px #ccc solid; background-color: #ccc; box-sizing: border-box;}
  .page-members-sign-up .column-right .text-note { width: 100%; margin: 0.5vw 1vw 0.5vw 0; padding: 1vw 0 0 0; font-size: 0.9vw; font-weight: 300; line-height: 2vw; text-align: center; box-sizing: border-box;}
  .page-members-sign-up .column-right .text-note span.color-red { color: #991e23;}
  .page-members-sign-up .column-full { width: 100%; height: 20vw; padding: 2vw; margin: 2vw 0 0 0; background-color: #eee; overflow-y: scroll; box-sizing: border-box;}
  .page-members-sign-up .column-full .s-title { width: 100%; padding: 0 0 1vw 0; font-size: 1.2vw; text-align: center;}
  .page-members-sign-up .column-full .text-con { width: 100%; font-size: 1vw; font-weight: 300; line-height: 2vw;}
  .page-members-sign-up .column-half { width: 50%; margin: 1vw 0 0 0; font-size: 1vw;}
  .page-members-sign-up .column-half .container { padding: 0 0 0 2vw; display: block; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
  .page-members-sign-up .column-half .container input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}
  .page-members-sign-up .column-half .checkmark { position: absolute; top: 0; left: 0; height: 1.6vw; width: 1.6vw; border: 1px #158072 solid; border-radius: 0.3vw; background-color: #fff; box-sizing: border-box;}
  .page-members-sign-up .column-half .container:hover input ~ .checkmark { border: 1px #158072 solid; background-color: #ccc; box-sizing: border-box;}
  .page-members-sign-up .column-half .container input:checked ~ .checkmark { background-color: #158072;}
  .page-members-sign-up .column-half .checkmark:after { content: ""; position: absolute; display: none;}
  .page-members-sign-up .column-half .container input:checked ~ .checkmark:after { display: block;}
  .page-members-sign-up .column-half .container .checkmark:after { left: 0.45vw; top: 0.1vw; width: 0.4vw; height: 0.8vw; border: solid white; border-width: 0 0.2vw 0.2vw 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
  .page-members-sign-up .column-half .sign-up-bt { width: 26vw; float: right;}  
  .page-members-sign-up .column-half .sign-up-bt a { width: 100%; padding: 0.3vw 0; color: #fff; font-size: 1vw; text-align: center; text-decoration: none; border-radius: 0.5vw; background-color: #eaa61e; display: block;}


  ul.members-nav { width: 100%; padding: 0; margin: 0 0 3vw 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  ul.members-nav li { width: 10vw; padding: 0; margin: 0 0.5vw;}
  ul.members-nav li a { width: 100%; padding: 0.3vw 0; color: #158072; font-size: 1.2vw; border: 1px #158072 solid; border-radius: 0.3vw; text-align: center; text-decoration: none; display: block;}
  ul.members-nav li a:hover { background-color: #eee;}
  ul.members-nav li a.sel { color: #fff; background-color: #158072;}

  .page-members-sign-up .column-left label.sex-box { margin: 0.5vw 1vw 0.5vw 0; padding: 0.5vw 1vw; color: #000; font-size: 1.1vw; background-color: #fff; box-sizing: border-box;}
  .page-members-sign-up .column-left input.style-3 { width: 15vw; margin: 0.5vw 0; padding: 0.5vw 1vw; color: #000; font-size: 1.2vw; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .page-members-sign-up .column-left input[type=button].style-1 { width: calc(50% - 2.25vw - 15vw); margin: 0.5vw 1vw 0.5vw 0; padding: 0.5vw 1vw; color: #000; font-size: 1.2vw; border: 0; background-color: #ccc; box-sizing: border-box; cursor: pointer;}
  .page-members-sign-up .column-left input[type=button].style-2 { width: calc(50% - 2.25vw - 15vw); margin: 0.5vw 1vw 0.5vw 0; padding: 0.5vw 1vw; color: #000; font-size: 1.2vw; border: 0; background-color: #ccc; box-sizing: border-box; cursor: pointer;}
  .page-members-sign-up .column-left select.style-full { width: calc(100% - 2.75vw); margin: 0.5vw 1vw 0.5vw 0; padding: 0.5vw 1vw; color: #000; font-size: 1.2vw; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}


  .page-members-order { clear: both; width: 80%; margin: 3vw auto; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-members-order .mem-order-table { width: 100%; margin: 0 0 4vw 0;}
  .page-members-order .mem-order-table .caption-full { width: 100%; font-size: 1.1vw; border-bottom: 1px #000 solid; display: flex; justify-content: flex-start; align-items: center;}
  .page-members-order .mem-order-table .caption-full .caption-1 { width: 15%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .caption-full .caption-2 { width: 15%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .caption-full .caption-3 { width: 10%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .caption-full .caption-4 { width: 10%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .caption-full .caption-5 { width: 30%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .caption-full .caption-6 { width: 10%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .caption-full .caption-7 { width: 10%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .column-full { width: 100%; font-size: 1.1vw; font-weight: 300; border-bottom: 1px #ccc dashed; display: flex; justify-content: flex-start; align-items: center;}
  .page-members-order .mem-order-table .column-full .column-1 { width: 15%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .column-full .column-2 { width: 15%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .column-full .column-3 { width: 10%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .column-full .column-4 { width: 10%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .column-full .column-5 { width: 30%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .column-full .column-6 { width: 10%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .column-full .column-7 { width: 10%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .column-full .column-7 a { width: 4vw; padding: 0.2vw 0; color: #fff; font-size: 1vw; font-weight: 300; text-align: center; text-decoration: none; border-radius: 0.5vw; background-color: #eaa61e; display: block;}


  .page-members-reward { clear: both; width: 80%; margin: 3vw auto; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-members-reward .discount-code { width: 100%;}
  .page-members-reward .discount-code .title-text { width: 100%; margin: 0 0 1vw 0; font-size: 1.6vw; font-weight: 500;}
  .page-members-reward .discount-code .title-text span.small { color: #333; font-size: 1.2vw; font-weight: 400;}
  .page-members-reward .discount-code input[type=text] { width: 60vw; padding: 0.5vw 1vw; color: #000; font-size: 1.2vw; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .page-members-reward .discount-code input[type=button] { width: 8vw; padding: 0.5vw 1vw; margin: 0 0 0 1vw; color: #000; font-size: 1.2vw; border: 0; background-color: #ccc; box-sizing: border-box; cursor: pointer;}

  .page-members-reward .reward-table { width: 100%; margin: 3vw 0;}
  .page-members-reward .reward-table .caption-full { width: 100%; font-size: 1.1vw; font-weight: 500; border-top: 1px #ccc solid; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: center;}
  .page-members-reward .reward-table .caption-full .caption-1 { width: 13%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-reward .reward-table .caption-full .caption-2 { width: 12%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-reward .reward-table .caption-full .caption-3 { width: 15%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-reward .reward-table .caption-full .caption-4 { width: 15%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-reward .reward-table .caption-full .caption-5 { width: 15%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-reward .reward-table .caption-full .caption-6 { width: 15%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-reward .reward-table .caption-full .caption-7 { width: 15%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-reward .reward-table .column-full { width: 100%; font-size: 1.1vw; font-weight: 300; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: center;}
  .page-members-reward .reward-table .column-full:nth-child(even) { background-color: #eee;}
  .page-members-reward .reward-table .column-full .column-1 { width: 13%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-reward .reward-table .column-full .column-2 { width: 12%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-reward .reward-table .column-full .column-3 { width: 15%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-reward .reward-table .column-full .column-4 { width: 15%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-reward .reward-table .column-full .column-5 { width: 15%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-reward .reward-table .column-full .column-6 { width: 15%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-reward .reward-table .column-full .column-7 { width: 15%; padding: 0.5vw; box-sizing: border-box;}


  .page-members-exchange { clear: both; width: 80%; margin: 3vw auto; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-members-exchange .exchange-table { width: 100%; margin: 3vw 0;}
  .page-members-exchange .exchange-table .caption-full { width: 100%; font-size: 1.1vw; font-weight: 500; border-top: 1px #ccc solid; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: center;}
  .page-members-exchange .exchange-table .caption-full .caption-1 { width: 13%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-exchange .exchange-table .caption-full .caption-2 { width: 13%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-exchange .exchange-table .caption-full .caption-3 { width: 22%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-exchange .exchange-table .caption-full .caption-4 { width: 13%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-exchange .exchange-table .caption-full .caption-5 { width: 13%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-exchange .exchange-table .caption-full .caption-6 { width: 26%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-exchange .exchange-table { width: 100%; margin: 3vw 0;}
  .page-members-exchange .exchange-table .column-full { width: 100%; font-size: 1.1vw; font-weight: 300; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: center;}
  .page-members-exchange .exchange-table .column-full:nth-child(even) { background-color: #eee;}
  .page-members-exchange .exchange-table .column-full .column-1 { width: 13%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-exchange .exchange-table .column-full .column-2 { width: 13%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-exchange .exchange-table .column-full .column-3 { width: 22%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-exchange .exchange-table .column-full .column-4 { width: 13%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-exchange .exchange-table .column-full .column-5 { width: 13%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-exchange .exchange-table .column-full .column-6 { width: 26%; padding: 0.5vw; box-sizing: border-box;}


  /************ page-reserve-con ************/

  section#page-reserve { clear: both; width: 100%; padding: 4.5vw 0 6vw 0; box-sizing: border-box; background-image: url("../images/index_about_bg.jpg"); background-repeat: no-repeat; background-size: cover;}  

  .page-reserve-title { width: 100%; margin: 2.5vw 0; text-align: center;}
  .page-reserve-title span.title-b { color: #a5a5a5; font-size: 8vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 8vw;}
  .page-reserve-title span.title-s { padding: 0.2vw 1.5vw; margin: 0 0 0 4vw; color: #fff; font-size: 2.2vw; font-weight: 700; line-height: 2.2vw; background-color: #991e23;}

  .page-reserve-con { clear: both; width: 50vw; margin: 0 auto; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-reserve-con .caption { width: 100%; margin: 0 0 0.5vw 0; font-size: 1.4vw;}
  .page-reserve-con .caption span.must-star { color: #991e23;}
  .page-reserve-con .column { width: 100%; padding: 0 0 0 1.4vw; margin: 0 0 1.5vw 0; font-size: 1.4vw; box-sizing: border-box;}
  .page-reserve-con .column input[type=text].style-1, 
  .page-reserve-con .column input[type=tel] { width: 100%; padding: 0.5vw; font-size: 1.4vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-bottom: 1px #000 solid; background-color: transparent; box-sizing: border-box;}
  .page-reserve-con .column input[type=text].style-2 { width: 50vw; padding: 0.5vw; font-size: 1.4vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-bottom: 1px #000 solid; background-color: transparent; box-sizing: border-box;}
  .page-reserve-con .column input[type=radio], 
  .page-reserve-con .column input[type=checkbox] { width: 1.2vw; height: 1.2vw; margin: 0 0.5vw 0 0;}
  .page-reserve-con input[type=submit], 
  .page-reserve-con input[type=button] { padding: 0.3vw 2vw; margin: 2vw 0 0 0; color: #fff; font-size: 1.4vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 0.6vw; background-color: #971e23; cursor: pointer;}

  .page-reserve-con .notice-text { width: 100%; padding: 0.5vw 0; color: #991e23; font-size: 1.2vw;}


  /************ section #sitemap ************/

  section#page-sitemap { clear: both; width: 100%; padding: 8vw; box-sizing: border-box; background-image: url("../images/index_service_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto;}

  .page-sitemap-title { width: 100%; margin: 2.5vw 0; text-align: center;}
  .page-sitemap-title span.title-b { color: #a5a5a5; font-size: 8vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 8vw;}
  .page-sitemap-title span.title-s { padding: 0.2vw 1.5vw; color: #fff; font-size: 2.2vw; font-weight: 700; line-height: 2.2vw; background-color: #991e23;}

  ul.page-sitemap-list { clear: both; width: 100%; padding: 0; margin: 8vw 0 0 0; list-style: none; display: flex; justify-content: center; align-items: flex-start;}
  ul.page-sitemap-list li { padding: 0; margin: 0.5vw 1vw;}
  ul.page-sitemap-list li a { color: #000; font-size: 1.4vw; text-decoration: none;}
  ul.page-sitemap-list li a:hover { border-bottom: 1px #000 solid;}



  .page-error404-con { clear: both; width: 100%; padding: 8vw 0 0 0; text-align: center;}
  .page-error404-con span.text-error { font-size: 2vw; font-weight: 500;}
  .page-error404-con a { color: #000; font-size: 1.4vw; border-bottom: 1px #000 solid; text-decoration: none;}
  .page-error404-con a:hover { color: #991e23; border-bottom: 1px #971e23 solid;}


  /************ section #footer-pre-order ************/

  section#footer-pre-order { clear: both; width: 100%; height: 21vw; overflow: hidden; position: relative;}

  img.footer-pre-order-bg { width: 100%; height: auto;}

  img.footer-pre-order-bt { width: 28vw; height: auto; position: absolute; top: 4.5vw; right: calc(50% - 34vw);}


  /************ footer ************/

  footer { clear: both; width: 100%; background-color: #000; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .footer-logo { width: 22.5vw; padding: 2vw 0; background-color: #158072; display: flex; justify-content: center; align-items: center;}
  .footer-logo img { width: 19vw; height: auto;}

  .footer-nav-infor { width: calc(100% - 22.5vw);}
  .footer-nav-infor ul.footer-nav { width: 100%; padding: 1.2vw 0 1.2vw 2.5vw; margin: 0; list-style: none; border-bottom: 2px #eba71e solid; display: flex; justify-content: flex-start; align-items: center; box-sizing: border-box;}
  .footer-nav-infor ul.footer-nav li { padding: 0 0.8vw; margin: 0;}
  .footer-nav-infor ul.footer-nav li a { color: #fff; font-size: 1.1vw; font-weight: 300; text-decoration: none; transition: 0.5s;}
  .footer-nav-infor ul.footer-nav li a:hover { color: #ccc;}
  .footer-nav-infor .footer-infor { width: 100%; padding: 1vw 0 1vw 4vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  .footer-nav-infor .footer-infor .infor-text { width: 48vw; color: #fff; font-size: 1.2vw;}
  .footer-nav-infor .footer-infor .social-icons { width: 9vw; display: flex; justify-content: flex-end; align-items: center;}
  .footer-nav-infor .footer-infor .social-icons img.icon { width: 3.8vw; height: auto; margin: 0 0 0 0.2vw;}

  .footer-copyright { clear: both; width: 100%; padding: 0.5vw 0; color: #fff; font-size: 1.1vw; font-weight: 300; text-align: center; background-color: #991e23;}


}

@media screen and (min-width: 1024px) and (max-width: 1369px) {

  /************ aside ************/

  aside { width: 4vw; position: fixed; top: 200px; right: 0; z-index: 999;}
  aside .aside-bt-box { width: 100%;}
  aside .aside-bt-box a.tel { width: 4vw; height: 4vw; color: #fff; font-size: 2.4vw; background-color: #991e23; display: flex; justify-content: center; align-items: center;}
  aside .aside-bt-box a.order { width: 4vw; height: 4vw; color: #fff; font-size: 2.8vw; background-color: #eaa61e; display: flex; justify-content: center; align-items: center;}
  aside .aside-bt-box a.line { width: 4vw; height: 4vw; color: #fff; font-size: 2.8vw; background-color: #158072; display: flex; justify-content: center; align-items: center;}


  /************ header + nav ************/

  header { width: 100%; height: 5vw; padding: 0 3vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; position: fixed; top: 0; left: 0; z-index: 9999;}

  .header-logo { width: 18.5vw;}
  .header-logo img.logo { width: 17.5vw; height: auto;}

  nav#mo { display: none;}
  nav#pc { width: calc(100% - 18.5vw - 8vw);}
  nav#pc ul.nav-menu { width: 100%; padding: 0 1.9vw; margin: 0; box-sizing: border-box; list-style: none; display: flex; justify-content: flex-start; align-items: center;}
  nav#pc ul.nav-menu li { padding: 0; margin: 0;}
  nav#pc ul.nav-menu li a { width: 7.8vw; height: 5vw; color: #000; font-size: 1.1vw; text-align: center; text-decoration: none; display: flex; justify-content: center; align-items: center; position: relative; transition: 0.3s;}
  nav#pc ul.nav-menu li a:hover::before { position: absolute; z-index: -1; content: ''; top: 0; right: 0; bottom: 0; left: 0; background: #158072; transform: skew(-41.5deg);}
  nav#pc ul.nav-menu li a:hover { color: #fff; font-weight: 500;}

  .header-icons-mo { display: none;}
  .header-icons { width: 8vw; display: flex; justify-content: flex-end; align-items: center;}
  .header-icons a { width: 2.8vw; margin: 0 0 0 0.7vw; text-decoration: none; display: block; position: relative;}
  .header-icons a img.icon { width: 100%; height: auto; position: relative; z-index: 1;}
  .header-icons a .shopping-num { width: 1.5vw; height: 1.5vw; color: #fff; font-size: 0.8vw; line-height: 0.8vw; display: flex; justify-content: center; align-items: center; border-radius: 100%; background-color: #971e23; position: absolute; top: -0.3vw; right: -0.3vw; z-index: 2;}


  /************ section #index-banner ************/

  section#index-banner { clear: both; width: 100%; padding: 5vw 0 0 0; position: relative; z-index: 1;}

  .index-banner-box { clear: both; width: 100%; position: relative;}
  .index-banner-box .banner-arrow-prev img.arrow-prev { width: 2vw; height: auto; position: absolute; top: 20vw; left: 40px; z-index: 2; cursor: pointer;}
  .index-banner-box .banner-arrow-next img.arrow-next { width: 2vw; height: auto; position: absolute; top: 20vw; right: 40px; z-index: 2; cursor: pointer;}
  .index-banner-box img { width: 100%; height: auto; position: relative; z-index: 1;}


  /************ section #index-about ************/

  section#index-about { clear: both; width: 100%; padding: 4.5vw 0 6vw 13vw; box-sizing: border-box; background-image: url("../images/index_about_bg.jpg"); background-repeat: no-repeat; background-size: cover;}

  .index-about-title { width: 100%; position: relative; z-index: 1;}
  .index-about-title span.title-b { color: rgba(255,255,255,0.8); font-size: 8vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 8vw;}
  .index-about-title span.title-s { padding: 0.2vw 1.5vw; color: #fff; font-size: 2.2vw; font-weight: 700; line-height: 2.2vw; background-color: #991e23;}

  .index-about-content { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; position: relative; z-index: 2;}
  .index-about-content .column-lf-text { width: 40%; padding: 0 9vw 0 0; margin: 1.5vw 0 0 0; box-sizing: border-box;}
  .index-about-content .column-lf-text .text-bigger { width: 100%; font-size: 1.4vw; font-weight: 500; line-height: 2.2vw; letter-spacing: 0.1em;}
  .index-about-content .column-lf-text .text-smaller { width: 100%; margin: 1.5vw 0 0 0; font-size: 1.1vw; font-weight: 300; line-height: 1.8vw; letter-spacing: 0.1em;}
  .index-about-content .column-lf-text img.more-bt { clear: both; width: 16.8vw; height: auto; margin: 5vw 0 0 0;}
  .index-about-content .column-rt-pics { width: 60%;}
  .index-about-content .column-rt-pics img.photo-1 { width: 100%; height: auto; margin: -3vw 0 0 0; position: relative; z-index: 2;}
  .index-about-content .column-rt-pics img.photo-2 { width: 25vw; height: auto; margin: -3.8vw 0 0 -5.3vw; position: relative; z-index: 1;}


  .index-about-content .column-lf-text img.photo-3 { width: 25.5vw; height: auto; margin: 3vw 0 0 0; position: relative; z-index: 1;}


  /************ section #index-news ************/

  section#index-news { clear: both; width: 100%; padding: 4.5vw calc(50% - 38vw); box-sizing: border-box; background-color: #fff;}

  .index-news-title { width: 66%; margin: 0 auto; text-align: center; position: relative; z-index: 1;}
  .index-news-title span.title-b { color: rgba(165,165,165,0.8); font-size: 8vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 8vw;}
  .index-news-title span.title-s { padding: 0.2vw 1.5vw; margin: 0 30vw 0 0; color: #fff; font-size: 2.2vw; font-weight: 700; line-height: 2.2vw; background-color: #991e23;}
  .index-news-title img.more-bt { width: 16.8vw; height: auto; position: absolute; bottom: 0; right: 5vw;}

  .index-news-list { clear: both; width: 100%; margin: 3vw 0 0 0; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .index-news-list .news-box { width: calc(100% / 3 - 1vw); margin: 0 0.5vw 1vw 0.5vw;}
  .index-news-list .news-box a { width: 100%; height: 100%; padding: 0.5vw; text-decoration: none; border: 1px #fff solid; box-sizing: border-box; display: block; transition: 0.5s;}
  .index-news-list .news-box a:hover { border: 1px #ccc solid;}
  .index-news-list .news-box .news-pic { width: 100%;}
  .index-news-list .news-box .news-pic img { width: 100%; height: auto;}
  .index-news-list .news-box .news-date { width: 100%; padding: 1vw 0.5vw; box-sizing: border-box;}
  .index-news-list .news-box .news-date span.date { padding: 0 1vw; color: #000; font-size: 1.1vw; border-radius: 1vw; background-color: #eaa61e;}
  .index-news-list .news-box .news-title { width: 100%; padding: 0 0.5vw; color: #000; font-size: 1.1vw; line-height: 1.8vw; letter-spacing: 0.1em; box-sizing: border-box;}



  ul.page-news-list-pagenum { clear: both; width: 100%; padding: 0; margin: 3vw 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  ul.page-news-list-pagenum li { padding: 0; margin: 0 0.3vw 1vw 0.3vw;}
  ul.page-news-list-pagenum li a { padding: 0.5vw; color: #eaa61e; font-size: 1.1vw; border: 1px #fff solid; text-decoration: none; display: block;}
  ul.page-news-list-pagenum li a:hover { border: 1px #eaa61e solid;}
  ul.page-news-list-pagenum li a.sel { color: #000; background-color: #eaa61e; border: 1px #eaa61e solid;}



  .page-news-content { clear: both; width: 100%; padding: 2vw 0 0 0; margin: 3vw 0 0 0; border-top: 1px #ccc solid; border-bottom: 1px #ccc solid;}
  .page-news-content .news-title { width: 100%; font-size: 1.4vw; font-weight: 500; line-height: 2vw; text-align: center;}
  .page-news-content .news-date { width: 100%; padding: 1vw 0 0 0; text-align: center;}
  .page-news-content .news-date span.date { padding: 0 1vw; color: #000; font-size: 1.1vw; border-radius: 1vw; background-color: #eaa61e;}
  .page-news-content .news-content { width: 100%; padding: 3vw; font-size: 1.1vw; line-height: 2vw; box-sizing: border-box;}
  .page-news-content .news-content a { color: #000; border-bottom: 1px #000 solid; text-decoration: none;}
  .page-news-content .news-content a:hover { color: #eaa61e; border-bottom: 1px #eaa61e solid;}
  .page-news-content .news-content img { clear: both; max-width: 100%; height: auto;}


  /************ section #index-service ************/

  section#index-service { clear: both; width: 100%; padding: 4.5vw 0 7vw 0; box-sizing: border-box; background-image: url("../images/index_service_bg.jpg"); background-repeat: no-repeat; background-size: cover; position: relative; z-index: 2;}

  .index-service-title { width: 100%; padding: 0 0 0 14.5vw; box-sizing: border-box; display: flex; align-items: center; position: relative; z-index: 1;}
  .index-service-title span.title-b { color: #a5a5a5; font-size: 8vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 8vw;}
  .index-service-title span.title-s { padding: 0.5vw 1.5vw; color: #fff; font-size: 2.2vw; font-weight: 700; line-height: 2.2vw; background-color: #991e23;}

  .index-service-item-1 { clear: both; width: 100%; margin: 2.5vw 0 5vw 0; position: relative;}
  .index-service-item-1 .service-item-bg { width: 72vw; height: 18vw; padding: 4vw 0 0 14.5vw; box-sizing: border-box; background-color: #f5b11e; position: relative; z-index: 1;}
  .index-service-item-1 .service-item-bg .bigger { width: 23vw; color: #000; font-size: 1.8vw; font-weight: 500; letter-spacing: 0.1em;}
  .index-service-item-1 .service-item-bg .smaller { width: 23vw; color: #000; font-size: 1.1vw; font-weight: 300; line-height: 2vw; letter-spacing: 0.1em;}
  .index-service-item-1 .service-item-bg .more-bt { width: 23vw; margin: 0.5vw 0 0 0;}
  .index-service-item-1 .service-item-bg .more-bt img { width: 16.8vw; height: auto;}
  .index-service-item-1 img.service-item-pic { width: 42vw; height: auto; position: absolute; top: 2.5vw; right: 14.5vw; z-index: 2;}

  .index-service-item-2 { clear: both; width: 100%; margin: 2.5vw 0 5vw 0; position: relative; display: flex; justify-content: flex-end;}
  .index-service-item-2 .service-item-bg { width: 72vw; height: 18vw; padding: 1vw 0 0 34.2vw; box-sizing: border-box; background-color: #a21e23; position: relative; z-index: 1;}
  .index-service-item-2 .service-item-bg .bigger { width: 23vw; color: #fff; font-size: 1.8vw; font-weight: 500; letter-spacing: 0.1em;}
  .index-service-item-2 .service-item-bg .smaller { width: 23vw; color: #fff; font-size: 1.1vw; font-weight: 300; line-height: 2vw; letter-spacing: 0.1em;}
  .index-service-item-2 .service-item-bg .more-bt { width: 23vw; margin: 0.5vw 0 0 0;}
  .index-service-item-2 .service-item-bg .more-bt img { width: 16.8vw; height: auto;}
  .index-service-item-2 img.service-item-pic { width: 42vw; height: auto; position: absolute; top: 2.5vw; left: 12.3vw; z-index: 2;}

  .index-service-item-3 { clear: both; width: 100%; margin: 2.5vw 0 5vw 0; position: relative;}
  .index-service-item-3 .service-item-bg { width: 72vw; height: 18vw; padding: 2.5vw 0 0 7.7vw; margin: 0 auto; box-sizing: border-box; background-color: #158872; position: relative; z-index: 1;}
  .index-service-item-3 .service-item-bg .bigger { width: 21vw; color: #fff; font-size: 1.8vw; font-weight: 500; letter-spacing: 0.1em;}
  .index-service-item-3 .service-item-bg .smaller { width: 21vw; color: #fff; font-size: 1.1vw; font-weight: 300; line-height: 2vw; letter-spacing: 0.1em;}
  .index-service-item-3 .service-item-bg .more-bt { width: 21vw; margin: 0.5vw 0 0 0;}
  .index-service-item-3 .service-item-bg .more-bt img { width: 16.8vw; height: auto;}
  .index-service-item-3 img.service-item-pic { width: 42vw; height: auto; position: absolute; top: 2.5vw; left: 50%; z-index: 2;}

  img.index-reviews-order { width: 28vw; height: auto; position: absolute; bottom: -6vw; left: calc(50% - 14vw);}


  /************ section #index-reviews ************/

  section#index-reviews { clear: both; width: 100%; padding: 20vw 0 4.5vw 0; box-sizing: border-box; background-color: #4d4d4d; background-image: url("../images/index_reviews_bg.jpg"); background-repeat: no-repeat; background-size: cover; position: relative; z-index: 1;}

  .index-reviews-title { width: 100%; text-align: center;}
  .index-reviews-title span.title-b { color: rgba(255,255,255,0.5); font-size: 8vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 8vw;}
  .index-reviews-title span.title-s { padding: 0.2vw 1.5vw; color: #fff; font-size: 2.2vw; font-weight: 700; line-height: 2.2vw; background-color: #991e23;}

  .index-reviews-text { clear: both; width: 100%; color: #fff; font-size: 1.1vw; font-weight: 300; letter-spacing: 0.1em; text-align: center;}

  .index-reviews-list { clear: both; width: 72vw; margin: 2vw auto 0 auto;}
  .index-reviews-list .reviews-box { width: calc(100% - 3vw); margin: 0 1.5vw; padding: 2vw; box-sizing: border-box; background-color: #eba71e;}
  .index-reviews-list .reviews-box .icon { width: 100%; margin: 0 0 1vw 0; color: #fff; font-size: 2vw; text-align: center;}
  .index-reviews-list .reviews-box .text { width: 100%; color: #000; font-size: 1.1vw; line-height: 2.2vw;}

  .index-reviews-list .slick-arrow { clear: both; width: 100%; margin: 2vw 0 0 0; display: flex; justify-content: center; align-items: center;}
  .index-reviews-list .slick-arrow img.reviews-slick-arrow-prev, 
  .index-reviews-list .slick-arrow img.reviews-slick-arrow-next { width: 1vw; height: auto; margin: 0 2.2vw; cursor: pointer;}


  /************ section #index-knowledge ************/

  section#index-knowledge { clear: both; width: 100%; padding: 4.5vw 0 6vw 14vw; box-sizing: border-box; background-image: url("../images/index_knowledge_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: left center;}

  .index-knowledge-title { width: 100%; position: relative; z-index: 1;}
  .index-knowledge-title span.title-b { color: rgba(165,165,165,0.8); font-size: 8vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 8vw;}
  .index-knowledge-title span.title-s { padding: 0.2vw 1.5vw; color: #fff; font-size: 2.2vw; font-weight: 700; line-height: 2.2vw; background-color: #158072;}

  ul.index-knowledge-list { clear: both; width: 30vw; padding: 0; margin: 2vw 0 0 0; box-sizing: border-box; list-style: none; display: block;}
  ul.index-knowledge-list li { width: 100%; padding: 1.8vw 0; margin: 0; color: #000; border-bottom: 1px #8b8b8b solid;}
  ul.index-knowledge-list li a { width: 100%; color: #333; font-size: 1.2vw; text-decoration: none; display: flex; justify-content: flex-start; align-items: flex-start; transition: 0.5s;}
  ul.index-knowledge-list li a:hover { color: #158872;}
  ul.index-knowledge-list li a .num { width: 2vw;}
  ul.index-knowledge-list li a .title { width: calc(100% - 2vw);}

  img.index-knowledge-more-bt { clear: both; width: 16.8vw; height: auto; margin: 3vw 0 0 0;}



  ul.page-knowledge-pagenum { clear: both; width: 30vw; padding: 0; margin: 3vw 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  ul.page-knowledge-pagenum li { padding: 0; margin: 0 0.3vw 1vw 0.3vw;}
  ul.page-knowledge-pagenum li a { padding: 0.5vw; color: #158872; font-size: 1.1vw; border: 1px transparent solid; text-decoration: none; display: block;}
  ul.page-knowledge-pagenum li a:hover { border: 1px #158872 solid;}
  ul.page-knowledge-pagenum li a.sel { color: #fff; background-color: #158872; border: 1px #158872 solid;}



  section#page-knowledge { clear: both; width: 100%; padding: 4.5vw 14vw 6vw 14vw; box-sizing: border-box; background-image: url("../images/page_knowledge_bg.jpg"); background-repeat: no-repeat; background-size: cover;}

  .page-knowledge-content { clear: both; width: 100%; margin: 3vw 0 0 0;}
  .page-knowledge-content .knowledge-title { width: 100%; padding: 0 0 0.5vw 0; font-size: 1.2vw; font-weight: 500; border-bottom: 1px #000 solid; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-knowledge-content .knowledge-title .num { width: 2vw;}
  .page-knowledge-content .knowledge-title .title { width: calc(100% - 2vw);}
  .page-knowledge-content .knowledge-content { width: 100%; padding: 1vw 0; font-size: 1vw; line-height: 1.8vw;}
  .page-knowledge-content .knowledge-content img { clear: both; max-width: 100%; height: auto;}


  /************ section #index-shopping ************/

  section#index-shopping { clear: both; width: 100%; padding: 4.5vw 0 2.5vw 0; box-sizing: border-box;}

  .index-shopping-title { width: 100%; display: flex; justify-content: center; align-items: center;}
  .index-shopping-title span.title-b { color: rgba(165,165,165,0.8); font-size: 8vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 8vw;}
  .index-shopping-title span.title-s { padding: 0.5vw 1.5vw; color: #fff; font-size: 2.2vw; font-weight: 700; line-height: 2.2vw; background-color: #991e23;}

  .index-shopping-list { clear: both; width: 100%;}
  .index-shopping-list ul.shopping-sort-tab { clear: both; width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: center;}
  .index-shopping-list ul.shopping-sort-tab li { padding: 0 0.5vw; margin: 0; font-size: 1.6vw; font-weight: 500; letter-spacing: 0.1em;}
  .index-shopping-list ul.shopping-sort-tab li a { padding: 0.2vw 1vw; color: #000; text-decoration: none; display: block;}
  .index-shopping-list ul.shopping-sort-tab li a:hover { background-color: #eee;}
  .index-shopping-list ul.shopping-sort-tab li a.sel { background-color: #eba71e;}

  .index-shopping-list .shopping-pro-list { clear: both; width: 100%;}
  .index-shopping-list .shopping-pro-list .shopping-pro-con { clear: both; width: 100%;}
  .index-shopping-list .shopping-pro-list .shopping-pro-con .pro-list-full { width: 100%; padding: 5vw 0 1.5vw 0; background-color: #eba71e;}
  .index-shopping-list .shopping-pro-list .shopping-pro-con .pro-list-full img { width: auto; height: 17.5vw;}
  .index-shopping-list .shopping-pro-list .shopping-pro-con .pro-list-full .pro-list-box { width: auto;}
  .index-shopping-list .shopping-pro-list .shopping-pro-con .pro-list-full .pro-list-box a { width: 100%; height: 100%; text-decoration: none; display: block;}
  .index-shopping-list .shopping-pro-list .shopping-pro-con .pro-list-full .pro-list-box .pro-pic { width: 100%;}
  .index-shopping-list .shopping-pro-list .shopping-pro-con .pro-list-full .pro-list-box .pro-pic img { width: auto; height: 20vw;}
  .index-shopping-list .shopping-pro-list .shopping-pro-con .pro-list-full .pro-list-box .pro-name { width: 100%; padding: 0.5vw 0 0 0; color: #000; font-size: 1vw; font-weight: 300; letter-spacing: 0.1em; text-align: center;}
  .index-shopping-list .shopping-pro-list .shopping-pro-con .pro-list-full .pro-list-box .pro-price { width: 100%; color: #fff; font-size: 1.4vw; text-align: center;}
  .index-shopping-list .shopping-pro-list .shopping-pro-con .pro-list-arrow { clear: both; width: 100%; padding: 2vw 0; display: flex; justify-content: center; align-items: center; position: relative;}
  .index-shopping-list .shopping-pro-list .shopping-pro-con .pro-list-arrow img.pro-list-arrow-prev, 
  .index-shopping-list .shopping-pro-list .shopping-pro-con .pro-list-arrow img.pro-list-arrow-next { width: 1vw; height: auto; margin: 0 2.2vw; cursor: pointer;}
  
  img.index-shopping-more-bt { width: 16.8vw; height: auto; position: absolute; top: 1.4vw; right: calc(50% - 37vw);}


  /** 20240520修改 **/
  .page-prod-list-full { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-prod-list-full .prod-box { width: calc(100% / 4 - 1vw); margin: 0 0.5vw 1vw 0.5vw;}
  .page-prod-list-full .prod-box a { width: 100%; padding: 0.2vw; border: 1px #fff solid; box-sizing: border-box; text-decoration: none; display: block;}
  .page-prod-list-full .prod-box .prod-pic { width: 100%;}
  .page-prod-list-full .prod-box .prod-pic img { width: 100%; height: auto;}
  .page-prod-list-full .prod-box .prod-name { width: 100%; padding: 0.5vw 0 0 0; color: #000; font-size: 0.8vw; font-weight: 300; letter-spacing: 0.1em; text-align: center;}
  .page-prod-list-full .prod-box .prod-price { width: 100%; color: #a21e23; font-size: 1.2vw; text-align: center;}
  .page-prod-list-full .prod-box a:hover { border: 1px #ccc solid;}

  ul.page-pro-pagenum { clear: both; width: 100%; padding: 0; margin: 3vw 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  ul.page-pro-pagenum li { padding: 0; margin: 0 0.3vw 1vw 0.3vw;}
  ul.page-pro-pagenum li a { padding: 0.5vw; color: #eba71e; font-size: 1.1vw; border: 1px transparent solid; text-decoration: none; display: block;}
  ul.page-pro-pagenum li a:hover { border: 1px #eba71e solid;}
  ul.page-pro-pagenum li a.sel { color: #fff; background-color: #eba71e; border: 1px #eba71e solid;}


  /************ section #page-banner ************/

  section#page-banner { width: 100%; padding: 5vw 0 0 0; background-image: url("../images/header_banner_bg.png"); background-repeat: no-repeat; background-size: 50% auto; background-position: left top; position: relative; z-index: 1;}

  img.page-banner { clear: both; width: 100%;}

  #breadcrumbs-bar { clear: both; width: 100%; padding: 1vw 0 1vw 20vw; box-sizing: border-box; color: #333; font-size: 0.9vw;}
  #breadcrumbs-bar a { color: #333; text-decoration: none;}
  #breadcrumbs-bar a:hover { border-bottom: 1px #333 solid;}


  /************ section #about-HTL ************/

  section#about-HTL { clear: both; width: 100%; padding: 3vw 0 0 0;}

  .about-HTL-title { width: 100%; text-align: center; position: relative; z-index: 1;}
  .about-HTL-title span.title-b { color: #d7d7d7; font-size: 6vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 8vw;}
  .about-HTL-title span.title-s { padding: 0.2vw 1.5vw; color: #fff; font-size: 2.2vw; font-weight: 700; line-height: 2.2vw; background-color: #991e23;}

  .about-HTL-col-1 { clear: both; width: 100%; margin: 1.3vw 0; display: flex; justify-content: flex-start; align-items: stretch;}
  .about-HTL-col-1 .col-color { width: 50%;}
  .about-HTL-col-1 .col-color div { width: 26.5vw; height: 20vw; margin: 0 1vw 0 0; background-color: #158072; display: block; float: right;}
  .about-HTL-col-1 .col-text { width: 50%; height: 20vw; border-bottom: 1px #a4a4a4 solid; display: flex; align-items: center;}
  .about-HTL-col-1 .col-text div { width: 26.5vw; padding: 0 2.8vw; box-sizing: border-box; font-size: 1.2vw; line-height: 1.8vw;}
  .about-HTL-col-1 .col-text div span.title { font-size: 2.2vw; font-weight: 500;}

  .about-HTL-col-2 { clear: both; width: 100%; margin: 1.3vw 0; display: flex; justify-content: flex-start; align-items: stretch;}
  .about-HTL-col-2 .col-text { width: calc(50% - 1vw); height: 20vw; margin: 0 1vw 0 0; border-bottom: 1px #a4a4a4 solid; display: flex; justify-content: flex-end; align-items: center;}
  .about-HTL-col-2 .col-text div { width: 26.5vw; padding: 0 2.8vw; box-sizing: border-box; font-size: 1.2vw; line-height: 1.8vw;}
  .about-HTL-col-2 .col-text div span.title { font-size: 2.2vw; font-weight: 500;}
  .about-HTL-col-2 .col-color { width: 50%;}
  .about-HTL-col-2 .col-color div { width: 100%; height: 20vw; background-color: #eaa61e; display: block;}

  .about-HTL-col-3 { clear: both; width: 100%; margin: 1.3vw 0; display: flex; justify-content: flex-start; align-items: stretch;}
  .about-HTL-col-3 .col-color { width: 50%;}
  .about-HTL-col-3 .col-color div { width: 26.5vw; height: 20vw; margin: 0 1vw 0 0; background-color: #981e23; display: block; float: right;}
  .about-HTL-col-3 .col-text { width: 50%; height: 20vw; border-bottom: 1px #a4a4a4 solid; display: flex; align-items: center;}
  .about-HTL-col-3 .col-text div { width: 26.5vw; padding: 0 2.8vw; box-sizing: border-box; font-size: 1.2vw; line-height: 1.8vw;}
  .about-HTL-col-3 .col-text div span.title { font-size: 2.2vw; font-weight: 500;}

  .about-HTL-col-4 { clear: both; width: 100%; padding: 4.5vw 0 6vw 0; margin: 2vw 0 0 0; background-image: url("../images/about_HTL_col_4_bg.jpg"); background-repeat: no-repeat; background-size: calc(50% - 1vw) auto; background-position: left top; display: flex; justify-content: center; align-items: center;}
  .about-HTL-col-4 img.logo { width: 19.5vw; height: auto; margin: 0 2.3vw 0 0;}
  .about-HTL-col-4 .col-text { width: 31vw; font-size: 1.6vw; font-weight: 500; line-height: 2.8vw;}
  .about-HTL-col-4 .col-text img { width: 100%; height: auto; margin: 0 0 1vw 0;}


  /************ section #page-service ************/

  section#page-service { clear: both; width: 100%; padding: 4.5vw 0 7vw 0; box-sizing: border-box; background-image: url("../images/index_about_bg.jpg"); background-repeat: no-repeat; background-size: cover; position: relative; z-index: 2;}

  .page-service-title { width: 100%; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
  .page-service-title span.title-b { color: #fff; font-size: 8vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 8vw;}
  .page-service-title span.title-s { padding: 0.5vw 1.5vw; color: #fff; font-size: 2.2vw; font-weight: 700; line-height: 2.2vw; background-color: #991e23;}

  .page-service-items { clear: both; width: 100%; margin: 3vw 0 0 0; display: flex; justify-content: center; align-items: stretch;}
  .page-service-items .service-item-box { width: 25vw;}
  .page-service-items .service-item-box a { width: 100%; height: 100%; text-decoration: none; display: block;}
  .page-service-items .service-item-box .photo { width: 100%;}
  .page-service-items .service-item-box .photo img { width: 100%; height: auto;}
  .page-service-items .service-item-box .title { width: 100%; padding: 0.5vw 0; font-size: 1.1vw; font-weight: 500; text-align: center;}
  .page-service-items .service-item-box .title.bg-red { color: #fff; background-color: #981e23;}
  .page-service-items .service-item-box .title.bg-yellow { color: #000; background-color: #eaa61e;}
  .page-service-items .service-item-box .title.bg-green { color: #fff; background-color: #158072;}


  section#service-item-list { clear: both; width: 100%; padding: 0 0 3.5vw 11vw; box-sizing: border-box; background-color: #fff;}

  .service-item-intro-more { clear: both; width: 100%; margin: 3.5vw 0 0 0; position: relative;}
  .service-item-intro-more img.service-item-bg { width: 100%; height: auto; position: relative; z-index: 1;}
  .service-item-intro-more .serv-item-con { width: 50vw; padding: 3.5vw 0 0 2.5vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; position: absolute; top: 0; left: 0; z-index: 2;}
  .service-item-intro-more .serv-item-con .col-lf-num { width: 10vw; font-size: 8vw; font-weight: 700; font-family: Arial;}
  .service-item-intro-more .serv-item-con .col-lf-num.color-red { color: #971e23;}
  .service-item-intro-more .serv-item-con .col-lf-num.color-yellow { color: #e9a51e;}
  .service-item-intro-more .serv-item-con .col-lf-num.color-green { color: #158072;}
  .service-item-intro-more .serv-item-con .col-rt-intro { width: calc(100% - 10vw);}
  .service-item-intro-more .serv-item-con .col-rt-intro .title-more { width: 100%; margin: 2.6vw 0 0 0; display: flex; justify-content: space-between; align-items: flex-end;}
  .service-item-intro-more .serv-item-con .col-rt-intro .title-more span.title { font-size: 3.4vw; font-weight: 500; line-height: 3.4vw;}
  .service-item-intro-more .serv-item-con .col-rt-intro .title-more img.more-bt { width: 17vw; height: auto;}
  .service-item-intro-more .serv-item-con .col-rt-intro .text-con { width: 100%; margin: 2vw 0 0 0; padding: 0 2vw 0 0; font-size: 1.4vw; line-height: 2.4vw; box-sizing: border-box;}


  /************ section #page-serv-item ************/

  section#page-serv-item-1 { clear: both; width: 100%; background-image: url(../images/page_service_items_bg.png); background-repeat: repeat-y; background-size: 100% auto;}

  .page-serv-items-title { width: 100%; padding: 23vw 0 0 calc(50% - 38vw); box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; position: absolute; top: 0; left: 0; z-index: 2;}
  .page-serv-items-title span.title-b { color: #fff; font-size: 8vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 8vw;}
  .page-serv-items-title span.title-s { padding: 0.5vw 1.5vw; color: #fff; font-size: 2.2vw; font-weight: 700; line-height: 2.2vw; background-color: #991e23;}

  .page-serv-item-con { clear: both; width: 100%; padding: 2.5vw 0;}
  .page-serv-item-con .content { width: 76vw; margin: 0 auto; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-serv-item-con .content .col-lf-num { width: 12vw; padding: 0 0 0 2vw; font-size: 8vw; font-weight: 700; font-family: Arial; box-sizing: border-box;}
  .page-serv-item-con .content .col-lf-num.color-red { color: #971e23;}
  .page-serv-item-con .content .col-lf-num.color-yellow { color: #e9a51e;}
  .page-serv-item-con .content .col-lf-num.color-green { color: #158072;}
  .page-serv-item-con .content .col-rt-intro { width: calc(100% - 12vw);}
  .page-serv-item-con .content .col-rt-intro .title { width: 100%; margin: 2.6vw 0 0 0; font-size: 3.4vw; font-weight: 500; line-height: 3.4vw; display: flex; justify-content: space-between; align-items: flex-end;}
  .page-serv-item-con .content .col-rt-intro .text-con { width: 100%; margin: 2vw 0 0 0; padding: 0 6vw 2.5vw 0; font-size: 1.4vw; line-height: 2.4vw; box-sizing: border-box;}
  .page-serv-item-con .sub-title { clear: both; width: 78vw; margin: 0 auto; color: #fff; font-size: 8vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 8vw; text-align: right;}
  .page-serv-item-con .interior { clear: both; width: 100%; margin: 3vw 0 0 0; position: relative;}
  .page-serv-item-con .interior .intro-people { width: 53vw; position: relative; z-index: 1;}
  .page-serv-item-con .interior .intro-people img { width: 100%; height: auto;}
  .page-serv-item-con .interior .intro-text { width: 29vw; position: absolute; top: 4vw; right: calc(50% - 39vw + 7.5vw); z-index: 2;}
  .page-serv-item-con .interior .intro-text .title { width: 100%; color: #971e23; font-size: 2.4vw; font-weight: 500; line-height: 3.6vw; border-bottom: 1px #971e23 solid;}
  .page-serv-item-con .interior .intro-text .intro { width: 100%; padding: 0.5vw 0 1.5vw 0; font-size: 1.4vw; font-weight: 500; line-height: 2.4vw;}
  .page-serv-item-con .interior .intro-text .infor { width: 100%; font-size: 1.2vw; line-height: 2.4vw;}
  .page-serv-item-con .interior .intro-text .infor .name { width: 100%; font-size: 1.4vw; font-weight: 500; line-height: 3vw;}
  .page-serv-item-con .award-exp { clear: both; width: 76vw; padding: 2vw 4.5vw 4vw 4.5vw; margin: 0 auto; box-sizing: border-box;}
  .page-serv-item-con .award-exp .title { width: 100%; color: #971e23; font-size: 2.4vw; font-weight: 500; line-height: 3.6vw; text-align: center; border-bottom: 1px #971e23 solid;}
  .page-serv-item-con .award-exp .award-exp-list { width: 100%; padding: 1vw 0 0 0; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-serv-item-con .award-exp .award-exp-list .year { width: 4vw; padding: 0.3vw 0; color: #000; font-size: 1.4vw; line-height: 2.4vw;}
  .page-serv-item-con .award-exp .award-exp-list .infor { width: calc(100% - 4vw); padding: 0.3vw 0; color: #000; font-size: 1.4vw; line-height: 2.4vw;}


  section#page-serv-items-works { clear: both; width: 100%;}

  .page-serv-works-title { width: 76vw; margin: 2.5vw auto; color: #971e23; font-size: 2.4vw; font-weight: 500; line-height: 3.6vw; text-align: center; border-bottom: 1px #971e23 solid; box-sizing: border-box;}

  .page-serv-works-list { clear: both; width: 100%;}
  .page-serv-works-list img { width: auto; height: 32vw;}

  .page-serv-item-back-bt { clear: both; width: 100%;}
  .page-serv-item-back-bt a { display: block;}
  .page-serv-item-back-bt a img { width: 17vw; height: auto; margin: 2.5vw auto;}


  /** 20240516新增 **/
  .page-serv-works-bt { width: 16vw; margin: 2.5vw auto;}
  .page-serv-works-bt a { width: 100%; padding: 0.5vw 0; color: #fff; font-size: 1.8vw; text-align: center; text-decoration: none; border-radius: 2vw; background-color: #971e23; display: block;}

  .page-serv-works-list { clear: both; width: 76vw; margin: 0 auto; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .page-serv-works-list img { width: calc(100% / 3 - 1vw); height: auto; margin: 0 0.5vw 1vw 0.5vw;}


  .page-serv-item-con .inspection-steps { clear: both; width: 100%; margin: 3vw 0 0 0;}
  .page-serv-item-con .inspection-steps .title-box { width: 54vw; margin: 0 0 3.5vw 0; position: relative;}
  .page-serv-item-con .inspection-steps .title-box img.title-bg { width: 100%; height: auto; position: relative; z-index: 1;}
  .page-serv-item-con .inspection-steps .title-box span.title-text { color: #fff; font-size: 3vw; font-weight: 500; border-bottom: 1px #fff solid; position: absolute; top: 2vw; right: 15vw; z-index: 2;}
  .page-serv-item-con .inspection-steps .steps-content { clear: both; width: 52vw; margin: 0 auto;}
  .page-serv-item-con .inspection-steps .steps-content .step-box { clear: both; width: 100%; margin: 0 0 4vw 0; position: relative;}
  .page-serv-item-con .inspection-steps .steps-content .step-box .top-title-bar { width: 100%; display: flex; justify-content: flex-start; align-items: center;}
  .page-serv-item-con .inspection-steps .steps-content .step-box .top-title-bar img.step-icon { width: 5vw; height: auto; margin: 0 1vw 0 0;}
  .page-serv-item-con .inspection-steps .steps-content .step-box .top-title-bar span.step-num { padding: 0 1.5vw; font-size: 1.6vw; font-weight: 500; line-height: 2.4vw; border-radius: 0.8vw; background-color: #e9a51e;}
  .page-serv-item-con .inspection-steps .steps-content .step-box .top-title-bar span.step-title { padding: 0 0 0 1vw; font-size: 1.6vw; font-weight: 500; line-height: 2.4vw;}
  .page-serv-item-con .inspection-steps .steps-content .step-box .text-con { clear: both; width: 100%; padding: 0 14vw 0 6.5vw; font-size: 1.4vw; font-weight: 300; line-height: 2.6vw; box-sizing: border-box;}
  .page-serv-item-con .inspection-steps .steps-content .step-box img.pre-order-bt { width: 12.5vw; height: auto; position: absolute; top: 0; right: 3vw; z-index: 2;}
  .page-serv-item-con .inspection-steps .steps-content .step-box img.arrow-down { width: 3.5vw; height: auto; position: absolute; top: 8vw; right: 6vw; z-index: 2;}

  section#page-serv-item-2 { clear: both; width: 100%; padding: 6.5vw 0 0 0;}

  .inspection-serv-list-title { width: 54vw; margin: 0 0 3.5vw 0; position: relative; z-index: 2;}
  .inspection-serv-list-title img.title-bg { width: 100%; height: auto; position: relative; z-index: 1;}
  .inspection-serv-list-title span.title-text { color: #fff; font-size: 3vw; font-weight: 500; border-bottom: 1px #fff solid; position: absolute; top: 2vw; right: 15vw; z-index: 2;}

  .inspection-serv-items-list { clear: both; width: 100%; padding: 7vw calc(50% - 38vw + 8vw) 2vw calc(50% - 38vw + 8vw); margin: -7vw auto 0 auto; box-sizing: border-box; background-image: url(../images/page_service_items_bg.png); background-repeat: repeat-y; background-size: 100% auto; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; position: relative; z-index: 1;}

  ul.inspection-serv-list { width: 50%; padding: 0 4vw; margin: 0 0 4.5vw 0; box-sizing: border-box; list-style: none; display: block;}
  ul.inspection-serv-list ::marker { content: "● "; font-size: 1.8vw; line-height: 2vw;}
  ul.inspection-serv-list li { width: 100%; padding: 0; margin: 0 0 1vw 0; font-size: 1.8vw; font-weight: 500; line-height: 2vw;}
  ul.inspection-serv-list li ul.serv-list { width: 100%; padding: 0; margin: 1vw 0 0 0; list-style: none; display: block;}
  ul.inspection-serv-list li ul.serv-list ::marker { content: "";}
  ul.inspection-serv-list li ul.serv-list li { width: 100%; padding: 0; margin: 0; font-size: 1.2vw; font-weight: 300; line-height: 2vw;}


  .page-serv-works-title-green { width: 76vw; margin: 2.5vw auto; color: #158072; font-size: 2.4vw; font-weight: 500; line-height: 3.6vw; text-align: center; border-bottom: 1px #158072 solid; box-sizing: border-box;}

  .decoration-steps-list { clear: both; width: 100%; margin: 2vw 0 0 0;}
  .decoration-steps-list .title-box { width: 54vw; position: relative;}
  .decoration-steps-list .title-box img.title-bg { width: 100%; height: auto; position: relative; z-index: 1;}
  .decoration-steps-list .title-box span.title-text { color: #fff; font-size: 3vw; font-weight: 500; border-bottom: 1px #fff solid; position: absolute; top: 2vw; right: 15vw; z-index: 2;}

  .decoration-steps-con { clear: both; width: 76vw; padding: 4vw 0; margin: 0 auto;}
  .decoration-steps-con .steps-list-row-mo { display: none;}
  .decoration-steps-con .steps-list-row { clear: both; width: 100%; margin: 0 0 5vw 0; display: flex; justify-content: center; align-items: center;}
  .decoration-steps-con .steps-list-row .step-box { width: 15vw;}
  .decoration-steps-con .steps-list-row .step-box .top-title-bar { width: 100%; margin: 0 0 1vw 0; text-align: center;}
  .decoration-steps-con .steps-list-row .step-box .top-title-bar span.step-num { padding: 0 1.5vw; color: #fff; font-size: 1.6vw; font-weight: 500; line-height: 2.4vw; border-radius: 0.8vw; background-color: #158072;}
  .decoration-steps-con .steps-list-row .step-box .top-title-bar span.title { font-size: 1.6vw; font-weight: 500; line-height: 2.4vw;}
  .decoration-steps-con .steps-list-row .step-box img.step-icon { clear: both; width: 12vw; height: auto; margin: 0 auto;}
  .decoration-steps-con .steps-list-row img.arrow-right { width: 10vw; height: auto;}
  .decoration-steps-con .steps-list-row .step-box-2 { width: 25vw;}
  .decoration-steps-con .steps-list-row .step-box-2 .top-title-bar { width: 100%; margin: 0 0 1vw 0; text-align: center;}
  .decoration-steps-con .steps-list-row .step-box-2 .top-title-bar span.step-num { padding: 0 1.5vw; color: #fff; font-size: 1.6vw; font-weight: 500; line-height: 2.4vw; border-radius: 0.8vw; background-color: #158072;}
  .decoration-steps-con .steps-list-row .step-box-2 .top-title-bar span.title { font-size: 1.6vw; font-weight: 500; line-height: 2.4vw;}
  .decoration-steps-con .steps-list-row .step-box-2 img.step-icon { clear: both; width: 25vw; height: auto; margin: 0 auto;}

  img.page-serv-item-3-preorder-bt { clear: both; width: 12vw; height: auto; margin: 0 auto;}


  /************ section #page-reviews ************/

  section#page-reviews { clear: both; width: 100%; padding: 4vw 8vw; background-color: #4d4d4d; box-sizing: border-box;}

  .page-reviews-title { width: 100%; margin: 2.5vw 0; text-align: center;}
  .page-reviews-title span.title-b { color: rgba(255,255,255,0.5); font-size: 8vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 8vw;}
  .page-reviews-title span.title-s { padding: 0.2vw 1.5vw; color: #fff; font-size: 2.2vw; font-weight: 700; line-height: 2.2vw; background-color: #991e23;}

  .page-reviews-article-list { clear: both; width: 100%;}
  .page-reviews-article-list .reviews-article-box { clear: both; width: 80%; margin: 2vw auto; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-reviews-article-list .reviews-article-box .col-photo-mo { display: none;}
  .page-reviews-article-list .reviews-article-box .col-photo { width: 50%; background-color: #eba71e; display: block;}
  .page-reviews-article-list .reviews-article-box .col-photo img { width: 100%; height: auto;}
  .page-reviews-article-list .reviews-article-box .col-text { width: 50%; padding: 3vw; color: #fff; font-size: 1.1vw; line-height: 1.8vw; background-color: #eba71e; box-sizing: border-box;}
  .page-reviews-article-list .reviews-article-box .col-text span.nickname { color: #eee; font-size: 0.9vw;}


  /************ page-pro-content ************/

  .page-pro-content { clear: both; width: 100%; padding: 4vw calc(50% - 44vw) 0 calc(50% - 44vw); box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-pro-content .col-lf-nav { width: 16vw;}
  .page-pro-content .col-lf-nav input[type=search] { width: 100%; padding: 0.3vw 1vw; color: #000; font-size: 1.1vw; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .page-pro-content .col-lf-nav .sort-title-mo { display: none;}
  .page-pro-content .col-lf-nav .sort-title { width: 100%; padding: 0.3vw 0.5vw; margin: 2vw 0 0 0; font-size: 1.2vw; font-weight: 500; border-radius: 0.5vw; background-color: #eba71e; box-sizing: border-box;}
  .page-pro-content .col-lf-nav ul.pro-sort-nav { clear: both; width: 100%; padding: 0; margin: 1vw 0 0 0; list-style: none; display: block;}
  .page-pro-content .col-lf-nav ul.pro-sort-nav li { width: 100%; padding: 0; margin: 0;}
  .page-pro-content .col-lf-nav ul.pro-sort-nav li a { width: 100%; padding: 0.5vw; color: #000; font-size: 1.1vw; font-weight: 300; text-decoration: none; display: block; box-sizing: border-box; cursor: pointer;}
  .page-pro-content .col-lf-nav ul.pro-sort-nav li a:hover { font-weight: 400; background-color: #eee;}
  .page-pro-content .col-lf-nav ul.pro-sort-nav li ul.sort-nav-popup { width: 100%; padding: 0.5vw 0 0.5vw 1vw; margin: 0; list-style: none; display: none; box-sizing: border-box;}
  .page-pro-content .col-lf-nav ul.pro-sort-nav li ul.sort-nav-popup li { width: 100%; padding: 0; margin: 0;}
  .page-pro-content .col-lf-nav ul.pro-sort-nav li ul.sort-nav-popup li a { width: 100%; padding: 0.5vw; color: #000; font-size: 1.1vw; font-weight: 300; text-decoration: none; display: block; box-sizing: border-box; cursor: pointer;}
  .page-pro-content .col-lf-nav ul.pro-sort-nav li ul.sort-nav-popup li a:hover { font-weight: 400; background-color: #eee;}

  /** 20240520新增 **/
  .page-pro-content .col-lf-nav .all-sort-title-mo { display: none;}
  
  .page-pro-content .col-rt-con { width: calc(100% - 16vw); padding: 0 0 0 3vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-pro-content .col-rt-con .pro-pic { width: 50%;}
  .page-pro-content .col-rt-con .pro-pic img { width: 100%; height: auto;}
  .page-pro-content .col-rt-con .pro-infor { width: 50%; padding: 0 0 0 2vw; box-sizing: border-box;}
  .page-pro-content .col-rt-con .pro-infor .pro-title { width: 100%; padding: 0 0 0.5vw 0; font-size: 1.4vw; font-weight: 500; border-bottom: 1px #ccc solid;}
  .page-pro-content .col-rt-con .pro-infor .pro-feature { width: 100%; padding: 0.5vw 0; margin: 0 0 1vw 0; font-size: 1.1vw; font-weight: 300; line-height: 1.8vw; border-bottom: 1px #ccc solid;}
  .page-pro-content .col-rt-con .pro-infor .pro-feature .title { width: 100%; font-size: 1.4vw; font-weight: 400;}
  .page-pro-content .col-rt-con .pro-infor .pro-quantity { width: 100%; padding: 0.5vw 0; font-size: 1.1vw;}
  .page-pro-content .col-rt-con .pro-infor .pro-quantity input[type=number] { width: 5vw; padding: 0.2vw 0.5vw; color: #000; font-size: 1vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid;}
  .page-pro-content .col-rt-con .pro-infor .pro-price { width: 100%; font-size: 1.1vw;}
  .page-pro-content .col-rt-con .pro-infor .pro-price span.price { color: #971e23; font-size: 1.4vw; font-weight: 600;}
  .page-pro-content .col-rt-con .pro-intro { width: 100%; margin: 2vw 0 0 0;}
  .page-pro-content .col-rt-con .pro-intro .title { width: 100%; padding: 0 0 0.5vw 0; font-size: 1.4vw; text-align: center; border-top: 1px #ccc solid; border-bottom: 1px #ccc solid; background-color: #eee;}
  .page-pro-content .col-rt-con .pro-intro .content { width: 100%; padding: 2vw 0; font-size: 1.1vw; line-height: 2.2vw;}
  .page-pro-content .col-rt-con .pro-intro .content img { max-width: 100%; height: auto; margin: 0.5vw auto;}

  .page-pro-content .col-full-recommend { clear: both; width: 100%; padding: 2vw 2vw 0 2vw; margin: 2vw 0 0 0; background-color: #eee; box-sizing: border-box;}
  .page-pro-content .col-full-recommend .rec-title { width: 100%; font-size: 1.4vw; font-weight: 500; text-align: center;}
  .page-pro-content .col-full-recommend .pro-rec-list { width: 100%; margin: 2vw 0 0 0; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-pro-content .col-full-recommend .pro-rec-list .pro-box { width: calc(100% / 4 - 2vw); margin: 0 1vw 2vw 1vw;}
  .page-pro-content .col-full-recommend .pro-rec-list .pro-box a { color: #000; text-decoration: none;}
  .page-pro-content .col-full-recommend .pro-rec-list .pro-box .pic { width: 100%;}
  .page-pro-content .col-full-recommend .pro-rec-list .pro-box .pic img { width: 100%; height: auto;}
  .page-pro-content .col-full-recommend .pro-rec-list .pro-box .title { width: 100%; padding: 0.5vw 0 0 0; font-size: 0.9vw;}


  /************ section #page-qanda ************/

  section#page-qanda { clear: both; width: 100%; padding: 4vw 14.5vw; box-sizing: border-box; background-image: url("../images/index_service_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto;}

  .page-qanda-title { width: 100%; margin: 0 0 3vw 0;}
  .page-qanda-title span.title-b { color: #a5a5a5; font-size: 8vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 8vw;}

  .page-qanda-list { width: 100%;}
  .page-qanda-list ul.qanda-list-box { width: 100%; padding: 0; margin: 0; border-top: 1px #000 solid; list-style: none; display: block;}
  .page-qanda-list ul.qanda-list-box li { width: 100%; padding: 0; margin: 0; border-bottom: 1px #000 solid;}
  .page-qanda-list ul.qanda-list-box li .qanda-title { width: 100%; padding: 1.5vw 0; display: flex; justify-content: flex-start; align-items: flex-start; cursor: pointer;}
  .page-qanda-list ul.qanda-list-box li .qanda-title:hover { color: #971e23;}
  .page-qanda-list ul.qanda-list-box li .qanda-title .icon { width: 2vw; font-size: 1.4vw; line-height: 2vw;}
  .page-qanda-list ul.qanda-list-box li .qanda-title .title { width: calc(100% - 4vw); font-size: 1.2vw; font-weight: 500; line-height: 2vw;}
  .page-qanda-list ul.qanda-list-box li .qanda-title .open { width: 2vw; font-size: 1.4vw; line-height: 2vw; text-align: right;}
  .page-qanda-list ul.qanda-list-box li .qanda-title .close { width: 2vw; font-size: 1.4vw; line-height: 2vw; text-align: right; display: none;}
  .page-qanda-list ul.qanda-list-box li .qanda-con { width: 100%; padding: 2vw 2vw 2vw 0; border-top: 1px #ccc solid; display: none; justify-content: flex-start; align-items: flex-start; box-sizing: border-box; transition: 0.5s;}
  .page-qanda-list ul.qanda-list-box li .qanda-con .icon { width: 2vw; font-size: 1.4vw; line-height: 2vw;}
  .page-qanda-list ul.qanda-list-box li .qanda-con .text { width: calc(100% - 2vw); font-size: 1vw; font-weight: 300; line-height: 2vw;}
  .page-qanda-list ul.qanda-list-box li .qanda-con .text img { max-width: 100%; height: auto;}


  /** 20240522新增 **/
  ul.page-qanda-nav { width: 100%; padding: 0; margin: 0 0 4vw 0; list-style: none; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
  ul.page-qanda-nav li { padding: 0; margin: 0.5vw;}
  ul.page-qanda-nav li a { padding: 0.5vw 2vw; color: #000; font-size: 1.2vw; text-decoration: none; border-radius: 0.6vw; border: 1px #000 solid; display: block;}
  ul.page-qanda-nav li a:hover { background-color: #fff;}
  ul.page-qanda-nav li a.sel { background-color: #fff;}


  /************ page-contact-con ************/

  .page-contact-title { width: 100%; margin: 2.5vw 0;}
  .page-contact-title span.title-b { color: #a5a5a5; font-size: 8vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 8vw;}
  .page-contact-title span.title-s { padding: 0.2vw 1.5vw; margin: 0 0 0 4vw; color: #fff; font-size: 2.2vw; font-weight: 700; line-height: 2.2vw; background-color: #991e23;}

  .page-contact-con { clear: both; width: 90%; padding: 0 13vw 0 0; margin: 4vw auto 0 auto; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; box-sizing: border-box;}
  .page-contact-con .contact-infor { width: 45%; font-size: 1.2vw; line-height: 2.4vw; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-contact-con .contact-infor .column-full { width: 100%; font-size: 1.6vw; font-weight: 500;}
  .page-contact-con .contact-infor .caption { width: 2vw;}
  .page-contact-con .contact-infor .column { width: calc(100% - 2vw);}
  .page-contact-con .contact-form { width: 55%;}
  .page-contact-con .contact-form form { width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .page-contact-con .contact-form form .caption { width: 6vw; padding: 0 0 0.5vw 0; font-size: 1.2vw; text-align: right;}
  .page-contact-con .contact-form form .column { width: calc(100% - 6vw); padding: 0 0 0.5vw 0; font-size: 1.2vw;}
  .page-contact-con .contact-form form .column input[type=text], 
  .page-contact-con .contact-form form .column input[type=tel], 
  .page-contact-con .contact-form form .column input[type=email] { width: 80%; padding: 0.3vw 0.5vw; font-size: 1.1vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .page-contact-con .contact-form form .column textarea { width: 80%; height: 6vw; padding: 0.3vw 0.5vw; font-size: 1.1vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .page-contact-con .contact-form form .column input[type=button] { padding: 0.3vw 2vw; color: #fff; font-size: 1.1vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 1vw; background-color: #158072; cursor: pointer;}


  /************ page-shopping-cart ************/

  section#page-shopping-cart { clear: both; width: 100%; padding: 0 0 4.5vw 0; box-sizing: border-box;}

  .page-shoppingcart-title { width: 100%; margin: 2.5vw 0; text-align: center;}
  .page-shoppingcart-title span.title-b { color: rgba(165,165,165,0.8); font-size: 8vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 8vw;}
  .page-shoppingcart-title span.title-s { padding: 0 1.5vw; color: #fff; font-size: 2.2vw; font-weight: 700; line-height: 3vw; background-color: #991e23;}

  .page-shoppingcart-order { clear: both; width: 80vw; margin: 2.5vw auto;}
  .page-shoppingcart-order .step-line-bar { width: 40vw; margin: 0 auto; display: flex; justify-content: center; align-items: flex-start; position: relative;}
  .page-shoppingcart-order .step-line-bar .step-box { width: 2vw; height: 2vw; color: #fff; font-size: 1.1vw; line-height: 1.8vw; text-align: center; border-radius: 100%; background-color: #ccc;}
  .page-shoppingcart-order .step-line-bar .step-box.sel { background-color: #666;}
  .page-shoppingcart-order .step-line-bar .step-line { width: 10vw; height: 2px; margin: 1vw 0 0 0; background-color: #ccc; display: block;}
  .page-shoppingcart-order .step-line-bar .step-line.sel { background-color: #666;}
  .page-shoppingcart-order .step-line-bar .text-sub-1 { width: 4vw; color: #000; font-size: 1.1vw; text-align: center; position: absolute; top: 2.5vw; left: 6vw; z-index: 1;}
  .page-shoppingcart-order .step-line-bar .text-sub-2 { width: 5vw; color: #000; font-size: 1.1vw; text-align: center; position: absolute; top: 2.5vw; left: calc(50% - 2.5vw); z-index: 1;}
  .page-shoppingcart-order .step-line-bar .text-sub-3 { width: 5vw; color: #000; font-size: 1.1vw; text-align: center; position: absolute; top: 2.5vw; right: 5.5vw; z-index: 1;}
  .page-shoppingcart-order .member-signup { clear: both; width: 100%; margin: 4vw 0 2vw 0; padding: 2vw 4vw; background-color: #eee; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  .page-shoppingcart-order .member-signup .notice-text { width: calc(100% - 21vw); color: #000; font-size: 1.1vw; font-weight: 300;}
  .page-shoppingcart-order .member-signup .signup-bt { width: 10vw;}
  .page-shoppingcart-order .member-signup .signup-bt a { width: 100%; padding: 0.3vw 0; color: #fff; font-size: 1.1vw; text-align: center; text-decoration: none; border-radius: 0.6vw; background-color: #eba71e; display: block;}
  .page-shoppingcart-order .member-signup .fb-signup-bt { width: 10vw;}
  .page-shoppingcart-order .member-signup .fb-signup-bt a { width: 100%; padding: 0.3vw 0; margin: 0 0 0 1vw; color: #fff; font-size: 1.1vw; text-align: center; text-decoration: none; border-radius: 0.6vw; background-color: #0866ff; display: block;}

  .page-shoppingcart-order .shoppingcart-order-table { clear: both; width: 100%;}
  .page-shoppingcart-order .shoppingcart-order-table .caption-full { width: 100%; font-size: 1.1vw; font-weight: 500; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: center;}
  .page-shoppingcart-order .shoppingcart-order-table .caption-full .caption-1 { width: 35%; padding: 0.5vw; box-sizing: border-box;}
  .page-shoppingcart-order .shoppingcart-order-table .caption-full .caption-2 { width: 15%; padding: 0.5vw; text-align: center; box-sizing: border-box;}
  .page-shoppingcart-order .shoppingcart-order-table .caption-full .caption-3 { width: 15%; padding: 0.5vw; text-align: center; box-sizing: border-box;}
  .page-shoppingcart-order .shoppingcart-order-table .caption-full .caption-4 { width: 15%; padding: 0.5vw; text-align: center; box-sizing: border-box;}
  .page-shoppingcart-order .shoppingcart-order-table .caption-full .caption-5 { width: 15%; padding: 0.5vw; text-align: center; box-sizing: border-box;}
  .page-shoppingcart-order .shoppingcart-order-table .caption-full .caption-6 { width: 5%; padding: 0.5vw; box-sizing: border-box;}
  .page-shoppingcart-order .shoppingcart-order-table .column-full { width: 100%; font-size: 1vw; border-bottom: 1px #ccc dashed; display: flex; justify-content: flex-start; align-items: center;}
  .page-shoppingcart-order .shoppingcart-order-table .column-full .column-1 { width: 35%; padding: 0.5vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  .page-shoppingcart-order .shoppingcart-order-table .column-full .column-1 .pic { width: 7vw;}
  .page-shoppingcart-order .shoppingcart-order-table .column-full .column-1 .pic img { width: 100%; height: auto;}
  .page-shoppingcart-order .shoppingcart-order-table .column-full .column-1 .pro-name { width: calc(100% - 7vw); padding: 0 0 0 1vw; box-sizing: border-box;}
  .page-shoppingcart-order .shoppingcart-order-table .column-full .column-2 { width: 15%; padding: 0.5vw; text-align: center; box-sizing: border-box;}
  .page-shoppingcart-order .shoppingcart-order-table .column-full .column-3 { width: 15%; padding: 0.5vw; text-align: center; box-sizing: border-box;}
  .page-shoppingcart-order .shoppingcart-order-table .column-full .column-4 { width: 15%; padding: 0.5vw; text-align: center; box-sizing: border-box;}
  .page-shoppingcart-order .shoppingcart-order-table .column-full .column-4 button { width: 2vw; padding: 0.2vw 0; color: #000; font-size: 1vw; font-weight: 500; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; text-align: center; border-radius: 6px; border: 1px #ccc solid; background-color: #eee; cursor: pointer;}
  .page-shoppingcart-order .shoppingcart-order-table .column-full .column-4 input[type=text] { width: 3vw; padding: 0.3vw 0.5vw; color: #000; font-size: 1vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; text-align: center; border: 1px #ccc solid; background-color: #fff;}
  .page-shoppingcart-order .shoppingcart-order-table .column-full .column-5 { width: 15%; padding: 0.5vw; text-align: center; box-sizing: border-box;}
  .page-shoppingcart-order .shoppingcart-order-table .column-full .column-6 { width: 5%; padding: 0.5vw; text-align: center; box-sizing: border-box;}

  
  /** 20240522修改 **/
  .page-shoppingcart-order .continue-shop { width: 100%; margin: 3vw 0 0 0; text-align: right; box-sizing: border-box; display: flex; justify-content: flex-end; align-items: center;}
  .page-shoppingcart-order .continue-shop a.shopping-bt { width: 4vw; padding: 0.5vw 2vw; margin: 0 0.5vw; color: #fff; font-size: 1vw; font-weight: 500; text-align: center; text-decoration: none; border-radius: 0.6vw; background-color: #eaa61e; display: block;}
  .page-shoppingcart-order .continue-shop a.checkout-bt { width: 3vw; padding: 0.5vw 2vw; margin: 0 0.5vw; color: #fff; font-size: 1vw; font-weight: 500; text-align: center; text-decoration: none; border-radius: 0.6vw; background-color: #eaa61e; display: block;}
  .page-shoppingcart-order .continue-shop a.confirm-bt { width: 4vw; padding: 0.5vw 2vw; margin: 0 auto; color: #fff; font-size: 1vw; font-weight: 500; text-align: center; text-decoration: none; border-radius: 0.6vw; background-color: #eaa61e; display: block;}
  .page-shoppingcart-order .continue-shop a:hover { color: #000;}

  .shopping-checkout-infor { clear: both; width: 100%; margin: 4vw 0 0 0; display: flex; justify-content: flex-start; align-items: flex-start;}
  .shopping-checkout-infor .column-lf { width: calc(50% - 1vw); padding: 1.5vw; margin: 0 1vw 0 0; border-radius: 1.6vw; border: 1px #ccc solid; box-sizing: border-box;}
  .shopping-checkout-infor .column-lf .title-bar, 
  .shopping-checkout-infor .column-rt .title-bar { width: 100%; padding: 0 0 0.5vw 0; font-size: 1.4vw; font-weight: 500; border-bottom: 1px #ccc solid;}
  .shopping-checkout-infor .column-lf .infor-form { width: 100%; padding: 0.5vw 0 0 0; font-size: 1.1vw; line-height: 2vw;}
  .shopping-checkout-infor .column-lf .infor-form input[type=radio] { width: 1vw; height: 1vw;}
  .shopping-checkout-infor .column-lf .infor-form .form { width: 100%; padding: 0 0 0 1.7vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .shopping-checkout-infor .column-lf .infor-form .form .col-x3 { width: calc(100% / 3);}
  .shopping-checkout-infor .column-lf .infor-form .form .col-x3 input[type=text].style-1, 
  .shopping-checkout-infor .column-lf .infor-form .form .col-x3 input[type=tel] { width: 96%; padding: 0.3vw 0.5vw; margin: 0 0 1vw 0; font-size: 1.1vw; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .shopping-checkout-infor .column-lf .infor-form .form .twzipcode { clear: both; width: 100%;}
  .shopping-checkout-infor .column-lf .infor-form .form .twzipcode select { width: 49%; padding: 0.3vw 0.5vw; font-size: 1.1vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .shopping-checkout-infor .column-lf .infor-form .form input[type=text].style-2 { width: 98.5%; padding: 0.3vw 0.5vw; margin: 0.5vw 0 1vw 0; font-size: 1.1vw; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .shopping-checkout-infor .column-lf .infor-form .form .col-full { width: 100%;}
  .shopping-checkout-infor .column-lf .infor-form .form .col-full input[type=checkbox] { width: 1.1vw; height: 1.1vw;}

  .shopping-checkout-infor .shopping-confirm-text { width: 100%; padding: 2vw 0; font-size: 1.4vw; text-align: center;}

  .shopping-checkout-infor .column-rt { width: calc(50% - 1vw); padding: 1.5vw; margin: 0 0 0 1vw; border-radius: 1.6vw; border: 1px #ccc solid; box-sizing: border-box;}
  .shopping-checkout-infor .column-rt .col-full { clear: both; width: 100%; padding: 0.5vw 0; font-size: 1.1vw; line-height: 2vw; border-bottom: 1px #ccc dashed; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .shopping-checkout-infor .column-rt .col-full:last-child { border-bottom: 0;}
  .shopping-checkout-infor .column-rt .col-full .caption { width: 60%;}
  .shopping-checkout-infor .column-rt .col-full .column { width: 40%; font-weight: 600; text-align: right;}
  .shopping-checkout-infor .column-rt .col-full .column span.color-red { color: #971e23;}
  .shopping-checkout-infor .column-rt .col-full .col-x3 { width: calc(100% / 3);}
  .shopping-checkout-infor .column-rt .col-full .col-x3 input[type=radio] { width: 1vw; height: 1vw;}

  ul#invoice-tab { clear: both; width: 100%; padding: 0; margin: 0.5vw 0 0 0; list-style: none; display: flex; justify-content: flex-start;}
  ul#invoice-tab li { width: 7vw; padding: 0; margin: 0 0.5vw 0 0;}
  ul#invoice-tab li a { width: 100%; color: #000; font-size: 1vw; text-align: center; border: 1px #000 solid; background-color: #fff; text-decoration: none; box-sizing: border-box; display: block;}
  ul#invoice-tab li a:hover { background-color: #63c1d1;}
  ul#invoice-tab li a.sel { color: #fff; background-color: #000;}
  
  .invoice-detail { clear: both; width: 100%; padding: 1.5vw; margin: 0 0 0.5vw 0; box-sizing: border-box; background-color: #f1f1f1;}
  .invoice-detail div { display: none;}
  .invoice-detail div .content-table { width: 100%;}
  .invoice-detail div .content-table .caption-title { clear: both; width: 6vw; padding: 0.5vw 0 0 0; float: left;}
  .invoice-detail div .content-table .column-detail { width: calc(100% - 6vw); float: left;}
  .invoice-detail div .content-table .column-detail input[type=text].style-full, 
  .invoice-detail div .content-table .column-detail select.style-full { width: 100%; padding: 0.3vw 0.5vw; margin: 0.5vw 0; color: #000; font-size: 1.1vw; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #cacaca solid; background-color: #fff; box-sizing: border-box;}


  /************ page-members ************/

  .page-members-login { clear: both; width: 70%; margin: 3vw auto; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-members-login .col-half { width: 50%;}
  .page-members-login .col-half .s-title { width: 100%; font-size: 1.4vw; margin: 0 0 2vw 0;}
  .page-members-login .col-half input[type=text], 
  .page-members-login .col-half input[type=password] { width: 30vw; margin: 0 0 1vw 0; padding: 0.5vw 1vw; color: #000; font-size: 1.2vw; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .page-members-login .col-half input[type=submit], 
  .page-members-login .col-half input[type=button] { width: 30vw; margin: 0 0 1vw 0; padding: 0.3vw 1vw; color: #fff; font-size: 1vw; border: 0; border-radius: 0.3vw; background-color: #eaa61e; box-sizing: border-box; cursor: pointer;}
  .page-members-login .col-half .forget-note { clear: both; width: 30vw; padding: 1vw 0 0 0; margin: 1vw 0 0 0; border-top: 1px #ccc solid; color: #333; font-size: 0.9vw;}
  .page-members-login .col-half .forget-note a { color: #000; text-decoration: none; border-bottom: 1px #333 solid;}
  .page-members-login .col-half .forget-note a:hover { color: #0866ff; border-bottom: 1px #0866ff solid;}
  .page-members-login .col-half .sign-up-note { clear: both; width: 100%; padding: 2vw; font-size: 1vw; border-radius: 0.5vw; background-color: #eee; box-sizing: border-box;}
  .page-members-login .col-half .sign-up-note .sign-up-bt { clear: both; width: 16vw; margin: 1vw auto 0 auto;}
  .page-members-login .col-half .sign-up-note .sign-up-bt a { width: 100%; padding: 0.3vw 1vw; color: #fff; font-size: 1vw; text-align: center; text-decoration: none; border-radius: 0.3vw; background-color: #eaa61e; display: block; box-sizing: border-box;}


  .page-members-sign-up { clear: both; width: 80%; margin: 3vw auto; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-members-sign-up .column-left { width: 65%;}
  .page-members-sign-up .column-left .s-title { width: 100%; padding: 0 0 0.5vw 0; font-size: 1.4vw;}
  .page-members-sign-up .column-left input.style-1 { width: calc(50% - 2vw); margin: 0.5vw 1vw 0.5vw 0; padding: 0.5vw 1vw; color: #000; font-size: 1.2vw; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .page-members-sign-up .column-left input[type=date] { width: calc(50% - 2vw); margin: 0.5vw 1vw 0.5vw 0; padding: 0.5vw 1vw 0.5vw 7vw; color: #000; font-size: 1.2vw; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .page-members-sign-up .column-left select { width: calc(50% - 2vw); margin: 0.5vw 1vw 0.5vw 0; padding: 0.5vw 1vw; color: #000; font-size: 1.2vw; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .page-members-sign-up .column-left input.style-2 { width: calc(100% - 2.75vw); margin: 0.5vw 1vw 0.5vw 0; padding: 0.5vw 1vw; color: #000; font-size: 1.2vw; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .page-members-sign-up .column-right { width: 35%;}
  .page-members-sign-up .column-right .s-title { width: 100%; padding: 0 0 0.5vw 0; font-size: 1.4vw;}
  .page-members-sign-up .column-right input.style-1 { width: 100%; margin: 0.5vw 1vw 0.5vw 0; padding: 0.5vw 1vw; color: #000; font-size: 1.2vw; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .page-members-sign-up .column-right input.style-2 { width: 100%; margin: 0.5vw 1vw 0.5vw 0; padding: 0.5vw 1vw; color: #000; font-size: 1.2vw; border: 1px #ccc solid; background-color: #ccc; box-sizing: border-box;}
  .page-members-sign-up .column-right .text-note { width: 100%; margin: 0.5vw 1vw 0.5vw 0; padding: 1vw 0 0 0; font-size: 0.9vw; font-weight: 300; line-height: 2vw; text-align: center; box-sizing: border-box;}
  .page-members-sign-up .column-right .text-note span.color-red { color: #991e23;}
  .page-members-sign-up .column-full { width: 100%; height: 20vw; padding: 2vw; margin: 2vw 0 0 0; background-color: #eee; overflow-y: scroll; box-sizing: border-box;}
  .page-members-sign-up .column-full .s-title { width: 100%; padding: 0 0 1vw 0; font-size: 1.2vw; text-align: center;}
  .page-members-sign-up .column-full .text-con { width: 100%; font-size: 1vw; font-weight: 300; line-height: 2vw;}
  .page-members-sign-up .column-half { width: 50%; margin: 1vw 0 0 0; font-size: 1vw;}
  .page-members-sign-up .column-half .container { padding: 0 0 0 2vw; display: block; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
  .page-members-sign-up .column-half .container input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}
  .page-members-sign-up .column-half .checkmark { position: absolute; top: 0; left: 0; height: 1.6vw; width: 1.6vw; border: 1px #158072 solid; border-radius: 0.3vw; background-color: #fff; box-sizing: border-box;}
  .page-members-sign-up .column-half .container:hover input ~ .checkmark { border: 1px #158072 solid; background-color: #ccc; box-sizing: border-box;}
  .page-members-sign-up .column-half .container input:checked ~ .checkmark { background-color: #158072;}
  .page-members-sign-up .column-half .checkmark:after { content: ""; position: absolute; display: none;}
  .page-members-sign-up .column-half .container input:checked ~ .checkmark:after { display: block;}
  .page-members-sign-up .column-half .container .checkmark:after { left: 0.45vw; top: 0.1vw; width: 0.4vw; height: 0.8vw; border: solid white; border-width: 0 0.2vw 0.2vw 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
  .page-members-sign-up .column-half .sign-up-bt { width: 26vw; float: right;}  
  .page-members-sign-up .column-half .sign-up-bt a { width: 100%; padding: 0.3vw 0; color: #fff; font-size: 1vw; text-align: center; text-decoration: none; border-radius: 0.5vw; background-color: #eaa61e; display: block;}


  ul.members-nav { width: 100%; padding: 0; margin: 0 0 3vw 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  ul.members-nav li { width: 10vw; padding: 0; margin: 0 0.5vw;}
  ul.members-nav li a { width: 100%; padding: 0.3vw 0; color: #158072; font-size: 1.2vw; border: 1px #158072 solid; border-radius: 0.3vw; text-align: center; text-decoration: none; display: block;}
  ul.members-nav li a:hover { background-color: #eee;}
  ul.members-nav li a.sel { color: #fff; background-color: #158072;}

  .page-members-sign-up .column-left label.sex-box { margin: 0.5vw 1vw 0.5vw 0; padding: 0.5vw 1vw; color: #000; font-size: 1.1vw; background-color: #fff; box-sizing: border-box;}
  .page-members-sign-up .column-left input.style-3 { width: 15vw; margin: 0.5vw 0; padding: 0.5vw 1vw; color: #000; font-size: 1.2vw; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .page-members-sign-up .column-left input[type=button].style-1 { width: calc(50% - 2.25vw - 15vw); margin: 0.5vw 1vw 0.5vw 0; padding: 0.5vw 1vw; color: #000; font-size: 1.2vw; border: 0; background-color: #ccc; box-sizing: border-box; cursor: pointer;}
  .page-members-sign-up .column-left input[type=button].style-2 { width: calc(50% - 2.25vw - 15vw); margin: 0.5vw 1vw 0.5vw 0; padding: 0.5vw 1vw; color: #000; font-size: 1.2vw; border: 0; background-color: #ccc; box-sizing: border-box; cursor: pointer;}
  .page-members-sign-up .column-left select.style-full { width: calc(100% - 2.75vw); margin: 0.5vw 1vw 0.5vw 0; padding: 0.5vw 1vw; color: #000; font-size: 1.2vw; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}


  .page-members-order { clear: both; width: 80%; margin: 3vw auto; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-members-order .mem-order-table { width: 100%; margin: 0 0 4vw 0;}
  .page-members-order .mem-order-table .caption-full { width: 100%; font-size: 1.1vw; border-bottom: 1px #000 solid; display: flex; justify-content: flex-start; align-items: center;}
  .page-members-order .mem-order-table .caption-full .caption-1 { width: 15%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .caption-full .caption-2 { width: 15%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .caption-full .caption-3 { width: 10%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .caption-full .caption-4 { width: 10%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .caption-full .caption-5 { width: 30%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .caption-full .caption-6 { width: 10%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .caption-full .caption-7 { width: 10%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .column-full { width: 100%; font-size: 1.1vw; font-weight: 300; border-bottom: 1px #ccc dashed; display: flex; justify-content: flex-start; align-items: center;}
  .page-members-order .mem-order-table .column-full .column-1 { width: 15%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .column-full .column-2 { width: 15%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .column-full .column-3 { width: 10%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .column-full .column-4 { width: 10%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .column-full .column-5 { width: 30%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .column-full .column-6 { width: 10%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .column-full .column-7 { width: 10%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .column-full .column-7 a { width: 4vw; padding: 0.2vw 0; color: #fff; font-size: 1vw; font-weight: 300; text-align: center; text-decoration: none; border-radius: 0.5vw; background-color: #eaa61e; display: block;}


  .page-members-reward { clear: both; width: 80%; margin: 3vw auto; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-members-reward .discount-code { width: 100%;}
  .page-members-reward .discount-code .title-text { width: 100%; margin: 0 0 1vw 0; font-size: 1.6vw; font-weight: 500;}
  .page-members-reward .discount-code .title-text span.small { color: #333; font-size: 1.2vw; font-weight: 400;}
  .page-members-reward .discount-code input[type=text] { width: 60vw; padding: 0.5vw 1vw; color: #000; font-size: 1.2vw; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .page-members-reward .discount-code input[type=button] { width: 8vw; padding: 0.5vw 1vw; margin: 0 0 0 1vw; color: #000; font-size: 1.2vw; border: 0; background-color: #ccc; box-sizing: border-box; cursor: pointer;}

  .page-members-reward .reward-table { width: 100%; margin: 3vw 0;}
  .page-members-reward .reward-table .caption-full { width: 100%; font-size: 1.1vw; font-weight: 500; border-top: 1px #ccc solid; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: center;}
  .page-members-reward .reward-table .caption-full .caption-1 { width: 13%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-reward .reward-table .caption-full .caption-2 { width: 12%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-reward .reward-table .caption-full .caption-3 { width: 15%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-reward .reward-table .caption-full .caption-4 { width: 15%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-reward .reward-table .caption-full .caption-5 { width: 15%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-reward .reward-table .caption-full .caption-6 { width: 15%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-reward .reward-table .caption-full .caption-7 { width: 15%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-reward .reward-table .column-full { width: 100%; font-size: 1.1vw; font-weight: 300; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: center;}
  .page-members-reward .reward-table .column-full:nth-child(even) { background-color: #eee;}
  .page-members-reward .reward-table .column-full .column-1 { width: 13%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-reward .reward-table .column-full .column-2 { width: 12%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-reward .reward-table .column-full .column-3 { width: 15%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-reward .reward-table .column-full .column-4 { width: 15%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-reward .reward-table .column-full .column-5 { width: 15%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-reward .reward-table .column-full .column-6 { width: 15%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-reward .reward-table .column-full .column-7 { width: 15%; padding: 0.5vw; box-sizing: border-box;}


  .page-members-exchange { clear: both; width: 80%; margin: 3vw auto; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-members-exchange .exchange-table { width: 100%; margin: 3vw 0;}
  .page-members-exchange .exchange-table .caption-full { width: 100%; font-size: 1.1vw; font-weight: 500; border-top: 1px #ccc solid; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: center;}
  .page-members-exchange .exchange-table .caption-full .caption-1 { width: 13%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-exchange .exchange-table .caption-full .caption-2 { width: 13%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-exchange .exchange-table .caption-full .caption-3 { width: 22%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-exchange .exchange-table .caption-full .caption-4 { width: 13%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-exchange .exchange-table .caption-full .caption-5 { width: 13%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-exchange .exchange-table .caption-full .caption-6 { width: 26%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-exchange .exchange-table { width: 100%; margin: 3vw 0;}
  .page-members-exchange .exchange-table .column-full { width: 100%; font-size: 1.1vw; font-weight: 300; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: center;}
  .page-members-exchange .exchange-table .column-full:nth-child(even) { background-color: #eee;}
  .page-members-exchange .exchange-table .column-full .column-1 { width: 13%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-exchange .exchange-table .column-full .column-2 { width: 13%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-exchange .exchange-table .column-full .column-3 { width: 22%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-exchange .exchange-table .column-full .column-4 { width: 13%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-exchange .exchange-table .column-full .column-5 { width: 13%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-exchange .exchange-table .column-full .column-6 { width: 26%; padding: 0.5vw; box-sizing: border-box;}


  /************ page-reserve-con ************/

  section#page-reserve { clear: both; width: 100%; padding: 4.5vw 0 6vw 0; box-sizing: border-box; background-image: url("../images/index_about_bg.jpg"); background-repeat: no-repeat; background-size: cover;}  

  .page-reserve-title { width: 100%; margin: 2.5vw 0; text-align: center;}
  .page-reserve-title span.title-b { color: #a5a5a5; font-size: 8vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 8vw;}
  .page-reserve-title span.title-s { padding: 0.2vw 1.5vw; margin: 0 0 0 4vw; color: #fff; font-size: 2.2vw; font-weight: 700; line-height: 2.2vw; background-color: #991e23;}

  .page-reserve-con { clear: both; width: 50vw; margin: 0 auto; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-reserve-con .caption { width: 100%; margin: 0 0 0.5vw 0; font-size: 1.4vw;}
  .page-reserve-con .caption span.must-star { color: #991e23;}
  .page-reserve-con .column { width: 100%; padding: 0 0 0 1.4vw; margin: 0 0 1.5vw 0; font-size: 1.4vw; box-sizing: border-box;}
  .page-reserve-con .column input[type=text].style-1, 
  .page-reserve-con .column input[type=tel] { width: 100%; padding: 0.5vw; font-size: 1.4vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-bottom: 1px #000 solid; background-color: transparent; box-sizing: border-box;}
  .page-reserve-con .column input[type=text].style-2 { width: 50vw; padding: 0.5vw; font-size: 1.4vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-bottom: 1px #000 solid; background-color: transparent; box-sizing: border-box;}
  .page-reserve-con .column input[type=radio], 
  .page-reserve-con .column input[type=checkbox] { width: 1.2vw; height: 1.2vw; margin: 0 0.5vw 0 0;}
  .page-reserve-con input[type=submit], 
  .page-reserve-con input[type=button] { padding: 0.3vw 2vw; margin: 2vw 0 0 0; color: #fff; font-size: 1.4vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 0.6vw; background-color: #971e23; cursor: pointer;}

  .page-reserve-con .notice-text { width: 100%; padding: 0.5vw 0; color: #991e23; font-size: 1.2vw;}


  /************ section #sitemap ************/

  section#page-sitemap { clear: both; width: 100%; padding: 8vw; box-sizing: border-box; background-image: url("../images/index_service_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto;}

  .page-sitemap-title { width: 100%; margin: 2.5vw 0; text-align: center;}
  .page-sitemap-title span.title-b { color: #a5a5a5; font-size: 8vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 8vw;}
  .page-sitemap-title span.title-s { padding: 0.2vw 1.5vw; color: #fff; font-size: 2.2vw; font-weight: 700; line-height: 2.2vw; background-color: #991e23;}

  ul.page-sitemap-list { clear: both; width: 100%; padding: 0; margin: 8vw 0 0 0; list-style: none; display: flex; justify-content: center; align-items: flex-start;}
  ul.page-sitemap-list li { padding: 0; margin: 0.5vw 1vw;}
  ul.page-sitemap-list li a { color: #000; font-size: 1.4vw; text-decoration: none;}
  ul.page-sitemap-list li a:hover { border-bottom: 1px #000 solid;}



  .page-error404-con { clear: both; width: 100%; padding: 8vw 0 0 0; text-align: center;}
  .page-error404-con span.text-error { font-size: 2vw; font-weight: 500;}
  .page-error404-con a { color: #000; font-size: 1.4vw; border-bottom: 1px #000 solid; text-decoration: none;}
  .page-error404-con a:hover { color: #991e23; border-bottom: 1px #971e23 solid;}


  /************ section #footer-pre-order ************/

  section#footer-pre-order { clear: both; width: 100%; height: 21vw; overflow: hidden; position: relative;}

  img.footer-pre-order-bg { width: 100%; height: auto;}

  img.footer-pre-order-bt { width: 28vw; height: auto; position: absolute; top: 4.5vw; right: calc(50% - 34vw);}


  /************ footer ************/

  footer { clear: both; width: 100%; background-color: #000; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .footer-logo { width: 22.5vw; padding: 2vw 0; background-color: #158072; display: flex; justify-content: center; align-items: center;}
  .footer-logo img { width: 19vw; height: auto;}

  .footer-nav-infor { width: calc(100% - 22.5vw);}
  .footer-nav-infor ul.footer-nav { width: 100%; padding: 1.2vw 0 1.2vw 2.5vw; margin: 0; list-style: none; border-bottom: 2px #eba71e solid; display: flex; justify-content: flex-start; align-items: center; box-sizing: border-box;}
  .footer-nav-infor ul.footer-nav li { padding: 0 1vw; margin: 0;}
  .footer-nav-infor ul.footer-nav li a { color: #fff; font-size: 1.1vw; font-weight: 300; text-decoration: none; transition: 0.5s;}
  .footer-nav-infor ul.footer-nav li a:hover { color: #ccc;}
  .footer-nav-infor .footer-infor { width: 100%; padding: 1vw 0 1vw 4vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  .footer-nav-infor .footer-infor .infor-text { width: 48vw; color: #fff; font-size: 1.2vw;}
  .footer-nav-infor .footer-infor .social-icons { width: 9vw; display: flex; justify-content: flex-end; align-items: center;}
  .footer-nav-infor .footer-infor .social-icons img.icon { width: 3.8vw; height: auto; margin: 0 0 0 0.2vw;}

  .footer-copyright { clear: both; width: 100%; padding: 0.5vw 0; color: #fff; font-size: 1.1vw; font-weight: 300; text-align: center; background-color: #991e23;}

}

@media screen and (min-width: 768px) and (max-width: 1023px) {

  /************ aside ************/

  aside { width: 6vw; position: fixed; top: 35vw; right: 0; z-index: 999;}
  aside .aside-bt-box { width: 100%;}
  aside .aside-bt-box a.tel { width: 6vw; height: 6vw; color: #fff; font-size: 3.4vw; background-color: #991e23; display: flex; justify-content: center; align-items: center;}
  aside .aside-bt-box a.order { width: 6vw; height: 6vw; color: #fff; font-size: 4vw; background-color: #eaa61e; display: flex; justify-content: center; align-items: center;}
  aside .aside-bt-box a.line { width: 6vw; height: 6vw; color: #fff; font-size: 4vw; background-color: #158072; display: flex; justify-content: center; align-items: center;}


  /************ header + nav ************/

  header { width: 100%; height: 10vw; padding: 0 4vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; position: fixed; top: 0; left: 0; z-index: 9999;}

  .header-logo { width: 36vw;}
  .header-logo img.logo { width: 36vw; height: auto;}

  nav#pc { display: none;}
  nav#mo { width: calc(100% - 30vw);}
  nav#mo .nav-icon { width: 5vw; font-size: 5vw; text-align: center; float: right;}
  nav#mo ul.nav-menu { width: 100%; padding: 6vw; margin: 0; box-sizing: border-box; background-color: #158072; list-style: none; display: none; position: absolute; top: 10vw; left: 0; z-index: 9999;}
  nav#mo ul.nav-menu li { padding: 0; margin: 0;}
  nav#mo ul.nav-menu li a { width: 100%; padding: 1.5vw 0; color: #fff; font-size: 3vw; text-align: center; text-decoration: none; display: flex; justify-content: center; align-items: center; position: relative; transition: 0.3s;}
  nav#mo ul.nav-menu li a:active { color: #000; background-color: rgba(255,255,255,0.5);}

  .header-icons { display: none;}
  .header-icons-mo { width: 100%; margin: 4vw 0 0 0; display: flex; justify-content: center; align-items: center;}
  .header-icons-mo a { width: 6vw; margin: 0 2vw; text-decoration: none; display: block; position: relative;}
  .header-icons-mo a img.icon { width: 100%; height: auto; position: relative; z-index: 1;}
  .header-icons-mo a .shopping-num { width: 3vw; height: 3vw; color: #fff; font-size: 1.8vw; line-height: 1.8vw; display: flex; justify-content: center; align-items: center; border-radius: 100%; background-color: #971e23; position: absolute; top: -0.6vw; right: -0.6vw; z-index: 2;}


  /************ section #index-banner ************/

  section#index-banner { clear: both; width: 100%; padding: 10vw 0 0 0; position: relative; z-index: 1;}

  .index-banner-box { clear: both; width: 100%; position: relative;}
  .index-banner-box .banner-arrow-prev img.arrow-prev { width: 2vw; height: auto; position: absolute; top: 20vw; left: 40px; z-index: 2; cursor: pointer;}
  .index-banner-box .banner-arrow-next img.arrow-next { width: 2vw; height: auto; position: absolute; top: 20vw; right: 40px; z-index: 2; cursor: pointer;}
  .index-banner-box img { width: 100%; height: auto; position: relative; z-index: 1;}


  /************ section #index-about ************/

  section#index-about { clear: both; width: 100%; padding: 4vw 0 6vw 6vw; box-sizing: border-box; background-image: url("../images/index_about_bg.jpg"); background-repeat: no-repeat; background-size: cover;}

  .index-about-title { width: 100%; position: relative; z-index: 1;}
  .index-about-title span.title-b { color: rgba(255,255,255,0.8); font-size: 12vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 14vw;}
  .index-about-title span.title-s { padding: 0.2vw 1.5vw; color: #fff; font-size: 4vw; font-weight: 700; line-height: 2.2vw; background-color: #991e23;}

  .index-about-content { width: 100%; display: flex; justify-content: flex-start; align-items: flex-start; position: relative; z-index: 2;}
  .index-about-content .column-lf-text { width: 40%; padding: 0 9vw 0 0; margin: 1.5vw 0 0 0; box-sizing: border-box;}
  .index-about-content .column-lf-text .text-bigger { width: 100%; font-size: 1.8vw; font-weight: 500; line-height: 2.8vw; letter-spacing: 0.1em;}
  .index-about-content .column-lf-text .text-smaller { width: 100%; margin: 1.5vw 0 0 0; font-size: 1.6vw; font-weight: 300; line-height: 2.4vw; letter-spacing: 0.1em;}
  .index-about-content .column-lf-text img.more-bt { clear: both; width: 22vw; height: auto; margin: 5vw 0 0 0;}
  .index-about-content .column-rt-pics { width: 60%;}
  .index-about-content .column-rt-pics img.photo-1 { width: 100%; height: auto; margin: -3vw 0 0 0; position: relative; z-index: 2;}
  .index-about-content .column-rt-pics img.photo-2 { width: 30vw; height: auto; margin: -3.8vw 0 0 -7vw; position: relative; z-index: 1;}


  .index-about-content .column-lf-text img.photo-3 { width: 30vw; height: auto; margin: 3vw 0 0 0; position: relative; z-index: 1;}


  /************ section #index-news ************/

  section#index-news { clear: both; width: 100%; padding: 6vw 4vw; box-sizing: border-box; background-color: #fff;}

  .index-news-title { width: 84%; margin: 0 auto; text-align: center; position: relative; z-index: 1;}
  .index-news-title span.title-b { color: rgba(165,165,165,0.8); font-size: 12vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 14vw;}
  .index-news-title span.title-s { padding: 0.2vw 1.5vw; margin: 0 40vw 0 0; color: #fff; font-size: 4vw; font-weight: 700; line-height: 2.2vw; background-color: #991e23;}
  .index-news-title img.more-bt { width: 22vw; height: auto; position: absolute; bottom: 0; right: 10vw;}

  .index-news-list { clear: both; width: 100%; margin: 6vw 0 0 0; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .index-news-list .news-box { width: calc(100% / 2 - 3vw); margin: 0 1.5vw 3vw 1.5vw;}
  .index-news-list .news-box a { width: 100%; height: 100%; padding: 0.5vw; text-decoration: none; border: 1px #fff solid; box-sizing: border-box; display: block; transition: 0.5s;}
  .index-news-list .news-box a:hover { border: 1px #ccc solid;}
  .index-news-list .news-box .news-pic { width: 100%;}
  .index-news-list .news-box .news-pic img { width: 100%; height: auto;}
  .index-news-list .news-box .news-date { width: 100%; padding: 1vw 0.5vw; box-sizing: border-box;}
  .index-news-list .news-box .news-date span.date { padding: 0 1vw; color: #000; font-size: 1.8vw; border-radius: 1vw; background-color: #eaa61e;}
  .index-news-list .news-box .news-title { width: 100%; padding: 0 0.5vw; color: #000; font-size: 2vw; line-height: 3vw; letter-spacing: 0.1em; box-sizing: border-box;}



  ul.page-news-list-pagenum { clear: both; width: 100%; padding: 0; margin: 3vw 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  ul.page-news-list-pagenum li { padding: 0; margin: 0 0.5vw 2vw 0.5vw;}
  ul.page-news-list-pagenum li a { padding: 0.5vw; color: #eaa61e; font-size: 1.8vw; border: 1px #fff solid; text-decoration: none; display: block;}
  ul.page-news-list-pagenum li a:hover { border: 1px #eaa61e solid;}
  ul.page-news-list-pagenum li a.sel { color: #000; background-color: #eaa61e; border: 1px #eaa61e solid;}



  .page-news-content { clear: both; width: 100%; padding: 2vw 0 0 0; margin: 3vw 0 0 0; border-top: 1px #ccc solid; border-bottom: 1px #ccc solid;}
  .page-news-content .news-title { width: 100%; font-size: 2.4vw; font-weight: 500; line-height: 4vw; text-align: center;}
  .page-news-content .news-date { width: 100%; padding: 1vw 0 0 0; text-align: center;}
  .page-news-content .news-date span.date { padding: 0 1vw; color: #000; font-size: 1.6vw; border-radius: 1vw; background-color: #eaa61e;}
  .page-news-content .news-content { width: 100%; padding: 3vw; font-size: 1.8vw; line-height: 3.6vw; box-sizing: border-box;}
  .page-news-content .news-content a { color: #000; border-bottom: 1px #000 solid; text-decoration: none;}
  .page-news-content .news-content a:hover { color: #eaa61e; border-bottom: 1px #eaa61e solid;}
  .page-news-content .news-content img { clear: both; max-width: 100%; height: auto;}


  /************ section #index-service ************/

  section#index-service { clear: both; width: 100%; padding: 6vw 0 8vw 0; box-sizing: border-box; background-image: url("../images/index_service_bg.jpg"); background-repeat: no-repeat; background-size: cover; position: relative; z-index: 2;}

  .index-service-title { width: 100%; padding: 0 0 0 4vw; box-sizing: border-box; display: flex; align-items: center; position: relative; z-index: 1;}
  .index-service-title span.title-b { color: #a5a5a5; font-size: 12vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 14vw;}
  .index-service-title span.title-s { padding: 0.5vw 1.5vw; color: #fff; font-size: 4vw; font-weight: 700; line-height: 5vw; background-color: #991e23;}

  .index-service-item-1 { clear: both; width: 100%; margin: 2.5vw 0 7vw 0; position: relative;}
  .index-service-item-1 .service-item-bg { width: 72vw; height: 24vw; padding: 4vw 0 0 4vw; box-sizing: border-box; background-color: #f5b11e; position: relative; z-index: 1;}
  .index-service-item-1 .service-item-bg .bigger { width: 34vw; color: #000; font-size: 3vw; font-weight: 500; letter-spacing: 0.1em;}
  .index-service-item-1 .service-item-bg .smaller { width: 34vw; color: #000; font-size: 2vw; font-weight: 300; line-height: 3vw; letter-spacing: 0.1em;}
  .index-service-item-1 .service-item-bg .more-bt { width: 34vw; margin: 2vw 0 0 0;}
  .index-service-item-1 .service-item-bg .more-bt img { width: 22vw; height: auto;}
  .index-service-item-1 img.service-item-pic { width: 52vw; height: auto; position: absolute; top: 4vw; right: 4vw; z-index: 2;}

  .index-service-item-2 { clear: both; width: 100%; margin: 2.5vw 0 5vw 0; position: relative; display: flex; justify-content: flex-end;}
  .index-service-item-2 .service-item-bg { width: 72vw; height: 35vw; padding: 4vw 0 0 34.2vw; box-sizing: border-box; background-color: #a21e23; position: relative; z-index: 1;}
  .index-service-item-2 .service-item-bg .bigger { width: 34vw; color: #fff; font-size: 3vw; font-weight: 500; letter-spacing: 0.1em;}
  .index-service-item-2 .service-item-bg .smaller { width: 34vw; color: #fff; font-size: 2vw; font-weight: 300; line-height: 3vw; letter-spacing: 0.1em;}
  .index-service-item-2 .service-item-bg .more-bt { width: 34vw; margin: 2vw 0 0 0;}
  .index-service-item-2 .service-item-bg .more-bt img { width: 22vw; height: auto;}
  .index-service-item-2 img.service-item-pic { width: 52vw; height: auto; position: absolute; top: 4vw; left: 4vw; z-index: 2;}

  .index-service-item-3 { clear: both; width: 100%; margin: 2.5vw 0 5vw 0; position: relative;}
  .index-service-item-3 .service-item-bg { width: 72vw; height: 30vw; padding: 4vw 0 0 4vw; margin: 0 0 0 4vw; box-sizing: border-box; background-color: #158872; position: relative; z-index: 1;}
  .index-service-item-3 .service-item-bg .bigger { width: 30vw; color: #fff; font-size: 3vw; font-weight: 500; letter-spacing: 0.1em;}
  .index-service-item-3 .service-item-bg .smaller { width: 30vw; color: #fff; font-size: 2vw; font-weight: 300; line-height: 3vw; letter-spacing: 0.1em;}
  .index-service-item-3 .service-item-bg .more-bt { width: 30vw; margin: 2vw 0 0 0;}
  .index-service-item-3 .service-item-bg .more-bt img { width: 22vw; height: auto;}
  .index-service-item-3 img.service-item-pic { width: 52vw; height: auto; position: absolute; top: 4vw; right: 4vw; z-index: 2;}

  img.index-reviews-order { width: 36vw; height: auto; position: absolute; bottom: -8vw; left: calc(50% - 18vw);}


  /************ section #index-reviews ************/

  section#index-reviews { clear: both; width: 100%; padding: 24vw 0 6vw 0; box-sizing: border-box; background-color: #4d4d4d; background-image: url("../images/index_reviews_bg.jpg"); background-repeat: no-repeat; background-size: cover; position: relative; z-index: 1;}

  .index-reviews-title { width: 100%; text-align: center;}
  .index-reviews-title span.title-b { color: rgba(255,255,255,0.5); font-size: 12vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 14vw;}
  .index-reviews-title span.title-s { padding: 0.2vw 1.5vw; color: #fff; font-size: 4vw; font-weight: 700; line-height: 2.2vw; background-color: #991e23;}

  .index-reviews-text { clear: both; width: 100%; color: #fff; font-size: 2vw; font-weight: 300; letter-spacing: 0.1em; text-align: center;}

  .index-reviews-list { clear: both; width: 90vw; margin: 4vw auto 0 auto;}
  .index-reviews-list .reviews-box { width: calc(100% - 3vw); margin: 0 1.5vw; padding: 2vw; box-sizing: border-box; background-color: #eba71e;}
  .index-reviews-list .reviews-box .icon { width: 100%; margin: 0 0 2vw 0; color: #fff; font-size: 3vw; text-align: center;}
  .index-reviews-list .reviews-box .text { width: 100%; color: #000; font-size: 1.8vw; line-height: 3vw;}

  .index-reviews-list .slick-arrow { clear: both; width: 100%; margin: 4vw 0 0 0; display: flex; justify-content: center; align-items: center;}
  .index-reviews-list .slick-arrow img.reviews-slick-arrow-prev, 
  .index-reviews-list .slick-arrow img.reviews-slick-arrow-next { width: 2vw; height: auto; margin: 0 3vw; cursor: pointer;}


  /************ section #index-knowledge ************/

  section#index-knowledge { clear: both; width: 100%; padding: 6vw 0 6vw 6vw; box-sizing: border-box; background-image: url("../images/index_knowledge_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center center;}

  .index-knowledge-title { width: 100%; position: relative; z-index: 1;}
  .index-knowledge-title span.title-b { color: rgba(165,165,165,0.8); font-size: 12vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 14vw;}
  .index-knowledge-title span.title-s { padding: 0.2vw 1.5vw; color: #fff; font-size: 4vw; font-weight: 700; line-height: 2.2vw; background-color: #158072;}

  ul.index-knowledge-list { clear: both; width: 38vw; padding: 0; margin: 2vw 0 0 0; box-sizing: border-box; list-style: none; display: block;}
  ul.index-knowledge-list li { width: 100%; padding: 2vw 0; margin: 0; color: #000; border-bottom: 1px #8b8b8b solid;}
  ul.index-knowledge-list li a { width: 100%; color: #333; font-size: 2vw; text-decoration: none; display: flex; justify-content: flex-start; align-items: flex-start; transition: 0.5s;}
  ul.index-knowledge-list li a:hover { color: #158872;}
  ul.index-knowledge-list li a .num { width: 4vw;}
  ul.index-knowledge-list li a .title { width: calc(100% - 4vw);}

  img.index-knowledge-more-bt { clear: both; width: 22vw; height: auto; margin: 5vw 0 0 0;}



  ul.page-knowledge-pagenum { clear: both; width: 38vw; padding: 0; margin: 3vw 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  ul.page-knowledge-pagenum li { padding: 0; margin: 0 0.5vw 2vw 0.5vw;}
  ul.page-knowledge-pagenum li a { padding: 0.5vw; color: #158872; font-size: 1.8vw; border: 1px transparent solid; text-decoration: none; display: block;}
  ul.page-knowledge-pagenum li a:hover { border: 1px #158872 solid;}
  ul.page-knowledge-pagenum li a.sel { color: #fff; background-color: #158872; border: 1px #158872 solid;}



  section#page-knowledge { clear: both; width: 100%; padding: 4.5vw 6vw 6vw 6vw; box-sizing: border-box; background-image: url("../images/page_knowledge_bg.jpg"); background-repeat: no-repeat; background-size: cover;}

  .page-knowledge-content { clear: both; width: 100%; margin: 3vw 0 0 0;}
  .page-knowledge-content .knowledge-title { width: 100%; padding: 0 0 0.5vw 0; font-size: 2.4vw; font-weight: 500; border-bottom: 1px #000 solid; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-knowledge-content .knowledge-title .num { width: 4vw;}
  .page-knowledge-content .knowledge-title .title { width: calc(100% - 4vw);}
  .page-knowledge-content .knowledge-content { width: 100%; padding: 1vw 0; font-size: 2vw; line-height: 3vw;}
  .page-knowledge-content .knowledge-content img { clear: both; max-width: 100%; height: auto;}


  /************ section #index-shopping ************/

  section#index-shopping { clear: both; width: 100%; padding: 6vw 0 2.5vw 0; box-sizing: border-box;}

  .index-shopping-title { width: 100%; display: flex; justify-content: center; align-items: center;}
  .index-shopping-title span.title-b { color: rgba(165,165,165,0.8); font-size: 12vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 14vw;}
  .index-shopping-title span.title-s { padding: 0.5vw 1.5vw; color: #fff; font-size: 4vw; font-weight: 700; line-height: 5vw; background-color: #991e23;}

  .index-shopping-list { clear: both; width: 100%;}
  .index-shopping-list ul.shopping-sort-tab { clear: both; width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: center;}
  .index-shopping-list ul.shopping-sort-tab li { padding: 0 1vw; margin: 0; font-size: 2.8vw; font-weight: 500; letter-spacing: 0.1em;}
  .index-shopping-list ul.shopping-sort-tab li a { padding: 0.4vw 1.5vw; color: #000; text-decoration: none; display: block;}
  .index-shopping-list ul.shopping-sort-tab li a:hover { background-color: #eee;}
  .index-shopping-list ul.shopping-sort-tab li a.sel { background-color: #eba71e;}

  .index-shopping-list .shopping-pro-list { clear: both; width: 100%;}
  .index-shopping-list .shopping-pro-list .shopping-pro-con { clear: both; width: 100%;}
  .index-shopping-list .shopping-pro-list .shopping-pro-con .pro-list-full { width: 100%; padding: 6vw 0 2vw 0; background-color: #eba71e;}
  .index-shopping-list .shopping-pro-list .shopping-pro-con .pro-list-full .pro-list-box { width: auto;}
  .index-shopping-list .shopping-pro-list .shopping-pro-con .pro-list-full .pro-list-box a { width: 100%; height: 100%; text-decoration: none; display: block;}
  .index-shopping-list .shopping-pro-list .shopping-pro-con .pro-list-full .pro-list-box .pro-pic { width: 100%;}
  .index-shopping-list .shopping-pro-list .shopping-pro-con .pro-list-full .pro-list-box .pro-pic img { width: auto; height: 26vw;}
  .index-shopping-list .shopping-pro-list .shopping-pro-con .pro-list-full .pro-list-box .pro-name { width: 100%; padding: 0.5vw 0 0 0; color: #000; font-size: 2vw; font-weight: 300; letter-spacing: 0.1em; text-align: center;}
  .index-shopping-list .shopping-pro-list .shopping-pro-con .pro-list-full .pro-list-box .pro-price { width: 100%; color: #fff; font-size: 2.6vw; text-align: center;}
  .index-shopping-list .shopping-pro-list .shopping-pro-con .pro-list-arrow { clear: both; width: 100%; padding: 3vw 0; display: flex; justify-content: center; align-items: center; position: relative;}
  .index-shopping-list .shopping-pro-list .shopping-pro-con .pro-list-arrow img.pro-list-arrow-prev, 
  .index-shopping-list .shopping-pro-list .shopping-pro-con .pro-list-arrow img.pro-list-arrow-next { width: 2vw; height: auto; margin: 0 3vw; cursor: pointer;}
  
  img.index-shopping-more-bt { width: 22vw; height: auto; position: absolute; top: 3.4vw; right: 8vw;}


  /** 20240520修改 **/
  .page-prod-list-full { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-prod-list-full .prod-box { width: calc(100% / 3 - 1vw); margin: 0 0.5vw 1vw 0.5vw;}
  .page-prod-list-full .prod-box a { width: 100%; padding: 0.2vw; border: 1px #fff solid; box-sizing: border-box; text-decoration: none; display: block;}
  .page-prod-list-full .prod-box .prod-pic { width: 100%;}
  .page-prod-list-full .prod-box .prod-pic img { width: 100%; height: auto;}
  .page-prod-list-full .prod-box .prod-name { width: 100%; padding: 0.5vw 0 0 0; color: #000; font-size: 1.6vw; font-weight: 300; letter-spacing: 0.1em; text-align: center;}
  .page-prod-list-full .prod-box .prod-price { width: 100%; color: #a21e23; font-size: 2.4vw; text-align: center;}
  .page-prod-list-full .prod-box a:hover { border: 1px #ccc solid;}


  ul.page-pro-pagenum { clear: both; width: 100%; padding: 0; margin: 3vw 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  ul.page-pro-pagenum li { padding: 0; margin: 0 0.5vw 2vw 0.5vw;}
  ul.page-pro-pagenum li a { padding: 0.5vw; color: #eaa61e; font-size: 1.8vw; border: 1px #fff solid; text-decoration: none; display: block;}
  ul.page-pro-pagenum li a:hover { border: 1px #eaa61e solid;}
  ul.page-pro-pagenum li a.sel { color: #fff; background-color: #eaa61e; border: 1px #eaa61e solid;}


  /************ section #page-banner ************/

  section#page-banner { width: 100%; padding: 10vw 0 0 0; background-image: url("../images/header_banner_bg.png"); background-repeat: no-repeat; background-size: 56% auto; background-position: left top; overflow: hidden; position: relative; z-index: 1;}

  img.page-banner { clear: both; width: 140%; height: auto; margin: 0 0 0 -15%;}

  #breadcrumbs-bar { clear: both; width: 100%; padding: 1vw 0 1vw 13vw; box-sizing: border-box; color: #333; font-size: 1.4vw;}
  #breadcrumbs-bar a { color: #333; text-decoration: none;}
  #breadcrumbs-bar a:hover { border-bottom: 1px #333 solid;}


  /************ section #about-HTL ************/

  section#about-HTL { clear: both; width: 100%; padding: 3vw 0 0 0;}

  .about-HTL-title { width: 100%; text-align: center; position: relative; z-index: 1;}
  .about-HTL-title span.title-b { color: #d7d7d7; font-size: 12vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 12vw;}
  .about-HTL-title span.title-s { padding: 0.2vw 1.5vw; color: #fff; font-size: 4vw; font-weight: 700; line-height: 5vw; background-color: #991e23;}

  .about-HTL-col-1 { clear: both; width: 100%; margin: 2vw 0; display: flex; justify-content: flex-start; align-items: stretch;}
  .about-HTL-col-1 .col-color { width: 50%;}
  .about-HTL-col-1 .col-color div { width: 34vw; height: 24vw; margin: 0 1vw 0 0; background-color: #158072; display: block; float: right;}
  .about-HTL-col-1 .col-text { width: 50%; height: 24vw; border-bottom: 1px #a4a4a4 solid; display: flex; align-items: center;}
  .about-HTL-col-1 .col-text div { width: 34vw; padding: 0 2.8vw; box-sizing: border-box; font-size: 1.6vw; line-height: 2.6vw;}
  .about-HTL-col-1 .col-text div span.title { font-size: 3vw; font-weight: 500;}

  .about-HTL-col-2 { clear: both; width: 100%; margin: 2vw 0; display: flex; justify-content: flex-start; align-items: stretch;}
  .about-HTL-col-2 .col-text { width: calc(50% - 1vw); height: 24vw; margin: 0 1vw 0 0; border-bottom: 1px #a4a4a4 solid; display: flex; justify-content: flex-end; align-items: center;}
  .about-HTL-col-2 .col-text div { width: 34vw; padding: 0 2.8vw; box-sizing: border-box; font-size: 1.6vw; line-height: 2.6vw;}
  .about-HTL-col-2 .col-text div span.title { font-size: 3vw; font-weight: 500;}
  .about-HTL-col-2 .col-color { width: 50%;}
  .about-HTL-col-2 .col-color div { width: 100%; height: 24vw; background-color: #eaa61e; display: block;}

  .about-HTL-col-3 { clear: both; width: 100%; margin: 2vw 0; display: flex; justify-content: flex-start; align-items: stretch;}
  .about-HTL-col-3 .col-color { width: 50%;}
  .about-HTL-col-3 .col-color div { width: 34vw; height: 24vw; margin: 0 1vw 0 0; background-color: #981e23; display: block; float: right;}
  .about-HTL-col-3 .col-text { width: 50%; height: 24vw; border-bottom: 1px #a4a4a4 solid; display: flex; align-items: center;}
  .about-HTL-col-3 .col-text div { width: 34vw; padding: 0 2.8vw; box-sizing: border-box; font-size: 1.6vw; line-height: 2.6vw;}
  .about-HTL-col-3 .col-text div span.title { font-size: 3vw; font-weight: 500;}

  .about-HTL-col-4 { clear: both; width: 100%; padding: 5.5vw 0 6vw 0; margin: 2vw 0 0 0; background-image: url("../images/about_HTL_col_4_bg.jpg"); background-repeat: no-repeat; background-size: calc(50% - 1vw) auto; background-position: left top; display: flex; justify-content: center; align-items: center;}
  .about-HTL-col-4 img.logo { width: 22vw; height: auto; margin: 0 2.3vw 0 0;}
  .about-HTL-col-4 .col-text { width: 34vw; font-size: 2vw; font-weight: 500; line-height: 3.2vw;}
  .about-HTL-col-4 .col-text img { width: 100%; height: auto; margin: 0 0 1vw 0;}


  /************ section #page-service ************/

  section#page-service { clear: both; width: 100%; padding: 4.5vw 0 7vw 0; box-sizing: border-box; background-image: url("../images/index_about_bg.jpg"); background-repeat: no-repeat; background-size: cover; position: relative; z-index: 2;}

  .page-service-title { width: 100%; display: flex; justify-content: center; align-items: center; position: relative; z-index: 1;}
  .page-service-title span.title-b { color: #fff; font-size: 12vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 14vw;}
  .page-service-title span.title-s { padding: 0.5vw 1.5vw; color: #fff; font-size: 4vw; font-weight: 700; line-height: 5vw; background-color: #991e23;}

  .page-service-items { clear: both; width: 100%; margin: 3vw 0 0 0; display: flex; justify-content: center; align-items: stretch;}
  .page-service-items .service-item-box { width: 30vw;}
  .page-service-items .service-item-box a { width: 100%; height: 100%; text-decoration: none; display: block;}
  .page-service-items .service-item-box .photo { width: 100%;}
  .page-service-items .service-item-box .photo img { width: 100%; height: auto;}
  .page-service-items .service-item-box .title { width: 100%; padding: 1.2vw 0; font-size: 2vw; font-weight: 500; text-align: center;}
  .page-service-items .service-item-box .title.bg-red { color: #fff; background-color: #981e23;}
  .page-service-items .service-item-box .title.bg-yellow { color: #000; background-color: #eaa61e;}
  .page-service-items .service-item-box .title.bg-green { color: #fff; background-color: #158072;}
  

  section#service-item-list { clear: both; width: 100%; padding: 0 0 3.5vw 11vw; box-sizing: border-box; background-color: #fff;}

  .service-item-intro-more { clear: both; width: 100%; margin: 3.5vw 0 0 0; position: relative;}
  .service-item-intro-more img.service-item-bg { width: 100%; height: auto; position: relative; z-index: 1;}
  .service-item-intro-more .serv-item-con { width: 50vw; padding: 3.5vw 0 0 2.5vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; position: absolute; top: 0; left: 0; z-index: 2;}
  .service-item-intro-more .serv-item-con .col-lf-num { width: 10vw; font-size: 8vw; font-weight: 700; font-family: Arial;}
  .service-item-intro-more .serv-item-con .col-lf-num.color-red { color: #971e23;}
  .service-item-intro-more .serv-item-con .col-lf-num.color-yellow { color: #e9a51e;}
  .service-item-intro-more .serv-item-con .col-lf-num.color-green { color: #158072;}
  .service-item-intro-more .serv-item-con .col-rt-intro { width: calc(100% - 10vw);}
  .service-item-intro-more .serv-item-con .col-rt-intro .title-more { width: 100%; margin: 2.6vw 0 0 0; display: flex; justify-content: space-between; align-items: flex-end;}
  .service-item-intro-more .serv-item-con .col-rt-intro .title-more span.title { font-size: 3.4vw; font-weight: 500; line-height: 3.4vw;}
  .service-item-intro-more .serv-item-con .col-rt-intro .title-more img.more-bt { width: 17vw; height: auto;}
  .service-item-intro-more .serv-item-con .col-rt-intro .text-con { width: 100%; margin: 2vw 0 0 0; padding: 0 2vw 0 0; font-size: 1.4vw; line-height: 2.4vw; box-sizing: border-box;}


  /************ section #page-serv-item ************/

  section#page-serv-item-1 { clear: both; width: 100%; background-image: url(../images/page_service_items_bg.png); background-repeat: repeat-y; background-size: 120% auto; background-position: center top;}

  .page-serv-items-title { width: 100%; padding: 36vw 0 0 calc(50% - 45vw); box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; position: absolute; top: 0; left: 0; z-index: 2;}
  .page-serv-items-title span.title-b { color: #fff; font-size: 12vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 14vw;}
  .page-serv-items-title span.title-s { padding: 0.5vw 1.5vw; color: #fff; font-size: 4vw; font-weight: 700; line-height: 5vw; background-color: #991e23;}

  .page-serv-item-con { clear: both; width: 100%; padding: 2.5vw 0;}
  .page-serv-item-con .content { width: 90vw; margin: 0 auto; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-serv-item-con .content .col-lf-num { width: 12vw; padding: 0 0 0 2vw; font-size: 8vw; font-weight: 700; font-family: Arial; box-sizing: border-box;}
  .page-serv-item-con .content .col-lf-num.color-red { color: #971e23;}
  .page-serv-item-con .content .col-lf-num.color-yellow { color: #e9a51e;}
  .page-serv-item-con .content .col-lf-num.color-green { color: #158072;}
  .page-serv-item-con .content .col-rt-intro { width: calc(100% - 12vw);}
  .page-serv-item-con .content .col-rt-intro .title { width: 100%; margin: 2.6vw 0 0 0; font-size: 4vw; font-weight: 500; line-height: 4vw; display: flex; justify-content: space-between; align-items: flex-end;}
  .page-serv-item-con .content .col-rt-intro .text-con { width: 100%; margin: 2vw 0 0 0; padding: 0 6vw 2.5vw 0; font-size: 2vw; line-height: 3.4vw; box-sizing: border-box;}
  .page-serv-item-con .sub-title { clear: both; width: 93vw; margin: 2vw auto; color: #fff; font-size: 12vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 10vw; text-align: right;}
  .page-serv-item-con .interior { clear: both; width: 100%; margin: 3vw 0 0 0; position: relative;}
  .page-serv-item-con .interior .intro-people { width: 53vw; position: relative; z-index: 1;}
  .page-serv-item-con .interior .intro-people img { width: 100%; height: auto;}
  .page-serv-item-con .interior .intro-text { width: 36vw; position: absolute; top: 4vw; right: calc(50% - 45vw + 5vw); z-index: 2;}
  .page-serv-item-con .interior .intro-text .title { width: 100%; color: #971e23; font-size: 4vw; font-weight: 500; line-height: 6vw; border-bottom: 1px #971e23 solid;}
  .page-serv-item-con .interior .intro-text .intro { width: 100%; padding: 0.5vw 0 1.5vw 0; font-size: 2vw; font-weight: 500; line-height: 2.4vw;}
  .page-serv-item-con .interior .intro-text .infor { width: 100%; font-size: 2vw; line-height: 3vw;}
  .page-serv-item-con .interior .intro-text .infor .name { width: 100%; font-size: 2.4vw; font-weight: 500; line-height: 3vw;}
  .page-serv-item-con .award-exp { clear: both; width: 90vw; padding: 4vw 4.5vw 4vw 4.5vw; margin: 0 auto; box-sizing: border-box;}
  .page-serv-item-con .award-exp .title { width: 100%; color: #971e23; font-size: 4vw; font-weight: 500; line-height: 6vw; text-align: center; border-bottom: 1px #971e23 solid;}
  .page-serv-item-con .award-exp .award-exp-list { width: 100%; padding: 1vw 0 0 0; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-serv-item-con .award-exp .award-exp-list .year { width: 6vw; padding: 0.3vw 0; color: #000; font-size: 2vw; line-height: 3.4vw;}
  .page-serv-item-con .award-exp .award-exp-list .infor { width: calc(100% - 6vw); padding: 0.3vw 0; color: #000; font-size: 2vw; line-height: 3.4vw;}


  section#page-serv-items-works { clear: both; width: 100%;}

  .page-serv-works-title { width: 90vw; margin: 2.5vw auto; color: #971e23; font-size: 4vw; font-weight: 500; line-height: 6vw; text-align: center; border-bottom: 1px #971e23 solid; box-sizing: border-box;}

  .page-serv-works-list { clear: both; width: 100%;}
  .page-serv-works-list img { width: auto; height: 46vw;}

  .page-serv-item-back-bt { clear: both; width: 100%;}
  .page-serv-item-back-bt a { display: block;}
  .page-serv-item-back-bt a img { width: 22vw; height: auto; margin: 2.5vw auto;}


  /** 20240516新增 **/
  .page-serv-works-bt { width: 24vw; margin: 3.5vw auto;}
  .page-serv-works-bt a { width: 100%; padding: 0.5vw 0; color: #fff; font-size: 3vw; text-align: center; text-decoration: none; border-radius: 3vw; background-color: #971e23; display: block;}

  .page-serv-works-list { clear: both; width: 90vw; margin: 0 auto; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .page-serv-works-list img { width: calc(100% / 2 - 1vw); height: auto; margin: 0 0.5vw 1vw 0.5vw;}



  .page-serv-item-con .inspection-steps { clear: both; width: 100%; margin: 3vw 0 0 0; overflow: hidden;}
  .page-serv-item-con .inspection-steps .title-box { width: 70vw; margin: 0 0 4.5vw -16vw; position: relative;}
  .page-serv-item-con .inspection-steps .title-box img.title-bg { width: 100%; height: auto; position: relative; z-index: 1;}
  .page-serv-item-con .inspection-steps .title-box span.title-text { color: #fff; font-size: 4vw; font-weight: 500; border-bottom: 1px #fff solid; position: absolute; top: 2vw; right: 15vw; z-index: 2;}
  .page-serv-item-con .inspection-steps .steps-content { clear: both; width: 64vw; margin: 0 auto;}
  .page-serv-item-con .inspection-steps .steps-content .step-box { clear: both; width: 100%; margin: 0 0 4vw 0; position: relative;}
  .page-serv-item-con .inspection-steps .steps-content .step-box .top-title-bar { width: 100%; display: flex; justify-content: flex-start; align-items: center;}
  .page-serv-item-con .inspection-steps .steps-content .step-box .top-title-bar img.step-icon { width: 7vw; height: auto; margin: 0 1vw 0 0;}
  .page-serv-item-con .inspection-steps .steps-content .step-box .top-title-bar span.step-num { padding: 0 1.5vw; font-size: 2vw; font-weight: 500; line-height: 3vw; border-radius: 0.8vw; background-color: #e9a51e;}
  .page-serv-item-con .inspection-steps .steps-content .step-box .top-title-bar span.step-title { padding: 0 0 0 1vw; font-size: 2vw; font-weight: 500; line-height: 3vw;}
  .page-serv-item-con .inspection-steps .steps-content .step-box .text-con { clear: both; width: 100%; padding: 0 14vw 0 10vw; font-size: 1.8vw; font-weight: 300; line-height: 3vw; box-sizing: border-box;}
  .page-serv-item-con .inspection-steps .steps-content .step-box img.pre-order-bt { width: 16vw; height: auto; position: absolute; top: 0; right: 2vw; z-index: 2;}
  .page-serv-item-con .inspection-steps .steps-content .step-box img.arrow-down { width: 4.5vw; height: auto; position: absolute; top: 8vw; right: 6vw; z-index: 2;}

  section#page-serv-item-2 { clear: both; width: 100%; padding: 6.5vw 0 0 0; overflow: hidden;}

  .inspection-serv-list-title { width: 70vw; margin: 0 0 3.5vw -16vw; position: relative; z-index: 2;}
  .inspection-serv-list-title img.title-bg { width: 100%; height: auto; position: relative; z-index: 1;}
  .inspection-serv-list-title span.title-text { color: #fff; font-size: 4vw; font-weight: 500; border-bottom: 1px #fff solid; position: absolute; top: 2vw; right: 15vw; z-index: 2;}

  .inspection-serv-items-list { clear: both; width: 100%; padding: 7vw calc(50% - 45vw + 8vw) 2vw calc(50% - 45vw + 8vw); margin: -7vw auto 0 auto; box-sizing: border-box; background-image: url(../images/page_service_items_bg.png); background-repeat: repeat-y; background-size: 120% auto; background-position: center top; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; position: relative; z-index: 1;}

  ul.inspection-serv-list { width: 50%; padding: 0 4vw; margin: 0 0 4.5vw 0; box-sizing: border-box; list-style: none; display: block;}
  ul.inspection-serv-list ::marker { content: "● "; font-size: 2.4vw; line-height: 3vw;}
  ul.inspection-serv-list li { width: 100%; padding: 0; margin: 0; font-size: 2.4vw; font-weight: 500; line-height: 3vw;}
  ul.inspection-serv-list li ul.serv-list { width: 100%; padding: 0; margin: 1.5vw 0 0 0; list-style: none; display: block;}
  ul.inspection-serv-list li ul.serv-list ::marker { content: "";}
  ul.inspection-serv-list li ul.serv-list li { width: 100%; padding: 0; margin: 0; font-size: 2vw; font-weight: 300; line-height: 3vw;}



  .page-serv-works-title-green { width: 90vw; margin: 2.5vw auto; color: #158072; font-size: 4vw; font-weight: 500; line-height: 6vw; text-align: center; border-bottom: 1px #158072 solid; box-sizing: border-box;}

  .decoration-steps-list { clear: both; width: 100%; margin: 2vw 0 0 0;}
  .decoration-steps-list .title-box { width: 70vw; margin: 0 0 4.5vw -16vw; position: relative;}
  .decoration-steps-list .title-box img.title-bg { width: 100%; height: auto; position: relative; z-index: 1;}
  .decoration-steps-list .title-box span.title-text { color: #fff; font-size: 4vw; font-weight: 500; border-bottom: 1px #fff solid; position: absolute; top: 2vw; right: 15vw; z-index: 2;}

  .decoration-steps-con { clear: both; width: 90vw; padding: 4vw 0; margin: 0 auto;}
  .decoration-steps-con .steps-list-row-mo { display: none;}
  .decoration-steps-con .steps-list-row { clear: both; width: 100%; margin: 0 0 5vw 0; display: flex; justify-content: center; align-items: center;}
  .decoration-steps-con .steps-list-row .step-box { width: 20vw;}
  .decoration-steps-con .steps-list-row .step-box .top-title-bar { width: 100%; margin: 0 0 1vw 0; text-align: center;}
  .decoration-steps-con .steps-list-row .step-box .top-title-bar span.step-num { padding: 0 1.5vw; color: #fff; font-size: 1.6vw; font-weight: 500; line-height: 2.4vw; border-radius: 0.8vw; background-color: #158072;}
  .decoration-steps-con .steps-list-row .step-box .top-title-bar span.title { font-size: 1.6vw; font-weight: 500; line-height: 2.4vw;}
  .decoration-steps-con .steps-list-row .step-box img.step-icon { clear: both; width: 12vw; height: auto; margin: 0 auto;}
  .decoration-steps-con .steps-list-row img.arrow-right { width: 10vw; height: auto;}
  .decoration-steps-con .steps-list-row .step-box-2 { width: 25vw;}
  .decoration-steps-con .steps-list-row .step-box-2 .top-title-bar { width: 100%; margin: 0 0 1vw 0; text-align: center;}
  .decoration-steps-con .steps-list-row .step-box-2 .top-title-bar span.step-num { padding: 0 1.5vw; color: #fff; font-size: 1.6vw; font-weight: 500; line-height: 2.4vw; border-radius: 0.8vw; background-color: #158072;}
  .decoration-steps-con .steps-list-row .step-box-2 .top-title-bar span.title { font-size: 1.6vw; font-weight: 500; line-height: 2.4vw;}
  .decoration-steps-con .steps-list-row .step-box-2 img.step-icon { clear: both; width: 25vw; height: auto; margin: 0 auto;}

  img.page-serv-item-3-preorder-bt { clear: both; width: 20vw; height: auto; margin: 0 auto;}


  /************ section #page-reviews ************/

  section#page-reviews { clear: both; width: 100%; padding: 4vw 8vw; background-color: #4d4d4d; box-sizing: border-box;}

  .page-reviews-title { width: 100%; margin: 2.5vw 0; text-align: center;}
  .page-reviews-title span.title-b { color: rgba(255,255,255,0.5); font-size: 8vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 8vw;}
  .page-reviews-title span.title-s { padding: 0.2vw 1.5vw; color: #fff; font-size: 2.2vw; font-weight: 700; line-height: 2.2vw; background-color: #991e23;}

  .page-reviews-article-list { clear: both; width: 100%; margin: 4vw 0 0 0;}
  .page-reviews-article-list .reviews-article-box { clear: both; width: 100%; margin: 3vw auto; display: flex; justify-content: flex-start; align-items: stretch;}
  .page-reviews-article-list .reviews-article-box .col-photo-mo { display: none;}
  .page-reviews-article-list .reviews-article-box .col-photo { width: 50%; background-color: #eba71e; display: block;}
  .page-reviews-article-list .reviews-article-box .col-photo img { width: 100%; height: auto;}
  .page-reviews-article-list .reviews-article-box .col-text { width: 50%; padding: 3vw; color: #fff; font-size: 2vw; line-height: 3vw; background-color: #eba71e; box-sizing: border-box;}
  .page-reviews-article-list .reviews-article-box .col-text span.nickname { color: #eee; font-size: 1.6vw;}


  /************ section #page-qanda ************/

  section#page-qanda { clear: both; width: 100%; padding: 4vw 10vw; box-sizing: border-box; background-image: url("../images/index_service_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto;}

  .page-qanda-title { width: 100%; margin: 0 0 3vw 0;}
  .page-qanda-title span.title-b { color: #a5a5a5; font-size: 12vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 14vw;}

  .page-qanda-list { width: 100%;}
  .page-qanda-list ul.qanda-list-box { width: 100%; padding: 0; margin: 0; border-top: 1px #000 solid; list-style: none; display: block;}
  .page-qanda-list ul.qanda-list-box li { width: 100%; padding: 0; margin: 0; border-bottom: 1px #000 solid;}
  .page-qanda-list ul.qanda-list-box li .qanda-title { width: 100%; padding: 2vw 0; display: flex; justify-content: flex-start; align-items: flex-start; cursor: pointer;}
  .page-qanda-list ul.qanda-list-box li .qanda-title:hover { color: #971e23;}
  .page-qanda-list ul.qanda-list-box li .qanda-title .icon { width: 4vw; font-size: 2vw; line-height: 4vw;}
  .page-qanda-list ul.qanda-list-box li .qanda-title .title { width: calc(100% - 8vw); font-size: 2vw; font-weight: 500; line-height: 4vw;}
  .page-qanda-list ul.qanda-list-box li .qanda-title .open { width: 4vw; font-size: 2vw; line-height: 4vw; text-align: right;}
  .page-qanda-list ul.qanda-list-box li .qanda-title .close { width: 4vw; font-size: 2vw; line-height: 4vw; text-align: right; display: none;}
  .page-qanda-list ul.qanda-list-box li .qanda-con { width: 100%; padding: 2vw 2vw 2vw 0; border-top: 1px #ccc solid; display: none; justify-content: flex-start; align-items: flex-start; box-sizing: border-box; transition: 0.5s;}
  .page-qanda-list ul.qanda-list-box li .qanda-con .icon { width: 4vw; font-size: 2vw; line-height: 4vw;}
  .page-qanda-list ul.qanda-list-box li .qanda-con .text { width: calc(100% - 4vw); font-size: 2vw; font-weight: 300; line-height: 4vw;}
  .page-qanda-list ul.qanda-list-box li .qanda-con .text img { clear: both; max-width: 100%; height: auto;}


  /** 20240522新增 **/
  ul.page-qanda-nav { width: 100%; padding: 0; margin: 0 0 6vw 0; list-style: none; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
  ul.page-qanda-nav li { padding: 0; margin: 1vw;}
  ul.page-qanda-nav li a { padding: 1vw 3vw; color: #000; font-size: 2vw; text-decoration: none; border-radius: 1vw; border: 1px #000 solid; display: block;}
  ul.page-qanda-nav li a:hover { background-color: #fff;}
  ul.page-qanda-nav li a.sel { background-color: #fff;}


  /************ page-pro-content ************/

  .page-pro-content { clear: both; width: 100%; padding: 4vw 8vw 0 8vw; box-sizing: border-box;}
  .page-pro-content .col-lf-nav { width: 100%;}
  .page-pro-content .col-lf-nav input[type=search] { width: 100%; padding: 1vw; color: #000; font-size: 2vw; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .page-pro-content .col-lf-nav .sort-title { display: none;}
  .page-pro-content .col-lf-nav .sort-title-mo { width: 100%; padding: 1.5vw 2vw; margin: 3vw 0 0 0; font-size: 2.4vw; font-weight: 500; border-radius: 1vw; background-color: #eba71e; box-sizing: border-box; display: none; justify-content: space-between; align-items: center;}  
  .page-pro-content .col-lf-nav ul.pro-sort-nav { clear: both; width: 100%; padding: 2vw; margin: 0; background-color: #eee; list-style: none; display: none; box-sizing: border-box;}
  .page-pro-content .col-lf-nav ul.pro-sort-nav li { width: 100%; padding: 0; margin: 0;}
  .page-pro-content .col-lf-nav ul.pro-sort-nav li a { width: 100%; padding: 1vw; color: #000; font-size: 2vw; font-weight: 300; text-decoration: none; display: block; box-sizing: border-box; cursor: pointer;}
  .page-pro-content .col-lf-nav ul.pro-sort-nav li a:hover { font-weight: 400; background-color: #eee;}
  .page-pro-content .col-lf-nav ul.pro-sort-nav li ul.sort-nav-popup { width: 100%; padding: 1vw 0 1vw 2vw; margin: 0; list-style: none; display: none; box-sizing: border-box;}
  .page-pro-content .col-lf-nav ul.pro-sort-nav li ul.sort-nav-popup li { width: 100%; padding: 0; margin: 0;}
  .page-pro-content .col-lf-nav ul.pro-sort-nav li ul.sort-nav-popup li a { width: 100%; padding: 0.5vw; color: #000; font-size: 2vw; font-weight: 300; text-decoration: none; display: block; box-sizing: border-box; cursor: pointer;}
  .page-pro-content .col-lf-nav ul.pro-sort-nav li ul.sort-nav-popup li a:hover { font-weight: 400; background-color: #eee;}

  .page-pro-content .col-lf-nav .all-sort-title-mo {width: 100%; padding: 1.5vw 2vw; margin: 3vw 0 0 0; color: #fff; font-size: 2.4vw; font-weight: 500; border-radius: 1vw; background-color: #158872; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center;}
  
  .page-pro-content .col-rt-con { width: 100%; padding: 0 0 0 3vw; margin: 6vw 0 0 0; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-pro-content .col-rt-con .pro-pic { width: 50%;}
  .page-pro-content .col-rt-con .pro-pic img { width: 100%; height: auto;}
  .page-pro-content .col-rt-con .pro-infor { width: 50%; padding: 0 0 0 2vw; box-sizing: border-box;}
  .page-pro-content .col-rt-con .pro-infor .pro-title { width: 100%; padding: 0 0 1vw 0; font-size: 2.2vw; font-weight: 500; border-bottom: 1px #ccc solid;}
  .page-pro-content .col-rt-con .pro-infor .pro-feature { width: 100%; padding: 1vw 0; margin: 0 0 2vw 0; font-size: 2vw; font-weight: 300; line-height: 2.8vw; border-bottom: 1px #ccc solid;}
  .page-pro-content .col-rt-con .pro-infor .pro-feature .title { width: 100%; font-size: 2.2vw; font-weight: 400;}
  .page-pro-content .col-rt-con .pro-infor .pro-quantity { width: 100%; padding: 1vw 0; font-size: 2vw;}
  .page-pro-content .col-rt-con .pro-infor .pro-quantity input[type=number] { width: 10vw; padding: 0.6vw 1vw; color: #000; font-size: 1.6vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid;}
  .page-pro-content .col-rt-con .pro-infor .pro-price { width: 100%; font-size: 2vw;}
  .page-pro-content .col-rt-con .pro-infor .pro-price span.price { color: #971e23; font-size: 2.4vw; font-weight: 600;}
  .page-pro-content .col-rt-con .pro-intro { width: 100%; margin: 2vw 0 0 0;}
  .page-pro-content .col-rt-con .pro-intro .title { width: 100%; padding: 0 0 1vw 0; font-size: 2.2vw; text-align: center; border-top: 1px #ccc solid; border-bottom: 1px #ccc solid; background-color: #eee;}
  .page-pro-content .col-rt-con .pro-intro .content { width: 100%; padding: 2vw 0; font-size: 2vw; line-height: 3.2vw;}
  .page-pro-content .col-rt-con .pro-intro .content img { max-width: 100%; height: auto; margin: 1vw auto;}

  .page-pro-content .col-full-recommend { clear: both; width: 100%; padding: 2vw 2vw 0 2vw; margin: 2vw 0 0 0; background-color: #eee; box-sizing: border-box;}
  .page-pro-content .col-full-recommend .rec-title { width: 100%; font-size: 2.2vw; font-weight: 500; text-align: center;}
  .page-pro-content .col-full-recommend .pro-rec-list { width: 100%; margin: 2vw 0 0 0; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-pro-content .col-full-recommend .pro-rec-list .pro-box { width: calc(100% / 4 - 2vw); margin: 0 1vw 2vw 1vw;}
  .page-pro-content .col-full-recommend .pro-rec-list .pro-box a { color: #000; text-decoration: none;}
  .page-pro-content .col-full-recommend .pro-rec-list .pro-box .pic { width: 100%;}
  .page-pro-content .col-full-recommend .pro-rec-list .pro-box .pic img { width: 100%; height: auto;}
  .page-pro-content .col-full-recommend .pro-rec-list .pro-box .title { width: 100%; padding: 1vw 0 0 0; font-size: 1.4vw;}


  /************ page-contact-con ************/

  .page-contact-title { width: 100%; margin: 2.5vw 0;}
  .page-contact-title span.title-b { color: #a5a5a5; font-size: 12vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 14vw;}
  .page-contact-title span.title-s { padding: 0.2vw 1.5vw; margin: 0 0 0 4vw; color: #fff; font-size: 4vw; font-weight: 700; line-height: 5vw; background-color: #991e23;}

  .page-contact-con { clear: both; width: 100%; padding: 0 6vw 0 0; margin: 4vw auto 0 auto; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; box-sizing: border-box;}
  .page-contact-con .contact-infor { width: 45%; font-size: 2.6vw; line-height: 4vw; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-contact-con .contact-infor .column-full { width: 100%; padding: 0 0 2vw 0; font-size: 3.4vw; font-weight: 500;}
  .page-contact-con .contact-infor .caption { width: 4vw;}
  .page-contact-con .contact-infor .column { width: calc(100% - 4vw);}
  .page-contact-con .contact-form { width: 55%;}
  .page-contact-con .contact-form form { width: 100%; padding: 0 0 0 2vw; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; box-sizing: border-box;}
  .page-contact-con .contact-form form .caption { width: 16vw; padding: 0 0 1vw 0; font-size: 2.6vw; text-align: right;}
  .page-contact-con .contact-form form .column { width: calc(100% - 16vw); padding: 0 0 1vw 0; font-size: 2.6vw;}
  .page-contact-con .contact-form form .column input[type=text], 
  .page-contact-con .contact-form form .column input[type=tel], 
  .page-contact-con .contact-form form .column input[type=email] { width: 100%; padding: 1vw; font-size: 2vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .page-contact-con .contact-form form .column textarea { width: 100%; height: 10vw; padding: 1vw; font-size: 2vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .page-contact-con .contact-form form .column input[type=button] { padding: 1vw 3.6vw; color: #fff; font-size: 2vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 2vw; background-color: #158072; cursor: pointer;}


  /************ page-shopping-cart ************/

  section#page-shopping-cart { clear: both; width: 100%; padding: 0 0 4.5vw 0; box-sizing: border-box;}

  .page-shoppingcart-title { width: 100%; margin: 2.5vw 0; text-align: center;}
  .page-shoppingcart-title span.title-b { color: rgba(165,165,165,0.8); font-size: 8vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 8vw;}
  .page-shoppingcart-title span.title-s { padding: 0 1.5vw; color: #fff; font-size: 2.2vw; font-weight: 700; line-height: 3vw; background-color: #991e23;}

  .page-shoppingcart-order { clear: both; width: 90vw; margin: 4vw auto;}
  .page-shoppingcart-order .step-line-bar { width: 57vw; margin: 0 auto 6vw auto; display: flex; justify-content: center; align-items: flex-start; position: relative;}
  .page-shoppingcart-order .step-line-bar .step-box { width: 3vw; height: 3vw; color: #fff; font-size: 1.6vw; line-height: 2.6vw; text-align: center; border-radius: 100%; background-color: #ccc;}
  .page-shoppingcart-order .step-line-bar .step-box.sel { background-color: #666;}
  .page-shoppingcart-order .step-line-bar .step-line { width: 17vw; height: 2px; margin: 1.4vw 0 0 0; background-color: #ccc; display: block;}
  .page-shoppingcart-order .step-line-bar .step-line.sel { background-color: #666;}
  .page-shoppingcart-order .step-line-bar .text-sub-1 { width: 5vw; color: #000; padding: 1vw 0 0 0; font-size: 1.4vw; text-align: center; position: absolute; top: 2.5vw; left: 6vw; z-index: 1;}
  .page-shoppingcart-order .step-line-bar .text-sub-2 { width: 6vw; color: #000; padding: 1vw 0 0 0; font-size: 1.4vw; text-align: center; position: absolute; top: 2.5vw; left: calc(50% - 2.5vw); z-index: 1;}
  .page-shoppingcart-order .step-line-bar .text-sub-3 { width: 6vw; color: #000; padding: 1vw 0 0 0; font-size: 1.4vw; text-align: center; position: absolute; top: 2.5vw; right: 5.5vw; z-index: 1;}
  
  .page-shoppingcart-order .member-signup { clear: both; width: 100%; margin: 4vw 0 2vw 0; padding: 2vw 4vw; background-color: #eee; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  .page-shoppingcart-order .member-signup .notice-text { width: calc(100% - 21vw); color: #000; font-size: 1.6vw; font-weight: 300;}
  .page-shoppingcart-order .member-signup .signup-bt { width: 10vw;}
  .page-shoppingcart-order .member-signup .signup-bt a { width: 100%; padding: 0.6vw 0; color: #fff; font-size: 1.6vw; text-align: center; text-decoration: none; border-radius: 0.8vw; background-color: #eba71e; display: block;}
  .page-shoppingcart-order .member-signup .fb-signup-bt { width: 10vw;}
  .page-shoppingcart-order .member-signup .fb-signup-bt a { width: 100%; padding: 0.6vw 0; margin: 0 0 0 1vw; color: #fff; font-size: 1.6vw; text-align: center; text-decoration: none; border-radius: 0.8vw; background-color: #0866ff; display: block;}

  .page-shoppingcart-order .shoppingcart-order-table { clear: both; width: 100%;}
  .page-shoppingcart-order .shoppingcart-order-table .caption-full { width: 100%; font-size: 1.6vw; font-weight: 500; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: center;}
  .page-shoppingcart-order .shoppingcart-order-table .caption-full .caption-1 { width: 35%; padding: 1vw; box-sizing: border-box;}
  .page-shoppingcart-order .shoppingcart-order-table .caption-full .caption-2 { width: 15%; padding: 1vw; text-align: center; box-sizing: border-box;}
  .page-shoppingcart-order .shoppingcart-order-table .caption-full .caption-3 { width: 15%; padding: 1vw; text-align: center; box-sizing: border-box;}
  .page-shoppingcart-order .shoppingcart-order-table .caption-full .caption-4 { width: 15%; padding: 1vw; text-align: center; box-sizing: border-box;}
  .page-shoppingcart-order .shoppingcart-order-table .caption-full .caption-5 { width: 15%; padding: 1vw; text-align: center; box-sizing: border-box;}
  .page-shoppingcart-order .shoppingcart-order-table .caption-full .caption-6 { width: 5%; padding: 1vw; box-sizing: border-box;}
  .page-shoppingcart-order .shoppingcart-order-table .column-full { width: 100%; font-size: 1.2vw; border-bottom: 1px #ccc dashed; display: flex; justify-content: flex-start; align-items: center;}
  .page-shoppingcart-order .shoppingcart-order-table .column-full .column-1 { width: 35%; padding: 1vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  .page-shoppingcart-order .shoppingcart-order-table .column-full .column-1 .pic { width: 7vw;}
  .page-shoppingcart-order .shoppingcart-order-table .column-full .column-1 .pic img { width: 100%; height: auto;}
  .page-shoppingcart-order .shoppingcart-order-table .column-full .column-1 .pro-name { width: calc(100% - 7vw); padding: 0 0 0 1vw; box-sizing: border-box;}
  .page-shoppingcart-order .shoppingcart-order-table .column-full .column-2 { width: 15%; padding: 1vw; text-align: center; box-sizing: border-box;}
  .page-shoppingcart-order .shoppingcart-order-table .column-full .column-3 { width: 15%; padding: 1vw; text-align: center; box-sizing: border-box;}
  .page-shoppingcart-order .shoppingcart-order-table .column-full .column-4 { width: 15%; padding: 1vw; text-align: center; box-sizing: border-box;}
  .page-shoppingcart-order .shoppingcart-order-table .column-full .column-4 button { width: 2.4vw; padding: 0.4vw 0; color: #000; font-size: 1.4vw; font-weight: 500; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; text-align: center; border-radius: 6px; border: 1px #ccc solid; background-color: #eee; cursor: pointer;}
  .page-shoppingcart-order .shoppingcart-order-table .column-full .column-4 input[type=text] { width: 4vw; padding: 0.5vw 0.5vw; color: #000; font-size: 1.4vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; text-align: center; border: 1px #ccc solid; background-color: #fff;}
  .page-shoppingcart-order .shoppingcart-order-table .column-full .column-5 { width: 15%; padding: 1vw; text-align: center; box-sizing: border-box;}
  .page-shoppingcart-order .shoppingcart-order-table .column-full .column-6 { width: 5%; padding: 1vw; font-size: 1.6vw; text-align: center; box-sizing: border-box;}
  .page-shoppingcart-order .shoppingcart-order-table .column-full .column-6 a { color: #000; text-decoration: none;}


  /** 20240522修改 **/
  .page-shoppingcart-order .continue-shop { width: 100%; margin: 3vw 0 0 0; text-align: right; box-sizing: border-box; display: flex; justify-content: flex-end; align-items: center;}
  .page-shoppingcart-order .continue-shop a.shopping-bt { width: 8vw; padding: 0.5vw 2vw; margin: 0 0.5vw; color: #fff; font-size: 1.6vw; font-weight: 500; text-align: center; text-decoration: none; border-radius: 0.6vw; background-color: #eaa61e; display: block;}
  .page-shoppingcart-order .continue-shop a.checkout-bt { width: 5vw; padding: 0.5vw 2vw; margin: 0 0.5vw; color: #fff; font-size: 1.6vw; font-weight: 500; text-align: center; text-decoration: none; border-radius: 0.6vw; background-color: #eaa61e; display: block;}
  .page-shoppingcart-order .continue-shop a.confirm-bt { width: 8vw; padding: 0.5vw 2vw; margin: 0 auto; color: #fff; font-size: 1.6vw; font-weight: 500; text-align: center; text-decoration: none; border-radius: 0.6vw; background-color: #eaa61e; display: block;}
  .page-shoppingcart-order .continue-shop a:hover { color: #000;}

  .shopping-checkout-infor { clear: both; width: 100%; margin: 4vw 0 0 0;}
  .shopping-checkout-infor .column-lf { width: 100%; padding: 2vw; margin: 0 0 2vw 0; border-radius: 2vw; border: 1px #ccc solid; box-sizing: border-box;}
  .shopping-checkout-infor .column-lf .title-bar, 
  .shopping-checkout-infor .column-rt .title-bar { width: 100%; padding: 0 0 0.5vw 0; font-size: 3vw; font-weight: 500; border-bottom: 1px #ccc solid;}
  .shopping-checkout-infor .column-lf .infor-form { width: 100%; padding: 0.5vw 0 0 0; font-size: 2vw; line-height: 4vw;}
  .shopping-checkout-infor .column-lf .infor-form input[type=radio] { width: 1.8vw; height: 1.8vw;}
  .shopping-checkout-infor .column-lf .infor-form .form { width: 100%; padding: 0 0 0 1.7vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .shopping-checkout-infor .column-lf .infor-form .form .col-x3 { width: calc(100% / 3);}
  .shopping-checkout-infor .column-lf .infor-form .form .col-x3 input[type=text].style-1, 
  .shopping-checkout-infor .column-lf .infor-form .form .col-x3 input[type=tel] { width: 96%; padding: 1vw; margin: 0 0 2vw 0; font-size: 2vw; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .shopping-checkout-infor .column-lf .infor-form .form .twzipcode { clear: both; width: 100%;}
  .shopping-checkout-infor .column-lf .infor-form .form .twzipcode select { width: 49%; padding: 1vw; font-size: 2vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .shopping-checkout-infor .column-lf .infor-form .form input[type=text].style-2 { width: 98.5%; padding: 1vw; margin: 1vw 0 2vw 0; font-size: 2vw; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .shopping-checkout-infor .column-lf .infor-form .form .col-full { width: 100%;}
  .shopping-checkout-infor .column-lf .infor-form .form .col-full input[type=checkbox] { width: 2vw; height: 2vw;}

  .shopping-checkout-infor .shopping-confirm-text { width: 100%; padding: 4vw 0; font-size: 3vw; text-align: center;}

  .shopping-checkout-infor .column-rt { width: 100%; padding: 2vw; margin: 0 0 2vw 0; border-radius: 2vw; border: 1px #ccc solid; box-sizing: border-box;}
  .shopping-checkout-infor .column-rt .col-full { clear: both; width: 100%; padding: 1vw 0; font-size: 2vw; line-height: 4vw; border-bottom: 1px #ccc dashed; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .shopping-checkout-infor .column-rt .col-full:last-child { border-bottom: 0;}
  .shopping-checkout-infor .column-rt .col-full .caption { width: 60%;}
  .shopping-checkout-infor .column-rt .col-full .column { width: 40%; font-weight: 600; text-align: right;}
  .shopping-checkout-infor .column-rt .col-full .column span.color-red { color: #971e23;}
  .shopping-checkout-infor .column-rt .col-full .col-x3 { width: calc(100% / 3);}
  .shopping-checkout-infor .column-rt .col-full .col-x3 input[type=radio] { width: 1.8vw; height: 1.8vw;}

  ul#invoice-tab { clear: both; width: 100%; padding: 0; margin: 1vw 0 0 0; list-style: none; display: flex; justify-content: flex-start;}
  ul#invoice-tab li { width: 12vw; padding: 0; margin: 0 1vw 0 0;}
  ul#invoice-tab li a { width: 100%; color: #000; font-size: 2vw; text-align: center; border: 1px #000 solid; background-color: #fff; text-decoration: none; box-sizing: border-box; display: block;}
  ul#invoice-tab li a:hover { background-color: #63c1d1;}
  ul#invoice-tab li a.sel { color: #fff; background-color: #000;}
  
  .invoice-detail { clear: both; width: 100%; padding: 2vw; margin: 0 0 1vw 0; box-sizing: border-box; background-color: #f1f1f1;}
  .invoice-detail div { display: none;}
  .invoice-detail div .content-table { width: 100%;}
  .invoice-detail div .content-table .caption-title { clear: both; width: 10vw; padding: 1.5vw 0 0 0; float: left;}
  .invoice-detail div .content-table .column-detail { width: calc(100% - 10vw); float: left;}
  .invoice-detail div .content-table .column-detail input[type=text].style-full, 
  .invoice-detail div .content-table .column-detail select.style-full { width: 100%; padding: 1vw; margin: 1vw 0; color: #000; font-size: 2vw; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #cacaca solid; background-color: #fff; box-sizing: border-box;}


  /************ page-members ************/

  .page-members-login { clear: both; width: 80%; margin: 4vw auto; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-members-login .col-half { width: 50%;}
  .page-members-login .col-half .s-title { width: 100%; font-size: 3vw; margin: 0 0 2vw 0;}
  .page-members-login .col-half input[type=text], 
  .page-members-login .col-half input[type=password] { width: 36vw; margin: 0 0 1vw 0; padding: 1vw; color: #000; font-size: 2vw; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .page-members-login .col-half input[type=submit], 
  .page-members-login .col-half input[type=button] { width: 36vw; margin: 0 0 1vw 0; padding: 1vw; color: #fff; font-size: 2vw; border: 0; border-radius: 0.6vw; background-color: #eaa61e; box-sizing: border-box; cursor: pointer;}
  .page-members-login .col-half .forget-note { clear: both; width: 36vw; padding: 1vw 0 0 0; margin: 1vw 0 0 0; border-top: 1px #ccc solid; color: #333; font-size: 1.4vw;}
  .page-members-login .col-half .forget-note a { color: #000; text-decoration: none; border-bottom: 1px #333 solid;}
  .page-members-login .col-half .forget-note a:hover { color: #0866ff; border-bottom: 1px #0866ff solid;}
  .page-members-login .col-half .sign-up-note { clear: both; width: 100%; padding: 3vw; font-size: 2vw; border-radius: 0.8vw; background-color: #eee; box-sizing: border-box;}
  .page-members-login .col-half .sign-up-note .sign-up-bt { clear: both; width: 24vw; margin: 2vw auto 0 auto;}
  .page-members-login .col-half .sign-up-note .sign-up-bt a { width: 100%; padding: 0.6vw 1vw; color: #fff; font-size: 2vw; text-align: center; text-decoration: none; border-radius: 0.6vw; background-color: #eaa61e; display: block; box-sizing: border-box;}


  .page-members-sign-up { clear: both; width: 90%; margin: 3vw auto; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-members-sign-up .column-left { width: 100%;}
  .page-members-sign-up .column-left .s-title { width: 100%; padding: 0 0 0.5vw 0; font-size: 3vw;}
  .page-members-sign-up .column-left input.style-1 { width: calc(50% - 2vw); margin: 0.5vw 1vw 0.5vw 0; padding: 0.5vw 1vw; color: #000; font-size: 2vw; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .page-members-sign-up .column-left input[type=date] { width: calc(50% - 2vw); margin: 0.5vw 1vw 0.5vw 0; padding: 0.5vw 1vw 0.5vw 7vw; color: #000; font-size: 2vw; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .page-members-sign-up .column-left select { width: calc(50% - 2vw); margin: 0.5vw 1vw 0.5vw 0; padding: 0.5vw 1vw; color: #000; font-size: 2vw; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .page-members-sign-up .column-left input.style-2 { width: calc(100% - 2.5vw); margin: 0.5vw 1vw 0.5vw 0; padding: 0.5vw 1vw; color: #000; font-size: 2vw; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .page-members-sign-up .column-right { width: 100%;}
  .page-members-sign-up .column-right .s-title { width: 100%; padding: 0 0 0.5vw 0; font-size: 3vw;}
  .page-members-sign-up .column-right input.style-1 { width: 100%; margin: 0.5vw 1vw 0.5vw 0; padding: 0.5vw 1vw; color: #000; font-size: 2vw; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .page-members-sign-up .column-right input.style-2 { width: 100%; margin: 0.5vw 1vw 0.5vw 0; padding: 0.5vw 1vw; color: #000; font-size: 2vw; border: 1px #ccc solid; background-color: #ccc; box-sizing: border-box;}
  .page-members-sign-up .column-right .text-note { width: 100%; margin: 0.5vw 1vw 0.5vw 0; padding: 1vw 0 0 0; font-size: 1.4vw; font-weight: 300; line-height: 2vw; text-align: center; box-sizing: border-box;}
  .page-members-sign-up .column-right .text-note span.color-red { color: #971e23;}
  .page-members-sign-up .column-full { width: 100%; height: 20vw; padding: 2vw; margin: 2vw 0 0 0; background-color: #eee; overflow-y: scroll; box-sizing: border-box;}
  .page-members-sign-up .column-full .s-title { width: 100%; padding: 0 0 1vw 0; font-size: 2vw; text-align: center;}
  .page-members-sign-up .column-full .text-con { width: 100%; font-size: 1.4vw; font-weight: 300; line-height: 2vw;}
  .page-members-sign-up .column-half { width: 50%; margin: 1vw 0 0 0; font-size: 2vw;}
  .page-members-sign-up .column-half .container { padding: 0 0 0 3vw; display: block; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
  .page-members-sign-up .column-half .container input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}
  .page-members-sign-up .column-half .checkmark { position: absolute; top: 0.3vw; left: 0; height: 2.4vw; width: 2.4vw; border: 1px #158072 solid; border-radius: 0.3vw; background-color: #fff; box-sizing: border-box;}
  .page-members-sign-up .column-half .container:hover input ~ .checkmark { border: 1px #158072 solid; background-color: #ccc; box-sizing: border-box;}
  .page-members-sign-up .column-half .container input:checked ~ .checkmark { background-color: #158072;}
  .page-members-sign-up .column-half .checkmark:after { content: ""; position: absolute; display: none;}
  .page-members-sign-up .column-half .container input:checked ~ .checkmark:after { display: block;}
  .page-members-sign-up .column-half .container .checkmark:after { left: 0.6vw; top: 0.1vw; width: 0.6vw; height: 1.4vw; border: solid white; border-width: 0 0.4vw 0.4vw 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
  .page-members-sign-up .column-half .sign-up-bt { width: 26vw; float: right;}
  .page-members-sign-up .column-half .sign-up-bt a { width: 100%; padding: 0.5vw 0; color: #fff; font-size: 2vw; text-align: center; text-decoration: none; border-radius: 0.5vw; background-color: #eaa61e; display: block;}


  ul.members-nav { width: 100%; padding: 0; margin: 0 0 4vw 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  ul.members-nav li { width: 16vw; padding: 0; margin: 0 1vw 1vw 1vw;}
  ul.members-nav li a { width: 100%; padding: 0.5vw 0; color: #158072; font-size: 2vw; border: 1px #158072 solid; border-radius: 0.6vw; text-align: center; text-decoration: none; display: block;}
  ul.members-nav li a:hover { background-color: #eee;}
  ul.members-nav li a.sel { color: #fff; background-color: #158072;}

  .page-members-sign-up .column-left label.sex-box { margin: 0.5vw 1vw 0.5vw 0; padding: 0.5vw 5vw 0.5vw 1vw; color: #000; font-size: 2vw; background-color: #fff; box-sizing: border-box;}
  .page-members-sign-up .column-left input.style-3 { width: 25vw; margin: 0.5vw 0; padding: 0.5vw 1vw; color: #000; font-size: 2vw; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .page-members-sign-up .column-left input[type=button].style-1 { width: calc(50% - 2.25vw - 25vw); margin: 0.5vw 1vw 0.5vw 0; padding: 0.5vw 1vw; color: #000; font-size: 2vw; border: 0; background-color: #ccc; box-sizing: border-box; cursor: pointer;}
  .page-members-sign-up .column-left input[type=button].style-2 { width: calc(50% - 2.25vw - 25vw); margin: 0.5vw 1vw 0.5vw 0; padding: 0.5vw 1vw; color: #000; font-size: 2vw; border: 0; background-color: #ccc; box-sizing: border-box; cursor: pointer;}
  .page-members-sign-up .column-left select.style-full { width: calc(100% - 2.75vw); margin: 0.5vw 1vw 0.5vw 0; padding: 0.5vw 1vw; color: #000; font-size: 2vw; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}


  .page-members-order { clear: both; width: 90%; margin: 0 auto; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-members-order .mem-order-table { width: 100%; margin: 0 0 4vw 0;}
  .page-members-order .mem-order-table .caption-full { width: 100%; font-size: 2vw; border-bottom: 1px #000 solid; display: flex; justify-content: flex-start; align-items: center;}
  .page-members-order .mem-order-table .caption-full .caption-1 { width: 15%; padding: 0.8vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .caption-full .caption-2 { width: 15%; padding: 0.8vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .caption-full .caption-3 { width: 10%; padding: 0.8vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .caption-full .caption-4 { width: 10%; padding: 0.8vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .caption-full .caption-5 { width: 30%; padding: 0.8vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .caption-full .caption-6 { width: 10%; padding: 0.8vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .caption-full .caption-7 { width: 10%; padding: 0.8vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .column-full { width: 100%; font-size: 1.6vw; font-weight: 300; border-bottom: 1px #ccc dashed; display: flex; justify-content: flex-start; align-items: center;}
  .page-members-order .mem-order-table .column-full .column-1 { width: 15%; padding: 0.8vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .column-full .column-2 { width: 15%; padding: 0.8vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .column-full .column-3 { width: 10%; padding: 0.8vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .column-full .column-4 { width: 10%; padding: 0.8vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .column-full .column-5 { width: 30%; padding: 0.8vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .column-full .column-6 { width: 10%; padding: 0.8vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .column-full .column-7 { width: 10%; padding: 0.8vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .column-full .column-7 a { width: 5vw; padding: 0.2vw 0; color: #fff; font-size: 1.4vw; font-weight: 300; text-align: center; text-decoration: none; border-radius: 0.5vw; background-color: #eaa61e; display: block;}


  .page-members-reward { clear: both; width: 90%; margin: 3vw auto; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-members-reward .discount-code { width: 100%;}
  .page-members-reward .discount-code .title-text { width: 100%; margin: 0 0 1vw 0; font-size: 3vw; font-weight: 500;}
  .page-members-reward .discount-code .title-text span.small { color: #333; font-size: 2vw; font-weight: 400;}
  .page-members-reward .discount-code input[type=text] { width: 60vw; padding: 1vw; color: #000; font-size: 2vw; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .page-members-reward .discount-code input[type=button] { width: 10vw; padding: 1vw; margin: 0 0 0 1vw; color: #000; font-size: 2vw; border: 0; background-color: #ccc; box-sizing: border-box; cursor: pointer;}

  .page-members-reward .reward-table { width: 100%; margin: 3vw 0;}
  .page-members-reward .reward-table .caption-full { width: 100%; font-size: 1.6vw; font-weight: 500; border-top: 1px #ccc solid; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: center;}
  .page-members-reward .reward-table .caption-full .caption-1 { width: 13%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-reward .reward-table .caption-full .caption-2 { width: 12%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-reward .reward-table .caption-full .caption-3 { width: 15%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-reward .reward-table .caption-full .caption-4 { width: 15%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-reward .reward-table .caption-full .caption-5 { width: 15%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-reward .reward-table .caption-full .caption-6 { width: 15%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-reward .reward-table .caption-full .caption-7 { width: 15%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-reward .reward-table .column-full { width: 100%; font-size: 1.4vw; font-weight: 300; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: center;}
  .page-members-reward .reward-table .column-full:nth-child(even) { background-color: #eee;}
  .page-members-reward .reward-table .column-full .column-1 { width: 13%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-reward .reward-table .column-full .column-2 { width: 12%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-reward .reward-table .column-full .column-3 { width: 15%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-reward .reward-table .column-full .column-4 { width: 15%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-reward .reward-table .column-full .column-5 { width: 15%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-reward .reward-table .column-full .column-6 { width: 15%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-reward .reward-table .column-full .column-7 { width: 15%; padding: 0.5vw; box-sizing: border-box;}


  .page-members-exchange { clear: both; width: 90%; margin: 3vw auto; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-members-exchange .exchange-table { width: 100%; margin: 3vw 0;}
  .page-members-exchange .exchange-table .caption-full { width: 100%; font-size: 1.6vw; font-weight: 500; border-top: 1px #ccc solid; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: center;}
  .page-members-exchange .exchange-table .caption-full .caption-1 { width: 13%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-exchange .exchange-table .caption-full .caption-2 { width: 13%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-exchange .exchange-table .caption-full .caption-3 { width: 22%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-exchange .exchange-table .caption-full .caption-4 { width: 13%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-exchange .exchange-table .caption-full .caption-5 { width: 13%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-exchange .exchange-table .caption-full .caption-6 { width: 26%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-exchange .exchange-table { width: 100%; margin: 3vw 0;}
  .page-members-exchange .exchange-table .column-full { width: 100%; font-size: 1.4vw; font-weight: 300; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: center;}
  .page-members-exchange .exchange-table .column-full:nth-child(even) { background-color: #eee;}
  .page-members-exchange .exchange-table .column-full .column-1 { width: 13%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-exchange .exchange-table .column-full .column-2 { width: 13%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-exchange .exchange-table .column-full .column-3 { width: 22%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-exchange .exchange-table .column-full .column-4 { width: 13%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-exchange .exchange-table .column-full .column-5 { width: 13%; padding: 0.5vw; box-sizing: border-box;}
  .page-members-exchange .exchange-table .column-full .column-6 { width: 26%; padding: 0.5vw; box-sizing: border-box;}


  /************ page-reserve-con ************/

  section#page-reserve { clear: both; width: 100%; padding: 4vw 0 6vw 0; box-sizing: border-box; background-image: url("../images/index_about_bg.jpg"); background-repeat: no-repeat; background-size: cover;}  

  .page-reserve-title { width: 100%; margin: 2.5vw 0; text-align: center;}
  .page-reserve-title span.title-b { color: #a5a5a5; font-size: 12vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 14vw;}
  .page-reserve-title span.title-s { padding: 0.2vw 1.5vw; margin: 0 0 0 4vw; color: #fff; font-size: 4vw; font-weight: 700; line-height: 5vw; background-color: #991e23;}

  .page-reserve-con { clear: both; width: 70vw; margin: 0 auto; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-reserve-con .caption { width: 100%; margin: 0 0 1vw 0; font-size: 3vw;}
  .page-reserve-con .caption span.must-star { color: #991e23;}
  .page-reserve-con .column { width: 100%; padding: 0 0 0 3vw; margin: 0 0 2.5vw 0; font-size: 3vw; box-sizing: border-box;}
  .page-reserve-con .column input[type=text].style-1, 
  .page-reserve-con .column input[type=tel] { width: 100%; padding: 0.5vw; font-size: 3vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-bottom: 1px #000 solid; background-color: transparent; box-sizing: border-box;}
  .page-reserve-con .column input[type=text].style-2 { width: 50vw; padding: 0.5vw; font-size: 3vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-bottom: 1px #000 solid; background-color: transparent; box-sizing: border-box;}
  .page-reserve-con .column input[type=radio], 
  .page-reserve-con .column input[type=checkbox] { width: 2.6vw; height: 2.6vw; margin: 0 1vw 0 0;}
  .page-reserve-con input[type=submit], 
  .page-reserve-con input[type=button] { padding: 0.6vw 3vw; margin: 3vw 0 0 0; color: #fff; font-size: 3vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 1vw; background-color: #971e23; cursor: pointer;}

  .page-reserve-con .notice-text { width: 100%; padding: 0.5vw 0; color: #991e23; font-size: 2.2vw;}


  /************ section #sitemap ************/

  section#page-sitemap { clear: both; width: 100%; padding: 8vw 4vw; box-sizing: border-box; background-image: url("../images/index_service_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto;}

  .page-sitemap-title { width: 100%; margin: 2.5vw 0; text-align: center;}
  .page-sitemap-title span.title-b { color: #a5a5a5; font-size: 12vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 14vw;}
  .page-sitemap-title span.title-s { padding: 0.2vw 1.5vw; color: #fff; font-size: 4vw; font-weight: 700; line-height: 5vw; background-color: #991e23;}

  ul.page-sitemap-list { clear: both; width: 100%; padding: 0; margin: 8vw 0 0 0; list-style: none; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
  ul.page-sitemap-list li { padding: 0; margin: 1vw 2vw;}
  ul.page-sitemap-list li a { color: #000; font-size: 3vw; text-decoration: none;}
  ul.page-sitemap-list li a:hover { border-bottom: 1px #000 solid;}



  .page-error404-con { clear: both; width: 100%; padding: 8vw 0 0 0; text-align: center;}
  .page-error404-con span.text-error { font-size: 4vw; font-weight: 500;}
  .page-error404-con a { color: #000; font-size: 2.4vw; border-bottom: 1px #000 solid; text-decoration: none;}
  .page-error404-con a:hover { color: #991e23; border-bottom: 1px #971e23 solid;}


  /************ section #footer-pre-order ************/

  section#footer-pre-order { clear: both; width: 100%; height: 28vw; overflow: hidden; position: relative;}

  img.footer-pre-order-bg { width: 140%; height: auto; margin: 0 0 0 -20%;}

  img.footer-pre-order-bt { width: 36vw; height: auto; position: absolute; top: 7vw; right: 8vw;}


  /************ footer ************/

  footer { clear: both; width: 100%; background-color: #000; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}

  .footer-logo { width: 26vw; background-color: #158072; display: flex; justify-content: center; align-items: center;}
  .footer-logo img { width: 22vw; height: auto;}

  .footer-nav-infor { width: calc(100% - 26vw);}
  .footer-nav-infor ul.footer-nav { width: 100%; padding: 1vw 2vw; margin: 0; list-style: none; border-bottom: 2px #eba71e solid; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; box-sizing: border-box;}
  .footer-nav-infor ul.footer-nav li { padding: 0 1.5vw 1vw 1.5vw; margin: 0;}
  .footer-nav-infor ul.footer-nav li a { color: #fff; font-size: 1.8vw; font-weight: 300; text-decoration: none; transition: 0.5s;}
  .footer-nav-infor ul.footer-nav li a:hover { color: #ccc;}
  .footer-nav-infor .footer-infor { width: 100%; padding: 1vw 3vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center;}
  .footer-nav-infor .footer-infor .infor-text { width: 48vw; color: #fff; font-size: 2vw;}
  .footer-nav-infor .footer-infor .social-icons { width: calc(100% - 48vw); display: flex; justify-content: flex-end; align-items: center;}
  .footer-nav-infor .footer-infor .social-icons img.icon { width: 6vw; height: auto; margin: 0 0 0 1vw;}

  .footer-copyright { clear: both; width: 100%; padding: 1.5vw 0; color: #fff; font-size: 1.8vw; font-weight: 300; text-align: center; background-color: #991e23;}


}

@media screen and (max-width: 767px) {

  /************ aside ************/

  aside { width: 12vw; position: fixed; top: 50vw; right: 0; z-index: 999;}
  aside .aside-bt-box { width: 100%;}
  aside .aside-bt-box a.tel { width: 12vw; height: 12vw; color: #fff; font-size: 7vw; background-color: #991e23; display: flex; justify-content: center; align-items: center;}
  aside .aside-bt-box a.order { width: 12vw; height: 12vw; color: #fff; font-size: 10vw; background-color: #eaa61e; display: flex; justify-content: center; align-items: center;}
  aside .aside-bt-box a.line { width: 12vw; height: 12vw; color: #fff; font-size: 10vw; background-color: #158072; display: flex; justify-content: center; align-items: center;}


  /************ header + nav ************/

  header { width: 100%; height: 20vw; padding: 0 4vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; position: fixed; top: 0; left: 0; z-index: 9999;}

  .header-logo { width: 70vw;}
  .header-logo img.logo { width: 70vw; height: auto;}

  nav#pc { display: none;}
  nav#mo { width: calc(100% - 70vw);}
  nav#mo .nav-icon { width: 10vw; font-size: 10vw; text-align: center; float: right;}
  nav#mo ul.nav-menu { width: 100%; padding: 10vw; margin: 0; box-sizing: border-box; background-color: #158072; list-style: none; display: none; position: absolute; top: 20vw; left: 0; z-index: 9999;}
  nav#mo ul.nav-menu li { padding: 0; margin: 0;}
  nav#mo ul.nav-menu li a { width: 100%; padding: 3vw 4vw; box-sizing: border-box; color: #fff; font-size: 5vw; text-align: center; text-decoration: none; display: block; position: relative;}
  nav#mo ul.nav-menu li a:active { color: #000; background-color: rgba(255,255,255,0.5);}

  .header-icons { display: none;}
  .header-icons-mo { width: 100%; margin: 6vw 0 0 0; display: flex; justify-content: center; align-items: center;}
  .header-icons-mo a { width: 12vw; margin: 0 3vw; text-decoration: none; display: block; position: relative;}
  .header-icons-mo a img.icon { width: 100%; height: auto; position: relative; z-index: 1;}
  .header-icons-mo a .shopping-num { width: 6vw; height: 6vw; color: #fff; font-size: 3vw; line-height: 3vw; display: flex; justify-content: center; align-items: center; border-radius: 100%; background-color: #971e23; position: absolute; top: -1.4vw; right: -1.4vw; z-index: 2;}


  /************ section #index-banner ************/

  section#index-banner { clear: both; width: 100%; padding: 20vw 0 0 0; position: relative; z-index: 1;}

  .index-banner-box { clear: both; width: 100%; position: relative;}
  .index-banner-box .banner-arrow-prev img.arrow-prev { width: 4vw; height: auto; position: absolute; top: 20vw; left: 20px; z-index: 2; cursor: pointer;}
  .index-banner-box .banner-arrow-next img.arrow-next { width: 4vw; height: auto; position: absolute; top: 20vw; right: 20px; z-index: 2; cursor: pointer;}
  .index-banner-box img { width: 100%; height: auto; position: relative; z-index: 1;}


  /************ section #index-about ************/

  section#index-about { clear: both; width: 100%; padding: 6vw 4vw; box-sizing: border-box; background-image: url("../images/index_about_bg.jpg"); background-repeat: no-repeat; background-size: cover;}

  .index-about-title { width: 100%; position: relative; z-index: 1;}
  .index-about-title span.title-b { color: rgba(255,255,255,0.8); font-size: 16vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 20vw;}
  .index-about-title span.title-s { padding: 0.2vw 2vw; color: #fff; font-size: 6vw; font-weight: 700; line-height: 2.2vw; background-color: #991e23;}

  .index-about-content { width: 100%; position: relative; z-index: 2;}
  .index-about-content .column-lf-text { width: 100%; margin: 1.5vw 0 0 0; box-sizing: border-box;}
  .index-about-content .column-lf-text .text-bigger { width: 100%; font-size: 4vw; font-weight: 500; line-height: 7vw; letter-spacing: 0.1em;}
  .index-about-content .column-lf-text .text-smaller { width: 100%; margin: 1.5vw 0 0 0; font-size: 3.4vw; font-weight: 300; line-height: 6vw; letter-spacing: 0.1em;}
  .index-about-content .column-lf-text img.more-bt { clear: both; width: 50vw; height: auto; margin: 8vw 0 0 0;}
  .index-about-content .column-rt-pics { width: 100%;}
  .index-about-content .column-rt-pics img.photo-1 { width: 90%; height: auto; margin: 8vw 0 0 10%; position: relative; z-index: 2;}
  .index-about-content .column-rt-pics img.photo-2 { width: 60vw; height: auto; margin: -10vw 0 0 0; position: relative; z-index: 1;}

  .index-about-content .column-lf-text img.photo-3 { width: 60vw; height: auto; margin: 8vw 0 0 0;}


  /************ section #index-news ************/

  section#index-news { clear: both; width: 100%; padding: 6vw 4vw; box-sizing: border-box; background-color: #fff;}

  .index-news-title { width: 100%; margin: 0 auto; position: relative; z-index: 1;}
  .index-news-title span.title-b { color: rgba(165,165,165,0.8); font-size: 14vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 14vw;}
  .index-news-title span.title-s { padding: 0.2vw 2vw; color: #fff; font-size: 6vw; font-weight: 700; line-height: 6vw; background-color: #991e23;}
  .index-news-title img.more-bt { width: 50vw; height: auto; position: absolute; bottom: 0; right: 0;}

  .index-news-list { clear: both; width: 100%; margin: 8vw 0 0 0;}
  .index-news-list .news-box { width: 100%; margin: 0 0 4vw 0;}
  .index-news-list .news-box a { width: 100%; height: 100%; padding: 4vw; text-decoration: none; border: 1px #fff solid; box-sizing: border-box; display: block;}
  .index-news-list .news-box a:active { border: 1px #ccc solid;}
  .index-news-list .news-box .news-pic { width: 100%;}
  .index-news-list .news-box .news-pic img { width: 100%; height: auto;}
  .index-news-list .news-box .news-date { width: 100%; padding: 3vw 2vw; box-sizing: border-box;}
  .index-news-list .news-box .news-date span.date { padding: 0 3vw; color: #000; font-size: 4.6vw; border-radius: 3vw; background-color: #eaa61e;}
  .index-news-list .news-box .news-title { width: 100%; padding: 0 0.5vw; color: #000; font-size: 5vw; line-height: 7vw; letter-spacing: 0.1em; box-sizing: border-box;}



  ul.page-news-list-pagenum { clear: both; width: 100%; padding: 0; margin: 6vw 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  ul.page-news-list-pagenum li { padding: 0; margin: 0 1vw 2vw 1vw;}
  ul.page-news-list-pagenum li a { padding: 1vw; color: #eaa61e; font-size: 4vw; border: 1px #fff solid; text-decoration: none; display: block;}
  ul.page-news-list-pagenum li a:hover { border: 1px #eaa61e solid;}
  ul.page-news-list-pagenum li a.sel { color: #000; background-color: #eaa61e; border: 1px #eaa61e solid;}



  .page-news-content { clear: both; width: 100%; padding: 4vw 0 0 0; margin: 6vw 0 0 0; border-top: 1px #ccc solid; border-bottom: 1px #ccc solid;}
  .page-news-content .news-title { width: 100%; font-size: 5vw; font-weight: 500; line-height: 7vw; text-align: center;}
  .page-news-content .news-date { width: 100%; padding: 3vw 0 0 0; text-align: center;}
  .page-news-content .news-date span.date { padding: 0 2vw; color: #000; font-size: 3vw; border-radius: 2vw; background-color: #eaa61e;}
  .page-news-content .news-content { width: 100%; padding: 4vw 2vw; font-size: 3.6vw; line-height: 6vw; box-sizing: border-box;}
  .page-news-content .news-content a { color: #000; border-bottom: 1px #000 solid; text-decoration: none;}
  .page-news-content .news-content a:hover { color: #eaa61e; border-bottom: 1px #eaa61e solid;}
  .page-news-content .news-content img { clear: both; max-width: 100%; height: auto;}


  /************ section #index-service ************/

  section#index-service { clear: both; width: 100%; padding: 6vw 4vw 20vw 4vw; box-sizing: border-box; background-image: url("../images/index_service_bg.jpg"); background-repeat: no-repeat; background-size: cover; position: relative; z-index: 2;}

  .index-service-title { width: 100%; position: relative; z-index: 1;}
  .index-service-title span.title-b { width: 100%; color: #a5a5a5; font-size: 16vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 16vw; display: block;}
  .index-service-title span.title-s { padding: 0.5vw 2vw; color: #fff; font-size: 6vw; font-weight: 700; line-height: 6vw; background-color: #991e23;}

  .index-service-item-1 { clear: both; width: 100%; margin: 6vw 0 0 0; position: relative;}
  .index-service-item-1 .service-item-bg { width: 100%; padding: 6vw 4vw; box-sizing: border-box; background-color: #f5b11e; position: relative; z-index: 1;}
  .index-service-item-1 .service-item-bg .bigger { width: 100%; margin: 0 0 2vw 0; color: #000; font-size: 6vw; font-weight: 500; line-height: 6vw; letter-spacing: 0.1em;}
  .index-service-item-1 .service-item-bg .smaller { width: 100%; color: #000; font-size: 4vw; font-weight: 300; line-height: 7vw; letter-spacing: 0.1em;}
  .index-service-item-1 .service-item-bg .more-bt { width: 100%; margin: 2vw 0 0 0;}
  .index-service-item-1 .service-item-bg .more-bt img { width: 50vw; height: auto;}
  .index-service-item-1 img.service-item-pic { width: 100%; height: auto;}

  .index-service-item-2 { clear: both; width: 100%; margin: 6vw 0 0 0; position: relative;}
  .index-service-item-2 .service-item-bg { width: 100%; padding: 6vw 4vw; box-sizing: border-box; background-color: #a21e23; position: relative; z-index: 1;}
  .index-service-item-2 .service-item-bg .bigger { width: 100%; margin: 0 0 2vw 0; color: #fff; font-size: 6vw; font-weight: 500; line-height: 6vw; letter-spacing: 0.1em;}
  .index-service-item-2 .service-item-bg .smaller { width: 100%; color: #fff; font-size: 4vw; font-weight: 300; line-height: 7vw; letter-spacing: 0.1em;}
  .index-service-item-2 .service-item-bg .more-bt { width: 100%; margin: 2vw 0 0 0;}
  .index-service-item-2 .service-item-bg .more-bt img { width: 50vw; height: auto;}
  .index-service-item-2 img.service-item-pic { width: 100%; height: auto;}

  .index-service-item-3 { clear: both; width: 100%; margin: 6vw 0 0 0; position: relative;}
  .index-service-item-3 .service-item-bg { width: 100%; padding: 6vw 4vw; box-sizing: border-box; background-color: #158872; position: relative; z-index: 1;}
  .index-service-item-3 .service-item-bg .bigger { width: 100%; margin: 0 0 2vw 0; color: #fff; font-size: 6vw; font-weight: 500; line-height: 6vw; letter-spacing: 0.1em;}
  .index-service-item-3 .service-item-bg .smaller { width: 100%; color: #fff; font-size: 4vw; font-weight: 300; line-height: 7vw; letter-spacing: 0.1em;}
  .index-service-item-3 .service-item-bg .more-bt { width: 100%; margin: 2vw 0 0 0;}
  .index-service-item-3 .service-item-bg .more-bt img { width: 50vw; height: auto;}
  .index-service-item-3 img.service-item-pic { width: 100%; height: auto;}

  img.index-reviews-order { width: 60vw; height: auto; position: absolute; bottom: -13vw; left: calc(50% - 28vw);}


  /************ section #index-reviews ************/

  section#index-reviews { clear: both; width: 100%; padding: 40vw 4vw 6vw 4vw; box-sizing: border-box; background-color: #4d4d4d; background-image: url("../images/index_reviews_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: top center; position: relative; z-index: 1;}

  .index-reviews-title { width: 100%; text-align: center;}
  .index-reviews-title span.title-b { color: rgba(255,255,255,0.5); font-size: 16vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 16vw;}
  .index-reviews-title span.title-s { padding: 0.2vw 2vw; color: #fff; font-size: 6vw; font-weight: 700; line-height: 7vw; background-color: #991e23;}

  .index-reviews-text { clear: both; width: 100%; color: #fff; font-size: 4vw; font-weight: 300; letter-spacing: 0.1em; text-align: center;}

  .index-reviews-list { clear: both; width: 90vw; margin: 4vw auto 0 auto;}
  .index-reviews-list .reviews-box { width: calc(100% - 3vw); margin: 0 1.5vw; padding: 4vw; box-sizing: border-box; background-color: #eba71e;}
  .index-reviews-list .reviews-box .icon { width: 100%; margin: 0 0 4vw 0; color: #fff; font-size: 6vw; text-align: center;}
  .index-reviews-list .reviews-box .text { width: 100%; color: #000; font-size: 4vw; line-height: 7vw;}

  .index-reviews-list .slick-arrow { clear: both; width: 100%; margin: 4vw 0 0 0; display: flex; justify-content: center; align-items: center;}
  .index-reviews-list .slick-arrow img.reviews-slick-arrow-prev, 
  .index-reviews-list .slick-arrow img.reviews-slick-arrow-next { width: 4vw; height: auto; margin: 0 5vw; cursor: pointer;}


  /************ section #index-knowledge ************/

  section#index-knowledge { clear: both; width: 100%; padding: 6vw 0 6vw 4vw; box-sizing: border-box; background-image: url("../images/index_knowledge_bg.jpg"); background-repeat: no-repeat; background-size: cover; background-position: center center;}

  .index-knowledge-title { width: 100%; position: relative; z-index: 1;}
  .index-knowledge-title span.title-b { color: rgba(165,165,165,0.8); font-size: 14vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 14vw;}
  .index-knowledge-title span.title-s { padding: 0.2vw 2vw; color: #fff; font-size: 6vw; font-weight: 700; line-height: 7vw; background-color: #158072;}

  ul.index-knowledge-list { clear: both; width: 60vw; padding: 0; margin: 4vw 0 0 0; box-sizing: border-box; list-style: none; display: block;}
  ul.index-knowledge-list li { width: 100%; padding: 2vw 0; margin: 0; color: #000; border-bottom: 1px #8b8b8b solid;}
  ul.index-knowledge-list li a { width: 100%; color: #333; font-size: 4vw; text-decoration: none; display: flex; justify-content: flex-start; align-items: flex-start;}
  ul.index-knowledge-list li a:hover { color: #158872;}
  ul.index-knowledge-list li a .num { width: 6vw;}
  ul.index-knowledge-list li a .title { width: calc(100% - 6vw);}

  img.index-knowledge-more-bt { clear: both; width: 50vw; height: auto; margin: 6vw 0 0 0;}



  ul.page-knowledge-pagenum { clear: both; width: 60vw; padding: 0; margin: 6vw 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  ul.page-knowledge-pagenum li { padding: 0; margin: 0 1vw 2vw 1vw;}
  ul.page-knowledge-pagenum li a { padding: 1vw; color: #158872; font-size: 4vw; border: 1px transparent solid; text-decoration: none; display: block;}
  ul.page-knowledge-pagenum li a:hover { border: 1px #158872 solid;}
  ul.page-knowledge-pagenum li a.sel { color: #fff; background-color: #158872; border: 1px #158872 solid;}



  section#page-knowledge { clear: both; width: 100%; padding: 4.5vw 6vw 6vw 6vw; box-sizing: border-box; background-image: url("../images/page_knowledge_bg.jpg"); background-repeat: no-repeat; background-size: cover;}

  .page-knowledge-content { clear: both; width: 100%; margin: 3vw 0 0 0;}
  .page-knowledge-content .knowledge-title { width: 100%; padding: 0 0 2vw 0; font-size: 4vw; font-weight: 500; border-bottom: 1px #000 solid; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-knowledge-content .knowledge-title .num { width: 6vw;}
  .page-knowledge-content .knowledge-title .title { width: calc(100% - 6vw);}
  .page-knowledge-content .knowledge-content { width: 100%; padding: 2vw 0; font-size: 3.4vw; line-height: 6vw;}
  .page-knowledge-content .knowledge-content img { clear: both; max-width: 100%; height: auto;}


  /************ section #index-shopping ************/

  section#index-shopping { clear: both; width: 100%; padding: 6vw 0; box-sizing: border-box;}

  .index-shopping-title { width: 100%; padding: 0 4vw; box-sizing: border-box;}
  .index-shopping-title span.title-b { clear: both; width: 100%; color: rgba(165,165,165,0.8); font-size: 16vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 16vw; display: block;}
  .index-shopping-title span.title-s { padding: 0.5vw 2vw; color: #fff; font-size: 6vw; font-weight: 700; line-height: 7vw; background-color: #991e23;}

  .index-shopping-list { clear: both; width: 100%; margin: 4vw 0 0 0;}
  .index-shopping-list ul.shopping-sort-tab { clear: both; width: 100%; padding: 0; margin: 0; list-style: none; display: flex; justify-content: center; align-items: center;}
  .index-shopping-list ul.shopping-sort-tab li { padding: 0 2vw; margin: 0; font-size: 6vw; font-weight: 500; letter-spacing: 0.1em;}
  .index-shopping-list ul.shopping-sort-tab li a { padding: 0.4vw 2vw; color: #000; text-decoration: none; display: block;}
  .index-shopping-list ul.shopping-sort-tab li a:hover { background-color: #eee;}
  .index-shopping-list ul.shopping-sort-tab li a.sel { background-color: #eba71e;}

  .index-shopping-list .shopping-pro-list { clear: both; width: 100%;}
  .index-shopping-list .shopping-pro-list .shopping-pro-con { clear: both; width: 100%;}
  .index-shopping-list .shopping-pro-list .shopping-pro-con .pro-list-full { width: 100%; padding: 6vw 0 2vw 0; background-color: #eba71e;}
  .index-shopping-list .shopping-pro-list .shopping-pro-con .pro-list-full .pro-list-box { width: auto;}
  .index-shopping-list .shopping-pro-list .shopping-pro-con .pro-list-full .pro-list-box a { width: 100%; height: 100%; text-decoration: none; display: block;}
  .index-shopping-list .shopping-pro-list .shopping-pro-con .pro-list-full .pro-list-box .pro-pic { width: 100%;}
  .index-shopping-list .shopping-pro-list .shopping-pro-con .pro-list-full .pro-list-box .pro-pic img { width: auto; height: 60vw;}
  .index-shopping-list .shopping-pro-list .shopping-pro-con .pro-list-full .pro-list-box .pro-name { width: 100%; padding: 2vw 0 0 0; color: #000; font-size: 4vw; font-weight: 300; letter-spacing: 0.1em; text-align: center;}
  .index-shopping-list .shopping-pro-list .shopping-pro-con .pro-list-full .pro-list-box .pro-price { width: 100%; color: #fff; font-size: 6vw; text-align: center;}
  .index-shopping-list .shopping-pro-list .shopping-pro-con .pro-list-arrow { clear: both; width: 100%; padding: 5vw 0; display: flex; justify-content: flex-start; align-items: center; position: relative;}
  .index-shopping-list .shopping-pro-list .shopping-pro-con .pro-list-arrow img.pro-list-arrow-prev, 
  .index-shopping-list .shopping-pro-list .shopping-pro-con .pro-list-arrow img.pro-list-arrow-next { width: 4vw; height: auto; margin: 0 5vw; cursor: pointer;}
  
  img.index-shopping-more-bt { width: 50vw; height: auto; position: absolute; top: 4vw; right: 4vw;}


  /** 20240520修改 **/
  .page-prod-list-full { clear: both; width: 100%; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-prod-list-full .prod-box { width: calc(100% / 2 - 1vw); margin: 0 0.5vw 1vw 0.5vw;}
  .page-prod-list-full .prod-box a { width: 100%; padding: 0.2vw; border: 1px #fff solid; box-sizing: border-box; text-decoration: none; display: block;}
  .page-prod-list-full .prod-box .prod-pic { width: 100%;}
  .page-prod-list-full .prod-box .prod-pic img { width: 100%; height: auto;}
  .page-prod-list-full .prod-box .prod-name { width: 100%; padding: 0.5vw 0 0 0; color: #000; font-size: 1.6vw; font-weight: 300; letter-spacing: 0.1em; text-align: center;}
  .page-prod-list-full .prod-box .prod-price { width: 100%; color: #a21e23; font-size: 2.4vw; text-align: center;}
  .page-prod-list-full .prod-box a:active { border: 1px #ccc solid;}


  ul.page-pro-pagenum { clear: both; width: 100%; padding: 0; margin: 6vw 0 0 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  ul.page-pro-pagenum li { padding: 0; margin: 0 1vw 2vw 1vw;}
  ul.page-pro-pagenum li a { padding: 1vw; color: #eaa61e; font-size: 4vw; border: 1px #fff solid; text-decoration: none; display: block;}
  ul.page-pro-pagenum li a:hover { border: 1px #eaa61e solid;}
  ul.page-pro-pagenum li a.sel { color: #fff; background-color: #eaa61e; border: 1px #eaa61e solid;}


  /************ section #page-banner ************/

  section#page-banner { width: 100%; padding: 20vw 0 0 0; background-image: url("../images/header_banner_bg.png"); background-repeat: no-repeat; background-size: 80% auto; background-position: left top; overflow: hidden; position: relative; z-index: 1;}

  img.page-banner { clear: both; width: 150%; height: auto; margin: 0 0 0 -20%;}

  #breadcrumbs-bar { clear: both; width: 100%; padding: 1.5vw 0 1.5vw 24vw; box-sizing: border-box; color: #333; font-size: 3vw;}
  #breadcrumbs-bar a { color: #333; text-decoration: none;}
  #breadcrumbs-bar a:hover { border-bottom: 1px #333 solid;}


  /************ section #about-HTL ************/

  section#about-HTL { clear: both; width: 100%; padding: 6vw 0 0 0;}

  .about-HTL-title { width: 100%; text-align: center; position: relative; z-index: 1;}
  .about-HTL-title span.title-b { color: #d7d7d7; font-size: 16vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 16vw;}
  .about-HTL-title span.title-s { padding: 0.2vw 1.5vw; color: #fff; font-size: 6vw; font-weight: 700; line-height: 7vw; background-color: #991e23;}

  .about-HTL-col-1 { clear: both; width: 100%; margin: 2vw 0; display: flex; justify-content: flex-start; align-items: stretch;}
  .about-HTL-col-1 .col-color { width: 30%;}
  .about-HTL-col-1 .col-color div { width: 100%; height: 100%; margin: 0 1vw 0 0; background-color: #158072; display: block; float: right;}
  .about-HTL-col-1 .col-text { width: 70%; padding: 4vw 0; box-sizing: border-box; border-bottom: 1px #a4a4a4 solid; display: flex; align-items: center;}
  .about-HTL-col-1 .col-text div { width: 100%; padding: 0 4vw; box-sizing: border-box; font-size: 3vw; line-height: 5vw;}
  .about-HTL-col-1 .col-text div span.title { font-size: 6vw; font-weight: 500;}

  .about-HTL-col-2 { clear: both; width: 100%; margin: 2vw 0; display: flex; justify-content: flex-start; align-items: stretch;}
  .about-HTL-col-2 .col-text { width: calc(70% - 1vw); padding: 4vw 0; margin: 0 1vw 0 0; border-bottom: 1px #a4a4a4 solid; display: flex; justify-content: flex-end; align-items: center;}
  .about-HTL-col-2 .col-text div { width: 100%; padding: 0 4vw; box-sizing: border-box; font-size: 3vw; line-height: 5vw;}
  .about-HTL-col-2 .col-text div span.title { font-size: 6vw; font-weight: 500;}
  .about-HTL-col-2 .col-color { width: 30%;}
  .about-HTL-col-2 .col-color div { width: 100%; height: 100%; background-color: #eaa61e; display: block;}

  .about-HTL-col-3 { clear: both; width: 100%; margin: 2vw 0; display: flex; justify-content: flex-start; align-items: stretch;}
  .about-HTL-col-3 .col-color { width: 30%;}
  .about-HTL-col-3 .col-color div { width: 100%; height: 100%; margin: 0 1vw 0 0; background-color: #981e23; display: block; float: right;}
  .about-HTL-col-3 .col-text { width: 70%; padding: 4vw 0; border-bottom: 1px #a4a4a4 solid; display: flex; align-items: center;}
  .about-HTL-col-3 .col-text div { width: 100%; padding: 0 4vw; box-sizing: border-box; font-size: 3vw; line-height: 5vw;}
  .about-HTL-col-3 .col-text div span.title { font-size: 6vw; font-weight: 500;}

  .about-HTL-col-4 { clear: both; width: 100%; padding: 8vw 0; margin: 2vw 0 0 0; background-image: url("../images/about_HTL_col_4_bg.jpg"); background-repeat: no-repeat; background-size: calc(60% - 1vw) auto; background-position: left top; display: flex; justify-content: center; align-items: center;}
  .about-HTL-col-4 img.logo { width: 28vw; height: auto; margin: 0 2.3vw 0 0;}
  .about-HTL-col-4 .col-text { width: 46vw; font-size: 3vw; font-weight: 500; line-height: 4.2vw;}
  .about-HTL-col-4 .col-text img { width: 100%; height: auto; margin: 0 0 1.5vw 0;}


  /************ section #page-service ************/

  section#page-service { clear: both; width: 100%; padding: 6vw 0 8vw 0; box-sizing: border-box; background-image: url("../images/index_about_bg.jpg"); background-repeat: no-repeat; background-size: cover; position: relative; z-index: 2;}

  .page-service-title { width: 100%; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; position: relative; z-index: 1;}
  .page-service-title span.title-b { color: #fff; font-size: 16vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 16vw;}
  .page-service-title span.title-s { padding: 0.5vw 1.5vw; color: #fff; font-size: 6vw; font-weight: 700; line-height: 7vw; background-color: #991e23;}

  .page-service-items { clear: both; width: 100%; margin: 3vw 0 0 0;}
  .page-service-items .service-item-box { width: 80%; margin: 0 auto;}
  .page-service-items .service-item-box a { width: 100%; height: 100%; text-decoration: none; display: block;}
  .page-service-items .service-item-box .photo { width: 100%;}
  .page-service-items .service-item-box .photo img { width: 100%; height: auto;}
  .page-service-items .service-item-box .title { width: 100%; padding: 2vw 0; font-size: 4vw; font-weight: 500; text-align: center;}
  .page-service-items .service-item-box .title.bg-red { color: #fff; background-color: #981e23;}
  .page-service-items .service-item-box .title.bg-yellow { color: #000; background-color: #eaa61e;}
  .page-service-items .service-item-box .title.bg-green { color: #fff; background-color: #158072;}


  section#service-item-list { clear: both; width: 100%; padding: 0 0 3.5vw 4vw; box-sizing: border-box; background-color: #fff;}

  .service-item-intro-more { clear: both; width: 100%; margin: 3.5vw 0 0 0; position: relative; overflow: hidden;}
  .service-item-intro-more img.service-item-bg { width: 150%; height: auto; position: relative; z-index: 1;}
  .service-item-intro-more .serv-item-con { width: 80vw; padding: 3.5vw 0 0 2.5vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: flex-start; position: absolute; top: 0; left: 0; z-index: 2;}
  .service-item-intro-more .serv-item-con .col-lf-num { width: 15vw; font-size: 12vw; font-weight: 700; font-family: Arial;}
  .service-item-intro-more .serv-item-con .col-lf-num.color-red { color: #971e23;}
  .service-item-intro-more .serv-item-con .col-lf-num.color-yellow { color: #e9a51e;}
  .service-item-intro-more .serv-item-con .col-lf-num.color-green { color: #158072;}
  .service-item-intro-more .serv-item-con .col-rt-intro { width: calc(100% - 15vw);}
  .service-item-intro-more .serv-item-con .col-rt-intro .title-more { width: 100%; margin: 3vw 0 0 0; display: flex; justify-content: space-between; align-items: flex-end;}
  .service-item-intro-more .serv-item-con .col-rt-intro .title-more span.title { font-size: 6vw; font-weight: 500; line-height: 6vw;}
  .service-item-intro-more .serv-item-con .col-rt-intro .title-more img.more-bt { width: 30vw; height: auto;}
  .service-item-intro-more .serv-item-con .col-rt-intro .text-con { width: 100%; margin: 3vw 0 0 0; padding: 0 2vw 0 0; font-size: 2.6vw; line-height: 4vw; box-sizing: border-box;}


  /************ section #page-serv-item ************/

  section#page-serv-item-1 { clear: both; width: 100%; background-image: url(../images/page_service_items_bg.png); background-repeat: repeat-y; background-size: 120% auto; background-position: center top;}

  .page-serv-items-title { width: 100%; padding: 44vw 0 0 2vw; box-sizing: border-box; display: flex; justify-content: flex-start; align-items: center; position: absolute; top: 0; left: 0; z-index: 2;}
  .page-serv-items-title span.title-b { color: #fff; font-size: 14vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 14vw;}
  .page-serv-items-title span.title-s { padding: 0.5vw 1.5vw; color: #fff; font-size: 5.4vw; font-weight: 700; line-height: 6.4vw; background-color: #991e23;}

  .page-serv-item-con { clear: both; width: 100%; padding: 2.5vw 0;}
  .page-serv-item-con .content { width: 90vw; margin: 0 auto; display: flex; justify-content: flex-start; align-items: flex-start;}
  .page-serv-item-con .content .col-lf-num { width: 18vw; padding: 0 0 0 2vw; font-size: 12vw; font-weight: 700; font-family: Arial; box-sizing: border-box;}
  .page-serv-item-con .content .col-lf-num.color-red { color: #971e23;}
  .page-serv-item-con .content .col-lf-num.color-yellow { color: #e9a51e;}
  .page-serv-item-con .content .col-lf-num.color-green { color: #158072;}
  .page-serv-item-con .content .col-rt-intro { width: calc(100% - 18vw);}
  .page-serv-item-con .content .col-rt-intro .title { width: 100%; margin: 2.6vw 0 0 0; font-size: 6vw; font-weight: 500; line-height: 6vw; display: flex; justify-content: space-between; align-items: flex-end;}
  .page-serv-item-con .content .col-rt-intro .text-con { width: 100%; margin: 2vw 0 0 0; padding: 0 6vw 2.5vw 0; font-size: 2.6vw; line-height: 4vw; box-sizing: border-box;}
  .page-serv-item-con .sub-title { clear: both; width: 93vw; margin: 4vw auto; color: #fff; font-size: 13vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 10vw; text-align: right;}
  .page-serv-item-con .interior { clear: both; width: 100%; margin: 3vw 0 0 0; position: relative;}
  .page-serv-item-con .interior .intro-people { width: 100%; position: relative; z-index: 1;}
  .page-serv-item-con .interior .intro-people img { width: 100%; height: auto;}
  .page-serv-item-con .interior .intro-text { clear: both; width: 80vw; margin: 4vw auto 0 auto;}
  .page-serv-item-con .interior .intro-text .title { width: 100%; color: #971e23; font-size: 6vw; font-weight: 500; line-height: 9vw; border-bottom: 1px #971e23 solid;}
  .page-serv-item-con .interior .intro-text .intro { width: 100%; padding: 0.5vw 0 1.5vw 0; font-size: 3.6vw; font-weight: 500; line-height: 5vw;}
  .page-serv-item-con .interior .intro-text .infor { width: 100%; font-size: 3vw; line-height: 5vw;}
  .page-serv-item-con .interior .intro-text .infor .name { width: 100%; font-size: 3.4vw; font-weight: 500; line-height: 4vw;}
  .page-serv-item-con .award-exp { clear: both; width: 90vw; padding: 4vw 4.5vw 4vw 4.5vw; margin: 0 auto; box-sizing: border-box;}
  .page-serv-item-con .award-exp .title { width: 100%; color: #971e23; font-size: 6vw; font-weight: 500; line-height: 9vw; text-align: center; border-bottom: 1px #971e23 solid;}
  .page-serv-item-con .award-exp .award-exp-list { width: 100%; padding: 2vw 0 0 0; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-serv-item-con .award-exp .award-exp-list .year { width: 9vw; padding: 0.3vw 0; color: #000; font-size: 3vw; line-height: 5vw;}
  .page-serv-item-con .award-exp .award-exp-list .infor { width: calc(100% - 9vw); padding: 0.3vw 0; color: #000; font-size: 3vw; line-height: 5vw;}


  section#page-serv-items-works { clear: both; width: 100%;}

  .page-serv-works-title { width: 90vw; margin: 2.5vw auto; color: #971e23; font-size: 6vw; font-weight: 500; line-height: 9vw; text-align: center; border-bottom: 1px #971e23 solid; box-sizing: border-box;}

  .page-serv-works-list { clear: both; width: 100%;}
  .page-serv-works-list img { width: auto; height: 60vw;}

  .page-serv-item-back-bt { clear: both; width: 100%;}
  .page-serv-item-back-bt a { display: block;}
  .page-serv-item-back-bt a img { width: 40vw; height: auto; margin: 4vw auto;}


  /** 20240516新增 **/
  .page-serv-works-bt { width: 40vw; margin: 5vw auto;}
  .page-serv-works-bt a { width: 100%; padding: 1vw 0; color: #fff; font-size: 5vw; text-align: center; text-decoration: none; border-radius: 5vw; background-color: #971e23; display: block;}

  .page-serv-works-list { clear: both; width: 90vw; margin: 0 auto;}
  .page-serv-works-list img { width: 100%; height: auto; margin: 0 0 2vw 0;}


  .page-serv-item-con .inspection-steps { clear: both; width: 100%; margin: 3vw 0 0 0; overflow: hidden;}
  .page-serv-item-con .inspection-steps .title-box { width: 110vw; margin: 0 0 4.5vw -24vw; position: relative;}
  .page-serv-item-con .inspection-steps .title-box img.title-bg { width: 100%; height: auto; position: relative; z-index: 1;}
  .page-serv-item-con .inspection-steps .title-box span.title-text { color: #fff; font-size: 7vw; font-weight: 500; border-bottom: 1px #fff solid; position: absolute; top: 4vw; right: 24vw; z-index: 2;}
  .page-serv-item-con .inspection-steps .steps-content { clear: both; width: 76vw; margin: 0 auto 2vw auto;}
  .page-serv-item-con .inspection-steps .steps-content .step-box { clear: both; width: 100%; margin: 0 0 4vw 0; position: relative;}
  .page-serv-item-con .inspection-steps .steps-content .step-box .top-title-bar { width: 100%; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .page-serv-item-con .inspection-steps .steps-content .step-box .top-title-bar img.step-icon { width: 14vw; height: auto; margin: 0 2vw 0 0;}
  .page-serv-item-con .inspection-steps .steps-content .step-box .top-title-bar span.step-num { padding: 0 3vw; font-size: 6vw; font-weight: 500; line-height: 8vw; border-radius: 2vw; background-color: #e9a51e;}
  .page-serv-item-con .inspection-steps .steps-content .step-box .top-title-bar span.step-title { padding: 0 0 0 2vw; font-size: 6vw; font-weight: 500; line-height: 8vw;}
  .page-serv-item-con .inspection-steps .steps-content .step-box .text-con { clear: both; width: 100%; padding: 2vw 0 0 0; font-size: 4.6vw; font-weight: 300; line-height: 7vw; box-sizing: border-box;}
  .page-serv-item-con .inspection-steps .steps-content .step-box img.pre-order-bt { clear: both; width: 40vw; height: auto; margin: 4vw auto;}
  .page-serv-item-con .inspection-steps .steps-content .step-box img.arrow-down { width: 6vw; height: auto; margin: 2vw auto 0 auto;}

  section#page-serv-item-2 { clear: both; width: 100%; padding: 6.5vw 0 0 0; overflow: hidden;}

  .inspection-serv-list-title { width: 110vw; margin: 0 0 3.5vw -24vw; position: relative; z-index: 2;}
  .inspection-serv-list-title img.title-bg { width: 100%; height: auto; position: relative; z-index: 1;}
  .inspection-serv-list-title span.title-text { color: #fff; font-size: 7vw; font-weight: 500; border-bottom: 1px #fff solid; position: absolute; top: 4vw; right: 24vw; z-index: 2;}

  .inspection-serv-items-list { clear: both; width: 100%; padding: 7vw 10vw 2vw 10vw; margin: -7vw auto 0 auto; box-sizing: border-box; background-image: url(../images/page_service_items_bg.png); background-repeat: repeat-y; background-size: 120% auto; background-position: center top; position: relative; z-index: 1;}

  ul.inspection-serv-list { width: 100%; padding: 0 4vw; margin: 0 0 4.5vw 0; box-sizing: border-box; list-style: none; display: block;}
  ul.inspection-serv-list ::marker { content: "● "; font-size: 5vw; line-height: 6vw;}
  ul.inspection-serv-list li { width: 100%; padding: 0; margin: 0; font-size: 5vw; font-weight: 500; line-height: 6vw;}
  ul.inspection-serv-list li ul.serv-list { width: 100%; padding: 0; margin: 2.5vw 0 0 0; list-style: none; display: block;}
  ul.inspection-serv-list li ul.serv-list ::marker { content: "";}
  ul.inspection-serv-list li ul.serv-list li { width: 100%; padding: 0; margin: 0; font-size: 3.8vw; font-weight: 300; line-height: 5.5vw;}


  .page-serv-works-title-green { width: 90vw; margin: 2.5vw auto; color: #158072; font-size: 6vw; font-weight: 500; line-height: 9vw; text-align: center; border-bottom: 1px #158072 solid; box-sizing: border-box;}

  .decoration-steps-list { clear: both; width: 100%; margin: 2vw 0 0 0;}
  .decoration-steps-list .title-box { width: 110vw; margin: 0 0 4.5vw -24vw; position: relative;}
  .decoration-steps-list .title-box img.title-bg { width: 100%; height: auto; position: relative; z-index: 1;}
  .decoration-steps-list .title-box span.title-text { color: #fff; font-size: 7vw; font-weight: 500; border-bottom: 1px #fff solid; position: absolute; top: 4vw; right: 24vw; z-index: 2;}

  .decoration-steps-con { clear: both; width: 90vw; padding: 4vw 0; margin: 0 auto;}
  .decoration-steps-con .steps-list-row { display: none;}
  .decoration-steps-con .steps-list-row-mo { clear: both; width: 100%; margin: 0 0 5vw 0; display: flex; justify-content: center; align-items: center;}
  .decoration-steps-con .steps-list-row-mo .step-box { width: 35vw;}
  .decoration-steps-con .steps-list-row-mo .step-box .top-title-bar { width: 100%; margin: 0 0 2vw 0; text-align: center;}
  .decoration-steps-con .steps-list-row-mo .step-box .top-title-bar span.step-num { padding: 0 1.5vw; color: #fff; font-size: 3.6vw; font-weight: 500; line-height: 5vw; border-radius: 1.5vw; background-color: #158072;}
  .decoration-steps-con .steps-list-row-mo .step-box .top-title-bar span.title { font-size: 3.6vw; font-weight: 500; line-height: 5vw;}
  .decoration-steps-con .steps-list-row-mo .step-box img.step-icon { clear: both; width: 16vw; height: auto; margin: 0 auto;}
  .decoration-steps-con .steps-list-row-mo img.arrow-right { width: 15vw; height: auto;}
  .decoration-steps-con .steps-list-row-mo .step-box-2 { width: 35vw;}
  .decoration-steps-con .steps-list-row-mo .step-box-2 .top-title-bar { width: 100%; margin: 0 0 2vw 0; text-align: center;}
  .decoration-steps-con .steps-list-row-mo .step-box-2 .top-title-bar span.step-num { padding: 0 1.5vw; color: #fff; font-size: 3.6vw; font-weight: 500; line-height: 5vw; border-radius: 0.8vw; background-color: #158072;}
  .decoration-steps-con .steps-list-row-mo .step-box-2 .top-title-bar span.title { font-size: 3.6vw; font-weight: 500; line-height: 5vw;}
  .decoration-steps-con .steps-list-row-mo .step-box-2 img.step-icon { clear: both; width: 25vw; height: auto; margin: 0 auto;}

  img.page-serv-item-3-preorder-bt { clear: both; width: 28vw; height: auto; margin: 0 auto;}


  /************ section #page-reviews ************/

  section#page-reviews { clear: both; width: 100%; padding: 6vw 4vw; background-color: #4d4d4d; box-sizing: border-box;}

  .page-reviews-title { width: 100%; margin: 2.5vw 0; text-align: center;}
  .page-reviews-title span.title-b { color: rgba(255,255,255,0.5); font-size: 16vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 16vw;}
  .page-reviews-title span.title-s { padding: 0.2vw 1.5vw; color: #fff; font-size: 6vw; font-weight: 700; line-height: 7vw; background-color: #991e23;}

  .page-reviews-article-list { clear: both; width: 100%; margin: 4vw 0 0 0;}
  .page-reviews-article-list .reviews-article-box { clear: both; width: 100%; margin: 4vw auto;}
  .page-reviews-article-list .reviews-article-box .col-photo { display: none;}
  .page-reviews-article-list .reviews-article-box .col-photo-mo { width: 100%;}
  .page-reviews-article-list .reviews-article-box .col-photo-mo img { width: 100%; height: auto;}
  .page-reviews-article-list .reviews-article-box .col-text { width: 100%; padding: 3vw; color: #fff; font-size: 3.6vw; line-height: 5.6vw; background-color: #eba71e; box-sizing: border-box;}
  .page-reviews-article-list .reviews-article-box .col-text span.nickname { color: #eee; font-size: 3vw;}


  /************ section #page-qanda ************/

  section#page-qanda { clear: both; width: 100%; padding: 8vw 4vw; box-sizing: border-box; background-image: url("../images/index_service_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto;}

  .page-qanda-title { width: 100%; margin: 0 0 3vw 0;}
  .page-qanda-title span.title-b { color: #a5a5a5; font-size: 16vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 16vw;}

  .page-qanda-list { width: 100%;}
  .page-qanda-list ul.qanda-list-box { width: 100%; padding: 0; margin: 0; border-top: 1px #000 solid; list-style: none; display: block;}
  .page-qanda-list ul.qanda-list-box li { width: 100%; padding: 0; margin: 0; border-bottom: 1px #000 solid;}
  .page-qanda-list ul.qanda-list-box li .qanda-title { width: 100%; padding: 4vw 0; display: flex; justify-content: flex-start; align-items: flex-start; cursor: pointer;}
  .page-qanda-list ul.qanda-list-box li .qanda-title:active { color: #971e23;}
  .page-qanda-list ul.qanda-list-box li .qanda-title .icon { width: 6vw; font-size: 4vw; line-height: 6vw;}
  .page-qanda-list ul.qanda-list-box li .qanda-title .title { width: calc(100% - 12vw); font-size: 4vw; font-weight: 500; line-height: 6vw;}
  .page-qanda-list ul.qanda-list-box li .qanda-title .open { width: 6vw; font-size: 4vw; line-height: 6vw; text-align: right;}
  .page-qanda-list ul.qanda-list-box li .qanda-title .close { width: 6vw; font-size: 4vw; line-height: 6vw; text-align: right; display: none;}
  .page-qanda-list ul.qanda-list-box li .qanda-con { width: 100%; padding: 4vw 0; border-top: 1px #ccc solid; display: none; justify-content: flex-start; align-items: flex-start; box-sizing: border-box; transition: 0.5s;}
  .page-qanda-list ul.qanda-list-box li .qanda-con .icon { width: 6vw; font-size: 4vw; line-height: 6vw;}
  .page-qanda-list ul.qanda-list-box li .qanda-con .text { width: calc(100% - 6vw); font-size: 3.4vw; font-weight: 300; line-height: 6vw;}
  .page-qanda-list ul.qanda-list-box li .qanda-con .text img { clear: both; max-width: 100%; height: auto;}


  /** 20240522新增 **/
  ul.page-qanda-nav { width: 100%; padding: 0; margin: 6vw 0; list-style: none; display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;}
  ul.page-qanda-nav li { padding: 0; margin: 1vw;}
  ul.page-qanda-nav li a { padding: 1vw 3vw; color: #000; font-size: 4vw; text-decoration: none; border-radius: 1.6vw; border: 1px #000 solid; display: block;}
  ul.page-qanda-nav li a:hover { background-color: #fff;}
  ul.page-qanda-nav li a.sel { background-color: #fff;}


  /************ page-pro-content ************/

  .page-pro-content { clear: both; width: 100%; padding: 4vw 8vw 0 8vw; box-sizing: border-box;}
  .page-pro-content .col-lf-nav { width: 100%;}
  .page-pro-content .col-lf-nav input[type=search] { width: 100%; padding: 2vw; color: #000; font-size: 4vw; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .page-pro-content .col-lf-nav .sort-title { display: none;}
  .page-pro-content .col-lf-nav .sort-title-mo { width: 100%; padding: 1.5vw 3vw; margin: 4vw 0 0 0; font-size: 4vw; font-weight: 500; border-radius: 2vw; background-color: #eba71e; box-sizing: border-box; display: none; justify-content: space-between; align-items: center;}
  .page-pro-content .col-lf-nav ul.pro-sort-nav { clear: both; width: 100%; padding: 3vw 2vw; margin: 0; background-color: #eee; list-style: none; display: none; box-sizing: border-box;}
  .page-pro-content .col-lf-nav ul.pro-sort-nav li { width: 100%; padding: 0; margin: 0;}
  .page-pro-content .col-lf-nav ul.pro-sort-nav li a { width: 100%; padding: 2vw; color: #000; font-size: 4vw; font-weight: 300; text-decoration: none; display: block; box-sizing: border-box; cursor: pointer;}
  .page-pro-content .col-lf-nav ul.pro-sort-nav li a:hover { font-weight: 400; background-color: #eee;}
  .page-pro-content .col-lf-nav ul.pro-sort-nav li ul.sort-nav-popup { width: 100%; padding: 2vw 0 2vw 3vw; margin: 0; list-style: none; display: none; box-sizing: border-box;}
  .page-pro-content .col-lf-nav ul.pro-sort-nav li ul.sort-nav-popup li { width: 100%; padding: 0; margin: 0;}
  .page-pro-content .col-lf-nav ul.pro-sort-nav li ul.sort-nav-popup li a { width: 100%; padding: 1.5vw; color: #000; font-size: 3.4vw; font-weight: 300; text-decoration: none; display: block; box-sizing: border-box; cursor: pointer;}
  .page-pro-content .col-lf-nav ul.pro-sort-nav li ul.sort-nav-popup li a:hover { font-weight: 400; background-color: #eee;}

  /** 20240520新增 **/
  .page-pro-content .col-lf-nav .all-sort-title-mo {width: 100%; padding: 1.5vw 3vw; margin: 4vw 0 0 0; color: #fff; font-size: 4vw; font-weight: 500; border-radius: 2vw; background-color: #158872; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center;}
  
  .page-pro-content .col-rt-con { width: 100%; margin: 6vw 0 0 0;}
  .page-pro-content .col-rt-con .pro-pic { width: 100%; margin: 0 0 4vw 0;}
  .page-pro-content .col-rt-con .pro-pic img { width: 100%; height: auto;}
  .page-pro-content .col-rt-con .pro-infor { width: 100%;}
  .page-pro-content .col-rt-con .pro-infor .pro-title { width: 100%; padding: 0 0 2vw 0; font-size: 4vw; font-weight: 500; border-bottom: 1px #ccc solid;}
  .page-pro-content .col-rt-con .pro-infor .pro-feature { width: 100%; padding: 2vw 0; margin: 0 0 4vw 0; font-size: 4vw; font-weight: 300; line-height: 5.8vw; border-bottom: 1px #ccc solid;}
  .page-pro-content .col-rt-con .pro-infor .pro-feature .title { width: 100%; font-size: 4vw; font-weight: 400;}
  .page-pro-content .col-rt-con .pro-infor .pro-quantity { width: 100%; padding: 2vw 0; font-size: 4vw;}
  .page-pro-content .col-rt-con .pro-infor .pro-quantity input[type=number] { width: 20vw; padding: 0.8vw 2vw; color: #000; font-size: 3.6vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid;}
  .page-pro-content .col-rt-con .pro-infor .pro-price { width: 100%; font-size: 4vw;}
  .page-pro-content .col-rt-con .pro-infor .pro-price span.price { color: #971e23; font-size: 5.4vw; font-weight: 600;}
  .page-pro-content .col-rt-con .pro-intro { width: 100%; margin: 6vw 0 0 0;}
  .page-pro-content .col-rt-con .pro-intro .title { width: 100%; padding: 0 0 1vw 0; font-size: 4vw; text-align: center; border-top: 1px #ccc solid; border-bottom: 1px #ccc solid; background-color: #eee;}
  .page-pro-content .col-rt-con .pro-intro .content { width: 100%; padding: 4vw 0; font-size: 4vw; line-height: 7vw;}
  .page-pro-content .col-rt-con .pro-intro .content img { max-width: 100%; height: auto; margin: 1vw auto;}

  .page-pro-content .col-full-recommend { clear: both; width: 100%; padding: 4vw 2vw 0 2vw; margin: 6vw 0 0 0; background-color: #eee; box-sizing: border-box;}
  .page-pro-content .col-full-recommend .rec-title { width: 100%; font-size: 3vw; font-weight: 500; text-align: center;}
  .page-pro-content .col-full-recommend .pro-rec-list { width: 100%; margin: 4vw 0 0 0; display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap;}
  .page-pro-content .col-full-recommend .pro-rec-list .pro-box { width: calc(100% / 2 - 2vw); margin: 0 1vw 4vw 1vw;}
  .page-pro-content .col-full-recommend .pro-rec-list .pro-box a { color: #000; text-decoration: none;}
  .page-pro-content .col-full-recommend .pro-rec-list .pro-box .pic { width: 100%;}
  .page-pro-content .col-full-recommend .pro-rec-list .pro-box .pic img { width: 100%; height: auto;}
  .page-pro-content .col-full-recommend .pro-rec-list .pro-box .title { width: 100%; padding: 1vw 0 0 0; font-size: 3vw;}


  /************ page-contact-con ************/

  .page-contact-title { width: 100%; position: relative; z-index: 1;}
  .page-contact-title span.title-b { color: #a5a5a5; font-size: 14vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 18vw;}
  .page-contact-title span.title-s { padding: 0.2vw 2vw; margin: 0 0 0 6vw; color: #fff; font-size: 6vw; font-weight: 700; line-height: 2.2vw; background-color: #991e23;}

  .page-contact-con { clear: both; width: 100%; padding: 0 4vw 0 0; margin: 6vw 0 0 0; box-sizing: border-box;}
  .page-contact-con .contact-infor { width: 100%; margin: 0 0 6vw 0; font-size: 6vw; line-height: 8vw; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-contact-con .contact-infor .column-full { width: 100%; padding: 0 0 4vw 0; font-size: 8vw; font-weight: 500;}
  .page-contact-con .contact-infor .caption { width: 9vw;}
  .page-contact-con .contact-infor .column { width: calc(100% - 9vw);}
  .page-contact-con .contact-form { width: 100%;}
  .page-contact-con .contact-form form { width: 100%;}
  .page-contact-con .contact-form form .caption { width: 100%; padding: 0 0 0.5vw 0; font-size: 6vw;}
  .page-contact-con .contact-form form .column { width: 100%; padding: 0 0 2vw 0; font-size: 6vw;}
  .page-contact-con .contact-form form .column input[type=text], 
  .page-contact-con .contact-form form .column input[type=tel], 
  .page-contact-con .contact-form form .column input[type=email] { width: 100%; padding: 2vw; font-size: 5vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .page-contact-con .contact-form form .column textarea { width: 100%; height: 20vw; padding: 2vw; font-size: 5vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .page-contact-con .contact-form form .column input[type=button] { padding: 1.5vw 6vw; color: #fff; font-size: 5vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 4vw; background-color: #158072; cursor: pointer;}


  /************ page-shopping-cart ************/

  section#page-shopping-cart { clear: both; width: 100%; padding: 0 0 4.5vw 0; box-sizing: border-box;}

  .page-shoppingcart-title { width: 100%; margin: 2.5vw 0; text-align: center;}
  .page-shoppingcart-title span.title-b { color: rgba(165,165,165,0.8); font-size: 12vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 12vw;}
  .page-shoppingcart-title span.title-s { padding: 0 1.5vw; color: #fff; font-size: 6vw; font-weight: 700; line-height: 7vw; background-color: #991e23;}

  .page-shoppingcart-order { clear: both; width: 90vw; margin: 4vw auto;}
  .page-shoppingcart-order .step-line-bar { width: 65vw; margin: 0 auto 6vw auto; display: flex; justify-content: center; align-items: flex-start; position: relative;}
  .page-shoppingcart-order .step-line-bar .step-box { width: 6vw; height: 6vw; color: #fff; font-size: 4vw; line-height: 5.6vw; text-align: center; border-radius: 100%; background-color: #ccc;}
  .page-shoppingcart-order .step-line-bar .step-box.sel { background-color: #666;}
  .page-shoppingcart-order .step-line-bar .step-line { width: 17vw; height: 2px; margin: 3vw 0 0 0; background-color: #ccc; display: block;}
  .page-shoppingcart-order .step-line-bar .step-line.sel { background-color: #666;}
  .page-shoppingcart-order .step-line-bar .text-sub-1 { width: 6vw; color: #000; padding: 4vw 0 0 0; font-size: 2vw; text-align: center; position: absolute; top: 2.5vw; left: 6vw; z-index: 1;}
  .page-shoppingcart-order .step-line-bar .text-sub-2 { width: 8vw; color: #000; padding: 4vw 0 0 0; font-size: 2vw; text-align: center; position: absolute; top: 2.5vw; left: calc(50% - 4vw); z-index: 1;}
  .page-shoppingcart-order .step-line-bar .text-sub-3 { width: 8vw; color: #000; padding: 4vw 0 0 0; font-size: 2vw; text-align: center; position: absolute; top: 2.5vw; right: 5.5vw; z-index: 1;}
  
  .page-shoppingcart-order .member-signup { clear: both; width: 100%; margin: 8vw 0 4vw 0; padding: 2vw 4vw; background-color: #eee; box-sizing: border-box; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  .page-shoppingcart-order .member-signup .notice-text { width: 100%; color: #000; font-size: 3vw; font-weight: 300; text-align: center;}
  .page-shoppingcart-order .member-signup .signup-bt { width: 20vw; margin: 3vw 1vw 0 1vw;}
  .page-shoppingcart-order .member-signup .signup-bt a { width: 100%; padding: 0.6vw 0; color: #fff; font-size: 3vw; text-align: center; text-decoration: none; border-radius: 0.8vw; background-color: #eba71e; display: block;}
  .page-shoppingcart-order .member-signup .fb-signup-bt { width: 20vw; margin: 3vw 1vw 0 1vw;}
  .page-shoppingcart-order .member-signup .fb-signup-bt a { width: 100%; padding: 0.6vw 0; color: #fff; font-size: 3vw; text-align: center; text-decoration: none; border-radius: 0.8vw; background-color: #0866ff; display: block;}

  .page-shoppingcart-order .shoppingcart-order-table { clear: both; width: 100%;}
  .page-shoppingcart-order .shoppingcart-order-table .caption-full { width: 100%; font-size: 3vw; font-weight: 500; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .page-shoppingcart-order .shoppingcart-order-table .caption-full .caption-1 { width: 100%; padding: 2vw 1vw; box-sizing: border-box;}
  .page-shoppingcart-order .shoppingcart-order-table .caption-full .caption-2 { display: none;}
  .page-shoppingcart-order .shoppingcart-order-table .caption-full .caption-3 { display: none;}
  .page-shoppingcart-order .shoppingcart-order-table .caption-full .caption-4 { display: none;}
  .page-shoppingcart-order .shoppingcart-order-table .caption-full .caption-5 { display: none;}
  .page-shoppingcart-order .shoppingcart-order-table .caption-full .caption-6 { display: none;}
  .page-shoppingcart-order .shoppingcart-order-table .column-full { width: 100%; font-size: 2.6vw; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .page-shoppingcart-order .shoppingcart-order-table .column-full .column-1 { width: 100%; padding: 2vw 1vw; box-sizing: border-box; border-bottom: 1px #ccc dashed; display: flex; justify-content: flex-start; align-items: center;}
  .page-shoppingcart-order .shoppingcart-order-table .column-full .column-1 .pic { width: 15vw;}
  .page-shoppingcart-order .shoppingcart-order-table .column-full .column-1 .pic img { width: 100%; height: auto;}
  .page-shoppingcart-order .shoppingcart-order-table .column-full .column-1 .pro-name { width: calc(100% - 15vw); padding: 0 0 0 2vw; box-sizing: border-box;}
  .page-shoppingcart-order .shoppingcart-order-table .column-full .column-2 { width: 20%; padding: 2vw 1vw; text-align: center; box-sizing: border-box;}
  .page-shoppingcart-order .shoppingcart-order-table .column-full .column-3 { width: 20%; padding: 2vw 1vw; text-align: center; box-sizing: border-box;}
  .page-shoppingcart-order .shoppingcart-order-table .column-full .column-4 { width: 25%; padding: 2vw 1vw; text-align: center; box-sizing: border-box;}
  .page-shoppingcart-order .shoppingcart-order-table .column-full .column-4 button { width: 4.4vw; padding: 0.4vw 0; color: #000; font-size: 2.4vw; font-weight: 500; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; text-align: center; border-radius: 6px; border: 1px #ccc solid; background-color: #eee; cursor: pointer;}
  .page-shoppingcart-order .shoppingcart-order-table .column-full .column-4 input[type=text] { width: 8vw; padding: 0.5vw 0.5vw; color: #000; font-size: 2.6vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; text-align: center; border: 1px #ccc solid; background-color: #fff;}
  .page-shoppingcart-order .shoppingcart-order-table .column-full .column-5 { width: 20%; padding: 2vw 1vw; text-align: center; box-sizing: border-box;}
  .page-shoppingcart-order .shoppingcart-order-table .column-full .column-6 { width: 15%; padding: 2vw 1vw; font-size: 3vw; text-align: center; box-sizing: border-box;}
  .page-shoppingcart-order .shoppingcart-order-table .column-full .column-6 a { color: #000; text-decoration: none;}

  
  /** 20240522修改 **/
  .page-shoppingcart-order .continue-shop { width: 100%; margin: 3vw 0 0 0; text-align: right; box-sizing: border-box; display: flex; justify-content: flex-end; align-items: center;}
  .page-shoppingcart-order .continue-shop a.shopping-bt { width: 14vw; padding: 1vw 2vw; margin: 0 1vw; color: #fff; font-size: 3vw; font-weight: 500; text-align: center; text-decoration: none; border-radius: 1vw; background-color: #eaa61e; display: block;}
  .page-shoppingcart-order .continue-shop a.checkout-bt { width: 10vw; padding: 1vw 2vw; margin: 0 1vw; color: #fff; font-size: 3vw; font-weight: 500; text-align: center; text-decoration: none; border-radius: 1vw; background-color: #eaa61e; display: block;}
  .page-shoppingcart-order .continue-shop a.confirm-bt { width: 14vw; padding: 1vw 2vw; margin: 0 auto; color: #fff; font-size: 3vw; font-weight: 500; text-align: center; text-decoration: none; border-radius: 1vw; background-color: #eaa61e; display: block;}
  .page-shoppingcart-order .continue-shop a:hover { color: #000;}

  .shopping-checkout-infor { clear: both; width: 100%; margin: 8vw 0 0 0;}
  .shopping-checkout-infor .column-lf { width: 100%; padding: 2vw; margin: 0 0 2vw 0; border-radius: 4vw; border: 1px #ccc solid; box-sizing: border-box;}
  .shopping-checkout-infor .column-lf .title-bar, 
  .shopping-checkout-infor .column-rt .title-bar { width: 100%; padding: 0 0 1vw 0; font-size: 5vw; font-weight: 500; border-bottom: 1px #ccc solid;}
  .shopping-checkout-infor .column-lf .infor-form { width: 100%; padding: 1vw 0 0 0; font-size: 4vw; line-height: 7vw;}
  .shopping-checkout-infor .column-lf .infor-form input[type=radio] { width: 3.4vw; height: 3.4vw;}
  .shopping-checkout-infor .column-lf .infor-form .form { width: 100%; padding: 0 0 0 1.7vw; box-sizing: border-box;}
  .shopping-checkout-infor .column-lf .infor-form .form .col-x3 { width: 100%;}
  .shopping-checkout-infor .column-lf .infor-form .form .col-x3 input[type=text].style-1, 
  .shopping-checkout-infor .column-lf .infor-form .form .col-x3 input[type=tel] { width: 96%; padding: 1.5vw; margin: 0 0 3vw 0; font-size: 4vw; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .shopping-checkout-infor .column-lf .infor-form .form .twzipcode { clear: both; width: 100%;}
  .shopping-checkout-infor .column-lf .infor-form .form .twzipcode select { width: 100%; padding: 1.5vw; margin: 0 0 3vw 0; font-size: 4vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .shopping-checkout-infor .column-lf .infor-form .form input[type=text].style-2 { width: 100%; padding: 1.5vw; margin: 0 0 3vw 0; font-size: 4vw; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .shopping-checkout-infor .column-lf .infor-form .form .col-full { width: 100%;}
  .shopping-checkout-infor .column-lf .infor-form .form .col-full input[type=checkbox] { width: 3.6vw; height: 3.6vw;}

  .shopping-checkout-infor .shopping-confirm-text { width: 100%; padding: 4vw 0; font-size: 3vw; text-align: center;}

  .shopping-checkout-infor .column-rt { width: 100%; padding: 2vw; margin: 0 0 2vw 0; border-radius: 4vw; border: 1px #ccc solid; box-sizing: border-box;}
  .shopping-checkout-infor .column-rt .col-full { clear: both; width: 100%; padding: 1.5vw 0; font-size: 4vw; line-height: 8vw; border-bottom: 1px #ccc dashed; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .shopping-checkout-infor .column-rt .col-full:last-child { border-bottom: 0;}
  .shopping-checkout-infor .column-rt .col-full .caption { width: 60%;}
  .shopping-checkout-infor .column-rt .col-full .column { width: 40%; font-weight: 600; text-align: right;}
  .shopping-checkout-infor .column-rt .col-full .column span.color-red { color: #971e23;}
  .shopping-checkout-infor .column-rt .col-full .col-x3 { width: 100%;}
  .shopping-checkout-infor .column-rt .col-full .col-x3 input[type=radio] { width: 3.6vw; height: 3.6vw;}

  ul#invoice-tab { clear: both; width: 100%; padding: 0; margin: 2vw 0 0 0; list-style: none; display: flex; justify-content: flex-start;}
  ul#invoice-tab li { width: 20vw; padding: 0; margin: 0 2vw 0 0;}
  ul#invoice-tab li a { width: 100%; color: #000; font-size: 4vw; text-align: center; border: 1px #000 solid; background-color: #fff; text-decoration: none; box-sizing: border-box; display: block;}
  ul#invoice-tab li a:hover { background-color: #63c1d1;}
  ul#invoice-tab li a.sel { color: #fff; background-color: #000;}
  
  .invoice-detail { clear: both; width: 100%; padding: 2vw; margin: 0 0 1vw 0; box-sizing: border-box; background-color: #f1f1f1;}
  .invoice-detail div { display: none;}
  .invoice-detail div .content-table { width: 100%;}
  .invoice-detail div .content-table .caption-title { clear: both; width: 100%; padding: 1.5vw 0 0 0;}
  .invoice-detail div .content-table .column-detail { width: 100%;}
  .invoice-detail div .content-table .column-detail input[type=text].style-full, 
  .invoice-detail div .content-table .column-detail select.style-full { width: 100%; padding: 1.5vw; margin: 1vw 0; color: #000; font-size: 4vw; font-weight: 300; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 1px #cacaca solid; background-color: #fff; box-sizing: border-box;}


  /************ page-members ************/

  .page-members-login { clear: both; width: 90%; margin: 3vw auto;}
  .page-members-login .col-half { width: 100%; margin: 0 0 4vw 0;}
  .page-members-login .col-half .s-title { width: 100%; font-size: 4.4vw; margin: 0 0 2vw 0;}
  .page-members-login .col-half input[type=text], 
  .page-members-login .col-half input[type=password] { width: 100%; margin: 0 0 2vw 0; padding: 2vw; color: #000; font-size: 3vw; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .page-members-login .col-half input[type=submit], 
  .page-members-login .col-half input[type=button] { width: 100%; margin: 0 0 2vw 0; padding: 2vw; color: #fff; font-size: 3vw; border: 0; border-radius: 1vw; background-color: #eaa61e; box-sizing: border-box; cursor: pointer;}
  .page-members-login .col-half .forget-note { clear: both; width: 100%; padding: 2vw 0 0 0; margin: 2vw 0 0 0; border-top: 1px #ccc solid; color: #333; font-size: 3vw;}
  .page-members-login .col-half .forget-note a { color: #000; text-decoration: none; border-bottom: 1px #333 solid;}
  .page-members-login .col-half .forget-note a:hover { color: #0866ff; border-bottom: 1px #0866ff solid;}
  .page-members-login .col-half .sign-up-note { clear: both; width: 100%; padding: 4vw; font-size: 3vw; border-radius: 1.2vw; background-color: #eee; box-sizing: border-box;}
  .page-members-login .col-half .sign-up-note .sign-up-bt { clear: both; width: 100%; margin: 3vw 0 0 0;}
  .page-members-login .col-half .sign-up-note .sign-up-bt a { width: 100%; padding: 2vw; color: #fff; font-size: 3vw; text-align: center; text-decoration: none; border-radius: 1vw; background-color: #eaa61e; display: block; box-sizing: border-box;}


  .page-members-sign-up { clear: both; width: 90%; margin: 3vw auto;}
  .page-members-sign-up .column-left { width: 100%;}
  .page-members-sign-up .column-left .s-title { width: 100%; padding: 0 0 1vw 0; font-size: 4.4vw;}
  .page-members-sign-up .column-left input.style-1 { width: 100%; margin: 1vw 0; padding: 2vw; color: #000; font-size: 4vw; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .page-members-sign-up .column-left input[type=date] { width: 100%; margin: 1vw 0; padding: 2vw 2vw 2vw 7vw; color: #000; font-size: 4vw; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .page-members-sign-up .column-left select { width: 100%; margin: 1vw 0; padding: 2vw; color: #000; font-size: 4vw; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .page-members-sign-up .column-left input.style-2 { width: 100%; margin: 1vw 0; padding: 2vw; color: #000; font-size: 4vw; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .page-members-sign-up .column-right { width: 100%;}
  .page-members-sign-up .column-right .s-title { width: 100%; padding: 0 0 1vw 0; font-size: 4.4vw;}
  .page-members-sign-up .column-right input.style-1 { width: 100%; margin: 1vw 0; padding: 2vw; color: #000; font-size: 4vw; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .page-members-sign-up .column-right input.style-2 { width: 100%; margin: 1vw 0; padding: 2vw; color: #000; font-size: 4vw; border: 1px #ccc solid; background-color: #ccc; box-sizing: border-box;}
  .page-members-sign-up .column-right .text-note { width: 100%; margin: 1vw 0; padding: 2vw 0; font-size: 3vw; font-weight: 300; line-height: 4vw; text-align: center; box-sizing: border-box;}
  .page-members-sign-up .column-right .text-note span.color-red { color: #971e23;}
  .page-members-sign-up .column-full { width: 100%; height: 40vw; padding: 2vw; margin: 2vw 0 0 0; background-color: #eee; overflow-y: scroll; box-sizing: border-box;}
  .page-members-sign-up .column-full .s-title { width: 100%; padding: 0 0 2vw 0; font-size: 4vw; text-align: center;}
  .page-members-sign-up .column-full .text-con { width: 100%; font-size: 3vw; font-weight: 300; line-height: 6vw;}
  .page-members-sign-up .column-half { width: 100%; margin: 3vw 0; font-size: 4vw;}
  .page-members-sign-up .column-half .container { padding: 0 0 0 7vw; display: block; position: relative; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
  .page-members-sign-up .column-half .container input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}
  .page-members-sign-up .column-half .checkmark { position: absolute; top: 0.3vw; left: 0; height: 6vw; width: 6vw; border: 1px #158072 solid; border-radius: 1vw; background-color: #fff; box-sizing: border-box;}
  .page-members-sign-up .column-half .container:hover input ~ .checkmark { border: 1px #158072 solid; background-color: #ccc; box-sizing: border-box;}
  .page-members-sign-up .column-half .container input:checked ~ .checkmark { background-color: #158072;}
  .page-members-sign-up .column-half .checkmark:after { content: ""; position: absolute; display: none;}
  .page-members-sign-up .column-half .container input:checked ~ .checkmark:after { display: block;}
  .page-members-sign-up .column-half .container .checkmark:after { left: 1.6vw; top: 0.1vw; width: 1.8vw; height: 4vw; border: solid white; border-width: 0 0.6vw 0.6vw 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);}
  .page-members-sign-up .column-half .sign-up-bt { width: 100%; margin: 4vw 0 2vw 0;}
  .page-members-sign-up .column-half .sign-up-bt a { width: 100%; padding: 1vw 0; color: #fff; font-size: 4vw; text-align: center; text-decoration: none; border-radius: 1.6vw; background-color: #eaa61e; display: block;}


  ul.members-nav { width: 100%; padding: 0; margin: 4vw 0 8vw 0; list-style: none; display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
  ul.members-nav li { width: 30vw; padding: 0; margin: 1vw;}
  ul.members-nav li a { width: 100%; padding: 1vw 0; color: #158072; font-size: 4vw; border: 1px #158072 solid; border-radius: 1vw; text-align: center; text-decoration: none; display: block;}
  ul.members-nav li a:hover { background-color: #eee;}
  ul.members-nav li a.sel { color: #fff; background-color: #158072;}

  .page-members-sign-up .column-left label.sex-box { width: 100%; margin: 1vw 0; padding: 2vw; color: #000; font-size: 4vw; background-color: #fff; box-sizing: border-box; display: block;}
  .page-members-sign-up .column-left input.style-3 { width: 100%; margin: 1vw 0; padding: 2vw; color: #000; font-size: 4vw; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .page-members-sign-up .column-left input[type=button].style-1 { width: 100%; margin: 1vw 0; padding: 2vw; color: #000; font-size: 4vw; border: 0; background-color: #ccc; box-sizing: border-box; cursor: pointer;}
  .page-members-sign-up .column-left input[type=button].style-2 { width: 100%; margin: 1vw 0; padding: 2vw; color: #000; font-size: 4vw; border: 0; background-color: #ccc; box-sizing: border-box; cursor: pointer;}
  .page-members-sign-up .column-left select.style-full { width: 100%; margin: 1vw 0; padding: 2vw; color: #000; font-size: 4vw; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}


  .page-members-order { clear: both; width: 96%; margin: 3vw auto; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-members-order .mem-order-table { width: 100%; margin: 0 0 4vw 0;}
  .page-members-order .mem-order-table .caption-full { width: 100%; font-size: 3vw; border-bottom: 1px #000 solid; display: flex; justify-content: flex-start; align-items: center;}
  .page-members-order .mem-order-table .caption-full .caption-1 { width: 17%; padding: 1vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .caption-full .caption-2 { width: 17%; padding: 1vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .caption-full .caption-3 { width: 13%; padding: 1vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .caption-full .caption-4 { width: 13%; padding: 1vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .caption-full .caption-5 { width: 26%; padding: 1vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .caption-full .caption-6 { width: 14%; padding: 1vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .caption-full .caption-7 { display: none;}
  .page-members-order .mem-order-table .column-full { width: 100%; font-size: 2.4vw; font-weight: 300; border-bottom: 1px #ccc dashed; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .page-members-order .mem-order-table .column-full .column-1 { width: 17%; padding: 1vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .column-full .column-2 { width: 17%; padding: 1vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .column-full .column-3 { width: 13%; padding: 1vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .column-full .column-4 { width: 13%; padding: 1vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .column-full .column-5 { width: 26%; padding: 1vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .column-full .column-6 { width: 14%; padding: 1vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .column-full .column-7 { width: 100%; padding: 1vw; box-sizing: border-box;}
  .page-members-order .mem-order-table .column-full .column-7 a { width: 8vw; padding: 0.5vw 0; margin: 0 4vw 0 0; color: #fff; font-size: 2.4vw; font-weight: 300; text-align: center; text-decoration: none; border-radius: 0.8vw; background-color: #eaa61e; display: block; float: right;}


  .page-members-reward { clear: both; width: 90%; margin: 3vw auto; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-members-reward .discount-code { width: 100%;}
  .page-members-reward .discount-code .title-text { width: 100%; margin: 0 0 1vw 0; font-size: 4vw; font-weight: 500;}
  .page-members-reward .discount-code .title-text span.small { color: #333; font-size: 3vw; font-weight: 400;}
  .page-members-reward .discount-code input[type=text] { width: 60vw; padding: 1vw; color: #000; font-size: 3vw; border: 1px #ccc solid; background-color: #fff; box-sizing: border-box;}
  .page-members-reward .discount-code input[type=button] { width: 10vw; padding: 1vw; margin: 0 0 0 1vw; color: #000; font-size: 3vw; border: 0; background-color: #ccc; box-sizing: border-box; cursor: pointer;}

  .page-members-reward .reward-table { width: 100%; margin: 5vw 0;}
  .page-members-reward .reward-table .caption-full { width: 100%; font-size: 2.4vw; font-weight: 500; border-top: 1px #ccc solid; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: center;}
  .page-members-reward .reward-table .caption-full .caption-1 { width: 16%; padding: 1vw 0.5vw; box-sizing: border-box;}
  .page-members-reward .reward-table .caption-full .caption-2 { width: 16%; padding: 1vw 0.5vw; box-sizing: border-box;}
  .page-members-reward .reward-table .caption-full .caption-3 { width: 17%; padding: 1vw 0.5vw; box-sizing: border-box;}
  .page-members-reward .reward-table .caption-full .caption-4 { width: 17%; padding: 1vw 0.5vw; box-sizing: border-box;}
  .page-members-reward .reward-table .caption-full .caption-5 { width: 17%; padding: 1vw 0.5vw; box-sizing: border-box;}
  .page-members-reward .reward-table .caption-full .caption-6 { width: 17%; padding: 1vw 0.5vw; box-sizing: border-box;}
  .page-members-reward .reward-table .caption-full .caption-7 { display: none;}
  .page-members-reward .reward-table .column-full { width: 100%; font-size: 2vw; font-weight: 300; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .page-members-reward .reward-table .column-full:nth-child(even) { background-color: #eee;}
  .page-members-reward .reward-table .column-full .column-1 { width: 16%; padding: 1vw 0.5vw; box-sizing: border-box;}
  .page-members-reward .reward-table .column-full .column-2 { width: 16%; padding: 1vw 0.5vw; box-sizing: border-box;}
  .page-members-reward .reward-table .column-full .column-3 { width: 17%; padding: 1vw 0.5vw; box-sizing: border-box;}
  .page-members-reward .reward-table .column-full .column-4 { width: 17%; padding: 1vw 0.5vw; box-sizing: border-box;}
  .page-members-reward .reward-table .column-full .column-5 { width: 17%; padding: 1vw 0.5vw; box-sizing: border-box;}
  .page-members-reward .reward-table .column-full .column-6 { width: 17%; padding: 1vw 0.5vw; box-sizing: border-box;}
  .page-members-reward .reward-table .column-full .column-7 { width: 100%; padding: 1vw 0.5vw; border-top: 1px #ccc dashed; box-sizing: border-box;}


  .page-members-exchange { clear: both; width: 90%; margin: 3vw auto; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-members-exchange .exchange-table { width: 100%; margin: 3vw 0;}
  .page-members-exchange .exchange-table .caption-full { width: 100%; font-size: 2vw; font-weight: 500; border-top: 1px #ccc solid; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: center;}
  .page-members-exchange .exchange-table .caption-full .caption-1 { width: 18%; padding: 1vw 0.5vw; box-sizing: border-box;}
  .page-members-exchange .exchange-table .caption-full .caption-2 { width: 18%; padding: 1vw 0.5vw; box-sizing: border-box;}
  .page-members-exchange .exchange-table .caption-full .caption-3 { width: 32%; padding: 1vw 0.5vw; box-sizing: border-box;}
  .page-members-exchange .exchange-table .caption-full .caption-4 { width: 16%; padding: 1vw 0.5vw; box-sizing: border-box;}
  .page-members-exchange .exchange-table .caption-full .caption-5 { width: 16%; padding: 1vw 0.5vw; box-sizing: border-box;}
  .page-members-exchange .exchange-table .caption-full .caption-6 { display: none;}
  .page-members-exchange .exchange-table { width: 100%; margin: 3vw 0;}
  .page-members-exchange .exchange-table .column-full { width: 100%; font-size: 2vw; font-weight: 300; border-bottom: 1px #ccc solid; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
  .page-members-exchange .exchange-table .column-full:nth-child(even) { background-color: #eee;}
  .page-members-exchange .exchange-table .column-full .column-1 { width: 18%; padding: 1vw 0.5vw; box-sizing: border-box;}
  .page-members-exchange .exchange-table .column-full .column-2 { width: 18%; padding: 1vw 0.5vw; box-sizing: border-box;}
  .page-members-exchange .exchange-table .column-full .column-3 { width: 32%; padding: 1vw 0.5vw; box-sizing: border-box;}
  .page-members-exchange .exchange-table .column-full .column-4 { width: 16%; padding: 1vw 0.5vw; box-sizing: border-box;}
  .page-members-exchange .exchange-table .column-full .column-5 { width: 16%; padding: 1vw 0.5vw; box-sizing: border-box;}
  .page-members-exchange .exchange-table .column-full .column-6 { width: 100%; padding: 1vw 0.5vw; border-top: 1px #ccc dashed; box-sizing: border-box;}


  /************ page-reserve-con ************/

  section#page-reserve { clear: both; width: 100%; padding: 4vw 0 6vw 0; box-sizing: border-box; background-image: url("../images/index_about_bg.jpg"); background-repeat: no-repeat; background-size: cover;}

  .page-reserve-title { width: 100%; margin: 4vw 0; text-align: center;}
  .page-reserve-title span.title-b { color: #a5a5a5; font-size: 16vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 20vw;}
  .page-reserve-title span.title-s { padding: 0.2vw 2vw; margin: 0 0 0 4vw; color: #fff; font-size: 6vw; font-weight: 700; line-height: 2.2vw; background-color: #991e23;}

  .page-reserve-con { clear: both; width: 80vw; margin: 0 auto; display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap;}
  .page-reserve-con .caption { width: 100%; margin: 0 0 1vw 0; font-size: 4vw;}
  .page-reserve-con .caption span.must-star { color: #991e23;}
  .page-reserve-con .column { width: 100%; padding: 0 0 0 3vw; margin: 0 0 2.5vw 0; font-size: 4vw; box-sizing: border-box;}
  .page-reserve-con .column input[type=text].style-1, 
  .page-reserve-con .column input[type=tel] { width: 100%; padding: 1vw; font-size: 4vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-bottom: 1px #000 solid; background-color: transparent; box-sizing: border-box;}
  .page-reserve-con .column input[type=text].style-2 { width: 50vw; padding: 1vw; font-size: 4vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-bottom: 1px #000 solid; background-color: transparent; box-sizing: border-box;}
  .page-reserve-con .column input[type=radio], 
  .page-reserve-con .column input[type=checkbox] { width: 3.6vw; height: 3.6vw; margin: 0 2vw 0 0;}
  .page-reserve-con input[type=submit], 
  .page-reserve-con input[type=button] { padding: 0.6vw 4vw; margin: 4vw 0 0 0; color: #fff; font-size: 4vw; font-family: 'Noto Sans TC', sans-serif, "微軟正黑體", Arial; border: 0; border-radius: 1.4vw; background-color: #971e23; cursor: pointer;}

  .page-reserve-con .notice-text { width: 100%; padding: 0.5vw 0; color: #991e23; font-size: 3.2vw;}


  /************ section #sitemap ************/

  section#page-sitemap { clear: both; width: 100%; padding: 8vw 4vw; box-sizing: border-box; background-image: url("../images/index_service_bg.jpg"); background-repeat: repeat-y; background-size: 100% auto;}

  .page-sitemap-title { width: 100%; margin: 2.5vw 0; text-align: center;}
  .page-sitemap-title span.title-b { color: #a5a5a5; font-size: 16vw; font-weight: 900; font-family: "Sofia Sans Condensed", sans-serif; line-height: 16vw;}
  .page-sitemap-title span.title-s { padding: 0.2vw 1.5vw; color: #fff; font-size: 6vw; font-weight: 700; line-height: 7vw; background-color: #991e23;}

  ul.page-sitemap-list { clear: both; width: 100%; padding: 0; margin: 8vw 0 0 0; list-style: none; display: block;}
  ul.page-sitemap-list li { width: 100%; padding: 0; margin: 4vw 0; text-align: center;}
  ul.page-sitemap-list li a { color: #000; font-size: 5vw; text-decoration: none;}
  ul.page-sitemap-list li a:hover { border-bottom: 1px #000 solid;}



  .page-error404-con { clear: both; width: 100%; padding: 10vw 0 4vw 0; text-align: center;}
  .page-error404-con span.text-error { font-size: 6vw; font-weight: 500;}
  .page-error404-con a { color: #000; font-size: 4.4vw; border-bottom: 1px #000 solid; text-decoration: none;}
  .page-error404-con a:hover { color: #991e23; border-bottom: 1px #971e23 solid;}


  /************ section #footer-pre-order ************/

  section#footer-pre-order { clear: both; width: 100%; height: 40vw; overflow: hidden; position: relative;}

  img.footer-pre-order-bg { width: auto; height: 100%; margin: 0 0 0 -30%;}

  img.footer-pre-order-bt { width: 60vw; height: auto; position: absolute; top: 8vw; right: 4vw;}


  /************ footer ************/

  footer { clear: both; width: 100%; background-color: #000;}

  .footer-logo { width: 100%; padding: 6vw 0; background-color: #158072;}
  .footer-logo img { width: 50vw; height: auto; margin: auto;}

  .footer-nav-infor { width: 100%;}
  .footer-nav-infor ul.footer-nav { width: 100%; padding: 2vw 4vw; margin: 0; list-style: none; border-bottom: 2px #eba71e solid; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; box-sizing: border-box;}
  .footer-nav-infor ul.footer-nav li { padding: 1vw 2vw; margin: 0;}
  .footer-nav-infor ul.footer-nav li a { color: #fff; font-size: 4vw; font-weight: 300; text-decoration: none;}
  .footer-nav-infor ul.footer-nav li a:hover { color: #ccc;}
  .footer-nav-infor .footer-infor { width: 100%; padding: 2vw 4vw; box-sizing: border-box;}
  .footer-nav-infor .footer-infor .infor-text { width: 100%; color: #fff; font-size: 4vw; text-align: center;}
  .footer-nav-infor .footer-infor .social-icons { width: 100%; margin: 4vw 0 0 0; display: flex; justify-content: center; align-items: center;}
  .footer-nav-infor .footer-infor .social-icons img.icon { width: 12vw; height: auto; margin: 0 2vw;}

  .footer-copyright { clear: both; width: 100%; padding: 3vw 0; color: #fff; font-size: 2.4vw; font-weight: 300; text-align: center; background-color: #991e23;}
  

}