@charset "UTF-8";
/* FONTSET */
@font-face {
  font-family: "NanumSquareRound";
  font-weight: 200;
  font-style: normal;
  src:
    url("../fonts/NanumSquareRoundL.woff2") format("woff2"),
    url("../fonts/NanumSquareRoundL.woff") format("woff"),
    url("../fonts/NanumSquareRoundL.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "NanumSquareRound";
  font-weight: 500;
  font-style: normal;
  src:
    url("../fonts/NanumSquareRoundR.woff2") format("woff2"),
    url("../fonts/NanumSquareRoundR.woff") format("woff"),
    url("../fonts/NanumSquareRoundR.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "NanumSquareRound";
  font-weight: 700;
  font-style: normal;
  src:
    url("../fonts/NanumSquareRoundB.woff2") format("woff2"),
    url("../fonts/NanumSquareRoundB.woff") format("woff"),
    url("../fonts/NanumSquareRoundB.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "NanumSquareRound";
  font-weight: 800;
  font-style: normal;
  src:
    url("../fonts/NanumSquareRoundEB.woff2") format("woff2"),
    url("../fonts/NanumSquareRoundEB.woff") format("woff"),
    url("../fonts/NanumSquareRoundEB.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "NanumSquareNeo";
  font-weight: 400;
  font-style: normal;
  src:
    url("../fonts/NanumSquareNeo/NanumSquareNeoTTF-Rg.woff2") format("woff2"),
    url("../fonts/NanumSquareNeo/NanumSquareNeoTTF-Rg.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "NanumSquareNeo";
  font-weight: 700;
  font-style: normal;
  src:
    url("../fonts/NanumSquareNeo/NanumSquareNeoTTF-Bd.woff2") format("woff2"),
    url("../fonts/NanumSquareNeo/NanumSquareNeoTTF-Bd.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "NanumSquareNeo";
  font-weight: 800;
  font-style: normal;
  src:
    url("../fonts/NanumSquareNeo/NanumSquareNeoTTF-Eb.woff2") format("woff2"),
    url("../fonts/NanumSquareNeo/NanumSquareNeoTTF-Eb.woff") format("woff");
  font-display: swap;
}
/* 260605 추가 */
@font-face {
  font-family: "NanumSquareNeo";
  font-weight: 900;
  font-style: normal;
  src:
    url("../fonts/NanumSquareNeo/NanumSquareNeoTTF-Hv.woff2") format("woff2"),
    url("../fonts/NanumSquareNeo/NanumSquareNeoTTF-Hv.woff") format("woff");
  font-display: swap;
}

/* RESET */
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  /* 260605 추가 */
  font-family: "NanumSquareRound", "Malgun Gothic", Arial, "Dotum", sans-serif;
}
body {
  overflow: hidden;
}
@media (max-width: 1024px) {
  body {
    overflow-x: auto;
  }
}
table {
  width: 100%;
  table-layout: fixed;
}
table,
table tr {
  border-collapse: inherit;
}
table,
table tr,
table td,
table th,
table thead,
table tbody,
table tfoot,
table caption {
  border-collapse: collapse;
  border-spacing: 0;
}
a {
  vertical-align: baseline;
  text-decoration: none;
}
html,
body,
h1,
h2,
h3,
h4,
h5,
div,
p,
span,
i,
em,
b,
strong,
ul,
ol,
li,
dl,
dt,
dd,
img,
button,
a,
table,
tr,
th,
td,
thead,
tbody,
tfoot,
header,
footer,
nav,
aside,
main,
article,
section,
hgroup,
details,
figure,
figcaption,
mark,
time,
address,
summary,
label,
input,
textarea,
::before,
::after {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: inherit; /* 260605 수정 */
  box-sizing: border-box;
  word-break: break-all;
}
button {
  background-color: transparent;
}
button:not(:disabled) {
  cursor: pointer;
}
ul,
ol,
li,
dl,
dt,
dd {
  list-style: none;
}
input {
  outline: none;
}
body {
  overflow: hidden;
  overflow-y: auto;
  min-width: 1024px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.wrap {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 100%;
  min-width: 720px;
  background-color: #edf1fc;
}
header {
  flex-shrink: 0;
  flex-grow: 0;
  position: relative;
  z-index: 11;
}
.container {
  flex-shrink: 1;
  flex-grow: 1;
  overflow: hidden;
}

.contents-area {
  margin: 0 auto;
  padding-bottom: 100px;
}
.contents--title {
  position: relative;
  background: linear-gradient(93.71deg, #6562f5 -8.53%, #9b68f3 99.07%);
}
.contents--title::before {
  position: absolute;
  width: 231px;
  height: 116px;
  top: 0;
  left: 0;
  background-image: url(../images/img/titlebg-left.png);
  content: "";
}
.contents--title__box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  position: relative;
  height: 100%;
  padding-top: 40px;
  padding-bottom: 40px;
  margin: 0 auto;
}
.contents--title__box::after {
  position: absolute;
  width: 278px;
  height: 91px;
  bottom: 0;
  right: -278px;
  background-image: url(../images/img/titlebg-right.png);
  content: "";
}
.contents--title__text {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: #ffffff;
  font-weight: 700;
  font-size: 32px;
}
@media (max-width: 1199px) {
  .contents--title__text {
    font-size: 24px;
  }
}
.contents--title__center {
  color: #ffffff;
  font-size: 24px;
  font-weight: 800;
}
.contents--title__right {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: #ffffff;
}
.contents--title.no-bg::before {
  display: none;
}
.contents--title.no-bg .contents--title__text {
  font-size: 28px;
}
.contents--title.no-bg .contents--title__box {
  height: 86px;
  padding-top: 19px;
  padding-bottom: 19px;
}
.contents--title.no-bg .contents--title__box::after {
  display: none;
}
footer .footer--wrapper,
header .header--wrapper,
.contents-area,
.contents--title__box {
  max-width: 1200px;
  padding-left: 36px;
  padding-right: 36px;
}
@media (max-width: 1199px) {
  footer .footer--wrapper,
  header .header--wrapper,
  .contents-area,
  .contents--title__box {
    padding-left: 80px;
    padding-right: 80px;
  }
}
@media (max-width: 768px) {
  footer .footer--wrapper,
  header .header--wrapper,
  .contents-area,
  .contents--title__box {
    padding-left: 20px;
    padding-right: 20px;
  }
}
header .header--wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
}
header .header--utill {
  display: flex;
  align-items: center;
  gap: 12px;
}

footer {
  position: relative;
}
footer .footer--wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-top: 53px;
  padding-bottom: 66px;
  margin: 0 auto;
}
footer .footer--logo {
  width: calc(100% + 52px);
  margin-top: -16px;
  margin-bottom: 72px;
  font-size: 0;
  display: flex;
  justify-content: space-between;
}
footer .footer--logo a {
  vertical-align: top;
  display: inline-block;
  margin: 16px 24px;
  width: 100% !important;
  height: 26px !important;
  background-size: contain !important;
  background-repeat: no-repeat;
  background-position: center;
  margin: 0;
}
footer .footer--logo .logo-01 {
  width: 133px;
  height: 34px;
  background-size: auto 34px;
}
footer .footer--logo .logo-02 {
  width: 120px;
  height: 35px;
  background-size: auto 35px;
}
footer .footer--logo .logo-03 {
  width: 171px;
  height: 24px;
  background-size: auto 24px;
}
footer .footer--logo .logo-04 {
  width: 92px;
  height: 29px;
  background-size: auto 29px;
}
footer .footer--logo .logo-05 {
  width: 193px;
  height: 33px;
  background-size: auto 33px;
}
footer .footer--logo .logo-06 {
  width: 157px;
  height: 27px;
  background-size: auto 27px;
}
footer .footer--bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
}
footer .footer--text {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 22px;
  margin-bottom: 18px;
}
footer .footer--text:first-child {
  margin-bottom: 38px;
}
footer .footer--text:last-child {
  margin-bottom: 0;
}
footer .footer--text-title {
  font-size: 18px;
  font-weight: 700;
}
footer .footer--text-cont,
footer .footer--text-cont span {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
footer .footer--text:last-child .footer--text-cont {
  flex-direction: column;
  gap: 0;
  align-items: flex-start;
}
footer .footer--text-cont a {
  margin-right: 10px;
}
footer .footer--copy {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 24px;
}
footer .footer--copy-logo {
  width: 200px;
  height: 54px;
}
footer .footer--copy-text {
  font-size: 18px;
}
footer .footer--logo .logo-01 {
  background-image: url("../images/img/footer-01-white.svg"); /* [KT요청 : 230911] 경기도 교육청 하얀색 추가 */
}
footer .footer--logo .logo-02 {
  background-image: url("../images/img/footer-02.png");
}
footer .footer--logo .logo-03 {
  background-image: url("../images/img/footer-03.png");
}
footer .footer--logo .logo-04 {
  background-image: url("../images/img/footer-04.png");
}
footer .footer--logo .logo-05 {
  background-image: url("../images/img/footer-logo5-dark.png");
}
footer .footer--logo .logo-06 {
  background-image: url("../images/img/footer-logo6-white.png");
}
footer .footer--text-title {
  color: #ffffff;
}
footer .footer--text-cont a {
  color: #ffffff;
}
footer .footer--text-cont span {
  color: rgba(255, 255, 255, 0.6);
}
footer .footer--text-cont span:not(:first-child)::before {
  background-color: rgba(255, 255, 255, 0.3);
}
footer .footer--copy-logo {
  background-image: url("../images/img/footer-logo-white.png");
}
footer .footer--copy-text {
  color: rgba(255, 255, 255, 0.4);
}
/* PAGE NAVIGATION */
.pagenavi--box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 15px;
}
.pagenavi--box button:not(.button-main),
.pagenavi--box a:not(.button-main) {
  height: 28px;
  background-size: auto 12px;
  text-align: center;
}
.pagenavi--box button:not(.button-main):disabled,
.pagenavi--box button:not(.button-main).is--disabled,
.pagenavi--box a:not(.button-main):disabled,
.pagenavi--box a:not(.button-main).is--disabled {
  opacity: 0.1;
}
.pagenavi--box.pagenavi--step {
  position: relative;
}
.pagenavi--box.pagenavi--step .pagenavi--number__area {
  width: 180px;
  text-align: center;
  flex-shrink: 0;
}
.pagenavi--box.pagenavi--step .pagenavi--number {
  display: inline-flex;
}
.pagenavi--box.pagenavi--step .pagenavi--number + .pagenavi--number {
  gap: inherit;
}
.pagenavi--box.pagenavi--step .pagenavi--number + .pagenavi--number::before {
  content: "/";
  display: inline-block;
  vertical-align: middle;
}
.pagenavi--box.pagenavi--step .pagenavi--number .input-box--text {
  font-size: 20px;
  font-weight: 700;
  width: 50px;
  height: 30px;
  min-height: 30px;
  padding: 3px 4px 6px;
  text-align: center;
}
.pagenavi--box.pagenavi--step .pagenavi--arrow {
  margin-left: 6px;
  margin-right: 6px;
  flex-shrink: 0;
  width: auto;
}
.pagenavi--box.pagenavi--step .is--prev {
  background: none;
}
.pagenavi--box.pagenavi--step .is--prev::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 7px;
  height: 100%;
  background-image: url("../images/ico/left-black.svg");
  background-position: 0 50%;
  background-repeat: no-repeat;
  margin-right: 10px;
}
.pagenavi--box.pagenavi--step .is--next {
  background: none;
}
.pagenavi--box.pagenavi--step .is--next::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 7px;
  height: 100%;
  transform: rotate(180deg);
  background-image: url("../images/ico/left-black.svg");
  background-position: 0 50%;
  background-repeat: no-repeat;
  margin-left: 10px;
}
.pagenavi--arrow {
  height: 28px;
  background-color: transparent;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  color: transparent;
  font-size: 0;
}
.pagenavi--arrow.is--prev,
.pagenavi--arrow.is--next {
  width: 6px;
}
.pagenavi--arrow.is--first,
.pagenavi--arrow.is--last {
  width: 12px;
}
.pagenavi--arrow.is--first {
  margin-right: 5px;
  background-image: url("../images/ico/arrow-first-gray.svg");
}
.pagenavi--arrow.is--prev {
  margin-right: 12px;
  background-image: url("../images/ico/arrow-prev-gray.svg");
}
.pagenavi--arrow.is--next {
  margin-left: 12px;
  background-image: url("../images/ico/arrow-next-gray.svg");
}
.pagenavi--arrow.is--last {
  margin-left: 5px;
  background-image: url("../images/ico/arrow-last-gray.svg");
}
.pagenavi--arrow.is--disabled {
  opacity: 0.1;
}
.pagenavi--number {
  color: #808080; /* 260309 수정 */
  font-size: 16px;
  line-height: 30px;
}
.pagenavi--number.active {
  min-width: 28px;
  height: 28px;
  padding: 0 4px;
  border-radius: 28px;
  background-color: #7e44fb;
  color: #ffffff;
  font-weight: 800;
}
/* TAB */
.tab-box {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  height: 55px;
  gap: 6px;
}
.tab-box.tab-fit:not(.tab-text) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
}
.tab-box.tab-fit:not(.tab-text) .tab--button {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-top: 2px;
  padding-left: 12px;
  padding-right: 12px;
}
.tab--button {
  min-width: 228px;
  margin-top: 11px;
  background-color: #e3e4f8;
  border-radius: 20px 20px 0 0;
  color: #000000;
  font-size: 18px;
}
.tab--button .num {
  margin-left: 20px;
}
.tab--button.active {
  margin-top: 0;
  background-color: #ffffff;
  font-size: 20px;
  font-weight: 700;
}
.tab--button.active .num {
  color: #7e44fb;
}
.tab--contents {
  display: none;
  border-radius: 0 0 20px 20px;
}
.tab--contents.is--bg {
  background-color: #ffffff;
}
.tab--contents.active {
  display: block;
}
.tab-xl .tab--button {
  min-width: 268px;
}
.tab-double .tab--button {
  width: 50%;
  min-width: auto;
}
.tab-triple .tab--button {
  width: 33.3333%;
  min-width: auto;
}
.tab-quadruple .tab--button {
  width: 25%;
  min-width: auto;
}
.tab-quintuple .tab--button {
  width: 20%;
  min-width: auto;
}
.tab-full .tab--button {
  width: 100%;
  min-width: auto;
}
.tab-week .tab--button {
  width: calc((100% - 36px) / 7);
  min-width: 0;
}
.tab-fit .tab--button {
  flex-shrink: 1;
  flex-grow: 1;
  width: auto;
  min-width: 0;
}
.tab-text {
  height: 59px;
  border-bottom: 1px solid #d9d9d9;
}
.tab-text .tab--button {
  margin-top: 0;
  padding-top: 4px;
  background-color: transparent;
  border-bottom: 4px solid transparent;
  color: rgba(0, 0, 0, 0.6);
  font-weight: 700;
}
.tab-text .tab--button.active {
  border-bottom-color: #7e44fb;
  color: #7e44fb;
  font-weight: 700;
  font-size: 18px;
}

/* TEXT TYPE */
.text-title {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.text-title.is--between {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.text-title.is--center {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.text-bullet {
  position: relative;
  padding-left: 16px;
  margin-top: 10px;
}
.text-bullet,
.text-bullet p {
  font-size: 12px;
  line-height: 16px;
}
.text-bullet::before {
  position: absolute;
  display: block;
  width: 4px;
  height: 4px;
  top: 5px;
  left: 0;
  background-color: #000000;
  border-radius: 4px;
  opacity: 0.5;
  content: "";
}
.text-bullet.is--light::before {
  opacity: 0.4;
}
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.text-underline--black {
  border-bottom: 1px solid #000000;
}
.text-underline--violet {
  border-bottom: 1px solid #7e44fb;
}
.text-nowrap {
  white-space: nowrap;
}
.text-left {
  text-align: left;
}

/* BUTTON */
.button-main {
  min-width: 165px;
  padding: 0 50px;
  height: 44px;
  border-radius: 8px;
  font-size: 18px;
}
.button-main.is--small {
  min-width: 0;
  height: 40px;
  padding-right: 19px;
  padding-left: 19px;
}
.button-main.is--large {
  height: 56px;
}
.gray.button-tag,
.gray.button-state,
.gray.button-main {
  background-color: #5b5b5b;
  color: #ffffff;
}
.gray.button-tag:hover:not(.dim):not(:disabled),
.gray.button-state:hover:not(.dim):not(:disabled),
.gray.button-main:hover:not(.dim):not(:disabled),
.gray.hover.button-tag,
.gray.hover.button-state,
.gray.hover.button-main {
  background-color: #7b7b7b;
}
.violet.button-tag,
.violet.button-state,
.violet.button-main {
  background-color: #7e44fb;
  color: #ffffff;
}
.violet.button-tag:hover:not(.dim):not(:disabled),
.violet.button-state:hover:not(.dim):not(:disabled),
.violet.button-main:hover:not(.dim):not(:disabled),
.violet.hover.button-tag,
.violet.hover.button-state,
.violet.hover.button-main {
  background-color: #9767ff;
}
.line.button-tag,
.line.button-state,
.line.button-main {
  background-color: #ffffff;
  border: 1px solid #7e44fb;
  color: #7e44fb;
}
.line.button-tag:hover:not(.dim):not(:disabled),
.line.button-state:hover:not(.dim):not(:disabled),
.line.button-main:hover:not(.dim):not(:disabled),
.line.hover.button-tag,
.line.hover.button-state,
.line.hover.button-main {
  background-color: rgba(126, 68, 251, 0.1);
}
.dim.button-main,
.dim.button-sub,
.dim.button-text,
.dim.button-icon,
.dim.button-tag,
.button-main:disabled,
.button-sub:disabled,
.button-text:disabled,
.button-icon:disabled,
.button-tag:disabled {
  opacity: 0.3;
}
.dropdown--select,
.dropdown--box,
.input-box--text,
.input-box--textarea textarea {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 8px;
}
.dropdown--box > .dropdown--item:not(label),
.dropdown--box > .dropdown--item span strong,
.dropdown--box.bg--item .input-check:not(label),
.dropdown--box.bg--item .input-check span strong {
  background-color: transparent;
  border: none;
  color: #000000;
  font-size: 14px;
  line-height: 16px;
}
/* DROP DOWN */
.dropdown--area {
  position: relative;
  display: inline-block;
}
.dropdown--area.open {
  z-index: 30;
}
.dropdown--area.open > .dropdown--box {
  display: flex;
}
.dropdown--area.open > .dropdown--select::after {
  transform: rotate(180deg);
}
.dropdown--area.last > .dropdown--box {
  top: auto;
  bottom: 100%;
  margin-bottom: 4px;
}
.dropdown--area.bg--gray > .dropdown--select {
  background-color: #f6f6f6;
  border-color: #f6f6f6;
}
.dropdown--area.is--large > .dropdown--select {
  padding-top: 20px;
  padding-bottom: 20px;
}
.dropdown--area.is--large > .dropdown--select::after {
  right: 11px;
}
.dropdown--area.is--large.has--data .dropdown--select {
  font-weight: 700;
}
.dropdown--area.is--text > .dropdown--select {
  min-height: auto;
  padding-top: 0;
  padding-right: 19px;
  padding-bottom: 0;
  padding-left: 0;
  background-color: transparent;
  border: none;
  color: #000000;
}
.dropdown--area.is--text > .dropdown--select::after {
  width: 16px;
  height: 16px;
  right: 0;
  margin-top: -8px;
}
.dropdown--area.is--text > .dropdown--select + .dropdown--box {
  width: 122px;
  left: 50%;
  margin-top: 16px;
  margin-left: -48px;
}
.dropdown--area.is--ellipsis > .dropdown--select {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dropdown--area.has--data > .dropdown--select {
  color: #000000;
}
.dropdown--select {
  position: relative;
  width: 100%;
  min-height: 40px;
  padding: 6px 32px 6px 14px;
  color: rgba(0, 0, 0, 0.35);
  font-size: 16px;
  text-align: left;
  line-height: 18px;
}
.dropdown--select::after {
  position: absolute;
  width: 28px;
  height: 28px;
  top: 50%;
  right: 6px;
  margin-top: -14px;
  background-image: url("../images/ico/down-black.svg");
  content: "";
}
.dropdown--box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow-y: auto;
  position: absolute;
  display: none;
  width: 100%;
  max-height: 225px;
  top: 100%;
  margin-top: 4px;
  padding: 9px;
  gap: 6px;
}
.layer-area .dropdown--box {
  max-height: 224px;
}
.dropdown--box > .dropdown--item {
  display: block;
  width: 100%;
  padding: 10px;
  border-radius: 4px;
  text-align: left;
  word-break: break-all;
}
.dropdown--box > .dropdown--item span strong {
  padding-top: 4px;
  padding-bottom: 4px;
}
.dropdown--box > .dropdown--item:hover,
.dropdown--box > .dropdown--item.active {
  background: rgba(126, 68, 251, 0.1);
  font-weight: 700; /* 250611 추가 */
}
.dropdown--box.no--data {
  justify-content: center;
  align-items: center;
  padding: 20px;
  height: 140px;
  color: #a6a6a6;
  font-size: 16px;
  font-weight: 700;
  line-height: 18px;
}

.input-box--text {
  overflow: hidden;
  display: block;
  width: 100%;
  min-height: 40px;
  padding: 6px 14px;
  font-size: 14px;
  text-align: left;
  line-height: 1.14;
  outline: none;
}
.input-box--text::placeholder {
  color: rgba(0, 0, 0, 0.35);
}
.input-box--text::-moz-placeholder {
  color: rgba(0, 0, 0, 0.35);
}
.input-box--text::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.35);
}
.input-box--text.is--large {
  padding-top: 15px;
  padding-bottom: 15px;
  font-size: 18px;
  line-height: 28px;
}
.input-box--text.is--medium {
  padding-top: 14px;
  padding-bottom: 14px;
  font-size: 18px;
  line-height: 20px;
}
.input-box--text.is--round {
  border-radius: 50px;
}
.input-box--text.holder-f-16 {
  font-size: 16px;
}
.input-box--text.holder-f-16::placeholder {
  font-size: 16px;
}
.input-box--text.holder-f-16::-moz-placeholder {
  font-size: 16px;
}
.input-box--text.holder-f-16::-webkit-input-placeholder {
  font-size: 16px;
}
.input-box--text.is--tags {
  overflow: hidden;
  overflow-y: auto;
  justify-content: start;
  align-items: start;
}
.input-box--text.is--tags > .f-14 {
  margin: 2px 0px 0;
}
.input-box--text.is--ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.input-box--text.bg--gray {
  background-color: #f6f6f6;
  border-color: #f6f6f6;
}
.input-box--text.bg--gray input::placeholder {
  color: rgba(0, 0, 0, 0.3);
}
.input-box--text.bg--gray input::-moz-placeholder {
  color: rgba(0, 0, 0, 0.3);
}
.input-box--text.bg--gray input::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.3);
}
.input-box--text.is--pass,
.input-box--text:focus {
  border-color: #7e44fb;
}
.input-box--text.is--error {
  background-color: rgba(250, 66, 37, 0.03);
  border-color: #fa4225;
}
.input-box--text:not(input) {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0;
}
.input-box--text:not(input) input {
  flex-shrink: 1;
  flex-grow: 1;
  align-self: stretch;
  width: 100%;
  padding: 6px 14px;
  padding-right: 7px;
  background-color: transparent;
  font-size: 14px;
  text-align: left;
}
.input-box--required {
  font-size: 12px;
  line-height: 14px;
  font-weight: 700;
}
.input-box--required.is--desc {
  color: #000000;
}
.input-box--required.is--pass {
  color: #7e44fb;
}
.input-box--required.is--error {
  color: #fa4225;
}
.password_box {
  position: relative;
}
.password_box i {
  /* 260519 수정 */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 17px;
  cursor: pointer;
}
.main-eye {
  background-image: url(../images/ico/ic_eye.svg);
}
.main-eye.disabled {
  background-image: url(../images/ico/ic_eye_disabled.svg);
}
.input-check {
  position: relative;
  display: inline-block;
  font-size: 0;
}
.input-check input:not([type="text"]) {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 15;
}
.input-check .input--box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  vertical-align: top;
  display: inline-flex;
  gap: 12px;
  z-index: 5;
}
.input-check .input--box::before {
  flex-shrink: 0;
  flex-grow: 0;
  overflow: hidden;
  display: block;
  width: 24px;
  height: 24px;
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  content: "";
  border-radius: 4px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.input-check input:not([type="text"]):checked + .input--box::before {
  border-color: #7e44fb;
  background-image: url(../images/form/check-color.svg);
  background-color: #7e44fb;
}
.input-radio {
  position: relative;
  display: inline-block;
  font-size: 0;
  margin-top: 2px;
  margin-bottom: 2px;
  flex-shrink: 0;
}
.input-radio input:not([type="text"]) {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0;
  top: 0;
  left: 0;
  opacity: 0;
  z-index: 15;
}
.input-radio input:not([type="text"]):checked + .input--box::before {
  border-color: #7e44fb;
  background-image: url("../images/form/radio-color.svg");
}
.input-radio input:not([type="text"]):checked + .input--box input[type="text"],
.input-radio input:not([type="text"]):checked + .input--box textarea {
  color: #7e44fb;
  font-weight: 700;
}
.input-radio input:not([type="text"]):checked + .input--box input[type="text"].is--border,
.input-radio input:not([type="text"]):checked + .input--box textarea.is--border {
  font-weight: 400;
  color: #000000;
  border-color: #7e44fb;
  background-color: #f2ecff;
}
.input-radio input:not([type="text"]):focus {
  outline: none;
}
.input-radio input:not([type="text"]).is--inner {
  width: 24px;
}
.input-radio .input--box {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  position: relative;
  vertical-align: top;
  display: inline-flex;
  gap: 12px;
  z-index: 5;
}
.input-radio .input--box::before {
  flex-shrink: 0;
  flex-grow: 0;
  overflow: hidden;
  display: block;
  width: 24px;
  height: 24px;
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  content: "";
  border-radius: 24px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  color: transparent;
  font-size: 0;
}
.input-radio .input--box .input--text {
  padding: 3px 0;
  color: #000000;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.125;
}
.input-radio .input--box.is--middle {
  align-items: center;
}
.input-radio.is--small .input--box::before {
  width: 18px;
  height: 18px;
}
.input-radio.is--small .input--box .input--text {
  padding: 0;
}
.input-radio.text-black input:checked + .input--box,
.input-radio.text-black input:checked + .input--box .input--text {
  color: #000000;
}
.input-radio.is--violet input:checked + .input--box,
.input-radio.is--violet input:checked + .input--box .input--text {
  color: #7e44fb;
  font-weight: 700;
}
input:checked + .input-radio.input--out .input--box::before {
  border-color: #7e44fb;
  background-image: url("../images/form/radio-color.svg");
}

.input-box--text {
  overflow: hidden;
  display: block;
  width: 100%;
  min-height: 40px;
  padding: 6px 14px;
  font-size: 14px;
  text-align: left;
  line-height: 1.14;
  outline: none;
}
.input-box--text::placeholder {
  color: rgba(0, 0, 0, 0.35);
}
.input-box--text::-moz-placeholder {
  color: rgba(0, 0, 0, 0.35);
}
.input-box--text::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.35);
}
.input-check .input--box .input--text {
  padding: 3px 0;
  color: #000000;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.125;
}
.input-box__timer {
  position: relative;
  margin-top: 20px;
}
.input-box__timer input {
  padding-right: 79px;
}
.input-box__timer .timer {
  position: absolute;
  top: 12px;
  right: 13px;
  color: #fa4225;
  font-size: 16px;
  line-height: 18px;
  font-weight: 700;
}
.sr_only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: polygon(0 0, 0 0, 0 0);
  white-space: nowrap;
  border: 0;
}
.ico-20 {
  display: inline-block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background-color: transparent;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  color: transparent;
  font-size: 0;
}
.ico-24 {
  display: inline-block;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  background-color: transparent;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  color: transparent;
  font-size: 0;
  background-repeat: no-repeat;
}
.ico-28 {
  display: inline-block;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  background-color: transparent;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  color: transparent;
  font-size: 0;
  background-repeat: no-repeat;
}
.ico-40 {
  display: inline-block;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background-color: transparent;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  color: transparent;
  font-size: 0;
  background-repeat: no-repeat;
}
.ico-main-close-black {
  background-image: url(../images/ico/main-close-black.svg);
}
.ico-main-search-black {
  background-image: url("../images/ico/main-search-black.svg");
}
.ico-cancel-white {
  background-image: url(../images/ico/cancel-white.svg);
}

.f-center {
  text-align: center;
}
.f-black-50 {
  color: rgba(0, 0, 0, 0.5);
}
.f-black-60 {
  color: rgba(0, 0, 0, 0.6);
}
.f-black-80 {
  color: rgba(0, 0, 0, 0.8);
}
.f-black-100 {
  color: black;
}
.f-violet-active {
  color: #7e44fb !important;
}
.f-violet-title {
  color: #341761;
}
.f-red {
  color: #fa4225;
}
.f-bold {
  font-weight: 700;
}
.f-extrabold {
  font-weight: 800;
}
.f-16-sb {
  font-size: 16px !important;
  line-height: 18px;
  font-weight: 700;
}
.f-16-m {
  font-size: 16px;
  line-height: 22px;
}
.f-18-n {
  font-size: 18px;
  line-height: 18px;
}
.f-18-m {
  font-size: 18px;
  line-height: 22px;
}
.f-18-l {
  font-size: 18px;
  line-height: 30px;
}
.vertical-top {
  vertical-align: top;
}
.f-18-l-sb {
  font-size: 18px;
  font-weight: 700;
  line-height: 21px;
}
.lh-20 {
  line-height: 20px !important;
}
.lh-28 {
  line-height: 28px !important;
}
.lh-30 {
  line-height: 30px !important;
}
.margin-t-2 {
  margin-top: 2px !important;
}
.margin-t-6 {
  margin-top: 6px !important;
}
.margin-t-10 {
  margin-top: 10px !important;
}
.margin-t-12 {
  margin-top: 12px !important;
}
.margin-t-14 {
  margin-top: 14px !important;
}
.margin-t-20 {
  margin-top: 20px !important;
}
.margin-t-24 {
  margin-top: 24px !important;
}
.margin-t-28 {
  margin-top: 28px !important;
}
.margin-t-55 {
  margin-top: 55px !important;
}
.padding-t-34 {
  padding-top: 34px !important;
}
.padding-t-48 {
  padding-top: 48px !important;
}
.padding-b-34 {
  padding-bottom: 34px !important;
}
.width-320 {
  width: 320px;
}
.width-520 {
  width: 520px !important;
}
.flex--column {
  display: flex;
  flex-direction: column !important;
}
.gap-10 {
  gap: 10px;
}
.gap-12 {
  gap: 12px;
}
.table--setting {
  display: flex;
  flex-direction: row;
  align-items: center;
}
.table--setting.is--between {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.table--setting button:not([class^="dropdown-"]) {
  font-size: 18px;
}
.swiper-pagination {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.tooltip--box {
  position: absolute;
  display: none;
  left: 50%;
  transform: translateX(-50%);
  will-change: filter; /* 250324 추가 */
  filter: drop-shadow(0px 4px 4px #000000);
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.1));
  z-index: 15;
}
.tooltip--box-inner {
  position: relative;
  min-width: 146px;
}
.tooltip--box-inner::after,
.tooltip--box-inner::before {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  margin-top: 1px;
  top: 0;
  left: 66px;
  transform: translateY(-100%) rotate(180deg);
  content: "";
}
.tooltip--box-inner::after {
  border-width: 11px 7px 0 7px;
  border-color: #ffffff transparent transparent transparent;
  border-style: solid;
  z-index: 15;
}
.tooltip--box-inner::before {
  margin-left: -1px;
  border-width: 12.68px 8.68px 0 8.68px;
  border-color: rgba(0, 0, 0, 0.2) transparent transparent transparent;
  border-style: solid;
  z-index: 10;
}
.tooltip--box-text {
  position: relative;
  background: #ffffff;
  padding: 11px 24px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  white-space: nowrap;
  z-index: 7;
}
.tooltip--box-text.text-line {
  white-space: normal;
}
.tooltip--box-text strong {
  font-weight: 700;
}
.tooltip--box-wrap {
  vertical-align: middle;
  position: relative;
  display: inline-block;
  max-width: 100%;
  margin-top: -1px;
  line-height: 1;
  color: inherit;
}
.tooltip--box-wrap .tooltip--box {
  display: none;
  top: calc(100% + 8px);
  margin-left: 1px;
}
.tooltip--box-wrap .tooltip--box:not(.arrow--center):not(.arrow--right) {
  left: -64px;
  transform: translateX(0);
}
.tooltip--box-wrap .tooltip--button {
  cursor: pointer;
}
.tooltip--box-wrap .tooltip--button .f-12 {
  padding-top: 2px;
}
@media (min-width: 1200px) {
  /* 250728 태블릿 화면 hover 제외 */
  .tooltip--box-wrap .tooltip--button:hover + .tooltip--box {
    display: block;
  }
}
/* 250728 태블릿 화면 hover 제외
.tooltip--box-wrap .tooltip--button:hover + .tooltip--box, */
.tooltip--box-wrap .tooltip--button.open + .tooltip--box {
  display: block;
}
.tooltip--box-wrap .tooltip--button.type--hover {
  cursor: pointer;
}
.tooltip--box-wrap .tooltip--button.type--hover .tooltip--box {
  display: none;
}
.tooltip--box-wrap .tooltip--button.type--hover:hover + .tooltip--box {
  display: block;
}
.tooltip--box-wrap .tooltip--button.type--ico {
  line-height: 24px;
  background-size: auto 18px;
  background-image: url("../images/ico/arrow-next-black.svg");
  background-repeat: no-repeat;
  padding-right: 20px;
  background-position-x: 100%;
  background-position-y: calc(100% - 3px);
}
.tooltip--box-wrap .tooltip--button.button-icon:hover:not(.dim):not(:disabled),
.tooltip--box-wrap .tooltip--button.button-icon:hover.hover {
  background-color: transparent;
}
.tooltip--box-wrap .clone {
  position: fixed;
  display: block !important;
  top: 0;
  left: 0;
  max-height: 100% !important;
  text-overflow: inherit !important;
  overflow: inherit !important;
}
.tooltip--box-wrap.is--ellipsis {
  font-size: 0;
}
.tooltip--box-wrap.is--ellipsis .tooltip--button {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.tooltip--box-wrap.is--ellipsis a {
  display: inline-block;
  color: #000000;
}
.tooltip--box-wrap.is--ellipsis .tooltip--box.hide {
  display: none;
  visibility: hidden;
}
.tooltip--box-wrap.is--ellipsis.is--line2 .tooltip--button {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
}
.tooltip--box-wrap.cursor--default .tooltip--button {
  cursor: default;
}
.tooltip--box.shadow--none .tooltip--box-text .tooltip--box-inner::before {
  box-shadow: none;
}
.tooltip--box.is--up .tooltip--box-inner::before,
.tooltip--box.is--up .tooltip--box-inner::after {
  top: auto;
  bottom: 0;
  margin-top: 0;
  margin-bottom: 1px;
  transform: translateY(100%);
}
.tooltip--box.is--up.arrow--center .tooltip--box-inner::after,
.tooltip--box.is--up.arrow--center .tooltip--box-inner::before {
  transform: translate(-50%, 100%);
}
.tooltip--box.arrow--center .tooltip--box-inner::after,
.tooltip--box.arrow--center .tooltip--box-inner::before {
  left: 50%;
  transform: translate(-50%, -100%) rotate(180deg);
}
.tooltip--box.arrow--center .tooltip--box-inner::before {
  margin-left: 0;
}
.tooltip--box.arrow--right {
  right: -64px;
  left: auto;
  transform: none;
}
.tooltip--box.arrow--right .tooltip--box-inner::after,
.tooltip--box.arrow--right .tooltip--box-inner::before {
  left: auto;
  right: 66px;
  transform: translateY(-100%) rotate(180deg);
}
.tooltip--box.arrow--right .tooltip--box-inner::before {
  margin-left: 0;
  margin-right: -1px;
}
.tooltip--box.is--violet .tooltip--box-inner::after {
  border-color: #7e44fb transparent transparent transparent;
}
.tooltip--box.is--violet .tooltip--box-inner::before {
  display: none;
}
.tooltip--box.is--violet .tooltip--box-text {
  padding: 9px 24px;
  border-color: #7e44fb;
  background-color: #7e44fb;
  border-radius: 40px;
  color: #ffffff;
}
.tooltip--box.width-310 {
  width: 310px;
}
.tooltip--box.width-310 .tooltip--box-text {
  padding-left: 19px;
  padding-right: 19px;
}
.tooltip--box.is--round .tooltip--box-inner::before {
  display: none;
}
.tooltip--box.is--round .tooltip--box-text {
  border: none;
  padding-right: 16px;
  padding-left: 16px;
  border-radius: 50px;
}
.tooltip--box.is--small .tooltip--box-text {
  padding: 10px 23px;
}
.tooltip--box.title-aitest:not(.arrow--center):not(.arrow--right) {
  top: calc(100% + 12px);
  left: -143px;
}
.tooltip--box.title-aitest .tooltip--box-inner::after,
.tooltip--box.title-aitest .tooltip--box-inner::before {
  left: 149px;
}

/* 251212 영상, 이미지, 표(에디터 관련) */
[data-joditiframewrapper="1"] {
  position: relative;
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  max-width: 544px;
}
[data-joditiframewrapper="1"] iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.box--detail-editor img,
.mypage-terms--box img,
.td-content--box img {
  max-width: 100% !important;
  height: auto !important;
}
.detail table,  /* 공지 팝업 */
.box--detail-editor table,
.mypage-alram.noti table, /* 알림 */
.mypage-terms--box table, /* 약관 */
.td-content--box .contents table /* 자주 묻는 질문 */ {
  margin-bottom: 1em;
  margin-top: 1em;
  max-width: 100%;
}
.detail th,
.detail td,
.box--detail-editor th,
.box--detail-editor td,
.mypage-alram.noti th,
.mypage-alram.noti td,
.mypage-terms--box table th,
.mypage-terms--box table td,
.tr-80 .td-content--box .contents table th,
.tr-80 .td-content--box .contents table td {
  padding: 10px;
  border: 1px solid #dadada;
  overflow-wrap: break-word;
  vertical-align: middle;
  background-color: #fff;
}
.tr-80 .td-content--box .contents table th,
.tr-80 .td-content--box .contents table td {
  height: auto;
  font-size: 14px;
  line-height: 22px;
  text-align: left;
}

/* landing */
.login--student-info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.login--student-info .dropdown--area {
  max-width: 107px;
}
/* 260605 수정 */
.landing-page {
  font-family: "NanumSquareNeo", "NanumSquareRound", Arial, sans-serif;
}
.top-banner {
  font-family: "NanumSquareRound", Arial, sans-serif;
}
.landing-page {
  background-color: #fff;
}
.landing-page footer {
  background-color: #333;
}
.landing-header {
  position: absolute;
  top: 0;
  width: 100%;
  min-width: 1024px;
}
.landing-header header {
  background: transparent;
}
.landing-header .header--wrapper {
  padding-top: 0;
}
.landing-header .header--logo {
  min-width: 200px;
  height: 40px;
}
.landing-header .header--logo a {
  display: block;
  width: 100%;
  height: 100%;
  background-size: auto 40px;
  background-repeat: no-repeat;
  background-position: left center;
}
.landing-header .landing-header--menu {
  border-radius: 0 0 16px 16px;
  background: #232e4d;
  box-shadow: 4px 4px 32px 0 rgba(20, 31, 51, 0.12);
  backdrop-filter: blur(20px);
}
.landing-header .landing-header--menu:hover {
  background: #4d5d8a;
}
.landing-header .landing-header--menu button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 19px 20px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: normal;
}
.main-landing {
  position: relative;
  height: 100dvh;
  min-height: 900px;
}
.main-landing--banner {
  height: 100%;
}
.main-landing--banner .banner-item {
  background-color: #fff;
}
.main-landing--banner .banner-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: crisp-edges;
  image-rendering: -webkit-optimize-contrast;
}
.main-landing-indicator {
  pointer-events: auto;
  position: absolute;
  bottom: 60px;
  left: 36px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.main-landing-indicator .swiper-button-prev,
.main-landing-indicator .swiper-button-next {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  width: 48px;
  height: 48px;
}
.main-landing-indicator .swiper-button-prev::after,
.main-landing-indicator .swiper-button-next::after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: 48px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url("../images/ico/ic_indicator_arrow_black.svg");
}
.main-landing-indicator .swiper-button-prev::after {
  transform: rotate(180deg);
}
.main-landing-indicator .swiper-button-prev:hover::after,
.main-landing-indicator .swiper-button-next:hover::after {
  background-color: rgba(0, 0, 0, 0.08);
}
.main-landing-indicator .swiper-pagination {
  gap: 8px;
  align-items: center;
  margin-top: 0;
}
.main-landing-indicator .swiper-pagination-bullet {
  width: 16px;
  height: 16px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
}
.main-landing-indicator .swiper-pagination-bullet-active {
  margin-top: 0;
  width: 32px;
  background: #232e4d;
}
.main-landing-indicator .swiper-button-disabled {
  opacity: 0.3;
  cursor: auto;
  pointer-events: none;
}
.main-landing .main-login--scroll {
  z-index: 1;
  position: absolute;
  left: 60px;
  bottom: 60px;
  transform: none;
  width: 24px;
  height: 137px;
  background-image: url(../images/main/scrolldown-black.svg);
  background-size: contain;
}
.main-landing .contents-area {
  z-index: 1;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  padding-bottom: 0;
  width: 100%;
  height: 164px;
  pointer-events: none;
}
.landing-login {
  pointer-events: auto;
  position: absolute;
  right: 36px;
  bottom: 60px;
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 24px 24px 24px 32px;
  border-radius: 20px;
  background: #fff;
  box-shadow: 4px 8px 40px 0 rgba(22, 73, 110, 0.04);
}
.landing-login .tit {
  flex-shrink: 0;
  color: #000;
  font-size: 24px;
  font-weight: 800;
}
.landing-login .landing-login--button {
  display: flex;
  gap: 12px;
}
.landing-login .login--item {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
  min-width: 82px;
  height: 56px;
  padding: 18px 16px;
  border-radius: 12px;
  font-size: 18px;
  font-weight: 800;
  color: #232e4d;
  background: #ebf0f5;
}
.landing-login .login--item.is--onepass {
  padding: 18px 18px 18px 14px;
  color: #2a448c;
  background: #e5efff;
}
.landing-login .login--item:hover {
  background: #d8e0e8;
}
.landing-login .login--item.is--onepass:hover {
  background: #bed5fa;
}
.landing-login .main-login--icon {
  flex-shrink: 0;
  display: block;
  width: 28px;
  height: 28px;
  background-size: contain;
  background-image: url(../images/main/ic_edupass.png);
}
.landing-login .login-form-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.landing-login .form-container {
  display: flex;
  gap: 24px;
  padding: 24px 24px 24px 32px;
  min-height: auto !important;
  border-radius: 20px;
  background: #fff;
  box-shadow: 8px 8px 48px 0 rgba(20, 31, 51, 0.1);

  display: none;
  opacity: 0;
  transform: translateY(24px) scale(0.985);
  transform-origin: bottom;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.landing-login .form-container.is-active {
  display: flex;
  opacity: 1;
  transform: translateY(0) scale(1);
}
.landing-login .form-container .tit {
  padding-top: 14px;
}
.landing-login .login--form {
  flex: 1;
  padding: 20px 24px;
  border-radius: 12px;
  background: #f7f9fa;
}
.landing-login .login--form-title {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 16px;
  padding: 0 0 0 4px;
  color: #232e4d;
  font-size: 20px;
  font-weight: 800;
  line-height: normal;
}
.landing-login .login--form-box {
  padding: 0;
}
.landing-login .login--contents {
  display: flex;
  gap: 16px;
}
.landing-login .login--form-title__close {
  display: block;
  width: 28px;
  height: 28px;
  color: transparent;
  font-size: 0;
  background-image: url(../images/ico/cancel-49.svg);
}
.landing-login .login--input {
  flex: 1;
  height: auto;
}
.landing-login .login--input input::placeholder,
.landing-login .login--input .dropdown--select {
  font-size: 16px;
  color: #999;
}
.landing-login .dropdown--area.disabled .dropdown--select {
  border-color: #f3f3f3;
  color: #d9d9d9;
  pointer-events: none;
}
.landing-login .dropdown--area.disabled .dropdown--select::after {
  background-image: url(../images/ico/ic_down.svg);
}
.landing-login .input-box--text,
.landing-login .dropdown--select {
  height: 44px;
  font-size: 16px;
}
.landing-login .input-box--text:focus {
  border-color: #3e63ad;
}
.landing-login .input-search {
  position: relative;
}
.landing-login .input-search input[readonly] {
  cursor: pointer;
}
.landing-login .input-search i {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.landing-login .dropdown--area.has--data > .dropdown--select {
  color: #000;
}
.landing-login .login--student-info .dropdown--area {
  flex: 1;
}
.landing-login .login--student-info .dropdown--select {
  padding-right: 40px;
}
.landing-login .login--student-info .dropdown--select::after {
  right: 12px;
  margin-top: -12px;
  width: 24px;
  height: 24px;
  background-image: url("../images/ico/down-stroke2-black.svg");
}
.landing-login .dropdown--area.open .dropdown--select {
  border: 1px solid #3e63ad;
}
.landing-login .dropdown--box {
  border: 1px solid #d9d9d9;
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
}
.landing-login .dropdown--item:not(label) {
  padding: 6px;
  font-size: 16px;
  color: #494949;
  line-height: normal;
}
.landing-login .dropdown--item:hover,
.landing-login .dropdown--item.active {
  color: #000;
  background: #e5efff;
}
.landing-login .input-box--required {
  margin-top: 8px;
  padding: 0 4px;
  line-height: 1.4;
  opacity: 0.8;
}
.landing-login .input-box--required.is--error {
  color: #ff3a3a;
}
.landing-login .input-box--required.is--desc {
  color: #333;
}
.landing-login .login--remember {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
}
.landing-login .login--remember-findbox {
  display: flex;
  align-items: center;
  gap: 10px;
}
.landing-login .login--remember-find {
  color: rgba(0, 0, 0, 0.6);
  font-size: 16px;
}
.landing-login .login--remember-findbox .divider {
  width: 1px;
  height: 10px;
  background-color: #666;
  opacity: 0.3;
}
.landing-login .input-check .input--text {
  color: #333;
}
.landing-login .input-check .input--box {
  align-items: center;
  gap: 8px;
}
.landing-login .input-check .input--box::before {
  border-color: #b3b3b3;
}
.landing-login .input-check input:not([type="text"]):checked + .input--box::before {
  border-color: #3e63ad;
  background-color: #3e63ad;
  background-image: url(../images/form/ic-check-white.svg);
  background-size: 13px;
  background-position: center;
}
.landing-login .col-login--button {
  padding: 0 18px;
  min-width: 88px;
  height: auto;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  background: #232e4d;
  border-radius: 8px;
}
.landing-login .col-login--button:hover {
  background-color: #4d5d8a;
}
.landing-login .col-login--button:disabled {
  opacity: 1;
  color: #b3b3b3;
  background-color: #e6e6e6;
}
.landing-login .otp-box-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}
.landing-login .otp-box-wrap .otp-box {
  position: relative;
  flex: 1;
}
.landing-login .otp-box-wrap .input-box--text {
  padding-right: 65px;
}
.landing-login .otp-box-wrap .time {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  color: #ff3a3a;
  font-size: 13px;
  font-weight: 700;
  line-height: normal;
}
.landing-login .otp-box-wrap .button-main {
  padding: 0 16px;
  min-width: 80px;
  color: #2a448c;
  font-size: 16px;
  font-weight: 700;
  border: 1px solid #3e63ad;
  background: #e5efff;
}
.landing-login .otp-box-wrap .button-main:hover {
  background: #bed5fa;
}
.landing-page .main-howto {
  margin: 0;
  padding: 100px 0 20px;
}
.landing-page .main-howto .main-title {
  margin-bottom: 32px;
}
.landing-page .main-notice-area {
  background: #f2f4f7;
}
.landing-page .main-notice {
  padding: 100px 0 20px;
}
.landing-page .main-notice--box {
  margin-top: 32px;
}
@media (max-width: 1399px) {
  .main-landing .main-login--scroll {
    left: 20px;
    bottom: 160px;
  }
  .main-landing {
    height: auto;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }
}
/* 헤더버튼, 스크롤다운, 슬라이드 페이지네이션 하얀색으로 변경 시 landing-dark클래스 추가 */
.landing-dark .main-landing .main-login--scroll {
  background-image: url(../images/main/scrolldown-white.svg);
}
.landing-dark .main-landing-indicator .swiper-button-prev::after,
.landing-dark .main-landing-indicator .swiper-button-next::after {
  background-image: url("../images/ico/ic_indicator_arrow_white.svg");
}
.landing-dark .main-landing-indicator .swiper-pagination-bullet {
  background: rgba(255, 255, 255, 0.3);
}
.landing-dark .main-landing-indicator .swiper-pagination-bullet-active {
  background: #fff;
}
.landing-dark .landing-header .landing-header--menu {
  background: rgba(0, 0, 0, 0.4);
  box-shadow: 4px 4px 32px 0 rgba(20, 31, 51, 0.12);
  backdrop-filter: blur(20px);
}
.landing-dark .landing-header .landing-header--menu:hover {
  background: rgba(0, 0, 0, 0.6);
}

/* 260605 추가 */
.f-new-blue-700 {
  color: #3e63ad;
}
.f-new-blue-800 {
  color: #2a448c;
}
.f-new-blue-900 {
  color: #4d5d8a;
}
.f-new-blue-1000 {
  color: #232e4d;
}
.f-new-gray-700 {
  color: #73787d;
}
.f-new-gray-800 {
  color: #595d61;
}
.f-new-gray-900 {
  color: #272729;
}
/* 메인 인트로 */
.main-intro {
  display: flex;
  flex-direction: column;
  gap: 100px;
  padding: 120px 0 40px;
}
.main-intro .intro-title__sub {
  text-align: center;
  color: #595d61;
  font-size: 28px;
  font-weight: 700;
}
.main-intro .intro-title__main {
  text-align: center;
  margin-top: 20px;
  color: #272729;
  font-size: 52px;
  font-weight: 900;
}
.main-intro .intro-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.main-intro .intro-image-wrap {
  position: relative;
}
.main-intro .intro-image-wrap .img-content {
  position: absolute;
  bottom: 0;
  left: 50%;
  padding: 48px;
  width: 100%;
}
.main-intro .intro-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.main-intro .intro-text-wrap {
  padding: 100px 0;
}
.main-intro .intro-section:nth-child(even) .intro-text-wrap {
  padding-left: 100px;
}
.main-intro .text-order {
  color: #3e63ad;
  font-size: 22px;
  font-weight: 800;
}
.main-intro .text-heading {
  margin-top: 12px;
  color: #272729;
  font-size: 40px;
  font-weight: 900;
  line-height: 1.5;
}
.main-intro .text-body {
  margin-top: 20px;
  color: #73787d;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.8;
}

/* ── transition ── */
.main-intro .intro-title__sub,
.main-intro .intro-title__main {
  opacity: 0;
  transform: translateY(50px);
  transition:
    opacity 1s ease-in-out,
    transform 1.5s cubic-bezier(0.2, 0.8, 0.3, 1.05);
}
.main-intro .intro-image-wrap .img-bg,
.main-intro .intro-image-wrap .img-content,
.main-intro .text-header,
.main-intro .text-body {
  transition:
    opacity 0.8s cubic-bezier(0.2, 0.8, 0.3, 1.05),
    transform 0.8s cubic-bezier(0.2, 0.8, 0.3, 1.05);
}
/* 기본 */
.main-intro .intro-image-wrap .img-bg {
  opacity: 0;
  transform: translate(-30px, 30px);
}
.main-intro .intro-image-wrap .img-content {
  opacity: 0;
  transform: translateX(-50%) translateY(100px) scale(0.8);
}
.main-intro .text-header {
  opacity: 0;
  transform: translateY(-18px);
}
.main-intro .text-body {
  opacity: 0;
  transform: translateY(18px);
}
/* active */
.main-intro .active .intro-title__main {
  transition-delay: 0.1s;
}
.main-intro .intro-section.active .img-content {
  transition-delay: 0.2s;
}
.main-intro .intro-section.active .text-header {
  transition-delay: 0.4s;
}
.main-intro .intro-section.active .text-body {
  transition-delay: 0.6s;
}
.main-intro .active .intro-title__sub,
.main-intro .active .intro-title__main,
.main-intro .intro-section.active .img-bg,
.main-intro .intro-section.active .text-header,
.main-intro .intro-section.active .text-body {
  opacity: 1;
  transform: translate(0);
}
.main-intro .intro-section.active .img-content {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}
/* 260326 메인 탑배너 */
.top-banner {
  /* 260409 수정 */
  z-index: 11;
  position: relative;
  height: 75px;
  background: #fff;
  overflow: hidden;
}
.top-banner .swiper-container {
  height: 100%;
}
.top-banner .swiper-slide a {
  display: block;
  width: 100%;
  height: 100%;
}
.top-banner .swiper-slide img {
  display: block;
  margin: 0 auto;
  width: 100%;
  height: 100%;
  max-width: 1920px;
  object-fit: cover;
}
.top-banner--inner {
  z-index: 1;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  max-width: 1200px;
  padding-left: 36px;
  padding-right: 36px;
  pointer-events: none;
}
@media (max-width: 1199px) {
  .top-banner--inner {
    max-width: 1288px;
  }
}
.top-banner--indicator {
  pointer-events: auto;
  flex-shrink: 0;
  gap: 6px;
  display: flex;
  align-items: center;
  height: 100%;
  color: #000;
}
.top-banner--indicator button {
  width: 24px;
  height: 24px;
  background-image: url(../images/ico/main-left-black.svg);
  background-position: center;
  color: transparent;
  font-size: 0;
}
.top-banner--indicator .swiper-button-next {
  transform: rotate(180deg);
}
.top-banner--indicator .swiper-pagination {
  gap: 5px;
  margin-top: 0;
  font-size: 16px;
  line-height: 32px;
}
.top-banner--close {
  pointer-events: auto;
  display: flex;
  align-items: center;
  height: 100%;
  font-size: 16px;
  font-weight: 400;
}
.f-32-b {
  font-size: 32px;
  line-height: 36px;
  font-weight: 800;
}
.box-bg__white {
  background-color: #ffffff;
  border-radius: 20px;
}
.button-tag {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: auto;
  padding: 5px 14px;
  border-radius: 50px;
  font-size: 14px;
  line-height: 16px;
  cursor: default;
}
.button-tag.is--large {
  height: 30px;
}
.main-howto {
  margin-top: 188px;
}
.main-howto .main-title {
  margin-bottom: 52px;
}
.main-howto--box {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 24px;
}
.main-howto--item {
  width: 100%;
  min-height: 249px;
  padding: 11px;
  border-radius: 20px;
  color: #ffffff;
  text-align: center;
  /* [이슈리스트 : 230825][2565] 포인터 추가 */
  cursor: pointer;
}
.main-howto--item-icon {
  width: 46px;
  height: 46px;
  margin: 0 auto;
  margin-top: 29px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 42px auto;
}
.main-howto--item-title {
  margin-top: 23px;
  font-size: 24px;
  font-weight: 800;
  line-height: 23px;
}
@media (max-width: 1199px) {
  .main-howto--item-title {
    margin-top: 27px;
    font-size: 20px;
  }
}
.main-howto--item-text {
  font-size: 16px;
  line-height: 24px;
  word-wrap: break-word;
  word-break: keep-all;
}
@media (max-width: 1199px) {
  .main-howto--item-text {
    max-width: 176px;
    margin-right: auto;
    margin-left: auto;
    line-height: 23px;
  }
  .main-howto--item-text br {
    display: none;
  }
}
.main-howto--item.how-01 {
  background-color: #56bf93;
}
.main-howto--item.how-01 .main-howto--item-icon {
  background-image: url("../images/main/howto-01.png");
}
.main-howto--item.how-01 .main-howto--item-text {
  margin-top: 22px;
}
.main-howto--item.how-02 {
  background-color: #5890ff;
}
.main-howto--item.how-02 .main-howto--item-icon {
  background-image: url("../images/main/howto-02.png");
}
.main-howto--item.how-02 .main-howto--item-text {
  margin-top: 10px;
}
@media (max-width: 1199px) {
  .main-howto--item.how-02 .main-howto--item-text br:nth-child(2) {
    display: block;
  }
}
.main-howto--item.how-03 {
  background-color: #7e44fb;
}
.main-howto--item.how-03 .main-howto--item-icon {
  background-image: url("../images/main/howto-03.png");
}
.main-howto--item.how-03 .main-howto--item-text {
  margin-top: 22px;
}
@media (max-width: 1199px) {
  .main-howto--item.how-03 .main-howto--item-text {
    margin-top: 10px;
  }
}
.main-howto--item.how-04 {
  background-color: #405bf4;
}
.main-howto--item.how-04 .main-howto--item-icon {
  background-image: url("../images/main/howto-04.png");
}
.main-howto--item.how-04 .main-howto--item-text {
  margin-top: 10px;
}
@media (max-width: 1199px) {
  .main-howto--item.how-04 .main-howto--item-text {
    margin-top: 22px;
  }
}
.main-howto + .main-notice {
  margin-top: 160px;
}
.main-notice {
  padding-bottom: 98px;
}
.main-notice--box {
  overflow: hidden;
  position: relative;
  padding: 42px 41px;
  margin-top: 45px;
}
.main-notice--box::after {
  position: absolute;
  width: 1px;
  top: 58px;
  right: 50%;
  bottom: 58px;
  background-color: rgba(0, 0, 0, 0.1);
  content: "";
}
.main-notice--inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
  float: left;
  width: calc(50% - 35px);
}
.main-notice--inner:first-child {
  margin-right: 70px;
}
.main-notice--row {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  overflow: hidden;
  width: 100%;
}
.main-notice--inner .main-notice--row {
  height: 28px;
}
.main-notice .button-tag {
  flex-shrink: 0;
  flex-grow: 0;
  min-width: 50px; /* 250421 수정 */
  padding: 0 10px; /* 250421 수정 */
  font-size: 16px;
  font-weight: 700;
  text-align: center;
}
.main-notice .button-tag.noti {
  background-color: rgba(216, 203, 243, 0.5);
  color: #9265ed;
}
.main-notice .button-tag.service-noti {
  /* 250421 서비스 공지사항 태그 추가 */
  background-color: #ffe4f9;
  color: #ff5adb;
}
.main-notice .button-tag.etc {
  background-color: #eeeeee;
  color: rgba(0, 0, 0, 0.5);
}
.main-notice .button-tag.info {
  background-color: rgba(88, 144, 255, 0.2);
  color: #5890ff;
}
.main-notice .button-tag.data {
  background-color: rgba(0, 185, 19, 0.1);
  color: #3cc0a9;
}
.main-notice--title {
  flex-shrink: 1;
  flex-grow: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  width: calc(100% - 163px);
  margin-left: 8px;
  color: #000000;
}
.main-notice--title strong {
  position: relative;
  font-weight: 700;
  padding-right: 9px;
  margin-right: 8px;
}
.main-notice--title strong::after {
  position: absolute;
  display: block;
  width: 1px;
  height: 12px;
  top: 50%;
  right: 0;
  margin-top: -6px;
  background-color: rgba(0, 0, 0, 0.2);
  content: "";
}
.main-notice--date {
  flex-shrink: 0;
  flex-grow: 0;
  width: 105px;
  color: rgba(0, 0, 0, 0.5);
  text-align: right;
}
.main-notice.is--intro {
  padding-top: 49px;
  padding-bottom: 49px;
  min-height: 278px;
}
.main-notice.is--intro .main-notice--box {
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.main-notice.is--intro .main-notice--box::after {
  top: 0;
  bottom: 0;
}
.main-notice.is--intro .main-notice--title {
  margin-left: 0;
  margin-right: 12px;
  font-size: 16px;
}
.main-notice.is--intro .main-notice--inner {
  width: calc(50% - 44.5px);
  gap: 26px;
}
.main-notice.is--intro .main-notice--inner:first-child {
  margin-right: 89px;
}
@media (max-width: 1199px) {
  .main-notice.is--intro .main-notice--inner {
    width: calc(50% - 18px);
  }
  .main-notice.is--intro .main-notice--inner:first-child {
    margin-right: 36px;
  }
}
.chatbot--button .icon,
.chatbot--menu .icon {
  background-color: transparent;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  color: transparent;
  font-size: 0;
}
.ico-chatbot-bot-white {
  background-image: url("../images/ico/chatbot-bot-white.svg");
}
.ico-chatbot-close-white {
  background-image: url("../images/ico/chatbot-close-white.svg");
}
.chatbot--area {
  position: fixed;
  bottom: 64px;
  right: 64px;
  z-index: 700;
}
.chatbot--area::after {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 5;
  content: "";
}
.chatbot--area.open::after,
.chatbot--area.hover::after {
  display: block;
}
.chatbot--area.open .chatbot--text,
.chatbot--area.hover .chatbot--text {
  display: none;
}
.chatbot--area.open .chatbot--menubox,
.chatbot--area.hover .chatbot--menubox {
  display: flex;
}
.chatbot--area.open .chatbot--button .icon,
.chatbot--area.hover .chatbot--button .icon {
  width: 34px;
  height: 34px;
  background-image: url("../images/ico/chatbot-close-white.svg");
  background-size: 34px;
}
.chatbot--box {
  position: relative;
  width: 86px;
  height: 86px;
  z-index: 10;
}
.chatbot--button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 86px;
  height: 86px;
  background: linear-gradient(327.72deg, #ee29ff 16.78%, #02caf5 84.66%);
  border-radius: 48px;
  z-index: 15;
}
.chatbot--button .icon {
  /* 241112 챗봇 아이콘 변경 */
  display: block;
  width: 86px;
  height: 86px;
  background-image: url("../images/ico/ic_chatbot_white_86px.svg");
  background-size: 86px;
}
.chatbot--text {
  position: absolute;
  right: 0;
  bottom: 100%;
  padding: 14px 18px;
  margin-bottom: 16px;
  margin-right: 43px;
  background-color: #ffffff;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
  border-radius: 48px 48px 0 48px;
  color: #000000;
  font-size: 18px;
  line-height: 20px;
  white-space: nowrap;
}
.chatbot--menubox {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  display: none;
  gap: 16px;
  position: absolute;
  right: 0;
  bottom: 100%;
  padding-right: 11px;
  padding-bottom: 59px;
  margin-bottom: -43px;
  z-index: 10;
}
.chatbot--menu {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}
.chatbot--menu .icon {
  flex-shrink: 0;
  flex-grow: 0;
  width: 64px;
  height: 64px;
  background-color: #ffffff;
  background-size: 40px;
  border-radius: 64px;
}
.chatbot--menu .button {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
}
.chatbot--menu .button span {
  font-size: 16px;
  line-height: 18px;
  white-space: nowrap;
}
.chatbot--menu .button .text {
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  line-height: 20px;
}
.chatbot--menu .button .arr {
  display: none;
}
.chatbot--menu.is--bot .icon {
  background-image: url("../images/ico/chatbot-bot-violet.svg");
}
.chatbot--menu.is--tool .icon {
  background-image: url("../images/ico/chatbot-roulette-violet.svg");
}
.chatbot--menu.is--sticker .icon {
  background-image: url("../images/ico/ic_myprofile.svg");
}
.chatbot--menu.is--talk .icon {
  background-image: url("../images/ico/chatbot-talk-violet.svg");
  background-size: 44px;
}
.chatbot--menu.is--aidt .icon {
  background-image: url("../images/ico/chatbot-aidt-violet.svg");
  background-size: 46px;
}
/* 251022 추가 */
.chatbot--menu.is--miri .icon {
  background-image: url("../images/ico/chatbot-miri-violet.svg");
}
/* 260324 추가 */
.chatbot--menu.is--classup .icon {
  background-image: url("../images/ico/chatbot-classup-violet.svg");
  background-size: 50px;
}

::-webkit-scrollbar {
  width: 13px;
}
::-webkit-scrollbar-thumb {
  border: 5px solid rgba(0, 0, 0, 0);
  background-clip: padding-box;
  background-color: #d9d9d9;
  border-radius: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
.layer-area {
  padding-top: 36px;
  padding-bottom: 36px;
}
@media (min-width: 769px) and (max-width: 1199px) {
  .layer-area {
    padding-top: 56px;
    padding-bottom: 56px;
  }
}
@media (max-width: 768px) {
  .layer-area {
    padding-top: 20px;
    padding-bottom: 20px;
  }
}
.join-formbox,
.layer__container,
.toast-default {
  padding: 40px 24px;
  background-color: #ffffff;
  border-radius: 20px;
}
.layer-area {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  overflow: hidden;
  overflow-x: auto;
  max-width: 100%;
  padding-left: 36px;
  padding-right: 36px;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 999;
  -webkit-transform: translate3d(0, 0, 0);
  min-width: 1024px;
}
.layer__container {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  flex-grow: 0;
  position: relative;
  overflow: hidden;
  max-width: calc(100% - 60px);
  max-height: calc(100% - 24px);
  padding: 0;
  border-radius: 20px;
  box-shadow: 0px 12px 20px rgba(0, 0, 0, 0.1);
  z-index: 10;
}
.layer__title {
  flex-shrink: 0;
  flex-grow: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 22px 34px;
  background-color: rgba(217, 217, 217, 0.3);
  border-radius: 20px 20px 0 0;
}
.layer__title-text {
  color: #341761;
  font-weight: 700;
  font-size: 20px;
  line-height: 32px;
}
.layer__title-text::before {
  display: inline-block;
  width: 2px;
  height: 16px;
  margin-right: 12px;
  background-color: #341761;
  content: "";
}
.layer__title-close {
  width: 32px;
  height: 32px;
  background-image: url(../images/ico/close-black.svg);
  background-color: transparent;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  color: transparent;
  font-size: 0;
}
.layer__contents {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
  overflow-y: auto;
  min-height: 20px;
  padding: 36px 34px 0;
  -webkit-transform: translate3d(0, 0, 0);
}
.layer-agree .layer__contents {
  padding: 35px 35px 0;
}
.layer-area.scroll--contents .layer__contents {
  overflow: hidden;
}
.page__button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 14px;
}
.layer__container .page__button {
  flex-shrink: 0;
  flex-grow: 0;
  position: relative;
  padding: 48px 34px 40px;
}
.page__button > button:not(.button-text),
.page__button > a {
  min-width: 240px;
  padding-right: 20px;
  padding-left: 20px;
}
.layer__container .page__button a:not([class^="width-"]),
.layer__container .page__button button:not([class^="width-"]) {
  width: 164px;
  min-width: 164px;
}
.layer__dim {
  display: none;
}
.layer__container .box--search + .table--list {
  margin-top: 24px;
}
.layer__container .pagenavi--box:last-child {
  margin-top: 48px;
}
.layer-agree .layer__container {
  width: 809px;
  min-width: 809px;
}
.box-border__gray {
  border: 1px solid #d9d9d9;
  border-radius: 16px;
}
.mypage-terms--box {
  background: #fafafa;
  border-radius: 16px;
  padding: 24px;
  overflow-y: auto;
  overflow: overlay;
  height: 689px;
  font-size: 14px;
  line-height: 22px;
}
.mypage-terms--box strong {
  display: block;
  font-weight: 700;
  font-size: 16px;
  line-height: 18px;
  color: #341761;
  margin-bottom: 8px;
  margin-top: 40px;
}
.mypage-terms--box strong:first-child {
  margin-top: 0px;
}
.layer-agree .agree-box {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  overflow: hidden;
  width: 100%;
}
.layer-agree .agree-box .agree-box__inner * {
  font-size: 14px !important;
  line-height: 22px !important;
}

.layer-agree .agree-box .agree-box__inner.mypage-terms--box {
  height: auto;
  background-color: #ffffff;
  border-radius: 0;
}
.layer-agree .agree-box .agree-box__inner {
  color: #000;
}
.layer-agree .agree-box .agree-box__inner {
  overflow: hidden;
  overflow-y: auto;
  width: 100%;
  padding: 20px 15px;
  margin: 0 6px;
}
.box--search {
  display: flex;
  flex-direction: row;
  gap: 12px;
}
.box--search .input-box--text {
  font-size: 16px;
}
.box--search .button-main:not([class*="width"]) {
  flex-shrink: 0;
  flex-grow: 0;
  width: 98px;
}
.table--list table thead tr th {
  padding-top: 14px;
  padding-bottom: 14px;
  background-color: #fafafa;
  font-size: 16px;
  font-weight: 400;
  line-height: 18px;
}
.table--list table thead tr th:last-child {
  border-radius: 0 10px 10px 0;
}
.table--list table tbody tr td {
  padding-top: 18px;
  padding-bottom: 18px;
  font-size: 16px;
  text-align: center;
  border-bottom: 1px solid #d9d9d9;
}
.table--list table tbody tr td.empty {
  padding-top: 23px;
  padding-bottom: 0;
  border-bottom: none;
  font-size: 18px;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}

.layer-search__school .layer__container {
  width: 893px;
  min-width: 893px;
}
.layer-search__school .school--inner {
  padding-bottom: 40px;
}
.layer-search__school .table--list {
  min-height: 137px;
}

.layer-area.modal-area.width-450 .layer__container {
  width: 426px;
}
.layer-area.modal-area.width-450 .layer__container .layer__contents {
  width: auto;
}
.layer-area.modal-area .page__button {
  justify-content: stretch;
  padding: 0 24px 24px;
  margin-top: 2px;
  gap: 12px;
}
.layer-area.modal-area .layer__contents + .page__button {
  padding-top: 0;
  justify-content: center;
}
.layer-area.modal-area .layer__contents {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-width: 400px;
  min-height: 128px;
  padding: 48px 24px 38px;
  text-align: center;
}
.layer-login_manage .layer__contents .flex--column {
  align-items: start;
}
.layer-login_manage .layer__contents .flex--column {
  align-items: start;
}

.layer-area.onepass_modal .layer__title {
  padding-left: 24px;
  padding-right: 24px;
}
.layer-area.onepass_modal .layer__contents {
  padding-top: 24px;
}
.layer-area.onepass_modal .layer__contents .history {
  margin-top: 22px;
  padding: 18px 16px;
  background: #fafafa;
  border-top: 1px solid #d9d9d9;
  border-bottom: 1px solid #d9d9d9;
  font-size: 18px;
}
.layer-area.onepass_modal .page__button {
  flex-direction: column;
  padding: 27px 34px 24px 34px;
}
.layer-area.onepass_modal .page__button button {
  width: 100%;
  height: 50px;
}
.layer-check__id .layer__contents {
  color: #333;
  font-size: 18px;
  line-height: 26px;
}
.layer-check__id .info {
  text-align: center;
}
.layer-check__id .info strong {
  color: #000;
  font-size: 20px;
  line-height: normal;
  font-weight: 800;
}
.file-item--icon {
  flex-shrink: 0;
  flex-grow: 0;
}
.file-item--name {
  padding: 3px 0;
  font-size: 16px;
  line-height: 18px;
  text-decoration: underline;
  cursor: pointer;
}
.ico-screenshot-gray {
  background-image: url(../images/ico/screenshot-gray.svg);
}
.ico-download-black {
  background-image: url(../images/ico/download-black.svg);
}
.ico-prev-black {
  background-image: url(../images/ico/prev-black.svg);
}
.ico-next-black {
  background-image: url(../images/ico/next-black.svg);
}
.layer-area.layer-notice .contents_box .file_box .detail-file--item {
  display: flex;
  gap: 10px;
  color: #000;
}
.layer-area.layer-notice .layer__title {
  /* 250328 추가 */
  padding: 20px 24px;
  height: 64px;
}
.layer-area.layer-notice .layer__contents {
  padding: 0; /* 250328 수정 */
}
.layer-area.layer-notice .contents_box {
  border: 1px solid rgba(0, 0, 0, 0.16);
  /* border-radius: 8px; 250328 수정 */
  overflow: hidden;
}
.layer-area.layer-notice .contents_box .title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 19px 24px; /* 250403 수정 */
  background: #fafafa;
  border-bottom: 1px solid #d9d9d9;
}
.layer-area.layer-notice .contents_box .file_box {
  padding: 16px 24px; /* 250328 수정 */
  border-bottom: 1px solid #d9d9d9;
}
.layer-area.layer-notice .contents_box .file_box .detail-file--item {
  display: flex;
  gap: 10px;
  color: #000;
}
.layer-area.layer-notice .contents_box .contents {
  max-height: calc(100% - 56px); /*250328수정*/
  height: 719px;
  /* line-height: 1.6; 250529 삭제 */
  /* overflow-y: auto; */
  /* 250403 추가 */
  display: flex;
  flex-direction: column;
}
.layer-area.layer-notice .contents_box .contents .detail {
  /* 250403 수정 */
  padding: 24px 10px 24px 23px;
  flex: 1;
  overflow-y: auto;
  scrollbar-gutter: stable;
  font-size: 18px;
}
.layer-area.layer-notice .contents_box .contents .detail img {
  max-width: 100%; /* 251212 수정 */
  height: auto !important;
}
.layer-area.layer-notice .page_num {
  font-size: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* 250328 수정 */
  padding: 20px 24px;
  border-bottom: 1px solid #d9d9d9;
}
.layer-area.layer-notice .page_num button {
  font-size: 18px;
  gap: 4px;
}
.layer-area.layer-notice .page_num button.disabled {
  color: rgba(0, 0, 0, 0.5);
}
.layer-area.layer-notice .page_num button.disabled .ico-prev-black {
  background-image: url(../images/ico/ic_prev.svg);
}
.layer-area.layer-notice .page_num button.disabled .ico-next-black {
  background-image: url(../images/ico/ic_next.svg);
}
.layer-area.layer-notice.layer-notice__event .layer__container {
  /* 250620 이벤트 공지 추가 */
  max-height: calc(100% - -13px);
}
.layer-area .chk_close {
  background: rgba(217, 217, 217, 0.14);
  text-align: center;
  display: flex;
  gap: 32px;
  align-items: center;
  justify-content: center;
  height: 76px;
  padding: 16px 24px;
}
.layer-area .chk_close .input-check .input--box {
  align-items: center;
  gap: 10px;
}
.layer-area .chk_close .input-check .input--box::before {
  width: 18px;
  height: 18px;
}
/* 250328 추가 */
.layer-area .chk_close .button-main {
  min-width: 120px;
  margin-left: auto;
  padding: 0;
}
.layer-area.layer-twin .layer-twin__container-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  max-height: 100%;
}
.layer-twin__container--1,
.layer-twin__container--2 {
  width: 592px;
  max-width: unset;
  height: 100%;
  max-height: 100%;
}
.layer-find_myid .layer__container {
  width: 518px;
}
.layer-find_myid .layer__container .layer__contents {
  padding: 0;
}
.layer-find_myid .layer__container .layer__contents .tab-box .tab--button {
  width: 50%;
}
.layer-find_myid .layer__container .layer__contents .tab--contents {
  padding: 24px 24px 40px;
}
.layer-find_myid .layer__container .layer__contents .find-id__after .find-id__after--list {
  padding-right: 20px;
  padding-left: 20px;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 16px;
}
.layer-find_myid .layer__container .layer__contents .find-id__after .find-id__after--row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  padding-bottom: 24px;
  border-top: 1px solid #d9d9d9;
}
.layer-find_myid .layer__container .layer__contents .find-id__after .find-id__after--row:first-child {
  border-top: none;
}
.layer-find_myid .layer__container .layer__contents .find-id__after .find-id__after--row .date {
  color: rgba(0, 0, 0, 0.8);
  font-size: 16px;
  line-height: 18px;
}
.layer-find_myid .layer__container .layer__contents .find-id--title {
  margin-bottom: 30px;
  color: #000000;
  font-size: 22px;
  text-align: center;
  line-height: 30px;
}
.layer-find_myid .layer__container .layer__contents .find-id--title strong {
  color: #7e44fb;
  font-weight: 700;
}
.layer-find_myid .layer__container .layer__contents .input-box {
  margin-top: 14px;
}
.layer-find_myid .layer__container .layer__contents .input-box:first-child {
  margin-top: 0;
}
.layer-find_myid .layer__container .layer__contents .input-box--text.is--large {
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 16px;
  line-height: 18px;
}
.layer-find_myid .layer__container .layer__contents .input-box--text.is--large::placeholder {
  font-size: 16px;
  line-height: 18px;
}
.layer-find_myid .layer__container .layer__contents .input-box--text.is--large:-moz-placeholder {
  font-size: 16px;
  line-height: 18px;
}
.layer-find_myid .layer__container .layer__contents .input-box--text.is--large::-webkit-input-placeholder {
  font-size: 16px;
  line-height: 18px;
}
.layer-find_myid .layer__container .layer__contents .text-button {
  margin-top: 8px;
  text-align: right;
}
.layer-find_myid .layer__container .layer__contents .text-button button,
.layer-find_myid .layer__container .layer__contents .text-button a {
  margin-left: 16px;
  color: #000000;
  font-size: 14px;
  line-height: 16px;
  border-bottom: 1px solid #000000;
}
.layer-find_myid .layer__container .layer__contents .text-button button:first-child,
.layer-find_myid .layer__container .layer__contents .text-button a:first-child {
  margin-left: 0;
}
.layer-find_myid .layer__container .layer__contents .text-button + .button {
  margin-top: 24px;
}
.layer-find_myid .layer__container .layer__contents .button {
  margin-top: 40px;
  text-align: center;
}
.layer-find_myid .layer__container .layer__contents .button .button-main {
  width: 234px;
}

.password-change {
  width: 552px;
  padding: 45px 36px 40px;
  margin: 62px auto 89px;
}
.password-change--title {
  color: #000000;
  font-size: 24px;
  line-height: 27px;
  font-weight: 800;
}
.password-change--guide {
  margin-top: 31px;
}
.password-change--guide .text-bullet {
  padding-left: 12px;
  margin-top: 0;
  color: #000000;
  font-size: 14px;
  line-height: 30px;
}
.password-change--guide .text-bullet span {
  color: #ff3a3a;
}
.password-change--guide .text-bullet::before {
  width: 4px;
  height: 4px;
  top: 12px;
  left: 0;
  opacity: 1;
}
/* 260519 수정 */
.password-change--form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 54px;
}
/* .password-change--form input {
  margin-top: 20px;
}
.password-change--form input:first-child {
  margin-top: 0;
} */
.password-change--rule {
  margin: 28px -5px 0;
}
.password-change--rule .text-bullet {
  padding-left: 30px;
  margin-top: 8px;
  color: #000000;
  font-size: 14px;
  line-height: 20px;
}
.password-change--rule .text-bullet::before {
  width: 20px;
  height: 20px;
  top: 0;
  left: 0;
  background-image: url("../images/ico/check-write-black.svg");
  opacity: 1;
  background-color: transparent;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  color: transparent;
  font-size: 0;
}
.password-change--rule .text-bullet:first-child {
  margin-top: 0;
}
.password-change--rule .text-bullet.violet {
  color: #7e44fb;
}
.password-change--rule .text-bullet.violet::before {
  background-image: url("../images/ico/check-write-violet.svg");
}
.password-change .page__button {
  margin-top: 50px;
}
.password-change .page__button a,
.password-change .page__button button {
  min-width: 183px;
}
.password_box + .input-box--required.is--error {
  margin-top: 10px;
}
.ico-noti-parents-color,
.is--noti.parents {
  background-image: url(../images/ico/statebox_noti_parents_allow.svg);
}
.dim .is--noti.parents {
  background-image: url(../images/ico/statebox_noti_parents_allow_gray.svg);
}
.parents-account--form {
  margin-top: 20px;
}
.parents-account--form .input-box::placeholder {
  font-size: 16px;
}
.parents-account--form .f-violet-title {
  margin-bottom: 8px;
}
.parents-account--form button {
  height: 60px;
  padding: 0;
  min-width: 142px;
}
.parents.password-change--rule {
  margin-top: 10px;
}
.parents-privacy {
  border-top: 1px solid #d9d9d9;
  margin-top: 32px;
  padding-top: 16px;
}
.parents-privacy .input-check .input--box {
  align-items: center;
}
.parents-privacy .input-check .input--box::before {
  width: 18px;
  height: 18px;
}
.parents-privacy .input-check .input--text {
  font-size: 14px;
}
.parents-privacy .agree-box.box-border__gray {
  height: 172px;
  overflow-y: auto;
  margin-top: 20px;
  display: none;
}
.parents-privacy .agree-box.box-border__gray.active {
  display: flex;
}
.parents-privacy .agree-box__inner {
  padding: 16px;
}
.parents-privacy .agree-box__inner .agree-box__row:not(:first-child) {
  margin-top: 24px;
}
.parents-account--form .certify {
  width: 100%;
  position: relative;
}
.parents-account--form .certify span.f-red {
  position: absolute;
  top: 22px;
  right: 24px;
}

.digital-pledge--step {
  position: relative;
  height: 30px;
  padding: 9px;
  margin-top: 42px;
  background-color: #dbe1f1;
  border-radius: 30px;
}
.digital-pledge--step .pledge--steps {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  position: relative;
  height: 12px;
  z-index: 10;
}
.digital-pledge--step .pledge--steps .tooltip--box {
  margin-left: 0;
  margin-bottom: 11px;
  top: auto;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
}
.digital-pledge--step .pledge--steps .tooltip--box-wrap {
  margin: 0;
}
.digital-pledge--step .pledge--steps .tooltip--box-wrap,
.digital-pledge--step .pledge--steps .tooltip--box-wrap .tooltip--button {
  display: block;
}
.digital-pledge--step .pledge--steps .tooltip--box-wrap .tooltip--button {
  width: 12px;
  height: 12px;
  background-color: rgba(161, 169, 192, 0.25);
  border-radius: 12px;
  font-size: 0;
}
.digital-pledge--step .pledge--steps .tooltip--box-wrap:hover .tooltip--button {
  background-color: #a1a9c0;
  cursor: default;
}
.digital-pledge--step .pledge--steps .tooltip--box-text {
  padding: 9px 20px;
}
.digital-pledge--step .pledge--steps .tooltip--box-text p {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  text-align: center;
}
.digital-pledge--step .pledge--steps .tooltip--box-text p .icon {
  width: 40px;
  height: 40px;
  background-color: transparent;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  color: transparent;
  font-size: 0;
}
.digital-pledge--step .pledge--steps .tooltip--box-text p .text {
  color: #000000;
  font-size: 16px;
  font-weight: 700;
}
.digital-pledge--step .pledge--steps .pledge--step.step01 .tooltip--box-text p .icon {
  background-image: url("../images/ico/digital-step01.svg");
}
.digital-pledge--step .pledge--steps .pledge--step.step02 .tooltip--box-text p .icon {
  background-image: url("../images/ico/digital-step02.svg");
}
.digital-pledge--step .pledge--steps .pledge--step.step03 .tooltip--box-text p .icon {
  background-image: url("../images/ico/digital-step03.svg");
}
.digital-pledge--step .pledge--steps .pledge--step.step04 .tooltip--box-text p .icon {
  background-image: url("../images/ico/digital-step04.svg");
}
.digital-pledge--step .pledge--steps .pledge--step.step05 .tooltip--box-text p .icon {
  background-image: url("../images/ico/digital-step05.svg");
}
.digital-pledge--step .pledge--steps .pledge--step.step06 .tooltip--box-text p .icon {
  background-image: url("../images/ico/digital-step06.svg");
}
.digital-pledge--step .pledge--steps .pledge--step.step07 .tooltip--box-text p .icon {
  background-image: url("../images/ico/digital-step07.svg");
}
.digital-pledge--step .pledge--steps .pledge--step.step08 .tooltip--box-text p .icon {
  background-image: url("../images/ico/digital-step08.svg");
}
.digital-pledge--step .pledge--bar {
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 9px;
  top: 0;
  left: 0;
  z-index: 5;
  border-radius: 30px;
}
.digital-pledge--step .pledge--bar::after {
  position: relative;
  display: block;
  height: 30px;
  margin-top: -9px;
  margin-left: -9px;
  background: linear-gradient(90deg, #a044fb 3.55%, #7e44fb 97.16%);
  border-radius: 30px;
  content: "";
}
.digital-pledge--step.active01 .pledge--steps .pledge--step.step01 .tooltip--button:hover {
  cursor: pointer;
}
.digital-pledge--step.active01 .pledge--steps .pledge--step.step01 .tooltip--button:not(.on) {
  background-color: #aa7dfd;
}
.digital-pledge--step.active01 .pledge--steps .pledge--step.step01 .tooltip--button:not(.on):hover {
  background-color: rgba(255, 255, 255, 0.8);
}
.digital-pledge--step.active01 .pledge--steps .pledge--step.step01 .tooltip--button.on p {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  margin-top: -16px;
  margin-left: -16px;
  background-color: #ffffff;
  border-radius: 44px;
  box-shadow: 3px 2px 4px 0px rgba(118, 84, 165, 0.44);
  color: #7e44fb;
  font-size: 20px;
  font-weight: 800;
}
.digital-pledge--step.active01 .pledge--bar::after {
  width: calc((100% - 96px) / 7 * 0 + 12px + 18px);
}
.digital-pledge--step.active02 .pledge--steps .pledge--step.step01 .tooltip--button:hover {
  cursor: pointer;
}
.digital-pledge--step.active02 .pledge--steps .pledge--step.step01 .tooltip--button:not(.on) {
  background-color: #aa7dfd;
}
.digital-pledge--step.active02 .pledge--steps .pledge--step.step01 .tooltip--button:not(.on):hover {
  background-color: rgba(255, 255, 255, 0.8);
}
.digital-pledge--step.active02 .pledge--steps .pledge--step.step01 .tooltip--button.on p {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  margin-top: -16px;
  margin-left: -16px;
  background-color: #ffffff;
  border-radius: 44px;
  box-shadow: 3px 2px 4px 0px rgba(118, 84, 165, 0.44);
  color: #7e44fb;
  font-size: 20px;
  font-weight: 800;
}
.digital-pledge--step.active02 .pledge--steps .pledge--step.step02 .tooltip--button:hover {
  cursor: pointer;
}
.digital-pledge--step.active02 .pledge--steps .pledge--step.step02 .tooltip--button:not(.on) {
  background-color: #aa7dfd;
}
.digital-pledge--step.active02 .pledge--steps .pledge--step.step02 .tooltip--button:not(.on):hover {
  background-color: rgba(255, 255, 255, 0.8);
}
.digital-pledge--step.active02 .pledge--steps .pledge--step.step02 .tooltip--button.on p {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  margin-top: -16px;
  margin-left: -16px;
  background-color: #ffffff;
  border-radius: 44px;
  box-shadow: 3px 2px 4px 0px rgba(118, 84, 165, 0.44);
  color: #7e44fb;
  font-size: 20px;
  font-weight: 800;
}
.digital-pledge--step.active02 .pledge--bar::after {
  width: calc((100% - 96px) / 7 * 1 + 24px + 18px);
}
.digital-pledge--step.active03 .pledge--steps .pledge--step.step01 .tooltip--button:hover {
  cursor: pointer;
}
.digital-pledge--step.active03 .pledge--steps .pledge--step.step01 .tooltip--button:not(.on) {
  background-color: #aa7dfd;
}
.digital-pledge--step.active03 .pledge--steps .pledge--step.step01 .tooltip--button:not(.on):hover {
  background-color: rgba(255, 255, 255, 0.8);
}
.digital-pledge--step.active03 .pledge--steps .pledge--step.step01 .tooltip--button.on p {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  margin-top: -16px;
  margin-left: -16px;
  background-color: #ffffff;
  border-radius: 44px;
  box-shadow: 3px 2px 4px 0px rgba(118, 84, 165, 0.44);
  color: #7e44fb;
  font-size: 20px;
  font-weight: 800;
}
.digital-pledge--step.active03 .pledge--steps .pledge--step.step02 .tooltip--button:hover {
  cursor: pointer;
}
.digital-pledge--step.active03 .pledge--steps .pledge--step.step02 .tooltip--button:not(.on) {
  background-color: #aa7dfd;
}
.digital-pledge--step.active03 .pledge--steps .pledge--step.step02 .tooltip--button:not(.on):hover {
  background-color: rgba(255, 255, 255, 0.8);
}
.digital-pledge--step.active03 .pledge--steps .pledge--step.step02 .tooltip--button.on p {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  margin-top: -16px;
  margin-left: -16px;
  background-color: #ffffff;
  border-radius: 44px;
  box-shadow: 3px 2px 4px 0px rgba(118, 84, 165, 0.44);
  color: #7e44fb;
  font-size: 20px;
  font-weight: 800;
}
.digital-pledge--step.active03 .pledge--steps .pledge--step.step03 .tooltip--button:hover {
  cursor: pointer;
}
.digital-pledge--step.active03 .pledge--steps .pledge--step.step03 .tooltip--button:not(.on) {
  background-color: #aa7dfd;
}
.digital-pledge--step.active03 .pledge--steps .pledge--step.step03 .tooltip--button:not(.on):hover {
  background-color: rgba(255, 255, 255, 0.8);
}
.digital-pledge--step.active03 .pledge--steps .pledge--step.step03 .tooltip--button.on p {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  margin-top: -16px;
  margin-left: -16px;
  background-color: #ffffff;
  border-radius: 44px;
  box-shadow: 3px 2px 4px 0px rgba(118, 84, 165, 0.44);
  color: #7e44fb;
  font-size: 20px;
  font-weight: 800;
}
.digital-pledge--step.active03 .pledge--bar::after {
  width: calc((100% - 96px) / 7 * 2 + 36px + 18px);
}
.digital-pledge--step.active04 .pledge--steps .pledge--step.step01 .tooltip--button:hover {
  cursor: pointer;
}
.digital-pledge--step.active04 .pledge--steps .pledge--step.step01 .tooltip--button:not(.on) {
  background-color: #aa7dfd;
}
.digital-pledge--step.active04 .pledge--steps .pledge--step.step01 .tooltip--button:not(.on):hover {
  background-color: rgba(255, 255, 255, 0.8);
}
.digital-pledge--step.active04 .pledge--steps .pledge--step.step01 .tooltip--button.on p {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  margin-top: -16px;
  margin-left: -16px;
  background-color: #ffffff;
  border-radius: 44px;
  box-shadow: 3px 2px 4px 0px rgba(118, 84, 165, 0.44);
  color: #7e44fb;
  font-size: 20px;
  font-weight: 800;
}
.digital-pledge--step.active04 .pledge--steps .pledge--step.step02 .tooltip--button:hover {
  cursor: pointer;
}
.digital-pledge--step.active04 .pledge--steps .pledge--step.step02 .tooltip--button:not(.on) {
  background-color: #aa7dfd;
}
.digital-pledge--step.active04 .pledge--steps .pledge--step.step02 .tooltip--button:not(.on):hover {
  background-color: rgba(255, 255, 255, 0.8);
}
.digital-pledge--step.active04 .pledge--steps .pledge--step.step02 .tooltip--button.on p {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  margin-top: -16px;
  margin-left: -16px;
  background-color: #ffffff;
  border-radius: 44px;
  box-shadow: 3px 2px 4px 0px rgba(118, 84, 165, 0.44);
  color: #7e44fb;
  font-size: 20px;
  font-weight: 800;
}
.digital-pledge--step.active04 .pledge--steps .pledge--step.step03 .tooltip--button:hover {
  cursor: pointer;
}
.digital-pledge--step.active04 .pledge--steps .pledge--step.step03 .tooltip--button:not(.on) {
  background-color: #aa7dfd;
}
.digital-pledge--step.active04 .pledge--steps .pledge--step.step03 .tooltip--button:not(.on):hover {
  background-color: rgba(255, 255, 255, 0.8);
}
.digital-pledge--step.active04 .pledge--steps .pledge--step.step03 .tooltip--button.on p {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  margin-top: -16px;
  margin-left: -16px;
  background-color: #ffffff;
  border-radius: 44px;
  box-shadow: 3px 2px 4px 0px rgba(118, 84, 165, 0.44);
  color: #7e44fb;
  font-size: 20px;
  font-weight: 800;
}
.digital-pledge--step.active04 .pledge--steps .pledge--step.step04 .tooltip--button:hover {
  cursor: pointer;
}
.digital-pledge--step.active04 .pledge--steps .pledge--step.step04 .tooltip--button:not(.on) {
  background-color: #aa7dfd;
}
.digital-pledge--step.active04 .pledge--steps .pledge--step.step04 .tooltip--button:not(.on):hover {
  background-color: rgba(255, 255, 255, 0.8);
}
.digital-pledge--step.active04 .pledge--steps .pledge--step.step04 .tooltip--button.on p {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  margin-top: -16px;
  margin-left: -16px;
  background-color: #ffffff;
  border-radius: 44px;
  box-shadow: 3px 2px 4px 0px rgba(118, 84, 165, 0.44);
  color: #7e44fb;
  font-size: 20px;
  font-weight: 800;
}
.digital-pledge--step.active04 .pledge--bar::after {
  width: calc((100% - 96px) / 7 * 3 + 48px + 18px);
}
.digital-pledge--step.active05 .pledge--steps .pledge--step.step01 .tooltip--button:hover {
  cursor: pointer;
}
.digital-pledge--step.active05 .pledge--steps .pledge--step.step01 .tooltip--button:not(.on) {
  background-color: #aa7dfd;
}
.digital-pledge--step.active05 .pledge--steps .pledge--step.step01 .tooltip--button:not(.on):hover {
  background-color: rgba(255, 255, 255, 0.8);
}
.digital-pledge--step.active05 .pledge--steps .pledge--step.step01 .tooltip--button.on p {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  margin-top: -16px;
  margin-left: -16px;
  background-color: #ffffff;
  border-radius: 44px;
  box-shadow: 3px 2px 4px 0px rgba(118, 84, 165, 0.44);
  color: #7e44fb;
  font-size: 20px;
  font-weight: 800;
}
.digital-pledge--step.active05 .pledge--steps .pledge--step.step02 .tooltip--button:hover {
  cursor: pointer;
}
.digital-pledge--step.active05 .pledge--steps .pledge--step.step02 .tooltip--button:not(.on) {
  background-color: #aa7dfd;
}
.digital-pledge--step.active05 .pledge--steps .pledge--step.step02 .tooltip--button:not(.on):hover {
  background-color: rgba(255, 255, 255, 0.8);
}
.digital-pledge--step.active05 .pledge--steps .pledge--step.step02 .tooltip--button.on p {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  margin-top: -16px;
  margin-left: -16px;
  background-color: #ffffff;
  border-radius: 44px;
  box-shadow: 3px 2px 4px 0px rgba(118, 84, 165, 0.44);
  color: #7e44fb;
  font-size: 20px;
  font-weight: 800;
}
.digital-pledge--step.active05 .pledge--steps .pledge--step.step03 .tooltip--button:hover {
  cursor: pointer;
}
.digital-pledge--step.active05 .pledge--steps .pledge--step.step03 .tooltip--button:not(.on) {
  background-color: #aa7dfd;
}
.digital-pledge--step.active05 .pledge--steps .pledge--step.step03 .tooltip--button:not(.on):hover {
  background-color: rgba(255, 255, 255, 0.8);
}
.digital-pledge--step.active05 .pledge--steps .pledge--step.step03 .tooltip--button.on p {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  margin-top: -16px;
  margin-left: -16px;
  background-color: #ffffff;
  border-radius: 44px;
  box-shadow: 3px 2px 4px 0px rgba(118, 84, 165, 0.44);
  color: #7e44fb;
  font-size: 20px;
  font-weight: 800;
}
.digital-pledge--step.active05 .pledge--steps .pledge--step.step04 .tooltip--button:hover {
  cursor: pointer;
}
.digital-pledge--step.active05 .pledge--steps .pledge--step.step04 .tooltip--button:not(.on) {
  background-color: #aa7dfd;
}
.digital-pledge--step.active05 .pledge--steps .pledge--step.step04 .tooltip--button:not(.on):hover {
  background-color: rgba(255, 255, 255, 0.8);
}
.digital-pledge--step.active05 .pledge--steps .pledge--step.step04 .tooltip--button.on p {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  margin-top: -16px;
  margin-left: -16px;
  background-color: #ffffff;
  border-radius: 44px;
  box-shadow: 3px 2px 4px 0px rgba(118, 84, 165, 0.44);
  color: #7e44fb;
  font-size: 20px;
  font-weight: 800;
}
.digital-pledge--step.active05 .pledge--steps .pledge--step.step05 .tooltip--button:hover {
  cursor: pointer;
}
.digital-pledge--step.active05 .pledge--steps .pledge--step.step05 .tooltip--button:not(.on) {
  background-color: #aa7dfd;
}
.digital-pledge--step.active05 .pledge--steps .pledge--step.step05 .tooltip--button:not(.on):hover {
  background-color: rgba(255, 255, 255, 0.8);
}
.digital-pledge--step.active05 .pledge--steps .pledge--step.step05 .tooltip--button.on p {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  margin-top: -16px;
  margin-left: -16px;
  background-color: #ffffff;
  border-radius: 44px;
  box-shadow: 3px 2px 4px 0px rgba(118, 84, 165, 0.44);
  color: #7e44fb;
  font-size: 20px;
  font-weight: 800;
}
.digital-pledge--step.active05 .pledge--bar::after {
  width: calc((100% - 96px) / 7 * 4 + 60px + 18px);
}
.digital-pledge--step.active06 .pledge--steps .pledge--step.step01 .tooltip--button:hover {
  cursor: pointer;
}
.digital-pledge--step.active06 .pledge--steps .pledge--step.step01 .tooltip--button:not(.on) {
  background-color: #aa7dfd;
}
.digital-pledge--step.active06 .pledge--steps .pledge--step.step01 .tooltip--button:not(.on):hover {
  background-color: rgba(255, 255, 255, 0.8);
}
.digital-pledge--step.active06 .pledge--steps .pledge--step.step01 .tooltip--button.on p {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  margin-top: -16px;
  margin-left: -16px;
  background-color: #ffffff;
  border-radius: 44px;
  box-shadow: 3px 2px 4px 0px rgba(118, 84, 165, 0.44);
  color: #7e44fb;
  font-size: 20px;
  font-weight: 800;
}
.digital-pledge--step.active06 .pledge--steps .pledge--step.step02 .tooltip--button:hover {
  cursor: pointer;
}
.digital-pledge--step.active06 .pledge--steps .pledge--step.step02 .tooltip--button:not(.on) {
  background-color: #aa7dfd;
}
.digital-pledge--step.active06 .pledge--steps .pledge--step.step02 .tooltip--button:not(.on):hover {
  background-color: rgba(255, 255, 255, 0.8);
}
.digital-pledge--step.active06 .pledge--steps .pledge--step.step02 .tooltip--button.on p {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  margin-top: -16px;
  margin-left: -16px;
  background-color: #ffffff;
  border-radius: 44px;
  box-shadow: 3px 2px 4px 0px rgba(118, 84, 165, 0.44);
  color: #7e44fb;
  font-size: 20px;
  font-weight: 800;
}
.digital-pledge--step.active06 .pledge--steps .pledge--step.step03 .tooltip--button:hover {
  cursor: pointer;
}
.digital-pledge--step.active06 .pledge--steps .pledge--step.step03 .tooltip--button:not(.on) {
  background-color: #aa7dfd;
}
.digital-pledge--step.active06 .pledge--steps .pledge--step.step03 .tooltip--button:not(.on):hover {
  background-color: rgba(255, 255, 255, 0.8);
}
.digital-pledge--step.active06 .pledge--steps .pledge--step.step03 .tooltip--button.on p {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  margin-top: -16px;
  margin-left: -16px;
  background-color: #ffffff;
  border-radius: 44px;
  box-shadow: 3px 2px 4px 0px rgba(118, 84, 165, 0.44);
  color: #7e44fb;
  font-size: 20px;
  font-weight: 800;
}
.digital-pledge--step.active06 .pledge--steps .pledge--step.step04 .tooltip--button:hover {
  cursor: pointer;
}
.digital-pledge--step.active06 .pledge--steps .pledge--step.step04 .tooltip--button:not(.on) {
  background-color: #aa7dfd;
}
.digital-pledge--step.active06 .pledge--steps .pledge--step.step04 .tooltip--button:not(.on):hover {
  background-color: rgba(255, 255, 255, 0.8);
}
.digital-pledge--step.active06 .pledge--steps .pledge--step.step04 .tooltip--button.on p {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  margin-top: -16px;
  margin-left: -16px;
  background-color: #ffffff;
  border-radius: 44px;
  box-shadow: 3px 2px 4px 0px rgba(118, 84, 165, 0.44);
  color: #7e44fb;
  font-size: 20px;
  font-weight: 800;
}
.digital-pledge--step.active06 .pledge--steps .pledge--step.step05 .tooltip--button:hover {
  cursor: pointer;
}
.digital-pledge--step.active06 .pledge--steps .pledge--step.step05 .tooltip--button:not(.on) {
  background-color: #aa7dfd;
}
.digital-pledge--step.active06 .pledge--steps .pledge--step.step05 .tooltip--button:not(.on):hover {
  background-color: rgba(255, 255, 255, 0.8);
}
.digital-pledge--step.active06 .pledge--steps .pledge--step.step05 .tooltip--button.on p {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  margin-top: -16px;
  margin-left: -16px;
  background-color: #ffffff;
  border-radius: 44px;
  box-shadow: 3px 2px 4px 0px rgba(118, 84, 165, 0.44);
  color: #7e44fb;
  font-size: 20px;
  font-weight: 800;
}
.digital-pledge--step.active06 .pledge--steps .pledge--step.step06 .tooltip--button:hover {
  cursor: pointer;
}
.digital-pledge--step.active06 .pledge--steps .pledge--step.step06 .tooltip--button:not(.on) {
  background-color: #aa7dfd;
}
.digital-pledge--step.active06 .pledge--steps .pledge--step.step06 .tooltip--button:not(.on):hover {
  background-color: rgba(255, 255, 255, 0.8);
}
.digital-pledge--step.active06 .pledge--steps .pledge--step.step06 .tooltip--button.on p {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  margin-top: -16px;
  margin-left: -16px;
  background-color: #ffffff;
  border-radius: 44px;
  box-shadow: 3px 2px 4px 0px rgba(118, 84, 165, 0.44);
  color: #7e44fb;
  font-size: 20px;
  font-weight: 800;
}
.digital-pledge--step.active06 .pledge--bar::after {
  width: calc((100% - 96px) / 7 * 5 + 72px + 18px);
}
.digital-pledge--step.active07 .pledge--steps .pledge--step.step01 .tooltip--button:hover {
  cursor: pointer;
}
.digital-pledge--step.active07 .pledge--steps .pledge--step.step01 .tooltip--button:not(.on) {
  background-color: #aa7dfd;
}
.digital-pledge--step.active07 .pledge--steps .pledge--step.step01 .tooltip--button:not(.on):hover {
  background-color: rgba(255, 255, 255, 0.8);
}
.digital-pledge--step.active07 .pledge--steps .pledge--step.step01 .tooltip--button.on p {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  margin-top: -16px;
  margin-left: -16px;
  background-color: #ffffff;
  border-radius: 44px;
  box-shadow: 3px 2px 4px 0px rgba(118, 84, 165, 0.44);
  color: #7e44fb;
  font-size: 20px;
  font-weight: 800;
}
.digital-pledge--step.active07 .pledge--steps .pledge--step.step02 .tooltip--button:hover {
  cursor: pointer;
}
.digital-pledge--step.active07 .pledge--steps .pledge--step.step02 .tooltip--button:not(.on) {
  background-color: #aa7dfd;
}
.digital-pledge--step.active07 .pledge--steps .pledge--step.step02 .tooltip--button:not(.on):hover {
  background-color: rgba(255, 255, 255, 0.8);
}
.digital-pledge--step.active07 .pledge--steps .pledge--step.step02 .tooltip--button.on p {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  margin-top: -16px;
  margin-left: -16px;
  background-color: #ffffff;
  border-radius: 44px;
  box-shadow: 3px 2px 4px 0px rgba(118, 84, 165, 0.44);
  color: #7e44fb;
  font-size: 20px;
  font-weight: 800;
}
.digital-pledge--step.active07 .pledge--steps .pledge--step.step03 .tooltip--button:hover {
  cursor: pointer;
}
.digital-pledge--step.active07 .pledge--steps .pledge--step.step03 .tooltip--button:not(.on) {
  background-color: #aa7dfd;
}
.digital-pledge--step.active07 .pledge--steps .pledge--step.step03 .tooltip--button:not(.on):hover {
  background-color: rgba(255, 255, 255, 0.8);
}
.digital-pledge--step.active07 .pledge--steps .pledge--step.step03 .tooltip--button.on p {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  margin-top: -16px;
  margin-left: -16px;
  background-color: #ffffff;
  border-radius: 44px;
  box-shadow: 3px 2px 4px 0px rgba(118, 84, 165, 0.44);
  color: #7e44fb;
  font-size: 20px;
  font-weight: 800;
}
.digital-pledge--step.active07 .pledge--steps .pledge--step.step04 .tooltip--button:hover {
  cursor: pointer;
}
.digital-pledge--step.active07 .pledge--steps .pledge--step.step04 .tooltip--button:not(.on) {
  background-color: #aa7dfd;
}
.digital-pledge--step.active07 .pledge--steps .pledge--step.step04 .tooltip--button:not(.on):hover {
  background-color: rgba(255, 255, 255, 0.8);
}
.digital-pledge--step.active07 .pledge--steps .pledge--step.step04 .tooltip--button.on p {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  margin-top: -16px;
  margin-left: -16px;
  background-color: #ffffff;
  border-radius: 44px;
  box-shadow: 3px 2px 4px 0px rgba(118, 84, 165, 0.44);
  color: #7e44fb;
  font-size: 20px;
  font-weight: 800;
}
.digital-pledge--step.active07 .pledge--steps .pledge--step.step05 .tooltip--button:hover {
  cursor: pointer;
}
.digital-pledge--step.active07 .pledge--steps .pledge--step.step05 .tooltip--button:not(.on) {
  background-color: #aa7dfd;
}
.digital-pledge--step.active07 .pledge--steps .pledge--step.step05 .tooltip--button:not(.on):hover {
  background-color: rgba(255, 255, 255, 0.8);
}
.digital-pledge--step.active07 .pledge--steps .pledge--step.step05 .tooltip--button.on p {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  margin-top: -16px;
  margin-left: -16px;
  background-color: #ffffff;
  border-radius: 44px;
  box-shadow: 3px 2px 4px 0px rgba(118, 84, 165, 0.44);
  color: #7e44fb;
  font-size: 20px;
  font-weight: 800;
}
.digital-pledge--step.active07 .pledge--steps .pledge--step.step06 .tooltip--button:hover {
  cursor: pointer;
}
.digital-pledge--step.active07 .pledge--steps .pledge--step.step06 .tooltip--button:not(.on) {
  background-color: #aa7dfd;
}
.digital-pledge--step.active07 .pledge--steps .pledge--step.step06 .tooltip--button:not(.on):hover {
  background-color: rgba(255, 255, 255, 0.8);
}
.digital-pledge--step.active07 .pledge--steps .pledge--step.step06 .tooltip--button.on p {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  margin-top: -16px;
  margin-left: -16px;
  background-color: #ffffff;
  border-radius: 44px;
  box-shadow: 3px 2px 4px 0px rgba(118, 84, 165, 0.44);
  color: #7e44fb;
  font-size: 20px;
  font-weight: 800;
}
.digital-pledge--step.active07 .pledge--steps .pledge--step.step07 .tooltip--button:hover {
  cursor: pointer;
}
.digital-pledge--step.active07 .pledge--steps .pledge--step.step07 .tooltip--button:not(.on) {
  background-color: #aa7dfd;
}
.digital-pledge--step.active07 .pledge--steps .pledge--step.step07 .tooltip--button:not(.on):hover {
  background-color: rgba(255, 255, 255, 0.8);
}
.digital-pledge--step.active07 .pledge--steps .pledge--step.step07 .tooltip--button.on p {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  margin-top: -16px;
  margin-left: -16px;
  background-color: #ffffff;
  border-radius: 44px;
  box-shadow: 3px 2px 4px 0px rgba(118, 84, 165, 0.44);
  color: #7e44fb;
  font-size: 20px;
  font-weight: 800;
}
.digital-pledge--step.active07 .pledge--bar::after {
  width: calc((100% - 96px) / 7 * 6 + 84px + 18px);
}
.digital-pledge--step.active08 .pledge--steps .pledge--step.step01 .tooltip--button:hover {
  cursor: pointer;
}
.digital-pledge--step.active08 .pledge--steps .pledge--step.step01 .tooltip--button:not(.on) {
  background-color: #aa7dfd;
}
.digital-pledge--step.active08 .pledge--steps .pledge--step.step01 .tooltip--button:not(.on):hover {
  background-color: rgba(255, 255, 255, 0.8);
}
.digital-pledge--step.active08 .pledge--steps .pledge--step.step01 .tooltip--button.on p {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  margin-top: -16px;
  margin-left: -16px;
  background-color: #ffffff;
  border-radius: 44px;
  box-shadow: 3px 2px 4px 0px rgba(118, 84, 165, 0.44);
  color: #7e44fb;
  font-size: 20px;
  font-weight: 800;
}
.digital-pledge--step.active08 .pledge--steps .pledge--step.step02 .tooltip--button:hover {
  cursor: pointer;
}
.digital-pledge--step.active08 .pledge--steps .pledge--step.step02 .tooltip--button:not(.on) {
  background-color: #aa7dfd;
}
.digital-pledge--step.active08 .pledge--steps .pledge--step.step02 .tooltip--button:not(.on):hover {
  background-color: rgba(255, 255, 255, 0.8);
}
.digital-pledge--step.active08 .pledge--steps .pledge--step.step02 .tooltip--button.on p {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  margin-top: -16px;
  margin-left: -16px;
  background-color: #ffffff;
  border-radius: 44px;
  box-shadow: 3px 2px 4px 0px rgba(118, 84, 165, 0.44);
  color: #7e44fb;
  font-size: 20px;
  font-weight: 800;
}
.digital-pledge--step.active08 .pledge--steps .pledge--step.step03 .tooltip--button:hover {
  cursor: pointer;
}
.digital-pledge--step.active08 .pledge--steps .pledge--step.step03 .tooltip--button:not(.on) {
  background-color: #aa7dfd;
}
.digital-pledge--step.active08 .pledge--steps .pledge--step.step03 .tooltip--button:not(.on):hover {
  background-color: rgba(255, 255, 255, 0.8);
}
.digital-pledge--step.active08 .pledge--steps .pledge--step.step03 .tooltip--button.on p {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  margin-top: -16px;
  margin-left: -16px;
  background-color: #ffffff;
  border-radius: 44px;
  box-shadow: 3px 2px 4px 0px rgba(118, 84, 165, 0.44);
  color: #7e44fb;
  font-size: 20px;
  font-weight: 800;
}
.digital-pledge--step.active08 .pledge--steps .pledge--step.step04 .tooltip--button:hover {
  cursor: pointer;
}
.digital-pledge--step.active08 .pledge--steps .pledge--step.step04 .tooltip--button:not(.on) {
  background-color: #aa7dfd;
}
.digital-pledge--step.active08 .pledge--steps .pledge--step.step04 .tooltip--button:not(.on):hover {
  background-color: rgba(255, 255, 255, 0.8);
}
.digital-pledge--step.active08 .pledge--steps .pledge--step.step04 .tooltip--button.on p {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  margin-top: -16px;
  margin-left: -16px;
  background-color: #ffffff;
  border-radius: 44px;
  box-shadow: 3px 2px 4px 0px rgba(118, 84, 165, 0.44);
  color: #7e44fb;
  font-size: 20px;
  font-weight: 800;
}
.digital-pledge--step.active08 .pledge--steps .pledge--step.step05 .tooltip--button:hover {
  cursor: pointer;
}
.digital-pledge--step.active08 .pledge--steps .pledge--step.step05 .tooltip--button:not(.on) {
  background-color: #aa7dfd;
}
.digital-pledge--step.active08 .pledge--steps .pledge--step.step05 .tooltip--button:not(.on):hover {
  background-color: rgba(255, 255, 255, 0.8);
}
.digital-pledge--step.active08 .pledge--steps .pledge--step.step05 .tooltip--button.on p {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  margin-top: -16px;
  margin-left: -16px;
  background-color: #ffffff;
  border-radius: 44px;
  box-shadow: 3px 2px 4px 0px rgba(118, 84, 165, 0.44);
  color: #7e44fb;
  font-size: 20px;
  font-weight: 800;
}
.digital-pledge--step.active08 .pledge--steps .pledge--step.step06 .tooltip--button:hover {
  cursor: pointer;
}
.digital-pledge--step.active08 .pledge--steps .pledge--step.step06 .tooltip--button:not(.on) {
  background-color: #aa7dfd;
}
.digital-pledge--step.active08 .pledge--steps .pledge--step.step06 .tooltip--button:not(.on):hover {
  background-color: rgba(255, 255, 255, 0.8);
}
.digital-pledge--step.active08 .pledge--steps .pledge--step.step06 .tooltip--button.on p {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  margin-top: -16px;
  margin-left: -16px;
  background-color: #ffffff;
  border-radius: 44px;
  box-shadow: 3px 2px 4px 0px rgba(118, 84, 165, 0.44);
  color: #7e44fb;
  font-size: 20px;
  font-weight: 800;
}
.digital-pledge--step.active08 .pledge--steps .pledge--step.step07 .tooltip--button:hover {
  cursor: pointer;
}
.digital-pledge--step.active08 .pledge--steps .pledge--step.step07 .tooltip--button:not(.on) {
  background-color: #aa7dfd;
}
.digital-pledge--step.active08 .pledge--steps .pledge--step.step07 .tooltip--button:not(.on):hover {
  background-color: rgba(255, 255, 255, 0.8);
}
.digital-pledge--step.active08 .pledge--steps .pledge--step.step07 .tooltip--button.on p {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  margin-top: -16px;
  margin-left: -16px;
  background-color: #ffffff;
  border-radius: 44px;
  box-shadow: 3px 2px 4px 0px rgba(118, 84, 165, 0.44);
  color: #7e44fb;
  font-size: 20px;
  font-weight: 800;
}
.digital-pledge--step.active08 .pledge--steps .pledge--step.step08 .tooltip--button:hover {
  cursor: pointer;
}
.digital-pledge--step.active08 .pledge--steps .pledge--step.step08 .tooltip--button:not(.on) {
  background-color: #aa7dfd;
}
.digital-pledge--step.active08 .pledge--steps .pledge--step.step08 .tooltip--button:not(.on):hover {
  background-color: rgba(255, 255, 255, 0.8);
}
.digital-pledge--step.active08 .pledge--steps .pledge--step.step08 .tooltip--button.on p {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 44px;
  height: 44px;
  margin-top: -16px;
  margin-left: -16px;
  background-color: #ffffff;
  border-radius: 44px;
  box-shadow: 3px 2px 4px 0px rgba(118, 84, 165, 0.44);
  color: #7e44fb;
  font-size: 20px;
  font-weight: 800;
}
.digital-pledge--step.active08 .pledge--bar::after {
  width: calc((100% - 96px) / 7 * 7 + 96px + 18px);
}
.digital-pledge--box {
  position: relative;
  margin-top: 31px;
}
.digital-pledge--box .pledge__pagenation {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  position: absolute;
  width: 44px;
  height: 44px;
  top: 50%;
  margin-top: -75px;
  background-color: #ffffff;
  border: 1px solid #f6f6f6;
  border-radius: 44px;
  box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.1);
  z-index: 10;
}
.digital-pledge--box .pledge__pagenation:disabled p,
.digital-pledge--box .pledge__pagenation.disabled p {
  opacity: 0.3;
}
.digital-pledge--box .pledge__pagenation.prev {
  left: -22px;
  padding-right: 2px;
}
.digital-pledge--box .pledge__pagenation.prev p {
  transform: rotate(180deg);
}
.digital-pledge--box .pledge__pagenation.next {
  right: -22px;
  padding-left: 2px;
}
.digital-pledge--box .pledge__contents {
  position: relative;
  text-align: center;
  z-index: 5;
}
.digital-pledge--box .pledge__contents .pledge-content {
  padding: 24px;
}
.digital-pledge--box .pledge__contents .pledge-content .image {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  border-radius: 16px;
  background-color: #ffdfdb;
}
.digital-pledge--box .pledge__contents .pledge-content .image img {
  display: block;
  max-width: 100%;
  max-height: 100%;
}
.digital-pledge--box .pledge__contents .pledge-content .text {
  margin-top: 30px;
  color: #000000;
  font-size: 24px;
  font-weight: 700;
}
.digital-pledge--box .pledge__contents .pledge-content .button-main {
  width: 240px;
  margin-top: 30px;
}
.digital-pledge--box .pledge__contents .pledge-content .button-main.violet-light {
  color: #7e44fb;
  cursor: default;
}
.digital-pledge--buttons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 100px;
  margin-top: 48px;
  margin-bottom: 63px;
}
.digital-pledge--buttons .button {
  color: #7e44fb;
  font-size: 32px;
  font-weight: 800;
  line-height: 36px;
}
.digital-pledge--buttons .button:disabled,
.digital-pledge--buttons .button.disabled {
  opacity: 0.2;
}

/* 241119 임시접속화면 추가 */
.wrap.is--mint {
  background-color: #2cbbb6;
}
.wrap.is--dark {
  position: relative;
}
.wrap.is--dark:not(.is--intro) {
  background-color: #20114f;
  color: #ffffff;
}
.wrap.is--dark:not(.is--intro)::after {
  /* 260317 선택자 수정 */
  position: absolute;
  width: 2749px;
  top: 101px;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  background-image: url("../images/main/bg.jpg");
  background-repeat: no-repeat;
  background-position: center -31px;
  background-size: 100% auto;
  content: "";
}
/* 240112 main */
/* 250203 서비스 화면 높이 고정 */
.wrap.unable::after {
  top: 0 !important;
}
.wrap.unable .container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 10;
}
.wrap.unable .contents-area {
  padding-bottom: 0;
}
.unable_contents {
  position: relative;
}
.unable_contents .white_box {
  width: 1128px;
  min-height: 582px; /*240806 수정*/
  background: #fff;
  border-radius: 20px;
  padding: 120px 80px;
  text-align: center;
}
.unable_contents .main-login--ai {
  position: absolute;
  width: 462px;
  height: 426px;
  top: 350px;
  left: -175px;
}
.unable_contents .edu_list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 24px 32px;
  margin-top: 80px;
}
.box-bg__gray {
  background-color: #f3f3f3;
  border-radius: 6px;
}
/* 240806 시스템 점검 추가 */
.unable_contents .box-bg__gray {
  width: fit-content;
  margin: 20px auto 0;
  background: #f8f8f8;
  padding: 14px 24px;
  color: rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  gap: 12px;
  border-radius: 10px;
}
.unable_contents .box-bg__gray strong {
  font-weight: 800;
}

/* 260526 비밀번호 오버레이 */
/* 260528 아이디 오버레이 추가 */
.id_box .id-overlay,
.password_box .password-overlay {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 6px 14px;
  font-size: 16px;
  color: #333;
  background: transparent;
  pointer-events: none;
  white-space: pre;
  overflow: hidden;
}
.password_box .password-overlay {
  display: none;
}
/* 보기 모드일 때 실제 input */
.password_box .reveal-active {
  color: transparent !important;
  caret-color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
.id_box {
  position: relative;
}
.id_box input {
  color: transparent !important;
  caret-color: #333;
  -webkit-text-fill-color: transparent !important;
}
.id_box input::placeholder {
  color: #999 !important;
  -webkit-text-fill-color: #999 !important;
}