@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
.container {
    height: auto;
}

/* 2022.09.22_CJH - 다크모드 추가*/
:root {
    --text: #000;
    --bg: #fff;
    --bg2: #ddd;
    --imageBG: #fff;
    --menuBG: rgb(230,230,230,0.7);
    --menuFG: #333;
    --navFG: #000;
    --succBG: rgba(245,245,245,.7);
    --tableBG: #F5F5F5;
    --submitBG: #022F84;
    --tableBG2: #FFF;
}

body {
    background-color: var(--bg);
    color: var(--text);
    scroll-behavior:smooth;
    font-family: 'Noto Sans KR', sans-serif !important;
}

@media (prefers-color-scheme: dark) {
    :root {
        --text: #fff;
        --bg: #222;
        --bg2: #666;
        --imageBG: #000;
        --menuBG: rgb(30,30,30,0.7);
        --menuFG: #AAA;
        --navFG: #fff;
        --succBG: rgba(15,15,15,.7);
        --tableBG: #555;
        --submitBG: #4F8CFC;
        --submitBG2: #222;
    }
}

header { height: 135px; width: 100%; position: fixed; z-index:10; color:white; transition: background-color ease 0.2s;}
header .header_inner {position: relative; width: 100%; height: 135px; margin: 0 auto; right: 0; left: 0}

header .header_inner .logo img {animation: 1s ease 0s 1 logoSliding; width: 250px; padding:10px; margin: 35px; margin-top: 9px !important; padding-bottom: 5%;}
header .header_inner .gnb {position: absolute; right: 0; top: 10px; width: 340px; height: 34px;}
header .header_inner .gnb p { display: inline-block; font-size: 13px; margin: 20px auto; color:white;}
header .header_inner .gnb p > a {text-decoration: none !important;}
header .header_inner .gnb p::after {content: ""; background-color: #333333; display: inline-block; width: 1px; height: 13px; margin: 0 8px -2px}
header .header_inner .gnb p:last-child::after {content: ""; background: none}

header .header_inner .nav {position: absolute; top: 33px; animation: 1s ease-out 0s 1 menuSliding;}
header .header_inner .nav .navlist {overflow:hidden; position:absolute; right: 10%; left: 10%; z-index: 10; font-size: 20px; padding-left: 0 !important}
header .header_inner .nav .navlist > li {float:left; width: 120px;}
header .header_inner .nav .navlist > li + li { text-align: center;}
header .header_inner .nav .navlist > li > a {display: inline-block; font-size: 1.1875rem; height:40px; font-weight: bold; justify-content: space-between; }

header .header_inner .nav .dp2 {overflow: hidden; visibility: hidden; height:20px; opacity:0; margin-top: 20px; transition:opacity .5s ease; z-index: 10}
header .header_inner .nav .dp2.open {opacity:.8}
header .header_inner .nav .dp2 > li {line-height: 1.3; padding:5px 0; }
header .header_inner .nav .dp2 > li > a {color:var(--menuFG); font-size:16px; transition: 400ms ease all; text-align:center;}
header .header_inner .nav .dp2 > li > a:hover { color:#777777;}
/*메뉴 영역 음역 표시*/
header .header_inner .nav_bg {margin-top:8px; background-color: rgb(240,240,240); 
                              height:0; position:absolute; top:115px; height: 0; z-index: 2; 
                              width: 100%; border-radius: 10px 10px 10px 10px;}
/*배너*/
.banner_new {height: 350px; background: url('../../img/announcement.png'); position: relative; background-attachment: fixed; background-position: center center; background-repeat: no-repeat; background-size: cover;}
.banner_new .ban_wrap {height: 5% !important; margin: 0 auto; position: relative; top: 20% !important; bottom: 20% !important;}	
.banner_new .ban_wrap .hd3 {font-size: 56px; font-weight: lighter; color: #FFFFFF; padding-top: 10vh; padding-left: 10vw !important; padding-bottom: 0.5vh !important; text-align: left; animation: 2s ease 0s 1 logoSliding;}
.banner_new .ban_wrap .txt {font-size: 14px; line-height: 1.5; text-align: left; padding-left: 10vw; animation: 4s ease 0s 1 slideInFromOpacity;}

/*배너 헤더 애니메이션*/
@keyframes slideInFromTop {
    0% {transform: translateY(-100%); opacity: 0;}
    100% {transform: translateY(0); opacity: 100%;}
}
/*로고 애니메이션*/
@keyframes logoSliding {
    0% {transform: translateX(-20%); opacity: 0;}
    100% {transform: translateX(0%); opacity: 1;}
}
/*메뉴 애니메이션*/
@keyframes menuSliding {
    0% {transform: translateX(-20%); opacity: 0;}
    100% {transform: translateX(0%); opacity: 1;}
}
@keyframes slideInFromOpacity {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

/*탑버튼*/
/*2022.09.21_CJH 애니메이션, 현대적답게 블러 효과 추가*/
.topbtn {position: fixed;  bottom: 50px; right: 50px; z-index: 100; transition: 400ms ease;}
.topbtn:hover {bottom:65px; scale:105%;}
.topbtn:active {scale:90%; opacity: 0.8;}
.topbtn img {width: 70px; height: 70px; display: inline-block; backdrop-filter: blur(.3em); border-radius:30px;}
.top .quick_menu {box-shadow: 4px 4px 20px rgb(0,0,0,0.6); border-radius: 10px; background-color: var(--menuBG); backdrop-filter:blur(5em); position: absolute; top: 450px; right: 3px; z-index: 2; padding: 5px;}
.top .quick_menu > ul {padding-left: 1rem !important;}
.top .quick_menu > ul > li {padding: 1px; font-size: 0.9375rem; text-align: center;}
.top .quick_menu > ul > li > p { margin-bottom: 10px; font-size: 1.09375rem; text-align: center;}
.top .quick_menu > ul > li .sub_menu {font-size: 17px; margin-top: 10px; margin-bottom: auto; text-align: right;}
.top .quick_menu > ul > li .sub_menu > a { color:gray; padding: 10px; text-decoration: none !important; }

/*메인*/
.main_container {position: relative; margin: auto; top: 38px;}
.sub_container {text-align: center; background-color: rgb(200,200,200);  margin-left:auto; margin-right:auto;  margin-top: 40px; border: 1px solid black;}
.sub_container > p {width: 9%; text-align: center;}
.sub_container .long_title {width: 50%; color: var(--text); text-align: center;}
.sub_container .who_write {width: 22%; text-align: center;}
.sub_container .how_many {width: 9%; text-align: center;}
.sub_sub_con {text-align: center; color: var(--text); margin-left:auto; margin-right:auto; border: 1px solid black; }
.sub_sub_con > p {width: 9%; text-align: center;}
.sub_sub_con .long_title {width: 50%; text-align: center;}
.sub_sub_con .who_write {width: 22%; text-align: center;}
.sub_sub_con .how_many {width: 9%; text-align: center;}
.sub_sub_con .btn {background-color: black; padding:10px; width: 142px; height: 40px; color: white; border-radius:5px; position: relative; left:60px;}

/*검색박스*/
.main_container .searchbar {background-color: var(--bg2); color: var(--text); box-shadow: 0px 6px 10px rgb(0,0,0,0.4); border-bottom: 1px solid gray; width: 400px; padding:10px; border-radius: 10px; transition: 400ms ease all;}
.main_container .searchbar:focus {border-bottom: 6px solid rgb(80 99 163);}
.main_container .searchbar::after {border-bottom: 1px solid gray; transition: 400ms ease all;}

/*푸터*/
footer {border-top: 1px solid #888; margin-top: 0px; z-index: 3; background-color: rgb(80,80,80);}
footer .footer_inner {width: 75vw; height: 140px; margin: 0 auto; position: relative;}
footer .footer_inner .txt {margin-top: 10px}
footer .footer_inner .txt .hd6 {margin-bottom: 13px; color:white;}
footer .footer_inner .txt p {font-size: 0.9375rem !important; color: white;}
footer .footer_inner .txt p + p {margin-top: 4px}
footer .footer_inner .txt p.copy {position: absolute; right: 0; font-size: 0.875rem !important;}

/*Test css: Search (모바일 친화적인 스타일 테스트)*/
.search_test2 {
    position: fixed;
    z-index: 100;
    transition: 400ms ease all;
    bottom: 120px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 8px 8px 20px rgb(0,0,0,0.6);
    background-color: rgb(230,230,230, 0.7);
    backdrop-filter: blur(5em);
    border-radius: 10px;
    padding-left: 10px;
    width: 400px;
    height: 60px;
    padding: 10px;
    font-weight: bold;
    color: darkgray;
    font-size: 17.5px;
}