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

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

.header {
    width: 100%;
	height: var(--logo-height);
	position:absolute;
	top:0px;
	left:0px;
	z-index: 10;
}

.header > .inner-wrap{
	width:calc(100% - var(--layout-flax-margin));
	max-width:var(--layout-width);
	margin:0 auto;
	display: flex;
    justify-content: space-between;
    align-items:center;
	position:relative;
	box-sizing: border-box;
}

.logo1{display:none;}

.header .gnb-menu > ul > li{padding:0 25px; font-size:var(--font-size-normal); position:relative; color:var(--color-bright);}
.header .gnb-menu > ul > li > .mark{width:0; opacity:0; height: 2px; background-color:#fff; position:absolute; top:60px; left:50%; transform: translate(-50%, 0); transition: all .3s;}
.header .gnb-menu > ul > li > a:hover{color:#fff;}
.header .gnb-menu > ul > li:hover > .mark{width:calc(100% - 50px); opacity:1;}

.header .gnb-menu > ul > li.div{height: 15px; width:1px; padding:0; background-color:#fff;}
.header .gnb-menu > ul > li.div:last-child{display:none;}

.header .menuBtn{display:none; width:40px; height: 30px; align-content: space-between; flex-wrap: wrap;  cursor: pointer;}
.header .menuBtn > .stick{width:100%; height: 2px; background-color:var(--color-bright);}
.header .menuBtn > .stick:last-child{margin-bottom:0;}
.gnb-logo{padding:20px 0;}
.gnb-logo > img{max-width:147px;}
.gnb-menu > ul {display: flex; align-items: center;}


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

.header.black .gnb-menu > ul > li{color:var(--color-dark); }
.header.black .gnb-menu > ul > li.div{height: 15px; width:1px; padding:0; background-color:#d6d6d6;}
.header.black .gnb-menu > ul > li > a:hover{color:var(--color-dark);}
.header.black .menuBtn > .stick{background-color:var(--color-dark);}
.header.black #div-dot{fill:var(--color-dark);}
.header.black .gnb-right a{color:var(--color-dark);}
.header.black .logo1{display:block;}
.header.black .logo2{display:none;}
.header.black .gnb-menu > ul > li > .mark{background-color:#283384;}

.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 .main-gnb-wrap{margin-top:80px;}
.mobile-gnb .main-gnb-wrap > li{text-align: center; padding:40px 0; font-size:var(--font-size-xxxxlarge); font-weight: 600;}

.mobile-gnb-bottom-wrap{display:none;}

@media only screen and (max-width:950px){
	.header .menuBtn{display:flex;}
	.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: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); margin-bottom:var(--gap-40);}
.subtop-wrap .page-location > li:first-child > svg{width:18px;}
.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);}