@charset "UTF-8";

/* 태블릿용 */
@media screen and (max-width: 1024px) {
	.sub-container {
		flex-direction: column;
	}
	.side-nav {
		height: auto;
		width: 100%;
	}
	.menu-text-title {
padding: 0 0 10px 0;
	}

	/* 기본: 숨김 */
	.list_opentype li.hidden {
		display: none;
	}
	.toggle-btn, .expand-btn {
		display: inline-block;
	}
	.expand-btn img {
		width: 16px;
		height: 16px;
		vertical-align: middle;
		cursor: pointer;
	}

	/* 토글 버튼 스타일 */
	.toggle-btn {
		cursor: pointer;
		font-size: 15px;
		margin-right: 10px;
	}
	/* 펼쳐졌을 때 */
	.list_opentype li.show {
		display: list-item;
	}

	/* + / - 버튼 */
	.expand-btn {
		float: right;
		cursor: pointer;
		width: 20px;
	}

	/* 펼쳐졌을 때 */
	.list_opentype li.show {
		display: list-item;
	}
	.docscontent {
		width: calc(100% - 40px);
		margin: auto;
		margin-bottom: 20px;
	}
	.open-icon {
		display: none;
	}

}

/* 테블릿 (예: 768 이하) */
@media screen and (max-width: 768px) {
	.top-mega-menu.active{
	        width: 90%;
			overflow: auto;
	}
	.content-title {
		padding: 10px;
	}
	.top-nav {
		padding: 10px;
	}
	.side-nav {
		padding: 10px;
	}
	.docscontent {
		width: calc(100% - 20px);
		margin-bottom: 10px;
	}
	.list-table-title, .list-table-item {
		display: none;
	}
	.mobile-table-select {
		display: block !important;
		width: 100%;
		padding: 5px;
		font-size: 13px;
		border: 1px solid #ddd;
		appearance: none; /* 기본 화살표 숨기기 */
		-webkit-appearance: none;
		-moz-appearance: none;
		background:
			url('data:image/svg+xml;utf8,<svg fill="black" height="12" viewBox="0 0 24 24" width="12" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>')
			no-repeat right;
		background-size: 20px;
		border-radius: 5px;
	}
	


  /* 열림 표시 아이콘 (우측) */
  .top-mega-menu .menu li > a .chev {
    float: right;
    transition: transform .25s ease;
  }

  .top-mega-menu .menu li.open > a .chev {
    transform: rotate(90deg);
  }
}

/* 아주 작은 화면 (예: 480px 이하) */
@media screen and (max-width: 480px) {
	.content-title {
		padding: 10px;
	}
	
	.note-editable > .content-sub-title{
        padding: 15px !important;
	}
	.content-title > .title-button {
		display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12px;
	}
	.mypage-pw-half{
	width: calc(100% - 5px) !important;
	}
}