@charset "UTF-8";


* {padding:0; margin:0; border:0; line-height:1;}
body {height:100vh; overflow: hidden;}



/*
    ****************** 공통 레이아웃 *****************
*/
.contentWrapper {position:absolute; top:0; left:0; width:1710px; height:960px; transform-origin: top left; background-color:#ffffff;}

.handCursor {cursor:pointer;}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {-webkit-appearance: none; margin: 0;}

textarea:focus {
    outline: none;
}
button:focus {
    outline: none;
}
input:focus {
    outline: none;
}
select:focus {
    outline: none;
}



/*
    ****************** 요소 공통 레이아웃 *****************
*/

/*버튼*/
.shadowButton {
    display:flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 30px;
    font-size: 16px;
    color: #ffffff;
    font-family: Roboto;
    font-weight: 700;
    border-radius: 30px;
    box-shadow: 0 2px #363b79;
    margin-bottom:2px;
    margin-right:4px;
    padding-top:2px;
    box-sizing: border-box;
    background-color: #5c63b1;
    cursor:pointer;
}
.shadowButton:hover {background-color: #787fd2;}

/*
    ********************************************************
*/

/*
    *** 상단 바
*/

.topBar {height:68px; border-bottom:solid 1px #307264; box-sizing: border-box; background-color:#40a994;}
.topBar .innerWrap {display:flex; justify-content:space-between; align-items: center; width:1245px; height:100%; margin:0 auto;}

.topBar .btnProgress {
    display:flex;
    justify-content: center;
    align-items: center;
    width: 186px;
    height: 46px;
    font-size: 18px;
    color: #ffffff;
    font-family: NotoSans;
    font-weight: 500;
    border-radius: 25px;
    border:solid 3px #f8dcbe;
    box-shadow: 4px 4px 4px rgba(0,0,0,0.15), 3px 3px 0 rgba(0,0,0,0.1) inset;
    background-color:#647d5b;
    cursor:pointer;
}
.topBar .btnProgress .icon {margin-right:10px;}

.topBar .topButtonWrap {position:relative; display:flex; justify-content: center; align-items: center; height:100%; }
.topBar .topButtonWrap .topButton {position:relative; cursor:pointer;}
.topBar .topButtonWrap .topButton .balloon {
    display: none;
    position: absolute;
    left: 50%;
    bottom: -46px;
    margin-left: -55px;
    width:110px;
    height:46px;
    font-size:14px;
    color:#555555;
    font-family: KoPubDotum;
    font-weight:700;
    text-align:center;
    padding-top:21px;
    box-sizing: border-box;
    z-index: 10;
    background-image: url("../images/gnbPopBg.png");
}
.topBar .topButtonWrap .topButton:hover .balloon {display:block;}
.topBar .topButtonWrap .vBar {width:1px; height:24px; margin:0 20px; background-color:rgba(255,255,255,0.2);}
.topBar .topButtonWrap .updateBalloon {
    position: absolute;
    top: 70px;
    left: 345px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 150px;
    height: 60px;
    font-size: 16px;
    color: #ffffff;
    font-family: NotoSans;
    font-weight: 300;
    border-radius:5px;
    z-index: 11;
    background-color: #f3353c;
}
.topBar .topButtonWrap .updateBalloon > div {line-height:1.3;}
.topBar .topButtonWrap .updateBalloon span {color:#fff100; font-weight:600;}
.topBar .topButtonWrap .updateBalloon .tip {position:absolute; left:50%; transform: translateX(-50%); top:-16px; cursor:pointer;}
.topBar .topButtonWrap .updateBalloon .btnCloseUpdate {position:absolute; top:-12px; right:-12px; cursor:pointer;}

/*페이지 이동*/
.pageMove {display:flex; align-items:center; justify-content:space-between; width:300px; height:40px; border-radius:30px; margin-left:30px; background-color:#ffffff;}
.pageMove .text1 {font-size:16px; color:#666666; font-family:NotoSans; font-weight:400; margin-left:17px;}
.pageMove .pageNumInput {
    width: 70px;
    height: 32px;
    border-radius: 25px;
    border: solid 1px #c8c8c8;
    font-size: 18px;
    color: #666666;
    font-family: Roboto;
    text-align:center;
    font-weight:500;
    background-color:#ffffff;
}
.pageMove .text2 {font-size:16px; color:#a97a3d; font-family:Roboto; font-weight:500;}


/*
    *** 비주얼 영역
*/
.visualArea {position:relative; height:892px; background-image:url("../images/pageBg.png"); background-repeat: no-repeat; background-size:100% 100%;}
.visualArea .visualBg {position:absolute; left:0; bottom:0; pointer-events: none;}
.visualArea .titleArea {position:absolute; top:23px; left:231px; width:953px; height:153px; background-image:url("../images/lessonTitleBg.png");}
.visualArea .titleArea .title {display:flex; justify-content:flex-start; align-items:center; width:805px; height:100%; margin-left:145px; /*background-color:rgba(0,0,0,0.2)*/}
.visualArea .titleArea .title .titleImg {display:none; margin-left:80px;}
.visualArea .titleArea .title .titleImg.title1 {display:block;}

.visualArea .chapterArea {position:absolute; top:37px; right:232px; width:270px; height:775px; padding-top:26px; box-sizing: border-box; background-image:url("../images/chapBg.png");}
.visualArea .chapterArea .nameCell {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 220px;
    height: 60px;
    font-size:20px;
    color:#333333;
    font-family:VisangHT;
    font-weight:700;
    margin:0 auto;
    box-sizing: border-box;
    border-bottom: solid 1px #e5e5e5;
    cursor:pointer;
    /*text-shadow:4px 4px 0 rgba(0,0,0,0.06);*/
}
.visualArea .chapterArea .nameCell.noBorder {border-bottom:0;}
.visualArea .chapterArea .nameCell.gray {width:260px; margin-left:4px; background-color:#f8f8f8;}
.visualArea .chapterArea .dot {width:4px; height:4px; border-radius:50%; margin:0 auto; background-color:#dfdfdf;}

.visualArea .chapterArea .nameCell.color1 span {color:#6f9442;}
.visualArea .chapterArea .nameCell.color1:hover {color:#6f9442;}
.visualArea .chapterArea .nameCell.color2 span {color:#4ab747;}
.visualArea .chapterArea .nameCell.color2:hover {color:#4ab747;}
.visualArea .chapterArea .nameCell.color3 span {color:#d13a95;}
.visualArea .chapterArea .nameCell.color3:hover {color:#d13a95;}
.visualArea .chapterArea .nameCell.color4 span {color:#039bdb;}
.visualArea .chapterArea .nameCell.color4:hover {color:#039bdb;}
.visualArea .chapterArea .nameCell.color5 span {color:#f36f23;}
.visualArea .chapterArea .nameCell.color5:hover {color:#f36f23;}
.visualArea .chapterArea .nameCell.color6 span {color:#6f59a5;}
.visualArea .chapterArea .nameCell.color6:hover {color:#6f59a5;}
.visualArea .chapterArea .nameCell.color7 span {color:#105080;}
.visualArea .chapterArea .nameCell.color7:hover {color:#105080;}
.visualArea .chapterArea .nameCell.color8 span {color:#952e3d;}
.visualArea .chapterArea .nameCell.color8:hover {color:#952e3d;}

.visualArea .chapterArea .group {width:260px; margin-left:4px; background-color:#f8f8f8;}

/*캐릭터 버튼*/
.visualArea .btnLesson {position:absolute; cursor:pointer;}
.visualArea .btnLesson .off {display:block;}
.visualArea .btnLesson .on {display:none;}
.visualArea .btnLesson.on .off {display:none;}
.visualArea .btnLesson.on .on {display:block;}
.visualArea .btnLesson:hover .off {display:none;}
.visualArea .btnLesson:hover .on {display:block;}

.visualArea .btnLesson .balloon {position:absolute;}

.visualArea .btnLesson.lesson1 {top:548px; left:492px;}
.visualArea .btnLesson.lesson1 .balloon {top:-60px; left:60px;}
.visualArea .btnLesson.lesson2 {top:293px; left:349px;}
.visualArea .btnLesson.lesson2 .balloon {top:-70px; left:-70px;}
.visualArea .btnLesson.lesson3 {top:226px; left:505px;}
.visualArea .btnLesson.lesson3 .balloon {top:-10px; left:-20px;}
.visualArea .btnLesson.lesson4 {top:139px; left:654px;}
.visualArea .btnLesson.lesson4 .balloon {top:10px; left:160px;}
.visualArea .btnLesson.lesson5 {top:255px; left:828px;}
.visualArea .btnLesson.lesson5 .balloon {top:-20px; left:70px;}
.visualArea .btnLesson.lesson6 {top:260px; left:1008px;}
.visualArea .btnLesson.lesson6 .balloon {top:-30px; left:100px;}
.visualArea .btnLesson.lesson7 {top:391px; left:951px;}
.visualArea .btnLesson.lesson7 .balloon {top:-10px; left:70px;}
.visualArea .btnLesson.lesson8 {top:461px; left:761px;}
.visualArea .btnLesson.lesson8 .balloon {top:-10px; left:-70px;}
.visualArea .btnLesson.lessonS1 {top:635px; left:997px;}
.visualArea .btnLesson.lessonS1 .balloon {top:-70px; left:80px;}


/*기타 사물*/
.visualArea .objects {position:absolute;}
.visualArea .bag {top:582px; left:721px;}
.visualArea .pot {top:328px; left:819px;}

/*
    *************************************** 메세지 창, 버튼 공통 스타일 ************************************
*/
/*팝업창 - 스타일2*/
.commonWin2 {
    position: absolute;
    top: 120px;
    left: 500px;
    width: 450px;
    border-radius: 5px;
    box-sizing: border-box;
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
    border: solid 1px #d9d9d9; /*흰비지라인*/
    border-top: solid 2px #56b69f;  /*color variation부분*/
    background-color: #ffffff;
    z-index: 200;
}

.commonWin2 .winHead {
    position: relative;
    height: 51px;
    background-color: #fff3cb;  /*color variation부분*/
}

.commonWin2 .winHead .btnCloseWin {
    position: absolute;
    right: 10px;
    top: 9px;
    cursor: pointer;
}

.commonWin2 .winFoot {
    position: relative;
    height: 51px;
    background-color: #fff3cb;  /*color variation부분*/
}

/*버튼 스타일*/
.flatButton {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 115px;
    height: 40px;
    font-size: 18px;
    font-family: NotoSans;
    font-weight: 500;
    color: #ffffff;
    border-radius: 25px;
    cursor: pointer;
    background-color: #56b69f;  /*color variation부분*/
}

.flatButton.gray {
    background-color: #a9a9a9;
}

/*
    ****************************************************************************************************
*/




/*메세지 창 (alert, confirm 공통사용)*/
.messageWin {
    width: 330px;
    top: 50%;
    left: 50%;
    transform: translateY(-50%);
    margin-left: -165px;
}

.messageWin .winBody {
    padding: 15px 0;
}

.messageWin .winBody .message {
    font-size: 18px;
    color: #444444;
    font-family:NotoSans;
    font-weight: 700;
    text-align: center;
    padding: 15px;
    line-height: 1.2;
}

.messageWin .winBody .buttonArea {
    display: flex;
    justify-content: center;
}

.messageWin .winBody .buttonArea .flatButton {
    margin: 0 5px;
}