@charset "utf-8";
/* ==========================================================================
   cs_store.css — 브랜드 스토어 (cs_store.jsp)
   ========================================================================== */

/* --------------------------------------------------------------------------
   a11y / tokens
   -------------------------------------------------------------------------- */
.a11y_hidden {position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;white-space:nowrap;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);}
:root {
	--brand-font-family:var(--font-pretendard);
	--brand-red:#cf1317;
	--brand-bg-color:#fbf5f2;
	--st-slide-header-height:173px;
}

/* --------------------------------------------------------------------------
   brand_store — 공통
   -------------------------------------------------------------------------- */
#container {padding-top:0;}
.brand_store {font-family:var(--brand-font-family);background:var(--brand-bg-color);color:var(--brand-red);letter-spacing:-0.025em;}
.brand_store .w_view {display:block;}
.brand_store .m_view {display:none !important;}
.brand_store .inner {max-width:1440px;padding:0 80px;margin:0 auto;}

/* --------------------------------------------------------------------------
   brandstore_visual
   -------------------------------------------------------------------------- */
.brandstore_visual {position:relative;display:flex;justify-content:center;align-items:center;height:100vh;overflow:hidden;}
.brandstore_visual:before {mix-blend-mode:multiply;z-index:2;position:absolute;left:0;top:0;width:100%;height:100%;content:"";display:block;background:rgba(70,68,67,0.6);}
.brandstore_visual .videobox {z-index:1;position:absolute;left:0;top:0;width:100%;height:100%;}
.brandstore_visual .videobox video {position:absolute;left:50%;top:50%;transform:translate3d(-50%,-50%,0);width:150%;height:100%;object-fit:cover;background-position:50% 50%;background-size:cover;background-repeat:no-repeat;}
.brandstore_visual .videobox video.w_view {background-image:url(/resources/images/customer/store/main_vid.jpg);}
.brandstore_visual .videobox video.m_view {background-image:url(/resources/images/customer/store/main_vid_m.jpg);}
.brandstore_visual .title_box {z-index:3;position:absolute;left:0;top:0;width:100%;height:100%;padding:30px 28px;display:flex;flex-direction:column;}
.brandstore_visual .title_img {margin-top:auto;}
.brandstore_visual .title_img img {width:100%;height:auto;}

/* --------------------------------------------------------------------------
   store_introduce — ko / en / jp
   -------------------------------------------------------------------------- */
.store_introduce,
.store_introduce_en,
.store_introduce_jp {padding:84px 0;background:var(--brand-red);}
.store_introduce .cont_wrap,
.store_introduce_en .cont_wrap,
.store_introduce_jp .cont_wrap {position:relative;padding-right:105px;}
.store_introduce .cont_wrap:after,
.store_introduce_en .cont_wrap:after,
.store_introduce_jp .cont_wrap:after {position:absolute;right:0;top:0;content:"";display:block;width:103px;aspect-ratio:103/261;background:url(/resources/images/customer/store/sub_title.png) no-repeat 0 0 / 100% 100%;}
.store_introduce .introduce,
.store_introduce_en .introduce,
.store_introduce_jp .introduce {margin-top:90px;}
.store_introduce .ko {word-break:keep-all;margin-bottom:0.8em;font-size:20px;line-height:1.5;color:#fff;}
.store_introduce .en {word-break:keep-all;font-size:18px;line-height:1.55;color:#f1cdcd;}
.store_introduce .t_view,
.store_introduce_en .t_view,
.store_introduce_jp .t_view {display:none;}
.store_introduce_en .en {word-break:keep-all;margin-bottom:0.8em;font-size:20px;line-height:1.5;color:#fff;}
.store_introduce_jp .jp {word-break:keep-all;margin-bottom:0.8em;font-size:20px;line-height:1.5;color:#fff;}
.store_introduce_jp .en {word-break:keep-all;font-size:18px;line-height:1.55;color:#f1cdcd;}

/* --------------------------------------------------------------------------
   store_floor_guide
   -------------------------------------------------------------------------- */
.store_floor_guide {position:relative;padding:93px 0;background:#fbf5f2;}
.store_floor_guide:after {z-index:1;position:absolute;bottom:0;left:0;width:100%;height:504px;content:"";display:block;background:linear-gradient(180deg,rgba(251,245,242,0) 0%,rgba(249,241,237,1) 100%);mix-blend-mode:multiply;}
.store_floor_guide .title_img {margin-top:28px;}
.store_floor_guide .store_img img {max-width:100%;height:auto;display:block;margin:0 auto;}
.store_floor_guide .floor_guide,
.store_floor_guide .floor_guide_en {position:relative;z-index:2;margin-top:103px;}
.store_floor_guide .floor_guide li,
.store_floor_guide .floor_guide_en li {display:flex;flex-wrap:wrap;align-items:center;height:80px;border-top:1px solid #d8c6b8;}
.store_floor_guide .floor_guide .left,
.store_floor_guide .floor_guide_en .left {display:flex;}
.store_floor_guide .floor_guide p,
.store_floor_guide .floor_guide_en p {font-size:24px;font-weight:500;}
.store_floor_guide .floor_guide .ko {margin-right:1em;}
.store_floor_guide .floor_guide_en .en {margin-right:1em;}
.store_floor_guide .floor_guide .floor,
.store_floor_guide .floor_guide_en .floor {margin-left:auto;}

/* --------------------------------------------------------------------------
   store_slide / sl_store
   -------------------------------------------------------------------------- */
.store_slide {padding:126px 0;background:#fff;}
.sl_store .slide_header,
.sl_store .slide_header_en,
.sl_store .slide_header_jp {min-height:var(--st-slide-header-height);height:var(--st-slide-header-height);position:relative;z-index:1;}
.sl_store .slide_header .division_box,
.sl_store .slide_header_en .division_box,
.sl_store .slide_header_jp .division_box {display:flex;flex-wrap:wrap;}
.sl_store .slide_header .left,
.sl_store .slide_header_en .left,
.sl_store .slide_header_jp .left {padding:11px 0;width:auto;width:fit-content;}
.sl_store .slide_header .title_img,
.sl_store .slide_header_en .title_img,
.sl_store .slide_header_jp .title_img {height:45px;margin-bottom:16px;}
.sl_store .slide_header .slide_txt,
.sl_store .slide_header_en .slide_txt,
.sl_store .slide_header_jp .slide_txt {font-size:20px;line-height:1.5;color:#1b1b1b;word-break:keep-all;}
.sl_store .slide_header .right,
.sl_store .slide_header_en .right,
.sl_store .slide_header_jp .right {width:auto;width:fit-content;margin-left:auto;text-align:right;font-size:20px;font-weight:500;line-height:1.4;text-transform:uppercase;}
.sl_store .slide_cont {display:flex;flex-wrap:wrap;gap:calc((7 / 1280) * 100%);}
.sl_store .slide_cont img {width:100%;height:100%;object-fit:cover;}
.sl_store .slide_cont .left {width:calc((853 / 1280) * 100%);aspect-ratio:853 / 569;}
.sl_store .slide_cont .right {width:calc((420 / 1280) * 100%);display:flex;flex-wrap:wrap;aspect-ratio:420 / 569;gap:calc((6 / 569) * 100%);}
.sl_store .slide_cont .right1 {width:100%;aspect-ratio:420 / 282;}
.sl_store .slide_cont .right2 {width:100%;aspect-ratio:420 / 281;}
.sl_store .slick-arrow {position:absolute;top:calc((100% + var(--st-slide-header-height)) / 2);margin-top:-19px;right:-59px;font-size:0;line-height:0;width:38px;height:38px;border:1px solid var(--brand-red);border-radius:50%;background-repeat:no-repeat;background-position:50% 50%;background-size:calc((20.5 / 37.5) * 100%) auto;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20.5' height='22.5'%3E%3Cpath fill='none' stroke='%23cf1317' stroke-linecap='round' d='m9.326 1.291 9.569 9.548-9.569 9.549M18.65 10.92l-15.961-.053'/%3E%3C/svg%3E");}
.sl_store .slick-arrow.slick-prev {transform:rotate(180deg);right:auto;left:-59px;}

/* --------------------------------------------------------------------------
   animation
   -------------------------------------------------------------------------- */
.fade_down {will-change:transform;transform:translate3d(0,-80px,0);opacity:0;transition:opacity 0.65s,transform 0.65s;transition-delay:0.06s;}
.fade_down.on {transform:translate3d(0,0,0);opacity:1;}
.store_introduce .en.fade_down {transition-delay:0.45s;}

/* --------------------------------------------------------------------------
   responsive
   -------------------------------------------------------------------------- */
@media all and (max-width:1280px) {
	.brand_store .inner {padding:0 40px;}
	.store_introduce,
	.store_introduce_en,
	.store_introduce_jp {padding:68px 0;}
	.store_introduce .cont_wrap,
	.store_introduce_en .cont_wrap,
	.store_introduce_jp .cont_wrap {padding-right:0;}
	.store_introduce .cont_wrap:after,
	.store_introduce_en .cont_wrap:after,
	.store_introduce_jp .cont_wrap:after {width:82.4px;}
	.store_introduce .introduce,
	.store_introduce_en .introduce,
	.store_introduce_jp .introduce {margin-top:220px;}
	.store_introduce .ko,
	.store_introduce_jp .jp {font-size:16px;}
	.store_introduce .en,
	.store_introduce_en .en,
	.store_introduce_jp .en {font-size:18px;}
	.store_floor_guide:after {height:403px;}
	.store_floor_guide .title_img {margin-bottom:20px;}
	.store_floor_guide .floor_guide p,
	.store_floor_guide .floor_guide_en p {font-size:22px;}
	.sl_store .slide_header .slide_txt,
	.sl_store .slide_header_en .slide_txt,
	.sl_store .slide_header_jp .slide_txt {font-size:18px;}
	.sl_store .slick-arrow {width:32px;height:32px;}
	.sl_store .slick-arrow.slick-prev {left:-36px;}
	.sl_store .slick-arrow.slick-next {right:-36px;}
}

@media all and (max-width:1024px) {
	:root {--st-slide-header-height:150px;}
	.brand_store .inner {padding:0 20px;}
	.store_introduce,
	.store_introduce_en,
	.store_introduce_jp {padding:50px 0;}
	.store_introduce .cont_wrap:after,
	.store_introduce_en .cont_wrap:after,
	.store_introduce_jp .cont_wrap:after {width:64.2px;}
	.store_introduce .logo_box img,
	.store_introduce_en .logo_box img,
	.store_introduce_jp .logo_box img {width:85.6px;height:auto;}
	.store_introduce .introduce,
	.store_introduce_en .introduce,
	.store_introduce_jp .introduce {margin-top:142px;}
	.store_floor_guide:after {height:302px;}
	.store_floor_guide .floor_guide p,
	.store_floor_guide .floor_guide_en p {font-size:19.2px;}
	.sl_store {margin-bottom:80px;}
	.sl_store .slide_header .title_img,
	.sl_store .slide_header_en .title_img,
	.sl_store .slide_header_jp .title_img {height:45px;margin-bottom:12px;}
	.sl_store .slide_header .slide_txt,
	.sl_store .slide_header_en .slide_txt,
	.sl_store .slide_header_jp .slide_txt {font-size:16px;}
	.sl_store .slide_header .right,
	.sl_store .slide_header_en .right,
	.sl_store .slide_header_jp .right {font-size:16px;}
	.sl_store .slick-arrow {top:auto;bottom:-50px;margin:0;width:32px;height:32px;}
	.sl_store .slick-arrow.slick-prev {left:50%;margin-left:-38px;}
	.sl_store .slick-arrow.slick-next {right:50%;margin-right:-38px;}
}

@media all and (min-width:768.1px) and (max-width:1024px) {
	.store_introduce .t_view,
	.store_introduce_en .t_view,
	.store_introduce_jp .t_view {display:block !important;}
}

@media all and (max-width:768px) {
	:root {--st-slide-header-height:104px;}
	.brand_store .w_view {display:none !important;}
	.brand_store .m_view {display:block !important;}
	.brandstore_visual .title_box {padding:20px 20px 66px;}
	.store_introduce,
	.store_introduce_en,
	.store_introduce_jp {padding:42px 0;}
	.store_introduce .cont_wrap:after,
	.store_introduce_en .cont_wrap:after,
	.store_introduce_jp .cont_wrap:after {width:51.5px;}
	.store_introduce .logo_box img,
	.store_introduce_en .logo_box img,
	.store_introduce_jp .logo_box img {width:64.2px;}
	.store_introduce .ko,
	.store_introduce_jp .jp {font-size:14px;}
	.store_introduce .en,
	.store_introduce_jp .en {font-size:12.6px;}
	.store_introduce_en .en {font-size:14px;}
	.store_floor_guide {padding:45px 0;}
	.store_floor_guide:after {height:252px;}
	.store_floor_guide .title_img {margin:13px 0 25px;}
	.store_floor_guide .title_img img {width:98px;height:auto;}
	.store_floor_guide .floor_guide,
	.store_floor_guide .floor_guide_en {margin-top:42px;}
	.store_floor_guide .floor_guide li,
	.store_floor_guide .floor_guide_en li {height:auto;padding:12px 0;align-items:flex-start;}
	.store_floor_guide .floor_guide .left,
	.store_floor_guide .floor_guide_en .left {flex-direction:column;}
	.store_floor_guide .floor_guide .left p,
	.store_floor_guide .floor_guide_en .left p {width:100%;}
	.store_floor_guide .floor_guide p,
	.store_floor_guide .floor_guide_en p {font-size:13px;}
	.store_floor_guide .floor_guide .ko {font-size:14px;margin-bottom:3px;}
	.store_floor_guide .floor_guide .en {font-size:11px;font-weight:normal;}
	.store_floor_guide .floor_guide_en .en {font-size:14px;font-weight:normal;}
	.store_slide {padding:58px 0;}
	.sl_store .slide_header_en {margin-bottom:20px;}
	.sl_store .slide_header_jp {margin-bottom:30px;}
	.sl_store .slide_header .title_img,
	.sl_store .slide_header_en .title_img,
	.sl_store .slide_header_jp .title_img {height:32px;margin-bottom:10px;}
	.sl_store .slide_header .slide_txt,
	.sl_store .slide_header_en .slide_txt,
	.sl_store .slide_header_jp .slide_txt {font-size:14px;}
	.sl_store .slide_header .slide_txt br,
	.sl_store .slide_header_en .slide_txt br,
	.sl_store .slide_header_jp .slide_txt br {display:none;}
	.sl_store .slide_header .left,
	.sl_store .slide_header_en .left,
	.sl_store .slide_header_jp .left {padding:0;}
	.sl_store .slide_header .right,
	.sl_store .slide_header_en .right,
	.sl_store .slide_header_jp .right {display:none;}
	.sl_store .slide_cont {gap:calc((5 / 670) * 100vw);gap:clamp(3px,calc((5 / 670) * 100vw),6px);}
	.sl_store .slide_cont .left {width:100%;aspect-ratio:670 / 452;}
	.sl_store .slide_cont .right {width:100%;aspect-ratio:auto;gap:calc((5 / 670) * 100%);gap:clamp(3px,calc((5 / 670) * 100%),6px);}
	.sl_store .slide_cont .right1 {flex:1;width:calc((332 / 670) * 100%);aspect-ratio:332 / 232;}
	.sl_store .slide_cont .right2 {flex:1;width:calc((333 / 670) * 100%);aspect-ratio:333 / 232;}
	.sl_store .slide_1 .title_img img {width:auto;height:25px;}
	.sl_store .slide_2 .title_img img {width:auto;height:32px;}
	.sl_store .slide_3 .title_img img {width:auto;height:25px;}
	.fade_down {transform:translate3d(0,-48px,0);}
}

@media all and (max-width:480px) {
	:root {--st-slide-header-height:86px;}
	.store_introduce .logo_box img,
	.store_introduce_en .logo_box img,
	.store_introduce_jp .logo_box img {width:53.5px;}
	.store_introduce .en,
	.store_introduce_jp .en {font-size:2.6vw;font-size:clamp(8.3px,2.6vw,10px);}
	.store_introduce_en .en {font-size:2.6vw;font-size:clamp(14px,2.6vw,16px);}
	.store_floor_guide .title_img img {width:82px;}
	.store_floor_guide .floor_guide p,
	.store_floor_guide .floor_guide_en p {font-size:12px;}
	.store_floor_guide .floor_guide .ko {margin-bottom:2px;}
	.store_floor_guide .floor_guide .en,
	.store_floor_guide .floor_guide_en .en {font-size:14px;}
	.sl_store .slide_header .title_img,
	.sl_store .slide_header_en .title_img,
	.sl_store .slide_header_jp .title_img {height:20px;margin-bottom:8px;}
	.sl_store .slide_1 .title_img img {width:160px;height:20px;}
	.sl_store .slide_2 .title_img img {width:194px;height:26px;}
	.sl_store .slide_3 .title_img img {width:204px;height:20px;}
	.sl_store .slide_header .right,
	.sl_store .slide_header_en .right,
	.sl_store .slide_header_jp .right {font-size:11px;}
}

@media all and (max-width:370px) {
	:root {--st-slide-header-height:104px;}
}

@media all and (max-width:360px) {
	.store_introduce .ko br,
	.store_introduce .en br,
	.store_introduce_en .en br,
	.store_introduce_jp .jp br,
	.store_introduce_jp .en br {display:none !important;}
}