@charset "UTF-8";
/* 폰트 & 초기화 */
@import "./fonts.css";
@import "./reset.css";

:root {
  /* 메인 bg 색상 */
  --bg-class1: #0d6aba;
  --bg-class2: #30ac71;

  /* 각 단원 텍스트 색상 */
  --color-chap1: #c30404;
  --color-chap2: #c03802;
  --color-chap3: #1f3d49;
  --color-chap4: #a56c00;
  --color-special2: #93f0c3;

  /* 폰트 */
  --font-M: "pretendard";
  --font-R: "pretnedardR";
  --font-B: "pretendardB";
  --font-EB: "pretendardEB";
  --font-kr: "NotoSansKR";
  --font-krSB: "NotoSansSB";
  --font-krB: "NotoSansB";
  --font-progress: "gmarket";
  --font-progressB: "gmarketB";
}
html { background-color: var(--bg-class1); }
body { position: relative; width: 100%; height: 100%; font-family: var(--font-M); color: #fff; }
.intro { overflow: hidden; position: absolute; top: 0; left: 0; width: 1280px; height: 720px; padding-top: 27px; }

/* 헤더 */
.header {
  display: flex;
  width: 100%;
  padding: 0 47px 0 50px;
  margin-bottom: 46px;
}
.header > * {flex: 0 0 50%;}
.header .title .closeBtn {
  position: absolute;
  top: 16px;
  right: 117px;
  width: calc(26px / 2);
  height: calc(27px / 2);
  background: url(../images/btn/btn_close.png) center / contain no-repeat;
}
.intro[data-lesson="0"] .header .title .titleText,
.intro[data-lesson="0"] .header .title::after,
.intro[data-lesson="0"] .header .title .closeBtn { display: none; }

.header .title {
  display: flex;
  align-items: center;
  position: relative;
  font-size: 30px;
}
.header .title::after,
.mainCont .topCont .titleDefault::after {
  display: flex;
  justify-content: center;
  width: calc(86px / 2);
  height: calc(86px / 2);
  margin-left: 9px;
  background: url(../images/common/icon_star.png) center / contain no-repeat;
  line-height: calc(86px / 2);
  font-family: var(--font-EB);
}
.header .headerRightCont {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}
.header .headerRightCont .gnbWrap {
  display: flex;
}
.header .headerRightCont .gnbWrap .gnbItem,
.header .headerRightCont .gnbWrap .gnbItem button {
  display: flex;
  align-items: center;
  position: relative;
}
.header .headerRightCont .gnbWrap .gnbItem button::before {
  content: "";
  display: block;
  background: center / contain no-repeat;
}
.header .headerRightCont .gnbWrap .gnbItem .itemStudy::before {
  width: calc(32px / 2);
  height: calc(22px / 2);
  margin-right: 7px;
  background-image: url(../images/common/icon_study.png);
}
.header .headerRightCont .gnbWrap .gnbItem .itemSave::before {
  width: calc(24px / 2);
  height: calc(25px / 2);
  margin-right: 11px;
  background-image: url(../images/common/icon_save.png);
}
.header .headerRightCont .gnbWrap .gnbItem .itemData::before {
  width: calc(30px / 2);
  height: calc(24px / 2);
  margin-right: 9px;
  background-image: url(../images/common/icon_data.png);
}
.header .headerRightCont .gnbWrap .gnbItem .itemGuide::before {
  width: calc(23px / 2);
  height: calc(27px / 2);
  margin-right: 7px;
  background-image: url(../images/common/icon_guide.png);
}
.header .headerRightCont .gnbWrap > *:not(:last-child)::after {
  content: "";
  opacity: 0.5;
  display: block;
  width: 1px;
  height: 13px;
  margin: 0 15px;
  background-color: #fff;
}

/* 메인 화면 */
.main { width: 100%; height: calc(100% - 89px); max-height: max-content; }
.mainCont {
  display: flex;
  width: 100%;
  height: 100%;
}
/* 메인 왼쪽 컨텐츠 */
.mainCont .mainLeftCont {
  display: flex;
  flex-direction: column;
}
.mainCont .mainLeftCont .topCont {
  height: calc(100% - (700px / 2));
}
.mainCont .mainLeftCont .topCont .titleText {
  display: none;
  padding-left: 50px;
  font-family: var(--font-EB);
}
.mainCont .mainLeftCont .topCont .titleDefault {
  position: relative;
  top: -18px;
}
.mainCont .mainLeftCont .topCont .titleDefault::after {
  position: absolute;
  bottom: -4px;
  display: inline-flex;
  width: calc(214px / 2);
  height: calc(214px / 2);
  margin-left: 13px;
  line-height: calc(214px / 2);
}
.mainCont .mainLeftCont .topCont .titleLesson {
  flex-direction: column;
}
.mainCont .mainLeftCont .topCont .titleLesson .lessonTag {
  position: relative;
  left: -50px;
  width: calc(370px / 2);
  height: calc(96px / 2);
  margin-bottom: 37px;
  padding-left: 53px;
  background: center / contain no-repeat;
  font-size: 28px;
  font-family: var(--font-R);
  line-height: 1.4;
}
.mainCont .mainLeftCont .topCont .titleLesson .lessonTag span {
  font-family: "mbc";
  font-size: 38px;
}
.mainCont .mainLeftCont .topCont .titleLesson.lesson5 .lessonTag {
  width: calc(520px / 2);
  padding-left: 51px;
  line-height: 1.6;
}
.mainCont .mainLeftCont .topCont .titleLesson.lesson5 .lessonTag span {
  font-family: var(--font-B);
  font-size: inherit;
}
.mainCont .apngWrap {
  width: calc(1500px / 2);
  height: calc(700px / 2);
  background: center / contain no-repeat;
}

.intro[data-lesson="0"] .mainCont .mainLeftCont .topCont .titleDefault { display: block; }
.intro[data-lesson="1"] .mainCont .mainLeftCont .topCont .lesson1,
.intro[data-lesson="2"] .mainCont .mainLeftCont .topCont .lesson2,
.intro[data-lesson="3"] .mainCont .mainLeftCont .topCont .lesson3,
.intro[data-lesson="4"] .mainCont .mainLeftCont .topCont .lesson4,
.intro[data-lesson="5"] .mainCont .mainLeftCont .topCont .lesson5 { display: flex; }
/* 메인 오른쪽 컨텐츠 */
.mainCont .mainRightCont {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  right: 47px;
  transform: translateY(-50%);
  width: calc(1175px / 2);
  height: calc(1091px / 2);
}
/* 버튼 스타일 */
.mainCont .lessonBtn {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.mainCont .mainRightCont.popOpen .lessonBtn { display: none; }
.mainCont .lessonBtn .lessonBtnWrap {
  transition: all 0.5s;
  width: calc(332px / 2);
  height: calc(407px / 2);
  margin-right: 17px;
  margin-bottom: 26px;
  cursor: pointer;
}
.mainCont .lessonBtn .lessonBtnItem {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}
.mainCont .lessonBtn .lessonBtnItem.item5 > * {
  width: 100%;
  height: 100%;
}
.mainCont .lessonBtn .item3,
.mainCont .lessonBtn .item5 {
  margin-right: 0;
}
.mainCont .lessonBtn .item4,
.mainCont .lessonBtn .item5 {
  margin-bottom: 0;
}
.mainCont .lessonBtn .item1 {
  transform-origin: bottom center;
  border-radius: 15px 75px 15px 75px;
  color: var(--color-chap1);
}
.mainCont .lessonBtn .item2 {
  transform-origin: bottom center;
  border-radius: 75px 15px 15px 15px;
  color: var(--color-chap2);
}
.mainCont .lessonBtn .item3 {
  transform-origin: bottom right;
  border-radius: 15px 75px 15px 15px;
  color: var(--color-chap3);
}
.mainCont .lessonBtn .item4 {
  transform-origin: top center;
  border-radius: 75px 15px 75px 15px;
  color: var(--color-chap4);
}
.mainCont .lessonBtn .item5 {
  transform-origin: top right;
  border-radius: 15px 15px 75px 75px;
}

.mainCont .lessonBtn .lessonBtnItem .topCont {
  position: relative;
  transition: height 0.5s;
  width: 100%;
  height: 50%;
}
.mainCont .lessonBtn .lessonBtnItem .topCont img {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.mainCont .lessonBtn .lessonBtnItem .bottomCont {
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: height 0.5s;
  height: 50%;
}
.mainCont .lessonBtn .lessonBtnItem .bottomCont .lessonNum {
  transition: font-size 0.5s;
  font-family: var(--font-B);
  font-size: 27px;
}
.mainCont .lessonBtn .lessonBtnItem .bottomCont .lessonTit {
  transition: font-size 0.5s;
  font-family: var(--font-M);
  font-size: 17px;
  text-align: center;
}
.mainCont .lessonBtn .item5 .lessonBtnItem {
  justify-content: center;
}
.mainCont .lessonBtn .item5 .bottomCont {
  height: auto;
}
.mainCont .lessonBtn .item5 .bottomCont .lessonNum {
  margin-bottom: 20px;
  line-height: 0.9em;
}

/* 버튼 호버 스타일 */
.mainCont .lessonBtn .lessonBtnWrap:hover {
  transform: scale(1.2);
  color: #fff;
}
.mainCont .lessonBtn .item3:hover,
.mainCont .lessonBtn .item5:hover {
  margin-left: 34px;
}
.mainCont .lessonBtn .item1:hover,
.mainCont .lessonBtn .item4:hover {
  margin-right: 34px;
}
.mainCont .lessonBtn .item1:hover {
  background-color: #e94472;
}
.mainCont .lessonBtn .item2:hover {
  margin-left: 19px;
  margin-right: 34px;
  background-color: #f17215;
}
.mainCont .lessonBtn .lessonBtnItem:hover .bottomCont .lessonNum {
  font-size: 30px;
}
.mainCont .lessonBtn .lessonBtnItem:hover .bottomCont .lessonTit {
  font-family: var(--font-M);
  font-size: 19px;
  text-align: center;
}
/* 차시 버튼 팝업 */
.lnbPop {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  width: calc(955px / 2);
  height: 100%;
}
.mainRightCont.popOpen .lnbPop { display: flex; }
.lnbPop .lnbChap {
  display: none;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 0 38px 0 33px;
  background-color: #f1b081;
  border-radius: 90px 15px 15px 15px;
}
.intro[data-lesson="1"] .mainRightCont.popOpen .lnbPop .lnbChap1,
.intro[data-lesson="2"] .mainRightCont.popOpen .lnbPop .lnbChap2,
.intro[data-lesson="3"] .mainRightCont.popOpen .lnbPop .lnbChap3,
.intro[data-lesson="4"] .mainRightCont.popOpen .lnbPop .lnbChap4,
.intro[data-lesson="5"] .mainRightCont.popOpen .lnbPop .lnbChap5 { display: flex; }
.mainRightCont.popOpen .lnbPop .lnbChap .chapBtn {
  display: flex;
  align-items: center;
  font-family: var(--font-krSB);
  font-size: 20px;
  color: #000;
  cursor: pointer;
}
.mainRightCont.popOpen .lnbPop .lnbChap .chapBtn::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  margin-right: 8px;
}
.mainRightCont.popOpen .lnbPop .lnbChap .chapBtn:not(:last-of-type) { margin-bottom: 21px; }
.mainRightCont.popOpen .lnbPop .lnbChap .chapBtn .chapText {
  min-width: 205px;
  margin-right: 17px;
  font-family: var(--font-krSB);
  font-size: 20px;
  color: #000;
}
.mainRightCont.popOpen .lnbPop .lnbChap .chapBtn.chap10 .chapText {
  white-space: noWrap;
}
.mainRightCont.popOpen .lnbPop .lnbChap .chapBtn .linkBox { display: none; }
.mainRightCont.popOpen .lnbPop .lnbChap .chapBtn .linkBox .linkBtn {
  width: calc(130px / 2);
  height: calc(49px / 2);
  background: center / contain no-repeat;
}
.mainRightCont.popOpen .lnbPop .lnbChap .chapBtn .linkBox .eBookBtn { margin-right: 7px; background-image: url(../images/btn/btn_ebook.png); }
.mainRightCont.popOpen .lnbPop .lnbChap .chapBtn .linkBox .smartBtn { background-image: url(../images/btn/btn_smart.png); }
.lnbPop .closeBtn {
  position: absolute;
  top: 16px;
  right: 17px;
  width: calc(26px / 2);
  height: calc(27px / 2);
  background: url(../images/btn/btn_close.png) center / contain no-repeat;
}
/* 차시 버튼 호버 스타일 */
.mainRightCont.popOpen .lnbPop .lnbChap .chapBtn:hover::before,
.mainRightCont.popOpen .lnbPop .lnbChap .chapBtn.hover::before {
  width: calc(41px / 2);
  height: calc(30px / 2);
  background: url(../images/common/icon_listhover.png) center / contain no-repeat;
}
.mainRightCont.popOpen .lnbPop .lnbChap .chapBtn:hover .chapText,
.mainRightCont.popOpen .lnbPop .lnbChap .chapBtn.hover .chapText {
  font-family: var(--font-krB);
}
.mainRightCont.popOpen .lnbPop .lnbChap .chapBtn:hover .linkBox,
.mainRightCont.popOpen .lnbPop .lnbChap .chapBtn.hover .linkBox { display: flex; }
/* 스페셜 레슨 차시 버튼 팝업 */
.lnbPop .lnbChap5 { padding: 0; background: none; }
.lnbPop .lnbChap5 .chapTopBtn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: calc(422px / 2);
  padding: 0 38px 0 33px;
  margin-bottom: 25px;
  border-radius: 90px 15px 15px 15px;
}
.lnbPop .lnbChap5 .chapBottomBtn {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  height: calc(196px / 2);
  padding-left: 33px;
  border-radius: 15px 15px 50px 15px;
}
.lnbPop .lnbChap5 .chapBottomBtn::before {
  content: "";
  position: absolute;
  top: -15px;
  left: -50px;
  width: calc(217px / 2);
  height: calc(260px / 2);
  background: center / contain no-repeat;
}
.mainRightCont.popOpen .lnbPop .lnbChap5 .chapBottomBtn .chapText {
  min-width: 155px;
}
/* copyright */
.copyright {
  opacity: 0.5;
  position: absolute;
  bottom: calc(32px / 2);
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-kr);
  font-size: 12px;
  color: #fff;
}
/* 페이지 이동 */
.search {
  display: flex;
  align-items: center;
  position: absolute;
  right: 44px;
  bottom: 12px;
}
.search p {
  margin-right: 8px;
  font-family: var(--font-kr);
}
.search input {
  width: calc(120px / 2);
  height: calc(58px / 2);
  margin-right: 6px;
  background-color: rgba(255, 255, 255, 0.25);
  border: 1px solid #fff;
  border-radius: 5px;
}
.search .moveBtn {
  width: calc(83px / 2);
  height: calc(66px / 2);
  margin-top: 4px;
  background: url(../images/btn/btn_move.png) center / contain no-repeat;
}

/* 진도보기 팝업 */
.Progress {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none; color: #111; font-family: var(--font-progress); font-size: 12px; z-index: 30}
.Progress.On {animation: showOpacity .1s forwards; display: block;}
.Progress__Background {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: .6}
.Progress__Inner {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(1192px / 2); height: calc(1200px / 2); padding: 0 34px; border-radius: 25px; background-color: #fff; filter: drop-shadow(0px 10px 10px rgba(0, 0, 0, 0.3));}
.Progress__Title {display: flex; align-items: center; justify-content: center; width: 100%; height: 75px; margin: 0 auto; font-size: 26px; text-align: center;  color: #000; font-family: var(--font-progressB);}
.Progress__Table {width: 100%; height:451px; margin: 0 auto; border-bottom: 1px solid #cbced9; font-size: 14px; text-align: center;	}
.Progress__Table__Row {height: 44px; display: flex; padding: 0 19px 0 12px; }
.Progress__Table__Row.Head { height: 44px; background-color: #f3f4fa; border-top: 1px solid #cbced9; border-bottom: 1px solid #e5e6ec; font-size: 18px; color: #888891; }
.Progress__Table__Cell {display: flex; align-items: center; justify-content: center; }
.Progress__Table__Cell:not(.Checkbox) { padding-top: 3px; }
.Progress__Table__Cell.Checkbox {flex: 0 0 61px; justify-content: flex-start;}
.Progress__Table__Cell.Class {flex: 0 0 150px; justify-content: flex-start;}
.Progress__Table__Cell.Page {flex: 0 0 174px; position: relative; justify-content: flex-start;}
.Progress__Table__Cell.Page>* {cursor: pointer}
.Progress__Table__Cell.Date {flex: 0 0 112px; justify-content: flex-end;}
.Progress__Table__Body {height: 356px; overflow: auto}
.Progress__Ordering {width: calc(23px / 2); height: calc(14px / 2); background: url(../images/btn/btn_arrow.png) center / contain no-repeat; cursor: pointer}
.Progress__Textbook {display: flex; align-items: center; justify-content: center; width: 65px; height: 19px; margin: 0; padding: 0; color: #fff; background-color: #f98c3a; border-radius: 5px; font-size: 12px; text-align: center;}
.Progress__Textbook::after {content: "교과서"}
/* .Progress__Textbook.Sub::after {content: "실험관찰"} */
.Progress__Checkbox {position: relative; box-sizing: border-box; width: 20px; height: 20px; border-radius: 4px; border: 1px solid #ccd6e7; background-color: #f3f6f9; cursor: pointer}
.Progress__Checkbox.Selected {background: url(../images/common/icon_checked.png) center / contain no-repeat; border: none; }
.Progress__Page {width: 38px; padding-left: 8px}
.Progress__Inner > .Progress__Table .Progress__Table__Cell > .Progress__Ordering { position: relative; top: -3px; cursor: pointer; margin-left: 14px; }
.Progress__Table__Body{width: 100%;height: 400px;overflow-x: hidden;}
.Progress__Bottom{position: relative; width: 100%; height: 63px;}
.Progress__Button.Delete{position: absolute; bottom: 13px; right: 16px; font-size: 18px;display: flex;align-items: center;justify-content: center; cursor: pointer; width: calc(136px / 2); height: calc(74px / 2);background: url(../images/btn/btn_delete.png) center top / contain no-repeat;}
.Progress__Close{position: absolute; right: 35px; top: 28px; cursor: pointer; width: 16px; height: 16px; background: url(../images/btn/btn_progressClose.png) center top / contain no-repeat !important;}

/* 배경음악 */
#bgm_btn{cursor: pointer; position: absolute; bottom: 15px; right: 317px; width: 30px; height: 30px; z-index: 15;}
#play-pause{width: 100%; height: 100%; background: center / contain no-repeat;}
#play-pause.play{background-image: url(../images/common/bgm_on.png);}
#play-pause.pause{opacity: 0.7; background-image: url(../images/common/bgm_off.png);}
#play-pause.play.hover{background-image: url(../images/common/bgm_off.png);}