@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 */
body{background: #f3f3f3;}
#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: 35px;right: 65px}
.hd-pages{display: flex;align-items: center;height: 75px;background: rgba(255, 232, 163, 0.851);font-size: 29px;color: #805b37;padding: 0 15px;border-radius: 20px;margin-right: 7px;justify-content: center;width: 535px;box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.15);}

.hd-pages .input-group{width: 145px;height: 48px;display: flex;border-radius: 10px;background: #fff;margin-left: 10px}
.hd-pages .input-group:nth-of-type(1){margin-right: 20px}
.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}

.btn-archive{width: 185px;height: 75px;background: rgba(106, 72, 38, 0.8);font-size: 28px;color: #fff;text-align: left;display: inline-flex;align-items: center;justify-content: center;border-radius: 20px;box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);}
.btn-archive:before{content: '';width: 32px;height: 31px;background: url(../img/archive.png) no-repeat 0 0/100% auto;margin-right: 15px}
.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: #3e2137;border-radius: 60px;border: 3px solid #3e2137;/*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;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 span{display: inline-block;font-size: 20px;color: #c18d9d;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: #dfc0cc;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: #ed84be;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: #3e2137;position: relative;padding-left: 60px;}
.part-list .grid.dot:before{content: '';position: absolute;width: 20px;height: 20px;border-radius: 100%;background: #ed84be;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: #ed84be;color: #fff;border: 2px solid #ed84be}
.btn-page{background: #fff;border: 2px solid #dae3d9;color: #666}
.btn-page:not(.other):last-child{margin-right: 160px}

.part-list .grid:hover{background: #ed84be !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: #ea75b3;color: #222}
.part-list .grid.dot:hover:before{background: #ffea8e}
.part-list .grid:not(.dot):hover .tit:before{background: #fff;color: #ed84be}

.navi-main{counter-reset: lesson;padding-top: 65px}
.navi-main>[role=button]{counter-increment: lesson;display: flex;width: 570px;height: 90px;background: rgba(255,255,255,.9);border: 2px solid #fff;font-family:'OMPOP',sans-serif;font-size: 40px;line-height: 50px;color: #3e2137;word-break: keep-all;padding: 0 20px;align-items: center;text-align: left;border-radius: 125px;position: relative}
.navi-main>[role=button]+div{margin-top: 20px}
.navi-main>[role=button]:before{content: counter(lesson);width: 70px;height: 70px;line-height: 70px;text-align: center;margin-right: 20px;color: #fff;text-shadow: 0px 3px 1px rgba(0, 0, 0, 0.2);border-radius: 100%;box-shadow: inset -5px -9px 0px 0px rgba(0, 0, 0, 0.05);background: #ee8bc1;border: 2px solid #d780af;border-radius: 100%;}
.navi-main>[role=button]:hover, .navi-main>.active{background: rgba(237, 132, 190, 0.9);border-color: transparent;color: #fff;text-shadow: 0px 4px 0px #bb729a}
.navi-main>.active{width: 610px;height: 90px;box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.5);}
.navi-main>[role=button]:hover:before, .navi-main>.active:before{background: #fff;text-shadow: none;color: #ed84be;border-color: #fff;box-shadow: none}
.navi-main>.active:after{content: '';position: absolute;width: 81px;height: 95px;background: url(../img/ch.png) no-repeat 0 0/100% auto;bottom: 10px;right: 10px}

.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: 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: 1px solid transparent}
.navi-pop-inner .part-list .tit{text-align: left}
.navi-pop-inner .grid:not(.dot):not(.part-hd) .tit:before{ background-color: #d9b08b; background-image: url(../img/bullet-pop.png);color: #3e2137}
.navi-pop-inner .grid:not(.part-hd):hover{border:3px solid #3e2137;background: #ffe4a4;/*box-shadow: 0px 5px 0px 0px rgba(0, 0, 0, 0.08),inset 0px -5px 2px 0px #ffd980,inset 0px 5px 2px 0px #fff7b2*/}
.navi-pop-inner .grid:not(.part-hd):hover .tit{color: #3e2137;font-weight: 700}
.navi-pop-inner .grid:not(.dot):not(.part-hd):hover .tit:before{background-color: #3e2137;background-image: url(../img/bullet-pop-on.png);color: #fff}
.navi-pop-inner .mCSB_scrollTools{top: 0;bottom: 0;right: 20px}

.alert-text{position: absolute;left: 340px;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: 230px;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}