@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%;}
    /* 자주 묻는 질문 */
    .faq {padding: 150px 0;}
        /* 제목 */
        .faq .title {text-align: center; color: #555; margin-bottom: 100px;}
        .faq .title .Montserrat {color: #11397c; font-weight: bold;}
        .faq .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;}

            /* 내용 */
            .page_info_content dl dt {background-color: #11397c; display: flex; justify-content: space-between; align-items: center; color: #fff; height: 70px; font-size: 18px; padding: 0 50px; cursor: pointer; border-bottom: 1px solid #fff;}
            .page_info_content dl dt .subject {font-weight: 500;}
            .page_info_content dl dt b {font-weight: 500; margin-right: 50px;}
            .page_info_content dl dt i {margin-left: 60px;}
            .page_info_content dl dd {padding: 0 120px 60px 50px; border-bottom: 2px solid #999; display: none;}
            .page_info_content dl dd h4 {height: 70px; font-size: 18px; display: flex; justify-content: flex-start; align-items: center; font-weight: 500;}
            .page_info_content dl dd h4 b {margin-right: 50px;}
            .page_info_content dl dd p {margin-left: 60px;}

@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) {
    .faq .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;}

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

    .page_info_content dl dt {height: 60px; font-size: 16px;}
    .page_info_content dl dd h4 {height: 60px; font-size: 16px;}
}

@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;}

    .page_info_content {padding: 0 3rem;}

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

    .page_info_content dl dt {height: 50px; font-size: 14px; padding: 0 30px;}
    .page_info_content dl dt b {margin-right: 30px;}
    .page_info_content dl dt i {margin-left: 30px;}
    .page_info_content dl dd {padding: 0 60px 30px 30px;}
    .page_info_content dl dd h4 {height: 50px; font-size: 14px;}
    .page_info_content dl dd h4 b {margin-right: 30px;}
    .page_info_content dl dd p {margin-left: 40px;}

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

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

    .notice_input {width: 13em; font-size: 11px;}
    
    .page_info_content dl dt {font-size: 13px; padding: 0 20px;}
    .page_info_content dl dt b {margin-right: 20px;}
    .page_info_content dl dt i {margin-left: 20px;}
    .page_info_content dl dd {padding: 0 50px 20px 20px;}
    .page_info_content dl dd h4 {font-size: 13px;}
    .page_info_content dl dd h4 b {margin-right: 20px;}
    .page_info_content dl dd p {margin-left: 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;}

    .faq {padding: 2rem 0;}
    .faq .title {margin-bottom: 25px;}
    .faq .title h3 {font-size: 20px;}

    .notice_input{width: 100%;}

    .page_info_content {padding: 0 1rem;}
    .page_info_content dl dt {height: 40px;}
    .page_info_content dl dt p {font-size: 0;}
    .page_info_content dl dt p span {font-size: 13px;}
    .page_info_content dl dt p.subject {display: block; font-size: 13px;}
    .page_info_content dl dd h4 {height: 40px;}

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