@charset "UTF-8";

.base {
/* 【部分重置】 */
  /* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126
    License: none (public domain)
  */
}
.base a, .base address, .base article, .base aside, .base audio, .base b, .base blockquote, .base body, .base canvas, .base caption, .base cite, .base code, .base dd, .base del, .base details, .base dfn, .base div, .base dl, .base dt, .base em, .base embed, .base fieldset, .base figcaption, .base figure, .base footer, .base form, .base h1, .base h2, .base h3, .base h4, .base h5, .base h6, .base header, .base hgroup, .base html, .base i, .base iframe, .base img, .base ins, .base kbd, .base label, .base legend, .base li, .base mark, .base menu, .base nav, .base object, .base ol, .base output, .base p, .base pre, .base q, .base ruby, .base s, .base samp, .base section, .base small, .base span, .base strike, .base strong, .base sub, .base summary, .base sup, .base table, .base tbody, .base td, .base tfoot, .base th, .base thead, .base time, .base tr, .base tt, .base u, .base ul, .base var, .base video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  line-height: 1;
}
.base article, .base aside, .base details, .base figcaption, .base figure, .base footer, .base header, .base menu, .base nav, .base section {
  display: block;
}
.base body {
  line-height: 1;
}
.base ol, .base ul {
  list-style: none;
  margin: 0;
}
.base blockquote, .base q {
  quotes: none;
}
.base blockquote:after, .base blockquote:before, .base q:after, .base q:before {
  content: "";
  content: none;
}
.base table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* 【變數】 */
:root {
  --root: 16px;
  --wh: #fff;
  --vanta: #000;
  --cht-header: 116px;
}

/* 【樣式】 */
*, html {
  box-sizing: border-box;
  font-size: var(--root);
}

img {
  vertical-align: bottom;
}

[hidden], [omitted] {
  display: none !important;
}

[pc] {
  display: block;
}

[mb] {
  display: none !important;
}

.rwd, [rwd] {
  width: 100%;
}

dl, ol, ul {
  margin-bottom: 0;
}

.base {
  --indigo: #02339a;
  --aqua: #2aabe4;
  --tb-bdr: #cecece;
  font-family: "Noto Sans TC", "微軟正黑體", "Microsoft Jhenghei", "SF Pro TC", "PingFang TC", Arial, sans-serif;
  background: rgb(108, 182, 255);
  background: linear-gradient(90deg, #6cb6ff 0%, #c0e0ff 50%, #63aaff 100%);
}
.base section + section {
  margin-top: 3.9vw;
}
.base .aligner {
  margin: 0 auto;
  width: 67.7vw;
}
.base .frame {
  background: linear-gradient(90deg, #ffffdb 0%, #6dd5fa 100%);
  border-radius: 2.6vw;
  padding: 1vw;
  box-shadow: 0 0.7vw 0.7vw 0.4vw rgba(64, 64, 64, 0.5);
}
.base .frame .fr-ctn {
  --naming: "frame-container";
}
.base .frame .fr-ctn article {
  text-align: center;
  background: var(--wh);
  width: 100%;
  border-radius: 0 0 1.9vw 1.9vw;
  padding: 1.5vw 2.1vw;
  color: var(--vanta);
  overflow: hidden;
}
.base .frame .fr-ctn article em, .base .frame .fr-ctn article p {
  font-weight: 700;
  font-size: 1vw;
  line-height: 1.5;
  display: block;
  text-align: left;
}
.base .frame .fr-ctn article p {
  font-weight: 400;
}
.base .frame .fr-ctn article ul + em {
  margin-top: 2em;
}
.base .frame .fr-ctn article ul {
  text-align: left;
  margin-left: 2.4em;
}
.base .frame .fr-ctn article ul li {
  list-style-type: decimal;
  list-style-position: outside;
  font-size: 1vw;
  line-height: 1.5;
}
.base .frame .fr-ctn article ul li a {
  text-decoration: underline;
  color: var(--aqua);
}
.base .frame .fr-ctn article ul li sub {
  display: inline-block;
  font-size: 0.7vw;
}
.base .frame .fr-ctn article ul li footer {
  font-size: 0.7vw;
  padding: 0.25em 0;
}
.base .frame .fr-ctn article ul li table {
  border-collapse: collapse;
  border: 1px solid var(--tb-bdr);
  border-width: 1px 0 0 1px;
  margin: 0.25em 0;
}
.base .frame .fr-ctn article ul li table th, .base .frame .fr-ctn article ul li table td {
  border: 1px solid var(--tb-bdr);
  border-width: 0 1px 1px 0;
  padding: 0.3em;
  line-height: 1.5;
  text-align: center;
}
.base .frame .fr-ctn article ul li table td:not([class]) {
  width: 3%;
}
.base .frame .fr-ctn article ul li table .cate {
  width: 18%;
  font-weight: 700;
}
.base .frame .fr-ctn article ul li table .gift {
  text-align: left;
}
.base .frame .fr-ctn article ul li table .gift strong {
  font-weight: 700;
  display: block;
}
.base .frame .fr-ctn article ul li table .gift mark {
  background: transparent;
  font-size: max(12px, 0.8vw);
}
.base .frame .fr-ctn article ul li table .price {
  width: 10%;
}
.base .frame .fr-ctn article ul li table .qty {
  width: 10%;
}
.base .frame .fr-ctn article ul li table thead th {
  background: #ececec;
}
.base .frame .fr-ctn article ul li table tbody {
  --name: "";
}
.base .frame .fr-ctn article ul li .list {
  position: relative;
  display: flex;
  line-height: 1.5;
}
.base .frame .fr-ctn article ul li .list .affix {
  position: absolute;
  display: grid;
  place-items: center;
  width: 1em;
  height: 1em;
  top: 0.275em;
}
.base .frame .fr-ctn article ul li .list blockquote {
  padding-left: 1.3em;
  line-height: 1.5;
}
.base .frame .fr-ctn article ul li .list blockquote strong {
  font-weight: 700;
}
.base .frame .fr-ctn article ul li .list.bullet .affix::before {
  content: "";
  width: 0.3em;
  height: 0.3em;
  border-radius: 100%;
  background: var(--vanta);
}
.base .frame .fr-ctn article ul li .list.check .affix::before {
  content: "";
  width: 1em;
  height: 1em;
  background: url(../imgs/icon_check.svg) center/cover no-repeat;
}
.base .frame .fr-ctn article ul li dl {
  position: relative;
  display: flex;
  flex-direction: row;
}
.base .frame .fr-ctn article ul li dl dt, .base .frame .fr-ctn article ul li dl dd {
  line-height: 1.5;
}
.base .frame .fr-ctn article ul li dl dt {
  position: absolute;
}
.base .frame .fr-ctn article ul li dl dd {
  padding-left: 1.3em;
}
.base .frame .fr-ctn article[role=img] {
  max-height: unset;
  padding: 0;
}
.base .frame .fr-ctn article[role=img] img {
  vertical-align: bottom;
}
.base .frame .fr-ctn .bellow {
  position: relative;
  max-height: 12vw;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}
.base .frame .fr-ctn .bellow#bellow-notice {
  max-height: 17em;
}
.base .frame .fr-ctn .bellow::after {
  content: "";
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 15%, rgba(255, 255, 255, 0.3) 35%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0.9) 70%, #fff 100%);
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  height: 4vw;
  opacity: 1;
  transition: opacity 0.3s ease;
}
.base .frame .fr-ctn .bellow .btn-read-more {
  position: absolute;
  z-index: 5;
  bottom: 0.5em;
  appearance: none;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.3em;
  border: none;
  border-radius: 3em;
  background: #fdfedb;
  padding: 0.75em 1.25em;
  box-shadow: 0 0.1vw 0.3vw 0.2vw rgba(64, 64, 64, 0.3);
  opacity: 0.9;
  cursor: pointer;
  transform: translateX(-50%);
}
.base .frame .fr-ctn .bellow .btn-read-more span {
  font-size: 1vw;
  line-height: 1;
}
.base .frame .fr-ctn .bellow .btn-read-more span::before {
  content: "閱讀更多";
}
.base .frame .fr-ctn .bellow .btn-read-more i {
  display: block;
  width: 1vw;
  height: 1vw;
  background: url("data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url(%23clip0_7027_16)%22%3E%3Cmask%20id%3D%22mask0_7027_16%22%20style%3D%22mask-type%3Aluminance%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22M20%200H0V20H20V0Z%22%20fill%3D%22white%22%2F%3E%3C%2Fmask%3E%3Cg%20mask%3D%22url(%23mask0_7027_16)%22%3E%3Cmask%20id%3D%22mask1_7027_16%22%20style%3D%22mask-type%3Aluminance%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22M20%200H0V20H20V0Z%22%20fill%3D%22white%22%2F%3E%3C%2Fmask%3E%3Cg%20mask%3D%22url(%23mask1_7027_16)%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M10%200C4.5%200%200%204.5%200%2010C0%2015.5%204.5%2020%2010%2020C15.5%2020%2020%2015.5%2020%2010C20%204.5%2015.5%200%2010%200ZM15%2011H11V15H9V11H5V9H9V5H11V9H15V11Z%22%20fill%3D%22%2366CBFF%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_7027_16%22%3E%3Crect%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E") center/cover no-repeat;
}
.base .frame .fr-ctn .bellow.toggled {
  max-height: 300vw;
  padding-bottom: 4vw;
  overflow: visible;
}
.base .frame .fr-ctn .bellow.toggled::after {
  opacity: 0;
}
.base .frame .fr-ctn .bellow.toggled .btn-read-more span::before {
  content: "收合區塊";
}
.base .frame .fr-ctn .bellow.toggled .btn-read-more i {
  background: url("data:image/svg+xml,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url(%23clip0_7027_6)%22%3E%3Cmask%20id%3D%22mask0_7027_6%22%20style%3D%22mask-type%3Aluminance%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22M20%200H0V20H20V0Z%22%20fill%3D%22white%22%2F%3E%3C%2Fmask%3E%3Cg%20mask%3D%22url(%23mask0_7027_6)%22%3E%3Cmask%20id%3D%22mask1_7027_6%22%20style%3D%22mask-type%3Aluminance%22%20maskUnits%3D%22userSpaceOnUse%22%20x%3D%220%22%20y%3D%220%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22M20%200H0V20H20V0Z%22%20fill%3D%22white%22%2F%3E%3C%2Fmask%3E%3Cg%20mask%3D%22url(%23mask1_7027_6)%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20clip-rule%3D%22evenodd%22%20d%3D%22M0%2010C0%204.5%204.5%200%2010%200C15.5%200%2020%204.5%2020%2010C20%2015.5%2015.5%2020%2010%2020C4.5%2020%200%2015.5%200%2010ZM15%209H5V11H15V9Z%22%20fill%3D%22%2366CBFF%22%2F%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_7027_6%22%3E%3Crect%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E") center/cover no-repeat;
}
.base .frame .fr-ctn .bellow.toggled#bellow-notice {
  max-height: 300vw;
  padding-bottom: 3vw;
  overflow: visible;
}
.base .frame .fr-flex {
  display: flex;
  flex-direction: row;
  gap: 0 1vw;
}
.base .frame .fr-item {
  width: 50%;
  background: var(--wh);
  border-radius: 1.9vw;
}
.base .frame .fr-item figure {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  padding: 1vw;
}
.base .frame .fr-item figure figcaption {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  height: 15vw;
}
.base .frame .fr-item figure figcaption h3, .base .frame .fr-item figure figcaption span {
  font-size: 2vw;
  font-weight: 700;
  text-align: center;
  line-height: 1.2;
  letter-spacing: 0.15em;
}
.base .frame .fr-item figure figcaption span em {
  font-size: 157%;
  display: inline-block;
  vertical-align: baseline;
}
.base .frame .fr-item figure figcaption span small {
  display: block;
  font-size: 52.63%;
  letter-spacing: 0.075em;
  line-height: 1.2;
}
.base .frame .fr-item figure img {
  width: 14.4vw;
}
.base .frame .fr-item:first-of-type {
  border-top-left-radius: 0;
}
.base .frame .fr-item:last-of-type {
  border-top-right-radius: 0;
}
.base .frame .fr-item:last-of-type figure figcaption h3 {
  padding: 1vw 0;
}
.base .frame .fr-item.lone {
  width: 100%;
  margin-top: 1vw;
  border-top-right-radius: 1.9vw;
}
.base .frame .fr-item.lone figure {
  flex-direction: column;
}
.base .frame .fr-item.lone figure figcaption {
  height: auto;
}
.base .frame .fr-item.lone figure figcaption h3 {
  padding: 0.5em 0 1em;
}
.base .frame .fr-item.lone figure figcaption span small {
  display: inline-block;
}
.base .frame .fr-item.lone figure img {
  width: 60.6vw;
}
.base .frame .fr-item.lone figure cite {
  font-size: max(12px, 0.6vw);
  line-height: 1.2;
  display: block;
  padding: 0.5em 0 1.5em;
  width: 94%;
}
.base .frame .fr-item.lone figure .slate {
  font-size: 2.5vw;
  font-weight: 700;
  color: #0368d4;
  text-align: center;
  background: linear-gradient(180deg, #FBD0D9 0%, #F0AEBA 100%);
  border-radius: 3.8vw;
  width: 100%;
  padding: 1.6vw 0;
}
.base h2[role=heading] {
  font-size: 3.1vw;
  font-weight: 900;
  color: var(--wh);
  text-align: center;
  letter-spacing: 0.567em;
  padding: 0.6vw 0 1.7vw;
  text-shadow: 0 0 0.9vw rgba(0, 153, 204, 0.9), 0 0 1vw rgba(0, 153, 204, 0.9), 0 0 1.1vw rgba(0, 153, 204, 0.8);
}
.base h2[role=heading] ins {
  text-decoration: none;
  letter-spacing: 0;
  margin-right: -0.5em;
}
.base .menu {
  position: relative;
  z-index: 2;
  background: transparent;
  margin-top: -6.3vw;
  padding-bottom: 2.1vw;
}
.base .menu ul {
  display: flex;
  justify-content: center;
  gap: 0 3.1vw;
}
.base .menu ul li a {
  display: block;
  border-radius: 3.4vw;
  padding: 0.5vw;
  background: linear-gradient(180.24deg, #B5B4B0 0.21%, #F7F3F0 62.94%, #F7F3F0 96.93%);
}
.base .menu ul li a .bdr {
  --naming: "border";
  border: 0.4vw solid var(--aqua);
  border-radius: 2.6vw;
  overflow: hidden;
}
.base .menu ul li a span {
  color: var(--indigo);
  font-weight: 900;
  font-size: 2.7vw;
  background: linear-gradient(180deg, #FEFEFE 0%, #B3B5B4 100%);
  padding: 0.8vw 3.1vw 1vw;
  display: block;
  white-space: nowrap;
}
.base .menu ul li a:hover {
  text-decoration: none;
}
.base .menu ul li a:hover span {
  text-decoration: none;
}
.base .kv {
  position: relative;
}
.base .kv .btn-menu {
  display: none;
}
.base .notice .aligner {
  padding-bottom: 4vw;
}

/* 【MEDIA QUERIES】 */
@media screen and (max-width: 750px) {
  [pc] {
    display: none !important;
  }
  [mb] {
    display: block !important;
  }
  .base {
    background: linear-gradient(180deg, #8AB6FF 0%, #B9E0FF 100%);
  }
  .base section + section {
    margin-top: 7.3vw;
  }
  .base .aligner {
    margin: 0 auto;
    width: 94.7vw;
  }
  .base .frame {
    border-radius: 6.7vw;
    padding: 2.7vw;
    box-shadow: 0 1.9vw 1.9vw 1.1vw rgba(64, 64, 64, 0.5);
  }
  .base .frame .fr-ctn article {
    border-radius: 0 0 4.8vw 4.8vw;
    padding: 3.7vw 2.4vw;
  }
  .base .frame .fr-ctn article em, .base .frame .fr-ctn article p {
    font-size: 2.7vw;
  }
  .base .frame .fr-ctn article ul li {
    font-size: 2.7vw;
  }
  .base .frame .fr-ctn article ul li sub, .base .frame .fr-ctn article ul li footer {
    font-size: 70%;
    line-height: 1.5;
  }
  .base .frame .fr-ctn article ul li table .cate {
    width: 19%;
  }
  .base .frame .fr-ctn article ul li table .gift strong {
    line-height: 1.5;
  }
  .base .frame .fr-ctn article ul li table .gift mark {
    display: block;
    line-height: 1.5;
  }
  .base .frame .fr-ctn article ul li table .price {
    width: 19%;
  }
  .base .frame .fr-ctn article ul li table .qty {
    width: 16%;
  }
  .base .frame .fr-ctn .bellow {
    max-height: 45vw;
    transition: max-height 0.5s ease-out;
  }
  .base .frame .fr-ctn .bellow .btn-read-more {
    bottom: 1em;
    box-shadow: 0 0.1vw 0.8vw 0.5vw rgba(64, 64, 64, 0.3);
  }
  .base .frame .fr-ctn .bellow .btn-read-more span {
    font-size: 2.7vw;
  }
  .base .frame .fr-ctn .bellow .btn-read-more i {
    width: 2.7vw;
    height: 2.7vw;
  }
  .base .frame .fr-ctn .bellow#bellow-notice {
    max-height: 56vw;
  }
  .base .frame .fr-ctn .bellow.toggled {
    max-height: 700vw;
    padding-bottom: 10vw;
  }
  .base .frame .fr-ctn .bellow.toggled .btn-read-more {
    bottom: 0.5em;
  }
  .base .frame .fr-ctn .bellow#bellow-notice.toggled {
    max-height: 600vw;
    padding-bottom: 11vw;
  }
  .base .frame .fr-flex {
    flex-direction: column;
    gap: 3.3vw 0;
  }
  .base .frame .fr-item {
    width: 100%;
    border-radius: 4vw;
  }
  .base .frame .fr-item figure {
    padding: 2.7vw;
  }
  .base .frame .fr-item figure figcaption {
    justify-content: center;
    width: 40%;
  }
  .base .frame .fr-item figure figcaption h3, .base .frame .fr-item figure figcaption span {
    font-size: 4.8vw;
  }
  .base .frame .fr-item figure img {
    width: 36.8vw;
  }
  .base .frame .fr-item:first-of-type {
    border-top-left-radius: 4vw;
  }
  .base .frame .fr-item:last-of-type {
    border-top-right-radius: 4vw;
  }
  .base .frame .fr-item:last-of-type figure figcaption h3 {
    padding-bottom: 4vw;
  }
  .base .frame .fr-item.lone {
    margin-top: 3.3vw;
  }
  .base .frame .fr-item.lone figure {
    padding: 5.3vw;
    padding-bottom: 2vw;
  }
  .base .frame .fr-item.lone figure figcaption {
    width: auto;
  }
  .base .frame .fr-item.lone figure figcaption h3 {
    padding-top: 0;
  }
  .base .frame .fr-item.lone figure figcaption span:has(small) {
    display: flex;
    justify-content: center;
  }
  .base .frame .fr-item.lone figure img {
    width: 74.5vw;
  }
  .base .frame .fr-item.lone figure cite {
    padding-top: 3em;
  }
  .base .frame .fr-item.lone figure .slate {
    font-size: 5.6vw;
    border-radius: 9.6vw;
    padding: 4.3vw 0;
    margin-bottom: 1vw;
  }
  .base h2[role=heading] {
    font-size: 7.5vw;
    padding: 1.6vw 0 4.3vw;
    text-shadow: 0 0 2.4vw rgba(0, 153, 204, 0.9), 0 0 2.7vw rgba(0, 153, 204, 0.9), 0 0 2.9vw rgba(0, 153, 204, 0.8);
  }
  .base .menu {
    margin-top: -10vw;
    padding-bottom: 14vw;
  }
  .base .menu ul {
    justify-content: space-between;
  }
  .base .menu ul li a {
    border-radius: 8.8vw;
    padding: 0.9vw;
  }
  .base .menu ul li a .bdr {
    border-width: 0.7vw;
    border-radius: 6.7vw;
  }
  .base .menu ul li a span {
    font-size: 4vw;
    padding: 1.6vw 5.1vw 2.1vw;
  }
  .base .menu.opened {
    z-index: 100;
  }
  .base .kv img[role=heading] {
    position: relative;
    z-index: 1;
  }
  .base .kv .btn-menu {
    display: block;
    position: absolute;
    z-index: 101;
    top: 5.7vw;
    right: 4.9vw;
    width: 9.3vw;
    height: 8vw;
    cursor: pointer;
    appearance: none;
    background: transparent;
    border: none;
    line-height: 1;
    place-items: center;
  }
  .base .kv .btn-menu img {
    width: 100%;
  }
  .base .kv .btn-menu .btn-cross {
    display: none;
  }
  .base .kv .btn-menu.opened .btn-lines {
    display: none;
  }
  .base .kv .btn-menu.opened .btn-cross {
    display: block;
  }
  .base .rule {
    margin-top: -8.7vw;
    position: relative;
    z-index: 3;
  }
  .base .notice .aligner {
    padding-bottom: 7vw;
  }
}