@charset "utf-8";

/* PC */
@media screen and (min-width: 1025px) {
    /****************************************
    01. common style
    ****************************************/
}

/* tablet */
@media (min-width: 768px) and (max-width: 1024px) {
    /****************************************
    01. common style
    ****************************************/
}

/* phone ~ 767px */
@media screen and (max-width: 767px) {
    /****************************************
    01. common style
    ****************************************/

    /* ==================================================================================
        layer popup
    ================================================================================== */
    /* popup1 */
    .layer-popup-area.pop1 {
        top: 75px;
        left: 50%;
        width: 96%;
        margin: 0;
        z-index: 9999;
    }
    .layer-popup-area.pop1 .close {
        width: 100%;
    }
    .layer-popup-area .cont {
        padding: 30px 20px;
    }

    /* popup2 */
    .layer-popup-area.pop2 {
        top: 120px;
        left: 50%;
        width: 96%;
        margin: 0;
        z-index: 9998;
    }
    .layer-popup-area.pop2 .close {
        width: 100%;
    }
    .layer-popup-area.pop2 .cont {
        padding: 0px;
    }
    .layer-popup-area.pop2 .cont img {
        display: block;
        width: 100%;
    }

    /* popup3 */
    .layer-popup-area.pop3 {
        top: -210px;
        left: 2%;
        width: 96%;
        margin: 0;
        z-index: 9999;
    }
    .layer-popup-area.pop3 .close {
        width: 100%;
    }
    .layer-popup-area .cont {
        padding: 0px;
    }

    /* popup4 */
    .layer-popup-area.pop4 {
        top: -210px;
        left: 2%;
        width: 96%;
        margin: 0;
        z-index: 9999;
    }
    .layer-popup-area.pop4 .cont img {
        width: 100%;
    }
    .layer-popup-area.pop4 .close {
        width: 100%;
    }
    /* popup5 */
    .layer-popup-area.pop5 {
        top: 250px;
        left: 2%;
        width: 96%;
        margin: 0;
        z-index: 9998;
    }
    .layer-popup-area.pop5 .close {
        width: 100%;
    }
    .layer-popup-area.pop5 .cont {
        padding: 0;
    }
    .layer-popup-area.pop5 .cont img {
        display: block;
        width: 100%;
    }
    /* pop-img */
    .layer-popup-area.pop-img {
        top: -300px;
        left: 2%;
        width: 96%;
        margin: 0;
        z-index: 9999;
    }
    .layer-popup-area.pop-img .close {
        width: 100%;
    }
    .layer-popup-area.pop-img .cont {
        padding: 0;
    }
    .layer-popup-area.pop-img .cont img {
        max-width: 100%;
    }

}

/* phone ~ 480px */
@media screen and (max-width: 767px) {
    /****************************************
    01. hidden contents
    ****************************************/


    /****************************************
    02. layout style
    ****************************************/
    .container-area {
        background-color: transparent;
    }
    #container {
        width: auto;
    }

    /* 메인 기본 배너 */
    .main-spot {
        height: 320px;
    }
    .main-spot .mobile-only {
        display: none;
    }
    .main-spot ul.main-spot-slider {
        visibility: hidden;
    }
    .main-spot ul.main-spot-slider > li {
        height: 320px;
        padding: 50px 20px 0;
        background: #eee url("/images/main/main_spot01.jpg") 53% top no-repeat;
        background-size: cover;
    }
    .main-spot ul.main-spot-slider > li.type1 {
        background: #eee url("/images/main/main_spot01.jpg") 53% top no-repeat;
        background-size: cover;
    }
    .main-spot ul.main-spot-slider > li.type2 {
        background: #eee url("/images/main/main_spot02.jpg") 53% top no-repeat;
        background-size: cover;
    }
    .main-spot ul.main-spot-slider > li.type3 {
        background: #eee url("/images/main/main_spot03.jpg") 53% top no-repeat;
        background-size: cover;
    }

    /* slogan */
    .main-spot .slogan {
        padding: 20px;
        font-size: 23px;
    }
    .main-spot .slogan .text2 {
        font-size: 23px;
    }
    .main-spot .slogan .text2 strong {
        margin-right: 10px;
        font-size: 36px;
        color: #0b57a9;
        text-shadow: 0 1px 2px rgba(255,255,255,0.45);
    }

    /* type2 slogan */
    .main-spot ul.main-spot-slider > li.type2 .slogan .text1 {
        color: #e9ddd6;
        text-shadow: none;
    }
    .main-spot ul.main-spot-slider > li.type2 .slogan .text2 {
        color: #e9ddd6;
        text-shadow: none;
    }
    .main-spot ul.main-spot-slider > li.type2 .slogan .text2 strong {
        color: #fff;
        text-shadow: none;
    }

    /* type3 slogan */
    .main-spot ul.main-spot-slider > li.type3 .slogan {
        padding: 20px;
        font-size: 23px;
    }

    /* slogan */
    .main-spot .slogan {
        font-size: 18px;
        color: #333;
    }
    .main-spot .slogan .text1 {
        display: block;
    }
    .main-spot .slogan .text2 {
        display: block;
        font-size: 18px;
    }
    .main-spot .slogan .text2 strong {
        margin-right: 10px;
        font-size: 24px;
        color: #0b57a9;
    }

    /* 프린트 버튼 추가 */
    /*.main-spot .innerwrap.btn-list-wrap {*/
    /*    height: auto;*/
    /*}*/
    /*.main-spot .btn-list-area {*/
    /*    position: absolute;*/
    /*    right: auto;*/
    /*    left: 0;*/
    /*    top: 200px;*/
    /*    width: 100%;*/
    /*}*/
    /*.main-spot .btn-list-area > ul {*/
    /*    width: 100%;*/
    /*    text-align: center;*/
    /*}*/
    /*.main-spot .btn-list-area > ul > li {*/
    /*    display: inline-block;*/
    /*    vertical-align: middle;*/
    /*    margin: 0 2px;*/
    /*}*/
    /*.main-spot .btn-list-area > ul > li > a {*/
    /*    padding: 10px;*/
    /*}*/
    /*.main-spot .btn-list-area > ul > li > a > i.big {*/
    /*    display: none;*/
    /*}*/
    /*.main-spot .btn-list-area > ul > li > a > strong {*/
    /*    margin: 0 0 5px;*/
    /*    font-size: 14px;*/
    /*    letter-spacing: -0.45px;*/
    /*}*/
    /*.main-spot .btn-list-area > ul > li > a > .arrow {*/
    /*    width: 80px;*/
    /*    padding-right: 16px;*/
    /*}*/
    /*.main-spot .btn-list-area > ul > li > a > .arrow b {*/
    /*    font-size: 14px;*/
    /*}*/

    .main-spot .innerwrap.btn-list-wrap {
        height: auto;
    }
    .main-spot .btn-list-area {
        position: absolute;
        left: 0;
        top: 200px;
        width: 100%;
        z-index: 100;
    }
    .main-spot .btn-list-area > ul {
        width: 100%;
        padding: 0 15px;
        background-color: transparent;
    }
    .main-spot .btn-list-area > ul > li {
        overflow: hidden;
        float: none;
        width: 100%;
        margin: 0 0 5px;
        border-radius: 5px;
	    background-color: rgba(8,10,16,0.65);
    }
    .main-spot .btn-list-area > ul > li:last-child {
        border-radius: 5px;
    }
    .main-spot .btn-list-area > ul > li > .title {
        width: 30%;
        height: 44px;
        line-height: 44px;
        font-size: 13px;
        border-radius: 5px 0 0 5px;
        background-color: #ff6464;
    }
    .main-spot .btn-list-area > ul > li:last-child > .title {
        border-radius: 5px 0 0 5px;
    }
    .main-spot .btn-list-area > ul > li:last-child > a {
        border-radius: 0 5px 5px 0;
    }
    .main-spot .btn-list-area > ul > li > a {
        width: 70%;
        height: 44px;
        line-height: 44px;
        padding: 0 5px 0 10px;
        font-size: 13px;
        letter-spacing: -0.45px;
        border-radius: 0 5px 5px 0;
    }
    .main-spot .btn-list-area > ul > li > a > i {
        display: inline-block;
        margin: 0 7px 0 0;
    }
    .main-spot .btn-list-area > ul > li > a > strong {
        display: inline-block;
        font-size: 13px;
    }

    /* *******************************************************************
        col1 : 퀵메뉴
    ******************************************************************* */
    .col1 {
        border-bottom: 0;
    }
    .col1 .innerwrap > ul li {
        float: left;
        width: 33.33333%;
    }
    .col1 .innerwrap > ul li a {
        border-bottom: 1px solid #dceefc;
    }
    .col1 .innerwrap > ul li:nth-child(3) a,
    .col1 .innerwrap > ul li:last-child a {
        border-right: 0;
    }
    .col1 .innerwrap > ul li a:hover {
        color: #176cad;
        background-color: #fff;
    }
    .col1 .innerwrap > ul li a span {
        display: block;
        line-height: 1.2;
        padding-top: 10px;
        font-size: 14px;
    }

    /* *******************************************************************
        col2, 3 : 게시판 + 배너
    ******************************************************************* */
    /* KRS 소식 + 알림마당 + 회원/회원사동정 */
    .col2 .innerwrap {
        padding-bottom: 20px;
        border-bottom: 0;
    }
    .col3 .innerwrap {
        padding: 30px 0;
    }
    .main-board {
        float: none;
        width: 100%;
        padding: 0 10px;
        min-height: 120px;
        margin-bottom: 40px;
    }
    .main-board.board-notice,
    .main-board.board-event {
        margin-right: 0;
    }
    .main-board .more {
        right: 10px;
    }
    .main-board .board-con ul > li p.title {
        display: inline-block;
        float: none;
        width: 100%;
    }
    .main-board .board-con ul > li p.title a {
        display: inline-block;
        width: 100%;
    }
    .main-board .board-con ul > li p.date {
        display: none;
    }

    /* 메인배너 */
    .main-banner {
        float: none;
        width: 100%;
        height: auto;
        padding: 0 10px;
    }
    .main-banner img {
        max-width: 100% !important;
    }

    /* 춘계 학술대회 */
    .main-banner ul > li > a {
        width: 100%;
        height: 260px;
        background-size: 100%;
        padding: 15px;
    }
    .main-banner ul > li.spring > a > .title {
        margin: 0 auto 15px !important;
        padding: 3px;
    }
    .main-banner ul > li.spring > a > .date {
        margin: 0 !important;
        font-size: 16px;
    }
    .main-banner ul > li.spring > a > .place {
        margin: 0 0 15px;
        font-size: 18px;
    }
    .main-banner ul > li.spring > a > .btn-go {
        display: inline-block;
        padding: 5px 25px;
    }
    .main-banner .bx-controls {
        bottom: 0;
    }

    /* 추계 학술대회 */
    .main-banner ul > li.fall > a {
        width: 100%;
        background-size: 100%;
        height: 260px;
        padding: 15px;
    }
    .main-banner ul > li.fall > a > .title {
        margin: 0 auto 15px !important;
        padding: 3px;
        line-height: 1.2;
    }
    .main-banner ul > li.fall > a > .date {
        margin: 0 !important;
        font-size: 16px;
    }
    .main-banner ul > li.fall > a > .place {
        margin: 0 0 15px;
        font-size: 18px;
    }
    .main-banner ul > li.fall > a > .btn-go {
        display: inline-block;
        padding: 5px 25px;
    }
    .main-banner .bx-controls {
        bottom: 12px;
    }

    /* etc */
    .main-banner ul > li.etc > a {
        width: 100%;
        height: 265px;
        padding: 15px;
    }
    .main-banner ul > li.etc > a > .title {
        margin: 0 auto 15px !important;
        padding: 3px;
        line-height: 1.2;
    }
    .main-banner ul > li.etc > a > .date {
        margin: 0 !important;
        font-size: 16px;
    }
    .main-banner ul > li.etc > a > .place {
        margin: 0 0 15px;
        font-size: 18px;
    }
    .main-banner ul > li.etc > a > .btn-go {
        display: inline-block;
        padding: 5px 25px;
    }
    .main-banner .bx-controls {
        bottom: 12px;
    }

    /* 투표안내 */
    .main-banner ul > li.election > a {
        width: 100%;
        height: auto;
        padding: 20px;
    }
    .main-banner ul > li.election > a > .title {
        margin: 0 0 15px;
        padding: 3px;
        font-size: 28px;
    }
    .main-banner ul > li.election > a > .date {
        width: 96%;
        margin: 0 2%;
        margin: 0 auto !important;
        font-size: 16px;
    }
    .main-banner ul > li.election > a > .place {
        width: 96%;
        margin: 0 2% 15px;
        font-size: 18px;
    }
    .main-banner ul > li.election > a > .btn-go {
        display: inline-block;
        padding: 5px 25px;
    }

    /* 기본배너 */
    .main-banner ul > li.default > a {
        width: 100%;
        height: auto;
        padding: 20px;
    }
    .main-banner ul > li.default > a > .title {
        margin: 0 0 20px;
        padding: 0;
        font-size: 15px;
    }
    .main-banner ul > li.default > a > .title strong {
        font-size: 21px;
    }
    .main-banner ul > li.default > a > .date {
        margin: 0 auto 25px !important;
    }
    .main-banner ul > li.default > a .label {
        display: inline-block;
        width: 90px;
        margin: 0 8px 0 0;
        font-size: 15px;
        font-weight: normal;
        vertical-align: middle;
        border-radius: 2px;
    }
    .main-banner ul > li.default > a > .btn-go {
        font-size: 15px;
    }

    /* *******************************************************************
        col4 : 학술행사
    ******************************************************************* */
    .col4.conference {
        background-size: cover;
    }
    .col4.conference ul li {
        float: left;
        width: 33.33%;
        height: 125px;
        display: block;
        margin: 10px 0;
        text-align: center;
    }
    .col4.conference {
        height: auto;
        padding-bottom: 0
    }
    .col4.conference h3 {
        padding: 30px 15px 20px;
        font-size: 22px;
        font-weight: 700;
        color: #fff;
    }
    .col4.conference ul li a .icon {
        width: 80px;
        height: 80px;
        vertical-align: middle;
        border: 1px solid transparent;
        /*background-color: transparent;*/
        text-align: center;
        transition: 0.25s;
    }
    .col4.conference ul li a:hover .icon {
        /*background-color: transparent;*/
    }
    .col4.conference ul li a .icon img {
        padding-top: 15px;
    }
    .col4.conference ul li:first-child a .icon img {
        padding-top: 15px;
    }
    .col4.conference ul li:nth-child(2) a .icon img {
        padding-top: 15px;
    }
    .col4.conference ul li:nth-child(3) a .icon img {
        padding-top: 15px;
    }
    .col4.conference ul li:nth-child(4) a .icon img {
        padding-top: 15px;
        padding-left: 5px;
    }
    .col4.conference ul li:nth-child(5) a .icon img {
        padding-top: 15px;
    }
    .col4.conference ul li:nth-child(6) a .icon img {
        padding-top: 15px;
    }
    .col4.conference ul li:nth-child(7) a .icon img {
        padding-top: 15px;
    }
    .col4.conference ul li a .txt {
        padding-top: 8px;
        color: #fff;
        display: block;
        text-align: center;
        font-size: 12px;
        line-height: 1.25;
    }

    #op_layout .op_wrap .popupSlider .slick-slide img {
       padding: 0px;
    }
}

/* phone ~ 320px */
@media screen and (max-width:410px) {


    .buttons dl {
        float: none;
        width: 100%;
        height: auto;
        margin: 0;
        padding-bottom: 30px;
    }

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

    .main-board .tab-area li > a {
        padding: 0 2px;
        font-size: 12px;
    }

    .buttons dl {
        float: none;
        width: 100%;
        height: auto;
        margin: 0;
        padding-bottom: 30px;
    }

}

@media print {

}