@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;}
[role=button]{outline:0 !important}
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-vod{width: 100%;height: 100%;}
#wrap{position: absolute;top: 0px;width: 1920px;height: 1080px;overflow: hidden;transform-origin: 0 0;}
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: 500px;height: 80px;box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.08);border-radius: 0 0 20px 20px;background: #ffebb1;justify-content: center}
.hd-pages{display: flex;align-items: center;font-size: 28px;color: #805b37}
.hd-pages .tit{font-size: 28px;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;margin-left: 10px}
.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: 25px;border-radius: 40px}
.ft>button>img{height: 80px}
.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: #253830;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: #253830;border-radius: 60px;border:none;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}
.icon-close2{background-image: url(../img/icon-close2.png)}
.navi-sub-inner{width: 100%;height: 100%;background: #fff;border-radius: 48px;overflow-y: auto}
.grid{display: flex;align-items: center;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: 13px}
.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: #253830}
.part-hd span{display: inline-block;font-size: 20px;color: #5d8059;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: #b1caad;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-hd .tit:before{content: counter(depth1)'.';margin-right: 10px}
.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: #50b842;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{background: #f2f2f2;color: #253830;position: relative;padding-left: 60px;}
.part-list .grid.dot:before{content: '';position: absolute;width: 20px;height: 20px;border-radius: 100%;background: #50b842;left: 25px;top: 50%;margin-top: -10px;}
.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: #50b842;color: #fff;border: 2px solid #50b842}
.btn-page{background: #fff;border: 2px solid #dae3d9;color: #666}

.part-list .grid:hover{background: #50b842 !important;color: #fff;box-shadow: 3px 2px 3px 0px rgba(0, 0, 0, 0.15)}
.part-list .grid:hover [role=button]{background: #ffea8e;border-color: #32af21;color: #253830}
.part-list .grid:hover [role=button]>span{background: none;box-shadow: none}
.part-list .grid:not(.dot):hover .tit:before{background: #fff;color: #50b842}
.part-list .grid.dot:hover:before{background: #ffea8e}

.navi-main{counter-reset: lesson;padding-top: 50px}
.navi-main>[role=button]{counter-increment: lesson;display: flex;width: 555px;height: 175px;background: rgba(255,255,255,.9);border: 2px solid #fff;font-family:'OMPOP',sans-serif;font-size: 40px;line-height: 50px;color: #253830;word-break: keep-all;padding: 0 100px 0 30px;align-items: center;text-align: left;border-radius: 55px;position: relative;white-space: nowrap;}
.navi-main>[role=button]+div{margin-top: 20px}
.navi-main>[role=button]:before{content: counter(lesson);width: 71px;height: 78px;background: url(../img/tit.png) no-repeat 0 0/100% auto;text-align: center;line-height: 88px;color: #fff;font-size: 55px;flex-shrink: 0;margin-right: 25px}
.navi-main>[role=button]:hover, .navi-main>.active{background: rgba(80, 184, 66, 0.9);border-color: transparent;color: #fff;}
.navi-main>[role=button]:hover:before, .navi-main>.active:before{background-image: url(../img/tit-active.png);box-shadow: none;color: #58b74a}

.navi-main>.active{width: 630px;padding-right: 135px;box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.5)}
.navi-main>.active:after{content: '';position: absolute;width: 225px;height: 200px;background: url(../img/1.png) no-repeat 0 0/100% auto;bottom: 20px;right: 0}
.navi-main>.active:nth-child(2):after{background-image: url(../img/2.png);}
.navi-main>.active:nth-child(3):after{background-image: url(../img/3.png);}

.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: 0px}
.pop-inner .navi-main{position: static;padding: 25px 45px 0;height: auto;flex-basis: 700px;max-width: 700px;background: #f8eada}
.navi-pop{flex: 1;padding: 120px 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: 5px solid transparent}
.navi-pop-inner .part-list .tit{text-align: left}
.navi-pop-inner .grid:not(.dot):not(.part-hd) .tit:before{color: #253830}
.navi-pop-inner .grid:not(.part-hd):hover .tit{color: #253830;font-weight: 700}
.navi-pop-inner .mCSB_scrollTools{top: 0;bottom: 0;right: 20px}

/* 차시별 데이터 */
.navi-pop-inner .grid>div:last-child,
.navi-pop-inner .part-hd>div{display:none}
.navi-pop-inner .dot .tit{padding-left:58px;}
.navi-pop-inner .grid.dot:before{left:36px}
.navi-pop-inner .btn-ppt{position: absolute;top:0;left:0;right:0;height:100%; opacity:0}

/* 특별활동 */
#pop2{padding:0; background:none;}
#pop2 .pop-inner{background:rgba(244,230,211,1);border:15px solid #6e412b;}
#pop2 .pop-inner:before{content:'';position: absolute;top:0;left:0;right:0;bottom:0; /*box-shadow:inset 0px 6px 4px 0px rgba(255, 255, 255, 0.2)*/; border-radius:50px;}
#pop2 .pop-inner>strong{top:-22px}
.pop-vlab strong{top:-48px}
.pop-vlab:before,.pop-vlab:after{content: '';position: absolute;left:5px;top:50px;width:133px;height:168px;background:url(../img/vlab.png) no-repeat 0 0 / 100% auto;}
.pop-vlab:after{left:auto;top: auto;bottom:4px;right:-2px; width:196px;height:199px;background-image:url(../img/vlab2.png)}
.vlab-list{ display: flex; justify-content: center;width: 100%; margin:160px 0 60px;padding: 0 30px}
.vlab-list li{position: relative; width:450px; overflow: hidden; margin:35px 15px;border:4px solid #6e412b;border-radius:30px;background: #fff9db;box-shadow:0 8px 20px rgba(0,0,0,.1), inset 0px -5px 10px 0px rgba(0,0,0,.3); 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:240px; padding:30px 0;box-shadow:0 4px 8px rgba(0,0,0,.2),inset 0 -4px 8px rgba(0,0,0,.2), inset 0 4px 10px #ffc906; background: #ffca43; font-family:'OMPOP',sans-serif;font-size:55px;line-height: 1.1;text-shadow: 0 1px 0 #fff; color: #6e412b;transition: .3s;}
.vlab-list p{display:flex; align-items: center; justify-content: center; overflow: hidden; position: relative; width: 100%; height:260px; padding:10px; font-size:40px;}
.vlab-list p:before{ content:''; position: absolute;top:-11px;left:20px; right:20px; border-top:22px dotted #a87a4f;}
.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;box-shadow:0 4px 8px rgba(0,0,0,.2),inset 0 -4px 8px rgba(0,0,0,.2), inset 0 4px 10px #41f6ff; color: #fff;}
.vlab-list li:hover p:before{border-color: #1d89f2;}

/* .alert-text{position: absolute;left: 62px;top: 200px;font-size: 27px;color: #fff;text-shadow: -1px 0px #0487e6, 0px 1px #0487e6, 1px 0px #0487e6, 0px -1px #0487e6;} */
.alert-text{position: absolute;left: 710px;bottom: 52px;font-size: 20px;color:  #fff;text-shadow: -1px 0px #54b945, 0px 1px #54b945, 1px 0px #54b945, 0px -1px #54b945;}
.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: 5px;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}

#pop1 .navi-sub-tab{height: 665px;display: flex;flex-direction: column;justify-content: center}
#pop1 {background: transparent;padding: 0;}
#pop1 .pop-inner{border: 15px solid #6e412b;background: rgba(250, 242, 233,1);}
#pop1 .pop-inner .navi-main{background:rgba(248, 234, 218, 1)}
#pop1 .navi-pop .part-list{display: flex;flex-wrap: wrap;justify-content: center;gap: 30px;}
#pop1 .navi-pop .part-list li{width: 30%;height: 350px;}
#pop1 .navi-pop .part-list .tit{display: flex;flex-direction: column;align-items: center;height: 100%;font-size: 35px;word-break: keep-all;white-space:unset;text-align: center;}
#pop1.pop:after{content: '';position: absolute;left:auto;top: auto;bottom:4px;right:-2px; width:196px;height:199px;background:url(../img/vlab2.png) no-repeat 0 0 / 100% auto}
#pop1 .part-list .grid{background: #A3D59C !important}
#pop1 .part-list .grid:hover{border: 5px solid #253830;background: rgba(69, 158, 57, 0.9) !important}
#pop1 .part-list .grid:hover .tit:before{color: #fff;background-color: #43753d !important;}
#pop1 .part-list .grid:not(.dot) .tit:before{margin: 50px 0;color: #fff;background-color:#60BD51;}