@charset "utf-8";

/* ========== Fonts ========== */
@font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 400; font-display: swap; src: url('/resources/common/font/NotoSansKR-Regular.woff2') format('woff2'), url('/resources/common/font/NotoSansKR-Regular.woff') format('woff'); }
@font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 500; font-display: swap; src: url('/resources/common/font/NotoSansKR-Medium.woff2') format('woff2'), url('/resources/common/font/NotoSansKR-Medium.woff') format('woff'); }
@font-face { font-family: 'Noto Sans KR'; font-style: normal; font-weight: 700; font-display: swap; src: url('/resources/common/font/NotoSansKR-Bold.woff2') format('woff2'), url('/resources/common/font/NotoSansKR-Bold.woff') format('woff'); }
@font-face { font-family: 'Artois'; font-style: normal; font-weight: 400; font-display: swap; src: url('/resources/common/font/ArtoisSebastian-Sans.woff2') format('woff2'), url('/resources/common/font/ArtoisSebastian-Sans.woff') format('woff'); }
@font-face { font-family: 'ArtoisIsabella-Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('/resources/common/font/ArtoisIsabella-Serif.woff2') format('woff2'), url('/resources/common/font/ArtoisIsabella-Serif.woff') format('woff'); }
@font-face { font-family: 'Cafe24Danjunghae'; font-style: normal; font-weight: normal; font-display: swap; src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.1/Cafe24Danjunghae.woff') format('woff'); }
@font-face { font-family: "Noto Sans CJK KR"; font-style: normal; font-weight: 400; src: url("https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2") format("woff2"), url("https://fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff") format("woff"); font-display: swap; } 

/* ========== Reset ========== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: normal; }
ul, ol, li { list-style: none; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; vertical-align: middle; border: none; }
table { border-collapse: collapse; border-spacing: 0; }
button, input[type="submit"] { cursor: pointer; border: none; background: none; }
button::-moz-focus-inner { padding: 0; border: 0; }
input, select, textarea, button { font-family: inherit; font-size: inherit; vertical-align: middle; }
address, em { font-style: normal; }

/* ========== Base ========== */
body { font-family: "Noto Sans KR", sans-serif; font-size: 14px; font-weight: 300; color: #333; -webkit-text-size-adjust: 100%; display: flex; flex-direction: column; scroll-padding-top: 147px; }
input, select, textarea { padding: 0; border-radius: 0; box-sizing: border-box; font-family: "Noto Sans KR", sans-serif; font-size: 14px; font-weight: 300; letter-spacing: -1px; color: #333; vertical-align: middle;}
p { line-height: 1.4; }

/* ========== Utility / Form ========== */
.hidden { position: absolute; top: 0; left: 0; width: 0 !important; height: 0 !important; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px; }
input:-ms-input-placeholder, textarea:-ms-input-placeholder { color: #999; }
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #999; }
input::-moz-placeholder, textarea::-moz-placeholder { color: #999; }
/* input_style */
input[type="text"], input[type="password"], input[type="tel"], input[type="number"], input[type="email"] { width: 100%; height: 40px; padding: 0 10px; border: 1px solid #999; box-sizing: border-box; font-size: 16px; line-height: 40px; background: #fff; }
textarea { width: 100%; padding: 10px; border: 1px solid #999; box-sizing: border-box; font-size: 16px; background: #fff; }
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
/* select_style */
select { width: 100%; height: 40px; padding: 0 10px; border: 1px solid #999; box-sizing: border-box; font-size: 16px; line-height: 40px; background: #fff url("/resources/img/common/bg_select.png") no-repeat calc(100% - 10px) 50%; background-size: 14px 10px; }
select::-ms-expand { display: none; }
.btn_style01 { display: inline-block; min-width: 200px; height: 50px; padding: 0 10px; border: 2px solid #333; box-sizing: border-box; font-size: 16px; line-height: 48px; text-align: center; color: #fff !important; background: #333; transition: all 0.3s; }
.btn_style01:hover { color: #404040 !important; background: rgba(255, 255, 255, 0.2); }
.pop_con { width: 100%; }

/* ========== Accessibility ========== */
/* 사용처: inc/header.php:10, campaign/*.html */
ul#skipnavi { position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; font-size: 0; line-height: 0; }
ul#skipnavi li a { position: absolute; top: -500px; font-size: 12px; line-height: 1; text-indent: -9999px; }
ul#skipnavi li a:hover, ul#skipnavi li a:focus, ul#skipnavi li a:active { position: absolute; top: 0; left: 0; z-index: 1000; display: block; width: 100%; height: 20px; padding: 4px 0 0 0; font-size: 12px; font-weight: 400; line-height: 1; text-align: center; text-indent: 0; background: #999; }

/* ========== Header ========== */
/* 사용처: inc/header.php */
/* Header Block */
.header { position: sticky; top: 0; z-index: 100; width: 100%; padding: 2vh; box-sizing: border-box; background: #fff; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); }
/* Header Top */
.header__top { display: flex; justify-content: space-between; align-items: center; max-width: 1735px; margin: 0 auto; }
.header__logo { display: block; width: 260px; }
.header__logo img { width: 100%; height: auto; }
.header__sns { display: flex; align-items: center; gap: 15px; }
.header__sns-item { width: 30px; }
.header__sns-item img { width: 100%; height: auto; }
.header__menu-open,
.header__menu-close { display: none; background: none; border: none; padding: 0; cursor: pointer; }
/* Header Nav (PC) */
.header__nav { max-width: 1735px; margin: 0 auto; padding: 1rem 0; }
.header__menu { display: flex; justify-content: space-between; align-items: center; gap: 2rem; }
.header__menu-item { font-family: "Artois", sans-serif; }
.header__menu-item a { display: inline-block; font-size: 1.3rem; transition: color 0.2s; }
.header__menu-item a:hover { color: #c11b17; }
.header__menu-link--highlight { color: #c11b17 !important; }
.header__menu-link--dining::before { display: none; width: 52px; height: 27px; margin-right: 6px; background-image: url("/resources/img/common/member_only.png"); background-size: cover; content: ""; vertical-align: middle; }
/* Submenu (PC) */
.header__menu-item--has-sub { position: relative; }
.header__menu-item--has-sub > a::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); vertical-align: middle; }
.header__submenu { display: none; position: absolute; top: 100%; left: 0; z-index: 1000; min-width: 200px; padding: 8px 0; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); }
.header__submenu li a { display: block; padding: 10px 16px; font-size: 1rem; }
.header__submenu li a:hover { background: rgba(0, 0, 0, 0.04); }
.header__menu-item--has-sub:hover > a::after { transform: rotate(-135deg); }
.header__menu-item--has-sub:hover .header__submenu { display: block; }
/* Header Mobile */
.header__mobile { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; }
.header__mobile-dim { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.3); opacity: 0; transition: opacity 0.4s ease; }
.header__mobile-inner { position: absolute; top: 80px; right: 0; width: 70%; max-width: 280px; height: auto; max-height: calc(100vh - 100px); /* fallback */ max-height: calc(100svh - 100px); padding: 3vh 6vw; background: #fff; overflow-y: auto; border-top-left-radius: 50px; border-bottom-left-radius: 50px; box-shadow: -5px 5px 20px rgba(0, 0, 0, 0.15); transform: translateX(100%); transition: transform 0.4s ease; }
.header__mobile.is-open { display: block; }
.header__mobile.is-open .header__mobile-dim { opacity: 1; }
.header__mobile.is-open .header__mobile-inner { transform: translateX(0); }
.header__mobile-title { font-family: "ArtoisIsabella-Serif", serif; font-size: 2rem; margin-bottom: 3.5vh; text-align: right; }
.header__mobile-menu { display: flex; flex-direction: column; gap: 0; }
.header__mobile-menu > li { margin-bottom: 2.5vh; text-align: right; }
.header__mobile-menu > li > a { font-family: "Artois", sans-serif; font-size: 1.5rem; color: #333; }
.header__mobile-menu > li > a:hover { color: #c11b17; }
.header__mobile-submenu { padding-right: 0; margin-top: 1vh; display: flex; flex-direction: column; gap: 0.8vh; text-align: right; }
.header__mobile-submenu li a { font-family: "Artois", sans-serif; font-size: 1.1rem; color: #666; }
.header__mobile-submenu li a:hover { color: #c11b17; }
.header__mobile-bottom { margin-top: 5vh; padding-top: 0; border-top: none; }
.header__mobile-channel-text { font-family: "Artois", sans-serif; font-size: 0.7rem; margin-bottom: 1rem; color: #999; text-align: right; }
.header__mobile-channel { display: flex; justify-content: flex-end; gap: 0.5rem; }
.header__mobile-channel li { width: 28px; }
.header__mobile-channel img { width: 100%; }
/* Modal */
.modal { display: none; position: fixed; top: 0; left: 0; z-index: 9999; justify-content: center; align-items: center; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); }
.modal.is-open { display: flex; }
.modal__box { max-width: 320px; padding: 2rem; border-radius: 20px; text-align: center; background: #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); }
.modal__image { width: 200px; margin: 0 auto 1rem; }
.modal__message { margin-bottom: 1.5rem; font-size: 1rem; line-height: 1.5; }
/* Dining 모달 버튼 */
.modal--dining .modal__btn { padding: 12px 40px; border: none; border-radius: 999px; font-size: 1rem; color: #fff; background: #c11b17; cursor: pointer; transition: opacity 0.2s; }
.modal--dining .modal__btn:hover { opacity: 0.9; }

/* ========== Footer ========== */
.footer { padding: 45px 2vh; border-top: 1px solid #ddd; background: #fff; }
.footer__inner { display: grid; grid-template-columns: 1fr auto; gap: 2rem; max-width: 1735px; margin: 0 auto; }
.footer__logo { margin-bottom: 1rem; }
.footer__logo img { width: 180px; }
.footer__copyright { margin-bottom: 0.5rem; font-family: "Artois", sans-serif; font-size: 0.9rem; color: #333; }
.footer__link { color: #333; transition: color 0.2s; }
.footer__link:hover { color: #c11b17; }
.footer__contact { margin-bottom: 0.5rem; font-size: 0.85rem; line-height: 1.8; color: #999; }
.footer__contact a { color: #999; }
.footer__contact a:hover { color: #c11b17; }
.footer__warning { font-size: 0.8rem; line-height: 1.6; color: #999; }
.footer__sns { display: flex; align-items: flex-start; }
.footer__channel { display: flex; gap: 15px; }
.footer__channel li a { display: block; width: 30px; }
.footer__channel li a img { width: 100%; }

/* ========== Layout ========== */
#container { flex: 1; }
.color { color: #c11b17 !important; }
.Artois { font-family: "Artois", sans-serif !important; }
.Artois_s { font-family: "ArtoisIsabella-Serif", sans-serif !important; }

/* ========== Age Gate ========== */
.agegate { display: none; position: fixed; top: 0; left: 0; z-index: 10000; width: 100%; height: 100vh; background: rgba(255, 255, 255, 0.95); }
.agegate.is-open { display: flex; justify-content: center; align-items: center; }
.agegate__box { width: 100%; max-width: 800px; padding: 80px 40px; border: 1px solid #999; text-align: center; background: #fff url("/resources/img/common/bg_agegate_pc.jpg") no-repeat bottom right; background-size: auto 100%; }
.agegate__text { margin-bottom: 30px; font-size: 40px; font-weight: 700; line-height: 1.3; }
.agegate__text--mobile { display: inline; }
.agegate__buttons { display: flex; justify-content: center; gap: 0; margin-bottom: 30px; }
.agegate__btn { position: relative; width: 250px; height: 90px; border: none; font-family: "Artois", sans-serif; font-size: 45px; text-transform: uppercase; color: #fff; background: #c11b17; cursor: pointer; transition: opacity 0.2s; }
.agegate__btn:hover { opacity: 0.9; }
.agegate__btn:last-child::before { position: absolute; top: 50%; left: 0; width: 1px; height: 50px; background: #fff; transform: translateY(-50%); content: ""; }
.agegate__warning { font-size: 18px; line-height: 1.6; color: #999; }

/* ========== Modal (Terms) ========== */
.modal--terms { background: rgba(255, 255, 255, 0.9); }
.modal--terms .modal__container { width: 90%; max-width: 640px; max-height: 80vh; border: 1px solid #333; border-radius: 15px; background: #fff; overflow: hidden; }
.modal__header { display: flex; justify-content: space-between; align-items: center; padding: 20px; border-bottom: 1px solid #ddd; }
.modal__title { font-size: 1.5rem; font-weight: 500; }
.modal__close { width: 30px; height: 30px; border: none; font-size: 24px; color: #333; background: none; cursor: pointer; }
.modal__body { max-height: 50vh; padding: 20px; overflow-y: auto; }
.modal__footer { padding: 15px 20px; border-top: 1px solid #ddd; text-align: center; }
.modal__btn { width: 100%; padding: 15px; border: none; font-size: 1rem; color: #fff; background: #333; cursor: pointer; transition: background 0.2s; }
.modal__btn:hover { background: #555; }

/* ========== Terms ========== */
.terms { font-size: 14px; line-height: 1.6; text-align: left; word-break: keep-all; }
.terms strong { display: block; margin-top: 1rem; font-weight: 600; }

/* ========== Policy Page ========== */
.policy { padding: 120px 20px 80px; }
.policy__inner { max-width: 900px; margin: 0 auto; }
.policy__title { margin-bottom: 2rem; font-size: 2.5rem; font-weight: 700; text-align: center; }
.policy__version-selector { margin-bottom: 2rem; padding: 1rem; background: #f5f5f5; border-radius: 8px; }
.policy__version-selector label { margin-right: 10px; font-weight: 500; }
.policy__version-selector select {border: 1px solid #ddd; border-radius: 4px; font-size: 14px; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
.policy__content { padding: 2rem 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; }
.policy__content p { margin-bottom: 1rem; font-size: 14px; line-height: 1.8; }
.policy__content strong { font-weight: 600; }
.policy__content table { width: 100%; margin: 1rem 0; border-collapse: collapse; }
.policy__content th,
.policy__content td { padding: 12px; border: 1px solid #ddd; font-size: 13px; text-align: center; }
.policy__content th { background: #f9f9f9; font-weight: 600; }
.policy__content td .break { display: inline-block; max-width: 100%; overflow-wrap: anywhere; word-break: break-all; white-space: normal; }
.policy__version-list { margin-top: 2rem; }
.policy__version-list h3 { margin-bottom: 1rem; font-size: 1rem; font-weight: 600; }
.policy__version-list ul { display: flex; flex-wrap: wrap; gap: 10px; }
.policy__version-list li a { display: inline-block; padding: 8px 16px; border: 1px solid #ddd; border-radius: 4px; font-size: 13px; color: #666; transition: all 0.2s; }
.policy__version-list li a:hover { border-color: #c11b17; color: #c11b17; }
.policy__version-list li a.is-current { border-color: #c11b17; background: #c11b17; color: #fff; }

/* ========== top button ========== */
#top_btn { position: fixed; bottom: calc(env(safe-area-inset-bottom, 0px) + var(--top-btn-offset, 4%)); right: 4%; z-index: var(--top-btn-z-index, 30); width: 48px; height: 48px; border-radius: 50%; font-size: 14px; font-weight: 500; color: var(--color-primary); background-color: #fff; box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.2); }
#top_btn img { width: 90%; }

/* ========== Responsive: Common ========== */
@media (max-width: 1024px) {
  #top_btn { bottom: calc(env(safe-area-inset-bottom, 0px) + var(--top-btn-offset-mobile, var(--top-btn-offset, 4%)) + 20px);}
  body.is-ended-btn-stopped #top_btn { bottom: calc(env(safe-area-inset-bottom, 0px) + var(--top-btn-offset, 4%)); transition: 0.3s; }
}
@media (max-width: 768px) {
  #top_btn { bottom: calc(env(safe-area-inset-bottom, 0px) + var(--top-btn-offset-mobile, var(--top-btn-offset, 4%)));}
}
/* ========== Index Main Slider ========== */
.sr-only {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}
.stm { position: relative; overflow: hidden; height: 90dvh; color: #fff; background-color: #000; --stm-controls-top: 65%; }
.stm__swiper { position: relative; background-color: #000; }
.stm__slide { position: relative; height: 90dvh; background-color: #000; }
.stm__image { display: block; width: 100%; height: 90dvh; overflow: hidden; }
.stm__image img { width: 100%; height: 90dvh; object-fit: cover; object-position: top; transform: scale(1.1); opacity: 0; transition: transform 1.8s 0.1s ease, opacity 1.4s ease; }
.stm__slide.swiper-slide-active .stm__image img { transform: scale(1); opacity: 1; }
/* Slider Text */
.stm__text { position: absolute; left: 50%; top: 50%; width: 100%; min-width: 1000px; max-width: 1500px; height: 320px; display: flex; align-items: flex-start; justify-content: flex-end; flex-direction: column; gap: 12px; margin: 0 auto; transform: translate(-50%, -60%); transition: transform 0.4s ease; z-index: 10; }
.stm__text--multiline { transform: translate(-50%, -68%); }
.stm__title { color: #fff; font-size: 62px; font-weight: 400; line-height: 100%; word-break: keep-all; transform: translateY(20px); opacity: 0; transition: transform 1.65s 0.7s ease, opacity 1.65s 0.7s ease; }
.stm__title.ko {font-family: "Cafe24Danjunghae", sans-serif; font-size: 56px;}
.stm__desc { color: #fff; font-family: "Noto Sans KR", sans-serif; font-size: 28px; font-weight: 400; line-height: 140%; letter-spacing: -0.56px; transform: translateY(20px); opacity: 0; word-break: keep-all; transition: transform 1.65s 1s ease, opacity 1.65s 1s ease; }
.stm__button { display: inline-flex; align-items: center; justify-content: center; width: 218px; padding: 12px 30px; border: none; border-radius: 8px; background: #c11b17; color: #fff; font-size: 24px; font-weight: 400; line-height: 1; letter-spacing: -0.48px; text-transform: uppercase; cursor: pointer; gap: 10px; margin-top: 28px; margin-bottom: 20px; transform: translateY(20px); opacity: 0; transition: background 0.3s ease, transform 1.65s 1.25s ease, opacity 1.65s 1.25s ease; }
.stm__button:hover,
.stm__button:focus-visible { transform: translateY(-6px); }
.stm__slide.swiper-slide-active .stm__title,
.stm__slide.swiper-slide-active .stm__desc { transform: translateY(0); opacity: 1; }
.stm__slide.swiper-slide-active .stm__button { transform: translateY(0); opacity: 1; }
/* Slider Controls */
.stm__controls { position: absolute; display: inline-flex; flex-direction: column; width: 100%; height: 50px; min-width: 1000px; max-width: 1500px; left: 50%; bottom: 10vh; transform: translateX(-50%); z-index: 20; }
.stm__progress { position: relative; height: 50px; z-index: 11; }
.stm__bar { position: absolute; left: 30px; top: 10px; z-index: 9; width: 100px; height: 3px; background-color: #fff; }
.autoplay-progress { position: absolute; left: 0; top: 26px; z-index: 10; width: 385px; height: 3px; background-color: #fff; }
.autoplay-progress svg { --progress: 0; position: absolute; left: -2px; top: 0; width: 100%; height: 100%; stroke-width: 4px; stroke: #c11b17; fill: none; stroke-linecap: butt; }
.autoplay-progress line { stroke: #c11b17; stroke-width: 11px; fill: none; stroke-linecap: butt; }
.stm__pagination { display: none; }
/* Slider Arrows */
.stm__arrows { position: relative; width: 106px; }
.stm__arrow { width: 48px; height: 48px; top: 0; left: 0; margin-top: 0; background: url(/resources/img/index/stl-main-left.svg) no-repeat center / 100%; border-radius: 50%; cursor: pointer; }
.stm__arrow--next { left: unset; right: 0; background-image: url(/resources/img/index/stl-main-right.svg); }
.stm__arrow::after { font-size: 0; }
/* Slider White Slide Variant */
.stm-slide-wh h2 { color: #c11b17; }
.stm-slide-wh h3 { color: #000; }
/* Slider Responsive */

/* ========== Brand Story ========== */
/* 사용처: brand-story/index.php, about-perfect-serve/index.php:84 */
.brand-story { max-width: 1720px; margin: 5rem auto 0; text-align: center; }
.brand-story .red { color: #c11b17; }
.brand-story img { max-width: 100%; }
.brand-story .bs-inner { padding: 0 6.7vw; }
h1.bs-tit { margin-bottom: 1.8rem; font-size: 4rem; font-weight: 400; }
.bs-tit-img { width: 8.5vw; margin: 0 auto; margin-top: 10vh; }
.bs-tit-img-2 { width: 24vw; margin: 3vh auto; }
.brand-story-glass { width: 30vw; }
.stella-artois-logo { width: 72vw; }
.bs-txt-box { margin: 0 0 5vh; }
h2.bs-txt-tit { padding-bottom: 1rem; font-size: 1.3rem; font-weight: 600; line-height: 1.8; }
p.bs-txt-list { margin: 0; padding-bottom: 1rem; font-size: 1.3rem; line-height: 1.5; }
.bs-tab-box { max-width: 1280px; margin: 0 auto; }
.bs-tab { display: flex; }
.bs-tab-btn { width: 50%; background: #333; }
.bs-tab-btn.on { position: relative; background: #c11b17; }
.bs-tab-btn.on::after { position: absolute; right: 0; display: block; width: 0; height: 0; border-top: 20px solid #c11b17; border-right: 12px solid transparent; border-bottom: 20px solid transparent; border-left: 12px solid transparent; content: ""; }
.bs-tab-cartouche.on::after { right: auto; left: 0; }
.bs-tab p { height: 75px; line-height: 75px;font-family: "ArtoisIsabella-Serif", sans-serif; font-size: 1.5rem; font-weight: 600; color: #fff; cursor: pointer; }
.bs-tab-cont-list { display: none; }
.bs-tab-cont-list.on { display: block; }
.bs-tab-cont-tit { margin-top: 5vh; padding-bottom: 1vh; font-family: "ArtoisIsabella-Serif", sans-serif; font-size: 4rem; }
.bs-tab-cont-sub { margin-bottom: 6vh; font-size: 1.875rem; }
.bs-tab-content { padding-top: 2.5rem; }
.bs-history { position: relative; margin-bottom: 10vh; }
.bs-history::before { position: absolute; top: 50%; left: 50%; display: block; width: 1px; height: 86%; background: #c11b17; transform: translate(-50%, -50%); content: ""; }
.bs-history-list { display: flex; align-items: center; margin-bottom: 4.2rem; }
.bs-history-list-txt { width: 50%; padding-right: 6.5rem; box-sizing: border-box; text-align: right; }
.bs-history-list-img::before { position: absolute; top: 50%; left: 0; display: block; width: 30px; height: 30px; border-radius: 50%; background: #c11b17; transform: translate(-50%, -50%); content: ""; }
.bs-history-year { margin-bottom: 1vh; font-family: "Artois", sans-serif; font-size: 2rem; }
.bs-history-tit { margin: 0; padding-bottom: 0.5rem; font-size: 1.2rem; }
.bs-history-list-txt p { font-size: 0.8rem; color: #999; }
.bs-history-list-img { position: relative; width: 50%; padding-left: 1.5rem; box-sizing: border-box; }
.bs-cart-img { width: 20vw; margin: 5vh auto; }
.bs-cart-txt { margin-bottom: 10vh; }
.bs-cart-txt-list { margin-bottom: 1.5rem; }
.bs-cart-txt-tit { display: flex; justify-content: center; align-items: center; margin-bottom: 1rem; font-family: "Artois", sans-serif; font-size: 2rem; letter-spacing: 0.2px; }
.bs-cart-txt-tit span { display: inline-flex; justify-content: center; align-items: center; width: 1.2rem; height: 1.2rem; margin-right: 0.5rem; border-radius: 50%; font-size: 0.75rem; color: #fff; background: #c11b17; }
.bs-cart-txt-list p { font-size: 1rem; color: #999; }

/* ========== Product Page ========== */
.product-page { min-height: 100vh; background: #f6f3ef; }
.product-intro { width: 100%; margin: 0 auto; padding: 0; text-align: center; display: flex; flex-direction: column; background: #fff; align-items: center; }
.product-intro__heading { padding: 120px 0 60px; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.product-intro__title { color: #333; font: 400 58px ArtoisIsabella-Serif, serif; margin: 0; }
.product-intro__subtitle { color: #333; font: 400 30px "Noto Sans KR", sans-serif; }
.product-intro__question { color: #333; font-family: "Noto Sans CJK KR"; font-size: 64px; font-weight: 700; line-height: 110%; letter-spacing: -1.28px; display: inline-flex; align-items: baseline; justify-content: center; gap: 12px; margin: 60px 0; }
.product-intro__question-label { color: #ce112d; font: 400 90px ArtoisIsabella-Serif, serif; line-height: 99px; }
.product-panels-wrapper { width: 100%; }
.product-intro__panels { display: flex; width: 100%; justify-content: center; align-items: stretch; flex-wrap: wrap; }
.product-perfect-serve__dec { color: #333; font-family: "Noto Sans CJK KR"; font-size: 24px; font-style: normal; font-weight: 500; text-align: left; line-height: 140%; letter-spacing: -0.48px; }
/* Product Panels */
.mo-br { display: none !important; }
.product-panel { position: relative; display: flex; flex: 1 1 50%; width: auto; min-width: 320px; min-height: 1054px; padding: clamp(3rem, 5vw, 5rem); align-items: flex-start; overflow: hidden; contain: layout paint; transition: flex-grow 1.45s ease, box-shadow 0.75s ease, transform 0.9s ease, opacity 1.1s ease; }
.product-panel--draft { background: linear-gradient(162deg, #dd4340 12.49%, #c11b17 68.31%, #b00f0b 90.41%); }
.product-panel--home { background: linear-gradient(164deg, #ebe1d6 -4.22%, #e8d4be 43.86%, #ecd4b3 85.89%); }
.product-panel__body { display: flex; flex-direction: column; width: 100%; }
.product-panel__eyebrow { color: #fff; font-family: Artois, sans-serif; font-size: 68px; line-height: 110%; letter-spacing: clamp(-0.5px, -0.1vw, -1.6px); text-align: left; }
.product-panel__title { color: #fff; font: 400 150px ArtoisIsabella-Serif, serif; line-height: 87%; letter-spacing: clamp(-1px, -0.2vw, -4.8px); text-align: left; }
.product-panel__figure { position: absolute; right: 110px; bottom: -45px; margin: 0; display: flex; justify-content: flex-end; align-items: center; width: 100%; height: 100%; transition: transform 0.95s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.6s ease; }
.product-panel__image { width: clamp(140px, 18vw, 184px); max-width: 184px; aspect-ratio: 184/479; transition: transform 0.95s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.6s ease; }
.product-panel__body--home { align-items: flex-end; text-align: right; }
.product-panel__body--home .product-panel__eyebrow,
.product-panel__body--home .product-panel__title { color: #bc1714; text-align: right; }
.product-panel__figure--home { left: 110px; right: auto; justify-content: flex-start; }
.product-panel--home .product-panel__cta { right: 40px !important; left: auto !important; }
.product-panel__image--home { width: clamp(140px, 18vw, 210px); max-width: 210px; aspect-ratio: 210/495; }
/* Panel round CTA */
.product-panel__cta { display: flex; width: 100px; height: 100px; padding: 29px; justify-content: center; align-items: center; position: absolute; left: 110px; bottom: 80px; border-radius: 80px; background: rgba(255, 249, 242, 0.6); opacity: 1; transition: transform 0.45s ease, opacity 0.38s ease, background 0.3s ease, color 0.3s ease; }
.product-panel__cta:hover { transform: scale(1.08); background: rgba(255, 255, 255, 0.5); color: #c11b17; }
.product-panel__body,
.product-panel__figure { transition: transform 0.45s ease, opacity 0.38s ease; }
.product-panel.is-replaced { overflow: hidden; }
.product-panel.is-active { box-shadow: 0 28px 70px rgba(0, 0, 0, 0.18); z-index: 5; }
.product-panel.is-replaced .product-panel__body,
.product-panel.is-replaced .product-panel__figure,
.product-panel.is-replaced .product-panel__cta { opacity: 0; pointer-events: none; }
/* Hover expand (Desktop) */
.product-intro__panels .product-panel { flex: 1 1 0%; min-width: 0; }
/* Product Sections (overlay targets) */
.product-sections > section { display: none; opacity: 0; pointer-events: none; }
.product-perfect-serve { position: relative; overflow: hidden; }
.product-perfect-serve .bg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; bottom: 0; z-index: 0; pointer-events: none; }
.product-perfect-serve > section { position: relative; z-index: 1; }
.product-perfect-serve__container { position: relative; margin: 0 auto; display: flex; justify-content: space-between; width: 100%; align-items: center; padding: 255px 150px 100px; background: linear-gradient(to top, #fff 0%, rgba(255, 255, 255, 0.85) 20%, rgba(255, 255, 255, 0) 50%); gap: clamp(3rem, 6vw, 7rem); }
.product-perfect-serve__copy { display: flex; width: 100%; flex-direction: column; align-items: flex-start; gap: 24px; will-change: opacity, transform; min-width: 1000px; backface-visibility: hidden; contain: content; }
.product-perfect-serve__title { color: #2b2b2b; font: 400 86px ArtoisIsabella-Serif, serif; line-height: 1.05; letter-spacing: -1.2px; min-width: 1000px; text-align: left; }
.product-perfect-serve__accent { display: inline-block; color: #c11b17; font-size: 118px; line-height: 85%; }
/* Product Gallery (mask hover) */
.product-gallery { width: 100%; height: 740px; background: url(/resources/img/product/stella-artois-premium-sec02-bg.png) no-repeat center/cover, linear-gradient(164deg, #ebe1d6 -4.22%, #e8d4be 43.86%, #ecd4b3 85.89%); padding: 150px 150px; position: relative; overflow: hidden; display: flex; justify-content: flex-end; align-items: flex-end; padding-bottom: 80px; }
.product-gallery__container { max-width: 1400px; width: 100%; position: relative; display: flex; flex-direction: column; gap: 0px; align-items: flex-start; }
.product-gallery__stage { width: 439px; position: relative; display: flex; align-items: flex-end; justify-content: flex-start; }
.product-gallery__deck { display: flex; align-items: flex-end; justify-content: flex-start; width: 100%; }
.product-gallery__stage .product-gallery__card--left { margin-right: 12px; }
.product-gallery__card { position: relative; display: inline-block; padding-right: 12px; }
.product-gallery__packaging { width: 100%; height: 100%; padding-left: 5px; display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; position: absolute; left: 0; bottom: -130px; }
.product-gallery__packaging-row { display: inline-flex; justify-content: flex-start; align-items: flex-start; gap: 16px; }
.product-gallery__packaging-row--tight { gap: 2px; }
.product-gallery__packaging-text { color: #7b603b; font-size: 12px; font-family: "Noto Sans CJK KR", "Noto Sans KR", sans-serif; font-weight: 500; line-height: 16.8px; word-wrap: break-word; }
.product-gallery__card img { display: block; position: relative; z-index: 1; }
/* Red overlay in can/bottle silhouette */
.product-gallery__card::before { content: ""; position: absolute; inset: 0; background: #c11b17; opacity: 0; transition: opacity 1s ease; pointer-events: none; z-index: 2; -webkit-mask-image: var(--mask-url); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center bottom; -webkit-mask-size: contain; -webkit-mask-mode: alpha; mask-image: var(--mask-url); mask-repeat: no-repeat; mask-position: inherit; mask-size: contain; mask-mode: alpha; }
/* Capacity text centered per mask */
.product-gallery__card::after { content: attr(data-label); position: absolute; left: 45%; top: var(--label-offset, 50%); transform: translate(-50%, -50%); color: #fff; font-family: Artois, sans-serif; font-size: 24px; font-style: normal; line-height: 100%; letter-spacing: -0.6px; opacity: 0; transition: opacity 0.35s ease; pointer-events: none; z-index: 3; }
.product-gallery__card:nth-child(3)::after,
.product-gallery__card:nth-child(4)::after { left: 50%; }
.product-gallery__card:hover::before,
.product-gallery__card:hover::after { opacity: 1; }
/* Product Gallery CTA / Title */
.product-gallery__cta-stack { display: flex; flex-direction: column; align-items: flex-start; width: 100%; min-width: 1000px; height: 100%; justify-content: flex-start; will-change: opacity, transform; backface-visibility: hidden; contain: content; }
.product-gallery__title { color: #c11b17; font: 400 118px ArtoisIsabella-Serif, serif; line-height: 120%; }
.product-gallery__cta,
.product-perfect-serve__cta { display: inline-flex; justify-content: center; align-items: center; width: 340px; height: 72px; padding: 12px 43px; border-radius: 8px; border: 2px solid #c11b17; background: transparent; color: #c11b17; font-size: 24px; font-weight: 700; line-height: 140%; letter-spacing: -0.48px; text-align: center; transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease; }
.product-gallery__cta { margin-top: 20px; }
.product-gallery__cta span,
.product-perfect-serve__cta span { font-family: "Noto Sans KR", sans-serif; font-size: 22px; font-weight: 700; line-height: 30.8px; color: inherit; }
.product-perfect-serve__cta:hover,
.product-perfect-serve__cta:focus,
.product-gallery__cta:hover,
.product-gallery__cta:focus { background: #c11b17; border-radius: 8px; color: #fff; }
/* Product Offers */
.product-offers { width: 100%; padding: 140px 0; background: #f7f0e6; display: flex; justify-content: center; position: relative; }
.product-offers__container { max-width: 1200px; width: 80%; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 40px; }
.product-offers__title { color: #c11b17; font: 400 58px ArtoisIsabella-Serif, serif; }
.product-offers__grid { width: 100%; max-width: 1200px; display: flex; flex-wrap: wrap; gap: 20px; justify-content: flex-start; align-items: flex-start; }
.product-offer-card { width: 224px; display: flex; flex-direction: column; gap: 20px; transition: transform 1s ease; }
.product-offer-card__media { position: relative; width: 224px; height: 224px; }
.product-offer-card__image { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; padding: 20px; border-radius: 18px; background: #fff; transition: transform 1s ease; overflow: hidden; }
.product-offer-card__name { color: #333; font: 500 18px "Noto Sans KR", sans-serif; line-height: 25.2px; }
.product-offer-card__badge { display: inline-flex; align-items: center; justify-content: center; padding: 2px 6px; min-width: 41px; border-radius: 2px; background: #a39665; color: #fff; font: 600 12px "Noto Sans KR", sans-serif; line-height: 14.4px; }
/* Product Figure / Image transition */
.product-panel__figure,
.product-panel__image { transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1), opacity 1s ease !important; }
/* Product Detail Card */
.detail-card { max-width: 1320px; width: 90%; margin: 0 auto; padding: 120px 60px; display: flex; gap: 48px; align-items: center; justify-content: space-around; position: relative; }
.detail-card__photo { width: 44%; max-width: 420px; min-width: 320px; border-radius: 10px; display: flex; flex-direction: column; justify-content: center; }
.detail-card-photo__image { position: relative; border: 1px solid #e2e2e2; border-radius: 10px; overflow: hidden; }
.detail-card__photo img { width: 100%; }
.detail-card__info { flex: 1; display: flex; flex-direction: column; gap: 12px; max-width: 678px; }
.dtc-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: #ffffff91; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); color: #00321f; text-decoration: none; cursor: pointer; z-index: 10; transition: all 0.2s ease; }
.dtc-nav:hover { background: #fff; border-color: #bbb; }
.dtc-nav--prev { left: -3%; }
.dtc-nav--next { right: -3%; }
.btn-listview { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding-bottom: 12px; font-size: 16px; font-weight: 500; line-height: 120%; letter-spacing: -0.32px; color: rgba(51, 51, 51, 0.8); }
.btn-listview:hover { text-decoration: underline; }
.detail-card__eyebrow { font-family: Artois, sans-serif; letter-spacing: 0.24em; font-size: 13px; color: #b08a52; }
.detail-card__title { font-size: 30px; font-weight: 700; color: #333; word-break: keep-all; line-height: 120%; letter-spacing: -0.6px; }
.chip { display: inline-flex; align-items: center; justify-content: center; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.chip--new { border-radius: 4px; background: #a39665; color: #fff; display: flex; padding: 4px 8px; justify-content: center; align-items: center; font-size: 18px; font-weight: 600; line-height: 120%; letter-spacing: -0.36px; }
.chip--soldout { border-radius: 4px; background: #e4e4e4; color: #767676; display: flex; padding: 4px 8px; justify-content: center; align-items: center; font-family: Pretendard; font-size: 18px; font-style: normal; font-weight: 600; line-height: 120%; letter-spacing: -0.36px; }
.detail-card__chips { display: flex; }
.detail-card__subtitle { font-size: 16px; letter-spacing: -0.18px; margin-top: 10px; color: rgba(34, 25, 18, 0.8); }
.detail-card__retailers { margin-top: 60px; position: relative; }
.detail-card__retailers p { color: #333; font-size: 20px; font-weight: 700; line-height: 120%; margin-bottom: 20px; letter-spacing: -0.4px; }
.retailer-list { display: flex; flex-wrap: wrap; gap: 10px; min-width: 510px; position: relative; }
.retailer-list li { flex: 0 1 auto; }
.retailer-list a { display: inline-flex; align-items: center; justify-content: center; width: 162px; height: 50px; padding: 8px 0; border-radius: 8px; border: 1px solid #e2e2e2; background: #fff; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.retailer-list a img { width: 90%; margin: 0 auto; }
.retailer-list a:hover,
.retailer-list a:focus-visible { transform: scale(1.08); border: 1px solid #333; outline: none; }
.cvs-coming-soon { position: absolute; display: flex; width: 100%; min-height: clamp(125px, 7.3vh, 130px); justify-content: center; align-items: center; background: rgba(0, 0, 0, 0.65); color: #fff; border-radius: 7px; }
.detail-image { width: 100%; padding: 140px 0; background: #fff; display: flex; justify-content: center; }
.detail-image img { max-width: 100%; }
.stella-btn-top { position: fixed; right: 5%; bottom: 12%; width: 46px; height: 46px; border-radius: 50%; background: #333; box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.2); cursor: pointer; display: none; align-items: center; justify-content: center; z-index: 2000; }
.stella-btn-top.is-visible { display: flex; }
.stella-btn-top:focus-visible { outline: 2px solid #222; outline-offset: 2px; }
.mo_only { display: none; }
/* Product soldout */
/* 품절일 때 링크 비활성 */
.product-offer-card.stl-soldout { pointer-events: none; }
.product-offer-card.stl-soldout .product-offer-card__badge { color: #767676; background: #e4e4e4; }
/* 반투명+블러 오버레이 */
.soldout-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8% 6%; color: #fff; text-align: center; background: rgb(61 61 61 / 30%); }
.soldout-overlay__tit { display: block; font-family: Artois; font-size: 38px; font-weight: 400; line-height: 120%; letter-spacing: -0.76px; text-shadow: 0 0 20px rgba(0, 0, 0, 0.25); }
.detail-card-photo__image.stl-soldout .soldout-overlay__tit { font-size: 60px; line-height: 120%; letter-spacing: -1.2px; }
/* 구매처 링크 리스트 위에 SOLD OUT 블러 오버레이 */
.retailer-list.retailer-list--soldout { position: relative; height: 50px; }
.retailer-list.retailer-list--soldout::before { content: ""; position: absolute; inset: -6px; z-index: 2; border-radius: 8px; background: #e4e4e4; }
.retailer-list.retailer-list--soldout::after { content: "품절"; position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; color: #a5a5a5; font-size: 18px; font-weight: 600; line-height: 120%; letter-spacing: -0.36px; pointer-events: none; }

/* ========== Perfect Serve ========== */
/* 사용처: about-perfect-serve/index.php */
.perfect-serve { padding: 5rem 1.25rem; text-align: center; }
.perfect-serve__title { margin-bottom: 4vh; }
.perfect-serve__heading { margin-bottom: 1vh; font-size: 4rem; }
.perfect-serve__subheading { font-size: 1.875rem; color: #555; }
.perfect-serve__video { width: 100%; height: 100%; object-fit: cover; }
.perfect-serve__media { position: relative; max-width: 1200px; margin: 0 auto; margin-bottom: 4vh; }
.perfect-serve__image-wrap { position: relative; }
.perfect-serve__image { display: block; width: 100%; height: auto; }
.perfect-serve__overlay-text { position: absolute; top: 20%; left: 8%; font-size: 24px; font-weight: bold; line-height: 1.4; text-align: left; color: white; }
.perfect-serve__desc { max-width: 720px; margin: 0 auto; padding: 0 1.25rem; font-size: 1.3rem; line-height: 1.5; color: #333; }
.perfect-serve__desc p { padding-bottom: 3vh; }
.perfect-serve__desc p:last-child { padding-bottom: 0; }
.perfect-serve__desc p strong { font-weight: bold; }
.why-serve { margin: 0 1.25vw 8vh; margin-bottom: 5vh; text-align: center; }
.why-serve__title { margin-bottom: 2vh; font-size: 4rem; }
.why-serve__heading { margin-bottom: 1vh; font-size: 4rem; }
.why-serve__subheading { margin-bottom: 4vh; font-size: 1.875rem; color: #555; }
.why-serve__visual { max-width: 700px; margin: 0 auto 5vh; }
.why-serve__image { display: block; width: 100%; height: auto; }
.why-serve__content { max-width: 1200px; margin: 0 auto; text-align: left; }
.why-serve__point { margin-bottom: 4vh; text-align: center; }
.why-serve__point:last-child { margin-bottom: 0; }
.why-serve__point h2 { display: flex; justify-content: center; align-items: center; margin-bottom: 1.3vh; font-size: 1.875rem; color: #c11b17; }
.why-serve__point-number { display: inline-flex; justify-content: center; align-items: center; width: 1.5rem; height: 1.5rem; margin-right: 3vh; border-radius: 50%; font-family: "ArtoisIsabella-Serif", serif; font-size: 1rem; color: #fff; background: #c11b17; }
.why-serve__point p { font-size: 1.3rem; color: #999; }
.ritual-intro { margin: 0 1.25vw 6rem; text-align: center; }
.ritual-intro__bar { max-width: 1700px; margin: 0 auto; margin-bottom: 5vh; padding: 2vh 0; background-color: #b93222; }
.ritual-intro__heading { font-size: 2.25rem; color: #fff; }
.ritual-intro__desc { padding-bottom: 3vh; font-size: 1.3rem; color: #999; }
.ritual-intro__desc strong { font-weight: bold; color: #c11b17; }
.ps-txt-2 { font-size: 2rem; }
.ritual-tabs-mobile { display: none; }
.perfect-serve__per-video { width: 1200px; }
/* Heritage Steps (5 Step Ritual) */
.ritual-steps__grid { display: flex; justify-content: center; align-items: center; margin: 10vh auto; }
.ritual-step { max-width: 340px; padding: 0 20px; border-left: 1px solid #999; display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.ritual-step:last-child { border-right: 1px solid #999; }
.ritual-step__num { color: #c11b17; font-size: 1.4rem; font-weight: 700; margin-bottom: 2vh; font-family: "Artois"; }
.ritual-step__title { font-family: "ArtoisIsabella-Serif", serif; font-size: 4.5rem; margin: 0; }
.ritual-step__subtitle { font-size: 1rem; font-weight: 600; margin-top: 2vh; }
.ritual-step__desc { font-size: 0.75rem; line-height: 1.6; margin-top: 1vh; height: 125px; text-align: left; }
.ritual-step__img { margin-top: 16px; width: 100%; height: auto; }
/* Mark of Perfect Serve (3 Marks) */
.mops { display: flex; justify-content: space-between; align-items: flex-start; margin-top: 3vh; border-left: 1px solid #ccc; margin-bottom: 10vh; }
.mops__item { display: flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; min-width: 397px; border-right: 1px solid #ccc; padding: 0 50px; text-align: left; flex-direction: column; }
.mops__item .bs-cart-img { margin: 0; }
/* Fixed CTA Button */
.fix-btn { position: fixed; bottom: 0; left: 0; right: 0; max-width: 940px; max-height: 69px; margin: 0 auto; width: 100%; display: flex; z-index: 1; }
.fix-btn > a.btn-copy { margin: 0 auto; padding: 0; min-width: auto; max-height: 69px; height: 100%; width: 100%; background: #c11b16; line-height: 69px; font-size: 20px; border: 1px solid #fff; text-decoration: none; font-weight: bold; vertical-align: top; box-sizing: border-box; color: #fff; }
.fix-btn > a.btn-copy:hover { background: #cb2027; border: none; color: #fff !important; font-weight: bold; }
/* About Perfect Serve 페이지 오버라이드 */
.about-perfect-serve-page .brand-story .bs-inner { padding: 0; }
.about-perfect-serve-page .brand-story { margin-top: 0; max-width: 1500px; }
.about-perfect-serve-page .bs-tab-box { max-width: 100%; }
.about-perfect-serve-page .bs-tab-content { padding-top: 5vh; }
.about-perfect-serve-page .ps-txt-2 { font-size: 1.5rem; }
.about-perfect-serve-page .ritual-intro { margin: 0; }
.about-perfect-serve-page .ritual-intro__desc { font-size: 1.2rem; }
.about-perfect-serve-page .perfect-serve__desc p { font-size: 1.2rem; }
.about-perfect-serve-page .perfect-serve__media { max-width: 880px; }
.about-perfect-serve-page .ritual-steps { max-width: 1720px; }
.about-perfect-serve-page .ritual-steps__grid { justify-content: space-between; margin-top: 3vh; }
.about-perfect-serve-page .ritual-step { min-width: 259px; flex: 1;}
.about-perfect-serve-page .ritual-step__title { font-size: 3rem; }
.about-perfect-serve-page .ritual-step__subtitle { margin-bottom: 1vh; word-break: keep-all; word-wrap: break-word; }
.about-perfect-serve-page .ritual-step__desc { font-size: 12px; margin-top: 0; word-break: keep-all; word-wrap: break-word; }
.about-perfect-serve-page .bs-cart-img { width: 100%; }
.about-perfect-serve-page .bs-tab-cont-sub { margin-bottom: 3vh; }
.about-perfect-serve-page .bs-tab-cont-sub2 { font-size: 1.875rem; word-break: keep-all; margin-bottom: 0; height: 80px; }

/* ========== Draught Master ========== */
/* 사용처: draught-master/index.php */
.draught-master-page .draught-master__video { width: 832px; margin: 0 auto; display: block; }
.draught-master-page .perfect-serve__desc { max-width: 890px; margin-bottom: 4vh; color: #999; }
.draught-master-page .perfect-serve__desc strong { color: #555; }
.draught-master-page .draught-master { width: 832px; position: relative; overflow: hidden; }
.draught-master-page .ritual-intro__desc { color: #555; }

/* ========== Campaign List ========== */
.width_box3 { max-width: 1720px; margin: 0 auto; }
.width_box { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 0 195px; box-sizing: border-box; }
.campaign-list { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; margin: 0 auto; }
.campaign-list li { flex: 0 1 calc(33.333% - 13.33px); box-sizing: border-box; overflow: hidden; }
.campaign-list__subtitle { margin-bottom: 8vh; font-size: 1.875rem; text-align: center; }
.campaign-list a { position: relative; display: block; aspect-ratio: 560 / 311; overflow: hidden; }
.campaign-list li img { width: 100%; height: 100%; object-fit: cover; }
.campaign-list__btn { position: absolute; top: 60%; display: block; padding: 0.5rem 2rem; border: 2px solid #fff; border-radius: 40px; font-family: "Cafe24Danjunghae", sans-serif; font-size: 0.8rem; font-weight: bold; color: #fff; background: rgba(255, 255, 255, 0); }
.campaign-list__title { position: absolute; top: 0; left: 0; display: none; justify-content: center; align-items: center; width: 100%; height: 100%; font-family: "ArtoisIsabella-Serif", sans-serif; font-size: 2rem; text-align: center; color: #fff; }
.campaign-list a:hover .campaign-list__title { display: flex; color: #fff; background: rgba(0, 0, 0, 0.5); }
/* Pagination */
.pagination { margin: 10vh 0; text-align: center; }
.pagination__nav { display: inline-block; overflow: hidden; }
.pagination__arrow { display: block; width: 26px; height: 26px; background-position: 0 0; background-repeat: no-repeat; float: left; }
.pagination__arrow--prev { background-image: url(/resources/img/common/btn-prev.png); }
.pagination__arrow--next { background-image: url(/resources/img/common/btn-next.png); }
.pagination__list { padding: 0 45px; overflow: hidden; float: left; }
.pagination__list li { margin-right: 40px; float: left; }
.pagination__list li:last-child { margin: 0; }
.pagination__list li.is-active a { font-weight: bold; color: #333; }
.pagination__list li a { font-family: "ArtoisIsabella-Serif", sans-serif; font-size: 1.5rem; color: #989898; }

/* ========== Campaign Detail ========== */
.campaign_view .tit-box {margin-bottom: 60px;}
.campaign_view .tit_h2 { margin-top: 5rem; font-family: "ArtoisIsabella-Serif", sans-serif !important; font-size: 2rem; font-weight: 400; text-align: center; line-height: 120%;}
.tit-box { position: relative; }
.tit-box .back-list { position: relative; display: block; margin-top: 25px; margin-bottom: 4px; margin-left: 25px; padding-left: 20px; font-family: Artois, sans-serif; font-size: 20px; font-weight: 100; color: #989898; }
.tit-box .back-list:before { position: absolute; top: 50%; left: 0; display: block; width: 9px; height: 16px; background: url(/resources/img/common/ico-back.png) no-repeat 0 0; transform: translateY(-50%); content: ""; }
.campaign-content { text-align: center; color: #989898; }
.campaign-content .cont-tit { display: inline-block; margin-bottom: 40px; padding-bottom: 4px; border-bottom: 1px solid #989898; font-size: 30px; font-weight: 700; }
.campaign-content p {font-size: 18px; line-height: 1.4; word-break: keep-all; }
.wrap-video { position: relative; width: 100%; height: 0; margin-bottom: 47px; padding-bottom: 56.25%; }
.wrap-video.mb0 { margin-bottom: unset;}
.wrap-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* ========== Michelin ========== */
.Michelin_page { max-width: 1720px; margin: 0 auto; }
.michelin_width_box { margin-bottom: 10vh; }
.Michelin_page .tit_h2 { margin: 5rem 0 2vh; font-size: 4rem; text-align: center; }
.michelin_red_bar { margin: 3vh auto; padding: 2vh 0; font-size: 1.5rem; text-align: center; color: #fff; background: #c11b17; }
.michelin_img { display: block; max-width: 820px; margin: 0 auto; }
.michelin_txt { margin-bottom: 3vh; padding: 5vh 0; border-bottom: 1px solid #999; text-align: center; }
.michelin_txt strong { font-weight: bold; }
.michelin_width_box h4,
.michelin_width_box h2 { font-size: 3.5rem; line-height: 1.2; text-align: center; color: #c11b17; }
.michelin_width_box .event-date { font-size: 2rem; }
.michelin_slide_wrapper { position: relative; display: flex; justify-content: center; align-items: center; width: 1200px; margin: 2vh auto; }
.michelin_slide_wrapper.pt_5vh {padding-top: 5vh;}
.michelin_slide { position: relative; width: 832px; overflow: hidden; }
.michelin_slide .swiper-wrapper { display: flex; width: 832px; }
.michelin_slide .swiper-slide img { width: 100%; height: auto; object-fit: cover; }
.Michelin_page .no_border { border-bottom:0;}
.draught-video { display: block; width: 360px; margin: 5vh auto; }
.ht-desc { font-size: 1rem; }
.ht-tit { font-size: 4rem; }
.ct_title, .ht_title { height: 30vh; }
.ct_title::before, .ht_title::before { border-width: 0 20vh 30vh 0; }
.bs-history-list-img::before { left: 0rem; width: 1rem; height: 1rem; }
.bs-history-list-txt { padding-right: 1.5rem; }
.bs-history::before { height: 87%; }
.bs-tab-cont-sub { margin-bottom: 3vh; }
.cv-list { flex-direction: column; height: 20% !important; }
.cv-list-left .cv-list p { padding: 1rem; }
.cv-list-left .cv-list { margin-bottom: 0; }
.cv-list-right .cv-list:first-child .cv-list-point { top: 50px; }
.cv-list-right .cv-list:last-child .cv-list-point { top: 10rem; left: -9rem; }
.cv-list-left .cv-list::after, .cv-list-right .cv-tit-box::before { display: none; }
.pd-pt-list { margin-bottom: 7rem; }
/* Mobile Common */
#block-stella-page-title { display: none; }
#block-stella-content footer { display: none; }
.blind { position: absolute!important; top: 50%; display: block; width: 0!important; height: 0!important; margin: -1px!important; padding: 0!important; border: 0!important; overflow: hidden!important; -webkit-clip-path: inset(0 0 99.9% 99.9%); clip: rect(1px,1px,1px,1px); clip-path: inset(0 0 99.9% 99.9%); }
.mo_only { display: none !important; }
.pc_only { display: block !important; }
.clearfix::after { display: block; content: ""; clear: both; }
.campaign { position: relative; }
.campaign-content .campaign-inner .section .section-inner { max-width: 1100px; }
.campaign-content .campaign-inner a { display: block; }
.campaign-content .campaign-inner .btnArea .btn { position: relative; display: inline-block; width: 100%; max-width: 600px; padding: 1.4em 1em; box-sizing: border-box; font: 500 27px/1 'Noto Sans KR'; color: #fff; background: #c11b17; }
.campaign-content .campaign-inner .btnArea .btn .icon { position: relative; padding-left: 1.8em; }
.campaign-content .campaign-inner .btnArea .btn.link-down .icon { padding-left: 1.4em; }
.campaign-content .campaign-inner .btnArea .btn .icon::before { position: absolute; top: 0; left: 0; width: 1.5em; height: 100%; }
.campaign-content .campaign-inner .btnArea .btn.link-insta .icon::before { background: url(/resources/img/campaign/icon-insta.png) no-repeat center/100% auto; content: ""; }
.campaign-content .campaign-inner .btnArea .btn.link-cta .icon::before { background: url(/resources/img/campaign/icon-cart.png) no-repeat center/100% auto; content: ""; }
.campaign-content .campaign-inner .btnArea .btn.link-down .icon::before { width: 1.1em; background: url(/resources/img/campaign/icon-down.png) no-repeat center/100% auto; content: ""; }
.campaign-content .campaign-inner .btnArea .btn.link-map .icon::before { width: 1.1em; background: url(/resources/img/campaign/icon-map.png) no-repeat center/100% auto; content: ""; }
/* date-info */
.campaign-content .campaign-inner .date-info { position: relative; padding: 8% 17% 5%; }
.campaign-content .campaign-inner .date-info .title-sub { padding: 2% 0 4%; }
.campaign-content .campaign-inner .date-info > dl { display: flex; justify-content: flex-start; align-items: flex-start; margin: .5rem auto; font: 700 25px/1 'Noto Sans KR'; letter-spacing: -.02em; text-align: left; color: #333; }
.campaign-content .campaign-inner .date-info > dl dt.info-title { display: inline-block; min-width: 58px; padding: .2em .6em; border-radius: 5vh; box-sizing: border-box; text-align: center; color: #fff; background: #c11b17; }
.campaign-content .campaign-inner .date-info > dl dd { width: 80%; padding: .1em 0.55em 0; box-sizing: border-box; line-height: 1.2; }
/* 공통 이미지 */
.campaign-content .campaign-inner { min-width: 300px; }
.campaign-content .campaign-inner .obj { position: relative; width: 100%; height: 100%; margin: 0 auto; }
.campaign-content .campaign-inner .obj.store-logo { max-width: 605px; }
.campaign-content .campaign-inner .obj img { display: inline-block; width: 100%; vertical-align: middle; }
.campaign-content .campaign-inner .obj-video { width: 100%; height: 100%; margin: 0 auto 47px; box-sizing: border-box; }
.campaign-content .campaign-inner .obj-video .video-wrap { position: relative; width: 100%; padding-bottom: 56.25%; }
.campaign-content .campaign-inner .obj-video .video-wrap.pb0 { padding-bottom: 0; }
.campaign-content .campaign-inner .obj-video .video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.campaign-content .campaign-inner .obj-video.control .video-wrap { padding-bottom: 100%; overflow: hidden; }
.campaign-content .campaign-inner .obj-video.control .video-wrap > iframe { left: 50%; width: 50vw; max-width: 720px; transform: translate(-50%,0); }
/* 공통 텍스트박스 */
.campaign-content .campaign-inner p { margin: 0; }
.campaign-content .campaign-inner .text-box { position: relative; width: 100%; box-sizing: border-box; text-align: center; }
.campaign-content .campaign-inner .text-box.ptop { padding: 10% 14% 0; }
.campaign-content .campaign-inner .text-box.single { padding: 10% 14% 0; }
.campaign-content .campaign-inner .title { color: #c11b17; }
.campaign-content .campaign-inner .title.ko {font-size: 42px; font-weight: 600; font-family: 'Noto Sans KR'; line-height: 130%; letter-spacing: -2%;}
.campaign-content .campaign-inner .title.en {font-size: 52px; font-weight: 600; line-height: 120%; font-family: "ArtoisIsabella-Serif", sans-serif;}
.campaign-content .campaign-inner .pb60 { padding-bottom: 60px;}
.campaign-content .campaign-inner .pb30 { padding-bottom: 30px;}
.campaign-content .campaign-inner .title-sub { padding-bottom: 60px; font: 700 30px/1.2 'Noto Sans KR'; letter-spacing: -0.02em; color: #000; }
.campaign-content .campaign-inner .title-sub.pb30 { padding-bottom: 30px; }
.campaign-content .campaign-inner .text-box .text { padding-bottom: 1em; font: 400 18px/1.4 'Noto Sans KR'; letter-spacing: -0.04em; color: #333; }
.campaign-content .campaign-inner .text-box .text em { font-weight: 600; color: #666; }
.campaign-content .campaign-inner .text-box .text:last-child.warning { padding-bottom: 6%; }
.campaign-content .campaign-inner .text-box .text a { display: inline-block; cursor: pointer; }
.campaign-content .campaign-inner .text-box .text:last-child { padding-bottom: unset; }
.campaign-content .campaign-inner .nowrap { display: inline-block !important; white-space: nowrap; }
.campaign-content .campaign-inner .wrap { white-space: pre-wrap; word-break: break-all; }
.tab-content { padding-top: 60px; }
.tab-content ul.tab-menu { width: 100%; margin: 0 auto; }
.tab-content ul.tab-menu li { display: inline-block; width: calc(99%/3); margin: 0 .5px; box-sizing: border-box; overflow: hidden; font: 400 20px/1.4 'Noto Sans KR'; }
.tab-content ul.tab-menu li a { position: relative; padding: 8.04% 0; box-sizing: border-box; color: #fff; background: #cb2027; transition: background-color 1s; }
.tab-content ul.tab-menu li a::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 8.04% 0; background: #f0000b; animation: turn-off .5s ease-out; content: ""; }
.tab-content ul.tab-menu li:nth-child(1) a::before { content: "Table Turners"; }
.tab-content ul.tab-menu li:nth-child(2) a::before { content: "Tablescaping"; }
.tab-content ul.tab-menu li:nth-child(3) a::before { content: "Chef’s Tour Guide"; }
.tab-content ul.tab-menu li.on a::before { background: #cb2027; animation: turn-on 0.5s ease-out; }
.tab-content .tab-cont { position: relative; }
.tab-content .tab-cont > .tabcont-item { display: none; width: 100%; padding: 60px 0 0; box-sizing: border-box; }
.tab-content .tab-cont > .tabcont-item.on { display: block; animation: on 0.8s ease-in; }
.tab-content .tab-cont > .tabcont-item:first-child { position: relative; }
.tab-content .tab-cont ul.news-list { padding-top: 60px; }
.tab-content .tab-cont ul.news-list > li { padding-bottom: 4%; }
.tab-content .tab-cont ul.news-list > li:last-child { padding-bottom: unset; }
.tab-content .tab-cont ul.news-list > li > div { display: inline-block; width: 50%; }
.tab-content .tab-cont ul.news-list > li > .obj a + a { padding-top: 4%; }
.tab-content .tab-cont ul.news-list > li > .text-box { padding: 3.1%; text-align: left; }
.tab-content .tab-cont ul.news-list > li > .text-box.long-text { padding: 3.1% 0 3.1% 3.1%; }
.tab-content .tab-cont ul.news-list > li > .text-box .title-sub { padding: 1% 0 4%; font: 700 26px/1.2 'Noto Sans KR'; color: #000; }
.tab-content .tab-cont ul.news-list > li > .text-box p { text-align: left; }
/* .videoPopUp */
body.logged-in .videoPopUp-Wrap { top: 32px; }
.videoPopUp-Wrap { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 555; display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; padding: 0 4.16%; box-sizing: border-box; font: normal 16px/1 'Spoqa Han Sans'; word-break: keep-all; background: rgba(0,0,0,.8); }
.videoPopUp-Wrap .videoPopUp-Content { position: relative; width: 100%; max-width: 1000px; box-sizing: border-box; background: #fff; }
.videoPopUp-Wrap .videoPopUp-Content .btn-close { position: relative; display: block; width: 78px; height: 50px; margin-left: auto; border: none; background: #fff url('/resources/img/common/btn_close.png') no-repeat bottom/30px 30px; }
.videoPopUp-Wrap .videoPopUp-Content .pop-cont { position: relative; padding-bottom: 56.25%; border: 14px solid #fff; overflow: hidden; }
.videoPopUp-Wrap .videoPopUp-Content .pop-cont iframe { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; }
.videoPopUp-animation { opacity: 0; animation: videoPopUp .5s both; }
.videoPopUp-Hide { animation: videoPopUpHide .5s both; }
.videoPopUp-Wrap .btn-close:hover { opacity:.5 }
/* .floating */
.floating { position: fixed; right: 36px; bottom: 27px; width: 82px; height: 82px; }
.floating .btn-gotop { position: fixed; right: 36px; bottom: 27px; z-index: 195; width: 82px; height: 82px; border: 2px solid #c5ac67; border-radius: 50%; overflow: hidden; background: rgba(255,255,255,0.2); box-shadow: 12px 12px 21px rgba(116,116,116,0.14); }
.floating .btn-gotop .btn-arrow-icon { width: 42px; height: 24px; }
/* .C-Frites */
.C-Frites .campaign-inner .text-box { padding: 0 4%; }
.C-Frites ul.obj-list { display: flex; justify-content: flex-start; align-items: flex-start; padding: 2.85% 0 6%; box-sizing: border-box; }
.C-Frites .TABcont02 ul.obj-list { padding: 6% 0; }
.C-Frites ul.obj-list li { width: calc(97%/3); margin: 0 0.52%; text-align: center; }
.C-Frites ul.obj-list li .text-box .text { color: #333; }
.C-Frites ul.obj-list li img { width: 100%; }
.C-Frites .campaign-inner .text-box .title-sub { padding: 2% 0 0; }
.C-Frites .campaign-inner .TABcont03 .text-box .title-sub { padding: 8.33% 0 5% }
.C-Frites .TABcont02 .text-box p.text.noti-text { padding: 2.7% 0 6.5%; font: 600 25px/1.4 'Noto Sans KR'; color: #333; }
.C-Frites .TABcont02 .obj.store-img { max-width: 598px; }
.C-Frites .obj.text-box .visual { padding: 9.2% 0 7%; box-sizing: border-box; }
.FritesSwiper .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after { padding: .2em .4em; box-sizing: border-box; background: rgba(255,255,255,.8); }
.FritesSwiper .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after { padding: .2em .4em; box-sizing: border-box; background: rgba(255,255,255,.8); }
/* .tab-content.tab-imgver */
.tab-content.tab-imgver ul.tab-menu li { width: calc(98.8%/3); margin: 0 .2%; cursor: pointer; }
.tab-content.tab-imgver ul.tab-menu li a { padding: 0; background: #f0000b; }
.tab-content.tab-imgver ul.tab-menu li a .obj { padding-bottom: 1%; background: #fff; }
.tab-content.tab-imgver ul.tab-menu li a .obj img { mix-blend-mode: luminosity; }
.tab-content.tab-imgver ul.tab-menu li a .tab-menu-tit { min-height: 4rem; padding: 1.4em 0; box-sizing: border-box; line-height: 100%; word-break: keep-all; }
.tab-content.tab-imgver ul.tab-menu li:nth-of-type(1) a .tab-menu-tit { max-height: 4.8rem; padding: .9em 0; line-height: 1; }
.tab-content.tab-imgver ul.tab-menu li.on a { background: #cb2028; }
.tab-content.tab-imgver ul.tab-menu li.on a .obj img { mix-blend-mode: normal; }
.tab-content.tab-imgver ul.tab-menu li a::before { display: none; }
/*mediaQuery*/
/* Keyframes */
@keyframes videoPopUpHide { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes turn-on { 0% { top: 100%; transform: scale(1.2); } 100% { top: 0%; transform: scale(1); } }
@keyframes turn-off { 0% { top: 0%; transform: scale(1); } 100% { top: 100%; transform: scale(1.2); } }
@keyframes on { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeout { from { opacity: 1; } to { opacity: 0; } }
@keyframes slideDown { 0% { transform: scaleY(0); } 100% { transform: scaleY(1); } }
/* .Artois,
.Artois_s { font-family: ArtoisIsabella-Serif, serif !important; font-weight: 400; } */

/* ========== Campaign Detail: Let's Do Dinner ========== */
.ldd-swiper { width: 880px; max-width: 100%; height: 489px; margin-bottom: 60px;}
.ldd-swiper .swiper-slide { display: flex; align-items: center; justify-content: center; }
.ldd-swiper .swiper-slide img { height: 100%; width: auto; object-fit: contain; display: block; }
.ldd-swiper .swiper-pagination-bullet-active { background: #c11b17; }
.ldd-swiper .swiper-button-next,
.ldd-swiper .swiper-button-prev { color: #fff; }
.ldd-video { width: 100%; }

/* ========== Campaign Detail: The Star Standard ========== */
.campaign-content .obj_img img {box-sizing: border-box; }

/* ========== Campaign Detail: Common fix-btn (purchase button) ========== */
.campaign-content .fix-btn { position: fixed; bottom: 0; left: 0; right: 0; max-width: 940px; max-height: 69px; margin: 0 auto; width: 100%; display: flex; z-index: 10; }
.campaign-content .fix-btn > a.btn-copy { margin: 0 auto; padding: 0; min-width: auto; max-height: 69px; height: 100%; width: 100%; background: #c11b16; line-height: 69px; font-size: 20px; border: 1px solid #fff; text-decoration: none; font-weight: bold; vertical-align: top; box-sizing: border-box; color: #fff; text-align: center; }
.campaign-content .fix-btn > a.btn-copy:hover { background: #cb2027; border: none; color: #fff !important; font-weight: bold; }

/* ========== Campaign Detail: Holiday with Stella Artois ========== */
.holiday .obj_img {box-sizing: border-box; }
.youtube_thumb { width: 100%; aspect-ratio: 16 / 9; }
.youtube_thumb iframe { width: 100%; height: 100%; object-fit: cover; }
.tab-content ul.tab-menu li { width: calc(98% / 3); }
.tab-content ul.tab-menu li a,
.tab-content ul.tab-menu li a::before { background: #450303; font-family: Artois, 'NOTO SANS KR'; }
.tab-content ul.tab-menu li.on a::before { background: #f0000b; }
.tab-content ul.tab-menu li:nth-child(1) a::before { content: "Christmas Heritage"; }
.tab-content ul.tab-menu li:nth-child(2) a::before { content: "Stella Taste Road"; }
.tab-content ul.tab-menu li:nth-child(3) a::before { content: "Holiday Package"; }
.tab-content .tab-cont ul.news-list > li > .text-box .text.title-text { font-weight: 700; color: #000; }
.campaign-content p { font-size: 18px; }

/* ========== Campaign Detail: A Taste Worth More ========== */
.campaign-content.artois .section.s02 {padding-top: 60px;}

/* ========== Campaign Detail: 500ml Bottle Launch ========== */
.bottle_launch .fix-btn > a.btn-copy { background: #F0000B; }

/* ========== Campaign Detail: Heartbeat Billionaire ========== */
.campaign_heartbeats { position: relative; }
.campaign_heartbeats img { width: 100%; }
.campaign_heartbeats .wrap-video { margin-bottom: 0; }
.campaign_heartbeats .fix-btn { max-width: 1000px; }
.campaign_heartbeats .fix-btn > a.btn-copy { background: #F0000B; }

/* ========== Campaign Detail: Heritage Edition ========== */
.H-edition.campaign-content .campaign-inner .obj-video { position: relative; width: 100%; height: 100%;}
.H-edition.campaign-content .campaign-inner .obj-video .video-wrap { padding-bottom: 56.25%; }
.H-edition.campaign-content .campaign-inner .obj-video .video-wrap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.H-edition.campaign-content .campaign-inner .section { padding-bottom: 60px; }
.H-edition.campaign-content .campaign-inner .section:last-child { padding-bottom: unset; }
.H-edition.campaign-content .campaign-inner .title-sub { line-height: 1.4; }
.H-edition.campaign-content .campaign-inner .title-sub.color-stella { color: #c11b17; }
.H-edition.campaign-content .campaign-inner ul.gallery { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: flex-start; width: 100%; height: 100%; }
.H-edition.campaign-content .campaign-inner ul.gallery li { width: calc(100% / 3); margin: 1%; }

/* ========== Campaign Detail: Stella One Table ========== */
.campaign_onetable { position: relative; }
.campaign_onetable img { width: 100%; }
.campaign_onetable .fix-btn { max-width: 1000px; }
.campaign_onetable .fix-btn > a.btn-copy { width: 50%; background: #F0000B; }

/* ========== Campaign Detail: Stella Dining Club ========== */
.dining_club .section { padding-bottom: 60px;}
.dining_club .section:last-child { padding-bottom: unset;}
.dining_club .campaign-inner ul.gallery { display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: flex-start; width: 100%; }
.dining_club .campaign-inner ul.gallery li { width: calc(100% / 3); margin: 1%; }
.dining_club .obj_img img {border: 1px solid #dadada; box-sizing: border-box; }
.dining_club .obj_img.three { display: flex; }
.dining_club .obj_img.three img { width: 31.3%; margin: 2% 1%; }
.map_iframe iframe { width: 100%; overflow-x: hidden; overflow: auto; min-height: 500px; }
.rsize { max-width: 22px; }
.italic_txt { font-style: italic !important; }
.dining_club .section.s03 { width: 90%; margin: 0 auto;}
.dining_club .FritesSwiper { margin-bottom: 8%; height: fit-content; width: 80%; margin: 30px auto 70px; }
.dining_club .FritesSwiper .swiper-pagination-bullet { background: #ccc; }
.dining_club .FritesSwiper .swiper-pagination-bullet-active { background: #c11b17; }
.dining_club .swiper-button-next { right: 16px; }
.dining_club .swiper-button-prev { left: 14px; }
.dining_club .swiper-horizontal > .swiper-pagination-bullets,
.dining_club .swiper-pagination-bullets.swiper-pagination-horizontal { bottom: -30px; }
.campaign-content .campaign-inner { min-width: 280px; }

/* ========== Campaign Detail: Stella Holiday 2020 ========== */
.campaign_holiday2020 img { width: 60%; }
.campaign_holiday2020 .highlight-text { color: #c11b17; font-size: 27px; line-height: 1.2; font-weight: bold; }
.campaign_holiday2020 .info-text { color: #808088; font-style: italic; }

/* ========== Campaign Detail: Save the Date ========== */


/* ========== Campaign Detail: Taste More ========== */
.taste-more .tab-content ul.tab-menu li { width: calc(98% / 4); }
.taste-more .tab-content ul.tab-menu li:nth-child(4) a::before { content: "Stella Home-Sul Recipe"; }

/* ========== Campaign Detail: ccw2 ========== */
.header-ccw2 { background: transparent; } 
.header-ccw2 .nav-link { color: #fff; } 
.header-ccw2 .mm-tit { font-family: ArtoisIsabella-Serif, serif; } 
.header-ccw2 .channel_txt { font-family: Artois, sans-serif; } 

.ccw2 { background: #000; color: #fff; position: relative; z-index: 1; } 
.ccw2-video-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } 
.ccw2.ccw2-detached .ccw2-video-bg { position: absolute; inset: auto; left: 0; right: 0; top: var(--ccw2-detached-top, 0); } 
.ccw-kb-background { position: absolute; inset: 0; z-index: 1; transition: opacity 0.6s ease; } 
.ccw-kb-background img { width: 100%; height: 100%; object-fit: cover; } 
.ccw2-kv-video { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transform-origin: center center; overflow: hidden; opacity: 0; z-index: 0; width: 100%; height: 100vh; transition: opacity 0.6s ease; } 
.ccw2-kv-video video { display: none; width: 100%; height: 100%; object-fit: cover; } 
.ccw2-kv-video video.is-active { display: block; } 
.ccw2.is-started .ccw2-kv-video { opacity: 1; transition: opacity 0.6s ease; z-index: 5; } 
.ccw2-bg-hidden .ccw2-kv-video,
.ccw2-bg-hidden .ccw-kb-background { opacity: 0; } 
.ccw2-bg-hidden .ccw2-volume,
.ccw2-detached .ccw2-volume { opacity: 0; pointer-events: none; } 
.ccw2-volume-hidden .ccw2-volume { opacity: 0; pointer-events: none; } 
.ccw2-kv-front { position: relative; z-index: 3; display: flex; justify-content: center; align-items: center; gap: 45px; } 
.ccw2-kv-lockup { transition: transform 0.35s ease-out, opacity 0.35s ease-out; opacity: 1; } 
.ccw2.is-started .ccw2-kv-lockup-01 { transform: translateX(-90px); opacity: 0; } 
.ccw2.is-started .ccw2-kv-lockup-02 { transform: translateX(225px); opacity: 0; } 
.ccw2.is-started .ccw-kv-lockup-icon { opacity: 0; } 

.ccw2-kv-spacer { height: 140vh; } 
.ccw2-volume { position: fixed; z-index: 6; display: inline-flex; align-items: center; gap: 12px; padding: 10px 14px; pointer-events: auto; } 
.ccw2-volume--desktop { bottom: clamp(18px, 4vw, 32px); left: 85%; transform: translateX(-50%); } 
.ccw2-volume--mobile { display: none; } 
.ccw2-volume-label { font-size: 12px; letter-spacing: 0.12em; color: #fff; font-family: Artois, sans-serif; } 
.ccw2-volume input[type="range"] { width: 140px; accent-color: #c11b17; } 
.ccw2-volume input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; } 
.ccw2-volume input[type="range"]::-webkit-slider-thumb { width: 14px; height: 14px; border-radius: 50%; margin-top: -5px; } 
.ccw2-kv-front-scoll-down { position: absolute; bottom: 150px; width: 100%; text-align: center; transition: opacity 0.3s ease; } 
.ccw2-panel { position: relative; z-index: 2; min-height: 100vh; display: flex; align-items: center; justify-content: center; background: transparent; } 
.ccw2-panel--front { } 
.ccw2-panel--empty { } 
.ccw2-contents { position: relative; z-index: 2; min-height: 20vh; background: #d50032; padding-top: 120px; } 
.ccw2-contents-header { margin-bottom: 80px; } 
.ccw2-contents-header-tit { margin-bottom: 40px; } 
.ccw2-contents-header-tit h1 { font-family: "Cafe24Danjunghae", sans-serif; font-size: 58px; text-align: center; line-height: 1.2; letter-spacing: -0.48px; font-weight: 100; overflow: hidden; } 
.ccw2-contents-header-tit h1 img { width: 90px; } 
.ccw2-contents-header-desc { max-width: 930px; margin: auto; margin-bottom: 60px; text-align: center; } 
.ccw2-contents-header-desc p { font-size: 24px; font-family: "Noto Sans CJK KR", sans-serif; line-height: 1.4; letter-spacing: -0.48px; } 
.ccw2-contents-social a { width: 288px; margin: auto; display: flex; justify-content: center; align-items: center; gap: 10px; border: 2px solid #fff; padding: 12px 43px; border-radius: 8px; font-family: "Artois", sans-serif; font-size: 24px; letter-spacing: 0; line-height: 1.4; color: #fff; } 
.ccw2-contents-social a:hover { color: #d50032; background: #fff; } 
.ccw2-contents-social a:hover img { filter: brightness(0) saturate(100%) invert(15%) sepia(90%) saturate(7480%) hue-rotate(349deg) brightness(65%) contrast(121%); } 
.ccw2-contents-imgs { max-width: 1510px; margin: auto; display: flex; justify-content: center; gap: 20px; } 
.ccw2-contents-imgs img { border-radius: 20px; } 
.ccw2-contents-imgs-group { display: flex; gap: 20px; justify-content: space-between; } 
.ccw2-contents-footer img { display: block; margin-top: 15px; margin-bottom: -1px; width: 100%; } 
.ccw2-contents .fade-in { opacity: 0; transform: translateY(12px); transition: opacity 0.6s ease, transform 0.6s ease; } 
.ccw2-contents.is-visible .fade-in { opacity: 1; transform: none; } 
.mo-on { display: none; } 

/* ccw2 main (prototype) */
.ccw2-main { background: #000; color: #fff; min-height: 100vh; font-family: "Noto Sans KR", sans-serif; overflow: hidden;} 
.ccw2-main section { padding: 120px 0; } 
.ccw2-main section.ccw2-main-hero { position: relative; overflow: hidden; padding: 35px 0; } 
/* .ccw2-main-page .header { background: #000 !important; box-shadow: none !important; transition: background-color .25s ease, box-shadow .25s ease; } 
.header.header-scrolled { background: #fff !important; box-shadow: 0 5px 15px rgba(0,0,0,.12); } 

.ccw2-main-page .header__menu-item a {color: #fff;}
.header.header-scrolled .header__menu-item a {color: #000;} */

.ccw2-main-hero::after { content: ""; position: absolute; inset: 12% auto auto 55%; width: 40vmax; height: 40vmax; background: radial-gradient(circle, rgba(255, 255, 255, 0.08), transparent 70%); filter: blur(90px); opacity: .8; pointer-events: none; } 
.ccw2-main-hero .hero-inner { position: relative; max-width: 860px; z-index: 1; margin: auto; } 
.ccw2-main-hero .hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; letter-spacing: .12em; text-transform: uppercase; font-size: .92rem; color: #e6d7c3; } 
.ccw2-main-lockup { margin: clamp(20px, 3vw, 36px) 0 clamp(26px, 3vw, 40px); display: flex; gap: 18px; justify-content: center; } 
.ccw2-main-lockup .ccw2-kv-front { display: flex; justify-content: space-between; align-items: center; gap: clamp(24px, 4vw, 52px); } 
.ccw2-main-lockup .ccw2-kv-lockup-img { max-height: 390px; height: auto; width: 245px; } 
.ccw2-kv-lockup-02 .ccw2-kv-lockup-img { max-height: 290px; height: auto; width: 170px; } 
.ccw2-main-lockup .ccw-kv-lockup-icon img { max-height: clamp(24px, 5vw, 44px); width: auto; } 

.ccw2-main-hero .hero-cta { margin-top: 26px; display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(6px); color: #fff; text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.12); transition: transform 200ms ease, background 200ms ease, border 200ms ease; } 
.ccw2-main-hero .hero-cta:hover { transform: translateY(-1px); background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.2); } 
.ccw2-main-video { display: flex; flex-direction: column;} 
.ccw2-video-player { position: relative; width: 1100px; overflow: hidden; margin: auto; } 
.ccw2-video { width: 100%; height: auto; display: block; background: #000; } 
.ccw2-video::before { content: ''; width: 100%; height: 100%; background: #000; } 
.ccw2-video::-webkit-media-controls { display: none !important; } 
.ccw2-video::-moz-media-controls { display: none !important; } 
.ccw2-play-center { position: absolute; inset: 0; width: 48px; height: 48px; background: url("/resources/img/campaign/ccw2/play-white-btn-mo.png") center/contain no-repeat; border: 0; cursor: pointer; border-radius: 50%; transition: opacity .25s ease; top: 25%; left: 44%; display: none; } 
.ccw2-play-center.is-playing { background-image: url("/resources/img/campaign/ccw2/puase-btn.png"); background-size: auto; } 
.ccw2-video-meta-wrap { position: absolute; width: 100%; display: flex; bottom: 40px; left: 0; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 34px; padding: 0 20px; } 
.ccw2-video-rail { width: 100%; margin: auto; display: flex; justify-content: center; align-items: center; gap: 22px; } 
.ccw2-video-progress { width: 100%; max-width: 94vw; margin: auto; border-radius: 100px; } 
.ccw2-progress-track { position: relative; width: 100%; height: 8px; background: rgba(255, 255, 255, 0.16); border-radius: 99px; cursor: pointer; max-width: 850px;} 
.ccw2-progress-fill { position: absolute; inset: 0; background: #c11b17; transform-origin: left center; transform: scaleX(0); transition: transform .28s cubic-bezier(0.22, 0.61, 0.36, 1); border-radius: 100px; } 
.ccw2-progress-handle { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 22px; height: 22px; background: #fff; border: 1px solid #999; border-radius: 50%; box-shadow: 0 2px 6px rgba(0,0,0,.3); pointer-events: none; z-index: 1; transition: left .28s cubic-bezier(0.22, 0.61, 0.36, 1); } 
.ccw2-video-controls { display: flex; gap: 12px; justify-content: center; align-items: center; } 
.ccw2-play-toggle { background: rgba(255, 255, 255, 16%); border: 0; cursor: pointer; padding: 6px; width: 42px; height: 42px; display: flex; justify-content: center; align-items: center; border-radius: 100px; } 
.ccw2-play-toggle img { display: block; width: 11px; height: 18px; object-fit: contain; } 
.ccw2-toggle-icon--play { width: 18px !important; height: 23px !important; } 
.ccw2-sound { display: inline-flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, 16%); padding: 0 24px 0 18px; width: 160px; height: 42px; border-radius: 100px; } 
.ccw2-sound-toggle { width: 42px; height: 42px; background: url("/resources/img/campaign/ccw2/speaker-on-icon.png") no-repeat center/22px 22px; cursor: pointer; border: 0; } 
.ccw2-sound-toggle.is-muted { background: url("/resources/img/campaign/ccw2/mute-icon.png") no-repeat center/28px 22px; } 
.ccw2-sound input[type="range"] { width: 72px; accent-color: #c11b17; height: 6px; } 
.ccw2-sound input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); } 
.ccw2-sound input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 1px solid #999; box-shadow: 0 1px 3px rgba(0,0,0,.25); } 
.ccw2-video-meta-bar { color: #fff; width: 100%; margin: auto; max-width: 94vw; } 
.ccw2-video-eyebrow { font-size: 18px; letter-spacing: .4px; text-transform: uppercase; margin-bottom: 4px; color: #f6f3ec; font-family: 'Artois', sans-serif; } 
.ccw2-video-headline { font-size: 28px; margin: 0; line-height: 1.25; font-weight: 600;} 
.ccw2-video-list-head { font-family: "Artois", sans-serif; font-size: 32px; letter-spacing: 0; color: #fff; margin-top: 6px; width: 1500px; margin: auto; margin-top: 40px; margin-bottom: 14px; } 
.ccw2-video-list-row { display: flex; align-items: flex-start; width: 1500px; margin: auto; justify-content: space-between; gap: 1vw; } 
.ccw2-video-card { position: relative; color: #fff; text-align: left; cursor: pointer; display: flex; align-items: flex-start; background: transparent; border: 0; width: 33.3333%; justify-content: space-between; } 
.ccw2-video-card:hover { } 
.ccw2-video-card.is-active { } 
.ccw2-video-card-thumb { width: 158px; height: 89px; display: flex; position: relative; overflow: hidden; border: 1px solid #222222; border-radius: 10px; } 
.ccw2-video-card-thumb.is-coming { background: url("/resources/img/campaign/ccw2/stella-artois-culinary-class-wars-season-2-logo-coming-soon.png") no-repeat center/cover; align-items: center; justify-content: center; box-sizing: border-box; flex-direction: column; text-align: center; } 
.ccw2-video-card-thumb.has-video { align-items: center; justify-content: center; } 
.ccw2-video-card-thumb.has-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; } 
.ccw2-video-card-thumb.has-video::after { content: ""; position: absolute; inset: 0; background: url("/resources/img/campaign/ccw2/play-btn.png") no-repeat center center; background-size: 52px 52px; pointer-events: none; } 
.ccw2-video-card-number { font-weight: 800; font-size: 1.4rem; letter-spacing: .04em; color: #0a0a0f; } 
.ccw2-thumb-overline,
.ccw2-thumb-caption { display: none; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.65); } 
.ccw2-thumb-overline { font-size: 8px; color: #686868; line-height: 1; font-family: 'Artois',sans-serif; } 
.ccw2-thumb-caption { font-size: 18px; letter-spacing: -0.5px; line-height: 1; font-weight: 800; margin-top: 6px; color: #fff; font-family: ArtoisIsabella-Serif,sans-serif!important; } 
.ccw2-video-card-thumb.is-coming .ccw2-thumb-overline,
.ccw2-video-card-thumb.is-coming .ccw2-thumb-caption { display: block; } 
.ccw2-video-card-meta { display: flex; flex-direction: column; gap: 8px; line-height: 1.4; font-family: 'Artois',sans-serif; } 
.ccw2-video-card-meta .eyebrow { font-size: .8rem; letter-spacing: .45px; color: #BCBCBC; font-family: 'Artois', sans-serif; } 
.ccw2-video-card-meta .title { font-weight: 700; font-size: 1rem; letter-spacing: .4px; color: #fff; } 
.ccw2-video-card[data-coming-soon="true"] .ccw2-video-card-meta .title { color: #bcbcbc; } 
.ccw2-video-list-row .ccw2-video-card:nth-child(2) { border-left: 2px solid #222222; border-right: 2px solid #222222; padding-left: 1vw; padding-right: 1vw; } 
.ccw2-card-section { position: relative; padding: clamp(60px, 7vw, 120px) clamp(16px, 6vw, 80px) clamp(70px, 8vw, 140px); background: url("/resources/img/campaign/ccw2/stella-artois-culinary-class-wars-season-2-logo-card-background.png") center/cover no-repeat; color: #fff; overflow: hidden; padding-bottom: 95px; } 
.ccw2-card-section-bg { position: absolute; inset: 0; background: radial-gradient(circle at 50% 20%, rgba(255,255,255,0.06), transparent 60%); pointer-events: none; } 
.ccw2-card-headline { position: relative; text-align: center; font-family: "Artois", sans-serif; letter-spacing: .02em; font-size: 52px; line-height: 1.1; } 
.ccw2-card-grid { position: relative; display: flex; gap: 1vw; justify-content: center; align-items: flex-end; flex-wrap: wrap; margin-top: clamp(32px, 5vw, 48px); } 
.ccw2-card-item { position: relative; perspective: 1200px; transition: transform .55s cubic-bezier(.19,1,.22,1), width .55s cubic-bezier(.19,1,.22,1), height .55s cubic-bezier(.19,1,.22,1); } 
.ccw2-card-item.week-1 { order: 0; } 
.ccw2-card-item.week-2 { order: 1; } 
.ccw2-card-item.week-3 { order: 2; } 
.ccw2-card-item.week-4 { order: 3; } 
.ccw2-card-item.week-5 { order: 4; } 
.ccw2-card-item.week-6 { order: 5; } 
.ccw2-card-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1.25s cubic-bezier(.2,.8,.25,1); } 
.ccw2-card-item.is-flipped .ccw2-card-inner { transform: rotateY(180deg); } 
.ccw2-card-face { position: absolute; inset: 0; border-radius: 14px; overflow: hidden; backface-visibility: hidden; box-shadow: 0px 0px 48px rgba(0, 0, 0, .62) } 
.ccw2-card-face::before { content: ""; position: absolute; inset: 0; border-radius: 14px; padding: 2px; background: linear-gradient(120deg, #ffffff 0%, #cccccc 6%, #555555 31%, #363636 75%, #efefef 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } 
.ccw2-card-face img { width: 100%; height: 100%; object-fit: cover; display: block; } 
.ccw2-card-face.is-back { transform: rotateY(180deg); background: #000; display: flex; } 
.ccw2-card-face.is-back video { width: 100%; height: 100%; object-fit: cover; } 
.ccw2-card-face.is-back .ccw2-card-sound { position: absolute; right: 10px; top: 20px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; pointer-events: auto; z-index: 5; } 
.ccw2-card-face.is-back .ccw2-card-sound button { width: 34px; height: 34px; background: url("/resources/img/campaign/ccw2/speaker-on-icon.png") no-repeat center/28px 31px; cursor: pointer; border: 0; pointer-events: auto; } 
.ccw2-card-face.is-back .ccw2-card-sound button.is-muted { background: url("/resources/img/campaign/ccw2/mute-icon.png") no-repeat center/34.47px 31px; } 
.ccw2-card-front-meta { position: absolute; top: 0; left: 0; display: flex; color: #fff; font-family: 'Noto Sans KR', sans-serif; line-height: 1; width: 100%; height: 100%; justify-content: center; align-items: center; text-align: center; padding: 5%; flex-direction: column; } 
.ccw2-card-front-meta .eyebrow { font-size: 14px; letter-spacing: .4px; margin: 0; position: absolute; top: 3vh; color: #aaa; font-family: 'ArtoisIsabella-Serif'; } 
.ccw2-card-front-meta .desc { margin: 0; line-height: 1.4; font-size: 14px; color: #aaa; letter-spacing: -1px; } 
.ccw2-card-front-meta .desc span { font-size: 16px; font-weight: bold; letter-spacing: -1.3px; } 
.ccw2-card-front-meta .desc-flip { position: absolute; bottom: 2vh; color: #aaa; font-size: 15px; font-family: 'Artois', sans-serif; } 
.ccw2-card-desc { position: absolute; display: flex; width: 100%; height: 100%; justify-content: flex-start; align-items: flex-end; bottom: 24px; left: 24px; } 
.ccw2-card-face.is-front { background: rgba(0,0,0,0.7); } 
.ccw2-card-coming { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; font-family: "ArtoisIsabella-Serif", serif; font-size: 24px; letter-spacing: 0; color: #bcbcbc; } 
.ccw2-card-coming .ccw2-card-week-tag { display: block; font-family: "Artois", sans-serif; font-size: 20px; letter-spacing: .08em; color: #bcbcbc; margin-bottom: 10px; } 
.ccw2-card-cta { margin-top: 8vh; text-align: center; } 
.ccw2-card-cta .cta-text { font-family: "Artois", sans-serif; font-size: 24px; line-height: 1.3; font-weight: 500; margin: 0 0 24px; letter-spacing: .01em; } 
.ccw2-card-cta .cta-text span { font-weight: bold; } 
.ccw2-card-cta .cta-btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px; background: #c11b17; color: #fff; border-radius: 8px; letter-spacing: .02em; font-family: "Noto Sans KR", sans-serif; font-size: 22px; font-weight: 700; letter-spacing: -0.48px; width: 340px; height: 72px; } 
.ccw2-cotents-back { text-align: center; margin: 0px auto; border-bottom: 1px solid #fff; max-width: 103px; margin-top: 40px; } 
.ccw2-cotents-back a { color: #fff; font-size: 20px; font-family: Artois, sans-serif; display: flex; align-items: center; justify-content: space-between; } 
.ccw2-card-front-meta.is-disable { position: absolute; bottom: 0; left: 0; display: flex; color: #fff; font-family: "Artois", sans-serif; line-height: 1; text-align: center; flex-direction: column; justify-content: center; width: 100%; height: 100%; } 
.ccw2-card-front-meta.is-disable .desc { font-size: clamp(40px, 42px, 44px); font-family: 'ArtoisIsabella-Serif',sans-serif; line-height: 1; color: #6a6a6a; } 
.ccw2-card-front-meta.is-disable .eyebrow { font-size: 20px; } 
.ccw2-main-desc { text-align: center; } 
.ccw2-spot-event-badge { font-family: "Artois", sans-serif; font-size: 24px; width: 88px; background: #bcbcbc; border-radius: 3px; color: #000; padding: 6px 20px; margin: auto; margin-bottom: 24px; display: block; } 
.ccw2-spot-event-tit { font-size: 42px; margin-bottom: 40px; font-weight: 700;} 
.ccw2-spot-event-tit span { color: #bcbcbc; } 
.ccw2-spot-event-sub-tit { font-size: 24px; font-weight: 700; margin-bottom: 20px; } 
.ccw2-spot-event-desc { font-size: 18px; color: #bcbcbc; font-weight: 400; margin-bottom: 40px; } 
.ccw2-spot-event-desc span { font-weight: 700; color: #fff; } 
.ccw2-spot-event-btn { font-size: 22px; font-weight: 400; background: #c11b17; display: block; width: 340px; height: 72px; border-radius: 6px; margin: auto; color: #fff; padding: 18px 30px; letter-spacing: -.48px; font-weight: 700; } 
.mo_only { display: none!important}
.pc_only { display: block!important}

/* ========== Responsive: Campaign CCW2 ========== */
@media (min-width: 1611px) and (max-width: 1749px) {
 .ccw2-video-card-meta .eyebrow .mo_only { display: block!important } 
 .ccw2-video-card-meta .title .mo_only { display: block!important } 
 .ccw2-video-list-head { width: 90vw; text-indent: 0; } 
 .ccw2-video-list-row { width: 90vw; } 
 .ccw2-video-meta-wrap { padding: 0 45px; } 
 }
@media (min-width: 1548px) and (max-width: 1578px) {
 .ccw2-video-list-head { width: 90vw; } 
 .ccw2-video-card-meta .eyebrow { font-size: 14px; } 
 .ccw2-video-card-meta .title { font-size: 15px; } 
 .ccw2-video-meta-wrap { padding: 0 45px; } 
 .ccw2-card-cta { margin-top: 5vh; } 
 }

@media (min-width: 1422px) and (max-width: 1452px),
       (min-width: 1390px) and (max-width: 1421px),
       (min-width: 1358px) and (max-width: 1389px),
       (min-width: 1327px) and (max-width: 1357px),
       (min-width: 1295px) and (max-width: 1326px),
       (min-width: 1264px) and (max-width: 1294px),
       (min-width: 1232px) and (max-width: 1263px){
 .ccw2-video-list-row { width: 90vw; } 
 .ccw2-video-list-head { width: 90vw; } 
 }
@media (min-width: 1200px) and (max-width: 1231px) {
 .ccw2-video-player { width: 100%; } 
 .ccw2-video-list-row { width: 90vw; } 
 .ccw2-video-list-head { width: 90vw; } 
 }
@media (min-width: 1169px) and (max-width: 1199px) {
 .ccw2-video-player { width: 100%; } 
 .ccw2-video-list-row { width: 90vw; } 
 .ccw2-video-list-head { width: 90vw; } 
 .ccw2-video-card-meta .eyebrow { font-size: clamp(10px,12px,14px); } 
 .ccw2-video-card-meta .title { font-size: .7vw; } 
 .ccw2-video-meta-wrap { padding: 0 45px; } 
 .ccw2-card-cta { margin-top: 14px; } 
 }
@media (max-width: 1100px) {
  .ccw2-video-player {width: 100%;}
}
 @media (max-width: 980px) {
 .ccw2-video-list-head { width: 90vw; align-items: center; } 
 .ccw2-video-list-row { flex-direction: column; gap: 3vw; width: 90vw; align-items: center; } 
 .ccw2-video-card { width: 90vw; } 
 .ccw2-video-list-row .ccw2-video-card:nth-child(2) { border: 0; padding: 3vw 0; border-bottom: 2px solid #222222; border-top: 2px solid #222222; } 
 .ccw2-video-card-meta .title .mo_only { display: none !important; } 
 .ccw2-video-card-meta .eyebrow .mo_only { display: none !important; } 
 }
@media (min-width: 1137px) and (max-width: 1168px) {
 .ccw2-card-front-meta.is-disable .desc { font-size: 34px; } 
 .ccw2-video-card-meta .eyebrow { font-size: clamp(12px, 14px, 16px); } 
 .ccw2-video-card-meta .title { font-size: clamp(13px, 15px, 17px); } 
 .ccw2-video-list-row { width: 90vw; } 
 .ccw2-video-list-head { width: 90vw; } 
 }
@media (min-width: 1106px) and (max-width: 1136px),
       (min-width: 1074px) and (max-width: 1105px),
       (min-width: 1043px) and (max-width: 1073px),
       (min-width: 1011px) and (max-width: 1042px),
       (min-width: 979px) and (max-width: 1010px),
       (min-width: 948px) and (max-width: 978px),
       (min-width: 916px) and (max-width: 947px),
       (min-width: 901px) and (max-width: 915px){
 .ccw2-card-front-meta.is-disable .desc { font-size: 32px; } 
 .ccw2-video-list-row { width: 90vw; } 
 .ccw2-video-list-head { width: 90vw; } 
 }     
 @media (max-width: 900px) {
 .mo_only { display: block!important } 
 .ccw2-main-desc .mo_only { display: none !important; } 
 .pc_only { display: none!important}
.ccw2-main section.ccw2-main-hero { padding-bottom: 60px; } 
.ccw2-main-desc h2 { font-size: 12px; } 
 .ccw2-card-face { box-shadow: none; } 
 .ccw2-main section { padding: 32px 0px; } 
 .ccw2-card-section { padding-top: 30px !important; } 
 .ccw2-main-hero .hero-inner { max-width: 640px; } 
 .ccw2-main-lockup .ccw2-kv-front { flex-wrap: nowrap; gap: 12px; justify-content: center; } 
 .ccw2-main-lockup .ccw2-kv-lockup-01 .ccw2-kv-lockup-img { width: 122px; height: auto; } 
 .ccw2-main-lockup .ccw-kv-lockup-icon img { width: 4px; height: auto; max-height: none; } 
 .ccw2-main-lockup .ccw2-kv-lockup-02 .ccw2-kv-lockup-img { width: 90px; height: auto; } 
 .header-ccw2 .nav-link { color: #333 !important; } 
 .header-ccw2 .nav-link.highlight-menu { color: #c11b17 !important; } 
 .ccw2-main-video { gap: 16px; padding-bottom: 0 !important; } 
 .ccw2-video-meta-wrap { position: static; padding: 0 4px 8px; gap: 12px; } 
 .ccw2-video-meta-bar { max-width: 100%; width: 94vw; padding: 0 4px; margin: 0 30px; } 
 .ccw2-video-headline { font-size: 18px; line-height: 1.35; } 
 .ccw2-video-player { padding-bottom: 40px; width: 100%; } 
 .ccw2-video-meta-wrap { position: static; padding: 16px 0 0; gap: 12px; } 
 .ccw2-video-meta-bar { padding: 0; } 
 .ccw2-video-rail { position: absolute; left: 0; right: 0; top: 57%; display: flex; align-items: center; gap: 12px; width: 88vw; } 
 .ccw2-video-progress { flex: 1; width: auto; max-width: none; padding: 0; } 
 .ccw2-progress-track { height: 5px; } 
 .ccw2-progress-handle { width: 18px; height: 18px; } 
 .ccw2-video-controls { width: auto; flex: 0 0 auto; gap: 8px; justify-content: flex-start; padding: 0; border-radius: 999px; } 
 .ccw2-video-controls > * { pointer-events: auto; } 
 .ccw2-play-toggle { width: 24px; height: 24px; background: rgba(255, 255, 255, 16%); } 
 .ccw2-play-toggle img { width: 8px !important; height: 16px !important; } 
 .ccw2-sound { display: flex; width: 24px; height: 24px; padding: 0; justify-content: center; align-items: center; } 
.ccw2-sound input[type="range"] { display: none; } 
 .ccw2-play-center { display: block; width: 24px; height: 24px; background: transparent; } 
 .ccw2-sound-toggle { width: 11px; height: 11px; } 
 .ccw2-sound-toggle { background: url("/resources/img/campaign/ccw2/speaker-on-icon.png") no-repeat center/11px 11px; } 
 .ccw2-sound-toggle.is-muted { background: url("/resources/img/campaign/ccw2/mute-icon.png") no-repeat center/11px 11px; } 

 .ccw2-video-card-meta .eyebrow { font-size: 12px; } 
 .ccw2-video-card-meta .title { font-size: 16px; } 
 .ccw2-video-card-thumb { flex-shrink: 0; } 
 .ccw2-video-card-meta { min-width: 0; gap: 4px; } 
 .ccw2-video-card:last-child { border-bottom: 0; } 
 .ccw2-thumb-caption { font-size: 12px; color: #686868; margin-top: 2px; } 
 .ccw2-card-headline { font-size: 32px; margin-bottom: 30px; } 
 .ccw2-card-grid { flex-direction: column; align-items: center; gap: 18px; min-height: auto; } 
 .ccw2-card-item { width: clamp(220px, 80vw, 320px); height: clamp(380px, 120vw, 520px); transform: none !important; } 
 .ccw2-card-item.is-open { width: clamp(240px, 84vw, 340px); height: clamp(420px, 130vw, 560px); } 
 .ccw2-card-item.week-1,
 .ccw2-card-item.week-2,
 .ccw2-card-item.week-3,
 .ccw2-card-item.week-4,
 .ccw2-card-item.week-5,
 .ccw2-card-item.week-6 { order: initial; } 
 .ccw2-card-cta { margin-top: 20px; } 
 .ccw2-card-cta .cta-text { font-size: 20px; margin: 0 0 14px; } 
 /* 모바일 슬라이더 */
 .ccw2-card-section { overflow: hidden; } 
 .ccw2-card-face.is-back .ccw2-card-sound { right: 0; top: 10px; } 
 .ccw2-card-face.is-back .ccw2-card-sound button.is-muted { background: url("/resources/img/campaign/ccw2/mute-icon.png") no-repeat center/24px 20px; } 
 .ccw2-card-face.is-back .ccw2-card-sound button { background: url("/resources/img/campaign/ccw2/speaker-on-icon.png") no-repeat center/19px 20px; } 
 .ccw2-card-grid { display: none; } 
 .ccw2-card-dots { display: none; } 
.ccw2-card-slider-wrap { display: block; width: 100%; } 
.ccw2-card-slider-track { display: flex; align-items: center; gap: 25px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; min-height: 410px; } 
.ccw2-card-slider-track::-webkit-scrollbar { display: none; } 
.ccw2-card-slide { flex: 0 0 0; scroll-snap-align: center; display: flex; justify-content: center; } 
.ccw2-card-slide.ccw2-card-spacer { flex: 0 0 50vw; scroll-snap-align: start; pointer-events: none; } 
.ccw2-card-slide .ccw2-card-item { height: auto; aspect-ratio: 9 / 16; max-width: 210px; } 
.ccw2-card-coming .ccw2-card-week-tag { font-size: 12px; } 
.ccw2-card-slide .ccw2-card-inner,
.ccw2-card-slide .ccw2-card-face { height: 100%; } 
.ccw2-card-dots-mobile { display: flex; justify-content: center; gap: 8px; margin: 30px 0; } 
.ccw2-card-dots-mobile .ccw2-card-dot { width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,.35); border: 0; padding: 0; } 
.ccw2-card-dots-mobile .ccw2-card-dot.is-active { width: 14px; background: #fff; } 
 .ccw2-card-front-meta .eyebrow { font-size: .65rem; } 
 .ccw2-card-front-meta .desc { font-size: .65rem; } 
 .ccw2-card-front-meta .desc span { font-size: .8rem; } 
 .ccw2-card-front-meta .desc-flip { font-size: .8rem; } 
 .ccw2-cotents-back { max-width: 72px; } 
.ccw2-cotents-back a { font-size: 14px; } 
.ccw2-card-front-meta.is-disable { position: absolute; bottom: 0; left: 0; display: flex; color: #fff; font-family: "Artois", sans-serif; line-height: 1; text-align: center; flex-direction: column; justify-content: center; width: 100%; height: 100%; } 
.ccw2-card-front-meta.is-disable .desc { font-size: 28px; font-family: 'ArtoisIsabella-Serif',sans-serif; } 
.ccw2-spot-event-tit { font-size: 36px; margin-bottom: 20px; } 
.ccw2-spot-event-sub-tit { font-size: 18px; } 
.ccw2-spot-event-desc { margin-bottom: 30px; font-size: 16px; } 
 .ccw2-card-slide:first-child { padding-left: 35vw; } 
 .ccw2-card-slide:last-child { padding-right: 35vw; } 
 }
@media (max-width: 768px) {
 .ccw2-card-slide:first-child { padding-left: 35vw; } 
 .ccw2-card-slide:last-child { padding-right: 35vw; } 
 .mo-on { display: block; } 
 .ccw2-panel { min-height: 100vh; } 
 .ccw2-kv-front { gap: 20px; flex-direction: row; } 
 .ccw2-kv-lockup { display: flex; } 
 .ccw2.is-started .ccw2-kv-lockup-01 { transform: translateY(-90px); } 
 .ccw2.is-started .ccw2-kv-lockup-02 { transform: translateY(225px); } 
 .ccw2-volume--desktop { display: none; } 
 .ccw2-volume--mobile { display: inline-flex; right: 12px; left: auto; bottom: 12px; top: auto; transform: none; flex-direction: column; align-items: center; gap: 8px; } 
 .ccw2-volume--mobile .ccw2-volume-label { font-size: .7vw; letter-spacing: 0.14em; } 
 .ccw2-volume--mobile input[type="range"] { width: 4px; height: 110px; margin: 0; writing-mode: vertical-lr; direction: rtl; } 
 .ccw2-contents { padding-top: 64px; } 
 .ccw2-video-eyebrow { font-size: 12px; } 
 .ccw2-contents-header-tit h1 { font-size: 32px; } 
 .ccw2-contents-header-desc { max-width: 325px; margin-bottom: 30px; } 
 .ccw2-contents-header-desc p { font-size: 18px; } 
 .ccw2-contents-social a { width: 288px; font-size: 18px; padding: 10px 18px; } 
 .ccw2-contents-social a img { width: 18px; } 
 .ccw2-contents-imgs { flex-direction: column; gap: 12px; align-items: center; } 
 .ccw2-contents-imgs-group { flex-direction: column; } 
 .ccw2-contents-imgs img { width: 325px; border-radius: 10px; } 
 .ccw2-kv-lockup-img { width: 220px; } 
 .ccw2-kv-front-scoll-down { bottom: 15%; } 
 .ccw2-contents-header-tit { margin-bottom: 24px; } 
 .ccw2-contents-header { margin-bottom: 40px; } 
 .ccw2-contents-img { width: 325px; height: auto; } 
 .ccw2-contents-img-bg { width: 325px; height: auto; } 
 .ccw2-contents-img-tit h2 { font-size: 24px; font-family: 'Cafe24Danjunghae', sans-serif; } 
 .ccw2-contents-img-tit.ccit-01 { top:99px; right: 15px; } 
 .ccw2-contents-img-tit.ccit-02 { top: 132px; right: 45px; } 
 .ccw2-contents-img-tit.ccit-03 { top: 29px; right: 80px; text-align: center; } 
 .ccw2-main-desc .mo_only { display: block !important; } 
 .ccw2-spot-event-tit { font-size: 24px; } 
 .ccw2-spot-event-sub-tit { font-size: 16px; } 
 .ccw2-spot-event-desc { font-size: 13px; } 
 .ccw2-spot-event-badge { font-size: 16px; width: 70px; } 
 .ccw2-spot-event-btn { width: 208px; height: 50px; padding: 12px 0; font-size: 18px; } 
 .ccw2-card-cta .cta-btn { width: 208px; height: 50px; padding: 12px 0; font-size: 18px; } 
}
@media (max-width: 640px) {
 .ccw2-card-grid { gap: 12px; } 
 .ccw2-card-item { width: 180px; height: 320px; } 
 .ccw2-card-item.is-open { width: 210px; height: 372px; } 
 .ccw2-video-card-meta .eyebrow .mo_only { display: block!important } 
 .ccw2-video-card-meta .title .mo_only { display: block!important } 

 .ccw2-main section { padding-left: 0px; padding-right: 0px; } 
 .ccw2-video-card { grid-template-columns: 70px 1fr; } 
 .ccw2-card-slide:first-child { padding-left: 23vw; } 
 .ccw2-card-slide:last-child { padding-right: 23vw; } 
 }
/* Card slider (desktop) */
.ccw2-card-controls { display: none; } 
.ccw2-card-dots { display: none; } 

@media (min-width: 901px) {
 .ccw2-card-grid { display: none; } 
 .ccw2-card-slider-wrap { display: block; position: relative; } 
  .ccw2-card-slider-track { display: flex; align-items: center; gap: 24px; overflow: hidden; scroll-behavior: smooth; padding: 0 45px; min-height: 550px; }
 .ccw2-card-slide { flex: 0 0 auto; display: flex; justify-content: center; scroll-snap-align: center; } 
 .ccw2-card-slide .ccw2-card-item,
 .ccw2-card-slide .ccw2-card-item.is-open { width: 281px; height: 499px; transform: none !important; } 
 .ccw2-card-controls { display: flex; align-items: center; justify-content: center; gap: 30px; margin: 24px 0 0; } 
 .ccw2-card-dots { display: flex; justify-content: center; gap: 8px; margin: 0; } 
 .ccw2-card-dots .ccw2-card-dot { width: 8px; height: 8px; border-radius: 999px; background: rgba(255,255,255,.35); border: 0; padding: 0; } 
 .ccw2-card-dots .ccw2-card-dot.is-active { width: 14px; background: #fff; } 
 .ccw2-card-dots-mobile { display: none; } 
 .ccw2-card-arrow { width: 48px; height: 48px; background: url("/resources/img/index/stl-main-left.svg") no-repeat center/100%; border: 0; border-radius: 50%; cursor: pointer; pointer-events: auto; } 
 .ccw2-card-arrow--next { background-image: url("/resources/img/index/stl-main-right.svg"); } 
 }
/* Page-specific scroll state */
body.ccw2-scroll-active .header { background: #fff !important; } 
body.ccw2-scroll-active .nav-link { color: #333 !important; } 
body.ccw2-scroll-active .nav-link:hover { color: #c11b17 !important; } 
body.ccw2-scroll-active .highlight-menu { color: #c11b17 !important; } 
.header.header-scrolled .nav-link:not(.highlight-menu) { color: #333 !important; } 
.header.header-scrolled .nav-link:not(.highlight-menu):hover { color: #c11b17 !important; } 
@media (min-width: 1921px) {
  .ccw2-card-slider-track {justify-content: center;}
}
/* ========== Campaign Detail: final event ========== */
@keyframes finaleFadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* KV 로드 애니메이션 (페이지 진입 시) */
.finale-kv-text .finale-kv-logo { opacity: 0; animation: finaleFadeInUp 1s 0.3s ease forwards; }
.finale-kv-text h1 { opacity: 0; animation: finaleFadeInUp 1s 0.5s ease forwards; }
.finale-kv-text h2 { opacity: 0; animation: finaleFadeInUp 1s 0.7s ease forwards; }
.finale-kv-text p { opacity: 0; animation: finaleFadeInUp 1s 0.9s ease forwards; }

/* 스크롤 트리거 애니메이션 */
.finale-fade-in { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease, transform 0.8s ease; }
.finale-fade-in.is-visible { opacity: 1; transform: translateY(0); }

/* 딜레이 유틸리티 */
.finale-fade-in.delay-1 { transition-delay: 0.15s; }
.finale-fade-in.delay-2 { transition-delay: 0.3s; }
.finale-fade-in.delay-3 { transition-delay: 0.45s; }

/* Main Container
   ======================================== */
.finale-event-main { background-color: #F7F0E6; }

/* Section 1: Key Visual
   ======================================== */
.finale-kv { position: relative; width: 100%; height: 840px; overflow: hidden; }
.finale-kv-inner { position: relative; width: 100%; height: 100%; }
.finale-kv-inner::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%); pointer-events: none; z-index: 1; }
.finale-kv-img { width: 100%; height: 100%; object-fit: cover; }
.finale-kv-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: space-between; width: 1400px; max-width: 90%; z-index: 2; }
.finale-kv-text { width: 100%; color: #fff; text-align: center; }
.finale-kv-logo { width: 265px; height: auto; display: block; margin: 0 auto 6px; }
.finale-kv-text h1 { font-family: "Cafe24Danjunghae", sans-serif; font-size: 54px; font-weight: 400; line-height: 1.1; }
.finale-kv-text h2 { font-size: 42px; font-weight: 700; line-height: 1.3; margin-top: 28px; }
.finale-kv-text p { font-size: 18px; font-weight: 400; line-height: 1.4; margin-top: 28px; }
.finale-kv-text p br.mob { display: none; }
.finale-kv-video { position: relative; width: 640px; flex-shrink: 0; }
.finale-kv-video video { width: 100%; height: auto; display: block; border-radius: 15px; }
.finale-kv-fullscreen { position: absolute; right: 12px; bottom: 12px; width: 32px; height: 32px; background: rgba(0, 0, 0, 0.5) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>') center/20px no-repeat; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.2s; }
.finale-kv-fullscreen:hover { background-color: rgba(0, 0, 0, 0.7); }
.finale-kv-sound { position: absolute; right: 52px; bottom: 12px; width: 32px; height: 32px; background: rgba(0, 0, 0, 0.5) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>') center/20px no-repeat; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.2s; }
.finale-kv-sound:hover { background-color: rgba(0, 0, 0, 0.7); }
.finale-kv-sound.is-muted { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/></svg>'); }

/* Tablet: 768px ~ 1400px */
@media (max-width: 1400px) and (min-width: 769px) {
  .finale-kv { height: auto; min-height: 700px; }
  .finale-kv-inner { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
  .finale-kv-img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
  .finale-kv-content { position: relative; flex-direction: column; gap: 40px; width: 90%; padding: 60px 0; }
  .finale-kv-text { width: 100%; max-width: 720px; }
  .finale-kv-text h1 { font-size: 48px; }
  .finale-kv-text h2 { font-size: 36px; margin-top: 24px; }
  .finale-kv-text p { font-size: 17px; margin-top: 24px; }
  .finale-kv-video { width: 100%; max-width: 500px; }
}

@media (max-width: 768px) {
  .finale-event-main { padding-top: var(--header-offset, 60px); }
  .finale-kv { height: 652px; }
  .finale-kv-content { flex-direction: column; gap: 33px; width: 90%; }
  .finale-kv-logo { width: 136px; }
  .finale-kv-text { width: 100%; }
  .finale-kv-text h1 { font-size: 35px; font-weight: 400; line-height: 1.2; }
  .finale-kv-text h2 { font-size: 24px; line-height: 1.4; margin-top: 20px; }
  .finale-kv-text p { font-size: 16px; margin-top: 12px; }
  .finale-kv-text p br.mob { display: inline; }
  .finale-kv-video { width: 100%; max-width: 327px; }
}

/* Section 2: Events Slider
   ======================================== */
.finale-events { padding: 120px 0; }
.finale-events-inner { width: 1200px; max-width: 90%; margin: 0 auto; overflow: visible; }
.finale-events-text { text-align: center; }
.finale-events-text:last-child { margin-bottom: 0; }
.finale-events-text h2 { font-size: clamp(24px, 3.5vw, 42px); font-weight: 700; line-height: 1.3; color: #222; margin-bottom: 30px; }
.finale-events-text p { font-size: 18px; font-weight: 400; line-height: 1.5; color: #444; }
.finale-events-text p + p { margin-top: 16px; }
.finale-events-text br.mob { display: none; }
.finale-events-text br.pc { display: inline; }
.finale-swiper-wrap { position: relative; margin: 60px 0; }
.finale-events-swiper { overflow: hidden; }
.finale-events-swiper .swiper-slide img { width: 100%; height: auto; display: block; border-radius: 4px; }
.finale-swiper-wrap .swiper-button-prev,
.finale-swiper-wrap .swiper-button-next { position: absolute; top: 50%; width: 60px; height: 60px; margin-top: -30px; cursor: pointer; z-index: 10; }
.finale-swiper-wrap .swiper-button-prev::after,
.finale-swiper-wrap .swiper-button-next::after { display: none; }
.finale-swiper-wrap .swiper-button-prev { background: url('/resources/img/campaign/finale-event/left-btn.png') center/contain no-repeat; left: -32px; }
.finale-swiper-wrap .swiper-button-next { background: url('/resources/img/campaign/finale-event/right-btn.png') center/contain no-repeat; right: -32px; }
.finale-events-swiper .swiper-pagination { display: none; position: static; margin-top: 20px; }
.finale-events-swiper .swiper-pagination-bullet { width: 10px; height: 10px; background: #fff; opacity: 1; margin: 0 4px; }
.finale-events-swiper .swiper-pagination-bullet-active { width: 20px; background: #D50032; border-radius: 5px; }

@media (max-width: 768px) {
  .finale-events { padding: 60px 0; }
  .finale-events-text h2 { font-size: 24px; line-height: 1.3; letter-spacing: -0.04em; margin-bottom: 14px; }
  .finale-events-text p { font-size: 16px; line-height: 1.4; letter-spacing: -0.02em; }
  .finale-events-text br.mob { display: inline; }
  .finale-events-text br.pc { display: none; }
  .finale-swiper-wrap { margin: 30px 0; }
  .finale-events-swiper .swiper-pagination { margin-top: 30px; }

  .finale-swiper-wrap .swiper-button-prev,
  .finale-swiper-wrap .swiper-button-next { display: none; }

  .finale-events-swiper .swiper-pagination { display: block; }
  .finale-events-inner { max-width: 100%; padding: 0 24px; }
  .finale-swiper-wrap { margin-left: -24px; margin-right: -24px; padding-left: 24px; }
  .finale-events-swiper { overflow: hidden; }
}

/* Section 3: Menu
   ======================================== */
.finale-menu { padding-top: 120px; background-color: #FFFAF2; }
.finale-menu-inner { width: 1200px; max-width: 90%; margin: 0 auto; text-align: center; }
.finale-menu-title { font-size: 42px; font-weight: 700; line-height: 1.3; color: #222; }
.finale-menu-title .text-red { color: #D50032; }
.finale-menu-title br.mob { display: none; }
.finale-chef-title { width: 370px; margin: 60px auto 0; }
.finale-chef-title .chef-line { display: block; width: 100%; }
.finale-chef-title .chef-line.mob { display: none; }
.finale-chef-title .chef-text { padding: 9px 0 8px; }
.finale-chef-title .chef-name { font-family: "Cafe24Danjunghae", sans-serif; font-size: 42px; font-weight: 400; line-height: 1; color: #D50032; }
.finale-chef-title .chef-sub { font-family: "ArtoisIsabella-Serif", serif; font-size: 48px; font-weight: 400; line-height: 1.3; color: #D50032; }
.finale-menu-list { width: 100vw; margin-left: calc(-50vw + 50%); }
.finale-menu-item { width: 100%; height: clamp(300px, 35vw, 500px); position: sticky; background-color: #FFFAF2; }
.finale-menu-item:nth-child(1) { top: clamp(110px, calc(9.6vw - 24.5px), 160px); z-index: 1; }
.finale-menu-item:nth-child(2) { top: clamp(140px, calc(11.5vw - 21.5px), 200px); z-index: 2; background-color: #F7F0E6; }
.finale-menu-item:nth-child(3) { top: clamp(170px, calc(13.5vw - 18.5px), 240px); z-index: 3; background: linear-gradient(rgba(163, 150, 101, 0.08), rgba(163, 150, 101, 0.08)), #F7F0E6; }
.finale-menu-item:nth-child(4) { top: clamp(200px, calc(15.4vw - 15.5px), 280px); z-index: 4; background: linear-gradient(rgba(163, 150, 101, 0.2), rgba(163, 150, 101, 0.2)), #F7F0E6; }
.finale-menu-item:nth-child(5) { top: clamp(230px, calc(17.3vw - 12.5px), 320px); z-index: 5; background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), #DE0C3D; }
.finale-menu-item:nth-child(6) { top: clamp(260px, calc(19.2vw - 9px), 360px); z-index: 6; background-color: #FFFAF2; }
.finale-menu-item:nth-child(5) .menu-content { width: 100%; max-width: 100%; }
.finale-menu-item:nth-child(5) .menu-title,
.finale-menu-item:nth-child(5) .menu-sub { color: #fff; }
.finale-menu-item:nth-child(6) .menu-text.align-left { width: 460px; text-align: center; }
.finale-menu-item .menu-content { position: relative; width: 1200px; max-width: 90%; height: 100%; margin: 0 auto; }
.finale-menu-item .menu-bg { width: 100%; height: 100%; object-fit: contain; }
.finale-menu-item .menu-bg.mob { display: none; }
.finale-menu-item .menu-text { position: absolute; top: 50%; transform: translateY(-50%); }
.finale-menu-item .menu-text.align-left { left: 0; text-align: left; }
.finale-menu-item .menu-text.align-right { right: 0; text-align: right; }
.finale-menu-item .menu-text.align-center { left: 50%; transform: translate(-50%, -50%); text-align: center; }
.finale-menu-item .menu-title { font-family: "ArtoisIsabella-Serif", serif; font-size: clamp(40px, 5.5vw, 80px); font-weight: 400; line-height: 1; color: #D50032; }
.finale-menu-item .menu-title sup { font-size: clamp(30px, 4vw, 60px); letter-spacing: -0.02em; vertical-align: top; }
.finale-menu-item .menu-sub { font-size: clamp(14px, 1.4vw, 20px); font-weight: 700; color: #444; margin-top: clamp(12px, 1.7vw, 24px); text-align: center; }
.finale-menu-item .menu-sub .menu-divider { height: 14px; margin: 0 12px; vertical-align: middle; }

@media (max-width: 768px) {
  .finale-menu { padding-top: 60px; background-color: #FFFAF2; }
  .finale-menu-title { font-size: 24px; line-height: 1.3; letter-spacing: -0.04em; }
  .finale-menu-title br.mob { display: inline; }
  .finale-chef-title { width: 160px; margin-top: 30px; }
  .finale-chef-title .chef-name { font-size: 18.38px; }
  .finale-chef-title .chef-sub { font-size: 21px; }
  .finale-chef-title .chef-line.pc { display: none; }
  .finale-chef-title .chef-line.mob { display: block; }
  .finale-menu-item { height: auto; }
  .finale-menu-item:nth-child(1) { top: 75px; }
  .finale-menu-item:nth-child(2) { top: 90px; }
  .finale-menu-item:nth-child(3) { top: 105px; }
  .finale-menu-item:nth-child(4) { top: 120px; }
  .finale-menu-item:nth-child(5) { top: 135px; }
  .finale-menu-item:nth-child(6) { top: 150px; }
  .finale-menu-item .menu-content { max-width: 100%; }
  .finale-menu-item .menu-title { font-size: clamp(22px, 6vw, 32px); letter-spacing: -0.02em; }
  .finale-menu-item .menu-title sup { font-size: clamp(16px, 4.5vw, 22px); }
  .finale-menu-item .menu-sub { font-size: clamp(10px, 2.8vw, 14px); margin-top: clamp(6px, 2vw, 12px); }
  .finale-menu-item .menu-sub .menu-divider { margin: 0 clamp(4px, 1.2vw, 8px); }
  .finale-menu-item:nth-child(1) .menu-text { padding-left: clamp(24px, calc(25.7vw - 72px), 125px); }
  .finale-menu-item:nth-child(2) .menu-text { padding-right: clamp(24px, calc(25.7vw - 72px), 125px); }
  .finale-menu-item:nth-child(6) .menu-text.align-left { width: auto; padding-left: clamp(40.5px, calc(43.1vw - 121px), 210px); }
  .finale-menu-item .menu-bg.pc { display: none; }
  .finale-menu-item .menu-bg.mob { display: block; }
}

/* Section 4: Vertical Video
   ======================================== */
.finale-vertical-video { padding: 120px 0; background-color: #F7F0E6; }
.finale-vertical-inner { width: 1200px; max-width: 90%; margin: 0 auto; text-align: center; }
.finale-vertical-title { color: #222; }
.finale-vertical-title .vertical-title-main { font-family: "Cafe24Danjunghae", sans-serif; font-size: 42px; font-weight: 400; line-height: 1.3; }
.finale-vertical-title .vertical-title-main .text-artois { font-family: "ArtoisIsabella-Serif", serif; }
.finale-vertical-title .vertical-title-sub { font-size: 34px; font-weight: 700; line-height: 1.3; margin-top: 0; }
.finale-vertical-player { position: relative; display: inline-block; margin-top: 60px; }
.finale-vertical-player video { width: 360px; height: auto; display: block; border-radius: 8px; }
.finale-vertical-sound { position: absolute; right: 52px; bottom: 12px; width: 32px; height: 32px; background: rgba(0, 0, 0, 0.5) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/></svg>') center/20px no-repeat; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.2s; }
.finale-vertical-sound:hover { background-color: rgba(0, 0, 0, 0.7); }
.finale-vertical-sound.is-muted { background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/></svg>'); }
.finale-vertical-fullscreen { position: absolute; right: 12px; bottom: 12px; width: 32px; height: 32px; background: rgba(0, 0, 0, 0.5) url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/></svg>') center/20px no-repeat; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.2s; }
.finale-vertical-fullscreen:hover { background-color: rgba(0, 0, 0, 0.7); }

@media (max-width: 768px) {
  .finale-vertical-video { padding: 60px 0; }
  .finale-vertical-title .vertical-title-main { font-size: 24px; }
  .finale-vertical-title .vertical-title-sub { font-size: 19px; margin-top: 0; }
  .finale-vertical-player video { width: 327px; }
}

/* Back to List
   ======================================== */
.finale-back-to-list { position: absolute; top: 24px; left: calc(50% - 676px); display: inline-flex; align-items: center; gap: 8px; color: #fff; font-size: 20px; font-family: "Artois", sans-serif; z-index: 10; transition: opacity 0.2s; }
.ccw2-main-video .finale-back-to-list { top: 18%; }

@media (max-width: 1400px) {
  .finale-back-to-list { left: 5%; }
}

.finale-back-to-list:hover { opacity: 0.7; }
.finale-back-to-list img { width: 20px; height: auto; }
.finale-back-to-list span { border-bottom: 1px solid #fff; padding-bottom: 2px; }

@media (max-width: 1024px) {
  .ccw2-main-video .finale-back-to-list { top: 11%; }
}
@media (max-width: 900px) {
  .ccw2-main-video .finale-back-to-list { position: relative;}
}
@media (max-width: 768px) {
  .finale-back-to-list { top: 16px; left: 16px; font-size: 14px; }
  .finale-back-to-list img { width: 14px; }
}

/* ========== Campaign New 260225 ========== */
/* 공통 */
:root {
  --color-primary: #D50032;
  --top-btn-offset: 4%;
  --top-btn-offset-mobile: var(--top-btn-offset);
  --top-btn-z-index: 30;
}
.db_mo {display: none;}

.campaign-index { background-color: #F7F0E6;}
.campaign-ended { background-color: #F7F0E6; padding-bottom: 5rem;}
.campaign-ended .campaign-intro {position: relative; padding-bottom: 120px;}
.campaign-intro {margin: 5rem auto 0;}
.campaign-intro__heading {text-align: center; margin-bottom: 4vh; display: flex; flex-direction: column; align-items: center; gap: 24px;}
.campaign-intro__title {font-size:58px; font-weight: 400; text-align: center;line-height: 120%;}
.campaign-intro__subtitle {font-size: 18px; font-weight: 400; text-align: center; line-height: 140%; letter-spacing: -0.36px;}

.campaign-intro__banner { position: relative; overflow: hidden; color: #fff; background-color: #000;}
.campaign-intro__banner .banner__image { display: block; width: 100%; overflow: hidden; }
.campaign-intro__banner .banner__image img { width: 100%; object-fit: cover; object-position: top;}
.campaign-intro__banner .banner__text { position: absolute; left: 50%; top: 50%; width: 100%; min-width: 1000px; max-width: 1735px; height: 345px; display: flex; align-items: flex-start; justify-content: flex-end; flex-direction: column; gap: 20px; margin: 0 auto; transform: translate(-50%, -50%); z-index: 10; }
.campaign-intro__banner .banner__title {color: #fff; font-size: 80px; font-weight: 400; line-height: 100%; letter-spacing: -1.6px; word-break: keep-all; margin-bottom: 20px;}
.campaign-intro__banner .banner__title:lang(en) {font-family: "ArtoisIsabella-Serif", sans-serif;}
.campaign-intro__banner .banner__title:lang(ko) {font-family: 'Cafe24Danjunghae';}
.campaign-intro__banner .banner__desc { color: #fff; font-size: 28px; font-weight: 700; line-height: 130%; letter-spacing: -0.56px; word-break: keep-all;}
.campaign-intro__banner .banner__desc2 { color: #fff; font-size: 18px; font-weight: 400; line-height: 140%; letter-spacing: -0.36px; word-break: keep-all; min-height: 75px;}
.campaign-intro__banner .banner__button { display: inline-flex; align-items: center; justify-content: center; width: 194px; height: 50px; border: 1px solid #fff; border-radius: 4px; color: #fff; font-size: 18px; font-weight: 500; line-height: 100%; cursor: pointer; transition: transform 0.45s ease, opacity 0.38s ease, background 0.3s ease, color 0.3s ease;}
.campaign-intro__banner .banner__button:hover,
.campaign-intro__banner .banner__button:focus-visible {transform: scale(1.08); background: #fff; color: #000;}

.campaign-more {padding: 120px 0;}
.campaign-more__inner-a {width: 1400px; margin: 0 auto;}
.campaign-more__title {font-size:58px; color:var(--color-primary); font-weight: 400; text-align: center; line-height: 120%; font-family: "Artois", sans-serif; margin-bottom: 40px;}
.campaign-more__list.list_sta {display: grid; grid-template-columns: repeat(auto-fit, minmax(32%, 1fr)); gap: 24px 22px;}
.campaign-more__list li {border-radius: 4px; box-sizing: border-box; aspect-ratio: 452 / 540; overflow: hidden;}
.campaign-more__list li a {position: relative; display: block; width: 100%; height: 100%;}
.campaign-more__list li a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0.20) 100%), linear-gradient(180deg, rgba(0, 0, 0, 0.00) 60.48%, rgba(0, 0, 0, 0.80) 100%); pointer-events: none; z-index: 2;}
.campaign-more__list li a img {width: 100%; height: 100%; object-fit: cover; z-index: 1; transform: scale(1); transition: transform 1s ease;}
.campaign-more__list li:hover a img {transform: scale(1.2); transition: transform 1s ease;}
.campaign-more__list .more-list__title {position: absolute; left: 28px; bottom: 28px; width: 85%; color: #ffffff; display: flex; align-items: flex-end; box-sizing: border-box; z-index: 3;}
.campaign-more__list .more-list__title:lang(ko) {font-family: "Cafe24Danjunghae";font-size: 30px;font-weight: 400;line-height: 110%;word-break: keep-all;}
.campaign-more__list .more-list__title:lang(en) {font-family: "ArtoisIsabella-Serif", sans-serif;font-size: 36px; font-weight: 400; line-height: 110%; height: 80px;}
.campaign-btnbox {margin-top: 40px;display: flex;justify-content: center;align-items: center;gap: 4px;}
.campaign-btnbox .btn {height: 50px; line-height: 50px; width: 200px; min-width: 150px;border-radius: 4px;border: 1px solid var(--color-primary); font-size: 18px; display: block; text-align: center; color: var(--color-primary); font-weight: 700;letter-spacing: -0.36px; transition: transform 0.45s ease, opacity 0.38s ease, background 0.3s ease, color 0.3s ease;}
.campaign-btnbox .btn:hover,
.campaign-btnbox .btn:focus-visible {transform: scale(1.08); background: var(--color-primary); color: #fff;}
.campaign-ended .campaign-intro .campaign-btnbox {position: fixed; left: 0; bottom: 3%; width: 100%; text-align: center; z-index: 20;}
.campaign-ended .campaign-intro .campaign-btnbox.is-stopped {position: absolute; left: 0; bottom: 24px;}
.campaign-btnbox .btn-ended {height: 50px; line-height: 50px; width: 1200px; min-width: 150px;border-radius: 4px;border: 1px solid var(--color-primary); background: var(--color-primary); color: #fff; font-size: 18px; display: block; text-align: center; font-weight: 700;letter-spacing: -0.36px; transition: transform 0.45s ease, opacity 0.38s ease, background 0.3s ease, color 0.3s ease;}
.campaign-btnbox .btn-ended:hover,
.campaign-btnbox .btn-ended:focus-visible {background: #fff; color: var(--color-primary);}

/* ==================================================
   RESPONSIVE (Media Queries)
   ================================================== */

/* --- (prefers-reduced-motion: reduce) --- */
@media (prefers-reduced-motion: reduce) {
  /* Product Page */
  .product-panel,
  .product-panel__body,
  .product-panel__figure,
  .product-panel__image,
  .product-panel__cta,
  .product-gallery__card img,
  .product-gallery__cta,
  .product-offer-card,
  .product-offer-card__image,
  .product-offer-card__thumb { transition: none !important; transform: none !important; }
}

/* --- (hover: hover) and (pointer: fine) and (min-width: 1025px) --- */
@media (hover: hover) and (pointer: fine) and (min-width: 1025px) {
  /* Product Page */
  .product-intro__panels:hover .product-panel,
  .product-intro__panels:focus-within .product-panel { flex-grow: 1; }
  .product-intro__panels .product-panel.is-active { flex-grow: 9; opacity: 1; }
  .product-intro__panels:hover .product-panel:not(.is-active),
  .product-intro__panels:focus-within .product-panel:not(.is-active) { opacity: 0.58; }
  .product-intro__panels .product-panel.is-active .product-panel__cta { transform: scale(1.02); opacity: 0; }

  /* Product Page */
  .product-intro__panels.has-active .product-panel .product-panel__figure,
  .product-intro__panels:hover .product-panel .product-panel__figure,
  .product-intro__panels:focus-within .product-panel .product-panel__figure { opacity: 0; transform: translateY(18px); pointer-events: none; }
  .product-intro__panels .product-panel.is-active .product-panel__figure { opacity: 1; transform: translateY(-8px); pointer-events: auto; }
  .product-panel.is-replaced .product-panel__figure { opacity: 0 !important; transform: translateY(18px) !important; pointer-events: none !important; }
}

/* --- (min-width: 1025px) --- */
@media (min-width: 1025px) {
  /* Product Page */
  .product-panel { min-height: 740px; padding: 80px 90px; }
  .product-panel__cta { display: none; }
  .product-panel__figure {right: 90px;}
  .product-panel__figure--home {left: 90px;}
}

/* --- (min-width: 1920px) --- */
@media (min-width: 1920px) {
  /* Index Main Slider */
  .stm__text, .stm__controls { width: 100%; min-width: 0; max-width: 1735px; margin: 0 auto; }
}

/* --- (min-width: 2000px) --- */
@media (min-width: 2000px) {
  /* Product Page: Home panel hover 시 갤러리/텍스트 좌측 고정 */
  .product-gallery { justify-content: flex-start; }
  .product-gallery__container { max-width: none; }
  .product-gallery__cta-stack { width: auto; min-width: 0; }
}

/* --- (max-width: 960px) and (min-width: 768px) --- */
@media (max-width: 960px) and (min-width: 768px) {
  /* Campaign Detail: Holiday with Stella Artois */
  .tab-content ul.tab-menu li { font-size: 1.95vw; }
}

/* --- (max-width: 1800px) --- */
@media (max-width: 1800px) {
  /* Product Page */
  .product-panel__eyebrow {font-size: 64px;}
  .product-panel__title { font-size: 130px; }
  .product-panel__image {max-width: 170px;}
  .product-panel__image--home {max-width: 185px;}
}

/* --- (max-width: 1700px) --- */
@media (max-width: 1700px) {
  /* Product Page */
  .product-panel__title { font-size: 130px; }
  .mo_only { display: block; }

  /* Product Sections */
  .product-gallery__title {font-size: 100px;}
}
/* --- (max-width: 1600px) --- */
@media (max-width: 1600px) {
  /* Product Page */
  .product-panel__title { font-size: 120px; }
}
/* --- (max-width: 1550px) --- */
@media (max-width: 1550px) {
  /* Index Main Slider */
  .stm { --stm-controls-top: calc(50% + 80px); }
  .stm__text, .stm__controls { width: min(92vw, 1260px); min-width: 0; max-width: 1260px; }
  .stm__text { justify-content: center; top: 50%; transform: translate(-50%, -58%); }
  .stm__title { font-size: 58px; }
  .stm__desc { font-size: 26px; }
  .stm__button { width: 208px; font-size: 22px; }

  /* Product Sections */
  .product-panel__title {font-size: 110px;}
  .product-panel__image {max-width: 160px;}
  .product-panel__image--home {max-width: 170px;}
  .product-perfect-serve__title {font-size: 80px;}
  .product-perfect-serve__accent {font-size: 100px;}
}
/* --- (max-width: 1550px) --- */
@media (max-width: 1550px) {
  /* Product Sections */
  .product-gallery__stage { width: 380px;}
  .product-gallery__title {font-size: 90px;}
}
/* --- (max-width: 1400px) --- */
@media (max-width: 1400px) {
  /* Product */
  .product-panel { padding: 60px 60px; }
  .product-panel__figure {right: 60px;}
  .product-panel__figure--home {left: 60px;}

  /* Michelin */
  .ht-desc { font-size: 1rem; }
  .ht-tit { font-size: 4rem; }
  .ritual-steps__grid { display: block; max-width: 100%; }
  .ritual-step,
  .mops__item { flex-direction: row; justify-content: space-between; align-items: center; max-width: 100%; padding: 20px; border-top: 1px solid #999; border-left: 0; }
  .ritual-step:last-child,
  .mops__item:last-child { border-right: 0; border-bottom: 1px solid #999; }
  .ritual-step__desc { height: auto; }
  .ritual-step__desc br { display: none; }
  .ritual-step__text { width: 68%; text-align: left; }
  .about-perfect-serve-page .bs-cart-img,
  .ritual-step__img { width: 24%; margin-top: 0; }
  .cv-list-left .cv-list p { width: 90%; }

  /* campaign new 260225 */
  .campaign-more__inner-a {width: 95%; margin: 0 auto;}
}

/* --- (max-width: 1366px) --- */
@media (max-width: 1366px) {
  /* Index Main Slider */
  .stm { --stm-controls-top: calc(49% + 80px); }
  .stm__text, .stm__controls { width: min(90vw, 1224px); min-width: 0; max-width: 1224px; }
  .stm__text { top: 49%; transform: translate(-50%, -55%); }
  .stm__title { font-size: 52px; line-height: 110%; }
  .stm__desc { font-size: 22px; }
  .stm__button { width: 188px; font-size: 20px; }
  .autoplay-progress { width: 280px; }

  /* campaign new 260225 */
  .campaign-intro__banner .banner__text {width: min(90vw, 1224px); min-width: 0; max-width: 1224px; top: 49%; transform: translate(-50%, -55%);}
  .campaign-intro__banner .banner__title {font-size: 65px;}
  .campaign-intro__banner .banner__desc {font-size: 24px;}
  .campaign-intro__banner .banner__desc2 {font-size: 16px;}

  .campaign-more__inner-a { width: min(90vw, 1224px); min-width: 0; max-width: 1224px; }

  /* Product Sections */
  .product-gallery {padding: 100px;}
  .product-gallery__stage { width: 300px;}
  .product-gallery__card {padding-right: unset;}
}
/* --- (max-width: 1250px) --- */
@media (max-width: 1250px) {
  .product-panel__eyebrow {font-size: 56px;}
  .product-panel__title { font-size: 100px; }
  .product-panel__figure {bottom: -97px;}
}
/* --- (max-width: 1200px) --- */
@media (max-width: 1200px) {
  /* Michelin */
  .chalice-visual-wrap { padding: 0 20px; }
  .cv-tit-box { font-size: 1.2rem; }
  .cv-list p { font-size: 1rem; }
  .cv-list-right { padding-left: 3rem; }
  .cv-list-right .cv-tit-box::before { left: -103px; }
  .cv-list-right .cv-list:nth-child(2) .cv-tit-box::before { left: -64px; }
  .cv-list-right .cv-list:last-child .cv-tit-box::before { left: -130px; width: 132%; }
  .cv-list-right .cv-list:first-child .cv-list-point { left: -8rem; }
  .hover-here { margin-top: 8vh; }
  .chalice-visual02 { margin: 6vh 0 8vh; }

  .michelin_slide_wrapper {width: 832px;}

  /* product */
  .product-gallery__title {font-size: 80px;}
}
/* --- (max-width: 1025px) --- */
@media (min-width: 1025px) {
  /* campaign new 260225 */
  .campaign-more--hidden-on-pc {display: none;}
}
/* --- (max-width: 1024px) --- */
@media (max-width: 1024px) {
  /* Header Responsive */
  .header__logo { width: 200px; }
  .header__menu-item a { font-size: 1.1rem; }
  .header__menu { gap: 1.5rem; }

  /* Header Responsive */
  .header { padding: 1.5vh 1rem; }
  .header__logo { width: 150px; }
  .header__sns { display: none; }
  .header__nav { display: none; }
  .header__menu-open { display: block; width: 30px; }
  .header__menu-open img { width: 100%; }
  .header__menu-close { display: none; position: fixed; top: 1.5vh; right: 1rem; z-index: 1001; width: 24px; }
  .header__menu-close img { width: 100%; }
  .header.menu-open .header__menu-open { display: none; }
  .header.menu-open .header__menu-close { display: block; }
  .header__mobile-menu-item--has-sub .header__mobile-submenu { display: none; }
  .header__mobile-menu-item--has-sub.is-open .header__mobile-submenu { display: flex; }
  /* 하이라이트 메뉴 (미슐랭, 다이닝클럽) 상단 여백 */
  .header__mobile-menu > li:nth-last-child(2) { margin-top: 5vh; }
  /* 다이닝클럽 아이콘 (모바일에서만 표시) */
  .header__menu-link--dining::before { display: inline-block; width: 42px; height: 22px; margin-right: 4px; }

  /* Index Main Slider */
  .stm__text { left: 50%; justify-content: flex-end; width: 90%; top: 65%; min-width: unset; max-width: none; }
  .stm__controls { height: 30px; left: 53%; width: 96%; min-width: unset; max-width: none; justify-content: space-between; }
  .autoplay-progress { top: 5px; }
  .stm__button { width: 208px; }

  /* Product Page */
  .product-offers__container { width: 100%; }
  .mo-br { display: block !important; }
  .product-sections {position: relative;}
  .product-sections > section { padding: 60px 6%; position: relative; height: 500px; justify-content: center; }
  .product-intro__heading { padding: 60px 0 24px; }
  .product-intro__title { font-size: 38px; font-weight: 400; line-height: 120%; margin-bottom: 0; }
  .product-intro__subtitle { font-size: 16px; font-weight: 400; line-height: 120%; letter-spacing: -0.32px; }
  .product-intro__question-label { font-size: 32px; line-height: unset; }
  .product-intro__question { font-size: 28px; margin: 24px 0 40px; }
  .product-perfect-serve__container { background: none; }
  .product-panel { pointer-events: none; width: 100%; min-height: 360px; padding: 60px; }
  .product-panel__eyebrow { font-size: 36px; }
  .product-panel__title { font-size: 68px; }
  .product-panel__figure,
  .product-panel__figure--home { position: absolute; display: flex; justify-content: flex-end; align-items: center; width: 100%; height: 100%; margin-top: 0; right: 60px; bottom: -3%; }
  .product-panel__figure--home { justify-content: flex-start; left: 40px; right: auto; }
  .product-panel__image { max-width: 84.317px; aspect-ratio: 84.32/220; }
  .product-panel__image--home { width: 100%; max-width: 93.32px; aspect-ratio: 93.32/220; }
  .product-panel__cta,
  .product-panel__cta--home { position: absolute; left: 60px; bottom: 60px; width: 40px; height: 40px; padding: 13px; align-self: flex-start; pointer-events: auto; }
  .product-panel--home .product-panel__cta { right: 40px !important; left: auto !important; }
  .product-panel__cta *,
  .product-panel__cta--home * { pointer-events: none; }
  .product-panel--draft .product-panel__cta svg,
  .product-panel--home .product-panel__cta svg { transform: rotate(45deg); }
  .product-perfect-serve { position: relative !important; overflow: hidden; display: flex !important; flex-direction: column-reverse; }
  .product-perfect-serve .bg-video { position: absolute; width: 100%; max-width: none; border-radius: 20px; left: 0; top: 0; }
  .product-perfect-serve__container { padding: 60px 12px 30px; height: auto; }
  .product-gallery { padding: 80px 6% !important; height: 508px; background: url(/resources/img/product/stella-artois-premium-sec02-bg.png) no-repeat right bottom/contain, linear-gradient(164deg, #ebe1d6 -4.22%, #e8d4be 43.86%, #ecd4b3 85.89%); }
  .product-perfect-serve__title,
  .product-gallery__title { font-size: 38px; }
  .product-perfect-serve__accent { font-size: 62px; }
  .product-perfect-serve__dec { display: none; font-size: 18px; letter-spacing: -0.36px; }
  .product-gallery .product-perfect-serve__dec { display: block !important; }
  .product-gallery__container { flex-direction: column-reverse; gap: 80px; }
  .product-perfect-serve__container .product-panel__figure { right: 0; bottom: 0; left: 43.5%; top: 40px; }
  .product-offers__title { font-size: 38px; }
  .product-offers { padding: 60px 0; }
  .product-offers__grid { gap: 16px; padding: 0 4%; }
  .product-offer-card { width: calc(50% - 8px); max-width: unset; }
  .product-offer-card__media { position: relative; width: 100%; height: auto; padding-top: 100%; }
  .product-offer-card__thumb,
  .product-offer-card__image { border-radius: 18px; }
  .product-offer-card__thumb { transform: translate(0, 0); }
  .product-offer-card__image { padding: 16px; }
  .product-offer-card__name { font-size: 16px; font-weight: 500; line-height: 140%; letter-spacing: -0.32px; }
  .product-gallery__cta,
  .product-perfect-serve__cta { width: 208px; height: 50px; padding: 12px 0; margin: 0; }
  .product-gallery__stage { width: 240px; }
  .product-gallery__packaging { left: 230px; text-align: left; bottom: -110px; }
  .product-gallery__cta span,
  .product-perfect-serve__cta span { font-size: 18px; }
  .product-gallery__cta { margin-top: 24px; }
  .product-perfect-serve__copy,
  .product-perfect-serve__title { min-width: 740px; }
  .product-perfect-serve__container,
  .product-gallery { padding: 0; }
  .product-perfect-serve .bg-video { max-width: 50%; left: 45%; top: 112px; height: auto; }
  /* Detail card tablet */
  .detail-card { gap: 42px; padding: 90px 40px; }
  .detail-card__photo { width: 40%; max-width: 420px; min-width: 280px; }
  .dtc-nav--prev { left: 8px; }
  .dtc-nav--next { right: 8px; }
  .retailer-list { min-width: 400px; }
  .retailer-list a { width: 14dvw; }
  .detail-image { padding: 90px 0; }
  .detail-card__title { font-size: 28px; }
  .chip--new { font-size: 16px; }

  /* Michelin */
  #header { padding: 1rem; }

  /* Michelin */
  .tab-content.tab-imgver ul.tab-menu li a .tab-menu-tit { font-size: 1.95vw; }
  .campaign-content .campaign-inner .date-info > dl { font-size: 2.4vw; }

  .Michelin_page {max-width: 100%;}

  /* campaign new 260225 */
  .campaign-more--variant-a {display: none;}  
  .campaign-more--variant-b {display: block;}

  .campaign-intro__banner,
  .campaign-intro__banner .banner__image,
  .campaign-intro__banner .banner__image img {height: 90dvh;}
  .campaign-intro__banner .banner__text {justify-content: end; transform: translate(-50%, 40%); align-items: center; text-align: center; gap: 24px;}
  .campaign-intro__banner .banner__desc {font-weight: 400;}
  .campaign-intro__banner .banner__desc2 {display: none;}

  .campaign-more__list.list_sta {grid-template-columns: repeat(auto-fit, minmax(48%, 1fr));}

  .campaign-ended .campaign-intro .campaign-btnbox .btn-ended {width: 90%;}

  .width_box {width: 96%; margin: 0 auto; padding: 0 0 100px;}
  .campaign_view .tit-box {margin-bottom: 30px;}
  .campaign-content .campaign-inner .title.ko {font-size: 24px;line-height: 1.3;letter-spacing: -0.04em;}
  .campaign-content .campaign-inner .title.en {font-size: 28px;}  
  .campaign_holiday2020 .highlight-text {font-size: 24px;}
  .campaign-content .campaign-inner .pb30 {padding-bottom: 14px;}
  .campaign-content .campaign-inner .pb60 {padding-bottom: 33px;}
  .campaign-content .campaign-inner .text-box .text {font-size: 16px;line-height: 1.4;letter-spacing: -0.02em;}
  .campaign-content p {font-size: 16px;line-height: 1.4;letter-spacing: -0.02em;}

  .wrap-video {margin-bottom: 12px;}

  /* ccw2 */
  .ccw2-panel { min-height: 100vh; } 
 .ccw2-volume { left: 50%; bottom: 20px; } 
 .ccw2-volume input[type="range"] { width: 120px; } 
 .ccw2-contents { padding-top: 80px; } 
 .ccw2-contents-header { margin-bottom: 50px; } 
 .ccw2-contents-header-tit h1 { font-size: 32px; } 
 .ccw2-contents-header-tit h1 img { width: 50px; } 
 .ccw2-contents-header-desc p { font-size: 18px; } 
 .ccw2-contents-social a { width: min(260px, 80vw); font-size: 20px; padding: 12px 24px; } 
 .ccw2-contents-imgs { gap: 14px; max-width: 90%; } 
 .ccw2-contents-imgs img { width: 33.3333%; border-radius: 10px; } 
 .ccw2-contents-imgs-group { flex-direction: column; } 
 .mo-on { display: none; } 
}
/* --- (769px ~ 1024px) --- */
@media (min-width: 769px) and (max-width: 1024px) {
  .product-panel { pointer-events: auto; cursor: pointer; }
  .product-panels-wrapper.is-tablet-1024 .product-sections {position: relative;height: 530px;min-height: 530px;scroll-margin-top: 120px;}
  .product-panels-wrapper.is-tablet-1024 .product-sections > section {position: absolute;inset: 0;height: 100%;opacity: 0;pointer-events: none;display: flex;transition: opacity 260ms ease;}
  .product-panels-wrapper.is-tablet-1024 .product-sections > section.is-tablet-active {opacity: 1;pointer-events: auto;}
}
/* --- (max-width: 860px) --- */
@media (max-width: 860px) {
  .product-perfect-serve__container .product-panel__figure {left: 42%;}
}
/* --- (max-width: 850px) --- */
@media (max-width: 850px) {
  .product-panel__title {font-size: 60px;}
  .product-panel__eyebrow {font-size: 30px;}
  .product-perfect-serve__container .product-panel__figure {left: 39%;}

  .michelin_slide_wrapper {width: 100%;}
  .draught-master-page .draught-master__video { width: 100%; }
}
/* --- (max-width: 820px) --- */
@media (max-width: 820px) {
  .retailer-list {min-width: 350px;}
   /* campaign new 260225 */
  .campaign-intro__banner .banner__text {transform: translate(-50%, 30%);}

  .product-perfect-serve__accent {font-size: 60px;}
}
/* --- (max-width: 800px) --- */
@media (max-width: 800px) {
  .product-perfect-serve__container .product-panel__figure {left: 36%;}
}
/* --- (max-width: 768px) --- */
@media (max-width: 768px) {
  /* Footer Responsive */
  .footer { padding: 30px 1rem; }
  .footer__inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .footer__logo img { width: 150px; }
  .footer__copyright { font-size: 0.8rem; }
  .footer__contact { font-size: 0.75rem; }
  .footer__warning { font-size: 0.75rem; }
  .footer__sns { justify-content: flex-start; }

  /* Age Gate Responsive */
  .agegate__box { max-width: 90%; padding: 50px 20px; background-size: auto 60%; }
  .agegate__text { font-size: 28px; }
  .agegate__buttons { flex-direction: row; }
  .agegate__btn { width: 150px; height: 70px; font-size: 32px; }
  .agegate__warning { font-size: 14px; }

  /* Policy Page */
  .policy { padding: 100px 15px 60px; }
  .policy__title { font-size: 1.8rem; }
  .policy__content { padding: 1.5rem 0; }
  .policy__content p { font-size: 13px; }

  /* Index Main Slider */
  .stm__text { font-size: 38px; left: 50%; gap: 8px; width: 90%; top: 61%; min-width: unset; max-width: none; }
  .stm__title { font-size: 38px; }
  .stm__title.ko {font-family: "Cafe24Danjunghae", sans-serif; font-size: 35px;}
  .stm__desc { font-size: 16px; }
  .stm__controls { height: 30px; left: 50%; width: 90%; min-width: unset; top: 88%; max-width: none; flex-direction: row; justify-content: space-between; }
  .stm__button { display: flex; padding: 10px 20px; justify-content: center; align-items: center; margin: 16px 0 0; gap: 10px; border-radius: 4px; width: 138px; font-size: 20px; }
  .stm__bar { width: 222px; }
  .autoplay-progress { top: 20px; left: 1vw; }
  .stm__arrows { width: 86px; }
  .stm__arrow { width: 38px; height: 38px; }

  /* Product Page */
  .product-panel { pointer-events: auto; }
  .product-panels-wrapper { position: relative; }
  .product-intro { position: relative; }
  .product-panels-wrapper .product-sections { position: absolute; inset: 0; width: 100%; background: #fff; opacity: 0; pointer-events: none; transition: opacity 220ms ease; }
  .product-panels-wrapper .product-sections > section { position: absolute; inset: 0; display: flex; gap: 30px; transform: translateX(-110%); opacity: 0; pointer-events: none; transition: transform 260ms cubic-bezier(0.4, 0, 0.2, 1), opacity 220ms ease; min-height: 600px; }
  .product-panels-wrapper .product-sections > section.product-gallery { transform: translateX(110%); min-height: 600px; }
  /* .product-panels-wrapper .product-sections > section.product-gallery { transform: translateX(110%); min-height: 600px; } */
  .product-panels-wrapper .product-intro__panels { transform: none; opacity: 1; pointer-events: auto; }
  .product-panels-wrapper.is-mobile-section-active .product-intro__panels,
  .product-panels-wrapper.is-mobile-active-home.is-mobile-section-active .product-intro__panels { transform: none; opacity: 1; pointer-events: none; }
  .product-panels-wrapper.is-mobile-section-active .product-sections { opacity: 1; pointer-events: auto; }
  .product-panels-wrapper .product-sections > section.is-mobile-active { transform: translateX(0); opacity: 1; pointer-events: auto; }
  .product-panels-wrapper .product-sections > section.is-mobile-closing { transform: translateX(-110%); opacity: 0; pointer-events: none; }
  .product-panels-wrapper .product-sections > section.product-gallery.is-mobile-closing { transform: translateX(110%); }
  .product-gallery__cta-stack,
  .product-perfect-serve__title,
  .product-perfect-serve__copy { min-width: unset; }
  .product-sections > section { padding: 60px 25px !important; height: 100%; align-items: center; justify-content: space-around; }
  .product-panel__cta svg { transform: rotate(-135deg); }
  .product-panel--home .product-panel__cta svg { transform: rotate(45deg); }
  .product-gallery__card::after { font-size: 12px; }
  .product-perfect-serve .bg-video { position: relative; border-radius: 10px; width: 100%; max-width: none; margin: 0 auto; left: 0; top: 0; height: 21vh;}
  .product-perfect-serve__container .product-panel__figure { left: 39%; bottom: 30px; }
  .product-gallery__packaging { left: 0; bottom: -120px; }
  .product-gallery { background: url(/resources/img/product/stella-artois-premium-sec02-bg-m2.png) no-repeat center/cover, linear-gradient(164deg, #ebe1d6 -4.22%, #e8d4be 43.86%, #ecd4b3 85.89%); height: 508px !important;}
  .product-sections > section.product-gallery {align-items: flex-start;}
  .product-intro__heading { padding: 30px 20px; }
  .product-gallery__container { width: 100%;}
  .product-offers { padding: 60px 0; }
  .product-gallery__stage { width: 174px; }
  .product-gallery__deck { width: 100%; }
  .product-gallery__card { padding-right: 5px; }
  .product-gallery__card:nth-child(3),
  .product-gallery__card:nth-child(4) { margin-left: -5px !important; }
  .product-offers__grid { justify-content: flex-start; }
  .product-offers__title { font-size: 38px; }
  .product-intro__title { font-size: 38px; font-weight: 400; line-height: 120%; margin-bottom: 0; }
  .product-intro__subtitle { font-size: 16px; font-weight: 400; line-height: 120%; letter-spacing: -0.32px; }
  .product-intro__question-label { font-size: 32px; line-height: unset; }
  .product-intro__question { font-size: 28px; margin: 24px 0 40px; }
  .product-intro__panels { flex-direction: column; }
  .product-intro__heading { padding: 30px 0 20px; }
  .product-panel { width: 100%; padding: 40px; min-height: 300px; }
  .product-panel__eyebrow { font-size: 36px; }
  .product-panel__title { font-size: 60px; }
  .product-panel__cta { width: 40px; height: 40px; padding: 11px; position: absolute; left: 40px; bottom: 40px; align-self: flex-start; }
  .product-panel__cta svg { width: 24px; height: 24px; }
  .product-panel__figure { position: absolute; width: 100%; height: auto; right: 40px; bottom: 40px; }
  .product-panel__figure img { width: 100%; max-width: 70px; aspect-ratio: 70/182.64; }
  .product-panel__figure img.product-panel__image--home { max-width: 77px; aspect-ratio: 77/182; }
  /* Detail card mobile */
  .detail-card { flex-direction: column; padding: 40px 20px; justify-content: center; width: 100%; align-items: center; margin-bottom: 0px; gap: 24px; }
  .detail-card__photo { width: 100%; min-width: auto; max-width: unset; }
  .detail-card__info {max-width: unset;width: 100%;}
  .detail-card__title { font-size: 20px; }
  .chip--new { font-size: 12px; }
  .detail-card__retailers p { font-size: 18px; }
  .retailer-list { width: 100%; min-width: unset; gap: 4px; justify-content: flex-start; }
  .retailer-list a { width: 29vw; min-height: 40px; }
  .detail-image { padding: 0; }
  .stella-btn-top { right: 20px; bottom: 50dvh; }
  .retailer-list a img { width: 100%; max-width: 145px; margin: 0 auto; }
  .detail-card__retailers { margin-top: 28px; }
  .dtc-nav { position: absolute; top: 30%; transform: translateY(5%); width: 44px; height: 44px; border-radius: 50%; background: #ffffff91; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); color: #00321f; text-decoration: none; cursor: pointer; z-index: 10; transition: all 0.2s ease; }
  .sold-out .dtc-nav {top: 35%;}
  .dtc-nav--prev { left: 2%; }
  .dtc-nav--next { right: 2%; }
  /* Product soldout */
  .soldout-overlay__tit {font-size: 28px; letter-spacing: -0.56px;}
  .retailer-list.retailer-list--soldout {height: 40px;}
  .retailer-list.retailer-list--soldout::after {font-size: 16px;letter-spacing: -0.32px;}
  .detail-card-photo__image.stl-soldout .soldout-overlay__tit {font-size: 48px;letter-spacing: -0.96px;}

  /* Michelin */
  #container { min-height: auto; overflow: hidden; }
  .terms { font-size: 13px; }
  .tbl_sty01 th, .tbl_sty01 td { height: 40px; padding: 5px; }
  .contact,
  /* Index Page */
  .chalice-section,
  .heritage { display: none; }
  .ritual-tabs-mobile { margin-top: 0; }
  .tab-nav { display: flex; justify-content: space-between; }
  .tab-nav li { position: relative; flex: 1;line-height: 36px;height: 36px; border-left: 1px solid #fff; font-family: "Artois", sans-serif; font-size: 1rem; text-align: center; color: #fff; background: #333; cursor: pointer; }
  .tab-nav li:first-child { border-left: 0; }
  .tab-nav li.active { color: #fff; background-color: #c11b17; }
  .tab-nav li.active::after { position: absolute; right: -10px; bottom: -10px; border-top: 10px solid #c11b17; border-right: 10px solid transparent; border-left: 10px solid transparent; transform: translateX(-50%); content: ""; }
  .index-tab-content { display: none; margin-top: 5vh; padding: 3vh 15vw; }
  .index-tab-content.active { display: block; }
  .ritual-step__img { width: 100%; }
  /* Brand-story */
  .brand-story { margin: 3rem auto 0; }
  .bs-tab-content { padding-top: 0; }
  h1.bs-tit { font-size: 2rem; }
  .bs-tit-img { width: 80%; margin-top: 5vh; }
  .bs-tit-img-2 { width: 80%; }
  h2.bs-txt-tit { font-size: 0.8rem; }
  p.bs-txt-list { padding-bottom: 1.3vh; font-size: 0.8rem; }
  .bs-tab p { height: 59px; line-height: 59px; font-size: 1.2rem; }
  .bs-tab-cont-tit { padding-bottom: 1vh; font-size: 2rem; }
  .bs-tab-cont-sub { font-size: 1rem; font-weight: 500; }
  .bs-history-list-txt { display: flex; flex-direction: column; align-items: flex-end; }
  .bs-history-list-txt p { max-width: 90%; font-size: 0.7rem; word-break: keep-all; }
  .bs-history-list-txt p br { display: none; }
  .bs-history-year { font-size: 1.5rem; }
  .bs-history-tit { font-size: 0.8rem; }
  .bs-cart-txt-tit { font-size: 1.3rem; }
  .bs-cart-txt-list p { font-size: 0.8rem; }
  .bs-cart-img { width: 40vw; }
  .about-perfect-serve-page .bs-cart-img {margin: 3vh auto; width: 100%; text-align: center;}
  /* Product */
  h1.pd-tit { margin-bottom: 2vh; font-size: 2rem; }
  p.pd-txt-list { padding-bottom: 1.3vh; font-size: 0.8rem; }
  h2.pd-sub-tit { margin-bottom: 1vh; font-size: 2rem; }
  .pd-sub-txt { font-size: 1rem; font-weight: 500; }
  .pd-ing-slide-img img { width: 60%; }
  .pd-ing-swiper .swiper-button-prev,
  .pd-ing-swiper .swiper-rtl .swiper-button-next { top: 30%; left: 0; display: block !important; }
  .pd-ing-swiper .swiper-button-next,
  .pd-ing-swiper .swiper-rtl .swiper-button-prev { top: 30%; right: 0; display: block !important; }
  .pd-shop-link { margin: 1.9rem 0 2rem; padding: 2vh 8vw; font-size: 0.8rem; font-weight: bold; }
  .pd-pt-list-wrap { justify-content: space-evenly; margin-bottom: 4vh; }
  .pd-pt-img { height: auto; }
  .product .pd-pt-list02 .pd-pt-img,
  .product .pd-pt-list05 .pd-pt-img { height: auto; }
  .product .pd-pt-list02 img,
  .product .pd-pt-list05 img { width: 23vw; height: auto; }
  .pd-pt-tit { font-size: 0.8rem; }
  .pd-pt-list { width: 36%; margin-bottom: 2rem; }
  .pd-pt-list04,
  .pd-pt-list05 { margin-bottom: 0; }
  .product img { height: auto; }
  .ritual-steps { display: none; }
  .ritual-tabs-mobile { display: block; }
  .why-serve { margin: 0 1.25vw 2vh; padding-bottom: 0; }
  .pd-ing-slide-tit { font-size: 1.2rem; }
  .pd-ing-slide-txt { font-size: 0.8rem; }
  .pd-content { padding: 3rem 0; word-break: keep-all; }
  .pd-ing.mo { position: relative; display: block; }
  /* Perfect Serve */
  .perfect-serve { padding: 3rem 0; }
  .perfect-serve__heading { margin-bottom: 1vh; font-size: 2rem; }
  .perfect-serve__subheading { font-size: 1rem; font-weight: 500; }
  .perfect-serve__desc p { padding-bottom: 1.3vh; font-size: 0.8rem; }
  .why-serve__heading { margin-bottom: 1vh; font-size: 2rem; }
  .why-serve__subheading { margin-bottom: 0; font-size: 1rem; font-weight: 500; }
  .why-serve__title { margin-bottom: 2vh; }
  .why-serve__visual { margin: 0 auto 2vh; }
  .why-serve__point-number { width: 1.2rem; height: 1.2rem; margin-right: 1vh; font-size: 0.8rem; }
  .why-serve__point { margin-bottom: 2vh; }
  .why-serve__point h2 { margin-bottom: 1vh; font-size: 1rem; }
  .why-serve__point p { font-size: 0.8rem; }
  .ritual-intro__bar { max-width: 100%; margin-bottom: 2vh; padding: 1.4vh 0; }
  .ritual-intro__heading { font-size: 1.2rem; }
  .ritual-intro { margin: 0 0 2vh; padding: 0; }
  .ritual-intro__desc { margin-bottom: 0.8rem; font-size: 0.8rem; line-height: 1.5; }
  .ritual-intro__desc:last-child { margin-bottom: 0; }
  .ps-txt-2 { margin: 2rem 0; padding: 0; font-size: 1rem; }
  .perfect-serve__title { margin-bottom: 2vh; }
  .perfect-serve__media { margin-bottom: 2vh; }
  /* About Perfect Serve 페이지 모바일 오버라이드 */
  .about-perfect-serve-page .perfect-serve__desc p { font-size: 0.8rem; }
  .about-perfect-serve-page .ritual-intro__desc { font-size: 0.8rem; }
  .about-perfect-serve-page .ps-txt-2 { font-size: 1rem; }
  .about-perfect-serve-page .bs-tab-btn { display: flex; justify-content: center; align-items: center; }
  .about-perfect-serve-page .bs-tab p { font-size: 1rem; }
  .about-perfect-serve-page .bs-tab-cartouche.on::after { right: auto; left: 0; top: clamp(52px, 5.8vh, 90px); }
  .about-perfect-serve-page .bs-tab-history.on::after { left: auto; right: 0; top: clamp(52px, 5.8vh, 90px); }
  .about-perfect-serve-page .ritual-tabs-mobile { text-align: left; }
  .about-perfect-serve-page .mops { display: none; }
  .about-perfect-serve-page .tab-nav li.active2 { color: #fff; background-color: #c11b17; }
  .about-perfect-serve-page .tab-nav li.active2::after { content: ""; position: absolute; bottom: -10px; right: -10px; transform: translateX(-50%); border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid #c11b17; }
  /* Draught Master 모바일 오버라이드 */
  .draught-master-page .perfect-serve__desc { max-width: 100%; padding: 0 .5rem;}
  .draught-master-page .draught-master img { width: 100%; }
  .draught-master-page .ritual-intro__desc { font-size: 14px; }
  .draught-master-page .perfect-serve__desc p br { display: block; }
  /* Campaign List 모바일 */
  .campaign-list { gap: 0; width: auto; }
  .campaign-list li { flex: 0 1 100%; width: 100%; }
  .campaign-list__title { font-size: 20px; }
  .campaign-list__subtitle { margin-bottom: 3vh; font-size: 1rem; font-weight: 500; }
  .campaign-list li.active .campaign-list__title { display: flex; background: rgba(0, 0, 0, 0.5); }
  .pagination__nav { display: inline-flex; align-items: center; }
  .pagination__arrow { width: 20px; height: 20px; background-size: contain; }
  .pagination__list { padding: 0 35px; }
  .pagination__list li { height: 36px; margin-right: 30px; }
  .pagination__list li:last-child { margin: 0; }
  .pagination__list li a { line-height: 36px; }
  .pagination { margin: 7vh 0; }
  /* Campaign_view */
  .cam_detail { padding: 0 85px; }
  .cam_detail .go_list { right: 85px; }
  .campaign_view .btn_prev,
  .campaign_view .btn_next { width: 26px; height: 50px; margin-top: -25px; }
  .campaign_view .btn_prev { left: 24px; background-size: cover; }
  .campaign_view .btn_next { right: 24px; background-size: cover; }
  .campaign_view .tit_h2 {margin-top: 3rem;}
  /* Michelin */
  .Michelin_page .tit_h2 { margin: 3rem 0 1vh; font-size: 2rem; }
  .michelin_red_bar { font-size: 0.7rem; }
  .michelin_img { max-width: 90%; }
  .michelin_txt { font-size: 0.8rem; }
  .michelin_width_box { margin-bottom: 0; }
  .michelin_width_box h4,
  .michelin_width_box h2 { font-size: 2rem; }
  .michelin_width_box .event-date { font-size: 1rem; }
  .draught-video { width: 100%; }
  .michelin_slide_wrapper { width: 90%; max-width: 600px; margin: 5vh auto; overflow: hidden; }
  .michelin_slide { width: 100%; overflow: hidden; }

  /* Michelin */
  .pc_only { display: none !important; }
  .mo_only { display: block !important; }
  .campaign-content .campaign-inner .btnArea .btn { padding: 1.4em 0em; font-size: 3.88vw; }
  .campaign-content .campaign-inner .date-info { padding: 8% 0 5%; }
  .campaign-content .campaign-inner .date-info > dl { font-size: 3.8vw; }
  .campaign-content .campaign-inner .title-sub { font-size: 4.1666vw; }
  .campaign-content .campaign-inner .title { font-size: 3.51vw; }
  .tab-content .tab-cont ul.news-list > li > .text-box .title-sub { padding: 1% 0 2%; font-size: 4.4444vw; }
  .tab-content .tab-cont ul.news-list > li > div { width: 100%; }
  .tab-content .tab-cont ul.news-list > li > .text-box { padding: 6% 0 0 0; }
  .tab-content ul.tab-menu li a { display: flex; justify-content: center; align-items: center; height: 80px; padding: 0; }
  .tab-content ul.tab-menu li a::before { display: flex; justify-content: center; align-items: center; height: 80px; padding: 0; }
  .tab-content ul.tab-menu li { font-size: 16px; }

  /* .videoPopUp */
  .videoPopUp-Wrap .videoPopUp-Content .pop-cont { border: 10px solid #fff; }
  .videoPopUp-Wrap .videoPopUp-Content .btn-close { width: 50px; height: 40px; }
  /* .floating */
  .floating { width: 50px; height: 50px; }
  .floating .btn-gotop { width: 50px; height: 50px; }
  .floating .btn-gotop .btn-arrow-icon { width: 42px; height: 16px; }
  .campaign-content .C-Frites .campaign-inner { padding: 0; }
  /* .C-Frites */
  .C-Frites ul.obj-list { padding: 5.27% 4% 10.55% 12%; box-sizing: border-box; }
  .C-Frites .TABcont02 ul.obj-list { padding: 10% 4% 8% 12%; box-sizing: border-box; }
  .C-Frites ul.obj-list li { width: 80%; }
  .C-Frites .campaign-inner .text-box { padding: 0; }
  .C-Frites .TABcont02 .text-box p.text.noti-text { font-size: 5vw; font-weight: bold; }
  .campaign-content .C-Frites .campaign-inner .title-sub { font-size: 4.44vw; }
  .campaign-content .C-Frites .campaign-inner .text-box .text { font-size: 3.05vw; }
  .campaign-content .C-Frites .listSwiper { position: relative; }
  /* .campaign-content .C-Frites .swiper-button-next, .swiper-button-prev { width: auto; height: 42px; } */
  .campaign-content .C-Frites .swiper-button-prev, .swiper-container-rtl .swiper-button-next { left: 0; color: #989898; }
  .campaign-content .C-Frites .swiper-button-next, .swiper-container-rtl .swiper-button-prev { right: 0; color: #989898; }
  .C-Frites .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after { padding: .2em .4em; box-sizing: border-box; font-size: 1.5rem; background: rgba(255,255,255,.8); }
  .C-Frites .swiper-button-next:after, .swiper-rtl .swiper-button-prev:after { padding: .2em .4em; box-sizing: border-box; font-size: 1.5rem; background: rgba(255,255,255,.8); }
  .C-Frites .FritesSwiper .swiper-button-next, .swiper-container-rtl .swiper-button-prev { color: #989898; }
  .campaign-content .C-Frites .swiper-button-prev, .swiper-container-rtl .swiper-button-next { color: #989898; }
  /* .tab-content.tab-imgver */
  .tab-content.tab-imgver { padding-top: 6.6%; }
  .tab-content.tab-imgver  > .tabcont-item { padding-top: 9.4%; }
  .tab-content.tab-imgver ul.tab-menu li a { height: 87px; }
  .tab-content.tab-imgver ul.tab-menu li a .obj { display: none; }
  .tab-content.tab-imgver ul.tab-menu li a .tab-menu-tit { min-height: auto; padding: 0; font-size: 3.16vw; line-height: 1.2; }
  .tab-content.tab-imgver ul.tab-menu li:nth-of-type(1) a .tab-menu-tit { max-height: 100%; padding: 0; line-height: 1.2; }
  .tab-content.tab-imgver ul.tab-menu li a .nowrap { display: block !important; }

  /* Michelin */
  .pc { display: none; }

  /* = */
  /* Footer */
  .contact,

  /* Campaign Detail: Holiday with Stella Artois */
  .tab-content ul.tab-menu li { width: calc(98% / 3); margin: .5px; }
  .tab-content ul.tab-menu li a { height: 60px; }
  .tab-content ul.tab-menu li a::before { height: 60px; }
  .tab-content .tab-cont .TABcont04 ul.news-list > li > .text-box p { text-align: center; }
  .tab-content .tab-cont ul.news-list > li > .text-box.long-text { padding: 6% 0 0; }

  /* Campaign Detail: A Taste Worth More */
  .artois .mo-br { display: none; }
  .campaign-content.artois .section.s02 {padding-top: 30px;}

  /* Campaign Detail: Heritage Edition */
  .H-edition.campaign-content .campaign-inner .section {padding-bottom: 30px;}
  .campaign-content .campaign-inner .title-sub.pb30 {padding-bottom: 15px;}
  .H-edition.campaign-content .campaign-inner ul.gallery { flex-flow: row wrap; }
  .H-edition.campaign-content .campaign-inner ul.gallery li { width: 100%; margin: 1%; }
  .H-edition.campaign-content .campaign-inner .text-box .text:last-child { padding-bottom: 1.2em; }

  /* Campaign Detail: Stella Dining Club */
  .dining_club .section {padding-bottom: 30px;}
  .dining_club .campaign-inner ul.gallery { flex-flow: row wrap; }
  .dining_club .campaign-inner ul.gallery li { width: 100%; margin: 1%; }
  .rsize { max-width: 15px; }
  .dining_club .FritesSwiper { margin-bottom: 3%; }
  .dining_club .FritesSwiper ul.obj-list { padding: 10% 0 8%; }
  .dining_club .swiper-horizontal > .swiper-pagination-bullets,
  .dining_club .swiper-pagination-bullets.swiper-pagination-horizontal { bottom: 0; }
  .dining_club .swiper-button-next::after,
  .dining_club .swiper-button-prev::after { font-size: 30px; }
  .dining_club .swiper-button-prev { left: -3px; }
  .dining_club .swiper-button-next { right: 7px; }
  .dining_club .section.s03 { width: 100%; }
  .dining_club .FritesSwiper .swiper-pagination-bullet { display: none; }

  /* Campaign Detail: Save the Date */
  .save_date .campaign-inner .title { font-size: 30px; margin-top: 30px; }

  /* Campaign Detail: Taste More */
  .tab-content {padding-top: 30px;}
  .tab-content .tab-cont > .tabcont-item {padding: 30px 0 0;}
  .taste-more .tab-content ul.tab-menu li { width: calc(98% / 2); margin: .5px; }
  .tab-content .tab-cont ul.news-list {padding-top: 30px;}

  /* campaign new 260225 */
  .db_pc {display: none;}
  .db_mo {display: block;}

  .campaign-intro {margin: 3rem auto 0;}
  .campaign-intro__heading {gap: 12px;}

  .campaign-intro__title {font-size: 38px;}
  .campaign-intro__subtitle {font-size: 16px;}
  .campaign-intro__banner .banner__text {transform: translate(-50%, 17%);}

  .campaign-more {padding: 40px 0;}
  .campaign-more__title {font-size: 32px;line-height: 140%;margin-bottom: 24px;}
  .campaign-more__list .more-list__title {left: 18px; bottom: 18px; }
  .campaign-more__list .more-list__title:lang(ko) {font-size: 20px;font-weight: 400;line-height: 130%;height: 52px;}
  .campaign-more__list .more-list__title:lang(en) {font-size: 26px; line-height: 100%; letter-spacing: -0.52px; height: 52px;}
  .campaign-btnbox {margin-top: 24px;}
  .campaign-btnbox .btn {height: 42px; line-height: 42px; font-size: 16px;}

  /* table */
  .policy__content table {display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap;}
  .policy__content table colgroup col {width: auto;}
  .policy__content table th,
  .policy__content table td {display: table-cell; width: auto; min-width: 120px; border-top: 1px solid #ddd; white-space: nowrap;}
}
/* --- (max-width: 767px) --- */
@media (max-width: 767px) {
  /* campaign new 260225 */
  .campaign-intro__banner,
  .campaign-intro__banner .banner__image,
  .campaign-intro__banner .banner__image img {height: 600px;}
  .campaign-intro__banner .banner__text {transform: translate(-50%, -30%);}
  .campaign-intro__banner .banner__title:lang(en) {font-size: 42px;margin-bottom: 8px;}
  .campaign-intro__banner .banner__title:lang(ko) {font-size: 32px;font-style: normal;line-height: 120%;letter-spacing: -0.64px;margin-bottom: 8px;}
  .campaign-intro__banner .banner__desc {font-size: 16px;}
  .campaign-intro__banner .banner__button {font-size: 16px;height: 42px;}
}
/* --- (max-width: 575px) --- */
@media (max-width: 575px) {
  /* Campaign Detail: Holiday with Stella Artois */
  .holiday .campaign_view .tit_h2 { padding: 15px 0; }

  .ldd-swiper {height: 290px;}
}

/* --- (max-width: 420px) --- */
@media (max-width: 420px) {
  /* Michelin */
  .campaign-content .campaign-inner .btnArea .btn { font-size: 14px; }
  .campaign-content .campaign-inner .title { font-size: 18px; }
  .tab-content ul.tab-menu li { font-size: 14px; }
  .tab-content .tab-cont ul.news-list > li > .text-box .title-sub { font-size: 16px; }
  .campaign-content .campaign-inner .title-sub { font-size: 4.1666vw; }
  .C-Frites .TABcont02 .text-box p.text.noti-text { font-size: 15px; }
  .campaign-content .campaign-inner .date-info > dl { font-size: 14px; }
  .campaign-content .campaign-inner .title-sub { font-size: 24px; padding-bottom: 30px;}
  .tab-content.tab-imgver ul.tab-menu li a { height: 64px; }
  .campaign-content .C-Frites .campaign-inner .title-sub { font-size: 14px; }
  .campaign-content .C-Frites .campaign-inner .text-box .text { font-size: 12px; }
  .campaign-content .C-Frites .campaign-inner .text-box .text.warning { font-size: 10px; }
  .campaign-content .campaign-inner .date-info .title-sub { font-size: 18px; }
}

/* --- (max-width: 400px) --- */
@media (max-width: 400px) {
  .perfect-serve__desc p { word-break: keep-all; }
  .perfect-serve__desc p br { display: none; }

  .bs-tab-cont-sub {font-size: .96rem;}
}
/* --- (max-width: 375px) --- */
@media (max-width: 375px) {
  .bs-tab-cont-sub {font-size: .9rem;}
  .brand-story .bs-inner {padding: 0 5vw;}
}
/* --- (max-height: 740px) --- */
@media (max-height: 740px) {
  /* campaign new 260225 */
}

/* ========== Map Page ========== */
:root { --safe-bot: env(safe-area-inset-bottom, 0px); --chev-svg: url("/resources/img/map/map-arrow-down.png"); }
@supports (height: 100dvh) { :root { --vb: 100dvh; } }
#body_container * { letter-spacing: 0 !important; }
#panelHeader { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 4px; background-color: #f0f0f0; }
.panel-title { line-height: 48px; text-align: center; width: 100%; height: 48px; padding-left: 30px; font-size: 18px; font-weight: bold; color: #D50032; font-family: 'Cafe24Danjunghae', sans-serif; }
#map { width: 100%; height: calc(100vh - var(--header-offset, 173px)); }
#currentLocationBtn { position: absolute; bottom: 10px; right: 10px; background-color: transparent; z-index: 10; border-radius: 8px; padding: 8px 12px; font-size: 14px; cursor: pointer; box-shadow: none; display: flex; align-items: center; }
#placePanel { position: absolute; top: 180px; left: 20px; max-height: 76vh; width: 350px; background: #ffffff; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); z-index: 10; display: flex; flex-direction: column; transition: all 0.3s ease; }
#placePanel.collapsed { height: 130px; overflow: hidden; }
#tabContainer { background: #ffffff; display: flex; align-items: center; padding: 10px; }
#placeList { padding: 0; overflow-y: auto; max-height: calc(100vh - 420px); }
#placeList::-webkit-scrollbar { width: 6px; }
#placeList::-webkit-scrollbar-thumb { background: #D50032; border-radius: 3px; }
#placeList::-webkit-scrollbar-thumb:hover { background: #D50032; }
#placeListDetail { display: flex; flex-direction: row; justify-content: space-between; align-items: center; color: #ffffff; padding: 20px 15px; margin: 0; border-bottom: 1px solid #dfdfdf; }
#placeList div { cursor: pointer; color: #000000; }
#placeList div:hover { cursor: pointer; }
#placeListCount { background-color: #ffffff !important; color: #D50032 !important; padding: 75px 0; }
.tag, .curation-tag { display: flex; justify-content: center; align-items: center; border-radius: 30px; font-weight: 400; padding: 0 8px; height: 24px; font-size: 11px; }
.tag { justify-content: space-between; border: 1px solid transparent; background-color: #D50032; color: #ffffff; white-space: nowrap; }
.curation-tag { background-color: #7671c2; color: #ffffff; border-radius: 99px; line-height: 1.2; }
.tag span { display: inline-block; }
.tag span img { width: 16px !important; margin: 0; margin-top: -2px; }
.tag-scroller { position: relative; overflow: visible; }
.tag-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border: none; border-radius: 50%; background: #f8b6cd; color: #ffffff; font-size: 14px; display: none; justify-content: center; align-items: center; cursor: pointer; user-select: none; z-index: 5; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); line-height: 1; padding: 0; }
.nav-prev { left: -6px; }
.nav-next { right: -6px; }
.tag-nav:disabled { opacity: 0.35; cursor: default; box-shadow: none; }
.tag-scroller:hover .tag-nav { display: flex; }
#tagContainer { display: flex; gap: 8px; overflow-x: auto; white-space: nowrap; scrollbar-width: none; flex-wrap: wrap; }
#tagContainer::-webkit-scrollbar { display: none; }
#tagControls { padding: 15px 10px; background-color: #ffffff; box-shadow: 0px 2px 8px -3px #00000030; }
#tagControls .search-row.tag-row { margin: 0; }
#tagControls .tag-row.tag-scroller { overflow: hidden; }
#tagContainer.tag-strip { display: flex; align-items: center; gap: 6px; overflow-x: auto; overflow-y: hidden; white-space: nowrap; }
#tagContainer .tag-filter { display: inline-flex; align-items: center; box-sizing: border-box; height: 24px; padding: 0 8px; border: 1px solid transparent; border-radius: 12px; }
#tagContainer .tag-filter.active { border-color: #D50032; color: #fff;}
#tagContainer .tag-filter img { height: 16px; }
.tag-filter { display: flex; align-items: center; justify-content: center; padding: 4px 10px; font-size: 12px; background-color: #f0f0f0; border-radius: 30px; color: #4c4c4c; cursor: pointer; transition: all 0.2s ease; font-weight: 500; }
.tag-filter.active { background-color: #D50032; color: #ffffff; border-color: #D50032; }
#searchControls { display: none; padding: 0 10px; background-color: #ffffff; }
#searchControls > div:nth-of-type(3) { margin-bottom: 0; }
.search-row input[type="text"] { height: 34px; line-height: 34px; padding: 0 10px; color: #333333; background-color: #ffffff; border: 1.5px solid #cccccc; border-radius: 4px; font-size: 12px; width: 100%; box-sizing: border-box; margin-bottom: 0; display: flex; align-items: center; }
#searchControls input[type="text"]::placeholder { color: #000000; opacity: 1; line-height: 36px; }
#searchMapBtn { height: 34px; padding: 0 14px; background-color: #D50032; color: #fff; border: none; border-radius: 4px; font-size: 13px; cursor: pointer; white-space: nowrap; }
#searchControls .search-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
#searchControls .common-row { margin-bottom: 4px; }
#searchControls select { height: 34px; width: 100%; padding: 0 12px; font-size: 12px; border: 1.5px solid #cccccc; border-radius: 4px; box-sizing: border-box; line-height: normal; display: flex; align-items: center; background-color: #ffffff; color: #333333; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: var(--chev-svg); background-repeat: no-repeat; background-position: right 10px center; background-size: 11px; padding-right: calc(10px + 11px + 8px); }
#searchControls select:hover, #searchControls select:focus { background-image: url("/resources/img/map/map-arrow-down.png"); }
#searchControls select:focus, #searchControls input:focus { outline: none; border-color: #D50032; }
#autocompleteList { z-index: 1001; }
.autocomplete-items { position: absolute; top: 100%; left: 0; right: 0; z-index: 999; max-height: 180px; overflow-y: auto; background-color: #ffffff; font-size: 13px; color: #000000; }
.autocomplete-items div { padding: 8px; cursor: pointer; border-bottom: 1px solid #eeeeee; font-size: 13px; }
.autocomplete-items div:hover { background-color: #f0f0f0; }
#panelHeader .toggle-btn { position: static; background: transparent; border: none; padding: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.toggle-btn { position: static !important; box-shadow: none !important; left: auto !important; top: auto !important; bottom: auto !important; }
.toggle-btn img { width: 20px; height: 20px; }
.tab-group { display: flex; width: 330px; margin: auto; border-radius: 8px; background: #f0f0f0; padding: 4px; }
.tab-button { flex: 1; padding: 10px 14px; font-size: 1rem; color: #7c7c7c; border: none; cursor: pointer; transition: background-color 0.3s, color 0.3s; text-align: center; border-radius: 6px; }
.tab-button:not(.active):hover { background-color: #f0e0e1; }
.tab-button.active { background-color: #D50032 !important; color: #ffffff; font-weight: bold; }
.custom-popup { padding: 15px 10px; font-size: 1rem; line-height: 1.5; min-width: 250px; max-width: 300px; background: #ffffff; border-radius: 6px; z-index: 1000; box-shadow: -2px 3px 8px 0 rgba(0, 0, 0, 0.45); }
.custom-popup b { font-size: 16px; color: #333333; }
.custom-popup .address, .custom-popup .distance, .custom-popup .category { color: #000000; font-size: 13px; display: block; }
.custom-cluster { width: 42px; height: 42px; border-radius: 50%; background-color: #D50032; color: #ffffff; font-size: 14px; font-weight: bold; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 6px rgba(0, 0, 0, 0.3); transition: transform 0.2s ease; }
.custom-cluster:hover { transform: scale(1.1); }
.locate-btn { position: fixed !important; bottom: 30px !important; right: 30px !important; width: 50px !important; height: 50px !important; border: none !important; border-radius: 50% !important; color: #ffffff !important; font-size: 24px !important; cursor: pointer !important; z-index: 1001 !important; box-shadow: 0 8px 25px rgba(227, 30, 36, 0.4) !important; transition: all 0.3s ease !important; }
.locate-btn:hover { transform: translateY(-3px) scale(1.1) !important; box-shadow: 0 12px 35px rgba(227, 30, 36, 0.6) !important; }
#loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); display: none; justify-content: center; align-items: center; z-index: 2000; }
#loading-icon { width: 40px; height: 40px; border: 4px solid #f62544; border-top: 4px solid transparent; border-radius: 50%; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.mobile-only-footer { display: none; }
.report-tag { display: inline-flex; align-items: center; justify-content: center; padding: 3px; font-size: 9px; line-height: 1; font-weight: 400; color: #595959; background-color: #f5f5f5; border: 1.1px solid #d9d9d9; border-radius: 4px; }
.tag-label { display: inline; font-size: 11px; white-space: nowrap; }
.curation-dropdown { position: relative; width: 100%; }
.curation-toggle { height: 34px; width: 100%; padding: 0 30px 0 12px; border: 1.5px solid #cccccc; border-radius: 4px; font-size: 12px; line-height: 34px; text-align: left; background-color: #ffffff; color: #333333; cursor: pointer; background-image: var(--chev-svg); background-repeat: no-repeat; background-position: right 10px center; background-size: 11px; }
.curation-toggle:hover, .curation-toggle:focus { outline: none; border-color: #D50032; }
.curation-menu { position: absolute; top: 100%; left: 0; width: 100%; max-height: 390px; overflow: auto; padding: 20px 10px; border-radius: 0; box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.31); border: 0; background: #ffffff; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 8px; z-index: 1001; }
.cur-tag { font-size: 12px !important; line-height: 1 !important; display: inline-flex; padding: 4px 8px !important; background: #f0f0f0 !important; color: #4c4c4c !important; border-radius: 30px !important; border: 1px solid #f0f0f0 !important; cursor: pointer; }
.cur-tag.active { background: #D50032 !important; border-color: #D50032 !important; color: #ffffff !important; }
#placeList .tag, #placeList .curation-tag, .custom-popup .tag, .custom-popup .curation-tag { margin: 0; }
select:focus { outline: none !important; }
.pla-tit { display: flex; justify-content: space-between; align-items: center; padding: 0; margin: 0; }
.pla-shop-nm { font-size: 16px; font-weight: bold; margin: 0; padding: 0; overflow-wrap: break-word; width: 220px; word-break: keep-all; }
.pla-gomap { display: flex; align-items: center; margin: 0; padding: 0; background: #f3f3f3; border: 1px solid #e1e1e1; border-radius: 4px; }
.pla-gomap img { width: 15px; display: block; margin: auto; }
.pla-gomap span { font-size: 10px; }
.pla-gomap a { color: #3c3c3c; text-decoration: none; display: block; padding: 6px 0; text-align: center; width: 56px; max-height: 56px; }
.pla-tags { font-size: 11px; color: #ffffff; margin: 8px 0; padding: 0; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: 4px; }
.pla-dis { font-size: 10px; margin-bottom: 4px; padding: 0; }
.pla-dis span { margin-right: 12px; font-weight: 500; }
.pla-cate { font-weight: 500; color: #D50032; letter-spacing: -0.8px !important; }
.pla-adr { font-size: 12px; margin: 0; padding: 0; font-weight: 500; letter-spacing: -0.8px !important; width: 260px; word-break: keep-all; word-wrap: break-word; }

/* --- Map: (max-width: 768px) --- */
@media (max-width: 768px) {
  :root { --safe-bot: env(safe-area-inset-bottom, 0px); }
  .sidebar { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; top: auto !important; width: 100% !important; max-height: 60vh !important; border-radius: 20px 20px 0 0 !important; border-bottom: none !important; transform: translateY(0) !important; transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; z-index: 1000 !important; }
  #body_container { height: 100vh; overflow: hidden; box-sizing: border-box; position: relative; padding-top: 0; }
  #panelHeader { position: fixed; top: 0; left: 0; width: 100%; height: 53px; background-color: #D50032; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; box-sizing: border-box; z-index: 2000; }
  .panel-title { color: #ffffff; font-size: 18px; font-weight: bold; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 20px; }
  #panelHeader .toggle-btn { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; background: transparent; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1003; }
  #map { width: 100%; height: 100vh; position: absolute; top: 0; left: 0; z-index: 1; }
  #placePanel { position: fixed !important; left: 0; top: auto; max-height: unset; bottom: 0 !important; width: 100%; height: clamp(96px, 58vh, calc(100vh - 53px - var(--safe-bot))); background: rgba(255, 255, 255, 0.95); box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3); display: flex; flex-direction: column; justify-content: flex-end; transition: all 0.3s ease; }
  #placePanel.expanded { height: calc(var(--vb, 100vh) - 72px - var(--safe-bot)); }
  #placePanel.collapsed { top: auto !important; height: 130px !important; min-height: 130px !important; bottom: 0 !important; overflow: hidden; }
  #placePanel.collapsed #tagControls, #placePanel.collapsed #searchControls, #placePanel.collapsed #placeList, #placePanel.collapsed #placeListCount { display: none !important; }
  #tagControls, #searchControls { order: 0; flex-shrink: 0; padding: 15px 10px; padding-bottom: 0; background-color: #ffffff; border-top-left-radius: 10px; border-top-right-radius: 10px; box-shadow: none; }
  #searchControls .search-row { margin-bottom: 3px; }
  #searchControls .common-row { margin-bottom: 0; }
  #placeListDetail { padding: 10px 0; }
  #placeList { order: 1; flex: 1 1 auto; overflow-y: auto; padding: 0 10px 10px; max-height: unset; }
  #placeListCount { order: 1; flex: 0 0 70px; display: none; text-align: center; padding: 20px; }
  #tabContainer { order: 2; position: relative; background: #ffffff; display: flex; align-items: center; width: 100%; box-sizing: border-box; z-index: 1001; padding: 15px 10px; border-top-left-radius: 10px; border-top-right-radius: 10px; }
  #placePanel #panelHeader { order: 3; position: relative; height: 48px; display: flex; align-items: center; justify-content: center; background-color: #ffffff; border-top: 1px solid #e7e7e7; border-bottom: none; z-index: 1002; }
  #placePanel .panel-title { line-height: 48px; text-align: center; width: 100%; height: 48px; padding: 0 20px; font-size: 18px; font-weight: bold; color: #D50032; box-sizing: border-box; margin: 0; }
  .tab-group { display: flex; width: 100%; height: 100%; padding: 4px; background: #f0f0f0; border-radius: 10px; }
  .tab-button { flex: 1; padding: 12px 0; font-size: 16px; background-color: #f5f5f5; color: #D50032; border: none; cursor: pointer; transition: background-color 0.3s, color 0.3s; text-align: center; line-height: 24px; }
  #currentLocationBtn { position: fixed; top: 20%; right: 8px; padding: 5px; width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; background-color: transparent; border-radius: 8px; box-shadow: none; cursor: pointer; transform: translateY(40%); }
  #currentLocationBtn img { width: 24px; height: 24px; }
  .locate-btn { bottom: unset !important; right: unset !important; width: 30px !important; height: 30px !important; }
  .mobile-only-footer { display: block; position: fixed; bottom: 0; left: 0; width: 100%; height: 60px; padding-bottom: var(--safe-bot); background-color: #ffffff; box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1); z-index: 999; }
  .custom-popup { padding: 6px 10px; font-size: 16px; line-height: 1.5; min-width: 250px; max-width: 300px; background: #ffffff; z-index: 1010; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); }
}