@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Blinker:wght@100;200;300;400;600;700;800;900&family=Noto+Sans+KR:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=ABeeZee:ital@0;1&display=swap');
/* .container {
  width: 1280px;
  margin: 0 auto;
} */

.body {
  font-size: 15px;
  /* //.글자폰트 크기 수정 */
  font-family: "Noto Sans KR", sans-serif;
}

.wrap {
  display: flex;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
/* ---------------------------------------------------------------- */
/* 메인배경이미지 */
.main_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.main_bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

main {
  display: flex;
  position: relative;
}

/* 환경설정 코드관리 전체공지코드 시작 */
.setting_section {
  width: 1745px;
  height: 772px;
  background: #fff;
  position: fixed;
  right: 50%;
  top: 50%;
  transform: translate(50%,-50%);
  border-radius: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main_ltrt {
  width: 1705px;
  height: 712px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 좌측영역 */
.main_lt {
  width: 410px;
  height: 100%;
}

/* 탭 */
.tab_section {
  width: 380px;
  height: 30px;
}

ul.tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

ul.tab li {
  width: 120px;
  height: 30px;
  border-radius: 10px 10px 0 0;
  background: #FFEDE2;
  cursor: pointer;
  line-height: 30px;
}

ul.tab li:hover {
  background: #CF4F00;
  transition: background-color 0.3s ease;
}

ul.tab li a p {
  color: #333;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
}

ul.tab li:hover a p {
  color: #fff;
  transition: color 0.3s ease;
}

/* 기본 활성화 상태 (첫 번째 탭) */
ul.tab li.active {
  background: #CF4F00;
}

ul.tab li.active a p {
  color: #fff;
}

/* 트리구조 스크롤 */
.tree_scroll {
  margin-top: 20px;
  width: 100%;
  box-sizing: content-box; 
  height: 647px;
  overflow-y: auto; 
  overflow-x: hidden;
  margin-right: 15px;
}

.tree_scroll::-webkit-scrollbar {
  width: 15px; 
  background: #F6F6F6;
}

.tree_scroll::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 10px; 
  transition: background-color 0.3s ease;
}

.tree_scroll::-webkit-scrollbar-thumb:hover {
  background-color: #333; 
  transition: background-color 0.3s ease;
}

.tree_scroll::-webkit-scrollbar-track {
  background: #f6f6f6;
  border-radius: 10px; 
  margin: 12px; 
}

/* 트리구조 */
.tree_section {
  width: 380px;
  height: 627px;
}

ul.tree {
  width: 100%;
}

ul.tree li .tree_main {
  width: 120px;
  height: 20px;
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-top: 8px;
}

ul.tree li.notice_code .tree_main {
  margin-top: 0;
}

ul.tree li .tree_main i {
  font-size: 18px;
  color: #007BDF;
}

ul.tree li .tree_main p {
  color: #333;
  font-size: 15px;
  font-weight: 500;
  margin-left: 5px;
}

ul.tree li .tree_main:hover p {
  color: #007BDF;
  transition: color 0.3s ease;
  font-weight: 600;
}

ul.tree li ul.tree_sub {
  width: 100%;
  display: none;
}

ul.tree>li>ul.tree_sub>li>a {
  width: calc(100% - 18px);
  height: 20px;
  display: flex;
  align-items: center;
  margin-left: 18px;
  margin-top: 5px;
}

ul.tree li ul.tree_sub li a i {
  font-size: 18px;
  color: #CF4F00;
}

ul.tree li ul.tree_sub li a p {
  color: #333;
  font-size: 15px;
  font-weight: 500;
  margin-left: 5px;
}

ul.tree li ul.tree_sub li a:hover p {
  color: #007BDF;
  transition: color 0.3s ease;
  font-weight: 600;
}

/* 우측영역 */
.main_rt {
  width: 1270px;
  height: 100%;
}

/* 타이틀 */
.code_all_notice_tit {
  width: 100%;
  height: 18px;
  display: flex;
  align-items: center;
  border-left: 3px solid #CF4F00;
  margin-top: 48px;
}

.code_all_notice_tit h1 {
  color: #333;
  font-size: 18px;
  font-weight: 700;
  margin-left: 5px;
}

.code_all_notice_tit button {
  width: 15px;
  height: 15px;
  border-radius: 3px;
  background: #ccc;
  border: none;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 8px;
  cursor: pointer;
}

.code_all_notice_tit button:hover {
  background: #333;
  transition: background-color 0.3s ease;
}