@charset "UTF-8";
.teachers-club {
  padding: 4rem 2rem;
  background: linear-gradient(162deg, #A361FF 9.02%, #3775EF 75.89%);
}
.teachers-club-visual {
  position: relative;
  width: 100%;
  margin: -21% 0;
  aspect-ratio: 67/54;
  transform: scale(0.45);
}
.teachers-club-visual__badge {
  z-index: 10;
  position: absolute;
  top: 50%;
  left: 50%;
  height: 100%;
  background: url("../../../image/doc/member/teachers-club/deco__badge.png") no-repeat center/contain;
  transform: translate(-50%, -50%);
  animation: floatBadge 3s ease-in-out infinite;
}
.teachers-club-visual__wing {
  position: absolute;
  height: 34%;
  transform-origin: center center;
}
.teachers-club-visual__wing--left {
  top: 50%;
  left: 0;
  transform: translate(1%, -26%);
  animation: flapLeft 1.2s ease-in-out infinite;
}
.teachers-club-visual__wing--right {
  top: 50%;
  right: 0;
  transform: translate(-1%, -26%);
  animation: flapRight 1.2s ease-in-out infinite;
}
.teachers-club-visual__light {
  position: absolute;
  opacity: 0.6;
  animation: twinkle 2.5s ease-in-out infinite;
}
.teachers-club-visual__light--1 {
  top: 0%;
  left: 7%;
  width: 10.59%;
  animation-delay: 0s;
}
.teachers-club-visual__light--2 {
  top: 25%;
  right: 9%;
  width: 7.06%;
  animation-delay: 0.5s;
}
.teachers-club-visual__light--3 {
  bottom: 12%;
  left: 12%;
  width: 4.71%;
  animation-delay: 1s;
}
.teachers-club__desc {
  margin-bottom: 1.5em;
  font-weight: 500;
  font-size: 1.6rem;
  color: #fff;
  line-height: 1.6;
  text-align: center;
}
.teachers-club__desc strong {
  display: block;
  color: #FFEB3B;
}
.teachers-club-popup {
  --border-radius: 1.6rem;
  position: fixed;
  width: 100%;
  height: 100%;
  max-width: initial;
  max-height: initial;
  border: 0 none;
  background: rgba(0, 0, 0, 0.6);
}
.teachers-club-popup__contain {
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100% - 3.2rem);
  max-width: 40rem;
  overflow-y: auto;
  max-height: 90%;
  transform: translate(-50%, -50%);
}
.teachers-club-popup-header {
  display: flex;
  align-items: center;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  padding: 1.6rem;
  background: var(--primary);
}
.teachers-club-popup-header__ttl {
  font-weight: 700;
  font-size: 2rem;
  color: #FFF;
}
.teachers-club-popup-header [aria-label="팝업 닫기"] {
  width: 2.4rem;
  margin-left: auto;
  background: url("../../../image/common/icon/icon__close2.svg") no-repeat center/contain;
  aspect-ratio: 1/1;
}
.teachers-club-popup-body {
  padding: 2.4rem;
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  background: #fff;
}
.teachers-club-popup .border-btn + .basic-btn {
  margin-top: 0.8rem;
}
.teachers-club-info {
  margin-bottom: 2.4rem;
}
.teachers-club-info__item + .teachers-club-info__item {
  margin-top: 2.4rem;
}
.teachers-club-info__label {
  display: flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 0.5em;
  font-weight: 600;
  font-size: 1.6rem;
}
.teachers-club-info__label::before {
  width: 1.5em;
  background: url("../../../image/common/deco/deco__check-badge.svg") no-repeat center/contain;
  aspect-ratio: 1/1;
  content: "";
}
.teachers-club-info__value {
  padding: 0.63em;
  border-radius: 0.5em;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.5;
  text-align: center;
  background: #F4F8FF;
}
.teachers-club-info__value--book-ttl {
  background: #F7F7F7;
}
.teachers-club-info__value .remaining-count {
  font-weight: 700;
  color: var(--primary);
}
.teachers-club-info__value + .book-list {
  margin-top: 0.8rem;
}
.teachers-club-info__note {
  display: flex;
  align-items: self-start;
  gap: 0.2em;
  margin-top: 0.62em;
  font-weight: 400;
  font-size: 1.3rem;
  color: #888;
}
.teachers-club-info__note::before {
  flex: 0 0 auto;
  width: 1.14em;
  background: url(../../../image/common/icon/icon__warning--gray.svg) no-repeat center/contain;
  aspect-ratio: 1/1;
  content: "";
}
.teachers-club-info .notice-list li {
  position: relative;
  padding-left: 1em;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.425;
}
.teachers-club-info .notice-list li strong {
  color: var(--primary);
}
.teachers-club-info .notice-list li::before {
  position: absolute;
  left: 0;
  content: "•";
}
.teachers-club-info .notice-list li + li {
  margin-top: 0.6em;
}

.usage-period {
  padding: 0 var(--margins);
}
.usage-period__contain {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 36rem;
  max-width: 100%;
  margin: 0 auto;
  padding: 2rem;
  border-radius: 1.6rem;
  background: #efefff;
}
.usage-period__ttl {
  font-family: "Malgun Gothic";
  font-weight: 700;
  font-size: 1.6rem;
  letter-spacing: -0.05em;
}
.usage-period__btn {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 8rem;
  min-height: 4rem;
  padding: 0.43em 0.86em;
  border-radius: 0.29em;
  font-family: "Malgun Gothic";
  font-weight: 700;
  font-size: 1.4rem;
  color: #45457b;
  text-align: center;
  word-break: keep-all;
  background: #dcdcfc;
}
.usage-period__btn--theme--pink {
  color: #fff;
  background: #ec599f;
}
.usage-period__btn--theme--pink::after {
  filter: brightness(0) invert(1);
}
.usage-period__btn::after {
  width: 1.33em;
  aspect-ratio: 1/1;
  background: url("../../../image/common/icon/icon__arrow--right-dark-indigo.svg") no-repeat center/contain;
  content: "";
}
.usage-period__btn[data-btn-type=accreditation] {
  border-radius: 2em;
  font-size: 1.6rem;
}
.usage-period__btn[data-btn-type=accreditation]::before {
  width: 1.5em;
  aspect-ratio: 1/1;
  background: url("../../../image/common/icon/icon__accreditation.svg") no-repeat center/contain;
  content: "";
}
.usage-period__guide {
  font-family: "Segoe UI";
  font-weight: 400;
  font-size: 1.2rem;
  color: #7d7d7d;
}
.usage-period-menu {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.8rem;
}
.usage-period-menu > * {
  flex: 1;
}
.usage-period .period {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.3em;
  position: relative;
  padding: 0.38em;
  border-radius: 4em;
  font-family: "Malgun Gothic";
  font-weight: 700;
  font-size: 1.6rem;
  color: #45457b;
  background: #fff;
}
.usage-period .period::before {
  width: 1em;
  aspect-ratio: 1/1;
  background: url(../../../image/common/icon/icon__calendar.svg) no-repeat center/contain;
  content: "";
}
.usage-period .period::after {
  position: absolute;
  top: 0;
  right: 4%;
  width: 8.9rem;
  aspect-ratio: 89/71;
  background: url(../../../image/doc/resources/char__usage-period.png) no-repeat top 1.2rem center/contain;
  transform: translateY(-100%);
  content: "";
}

[data-membership=teachers-club] .usage-period__contain {
  background: linear-gradient(131deg, #3775EF 1.77%, #A361FF 103.59%);
}
[data-membership=teachers-club] .usage-period__guide {
  color: #fff;
}
[data-membership=teachers-club] .usage-period__ttl {
  display: flex;
  align-items: center;
  color: #fff;
}
[data-membership=teachers-club] .usage-period__ttl::before {
  display: inline-block;
  height: 2.5em;
  background: url("../../../image/common/deco/deco__badge.png") no-repeat center/contain;
  aspect-ratio: 1/1;
  content: "";
}
[data-membership=teachers-club] .period::after {
  content: none;
}

@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes floatBadge {
  0%, 100% {
    transform: translate(-50%, -50%);
  }
  50% {
    transform: translate(-50%, -52%);
  }
}
@keyframes flapLeft {
  0%, 100% {
    transform: translate(0%, -24%) rotate(0deg);
  }
  50% {
    transform: translate(0%, -26%) rotate(-8deg);
  }
}
@keyframes flapRight {
  0%, 100% {
    transform: translate(0%, -24%) rotate(0deg);
  }
  50% {
    transform: translate(0%, -26%) rotate(8deg);
  }
}
@keyframes twinkle {
  0%, 100% {
    transform: scale(1);
    opacity: 0.4;
  }
  50% {
    transform: scale(1.3);
    opacity: 1;
  }
}

/*# sourceMappingURL=teachers-club--components.css.map */