@font-face{font-family:'lotte';src:url('/assets/off/gate/font/lotte_gl.woff2') format('woff2');font-weight:400;font-display:swap}
/* 공식 입구의 돌 바탕·와인 칸·가는 선과 에디션 본문을 옮겨요. */
.gl_gate_logo { display: block; width: 144px; height: auto; margin: 0 auto; }
.gl_oc { position: relative; box-sizing: border-box; border: 1px solid rgba(255,255,255,.3); color: #fff; }
.gl_oc_1bl { background: #8b2332; border-color: #8b2332; }
.gl_oc::before, .gl_oc::after { content: ''; position: absolute; width: 1px; height: 0; background: #fff; z-index: 3; transition: height .5s; pointer-events: none; }
.gl_oc::before { left: -1px; bottom: -1px; }
.gl_oc::after { right: -1px; top: -1px; }
.gl_oc .gl_oc_a { display: block; position: relative; height: 100%; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; text-align: left; box-sizing: border-box; }
a.gl_oc_a, a.gl_oc_a:link, a.gl_oc_a:visited { color: #fff; }
.gl_oc_a::before, .gl_oc_a::after { content: ''; position: absolute; width: 0; height: 1px; background: #fff; z-index: 3; transition: width .5s; pointer-events: none; }
.gl_oc_a::before { top: -1px; left: -1px; }
.gl_oc_a::after { bottom: -1px; right: -1px; }
.gl_oc:hover::before, .gl_oc:hover::after, .gl_oc:focus-within::before, .gl_oc:focus-within::after { height: calc(100% + 2px); }
.gl_oc:hover .gl_oc_a::before, .gl_oc:hover .gl_oc_a::after, .gl_oc:focus-within .gl_oc_a::before, .gl_oc:focus-within .gl_oc_a::after { width: calc(100% + 2px); }
.gl_oc .gl_oc_body { display: block; position: absolute; top: 46px; left: 46px; right: 40px; padding: 0; text-align: left; transition: transform .5s; }
.gl_oc .gl_oc_eye { display: none; }
.gl_oc .gl_oc_label { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; color: #b8b4a9; font: 400 20px/1.4 'lotte', sans-serif; letter-spacing: -.6px; }
.gl_oc_label em { display: inline-block; padding: 3px 9px 2px; background: #b8b4a9; border-radius: 4px; color: #000; font: 400 15px/1 'lotte', sans-serif; letter-spacing: -.5px; }
.gl_oc .gl_oc_head { display: block; margin: 10px 0 0; font: 400 32px/1.3 'lotte', sans-serif; color: #a78a5c; letter-spacing: -1.5px; white-space: normal; word-break: keep-all; }
.gl_oc_head .gl_mbr { display: none; }
.gl_oc .gl_oc_sub { display: block; margin-top: 16px; color: #b8b4a9; font: 400 15px/1.4 'lotte', sans-serif; letter-spacing: -.3px; }
.gl_oc_1bl .gl_oc_label, .gl_oc_1bl .gl_oc_head, .gl_oc_1bl .gl_oc_sub { color: #fff; }
.gl_oc_1bl .gl_oc_label em { background: #fff; }
.gl_oc .gl_oc_txt { display: block; position: absolute; top: 40px; left: 46px; right: 35px; margin: 0; padding: 0; color: #fff; font: 400 13px/1.7 'Noto Sans KR', sans-serif; opacity: 0; transition: opacity .5s; }
.gl_oc .gl_oc_txt::before, .gl_oc .gl_oc_txt::after { content: none; }
.gl_oc:hover .gl_oc_txt, .gl_oc:focus-within .gl_oc_txt { opacity: 1; }
.gl_oc:hover .gl_oc_body, .gl_oc:focus-within .gl_oc_body { transform: translateY(56px); }
.gl_oc .gl_obtn, .gl_stone .gl_obtn { display: inline-flex; align-items: center; justify-content: flex-end; gap: 34px; min-width: 0; width: auto; height: 38px; padding: 0; margin: 0; background: none; border: 0; border-radius: 0; box-shadow: none; color: #fff; font: 400 15px/1.4 'lotte', sans-serif; letter-spacing: -.3px; text-decoration: none; }
.gl_oc .gl_obtn { position: absolute; right: 40px; bottom: 28px; }
.gl_oc_a:hover .gl_obtn, .gl_stone a.gl_obtn:hover, .gl_stone a.gl_obtn:visited { background: none; color: #fff; }
.gl_stone a.gl_obtn, .gl_stone a.gl_obtn:link, .gl_stone a.gl_obtn:visited { color: #fff; }
.gl_gate_arrow { position: relative; display: inline-block; flex: 0 0 38px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); }
.gl_gate_arrow::before { content: ''; width: 8px; height: 8px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; position: absolute; left: 0; right: 3px; top: 0; bottom: 0; margin: auto; transform: rotate(-45deg); }
.gl_gate_arrow::after { content: ''; width: 42px; height: 1px; background: #fff; position: absolute; top: 0; bottom: 0; margin: auto; left: -20px; }
.gl_oc_a:focus-visible, .gl_stone a.gl_obtn:focus-visible, .gl_float:focus-visible { outline: 2px solid #b8b4a9; outline-offset: 5px; }
.gl_gate_building { pointer-events: none; }
.gl_gate_building img { display: block; width: 100%; height: auto; }
.gl_band { background: #191b1c url(/assets/off/gate/img/main_bg.jpg) center/cover no-repeat; }
.gl_band_in { border: 0; text-align: center; }
.gl_band_eye { font: 400 12px/1.4 'lotte', sans-serif; letter-spacing: 1.2px; color: #b8b4a9; }
.gl_band_tit { font-family: 'lotte', sans-serif; font-weight: 400; color: #a78a5c; }
.gl_band .gl_oc_txt { display: none; }
.gl_band .gl_oc:hover .gl_oc_body, .gl_band .gl_oc:focus-within .gl_oc_body { transform: none; }
/* 공식 에디션의 가운데 앞 글 → 세로선 → 금색 제목이에요. */
.gl_stone { box-sizing: border-box; width: 100vw; margin-left: calc(50% - 50vw); background: #191b1c url(/assets/off/ed/img/location_bg.jpg) center/cover no-repeat; color: #b8b4a9; font-family: 'Noto Sans KR', sans-serif; }
.gl_stone .gl_pi { padding: 0; }
.gl_stone .gl_pi_eye, .gl_stone .gl_sh_eye { font: 400 13px/1.5 'lotte', sans-serif; color: #b8b4a9; letter-spacing: 1px; }
.gl_stone .gl_pi_h { margin-top: 24px; }
.gl_stone .gl_pi_h span { color: #b8b4a9; font: 400 21px/1.5 'lotte', sans-serif; letter-spacing: -.5px; }
.gl_title_line { display: block; width: 1px; height: 42px; margin: 28px auto; background: #818181; }
.gl_stone .gl_pi_h strong { display: block; margin: 0; font: 400 42px/1.4 'lotte', sans-serif; color: #af895c; letter-spacing: -1.7px; background: none; -webkit-text-fill-color: currentColor; }
.gl_stone .gl_pi_lead { margin-top: 26px; color: #b8b4a9; font: 400 15px/1.9 'Noto Sans KR', sans-serif; }
.gl_stone .gl_pi_btns { display: flex; flex-direction: row; justify-content: center; gap: 65px; margin-top: 36px; }
.gl_stone .gl_pphoto { position: relative; padding-top: 74px; margin: 72px 0 0; }
.gl_photo_label { position: absolute; top: 0; left: 24px; padding-left: 16px; color: #fff; font: 400 12px/1.5 'lotte', sans-serif; letter-spacing: .8px; text-align: left; z-index: 1; }
.gl_photo_label::before { content: ''; position: absolute; top: 0; left: 0; width: 1px; height: 94px; background: #a78a5c; }
.gl_stone .gl_pphoto img { width: 100%; height: auto; object-fit: cover; }
.gl_stone .gl_pphoto figcaption { color: #fff; font-size: 12px; }
.gl_stone .gl_pfacts { border-top: 0; border-bottom: 1px solid rgba(255,255,255,.3); }
.gl_stone .gl_pfacts span { color: #b8b4a9; }
.gl_stone .gl_pfacts b { font-family: 'lotte', sans-serif; font-weight: 400; color: #af895c; }
.gl_stone .gl_pfacts small { color: #b8b4a9; font-weight: 400; }
.gl_stone .gl_pfacts li + li::before { background: rgba(255,255,255,.3); }
.gl_stone .gl_sh .gl_sh_h { font: 400 32px/1.4 'lotte', sans-serif; color: #af895c; letter-spacing: -1px; margin-top: 0; }
.gl_stone .gl_sh_eye::after { content: ''; display: block; width: 1px; height: 36px; margin: 22px auto; background: #818181; }
.gl_stone .gl_sp_steps li strong { color: #af895c; font-family: 'lotte', sans-serif; font-weight: 400; }
.gl_stone .gl_sp_steps li b { font-family: 'lotte', sans-serif; color: #af895c; font-weight: 400; }
.gl_stone .gl_sp_steps li p { color: #b8b4a9; font-weight: 400; }
.gl_stone .gl_sp_steps li + li::before { background: rgba(255,255,255,.3); }
.gl_stone .gl_sp_steps > .gl_obtn { margin-top: 48px; }
.gl_stone .gl_sp_why { background: none; }
.gl_stone .gl_sp_why li { text-align: left; padding: 0; }
.gl_stone .gl_sp_why li::before { content: none; }
.gl_stone .gl_why_en { position: relative; padding-left: 16px; margin-left: 12px; font: 400 12px/1.5 'lotte', sans-serif; color: #fff; letter-spacing: .6px; z-index: 1; }
.gl_stone .gl_why_en::before { content: ''; position: absolute; left: 0; top: 0; width: 1px; height: 86px; background: #a78a5c; }
.gl_stone .gl_why_img { width: 100%; border-radius: 0; margin: 48px 0 0; overflow: hidden; }
.gl_stone .gl_why_img::after { content: none; }
.gl_stone .gl_why_img img { display: block; width: 100%; height: 100%; object-fit: cover; filter: none; }
.gl_stone .gl_sp_why h4 { font: 400 22px/1.4 'lotte', sans-serif; color: #af895c; margin: 24px 12px 0; }
.gl_stone .gl_why_txt { margin: 14px 12px 0; padding: 0; font: 400 14px/1.8 'Noto Sans KR', sans-serif; color: #b8b4a9; }
.gl_stone .gl_why_txt::before, .gl_stone .gl_why_txt::after { content: none; }
.gl_stone .gl_tbl { border-top: 1px solid #a78a5c; background: none; }
.gl_stone .gl_tbl th, .gl_stone .gl_tbl td { border-bottom-color: rgba(255,255,255,.2); font-weight: 400; }
.gl_stone .gl_tbl tbody th, .gl_stone .gl_tbl thead th { color: #af895c; background: none; }
.gl_stone .gl_tbl td, .gl_stone .gl_tbl .gl_hl { color: #b8b4a9; background: none; }
.gl_stone .gl_tbl .gl_hl { color: #af895c; }
.gl_stone .gl_sp_type_in img { border: 0; }
.gl_stone .gl_note { padding: 24px 0 0; margin-top: 40px; background: none; align-items: flex-start; gap: 9px; }
.gl_stone .gl_note_ico { flex-basis: 16px; height: 20px; background: none; border-radius: 0; font-size: 0; line-height: 20px; color: #b8b4a9; }
.gl_stone .gl_note_ico::after { content: '\24d8'; font: 400 14px/20px sans-serif; }
.gl_stone .gl_note li { color: #b8b4a9; font-size: 12px; line-height: 1.8; }
.gl_stone .gl_ed5 { margin: 0; padding: 0; background: none; }
.gl_stone .gl_ed5 li { border-left: 1px solid #a78a5c; text-align: left; }
.gl_stone .gl_ed5_n { color: #b8b4a9; font-family: 'lotte', sans-serif; font-weight: 400; }
.gl_stone .gl_ed5 p { display: block; height: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: #b8b4a9; font-family: 'lotte', sans-serif; font-weight: 400; }
.gl_stone .gl_ed5 p b { color: #af895c; font-weight: 400; }
.gl_stone .gl_ed5 small { font-family: 'Noto Sans KR', sans-serif; font-weight: 400; }
.gl_stone .gl_ed_what > p { color: #b8b4a9; }
@keyframes gl_gate_logo { 0% { opacity: 0; transform: translateY(170px); } 40% { opacity: 1; transform: translateY(170px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes gl_gate_left { from { opacity: 0; transform: translateX(-7rem); } to { opacity: 1; transform: translateX(0); } }
@keyframes gl_gate_right { from { opacity: 0; transform: translateX(7rem); } to { opacity: 1; transform: translateX(0); } }
@keyframes gl_gate_building { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: translateY(0); } }

/* PC 입구: 머리 메뉴 높이를 확보하고 건물은 두 칸 뒤에 놓아요. */
#section_offer { background: #191b1c url(/assets/off/gate/img/main_bg.jpg) center/cover no-repeat; }
.gl_offer { --gate-height: clamp(270px, 41vh, 322px); --gate-center: calc(50% + 24px); display: block; padding: 0; overflow: hidden; color: #fff; }
.gl_offer_tit { position: absolute; left: 0; right: 0; bottom: calc(50% - 24px + var(--gate-height)/2 + 30px); z-index: 2; animation: none; }
.gl_offer_tit .gl_gate_logo { width: clamp(144px, 19vh, 180px); animation: gl_gate_logo 1.5s both; }
.gl_offer_ko, .gl_offer_h { display: none; }
.gl_offer_en { margin: 15px 0 0; font: 400 13px/1.4 'lotte', sans-serif; color: #b8b4a9; letter-spacing: 1.8px; animation: gl_rise 1s .9s both; }
.gl_offer_cards { position: absolute; left: 0; right: 0; top: var(--gate-center); transform: translateY(-50%); width: min(82%, 1200px); max-width: none; margin: 0 auto; gap: 36px; z-index: 2; }
.gl_offer .gl_oc { height: var(--gate-height); min-width: 0; animation: gl_gate_left 1.5s .5s both; }
.gl_offer .gl_oc_ed { animation-name: gl_gate_right; }
.gl_offer .gl_gate_building { position: absolute; bottom: 32px; left: 0; right: 0; width: min(44vw, 721px); margin: 0 auto; z-index: 1; animation: gl_gate_building 1.5s .6s both; }
.gl_offer .gl_gate_building img { object-fit: contain; object-position: bottom; }
.gl_offer_note { position: absolute; bottom: 9px; left: 0; right: 0; width: 82%; max-width: 1200px; margin: 0 auto; z-index: 2; color: #b8b4a9; font: 400 10px/1.5 'Noto Sans KR', sans-serif; animation: gl_rise 1s 1s both; }
/* 팝업도 공식 입구의 작은 판으로 구성해요. */
#gl_popup .pop_content { box-sizing: border-box; width: min(1100px, 88vw); padding: 32px 40px 18px; background: #191b1c url(/assets/off/gate/img/main_bg.jpg) center/cover no-repeat; }
#gl_popup .gl_gate_logo { width: 132px; margin-bottom: 30px; }
#gl_popup .pop_content > ul.pc { gap: 28px; }
#gl_popup .pop_content li { flex: 1; width: auto; height: 306px; }
#gl_popup .gl_oc_body { top: 38px; left: 34px; right: 24px; }
#gl_popup .gl_oc_label { font-size: 19px; }
#gl_popup .gl_oc_head { font-size: 29px; }
#gl_popup .gl_oc_txt { top: 34px; left: 34px; right: 24px; font-size: 12px; }
#gl_popup .gl_obtn { right: 30px; bottom: 24px; font-size: 14px; }
#gl_popup .gl_pop_foot { padding-top: 14px; margin-top: 18px; border-top: 1px solid rgba(255,255,255,.3); font-size: 13px; color: #b8b4a9; }
#gl_popup .gl_pop_close { color: #b8b4a9; font-size: 13px; }
#gl_popup.show .gl_gate_logo { animation: gl_rise 1s both; }
/* 첫 화면의 작은 와인 칸이에요. */
.gl_hero_offer { width: 330px; bottom: 92px; padding: 0 24px; box-sizing: border-box; border: 1px solid rgba(255,255,255,.3); background: #8b2332; box-shadow: none; }
.gl_ho_head { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; padding: 21px 0 16px; color: #fff; font: 400 17px/1.3 'lotte', sans-serif; }
.gl_ho_head span { font: 400 10px/1.3 'lotte', sans-serif; letter-spacing: 1.2px; color: #b8b4a9; }
.gl_ho_row { position: relative; display: block; padding: 14px 52px 17px 0; border-top: 1px solid rgba(255,255,255,.3); }
a.gl_ho_row, a.gl_ho_row:link, a.gl_ho_row:visited { color: #fff; }
.gl_ho_row:hover { background: none; }
.gl_ho_k { display: block; color: #b8b4a9; font: 400 12px/1.4 'lotte', sans-serif; }
.gl_ho_v { display: block; margin-top: 7px; color: #fff; font: 400 16px/1.4 'lotte', sans-serif; letter-spacing: -.6px; }
.gl_ho_v b { font-weight: 400; color: #fff; }
.gl_ho_row i.gl_gate_arrow { position: absolute; top: 50%; right: 0; width: 30px; height: 30px; border: 0; transform: translateY(-50%); }
.gl_ho_row i.gl_gate_arrow::after { width: 34px; left: -18px; }
.gl_ho_row:hover i.gl_gate_arrow { transform: translateY(-50%); }
/* 하위 쪽의 낮은 두 칸이에요. */
.gl_band { padding: 60px 0 72px; }
.gl_band_in { max-width: 1200px; width: 84%; padding: 0; }
.gl_band .gl_gate_logo { width: 100px; margin-bottom: 22px; }
.gl_band_tit { margin-top: 8px; font-size: 25px; letter-spacing: -.8px; }
.gl_band_cards { gap: 36px; margin-top: 34px; }
.gl_band .gl_oc { height: 230px; }
.gl_band .gl_oc_body { top: 32px; left: 36px; right: 30px; }
.gl_band .gl_oc_label { font-size: 17px; }
.gl_band .gl_oc_head { font-size: 28px; white-space: normal; }
.gl_band .gl_oc_sub { margin-top: 10px; font-size: 14px; }
.gl_band .gl_obtn { right: 30px; bottom: 24px; font-size: 14px; }
.gl_band_one .gl_band_cards { max-width: 740px; }
/* 말풍선과 화살표를 하나의 공식 와인 칸 안에 놓아요. */
.gl_float { display: flex; justify-content: space-between; width: 260px; height: 70px; padding: 0 22px; box-sizing: border-box; border: 1px solid rgba(255,255,255,.3); border-radius: 0; background: #8b2332; box-shadow: none; }
.gl_float .gl_float_bubble { position: static; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; transform: none; animation: none; color: #b8b4a9; font: 400 12px/1.65 'lotte', sans-serif; }
.gl_float_bubble b { font: 400 15px/1.6 'lotte', sans-serif; color: #fff; }
.gl_float_bubble::before, .gl_float_bubble::after { content: none; }
.gl_float .gl_gate_arrow { flex-basis: 32px; width: 32px; height: 32px; }
.gl_float .gl_gate_arrow::after { width: 34px; left: -16px; }
.gl_stone { padding: 84px max(6vw, calc((100vw - 1100px)/2)) 66px; }
.gl_stone .gl_pfacts li { padding: 28px 10px; }
.gl_stone .gl_pfacts b { font-size: 24px; }
.gl_stone .gl_sp_steps, .gl_stone .gl_sp_why, .gl_stone .gl_sp_type, .gl_stone .gl_sp_info, .gl_stone .gl_ed5_sec, .gl_stone .gl_ed_what { margin-top: 100px; }
.gl_stone .gl_sp_steps li { padding: 6px 24px; }
.gl_stone .gl_sp_steps li b { font-size: 36px; }
.gl_stone .gl_sp_steps li strong { font-size: 20px; }
.gl_stone .gl_sp_why { padding: 0; }
.gl_stone .gl_sp_why ul { gap: 32px; }
.gl_stone .gl_why_img { height: 180px; }
.gl_stone .gl_ed5 ul { gap: 24px; }
.gl_stone .gl_ed5 li { flex: 1; padding: 8px 0 8px 22px; }
.gl_stone .gl_ed5_n { font-size: 14px; margin-bottom: 26px; }
.gl_stone .gl_ed5 p { font-size: 20px; line-height: 1.8; }
.gl_stone .gl_ed_what > p { font-size: 15px; line-height: 1.8; }
@media (max-height: 700px) {
  .gl_offer { --gate-height: 284px; --gate-center: calc(50% + 27px); }
  .gl_offer_tit { bottom: calc(50% - 27px + var(--gate-height)/2 + 22px); }
  .gl_offer_tit .gl_gate_logo { width: 128px; }
  .gl_offer_en { margin-top: 10px; }
  .gl_offer .gl_oc_body { top: 36px; left: 38px; }
  .gl_offer .gl_oc_txt { top: 30px; left: 38px; }
  .gl_offer .gl_oc_head { font-size: 30px; }
  .gl_offer .gl_oc_sub { margin-top: 12px; }
  .gl_offer .gl_obtn { bottom: 23px; }
  #gl_popup .pop_content { padding-top: 24px; }
  #gl_popup .gl_gate_logo { width: 112px; margin-bottom: 22px; }
  #gl_popup .pop_content li { height: 280px; }
  .gl_hero_offer { bottom: 78px; }
}
@media (prefers-reduced-motion: reduce) {
  .gl_offer *, #gl_popup .gl_gate_logo { animation: none !important; }
  .gl_oc *, .gl_oc::before, .gl_oc::after { transition: none !important; }
}