@charset "UTF-8";
/*
 * CSS Document
 * ==========================================================================
 * 版權所有 © 鉅潞科技網頁設計公司，並保留所有權利。
 * 網站地址: http://www.grnet.com.tw
 * ==========================================================================
 * $Subhead: 模板二
 * */
@import url("https://fonts.googleapis.com/css2?family=Libre+Bodoni:ital,wght@0,400..600;1,400..600&display=swap");
:root {
  --font-serif-tw: "GenRyuMinTW", "Times New Roman", "PMingLiU", serif;
  --font-serif-jp: "GenRyuMinJP", "Times New Roman", "PMingLiU", serif;
  --font-sans: "Arial", "Microsoft JhengHei UI", "Microsoft JhengHei", sans-serif;
  --font-def: "EBGaramond", "Times New Roman", "PMingLiU", serif;
  --color-gold: #ceb07d;
  --color-gold-cur: #e5c671;
  --color-gold-dark: #ac894d;
  --color-gold-50: rgba(206, 176, 125, .5);
  --color-gold-70: rgba(206, 176, 125, .7);
  --color-gold-30: rgba(206, 176, 125, .3);
  --color-gold-hover: #e8b661;
  --color-title: #d5ba8d;
  --fs-h1: clamp(1.4125rem, 1.2708rem + 0.2951vw, 1.625rem);
  --fs-h2: clamp(1.3125rem, 1.1875rem + 0.2604vw, 1.5rem);
  --fs-h3: clamp(1.25rem, 1.1667rem + 0.1736vw, 1.375rem);
  --fs-h4: clamp(1.1875rem, 1.1458rem + 0.0868vw, 1.25rem);
  --fs-h5: 1.125rem;
  --fs-h6: 1.0625rem;
  --gap: 25px;
  --easeInSine: cubic-bezier(0.47, 0, 0.745, 0.715);
  --easeOutSine: cubic-bezier(0.39, 0.575, 0.565, 1);
  --easeInOutSine: cubic-bezier(0.39, 0.575, 0.565, 1);
  --easeInQuad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --easeOutQuad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --easeInOutQuad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --easeInCubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --easeOutCubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --easeInOutCubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --easeInQuart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  --easeOutQuart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --easeInOutQuart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --easeInQuint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  --easeOutQuint: cubic-bezier(0.23, 1, 0.32, 1);
  --easeInOutQuint: cubic-bezier(0.23, 1, 0.32, 1);
  --easeInExpo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
  --easeOutExpo: cubic-bezier(0.19, 1, 0.22, 1);
  --easeInOutExpo: cubic-bezier(0.19, 1, 0.22, 1);
  --easeInCirc: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  --easeOutCirc: cubic-bezier(0.075, 0.82, 0.165, 1);
  --easeInOutCirc: cubic-bezier(0.075, 0.82, 0.165, 1);
  --easeInBack: cubic-bezier(0.6, -0.28, 0.735, 0.045);
  --easeOutBack: cubic-bezier(0.175, 0.885, 0.32, 1.275);
  --easeInOutBack: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.event2 {
  --w-wrap: calc(100% - 110px - 4.4cm);
  --w-arrow: calc(2.2cm + 70px);
  --color-highlight-rgb: 189 146 84;
  --color-text: #bd9254;
  --fs-title-lg: clamp(2rem, 0.4167rem + 3.2986vw, 4.375rem);
  --fs-title: clamp(1.65rem, 0.8333rem + 1.9097vw, 3.125rem);
  --fs-subtitle: clamp(1.4125rem, 0.8333rem + 1.3889vw, 2.5rem);
  --fs-context: clamp(1.125rem, 0.8004rem + 0.8955vw, 1.875rem);
  --fs-tag: clamp(1rem, 0.6667rem + 0.6944vw, 1.5rem);
  background: #000000;
  font-size: var(--fs-context);
  line-height: 2;
  font-family: var(--font-serif-tw);
}
.event2 ::-moz-selection {
  background: rgb(var(--color-highlight-rgb)/80%);
  color: #fff;
}
.event2 ::selection {
  background: rgb(var(--color-highlight-rgb)/80%);
  color: #fff;
}
.event2 ::-moz-selection {
  background: rgb(var(--color-highlight-rgb)/80%);
  color: #fff;
}
.event2 .warning-msg {
  background-color: rgb(var(--color-highlight-rgb));
}
.event2 .event2-inner {
  overflow: hidden;
}
.event2 .sec-products {
  background: url(../images/event2/p_bg.jpg) no-repeat center bottom #000000 !important;
}
.event2 .sec-order {
  background: -webkit-gradient(linear, left bottom, left top, color-stop(50%, #121212), to(black));
  background: linear-gradient(0deg, #121212 50%, black 100%);
}
.event2 .mfp-flavor .mfp-content {
  background: rgba(5, 5, 5, 0.8);
  border: 1px solid #847043;
}
.event2 .num-deco {
  display: inline !important;
  font-weight: 600;
  font-family: "Libre Bodoni", "GenRyuMinTW", "Times New Roman", "PMingLiU", serif;
}
.event2 .sec-title {
  position: relative;
  font-weight: 700;
  color: #fff;
  font-size: var(--fs-title);
  display: block;
  margin-bottom: 0.6em;
  margin-top: 0.5em;
  line-height: 1.05;
}
.event2 .sec-title .stitle {
  font-size: 0.8em;
  font-weight: 500;
  margin-bottom: 0.6em;
  display: block;
  line-height: 1.2;
  color: var(--color-text);
}
.event2 .sec-title.lg {
  font-size: var(--fs-title-lg);
}
.event2 .sec-title.underline {
  margin-bottom: 0.6em;
  padding-bottom: 0.5em;
}
.event2 .sec-title.underline::after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0) 80%);
}
.event2 .sec-subtitle {
  font-weight: 600;
  position: relative;
  font-size: var(--fs-subtitle);
  line-height: 1.05;
  display: block;
  margin-bottom: 0.6em;
}
.event2 .desc {
  display: block;
  letter-spacing: 0.06em;
}
.event2 .desc .breakline {
  display: block;
}
.event2 .tag {
  font-size: var(--fs-tag);
  font-style: normal;
  line-height: 1.1;
  color: var(--color-text);
  display: inline-block;
  padding: 0.18em 0.5em 0.05em 0.5em;
  margin-bottom: 1em;
  letter-spacing: 0.05em;
  border: 1px solid var(--color-text);
  font-family: "Libre Bodoni", "GenRyuMinTW", "Times New Roman", "PMingLiU", serif;
}
.event2 .sec-full-r-text-l-img,
.event2 .sec-full-r-img-l-text,
.event2 .sec-r-text-l-img,
.event2 .sec-r-img-l-text,
.event2 .sec-c-img-c-text {
  position: relative;
}
.event2 .sec-full-r-text-l-img .bg,
.event2 .sec-full-r-img-l-text .bg,
.event2 .sec-r-text-l-img .bg,
.event2 .sec-r-img-l-text .bg,
.event2 .sec-c-img-c-text .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.event2 .sec-full-r-text-l-img .bg img, .event2 .sec-full-r-text-l-img .bg source, .event2 .sec-full-r-text-l-img .bg iframe, .event2 .sec-full-r-text-l-img .bg video,
.event2 .sec-full-r-img-l-text .bg img,
.event2 .sec-full-r-img-l-text .bg source,
.event2 .sec-full-r-img-l-text .bg iframe,
.event2 .sec-full-r-img-l-text .bg video,
.event2 .sec-r-text-l-img .bg img,
.event2 .sec-r-text-l-img .bg source,
.event2 .sec-r-text-l-img .bg iframe,
.event2 .sec-r-text-l-img .bg video,
.event2 .sec-r-img-l-text .bg img,
.event2 .sec-r-img-l-text .bg source,
.event2 .sec-r-img-l-text .bg iframe,
.event2 .sec-r-img-l-text .bg video,
.event2 .sec-c-img-c-text .bg img,
.event2 .sec-c-img-c-text .bg source,
.event2 .sec-c-img-c-text .bg iframe,
.event2 .sec-c-img-c-text .bg video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center bottom;
     object-position: center bottom;
}
.event2 .sec-full-r-text-l-img .container,
.event2 .sec-full-r-img-l-text .container,
.event2 .sec-r-text-l-img .container,
.event2 .sec-r-img-l-text .container,
.event2 .sec-c-img-c-text .container {
  position: relative;
  z-index: 5;
  min-height: max(90vh, 50vw);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  max-width: var(--w-wrap);
}
.event2 .sec-full-r-text-l-img .text,
.event2 .sec-full-r-img-l-text .text,
.event2 .sec-r-text-l-img .text,
.event2 .sec-r-img-l-text .text,
.event2 .sec-c-img-c-text .text {
  position: relative;
}
.event2 .sec-full-r-text-l-img .container {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.event2 .sec-full-r-text-l-img .text {
  display: inline-block;
  text-align: center;
}
.event2 .sec-full-r-text-l-img .text > * {
  position: relative;
  z-index: 5;
}
.event2 .sec-full-r-text-l-img .text::before {
  content: "";
  display: block;
  position: absolute;
  width: 220%;
  height: 130%;
  background: radial-gradient(closest-side, rgba(152, 93, 1, 0.86) 10%, rgba(0, 0, 0, 0) 82%);
  left: 60%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.event2 .sec-full-r-img-l-text .container {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
.event2 .sec-full-r-img-l-text .text {
  display: inline-block;
  text-align: center;
}
.event2 .sec-full-r-img-l-text .text > * {
  position: relative;
  z-index: 5;
}
.event2 .sec-full-r-img-l-text .text::before {
  content: "";
  display: block;
  position: absolute;
  width: 220%;
  height: 130%;
  background: radial-gradient(closest-side, rgba(152, 93, 1, 0.86) 10%, rgba(0, 0, 0, 0) 82%);
  left: 40%;
  top: 55%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.event2 .sec-r-img-l-text .container {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}
.event2 .sec-r-text-l-img .container {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.event2 .sec-c-img-c-text {
  text-align: center;
}
.event2 .sec-c-img-c-text .container {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.event2 .topic1 .text::after {
  content: "";
  display: block;
  position: absolute;
  width: 100vw;
  aspect-ratio: 1920/623;
  z-index: 2;
  left: 0;
  top: 0;
  -webkit-transform: translate(0, -60%);
      -ms-transform: translate(0, -60%);
          transform: translate(0, -60%);
  background: url(../images/event2/deco2.svg) no-repeat 0 0/auto 100%;
  -webkit-mask-image: -webkit-gradient(linear, left bottom, left top, from(transparent), color-stop(10%, black));
  -webkit-mask-image: linear-gradient(0deg, transparent 0%, black 10%);
          mask-image: -webkit-gradient(linear, left bottom, left top, from(transparent), color-stop(10%, black));
          mask-image: linear-gradient(0deg, transparent 0%, black 10%);
}
.event2 .topic2 .text::after {
  content: "";
  display: block;
  position: absolute;
  width: 100vw;
  aspect-ratio: 1920/623;
  z-index: 2;
  left: 0;
  top: 0;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background: url(../images/event2/deco2.svg) no-repeat 100% 0/auto 100%;
  -webkit-mask-image: -webkit-gradient(linear, right top, left top, color-stop(60%, black), color-stop(65%, transparent));
  -webkit-mask-image: linear-gradient(-90deg, black 60%, transparent 65%);
          mask-image: -webkit-gradient(linear, right top, left top, color-stop(60%, black), color-stop(65%, transparent));
          mask-image: linear-gradient(-90deg, black 60%, transparent 65%);
}
.event2 .topic3 .container {
  padding-top: max(50px, 4vw);
  -webkit-box-align: start !important;
      -ms-flex-align: start !important;
          align-items: flex-start !important;
}
.event2 .topic3 .img {
  width: max(250px, 14vw);
  aspect-ratio: 304/229;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2vh;
}
.event2 .topic4 .text {
  width: 100%;
}
.event2 .topic4 .sec-title {
  font-size: var(--fs-title-lg);
  font-weight: 900;
  color: #bb9263;
  letter-spacing: 0.2em;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.event2 .topic4 .sec-title > * {
  position: relative;
  z-index: 5;
}
.event2 .topic4 .sec-title::before {
  content: "";
  display: block;
  position: absolute;
  width: 150%;
  height: 190%;
  background: radial-gradient(closest-side, rgba(152, 93, 1, 0.86) 10%, rgba(0, 0, 0, 0) 82%);
  left: 50%;
  top: 38%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  opacity: 0.8;
}
.event2 .topic4 .sec-subtitle {
  font-size: var(--fs-title);
  color: var(--color-text);
  letter-spacing: 0.12em;
  margin-bottom: 1em;
}
.event2 .giftbox1 .sec-title, .event2 .giftbox2 .sec-title {
  letter-spacing: 0.05em;
  margin-bottom: 0.3em;
}
.event2 .giftbox1 .text, .event2 .giftbox2 .text {
  text-align: center;
}
.event2 .giftbox1 .sec-title.underline::after, .event2 .giftbox2 .sec-title.underline::after {
  width: 150%;
  left: 50%;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
}
.event2 .giftbox3-1 .text, .event2 .giftbox3-2 .text,
.event2 .giftbox4-1 .text, .event2 .giftbox4-2 .text {
  min-width: 40%;
  line-height: 1.6;
}
.event2 .giftbox3-1 .sec-title, .event2 .giftbox3-2 .sec-title,
.event2 .giftbox4-1 .sec-title, .event2 .giftbox4-2 .sec-title {
  margin-bottom: 0.5em;
  padding-bottom: 0.35em;
  letter-spacing: 0.05em;
  line-height: 1.5;
  color: var(--color-text);
}
.event2 .giftbox3-1 .text, .event2 .giftbox3-2 .text {
  text-align: right;
}
.event2 .giftbox3-1 .sec-title.underline::after, .event2 .giftbox3-2 .sec-title.underline::after {
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0.8)));
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.8) 50%);
}
.event2 .giftbox4-1 .text, .event2 .giftbox4-2 .text {
  text-align: left;
}
.event2 .giftbox4-1 .sec-title.underline::after, .event2 .giftbox4-2 .sec-title.underline::after {
  background: -webkit-gradient(linear, left top, right top, color-stop(50%, rgba(255, 255, 255, 0.8)), to(rgba(255, 255, 255, 0)));
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0) 100%);
}
.event2 .giftbox-slider {
  position: relative;
}
.event2 .giftbox-slider .slick-dots {
  position: absolute;
  bottom: 5vh;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}
.event2 .giftbox-slider .slick-dots li {
  display: inline-block;
  vertical-align: middle;
  margin: 0;
  padding: calc(max(10px, 1.56vw) * 0.5);
}
.event2 .giftbox-slider .slick-dots li.slick-active button {
  opacity: 1;
}
.event2 .giftbox-slider .slick-dots button {
  cursor: pointer;
  width: max(10px, 1.56vw);
  aspect-ratio: 1;
  border-radius: 50px;
  font-size: 0;
  border: none;
  background-color: #fff;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
  opacity: 0.4;
}
.event2 .giftbox-slider .slick-dots button:hover {
  opacity: 0.8;
}
.event2 .giftbox-slider .slick-arrow {
  width: var(--w-arrow);
  height: 100%;
  top: 0;
  z-index: 15;
  -webkit-transform: none;
      -ms-transform: none;
          transform: none;
  margin: 0;
  position: absolute;
  font-size: 0;
  opacity: 0.6;
  -webkit-transition: opacity 0.25s;
  transition: opacity 0.25s;
}
.event2 .giftbox-slider .slick-arrow::before {
  content: "";
  display: block;
  width: max(15px, 1.56vw);
  aspect-ratio: 30/72;
  background: url(../images/event2/arrow.svg) no-repeat 0 0/contain;
  top: 50%;
  border: none;
  -webkit-transition: -webkit-transform 0.25s;
  transition: -webkit-transform 0.25s;
  transition: transform 0.25s;
  transition: transform 0.25s, -webkit-transform 0.25s;
}
.event2 .giftbox-slider .slick-arrow.slick-prev {
  left: 0;
}
.event2 .giftbox-slider .slick-arrow.slick-prev::before {
  left: 50%;
  -webkit-transform: scaleX(-1) translate(0, -50%);
      -ms-transform: scaleX(-1) translate(0, -50%);
          transform: scaleX(-1) translate(0, -50%);
}
.event2 .giftbox-slider .slick-arrow.slick-prev:hover {
  opacity: 1;
}
.event2 .giftbox-slider .slick-arrow.slick-prev:hover::before {
  -webkit-transform: scaleX(-1) translate(5px, -50%);
      -ms-transform: scaleX(-1) translate(5px, -50%);
          transform: scaleX(-1) translate(5px, -50%);
}
.event2 .giftbox-slider .slick-arrow.slick-next {
  right: 0;
}
.event2 .giftbox-slider .slick-arrow.slick-next::before {
  right: 50%;
  -webkit-transform: translate(0, -50%);
      -ms-transform: translate(0, -50%);
          transform: translate(0, -50%);
}
.event2 .giftbox-slider .slick-arrow.slick-next:hover {
  opacity: 1;
}
.event2 .giftbox-slider .slick-arrow.slick-next:hover::before {
  -webkit-transform: translate(5px, -50%);
      -ms-transform: translate(5px, -50%);
          transform: translate(5px, -50%);
}
.event2 .giftbox-slider::before {
  content: "";
  pointer-events: none;
  display: block;
  position: absolute;
  z-index: 10;
  width: max(500px, 45vw);
  aspect-ratio: 775/708;
  background: url(../images/event2/deco.svg) no-repeat 0 0/contain;
}
.event2 .giftbox-slider.slider1 {
  z-index: 8;
}
.event2 .giftbox-slider.slider1::before {
  left: 0;
  top: 0;
  -webkit-transform: translate(-43%, -50%);
      -ms-transform: translate(-43%, -50%);
          transform: translate(-43%, -50%);
}
.event2 .giftbox-slider.slider2 {
  z-index: 10;
}
.event2 .giftbox-slider.slider2::before {
  right: 0;
  top: 0;
  -webkit-transform: translate(64%, -55%);
      -ms-transform: translate(64%, -55%);
          transform: translate(64%, -55%);
}
.event2 .giftbox-slider.slider2::after {
  content: "";
  display: block;
  position: absolute;
  pointer-events: none;
  left: 0;
  bottom: 0;
  -webkit-transform: translate(-43%, 30%);
      -ms-transform: translate(-43%, 30%);
          transform: translate(-43%, 30%);
  z-index: 10;
  width: max(450px, 35vw);
  aspect-ratio: 775/708;
  background: url(../images/event2/deco.svg) no-repeat 0 0/contain;
}

@media (min-width: 600px) and (max-height: 839px) {
  .event2 {
    --fs-title-lg: clamp(2rem, 1.5131rem + 1.3433vw, 3.125rem);
    --fs-title: clamp(1.875rem, 1.6045rem + 0.7463vw, 2.5rem);
    --fs-subtitle: clamp(1.375rem, 0.9963rem + 1.0448vw, 2.25rem);
    --fs-context: clamp(1rem, 0.7295rem + 0.7463vw, 1.625rem);
    --fs-tag: clamp(0.875rem, 0.7127rem + 0.4478vw, 1.25rem);
  }
  .event2 .sec-full-r-text-l-img .container,
  .event2 .sec-full-r-img-l-text .container,
  .event2 .sec-r-text-l-img .container,
  .event2 .sec-r-img-l-text .container,
  .event2 .sec-c-img-c-text .container {
    min-height: auto;
    height: 90vh;
    padding-bottom: 5vh;
  }
  .event2 .topic1 .bg img, .event2 .topic1 .bg source, .event2 .topic1 .bg iframe, .event2 .topic1 .bg video {
    -o-object-position: left 75%;
       object-position: left 75%;
  }
  .event2 .topic2 .bg img, .event2 .topic2 .bg source, .event2 .topic2 .bg iframe, .event2 .topic2 .bg video {
    -o-object-position: right 75%;
       object-position: right 75%;
  }
  .event2 .topic3 .img {
    width: max(180px, 13vw);
  }
}
@media (min-width: 768px) and (max-height: 839px) {
  .event2 .sec-full-r-text-l-img .bg img, .event2 .sec-full-r-text-l-img .bg source, .event2 .sec-full-r-text-l-img .bg iframe, .event2 .sec-full-r-text-l-img .bg video,
  .event2 .sec-full-r-img-l-text .bg img,
  .event2 .sec-full-r-img-l-text .bg source,
  .event2 .sec-full-r-img-l-text .bg iframe,
  .event2 .sec-full-r-img-l-text .bg video,
  .event2 .sec-r-text-l-img .bg img,
  .event2 .sec-r-text-l-img .bg source,
  .event2 .sec-r-text-l-img .bg iframe,
  .event2 .sec-r-text-l-img .bg video,
  .event2 .sec-r-img-l-text .bg img,
  .event2 .sec-r-img-l-text .bg source,
  .event2 .sec-r-img-l-text .bg iframe,
  .event2 .sec-r-img-l-text .bg video,
  .event2 .sec-c-img-c-text .bg img,
  .event2 .sec-c-img-c-text .bg source,
  .event2 .sec-c-img-c-text .bg iframe,
  .event2 .sec-c-img-c-text .bg video {
    -o-object-fit: contain;
       object-fit: contain;
  }
  .event2 .sec-full-r-text-l-img .bg img, .event2 .sec-full-r-text-l-img .bg source, .event2 .sec-full-r-text-l-img .bg iframe, .event2 .sec-full-r-text-l-img .bg video,
  .event2 .sec-r-text-l-img .bg img,
  .event2 .sec-r-text-l-img .bg source,
  .event2 .sec-r-text-l-img .bg iframe,
  .event2 .sec-r-text-l-img .bg video {
    -o-object-position: 25% bottom;
       object-position: 25% bottom;
  }
  .event2 .sec-full-r-img-l-text .bg img, .event2 .sec-full-r-img-l-text .bg source, .event2 .sec-full-r-img-l-text .bg iframe, .event2 .sec-full-r-img-l-text .bg video,
  .event2 .sec-r-img-l-text .bg img,
  .event2 .sec-r-img-l-text .bg source,
  .event2 .sec-r-img-l-text .bg iframe,
  .event2 .sec-r-img-l-text .bg video {
    -o-object-position: 80% bottom;
       object-position: 80% bottom;
  }
  .event2 .topic1 .bg img, .event2 .topic1 .bg source, .event2 .topic1 .bg iframe, .event2 .topic1 .bg video {
    -o-object-position: left bottom;
       object-position: left bottom;
  }
  .event2 .topic2 .bg img, .event2 .topic2 .bg source, .event2 .topic2 .bg iframe, .event2 .topic2 .bg video {
    -o-object-position: right 25%;
       object-position: right 25%;
  }
  .event2 .topic3 .container {
    min-height: auto !important;
    padding-bottom: calc(min(400px, 100vw) * 0.6) !important;
  }
}
@media (min-width: 600px) {
  .event2 .sec-full-r-img-l-text .container,
  .event2 .sec-r-img-l-text .container {
    padding-left: 1.2322916667cm;
  }
  .event2 .xxs-show {
    display: none !important;
  }
}
@media (min-width: 992px) and (min-height: 768px) {
  .event2 .sec-products {
    background-position: center 120% !important;
  }
}
@media (min-width: 992px) and (min-height: 768px) and (min-width: 992px) {
  .sec-full-r-img-l-text .container,
  .sec-r-img-l-text .container {
    padding-left: 1.7614583333cm;
  }
}
@media (max-width: 991px) {
  .event2 {
    --w-wrap: calc(100% - 100px - 1.1cm);
    --w-arrow: calc(1.1cm + 50px);
  }
  .event2 .giftbox1 .text, .event2 .giftbox2 .text,
  .event2 .giftbox3-1 .text, .event2 .giftbox3-2 .text,
  .event2 .giftbox4-1 .text, .event2 .giftbox4-2 .text {
    width: auto;
  }
}
@media (max-width: 767px) {
  .event2 {
    --w-arrow: 70px;
    --fs-context: clamp(1rem, 0.2287rem + 2.1277vw, 1.25rem);
  }
  .event2 .sec-products {
    background: url(../images/event2/p_bg_mb.jpg) repeat-y center bottom #000 !important;
  }
  .event2 .desc {
    letter-spacing: 0 !important;
  }
  .event2 .sec-title {
    line-height: 1.4;
  }
  .event2 .sec-title span {
    display: inline-block;
    white-space: nowrap;
  }
  .event2 .sec-subtitle {
    line-height: 1.4;
  }
  .event2 .sec-full-r-text-l-img .container,
  .event2 .sec-full-r-img-l-text .container,
  .event2 .sec-r-text-l-img .container,
  .event2 .sec-r-img-l-text .container,
  .event2 .sec-c-img-c-text .container {
    padding-top: max(50px, 10vw);
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    min-height: max(90vh, min(500px, 100vw) * 1.5);
    padding-bottom: calc(min(500px, 100vw) * 1.5);
  }
  .event2 .topic3 .container {
    min-height: auto;
    padding-bottom: min(500px, 100vw);
  }
  .event2 .topic4 {
    height: auto;
  }
  .event2 .topic4::before {
    content: "";
    height: 15vh;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    pointer-events: none;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, rgb(0, 0, 0)), to(rgba(0, 0, 0, 0)));
    background: linear-gradient(180deg, rgb(0, 0, 0) 10%, rgba(0, 0, 0, 0) 100%);
  }
  .event2 .topic4 .container {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: max(50px, 10vw);
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    min-height: max(50vh, min(500px, 100vw) * 1.3);
  }
  .event2 .topic4 .sec-title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .event2 .topic4 .desc {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .event2 .giftbox1 .container, .event2 .giftbox2 .container {
    padding-top: max(20px, 3vh);
  }
  .event2 .giftbox-slider::before, .event2 .giftbox-slider::after {
    display: none !important;
  }
}
@media (min-width: 600px) and (max-width: 767px) {
  .event2 .giftbox3-1 .container, .event2 .giftbox3-2 .container {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }
  .event2 .giftbox4-1 .container, .event2 .giftbox4-2 .container {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }
}
@media (max-width: 599px) {
  .event2 .xxs-hide {
    display: none !important;
  }
  .event2 .xxs-show {
    display: inline !important;
  }
  .event2 .xxs-block {
    display: block !important;
    white-space: nowrap;
  }
  .event2 .sec-title, .event2 .sec-subtitle {
    letter-spacing: 0 !important;
  }
  .event2 .sec-title.underline {
    margin-bottom: 0.7em;
  }
  .event2 .sec-full-r-text-l-img .container,
  .event2 .sec-full-r-img-l-text .container,
  .event2 .sec-r-text-l-img .container,
  .event2 .sec-r-img-l-text .container,
  .event2 .sec-c-img-c-text .container {
    min-height: auto;
    padding-bottom: calc(max(400px, 100vw) * 0.8);
  }
  .event2 .topic3 .container {
    padding-bottom: min(45vh, 85vw);
  }
  .event2 .topic4 .container {
    padding-bottom: 25%;
  }
  .event2 .topic1 .desc, .event2 .topic2 .desc, .event2 .topic4 .desc {
    display: inline !important;
  }
  .event2 .topic1 .desc .breakline, .event2 .topic2 .desc .breakline, .event2 .topic4 .desc .breakline {
    display: inline !important;
    white-space: normal !important;
  }
  .event2 .topic1 .xxs-block, .event2 .topic2 .xxs-block, .event2 .topic4 .xxs-block {
    display: inline !important;
    white-space: normal !important;
  }
  .event2 .topic1 .xxs-hide, .event2 .topic1 .xxs-show, .event2 .topic2 .xxs-hide, .event2 .topic2 .xxs-show, .event2 .topic4 .xxs-hide, .event2 .topic4 .xxs-show {
    display: inline-block !important;
  }
  .event2 .giftbox3-1 .sec-title.underline::after, .event2 .giftbox3-2 .sec-title.underline::after,
  .event2 .giftbox4-1 .sec-title.underline::after, .event2 .giftbox4-2 .sec-title.underline::after {
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 150%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, 0.8) 10%, rgba(255, 255, 255, 0) 80%);
  }
  .event2 .giftbox3-1 .sec-title > *, .event2 .giftbox3-2 .sec-title > *,
  .event2 .giftbox4-1 .sec-title > *, .event2 .giftbox4-2 .sec-title > * {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .event2 .giftbox3-1 .container, .event2 .giftbox3-2 .container,
  .event2 .giftbox4-1 .container, .event2 .giftbox4-2 .container {
    padding-left: 0;
    padding-right: 0;
    min-height: max(40vh, min(500px, 100vw) * 1.5);
  }
  .event2 .giftbox3-1 .text, .event2 .giftbox3-2 .text,
  .event2 .giftbox4-1 .text, .event2 .giftbox4-2 .text {
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
/*
 * 動畫
 */
.event2 [data-scrollview] .bg {
  opacity: 0;
  -webkit-transition: opacity 1.5s ease-in-out;
  transition: opacity 1.5s ease-in-out;
}
.event2 [data-scrollview].scroll-view .bg {
  opacity: 1;
  -webkit-transition-delay: 0.17s;
          transition-delay: 0.17s;
}

.topic3[data-scrollview] .img {
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
  opacity: 0;
  -webkit-transition: opacity 1.5s ease, -webkit-transform 1.75s ease;
  transition: opacity 1.5s ease, -webkit-transform 1.75s ease;
  transition: opacity 1.5s ease, transform 1.75s ease;
  transition: opacity 1.5s ease, transform 1.75s ease, -webkit-transform 1.75s ease;
}
.topic3.scroll-view .img {
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
  -webkit-transition-delay: 0.15s, 0.1s;
          transition-delay: 0.15s, 0.1s;
}

.giftbox1[data-scrollview] .text, .giftbox2[data-scrollview] .text {
  -webkit-transform: translateY(20px);
      -ms-transform: translateY(20px);
          transform: translateY(20px);
  opacity: 0;
  -webkit-transition: opacity 1.25s ease, -webkit-transform 1.75s ease;
  transition: opacity 1.25s ease, -webkit-transform 1.75s ease;
  transition: opacity 1.25s ease, transform 1.75s ease;
  transition: opacity 1.25s ease, transform 1.75s ease, -webkit-transform 1.75s ease;
}
.giftbox1.scroll-view .text, .giftbox2.scroll-view .text {
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
  opacity: 1;
  -webkit-transition-delay: 0.15s, 0.1s;
          transition-delay: 0.15s, 0.1s;
}

.giftbox-slider.scroll-view .slick-slide .text, .giftbox-slider.scroll-view .slick-slide .bg {
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}
.giftbox-slider.scroll-view .slick-slide.in .text, .giftbox-slider.scroll-view .slick-slide.in .bg {
  opacity: 1;
  -webkit-transition-delay: 0.25s;
          transition-delay: 0.25s;
}
.giftbox-slider.scroll-view .slick-slide.out:not(.slick-active) .text, .giftbox-slider.scroll-view .slick-slide.out:not(.slick-active) .bg {
  opacity: 0;
  -webkit-transition-delay: 0.15s;
          transition-delay: 0.15s;
}

@media (min-width: 768px) {
  .topic1[data-scrollview] .text {
    -webkit-transform: translateX(10%);
        -ms-transform: translateX(10%);
            transform: translateX(10%);
    opacity: 0;
    -webkit-transition: opacity 1s ease, -webkit-transform 1.75s ease;
    transition: opacity 1s ease, -webkit-transform 1.75s ease;
    transition: opacity 1s ease, transform 1.75s ease;
    transition: opacity 1s ease, transform 1.75s ease, -webkit-transform 1.75s ease;
  }
  .topic1.scroll-view .text {
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
    -webkit-transition-delay: 0.15s, 0.1s;
            transition-delay: 0.15s, 0.1s;
  }
  .topic2[data-scrollview] .text {
    -webkit-transform: translateX(-10%);
        -ms-transform: translateX(-10%);
            transform: translateX(-10%);
    opacity: 0;
    -webkit-transition: opacity 1s ease, -webkit-transform 1.75s ease;
    transition: opacity 1s ease, -webkit-transform 1.75s ease;
    transition: opacity 1s ease, transform 1.75s ease;
    transition: opacity 1s ease, transform 1.75s ease, -webkit-transform 1.75s ease;
  }
  .topic2.scroll-view .text {
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
    -webkit-transition-delay: 0.15s, 0.1s;
            transition-delay: 0.15s, 0.1s;
  }
  .topic4[data-scrollview] .sec-title, .topic4[data-scrollview] .sec-subtitle {
    -webkit-transform: translateX(50px);
        -ms-transform: translateX(50px);
            transform: translateX(50px);
    opacity: 0;
    -webkit-transition: opacity 1.25s ease, -webkit-transform 1.75s ease;
    transition: opacity 1.25s ease, -webkit-transform 1.75s ease;
    transition: opacity 1.25s ease, transform 1.75s ease;
    transition: opacity 1.25s ease, transform 1.75s ease, -webkit-transform 1.75s ease;
  }
  .topic4[data-scrollview] .desc {
    -webkit-transform: translateX(-45px);
        -ms-transform: translateX(-45px);
            transform: translateX(-45px);
    opacity: 0;
    -webkit-transition: opacity 1.25s ease, -webkit-transform 1.75s ease;
    transition: opacity 1.25s ease, -webkit-transform 1.75s ease;
    transition: opacity 1.25s ease, transform 1.75s ease;
    transition: opacity 1.25s ease, transform 1.75s ease, -webkit-transform 1.75s ease;
  }
  .topic4.scroll-view .sec-title, .topic4.scroll-view .sec-subtitle {
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
    -webkit-transition-delay: 0.15s;
            transition-delay: 0.15s;
  }
  .topic4.scroll-view .desc {
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
    -webkit-transition-delay: 0.2s;
            transition-delay: 0.2s;
  }
}
@media (max-width: 767px) {
  .topic1[data-scrollview] .text {
    -webkit-transform: translateY(10%);
        -ms-transform: translateY(10%);
            transform: translateY(10%);
    opacity: 0;
    -webkit-transition: opacity 1s ease, -webkit-transform 1.75s ease;
    transition: opacity 1s ease, -webkit-transform 1.75s ease;
    transition: opacity 1s ease, transform 1.75s ease;
    transition: opacity 1s ease, transform 1.75s ease, -webkit-transform 1.75s ease;
  }
  .topic1.scroll-view .text {
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
    -webkit-transition-delay: 0.15s, 0.1s;
            transition-delay: 0.15s, 0.1s;
  }
  .topic2[data-scrollview] .text {
    -webkit-transform: translateY(10%);
        -ms-transform: translateY(10%);
            transform: translateY(10%);
    opacity: 0;
    -webkit-transition: opacity 1s ease, -webkit-transform 1.75s ease;
    transition: opacity 1s ease, -webkit-transform 1.75s ease;
    transition: opacity 1s ease, transform 1.75s ease;
    transition: opacity 1s ease, transform 1.75s ease, -webkit-transform 1.75s ease;
  }
  .topic2.scroll-view .text {
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
    -webkit-transition-delay: 0.15s, 0.1s;
            transition-delay: 0.15s, 0.1s;
  }
  .topic4[data-scrollview] .sec-title, .topic4[data-scrollview] .sec-subtitle {
    -webkit-transform: translateY(40px);
        -ms-transform: translateY(40px);
            transform: translateY(40px);
    opacity: 0;
    -webkit-transition: opacity 1.25s ease, -webkit-transform 1.75s ease;
    transition: opacity 1.25s ease, -webkit-transform 1.75s ease;
    transition: opacity 1.25s ease, transform 1.75s ease;
    transition: opacity 1.25s ease, transform 1.75s ease, -webkit-transform 1.75s ease;
  }
  .topic4[data-scrollview] .desc {
    -webkit-transform: translateY(35px);
        -ms-transform: translateY(35px);
            transform: translateY(35px);
    opacity: 0;
    -webkit-transition: opacity 1.25s ease, -webkit-transform 1.75s ease;
    transition: opacity 1.25s ease, -webkit-transform 1.75s ease;
    transition: opacity 1.25s ease, transform 1.75s ease;
    transition: opacity 1.25s ease, transform 1.75s ease, -webkit-transform 1.75s ease;
  }
  .topic4.scroll-view .sec-title, .topic4.scroll-view .sec-subtitle {
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
    -webkit-transition-delay: 0.15s;
            transition-delay: 0.15s;
  }
  .topic4.scroll-view .desc {
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0);
    opacity: 1;
    -webkit-transition-delay: 0.2s;
            transition-delay: 0.2s;
  }
}