@charset "utf-8";

.containerTop {
    height: 320px;
    text-align: center;
    color: #fff;
    background: url(../images/banner0.png) no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
.banner_change_one {
background: url(../images/banner1.png) no-repeat;
}
.banner_change_two {
background: url(../images/banner2.png) no-repeat;
}
.banner_change_three {
background: url(../images/banner3.png) no-repeat;
}

body {min-width: 1400px;}
.header {background: #fff;}
.header > .inner {position: relative; width: 1500px; margin: 0 auto;}
.header .left_col {display: flex; justify-content: space-between; align-items: center; margin-right: 50px;}
.header .logo {display: inline-block; width: 250px;}
.header .logo img {display: block; max-width: 250px;}
.header .go {display: inline-block; margin-left: 12px; vertical-align: 0px;}
.header .go img {display: block;}

.total_search {position: absolute; left: 50%; top: 17px; transform: translateX(-50%);}
.total_search .search_box {position: relative; width: 400px; height: 45px;}
.total_search .search_box input[type=text] {width: 100%; padding-right: 20px; height: 45px; border: 0; border-bottom: 1px solid #bfbfbf; color: #666; font-size: 16px;}
.total_search .search_box button {display: block; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 19px; height: 19px; border: 0; font-size: 0; background: url(../images/ico_search.png) no-repeat;}
.total_search .list {margin-top: 13px; font-size: 0; text-align: center;}
.total_search .list li {display: inline-block; vertical-align: top;}
.total_search .list li + li {margin-left: 20px;}
.total_search .list li a {display: block; color: #888; font-size: 14px;}
.total_search .list li a strong {color: #222;}

.top_menu {margin-left: 15px; display: flex; align-items: center;}
.top_menu > span {display: inline-block; height: 24px; font-weight: 300; line-height: 24px; vertical-align: top;}
.top_menu .t {color: #fff; display: flex; align-items: center;}
.top_menu .t i {font-size: 22px; margin-right: 8px;}
.top_menu .t span {color: #fff; font-weight: 700;}
.top_menu .d {margin-left: 14px; color: #888;}

.gnb {display: flex; align-items:center;}
.gnb .menu {display: flex; align-items: center; text-align: center; width: 760px; margin-left: 100px; height: 100px; margin-right: 100px;}
.gnb ul::after {content: ""; display: block; clear: both;}
.gnb ul li {float: left;}
.gnb ul li a {display: block; color: #333; font-size: 20px;}

.gnb ul li a.manager {color: #004986;}

.sub_menu {
    padding: 30px;
    width: 1301px;
    background: #070853f5;
    position: absolute;
    top: 140px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: none; /* 기본적으로 감추기 */
}
.sub_menu a {
    color: #fff;
}

.sub_menu.active {
    display: block; /* 활성화된 경우에만 보이기 */
}

.submenu_list {
    position: relative;
}

.sub_ul li {
margin-right: 30px;
position: relative;
}

.sub_ul li:last-child::after {
    display: none;
}

.sub_ul li::after {
    content: "";
    width: 2px;
    height: 18px;
    background: #fff;
    position: absolute;
    right: -16px;
    top: 3px;
}

.sub_ul {
    display: flex;
    position: absolute;
    top: -13px;
}

.submenu_list .sub_list_nav:nth-child(1) .sub_ul {left: 205px;}
.submenu_list .sub_list_nav:nth-child(2) .sub_ul {left: 320px;}
.submenu_list .sub_list_nav:nth-child(3) .sub_ul {left: 435px;}
.submenu_list .sub_list_nav:nth-child(4) .sub_ul {left: 550px;}
.submenu_list .sub_list_nav:nth-child(5) .sub_ul {left: 692px;}
.submenu_list .sub_list_nav:nth-child(6) .sub_ul {left: 810px;}
.submenu_list .sub_list_nav:nth-child(7) .sub_ul {left: 924px;}

.all_menu {display: none; position: absolute; left: 0; top: 140px; width: 100%; min-width: 1300px; border-bottom: 1px solid #ddd; background: #fff; z-index: 99;}
.all_menu .inner {width: 1300px; margin: 0 auto;}
.all_menu .inner::after {content: ""; display: block; clear: both;}
.all_menu .inner > div {float: left; width: 145px; height: 350px; padding: 14px;}
.all_menu .inner > div h2 {color: #222; font-size: 16px; font-weight: 700;}
.all_menu .inner > div h3 {color: #777; font-size: 15px; font-weight: 300;}
.all_menu .inner > div ul li + li {margin-top: 13px;}
.all_menu .inner > div ul li a {color: #777; font-size: 14px; font-weight: 300;}
.all_menu .inner > div ul li a:hover {color: #222; font-weight: 400; text-decoration: underline;}
.all_menu .inner > div ul + h3 {margin-top: 20px;}
.all_menu .inner > div h2 + h3 {margin-top: 30px;}
.all_menu .inner > div h2 + ul {margin-top: 30px;}
.all_menu .inner > div h3 + ul {margin-top: 12px;}

.all_menu .inner > div.admin {width: 142px; background: #f2f2f2; padding: 15px;}
.all_menu .inner > div.admin h2 {color: #004986;}
.all_menu .inner > div.admin ul li {position: relative; padding-left: 10px;}
.all_menu .inner > div.admin ul li::before {content: ""; display: block; position: absolute; left: 0; top: 12px; width: 2px; height: 2px; background: #666;}
.all_menu .inner > div.admin ul li + li {margin-top: 6px;}
.all_menu .inner > div.admin ul li a {font-size: 13px;}

.all_menu_user {display: none; position: absolute; left: 0px; top: 140px; width: 1300px; min-width: 1300px; background: #fff; z-index: 99;border-radius: 0 0 15px 15px;}
.all_menu_user .inner {width: 1300px; margin: 0 auto; position: relative; border-radius: 0 0 10px 10px;}
.all_menu_user .inner::after {content: ""; display: block; clear: both;}
.all_menu_user .inner > div {float: left; width: 125px; height: 320px; text-align: center; padding-top: 15px;}
.all_menu_user .inner > div:first-child {padding-left: 0;}
.all_menu_user .inner > div h2 {color: #222; font-size: 16px; font-weight: 700;}
.all_menu_user .inner > div h3 {color: #777; font-size: 15px; font-weight: 300;}
.all_menu_user .inner > div ul li + li {margin-top: 13px;}
.all_menu_user .inner > div ul li a {color: #fff; font-size: 15px; font-weight: 300;}
.all_menu_user .inner > div ul li a:hover {color: #b4bcf3; font-weight: 400;}
.all_menu_user .inner > div ul + h3 {margin-top: 20px;}
.all_menu_user .inner > div h2 + h3 {margin-top: 30px;}
.all_menu_user .inner > div h2 + ul {margin-top: 30px;}
.all_menu_user .inner > div h3 + ul {margin-top: 12px;}
.all_menu_user .inner > div > img {width: 185px}

.area{
    background: #33316b;  
    background: -webkit-linear-gradient(to left, #8f94fb, #4e54c8);  
    width: 100%;
    height: 280px;
    border-radius: 0 0 10px 10px;
}

.circles{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.circles li{
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    animation: animate 25s linear infinite;
    bottom: -150px;
    
}

.circles li:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}


.circles li:nth-child(2){
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.circles li:nth-child(3){
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.circles li:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.circles li:nth-child(5){
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.circles li:nth-child(6){
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}

.circles li:nth-child(7){
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}

.circles li:nth-child(8){
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}

.circles li:nth-child(9){
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}

.circles li:nth-child(10){
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}



@keyframes animate {

    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }

    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }

}

.all_menu_user .inner > div:nth-child(1) {
    display: flex;
    flex-direction: column;
}
.all_menu_user .inner > div:nth-child(2) {
    position: absolute;
    left: 200px;
}
.all_menu_user .inner > div:nth-child(3) {
    position: absolute;
    left: 340px;
}
.all_menu_user .inner > div:nth-child(4) {
    position: absolute;
    left: 482px;
}
.all_menu_user .inner > div:nth-child(5) {
    position: absolute;
    left: 637px;
}
.all_menu_user .inner > div:nth-child(6) {
    position: absolute;
    left: 792px;
}
.all_menu_user .inner > div:nth-child(7) {
    position: absolute;
    left: 934px;
}
.all_menu_user .inner > div:nth-child(8) {
    position: absolute;
    left: 1083px;
}

.all_menu_user .inner .img_box {
width: 185px;
}

.menu_deco {
    width: 100%;
    height: 100%;
    background-color: #004985;
}


.user_menu {margin-left: auto; margin-right: 10px;}
.allmenu_user {color: #000; display: flex; align-items: center;}
.allmenu_user i {font-size: 28px;}

.admin_section {height: 50px; background: #041e40; display: flex;justify-content: space-between; align-items: center;}
.util_menu { margin-right: 15px; margin-left: 15px; display: flex; align-items: center;}
.util_menu button {display: flex; align-items: center; justify-content: center; background-color: #fff;margin-right: 10px;}
.util_menu button img {width: 34px; height: 28px;}
.util_menu ul {display: flex; justify-content: center; align-items: center;} 
.util_menu ul li {display: inline-block; vertical-align: top;}
.util_menu ul li + li {margin-left: 17px;}
.util_menu ul li a {display: flex; color: #000; width: 100%; height: 50px; font-size: 14px; align-items: center;}
.util_menu ul li a span {}
.util_menu .login {font-size: 17px;}
.util_menu .logout {font-size: 17px; font-weight: bold; color: #888;}
.util_menu .mail {position: relative; background: url(../images/ico_mail.png) no-repeat;}
.util_menu .mail span {display: block; position: absolute; right: -6px; top: -6px; width: 26px; height: 26px; border-radius: 50%; color: #fff; font-size: 16px; line-height: 26px; text-align: center; background: #eb6877;}
.util_menu .allmenu {}
.util_menu .allmenu.on {}

.menu {width: 760px;}

#year-sections {max-height: 700px; overflow-y: scroll; }

.sub_layout {
}
.sub_in {width: 1200px; margin: 0 auto;}

.layout {display: table; width: 100%; table-layout: fixed; border-bottom: 1px solid #dcdcdc;}

/* sub navigation */
.nav {display: flex; width: 100%; justify-content: center; background: #eee; height: 75px;}
.nav ul {display: flex; justify-content: center; align-items: center;}
.nav ul li {margin-right: 18px; position: relative;}
.nav ul li::after {content: ''; display: block; position: absolute; top: 7px; left: 55px; width: 1px; height: 18px; background: #cdcdcd;}
.nav ul li:nth-child(2):after {top: 7px; left: 72px;}
.nav ul li:nth-child(3):after {display: none;}
.nav ul li:nth-child(2) {margin-left: 18px;}
.nav ul li:nth-child(3) {margin-left: 18px; margin-right: 0px;}
.nav ul li a {font-size: 20px; color: #666;}

.content_wrap {padding:90px 0px;}


/* popup */
.popup {z-index: 10; position: fixed; left: 0; top: 0; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, .7);}
.popup .pop_inner {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 400px; border-radius: 19px; background: #fff;}
.wrap_pop {padding: 20px;}
.pop_container {padding: 29px 40px;}
.pop_container .box_1 {padding: 26px; border: 1px solid #dde2e5; border-radius: 10px;}

.popup .pop_inner h2 {margin: 29px;}

.pop_header {position: relative; height: 94px; border-bottom: 1px solid #dde2e5;}
.pop_header h1 {padding: 42px 29px 0 29px; color: #222; font-size: 24px; font-weight: 700;}
.pop_header .close {display: block; position: absolute; right: 39px; top: 40px; width: 30px; height: 30px; font-size: 0; background: url(../images/ico_pop_close.png) no-repeat;}

/* location */
.location {height: 70px; padding-top: 42px; text-align: right;}
.location ul, .location ul li {display: inline-block; vertical-align: top;}
.location ul li {position: relative; color: #666; font-size: 14px;}
.location ul li + li::before {content: ""; display: inline-block; width: 4px; height: 7px; margin: 0 9px 0 3px; line-height: 18px; background: url(../images/ico_arrow_r_gray_4x7.png) no-repeat; vertical-align: 2px;}
.location ul li:last-child {color: #222; text-decoration: underline;}
.location ul li a {display: inline-block; color: #666; font-size: 14px;}
.location ul li a:hover {color: #222; text-decoration: underline;}
.location ul li a.home {position: relative; padding-left: 19px;}
.location ul li a.home::before {content: ""; display: block; position: absolute; left: 0; top: 3px; width: 14px; height: 13px; background: url(../images/ico_home.png) no-repeat;}



.footer {background: #1d1a36;}
.footer .inner {position: relative; width: 1200px; margin: 0 auto;}
.footer .inner::after {content: ""; display: block; clear: both;} 
.footer h1 {float: left; padding-top: 49px;}
.footer h1 a {display: block;}
.footer .mid {float: left; padding-top: 42px; padding-bottom: 42px;}
.footer .mid {color: #888; font-size: 14px;}
.footer .mid address {line-height: 26px; font-size: 15px;}
.footer .mid .copy {margin-top: 11px;}
.footer .right_col {position: absolute; right: 65px; top: 72px;}
.footer .right_col img {width: 275px;}
.footer .right_col a {display: inline-block; height: 35px; vertical-align: top;}

.tit_1 + .txt_1 {margin-top: 42px;}
.txt_1 + .tit_2 {display: flex; justify-content: space-between; margin-top: 35px; align-items: center; margin-bottom: 35px;}
.txt_2 + .condition {margin-top: 17px;}
.txt_2 + .condition2 {margin-top: 17px;}

.tit_2 + .condition {margin-top: 23px;}
.tit_2 + .condition2 {margin-top: 23px;}
.tit_2 + .board_view {margin-top: 43px;}
.tit_2 + .board_view2 {margin-top: 43px;}
.tit_2 + .tit_3 {margin-top: 35px;}
.tit_2 + .tit_4 {margin-top: 34px;}
.tit_2 + .txt_2 {margin-top: 19px;}

.tit_3 + .condition {margin-top: 23px;}
.tit_3 + .condition2 {margin-top: 23px;}
.tit_3 + .board_view2 {margin-top: 24px;}

.tit_4 + .board_view2 {margin-top: 25px;}
.tit_4 + .msg_1 {margin-top: 24px;}

.condition + .board_list {}
.condition + .board_view2 {margin-top: 30px;}

.board_list + .board_list_bot {margin-top: 40px;}
.board_list2 + .board_list_bot {margin-top: 20px;}

.board_view2 + .board_view_bot {}
.board_view2 + .tit_4 {margin-top: 42px;}

.board_view2 + .board_view3 {margin-top: 30px;}
.board_view2 + .board_view4 {margin-top: 30px;}
.board_view2 + .board_top {margin-top: 42px;}

.board_view3 + .board_view_bot {margin-top: 30px;}
.board_view4 + .board_view_bot {margin-top: 30px;}

.board_attach + .board_view_bot {margin-top: 30px;}

.board_top + .board_list {margin-top: 24px;}

.condition + .board_list_top {margin-top: 30px;}
.condition2 + .board_list2 {margin-top: 20px;}
.condition2 + .board_list {margin-top: 30px;}
.condition2 + .board_list_top {margin-top: 30px;}
.board_list_top + .board_list {margin-top: 20px;}


.msg_1 .msg_company {
    color: #004986;
    font-weight: bold;
}


.msg_1 .msg_bold {
    font-weight: bold;
}


.popup_banner {
    display: none;
    position: absolute;
    left: 50px;
    top: 120px;
    width: 450px;
    background-color: white;
    border: none;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.popup_banner .popup-header {
    background-color: #041e40;
    padding: 17px;
    color: white;
    border-radius: 5px 5px 0 0;
    cursor: move;
    position: relative;
}

.popup_banner .close-btn {
    position: absolute;
    top: 5px;
    right: 10px;
    background-color: transparent;
    border: none;
    font-size: 16px;
    color: white;
    cursor: pointer;
}

.xi-check {
    font-size: 22px;
    margin-right: 10px;
    font-weight: bold;
}

.popup_banner .popup-content {
    text-align: center;
    height: fit-content;
}

.popup-image {
    width: 100%;
    height: auto;
    cursor: pointer;
}

.popup_banner label {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    font-size: 14px;
    margin-bottom: 10px;
}

.popup_banner input[type="checkbox"] {
    margin-right: 5px;
}