@charset "UTF-8"; 

body {background-color: var(--color-white);}

/*SKIP NAVI*/
#skipNavi li { font-size:0; line-height:0; z-index:99999999999;}
#skipNavi li a { display:block; width:100%; padding:10px 0; color:#fff; position:absolute; left:0; top:-100px; text-align:center; z-index:200; background:#413022; border:0 none; z-index:99999999999;}
#skipNavi li a:active, #skipNavi li a:focus { top:0; font-weight:bold;font-size:16px;line-height:1.5; border-bottom:1px solid #fff; z-index:99999999999;}


._wt_size01 {
	flex: 1;
	width: calc(475 / 1920 * 100%);
}
._wt_size02 {
	min-width: 500px;
	width: calc(600 / 1920 * 100%);
}
._wt_size03 {
	min-width: 200px;
	width: calc(300 / 1920 * 100%);
}
._wt_size04 {
	min-width: 300px;
	width: calc(545 / 1920 * 100%);
}
._wt_size05 {
	min-width: 541px;
	width: calc(845 / 1920 * 100%);
}
._wt_size06 {
	min-width: 700px;
	width: calc(900 / 1920 * 100%);
}


/* header */
#header {
	display: flex;
	flex-wrap: wrap;
	position: sticky;
	top: 0;
	z-index: 5000;
	width: 100%;
	min-width: var(--window-min-width);
	height: 65px;
	background-color: var(--color-white);
	border-bottom: 5px solid var(--color-default);
	box-sizing: border-box;
}
#header .logo {
	display: block;
	width: 110px;
	height: 60px;
}
#header .logo a {
	display: block;
	height: 60px;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: var(--logo-bk);
	background-size: 70px;
	font-size: 0;
}
#header > div {
	display: flex;
	flex-wrap: wrap;
	align-items: center;	
}

#header .util-box {
	display: flex;
	flex-wrap: wrap;
	margin: 0 5px 0 auto;
}
#header .util-box > div > a,
#header .util-box > div > button {
	display: block;
	position: relative;
	top: 0;
	left: 0;
	height: 40px;
	background-repeat: no-repeat;
	background-position: center center;	
	font-size: 0;
}
#header .util-box .search__btn {
	width: 50px;
	background-image: var(--ico-search-bk);
}
#header .util-box .account__btn {
	width: 54px;
	background-image: var(--ico-account-bk);
}
#header .util-box .cart__btn {
	width: 50px;
	background-image: var(--ico-cart-bk);
}
#header .util-box .cart__btn:before {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 1px;
	right: 5px;
	width: 20px;
	height: 20px;
	background-color: var(--color-default);
	border-radius: 50%;
	content: attr(data-num);
	font-family: var(--fontfam-eng-nhgt), var(--fontfam-kor), sans-serif;
	font-weight: 700;
	font-size: 11px;
	color: var(--color-white);
	text-align: center;
}


.gnb {margin-left: -15px;}
.gnb > ul {
	display: flex;
	flex-wrap: wrap;
}
.brand-header .gnb > ul {flex-wrap: nowrap;}
.gnb > ul > li {
	margin-top: 10px;
	padding-bottom: 9px;
}
.gnb > ul > li > a {
	display: block;
	padding: 10px 15px;
	font-family: var(--fontfam-eng-nhgt), var(--fontfam-kor), sans-serif;
	font-weight: 700;
	font-size: 14px;
	color: var(--color-default);
}
.brand-header .gnb > ul > li > a {white-space: nowrap;}


.gnb .depth-wrap .depth-bg {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: calc(100vh - 60px);	
	background-color: rgba(0,0,0,0.1);
	backdrop-filter: blur(40px);
	pointer-events: none;

	visibility: hidden;
	opacity: 0;
	transition: all 0.3s;
}
.gnb > ul > li:hover .depth-wrap .depth-bg {
	visibility: visible;
	opacity: 1;
}
.gnb .depth-wrap .depth2-box {	
	display: flex;
	position: absolute;
	top: 100%;
	left: 50%;
	min-width: var(--window-min-width);		
	width: 100%;
	background-color: var(--color-default);
	transform: translateX(-50%);
	box-sizing: border-box;

	visibility: hidden;
	opacity: 0;
	
}
.gnb > ul > li:hover .depth-wrap .depth2-box {	
	visibility: visible;
	opacity: 1;

	transition: all 0.3s;
}
.search__layer .dep1-tit,
.gnb .depth-wrap .depth2-box .dep1-tit {
	padding: 40px;
	font-family: var(--fontfam-eng-nhgt), var(--fontfam-kor), sans-serif;
	font-weight: 500;
	font-size: 20px;
	color: rgba(255,255,255,0.5);
}

.gnb .depth-wrap .depth2-box ul {padding: 25px 40px 40px 0;}
.gnb .depth-wrap .depth2-box ul li a {
	display: flex;
	align-items: center;
	height: 55px;
	border-bottom: 1px solid rgba(255,255,255,0.5);
	font-family: var(--fontfam-eng-nhgt), var(--fontfam-kor), sans-serif;
	font-weight: 500;
	font-size: 20px;
	color: rgba(255,255,255,0.5);
}
.gnb .depth-wrap .depth2-box ul li.on a,
.gnb .depth-wrap .depth2-box ul li:hover a {
	border-bottom-color: rgba(255,255,255,1);
	color: rgba(255,255,255,1);
}

.gnb .depth-wrap .depth2-box .img-banner-box {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}
.gnb .depth-wrap .depth2-box .img-banner-box._wide {
	width: calc(100% - 40px);
	margin-right: 40px;
}



.gnb .depth-wrap .depth2-box .img-banner-box .btn-box {
	display: flex;
	flex-wrap: wrap;
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
}
.gnb .depth-wrap .depth2-box .img-banner-box .btn-box a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 50px;
	padding: 0 20px;
	box-sizing: border-box;
	background-color: var(--color-default);
	font-family: var(--fontfam-eng-nhgt), var(--fontfam-kor), sans-serif;
	font-weight: 700;
	font-size: 16px;
	color: var(--color-white);
	text-align: center;
}
.gnb .depth-wrap .depth2-box .img-banner-box._wide .btn-box a {justify-content: flex-end;}
.gnb .depth-wrap .depth2-box .img-banner-box._wide .btn-box a:nth-child(1) {
	flex: 1;
	width: calc(455 / 995 * 100%);
	margin-right: 20px;
}
.gnb .depth-wrap .depth2-box .img-banner-box._wide .btn-box a:nth-child(2) {
	width: calc(540 / 995 * 100%);
	min-width: auto;
}


.gnb .depth-wrap .depth2-box .img-banner-box .banner-group {
	visibility: hidden;
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	transition: opacity 1.5s;
	pointer-events: none;
}
.gnb > ul > li:hover > .depth-wrap .depth2-box .img-banner-box .banner-group.open {
	visibility: visible;
	opacity: 1;
}
.gnb .depth-wrap .depth2-box .img-banner-box .banner-group:not(:first-child) {position: absolute;}
.gnb .depth-wrap .depth2-box .img-banner-box .banner-group .btn-box a {
	opacity: 0;
	transform: translateX(30px);
	transition: all 0.5s;
	pointer-events: none;
}
.gnb > ul > li:hover > .depth-wrap .depth2-box .img-banner-box .banner-group .btn-box a {pointer-events: auto;}
.gnb .depth-wrap .depth2-box .img-banner-box .banner-group.open .btn-box a {
	opacity: 1;
  transform: translateX(0px);
}
.gnb .depth-wrap .depth2-box .img-banner-box .banner-group.open .btn-box a:nth-child(1) {transition-delay: 0.2s;}
.gnb .depth-wrap .depth2-box .img-banner-box .banner-group.open .btn-box a:nth-child(2) {transition-delay: 0.5s;}
.gnb .depth-wrap .depth2-box .img-banner-box .banner-group .btn-box a span {
	opacity: 0;
	transition: all 0.5s;
}
.gnb .depth-wrap .depth2-box .img-banner-box .banner-group.open .btn-box a span {opacity: 1;}
.gnb .depth-wrap .depth2-box .img-banner-box .banner-group.open .btn-box a:nth-child(1) span {transition-delay: 0.4s;}
.gnb .depth-wrap .depth2-box .img-banner-box .banner-group.open .btn-box a:nth-child(2) span {transition-delay: 0.7s;}


.gnb .depth-wrap .depth2-box .img-banner-box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}



.search--open #header,
.search--open #header .logo {z-index: 5500;}
.search--open #header .logo a {background-image: var(--logo-wt);}


.search__layer .serach-bg {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 5000;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.1);
	backdrop-filter: blur(40px);

	visibility: hidden;
	opacity: 0;
	transition: all 0.3s;
}
.search--open .search__layer .serach-bg {
	visibility: visible;
	opacity: 1;
}
.search__layer .search-con-wrap {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 5000;
	width: 100%;
	min-height: 560px;
	min-width: var(--window-min-width);
	padding: 65px 0;
	background-color: var(--color-default);
	box-sizing: border-box;
	
	visibility: hidden;
	opacity: 0;
	transition: all 0.3s;
}
.search--open .search__layer .search-con-wrap {
	visibility: visible;
	opacity: 1;
}
.search__layer .search-close__btn {
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 60px;
	height: 60px;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: var(--ico-x-wt);
	font-size: 0;
}
.search__layer .search-con-wrap .inner {
	display: flex;
	flex-wrap: wrap;	
}
.search__layer .search-inp-box {
	display: flex;
	flex-wrap: wrap;
	margin: 29px 85px 0 0;
	border-bottom: 1px solid var(--color-white);
}
.search__layer .search-inp-box input {
	display: block;
	width: calc(100% - 23px);
	height: 54px;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	outline: 0;
	font-weight: 400;
	font-size: 20px;
	color: var(--color-white);
}
.search__layer .search-inp-box input::placeholder {color: rgba(255,255,255,0.5);}
#header .util-box .search__layer .search-inp-box .search__btn {
	display: block;
	width: 23px;
	height: 54px;
	background-repeat: no-repeat;
	background-position: center center;
	background-image: var(--ico-search-wt);
	font-size: 0;
}
.search__layer .keywords-box {margin: 42px 20px 0 0;}
.search__layer .search-inp-box + .keywords-box {margin: 30px 85px 0 0;}
.search__layer form + .keywords-box {margin: 30px 85px 0 0;}
.search__layer .keywords-box div {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.search__layer .keywords-box .keywords-tit {
	font-weight: 700;
	font-size: 18px;
	color: var(--color-white);
}
.search__layer .keywords-box .all-delete__btn {
	font-weight: 400;
	font-size: 14px;
	color: var(--color-white);
	text-decoration: underline;
}
.search__layer .keywords-box ul {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-top: 20px;
}
.search__layer .keywords-box ul li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	top: 0;
	left: 0;
}
.search__layer .keywords-box ul li a {
	overflow: hidden;
	width: calc(100% - 20px);
	font-weight: 400;
	font-size: 14px;
	color: rgba(255,255,255,0.7);
	line-height: 16px;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.search__layer .keywords-box ul li .delete__btn {
	display: block;
	width: 16px;
	height: 16px;
	background-color: rgba(255,255,255,0.7);
	background-repeat: no-repeat;
	background-position: center center;
	background-image: var(--ico-x-bk);
	background-size: 8px;
	border-radius: 50%;
	font-size: 0;
}
.search__layer .keywords-box._rank ul {counter-reset: rank;}
.search__layer .keywords-box._rank ul li {padding-left: 26px;}
.search__layer .keywords-box._rank ul li:before {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	counter-increment: rank;
	content: counter(rank);
	font-weight: 400;
	font-size: 14px;
	color: rgba(255,255,255,0.7);
}
/* //header */


/* footer */
#footer {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	position: relative;
	top: 0;
	left: 0;
	z-index: 5000;
	width: 100%;
	min-width: var(--window-min-width);
	padding-bottom: 40px;
	background-color: rgb(17,17,17);
	box-sizing: border-box;
}
#footer .brand-name {
	display: inline-block;
	vertical-align: top;
	padding: 45px 20px;
	font-family: var(--fontfam-eng-nhgt), var(--fontfam-kor), sans-serif;
	font-weight: 700;
	font-size: 16px;
	color: var(--color-white);
}
#footer .cs-menu-box {margin-top: 47px;}
#footer .cs-menu-box ul {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}
#footer .cs-menu-box ul li a {
	display: block;
	font-weight: 700;
	font-size: 15px;
	color: var(--color-white);
}
#footer .company-info {margin-top: 35px;}
#footer .company-info p {
	font-weight: 400;
	font-size: 14px;
	color: rgba(255,255,255,0.5);
	line-height: 22px;
}
#footer .company-info p + p {margin-top: 25px;}
#footer .copyright {
	margin-top: 35px;
	font-family: var(--fontfam-eng-nhgt), var(--fontfam-kor), sans-serif;
	font-weight: 400;
	font-size: 12px;
	color: rgba(255,255,255,0.5);
}
#footer ._wt_size04 {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 30px;
	padding: 40px 20px 0 0;
	box-sizing: border-box;
}
#footer .sns-box {
	display: flex;
	gap: 30px;
}
#footer .sns-box a {
	display: block;
	width: 24px;
	height: 24px;
	background-repeat: no-repeat;
	background-position: center center;
	font-size: 0;
}
#footer .sns-box .sns__instagram {background-image: var(--ico-instagram-wt);}
#footer .sns-box .sns__youtube {background-image: var(--ico-youtube-wt);}
#footer .familysite select {
	width: 300px;
	height: 30px;
	margin: 0;
	padding: 0 40px 0 10px;
	background: none;
	background-repeat: no-repeat;
	background-position: calc(100% - 10px) center;
	background-image: var(--arr-down-wt);
	border: 1px solid rgba(255,255,255,0.1);
	box-sizing: border-box;
	outline: 0;
	cursor: pointer;
	appearance: none;
	font-family: var(--fontfam-eng-degular), var(--fontfam-kor), sans-serif;
	font-weight: 500;
	font-size: 12px;
	color: var(--color-white);
}
#footer .familysite option {background-color: var(--color-default);}
/* //footer */


/* contents */
#contents {min-height: calc(100vh - 354px);}
/* //contents */


/* loading */
.loading img,
#paging img {display: none;}
.loading,
#paging {
	display: block;
  width: 5%;
	max-width: 45px;
	margin: 50px auto;
  aspect-ratio: 1;
  --c: no-repeat linear-gradient(#000 0 0);
  background: 
    var(--c) 0%   50%,
    var(--c) 50%  50%,
    var(--c) 100% 50%;
  background-size: 20% 100%;
  animation: l1 1s infinite linear;
}
.loading._type_wt,
#paging._type_wt {--c: no-repeat linear-gradient(#fff 0 0);}
@keyframes l1 {
  0%  {background-size: 20% 100%,20% 100%,20% 100%}
  33% {background-size: 20% 10% ,20% 100%,20% 100%}
  50% {background-size: 20% 100%,20% 10% ,20% 100%}
  66% {background-size: 20% 100%,20% 100%,20% 10% }
  100%{background-size: 20% 100%,20% 100%,20% 100%}
}
/* //loading */



@media screen and (max-width: 1700px){
	.gnb > ul > li > a {font-size: 12px;}
}