@charset "utf-8";

* {margin: 0; padding: 0;}
li {list-style: none;}
a {text-decoration: none; color: inherit;}

body {font-family: 'Noto Sans KR', sans-serif; color: #555;}
div {box-sizing: border-box;}
.Montserrat {font-family: 'Montserrat', sans-serif;}
.Poppins {font-family: 'Poppins', sans-serif;}
/* 
font-family: 'Montserrat', sans-serif;
font-family: 'Noto Sans KR', sans-serif;
font-family: 'Poppins', sans-serif;
 */

/* 전체내용 */
.wrap {width: 100%; overflow: hidden; max-width: 2000px; margin: 0 auto;}


/* 메인 */
main {width: 100%;}
    /* 인트로 */
    .main_intro {padding: 0 15rem; height: 500px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: no-repeat center center / cover; background-image: linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.3)), url(../img/employ_intro_bg1.jpg); color: #fff;}
    .main_intro h2 {font-size: 50px;}
    /* 서브메뉴 */
    .sub_menu {padding: 0 15rem; background-color: #fff;}
    .sub_menu ul {display: flex; width: 100%;}
    .sub_menu ul li {width: calc(100% / 3); height: 60px; text-align: center; line-height: 60px; border-bottom: 2px solid #ddd; color: #ddd; cursor: pointer;}
    .sub_menu ul li.on {color: #2D91FF; border-bottom: 2px solid #2D91FF; font-weight: bold;}
    .sub_menu ul li a {display: block; width: 100%; height: 100%;}
    /* 새소식 */
    .news {padding: 150px 0;}
        /* 제목 */
        .news .title {text-align: center; color: #555; margin-bottom: 100px;}
        .news .title .Montserrat {color: #11397c; font-weight: bold;}
        .news .title h3 {font-size: 40px; margin-bottom: 30px}
        /* 테이블 전체내용 */
        .page_info_content{padding: 0 15rem;}
        /* 검색 */
        .notcie_search {display: flex; flex: 1; justify-content: flex-end; height: 2.8em; margin-bottom: 1.5em;}
        .notice_select {height: 100%; width: 8em; border-top: 1px solid #ced4da; border-left: 1px solid #ced4da; border-bottom: 1px solid #ced4da; border-right: 0px; color: #495057; padding: 0.8em; font-size: 0.9em; text-align: -webkit-center;}
        .notice_input {width: 18em; border-left: 0px; border-top: 1px solid #ced4da; border-bottom: 1px solid #ced4da; border-right: 1px solid #ced4da; color: #46464a; text-align: -webkit-center;}

        /* 총파일, 페이지 수 */
        .notice_top_info {display: flex; margin: 0 1em 0.5em;}
        .top_info_write {flex: 1; display: flex; color: 555; font-size: 0.95em;}
        .top_info_svg {align-self: flex-end; display: flex; margin-right: 0.5em;}
        .top_info_svg img {width: 18px;}
        .top_info_bold1 {color: #2D91FF; font-weight: bold;}
        .top_info_bold2 {color: #2D91FF; font-weight: bold; margin-right: 0.5em;}
        .top_info_page {display: flex; color: #555; font-size: 0.95em;}
        .top_info_txt {margin-right: 0.5em;}

        /* 테이블 */
        .notice_cont {font-size: 16px; border-bottom: none; display:block; padding: 0; cursor: inherit;}
        .notice_cont table {width: 100%;}
        .notice_cont table tr{text-align: center;}
        .notice_cont table tr th{background-color: #11397C; padding: 5px; font-weight: normal; color: #fff;}
        .notice_cont table tr td {border-bottom: 2px solid #eee; font-size: 14px;}
        .notice_cont table tr td a {display: block; width: 100%; padding: 20px 0;}
        .notice_cont table tr td .show_box {border: 1px solid #0072bc; width:70%; margin: 0 auto; height: 40px; line-height: 40px; color: #0072bc; transition: all .5s; cursor: pointer;}
        .notice_cont table tr td .show_box:hover {color: #fff; background-color: #0072bc;}
        .notice_cont table tr td div img {width: 20px;}
        /* 컬럼별 너비 */
        .col1 {width: 8%;}
        .col2 {width: 57%;}
        .col3 {width: 10%;}
        .col4 {width: 12%;}
        .col5 {width: 8%;}

        /* 페이지 이동기 */
        .notice_pager {display: flex; flex: 1; justify-content: center;}
        .pager_group {display: grid; grid-template-columns: repeat(5, 1fr); width: 50%; color: #46464a; font-size: 0.95em; padding: 3em 0em 0em 0em;}
        .pager_group>a {cursor: pointer; color: #46464a; text-align: center; margin: 0 auto;}
        .pager_arrow_box {width: 1.3em; height: 1.3em; background-color: #f0f0f0; border-radius: 0.188em; display: flex; align-items: center; justify-content: center; cursor: pointer;}
        .pager_arrow {width: 0.625em;}

@media screen and (max-width: 1600px) {
    .main_intro {padding: 0 11rem;}

    .sub_menu {padding: 0 11rem;}

    .page_info_content {padding: 0 11rem;}
}

@media screen and (max-width: 1400px) {
    .news .title h3 {font-size: 32px;}

    body {font-size: .9rem;}
}
@media screen and (max-width: 1250px) {
    .main_intro {padding: 0 8rem; height: 400px;}

    .sub_menu {padding: 0 8rem;}
    
    .news {padding: 4rem 0;}
    .news .title {margin-bottom: 40px;}
    .news .title h3 {margin-bottom: 20px;}

    .page_info_content {padding: 0 8rem;}
}

@media screen and (max-width: 1000px) {

    .main_intro {padding: 0 3rem; height: 300px;}
    .main_intro h2 {font-size: 40px;}

    .sub_menu {padding: 0 3rem;}
    .sub_menu ul li {height: 50px; line-height: 50px;}

    .news {padding: 3rem 0;}
    .news .title h3 {font-size: 25px;}

    .notice_cont {font-size: 14px;}
    .notice_input {width: 13em; font-size: 11px;}
    .page_info_content {padding: 0 3rem;}

    body {font-size: .8rem;}
}

@media screen and (max-width: 700px) {
    .col1 {width: 10%;}
        .col2 {width: 43%;}
        .col3 {width: 12%;}
        .col4 {width: 17%;}
        .col5 {width: 12%;}
}

@media screen and (max-width: 640px) {
    .main_intro {height: 200px; padding: 1rem;}
    .main_intro h2 {font-size: 30px;}
}
@media screen and (max-width: 440px) {
    .main_intro {height: 150px;}
    .main_intro h2 {font-size: 25px;}

    .sub_menu {padding: 0;}
    .sub_menu ul li {height: 40px; line-height: 40px;}

    .news{padding: 2rem 0;}
    .news .title {margin-bottom: 10px;}
    .page_info_content {padding:  01rem;}
    .notice_input {width: 100%;}
    .notice_cont {font-size: 12px;}
    /* .notice_cont table tr th {display: none;} */
    .notice_cont table tr td {font-size: 12px;}
    /* .notice_cont table tr:nth-of-type(2) td {border-top: 2px solid #11397C;} */

    body {font-size: .7rem;}
}