@charset "utf-8";

@import 'reset.css';
@import 'normalize.css';
@import 'font.css';

body { width: 100%; height: 100%;  }

#wrap { width: 1280px; height: 720px; position: relative; top: 0; left: 0; overflow: hidden; background-color: #3494ff;}

/* topArea */ 
.topArea { position: relative; display: flex; justify-content: space-between;  align-items: center; width: 100%; height: calc(143px / 2); color: #fff; padding: 0 33px;}

.topArea .logBox { display: flex; align-items: center; gap: 10px; font-size: 20px; font-family: "NotoSansKR"; font-weight: bold;  }
.topArea .logBox .logoIco { display: inline-block; width: calc(51px / 2); height: calc(48px / 2); background-image: url(../static/image/main/ico_self.png); background-size: 100% 100%;}

.topArea h1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: "esamanruBold"; font-size: 26px;}

.topMenuBox {display: flex; align-items: center; gap: 30px; font-family: "ONEMobileBold"; font-size: 17px; }

.topMenuBox > button::before { content: ""; display: inline-block; background-size: 100% 100%; margin-right: 5px;}
.topMenuBox .dataBtn::before {width: calc(36px / 2); height: calc(28px / 2); background-image: url(../static/image/main/icon_data.png);}
.topMenuBox .progressBtn::before {width: calc(23px / 2); height: calc(30px / 2); vertical-align: middle; background-image: url(../static/image/main/icon_map.png);}
.Progress.on { display: block;}

.topMenuBox .classBtn::before { content: ""; display: inline-block; vertical-align: middle; background-size: 100% 100%; margin-right: 5px; width: calc(31px / 2); height: calc(27px / 2); background-image: url(../static/image/main/icon_list.png);}
.topMenuBox .classBtn::after {content: ""; display: inline-block; vertical-align: middle; width: calc(20px / 2); height: calc(12px / 2); margin-left: 5px; background-image: url(../static/image/main/ico_v.png); background-size: 100% 100%; transition: all 0.5s;  }
.topMenuBox .classBtn.on::after {transform: rotate(180deg);}

.classListWrap {position: relative; }
.myClassBox {position: absolute; top: 30px; left: 0px; width: 100%; height: 0; opacity: 0; pointer-events: none; background-color: #fff; color: #000; border-radius: 10px;  transition: height 0.5s; font-size: 12px; overflow: hidden; }
.myClassBox > button {display: inline-block; width: 100%; padding: 10px;  }

.classBtn.on + .myClassBox {height: 67px; opacity: 1; pointer-events: all; z-index: 10;}

.going_page {display: flex; align-items: center; padding: 5px; background-color: rgba(255, 255, 255, 0.5); border-radius: 10px; box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.3); font-size: 13px;}
.going_page input { width: 100px; height: 20px; border: 1px solid #fff; border-radius: 50px; outline: none; text-align: center; color: #000; }
.going_page input::placeholder {font-size: 13px; color: #ddd;}
.going_page input::-webkit-input-placeholder {font-size: 13px; color: #ddd;}
.going_page input:-ms-input-placeholder {font-size: 13px; color: #ddd;}

.going_page input:focus::placeholder {font-size: 0;}
.going_page input:focus::-webkit-input-placeholder {font-size: 0;}
.going_page input:focus:-ms-input-placeholder {font-size: 0;}


.movePage {  margin-left: 4px; cursor: pointer;}

/* bottomArea */
.bottomArea { position: absolute; bottom: 20px; left: 0;  width: 100%; text-align: center; font-family: "pretendard-medium"; font-size: 12px; }

/* content */
.content {width: 100%; height: 100%; padding-top: 42px; }

.lessonArea {position: relative; width: 100%; height: 100%; }
.lessonSlider {position: relative; left: 0; display: flex; justify-content: center; align-items: center; transition: all 0.5s;}

.lessonWrap {pointer-events: none; transition: all 1s;}

/* lessonBox 색깔 */
.lessonWrap:nth-of-type(1) .lessonBox {background-color: #ffdb00;}
.lessonWrap:nth-of-type(2) .lessonBox {background-color: #9ecd0f;}
.lessonWrap:nth-of-type(3) .lessonBox {background-color: #ff8caf; overflow: hidden;}
.lessonWrap:nth-of-type(4) .lessonBox {background-color: #995efb;}
.lessonWrap:nth-of-type(5) .lessonBox {background-color: #44c3ff;}
.lessonWrap:nth-of-type(6) .lessonBox {background-color: #3ad0ae;}
.lessonWrap:nth-of-type(7) .lessonBox {background-color: #e2862c;}

.lessonWrap:nth-of-type(3) .lessonBox::before {content: ""; position: absolute; top: 115px; left: 8px; width: 230px; height: 230px; background: url(../static/image/main/title_object.png); background-size: 800px 800px; background-repeat: no-repeat; background-position: center center; opacity: 0.4; border-radius: 100%;}
.lessonWrap:nth-of-type(3)[data-lesson-index="4"] .lessonBox::before { top: 65px; left: 88px; width: 270px; height: 270px;} 
.lessonBox { position: relative; width: calc(490px / 2); height: calc(642px / 2); box-shadow: 5px 0 20px rgba(0, 0, 0, 0.4); border-radius: 30px;  padding: 10px; transition: all 0.5s;  }
.lessonWrap[data-lesson-index="4"] .lessonBox {width: calc(948px / 2);  }


.lessonTitle { display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 5px; color: #fff; font-size: 36px; font-family: "esamanruMedium"; color: #fff; text-align: center; word-break: keep-all; }
.lessonNum { flex-shrink: 0; width: calc(139px / 2); height: calc(139px / 2);background-size: 100% 100%; line-height: 73px; z-index: 1;}

.lessonWrap:nth-of-type(1) .lessonNum {background-image: url(../static/image/main/ico_title_num_01.png);}
.lessonWrap:nth-of-type(2) .lessonNum {background-image: url(../static/image/main/ico_title_num_02.png);}
.lessonWrap:nth-of-type(3) .lessonNum {background-image: url(../static/image/main/ico_title_num_03.png);}
.lessonWrap:nth-of-type(4) .lessonNum {background-image: url(../static/image/main/ico_title_num_04.png);}
.lessonWrap:nth-of-type(5) .lessonNum {background-image: url(../static/image/main/ico_title_num_05.png);}
.lessonWrap:nth-of-type(6) .lessonNum {background-image: url(../static/image/main/ico_title_num_06.png);}
.lessonWrap:nth-of-type(7) .lessonNum {background-image: url(../static/image/main/ico_title_num_07.png);}

.lessonWrap[data-lesson-index="4"] .lessonTitle {flex-direction: row;}

.lessonImg { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); width: 220px; height: 140px;}
.lessonImg img { width: 100%; height: 100%; object-fit: contain;}

.lessonWrap[data-lesson-index="4"] .lessonImg {width: 440px; height: 200px;}

.lessonWrap[data-lesson-index="1"] {transform: rotate(-25deg) translateX(135px) translateY(215px);}
.lessonWrap[data-lesson-index="2"] {transform: rotate(-20deg) translateX(95px) translateY(115px);}
.lessonWrap[data-lesson-index="3"] {transform: rotate(-15deg) translateX(45px) translateY(35px);}
.lessonWrap[data-lesson-index="4"] {transform: rotate(0); z-index: 5; pointer-events: all; cursor: pointer; z-index: 7; }
.lessonWrap[data-lesson-index="5"] {transform: rotate(15deg) translateX(-45px) translateY(35px); z-index: 6;}
.lessonWrap[data-lesson-index="6"] {transform: rotate(20deg) translateX(-95px) translateY(115px); z-index: 5;}
.lessonWrap[data-lesson-index="7"] {transform: rotate(25deg) translateX(-135px) translateY(215px);}

/* .lessonSlider:has(.lessonWrap:nth-of-type(1)[data-lesson-index="4"]) {left: 710px;} */
/* .lessonSlider:has(.lessonWrap:nth-of-type(2)[data-lesson-index="4"]) {left: 470px;} */
/* .lessonSlider:has(.lessonWrap:nth-of-type(3)[data-lesson-index="4"]) {left: 230px;} */
/* .lessonSlider:has(.lessonWrap:nth-of-type(4)[data-lesson-index="4"]) {left: 0px;} */
/* .lessonSlider:has(.lessonWrap:nth-of-type(5)[data-lesson-index="4"]) {left: -230px;} */
/* .lessonSlider:has(.lessonWrap:nth-of-type(6)[data-lesson-index="4"]) {left: -470px;} */
/* .lessonSlider:has(.lessonWrap:nth-of-type(7)[data-lesson-index="4"]) {left: -710px;} */

.lessonSlider[data-lesson-index='1'] {left: 710px;} 
.lessonSlider[data-lesson-index='2'] {left: 470px;} 
.lessonSlider[data-lesson-index='3'] {left: 230px;} 
.lessonSlider[data-lesson-index='4'] {left: 0px;}
.lessonSlider[data-lesson-index='5'] {left: -230px;}
.lessonSlider[data-lesson-index='6'] {left: -470px;}
.lessonSlider[data-lesson-index='7'] {left: -710px;}

/* .charArea */
.charArea {position: absolute; bottom: 0; left: 0; width: 100%;}
.charArea > div { display: none;  background-size: 100% 100%; margin: 0 auto; transition: all 0.5s;}

.charArea .lesson01 { width: calc(1607px / 2); height: calc(525px / 2); background-image: url(../static/image/main/character/bg_cha01.png);}
.charArea .lesson02 { width: calc(1575px / 2); height: calc(515px / 2); background-image: url(../static/image/main/character/bg_cha02.png);}
.charArea .lesson03 { width: calc(1478px / 2); height: calc(615px / 2); background-image: url(../static/image/main/character/bg_cha03.png);}
.charArea .lesson04 { width: calc(1741px / 2); height: calc(477px / 2); background-image: url(../static/image/main/character/bg_cha04.png);}
.charArea .lesson05 { width: calc(1370px / 2); height: calc(499px / 2); background-image: url(../static/image/main/character/bg_cha05.png);}
.charArea .lesson06 { width: calc(1457px / 2); height: calc(565px / 2); background-image: url(../static/image/main/character/bg_cha06.png);}
.charArea .lesson07 { width: calc(1849px / 2); height: calc(615px / 2); background-image: url(../static/image/main/character/bg_cha07.png);}

.charArea>div.active {display: block;}


/* buttonArea */
.buttonArea { position: absolute; bottom: 100px; left: 50%; transform: translateX(-50%);  display: flex; justify-content: space-between; align-items: center; width: calc(1692px / 2); z-index: 10; }
.buttonArea button { width: calc(139px / 2); height: calc(75px / 2);  background-size: 100% 100%;}
.buttonArea button.nextBtn {background-image: url(../static/image/main/ico_arrow_next.png);}
.buttonArea button.prevBtn {background-image: url(../static/image/main/ico_arrow_prev.png);}

/* naviArea */
.naviArea { position: absolute; top: 0; left: 0;  width: 100%; height: 100%; pointer-events: none; }

.naviWrap {  width: 100%; height: 100%; display: none; position: absolute; z-index: 10; top: 0; left: 0; }
/* .naviArea:has(.naviWrap.on) { display: block;  z-index: 10; } exe 에서 작동 안함*/
.naviWrap.on {display: block; pointer-events: auto;}

.naviWrap:nth-child(1) {background-color: #ffdb00;}
.naviWrap:nth-child(2) {background-color: #9ecd0f;}
.naviWrap:nth-child(3) {background-color: #ff8caf;}
.naviWrap:nth-child(4) {background-color: #995efb;}
.naviWrap:nth-child(5) {background-color: #44c3ff;}
.naviWrap:nth-child(6) {background-color: #3ad0ae;}
.naviWrap:nth-child(7) {background-color: #e2862c;}

.naviArea .lessonTitle { justify-content: flex-start; flex-direction: row; gap: 18px; padding: 30px 0 0 48px; font-size: 55px;}
.naviArea .lessonNum {font-size: 45px; line-height: 68px;  width: calc(139px / 2.2); height: calc(139px / 2.2);}

.naviWrap:nth-child(1) .lessonNum {background-image: url(../static/image/main/ico_title_num_01.png);}
.naviWrap:nth-child(2) .lessonNum {background-image: url(../static/image/main/ico_title_num_02.png);}
.naviWrap:nth-child(3) .lessonNum {background-image: url(../static/image/main/ico_title_num_03.png);}
.naviWrap:nth-child(4) .lessonNum {background-image: url(../static/image/main/ico_title_num_04.png);}
.naviWrap:nth-child(5) .lessonNum {background-image: url(../static/image/main/ico_title_num_05.png);}
.naviWrap:nth-child(6) .lessonNum {background-image: url(../static/image/main/ico_title_num_06.png);}
.naviWrap:nth-child(7) .lessonNum {background-image: url(../static/image/main/ico_title_num_07.png);}

.closeBtn { position: absolute; top: 30px; right: 33px; display: inline-block; width: calc(36px / 2); height: calc(36px / 2); background-image: url(../static/image/main/ico_close.png); background-size: 100% 100%; }

/* naviBox */
.naviBox {display: flex; justify-content: center; width: 100%; height: 606px;  margin-top: 20px;}

.naviCharBox { position: relative; width: 500px; height: 100%;  background-size: contain; background-repeat: no-repeat;}
.naviCharBox img { position: absolute; bottom: 0; width: 100%; }

.naviListWrap {width: calc(100% - 500px ); height: 100%;  color: #fff;  }
.naviListWrap .listTitle { display: flex; justify-content: space-between; width: 740px; height: 50px; line-height: 50px; font-size: 31px; font-family: "ONE-Mobile-Title"; padding: 0 17px; cursor: pointer; border-radius: calc(47px / 2);}
.naviListWrap .listTitle.hover {background-color: #fff; color: #0079ff;}
.naviListWrap .listTitle.hover  .listButton button {opacity: 1; pointer-events: all;}

.naviListWrap .listmini li { display: flex; justify-content: space-between; width: 740px; height: calc(85px / 2); line-height: calc(85px / 2); border-radius: calc(47px / 2); padding: 0 17px; cursor: pointer; font-family: "ONE-Mobile-OTF-Regular"; font-weight: bold; }
.naviListWrap .listmini li.hover {background-color: #fff; color: #0079ff;}

.naviListWrap .listminiTitle { font-size: 27px; }
.naviListWrap .listminiTitle em {opacity: 0.5;}

.naviListWrap .listBox:not(:last-child) {margin-bottom: 10px;}
.listButton {display: flex; align-items: center; gap: 10px;}
.listButton button { position: relative; display: inline-block; opacity: 0; pointer-events: none;}
.naviListWrap .listmini li.hover .listButton button {opacity: 1; pointer-events: all;}

.listButton button::after {content: "스마트ppt"; width: max-content; height: 100%; line-height: 25px; background-color: #3494ff; padding: 5px 10px; color: #fff; font-size: 18px; border-radius: 25px; opacity: 1; vertical-align: middle; }

.listButton .ebookPageMove::after {content: "Ebook"; left: auto; right: 0;}

.lessonTitle .listButton button {opacity: 1; pointer-events: all; margin: 0;}

.naviListWrap .listmini li.pL {padding-left: 40px; font-size: 25px;}

/* 다운로드 버튼 */
.downloadBtn {
    width: 77px;
    height: 62px;
    position: absolute;
    top: 100px;
    left: 115px;

    /* 기본 상태 이미지 */
    background-image: url(../static/image/main/downloadBtn.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: transparent;

    /* 부드러운 전환을 위해 transition 추가 */
    transition: background-image 0.2s, transform 0.2s ease-in-out;
    
    /* 2.65초 속도 유지 */
    animation: floating 2.65s ease-in-out infinite;
    cursor: pointer;
}

.downloadBtn:hover {
    background-image: url(../static/image/main/downloadBtn_ov.png);
   
    transform: scale(1.5); 
    animation-play-state: paused; 
}

@keyframes floating {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-8px) scale(1); }
}

/* 다운로드 버튼 */
.updateBtn {
    width: calc(77px / 2);
    height: calc(77px / 2);
    position: absolute;
    top: 100px;
    left: 115px;
    background-image: url(../static/image/main/upadteBtn.png);
    background-size: 100% 100%;
} 

/* 2단원 폰트 사이즈 */
.naviWrap[data-lesson="2"] .listTitle,.naviWrap[data-lesson="5"] .listTitle  {font-size: 28px;}
.naviWrap[data-lesson="2"] .naviListWrap .listminiTitle {font-size: 25px;}
.naviWrap[data-lesson="2"] .naviBox,.naviWrap[data-lesson="5"] .naviBox {margin-top: 0;}
.naviWrap[data-lesson="2"] .naviBox,.naviWrap[data-lesson="5"] .naviBox {height: 626px;}
.naviWrap[data-lesson="2"] .naviListWrap .listBox:not(:last-child) {margin-bottom: 0;}