:root {
    --headerHeight: 70px;
}
header{position: relative; z-index: 9999; height: var(--headerHeight);}
header .header-area{border-bottom : solid 1px #dadce0; position: relative; z-index: 9999; background-color : #fff; height: inherit;}
header .header-area .logo-container{padding: 9px 0 0 0;position: absolute;top: 17px;left : 30px;z-index: 3;}
header .header-area .logo-container a{display : flex; align-items: center;}
header .header-area .logo-container a[data-env='DEV']::after {content: attr(data-env); margin-left: 3px; display: block; font-weight: 700; font-size: 9px; line-height: 15px; text-align: center; color: #fff; border-radius: 6px 6px 6px 0; padding: 0 5px;}
header .header-area .logo-container a[data-env='DEV']::after {background-color: #22b57d;}
header .header-area .logo-container a img{width : 217px;}
header .header-area .gnb-container{position: relative; z-index: 2;}
header .header-area .gnb-container ul{display : flex;}
header .header-area .gnb-container ul>li>a{font-size: 18px;color :#000;display : inline-block;font-weight: 500; position: relative; margin : 25px 20px 27px 20px; text-wrap: nowrap;}
header .header-area .gnb-container ul>li:first-child>a{margin-left : 0;}
header .header-area .gnb-container ul>li>a:before{content: ''; display: block; width: 100%; height: 2px; background: #356df3; position: absolute; bottom: -28px; left: 0; opacity: 0; visibility: hidden; z-index: 10000;}
header .header-area .gnb-container ul>li>a:after{content:'';display:block;position:absolute;width: 6px;height: 6px;background-color: #ee5c45;border-radius: 50%;right:-8px;top:-1px; transition : 0.1s ease-out; opacity: 0; visibility: hidden;}
header .header-area .gnb-container ul>li.overed>a:before{opacity: 1; visibility: visible;}
header .header-area .gnb-container ul>li.active>a:after{opacity: 1; visibility: visible;}
header .header-area .gnb-container ul>li.mobile-show {display: none;}
header .header-area .hamburger-btn {display: none;}

@media all and  (max-width : 1773px){
	header:has( a[data-env='DEV']) .gnb-container .inner {margin: 0 0 0 298px;}
}

@media all and  (max-width: 1743px) {
	header .header-area .gnb-container .inner {margin: 0 0 0 268px;}
}


@media all and  (max-width: 1250px) {
	header .header-area {position: relative; height: 110px;}
	header .header-area .gnb-container {position: absolute; top: 41px; left: 30px; padding: 0;}
	header .header-area .gnb-container ul>li>a:before {content: none;}
	header .header-area .gnb-container .inner {margin: 0; width: auto;}
}

@media (max-width: 980px) {
	:root {
        --headerHeight: 63px;
        --gnbHeight: 147px;
    }
	header .header-area{position: fixed; width : 100%; transform : translateZ(0); overflow: hidden;}
	header .header-area .logo-container{margin : 0 0 0 20px; padding : 21px 0; position: relative; top : 0; left : 0; z-index: 3; width : fit-content; background-color : #fff; height: 100%;}
	header .header-area .gnb-container {display: block; position: absolute; top: var(--headerHeight); left: 0; background-color : #fff; width: 100%; height: var(--gnbHeight); transition : 0.3s ease-out; opacity: 0; visibility: hidden; z-index: 1;}
    header .header-area .gnb-container .inner {height: 100%;}
	header .header-area .gnb-container ul{display: grid; height: 100%; grid-template-columns: repeat(2, 1fr); column-gap: 20px; padding: 0 20px; border-bottom: solid 1px #dadce0;}
	header .header-area .gnb-container ul>li {border-bottom : solid 1px #f5f5f5;}
    header .header-area .gnb-container ul>li.mobile-show {display: list-item;}
    header .header-area .gnb-container ul>li:nth-last-child(1),
    header .header-area .gnb-container ul>li:nth-last-child(2) {border-bottom: 0;}
	header .header-area .gnb-container ul>li>a {display: flex; height: 100%; justify-content: center; align-items: center; margin: 0;}
	header .header-area .gnb-container ul>li>a:after{display: none;}

	header .header-area .hamburger-btn{display: block; width: 25px;position: absolute; cursor: pointer; right : 20px; top : 50%; transform : translateY(-50%); overflow: hidden; z-index: 3;}
	header .header-area .hamburger-btn span {display: block; width : 100%; height: 2px; background-color : #000; margin : 5px 0; transition : 0.25s ease-out; opacity: 1; visibility: visible; border-radius: 1px;}
	header .header-area .hamburger-btn.active span:nth-child(1){transform : translateY(7px) rotate(-45deg);}
	header .header-area .hamburger-btn.active span:nth-child(2){opacity: 0; visibility: hidden; transform : scale(0);}
	header .header-area .hamburger-btn.active span:nth-child(3){transform : translateY(-7px) rotate(45deg);}

	header .header-area.mobile-dropped {overflow : visible;}
	header .header-area.mobile-dropped .gnb-container {opacity: 1; visibility: visible;}
}

@media (max-width: 500px) {
	:root {
        --headerHeight: 53px;
        --gnbHeight: 247px;
    }
	header .header-area .logo-container{margin :0 0 0 15px; padding : 20px 0 18px; width : 50%;}
	header .header-area .logo-container a img{width : auto; height: 15px; }
	header .header-area .hamburger-btn{width: 40px;padding: 10px;right: 5px;}
	header .header-area .hamburger-btn span{margin : 4px 0;}
	header .header-area .hamburger-btn.active span:nth-child(1){transform : translateY(6px) rotate(-45deg);}
	header .header-area .hamburger-btn.active span:nth-child(3){transform : translateY(-6px) rotate(45deg);}
	header .header-area .gnb-container ul{padding : 0 15px; grid-template-columns: 1fr; column-gap: 0;}
	header .header-area .gnb-container ul li a{font-size : 15px;}
    header .header-area .gnb-container ul>li:nth-last-child(2) {border-bottom: solid 1px #f5f5f5;}
}

@media (max-width: 340px) {
	
}