/* style.css */
.search-container {
    vertical-align: bottom;
    background-color:#000000;
    color:#ffffff;
    width:1080px;
    display: flex;
justify-content: center; /* 수평 중앙 정렬 */
    align-items: left;
    padding:0px;
   margin:0px;
/*   border:1px solid green; */
}
.menu-container {
    /*border:1px solid white;*/
    display: inline-block;
    padding: 0px;
    vertical-align: middle;
    width:130px;
    height:25px;
    position: relative; /* 부모 요소를 relative로 설정 */
    z-index: 5003; /* 메뉴가 기존 콘텐츠 위에 나타나도록 설정 */
}

.back {
    position: absolute;
    top: 30px;
    left: 0;
    display: none;
    z-index: 5004; /* 기존 콘텐츠 위에 나타나도록 설정 */
    width: 100%; /* 부모 요소의 너비에 맞게 설정 */
}

/* 1st row menu*/
.menus {
    position: relative;
    clear: both;
    margin: 0;
    padding: 0;
    list-style: none;
    color:#333333;
/*    background-color: #333333; */
}
.menus [type='radio']:checked + label + .content { /* 선택한 1차 메뉴의 2차 하위메뉴 표시 */
    z-index: 5003;
    display: block;
}

/* 2nd vertical menu */
.menuc > label ,.menuc2 > label {
/*    background-color: #333333; */
    color: #333333;
/*    padding: 0.5em 3.5em 0.5em 2em; */
    cursor: pointer;
    text-align: left;
    display: block;
    position: relative;
}
.menuc > label::after ,.menuc2 > label::after {
    content: ' ';
    color: #333333;
    position: absolute;
/*    margin-left: 0.5em; */
/*    line-height: 1.3;*/
}
.menuc input {
    display: none; /* 라디오버튼, 체크박스 감춤 */
}

.menuc .content {
  display: none;
    left:100%;
   /* background: #333;
    color: #fff; */
    top: 0;
    z-index: 5004;
    position: absolute;
 /*     padding: 20px;*/
}

.back ,.content , .submenu {
    background-color:#ffffff;
	border:1px solid green;
	/*height:800px;*/
	min-height: 800px;
	width:150px;
}

.menuc .content ul { /* 2차 메뉴 목록 불릿 및 패딩 정리 */
    margin: 0;
    padding: 0;
    list-style: none;
}
.menuc .content article{ /* 2차 메뉴 영역에 메뉴 대신 컨텐츠 표시용 태그 크기 제한 */
    min-width: 150px;
/*    max-height: 240px; */
    overflow-y: auto;
}
.menuc .content a, .menu .content input + label, .submenu li {
    display: block;
    color: #333333;
    white-space: nowrap;
    text-decoration: none;
/*    padding: 5px; */
    cursor: pointer;
}
.menuc .content input + label{
/*    padding-right: 24px; */
}
.menuc .content ul li:nth-child(n + 2){ /* 2차 하위 메뉴 항목 구분선 */
/*    border-top: 1px dashed #999; */
}
.menuc [type='radio']:checked + label, .menuc2 [type='radio']:checked + label { /* 1차 메뉴 선택 */
   /* background-color: #ffffff; */
    color: #000000;
    z-index: 5004;
}
.menuc > [type='radio']:checked + label::after,.menuc2 > [type='radio']:checked + label::after  {
    content: '▶';
    color: #3399ff;
    text-align: right;
    position: absolute;
    right: 10px; /* 원하는 간격으로 조절하세요 */
    top: 50%;
    transform: translateY(-50%);
}  

/* 3rd vertical submenu */
.submenu{ /* 3차 하위 메뉴 클래스 */
    display: none;
    position: absolute;
/*    background-color: #333;
    padding: 20px; */
    top:0;
    width:150px;
    left: 100%; /* 3차 하위 메뉴 위치 조정 */
/*    margin: -25px 0 0 20px;  3차 하위 메뉴 위치 조정 */
}

.menuc > .content input:checked + label + .submenu { /* 3차 하위 메뉴 펼침 */
    z-index: 5003;
    display: block;
}
.menuc > .content > ul > li > input + label::after {
    content: ' ';
    position: absolute;
/*   margin-left: 0.5em; */
/*    line-height: 1.2;*/
}
.menuc > .content > ul > li > input:checked + label::after {
    content: '▶';
}

.menuc > label:hover, .menuc2 > label:hover, .submenu li:hover {
    font-color:#000000;
    font-weight: bold;
	background-color : #3399ff;
}
.menuc > label, .menuc2 > label, .submenu li {
	text-align:left;
    padding-left: 10px;
}