@charset "UTF-8";
@font-face {
    font-family: 'yg-jalnan';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

html, body{padding: 0; margin: 0; height: 100%;}
body.scrollDisable{position: fixed; width: 100%; height: 100%; min-height: 100%; overflow: hidden !important; touch-action: none;}

/* font-family: 'NanumSquareLight'; */
/* font-family: 'NanumSquare'; */
/* font-family: 'NanumSquareBold'; */
/* font-family: 'NanumSquareExtraBold'; */
/* font-family: 'NanumSquareAcb'; */
/* font-family: 'NanumSquareAceb'; */
/* font-family: 'NanumSquareAcl'; */
/* font-family: 'NanumSquareAcr'; */

:root{
	--blue1: #C6ECF0;
	--blue2: #06ABC6;
	--blue3: #359BBA;
	--blue4: #3FB5D1;
	
	--yellow1: #FFD24D;
	--yellow2: #FFC248;
	--yellow3: #FFAD4A;
	
	--green1: #D2EDC1;
	--green2: #66C330;
	--green3: #3FB560;
	--black1: #FFFFFF;
	--black2: #F7F7F7;
	--black3: #F1F1F1;
	--black4: #BFBFBF;
	--black5: #ADADAD;
	--black6: #707070;
	--black7: #4F4F4F;
	--black8: #3A3A3A;
	--black9: #2D2D2D;
	
	--red1: #CE452D;
	--red2: #FD8291;
	
	--highlight-y1: #FFD24D99;
	
	--table-row: #F6F7FB;
}


*{font-family: NanumSquareAcr, sans-serif; font-style: normal; color: var(--black9); box-sizing: border-box;}
ul{list-style: none; padding: 0; margin: 0;}

.container{width: calc(100% - 1em * 2); max-width: 1300px; margin: 0 auto;}

.modal{position: fixed; display: none; align-items: center; justify-content: center; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 10000; padding: 1em; overflow: auto;}
.modal > .inner{background-color: white; border-radius: 1em; overflow: hidden;}
.modal > .inner .title-wrap{display: flex; flex-direction: row; padding: 2em; align-items: center;}
.modal > .inner .title-wrap > .title{width: calc(100% - 20px); font-size: 20px; font-family: NanumsquareAceb; text-align: center;}
.modal > .inner .title-wrap .exit-wrap{width: 20px;}
.modal > .inner .title-wrap .exit-wrap .exit{position: relative; width: 20px; height: 20px; background-color: rgba(0,0,0,0); border: none; outline: none; padding: 0; margin: 0; cursor: pointer;}
.modal > .inner .title-wrap .exit-wrap .exit span{position: absolute; left: 0; top: calc((100% - 3px) / 2); width: 100%; height: 3px; background-color: black; border-radius: 3px;}
.modal > .inner .title-wrap .exit-wrap .exit span:nth-of-type(1){transform: rotate(-45deg);}
.modal > .inner .title-wrap .exit-wrap .exit span:nth-of-type(2){transform: rotate(45deg);}
.modal > .inner .content-wrap{padding: 0 2em 2em 2em;}
.modal > .inner .content-wrap .modal-page-select{margin: 2em 0 3em 0; width: 100%; overflow: auto;}
.modal > .inner .content-wrap .modal-page-select > ul{display: flex; flex-direction: row; align-items: center; width: max-content;}
.modal > .inner .content-wrap .modal-page-select > ul > li{margin-right: 1em;}
.modal > .inner .content-wrap .modal-page-select > ul > li:last-of-type{margin-right: 0;}
.modal > .inner .content-wrap .modal-page-wrap .modal-page{display: none;}
.modal > .inner .content-wrap .modal-page-wrap .modal-page.active{display: block;}

.modal.gn2 .inner .title-wrap{background-color: var(--green2);}
.modal.gn2 .inner .title-wrap > .title{color: white;}
.modal.gn2 .inner .title-wrap .exit-wrap .exit span{background-color: white;}
.modal.gn2 .inner .content-wrap{padding: 2em;}

.modal.show{display: flex;}

.icon{position: relative; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain; mask-repeat: no-repeat; mask-position: center center; mask-size: contain; background-repeat: no-repeat; background-size: contain; background-position: center center;}

.icon.payment{-webkit-mask-image: url('/resources/images/icons/payment.png'); mask-image: url('/resources/images/icons/payment.png');}
.icon.exit{-webkit-mask-image: url('/resources/images/icons/exit.png'); mask-image: url('/resources/images/icons/exit.png');}
.icon.mypage{-webkit-mask-image: url('/resources/images/icons/mypage.png'); mask-image: url('/resources/images/icons/mypage.png');}
.icon.admin{-webkit-mask-image: url('/resources/images/icons/admin.png'); mask-image: url('/resources/images/icons/admin.png');}
.icon.dashboard{-webkit-mask-image: url('/resources/images/icons/dashboard.png'); mask-image: url('/resources/images/icons/dashboard.png');}
.icon.mypage2{-webkit-mask-image: url('/resources/images/icons/mypage2.png'); mask-image: url('/resources/images/icons/mypage2.png');}
.icon.payment-list{-webkit-mask-image: url('/resources/images/icons/paymentList.png'); mask-image: url('/resources/images/icons/paymentList.png');}
.icon.payment-list2{-webkit-mask-image: url('/resources/images/icons/paymentList2.png'); mask-image: url('/resources/images/icons/paymentList2.png');}
.icon.contents{-webkit-mask-image: url('/resources/images/icons/contents.png'); mask-image: url('/resources/images/icons/contents.png');}
.icon.branch{-webkit-mask-image: url('/resources/images/icons/branch.png'); mask-image: url('/resources/images/icons/branch.png');}
.icon.director{-webkit-mask-image: url('/resources/images/icons/director.png'); mask-image: url('/resources/images/icons/director.png');}
.icon.student{-webkit-mask-image: url('/resources/images/icons/student.png'); mask-image: url('/resources/images/icons/student.png');}
.icon.delivery{-webkit-mask-image: url('/resources/images/icons/delivery.png'); mask-image: url('/resources/images/icons/delivery.png');}
.icon.history{-webkit-mask-image: url('/resources/images/icons/history.png'); mask-image: url('/resources/images/icons/history.png');}
.icon.search{-webkit-mask-image: url('/resources/images/icons/search.png'); mask-image: url('/resources/images/icons/search.png');}
.icon.ebook{-webkit-mask-image: url('/resources/images/icons/ebook.png'); mask-image: url('/resources/images/icons/ebook.png');}
.icon.leveltest{-webkit-mask-image: url('/resources/images/icons/leveltest.png'); mask-image: url('/resources/images/icons/leveltest.png');}
.icon.collective{-webkit-mask-image: url('/resources/images/icons/collective.png'); mask-image: url('/resources/images/icons/collective.png');}

.icon.minus > span{position: absolute; width: 100%; height: 5px; border-radius: 5px; background-color: var(--black9); left: 0; top: calc((100% - 5px) / 2);}
.icon.minus.y2 > span{background-color: var(--yellow2)}

.icon.plus > span{position: absolute; width: 100%; height: 5px; border-radius: 5px; background-color: var(--black9); left: 0; top: calc((100% - 5px) / 2);}
.icon.plus.y2 > span{background-color: var(--yellow2)}
.icon.plus > span:nth-of-type(1){transform: rotate(0deg);}
.icon.plus > span:nth-of-type(2){transform: rotate(90deg);}

.icon.x > span{position: absolute; width: 100%; height: 5px; border-radius: 5px; background-color: var(--black9); left: 0; top: calc((100% - 5px) / 2);}
.icon.x.r1 > span{background-color: var(--red1)}
.icon.x > span:nth-of-type(1){transform: rotate(45deg);}
.icon.x > span:nth-of-type(2){transform: rotate(135deg);}

#loading{z-index: 1000000;}
#loading img{width: 100%; max-width: 100px;}

#wrap{position: relative; width: 100%; min-height: 100%; padding-bottom: 266px;}

#desktop-header{position: sticky; left: 0; top: 0; z-index: 1000; padding: 0 1em; height: 70px; background-color: white; display: flex; flex-direction: row; align-items: center; justify-content: center; border-bottom: 1px solid var(--black3);}
#desktop-header .logo{height: 40px;}
#desktop-header .button-list{position: absolute; top: 0; right: 0; display: flex; flex-direction: row; height: 100%; align-items: center; padding: 1em;}
#desktop-header .button-list > li{margin-left: 1em;}
#desktop-header .button-list > li > a{text-decoration: none;}
#desktop-header .button-list > li .button{width: 3em; height: 3em; border: none; outline: none; border-radius: 50%; background-color: transparent; padding: 5px; display: flex; flex-direction: row; align-items: center; justify-content: center;}
#desktop-header .button-list > li .button:hover{cursor: pointer;}
#desktop-header .button-list > li .button > .icon{display: inline-block; width: 100%; height: 100%;}
#desktop-header .button-list > li .button.admin > .icon{-webkit-mask-image: url('/resources/images/icons/admin.png'); mask-image: url('/resources/images/icons/admin.png'); background-color: #01b3de;}
#desktop-header .button-list > li .button.admin:hover{background-color: #01b3de;}
#desktop-header .button-list > li .button.admin:hover > .icon{background-color: white;}
#desktop-header .button-list > li .button.logout > .icon{-webkit-mask-image: url('/resources/images/icons/exit.png'); mask-image: url('/resources/images/icons/exit.png'); background-color: #6eb92b; left: 10%;}
#desktop-header .button-list > li .button.logout:hover{background-color: #6eb92b;}
#desktop-header .button-list > li .button.logout:hover > .icon{background-color: white;}
#desktop-header .button-list > li .button.payment > .icon{-webkit-mask-image: url('/resources/images/icons/payment.png'); mask-image: url('/resources/images/icons/payment.png'); background-color: var(--yellow2);}
#desktop-header .button-list > li .button.payment:hover{background-color: var(--yellow2);}
#desktop-header .button-list > li .button.payment:hover > .icon{background-color: white;}
#desktop-header .button-list > li .button.ebook > .icon{-webkit-mask-image: url('/resources/images/icons/ebook.png'); mask-image: url('/resources/images/icons/ebook.png'); background-color: #ff6403;}
#desktop-header .button-list > li .button.ebook:hover{background-color: #ff6403;}
#desktop-header .button-list > li .button.ebook:hover > .icon{background-color: white;}
#desktop-header .button-list > li .button.leveltest > .icon{-webkit-mask-image: url('/resources/images/icons/leveltest.png'); mask-image: url('/resources/images/icons/leveltest.png'); background-color: #fabe00; left: 10%;}
#desktop-header .button-list > li .button.leveltest:hover{background-color: #fabe00;}
#desktop-header .button-list > li .button.leveltest:hover > .icon{background-color: white;}
#desktop-header .button-list > li .button.mypage{width: auto; height: auto; border-radius: 2em; border: 1px solid var(--black5); padding: 0.5em;}
#desktop-header .button-list > li .button.mypage > .icon{width: 2em; height: 2em; -webkit-mask-image: url('/resources/images/icons/mypage.png'); mask-image: url('/resources/images/icons/mypage.png'); background-color: var(--yellow2); margin-right: 0.5em;}

#desktop-header .icon.mypage{background-color: var(--yellow2);}

#mobile-header{position: sticky; left: 0; top: 0; z-index: 1000; padding: 0 1em; height: 50px; background-color: white; display: none; flex-direction: row; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--black3);}
#mobile-header .logo{height: 25px;}
#mobile-header .button-list{display: flex; flex-direction: row; height: 100%; align-items: center; padding: 1em 0;}
#mobile-header .button-list > li .button{width: 2em; height: 2em; border: none; outline: none; border-radius: 50%; background-color: transparent; padding: 5px; display: flex; flex-direction: row; align-items: center; justify-content: center;}
#mobile-header .button-list > li .button:hover{cursor: pointer;}
#mobile-header .button-list > li .button > .icon{display: inline-block; width: 100%; height: 100%;}
#mobile-header .button-list > li .button.admin > .icon{-webkit-mask-image: url('/resources/images/icons/admin.png'); mask-image: url('/resources/images/icons/admin.png'); background-color: #01b3de;}
#mobile-header .button-list > li .button.admin:hover{background-color: #01b3de;}
#mobile-header .button-list > li .button.admin:hover > .icon{background-color: white;}
#mobile-header .button-list > li .button.logout > .icon{-webkit-mask-image: url('/resources/images/icons/exit.png'); mask-image: url('/resources/images/icons/exit.png'); background-color: #6eb92b; left: 10%;}
#mobile-header .button-list > li .button.logout:hover{background-color: #6eb92b;}
#mobile-header .button-list > li .button.logout:hover > .icon{background-color: white;}
#mobile-header .button-list > li .button.payment > .icon{-webkit-mask-image: url('/resources/images/icons/payment.png'); mask-image: url('/resources/images/icons/payment.png'); background-color: var(--yellow2);}
#mobile-header .button-list > li .button.payment:hover{background-color: var(--yellow2);}
#mobile-header .button-list > li .button.payment:hover > .icon{background-color: white;}
#mobile-header .button-list > li .button.ebook > .icon{-webkit-mask-image: url('/resources/images/icons/ebook.png'); mask-image: url('/resources/images/icons/ebook.png'); background-color: #ff6403;}
#mobile-header .button-list > li .button.ebook:hover{background-color: #ff6403;}
#mobile-header .button-list > li .button.ebook:hover > .icon{background-color: white;}
#mobile-header .button-list > li .button.leveltest > .icon{-webkit-mask-image: url('/resources/images/icons/leveltest.png'); mask-image: url('/resources/images/icons/leveltest.png'); background-color: #fabe00; left: 10%;}
#mobile-header .button-list > li .button.leveltest:hover{background-color: #fabe00;}
#mobile-header .button-list > li .button.leveltest:hover > .icon{background-color: white;}
#mobile-header .button-list > li .button.mypage > .icon{-webkit-mask-image: url('/resources/images/icons/mypage.png'); mask-image: url('/resources/images/icons/mypage.png'); background-color: var(--yellow2);}
#mobile-header .button-list > li .button.mypage:hover{background-color: var(--yellow2);}
#mobile-header .button-list > li .button.mypage:hover > .icon{background-color: white;}

#desktop-footer{display: block; width: 100%; background-color: #1E2534;}
#desktop-footer .link-list{display: flex; flex-direction: row; padding: 2em 0;}
#desktop-footer .link-list > li{margin-right: 40px;}
#desktop-footer .link-list > li:last-of-type{margin-right: 0;}
#desktop-footer .link-list > li > a{color: white; text-decoration: none;}
#desktop-footer .info > .image-wrap{display: flex; flex-direction: row; align-items: center; justify-content: space-between;}
#desktop-footer .info > .image-wrap > .logo{width: 200px;}
#desktop-footer .info > .image-wrap > .kcp{width: 80px;}
#desktop-footer .info > .info-text{display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; padding: 1em 0;}
#desktop-footer .info > .info-text > .site-info > ul{display: flex; flex-direction: row; flex-wrap: wrap;}
#desktop-footer .info > .info-text > .site-info > ul > li{color: #737882; margin-right: 2em; margin-bottom: 0.5em; word-break: keep-all;}
#desktop-footer .info > .info-text > .site-info > .copyright{color: #737882; font-family: NanumsquareAceb;}
#desktop-footer .info > .info-text > .pay-info{width: 33em; color: #737882; line-height: 1.5; word-break: keep-all; text-align: right;}

#mobile-footer{display: none; width: 100%; background-color: #1E2534;}
#mobile-footer .link-list{padding: 1em 0;}
#mobile-footer .link-list > li{margin-bottom: 1em;}
#mobile-footer .link-list > li:last-of-type{margin-bottom: 0;}
#mobile-footer .link-list > li > a{color: white; text-decoration: none;}
#mobile-footer .info > .logo{width: 200px;}
#mobile-footer .info > .site-info{padding: 1em 0;}
#mobile-footer .info > .site-info > ul{margin-bottom: 1em;}
#mobile-footer .info > .site-info > ul > li{color: #737882; margin-bottom: 0.5em; word-break: keep-all;}
#mobile-footer .info > .site-info > ul > li:last-of-type{margin-bottom: 0;}
#mobile-footer .info > .site-info > .pay-info{display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; margin-bottom: 1em;}
#mobile-footer .info > .site-info > .pay-info > .info-text{color: #737882; line-height: 1.5; word-break: keep-all;}
#mobile-footer .info > .site-info > .pay-info > .kcp{width: 80px;}
#mobile-footer .info > .site-info > .copyright{color: #737882; font-family: NanumsquareAceb;}

#wrap #desktop-footer{position: absolute; left: 0; top: calc(100% - 266px);}
#wrap #mobile-footer{position: absolute; left: 0; top: calc(100% - 556px);}

@media(max-width: 1024px){
	#wrap{padding-bottom: 556px;}
	
	#desktop-header{display: none;}
	#mobile-header{display: flex;}
	
	#desktop-footer{display: none;}
	#mobile-footer{display: block;}
	
	.modal .inner .title-wrap{padding: 1em;}
	.modal .inner .content-wrap{padding: 0 1em 1em 1em;}
	.modal.gn2 .inner .content-wrap{padding: 1em;}
}