@charset "utf-8";
/* CSS Document */

/*-------------------------------------------------------------------------------------------------
1. header & gnb
-------------------------------------------------------------------------------------------------*/

.header {
    width: 100%;
/*	height: var(--logo-height);*/
	position:fixed;
	top:0px;
	left:0px;
	overflow: hidden;
	z-index: 10;
	transition: all .5s;
}

.header.active{background-color:rgba(0,0,0,0.5);}

.header.on{
	overflow: visible;
}

.header > .inner-wrap{
	display: flex;
    justify-content: space-between;
    align-items:center;
    padding: 0px var(--layout-side-margin);
	position:relative;
}

.logo2{display:none;}

.gnb-logo{padding:20px 0;}
.pc-gnb-menu > ul {
    display: flex;
	justify-content: space-between;
}


.pc-gnb-menu > ul > li{
	text-align: center;
	padding:0 40px;
	transition:all 0.3s;
	color:#fff;
	font-size: var(--font-size-medium);
	height: var(--logo-height);
	font-weight: 500;
	position:relative;
	transition:all .3s;
	display:flex;
	align-items: center;
}




.header.on .pc-gnb-menu > ul > li:nth-child(2){width:250px; text-align: center; justify-content: center;}

.pc-gnb-menu > ul > li:before{
	content:"";
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:0%;
	background-color:#605E69;
	transition: all .3s;
}

.pc-gnb-menu > ul > li > a{
	position:relative;
}

.pc-gnb-menu > ul > li > a:hover{
	color:var(--color-dark);
}


.pc-gnb-menu .sub-menu {
	position:absolute;
	top:140px;
    left:50%;
	transform: translate(-50%,0);
    text-align: center;
	font-size:var(--font-size-normal);
	font-weight: 400;
	opacity:0;
}

.pc-gnb-menu .sub-menu li {
    margin-top: 20px;
	transition: all .3s;
}
.pc-gnb-menu .sub-menu .underline{
	width:0%;
	height: 1px;
	background-color:#fff;
	margin-top:5px;
	transition:all .3s;
}

.pc-gnb-menu .sub-menu li:hover .underline{
	width:100%;
	transition:all .3s;
}

.pc-gnb-menu .sub-menu li > a{
	 position:relative;
}

.pc-gnb-menu .sub-menu li > a:hover{
	 position:relative;
	 color:#fff;
}

.pc-gnb-menu .sub-menu li:first-child {
    margin-top: 0;
}


.gnb-right ul {
    display: flex;
	gap:20px;
	align-items: center;
}

.gnb-right li {
    font-size: var(--font-size-normal);
    cursor: pointer;
	display:flex;
	align-items: center;
}


.gnb-right li:not(:first-child) > a > img{display:block; line-height: 0;}


.gnb-right .dotli{
	padding:0 10px; 
}

.gnb-right li > a:hover{
	color:var(--color-bright);
}

.askBtn{
	display:flex;
	gap:15px;
	align-items: center;
	background-color:var(--color-primary);
	border-radius: 25px;
	padding:10px 15px;
	color:var(--color-bright);
	font-size:var(--font-size-small);
}

.askBtn.red{
	background-color:#C42424;
}

.header-bg{
	position: absolute;
    left: 0%;
    top: 0px;
    width: 100%;
    height: 0px;
    background-color: rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(25px);
    z-index: -1;
    opacity: 0;
	transition: all .3s;
}

.menuBtn {width:27px; cursor: pointer; display:flex; flex-direction: column; align-items: flex-end; display:none;}
.menuBtn > .stick{width:70%; height: 1px; background-color:var(--color-bright); margin-bottom:7px;}


.menuBtn > .stick:nth-child(2){width:100%;}
.menuBtn > .stick:last-child{margin-bottom:0;}

.header.on .menuBtn > .stick{background-color:var(--color-bright);}

.header.on .sub-menu{
	opacity:1;
}
.header.on .gnb-right li{
	color:var(--color-bright);
}

.header.on .header-bg{
	 height: 540px;
	 opacity: 1;
	 transition: all .3s;
}

.header.on .pc-gnb-menu > ul > li{
	color:var(--color-bright);
	padding:0 60px;
}

.header.on .pc-gnb-menu > ul > li > a:hover{
	color:var(--color-bright);
}

.pc-gnb-menu > ul > li:hover::before {
    height: 540px;
}


#div-dot{
	fill:var(--color-dark);
}


.header.on #div-dot{
	fill:var(--color-bright);
}

.header.on .logo1{display:none;}
.header.on .logo2{display:block;}

.header.white .pc-gnb-menu > ul > li{color:var(--color-bright);}
.header.white .pc-gnb-menu > ul > li > a:hover{color:var(--color-bright);}
.header.white .menuBtn > .stick{background-color:var(--color-bright);}
.header.white #div-dot{fill:var(--color-bright);}
.header.white .gnb-right a{color:var(--color-bright);}
.header.white .logo1{display:none;}
.header.white .logo2{display:block;}

.mobile-gnb{width:100%; height: 100vh; flex-direction: column; justify-content: space-between; position:fixed; z-index: 10; top:0; left:0; background-color:#fff; opacity:0; display:none;}

.mobile-gnb .mobile-gnb-top-wrap{
	padding:0 var(--layout-side-margin);
	display:flex;
	align-items: center;
	justify-content: flex-end;
	height: 50px;
}

.mobile-gnb .mobile-gnb-menu{width:100%; padding:var(--gap-40) 0; height: calc(100vh - 136px); background-color:#fff; display:flex; overflow-y: scroll;}
.mobile-gnb .mobile-gnb-menu > ul{width:100%;}
.mobile-gnb .mobile-gnb-menu > ul > li > a{display:flex; justify-content: space-between; align-items: center; font-size:var(--font-size-xlarge); color:var(--color-dark); font-weight: 600; padding:0 var(--layout-side-margin);}
.mobile-gnb .menuToggleBtn > img{width:20px; transition: all .3s;}
.mobile-gnb .mobile-gnb-menu > ul > li.on .menuToggleBtn > img{transform:rotate(-45deg);}
.mobile-gnb .mobile-gnb-menu > ul > li{margin-bottom:var(--gap-20);}
.mobile-gnb .mobile-gnb-menu:last-child{margin-bottom:0;}
.mobile-gnb .mobile-gnb-menu ul > li.selected{color:var(--color-primary);}
.mobile-gnb .mobile-gnb-menu ul > li.selected > svg{opacity:1;}
.mobile-gnb .mobile-gnb-menu .sub-menu{width:100%; height: 0; background-color:var(--color-light-gray); margin-top:var(--gap-20); overflow: hidden;}
.mobile-gnb .mobile-gnb-menu .sub-menu > li{padding:15px; box-sizing: border-box; font-size:var(--font-size-medium); border-bottom:1px solid var(--color-border); color:var(--color-font)}
.mobile-gnb .mobile-gnb-menu .sub-menu > li:last-child{border-botton:none;}

.mobile-gnb-bottom-wrap .membership-wrap{display:flex; align-items: center;}
.mobile-gnb-bottom-wrap .membership-wrap > li {font-size:var(--font-size-normal); display:flex; align-items: center;}
.mobile-gnb-bottom-wrap .membership-wrap > .dotli{margin:0 var(--gap-10);}



.mobile-gnb-bottom-wrap{
	padding:var(--gap-20) var(--layout-side-margin);
	display:flex;
	align-items: center;
	justify-content:space-between;
	min-height: 50px;
}


@media only screen and (max-width:950px){
	.menuBtn{display:flex;}
	.pc-gnb-menu{display:none;}
	.gnb-right{display:none;}
}


/*-------------------------------------------------------------------------------------------------
2. subtop
-------------------------------------------------------------------------------------------------*/
.subtop-wrap{width:100%; height:var(--subTop-height); background-position:center; background-size: cover; position:fixed; background-color:#000; display:flex; align-items: flex-end;}
.background-image{width:100%; height: 100%; object-fit: cover; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); z-index: 0; opacity: 0.7;}
.subtop-spacer{width:100%; height:var(--subTop-height);}
.subtop-wrap .inner-wrap{width:auto; margin:0 auto var(--gap-40) auto; display:inline-block; padding:0 var(--layout-margin); box-sizing: border-box;}
.subtop-wrap .page-location{color:var(--color-bright); display:flex; align-items: center; font-size:var(--font-size-normal);  background-color: rgba(0, 0, 0, 0.4); backdrop-filter: blur(25px); margin:0 auto; padding:15px 0; border-radius: 5px;}
.subtop-wrap .page-location > li{display:flex; align-items: center; justify-content: center; min-width:200px; box-sizing: border-box; padding:0 15px;}
.subtop-wrap .page-location > li:first-child{min-width: 22px;}
.subtop-wrap .page-location > li:nth-child(even){ min-width: 1px; padding:0;}
.subtop-wrap .page-location > li:last-child{margin-right:0; position:relative; cursor:pointer;}
#pagelocation-arrow-svg{fill:var(--color-bright); margin-left:var(--gap-10); transition:all .3s; width:5px;}
#home-icon{fill:var(--color-bright);}
#slush-icon{stroke:var(--color-border);}
.subtop-wrap h1{color:var(--color-bright); font-size:var(--font-size-xxxxxlarge); font-weight: 600; margin-top:var(--gap-20); line-height: 120%; position:absolute; z-index: 1; left:50%; top:50%; text-align: center; transform: translate(-50%,-50%);}

.submenus-wrap{min-width:200px; border:1px solid var(--color-border);position:absolute; top:34px; background-color:#fff; right:0; color:var(--color-font); opacity: 0; overflow: hidden; height: 0; z-index: 2}
.submenus-wrap > li{padding:10px 15px; transition:all .3s;}
.submenus-wrap > li:hover{background-color:var(--color-light-gray);}
.submenus-wrap > li.on{background-color:var(--color-light-gray);}
.submenus-wrap > li > a:hover{color:var(--color-font);}

.subtop-wrap.white .page-location{color:var(--color-bright);}
.subtop-wrap.white #pagelocation-arrow-svg{fill:var(--color-bright); transition: all .3s;}
.subtop-wrap.white #home-icon{fill:var(--color-bright);}
.subtop-wrap.white #slush-icon{stroke:var(--color-bright);}
.subtop-wrap.white h1{color:var(--color-bright);}

.subtop-wrap .page-location > li.on .submenus-wrap{display:block;}
.subtop-wrap .page-location > li.on > #pagelocation-arrow-svg{transform:rotate(90deg);}



.page-head{width:calc(100% - var(--layout-flax-margin)); max-width:var(--layout-width); margin:var(--gap-140) auto 0 auto; display:block;}
.page-head .page-title{color:var(--color-font); font-weight:600; font-size:var(--font-size-large); margin-bottom:10px;}
.page-head .page-message{font-weight: 600; font-size:var(--font-size-xxxxxlarge);}

@media only screen and (max-width:640px){
	.subtop-wrap .page-location > li{ min-width:150px;}
	.subtop-wrap h1{color:var(--color-bright); font-size:var(--font-size-xxxlarge);}
	.page-head .page-message{font-size:var(--font-size-xxxlarge);}
}

@media only screen and (max-width:460px){
	.subtop-wrap .page-location > li{ min-width:100px;}
}