@charset 'utf-8';

/* ====================== */
/* tablet */
/* ====================== */
@media screen and (max-width:1024px) {
    body {background-color:#f8f8f8;}
    #wrap {display:block;height:unset;}
    .header {width:100%;padding-top:0;height:60px;background:#fff;display:flex;align-items:center;position:fixed;top:0;left:0;width:100%;z-index:10;justify-content:center;border-bottom:1px solid #EEEEEE;}
    .header .header-logo {margin:0 auto;height:35px;}
    .header .header-user {display:none;}
    .header .btn-drawer {display:inline-block;position:absolute;right:0;top:0;width:60px;height:60px;font-size:0;text-indent:-9999px;overflow:hidden;white-space:nowrap;background:url(../images/btn_drawer.svg) no-repeat center;}

    .detail-page {padding:60px 0 0;}
    .detail-page .tab-wrap {height:calc(100vh - 60px);}
    .detail-page .tab-head {margin-bottom:0;background-color:#fff;}
    .detail-page .tab-head .tab-btn {width:auto;height:48px;line-height:48px;padding:0 16px;border-radius:0;border:0;border-bottom:2px solid #D5D5D5;font-size:16px;font-weight:500;color:#9F9F9F;}
    .detail-page .tab-head .tab-btn.active {border-width:0 0 2px 0;border-bottom-color:#03351F;}
    .detail-page .tab-body {padding:0;border:0;border-radius:0;background-color:transparent;}
    .detail-page .filter {padding:20px 14px;display:block;margin-bottom:0;}
    .detail-page .filter-form {margin-bottom:12px;gap:8px;}
    .detail-page .filter-form .input {width:calc((100% - 10px)/2);}
    .detail-page .filter-form .input[type='date'] {width:100%;}
    .detail-page .filter-form select {width:calc((100% - 10px)/2);}
    .detail-page .btn-filter-submit {width:100%;justify-content: center;}
    .detail-page .add {display:block;}
    .detail-page .add-form {margin-bottom:12px;padding:0 14px;flex-direction:column;gap:8px;}
    .detail-page .add-form .input {width:100% !important;}
    .detail-page .btn-add-submit {width:100%;border-radius:0;}
    .detail-page .tls table {background-color:#fff;}
    .detail-page .tls thead th {font-size:15px;}
    .detail-page .tls tbody td {height:54px;}
    .detail-page .btn-box {gap:6px;}
    .detail-page .btn-box .table-btn {height:32px;line-height:32px;font-size:13px;font-weight:400;width:64px;}
    .detail-page .timetable {border-radius:0;}
    .detail-page .timetable table {width:630px;}
    .detail-page .timetable tbody td {height:80px;}
    .detail-page .timetable tbody th {font-size:15px;width:60px;}
    .detail-page .timetable .class .class-nm {font-size:16px;}
    .detail-page .timetable .class .class-place {font-size:14px;}

    .container {background:none;}

    .home-btn {display:none;}

    .main-page .menu-swiper-box .menu-item .menu-thumb img {filter: none;}

    .modal.modal-menus {width:80%;}
    .modal.modal-menus .menu-list {display:grid;grid-template-columns:repeat(3, 1fr);gap:24px 14px;}
    .modal.modal-menus .modal-body {max-height:60vh;overflow:auto;}
}


/* ====================== */
/* Mobile */
/* ====================== */
@media screen and (max-width: 768px) {
    body {font-size: 16px;}

    .switch input {height:32px;width:70px;}
    .switch span {width:24px;height:24px;}
    .switch input:checked+span {left:42px;}

    .login-form .form-box input {height:50px;}

    #loginWrap .login-box {padding:40px 20px 20px;border-radius:0;}
    #loginWrap .login-box h1 {display:none;}
    #loginWrap .admin-go {margin-top:20px;font-size:15px;}
    #loginWrap .login-logo {margin-bottom:24px;height:44px;}
    #loginWrap .login-btns .login-btn {font-size:18px;height:50px;}
    #loginWrap .notice-box {border-radius:0;padding:20px;}
    #loginWrap .notice-item .notice-date {font-size:15px;}
    
    .main-page {padding:84px 14px 30px;}
    .main-page .title-area {margin-bottom:18px;}
    .main-page .title-area h2 {font-size:24px;}
    .main-page .title-area h2 img {width:22px;}
    .main-page .title-area .btn-more {height:36px;padding:0 12px 0 14px;font-size:15px;}
    .main-page .title-area .btn-more:after {width:14px;height:14px;}
    .main-page .menu-section {margin-bottom:60px;}
    .main-page .menu-swiper-box .menu-item .menu-thumb {margin-bottom:12px;}
    .main-page .menu-swiper-box .menu-item .menu-nm {font-size:18px;}
    .main-page .menu-swiper-box .swiper-button-next,
    .main-page .menu-swiper-box .swiper-button-prev {top:30%;width:30px;height:30px;}
    .main-page .menu-swiper-box .swiper-button-prev {left: -15px;}
    .main-page .menu-swiper-box .swiper-button-next {right: -15px;}
    .main-page .menu-swiper-box .swiper-button-next:after,
    .main-page .menu-swiper-box .swiper-button-prev:after {font-size:13px;}
    .main-page .grid6-4 {display:block;}
    .main-page .notice-section {width:100%;margin-bottom:60px;}
    .main-page .notice-item {padding:15px 18px;}
    .main-page .site-section {width:100%;}
    .main-page .site-quick {gap:10px;}

    .detail-page {padding:60px 0 0;}
    .detail-page .tab-wrap {height:calc(100vh - 60px);}
    .detail-page .tab-head {margin-bottom:0;background-color:#fff;}
    .detail-page .tab-head .tab-btn {width:auto;height:48px;line-height:48px;padding:0 16px;border-radius:0;border:0;border-bottom:2px solid #D5D5D5;font-size:16px;font-weight:500;color:#9F9F9F;}
    .detail-page .tab-head .tab-btn.active {border-width:0 0 2px 0;border-bottom-color:#03351F;}
    .detail-page .tab-body {padding:0;border:0;border-radius:0;background-color:transparent;}
    .detail-page .filter {padding:20px 14px;display:block;margin-bottom:0;}
    .detail-page .filter-form {margin-bottom:12px;gap:8px;}
    .detail-page .filter-form .input {width:calc((100% - 10px)/2);}
    .detail-page .filter-form .input[type='date'] {width:100%;}
    .detail-page .filter-form select {width:calc((100% - 10px)/2);}
    .detail-page .btn-filter-submit {width:100%;justify-content: center;}
    .detail-page .add {display:block;}
    .detail-page .add-form {margin-bottom:12px;padding:0 14px;flex-direction:column;gap:8px;}
    .detail-page .add-form .input {width:100% !important;}
    .detail-page .btn-add-submit {width:100%;border-radius:0;}
    .detail-page .tls table {background-color:#fff;}
    .detail-page .tls thead th {font-size:15px;} 
    .detail-page .tls tbody td {height:54px;}
    .detail-page .btn-box {gap:6px;}
    .detail-page .btn-box .table-btn {height:32px;line-height:32px;font-size:13px;font-weight:400;width:64px;}
    .detail-page .timetable {border-radius:0;}
    .detail-page .timetable table {width:630px;}
    .detail-page .timetable tbody td {height:80px;}
    .detail-page .timetable tbody th {font-size:15px;width:60px;}
    .detail-page .timetable .class .class-nm {font-size:16px;}
    .detail-page .timetable .class .class-place {font-size:14px;}

    .notice-page {padding-bottom:20px;}
    .notice-page h2 {font-size:18px;margin-bottom:12px;}
    .notice-page .notice-box {border-top-width:2px;background-color:#fff;}
    .notice-page .notice-box .notice-header {display:block;padding:14px 12px;}
    .notice-page .notice-box .notice-header .notice-title {font-size:18px;margin-bottom:7px;font-weight:700;}
    .notice-page .notice-box .notice-header .notice-info span {font-size:15px;margin-right:5px;}
    .notice-page .notice-box .notice-header .notice-info span:after {margin-left:8px;}
    .notice-page .notice-box .notice-attached {padding:6px 10px;}
    .notice-page .notice-box .notice-attached li {margin-bottom:2px;}
    .notice-page .notice-box .notice-attached a {font-size:14px;}
    .notice-page .notice-box .notice-attached a:before {width:18px;height:18px;}
    .notice-page .notice-box .notice-contents {padding:14px 12px 40px;font-size:15px;}
    .notice-page .notice-box .notice-btns {padding:0 12px 20px;text-align:center;}
    .notice-page .comment-box .comment-title {font-size:18px;}
    .notice-page .comment-box .comment-form .comment-submit-btn {width:60px;font-size:14px;}
    .notice-page .comment-box .comment-list {border-radius:14px;}
    .notice-page .comment-box .comment-item {padding:12px 14px;gap:12px;position:relative;}
    .notice-page .comment-box .comment-item .cmt-thumb img {width:36px;}
    .notice-page .comment-box .comment-item .cmt-author {margin-bottom:6px;font-size:15px;}
    .notice-page .comment-box .comment-item .cmt-text {font-size:14px;}
    .notice-page .comment-box .comment-item .cmt-delete-btn {position:absolute;right:14px;top:11px;font-size:14px;}
    .notice-page .notice-navigation {display:block;padding:4px 16px;}
    .notice-page .notice-navigation .navi-item {width:100%;padding:10px 0;border-bottom:1px solid #ddd;}
    .notice-page .notice-navigation .navi-item:last-child {border-bottom:0;}
    .notice-page .notice-navigation .navi-item .navi-label {font-size:14px;margin-right:12px;}
    .notice-page .notice-navigation .navi-item .navi-info .title {font-size:15px;}
    .notice-page .notice-navigation .navi-item .navi-info .author {font-size:14px;margin-left:16px;}

    .modal .modal-head {padding:20px 20px 0;}
    .modal .modal-title {font-size:22px;}
    .modal .btn-modal-close {width:32px;height:32px;}
    .modal .modal-body {padding:0 20px 25px;}
    .modal .modal-btns {padding:0 20px 20px;}
    .modal .modal-btn {height:44px;width:100%;}

    .modal.modal-menus {top:unset;transform:none;bottom:0;left:0;right:0;width:100%;border-radius:24px 24px 0 0;}
    .modal.modal-menus .menu-list {display:grid;grid-template-columns:repeat(2, 1fr);gap:20px 10px;}

    .modal.modal-common {border-radius:20px;}

    .modal.modal-notice-view {top:unset;transform:none;left:0;bottom:0;border-radius:20px 20px 0 0;padding:25px 18px 18px;}
    .modal.modal-notice-view .btn-modal-close {display:none;}
    /* .modal.modal-notice-view .notice-head {padding-bottom:14px;} */
    .modal.modal-notice-view .notice-title {font-size:20px;}
    .modal.modal-notice-view .notice-info {font-size:14px;margin-top:7px;}
    .modal.modal-notice-view .notice-body {padding:16px 0;height:36vh;}
    .modal.modal-notice-view .notice-btn {width:100%;height:44px;}
    .modal.modal-notice-view .notice-attached {padding-top:10px;}
    .modal.modal-notice-view .notice-attached a {font-size:14px;}

}