@charset "UTF-8";

/********************************************************
■ Slide Menu : PC&모바일 슬라이드 메뉴 부분
********************************************************/
body.m-menu-on { overflow:hidden; }
body.m-menu-on #m-menu { bottom:0; padding:25px 30px; }

/* 삼지창 메뉴에 검색창 추가 */

#top .top-wrap .search-container {
    width: 100%; /* 전체 너비를 차지하도록 설정 */  
    display: flex; /* Flexbox 레이아웃 사용 */
    justify-content: center; /* 가운데 정렬 */
    background: #f8f8f8; /* 배경색을 추가하여 구분 */
    padding: 10px 0; /* 상하 패딩 추가 */
}
#top .top-wrap .top-search-box2 {
    width: 80%; /* 검색창의 너비를 적절히 조정 */
    max-width: 500px; /* 최대 너비를 설정 */
}
.top-search-box2 .form .btn2 {
    margin-left: 10px; /* 원하는 검색버튼의 왼쪽 여백 값 */
}

.top-search-box2 .form .btn2 i.fa-search {
    color: #ffffff; /* 검색아이콘 색상 흰색 */
}

/*#top .top-wrap .top-search-box2 { align-items: center; display: flex; height: 100%; justify-content: center; }*/

/* 검색을 위한 폼 요소 */
#top .top-wrap .top-search-box2 form {
    border: 1px solid #fff;         /* 흰색 실선 테두리를 설정합니다. */
    display: flex;                  /* Flexbox 레이아웃을 사용합니다. */
    align-items: center;            /* 자식 요소들을 수직 방향으로 가운데 정렬합니다. */
    padding: 7px 8px 8px;           /* 내부 여백을 위쪽 7px, 오른쪽 8px, 아래쪽 8px, 왼쪽 8px 설정합니다. */
    width: 100%;  /* 너비를 100%로 설정하여 부모 요소에 맞춤 */
    /* width: 300px;                   /* 너비를 300px로 설정합니다. */
}

#top .top-wrap .top-search-box2 form .searchbox2 {
    background: transparent;
    border: 0;
    flex: 1;
    margin-right: 10px; /* 검색창과 아이콘 사이의 간격 조정 */
}
#top .top-wrap .top-search-box2 form .searchbox2::placeholder { color: #ddd; }
#top .top-wrap .top-search-box2 form .searchbox2:focus { outline: none; }

#top .top-wrap .top-search-box2 form button {
    background: transparent;
    border: 0;
    color: var(--main-color2);
    flex: 0 0 25px;
    margin-left: 10px; /* 검색창과 아이콘 사이의 간격 조정 */
}
#top .top-wrap .top-search-box2 form button:focus { outline: none; }
#top .top-wrap .top-search-box2 form .x-close { color:#444; font-size:1.8rem; margin-left:5px; cursor:pointer; }
/* 삼지창 메뉴에 검색창 추가 끝 */

#m-menu { position: fixed; top:0; right:0; bottom:100%; width: 500px; max-width:100%; overflow:hidden; padding:0 30px; z-index: 1100; transition-duration: 600ms; background: var(--main-color4, var(--main-color3)); /* 변경할 배경색 */ --m-top-h:40px; --m-bottom-h:80px; }

#m-menu .logo { position:relative; height:var(--m-top-h); background:var(--main-color1); -webkit-mask:url('../img/logo.png') no-repeat left center/100px; mask:url('../img/logo.png') no-repeat left center/100px; 
margin-bottom: 10px; /* 로고 하단의 여백 */
}

#m-menu .m-menu-top-btns { position:absolute; top:0; right:20px; display:flex; align-items:center; opacity:0; transition-duration: 600ms; z-index:2; }
body.m-menu-on #m-menu .m-menu-top-btns { top:25px; opacity:1; }

#m-menu .m-menu-top-btns a { color:#fff; margin-right:5px; border:1px solid #fff; font-size:.75rem; padding:3px 13px; }
#m-menu .m-menu-top-btns a:hover { background:#fff; color:#0a0f16; }
#m-menu .btn-close { position:relative; width:40px; height:var(--m-top-h); }
#m-menu .btn-close:before,
#m-menu .btn-close:after { content:""; position:absolute; top:50%; left:50%; height:30px; width:2px; background:#fff; border-radius:2px; margin:-15px 0 0 -1px; }
#m-menu .btn-close:before { transform: rotate(45deg); }
#m-menu .btn-close:after { transform: rotate(-45deg); }


#m-menu .m-menu-list { position:relative; height:calc(100% - var(--list-margin) - var(--m-top-h) - var(--m-bottom-h)); font-family: "RIDIBatang-subset", sans-serif; overflow-y:auto; margin-top:var(--list-margin); --list-margin:25px; }


#m-menu .items { position:relative; }
#m-menu .item { display:flex; justify-content: space-between; border-top:1px solid rgba(255,255,255,.3); padding:20px 0; }
#m-menu .item a { height:35px; line-height:20px; }
#m-menu .item .is_sub { color:var(--main-color1); display: inline-block; position: relative; padding:5px 0; font-size:1.125rem; }
#m-menu .item .is_sub:hover, #m-menu .item .is_sub.on { color: #fff; }
#m-menu .item .is_sub.on:before { content:""; position:absolute; right:-5px; top:5px; border-radius:100%; width:5px; height:5px; background:#fff; }

#m-menu .item .sub { width:calc(100% - 160px); }
#m-menu .item .sub.on { color:#fff; }

#m-menu .item .sub .depth2-a { position: relative; color: #888; display: inline-block; padding:5px 0; }
#m-menu .item .sub .depth2-a:hover,
#m-menu .item .sub .depth2-a.on { color:#fff; }
#m-menu .item .sub .depth2-a:before { content:""; position:absolute; left:0; bottom:5px; right:0; width:0; height:1px; background:#fff; transition-duration:400ms; }
#m-menu .item .sub .depth2-a:hover:before,
#m-menu .item .sub .depth2-a.on:before { width:100%; }


#m-menu .m-menu-bottom-btns { display:flex; justify-content:space-between; align-items:flex-end; height:var(--m-bottom-h); opacity:0; transition-duration: 600ms; transition-delay:500ms; }

#m-menu .m-menu-login { display:flex; }
#m-menu .m-menu-login a { position:relative; font-size:.875em; color:rgba(255,255,255,.5); height:25px; line-height:25px; padding-right:10px; margin-right:10px; }
#m-menu .m-menu-login a:hover { color:rgba(255,255,255,.85); }
#m-menu .m-menu-login a:before { content:""; position:absolute; top:50%; right:0; width:2px; height:10px; background:rgba(255,255,255,.1); margin-top:-6px; }
#m-menu .m-menu-login a:last-child:before { display:none; }

#m-menu .family-box { position:relative; font-size:.875rem; color:rgba(255,255,255,.7); --family-padding:10px 15px; }
#m-menu .family-box .family-btn { padding:var(--family-padding); border:1px solid rgba(255,255,255,.5); }
#m-menu .family-box .family-btn i { margin-left:20px; font-size:.75rem; transition-duration:400ms; }
#m-menu .family-box.on .family-btn i { transform:rotate(180deg); }
#m-menu .family-box .sub { position:absolute; left:0; right:0; bottom:calc(100% - 1px); opacity:0; border:1px solid rgba(255,255,255,.5); visibility:hidden; max-height:0; z-index:-1; transition-duration:400ms; }
#m-menu .family-box.on .sub { max-height:300px; opacity:1; visibility:visible; z-index:1; }
#m-menu .family-box .sub a { display:block; color:inherit; padding:var(--family-padding); border-bottom:1px solid rgba(255,255,255,.5); }
#m-menu .family-box .sub a:last-child { border:none; }
#m-menu .family-box .sub a:hover { background:#fff; color:#333; }

body.m-menu-on #m-menu .m-menu-bottom-btns { opacity:1; }



#m-menu-overlay { position: fixed; left: 0; top: 0; width: 100%; height:100%; background:#111; opacity: 0; z-index:-999; transition-duration:400ms; }
body.m-menu-on #m-menu-overlay { opacity:0.8; z-index: 1050; }


@media (max-width: 767px) {
	body.m-menu-on #m-menu .m-menu-container { padding:20px; }

/* 모바일 뷰에서 x-close 스타일 정의 */
#top .top-wrap .top-search-box2 form .x-close { color:#444; font-size:1.8rem; margin-left:5px; cursor:pointer; }

    #m-menu .logo { height:40px; }

/* 모바일에서 검색창 크기 조정 */
    #top .top-wrap .top-search-box2 {
        width: 70%; /* 원하는 너비 값으로 변경 */
        max-width: 100px; /* 최대 너비 값으로 변경 */
    }

    #top .top-wrap .top-search-box2 form {
        padding: 5px 10px; /* 원하는 패딩 값으로 변경 */
    }

    #top .top-wrap .top-search-box2 form .searchbox2 {
        margin-right: 5px; /* 원하는 간격으로 변경 */
    }

    #top .top-wrap .top-search-box2 form button {
        flex: 0 0 20px; /* 버튼 크기 조정 */
    }

/*    #m-menu a.btn-close { width:20px; height:20px; } */
/*    #m-menu a.btn-close:before, */
/*    #m-menu a.btn-close:after { height:20px; margin:-10px 0 0 -1px; } */

    #m-menu .m-menu-list { height:calc(100% - 125px); }

	#m-menu .item { padding:15px 0; }
    #m-menu .item .is_sub { font-size:1.125rem; }
    #m-menu .item .is_sub.plus:before { width:2px; height:16px; margin:-8px 7px 0 0; }
    #m-menu .item .is_sub.minus:after { width:16px; height:2px; margin-top:-1px; }

	#m-menu .item .sub { width:calc(100% - 120px); }

	#m-menu .m-menu-bottom-btns { margin-top:30px; }
    #m-menu .family-box { --family-padding:5px 10px; }
    #m-menu .family-box .family-btn i { margin-left:15px; }
}