@import url(https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;700&family=Noto+Serif+KR:wght@400;700&display=swap);
@charset "UTF-8";
*,
::after,
::before {
  box-sizing: border-box;
}

body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  color: #31415F;
  letter-spacing: -0.2px;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  font-family: "Noto Sans KR", "Malgun Gothic", "맑은 고딕", sans-serif;
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
}

button {
  cursor: pointer;
  border: 0;
  background-color: transparent;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  outline: none;
}

a {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

p {
  margin: 0;
}

em {
  font-style: normal;
}

table {
  width: 100%;
  border-collapse: collapse;
}
table th, table td {
  border: 1px solid #ddd;
}

ol, ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

img {
  max-width: 100%;
}

/* font-size */
/* text color */
.is--size1 {
  font-size: 3rem;
}

.is--size2 {
  font-size: 2rem;
}

.is--size3 {
  font-size: 1.5rem;
}

.is--size4 {
  font-size: 1.25rem;
}

.is--size5 {
  font-size: 1rem;
}

.is--size6 {
  font-size: 0.875rem;
}

/*color*/
/*button color*/
.btns {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

*[class^=btn--] {
  width: 100%;
  height: 40px;
  padding: 0.5rem 1rem;
  border-radius: 0.25rem;
  font-size: 1rem;
  text-align: center;
}
*[class^=btn--].btn--sm {
  min-width: 120px;
  width: -moz-fit-content;
  width: fit-content;
}

.btn--primary {
  background-color: #37BC69;
  color: #FFFFFF;
}
.btn--primary:hover {
  background-color: #34b062;
}
.btn--primary:active {
  background-color: #31a85e;
}
.btn--primary:disabled {
  background-color: #a7e5be;
  opacity: 50%;
}

.btn--secondary {
  background-color: #EBF8F0;
  color: #37BC69;
}
.btn--secondary:hover {
  background-color: #e0f4e8;
}
.btn--secondary:active {
  background-color: #d8f1e2;
}
.btn--secondary:disabled {
  background-color: white;
  opacity: 50%;
}

.btn--gray {
  background-color: #31415F;
  color: #FFFFFF;
}
.btn--gray:hover {
  background-color: #2c3a55;
}
.btn--gray:active {
  background-color: #28354e;
}
.btn--gray:disabled {
  background-color: #728ab7;
  opacity: 50%;
}

/* padding */
.pd-0 {
  padding: 0 !important;
}

.pt-0 {
  padding-top: 0 !important;
}

.pt-1 {
  padding-top: 1rem !important;
}

.pt-2 {
  padding-top: 2rem !important;
}

.pb-0 {
  padding-bottom: 0 !important;
}

.pb-1 {
  padding-bottom: 1rem !important;
}

.pb-2 {
  padding-bottom: 2rem !important;
}

/* tabs */
.tabs {
  display: flex;
  gap: 0.5rem;
}
.tabs .tab__link {
  flex: 1;
  padding: 0.5rem 1rem;
  border: 1px solid #EAECEF;
  border-radius: 0.25rem;
}
.tabs .tab__link.current {
  background-color: #37BC69;
  color: #FFFFFF;
}
@media (max-width: 768px) {
  .tabs {
    flex-wrap: wrap;
  }
  .tabs .tab__link {
    min-width: 50%;
  }
}

.tab__content {
  display: none;
}
.tab__content.current {
  display: block;
}

/* form */
.form__list {
  display: flex;
  flex-direction: column;
}
.form__list h3 {
  font-size: 1rem;
  font-weight: normal;
  margin-bottom: 0.5rem;
  color: #51607D;
}
.form__list .form__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 40px;
  border: 1px solid #EAECEF;
  margin-bottom: 0.5rem;
  padding: 4px 10px 4px 16px;
  border-radius: 4px;
}
.form__list .form__item select {
  display: block;
  width: 100%;
  padding: 4px 10px 4px 16px;
  font-size: 1rem;
  border: 0;
  color: #31415F;
}
.form__list .form__item select option:first-child {
  display: none;
}
.form__list .form__item select:required:invalid {
  color: #BBC2D0;
}
.form__list .form__item select:required:invalid option {
  color: #31415F;
}
.form__list .form__item input {
  width: calc(100% - 2rem);
  height: 2rem;
  border: 0;
  color: #31415F;
  font-size: 1rem;
}
.form__list .form__item input::-moz-placeholder {
  color: #BBC2D0;
}
.form__list .form__item input::placeholder {
  color: #BBC2D0;
}
.form__list .form__item:last-child {
  margin-bottom: 0;
}
.form__list .form__item.form__success {
  border-color: #37BC69;
}
.form__list .form__item.form__error {
  border-color: #FF404C;
}
.form__list .form__item.form__disabled {
  background-color: #F5F6F7;
}
.form__list .form__item svg {
  width: 1rem;
  height: 1rem;
  color: #BBC2D0;
}

.error__msg {
  list-style: disc inside;
  font-size: 14px;
  color: #FF404C;
  padding-left: 0.5rem;
}

.container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 1rem;
}

.container--sm {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 0 1rem;
}

header {
  z-index: 1;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  border-bottom: 1px solid #F5F6F7;
  background-color: #FFFFFF;
}
header .container {
  height: 60px;
  display: flex;
  align-items: center;
  gap: 3rem;
}
@media (max-width: 768px) {
  header .container {
    justify-content: space-between;
  }
}
header .menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}
@media (max-width: 768px) {
  header .menu {
    display: none;
    width: 100%;
    position: absolute;
    top: 60px;
    left: 0;
    flex-direction: column;
    background-color: #FFFFFF;
    box-shadow: 0px 32px 50px 0px rgba(0, 0, 0, 0.2);
    padding: 1rem;
  }
  header .menu.show {
    display: flex;
  }
  header .menu a {
    width: 100%;
    text-align: center;
    padding: 0.5rem 1rem;
  }
  header .menu a.current {
    border: 0;
    background-color: #EBF8F0;
  }
}
header .menu a {
  padding: 1rem;
  border-bottom: 3px solid transparent;
}
header .menu .current {
  color: #37BC69;
  font-weight: bold;
  border-bottom: 3px solid #37BC69;
}
header .logo {
  width: calc(96px + 2rem);
  padding: 1rem;
}
header .info {
  display: flex;
  justify-content: flex-end;
  width: 25%;
}
header .info strong {
  padding: 0.5rem;
}
header .info button {
  color: #51607D;
  padding: 0.5rem;
  font-size: 0.875rem;
}
header .info button svg {
  margin-left: 0.5rem;
}
header .btn__menu {
  display: none;
}
@media (max-width: 768px) {
  header .btn__menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
  }
  header .btn__menu svg {
    display: inline-flex;
    width: 1.5rem;
    height: 1.5rem;
    font-size: 1.5rem;
    color: #31415F;
  }
}

footer {
  background-color: #F5F6F7;
  padding: 2.5rem 1rem;
  color: #51607D;
}
footer .container {
  display: flex;
  gap: 2rem;
  font-size: 0.875rem;
}
@media (max-width: 768px) {
  footer .container {
    flex-direction: column;
  }
}
footer .footer__content {
  display: flex;
  flex-direction: column;
}
footer .footer__content strong, footer .footer__content li {
  margin-bottom: 0.5rem;
}

/* modal */
.dim {
  z-index: 2;
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 1rem;
}
.dim.show {
  display: flex;
}
.dim *::-webkit-scrollbar {
  width: 8px; /* 스크롤바의 너비 */
}
.dim *::-webkit-scrollbar-thumb {
  height: 50%; /* 스크롤바의 길이 */
  background: #BBC2D0; /* 스크롤바의 색상 */
  border-radius: 10px;
}
.dim *::-webkit-scrollbar-track {
  background: #F5F6F7; /*스크롤바 뒷 배경 색상*/
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  width: calc(100% - 2rem);
  height: 100%;
  max-width: 480px;
  min-height: 240px;
  max-height: 640px;
  transform: translate(-50%, -50%);
  background-color: white;
  box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.2);
  border-radius: 0.5rem;
  letter-spacing: -0.64px;
  word-break: keep-all;
  font-size: 1rem;
  overflow-y: auto;
}
.modal .modal__head {
  height: 3rem;
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 1rem;
}
.modal .modal__head .btn__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2em;
  height: 2rem;
  padding: 1rem;
  margin-left: auto;
  background-color: transparent;
}
.modal .modal__head .btn__close svg {
  color: #51607D;
  font-size: 1.25rem;
}
.modal .modal__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 2rem;
  overflow-y: auto;
}
.modal .modal__body h2 {
  font-size: 1.25rem;
  color: #37BC69;
  padding-bottom: 0.5rem;
}
.modal .modal__body h3 {
  font-size: 1rem;
  padding-bottom: 0.5rem;
}
.modal .modal__body strong {
  margin-bottom: 1rem;
}
.modal .modal__body .form__list {
  margin-bottom: 1.5rem;
}
.modal .modal__body .form__read {
  min-height: 120px;
  border: 1px solid #EAECEF;
  border-radius: 0.5rem;
  padding: 1rem;
  overflow-y: auto;
  margin-bottom: 0.5rem;
}
.modal .modal__body .form__read p {
  font-size: 0.875rem;
  line-height: 1.75;
  color: #51607D;
}
.modal .checkbox_wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.5rem;
}
.modal .checkbox {
  width: 1.25rem;
  height: 1.25rem;
  accent-color: #30a030;
}
.modal .checkbox:hover {
  accent-color: #30a030;
}
.modal .btns {
  margin: 1rem;
}

/* main */
.main {
  margin-top: 60px;
}
.main .container {
  text-align: center;
}
.main .hero {
  padding: 1rem 0;
}
.main .hero img {
  display: block;
  margin: 0 auto;
}
.main section {
  padding: 80px 0;
}
.main section:first-child {
  padding: 1rem 0 0;
}
.main section:first-child h1 {
  color: #37BC69;
}
.main section:nth-child(odd) {
  background: #F5F6F7;
}
.main section .box--white {
  background-color: #FFFFFF;
  padding: 2rem;
  margin-bottom: 2rem;
}
.main section .box--white h4 {
  font-size: 1.5rem;
  font-weight: normal;
  padding-bottom: 2rem;
}
@media (max-width: 768px) {
  .main section .box--white h4 {
    font-size: 1.25rem;
  }
}
.main section .box--white dl {
  max-width: 420px;
  margin: 0 auto;
}
.main section .box--white dl dt {
  float: left;
  width: 40px;
  font-weight: bold;
  padding: 8px 4px;
  border-bottom: 1px solid #EAECEF;
}
.main section .box--white dl dd {
  width: calc(100% - 40px);
  padding: 8px 4px;
  border-bottom: 1px solid #EAECEF;
  text-align: left;
}
@media (max-width: 768px) {
  .main section .box--white dl {
    display: flex;
    flex-direction: column;
  }
  .main section .box--white dl dt {
    width: 100%;
    border: 0;
    text-align: left;
    padding: 4px;
  }
  .main section .box--white dl dd {
    width: 100%;
    margin: 0;
    padding: 4px;
  }
}
.main h1 {
  font-size: 3rem;
  line-height: 1.2;
  padding-bottom: 1rem;
}
@media (max-width: 768px) {
  .main h1 {
    font-size: 2rem;
  }
}
.main h1 span {
  font-size: 1.5rem;
  font-weight: normal;
}
@media (max-width: 768px) {
  .main h1 span {
    font-size: 1.25rem;
  }
}
.main h2 {
  font-size: 2rem;
  padding-bottom: 0.5rem;
}
@media (max-width: 768px) {
  .main h2 {
    font-size: 1.5rem;
  }
}
.main .description {
  padding-bottom: 2rem;
}

.lst__matter {
  display: flex;
  justify-content: center;
  padding-top: 1.5rem;
}
@media (max-width: 768px) {
  .lst__matter {
    flex-direction: column;
  }
}
.lst__matter li {
  flex: 1;
}

.lst__news {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.lst__news span {
  width: -moz-fit-content;
  width: fit-content;
  padding: 1rem;
  border-radius: 0.5rem;
  background: #FFFFFF;
  box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.1);
  font-family: "Noto Serif KR", serif;
}

.lst__step {
  display: flex;
  gap: 72px;
}
@media (max-width: 768px) {
  .lst__step {
    flex-direction: column;
  }
}
.lst__step li {
  position: relative;
  width: calc(33.3333333333% - 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background-color: #F5F6F7;
  padding: 1rem;
}
@media (max-width: 768px) {
  .lst__step li {
    width: 100%;
  }
}
.lst__step li::before {
  content: url(/images/ico__arrow.svg?b81fc77d3ea6d0861ad2db19bbf7c671);
  position: absolute;
  top: 45%;
  right: -3.25rem;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
}
@media (max-width: 768px) {
  .lst__step li::before {
    top: initial;
    right: initial;
    bottom: -3.25rem;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
  }
}
.lst__step li:last-child::before {
  content: none;
}
.lst__step li img {
  width: 88px;
}
.lst__step li span, .lst__step li p {
  font-size: 1rem;
}
.lst__step li h3 {
  font-size: 1.25rem;
}

.lst__solution {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.lst__solution li {
  display: flex;
  gap: 2rem;
  text-align: left;
}
@media (max-width: 768px) {
  .lst__solution li {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .lst__solution li img {
    max-width: 88px;
  }
  .lst__solution li div {
    text-align: center;
  }
}
.lst__solution li div {
  font-size: 1rem;
}
.lst__solution li p {
  margin-top: 0.25rem;
}

/* sub - 문해력 프로그램 */
.sub {
  margin-top: 60px;
  text-align: center;
}
.sub .hero {
  width: 100%;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 214px;
  background-color: #F5F6F7;
}
@media (max-width: 768px) {
  .sub .hero {
    padding: 1rem 0;
  }
}
.sub .hero h2 {
  color: #37BC69;
}
.sub .hero .container {
  display: flex;
  flex-direction: column;
  gap: 40px;
  text-align: center;
}
.sub section {
  padding: 80px 0;
}

.lst__program {
  max-width: 528px;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 1.5rem auto;
}
.lst__program li {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-radius: 1rem;
  padding: 1.5rem;
  background-color: #F5F6F7;
}
.lst__program strong {
  font-size: 2rem;
}
.lst__program b {
  font-size: 1.25rem;
}
.lst__program span {
  font-size: 1.25rem;
}
.lst__program p {
  font-size: 1rem;
}

.step {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3rem 0;
}
.step li {
  position: relative;
  width: 25%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.step li::before {
  content: url(/images/ico__arrow.svg?b81fc77d3ea6d0861ad2db19bbf7c671);
  position: absolute;
  top: 45%;
  right: 0;
}
.step li:last-child::before {
  content: none;
}
.step svg {
  font-size: 3rem;
  color: #BBC2D0;
}
.step small {
  color: #37BC69;
  font-weight: bold;
  font-size: 0.875rem;
}
@media (max-width: 768px) {
  .step {
    gap: 5rem;
  }
  .step li {
    width: 100%;
  }
  .step li::before {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    top: initial;
    right: initial;
    bottom: -3rem;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
  }
}

.lst__guide {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.lst__guide li {
  width: calc(50% - 0.5rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #F5F6F7;
  padding: 2rem 1rem;
}
@media (max-width: 768px) {
  .lst__guide li {
    width: 100%;
  }
}
.lst__guide img {
  width: 88px;
}
.lst__guide dt {
  font-weight: bold;
  margin-bottom: 0.5rem;
}
.lst__guide dd {
  margin: 0;
}

.lst__curriculum {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}
.lst__curriculum li {
  display: flex;
  min-height: 168px;
  border: 1px solid #EAECEF;
}
@media (max-width: 768px) {
  .lst__curriculum li {
    flex-direction: column;
  }
}
.lst__curriculum li .title {
  width: 250px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: #F5F6F7;
}
@media (max-width: 768px) {
  .lst__curriculum li .title {
    width: 100%;
    padding: 2rem 0;
  }
}
.lst__curriculum li .info {
  width: calc(100% - 250px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 1rem;
}
@media (max-width: 768px) {
  .lst__curriculum li .info {
    width: 100%;
  }
}
.lst__curriculum li .info p {
  text-align: left;
  margin-bottom: 1rem;
}
.lst__curriculum li .info p:last-child {
  margin-bottom: 0;
}
.lst__curriculum li dl {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.lst__curriculum li dl dt {
  width: 64px;
  margin: 0;
  font-weight: bold;
}
.lst__curriculum li dl dd {
  width: calc(100% - 64px - 0.5rem);
  margin: 0;
  text-align: left;
}

.tabs__curriculum {
  margin-bottom: 2rem;
}
.tabs__curriculum .tab__link {
  background-color: #F5F6F7;
  border: 2px solid #EAECEF;
}
.tabs__curriculum .tab__link.current {
  border-color: #37BC69;
}

/* 성적향상 이야기 */
.lst__review {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}
.lst__review li {
  width: -moz-fit-content;
  width: fit-content;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background-color: #F5F6F7;
  padding: 1rem;
  border-radius: 1rem;
}
.lst__review li a {
  display: block;
  position: relative;
  opacity: 1;
}
.lst__review li a:hover {
  opacity: 0.8;
}
.lst__review li a img {
  width: 100%;
  max-width: 480px;
  background-color: black;
  aspect-ratio: 16/9;
}

.lity {
  opacity: 0;
}

/* 가맹 안내 */
.banner {
  background-color: #EAECEF;
}
.banner .container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.banner p {
  font-size: 1.25rem;
}
.banner small {
  font-size: 1.25rem;
  font-weight: bold;
}