@charset "utf-8";
/* 고정 스타일 */
#header_wrapper {
		border-top: 3px solid var(--dark_point);
}
#header_wrapper.fixed {
	position: fixed;
	top: 0;
	left: var(--quick);
	right: 0;
	z-index: 1000;
	background: #fff; /* 필요 시 색상 조정 */
	box-shadow: 0 2px 6px rgba(0,0,0,0.1);
	animation: slideDown 0.3s ease forwards;
}

/* 헤더 전체 숨김 처리 */
.top_nav.hide {
	/* transform: translateY(-100%); 위에서 아래로*/
	transition: opacity 0.2s ease;
}

/* 부드럽게 내려오는 효과 */
@keyframes slideDown {
	/* from { transform: translateY(-100%); }
	to { transform: translateY(0); } 위에서 아래로 */
    from { opacity: 0; }
	to {  opacity: 1; }
}

.logo_img{
	height: 60px;
}
#header_nav {
    /*position: fixed;*/
    position: relative;
    z-index: 9;
    width: 100%;
    background: var(--white);
    box-shadow: 0 0.4rem 0.4rem 0rem rgba(0,0,0,0.25);
}
:root { 
    --header_h:70px;
}
    #header_nav .wrapper {
        position: relative;
        width: 100%;
        max-width: 1500px;
        padding: 0px 15px;
        height: var(--header_h);
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }


.wrapper .nav-links {
    width: 100%;
    height: 100%;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    padding-inline-start: 0px !important;
    margin-block-end: 0px;
    margin-block-start: 0px;
}

.nav-links li {
    list-style: none;
    height: 100%;
}

.nav-links .nav-links-li {
    width: 100%;
}

    .nav-links .nav-links-li > div.d_flex {
        height: 100%;
        align-items: center;
    }
/*대메뉴*/
.nav-links li a {
    color: var(--gray_5);
    text-decoration: none;
    font-size: 1.025rem;
    font-weight: 500;
    /*padding: 0px 30px;*/
    flex-grow: 1;
    height: 80%;
    border-radius: var(--br_s);
    transition: all var(--q_trans);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .nav-links li a:hover {
        background: var(--point);
        color: var(--gray_f9);
        /* font-weight: 600; */
    }

.nav-links .nav-links-li > div.d_flex a {
    justify-content: center;
}


.nav-links .mobile-item {
    display: none;
}

.nav-links .drop-menu {
    position: absolute;
    /*background: #efefef;*/
    width: 180px;
    line-height: 45px;
    top:  var(--header_h);
    opacity: 0;
    visibility: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.nav-links li:hover .drop-menu {
    transition: all var(--q_trans);
    top:  var(--header_h);
    opacity: 1;
    visibility: visible;
}
.drop-menu li a {
    width: 100%;
    display: block;
    padding: 0 0 0 15px;
    border-radius: 0px;
    position: relative;
}
/* 메가박스 */
.nav-links li:hover .mega-box {
    transition: all var(--q_trans);
    top: calc( var(--header_h) - 5px);
    opacity: 1;
    visibility: visible;
}
/* 메가박스 숨겨져있을때 */
.mega-box {
    position: absolute;
    left: 0;
    width: 100%;
    top: 200px;
    opacity: 0;
    visibility: hidden;
}
    .mega-box .content {
        background: #fff;
        background-image: linear-gradient(to right, var(--surface)40%,var(--white)40%);
        padding: 25px /*2*/ 0px;
        display: flex;
        width: 100%;
        justify-content: space-between;
    }

        .mega-box .content .row {
            /*width: calc(20% - 20px);  */
            /*margin-left:  10px;*/
            width: 20%;
            flex: 1 1 auto;/* flex-grow: 1; flex-shrink: 1; flex-basis: auto; */
            line-height: 45px;
            border-left: 1px solid rgba(0,0,0,0.09);
        }

            .mega-box .content .row:first-child {
                border: none;
            }

.content .row header {
    margin-left: 20px;
    margin-right: 20px;
    color: var(--gray_5);
    font-size: 1rem;
    font-weight: 500;
}

    .content .row header a {
        color: var(--point2);
        font-size: 1rem;
        font-weight: 500;
        padding-left: 20px;
		justify-content: flex-start
    }
    /* 도트 */
.content .row header a:before{
	content: '·';
	display:inline-flex;
	margin-right: 0.3rem;
    margin-bottom: 0.05rem;
	/* color: var(--point); */
    font-weight: 900;
    font-size: large;
}
    .content .row header a:hover {
        /* font-weight: 600; */
		color: var(--point);
		background: var(--light_point);
    }

.content .row .mega-links {
    margin-left: 0px;
    padding-inline-start: 1.5rem!important;
}

.row .mega-links li {
    padding: 0 20px;
}

    .row .mega-links li a {
        padding: 10px 20px;
        color: var(--gray_6);
        font-size: 0.9rem;
        display: block;
		/*line-height4036px;*/
    }

        .row .mega-links li a:hover {
            color: var(--point);
			background: var(--gray_f5);
        }

.wrapper .btn {
    color: var(--gray_2);
    font-size: 1.25rem;
    cursor: pointer;
    display: none;
}

    .wrapper .btn.close-btn {
        position: absolute;
        right: 15px;
        top: 0px;
    }

@media screen and (max-width: 970px) {
	.logo_img{
	height: 30px;
		margin-bottom: 0.25rem
}
	#header_nav{
		position: fixed;
		border-top: none;
	}
    #header_wrapper.fixed{
        position:unset;
        left: 0;
    }
	#header_nav .wrapper {
    padding: 0px 15px;
    height: 0px;
    line-height: 0px;
}
    .wrapper .btn {
        display: block;
    }

    .wrapper .menu-btn {
		position: absolute;
        top:-38px;
    }

    .wrapper .nav-links {
        position: fixed;
        height: 100vh;
        width: 100%;
        max-width: 300px;
        top: 0;
        left: -100%;
        background: #fff;
        display: block;
        padding: 0px;
        line-height: 40px;
        overflow-y: auto;
        box-shadow: 0px 15px 15px rgba(0,0,0,0.18);
        transition: all var(--q_trans);
    }

    .nav-links .nav-links-li > div.d_flex {
        display: none;
    }
    #menu-btn:checked ~ .nav-links {
        left: 0%;
    }

    #menu-btn:checked ~ .btn.menu-btn {
        display: none;
    }

    #close-btn:checked ~ .btn.menu-btn {
        display: block;
    }

    .nav-links li {
        margin: /*15px 1*/ 0px;
    }

        .nav-links li a {
            padding: 0 20px;
            display: block;
            font-size: 20px;
        }

    .nav-links .drop-menu {
        position: static;
        opacity: 1;
        top: 65px;
        visibility: visible;
        padding-left: 20px;
        width: 100%;
        max-height: 0px;
        overflow: hidden;
        box-shadow: none;
        transition: all var(--q_trans);
    }

    #showDrop:checked ~ .drop-menu,
    #showMega:checked ~ .mega-box {
        max-height: 100%;
    }

    .nav-links .desktop-item {
        display: none;
    }

    .nav-links .mobile-item {
        /*display: block;*/
        display: none;
        color: var(--gray_5);
        /*font-size: 20px;*/
        font-weight: 500;
        padding-left: 20px;
        cursor: pointer;
        border-radius: 5px;
        transition: all var(--q_trans);
    }

        .nav-links .mobile-item:hover {
            background: #3A3B3C;
        }

    .drop-menu li {
        margin: 0;
    }

        .drop-menu li a {
            border-radius: 5px;
            /*font-size: 18px;*/
        }

    .mega-box {
        position: static;
        top: 65px;
        opacity: 1;
        visibility: visible;
        padding: 20px 20px 0 10px;
        max-height: 0px;
        overflow: hidden;
        overflow-y: auto;
        transition: all var(--q_trans);
    }

        .mega-box .content {
            background-image:none;
            box-shadow: none;
            flex-direction: column;
            padding: 10px 20px 10px 0px;
        }

            .mega-box .content .row {
                width: 100%;
                margin-bottom: 15px;
				border:none;
            }

                .mega-box .content .row:nth-child(1),
                .mega-box .content .row:nth-child(2) {
                    border-top: 0px;
                }

    .content .row .mega-links {
        border-left: 0px;
        padding-left: 15px;
    }

    .row .mega-links li {
        margin: 0;
    }

}

nav input {
    display: none;
}