@charset "utf-8";

:root { --page-pink: #df8fa6; --accent-red: #db4254; }
html { scroll-behavior: smooth; }
body { margin: 0; padding: 0; background: var(--page-pink); }
ul { margin: 0; padding: 0; }
li { list-style: none; }
.for_phone, .for_m { display: none !important; }

.WRAPPER { position: relative; width: 100%; min-width: 1220px; margin: 0 auto; overflow: hidden; color: #31201f; font-family: "Noto Sans TC", "Microsoft JhengHei", Arial, sans-serif; }
.WRAPPER * { box-sizing: border-box; }
.WRAPPER img { max-width: 100%; border: 0; vertical-align: top; }
.WRAPPER a { display: inline-block; text-decoration: none; }
.Area_header_momologo { position: relative; z-index: 999; display: none; height: 44px; background: #f4f4f4; text-align: center; }
.Area_header_momologo a { color: #ea27c2; font: 800 24px/44px Arial, sans-serif; }

.Area_bg, .mobile-page-bg { position: absolute; inset: 0; z-index: -5; pointer-events: none; }
.bg_01 { width: 100%; height: 100%; min-height: 12618px; background: #df8fa6 url("pc_bg.jpg?t=1790926309062") center top / 2000px auto repeat-y; }
.NavArea_tabbar { z-index: 200; width: 100%; margin: 0 auto; }
.NavArea_tabbar .Nav_box { border-radius: 0; background: #f6f6f6; }
.NavArea_tabbar.cate-fixed .Nav_box { border-radius: 0; background: #fff; }
.NavArea_tabbar .Nav li { vertical-align: top; }
.NavArea_tabbar .Nav a,
.NavArea_tabbar .Nav a span { height: 44px; line-height: 44px; white-space: nowrap; }
.NavArea_tabbar .Nav a br { display: none; }

.Area_top { position: relative; width: 100%; height:1344px}
.hero-image { display: block; width: 2000px; max-width: none; margin: 0 auto; }
.campaign-date { position: absolute; top: 14.5%; left: 50%; z-index: 4; display: flex; width: 220px; height: 220px; margin-left: 205px; border: 3px solid rgba(255,255,255,.82); border-radius: 50%; background: linear-gradient(145deg, #efb08e 0%, #ef6677 78%); box-shadow: 0 6px 12px rgba(117,49,62,.4), inset 0 0 15px rgba(255,255,255,.35); color: #fff; flex-direction: column; align-items: center; justify-content: center; font: italic 56px/.82 Arial, sans-serif; text-shadow: 1px 2px 4px rgba(95,42,51,.45); transform: translateX(-50%); }
.campaign-date i { width: 0; height: 0; margin: 7px 0; border-top: 8px solid #fff; border-right: 7px solid transparent; border-left: 7px solid transparent; }
.toplogo { position: absolute; top: 26px; left: 50%; z-index: 5; display: flex; width: 1220px; transform: translateX(-50%); align-items: center; justify-content: center; gap: 34px; }
.toplogo a { transition: transform .2s ease; }
.toplogo a:hover { transform: translateY(-3px); }
.toplogo img { display: block; width: 150px; height: auto; }
.campaign-registration { width: 1418px; margin: 26px auto 10px; }
.registration-panel { position: relative; width: 100%; aspect-ratio: 1198 / 746; background: url("OFFER.png?t=1790926309062") center / 100% 100% no-repeat; }
.registration-stack { position: absolute; top: 8.2%; left: 50%; width: 960px; transform: translateX(-50%); }
.registration-carousel { width: 100%; margin-top: 24px; overflow: hidden; }
.registration-carousel .Area_swiper_box, .registration-carousel .PD_layout, .registration-carousel .PD_wrapper { width: 100% !important; margin: 0 !important; padding: 0 !important; }
.registration-carousel .PD_wrapper { display: flex; }
.registration-carousel .PD_slide { width: 100% !important; min-width: 100% !important; background: transparent !important; }
.registration-carousel a, .registration-carousel img { display: block; width: 100%; }
.registration-carousel .swiper-pagination { display: none; }

.section-title { position: relative; z-index: 2; width: max-content; max-width: 90%; margin: 54px auto 30px; padding: 10px 42px 12px; border: 5px solid rgba(255,255,255,.82); border-radius: 15px; background: linear-gradient(96deg, #fff1d7 0%, #fafff8 100%); box-shadow: 5px 7px 0 rgba(139,43,68,.4); color: var(--accent-red); font-size: 44px; font-weight: 900; line-height: 1.05; letter-spacing: .06em; text-align: center; transform: rotate(-1deg); }
.section-title.section-title-image { width: 827px; max-width: 90%; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; line-height: 0; transform: none; }
.section-title-image img { display: block; width: 100%; height: auto; }
.Area_featured { padding-bottom: 0px; }
.featured-grid .PD_wrapper { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; gap: 0; width: 1040px !important; margin: 0 auto !important; padding: 0 !important; background: transparent !important; }
.featured-grid .PD_slide { flex: 0 0 auto !important; width: 490px !important; min-width: 0 !important; border: 0 !important; background: transparent !important; }
.featured-grid .PD_slide + .PD_slide { margin-top: -270px }
.featured-grid .PD_slide:nth-child(odd) { align-self: flex-start !important; }
.featured-grid .PD_slide:nth-child(even) { align-self: flex-end !important; }
.featured-grid .PD_img { padding: 0 !important; }
.featured-grid .PD_img img { display: block; width: 100% !important; height: auto !important; }

.Area_offer { width: 1240px; padding-bottom: 34px; }
.offer-grid .PD_wrapper { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 1240px !important; margin: 0 auto !important; padding: 12px !important; background: rgba(255,241,232,.92) !important; }
.offer-grid .PD_slide { width: auto !important; min-width: 0 !important; border: 0 !important; background: #fff !important; }
.offer-grid .PD_img { padding: 0 !important; }
.offer-grid .PD_img img { width: 100% !important; }
.offer-grid .PD_into { padding: 8px 12px 14px !important; text-align: center; }
.offer-grid .PD h3, .offer-grid .PD h4 { height: auto; margin: 0 0 4px; font-size: 16px; }
.offer-grid .PD p { margin: 0; color: #d63e4e; }
.offer-grid .PD p .Price { font-size: 28px; }

.Area_brands { padding: 8px 0 15px }
.brand-tabs { display: flex; width: 940px; margin: 0 auto 28px; justify-content: center; gap: 22px; }
.brand-tabs a { display: block; padding: 0; border: 0; background: transparent; cursor: pointer; transition: transform .2s ease, filter .2s ease; }
.brand-tabs a:hover, .brand-tabs a:focus-visible { transform: translateY(-5px); filter: brightness(1.05); outline: none; }
.brand-tabs img { display: block; width: 180px; }

.brand-sections { position: relative; width: 100%; }
.Area_hot { position: relative; height: 596px; margin: 0 auto 20px; padding: 182px 0 0; overflow: hidden; }
.Area_hot .layout_bg { position: absolute; top: 0; left: 50%; z-index: -1; width: 1220px; transform: translateX(-50%); pointer-events: none; }
.Area_hot .layout_bg img { display: block; width: 100%; }
.Area_hot .Area_swiper { width: 1120px; margin: 0 auto; }
.Area_hot .Area_swiper_box { padding: 0; }
.Area_hot .Area_swiper_box .PD_layout { margin: 0 35px; overflow: hidden; }
.Area_hot .PD_slide { background: #fff !important; border-radius: 0 !important; }
.Area_hot .PD_img { padding: 0 !important; }
.Area_hot .PD_img img { border-radius: 0 !important; }
.Area_hot .PD_into { padding: 5px 8px 10px !important; text-align: center; }
.Area_hot .PD_into h3, .Area_hot .PD_into h4 {  }
.Area_hot .PD p { margin: 0; color: #d63e4e; }
.Area_hot .PD p .Price { font-size: 24px; }
.Area_hot .swiper-pagination { position: relative; margin-top: 10px; }
.swiper-pagination-bullet { margin: 0 3px; background: #7d423e; opacity: .35; }
.swiper-pagination-bullet-active { opacity: 1; }

.Area_hot.product-row-section { width: 1220px; height: auto; min-height: 0; margin: 0 auto 20px; padding: 14px 0 0; border: 0; }
.product-row-section::before { position: absolute; top: 0; left: 0; width: 100%; height: 14px; background: #efb5bf; content: ""; }
.product-row-section .product-row-carousel { width: 100%; margin: 0 auto; }
.product-row-section .Area_swiper_box { padding-bottom: 30px; }
.product-row-section .Area_swiper_box .PD_layout { margin: 0; overflow: hidden; }
.product-row-section .PD_slide { border-right: 1px solid #efb5bf !important; background: #fff !important; }
.product-row-section .PD_slide:last-child { border-right: 0 !important; }
.product-row-section .PD_img img { display: block; width: 100%; border-radius: 0 !important; }
.product-row-section .PD_into { padding: 10px 12px 16px !important; text-align: center; }
.product-row-section .PD_into h3,
.product-row-section .PD_into h4 { display: block; height: auto; overflow: hidden; margin: 0 auto 6px; color: #222; font-weight: 700; line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; }
.product-row-section .PD_into h3 { width: calc(100% - 20px); padding: 4px 8px; border-radius: 5px; background: #e7e7e7; font-size: 15px; }
.product-row-section .PD_into h4 { font-size: 15px; }
.product-row-section .PD_into p { display: flex; margin: 2px 0 0; align-items: baseline; justify-content: center; color: #dc3348; line-height: 1; }
.product-row-section .PD_into p del { margin-right: 4px; color: #777; font-size: 16px; }
.product-row-section .PD_into p .money { margin-right: 1px; font-size: 22px; font-weight: 700; }
.product-row-section .PD_into p .Price { font-size: 34px; font-weight: 800; }
.product-row-section .swiper-pagination { margin-top: 4px; }

.Area_danji_wrap { position: relative; width: 960px; margin: 72px auto 42px; }
.Area_danji_wrap .warningTxt { padding-top: 4px; text-align: center; }
.Area_danji_wrap .warningTxt h3 { color: #fff; font-size: 13px; font-weight: 400; text-shadow: 0 1px 3px rgba(73,24,39,.35); }
.Area_danji .danji_box ul li .activityImg img { object-fit: contain; }
.Area_danji .danji_box ul li .activityText .gifts span { color: #d85b42; font-weight: 800; }

.Area_logo { margin: 60px auto 100px; padding: 0 20px; }
.Area_logo .logo_wrap { display: flex; max-width: 1000px; margin: 0 auto; align-items: center; justify-content: center; gap: 30px; flex-wrap: wrap; }
.Area_logo a { display: block; width: 300px; border-radius: 50%; overflow: hidden; box-shadow: 0 8px 20px rgba(73,24,39,.2); transition: transform .25s ease; }
.Area_logo a:hover { transform: translateY(-6px); }
.Area_logo img { display: block; width: 100%; }
.campaign-footer { position: relative; padding: 14px 12px 18px; background: #3c2c21; color: #fff; font: 12px/18px Helvetica, Arial, sans-serif; text-align: center; }

@media screen and (max-width: 767px) {
  .for_pc { display: none !important; }
  .for_phone, .for_m { display: inherit !important; }
  .WRAPPER { width: 100%; min-width: 0; background: #df8fa6; }
  .mobile-page-bg { display: block !important; height: 100%; background: #df8fa6 url("pc_bg.jpg?t=1790926309063") center top / 200% auto repeat-y; }
  .Area_top { height: 88vw; padding-top: 0; overflow: visible; }
  .hero-image.for_pc { display: none !important; }
  .hero-image.for_m { display: block !important; width: 100%; max-width: 100%; }
  .campaign-date { top: 12vw; left: 60.8%; width: 19vw; height: 19vw; margin-left: 0; border-width: .35vw; font-size: 5.4vw; transform: translateX(-50%); }
  .campaign-date i { margin: .7vw 0; border-top-width: .9vw; border-right-width: .75vw; border-left-width: .75vw; }
  .toplogo { top: 2.2vw; width: 100%; gap: 1.2vw; }
  .toplogo img { width: 16vw; }
  .campaign-registration { width: 99%; margin: 3vw auto 1vw; }
  .registration-panel { height: 80vw; aspect-ratio: auto; }
  .registration-stack { top: 2vw; width: 92vw; }
  .registration-carousel { margin-top: 1.6vw; }
  .section-title { margin: 8vw auto 5vw; padding: 1.6vw 5vw 2vw; border-width: .8vw; border-radius: 2vw; box-shadow: .8vw 1vw 0 rgba(139,43,68,.4); font-size: 6.6vw; }
  .section-title.section-title-image { width: 90vw; margin: 8vw auto 5vw; padding: 0; border: 0; box-shadow: none; }
  .Area_featured { width: 100%; padding: 0 1vw 0vw; }
  .featured-grid .PD_wrapper { display: flex !important; flex-direction: column !important; gap: 0; width: 100% !important; align-items: stretch; }
  .featured-grid .PD_slide { width: 100% !important; margin: 0 !important; align-self: stretch !important; }
  .featured-grid .PD_img img { width: 100% !important; }
  .featured-grid { padding-bottom: 0; }

  .Area_offer { width: 94%; padding-bottom: 5vw; }
  .offer-grid .PD_wrapper { grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100% !important; gap: 1.5vw; padding: 1.5vw !important; }
  .offer-grid .PD_into { padding: 1.2vw 1vw 2vw !important; }
  .offer-grid .PD h3, .offer-grid .PD h4 { font-size: 3vw; }
  .offer-grid .PD p del { font-size: 2.4vw; }
  .offer-grid .PD p .money { font-size: 3vw; }
  .offer-grid .PD p .Price { font-size: 5.2vw; }

  .Area_brands { width: 100%; padding: 0 3vw; }
  .brand-tabs { width: 100%; margin-bottom: 4vw; gap: 3vw; scrollbar-width: none;justify-content: center;flex-wrap: wrap}
  .brand-tabs::-webkit-scrollbar { display: none; }
  .brand-tabs li { flex: 0 0 31%; }
  .brand-tabs img { width: 100%; }

  .Area_hot { width: 100%; height: auto; min-height: 92vw; margin-bottom: 0vw; padding: 1vw 0 0vw; overflow: visible; }
  .Area_hot .layout_bg { top: 0; width: 208vw; z-index: 1; }
  .Area_hot .Area_swiper { width: 100%; }
  .Area_hot .Area_swiper_box .PD_layout { margin:24vw 2vw 3vw; }
  .Area_hot .PD_slide { flex-grow: 1; }
  .Area_hot .PD_into { padding: 1vw 1vw 2vw !important; }
  .PD_layout .PD h4 { display: block; max-height: 1.5em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .Area_hot .PD p del, .Area_hot .PD p .money { font-size: 2.3vw; }
  .Area_hot .PD p .Price { font-size: 4vw; }
  .Area_hot .swiper-pagination { margin-top: 0; }

  .Area_hot.product-row-section { width: 96%; margin: 0 auto 5vw; padding-top: 1.5vw; }
  .product-row-section::before { height: 1.5vw; }
  .product-row-section .Area_swiper_box { padding-bottom: 6vw; }
  .product-row-section .Area_swiper_box .PD_layout { margin: 0; }
  .product-row-section .PD_into { padding: 1.5vw 1vw 2.5vw !important; }
  .product-row-section .PD_into h3 { width: calc(100% - 2vw); margin-bottom: 1vw; padding: .7vw 1vw; border-radius: .8vw; font-size: 2.6vw; }
  .product-row-section .PD_into h4 { margin-bottom: 1vw; font-size: 2.7vw; }
  .product-row-section .PD_into p del { margin-right: .5vw; font-size: 2.8vw; }
  .product-row-section .PD_into p .money { font-size: 3.8vw; }
  .product-row-section .PD_into p .Price { font-size: 5.6vw; }

  .Area_danji_wrap { width: 94%; margin: 8vw auto 5vw; }
  .Area_danji_wrap .warningTxt h3 { font-size: 2.6vw; }
  .Area_logo { margin: 7vw auto 12vw; padding: 0 7vw; }
  .Area_logo .logo_wrap { display: flex; max-width: 100%; gap: 4vw; justify-content: center; }
  .Area_logo a { width: calc((100% - 8vw) / 3); flex: 0 0 calc((100% - 8vw) / 3); }
}

.warningTxt h3 {
    margin: 0;
    color: #000;
    
}
