@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&family=Noto+Serif+TC:wght@200..900&display=swap');

/* ==========================================
   1. Base & Variables (基礎設定與變數)
   ========================================== */
* {
  --f120: clamp(56px, 32.73px + 7.27vw, 120px);
  --f32: clamp(22px, 18.36px + 1.14vw, 32px);
  --f28: clamp(21px, 18.45px + 0.80vw, 28px);
  --f24: clamp(19px, 17.18px + 0.57vw, 24px);
  --f22: clamp(18px, 16.55px + 0.45vw, 22px);
  --f20: clamp(16px, 14.55px + 0.45vw, 20px);
  --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);
  --f14: clamp(12px, 11.27px + 0.23vw, 14px);
  --f12: clamp(10px, 9.27px + 0.23vw, 12px);

  --mainColor01: #651B00;
  --mainColor02: #FEF5CB;
  --mainColor03: #F03A13;
  --mainColor04: #9C6F5F;

  color: #333333;
  font-family: "Noto Sans TC", sans-serif;
  --fm01: "Noto Serif TC", serif;
}

a { color: #333333; }

.clearfix { clear: both; }
.clearfix:before, .clearfix:after {
  content: '';
  clear: both;
  display: block;
  height: 0;
}

.main { width: 100%; margin: 0 auto; }
.main * {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  color: #333;
  font-size: var(--f16);
  font-weight: 300;
  line-height: 160%;
  word-break: break-all;
}
.main img { max-width: 100%; }

/* ==========================================
   2. Layout & Header (版面與標頭)
   ========================================== */
.tp_header {
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 99;
}
.tp_me_shadow {
  padding: 10px;
  background: #fff;
  box-shadow: 0 0 10px #aaa;
  position: relative;
  overflow: hidden;
  transition: all .2s;
}
.tp_me_w { max-width: 1200px; margin: auto; }
.tp_header #logo { display: inline-block; vertical-align: middle; width: 300px; }
.tp_header #logo img { max-width: 100%; max-height: 100%; }

.main_top {
  padding: 25px 20px;
  background: #FEF5CB;
  border-top: 4px var(--mainColor01) solid;
  position: relative;
  z-index: 999999;
}
.main_top:before { content: ""; position: absolute; }

.Shin_header { max-width: 1800px; width: 100%; margin: auto; position: relative; }
.Shin_header_logo { max-width: 242px; width: 100%; position: absolute; top: 0; left: 0; }
.Shin_header_logo a { display: block; }
.Shin_header_logo a img { width: 100%; }
.Shin_header_link { display: inline-block; position: relative; }

.top_menu_link { display: flex; justify-content: flex-end; align-items: center; }

.me_tp_features { display: inline-block; vertical-align: middle; width: calc(100% - 320px); text-align: right; }
.me_tp_features a {
  position: relative; display: inline-block; vertical-align: middle; padding: 5px; font-size: 16px;
  color: #000; border-radius: 100%; border: 2px #000 solid; margin: 7px 3px;
}
.me_tp_features a i {
  position: absolute; top: -6px; right: -6px; display: inline-block; font-style: normal;
  font-size: var(--f12); background: #c00; color: #fff; text-align: center; width: 16px;
  height: 16px; line-height: 16px; border-radius: 100%;
}

a.Shin_cart {
  display: flex; justify-content: center; align-items: center; width: 35px; height: 35px;
  background-color: #fff; border-radius: 150px; border: 1px #6C2302 solid; position: relative;
}
a.Shin_cart i{
  color:#333;
}
a.Shin_cart em {
  display: flex; justify-content: center; align-items: center; width: 15px; height: 15px;
  background-color: var(--mainColor03); border-radius: 150px; color: white; font-size: var(--f12);
  font-weight: 500; font-style: normal; line-height: 120%; position: absolute; z-index: 6; right: -6px; top: -4px;
}
a.Shin_cart img { width: 30px; }

.Shin_login {
  padding: 5px 15px 5px 30px; background-image: url(../images/52S_login.png);
  background-repeat: no-repeat; margin-right: 10px; background-position: left;
  border-right: 2px solid #FFF; display: none;
}

/* ==========================================
   3. Search Features (搜尋區塊)
   ========================================== */
.box_search { position: relative; display: inline-block; vertical-align: middle; width: 160px; height: 30px; }
.box_search input[type=text] {
  -webkit-appearance: textfield; -webkit-box-sizing: content-box; background: url(../images/search-icon.png) no-repeat 9px center #fff;
  border: solid 1px #ccc; padding: 5px 10px 5px 32px; width: 110px; border-radius: 10em; transition: all .5s; outline: none;
}
.box_search input[type=text]:focus { color: #e63917; width: 160px; }

.shop_search_txt {
  background: #fff; color: #666; border: none; border-radius: 20px;
  padding: 6px 60px 6px 10px; position: absolute; top: 0; right: 0; z-index: 1; font-size: 13px; height: 19px;
}
.shop_search_btn {
  background: #000; color: #fff; font-size: 13px; border: none; border-radius: 20px;
  position: absolute; top: 0; right: 0; z-index: 5; padding: 8px 15px; cursor: pointer;
}

.Shin_Search { width: 166px; margin-left: 15px; position: relative; }
.Shin_keyword { width: 100%; outline: none; border: 1px solid var(--mainColor01); border-radius: 50px; position: relative; }
.Shin_Search form>input[type="text"] { color: #999999; font-size: var(--f15); font-weight: 300; line-height: 120%; padding: 6px 40px 6px 10px; }
.Shin_submit { width: 32px; height: 32px; position: relative; overflow: hidden; border-radius: 150px; }
.Shin_submit input { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 99; opacity: 0; border: none; outline: none; }
.Shin_Search label { width: 30px; height: 30px; background-color: var(--mainColor03); border-radius: 150px; position: absolute; top: 1px; right: 0; overflow: hidden; display: flex; justify-content: center; align-items: center; }
.Shin_Search label input { position: absolute; opacity: 0; z-index: 99; }
.Shin_Search label i { position: absolute; transform: rotateY(-180deg); color: white; }

.search_box_s { width: 160px; position: absolute; top: 100%; left: 0; z-index: 999; }
.Shin_header_link .search_box_s a { display: block; padding: 10px 0; background-color: #F0F0EE; color: #777; border-bottom: 1px solid #000; text-align: center; }
.Shin_header_link .search_box_s a:hover { transition: 0.5s; background-color: #777; color: #FFF; }

#rim_search { display: inline-block; }
#rim_search>a { background: url(../../images/jie_t_img01.png) no-repeat center center !important; margin: 18px 0; }
#rim_search>a.active { background-image: url(../../images/jie_t_img04.png) !important; }

.search_box { background: #fff; width: 150px; }
.sear_txt { padding: 7px 36px 7px 7px; width: 100%; }
.sear_btn {
  position: absolute; right: 4px; top: 4px; cursor: pointer; background: url(../../images/jie_t_img01.png) no-repeat center center #fff;
  background-size: cover; border: none; outline: none; width: 24px; height: 24px; text-indent: -99999px;
}

/* ==========================================
   4. Navigation & Menus (導覽列與選單)
   ========================================== */
.header_area { background: url(../images/bcl_bg01.png) repeat; }

nav { width: 100%; }
nav ul { list-style: none; margin: 0; padding: 0; }

.navigation { width: 100%; position: relative; text-align: right; margin: 15px 0 0 auto; }
.navigation-portrait { max-width: 1200px; margin: auto; }
.navigation-fixed { position: fixed; top: 0; left: 0; z-index: 19998; }
.navigation-hidden { width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; }
.navigation-hidden .nav-header { display: none; }

.nav-brand { display: none; }
.nav-logo>img { height: 48px; margin: 11px auto; padding: 0 15px; float: left; }
.nav-logo:focus>img { outline: initial; }
.navigation-portrait .nav-logo>img { height: 36px; margin: 6px auto 6px 15px; padding: 0; }

.nav-toggle { width: 44px; height: 44px; padding: 7px; position: absolute; top: 7px; right: 7px; display: none; cursor: pointer; }
.nav-toggle:before { content: ""; position: absolute; width: 30px; height: 2px; background-color: #000; border-radius: 10px; box-shadow: 0 10px 0 0 #000, 0 20px 0 0 #000; }
.navigation-portrait .nav-toggle { display: block; }

.nav-menu { list-style: none; text-align: center; display: block; }
.nav-menu>li { display: inline-block; position: relative; }
.nav-menu>li>a { display: inline-block; padding: 30px; color: #000; }
.nav-menu>li:hover>a, .nav-menu>li.active>a, .nav-menu>li.focus>a { background: rgba(228, 28, 28, 0.9); color: #fff; }
.nav-menu>li>a>i, .nav-menu>li>a>[class*=ion-] { width: 18px; height: 16px; line-height: 16px; transform: scale(1.4); }
.nav-menu>li>a>[class*=ion-] { width: 16px; display: inline-block; transform: scale(1.8); }
.nav-menu+.nav-menu>li:first-child { border-top: none; }

.navigation-landscape .nav-menu.nav-menu-centered { float: none; text-align: center; }
.navigation-landscape .nav-menu.nav-menu-centered>li { float: none; }

.navigation-portrait .nav-menus-wrapper {
  width: 320px; height: 100%; top: 0; left: -400px; position: fixed; background-color: #fff;
  z-index: 20000; overflow-y: auto; -webkit-overflow-scrolling: touch; transition: .2s ease;
}
.navigation-portrait .nav-menus-wrapper.nav-menus-wrapper-right { left: auto; right: -400px; }
.navigation-portrait .nav-menus-wrapper.nav-menus-wrapper-open { left: 0; }
.navigation-portrait .nav-menus-wrapper.nav-menus-wrapper-right.nav-menus-wrapper-open { left: auto; right: 0; }

.nav-menus-wrapper-close-button { width: 30px; height: 30px; margin: 10px 7px; display: none; float: right; color: #343a40; font-size: 20px; cursor: pointer; }
.navigation-portrait .nav-menus-wrapper-close-button { display: block; }
.navigation-portrait .nav-menu { width: 100%; }
.navigation-portrait .nav-menu>li { width: 100%; position: relative; border-top: solid 1px #f0f0f0; }
.navigation-portrait .nav-menu>li:last-child { border-bottom: solid 1px #f0f0f0; }
.navigation-portrait .nav-menu>li>a { width: 100%; padding: 12px 15px 12px 26px; height: auto; text-align: left; }

.nav-menu.nav-menu-social>li { text-align: center; float: none; border: none !important; }
.nav-menu.nav-menu-social>li>a>[class*=ion-] { font-size: var(--f12); }
.nav-menu.nav-menu-social>li>a>.fa { font-size: 14px; }
.navigation-portrait .nav-menu.nav-menu-social { width: 100%; text-align: center; }
.navigation-portrait .nav-menu.nav-menu-social>li { width: auto; }
.navigation-portrait .nav-menu.nav-menu-social>li>a { padding: 15px; }

.submenu-indicator { margin-left: 8px; margin-top: 4px; float: right; transition: all .2s; }
.submenu-indicator-chevron { height: 6px; width: 6px; display: block; border: solid; border-width: 0 1px 1px 0; border-color: transparent #000 #000 transparent; transform: rotate(45deg); }
.nav-menu>li:hover .submenu-indicator-chevron, .nav-menu>li.active .submenu-indicator-chevron, .nav-menu>li.focus .submenu-indicator-chevron { border-color: transparent #fff #fff transparent; }

.navigation-portrait .submenu-indicator { width: 54px; height: 44px; margin-top: 0; position: absolute; top: 0; right: 0; text-align: center; z-index: 20000; }
.navigation-portrait .submenu-indicator-chevron { border-color: transparent #999 #999 transparent; position: absolute; top: 18px; left: 24px; }
.navigation-portrait:hover .submenu-indicator-chevron { border-color: transparent #999 #999 transparent; }
.navigation-portrait .submenu-indicator.submenu-indicator-up { transform: rotate(-180deg); }

.nav-dropdown { list-style: none; min-width: 180px; display: none; position: absolute; z-index: 98; white-space: nowrap; background: #fff; }
.nav-dropdown:after { content: ''; clear: both; width: 100%; display: block; }
.nav-menu>li>.nav-dropdown { border-top: solid 1px #f0f0f0; left: 0; }
.nav-dropdown .nav-dropdown { left: 100%; }
.nav-dropdown>li { width: 100%; float: left; clear: both; position: relative; text-align: left; }
.nav-dropdown>li>a { width: 100%; padding: 10px 20px; display: inline-block; float: left; color: #333; background-color: #fdfdfd; border-bottom: 1px solid #ccc; }
.nav-dropdown>li:hover>a, .nav-dropdown>li.focus>a, .nav-dropdown>li>a:focus { color: #c00; }
.nav-dropdown.nav-dropdown-left { right: 0; }
.nav-dropdown>li>.nav-dropdown-left { left: auto; right: 100%; }

.navigation-portrait .nav-dropdown { width: 100%; position: static; background: #f0f0f0; left: 0; }
.navigation-portrait .nav-dropdown>li>a { padding: 12px 20px 12px 30px; background: none; }
.navigation-portrait .nav-dropdown>li>ul>li>a { padding-left: 50px; }
.navigation-portrait .nav-dropdown>li>ul>li>ul>li>a { padding-left: 70px; }
.navigation-portrait .nav-dropdown>li>ul>li>ul>li>ul>li>a { padding-left: 90px; }
.navigation-portrait .nav-dropdown>li>ul>li>ul>li>ul>li>ul>li>a { padding-left: 110px; }

.nav-dropdown .submenu-indicator { right: 15px; top: 10px; position: absolute; }
.nav-dropdown .submenu-indicator .submenu-indicator-chevron { transform: rotate(-45deg); }
.nav-dropdown>li .submenu-indicator-chevron { border-color: transparent #999 #999 transparent; }
.nav-dropdown>li>a .submenu-indicator-chevron, .nav-dropdown>.focus>a .submenu-indicator-chevron { border-color: transparent #999 #999 transparent !important; }
.nav-dropdown>li:hover>a .submenu-indicator-chevron, .nav-dropdown>.focus>a .submenu-indicator-chevron { border-color: transparent #c00 #c00 transparent !important; }

.navigation-landscape .nav-dropdown.nav-dropdown-left>li>a { text-align: right; }
.navigation-landscape .nav-dropdown.nav-dropdown-left .submenu-indicator { left: 10px; }
.navigation-landscape .nav-dropdown.nav-dropdown-left .submenu-indicator .submenu-indicator-chevron { transform: rotate(135deg); }
.navigation-portrait .nav-dropdown .submenu-indicator { right: 0; top: 0; }
.navigation-portrait .nav-dropdown .submenu-indicator .submenu-indicator-chevron { transform: rotate(45deg); }

.nav-dropdown-horizontal { width: 100%; left: 0; background-color: #fdfdfd; border-top: solid 1px #f0f0f0; }
.nav-dropdown-horizontal .nav-dropdown-horizontal { width: 100%; top: 100%; left: 0; }
.nav-dropdown-horizontal>li { width: auto; clear: none; position: static; }
.nav-dropdown-horizontal>li>a { position: relative; }
.nav-dropdown-horizontal .submenu-indicator { height: 18px; top: 11px; transform: rotate(90deg); }
.navigation-portrait .nav-dropdown-horizontal .nav-dropdown-horizontal { border-top: none; }
.navigation-portrait .nav-dropdown-horizontal>li { width: 100%; }
.navigation-portrait .nav-dropdown-horizontal .submenu-indicator { height: 42px; top: 0; transform: rotate(0deg); }
.navigation-portrait .nav-dropdown-horizontal .submenu-indicator.submenu-indicator-up { transform: rotate(-180deg); }

.megamenu-tabs { width: 100%; float: left; display: block; }
.megamenu-tabs-nav { width: 20%; margin: 0; padding: 0; float: left; list-style: none; }
.megamenu-tabs-nav>li>a { width: 100%; padding: 10px 16px; float: left; color: #343a40; border: solid 1px #eff0f2; outline: 0; background-color: #fff; }
.megamenu-tabs-nav>li.active a, .megamenu-tabs-nav>li:hover a { background-color: #f5f5f5; }
.megamenu-tabs-pane { width: 80%; min-height: 30px; padding: 20px; float: right; display: none; font-size: 13px; color: #343a40; border: solid 1px #eff0f2; background-color: #fff; }
.megamenu-tabs-pane.active { display: block; }
.navigation-portrait .megamenu-tabs-nav, .navigation-portrait .megamenu-tabs-pane { width: 100%; }

.megamenu-lists { width: 100%; display: table; }
.megamenu-list { width: 100%; margin: 0 0 15px; padding: 0; display: inline-block; float: left; list-style: none; }
.megamenu-list:last-child { margin: 0; border: none; }
.megamenu-list>li>a { width: 100%; padding: 10px 15px; display: inline-block; color: #343a40; font-size: 13px; }
.megamenu-list>li>a:hover { background-color: #c00; color: #fff; }
.navigation-landscape .megamenu-list { margin: -15px 0; padding: 20px 0; border-right: solid 1px #f0f0f0; }
.navigation-landscape .megamenu-list:last-child { border: none; }

.nav-overlay-panel { width: 100%; height: 100%; top: 0; left: 0; position: fixed; display: none; z-index: 19999; }
.no-scroll { width: 100%; height: 100%; overflow: hidden; }

.nav-button { margin: 18px 15px 0; padding: 8px 14px; display: inline-block; color: #fff; font-size: 14px; text-align: center; border-radius: 4px; }
.nav-button:hover, .nav-button:focus { color: #fff; text-decoration: none; }
.navigation-portrait .nav-button { width: calc(100% - 52px); margin: 17px 26px; }

.nav-text { margin: 25px 15px; display: inline-block; color: #343a40; font-size: 14px; }
.navigation-portrait .nav-text { width: calc(100% - 52px); margin: 12px 26px 0; }
.navigation-portrait .nav-text+ul { margin-top: 15px; }

.transparent-menu { position: absolute; width: 100%; left: 0; top: 0; z-index: 99; }

/* ==========================================
   5. Access Menu & Extra Navigation (其他選單設定)
   ========================================== */
.Shin_nav { width: 100%; display: block; margin-top: 40px; margin-bottom: 20px; background-color: #F3ED74; text-align: center; }
.Shin_nav a { display: inline-block; vertical-align: top; padding: 10px 40px; color: #000; font-weight: bold; }
.Shin_nav a:hover { background-color: #A2E25C; color: #FFF; }

.access-menu { max-width: 830px; width: 100%; display: flex; justify-content: space-between; align-items: center; margin: 0 0 0 auto; }
.access-menu>li { display: inline-block; position: relative; transition: .5s; }
.access-menu>li:hover .access-submenu { top: 100%; left: 50%; transform: translateX(-50%); }
.access-menu>li>a { transition: .5s; position: relative; display: block; font-size: var(--f15); font-weight: 500; line-height: 120%; letter-spacing: 0.05em; text-indent: 0.05em; text-align: center; }
.access-menu>li>a i { position: absolute; right: -25px; top: 50%; transform: translateY(-50%); transition: .5s; }
.access-menu>li:hover>a { transition: .5s; color: var(--mainColor03); font-weight: 700; }
.access-menu>li:hover>a i { color: var(--mainColor03); }

.access-menu>li>ul { padding: 10px; }
.access-menu>li>ul>li>a:hover { background-color: #651E09; border: 1px #651E09 solid; color: white; }
.access-menu>li>ul>li:last-child { border-bottom: none; }

.access-submenu { min-width: 310px; left: -9999px; position: absolute; z-index: 999; top: -9999px; width: 100%; }
.access-submenu a { background-color: rgba(255, 255, 255, 0.8); border: 1px #BBBBBB solid; transition: .5s; padding: 10px 5px;; display: block;font-size: var(--f15);font-weight: 400;line-height: 120%; text-align: center; }
.access-submenu>li+li { margin-top: 5px; }
.is-show { left: auto; top: 100%; }

.fa-window-close:before {color: #fff !important;}

.fa-angle-down:before {color: #333 !important;position: absolute;}

#final_total { display: inline-block; margin-top: 0; }

/* Mobile Menu Settings */
.menu { background: var(--mainColor04); width: 100%; text-align: left; position: fixed; top: 0; left: 0; z-index: 10; }
.menu ul, .menu li { margin: 0; padding: 0; }
.menu li a {display: block;width: 100%;padding:10px;color:#fff;font: var(--f15); font-weight: 400;line-height: 120%;letter-spacing: 0.1em;transition: .5s;}
.menu li a:hover{transition: .5s;color:var(--mainColor02);}

.menu>ul { width: 100%; position: relative; display: none; margin-top: 30px;}
.menu>ul li { display: inline-block; position: relative;}
.menu>ul li .fa{display: flex;justify-content: center;align-items: center;width:15px;height:15px;background-color: #fff; top:11px;color:#fff;}
.menu .fa {position: absolute;top:5px;right: 10px;}
.menu .fa a { font-size: 0; padding: 0 !important; }
.menu .fa:hover, .menu .fa:focus { cursor: pointer; }

.menu .level-two { display: none; position: absolute; top: 100%; left: auto; margin-top: 0;}
.menu .level-two>li { display: block; background: #F7EFE4; padding: 0; transition: .5s; position: relative; border-bottom: 1px #fff solid; }
.menu .level-two>li:last-child{border: none;}
.menu .level-two>li:last-child { border: none; }
.menu .level-two>li:hover, .menu .level-two>li:focus { background: var(--mainColor02); }
.menu .level-two>li:hover a {}
.menu .level-two>li a { width: 100%;color:var(--mainColor01); display: block; padding: 10px; box-sizing: border-box;word-break: break-all;}
.menu .level-two .sharewidth>a { display: inline-block; width: auto; }

.menu .level-three { display: none; position: absolute; left: 100%; top: 0; }
.menu .level-three li { display: block; background: transparent; padding: 0; transition: .5s; position: relative; white-space: nowrap; }
.menu .level-three li:hover, .menu .level-three li:focus { background: rgba(255, 255, 255, 0.1); }
.menu .level-three>li a { font-size: 14px; border-bottom: 1px #f8f8f8 solid; background: #af6161; color: #CCC; }

/* ==========================================
   6. Media Queries (響應式設定)
   ========================================== */
@media screen and (max-width: 1250px) {
  nav { text-align: center; }
  .Shin_header_logo { max-width: 180px; }
  .access-menu { max-width: 100%; width: calc(100% - 250px); }
  .Shin_login { padding: 5px 15px 5px 30px; margin-right: 10px; }
}

@media (max-width: 830px) {
  .Shin_header_logo { max-width: 120px; }
  .access-menu { width: calc(100% - 150px); }
}

@media screen and (min-width: 769px) {
  .navtoggle { display: none; }
}

@media screen and (max-width: 768px) {
  /* Header & Navigation changes */
  nav { display: none; }
  .main_top { padding: 15px 20px; }
  .Shin_header_logo { position: static; margin: 0 auto 20px auto; width: 110px; }
  .top_menu_link { justify-content: center; }
  .Shin_box { padding: 0 0 0 15px; }

  /* Mobile Menu Wrapper */
  .outside { width: 32px; height: 32px; padding: 7px; position: absolute; top: 0; right: 0; cursor: pointer; }
  .outside:before {
    content: ""; position: absolute; left: 0; width: 30px; height: 2px;
    background-color: var(--mainColor01); border-radius: 10px;
    box-shadow: 0 10px 0 0 var(--mainColor01), 0 20px 0 0 var(--mainColor01);
  }
  .outside::after {
    content: '選單'; color: var(--mainColor01); font-size: 14px; font-weight: 500;
    line-height: 120%; width: 30px; text-align: center; position: absolute;
    bottom: -1.6em; left: 50%; transform: translateX(-50%);
  }

  .menu {
    position: fixed; height: 100%; top: 0; left: 0; overflow-y: auto; overflow-x: hidden;
    transform: translateX(-320px); width: 200px; transition: .5s;
  }
  .menu.active { transform: translateX(0); transition: .5s; box-shadow: 0 0 10px #999; padding: 5px; }

  .menu .navtoggle { position: relative; top: 0; right: 0; left: 0; display: block; text-align: right; font-size: 0; padding: 5px; }
  .menu .navtoggle .fa { font-size: 30px; border: 0 solid transparent; padding: 0; margin: 0; color: #bd7a8a; }
  .menu .navtoggle .fa:hover, .menu .navtoggle .fa:focus { background: transparent; opacity: 0.8; }

  .menu>ul { display: block; }
  .menu>ul li { display: block; position: relative; }
  .menu>ul>li { border-bottom: 1px #fff solid; }
  .menu>ul>li>ul { background: var(--mainColor02);color:var(--mainColor01); margin-top: 10px; }

  .menu .level-two, .menu .level-three { position: relative; left: 0; top: 0; }
}

@media screen and (max-width: 490px) {
  .price_ri tr:nth-child(6) td { padding: 15px 0; }
}

@media screen and (max-width: 440px) {
  .Shin_login { padding: 5px 5px 5px 25px; margin-right: 5px; }
}

/* 統一所有banner */
.all_set_banner{max-width: 2000px;width: 100%; height: 922px; background-image: url('https://www.littleredridinghood688.com/img/ser_img005.jpg');background-repeat: no-repeat;background-size: cover;background-position: center bottom; position: relative;display: flex;flex-direction: column;justify-content: flex-start;align-items: center;overflow: hidden;position: relative;z-index: 20;margin: auto;}
.all_set_banner>img{transform-origin: top center; animation: rotate_img 2s ease infinite alternate;}
@keyframes rotate_img {
    0%{transform: rotate(15deg);}
    100%{transform: rotate(-15deg);}
}
.all_set_banner::before{content:"";width: 2170px;height: 717px;background-image: url('https://www.littleredridinghood688.com/img/ser_img006.png');background-position: center top; background-repeat: no-repeat;background-size: cover;position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);z-index: 20;}
.all_set_banner h5{position: relative;z-index: 99;display: flex;justify-content: center;align-items: center;margin: 40px 0 15px;}
.all_set_banner h5 b{color:var(--mainColor02);font-size: var(--f28);font-weight: 500;line-height: 120%;letter-spacing: 0.1em;text-indent: 0.1em;text-align: center;display: flex;justify-content: center;align-items: center;width: 45px;height: 45px;background-color: var(--mainColor01);border-radius: 150px;}
.all_set_banner h5 b+b{margin-left: -10px;}
.all_set_banner p{display: flex;justify-content: center;align-items: center; position: relative;z-index: 99;text-shadow: 1px 1px 12px rgba(51, 51, 51, 0.65);padding:0 5%;margin: 0;}
.all_set_banner p::before{content:"";width: 20px;height: 2px;background-color: #fff;box-shadow:1px 1px 12px rgba(51, 51, 51, 0.65) ;display: block;}
.all_set_banner p::after{content:"";width: 20px;height: 2px;background-color: #fff;box-shadow:1px 1px 12px rgba(51, 51, 51, 0.65) ;display: block;}
.all_set_banner p span{display: block;color:white;font-size: var(--f16);font-weight: 500;line-height: 120%;letter-spacing: 0.1em;text-indent: 0.1em;text-align: center;padding:0 13px;}
@media (max-width:800px) {
    .all_set_banner{height: 700px;}
    .all_set_banner::before{height: 600px;}
}
@media (max-width:450px) {
    .all_set_banner{height: 400px;}
    .all_set_banner::before{height: 450px;}
    .all_set_banner>img{width: 50px;}
}

/* footer */
.main.main_footer{position: relative;z-index: 99;}
.footer_contentbox{padding:80px 20px 30px;background-color: var(--mainColor02);}
.footer_content{max-width: 1290px;width: 100%;margin:auto;display: flex;justify-content: space-between;align-items: center;margin-bottom: 80px;}
.footer_logo{max-width: 218px;width: 100%;}
.footer_logo a{display: block;}
.footer_logo a img{width: 100%;}

.footer_all_link{max-width: 685px;width: 100%;margin:0 25px;}

.footer_addr{display: grid;grid-template-columns: 1fr 1.5fr;padding-left: 15px;}
.footer_addr a{display: block;font-size: var(--f15);font-weight: 500;line-height: 200%;letter-spacing: 0.05em;transition: .5s;}
.footer_addr a:hover{transition: .5s;color:var(--mainColor03);}
.menu_link{padding-top: 45px;margin-top: 30px;border-top: 1px rgba(51, 51, 51, 0.3) solid;display: flex;align-items: center;flex-wrap: wrap;}
.menu_link a{display: block;padding:0 15px;font-size: var(--f15);font-weight: 500;line-height: 120%;letter-spacing: 0.05em;text-indent: 0.05em;text-align: center;position: relative;transition: .5s;}
.menu_link a:hover{transition: .5s;color:var(--mainColor03);}
.menu_link a::after{content:"";width: 1px;height: 8px;background-color: #555555;position: absolute;right: 0;top:50%;transform: translateY(-50%);}
.menu_link a:last-child::after{display: none;}

.footer_btn{max-width: 190px;width: 100%;}
.footer_btn a{display: flex;justify-content: flex-start;align-items: center;padding:15px 23px;background-color: var(--mainColor03);border-radius: 12px;color:#fff;font-size: var(--f16);font-weight: 400;line-height: 120%;letter-spacing: 0.05em;transition: .5s;}
.footer_btn a:hover {transition: .5s;background-color: var(--mainColor01);}
.footer_btn a+a{margin-top: 20px;}
.footer_btn a i{font-size: 25px;color:white;margin-right: 30px;}

/* 浮動 */
.fix_ri { width:50px; box-sizing: border-box; position: fixed; bottom:140px; right: 0; z-index: 100; text-align:center;}
.fix_ri a {width: 50px;height: 50px;display: flex;align-items: center;justify-content: center;border-bottom: 1px solid #FFF;transition: .5s ease;}
.fix_ri a+a{margin-top: 10px;}
.fix_ri a:hover{ transform: scale(1.1);}
.fix_ri img {opacity:1;}
.fix_ri img:hover { opacity:1;}
.fix_ri a:first-child{border-top-left-radius: 10px;}
.fix_ri a:last-child{border-bottom-left-radius: 10px;border-bottom: none;}

/* 關鍵字 */
.copy{padding:22px 20px;background-color: var(--mainColor01);color:white;font-size: var(--f12);font-weight: 400;line-height: 120%;letter-spacing: 0.05em;text-indent: 0.05em;text-align: center;}
.copy a{color:white;font-size: var(--f12);font-weight: 400;line-height: 120%;letter-spacing: 0.05em;vertical-align: bottom;}

.double_key { text-align:center;}
.double_key a {display: inline-block;color:#BBBBBB;font-size: var(--f12);font-weight: 500;line-height: 120%;letter-spacing: 0.05em;text-indent: 0.05em;text-align: center;}
.double_key a:after { content:' , '; font-size:15px; color:#BBBBBB;}
.double_key a:last-child:after { display:none;}

@media (max-width:1060px) {
    .footer_contentbox{padding:50px 20px;}
    .footer_content{margin-bottom: 40px;}
    .footer_logo{max-width: 160px;}
}
@media (max-width:1000px) {
    .footer_addr{padding-left: 10px;}
    .menu_link a{padding:0 10px;}
    .footer_btn{max-width: 140px;}
    .footer_btn a{padding:10px;justify-content: center;}
    .footer_btn a i{margin-right: 15px;}
}
@media (max-width:980px) {
    .footer_content{flex-direction: column;}
    .footer_all_link{margin:35px 0;}
    .footer_btn{max-width: 400px;display: grid;grid-template-columns: repeat(2,1fr);grid-gap: 20px 5%;}
    .footer_btn a{padding:15px 20px;}
    .footer_btn a+a{margin-top: 0;}
    .menu_link{justify-content: center;}
    .footer_addr{grid-template-columns: repeat(2,1fr);grid-gap:0 10px;}
    .footer_addr a{text-indent: 0.05em;text-align: center;}
}
@media (max-width:700px) {
    .footer_contentbox{padding:35px 20px;}
    .copy{padding:15px 20px;}
    .footer_addr{grid-template-columns: repeat(1,1fr);padding:0;}
    .menu_link{padding-top: 35px;margin-top: 20px;}
}
@media (max-width:520px) {
    .menu_link{display: grid;grid-template-columns: repeat(4,1fr);grid-gap: 10px 10px;}
    .menu_link a:nth-of-type(4)::after{display: none;}
}
@media (max-width:400px) {
    .menu_link{grid-template-columns: repeat(3,1fr);}
    .menu_link a:nth-of-type(4)::after{display: block;}
    .menu_link a:nth-of-type(3)::after{display: none;}
    .copy{padding:15px 10px;}
}
@media (max-width:375px) {
    .footer_btn a{padding:15px 10px;}
}