@charset "utf-8";

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

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

body { width: 100%; height: 100%; background: #fff; }
#wrap { width: var(--total-width); height: var(--total-height); font-family: var(--english_sb); overflow: hidden; background: url(../images/common/bg_main.png) 0 0/100% 100% no-repeat; position: absolute; top: 0; left: 0; }
.mainContent { width: 100%; height: 100%; position: relative; }
button { cursor: pointer; background: 0 0/100% 100% no-repeat; position: relative; }

/* 네비게이션 */
.Navigation { position: absolute; top: 41px; right: 34px; display: flex; gap: 30px; }
.Navigation > div { background: 0 0/100% 100% no-repeat; }
.Navigation .activityBox { width: calc(704px / 2); height: calc(82px / 2); background-image: url(../images/common/bg_activity.png); display: flex; justify-content: flex-end; }
.Navigation .activityBox > button:nth-of-type(1).hover::before { content: ""; width: calc(246px / 2); height: calc(82px / 2); background: url(../images/common/button/af_activity1_on.png) 0 0/100% 100% no-repeat; position: absolute; bottom: 0; left: 0; }
.Navigation .activityBox > button:nth-of-type(2).hover::before,
.Navigation .activityBox > button:nth-of-type(3).hover::before { content: ""; width: calc(214px / 2); height: calc(82px / 2); background: url(../images/common/button/af_activity1_on.png) 0 0/100% 100% no-repeat; position: absolute; bottom: 0; left: -1px; }

.activityBox .chantBtn { width: calc(246px / 2); height: calc(82px / 2); background-image: url(../images/common/button/btn_chant.png); }
.activityBox .dictationBtn { width: calc(214px / 2); height: calc(82px / 2); background-image: url(../images/common/button/btn_dic.png); }
.activityBox .dataroomBtn { width: calc(214px / 2); height: calc(82px / 2); background-image: url(../images/common/button/btn_data.png); }

.Navigation .additionBox { width: calc(430px / 2); height: calc(82px / 2); background-image: url(../images/common/bg_sub_activity.png); display: flex; }
.additionBox .progressBtn { width: calc(216px / 2); height: calc(82px / 2); background-image: url(../images/common/button/btn_save_d.png); }
.additionBox .progressBtn.hover { background-image: url(../images/common/button/btn_save_on.png); }
.additionBox .manualBtn { width: calc(216px / 2); height: calc(82px / 2); background-image: url(../images/common/button/btn_help_d.png); }
.additionBox .manualBtn.hover { background-image: url(../images/common/button/btn_help_on.png); }

/* 슬라이더 */
.Slider { position: absolute; top: 110px; left: 70px; }
.sliderContainer { position: relative; overflow: hidden; width: 100%; height: 100%; }

.sliderContent { display: none; position: relative; width: 100%; height: 100%; padding: 10px; }
.sliderContent.selected { display: block; }

/* 슬라이더 버튼 */
.Slider > button { width: calc(60px / 2); height: calc(60px / 2); position: absolute; top: 50%; transform: translate(0, -50%); filter: drop-shadow(0 0 15px var(--lsbtn-clr)); }
.Slider .sliderPrevButton { right: 100%; margin-right: 5px; background-image: url(../images/common/button/btn_prev_on.png); }
.Slider .sliderPrevButton.off { background-image: url(../images/common/button/btn_prev_off.png); }

.Slider .sliderNextButton { left: 100%; margin-left: 5px; background-image: url(../images/common/button/btn_next_on.png); }
.Slider .sliderNextButton.off { background-image: url(../images/common/button/btn_next_off.png); }

.Slider .sliderTabs { position: absolute; top: 100%; margin-top: 10px; left: 50%; transform: translate(-50%, 0); display: flex; justify-content: center; gap: 12px; }
.sliderTabs .slideDot { width: calc(23px / 2); height: calc(23px / 2); background: rgba(255,255,255,0.5); border-radius: 50%; }
.sliderTabs .slideDot.active { background: #fff; box-shadow: 0 0 4px var(--lsbtn-clr); }

/* 슬라이드 컨텐츠 */
.Lessons li { width: 201px; height: 49px; position: relative; }
.Lessons li::after { content: ""; width: calc(350px / 2); height: calc(2px / 2); position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 0); background: url(../images/common/ele_line.png) 0 0/100% 100% no-repeat; }
.lessonBox { width: 100%; height: 100%; display: flex; align-items: center; color: #fff; font-size: 24px; padding: 0 20px; justify-content: space-between; }
.lessonBox .Icon { width: calc(56px / 2); height: calc(56px / 2); background: var(--point-clr); border-radius: 50%; overflow: hidden; position: relative; display: none; }
.lessonBox .Icon::before { content: ""; width: calc(34px / 2); height: calc(34px / 2); background: url(../images/common/ico_lesson.png) 0 0/100% 100% no-repeat; position: absolute; top: 26px; left: -15px; }

.lessonBox.hover,
.lessonBox.isOpened { background: #fff; color: var(--point-clr); border-radius: 10px 5px 15px; box-shadow: 0 0 9px var(--lsbtn-clr); }

.lessonBox.isOpened { z-index: 5; }
.lessonBox.isOpened .Icon { display: block; }
.lessonBox.isOpened .Icon::before { animation: fly 0.3s forwards; }

/* 팝업 */
.popup { display: none; position: absolute; top: 103px; left: 290px; width: calc(1103px / 2); /* height: calc(948px / 2); */ background: #fff; border-radius: 20px; padding: 10px; box-shadow: inset 0 0 23px #43a1fe78, 0 0 15px #43a1fe78; border: 3px solid #fff; }
.popup .closePopBtn { width: calc(66px / 2); height: calc(66px / 2); background-image: url(../images/common/button/btn_close.png); position: absolute; top: 10px; right: 10px; filter: drop-shadow(0 0 3px var(--lstotal-clr)); }
.popup.on { display: flex; flex-direction: column; gap: 10px; }

.popup .Header { text-align: center; font-family: var(--english_b); font-size: 39px; color: var(--lshead-clr); text-shadow: 0px 1px 0px rgba(0,0,0,0.2); }

.popup .tabBox { width: 100%; height: 100%; background-color: #fff; box-shadow: 0 0 20px var(--lsmain-clr); border-radius: 40px 40px 10px 10px; display: flex; flex-direction: column; }
.popup .Tab { width: 100%; height: 220px; /* flex: 1; */ }
.tabContent { display: none; position: relative; width: 100%; height: 100%; }
.tabContent.selected { display: flex; flex-direction: column; justify-content: space-between; }

.pageMoveCont h3 { font-size: 33px; text-align: center; color: var(--lsname-clr); word-break: keep-all; }
.pageMoveCont { width: 100%; height: 100%; padding: 10px 10px 0 10px; flex: 1; display: flex; flex-direction: column; justify-content: space-between; letter-spacing: -1px; }
.pageMoveCont .pageMove { display: flex; justify-content: space-around; height: 117px; }

.moveBtnBox { display: flex; gap: 50px; }
.moveBtnBox > button { height: calc(184px / 1.8); }
.moveBtnBox .ebookMoveBtn { width: calc(142px / 1.8); background-image: url(../images/common/button/btn_ebook_d.png); }
.moveBtnBox .ebookMoveBtn.hover { background-image: url(../images/common/button/btn_ebook_on.png); }
.moveBtnBox .studyMoveBtn { width: calc(156px / 1.8); background-image: url(../images/common/button/btn_smart_d.png); }
.moveBtnBox .studyMoveBtn.hover { background-image: url(../images/common/button/btn_smart_on.png); }

.tabBtnBox { width: 100%; height: calc(369px / 2); background: #defcf1e0; border-radius: 40px 10px 10px 10px; box-shadow: inset 0 0 23px var(--lssd-clr); display: flex; flex-wrap: wrap; padding: 20px 0; gap: 10px; justify-content: center; }
.tabBtnBox .tabBtn { width: calc(272px / 2); height: calc(136px / 2); background: 0 0/100% 100% no-repeat; }
.tabBtnBox .tabBtn[data-sld-cont="1"] { background-image: url(../images/common/button/btn_time1_d.png); }
.tabBtnBox .tabBtn[data-sld-cont="1"].selected { background-image: url(../images/common/button/btn_time1_on.png); }

.tabBtnBox .tabBtn[data-sld-cont="2"] { background-image: url(../images/common/button/btn_time2_d.png); }
.tabBtnBox .tabBtn[data-sld-cont="2"].selected { background-image: url(../images/common/button/btn_time2_on.png); }

.tabBtnBox .tabBtn[data-sld-cont="3"] { background-image: url(../images/common/button/btn_time3_d.png); }
.tabBtnBox .tabBtn[data-sld-cont="3"].selected { background-image: url(../images/common/button/btn_time3_on.png); }

.tabBtnBox .tabBtn[data-sld-cont="4"] { background-image: url(../images/common/button/btn_time4_d.png); }
.tabBtnBox .tabBtn[data-sld-cont="4"].selected { background-image: url(../images/common/button/btn_time4_on.png); }

.tabBtnBox .tabBtn[data-sld-cont="5"] { background-image: url(../images/common/button/btn_time5_d.png); }
.tabBtnBox .tabBtn[data-sld-cont="5"].selected { background-image: url(../images/common/button/btn_time5_on.png); }

.tabBtnBox .tabBtn[data-sld-cont="6"] { background-image: url(../images/common/button/btn_time6_d.png); }
.tabBtnBox .tabBtn[data-sld-cont="6"].selected { background-image: url(../images/common/button/btn_time6_on.png); }

/* 굿바이 */
[data-pop="goodbye"] .tabBtnBox .tabBtn[data-sld-cont="1"] { background-image: url(../images/common/button/btn_activity1_d.png); }
[data-pop="goodbye"] .tabBtnBox .tabBtn[data-sld-cont="1"].selected { background-image: url(../images/common/button/btn_activity1_on.png); }

[data-pop="goodbye"] .tabBtnBox .tabBtn[data-sld-cont="2"] { background-image: url(../images/common/button/btn_activity2_d.png); }
[data-pop="goodbye"] .tabBtnBox .tabBtn[data-sld-cont="2"].selected { background-image: url(../images/common/button/btn_activity2_on.png); }

/* 모션 요소 */
.motionBox { position: absolute; bottom: 0; right: 0; }

.earthBox, .Earth { width: calc(973px / 2); height: calc(669px / 2); }
.earthBox { position: absolute; bottom: 0; left: -640px; }
.earthBox img { position: absolute; }
.Earth { bottom: 0; left: 0; }

.landMark { transform-origin: bottom; }
.landMark1 { width: calc(400px / 2); height: calc(334px / 2); left: -44px; bottom: 162px; transform: scale(0) rotate(-64deg); }
.landMark2 { width: calc(360px / 2); height: calc(550px / 2); bottom: 227px; left: 63px; transform: scale(0) rotate(-34deg); }
.landMark3 { width: calc(300px / 2); height: calc(372px / 2); bottom: 304px; left: 166px; transform: scale(0); }
.landMark4 { width: calc(298px / 2); height: calc(420px / 2); left: 288px; bottom: 266px; transform: scale(0) rotate(32deg); }
.landMark5 { width: calc(376px / 2); height: calc(278px / 2); bottom: 163px; left: 350px; transform: scale(0) rotate(55deg); }

.CloudLeft { width: calc(817px / 2); height: calc(224px / 2); bottom: 0; left: -250px; }
.CloudRight { width: calc(712px / 2); height: calc(340px / 2); bottom: 0; left: 283px; }
.mainEle { width: calc(616px / 2); height: calc(306px / 2); bottom: 380px; left: 680px; }

/* 모션 스타일 */
.Earth, .CloudLeft, .CloudRight { bottom: -100%; }
.Earth.MOVE, .CloudLeft.MOVE, .CloudRight.MOVE { bottom: 0; }
.Earth.MOVE { transition: 0.7s; }
.CloudLeft.MOVE { transition: 0.2s; animation: balloon 7s 5s infinite; }
.CloudRight.MOVE { transition: 0.6s; animation: balloon 5s 6s infinite; }

.earthBox .landMark1.MOVE { transform: scale(1) rotate(-64deg); transition: 0.3s ease-in-out; }
.earthBox .landMark2.MOVE { transform: scale(1) rotate(-34deg); transition: 0.3s ease-in-out; }
.earthBox .landMark3.MOVE { transform: scale(1); transition: 0.3s ease-in-out; }
.earthBox .landMark4.MOVE { transform: scale(1) rotate(32deg); transition: 0.3s ease-in-out; }
.earthBox .landMark5.MOVE { transform: scale(1) rotate(55deg); transition: 0.3s ease-in-out; }

.mainEle.MOVE { bottom: 450px; left: 300px; transition: 1s ease-in-out; animation: balloon 5s infinite; }

.Copyright { width: calc(964px / 2); height: calc(58px / 2); background: url(../images/common/ele_copyright.png) 0 0/100% 100% no-repeat; position: absolute; bottom: 20px; right: 50px; }

/** 개별 모션 **/

/* 단원 아이콘 모션 */
@keyframes fly {
  0% { top: 26px; left: -15px; }
  100% { top: 6px; left: 5px; }
}

/* 둥실 모션 */
@keyframes balloon {
  0% { transform: rotate(0) translateY(0); }
  50% { transform: rotate(-3deg) translateY(-7px); }
  100% { transform: rotate(0) translateY(0); }
}

/* 둥실 모션 */
@keyframes balloon {
  0% { transform: translateY(0); }
  50% { transform: translateY(10px); }
  100% { transform: translateY(0); }
}