@charset "utf-8";

@import url(bootstrap.min.css);
@import url(jquery.mCustomScrollbar.min.css);

/* Font */
@font-face{font-weight:400;font-family:'NotoSans';src:url(../font/NotoSansKR-Regular.woff) format('woff');font-display: fallback}
@font-face{font-weight:500;font-family:'NotoSans';src:url(../font/NotoSansKR-Medium.woff) format('woff');font-display: fallback}
@font-face{font-weight:700;font-family:'NotoSans';src:url(../font/NotoSansKR-Bold.woff) format('woff');font-display: fallback}
@font-face{font-weight:700;font-family:'OMTitle';src:url(../font/ONE-Mobile-Title.woff) format('woff');font-display: fallback}
@font-face{font-weight:700;font-family:'OMPOP';src:url(../font/ONE-Mobile-POP.woff) format('woff');font-display: fallback}
@font-face{font-weight:700;font-family:'Maplestory';src:url(../font/Maplestory.woff) format('woff');font-display: fallback}

/* reset with bootstrap */
body{-webkit-text-size-adjust:none;text-align: justify}
body,input,textarea,select,button,table{font-weight: 700;font-size: 25px;line-height: 1.3;font-family: 'NotoSans',sans-serif;color: #000}
a,input,textarea,select,button{text-decoration:none;color:#231f20;outline:0 !important;-webkit-transition:color .4s,border-color .4s,background .4s,box-shadow .4s,opacity .4s;transition:color .4s,border-color .4s,background .4s,box-shadow .4s,opacity .4s}
a:hover,a:focus,a:active{color:inherit;text-decoration: none;}
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{margin:0;padding:0}
input{background: none; border: 0;box-shadow: none;}
input::-ms-clear,input::-ms-reveal{display:none;width:0;height:0;}
input::-webkit-search-decoration,input::-webkit-search-cancel-button,input::-webkit-search-results-button,input::-webkit-search-results-decoration{display:none;}
li{list-style:none}
label{cursor:pointer}
table{width:100%;border-collapse:collapse}
a,button{cursor:pointer}
button{border:0;box-shadow:none;background:none}
i{font-style:normal;}
img{max-width:100%}
h1, h2, h3, h4, h5, h6{font-weight: 700 !important;font-size: inherit;line-height: inherit;}

/* Icon */
.icon{display:inline-block;overflow:hidden;margin:0;padding:0;border:0;background-color:transparent;background-position:50% 50%;background-repeat:no-repeat;background-size:auto 100%;font-size:0;line-height:0;text-decoration:none;vertical-align:middle;text-indent:-1000em}

/* Modal */
.modal{position: absolute;background: rgba(0,0,0,.8)}
.modal-dialog{width: calc(100% - 60px);max-width: none}
.modal-content{background-color: #fff;border-radius: 46px;border: 0;margin-top: 15px}

/* main */
.bg{position: absolute;left: 0;width: 100%;height: 100%;background: #00b7b3;}
body{background: #7fdbd9 }
#wrap{position: absolute;top: 0px;width: 1920px;height: 1080px;overflow: hidden;transform-origin: 0 0;background: #00b7b3}
main{position: absolute;top: 0;left: 0;right: 0;bottom: 0;}
h1{position: absolute;top: 45px;left: 62px}

.hd-side{position: absolute;display: flex;align-items: center;top: 0;right: 50px;width: 750px;height: 80px;box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.08);border-radius: 0 0 20px 20px;background: #d9e0a5;justify-content: center}
.hd-pages{display: flex;align-items: center;font-size: 28px;color: #805b37}
.hd-pages+.hd-pages{margin-left: 30px;}
.hd-pages .tit{font-size: 25px;font-family:'OMPOP';text-align: center;line-height: 1.2;margin-right: 12px;}
.hd-pages .tit small{display: block;font-size: 18px;color: #b18f5e}
.hd-pages .input-group{width: 145px;height: 48px;display: flex;border-radius: 10px;background: #fff;}
.hd-pages input{width: 82px;height: 100%;text-align: center}
.btn-go{width: 63px;height: 48px;color: #fff;text-shadow: 0px 2px 0px rgba(0, 0, 0, 0.08);font-size: 22px;border-radius: 10px;background: url(../img/btn-go.png) no-repeat 0 0/100% 100%;font-weight: 700}
.hd-side .split{width: 3px;height: 40px;background: rgba(0,0,0,.1);margin: 0 25px}
/* .btn-archive{background: url(../img/archive.png) no-repeat 0 0/auto 100%;font-size: 28px;color: #805b37;text-align: left;padding-left: 60px;height: 42px;} */
.btn-archive{background: url(../img/btn-archive.png) no-repeat 0 0/auto 100%;font-size: 28px;color: #805b37;text-align: left;padding-left: 60px;height: 42px;}

.ft{position: absolute;display: flex;left: 60px;right: 60px;bottom: 41px;align-items: center}
.ft>button{box-shadow: 0px 4px 0px 0px rgba(0, 112, 231, 0.004), 0px 5px 10px 0px rgba(0, 0, 0, 0.3);margin-right: 15px;border-radius: 40px}
.ft>button>img{height: 79px}
.ft-side{display: flex;height: 60px;width: 437px;background: url(../img/ft-side.png) no-repeat 0 0/100% auto;margin-left: auto;padding-left: 2px;box-shadow: 0px 8px 8px 0px rgba(0, 0, 0, 0.1);border-radius: 30px;}
.ft-side button,.ft-side a{display:flex;align-items: center;height: 100%;font-size: 20px;color: #222;letter-spacing: -.05em;margin-left: 28px;padding-left: 34px;white-space: nowrap}

.navi-main{position: absolute;left: 60px;top: 135px;height: 800px;display: flex;flex-direction: column;justify-content: center}
.navi-sub,.pop{position: absolute;background: #01261a;border-radius: 60px;border: 3px solid #01261a;box-shadow: 8px 13px 10px rgba(0, 0, 0, 0.15), inset 0px 6px 4px 0px rgba(255, 255, 255, 0.2);padding: 12px;display: none}
.navi-sub{width: 1125px;height: 800px;top: 135px;right: 60px}
.icon-close{position: absolute;width: 58px;height: 58px;background-image: url(../img/icon-close.png);box-shadow: 0 6px 0 0 rgba(108, 63, 41, 0.2);top: -10px;right: -10px;border-radius: 100%;z-index: 5}
.navi-sub-inner{width: 100%;height: 100%;background: #fff;border-radius: 48px;overflow-y: auto}
.grid{display: flex;align-items: center; position: relative; width: 100%;padding-right: 25px}
.grid .tit{flex: 1;min-width: 0;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
.grid>div{flex-shrink: 0;flex-basis: 150px;text-align: center;margin-left: 10px}
.part-hd .tit+div, .btn-ppt{flex-basis: 130px !important}
.part-hd{padding: 20px 25px 20px 0}
.part-hd .tit{font-family:'OMPOP',sans-serif;font-size: 35px;color: #01261a}
.part-hd span{display: inline-block;font-size: 20px;color: #86baa7;padding: 0 19px;position: relative;line-height: 18px;min-width: 80px;}
.part-hd span:before, .part-hd span:after{content: '';position: absolute;width: 9px;height: 9px;border-radius: 100%;background: #a9c7bd;top: 5px}
.part-hd span:before{left: 0;}
.part-hd span:after{right: 0;}


.navi-sub-inner .mCSB_container>ol{counter-reset: depth1;margin: 30px 50px 40px 25px}
.part-hd .tit{counter-increment: depth1}
.part-list{counter-reset: depth2}
.part-list .tit{line-height: 45px}
.part-list .grid:not(.dot) .tit{counter-increment: depth2;}
.part-list .grid:not(.dot) .tit:before{content: counter(depth2);display: inline-block;vertical-align: middle;width: 45px;height: 45px;background: #0094a6;border-radius: 100%;text-align: center;line-height: 45px;margin: -5px 15px 0 0;font-size: 28px;color: #fff}
.part-list .grid{height: 70px;background: #fff;margin-bottom: 10px;padding-left: 50px;font-size: 25px;letter-spacing: -.025em;font-weight: 500;border-radius: 20px}
.part-list .grid.dot:not(.dot2){background: #f2f2f2;color: #01261a;position: relative;padding-left: 60px;}
.part-list .grid.dot:not(.dot2):before{content: '';position: absolute;width: 20px;height: 20px;border-radius: 100%;background: #0094a6;left: 25px;top: 50%;margin-top: -10px;box-shadow: inset -2px -3.464px 4px 0px #2d9086,inset 0px 6px 5px 0px rgba(255, 255, 255, 0.25);}
.part-list [role=button]{height: 50px;display: flex;align-items: center;justify-content: center;font-size: 20px;font-weight: 700;border-radius: 25px;}
.btn-ppt{background: #0094a6;color: #fff;box-shadow: inset 0px 3px 4px 0px #00a4bd, inset -4px -3px 4px 0px #006e84}
.btn-page{background: linear-gradient(#fff, #d0cfd3);color: #666;padding: 2px}
.btn-page span{width: 100%;height: 100%;border-radius: 25px;background: #f4f7ff;display: flex;align-items: center;justify-content: center;box-shadow: inset 0px 3px 4px 0px #fff, inset -4px -3px 4px 0px #e8e8f0}
.btn-page:not(.other):last-child{margin-right: 160px}

.part-list .grid:hover{background: #0094a6 !important;color: #fff;box-shadow: 3px 2px 3px 0px rgba(0, 0, 0, 0.15),inset 0px 8px 5px 0px #00aec3}
.part-list .grid:hover [role=button]{background: #ffea8e;border-color: transparent;box-shadow: inset 0px 3px 4px 0px #fffdf2, inset -4px -3px 4px 0px #ffdc43;color: #01261a}
.part-list .grid:hover [role=button]>span{background: none;box-shadow: none}
.part-list .grid.dot:hover:before{background: #0094a6}
.part-list .grid:not(.dot):hover .tit:before{background: #fff;color: #0094a6}

.navi-main{counter-reset: lesson;padding-top: 10px}
.navi-main>[role=button]{counter-increment: lesson;display: flex;width: 570px;height: 125px;background: #fff;font-family:'OMPOP',sans-serif;font-size: 45px;line-height: 50px;color: #01261a;word-break: keep-all;padding: 0 40px;align-items: center;text-align: left;border-radius: 125px;box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.15), inset 0px -8px 5px 0px #e8e8e8;position: relative;}
.navi-main>[role=button]+div{margin-top: 20px}
.navi-main>[role=button]:before{content: counter(lesson)'.';margin-right: 25px}
.navi-main>[role=button]:hover, .navi-main>.active{background: #0094a6;color: #fff;box-shadow: 0px 8px 5px 0px rgba(0, 0, 0, 0.3), inset 0px -8px 5px 0px #0094a6,inset 0px 8px 5px 0px #0998a9;text-shadow: 0px 4px 0px #00667f;border: 2px solid #006570;}
.navi-main>.active{width: 600px;height: 125px}
.navi-main>.active:after{content: '';position: absolute;width: 116px;height: 126px;background: url(../img/ch.png) no-repeat 0 0/100% auto;bottom: 10px;right: 20px}

/* 미니게임 */
.mCSB_scrollTools{top: 45px;bottom: 35px;width: 14px;right: 20px}
.mCSB_scrollTools .mCSB_draggerRail{width: 4px;background: #e3e3e3}
.mCSB_scrollTools .mCSB_dragger{height: 75px !important}
.mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{width: 100%;background: #c1c1c1 !important;box-shadow: inset -1px -2px 4px 0px rgba(142, 165, 204, 0.5),inset 0px 2px 1px 0px rgba(255, 255, 255, 0.12) !important;}

.pop{left: 45px;bottom: 35px;right: 45px;height: 855px}
.pop-inner{width: 100%;height: 100%;border-radius: 48px;background: #faf2e9;display: flex;overflow: hidden}
.pop-inner>strong{position: absolute;left: 50%;transform: translateX(-50%);top: -3px}
.pop-inner .navi-main{position: static;padding: 25px 45px 0;height: auto;flex-basis: 665px;max-width: 665px;background: #f8eada}
.navi-pop{flex: 1;padding:220px 0 40px}
.navi-pop-inner{height: 100%}
.navi-pop-inner .mCSB_container>ol{counter-reset: depth1;margin: 0 45px 0 80px}
.navi-pop-inner .grid:not(.part-hd){position: relative; background: #f6dcc2;border-radius: 35px;padding: 0 25px;border: 1px solid transparent}
.navi-pop-inner .part-list .tit{text-align: left}
.navi-pop-inner .mCSB_scrollTools{top: 0;bottom: 0;right: 20px}
.pop h4{position: absolute;top:130px;left:750px;font-family:'OMPOP',sans-serif;font-size:55px;color: #01261a;}
.pop h4:before{content: '';position: absolute;left:110%;top:-30px;width:145px;height:185px;background:url(../img/game.png) no-repeat 0 0 / 100% auto;}
.btn-pop{position: absolute;top:100px;right:50px;}

#pop2 .navi-sub-tab [data-page-game]:last-child{display: none;}

/* 가상실험실 */
.pop-vlab strong{top:-48px}
.pop-vlab:before{content: '';position: absolute;left:50px;top:50px;width:115px;height:102px;background:url(../img/vlab.png) no-repeat 0 0 / 100% auto;}
.vlab-list{ display: flex; justify-content: center;width: 100%; margin:160px 0 60px;}
.vlab-list li{position: relative; width:360px; overflow: hidden; margin:35px;border:4px solid #6e412b;border-radius:30px;background: #fff9db;box-shadow: 0 8px 20px rgba(0,0,0,.1),inset 0px -5px 10px 0px rgb(255, 217, 128,5); text-align: center; cursor: pointer;transition: .3s;word-break: keep-all;}
.vlab-list strong{display:flex; align-items: center; justify-content: center;width: 100%; height:170px; padding:30px 0; box-shadow:0 4px 4px rgba(0,0,0,.2), inset 0 0 10px rgba(0,0,0,.2); background: #ffca43; font-family:'OMPOP',sans-serif;font-size:45px;color: #6e412b;transition: .3s;}
.vlab-list p{display:flex; align-items: center; justify-content: center;width: 100%; height:360px; padding:10px; font-size:45px;}
.vlab-list li:hover{ border-color:#0082ff;box-shadow: 0 8px 20px rgba(0,0,0,.1),inset 0px -5px 10px 0px rgba(0, 179, 255,.3); background: #fff;transform: translate(0,-10px);}
.vlab-list li:hover strong{background:#00b1ff;color: #fff;}

.vlab-list li button{counter-increment: lesson;position: relative;display: flex;width: 100%;justify-content: center;flex:1; font-size: 30px;line-height: 1.2;word-break: keep-all;align-items: center;text-align: center;}
.vlab-list li button:not(:first-child):after{content: '';display: block; position: absolute;left: 50%;transform: translateX(-50%);top: 0;width: 90%;height: 5px;background-image: url(../img/line.png);background-size: contain;background-repeat: no-repeat;background-position: center;}

.alert-text{position: absolute;left: 490px;bottom: 52px;font-size: 20px;color:  #fff;text-shadow: -1px 0px #0487e6, 0px 1px #0487e6, 1px 0px #0487e6, 0px -1px #0487e6;}
.hd-side .alert-text{bottom: -92px;left: 425px;}
.hd-side .alert-text .text-org{color: #ff5906;text-shadow: -1px 0px #fff, 0px 1px #fff, 1px 0px #fff, 0px -1px #fff;}

.bubble{position: absolute;left: 250px;bottom: -140px;;display: flex;align-items: center;justify-content: center;background: #fff;border-radius: 20px;font-size: 18px;text-align: center;color: #4f4f55;padding: 20px 20px 15px;filter: drop-shadow(2px 2px 0 #c8c8d5) drop-shadow(2px -2px 0 #c8c8d5) drop-shadow(-2px -2px 0 #c8c8d5) drop-shadow(-2px 2px 0 #c8c8d5);font-weight: 700;}
.bubble .before{position: absolute;top: -20%;right:15%;width: 2em;height: 1.4em;transform: scale(-1);background: url(../img/bubble-tail.png) no-repeat 0 0/auto 100%}
.bubble-cont{line-height: 1.4}

/* 학습 결손 보조 자료 */
#pop3 .navi-main>[role=button] {height: 80px;}
#pop3 .navi-main>.active:after{width: 100px;height: 110px;}
#pop3 .bubble-txt{position: absolute;right: 285px;bottom: 146px;}
#pop3 .pop-inner .navi-main{padding: 85px 45px 0;}

.navi-main.static>[role=button]{padding-left: 60px}
.navi-main.static>[role=button]:before{display: none}
.pop3-ch{position: relative;order: -1;margin: -110px 0 20px !important}
.pop3-ch>p{position: absolute;font-size: 30px;color: #003072;top: 26px;left: 181px;letter-spacing: -.03em}
.pdfbox{display: flex;width: 1022px;height: 485px;background: url(../img/box.png) no-repeat 0 0/100% auto;align-items: center;justify-content: center;margin: 0 auto;position: relative;column-gap: 50px}
.pdfbox::after{content: '';position: absolute;width: 525px;height: 235px;background: url(../img/box-ch_bubble.png) no-repeat 0 0/100% auto;bottom: -80px;right: -35px}
.pdfbox img{display: block;margin: 0 auto 25px}
.pdfbox>div{text-align: center;font-size: 35px;width: 210px;padding: 45px 0;border-radius: 40px}
.pdfbox>div:hover{background: #00c8fa;box-shadow: 1px 3px 1px 0px rgba(0, 0, 0, 0.15),inset 0px -8px 5px 0px rgba(0, 0, 0, 0.06),inset 0px 8px 5px 0px rgba(255, 255, 255, 0.2)}