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

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

.site-header {
	position:fixed;
    height: 100px;
    background: #fff;
	z-index: 100;
	width:100%;
}

.site-header__inner {
    height: 100%;
    margin: 0 auto;
    padding: 0 var(--layout-side-margin);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.site-header__brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    min-width: 0;
}

.site-header__brand img {
    display: block;
    height: 44px;
    width: auto;
    max-width: 100%;
}

.site-header__brand--left img {
    height: 46px;
}

.site-header__brand--center img {
    height: 46px;
}

.site-header__sns {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.site-header__sns-link {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

.site-header__sns-link img {
    display: block;
    width: 18px;
    height: 18px;
}

/* 반응형 */
@media (max-width: 768px) {
    .site-header__inner {
        padding: 0 16px;
    }

    .site-header__brand--left img,
    .site-header__brand--center img {
        height: 25px;
    }

    .site-header__sns-link {
        width: 26px;
        height: 26px;
    }

    .site-header__sns-link img {
        width: 16px;
        height: 16px;
    }
	
	.site-header{height: 80px;}
}

@media (max-width: 600px) {
	.site-header__sns{display:none;}
}

@media (max-width: 420px) {
    .site-header__brand--left {
        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;}
}