@charset "utf-8";
*{margin: 0;padding: 0;font-family: "Pretendard Variable", Pretendard;text-decoration: none;}

.text-success   {color: #4BB03E !important;}
.text-danger    {color: #F46256 !important;}
.text-light     {color: #909090 !important;}
.text-primary   {color: #2262C6 !important;}
.text-maroon    {color: #BABDCE !important;}
.text-teal      {color: #20C997 !important;}
.text-info      {color: #17A2B8 !important;}
.text-lightblue {color: #3C8DBC !important;}
.text-warning   {color: #FFC107 !important;}
.text-warning   {color: #FFC107 !important;}
.text-primary   {color: #007BFF !important;}
.text-maroon    {color: #D81B60 !important;}
.text-pink      {color: #E83E8C !important;}

/* 블릿기호 초기화 */
ul,li,ol {list-style:none;}

/* 테두리 초기화 */
button,img,fieldset {border:0 none;}

/* 박스 선 */
/* input{box-sizing: border-box;} */

/* 커서 */
a,button{cursor: pointer;}

.error{font-weight: bold; font-size: 11px; color: #F46256;position: relative;display: block;padding-top: 3px;}

/* Chrome, Whale, Edge */
/* 스크롤바 전체 기본 꾸미기 */
body::-webkit-scrollbar {
    width: 10px;  /* 세로축 스크롤바 폭 너비 */
    height: 10px;  /* 가로축 스크롤바 폭 너비 */
}

/* 스크롤바 막대 꾸미기 */
body::-webkit-scrollbar-thumb {
    background: #2262C6; /* 스크롤바 막대 색상 */
    border: 0; /* 스크롤바 막대 테두리 설정  */
    border-radius: 12px 12px 12px 12px;
}

/* 스크롤바 트랙 꾸미기 */
body::-webkit-scrollbar-track {
	background: #F1F2F7;
}


/* IE */
select::-ms-expand { 
	display: none;
}
select {
  -o-appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

#wrap{margin: 0;padding: 0;}

/* header */
header{width: 100%;height: 70px;position: fixed;left: 260px;box-shadow: rgba(0, 0, 0, 0.06) 0px 10px 12px -10px, rgba(0, 0, 0, 0.01) 0px 4px 5px -2px;z-index: 888;background-color: #fff;}
header>.header_wrap{width: 87%;height: 70px;float: right;}
header>.header_wrap>ul{width: 100%;height: 100%;float: left;display: flex;}
header>.header_wrap>ul>li{float: left;}
header>.header_wrap>ul>li>.main_btn{width: auto;height: 40px;margin-top: 15px;position: fixed;left: 300px;}
header>.header_wrap>ul>li>.main_mobile_btn{display: none;}
header>.header_wrap>ul>li>.main_btn>ul{float: left;}
header>.header_wrap>ul>li>.main_btn>ul>li{float: left;margin-right: 30px;}
header>.header_wrap>ul>li>.main_btn>ul>li>a{}
header>.header_wrap>ul>li>.main_btn>ul>li>a>img{display: block;padding-top: 6px;}
header>.header_wrap>ul>li>.main_btn>ul>li>a:hover>.icon_sidebar{content: url(../images/icon-hover-sidebar.png);transition: 1s;}
header>.header_wrap>ul>li>.main_btn>ul>li>a:hover>.icon_home{content: url(../images/icon-hover-home.png);transition: 1s;}
header>.header_wrap>ul>li>.main_btn>.hello{width: auto;height: 20px;color: #2262C6;float: left;padding: 10px;}
header>.header_wrap>ul>li>.main_btn>.hello>p{width: auto;height: 20px;color: #2262C6;}

/* 헤더 우측 컨테이너 (알림 + 프로필 + 로그아웃) */
.header-right{position: fixed;right: 30px;top: 0;height: 70px;display: flex;align-items: center;gap: 18px;z-index: 890;}

header>.header_wrap>ul>li>form>.profile{height: 46px;border-radius: 15px;}
header>.header_wrap>ul>li>form>.profile>.profile-info{display: flex;align-items: center;color: #333;font-weight: 800;height: 100%;}
header>.header_wrap>ul>li>form>.profile:hover>.profile-info{color: #2262C6;transition: 0.3s;}
header>.header_wrap>ul>li>form>.profile>.profile-info>ul{display: flex;align-items: center;padding-left: 10px;gap: 8px;}
header>.header_wrap>ul>li>form>.profile>.profile-info>ul>li{display: flex;align-items: center;height: 36px;}
header>.header_wrap>ul>li>form>.profile>.profile-info>ul>li>img{display: block;margin-right: 10px;}
header>.header_wrap>ul>li>form>.profile>.profile-info>ul>li:last-child>img{margin-right: 0px;}
header>.header_wrap>ul>li>form>.profile>.profile-info>ul>li>p{display: block;margin-top: 0;margin-bottom: 0;}
header>.header_wrap>ul>li>form>.profile>.profile-info>ul>li>p>.name{white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 100px;}

.header_wrap>ul>li>.logout{}
.header_wrap>ul>li>.logout>a>button{width: 100px;height: 40px;background-color: #fff;border-radius: 100px;font-size: 14px;color: #599AFF;font-weight: 700;letter-spacing: 1px;border: 2px solid #9EBEF0;}
.header_wrap>ul>li>.logout>a>button:hover{background-color: #F1F2F7;transition: 0.3s;color: #2262C6;border: 2px solid #2262C6;}

.header_wrap>ul>li>.logout-mobile{display: none;}

/* aside */
aside{width: 260px;height: 100%;position: fixed;top: 0;left: 0;z-index: 777;}
aside>.aside_wrap{height: 100%;}
aside>.aside_wrap>nav{width: 260px;height: 100%;display: flex;flex-direction: column;}
aside>.aside_wrap>nav>.logo{padding: 16px 48px;flex: 0 0 auto;}
aside>.aside_wrap>nav>.logo>a{cursor: pointer;}
aside>.aside_wrap>nav>.logo>a>img{}
aside>.aside_wrap>nav>.nav_wrap{width: 260px;flex: 1 1 auto;min-height: 0;background: linear-gradient(#2262C6, #3581F6);border-radius:0 50px 0 0;}
aside>.aside_wrap>nav>.nav_small_wrap{display: none;}
aside>.aside_wrap>nav>.nav_wrap>.nav_box{width: 260px;height: 100%;overflow-y: auto;}
/* 위 여백 30px 은 파란 패널의 오른쪽 위 모서리 곡선(border-radius 50px)을 피하기
   위한 값이다. 15px 이던 때는 첫 줄(대시보드)이 곡선에 물려 패널 끝에 붙어 보였다.
   행 높이가 50px 이므로 30px 을 두면 첫 줄의 세로 중심이 곡선 아래로 내려온다. */
aside>.aside_wrap>nav>.nav_wrap>.nav_box>ul{width: 210px;margin-left: 10px;padding-top: 30px;padding-bottom: 20px;}
/* ===== 메뉴 한 줄의 세로 정렬 기준 =====
   한 줄(li>a)은 [아이콘][글자][펼침 화살표] 로 이루어지고, 세 요소의 세로 중심을
   글자의 잉크 중심에 맞춘다. 대시보드 카드 제목과 같은 기준이다.

   예전에는 세 요소가 모두 float 이었다. 플로트는 부모 높이에 기여하지 않으므로
   a 의 콘텐츠 박스가 높이 0 으로 붕괴하고(실측 확인), 그 위에 얹힌 요소들의
   위치를 화살표 padding-top, 점 margin-top 같은 값으로 하나씩 손보정해야 했다.
   기준이 되는 박스가 없으니 하나를 맞추면 다른 것이 틀어졌다.
   그래서 행을 flex 로 세운다. 높이 50px 는 그대로다 (14 + 22 + 14).
   flex + align-items:center 로 세 요소의 박스 중심이 맞고, 글자의 라인박스가
   22px / 폰트 16px 라 잉크 중심이 박스 중심과 정확히 일치하므로(실측 편차 0.00px)
   추가 보정값이 필요 없다. */
aside>.aside_wrap>nav>.nav_wrap>.nav_box>ul>li{position: relative;color: #9EBEF0;}
/* hover 점: 행 높이 50px 의 절반에 원의 중심을 둔다. 글리프(●)가 아니라 원을
   직접 그리므로 폰트에 따라 위치가 달라지지 않는다. */
aside>.aside_wrap>nav>.nav_wrap>.nav_box>ul>li:hover:before{content: "";position: absolute;right: 0;top: 25px;transform: translateY(-50%);width: 7px;height: 7px;border-radius: 50%;background: #fff;}
aside>.aside_wrap>nav>.nav_wrap>.nav_box>ul>li>a{display: flex;align-items: center;padding: 14px 25px;color: #9EBEF0;font-weight: 500;}
aside>.aside_wrap>nav>.nav_wrap>.nav_box>.log_on{position: absolute;bottom: 15px;}
aside>.aside_wrap>nav>.nav_wrap>.nav_box>.log_on>p{color: #fff;font-size: 12px;font-weight: 500;text-align: center;padding: 28px;letter-spacing: 0.5px;}
aside>.aside_wrap>nav>.nav_wrap>.nav_box>.log_on>p>.login_day{}

aside>.aside_wrap>nav>.nav_wrap>.nav_box>ul>li>ul{display: none;}
aside>.aside_wrap>nav>.nav_wrap>.nav_box>ul>li.on:before {content: ""; position: absolute; right: 0; top: 25px; transform: translateY(-50%); width: 7px; height: 7px; border-radius: 50%; background: #fff;}
aside>.aside_wrap>nav>.nav_wrap>.nav_box>ul>li.on>ul {display: block; transition: 3s;}
aside>.aside_wrap>nav>.nav_wrap>.nav_box>ul>li.on>a {color: #fff;}
aside>.aside_wrap>nav>.nav_wrap>.nav_box>ul>li.on>a>.arrow {transform: rotate(180deg);}
/* 하위 묶음의 세로 안내선. 왼쪽 여백 64px 은 부모 글자가 시작하는 위치
   (padding 25 + 아이콘 22 + 간격 18 = 65px)다. 부모 아이콘 중심인 36px 에 두면
   선이 글자와 떨어져 어느 메뉴에 딸린 것인지 읽히지 않는다.
   높이는 하위 개수에 맞춰 메뉴마다 따로 준 값이다. */
aside>.aside_wrap>nav>.nav_wrap>.nav_box>ul>li.on.info>ul>li:first-child:before {content: " "; float: left; display: block; border-left: 2px solid #fff; width: 1px; height: 60px; margin-left: 64px; margin-top: 12px;}
aside>.aside_wrap>nav>.nav_wrap>.nav_box>ul>li.on.send>ul>li:first-child:before {content: " "; float: left; display: block; border-left: 2px solid #fff; width: 1px; height: 90px; margin-left: 64px; margin-top: 12px;}
aside>.aside_wrap>nav>.nav_wrap>.nav_box>ul>li.on.stat>ul>li:first-child:before {content: " "; float: left; display: block; border-left: 2px solid #fff; width: 1px; height: 133px; margin-left: 64px; margin-top: 12px;}
aside>.aside_wrap>nav>.nav_wrap>.nav_box>ul>li.on.log>ul>li:first-child:before {content: " "; float: left; display: block; border-left: 2px solid #fff; width: 1px; height: 202px; margin-left: 64px; margin-top: 12px;}
aside>.aside_wrap>nav>.nav_wrap>.nav_box>ul>li.on>ul>li.open>a {color: #fff;}

aside>.aside_wrap>nav>.nav_wrap>.nav_box>ul>li:hover>a{color: #fff;transition: 1s;}
/* line-height 를 아이콘(.menu-icon)과 같은 22px 로 맞춘다. 이 22px 가 행의
   콘텐츠 높이이자 세로 정렬의 기준선이 된다. */
aside>.aside_wrap>nav>.nav_wrap>.nav_box>ul>li>a>p{display: block;padding-right: 15px;line-height: 22px;margin-bottom: 0;}
aside>.aside_wrap>nav>.nav_wrap>.nav_box>.log_on{position: absolute;bottom: 15px;}


aside>.aside_wrap>nav>.nav_wrap>.nav_box>ul>li.active>ul{display: block;}
aside>.aside_wrap>nav>.nav_wrap>.nav_box>ul>li.active>a>.arrow{transform: rotate(180deg);}
aside>.aside_wrap>nav>.nav_wrap>.nav_box>ul>li.active>a{color: #fff;}

/* 하위 묶음은 부모 바로 아래에 붙어야 한 덩어리로 읽힌다. 첫 칸에 margin-top 이
   있으면 부모와의 간격만 36px 이 되어 하위끼리(22px)보다 벌어져 그룹이 끊긴다.
   세로 안내선(:before)도 이 li 안에 있어 함께 올라가므로 선 높이는 그대로 맞는다. */
aside>.aside_wrap>nav>.nav_wrap>.nav_box>ul>li>ul>li:first-child{margin-top: 0;}
aside>.aside_wrap>nav>.nav_wrap>.nav_box>ul>li>ul>li:hover>a{color: #fff;transition: 0.3s;}
/* 왼쪽 여백 80px 은 안내선(64px)에서 14px 떨어진 위치다. 69px 이던 때는 부모 글자
   시작(65px)과 4px 밖에 차이가 없어 하위가 아니라 형제처럼 보였다. */
aside>.aside_wrap>nav>.nav_wrap>.nav_box>ul>li>ul>li>a{padding: 12px 0 10px 80px;color: #9EBEF0;font-weight: 500;display: block;font-size: 14px;}

/* 메뉴가 화면보다 길 때 나타나는 사이드바 스크롤바 (desktop / mobile 공통) */
aside .nav_box{scrollbar-width: thin;scrollbar-color: rgba(255,255,255,0.35) transparent;}
aside .nav_box::-webkit-scrollbar{width: 6px;}
aside .nav_box::-webkit-scrollbar-track{background: transparent;}
aside .nav_box::-webkit-scrollbar-thumb{background: rgba(255,255,255,0.35);border-radius: 3px;}

/* 메뉴 아이콘 (desktop / mobile 공통) */
aside .nav_box>ul>li>a>.menu-icon{flex-shrink: 0;width: 22px;margin-right: 18px;font-size: 16px;line-height: 22px;text-align: center;opacity: 0.4;}
aside .nav_box>ul>li:hover>a>.menu-icon,
aside .nav_box>ul>li.on>a>.menu-icon,
aside .nav_box>ul>li.active>a>.menu-icon{opacity: 1;transition: 1s;}

/* 펼침 화살표 (desktop / mobile / 하위 depth 공통)
   상하좌우 대칭인 SVG 를 마스크로 쓴다. 대칭이라 박스 중심과 잉크 중심이
   보정값 없이 일치하고, 펼친 상태는 같은 그림을 180° 돌린 것이라 화살표가
   세로로 튀지 않는다. 예전에는 아래 화살표 PNG(잉크 여백 위 5px / 아래 3px)와
   위 화살표 PNG(위 4px / 아래 4px)를 갈아 끼웠는데, 두 PNG 의 여백이 달라
   메뉴를 펼칠 때마다 화살표가 1px 위로 튀었다.
   색은 background-color: currentColor 가 받으므로 hover 색 전환이 따라온다. */
aside .nav_box .arrow{display: inline-block;flex-shrink: 0;width: 16px;height: 16px;background-color: currentColor;-webkit-mask: var(--nav-chevron) center / 16px 16px no-repeat;mask: var(--nav-chevron) center / 16px 16px no-repeat;transition: transform .2s ease;--nav-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 5.5 L8 10.5 L13 5.5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}

/* section */
section{width: 100%;height: 100%;}
/*section .section_wrap{width: 100%;height: 100%;position: absolute;top: 100px;}*/
section .section_wrap{width: 100%;position: absolute;top: 100px;}
section .section_wrap>.section_group{width: 81%;height: auto;margin: 0 auto;margin-left: 300px;padding-bottom: 130px;}
.fix_title{width: 100%;height: 70px;margin-bottom: 16px;}
.fix_title>h2{font-size: 32px;color: #2262C6;}
.screen-guide b{color: #1b3a6b;}

/* footer */
footer{width: 100%;height: 40px;position: fixed;left: 260px;bottom: 0px;z-index: 888;background-color: #fff;border-top: 1PX solid #F1F2F7;}
footer>.footer_wrap{width: 100%;height: 40px;}
footer>.footer_wrap>.footer_text{padding: 10px 15px;}
footer>.footer_wrap>.footer_text>p{display: block;color: #BABDCE;font-weight: 500;float: left;letter-spacing: 0.2px;}
footer>.footer_wrap>.footer_text>p:last-child{float: right;margin-right: 270px;}

/* 사이드바 축소 클래스 */
.nav-collapsed aside>.aside_wrap>nav>.nav_wrap {
  width: 79px; /* 축소된 너비 */
  height: 100%;
  background: none; /* 배경 제거 */
  border-radius: 0; /* 둥근 모서리 제거 */
  overflow: hidden; /* 내용물 숨기기 */
  transition: all 0.5s ease; /* 부드러운 전환 */
}
.nav-collapsed aside{box-shadow: none;width: 79px;transition: width 0.5s ease;}
.nav-collapsed aside>.aside_wrap>nav{width: 79px;height: 100%;background: #2262C6;}
.nav-collapsed aside>.aside_wrap>nav>.nav_wrap>.nav_box>ul>li:hover>ul{display: none;}

/* 사이드바 축소 시 텍스트 숨기기 */
.nav-collapsed aside .nav_box ul li a p{display: none;}

.nav-collapsed aside .nav_box {
  width: 80px; /* 내부 박스 축소 */
  overflow: hidden; /* 텍스트 잘림 방지 */
}
.nav-collapsed aside .nav_box ul li a {
  padding: 15px; /* 아이콘 중심 정렬 */
  text-align: center; /* 아이콘을 중앙에 배치 */
}
.nav-collapsed aside .nav_box>ul>li>a>.menu-icon {
  margin-right: 0;
  opacity: 1;
}
/* 축소 상태에서는 화살표를 감춘다. 예전처럼 크기를 1px 로 줄이는 방식은 이제
   통하지 않는다. 마스크 크기가 16px 로 고정이라 박스만 1px 로 줄어들고 그림의
   1px 조각이 그대로 남는다. */
.nav-collapsed aside .nav_box ul li a .arrow {
  display: none;
}
.nav-collapsed aside .nav_box ul li a p {
  display: none; /* 텍스트 숨기기 */
  color: #fff;
  font-size: 1px;
}
/* .nav-collapsed aside>.aside_wrap>nav>.nav_wrap>.nav_box>ul>li>ul>li:nth-child(1)>a{color: #fff;font-size: 14px;}
.nav-collapsed aside>.aside_wrap>nav>.nav_wrap>.nav_box>ul>li>ul>li:nth-child(2)>a{color: #fff;font-size: 14px;}
.nav-collapsed aside>.aside_wrap>nav>.nav_wrap>.nav_box>ul>li>ul>li:nth-child(3)>a{color: #fff;font-size: 14px;}
.nav-collapsed aside>.aside_wrap>nav>.nav_wrap>.nav_box>ul>li>ul>li:nth-child(4)>a{color: #fff;font-size: 14px;}
.nav-collapsed aside>.aside_wrap>nav>.nav_wrap>.nav_box>ul>li>ul>li:nth-child(5)>a{color: #fff;font-size: 14px;}
.nav-collapsed aside>.aside_wrap>nav>.nav_wrap>.nav_box>ul>li>ul>li:nth-child(6)>a{color: #fff;font-size: 14px;} */

.nav-collapsed aside .logo{width: 150px;height: 66px;}
.nav-collapsed aside .logo img{display: none;}
.nav-collapsed .filter_container::after{width: 90%;} /* 파란색 구분 선 */

/* 헤더 및 푸터 위치 조정 */
.nav-collapsed header {left: 79px;transition: left 0.3s ease;}
.nav-collapsed header>.header_wrap>ul>li>.main_btn{position: fixed;left: 130px;}
.nav-collapsed section>.section_wrap>.section_group{width: 90%;margin-left: 130px;}
.nav-collapsed footer {left: 79px;transition: left 0.3s ease;}
.nav-collapsed footer>.footer_wrap>.footer_text>p:last-child{margin-right: 85px;}

/* 원상태 복귀 */
aside .nav_box ul li a p{display: block;}
aside{width: 260px;}
aside>.aside_wrap>nav>.nav_wrap{width: 260px;}
aside>.aside_wrap>nav>.nav_wrap>.nav_box{width: 260px;}

/* 페이지네이션 */
.pagination{width: 100%;height: 48px;background-color: #F1F2F7;border-radius: 0 0 30px 30px;margin-top: 1px;}
.pagination>.pagination_wrap{margin: 0 auto;width: auto;padding-top: 14px;text-align: center;}
.pagination>.pagination_wrap>.arrow{display: inline-block;}
.pagination>.pagination_wrap>.arrow>button{text-align: center;width: 80px;background-color: #F1F2F7;color: #333;font-weight: 600;}
.pagination>.pagination_wrap>.arrow>button:hover{color: #2262C6;transition: 0.2s;}
.pagination>.pagination_wrap>.arrow>button>img{float: left;display: block;margin: 1px 10px;}
.pagination>.pagination_wrap>.arrow:last-child>button>img{float: right;}
.pagination>.pagination_wrap>button>span{padding: 9px 13px; background-color: #F1F2F7;color: #333;border-radius: 10px;margin: 0 4px;font-weight: 500;text-align: center;}
.pagination>.pagination_wrap>button.active>span{background-color: #333;color: #fff;}
.pagination>.pagination_wrap>button:hover>span{background-color: #333;color: #fff;transition: 0.3s;}
/* 화면 배율/좁은 폭에서 페이지 버튼이 다음 줄로 내려가는 현상 방지 */
.pagination>.pagination_wrap{white-space: nowrap;}

@media (max-width: 1590px) {
  section{width: 100%;height: 100%;}
  section>.section_wrap{width: 100%;height: 100%;position: absolute;top: 100px;}
  section>.section_wrap>.section_group{width: 80%;}
}
@media (max-width: 1510px) {
  section>.section_wrap>.section_group{width: 78%;}
}
@media (max-width: 1375px) {
  section>.section_wrap>.section_group{width: 76%;}
}
@media (max-width: 1260px) {
  /* header */
  header{left: 0;}
  header>.header_wrap>ul>li>.main_btn{display: none;}
  header>.header_wrap>ul>li>.main_mobile_btn{display: block;width: auto;height: 40px;margin-top: 15px;position: fixed;left: 5%}
  .main_mobile_btn>ul{float: left;}
  .main_mobile_btn>ul>li{float: left;margin-right: 30px;}
  .main_mobile_btn>ul>li>a{}
  .main_mobile_btn>ul>li>a>img{display: block;padding-top: 6px;}
  .main_mobile_btn>ul>li>a:hover>.icon_menubar{content: url(../images/icon-hover-menubar.png);transition: 1s;}
  .main_mobile_btn>ul>li>a:hover>.icon_home{content: url(../images/icon-hover-home.png);transition: 1s;}
  /* aside */
  aside{width: 260px;height: 100%;position: fixed;top: 0;left: 0;z-index: 777;display: none;}
  aside>.aside_wrap>nav{width: 260px;height: 100%;}
  aside>.aside_wrap>nav>.logo{padding: 16px 48px;display: none;}
  aside>.aside_wrap>nav>.logo>a{cursor: pointer;}
  aside>.aside_wrap>nav>.nav_wrap{display: none;}
  aside>.aside_wrap>nav>.nav_small_wrap{display: block;width: 260px;flex: 1 1 auto;min-height: 0;background: linear-gradient(#2262C6, #3581F6);border-radius:0 50px 0 0;}

  .nav_small_wrap>.nav_box{width: 260px;height: 100%;margin: 0 auto;overflow-y: auto;}
  .nav_small_wrap>.nav_box>ul{width: 210px;margin-left: 10px;padding-top: 70px;padding-bottom: 20px;}
  /* 데스크톱 사이드바와 같은 기준으로 행을 세운다 (flex + 잉크 중심 정렬).
     행 높이 44px 는 그대로다: 11 + 22 + 11. */
  .nav_small_wrap>.nav_box>ul>li{position: relative;color: #9EBEF0;}
  .nav_small_wrap>.nav_box>ul>li:hover:before{content: "";position: absolute;right: 0;top: 22px;transform: translateY(-50%);width: 7px;height: 7px;border-radius: 50%;background: #fff;}
  .nav_small_wrap>.nav_box>ul>li>a{display: flex;align-items: center;padding: 11px 25px;color: #9EBEF0;font-weight: 500;font-size: 15px;}
  .nav_small_wrap>.nav_box>ul>li:hover>a{color: #fff;transition: 0.2s;}
  .nav_small_wrap>.nav_box>ul>li>a>p{display: block;padding-right: 15px;line-height: 22px;margin-bottom: 0;}
  .nav_small_wrap>.nav_box>ul>li>ul{display: none;}
  
  .nav_small_wrap>.nav_box>ul>li.active:hover>ul{display: block;transition: 3s;}
  .nav_small_wrap>.nav_box>ul>li.active:hover>a>.arrow{transform: rotate(180deg);}

  /* 데스크톱과 같은 기준(안내선 64px, 글자 80px, 첫 칸 여백 없음)을 쓴다. */
  .nav_small_wrap>.nav_box>ul>li>ul>li:first-child{margin-top: 0;}
  .nav_small_wrap>.nav_box>ul>li>ul>li:hover>a{color: #fff;transition: 0.3s;}
  .nav_small_wrap>.nav_box>ul>li>ul>li>a{padding: 12px 0 10px 80px;color: #9EBEF0;font-weight: 500;display: block;font-size: 14px;}
  .nav_small_wrap>.nav_box>ul>li:nth-child(5)>ul>li:first-child:before{content: " ";float: left;display: block;border-left: 2px solid #fff;width: 1px;height: 90px;margin-left: 64px;margin-top: 12px;}
  .nav_small_wrap>.nav_box>ul>li:nth-child(8)>ul>li:first-child:before{content: " ";float: left;display: block;border-left: 2px solid #fff;width: 1px;height: 92px;margin-left: 64px;margin-top: 12px;}
  .nav_small_wrap>.nav_box>ul>li:nth-child(9)>ul>li:first-child:before{content: " ";float: left;display: block;border-left: 2px solid #fff;width: 1px;height: 202px;margin-left: 64px;margin-top: 12px;}

  /* 모바일 버전 메뉴 활성화 스타일 */
  .nav_small_wrap>.nav_box>ul>li.on:before{content: "";position: absolute;right: 0;top: 22px;transform: translateY(-50%);width: 7px;height: 7px;border-radius: 50%;background: #fff;}
  .nav_small_wrap>.nav_box>ul>li.on>a{color: #fff;}
  .nav_small_wrap>.nav_box>ul>li.on>ul{display: block;}
  .nav_small_wrap>.nav_box>ul>li.on>ul>li.open>a{color: #fff;}
  .nav_small_wrap>.nav_box>ul>li.on.info>ul>li:first-child:before{content: " ";float: left;display: block;border-left: 2px solid #fff;width: 1px;height: 60px;margin-left: 64px;margin-top: 12px;}
  .nav_small_wrap>.nav_box>ul>li.on.send>ul>li:first-child:before{content: " ";float: left;display: block;border-left: 2px solid #fff;width: 1px;height: 90px;margin-left: 64px;margin-top: 12px;}
  .nav_small_wrap>.nav_box>ul>li.on.stat>ul>li:first-child:before{content: " ";float: left;display: block;border-left: 2px solid #fff;width: 1px;height: 90px;margin-left: 64px;margin-top: 12px;}
  .nav_small_wrap>.nav_box>ul>li.on.log>ul>li:first-child:before{content: " ";float: left;display: block;border-left: 2px solid #fff;width: 1px;height: 202px;margin-left: 64px;margin-top: 12px;}

  /* section */
  section>.section_wrap>.section_group{width: 90%;height: auto;margin: 0 auto;}
  /* footer */
  footer{left: 0px;}
  footer>.footer_wrap>.footer_text>p:last-child{float: right;margin-right: 10px;}
}
@media (max-width: 925px) {
  .header-right{right: 20px;gap: 14px;}
}
@media (max-width: 700px) {
  header>.header_wrap>ul>li>.main_btn>.hello{display: none;}
  .header-right{right: 16px;gap: 12px;}
  .header-right .profile .name{max-width: 70px;}
  /* footer */
  footer>.footer_wrap>.footer_text{padding: 15px 15px;}
  footer>.footer_wrap>.footer_text>p{font-size: 12px;}
}
@media (max-width: 600px) {
  .header-right{right: 12px;gap: 10px;}
  .header-right .profile .name{max-width: 50px;}
}
@media (max-width: 450px) {
  .header-right{right: 10px;gap: 10px;}
  .header-right .profile .name{max-width: 40px;}
  .header_wrap>ul>li>.logout{display: none;}
  .header_wrap>ul>li>.logout-mobile{display: block;}
  section{width: 100%;height: 100%;}
  section>.section_wrap>.section_group{padding-bottom: 80px;}
  .noti-dropdown{width: 280px;right: -40px;}
  /* footer */
  footer{height: 60px;}
  footer>.footer_wrap>.footer_text{padding: 15px 0 0 15px;height: 60px;width: 300px;}
  footer>.footer_wrap>.footer_text>p{font-size: 12px;float: none;}
  footer>.footer_wrap>.footer_text>p:last-child{float: none;}
}

/* 모바일 사이드바 열기 */
.nav_open aside{
  display: block;
}
.nav_open .nav_small_wrap{
  display: block;
}
/* 모바일 사이드바 배경 오버레이 */
.nav_open::after{
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 776;
}
select:disabled {
  color: #BABDCE; /* 글자 색상 변경 */
  cursor: default; /* 마우스 커서를 금지 모양으로 변경 */
  background-image: none
}

div.background_click_off {z-index: 998;}
div.add_wrap {
    background-color: #fff;
    position: fixed;
    top: 60px;
    margin: 0 auto;
    border-radius: 30px;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    z-index: 999;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.logout-btn {
  display: inline-block;
  padding: 6px 12px;
  margin-left: 20px;
  font-weight: 500;
  color: #333;
  background-color: #f1f2f7;
  border: none;
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.logout-btn:hover {
  background-color: #e2e4e9;
}

/* 알림 */
.notification {
  position: relative;
}
.noti-bell {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.noti-bell:hover svg {
  stroke: #2262C6;
  transition: stroke 0.2s;
}
.noti-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  background-color: #F46256;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 50%;
  padding: 0 4px;
}
.noti-dropdown {
  position: absolute;
  top: 36px;
  right: -20px;
  width: 360px;
  max-height: 440px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: rgba(100, 100, 111, 0.25) 0px 7px 29px 0px;
  overflow: hidden;
  z-index: 999;
}
.noti-dropdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid #F1F2F7;
}
.noti-dropdown-title {
  font-size: 15px;
  font-weight: 700;
  color: #333;
}
.noti-read-all {
  font-size: 13px;
  color: #2262C6;
  font-weight: 600;
  text-decoration: none;
}
.noti-read-all:hover {
  text-decoration: underline;
}
.noti-dropdown-body {
  max-height: 380px;
  overflow-y: auto;
}
.noti-dropdown-body::-webkit-scrollbar {
  width: 6px;
}
.noti-dropdown-body::-webkit-scrollbar-thumb {
  background: #BABDCE;
  border-radius: 3px;
}
.noti-item {
  display: block;
  padding: 12px 18px;
  border-bottom: 1px solid #F8F9FA;
  cursor: pointer;
  text-decoration: none;
  color: #333;
  transition: background-color 0.15s;
}
.noti-item:hover {
  background-color: #F1F2F7;
  color: #333;
  text-decoration: none;
}
.noti-item.unread {
  background-color: #F0F5FF;
}
.noti-item-type {
  font-size: 11px;
  font-weight: 600;
  color: #2262C6;
  margin-bottom: 2px;
}
.noti-item-title {
  font-size: 13px;
  font-weight: 600;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 310px;
}
.noti-item-content {
  font-size: 12px;
  color: #666;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 310px;
  margin-top: 2px;
}
.noti-item-meta {
  font-size: 11px;
  color: #BABDCE;
  margin-top: 4px;
}
.noti-empty {
  text-align: center;
  padding: 40px 0;
  color: #BABDCE;
  font-size: 14px;
}


/* 리스트 테이블 행 hover 효과 */
section fieldset table > tbody > tr:hover > td {
  background-color: #EFF4FB;
  transition: background-color 0.15s;
}