@charset "UTF-8";
/* ==========================================
 ##### Fonts
========================================== */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;600;700&family=Roboto:wght@100;300;400;700&display=swap");
:root {
  --color-dark: #434343;
  --color-orange: #f08200;
  --color-orange-dark: #8e4102;
  --color-red: #ce202e;
  --h-header: 80px;
  --h-nav: 50px;
  --h-input: 40px;
  --w-wrap: 1300px;
  --w-wrap-sm: 750px;
  --gap: 25px;
  --gap-list-lg: 50px;
  --gap-list: 20px;
  --radius-input: 5px;
  --radius-box: 10px;
  --fz-h1: clamp(26px, 3.125vw, 32px);
  --fz-h2: clamp(24px, 2.7vw, 30px);
  --fz-h3: clamp(22px, 2.5vw, 26px);
  --fz-h4: clamp(20px, 2.29vw, 24px);
  --fz-h5: clamp(18px, 2.29vw, 22px);
  --fz-h6: clamp(17px, 2.29vw, 20px);
}

@media only screen and (max-width: 991px) {
  :root {
    --h-header: 80px;
  }
}
@media only screen and (max-width: 767px) {
  :root {
    --gap-list-lg: 30px;
    --gap-list: 12px;
  }
}
@media only screen and (max-width: 639px) {
  :root {
    --h-header: 65px;
  }
}
/*
 * CSS Document
 * ==========================================================================
 * 版權所有 2018 鉅潞科技網頁設計公司，並保留所有權利。
 * 網站地址: http://www.grnet.com.tw
 * ==========================================================================
 * $Author: Fish $
 * $Date: 2019-07-17 WED. $
*/
/* ==========================================
 ##### Reset Set.
========================================== */
html {
  font-size: 16px;
}

body {
  margin: 0;
  padding: 0;
  font-size: 1rem;
  color: #333;
  line-height: 1.7;
  font-family: "Roboto", "Noto Sans TC", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif;
  font-weight: 400;
  overflow-x: hidden;
  width: 100%;
  position: relative;
}

* {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}

img {
  border: 0;
  text-decoration: none;
  vertical-align: top;
  max-width: 100%;
  height: auto;
}

a {
  color: #333;
}

a,
a:visited,
a:hover,
a:focus,
a:active {
  text-decoration: none;
}

input,
textarea,
select,
button {
  font-size: 1rem;
  font-weight: 400;
}

textarea,
input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  border-radius: 0;
}

input,
textarea,
select {
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
  border: none;
  font-size: 1rem;
  border-radius: 0;
}

input,
textarea,
select,
input[type=radio],
input[type=checkbox] {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
}

input:not(input[type=button]),
input:not(input[type=submit]),
input:not(input[type=reset]) {
  font-size: 16px !important;
}

input[type=date]::-webkit-inner-spin-button {
  display: none;
  -webkit-appearance: none;
          appearance: none;
}

textarea {
  resize: vertical;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
}

p {
  line-height: inherit;
}

label {
  font-weight: inherit;
}

input,
button,
textarea,
select,
optgroup,
option {
  font-family: inherit;
  font-size: inherit;
  *font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  outline: 0;
}

::-webkit-input-placeholder {
  color: #bbb;
  font-size: 15px;
}

::-moz-placeholder {
  color: #bbb;
  font-size: 15px;
}

:-ms-input-placeholder {
  color: #bbb;
  font-size: 15px;
}

::-ms-input-placeholder {
  color: #bbb;
  font-size: 15px;
}

::placeholder {
  color: #bbb;
  font-size: 15px;
}

.hidden-ele {
  position: absolute;
  top: -1px;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  margin: 0;
  height: 0;
}

.reset {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 0;
  border-spacing: 0;
  border-collapse: collapse;
}

.reset input,
.reset label,
.reset select {
  vertical-align: middle;
}

.rwd-img {
  width: 100%;
}

.max-img {
  max-width: 100%;
}

/* ==========================================
 ##### Layout
========================================== */
/*
 * Header
 */
.orange {
  color: var(--color-orange);
}

.out-wrap {
  padding-top: calc(var(--h-header) * 1 + var(--h-nav) * 1);
  overflow: hidden;
}

.header-wrap {
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 800;
  -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
          box-shadow: 0 3px 5px rgba(0, 0, 0, 0.05);
}
.header-wrap.fixed {
  -webkit-box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
          box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
}

#header {
  height: var(--h-header);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0 var(--gap);
  z-index: 1;
}
#header .logo {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  margin: 0;
  padding: 0;
  width: 200px;
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
#header .logo a {
  font-size: 0;
  display: block;
  aspect-ratio: 480/140;
  background: url("../images/logo.png") no-repeat 0 0/contain;
}
#header .top-box {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

.select-language {
  color: var(--color-dark);
  position: relative;
  padding-right: var(--h-input);
}
.select-language::before {
  content: "";
  display: block;
  width: 1px;
  position: absolute;
  right: calc(var(--h-input) - 2px);
  top: 6px;
  bottom: 6px;
  background-color: #ddd;
}
.select-language svg {
  position: absolute;
  right: 0;
  display: block;
  top: 50%;
  max-width: calc(var(--h-input) * 0.8);
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}
.select-language select {
  width: 100%;
  padding: 0 10px;
  display: block;
  height: var(--h-input);
  line-height: var(--h-input);
  background: transparent;
  background-size: auto 80%;
  border: none;
  border-radius: var(--radius-input);
}
.select-language select::-ms-expand {
  display: none;
}
.select-language:focus-within {
  background-color: #eee;
}
.select-language .cur {
  border-radius: var(--radius-input);
  display: block;
  width: 100%;
  line-height: var(--h-input);
  white-space: nowrap;
  padding-right: 10px;
  cursor: pointer;
}
.select-language ul {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  left: -10px;
  bottom: var(--h-input);
  min-width: 100px;
  background-color: #fff;
  border: 1px solid #ddd;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.select-language ul li {
  display: block;
  border-top: 1px solid #ddd;
  white-space: nowrap;
}
.select-language ul li:first-child {
  border-top: none;
}
.select-language ul li a {
  text-align: left;
  display: block;
  line-height: 1.4;
  padding: 8px;
}
.select-language ul li.current a {
  color: #666;
}
.select-language.is-open ul {
  display: block;
}

.select-user {
  color: var(--color-dark);
  position: relative;
  padding-left: 5.25rem;
}
.select-user::before {
  content: attr(data-tit);
  position: absolute;
  line-height: var(--h-input);
  top: 0;
  left: 0.45rem;
  white-space: nowrap;
  pointer-events: none;
}
.select-user select {
  padding: 0 20px 0 10px;
  display: block;
  height: var(--h-input);
  line-height: var(--h-input);
  background: transparent;
  background-size: auto 80%;
  border: none;
  border-radius: var(--radius-input);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -8 24 24' width='28' fill='%23666'%3E%3Cpath d='M7.071 5.314l4.95-4.95a1 1 0 1 1 1.414 1.414L7.778 7.435a1 1 0 0 1-1.414 0L.707 1.778A1 1 0 1 1 2.121.364l4.95 4.95z'%3E%3C/path%3E%3C/svg%3E") no-repeat calc(100% - 10px) center/auto 15px;
}
.select-user select::-ms-expand {
  display: none;
}
.select-user:focus-within {
  background-color: #eee;
}

.quick-link {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  vertical-align: middle;
  gap: 0 15px;
  height: var(--h-input);
}
.quick-link li {
  display: inline-block;
  vertical-align: top;
}
.quick-link li.link-search {
  display: none;
}
.quick-link li.link-text span {
  display: inline-block;
  white-space: nowrap;
  height: calc(var(--h-input) - 10px);
  margin: 5px;
  padding: 0 5px;
  border-radius: var(--radius-input);
  border: 1px solid #898989;
  background-color: transparent;
}
.quick-link li.link-text span a {
  position: relative;
  display: inline-block;
  color: var(--color-dark);
  padding: 0 6px;
  font-size: 14px;
}
.quick-link li.link-text span a:hover {
  color: var(--color-orange);
}
.quick-link li.link-text span a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  margin-left: -2px;
  margin-top: -1px;
  display: inline-block;
  vertical-align: middle;
  width: 3px;
  height: 3px;
  border-radius: 5px;
  background-color: var(--color-dark);
}
.quick-link li.link-text span a:first-child::before {
  display: none;
}
.quick-link li .link {
  position: relative;
  -webkit-transition: color 0.13s ease-in-out;
  transition: color 0.13s ease-in-out;
  display: inline-block;
  width: var(--h-input);
  height: var(--h-input);
  padding: 0.1rem;
  border: none;
  font-size: 0;
}
.quick-link li .link.icon-cart .number {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 10px;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  min-width: 15px;
  line-height: 15px;
  background-color: var(--color-orange);
  border-radius: 50%;
}
.quick-link li .link.icon-contact {
  padding: 0.18rem 0.15rem 0.15rem;
}
.quick-link li .link.icon-search {
  padding: 0.5rem;
}
.quick-link li .link.icon-cart {
  padding: 0.18rem 0.15rem 0.17rem;
}
.quick-link li .link:hover {
  color: var(--color-orange);
}

.nav-switch {
  display: none;
}

#nav {
  position: relative;
  z-index: 3;
}

.nav-overlay {
  display: none;
  position: fixed;
  z-index: 2;
}

.search-box {
  position: absolute;
  z-index: 5;
}

.nav-mb-bottom {
  display: none;
}

@media only screen and (min-width: 992px) {
  #header {
    padding-top: 10px;
  }
  .search-box-close {
    display: none;
  }
  .search-box {
    display: block;
    height: var(--h-input);
    position: absolute;
    top: calc(var(--h-header) * 0.5 + 4px);
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    right: calc((100vw - var(--w-wrap)) * 0.5 + var(--gap) + 170px);
    left: calc((100vw - var(--w-wrap)) * 0.5 + var(--gap) + 220px);
    text-align: right;
  }
  .search-box form {
    position: relative;
    max-width: 580px;
    width: 100%;
    display: inline-block;
    text-align: left;
  }
  .search-box input {
    z-index: 0;
    position: relative;
    -webkit-transition: border-color 0.3s ease-in-out;
    transition: border-color 0.3s ease-in-out;
    display: block;
    padding-left: 1em;
    padding-right: max(3.125vw, var(--h-input));
    background-color: #fff;
    width: 100%;
    height: var(--h-input);
    border: 1px solid #dcdcdc;
    border-radius: var(--radius-input);
  }
  .search-box input::-webkit-input-placeholder {
    color: #999;
  }
  .search-box input::-moz-placeholder {
    color: #999;
  }
  .search-box input:-ms-input-placeholder {
    color: #999;
  }
  .search-box input::-ms-input-placeholder {
    color: #999;
  }
  .search-box input::placeholder {
    color: #999;
  }
  .search-box button {
    -webkit-transition: background-color 0.23s ease-in-out;
    transition: background-color 0.23s ease-in-out;
    position: absolute;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    z-index: 5;
    top: 0;
    right: 0;
    width: max(3.125vw, var(--h-input));
    height: var(--h-input);
    color: #fff;
    background-color: var(--color-dark);
    border: none;
    border-radius: 0 var(--radius-input) var(--radius-input) 0;
  }
  .search-box button:hover {
    background-color: var(--color-orange);
    color: #fff;
  }
  .search-box button svg {
    max-width: auto;
    max-height: calc(var(--h-input) * 0.6);
  }
  .search-box:focus input {
    border-color: #888;
  }
  .search-box.in-dealer {
    right: calc((100vw - var(--w-wrap)) * 0.5 + var(--gap) + 50px);
  }
  .nav-mb-func {
    display: none;
  }
  .nav-menu {
    width: 100%;
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    gap: 0 var(--gap);
    color: var(--color-dark);
  }
  .nav-menu .img {
    display: none;
  }
  .nav-menu li {
    position: relative;
  }
  .nav-menu ul {
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
  .nav-menu > li {
    font-weight: 500;
    -ms-flex-preferred-size: 150px;
        flex-basis: 150px;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    line-height: 0;
  }
  .nav-menu > li > a {
    z-index: 0;
    display: inline-block;
    position: relative;
    padding: 0;
    font-size: 15px;
    color: var(--color-dark);
    min-height: var(--h-nav);
    line-height: var(--h-nav);
  }
  .nav-menu > li > a::before {
    display: none;
    content: "";
    width: 100%;
    height: 2px;
    background-color: var(--color-orange);
    left: 50%;
    bottom: 0;
    -webkit-transform: scaleX(0) translateX(-50%);
        -ms-transform: scaleX(0) translateX(-50%);
            transform: scaleX(0) translateX(-50%);
    position: absolute;
    pointer-events: none;
    -webkit-transition: -webkit-transform 0.235s;
    transition: -webkit-transform 0.235s;
    transition: transform 0.235s;
    transition: transform 0.235s, -webkit-transform 0.235s;
  }
  .nav-menu > li > ul {
    pointer-events: none;
    opacity: 0;
    display: block;
    -webkit-transition: opacity 0.35s;
    transition: opacity 0.35s;
    position: absolute;
    top: var(--h-nav);
    left: 50%;
    -webkit-transform: translate(-50%, 0);
        -ms-transform: translate(-50%, 0);
            transform: translate(-50%, 0);
    width: 100%;
    min-width: 200px;
    text-align: center;
    background-color: #f7f7f7;
    padding: 5px;
  }
  .nav-menu > li > ul > li {
    display: block;
    padding: 0;
    margin: 0;
  }
  .nav-menu > li > ul > li > a {
    display: block;
    padding: 1.3rem 1rem;
    font-size: 15px;
    color: var(--color-dark);
  }
  .nav-menu > li > ul > li > a:hover {
    color: #f08200;
  }
  .nav-menu > li > ul > li.all-product {
    display: none;
  }
  .nav-menu > li > ul > li > ul {
    list-style: none;
    pointer-events: none;
    opacity: 0;
    display: block;
    -webkit-transition: opacity 0.35s;
    transition: opacity 0.35s;
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    min-width: 150px;
    text-align: center;
    background-color: #fff3e9;
    padding: 0;
    margin: 0;
  }
  .nav-menu > li > ul > li > ul > li {
    display: block;
    padding: 0;
    margin: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
  }
  .nav-menu > li > ul > li > ul > li:first-child {
    border-top: none;
  }
  .nav-menu > li > ul > li > ul > li > a {
    display: block;
    padding: 1.3rem 1rem;
    font-size: 15px;
    color: var(--color-dark);
  }
  .nav-menu > li > ul > li > ul > li > a:hover {
    color: #f08200;
  }
  .nav-menu > li > ul > li > ul > li > a:hover {
    color: var(--color-orange);
  }
  .nav-menu > li > ul > li > ul > li > a:hover::befor e {
    background-color: var(--color-orange);
  }
  .nav-overlay {
    display: none !important;
  }
  .pc .nav-menu .sub-switch {
    display: none !important;
  }
  .pc .nav-menu > li > ul {
    display: block !important;
  }
  .pc .nav-menu > li > ul > li:hover > a {
    background-color: var(--color-orange);
    color: #fff;
  }
  .pc .nav-menu > li > ul > li:hover > ul {
    pointer-events: auto;
    opacity: 1;
  }
  .pc .nav-menu > li:hover > a::before {
    display: block;
    -webkit-transform: scaleX(1) translateX(-50%);
        -ms-transform: scaleX(1) translateX(-50%);
            transform: scaleX(1) translateX(-50%);
  }
  .pc .nav-menu > li:hover > ul {
    pointer-events: auto;
    opacity: 1;
  }
  .mb .nav-menu .sub-switch {
    z-index: 5;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .mb .nav-menu li > ul {
    display: none;
    pointer-events: auto;
    opacity: 1;
  }
  .mb .nav-menu > li.is-open > a::before {
    display: block;
    -webkit-transform: scaleX(1) translateX(-50%);
        -ms-transform: scaleX(1) translateX(-50%);
            transform: scaleX(1) translateX(-50%);
  }
  .mb .nav-menu > li > ul li.is-open > a {
    background-color: var(--color-orange);
    color: #fff;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1349px) {
  .search-box {
    right: calc(var(--gap) + 170px + 10px);
    left: calc(var(--gap) + 220px);
  }
  .search-box.in-dealer {
    right: calc(var(--gap) + 50px + 10px);
  }
}
@media only screen and (max-width: 991px) {
  .out-wrap {
    padding-top: var(--h-header);
  }
  .header-wrap {
    background-color: rgba(255, 255, 255, 0.8);
  }
  #header {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
  #header .logo {
    position: absolute;
    z-index: 100;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    top: 50%;
    width: max(17vw, 170px);
  }
  .quick-link {
    gap: 0 10px;
  }
  .quick-link li.link-search {
    display: inline-block;
  }
  .search-box-close {
    display: block;
    z-index: 100;
    position: absolute;
    cursor: pointer;
    top: 0;
    right: 0;
    width: calc(var(--h-header) - 20px);
    height: var(--h-header);
    background-color: transparent;
    -webkit-transition: background-color 0.3s ease-in-out;
    transition: background-color 0.3s ease-in-out;
  }
  .search-box-close:hover div {
    background-color: #666;
  }
  .search-box-close div {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -11px;
    width: 22px;
    height: 2px;
    background-color: #a0a0a0;
    -webkit-transition: -webkit-transform 0.15s cubic-bezier(0.32, 0.8, 0.76, 0.86);
    transition: -webkit-transform 0.15s cubic-bezier(0.32, 0.8, 0.76, 0.86);
    transition: transform 0.15s cubic-bezier(0.32, 0.8, 0.76, 0.86);
    transition: transform 0.15s cubic-bezier(0.32, 0.8, 0.76, 0.86), -webkit-transform 0.15s cubic-bezier(0.32, 0.8, 0.76, 0.86);
  }
  .search-box-close div:nth-child(1) {
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
    margin-top: 0;
  }
  .search-box-close div:nth-child(2) {
    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
    margin-top: 0;
  }
  .search-box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--h-header);
    background-color: var(--color-dark);
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    padding: 10px calc(var(--h-header) - 10px) 10px var(--gap);
    opacity: 0;
    -webkit-transform: translateY(-102%);
        -ms-transform: translateY(-102%);
            transform: translateY(-102%);
    -webkit-transition: opacity 0.25s, -webkit-transform 0.35s;
    transition: opacity 0.25s, -webkit-transform 0.35s;
    transition: transform 0.35s, opacity 0.25s;
    transition: transform 0.35s, opacity 0.25s, -webkit-transform 0.35s;
  }
  .search-box.is-open {
    opacity: 1;
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
  }
  .search-box form {
    position: relative;
    width: 100%;
    display: inline-block;
    text-align: left;
  }
  .search-box input {
    z-index: 0;
    position: relative;
    -webkit-transition: border-color 0.3s ease-in-out;
    transition: border-color 0.3s ease-in-out;
    display: block;
    padding-left: 1em;
    padding-right: max(3.125vw, var(--h-input));
    background-color: #fff;
    width: 100%;
    height: var(--h-input);
    border: 1px solid #dcdcdc;
    border-radius: var(--radius-input);
  }
  .search-box input::-webkit-input-placeholder {
    color: #999;
  }
  .search-box input::-moz-placeholder {
    color: #999;
  }
  .search-box input:-ms-input-placeholder {
    color: #999;
  }
  .search-box input::-ms-input-placeholder {
    color: #999;
  }
  .search-box input::placeholder {
    color: #999;
  }
  .search-box button {
    -webkit-transition: background-color 0.23s ease-in-out;
    transition: background-color 0.23s ease-in-out;
    position: absolute;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    z-index: 5;
    top: 0;
    right: 0;
    width: max(3.125vw, var(--h-input));
    height: var(--h-input);
    color: var(--color-dark);
    background-color: transparent;
    border: none;
    border-radius: 0 var(--radius-input) var(--radius-input) 0;
  }
  .search-box button:hover {
    background-color: var(--color-orange);
    color: #fff;
  }
  .search-box button svg {
    max-width: auto;
    max-height: calc(var(--h-input) * 0.6);
  }
  .search-box:focus input {
    border-color: #888;
  }
  .nav-switch {
    display: block;
    z-index: 100;
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    width: var(--h-header);
    height: var(--h-header);
    background-color: transparent;
    -webkit-transition: background-color 0.3s ease-in-out;
    transition: background-color 0.3s ease-in-out;
  }
  .nav-switch:hover {
    background-color: rgba(0, 0, 0, 0.05);
  }
  .nav-switch div {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -11px;
    width: 22px;
    height: 2px;
    background-color: var(--color-dark);
    -webkit-transition: -webkit-transform 0.15s cubic-bezier(0.32, 0.8, 0.76, 0.86);
    transition: -webkit-transform 0.15s cubic-bezier(0.32, 0.8, 0.76, 0.86);
    transition: transform 0.15s cubic-bezier(0.32, 0.8, 0.76, 0.86);
    transition: transform 0.15s cubic-bezier(0.32, 0.8, 0.76, 0.86), -webkit-transform 0.15s cubic-bezier(0.32, 0.8, 0.76, 0.86);
  }
  .nav-switch div:nth-child(1) {
    margin-top: -9px;
  }
  .nav-switch div:nth-child(2) {
    margin-top: -1px;
  }
  .nav-switch div:nth-child(3) {
    margin-top: 7px;
  }
  .is-open-nav .nav-switch div:nth-child(1) {
    opacity: 0;
  }
  .is-open-nav .nav-switch div:nth-child(2) {
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
    margin-top: 0;
  }
  .is-open-nav .nav-switch div:nth-child(3) {
    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
    margin-top: 0;
  }
  .nav-close {
    display: block;
    z-index: 100;
    position: absolute;
    cursor: pointer;
    top: 0;
    right: 0;
    width: var(--h-header);
    height: var(--h-header);
    background-color: transparent;
    -webkit-transition: background-color 0.3s ease-in-out;
    transition: background-color 0.3s ease-in-out;
  }
  .nav-close:hover div {
    background-color: #666;
  }
  .nav-close div {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -12.5px;
    width: 25px;
    height: 2px;
    background-color: #a0a0a0;
    -webkit-transition: -webkit-transform 0.15s cubic-bezier(0.32, 0.8, 0.76, 0.86);
    transition: -webkit-transform 0.15s cubic-bezier(0.32, 0.8, 0.76, 0.86);
    transition: transform 0.15s cubic-bezier(0.32, 0.8, 0.76, 0.86);
    transition: transform 0.15s cubic-bezier(0.32, 0.8, 0.76, 0.86), -webkit-transform 0.15s cubic-bezier(0.32, 0.8, 0.76, 0.86);
  }
  .nav-close div:nth-child(1) {
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
    margin-top: 0;
  }
  .nav-close div:nth-child(2) {
    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
    margin-top: 0;
  }
  .nav-overlay {
    display: none;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
    cursor: pointer;
  }
  #nav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(80%, 520px);
    background-color: #fff;
    display: block;
    -webkit-transform: translateX(-102%);
        -ms-transform: translateX(-102%);
            transform: translateX(-102%);
    -webkit-transition: -webkit-transform 0.35s;
    transition: -webkit-transform 0.35s;
    transition: transform 0.35s;
    transition: transform 0.35s, -webkit-transform 0.35s;
    padding-bottom: calc(var(--h-input) + 30px);
  }
  .nav-mb-bottom {
    position: absolute;
    bottom: 12px;
    left: 0;
    width: 100%;
    -ms-flex-item-align: 10;
        align-self: 10;
    padding: 10px var(--gap);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .nav-mb-func {
    height: var(--h-header);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding-right: var(--h-header);
  }
  .is-open-nav #nav {
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
  }
  .is-open-nav .nav-overlay {
    display: block;
    -webkit-animation: ani_fadeIn 0.6s both;
            animation: ani_fadeIn 0.6s both;
  }
  .nav-menu {
    display: block;
    max-height: calc(100svh - var(--h-header) - var(--h-input) - 30px);
    overflow-y: auto;
  }
  .nav-menu::-webkit-scrollbar {
    width: 10px;
    background: rgba(0, 0, 0, 0);
  }
  .nav-menu::-webkit-scrollbar-track {
    -webkit-box-shadow: none;
            box-shadow: none;
    margin: 0;
  }
  .nav-menu::-webkit-scrollbar-thumb {
    -webkit-box-shadow: none;
            box-shadow: none;
    border-radius: 50px;
    background: rgba(0, 0, 0, 0.3);
    -webkit-transition: width 0.2s;
    transition: width 0.2s;
  }
  .nav-menu::-webkit-scrollbar-thumb:hover {
    width: 12px;
  }
  .nav-menu .img {
    display: none;
  }
  .nav-menu .sub-switch {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    width: calc(var(--h-input) + 10px);
    height: 100%;
    cursor: pointer;
  }
  .nav-menu .sub-switch::before {
    content: "";
    position: absolute;
    top: 1.25rem;
    left: 50%;
    margin-left: -3px;
    width: 6px;
    height: 6px;
    border-style: solid;
    border-width: 1px 1px 0 0;
    border-color: #333;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  .pc .nav-menu .sub-switch:hover {
    background-color: rgba(0, 0, 0, 0.1);
  }
  .nav-menu .sub-switch + a {
    padding-right: calc(var(--h-input) + 15px) !important;
  }
  .nav-menu li {
    position: relative;
    display: block;
  }
  .nav-menu li.is-open > .sub-switch::before {
    -webkit-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
            transform: rotate(135deg);
  }
  .nav-menu li a {
    display: block;
    position: relative;
    z-index: 1;
  }
  .nav-menu li ul {
    z-index: 3;
    position: relative;
    display: none;
  }
  .nav-menu > li {
    margin: 0 0 2px;
    background-color: #eee;
  }
  .nav-menu > li > a {
    position: relative;
    padding: 1rem;
    font-size: 16px;
    font-weight: 600;
    color: #333;
  }
  .nav-menu > li:hover > a {
    color: #111;
  }
  .nav-menu > li > .sub-switch::before {
    top: 1.65rem;
  }
  .nav-menu > li > ul {
    background-color: #fff;
  }
  .nav-menu > li > ul > li {
    border-top: 2px solid #eee;
  }
  .nav-menu > li > ul > li:first-child {
    border-top: none;
  }
  .nav-menu > li > ul > li > a {
    display: block;
    padding: 0.8rem 0.8rem 0.8rem 2rem;
    font-size: 15px;
    color: #333;
    font-weight: 500;
  }
  .nav-menu > li > ul > li:hover > a {
    font-weight: 600;
    color: #111;
  }
  .nav-menu > li > ul > li > ul {
    list-style: none;
    padding: 0 0 10px;
    margin: 0;
  }
  .nav-menu > li > ul > li > ul > li {
    display: block;
  }
  .nav-menu > li > ul > li > ul > li > a {
    position: relative;
    display: block;
    padding: 0.35rem 0.5rem 0.35rem 3rem;
    font-size: 15px;
    color: #333;
    font-weight: 500;
  }
  .nav-menu > li > ul > li > ul > li > a::before {
    content: "";
    border-radius: 5px;
    width: 3px;
    height: 3px;
    background-color: #333;
    display: block;
    position: absolute;
    top: 1em;
    left: 2rem;
  }
  .nav-menu > li > ul > li > ul > li > a:hover {
    color: var(--color-orange);
  }
  .nav-menu > li > ul > li > ul > li > a:hover::befor e {
    background-color: var(--color-orange);
  }
}
@media only screen and (max-width: 639px) {
  .quick-link > li.link-member, .quick-link > li.link-contact:not(.in-dealer) {
    display: none;
  }
}
@media only screen and (max-width: 439px) {
  .quick-link {
    gap: 0 8px;
  }
  #header .logo {
    width: 130px;
  }
  #header .quick-link {
    margin-right: -10px;
  }
}
@media only screen and (max-width: 379px) {
  #nav {
    width: min(100%, 520px);
  }
}
/*
 * Popup User
 */
.mfp-popup-user .mfp-content {
  max-width: 940px;
}
.mfp-popup-user .mfp-close {
  width: var(--h-input);
  height: var(--h-input);
  border-radius: 50%;
  background-color: rgba(240, 130, 0, 0.7);
  position: absolute;
  top: 26px;
  right: 20px;
  font-size: 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition: background 0.35s;
  transition: background 0.35s;
}
.mfp-popup-user .mfp-close::before {
  content: "";
  width: 60%;
  aspect-ratio: 1;
  display: block;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23fff' class='w-6 h-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M6 18 18 6M6 6l12 12' /%3E%3C/svg%3E") no-repeat 0 0/contain;
}
.mfp-popup-user .mfp-close:hover {
  background-color: rgb(240, 130, 0);
}

.popup-user-wrap {
  max-width: 940px;
  background-color: #fff;
}

.popup-user-head {
  background-color: var(--color-orange);
  padding: 20px 10px 15px;
  text-align: center;
  font-size: 15px;
  color: #fff;
}
.popup-user-head .t1 {
  display: block;
  font-size: 24px;
  color: #fff;
}

.popup-user-body {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  background-color: #fff;
}

.popup-user-link {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 50%;
          flex: 1 1 50%;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  color: #222;
  font-size: 32px;
  letter-spacing: 0.18em;
  font-weight: 600;
  -webkit-transition: color 0.25s;
  transition: color 0.25s;
  padding: max(6vh, var(--gap)) var(--gap);
  background-color: #fff;
  border-left: 1px solid #ccc;
}
.popup-user-link:first-child {
  border-left: none;
}
.popup-user-link .img {
  border-radius: 100px;
  width: max(120px, 6.25vw);
  -webkit-box-flex: 0;
      -ms-flex: 0;
          flex: 0;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.popup-user-link .img img {
  -o-object-fit: contain;
     object-fit: contain;
  display: inline-block;
  width: 100%;
  -webkit-filter: brightness(0) invert(1) brightness(50%);
          filter: brightness(0) invert(1) brightness(50%);
  -webkit-transition: -webkit-filter 0.25s;
  transition: -webkit-filter 0.25s;
  transition: filter 0.25s;
  transition: filter 0.25s, -webkit-filter 0.25s;
}
.popup-user-link span {
  display: block;
  margin: var(--gap) auto;
}
.popup-user-link .arrow {
  width: 100%;
  max-width: 88px;
  height: 35px;
  line-height: 35px;
  border-radius: 50px;
  text-align: center;
  background-color: var(--color-orange);
  color: #fff;
  letter-spacing: 0.02em;
  font-size: 16px;
}
.popup-user-link:hover {
  color: var(--color-orange);
}
.popup-user-link:hover .img img {
  -webkit-filter: none;
          filter: none;
}

@media only screen and (max-width: 767px) {
  .popup-user-head .t1 {
    font-size: 22px;
  }
  .popup-user-link {
    font-size: 28px;
  }
}
@media only screen and (max-width: 579px) {
  .popup-user-body {
    display: block;
  }
  .popup-user-link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    padding: var(--gap) 15px var(--gap) 10px;
    border-left: none;
    border-top: 1px solid #aaa;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    gap: 0 15px;
  }
  .popup-user-link:first-child {
    border-top: none;
  }
  .popup-user-link .arrow {
    display: none;
  }
  .popup-user-link .img {
    width: 70px;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 70px;
            flex: 0 0 70px;
    margin-top: -7px;
  }
  .popup-user-link span {
    margin: 0;
  }
}
@media only screen and (max-width: 499px) {
  .select-user {
    padding-left: 2.5rem;
  }
  .select-user select {
    padding-right: 12px;
    background-position: calc(100% - 8px) center;
  }
  .select-user::after {
    content: "：";
    position: absolute;
    left: 2.25em;
    top: 0;
    line-height: var(--h-input);
  }
  .select-user::before {
    content: attr(data-tit);
    overflow: hidden;
    width: 2em;
  }
}
@media only screen and (max-width: 399px) {
  .mfp-popup-user .mfp-container {
    padding-top: 30px;
  }
  .mfp-popup-user .mfp-close {
    top: 0;
    right: 10px;
    margin-top: calc(var(--h-input) * -0.5);
  }
}
/*
 * Footer
 */
#gotop {
  z-index: 9;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  opacity: 0;
  position: fixed;
  bottom: var(--gap);
  right: var(--gap);
  width: var(--h-input);
  height: var(--h-input);
  border-radius: 50%;
  background-color: rgba(246, 139, 2, 0.7);
}
#gotop.open {
  opacity: 1;
}
#gotop.open:hover {
  background-color: rgb(246, 139, 2);
  cursor: pointer;
}
#gotop:before {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -6px;
  margin-top: -4px;
  width: 13px;
  height: 13px;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  -webkit-transform: rotate(-135deg);
      -ms-transform: rotate(-135deg);
          transform: rotate(-135deg);
}

#footer {
  background-color: #f7f7f8;
  font-size: 13px;
  color: #444;
}

.f-top {
  padding-top: 60px;
  padding-bottom: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 0 15px;
}

.f-bottom {
  padding-top: 22px;
  padding-bottom: 22px;
  border-top: 1px solid #dcdcdc;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0 15px;
}
.f-bottom a {
  color: #444;
}
.f-bottom a:hover {
  color: var(--color-orange);
}

.f-bottom-right {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0 15px;
  text-align: right;
}
.f-bottom-right .select-language, .f-bottom-right .select-user {
  font-size: 13px;
}
.f-bottom-right .select-language select, .f-bottom-right .select-user select {
  padding-left: 0;
  font: inherit;
  width: auto !important;
  min-width: auto !important;
}
.f-bottom-right .select-user {
  padding-left: 4.5rem;
}

.f-links {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  gap: 0 15px;
}
.f-links > li {
  display: inline-block;
  vertical-align: top;
  -webkit-box-flex: 1;
      -ms-flex: 1 1 110px;
          flex: 1 1 110px;
}
.f-links > li > ul > li {
  display: block;
  padding: 6px 0;
}
.f-links > li > ul > li a {
  display: inline-block;
  color: #444;
}
.f-links > li > ul > li a:hover {
  color: var(--color-orange);
}

.f-stit {
  color: #333;
  font-weight: 600;
  display: block;
  width: 100%;
  font-size: 15px;
  white-space: nowrap;
  margin-bottom: 10px;
}
.f-stit > * {
  font: inherit;
}

a.f-stit {
  color: #333;
}
a.f-stit:hover {
  color: #000;
}

.f-contact {
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  padding-right: 15px;
}
.f-contact i {
  font-style: normal;
}
.f-contact ul > li {
  display: block;
  padding: 6px 0;
}
.f-contact ul > li a {
  display: inline-block;
  color: #444;
}
.f-contact ul > li a:hover {
  color: var(--color-orange);
}

.f-society {
  max-width: 170px;
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-line-pack: start;
      align-content: flex-start;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 10px 15px;
}
.f-society .f-stit {
  margin-bottom: 0;
}
.f-society .icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  vertical-align: top;
  width: calc(var(--h-input) + 5px);
  height: calc(var(--h-input) + 5px);
  line-height: calc(var(--h-input) + 4px);
  text-align: center;
  aspect-ratio: 1;
  border-radius: 100px;
  color: #fff !important;
  background-color: #7d7d7d;
  padding: 0;
  -webkit-transition: background 0.2s;
  transition: background 0.2s;
}
.f-society .icon svg {
  display: inline-block;
  vertical-align: middle;
  width: 100%;
  max-width: 20px;
  max-height: 20px;
}
.f-society .icon:hover, .f-society .icon:active {
  -webkit-box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.25);
          box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.25);
  color: #fff;
}
.f-society .icon.yt svg {
  max-width: 23px;
  max-height: 23px;
}
.f-society .icon.yt:hover, .f-society .icon.yt:active {
  background-color: #ff0000;
}
.f-society .icon.line svg {
  max-width: 26px;
  max-height: 26px;
}
.f-society .icon.line:hover, .f-society .icon.line:active {
  background-color: #00c300;
}
.f-society .icon.fb:hover, .f-society .icon.fb:active {
  background-color: #1877f2;
}
.f-society .icon.ig:hover, .f-society .icon.ig:active {
  background: #d6249f;
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.f-society .icon.in:hover, .f-society .icon.in:active {
  background-color: #0a66c2;
}

.f-copyright {
  display: inline-block;
}

.f-grnet {
  display: inline-block;
}

@media only screen and (max-width: 991px) {
  .f-top {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .f-society {
    width: 100%;
    max-width: none;
  }
  .f-bottom {
    display: block;
  }
}
@media only screen and (max-width: 767px) {
  [data-name=product] #footer {
    padding-bottom: 40px;
  }
  .f-society {
    width: auto;
    gap: 5px;
  }
  .f-society .icon {
    width: var(--h-input);
    height: var(--h-input);
    line-height: var(--h-input);
  }
  .f-contact {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
  }
}
@media only screen and (min-width: 580px) {
  .f-links .sub-switch {
    display: none !important;
  }
  .f-links > li > ul {
    display: block !important;
  }
}
@media only screen and (max-width: 579px) {
  .f-top {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding-top: 30px;
    padding-bottom: 15px;
  }
  .f-links {
    width: 100%;
    display: block;
  }
  .f-links .f-stit {
    margin: 0;
    font-size: 15px;
  }
  .f-links > li {
    display: block;
    position: relative;
    border-bottom: 1px solid #dcdcdc;
  }
  .f-links > li.f-links-inline {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding-top: 20px;
    padding-bottom: 15px;
    max-width: 320px;
    margin: 0 auto;
    border-bottom: none;
  }
  .f-links > li.f-links-inline > .f-stit {
    width: auto;
    display: inline-block;
    padding: 0 5px;
    margin: 0 8px;
    position: relative;
    text-align: center;
    font-size: 14px;
  }
  .f-links > li.f-links-inline > .f-stit::before {
    content: "";
    display: block;
    position: absolute;
    width: 1px;
    top: 50%;
    height: 12px;
    margin-top: -6px;
    left: -6px;
    background-color: #dcdcdc;
  }
  .f-links > li.f-links-inline > .f-stit:first-of-type::before {
    display: none;
  }
  .f-links > li.is-open > .sub-switch::before {
    content: "";
    top: 22px;
    right: 14px;
    width: 5px;
    height: 5px;
    border-style: solid;
    border-width: 1px 1px 0 0;
    border-color: #666;
    -webkit-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
            transform: rotate(135deg);
  }
  .f-links > li > a {
    position: relative;
    z-index: 1;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .f-links > li > ul {
    display: none;
    position: relative;
    z-index: 5;
    background-color: #fff;
    margin: 0 0 5px 0;
  }
  .f-links > li > ul > li {
    display: block;
    border-top: 2px solid #f7f7f8;
  }
  .f-links > li > ul > li:first-child {
    border-top: none;
  }
  .f-links > li > ul > li > a {
    padding: 7px 10px;
  }
  .f-links > li .sub-switch {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
  .f-links > li .sub-switch::before {
    content: "+";
    position: absolute;
    font-family: "Noto Sans TC";
    top: 12px;
    right: 13px;
    font-size: 15px;
  }
  .f-links > li .sub-switch:hover::before {
    border-color: #111;
  }
  .f-links > li .sub-switch + a {
    padding-right: 32px !important;
  }
  .f-society {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
    width: 100%;
    padding-top: 10px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .f-society .f-stit {
    display: none;
  }
  .f-society .icon {
    --h-input: 38px;
  }
  .f-contact {
    padding-right: 0;
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
    padding-top: 10px;
    text-align: center;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    font-size: 14px;
  }
  .f-contact > ul {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 0 10px;
  }
  .f-contact > ul > li:nth-child(1), .f-contact > ul > li:nth-child(2) {
    display: block;
    width: 100%;
  }
  .f-contact .f-stit {
    display: none;
  }
  .f-bottom-left {
    display: block;
    font-size: 12px;
    text-align: center;
  }
  .f-copyright {
    display: block;
  }
  .f-bottom-right {
    display: none;
  }
  .f-grnet {
    display: block;
    opacity: 0.8;
  }
}
/* ==========================================
 ##### Plugins
========================================== */
/*
 * PLUGIN: Slick
 */
.slick-slider {
  -ms-touch-action: auto !important;
      touch-action: auto !important;
}

.slick-arrow {
  position: absolute;
  top: 50%;
  margin-top: calc(var(--h-input) * -0.5);
  z-index: 2;
  width: var(--h-input);
  height: var(--h-input);
  border-radius: var(--h-input);
  background-color: rgba(255, 255, 255, 0.7);
  border: none;
  font-size: 0;
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.slick-arrow.slick-prev {
  left: 0;
}
.slick-arrow.slick-next {
  right: 0;
}
.slick-arrow.slick-disabled {
  opacity: 0.1;
}
.slick-arrow:before {
  pointer-events: none;
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-style: solid;
  border-width: 2px 2px 0 0;
  border-color: var(--color-dark);
}
.slick-arrow.slick-prev:before {
  left: 50%;
  margin-left: -3px;
  -webkit-transform: rotate(-135deg);
      -ms-transform: rotate(-135deg);
          transform: rotate(-135deg);
}
.slick-arrow.slick-next:before {
  right: 50%;
  margin-right: -3px;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}
.slick-arrow:hover {
  background-color: rgb(255, 255, 255);
}

.slick-dots {
  position: absolute;
  bottom: var(--gap);
  left: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  text-align: center;
  font-size: 0;
}
.slick-dots li {
  display: inline-block;
  padding: 5px;
}
.slick-dots li button {
  padding: 0;
  width: 10px;
  height: 10px;
  border: none;
  background: transparent;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.7);
}
.slick-dots li button:hover {
  background-color: rgba(255, 255, 255, 0.7);
}
.slick-dots li.slick-active button {
  border-color: var(--color-orange);
  background-color: var(--color-orange);
}

/*
 * PLUGIN: MagnificPopup Default Popup
 */
/* zoom */
.mfp-with-zoom .mfp-container {
  opacity: 0;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  -webkit-transform: scale(0.8);
      -ms-transform: scale(0.8);
          transform: scale(0.8);
}
.mfp-with-zoom.mfp-ready .mfp-container {
  opacity: 1;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}
.mfp-with-zoom.mfp-removing .mfp-container {
  opacity: 0;
  -webkit-transform: scale(0.8);
      -ms-transform: scale(0.8);
          transform: scale(0.8);
}

/* Fade In-Out */
.mfp-fade.mfp-bg {
  opacity: 0;
  -webkit-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
}
.mfp-fade.mfp-bg.mfp-ready {
  opacity: 0.8;
}
.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}
.mfp-fade.mfp-wrap .mfp-content {
  opacity: 0;
  -webkit-transition: all 0.15s ease-out;
  transition: all 0.15s ease-out;
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
  opacity: 1;
}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
  opacity: 0;
}

.mfp-iframe-holder .mfp-close {
  position: fixed;
  width: 40px;
  height: 40px;
  line-height: 40px;
  top: 0;
  right: 0;
  text-align: center;
  padding: 0;
}

/* ==========================================
 ##### Common Set.
========================================== */
/*
 * Wrapper
 */
.p-1300 {
  margin: 0 auto;
  width: 100%;
  max-width: var(--w-wrap);
  padding-left: var(--gap);
  padding-right: var(--gap);
  position: relative;
}

.p-750 {
  margin: 0 auto;
  width: 100%;
  max-width: var(--w-wrap-sm);
  padding-left: var(--gap);
  padding-right: var(--gap);
  position: relative;
}

.p-container {
  width: 100%;
  position: relative;
  padding-top: 5px;
  padding-bottom: max(5vh, 15px);
}
.p-container .block-subhead {
  margin-top: 0;
  margin-bottom: max(var(--gap), 4vh);
}

.box-container {
  margin: 20px 0;
  padding: 50px;
  background-color: #fff;
}

.p-half {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

@media only screen and (max-width: 767px) {
  .box-container {
    margin: 0;
    padding: 20px;
  }
  .p-half {
    display: block;
  }
}
/*
 * 背景
 */
.page-bg {
  background-color: #fff;
  background-size: 4px 4px;
  background-image: repeating-linear-gradient(45deg, #ccc 0, #ccc 0.4px, #fff 0, #fff 50%);
}
.page-bg .p-container .box-container {
  margin-bottom: 10px;
  margin-top: 10px;
}

@media only screen and (max-width: 767px) {
  .page-bg .p-container .box-container {
    margin-bottom: 0;
    margin-top: 0;
  }
}
@media only screen and (max-width: 499px) {
  .page-bg .p-container {
    padding-left: 0;
    padding-right: 0;
  }
}
/*
 * color, other
 */
.font-red {
  color: var(--color-red);
}

.tip-text {
  display: inline-block;
  vertical-align: top;
  position: relative;
  font-size: 14px;
  margin-top: 2px;
  color: var(--color-orange);
  font-weight: 500;
}
.tip-text a {
  color: inherit;
}
.tip-text a:hover {
  text-decoration: underline;
}
.tip-text.yes, .tip-text.no {
  padding-left: 20px;
  min-height: 15px;
}
.tip-text.yes::before, .tip-text.no::before {
  content: "";
  display: block;
  position: absolute;
  top: 2px;
  left: 0;
  width: 18px;
  height: 18px;
}
.tip-text.yes {
  color: #4db398;
}
.tip-text.yes::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-5 -7 24 24' width='28' fill='%234db398'%3E%3Cpath d='M5.486 9.73a.997.997 0 0 1-.707-.292L.537 5.195A1 1 0 1 1 1.95 3.78l3.535 3.535L11.85.952a1 1 0 0 1 1.415 1.414L6.193 9.438a.997.997 0 0 1-.707.292z'%3E%3C/path%3E%3C/svg%3E") no-repeat 0 0/contain;
}
.tip-text.no {
  color: var(--color-red);
}
.tip-text.no::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ce202e'%3E%3Cpath d='M0 0h24v24H0V0z' fill='none'/%3E%3Cpath d='M14.59 8L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41 14.59 8zM12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z'/%3E%3C/svg%3E") no-repeat 0 0/contain;
}

.close {
  color: #fff;
  line-height: 27px;
  opacity: 1 !important;
  font-weight: normal;
}

/*
 * Subhead
 */
.block-subhead {
  font-size: 25px;
  color: #222;
  display: block;
  font-weight: 500;
  margin-top: calc(var(--gap-list) * 0.5);
  margin-bottom: var(--gap-list);
}

@media only screen and (max-width: 767px) {
  .block-subhead {
    font-size: clamp(20px, 3.8vw, 30px);
    margin-top: var(--gap-list-lg);
    margin-bottom: calc(var(--gap-list-lg) * 0.8);
  }
}
.p-subject {
  position: relative;
  padding: 0 0 20px;
  text-align: center;
  font-weight: 500;
  line-height: 1.4;
}
.p-subject .en {
  color: var(--color-orange);
  font-size: clamp(14px, 1vw, 16px);
  display: block;
  line-height: 1.2;
}
.p-subject .tw {
  display: block;
  color: #333;
  font-size: clamp(18px, 2vw, 25px);
}

/*
 * Page Kanban
 */
.p-kanban {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  overflow: hidden;
}
.p-kanban img, .p-kanban source {
  position: relative;
  z-index: 0;
}
.p-kanban .p-1300 {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.p-kanban .p-kanban-title {
  color: #222;
  letter-spacing: 0.1em;
  display: block;
  font-weight: 500;
  font-size: clamp(22px, 2vw, 25px);
  margin: 0;
  padding: 0;
  position: relative;
  display: none !important;
}
.p-kanban:not(.text-light) .p-kanban-title {
  text-shadow: 0 2px 3px rgba(255, 255, 255, 0.8);
}
.p-kanban:not(.text-light) .p-kanban-title::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 4%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: max(200px, 26vw);
  z-index: -2;
  aspect-ratio: 1;
  background: rgb(255, 255, 255);
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.86) 40%, rgba(255, 255, 255, 0) 100%);
}
.p-kanban.text-light .p-kanban-title {
  color: #fff;
}

/*
 * Breadcrumb
 */
.page-bg .p-guide + .p-container {
  padding-top: calc(max(5vh, 15px) - 44px);
}

.p-guide {
  position: relative;
  z-index: 10;
  padding: 15px 0;
}
.p-guide li {
  display: inline-block;
  position: relative;
  padding: 8px 23px 8px 0;
  vertical-align: top;
  line-height: 20px;
}
.p-guide li a {
  display: inline-block;
  vertical-align: middle;
  padding-top: 2px;
  color: #666;
  font-size: 14px;
  line-height: 16px;
}
.p-guide li a.home {
  font-size: 0;
  width: 18px;
  height: 18px;
  line-height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-home' width='24' height='24' viewBox='0 0 24 24' stroke-width='2' stroke='%23666' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M5 12l-2 0l9 -9l9 9l-2 0' /%3E%3Cpath d='M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7' /%3E%3Cpath d='M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6' /%3E%3C/svg%3E") no-repeat 0 0/contain;
  background-size: contain;
}
.p-guide li::before {
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  pointer-events: none;
  content: "";
  position: absolute;
  top: 15px;
  right: 10px;
  width: 8px;
  height: 8px;
  border-top: 1px solid #666;
  border-right: 1px solid #666;
}
.p-guide li:last-child::before {
  display: none;
}

@media (max-width: 991px) {
  .p-guide {
    padding: 12px 0;
  }
  #product-list .p-guide {
    padding-bottom: 10px;
  }
}
/*
 * Button
 */
.button-box {
  margin: 20px auto 0 auto;
  max-width: 600px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0 10px;
}
.button-box.text-center {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.button-box .btn-style {
  width: calc((100% - 170px) / 2 - 5px);
}
.button-box .btn-control {
  vertical-align: top;
  display: inline-block;
  margin-right: 10px;
  padding-left: 35px;
  width: 160px;
  height: var(--h-input);
  border: none;
  border-radius: 4px;
  background: url("../images/icon_heart.png") #dc1f1f 18px 11px no-repeat;
  background-size: 27px calc(var(--h-input) * 0.5);
  line-height: var(--h-input);
  font-size: 16px;
  color: #fff;
}

.buttons {
  text-align: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 10px;
  margin: 20px auto 0;
}
.buttons.flow {
  text-align: right;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.buttons.flow.finish {
  text-align: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.buttons .right-btn {
  display: inline-block;
  vertical-align: top;
}
.buttons .right-btn .btn-style, .buttons .right-btn .btn-style2 {
  width: 100%;
}

.btn-style {
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  display: inline-block;
  vertical-align: top;
  min-width: 160px;
  height: var(--h-input);
  text-align: center;
  white-space: nowrap;
  font-size: 15px;
  padding-left: 10px;
  padding-right: 10px;
  line-height: calc(var(--h-input) - 2px);
  border-radius: var(--radius-input);
  color: #fff;
  background-color: #5d3b1f;
  border: 1px solid #5d3b1f;
}
.btn-style:hover {
  color: #fff;
  background-color: #f08200;
  border-color: #f08200;
}

.btn-style2 {
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  display: inline-block;
  vertical-align: top;
  min-width: 150px;
  text-align: center;
  white-space: nowrap;
  font-size: 15px;
  padding-left: 10px;
  padding-right: 10px;
  height: var(--h-input);
  line-height: var(--h-input);
  border-radius: var(--radius-input);
  color: #fff;
  background-color: var(--color-dark);
  border: 1px solid var(--color-dark);
}
.btn-style2:hover {
  color: #fff;
  background-color: #f08200;
  border-color: #f08200;
}

.btn-style.disabled, .btn-style2.disabled {
  cursor: default;
}
.btn-style.orange, .btn-style2.orange {
  color: #fff;
  background-color: #f08200;
  border-color: #f08200;
}
.btn-style.orange:hover, .btn-style2.orange:hover {
  color: #fff;
  background-color: #ff6912;
  border-color: #ff6912;
}
.btn-style.blue, .btn-style2.blue {
  background-color: #4460a1;
  border-color: #4460a1;
}
.btn-style.blue:hover, .btn-style2.blue:hover {
  color: #fff;
  background-color: #3756a0;
  border-color: #3756a0;
}
.btn-style.white, .btn-style2.white {
  color: #f08200;
  background-color: #fff;
  border-color: #f08200;
}
.btn-style.white:hover, .btn-style2.white:hover {
  color: #fff;
  background-color: #f08200;
  border-color: #f08200;
}
.btn-style.gray, .btn-style2.gray {
  color: #333;
  background-color: #e9e9e9;
  border-color: #e9e9e9;
}
.btn-style.gray:hover, .btn-style2.gray:hover {
  color: #333;
  background-color: #ddd;
  border-color: #ddd;
}
.btn-style.line, .btn-style2.line {
  color: #fff;
  background-color: #02b401;
  border-color: #02b401;
}
.btn-style.line:hover, .btn-style2.line:hover {
  color: #fff;
  background-color: #00c300;
  border-color: #00c300;
}
.btn-style.cash, .btn-style2.cash {
  color: #fff;
  background-color: #4685bb;
  border-color: #4685bb;
}
.btn-style.cash:hover, .btn-style2.cash:hover {
  color: #fff;
  background-color: #3c8dd3;
  border-color: #3c8dd3;
}

.btn-delete {
  z-index: 15;
  font-size: 0;
  display: block;
  position: relative;
  margin: 0 auto;
  width: 20px;
  height: 20px;
  border: 2px solid #aaa;
  border-radius: 50%;
  background-color: transparent;
}
.btn-delete span {
  display: block;
  width: 20px;
  height: 20px;
}
.btn-delete span:before, .btn-delete span:after {
  pointer-events: none;
  content: "";
  position: absolute;
  background-color: #aaa;
  top: 4px;
  left: 7px;
  width: 2px;
  height: 9px;
}
.btn-delete span:before {
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}
.btn-delete span:after {
  -webkit-transform: rotate(135deg);
      -ms-transform: rotate(135deg);
          transform: rotate(135deg);
}
.btn-delete:hover {
  border-color: #f08200;
}
.btn-delete:hover span:before, .btn-delete:hover span:after {
  background-color: #f08200;
}

.btn-add-cart {
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  display: block;
  margin: 0 auto;
  width: 28px;
  height: 28px;
  border: none;
  background-image: url("../images/icon_cart4.png");
  background-size: 28px 56px;
  background-color: transparent;
}
.btn-add-cart:hover {
  background-position: 0 bottom;
}

.btn-primary {
  background-color: #f08200;
  border-color: #f08200;
}
.btn-primary:hover {
  background-color: #f08200;
  border-color: #f08200;
  opacity: 0.8;
}

@media only screen and (max-width: 1399px) {
  .more-box {
    padding: 30px 0 50px;
  }
}
@media only screen and (max-width: 991px) {
  .buttons.flow {
    text-align: center;
  }
}
@media only screen and (max-width: 767px) {
  .button-box .btn-style {
    -ms-flex-preferred-size: calc(50% - 10px);
        flex-basis: calc(50% - 10px);
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
    width: calc(50% - 10px);
  }
  .button-box .btn-style.orange {
    margin-left: 5px;
    margin-right: 0;
  }
  .button-box .btn-control {
    width: 54px;
    background-position: 12px 11px;
    margin-right: 0;
  }
  .buttons.flow .btn-style2 {
    margin: 0;
  }
  .buttons.flow .btn-style2.orange {
    width: 100%;
  }
  .btn-style2 {
    display: block;
    margin: 0;
    width: 100%;
    max-width: 100%;
  }
  .btn-delete {
    border-color: #fff;
  }
  .btn-delete span:before, .btn-delete span:after {
    background-color: #fff;
  }
  .btn-delete:hover {
    border-color: #ebe3ca;
  }
  .btn-delete:hover span:before, .btn-delete:hover span:after {
    background-color: #ebe3ca;
  }
  .btn-add-cart {
    display: block;
    margin: 0;
    width: 100%;
    height: auto;
    background: none;
    background-color: #f08200;
    padding: 5px 0;
    line-height: 30px;
    font-size: 16px;
    color: #fff;
  }
}
/*
 * Page Paginate
 */
.p-paginate {
  position: relative;
  padding: 50px 0;
  text-align: center;
}
.p-paginate .num {
  display: inline-block;
  vertical-align: middle;
}
.p-paginate .num a:first-child:before {
  display: none;
}
.p-paginate a {
  position: relative;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  display: inline-block;
  margin: 0 5px;
  min-width: var(--h-input);
  min-height: var(--h-input);
  font-size: 18px;
  line-height: var(--h-input);
  vertical-align: middle;
  border: none;
}
.p-paginate a:before {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 12px;
  left: -7px;
  width: 1px;
  height: 14px;
  background-color: #bbb;
  -webkit-transform: rotate(35deg);
      -ms-transform: rotate(35deg);
          transform: rotate(35deg);
}
.p-paginate a:hover {
  color: #f08200;
}
.p-paginate a.current {
  color: #f08200;
  font-weight: bold;
  text-decoration: underline;
}
.p-paginate a.control {
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  position: relative;
  margin: 0 15px;
  border-radius: 50%;
  background-color: #D2D2D2;
  font-size: 0;
}
.p-paginate a.control:before {
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  width: 8px;
  height: 8px;
  top: 50%;
  margin-top: -4px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  pointer-events: none;
  content: "";
  position: absolute;
  z-index: 0;
  bottom: auto;
  background-color: transparent;
}
.p-paginate a.control.prev:before {
  right: auto;
  margin-left: -3px;
  left: 50%;
  -webkit-transform: rotate(-135deg);
      -ms-transform: rotate(-135deg);
          transform: rotate(-135deg);
}
.p-paginate a.control.next:before {
  right: 50%;
  margin-right: -3px;
  left: auto;
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}
.p-paginate a.control.prev:hover, .p-paginate a.control.next:hover {
  background-color: #444;
}

@media only screen and (max-width: 1023px) {
  .p-paginate {
    padding: 30px 0;
  }
}
@media only screen and (max-width: 767px) {
  .p-paginate {
    padding: 10px 0 60px;
  }
  .p-paginate a.control {
    position: absolute;
    bottom: 15px;
    margin: 0;
  }
  .p-paginate a.control.prev {
    left: calc(50% - var(--h-input) - 5px);
  }
  .p-paginate a.control.next {
    right: calc(50% - var(--h-input) - 5px);
  }
}
/*
 * Number Spinner
 */
.wan-spinner {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  min-width: 140px;
  border: 1px solid #ccc;
  vertical-align: top;
}
.wan-spinner .minus, .wan-spinner .plus {
  font-size: 0;
  display: inline-block;
  margin: 0;
  padding: 5px;
  width: var(--h-input);
  height: var(--h-input);
  text-align: center;
  border: none;
  vertical-align: top;
  min-width: 25px;
  position: relative;
  cursor: pointer;
}
.wan-spinner input {
  display: inline-block;
  margin: 0;
  padding: 5px;
  width: var(--h-input);
  height: var(--h-input);
  text-align: center;
  border: none;
  vertical-align: top;
  height: var(--h-input);
  min-width: 50px !important;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  font-size: 15px;
  font-weight: normal;
}
.wan-spinner .minus {
  border-right: 1px solid #ccc;
}
.wan-spinner .minus::before {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #333;
  margin-left: -5px;
  width: 9px;
  height: 1px;
}
.wan-spinner .minus:hover {
  background-color: #ccc;
}
.wan-spinner .minus:hover:before {
  background-color: #fff;
}
.wan-spinner .plus {
  border-left: 1px solid #ccc;
}
.wan-spinner .plus::before, .wan-spinner .plus::after {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: #333;
}
.wan-spinner .plus::before {
  margin-left: -5px;
  width: 9px;
  height: 1px;
}
.wan-spinner .plus::after {
  margin: -4px 0 0 -1px;
  width: 1px;
  height: 9px;
}
.wan-spinner .plus:hover {
  background-color: #ccc;
}
.wan-spinner .plus:hover:before, .wan-spinner .plus:hover:after {
  background-color: #fff;
}

@media only screen and (max-width: 991px) {
  .wan-spinner {
    width: 110px;
  }
}
/*
 * Side navigation
 */
.p-category {
  padding: 20px 0;
  margin-bottom: 20px;
  text-align: center;
}
.p-category .txt {
  display: none;
}
.p-category .list > ul {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
.p-category .list > ul > li {
  display: inline-block;
  margin: 0 10px;
  vertical-align: middle;
}
.p-category .list > ul > li:hover > a {
  color: #f08200;
  background-color: #fafafa;
}
.p-category .list > ul > li.current > a, .p-category .list > ul > li.current:hover > a {
  color: #fff;
  background-color: #f08200;
}
.p-category .list > ul > li > a {
  display: inline-block;
  line-height: 1.2;
  padding: 12px 10px;
  color: #888;
  font-size: 16px;
  min-width: 150px;
  border-radius: 25px;
}
.p-category .list > ul > li > ul {
  display: none;
}

.p-category-wrap {
  position: relative;
  margin: 0 auto;
  padding: 20px 0;
}
.p-category-wrap .p-category {
  padding: 0;
}
.p-category-wrap.has-next-level {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.p-category-wrap.has-next-level .p-category {
  display: inline-block;
  margin: 0;
}

.p-category-next-level {
  max-width: 140px;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 140px;
          flex: 0 0 140px;
}

@media only screen and (max-width: 991px) {
  .p-category {
    padding: 10px 0;
  }
  .p-category .list > ul > li {
    margin: 0;
  }
  .p-category .list > ul > li > a {
    width: auto;
    min-width: 100px;
  }
}
@media only screen and (max-width: 767px) {
  .p-category-wrap {
    display: none !important;
  }
  .p-category {
    display: block;
    padding: 0;
    position: relative;
  }
  .p-category:before {
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    pointer-events: none;
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-color: #f08200;
    border-radius: 5px;
  }
  .p-category .txt {
    display: block;
    position: relative;
    margin: 0;
    padding: 12px 15px;
    color: #fff;
    font-size: 17px;
    text-align: left;
  }
  .p-category .txt:before, .p-category .txt:after {
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    pointer-events: none;
    content: "";
    position: absolute;
    width: 2px;
    height: 11px;
    background-color: #fff;
  }
  .p-category .txt:before {
    top: 19px;
    right: 20px;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  .p-category .txt:after {
    top: 12px;
    right: 20px;
    -webkit-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
            transform: rotate(135deg);
  }
  .p-category .list {
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    position: fixed;
    top: 0;
    left: -220px;
    width: 220px;
    height: 100vh;
    overflow-y: scroll;
    z-index: 101;
    background: #f08200;
    text-align: left;
  }
  .p-category .list > ul > li {
    display: block;
    width: 100%;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  }
  .p-category .list > ul > li > a {
    height: auto;
    border-radius: 0;
    padding: 12px;
    display: block;
    color: #fff;
    font-size: 16px;
    line-height: 32px;
    text-align: center;
  }
  .p-category .list > ul > li:hover > a {
    color: #fff;
    background-color: #f08200;
  }
  .p-category.open:before {
    width: 42px;
  }
  .p-category.open .txt:before, .p-category.open .txt:after {
    top: 14px;
    right: 20px;
    width: 2px;
    height: 16px;
  }
  .p-category.open .txt:before {
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  .p-category.open .txt:after {
    -webkit-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
            transform: rotate(135deg);
  }
  .p-category.open .list {
    left: 0;
  }
}
/*
 * Product Aside Navigation
 */
#aside {
  display: inline-block;
  vertical-align: top;
  width: 220px;
}
#aside .subject {
  margin-bottom: 5px;
  padding-bottom: 5px;
  border-bottom: 2px solid #666;
  line-height: 1.4;
  color: var(--color-dark);
}
#aside .subject .en {
  font-size: clamp(14px, 1vw, 16px);
  color: var(--color-orange);
  line-height: 1.2;
}
#aside .subject .tw {
  font-size: clamp(22px, 2vw, 25px);
}

.aside-link {
  margin-bottom: 30px;
}
.aside-link .sub-switch {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  width: var(--h-input);
  height: 100%;
  cursor: pointer;
}
.aside-link .sub-switch::before {
  content: "";
  position: absolute;
  top: 1.05em;
  left: 50%;
  width: 8px;
  height: 8px;
  margin-left: -4px;
  border-style: solid;
  border-width: 2px 2px 0 0;
  border-color: var(--color-dark);
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
}
.aside-link .sub-switch:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
.aside-link .sub-switch + a {
  padding-right: calc(var(--h-input) + 3px) !important;
}
.aside-link a {
  display: block;
  padding: 10px;
  font-size: 16px;
}
.aside-link > ul > li {
  position: relative;
  border-bottom: 1px solid #c9c9c9;
}
.aside-link > ul > li > ul {
  background-color: #fff;
  z-index: 3;
  position: relative;
  display: none;
  padding: 5px 0 10px;
}
.aside-link > ul > li > ul > li {
  border-bottom: none;
}
.aside-link > ul > li > ul > li > a {
  display: inline-block;
  padding: 8px 10px;
  color: var(--color-dark);
  font-size: 15px;
}
.aside-link > ul > li > ul > li > a:hover {
  text-decoration: underline;
}
.aside-link > ul > li > ul > li.current > a {
  color: var(--color-orange);
  text-decoration: underline;
}
.aside-link > ul > li.is-open {
  background-color: #eee;
}
.aside-link > ul > li.is-open > a {
  color: var(--color-dark);
}
.aside-link > ul > li.is-open > ul {
  display: block;
}
.aside-link > ul > li.is-open > .sub-switch::before {
  -webkit-transform: rotate(135deg);
      -ms-transform: rotate(135deg);
          transform: rotate(135deg);
  border-color: var(--color-dark);
  top: 1em;
}
.aside-link > ul > li:hover {
  background-color: #efefef;
}
.aside-link > ul > li:hover > .sub-switch::before {
  border-color: var(--color-dark);
}
.aside-link > ul > li:hover > a {
  color: var(--color-dark);
}

.p-right {
  display: inline-block;
  padding-left: 40px;
  font-size: 16px;
  width: calc(100% - 220px);
  vertical-align: top;
}

.p-top-subject {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 20px;
  padding: 0 0 10px 0;
  gap: 0 10px;
  border-bottom: 1px solid #999;
}
.p-top-subject .icon {
  display: inline-block;
  width: clamp(30px, 2.6vw, 50px);
  height: clamp(30px, 2.6vw, 50px);
}
.p-top-subject .title {
  display: inline-block;
  font-size: clamp(22px, 1.3vw, 26px);
  padding: 0;
}

@media only screen and (min-width: 768px) {
  .aside-link > ul {
    display: block !important;
  }
}
@media only screen and (max-width: 991px) {
  .aside-link a {
    padding: 7px 10px;
  }
  .p-right {
    padding-left: 20px;
    width: calc(100% - 180px);
  }
}
@media only screen and (max-width: 767px) {
  #aside {
    display: none !important;
    width: 100%;
    margin-bottom: var(--gap);
  }
  #aside .subject {
    padding-bottom: 0;
    border-bottom: none;
    position: relative;
  }
  #aside .subject:before {
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    pointer-events: none;
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-color: #f08200;
    border-radius: 5px;
  }
  #aside .subject .en {
    display: none;
  }
  #aside .subject .tw {
    position: relative;
    display: block;
    z-index: 1;
    padding: calc((var(--h-input) - 24px) * 0.5) 15px;
    color: #fff;
    font-size: 16px;
    line-height: 1.5;
    cursor: pointer;
  }
  #aside .subject .tw:before, #aside .subject .tw:after {
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    pointer-events: none;
    content: "";
    position: absolute;
    width: 2px;
    height: 11px;
    top: calc(var(--h-input) * 0.5);
    right: calc(var(--h-input) * 0.5);
    background-color: #fff;
  }
  #aside .subject .tw:before {
    margin-top: -1px;
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  #aside .subject .tw:after {
    margin-top: -8px;
    -webkit-transform: rotate(135deg);
        -ms-transform: rotate(135deg);
            transform: rotate(135deg);
  }
  #aside .subject.open:before {
    width: 42px;
  }
  #aside .subject.open .tw:before, #aside .subject.open .tw:after {
    margin-top: -8px;
    height: 16px;
  }
  #aside .pic {
    display: none;
  }
  .aside-link {
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    position: fixed;
    top: 0;
    left: -220px;
    width: 220px;
    height: 100vh;
    z-index: 101;
    background: #f08200;
    overflow-y: auto;
  }
  .aside-link::-webkit-scrollbar {
    width: 10px;
    background: rgba(0, 0, 0, 0);
  }
  .aside-link::-webkit-scrollbar-track {
    -webkit-box-shadow: none;
            box-shadow: none;
    margin: 0;
  }
  .aside-link::-webkit-scrollbar-thumb {
    -webkit-box-shadow: none;
            box-shadow: none;
    border-radius: 50px;
    background: rgba(0, 0, 0, 0.3);
    -webkit-transition: width 0.2s;
    transition: width 0.2s;
  }
  .aside-link::-webkit-scrollbar-thumb:hover {
    width: 12px;
  }
  .aside-link.open {
    left: 0;
  }
  .aside-link .sub-switch::before {
    border-color: #fff;
    top: 22px;
  }
  .aside-link > ul a {
    padding: 12px;
    display: block;
    color: #fff;
    font-size: 15px;
    text-align: center;
  }
  .aside-link > ul > li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  }
  .aside-link > ul > li.is-open .sub-switch::before {
    top: 22px;
    border-color: #fff;
  }
  .aside-link > ul > li.is-open > a {
    color: #fff;
    color: #fff;
    background-color: var(--color-orange);
  }
  .aside-link > ul > li > ul {
    display: none;
    padding: 0;
    background-color: #fff;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
  }
  .aside-link > ul > li > ul > li {
    background-color: rgba(0, 0, 0, 0.75);
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }
  .aside-link > ul > li > ul > li > a {
    padding: 8px 12px;
    color: #fff;
    display: block;
  }
  .aside-link > ul > li > ul > li > ul {
    display: none;
  }
  .aside-link > ul > li > ul > li > ul > li {
    background-color: rgba(0, 0, 0, 0.75);
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  }
  .aside-link > ul > li > ul > li > ul > li > a {
    padding: 8px 12px;
    color: #fff;
    display: block;
  }
  .p-right {
    display: block;
    padding: 0;
    width: 100%;
  }
}
.bullet-cate-list {
  margin: 0 0 10px;
}
.bullet-cate-list > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 5px 10px;
}
.bullet-cate-list > ul > li {
  display: inline-block;
}
.bullet-cate-list > ul > li > a {
  display: block;
  line-height: 28px;
  border-radius: 50px;
  border: 1px solid #f2f2f2;
  font-size: 15px;
  color: #555;
  background-color: #f2f2f2;
  padding: 0 15px;
}
.bullet-cate-list > ul > li > a:hover {
  background-color: #eee;
  border: 1px solid #eee;
  color: #444;
}
.bullet-cate-list > ul > li.current > a {
  color: #333;
  background-color: #eee;
  border: 1px solid #333;
}

@media only screen and (max-width: 767px) {
  .bullet-cate-list {
    margin-bottom: var(--gap);
  }
}
/*
 * Hover Effect
 */
.hover-item {
  display: inline-block;
  position: relative;
}
.hover-item span {
  display: inline-block;
}
.hover-item:hover .hover-view {
  -webkit-transform: scale(1) translate(-50%, -50%);
      -ms-transform: scale(1) translate(-50%, -50%);
          transform: scale(1) translate(-50%, -50%);
}
.hover-item .hover-view {
  -webkit-transform-origin: 0 0;
      -ms-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  -webkit-transform: scale(0) translate(-50%, -50%);
      -ms-transform: scale(0) translate(-50%, -50%);
          transform: scale(0) translate(-50%, -50%);
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 0 10px;
  width: 120px;
  height: 35px;
  z-index: 1;
  background-color: #fff;
  border-radius: 25px;
}
.hover-item .hover-view span {
  position: relative;
  padding-right: 12px;
  width: 120px;
  height: 35px;
  color: #f08200;
  font-size: 14px;
  text-align: center;
  line-height: 35px;
}

/*
 * Share kit
 */
.share-area .txt {
  padding-bottom: 10px;
  width: var(--h-input);
  text-align: center;
  line-height: var(--h-input);
  color: #aaa;
  font-size: 15px;
  -webkit-writing-mode: vertical-lr;
      -ms-writing-mode: tb-lr;
          writing-mode: vertical-lr;
}
.share-area .list {
  width: var(--h-input);
}
.share-area .list li {
  border: 1px solid #ddd;
  border-bottom: none;
}
.share-area .list li:last-child {
  border-bottom: 1px solid #ddd;
}
.share-area .list li a {
  overflow: hidden;
  font-size: 0;
  display: block;
  text-align: center;
  line-height: var(--h-inpurt);
  position: relative;
  width: var(--h-input);
  height: var(--h-input);
  color: #aaa;
  padding: 9px;
}
.share-area .list li a.x {
  padding: 12px;
}
.share-area .list li a svg {
  width: 100%;
  display: inline-block;
  vertical-align: middle;
}
.share-area .list li a:hover {
  color: #fff;
}
.share-area .list li a:hover.fb {
  background-color: #395599;
}
.share-area .list li a:hover.line {
  background-color: #02b401;
}
.share-area .list li a:hover.x {
  background-color: #111;
}

@media only screen and (min-width: 992px) {
  .share-area {
    position: absolute;
    top: var(--gap);
    left: var(--gap);
    width: 1000px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1399px) {
  .share-area {
    width: 70px;
  }
}
@media only screen and (max-width: 991px) {
  .share-area {
    padding-top: 10px;
    padding-bottom: 10px;
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    text-align: right;
    border-right: none;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
  .share-area .txt {
    display: inline-block;
    padding: 0 10px 0 0;
    width: auto;
    line-height: 1.2;
    -webkit-writing-mode: inherit;
        -ms-writing-mode: inherit;
            writing-mode: inherit;
    vertical-align: middle;
  }
  .share-area .list {
    width: auto;
    border-bottom: none;
    vertical-align: middle;
    margin: 0;
    padding: 0;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .share-area .list li {
    display: inline-block;
    border: 1px solid #ddd;
    border-right: none;
    width: auto;
  }
  .share-area .list li:last-child {
    border-right: 1px solid #ddd;
  }
  .share-area .list li a {
    width: 35px;
    height: 35px;
    background-size: 120% auto;
  }
}
/*
 * Form
 */
.import {
  color: var(--color-orange);
  font-size: 13px;
}

.star-text {
  margin-bottom: 10px;
}

.summary .star-text {
  display: inline;
  white-space: nowrap;
}
.summary .star-text .star::before {
  color: inherit !important;
}

.star {
  font-size: 0;
  -webkit-box-ordinal-group: 11;
      -ms-flex-order: 10;
          order: 10;
  width: 0;
}
.star::before {
  content: "*";
  display: inline;
  font-size: 16px;
  color: var(--color-orange);
  font-style: normal;
  font-family: "Arial", sans-serif;
}

/* Radio */
.radio-select {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  margin: 0;
  padding: 0.35rem 10px 0.35rem 0;
  font-size: 16px;
  height: var(--h-input);
  line-height: 1.5;
  cursor: pointer;
  font-weight: normal;
}
.radio-select a {
  color: #f08200;
  text-decoration: underline;
}
.radio-select input {
  display: none;
}
.radio-select .select {
  display: inline-block;
  font-weight: normal;
  vertical-align: middle;
}
.radio-select strong {
  display: inline-block;
  font-weight: normal;
  vertical-align: middle;
  position: relative;
  padding: 0 5px 0 30px;
  color: #666;
  font-weight: 400;
  vertical-align: middle;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  z-index: 1;
}
.radio-select .select {
  position: absolute;
  top: 0;
  left: 5px;
  width: 100%;
  height: 100%;
  border-radius: 2px;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
  z-index: 0;
}
.radio-select .select:before, .radio-select .select:after {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 50%;
  -webkit-transition: all 0.25s ease-in-out;
  transition: all 0.25s ease-in-out;
}
.radio-select .select:before {
  opacity: 0;
  z-index: 1;
  top: 26px;
  left: 5px;
  margin: 0;
  width: 11px;
  height: 6px;
  border-bottom: 2px solid #f08200;
  border-left: 2px solid #f08200;
  -webkit-transform: rotate(-51deg);
      -ms-transform: rotate(-51deg);
          transform: rotate(-51deg);
}
.radio-select .select:after {
  top: 50%;
  left: 0;
  margin-top: -10px;
  width: 19px;
  height: 19px;
  background-color: #fff;
  border: 2px solid #aaa;
  border-radius: 3px;
}
.radio-select input:checked + .select:before {
  margin-top: -11px;
  opacity: 1;
}
.radio-select input:checked + .select:after {
  border: 2px solid #f08200;
}
.radio-select input:checked + .select ~ strong {
  color: #f08200;
}

/* Radio */
.radio-select2 {
  display: block;
  position: relative;
  margin: 0 10px 10px 0;
  padding: 0;
  font-size: 16px;
  min-height: var(--h-input);
  cursor: pointer;
  font-weight: normal;
}
.radio-select2 input {
  display: none;
}
.radio-select2 .select {
  display: inline-block;
  font-weight: normal;
  vertical-align: middle;
}
.radio-select2 strong {
  display: inline-block;
  font-weight: normal;
  vertical-align: middle;
  position: relative;
  white-space: nowrap;
  padding: 1px 10px 0 10px;
  color: #666;
  border-radius: var(--radius-input);
  line-height: var(--h-input);
  font-weight: 400;
  vertical-align: middle;
  z-index: 1;
}
.radio-select2 .select {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--radius-input);
  background-color: #fff;
  border: 1px solid #ddd;
  z-index: 0;
}
.radio-select2 .select:before {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #f08200;
  border-radius: var(--radius-input);
  opacity: 0;
}
.radio-select2 input:checked + .select {
  border-color: #f08200;
}
.radio-select2 input:checked + .select:before {
  opacity: 1;
}
.radio-select2 input:checked + .select ~ strong {
  color: #fff;
}

.select-txt {
  display: none;
  padding-left: 5px;
  font-size: 14px;
  line-height: 1.3;
  text-align: center;
  position: relative;
  z-index: 10;
  border-radius: 20px;
  padding: 3px 10px;
  white-space: nowrap;
  background-color: #fff;
  color: var(--color-orange);
  border: 1px solid var(--color-orange);
}
.select-txt.open {
  display: block;
  position: absolute;
  bottom: -20px;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}

/* Address */
.address-select {
  padding-bottom: 15px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 45.5%;
          flex: 0 0 45.5%;
  gap: 0 15px;
}
.address-select .select-wrap {
  min-width: 100px;
  display: inline-block;
  width: calc((100% - 100px) / 2);
  vertical-align: middle;
}
.address-select .zipcode {
  display: inline-block;
  vertical-align: top;
  width: 100px;
  padding: 0 10px;
  height: var(--h-input);
  font-size: 16px;
  border: 1px solid #f4f4f4;
  background-color: #f4f4f4;
  border-radius: var(--radius-input);
  color: #333;
}
.address-select .zipcode:focus {
  border: 1px solid #333;
  background-color: #fff;
}

/* Select */
.select-wrap {
  position: relative;
  height: var(--h-input);
  min-width: 120px;
  overflow: hidden;
  vertical-align: middle;
  cursor: pointer;
  border: 1px solid #f4f4f4;
  background-color: #f4f4f4;
  border-radius: var(--radius-input);
  color: #333;
}
.select-wrap:focus-within {
  border: 1px solid #333;
  background-color: #fff;
}
.select-wrap select {
  width: 100%;
  padding: 0 35px 0 10px;
  height: var(--h-input);
  font-size: 1rem;
  line-height: var(--h-input);
  background-color: transparent;
  border: none;
  outline: none;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  cursor: pointer;
  color: #333;
}
.select-wrap select option {
  text-shadow: none;
}
.select-wrap select::-ms-expand {
  display: none;
}
.select-wrap:before, .select-wrap:after {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -2px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 5px 0 5px;
  border-color: #2f425d transparent transparent transparent;
}

.input, .textarea {
  display: block;
  padding: 0 10px;
  width: 100%;
  font-size: 16px;
  border-radius: var(--radius-input);
  border: 1px solid #f4f4f4;
  background-color: #f4f4f4;
  color: #333;
}
.input:focus, .textarea:focus {
  border: 1px solid #333;
  background-color: #fff;
}

.input {
  height: var(--h-input);
}

.textarea {
  width: 100%;
  height: 100px;
  padding: 5px 10px;
}

div.input {
  display: block;
  padding: 0.5rem 10px;
  width: 100%;
  min-height: var(--h-input);
  font-size: 16px;
  line-height: 1.5;
}
div.input:focus-within {
  border: 1px solid #333;
  background-color: #fff;
}
div.input a {
  font-size: 15px;
  color: #f08200;
  text-decoration: underline;
}
div.input input {
  border: none;
  background: none;
  min-height: auto;
  padding: 0;
}

/* Form */
.form-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.form-wrap .full {
  display: inline-block;
  width: 100%;
}
.form-wrap .half {
  display: inline-block;
  width: 50%;
}
.form-wrap .half.even .group-box .title {
  padding-left: 12px;
  padding-right: 12px;
  text-align: right;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
.form-wrap .group-box {
  width: 100%;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  padding: 0 0 15px;
}
.form-wrap .group-box .title {
  display: inline-block;
  width: 103px;
  vertical-align: top;
  min-height: var(--h-input);
  line-height: 1.3;
  padding-top: 0.6em;
  padding-bottom: 0;
  padding-right: 10px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  gap: 0 3px;
}
.form-wrap .group-box .title.nowrap {
  white-space: nowrap;
}
.form-wrap .group-box .title.d-column {
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.form-wrap .group-box .title.d-column small {
  display: block;
  margin-bottom: -0.5em;
}
.form-wrap .group-box .title.d-column .star {
  margin-top: -22px;
}
.form-wrap .group-box .main {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  width: calc(100% - 105px);
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  vertical-align: top;
}
.form-wrap .group-box .main.flex-nowrap {
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  gap: 0 15px;
}
.form-wrap .group-box .main.flex-gap {
  gap: 0 15px;
}
.form-wrap .group-box .main.flex-gap .flex-grow {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.form-wrap .group-box .main.flex-gap .flex-grow select {
  width: 100%;
}
.form-wrap .group-box.code .main .input {
  display: inline-block;
  width: calc(100% - 140px);
  vertical-align: middle;
  border-right: none;
}
.form-wrap .group-box.code .main .code-img {
  display: inline-block;
  width: 140px;
  height: var(--h-input);
  vertical-align: middle;
}
.form-wrap .group-box.name .input {
  display: inline-block;
  width: calc(100% - 160px);
  font-size: 16px;
  vertical-align: middle;
}
.form-wrap .group-box.name .sex-box {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-left: 10px;
  width: 160px;
  vertical-align: middle;
}
.form-wrap .group-box.name .sex-box .radio-select:last-child {
  padding-right: 0;
}

.form-wrap.regit .address-select {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
}
.form-wrap.regit .group-box .title {
  width: 95px;
}
.form-wrap.regit .half.even .group-box .title {
  padding-left: 10px;
  padding-right: 10px;
}

.form-wrap.profile .address-select {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
}
.form-wrap.profile .group-box .title {
  width: 70px;
}

@media screen and (min-width: 992px) {
  .full .address-select {
    width: calc((100% - 103px) / 2);
    -ms-flex-preferred-size: calc((100% - 103px) / 2);
        flex-basis: calc((100% - 103px) / 2);
  }
}
@media screen and (max-width: 991px) {
  .full .address-select {
    width: 100%;
    -ms-flex-preferred-size: 100%;
        flex-basis: 100%;
  }
}
@media screen and (min-width: 768px) and (max-width: 991px) {
  .address-select .select-wrap {
    width: calc(50% - 52px);
  }
  .address-select .select-wrap:nth-child(2) {
    width: calc(50% - 100px + 21px);
  }
}
@media only screen and (max-width: 767px) {
  .form-wrap .half {
    display: block;
    width: 100%;
  }
  .form-wrap .half.even .group-box .title {
    padding-left: 0;
    text-align: left;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
  .form-wrap .group-box .main {
    width: 100%;
  }
  .form-wrap .group-box .main.flex-gap {
    display: block;
  }
  .form-wrap .group-box .main.flex-gap > *:not(:last-child) {
    margin-bottom: 10px;
  }
  .form-wrap .group-box .title {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
  .form-wrap.regit .half.even .group-box .title {
    padding-left: 0;
    padding-right: 0;
  }
  .address-select {
    padding-bottom: 5px;
  }
  .address-select .select-wrap {
    display: block;
    margin: 0 0 5px;
    width: 100%;
  }
}
@media only screen and (max-width: 579px) {
  .address-select {
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
  }
}
@media only screen and (max-width: 480px) {
  .form-wrap .group-box {
    display: block;
    padding-bottom: 5px;
  }
  .form-wrap .group-box .title.d-column {
    display: block;
    width: auto;
  }
  .form-wrap .group-box .title.d-column small {
    display: inline;
    margin-bottom: 0;
  }
  .form-wrap .group-box .title.d-column .star {
    margin-top: 0;
  }
}
@media only screen and (max-width: 379px) {
  .address-select {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .address-select .select-wrap {
    display: block;
    margin: 0 0 5px;
    width: 100%;
  }
}
/*
 * 綁定
 */
.form-bind {
  max-width: 400px;
  margin: 0 auto;
}
.form-bind .radio-select {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: auto;
  padding: 0;
  margin-bottom: 20px;
}
.form-bind .radio-select input:checked + .select::before {
  margin-top: -5px;
}
.form-bind .radio-select input:checked ~ strong {
  border-color: var(--color-orange);
  background-color: #fbf2e8;
  padding: 30px 5px 30px 50px;
  font-size: 1.125rem;
}
.form-bind .radio-select strong {
  display: block;
  padding: 20px 5px 20px 50px;
  border: 2px solid #ddd;
  background-color: #f9f9f9;
  border-radius: var(--radius-input);
  position: relative;
  width: 100%;
  text-align: left;
}
.form-bind .radio-select .select {
  z-index: 15;
  position: absolute;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  top: 50%;
  left: 20px;
}
.form-bind .radio-select .select::after {
  margin-top: 0;
  top: 0;
}
.form-bind .radio-select .select::before {
  margin-top: -2px;
  top: 50%;
}
.form-bind .radio-select.new strong {
  font-weight: 600;
  color: #111;
}

.pc .form-bind .radio-select:hover input:not(:checked) ~ strong {
  border-color: #999;
}

.btn-old-box {
  text-align: left;
  padding: 5px;
  border-radius: var(--radius-input);
}
.btn-old-box .full {
  margin: 15px 0;
}
.btn-old-box .input {
  border: 1px solid #ccc;
}
.btn-old-box .input:focus {
  border-color: var(--color-orange);
}
.btn-old-box .group-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.btn-old-box .group-box .title {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 65px;
          flex: 0 0 65px;
}
.btn-old-box .group-box .main {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

@-webkit-keyframes ani_fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes ani_fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* ==========================================
 ##### Pages
========================================== */
/*
 * Product List
 */
.ptags {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  gap: 0 5px;
}

.ptag {
  border-radius: 3px;
  padding: 1px 5px 0 5px;
  display: inline-block;
  font-size: 13px;
  line-height: 1.6;
  font-style: normal;
  font-weight: 500;
  white-space: nowrap;
  color: #fff;
  background-color: var(--color-orange);
}

.recommend-product {
  margin-bottom: 20px;
  background-color: #f5f5f5;
  padding-top: max(var(--gap), 3vh);
  padding-bottom: max(var(--gap), 3vh);
}
.recommend-product .product-list {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.recommend-product .product-list:not(.slick-initialized) .item {
  margin-bottom: var(--gap-list);
}
.recommend-product.related {
  margin-bottom: 0;
  background-color: #eee;
}

.product-list {
  position: relative;
  --num-per-row: 4;
}
.product-list.slick-initialized {
  margin-left: calc(var(--gap) * -1);
  margin-right: calc(var(--gap) * -1);
}
.product-list.slick-initialized .slick-list {
  padding-left: calc(var(--gap) - var(--gap-list) * 0.5);
  padding-right: calc(var(--gap) - var(--gap-list) * 0.5);
}
.product-list.slick-initialized .slick-slide {
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
  padding-left: calc(var(--gap-list) * 0.5);
  padding-right: calc(var(--gap-list) * 0.5);
  padding-top: 2px;
}
.product-list.slick-initialized .slick-prev {
  left: 2px;
}
.product-list.slick-initialized .slick-next {
  right: 2px;
}
.product-list:not(.slick-initialized) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 0 calc(var(--gap-list) - 2px);
  width: calc(100% + var(--gap-list));
}
.product-list:not(.slick-initialized) .item {
  overflow: clip;
  -webkit-box-flex: 0;
      -ms-flex: 0 0 calc(100% / var(--num-per-row) - var(--gap-list));
          flex: 0 0 calc(100% / var(--num-per-row) - var(--gap-list));
  margin-bottom: calc(var(--gap) + var(--gap-list));
}
.product-list .item {
  position: relative;
  display: inline-block;
  vertical-align: top;
}
.product-list .img {
  max-width: 320px;
  display: block;
  position: relative;
}
.product-list .img img {
  position: relative;
  z-index: 0;
  max-width: none !important;
  height: 100% !important;
  width: 100% !important;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  border-radius: var(--radius-box);
  border: 1px solid #eee;
  aspect-ratio: 1;
  -webkit-transition: border 0.3s, -webkit-transform 0.3s;
  transition: border 0.3s, -webkit-transform 0.3s;
  transition: border 0.3s, transform 0.3s;
  transition: border 0.3s, transform 0.3s, -webkit-transform 0.3s;
}
.product-list .img .ptags {
  position: absolute;
  z-index: 5;
  top: 10px;
  left: 10px;
  max-width: calc(100% - 20px);
}
.product-list .text-box {
  position: relative;
  display: block;
  padding: 10px 0;
  text-align: left;
}
.product-list .title {
  padding: 0;
  margin: 5px 0;
  color: #333;
  font-size: 16px;
  display: block;
  line-height: 1.5;
}
.product-list .price {
  line-height: 1.2;
  text-align: center;
  margin-top: 5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: 0 10px;
}
.product-list .price .new {
  color: #444;
  font-size: 17px;
  font-weight: bold;
}
.product-list .price .old {
  color: #d1d1d1;
  font-size: 14px;
  text-decoration: line-through;
}
.product-list .type {
  color: #999;
  font-size: 15px;
  display: block;
  font-style: normal;
  line-height: 1.2;
}
.product-list .quick-btns {
  z-index: 10;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  pointer-events: none;
  opacity: 0;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  gap: 5px 8px;
  position: absolute;
  left: 50%;
  bottom: 18px;
  -webkit-transform: translate(-50%, 0);
      -ms-transform: translate(-50%, 0);
          transform: translate(-50%, 0);
}
.product-list .quick-btns button.btn-control:hover,
.product-list .quick-btns a.btn-control:hover {
  -webkit-transform: translateY(-3px);
      -ms-transform: translateY(-3px);
          transform: translateY(-3px);
  opacity: 1;
}
.product-list .quick-btns button.btn-control:hover.addcart,
.product-list .quick-btns a.btn-control:hover.addcart {
  border: 2px solid #fff;
  -webkit-box-shadow: 0 0 0 1px var(--color-orange);
          box-shadow: 0 0 0 1px var(--color-orange);
}
.product-list .quick-btns button.btn-control:hover.track,
.product-list .quick-btns a.btn-control:hover.track {
  border: 2px solid #fff;
  -webkit-box-shadow: 0 0 0 1px var(--color-dark);
          box-shadow: 0 0 0 1px var(--color-dark);
}
.product-list .quick-btns .btn-control {
  -webkit-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
  display: inline-block;
  vertical-align: top;
  height: auto;
  min-width: 32px;
  line-height: 28px;
  padding: 0 10px;
  border-radius: 50px;
  vertical-align: top;
  border: 2px solid transparent;
  font-size: 12px;
  color: #fff;
  padding-bottom: 1px;
  white-space: nowrap;
  opacity: 0.8;
}
.product-list .quick-btns .btn-control.addcart {
  background-color: var(--color-orange);
}
.product-list .quick-btns .btn-control.addcart::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 18px;
  height: 18px;
  margin-right: 5px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-shopping-cart-plus' width='44' height='44' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23fff' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M4 19a2 2 0 1 0 4 0a2 2 0 0 0 -4 0' /%3E%3Cpath d='M12.5 17h-6.5v-14h-2' /%3E%3Cpath d='M6 5l14 1l-.86 6.017m-2.64 .983h-10.5' /%3E%3Cpath d='M16 19h6' /%3E%3Cpath d='M19 16v6' /%3E%3C/svg%3E") no-repeat 0 0/contain;
}
.product-list .quick-btns .btn-control.lack {
  background-color: rgba(0, 0, 0, 0.5);
}
.product-list .quick-btns .btn-control.track {
  background-color: var(--color-dark);
}
.product-list .quick-btns .btn-control.track::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 18px;
  height: 18px;
  margin-right: 5px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-2 -4 24 24' width='28' fill='currentColor'%3E%3Cpath d='M3.636 7.208L10 13.572l6.364-6.364a3 3 0 1 0-4.243-4.243L10 5.086l-2.121-2.12a3 3 0 0 0-4.243 4.242zM9.293 1.55l.707.707.707-.707a5 5 0 1 1 7.071 7.071l-7.07 7.071a1 1 0 0 1-1.415 0l-7.071-7.07a5 5 0 1 1 7.07-7.071z'%3E%3C/path%3E%3C/svg%3E") no-repeat 0 0/contain;
}

.pc .product-list .item:hover .img img {
  -webkit-transform: scale(1.02);
      -ms-transform: scale(1.02);
          transform: scale(1.02);
  border: 1px solid #dcdcdc;
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
          box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.pc .product-list .item:hover .quick-btns {
  pointer-events: auto;
  opacity: 1;
}
.pc .product-list .item:hover .title {
  color: var(--color-orange);
}

.i-product .product-list {
  opacity: 0;
  -webkit-transition: opacity 0.5s 0.25s;
  transition: opacity 0.5s 0.25s;
}
.i-product .product-list .slick-track {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
}
.i-product .product-list:not(.slick-initialized) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}
.i-product .product-list:not(.slick-initialized) .item {
  opacity: 0;
}

.i-product .product-list.slick-initialized {
  opacity: 1;
}
.i-product .product-list.slick-initialized.is-less .slick-track {
  margin: 0;
}

@media only screen and (min-width: 640px) {
  .i-product .product-list.slick-initialized .slick-slide:not(.slick-active), .recommend-product .product-list.slick-initialized .slick-slide:not(.slick-active) {
    opacity: 0;
  }
}
@media only screen and (max-width: 991px) {
  .product-list {
    --num-per-row: 3;
  }
  .recommend-product .product-list {
    --num-per-row: 4;
  }
}
@media only screen and (max-width: 639px) {
  .ptag {
    font-size: 11px;
  }
  .i-product .product-list.slick-initialized .slick-list, .recommend-product .product-list.slick-initialized .slick-list {
    padding-left: var(--gap-list) !important;
  }
  .i-product .product-list.slick-initialized .slick-prev, .recommend-product .product-list.slick-initialized .slick-prev {
    left: calc(var(--gap) * 0.5);
  }
  .i-product .product-list.slick-initialized .slick-next, .recommend-product .product-list.slick-initialized .slick-next {
    right: calc(var(--gap) * 0.5);
  }
}
@media only screen and (max-width: 579px) {
  .product-list {
    --num-per-row: 2;
  }
  .recommend-product .product-list {
    --num-per-row: 2;
  }
  .recommend-product .product-list:not(.slick-initialized) {
    width: auto;
    margin-left: calc(var(--gap-list) * -1);
    margin-right: calc(var(--gap-list) * -1);
  }
}
/*
 * Product Layout
 */
#product .btn-style {
  --h-input: 50px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 0 10px;
  -webkit-box-flex: 0;
      -ms-flex: 0 1 50%;
          flex: 0 1 50%;
}
#product .big-pic {
  aspect-ratio: 1;
  overflow: hidden;
  margin: 0 auto;
  max-width: 460px;
  line-height: 0;
}
#product .big-pic:not(.slick-initialized) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  gap: var(--gap);
  white-space: nowrap;
}
#product .big-pic .slick-track {
  white-space: nowrap;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}
#product .slick-track {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  white-space: nowrap;
}
#product .small-pic {
  position: relative;
  margin: 20px auto 0 auto;
  max-width: 460px;
  line-height: 0;
  padding: 0 50px;
  white-space: nowrap;
}
#product .small-pic:not(.slick-initialized) {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  gap: var(--gap);
  white-space: nowrap;
}
#product .small-pic .slick-track {
  white-space: nowrap;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}
#product .small-pic .item {
  padding: 5px;
  max-width: 100px;
  display: inline-block;
  vertical-align: top;
}
#product .small-pic .item img {
  max-width: 100%;
  border: 1px solid #eee;
  cursor: pointer;
}
#product .small-pic .slick-current .item img {
  border-color: #aaa;
}
#product .small-pic .slick-slide:focus {
  outline: none;
}
#product .title-wrap {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 2px solid #555;
}
#product .title-wrap .type {
  color: var(--color-orange);
  font-size: 15px;
  line-height: 1.2;
  font-style: normal;
}
#product .title-wrap .title {
  display: block;
  margin: 0;
  padding: 0;
  color: #444;
  font-size: clamp(25px, 1.5vw, 30px);
}
#product .top-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  margin-bottom: var(--gap);
}
#product .top-area .pic-wrap {
  display: inline-block;
  width: 50%;
  vertical-align: top;
  text-align: center;
}
#product .top-area .text-wrap {
  display: inline-block;
  width: 50%;
  vertical-align: top;
}
#product .top-area .text-wrap .button-box {
  max-width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0 5px;
}
#product .top-area .text-wrap .button-box .btn-style {
  width: 50%;
  margin: 0;
}
#product .top-area .text-wrap .info-box {
  padding: 10px 0 20px;
  margin-bottom: 20px;
  border-bottom: 1px solid #d0d0d0;
}
#product .top-area .text-wrap .info-box li {
  padding: 3px 0 3px 30px;
  position: relative;
  font-size: 1rem;
  line-height: 1.5;
}
#product .top-area .text-wrap .info-box li:before {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  width: 8px;
  height: 8px;
  background-color: #fbc98e;
  border-radius: 50%;
}
#product .top-area .text-wrap .function-box .box {
  padding: 0 0 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
#product .top-area .text-wrap .function-box .box .title {
  display: inline-block;
  padding-left: 10px;
  width: 120px;
  vertical-align: top;
  font-size: 16px;
  padding-top: 0.35rem;
  line-height: 1.5;
}
#product .top-area .text-wrap .function-box .box .title.color {
  padding-top: 0.75rem;
}
#product .top-area .text-wrap .function-box .box .main {
  display: inline-block;
  width: calc(100% - 120px);
  vertical-align: top;
}
#product .top-area .text-wrap .function-box .box .new-price {
  color: var(--color-orange);
  font-size: 28px;
  line-height: 37px;
  font-weight: bold;
  white-space: nowrap;
}
#product .top-area .text-wrap .function-box .box .old-price {
  color: #999;
  font-size: 15px;
  text-decoration: line-through;
  line-height: 37px;
}

@media only screen and (max-width: 991px) {
  #product .small-pic {
    margin-top: 10px;
  }
  #product .down-area {
    display: block;
    margin-top: 0;
  }
  #product .down-area .pic-wrap {
    display: block;
    margin: 0 auto;
    width: 100%;
  }
  #product .down-area .text-wrap {
    padding-top: 20px;
    display: block;
    width: 100%;
  }
  #product .down-area .text-wrap .info-box {
    padding: 20px 0 20px;
    margin-bottom: 20px;
    border-top: 1px solid #d0d0d0;
  }
}
@media only screen and (min-width: 768px) {
  #product .title-wrap.hide-mb {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  #product .btn-style {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100%;
            flex: 0 0 100%;
    --h-input: 45px;
  }
  #product #gotop {
    bottom: calc(var(--h-input) + 35px);
  }
  #product .small-pic {
    --h-input: 30px;
    display: inline-block;
    margin-top: 10px;
    padding: 0 20px;
    margin-left: calc(var(--gap) * -1);
    margin-right: calc(var(--gap) * -1);
  }
  #product .title-wrap.hide-pc {
    display: none;
  }
  #product .top-area {
    display: block;
  }
  #product .top-area .pic-wrap {
    display: block;
    width: 100%;
    text-align: center;
  }
  #product .top-area .text-wrap {
    display: block;
    width: 100%;
  }
  #product .top-area .button-box {
    position: fixed;
    z-index: 780;
    bottom: 0;
    left: 0;
    width: 100%;
    gap: 0;
    padding: 5px;
    background-color: #fff;
  }
  #product .top-area .button-box .btn-style {
    width: auto;
  }
  #product .title-wrap {
    padding-bottom: 10px;
    margin-bottom: 0;
  }
  #product .title-wrap .type {
    padding-bottom: 3px;
  }
  #product .title-wrap .title {
    font-size: 22px;
  }
  #product .button-box.mb-hide {
    display: none;
  }
}
@media only screen and (max-width: 579px) {
  #product .big-pic, #product .small-pic {
    max-width: 100%;
  }
  #product .small-pic .slick-prev {
    left: -15px;
  }
  #product .small-pic .slick-next {
    right: -15px;
  }
  #product .small-pic .item {
    padding: 1px;
  }
}
@media only screen and (max-width: 449px) {
  #product .top-area .text-wrap .function-box .box {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  #product .top-area .text-wrap .function-box .box .title {
    width: 100px;
    padding-left: 0;
  }
  #product .top-area .text-wrap .function-box .box .title.color + .main {
    width: 100%;
  }
  #product .top-area .text-wrap .function-box .box .main {
    width: calc(100% - 100px);
  }
}
/*
 * 加購配件
 */
.extension-area {
  margin: var(--gap-list-lg) 0 var(--gap);
  padding: var(--gap-list);
  background-color: #fff;
  background-size: 4px 4px;
  background-image: repeating-linear-gradient(-45deg, #f7e0c5 0, #f7e0c5 0.4px, #fff 0, #fff 50%);
}
.extension-area .top-bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 20px;
}
.extension-area .top-bar .icon {
  color: #fff;
  position: absolute;
  left: 0;
  top: 50%;
  width: 30px;
  height: 30px;
  background-color: var(--color-orange);
  border-radius: 50%;
  padding: 5px;
  margin-top: -15px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.extension-area .top-bar .icon svg {
  display: inline-block;
  vertical-align: middle;
}
.extension-area .top-bar .title {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  position: relative;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
  padding: 0 15px 0 40px;
  font-size: 24px;
  color: var(--color-dark);
}
.extension-area .top-bar .input {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  background-color: #fff;
  border: 1px solid var(--color-orange);
  padding: 0;
  width: 250px;
}
.extension-area .top-bar .input:focus-within {
  border-color: var(--color-orange-dark);
}
.extension-area .top-bar .input input {
  display: block;
  padding: 0 10px;
  height: var(--h-input);
  width: calc(100% - var(--h-input));
}
.extension-area .top-bar .input button {
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  display: inline-block;
  width: var(--h-input);
  height: var(--h-input);
  border: none;
  vertical-align: top;
  padding: 8px;
  color: var(--color-orange);
  background-color: transparent;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.extension-area .top-bar .input button svg {
  width: 100%;
  display: inline-block;
  vertical-align: middle;
}
.extension-area .top-bar .info-txt {
  display: inline-block;
  position: relative;
  padding-left: 45px;
  width: calc(100% - 480px);
  color: var(--color-orange-dark);
  font-size: 17px;
  vertical-align: middle;
}
.extension-area .top-bar .info-txt:before {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 7px;
  left: 25px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 8px;
  border-color: transparent transparent transparent var(--color-orange-dark);
}
.extension-area .main-wrap {
  padding: 0 var(--gap);
  background-color: #fff;
}
.extension-area .main-wrap .item {
  padding: 5px;
  border-bottom: 1px solid #ddd;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.extension-area .main-wrap .item:last-child {
  border-bottom: none;
}
.extension-area .main-wrap .item div {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
}
.extension-area .main-wrap .item .img {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  width: 100px;
}
.extension-area .main-wrap .item .img a {
  display: block;
}
.extension-area .main-wrap .item .title {
  font-size: 17px;
  text-align: left;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.extension-area .main-wrap .item .price {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  width: 180px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  gap: 0 5px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.extension-area .main-wrap .item .price .new {
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
  color: var(--color-orange);
  font-size: 24px;
  font-weight: bold;
}
.extension-area .main-wrap .item .price .old {
  white-space: nowrap;
  display: inline-block;
  padding-left: 10px;
  vertical-align: middle;
  color: #999;
  font-size: 15px;
  text-decoration: line-through;
}
.extension-area .main-wrap .item .button {
  text-align: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  width: 120px;
  padding-left: 15px;
  white-space: nowrap;
}
.extension-area .main-wrap .item .button button {
  -webkit-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  line-height: 30px;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 30px;
  height: 30px;
  text-align: center;
  border: none;
  padding: 5px;
  border-radius: var(--radius-input);
  color: #666;
  border: 1px solid #aaa;
}
.extension-area .main-wrap .item .button button svg {
  display: inline-block;
}
.extension-area .main-wrap .item .button button:hover {
  border-color: var(--color-orange);
  background-color: var(--color-orange);
  color: #fff;
}
.extension-area .main-wrap .item .button .disabled {
  color: #888;
}

@media only screen and (max-width: 1399px) {
  .extension-area {
    margin: var(--gap-list) 0;
  }
  .extension-area .top-bar {
    margin-bottom: 10px;
  }
  .extension-area .main-wrap .item .button {
    width: 80px;
  }
}
@media only screen and (max-width: 991px) {
  .extension-area .top-bar .title {
    font-size: 18px;
  }
  .extension-area .main-wrap .item .title {
    font-size: 16px;
  }
  .extension-area .main-wrap .item .price {
    width: auto;
  }
  .extension-area .main-wrap .item .price .new {
    font-size: 18px;
  }
}
@media only screen and (max-width: 767px) {
  .extension-area .top-bar {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  .extension-area .top-bar .input {
    width: calc(100% - 128px);
  }
  .extension-area .top-bar .info-txt {
    display: block;
    width: 100%;
    padding-left: 25px;
    margin-top: 10px;
  }
  .extension-area .top-bar .info-txt:before {
    left: 8px;
  }
  .extension-area .main-wrap .item {
    position: relative;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    padding: 10px 10px 10px 100px;
    min-height: 90px;
  }
  .extension-area .main-wrap .item .img {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 80px;
    display: block;
    margin: 0;
  }
  .extension-area .main-wrap .item .title {
    display: block;
    width: 100%;
    padding: 10px 0;
  }
  .extension-area .main-wrap .item .price {
    width: calc(100% - 80px);
  }
}
/*
 * 置底加入購物車
 */
#add-cart-fixed {
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  position: fixed;
  bottom: 140px;
  right: 20px;
  width: 50px;
  height: 50px;
  z-index: 9;
  border-radius: 25px;
  background-color: rgba(240, 68, 0, 0.9);
  overflow: hidden;
}
#add-cart-fixed a {
  display: block;
  width: 150px;
}
#add-cart-fixed span {
  position: relative;
  margin-left: 9px;
  display: inline-block;
  vertical-align: middle;
  width: 30px;
  height: 29px;
  background: url("../images/icon_cart2.png") 0 bottom no-repeat;
  background-size: 30px 29px;
}
#add-cart-fixed span:before, #add-cart-fixed span:after {
  pointer-events: none;
  content: "";
  z-index: 2;
  position: absolute;
  background-color: #fff;
}
#add-cart-fixed span:before {
  width: 10px;
  height: 2px;
  top: 1px;
  right: 7px;
}
#add-cart-fixed span:after {
  width: 2px;
  height: 10px;
  top: -3px;
  right: 11px;
}
#add-cart-fixed strong {
  display: inline-block;
  margin-left: 10px;
  font-size: 15px;
  color: #fff;
  vertical-align: middle;
  line-height: 50px;
}
#add-cart-fixed .num {
  display: block;
  position: absolute;
  top: 0;
  right: 5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #fff;
  color: #333;
  font-size: 14px;
  z-index: 10;
}
#add-cart-fixed:hover {
  width: 150px;
  padding-left: 6px;
  background-color: rgb(240, 68, 0);
}

/*
 * Spec color
 */
.pv-spec {
  margin-left: -3px;
  margin-right: -3px;
}
.pv-spec a {
  display: inline-block;
  vertical-align: top;
  position: relative;
  margin: 3px;
  padding: 3px;
  text-align: center;
  border: 1px solid transparent;
}
.pv-spec a span {
  display: inline-block;
  min-width: 45px;
  line-height: 43px;
  border: 1px solid #ddd;
  background-color: #fff;
  color: #666;
  font-family: 0.9375rem;
}
.pv-spec a.disabled {
  cursor: not-allowed;
}
.pv-spec a.disabled span {
  background-color: #ddd;
  color: #fff;
}
.pv-spec a.disabled::before {
  content: "";
  pointer-events: none;
  z-index: 3;
  position: absolute;
  height: 133%;
  width: 1px;
  background: #fff;
  top: 1px;
  left: 1px;
  -webkit-transform-origin: left top;
      -ms-transform-origin: left top;
          transform-origin: left top;
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.pv-spec a.current {
  border-color: #313131;
}
.pv-spec a.current span {
  color: #fff;
  background-color: #313131;
  border-color: transparent;
}
.pv-spec a:hover:not(.current):not(.disabled) {
  border-color: #ccc;
}
.pv-spec a:hover:not(.current):not(.disabled) span {
  border-color: transparent;
}
.pv-spec label {
  display: inline-block;
  vertical-align: top;
  position: relative;
  margin: 3px;
  padding: 3px;
  cursor: pointer;
}
.pv-spec label input {
  outline: none;
  z-index: -100 !important;
  width: 1px !important;
  height: 1px !important;
  clip: rect(1px, 1px, 1px, 1px);
  position: absolute;
  opacity: 0;
}
.pv-spec label input + span {
  display: inline-block;
  vertical-align: top;
  min-width: 37px;
  line-height: 35px;
  white-space: nowrap;
  text-align: center;
  border: 1px solid #ddd;
  background-color: #fff;
  color: #888;
  border-radius: 0;
}
.pv-spec label input + span::after {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border: 1px solid transparent;
}
.pv-spec label input:hover:not(:checked):not([disabled]) + span {
  border-color: transparent;
}
.pv-spec label input:hover:not(:checked):not([disabled]) + span::after {
  border-color: #ccc;
}
.pv-spec label input:checked + span {
  color: #fff;
  border-color: transparent;
  background-color: #313131;
}
.pv-spec label input:checked + span::after {
  border-color: #313131;
}
.pv-spec label input[disabled] + span {
  color: #fff;
  border-color: #ddd;
  background-color: #ddd;
  cursor: not-allowed;
}
.pv-spec label input[disabled] + span::before {
  content: "";
  pointer-events: none;
  z-index: 3;
  position: absolute;
  height: 133%;
  width: 1px;
  background: #fff;
  top: 1px;
  left: 1px;
  -webkit-transform-origin: left top;
      -ms-transform-origin: left top;
          transform-origin: left top;
  -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.pv-spec.color img {
  max-width: 35px;
}
.pv-spec.color a {
  padding: 2px;
}
.pv-spec.color a span {
  font-size: 0;
  border-color: transparent;
  line-height: 0;
}
.pv-spec.color a.current span {
  background-color: transparent;
  border-color: transparent;
}
.pv-spec.color a.disabled {
  display: none !important;
}
.pv-spec.color label {
  padding: 2px;
}
.pv-spec.color label input + span {
  border-color: transparent;
  line-height: 0;
  font-size: 0;
}
.pv-spec.color label input:checked + span {
  background-color: transparent;
  border-color: transparent;
}
.pv-spec.color label input[disabled] + span {
  display: none !important;
}

/*
 * 優惠活動提示
 */
.link-promo {
  margin: 8px 0;
  padding: 3px 8px;
  background-color: #f2f2f2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  font-size: 14px;
  position: relative;
  width: 100%;
  gap: 0 0.35em;
  border-left: 3px solid var(--color-orange);
}
.link-promo a {
  display: inline-block;
  color: var(--color-orange);
}
.link-promo a:hover {
  text-decoration: underline;
  color: var(--color-orange);
}

/* ==== 追加2024/03/27 活動 ==== */
.activity .subject {
  font-size: clamp(25px, 1.5vw, 30px);
  color: #000;
}
.activity .promotion-brief {
  margin-bottom: 20px;
}
.activity .product-list .title {
  line-height: 1.4;
}
.activity .state {
  border: #ddd solid 1px;
  border-top-width: 2px;
  border-radius: 8px;
  overflow: hidden;
}
.activity .state .qu-all {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 12px 20px;
  font-size: 1.0625rem;
  color: #000;
  font-weight: bold;
  border-radius: 8px 8px 0 0;
  background-color: #f5f5f5;
  overflow: hidden;
}
.activity .state .qu-all p {
  margin-bottom: 0;
  line-height: 1.4;
}
.activity .state .qu-all p .qa {
  padding: 0 8px;
  font-size: 1.125rem;
  color: var(--color-orange);
}
.activity .state .qu-all p br {
  display: none;
}
.activity .state .qu-all .btn-style2 {
  display: inline-block;
}
.activity .state .box {
  padding: 30px max(2.5vw, 15px) 0;
}
.activity .state .box .no-data {
  padding: 30px 0;
  font-size: 18px;
  color: #888;
  text-align: center;
}
.activity .state .product-list {
  --num-per-row: 6;
}
.activity .state .product-list .item {
  margin-bottom: var(--gap);
}
.activity .state .product-list .item .del {
  position: absolute;
  z-index: 2;
  top: 1px;
  right: 1px;
  width: 28px;
  height: 28px;
  border-radius: 0 var(--radius-box) 0 5px;
  background-color: var(--color-orange);
}
.activity .state .product-list .item .del i {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  background: url(../images/icon_del.svg) no-repeat 0 0;
  background-size: cover;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.activity .state .product-list .text-box {
  padding: 5px 0;
}
.activity .state .product-list .title, .activity .state .product-list .price .new {
  font-size: 15px;
}
.activity .state .product-list .title {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.activity .state .product-list .qu {
  margin-top: 5px;
  font-size: 14px;
  color: #888;
}
.activity .area-prod:not(:last-child) {
  margin-bottom: 2.5vw;
}
.activity .area-prod .box-ti {
  margin-bottom: max(3vw, 30px);
  padding-bottom: 10px;
  font-size: 22px;
  color: var(--color-orange);
  font-weight: bold;
  line-height: 1;
  border-bottom: var(--color-orange) solid 2px;
}
.activity .area-prod .product-list {
  --num-per-row: 5;
}
.activity .area-prod .product-list .item .selected {
  display: none;
  pointer-events: none;
  position: absolute;
  z-index: 5;
  top: 10px;
  left: 10px;
  width: 32px;
  height: 32px;
  opacity: 0;
  border-radius: 100%;
  background-color: var(--color-orange);
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
}
.activity .area-prod .product-list .item .selected i {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  background: url(../images/icon_check.svg) no-repeat 0 0;
  background-size: cover;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.activity .area-prod .product-list .item.is-add .selected {
  display: block;
  pointer-events: auto;
  opacity: 1;
}
.activity .area-prod .product-list .operate {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-top: 10px;
}
.activity .area-prod .product-list .wan-spinner {
  min-width: 100px;
}
.activity .area-prod .product-list .wan-spinner .minus, .activity .area-prod .product-list .wan-spinner .plus {
  width: calc(var(--h-input) - 10px);
  height: calc(var(--h-input) - 10px);
}
.activity .area-prod .product-list .wan-spinner input {
  height: calc(var(--h-input) - 10px);
}
.activity .area-prod .product-list .btn-use {
  margin-left: 5px;
  width: 60px;
  height: calc(var(--h-input) - 10px);
  font-size: 15px;
  color: #fff;
  text-align: center;
  line-height: calc(var(--h-input) - 10px);
  border-radius: 4px;
  background-color: #333;
}
.activity .area-prod .product-list .btn-use:hover {
  background-color: var(--color-orange);
}
.activity .area-prod .product-list .btn-use.sold-out {
  background-color: #bbb;
}
.activity .btn-wrap {
  text-align: center;
}
.activity #gotop {
  display: none;
}

@media (max-width: 991px) {
  .activity .state .product-list {
    --num-per-row: 5;
  }
  .activity .area-prod .product-list {
    --num-per-row: 4;
  }
}
@media (max-width: 767px) {
  .activity #footer {
    padding-bottom: 66px;
  }
  .activity .state {
    position: fixed;
    z-index: 5;
    left: 0;
    bottom: 0;
    width: 100%;
    border: none;
    border-radius: 0;
    -webkit-box-shadow: 0 -1px 12px rgba(0, 0, 0, 0.15);
            box-shadow: 0 -1px 12px rgba(0, 0, 0, 0.15);
    background-color: #f0f0f0;
    overflow: visible;
  }
  .activity .state .operate {
    position: absolute;
    z-index: 5;
    top: -24px;
    right: 0;
    width: 32px;
    height: 32px;
    cursor: pointer;
    border-radius: 0px 0 8px 0;
    background-color: #fff;
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  .activity .state .operate::before, .activity .state .operate::after {
    display: block;
    content: "";
    position: absolute;
    top: 55%;
    width: 30%;
    height: 1.2px;
    background-color: #333;
    -webkit-transform: translateY(-50%) rotate(-45deg);
        -ms-transform: translateY(-50%) rotate(-45deg);
            transform: translateY(-50%) rotate(-45deg);
  }
  .activity .state .operate::before {
    left: 14.5px;
  }
  .activity .state .operate::after {
    right: 14.5px;
    -webkit-transform: translateY(-50%) rotate(45deg);
        -ms-transform: translateY(-50%) rotate(45deg);
            transform: translateY(-50%) rotate(45deg);
  }
  .activity .state .qu-all {
    padding: 12px 20px 10px;
    font-size: 1rem;
    border-radius: 0;
    background-color: #fff;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(20%, rgb(255, 255, 255)), to(rgb(220, 220, 220)));
    background: linear-gradient(to bottom, rgb(255, 255, 255) 20%, rgb(220, 220, 220) 100%);
  }
  .activity .state .qu-all p {
    line-height: 1.3;
  }
  .activity .state .qu-all p .qa {
    padding: 0 6px;
  }
  .activity .state .qu-all p .mb-hide {
    display: none;
  }
  .activity .state .qu-all .btn-style2 {
    max-width: 150px;
  }
  .activity .state .box {
    display: none;
    padding-top: 15px;
    border-top: #ccc solid 1px;
  }
  .activity .state .product-list {
    --num-per-row: 4;
  }
  .activity .state .product-list .item {
    margin-bottom: 15px;
  }
  .activity .state .product-list .item .del {
    width: 24px;
    height: 24px;
    border-radius: 0 6px 3px;
  }
  .activity .state .product-list .item .del i {
    width: 14px;
    height: 14px;
  }
  .activity .state .product-list .img img {
    border-radius: 6px;
  }
  .activity .state .product-list .text-box {
    display: none;
  }
  .activity .state.is-open .operate::before, .activity .state.is-open .operate::after {
    right: unset;
    left: 50%;
    width: 40%;
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
        -ms-transform: translate(-50%, -50%) rotate(-45deg);
            transform: translate(-50%, -50%) rotate(-45deg);
  }
  .activity .state.is-open .operate::after {
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
        -ms-transform: translate(-50%, -50%) rotate(45deg);
            transform: translate(-50%, -50%) rotate(45deg);
  }
  .activity .state.is-open .qu-all {
    padding: 12px 15px 10px;
  }
  .activity .state.is-open .box {
    display: block;
  }
  .activity .area-prod .product-list {
    --num-per-row: 3;
  }
}
@media (max-width: 639px) {
  .activity.out-wrap {
    overflow: visible;
  }
  .activity .state .qu-all p br {
    display: block;
  }
  .activity .area-tab {
    position: sticky;
    z-index: 10;
    top: 65px;
  }
  .activity .area-prod .product-list {
    --num-per-row: 2;
  }
}
@media (max-width: 499px) {
  .activity .state .qu-all {
    padding: 12px 15px 10px;
  }
}
/*
 * Member Function
 */
.m-box-wrap {
  margin: 0 auto;
  max-width: 1300px;
  padding: 40px 0;
}

.m-box-main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 50px;
  background-color: #fff;
}

@media only screen and (max-width: 1399px) {
  .m-box-wrap {
    padding: 0;
  }
  .m-box-main {
    padding: 0 30px;
  }
}
@media only screen and (max-width: 991px) {
  .m-box-main {
    display: block;
  }
}
@media only screen and (max-width: 767px) {
  .m-box-main {
    padding: 0;
  }
}
/*
 * Member main
 */
#member .block-subhead {
  margin-bottom: 20px;
}
#member.center {
  min-height: 630px;
}
#member.center .summary {
  text-align: center;
  padding: 40px 0;
  font-size: 18px;
}
#member .buttons {
  padding-top: 20px;
}

.m-wrap {
  margin: 0 auto;
  padding: var(--gap);
  border: 1px solid #eee;
}
.m-wrap.cart {
  margin-bottom: 40px;
}

.m-text {
  padding-bottom: 20px;
  font-size: 20px;
  text-align: center;
}

.m-bg {
  background: url("../images/bg_member.jpg");
  background-size: cover;
}

@media only screen and (max-width: 1399px) {
  #member.center {
    min-height: 410px;
  }
  .m-bg {
    background: none;
  }
}
@media only screen and (max-width: 1299px) {
  #member .m-wrap {
    border: none;
    margin-bottom: 0;
    padding-bottom: 20px;
    border-bottom: 1px solid #ddd;
  }
  #member .m-wrap.cart {
    padding-bottom: 10px;
  }
}
@media only screen and (max-width: 991px) {
  #member {
    min-height: 300px;
  }
  #member.center .summary {
    padding: 20px 0;
  }
  #member .buttons {
    margin-top: 10px;
  }
  .m-text {
    font-size: 18px;
  }
}
@media only screen and (max-width: 767px) {
  #member .buttons {
    padding-top: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 10px 15px;
  }
  .m-wrap {
    padding: 0 var(--gap);
  }
  .m-wrap.order-view {
    margin-bottom: 0;
    border-bottom: 1px solid #ddd;
  }
  .m-wrap.cart {
    padding-left: 0;
    padding-right: 0;
  }
  .m-wrap .p-750 {
    padding-left: 0;
    padding-right: 0;
  }
}
@media only screen and (max-width: 639px) {
  #member .buttons > * {
    width: 100%;
  }
}
/*
 * Member Navigation
 */
.member-category {
  padding: 30px 0;
  text-align: center;
}
.member-category .title {
  display: none;
}
.member-category .list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.member-category a {
  display: inline-block;
  width: 25%;
  vertical-align: top;
}
.member-category a .icon {
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: 110px;
  height: 110px;
  background-color: #eee;
  background-position: 0 0;
  background-size: 110px 220px;
  border-radius: 50%;
}
.member-category a .icon.profile {
  background-image: url("../images/member_profile.png");
}
.member-category a .icon.wish {
  background-image: url("../images/member_wish.png");
}
.member-category a .icon.order {
  background-image: url("../images/member_order.png");
}
.member-category a .icon.logout {
  background-image: url("../images/member_logout.png");
}
.member-category a .icon:before {
  opacity: 0;
  pointer-events: none;
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  margin-left: -10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 0 10px;
  border-color: #f08200 transparent transparent transparent;
}
.member-category a .txt {
  display: inline-block;
  padding-left: 10px;
  color: #666;
  font-size: 18px;
  vertical-align: middle;
}
.member-category a.current .icon {
  background-color: #f08200;
  background-position: 0 bottom;
}
.member-category a.current .icon:before {
  opacity: 1;
}
.member-category a:hover .icon {
  background-color: #f08200;
  background-position: 0 bottom;
}

@media only screen and (max-width: 1199px) {
  .member-category a .icon {
    display: block;
    margin: 0 auto 10px;
  }
  .member-category a .txt {
    display: block;
    padding: 0;
  }
}
@media only screen and (max-width: 991px) {
  .member-category {
    padding: 0;
    margin: 10px auto 20px;
    max-width: min(100% - var(--gap) * 2, 400px);
    position: relative;
    z-index: 20;
  }
  .member-category .title {
    margin: 0;
    padding: 0 var(--h-input) 0 0;
    z-index: 5;
    display: block;
    position: relative;
    cursor: pointer;
    border-radius: var(--radius-input);
    background-color: var(--color-orange);
    color: #fff;
  }
  .member-category .title::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    margin-top: -7px;
    right: 15px;
    width: 10px;
    height: 10px;
    -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
    border-style: solid;
    border-color: #fff;
    border-width: 0 0 2px 2px;
  }
  .member-category .title .tw {
    position: relative;
    display: block;
    z-index: 1;
    line-height: var(--h-input);
    padding: 0 15px;
    color: inherit;
    font-size: 16px;
    text-align: left;
  }
  .member-category.open .list {
    display: block;
    pointer-events: auto;
    opacity: 1;
  }
  .member-category .list {
    pointer-events: none;
    opacity: 0;
    display: none;
    position: absolute;
    left: -5px;
    top: -5px;
    width: calc(100% + 10px);
    z-index: 0;
    border-radius: var(--radius-input);
    background-color: #fff;
    border: 1px solid #ddd;
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    padding: calc(var(--h-input) + 10px) 10px 10px;
    max-height: 80vh;
    overflow-y: auto;
  }
  .member-category .list .item {
    display: block;
    width: 100%;
    border-top: 1px solid #ddd;
    padding: 0;
  }
  .member-category .list .item:first-child {
    border-top: none;
  }
  .member-category .list .item.current a {
    color: var(--color-orange);
  }
  .member-category .list a .txt {
    padding: 12px 10px;
    display: block;
    color: var(--color-dark);
    font-size: 15px;
    line-height: 1.6;
    text-align: center;
  }
  .member-category .list a .icon {
    display: none;
  }
}
/*
 * Member Login
 */
.btn-regist {
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  height: var(--h-input);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  white-space: nowrap;
  font-size: 15px;
  padding-left: 10px;
  padding-right: 10px;
  line-height: calc(var(--h-input) - 2px);
  border-radius: var(--radius-input);
  color: #fff;
  background-color: var(--color-orange);
  border: none;
  margin: 0 0 15px;
  padding: 0 10px;
  gap: 0 10px;
}
.btn-regist svg {
  width: 30px;
  height: auto;
}
.btn-regist span {
  width: 130px;
  text-align: left;
}
.btn-regist:hover {
  color: #fff;
  background-color: #ff6912;
}
.btn-regist.fb {
  color: #fff;
  background-color: #1877f2;
}
.btn-regist.fb:hover {
  color: #fff;
  background-color: #1168da;
}
.btn-regist.fb svg {
  width: 13px;
  margin-right: 4px;
  margin-left: 4px;
}
.btn-regist.line {
  color: #fff;
  background-color: #00c300;
}
.btn-regist.line:hover {
  color: #fff;
  background-color: #08b308;
}
.btn-regist.line svg {
  width: 24px;
  margin-right: 3px;
  margin-left: 3px;
}

#login {
  position: relative;
}
#login:before {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -125px;
  width: 1px;
  height: 250px;
  background-color: #eee;
}
#login .left-area, #login .right-area {
  display: inline-block;
  padding: 0 30px;
  width: 50%;
  vertical-align: top;
}
#login .left-area .main-box, #login .right-area .main-box {
  margin: 0 auto;
  max-width: 430px;
}
#login .left-area .links {
  padding-top: 5px;
  text-align: right;
  margin: 0 auto;
  width: 100%;
}
#login .left-area .links a {
  display: inline-block;
  margin: 0 0 0 20px;
  vertical-align: middle;
  font-size: 16px;
  color: #f08200;
}
#login .left-area .links a:first-child {
  position: relative;
  color: #888;
}
#login .left-area .links a:first-child:before {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -8px;
  right: -10px;
  width: 1px;
  height: 16px;
  background-color: #999;
}
#login .left-area .links a:hover {
  text-decoration: underline;
}
#login .left-area .buttons {
  padding-top: 30px;
}
#login .regist-box {
  text-align: center;
}
#login .regist-box .txt {
  padding: 20px 0;
  color: #444;
  font-size: 18px;
}

.login .p-subject {
  padding-bottom: 50px;
}
.login .p-subject .tw {
  font-size: 25px;
}

@media only screen and (max-width: 991px) {
  .login .p-subject {
    padding-bottom: 20px;
  }
  .login .p-subject .tw {
    font-size: 20px;
  }
  #login:before {
    display: none;
  }
  #login .left-area, #login .right-area {
    display: block;
    width: 100%;
  }
  #login .left-area {
    margin-bottom: 30px;
    padding-bottom: 30px;
    border-bottom: 1px solid #eee;
  }
  #login .regist-box {
    padding-top: 0;
    padding-bottom: 20px;
  }
  #login .regist-box .txt {
    padding: 15px 0;
  }
}
@media only screen and (max-width: 767px) {
  #login .left-area .main-box, #login .right-area .main-box {
    max-width: 100%;
  }
  #login .left-area {
    margin-bottom: 30px;
    padding-bottom: 30px;
  }
  #login .left-area .links {
    padding-top: 0;
    text-align: center;
    width: auto;
  }
  #login .left-area .buttons {
    padding-top: 15px;
  }
  #login .form-wrap .group-box .title {
    display: inline-block;
    width: 70px;
  }
  #login .form-wrap .group-box .main {
    width: calc(100% - 70px);
  }
}
@media only screen and (max-width: 480px) {
  #login .form-wrap .group-box .main {
    width: 100%;
  }
}
/*
 * register
 */
#register .agree-box {
  padding: 20px 0 0;
  text-align: center;
}
#register .buttons {
  padding-top: 20px;
}

@media only screen and (min-width: 1400px) {
  #login .p-guide, #register .p-guide {
    width: 100% !important;
    position: absolute !important;
    left: 50% !important;
    -webkit-transform: translateX(-50%) !important;
        -ms-transform: translateX(-50%) !important;
            transform: translateX(-50%) !important;
  }
  #login .p-guide + .p-container, #register .p-guide + .p-container {
    z-index: 0;
    padding-top: 25px;
  }
}
@media only screen and (max-width: 1399px) {
  #login .p-guide + .p-container, #register .p-guide + .p-container {
    padding-top: 0;
  }
}
/*
 * Summary
 */
.flow-summary {
  padding-top: 20px;
  padding-bottom: 20px;
  text-align: center;
  display: block;
  width: 100%;
}
.flow-summary .txt {
  display: block;
  background-color: #fff;
  color: #f08200;
}
.flow-summary .txt .icon {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-right: 10px;
  width: 30px;
  height: 30px;
  background-color: #f08200;
  border-radius: 50%;
}
.flow-summary .txt .icon:before {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  margin-left: -1px;
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background-color: #fff;
}
.flow-summary .txt .icon:after {
  pointer-events: none;
  content: "";
  position: absolute;
  bottom: 6px;
  left: 50%;
  margin-left: -1px;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: #fff;
}
.flow-summary .txt strong {
  display: inline-block;
  vertical-align: middle;
  font-weight: normal;
  padding: 20px 0;
}

@media (min-width: 768px) {
  .buttons + .flow-summary {
    text-align: right;
  }
}
/*
 * Order Table
 */
.order-table table {
  width: 100%;
  border-collapse: inherit;
}
.order-table thead {
  text-align: center;
  color: #fff;
  font-weight: normal;
  line-height: 60px;
  min-height: 60px;
  background-color: #666;
}
.order-table thead td {
  position: relative;
}
.order-table thead td:before {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -8px;
  width: 1px;
  height: 16px;
  background-color: #fff;
}
.order-table thead td:last-child:before {
  display: none;
}
.order-table .status {
  width: 200px;
}
.order-table tbody td {
  text-align: center;
  padding: 30px 5px;
  width: calc((100% - 80px) / 6);
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;
}
.order-table tbody td a.number {
  color: #f08200;
  text-decoration: underline;
}
.order-table tbody td a.number:hover {
  text-decoration: none;
}
.order-table tbody td .none {
  color: #bbb;
}
.order-table tbody td .down {
  color: #222;
}
.order-table tbody td .shipment-num {
  color: #247ed0;
  font-size: 16px;
}
.order-table tbody td .shipment-num span {
  text-decoration: underline;
}
.order-table tbody td .shipment-info a {
  display: inline-block;
  margin-top: 5px;
  padding: 3px 20px;
  background-color: #f08200;
  font-size: 16px;
  color: #fff;
  border-radius: 5px;
  min-width: 100px;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.order-table tbody td .shipment-info a:hover {
  opacity: 0.9;
}
.order-table tbody td:last-child {
  border-right: none;
}
.order-table tbody td.delete {
  width: 80px;
}
.order-table tbody td.delete2 {
  width: 15%;
}
.order-table .product-info {
  padding-left: 20px;
  width: 40%;
  text-align: left;
}
.order-table .product-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.order-table .product-box .img {
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  display: inline-block;
  width: 100px;
  vertical-align: middle;
}
.order-table .product-box .title {
  display: inline-block;
  padding-left: 20px;
  width: calc(100% - 100px);
  vertical-align: middle;
}
.order-table .product-box .title:hover {
  color: #f08200;
  text-decoration: underline;
}
.order-table .product-box .title a {
  display: inline-block;
}

@media only screen and (max-width: 991px) {
  .order-table thead {
    font-size: 16px;
    line-height: 50px;
    min-height: 50px;
  }
  .order-table thead td:before {
    display: none;
  }
  .order-table tbody td {
    padding: 10px 5px;
    font-size: 16px;
  }
  .order-table tbody td .shipment-num span {
    display: block;
  }
  .order-table tbody td.delete {
    width: 50px;
  }
  .order-table tbody .shipment-info span {
    display: none;
  }
  .order-table tbody .shipment-info a {
    display: block;
  }
  .order-table .product-info {
    padding: 10px;
  }
  .order-table .product-box {
    display: block;
  }
  .order-table .product-box .img {
    display: block;
  }
  .order-table .product-box .title {
    display: block;
    padding: 10px 0 0;
    width: 100%;
  }
  .order-table .status {
    width: auto;
  }
}
@media only screen and (max-width: 767px) {
  .order-table table {
    display: block;
  }
  .order-table table thead {
    display: none;
  }
  .order-table table tbody, .order-table table tr, .order-table table td, .order-table table th {
    display: block;
    width: 100%;
  }
  .order-table table tbody {
    position: relative;
    margin-bottom: 10px;
    border: 1px solid #eee;
    border-bottom: none;
  }
  .order-table table tbody td.td-date {
    padding: 8px 10px;
    text-align: center;
    color: #fff;
    background-color: #555;
    text-align: center;
    text-align: left;
  }
  .order-table table tbody td.delete, .order-table table tbody td.delete2 {
    border-bottom: none;
    clear: both;
    position: absolute;
    top: 0;
    right: 0;
    border-bottom: none;
    width: 40px;
    height: 40px;
    background-color: #555;
  }
  .order-table table tbody .shipment-num {
    padding-top: 5px;
    background-color: #fafafa;
    text-align: center;
    display: block;
  }
  .order-table table tbody .shipment-num span {
    display: inline-block;
  }
  .order-table table tbody .shipment-info {
    background-color: #fafafa;
    padding-bottom: 5px;
    text-align: center;
  }
  .order-table table tbody .shipment-info a {
    display: inline-block;
    vertical-align: middle;
  }
  .order-table table tbody .shipment-info span {
    display: inline-block;
    padding: 0 10px;
    vertical-align: middle;
  }
  .order-table table td {
    position: relative;
    border-right: none;
    text-align: right;
  }
  .order-table table td:before {
    position: absolute;
    top: 10px;
    left: 10px;
    pointer-events: none;
    content: attr(data-title);
    color: #666;
    font-size: 16px;
  }
  .order-table table td.add-cart {
    padding: 0;
  }
  .order-table .status {
    padding-bottom: 5px;
  }
  .order-table .product-info {
    padding: 0;
    display: block;
    width: 100%;
  }
  .order-table .product-info a {
    display: block;
  }
  .order-table .product-info .img {
    margin: 0 auto;
    padding: 5px;
    width: 110px;
  }
  .order-table .product-info .title {
    padding: 5px;
    text-align: center;
    background-color: #fafafa;
    border-top: 1px solid #eee;
  }
}
/*
 * Cart Table
 */
.cart-table table {
  width: 100%;
  border-collapse: inherit;
}
.cart-table table thead td {
  white-space: nowrap;
  padding: 10px;
  color: #666;
  text-align: center;
}
.cart-table table thead td:first-child {
  text-align: left;
}
.cart-table table tbody td {
  padding: 10px;
  width: 13%;
  color: #666;
  text-align: center;
  border-top: 1px solid #ddd;
}
.cart-table table tbody.gift-box {
  background-color: #f6f6f6;
}
.cart-table table tbody.gift-box .gift {
  color: #f08200;
  font-size: 16px;
}
.cart-table table .product-info {
  width: 48%;
  text-align: left;
}
.cart-table table .product-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.cart-table table .product-box .img {
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  display: inline-block;
  width: 100px;
  vertical-align: middle;
}
.cart-table table .product-box .title {
  display: inline-block;
  padding-left: 20px;
  width: calc(100% - 100px);
  vertical-align: middle;
}
.cart-table.flow tbody td {
  width: 10%;
}
.cart-table.flow .product-info {
  width: 45%;
}

@media only screen and (max-width: 991px) {
  .cart-table table thead td {
    padding: 10px;
  }
  .cart-table table tbody td {
    padding: 10px;
    width: 17%;
  }
  .cart-table table tbody.gift-box .product-box .img {
    display: inline-block;
  }
  .cart-table table tbody.gift-box .product-box .title {
    display: inline-block;
    width: calc(100% - 100px);
    padding: 0 0 0 20px;
  }
  .cart-table table .product-info {
    width: 32%;
  }
}
@media only screen and (max-width: 767px) {
  .cart-table table {
    display: block;
    width: 100%;
  }
  .cart-table table thead {
    display: none;
  }
  .cart-table table tbody {
    display: block;
    width: 100%;
    border-top: none;
  }
  .cart-table table tbody .is-empty {
    display: none !important;
  }
  .cart-table table tbody tr {
    position: relative;
    display: block;
    width: 100%;
    border-top: 1px solid #ddd;
    border-bottom: none;
    padding-left: 100px;
    padding-bottom: 10px;
    padding-top: 10px;
  }
  .cart-table table tbody tr:last-child {
    border-bottom: none;
  }
  .cart-table table tbody td {
    display: inline-block;
    vertical-align: top;
    position: relative;
    border: none;
    white-space: nowrap;
  }
  .cart-table table tbody td:not(.product-info):not(.delete) {
    width: calc(50% - 10px);
    text-align: left;
    font-size: 15px;
    padding: 0;
  }
  .cart-table table tbody td:not(.product-info):not(.delete):before {
    position: relative;
    content: attr(data-title) "：";
    color: #666;
    font-size: 15px;
    white-space: nowrap;
  }
  .cart-table table tbody td:not(.product-info):not(.delete).is-hide-txt::before {
    display: none !important;
  }
  .cart-table table tbody td:not(.product-info):not(.delete) .wan-spinner {
    width: 100px;
    min-width: auto;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    vertical-align: top;
    margin-top: -0.3em;
  }
  .cart-table table tbody td:not(.product-info):not(.delete) .wan-spinner .minus, .cart-table table tbody td:not(.product-info):not(.delete) .wan-spinner .plus {
    width: 25px;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 25px;
            flex: 0 0 25px;
    height: 26px;
  }
  .cart-table table tbody td:not(.product-info):not(.delete) .wan-spinner input {
    height: 26px;
    min-width: auto !important;
    width: 100%;
  }
  .cart-table table tbody.gift-box .product-box .img {
    display: block;
  }
  .cart-table table tbody.gift-box .product-box .title {
    display: block;
    width: 100%;
    padding: 5px;
  }
  .cart-table table tbody.gift-box .gift-txt {
    display: none;
  }
  .cart-table table .product-info {
    width: 100%;
    margin-left: -100px;
    padding: 0;
  }
  .cart-table table .product-box {
    display: block;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .cart-table table .product-box .img {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 100px;
            flex: 0 0 100px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    align-tracks: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    margin: 0;
    padding: 0;
    width: 100px;
    text-align: center;
  }
  .cart-table table .product-box .img img {
    max-width: 85px;
  }
  .cart-table table .product-box .title {
    display: block;
    width: 100%;
    padding: 0;
  }
  .cart-table table .product-box .title a:first-child {
    margin-bottom: 5px;
  }
  .cart-table.flow .product-info {
    width: calc(100% + 100px);
    margin-bottom: 3px;
  }
  .cart-table.flow tbody {
    position: relative;
  }
  .cart-table.flow tbody td {
    width: 100%;
  }
  .cart-table.flow tbody td.delete {
    border-bottom: none;
    clear: both;
    position: absolute;
    top: 0;
    right: 0;
    border-bottom: none;
    width: 40px;
    height: 40px;
    background-color: #eee;
  }
  .cart-table.flow .btn-delete {
    padding: 0;
    border-color: #666;
  }
  .cart-table.flow .btn-delete span::before, .cart-table.flow .btn-delete span::after {
    background-color: #666;
  }
  .cart-table.flow .btn-delete:hover {
    border-color: var(--color-orange);
  }
  .cart-table.flow .btn-delete:hover span::before, .cart-table.flow .btn-delete:hover span::after {
    background-color: var(--color-orange);
  }
}
@media only screen and (max-width: 449px) {
  .cart-table table tbody td:not(.product-info):not(.delete) {
    width: 100%;
  }
}
/*
 * Cart Layout
 */
.cart-down {
  padding: 10px 30px 0 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  border-top: 1px solid #ddd;
}
.cart-down .left-area {
  display: inline-block;
  width: 50%;
  line-height: 30px;
  vertical-align: top;
}
.cart-down .right-area {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: inline-block;
  width: 50%;
  vertical-align: top;
}
.cart-down .right-area table {
  float: right;
  width: 330px;
  border-collapse: inherit;
}
.cart-down .right-area table th {
  padding: 5px;
  width: 100px;
  font-weight: normal;
}
.cart-down .right-area table td {
  padding: 5px;
  text-align: right;
}
.cart-down .right-area table tbody.total-price th, .cart-down .right-area table tbody.total-price td {
  white-space: nowrap;
  position: relative;
  padding-top: 40px;
}
.cart-down .right-area table tbody.total-price th:before {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 18px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #ddd;
}
.cart-down .right-area table tbody.total-price td {
  color: var(--color-orange);
  font-size: 30px;
  font-weight: bold;
}
.cart-down .right-area table tbody.total-price td:before {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 18px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #ddd;
}

.cart-info .item-wrap {
  margin-bottom: 10px;
  padding-top: 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #ddd;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.cart-info .item-wrap > * {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.cart-info .item-wrap:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}
.cart-info .form-wrap .group-box.pay .input {
  display: inline-block;
  vertical-align: middle;
}
.cart-info .full {
  padding: 20px 20px 10px;
}
.cart-info .half {
  display: inline-block;
  padding: 20px 20px 10px;
  width: 50%;
  vertical-align: top;
}
.cart-info .top-bar {
  position: relative;
  padding-bottom: 10px;
}
.cart-info .top-bar .icon {
  display: inline-block;
  width: 40px;
  vertical-align: middle;
}
.cart-info .top-bar .title {
  display: inline-block;
  padding-left: 10px;
  font-size: 20px;
  vertical-align: middle;
}
.cart-info .recipient-box {
  position: absolute;
  top: 0;
  right: -5px;
}

@media only screen and (max-width: 991px) {
  .cart-down {
    padding: 10px 0 0;
  }
  .cart-down .left-area, .cart-down .right-area {
    display: block;
    width: 100%;
  }
  .cart-down .left-area {
    padding-bottom: 10px;
  }
  .cart-down .right-area {
    padding-top: 10px;
    text-align: right;
  }
  .cart-down .right-area table {
    width: auto;
    min-width: 200px;
  }
  .cart-info .half, .cart-info .full {
    display: block;
    padding: 15px 0;
    width: 100%;
  }
  .cart-info .item-wrap {
    display: block;
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
  }
}
@media only screen and (max-width: 767px) {
  .cart-down {
    padding-top: 0;
    display: block;
  }
  .cart-down .left-area {
    padding: 10px var(--gap);
    border-bottom: 1px solid #ddd;
  }
  .cart-down .right-area table {
    float: none;
    display: table;
    width: 100%;
  }
  .cart-down .right-area table th, .cart-down .right-area table td {
    padding: 3px var(--gap);
  }
  .cart-down .right-area table th {
    width: auto;
  }
  .cart-down .right-area table tbody.total-price th {
    padding-top: 20px;
  }
  .cart-down .right-area table tbody.total-price td {
    padding-top: 25px;
    font-size: 26px;
  }
  .cart-down .right-area table tbody.total-price th:before, .cart-down .right-area table tbody.total-price td:before {
    top: 8px;
  }
  .cart-info {
    padding-top: 20px;
  }
  .cart-info .top-bar {
    padding-top: 10px;
  }
  .cart-info .half, .cart-info .full {
    padding-top: 0;
    padding-bottom: 10px;
  }
  .cart-info .recipient-box {
    top: 8px;
  }
}
/*
 * Coupon 
 */
.coupon-txt {
  font-size: 20px;
  text-align: center;
  padding-bottom: 20px;
  color: #cc302e;
}

.coupon-box {
  padding: 25px 0;
  border-top: 1px solid #ddd;
}
.coupon-box .icon {
  display: inline-block;
  vertical-align: middle;
  width: 55px;
  height: 55px;
  background: url("../images/member_coupon.png");
  background-size: cover;
}
.coupon-box .title {
  display: inline-block;
  vertical-align: middle;
  width: 94px;
  text-align: right;
}
.coupon-box .input {
  display: inline-block;
  margin-left: 10px;
  width: 200px;
  vertical-align: middle;
}
.coupon-box .btn-use {
  white-space: nowrap;
  display: inline-block;
  margin-left: 10px;
  padding: 0 15px;
  height: 40px;
  color: #fff;
  text-align: center;
  border: none;
  line-height: 40px;
  background-color: #666;
  vertical-align: middle;
  border-radius: 5px;
}
.coupon-box.use .input {
  padding: 0 10px;
  height: 40px;
  color: #444;
  text-align: center;
  font-size: 16px;
  border: 1px solid #ddd;
  background-color: #f6f6f6;
  line-height: 40px;
}

@media only screen and (max-width: 767px) {
  .coupon-box {
    padding: 10px var(--gap);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .coupon-box .title {
    width: 90px;
    font-size: 16px;
  }
  .coupon-box .input {
    width: calc(100% - 220px);
  }
}
@media only screen and (max-width: 379px) {
  .coupon-box {
    display: block;
  }
  .coupon-box .input {
    margin-left: 0;
    width: calc(100% - 77px);
  }
}
/*
 * Cart Finish
 */
.finish-text {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ddd;
  font-size: 16px;
}
.finish-text a {
  color: #f08200;
  text-decoration: underline;
}

.finish-table {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ddd;
}
.finish-table .item {
  padding: 3px 0;
}
.finish-table .item .title {
  display: inline-block;
  width: 90px;
  font-size: 16px;
  vertical-align: middle;
}
.finish-table .item .main {
  display: inline-block;
  width: calc(100% - 90px);
  font-size: 16px;
  vertical-align: middle;
}

/*
 * Cart Steps
 */
.step-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  margin: 0 auto;
  max-width: 1300px;
  background: url("../images/bg_box2.jpg");
}
.step-wrap .item {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  padding: 25px 10px 25px 30px;
  width: 25%;
  vertical-align: top;
}
.step-wrap .item:before {
  opacity: 0;
  pointer-events: none;
  content: "";
  position: absolute;
  top: 50%;
  right: -10px;
  margin-top: -10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent #f5a84d;
}
.step-wrap .item .icon {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  display: inline-block;
  vertical-align: middle;
  width: 80px;
  height: 80px;
  border: 1px solid #fff;
  border-radius: 50%;
  background-position: 0 0;
  background-size: 80px 160px;
}
.step-wrap .item .icon.step1 {
  background-image: url("../images/step_icon1.png");
}
.step-wrap .item .icon.step2 {
  background-image: url("../images/step_icon2.png");
}
.step-wrap .item .icon.step3 {
  background-image: url("../images/step_icon3.png");
}
.step-wrap .item .icon.step4 {
  background-image: url("../images/step_icon4.png");
}
.step-wrap .item .main {
  display: inline-block;
  padding-left: 10px;
  width: calc(100% - 80px);
  vertical-align: middle;
}
.step-wrap .item .main .step, .step-wrap .item .main .title {
  color: #fff;
}
.step-wrap .item.current {
  background: url("../images/bg_box3.jpg");
}
.step-wrap .item.current:before {
  opacity: 1;
}
.step-wrap .item:last-child:before {
  display: none;
}

@media only screen and (max-width: 1399px) {
  .step-wrap {
    margin: 0 30px;
  }
  .step-wrap .item {
    padding: 10px;
  }
}
@media only screen and (max-width: 991px) {
  .step-wrap {
    margin: 0;
  }
  .step-wrap .item .icon {
    display: block;
    width: 70px;
    height: 70px;
    background-size: 70px 140px;
  }
  .step-wrap .item .main {
    display: block;
    padding: 0;
    width: 100%;
    text-align: center;
  }
}
@media only screen and (max-width: 767px) {
  .step-wrap .item {
    display: none;
  }
  .step-wrap .item .icon {
    display: inline-block;
    margin: 0;
  }
  .step-wrap .item .main {
    display: inline-block;
    width: calc(100% - 70px);
    text-align: left;
    padding-left: 20px;
  }
  .step-wrap .item:before {
    display: none;
  }
  .step-wrap .item.current {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
  }
}
/*
 * Message
 */
#msg-wrap .p-container {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gap);
  padding-right: var(--gap);
  text-align: center;
}
#msg-wrap .msg-icon {
  margin: var(--gap) auto 0 auto;
  padding-top: 5px;
  width: 100px;
  height: 100px;
  background-color: rgba(240, 130, 0, 0.2);
  border-radius: 50%;
}
#msg-wrap .msg-icon span {
  display: block;
  margin: 0 auto;
  position: relative;
  width: 90px;
  height: 90px;
  background-color: #fff;
  border-radius: 50%;
}
#msg-wrap .msg-icon span:before, #msg-wrap .msg-icon span:after {
  pointer-events: none;
  content: "";
  position: absolute;
  z-index: 2;
  left: 50%;
  background-color: #f08200;
}
#msg-wrap .msg-icon span.primary:before {
  top: 16px;
  margin-left: -2px;
  width: 4px;
  height: 45px;
}
#msg-wrap .msg-icon span.primary:after {
  top: 66px;
  margin-left: -2px;
  width: 4px;
  height: 5px;
}
#msg-wrap .msg-icon span.error:before {
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  top: 20px;
  left: 43px;
  width: 3px;
  height: 50px;
}
#msg-wrap .msg-icon span.error:after {
  -webkit-transform: rotate(135deg);
      -ms-transform: rotate(135deg);
          transform: rotate(135deg);
  top: 20px;
  left: 43px;
  width: 3px;
  height: 50px;
}
#msg-wrap .msg-icon span.success:before {
  -webkit-transform: rotate(40deg);
      -ms-transform: rotate(40deg);
          transform: rotate(40deg);
  top: 22px;
  left: 52px;
  width: 3px;
  height: 50px;
}
#msg-wrap .msg-icon span.success:after {
  -webkit-transform: rotate(135deg);
      -ms-transform: rotate(135deg);
          transform: rotate(135deg);
  top: 47px;
  left: 30px;
  width: 3px;
  height: 22px;
}
#msg-wrap .msg-title {
  position: relative;
  padding: 30px var(--gap) 0;
  color: #f08200;
  font-size: 36px;
  font-weight: bold;
}
#msg-wrap .msg-text {
  position: relative;
  margin: 15px auto 0;
  padding: 15px var(--gap) 30px;
  font-size: 16px;
}
#msg-wrap .msg-text:before {
  display: none;
  pointer-events: none;
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  width: 1px;
  height: 50px;
  background-color: #f08200;
  z-index: 1;
}
#msg-wrap .msg-text strong {
  color: #f08200;
}
#msg-wrap .msg-tw {
  position: relative;
  margin: 30px auto 0;
  padding: 0 var(--gap);
  font-size: 32px;
  line-height: 44px;
}
#msg-wrap .msg-tw:before {
  display: none;
  pointer-events: none;
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 1px;
  height: 50px;
  background-color: #f08200;
  z-index: 1;
}
#msg-wrap .msg-tw strong {
  color: #f08200;
}
#msg-wrap .btn-style2 {
  max-width: min(60%, 200px);
  display: block;
  margin: 15px auto 15px;
}

@media only screen and (max-width: 991px) {
  #msg-wrap .msg-tw {
    font-size: 24px;
  }
}
@media only screen and (max-width: 767px) {
  #msg-wrap .msg-text {
    margin: 20px auto 0;
    padding: 0px var(--gap) 30px;
  }
  #msg-wrap .msg-tw {
    margin-top: 20px;
    padding: 0 var(--gap) 70px;
    font-size: 18px;
  }
  #msg-wrap .msg-tw:before {
    bottom: 20px;
    height: 40px;
  }
  #msg-wrap .msg-tw .pic-wrap {
    width: 100%;
  }
}
/*
 * Search Result
 */
#search .msg-text {
  padding: 0;
  margin: 0 auto 10px;
  text-align: center;
}

.serach-result {
  position: relative;
}
.serach-result .input {
  width: 100%;
  display: block;
  position: relative;
  z-index: 0;
  margin: 0;
  padding: 0;
  border: none;
  background-color: transparent;
}
.serach-result .input:focus-within {
  background-color: transparent;
  border-color: transparent;
}
.serach-result .input input {
  display: block;
  padding: 0 var(--h-input) 0 15px;
  width: 100%;
  height: var(--h-input);
  font-size: 1rem;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: var(--radius-input);
}
.serach-result .input input:focus {
  background-color: #fff;
  border-color: #ccc;
  text-shadow: none;
}
.serach-result .search-send {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  background: none;
  background-color: transparent;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  vertical-align: middle;
  width: var(--h-input);
  height: var(--h-input);
  border: none;
  color: #333;
  border-radius: 0 var(--radius-input) var(--radius-input) 0;
}
.serach-result .search-send:hover {
  background-color: var(--color-orange);
  color: #fff;
}

/*
 * Gift
 */
#gift {
  margin: 0;
  padding: 0;
  padding-top: max(var(--gap), 3vh);
  padding-bottom: max(var(--gap), 3vh);
  background-color: #fff3e9;
}
#gift .block-subhead {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0 7px;
}
#gift .block-subhead .icon {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 35px;
          flex: 0 0 35px;
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  width: 35px;
  height: 35px;
  background: #f08200 url("../images/icon_gift.png");
  background-size: contain;
  border-radius: 50%;
}
#gift .item {
  padding: 0 10px;
}
#gift .item .wrap {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 15px;
  background-color: #fff;
  border: 1px solid #ddd;
}
#gift .item .img {
  display: inline-block;
  width: 100px;
  vertical-align: middle;
}
#gift .item .main {
  display: inline-block;
  padding-left: 20px;
  width: calc(100% - 160px);
  vertical-align: middle;
}
#gift .item .main div {
  padding: 3px 0;
}
#gift .item .main .title {
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
#gift .item .select {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-block;
  width: 50px;
  vertical-align: middle;
}
#gift .item .select label {
  display: block;
  margin: 0;
  padding: 0;
  width: 50px;
  font-size: 16px;
  height: 35px;
  cursor: pointer;
  font-weight: normal;
}
#gift .item .select label input {
  display: none;
}
#gift .item .select label .txt {
  display: block;
  width: 100%;
  height: 40px;
  line-height: 32px;
  padding: 5px 8px;
  text-align: center;
  border-radius: 0;
  background-color: #ddd;
}
#gift .item .select label input:checked + .txt {
  color: #fff;
  background-color: #f08200;
}

@media only screen and (max-width: 991px) {
  #gift .item .wrap {
    padding: 10px 15px;
  }
  #gift .item .img {
    margin: 0 auto;
  }
  #gift .item .img + .main {
    padding-left: var(--gap-list);
  }
  #gift .item .main {
    width: 100%;
    padding: 0;
    font-size: 14px;
  }
  #gift .item .select {
    display: block;
    margin: 0 auto;
  }
}
@media only screen and (max-width: 767px) {
  #gift .p-1300 {
    padding-left: 10px;
    padding-right: 10px;
  }
}
/*
 * 促銷活動
 */
#promotion-single {
  overflow-x: hidden;
}
#promotion-single .p-container {
  padding-top: var(--h-header);
}
#promotion-single .cart-info {
  position: relative;
  z-index: 5;
}
#promotion-single .cart-info > * {
  position: relative;
  z-index: 5;
}
#promotion-single .cart-info::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  background-color: #fff;
  z-index: 0;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}

/* 促銷活動 header */
.promo-header {
  z-index: 150;
  position: fixed;
  background-color: #fff;
  top: 0;
  left: 0;
  width: 100%;
}
.promo-header.is-scroll {
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
          box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.promo-header > .p-1300 {
  height: var(--h-header);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 0 var(--gap);
  z-index: 1;
}
.promo-header .logo {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  margin: 0;
  padding: 0;
  width: 200px;
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
.promo-header .logo a {
  font-size: 0;
  display: block;
  aspect-ratio: 480/140;
  background: url("../images/logo.png") no-repeat 0 0/contain;
}

/* 促銷活動 search */
.promo-search-box {
  display: block;
  height: var(--h-input);
  position: absolute;
  top: calc(var(--h-header) * 0.5);
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  right: var(--gap);
  width: max(30vw, 400px);
  max-width: calc(100% - var(--gap) * 2 - 220px);
  text-align: right;
}
.promo-search-box form {
  position: relative;
  max-width: 580px;
  width: 100%;
  display: inline-block;
  text-align: left;
}
.promo-search-box input {
  z-index: 0;
  position: relative;
  -webkit-transition: border-color 0.3s ease-in-out;
  transition: border-color 0.3s ease-in-out;
  display: block;
  padding-left: 1em;
  padding-right: max(3.125vw, var(--h-input));
  background-color: #fff;
  width: 100%;
  height: var(--h-input);
  border: 1px solid #dcdcdc;
  border-radius: var(--radius-input);
}
.promo-search-box input::-webkit-input-placeholder {
  color: #999;
}
.promo-search-box input::-moz-placeholder {
  color: #999;
}
.promo-search-box input:-ms-input-placeholder {
  color: #999;
}
.promo-search-box input::-ms-input-placeholder {
  color: #999;
}
.promo-search-box input::placeholder {
  color: #999;
}
.promo-search-box button {
  -webkit-transition: background-color 0.23s ease-in-out;
  transition: background-color 0.23s ease-in-out;
  position: absolute;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  z-index: 5;
  padding: 0;
  top: 0;
  right: 0;
  width: max(3.125vw, var(--h-input));
  height: var(--h-input);
  color: #fff;
  background-color: var(--color-dark);
  border: none;
  border-radius: 0 var(--radius-input) var(--radius-input) 0;
}
.promo-search-box button:hover {
  background-color: var(--color-orange);
  color: #fff;
}
.promo-search-box button svg {
  width: calc(var(--h-input) * 0.6);
  height: calc(var(--h-input) * 0.6);
}
.promo-search-box:focus input {
  border-color: #888;
}

/* 促銷活動 商品覆蓋區 */
.addcart-float-box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  border-radius: var(--radius-box);
  border: 2px solid var(--color-orange);
  background-color: rgba(240, 130, 0, 0.6);
  display: none;
}
.addcart-float-box .btn-cart {
  width: calc(var(--h-input) * 1.8);
  height: calc(var(--h-input) * 1.8);
  position: absolute;
  z-index: 10;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background-color: rgba(0, 0, 0, 0.2) !important;
}

/* 促銷活動 商品列表 */
.promotion-products {
  z-index: 1;
  position: relative;
  padding-top: var(--gap-list-lg);
  padding-bottom: var(--gap);
}
.promotion-products .product-list:not(.slick-initialized) {
  margin-left: calc(var(--gap-list) * -0.5);
  width: calc(100% + var(--gap-list) * 2);
}
.promotion-products .product-list .item {
  padding: 3px;
  margin-bottom: var(--gap);
}
.promotion-products .product-list .item.style-a .img::before, .promotion-products .product-list .item.style-b .img::before {
  content: "";
  z-index: 15;
  display: block;
  border: 2px solid #efb671;
  border-radius: var(--radius-box);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.promotion-products .product-list .item.style-a .img::after, .promotion-products .product-list .item.style-b .img::after {
  font-size: var(--fz-h5);
  text-transform: uppercase;
  display: inline-block;
  position: absolute;
  bottom: 0;
  right: 0;
  border-radius: var(--radius-box) 0;
  background-color: #efb671;
  color: #fff;
  font-weight: 700;
  font-style: normal;
  z-index: 16;
  padding: 0.25em 0.5em 0.15em;
  line-height: 1;
}
.promotion-products .product-list .item.style-a .img::before {
  border: 2px solid #efb671;
}
.promotion-products .product-list .item.style-a .img::after {
  content: "A";
  background-color: #efb671;
}
.promotion-products .product-list .item.style-b .img::before {
  border: 2px solid #82c1c7;
}
.promotion-products .product-list .item.style-b .img::after {
  content: "B";
  background-color: #82c1c7;
}
.promotion-products .product-list .item::before {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  border-radius: var(--radius-box);
  border: 2px solid var(--color-orange);
  display: none;
}
.promotion-products .product-list .item.is-added .addcart-float-box {
  display: block;
  -webkit-animation: ani_fadeIn 0.35s both;
          animation: ani_fadeIn 0.35s both;
}
.promotion-products .product-list .text-box {
  text-align: center;
}
.promotion-products .product-list .text-box .price {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.promotion-products .addcart-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0 5px;
}
.promotion-products .addcart-box .wan-spinner {
  width: calc(100% - var(--h-input) - 15px);
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  min-width: auto;
}
.promotion-products .btn-cart {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  width: var(--h-input);
  height: var(--h-input);
  border-radius: 50px;
  background-color: #b5b5b5;
  color: #fff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 3px;
  font-size: 0;
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
}
.promotion-products .btn-cart svg {
  max-width: 100%;
}
.promotion-products .btn-cart:hover {
  color: #fff;
  background-color: var(--color-orange);
}

.pc .promotion-products .product-list .item:hover .title {
  color: #222;
}
.pc .promotion-products .product-list .item:hover::before {
  display: block;
  -webkit-animation: ani_fadeIn 0.35s both;
          animation: ani_fadeIn 0.35s both;
}

/* 促銷活動 下單列表 */
.promotion-cart {
  position: relative;
  padding-top: var(--gap-list-lg);
  padding-bottom: var(--gap-list-lg);
  margin-bottom: var(--gap-list-lg);
}
.promotion-cart::before {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  background-color: #eee;
  z-index: 0;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}
.promotion-cart .cart {
  z-index: 10;
  position: relative;
}
.promotion-cart .cart-table .td-price-sum, .promotion-cart .cart-table .td-price {
  white-space: nowrap;
}
.promotion-cart .cart-table table td {
  padding: 10px;
}
.promotion-cart .cart-table table thead td {
  border-top: 1px solid #000;
  background-color: #dcdcdc;
  color: #111;
  position: relative;
}
.promotion-cart .cart-table table thead td:not(:first-child)::before {
  content: "";
  width: 1px;
  display: block;
  position: absolute;
  left: 0;
  height: 15px;
  background-color: #999;
  top: 50%;
  margin-top: -7px;
}
.promotion-cart .cart-table table .product-box .img {
  width: 80px;
  border-radius: 10px;
  overflow: hidden;
}
.promotion-cart .cart-table table .btn-delete {
  width: 30px;
  height: 30px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-trash' width='24' height='24' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23777' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M4 7l16 0' /%3E%3Cpath d='M10 11l0 6' /%3E%3Cpath d='M14 11l0 6' /%3E%3Cpath d='M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12' /%3E%3Cpath d='M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3' /%3E%3C/svg%3E") no-repeat 0 0/contain;
  border: none;
}
.promotion-cart .cart-table table .btn-delete span {
  display: none;
}
.promotion-cart .cart-table table .btn-delete:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='icon icon-tabler icon-tabler-trash' width='24' height='24' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23f08200' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M4 7l16 0' /%3E%3Cpath d='M10 11l0 6' /%3E%3Cpath d='M14 11l0 6' /%3E%3Cpath d='M5 7l1 12a2 2 0 0 0 2 2h8a2 2 0 0 0 2 -2l1 -12' /%3E%3Cpath d='M9 7v-3a1 1 0 0 1 1 -1h4a1 1 0 0 1 1 1v3' /%3E%3C/svg%3E");
}
.promotion-cart .wan-spinner {
  --h-input: 35px;
  border: 1px solid var(--color-orange);
  border-radius: 5px;
  overflow: hidden;
}
.promotion-cart .wan-spinner .minus, .promotion-cart .wan-spinner .plus {
  background-color: #fff;
  width: 30px;
}
.promotion-cart .wan-spinner .minus {
  border-right: 1px solid var(--color-orange);
}
.promotion-cart .wan-spinner .minus::before {
  background-color: var(--color-orange);
}
.promotion-cart .wan-spinner .minus:hover {
  background-color: var(--color-orange);
}
.promotion-cart .wan-spinner .minus:hover:before {
  background-color: #fff;
}
.promotion-cart .wan-spinner .plus {
  border-left: 1px solid var(--color-orange);
}
.promotion-cart .wan-spinner .plus::before, .promotion-cart .wan-spinner .plus::after {
  background-color: var(--color-orange);
}
.promotion-cart .wan-spinner .plus:hover {
  background-color: var(--color-orange);
}
.promotion-cart .wan-spinner .plus:hover:before, .promotion-cart .wan-spinner .plus:hover:after {
  background-color: #fff;
}
.promotion-cart .cart-down .right-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.promotion-cart .cart-down .right-area table {
  float: none;
  width: max(80%, 21vw);
  max-width: 100%;
  min-width: auto;
}
.promotion-cart .cart-down .right-area table th {
  white-space: nowrap;
  width: auto;
}
.promotion-cart .cart-down .right-area table th small {
  font-size: 0.875em;
  color: #999;
  margin-left: 5px;
}
.promotion-cart .cart-down .right-area table td {
  width: 150px;
  white-space: nowrap;
}
.promotion-cart .cart-down .right-area .total-price th, .promotion-cart .cart-down .right-area .total-price td {
  padding-top: 0;
  margin-top: 0;
  line-height: 1.2;
}
.promotion-cart .cart-down .right-area .total-price th::before, .promotion-cart .cart-down .right-area .total-price td::before {
  display: none;
}
.promotion-cart .coupon-box {
  border-top: none;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.promotion-cart .coupon-box .icon {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' xml:space='preserve' width='80' height='80'%3E%3Cpath fill='none' stroke='%23F08200' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M48.582 19.281a9.004 9.004 0 0 1 12.137 12.137 9.005 9.005 0 0 1 0 17.164c1.76 3.391 1.218 7.666-1.627 10.51a9.004 9.004 0 0 1-10.51 1.627 9.004 9.004 0 0 1-17.164 0 9.004 9.004 0 0 1-10.51-1.627c-2.845-2.844-3.387-7.119-1.627-10.51a9.004 9.004 0 0 1 0-17.164 9.004 9.004 0 0 1 12.137-12.137 9.004 9.004 0 0 1 17.164 0zM50.695 29.774l-21.921 21.92'/%3E%3Cpath fill='none' stroke='%23F08200' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M30.518 36.5a3.524 3.524 0 0 1 0-4.982 3.522 3.522 0 1 1 0 4.982zM44.467 50.449a3.524 3.524 0 0 1 0-4.982 3.524 3.524 0 0 1 4.982 0 3.524 3.524 0 0 1 0 4.982 3.524 3.524 0 0 1-4.982 0z'/%3E%3C/svg%3E") no-repeat 0 0/contain;
}
.promotion-cart .coupon-box .input {
  border-color: var(--color-orange);
  background-color: #fff;
}
.promotion-cart .coupon-box .btn-use {
  background-color: var(--color-orange);
}
.promotion-cart .coupon-box .btn-use:hover {
  background-color: #ff9210;
}

/* 促銷活動 填寫資料 */
.promotion-consignee .top-bar .icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.promotion-consignee .top-bar .icon svg {
  min-width: 120%;
}
.promotion-consignee .star {
  -webkit-box-ordinal-group: unset;
      -ms-flex-order: unset;
          order: unset;
  width: auto;
}
.promotion-consignee .address-select {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
}
.promotion-consignee .input, .promotion-consignee select, .promotion-consignee .textarea {
  border-radius: 4px;
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #ddd;
}
.promotion-consignee .input:focus, .promotion-consignee select:focus, .promotion-consignee .textarea:focus {
  border-color: var(--color-orange);
}
.promotion-consignee .zipcode {
  min-width: 90px;
}
.promotion-consignee .select-wrap {
  overflow: visible;
}
.promotion-consignee .radio-select {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  gap: 0 3px;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.promotion-consignee .radio-select strong {
  display: inline-block;
  margin: 0;
  padding: 0;
}
.promotion-consignee .radio-select .select {
  position: relative;
  top: auto;
  left: auto;
  width: 20px;
  height: 20px;
  display: inline-block;
  border-radius: 50px;
  border: 2px solid #ccc;
  background-color: #fff;
}
.promotion-consignee .radio-select .select::before {
  display: none;
}
.promotion-consignee .radio-select .select::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -5px 0 0 -5px;
  border-radius: 30px;
  background-color: var(--color-orange);
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
  -webkit-transition: -webkit-transform 0.25s;
  transition: -webkit-transform 0.25s;
  transition: transform 0.25s;
  transition: transform 0.25s, -webkit-transform 0.25s;
}
.promotion-consignee .radio-select input:checked ~ .select::after {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}
.promotion-consignee .radio-select:hover .select {
  border-color: #999;
}
.promotion-consignee .item-wrap {
  gap: 0 var(--gap-list-lg);
}
.promotion-consignee .item-wrap .half {
  padding: 0;
}
.promotion-consignee .item-wrap .half:last-child .group-box .title {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  width: 90px;
}

/* 促銷活動 按鈕 */
.promotion-btns {
  width: 100%;
}
.promotion-btns .btn-style2, .promotion-btns .btn-style {
  width: 100%;
  margin-bottom: 10px;
}
.promotion-btns svg {
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
}

.mb-cart-anchor {
  display: none;
}

@media (max-width: 767px) {
  .promo-header .logo {
    width: 120px;
  }
  .promo-search-box {
    right: calc(var(--gap) * 0.5);
    max-width: calc(100% - var(--gap) * 2 - 130px);
  }
  .promotion-cart {
    padding-top: 0;
  }
  .promotion-cart .cart {
    margin-left: calc(var(--gap) * -1);
    margin-right: calc(var(--gap) * -1);
  }
  .promotion-cart .cart-down .right-area table {
    width: 100%;
  }
  .promotion-cart .cart-table table tr {
    padding: 15px 5px 15px 85px;
    min-height: 90px;
  }
  .promotion-cart .cart-table table tbody td.product-info {
    padding: 0;
  }
  .promotion-cart .cart-table table tbody td.delete {
    padding: 3px;
    margin-top: 5px;
  }
  .promotion-cart .cart-table table .product-info {
    margin-left: auto;
    width: 100%;
    display: block;
  }
  .promotion-cart .cart-table table .product-box {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }
  .promotion-cart .cart-table table .product-box .img {
    position: absolute;
    width: 70px;
    margin-left: -80px;
  }
  .promotion-cart .cart-table table .product-box .img a {
    display: block;
  }
  .promotion-cart .cart-table table .product-box .img img {
    max-width: 60px;
  }
}
@media (min-width: 500px) {
  .promotion-products .product-list:not(.slick-initialized) {
    max-height: 100vh;
    overflow: hidden;
    background: url(../images/loading.gif) no-repeat center 40%/60px auto;
  }
  .promotion-products .product-list:not(.slick-initialized) .item {
    opacity: 0;
    pointer-events: none;
  }
  .promotion-products .product-list.slick-initialized {
    margin-left: auto;
    margin-right: auto;
  }
  .promotion-products .product-list.slick-initialized .slick-list {
    padding-left: 5px;
    padding-right: 5px;
  }
  .promotion-products .product-list.slick-initialized .slick-arrow {
    height: 100%;
    -webkit-transform: none;
        -ms-transform: none;
            transform: none;
    margin-top: auto;
    top: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
            box-shadow: none;
    background-color: transparent;
  }
  .promotion-products .product-list.slick-initialized .slick-arrow:hover::before {
    border-color: var(--color-orange);
  }
  .promotion-products .product-list.slick-initialized .slick-prev {
    left: calc(var(--gap) * -1);
  }
  .promotion-products .product-list.slick-initialized .slick-next {
    right: calc(var(--gap) * -1);
  }
  .promotion-products .product-list.slick-initialized .slick-dots {
    bottom: auto;
    position: relative;
    margin: 10px auto 0;
  }
  .promotion-products .product-list.slick-initialized .slick-dots li {
    padding: 3px;
  }
  .promotion-products .product-list.slick-initialized .slick-dots li button {
    border: 2px solid #ddd;
  }
  .promotion-products .product-list.slick-initialized .slick-dots li.slick-active button {
    border-color: var(--color-orange);
  }
}
@media (max-width: 499px) {
  .promotion-cart {
    padding-bottom: 10px;
  }
  .promotion-cart .coupon-box {
    display: block;
  }
  .promotion-cart .coupon-box .icon {
    width: 40px;
    height: 40px;
  }
  .promotion-cart .cart-down .right-area {
    display: block;
    padding: 0 var(--gap);
    margin-top: 10px;
  }
  .promotion-cart .cart-down .right-area table th, .promotion-cart .cart-down .right-area table td {
    padding: 5px 0;
  }
  .promotion-cart .cart-table table tbody td:not(.product-info):not(.delete) {
    width: auto;
  }
  .promotion-cart .cart-table table tbody td:not(.product-info):not(.delete):nth-of-type(even) {
    padding-right: 18px;
  }
  .promotion-consignee .invoice-box {
    width: 100%;
    margin-bottom: 20px;
  }
  .promotion-consignee .form-wrap .group-box .title {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
  .promotion-consignee .form-wrap .group-box.name .input {
    width: calc(100% - 135px);
  }
  .promotion-consignee .form-wrap .group-box.name .sex-box {
    width: 135px;
  }
  .promotion-products .slick-list, .promotion-products .slick-track {
    height: auto !important;
    width: auto !important;
    -webkit-transform: none !important;
        -ms-transform: none !important;
            transform: none !important;
  }
  .promotion-products .slick-slide {
    display: block !important;
    float: none !important;
    width: auto !important;
  }
  .promotion-products .slick-arrow, .promotion-products .slick-dots, .promotion-products .slick-cloned {
    display: none !important;
  }
  .mb-cart-anchor {
    display: block;
    position: fixed;
    z-index: 50;
    width: 0;
    right: calc(var(--gap) * 0.25);
    top: 0;
    height: 100%;
  }
  .mb-cart-anchor a {
    position: sticky;
    padding: 0 8px 0 3px;
    left: 0;
    -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
            transform: translateX(-100%);
    top: calc(var(--h-header) * 1.2);
    height: var(--h-input);
    border-radius: 10px;
    background-color: var(--color-orange);
    border: 2px solid #fff;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    color: #fff;
    font-size: 0;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .mb-cart-anchor a > * {
    -ms-flex-negative: 0;
        flex-shrink: 0;
  }
  .mb-cart-anchor a svg {
    width: 30px;
    height: auto;
  }
  .mb-cart-anchor a span {
    font-size: 12px;
    width: 25px;
    line-height: 1.1;
  }
}
@media (max-width: 399px) {
  .promotion-products .addcart-box {
    display: block;
  }
  .promotion-products .addcart-box .wan-spinner {
    width: 100%;
  }
  .promotion-products .addcart-box .btn-cart {
    background-color: rgba(51, 43, 43, 0.7);
    color: #fff;
    font-size: 0.875rem;
    width: 100%;
    border-radius: 0;
    height: 35px;
    line-height: 35px;
  }
  .promotion-products .addcart-box .btn-cart svg {
    max-width: 1.5rem;
    margin-left: -0.5em;
  }
  .promotion-cart .coupon-box .input {
    margin-left: 0;
    width: calc(100% - 77px);
  }
}
@media (max-width: 379px) {
  .promo-header .logo {
    width: 100px;
    margin-left: calc(var(--gap) * -0.5);
  }
  .promo-search-box {
    max-width: calc(100% - var(--gap) * 2 - 105px);
  }
  .promo-search-box input {
    font-size: 16px;
    padding-left: 10px;
  }
  .btn-cart {
    border-radius: 0;
    font-size: 14px;
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 0 3px;
    white-space: nowrap;
    margin-top: 5px;
  }
  .btn-cart svg {
    max-width: 24px;
  }
}
/*
 * 完成訂單
 */
#promotion-single.flow-finish .promo-header > .p-1300 {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
#promotion-single.flow-finish .p-container {
  background-color: #eee;
  padding-top: calc(var(--h-header) + var(--gap-list-lg));
  padding-bottom: var(--gap-list-lg);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  min-height: 100dvh;
}
#promotion-single.flow-finish .msg-finish {
  max-width: 500px;
  margin: 0 auto;
  background-color: #fff;
  -webkit-box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
          box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
  padding: max(var(--gap), 8vh) var(--gap);
  text-align: center;
  border-radius: 5px;
}
#promotion-single.flow-finish .msg-text {
  font-size: 1.125rem;
  text-align: center;
}
#promotion-single.flow-finish .btn-style2 {
  margin: 25px auto 10px;
}

/* 
 * 編輯器預設通用樣式
 */
.edit-wrap, .cke_editable {
  color: #333;
  line-height: 2;
  font-family: "Roboto", "Noto Sans TC", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif;
  background-color: #fff;
}
.edit-wrap img, .cke_editable img {
  line-height: 0;
  display: block;
}
.edit-wrap ol, .edit-wrap ul, .cke_editable ol, .cke_editable ul {
  margin-top: 0;
  margin-bottom: 1rem;
}
.edit-wrap h1, .edit-wrap h2, .edit-wrap h3, .edit-wrap h4, .edit-wrap h5, .edit-wrap h6, .cke_editable h1, .cke_editable h2, .cke_editable h3, .cke_editable h4, .cke_editable h5, .cke_editable h6 {
  display: block;
  margin: 15px auto;
  padding: 0;
}
.edit-wrap h1 span, .edit-wrap h2 span, .edit-wrap h3 span, .edit-wrap h4 span, .edit-wrap h5 span, .edit-wrap h6 span, .cke_editable h1 span, .cke_editable h2 span, .cke_editable h3 span, .cke_editable h4 span, .cke_editable h5 span, .cke_editable h6 span {
  font-size: inherit;
}
.edit-wrap h1, .cke_editable h1 {
  font-size: var(--fz-h1);
}
.edit-wrap h2, .cke_editable h2 {
  font-size: var(--fz-h2);
}
.edit-wrap h3, .cke_editable h3 {
  font-size: var(--fz-h3);
}
.edit-wrap h4, .cke_editable h4 {
  font-size: var(--fz-h4);
}
.edit-wrap h5, .cke_editable h5 {
  font-size: var(--fz-h5);
}
.edit-wrap h6, .cke_editable h6 {
  font-size: var(--fz-h6);
}
.edit-wrap small, .cke_editable small {
  font-size: var(--fz-sm);
}
.edit-wrap blockquote, .cke_editable blockquote {
  padding: 10px 20px;
  margin: 0 0 20px;
  font-size: 17.5px;
  border-left: 5px solid #ddd;
}
.edit-wrap p, .cke_editable p {
  margin: 0 0 1rem;
}
.edit-wrap p + *:not(p), .cke_editable p + *:not(p) {
  margin-top: 2rem;
}
.edit-wrap strong, .cke_editable strong {
  font-weight: 600;
}
.edit-wrap hr, .cke_editable hr {
  border: none;
  border-bottom: 1px solid #ddd;
  margin: calc(var(--gap-vertical) * 0.5) auto;
}
.edit-wrap video, .edit-wrap embed, .edit-wrap iframe, .cke_editable video, .cke_editable embed, .cke_editable iframe {
  width: 100%;
  max-width: 100% !important;
  height: auto !important;
  aspect-ratio: 16/9 !important;
}
.edit-wrap a, .cke_editable a {
  text-decoration: underline;
}
.edit-wrap a:hover, .cke_editable a:hover {
  color: var(--color-orange);
  text-decoration: none;
}

/*
 * Edit
 */
.import-box {
  display: inline-block;
  width: 340px;
  border: 5px solid #ccc;
  background-color: #efefef;
  margin: 5px 0;
  padding: 15px 30px;
  font-size: 20px;
  line-height: 34px;
  font-weight: bold;
  vertical-align: middle;
}

.right-import {
  display: inline-block;
  width: calc(100% - 340px);
  vertical-align: middle;
  padding: 20px;
  font-size: 18px;
  line-height: 36px;
}

.edit-wrap .edit-img {
  margin-bottom: 40px;
  padding: 0 0 40px;
  border-bottom: 1px solid #eee;
}
.edit-wrap .edit-img:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 20px;
}
.edit-wrap .edit-item {
  color: #666;
  padding: 20px 0 15px;
  line-height: 28px;
}
.edit-wrap .edit-item .edit-title {
  position: relative;
  padding-left: 20px;
  font-size: 18px;
  line-height: 32px;
}
.edit-wrap .edit-item .edit-title:before {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 11px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #f08200;
}
.edit-wrap .edit-item .edit-text {
  padding-left: 20px;
  font-size: 16px;
}
.edit-wrap .edit-item:last-child {
  padding-bottom: 0;
}
.edit-wrap img {
  max-width: 100%;
  height: auto !important;
}

@media only screen and (max-width: 991px) {
  .import-box, .right-import {
    width: 100%;
    padding: 15px;
  }
}