@charset "utf-8";

/* 반응형 */
@media screen and (max-width: 1440px){
    #search fieldset{width:100%;}
    .container{width:100%;}
}
@media screen and (max-width: 1280px){
    .container{width:100%;}
    #search fieldset{width:100%;}
    header{height:auto; border-bottom:1px solid #ccc;}
    header h1{width:100%; margin:0; padding:12px 0; text-align:center;}
    header h1 a{display:inline-block; margin-left:50px; padding:13px 50px;}
    header h1 a img{width:250px;}
    header nav{position:absolute; top:0px; left:-1400px; z-index:10; width:100%; height:100vh; margin:0; padding:0; border-right:1px solid #ccc; transform:translateX(0); transition:all 350ms;}
    header .lnb{position:absolute; top:-7px; left:-1400px; z-index:999; opacity:0; transition:all 350ms;}
    header .lnb.on{position:fixed; top:4px; left:75px; z-index:999; opacity:1; transition:all 350ms; width:100%;}
    header .lnb.on li{margin:0 5px;}
    header .lnb.on li a{display:block; border:2px solid #ccc; border-radius:15px; background:#fff;}
    header nav.on{position:fixed; top:0px; left:0; z-index:10; width:100%; height:100vh; margin:0; padding:0; border-right:1px solid #ccc; transform:translateX(0); transition:all 350ms;}
    header nav.on .gnb{margin-top:80px; padding:0px; background:#fff;}
    header nav.on .gnb > li{width:100%; text-align:left;}
    header nav .gnb > li > div.sub{display:block; min-height:0; height:0; background:#f5f5f5; overflow:hidden;}
    header nav .gnb > li > div > h2{display:none;}
    header nav .gnb > li > div > ul{width:100%;}
    header nav .gnb > li > div > ul > li{width:100%; flex-direction:column;}
    header nav .gnb > li > div > ul > li > a{display:none; width:100%; color:#fff; background:#00b5f6;}
    header nav .gnb > li > div > ul > li > ul{width:100%; flex-direction:column;}
    header nav.on .gnb > li > a{height:auto; margin-bottom:0; padding:10px 20px; color:#fff;  text-align:left; background:#0c407f; border-bottom:1px solid #4e5f87;}
    header nav.on .gnb > li > a.on:before{content: ''; position: absolute; top: 50%; left: 49%; width: 0; height: 0; margin: -8px 0 0 0; border-left: 15px solid #fff; border-top: 15px solid transparent; transform: rotate(45deg);}
    header nav.on .gnb > li > ul{overflow:hidden; border:0;}
    header nav.on .gnb > li > ul > li{position:relative; border-bottom:1px solid #e6e6e6;}
    /* 3차 메뉴 더보기 */
    header nav.on .gnb > li > ul > li > a{position:relative; height:auto; padding:10px 20px 10px 35px;}
    header nav.on .gnb > li > ul > li > a:before{content:''; display:block; position: absolute; top: 19px; left: 15px; width: 6px; height: 6px; margin: -3px 0 0 0; border: 4px solid #fd725d; border-left: 4px solid #00a05c; border-top: 4px solid #0c4a96; border-bottom: 4px solid #0c4a96; border-radius: 50%;background: none;}
    header nav.on .gnb > li > ul{display:none; position:absolute; top:0px; right:0px; width:50%; height:100vh; margin:0; background:#fff; z-index:90;}
    header nav.on .gnb > li > ul.on{display:block;}
    header nav.on .gnb > li > ul > li > ul > li > a{display:block; padding:4px 0;}
    header nav.on:before, header nav:after{display:none;}
    header .mobile_btn{display:block; position:absolute; top:20px; left:20px; z-index:99;}
    header .mobile_btn.on{position:fixed;}
    .mask.on{display:block; position:absolute; top:0; left:0; z-index:2; width:100%; height:100%; background:rgba(0, 0, 0, .5);}

    /* 모바일메뉴 */
    .menu-trigger{margin-top:5px;}
    .menu-trigger,
    .menu-trigger span {display: inline-block; transition: all .4s; box-sizing: border-box;}
    .menu-trigger {position: relative; width: 40px; height: 30px;}
    .menu-trigger span {position: absolute; left: 0; width: 100%; height: 4px; background-color: #000; border-radius: 4px;}
    .menu-trigger span:nth-of-type(1) {top: 0;}
    .menu-trigger span:nth-of-type(2) {top: 13px;}
    .menu-trigger span:nth-of-type(3) {bottom: 0;}
    .menu-trigger.type7 span:nth-of-type(1) {-webkit-animation : menu-bar07-01 .75s forwards; animation : menu-bar07-01 .75s forwards;}
    @-webkit-keyframes menu-bar07-01 {
    0% {-webkit-transform : translateY(13px) rotate(45deg);}
    50% {-webkit-transform : translateY(13px) rotate(0);}
    100% {-webkit-transform : translateY(0) rotate(0);}
    }
    @keyframes menu-bar07-01 {
    0% {transform : translateY(13px) rotate(45deg);}
    50% {transform : translateY(13px) rotate(0);}
    100% {transform : translateY(0) rotate(0);}
    }
    .menu-trigger.type7 span:nth-of-type(2) {transition : all .25s .25s; opacity : 1;}
    .menu-trigger.type7 span:nth-of-type(3) {-webkit-animation : menu-bar07-02 .75s forwards; animation : menu-bar07-02 .75s forwards;}
    @-webkit-keyframes menu-bar07-02 {
    0% {-webkit-transform : translateY(-13px) rotate(-45deg);}
    50% {-webkit-transform : translateY(-13px) rotate(0);}
    100% {-webkit-transform : translateY(0) rotate(0);}
    }
    @keyframes menu-bar07-02 {
    0% {transform : translateY(-13px) rotate(-45deg);}
    50% {transform : translateY(-13px) rotate(0);}
    100% {transform : translateY(0) rotate(0);}
    }
    .menu-trigger.active-7 span:nth-of-type(1) {-webkit-animation : active-menu-bar07-01 .75s forwards; animation : active-menu-bar07-01 .75s forwards;}
    @-webkit-keyframes active-menu-bar07-01 {
    0% {-webkit-transform : translateY(0) rotate(0);}
    50% {-webkit-transform : translateY(13px) rotate(0);}
    100% {-webkit-transform : translateY(13px) rotate(45deg);}
    }
    @keyframes active-menu-bar07-01 {
    0% {transform : translateY(0) rotate(0);}
    50% {transform : translateY(13px) rotate(0);}
    100% {transform : translateY(13px) rotate(45deg);}
    }
    .menu-trigger.active-7 span:nth-of-type(2) {opacity : 0;}
    .menu-trigger.active-7 span:nth-of-type(3) {-webkit-animation : active-menu-bar07-02 .75s forwards; animation : active-menu-bar07-02 .75s forwards;}
    @-webkit-keyframes active-menu-bar07-02 {
    0% {-webkit-transform : translateY(0) rotate(0);}
    50% {-webkit-transform : translateY(-13px) rotate(0);}
    100% {-webkit-transform : translateY(-13px) rotate(-45deg);}
    }
    @keyframes active-menu-bar07-02 {
    0% {transform : translateY(0) rotate(0);}
    50% {transform : translateY(-13px) rotate(0);}
    100% {transform : translateY(-13px) rotate(-45deg);}
    }
    /* 슬라이드 */
    .slide_main{}
    .slide_main .slide_all{width:100%;}
    .slide_main .slide_all img{width:100%;}

    /* 게시판 */
    .main .container{padding-top:20px;}
    .main .board{width:100%;}
    .main .board > ul > li > ul{width:88%;}
    .main .board > ul > li > ul > li > a{width:60%;}
    .main .board > ul > li > ul > li span{width:20%;}

    /* 아이콘 */
    .main .icon{padding:0 0 20px 0;}
    .main .icon li{width:33.3%;}

    /* 푸터 */
    footer .foot_logo{width:100%; text-align:center;}
    footer .address{width:100%; margin:10px 0; text-align:center;}
    footer .foot_menu{width:100%;}
    footer .foot_menu li{width:33.3%; background:#f6f6f6; border:1px solid #ccc;}
    footer .foot_menu li a::before{display:none;}
    footer .foot_menu li a{display:block; padding:5px; color:#777; text-align:center;}
    footer .foot_menu li:first-child a{color:#ff6600;}
    footer .foot_menu li:first-child a:hover{color:#c5d62f;}
    footer .foot_menu li:first-child a::before{width:0;}

    /* 서브메뉴 */
    .snb .container > ul{flex-direction:column;}
    .snb .container > ul > li{width:100%; border-right:0; border-bottom:1px solid #eee;}
    .snb .container > ul > li:last-child{border-bottom:0;}
    .snb .container > ul > li > a{padding:20px 45px 20px 15px;}

    /* 로그인 */
    .log-box-wrap {width:90%;}

    /* 회원가입 */
    table.tb_input input{width:100%;}
    .join .term_ok{width:90%;}
    .join .join_choose{flex-direction:column;}
    .join .join_choose li{width:100%;}
    

    /* 모달 */
    .modal.modal_id_check .inner,
    .modal.modal_school_search .inner{width:90%;}
}

@media screen and (max-width: 640px){
    /* 회원가입 */
    table.tb_input input[type="text"],
    table.tb_input input[type="password"]{width:100%;}
}

@media screen and (max-width: 520px){
    header .lnb.on li{margin:8px 3px 0;}
    header .lnb.on li a{display:block; padding:8px; border:2px solid #ccc; border-radius:15px; background:#fff;}
}

@media screen and (max-width: 430px){
    /* 검색 */
    #search .btn_close{top:0px; right:5px;}
    #search .inner{width:60%;}
    #search input[type="text"]{padding-left:10px; font-size:16px;}
}

@media screen and (max-width: 720px){
    /* 드림레터 */
    .contents.dream img{width:100%;}
}