@charset "utf-8";

/* ==========================================================================
   網站全域設定
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Chiron+GoRound+TC:wght@200..900&family=Noto+Sans+TC:wght@100..900&family=Noto+Serif+TC:wght@200..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

:root {
  /* 網站色系 */
  --MainColor: #0D3118;
  --SubColor: #D5C7AD;
  --SubColor2: #375B44;
  --SubColor3: #4C5F2C;

  /* 字型 */
  --fm01: "Playfair Display", serif;
  --fm02: "Noto Sans TC", sans-serif;
  --fm03: "Noto Serif TC", serif;

  /* 間距設定 */
  --pd100: 100px 0;
  --m100: 100px;
  --m50: 50px;
  --m30: 30px;

  /* 字級設定 (Clamp) */
  --f96: clamp(48px, 30.55px + 5.45vw, 96px);
  --f50: clamp(34px, 28.18px + 1.82vw, 50px);
  --f48: clamp(32px, 26.18px + 1.82vw, 48px);
  --f40: clamp(28px, 23.64px + 1.36vw, 40px);
  --f36: clamp(24px, 19.64px + 1.36vw, 36px);
  --f32: clamp(22px, 18.36px + 1.14vw, 32px);
  --f30: clamp(21px, 17.73px + 1.02vw, 30px);
  --f28: clamp(21px, 18.45px + 0.80vw, 28px);
  --f27: clamp(20px, 17.45px + 0.80vw, 27px);
  --f25: clamp(19px, 16.82px + 0.68vw, 25px);
  --f24: clamp(19px, 17.18px + 0.57vw, 24px);
  --f22: clamp(18px, 16.55px + 0.45vw, 22px);
  --f20: clamp(16px, 14.55px + 0.45vw, 20px);
  --f19: clamp(16px, 14.91px + 0.34vw, 19px);
  --f18: clamp(16px, 15.27px + 0.23vw, 18px);
  --f17: clamp(15px, 14.27px + 0.23vw, 17px);
  --f16: clamp(14px, 13.27px + 0.23vw, 16px);
  --f15: clamp(13px, 12.27px + 0.23vw, 15px);
}

body {
  font-family: "Chiron GoRound TC", sans-serif;
}

/* 全域 RWD 設定 */
@media (max-width: 1024px) {
  :root {
    --m50: 40px;
    --m30: 25px;
  }
}

@media (max-width: 768px) {
  :root {
    --pd100: 70px 0;
    --m100: 70px;
    --m50: 30px;
    --m30: 20px;
  }
}

@media (max-width: 600px) {
  :root {
    --pd100: 50px 0;
    --m100: 50px;
  }
}

/* ==========================================================================
   大範圍設定
   ========================================================================== */

/* 統一大標題 */
.all_set_tit {
  margin-bottom: 50px;
}
.all_set_tit h5 {
  color: var(--MainColor);
  font-size: var(--f96);
  font-family: var(--fm01);
  font-weight: 500;
  line-height: 120%;
  text-align: center;
}
.all_set_tit h6 {
  color: var(--SubColor3);
  font-size: var(--f30);
  font-weight: 300;
  line-height: 120%;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  text-align: center;
  margin-top: 5px;
}

/* ==========================================================================
   大圖部分設定 (Banner)
   ========================================================================== */
#content_main {
  margin: 0;
  background-image: url('../f_img/index_img003.png');
  background-repeat: repeat;
  background-position: center;
}
.bannerindex {
  position: relative;
  height: auto;
}
.swiper-banner {
  position: static;
  margin: 0;
  height: auto;
}
.swiper-slide img {
  height: auto;
}
.swiper-pagination {
  margin-left: 0;
  bottom: 10px;
  transform: translateX(-50%);
}

@media screen and (max-width: 768px) {
  .bannerindex {
    padding: 0;
    margin: 0;
  }
}

/* ==========================================================================
   HEADER 區塊
   ========================================================================== */
.main_header_area {
  background: #fff;
  padding: 15px 20px;
  box-shadow: 1px 1px 4px rgba(0,0,0,0.1);
}
.main_header_area .container {
  max-width: 1870px;
  width: 100%;
  margin: auto;
}
.navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
}
.nav-header {
  position: static;
  max-width: 200px;
  width: 100%;
}
.nav-brand {
  display: block;
  max-width: 100%;
  width: 100%;
}
.nav-brand img {
  width: 100%;
}
.top_menu {
  max-width: 810px;
  width: 100%;
}

/* 第一層選單 */
.stellarnav > ul > li > a {
  transition: .5s;
  overflow: initial;
  padding: 0;
  color: var(--MainColor);
  font-size: var(--f18);
  font-weight: 400;
  line-height: 120%;
  padding-bottom: 10px;
  height: auto;
  position: relative;
  margin: 0;
}
.stellarnav > ul > li > a::after {
  content: "";
  width: 100%;
  height: 1px;
  background-color: var(--MainColor);
  position: absolute;
  left: 0;
  bottom: 0;
  opacity: 0;
  transition: .5s;
}
.stellarnav > ul > li > a:hover::after {
  opacity: 1;
}
.stellarnav > ul > li > a:hover b {
  transform: translateY(calc(-1 * var(--f40)));
  -webkit-transform: translateY(calc(-1 * var(--f40)));
  -moz-transform: translateY(calc(-1 * var(--f40)));
}
.stellarnav li.has-sub > a:after {
  content: none;
}
.stellarnav > ul > li:hover > a {
  color: var(--MainColor);
}
.stellarnav > ul > li > a:hover:before {
  opacity: 1;
  bottom: 0;
}

/* 第二層選單 */
.stellarnav li li {
  display: block;
  border: none;
  margin-bottom: 0;
}
.stellarnav li li.has-sub > a{
  padding: 10px 5px;
  transition: .5s;
  /* background: var(--SubColor); */
  /* color: #fff; */
  text-align: center;
  font-size: var(--f17);
}
.stellarnav li li:hover , 
.stellarnav li li.has-sub:hover {
  background: var(--SubColor);
}
.stellarnav li li:hover > a ,
.stellarnav.mobile li.open li.open>a, 
.stellarnav li li.has-sub:hover > a {
  color: #fff;
}
.stellarnav > ul > li > ul {
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.stellarnav li li a.dd-toggle .icon-plus::before{
    color:#777;
}

.stellarnav li li:hover>a.dd-toggle .icon-plus::before{color:white;}

/* 搜尋功能 */
.box_search form {
  position: relative;
}
.shop_search_btn {
  height: 100%;
  background: var(--MainColor);
  font-size: var(--f16);
  transition: .5s;
}
.shop_search_btn:hover{transition: .5s;background: var(--SubColor);}
.tp_links {
  display: none;
}
.tp_links a {
  transition: all 0.3s;
}
.tp_links a:hover {
  color: var(--MainColor);
}
.me_tp_features {
  margin-top: 5px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.me_tp_features a {
  color: var(--MainColor);
  font-size: var(--f16);
  font-weight: 400;
  line-height: 120%;
  margin: 0;
  transition: .5s;
}
.me_tp_features a:hover{
  transition: .5s;
  color:var(--SubColor)
}
.me_tp_features a:nth-of-type(1) {
  margin: 0 15px;
}
.box_search {
  margin-bottom: 0;
  width: 185px;
}
.box_search input[type=text] {
  padding: 5px 10px 6px 32px;
  width: 140px;
  font-size: var(--f16);
}

.stellarnav .menu-toggle span.bars span {
  background: var(--MainColor);
}
.stellarnav .menu-toggle:after {
  color: var(--MainColor);
}
.stellarnav > ul {
  max-width: 800px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.stellarnav.mobile.left .close-menu {
  background: var(--SubColor2);
  color: white;
}
/* .stellarnav a {
  color: white;
} */

/* 首頁固定選單 */
.pageIndex .header_area {
  position: sticky;
  width: 100%;
}

/* 首頁產品列表 */
.pageIndex .prod_part {
  max-width: 100%;
  padding: 120px 5%;
}
.pageIndex .products-list {
  margin: 0;
  padding: 0;
  max-width: 1300px;
  width: 100%;
  margin: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 45px 1.5%;
}
.pageIndex .products-list::before, 
.pageIndex .products-list::after {
  display: none;
}
.pageIndex .products-list li {
  width: 100%;
}
.pageIndex .products-list .item {
  margin: 0;
  padding: 0;
}
.pageIndex .products-list .name {
  height: auto;
  color: #333333;
  font-size: var(--f20);
  font-weight: 400;
  line-height: 120%;
  margin-top: 20px;
}
.pageIndex .products-list .more {
  display: none;
}
.pageIndex .products-list .price {
  margin: 0;
  display: none;
}
.pageIndex .products-list .item a:hover .pic::before {
  opacity: 1;
}

.products-list .pic {
  position: relative;
}
.products-list .pic::before {
  content: "MORE";
  width: 100%;
  height: 100%;
  color: white;
  font-size: var(--f18);
  font-weight: 400;
  line-height: 120%;
  text-align: center;
  background-color: rgba(0,0,0,0.2);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
  pointer-events: none;
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .5s;
}

.animated-arrow {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 150px;
  max-width: 300px;
  width: 100%;
  padding: 5px 10px;
  color: white;
  font-size: var(--f17);
  font-weight: 400;
  line-height: 120%;
  text-align: center;
  background: var(--SubColor2);
  margin: auto;
  margin-top: 100px;
  transition: .5s;
}

.animated-arrow:hover{
  transition: .5s;
  background-color: var(--SubColor);
}

/* Header RWD */
@media (max-width: 1110px) {
  .stellarnav > ul { max-width: 600px; margin: 0 0 0 auto; }
}
@media (max-width: 900px) {
  .stellarnav > ul { max-width: 500px; margin: 0 0 0 auto; }
}
@media screen and (max-width: 1024px) {
  .navigation { padding: 0px; }
  .stellarnav ul { text-align: right; }
}
@media (max-width: 850px) {
  .nav-header { max-width: 150px; }
}
@media screen and (max-width: 768px) {
  .navigation { flex-direction: column; align-items: center; }
  .stellarnav > ul > li > a { color: var(--MainColor); }
  .me_tp_features { margin: 15px 0 0; width: 100%; justify-content: center; }
  .stellarnav.mobile { left: -10px;top:-10px; }
  .stellarnav.mobile.active { z-index: 999; }
  .nav-header { max-width: 120px; }
  .stellarnav > ul > li > a::after{display: none;}
  .stellarnav.mobile > ul > li > a.dd-toggle { background-color: var(--SubColor2); }
  .stellarnav li.open > a.dd-toggle .icon-plus::before{content:"-";}
  /* mobile open */
  .stellarnav.mobile li.open { background:var(--SubColor2);}
  .stellarnav.mobile li.open li.open,.stellarnav.mobile li.open li.open ul{ background:var(--SubColor);}
  .stellarnav > ul > li > ul{border-radius: 0;}
  .stellarnav.mobile > ul > li.open > a{color:white;}
  .stellarnav.mobile > ul > li > a:nth-of-type(1){border-bottom: 1px #ffffff00 solid;}
  .stellarnav.mobile > ul > li.open > a:nth-of-type(1){border-bottom: 1px #ffffff00 solid;}
  .stellarnav.mobile li li.has-sub a.dd-toggle{height: 38px;border: none;}
  .stellarnav.mobile li li.has-sub.open a.dd-toggle .icon-plus::before {color:white;}
  .stellarnav.mobile li li.has-sub.open a.dd-toggle{border: none;}
  .stellarnav.mobile li li.has-sub>a{border-bottom: 1px #ffffff solid;}
  .stellarnav li li > a{text-align: left;}
  .stellarnav li li.has-sub > a{text-align: left;}
  .stellarnav li a{text-align: left;}
}
@media (max-width: 700px) {
  .pageIndex .products-list .pic { border-radius: 2.5vw; }
  .pageIndex .products-list { grid-gap: 25px 2.5%; }
  .animated-arrow { margin-top: 50px; }
}
@media (max-width: 600px) {
  .pageIndex .prod_part { padding: 80px 5%; }
  .pageIndex .products-list { grid-template-columns: repeat(3, 1fr); grid-gap: 25px 3.5%; }
  .animated-arrow { margin-top: 35px; }
  .all_set_tit { margin-bottom: 35px; }
}
@media (max-width: 475px) {
  .me_tp_features { flex-wrap: wrap; }
  .me_tp_features a:nth-of-type(1){margin-left: 0;}
  .box_search { width: 100%; margin-bottom: 10px; }
  .box_search form { width: 100%; }
  .box_search input[type=text] { width: calc(100% - 38px); padding: 5px; padding-left: 32px; }
  .pageIndex .prod_part { padding: 50px 5%; }
  .pageIndex .products-list { grid-template-columns: repeat(2, 1fr); grid-gap: 20px 6%; }
  .pageIndex .products-list .pic { border-radius: 4.5vw; }
  .animated-arrow { max-width: 160px; padding: 0 15px; }
}

.main_part{max-width: 100%; padding:110px 5% 140px;}
.show_content{padding:0;}
@media (max-width:1024px) {
  .main_part{padding:80px 5%;}
}
@media (max-width:700px) {
  .main_part{padding:60px 5%;}
}

/* ==========================================================================
   文章分類管理
   ========================================================================== */
/* 側邊選單 */
h5.blog_le_t { color: #717171;display: flex;align-items: center; }
h5.blog_le_t em {display: block; color:#333;font-size: var(--f24);font-weight: 300;line-height: 120%; }
h5.blog_le_t span {display: block; color:#333;font-size: var(--f16);font-weight: 300;font-family: var(--fm01);line-height: 120%;padding:0;margin:0 0 0 10px; }
.blog_search input[type=search] {border-radius: 0;color:#666;font-size: var(--f16);font-weight: 300;line-height: 120%;}
.blog_le { width: 200px; padding: 0; }
.blog_le .accordion { border-radius: 0; border: none; }
.blog_le .accordion li { border-bottom: 1px solid #ddd; }
.accordion li a{color:#333333;font-size: var(--f18);font-weight: 300;line-height: 140%;}

.accordion li .link { padding: 0; border-bottom: none; }
.accordion li .link a { padding: 10px 0; display: inline-block; font-weight: 300; color: #717171; }
.blog_le .accordion > li:hover, 
.blog_le .accordion > li.on_this_category { color:#5F6D2D; }
.blog_le .accordion > li:hover .link a, .blog_le .accordion > li.on_this_category .link a {
    color:#5F6D2D !important;
}
.submenu { background: #fff; }
.submenu a { padding: 12px 12px 12px 30px; }
.submenu a:hover { background: #eee; color: #555; padding: 12px 12px 12px 35px; }

/* 分類區塊 */
.blog_page .show_content,
.blog_in_page .show_content{max-width: 1600px;display: flex;justify-content: space-between;align-items: flex-start;}
.blog_page .show_content:before, .blog_page .show_content:after,
.blog_in_page .show_content:before, .blog_in_page .show_content:after,
.blog_subbox::before,.blog_subbox::after{display: none;}
.blog_ri {width: calc(100% - 260px); padding:0;}
h4.blog_category_title { padding: 0; margin: 0 0 5px 0; font-weight: 300; font-size: 20px; color: #6f6f6f; }
.blog_subbox{display: grid;grid-template-columns: repeat(3,1fr);grid-gap: 65px 3%;}
.subbox_item { width: 100%; margin: 0;}
.subbox_item a { display: flex;flex-direction: column;align-items: center; transition: .5s;}
.subbox_item a:before { display: none; }
.subbox_item a:after { display: none; }
.blog_list_le { width: 100%; height: 0;padding-bottom: 86%;position: relative;}
.blog_list_le::before{content:"MORE";color:var(--MainColor);font-size: var(--f20);font-weight: 300;font-family: var(--fm01); line-height: 120%;text-shadow: 0 0 5px rgba(255,255,255,0.2); text-align: center;display: flex;justify-content: center;align-items: center;width: 100%;height: 100%;background-color: rgba(255,255,255,0.3);position: absolute;top:50%;left: 50%;transform: translate(-50%,-50%);z-index: 99;opacity: 0;transition: .5s;}
.subbox_item a:hover .blog_list_le::before{opacity: 1;}
.blog_list_le img{width: 100%;height: 100% !important;object-fit: cover;object-position: center;position: absolute;top:50%;left: 50%;transform: translate(-50%,-50%);}
.blog_list_ri { width: 100%; padding: 0; }
.blog_list_ri h5 { color:var(--MainColor);font-size: var(--f25);font-weight: 300;line-height: 120%;height: auto;margin-top: 20px;}
.blog_list_ri em { display: block;color:#333333;font-size: var(--f16);font-weight: 300;line-height: 120%; margin: 10px 0;}
.blog_list_ri p { color:#333;font-size: var(--f18);font-weight: 300;line-height: 140%;text-align: justify; }

/* 詳細頁 */
.blog_box_edit * {}
.blog_box_edit{min-height: 50vh; color:#333333;font-size: var(--f18);font-weight: 300;line-height: 140%;}
.blog_in_page h4.blog_category_title {color:var(--MainColor);font-size: var(--f25);font-weight: 300;line-height: 140%; padding:0;margin-bottom: 25px;}
.blog_back{display: grid;grid-template-columns: repeat(3,1fr);grid-gap: 20px 10px;margin-top: 25px;}
.blog_back a{ width: 100%; display: flex;justify-content: center;align-items: center;padding:10px 5px;color:white;font-size: var(--f18);font-weight: 300;line-height: 120%;text-align: center;background-color: #97B58D;transition: .5s;}
.blog_back a:hover{transition: .5s;background-color: var(--SubColor);}

/* 首頁文章管理 */
.module_i_news { padding: 80px 20px; background: #f3f3f3; }
.module_i_news ul {     display: grid;grid-template-columns: repeat(4, 1fr);grid-gap: 20px 1%;max-width: 1300px;}
.module_i_news li { width: 100%; padding: 0; }
.module_i_news li:nth-child(n+5) { display: none; }
.module_i_news li a{display: block;transition: .5s;}
.module_i_news li a:before { display: none; }
.module_i_news li a:after { display: none; }
.module_i_news .title_i_box h4 { font-size: 24px; color: #333; }
.module_i_news .title_i_box h4:before { content: ""; display: block; color: #ACACB2; font-size: 16px; font-weight: 400; }
.i_blog_le { width: 100%; padding: 0;margin: 0;position: relative;transition: .5s;}
.i_blog_le::before{ content: "MORE";width: 100%;height: 100%;color: white;font-size: var(--f18);font-weight: 400;line-height: 120%;text-align: center;background-color: rgba(0, 0, 0, 0.2);position: absolute;top: 0;left: 0;z-index: 99;pointer-events: none;opacity: 0;display: flex;justify-content: center;align-items: center;transition: .5s;}

.module_i_news li a:hover .i_blog_le::before{opacity: 1;}

.i_blog_ri { width: 100%; }
.i_blog_ri h5 { color: #333; font-size: var(--f20); margin-top: 10px; }
.i_blog_ri p { line-height: 180%; font-size: 14px; font-weight: 400; -webkit-line-clamp: 2; }
.i_blog_ri em,.i_blog_ri p{font-size: 14px;}

/* 文章 RWD */
@media screen and (max-width: 960px) {
  .subbox_item{border: none;}
}
@media (max-width:800px) {
  .blog_page .show_content,
  .blog_in_page .show_content{flex-direction: column;}
  .blog_subbox{grid-template-columns: repeat(2,1fr);grid-gap: 25px 5%;}
  .blog_le,.blog_ri{width: 100%;}
  .blog_le{margin-bottom: 25px;}
}
@media screen and (max-width: 600px) {
  .module_i_news ul{grid-template-columns: repeat(2,1fr);grid-gap: 25px 5%;}
  .i_blog_ri em,.i_blog_ri p{font-size: 13px;}
}
@media screen and (max-width: 450px) {
  .blog_back {grid-template-columns: repeat(2,1fr); grid-gap: 20px 5%;}
  .blog_back a:nth-of-type(2){grid-row: 2/2;grid-column: 1/3;}
}

/* ==========================================================================
   促銷方案 & 小撇步文章分享
   ========================================================================== */
.news_part .title_i_box h4 { color: #555; }
.news_list ul li a:hover { background: #eee; }
.show_content .edit { line-height: 180%; font-weight: 300; }
.promotion_title { position: relative; border-bottom: 1px solid #eee; padding-bottom: 50px; }
.promotion_title em { display: block; border: none; font-size: 14px; font-weight: 300; padding: 0; }
.promotion_title span { border: none; color: #555; padding: 0; margin: 0; position: absolute; right: 0; bottom: 10px; font-weight: 300; letter-spacing: 2px; }
.promotion_title span:before { content: "發布時間"; display: block; font-weight: 400; }
.promotion_title h2 { display: block; font-weight: 400; font-size: 24px; }
.other_promotion { margin-top: 200px; }
.other_promotion:before { content: "Read More"; display: block; color: #aaa; padding: 10px 15px; }
.other_promotion li { border-bottom: 1px solid #ddd; width: 100%; margin-left: 0; }
.other_promotion li:last-child { border-bottom: none; }
.other_promotion li a { display: flex; width: 100%; margin: 0; font-weight: 300; padding: 25px 15px; border: none; }
.other_promotion li a:before, .other_promotion li a:after { display: none; }
.other_promotion li a:hover { background: transparent; }
.other_promotion .pmtTime { width: 150px; }
.other_promotion .pmtTime span { float: left; letter-spacing: 3px; }
.other_promotion .pmtTitle { width: calc(100% - 160px); }
.other_promotion .pmtTitle span { display: none; }
.other_promotion .pmtTitle h3 { font-size: 14px; height: auto; min-height: auto; margin: 0; padding-left: 30px; letter-spacing: 4px; font-weight: 300; color: #000; position: relative; }
.other_promotion .pmtTitle h3:before { content: "〉"; font-size: 12px; color: #fff; transition: all .5s; position: absolute; left: 10px; top: 50%; transform: translateY(-50%); }
.other_promotion li a:hover h3:before { color: #888; }

@media screen and (max-width: 768px) {
  .promotion_title h2 { font-size: 18px; }
}
@media screen and (max-width: 450px) {
  .other_promotion li a { flex-wrap: wrap; }
  .other_promotion .pmtTitle { width: 100%; }
  .other_promotion .pmtTitle h3 { padding-left: 0; }
  .other_promotion .pmtTitle h3:before { display: none; }
}

/* ==========================================================================
   相簿管理
   ========================================================================== */
/* 大分類 */
.album_page .main_part { max-width: 100%; }
.album_page .show_content { max-width: 1600px; }
.show-list { display: grid;grid-template-columns: repeat(3,1fr);grid-gap: 40px 3%;}
.show-list::before,.show-list::after{display: none;}
.show-list .item { width: 100%; padding: 0; margin: 0; }
.show-list .item:hover .show_name { color: #bb7f4a; }
.show-list .show_name { -webkit-line-clamp: 1; height: auto;}
.show-list .item .show_name { color:#333333;font-size: var(--f20);font-weight: 300;line-height: 140%;text-align: center;padding:0;margin-top: 40px; }
.overlay { -webkit-transform: scale(1); transform: scale(1); }
.show-list .show_pic {padding-bottom: 69%;position: relative;}
.show-list .show_pic img{width: 100%;height: 100% !important;object-fit: cover;object-position: center;position: absolute;top:50%;left: 50%;transform: translate(-50%,-50%);}

/* 次分類 */
.album_class_page .main_part { max-width: 1600px; }
.subalbum-menu h2 { color: #555; text-align: center; display: block; }
.subalbum-menu h2 .block { display: none; }
.other_subalbum { display: flex; flex-wrap: wrap; }
.other_subalbum li { width: 33.3%; padding: 2%; margin: 0; }
.other_subalbum li p { text-align: center; margin-top: 10px; color: #555; letter-spacing: 2px; }
.other_subalbum li div { height: 0; padding-bottom: 75%; overflow: hidden; }
.other_subalbum li img { min-height: 20vw; object-fit: cover; transition: all .5s; }
.other_subalbum li:hover img { opacity: .6; }

/* 相片頁 */
.album_info_page .main_part { max-width: 100%; }
.album_info_page .show-list { max-width: 1600px; }
.pic-list{ width: 100%;column-count: 5;column-gap: 20px;}
.pic-list::before,.pic-list::after{display: none;}
.pic-list .item {width: 100%;padding: 5px 0;box-sizing: border-box;margin: 0;break-inside: avoid;transition: .5s;}
.pic-list .item:hover .show_pic img{transform: scale(1.1);}
.pic-list .item a{margin:0;transition: .5s;}
.pic-list .show_pic{height: auto;padding:0;transition: .5s;}
.pic-list .show_pic img {max-width: 100%;display: inline-block;width: 100%;object-fit: cover;object-position: 50% 50%;transition: .5s;}
/* .pic-list { display: flex; flex-wrap: wrap; }
.pic-list .item { padding: 0; margin: 10px; width: 33.3%; padding: 0.1%; margin: 0; }
.pic-list .item h6 { color: #fff; font-size: 16px; font-weight: 400; }
.pic-list .show_pic img { min-height: 20vw; object-fit: cover; } */
.other_album { margin-top: 200px; display: none;}
.album_fixed_title { background: transparent; font-size: 15px; color: #fff; }
.other_album_choice li { background: #bb7f4a; border-radius: 3px; font-size: 12px; }

@media screen and (max-width: 768px) {
  .other_subalbum li { width: 50%; }
  .other_subalbum li img { min-height: 35vw; }
  .show-list{grid-template-columns: repeat(2,1fr);grid-gap: 25px 5%;}
  .show-list .item .show_name{margin-top: 24px;}
  .pic-list{column-count: 3;}
}
@media screen and (max-width: 450px) {
  .other_subalbum li img { min-height: 140px; }
  .pic-list .item h6 { font-size: 12px; }
  .pic-list{column-count: 2;}
}

/* ==========================================================================
   聯絡我們 (表單功能)
   ========================================================================== */
.blank_letter {color:#333;font-size: var(--f28);font-weight: 300;line-height: 160%; }
.contact_content{max-width: 1300px;width: 100%; padding: 0;margin:auto;}
.contact_page_inner{display: flex;justify-content: space-between;align-items: flex-start;}
.contact_content .information_right { width: calc(100% - 310px); padding-left: 50px; }
.TEL:before, .TEL2:before, .PHONE:before, .FAX:before, .TAXID:before, .MAIL:before, .ADD:before, .ADD2:before { font-weight: lighter; }
button, input, optgroup, select, textarea { outline: none; color: #333;font-size: var(--f17);font-weight: 300;line-height: 120%; }
input[type="checkbox"], input[type="radio"] { margin: 5px 5px 5px 10px; }
input[type="checkbox"]:nth-child(1), input[type="radio"]:nth-child(1) { margin: 5px 5px 5px 0px; }
.list_before.info li, .list_before.info li a { font-weight: 300; color: #fff; }
.list_before{margin-bottom: 0;}
.list_before.info{display: none;}
.form select { background: transparent; color: #444; border: none; border-bottom: 1px solid #aaa; width: 100%; }
.form select option { background: #eee; }
.contact_form { display: flex; flex-wrap: wrap; justify-content: space-between; margin:0 0 25px 0;}
.contact_form li { width: 100%; padding: 0; display: flex;align-items: center;}
.contact_form li+li{margin-top: 20px;}
.contact_form li input.noborder { padding-left: 10px; background: transparent; border: none; border-bottom: 1px solid #eee; }
.contact_form li textarea.noborder { border: 1px solid #ccc; padding-left: 10px; background: transparent; }
.contact_form li.last { width: 100%; }
.contact_form li.last cite { margin-left: 10px; background: #bb7f4a; color: #eee; border: 1px #ccc solid; width: 130px; }
.contact_form li.last blockquote { border: 1px #ccc solid; width: 130px; }
.contact_form li.last blockquote input { color: #333; font-size: 14px; font-weight: 300; }
.contact_form li.last blockquote:hover input, 
.contact_form li.last cite:hover input { letter-spacing: 3px; }
.information_right .contact_form li.last blockquote input { color: 333; font-weight: 300; font-size: 14px; }
.contact_form li .form__label {display: block; width: 130px;min-width: 130px; font-weight: 300; color: #333;font-size: var(--f19); text-align: left; margin-left: 0; margin-bottom: 5px; white-space: nowrap;}
.contact_form li input.noborder{padding:5px 10px;border: 1px #ccc solid;}
.contact_form li .form__insert { color: #444; width: 100%; }
.noborder { padding: 10px; }

.contact_page .contact_content .information_left{max-width: 360px;width: 100%;padding: 0;}
.contact_page .contact_content .information_right{max-width: 700px;width: 100%;padding: 0;}
.contact_page .blank_letter{color:var(--MainColor);font-size: var(--f30);font-weight: 300;line-height: 120%;padding: 0;margin: 0;margin-bottom: 15px;}
.contact_page .red{color:#8CB70E;font-size: var(--f19);}
.contact_page .con_link a{display: block;width: fit-content;color:#333;font-size: var(--f19);font-weight: 300;line-height: 180%;word-break: break-all;transition: .5s;}
.contact_page .con_link a:hover{transition: .5s;color: #8CB70E;}
.contact_page .all_cart_btn{max-width:350px;}
.contact_page .all_cart_btn label span{background-color:#fff;border: 1px #9EB092 solid; transition: .5s;color:#333;}
.contact_page .all_cart_btn label:hover span{transition: .5s;background-color:#9EB092;color:#fff}
.contact_page .all_cart_btn label:nth-of-type(2) span{display: flex;justify-content: center;align-items: center;}
.contact_page .all_cart_btn label:nth-of-type(2) span i{margin-left: 10px;}

@media (max-width:800px) {
  .contact_page_inner{flex-direction: column;}
  .contact_page .contact_content .information_left,
  .contact_page .contact_content .information_right{max-width: 100%;}
  .contact_page .contact_content .information_left{margin-bottom: 25px;}
  .contact_page .all_cart_btn{max-width: 100%;}
  .contact_page .blank_letter{padding:12px 10px 10px 10px;text-align: center;display: flex;justify-content: center;align-items: center;background-color: var(--SubColor2);color:white;}
  .contact_page .blank_letter .red{padding-left: 10px;}
}
@media screen and (max-width: 500px) {
  .contact_form li{flex-direction: column;align-items: flex-start;}
}

/* ==========================================================================
   購物車與產品展示
   ========================================================================== */
.product_page .main_part { max-width: 100%;}
.product_page .show_content{max-width: 1600px;width: 100%;margin: auto;}
.prod_part { max-width: 1400px; }
.product_info_page .main_part {padding:170px 5% 130px; }
.product_info_page .show_content { max-width: 1250px;}
.product_info_page .product-wrapper{max-width: 1200px;display: flex;justify-content: space-between;align-items: flex-start;flex-wrap: wrap;}
.product_page .show_content, .product_info_page .show_content { width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; }
.product_page .product-layer-two { position: relative; width: 270px}
.product_page .products-list, .product-wrapper { width: calc(100% - 320px); display: flex; flex-wrap: wrap; align-items: flex-start; }
ul.page { width: 100%;margin:40px 0 0; }

.product-layer-two li ul { position: static; margin-top: 0; display: none; width: 100%; margin-left: 0; }
.product-layer-two li:hover ul { border: none !important; display: block; }
.product-layer-two li li { display: block; transition: all ease .3s; border: none; padding: 0; background: transparent; margin: 0;}
.product-layer-two li li a { padding: 10px 10px 10px 40px; background: transparent;padding-left: 40px;color:#444444;font-size: var(--f18);font-weight: 300;line-height: 120%;position: relative;transition: .5s;}
.product-layer-two li li a:hover::before{opacity: 1;transform:translateY(-50%) translateX(15px);}
.product-layer-two li li a::before{content:"";width: 0;height: 0;border-style: solid;border-width: 6px 0 6px 10px;border-color: transparent transparent transparent var(--MainColor);position: absolute;left: 0;top:50%;transform: translateY(-50%);transition: .5s;opacity: 0;}
.product-layer-two li li a i{font-size: 14px;position: absolute;right: 16px;top:50%;transform: translateY(-50%);color:var(--SubColor2);}
.product-layer-two > li { width: 100%; max-width: 100%; padding: 0; text-align: left; border-bottom: none;margin: 0;}
.product-layer-two > li > a {color:#444444;font-size: var(--f20);font-weight: 300;line-height: 120%;padding:10px 25px;position: relative;pointer-events: none;border-bottom: 1px #F0F0F0 solid;background: transparent;}
.product-layer-two > li > a i{color:#333333; font-size: 14px;position: absolute;right: 15px;top:50%;transform: translateY(-50%);}
.product-layer-two > li.active > a i{color:#fff; }
.product_info_page .product-layer-two { display: none; }
.product_info_page .products-list, .product-wrapper { width: 100%; }
.product-layer-two li li:hover { margin-left: 15px; }
.product-layer-two li.active > a {background: var(--SubColor2);color:white; font-weight: 100;}
.product-layer-two li.active li a{color:#444444;font-weight: 300;}

/* 清單頁_商品區 */
.products-list .pic { padding-bottom: 100%; border-radius: 25px; overflow: hidden; }
.products-list .name { color: #333333; font-size: var(--f20); font-weight: 300; line-height: 120%; height: 48px;}
.products-list .price,
.products-list .price b{color:var(--SubColor2);font-size: var(--f20);font-weight: 300;line-height: 120%;}
.products-list .more { display: flex;justify-content: center;align-items: center;color:white;font-size: var(--f17);font-weight: 100;font-family: var(--fm01); line-height: 120%;text-align: center;padding:5px 5px;border-radius: 150px;background-color: var(--SubColor2); transition: .5s;border: none;}
.products-list .item a:hover .more {transition: .5s;background-color: var(--SubColor); }
.product_page .products-list::before,.product_page .products-list::after{display: none;}
.product_page .products-list{display: grid;grid-template-columns: repeat(4,1fr);grid-gap: 65px 1.5%;}
.product_page .products-list .item{width: 100%; margin:0;padding:0;}

/* 詳細頁 */
.product_main{padding:0;width: 60%;}
.sidebarBtn { border: none; background: transparent; width: 31%;padding: 0 50px;}
.sidebarBtn h2 {color:var(--MainColor);font-size: var(--f30);font-weight: 300;line-height: 120%;}
.sidebarBtn h2.h2_price{color:#5A816F;font-size: var(--f27);font-weight: 300;line-height: 120%;}
.sidebarBtn .price { font-weight: 300; padding: 5px 0; border-bottom: none; }
.sidebarBtn .price span { display: inline-block; }
.sidebarBtn #number_area { color: #bb7f4a; margin-top: 10px; }
.product_info { margin:15px 0 30px;}
.product_info li { margin: 15px 0; align-items: center;}
.product_info li .txt_box { color:#444444;font-size: var(--f18);font-weight: 300;line-height: 140%;}
.product_info li span{color:#444;font-size: var(--f15); font-weight: 300;margin-bottom: 0;white-space: nowrap;}
li.size_ex01 span,
li.size_ex02 span{color:#768A71;font-size: var(--f16);font-weight: 400;}
.product_info select{color:#444;font-size: var(--f16);font-weight: 300;line-height: 140%;padding:10px 5px;border: 1px #ccc solid;}
.amountNum { width: 100%; height: 40px; padding: 10px; margin-left: 0; }
.inquiry_a1 {color:white;font-size: var(--f18);font-weight: 300;line-height: 140%;padding:13px 5px;background-color: #5A816F;border-radius: 5px;transition: .5s;}
.inquiry_a2 {color:white;font-size: var(--f18);font-weight: 300;line-height: 140%;padding:13px 5px;background-color: #378137;border-radius: 5px;transition: .5s;}
.inquiry_a1:hover{transition: .5s;background-color: var(--SubColor);}
.inquiry_a2:hover{transition: .5s;background-color: #5bd25b;}
.in_note_text{color:#444444;font-size: 15px;font-weight: 300;line-height: 160%;text-align: center;margin-top: 15px;}
.toShare { border-top: none; }
.toShare b { color:#444;font-size: var(--f15);font-weight: 300;line-height: 140%;}
.prod_related { background: transparent; padding:0 5% 130px;}
.prod_related h6{margin-bottom: 50px;}
.prod_related h6 span{display: block;text-align: center;}
.prod_related h6 span:before {color:#5A816F;font-size: var(--f30);font-weight: 300;line-height: 120%;text-align: center; }
ul.prod li .prod-panel * { color: #9b9b9b; }

/* 詳細頁輪播區 */
.product_pic { padding-bottom: 0; padding-left: 0; display: flex; flex-wrap: wrap-reverse; justify-content: space-between; }
.bx-wrapper .bx-viewport { border: none; background: transparent; left: 0; }
.product_pic .bx-wrapper { width: 85%; order: 2; margin: 0; padding: 0; }
.product_pic #bx-pager { padding: 0; color: #555; width: 12.6%; order: 1; position: relative; }
.product_pic #bx-pager h6 { display: none; }
.product_pic #bx-pager a { border: none; height: auto; width: 100%; margin: 0; margin-bottom: 7px; }

/* 詳細頁商品說明 */
ul.prod { line-height: 180%; font-weight: 300; margin-top: 30px; }
ul.prod > li:nth-child(2) { display: none; }
ul.prod li h3.prod-thumb { display: none; }
.lastPage { background-color: #97B58D;color:white;font-size: var(--f18);font-weight: 300;line-height: 120%;padding:5px;max-width: 140px;width: 100%;display: flex;justify-content: center;align-items: center;margin:50px auto 0;padding:10px 5px;transition: .5s;}
.lastPage:hover{transition: .5s;background-color: var(--SubColor);}
.related_list { display: grid;grid-template-columns: repeat(4,1fr);grid-gap: 20px 1.5%;}
.related_list li{width: 100%;padding: 0;transition: .5s;}
.related_list li:hover{transform: translateY(-10px);}
.related_list li a { background: transparent; display: block;width: 100%;padding:0;}
.related_list li a p {margin-top: 25px;color:#444;font-size: var(--f20);font-weight: 300;line-height: 140%;text-align: left;}

/* 匯款通知 & 購物車步驟 */
.remit_page .all_cart_btn{max-width: 100%;}
.form_content { max-width: 1000px; padding: 0;}
.separate_title { background: var(--SubColor2); color: #fff; font-size: var(--f20); font-weight: 300;line-height: 160%; text-align: center;padding:10px;}
.formbox_form{margin: 25px 0;}
.border200{width:100%;}
.formbox_form li{padding:0;margin:0;display: flex;align-items: center;}
.formbox_form li.last { text-align: center; padding-left: 0; }
.formbox_form li .form__label { margin-left: 0; color:#444;font-size: var(--f18);font-weight: 300;line-height: 120%; width: 130px;min-width: 130px;}
.formbox_form li+li{margin-top: 15px;}
.formbox_form li .form__insert{display: flex;flex-wrap: wrap;align-items: center;}
.formbox_form li .form__insert input,.formbox_form li .form__insert select ,.longer{color:#444;font-size: var(--f17);font-weight: 300;line-height: 140%;}
.form label.Bigcheck{display: flex;align-items: center;margin:5px 0 5px;}
.form label.Bigcheck .inputbox{margin:0 10px 0 0;position: static;}
.form .f_add select,.longer{padding:5px;border: 1px #ddd solid;margin:0;}
.separate_title .note{padding-left: 10px;}
.formbox_form li .form__insert select{width: 120px;}
.formbox_form li .form__insert span{margin-bottom: 15px;}
.formbox_form li .form__insert span:nth-of-type(2){margin-left: 15px;}
.declaration{padding:0;margin-bottom: 25px;}
.form.declaration label.Bigcheck{margin:0;padding:10px 20px;position: static;background-color: var(--SubColor3); color:#fff; font-size: var(--f17);font-weight: 300;line-height: 160%;}
.rewrite_simple, .send_simple { background: #716f6e; font-size: 14px; border-radius: 0; font-weight: 300; }
.send_simple { background: #765f4e; }
.shopping-cart .cart_head{background: var(--SubColor3);}
.stepImg { border: 1px solid var(--SubColor3); padding: 10px; margin: 0 auto 40px auto; }
.stepImg > img { display: none; }
.stepImg span {color:#333;font-size: var(--f16);font-weight: 300;line-height: 120%;text-align: center; }
.stepImg span.one, .stepImg span.three { text-align: center; }
.stepImg span.active { color:var(--SubColor3);font-weight: 500;font-style: normal; }
.shopping-cart .cell { font-size: 14px; font-weight: 300; padding: 15px 0; }
.shopping-cart .cell:before { width: 100%; }
.shopping-cart .cart_content .row{border-top: 1px #ddd solid;border-bottom: 1px #ddd solid;}
.shopping-cart .cell.product_name,
.shopping-cart .cell { color:#333;font-size: var(--f16);font-weight: 300;line-height: 120%;vertical-align: middle;}
.shopping-cart .cart_head .cell.product_name,
.shopping-cart .cart_head .cell { color:#fff;}
.shopping-cart .cell.product_name, .shopping-cart .cell a{font-size: var(--f17);font-weight: 400;line-height: 160%;}
.shopping-cart .cell.product_name span{background-color:#8CB70E;padding:3px 5px;color:white;width: fit-content;}
.shopping-cart .cell.amount input{text-align: center;}
.total_amount ul:after { border-right: none; border-bottom: none; }
.total_amount ul li,.total_amount ul li span{color:#444;font-size: var(--f17);font-weight: 300;line-height: 160%;}
.red{color:#8CB70E;}
.total_amount li.red { margin-top: 40px; color:#8CB70E;font-size: var(--f20);}
.total_amount li.red span{color:#8CB70E;font-size: var(--f20);}
.place01 select{padding:10px;font-size: var(--f16);}
.all_cart_btn{max-width: 350px;width: 100%; display: flex;justify-content: space-between;align-items: center;margin: 0 0 0 auto;}
.total_amount .rewrite_simple, .total_amount .send_simple{width: 47.5%;}
.rewrite_simple, .send_simple{margin: 0;}
.total_amount .send_simple {width: 47.5%; display: flex;justify-content: center;align-items: center;color:white;font-size: var(--f17);font-weight: 300;line-height: 120%;text-align: center;padding:15px 5px;transition: .5s;background: var(--SubColor2);float: unset;height: auto;}
.all_cart_btn label {width: 47.5%;height: auto;transition: .5s;}
.all_cart_btn label span{width:100%; display: flex;justify-content: center;align-items: center;color:white;font-size: var(--f17);font-weight: 300;line-height: 120%;text-align: center;padding:15px 5px;transition: .5s;background: var(--SubColor2);}
.all_cart_btn label{position: relative;}
.all_cart_btn label input{width: 100%;height: 100%;opacity: 0;position: absolute;top:0;left: 0;}
.all_cart_btn label:hover span, .total_amount .send_simple:hover{transition: .5s;background: #8CB70E;}
.contact_le_map a { background: #000; }
.contact_le_map a b { font-weight: 300; }
.contact_le_map a i.fa-solid.fa-right-to-bracket { display: none; }
.form label{color:#444;font-size: var(--f17);font-weight: 300;line-height: 160%;}
.form label .inputbox { top: -2px; }
.form label.circle .inputbox { vertical-align: middle; margin:0 5px 0 0;}
input[type="checkbox"], input[type="radio"] { margin: 0px 10px 0 0; }

.list_before.account li{padding-left: 100px;}
.list_before.account li,
.ACCN1:before, .ACCN2:before, .ACCN3:before, .ACCN4:before{color:#444;font-size: var(--f17);font-weight: 300;line-height: 160%;}
.ACCN1:before, .ACCN2:before, .ACCN3:before, .ACCN4:before{width: 70px;}

/* 訂單詳細頁(結帳的最後一頁) */
.order_finish_page .main_part{max-width: 100%;}
.order_finish_page .order_pay{max-width: 1000px;margin: auto;padding: 0;}
.order_list_tit b{color:var(--MainColor);font-size: var(--f28);font-weight: 500;line-height: 160%;}
.order_list_tit span{color:#444;font-size: var(--f17);font-weight: 500;font-family: var(--fm01);line-height: 160%;padding: 0;margin: 0;border: none;    position: relative;bottom: 5px;}
.order_list_spec{padding:10px 20px;text-align: center;background-color: var(--SubColor3);}
.order_list_spec p{color:white;font-size: var(--f18);font-weight: 300;line-height: 160%;text-align: center;}
.order_list_tab td{color:#444;font-size: var(--f17);font-weight: 300;line-height: 160%;background-color: #fff;}
.order_list_tab td:nth-child(1){color:white;font-weight: 300; background-color: var(--SubColor3);}
.order_list_tab.payer td:nth-child(1){border-top: 5px #fff solid;border-right: none;}
.order_list_pro tr:first-child{background-color: var(--SubColor3);}
.order_list_pro tr:first-child td{color:white;font-size: var(--f17);font-weight: 300;line-height: 160%;}
.order_list_pro tr:first-child td:nth-of-type(1),
.order_list_pro tr:first-child td:nth-of-type(4){white-space: nowrap;}
.order_list_pro td{color:#444;font-size: var(--f17);font-weight: 300;line-height: 160%;}
.last_box_money p, .last_box_money em{color:#444;font-size: var(--f17);font-weight: 300;line-height: 160%;}
.last_box_money em span{font-weight: 500;color:#8CB70E;}
.order_finish_page .information_left{max-width: 1000px;width: 100%;margin: auto;display: block;padding: 0;}
.order_finish_page .information_left h4{color:#444;font-size: var(--f28);font-weight: 400;line-height: 160%;}
.order_finish_page .information_left .list_before{margin-top: 20px;}
.order_finish_page .order_list_tab{margin-bottom: 20px;}
.order_list_head{text-align: left;}
.order_finish_page .order_list_head p{color:#444;;font-size: var(--f28);font-weight: 400;line-height: 160%;border: none;padding:0;margin:0 0 15px 0;text-align: left;}

/* 會員系統 */
.right_member_in i{margin-bottom: 5px;}
.member_title h2 { font-size: 20px; color: #444; font-weight: 400; display: none; }
.member_title p { margin: 0px auto 5px; padding: 0; border-top: none; }
.member_title:before { content: "會員專區"; font-size: var(--f27); font-weight: 400; margin-bottom: 30px; display: block; }
.member_title img { display: none; }
.member_title em{font-size: 15px;}
.login_mem_submit { background: var(--SubColor2);transition: .5s; padding-top: 8px;}
.login_mem_submit:hover{transition: .5s;background: var(--SubColor);}
.login_mem_other_link{color:#7aa354;}
.member_login_regist { background: var(--SubColor); }
.member_login_regist h2 { font-weight: 300; color:white;}
.member_login_regist a { background: #fff; transition: .5s;color:var(--SubColor2);}
.member_login_regist a:hover{transition: .5s;background: var(--SubColor2);color:white;}
.member_login_regist p{color:white;}
.login_mem_name, .login_mem_pass { padding-left: 50px; }
.mem_regist_title_s { background: var(--SubColor);color:white; }
.mem_regist_title_s_s input[type="submit"], 
.mem_regist_title_s_s input[type="button"] { background: var(--SubColor2) !important; padding: 16px 25px 13px !important;color:white;transition: .5s; }
.mem_regist_title_s_s input[type="submit"]:hover, 
.mem_regist_title_s_s input[type="button"]:hover{transition: .5s;background: var(--SubColor) !important;}
.mem_regist_title_s_s{color:#000;}
.member_order { background: none; }
.member_order a { border: 1px solid var(--SubColor2); border-radius: 0; }
.member_order a:hover {transition: .5s; background-color: var(--SubColor2);color:white; }
.mem_box2 input.bbtn01 {transition: .5s; background: var(--SubColor2); color:white;}
.mem_box2 input.bbtn01:hover,.mem_box2 input.bbtn02:hover{transition: .5s;background: var(--SubColor);}
/* 會員頁面-20260901 */
body.member_page .banner.banB{display: block;}
body.member_page .member_title{margin-bottom: 0;}
.order_history td{color:#000;}
.order_history tr td:nth-child(3) a{background: var(--SubColor3);text-align: center;width: 100px;transition: .5s;padding: 5px 5px 3px;}
.order_history tr td:nth-child(3) a:hover{transition: .5s;background: var(--SubColor2);}
.mask_order_history{ margin-bottom: 50px;}
.member_page_02 .edit{max-width: 1200px;margin: auto;}
/* 會員頁面 RWD */
@media (max-width:768px) {
  .order_history tr td:nth-child(1) span{background: var(--SubColor);border-radius: 0;width: 100%;}
  .order_history tr td:nth-child(3) a{width: 100%;}
  .mask_order_history{margin-bottom: 35px;padding: 0;}
}
@media (max-width:400px) {
  .member_login table{display: block;}
  .member_login tr td{display: block;}
  .member_login tr td:nth-child(n){text-align: left;}
  .member_login tr td:nth-child(1){width: 100%;}
  .member_login, .member_login_regist{margin: auto;}
}
@media (max-width:480px) {
  .mem_box2{max-width: 200px; flex-direction: column;margin: 35px auto 25px;}
  .mem_box2 input.bbtn01,.mem_box2 input.bbtn02{width: 100%;margin: 0;}
  .mem_box2 input.bbtn02{margin-top: 15px;}
}



/* 購物車與產品 RWD */
@media screen and (max-width: 1300px) {
}
@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 1024px) {
    .products-list .name {height: 43px;font-size: 17px; }
    .products-list .price, .products-list .price b{font-size: 16px;}

    .product_info_page .main_part{padding:80px 5%;}
    .sidebarBtn{width: 36%;padding:0 0 0 25px;}
}
@media screen and (max-width: 980px) {
  .product_page .products-list{grid-template-columns: repeat(3,1fr);grid-gap: 65px 2.5%;}
  .products-list .pic{border-radius: 2vw;}
  
}
@media screen and (max-width: 768px) {
  .product-layer-two, .products-list, .product-wrapper { width: 100%; }
  .product-layer-two { margin-right: 0; display: block; }
  .product_page .product-layer-two, .product_page .products-list { width: 100%; border-right: none; }
  .product_page .product-layer-two{margin-top: 0;}
  .products-list .pic{border-radius: 3.5vw;}
  .product_page .show_content > a { order: 1; }
  .product_page ul.page { order: 5; }
  .products-list { grid-template-columns: 1fr 1fr; }
  .product-layer-two li ul{display: block !important;}

  .product_info_page .main_part{padding:60px 5%;}
  .product_info_page .product-wrapper{flex-direction: column;}
  .product_main,.sidebarBtn{width: 100%;}
  .prod_related h6 span:before { font-size: 24px; }
  .mobile_product_name { display: none; }
  .product_info li .txt_box{width: 100%;}
  .product_pic{padding:0;}
  .prod_related{padding:0 5% 60px;}
  .related_list{grid-gap: 20px 2.5%;}
  .product-wrapper .sidebarBtn { padding: 20px 0; }
  .shopping-cart .cell { padding: 15px 0; }
  .shopping-cart .cell:before {background-color: var(--SubColor2);color:white;font-size: var(--f17);font-weight: 300;line-height: 120%;margin:auto;margin-bottom: 25px;width: fit-content;padding:5px 10px;}
  .shopping-cart .cell.product_name { padding-left: 0; }

  .product-layer-two{display: none;}

  .shopping-cart .cell:before{margin-bottom: 10px;}
  .shopping-cart .cell.product_name span{margin:10px 0 0 auto;}
  .payment{margin:0;}
  .payment li{margin:15px 0 0;}
}
@media (max-width:640px) {
  .order_list_pro td span{font-size: var(--f20);}
}
@media screen and (max-width: 600px) {
  .products-list .item { width: 49%; }
  .shopping-cart .cart_content .row { margin-left: 0; display: block; }
  .shopping-cart .cell { border-bottom: 1px solid #555; }
  .shopping-cart .cell.product_name { font-size: 12px; text-align: center; }
  .shopping-cart .cell.product_name{display: flex;flex-direction: column;align-items: center;}
  .small_pic { position: relative; display: block; margin: auto; width: 200px; height: 200px; margin-bottom: 25px;}
  .shopping-cart .cell.product_name span{width: 100%;text-align: center;padding:10px;}
  .shopping-car .cart_content .cell::before{background-color: var(--SubColor2);}
  .amountNum{border: 1px var(--MainColor) solid;}

  .products-list .name {height: 40px;font-size: 16px; }
  .products-list .price, .products-list .price b{font-size: 15px;}

  .related_list{grid-template-columns: repeat(2,1fr);grid-gap: 25px 5%;}
  .lastPage{margin-top: 35px;}

  .formbox_form li .form__insert{padding:0;}
  .all_cart_btn{max-width: 100%;}
  .formbox_form li .form__label{width: 100%;min-width: unset;}
  .formbox_form li{flex-direction: column;align-items: flex-start;}
  .formbox_form li .form__insert{width: 100%;margin: 10px 0 0;}
  .form label.Bigcheck{position: static;margin-top: 5px;}
  .border200.fix200{width: 100%;}
  .form.declaration label.Bigcheck{padding:10px;}
}
@media (max-width:500px) {
  .product_page .products-list{grid-template-columns: repeat(2,1fr);grid-gap: 25px 5%;}
}

/* ==========================================================================
   內頁 BANNER 設定
   ========================================================================== */
.banner {height: 600px;background-image: url('../f_img/fun_bn01.jpg');background-repeat: no-repeat;background-size: cover;background-position: center;}
.banner h5 {
  width: 90%;
  font-size: 24px;
  color: #797070;
  font-weight: 500;
  letter-spacing: 5px;
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 0;
  margin-left: auto;
  padding-top: 60px;

  display: none;
}
.banner.banA { display: none; }
.banner.banB { display: none; }

@media screen and (max-width: 768px) {
  .banner { height: 200px; padding: 70px 0 0; }
  .banner h5 { font-size: 20px; padding-top: -12px; }
}

/* ==========================================================================
   其他設定
   ========================================================================== */
.path { display: none; }
.other_select_page .promotion_title { display: none; }
.other_select_page .other_promotion { display: none; }

/* 頁碼 */
ul.page{display: flex;justify-content: center;align-items: center;flex-wrap: wrap;}
.page strong, .page li a { display: flex;justify-content: center;align-items: center; border: 1px #CCCCCC solid;border-radius: 150px; color:#333333;font-size: var(--f20);font-weight: 400;line-height: 120%;text-align: center;}
.page strong, .page li a:hover { background: #333; }
.other_select_page .page { margin: 0; }
.page li { display: flex;justify-content: center;align-items: center; color:var(--SubColor2);font-size: var(--f20);font-weight: 400;line-height: 120%;text-align: center;}
.page li a,.page li{margin:5px 4px;width: 39px;min-width: 39px; height: 39px;}

/* 錨點與按鈕 */
html { scroll-behavior: smooth; }
#to_top { padding-top: 12px; width: 45px; height: 45px; color: #888; bottom: 50px; }
#to_top i.top { width: 12px; height: 12px; }
#to_top i.top:before, #to_top i.top:after { height: 8px; background: #555; }
.car_page .information_left { display: block; padding:0;margin:45px 0 0;}

/* footer */
.footer{position: relative;background: transparent;padding: 0;}
.footer::before{content:"";width: 100%;height: 100%;background-color: rgb(204, 214, 179, 0.3);position: absolute;top:0;left: 0;z-index: 20;pointer-events: none;}
.f_bg{background-image: url('../f_img/footer_img001.png');background-repeat: repeat;position: relative;z-index: 50;}
.fu01{max-width: 1600px;width: calc(100% - 40px);margin: auto;display: flex;justify-content: space-between;align-items: center;padding:70px 0;}
.fu02{max-width: 550px;width: 100%;display: flex;justify-content: space-between;align-items: flex-start;}
.fu02>a{display: block;width: 100px;}
.fu03>b{display: block;color:var(--MainColor);font-size: var(--f50);font-weight: 100;font-family: var(--fm01);line-height: 120%;margin-bottom: 18px;}
.fu03 a{display: block;width: fit-content; color:#444444;font-size: var(--f16);font-weight: 400;line-height: 190%;letter-spacing: 0.06em;transition: .5s;}
.fu03 a:hover{transition: .5s;color:var(--SubColor);}
.footer_menu{max-width: 410px;width: 100%;display: grid;grid-template-columns: repeat(3,1fr);grid-gap: 10px 2.5%;}
.footer_menu a{display: flex;justify-content: center;align-items: center;color:white;font-size: var(--f18);font-weight: 400;line-height: 120%;text-align: center;padding:10px 5px;background-color: #CCD6B3;transition: .5s;border: none;}
.footer_menu a:hover{transition: .5s;background-color: var(--MainColor);}

.fu_copy{background-color: #CCD6B3;overflow: hidden;position: relative;padding: 15px 20px;}
.fu_copy_width{max-width: 1600px;width: 100%;margin: auto;}
.fu_copy ,.fu_copy a, .copy{color:white;text-align: right;border: none;}
.copy{margin: 0;padding: 0;}

.fix_ri{position: fixed;bottom: 100px;right: 0;z-index: 105;}
.fix_ri a{display: flex;justify-content: center;align-items: center;width: 52px;height: 52px;background-color: #697F70;border-radius: 7px;transition: .5s;}
.fix_ri a img{max-width: 50%;}
.fix_ri a:hover{transition: .5s;background-color: #BEC7A3;}
.fix_ri a+a{margin-top: 15px;}

@media (max-width:1060px) {
  .fu02{max-width: 400px;margin-right: 25px;}
  .fu03{margin-left: 25px;}
}
@media (max-width:768px) {
  .fu01{padding:50px 0;flex-direction: column;}
  .fu02{margin:0 0 25px;max-width: 100%;justify-content: center;}
  .fu_copy, .fu_copy a, .copy{text-align: center;}
}
@media (max-width:400px) {
  .fu01{padding:35px 0;}
  .fu02{flex-direction: column;align-items: center;}
  .fu03{margin: 25px 0 0;}
  .fu03>b{text-align: center;}
  .fu03 a{text-indent: 0.06em;text-align: center;margin: auto;}
  .footer_menu{grid-template-columns: repeat(2,1fr);grid-gap: 10px 4%;}
}