@charset "utf-8";
.fc-ccc {
  color: #ccc;
}
.fc-95 {
  color: #959595;
}
.fc-9c {
  color: #9c9c9c;
}
.fc-0b2065 {
  color: #0b2065;
}
.fc-2f {
  color: #2f2f2f;
}
.fc-1e {
  color: #1e1e1e;
}
.fc-17 {
  color: #171717;
}
.fc-25 {
  color: #252525;
}
.fc-2a {
  color: #2a2a2a;
}
.fc-15 {
  color: #151515;
}
.fc-a8 {
  color: #a8a8a8;
}
.fc-45 {
  color: #454545;
}
.fc-d1 {
  color: #d1d1d1;
}
.fc-141415 {
  color: #141415;
}
.fc-606260 {
  color: #606260;
}
.fc-4f4f50 {
  color: #4f4f50;
}

.fc-35 {
  color: #353535;
}
.fc-2d{
  color:#2d2d2d
}
.fc-33{
  color:#333
}
.bd-55 {
  border: 1px solid #555;
}
.bg-f5 {
  background-color: #f5f5f5;
}

header {
  border-bottom: 1px solid #fff;
  position: fixed;
  width: 100%;
  z-index: 1000;
  transition: all 0.3s ease;
  padding: 20px 0;
}

/* 스크롤 전 헤더  */
header:not(.header-scrolled) {
  background: transparent;
}

/* 스크롤 후 헤더  */
header.header-scrolled {
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
header .mobile_menu{
  color:#fff
}
header.header-scrolled .mobile_menu{
  color: #000 !important;
}

/* 텍스트 색상 전환을 위한 트랜지션 */
.hd_menu > a,
.logo a {
  transition: color 0.3s ease;
}
/* 헤더 메뉴 스타일 */
.hd_menu {
  position: relative;
}

nav > a,
.hd_menu > a {
  position: relative;
  padding: 25px 0;
  text-decoration: none;
  color: #222;
  transition: color 0.3s;
  z-index: 1000;
}

nav > a:hover,
.hd_menu > a:hover {
  color: #4776c8;
}

nav > a:hover::after,
.hd_menu > a:hover::after {
  width: 100%;
}

/* 서브메뉴 스타일 */
.sub_menu {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  display: none;
  z-index: 1001;
  min-width: 100px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.sub_menu a {
  display: block;
  padding: 8px 0;
  text-decoration: none;
  color: #222;
  transition: color 0.3s;
  font-size: 16px;
  white-space: nowrap;
}

.sub_menu a:hover {
  color: #4776c8;
}

/* 호버 시 서브메뉴 표시 */
.hd_menu:hover .sub_menu {
  display: block !important;
}

/* 불필요한 백그라운드 효과 제거 */
header::after {
  display: none;
}

nav:hover::after,
nav:hover + header::after {
  height: 0;
}

/* 포지션 설정 */
nav,
.hd_menu {
  position: relative;
}

/* 사이트맵 스타일 */
#sitemap {
  display: none;
}

nav{
  display: block;
}

/* mobile */
@media screen and (max-width: 767px) {
  .logo img {
    width: 70%;
  }
  nav{
    display: none;
  }

  /* site_map */
  #sitemap {
    display: block;
    width: 100%;
    height: 100vh;
    background: linear-gradient(-113deg, rgba(59, 129, 201, 0.8), #15a2a2);
    position: fixed;
    top: 0;
    right: 0;
    z-index: 99999999;
    transform: translateX(100%);
    transition: transform 0.8s;
  }
  #sitemap.show {
    transform: translateX(0);
  }
  .close_btn {
    display: flex;
    justify-content: flex-end;
    padding-right: 16px;
    padding-top: 25px;
  }
  .close_btn i {
    font-size: 25px;
  }
  .st_box {
    padding: 12vh 15% 0;
    overflow: auto;
    width: 100%;
    height: 100%;
  }
  .st_menu ul {
    width: 100%;
    display: none;
  }
  .st_menu p {
    padding: 15px 0;
  }
  .st_menu li {
    padding: 10px 0;
  }
}

/* tablet 세로기준 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
  nav{
    display: none;
  }

  /* site_map */
  #sitemap {
    display: block;
    width: 100%;
    height: 100vh;
    background: linear-gradient(-113deg, rgba(59, 129, 201, 0.8), #15a2a2);
    position: fixed;
    top: 0;
    right: 0;
    z-index: 999999999999999;
    transform: translateX(100%);
    transition: transform 0.8s;
  }
  #sitemap.show {
    transform: translateX(0);
  }
  .close_btn {
    display: flex;
    justify-content: flex-end;
    padding-right: 40px;
    padding-top: 38px;
  }
  .close_btn i {
    font-size: 30px;
  }
  .st_box {
    padding: 12vh 15% 0;
    overflow: auto;
    width: 100%;
    height: 100%;
  }
  .st_menu ul {
    width: 100%;
    display: none;
  }
  .st_menu p {
    padding: 15px 0;
  }
  .st_menu li {
    padding: 10px 0;
  }
}

/* 태블릿 아이패드미니 가로부터 ~ , 노트북 : 11인치  ~ 15인치 */
@media screen and (min-width: 1025px) and (max-width: 1440px) {
}