@charset "utf-8";

#container{
    width:100%;
    position:relative;
}

#container .section{
    width:100%;
    height:100vh;
    max-height:1080px;
    position:relative;
    background:#f7feff;
    padding-top:80px;
}

/* wave */
.wave {
    opacity: 0.4;
    position: absolute;
    left:-200px;
    top: -100px;
    border: 2px solid #3781aa;
    width: 360px;
    height: 360px;
    -webkit-transform-origin: 50% 48%;
            transform-origin: 50% 48%;
    border-radius: 43%;
    -webkit-animation: drift 3000ms infinite linear;
            animation: drift 3000ms infinite linear;
    pointer-events: none;
    z-index:1;
}

.wave.-three {
    -webkit-animation: drift 5000ms infinite linear;
            animation: drift 5000ms infinite linear;
}

.wave.-two {
    -webkit-animation: drift 7000ms infinite linear;
            animation: drift 7000ms infinite linear;
    opacity: .1;
    border: 3px solid #4eabc1;
}

@-webkit-keyframes drift {
    from {
        opacity: 1;
        -webkit-transform: rotate(0deg) scale(0,0);
                transform: rotate(0deg) scale(0,0);
    }
    to {
        opacity: 0;
        -webkit-transform: rotate(360deg) scale(2,2);
                transform: rotate(360deg) scale(2,2);
    }
}

@keyframes drift {
    from {
        opacity: 1;
        -webkit-transform: rotate(0deg) scale(0,0);
                transform: rotate(0deg) scale(0,0);
    }
    to {
        opacity: 0;
        -webkit-transform: rotate(360deg) scale(2,2);
                transform: rotate(360deg) scale(2,2);
    }
}

#container .section .wrap{
    display:flex;
    align-items: center;
}

#container .section .wrap .text_area{
    width:40%;
    position:relative;
    display:table;
}

#container .section .wrap .text_area .text_wrap{
    width:100%;
    position:relative;
    display:table-cell;
    vertical-align: middle;
}

#container .section .wrap .text_area .text_wrap h2{
    font-size:56px;
    font-weight:800;
    line-height:72px;
    white-space: nowrap;
}

#container .section .wrap .text_area .text_wrap div{
    margin-top:12px;
}

#container .section .wrap .text_area .text_wrap div p{
    font-size:20px;
    font-weight:500;
    line-height:28px;
    color:#808080;
}

#container .section .wrap .text_area .text_wrap .border_btn{
    margin:32px 0px 0px;
}

#container .section .wrap .img_area{
    width:60%;
    position:relative;
    display:flex;
    align-items: center;
    justify-content: center;
}

#container .section .wrap .img_area video{
    width:100%;
}

.table_section{
    width:100%;
    position:relative;
    padding:100px 0px;
}

.table_section .heading{
    width:100%;
    text-align: center;
}

.table_section .heading h2{
    font-size:32px;
    font-weight:800;
}

.table_section .table{
    width:100%;
    position:relative;
    border-top:4px solid #2ac0d8;
    margin-top:40px;
}

.table_section .table ul{
    width:100%;
    position:relative;
    display:flex;
    border-bottom:1px solid #dbdbdb;
}

.table_section .table ul:nth-of-type(1){
    background:#f9feff;
}

.table_section .table ul li{
    min-height:60px;
    display:flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size:18px;
    font-weight:400;
    line-height:26px;
    padding:16px;
}

.table_section .table ul:nth-of-type(1) li{
    font-weight:600;
}

.table_section .table ul li:nth-of-type(1),
.table_section .table ul li:nth-of-type(4){
    width:20%;
}

.table_section .table ul li:nth-of-type(2),
.table_section .table ul li:nth-of-type(3){
    width:30%;
}

.table_section .table .none_data{
    width:100%;
    min-height:60px;
    position:relative;
    display:flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border-bottom:1px solid #dbdbdb;
}

.table_section .table .none_data p{
    font-size:18px;
    font-weight:400;
    color:#808080;
}

.table_section .table .paging{
    width:fit-content;
    position:relative;
    margin:40px auto 0px;
    display:flex;
    align-items: center;
    counter-reset: list-number;
}

.table_section .table .paging a{
    width:32px;
    height:32px;
    display:flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    color:#808080;
    margin-right:16px;
    transition:all 0.35s;
}

.table_section .table .paging a:last-child{
    margin-right:0px;    
}

.table_section .table .paging a.active{
    color:#fff!important;
    background:#2ac0d8!important;
}

.table_section .table .paging a:hover{
    color:#2ac0d8;
}

.table_section .table .paging a::before{
    counter-increment:list-number;
    content:counter(list-number);
    font-family: 'Montserrat', sans-serif;
    font-size:18px;
    font-weight:400;
}

/*
.step{
    width:100%;
    position:relative;
    padding:100px 0px;
}

.step .heading{
    width:100%;
    text-align: center;
}

.step .heading h2{
    font-size:32px;
    font-weight:800;
}

.step ul{
    width:100%;
    position:relative;
    display:flex;
    margin-top:80px;
}

.step ul li{
    width:30%;
    position:relative;
    text-align: center;
}

.step ul li p{
    font-size:22px;
    font-weight:600;
    margin-top:20px;
}

.step ul li:nth-of-type(2){
    margin:0px 5%;
}

.step ul li .circle{
    width:100%;
    max-width:240px;
    height:240px;
    border:3px solid #2ac0d8;
    border-radius: 100%;
    overflow: hidden;
    padding:52px;
    margin:0px auto;
}

.step ul li .circle img{
    width:100%;
    max-width:200px;
}
*/

@media(max-width:1519px){
    #container .section .wrap .text_area .text_wrap h2{
        font-size:42px;
        line-height:58px;
    }
}

@media(max-width:1199px){
    #container .section .wrap .text_area .text_wrap h2{
        font-size:32px;
        line-height:44px;
    }

    #container .section .wrap .text_area .text_wrap div p{
        font-size:18px;
        line-height:24px;
    }

    .table_section .heading h2{
        font-size:26px;
    }

    .table_section .table ul li{
        font-size:17px;
        line-height:25px;
        padding:12px;
    }

    .table_section .table .none_data p{
        font-size:17px;
    }
}

@media(max-width:767px){
    #container .section{
        padding:180px 0px 120px;
        height:auto;
    }

    .wave{
        width:200px;
        height:200px;
        left:-100px;
        top:-200px;
    }

    #container .section .wrap{
        display:block;
    }

    #container .section .wrap .text_area{
        width:100%;
        display:block;
    }

    #container .section .wrap .text_area .text_wrap{
        display:block;
        text-align: center;
    }

    #container .section .wrap .text_area .text_wrap h2{
        white-space: normal;
    }

    #container .section .wrap .text_area .text_wrap .border_btn{
        margin:32px auto 0px;
    }

    #container .section .wrap .img_area{
        width:100%;
        margin-top:80px;
    }

    .table_section .table ul{
        flex-wrap: wrap;
        box-shadow: 0px 0px 6px rgba(0, 0, 0, 15%);
        border-radius: 10px;
        margin-top:20px;
        padding:32px 16px;
        border-bottom:none;
    }

    .table_section .table ul:nth-of-type(1){
        display:none;
    }

    .table_section .table ul li{
        width:100%!important;
    }

    .table_section .table ul li{
        display:block;
        text-align: left;
        padding:10px 10px 10px 20%;
        min-height:50px;
    }

    .table_section .table ul li::before{
        width:20%;
        position:absolute;
        left:0;
        text-align: center;
        font-weight:600;
    }

    .table_section .table ul li:nth-of-type(1)::before{
        content:"모집분야";
    }

    .table_section .table ul li:nth-of-type(2)::before{
        content:"담당업무";
    }

    .table_section .table ul li:nth-of-type(3)::before{
        content:"지원자격";
    }

    .table_section .table ul li:nth-of-type(4)::before{
        content:"접수마감일";
    }

    .table_section .table .paging a{
        width:28px;
        height:28px;
        margin-right:12px;
    }

    .table_section .table .paging a::before{
        font-size:17px;
    }
}

@media (max-width:519px){
    #container .section .wrap .text_area .text_wrap h2{
        font-size:24px;
        line-height:34px;
    }

    #container .section .wrap .text_area .text_wrap div p{
        font-size:16px;
        line-height:22px;
    }

    #container .section .wrap .text_area .text_wrap .border_btn{
        font-size:16px;
        padding:12px 36px;
    }

    .table_section .table ul li::before{
        width:30%;
    }

    .table_section .table ul li{
        padding:10px 10px 10px 30%;
        font-size:16px;
        min-height:40px;
    }
}

@media (max-width:374px){
    #container .section{
        padding:120px 0px 60px;
    }
    #container .section .wrap .text_area .text_wrap h2{
        font-size:18px;
        line-height:24px;
    }

    #container .section .wrap .text_area .text_wrap div p{
        font-size:12.333px;
        line-height:18px;
    }

    #container .section .wrap .text_area .text_wrap .border_btn{
        font-size:16px;
        padding:12px 36px;
    }

    #container .section .wrap .img_area{
        margin-top:60px;
    }
}