@charset "UTF-8";
/* 키프레임 */
@keyframes shake-left {
  0% {
    rotate: -1deg;
  }
  100% {
    rotate: 3deg;
  }
}
@keyframes shake-left-point {
  0% {
    rotate: -1deg;
  }
  100% {
    rotate: 1deg;
  }
}
@keyframes shake-right-point {
  0% {
    rotate: 1deg;
  }
  100% {
    rotate: -1deg;
  }
}
@keyframes shake-left-s {
  0% {
    rotate: 0deg;
  }
  25% {
    rotate: -10deg;
  }
  50% {
    rotate: 5deg;
  }
  75% {
    rotate: -10deg;
  }
  100% {
    rotate: 0deg;
  }
}
@keyframes shake-right {
  0% {
    rotate: 1deg;
  }
  100% {
    rotate: -3deg;
  }
}
@keyframes swing-left {
  0% {
    transform: translateX(-0.5rem);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes swing-top {
  0% {
    transform: translateY(-1rem);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes ani-flicker {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/* 믹스인 */
/* 서브헤더 */
.subHeader {
  position: relative;
  background: #f5f5f5;
  isolation: isolate;
}
.subHeader::before {
  content: "";
  width: 100%;
  height: 1px;
  background: #333333;
  position: absolute;
  bottom: 0;
  z-index: -1;
}
.subHeader .subTit {
  padding: min(5rem, 10vw) 0;
  overflow: hidden;
  width: calc(100% - min(6rem, 6vw));
  max-width: 1400px;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: height 300ms cubic-bezier(0.075, 0.82, 0.165, 1), opacity 500ms ease-in-out;
  opacity: 1;
}
.subHeader .subTit h1 {
  font-size: 4rem;
  font-family: "WavvePADO", sans-serif;
  color: #333333;
  display: flex;
  align-items: self-end;
  line-height: 1;
  gap: 0.6rem;
  transition: all 800ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
.subHeader .sitePath {
  display: flex;
  align-items: center;
}
.subHeader .sitePath .home a {
  text-indent: -9999px;
  display: block;
  width: 2rem;
  height: 2rem;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='19' viewBox='0 0 18 19' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.0352 6.48862C17.0352 6.24978 16.9221 6.025 16.7304 5.88268L10.2329 1.05601C9.47953 0.496303 8.44823 0.496303 7.6949 1.05601L1.19736 5.88268C1.00562 6.025 0.892578 6.24978 0.892578 6.48862V16.0605C0.892578 17.2979 1.89606 18.3014 3.13359 18.3014H14.7942C16.0317 18.3014 17.0352 17.2979 17.0352 16.0605V6.48862ZM9.71867 16.7918H14.7942C15.1981 16.7918 15.5255 16.4643 15.5255 16.0605V6.86819L9.33258 2.2679C9.11374 2.10529 8.81403 2.10529 8.59519 2.2679C6.98229 3.46601 3.45794 6.08398 2.40229 6.86819V16.0605C2.40229 16.4643 2.72968 16.7918 3.13359 16.7918H8.2091V12.4711C8.2091 12.0544 8.54722 11.7163 8.96388 11.7163C9.38055 11.7163 9.71867 12.0544 9.71867 12.4711V16.7918Z' fill='%235838E6'/%3E%3C/svg%3E") no-repeat 0 0/contain;
}
.subHeader .sitePath li {
  display: flex;
  align-items: center;
  color: #777777;
}
.subHeader .sitePath li:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin: 0 1rem;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='13' viewBox='0 0 8 13' fill='none'%3E%3Cpath d='M1.85547 0.293076C1.46494 -0.097448 0.831931 -0.097448 0.441406 0.293076C0.0509195 0.683604 0.0508947 1.31663 0.441406 1.70714L4.91992 6.18565L0.441406 10.6642C0.0509195 11.0547 0.0508947 11.6877 0.441406 12.0782C0.831921 12.4687 1.46495 12.4687 1.85547 12.0782L7.04102 6.89269L7.10938 6.81749C7.22953 6.67019 7.30168 6.49619 7.3252 6.31749L7.33301 6.23351V6.1378C7.33148 6.10615 7.32874 6.07449 7.32422 6.04308C7.2993 5.86809 7.22717 5.69823 7.10938 5.55382L7.04102 5.47862L1.85547 0.293076Z' fill='%23c8c8c8'/%3E%3C/svg%3E") no-repeat center center/contain;
}
.subHeader .sitePath li:last-child {
  font-weight: 600;
  color: #333333;
}
.subHeader .subMenu {
  width: calc(100% - min(6rem, 6vw));
  max-width: 1400px;
  margin: 0 auto;
  box-sizing: border-box;
}
.subHeader .subMenu .snb {
  display: flex;
}
.subHeader .subMenu .snb a {
  color: inherit;
}
.subHeader .subMenu .snb li {
  font-size: 1.6rem;
  color: #777777;
  display: block;
  line-height: 1;
  border: 1px solid #dddddd;
  border-bottom: 1px solid #333333;
  background: #ffffff;
  font-weight: 300;
  width: 100%;
  max-width: 22rem;
  text-align: center;
}
.subHeader .subMenu .snb li:not(:last-child) {
  border-right: none;
}
.subHeader .subMenu .snb li a {
  padding: 1.6rem 0.5rem;
  display: block;
}
.subHeader .subMenu .snb li:hover {
  color: #333333;
}
.subHeader .subMenu .snb li.active {
  font-weight: 700;
  color: #333333;
  border: 1px solid #333333;
  border-bottom: 1px solid #ffffff;
}
.subHeader .StepArea .StepGuide {
  width: 100%;
  background: #f8f8f8;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3.3rem 2rem 3.4rem;
}
.subHeader .StepArea .StepGuide dl {
  display: flex;
  align-items: center;
  color: #999999;
  rotate: 0.4deg;
}
.subHeader .StepArea .StepGuide dl.active {
  color: #5838E6;
}
.subHeader .StepArea .StepGuide dl.active dt, .subHeader .StepArea .StepGuide dl.active dd {
  font-weight: 600;
}
.subHeader .StepArea .StepGuide dl:not(:last-child)::after {
  content: "";
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='13' viewBox='0 0 8 13' fill='none'%3E%3Cpath d='M1.85547 0.293076C1.46494 -0.097448 0.831931 -0.097448 0.441406 0.293076C0.0509195 0.683604 0.0508947 1.31663 0.441406 1.70714L4.91992 6.18565L0.441406 10.6642C0.0509195 11.0547 0.0508947 11.6877 0.441406 12.0782C0.831921 12.4687 1.46495 12.4687 1.85547 12.0782L7.04102 6.89269L7.10938 6.81749C7.22953 6.67019 7.30168 6.49619 7.3252 6.31749L7.33301 6.23351V6.1378C7.33148 6.10615 7.32874 6.07449 7.32422 6.04308C7.2993 5.86809 7.22717 5.69823 7.10938 5.55382L7.04102 5.47862L1.85547 0.293076Z' fill='%23ccc'/%3E%3C/svg%3E") no-repeat center center/contain;
  display: block;
  width: 0.9rem;
  height: 1.4rem;
  margin: 0 min(2vw, 2rem);
}
.subHeader .StepArea .StepGuide dl dt {
  font-size: min(3vw, 1.6rem);
  font-weight: 600;
  display: inline-block;
  margin-right: 0.6rem;
}
.subHeader .StepArea .StepGuide dl dd {
  font-size: min(4vw, 2.2rem);
  font-weight: 500;
}
.subHeader .StepArea .StepTit {
  background: #D5F3FE;
  text-align: center;
  height: min(44vw, 45rem);
  position: relative;
  padding: 0 2rem;
  padding-top: 5vw;
  overflow: hidden;
  isolation: isolate;
}
.subHeader .StepArea .StepTit h1 {
  font-size: max(2.138vw, 2.6rem);
  color: #333333;
  word-break: keep-all;
}
.subHeader .StepArea .StepTit h1 span {
  font-weight: 600;
}
.subHeader .StepArea .StepTit h1 strong {
  display: block;
  font-weight: 600;
  color: #5838E6;
}
.subHeader .StepArea .StepTit > img {
  position: absolute;
  z-index: -1;
}
.subHeader .StepArea .StepTit > img.obj-f {
  width: min(35vw, 36rem);
  left: 2%;
  bottom: -1rem;
  rotate: 0deg;
  animation: shake-left-point 2000ms ease-in-out infinite 500ms alternate-reverse;
  animation-fill-mode: backwards;
}
.subHeader .StepArea .StepTit > img.obj-m {
  width: min(31vw, 32.2rem);
  right: 2%;
  bottom: -1rem;
  animation: shake-right-point 2000ms ease-in-out infinite 500ms alternate-reverse;
  animation-fill-mode: backwards;
}
.subHeader .StepArea .StepTit > img.obj-city {
  z-index: -2;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
}
.subHeader .StepArea .StepTit > img.obj-cloud {
  z-index: -2;
  left: 2%;
  top: 2rem;
  animation: swing-left 1000ms ease-in-out infinite 500ms alternate-reverse;
}

/* 서브비주얼 */
.subVisual {
  width: calc(100% - min(6rem, 6vw));
  max-width: 1400px;
  margin: 0 auto;
  box-sizing: border-box;
  color: #ffffff;
  text-align: center;
  aspect-ratio: 1400/250;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-bottom: 4rem;
}
.subVisual p {
  font-size: min(5rem, 10vw);
  font-family: "WavvePADO", sans-serif;
  line-height: 1.2;
}
.subVisual p b {
  color: #BDF03E;
}
.subVisual span {
  font-size: 2.6rem;
}

/* 서브콘텐츠 */
#wrap:has(.flt_banner) .contents > section:last-child {
  padding-bottom: min(30rem, 40vw);
}

.contents {
  padding-top: clamp(4rem, 3vw, 8rem);
  box-sizing: border-box;
  width: 100%;
}
.contents > section {
  width: 100%;
  height: 100%;
  position: relative;
  padding-bottom: min(12rem, 20vw);
}
.contents > section:first-of-type .step_inner {
  margin-top: -10vw;
  border-radius: 5rem 5rem 0 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
  padding-top: 8rem;
  padding-bottom: 8rem;
}
@media screen and (max-width: 1024px) {
  .contents > section:first-of-type .step_inner {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }
}
@media screen and (max-width: 560px) {
  .contents > section:first-of-type .step_inner {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}
.contents > section .step_inner {
  padding: 0 8rem;
  position: relative;
  z-index: 2;
  width: calc(100% - 6rem);
  margin: 0 auto;
  max-width: 156rem;
  transition: all 500ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
@media screen and (max-width: 1024px) {
  .contents > section .step_inner {
    width: 100%;
    padding-top: 0rem;
    padding-bottom: 0rem;
    padding-left: 2rem;
    padding-right: 2rem;
  }
}
@media screen and (max-width: 560px) {
  .contents > section .step_inner {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}
.contents > section .sec_inner {
  width: calc(100% - min(6rem, 6vw));
  max-width: 1400px;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 6rem;
  height: 100%;
}
.contents > section .sec_caution {
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4vw;
  flex-wrap: wrap;
  padding-bottom: min(2rem, 4vw);
}
.contents > section .sec_caution p {
  font-size: 1.8rem;
  color: #333333;
  line-height: 1.3;
  font-weight: 500;
  word-break: keep-all;
  text-wrap: balance;
}
.contents > section .sec_caution p span {
  font-weight: 400;
  color: #5838E6;
}
.contents > section .sec_caution .moreBtn {
  flex-shrink: 0;
}

.sec_half {
  display: flex;
  justify-content: space-between;
  gap: max(2rem, 3vw);
  align-items: flex-start;
  height: 100%;
}

.sec_tit {
  position: relative;
  margin-bottom: 2rem;
}
.sec_tit h2 {
  display: flex;
  align-items: center;
  font-size: min(3rem, 9vw);
  font-family: "WavvePADO", sans-serif;
  color: #333333;
  line-height: 1.2;
}
.sec_tit h2::before {
  content: "";
  width: 2.2rem;
  height: 2.1rem;
  margin-right: 1.8rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='21' viewBox='0 0 22 21' fill='none'%3E%3Cellipse cx='6.875' cy='6.87502' rx='6.875' ry='6.87502' fill='%235838E6'/%3E%3Cellipse cx='15.125' cy='13.75' rx='6.875' ry='6.87502' fill='%23BDF03E'/%3E%3C/svg%3E") no-repeat 0 0/contain;
}
.sec_tit h3 {
  font-size: max(2.6rem, 1.710313vw);
  font-weight: 600;
  line-height: 1;
  word-break: keep-all;
  text-wrap: pretty;
  color: #333333;
}
.sec_tit h3 > span {
  color: #222222;
}
.sec_tit h3 > b {
  color: #5838E6;
}
.sec_tit p {
  font-size: 1.8rem;
  font-weight: 300;
  color: #777777;
  word-break: keep-all;
  text-wrap: pretty;
  margin-top: 1rem;
}
.sec_tit > img {
  margin-top: 3vw;
  max-width: 27vw;
  margin-left: -8vw;
}
.sec_tit em {
  font-size: 1.8rem;
  font-weight: 500;
  color: #5838E6;
  display: block;
  margin-bottom: 0.8rem;
}
.sec_tit + .bd_tit {
  margin-top: 0;
}

.bd_tit {
  padding-top: 4rem;
  border-top: 1px solid #eeeeee;
  margin-bottom: 2rem;
}
.bd_tit h3 {
  color: #333333;
  font-size: min(2.6rem, 9vw);
  font-family: "WavvePADO", sans-serif;
  line-height: 1.2;
  letter-spacing: -0.06rem;
  text-wrap-style: pretty;
  word-break: keep-all;
}
.bd_tit h3 b {
  color: #5838E6;
}
.bd_tit p {
  color: #777777;
  margin-top: 0.6rem;
  font-size: min(1.6rem, 6vw);
  font-style: normal;
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.0165rem;
  text-wrap-style: pretty;
  word-break: keep-all;
}
.bd_tit p:has(.moreBtn) {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
}

.sec_left {
  width: 100%;
  max-width: 40rem;
}
.sec_left.sec_sticky {
  position: sticky;
  top: 11rem;
}
.sec_left .sec_progress ul {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: max(2rem, 3vw);
}
.sec_left .sec_progress li {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.sec_left .sec_progress p {
  font-size: max(1.8rem, 1.176vw);
  line-height: 1.2;
  font-weight: 600;
  color: #333333;
  transition: font-size 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.sec_left .sec_progress i {
  width: 100%;
  height: 1.6rem;
  box-shadow: 0 0 0 0.1rem rgba(238, 238, 238, 0.9333333333);
  border-radius: 100px;
  padding: 4px;
  box-sizing: border-box;
  display: block;
}
.sec_left .sec_progress i span {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #832CBD 0%, #5838E6 100%);
  display: block;
  border-radius: 100px;
}

.sec_right {
  width: 100%;
  padding-top: 1rem;
  height: 100%;
  overflow: hidden;
}
.sec_right .chartArea {
  width: 100%;
  height: 100%;
  min-height: 36rem;
}
.sec_right .chartArea.chartRadar {
  max-height: 58rem;
}
.sec_right canvas {
  height: 100%;
  width: 100%;
  display: block;
}
.sec_right .board_list {
  background: #fff;
  box-shadow: 0 20px 53px -31px rgba(0, 0, 0, 0.18);
  overflow: hidden;
  border-radius: 2rem;
}
.sec_right .info-editor {
  border-radius: 2rem;
  border: 2px solid rgba(199, 226, 235, 0.56);
  background: #FFF;
  box-sizing: border-box;
  padding: min(3vw, 4rem);
}
.sec_right .info-editor dt {
  border-radius: 10rem;
  background: #333333;
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.9;
  letter-spacing: -0.072rem;
  width: fit-content;
  color: #ffffff;
  padding: 0.2rem 4rem;
  margin-bottom: 2rem;
}
.sec_right .info-editor dd {
  color: #999999;
  font-family: Pretendard;
  font-size: 2rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.65;
  letter-spacing: -0.06rem;
}

.sec_tabMenu {
  width: 100%;
  border-bottom: 1px solid #dddddd;
}
.sec_tabMenu ul {
  width: calc(100% - min(6rem, 6vw));
  max-width: 1400px;
  margin: 0 auto;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}
.sec_tabMenu ul li {
  line-height: 1;
  letter-spacing: -0.032rem;
  color: #999999;
  padding: 2.1rem 4rem;
  position: relative;
}
.sec_tabMenu ul li::after {
  content: "";
  width: 0%;
  transition: all 600ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
  bottom: -0.1rem;
  left: 50%;
  transform: translateX(-50%);
  height: 0.3rem;
  background: transparent;
  position: absolute;
}
.sec_tabMenu ul li.active {
  color: #5838E6;
  font-weight: 600;
}
.sec_tabMenu ul li.active::after {
  background: #5838E6;
  width: 100%;
}

/* 커리큘럼 메인 */
main {
  transition: all 500ms ease-in-out;
  background: #5838E6;
  width: 100%;
  height: 46rem;
  display: block;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
main .m_inner {
  width: calc(100% - min(6rem, 6vw));
  max-width: 1400px;
  margin: 0 auto;
  box-sizing: border-box;
  position: relative;
  transition: all 500ms;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
main .m_inner .m_head {
  display: flex;
  align-items: center;
  color: #ffffff;
  gap: 1.4rem;
}
main .m_inner .m_head em {
  padding: 0.8rem 1.2rem;
  border: 1px solid #ffffff;
  border-radius: 0.4rem;
  line-height: 1;
}
main .m_inner .m_head ul {
  display: flex;
  align-items: center;
}
main .m_inner .m_head ul li {
  display: flex;
  align-items: center;
  font-weight: 500;
}
main .m_inner .m_head ul li:not(:last-child)::after {
  content: "";
  width: 1px;
  height: 1.2rem;
  background: #ffffff;
  display: block;
  margin: 0 1rem;
}
main .m_inner .m_thumb {
  width: 100%;
  max-width: 60rem;
  overflow: hidden;
  border-radius: 0.4rem;
  transition: all 500ms;
  position: relative;
  aspect-ratio: 600/336;
  outline: 2px solid #5838E6;
  outline-offset: -2px;
}
main .m_inner .m_thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
main .m_inner .m_thumb .m_btn {
  height: 4.2rem;
  max-width: 16rem;
  width: 100%;
  flex-shrink: 0;
  gap: 2rem;
  color: #ffffff;
  font-weight: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(59.7991071429, 26.2276785714, 208.7723214286);
  transition: background 500ms cubic-bezier(0.075, 0.82, 0.165, 1);
  position: absolute;
  right: 2rem;
  bottom: 2rem;
}
main .m_inner .m_thumb .m_btn:hover {
  background: rgb(53.3102678571, 23.3816964286, 186.1183035714);
}
main .m_inner .m_copy {
  box-sizing: border-box;
  padding-top: 2rem;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  max-width: 71rem;
}
main .m_inner .m_copy h1 {
  font-size: min(3.8rem, 11vw);
  font-family: "WavvePADO", sans-serif;
  color: #BDF03E;
  display: inline-flex;
  align-items: flex-end;
  line-height: 1.2;
  margin-top: 2rem;
  word-break: keep-all;
}
main .m_inner .m_copy p {
  color: #ffffff;
  font-size: max(1.7rem, 0.9vw);
  font-weight: 300;
  word-break: keep-all;
  margin-top: 0.4rem;
}
main .m_inner .m_copy .hashTag {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1.6rem 0;
}
main .m_inner .m_copy .hashTag span {
  font-size: 1.4rem;
  padding: 0.4rem 0.9rem 0.5rem;
  border-radius: 100px;
  border: 0.1rem solid #dddddd;
  color: #5838E6;
  display: block;
  width: fit-content;
  line-height: 1;
  background: #fff;
  font-weight: 300;
}
main .m_inner .m_copy .m_data {
  margin-top: 4rem;
  color: #ffffff;
  font-size: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
main .m_inner .m_copy .m_data dl {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}
main .m_inner .m_copy .m_data dl dt {
  font-weight: 600;
}
main .m_inner .m_copy .m_data dl dd {
  font-weight: 300;
}

.sec_tabMenu.active {
  font-weight: 600;
  color: #5838E6;
}

.sec_tabWrap section {
  display: none;
  padding-bottom: min(24rem, 30vw);
}
.sec_tabWrap section.active {
  display: block;
}

/* 유저관련 */
.userCenter {
  background: #f8f8f8;
  padding: 5vw 0;
}
.userCenter .cauArea {
  margin-top: min(2rem, 2vw);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.userCenter .noti-cau {
  display: block;
  font-size: 1.6rem;
  line-height: 1.4;
  color: #999999;
  margin-left: 2rem;
  position: relative;
  font-weight: 300;
}
.userCenter .noti-cau strong {
  font-weight: 500;
  color: #777777;
}
.userCenter .noti-cau::before {
  content: "※";
  font-family: "Inter", sans-serif;
  display: inline-block;
  margin-right: 0.2rem;
  position: absolute;
  left: -2rem;
  top: -0.02rem;
}
.userCenter .ip-cau {
  position: relative;
  color: #999999;
  font-weight: 300;
  margin-top: 1rem;
  margin-left: 2.6rem;
  display: none;
}
.userCenter .ip-cau::before {
  content: "";
  background: #333333 url("data:image/svg+xml;charset=utf8,%3Csvg width='2' height='10' viewBox='0 0 2 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 1.5C0 0.947715 0.447715 0.5 1 0.5V0.5C1.55228 0.5 2 0.947715 2 1.5V5.5C2 6.05228 1.55228 6.5 1 6.5V6.5C0.447715 6.5 0 6.05228 0 5.5V1.5Z' fill='%23fff'/%3E%3Cpath d='M0 8.5C0 7.94772 0.447715 7.5 1 7.5V7.5C1.55228 7.5 2 7.94772 2 8.5V8.5C2 9.05228 1.55228 9.5 1 9.5V9.5C0.447715 9.5 0 9.05228 0 8.5V8.5Z' fill='%23fff'/%3E%3C/svg%3E%0A") no-repeat center center/0.2rem;
  width: 2rem;
  height: 2rem;
  border-radius: 100rem;
  position: absolute;
  left: -2.6rem;
  top: 0.1rem;
}
.userCenter .ip-cau.warring {
  color: #5838E6;
  font-weight: 400;
}
.userCenter .ip-cau.warring::before {
  background-color: #5838E6;
}
.userCenter .form-user {
  display: flex;
  flex-direction: column;
  gap: min(2rem, 4vw);
}
.userCenter .form-user dl {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.userCenter .form-user dl dt {
  color: #333333;
  font-size: 1.8rem;
  font-weight: 500;
}
.userCenter .form-user dl dt i.imp {
  color: #d32b2b;
  display: inline-block;
  margin-left: 0.1rem;
}
.userCenter .form-user dl dd.ip-tooltip .ip-cau {
  display: block;
}
.userCenter .form-user dl dd.ip-faild input[type=text], .userCenter .form-user dl dd.ip-faild input[type=password] {
  border: 1px solid #d32b2b;
  background-color: rgba(211, 43, 43, 0.08);
}
.userCenter .form-user dl dd.ip-faild input[type=text]::placeholder, .userCenter .form-user dl dd.ip-faild input[type=password]::placeholder {
  color: #d32b2b;
}
.userCenter .form-user dl dd.ip-faild .ip-cau {
  color: #d32b2b;
  display: block;
}
.userCenter .form-user dl dd.ip-faild .ip-cau::before {
  background-color: #d32b2b;
}
.userCenter .form-user dl dd .cut-flex {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.userCenter .form-user dl dd .cut-flex.half {
  width: calc(50% - 0.5rem);
}
.userCenter .form-user dl dd .cut-flex.call {
  width: calc(50% - 0.5rem);
}
.userCenter .form-user dl dd .cut-flex.call input {
  text-align: center;
}
.userCenter .form-user dl dd .cut-flex:not(:last-of-type) {
  margin-bottom: 1rem;
}
.userCenter .form-user dl dd .cut-flex span {
  color: #777777;
  font-weight: 200;
}
.userCenter .form-user dl dd .cut-flex span.dash {
  min-width: 1.4rem;
  text-align: center;
}
.userCenter > section .sec_tit {
  margin-bottom: min(2rem, 4vw);
}
.userCenter > section .sec_tit i {
  width: min(12rem, 16vw);
  height: min(12rem, 16vw);
  display: block;
  margin: 0 auto 2rem;
  background: url("../img/common/ico-user.svg") no-repeat center/contain;
}
.userCenter > section .sec_tit p strong {
  font-weight: 600;
  color: #5838E6;
}
.userCenter > section .sec_tit:has(+ .user-pwCheck, + .user-modify) {
  width: calc(100% - min(6rem, 6vw));
  max-width: 100rem;
  margin: 0 auto 4rem;
  box-sizing: border-box;
}
.userCenter > section .user-pwCheck, .userCenter > section .user-modify {
  background: #ffffff;
  width: calc(100% - min(6rem, 6vw));
  max-width: 100rem;
  margin: 0 auto;
  box-sizing: border-box;
  padding: min(6rem, 6vw);
}
.userCenter > section .user-pwCheck .pwForm {
  padding: 3rem;
  background: #f8f8f8;
  border-radius: 0.4rem;
}
.userCenter > section .user-pwCheck .pwForm > div {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.userCenter > section .user-pwCheck input.loginID, .userCenter > section .user-pwCheck input.loginPW {
  transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
  height: 6rem;
  padding: 2rem;
  padding-left: 5.4rem;
  background: #ffffff no-repeat 2rem center/2.4rem;
}
.userCenter > section .user-pwCheck input.loginID::placeholder, .userCenter > section .user-pwCheck input.loginPW::placeholder {
  transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1);
}
.userCenter > section .user-pwCheck input.loginID:focus-within, .userCenter > section .user-pwCheck input.loginID:hover, .userCenter > section .user-pwCheck input.loginPW:focus-within, .userCenter > section .user-pwCheck input.loginPW:hover {
  box-shadow: 0 0 0 2px #5838E6 inset;
}
.userCenter > section .user-pwCheck input.loginID:focus-within::placeholder, .userCenter > section .user-pwCheck input.loginID:hover::placeholder, .userCenter > section .user-pwCheck input.loginPW:focus-within::placeholder, .userCenter > section .user-pwCheck input.loginPW:hover::placeholder {
  color: #5838E6;
}
.userCenter > section .user-pwCheck input.loginPW {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.0013 3.90476C10.2754 3.90476 8.8763 5.18395 8.8763 6.7619V8.66667H15.1263V6.7619C15.1263 5.18395 13.7272 3.90476 12.0013 3.90476ZM17.2096 8.66667V6.7619C17.2096 4.13198 14.8778 2 12.0013 2C9.12482 2 6.79297 4.13198 6.79297 6.7619V8.66667C5.06708 8.66667 3.66797 9.94585 3.66797 11.5238V19.1429C3.66797 20.7208 5.06708 22 6.79297 22H17.2096C18.9355 22 20.3346 20.7208 20.3346 19.1429V11.5238C20.3346 9.94585 18.9355 8.66667 17.2096 8.66667ZM6.79297 10.5714C6.21767 10.5714 5.7513 10.9978 5.7513 11.5238V19.1429C5.7513 19.6688 6.21767 20.0952 6.79297 20.0952H17.2096C17.7849 20.0952 18.2513 19.6688 18.2513 19.1429V11.5238C18.2513 10.9978 17.7849 10.5714 17.2096 10.5714H6.79297ZM12.0013 13.4286C12.5766 13.4286 13.043 13.855 13.043 14.381V16.2857C13.043 16.8117 12.5766 17.2381 12.0013 17.2381C11.426 17.2381 10.9596 16.8117 10.9596 16.2857V14.381C10.9596 13.855 11.426 13.4286 12.0013 13.4286Z' fill='%23ddd'/%3E%3C/svg%3E%0A");
}
.userCenter > section .user-pwCheck input.loginPW:focus-within, .userCenter > section .user-pwCheck input.loginPW:hover {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.0013 3.90476C10.2754 3.90476 8.8763 5.18395 8.8763 6.7619V8.66667H15.1263V6.7619C15.1263 5.18395 13.7272 3.90476 12.0013 3.90476ZM17.2096 8.66667V6.7619C17.2096 4.13198 14.8778 2 12.0013 2C9.12482 2 6.79297 4.13198 6.79297 6.7619V8.66667C5.06708 8.66667 3.66797 9.94585 3.66797 11.5238V19.1429C3.66797 20.7208 5.06708 22 6.79297 22H17.2096C18.9355 22 20.3346 20.7208 20.3346 19.1429V11.5238C20.3346 9.94585 18.9355 8.66667 17.2096 8.66667ZM6.79297 10.5714C6.21767 10.5714 5.7513 10.9978 5.7513 11.5238V19.1429C5.7513 19.6688 6.21767 20.0952 6.79297 20.0952H17.2096C17.7849 20.0952 18.2513 19.6688 18.2513 19.1429V11.5238C18.2513 10.9978 17.7849 10.5714 17.2096 10.5714H6.79297ZM12.0013 13.4286C12.5766 13.4286 13.043 13.855 13.043 14.381V16.2857C13.043 16.8117 12.5766 17.2381 12.0013 17.2381C11.426 17.2381 10.9596 16.8117 10.9596 16.2857V14.381C10.9596 13.855 11.426 13.4286 12.0013 13.4286Z' fill='%235838E6'/%3E%3C/svg%3E%0A");
}
.userCenter > section .user-message {
  width: calc(100% - min(6rem, 6vw));
  max-width: 140rem;
  margin: 0 auto;
  display: flex;
  gap: 1rem;
}
.userCenter > section .user-message > div {
  width: 100%;
}
.userCenter > section .user-message .msg-list {
  max-width: 48rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.userCenter > section .user-message .msg-list > div {
  padding: min(3rem, 4vw);
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 0.4rem;
}
.userCenter > section .user-message .msg-list .msg_util {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.userCenter > section .user-message .msg-list .msg_box {
  height: 100%;
}
.userCenter > section .user-message .msg-list .msg_box .msg_item {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 2rem 0;
}
.userCenter > section .user-message .msg-list .msg_box .msg_item:first-child {
  padding-top: 0;
}
.userCenter > section .user-message .msg-list .msg_box .msg_item:last-child {
  padding-bottom: 0;
}
.userCenter > section .user-message .msg-list .msg_box .msg_item:not(:last-child) {
  border-bottom: 1px solid #eeeeee;
}
.userCenter > section .user-message .msg-list .msg_box .msg_item .thumb {
  width: 6rem;
  height: 6rem;
  display: block;
  flex-shrink: 0;
  background: url("../img/common/ico-user.svg") no-repeat center/100%;
}
.userCenter > section .user-message .msg-list .msg_box .msg_item .info dt a {
  display: flex;
  align-items: center;
}
.userCenter > section .user-message .msg-list .msg_box .msg_item .info dt a .name {
  color: #333333;
  font-weight: 600;
}
.userCenter > section .user-message .msg-list .msg_box .msg_item .info dt a .data {
  color: #999999;
  font-weight: 300;
}
.userCenter > section .user-message .msg-list .msg_box .msg_item .info dt a .state {
  color: #5838E6;
  font-weight: 400;
}
.userCenter > section .user-message .msg-list .msg_box .msg_item .info dt a span {
  font-size: 1.6rem;
}
.userCenter > section .user-message .msg-list .msg_box .msg_item .info dt a span:not(:last-child)::after {
  content: "";
  margin: 0 1rem;
  width: 1px;
  height: 10px;
  display: inline-block;
  background: #dddddd;
}
.userCenter > section .user-message .msg-list .msg_box .msg_item .info dd {
  font-size: 1.9rem;
  color: #777777;
  font-weight: 400;
}
.userCenter > section .user-message .msg-list .msg_box .msg_item .info dd a {
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}
.userCenter > section .user-message .msg-view {
  padding: min(3rem, 4vw);
  padding-top: min(3.5rem, 4vw);
  box-sizing: border-box;
  background: #ffffff;
  border-radius: 0.4rem;
  display: flex;
  flex-direction: column;
}
.userCenter > section .user-message .msg-view .msg_tit {
  display: flex;
  align-items: center;
  padding-bottom: min(3.2rem, 5vw);
  margin-bottom: min(3rem, 5vw);
  border-bottom: 1px solid #eeeeee;
}
.userCenter > section .user-message .msg-view .msg_tit h1 {
  font-size: min(2.8rem, 5vw);
  font-weight: 600;
  color: #333333;
}
.userCenter > section .user-message .msg-view .msg_tit p {
  color: #999999;
  font-size: min(1.8rem, 4vw);
  font-weight: 300;
}
.userCenter > section .user-message .msg-view .msg_tit p::before {
  content: "";
  margin: 0 1rem;
  width: 1px;
  height: 10px;
  display: inline-block;
  background: #dddddd;
}
.userCenter > section .user-message .msg-view .msg_cont {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.userCenter > section .user-message .msg-view .msg_cont p {
  font-size: min(2.2rem, 4.8vw);
  font-weight: 600;
}
.userCenter > section .user-message .msg-view .msg_cont .msg_info {
  display: flex;
  margin: min(1.4rem, 3vw) 0;
}
.userCenter > section .user-message .msg-view .msg_cont .msg_info > *:not(:last-child)::after {
  content: "";
  content: "";
  margin: 0 1rem;
  width: 1px;
  height: 12px;
  display: inline-block;
  background: #dddddd;
}
.userCenter > section .user-message .msg-view .msg_cont .msg_info strong {
  font-weight: 600;
}
.userCenter > section .user-message .msg-view .msg_cont .msg_info dl {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.userCenter > section .user-message .msg-view .msg_cont .msg_info dl dt {
  font-weight: 300;
  color: #777777;
}
.userCenter > section .user-message .msg-view .msg_cont .msg_info dl dd {
  font-weight: 500;
  color: #333333;
}
.userCenter > section .user-message .msg-view .msg_cont .msg_rec {
  width: 100%;
}
.userCenter > section .user-message .msg-view .msg_cont .msg_rec .textArea {
  width: 100%;
  height: 100%;
  max-height: 36rem;
  border: 1px solid #eeeeee;
  box-sizing: border-box;
  padding: min(2rem, 5vw);
  color: #333333;
  font-size: 1.6rem;
  font-weight: 400;
}

/* 업적관련 */
.meritCenter {
  width: 100%;
}
.meritCenter > section {
  padding: min(4rem, 4vw);
}
.meritCenter > section:not(:first-child) {
  border-top: 1px solid #eeeeee;
}
.meritCenter .mer_tit {
  position: relative;
  line-height: 1.21;
  display: flex;
  align-items: center;
  margin-bottom: min(2rem, 5vw);
}
.meritCenter .mer_tit h1 {
  font-size: min(3.2rem, 8vw);
  font-weight: 600;
  color: #333333;
  word-break: keep-all;
  text-wrap: pretty;
  color: #333333;
}
.meritCenter .mer_tit h1 strong {
  color: #333333;
  font-weight: 700;
}
.meritCenter .mer_tit h1 b {
  color: #5838E6;
  font-weight: 700;
}
.meritCenter .mer_tit p {
  color: #999999;
  font-size: min(1.8rem, 4vw);
  font-weight: 300;
  word-break: keep-all;
  text-wrap: pretty;
}
.meritCenter .mer_tit p::before {
  content: "";
  margin: 0 1.4rem;
  width: 1px;
  height: 10px;
  display: inline-block;
  background: #dddddd;
}
.meritCenter .mer_tit p strong {
  font-weight: 600;
  color: #5838E6;
}
.meritCenter .mer_tit > img {
  margin-top: 3vw;
  max-width: 27vw;
  margin-left: -8vw;
}
.meritCenter .ach_error {
  background: #fafafa;
  padding: min(6rem, 8vw);
  border-radius: 2rem;
  text-align: center;
}
.meritCenter .ach_error p {
  font-size: min(2.4rem, 8vw);
  font-weight: 500;
  color: #ffffff;
  padding: 0.6rem 2rem;
  line-height: 1.3;
  background: linear-gradient(90deg, #832CBD 0%, #5838E6 100%);
  width: fit-content;
  margin: 2rem auto 1rem;
  border-radius: 100rem;
}
.meritCenter .ach_error span {
  font-size: min(2rem, 5vw);
  display: block;
  color: #333333;
  line-height: 1.2;
}
.meritCenter .ach_grid {
  display: grid;
  gap: min(1rem, 4vw);
  grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr));
}
.meritCenter .ach_grid .ach_item {
  width: 100%;
  border: 1px solid #eee;
  border-radius: 1rem;
  box-sizing: border-box;
  padding: 3rem 2rem;
}
.meritCenter .ach_grid .ach_item .ch_label {
  display: block;
  border-radius: 100rem;
  color: #777;
  border: 1px solid #eeeeee;
  width: fit-content;
  margin: 0 auto;
  padding: 0.4rem 1rem;
}
.meritCenter .ach_grid .ach_item .ch_label input[type=radio] {
  display: none;
}
.meritCenter .ach_grid .ach_item .ch_label input[type=radio] + label {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}
.meritCenter .ach_grid .ach_item .ch_label input[type=radio] + label span {
  display: none;
}
.meritCenter .ach_grid .ach_item .ch_label input[type=radio] + label span.set {
  display: block;
}
.meritCenter .ach_grid .ach_item .ch_label input[type=radio] + label::before {
  content: "";
  flex-shrink: 0;
  width: 2rem;
  height: 2rem;
  background: url("../img/common/ach-set.svg") no-repeat center/100%;
}
.meritCenter .ach_grid .ach_item .ch_label input[type=radio]:checked + label span {
  display: none;
}
.meritCenter .ach_grid .ach_item .ch_label input[type=radio]:checked + label span.pick {
  display: block;
}
.meritCenter .ach_grid .ach_item .ch_label input[type=radio]:checked + label::before {
  background: url("../img/common/ach-pick.svg") no-repeat center/100%;
}
.meritCenter .ach_grid .ach_item .ch_label.ing {
  background: linear-gradient(90deg, #832CBD 0%, #5838E6 100%);
  color: #ffffff;
  border: 1px solid #5838E6;
}
.meritCenter .ach_grid .ach_item .ch_label.ing input[type=radio] + label span, .meritCenter .ach_grid .ach_item .ch_label.ing input[type=radio]:checked + label span {
  display: none;
  color: #ffffff;
}
.meritCenter .ach_grid .ach_item .ch_label.ing input[type=radio] + label span.ing, .meritCenter .ach_grid .ach_item .ch_label.ing input[type=radio]:checked + label span.ing {
  display: block;
}
.meritCenter .ach_grid .ach_item .ch_label.ing input[type=radio] + label::before, .meritCenter .ach_grid .ach_item .ch_label.ing input[type=radio]:checked + label::before {
  background: url("../img/common/ach-ing.svg") no-repeat center/100%;
}
.meritCenter .ach_grid .ach_item .thumb {
  padding: 1rem;
  border-radius: 100rem;
  border: 1px solid #dddddd;
  width: 10rem;
  height: 10rem;
  margin: 1rem auto 2rem;
  outline: 1px solid #eeeeee;
  outline-offset: -1rem;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: min(2.4rem, 20vw);
}
.meritCenter .ach_grid .ach_item .thumb img {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}
.meritCenter .ach_grid .ach_item .info {
  text-align: center;
}
.meritCenter .ach_grid .ach_item .info > p {
  font-family: "GmarketSans", sans-serif;
  font-size: min(2.4rem, 10vw);
  color: #5838E6;
  font-weight: 600;
  rotate: -0.04deg;
  word-break: keep-all;
  text-wrap: balance;
}
.meritCenter .ach_grid .ach_item .info span {
  font-size: min(2rem, 5vw);
  color: #777777;
  font-weight: 300;
}
.meritCenter .ach_grid .ach_item .info dl {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999999;
  font-weight: 300;
  margin-top: 1rem;
}
.meritCenter .ach_grid .ach_item .info dl dd {
  display: flex;
  align-items: center;
}
.meritCenter .ach_grid .ach_item .info dl dd::before {
  content: "";
  width: 1px;
  height: 10px;
  margin: 0 0.8rem;
  background: #dddddd;
}
.meritCenter .ach_list {
  display: grid;
  gap: min(1rem, 4vw);
  grid-template-columns: repeat(auto-fill, minmax(40rem, 1fr));
}
.meritCenter .ach_list .ach_item {
  width: 100%;
  border: 1px solid #eee;
  border-radius: 1rem;
  box-sizing: border-box;
  padding: min(3rem, 8vw);
  display: flex;
  gap: 3rem;
  align-items: center;
}
.meritCenter .ach_list .ach_item .thumb {
  padding: 1rem;
  border-radius: 100rem;
  border: 1px solid #dddddd;
  width: 10rem;
  height: 10rem;
  margin: 1rem 0 2rem;
  flex-shrink: 0;
  outline: 1px solid #eeeeee;
  outline-offset: -1rem;
  box-sizing: border-box;
  padding: min(2.4rem, 20vw);
}
.meritCenter .ach_list .ach_item .thumb img {
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}
.meritCenter .ach_list .ach_item .info > p {
  font-family: "GmarketSans", sans-serif;
  font-size: min(2.4rem, 10vw);
  color: #5838E6;
  font-weight: 600;
  rotate: -0.04deg;
  word-break: keep-all;
  text-wrap: balance;
}
.meritCenter .ach_list .ach_item .info span {
  font-size: min(2rem, 5vw);
  color: #777777;
  font-weight: 300;
  word-break: keep-all;
  text-wrap: balance;
}
.meritCenter .ach_list .ach_item .info dl {
  display: flex;
  align-items: center;
  color: #999999;
  font-weight: 300;
  margin-top: 1rem;
}
.meritCenter .ach_list .ach_item .info dl dd {
  display: flex;
  align-items: center;
}
.meritCenter .ach_list .ach_item .info dl dd::before {
  content: "";
  width: 1px;
  height: 10px;
  margin: 0 0.8rem;
  background: #dddddd;
}
.meritCenter .ach_list .ach_item .info .pg_rate {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.meritCenter .ach_list .ach_item .info .pg_rate > p {
  color: #333333;
  font-weight: 400;
  font-size: 1.6rem;
}
.meritCenter .ach_list .ach_item .info .pg_rate .progress_bar {
  width: 100%;
  height: 1.6rem;
  box-shadow: 0 0 0 0.1rem rgba(238, 238, 238, 0.9333333333);
  border-radius: 100px;
  padding: 4px;
  box-sizing: border-box;
}
.meritCenter .ach_list .ach_item .info .pg_rate .progress_bar span {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #832CBD 0%, #5838E6 100%);
  display: block;
  border-radius: 100px;
}

/* 박스 스타일 bd 1px */
.boxArea {
  box-shadow: 0 0 0 1px #eeeeee inset;
  padding: 4rem;
  font-size: 1.8rem;
  color: #777777;
  font-weight: 300;
  width: 100%;
  box-sizing: border-box;
  border-radius: 0.4rem;
  line-height: 1.4;
  transition: all 300ms ease-in;
}
.boxArea:has(dl) {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.boxArea dl {
  position: relative;
  padding-left: 4rem;
}
.boxArea dl::before {
  content: "";
  width: 3.1rem;
  height: 3.1rem;
  position: absolute;
  left: 0;
  top: 0rem;
  background: url("data:image/svg+xml,%3Csvg width='30' height='31' viewBox='0 0 30 31' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect y='0.5' width='30' height='30' rx='15' fill='%235838E6'/%3E%3Cpath d='M20.3337 11.5L13.0003 18.8333L9.66699 15.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat 0 0/contain;
}
.boxArea dl dt {
  font-size: 2rem;
  font-weight: 600;
  color: #333333;
}
.boxArea dl dd {
  margin-top: 0.6rem;
  font-size: 1.8rem;
  font-weight: 300;
  color: #777777;
  line-height: 1.4;
  text-wrap: balance;
  word-break: keep-all;
}

/* 디테일 스타일 */
.dtiArea {
  width: 100%;
  border-radius: 0.4rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.dtiArea details {
  border: 1px solid #dddddd;
  font-size: 2rem;
  letter-spacing: -0.04rem;
  transition: all 500ms ease-in;
}
.dtiArea details:hover summary {
  color: #222222;
  font-weight: 700;
}
.dtiArea details:open summary::before {
  transform: rotate(-90deg);
}
.dtiArea summary {
  padding: 2rem;
  padding-left: 10rem;
  font-weight: 600;
  color: #333333;
  background: #f8f8f8;
  list-style-type: none;
  position: relative;
}
.dtiArea summary::before {
  content: "";
  position: absolute;
  width: 1.5rem;
  height: 1.5rem;
  display: block;
  position: absolute;
  top: calc(50% - 0.8rem);
  left: 4rem;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='13' viewBox='0 0 8 13' fill='none'%3E%3Cpath d='M6.14453 0.292626C6.53503 -0.0977861 7.16809 -0.0977861 7.55859 0.292626C7.94909 0.683122 7.94903 1.31616 7.55859 1.70669L3.08008 6.1852L7.55859 10.6637C7.94912 11.0542 7.94912 11.6873 7.55859 12.0778C7.16807 12.4683 6.53506 12.4683 6.14453 12.0778L0.958984 6.89224L0.890625 6.81704C0.762153 6.65954 0.6889 6.47165 0.670898 6.27993C0.669412 6.26432 0.667747 6.24871 0.666992 6.23306V6.13735C0.668523 6.1057 0.671259 6.07404 0.675781 6.04263C0.700727 5.86775 0.772907 5.69868 0.890625 5.55434L0.958984 5.47817L6.14453 0.292626Z' fill='%23bbb'/%3E%3C/svg%3E") no-repeat center center/contain;
  transform: rotate(90deg);
  transform-origin: 50% 50%;
  border-radius: 100rem;
  transition: transform 500ms;
}
.dtiArea summary::-webkit-details-marker {
  display: none;
}
.dtiArea ul li {
  padding: 2rem;
  padding-left: 10rem;
  border-top: 1px solid #dddddd;
  color: #777777;
  font-weight: 300;
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.dtiArea ul li dl {
  position: relative;
  padding-left: 4rem;
}
.dtiArea ul li dl::before {
  content: "";
  width: 3.1rem;
  height: 3.1rem;
  position: absolute;
  left: 0;
  top: 0rem;
  background: url("data:image/svg+xml,%3Csvg width='30' height='31' viewBox='0 0 30 31' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect y='0.5' width='30' height='30' rx='15' fill='%235838E6'/%3E%3Cpath d='M20.3337 11.5L13.0003 18.8333L9.66699 15.5' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A") no-repeat 0 0/contain;
}
.dtiArea ul li dl dt {
  font-size: 2rem;
  font-weight: 600;
  color: #333333;
}
.dtiArea ul li dl dd {
  margin-top: 0.6rem;
  font-size: 1.8rem;
  font-weight: 300;
  color: #777777;
  line-height: 1.6;
  text-wrap: balance;
  word-break: keep-all;
}
.dtiArea ul li:hover {
  color: #333333;
  font-weight: 500;
}

/* 프로필 스타일 */
.profileArea {
  box-shadow: 0 0 0 1px #eeeeee inset;
  padding: 3rem 4rem;
  border-left: 1.3rem solid #5838E6;
  border-radius: 0.4rem 0 0 0.4rem;
}
.profileArea .pf_name {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #dddddd;
  padding-bottom: 2rem;
  margin-bottom: 3rem;
}
.profileArea .pf_name dt {
  display: flex;
  align-items: center;
  color: #333333;
  font-size: 1.8rem;
}
.profileArea .pf_name dt strong {
  font-size: 2.8rem;
  color: #5838E6;
  font-family: "WavvePADO", sans-serif;
  margin-right: 0.3rem;
}
.profileArea .pf_name dd {
  color: #999999;
  font-size: 1.6rem;
  font-weight: 300;
  display: flex;
  align-items: center;
}
.profileArea .pf_name dd::before {
  content: "";
  flex-shrink: 0;
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 1rem;
  background: #d9d9d9;
  display: block;
  margin: 0 0.7rem;
}
.profileArea .pf_info {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.profileArea .pf_info .if_item {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-bottom: 3rem;
  margin-top: 2rem;
}
.profileArea .pf_info .if_item:not(:last-child) {
  border-bottom: 1px solid #dddddd;
}
.profileArea .pf_info .if_item .thumb {
  max-width: 20rem;
  object-fit: cover;
  object-position: center;
  border-radius: 0.4rem;
  overflow: hidden;
}
.profileArea .pf_info .if_item p {
  font-size: 2rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.04rem;
  color: #333333;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.profileArea .pf_info .if_item p::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 10rem;
  background: #5838E6;
  display: block;
}
.profileArea .pf_info .if_item dl {
  font-size: 1.6rem;
}
.profileArea .pf_info .if_item dl dt {
  color: #333333;
  margin-bottom: 0.4rem;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.032rem;
}
.profileArea .pf_info .if_item dl dd {
  color: #777777;
  line-height: 1.7;
  font-weight: 300;
  letter-spacing: -0.032rem;
}

/* 서브페이지 */
.contents .lec_grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(29rem, 1fr));
  gap: clamp(2rem, 2vw, 4rem);
}
.contents .lec_grid .grid_item .lec_thumb {
  position: relative;
  border-radius: 0.3rem;
  flex-shrink: 0;
  width: 100%;
  aspect-ratio: 1.7777777778;
  overflow: hidden;
  box-shadow: 0 0 0 0.1rem #eeeeee inset;
}
.contents .lec_grid .grid_item .lec_thumb .lec_set {
  position: absolute;
  right: 1rem;
  top: 1rem;
  font-size: 1.4rem;
  font-weight: 400;
  width: 6rem;
  height: 6rem;
  border-radius: 6rem;
  letter-spacing: -0.04rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.contents .lec_grid .grid_item .lec_thumb .lec_set.on {
  background: #ff9526;
  color: #ffffff;
}
.contents .lec_grid .grid_item .lec_thumb .lec_set.off {
  background: #BDF03E;
  color: #333333;
}
.contents .lec_grid .grid_item .lec_thumb .lec_set.close {
  background: #333333;
  color: #ffffff;
}
.contents .lec_grid .grid_item .lec_thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: all 700ms cubic-bezier(0.39, 0.575, 0.565, 1);
}
.contents .lec_grid .grid_item .lec_thumb:hover .lec_util {
  opacity: 1;
  bottom: 0;
}
.contents .lec_grid .grid_item .lec_thumb .lec_util {
  position: absolute;
  bottom: -10%;
  width: 100%;
  opacity: 0;
  transition: all 200ms ease-in;
}
.contents .lec_grid .grid_item .lec_thumb .lec_util .timeline {
  display: block;
  padding: 0.2rem 1rem;
  background: rgba(0, 0, 0, 0.8);
  width: fit-content;
  border-radius: 100px;
  color: #ffffff;
  margin: 1rem;
  font-size: 1.2rem;
}
.contents .lec_grid .grid_item .lec_thumb .lec_util .sti {
  position: absolute;
  height: 3.5rem;
  width: 3.5rem;
  right: 1rem;
  bottom: 1rem;
  font-size: 2.9rem;
  font-weight: 100;
  color: #ffffff;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0.7);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 0.5rem;
  box-sizing: border-box;
}
.contents .lec_grid .grid_item .lec_info {
  margin-top: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  position: relative;
  min-height: 19rem;
}
.contents .lec_grid .grid_item .lec_info > a {
  font-size: 2rem;
  color: #333333;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  align-self: stretch;
  min-height: 5.2rem;
}
.contents .lec_grid .grid_item .lec_info .info_head {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid #eeeeee;
}
.contents .lec_grid .grid_item .lec_info .info_head em {
  padding: 0.3rem 1.2rem;
  display: block;
  background: #5838E6;
  border-radius: 0.4rem;
  color: #ffffff;
  font-size: 1.6rem;
  font-weight: 300;
}
.contents .lec_grid .grid_item .lec_info .info_head ul {
  display: flex;
  align-items: center;
}
.contents .lec_grid .grid_item .lec_info .info_head ul li {
  font-size: 1.6rem;
  color: #777777;
  font-weight: 300;
}
.contents .lec_grid .grid_item .lec_info .info_head ul li:not(:last-child)::after {
  content: "";
  width: 1px;
  height: 1.3rem;
  background: #eeeeee;
  display: inline-block;
  margin: 0 1rem;
}
.contents .lec_grid .grid_item .lec_info .lec_period {
  display: flex;
  align-items: center;
  gap: 0 1.4rem;
  font-size: 1.6rem;
  flex-wrap: wrap;
}
.contents .lec_grid .grid_item .lec_info .lec_period dt {
  color: #333333;
  font-weight: 600;
}
.contents .lec_grid .grid_item .lec_info .lec_period dd {
  color: #999999;
  font-weight: 300;
}
.contents .lec_grid .grid_item .lec_info .lec_data {
  display: flex;
  align-items: center;
  gap: 2rem;
  color: #999999;
  justify-content: space-between;
  font-weight: 300;
}
.contents .lec_grid .grid_item .lec_info .hashTag {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: auto;
}
.contents .lec_grid .grid_item .lec_info .hashTag span {
  font-size: 1.4rem;
  padding: 0.4rem 0.9rem 0.5rem;
  border-radius: 100px;
  border: 0.1rem solid #dddddd;
  color: #5838E6;
  display: block;
  width: fit-content;
  line-height: 1;
  background: #fff;
  font-weight: 400;
}
.contents .lec_grid .grid_item .lec_info:hover p {
  color: #5838E6;
}
.contents .lec_grid .grid_item .lec_info:has(button) {
  min-height: 21rem;
  justify-content: space-between;
}
.contents .lec_grid .grid_item .lec_info:has(button) button {
  margin-top: auto;
  position: relative;
  z-index: 1;
}
.contents .event_grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(39rem, 1fr));
  gap: clamp(2rem, 2vw, 4rem);
}
.contents .event_grid .grid_item .lec_thumb {
  position: relative;
  border-radius: 0.3rem;
  flex-shrink: 0;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  box-shadow: 0 0 0 0.1rem #eeeeee inset;
}
.contents .event_grid .grid_item .lec_thumb .lec_set {
  position: absolute;
  right: 1rem;
  top: 1rem;
  font-size: 1.4rem;
  font-weight: 400;
  width: 6rem;
  height: 6rem;
  border-radius: 6rem;
  letter-spacing: -0.04rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.contents .event_grid .grid_item .lec_thumb .lec_set.on {
  background: #ff9526;
  color: #ffffff;
}
.contents .event_grid .grid_item .lec_thumb .lec_set.off {
  background: #BDF03E;
  color: #333333;
}
.contents .event_grid .grid_item .lec_thumb .lec_set.close {
  background: #333333;
  color: #ffffff;
}
.contents .event_grid .grid_item .lec_thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: all 700ms cubic-bezier(0.39, 0.575, 0.565, 1);
}
.contents .event_grid .grid_item .lec_thumb:hover .lec_util {
  opacity: 1;
  bottom: 0;
}
.contents .event_grid .grid_item .lec_thumb .lec_util {
  position: absolute;
  bottom: -10%;
  width: 100%;
  opacity: 0;
  transition: all 200ms ease-in;
}
.contents .event_grid .grid_item .lec_thumb .lec_util .timeline {
  display: block;
  padding: 0.2rem 1rem;
  background: rgba(0, 0, 0, 0.8);
  width: fit-content;
  border-radius: 100px;
  color: #ffffff;
  margin: 1rem;
  font-size: 1.2rem;
}
.contents .event_grid .grid_item .lec_thumb .lec_util .sti {
  position: absolute;
  height: 3.5rem;
  width: 3.5rem;
  right: 1rem;
  bottom: 1rem;
  font-size: 2.9rem;
  font-weight: 100;
  color: #ffffff;
  border-radius: 100px;
  background: rgba(0, 0, 0, 0.7);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 0.5rem;
  box-sizing: border-box;
}
.contents .event_grid .grid_item .lec_info {
  margin-top: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  position: relative;
  min-height: 19rem;
}
.contents .event_grid .grid_item .lec_info > a {
  font-size: 2rem;
  color: #333333;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  align-self: stretch;
  min-height: 5.2rem;
}
.contents .event_grid .grid_item .lec_info .info_head {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid #eeeeee;
}
.contents .event_grid .grid_item .lec_info .info_head em {
  padding: 0.3rem 1.2rem;
  display: block;
  background: #5838E6;
  border-radius: 0.4rem;
  color: #ffffff;
  font-size: 1.6rem;
  font-weight: 300;
}
.contents .event_grid .grid_item .lec_info .info_head ul {
  display: flex;
  align-items: center;
}
.contents .event_grid .grid_item .lec_info .info_head ul li {
  font-size: 1.6rem;
  color: #777777;
  font-weight: 300;
}
.contents .event_grid .grid_item .lec_info .info_head ul li:not(:last-child)::after {
  content: "";
  width: 1px;
  height: 1.3rem;
  background: #eeeeee;
  display: inline-block;
  margin: 0 1rem;
}
.contents .event_grid .grid_item .lec_info .lec_period {
  display: flex;
  align-items: center;
  gap: 0 1.4rem;
  font-size: 1.6rem;
  flex-wrap: wrap;
}
.contents .event_grid .grid_item .lec_info .lec_period dt {
  color: #333333;
  font-weight: 600;
}
.contents .event_grid .grid_item .lec_info .lec_period dd {
  color: #999999;
  font-weight: 300;
}
.contents .event_grid .grid_item .lec_info .lec_data {
  display: flex;
  align-items: center;
  gap: 2rem;
  color: #999999;
  justify-content: space-between;
  font-weight: 300;
}
.contents .event_grid .grid_item .lec_info .hashTag {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: auto;
}
.contents .event_grid .grid_item .lec_info .hashTag span {
  font-size: 1.4rem;
  padding: 0.4rem 0.9rem 0.5rem;
  border-radius: 100px;
  border: 0.1rem solid #dddddd;
  color: #5838E6;
  display: block;
  width: fit-content;
  line-height: 1;
  background: #fff;
  font-weight: 400;
}
.contents .event_grid .grid_item .lec_info:hover p {
  color: #5838E6;
}

/* 서브페이지 - 원격지원 */
.subRemote i.ico-how {
  background: url("../img/sub/ico-how.svg") no-repeat center center/100%;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 8rem;
  height: 8rem;
  top: -4rem;
}
.subRemote i.ico-pro {
  background: url("../img/sub/ico-pro.svg") no-repeat center center/100%;
  display: block;
  margin: 0 auto 3.9rem;
  width: 8rem;
  height: 8rem;
}
.subRemote .obj-rmt01,
.subRemote .obj-rmt02 {
  position: absolute;
  bottom: -15rem;
  z-index: 1;
}
.subRemote .obj-rmt01 {
  left: 5%;
}
.subRemote .obj-rmt02 {
  right: 5%;
}
.subRemote .remote_tit {
  text-align: center;
}
.subRemote .remote_tit em, .subRemote .remote_tit h2 {
  font-family: "TTHakgyoansimTtwimteulR", sans-serif;
}
.subRemote .remote_tit em {
  font-size: 2.4rem;
  display: block;
  width: fit-content;
  position: relative;
  margin: 0 auto;
  min-height: 5rem;
  color: #333333;
  text-shadow: -3px -3px 0 #fff, 0 -3px 0 #fff, 3px -3px 0 #fff, 3px 0 0 #fff, 3px 3px 0 #fff, 0 3px 0 #fff, -3px 3px 0 #fff, -3px 0 0 #fff;
  margin-bottom: 2rem;
}
.subRemote .remote_tit em span {
  color: #5838E6;
}
.subRemote .remote_tit em::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  top: -0.3rem;
  background: url("../img/sub/remote_bubble.svg") no-repeat center/contain;
}
.subRemote .remote_tit h2 {
  font-size: min(11vw, 6rem);
  line-height: 1.1;
}
.subRemote .remote_tit h2 strong {
  font-size: min(12vw, 7rem);
  display: block;
  color: #5838E6;
  line-height: 1.2;
}
.subRemote .remote_tit p {
  font-size: min(3vw, 2.2rem);
  line-height: 1.63;
  color: #777777;
  font-weight: 400;
  letter-spacing: -0.088rem;
  margin-top: 2.9rem;
}
.subRemote .remote_how {
  background: rgb(247.69375, 246.29375, 253.90625);
  margin-top: 10rem;
}
.subRemote .remote_how .ar_checkList {
  width: 100%;
  max-width: 100rem;
  margin: 0 auto;
  padding: 5.4rem;
  border-radius: 2rem;
  border: 0.5rem solid #F4DD5A;
  background: #ffffff;
}
.subRemote .remote_how .ar_checkList ul {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  width: fit-content;
  margin: 0 auto;
}
.subRemote .remote_how .ar_checkList li {
  color: #333333;
  font-size: min(2.8rem, 5.4vw);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.112rem;
  padding-left: 7rem;
  position: relative;
  word-break: keep-all;
  text-wrap: pretty;
}
.subRemote .remote_how .ar_checkList li::before {
  content: "";
  width: 6rem;
  height: 6rem;
  left: 0;
  border-radius: 100rem;
  flex-shrink: 0;
  background: #f8f8f8 url("../img/sub/ico-check.svg") no-repeat calc(50% + 0.2rem) 50%/50%;
  position: absolute;
  top: -1rem;
}
.subRemote .remote_pro {
  background: #f8f8f8;
}
.subRemote .remote_pro .remote_step {
  counter-reset: remoteStep 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 6rem 2rem;
  background: #ffffff;
  border-radius: 1rem;
  box-shadow: 0 0 23px -13px rgba(0, 0, 0, 0.1490196078);
}
.subRemote .remote_pro .remote_step dl {
  counter-increment: remoteStep;
  position: relative;
  text-align: center;
  width: 100%;
}
.subRemote .remote_pro .remote_step dl:not(:last-child) {
  border-right: 1px solid #eeeeee;
}
.subRemote .remote_pro .remote_step dl dt {
  font-size: 2.2rem;
  font-weight: 600;
  color: #333333;
  letter-spacing: -0.104rem;
  line-height: 1.4;
  margin-bottom: 0.6rem;
}
.subRemote .remote_pro .remote_step dl dt::before {
  content: "STEP" " " "0" counter(remoteStep);
  display: block;
  font-weight: 600;
  color: #5838E6;
  font-size: 1.6rem;
  letter-spacing: -0.05rem;
  margin-bottom: 0.4rem;
}
.subRemote .remote_pro .remote_step dl dd {
  font-size: 1.8rem;
  line-height: 1.18;
  letter-spacing: -0.088rem;
  color: #777777;
}
.subRemote .remote_pro .remote_step dl:nth-of-type(1)::before {
  content: "";
  display: block;
  width: 15rem;
  height: min(15vw, 11rem);
  margin: 0 auto 2rem;
  background: url("../img/sub/remote_step01.svg") no-repeat center/contain;
}
.subRemote .remote_pro .remote_step dl:nth-of-type(2)::before {
  content: "";
  display: block;
  width: 15rem;
  height: min(15vw, 11rem);
  margin: 0 auto 2rem;
  background: url("../img/sub/remote_step02.svg") no-repeat center/contain;
}
.subRemote .remote_pro .remote_step dl:nth-of-type(3)::before {
  content: "";
  display: block;
  width: 15rem;
  height: min(15vw, 11rem);
  margin: 0 auto 2rem;
  background: url("../img/sub/remote_step03.svg") no-repeat center/contain;
}
.subRemote .remote_pro .remote_step dl:nth-of-type(4)::before {
  content: "";
  display: block;
  width: 15rem;
  height: min(15vw, 11rem);
  margin: 0 auto 2rem;
  background: url("../img/sub/remote_step04.svg") no-repeat center/contain;
}
.subRemote .remote_pro .remote_step dl:nth-of-type(5)::before {
  content: "";
  display: block;
  width: 15rem;
  height: min(15vw, 11rem);
  margin: 0 auto 2rem;
  background: url("../img/sub/remote_step05.svg") no-repeat center/contain;
}

/* 서브페이지 - 교육원소개 */
.sub_intro::before {
  content: "";
  width: 100%;
  height: min(26rem, 10vw);
  background: rgb(247.69375, 246.29375, 253.90625);
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
}

.sec_appeal {
  background: rgb(247.69375, 246.29375, 253.90625);
}

.ap_el {
  display: flex;
  text-align: center;
  background: #ffffff;
  padding: min(6rem, 5vw);
}
.ap_el .ap_item {
  width: 100%;
  line-height: 1.4;
}
.ap_el .ap_item:not(:last-child) {
  border-right: 1px solid #eeeeee;
}
.ap_el .ap_item em {
  color: #5838E6;
  font-size: min(5vw, 1.8rem);
  font-weight: 700;
  display: block;
  margin-bottom: 0.6rem;
}
.ap_el .ap_item p {
  color: #333333;
  font-size: min(5.4vw, 2.2rem);
  font-weight: 600;
}
.ap_el .ap_item span {
  color: #777777;
  font-size: min(4.5vw, 2rem);
  font-weight: 300;
  rotate: -0.04deg;
}

.ap_grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40rem, 1fr));
  gap: min(4rem, 4vw);
  counter-reset: gridNum 0;
}
.ap_grid:has(.card_item) {
  grid-template-columns: repeat(3, 1fr);
}
.ap_grid .ap_item {
  text-align: center;
  padding: min(5rem, 5vw);
  box-shadow: 0 0 0 1px #eeeeee inset;
  border-radius: 1rem;
  opacity: 0;
}
.ap_grid .ap_item i {
  width: min(16rem, 25vw);
  height: min(16rem, 25vw);
  border-radius: 100rem;
  display: block;
  margin: 0 auto 2rem;
}
.ap_grid .ap_item p {
  font-size: 2.2rem;
  color: #777777;
  font-weight: 300;
  line-height: 1.4;
  margin-bottom: 0.6rem;
}
.ap_grid .ap_item p strong {
  font-size: min(7vw, 3.2rem);
  font-weight: 700;
  display: block;
}
.ap_grid .ap_item span {
  color: 2rem;
  color: #999999;
  line-height: 1.3;
  text-wrap: pretty;
  word-break: keep-all;
}
.ap_grid .ap_item:nth-child(1) {
  transition-delay: 100ms;
}
.ap_grid .ap_item:nth-child(1) i {
  background: rgba(28, 119, 195, 0.15) url("../img/sub/ap_icon01.svg") no-repeat 50% 50%/60%;
}
.ap_grid .ap_item:nth-child(1) p strong {
  color: #1C77C3;
}
.ap_grid .ap_item:nth-child(2) {
  transition-delay: 200ms;
}
.ap_grid .ap_item:nth-child(2) i {
  background: rgba(122, 92, 162, 0.15) url("../img/sub/ap_icon02.svg") no-repeat 50% 50%/60%;
}
.ap_grid .ap_item:nth-child(2) p strong {
  color: #7A5CA2;
}
.ap_grid .ap_item:nth-child(3) {
  transition-delay: 300ms;
}
.ap_grid .ap_item:nth-child(3) i {
  background: rgba(226, 178, 75, 0.15) url("../img/sub/ap_icon03.svg") no-repeat 50% 50%/60%;
}
.ap_grid .ap_item:nth-child(3) p strong {
  color: #E2B24B;
}
.ap_grid .ap_item:nth-child(4) {
  transition-delay: 400ms;
}
.ap_grid .ap_item:nth-child(4) i {
  background: rgba(217, 72, 72, 0.15) url("../img/sub/ap_icon04.svg") no-repeat 50% 50%/60%;
}
.ap_grid .ap_item:nth-child(4) p strong {
  color: #D94848;
}
.ap_grid .ap_item:nth-child(5) {
  transition-delay: 500ms;
}
.ap_grid .ap_item:nth-child(5) i {
  background: rgba(37, 142, 120, 0.15) url("../img/sub/ap_icon05.svg") no-repeat 50% 50%/60%;
}
.ap_grid .ap_item:nth-child(5) p strong {
  color: #258E78;
}
.ap_grid .ap_item:nth-child(6) {
  transition-delay: 600ms;
}
.ap_grid .ap_item:nth-child(6) i {
  background: rgba(226, 123, 39, 0.15) url("../img/sub/ap_icon06.svg") no-repeat 50% 50%/60%;
}
.ap_grid .ap_item:nth-child(6) p strong {
  color: #E27B27;
}
.ap_grid .card_item {
  opacity: 0;
  position: relative;
  perspective-origin: center;
  height: 46rem;
  counter-increment: gridNum;
}
.ap_grid .card_item:hover .front {
  transform: rotateY(180deg);
}
.ap_grid .card_item:hover .back {
  transform: rotateY(0deg);
}
.ap_grid .card_item .flip {
  width: 100%;
  height: 100%;
  perspective: 140rem;
}
.ap_grid .card_item .front, .ap_grid .card_item .back {
  padding: min(5rem, 5vw);
  text-align: center;
  box-shadow: 0 0 0 1px #eeeeee inset;
  border-radius: 1rem;
  position: absolute;
  backface-visibility: hidden;
  transition: all 800ms;
  transform-style: preserve-3d;
}
.ap_grid .card_item .front {
  width: 100%;
  height: 100%;
  z-index: 2;
  background: #fff;
}
.ap_grid .card_item .front span {
  color: #999999;
}
.ap_grid .card_item .back {
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
  transform: rotateY(-180deg);
  color: #ffffff;
  background-image: url("../img/sub/ap_card_bg.png");
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.ap_grid .card_item .back::before {
  content: "0" counter(gridNum);
  font-size: min(6rem, 30vw);
  font-family: "GmarketSans", sans-serif;
  font-weight: 600;
}
.ap_grid .card_item .back p::after {
  content: "";
  display: block;
  width: 100%;
  height: 0.3rem;
  margin: 2rem 0 3rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='108' height='3' viewBox='0 0 108 3' fill='none'%3E%3Cpath d='M1.28571 2.59155C1.99579 2.59155 2.57143 2.01141 2.57143 1.29577C2.57143 0.580138 1.99579 0 1.28571 0C0.575634 0 0 0.580138 0 1.29577C0 2.01141 0.575634 2.59155 1.28571 2.59155Z' fill='white'/%3E%3Cpath d='M7.07171 0H5.14314C4.4331 0 3.85742 0.580183 3.85742 1.29577C3.85742 2.01137 4.4331 2.59155 5.14314 2.59155H7.07171C7.78174 2.59155 8.35742 2.01137 8.35742 1.29577C8.35742 0.580183 7.78174 0 7.07171 0Z' fill='white'/%3E%3Cpath d='M102.857 0H100.928C100.218 0 99.6426 0.580183 99.6426 1.29577C99.6426 2.01137 100.218 2.59155 100.928 2.59155H102.857C103.567 2.59155 104.143 2.01137 104.143 1.29577C104.143 0.580183 103.567 0 102.857 0Z' fill='white'/%3E%3Cpath d='M106.713 2.59155C107.424 2.59155 107.999 2.01141 107.999 1.29577C107.999 0.580138 107.424 0 106.713 0C106.003 0 105.428 0.580138 105.428 1.29577C105.428 2.01141 106.003 2.59155 106.713 2.59155Z' fill='white'/%3E%3Cpath d='M96.8921 0H11.1073C10.2983 0 9.64258 0.580183 9.64258 1.29577C9.64258 2.01137 10.2986 2.59155 11.1073 2.59155H96.8918C97.7008 2.59155 98.3565 2.01137 98.3565 1.29577C98.3565 0.580183 97.7005 0 96.8918 0H96.8921Z' fill='white'/%3E%3C/svg%3E") no-repeat center/contain;
}
.ap_grid .card_item .back span {
  line-height: 1.4;
  font-size: 2.2rem;
  word-break: keep-all;
  text-wrap: pretty;
}
.ap_grid .card_item i {
  width: min(16rem, 25vw);
  height: min(16rem, 25vw);
  border-radius: 100rem;
  display: block;
  margin: 0 auto 2rem;
}
.ap_grid .card_item p {
  font-size: min(7vw, 3.2rem);
  font-weight: 700;
  display: block;
}
.ap_grid .card_item span {
  line-height: 1.3;
  text-wrap: pretty;
  word-break: keep-all;
  font-size: 2rem;
}
.ap_grid .card_item:nth-child(1) {
  transition-delay: 100ms;
}
.ap_grid .card_item:nth-child(1) .front p {
  color: #1C77C3;
}
.ap_grid .card_item:nth-child(1) .back {
  background-color: #1c77c3;
}
.ap_grid .card_item:nth-child(1) i {
  background: rgba(28, 119, 195, 0.15) url("../img/sub/card_icon01.svg") no-repeat 50% 50%/60%;
}
.ap_grid .card_item:nth-child(2) {
  transition-delay: 200ms;
}
.ap_grid .card_item:nth-child(2) .front p {
  color: #28A991;
}
.ap_grid .card_item:nth-child(2) .back {
  background-color: #28a991;
}
.ap_grid .card_item:nth-child(2) i {
  background: rgba(40, 169, 145, 0.15) url("../img/sub/card_icon02.svg") no-repeat 50% 50%/60%;
}
.ap_grid .card_item:nth-child(3) {
  transition-delay: 300ms;
}
.ap_grid .card_item:nth-child(3) .front p {
  color: #8762D7;
}
.ap_grid .card_item:nth-child(3) .back {
  background-color: #8762d7;
}
.ap_grid .card_item:nth-child(3) i {
  background: rgba(135, 98, 215, 0.15) url("../img/sub/card_icon03.svg") no-repeat 50% 50%/60%;
}

.sec_banner {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* 웨이브 배너 */
.wave_banner .swiper-wrapper {
  transition-timing-function: linear !important;
}

/* 에스넷 아카이브란? */
.hrd_qus_wrap {
  width: 100%;
  background: #f8f8f8;
  padding: 5rem;
  border-radius: 7rem;
}

.hrd_qus {
  margin: 0 auto;
  width: fit-content;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
}
.hrd_qus .qus_item {
  display: flex;
  align-items: center;
}
.hrd_qus .qus_item p {
  font-size: 2rem;
  font-family: "GmarketSans", sans-serif;
  font-weight: 400;
  padding: 2rem 4rem;
  background: #ffffff;
  color: #333333;
  border-radius: 100rem;
  border-width: 0.4rem;
  border-style: solid;
  border-color: #333333;
  position: relative;
  rotate: -0.04deg;
  margin-left: 3rem;
}
.hrd_qus .qus_item p::before, .hrd_qus .qus_item p::after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  border-style: solid;
  border-width: 1rem 1.4rem 1rem 0;
  margin-left: -1.6rem;
}
.hrd_qus .qus_item p::before {
  border-color: transparent #333333 transparent transparent;
}
.hrd_qus .qus_item p::after {
  left: 0.6rem;
  border-color: transparent #fff transparent transparent;
}
.hrd_qus .qus_item:nth-of-type(1) i::before {
  content: "";
  display: block;
  width: 12.8rem;
  height: 12.8rem;
  border-radius: 100rem;
  background: rgba(255, 255, 255, 0.7) url("../img/sub/hrd_face01.svg") no-repeat 50% 50%/65%;
}
.hrd_qus .qus_item:nth-of-type(2) i::before {
  content: "";
  display: block;
  width: 12.8rem;
  height: 12.8rem;
  border-radius: 100rem;
  background: rgba(255, 255, 255, 0.7) url("../img/sub/hrd_face02.svg") no-repeat 50% 50%/65%;
}
.hrd_qus .qus_item:nth-of-type(3) i::before {
  content: "";
  display: block;
  width: 12.8rem;
  height: 12.8rem;
  border-radius: 100rem;
  background: rgba(255, 255, 255, 0.7) url("../img/sub/hrd_face03.svg") no-repeat 50% 50%/65%;
}
.hrd_qus .qus_item:nth-of-type(4) i::before {
  content: "";
  display: block;
  width: 12.8rem;
  height: 12.8rem;
  border-radius: 100rem;
  background: rgba(255, 255, 255, 0.7) url("../img/sub/hrd_face04.svg") no-repeat 50% 50%/65%;
}
.hrd_qus .qus_item:nth-child(odd) p {
  color: #5838E6;
  border-color: #5838E6;
}
.hrd_qus .qus_item:nth-child(odd) p::before {
  border-color: transparent #5838E6 transparent transparent;
}
.hrd_qus .qus_item i {
  flex-shrink: 0;
}

.hrd_pro {
  border-top: 1px solid #eeeeee;
}
.hrd_pro .sec_body {
  position: relative;
}
.hrd_pro .hrd_pro_slide {
  overflow: hidden;
  text-align: center;
  position: relative;
}
.hrd_pro .hrd_pro_slide::before {
  content: "";
  width: 100%;
  height: 1px;
  background: #eee;
  position: absolute;
  left: 0;
  top: 50%;
}
.hrd_pro .hrd_pro_slide .swiper-slide dl {
  position: relative;
  margin-top: 4rem;
}
.hrd_pro .hrd_pro_slide .swiper-slide dl dt {
  font-size: 2.8rem;
  font-weight: 600;
  color: #333333;
}
.hrd_pro .hrd_pro_slide .swiper-slide dl dd {
  font-size: 2rem;
  font-weight: 400;
  color: #777777;
  line-height: 1.3;
}
.hrd_pro .hrd_pro_slide .swiper-slide dl dd {
  word-break: keep-all;
  text-wrap: balance;
}
.hrd_pro .hrd_pro_slide .swiper-slide dl dd li {
  position: relative;
}
.hrd_pro .hrd_pro_slide .swiper-slide dl dd li::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  background: #777777;
  border-radius: 5rem;
  position: absolute;
  top: 1.1rem;
  left: auto;
  margin-left: -0.8rem;
  word-break: keep-all;
  text-wrap: balance;
}
.hrd_pro .hrd_pro_slide .swiper-slide:nth-of-type(1) dl::after {
  content: "";
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 10rem;
  position: absolute;
  top: 0;
  background: #F5A221;
  left: 50%;
  transform: translateX(-50%);
  top: -2.2rem;
}
.hrd_pro .hrd_pro_slide .swiper-slide:nth-of-type(1) i::before {
  content: "";
  display: block;
  width: 12.8rem;
  height: 12.8rem;
  border-radius: 100rem;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.7) url("../img/sub/pro_icon01.svg") no-repeat 50% 50%/44%;
  border: 0.6rem solid #F5A221;
}
.hrd_pro .hrd_pro_slide .swiper-slide:nth-of-type(2) dl::after {
  content: "";
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 10rem;
  position: absolute;
  top: 0;
  background: #F05786;
  left: 50%;
  transform: translateX(-50%);
  top: -2.2rem;
}
.hrd_pro .hrd_pro_slide .swiper-slide:nth-of-type(2) i::before {
  content: "";
  display: block;
  width: 12.8rem;
  height: 12.8rem;
  border-radius: 100rem;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.7) url("../img/sub/pro_icon02.svg") no-repeat 50% 50%/44%;
  border: 0.6rem solid #F05786;
}
.hrd_pro .hrd_pro_slide .swiper-slide:nth-of-type(3) dl::after {
  content: "";
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 10rem;
  position: absolute;
  top: 0;
  background: #27A687;
  left: 50%;
  transform: translateX(-50%);
  top: -2.2rem;
}
.hrd_pro .hrd_pro_slide .swiper-slide:nth-of-type(3) i::before {
  content: "";
  display: block;
  width: 12.8rem;
  height: 12.8rem;
  border-radius: 100rem;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.7) url("../img/sub/pro_icon03.svg") no-repeat 50% 50%/44%;
  border: 0.6rem solid #27A687;
}
.hrd_pro .hrd_pro_slide .swiper-slide:nth-of-type(4) dl::after {
  content: "";
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 10rem;
  position: absolute;
  top: 0;
  background: #46B4BE;
  left: 50%;
  transform: translateX(-50%);
  top: -2.2rem;
}
.hrd_pro .hrd_pro_slide .swiper-slide:nth-of-type(4) i::before {
  content: "";
  display: block;
  width: 12.8rem;
  height: 12.8rem;
  border-radius: 100rem;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.7) url("../img/sub/pro_icon04.svg") no-repeat 50% 50%/44%;
  border: 0.6rem solid #46B4BE;
}
.hrd_pro .hrd_pro_slide .swiper-slide:nth-of-type(5) dl::after {
  content: "";
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 10rem;
  position: absolute;
  top: 0;
  background: #2A74BB;
  left: 50%;
  transform: translateX(-50%);
  top: -2.2rem;
}
.hrd_pro .hrd_pro_slide .swiper-slide:nth-of-type(5) i::before {
  content: "";
  display: block;
  width: 12.8rem;
  height: 12.8rem;
  border-radius: 100rem;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.7) url("../img/sub/pro_icon05.svg") no-repeat 50% 50%/44%;
  border: 0.6rem solid #2A74BB;
}
.hrd_pro .hrd_pro_slide .swiper-slide:nth-of-type(6) dl::after {
  content: "";
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 10rem;
  position: absolute;
  top: 0;
  background: #865BA6;
  left: 50%;
  transform: translateX(-50%);
  top: -2.2rem;
}
.hrd_pro .hrd_pro_slide .swiper-slide:nth-of-type(6) i::before {
  content: "";
  display: block;
  width: 12.8rem;
  height: 12.8rem;
  border-radius: 100rem;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.7) url("../img/sub/pro_icon06.svg") no-repeat 50% 50%/44%;
  border: 0.6rem solid #865BA6;
}
.hrd_pro .hrd_pro_arrow {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.hrd_pro .hrd_pro_arrow .swiper-button-next, .hrd_pro .hrd_pro_arrow .swiper-button-prev {
  position: absolute;
  top: 62.5%;
}
.hrd_pro .hrd_pro_arrow .swiper-button-next::after, .hrd_pro .hrd_pro_arrow .swiper-button-prev::after {
  content: none;
}
.hrd_pro .hrd_pro_arrow .swiper-button-prev {
  transition: all 200ms;
  width: 4rem;
  height: 4rem;
  background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='13' viewBox='0 0 8 13' fill='none'%3E%3Cpath d='M6.14453 0.292626C6.53503 -0.0977861 7.16809 -0.0977861 7.55859 0.292626C7.94909 0.683122 7.94903 1.31616 7.55859 1.70669L3.08008 6.1852L7.55859 10.6637C7.94912 11.0542 7.94912 11.6873 7.55859 12.0778C7.16807 12.4683 6.53506 12.4683 6.14453 12.0778L0.958984 6.89224L0.890625 6.81704C0.762153 6.65954 0.6889 6.47165 0.670898 6.27993C0.669412 6.26432 0.667747 6.24871 0.666992 6.23306V6.13735C0.668523 6.1057 0.671259 6.07404 0.675781 6.04263C0.700727 5.86775 0.772907 5.69868 0.890625 5.55434L0.958984 5.47817L6.14453 0.292626Z' fill='%23555'/%3E%3C/svg%3E") no-repeat 50% 50%;
  border-radius: 100px;
  border: 1px solid #eee;
  left: 0;
}
.hrd_pro .hrd_pro_arrow .swiper-button-prev:hover {
  background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='13' viewBox='0 0 8 13' fill='none'%3E%3Cpath d='M6.14453 0.292626C6.53503 -0.0977861 7.16809 -0.0977861 7.55859 0.292626C7.94909 0.683122 7.94903 1.31616 7.55859 1.70669L3.08008 6.1852L7.55859 10.6637C7.94912 11.0542 7.94912 11.6873 7.55859 12.0778C7.16807 12.4683 6.53506 12.4683 6.14453 12.0778L0.958984 6.89224L0.890625 6.81704C0.762153 6.65954 0.6889 6.47165 0.670898 6.27993C0.669412 6.26432 0.667747 6.24871 0.666992 6.23306V6.13735C0.668523 6.1057 0.671259 6.07404 0.675781 6.04263C0.700727 5.86775 0.772907 5.69868 0.890625 5.55434L0.958984 5.47817L6.14453 0.292626Z' fill='%235838e6'/%3E%3C/svg%3E") no-repeat 50% 50%;
  border-color: #5838E6;
}
.hrd_pro .hrd_pro_arrow .swiper-button-next {
  transition: all 200ms;
  width: 4rem;
  height: 4rem;
  background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='13' viewBox='0 0 8 13' fill='none'%3E%3Cpath d='M1.85547 0.293076C1.46494 -0.097448 0.831931 -0.097448 0.441406 0.293076C0.0509195 0.683604 0.0508947 1.31663 0.441406 1.70714L4.91992 6.18565L0.441406 10.6642C0.0509195 11.0547 0.0508947 11.6877 0.441406 12.0782C0.831921 12.4687 1.46495 12.4687 1.85547 12.0782L7.04102 6.89269L7.10938 6.81749C7.22953 6.67019 7.30168 6.49619 7.3252 6.31749L7.33301 6.23351V6.1378C7.33148 6.10615 7.32874 6.07449 7.32422 6.04308C7.2993 5.86809 7.22717 5.69823 7.10938 5.55382L7.04102 5.47862L1.85547 0.293076Z' fill='%23555'/%3E%3C/svg%3E") no-repeat 55% 50%;
  border-radius: 100px;
  border: 1px solid #eee;
  right: 0;
}
.hrd_pro .hrd_pro_arrow .swiper-button-next:hover {
  background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='13' viewBox='0 0 8 13' fill='none'%3E%3Cpath d='M1.85547 0.293076C1.46494 -0.097448 0.831931 -0.097448 0.441406 0.293076C0.0509195 0.683604 0.0508947 1.31663 0.441406 1.70714L4.91992 6.18565L0.441406 10.6642C0.0509195 11.0547 0.0508947 11.6877 0.441406 12.0782C0.831921 12.4687 1.46495 12.4687 1.85547 12.0782L7.04102 6.89269L7.10938 6.81749C7.22953 6.67019 7.30168 6.49619 7.3252 6.31749L7.33301 6.23351V6.1378C7.33148 6.10615 7.32874 6.07449 7.32422 6.04308C7.2993 5.86809 7.22717 5.69823 7.10938 5.55382L7.04102 5.47862L1.85547 0.293076Z' fill='%235838e6'/%3E%3C/svg%3E") no-repeat 55% 50%;
  border-color: #5838E6;
}

.hrd_policy {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(50rem, 1fr));
  gap: 4rem;
}
.hrd_policy .policy_item {
  padding: min(6rem, 5vw);
  border-radius: 0.4rem;
}
.hrd_policy .policy_item dl dt {
  font-size: min(3rem, 6vw);
  font-weight: 700;
  color: #333333;
  line-height: 1.2;
}
.hrd_policy .policy_item dl dd {
  font-size: min(1.8rem, 3vw);
  font-weight: 300;
  color: #777777;
  margin-top: min(1.2rem, 2vw);
}
.hrd_policy .policy_item dl dd b {
  color: #333333;
  font-weight: 600;
}
.hrd_policy .policy_item:nth-of-type(1) {
  background: #ffffff url("../img/sub/plc_icon01.png") no-repeat right 5% center/24%;
}
.hrd_policy .policy_item:nth-of-type(2) {
  background: #ffffff url("../img/sub/plc_icon02.png") no-repeat right 5% center/24%;
}
.hrd_policy .policy_item:nth-of-type(3) {
  background: #ffffff url("../img/sub/plc_icon03.png") no-repeat right 5% center/24%;
}
.hrd_policy .policy_item:nth-of-type(4) {
  background: #ffffff url("../img/sub/plc_icon04.png") no-repeat right 5% center/24%;
}

.hrd_caution {
  font-size: 2rem;
  color: #999999;
  padding-top: 2rem;
}
.hrd_caution b {
  color: #333333;
  font-weight: 600;
}

/* 개인정보처리방침 */
.subPolicy .useBtn {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(38rem, 1fr));
  gap: 1rem;
}
.subPolicy .useBtn a, .subPolicy .useBtn button {
  width: 100%;
}
.subPolicy .policyArea {
  display: flex;
  flex-direction: column;
  gap: 6.5rem;
  margin-top: min(6rem, 6vw);
}
.subPolicy .policy-define {
  display: flex;
  flex-direction: column;
  gap: 3rem;
}
.subPolicy .policy-define dl {
  font-size: 1.8rem;
  line-height: 1.3;
}
.subPolicy .policy-define dl dt {
  color: #333333;
  font-weight: 700;
}
.subPolicy .policy-define dl dd {
  color: #777777;
  font-weight: 400;
}
.subPolicy .policy-define ol {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  line-height: 1.4;
  margin-top: 0.6rem;
  font-weight: 300;
}
.subPolicy .policy-define ol li {
  position: relative;
  margin-left: 1rem;
}
.subPolicy .policy-define ol li::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  display: inline-block;
  border-radius: 10rem;
  background: #777777;
  position: absolute;
  top: 0.9rem;
  left: -1rem;
}
.subPolicy .policy-define ul {
  counter-set: policy-num 0;
  counter-reset: policy-num 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.6rem;
  line-height: 1.4;
  font-weight: 300;
}
.subPolicy .policy-define ul li {
  counter-increment: policy-num;
  margin-left: 2.2rem;
}
.subPolicy .policy-define ul li::before {
  content: counter(policy-num);
  font-size: 1.2rem;
  font-weight: 700;
  border: 2px solid #999999;
  color: #999999;
  line-height: 0.5;
  height: 1.6rem;
  width: 1.6rem;
  border-radius: 10rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  top: -0.2rem;
  margin-right: 0.5rem;
  margin-left: -2.2rem;
}
.subPolicy .policy-define ul .caution {
  display: block;
  font-size: 1.6rem;
  line-height: 1.4;
  color: #999999;
}
.subPolicy .policy-define ul .caution::before {
  content: "※";
  font-family: "Inter", sans-serif;
  display: inline-block;
  margin-right: 0.2rem;
}
.subPolicy .policySec > p {
  font-size: 2.4rem;
  color: #333333;
  font-weight: 700;
  margin-bottom: 1rem;
}
.subPolicy .policySec .tableArea {
  padding: min(5rem, 6vw);
  border-radius: 0.4rem;
  border: 1px solid #dddddd;
}
.subPolicy .policySec .tableArea table tbody tr td::before {
  display: block;
}

/* 찾아오시는길 */
.mapArea {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4rem;
}
.mapArea .company {
  padding: min(3rem, 6vw);
  box-sizing: border-box;
  box-shadow: 0 0 0 1px #dddddd inset;
  border-radius: 1rem;
}
.mapArea .company .cp-map {
  border-radius: 0.4rem;
  overflow: hidden;
  border: 1px solid #eeeeee;
}
.mapArea .company .cp-tit {
  font-size: max(1.25vw, 2.4rem);
  font-weight: 600;
  rotate: -0.04deg;
  color: #333333;
  margin-bottom: min(1.4rem, 3vw);
}
.mapArea .company .cp-info {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin: 3rem 0 4rem;
}
.mapArea .company .cp-info dl {
  padding-left: 6.4rem;
  position: relative;
}
.mapArea .company .cp-info dl::before {
  content: "";
  width: 5rem;
  height: 5rem;
  background: url() no-repeat 0 0/100%;
  position: absolute;
  left: 0;
  top: -0.4rem;
}
.mapArea .company .cp-info dl.if-add::before {
  background-image: url("../img/sub/if-add.svg");
}
.mapArea .company .cp-info dl.if-tel::before {
  background-image: url("../img/sub/if-tel.svg");
}
.mapArea .company .cp-info dl.if-fax::before {
  background-image: url("../img/sub/if-fax.svg");
}
.mapArea .company .cp-info dl dt {
  color: #333333;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.1;
  margin-bottom: 0.4rem;
}
.mapArea .company .cp-info dl dd {
  color: #777777;
  font-size: 16px;
  font-weight: 300;
  line-height: 1.25;
  rotate: 0.04deg;
  word-break: keep-all;
  text-wrap: pretty;
}
.mapArea .company .cp-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.mapArea .company .cp-btn a {
  display: block;
  border-radius: 0.4rem;
  display: flex;
  align-items: center;
  height: 5rem;
  padding: 0 3rem;
  justify-content: center;
  text-align: center;
  width: 100%;
  font-size: 16px;
  font-weight: 500;
}
.mapArea .company .cp-btn a i {
  display: block;
  width: 2rem;
  height: 2rem;
  margin-right: 0.6rem;
  background: url() no-repeat center;
}
.mapArea .company .cp-btn a.bt-kakao {
  background: #FAE100;
  color: #333333;
}
.mapArea .company .cp-btn a.bt-kakao i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='16' viewBox='0 0 17 16' fill='none'%3E%3Cpath d='M13.8608 3.05318L11.4098 4.27934L11.4091 4.27999C11.1302 4.41933 10.8226 4.49198 10.5108 4.49198C10.199 4.49198 9.89136 4.41933 9.61244 4.27999L6.79045 2.86867C6.72079 2.83387 6.6456 2.8116 6.56865 2.80259L6.49078 2.79801C6.38687 2.79801 6.28408 2.82159 6.19111 2.86802L6.19177 2.86867L3.14079 4.39384L3.14079 12.9468L5.59244 11.7206L5.69843 11.6716C5.94843 11.5643 6.21794 11.5086 6.49078 11.5086C6.80262 11.5086 7.11017 11.5813 7.38912 11.7206L10.2111 13.132L10.2824 13.1621C10.3555 13.1885 10.4327 13.2027 10.5108 13.2027C10.6146 13.2027 10.7169 13.1783 10.8098 13.132L13.8608 11.6061L13.8608 3.05318ZM15.2008 11.6068C15.2006 11.8555 15.1314 12.0993 15.0006 12.3108C14.8697 12.5224 14.682 12.6929 14.4595 12.8042L14.4601 12.8048L11.4091 14.33C11.1302 14.4694 10.8226 14.5427 10.5108 14.5427C10.199 14.5426 9.89136 14.47 9.61244 14.3306L6.79045 12.9193C6.69745 12.8728 6.59474 12.8486 6.49078 12.8486C6.38687 12.8486 6.28408 12.8722 6.19111 12.9187L6.19177 12.9193L3.74012 14.1455C3.53564 14.2476 3.30761 14.296 3.07928 14.2855C2.85098 14.275 2.62906 14.2063 2.43479 14.0859C2.24044 13.9655 2.07991 13.7971 1.96894 13.5972C1.85798 13.3972 1.80023 13.1722 1.80079 12.9435L1.80079 4.39384L1.80405 4.30028C1.81925 4.08413 1.88653 3.87422 2.00099 3.68916C2.1318 3.47772 2.31908 3.30703 2.54144 3.19582L5.59244 1.67L5.69843 1.62093C5.94843 1.51368 6.21794 1.45801 6.49078 1.45801L6.60724 1.46128C6.87892 1.47705 7.14497 1.54801 7.38912 1.67L10.2111 3.08132L10.2824 3.11142C10.3555 3.13791 10.4327 3.15198 10.5108 3.15198C10.6146 3.15198 10.7169 3.12763 10.8098 3.08132L13.2615 1.85517H13.2621L13.3393 1.81918C13.5229 1.74163 13.7218 1.70607 13.9216 1.71515C14.1499 1.72555 14.3719 1.79381 14.5661 1.91406C14.7604 2.03434 14.9209 2.20249 15.032 2.40216C15.1429 2.6016 15.2009 2.82631 15.2008 3.0545L15.2008 11.6068Z' fill='%23333'/%3E%3Cpath d='M9.83203 13.8675L9.83203 3.81746C9.83203 3.44743 10.132 3.14746 10.502 3.14746C10.8721 3.14746 11.172 3.44743 11.172 3.81746L11.172 13.8675C11.172 14.2375 10.8721 14.5375 10.502 14.5375C10.132 14.5375 9.83203 14.2375 9.83203 13.8675Z' fill='%23333'/%3E%3Cpath d='M5.83203 12.1819L5.83203 2.13191C5.83203 1.76189 6.132 1.46191 6.50203 1.46191C6.87206 1.46191 7.17203 1.76189 7.17203 2.13191L7.17203 12.1819C7.17203 12.552 6.87206 12.8519 6.50203 12.8519C6.132 12.8519 5.83203 12.552 5.83203 12.1819Z' fill='%23333'/%3E%3C/svg%3E");
}
.mapArea .company .cp-btn a.bt-kakao:hover {
  background: rgb(234.7, 211.23, 0);
}
.mapArea .company .cp-btn a.bt-naver {
  background: #00C73C;
  color: #ffffff;
}
.mapArea .company .cp-btn a.bt-naver i {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='16' viewBox='0 0 17 16' fill='none'%3E%3Cpath d='M13.8608 3.05318L11.4098 4.27934L11.4091 4.27999C11.1302 4.41933 10.8226 4.49198 10.5108 4.49198C10.199 4.49198 9.89136 4.41933 9.61244 4.27999L6.79045 2.86867C6.72079 2.83387 6.6456 2.8116 6.56865 2.80259L6.49078 2.79801C6.38687 2.79801 6.28408 2.82159 6.19111 2.86802L6.19177 2.86867L3.14079 4.39384L3.14079 12.9468L5.59244 11.7206L5.69843 11.6716C5.94843 11.5643 6.21794 11.5086 6.49078 11.5086C6.80262 11.5086 7.11017 11.5813 7.38912 11.7206L10.2111 13.132L10.2824 13.1621C10.3555 13.1885 10.4327 13.2027 10.5108 13.2027C10.6146 13.2027 10.7169 13.1783 10.8098 13.132L13.8608 11.6061L13.8608 3.05318ZM15.2008 11.6068C15.2006 11.8555 15.1314 12.0993 15.0006 12.3108C14.8697 12.5224 14.682 12.6929 14.4595 12.8042L14.4601 12.8048L11.4091 14.33C11.1302 14.4694 10.8226 14.5427 10.5108 14.5427C10.199 14.5426 9.89136 14.47 9.61244 14.3306L6.79045 12.9193C6.69745 12.8728 6.59474 12.8486 6.49078 12.8486C6.38687 12.8486 6.28408 12.8722 6.19111 12.9187L6.19177 12.9193L3.74012 14.1455C3.53564 14.2476 3.30761 14.296 3.07928 14.2855C2.85098 14.275 2.62906 14.2063 2.43479 14.0859C2.24044 13.9655 2.07991 13.7971 1.96894 13.5972C1.85798 13.3972 1.80023 13.1722 1.80079 12.9435L1.80079 4.39384L1.80405 4.30028C1.81925 4.08413 1.88653 3.87422 2.00099 3.68916C2.1318 3.47772 2.31908 3.30703 2.54144 3.19582L5.59244 1.67L5.69843 1.62093C5.94843 1.51368 6.21794 1.45801 6.49078 1.45801L6.60724 1.46128C6.87892 1.47705 7.14497 1.54801 7.38912 1.67L10.2111 3.08132L10.2824 3.11142C10.3555 3.13791 10.4327 3.15198 10.5108 3.15198C10.6146 3.15198 10.7169 3.12763 10.8098 3.08132L13.2615 1.85517H13.2621L13.3393 1.81918C13.5229 1.74163 13.7218 1.70607 13.9216 1.71515C14.1499 1.72555 14.3719 1.79381 14.5661 1.91406C14.7604 2.03434 14.9209 2.20249 15.032 2.40216C15.1429 2.6016 15.2009 2.82631 15.2008 3.0545L15.2008 11.6068Z' fill='white'/%3E%3Cpath d='M9.83203 13.8675L9.83203 3.81746C9.83203 3.44743 10.132 3.14746 10.502 3.14746C10.8721 3.14746 11.172 3.44743 11.172 3.81746L11.172 13.8675C11.172 14.2375 10.8721 14.5375 10.502 14.5375C10.132 14.5375 9.83203 14.2375 9.83203 13.8675Z' fill='white'/%3E%3Cpath d='M5.83203 12.1819L5.83203 2.13191C5.83203 1.76189 6.132 1.46191 6.50203 1.46191C6.87206 1.46191 7.17203 1.76189 7.17203 2.13191L7.17203 12.1819C7.17203 12.552 6.87206 12.8519 6.50203 12.8519C6.132 12.8519 5.83203 12.552 5.83203 12.1819Z' fill='white'/%3E%3C/svg%3E");
}
.mapArea .company .cp-btn a.bt-naver:hover {
  background: rgb(0, 183.7, 55.3869346734);
}

/* 반응형 */
/* 1500px */
@media screen and (max-width: 1500px) {
  .subRemote > section:has(.obj-rmt01) {
    text-align: center;
  }
  .subRemote .obj-rmt01, .subRemote .obj-rmt02 {
    position: unset;
    margin: 5vw auto;
  }
  .subRemote .obj-rmt01 {
    width: 30%;
    max-width: 22rem;
  }
  .subRemote .obj-rmt02 {
    width: 43%;
    max-width: 31rem;
  }
  .subRemote .remote_how {
    margin-top: 4vw;
  }
  .contents > section .sec_head_img {
    width: calc(100% - 4vw - 0.4rem);
  }
}
/* 1200px */
@media screen and (max-width: 1200px) {
  .subRemote .remote_how .ar_checkList {
    padding: 5vw;
  }
  .subRemote .remote_pro .remote_step {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 4vw;
  }
  .subRemote .remote_pro .remote_step dl {
    padding: 6vw 2vw;
  }
  .subRemote .remote_pro .remote_step dl:nth-child(even) {
    border-right: none;
  }
  .subRemote .remote_pro .remote_step dl:nth-child(-n+2) {
    border-bottom: 1px solid #eeeeee;
  }
  /* 어필 요소형 */
  .ap_el {
    flex-direction: column;
  }
  .ap_el .ap_item {
    padding: 3vw 0;
  }
  .ap_el .ap_item:first-child {
    padding-top: 0;
  }
  .ap_el .ap_item:last-child {
    padding-bottom: 0;
  }
  .ap_el .ap_item:not(:last-child) {
    border: none;
    border-bottom: 1px solid #eeeeee;
  }
  /* 그리드형 - 카드 */
  .ap_grid:has(.card_item) {
    grid-template-columns: repeat(1, 1fr);
  }
}
/* 1024px */
@media screen and (max-width: 1024px) {
  .contents .lec_grid .grid_item .lec_info .lec_edus .lec_btns {
    flex-wrap: wrap;
    margin-bottom: 1rem;
  }
  main {
    height: auto;
    padding: 4vw 0;
  }
  main .m_inner {
    flex-direction: column-reverse;
  }
  main .m_inner .m_thumb {
    max-width: unset;
  }
  main .m_inner .m_copy {
    width: 100%;
    padding-top: 0;
  }
  .subHeader .StepArea .StepTit {
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .subHeader .StepArea .StepTit h1 {
    background: rgba(255, 255, 255, 0.8509803922);
    padding: 2rem 1rem;
    line-height: 1.3;
    font-size: min(4.4vw, 3.6rem);
    backdrop-filter: blur(3px);
  }
  .subVisual {
    padding: 5vw;
  }
  .subVisual p {
    font-size: max(3rem, 4vw);
    text-wrap-style: balance;
    word-break: keep-all;
  }
  .subVisual span {
    font-size: max(1.6rem, 2.5vw);
    text-wrap-style: balance;
    word-break: keep-all;
    line-height: 1.2;
  }
  /* 서브콘텐츠 */
  .contents > section .sec_tit > img {
    display: none;
  }
  .contents > section:first-of-type .step_inner {
    margin-top: 0;
    border-radius: 0;
  }
  .contents > section .sec_left {
    max-width: unset;
  }
  .contents > section .sec_left.sec_sticky {
    position: unset;
  }
  .contents > section .sec_right .board_list {
    border-radius: 0;
  }
  .contents > section .sec_half {
    flex-direction: column;
    align-items: baseline;
  }
  /* 유저관련 */
  .userCenter > section .user-message .msg-list {
    max-width: 100%;
  }
  .userCenter > section .user-message {
    flex-direction: column;
  }
  .userCenter > section .user-message .msg-view .msg_cont .msg_rec .textArea {
    height: 20vw;
  }
  /* 업적관련 */
  .meritCenter .mer_tit {
    flex-direction: column;
    text-align: center;
  }
  .meritCenter .mer_tit p {
    margin-top: 2vw;
  }
  .meritCenter .mer_tit p::before {
    content: none;
  }
  .meritCenter .ach_list {
    grid-template-columns: repeat(auto-fill, minmax(30rem, 1fr));
  }
  .meritCenter .ach_list .ach_item {
    flex-direction: column;
    text-align: center;
    gap: 0;
  }
  /* 찾아오시는길 */
  .mapArea {
    grid-template-columns: repeat(1, 1fr);
  }
}
/* 720px */
@media screen and (max-width: 720px) {
  .boxArea {
    padding: 2rem;
  }
  .subHeader .stepTit .StepGuide {
    padding: 4vw 3vw;
  }
  .subHeader .stepTit .StepGuide dl dt {
    display: none;
  }
  .subHeader .stepTit .StepGuide dl.active::before {
    content: "";
    width: 1rem;
    height: 1rem;
    border-radius: 10rem;
    background: #5838E6;
    margin-right: 1.6vw;
    animation: ani-flicker 400ms ease-in-out infinite 500ms alternate-reverse;
  }
  .subHeader .stepTit .StepGuide dl:not(:last-child)::after {
    width: 8px;
    height: 12px;
  }
  /* 원격훈련 */
  .subRemote i.ico-how, .subRemote i.ico-pro {
    width: 12vw;
    height: 12vw;
  }
  .subRemote i.ico-how {
    top: -6vw;
  }
  .subRemote i.ico-pro {
    margin-bottom: 4vw;
  }
  .subRemote .remote_how .ar_checkList ul {
    gap: 4vw;
  }
  .subRemote .remote_how .ar_checkList li {
    padding-left: 6.4rem;
  }
  .subRemote .remote_how .ar_checkList li::before {
    top: -0.5rem;
    width: 5rem;
    height: 5rem;
  }
  .hrd_policy {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }
  .hrd_qus_wrap {
    padding: 4vw;
    border-radius: 1rem;
  }
  .hrd_qus .qus_item {
    flex-direction: column;
    gap: 2vw;
  }
  .hrd_qus .qus_item p {
    margin-left: 0;
    border-radius: 1rem;
  }
  .hrd_qus .qus_item p::before {
    border-color: transparent transparent #333333 transparent;
    top: -1.6rem;
  }
  .hrd_qus .qus_item p::after {
    border-color: transparent transparent #fff transparent;
    top: -1.1rem;
  }
  .hrd_qus .qus_item p::before, .hrd_qus .qus_item p::after {
    margin-left: 0;
    border-width: 0 1rem 1.4rem 1rem;
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0;
  }
  .hrd_qus .qus_item:nth-child(odd) p::before {
    border-color: transparent transparent #5838E6 transparent;
  }
  .hrd_pro .hrd_pro_slide::before {
    display: none;
  }
  .ap_grid .card_item .front {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-wrap: pretty;
    word-break: keep-all;
  }
  .mapArea .company .cp-btn {
    flex-direction: column;
  }
  .dtiArea summary::before {
    left: 2.9rem;
  }
  .dtiArea summary {
    padding-left: 6rem;
  }
  .dtiArea ul li {
    padding-left: 2rem;
  }
}
/* 535px */
@media screen and (max-width: 535px) {
  .subHeader .subTit {
    height: 10rem;
  }
  .subHeader .subTit h1 {
    font-size: 3rem;
  }
  .myCont .tabBtn {
    gap: 2.4rem;
    margin-bottom: 2.4rem;
  }
  .myCont .tabBtn li {
    font-size: 1.8rem;
  }
  .contents .lec_grid {
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: 1rem;
  }
  .contents > section .sec_inner {
    gap: 2rem;
  }
  .subRemote .remote_pro .remote_step {
    grid-template-columns: repeat(1, 1fr);
    padding: 3vw 3vw 3vw 8vw;
  }
  .subRemote .remote_pro .remote_step dl:nth-child(odd), .subRemote .remote_pro .remote_step dl:nth-child(even) {
    border: none;
    padding-left: 20vw;
    text-align: left;
  }
  .subRemote .remote_pro .remote_step dl:nth-child(odd)::before, .subRemote .remote_pro .remote_step dl:nth-child(even)::before {
    position: absolute;
    left: 0;
    width: 15vw;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
  }
  .subRemote .remote_pro .remote_step dl dt, .subRemote .remote_pro .remote_step dl dd {
    word-break: keep-all;
    text-wrap: pretty;
  }
  /* 어필 그리드형 */
  .ap_grid {
    grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr));
  }
}
/* 335px */
@media screen and (max-width: 335px) {
  .infoBox .info_progress .info_user menu {
    width: 100%;
    flex-wrap: wrap;
  }
  .infoBox .info_progress .info_user menu a.bt-rd-m {
    width: 100%;
  }
  /* 업적관련 */
  .meritCenter .ach_grid,
  .meritCenter .ach_list {
    grid-template-columns: repeat(1, 1fr);
  }
  .meritCenter .ach_grid .ach_item .thumb,
  .meritCenter .ach_list .ach_item .thumb {
    width: 8rem;
    height: 8rem;
  }
}