/* #header{ padding: 0 260px;} */
header{
    width: 100%; height: 100px;
    background-color: #fff;
    display: flex; justify-content: space-between;
    align-items: center; position: relative; top: 0; left: 0; z-index: 1000;
    transition: all 0.3s ease-in-out;
}
.sticky { /* 고정될 때 적용될 클래스 */
    position: fixed;
    top: 0; left: 0; 
    z-index: 1000;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* 그림자 효과 추가 */
}

header h1{
    width: 150px; height: 80px; padding: 18px 0 0 0; background-color: #fff;
    position: absolute; top: 50%; left: 260px;
    transform: translateY(-50%);
}
header h1>a{width: 100%;}
header h1>a img{width: 100%;}
header .m-menu{display: none;} /* 모바일 버전 메뉴바 */
header nav{height: 100%;}
header nav .main_menu{
    display: flex;
    position: absolute; top: 50%; right: 260px;
    transform: translateY(-50%);
    background-color: #fff;
}

header nav .main_menu>li{position: relative; width: 100%; height: 100px; }
header nav .main_menu>li>a{
    display: block; padding: 0 40px;
    font-size: 1rem; line-height: 100px;
    height: 100%; width: 100%; font-weight: 700;
    position: relative; z-index: 11;
    background-color: #fff;
}
header nav .main_menu>li>a:hover{color:#0153A6;}
/* header nav .main_menu>li:hover>a + .small_menu>li{transform: translateY(0px);} */
/* header nav .main_menu .small_menu.show > li {transform: translateY(0);} */
header nav .main_menu .small_menu{
    position: absolute; top: 100px; right: 0px;
    z-index: 10; 
    /* max-height: 0; */
    overflow: hidden; 
    transition: max-height 0.3s ease;
    /* ------ */
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.3s ease;
    pointer-events: none; /* 마우스로 클릭되지 않게 */
}
header nav .main_menu > li:hover > .small_menu > li{transform: translateY(0px);}
header nav .main_menu > li:hover > .small_menu {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
header nav .main_menu .small_menu>li{
    width: 135px; height: 80px; background-color: #f5fcff;
    display: flex; flex-flow: column;
    justify-content: center; align-items: center;
    transform: translateY(-1000px);
    transition: transform 0.5s;
}
/* 'open' 클래스가 붙으면 서브메뉴가 나타나도록 */
header nav .main_menu > li.open > .small_menu {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    max-height: 500px !important;
}
header nav .main_menu .small_menu>li:last-child{border-radius: 0 0 15px 15px;}
header nav .main_menu .small_menu>li>a{
    font-size: 0.938rem; display: block;
    width: 100%; height: 100%; text-align: center; line-height: 80px;
    position: relative; z-index: 100; font-weight: 600;
    /* 백그라운드 색상 자연스럽게 변하는 에니메이션 효과 */
    transition: background-color 0.5s ease-in-out; 
}
header nav .main_menu .small_menu>li>a>span{
    position: relative; z-index: 100;
}
header nav .main_menu .small_menu>li:last-child a{border-radius: 0 0 15px 15px;}
header nav .main_menu .small_menu>li>a:hover{background-color: rgba(1,83,166,0.8); }
header nav .main_menu .small_menu>li:hover>a>span{color: #fff;  font-size: 1.05rem;}

header nav .main_menu > li:hover > .small_menu {max-height: 500px; /* 기존 show 클래스 효과 */}

/* ======================== 중앙을 중심으로 옆으로 나오는 호버 효과 ▼ */


/*
header nav .main_menu .small_menu>li>a::after{
    content: ""; position: absolute; top: 0; left: 50%; height: 100%; width: 0%; 
    background-color: rgba(1,83,166,0.8); 
    transition: width 0.3s; z-index: 90;
}
header nav .main_menu .small_menu>li>a::before{
    content: ""; position: absolute; top: 0; right:50%; height: 100%; width: 0%; 
    background-color: rgba(1,83,166,0.8); 
    transition: width 0.3s; z-index: 90;
}
header nav .main_menu .small_menu>li:hover>a::after{width: 50%;}
header nav .main_menu .small_menu>li:hover>a::before{width: 50%;}
header nav .main_menu .small_menu>li:last-child a::after{border-radius: 0 0 15px 0;}
header nav .main_menu .small_menu>li:last-child a::before{border-radius: 0 0 0 15px;}

*/



@media screen and (max-width:1349px){ /* 태블릿 */
    header{height: 80px;}
    header h1{left: 80px;}
    header nav .main_menu{right: 80px;}
    header nav .main_menu>li{width: 100%; height: 80px;}
    header nav .main_menu>li>a{padding: 0 20px; line-height: 80px;}
    header nav .main_menu .small_menu{top: 80px; }
    header nav .main_menu .small_menu>li{width: 100px; height: 60px;}
    header nav .main_menu .small_menu>li>a{line-height: 60px; font-size: 0.825rem;}
    header nav .main_menu .small_menu>li:hover>a>span{font-size: 0.95rem;}
    header nav .main_menu > li:hover > .small_menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
    max-height: 500px;
    }
}

@media screen and (max-width:699px){ /* 모바일 */
    header{flex-flow: column; align-items: start; height: 60px; }
    header h1{ 
        z-index: 110;
        background-color: #fff; left: 10px;
        width: 130px; height: 40px; padding-top: 3px;
    }
    header .m-menu{
        display:block; width: 25px; height: 25px;
        position: absolute; top: 15px; right: 20px;
        z-index: 100;
    }
    header .m-menu>span{
        display: block; width: 100%; height: 25%; margin-bottom: 3.5px;
        background-color: #0153A6;
    }
    header:hover nav{transform: translateY(0);}
    header nav{ width: 100%; height: max-content;
        /* position: absolute; top: 0px; left: 0; */
        transform: translateY(-1000px);
        z-index: 90;
    }
    header nav .main_menu{
        flex-flow: column; width: 100%;
        top: 60px; left: 0; transform: translateY(0);
    }
    header nav .main_menu>li{width: 100%; height: max-content;}
    header nav .main_menu>li>a{background-color: #fff; font-size: 0.938rem;}
    header nav .main_menu>li>a:hover{background-color: #f5fcff;}
    header nav .main_menu .small_menu{position: static;width: 100%;}
    header nav .main_menu li:hover>a +.small_menu>li{height: 60px;}
    header nav .main_menu .small_menu>li{
        transition: height 0.5s;
        width: 100%; height: 0px;
        transform: translateY(0px); /* background:none; */
        align-items: start; 
    }
    header nav .main_menu .small_menu>li>a{
        text-align: left;
        width: 100%; line-height: 60px; padding-left: 60px;
        background-color: #fbfbfb; font-size: 0.825rem;
    }
    header nav .main_menu .small_menu>li:last-child{border-radius: 0 0 0 0;}
    header nav .main_menu .small_menu>li:last-child a{border-radius: 0 0 0 0}
    header nav .main_menu .small_menu>li:last-child a::after{border-radius: 0 0 0 0;}
    header nav .main_menu .small_menu>li:last-child a::before{border-radius: 0 0 0 0;}
}