@media screen and (min-width: 1440px) {}


@media screen and (max-width: 1440px) {
    
    .header-popup .headerpop_slide .part{
        justify-content: center;
    }

    .wrap {
        width: 100%;
        padding: 0 20px;
    }

    

    header.follow .header-top {
        margin-top: 0px;
    }

    .main.follow {
        margin-top: 76px;
    }


    header .header-main .logo {
        float: none;
        /* margin: auto; */
    }

    header .header-main .logo a {
        /* width: 258px; */
        /* height: 37px; */
        margin: auto;
    }

    header .header-main .menu {
        width: 100%;
        margin: 0 40px 0 50px;
    }

    header .header-main .menu>dl{
        width: 100%;
    }

    header .header-main .menu>dl>dd{
        height: 865px;
    }

    header .header-main .menu>dl>dd article{
        padding: 0 20px;
    }

    header .header-main .menu>dl>dd article .descrip{
        min-width: 280px;
    }

    header .header-main .menu>dl>dt+dd article .sub-menu dl dd{
        width: calc(100% / 3);
    }



    header .header-main .search>button {
        width: 70px;
    }

    header .header-main .search button+.panel {
        left: 0;
        width: 100%;
        padding: 0 20px;
    }

    header .header-main .search button+.panel form {
        width: calc(100% - 142px);
    }

    header .header-main .search button+.panel form input {
        width: 100%;
    }


    


    .main article .wrap .head{
        position: relative;
        justify-content: center;
    }


    .main .notice_board .wrap{
        flex-direction: column;
    }
    .main .notice_board .wrap .notice{
        width: 100%;
    }

    .main .notice_board .wrap .notice ~ div{
        margin-top: 110px;
    }

    .main .notice_board .wrap .notice .head{
        position: relative;
        justify-content: center;
        align-items: flex-start;
    }

    .main .notice_board .wrap .notice:has(.page) .head h1{
        margin-bottom: 64px;
    }

    .main .wrap .head a{
        position: absolute ;
        right: 0;
        top: 12px;
    }

    .main .notice_board .wrap .notice .head div.page{
        position: absolute;
        margin: 0;
        bottom: 6px;
    }



    .main .quick-menu .menu{
        flex-direction: column;
    }
    .main .quick-menu .menu h1 br{
        display: none;
    }
    .main .quick-menu .menu h1{
        margin: 10px 0 40px;
    }


    .main .quick-menu .menu dl{
        flex-wrap: wrap;
    }
    .main .quick-menu .menu dl dt{
        flex: 1 1 22%;
        margin-bottom: 26px;
    }


    .main .news_service .wrap{
        flex-direction: column;
    }
    .main .news_service .wrap .part:not(:only-of-type){
        width: 100%;
    }
   
    .main .news_service .wrap .part ~ div{
        margin-top: 100px;
    }

    .main .news_service .wrap .part section .ebook_slide.wide .page > div:first-of-type{
        width: 100%;
        height: 100%;
    }
    .main .news_service .wrap .part section .ebook_slide.wide .page div img{
        width: calc(100% - 386px);
    }
    .main .news_service .wrap .part section .ebook_slide.wide .page .text{
        background: #830020;
    }

    .news_service .part:first-of-type .ebook_slide .slick-dots{
        left: calc(100% - 346px);
    }

    .news_service .part .ebook_slide .slick-dots{
        left: calc(0% + 312px);
    }


    .main .schedule_list .list a{
        width: calc((100% / 2) - 15px);
        margin-bottom: 30px;
    }

    .main .schedule_list .list a ~ a:not(:nth-of-type(4n+1)){
        margin: 0 0 30px;
    }
    .main .schedule_list .list a ~ a:not(:nth-of-type(2n+1)){
        margin-left: 30px;
    }
    .main .schedule_list .btn{
        margin-top: 30px;
    }

    .main .enter_guide{
        background-size: cover;
    }

    .main .enter_guide .list{
        flex-direction: column;
    }

    .main .enter_guide .list .pannel{
        width: 100%;
        min-width: auto;
    }
    .main .enter_guide .list .pannel .card{
        display: inline-block;
        width: calc((100% / 2) - 20px);
    }
    .main .enter_guide .list .pannel .card + div{
        margin-left: 34px;
    }

    .main .enter_guide .list .part{
        margin-top: 40px;
    }
    
    .main .enter_guide .list .pannel.white{
        width: calc((100% / 3) - (80px / 3));
        margin: 0;
    }

    .main .enter_guide .list .pannel.white ~ div{
        margin-left: 40px;
    }

    .main .news_service .wrap .part section .news_slide .page > div:first-of-type,
    .main .news_service .wrap .part section .news_slide .cover:hover .page > div:first-of-type:before{
        height: 332px;
    }
    .main .news_service .wrap .part section .news_slide .cover:hover .page > div:first-of-type:after{
        height: 394px;
    }
    

    .main .news_service .wrap .part section .news_slide .cover{
        width: calc((100% / 2) -20px);
        height: 545px;
    }


    


    /* 푸터----------------------------------------------- */


    footer .info .copyright{
        margin-right: 40px;
    }

    .topbtn {
        right: 20px;
    }

    

}


/* -------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------------------- */

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

    .main .slide .wrap .shoutcutbtn{
        margin-top: 108px;
    }
}


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

    .main .slide .wrap .shoutcutbtn{
        margin-top: 108px;
    }

    .wrap{
        padding: 0 30px;
    }

    .header-popup + header .header-top, 
    header .header-top,
    header:hover .header-top, 
    header.follow .header-top{
        height: 0;
    }

    header .header-top {
        overflow-x: hidden;
    }

    header.follow .header-top{
        margin-top: 40px;
    }

    .header-popup + header .header-main .logo a, 
    header .header-main .logo a,
    header:hover .header-main .logo a, 
    header.follow .header-main .logo a{
        width: 204px;
        height: 32px;
        background-size: 100%;
    }

    header .header-main .search>button{
        width: 38px;
        margin-right: 60px;
    }

    .header-popup + header .header-main .search>button, 
    header .header-main .search>button,
    header:hover .header-main .search>button, 
    header.follow .header-main .search>button{
        background-size: 20px 20px;
    }

    header .header-main .search button+.panel{
        top: 0;
    }

    
    
    .main .slide{
        margin-top: -90px;
    }

    .main .slide .wrap .main_pannel,
    .main .slide .wrap .main_pannel form {
        width: 100%;
    }

/* 모바일 메뉴 */
/* -------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------- */
   

    .header-popup + header .header-main .menu>dl>dt:last-of-type{
        display: flex;
    }

    header .header-main .menu .mobile-menubtn {
        display: block;
        width: 20px;
        height: 20px;
        float: left;
    }

    .header-popup + header .header-main .menu .mobile-menubtn button,
    header .header-main .menu .mobile-menubtn button,
    header:hover .header-main .menu .mobile-menubtn button,
    header.follow .header-main .menu .mobile-menubtn button {
        position: absolute;
        top: 0;
        right: 30px;
        /* padding: 0 20px; */
        width: 20px;
        height: 90px;
        background: url(../../../../images/iosf/ko/front/img_mobilebtn_20x20.png) no-repeat center;
        background-size: 100%;
        cursor: pointer;
    }

    header .header-main .menu .mobile-menubtn button{
        background: url(../../../../images/iosf/ko/front/img_mobilebtn_white_20x20.png) no-repeat center;
    }

    header .header-main .menu>dl {
        margin-left: 0;
        position: fixed;
        top: 0;
        right: -640px;
        width: 640px;
        height: 100vh;
        margin-right: 0;
        display: block;
        flex-direction: column;
        align-items: flex-start;
        background: #fff;
        overflow-y: auto;
        overflow-x: hidden;
    }

    header .header-main .menu>dl {
        z-index: 1;
        display: flex;
        right: -100%;
        transition: all 0.3s;
    }

    header .header-main .menu>dl.mobile_on {
        z-index: 50;
        display: flex;
        left: auto;
        right: 0;
        transition: all 0.3s;
    }

    header .header-main .menu>dl>dt {
        width: 100%;
        margin: 0;
        padding: 0;
        /* margin: 26px 0 20px  ; */
        height: 60px;
        flex: none;
        /* flex: unset; */
        flex-direction: column;
        align-items: flex-start;
    }

    header .header-main .menu>dl>dt.mobile-menu-pannel {
        position: relative;
        display: block;
        height: auto;
        /* height: unset; */
    }

    header .header-main .menu>dl>dt:first-of-type:hover {
        cursor: text;
        color: unset;
    }

    header .header-main .menu>dl>.mobile-menu-pannel .logo {
        width: 100%;
        height: 90px;
        background:
            url(../../../../images/iosf/ko/front/logo_mobile_204x32.png) no-repeat left center,
            #830020;
        background-size: 204px 32px;
        background-position: 30px;
    }

    header .header-main .menu>dl>.mobile-menu-pannel>button {
        position: absolute;
        width: 18px;
        height: 90px;
        top: 0;
        right: 30px;
        background: url(../../../../images/iosf/ko/front/img_close_mobile_18x18.png)no-repeat center;
        background-size: 100%;
    }

    header .header-main .menu>dl>.mobile-menu-pannel .homebtn {
        display: flex;
        width: 100%;
        height: 44px;
        background: #131314;
    }

    header .header-main .menu>dl>.mobile-menu-pannel .homebtn a {
        display: flex;
        justify-content: center;
        align-items: center;
        flex: 1 0 10%;
        border-left: 1px solid #5d5d5d;
        background: #131314;
        font: bold 15px/1.3em "나눔바른고딕";
        color: #e5e5e5;
    }

    header .header-main .menu>dl>.mobile-menu-pannel .homebtn a:first-of-type {
        border-left: 0px solid #5d5d5d;
    }

    header .header-main .menu>dl>.mobile-menu-pannel .loginpannel {
        width: 100%;
        height: 176px;
        min-height: 108px;
        padding: 20px 30px;
        background:
         url(../../../../images/iosf/ko/front/bg_mobilemenu_pattern_6x6.png)repeat center,
         url(../../../../images/iosf/ko/front/bg_mobile_278x176.png)no-repeat right,
            #313133;
    }

    header .header-main .menu>dl>.mobile-menu-pannel .loginpannel p {
        text-align: center;
        font: 17px/1.3em "나눔바른고딕";
        /* margin-bottom: 5px; */
        color: #d2d2d2;
        text-shadow: 1px 1px 0px #000;
    }

    header .header-main .menu>dl>.mobile-menu-pannel .loginpannel .user {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
        justify-content: space-between;
    }

    header .header-main .menu>dl>.mobile-menu-pannel .loginpannel .user p {
        color: #e5e5e5;
        white-space: pre-wrap;
    }


    header .header-main .menu>dl>.mobile-menu-pannel .loginpannel .user .name{
        width: 100%;
        border: 1px solid #5d5d5d;
    }
    header .header-main .menu>dl>.mobile-menu-pannel .loginpannel .user .name p{
        display: flex;
        align-items: center;
        text-align: left;
        font: 15px/1.3em "나눔바른고딕";
        color: #c9c9c9;
        border-bottom: 1px solid #5d5d5d;
    }
    header .header-main .menu>dl>.mobile-menu-pannel .loginpannel .user .name p span:first-of-type{
        display: table-cell;
        min-width: 60px;
        padding: 7px 12px;
        border-right: 1px solid #5d5d5d;
    }
    header .header-main .menu>dl>.mobile-menu-pannel .loginpannel .user .name p span{
        padding: 7px 10px;
        white-space:normal
    }


    header .header-main .menu>dl>.mobile-menu-pannel .loginpannel .user .name p b{
        display: table-cell;
        color: #fff;
        width: 100%;
        padding: 7px 10px;
        font-weight: normal;
    }







    header .header-main .menu>dl>.mobile-menu-pannel .loginpannel .btn {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    header .header-main .menu>dl>.mobile-menu-pannel .loginpannel a,
    header .header-main .menu>dl>.mobile-menu-pannel .loginpannel .logoutbtn {
        display: flex;
        justify-content: center;
        min-width: 204px;
        padding: 10px 10px;
        font: bold 17px/1.3em "나눔바른고딕";
        color: #ffffff;
        text-shadow: 1px 1px 0 rgba(0,0,0,0.6);
        background: #f27c24;
        border-radius: 22px;
    }

    header .header-main .menu>dl>.mobile-menu-pannel .loginpannel .logoutbtn {
        margin-right: 18px;
    }

    header .header-main .menu>dl>.mobile-menu-pannel .loginpannel .managebtn {
        background: #AF997A;
        text-shadow: 1px 1px 0 #683d3a;
    }

    /* header .header-main .menu>dl>.menu-depth01:hover, */
    header .header-main .menu>dl>.menu-depth01:not(.off),
    header .header-main .menu>dl>.menu-depth01 {
        font: bold 19px/1.3em "나눔스퀘어";
        height: 64px;
        padding: 20px 30px;
        color: #fff ;
        /* text-shadow: 1px 1px 0px #2a2620; */
        background: #8f816a;
        /* background-image: url(../../../../images/iosf/ko/front/img_arrowbottom_18x10.png)center; */
        /* background-size: 18px 10px; */
        /* text-shadow: 1px 1px 0px rgba(0,0,0,0.5); */
        transition: all 0.2s;
    }

    



    

    header .header-main .menu>dl>.menu-depth01.off {
        color: #000;
        text-shadow: none;
        background: #fff;
        border-bottom: 1px solid #e6e6e6;
        /* text-shadow: 1px 1px 0px rgba(0,0,0,0.5); */
    }

    
/* ----------------------------------------- */
/* ----------------------------------------- */
/* ----------------------------------------- */
/* ----------------------------------------- */
/* ----------------------------------------- */
/* ----------------------------------------- */
/* ----------------------------------------- */
/* 코드추가 */


    header .header-main .menu>dl>dt+dd article .sub-menu dl dd{
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        /* align-items: center; */
        background: #e6e6e6;
    }
    header .header-main .menu>dl>dt+dd article .sub-menu dl dd a,
    header .header-main .menu>dl>dt+dd article .sub-menu dl dd a:last-of-type{
        margin: 0;
        width: 100%;
        font-weight: normal;
        color: #313131;
        padding: 15px 30px;
        height: 52px;
    }

    header .header-main .menu>dl>dd article .sub-menu dl dd.on a:first-of-type,
    header .header-main .menu>dl>dd article .sub-menu dl dd:hover a:first-of-type,
    header .header-main .menu>dl>dd article .sub-menu dl dd a:hover {
        color: #000000;
        text-shadow: none;
        background: #e6e6e6;
        /* text-decoration: underline; */
        /* text-underline-position: under; */
    }

    header .header-main .menu>dl>dt+dd article .sub-menu dl{
        padding: 0;
    }
    header .header-main .menu>dl>dt+dd article .sub-menu dl dd a:first-of-type{
        height: 52px;
        transition: all 0.2s;
    }
    header .header-main .menu>dl>dt+dd article .sub-menu dl dd a:first-of-type:not(:only-of-type):after{
        content: "";
        display: inline-block;
        position: absolute;
        top: 50%;
        right: 30px;
        transform: translateY(-50%);
        width: 14px;
        height: 14px;
        background: url(../../../../images/iosf/ko/front/img_mobile_depth2_open_14x14.png)no-repeat center;
    }

    header .header-main .menu>dl>dt+dd article .sub-menu dl dd a:nth-of-type(2n){
        margin-left: 30px !important;
        margin-right: 1px;
    }
 

    header .header-main .menu>dl>dt+dd article .sub-menu dl dd a ~ a.link:after{
        position: absolute;
        right: 20px;
        width: 14px;
        height: 14px;
        background: url(../../../../images/iosf/ko/front/img_link_grey_14x14.png)no-repeat center;

    }
    
    header .header-main .menu>dl>dt+dd article .sub-menu dl dd a.link:after{
        width: 14px;
        height: 14px;
        right: 30px;
        background: url(../../../../images/iosf/ko/front/img_link_black_14x14.png)no-repeat center;
    }
    header .header-main .menu>dl>dt+dd article .sub-menu dl dd a.link:hover:after{
        background: url(../../../../images/iosf/ko/front/img_link_black_14x14.png)no-repeat center;
    }



/* ----------------------------------------- */
/* ----------------------------------------- */
/* ----------------------------------------- */
/* 버튼 롤오버 "on" 효과 */

    header .header-main .menu>dl>dt+dd article .sub-menu dl dd.on a:nth-of-type(n + 4){
        margin-top: 1px !important;
    }

    header .header-main .menu>dl>dt+dd article .sub-menu dl dd.on a:first-of-type:not(:only-of-type):after{
        background: url(../../../../images/iosf/ko/front/img_mobile_depth2_close_14x14.png)no-repeat center;
    }

    header .header-main .menu>dl>dt+dd article .sub-menu dl dd a ~ a.link:hover:after{
        background: url(../../../../images/iosf/ko/front/img_link_white2_14x14.png)no-repeat center;
    }

    header .header-main .menu>dl>dt+dd article .sub-menu dl dd.on a ~ a,
    header .header-main .menu>dl>dt+dd article .sub-menu dl dd.on a:last-of-type:not(:only-child){
        position: relative;
        width: calc(50% - 30px);
        /* margin: 0; */
        font-weight: normal;
        background: #fff;
        color: #626262;
        padding: 15px 20px;
        height: 52px;
        transition: all 0.2s;
        /* border: 1px solid #e6e6e6; */
    }
    
    header .header-main .menu>dl>dt+dd article .sub-menu dl dd.on a:last-of-type:not(:only-of-type){
        margin-bottom: 20px;
    }


    header .header-main .menu>dl>dt+dd article .sub-menu dl dd a:hover:not(:first-of-type),
    header .header-main .menu>dl>dt+dd article .sub-menu dl dd a:last-of-type:hover:not(:only-of-type){
        background: #313133;
        border: 0;
        color: #fff;
        text-shadow: none;
    }


/* 코드추가 */
/* ----------------------------------------- */
/* ----------------------------------------- */
/* ----------------------------------------- */

/* 기본 모바일메뉴 탭 끄기 */

    header .header-main .menu>dl>dt+dd article .sub-menu dl dd a ~ a,
    header .header-main .menu>dl>dt+dd article .sub-menu dl dd a:last-of-type:not(:only-child){
        width: calc(50% - 30px);
        height: 0;
        padding: 0;
        margin: 0;
        overflow: hidden;
        transition: all 0.2s;
    }


/* ----------------------------------------- */
/* ----------------------------------------- */
/* ----------------------------------------- */
/* ----------------------------------------- */


    header .header-main .menu>dl>dt:hover,
    header .header-main .menu>dl>dt.on {
        color: #fff;
    }

    header .header-main .menu>dl>dt+dd:hover,
    header .header-main .menu>dl:hover>dt+dd {
        top: 0;
    }

    header .header-main .menu>dl>dt:after,
    header .header-main .menu>dl .sub-pannel.off {
        display: none;
    }

    header .header-main .menu>dl>dt:last-of-type {
        display: flex;
    }


    header .header-main .menu>dl>dd {
        display: block;
        position: relative;
        top: 0;
        height: auto;
    }

    header .header-main .menu>dl>dd:after,
    header .header-main .menu>dl>dd:before {
        display: none;
    }

    header .header-main .menu>dl>dd article {
        /* display: flex; */
        height: auto;
        background: #fcfcfc;
        border-bottom: 0px solid #830020;
        padding: 0;
    }


    header .header-main .menu>dl>dd article div:first-of-type {
        display: none;
    }

    header .header-main .menu>dl>dd article div {
        display: flex;
        flex-direction: column;
    }

    header .header-main .menu>dl>dd article div dl {
        display: flex;
        flex-wrap: wrap;
    }

    header .header-main .menu>dl>dd article .sub-menu {
        width: 100%;
        padding: 0;
        /* padding: 0 28px 0 28px; */
    }



    

    header .header-main .menu>dl>dt+dd {
        display: block;
        top: 0;
        border-bottom: 0px;
    }

    /* header .header-main .menu > dl > dt + dd article{
        display: none;
    } */

    header .header-main .menu>dl>dt+dd.off > article .sub-menu dl dd a{
        /* display: none; */
        height: 0 !important;
        overflow: hidden;
        padding: 0 30px !important;
        transition: all 0.2s;
        border: 0 !important;
        margin: 0 !important;
    }
    header .header-main .menu>dl>dt+dd.off > article .sub-menu dl dd{
        height: 0 !important;
    }
    /* header .header-main .menu>dl>dt+dd.off > article{
        height: 0;
    }
    header .header-main .menu>dl>dt.on+dd.off > article{
        height: 0;
    } */




    /* 모바일 메뉴 끝 */
    /* -------------------------------------------------------------------------------------------- */
    /* -------------------------------------------------------------------------------------------- */
    /* -------------------------------------------------------------------------------------------- */
    /* -------------------------------------------------------------------------------------------- */
    /* -------------------------------------------------------------------------------------------- */
    /* -------------------------------------------------------------------------------------------- */
    /* -------------------------------------------------------------------------------------------- */
    /* -------------------------------------------------------------------------------------------- */
    /* -------------------------------------------------------------------------------------------- */


    .main .slide .wrap .main_pannel .part{
        width: auto;
    }

    .main .schedule .month_list > div:first-of-type{
        min-width: 140px;
    }
    .main .schedule .month_list .list .btn{
        min-width: 130px;
    }

    .main .schedule .month_list .month div:first-of-type,
    .main .schedule .month_list .month div:last-of-type{
        display: none;
    }

    .main .enter_guide .list .pannel{
        padding: 37px 30px;
    }

    .main .enter_guide .list .pannel.white > div{
        padding: 37px 30px;
    }

    .main .enter_guide .list .pannel h2{
        white-space: nowrap;
        text-align: center;
        letter-spacing: -1px;
    }

    .main .news_service .wrap .part section .news_slide .page > div:first-of-type,
    .main .news_service .wrap .part section .news_slide .cover:hover .page > div:first-of-type:before{
        height: 300px;
    }
    .main .news_service .wrap .part section .news_slide .cover:hover .page > div:first-of-type:after{
        height: 394px;
    }
    

    .main .news_service .wrap .part section .news_slide .cover{
        width: calc((100% / 2) -20px);
        height: 514px;
    }

    .main .banner_slide .wrap .list .slick-slide { 
        margin: 0 12px;
    }


    footer .info .webaccess {
        float: none;
        /* margin-left: 180px; */
        margin-top: 4px;
    }


}


/* ---------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */

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

    .header-popup .headerpop_slide .part a b{
        font-size: 19px;
    }
    .header-popup .headerpop_slide .part a p{
        font-size: 15px;
    }


    header .header-main .search button+.panel{
        height: 247px;
        background: 
        url(../../../../images/iosf/ko/front/bg_tiger_508x247.png)no-repeat center,
        #830020;
        background-size: auto 100%;
    }
    header .header-main .search button+.panel form{
        width: 100%;
    }
    header .header-main .search button+.panel>button{
        margin-left: 0;
    }

    /* --------------------------------------------- */
    /* --------------------------------------------- */
    /* --------------------------------------------- */
    /* --------------------------------------------- */
    /* 모바일베뉴 */

    header .header-main .menu>dl{
        width: 100%;
    }


    /* 모바일베뉴 */
    /* --------------------------------------------- */
    /* --------------------------------------------- */
    /* --------------------------------------------- */
    /* --------------------------------------------- */

    .main article:first-of-type{
        padding:  150px 0 100px;
    }

    .main .slide .wrap .text{
        height: auto;
        align-items: center;
    }

    .main .slide .wrap .text b{
        font-size: 21px;
    }

    .main .slide .wrap .text span{
        width: 276px;
        height: 26px;
        background-size: 100%;
    }

    .main .slide .wrap .text p{
        width: 58%;
        font-size: 16px;
    }

    .main .slide .wrap .text b:after{
        margin: 26px auto;
    }
    
    .main .slide .wrap .main_pannel .part{
        margin-top: 50px;
        width: 280px;
    }


    .main .slide .wrap .main_pannel, 
    .main .slide .wrap .main_pannel form{
        width: 100%;
    }
    

    .main .slide .wrap .main_pannel .slick-slide{
        margin: 0 13px;
    }


    .main .slide .wrap .shoutcutbtn{
        margin-top: 128px;
    }


    .main article{
        padding: 80px 0 120px;
    }

    .main .notice_board .wrap .notice .head h1,
    h1{
        font-size: 27px;
    }

    .main .notice_board .wrap .notice:has(.page) .head h1 {
        margin-bottom: 52px;
    }

    .main .notice_board .wrap .notice .head div button{
        font-size: 21px;
    }
    .main .notice_board .wrap .notice .head div button ~ button:before{
        height: 21px;
    }

    .main .notice_board .wrap .notice ~ div {
        margin-top: 80px;
    }

    .main .notice_board .wrap .notice .head div button:after,
    .main .notice_board .wrap .notice .head div span {
        top: calc(100% + 23px);
    }

    .main .notice_board .wrap .notice .list:before{
        /* top: -30px; */
        margin-top: 22px;
    }
    .main .notice_board .wrap .notice .list > div{
        /* margin-top: 52px; */
        margin-top: 30px;
    }

    .main .wrap .head a{
        font-size: 0;
        top: 6px;
    }
    .main .wrap .head a:before {
        content: '';
        display: inline-block;
        width: 24px;
        height: 24px;
        background: url(../../../../images/iosf/ko/front/img_more_red_24x24.png)no-repeat center;
        background-size: 100%;
        margin-right: 0px;
    }

    .main .quick-menu .menu h1{
        font-size: 27px;
    }
    
    .main .quick-menu{
        padding: 40px 0 30px;
    }

    .main .news_service .wrap .part section .ebook_slide.wide .page{
        height: 688px;
    }
    .main .news_service .wrap .part section .ebook_slide.wide .page div img{
        width: 100%;
        height: 100%;
    }
    .main .news_service .wrap .part section .ebook_slide.wide .page .text{
        z-index: 1;
        top: auto;
        bottom: 0;
        width: 100%;
        height: 354px;
        padding: 30px;
    }

    .main .news_service .wrap .part section .ebook_slide.wide .page .text div a{
        font-size: 21px;
    }
    .main .news_service .wrap .part section .ebook_slide.wide .page .text span{
        font-size: 17px;
    }

    .main .news_service .wrap .part section .ebook_slide.wide .page .text p{
        text-align: center;
    }
    .main .news_service .wrap .part section .ebook_slide.wide .page .text p:after{
        margin: 12px auto 26px;
    }

    .main .news_service .wrap .part section .ebook_slide.wide .page .text > a {
        bottom: 70px;
        left: 50%;
        transform: translateX(-50%);
    }

    .news_service .part:first-of-type .ebook_slide .slick-dots,
    .news_service .part .ebook_slide .slick-dots{
        text-align: center;
        left: 50%;
        transform: translateX(-50.5%);
        bottom: 24px;
    }

    .main .news_service .wrap .part section .ebook_slide .page{
        position: relative;
        height: 657px;
        padding: 30px;
    }

    .main .news_service .wrap .part + div section .ebook_slide .page > div:first-of-type{
        position: absolute;
        top: 94px;
        left: 50%;
        width: 220px;
        height: 280px;
        transform: translateX(-50%);
    }

    .main .news_service .wrap .part section .ebook_slide .page .text{
        width: 100%;
        text-align: center;
        padding: 0;
    }
    .main .news_service .wrap .part section .ebook_slide .page .text p:after{
        margin: 10px auto 330px;
    }

    .main .news_service .wrap .part section .ebook_slide .page .text > a{
        left: 50%;
        transform: translateX(-50%);
        bottom: 40px;
    }

    .main .news_service .wrap .part section .ebook_slide .page .text div a
    .main .news_service .wrap .part section .ebook_slide .page .text div a:hover{
        font-size: 21px;
    }
    .main .news_service .wrap .part section .ebook_slide .page .text span{
        font-size: 17px;
    }


    .main .schedule{
        padding: 80px 0 60px;
    }

    .main .schedule .month_list{
        flex-direction: column;
        margin-top: 10px;
        border: 0;
    }
    .main .schedule .month_list > div:first-of-type p{
        display: none;
    }
    .main .schedule .month_list h1{
        font-size: 27px;
    }
    .main .schedule .month_list > div:first-of-type h1:after{
        content: "년";
        display: inline-block;
        width: 34px;
        height: 10px;
        font: bold 27px/1.4em "나눔바른고딕";
        margin-left: 2px;
    }


    .main .schedule .month_list .month div:nth-of-type(2) button, 
    .main .schedule .month_list .month div:nth-last-of-type(2) button{
        pointer-events: none;
    }
    .main .schedule .month_list .month div:nth-of-type(2) button p, 
    .main .schedule .month_list .month div:nth-last-of-type(2) button p{
        display: none;
    }

    
    .main .schedule .month_list .list{
        position: relative;
        width: 130vw;
        margin-top: 14px;
        border: 1px solid #e0e0e0;
        border-bottom: 1px solid #3b3b3e;
    }
    .main .schedule .month_list .list .btn:after, .main .schedule .month_list .list div button:after{
        height: 100%;
        background: #e0e0e0;
    }
    .main .schedule .month_list .list .btn{
        position: absolute;
        top: 0;
        left: 15vw;
        width: 100vw;
        height: 100%;
    }
    .main .schedule .month_list .list .btn button{
        width: 11vw;
        height: 100px;
        margin-left: 0px;
        background: url(../../../../images/iosf/ko/front/img_prev_black_18x18.png)no-repeat center;
    }
    .main .schedule .month_list .list .btn button.next{
        margin-left: auto;
        background: url(../../../../images/iosf/ko/front/img_next_black_18x18.png)no-repeat center;
    }
    .main .schedule .month_list .list .btn button:hover{
        background: url(../../../../images/iosf/ko/front/img_prev_red_18x18.png)no-repeat center;
    }
    .main .schedule .month_list .list .btn button.next:hover{
        background: url(../../../../images/iosf/ko/front/img_next_red_18x18.png)no-repeat center;
    }
    

    .main .schedule_list .list a{
        width: 100%;
        margin-bottom: 20px;
    }
    .main .schedule_list .list a ~ a:not(:nth-of-type(2n+1)){
        margin-left: 0;
        margin-bottom: 20px;
    }

    .main .schedule_list{
        padding: 0px 0 120px;
    }


    .main .enter_guide{
        padding: 80px 0 120px;
    }
    .main .enter_guide .list{
        margin-top: 30px;
    }
    .main .enter_guide .list .pannel{
        padding: 30px;
    }

    .main .enter_guide .list .pannel .card{
        width: 100%;
    }
    .main .enter_guide .list .pannel .card ~ div{
        margin-left: 0;
    }

    .main .enter_guide .list .pannel h2{
        font-size: 23px;
    }
    .main .enter_guide .list .pannel .card p{
        font-size: 19px;
        padding: 17px;
    }
    .main .enter_guide .list .pannel .card p + p small{
        font-size: 16px;
    }


    .main .enter_guide .list .part > div{
        flex-direction: column;
    }

    .main .enter_guide .list .pannel.white{
        width: 100%;
    }
    .main .enter_guide .list .pannel.white > div{
        padding: 30px;
    }
    .main .enter_guide .list .pannel.white ~ div{
        margin-left: 0;
        margin-top: 20px;
    }

    .main .enter_guide .list .pannel .box div.link a,
    .main .enter_guide .list .pannel .box div:last-of-type a{    
        font-size: 17px;
    }
    .main .enter_guide .list .pannel .box div:last-of-type a:after{
        width: 16px;
        height: 16px;
        margin-left: 12px;
        background-size: 100%;
    }


    .main .enter_guide .list .pannel.white .btn a{
        padding:26px 30px;
        font-size: 19px;
    }

    .main .news_service .wrap .part section .news_slide{
        margin-bottom: 20px;
        margin-top: 60px;
    }


    .main .news_service .wrap .part section .news_slide .cover{
        height: 617px;
    }
    .main .news_service .wrap .part section .news_slide .page > div:first-of-type, 
    .main .news_service .wrap .part section .news_slide .cover:hover .page > div:first-of-type:before{
        height: 414px;
    }
    .main .news_service .wrap .part section .news_slide .cover:hover .page > div:first-of-type:after{
        height: 458px;
    }

    .main .news_service .wrap .part section .news_slide .text p{
        font-size: 19px;
    }
    .main .news_service .wrap .part section .news_slide .text b,
    .main .news_service .wrap .part section .news_slide .text span{
        font-size: 17px;
    }



    footer .footer-top .left-links dl{
        height: auto;
    }

    footer .footer-top .left-links dl dt a{
        font-size: 17px;
    }

    footer .footer-top .wrap{
        flex-direction: column;
        padding: 36px 0 28px;
    }



    footer .footer-top .linkbtn,
    footer .footer-top .linkbtn div:first-of-type a{    
        margin-left: unset;
    }
    footer .footer-top .linkbtn{
        margin-top: 14px;
    }

    footer .info{
        padding-top: 40px;
    }
    footer .info .wrap {
        flex-direction: column-reverse;
        align-items: center;
    }

    footer .info .copyright{
        flex-direction: column;
        align-items: center;
        margin: 0;
        margin-top: 40px;
    }
    footer .info .copyright .logo a{
        margin: 0;
        width: 102px;
        height: 100px;
        background: url(../../../../images/iosf/ko/front/logo_102x100.png)no-repeat center;
    }

    footer .info .copyright .text small:not(small small){
        display: block;
        width: 100%;
        text-align: center;
        font-size: 17px;
        margin-top: 24px;
    }

    footer .info .site-links{
        margin-left: unset;
    }
    footer .info .site-links button,
    footer .info .site-links dl dt a{    
        width: 280px;
    }
    footer .info .webaccess{
        display: none;
    }

    footer .info .wrap > div:first-of-type.webaccess{
        /* display: block; */
        position: relative;
        top: 30px;
    }


}



/* ----------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------------------- */

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

    .headerpop_slide .slick-dots{
        top: 66px !important;
    }

    .header-popup .headerpop_slide .part span{
        display: none;
    }
    .main .notice_board .wrap .notice .list > div p{
        display: none;
    }


     /* --------------------------------------------- */
    /* --------------------------------------------- */
    /* --------------------------------------------- */
    /* --------------------------------------------- */
    /* 모바일베뉴 */




    header .header-main .menu>dl>.mobile-menu-pannel .logo{
        background-position: 20px;
    }
    header .header-main .menu>dl>.mobile-menu-pannel>button{
        right: 20px;
    }



    header .header-main .menu>dl>.mobile-menu-pannel .loginpannel a, 
    header .header-main .menu>dl>.mobile-menu-pannel .loginpannel .logoutbtn{
        min-width: 130px;
    }
    header .header-main .menu>dl>.mobile-menu-pannel .loginpannel{
        padding: 20px;
    }
    header .header-main .menu>dl>.menu-depth01:not(.off), 
    header .header-main .menu>dl>.menu-depth01{
        padding: 20px;
    }
    header .header-main .menu>dl>dt+dd article .sub-menu dl dd a, 
    header .header-main .menu>dl>dt+dd article .sub-menu dl dd a:last-of-type{
        padding: 15px 20px;
    }
    header .header-main .menu>dl>dt+dd article .sub-menu dl dd a:first-of-type:not(:only-of-type):after{
        right: 20px;
    }
    header .header-main .menu>dl>dt+dd article .sub-menu dl dd.on a ~ a, header .header-main .menu>dl>dt+dd article .sub-menu dl dd.on a:last-of-type:not(:only-child){
        width: calc(100% - 40px);
    }
    header .header-main .menu>dl>dt+dd article .sub-menu dl dd a:nth-of-type(n + 2){
        margin-left: 20px !important;
    }
    header .header-main .menu>dl>dt+dd article .sub-menu dl dd.on a:nth-of-type(n + 3){
        margin-top: 1px !important;
    }
    header .header-main .menu>dl>dt+dd article .sub-menu dl dd a.link:after{
        right: 20px;
    }


    /* 모바일베뉴 */
    /* --------------------------------------------- */
    /* --------------------------------------------- */
    /* --------------------------------------------- */
    /* --------------------------------------------- */


    /* 2줄짜리 new 아이콘 사용함 */
    .main .notice_board .wrap .notice .list > div.new a span{
        display: inline-block;
    }
    .main .notice_board .wrap .notice .list > div.new a + span{
        display: none;
    }

    .main .notice_board .wrap .notice .list > div a{
        -webkit-line-clamp: 2;
    }

    .main .quick-menu .menu dl dt{
        flex: 0 1 33.333%;
    }

    .main .news_service .wrap .part section .ebook_slide.wide .page{
        height: 607px;
    }

    .main .news_service .wrap .part section .ebook_slide.wide .page > div:first-of-type{
        height: 253px;
    }


    .main .schedule .month_list .month button.select p,
    .main .schedule .month_list .month button p {
        font-size: 15px;
    }

    .main .schedule .month_list .month button.select p + p,
    .main .schedule .month_list .month button p + p{
        margin-top: 0;
        font-size: 25px;
    }

    .main .schedule_list .list a p{
        font-size: 17px;
    }
    .main .schedule_list .list a p + p{
        font-size: 19px;
    }

    .main .enter_guide .list .part > div ~ div,
    .main .enter_guide .list .part{
        margin-top: 20px;
    }

    .main .news_service .wrap .part section .news_slide .cover{
        height: 517px;
    }

    .main .news_service .wrap .part section .news_slide .page > div:first-of-type, 
    .main .news_service .wrap .part section .news_slide .cover:hover .page > div:first-of-type:before{
        height: 314px;
    }

    .main .news_service .wrap .part section .news_slide .cover:hover .page > div:first-of-type:after{
        height: 384px;
    }

    .main .banner_slide .wrap .list .banner_image img{
        object-fit: scale-down;
    }

    footer .footer-top .left-links{
        max-width: 100%;
    }

    footer .footer-top .linkbtn div a{
        width: 40px;
        height: 40px;
        background-size: 100%;
    }


}


/* ---------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------------- */



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

    .wrap{
        padding: 0 20px;
    }
    .header-popup + header .header-main .menu .mobile-menubtn button, 
    header .header-main .menu .mobile-menubtn button, 
    header:hover .header-main .menu .mobile-menubtn button, 
    header.follow .header-main .menu .mobile-menubtn button{
        right: 20px;
    }
    header .header-main .search>button{
        margin-right: 45px;
    }


    header .header-main .menu>dl>.mobile-menu-pannel .loginpannel .user p br{
        display: none;
    }


    .main .slide .wrap .text p{
        width: 100%;
    }

    .main .slide .wrap .main_pannel .slick-slide{
        margin: 0 5px;
    }

    .main .quick-menu .menu dl dt{
        flex: 1 0 45%;
    }

    .main .news_service .wrap .part section .ebook_slide.wide .page{
        height: 515px;
    }

    .main .news_service .wrap .part section .ebook_slide.wide .page > div:first-of-type{
        height: 162px;
    }

    .main .schedule{
        padding-bottom: 50px;
    }

    .main .schedule .month_list .list{
        width: 108vw;
    }
    .main .schedule .month_list .list .btn{
        left: 4vw;
    }

    .main .schedule .month_list .list .btn button{
        width: 14vw;
        margin-left: 8px;
    }
    .main .schedule .month_list .list .btn button.next{
        margin-right: 8px;
    }
    .main .schedule_list .list a ~ a{
        margin-bottom: 20px !important;
    }

    .main .news_service .wrap .part section .news_slide .cover{
        height: 403px;
    }
    .main .news_service .wrap .part section .news_slide .page > div:first-of-type, 
    .main .news_service .wrap .part section .news_slide .cover:hover .page > div:first-of-type:before{
        height: 200px;
    }

    .main .news_service .wrap .part section .news_slide .cover:hover .page > div:first-of-type:after{
        height: 284px;
    }

    footer .footer-top .left-links dl{
        align-items: flex-start;
        flex-direction: column;
    }
    footer .footer-top .left-links dl dt:first-of-type a{
        padding: 0 20px;
    }

    footer .footer-top .left-links dl dt:before {
        content: "";
        display: inline-block;
        min-width: 8px;
        height: 8px;
        background: #828282;
        border-radius: 4px;
        margin-top: 7px;
    }
    footer .footer-top .left-links dl dt ~ dt{
        margin-top: 7px;
    }

    footer .footer-top .linkbtn{
        /* margin-top: 18px; */
    }



}