/* 4XR 쇼케이스 공통 스타일  showcase.css — 시즌마다 고치지 않는다 (게시판 틀 초기화는 페이지 쪽에 있다) */

/* common */
#wrapper_ey, #wrapper_ey *{ font-family: "Pretendard", sans-serif;}
.width_con{ width: 1114px; margin: 0 auto;}
.title_con{ margin: 0 0 67px; text-align: center; color: #000;}
.title_con h2{ font-size: 62px; text-transform: uppercase;}

/* 상단 sticky */
#sticky_section { display: flex; justify-content: center; position: sticky; top: 0; width: 100%; background: #000; z-index: 20;}
#sticky_section div { width: 12%; height: 70px; line-height: 70px; text-align: center; font-size: 21px; color: #fff;}
#sticky_section div a { display: block; font-size: 22px; font-weight: 400; color: #8a8a8a; transition: color .25s;}
#sticky_section div.on a{ color: #fff; font-weight: 500;}

/* 상단 비주얼 영역 */
#visual_section .visual_con{ position: relative; overflow: hidden; background-color: #c5c6cc; color: #fff;}
#visual_section .visual_img{ display: block; width: 100%; height: auto;}
#visual_section h6{ position: absolute; top: 6.9%; margin: 0; font-size: 20px; font-weight: 600; text-transform: uppercase;}
#visual_section .visual_label_l{ left: 3.39%;}
#visual_section .visual_label_r{ right: 3.39%;}
#visual_section .visual_ttl{ position: absolute; left: 0; right: 0; top: 40%; margin: 0; font-family: "DIN Alternate", sans-serif !important; font-size: 180px; font-weight: 400;
line-height: 1; letter-spacing: 0; text-align: center; color: #fff; animation: ttl_up 1.2s cubic-bezier(.2,.7,.2,1) .2s both;}
@keyframes ttl_up{ from{ opacity: 0; transform: translateY(34px);} to{ opacity: 1; transform: none;} }
#visual_section .visual_down{ position: absolute; left: 50%; bottom: 26px; width: 22px; height: 22px; margin-left: -11px;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: .85; animation: down_move 1.9s ease-in-out infinite;}
@keyframes down_move{ 0%, 100%{ transform: rotate(45deg) translate(0, 0);} 50%{ transform: rotate(45deg) translate(5px, 5px);} }
#visual_section h4{ position: absolute; left: 0; right: 0; top: 85%; margin: 0; font-size: 20px; font-weight: 300; line-height: 1.5em; text-align: center; color: #ccc;}

/* 이벤트 영역 */
#event_section{ padding: 150px 0; background-color: #f7f6f3; color: #000; text-align: left;}
#event_section h3, #event_section h4, #event_section h5, #event_section h6{ margin: 0; padding: 0; font-weight: 400;}
#event_section .ev_con{ display: grid; grid-template-columns: 5fr 6fr; grid-template-rows: auto 1fr; gap: 0 56px; align-items: stretch; max-width: 1000px; margin: 0 auto;}
#event_section .ev_pic{ grid-column: 1; grid-row: 1 / 3; position: relative; display: block; aspect-ratio: 1/1; overflow: hidden; background-color: #ecebe7; color: #000; text-decoration: none;}
#event_section .ev_pic img{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}
#event_section .ev_pic .ev_pic_on{ opacity: 0; transition: opacity .35s;}
#event_section .ev_pic:hover .ev_pic_on{ opacity: 1;}
#event_section .ev_pic h6{ position: absolute; left: 16px; top: 16px; padding: 6px 10px; background-color: #fff; font-size: 14px; font-weight: 500;}
#event_section .ev_info{ grid-column: 2; grid-row: 2; display: flex; flex-direction: column;}
#event_section .ev_count{ grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 18px; margin: 0 0 26px; font-variant-numeric: tabular-nums;}
#event_section .ev_count .ev_track{ position: relative; flex: 1 1 auto; height: 2px; background-color: #e3e3e3;}
#event_section .ev_count .ev_track i{ position: absolute; left: 0; top: 0; bottom: 0; width: 0; background-color: #000; transition: width .6s, background-color .4s;}
#event_section .ev_count h5{ flex: 0 0 auto; font-size: 15px; font-weight: 500; color: #000; white-space: nowrap; transition: color .4s;}
#event_section .ev_count.hot h5,
#event_section .ev_count.hot .ev_track i{ color: #c23b2e; background-color: #c23b2e;}
#event_section .ev_count h5 b{ font-weight: 700;}
#event_section .ev_count h6{ flex: 0 0 auto; font-size: 14px; font-weight: 400; color: #777; white-space: nowrap;}
#event_section .ev_rows{ margin: 0 0 auto; padding: 0; list-style: none; border-top: 1px solid #000;}
#event_section .ev_rows li{ display: grid; grid-template-columns: 84px 1fr; padding: 22px 0; border-bottom: 1px solid #ededed;}
#event_section .ev_rows li:last-child{ border-bottom: 0;}
#event_section .ev_rows h5{ padding: 3px 0 0; font-size: 13px; font-weight: 600; color: #a3a3a3;}
#event_section .ev_rows h3{ font-size: 18px; font-weight: 600; line-height: 1.45;}
#event_section .ev_rows h4{ margin: 6px 0 0; font-size: 16px; font-weight: 400; color: #777;}
#event_section .ev_date{ display: grid; grid-template-columns: 40px auto; row-gap: 8px; font-size: 14px; font-variant-numeric: tabular-nums;}
#event_section .ev_date h6{ font-size: 15px; font-weight: 400; color: #777;}
#event_section .ev_date h5{ padding: 0; font-size: 15px; font-weight: 400; color: #000;}
#event_section .ev_btns{ display: grid; grid-template-columns: 1fr 150px; gap: 8px; margin: 22px 0 0;}
#event_section .ev_btns a,
#event_section .ev_btns button{ display: block; height: 56px; margin: 0; padding: 0; line-height: 56px; text-align: center; font-size: 16px; cursor: pointer; box-sizing: border-box;}
#event_section .ev_btns a{ background-color: #000; color: #fff; font-weight: 600; text-decoration: none;}
#event_section .ev_btns button{ line-height: 54px; border: 1px solid #cfcfcf; background-color: transparent; color: #000; font-weight: 500; transition: border-color .2s;}
#event_section .ev_up{ opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1);}
#event_section .ev_up.is_in{ opacity: 1; transform: none;}

/* 유의사항 */
#event_section .ev_modal{ display: none; position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 10000; align-items: center; justify-content: center; padding: 20px; 
    background: rgba(22,26,32,.5);}
#event_section .ev_modal.is_active{ display: flex;}
#event_section .ev_modal_con{ position: relative; display: flex; flex-direction: column; width: 100%; max-width: 600px; max-height: calc(100vh - 80px); padding: 34px 30px; 
    overflow: hidden; box-sizing: border-box; background-color: #fff; box-shadow: 0 20px 80px rgba(28,34,43,.21);}
#event_section .ev_modal_con h2{ margin: 0 0 18px; font-size: 22px; font-weight: 900; text-align: center; color: #1c222b;}
#event_section .ev_modal_con ul{ flex: 1 1 auto; min-height: 0; margin: 0; padding: 0; overflow-y: auto; overscroll-behavior: contain; list-style: none; text-align: left;}
#event_section .ev_modal_con li{ position: relative; margin: 8px 0; padding: 0 0 0 .85em; font-size: 14px; line-height: 1.6; color: #000;}
#event_section .ev_modal_con li:before{ content: "-"; position: absolute; left: 0; top: 0; color: #c23b2e;}
#event_section .ev_modal_close{ position: absolute; right: 14px; top: 12px; z-index: 5; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; 
    padding: 0; border: 0; background: transparent; font-size: 28px; line-height: 1; color: #1c222b; cursor: pointer; transition: color .18s ease;}
#event_section .ev_modal_close:hover{ color: #c23b2e;}

/* 에디토리얼 영역 */
#editorial_box_section{padding: 150px 0;}
#editorial_box_section .width_con{ padding-bottom: 67px;}
#editorial_box_section .title_con{ margin: 0;}
#editorial_box_section .ed_block.trio,
#editorial_box_section .ed_block.pair{ display: grid; padding: 3.3% 2.7%; column-gap: 1.15%; box-sizing: border-box;}
#editorial_box_section .ed_block.trio{ grid-template-columns: repeat(3, 1fr);}
#editorial_box_section .ed_block.pair{ grid-template-columns: 1fr 1fr;}
#editorial_box_section .photo{ position: relative; overflow: hidden;}
#editorial_box_section .photo > a:not(.tip){ display: block;}
#editorial_box_section .photo img{ display: block; width: 100%; height: auto;}
#editorial_box_section .fade{ opacity: 0; transition: opacity 1.1s ease;}
#editorial_box_section .fade.is_in{ opacity: 1;}
#editorial_box_section .tip{ --nm: 15px; --pr: 14px; position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: block; height: auto; padding: 110px 60px 15px 16px; 
    text-align: left; color: #fff; text-decoration: none; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.034) 16%, rgba(0,0,0,.123) 29%, rgba(0,0,0,.246) 41%, rgba(0,0,0,.385) 53%, rgba(0,0,0,.519) 65%, rgba(0,0,0,.627) 78%, rgba(0,0,0,.7) 100%);
opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity .45s ease, transform .45s ease;}
#editorial_box_section .tip.on{ opacity: 1; transform: none; pointer-events: auto;}
#editorial_box_section .tip .tip_nm{ display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--nm); letter-spacing: -.02em; line-height: 1.45;}
#editorial_box_section .tip .tip_pr{ display: block; font-size: var(--pr); font-weight: 600; letter-spacing: -.01em; line-height: 1.5;}
#editorial_box_section .tip .tip_off{ margin-left: 7px; color: #FF5A5A;}
#editorial_box_section .tip.md{ --nm: 13px; --pr: 12px; padding: 80px 50px 12px 12px;}
#editorial_box_section .tip.sm{ --nm: 11px; --pr: 12px; padding: 58px 40px 10px 10px;}
#editorial_box_section .tip_btn{ --s: 30px; --a: 16px; --t: 2px; position: absolute; right: 16px; bottom: 11px; z-index: 4; width: var(--s); height: var(--s); 
    padding: 0; border: 0; background: none; cursor: pointer; opacity: 0; pointer-events: none; -webkit-appearance: none; appearance: none; filter: drop-shadow(0 1px 3px rgba(0,0,0,.55)); 
    transition: opacity .45s ease, transform .35s ease;}
#editorial_box_section .tip_btn.show{ opacity: 1; pointer-events: auto;}
#editorial_box_section .tip_btn.open{ transform: rotate(45deg);}
#editorial_box_section .tip_btn:before,
#editorial_box_section .tip_btn:after{ content: ""; position: absolute; left: 50%; top: 50%; background: #fff; width: var(--a); height: var(--t); 
margin: calc(var(--t) / -2) 0 0 calc(var(--a) / -2);}
#editorial_box_section .tip_btn:after{ width: var(--t); height: var(--a); margin: calc(var(--a) / -2) 0 0 calc(var(--t) / -2);}
#editorial_box_section .tip_btn.md{ --s: 26px; --a: 14px; right: 13px; bottom: 8px;}
#editorial_box_section .tip_btn.sm{ --s: 22px; --a: 12px; right: 10px; bottom: 8px;}

/* 상품 영역 (가로 스와이프) */
#product_section{ color: #000;}
#product_section .pd_head{ display: flex; justify-content: space-between; align-items: flex-end; margin: 0 0 20px; padding: 0 2.7%;}
#product_section .pd_head h6{ font-size: 18px; font-weight: 400; letter-spacing: .4px; color: #3f3f3f; text-transform: uppercase;}
#product_section .pd_head h2{ align-self: baseline;}
#product_section .pd_cats{ display: flex; gap: 8px; align-self: baseline; position: relative; top: -13px; margin: 0 auto 0 32px;}
#product_section .pd_cats button{ height: 36px; padding: 0 40px; border: 1px solid #d9d6d1; border-radius: 18px; background-color: transparent; font-size: 14px; font-weight: 500; 
    color: #000; cursor: pointer; transition: background-color .2s, border-color .2s, color .2s;}
#product_section .pd_cats button.on{ background-color: #000; border-color: #000; color: #fff;}
#product_section .pd_viewport{ overflow-x: auto; overflow-y: hidden; margin: 0 2.7%; scrollbar-width: none; cursor: grab; overscroll-behavior-x: contain;}
#product_section .pd_viewport::-webkit-scrollbar{ display: none;}
#product_section .pd_viewport.drag{ cursor: grabbing; user-select: none;}
#product_section .pd_track{ display: flex; gap: 8px;}
#product_section .pd_slide{ flex: 0 0 calc((100% - 8px * 2.8) / 3.8); text-align: left;}
#product_section .pd_slide a{ display: block; color: #000; text-decoration: none;}
#product_section .pd_pic{ aspect-ratio: 37/52; overflow: hidden; background-color: #f5f5f4;}
#product_section .pd_pic img{ width: 100%; height: 100%; padding: 8%; box-sizing: border-box; object-fit: contain; mix-blend-mode: multiply; transition: transform .7s cubic-bezier(.2,.7,.2,1); 
    -webkit-user-drag: none;}
#product_section .pd_pic.cover img{ padding: 0; object-fit: cover;}
#product_section .pd_slide:hover .pd_pic img{ transform: scale(1.04);}
#product_section .pd_slide h5{ display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 0; font-size: 20px; font-weight: 400; line-height: 1.35em;}
#product_section .pd_slide h5 span{ overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
#product_section .pd_dots{ display: flex; align-items: center; gap: 8px; flex: 0 0 auto;}
#product_section .pd_dots i{ position: relative; width: 14px; height: 14px; font-style: normal; cursor: pointer;}
#product_section .pd_dots i:before{ content: ""; position: absolute; left: 0; top: 0; right: 0; bottom: 0; border-radius: 50%; background-color: var(--c); border: 1px solid rgba(0,0,0,.12); 
box-sizing: border-box; transition: transform .25s;}
#product_section .pd_dots i.on:before{ box-shadow: 0 0 0 2px #fff, 0 0 0 3px #000;}
#product_section .pd_dots i:hover:before{ transform: scale(1.25);}
#product_section .pd_dots i:hover:after{ content: attr(data-nm); position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); margin-bottom: 8px; padding: 5px 8px; border-radius: 4px; 
    background-color: #000; color: #fff; font-size: 12px; font-weight: 400; line-height: 1; white-space: nowrap;}
#product_section .pd_slide h4{ margin: 8px 0 0; font-size: 14px; font-weight: 300; line-height: 1.6em; color: #5b524f; word-break: keep-all; overflow-wrap: break-word; min-height: 3.2em;}
#product_section .pd_stage{ position: relative;}
#product_section .pd_arrow{ position: absolute; top: 0; z-index: 2; width: 56px; height: 56px; margin-top: -28px; padding: 0; border: 0; background: none; cursor: pointer; -webkit-appearance: none; 
    appearance: none; filter: drop-shadow(0 1px 3px rgba(0,0,0,.45));}
#product_section .pd_arrow:before{ content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -5px; border: solid #fff; border-width: 0 2.5px 2.5px 0; 
transform: rotate(135deg); transition: border-color .25s;}
#product_section .pd_arrow.prev{ left: calc(2.7% + 14px);}
#product_section .pd_arrow.next{ right: calc(2.7% + 14px);}
#product_section .pd_arrow.next:before{ margin-left: -11px; transform: rotate(-45deg);}
#product_section .pd_arrow.off{ pointer-events: none;}
#product_section .pd_arrow.off:before{ border-color: #b5b1ac;}
#product_section .pd_bar{ position: relative; height: 1px; margin: 26px 2.7% 0; background-color: #e2dfdb;}
#product_section .pd_bar i{ position: absolute; left: 0; top: 0; height: 1px; background-color: #000;}

/* 하단 링크 버튼 */
#link_section{ display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 1000px; margin: 0 auto; padding: 100px 0 50px; box-sizing: border-box;}
#link_section a{ display: block; height: 56px; line-height: 56px; text-align: center; font-size: 16px; text-decoration: none; box-sizing: border-box;}
#link_section .lk_go{ background-color: #000; color: #fff; font-weight: 600;}
#link_section .lk_sub{ line-height: 54px; border: 1px solid #cfcfcf; color: #000; font-weight: 500; transition: border-color .2s;}
#link_section .lk_sub:hover{ border-color: #000;}

@media(max-width: 768px){
/* common */
.width_con{ width: 100%; padding: 120px 43px; box-sizing: border-box;}
.title_con h2{ font-size: 58px;}

/* 상단 sticky */
#sticky_section{ top: 100px;}
#sticky_section div{ width: 33.33%;}
#sticky_section div a{font-size: 24px;}

/* 상단 비주얼 */
#visual_section .visual_img{ aspect-ratio: 4/5; object-fit: cover; object-position: 50% 30%;}
#visual_section h6{ top: 40px; font-size: 25px; letter-spacing: 0;}
#visual_section .visual_label_l{ left: 30px;}
#visual_section .visual_label_r{ right: 30px;}
#visual_section .visual_ttl{ top: 42%; font-size: 100px;}
#visual_section h4{ top: auto; bottom: 60px; padding: 0 30px; font-size: 28px; line-height: 1.7em; word-break: keep-all;}

/* 이벤트 영역 */
#event_section{ padding: 120px 20px 0;}
#event_section .ev_con{ grid-template-columns: 1fr; grid-template-rows: auto auto auto; gap: 30px 0;}
#event_section .ev_pic{ grid-column: 1; grid-row: 2;}
#event_section .ev_info{ grid-column: 1; grid-row: 3;}
#event_section .ev_pic h6{ font-size: 25px; padding: 8px 14px;}
#event_section .ev_count{ grid-column: 1; grid-row: 1; gap: 20px; margin: 0 0 10px;}
#event_section .ev_count .ev_track{ height: 4px;}
#event_section .ev_count h5{ font-size: 28px;}
#event_section .ev_count h6{ font-size: 25px;}
#event_section .ev_rows li{ grid-template-columns: 140px 1fr; padding: 30px 0;}
#event_section .ev_rows h5{ font-size: 25px;}
#event_section .ev_rows h3{ font-size: 30px;}
#event_section .ev_rows h4{ font-size: 25px;}
#event_section .ev_date{ grid-template-columns: 70px auto; font-size: 25px;}
#event_section .ev_date h6,
#event_section .ev_date h5{ font-size: 25px;}
#event_section .ev_btns{ grid-template-columns: 1fr 200px;}
#event_section .ev_btns a,
#event_section .ev_btns button{ height: 82px; line-height: 82px; font-size: 28px;}
#event_section .ev_btns button{ line-height: 80px;}
#event_section .ev_modal_con{ width: calc(100vw - 36px); max-width: calc(100vw - 36px);}
#event_section .ev_modal_con h2{ font-size: 28px; font-weight: 600;}
#event_section .ev_modal_con li{ font-size: 24px; word-break: keep-all;}
#event_section .ev_modal_close{ font-size: 60px;}

/* 에디토리얼 */
#editorial_box_section{padding: 0;}
#editorial_box_section .ed_block.crop .photo img{ aspect-ratio: 4/3; object-fit: cover; object-position: 50% 40%;}
#editorial_box_section .ed_block.trio{ grid-template-columns: 1fr; row-gap: 1.15%;}
#editorial_box_section .tip{ --nm: 26px; --pr: 25px; padding: 150px 90px 22px 22px;}
#editorial_box_section .tip.md{ --nm: 20px; --pr: 19px; padding: 105px 66px 15px 15px;}
#editorial_box_section .tip.sm{ --nm: 15px; --pr: 16px; padding: 66px 48px 11px 11px;}
#editorial_box_section .tip_btn{ --s: 46px; --a: 26px; --t: 3px; right: 22px; bottom: 18px;}
#editorial_box_section .tip_btn.md{ --s: 36px; --a: 19px; right: 15px; bottom: 11px;}
#editorial_box_section .tip_btn.sm{ --s: 26px; --a: 14px; right: 11px; bottom: 10px;}

/* 상품 영역 */
#product_section{ padding: 120px 0 0;}
#product_section .pd_head{ flex-wrap: wrap; margin: 0 0 60px;}
#product_section .pd_head h6{ font-size: 25px; align-self: baseline;} 
#product_section .pd_cats{ order: 3; flex: 0 0 100%; gap: 10px; margin: 0; top: 30px;}
#product_section .pd_cats button{ height: 56px; padding: 0 56px; border-radius: 28px; font-size: 26px;}
#product_section .pd_slide{ flex-basis: calc((100% - 8px * .2) / 1.2);}
#product_section .pd_slide h5{ margin: 20px 0 0; font-size: 28px;}
#product_section .pd_dots{ gap: 12px;}
#product_section .pd_dots i{ width: 22px; height: 22px;}
#product_section .pd_dots i.on:before{ box-shadow: 0 0 0 3px #fff, 0 0 0 5px #000;}
#product_section .pd_dots i:hover:before{ transform: none;}   /* 터치 기기 : 호버 효과 · 이름표 없음 */
#product_section .pd_dots i:after{ display: none;}
#product_section .pd_slide h4{ margin: 12px 0 0; font-size: 25px;}
#product_section .pd_bar{ margin: 36px 2.7% 0;}
#product_section .pd_arrow{ width: 80px; height: 80px; margin-top: -40px;}
#product_section .pd_arrow:before{ width: 24px; height: 24px; margin: -12px 0 0 -8px; border-width: 0 3.5px 3.5px 0;}
#product_section .pd_arrow.next:before{ margin-left: -16px;}
#product_section .pd_arrow.prev{ left: calc(2.7% + 12px);}
#product_section .pd_arrow.next{ right: calc(2.7% + 12px);}

/* 하단 링크 버튼 */
#link_section{ grid-template-columns: 1fr; gap: 14px; padding: 100px 20px;}
#link_section a{ height: 90px; line-height: 90px; font-size: 28px;}
#link_section .lk_sub{ line-height: 88px;}
}