@charset "UTF-8";

#wrap {
  position: absolute;
  top: 0px;
  width: 1280px;
  height: 720px;
  /* overflow: hidden; */
  background: url(../image/bg/bg.png) no-repeat 0 0 / contain;
}

.search-con {
  position: absolute;
  left: 1030px;
  top: 680px;
  width: 230px;
  height: 41px;
  background: url(../image/bg/input_con.png) no-repeat 0 0 / contain;
  opacity: 0;
}

.search-con .search-input {
  position: absolute;
  left: 125px;
  top: 9px;
  width: 58px !important;
  height: 21px !important;
  text-align: center;
  font-family: "ONE_Mobile_Title";
  font-size: 14px;
  color: #3d4246 !important;
}

.search-con .btn-search {
  position: absolute;
  left: 186px;
  top: 9px;
  width: 32px;
  height: 22px;
  background: url(../image/btn/btn_search0001.png) no-repeat 0 0 / contain;
}
.search-con .btn-search:hover {
  background: url(../image/btn/btn_search0002.png) no-repeat 0 0 / contain;
}

.notice {
  position: absolute;
  left: 10px;
  bottom: 5px;
  font-family: "SCDream3";
  font-size: 13px;
  line-height: calc(100% + 4px);
  color: rgba(255, 255, 255, 0.69);
}

.seqAni.ani_title {
  position: absolute;
  left: 34px;
  top: 17px;
  width: 133.5px;
  height: 74.5px;
}

.seqAni.ani_top {
  position: absolute;
  left: 872px;
  top: -53px;
  width: 427px;
  height: 239px;
}

.progressButton {
  position: absolute;
  left: 920px;
  top: 20px;
  width: 122px;
  height: 47px;
  background: url(../image/btn/btn_progress.png) no-repeat -1px -1px / 128px 128px;
}
.progressButton:hover {
  background-position: -1px -49px;
}

.btn-dataroom {
  position: absolute;
  left: 1037px;
  top: 20px;
  width: 122px;
  height: 47px;
  background: url(../image/btn/btn_data.png) no-repeat -1px -1px / 128px 128px;
}
.btn-dataroom:hover {
  background-position: -1px -49px;
}

.btn-t-link {
  position: absolute;
  left: 1144px;
  top: 20px;
  width: 122px;
  height: 47px;
  background: url(../image/btn/btn_T_link.png) no-repeat -1px -1px / 128px 128px;
}
.btn-t-link:hover {
  background-position: -1px -49px;
}

.btn-ebook {
  position: relative;
  width: 74.5px;
  height: 28px;
  background: url(../image/btn/btn_ebook.png) no-repeat -1px -1px / 128px 64px;
  flex-shrink: 0;
}
.btn-ebook:hover {
  background-position: -1px -30px;
}

.btn-content {
  position: relative;
  width: 74.5px;
  height: 27.5px;
  background: url(../image/btn/btn_content.png) no-repeat -1px -1px / 128px 64px;
  flex-shrink: 0;
}
.btn-content:hover {
  background-position: -1px -29.5px;
}

.lesson-con {
  position: absolute;
}

.lesson-con > .lesson {
  position: absolute;
  top: 110px;
  width: 140px;
  height: 520px;
  cursor: pointer;
  transform: translate(-1000px, 0px);
  overflow: hidden;
}
.lesson-con > .lesson.aniEnd:hover {
  width: 240px;
}

.lesson-con > .lesson.aniEnd {
  transition: all 0.3s ease-in-out;
}

.lesson-con > .lesson * {
  /* pointer-events: none; */
}

.lesson-con > .lesson::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2), inset 0 0 20px rgba(0, 0, 0, 0.05);
  pointer-events: none;
  border-radius: 20px;
  z-index: 1;
}
.lesson-con > .lesson[data-lesson="0"]::before {
  border-radius: 50px 20px 20px 50px;
}
.lesson-con > .lesson[data-lesson="4"]::before {
  border-radius: 20px 50px 50px 20px;
}

.lesson-con > .lesson[data-lesson="0"] {
  left: 70px;
}
.lesson-con > .lesson[data-lesson="1"] {
  left: 220px;
}
.lesson-con > .lesson[data-lesson="2"] {
  left: 370px;
}
.lesson-con > .lesson[data-lesson="3"] {
  left: 520px;
}
.lesson-con > .lesson[data-lesson="4"] {
  left: 670px;
}

.lesson-con[data-lesson="0"] > .lesson.aniEnd[data-lesson="1"] {
  left: 320px;
}
.lesson-con[data-lesson="0"] > .lesson.aniEnd[data-lesson="2"] {
  left: 470px;
}
.lesson-con[data-lesson="0"] > .lesson.aniEnd[data-lesson="3"] {
  left: 620px;
}
.lesson-con[data-lesson="0"] > .lesson.aniEnd[data-lesson="4"] {
  left: 770px;
}

.lesson-con[data-lesson="1"] > .lesson.aniEnd[data-lesson="2"] {
  left: 470px;
}
.lesson-con[data-lesson="1"] > .lesson.aniEnd[data-lesson="3"] {
  left: 620px;
}
.lesson-con[data-lesson="1"] > .lesson.aniEnd[data-lesson="4"] {
  left: 770px;
}

.lesson-con[data-lesson="2"] > .lesson.aniEnd[data-lesson="3"] {
  left: 620px;
}
.lesson-con[data-lesson="2"] > .lesson.aniEnd[data-lesson="4"] {
  left: 770px;
}

.lesson-con[data-lesson="3"] > .lesson.aniEnd[data-lesson="4"] {
  left: 770px;
}

.lesson-con > .lesson > .seqAni.ani_lesson {
  position: absolute;
  transform: scale(0.7);
  transition: all 0.3s ease-in-out;
}
.lesson-con > .lesson.aniEnd:hover > .seqAni.ani_lesson {
  transform: scale(1) !important;
}

.lesson-con > .lesson[data-lesson="0"] > .seqAni.ani_lesson {
  left: calc(50% - 102px);
  top: calc(50% - 215px);
  width: 204px;
  height: 265px;
}
.lesson-con > .lesson[data-lesson="1"] > .seqAni.ani_lesson {
  left: calc(50% - 97px);
  bottom: calc(50% - 245px);
  width: 194px;
  height: 300px;
}
.lesson-con > .lesson[data-lesson="2"] > .seqAni.ani_lesson {
  transform-origin: center right;
  right: calc(0% - 7px);
  top: calc(50% - 241px);
  transform: scale(0.62);
  width: 233px;
  height: 282px;
}
.lesson-con > .lesson[data-lesson="2"]:hover > .seqAni.ani_lesson {
  right: calc(0% - 12px);
}
.lesson-con > .lesson[data-lesson="3"] > .seqAni.ani_lesson {
  left: calc(50% - 95.5px);
  bottom: calc(50% - 235px);
  width: 191px;
  height: 303px;
}
.lesson-con > .lesson[data-lesson="4"] > .seqAni.ani_lesson {
  left: calc(50% - 93px);
  top: calc(50% - 200px);
  width: 186px;
  height: 223px;
}

.lesson-con > .lesson > .inner {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #fff;
  overflow: hidden;
  border-radius: 20px;
  /* box-shadow: -2px -2px 5px 0 rgba(0, 0, 0, 0.25), 2px 2px 5px 0 rgba(0, 0, 0, 0.25); */
}

.lesson-con > .lesson[data-lesson="0"] > .inner {
  border-radius: 50px 20px 20px 50px;
}
.lesson-con > .lesson[data-lesson="4"] > .inner {
  border-radius: 20px 50px 50px 20px;
}

.lesson-con > .lesson > .inner > .mask {
  position: absolute;
  width: 100%;
  height: 370px;
}

.lesson-con > .lesson[data-lesson="0"] > .inner > .mask,
.lesson-con > .lesson[data-lesson="2"] > .inner > .mask,
.lesson-con > .lesson[data-lesson="4"] > .inner > .mask {
  top: 0;
  border-radius: 0 0 100px 100px;
}
.lesson-con > .lesson[data-lesson="1"] > .inner > .mask,
.lesson-con > .lesson[data-lesson="3"] > .inner > .mask {
  bottom: 0;
  border-radius: 100px 100px 0 0;
}

.lesson-con > .lesson[data-lesson="0"] > .inner > .mask {
  background-color: #ffdb51;
}
.lesson-con > .lesson[data-lesson="1"] > .inner > .mask {
  background-color: #ccea52;
}
.lesson-con > .lesson[data-lesson="2"] > .inner > .mask {
  background-color: #92d6ff;
}
.lesson-con > .lesson[data-lesson="3"] > .inner > .mask {
  background-color: #ffdb51;
}
.lesson-con > .lesson[data-lesson="4"] > .inner > .mask {
  background-color: #ccea52;
}

.lesson-con > .lesson > .inner > .icon {
  position: absolute;
  left: calc(50% - 20px);
  width: 40px;
  height: 40px;
}

.lesson-con > .lesson[data-lesson="0"] > .inner > .icon,
.lesson-con > .lesson[data-lesson="2"] > .inner > .icon,
.lesson-con > .lesson[data-lesson="4"] > .inner > .icon {
  top: 345px;
}
.lesson-con > .lesson[data-lesson="1"] > .inner > .icon,
.lesson-con > .lesson[data-lesson="3"] > .inner > .icon {
  bottom: 345px;
}

.lesson-con > .lesson[data-lesson="0"] > .inner > .icon {
  background: url(../image/icon/icon_lesson_0001.png) no-repeat 0 0 / contain;
}
.lesson-con > .lesson[data-lesson="1"] > .inner > .icon {
  background: url(../image/icon/icon_lesson_0002.png) no-repeat 0 0 / contain;
}
.lesson-con > .lesson[data-lesson="2"] > .inner > .icon {
  background: url(../image/icon/icon_lesson_0003.png) no-repeat 0 0 / contain;
}
.lesson-con > .lesson[data-lesson="3"] > .inner > .icon {
  background: url(../image/icon/icon_lesson_0004.png) no-repeat 0 0 / contain;
}
.lesson-con > .lesson[data-lesson="4"] > .inner > .icon {
  background: url(../image/icon/icon_lesson_0005.png) no-repeat 0 0 / contain;
}

.lesson-con > .lesson > .inner > .title {
  position: absolute;
  left: 0;
  width: 100%;
  height: auto;
  font-family: "Cafe24Ohsquare";
  font-size: 20px;
  line-height: calc(100% + 5px);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s ease-in-out;
}

.lesson-con > .lesson.aniEnd:hover > .inner > .title {
  font-size: 30px;
}

.lesson-con > .lesson[data-lesson="0"] > .inner > .title {
  color: #354d9e;
}
.lesson-con > .lesson[data-lesson="1"] > .inner > .title {
  color: #723d94;
}
.lesson-con > .lesson[data-lesson="2"] > .inner > .title {
  color: #e24142;
}
.lesson-con > .lesson[data-lesson="3"] > .inner > .title {
  color: #354d9e;
}
.lesson-con > .lesson[data-lesson="4"] > .inner > .title {
  color: #723d94;
}

.lesson-con > .lesson[data-lesson="0"] > .inner > .title,
.lesson-con > .lesson[data-lesson="2"] > .inner > .title,
.lesson-con > .lesson[data-lesson="4"] > .inner > .title {
  top: 415px;
}
.lesson-con > .lesson[data-lesson="1"] > .inner > .title,
.lesson-con > .lesson[data-lesson="3"] > .inner > .title {
  bottom: 415px;
}

.lesson-pop > .lesson {
  position: absolute;
  left: 67px;
  top: 111px;
  width: 1147px;
  height: 520px;
  background-color: #fff;
  border-radius: 60px;
  box-shadow: -2px -2px 5px 0 rgba(0, 0, 0, 0.25), 2px 2px 5px 0 rgba(0, 0, 0, 0.25);
}
.lesson-pop > .lesson::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2), inset 0 0 20px rgba(0, 0, 0, 0.05);
  pointer-events: none;
  border-radius: 60px;
  z-index: 1;
}

.lesson-pop > .lesson > .btn-close {
  position: absolute;
  right: 0;
  top: 0;
  width: 39.5px;
  height: 40.5px;
  background: url(../image/btn/btn_close.png) no-repeat -1px -1px / 128px 64px;
}
.lesson-pop > .lesson > .btn-close:hover {
  background-position: -41.5px -1px;
}

.lesson-pop > .lesson > .btn-updata,
.lesson-pop > .lesson > .btn-download {
  position: absolute;
  right: 40px;
  top: 20px;
  width: 70.5px;
  height: 59px;
  background: url(../image/btn/download.png) no-repeat -1px -1px / 128px 128px;
  z-index: 1;
}

.lesson-pop > .lesson > .btn-updata {
  background-position: -1px -61px;
}

.lesson-pop > .lesson > .seqAni.ani_pop_lesson {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 380px;
  height: 500px;
}

.lesson-pop > .lesson > .content {
  position: absolute;
  left: 408px;
  top: 40px;
  width: 715px;
  height: 440px;
}

.lesson-pop > .lesson > .content > .sub {
  position: relative;
  width: 100%;
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.lesson-pop > .lesson[data-lesson="0"] > .content > .sub:nth-child(1) {
  height: 40px;
}
.lesson-pop > .lesson[data-lesson="0"] > .content > .sub:nth-child(2) {
  height: 70px;
}
.lesson-pop > .lesson[data-lesson="0"] > .content > .sub:nth-child(3) {
  height: 100px;
}
.lesson-pop > .lesson[data-lesson="0"] > .content > .sub:nth-child(4) {
  height: 40px;
}

.lesson-pop > .lesson[data-lesson="1"] > .content > .sub:nth-child(1) {
  height: 40px;
}
.lesson-pop > .lesson[data-lesson="1"] > .content > .sub:nth-child(2) {
  height: 70px;
}
.lesson-pop > .lesson[data-lesson="1"] > .content > .sub:nth-child(3) {
  height: 100px;
}
.lesson-pop > .lesson[data-lesson="1"] > .content > .sub:nth-child(4) {
  height: 40px;
}

.lesson-pop > .lesson[data-lesson="2"] > .content > .sub:nth-child(1) {
  height: 40px;
}
.lesson-pop > .lesson[data-lesson="2"] > .content > .sub:nth-child(2) {
  height: 70px;
}
.lesson-pop > .lesson[data-lesson="2"] > .content > .sub:nth-child(3) {
  height: 100px;
}
.lesson-pop > .lesson[data-lesson="2"] > .content > .sub:nth-child(4) {
  height: 100px;
}
.lesson-pop > .lesson[data-lesson="2"] > .content > .sub:nth-child(5) {
  height: 40px;
}

.lesson-pop > .lesson[data-lesson="3"] > .content > .sub:nth-child(1) {
  height: 40px;
}
.lesson-pop > .lesson[data-lesson="3"] > .content > .sub:nth-child(2) {
  height: 70px;
}
.lesson-pop > .lesson[data-lesson="3"] > .content > .sub:nth-child(3) {
  height: 100px;
}
.lesson-pop > .lesson[data-lesson="3"] > .content > .sub:nth-child(4) {
  height: 70px;
}
.lesson-pop > .lesson[data-lesson="3"] > .content > .sub:nth-child(5) {
  height: 70px;
}
.lesson-pop > .lesson[data-lesson="3"] > .content > .sub:nth-child(6) {
  height: 40px;
}

.lesson-pop > .lesson[data-lesson="4"] > .content > .sub:nth-child(1) {
  height: 40px;
}
.lesson-pop > .lesson[data-lesson="4"] > .content > .sub:nth-child(2) {
  height: 70px;
}
.lesson-pop > .lesson[data-lesson="4"] > .content > .sub:nth-child(3) {
  height: 70px;
}
.lesson-pop > .lesson[data-lesson="4"] > .content > .sub:nth-child(4) {
  height: 100px;
}
.lesson-pop > .lesson[data-lesson="4"] > .content > .sub:nth-child(5) {
  height: 40px;
}

.lesson-pop > .lesson > .content > .sub + .sub {
  margin-top: 10px;
}

.lesson-pop > .lesson > .content > .sub > .title {
  position: relative;
  width: 180px;
  height: 100%;
  padding: 0 15px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: #eaf5fd;
  border-radius: 10px;
  font-family: "SCDream6";
  font-size: 15px;
  line-height: calc(100% + 8px);
  color: #272b5b;
  margin-right: 5px;
}

.lesson-pop > .lesson > .content > .sub > .title .num {
  font-family: "Jalnan";
  font-size: 18px;
  line-height: calc(100% + 8px);
  color: #272b5b;
  margin-right: 10px;
}

.lesson-pop > .lesson > .content > .sub > .sub-content {
  position: relative;
  width: 530px;
  height: 100%;
  font-family: "NanumSquareB";
  font-size: 15px;
  line-height: calc(100% + 5px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-flow: column;
}

.lesson-pop > .lesson > .content > .sub + .sub > .sub-content::before {
  content: "";
  position: absolute;
  left: 0;
  top: -5px;
  width: 100%;
  height: 1.5px;
  background-color: #d1dde5;
}

.lesson-pop > .lesson > .content > .sub > .sub-content > .corner {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.lesson-pop > .lesson > .content > .sub + .sub > .sub-content > .corner + .corner {
  margin-top: 5px;
}

.lesson-pop > .lesson > .content > .sub > .sub-content > .corner > .content {
  width: 335px;
}

.icon-corner-0 {
  margin-right: 5px;
  display: inline-block;
  width: 19px;
  height: 20px;
  background: url(../image/icon/icon_corner_0001.png) no-repeat 0 0 / contain;
}
.icon-corner-1 {
  margin-right: 5px;
  display: inline-block;
  width: 19px;
  height: 20px;
  background: url(../image/icon/icon_corner_0002.png) no-repeat 0 0 / contain;
}
.icon-corner-2 {
  margin-right: 5px;
  display: inline-block;
  width: 19px;
  height: 20px;
  background: url(../image/icon/icon_corner_0003.png) no-repeat 0 0 / contain;
}
.icon-dot {
  margin-right: 5px;
  width: 19px;
  height: 20px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.icon-dot::before {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  background-color: #313674;
  border-radius: 50%;
}