@charset "utf-8";

/* header */
.header {position: fixed;width: 100%;height: 80px;z-index: 10;box-sizing: content-box;/*transition: all 0s 0.2s; */transition: all 0.5s;/* margin: 0; */top: 0;}

.header.fixed {
	transition: all 0.5s;
	position:
	fixed;
	background-color: white;
	top: 0;
	border-bottom: 1px solid #ddd;
	}
         
.header-bx {
            position: relative;
            height: 100%;
            background-color: white;
            width: 100%;
            }

.header-bx::before {content: '';position: absolute;top: -10px;left: 0;right: 0;bottom: 0;height: 0;background: rgb(255 255 255);box-shadow: 0 5px 9px rgb(0 0 0 / 17%);opacity: 0;transition: all .4s ease-in-out;z-index: -1;}

.header.fixed .header-bx::before { opacity: 1; height: 100%;}
.header .inner01 {display: flex;justify-content: space-between;align-items: center;position: relative;height: 100%;padding: 0 15%;width: 100%;}
.header .inner01 h1 {
    width: 200px;
    min-width: 200px;
    height: 50px;
    background-image: url(/img/logo/logo.svg);
    background-position-x: left;
    background-position-y: center;
    background-size: auto 100%;
    background-repeat: no-repeat;
    text-decoration: none;
}
.header .inner01 h1 a{
    text-decoration: none;
    width: 10%;
    height: 64%;
    position: absolute;
}
.header .logo { display: block; }
.header nav {width: 730px;height: 100%;}
.header .gnb { display: flex; justify-content: space-between; align-items: center; height: 100%;}
.header .gnb .dep1 {
                    position: relative;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    width: 25%;
                    height: 100%;
                    text-align: center;
                    }
/* .header .gnb .dep1 > a { position: relative;} */
.header .gnb li a {
                   display: block;
                   /* color: #fff; */
                   font-size: 18px;
                   transition: all .5s;
                   }
.header.fixed .gnb li a { color: #333;}
.header .gnb .dep2 {
                    position: absolute;
                    top: 110px;
                    left: 0;
                    right: 0;
                    visibility: hidden;
                    opacity: 0;
                    }
.header .gnb .dep2 li + li { padding-top: 20px;}
.header .gnb .dep2 a {/* color: #fff; */font-size: 16px;}

.header:hover { border-bottom: 1px solid rgba(255,255,255,0.5);}

.header:hover .header-bx::before {
	height: 350px;
	opacity: 1;
	}

.header:hover .gnb li a { visibility: visible;}
.header:hover .gnb .dep2 {display: block;opacity: 1;transition: all .4s ease-in-out;}
.header .gnb .dep1:hover a{ color:var(--color-main);}
.header .gnb .dep1::after {content: '';position: absolute;bottom: 0;left: 50%;width: 0;opacity: 0;border-bottom: 3px solid var(--color-main);transition: all .5s ease;transform: translateX(-50%);}


.header .gnb .dep1:hover::after { width: 100%; opacity: 1;}
.header .gnb .dep2:hover .dep1::after { width: 100%; opacity: 1;}
.header .gnb .dep1:hover .dep2 a{ color:unset;}
.header .gnb .dep1 .dep2 li:hover a{ color:var(--color-main);}
/*
.header .util ul{ display: flex; }
.header .util ul li + li{ margin-left: 15px; }
.header .util ul li a{ font-size: 13px; font-weight: 400; color: #fff; }
.header.active .header-top{background:rgba(255,255,255,0.9);}
.header .gnb .dpth1 > li > a:hover{ color: #0e2649; }
.header.sub-header .util ul li a{ color: #666; }
.header.sub-header .header-top{ border-bottom:1px solid #c4c4c4; }

.header.active .gnb .dpth1 > li > a, 
.header.active .util ul li a{ color: #222; }
.header.active .menu-open .path{ background: #222; }

*/
.sitemap button{
    padding: 0;
    border: 0 none;
	font-size:22px;
    background: none;
    cursor: pointer;
    /* vertical-align: unset; */
    height: unset;
    display: flex;
    align-items: center;
	display:none;
    }
.sitemap button i {
    font-size: 1.4em;
    transition: all 1s;
    transform: rotate(0);
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #222;
    margin-right: 0;
}
.sitemap button i,
.sitemap button iconify-icon, 
.sitemap button i {color:#121212;}
.sitemap button i.ri-close-fill{transform: rotate(180deg);}

@media screen and (max-width: 1000px) {
	.header {height:70px;}
	.header .inner01 {padding:0 5%;}
	.header .inner01 h1 a {width: 45%;}
	.header nav {width: 30px;}
	.header-bx::before, .header .gnb .dep1 {display:none;}
	.header .inner01 h1 {background-size: 77%;}
	.sitemap button {
    display: unset;
	}
	.sitemap button i.ri-menu-line {
	    transition: all 1s;
		transform: rotate(0);
		-webkit-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
	}
}