/** header **/
body > header {
	width : 100dvw;
}
body > footer {
	width : 100%;
}
body > header,body > header.fixed { position : fixed ; top : 0 ; left : 0 ; z-index : 1001 }
body > header { overflow : hidden ; transition : ease-out .1s; transform: translateY(0);}
body > header.on {
	height : 100vh;
	transform: translateY(0) !important;
}
body > header:has(aside.on) {
	height : 100vh;
}
body > header:before {
	display : block ;
	position : absolute ;
	top : 0 ;
	left : 0 ;
	content : "" ;
	width: 100% ;
	height : 100dvh ;
	background-color : #000 ;
	z-index : -100 ;
	transition : ease-out .2s ;
	opacity : 0;
}
body > header.fadeout {
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	transform: translateY(0) !important;
}
body > header.fadeout:before { opacity : .15 }
body > header > nav,
body > header.fixed > nav {
	height : 45px ;
	width : 100% ;
	position : relative ;
	border-bottom : solid 1px var(--border-gray-color) ;
	background-color : #fff;
}
body > main.story.editorial-detail.transparent-header ~ header.fixed > nav {
	background: none;
	border-bottom-color: transparent;
}
body > main.story.editorial-detail.transparent-header ~ header.fixed > nav::before {
	background-color: transparent;
}
body > header > nav:before { content : "" ; width : 100% ; height : 1px ; background-color : var(--border-gray-color) ; position: absolute ; top : 44px ; display : inline-block ; z-index: 10 }
body > header > nav h1,
main.story > section.detail > header h1 { font-size : 0 ; width : 136px ; height : 18px ; background : url('/images/logo.svg') center no-repeat ; display : inline-block ; position : absolute ; top : 17px ; left : calc( 50% - 68px ) }
body > header > nav > dl { position : absolute ; top : 18px ; font-size : 12px }
body > header > nav > dl > dt { float : left ; line-height : 16px ; height : 28px ; font-weight : var(--category-fontweight-m) ; position : relative }
body > header > nav > dl > dd { overflow : hidden ; /* transition : ease-out .2s ; height : 0 */ ; display : none ; position : fixed ; top : 45px ; left : 0 ; background : #fff ; width : 100% ; border-bottom : solid 1px var(--border-color) ; padding : 0 0 0 25% }
body > header > nav * {
  font-weight: 400;
}
body > header > nav > dl > dd .cont {
  display: grid;
  grid-template-columns: 480px auto;
}
body > header > nav > dl > dd .cont.menu-gallery {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: end;
}
body > header > nav > dl > dd .cont.link-gallery .img-banner {
  display: flex;
  align-items: flex-end;
  padding: 40px;
}
body > header > nav > dl > dd .cont.link-gallery .img-banner-inner.img-s {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 10px;
}
body > header > nav > dl > dd .cont.link-gallery .img-banner-inner.img-n {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 10px;
}
body > header > nav > dl > dd .cont.link-gallery .img-banner-inner.img-w {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
}
body > header > nav > dl > dd .cont.link-gallery .img-banner-inner.img-w .banner-cont {
  width: 65%;
}

body > header > nav > dl > dd .cont .banner-cont {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body > header > nav > dl > dd .cont.menu-gallery .banner-cont {
  height: 100%;
  padding: 63px 40px 40px;
  border-right: solid 1px var(--border-color);
}
body > header > nav > dl > dd .cont.menu-gallery .banner-cont:last-child {
  border-right: none;
}
body > header > nav > dl > dd .cont .banner-cont .cont-title {
  font-size: 12px;
  line-height: 100%;
}
body > header > nav > dl > dd .cont .banner-cont .cont-img a {
  display: flex;
}
body > header > nav > dl > dd .cont .banner-cont .cont-img > div {
  display: flex;
  width: 100%;
  aspect-ratio: 0.8;
  overflow: hidden;
}
body > header > nav > dl > dd .cont.menu-gallery .banner-cont .cont-img > div {
  aspect-ratio: 1.7;
}
body > header > nav > dl > dd .cont .banner-cont .cont-img > div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
body > header > nav > dl > dd .cont .banner-cont .cont-contents {
  font-size: 10px;
  line-height: 100%;
}

body > header > nav > dl > dt.on:before,
body > header > nav > dl > dt.mark-on:before {
  content : "";
  width : 6px;
  height : 11px;
  background-color : var(--black);
  display : inline-block;
  position : absolute;
  left : -8px;
  top : 3px;
}
body > header > nav > dl > dt.on + dd { min-height : 350px ; display : block ; z-index : 1 }
body > header > nav > dl > dd .cont { min-height : 350px }
body > header > nav dl.gnb { left : 40px }
body > header > nav dl.gnb > dt { margin-right : clamp(30px, 3.4vw, 50px) ; cursor : pointer ; position : relative }
body > header > nav dl.gnb > dd > .gallery { position : absolute ; bottom: 40px ; left : 40px ; width : 150px ; overflow : hidden }
body > header > nav dl.gnb > dd > .gallery .swiper-container { width : 150px }
body > header > nav dl.gnb > dd > .gallery .swiper-slide { display : block ; width : 150px ; height : 150px ; background-position : center ; background-size : cover }
body > header > nav dl.gnb > dd > .cont { border-left : solid 1px var(--border-color) }
body > header > nav dl.gnb > dd > .cont > ul > li {
  display : table-cell ;
}
body > header > nav dl.gnb > dd > .cont > ul > li .image { display : block ; width : 100% ; height : 160px ; background-size : cover ; background-position : center ; margin-top : 10px }
body > header > nav dl.gnb > dd > .cont > ul > li a { font-size : 11px ; line-height : 16px }
body > header > nav dl.gnb > dd > .cont > ul > li > a { font-weight: var(--category-fontweight-m); }
body > header > nav dl.gnb > dd > .cont > ul > li dl > dt { font-weight : var(--category-fontweight-m) }
body > header > nav dl.gnb > dd > .cont > ul > li dl > dd { margin-top : 20px }
body > header > nav dl.gnb > dd[data-title="콜라보레이션"] > .cont > ul > li dl > dt a,
body > header > nav dl.gnb > dd > .cont > ul > li dl > dd { font-weight : var(--category-fontweight-s) }
body > header > nav dl.gnb > dd > .cont > ul > li dl > dd a { opacity : .7 ; transition : ease-out .2s }
body > header > nav dl.gnb > dd > .cont > ul > li dl > dd a:hover { opacity : 1  }

body > header > nav dl.gnb > dd.no-gallery { padding : 0 }
body > header > nav dl.gnb > dd.no-gallery > .cont { border-left : none }
body > header > nav dl.gnb > dd > .cont > ul,
body > header > nav dl.gnb > dd.no-gallery > .cont > .link-list {
	grid-column: 2 / 3;
  width : 100%;
  min-height : 350px;
  display : flex;
  gap: 55px;
  border-left: solid 1px var(--border-color);
  padding: 40px 20px;
}
body > header > nav dl.gnb > dd.no-gallery > .cont > .link-list > .depth-2-list {
  min-width : 100px;
  display : flex;
  flex-direction: column;
  gap: 20px;
}
body > header > nav dl.gnb > dd.no-gallery > .cont > .link-list > .depth-2-list > .depth-2 {
  display: flex;
}
body > header > nav dl.gnb > dd.no-gallery > .cont > .link-list > .depth-2-list .depth-2-title {
  width: fit-content;
  display: block;
  font-weight: 500 !important;
  font-size: 12px;
  line-height: 100%;
  cursor: pointer;
}
body > header > nav dl.gnb > dd.no-gallery > .cont > .link-list > .depth-2-list > .depth-2.on .depth-2-title {
  text-decoration: underline;
}
body > header > nav dl.gnb > dd.no-gallery > .cont > .link-list .depth-3-list {
  display: flex;
  gap: 70px;
}
body > header > nav dl.gnb > dd.no-gallery > .cont > .link-list .depth-3-list > .depth-3 {
  min-width: 85px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
body > header > nav dl.gnb > dd.no-gallery > .cont > .link-list .depth-3-list .depth-3-title {
  width: fit-content;
  display: block;
  font-size: 12px;
  line-height: 100%;
}
body > header > nav dl.gnb > dd.no-gallery > .cont > .link-list .depth-4-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
body > header > nav dl.gnb > dd.no-gallery > .cont > .link-list .depth-4-list > li {
  display: block;
}
body > header > nav dl.gnb > dd.no-gallery > .cont > .link-list .depth-4-list > li > a {
  width: fit-content;
  font-size: 11px;
  line-height: 100%;
  color: #656565;
}
.row.active > a {
	text-decoration: underline;
}
body > header > nav dl.gnb > dd.no-gallery > .cont > .link-list > .depth-2-list .depth-2-title.mo {
  display: none;
}
.depth-2-title,
.depth-3-title,
.depth-4-title {
  display: flex;
  height: 14px;
}
body > header > nav dl.gnb > dd:not(.no-gallery) > .cont > ul > li .image  { display : none }

body > header > nav dl.gnb > dd[data-title="콜라보레이션"] > .cont > ul .row dl > dd,
body > header > nav dl.gnb > dd[data-title="Collaboration"] > .cont > ul .row dl > dd { display : none }
body > header > nav dl.gnb > dd[data-title="콜라보레이션"] > .cont > ul > li:last-child,
body > header > nav dl.gnb > dd[data-title="Collaboration"] > .cont > ul > li:last-child { text-align: center ; display: flex ; align-items: center }
body > header > nav dl.gnb > dd[data-title="콜라보레이션"] > .cont > ul > li:last-child a,
body > header > nav dl.gnb > dd[data-title="Collaboration"] > .cont > ul > li:last-child a { display : block ; width : 100% }

body > header > nav dl.tnb { right : 40px }
body > header > nav dl.tnb > dt a { cursor : pointer }
body > header > nav dl.tnb > dt { margin-right : clamp(20px, calc( ( 100vw - 1280px ) * 0.5 ) , 50px) }

body > header > nav dl.tnb > dt:nth-child(5).on { text-decoration : none !important }
body > header > nav dl.tnb > dt:nth-child(4) ~ dt { margin-right : 0 ; margin-top : -4px }
body > header > nav dl.tnb > dt:nth-child(4) ~ dt a { padding-right : clamp(20px, calc( ( 100vw - 1280px ) * 0.5 ) , 30px) ; position : relative ; line-height : 20px ; height : 20px }
body > header > nav dl.tnb > dt:nth-child(4) ~ dt a.on { text-decoration : underline }
body > header > nav dl.tnb > dt:nth-child(5) ~ dt a:not([data-side='language']):not([data-side='my']) { font-size : 0 }
body > header > nav dl.tnb > dt:nth-child(4) ~ dt a:before { content : "" ; vertical-align : top ; display : inline-block ; width : 20px ; height : 20px ; background-position : center ; background-repeat : no-repeat }
body > header > nav dl.tnb > dt:last-child a { padding-right : 0 !important }
body > header > nav dl.tnb > dt a[data-side='search']:before { background-image : url('/images/ico-search.svg') }
body > header > nav dl.tnb > dt a[data-side='search'].on:before { background-image : url('/images/ico-search.on.svg') }

body > header > nav dl.tnb > dt a[href$='/stockist']:before { background-image : url('/images/ico-globus.svg') }

body > header > nav dl.tnb > dt a[data-side='wishlist'],
body > header > nav dl.tnb > dt a[data-side='shoppingbag'] {
	display: flex;
	justify-content: center;
	align-items: center;
	text-decoration: none !important;
}

body > header > nav dl.tnb > dt a[data-side='wishlist']:before { background-image : url('/images/ico-favorite.svg') }
body > header > nav dl.tnb > dt a.ext[data-side='wishlist']:before { background-image : url('/images/ico-favorite.on.svg') }

body > header > nav dl.tnb > dt a[data-side='shoppingbag']:before { background-image : url('/images/ico-bag.svg') }
body > header > nav dl.tnb > dt a.ext[data-side='shoppingbag']:before { background-image : url('/images/ico-bag.on.svg') }

body > header > nav dl.tnb > dt a.ext[data-side='wishlist']:after,
body > header > nav dl.tnb > dt a.ext[data-side='shoppingbag']::after {
	position: absolute;
	content: attr(data-cnt);
	width: 20px;
	height: 20px;
	font-size: 10px;
}
body > header > nav dl.tnb > dt a.ext[data-side='wishlist']:after {
	left: 20px;
}
body > header > nav dl.tnb > dt a.ext[data-side='shoppingbag']::after {
	left: 17px;
}
/*body > header > nav dl.tnb > dt a[data-side='my']:before { background-image : url('/images/ico-my.svg') }*/

body > header > nav dl.tnb > dt a[data-side='bluemark'] { 
    text-decoration : none !important ; 
    padding-left : 14px ; 
    padding-right : 0 !important ; 
    margin-right : clamp(20px, calc( ( 100vw - 1280px ) * 0.5 ) , 30px) ; 
    color : var(--bluemark) ; 
    font-size : 11px ;
    display : block ; 
}
body > header > nav dl.tnb > dt a[data-side='bluemark']:before,
body > header > nav dl.tnb > dt a[data-side='language']:before { 
    display : none !important 
}
body > header > nav dl.tnb > dt a[data-side='bluemark'] .text {
    display : block ; 
    padding-left : 12px ;
    line-height : 20px ;
    transition : linear .15s ; 
} 
body > header > nav dl.tnb > dt a[data-side='bluemark'] > .text {
    margin-left : -14px ;
}
body > header > nav dl.tnb > dt a[data-side='bluemark'] .over { 
    display : inline-block ; 
    transition : linear .15s ; 
    overflow : hidden ; 
    width : 6px ; 
    position : absolute ; 
    top : 8px ; 
    height : 6px ; 
    left : 0 ;
    background-color : var(--bluemark)
}
body > header > nav dl.tnb > dt a[data-side='bluemark'] .over .text { 
    color : var(--white) ;
    position : absolute ; 
    top : -8px ;
}
body > header > nav dl.tnb > dt a[data-side='bluemark']:hover .over,
body > header > nav dl.tnb > dt a[data-side='bluemark'].on .over { 
    width : calc( 100% - 6px ) ; 
    height : 18px ;
    top : 1px ;
    left : 9px ;
}
body > header > nav dl.tnb > dt a[data-side='bluemark']:hover .over .text,
body > header > nav dl.tnb > dt a[data-side='bluemark'].on .over .text { 
    top : -1px ;
    padding-left : 3px ;
}

body > header > nav dl.tnb > dt a[data-side='language'] { padding : 0 2px 0 2px !important ; margin-right : clamp(18px, calc( ( 100vw - 1280px ) * 0.5 ) , 28px) } 
body > header > nav dl.tnb > dt a[data-side='language'].on { background-color : var(--black) ; color : var(--white) ; text-decoration : none !important }

/* 헤더 - 메뉴 페이드아웃 */
body > main.transparent-header:not(.bk-header) ~ header:not(.fixed):not(.fadeout) button#btn-gnb .icon > span { background-color : var(--white) }
body > main.transparent-header:not(.bk-header) ~ header:not(.fixed):not(.fadeout) button#btn-gnb .text { color : var(--white) }

body > header > nav dl.tnb #tnb-story { padding : 0 ; height : 350px }
body > header > nav dl.tnb dt.on + dd#tnb-story { display : grid ; grid-template-columns : repeat(2, minmax(0, 1fr)); }
body > header > nav dl.tnb #tnb-story > * { padding : 40px }
body > header > nav dl.tnb #tnb-story > dl { display : grid ; grid-template-columns : repeat(2, 1fr ) ; border-right : solid 1px var(--border-color) }
body > header > nav dl.tnb #tnb-story > dl:last-child { border-right : none }
body > header > nav dl.tnb #tnb-story > dl > dt { grid-column : 1 / 4 }
body > header > nav dl.tnb #tnb-story > dl > dd { position : relative }
body > header > nav dl.tnb #tnb-story > dl > dd h3 { font-size : 12px ; line-height : 16px ; padding-bottom : 10px ; font-weight : var(--category-fontweight-s) }
body > header > nav dl.tnb #tnb-story > dl > dd .image { display : block ; width : 100% ; height : 160px ; background-size : cover ; background-position : center ; background-color : var(--gray) }
body > header > nav dl.tnb #tnb-story > dl > dd a { position : absolute ; width : 100% ; left : 0 ; bottom : 0 }
body > header > nav dl.tnb #tnb-story > dl > dd small { display : block }
body > header > nav dl.tnb #tnb-story > dl > dd img { width : 100% }
body > header > nav dl.tnb #tnb-story-new { column-gap : 10px }
/* body > header > nav dl.tnb #tnb-story-new > dd:last-child:before { content : "" ; display : inline-block ; width : 1px ; height : 350px ; background-color : var(--border-color) ; position : absolute ; right : -40px ; bottom : -40px } */
body > header > nav dl.tnb #tnb-story-archive { padding : 40px 66px 40px 10px ; column-gap : 10px }

body > main.transparent-header:not(.bk-header) ~ header:not(.fixed):not(.fadeout) > nav h1 { background-image : url('/images/logo.w.svg') }

body > main.transparent-header ~ header:not(.fixed):not(.fadeout) > nav { background : none ; border-bottom-color : transparent }
body > main.transparent-header:not(.bk-header) ~ header:not(.fixed):not(.fadeout) > nav { color : var(--white) }
body > main.transparent-header:not(.bk-header) ~ header:not(.fixed):not(.fadeout) > nav dt > a { color : var(--white) }

body > main.transparent-header ~ header:not(.fixed):not(.fadeout) > nav:before { background-color : transparent }
body.fold-nav > main.transparent-header ~ header:not(.fixed):not(.fadeout) > nav:before { background-color : var(--white) }
body > main.transparent-header:not(.bk-header) ~ header:not(.fixed):not(.fadeout) > nav dl.tnb > dt a[data-side='search']:before { background-image : url('/images/ico-search.w.svg') }
body > main.transparent-header:not(.bk-header) ~ header:not(.fixed):not(.fadeout) > nav dl.tnb > dt a[href$='/stockist']:before { background-image : url('/images/ico-globus.w.svg') }
body > main.transparent-header:not(.bk-header) ~ header:not(.fixed):not(.fadeout) > nav dl.tnb > dt a[href$='/my/wishlist']:before { background-image : url('/images/ico-favorite.w.svg') }
body > main.transparent-header:not(.bk-header) ~ header:not(.fixed):not(.fadeout) > nav dl.tnb > dt a[data-side='shoppingbag']:before { background-image : url('/images/ico-bag.w.svg') }
body > main.transparent-header:not(.bk-header) ~ header:not(.fixed):not(.fadeout) > nav dl.tnb > dt a[data-side='my']:before { background-image : url('/images/ico-my.w.svg') }

/** header > notice **/
body > header > .notice { transition : ease-out .2s ; width : 100% ; height : 0 ; position : relative ; overflow : hidden ; border-bottom : solid 1px var(--border-color) ; margin-top : -1px }
body > header > .notice button { position : absolute }
body.has-headnoti > header > .notice { height : 30px ; margin-top : 0 }

/* 제품 리스트 페이지 헤더 상태 설정 */
body.scroll-down:not(.has-top-banner) > header {
	transform: translateY(-100%);
}
body.scroll-down.has-top-banner:not(.banner-visible) > header {
	transform: translateY(-100%);
}

@media only screen and (max-width: 1024px) {
  /** header **/
	body > header, body > footer { min-width: 100% }
	body > header > nav,body > header.fixed > nav { height : 45px }
	body > header > nav h1 { width : 110px ; height : 16px ; background-position : center ; background-size : contain ; top : 14px ; left : calc( 50% - 50px ) ; position : fixed ; z-index : 5 }
	body > header > nav dl.gnb { display : none ; position : static ; padding-top : 90px ; width : 100% ; margin-bottom : 15px }
	body > header > nav dl.gnb > * { float : initial }
	body > header > nav dl.gnb > dt { display : list-item ; margin-right : 0 ; height : 45px ; line-height : 44px ; border-bottom : solid 1px var(--border-color) ; padding : 0 20px }
	body > header > nav dl.gnb > dt:not(.on):before,
	body > header > nav dl.gnb > dt:after { content : "" ; display : inline-block ; position : absolute }
	/*
	body > header > nav dl.gnb > dt:after { width : 16px ; height : 10px ; background-image : url('/images/ico-gnb-fold.svg') ; top : calc( 50% - 5px ) ; right : 20px }
	body > header > nav dl.gnb > dt:not(.on):before { width : 2px ; height : 8px ; background-color : var(--black) ; top : calc( 50% - 4px ) ; right : 27px }
	*/
	body > header > nav dl.gnb > dt.on { background-color : #F8F8F8 }

	body > header > nav dl.gnb > dt:not(.on):before { right: 25px; content: '+';}
	body > header > nav dl.gnb > dt:after { right: 20px; content: '[ - ]';}
	/* body > header > nav dl.gnb > dt:before { transition : ease-out .2s } */
	body > header > nav dl.gnb > dt.on:before { left : initial ; right : calc( 100vw - 17px ) ; top : calc( 50% - 6px ) }
	body > header > nav dl.gnb > dd { position : relative ; min-height : auto ; top : 0 ; background-color : #F8F8F8 ; padding : 0 ; overflow : initial }
	body > header > nav dl.gnb > dd > .gallery { left : 20px ; bottom : 20px }
	body > header > nav dl.gnb > dd > .cont {
		grid-template-columns: unset;
		grid-template-rows: repeat(2, auto);
		border-left : none;
		min-height : auto;
	}
	body > header > nav > dl > dd .cont.menu-gallery {
		grid-template-columns: unset;
		grid-template-rows: repeat(4, minmax(0, 1fr));
	}
	body > header > nav dl.gnb > dd:not(.no-gallery) > .cont { padding-bottom : 190px }
	body > header > nav > dl > dd .cont.link-gallery .img-banner {
		grid-row: 2 / 3;
		border-right: none;
		padding: 20px;
	}
	body > header > nav > dl > dd .cont.link-gallery .img-banner.no-mo-banner {
		display: none;
	}
	body > header > nav > dl > dd .cont.menu-gallery .banner-cont {
		border-right: none;
		border-bottom: solid 1px var(--border-color);
		padding: 20px;
	}
	body > header > nav > dl > dd .cont.menu-gallery .banner-cont:last-child {
		border-bottom: none;
	}
	body > header > nav > dl > dd .cont.link-gallery .img-banner-inner.img-w .banner-cont {
		width: 100%;
	}

	body > header > nav dl.gnb > dd > .cont > ul {
		min-height: auto ;
		display: block ;
		padding: 0;
	}
  body > header > nav dl.gnb > dd > .cont .depth-3-cont {
		display: none;
	}
  body > header > nav dl.gnb > dd > .cont > ul,
  body > header > nav dl.gnb > dd.no-gallery > .cont > .link-list {
	grid-column: unset;
    min-height: unset;
    padding: 0;
    border-left: none;
  }
  body > header > nav dl.gnb > dd.no-gallery > .cont > .link-list > .depth-2-list {
    min-width: unset;
    width: 100%;
    gap: 0;
  }
  body > header > nav dl.gnb > dd.no-gallery > .cont > .link-list > .depth-2-list .depth-2-title {
    width: 100%;
  }
  body > header > nav dl.gnb > dd.no-gallery > .cont > .link-list > .depth-2-list > .depth-2 {
    border-bottom: 1px solid #EAEAEA;
  }
  body > header > nav dl.gnb > dd.no-gallery > .cont > .link-list > .depth-2-list > .depth-2.on .depth-2-title {
    text-decoration: none;
  }
  body > header > nav dl.gnb > dd.no-gallery > .cont.no-img > .link-list {
    grid-column: unset;
  }
  body > header > nav dl.gnb > dd.no-gallery > .cont > .link-list > .depth-2-list .depth-2-title {
    display: none;
  }
  body > header > nav dl.gnb > dd.no-gallery > .cont > .link-list > .depth-2-list .depth-2-title.mo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 45px;
    padding: 14px 25px 14px 20px;
  }
  body > header > nav dl.gnb > dd.no-gallery > .cont > .link-list > .depth-2-list .depth-2-title.mo .icon {
    width: 7px;
    height: 12px;
  }
	body > header > nav dl.gnb > dd > .cont > ul > li { display : list-item ; width : auto ; min-height : 45px ; padding : 0 }
	body > header > nav dl.gnb > dd > .cont > ul > li .row > dl > dt { border-bottom : solid 1px var(--border-color) ; background : url('/images/ico-gnb-right.svg') calc( 100vw - 30px ) center  no-repeat }
	body > header > nav dl.gnb > dd > .cont > ul > li .row > dl > dd { display : none }
	body > header > nav dl.gnb > dd > .cont > ul > li .row > dl > dt a { display : block ; width : 100% ; height : 44px ; line-height : 44px ; padding : 0 20px }
	body > header > nav dl.gnb > dd.no-gallery > .cont > ul { display : block }
	body > header > nav dl.gnb > dd.no-gallery > .cont > ul > li { display : list-item ; line-height : 1 ; padding : 0px ; border-left : none !important }
	body > header > nav dl.gnb > dd.no-gallery > .cont > ul > li:last-child { border-bottom : none }

	body > header > nav dl.gnb > dd > .cont > ul > li .image { height : 125px }
	body > header > nav dl.gnb > dd:not(.no-gallery) > .cont > ul > li .image { display : none }
	
	body > header > nav dl.gnb > dd[data-title="콜라보레이션"] > .cont > ul > li > .row > dl > dt { border-bottom : none ; background : none }
	body > header > nav dl.gnb > dd[data-title="콜라보레이션"] > .cont > ul > li > .row > dl > dt a { height : auto ; padding : 0 ; line-height : 1 }
	body > header > nav dl.gnb > dd[data-title="콜라보레이션"] > .cont > ul > li:last-child { padding : 0 20px }
	body > header > nav dl.gnb > dd[data-title="콜라보레이션"] > .cont > ul > li:last-child a { line-height : 45px ; text-align : left ;     background: url('/images/ico-gnb-right.svg') calc( 100vw - 50px ) center no-repeat; position : relative }

	
	body > header > nav dl.gnb > dt.on + dd:after,
	body > header > nav dl.gnb > dt.on + dd:before { content : "" ; width : 100% ; height : 1px ; display : inline-block ; background-color : var(--nav-on-border-color) ; position : absolute ; left : 0 }
	body > header > nav dl.gnb > dt.on + dd:before { top : -45px }
	body > header > nav dl.gnb > dt.on + dd:after { bottom : 0 }
	/*
	body > header > nav dl.tnb { top : inherit ; bottom : 8px ; right : 35px }
	body > header > nav dl.tnb > dt { display : none ; margin-right : 30px }
	body > header > nav dl.tnb > dt:nth-child(5),body > header > nav dl.tnb > dt:nth-child(6) { display : inline-block }
	body > header > nav dl.tnb > dt:nth-child(2) ~ dt a { }
	body > header > nav dl.tnb > dt:nth-child(2) ~ dt a:before { background-size : contain }
	*/
	
	button#btn-gnb { position : fixed ; top : 15px ; left : 20px ; width : 50px ; height : 14px ; line-height : 1em ; padding-left : 18px ; z-index : 5 }
	button#btn-gnb .icon { width : 12px ; height : 12px ; position : absolute ; left : 0 ; top : 1px; }
	button#btn-gnb .icon > span { transform-origin : center center ; position : absolute ; width : 100% ; height : 1px ; background : #000 ; left : 0 ; transition : ease-out .2s }
	button#btn-gnb .icon > span:nth-child(1) { top : 1px }
	button#btn-gnb .icon > span:nth-child(2) { top : 5px }
	button#btn-gnb .icon > span:nth-child(3) { top : 5px }
	button#btn-gnb .icon > span:nth-child(4) { bottom : 2px }
	button#btn-gnb .text { position : absolute ; top : -1px ; left : 18px ; color : var(--black) }
	button#btn-gnb .text:before { content : "menu" }

	/** header // gnb 펼치기 **/
	body.fold-nav { overflow : hidden }
	body.fold-nav button#btn-gnb .icon > span:nth-child(1),
	body.fold-nav button#btn-gnb .icon > span:nth-child(4) { width : 0 ; left : 50% }
	body.fold-nav button#btn-gnb .icon > span:nth-child(2) { transform : rotate(45deg) }
	body.fold-nav button#btn-gnb .icon > span:nth-child(3) { transform : rotate(-45deg)}
	body.fold-nav button#btn-gnb .text:before { content : "close" }
	body.fold-nav > header { background-color : var(--white) ; height : 100dvh ; overflow-y : auto }
	body.fold-nav > header > nav:before { top : 0 ; height : 45px ; background-color : var(--white) ; border-bottom : solid 1px var(--border-color) ; z-index : 4 ; position : fixed }
	body.fold-nav > header > nav { height : auto ; min-height : 100dvh }
	body.fold-nav > header > nav dl.gnb { display : block  }
	/* body.fold-nav > header > nav > dl > dt.on + dd { display : list-item ; min-height : auto } */
	/* 250430 - 제갈민혁 수정 */
	body.fold-nav > header > nav > dl > dt.on + dd { min-height : auto }
	body.fold-nav > header > nav:after { content: ""; width: 100%; height: 1px; background-color: var(--border-color); position: absolute; top: 89px; height: 1px; left : 0 ; display: inline-block; z-index: 10; }
	
	/** header // tnb **/
	dl#tnb { top : 0 ; right : 0 }
	dl#tnb > dt { display : none ; width : 100% ; height : 45px }
	dl#tnb > dt:nth-child(4) ~ dt a { padding-right : 0 }
	dl#tnb > dt:nth-child(4),
	dl#tnb > dt:nth-child(5),
	dl#tnb > dt:nth-child(7) { display : none !important }
	dl#tnb > dt:nth-child(8),
	dl#tnb > dt:nth-child(9) { position : fixed ; display : inline-block !important ; top : 15px ; right : 50px ; width : 16px ; height : 14px ; z-index : 5 }
	dl#tnb > dt:nth-child(8) a:before { width : 16px ; height : 14px }
	dl#tnb > dt:nth-child(9) { width : 10px ; right : 20px }
	dl#tnb > dt:nth-child(9) a:before { width : 10px ; height : 14px }
	dl#tnb > dt a[data-side='search'] { font-size : 12px }
	dl#tnb > dt a[data-side='search']:before { position : absolute ; left : 18px ; top : 12px }

	body.fold-nav dl#tnb { position : sticky ; top : initial ; bottom : 0 }
	body.fold-nav dl#tnb > dt { display : block }
	body.fold-nav dl#tnb > dt:nth-child(1) a,
	body.fold-nav dl#tnb > dt:nth-child(3) a,
	body.fold-nav dl#tnb > dt:nth-child(6) a { display : block ; padding-left : 20px ; line-height : 45px ; width : 100% ; height : 45px ; position : relative ; background : url('/images/ico-gnb-right.svg') calc( 100vw - 30px ) center  no-repeat }
	body.fold-nav dl#tnb > dt:nth-child(6) { margin-bottom : 15px }
	body.fold-nav dl#tnb > dt:nth-child(6) a { padding-left : 40px ; background : none }

	/** header // tnb -> aside **/
	body > header > aside > section {
		top: 47px;
		height: calc(100dvh - 47px);
		width : 100% !important;
		flex-direction: column;
	}
	body > header > aside > section.my {
		top: 45px;
		height: calc(100dvh - 45px);
	}
	body > header > aside > section article {
		width : 100vw ;
		padding : 80px 20px 20px 20px !important ;
		min-height : calc( 100vh - 46px );
	}
	body > header > aside:not(.shoppingbag) button.close {
		right : initial ;
		left:0 ;
		width : 100vw ;
		height : 45px ;
		top : 0 ;
		padding-left : 37px ;
		text-align : left ;
		background : url('/images/ico-back.svg') 20px center no-repeat ;
		border-bottom: solid 1px var(--border-color);
	}
	body > header > aside:not(.shoppingbag) button.close.KR:after { content : "뒤로가기" ; font-size : 10px }
	body > header > aside:not(.shoppingbag) button.close.EN:after { content : "Back" ; font-size : 10px }
	body > header > aside button.close:hover { transform : none }

	/** header // tnb 스토리 **/
	body > header > nav dl.tnb > dt:first-child.on + dd#tnb-story { display : block ; height : auto ; min-height : 100% ; background : var(--white) ; position : relative  }
	body > header > nav dl.tnb > dt:first-child.on + dd ~ * { display : none !important }
	body > header > nav dl.tnb #tnb-story > dl { padding : 0 ; display : block ; border-top : solid 1px var(--black) ; border-right : none }
	body > header > nav dl.tnb #tnb-story > dl > dt { line-height : 44px ; border-bottom : solid 1px var(--border-color) ; padding : 0 20px }
	body > header > nav dl.tnb #tnb-story > dl > dd a { position : static }
	body > header > nav dl.tnb #tnb-story > dl > dd .image { height : calc( ( 25 / 64 ) * ( 100vw - 40px ) ) }
	body > header > nav dl.tnb dl#tnb-story-new > dd { border-bottom : solid 1px var(--border-color) ; padding : 20px }
	body > header > nav dl.tnb dl#tnb-story-new > dd:last-child:before { display : none }
	body > header > nav dl.tnb dl#tnb-story-archive { padding : 0 20px 20px 20px ; display : inline-block ; width : 100% }
	body > header > nav dl.tnb dl#tnb-story-archive > dt { width : calc( 100% + 40px ) ; margin-left : -20px ; margin-bottom : 20px }
	body > header > nav dl.tnb dl#tnb-story-archive > dd { width : calc( ( ( 100% - 20px ) / 3 ) ) ; height: 150px ; float : left ; padding-bottom : 24px }
	body > header > nav dl.tnb dl#tnb-story-archive > dd ~ dd { margin-left : 10px }
	body > header > nav dl.tnb dl#tnb-story-archive > dd h3 { position : absolute ; left : 0 ; bottom : 0 ; padding-bottom : 0 }
	body > header > nav dl.tnb dl#tnb-story-archive > dd .image { height : calc( ( ( 100vw - 60px ) / 3 ) * ( 5 / 4 ) ) }

	body > header > aside.story > section.story {
		transform: translateX(0);
	}
	body > header > aside > section.story > article { padding : 44px 0 44px 0 !important }
	body > header > aside > section.story > article > dl { padding : 0 ; display : block ; border-top : solid 1px var(--black) ; border-right : none }
	body > header > aside > section.story > article > dl > dt { line-height : 44px ; border-bottom : solid 1px var(--border-color) ; padding : 0 20px }
	body > header > aside > section.story > article > dl > dd small { display : block }
	body > header > aside > section.story > article > dl > dd .image { width : 100% ; height : calc( ( 25 / 64 ) * ( 100vw - 40px ) ) ; background-position : center ; background-size : cover ; display : block }
	body > header > aside > section.story > article dl#tnb-story-new-m { position : relative ; z-index : 2 }
	body > header > aside > section.story > article dl#tnb-story-new-m > dd { border-bottom : solid 1px var(--border-color) ; padding : 20px }
	body > header > aside > section.story > article dl#tnb-story-new-m > dd:last-child:before { display : none }
	body > header > aside > section.story > article dl#tnb-story-new-m > dd .image { margin-top : 10px }
	body > header > aside > section.story > article dl#tnb-story-archive-m { padding : 0 20px 20px 20px ; display : inline-block ; width : 100% }
	body > header > aside > section.story > article dl#tnb-story-archive-m > dt { width : calc( 100% + 40px ) ; margin-left : -20px ; margin-bottom : 20px }
	/* 250507 원본 */
  	/*
	body > header > aside > section.story > article dl#tnb-story-archive-m > dd { width : calc( ( ( 100% - 20px ) / 3 ) ) ; height: calc( ( ( 100vw - 60px ) / 3 ) * ( 5 / 4 ) + 24px ) ; float : left ; padding-bottom : 24px ; position : relative }
	body > header > aside > section.story > article dl#tnb-story-archive-m > dd ~ dd { margin-left : 10px }
	body > header > aside > section.story > article dl#tnb-story-archive-m > dd h3 { position : absolute ; left : 0 ; bottom : 0 ; padding-bottom : 0 }
	body > header > aside > section.story > article dl#tnb-story-archive-m > dd .image { height : calc( ( ( 100vw - 60px ) / 3 ) * ( 5 / 4 ) ) ; background-color : var(--border-color) }
	*/

	/* - 250507 제갈민혁 수정본 - */
	body > header > aside > section.story > article dl#tnb-story-archive-m {
		padding: 0;
	}
	body > header > aside > section.story > article dl#tnb-story-archive-m > dt { width: 100%; margin: 0; padding : 0 20px; }
	body > header > aside > section.story > article dl#tnb-story-archive-m > dd {
		box-sizing: border-box;
		border-bottom: solid 1px var(--border-color);
		padding: 20px;
		width: 100%;
	}
	body > header > aside > section.story > article dl#tnb-story-archive-m > dd .image {
		width: 100%;
		height: calc((25 / 64) * (100vw - 40px));
		background-position: center;
		background-size: cover;
		display: block;
		margin-top: 10px;
	}
	/* - 제갈민혁 수정본 끝 - */

	/** header // tnb 쇼핑백 **/
	body > header > aside > section.shoppingbag {
		height: 100dvh;
		top: 0;
	}
	body > header > aside.shoppingbag button.close { top : 17px ; right : 20px }
	body > header > aside > section.shoppingbag article { padding : 0 !important }
	body > header > aside > section.shoppingbag article h2 { height : 45px ; line-height : 44px ; padding : 0 0 0 34px ; background-position : 20px center }
	body > header > aside > section.shoppingbag article dl.cart > dt,
	body > header > aside > section.shoppingbag article footer dl > * { padding : 0 20px }
	body > header > aside > section.shoppingbag article dl.cart > dd ul > li label.check,
	body > header > aside > section.shoppingbag article dl.cart > dd ul > li .total-price { right : 20px }
	body > header > aside > section.shoppingbag article .info-box { padding : 0 20px 56px 20px }
	body > header > aside > section.shoppingbag article .no-login > .join { border-top : solid 1px var(--border-gray-color) ; margin-top : 50px }
	body > header > aside > section.shoppingbag article .no-login > .join p { padding-top : 40px }
	
	/** header // tnb search **/
	body > header > aside.search.on,
	body > header > aside.search.on > section.search {
		padding-top : 0;
	}
	body > header > aside.search > section.search {
		padding-bottom: 0;
	}
	body > header > aside.search > section.search > article { padding: 95px 20px 20px 20px !important; }
	body > header > aside.search > section.search > article .result { padding-bottom: 100px; }
	body > header > aside.search > section.search h2 ~ h2 { margin-top : 50px ; margin-bottom : 20px }
	body > header > aside.search > section.search ul { margin : 0 }
	body > header > aside.search > section.search ul.hot { grid-template-columns: repeat(3, 1fr) }
	body > header > aside.search > section.search ul.hot > li { margin : 0 }
	body > header > aside.search > section.search ul.hot > li a { padding-top : 160% ; height : auto }
	body > header > aside.search > section.search ul.hot > li a .name { display : block ; position : absolute ; width : 100% ; height : 28px ; bottom : 0 ; left : 0 }
	body > header > aside.search > section.search ul.hot > li a .name .cont {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		display: inline-block;
		width: 100%;
		vertical-align: bottom;
	}

	/** header // tnb 하단 버튼 **/
	ul.tnb-mobile { display : none !important  }
	body.fold-nav ul.tnb-mobile { display : grid !important ; grid-template-columns : repeat(2,1fr) ; grid-template-rows : repeat(2,45px) ; width : 100% ; position : sticky ; top : calc( 100% - 90px ) }
	ul.tnb-mobile > li { border-top : solid 1px var(--border-color) ; border-right : solid 1px var(--border-color) }
	ul.tnb-mobile > li:nth-child(2n) { border-right : none }
	ul.tnb-mobile > li a { display : block ; width : 100% ; height : 44px ; line-height : 44px ; padding-left : 44px ; position : relative }
	ul.tnb-mobile > li a.my { background : url('/images/ico-tnb-login.svg') 20px center no-repeat }
	body:not(.loged) ul.tnb-mobile > li a.my[href="/my"],
	body.loged ul.tnb-mobile > li a.my[href="/login"] { display : none }
	ul.tnb-mobile > li a.customer { background : url('/images/ico-tnb-customer.svg') 20px center no-repeat }
	ul.tnb-mobile > li a.language:before { content : "KR" ; display : inline-block ; position : absolute ; left : 20px ; height : 44px ; top : 0 }
	html[lang='en'] ul.tnb-mobile > li a.language:before { content : "EN" }
	html[lang='cn'] ul.tnb-mobile > li a.language:before { content : "CN" }
	ul.tnb-mobile > li a.bluemark { color : var(--bluemark) }
	ul.tnb-mobile > li a.bluemark:before { content : "" ; display : inline-block ; position : absolute ; left : 23px ; width : 6px ; height : 6px ; top : 19px ; background-color : var(--bluemark) }
	
	body.fold-nav nav:has(.gnb > dt.on) > .gnb > dt:not(.on),
	body.fold-nav nav:has(.gnb > dt.on) > .gnb > dt:not(.on) + dd,
	body.fold-nav nav:has(.gnb > dt.on) > .tnb,
	body.fold-nav nav:has(.gnb > dt.on) > .tnb-mobile { opacity : .3 }
}