@charset "utf-8";

.ctt_admin {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

#mir {
    overflow:hidden;
}

.mir_center {
    width:100%;
    max-width:1600px;
    padding:0 40px;
    margin:0 auto;
}
#bbs,
#sub_container {
    width:100%;
    max-width:1600px;
    margin:0 auto;
}


/* header */
#header .mir_center {
    padding:0 30px;
}
#header .header_top {
    border-bottom:1px solid #ddd;
    border-top:1px solid #ddd;
}
#header .header_top_box {
    display:flex;
    align-items:center;
    justify-content:space-between;
}
#header .header_top_box .head_top_btns {
    display:flex;
    align-items:center;
    flex:1;
}
#header .header_top_box .head_top_btns a {
    padding:10px 20px;
    color:#444;
    display:flex;
    align-items:center;
    gap:5px;
    border-right:1px solid #ddd;
    font-size:0.88em;
}
#header .header_top_box .font_btns {
    display:flex;
    align-items:center;
}
#header .header_top_box .user {
    display:flex;
    align-items:center;
    gap:33px;
}
#header .header_top_box .user a {
    padding:10px 0;
    position: relative;
    font-size:0.88em;
    color:#444;
}
#header .header_top_box .user a::after {
    content:'';
    width:3px;
    height:3px;
    background-color:#777;
    position: absolute;
    right:-18px;
    top:50%;
    transform:translateY(-50%);
}
#header .header_top_box .user a {
    display:flex;
    align-items:center;
    gap:5px;
}
#header .header_top_box .user a.allmenu::after {
    display:none;
}
#header .header_top_box .allmenu {
    cursor: pointer;
    background:transparent;
    border:none;
    padding: 10px 0;
    position: relative;
    font-size: 0.88em;
    color: #444;
}
#header .header_bot_box {
    display:flex;
    align-items:center;
    justify-content:space-between;
}
#header .header_bot_box .allmenu_mo {
    display:none;
}


#allsearch_pop {
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    z-index:99;
    display: none;
}
#allsearch_pop .allsearch_pop_bg {
    background-color:rgba(0,0,0,0.8);
    backdrop-filter: blur(2px);
    position:fixed;
    left:0;
    top:0;
    width:100%;
    height:100%;
    z-index:88;
}
#allsearch_pop .search_pop_contain {
    position:fixed;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
    z-index:99;
    background-color:#fff;
    border-radius:30px 30px 0 30px;
    padding: 30px;
}
#allsearch_pop .search_title {
    text-align:center;
}
#allsearch_pop .search_title h4 {
    font-size:1.66em;
    font-weight:700;
    color:#004F90;
    font-family: 'SUITE', sans-serif;
    margin-bottom:10px;
}
#allsearch_pop .search_title span {
    font-size:0.88em;
    font-weight:600;
    color:#444;
}
#allsearch_pop .allsearch_box {
    margin-top:30px;
}
#allsearch_pop #hd_sch {
    overflow:unset;
}
#allsearch_pop #go_search {
    display:flex;
    align-items:center;
    background-color:#fff;
    position: relative;
}
#allsearch_pop #go_search input {
    background:unset;
    height:auto;
    border-radius:10px;
    border:1px solid #ddd;
    padding:10px 20px;
    width:440px;
    font-size:0.88em;
}
#allsearch_pop #go_search .btn_search {
    background-color:#fff;
    border-radius:0 10px 10px 10px;
    background-color:#004F90;
    width:46px;
    height:46px;
    display:flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    right:0;
    bottom:0;
}
#allsearch_pop .nsl_close {
    position:absolute;
    right:0;
    top:-50px;
}

/* global */
#global .depth1 {
    display:flex;
    align-items:center;
    gap:30px;
}
#global .depth1 .dl1 .da1 {
    font-family: 'S-CoreDream';
    font-size:1.22em;
    font-weight:500;
    display:block;
    padding:30px 10px;
}
#global .depth1 .dl1.g70 .da1 {
    color:#00613E;
}
#global .depth1 .dl1.sel .da1 {
    color:#004F90;
    position: relative;
}
#global .depth1 .dl1.sel .da1:after {
    content:'';
    width:11px;
    height:11px;
    background-color:#004F90;
    border-radius:50%;
    position:absolute;
    left:50%;
    bottom:0;
    transform:translateX(-50%);
    z-index:223;
}
#global .depth2 {
    position: absolute;
    z-index: 222;
    height: 0;
    opacity: 0;
    top: 130px;
    left: 0;
    width: 100%;
    background: #fff;
    transition: height 0.3s ease-out, opacity 0.3s ease-out;
    overflow: hidden;
    border-top: 1px solid #004F90;
    box-shadow: 0px 10px 20px 0px rgba(49, 84, 114, 0.10);
}
#global .dl1.sel .depth2 {
    height: 300px;
    opacity: 1;
}
#global .depth2 .depth2_wrap {
    display: flex;
    height:100%;
}
#global .depth2 .depth2_title {
    width:38.95%;
    padding-top:40px;
    padding-left:260px;
    padding-right:50px;
    padding-bottom:50px;
    display: flex;
    justify-content: flex-end;
    background-repeat:no-repeat;
    background-position:95% bottom;
}
#global .g10 .depth2 .depth2_title {
    background-image:url(../img/layout/header01.png);
}
#global .g20 .depth2 .depth2_title {
    background-image:url(../img/layout/header02.png);
}
#global .g30 .depth2 .depth2_title {
    background-image:url(../img/layout/header03.png);
}
#global .g40 .depth2 .depth2_title {
    background-image:url(../img/layout/header04.png);
}
#global .g50 .depth2 .depth2_title {
    background-image:url(../img/layout/header05.png);
}
#global .g60 .depth2 .depth2_title {
    background-image:url(../img/layout/header06.png);
}
#global .g70 .depth2 .depth2_title {
    background-image:url(../img/layout/header07.png);
}
#global .g80 .depth2 .depth2_title {
    background-image:url(../img/layout/header08.png);
}
#global .depth2 .depth2_title .titleTxt {
    width:100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#global .depth2 .depth2_title .titleTxt .titleTxt_main {
    font-size:2.22em;
    font-weight:700;
    font-family: 'SUITE', sans-serif
}
#global .depth2 .depth2_title .titleTxt .titleTxt_main span {
    font-weight:400;
    font-family: 'SUITE', sans-serif
}
#global .depth2 .depth2_title .titleTxt .titleTxt_main::after {
    content:'';
    width:30px;
    height:4px;
    background-color:#004F90;
    border-radius:999px;
    display:block;
    margin:20px 0;
}
#global .depth2 .depth2_title .titleTxt .titleTxt_sub {
    font-family: 'S-CoreDream';
    font-size:1em;
    font-weight:200;
}
#global .depth2 ul {
    width:61%;
    padding-top:50px;
    padding-bottom: 0;
    padding-left: 50px;
    padding-right:160px;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    align-content: flex-start;
    background-color:rgba(215, 237, 255, 0.20);
    border-left:1px solid #ddd;
}
#global .depth2 .dl2 {
    width:calc(25% - 30px);
    margin-right:30px;
    margin-bottom:25px;
}
#global .depth2 .dl2 .da2 {
    display:block;
    padding:13px 0;
    font-size:1em;
    font-weight:500;
    border:1px solid #ccc;
    border-radius:6px;
    font-family: 'S-CoreDream';
    background-color:#fff;
    color:#444;
    text-align:center;
}
#global .depth2 .dl2 .da2:hover,
#global .depth2 .dl2 .da2:focus {
    background-color:#004F90;
    border-color:#004F90;
    color:#fff;
}

/* category */
#category {
    display:none;
}
#category.sel {
    display:block;
}
#category .bg {
    display: none;
    position: fixed;
    top: 0;
    z-index: 19;
    width: 100%;
    height: 100vh;
    background-size: 100% 100%;
    background-color:#fff;
}
#category .bg.sel {
    display: block;
}

#category .category {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 250;
    width: 100%;
}
#category .category .category_inn {
    display: flex;
    align-items: flex-start;
    gap:0;
}
#category .category .category_inn .category_wrap {
    display:flex;
    gap:100px;
    align-items: center;
}
#category .category .depth1 {
    max-width: 1530px;
    flex: 1;
}
#category .category .depth1 .dl1 {
    display:flex;
    padding:30px 0;
    gap:80px;
    border-bottom: 1px solid #ddd;
}
#category .category .depth1 .dl1 .da1 {
    width:200px;
    font-size:1.33em;
    letter-spacing:-0.72px;
    font-weight:600;
    font-family: 'S-CoreDream';
    line-height: 1;
}
#category .category .depth2 {
    display:flex;
    gap:20px;
    flex-wrap: wrap;
    flex:1;
}
#category .category .depth2 .dl2 {
    min-width: 200px;
}
#category .category .depth2 .dl2 .da2 {
    font-size:1em;
    font-weight:600;
    letter-spacing:-0.54px;
}
#category .category .depth2 .dl2 .da2:hover {
    color:#004f90;
}
#category .category .search {
    display:none;
}


#category .category .category_title {
    display:none;
}
#category .category_title_sitemap {
    width: 150px;
    height: 728px;
    background-image: url(../img/layout/sitemap.png);
    background-repeat: no-repeat;
    background-position: left top;
}
#category .category_title_sitemap h1 {
    font-size:60px;
    font-weight:600;
    color:#fff;
}
#category .close {
    background:unset;
    border:unset;
}
#category .close:hover {
    transform:rotate(90deg);
    transition:.3s;
}
#category .mo_user {
    display:none;
}


/* footer */
#footer {
    /* margin-top:100px; */
}
#footer .footer_top {
    border-top:1px solid #ddd;
}
#footer .footer_top .family_site {
  font-size: 0; /* 아이콘 버튼만 쓰는 영역이라 시각적 텍스트 0px OK */
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 40px;
}

#footer .footer_top .family_site .slider-container {
  display: flex;
  align-items: center;
  gap: 40px;
}

#footer .control-btn{
    border: 1px solid #b5b5b5;
    padding: 5px 8px;
    border-radius: 5px;
    width: 27px;
}

/* 컨트롤 래퍼 */
#footer .footer_top .family_site .slider-controls {
  width: 65px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

#footer .footer_top .family_site .slider-controls .control-buttons {
  display: flex;
  gap: 5px;
}

/* ★접근성: 컨트롤은 a가 아니라 button 기준으로 스타일 */
#footer .footer_top .family_site .slider-controls .control-buttons .control-btn button {
  width: 30px;
  height: 30px;
  border: 1px solid #ddd;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  cursor: pointer;
  padding: 0; /* 버튼 기본 패딩 제거 */
}

/* 버튼 안의 아이콘 이미지 정렬 */
#footer .footer_top .family_site .slider-controls .control-buttons .control-btn button img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* 슬라이드 뷰포트(기존 .slider-wrapper 역할 분리 권장: 오버플로우 컨테이너) */
#footer .footer_top .family_site .slider-wrapper,
#footer .footer_top .family_site .slider-viewport {
  flex: 1;
  position: relative;
  overflow: hidden; /* ★접근성: 화면 밖 콘텐츠 가리기 */
}

/* ⚠️ 기존 코드: .slider-wrapper nobr → 삭제
   nobr 대신 .slider-track가 가로 플렉스 행을 담당 */
#footer .footer_top .family_site .slider-wrapper nobr { 
      display: inline;            /* 기본값: inline */
    white-space: nowrap;        /* <nobr>의 목적을 CSS로도 보강 */
}
#footer .footer_top .family_site .slider-wrapper nobr a {
    display:inline-block;
    padding: 0 10px;
}
/* ★접근성: 실제 트랙(원본/복제) 공통 규칙 */
#footer .footer_top .family_site .slider-track {
  position: absolute;
  top: 0;
  left: 0; /* JS에서 transform으로 이동 */
  display: flex;
  align-items: center;
  gap: 40px; /* 기존 gap 유지 */
  white-space: nowrap; /* 이미지가 줄바꿈되지 않게 */
  will-change: transform; /* 성능 힌트 */
}

/* 복제 트랙: 사용자 상호작용 비활성화(안전망) */
#footer .footer_top .family_site .slider-track.clone {
  pointer-events: none;
}

/* 각 슬라이드 아이템 정렬 */
#footer .footer_top .family_site .slider-track .slide a,
#footer .footer_top .family_site .slider-track .clone-item {
  display: inline-flex;
  align-items: center;
  height: 55px; /* PHP의 $n_thumb_height와 일치시키면 좋음 */
}

/* 이미지 블록화(줄맞춤 깜빡임 방지) */
#footer .footer_top .family_site .slider-track img {
  display: block;
}

/* ★접근성: 포커스 가시성(버튼/링크 모두) */
#footer .footer_top .family_site .slider-controls .control-buttons .control-btn button:focus-visible,
#footer .footer_top .family_site .slider-track .slide a:focus-visible {
  outline: 2px solid #1a3faa;
  outline-offset: 2px;
}

/* (선택) 마우스 오버 피드백 */
#footer .footer_top .family_site .slider-controls .control-buttons .control-btn button:hover {
  border-color: #bbb;
}




#footer .footer_bot {
    background-color:#f4f4f4;
}
#footer .footer_bot .foot_bot_btns {
    display:flex;
    align-items:center;
    gap:83px;
    padding-left:100px;
    padding-right:100px;
    padding-top:15px;
    padding-bottom:15px;
}
#footer .footer_bot .foot_bot_btns a {
    font-size:0.88em;
    font-weight:500;
    color:#444;
    position: relative;
}
#footer .footer_bot .foot_bot_btns a.privacy {
    color:#004F90;
}
#footer .footer_bot .foot_bot_btns a:hover {
    text-decoration:underline;
}
#footer .footer_bot .foot_bot_btns a::after {
    content:'';
    width:3px;
    height:3px;
    background-color:#444;
    position:absolute;
    right:-43px;
    top:50%;
    transform:translateY(-50%);
}
#footer .footer_bot .foot_bot_btns a:last-child::after {
    display:none;
}
#footer .footer_bot .foot_bot_copy {
    border-top:1px solid #ddd;
}
#footer .footer_bot .foot_bot_copy .foot_bot_copy_cont {
    display:flex;
    align-items:center;
    padding-left:100px;
    padding-right:100px;
    padding-top:15px;
    padding-bottom:30px;
}
#footer .footer_bot .foot_bot_copy .foot_bot_left {
    flex:1;
    display:flex;
    flex-direction:column;
    gap:10px;
}
#footer .footer_bot .foot_bot_copy .foot_bot_left .visit_count .visit_wrap {
    display:flex;
    align-items:center;
    gap:20px;
}
#footer .footer_bot .foot_bot_copy .foot_bot_left .visit_count .visit_wrap p {
    font-size:0.66em;
    color:#444;
    font-weight:400;
}
#footer .footer_bot .foot_bot_copy .foot_bot_left .visit_count .visit_wrap p span {
    font-weight:600;
}
#footer .footer_bot .foot_bot_copy .foot_bot_left .visit_count .visit_wrap p.today_visit {
    background-color:#fff;
    border-radius:999px;
    padding:3px 10px;
}
#footer .footer_bot .foot_bot_copy .foot_bot_left .foot_txt {
    display:flex;
    align-items:center;
    gap:30px;
}
#footer .footer_bot .foot_bot_copy .foot_bot_left .foot_txt p {
    font-size:0.77em;
    font-weight:400;
    color:#444;
}
#footer .footer_bot .foot_bot_copy .foot_bot_left .foot_txt p span {
    font-weight:700;
}
#footer .footer_bot .foot_bot_copy .foot_bot_left .copyrights {
    display:flex;
    align-items: flex-start;
    justify-content:space-between;
}
#footer .footer_bot .foot_bot_copy .foot_bot_left .copyrights .copyrights_txt {
    flex:1;
}
#footer .footer_bot .foot_bot_copy .foot_bot_left .copyrights p {
    font-size:0.77em;
    font-weight:600;
    color:#444;
}
#footer .footer_bot .foot_bot_copy .foot_bot_left .copyrights p.copyrights_notice {
    font-weight:400;
}
#footer .footer_bot .foot_bot_copy .foot_bot_left .copyrights a:hover {
    color:#004F90;
}
#footer .footer_bot .foot_bot_copy .foot_bot_left .copyrights .web_accessibility {
    position: relative;
    top:-45px;
}
#footer .footer_bot .foot_bot_copy .foot_bot_left .copyrights .web_accessibility img{
    max-width: 120px;
}

/* quick 퀵메뉴 */
#quick_top {
    position:fixed;
    right:50px;
    top:50%;
    transform:translateY(-50%);
    z-index: 5;
}
#quick_top .quick_control {
    width:100%;
    max-width:50px;
    margin:0 auto;
    padding-top:5px;
    height:28px;
    background-color:#fff;
    border-radius: 20px 20px 0 0;
}
#quick_top .quick_control .quick_btn {
    display:block;
    height:100%;
    font-size:0.74em;
    font-weight:600;
    color:#004F90;
    letter-spacing:-0.36px;
    text-align:center;
    background-image:url(../img/layout/quick_close.png);
    background-repeat:no-repeat;
    background-position:center 94%;
}
#quick_top .quick_control .quick_btn.open {
    background-image:url(../img/layout/quick_open.png);
}
#quick_top ul {
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:15px 10px;
    border-radius: 10px 10px 0px 10px;
    border: 1px solid #FFF;
    background-color: rgba(255, 255, 255, 0.40);
    box-shadow: 0px 10px 10px 0px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(2px);
}
#quick_top ul li {
    opacity: 1;
    height: auto; /* 높이가 자동으로 맞춰지도록 설정 */
    visibility: visible;
    transition: opacity 0.2s, height 0.8s, visibility 0.2s;
    transition-timing-function: ease-in-out;
}
#quick_top ul .go_top {
    width:50px;
    height:50px;
    border-radius:50%;
    background-color:#FFF;
    box-shadow: 0px 3px 7px 0px rgba(49, 84, 114, 0.20);
    display:flex;
    flex-direction:column;
    gap:4px;
    align-items:center;
    justify-content:center;
}
#quick_top ul .go_top span {
    font-size:0.77em;
    font-weight:500;
    color:#444;
    font-family: 'S-CoreDream';
}
#quick_top ul.open {
    gap:0;
}
#quick_top ul.open li:not(.top_btn) {
    opacity: 0;
    height: 0;
    visibility: hidden;
    transition:height 0.8s;
    transition-timing-function: ease-in-out;
}



/* title 서브 타이틀 */
#title .title {
    position: relative;
}
#title .title .background_point {
    position:absolute;
    right: 14%;
    top: 10px;
    width: 429px;
    height: 237px;
}
#title .title .title_center {
    background-image:url(../img/layout/title_bg.png);
    background-repeat:no-repeat;
    background-position:90% 70%;
    padding: 0;
    padding-bottom: 50px;
}
#title .desc .desc_box {
    height:200px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content: center;
    gap:5px;
}
#title .desc .desc_box h2 {
    font-size:2.22em;
    font-weight:700;
    font-family: 'SUITE', sans-serif;
}
#title .desc .desc_box .loc {
    display:flex;
    align-items: center;
    justify-content:center;
    text-align:center;
    gap:5px;
}
#title .desc .desc_box .loc li {
    font-size:0.77em;
    font-weight:200;
    color:#444;
    font-family: 'S-CoreDream';
}
#title .desc .desc_box .loc li a {
    display:block;
}
#title .desc .desc_box .loc li img {
    display: block;
}
#title .navi .khwrap {
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-radius: 20px 0px;
    box-shadow: 0px 5px 10px 5px rgba(49, 84, 114, 0.20);
    height: 50px;
    background-color:#fff;
}
#title .navi .khwrap .subnavWrap {
    display:flex;
    align-items:stretch;
    height: 100%;
}
#title .navi .khwrap .subnavWrap .nv1 {
    width:60px;
    background-color:#192D60;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius: 20px 0 20px 0;
    position: relative;
    z-index: 9;
}
#title .navi .khwrap .subnavWrap .nv1 img {
    display:block;
}
#title .navi .khwrap .subnavWrap .nv2 {
    width:300px;
    background-color:#004F90;
    border-radius: 0px 0px 30px 0px;
    position: relative;
    left:-20px;
    z-index: 8;
    background-image:url(../img/layout/sub_menu_drop01.png);
    background-repeat:no-repeat;
    background-position:92% center;
}
#title .navi .khwrap .subnavWrap .nv3 {
    width:310px;
    background-color:#D7EDFF;
    border-radius: 0px 0px 30px 0px;
    position: relative;
    left:-45px;
    z-index: 7;
    background-image:url(../img/layout/sub_menu_drop02.png);
    background-repeat:no-repeat;
    background-position:92% center;
}
#title .navi .khwrap .subnavWrap .naviBtn {
    width: 100%;
    height: 100%;
    background:unset;
    border:none;
    color:#fff;
    font-size:1em;
    font-weight:500;
    font-family: 'S-CoreDream';
    text-align:center;
    padding: 0px 20px;
}
#title .navi .khwrap .subnavWrap .nv3 .naviBtn {
    color:#192D60;
}
#title .navi .khwrap .option_btns {
    width:120px;
    height:100%;
    display:flex;
    align-items:stretch;
    border-radius: 20px 0px 20px 0px;
    background-color:#192D60;
    position: relative;
    z-index: 3;
}
#title .navi .khwrap .option_btns a {
    flex: 1;
    background-repeat:no-repeat;
    background-position: center center;
}
#title .navi .khwrap .option_btns .print {
    background-image:url(../img/layout/print_icon.png);
}
#title .navi .khwrap .option_btns .share {
    background-image:url(../img/layout/share_icon.png);
}


/* 서브 타이틀 이미지 포인트 (둥둥) */
#title #st0 .background_point .left_point {
    background-image:url(../img/layout/title01_point01.png);
    background-repeat:no-repeat;
    background-position:center center;
    width:43px;
    height:123px;
    position: absolute;
    left: 0;
    top: 30px;
    animation: title_point_left 6s infinite linear; /* linear로 변경하여 일정한 속도 */
    animation-direction: alternate; /* 순방향과 역방향 번갈아 재생 */
}
#title #st0 .background_point .middle_point {
    background-image:url(../img/layout/title01_point02.png);
    background-repeat:no-repeat;
    background-position: center center;
    width:256px;
    height:201px;
    position: relative;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    animation: title_point_middle 6s infinite linear; /* linear로 변경하여 일정한 속도 */
    animation-direction: alternate; /* 순방향과 역방향 번갈아 재생 */
}
#title #st0 .background_point .right_point {
    background-image:url(../img/layout/title01_point03.png);
    background-repeat:no-repeat;
    background-position: center center;
    width:43px;
    height:127px;
    position: absolute;
    right: 0;
    top: 20px;
    animation: title_point_right 6s infinite linear; /* linear로 변경하여 일정한 속도 */
    animation-direction: alternate; /* 순방향과 역방향 번갈아 재생 */
}

#title #st1 .background_point .left_point {
    background-image:url(../img/layout/title02_point01.png);
    background-repeat:no-repeat;
    background-position:center center;
    width:90px;
    height:149px;
    position: absolute;
    left: 0;
    top: 10px;
    animation: title_point_left 6s infinite linear; /* linear로 변경하여 일정한 속도 */
    animation-direction: alternate; /* 순방향과 역방향 번갈아 재생 */
}
#title #st1 .background_point .middle_point {
    background-image:url(../img/layout/title02_point02.png);
    background-repeat:no-repeat;
    background-position: center center;
    width:112px;
    height:194px;
    position: relative;
    left: 50%;
    top: 0px;
    transform: translateX(-50%);
    animation: title_point_middle 6s infinite linear; /* linear로 변경하여 일정한 속도 */
    animation-direction: alternate; /* 순방향과 역방향 번갈아 재생 */
}
#title #st1 .background_point .right_point {
    background-image:url(../img/layout/title02_point03.png);
    background-repeat:no-repeat;
    background-position: center center;
    width:56px;
    height:145px;
    position: absolute;
    right: 0;
    top:0px;
    animation: title_point_right 6s infinite linear; /* linear로 변경하여 일정한 속도 */
    animation-direction: alternate; /* 순방향과 역방향 번갈아 재생 */
}

#title #st2 .background_point .left_point {
    background-image:url(../img/layout/title03_point01.png);
    background-repeat:no-repeat;
    background-position:center center;
    width:104px;
    height:160px;
    position: absolute;
    left: 15px;
    top: 5px;
    animation: title_point_left 6s infinite linear; /* linear로 변경하여 일정한 속도 */
    animation-direction: alternate; /* 순방향과 역방향 번갈아 재생 */
}
#title #st2 .background_point .middle_point {
    background-image:url(../img/layout/title03_point02.png);
    background-repeat:no-repeat;
    background-position: center center;
    width:55px;
    height:168px;
    position: relative;
    left: 50%;
    top: 30px;
    transform: translateX(-50%);
    animation: title_point_middle 6s infinite linear; /* linear로 변경하여 일정한 속도 */
    animation-direction: alternate; /* 순방향과 역방향 번갈아 재생 */
}
#title #st2 .background_point .right_point {
    background-image:url(../img/layout/title03_point03.png);
    background-repeat:no-repeat;
    background-position: center center;
    width:65px;
    height:145px;
    position: absolute;
    right: 30px;
    top: 5px;
    animation: title_point_right 6s infinite linear; /* linear로 변경하여 일정한 속도 */
    animation-direction: alternate; /* 순방향과 역방향 번갈아 재생 */
}

#title #st3 .background_point .left_point {
    background-image:url(../img/layout/title04_point01.png);
    background-repeat:no-repeat;
    background-position:center center;
    width:59px;
    height:146px;
    position: absolute;
    left: 15px;
    top: 10px;
    animation: title_point_left 6s infinite linear; /* linear로 변경하여 일정한 속도 */
    animation-direction: alternate; /* 순방향과 역방향 번갈아 재생 */
}
#title #st3 .background_point .middle_point {
    background-image:url(../img/layout/title04_point02.png);
    background-repeat:no-repeat;
    background-position: center center;
    width:119px;
    height:173px;
    position: relative;
    left: 40%;
    top: 30px;
    transform: translateX(-50%);
    animation: title_point_middle 6s infinite linear; /* linear로 변경하여 일정한 속도 */
    animation-direction: alternate; /* 순방향과 역방향 번갈아 재생 */
}
#title #st3 .background_point .right_point {
    background-image:url(../img/layout/title04_point03.png);
    background-repeat:no-repeat;
    background-position: center center;
    width:63px;
    height:155px;
    position: absolute;
    right: 100px;
    top: 5px;
    animation: title_point_right 6s infinite linear; /* linear로 변경하여 일정한 속도 */
    animation-direction: alternate; /* 순방향과 역방향 번갈아 재생 */
}

#title #st4 .background_point .left_point {
    background-image:url(../img/layout/title05_point01.png);
    background-repeat:no-repeat;
    background-position:center center;
    width:82px;
    height:130px;
    position: absolute;
    left: -10px;
    top: 20px;
    animation: title_point_left 6s infinite linear; /* linear로 변경하여 일정한 속도 */
    animation-direction: alternate; /* 순방향과 역방향 번갈아 재생 */
}
#title #st4 .background_point .middle_point {
    background-image:url(../img/layout/title05_point02.png);
    background-repeat:no-repeat;
    background-position: center center;
    width:175px;
    height:165px;
    position: relative;
    left: 45%;
    top: 30px;
    transform: translateX(-50%);
    animation: title_point_middle 6s infinite linear; /* linear로 변경하여 일정한 속도 */
    animation-direction: alternate; /* 순방향과 역방향 번갈아 재생 */
}
#title #st4 .background_point .right_point {
    background-image:url(../img/layout/title05_point03.png);
    background-repeat:no-repeat;
    background-position: center center;
    width:45px;
    height:144px;
    position: absolute;
    right: 60px;
    top: 5px;
    animation: title_point_right 6s infinite linear; /* linear로 변경하여 일정한 속도 */
    animation-direction: alternate; /* 순방향과 역방향 번갈아 재생 */
}

#title #st5 .background_point .left_point {
    background-image:url(../img/layout/title06_point01.png);
    background-repeat:no-repeat;
    background-position:center center;
    width:52px;
    height:151px;
    position: absolute;
    left: 0;
    top: 10px;
    animation: title_point_left 6s infinite linear; /* linear로 변경하여 일정한 속도 */
    animation-direction: alternate; /* 순방향과 역방향 번갈아 재생 */
}
#title #st5 .background_point .middle_point {
    background-image:url(../img/layout/title06_point02.png);
    background-repeat:no-repeat;
    background-position: center center;
    width:173px;
    height:165px;
    position: relative;
    left: 50%;
    top: 35px;
    transform: translateX(-50%);
    animation: title_point_middle 6s infinite linear; /* linear로 변경하여 일정한 속도 */
    animation-direction: alternate; /* 순방향과 역방향 번갈아 재생 */
}
#title #st5 .background_point .right_point {
    background-image:url(../img/layout/title06_point03.png);
    background-repeat:no-repeat;
    background-position: center center;
    width:55px;
    height:138px;
    position: absolute;
    right: 60px;
    top: 25px;
    animation: title_point_right 6s infinite linear; /* linear로 변경하여 일정한 속도 */
    animation-direction: alternate; /* 순방향과 역방향 번갈아 재생 */
}

#title #st6 .background_point .left_point {
    background-image:url(../img/layout/title07_point01.png);
    background-repeat:no-repeat;
    background-position:center center;
    width:41px;
    height:160px;
    position: absolute;
    left: 0;
    top: 5px;
    animation: title_point_left 6s infinite linear; /* linear로 변경하여 일정한 속도 */
    animation-direction: alternate; /* 순방향과 역방향 번갈아 재생 */
}
#title #st6 .background_point .middle_point {
    background-image:url(../img/layout/title07_point02.png);
    background-repeat:no-repeat;
    background-position: center center;
    width:96px;
    height:149px;
    position: relative;
    left: 40%;
    top:55px;
    transform: translateX(-50%);
    animation: title_point_middle 6s infinite linear; /* linear로 변경하여 일정한 속도 */
    animation-direction: alternate; /* 순방향과 역방향 번갈아 재생 */
}
#title #st6 .background_point .right_point {
    background-image:url(../img/layout/title07_point03.png);
    background-repeat:no-repeat;
    background-position: center center;
    width:120px;
    height:144px;
    position: absolute;
    right: 80px;
    top: 15px;
    animation: title_point_right 6s infinite linear; /* linear로 변경하여 일정한 속도 */
    animation-direction: alternate; /* 순방향과 역방향 번갈아 재생 */
}

#title .title .navi .navimenu {
    position: absolute;
    width: 92%;
    border: 1px solid #ddd;
    background-color: #fff;
    overflow: hidden;
    top: 130%;
    right:0;
    padding:10px 20px;
    border-radius:0 20px 0 20px;
    box-shadow: 0px 5px 10px 5px rgba(49, 84, 114, 0.20);
}
#title .title .navi .nv2 .navimenu li,
#title .title .navi .nv3 .navimenu li {
    border-bottom:1px dashed #ddd;
}
#title .title .navi .nv2 .navimenu li:last-child,
#title .title .navi .nv3 .navimenu li:last-child {
    border-bottom:none;
}
#title .title .navi .navimenu a {
    display: block;
    font-size:0.94em;
    padding:10px;
}
#title .title .navi .navimenu a:hover,
#title .title .navi .navimenu a:focus {
    color:#004F90;
}

/*---------------반응형 미디어쿼리----------------*/

@media (max-width:1800px) {
    #global .depth2 .depth2_title {
        width: 30%;
        padding-left: 100px;
    }
    #global .depth2 ul {
        width:70%;
        padding-right:100px;
    }

    #quick_top {
        right:30px;
    }

    #category .category .category_inn .category_wrap {
        gap:60px;
    }
    #category .category .depth1 .dl1 {
        gap:30px;
    }

    #title .title .background_point {
        right:8%;
    }
}
@media (max-width:1600px) {
    #bbs,
    #sub_container,
    .mir_center {
        padding-left:20px;
        padding-right:20px;
    }
    #title .title .title_center {
        padding-left:20px;
        padding-right:20px;
    }
}
@media (max-width:1440px) {


    #global .depth1 {
        gap:10px;
    }
    #global .depth1 .dl1.sel .da1:after {
        bottom:-8px;
    }
    #global .depth2 .depth2_title {
        display:none;
    }
    #global .depth2 ul {
        width:100%;
        padding-right: 20px;
    }
    #footer .footer_top .family_site {
        padding-left:0;
    }
    #footer .footer_bot .foot_bot_btns,
    #footer .footer_bot .foot_bot_copy .foot_bot_copy_cont {
        padding-left:20px;
        padding-right:20px;
    }

    #category .category .depth1 .dl1 {
        padding:20px 0;
    }



    #title .desc .desc_box {
        align-items:flex-start;
        height:175px;
    }
    #title .title .background_point {
        right:5%;
        height:165px;
    }
    #title #st0 .background_point .left_point,
    #title #st0 .background_point .middle_point,
    #title #st0 .background_point .right_point,
    #title #st1 .background_point .left_point,
    #title #st1 .background_point .middle_point,
    #title #st1 .background_point .right_point,
    #title #st2 .background_point .left_point,
    #title #st2 .background_point .middle_point,
    #title #st2 .background_point .right_point,
    #title #st3 .background_point .left_point,
    #title #st3 .background_point .middle_point,
    #title #st3 .background_point .right_point,
    #title #st4 .background_point .left_point,
    #title #st4 .background_point .middle_point,
    #title #st4 .background_point .right_point,
    #title #st5 .background_point .left_point,
    #title #st5 .background_point .middle_point,
    #title #st5 .background_point .right_point,
    #title #st6 .background_point .left_point,
    #title #st6 .background_point .middle_point,
    #title #st6 .background_point .right_point {
        background-size:80% auto;
    }


}
@media (max-width:1200px) {
    #header .header_bot_box .logo {
        width:200px;
    }
    #header .header_bot_box .logo img {
        width:100%;
    }
    #global .depth1 .dl1 .da1 {
        padding-left:5px;
        padding-right:5px;
    }
    #global .depth1 .dl1.sel .da1:after {
        bottom:-6px;
    }
    #global .depth2 {
        top:124px;
    }


    #category .category .depth1 .dl1 .da1 {
        width:165px;
    }
    #category .category .depth2 .dl2 {
        min-width:170px;
    }

}
@media (max-width:1024px) {
    #bbs, #sub_container, .mir_center {
        padding-left:10px;
        padding-right:10px;
    }
    #title .title .title_center {
        padding-left:10px;
        padding-right:10px;
    }

    #header .header_top_box .head_top_btns a {
        padding:5px 10px;
        font-size:0.77em;
    }
    #header .header_top_box .user {
        display:none;
    }
    #header .header_bot {
        padding:15px 0;
    }
    #header .header_bot_box .gnb {
        display:none;
    }
    #header .header_bot_box .allmenu_mo {
        display:block;
    }

    #category .category.sel {
        display: block;
        visibility: visible;
        overflow-y: scroll;
        z-index: 1000000000;
        height: 100%;
        width: 100%;
        padding: 0;
        border-radius: 0;
        background-color: #fff;
    }
    #category .category .category_inn {
        padding: 0;
        background-color: #fff;
        height: 100%;
        width: 100%;
        border-radius: 0;
        flex-direction:column;
    }
    #category .category .category_inn .category_wrap {
        display: block;
        width:100%;
    }
    #category .category_title_sitemap {
        display:none;
    }
    #category .category .category_inn .category_title {
        display:block;
        background-color:#004F90;
        padding:20px 30px;
        width:100%;
    }
    #category .category .category_inn .category_title h1 {
        color:#fff;
        font-size:18px;
        font-weight:600;
    }
    #category .category .category_inn .search {
        display:block;
        width:100%;
        padding:15px;
        border-bottom:1px solid #ddd;
    }
    #category .category .category_inn .search fieldset {
        display:flex;
        border:2px solid #004F90;
        border-radius:30px 30px 0 30px;
    }
    #category .category .category_inn .search input {
        flex:1;
        border:none;
        background-color:unset;
        padding:0 15px;
    }
    #category .category .category_inn .search input:focus {
        box-shadow:unset;
        border:none!important;
    }
    #category .category .category_inn .search button {
        width:45px;
        height:45px;
        background-color:#004F90;
        background-image:url(../img/layout/search_mo.png);
        background-repeat:no-repeat;
        background-position: center center;
        border:none;
        border-radius:9999px 9999px 0 9999px;
    }
    #category .category .depth1 {
        display: block;
        padding: 0;
    }
    #category .category .depth1 .dl1 {
        display:block;
        padding:0;
        width:100%;
    }
    #category .category .depth1 .dl1 .da1 {
        color:#222;
        width:100%;
        padding:20px 30px;
        font-family: 'Pretendard';
        font-size:1.11em;
        font-weight: 400;
        border-bottom:1px solid #ddd;
        background-image:url(../img/layout/mo_menu_off.png);
        background-repeat:no-repeat;
        background-position:97% center;
    }
    #category .category .depth1 .dl1.sel .da1{
        background-image:url(../img/layout/mo_menu_on.png);
    }
    #category .category .depth2 {
          display:none;  
        flex-direction:column;
        background-color:#f9f9f9;
        gap: 0;
    }
    /* 1뎁스에 .sel이 붙었을 때만 표시 */
    #category .category .dl1.sel .depth2 {
        display:flex;
    }
    #category .category .depth2 .dl2 {
        width:100%;
  
        border-bottom:1px solid #ddd;
    }
    #category .category .depth2 .dl2 .da2 {
        color:#444;
        font-size:1em;
        font-weight:400;
        color:#004F90;
        padding:20px 30px;
        display:block;
    }
    #category .mo_user {
        display:block;
        padding:20px;
        width:100%;
    }
    #category .mo_user .user {
        display:flex;
        flex-direction:column;
        gap:15px;
    }
    #category .mo_user .user a {
        display:block;
        border:1px solid #ddd;
        border-radius:15px;
        padding:15px 10px;
        font-size:1em;
        font-weight:400;
        color:#222;
        text-align:center;
    }
    #category .mo_user .user a.login,
    #category .mo_user .user a.logout {
        border-color:#004F90;
        background-color:#004F90;
        color:#fff;
    }
    #category .close {
        position:absolute;
        width:20px;
        height:20px;
        right:20px;
        top:20px;
        background-image:url(../img/layout/allmenu_close_mo.png);
        background-repeat:no-repeat;
        background-position:center center;
    }
    #category .close img {
        display:none;
    }

    #footer .footer_bot .foot_bot_btns,
    #footer .footer_bot .foot_bot_copy .foot_bot_copy_cont {
        padding-left:10px;
        padding-right:10px;
    }

    #quick_top {
        right:10px;
        z-index: 999;
    }
    #quick_top .quick_control {
        max-width:40px;
    }
    #quick_top ul {
        gap:6px;
        padding:10px;
    }
    #quick_top ul li:not(.top_btn) img {
        width:40px;
    }
    #quick_top ul .go_top {
        width:40px;
        height:40px;
    }

}
@media (max-width:991px) {
    #footer .footer_bot .foot_bot_copy .foot_bot_left .foot_txt {
        gap:10px;
        flex-wrap: wrap;
    }



    #title .navi .khwrap .option_btns {
        display:none;
    }

    #title #st0 .background_point .left_point {
        left: 5%;
    }
    #title #st0 .background_point .middle_point {
        left: 52%;
    }
    #title #st1 .background_point .left_point {
        left: 5%;
    }
    #title #st1 .background_point .middle_point {
        left: 52%;
    }
    #title #st2 .background_point .left_point {
        left: 10%;
    }
    #title #st2 .background_point .middle_point {
        left: 52%;
    }
    #title #st2 .background_point .right_point {
        right: 10%;
    }
    #title #st3 .background_point .left_point {
        left: 13%;
    }
    #title #st3 .background_point .middle_point {
        left: 52%;
    }
    #title #st3 .background_point .right_point {
        right: 10%;
    }
    #title #st4 .background_point .left_point {
        left: 5%;
    }
    #title #st4 .background_point .middle_point {
        left: 50%;
    }
    #title #st4 .background_point .right_point {
        right: 5%;
    }
    #title #st5 .background_point .left_point {
        left: 10%;
    }
    #title #st5 .background_point .middle_point {
        left: 53%;
    }
    #title #st5 .background_point .right_point {
        right: 3%;
    }
    #title #st6 .background_point .left_point {
        left: 12%;
    }
    #title #st6 .background_point .middle_point {
        left: 50%;
        top: 35px;
    }
    #title #st6 .background_point .right_point {
        right: 0;
    }



}
@media (max-width:768px) {
    #footer .footer_bot .foot_bot_btns {
        gap:23px;
    }
    #footer .footer_bot .foot_bot_btns a::after {
        right:-13px;
    }
    #footer .footer_bot .foot_bot_copy .foot_bot_left .copyrights .web_accessibility {
        position:unset;
    }

    #allsearch_pop .search_pop_contain {
        max-width: 300px;
        width: 94%;
    }

    #title .title .title_center {
        background-image:none;
    }
    #title .title .background_point {
        display:none;
    }
    #title .desc .desc_box {
        height:140px;
        align-items: center;
    }
}
@media (max-width:640px) {

    #footer .footer_bot .foot_bot_btns {
        justify-content:center;
    }

    #footer .footer_bot .foot_bot_copy .foot_bot_left .foot_txt {
        gap:5px;
    }
    #footer .footer_bot .foot_bot_copy .foot_bot_left .visit_count .visit_wrap {
        justify-content:center;
    }



    #title .navi .khwrap {
        width:100%;
        background-color:#D7EDFF;
    }
    #title .title .title_center {
        padding-bottom:30px;
    }
    #title .navi .khwrap .subnavWrap {
        width:100%;
   
    }
    #title .desc .desc_box {
        height:120px;
    }
    #title .desc .desc_box h2 {
        font-size:2em;
    }
    #title .navi .khwrap .subnavWrap .nv2 {
        display:none;
    }
    #title .navi .khwrap .subnavWrap .nv3 {
        border-radius:0 0 20px 0;
        width:calc(100% + 20px);
        left:-20px;
    }
    #title .title .navi .navimenu {
        top: 115%;
    }


    #quick_top {
        top: auto;
        bottom: 5%;
        transform:unset;
    }
}
@media (max-width:480px) {}
@media (max-width:320px) {}


/* ★접근성: hidden 상태와 시각 표시 일치 */
#main-menu .depth2[hidden],
#global    .depth2[hidden] { display: none; }
#category .depth2[hidden] { display: none !important; }