@charset "UTF-8";
.intro {
  background-color: var(--bg-class1);
}
/* 헤더 */
.header .title::after,
/* 메인 화면 */
.mainCont .topCont .titleDefault::after { content: "1"; padding-right: 3px; }
.intro[data-lesson="1"] .mainCont .mainLeftCont .topCont .titleLesson .lessonTag { background-image: url(../images/common/lesson_tag1.png); }
.intro[data-lesson="2"] .mainCont .mainLeftCont .topCont .titleLesson .lessonTag { background-image: url(../images/common/lesson_tag2.png); }
.intro[data-lesson="3"] .mainCont .mainLeftCont .topCont .titleLesson .lessonTag { background-image: url(../images/common/lesson_tag3.png); }
.intro[data-lesson="4"] .mainCont .mainLeftCont .topCont .titleLesson .lessonTag { background-image: url(../images/common/lesson_tag4.png); }
.intro[data-lesson="5"] .mainCont .mainLeftCont .topCont .titleLesson .lessonTag { background-image: url(../images/common/lesson_tag5.png); }
.mainCont .mainLeftCont .topCont .titleLesson .lessonTag { color: #0d6aba; }
.mainCont .mainLeftCont .topCont .titleLesson.lesson5 .lessonTag { color: #55aefb; }
.mainCont .mainLeftCont .topCont .titleText {
  font-size: calc(170px / 2);
}
.intro[data-lesson="0"] .apngWrap { background-image: url(../images/apng/apng_intro0.png); }
.intro[data-lesson="1"] .apngWrap { background-image: url(../images/apng/apng_intro1.png); }
.intro[data-lesson="2"] .apngWrap { background-image: url(../images/apng/apng_intro2.png); background-position: bottom center; }
.intro[data-lesson="3"] .apngWrap { background-image: url(../images/apng/apng_intro3.png); }
.intro[data-lesson="4"] .apngWrap { background-image: url(../images/apng/apng_intro4.png); }
.intro[data-lesson="5"] .apngWrap { background-image: url(../images/apng/apng_intro5.png); }
.mainCont .lessonBtn .item1 { background-color: #ffaac2; }
.mainCont .lessonBtn .item2 { background-color: #f1b081; }
.mainCont .lessonBtn .item3 { background-color: #aaffd1; }
.mainCont .lessonBtn .item4 { background-color: #fde884; }
.mainCont .lessonBtn .item5 { background-color: #002d89; color: #46e3ff; }
.mainCont .lessonBtn .item3:hover { background-color: #00bd81; }
.mainCont .lessonBtn .item4:hover { background-color: #e8b700; }
.mainCont .lessonBtn .item5:hover { background-color: #00246c; }

.mainCont .lessonBtn .item1 .topCont img {
  top: -23px;
  width: calc(232px / 2);
  height: calc(202px / 2);
  filter: drop-shadow(0px 10px 15px rgba(211, 69, 69, 0.7));
}
.mainCont .lessonBtn .item2 .topCont img {
  top: -21px;
  width: calc(271px / 2);
  height: calc(246px / 2);
  filter: drop-shadow(0px 10px 15px rgba(214, 82, 36, 0.7));
}
.mainCont .lessonBtn .item3 .topCont img {
  top: -10px;
  width: calc(191px / 2);
  height: calc(174px / 2);
  filter: drop-shadow(10px 10px 30px rgba(75, 141, 75, 0.6));
}
.mainCont .lessonBtn .item4 .topCont img {
  top: -11px;
  width: calc(210px / 2);
  height: calc(201px / 2);
  filter: drop-shadow(10px 10px 30px rgba(98, 48, 12, 0.5));
}
.mainRightCont.popOpen .lnbPop .lnbChap .chapBtn::before {
  background: #5170b6;
}
/* 차시 버튼 호버 스타일 */
.mainRightCont.popOpen .lnbPop .lnbChap .chapBtn:hover .chapText,
.mainRightCont.popOpen .lnbPop .lnbChap .chapBtn.hover .chapText {
  color: #0d69b9;
}
.mainCont .lessonBtn .item3:hover .topCont { height: 40%; }
.mainCont .lessonBtn .item3:hover .bottomCont { height: 60%; }
/* 스페셜 레슨 차시 버튼 팝업 */
.lnbPop .lnbChap5 .chapTopBtn {
  background: #97caff;
  filter: drop-shadow(0 0 50px rgba(1, 39, 97, 0.5));
}
.lnbPop .lnbChap5 .chapBottomBtn {
  background: #74eaff;
  filter: drop-shadow(0 0 50px rgba(1, 39, 97, 0.5));
}
.lnbPop .lnbChap5 .chapBottomBtn::before {
  left: -56px;
  background-image: url(../images/img/img5.png);
}
/* 단원 선택 팝업 */
.lnbPop .lnbChap1 { background-color: #ffaac2; }
.lnbPop .lnbChap2 { background-color: #f1b081; }
.lnbPop .lnbChap3 { background-color: #aaffd1; }
.lnbPop .lnbChap4 { background-color: #fde884; }

/* 내 수업 만들기 */
.gnbWrap > li > .lnb-wrap{ z-index: 20; display: none; opacity: 0; flex-direction: column; position: absolute; top: calc(100% - 5px); width: calc(274px / 2); height: 71px; padding-top: 10px;}
.gnbWrap > li > .itemStudy.hover + .lnb-wrap { display: flex; }
.gnbWrap > li > .lnb-wrap:hover { display: flex; }
.gnbWrap > li > .lnb-wrap > ul.lnb{overflow: hidden; width: 100%; height: calc(122px / 2); border-radius: 15px; background: #1488eb;}
.gnbWrap > li:hover > .lnb-wrap{opacity: 1;}
.gnbWrap > li > .lnb-wrap > ul.lnb > li{height: 50%; width: 100%; display: flex; align-items: center; padding-left: 12px; cursor: pointer;}
.gnbWrap > li > .lnb-wrap > ul.lnb > li:hover{background-color: #06b4f9; color: #fcff00;}
.gnbWrap > li > .lnb-wrap > ul.lnb > li > p{display: flex; align-items: center; font-size: 14px; font-family: var(--font-kr); }
.gnbWrap > li > .lnb-wrap > ul.lnb > li > p::before{content: ''; display: flex; align-items: center; width: calc(20px / 2); height: calc(27px / 2); margin-right: 9px; background: url(../images/common/icon_class.png) center / contain no-repeat;}
.gnbWrap > li > .lnb-wrap > ul.lnb > li.hover > p::before,
.gnbWrap > li > .lnb-wrap > ul.lnb > li > p.hover::before { background: url(../images/common/icon_classhover.png) center / contain no-repeat;}