body, html {width:100%; height:100vh; overflow: hidden;}



.mainOutWrap { position: relative; width: 1920px; height: 1080px; box-sizing: border-box; overflow: hidden; color: #121212; transform-origin: top left;}




/*
    ************************************* 버튼 *************************************
*/
.btnChapAll {
    display: flex;
    justify-content: center;
    align-items: center;
    gap:12px;
    position: absolute;
    bottom: 47px;
    right: 58px;
    z-index:10;
    width:158px;
    height:70px;
    font-size:20px;
    color:#ffffff;
    font-family:PretendardB;
    border-radius: 50px;
    cursor:pointer;
    background-color: #000000;
}





/*
    ************************************* 헤더 *************************************
*/
.mainOutWrap .header { position: absolute; top:0; left:0; width: 100%; display: flex; align-items: flex-start; justify-content: space-between; z-index: 10; }

.mainOutWrap .logo {margin-top:43px; margin-left:50px;}

.mainOutWrap .navigation { display: flex; align-items: center; gap: 10px; margin-top:38px; margin-right:50px;}
.mainOutWrap .navigation .nav { display: flex; align-items: center; gap: 6px; }
.mainOutWrap .navigation .nav li {
    display: flex;
    align-items: center;
    height:50px;
    gap: 5px;
    font-size: 16px;
    font-family: 'PretendardB';
    border-radius: 50px;
    padding:8px 16px;
    border:solid 2px #ffffff;
    box-sizing: border-box;
    cursor: pointer;
    background-color: #ffffff;
    transition:all 0.3s ease-out;
}
.mainOutWrap .navigation .nav li:hover:not(.pageMoveCell) {border-color:#008e3d; background-color:#ffff29; transition:all 0.3s ease-out;}
.mainOutWrap .navigation .nav li .menuIcon1 {width: 24px; height: 24px; background: url("../images/menuIcon_1.png") no-repeat;}
.mainOutWrap .navigation .nav li .menuIcon2 {width: 24px; height: 24px; background: url("../images/menuIcon_2.png") no-repeat;}
.mainOutWrap .navigation .nav li .menuIcon3 {width: 69px; height: 39px; background: url("../images/menuIcon_3.png") no-repeat;}
.mainOutWrap .navigation .nav li .menuIcon4 {width: 24px; height: 24px; background: url("../images/menuIcon_4.png") no-repeat;}
.mainOutWrap .navigation .nav li .menuIcon5 {width: 24px; height: 24px; background: url("../images/menuIcon_5.png") no-repeat;}

.mainOutWrap .navigation .nav .pageMoveCell {display:flex; align-items: center;}
.mainOutWrap .navigation .currentNum {margin-left:15px;}
.mainOutWrap .navigation .currentNum input {
    width: 65px;
    height:30px;
    color: #000000;
    text-align: center;
    font-family: 'PretendardB';
    vertical-align: middle;
    font-size: 16px;
    border:solid 1px #b5b5b5;
    border-radius:5px;
    background-color:#f3f3f3;
}
.mainOutWrap .navigation .moveButton {
    display: flex;
    align-items: center;
    justify-content: center;
    width:57px;
    height: 36px;
    background-color: #ed3c95;
    border-radius: 20px;
    color: #ffffff;
    font-size: 14px;
    font-family: 'PretendardB';
    margin-left:15px;
    box-sizing: border-box;
    cursor: pointer;
}

.mainOutWrap .navigation .btnUpdate.new:after {content:""; width:19px; height:12px; background-image:url("../images/updateNewMark.png");}




/*
    ************************************* 페이지네이션 *************************************
*/
.pagination {position:absolute; left:50px; top:50%; transform:translateY(-50%); z-index:10; display:flex; flex-direction: column; align-items: center; gap:15px;}
.pagination .arrow {cursor:pointer;}
.pagination .dots {display:flex; flex-direction: column; align-items: center; gap:15px;}
.pagination .dots .dot {position:relative; width:12px; height:12px; border:solid 1px #000000; border-radius:50%; box-sizing: border-box; cursor:pointer;}

.pagination .lessonBalloon {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%) translateX(100%);
    font-size:14px;
    font-family:PretendardM;
    color:#ffffff;
    opacity:0;
    padding:8px 16px;
    white-space: nowrap;
    border-radius:12px;
    pointer-events: none;
    background-color:#000000;
    transition:all 0.3s ease-out;
}
.pagination .lessonBalloon:after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 0;
    height: 0;
    border: 5px solid transparent;
    border-right-color: #000000;
    border-left: 0;
    margin-top: -5px;
    margin-left: -5px;
}
.pagination .dot.on {background-color:#000000;}
.pagination .dot.on .lessonBalloon {opacity:1; right:-14px; transition:all 0.3s ease-out;}





/*
    ************************************* 스와이퍼 페이지 *************************************
*/
.pageSwiper {width:100%; height:100%;}
.pageSwiper .swiper-wrapper {width:100%; height:100%;}
.pageSwiper .swiper-wrapper .swiper-slide {width:100%; height:100%;}

.pageSwiper .lessonMenuWrap {position:absolute; top:200px; left:965px; z-index:10;}
.pageSwiper .lessonMenuWrap .lessonNum {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 169px;
    height: 60px;
    font-size: 24px;
    color: #ffffff;
    font-family: PretendardB;
    border-radius:40px;
    margin-bottom:10px;
    background-color:#000000;
}
.pageSwiper .lessonMenuWrap .lessonTitle {margin-bottom:10px;}
.pageSwiper .menuWrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(6, auto);
    grid-auto-flow: column;
    gap: 10px 55px;
}
.pageSwiper .menuWrap .cornerList {
    display:inline-block;
    font-size: 22px;
    color: #000000;
    font-family: PretendardB;
    padding: 15px;
    border-radius:10px;
    cursor:pointer;
    background-color:rgba(255,255,255,0.8);
}
.pageSwiper .menuWrap .cornerList:after {content:"›"; margin-left:10px;}
.pageSwiper .menuWrap .cornerList:hover {color:#750c46;}



.lessonMenuProject {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 15px;
    font-size:24px;
    color:#000000;
    font-family:PretendardB;
    margin-top: 20px;
    cursor:pointer;
}
.lessonMenuProject:hover {color:#750c46;}
.lessonMenuProject .projectMark {
    font-size:24px;
    color: #fff;
    font-family:PretendardEB;
    padding: 8px 25px;
    border-radius: 50px;
    background: #cb9d14;
}
.lessonMenuProject .arrow {width:32px; height:32px; background-image: url("../images/icon_arrow_right.png");}





    /*
        ************************************* 전단원 *************************************
    */
.allChapWrap {position:absolute; top:0; left:0; z-index:20; width:100%; height:100%; background-color:rgba(0,0,0,0); transition:all 0.6s ease-out; pointer-events: none;}

.allChapWrap .allChapWin {
    position: relative;
    top: 30px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap:100px;
    width: 100%;
    height: calc(100% - 30px);
    border-radius: 50px 50px 0 0;
    padding-top:120px;
    box-sizing: border-box;
    background-color: #ffffff;
    transform:translateY(100%);
    transition:all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.allChapWrap .allChapWin .btnCloseWin {position:absolute; top:50px; right:50px; z-index:10; cursor:pointer;}
.allChapWrap .allChapWin .btnCloseWin img {transition:all 0.3s ease-out; transform-origin: center center;}
.allChapWrap .allChapWin .btnCloseWin:hover img {transform:rotate(90deg); transition:all 0.3s ease-out;}

.allChapWrap .allChapWin .lessonButtons {width:210px;}
.allChapWrap .allChapWin .lessonButtons .btnLesson {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 85px;
    font-size:24px;
    color:#452a2a;
    font-family:PretendardB;
    border-radius:20px;
    margin-bottom:10px;
    cursor:pointer;
    background-color:#f5f2e9;
}
.allChapWrap .allChapWin .lessonButtons .btnLesson.on {color:#ffffff; background-color:#750c46;}


.allChapWrap .allChapWin .lessonMenu {width:900px;}
.allChapWrap .allChapWin .lessonMenu .lessonTitle {
    font-size: 54px;
    color:#000000;
    font-family:RubicBlk;
    margin-top: 30px;
    margin-bottom: 40px;
}
.allChapWrap .allChapWin .lessonMenu .menuWrap {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(6, auto);
    grid-auto-flow: column;
    gap: 20px 100px;
}
.allChapWrap .allChapWin .lessonMenu .menuWrap .cornerList {
    font-size: 22px;
    color: #000000;
    font-family: PretendardB;
    padding: 15px 0;
    margin-bottom: 15px;
    border-bottom: dashed 1px #e5e7eb;
    cursor:pointer;
}
.allChapWrap .allChapWin .lessonMenu .menuWrap .cornerList:hover {color:#750c46;}


.allChapWrap.on {background-color:rgba(0,0,0,0.8); transition:all 0.6s ease-out; pointer-events: auto;}
.allChapWrap.on .allChapWin {transform:translateY(0); transition:all 1s cubic-bezier(0.16, 1, 0.3, 1);}