@charset "UTF-8";

/*=========================================================
	Header
=========================================================*/
.site-header{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	z-index:1000;
	transition-property: transform, background-color;
    transition-duration: 0.3s;
	will-change:transform;
	background-color:#fff;
}

.header-container{
	max-width: 1614px;
	margin:0 auto;
	position: relative;
	padding:0 80px;
}

.header-container:after{
	content: "";
	display: table;
	clear: both;
}

.headerInfo{
	position:relative;
}

.site-header.is-Up{
	background-color:rgba(255,255,255,0.5);
	transform:translateY(-100%);
}

.admin-bar .site-header.is-Up{
	transform:translateY(-150%);
}

.site-header.is-Down{
	transform:translateY(0%);
}

/* Logo
=========================================================*/
.Logo{
	position:absolute;
	top:50%;
	left:0;
	transform:translateY(-50%);
	z-index:5;
}

.Logo-link{
	display:block;
	width:104px;
	height:44px;
	background-image:url(../../images/logo/nw_logo.svg);
	background-size:104px 44px;
}

/* Navi
=========================================================*/
@media screen and (min-width: 1025px) {
	.page-template-page-brands .site-header .OneDepth-Brand .sub-menu{
		display:none !important;
	}
	
	.page-template-page-brands .site-header .OneDepth-Brand .sub-menu.is-View{
		display:flex !important;
	}
	
	.SiteHeaderMenu{
		padding-left:160px;
	}

	.SiteHeaderMenu .menu-wrapper:after{
		content:"";
		display:table;
		clear:both;
	}

	.SiteHeaderMenu .menu-wrapper > .menu-item{
		float:left;
		margin-right:26px;
		padding:38px 0;
	}

	.SiteHeaderMenu .menu-wrapper > .menu-item:last-child{
		margin-right:0;
	}
	
	.SiteHeaderMenu .menu-item > a{
		font-size:18px;
		line-height:1.2em;
		color:#000;
		font-weight:500;
		display:block;
		position:relative;
	}
	
	.SiteHeaderMenu .menu-wrapper > .menu-item[class*="current"] > a:before{
		content:"";
		width:6px;
		height:5px;
		background-image:url(../../images/icon/ico_nav_crrent.png);
		background-size:6px 5px;
		position:absolute;
		top:0;
		right:-9px;
	}
	
	.MainSub-text{
		display:none;
	}
	
	.site-header .OneDepth-Brand .sub-menu{
		position:absolute;
		width:100vw;
		top:98px;
		left:0;
		width:100%;
		padding:38px 0 40px;
		font-size:0;
		line-height:0;
		display:flex;
		transition-property: transform;
		transition-duration: 0.35s;
		transform:translateY(-160%);
		transition-timing-function:ease-out;
		z-index:-5;
	}
	
	.site-header .OneDepth-Brand .sub-menu:before{
		content:"";
		width:100vw;
		height:100%;
		background-color:#fff;
		position:absolute;
		top:0;
		left:50%;
		transform:translateX(-50%);
		border-top:solid 1px #E0E0E0;
		box-shadow:0px 10px 10px rgba(0,0,0,0.03);
	}
	
	.site-header .OneDepth-Brand .sub-menu .menu-item{
		width:12.5%;
		display:block;
	}
	
	.MainSubImg{
		display:block;
		text-align:center;
	}
	
	.MainSubImg-img{
		display:block;
		position:relative;
	}
	
	.MainSubImg-img:after{
		content:"";
		display:block;
		padding-bottom:37%;
	}
	
	.MainSubImg-img img{
		position:absolute;
		top:50%;
		left:50%;
		transform:translate(-50%, -50%);
		width:158px;
	}
	
	.MainSubImg-text{
		display:block;
		font-size:15px;
		line-height:1.2em;
		color:#000;
		margin-top:10px;
	}
	
	.site-header .OneDepth-Brand.current_page_parent .sub-menu .menu-item a{
		opacity:0.5;
	}
	
	.site-header .OneDepth-Brand.current_page_parent .sub-menu .menu-item.current-menu-item a{
		opacity:1;
	}
	
	.SiteHeaderMenu-inner:before{
		content:"";
		width:100vw;
		position:absolute;
		top:0;
		left:50%;
		height:100%;
		transform:translateX(-50%);
		background-color:#fff;
		z-index:-1;
	}
	
	.primary-navigation .nav-Center > a{
		padding-right:25px;
	}
	
	.primary-navigation .nav-Center > a:after{
		content:"";
		width:16px;
		height:16px;
		background-image:url(../../images/icon/ico_new_window.svg);
		background-size:16px 16px;
		position:absolute;
		top:50%;
		right:0;
		transform:translateY(-50%);
	}

	/*hover*/
	header:not(.is-Up) .SubTrue:hover .sub-menu{
		transform:translateY(0);
	}
	
	.SiteHeaderMenu .sub-menu .menu-item:not(.current-menu-item) a:hover .MainSubImg-text{
		text-decoration:underline;
	}
	
	.SiteHeaderMenu .sub-menu .menu-item:not(.current-menu-item) a:hover{
		opacity:0.9;
	}
}

/* SiteFamily
=========================================================*/
.SiteFamily{
	position:absolute;
	top:50%;
	right:0;
	transform:translateY(-50%);
	width:186px;
	z-index:5;
}

.SiteFamily-bar{
	position:absolute;
	bottom:0;
	left:0;
	width:0;
	animation: SiteFamilyArrow 1s ease-in forwards;
	animation-delay:0.2s;
	overflow:hidden;
}

.SiteFamily-bar:after{
	content:"";
	width:186px;
	height:3px;
	background-image:url(../../images/bg/bg_underline.png);
	background-size:100% 3px;
	display:block;
}

@keyframes SiteFamilyArrow {
	0% {
		width:0;
	}

	100% {
		width:100%;
	}
}

.SiteFamily-text{
	padding:8px 30px 8px 0;
	display:block;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis;
	font-size:15px;
	line-height:1.4em;
	color:#000;
	font-weight:500;
	position:relative;
}

.SiteFamily-text:after{
	content:"";
	width:10px;
	height:5px;
	background-image:url(../../images/icon/ico_family-arrow.svg);
	background-size:10px 5px;
	position:absolute;
	top:50%;
	right:0;
	transform:translateY(-50%);
}

.SiteFamilySelect{
	position:absolute;
	margin-top:15px;
	padding: 20px 17px;
    background: #fff;
	left:0;
	right:0;
	display:none;
	border:2px solid #000;
}

.SiteFamilySelect-link{
	font-size:15px;
	line-height:1.4em;
	color:#000;
	display:block;
}

.is-Current .SiteFamilySelect-link{
	font-weight:500;
	font-size:20px;
}

.SiteFamilySelect-item{
	margin-top:11px;
}

.SiteFamilySelect-item:first-child{
	margin-top:0;
}

/* Mobile Menu
=========================================================*/
.MobileMenuBtn{
	width:20px;
	height:18px;
	position: absolute; 
	top:50%;
	left:0; 
	margin-top:-9px;
	z-index: 5; 
	display: none;
}
.MobileMenuBtn-line{
	display: block;
	width:100%; 
	height:2px; 
	background-color: #111111;
	position: absolute;
	left:0;
	transition-property:transform; 
	transition-duration: 0.2s; 
}

.MobileMenuBtn-line:first-child{
	top:0;
}

.MobileMenuBtn-line:nth-child(2){
	width:90%;
	top:50%;
	margin-top:-1px;
}
.MobileMenuBtn-line:nth-child(3){
	bottom:0;
}


@media screen and (max-width: 1920px) and (min-width: 1025px) {
	.header-container{
		max-width: 84.0625vw;
		padding:0 4.1666vw;
	}
	
	.Logo-link{
		width:5.4166vw;
		height:2.2916vw;
		background-size:5.4166vw 2.2916vw;
	}
	
	.SiteHeaderMenu{
		padding-left:8.3333vw;
	}

	.SiteHeaderMenu .menu-wrapper > .menu-item{
		margin-right:1.3541666vw;
		padding:1.97916vw 0;
	}

	.SiteHeaderMenu .menu-item > a{
		font-size:0.9375vw;
	}
	
	.SiteFamily{
		width:9.6875vw;
	}

	.SiteFamily-bar:after{
		width:9.6875vw;
		height:3px;
		background-size:100% 3px;
	}

	.SiteFamily-text{
		padding:0.4166vw 1.5625vw 0.4166vw 0;
		font-size:0.78125vw;
	}

	.SiteFamily-text:after{
		width:0.5208vw;
		height:0.2604vw;
		background-size:0.5208vw 0.2604vw;
	}

	.SiteFamilySelect{
		margin-top:0.78125vw;
		padding: 1.04166vw 0.88541vw;
	}

	.SiteFamilySelect-link{
		font-size:0.78125vw;
	}
	
	.is-Current .SiteFamilySelect-link{
		font-size:1.041666vw;
	}

	.SiteFamilySelect-item{
		margin-top:0.57291vw;
	}
	
	.primary-navigation .nav-Center > a{
		padding-right:1.30208vw;
	}
	
	.primary-navigation .nav-Center > a:after{
		width:0.83333vw;
		height:0.83333vw;
		background-size:0.83333vw 0.83333vw;
	}
	
	/*2뎁스*/
	.site-header .OneDepth-Brand .sub-menu{
		top:5.08281vw;
		padding:1.97916vw 0 2.0833vw;
	}
	
	.MainSubImg-img img{
		width:8.22916vw;
	}
	
	.MainSubImg-text{
		font-size:0.78125vw;
		margin-top:0.5208vw;
	}
	
	.SiteHeaderMenu .menu-wrapper > .menu-item[class*="current"] > a:before{
		width:0.3125vw;
		height:0.260416vw;
		background-size:0.3125vw 0.260416vw;
		right:-0.46875vw;
	}
}

@media screen and (max-width: 1310px) and (min-width: 1025px) {
	.SiteFamily-text{
		font-size:10px;
	}
	
	.SiteFamily-text:after{
		width:7px;
		height:4px;
		background-size:7px 4px;
	}
	
	.SiteFamilySelect-link{
		font-size:10px;
	}
	
	.SiteHeaderMenu .menu-item > a{
		font-size:12px;
	}
	
	.MainSubImg-text{
		font-size:10px;
	}
}

@media screen and (max-width: 1024px) and (min-width: 768px) {
	.site-header{
		padding:3.97916vw 0;
	}

	.header-container{
		max-width:100%;
		padding:0 5.20833vw;
	}
	
	.Logo{
		position:static;
		margin:0 auto;
		width:7.4285vw;
		transform:translateY(0);
	}
	
	.Logo-link{
		width:8.6666vw;
		height:3.66666vw;
		background-size:8.6666vw 3.66666vw;
	}
	
	.SiteFamily{
		width:14.6875vw;
	}

	.SiteFamily-bar:after{
		width:14.6875vw;
		height:3px;
		background-size:100% 3px;
	}

	.SiteFamily-text{
		padding:0.6166vw 1.7625vw 0.6166vw 0;
		font-size:1.578125vw;
	}

	.SiteFamily-text:after{
		width:1.5208vw;
		height:0.6604vw;
		background-size:1.5208vw 0.6604vw;
	}

	.SiteFamilySelect{
		margin-top:1.798125vw;
		padding: 1.953125vw 1.88541vw;
	}

	.SiteFamilySelect-link{
		font-size:1.578125vw;
	}
	
	.is-Current .SiteFamilySelect-link{
		font-size:2.041666vw;
	}

	.SiteFamilySelect-item{
		margin-top:0.8604vw;
	}
	
	.MobileMenuBtn{
		display:block;
	}
	
	.MobileMenuBtn{
		width:2.6041vw;
		height:2.34375vw;
		margin-top:-1.171875vw;
	}
}

@media screen and (max-width: 767px) and (min-width: 1px) {
	.site-header{
		padding:5.97916vw 0;
	}
	
	.site-header.is-Hidden{
		opacity:0;
		visibility:hidden;
	}

	.header-container{
		max-width:100%;
		padding:0 6.25vw;
	}
	
	.Logo{
		position:static;
		margin:0 auto;
		width:13.541vw;
		transform:translateY(0);
	}
	
	.Logo-link{
		width:13.541vw;
		height:5.7291vw;
		background-size:13.541vw 5.7291vw;
	}
	
	.SiteFamily{
		width:22.6875vw;
	}

	.SiteFamily-bar:after{
		width:22.6875vw;
		height:3px;
		background-size:100% 3px;
	}

	.SiteFamily-text{
		padding:1.6166vw 3.7625vw 1.6166vw 0;
		font-size:3.2578125vw;
	}

	.SiteFamily-text:after{
		width:3.0208vw;
		height:1.2604vw;
		background-size:3.0208vw 1.2604vw;
	}

	.SiteFamilySelect{
		margin-top:4.098125vw;
		padding: 3.38125vw 3.08541vw;
		left:auto;
		width:28vw;
	}

	.SiteFamilySelect-link{
		font-size:3.2578125vw;
	}
	
	.is-Current .SiteFamilySelect-link{
		font-size:4.141666vw;
	}

	.SiteFamilySelect-item{
		margin-top:1.5604vw;
	}
	
	.MobileMenuBtn{
		display:block;
	}
	
	.MobileMenuBtn{
		width:5.333vw;
		height:4.8vw;
		margin-top:-2.4vw;
	}
}

/*=========================================================
	Mobile Nav
=========================================================*/
.SiteHeaderMenuDim{
	display:none;
}

.SiteHeaderMenu-close{
	display:none;
}

.HeaderSns{
	display:none;
}

body .SiteHeaderMenu-back{
	display:none;
}

@media screen and (max-width: 1024px) and (min-width: 1px) {
	.MainSubImg{
		display:none;
	}
	
	.SiteHeaderMenu{
		position:absolute;
		top:-3.97916vw;
		left:-5.20833vw;
		height:100vh;
		width:50vw;
		transition-property: transform, background-color;
		transition-duration: 0.3s;
		transform:translateX(-100%);
		z-index:50;
	}
	
	.admin-bar .SiteHeaderMenu{
		height:calc(100vh - 32px);
	}
	
	.is-NavOpen .SiteHeaderMenu{
		transform:translateX(0);
	}

	.SiteHeaderMenuDim{
		display:block;
		position:absolute;
		top:0;
		left:0;
		right:0;
		height:100vh;
		background-color:rgba(0,0,0,0.45);
		opacity:0;
		visibility:hidden;
		z-index:5;
	}
	
	.is-NavOpen .SiteHeaderMenuDim{
		opacity:1;
		visibility:visible;
	}
	
	.SiteHeaderMenu .primary-navigation{
		display:flex;
		align-items:center;
		position:absolute;
		top:0;
		left:0;
		right:0;
		bottom:0;
		background-color:#fff;
		z-index:5;
	}
	
	.SiteHeaderMenu-inner{
		padding:15vw 7.1999vw;
		width:100%;
		overflow:hidden;
		overflow-y:auto;
		max-height:100vh;
		-ms-overflow-style: none;
		scrollbar-width: none; 
	}
	
	.admin-bar .SiteHeaderMenu-inner{
		max-height:calc(100vh - 32px);
	}
	
	.SiteHeaderMenu-inner::-webkit-scrollbar {
		display: none;
	}
	
	body .SiteHeaderMenu-close{
		display:block;
		width:2.6333vw;
		height:2.6333vw;
		background-image:url(../../images/icon/ico_popup_close.svg);
		background-size:2.6333vw 2.6333vw;
		position:absolute;
		top:3.97916vw;
		right:3.97916vw;
		z-index:10;
	}
	
	.SiteHeaderMenu .primary-menu-container{
		width:100%;
	}
	
	.SiteHeaderMenu .menu-wrapper{
		width:100%;
	}
	
	.SiteHeaderMenu .menu-wrapper > .menu-item{
		margin-top:1.5666vw;
	}
	
	.SiteHeaderMenu .menu-wrapper > .menu-item:first-child{
		margin-top:0;
	}
	
	.SiteHeaderMenu .menu-wrapper > .menu-item > a{
		font-size:4.8vw;
		line-height:1.2em;
		color:#000;
		font-weight:500;
		display:block;
		transition-property: opacity, visibility;
		transition-duration: 0.1s;
		opacity:1;
		visibility:visible;
	}
	
	.is-SubView.SiteHeaderMenu .menu-wrapper > .menu-item > a{
		opacity:0;
		visibility:hidden;
	}
	
	.SiteHeaderMenu .menu-wrapper > .menu-item.nav-Center{
		margin-top:3vw;
		font-size:0;
		line-height:0;
	}
	
	.SiteHeaderMenu .menu-wrapper > .menu-item.nav-Center > a{
		font-size:2.16666vw;
		text-decoration:underline;
		font-weight:normal;
		display:inline-block;
		padding-right:1.7666vw;
		position:relative;
	}
	
	.SiteHeaderMenu .menu-wrapper > .menu-item.nav-Center > a:after{
		content:"";
		width:0.5666vw;
		height:1.1333vw;
		background-image:url(../../images/icon/ico_mobile_nav_arrow.svg);
		background-size:0.5666vw 1.1333vw;
		position:absolute;
		top:50%;
		right:0;
		transform:translateY(-50%);
	}
	
	.HeaderSns{
		display:block;
		margin-top:6.3333vw;
		font-size:0;
		line-height:0;
		transition-property: opacity, visibility;
		transition-duration: 0.1s;
		opacity:1;
		visibility:visible;
	}
	
	.is-SubView.HeaderSns{
		opacity:0;
		visibility:hidden;
	}

	.HeaderSns-item{
		display:inline-block;
		vertical-align:middle;
		margin-right:1.6vw;
	}
	
	.HeaderSns-item:last-child{
		margin-right:0;
	}

	.HeaderSns-link{
		display:block;
		width:3.46666vw;
		height:3.46666vw;
		background-size:3.46666vw 3.46666vw;
	}

	.HeaderSns-link.facebook{
		background-image:url(../../images/icon/ico_ft_facebook.svg);
	}

	.HeaderSns-link.youtube{
		background-image:url(../../images/icon/ico_ft_youtube.svg);
	}

	.HeaderSns-link.blog{
		background-image:url(../../images/icon/ico_ft_blog.svg);
	}

	.HeaderSns-link.instargram{
		background-image:url(../../images/icon/ico_ft_instargram.svg);
	}
	
	
	/*2뎁스*/
	.SiteHeaderMenu .menu-wrapper > .menu-item .sub-menu{
		display:block;
		align-items:center;
		position:absolute;
		top:50%;
		left:0;
		width:100%;
		padding:12.8vw 7.1999vw 5vw;
		overflow:hidden;
		overflow-y:auto;
		max-height:100vh;
		-ms-overflow-style: none;
		scrollbar-width: none; 
		transform:translateY(-50%);
		background-color:#fff;
		z-index:50;
		transition-property: opacity, visibility;
		transition-duration: 0.1s;
		opacity:0;
		visibility:hidden;
	}
	
	.SiteHeaderMenu .menu-wrapper > .menu-item .sub-menu .menu-item{
		margin-top:1.733vw;
	}
	
	.SiteHeaderMenu .menu-wrapper > .menu-item .sub-menu .menu-item:first-child{
		margin-top:0;
	}
	
	.SiteHeaderMenu .menu-wrapper > .menu-item .sub-menu .menu-item > a{
		display:block;
	}
	
	.MainSub-text{
		display:block;
		font-size:3.2vw;
		line-height:1.2em;
		color:#000;
	}
	
	.admin-bar .SiteHeaderMenu .menu-wrapper > .menu-item .sub-menu{
		max-height:calc(100vh - 32px);
	}
	
	.SiteHeaderMenu .menu-wrapper > .menu-item .sub-menu::-webkit-scrollbar {
		display: none;
	}
	
	/*2뎁스 브랜드*/
	.site-header .OneDepth-Brand .sub-menu:before{
		content:"브랜드";
		font-size:4.8vw;
		line-height:1.2em;
		color:#000;
		font-weight:500;
		position:absolute;
		top:5vw;
		left:7.1999vw;
	}
	
	body .SiteHeaderMenu-back{
		display:block;
		width:4.5vw;
		height:5vw;
		background-image:url(../../images/icon/ico_nav_back.png);
		background-size:4.5vw 5vw;
		position:absolute;
		top:10vw;
		left:6.9999vw;
		z-index:50;
		opacity:0;
		visibility:hidden;
		transition-property: opacity, visibility;
		transition-duration: 0.1s;
	}
	
	/*Action*/
	.SiteHeaderMenu .menu-wrapper > .menu-item.is-SubView .sub-menu{
		opacity:1;
		visibility:visible;
	}
	
	body .is-SubView .SiteHeaderMenu-back{
		opacity:1;
		visibility:visible;
	}
}

@media screen and (max-width: 767px) and (min-width: 1px) {
	.SiteHeaderMenu{
		width:75vw;
		top:-5.97916vw;
		left:-6.25vw;
	}
	
	body .SiteHeaderMenu-close{
		width:5.3333vw;
		height:5.3333vw;
		background-size:5.3333vw 5.3333vw;
		top:6.066vw;
		right:5.066vw;
	}
	
	.SiteHeaderMenu .menu-wrapper > .menu-item{
		margin-top:1.0666vw;
	}
	
	.SiteHeaderMenu .menu-wrapper > .menu-item > a{
		font-size:9.6vw;
	}
	
	.SiteHeaderMenu .menu-wrapper > .menu-item.nav-Center{
		margin-top:5vw;
	}
	
	.SiteHeaderMenu .menu-wrapper > .menu-item.nav-Center > a{
		font-size:4.26666vw;
		padding-right:3.4666vw;
	}
	
	.SiteHeaderMenu .menu-wrapper > .menu-item.nav-Center > a:after{
		width:1.0666vw;
		height:2.1333vw;
		background-size:1.0666vw 2.1333vw;
	}
	
	.HeaderSns{
		margin-top:17.3333vw;
	}
	
	.HeaderSns-item{
		margin-right:3.2vw;
	}
	
	.HeaderSns-link{
		width:7.46666vw;
		height:7.46666vw;
		background-size:7.46666vw 7.46666vw;
	}
	
	.SiteHeaderMenu .menu-wrapper > .menu-item .sub-menu .menu-item{
		margin-top:3.733vw;
	}
	
	.MainSub-text{
		font-size:6.4vw;
	}
	
	/*2뎁스*/
	.SiteHeaderMenu .menu-wrapper > .menu-item .sub-menu{
		padding:25.6vw 7.1999vw 10vw;
	}
	
	/*2뎁스 브랜드*/
	.site-header .OneDepth-Brand .sub-menu:before{
		font-size:9.6vw;
		top:10vw;
		left:7.1999vw;
	}
	
	body .SiteHeaderMenu-back{
		width:9vw;
		height:10vw;
		background-size:9vw 10vw;
		top:11.1vw;
		left:6.9999vw;
	}
}

@media screen and (max-width: 782px){
	.admin-bar .SiteHeaderMenu{
		height:calc(100vh - 46px);
	}
	
	.admin-bar .SiteHeaderMenu-inner{
		max-height:calc(100vh - 46px);
	}
}