.container-fluid {
  padding: 0;
}


.landing {
  width: 100%;
  min-height: 100vh;
  overflow-x: hidden;
  padding: 0;
  margin: 0;
}

.main {
  min-height: 100vh;
}

.page-title {
  font-size: 4rem;
  font-weight: 500;
  color: var(--primary);
  margin: 2.4rem 0 3.2rem;
}


.landing .hero-cta{
  width: 100%;
  height: auto !important;
  aspect-ratio: 1569 / 768;
  background-image: url('../../images/custom/hero-cta-banner.webp');
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;   /* 크롭 방지 */
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: var(--content-max);
  margin: 0 auto;
}

.landing .hero-cta-inner{
  text-align: center;
  max-width: 90rem;
  margin: 0 auto 4rem;
}


.landing .hero-cta-header {
  margin-bottom: 4rem;
}

.landing .hero-cta-title span,
.landing .hero-cta-title {
  font-size: 5.6rem;
  line-height: 7.2rem;
  font-weight: 400;
  color: #fff;
}

.landing .hero-cta-title span {
  display: block;
}

.landing .hero-cta-subtitle {
  display: block;
  font-size: 2.8rem;
  line-height: 3.8rem;
  font-weight: 400;
  color: #fff;
  margin-top: 1.2rem;
}

/* solutions */
.landing .solutions {
  width: 100%;
  padding: 18rem 0;
}

.landing .solutions-list {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 6.4rem;
}

.landing .solution-item {
  width: 100%;
}

.landing .solution-item .solution-item-number {
  font-size: 2.4rem;
  line-height: 3.4rem;
  font-weight: 500;
  margin-bottom: 1.2rem;
  color: var(--tertiary);
}

.landing .solution-item .solution-item-title {
  font-size: 2.8rem;
  line-height: 3.8rem;
  font-weight: 500;
  margin-bottom: 2.4rem;
  color: var(--brand-500);
}

.landing .solution-item .solution-item-description {
  word-break: keep-all;
  font-size: 1.8rem;
  line-height: 2.6rem;
  font-weight: 400;
  color: var(--secondary);
}

/* XR 학습지원 솔루션 */
.landing .xr-learning-solution {
  width: 100%;
}

.landing .xr-learning-solution-list {
  display: flex;
  flex-direction: column;
  gap: 18rem;
}

.landing .xr-learning-solution-content {
  width: 100%;
  height: 52rem;
  border-radius: 2.4rem;
  background-color: var(--tertiary);
}

.landing .xr-learning-solution-item:first-child .xr-learning-solution-content {
  background: url('../../images/custom/landing_background_01.jpg') no-repeat center center/cover;
}

.landing .xr-learning-solution-item:nth-child(2) .xr-learning-solution-content {
  background: url('../../images/custom/landing_background_02.jpg') no-repeat center center/cover;
}

.landing .xr-learning-solution-item:nth-child(3) .xr-learning-solution-content {
  background: url('../../images/custom/landing_background_03.jpg') no-repeat center center/cover;
}

.landing .xr-learning-solution-item:last-child .xr-learning-solution-content {
  background: url('../../images/custom/landing_background_04.jpg') no-repeat center center/cover;
}

.landing .xr-learning-solution-content img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* AI 콘텐츠 제작 솔루션 */
.landing .ai-content-solution {
  width: 100%;
}

.landing .ai-content-solution .container {
  padding: 18rem 0;
}

.landing .ai-content-solution-content {
  width: 100%;
  height: 62rem;
  border-radius: 2.4rem;
  background-color: #fafbff;
}

.landing .ai-content-solution-content img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 콘텐츠/하드웨어 유통 서비스 */
.landing .content-hardware-service {
  width: 100%;
  padding: 12rem 0;
  background-color: var(--bg-selected);
}

/* 도입 이후 */
.landing .implementation-impact {
  width: 100%;
  padding: 18rem 0;
}

.landing .impact-content {
  width: 100%;
}

.landing .impact-content .impact-content-top,
.landing .impact-content .impact-content-bottom {
  width: 100%;
  display: flex;
  gap: 2.4rem;
}

.landing .impact-content .impact-content-top {
  margin-bottom: 2.4rem;
}

.landing .impact-content .content-item {
  position: relative;
  height: 42rem;
  flex-grow: 1;
  border-radius: 2.4rem;
  padding: 3.2rem;
  overflow: hidden;
  background-color: #f3f3f5;
}

.landing .impact-content .content-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 0;

  display: block;
  width: 100%;
  height: 23.4rem;
  background: linear-gradient(180deg, rgba(243, 243, 245, 0) 0%, #f3f3f5 45%);
  border-radius: 2.4rem;
}

.landing .impact-content .content-item-text-wrapper {
  position: absolute;
  left: 4rem;
  bottom: 3.2rem;
  z-index: 1;
}

.landing .impact-content .content-item-title {
  font-size: 2.4rem;
  line-height: 2.8rem;
  font-weight: 500;
  color: var(--primary);
  margin-bottom: 1.2rem;
}

.landing .impact-content .content-item-description,
.landing .impact-content .content-item-description span {
  font-size: 2rem;
  line-height: 2.8rem;
  font-weight: 400;
  color: var(--secondary);
}

.landing .impact-content .content-item-description span {
  display: block;
}

.landing .impact-content .content-item:first-child {
  background: url('../../images/custom/landing_map.png') no-repeat center center/cover;
}

.landing .impact-content .content-item:last-child {
  background-image: url('../../images/custom/landing_screen.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

.landing .impact-content .metric-item {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 36rem;
  height: 42rem;
  border-radius: 2.4rem;
  padding: 3.2rem;
  background-color: var(--primary);
}

.landing .impact-content .metric-title span {
  display: block;
  font-size: 3.2rem;
  line-height: 1;
  font-weight: 400;
  color: #fff;
  margin-bottom: 1.2rem;
}

.landing .impact-content .metric-value {
  display: flex;
  position: relative;
  align-items: flex-end;
  gap: 0.4rem;

  font-size: 2.4rem;
  line-height: 2.8rem;
  font-weight: 500;
  color: #fff;
}

.landing .impact-content .metric-number span {
  font-size: 8rem;
  line-height: 1;
  font-weight: 500;
  color: #fff;
}

.landing .impact-content .metric-number .metric-suffix {
  position: absolute;
  top: 0;
  left: 13.8rem;
  font-size: 4rem;
  line-height: 1;
  font-weight: 600;
  color: #fff;
}

.landing .impact-content .metric-unit {
  font-size: 2.4rem;
  line-height: 1;
  font-weight: 300;
  color: #fff;
  margin-bottom: 1.2rem;
}

/* 구축 래퍼런스 */
.landing .reference {
  width: 100%;
  padding-bottom: 18rem;
}

.landing .reference-content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4.8rem;
}

.landing .reference-slider {
  flex-shrink: 0;
  width: 60rem;
  height: 40rem;
  border-radius: 2.4rem;
  overflow: hidden;
  position: relative;
}

.landing .reference-list {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 2rem;
}

.landing .reference-item {
  width: 100%;
  padding-bottom: 2rem;
  border-bottom: 0.1rem solid var(--divide-300);
}

.landing .reference-item:last-child {
  border: none;
}

.landing .reference-slider-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.landing .reference-slider-item.active {
  opacity: 1;
}

.landing .reference-slider-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.landing .reference-item-button {
  font-size: 2rem;
  line-height: 2.8rem;
  font-weight: 500;
  color: var(--disabled);
  transition: all 0.2s ease-in-out;
}

.landing .reference-item-button:hover:not(:disabled) {
  color: var(--secondary);
}

.landing .reference-project-list-wrapper {
  height: 0;
  overflow: hidden;
  transition: height 0.2s linear;
}

.landing .reference-project-list {
  padding: 1.6rem 0 1.2rem;
}

.landing .reference-project-list li {
  position: relative;
  font-size: 1.8rem;
  line-height: 3.2rem;
  font-weight: 400;
  color: var(--secondary);
  padding-left: 1.2rem;
}

.landing .reference-project-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background-color: var(--secondary);
}

.landing .reference-item.is-show .reference-item-button {
  color: var(--brand-500);
}

.landing .reference-item.is-show .reference-project-list-wrapper {
  height: 165px;
}

/* review */
.landing .review {
  width: 100%;
  padding-bottom: 18rem;
}

.landing .review .section-header {
  margin-bottom: 6.4rem;
}

.landing .review-content {
  width: 100%;
}

.landing .review-list {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 4rem;
}

.landing .review-card {
  width: 44rem;
  padding: 3.2rem;
  border-radius: 1.2rem;
  background: linear-gradient(180deg, #f9f9f9 0%, #f6f7fc 100%);
}

.landing .review-card .review-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3.2rem;
}

.landing .review-card .review-card-header img {
  width: auto;
  height: 2.8rem;
}

.landing .review-card .review-card-header .review-tag {
  height: 3.2rem;
  padding: 0 1.2rem;
  font-size: 1.4rem;
  line-height: 3.2rem;
  font-weight: 500;
  color: var(--brand-500);
  border-radius: 999rem;
  background-color: #e7edfc;
}

.landing .review-card .review-card-description {
  font-size: 1.8rem;
  line-height: 2.6rem;
  font-weight: 400;
  color: var(--secondary);
  margin-bottom: 1.2rem;
  word-break: keep-all;
}

.landing .review-card .review-card-date {
  display: block;
  text-align: right;
  font-size: 1.4rem;
  line-height: 2rem;
  font-weight: 400;
  color: var(--tertiary);
}

/* 하단 cta-banner */
.landing .cta-banner {
  width: 100%;
  padding-bottom: 18rem;
}

.landing .cta-banner-content {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 36rem;
  border-radius: 4rem;
  text-align: center;
  background-image: url('../../images/custom/landing-cta-banner-02.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.landing .cta-banner-title {
  font-size: 4rem;
  line-height: 5.2rem;
  font-weight: 500;
  color: #fff;
  margin-bottom: 3.2rem;
}

.landing .cta-banner-button {
  height: 5.6rem;
  width: 16rem;
  background-color: #fff;
  font-size: 1.6rem;
  line-height: 2.4rem;
  font-weight: 500;
  color: var(--primary);
}

.landing .cta-banner-button:hover:not(:disabled) {
  background-color: var(--bg-interactive-hover);
}

/* ---------- company ---------- */
.company .hero-section {
  width: 100%;
  height: 46rem;
  padding-top: 4.0rem;
  background: linear-gradient(0deg, #fff 35.48%, #d9eaff 100%);
}

.company .hero-section .navi_ctr {
  height: 1.6rem;
  width: 100%;
}

.company .hero-header {
  width: 100%;
  text-align: center;
  margin-top: 8rem;
}

.company .hero-title {
  font-size: 4rem;
  line-height: 5.2rem;
  font-weight: 500;
  color: var(--primary);
  margin-bottom: 1.6rem;
}

.company .hero-description {
  font-size: 1.8rem;
  line-height: 3rem;
  font-weight: 400;
  color: var(--tertiary);
}

/* business */
.company .business {
  padding: 8rem 0 18rem;
}

.company .business-title {
  font-size: 3.2rem;
  font-weight: 500;
  color: var(--primary);
  padding-bottom: 1.2rem;
  border-bottom: 0.1rem solid var(--divide-200);
}

.company .business-list {
  margin-top: 4rem;
}

.company .business-number {
  font-size: 2.4rem;
  line-height: 3.4rem;
  font-weight: 500;
  color: var(--brand-500);
  margin-bottom: 0.2rem;
}

.company .business-item-title {
  font-size: 2.8rem;
  line-height: 3.8rem;
  font-weight: 500;
  color: var(--primary);
  margin-bottom: 2.4rem;
}

.company .business-content {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  align-items: flex-end;
}

.company .business-content-item {
  width: 58.8rem;
}

.company .business-content-title {
  font-size: 2.2rem;
  line-height: 3rem;
  font-weight: 500;
  color: var(--secondary);
  margin-bottom: 1.2rem;
}

.company .business-content-description {
  font-size: 1.8rem;
  line-height: 2.6rem;
  font-weight: 400;
  color: var(--tertiary);
  word-break: keep-all;
}

/* vision */
.company .vision {
  /* width: 100%; */
  width: 120rem;
  margin: 0 auto;
  border-radius: 4rem;
  padding: 12rem 0;
  background-image: url('../../images/custom/company_vision_banner.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}

.company .vision-header {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.4rem;
}

.company .vision-title {
  font-size: 3.2rem;
  line-height: 4rem;
  font-weight: 500;
  color: #fff;
  margin-bottom: 1.6rem;
}

.company .vision-description {
  max-width: 77rem;
  font-size: 1.8rem;
  line-height: 3rem;
  font-weight: 400;
  color: #fff;
}

/* contact us */
.company .contact {
  width: 100%;
  padding: 18rem 0;
}

.company .contact-title {
  font-size: 3.2rem;
  line-height: 4rem;
  font-weight: 500;
  color: var(--primary);
  margin-bottom: 2.4rem;
}

.company .kakao-map {
  width: 100%;
  height: 35rem;
  background-color: var(--divide-200);
  margin-bottom: 3.2rem;
}

.company .contact-list {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.company .contact-item {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.company .contact-item-label {
  font-size: 1.6rem;
}

.company .contact-item-label {
  font-size: 2rem;
  line-height: 2.8rem;
  font-weight: 600;
  color: var(--primary);
}

.company .contact-item-value {
  font-size: 1.8rem;
  line-height: 2.6rem;
  font-weight: 400;
  color: var(--tertiary);
}

.company .contact-item-sub-label {
  display: block;
  font-size: 1.8rem;
  line-height: 2.6rem;
  font-weight: 400;
  color: var(--disabled);
  margin-bottom: 0.4rem;
}

.detail-container {
  margin-top: 6.4rem;
  gap: 3.2rem;
}

/* login */
.main {
  height: 100vh;
}

.main-left {
  flex-basis: 60rem;
  flex-grow: 0;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.main-left > .form-row.bx-tbl {
  width: 36rem;
}

.main-left .signup-title,
.main-left .login-title {
  font-size: 2.4rem;
  line-height: 3.4rem;
  font-weight: 500;
  color: var(--primary);
  margin-bottom: 3.2rem;
}

.main-left .social-login-area {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
}

.main-left .social-login-area .btn-google {
  display: block;
  width: 100%;
  height: 4.8rem;
  border-radius: 0.8rem;
  border: 0.1rem solid var(--border-tertiary);

  font-size: 1.6rem;
  line-height: 2.4rem;
  font-weight: 400;
  color: var(--primary);
  text-align: start;

  background-image: url('../../images/custom/google-icon.png');
  background-size: 2.4rem;
  background-position: 102px center;
  background-repeat: no-repeat;
  padding-left: 13.4rem;
}

.main-left .social-login-area .btn-google:hover {
  background-color: var(--bg-interactive-hover);
}

.main-left .social-login-area .btn-kakao {
  display: block;
  width: 100%;
  height: 4.8rem;
  border-radius: 0.8rem;

  font-size: 1.6rem;
  line-height: 2.4rem;
  font-weight: 400;
  color: #3e1f1d;
  text-align: start;

  background-color: #ffeb00;
  background-image: url('../../images/custom/kakao-icon.png');
  background-size: 2.4rem;
  background-position: 102px center;
  background-repeat: no-repeat;
  padding-left: 13.4rem;
}

.main-left .social-login-area .btn-kakao:hover {
  border-color: #ffdd00;
  background-color: #ffdd00;
}

.form-row:not(.search-row) > .container-content:not(.iframe-container).main-right {
  flex-grow: 1;
  flex-shrink: 1;
  padding: 1.6rem;
}

.main-right .form-row.bx-tbl {
  background-color: #f3f6fd;
  width: 100%;
  height: 100%;
  border-radius: 2.4rem;
  overflow: hidden;
}

.or-row {
  position: relative;
  width: 100%;
  height: 0.1rem;
  background-color: var(--divide-200);
  margin: 2.4rem 0;
}

.or-row::after {
  content: 'Or';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 4rem;
  background-color: #fff;
  text-align: center;

  font-size: 1.4rem;
  line-height: 2rem;
  font-weight: 300;
  color: var(--disabled);
}

.input-field-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 1.6rem;
}

.input-field-wrapper div {
  width: 100%;
}

.input-field-wrapper .label-col {
  background-color: transparent;
}

.input-field-wrapper label {
  font-size: 1.6rem;
  line-height: 2.4rem;
  font-weight: 400;
  color: var(--secondary);
  padding: 0;
}

.input-field-wrapper .password-field,
.input-field-wrapper .text-field {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 0.4rem;
}

.signin-link,
.login-form .signup-link {
  text-align: center !important;
  margin-top: 1.6rem !important;
}

.signin-link span,
.login-form .signup-link span {
  font-size: 1.4rem !important;
  line-height: 2rem !important;
  font-weight: 400 !important;
  color: var(--tertiary) !important;
  margin-right: 0.8rem !important;
}

.signin-link a,
.login-form .signup-link a {
  font-size: 1.4rem;
  line-height: 2rem;
  font-weight: 400;
  color: var(--brand-500);
  text-decoration: none;
}

.login-form .signup-link a:hover {
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

/* email */
.create-container {
  width: 100%;
  height: 100vh;
  background-color: var(--bg-selected);
  padding-top: 12rem;
}

.create-popup {
  text-align: center;
  width: 42rem;
  padding: 3.2rem;
  border-radius: 2.4rem;
  background-color: #fff;
  box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.08);
  margin: 0 auto;
}

.create-popup .create-popup-title {
  font-size: 2.4rem;
  line-height: 3.4rem;
  font-weight: 500;
  color: var(--brand-500);
  margin-bottom: 1.6rem;
}

.create-popup .create-popup-description {
  font-size: 1.4rem;
  line-height: 2rem;
  font-weight: 400;
  color: var(--tertiary);
  margin-bottom: 2.4rem;
}

.create-popup .btn-submit {
  width: 100%;
  height: 4.8rem;
  border-radius: 0.8rem;
  font-size: 1.6rem;
  line-height: 2.4rem;
  font-weight: 400;
}

.create-popup .confirm-email {
  width: 100%;
  height: 4.8rem;
  background-color: #e8eeff;
  border-radius: 999rem;
  margin-bottom: 1.6rem;
}

.create-popup .confirm-email .form-col.value-col {
  justify-content: center;
  width: 100%;
}

.create-popup .confirm-email .view-compo {
  font-size: 1.6rem;
  line-height: 2.4rem;
  font-weight: 400;
  color: var(--primary);
}

.agreement-list {
  margin: 1.6rem 0 2.4rem;
}

.agreement-list .checkbox-compo {
  gap: 0.4rem;
}

.agreement-list .form-check .form-check-label {
  font-size: 1.3rem;
  line-height: 1.8rem;
  font-weight: 400;
  color: var(--tertiary);
  cursor: pointer;
}

.agreement-list .form-check .form-check-label .policy-link {
  color: var(--brand-500);
  text-decoration: underline;
  text-underline-offset: 0.4rem;
}

.agreement-list .form-check .form-check-label .policy-link:hover {
  color: var(--brand-300);
}

/* khn 추가 ================================================== */
:root {
  --gnb-h: 6.4rem;
  --pad-x: 16px;
}

/* landing 컨테이너 중앙 정렬 */
.container.landing {
  max-width: var(--content-max);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--pad-x);
  box-sizing: border-box;
}

.container-fluid.layout { width: 100%; }

/* 레이아웃 고정 제거 */
#lfrm1, #lfrm2, #lctt1,
.layout-container, .layout-contents, .layout-content, .iframe-container {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

#lfrm1 { height: auto !important; }

/* 문서 전체는 오른쪽 스크롤만 허용 */
html, body {
  height: auto !important;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

.footer { position: static !important; }

.container-content.layout-content,
.container,
.container.landing {
  max-width: var(--content-max) !important;
  width: 100%;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

#lctt1, .container-content.layout-content { width: 100%; }

.gnb .gnb-inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  box-sizing: border-box;
}

.layout-content {
  padding: 0 !important;
  box-sizing: border-box;
}

.container-fluid.layout,
.container-fluid.container,
.container-fluid.container-fluid,
.layout-container .layout-content,
.container-content.layout-content {
  padding: 0 !important;
}

.gnb .gnb-inner {
  max-width: 120rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 auto;
}


.landing .container,
.company .container {
  max-width: 1200px !important;
  width: 100%;
  margin: 0 auto !important;
  box-sizing: border-box;
}


/* khn 추가 ================================================== */


/* ======== (25.10.16) 로그인 및 회원가입 페이지 디자인 개선 ==========*/
.auth-main {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(25deg, #a9c6fe 16.81%, #b3cdfe 30.65%, #dae6fe 49.32%, #d1deff 67.35%, #dee9ff 81.52%);
}

.form-row:not(.search-row) > .container-content:not(.iframe-container).auth-container {
  height: auto;
  border-radius: 32px;
  border: 4px solid #fff;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 12px 24px 0 rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(12px);
  padding: 5.6rem;
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 47.2rem;
}

.auth-container .signup-title,
.auth-container .login-title {
  width: 100%;
  font-size: 2.4rem;
  line-height: 3.4rem;
  font-weight: 500;
  color: var(--primary);
  text-align: center;
  margin-bottom: 0.4rem;
}

.auth-container .login-sub-title {
  width: 100%;
  font-size: 1.4rem;
  line-height: 2rem;
  font-weight: 400;
  color: var(--tertiary);
  text-align: center;
  margin-bottom: 3.2rem;
}

.auth-container .social-login-area {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
}

.auth-container .social-login-area .btn-google {
  display: inline-block;
  width: 50%;
  height: 4.8rem;
  border-radius: 0.8rem;
  border: 0.1rem solid var(--border-secondary);
  background-color: #fff;

  font-size: 1.3rem;
  line-height: 2rem;
  font-weight: 400;
  color: var(--primary);
  text-align: start;
  padding-left: 4.9rem;

  background-image: url('../../images/custom/google-icon.png');
  background-size: 2.4rem;
  background-position: 18px center;
  background-repeat: no-repeat;
}

.auth-container .social-login-area .btn-google:hover {
  background-color: var(--bg-interactive-hover);
  border-color: var(--border-secondary-hover);
}

.auth-container .social-login-area .btn-kakao {
  display: inline-block;
  width: 50%;
  height: 4.8rem;
  border-radius: 0.8rem;

  font-size: 1.3rem;
  line-height: 2rem;
  font-weight: 400;
  color: #3e1f1d;
  text-align: start;
  padding-left: 4.9rem;

  background-color: #ffeb00;
  background-image: url('../../images/custom/kakao-icon.png');
  background-size: 2.4rem;
  background-position: 18px center;
  background-repeat: no-repeat;
}

.auth-container .social-login-area .btn-kakao:hover {
  border-color: #ffdd00;
  background-color: #ffdd00;
}
.auth-container .or-row::after {
  content: 'Or';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 4rem;
  background-color: #f7f9ff;
  text-align: center;

  font-size: 1.4rem;
  line-height: 2rem;
  font-weight: 300;
  color: var(--disabled);
}

/* ============================================================================= */