@import 'common.css';

body,
header
#allMenu{
    /* min-width: 992px; */
    min-width: 375px;
}


/*modal 실행시 스크롤바 고정 - 이중 스크롤바 이슈*/
body{
	padding-right: 0 !important;
    /* overflow-y: auto !important; */
}

*{
    font-family: 'Pretendard', Arial, '돋움', Dotum, sans-serif;
}

body{
    height: 100%;
    color: var(--darkBlack);
}

.wrapper{
    width: 100%;
    /* min-width: 320px; */
    position: relative;
    padding: 0 64px 0 0;
}

.wrapper header{
    position: relative;
    z-index: 999;
}
.wrapper .header-sub {
    position: relative;
    z-index: 999;
    background-color: var(--lightBlue);
}

.tooltip.show{
    opacity: 1;
}

.tooltip-inner{
    background: var(--darkBlue);
}

.bs-tooltip-start .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before{
    border-left-color: var(--darkBlue);
}


.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn){
    width: 210px;
}

.bootstrap-select > .dropdown-toggle{
    padding: 6px 12px;
	background: var(--defaultWhite);
    border: 1px solid var(--lightGray2);
    outline: none !important;
    border-radius: 6px;
    font-size: 14px;
    color: var(--lightBlack);
}

.bootstrap-select .dropdown-toggle .filter-option{
    width: calc(100% - 8px);
}

.bootstrap-select .dropdown-toggle .filter-option,
.bootstrap-select .dropdown-menu li a,
.dropdown-menu li a{
	position: relative;
    font-size: 14px;
	font-weight: 500;
    color: var(--lightBlack);
}

.bootstrap-select .dropdown-toggle:after{
    width: 8px;
    height: 5px;
    margin: 0;
    background: url('../img/dropdown_arrow.png') no-repeat 0 0 / 8px;
    -webkit-transition: all 0.2s ease;
            transition: all 0.2s ease;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    border: none;
}

.bootstrap-select .dropdown-toggle.show:after{
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
}
footer .bootstrap-select .dropdown-toggle:after{
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
}

footer .bootstrap-select .dropdown-toggle.show:after{
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}

.bootstrap-select .dropdown-toggle.show{
    border: 1px solid var(--darkBlue) !important;
}

.bootstrap-select.open .dropdown-toggle .caret{
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
    background-position-y: -7px;
}

.bootstrap-select .dropdown-toggle .filter-option-inner-inner{
    position: relative;
}

.dropdown-item.active,
.dropdown-item:active{
    background: var(--lightGray3);
}

.animation-background{
    width: 100%;
    height: 400px;
    position: absolute;
    top: 0;
    background: var(--lightBlue) url('../img/img_cloud.png') repeat-x 0 0 / cover;
    animation: move-background 200s linear infinite;
}

.animation-background:before{
    content: '';
    width: 186px;
    height: 336px;
    position: absolute;
    top: 150px;
    left: 0;
    background: url('../img/icons.svg') no-repeat 0 -464px / 800px;
}

.animation-background:after{
    content: '';
    width: 200px;
    height: 320px;
    position: absolute;
    top: 150px;
    right: 64px;
    background: url('../img/icons.svg') no-repeat -600px -480px / 800px;
}

@keyframes move-background {
    0% {
        background-position: 0 120px;
    }
    100% {
        background-position: 100vw 120px;
    }
}

.thumb-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* topBar */
.topNav{
    background: var(--lightGray3);
}

.topNav .topNav-inner,
.topNav .topNav-inner ul{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.topNav .kyohakLink{
    width: 80px;
    height: 100%;
    position: relative;
    margin: 0 20px;
}

.topNav .kyohakLink:before{
    content: '';
    width: 80px;
    height: 14px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url('../img/icons.svg') no-repeat 0 -26px / 800px;
}

.topNav .topNav-inner .leftM{
    position: relative;
    font-size: 14px;
}

.topNav .topNav-inner .leftM:before{
    content: '';
    width: 1px;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background: var(--lightGray2);
}

.topNav .topNav-inner .leftM li,
.topNav .topNav-inner .rightM li{
    position: relative;
}

.topNav .topNav-inner .leftM li:before{
    content: '';
    width: 1px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--lightGray2);
}

.topNav .topNav-inner .leftM li.active{
    background: var(--lightBlue);
}

.topNav .topNav-inner .leftM li.active a{
    color: var(--defaultWhite);
}
.topNav .topNav-inner .leftM a,
.topNav .topNav-inner .rightM a,
.topNav .topNav-inner .rightM span{
    font-weight: 500;
    color: var(--lightBlack);
}

.topNav .topNav-inner .rightM .teacher_Complete span{
    color: var(--defaultOrg);
}

.topNav .topNav-inner .leftM a{
    display: block;
    padding: 8px 20px;
}

#add-favorite{
    position: relative;
    margin: 0 0 0 20px;
}

#add-favorite:before{
    content: '';
    width: 13px;
    height: 13px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    background: url('../img/icons.svg') no-repeat -60px 0 / 800px;
}

.topNav .topNav-inner .rightM{
    gap: 28px;
    font-size: 14px;
}

.topNav .topNav-inner .rightM li:not(:last-child):before{
    content: '';
    width: 1px;
    height: 13px;
    position: absolute;
    top: 50%;
    right: -14px;
    transform: translate(0, -50%);
    background: rgba(220, 220, 220, 0.6);
}

.navbar{
    height: 120px;
    margin: 0 0 50px;
    transition: all 0.2s ease;
}

body.navbar-fixed-top .navbar{
    width: calc(100% - 64px);
    height: 80px;
    position: fixed;
    top: 0;
    left: 0;
    background: var(--lightBlue);
    box-shadow: 0 2px 6px 2px rgba(0, 0, 0, 0.2);
    z-index: 1030;
}
body.navbar-fixed-top .animation-background{
    top: -206px;
}

body.navbar-fixed-top .topNav{
    display: none;
}

.navbar .badge,
.navbar .badge:before{
    transition: all 0.1s ease;
}

body.navbar-fixed-top .navbar .badge,
body.navbar-fixed-top .navbar .badge:before{
    width: 48px;
    height: 28px;
}

body.navbar-fixed-top .navbar .badge:before{
    font-size: 20px;
}

/* eunji-스크롤 시 header 영역 */
body.navbar-fixed-top .wrapper .header-sub {
    top: -206px;
}
body.navbar-fixed-top .animation-background{
    top: -206px;
}
body.navbar-fixed-top .animation-background{
    top: -206px;
}

body.navbar-fixed-top .topNav{
    display: none;
}

#allMenu{
    height: fit-content;
}

#allMenu > div{
    padding: 0;
}

#allMenu .offcanvas-header{
    background: var(--lightBlue);
}

#allMenu .offcanvas-header .container{
    display: flex;
    flex-wrap: inherit;
    align-items: center;
    justify-content: space-between;
}

#allMenu .offcanvas-header .btn-close{
    width: 34px;
    height: 34px;
    position: relative;
    margin: 0;
    padding: 0;
    font-size: 0;
    opacity: 1;
}

#allMenu .offcanvas-header .btn-close:before{
    content: '';
    width: 34px;
    height: 34px;
    position: absolute;
    top :0;
    left: 0;
    background: url('../img/icons.svg') no-repeat -260px -130px / 800px;
}

.navbar .navbar-brand,
#allMenu .navbar-brand,
#m-mynavbar .navbar-brand{
    display: flex;
    margin: 0 50px 0 0;
    padding: 5px 0;
}
.navbar .btn-navbar{
    display: none;
}

.navbar .navbar-brand .logoImg,
#allMenu .navbar-brand .logoImg{
    height: 54px;
    position: relative;
    padding: 0;
}
.navbar .navbar-brand .logoImg > div,
#allMenu .navbar-brand .logoImg > div{
    width: 100%;
    height: 100%;
}

.navbar .navbar-brand .logoImg .mobile{
    display: none;
}

.navbar .navbar-brand .logoImg img,
#allMenu .navbar-brand .logoImg img,
#m-mynavbar .navbar-brand .logoImg img{
    max-width: 100%;
    max-height: 100%;
}

.navbar .navbar-brand .badge,
#allMenu .navbar-brand .badge,
#m-mynavbar .navbar-brand .badge{
    width: 60px;
    height: 34px;
    position: relative;
    align-self: flex-start;
    margin: 6px 0 0 10px;
    background: var(--darkBlue);
    border-radius: 5px;
}

.navbar .navbar-brand .badge:before,
#allMenu .navbar-brand .badge:before,
#m-mynavbar .navbar-brand .badge:before{
    content: '';
    width: 60px;
    height: 34px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    font-weight: 500;
    color: var(--defaultWhite);
    line-height: 1.4;
}

#m-mynavbar .navbar-brand .badge:before{
    height: 22px;
    font-size: 14px !important;
    line-height: 1.5;
}

#m-mynavbar .linkList{
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    padding: 20px 0;
    gap: 10px;
    border-bottom: 1px solid var(--lightGray2);
}

#m-mynavbar .linkList li{
    text-align: center;
}

#m-mynavbar .linkList a{
    display: block;
    position: relative;
    padding: 30px 0 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--darkBlue);
}

#m-mynavbar .linkList a:before{
    content: '';
    width: 24px;
    height: 24px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    background: url('../img/icons.svg') no-repeat 0 0 / 800px;
}

#m-mynavbar .linkList .timetable a:before{
    background-position: -536px 0;
}
#m-mynavbar .linkList .selectiveData a:before{
    background-position: -504px 0;
}
#m-mynavbar .linkList .notice a:before{
    background-position: -664px 0;
}
#m-mynavbar .linkList .event a:before{
    background-position: -600px 0;
}
#m-mynavbar .linkList .faq a:before{
    background-position: -568px 0;
}

.navbar .navbar-brand .badge.ms,
#allMenu .navbar-brand .badge.ms,
#m-mynavbar .navbar-brand .badge.ms{
    background: var(--darkGreen);
}
.navbar .navbar-brand .badge.hs,
#allMenu .navbar-brand .badge.hs,
#m-mynavbar .navbar-brand .badge.hs{
    background: var(--defaultPurple);
}

.navbar .navbar-brand .badge.es:before,
#allMenu .navbar-brand .badge.es:before,
#m-mynavbar .navbar-brand .badge.es:before{
    content: '초등';
}
.navbar .navbar-brand .badge.ms:before,
#allMenu .navbar-brand .badge.ms:before,
#m-mynavbar .navbar-brand .badge.ms:before{
    content: '중학';
}
.navbar .navbar-brand .badge.hs:before,
#allMenu .navbar-brand .badge.hs:before,
#m-mynavbar .navbar-brand .badge.hs:before{
    content: '고등';
}


#allMenu .offcanvas-body .sitemap-wrap{
    display: flex;
    position: relative;
    padding: 20px 0;
}

#allMenu .offcanvas-body .sitemap-wrap:before{
    content: '';
    width: 246px;
    height: 132px;
    position: absolute;
    right: 260px;
    bottom :0;
    background: url('../img/icons.svg') no-repeat 0 -300px / 800px;
}

#allMenu .offcanvas-body .sitemap-wrap .siteList{
    width: calc(100% / 5);
    position: relative;
    padding: 0 40px;
}

#allMenu .offcanvas-body .sitemap-wrap .siteList:not(:first-child):before{
    content: '';
    width: 1px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: var(--lightGray3);
}

#allMenu .offcanvas-body .sitemap-wrap .siteList .title{
    margin: 0 0 15px;
    font-size: 20px;
    font-weight: 700;
}

#allMenu .offcanvas-body .sitemap-wrap .siteList ul{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#allMenu .offcanvas-body .sitemap-wrap .siteList ul li a{
    position: relative;
    font-size: 15px;
    font-weight: 500;
    color: var(--lightBlack);
}

#allMenu .offcanvas-body .sitemap-wrap .siteList ul li.new a:before{
    content: '';
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    right: -20px;
    transform: translate(0, -50%);
    background: url('../img/icons.svg') no-repeat -320px -130px / 800px;
}

#allMenu .offcanvas-body .sitemap-wrap .siteList .depth2 ul{
    margin: 10px 0 20px;
}

#allMenu .offcanvas-body .sitemap-wrap .siteList .depth2 .title2{
    font-size: 16px;
    font-weight: 700;
}


.navbar .navbar-nav{
    gap: 30px;
}

.navbar .navbar-nav li.active .nav-link span{
    background: var(--defaultWhite);
    color: var(--defaultBlue);
}

.navbar .navbar-nav .nav-link{
    font-size: 20px;
    font-weight: 700;
    color: var(--darkBlack);
}

.navbar .navbar-nav .nav-link span{
    padding: 2px 6px;
    border-radius: 5px;
    transition: all 0.25s ease;
}

.navbar .btn-searchOpen{
    display: none;
    width: 34px;
    height: 34px;
    position: relative;
    background: var(--defaultBlue);
    border-radius: 50%;
    overflow: hidden;
}

.navbar .btn-searchOpen:before{
    content: '';
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url('../img/icons.svg') no-repeat 0 0 / 800px;
}

.navbar #mynavbar.open-search .search-group{
    width: 50%;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: space-between;
    top: 70px;
    left: 50%;
    transform: translate(-50%, 0);
    padding: 6px 10px;
}

.navbar .search-group{
    width: 230px;
    display: flex;
    padding: 6px;
    background: var(--defaultWhite);
    border-radius: 50px;
    box-shadow: inset 0 0 0 2px var(--darkBlue);
}

.navbar .search-group .form-control{
    width: calc(100% - 34px);
    padding: 5px 12px;
    background: none;
    border: none;
}

.navbar .search-group .btn{
    width: 34px;
    height: 34px;
    position: relative;
    background: var(--darkBlue);
    border-radius: 50%;
}

.navbar .btn-searchOpen:active{
    background: var(--darkBlue);
}
.navbar .search-group .btn:before{
    content: '';
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url('../img/icons.svg') no-repeat 0 0 / 800px;
}

.navbar .search-group .btn-searchClose{
    display: none;
}

.navbar .search-group .btn-searchClose:before{
    background-position: -94px -32px;
}
/* .navbar .search-group .btn-search:before{
    background-position: -160px -32px;
} */

.navbar .btn-allMenu{
    position: relative;
    margin: 0 0 0 15px;
    padding: 20px;
}

.navbar .btn-allMenu:before{    
    content: '';
    width: 26px;
    height: 19px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url('../img/icons.svg') no-repeat -26px 0 / 800px;
}


/* header */
.navbar .navbar-nav .dropdown-menu{
    display: none;
    flex-direction: column;
    gap: 6px;
    width: 170px;
    padding: 16px 0;
    border-color: var(--lightBlue);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
.navbar .navbar-nav .dropdown-menu.active{
    display: flex;
}
.navbar .navbar-nav .dropdown-menu .nav-link{
    padding: 0 6px;
    transition: all 0.3s;
}
.navbar .navbar-nav .dropdown-menu > .nav-item > .nav-link > span,
.navbar .navbar-nav .dropdown-menu > .nav-item > .submenu-list .nav-link > span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 6px 10px 6px 16px;
    margin: 0;
    border: 2px solid var(--defaultWhite);
    border-radius: 0;
    background-color: inherit;
    color: var(--lightBlack);
    font-size: 16px;
    font-weight:500;
    transition: all 0.3s;
}
.navbar .navbar-nav .dropdown-menu .nav-link > span:hover,
.navbar .navbar-nav .dropdown-menu > .nav-item > .submenu-list .nav-link:hover > span {
    border: 2px solid var(--lightBlue2);
    background-color: var(--lightGray3);
    color: var(--defaultBlue);
    font-weight: bold;
}
.navbar .navbar-nav .dropdown-menu .nav-link > span::after{
    content: '';
    display: block;
    transform: scaleX(-1);
    width: 10px;
    height: 12px;
    background: url('../img/icons.svg') no-repeat -410px -60px / 800px;
    opacity: 0;
    transition: all 0.3s;
}
.navbar .navbar-nav .dropdown-menu .nav-link > span:hover::after{
    opacity: 1;
}
.navbar .navbar-nav .dropdown-menu > .nav-item{
    position: relative;
}
.navbar .navbar-nav .dropdown-menu > .nav-item > .submenu-list{
    position: absolute;
    top: -18px;
    left: 169px;
    display: none;
    flex-direction: column;
    gap: 6px;
    min-width: 170px;
    max-width: 300px;
    width: max-content;
    padding: 16px 0;
    border: 1px solid var(--lightBlue);
    border-radius: 10px;
    background-color: var(--defaultWhite);
    box-shadow: 2px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
.navbar .navbar-nav .dropdown-menu > .nav-item > .submenu-list.active{
    display: flex;
}
.navbar .navbar-nav .dropdown-menu > .nav-item > .submenu-list .nav-link span{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: max-content;
}


main{
    min-height: 500px;
    position: relative;
}

main section{
    position: relative;
    z-index: 99;
}

main .sec01 .cont-inner{
    display: flex;
    align-items: stretch;
    gap: 28px;
    padding: 40px;
    background: rgba(193, 229, 242, 0.9);
    border-radius: 40px;
}

main .sec01 .cont-inner .book-link{
    width: calc(100% - 330px);
}

main .sec01 .cont-inner .nav-tabs{
    height: 38px;
    border: none;
}
main .sec01 .cont-inner .nav-tabs > li{
    overflow: hidden;
}

main .sec01 .cont-inner .nav-tabs .nav-link{
    padding: 9.5px 26px;
    border: none;
    border-radius: 16px 16px 0 0;
    background: var(--lightBlue3 );
    font-weight: 700;
    color: var(--lightBlue2);
    line-height: 1.2;
}

main .sec01 .cont-inner .nav-tabs .nav-link.active{
    background: var(--defaultWhite);
    color: var(--defaultBlue);
}

main .sec01 .cont-inner .tab-content .btn-modify{
    width: max-content;
    position: relative;
    margin: 0 0 0 auto;
    padding: 2px 25px 2px 10px;
    border: 1px solid var(--defaultBlue);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--defaultBlue);
}

main .sec01 .cont-inner .tab-content .btn-modify:after{
    content: '';
    width: 12px;
    height: 12px;
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translate(0, -50%);
    background: url('../img/icons.svg') no-repeat -80px 0 / 800px;
}

main .sec01 .cont-inner .tab-content{
    height: 190px;
    display: flex;
    align-items: center;
    padding: 20px;
    background: var(--defaultWhite);
    border-radius: 0 16px 16px 16px;
}

main .sec01 .cont-inner .tab-content > div{
    width: 100%;
}

main .sec01 .cont-inner .tab-content .tab-inner{
    display: flex;
    flex-direction: column;
}

main .sec01 .cont-inner .tab-content .owl-bookLink-1{
    margin: 15px 0 0;
    padding: 0 43px;
}

main .sec01 .cont-inner .tab-content .owl-bookLink-1 .item a{
    display: block;
}

main .sec01 .cont-inner .tab-content .owl-bookLink-1 .item .btn-add{
    width: 100%;
    height: 100%;
    padding: 0;
    background: var(--lightGray);
    border: 2px dashed var(--lightBlue2);
    border-radius: 10px;
    overflow: hidden;
}
main .sec01 .cont-inner .tab-content .owl-bookLink-1 .item .btn-add img{
    opacity: 0;
}

main .sec01 .cont-inner .tab-content .owl-bookLink-1 .owl-nav{
    margin: 0;
}

main .sec01 .cont-inner .tab-content .owl-bookLink-1 .owl-nav > div,
main .sec01 .cont-inner .schedule .date-group .date-prev,
main .sec01 .cont-inner .schedule .date-group .date-next{
    width: 30px;
    height: 30px;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    border: 1px solid var(--defaultBlue);
    background: var(--defaultWhite);
    border-radius: 50%;
    font-size: 0;
}

main .sec01 .cont-inner .tab-content .owl-bookLink-1 .owl-nav > div{
    top: calc(50% - 7px);
}

main .sec01 .cont-inner .tab-content .owl-bookLink-1 .owl-nav > div:before,
main .sec01 .cont-inner .schedule .date-group > button:before{
    content: '';
    width: 30px;
    height: 30px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url('../img/icons.svg') no-repeat 0 0 / 800px;
}

main .sec01 .cont-inner .tab-content .owl-bookLink-1 .owl-nav .owl-prev{
    left: 0;
}
main .sec01 .cont-inner .tab-content .owl-bookLink-1 .owl-nav .owl-next{
    right: 0;
}

main .sec01 .cont-inner .tab-content .owl-bookLink-1 .owl-nav .owl-prev:before,
main .sec01 .cont-inner .schedule .date-group .date-prev:before{
    background-position: -94px 0;
}
main .sec01 .cont-inner .tab-content .owl-bookLink-1 .owl-nav .owl-next:before,
main .sec01 .cont-inner .schedule .date-group .date-next:before{
    background-position: -126px 0;
}

main .sec01 .subject-Item img {
	border: 1px solid var(--lightGray2);
    background: var(--lightGray3);
    border-radius: 10px;
}

main .sec01 .cont-inner .small-banner{
    width: 300px;
    position: relative;
}

main .sec01 .cont-inner .small-banner .thumb-img{
    height: 228px;
    border: 3px solid var(--defaultBlue);
    border-radius: 16px;
    overflow: hidden;
}
/* 
main .sec01 .cont-inner .small-banner .thumb-img img{
    height: 100%;
    object-fit: cover;
} */

main .sec01 .cont-inner .small-banner .owl-dots{
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

main .sec01 .cont-inner .small-banner .owl-dots .owl-dot span{
    width: 8px;
    height: 8px;
    background: var(--defaultWhite);
}

main .sec01 .cont-inner .small-banner .owl-dots .owl-dot.active span,
main .sec01 .cont-inner .small-banner .owl-dots .owl-dot:hover span{
    background: var(--defaultBlue);
}



main .sec01 .cont-inner .schedule{
    display: flex;
    flex-direction: column;
    position: relative;
}

main .sec01 .cont-inner .schedule .date-group{
    width: max-content;
    position: absolute;
    top: -23px;
    left: 50%;
    transform: translate(-50%, 0);
    font-weight: 700;
}

main .sec01 .cont-inner .schedule .date-group > button{
    font-size: 0;
}

main .sec01 .cont-inner .schedule .date-group .date-prev{
    left: -45px;
}
main .sec01 .cont-inner .schedule .date-group .date-next{
    right: -45px;
}

main .sec01 .cont-inner .schedule .classList{
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 10px;
    margin: 15px 0 0;
}

main .sec01 .cont-inner .schedule .classList li{
    width: calc(100% / 6);
}

main .sec01 .cont-inner .schedule .classList .classItem{
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 6px;
    background: var(--lightBlue2);
    border-radius: 10px;
}

main .sec01 .cont-inner .schedule .classList .classItem a{
    display: block;
    padding: 10px;
    background: var(--defaultWhite);
    border-radius: 6px;
    text-align: center;
}

main .sec01 .cont-inner .schedule .classList .classItem p{
    margin: 0;
}

main .sec01 .cont-inner .schedule .classList .classItem a .subjecTitle{
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

main .sec01 .cont-inner .schedule .classList .classItem a .subjecTitle span{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

main .sec01 .cont-inner .schedule .classList .classItem a .publisher{
    font-size: 12px;
    font-weight: 500;
    color: var(--lightBlack);
}

main .sec01 .cont-inner .schedule .classList .classItem .class{
    margin: 5px 0 0;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--defaultBlue);
}

main .sec01 .cont-inner .schedule .classList .classItem .btn-add{
    height: 100%;
    background: var(--lightGray);
}

main .sec01 {
    margin: 0 !important;
}
main section:not(:first-child){
    margin: 60px 0 0;
}

main .sec02 .cont-inner,
main .sec03 .cont-inner{
    display: flex;
    align-items: stretch;
    gap: 60px;
}

main .sec02 .cont-inner > div{
    display: flex;
    flex-direction: column;
    position: relative;
}

main .sec02 h2.title{
    margin: 0 0 10px;
    font-size: 20px;
    font-weight: 800;
}

main .sec02 .cont-inner .notice,
main .sec03 .cont-inner .data-1{
    width: calc(100% - 520px);
}

main .sec02 .cont-inner .notice .btn-more{
    position: absolute;
    top: 0;
    right: 0;
    padding: 4px 10px;
    background: var(--defaultOrg);
    border-radius: 30px;
    font-size: 12px;
    font-weight: 600;
    color: var(--defaultWhite);
}

main .sec02 .cont-inner .notice .noticeList{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    border-top: 2px solid var(--darkBlack);
    background: var(--lightGray3);
}

main .sec02 .cont-inner .notice .noticeList li{
    min-height: 46px;
    border-bottom: 1px solid var(--lightGray2);
}

main .sec02 .cont-inner .notice .noticeList a{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px;
}

main .sec02 .cont-inner .notice .noticeList a .fw{
    font-weight: 600;
    color: var(--defaultOrg);
}

main .sec02 .cont-inner .notice .noticeList a .title{
    width: calc(100% - 150px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

main .sec02 .cont-inner .notice .noticeList a .date{
    margin-left: auto;
    font-size: 14px;
    color: var(--lightBlack);
}

main .sec02 .cont-inner .news,
main .sec03 .cont-inner .data-2{
    width: 460px;
}

main .sec02 .cont-inner .news .owl-news .item{
    border-radius: 10px;
    overflow: hidden;
}

/*main .sec02 .cont-inner .notice .noticeList,*/
main .sec02 .cont-inner .news .owl-news .item .thumb-img{
    height: 146px;
}

main .sec02 .cont-inner .news .owl-news .owl-nav{
    position: absolute;
    top: -40px;
    right: 0;
    margin: 0;
}

main .sec02 .cont-inner .news .owl-news .owl-nav > div{
    position: relative;
    margin: 0;
    padding: 14px;
    font-size: 0;
    background: none;
}

main .sec02 .cont-inner .news .owl-news .owl-nav > div:before{
    content: '';
    width: 14px;
    height: 14px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url('../img/icons.svg') no-repeat 0 0 / 800px;
}


main .sec02 .cont-inner .news .owl-news .owl-nav .owl-prev{
    right: 50px;
}
main .sec02 .cont-inner .news .owl-news .owl-nav .owl-prev:before{
    background-position: -160px 0;
}
main .sec02 .cont-inner .news .owl-news .owl-nav .owl-next:before{
    background-position: -180px 0;
}

main .sec02 .cont-inner .news .owl-news .owl-nav [class*=owl-]:hover{
    background: none;
}

main .sec02 .cont-inner .news #customNav{
    display: flex;
    gap: 5px;
    position: absolute;
    top: 0;
    right: 35px;
}

main .sec02 .cont-inner .news #customNav > span{
    font-size: 14px;
    font-weight: 600;
}

main .sec02 .cont-inner .news #customNav .current-page{
    font-size: 16px;
    color: var(--defaultBlue);
}

main .sec03 h2.title,
main .sec03 h2.title em{
    font-family: 'jalnan';
    font-size: 24px;
}

main .sec03 h2.title{
    margin: 0 0 20px;
}

main .sec03 h2.title em{
    color: var(--defaultBlue);
}

main .sec03 .data-1 .data1List,
main .sec03 .data-2 .data2List{
    height: 548px;
    padding: 40px;
    border-radius: 40px;
    background: var(--lightBlue2);
}

main .sec03 .data-1 .data1List{
    display: flex;
    flex-wrap: wrap;
    gap: 28px 18px;
}

main .sec03 .data-1 .data1List li{
    width: calc((100% - 36px) / 3);
}

main .sec03 .data-1 .data1List li a{
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    border: 3px solid var(--defaultBlue);
    overflow: hidden;
}

main .sec03 .data-1 .data1List li a .thumb-img,
.sub .contents .accordion .card .card-body .list.listThumb .listCont .thumb-img{
    position: relative;
    height: 160px;
}
.sub .contents .accordion .card .card-body .list.listThumb .listCont .thumb-img .checkbox {
    position: absolute;
    top: 10px;
    left: 10px;
}
main .sec03 .data-1 .data1List li a .info{
    padding: 12px 16px;
    background: var(--defaultWhite);
    box-shadow: 0px 5px 15px -1px;
}

main .sec03 .data-1 .data1List li a .info .subject,
.sub .contents .accordion .card .card-body .list.listThumb .listCont .info .subject,
.sub .contents .accordion .card .card-body .list.listRow .listCont li .listTitle .schoolYear{
    min-width: 67px;
    display: inline-flex;
    justify-content: center;
    padding: 5px 10px;
    border-radius: 6px;
    background: var(--lightGray);
    font-size: 14px;
    font-weight: 700;
    color: var(--darkBlack);
}
.sub .contents .accordion .card .card-body .list.listThumb .listCont .info .subject{
    margin-right: auto;
}

main .sec03 .data-1 .data1List li a .info .subject.type-1,
.sub .contents .accordion .card .card-body .list.listThumb .listCont .info .subject.type-1,
.sub .contents .accordion .card .card-body .list.listRow .listCont li .listTitle .schoolYear.type-1{
    background: #fadce1;
}
main .sec03 .data-1 .data1List li a .info .subject.type-2,
.sub .contents .accordion .card .card-body .list.listThumb .listCont .info .subject.type-2{
    background: #fad79a;
}
main .sec03 .data-1 .data1List li a .info .subject.type-3,
.sub .contents .accordion .card .card-body .list.listThumb .listCont .info .subject.type-3,
.sub .contents .accordion .card .card-body .list.listRow .listCont li .listTitle .schoolYear.type-2{
    background: #faf4bb;
}
main .sec03 .data-1 .data1List li a .info .subject.type-4,
.sub .contents .accordion .card .card-body .list.listThumb .listCont .info .subject.type-4{
    background: #b6daa5;
}
main .sec03 .data-1 .data1List li a .info .subject.type-5,
.sub .contents .accordion .card .card-body .list.listThumb .listCont .info .subject.type-5,
.sub .contents .accordion .card .card-body .list.listRow .listCont li .listTitle .schoolYear.type-3{
    background: var(--lightBlue2);
}
main .sec03 .data-1 .data1List li a .info .subject.type-6,
.sub .contents .accordion .card .card-body .list.listThumb .listCont .info .subject.type-6{
    background: #c8c1f2;
}

main .sec03 .data-1 .data1List li a .info .title{
    margin: 5px 0 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow:  ellipsis;
    font-size: 18px;
}

main .sec03 .data-2 .data2List{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 8px;
}

main .sec03 .data-2 .data2List li a{
    display: block;
    position: relative;
    padding: 10px 70px 10px 95px;
    background: var(--defaultWhite);
    border-radius: 50px;
}

main .sec03 .data-2 .data2List li a:before{
    content: '';
    width: 56px;
    height: 56px;
    position: absolute;
    top: 50%;
    left: 25px;
    transform: translate(0, -50%);
    background: url('../img/icons.svg') no-repeat 0 0 / 800px;
}

main .sec03 .data-2 .data2List li:nth-child(1) a:before{
    background-position: 0 -60px;
}
main .sec03 .data-2 .data2List li:nth-child(2) a:before{
    background-position: -60px -60px;
}
main .sec03 .data-2 .data2List li:nth-child(3) a:before{
    background-position: -120px -60px;
}
main .sec03 .data-2 .data2List li:nth-child(4) a:before{
    background-position: -180px -60px;
}
main .sec03 .data-2 .data2List li:nth-child(5) a:before{
    background-position: -240px -60px;
}
main .sec03 .data-2 .data2List li:nth-child(6) a:before{
    background-position: -300px -60px;
}



main .sec03 .data-2 .data2List li a .mt{
    font-size: 20px;
    font-weight: 800;
    line-height: 50px;
}
main .sec03 .data-2 .data2List li a .st{
    color: var(--lightBlack);
}

main .sec03 .data-2 .data2List li a:after{
    content: '';
    width: 34px;
    height: 34px;
    position: absolute;
    top: 50%;
    right: 25px;
    transform: translate(0, -50%);
    background: var(--defaultBlue) url('../img/icons.svg') no-repeat -220px 0 / 800px;
    border-radius: 50%;
}

main .sec04 .footer-banner a{
    width: 100%;
    /* height: 120px; */
    display: block;
}
main .sec04 .footer-banner a img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
footer{
    position: relative;
    margin: 65px 0 0;
}

footer .footer-top{
    background: var(--lightBlue);
}

footer .footer-top .cont-inner{
    display: flex;
    padding: 35px 0;
}

footer .footer-top .cont-inner .telInfo{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--defaultWhite);
}

footer .footer-top .cont-inner .telInfo .txt-1{
    font-size: 18px;
}
footer .footer-top .cont-inner .telInfo .txt-2{
    margin: 0 15px;
    font-family: 'jalnan';
    font-size: 26px;
}
footer .footer-top .cont-inner .telInfo .txt-3{
    font-weight: 400;
}

footer .footer-top .cont-inner .utilMenu{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 60px;
    margin-left: auto;
}

footer .footer-top .cont-inner .utilMenu li{
    position: relative;
}

footer .footer-top .cont-inner .utilMenu li:not(:first-child):before{
    content: '';
    width: 1px;
    height: 13px;
    position: absolute;
    top: 50%;
    left: -30px;
    transform: translate(0, -50%);
    background: rgba(220, 220, 220, 0.6);
}

footer .footer-top .cont-inner .utilMenu li a{
    font-size: 18px;
    font-weight: 600;
    color: var(--defaultWhite);
}

footer .footer-info{
    padding: 30px 0;
    background: var(--lightGray);
}

footer .footer-info .infoTop{
    display: flex;
    justify-content: space-between;
    padding: 0 0 0 215px;
}

footer .footer-info .infoTop .list-corp{
    display: flex;
    align-items: center;
    gap: 36px;
}

footer .footer-info .infoTop .list-corp li{
    position: relative;
}

footer .footer-info .infoTop .list-corp li:not(:first-child):before{
    content: '';
    width: 1px;
    height: 13px;
    position: absolute;
    top: 50%;
    left: -18px;
    transform: translate(0, -50%);
    background: var(--lightBlack);
}

footer .footer-info .infoTop .list-corp a{
    font-weight: 600;
    color: var(--lightBlack);
}

footer .footer-info .infoCont{
    display: flex;
    justify-content: space-between;
    margin: 15px 0 0;
}

footer .footer-info .infoCont .info-left{
    width: calc(100% - 240px);
    display: flex;
    align-items: center;
    gap: 100px;
}

footer .footer-info .infoCont .info-left .footer-logo{
    width: 115px;
    height: 20px;
    position: relative;
    opacity: 0.7;
}

footer .footer-info .infoCont .info-left .footer-logo:before{
    content: '';
    width: 115px;
    height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    background: url(../img/icons.svg) no-repeat 0 -37px / 1152px;
    opacity: 0.6;
}

footer .footer-info .infoCont .info-left address{
    margin: 0;
    font-size: 13px;
    color: var(--defaultGray);
}
footer .footer-info .infoCont .info-left address .copy{
    margin: 10px 0 0;
}

footer .footer-info .infoCont .sns-group{
    width: 210px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 18px;
}

footer .footer-info .infoCont .sns-group a{
    width: 44px;
    height: 44px;
    display: block;
    position: relative;
    background: var(--darkGray);
    border-radius: 50%;
    font-size: 0;
}

footer .footer-info .infoCont .sns-group a:before{
    content: '';
    width: 44px;
    height: 44px;
    position: absolute;
    top: 0;
    left: 0;
    background: url('../img/icons.svg') no-repeat 0 0 / 800px;
}

footer .footer-info .infoCont .sns-group .instagram a:before{
    background-position: -264px 0;
}
footer .footer-info .infoCont .sns-group .youtube a:before{
    background-position: -326px 0;
}
footer .footer-info .infoCont .sns-group .facebook a:before{
    background-position: -388px 0;
}


/* Quick Menu */
.quick-menu{
    width: 64px;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    right: 0;
    background: var(--lightBlue4);
    text-align: center;
    transition: all 0.1s ease;
    border-left: 1px solid var(--lightBlue2);
    z-index: 1040;
}

.quick-menu .btn-quick{
    width: 24px;
    height: 40px;
    position: absolute;
    top: 40px;
    left: -24px;
    background: var(--lightBlue2);
    border-radius: 16px 0 0 16px;
}

.quick-menu .btn-quick:before{
    content: '';
    width: 7px;
    height: 12px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url('../img/icons.svg') no-repeat -410px -60px / 800px;
}

.open-quick .quick-menu .btn-quick:before{
    transform: translate(-50%, -50%) rotate(180deg);
}

.quick-menu .login-area{
    display: flex;
    justify-content: center;
    position: relative;
    padding: 15px 8px;
}

.quick-menu .login-area .logOut-group,
.quick-menu .login-area.login-ok .logIn-group{
    display: none;
}

.quick-menu .login-area .logOut-group > .authComplete{
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--defaultOrg);
    font-size: 12px;
    color: var(--defaultWhite);
    line-height: 1.1;
}

.quick-menu .login-area .logOut-group .open-box .authComplete{
    padding: 5px 15px;
    border-radius: 20px;
    background: var(--defaultOrg);
    font-size: 12px;
    color: var(--defaultWhite);
    margin: 15px 0;
}

.quick-menu .login-area.login-ok .logOut-group{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.quick-menu .login-area .logOut-group .userName{
    z-index: 9;
}

.quick-menu .login-area:before{
    content: '';
    width: 18px;
    height: 1px;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 0);
    background: var(--lightBlue2);
}

.quick-menu .login-area .open-box,
.open-quick .tooltip{
    display: none;
}

.open-quick .quick-menu .login-area{
    background: var(--lightBlue2);
}

.open-quick .quick-menu .login-area .open-box{
    display: block;
    padding: 20px 16px;
}

.quick-menu .login-area .open-box .loginLink > a,
.quick-menu .login-area .logOut-group .open-box h2.userName{
    width: 128px;
    height: 128px;
    position: relative;
    display: block;
    margin: 0 auto;
    z-index: 9;
}

.quick-menu .login-area .logOut-group .open-box h2.userName span{
    height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    top: 0;
    padding: 0 10px;
    font-size: 16px;
    font-weight: 500;
    color: var(--defaultWhite);
    line-height: 1.4;
}

.quick-menu .login-area .logOut-group .open-box h2.userName span em{
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
.quick-menu .login-area .open-box .loginLink > a:before,
.quick-menu .login-area .logOut-group .userName:before{
    content: '';
    width: 128px;
    height: 128px;
    position: absolute;
    top: 0;
    left: 0;
    background: url('../img/icons.svg') no-repeat 0 -130px / 800px;
    z-index: -1;
}

.quick-menu .login-area .open-box .loginLink > a span{
    position: relative;
    top: 85px;
    display: block;
    font-weight: 600;
    color: var(--defaultWhite);
}

.quick-menu .login-area .open-box .loginLink > a:hover:before{
    background-position-x: -130px;
}
.quick-menu .login-area .logOut-group .open-box .login-bt.off{
    display: block;
    margin: 10px 0 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--darkBlue);
}

.quick-menu .login-area .open-box .loginLink ul{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 10px 0 0;
}

.quick-menu .login-area .open-box .loginLink ul li{
    position: relative;
}

.quick-menu .login-area .open-box .loginLink ul li:not(:first-child):before{
    content: '';
    width: 1px;
    height: 10px;
    position: absolute;
    top: 7px;
    left: -13px;
    background: rgba(75,102,199,0.3);
}

.quick-menu .login-area .open-box .loginLink ul li a{
    font-size: 12px;
    font-weight: 500;
    color: var(--defaultBlue);
}

.quick-menu .list-area{
    height: calc(100% - 120px);
    display: flex;
    flex-direction: column;
    margin: 15px 0;
    padding: 0 8px;
}

.quick-menu .login-area .login-ico,
.quick-menu .list-area li{
    width: 32px;
    height: 32px;
    position: relative;
}

.login-area .btn-login,
.quick-menu .login-area .login-ico a,
.quick-menu .list-area a{
    width: 32px;
    height: 32px;
    display: block;
    position: relative;
    padding: 8px;
    text-align: left;
    font-size: 0;
    transition: none;
}
.quick-menu .login-ok .login-ico .userName {
    font-size: 15px;
    display: flex;
    flex-direction: column;
    margin: 15px 0;
    color: var(--defaultBlue);
    font-weight: 500;
}
.quick-menu .login-ok .login-ico .login-bt {
    padding: 5px;
    font-size: 12px;
    border-radius: 3px;
    color: var(--defaultWhite);
    background-color: var(--defaultBlue);
}
.quick-menu .login-ok .login-ico .authComplete{
	border: none;
	font-size: 12px;
}

.quick-menu .login-ok .login-ico .noAuthComplete{
	display: flex;
    padding-top: 15px;
    border: none;
    font-size: 12px;
    justify-content: center;
}
/* eunji-인증완료부분 open 추가*/
.open-quick .quick-menu .login-ok {
    background-color: var(--lightBlue2);
    padding-bottom: 10px;
}
.login-area .btn-login:before,
.login-area .btn-logout:before,
.quick-menu .list-area a:before{
    content: '';
    width: 24px;
    height: 24px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url('../img/icons.svg') no-repeat 0 0 / 800px;
}

.quick-menu .list-area .linkList,
.quick-menu .list-area .tagList{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    position: relative;
}

.login-area .btn-login:before,
.login-area .btn-logout:before{
    background-position: -440px 0;
}

.quick-menu .list-area .linkList{
    position: relative;
}

.quick-menu .list-area .linkList li.selectiveData{
    position: relative;
    margin: 0 0 15px;
}

.quick-menu .list-area .linkList li.selectiveData:before{
    content: '';
    width: 18px;
    height: 1px;
    position: absolute;
    left: 50%;
    bottom: -15px;
    transform: translate(-50%, 0);
    background: var(--lightBlue2);
}

.open-quick .quick-menu .list-area .linkList li.selectiveData:before{
    width: 100%;
}
.quick-menu .list-area .linkList .timetable a:before{
    background-position: -536px 0;
}
.quick-menu .list-area .linkList .selectiveData a:before{
    background-position: -504px 0;
}
.quick-menu .list-area .linkList .notice a:before{
    background-position: -664px 0;
}
.quick-menu .list-area .linkList .event a:before{
    background-position: -600px 0;
}
.quick-menu .list-area .linkList .faq a:before{
    background-position: -568px 0;
}

.quick-menu .list-area .tagList .timer a:before{
    background-position: -568px 0;
}
.quick-menu .list-area .tagList .stopwatch a:before{
    background-position: -600px 0;
}
.quick-menu .list-area .tagList .announce a:before{
    background-position: -632px 0;
}
.quick-menu .list-area .tagList .focus a:before{
    background-position: -664px 0;
}
.quick-menu .list-area .tagList .song a:before{
    background-position: -696px 0;
}
.quick-menu .list-area .tagList .dark a:before{
    background-position: -728px 0;
}
.quick-menu .list-area .tagList .blackboard a:before{
    background-position: -760px 0;
}

.quick-menu .btn-top{
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto auto 10px;
    border-radius: 50%;
    transition: all 0.2s ease;
    visibility: hidden;
    opacity: 0;
}

.quick-menu .btn-top span{
    height: 42px;
    position: relative;
    top: 7px;
    padding: 12px 0 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--lightBlue);
}
/* eunji-인증완료부분 추가*/
.quick-menu .login-ok {
    position: relative;
    z-index: 1;
}
.quick-menu .login-ok .login-ico{
    display: block;
    padding: 10px 0;
}
.quick-menu .login-ok .open-box {
    display: none;
}
.quick-menu .login-ok .login-ico .userName {
    font-size: 15px;
    display: flex;
    flex-direction: column;
    margin: 15px 0;
    color: var(--defaultBlue);
    font-weight: 500;
}
.quick-menu .login-ok .login-ico .login-bt {
    padding: 5px;
    font-size: 12px;
    border-radius: 3px;
    color: var(--defaultWhite);
    background-color: var(--defaultBlue);
}
.quick-menu .login-ok .login-ico .authComplete{
	border: none;
	font-size: 12px;
}

.quick-menu .login-ok .login-ico .noAuthComplete{
	display: flex;
    padding-top: 15px;
    border: none;
    font-size: 12px;
    justify-content: center;
}
/* eunji-인증완료부분 open 추가*/
.open-quick .quick-menu .login-ok .login-ico {
    display: none;
}
.open-quick .quick-menu .login-ok .open-box {
    display: block;
    padding: 20px 16px;
}
.open-quick .quick-menu .login-ok .userName {
    position: relative;
    font-size: 18px;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    padding-top: 70px;
    margin: 15px 0 30px 0;
    color: var(--defaultWhite);
    z-index: 2;
}
.open-quick .quick-menu .login-ok .userName:before {
    content: '';
    width: 128px;
    height: 128px;
    position: absolute;
    top: 0;
    left: 0;
    background: url('../img/icons.svg') no-repeat 0 -130px / 800px;
    z-index: -1; 
}
.open-quick .quick-menu .login-ok .noAuthComplete{
	background-color: var(--middleBlue01);
    border-radius: 50px;
    width: 100%;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    height: 40px;
    padding: 11px;
}

.open-quick .quick-menu .btn-top span{
    left: 0;
}

.quick-menu .btn-top span:before{
    content: '';
    width: 14px;
    height: 9px;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, 0);
    background: url('../img/icons.svg') no-repeat -380px -60px / 800px;
}

.open-quick .quick-menu{
    width: 170px;
}

.open-quick .quick-menu .login-area{
    padding: 0 8px;
}

.open-quick .quick-menu .login-area .login-ico,
.open-quick .quick-menu .login-area .logOut-group > .authComplete{
    display: none;
}

.open-quick .quick-menu .list-area{
    padding: 0 20px;
}

.open-quick .quick-menu .list-area li,
.open-quick .quick-menu .list-area .linkList:before{
    width: 100%;
}

.open-quick .quick-menu .list-area a{
    width: 100%;
    padding: 8px 8px 8px 36px;
    border-radius: 6px;
    font-size: 13px;
    color: var(--defaultBlue);;
    text-align: left;
    line-height: 1.4;
}

.open-quick .quick-menu .list-area a:before{
    left: 5px;
    transform: translate(0, -50%);
}

.open-quick .quick-menu .btn-top{
    width: 48px;
    height: 48px;
    background: var(--lightBlue);
}

.open-quick .quick-menu .btn-top span{
    color: var(--defaultWhite);
}

.open-quick .quick-menu .btn-top span:before{
    background-position: -380px -69px;
}

.offcanvas-title{
    margin: 0 0 20px;
}

.floating-banner{
    position: fixed;
    top: 430px;
    left: 30px;
    transition: all 0.2s ease;
    visibility: visible;
    opacity: 1;
    z-index: 999;
}

.floating-banner.close-floating{
    visibility: hidden;
    opacity: 0;
}

.floating-banner .btnClose{
    width: 18px;
    height: 18px;
    position: absolute;
    top: -12px;
    right: -12px;
    padding: 0;
    background: var(--defaultWhite);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0,0,0,0.25) !important;
}

.floating-banner .btnClose:before{
    content: '';
    width: 18px;
    height: 18px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url('../img/icons.svg') no-repeat -300px -130px / 800px;
}

.floating-banner .thumb-img{
    width: 180px;
    height: 180px;
    display: block;
    border-radius: 30px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    overflow: hidden;
}

.floating-banner .thumb-img a{
    display: block;
}

.floating-banner .thumb-img a img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Sub Wrap */
body.sub-wrap .topNav{
    margin: 0;
}

body.sub-wrap .navbar{
    margin: 0 0 70px;
    background: var(--lightBlue);
}


body.sub-wrap main.sub > .container{
    display: flex;
    gap: 40px;
}

body.sub-wrap main.sub > .container .aside{
    width: 240px;
    padding: 44px 0 0;
}
body.sub-wrap main.sub > .container .contents{
    width: calc(100% - 280px);
}

body.sub-wrap main.sub > .container .aside .asideBox{
    padding: 40px 20px;
    background: var(--lightBlue2);
    border: 3px solid var(--lightBlue3 );
    border-radius: 40px;
}

body.sub-wrap main.sub > .container .aside .title-area{
    height: 58px;
    display: flex;
    align-items: center;
    position: relative;
}

body.sub-wrap main.sub > .container .aside .title-area:before{
    content: '';
    width: 136px;
    height: 118px;
    position: absolute;
    top: -90px;
    right: -20px;
    background: url('../img/icons.svg') no-repeat 0 0 / 800px;
}

body.sub-wrap main.sub > .container .aside.navItem-1 .title-area:before{
    background-position: -270px -190px;
}
body.sub-wrap main.sub > .container .aside.navItem-2 .title-area:before{
    background-position: -406px -190px;
}
body.sub-wrap main.sub > .container .aside.navItem-3 .title-area:before{
    background-position: -542px -190px;
}
body.sub-wrap main.sub > .container .aside.navItem-4 .title-area:before{
    background-position: -270px -310px;
}
body.sub-wrap main.sub > .container .aside.navItem-5 .title-area:before{
    background-position: -406px -310px;
}
body.sub-wrap main.sub > .container .aside.navItem-6 .title-area:before{
    background-position: -542px -310px;
}
body.sub-wrap main.sub > .container .aside.navItem-7 .title-area:before{
    background-position: -270px -430px;
}

body.sub-wrap main.sub > .container .aside .title-area .title{
    margin: 0;
    font-family: 'jalnan';
    font-size: 24px;
}

body.sub-wrap main.sub > .container .aside .btn-area{
    margin: 40px 0 0;
}

body.sub-wrap main.sub > .container .aside .btn-area .title{
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--defaultBlue); 
}

body.sub-wrap main.sub > .container .aside .btn-area .grade{
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 4px;
    margin: 10px 0 0;
}

body.sub-wrap main.sub > .container .aside .btn-area .grade li{
    width: calc(100% / 4);
}

body.sub-wrap main.sub > .container .aside .btn-area .grade li.active a,
body.sub-wrap main.sub > .container .aside .btn-area .semester li.active a,
body.sub-wrap main.sub > .container .aside .snbList li.active a{
    background: var(--defaultBlue);
    color: var(--defaultWhite);
}

body.sub-wrap main.sub > .container .aside .btn-area .grade li a,
body.sub-wrap main.sub > .container .aside .btn-area .semester li a{
    display: block;
    padding: 3px 5px;
    background: var(--defaultWhite);
    font-size: 18px;
    font-weight: 600;
    color: var(--defaultBlue);
    text-align: center;
}

body.sub-wrap main.sub > .container .aside .btn-area .grade li a{
    border-radius: 8px;
    border: 1px solid var(--lightBlue3 );
}

body.sub-wrap main.sub > .container .aside .btn-area .semester{
    display: flex;
    align-items: center;
    margin: 10px 0 0;
}

body.sub-wrap main.sub > .container .aside .btn-area .semester{
    border-radius: 8px;
    border: 1px solid var(--lightBlue3 );
    overflow: hidden;
}

body.sub-wrap main.sub > .container .aside .btn-area .semester li{
    width: calc(100% / 2);
}

body.sub-wrap main.sub > .container .aside .snbList{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 40px 0 0;
}

body.sub-wrap main.sub > .container .aside .snbList:before{
    content: '';
    width: 100%;
    height: 1px;
    position: absolute;
    top: -20px;
    left: 0;
    background: var(--lightBlue2);
}

body.sub-wrap main.sub > .container .aside .snbList li a{
    display: block;
    padding: 10px 20px;
    background: var(--defaultWhite);
    border-radius: 10px;
    border: 1px solid var(--lightBlue3 );
    font-weight: 600;
}

body.sub-wrap main.sub > .container .aside .snbBanner{
    margin: 15px 0 0;
}

body.sub-wrap main.sub > .container .aside .snbBanner a{
    height: 180px;
    display: block;
    border-radius: 30px;
    overflow: hidden;
}

body.sub-wrap main.sub > .container .aside .snbBanner a img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Sub Contents */
/* 서브_location */
.sub .loc-li, .sub .loc-li li{
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.sub .loc-li li{
    font-size: 13px;
    font-weight: 500;
    color: var(--lightBlack);
    line-height: 1;
}
.sub .loc-li li:not(.home):not(:last-child):after{
    content: '';
    width: 2px;
    height: 2px;
    margin: 0 6px;
    border-radius: 100%;
    background: var(--darkGray);
    opacity: .5;
}
.sub .loc-li .home{
    margin-right: 10px;
}
.sub .loc-li .home a{
    width: 14px;
    height: 14px;
    position: relative;
    font-size: 0;
}
.sub .loc-li .home a:before{
    content: '';
    width: 14px;
    height: 14px;
    position: absolute;
    top: 0;
    left: 0;
    background: url('../img/icons.svg') no-repeat -430px -60px / 800px;
}
.sub .loc-li .on{
    font-weight: 700;
    color: var(--darkBlack);
}

.sub .contents .head-box .grid{ 
	display: flex;
    margin-bottom: 30px;
    flex-direction: column; 
}

.sub .contents .head-box .grid:first-child{
    justify-content: flex-end;
}
.sub .contents .head-box .grid .book_area{
	display: flex;
	justify-content: space-between;
}
.sub .contents .head-box .grid:last-child{
    margin-bottom: 0;
}
.sub .contents .head-box .grid .btn-reg{
	display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
}
.sub .contents .head-box .grid .btn-reg .btn{
    position: relative;
    padding: 0 0 0 24px;
}
.sub .contents .head-box .grid .btn-reg .btn:before{
    content: '';
    width: 18px;
    height: 18px;
    position: absolute;
    top: 2px;
    left: 0;
    background: url('../img/icons.svg') no-repeat -570px -60px / 800px;
}
.sub .contents .head-box .grid .btn-reg.on .btn:before{
    background-position: -590px -60px;
}



.bt { display: flex; align-items: center; width: 198px; padding: 0 8px 0 5px; height: 38px; line-height: 36px; border-radius: 6px; background: var(--defaultWhite); font-size: 13px; letter-spacing: -0.02em; font-weight: 600; position: relative; cursor: auto; }
.bt .ic { display: flex; align-items: center; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); cursor: pointer; }
.bt .ic span:after { display: inline-block; vertical-align: middle; width: 1px; height: 24px; margin: 0 5px; background: var(--defaultWhite); content: ''; }
.bt .ic span:last-child:after { display: none; }
.bt:before {
    width: 25px;
    height: 24px;
    background-repeat: no-repeat;
    content: '';
}
.bt .txt { width: 100px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.bt.line { border: 1px solid rgba(0, 0, 0, 0.2); }
.bt.pdf:before { background-image: url(../img/ic-pdf.svg); }
.bt.etc:before { background-image: url(../img/ic-etc.svg); }
.bt.dvd:before { background-image: url(../img/ic-mov.svg); }
.bt.youtube:before { background-image: url(../img/youtube.svg); }
.bt.html { cursor: pointer; }
.bt.html:before { background-image: url(../img/ic-html.svg); }
.bt.hwp:before { background-image: url(../img/ic-hwp.svg); }
.bt.ppt:before,.bt.pptx:before { background-image: url(../img/ic-ppt.svg); }
.bt-ebook, .bt-share { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; }
.bt-ebook:before, .bt-share:before {
	width: 16px;
	height: 16px;
	margin-right: 8px;
	background-repeat: no-repeat;
	content: '';
}



/* 상단타이틀 */
.sub .contents .top-title .leftGroup{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.sub .contents .head-box .book{
    display: flex;
}
.sub .contents .head-box .book-img{
    width: 150px;
    height: 190px;
    margin-right: 18px;
    overflow: hidden;
}
.sub .contents .head-box .book-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 1px solid var(--lightGray2);
    background: var(--lightGray3);
    border-radius: 15px;
}
.sub .contents .head-box .book-info{
	display: flex;
    flex-direction: column;
    gap: 12px;
}
.sub .contents .head-box .book-info .badge{
    width: fit-content;
    padding: 6px 12px;
    background: var(--lightBlue2);
    border-radius: 30px;
    font-size: 14px;
    font-weight: 500;
    color: var(--darkBlack);
}
.sub .contents .head-box .book-info h2{
    font-size: 35px;
    font-weight: 700;
}
.sub .contents .head-box .book-info h2 .writer{
    font-size: 24px;
    font-weight: 400;
    margin-left: 10px;
}
.sub .contents .head-box .title-area{
	display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.sub .contents .head-box .myBookList_title{
    display: flex;
    flex-direction: row;
}
.sub .contents .head-box .grid.other .etc-ttl{
    margin-bottom: 10px;
}

.sub .contents .head-box .title-area .title-group{
    width: 100%;
    position: relative;
}
.sub .contents .head-box .title-area .title-group:before{
    content: '';
    width: 80px;
    height: 74px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
    background: url('../img/icons.svg') no-repeat 0 0 / 800px;
}
.sub .contents .head-box .title-area .title-group.m3:before{
    background-position: -450px -110px;
}
.sub .contents .head-box .title-area .title-group.m4:before{
    background-position: -540px -110px;
}
.sub .contents .head-box .title-area .title-group.m5:before{
    background-position: -630px -110px;
}
.sub .contents .head-box .title-area .title-group.m6:before{
    background-position: -715px -110px;
}
.sub .contents .head-box .title-area .title-group.m7:before{
    background-position: -715px -190px;
}
.sub .contents .head-box .title-area .title-group .mTitle{
    font-size: 40px;
    font-weight: 700;
    letter-spacing: -1px;
}
.sub .contents .head-box .title-area .title-group .desc{
    margin: 10px 0 0;
    color: var(--lightBlack);
    line-height: 1.2;
}


.sub .contents .head-box .book-btn{
    padding: 15px 20px;
    background: var(--lightGray3);
    border-radius: 20px;
}

.sub .contents .head-box .book-btn .title{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 10px;
}
.sub .contents .head-box .book-btn .title .name{
    padding: 0 0 0 30px;
    position: relative;
    font-size: 16px;
    font-weight: 600;
    color: var(--lightBlack);
}
.sub .contents .head-box .book-btn .title .name:before{
    content: '';
    width: 24px;
    height: 24px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    background: url('../img/icons.svg') no-repeat -420px -80px / 800px;
}
.sub .contents .head-box .book-btn .title .btn-allDown{
    position: relative;
    padding: 6px 24px 6px 12px;
    font-size: 14px;
    font-weight: 600;
    color: var(--darkBlack);
}
.sub .contents .head-box .book-btn .title .btn-allDown:before{
    content: '';
    width: 16px;
    height: 16px;
    position: absolute;
    top: 6px;
    right: 0;
    background: url('../img/icons.svg') no-repeat -490px -60px / 800px;
}

.sub .contents .head-box .book-btn ul{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 5px;
}
.sub .contents .bt{
    /* width: fit-content; */
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: 5px 5px 5px 35px;
    background: var(--defaultWhite);
    border: 1px solid var(--lightGray2);
    border-radius: 4px;
    cursor: pointer;
}
.sub .contents .bt .txt{
    width: 90px;
    font-size: 13px;
    letter-spacing: -1px;
}
.sub .contents .bt:before{
    content: '';
    width: 24px;
    height: 24px;
    position: absolute;
    top: 50%;
    left: 5px;
    transform: translate(0, -50%);
}

.sub .contents .bt.pdf:before{
    background: url('../img/ico_pdf.svg') no-repeat 0 0 / 24px;
}
.sub .contents .bt.hwp:before{
    background: url('../img/ico_hwp.svg') no-repeat 0 0 / 24px;
}
.sub .contents .bt.ppt:before,
.sub .contents .bt.pptx:before{
    background: url('../img/ico_ppt.svg') no-repeat 0 0 / 24px;
}
.sub .contents .bt.dvd:before{
    background: url('../img/ico_mp4.svg') no-repeat 0 0 / 24px;
}
.sub .contents .bt.etc:before{
    background: url('../img/ico_file.svg') no-repeat 0 0 / 24px;
}
.sub .contents .bt.mp4:before{
    background: url('../img/ico_mp4.svg') no-repeat 0 0 / 24px;
}
.sub .contents .bt.file:before{
    background: url('../img/ico_file.svg') no-repeat 0 0 / 24px;
}
.sub .contents .ic{
    display: flex;
    align-items: center;
    position: relative;
    top: auto;
    right: auto;
    transform: none;
}

.sub .contents .ic .btn{
    width: 24px;
    height: 24px;
    position: relative;
    font-size: 0;
}
.sub .contents .ic .btn:before{
    content: '';
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url('../img/icons.svg') no-repeat 0 0 / 800px;
}
.sub .contents .ic .btn.btn-preview:before{
    background-position: -470px -60px;
}
.sub .contents .ic .btn.btn-down:before{
    background-position: -490px -60px;
}
.sub .contents .ic .btn.btn-link:before{
    background-position: -550px -60px;
}
.sub .contents .nav-tabs{
    margin: 30px 0 0;
}
.sub .contents .nav-tabs .nav-link{
    min-width: 170px;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    color: var(--lightBlack);
}

.sub .contents .nav-tabs .nav-link,
.sub .contents .nav-tabs .nav-link:hover,
.sub .contents .nav-tabs .nav-link:focus{
    border: none;
}

.sub .contents .nav-tabs .nav-link.active{
    border-bottom: 4px solid var(--defaultBlue);
    color: var(--defaultBlue);
}

/* .sub .contents .tab-content{
    margin: 30px 0 0;
} */

.sub .contents .accordion{
    margin: 30px 0 0;
    border-radius: 20px;
}

.sub .contents .accordion .card{
    border-color: var(--lightGray2);
    border-radius: 0;
    overflow: hidden;
}

.sub .contents .accordion .card:first-child{
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.sub .contents .accordion .card:last-child{
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.sub .contents .accordion .card:nth-child(n+2){
    border-top: none;
}

.sub .contents .accordion .card .collapse.show ~ .card-header{
    border-bottom: 1px solid var(--defaultGray);
}

.sub .contents .accordion .card .collapse.show ~ .sub .contents .accordion .card .card-header {
    border-bottom: 1px solid var(--defaultBlack); /* 원하는 border 스타일 적용 */
}

.sub .contents .accordion .card .card-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    background: var(--lightBlue4);
    border-bottom: none;
}

.sub .contents .accordion .card.card-open .card-header{
    border-bottom: 1px solid var(--lightGray2);
}

.sub .contents .accordion .card .card-header a{
    width: 100%;
    font-size: 24px;
    font-weight: 600;
    text-align: left;
    /* pointer-events: none; */
}

.sub .contents .accordion .card .card-header a .num{
    width: 32px;
    height: 32px;
    display: inline-block;
    margin: 0 15px 0 0;
    background: var(--defaultBlack);
    border-radius: 10px;
    color: var(--defaultWhite);
    text-align: center;
    line-height: 32px;
}

.sub .contents .accordion .card .card-header .btn-group{
    display: flex;
    align-items: center;
    gap: 5px;
    position: absolute;
    top: 50%;
    right: 70px;
    transform: translate(0, -50%);
}

.sub .contents .accordion .card .card-header .ic-arrow,
.sub .contents .accordion .card .top-title .ic-arrow{
    width: 34px;
    height: 34px;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translate(0, -50%);
    background: var(--defaultBlue);
    border-radius: 50%;
}

.sub .contents .accordion .card .card-header .ic-arrow:before,
.sub .contents .accordion .card .top-title .ic-arrow:before{
    content: '';
    width: 34px;
    height: 34px;
    position: absolute;
    top: 0;
    left: 0;
    background: url('../img/icons.svg') no-repeat -380px -80px / 800px;
    transition: all 0.2s ease;
}
.sub .contents .accordion .card.card-open .card-header .ic-arrow:before,
.sub .contents .accordion .card .top-title.sub-open .ic-arrow:before {
    transform: rotate(180deg);
}
/* 
.sub .contents .accordion .card .card-open ~ .ic-arrow:before,
.sub .contents .accordion .card .top-title-open ~ .ic-arrow:before{
    transform: rotate(180deg);
} */

.sub .contents .accordion .card .card-body{
    padding: 0;
    background: var(--defaultWhite);
}

.sub .contents .accordion .card .card-body .list .top-title{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 22px 60px 22px 34px;
    background: var(--lightYellow);
    border-bottom: 1px solid var(--lightGray2);
}
.sub .contents .accordion .card .card-body .list + .list .top-title{
    border-top: 1px solid var(--lightGray2);
}

.sub .contents .accordion .card .card-body .list .top-title h3{
    margin: 0;
    font-size: 20px;
    font-weight: 700;
}
.sub .contents .accordion .card .card-body .list .listCont .btn-share{
    position: relative;
    padding: 6px 35px 6px 12px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid rgba(0, 140, 214, 0.5);
}
.sub .contents .accordion .card .card-body .list .listCont .btn-share:after{
    content: '';
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translate(0, -50%);
    background: url('../img/icons.svg') no-repeat -450px -60px / 800px;
}
.sub .contents .accordion .card .card-body .list .listCont .btn-clstart {
    position: relative;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid rgba(0, 140, 214, 0.5);
}
.sub .contents .accordion .card .card-body .list .listCont .btn-clstart:hover {
    background-color: var(--defaultBlue);
    color: var(--defaultWhite);
}

.sub .contents .accordion .card .card-body .list .listCont{
    padding: 20px 40px;
}

.sub .contents .accordion .card .card-body .list .listCont > li{
    /* display: flex;
    justify-content: space-between; */
    position: relative;
    padding: 10px 0 10px 22px;
}
.sub .contents .accordion .card .card-body .list .unit-listCont > li {
    display: flex;
    justify-content: space-between;
    position: relative;
    padding: 10px 0 10px 22px;
} 
.sub .contents .accordion .card .card-body .list .listCont > li:before{
    content: '';
    width: 10px;
    height: 10px;
    position: absolute;
    top: 23px;
    left: 0;
    background: var(--defaultBlue);
    border-radius: 50%;
}
.sub .contents .accordion .card .card-body .list .listCont > li:not(:last-child):after{
    content: '';
    width: 2px;
    height: 100%;
    position: absolute;
    top: 27px;
    left: 4px;
    background: var(--defaultBlue);
}

.sub .contents .accordion .card .card-body .list .listCont > li .title{
    /* width: calc(100% - 590px); */
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-weight: 600;
}
.sub .contents .accordion .card .card-body .list .listCont li .title-area:hover{
    cursor: pointer;
}
.sub .contents .accordion .card .card-body .list .listCont li .title:hover {
    color: var(--defaultBlue);
}

.sub .contents .accordion .card .card-body .list .listCont li .title .st{
    width: 90px;
    color: var(--defaultBlue);
}

.sub .contents .accordion .card .card-body .list .listCont li .title .tt{
    /* width: calc(100% - 90px); */
    margin-left: 15px;
}
.sub .contents .accordion .card .card-body .list .top-title .data-group {
    display: grid;
    gap: 5px;
    grid-template-columns: repeat(3, 1fr);
}
.sub .contents .accordion .card .card-body .list .listCont li .data-group{
    width: 550px;
    height: fit-content;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px; 
}

.sub .contents .accordion .card .card-body .list .listCont li .data-group .chasi-share-btn {
    display: flex;
    justify-content: flex-end;
}
.sub .contents .accordion .card .card-body .list .listCont li .data-group .data-group-btn {
    /* width: 550px; */
    height: fit-content;
    display: flex;
    /* flex-wrap: wrap; */
    align-items: center;
    gap: 5px;
}

.sub .contents .accordion .card .card-body .list.listRow .top-title,
.sub .contents .accordion .card .card-body .list.listThumb .top-title{
    padding: 9px 16px 9px 44px;
    background: var(--lightGray3);
}
.sub .contents .accordion .card .card-body .list.listRow .top-title label{
    font-weight: 600;
    color: var(--lightBlack);
}

.sub .contents .accordion .card .card-body .list.listRow .listCont{
    padding: 0 20px;
}
.sub .contents .accordion .card .card-body .list.listRow .listCont:not(:last-child){
    border-bottom: 1px solid var(--lightGray2);
}

.sub .contents .accordion .card .card-body .list.listRow .listCont > li{
    display: flex;
    flex-direction: row;
    gap: 10px;
    padding: 5px 24px;
}

.sub .contents .accordion .card .card-body .list.listRow .listCont li:before,
.sub .contents .accordion .card .card-body .list.listRow .listCont li:after,
.sub .contents .accordion .card .card-body .list.listThumb .listCont li:before,
.sub .contents .accordion .card .card-body .list.listThumb .listCont li:after{
    content: none;
}

.sub .contents .accordion .card .card-body .list.listRow .listCont > li:not(:last-child){
    border-bottom: 1px solid var(--lightGray2);
}
.sub .contents .accordion .card .card-body .list.listRow .listCont.bottomLine > li{
    /* border-bottom: 1px solid var(--lightGray2); */
}

.sub .contents .accordion .card .card-body .list.listRow .listCont .checkbox{
    padding: 9px 0 9px 20px;
}

.sub .contents .accordion .card .card-body .list.listRow .listCont .checkbox label{
    height: auto;
}

.sub .contents .accordion .card .card-body .list.listRow .listCont li .btn-group{
    width: fit-content;
    display: flex;
    align-items: center;
    gap: 10px;
}

.sub .contents .accordion .card .card-body .list.listRow .listCont li .btn-group .bt{
    width: 28px;
    height: 28px;
    padding: 5px;
    border-radius: 2px;
    font-size: 0;
}

.sub .contents .accordion .card .card-body .list.listRow .listCont li .btn-group .bt:before{
    content: '';
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url('../img/icons.svg') no-repeat 0 0 / 800px;
}

.sub .contents .accordion .card .card-body .list.listRow .listCont li .btn-group .bt.bt-priview:before{
    background-position: -470px -60px;
}
.sub .contents .accordion .card .card-body .list.listRow .listCont li .btn-group .bt.bt-down:before{
    background-position: -490px -60px;
}
.sub .contents .accordion .card .card-body .list.listRow .listCont li .btn-group .bt.bt-pin:before{
    background-position: -510px -60px;
}
.sub .contents .accordion .card .card-body .list.listRow .listCont li .btn-group .bt.bt-pin.on:before{
    background-position: -530px -60px;
}
.sub .contents .accordion .card .card-body .list.listRow .listCont li .btn-group .bt.bt-link:before{
    background-position: -550px -60px;
}

.sub .contents .accordion .card .card-body .list.listRow .listCont li > .listTitle,
.sub .contents .accordion .card .card-body .list.listRow .listCont .book{
    width: calc(100% - 375px);
    display: flex;
    gap: 12px;
    font-weight: 600;
}

.sub .contents .accordion .card .card-body .list.listRow .listCont li > .listTitle{
    align-items: center;
}

.sub .contents .accordion .card .card-body .list.listRow .listCont .book .thumb-img{
    width: 140px;
    height: 180px;
    border-radius: 20px;
    border: 1px solid var(--lightBlue3 );
    overflow: hidden;
}

.sub .contents .accordion .card .card-body .list.listRow .listCont .book .bookInfo,
.sub .contents .accordion .card .card-body .list.listRow .listCont .book .listTitle{
    flex-direction: column;
    align-items: start;
}

.sub .contents .accordion .card .card-body .list.listRow .listCont .book .listTitle{
    margin: 5px 0 0;
}

.sub .contents .accordion .card .card-body .list .listCont .listTitle .title,
.sub .contents .accordion .card .card-body .list.listRow .listCont .book .listTitle .title{
    width: 95%;
    display: block;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sub .contents .accordion .card .card-body .list.listRow .listCont .book .bookInfo{
    width: calc(100% - 150px);
}

.sub .contents .accordion .card .card-body .list.listRow .listCont .book .bookInfo .info{
    margin: 5px 0 0;
    font-size: 14px;
    color: var(--lightBlack);
}

.sub .contents .accordion .card .card-body .list.listRow .listCont .book .bookInfo .info li{
    display: flex;
    align-items: center;
    padding: 2px 0;
}

.sub .contents .accordion .card .card-body .list.listRow .listCont .book .bookInfo .info li .tt{
    width: 50px;
}

.sub .contents .accordion .card .card-body .list.listRow .listCont .book .bookInfo .info li .ct{
    padding: 0 0 0 15px
}

.sub .contents .accordion .card .card-body .list.listRow .listCont .book .bookInfo .info li span{
    position: relative;
    display: flex;
}

.sub .contents .accordion .card .card-body .list.listRow .listCont .book .bookInfo .info li span + span:before{
    content: '';
    width: 1px;
    height: 10px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    background: var(--lightGray2);
}

.sub .contents .accordion .card .card-body .list.listRow .listCont .data-group{
    width: 365px;
    display: grid;
    gap: 5px;
    grid-template-columns: repeat(2, 1fr);
}
.sub .contents .accordion .card .card-body .list.listRow .listCont .data-group a{
    width: 166px;
}
.sub .contents li.noData{
    width: 100% !important;
    display: block !important;
    padding: 50px 0 !important;
    border: none !important;
    text-align: center;
}
/* .sub .contents .accordion .card .card-body .list .listCont li.noData{
    justify-content: center;
} */

.listCont .checkbox label{
    position: relative;
    padding-left: 40px;
    font-weight: 600;
}

.checkbox.mp3:before,
.checkbox.zip:before,
.checkbox.link:before,
.checkbox.etc:before,
.checkbox.pdf:before,
.checkbox.hwp:before,
.checkbox.hwpx:before,
.checkbox.ppt:before,
.checkbox.pptx:before{
    content: '';
    width: 24px;
    height: 24px;
    position: absolute;
    top: 50%;
    left: 59px;
    transform: translate(0, -50%);
}
.checkbox.zip:before{
    background: url('../img/ico_zip.svg') no-repeat 0 0 / 24px;
}
.checkbox.etc:before{
    background: url('../img/ico_etc.svg') no-repeat 0 4px / 20px;
}
.checkbox.pdf:before{
    background: url('../img/ico_pdf.svg') no-repeat 0 0 / 24px;
}
.checkbox.hwp:before,
.checkbox.hwpx:before{
    background: url('../img/ico_hwp.svg') no-repeat 0 0 / 24px;
}
.checkbox.ppt:before,.checkbox.pptx:before{
    background: url('../img/ico_ppt.svg') no-repeat 0 0 / 24px;
}
.checkbox.link:before{
    background: url('../img/ico_link.svg') no-repeat 0 0 / 24px;
}
.checkbox.mp3:before{
    background: url('../img/ico_sound.svg') no-repeat 0 0 / 24px;
}

.sub .contents .accordion .card .card-body .list .top-title .txt{
    font-weight: 600;
    color: var(--lightBlack);
}
.sub .contents .accordion .card .card-body .list .top-title .num{
    color: var(--defaultBlue);
}
.sub .contents .accordion .card .card-body .list .top-title .btn.btn-down,
.sub .contents .accordion .card .card-body .list .top-title .btn.btn-bookmark{
    position: relative;
    padding: 6px 36px 6px 12px;
    background: var(--defaultWhite);
    border: 1px solid var(--lightGray2);
    font-size: 14px;
    font-weight: 600;
}

.sub .contents .accordion .card .card-body .list .top-title .btn.btn-down:before,
.sub .contents .accordion .card .card-body .list .top-title .btn.btn-bookmark:before{
    content: '';
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translate(0, -50%);
    background: url('../img/icons.svg') no-repeat -490px -60px / 800px;
}

.sub .contents .accordion .card .card-body .list.listThumb .listCont{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 30px 25px;
}

.sub .contents .accordion .card .card-body .list.listThumb .listCont li{
    width: calc((100% - 36px) / 4);
    padding: 0;
}

.sub .contents .accordion .card .card-body .list.listThumb .listCont li .info{
    padding: 10px 15px;
}

.sub .contents .accordion .card .card-body .list.listThumb .listCont .thumb-item{
    display: flex;
    flex-direction: column;
    border: 1px solid var(--lightGray2);
    border-radius: 20px;
    overflow: hidden;
}

.sub .contents .accordion .card .card-body .list.listThumb .listCont .thumb-item .checkbox{
    position: absolute;
    top: 10px;
    left: 10px;
}

.sub .contents .accordion .card .card-body .list.listThumb .listCont .thumb-item .checkbox label{
    padding: 0;
}

.sub .contents .accordion .card .card-body .list.listThumb .listCont .thumb-img{
    border-bottom: 1px solid var(--lightGray2);
}

.sub .contents .accordion .card .card-body .list.listThumb .listCont .info .infoTop{
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: end;
}

.sub .contents .accordion .card .card-body .list.listThumb .listCont .info .title{
    width: 100%;
    display: block;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sub .contents .accordion .card .card-body .list.listThumb .listCont .info .title a,
.sub .contents .accordion .card .card-body .list.listThumb .listCont .info .title span{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sub .contents .accordion .card .card-body .list.listThumb .listCont .thumb-img{
    border-bottom: 1px solid var(--lightGray2);
}

.sub .contents .accordion .card .card-body .list.listThumb .listCont .info .infoTop{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sub .contents .accordion .card .card-body .list.listThumb .listCont .info .infoTop .btn-group{
    align-items: center;
    gap: 5px;
}

.sub .contents .accordion .card .card-body .list.listThumb .listCont .info .infoTop .bt{
    width: 24px;
    height: 24px;
    position: relative;
    padding: 5px;
    border-radius: 2px;
    font-size: 0;
}

.sub .contents .accordion .card .card-body .list.listThumb .listCont .info .infoTop .checkbox label{
    padding: 0;
}

.sub .contents .accordion .card .card-body .list.listThumb .listCont .info .infoTop .bt.bt-down:before{
    content: '';
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url(../img/icons.svg) no-repeat -490px -60px / 800px;
}

.sub .contents .accordion .card .card-body .list.listThumb .listCont .info .title{
    width: 100%;
    display: block;
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sub .contents .accordion .card .card-body .list.listThumb .listCont .info .title a,
.sub .contents .accordion .card .card-body .list.listThumb .listCont .info .title span{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sub .contents .accordion .card .card-body .list.listThumb .listCont .info .title a:hover {
    color: var(--defaultBlue);
}

.sub .contents .accordion .card .card-body .list.listThumb .listCont .info .mediaSize{
    font-size: 14px;
    color: var(--lightBlack);
}

#sub1-3 .nav.nav-pills{
    gap: 10px;
    margin: 30px 0 0;
}

.nav.nav-pills .nav-item .nav-link{
    padding: 6px 20px;
    border: 2px solid var(--lightBlack);
    border-radius: 50px;
    background: var(--defaultWhite);
    font-weight: 600;
    color: var(--lightBlack);
}

.nav.nav-pills .nav-item .nav-link.active{
    border-color: var(--defaultBlue);
    color: var(--defaultBlue);
}

.sub .contents .top-title .search-group{
    width: 170px;
    display: flex;
    background: var(--defaultWhite);
    box-shadow: inset 0 0 0 1px var(--darkBlue);
}

.sub .contents .top-title .bootstrap-select{
    width: 120px;
}

.sub .contents .top-title .bootstrap-select > .dropdown-toggle{
    border-radius: 0;
}

.sub .contents .top-title .search-group .form-control{
    width: calc(100% - 34px);
    padding: 5px 12px;
    background: none;
    border: none;
    font-size: 14px;
}

.sub .contents .top-title .search-group .btn{
    width: 34px;
    height: 34px;
    position: relative;
}

.sub .contents .top-title .search-group .btn:before{
    content: '';
    width: 24px;
    height: 24px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url('../img/icons.svg') no-repeat -448px -80px / 800px;
}


.sub .contents .pagination{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin: 30px 0;
}
.sub .contents .pagination a{
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 50px;
    color: var(--lightBlack);
    font-size: 16px;
    text-align: center;
    line-height: 28px;
    transition: all 0.1s;
}
.sub .contents .pagination a:hover{
    opacity: 0.7;
}
.sub .contents .pagination .num{
    margin-left: 6px;
}
.sub .contents .pagination .arrow a{
    width: 24px;
    height: 24px;
}
.sub .contents .pagination .arrow-prev a{
    background: url('../img/icons.svg') no-repeat -666px -56px / 800px;
}
.sub .contents .pagination .arrow.prev a{
    margin-right: 4px;
    background: url('../img/icons.svg') no-repeat -696px -56px / 800px;
}
.sub .contents .pagination .arrow-next a{
    transform: scaleX(-1);
    background: url('../img/icons.svg') no-repeat -666px -56px / 800px;
}
.sub .contents .pagination .arrow.next a{
    transform: scaleX(-1);
    margin-left: 10px;
    background: url('../img/icons.svg') no-repeat -696px -56px / 800px;
}
.sub .contents .pagination .num a.active{
    background-color: var(--defaultBlue);
    color: var(--defaultWhite);
    font-weight: bold;
}
.class-num{
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: bold;
    color: var(--darkBlack);
}
.class-num.c-r{
    background-color: #FADCE1;
}
.class-num.c-o{
    background-color: #FAD79A;
}
.class-num.c-g{
    background-color: #B6DAA5;
}
.class-num.c-y{
    background-color: #FAF4BB;
}
.class-num.c-b{
    background-color: var(--lightBlue2);
}
.sub .contents .nav-tabs .nav-link{
    min-width: 170px;
    text-align: center;
}
.sub .contents .pagination{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 100%;
    margin-top: 40px;
}
.sub .contents .pagination a{
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 50px;
    color: var(--lightBlack);
    font-size: 16px;
    text-align: center;
    line-height: 28px;
    transition: all 0.1s;
}
.sub .contents .pagination a:hover{
    opacity: 0.7;
}
.sub .contents .pagination .num{
    margin-left: 6px;
}
.sub .contents .pagination .arrow a{
    width: 24px;
    height: 24px;
}
.sub .contents .pagination .arrow-prev a{
    background: url('../img/icons.svg') no-repeat -666px -56px / 800px;
}
.sub .contents .pagination .arrow.prev a{
    margin-right: 4px;
    background: url('../img/icons.svg') no-repeat -696px -56px / 800px;
}
.sub .contents .pagination .arrow-next a{
    transform: scaleX(-1);
    background: url('../img/icons.svg') no-repeat -666px -56px / 800px;
}
.sub .contents .pagination .arrow.next a{
    transform: scaleX(-1);
    margin-left: 10px;
    background: url('../img/icons.svg') no-repeat -696px -56px / 800px;
}
.sub .contents .pagination .num a.active{
    background-color: var(--defaultBlue);
    color: var(--defaultWhite);
    font-weight: bold;
}


body.sub-wrap main.sub > .container .aside .snbList .new a{
    display: flex;
    align-items: center;
    gap: 4px;
}
body.sub-wrap main.sub > .container .aside .snbList .new a::after{
    content: '';
    display: block;
    width: 16px;
    height: 16px;
	background: url('../img/icons.svg') no-repeat -320px -130px / 800px;
}
.sub .contents .head-box .book-info p{
    margin: 0;
    color: var(--lightBlack);
    font-size: 16px;
}
.sub .contents .head-box .icon_layout .book{
    justify-content: space-between;
    align-items: center;
}
.sub .contents .head-box .book-icon{
    width: 80px;
    height: 74px;
    margin: 8px 0;
}
.sub .contents .head-box .book-icon.i-hand{
    background: url('../img/icons.svg') no-repeat -450px -110px / 800px;
}
.sub .contents .head-box .book-icon.i-mega{
    background: url('../img/icons.svg') no-repeat -715px -110px / 800px;
}

.sub .contents .nav-tabs.grow-tabs li{
    flex-grow: 1;
}
.sub .contents .nav-tabs.grow-tabs li a{
    min-width: unset;
}
.sub .contents .nav-tabs.grow-tabs .nav-link{
    text-align: center;
} 

.sub .contents .album-list {
    margin: 30px 0 0;
    /* padding:  0 0 40px 0; */
    border: 1px solid var(--lightGray2);
    border-radius: 20px;
    overflow: hidden;
}
.sub .contents .album-list .list-top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 30px;
    border-bottom: 1px solid var(--lightGray2);
    background-color: var(--lightGray3) ;
}
.sub .contents .count{
    margin: 0;
    color: var(--lightBlack);
    font-size: 16px;
}
.sub .contents .count span{
    color: var(--defaultBlue);
    font-weight: bold;
}
.sub .contents .album-list .list-top .form-control{
    width: 112px;
}
.sub .contents .album-list .list-top .form-control.bootstrap-select .dropdown-toggle:after{
    width: 10px;
    height: 6px;
    background-size: 10px;
}
.sub .contents .album-list .list-top .bootstrap-select .dropdown-toggle .filter-option{
    color: var(--darkBlack);
}
.sub .contents .album-list .line-album{
    padding: 0 20px;
}
.sub .contents .album-list .line-album .experienceItem{
    cursor: pointer;
}
.sub .contents .album-list .line-album .experienceItem .title:hover {
    color: var(--lightBlue);
}
.sub .contents .album-list .line-album > li{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 24px 0;
    border-bottom: 1px solid var(--lightGray2);
}
.sub .contents .album-list .line-album .left-group{
    display: flex;
    gap: 32px;
}
.sub .contents .album-list .line-album .thumbnail{
    position: relative;
    min-width: 220px;
    width: 220px;
    height: 128px;
    border: 1px solid var(--lightBlue3 );
    border-radius: 20px;
    overflow: hidden;
}
.sub .contents .album-list .line-album .thumbnail img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    min-width: 220px;
    height: auto;
}
.sub .contents .album-list .line-album .title-group{
    margin-top: 10px;
}
.sub .contents .album-list .line-album .title{
    display: -webkit-box;
    margin: 16px 0 6px;
    color: var(--darkBlack);
    font-size: 20px;
    font-weight: bold;
    overflow: hidden;
    text-overflow: ellipsis;    
    word-break: break-word;
    -webkit-line-clamp: 1; 
    -webkit-box-orient: vertical;
}
.sub .contents .album-list .line-album .sub-txt{
    display: -webkit-box;
    margin: 0;
    color: var(--darkBlack);
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;    
    word-break: break-word;
    -webkit-line-clamp: 1; 
    -webkit-box-orient: vertical;
}
.sub .contents .album-list .line-album ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    min-width: 342px;
    max-width: 342px;
}
.sub .contents .album-list .line-album ul li{
    width: 166px;
}
.sub .contents .album-list .line-album ul .bt{
    width: 100%;
}
.sub .contents .album-list .line-album li.empty{
    justify-content: center;
    padding: 40px 0 0;
    border-bottom: none;
}
.sub .contents .album-list .line-album li.empty p{
    margin: 0;
}
.sub .contents .board-content{
    margin: 30px 0 0;
}
.sub .contents .board-list .list-top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
}
.sub .contents .search-box-twice{
    display: flex;
    justify-content: flex-end;
    gap: 4px;
}
.sub .contents .search-box-twice .bootstrap-select{
    width: 112px;
}
.sub .contents .search-box-twice .bootstrap-select > .dropdown-toggle{
    height: 30px;
    border-radius: 2px;
}
.sub .contents .search-box-twice .bootstrap-select .dropdown-toggle .filter-option{
    height: fit-content;
    color: var(--darkBlack);
}
.sub .contents .search-box-twice .search-group{
    display: flex;
    width: 170px;
    height: 30px;
    border-radius: 0;
    border: 1px solid var(--defaultBlue);
}
.sub .contents .search-box-twice .form-control[type="search"]{
    width: calc(100% - 28px);
    padding: 6px 0 6px 8px;
    border: none;
    font-size: 14px;
}
.sub .contents .search-box-twice .search-group .btn{
    position: relative;
    width: 28px;
    height: 28px;
}
.sub .contents .search-box-twice .search-group .btn-search::before{
    content: '';
    width: 20px;
    height: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url('../img/icons.svg') no-repeat -450px -81px / 800px;
}
.sub .contents .search-box-twice .btn-searchClose{
    display: none;
}
.sub .contents .board-table tr th{
    width: 10%;
    margin-top: 8px;
    padding: 14px 0;
    border-top: 1px solid var(--darkBlack);
    border-bottom: 1px solid var(--lightGray2);
    background-color: var(--lightGray3);
    color: var(--lightBlack);
    text-align: center;
    font-size: 16px;
    font-weight: 500;
}
.sub .contents .board-table tr th:nth-child(3){
    width: 65%;
}
.sub .contents .board-table tr th:nth-child(4){
    width: 15%;
}
.sub .contents .board-table tr{
    border-bottom: 1px solid var(--lightGray2);
}
.sub .contents .board-table tr td{
    padding: 14px 0;
    font-size: 16px;
    text-align: center;
}
.sub .contents .board-table tr td:first-child{
    color: var(--lightBlack);
}
.sub .contents .board-table tr td a{
    display: -webkit-box;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;    
    word-break: break-word;
    -webkit-line-clamp: 1; 
    -webkit-box-orient: vertical;
}


/* 창의적 체험활동 */
body.sub-wrap main.sub > .container .aside.navItem-3 .snbList:before{
    display: none;
}
body.sub-wrap main.sub > .container .aside.navItem-3 .snbList{
    margin: 30px 0 0;
}

/* 고객센터 */
body.sub-wrap main.sub > .container .aside.navItem-6 .snbList:before{
    display: none;
}
body.sub-wrap main.sub > .container .aside.navItem-6 .title-area:before{
    top: -74px;
    background-position: -542px -310px;
}

.sub .contents .board-table tr.empty{
    position: relative;
    height: 74px;
}
.sub .contents .board-table tr.empty .empty{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.sub .contents article.list-box{
    margin-top: 40px;
    border-top: 1px solid var(--darkBlack);
}
.sub .contents article.list-box .view-ttl{
    display: flex;
    justify-content: space-between;
    padding: 20px 10px;
    border-bottom: 1px solid var(--lightGray2);
}
.sub .contents article.list-box .view-ttl .experience_title{
    display: flex;
}
.sub .contents article.list-box .view-ttl .experience_title .class-num{
    margin-right: 10px;
}
.sub .contents article.list-box .experience_thumb {
    margin-top: 20px;
}
.sub .contents article.list-box .view-cont{
    padding: 20px 10px;
    border-bottom: 1px solid var(--lightGray2);
}
.sub .contents article.list-box .experience_btn_group{
    width: 200px;
    margin-top: 20px;
}

/* eunji - 게시글 view화면에서 줄간격 너무 벌어져보임 */
/* .sub .contents article.list-box .view-cont p{
    margin: 0;
    font-weight: 300;
    line-height: 2.6;
} */
.sub .contents article.list-box .view-cont img{
    margin-top: 8px;
}
.sub .contents article.list-box .share-box{
    display: flex;
    justify-content: flex-end;
    margin-top: 10px; 
    padding: 6px 0;
}
.sub .contents article.list-box .share-box .bt-share{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    font-weight: 600;
    transition: all 0.3s;
}
.sub .contents article.list-box .share-box .bt-share:hover{
    color: var(--darkBlack);
    opacity: 0.7;
}
.sub .contents article.list-box .share-box .bt-share::before{
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    margin-right: 0;
    background: url('../img/icons.svg') no-repeat -450px -62px / 800px;
}
.sub .contents article.list-box .view-nav{
    display: flex;
    justify-content: flex-end;
}
.sub .contents article.list-box .view-nav .bt2{
    padding: 8px 10px;
    margin-top: 10px;
    border: 1px solid var(--defaultGray);
    border-radius: 6px;
    line-height: 1;
}
.sub .contents article.list-box .view-nav { margin-top: 30px; display: flex; flex-wrap: wrap; align-items: center; }
.sub .contents article.list-box .view-nav .prev-next { width: 100%;}
.sub .contents article.list-box .view-nav .prev-next li { font-size: 14px; margin-bottom: 17px; }
.sub .contents article.list-box .view-nav .prev-next li:last-child { margin-bottom: 0; }
.sub .contents article.list-box .view-nav .prev-next li a { display: flex; flex-wrap: wrap; }
.sub .contents article.list-box .view-nav .prev-next span { display: flex; flex-wrap: wrap; align-items: center; width: 102px; font-weight: 600; }
/* .sub .contents article.list-box .view-nav .prev-next span:before { display: inline-block; width: 13px; height: 8px; margin-right: 10px; background: url(../img/view-nav.svg)no-repeat; content: ''; } */
.sub .contents article.list-box .view-nav .prev-next p { width: calc(100% - 102px); color: var(--lightGray03); }
.sub .contents article.list-box .view-nav .prev-next .next span:before { transform: rotate(180deg); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg); }

.sub .book-li { display: flex; flex-wrap: wrap; }
.sub .book-li li { 
	width: calc(20% - 41px);
	margin-right: 41px;
	margin-top: 38px;
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var(--lightBlue03);
}
.sub .book-li .thum { height: 237px; }
.sub .book-li .thum img { width: 100%; height: 100%; object-fit: cover; }
.sub .book-li .name { display: flex; flex-wrap: wrap; align-items: center; padding: 14px 16px 13px 19px; background-color: var(--lightBlue4); }
.sub .book-li .name p { width: calc(100% - 30px); margin-right: 14px; position: relative; font-weight: 700;}
.sub .book-li .name p:after { width: 1px; height: 24px; margin-top: -12px; background: var(--defaultWhite); position: absolute; right: 0; top: 50%; content: ''; }
.sub .book-li .add { display: block; width: 100%; height: 100%; min-height: 282px; background: url(../img/ic-add2.svg)no-repeat center var(--lightBlue03); cursor: pointer;}
.del-bt { display: inline-block; width: 16px; height: 17px; background: url(../img/ic-del2.svg)no-repeat; cursor: pointer; }


/* FAQ */
.Accordion_wrap .faq_pin {
	position: relative;
	padding: 17px 0;
	cursor: pointer;
	font-size: 16px;
	border-bottom: 1px solid var(--lightGray01);
    /* background: url(../img/ic-faq_notice.svg) no-repeat; 
	background-position: 5px 18px;*/
}
.Accordion_wrap .faq_pin .faqTitle{
	margin-left: 30px;
	cursor: pointer;
	font-size: 16px;
}
.que:first-child,
.faq_pin:first-child {
    border-top: 1px solid black;
}

.que{
	position: relative;
	padding: 17px 0;
	cursor: pointer;
	font-size: 16px;
	border-bottom: 1px solid var(--lightGray01);
  
}
.que::before{
	display: inline-block;
	content: 'Q';
	font-size: 18px;
	color: var(--defaultBlack);
	margin: 0 5px;
}
.que.on>span,
.faq_pin.on>span{
  font-weight: bold;
  color: var(--defaultBlack); 
} 

.anw {
	display: none;
	overflow: hidden;
	font-size: 14px;
	background-color: var(--defaultWhite);
	padding: 25px;
	border-bottom: 1px solid var(--defaultBlack);
}
.faq_pin .arrow-wrap {
	position: absolute;
    right: 10px;
    transform: translate(0, -80%);
}
.que .arrow-wrap {
  position: absolute;
  top:50%;
  right: 10px;
  transform: translate(0, -50%);
}

.que .arrow-top,
.faq_pin .arrow-top {
  display: none;
}
.que .arrow-bottom,
.faq_pin .arrow-bottom {
  display: block;
}
.que.on .arrow-bottom,
.faq_pin.on .arrow-bottom {
  display: none;
}
.que.on .arrow-top,
.faq_pin.on .arrow-top {
  display: block; 
}

/* eunji - 임시 버튼 스타일 */
.custom-btn {    
    padding: 15px 30px;
    background: var(--lightBlue);
    color: var(--defaultWhite);
    border: none;
    border-radius: 10px;
    font-size: 16px;
}
.custom-btn-cancel {
    padding: 15px 30px;
    border: var(--defaultBlue);
    border-radius: 10px;
    font-size: 16px;
}
.bt-set-area {
    display: flex;
    justify-content: flex-end;
}
.bt-set {
    width: 150px;
    display: flex;
    align-items: center;
    padding: 8px 20px;
    cursor: pointer;
    border-radius: 40px;
    font-size: 16px;
    justify-content: center;
    background-color: var(--defaultBlue);
    color: var(--defaultWhite);
    border: none;
}
/*.bt.set:before {
	width: 27px;
    height: 27px;
	background: url(../img/ic-settingBook.svg)no-repeat;
	background-size: 30px;
	content: '';
} */

/* 나의 교실 - 내 교과서 */
.select-tab {
    flex-direction: row;
}
.sub .contents .myclass-table tr th{
    margin-top: 8px;
    padding: 14px 0;
    border-top: 1px solid var(--darkBlack);
    border-bottom: 1px solid var(--lightGray2);
    background-color: var(--lightGray3);
    color: var(--lightBlack);
    text-align: center;
    font-size: 16px;
    font-weight: 500;
}
.sub .contents .myclass-table tr{
    border-bottom: 1px solid var(--lightGray2);
}
.sub .contents .myclass-table tr td{
    padding: 14px 0;
    font-size: 16px;
    text-align: center;
}
.sub .contents .myclass-table tr td:first-child{
    color: var(--lightBlack);
}
.sub .contents .myclass-table tr td a{
    display: -webkit-box;
    /* text-align: left; */
    overflow: hidden;
    text-overflow: ellipsis;    
    word-break: break-word;
    -webkit-line-clamp: 1; 
    -webkit-box-orient: vertical;
}
.sub .contents .myclass-table .data-group {
    margin-top: 10px;
    display: flex;
    gap: 10px;
}
.sub .contents .myclass-table .data-group .btn {
    position: relative;
    padding: 6px 36px 6px 12px;
    background: var(--defaultWhite);
    border: 1px solid var(--lightGray2);
    font-size: 14px;
    font-weight: 600;
}
.sub .contents .myclass-table .data-group .btn.btn-down:before {
    content: '';
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translate(0, -50%);
    background: url(../img/icons.svg) no-repeat -490px -60px / 800px;
}
.sub .contents .myclass-table .data-group .btn.btn-del:before {
    content: '';
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translate(0, -50%);
    background: url(../img/ic-del2.svg) no-repeat 0px 0px / 15px;
}

/* 내 교과서 - 교과서 설정하기 */
#book-set {
	padding: 0;
}
#book-set .book-set_title {
	padding: 60px 30px;
    background-color: var(--lightBlue01);
}
#book-set .book-set_cont {
	margin: 20px;
}
#book-set .book-set_cont .table {
	border-bottom: 0;
}
#book-set .book-set_title .book-set_ic {
	background: url(../img/ic-settingBook.svg)no-repeat;
}
#book-set .book-set_title h2{
	margin-left: 40px;
	margin-bottom: 0;
	color: var(--darkBlue);
}

/* 이벤트 */
.eventDataList {
	display: flex;
    flex-direction: column;
}
.boardDataList {
	margin: 20px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr); 
    justify-items: center;
	gap: 20px;
}
.boardDataList img {
	width: 500px;
	height: 312px;
	object-fit: cover;
}
.boardDataList .listItem {
	margin: 10px;
}
.boardDataList .listItem .end-evt-box {
	position: absolute;
    width: 500px;
    height: 312px;
    background: rgba(0, 0, 0, 0.4);
}
.boardDataList .listItem .end-evt-box > span{
	background: rgb(175, 175, 175);
    color: var(--defaultWhite);
    margin: 20px;
    position: absolute;
    padding: 7px;
}

.listitem-hide {
	display: none;
}
.event-info {
	display: flex;
	margin-top: 10px;
	width: 100%;
}
.event-join {
    display: flex;
    width: 400px;
    background: url(../img/event_join.png)no-repeat;
    position: absolute;
    height: 85px;
    background-size: contain;
    left: 47%;
    margin-top: -85px;
}
.event-schoolType {
    height: 30px;
    padding: 0 10px;
    background-color: var(--middleBlue03);
    line-height: 1.8;
    color: var(--defaultWhite);
    border-radius: 7px;
    margin-right: 15px;
    text-align: center;
}
.event-text {
	width: 80%;
}
.event-date {
	font-size: 14px;
	color: gray;
}
.event-title {
	font-weight: 700;
	font-size: 20px;
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.event-title .event-rNum {
	width: 20px;
	height: 20px;
	color: var(--defaultOrg);
}

/* 학급 시간표 */
.schedule-area{
    margin: 30px 0 0;
    padding: 20px;
    background: var(--lightGray3);
    border: 1px solid var(--lightGray2);
    border-radius: 16px;
}

.schedule-area .schedule-inner{
    display: flex;
    gap: 20px;
}

.schedule-area .sd-selection{
    width: 200px;
}

.schedule-area .sd-selection > div{
    background: var(--defaultWhite);
    border-radius: 16px;
}

.schedule-area .sd-selection .top-group{
    padding: 20px 18px;
    border: 3px solid var(--defaultBlue);
}


.schedule-area .sd-selection .top-group .items .item{
    display: flex;
    align-items: center;
}

.schedule-area .sd-selection .top-group .items .item:not(:first-child){
    margin: 10px 0 0;
}

.schedule-area .sd-selection .top-group .items .item .tt{
    width: 80px;
    position: relative;
    padding: 0 0 0 25px;
    font-weight: 600;
    color: var(--lightBlack);
}
.schedule-area .sd-selection .top-group .items .item .tt:before{
    content: '';
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    background: url('../img/icons.svg') no-repeat -480px -80px / 800px;    
}
.schedule-area .sd-selection .top-group .items .item:nth-child(2) .tt:before{
    background-position: -500px -80px;
}
.schedule-area .sd-selection .top-group .items .item:nth-child(3) .tt:before{
    background-position: -520px -80px;
}

.schedule-area .sd-selection .top-group .items .item .tc{
    font-size: 18px;
    font-weight: 600;
    color: var(--defaultBlue);
}

.schedule-area .sd-selection .bottom-group{
    margin: 10px 0 0;
    border: 1px solid var(--lightGray2);
    overflow: hidden;
}

.schedule-area .sd-selection .bottom-group .nav.nav-pills .nav-item{
    position: relative;
    border-bottom: 1px solid var(--lightGray2);
}
.schedule-area .sd-selection .bottom-group .nav.nav-pills .nav-item:not(:first-child):before{
    content: '';
    width: 1px;
    height: 100%;
    position: absolute;
    top: 0;
    left: -1px;
    background: var(--lightGray2);
}
.schedule-area .sd-selection .bottom-group .nav.nav-pills .nav-item .nav-link{
    position: relative;
    padding: 10px 5px;
    border: none;
    border-radius: 0;
    text-align: center;
}

.schedule-area .sd-selection .bottom-group .nav.nav-pills .nav-item .nav-link.active{
    background: var(--lightBlue2);
}

.schedule-area .sd-selection .bottom-group .nav.nav-pills .nav-item .nav-link.active:before{
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    left: 50%;
    bottom: -1px;
    transform: translate(-50%, 0);
    border-style: solid;
    border-width: 0px 6px 8px 6px;
    border-color: transparent transparent var(--defaultWhite) transparent;
}

.schedule-area .sd-selection .bottom-group .nav.nav-pills li{
    width: calc(100% / 3);
    flex: 1;
}

.schedule-area .sd-selection .bottom-group .tab-content{
    max-height: 510px;
    padding: 20px;
    overflow-y: auto;
}

.schedule-area .sd-selection .bottom-group .tab-content .tab-pane{
    min-height: 278px;
}

.schedule-area .sd-selection .bottom-group .tab-content ul li:not(:first-child){
    margin: 10px 0 0;
}

.schedule-area .sd-selection .bottom-group .tab-content ul li .btn{
    width: 100%;
    background: var(--defaultWhite);
    border: 1px solid var(--lightBlue);
    border-radius: 12px;
    font-weight: 600;
    color: var(--lightBlack);
}

.schedule-area .sd-selection .bottom-group .tab-content ul li.active .btn{
    background: var(--defaultBlue);
    color: var(--defaultWhite);
}
.schedule-area .sd-contents{
    flex: 1;
    padding: 20px 30px;
    background: var(--defaultWhite);
    border: 1px solid var(--lightGray2);
    border-radius: 16px;
}

.schedule-area .sd-contents .date-group{
    position: relative;
    text-align: center;
}

.schedule-area .sd-contents .date-group .inner{
	display: inline-flex;
	align-items: center;
	justify-content: center;
    padding: 8px;
    background: var(--lightYellow);
	border-radius: 50px;
}

.schedule-area .sd-contents .date-group span{
	display: block;
	font-size: 0;
}

.schedule-area .sd-contents .date-group .weekDate-prev,
.schedule-area .sd-contents .date-group .weekDate-next{
	position: relative;
	padding: 15px;
	cursor: pointer;
}

.schedule-area .sd-contents .date-group .weekDate-prev:before,
.schedule-area .sd-contents .date-group .weekDate-next:before{
	content: '';
	width: 7px;
	height: 12px;
	position: absolute;
	top: 50%;
	left: 50%;
    transform: translate(-50%, -50%);
	background: url('../img/icons.svg') no-repeat -410px -60px / 800px;
}

.schedule-area .sd-contents .date-group .weekDate-next:before{
	transform: translate(-50%, -50%) rotate(180deg);
}

.schedule-area .sd-contents .date-group #toDay{
	padding:3px;
	margin: 0 10px;
	font-size: 16px;
	font-weight: 700;
}

.schedule-area .sd-contents .date-group #weekDate{
	font-size: 18px;
	font-weight: 700;
    background: none;
	text-align: center;
	border: none;
	outline: none;
}

.schedule-area .sd-contents .date-group .btn-reset{
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
    padding: 4px 30px 4px 12px;
    border: 1px solid var(--defaultBlue);
    border-radius: 6px;
    font-size: 12px;
    color: var(--defaultBlue);
}

.schedule-area .sd-contents .date-group .btn-reset:before{
    content: '';
    width: 14px;
    height: 14px;
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translate(0, -50%);
    background: url('../img/icons.svg') no-repeat -140px -32px / 800px;
}

.schedule-area .sd-contents .table-group{
    margin: 30px 0 0;
}

.schedule-area .sd-contents .table-group .tbl_row{
    display: flex;
}

.schedule-area .sd-contents .table-group .tbl_row .cell{
    height: 86px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    margin: 1px;
    position: relative;
}

.schedule-area .sd-contents .table-group .tbl_row:nth-child(n+2) .cell:not(:first-child){
    border-radius: 6px;
}

.schedule-area .sd-contents .table-group .tbl_row:nth-child(n+2) .cell:not(:first-child):before{
    content: '';
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    position: absolute;
    top: 3px;
    right: 3px;
    bottom: 3px;
    left: 3px;
    border: 1px dashed var(--defaultBlue);
    border-radius: 6px;
}
.schedule-area .sd-contents .table-group .tbl_row:nth-child(n+2) .cell:not(:first-child):after{
    content: '';
    width: 14px;
    height: 14px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url('../img/icons.svg') no-repeat -120px -32px / 800px;
}
.schedule-area .sd-contents .table-group .tbl_row:nth-child(n+2) .cell.choice:not(:first-child):after,
.schedule-area .sd-contents .table-group .tbl_row:nth-child(n+2) .cell.choice:not(:first-child):before{
    content: none;
}

.schedule-area .sd-contents .table-group .tbl_row.tblHeader{
    margin: 0 0 10px;
}

.schedule-area .sd-contents .table-group .tbl_row.tblHeader .cell{
    height: auto;
    padding: 12px;
}

.schedule-area .sd-contents .table-group .tbl_row.tblHeader .cell:first-child{
    background: none;
}

.schedule-area .sd-contents .table-group .tbl_row.tblHeader .cell:not(:first-child){
    background: var(--lightBlue2);
    border: none;
    font-weight: 600;
    color: var(--defaultBlue);
}
.schedule-area .sd-contents .table-group .tbl_row.tblHeader .cell:nth-child(2){
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
}
.schedule-area .sd-contents .table-group .tbl_row.tblHeader .cell:nth-child(6){
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
}

.schedule-area .sd-contents .table-group .tbl_row .cell:not(:first-child){
    background: var(--lightBlue2);
}

.schedule-area .sd-contents .table-group .tbl_row .cell:first-child{
    flex: 0 0 90px;
    margin: 0 10px 0 0;
    background: var(--lightGray3);
    font-weight: 600;
    color: var(--defaultBlue);
}

.schedule-area .sd-contents .table-group .tbl_row:nth-child(2) .cell:first-child{
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
}
.schedule-area .sd-contents .table-group .tbl_row:nth-child(7) .cell:first-child{
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

.schedule-area .sd-contents .table-group .tbl_row .cell .btn{
    width: 100%;
    height: 100%;
    z-index: 9;
}

.schedule-area .sd-contents .table-group .tbl_row .cell.choice{
    background: var(--defaultBlue);
}

.schedule-area .sd-contents .table-group .tbl_row .cell .subject{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 99;
}

.schedule-area .sd-contents .table-group .tbl_row .cell .subject P{
    margin: 0;
    text-align: center;
}

.schedule-area .sd-contents .table-group .tbl_row .cell .subject .name{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 5px;
    font-size: 18px;
    font-weight: 600;
    color: var(--defaultWhite);
    line-height: 1.2;
}

.schedule-area .sd-contents .table-group .tbl_row .cell .subject .pub{
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.schedule-area .sd-contents .table-group .tbl_row .cell.choice .btn-del{
    visibility: hidden;
    width: 18px;
    height: 18px;
    position: absolute;
    top: 5px;
    right: 5px;
    padding: 0;
    background: var(--defaultWhite);
    border-radius: 50%;
    opacity: 0;
    z-index: 99;
    transition: all 0.2s ease;
}

.schedule-area .sd-contents .table-group .tbl_row .cell.choice:hover .btn-del{
    visibility: visible;
    opacity: 1;
}

.schedule-area .sd-contents .table-group .tbl_row .cell.choice .btn-del:before{
    content: '';
    width: 18px;
    height: 18px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url('../img/icons.svg') no-repeat -300px -130px / 800px;
}
/* Mobile Menu */
#m-mynavbar .m-header{
    display: flex;
    padding: 8px 12px;
    background: var(--lightBlue);
}

#m-mynavbar .navbar-brand{
    margin: 0;
}

#m-mynavbar .navbar-brand .logoImg{
    height: 32px;
}

#m-mynavbar .navbar-brand .badge{
    width: 36px;
    height: 22px;
    margin: 3px 0 0 10px;
}

#m-mynavbar .loginInfo,
#m-mynavbar.logIn .loginInfo{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background: var(--lightGray);
}

#m-mynavbar .loginInfo .user{
    font-size: 14px;
    color: var(--lightBlack);
}

#m-mynavbar .loginInfo .user span{
    font-weight: 600;
    color: var(--lightBlack);
}

#m-mynavbar .loginInfo .authComplete{
    height: 26px;
    padding: 5px 15px;
    border-radius: 20px;
    background: var(--defaultOrg);
    font-size: 12px;
    font-weight: 600;
    color: var(--defaultWhite);
}

.schoolYear .dropdown-menu{
    min-width: 132px;
    left: -130px !important;
}

.schoolYear .dropdown-toggle{
    width: 34px;
    height: 34px;
    position: relative;
    top: 3px;
}

.schoolYear .dropdown-toggle:before{
    content: '';
    width: 34px;
    height: 34px;
    position: absolute;
    top: 0;
    left: 0;
    background: url('../img/icons.svg') no-repeat -380px -80px / 800px;
}
.schoolYear .dropdown-toggle:after{
    display: none;
}

#m-mynavbar .m-header .btn-group{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

#m-mynavbar .m-header .btn-group .btn{
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--defaultWhite);
    border: 1px solid var(--defaultWhite);
    border-radius: 20px;
}
#m-mynavbar .m-header .btn-group .btn-logout,
#m-mynavbar.logIn .m-header .btn-group .btn-login,
#m-mynavbar .loginInfo{
    display: none;
}

#m-mynavbar.logIn .m-header .btn-group .btn-logout{
    display: block;
}

#m-mynavbar .m-header .btn-group .btn-close{
    filter: invert(1);
    opacity: 1;
}

#m-mynavbar .m-nav-tabs{
    height: calc(100% - 146px);
    display: flex;
}

#m-mynavbar.logIn .m-nav-tabs{
    height: calc(100% - 196px);
}

#m-mynavbar .m-nav-tabs > div{
    overflow-y: auto;
}

#m-mynavbar .nav.nav-pills{
    flex-direction: column;
}

#m-mynavbar .ml-group{
    width: 120px;
    padding: 20px 0;
    background: var(--lightBlue2);
}

#m-mynavbar .mr-group{
    width: calc(100% - 120px);
    padding: 30px 20px;
}

#m-mynavbar .ml-group .btn-group{
    display: flex;
    flex-direction: column;
    margin: 30px 0 0;
}

#m-mynavbar .ml-group .btn-group .btn{
    padding: 6px 15px;
    text-align: left;
    font-size: 14px;
    color: var(--lightBlack);
}

#m-mynavbar .nav.nav-pills .nav-item .nav-link{
    padding: 10px 15px;
    border: none;
    border-radius: 0;
    background: none;
    font-size: 14px;
    color: var(--lightBlack);
}

#m-mynavbar .nav.nav-pills .nav-item .nav-link.active{
    background: var(--defaultWhite);
    color: var(--defaultBlue);
}
/*Sidenav*/
.sideNav h5{
    margin: 0 0 20px;
    padding: 0 0 10px;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid var(--lightGray2);
}

.sideNav ul li.active ul{
    display: block;
}

/*reset*/
.sideNav ul ul {
    display: none;
}
/*1depth*/
.sideNav li a{
    display: block;
    position: relative;
	padding: 12px 20px 12px 0;
    border-bottom: none;
    color: var(--lightBlack);
    font-size: 14px;
    font-weight: 600;
    text-align: left;
}
.sideNav li.open a{
    color: var(--lightBlack);
}

.sideNav li.has-sub > a{
    color: var(--defaultGray);
}
.sideNav li.has-sub.open > a{
    color: var(--lightBlack);
}
.sideNav li.has-sub > .tree-toggle:after{
    content: '';
    width: 10px;
    height: 6px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
    background: url('../img/dropdown_arrow.png') no-repeat 0 0 / 10px;
    transition: all 0.1s ease;
}
.sideNav li.has-sub.open > a:after{
    transform: translate(0, -50%) rotate(180deg);
}

.sideNav li.open a > img{
	opacity: 1;
}

.sideNav li > a > img{
	width: 26px;
	height: auto;
	margin-right: 15px;
	opacity: 0.5;
}

.sideNav li.current > a > img{
	opacity: 1;
}

.sideNav li.current.has-sub.open > ul{
	display: block;
}

/*2depth*/
.sideNav ul>li>ul>li>a{
    padding: 10px;
    color: var(--lightBlack);
}
.sideNav li li ul {
    position: relative;
    z-index: 9999;
    overflow:hidden;
    background:var(--lightGray3);
}
.sideNav li.open li a {
    border:none;
}
.sideNav li.open li:last-child {
    border-bottom:none;
}

.sideNav > li.current a {
    background: rgba(255, 255, 255, 0.1);
	color:var(--defaultWhite);
}

.sideNav > li.current > a:before{
	content:"";
	width: 4px;
	height: 100%;
	background: var(--darkBlue3);
	position: absolute;
	top: 0;
	left: 0;
}

.slideNav .view_ul {
    display:block !important;
}

/*=====  LNB ======*/

/*1depth icon*/
.sideNav i {
    position: absolute;
    top:50%;
    -ms-transform:translateY(-50%);
    transform:translateY(-50%);
}
.sideNav li i {
    color: var(--defaultGray);
}
.sideNav li i.right--icon {
	right: 5px;
	transition:all .2s ease-in-out;
	-webkit-transition:all .2s ease-in-out;
	-moz-transition:all .2s ease-in-out;
	-ms-transition:all .2s ease-in-out;
	-o-transition:all .2s ease-in-out;
}
.sideNav li.open i.right--icon {
	-webkit-transform:rotate(-180deg) translateY(50%);
	-moz-transform:rotate(-180deg) translateY(50%);
	-ms-transform:rotate(-180deg) translateY(50%);
	-o-transform:rotate(-180deg) translateY(50%);
	transform:rotate(-180deg) translateY(50%);
}

/*2depth icon*/
.sideNav li li i.right--icon-sub {
	right: 5px;
	-webkit-transition:all .2s ease-in-out;
	-moz-transition:all .2s ease-in-out;
	-ms-transition:all .2s ease-in-out;
	-o-transition:all .2s ease-in-out;
	transition:all .2s ease-in-out;
}
.sideNav li.open li.open i.right--icon-sub {
	-webkit-transform:rotate(-180deg) translateY(50%);
	-moz-transform:rotate(-180deg) translateY(50%);
	-ms-transform:rotate(-180deg) translateY(50%);
	-o-transform:rotate(-180deg) translateY(50%);
	transform:rotate(-180deg) translateY(50%);
}

/*3depth icon*/
.plus-minus::after,.plus-minus::before {
  content:"";
  display:block;
  position:absolute;
  width:14px;
  height:1px;
  background : var(--darkBlue3);
  left:20px;
  top:50%;
}
.plus-minus::before {
  -webkit-transform:rotate(90deg);
  -moz-transform:rotate(90deg);
  -ms-transform:rotate(90deg);
	-o-transform:rotate(90deg);
  transform:rotate(90deg);
  -webkit-transition:all .2s ease-in-out;
  -moz-transition:all .2s ease-in-out;
  -ms-transition:all .2s ease-in-out;
  -o-transition:all .2s ease-in-out;
	transition:all .2s ease-in-out;
}
.sideNav li li li.has-sub.open>a .plus-minus::before {
	-webkit-transform:rotate(0deg);
	-moz-transform:rotate(0deg);
	-ms-transform:rotate(0deg);
	-o-transform:rotate(0deg);
	transform:rotate(0deg);
}



/*------------------------------------ ONLY PC ------------------------------------*/
@media(hover: hover) and (pointer: fine) {
    .navbar .navbar-nav .nav-link span:hover{
        background: rgba(255,255,255,0.4);
    }

    a:hover,
    #allMenu .offcanvas-body .sitemap-wrap .siteList ul li a:hover,
    main .sec01 .cont-inner .nav-tabs .nav-link:hover{
        color: var(--defaultBlue);
    }

    .navbar .search-group .btn:hover{
        background: var(--darkBlue);
    }
    
    .btn:hover,
    #allMenu .offcanvas-header .btn-close:hover,
    .navbar .btn-allMenu:hover,
    .navbar .btn-search:hover,
    main .sec01 .cont-inner .tab-content .owl-bookLink-1 .owl-nav > div:hover:before,
    main .sec02 .cont-inner .news .owl-news .owl-nav [class*=owl-]:hover,
    .quick-menu .list-area a:hover{
        opacity: 0.7;
    }

    main .sec01 .cont-inner .tab-content .owl-bookLink-1 .owl-nav > div:hover,
    main .sec01 .cont-inner .schedule .date-group > button:hover{
        background: var(--lightBlue2);
        border-color: var(--darkBlue);
    }

    main .sec01 .cont-inner .tab-content .btn-modify:hover{
        background: var(--lightBlue2);
    }
    body.ms-theme main .sec01 .cont-inner .tab-content .btn-modify:hover{
        background: #dff1ea;
    }
    body.hs-theme main .sec01 .cont-inner .tab-content .btn-modify:hover{
        background: #dbdff4;
    }

    .quick-menu .login-area .login-ico a:hover,
    .quick-menu .list-area a:hover{
        width: max-content;
        position: absolute;
        top: 0;
        right: 0;
        padding: 8px 40px 8px 15px;
        font-size: 12px;
        font-weight: 600;
        color: var(--defaultWhite);
        text-align: right;
        background: var(--defaultBlue);
        border-radius: 16px 4px 4px 16px;
        opacity: 1;
    }
    .quick-menu .btn-quick:active{
        background: var(--lightBlue2);
        opacity: 0.7;
    }

    .open-quick .quick-menu .login-area .login-ico a:hover,
    .open-quick .quick-menu .list-area a:hover{
        width: 100%;
        padding: 8px 8px 8px 36px;
        border-radius: 6px;
        font-size: 13px;
        color: var(--defaultWhite);
        text-align: left;
        background: var(--lightBlue);
        line-height: 1.4;
    }
    
    .quick-menu .login-area .login-ico a:hover:before,
    .quick-menu .list-area a:hover:before{
        right: 4px;
        left: auto;
        transform: translate(0, -50%);
    }
    
    .quick-menu .login-area .login-ico a:hover:before,
    .quick-menu .list-area a:hover:before{
        background-position-y: -24px !important;
    }

    .open-quick .quick-menu .login-area .login-ico a:hover:before,
    .open-quick .quick-menu .list-area a:hover:before{
        left: 5px;
    }
    /* 중학 Theme */
    body.ms-theme .quick-menu .login-area .login-ico a:hover,
    body.ms-theme .quick-menu .list-area a:hover{
        background: var(--defaultGreen);
    }

    /* 고등 Theme */
    body.hs-theme .quick-menu .login-area .login-ico a:hover,
    body.hs-theme .quick-menu .list-area a:hover{
        background: var(--defaultPurple);
    }

    /* 중학, 고등 공통 Theme */
    body.ms-theme.open-quick .quick-menu .login-area .login-ico a:hover,
    body.ms-theme.open-quick .quick-menu .list-area a:hover,
    body.hs-theme.open-quick .quick-menu .login-area .login-ico a:hover,
    body.hs-theme.open-quick .quick-menu .list-area a:hover{
        color: var(--defaultWhite);
    }

    body.ms-theme .quick-menu .login-area .login-ico a:hover:before,
    body.ms-theme .quick-menu .list-area a:hover:before,
    body.hs-theme .quick-menu .login-area .login-ico a:hover:before,
    body.hs-theme .quick-menu .list-area a:hover:before{
        background-position-y: -974px !important;
    }
}

/*------------------------------------ ONLY Tablet --------------------------------*/
@media (hover: none) and (pointer: coarse) {

}

/* ----------------------------------- Only Phone ---------------------------------*/
@media(max-width: 991px) and (hover: none) and (pointer: coarse) {
    .quick-menu .list-area{
        overflow-y: auto;
    }
}

@media(max-width: 1399px){
    body.navbar-fixed-top .navbar .badge,
    body.navbar-fixed-top .navbar .badge:before{
        width: 40px;
        height: 22px;
    }
    
    body.navbar-fixed-top .navbar .badge:before{
        font-size: 16px;
    }
    body.navbar-fixed-top .animation-background{
        top: -192px;
    }

    .navbar .navbar-brand .logoImg,
    #allMenu .navbar-brand .logoImg{
        height: 40px;
    }.navbar .navbar-nav{
        gap: 0;
    }
    .navbar .navbar-brand .badge,
    .navbar .navbar-brand .badge:before,
    #allMenu .navbar-brand .badge,
    #allMenu .navbar-brand .badge:before{
        width: 42px;
        height: 26px;
    }
    .navbar .navbar-brand .badge,
    #allMenu .navbar-brand .badge{
        margin: 3px 0 0 10px;
    }
    .navbar .navbar-brand .badge:before,
    #allMenu .navbar-brand .badge:before{
        font-size: 18px;
    }
    .sub .contents .bt{
        width: auto;
    }

    .sub .contents .head-box .title-area{
        flex-direction: column;
        gap: 20px;
    }

    .sub .contents .head-box .book-btn ul{
        grid-template-columns: repeat(4, 1fr);
    }

    /* .sub .contents .accordion .card .card-body .list .listCont > li{
        flex-direction: column;
    } */
    /* .sub .contents .accordion .card .card-body .list .listCont > li .title{
        width: 100%;
    } */
    /* .sub .contents .accordion .card .card-body .list .listCont > li .data-group{
        width: 100%;
        padding: 0 0 0 90px;
    } */

    .sub .contents .accordion .card .card-body .list .listCont > li .title{
        width: calc(100% - 380px);
    }

    .sub .contents .accordion .card .card-body .list .listCont li .data-group{
        width: 365px;
    }    
    .gate-footer:before{
        top: -10px;
    }

    .gate-wrapper .gate-list ul li{
        height: 340px;
    }
}

@media(max-width: 1199px){
    #allMenu .offcanvas-body .sitemap-wrap:before{
        width: 172px;
        height: 92px;
        right: 190px;
        background: url(../img/icons.svg) no-repeat 0 -210px / 560px;
    }
    .quick-menu .list-area{
        margin: 10px 0;
        overflow-y: auto;
    }
    .quick-menu .login-area .open-box .loginLink > a{
        font-size: 14px;
    }
    .quick-menu .login-area .open-box .loginLink > a,
    .quick-menu .login-area .open-box .loginLink > a:before,
    .quick-menu .login-area .open-box .loginLink > a:hover:before{
        width: 110px;
        height: 110px;
    }
    .quick-menu .login-area .open-box .loginLink > a:before{
        background: url(../img/icons.svg) no-repeat 0 -110px / 677px;
    }
    .quick-menu .login-area .open-box .loginLink > a:hover:before{
        background-position-x: -110px;
    }
    .quick-menu .login-area .open-box .loginLink > a span{
        top: 70px;
    }
    .open-quick .quick-menu .login-area .open-box{
        padding: 10px 16px;
    }
    .animation-background:after{
        right: 40px;
    }

    body.navbar-fixed-top .navbar{
        width: calc(100% - 40px);
    }

    .navbar .btn-searchOpen,
    .navbar .search-group .btn-searchClose{
        display: block;
    }
    .navbar .btn-SearchOpen:active{
        background: var(--defaultBlue);
    }
    .navbar .search-group{
        display: none;
    }
    .navbar .search-group .btn-searchClose,
    body.ms-theme .navbar .search-group .btn-searchClose,
    body.hs-theme .navbar .search-group .btn-searchClose{
        background: none;
    }

    .navbar .search-group .form-control{
        width: calc(100% - 64px);
    }

    main .sec01 .cont-inner{
        gap: 20px;
        padding: 20px;
    }

    main .sec01 .cont-inner .book-link{
        width: calc(100% - 220px);
    }
    main .sec01 .cont-inner .schedule .classList .classItem a .subjecTitle{
        font-size: 16px;
    }
    main .sec01 .cont-inner .small-banner{
        width: 200px;
        top: 38px;
    }
    main .sec01 .cont-inner .small-banner .thumb-img{
        height: 160px;
    }

    main .sec02 .cont-inner, main .sec03 .cont-inner{
        gap: 30px;
    }

    main .sec03 .data-1 .data1List,
    main .sec03 .data-2 .data2List{
        height: 499px;
        padding: 20px;
    }

    main .sec03 .data-1 .data1List{
        gap: 18px;
    }

    main .sec03 .data-2 .data2List li a{
        padding: 8px 50px 8px 60px;
    }
    main .sec03 .data-2 .data2List li a:before{
        width: 36px;
        height: 36px;
        left: 15px;
        background-size: 512px;
    }
    main .sec03 .data-2 .data2List li:nth-child(1) a:before{
        background-position: 0 -38px;
    }
    main .sec03 .data-2 .data2List li:nth-child(2) a:before{
        background-position: -38px -38px;
    }
    main .sec03 .data-2 .data2List li:nth-child(3) a:before{
        background-position: -77px -38px;
    }
    main .sec03 .data-2 .data2List li:nth-child(4) a:before{
        background-position: -115px -38px;
    }
    main .sec03 .data-2 .data2List li:nth-child(5) a:before{
        background-position: -154px -38px;
    }
    main .sec03 .data-2 .data2List li:nth-child(6) a:before{
        background-position: -192px -38px;
    }
    main .sec03 .data-2 .data2List li a:after{
        width: 26px;
        height: 26px;
        right: 15px;
        background-position: -167px 0;
        background-size: 608px;
    }

    footer .footer-info .infoTop{
        padding: 0 0 0 145px;
    }

    footer .footer-info .infoCont .info-left{
        gap: 50px;
    }

    footer .footer-top .cont-inner .utilMenu{
        gap: 5px 30px;
    }

    footer .footer-top .cont-inner .utilMenu li:not(:first-child):before{
        left: -15px;
    }
    .sub .contents .head-box .book-btn ul{
        grid-template-columns: repeat(3, 1fr);
    }

    .sub .contents .accordion .card .card-body .list.listThumb .listCont li{
        width: calc((100% - 24px) / 3);
    }
    .sub .contents .accordion .card .card-body .list.listRow .listCont li > .listTitle,
    .sub .contents .accordion .card .card-body .list.listRow .listCont .book,
    .sub .contents .accordion .card .card-body .list .listCont .listTitle .title,
    .sub .contents .accordion .card .card-body .list.listRow .listCont .book .listTitle .title{
        width: 100%;
    }

    .sub .contents .nav-tabs .nav-link{
        min-width: 130px;
    }
    .sub .contents .album-list .line-album > li{
        flex-direction: column;
    }
    .sub .contents .album-list .line-album .left-group{
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    .sub .contents .album-list .line-album .title-group{
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0;
    }
    .sub .contents .album-list .line-album .title{
        margin-top: 10px;
    }
    .sub .contents .nav-tabs.grow-tabs li{
        flex-grow: unset;
        width: calc(100% / 7);
    }
    .sub .contents .board-table tr th:nth-child(2){
        width: 20%;
    }
    .sub .contents .board-table tr th:nth-child(3){
        width: 55%;
    }
    .sub .contents .board-table tr th:nth-child(4){
        width: 25%;
    }
    .schedule-area{
        gap: 10px;
        padding: 10px;
    }

    .schedule-area .sd-selection{
        width: 150px;
    }

    .schedule-area .sd-selection .bottom-group .tab-content{
        max-height: 420px;
        padding: 10px;
    }

    .schedule-area .sd-selection .top-group .items .item{
        flex-direction: column;
        align-items: start;
    }

    .schedule-area .sd-selection .top-group .items .item .tc{
        padding: 0 0 0 25px;
    }

    .schedule-area .sd-selection .bottom-group .nav.nav-pills .nav-item .nav-link{
        font-size: 14px;
    }

    .schedule-area .sd-contents{
        padding: 10px 15px;
    }

    .schedule-area .sd-contents .date-group{
        text-align: left;
    }

    .schedule-area .sd-contents .table-group .tbl_row .cell:first-child{
        flex: 0 0 60px;
    }

    .schedule-area .sd-contents .table-group .tbl_row .cell .subject{
        padding: 10px 0 0;
    }

    .schedule-area .sd-contents .table-group .tbl_row .cell .subject .name,
    .schedule-area .sd-contents .date-group #weekDate{
        font-size: 16px;
    }    
    
    /* .gate-footer:before{
        background-size: 200%;
    } */

    .gate-wrapper .gate-list ul{
        gap: 40px;
    }

    .gate-wrapper .gate-list ul li{
        width: calc((100% - 80px) / 3);
        height: 320px;
    }

    .gate-wrapper .gate-list ul li:hover:before{
        width: 194px;
        height: 163px;
        top: -110px;
        background: url('../img/icons.svg') no-repeat -176px -442px / 640px;
    }

    .gate-wrapper .gate-list ul li:hover:after{
        width: 240px;
        height: 46px;
        top: -20px;
        background: url('../img/icons.svg') no-repeat -153px -608px / 640px;
    }
    
    main .sec02 .cont-inner .notice{
        width: calc(100% - 490px);
    }

    main .sec03 .cont-inner .data-1{
        width: calc(100% - 330px);
    }
    
    main .sec03 .cont-inner .data-2{
        width: 300px;
    }

    body.sub-wrap main.sub > .container .aside{
        width: 200px;
    }

    body.sub-wrap main.sub > .container .aside .asideBox{
        padding: 20px 10px;
        border-radius: 20px;
    }

    body.sub-wrap main.sub > .container .aside .title-area:before{
        width: 95px;
        height: 83px;
        top: -60px;
        background-size: 560px;
    }

    body.sub-wrap main.sub > .container .aside.navItem-1 .title-area:before{
        background-position: -189px -133px;
    }
    body.sub-wrap main.sub > .container .aside.navItem-2 .title-area:before{
        background-position: -284px -133px;
    }
    body.sub-wrap main.sub > .container .aside.navItem-3 .title-area:before{
        background-position: -379px -133px;
    }
    body.sub-wrap main.sub > .container .aside.navItem-4 .title-area:before{
        background-position: -189px -217px;
    }
    body.sub-wrap main.sub > .container .aside.navItem-5 .title-area:before{
        background-position: -284px -217px;
    }
    body.sub-wrap main.sub > .container .aside.navItem-6 .title-area:before{
        background-position: -379px -217px;
    }
    body.sub-wrap main.sub > .container .aside.navItem-7 .title-area:before{
        background-position: -189px -301px;
    }

    body.sub-wrap main.sub > .container .contents{
        width: calc(100% - 240px);
    }

    body.sub-wrap main.sub > .container .aside .snbBanner a{
        height: 100%;
    }

    body.sub-wrap main.sub > .container .aside .btn-area{
        margin: 20px 0 0;
    }

    .sub .contents .accordion .card .card-header > a{
        width: calc(100% - 46px);
    }

    .sub .contents .accordion .card .card-header .btn-group{
        max-width: 100%;
        flex-wrap: wrap;
        justify-content: start;
        position: relative;
        top: 0;
        right: 0;
        margin: 0 0 0 auto;
        transform: none;
    }

    .sub .contents .accordion .card .card-header .btn-group .bt{
        width: calc((100% - 10px) / 3);
        min-width: 180px;
    }

    .sub .contents .accordion .card .card-header .ic-arrow{
        position: absolute;
        top: 34px;
        right: 20px;
    }

    .sub .contents .accordion .card .card-body .list .listCont > li .title{
        width: calc(100% - 190px);
    }

    .sub .contents .accordion .card .card-body .list .listCont li .data-group{
        /* width: 180px; */
        width: 100%;
        justify-content: flex-end;
    }
    .sub .contents .accordion .card .card-header {
        flex-wrap: wrap;
    }
    .card .card-body .list .listCont li .data-group .data-group-btn {
        display: flex;
        flex-direction: column;
    }
    .sub .book-li li { 
        width: 40%;
        border-radius: 10px;
        overflow: hidden;
        border: 1px solid var(--lightBlue03);
    }
}

@media(max-width: 991px){
    
    .navbar-nav {
        display: none;
    }
    .mobile-menu-nav {
        display: block;
    }
    .wrapper{
        padding: 0;
    }
    .container-lg, .container-md, .container-sm, .container {
        max-width: 960px !important;
    }
    .gate-wrapper{
        min-height: 100%;
        justify-content: space-between;
    }
    .gate-footer{
        position: relative;
    }
    .gate-footer:before,
    .quick-menu,
    .gate-wrapper .gate-list ul li:hover:before,
    .gate-wrapper .gate-list ul li:hover:after,
    main .sec01 .cont-inner .small-banner,
    .navbar .btn-allMenu,
    .animation-background:before,
    .animation-background:after{
        display: none;
    }
    .gate-wrapper .gate-list{
        margin: 50px 0 0;
    }

    .gate-wrapper .gate-list ul{
        gap: 20px;
    }

    .gate-wrapper .gate-list ul li{
        width: calc((100% - 40px) / 3);
    }
    .gate-footer .container .copyright{
        margin: 20px 0;
        font-size: 12px;
    }

    .gate-footer .container .copyright span{
        padding: 20px 0 0;
    }

    .gate-footer .container .copyright span:before{
        top: 0;
        left: 50%;
        transform: translate(-50%, 0);
    }

    body.navbar-fixed-top .navbar{
        width: 100%;
    }

    main .sec01 .cont-inner{
        flex-direction: column;
        padding: 15px;
    }

    main .sec01 .cont-inner .nav-tabs .nav-link{
        padding: 10px 20px;
    }

    main .sec01 .cont-inner .book-link{
        width: 100%;
    }

    main .sec02 .cont-inner{
        flex-direction: column;
        gap: 60px;
    }

    main .sec02 .cont-inner > div{
        width: 100% !important;
    }

    main .sec02 .cont-inner .news .owl-news .item .thumb-img{
        height: 100%;
    }

    main .sec03 .cont-inner{
        flex-direction: column;
        gap: 60px;
    }
    main .sec03 .cont-inner .data-1,
    main .sec03 .cont-inner .data-2{
        width: 100%;
    }

    main .sec03 .data-1 .data1List,
    main .sec03 .data-2 .data2List{
        height: auto;
    }

    main .sec03 .data-2 .data2List{
        flex-direction: row;
        flex-wrap: wrap;
    }

    main .sec03 .data-2 .data2List li{
        width: calc((100% - 16px) / 3);
    }

    main .sec03 .data-1 .data1List li a .info .title{
        font-size: 16px;
    }

    main .sec03 .data-2 .data2List li a .mt{
        font-size: 18px;
    }

    footer .footer-top .cont-inner{
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    footer .footer-top .cont-inner .utilMenu{
        margin-left: 0;
    }

    footer .footer-info .infoTop{
        flex-direction: column;
        align-items: center;
        gap: 20px;
        padding: 0;
    }

    footer .footer-info .infoCont{
        flex-direction: column-reverse;
        align-items: center;
        gap: 50px;
        margin: 20px 0 0;
    }

    footer .footer-info .infoCont .info-left{
        width: 90%;
        flex-direction: column;
        gap: 20px;
    }

    body.sub-wrap main.sub > .container{
        flex-direction: column;
    }

    body.sub-wrap main.sub > .container .aside .snbList,
    body.sub-wrap main.sub > .container .aside .title-area:before,
    body.sub-wrap main.sub > .container .aside .snbBanner{
        display: none;
    }

    body.sub-wrap main.sub > .container .aside{
        width: calc(100% + 24px);
        margin: 0 -12px;
        padding: 0;
    }

    body.sub-wrap main.sub > .container .aside .title-area{
        justify-content: center;
        margin: 0 0 20px;
    }

    body.sub-wrap main.sub > .container .aside .asideBox{
        padding: 0;
        background: none;
        border: none;
    }

    body.sub-wrap main.sub > .container .aside .btn-area{
        margin: 0;
        padding: 20px 12px 0;
        background: var(--lightBlue2);
    }

    body.sub-wrap main.sub > .container .contents{
        width: 100%;
    }

    #subTabmenu{
        display: none;
    }
    #tabSelect {
        display: block;
    }

    .bootstrap-select.tabSelect{
        width: 100% !important;
        margin: 30px 0 0;
    }

    .bootstrap-select.sideMenu{
        width: 100% !important;
        padding: 20px 12px;
        background: var(--lightBlue2);
        border-bottom: 1px solid var(--lightBlue3 );
    }

    .bootstrap-select.sideMenu .dropdown-menu{
        min-width: calc(100% - 24px);
    }

    .bootstrap-select.tabSelect .dropdown-toggle .filter-option,
    .bootstrap-select.tabSelect .dropdown-menu li a,
    .bootstrap-select.sideMenu .dropdown-toggle .filter-option,
    .bootstrap-select.sideMenu .dropdown-menu li a{
        font-size: 18px;
    }

    .bootstrap-select.tabSelect > .dropdown-toggle,
    .bootstrap-select.sideMenu > .dropdown-toggle{
        padding: 10px 15px;
        border-color: var(--defaultGray);
    }

    .bootstrap-select.sideMenu > .dropdown-toggle{
        border: 1px solid var(--lightBlue3 );
    }

    .sub .contents .head-box .title-area .title-group .mTitle{
        font-size: 34px;
    }

    .sub .contents .head-box .title-area .title-group .mTitle:before{
        top: -6px;
    }

    body.sub-wrap main.sub > .container .aside .title-area .title br,
    .sub .contents .head-box .title-area .title-group .desc br{
        display: none;
    }

    body.sub-wrap main.sub > .container .aside .btn-area .semester{
        margin: 10px 0 0;
    }

    .sub .contents .head-box .title-area .title-group:before{
        width: 64px;
        height: 59px;
        background-size: 640px;
        top: 20px;
    }
    .sub .contents .head-box .title-area .title-group.m3:before{
        background-position: -360px -88px;
    }
    .sub .contents .head-box .title-area .title-group.m4:before{
        background-position: -432px -88px;
    }
    .sub .contents .head-box .title-area .title-group.m5:before{
        background-position: -504px -88px;
    }
    .sub .contents .head-box .title-area .title-group.m6:before{
        background-position: -572px -88px;
    }
    .sub .contents .head-box .title-area .title-group.m7:before{
        background-position: -572px -152px;
    }

    .schedule-area{
        overflow-x: auto;
    }

    .schedule-area .schedule-inner{
        width: 916px;
    }

    .topNav,
    .collapse.navbar-collapse,
    .animation-background,
    .navbar-toggler,
    .navbar .navbar-brand .logoImg .default,
    .navbar.scrolled .navbar-brand .logoImg .mobile{
        display: none !important;
    }

    header{
        height: 100px;
    }

    .navbar,
    body.sub-wrap .navbar{
        width: 100%;
        height: auto;
        position: fixed;
        top: 0;
        left: 0;
        margin: 0;
        background: var(--defaultWhite);
    }

    .navbar .navbar-brand .logoImg{
        height: 32px;
    }

    .navbar .navbar-brand .badge{
        width: 36px;
        height: 22px;
    }

    .navbar .navbar-brand .badge:before{
        height: 22px;
        font-size: 14px !important;
        line-height: 1.5;
    }

    .navbar .btn-navbar,
    .navbar .navbar-brand .logoImg .mobile,
    .navbar.scrolled .navbar-brand .logoImg .default{
        display: block !important;
    }

    .navbar.scrolled,
    body.sub-wrap .navbar.scrolled{
        background: var(--lightBlue);
    }

    body.ms-theme .navbar.scrolled,
    body.ms-theme body.sub-wrap .navbar.scrolled{
        background: var(--lightGreen2);
    }

    body.hs-theme .navbar.scrolled,
    body.hs-theme body.sub-wrap .navbar.scrolled{
        background: var(--lightPurple2);
    }

    .navbar .btn-navbar{
        padding: 0;
    }

    .navbar .btn-navbar .navbar-toggler-more{
        width: 24px;
        height: 24px;
        position: relative;
        display: block;
    }
    
    .navbar .btn-navbar .navbar-toggler-more:before{
        content: '';
        width: 24px;
        height: 24px;
        position: absolute;
        top: 0;
        left: 0;
        background: url('../img/icons.svg') no-repeat -300px -155px / 800px;
    }

    .navbar.scrolled .btn-navbar .navbar-toggler-more:before{
        background-position-x: -326px;
    }
    
    body.ms-theme .navbar.scrolled .btn-navbar .navbar-toggler-more:before,
    body.hs-theme .navbar.scrolled .btn-navbar .navbar-toggler-more:before{
        background-position: -326px -155px;
    }

    body.sub-wrap .navbar{
        background: none;
    }
    .boardDataList {
        display: flex;
        flex-direction: column;
    }
    .boardDataList img {
        width: 400px;
    }
    .boardDataList .listItem .end-evt-box {
        width: 400px;
    }
    .sub .contents .search-box-twice {
        margin-top: 20px;
    }
}

@media(max-width: 767px){
    .gate-wrapper .intro-msg{
        width: 70%;
        margin: 30px auto 0;
    }

    .gate-wrapper .gate-list{
        margin: 50px 0;
    }
    
    .gate-wrapper .gate-list ul{
        flex-direction: column;
    }

    .gate-wrapper .gate-list ul li{
        width: 400px;
        height: 100px;
    }

    .gate-wrapper .gate-list ul li,
    .gate-wrapper .gate-list ul li a{
        border-radius: 20px;
    }

    .gate-wrapper .gate-list ul li:hover{
        box-shadow: 0 10px 10px rgba(0,0,0,0.2);
    }

    .gate-wrapper .gate-list ul li:hover a{
        border-width: 6px !important;
    }

    .gate-wrapper .gate-list ul li a span{
        width: 100px;
        top: 50%;
        left: calc(50% - 60px);
        transform: translate(-50%, -50%);
        font-size: 30px;
    }

    .gate-wrapper .gate-list ul li a span:before{
        width: 112px;
        height: 46px;
        top: 50%;
        left: 110px;
        bottom: auto;
        transform: translate(0, -50%);
        background: url('../img/icons.svg') no-repeat 0 -354px / 345px;
    }
    .gate-wrapper .gate-list ul li.ms-link a span:before{
        background-position: -112px -354px;
    }
    .gate-wrapper .gate-list ul li.hs-link a span:before{
        background-position: -224px -354px;
    }
    main .sec01 .cont-inner .schedule .classList-group{
        overflow-x: auto;
    }

    main .sec01 .cont-inner .schedule .classList{
        width: 800px;
    }

    main .sec01 .cont-inner .schedule .date-group{
        left: 50px;
        transform: none;
    }

    main .sec01 .cont-inner .tab-content .btn-modify{
        width :24px;
        height: 24px;
        padding: 2px 10px;
        font-size: 0;
    }

    main .sec01 .cont-inner .tab-content .btn-modify:after{
        right: 50%;
        transform: translate(50%, -50%);
    }

    main .sec03 .data-1 .data1List li{
        width: calc((100% - 18px) / 2);
    }

    main .sec03 .data-2 .data2List li{
        width: calc((100% - 8px) / 2);
    }

    main .sec04 .footer-banner a{
        height: 60px;
    }

    .sub .contents .head-box .book-btn ul{
        grid-template-columns: repeat(2, 1fr);
    }

    .sub .contents .accordion .card .card-body .list .top-title h3{
        width: 100%;
        margin: 0 0 10px;
    }

    .sub .contents .accordion .card .card-body .list .top-title .btn:nth-of-type(1),
    .sub .contents .accordion .card .card-body .list.listRow .listCont li .btn-group,
    .sub .contents .accordion .card .card-body .list.listRow .listCont .data-group{
        margin-left: auto;
    }

    .sub .contents .accordion .card .card-body .list.listRow .top-title,
    .sub .contents .accordion .card .card-body .list.listThumb .top-title{
        padding: 9px 16px 9px 34px;
    }

    .sub .contents .accordion .card .card-body .list.listRow .listCont{
        padding: 0 10px;
    }

    .sub .contents .accordion .card .card-body .list.listRow .listCont > li{
        flex-direction: column;
        align-items: start;
        padding: 5px 14px 5px 24px;
    }

    .sub .contents .accordion .card .card-body .list.listRow .listCont .data-group{
        width: auto;
        justify-content: end;
    }

    .sub .contents .accordion .card .card-body .list .listCont > li{
        flex-direction: column;
    }

    .sub .contents .accordion .card .card-body .list .listCont > li .title,
    .sub .contents .accordion .card .card-body .list .listCont li .data-group{
        width: 100%;
    }

    .sub .contents .board-table tr td,
    .sub .contents article.list-box .view-ttl,
    .sub .contents article.list-box .view-cont{
        font-size: 14px;
    }

    .class-num{
        padding: 6px 8px;
        font-size: 12px;
    }

    .sub .contents article.list-box .view-ttl{
        flex-direction: column;
    }

    .sub .contents article.list-box .view-ttl .date{
        margin: 10px 0 0;
    }
    .join-form .join-step{
        width: 350px;
        flex-direction: column;
        margin: 0 auto;
    }

    .join-form .join-step li{
        justify-content: left;
        padding: 8px 30px;
    }

    .join-form .cont-area .step-2 .info-area > div > ul > li,
    .find-form > ul > li{
        flex-direction: column;
        align-items: start;
    }

    .join-form .cont-area .step-2 .info-area > div > ul > li .input,
    .find-form > ul > li .input,
    .join-form .cont-area .step-2 .info-area > div > ul > li.id-email .input{
        width: 100%;
        margin: 10px 0 0;
    }

    .join-form .cont-area .step-2 .btn-oc{
        margin: 10px 0 0;
    }

    .join-wrap .form-control,
    .find-form .form-control,
    .join-form .bootstrap-select .dropdown-toggle .filter-option-inner-inner,
    .join-form .bootstrap-select .dropdown-menu li a span.text,
    .find-form .bootstrap-select .dropdown-toggle .filter-option-inner-inner,
    .find-form .bootstrap-select .dropdown-menu li a span.text,
    .join-form .date-group,
    .find-form .date-group{
        font-size: 14PX;
    }

    .join-form .date-group .bootstrap-select,
    .find-form .date-group .bootstrap-select{
        margin-right: 5px;
    }

    .join-form .date-group .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn),
    .join-form .phoneNum-group .form-control,
    .find-form .date-group .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn),
    .find-form .phoneNum-group .form-control{
        width: 80px;
    }

    .join-form .email-group,
    .find-form .email-group{
        flex-wrap: wrap;
        gap: 10px;
    }
    .checkbox.mp3:before,
    .checkbox.zip:before,
    .checkbox.link:before,
    .checkbox.etc:before,
    .checkbox.pdf:before,
    .checkbox.hwp:before,
    .checkbox.hwpx:before,
    .checkbox.ppt:before,
    .checkbox.pptx:before{
        content: '';
        width: 24px;
        height: 24px;
        position: absolute;
        top: 25px;
        left: 59px;
        transform: translate(0, -50%);
    }

}

@media(max-width: 575px){
    main .sec03 .data-2 .data2List li,
    .sub .contents .top-title .search-group{
        width: 100%;
    }

    .sub .contents .accordion .card .card-body .list.listThumb .listCont li{
        width: calc((100% - 12px) / 2);
    }

    .sub .contents .board-list .list-top{
        flex-direction: column;
    }

    #m-mynavbar{
        min-width: 100%;
    }
    .join-form .join-btn-box .btn,
    .find-form .find-btn-box .btn{
        width: 100%;
    }

    .join-form .join-btn-box .btn + .btn,
    .find-form .find-btn-box .btn + .btn{
        margin: 5px 0 0;
    }

    .modal-popup .modal .title-area h4:before,
    .modal-popup .modal .title-area h4:after,
    .join-form .cont-area .step-3 .inner .txt1 br{
        display: none;
    }

    .modal-popup .modal .title-area h4{
        padding: 0 0 0 10px;
    }
}

@media(max-width: 479px){    
    .gate-wrapper .gate-list ul li{
        width: 90%;
        height: 80px;
    }
    main .sec03 .data-1 .data1List li,
    .sub .contents .accordion .card .card-body .list.listThumb .listCont li{
        width: 100%;
    }

    main .sec03 .data-1 .data1List li a .thumb-img,
    .sub .contents .accordion .card .card-body .list.listThumb .listCont .thumb-img{
        height: 100%;
    }

    .sub .contents .head-box .book-btn ul{
        grid-template-columns: repeat(1, 1fr);
    }
    .login-wrap .login-form .login-input-box{
        width: 100%;
    }

    .login-wrap .login-form .login-input-box{
        padding: 40px 20px;
    }
}