@charset "utf-8";

html {
  -webkit-text-size-adjust: none; /*Chrome, Safari, newer versions of Opera*/
  -moz-text-size-adjust: none; /*Firefox*/
  -ms-text-size-adjust: none;  /*Ie*/
  -o-text-size-adjust: none; /*old versions of Opera*/
}
body {
  width: 100%;
  height: 100svh;
  background-color: #b0deed;
  background: url(../img/bgPattern.webp);
  font-family: PB;
  user-select: none;
  touch-action: none;
  overflow: hidden;
  position: relative;
  opacity: 0;
}
button *, img {pointer-events: none;}
#wrap {
  width: 1920px;
  height: 1080px;
  position: relative;
  transform-origin: 0 0;
}
#main {
  margin: auto;
  position: absolute;
  inset: 0;
}
/*------------메인 페이지------------*/
dotlottie-player {position: absolute;}
dotlottie-player[src$="flower.lottie"] {inset: 0 auto auto 0;}
dotlottie-player[src$="character.lottie"] {width: 520px;height: 320px;inset: auto 0 0 auto;}
/*메인 차시명*/
.mainBg {width: 100%; position: absolute;}
.mainBird {width: 230px;position: absolute;top: 90px;right: 70px;}
.mainDog {width: 150px;position: absolute;top: 840px;left: 480px;}
.mainGirl {width: 480px;position: absolute;top: 600px;left: 20px;}
.mainSea {position: absolute;margin: auto;inset: auto 0 0 0;width: 1918px;}
.mainTit {position: absolute;top: 20px;left: 1px;width: 651px;height: 92px;background-color: #EF4C84;border-radius: 0 50px 50px 0;padding-top: 6px;display: flex;align-items: center;justify-content: center;z-index: 2;}
.mainTit h1 {font-size: 44px;font-family: NSREB;color: #fff;}

/*1반~8반 카테고리*/
.classWrap {position: absolute;left: 36%;top: 28px;width: 184px;z-index: 1;}

.boxEffect {width: 141px;height: 66px;background: #ef892d;position: absolute;top: 10px;left: -1px;border-radius: 15px;}
.classBox {display: flex;align-items: center;width: 100%;height: 65px;background-color: #fff;border: 2px solid #EF4C84;border-radius: 50px;font-size: 32px;padding: 0 20px 10px;font-family: NSB;position: relative;z-index: 3;cursor: pointer;}
.classBox p {pointer-events: none;}
.classBox p::after {content: "";display: inline-block;background: url(../img/main/class_btn_down.png) center/100% no-repeat;width: 38px;height: 39px;position: relative;left: 54px;bottom: -8px;}
.classBox[data-pressed="false"] {/* box-shadow: -1px 4px 0 0 #ef892d; */}
.classBox[data-pressed="false"] p::after {background-image: url(../img/main/class_btn_down.png);}
.classBox[data-pressed="true"] p::after {background-image: url(../img/main/class_btn_up.png);}

.otherClass {position: relative;top: 4px;/* box-shadow: 3px 9px 3px rgba(0, 0, 0, 0.2); */border-radius: 25px;z-index: 2;}
.classBox:not([data-pressed="true"]) + .otherClass {display: none;}
.otherClass ul {padding: 16px 22px;background: #fff;border-radius: 25px;border: 2px solid #EF4C84;width: 100%;position: relative;z-index: 2;}
.otherClass ul li {text-align: center;border-top: 1px solid #C3CFE1;cursor: pointer;}
.otherClass ul li:nth-of-type(1) {
  border-top: unset;
}
.otherClass ul li div {display: inline-block;font-size: 28px;width: 134px;height: 47px;display: flex;align-items: center;font-family: NSB;letter-spacing: 1.6px;pointer-events: none;margin: 0 auto;position: relative;padding: 0 10px;}
.otherClass .boxEffect02 {/* width: 140px; *//* height: 100%; *//* background: #ef892d; *//* position: absolute; *//* top: 4px; *//* left: 1px; *//* border-radius: 15px; *//* z-index: 1; */}
.otherClass ul li div p {position: relative; z-index: 2;}
.otherClass ul li div::before {content: "";width: 100%;height: 100%;display: inline-block;background: #FFEAF7;position: absolute;top: 0;left: 0;opacity: 0;}
.otherClass ul li:hover div {color: #F43DB1;}
.otherClass ul li:hover div:before {opacity: 1;}

[data-lesson="1"] {background: rgba(113, 191, 68, 1);box-shadow: inset 0 -5px 0 rgba(70, 165, 15, 1), 0 0 0 8px rgba(255, 255, 255, 1);}
[data-lesson="2"] {background: rgba(239, 60, 121, 1);box-shadow: inset 0 -5px 0 rgba(205, 33, 92, 1), 0 0 0 8px rgba(255, 255, 255, 1);}
[data-lesson="3"] {background: rgba(246, 139, 30, 1);box-shadow: inset 0 -5px 0 rgba(232, 105, 14, 1), 0 0 0 8px rgba(255, 255, 255, 1);}
[data-lesson="4"] {background: rgba(16, 75, 160, 1);box-shadow: inset 0 -5px 0 rgba(11, 55, 118, 1), 0 0 0 8px rgba(255, 255, 255, 1);}
[data-lesson="5"] {background: rgba(197, 140, 43, 1);box-shadow: inset 0 -5px 0 rgba(169, 118, 30, 1), 0 0 0 8px rgba(255, 255, 255, 1);}
[data-lesson="6"] {background: rgba(0, 149, 167, 1);box-shadow: inset 0 -5px 0 rgba(0, 124, 139, 1), 0 0 0 8px rgba(255, 255, 255, 1);}
[data-lesson="7"] {background: rgba(232, 150, 192, 1);box-shadow: inset 0 -5px 0 rgba(227, 117, 173, 1), 0 0 0 8px rgba(255, 255, 255, 1);}
[data-lesson="8"] {background: rgba(14, 180, 141, 1);box-shadow: inset 0 -5px 0 rgba(11, 137, 108, 1), 0 0 0 8px rgba(255, 255, 255, 1);}

/*레슨버튼 영역*/
.lessonWrap {position: absolute;margin: auto;inset: 270px 0 auto 0;width: 1248px;}
.lessonWrap ul {display: flex;flex-wrap: wrap;justify-content: center;align-items: center;gap: 49px 96px;}
.lessonWrap ul li {display: flex;width: 240px;height: 200px;position: relative;transition: transform 0.3s;cursor: pointer;border-radius: 60px;justify-content: center;align-items: center;}
.lessonWrap ul li:hover {transform: scale(1.2);}
.lessonWrap ul li::before {
  content: '';
  width: 100%;
  height: 100%;
  position: absolute;
  top: -9px;
  left: -9px;
  border: 9px solid#fff88d;
  border-radius: 70px;
  opacity: 0;
}
.lessonWrap ul li:hover::before {
  opacity: 1;
}
.lessonWrap ul li img {pointer-events: none;margin-top: 6px;}

/*------------메인팝업 페이지------------*/
.mainPopup {margin: auto;position: absolute;inset: 0;z-index: 1;}
.mainPopupBg {width: 100%; position: absolute;}
.mainPopupBird {width: 230px;position: absolute;top: 90px;right: 70px;}
.mainPopupDog {width: 270px;position: absolute;top: 820px;left: 50px;}
.mainPopupSea {position: absolute;margin: auto;inset: auto 0 0 0;width: 1918px;}

/*레슨오브젝트*/
.lessonObj {position: absolute;width: 240px;height: 200px;left: 223px;top: 189px;border-radius: 60px;display: flex;align-items: center;justify-content: center;}
.lessonObj .lessonTit02 {
  margin-top: 6px;
}

/*레슨 목차*/
.popupListWrap {width: 100%; display: flex; justify-content: center; position: absolute; top: 143px;}
.popupListWrap .popuplist {width: 903px;height: 880px;border: 2px solid;border-radius: 24px;padding: 12px 14px;}

[data-lesson="1"] + .popupListWrap .popuplist {background-color: #71BF44;border-color: #38810E;}
[data-lesson="2"] + .popupListWrap .popuplist {background-color: #EF3C79;border-color: #A3204D;}
[data-lesson="3"] + .popupListWrap .popuplist {background-color: #F68B1E;border-color: #A15B15;}
[data-lesson="4"] + .popupListWrap .popuplist {background-color: #104BA0;border-color: #032A63;}
[data-lesson="5"] + .popupListWrap .popuplist {background-color: #C58C2B;border-color: #503C32;}
[data-lesson="6"] + .popupListWrap .popuplist {background-color: #0095A7;border-color: #036470;}
[data-lesson="7"] + .popupListWrap .popuplist {background-color: #E896C0;border-color: #BA6A93;}
[data-lesson="8"] + .popupListWrap .popuplist {background-color: #0EB48D;border-color: #06735A;}

.popuplist .listTit {width: 100%;display: flex;justify-content: space-between;align-items: center;margin-bottom: 10px;}
.popuplist .listTit h2 {color: #fff;font-family: NSB;font-size: 40px;margin-left: 60px;user-select: none;}
.popuplist .listTit .listCloseBtn {background: url(../img/main/close_icon.webp)center/100% no-repeat;width: 56px;height: 56px;position: relative;bottom: 0;}

.popuplist ul {background: #fff;border-radius: 12px;width: 100%;border: 2px solid;}
[data-lesson="1"] + .popupListWrap .popuplist ul {border-color: #71BF44;}
[data-lesson="2"] + .popupListWrap .popuplist ul {border-color: #ED95B2;}
[data-lesson="3"] + .popupListWrap .popuplist ul {border-color: #E3CDB6;}
[data-lesson="4"] + .popupListWrap .popuplist ul {border-color: #A8BFD0;}
[data-lesson="5"] + .popupListWrap .popuplist ul {border-color: #E2CFAF;}
[data-lesson="6"] + .popupListWrap .popuplist ul {border-color: #C7DADB;}
[data-lesson="7"] + .popupListWrap .popuplist ul {border-color: #E8CCE8;}
[data-lesson="8"] + .popupListWrap .popuplist ul {border-color: #C6E4DD;}

.popuplist ul li {height: 60px;border-bottom: 2px solid;display: flex;align-items: center;padding-left: 60px;color: #544949;font-family: NSB;font-size: 40px;cursor: pointer;}
[data-lesson="1"] + .popupListWrap .popuplist ul li {border-bottom-color: #71BF44;}
[data-lesson="2"] + .popupListWrap .popuplist ul li {border-bottom-color: #ED95B2;}
[data-lesson="3"] + .popupListWrap .popuplist ul li {border-bottom-color: #E3CDB6;}
[data-lesson="4"] + .popupListWrap .popuplist ul li {border-bottom-color: #A8BFD0;}
[data-lesson="5"] + .popupListWrap .popuplist ul li {border-bottom-color: #E2CFAF;}
[data-lesson="6"] + .popupListWrap .popuplist ul li {border-bottom-color: #C7DADB;}
[data-lesson="7"] + .popupListWrap .popuplist ul li {border-bottom-color: #E8CCE8;}
[data-lesson="8"] + .popupListWrap .popuplist ul li {border-bottom-color: #C6E4DD;}

.popuplist ul li:first-child {border-top-left-radius: 7px; border-top-right-radius: 7px;}
.popuplist ul li:last-child {border-bottom: none; border-bottom-left-radius: 7px; border-bottom-right-radius: 7px;}
.popuplist ul li:hover {color: #fff;}
[data-lesson="1"] + .popupListWrap .popuplist ul li:hover {background-color: #BADFA4;color: #308200;}
[data-lesson="2"] + .popupListWrap .popuplist ul li:hover {background-color: #FED1E0;color: #A3204D;}
[data-lesson="3"] + .popupListWrap .popuplist ul li:hover {background-color: #FFE9D2;color: #A15B15;}
[data-lesson="4"] + .popupListWrap .popuplist ul li:hover {background-color: #E1EFFA;color: #104BA0;}
[data-lesson="5"] + .popupListWrap .popuplist ul li:hover {background-color: #FAF0E1;color: #83580E;}
[data-lesson="6"] + .popupListWrap .popuplist ul li:hover {background-color: #E0FDFF;color: #005E69;}
[data-lesson="7"] + .popupListWrap .popuplist ul li:hover {background-color: #F9EFF9;color: #E375AD;}
[data-lesson="8"] + .popupListWrap .popuplist ul li:hover {background-color: #E1FAF0;color: #0A8266;}

/*자료실*/
.systemWrap {position: absolute;bottom: 72px;right: 127px;display: flex;gap: 24px;z-index: 2;}
.mainPopup:not(.hide) + .systemWrap {}

.systemStyle button {width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;}
.systemStyle button span {font-family: 'NSREB';font-size: 32px;color: #fff;}
.systemStyle .teacherBtn {position: relative;/* width: 114px; *//* height: 199px; */}
.systemStyle .wordBtn {position: relative;/* width: 114px; *//* height: 199px; */}
.systemStyle .wordBtn button span {/* margin-bottom: 17px; */}

/*자료실*/
/* .popupSystemWrap {position: absolute; left: 127px; bottom: 16px; display: flex;} */
#printHtml {
  position: absolute;
  inset: 0;
}