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

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

.header {
    width: 100%;
	height: var(--logo-height);
	position:fixed;
	top:0px;
	left:0px;
	background-color:#fff;
	border-bottom:1px solid #d6d6d6;
	z-index: 10;
}

.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;}
.gnb-menu > ul {
    display: flex;
	justify-content: space-between;
}


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



.gnb-menu > ul > li > a:after{
	position:absolute;
	left:50%;
	top:60px;
	transform: translate(-50%,0);
	content:"";
	width:0%;
	height: 1px;
	background-color:var(--color-secondary);
	opacity:0;
	transition: all .3s;
}


.gnb-menu > ul > li:before{
	content:"";
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:0%;
	background-color:var(--color-top-bg);
	transition: all .3s;
}

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

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


.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;
}

.sub-menu li {
    margin-top: 20px;
	transition: all .3s;
	position:relative;
}
.sub-menu li:before{
	content: "";
    position: absolute;
    left: 0%;
    bottom: -2px;
    transform: translate(0%, 100%);
    width: 0%;
    height: 1px;
    background-color: #fff;
    transition: width .3s;
}

.sub-menu li:hover:before{
	content: "";
    position: absolute;
    left: 0%;
    bottom: -2px;
    transform: translate(0%, 100%);
    width: 100%;
    height: 1px;
    background-color: #fff;
    transition: width .3s;
}

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

.sub-menu li > a:hover{
	 position:relative;
	 color:var(--color-bright);
}


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


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

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

.gnb-right li:first-child{
	margin-right:15px;
}

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

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

.askBtn{
	display:block;
	background-color:var(--color-primary);
	border-radius: 25px;
	padding:10px 20px;
	color:var(--color-bright);
	font-size:var(--font-size-small);
}

.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-dark); 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: var(--subTop-height);
	 opacity: 1;
	 transition: all .3s;
}

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

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

.gnb-menu > ul > li:hover::before {
    height: var(--subTop-height);
}

/*
.gnb-menu > ul > li:hover > a:after{
	width:100%;
	opacity:1;
	transition: all .3s;
}
*/

#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 .gnb-menu > ul > li{color:var(--color-bright);}
.header.white .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; 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);
	border-bottom:1px solid var(--color-border);
	display:flex;
	align-items: center;
	justify-content: flex-end;
	height: 50px;
}
.mobile-gnb .gnb-wrap{display:flex;}
.mobile-gnb .gnb-wrap .main-gnb-wrap{width:60%; padding:var(--layout-side-margin); height: calc(100vh - 100px); background-color:#fff;}
.mobile-gnb .gnb-wrap .main-gnb-wrap > li{font-size:var(--font-size-xlarge); color:var(--color-dark); margin-bottom:var(--gap-40);}
.mobile-gnb .gnb-wrap .main-gnb-wrap:last-child{margin-bottom:0;}
.mobile-gnb .gnb-wrap .main-gnb-wrap  > li  svg{margin-left:20px; opacity:0; transition:all .3s;}
.mobile-gnb .gnb-wrap .main-gnb-wrap  > li  svg > path{fill:var(--color-primary);}
.mobile-gnb .gnb-wrap .main-gnb-wrap > li.selected{color:var(--color-primary);}
.mobile-gnb .gnb-wrap .main-gnb-wrap > li.selected > svg{opacity:1;}
.mobile-gnb .gnb-wrap .sub-gnb-wrap{width:40%; padding:var(--layout-side-margin); background-color:var(--color-top-bg);}
.mobile-gnb .gnb-wrap .sub-gnb-wrap > li{font-size:var(--font-size-medium); color:var(--color-bright); margin-bottom:var(--gap-40); display: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);}


.myinfo-wrap{position:relative;}
.myinfo-wrap > .inner-wrap{display:flex; align-items: center;}
.myinfo-wrap .inner-wrap > svg > path{fill:#838383;}
.header.on .myinfo-wrap .inner-wrap > svg > path{fill:#fff;}
.myinfo-wrap > .inner-wrap > .image-wrap{width:42px; height: 42px; border-radius: 50%; boder:1px solid #d6d6d6; overflow:hidden;}
.myinfo-wrap > .inner-wrap > .image-wrap > img{width:100%; height: 100%; object-fit: cover; object-position: center;}
.myinfo-wrap > .inner-wrap >  p{margin:0 10px; color:var(--color-font); font-size:var(--font-size-normal);  max-width: 100px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* 말줄임표(...) 표시 */}
.header.on .myinfo-wrap > .inner-wrap >  p{color:#fff;}
.myinfo-wrap .info-menu-wrap{position:absolute; background-color:#fff; z-index: 10; border-radius: 10px; border:1px solid var(--color-border); width:160px; display:none; top:60px;}
.myinfo-wrap .info-menu-wrap > li{border-bottom:1px solid var(--color-border); padding:15px; box-sizing: border-box;}
.myinfo-wrap .info-menu-wrap > li > a{display:flex; align-items: center;}
.myinfo-wrap .info-menu-wrap > li p{color:var(--color-font); font-size:var(--font-size-normal);}
.myinfo-wrap .info-menu-wrap > li img{margin-right:10px;}
.myinfo-wrap .info-menu-wrap > li:last-child{border-bottom:none;}
.myinfo-wrap.on .info-menu-wrap{display:block;}
.myinfo-wrap.on .inner-wrap > svg{transform: rotate(90deg);}

.mobile-gnb-bottom-wrap{
	padding:0 var(--layout-side-margin);
	border-top:1px solid var(--color-border);
	display:flex;
	align-items: center;
	justify-content:space-between;
	height: 50px;
}


/*-------------------------------------------------------------------------------------------------
2. subtop
-------------------------------------------------------------------------------------------------*/
.subtop-wrap{width:100%; height:var(--subTop-height); background-position:center; background-size: cover; position:relative; border-bottom:1px solid var(--color-border);}
.subtop-wrap .inner-wrap{width:calc(100% - var(--layout-flax-margin));  max-width:var(--layout-width); position:absolute; bottom:var(--gap-60); left:50%; transform: translate(-50%,0);}
.subtop-wrap .page-location{color:var(--color-font); display:flex; align-items: center; font-size:var(--font-size-normal);}
.subtop-wrap .page-location > li{display:flex; align-items: center; margin-right:var(--gap-10);}
.subtop-wrap .page-location > li:last-child{margin-right:0; position:relative; cursor:pointer;}
#pagelocation-arrow-svg{fill:var(--color-font); margin-left:var(--gap-5);}
#home-icon{fill:var(--color-font);}
#slush-icon{stroke:var(--color-border);}
.subtop-wrap h1{font-size:var(--color-dark); font-size:var(--font-size-xxxxxlarge); font-weight: 600; margin-top:var(--gap-20); line-height: 100%;}

.submenus-wrap{min-width:140px; border:1px solid var(--color-border);position:absolute; top:40px; background-color:#fff; left:50%; transform: translate(-50%, 0); color:var(--color-font); display:none;}
.submenus-wrap > li{padding:10px 15px; transition:all .3s;}
.submenus-wrap > li:hover{background-color:#E9E9E9;}
.submenus-wrap > li.on{background-color:#E9E9E9;}

.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);}


/*-------------------------------------------------------------------------------------------------
3. shortcut
-------------------------------------------------------------------------------------------------*/

.mobile-shortcut-wrap{position:fixed; bottom:0; width:100%; max-width:500px; border:1px solid var(--color-border); background-color:#fff; padding:10px 20px; height: 60px; left:50%; transform: translate(-50%,0); -webkit-transform: translate(-50%,0); z-index: 5; display:none;}
.mobile-shortcut-wrap > ul{display:flex; align-items: center; justify-content: space-between;}
.mobile-shortcut-wrap > ul > li .icon-wrap > img{margin:0 auto; display:block;}
.mobile-shortcut-wrap > ul > li .icon-wrap > img:last-child{display:none; margin:0 auto;}
.mobile-shortcut-wrap > ul > li.on .icon-wrap > img:first-child{display:none;}
.mobile-shortcut-wrap > ul > li.on .icon-wrap > img:last-child{display:block;}
.mobile-shortcut-wrap > ul > li p{font-size:var(--font-size-small); text-align: center; margin-top:5px;}



@media only screen and (max-width:960px){
	.menuBtn{display:flex;}
	.gnb-menu{display:none;}
	.gnb-right{display:none;}
	.mobile-shortcut-wrap{display:block;}
}