@charset "UTF-8";

/* hero */
#hero .width-wrap {
  flex-direction: column;
  gap: var(--gap-4xl);
}
#hero .hero-area {
  flex: 1;
  display: flex;
  justify-content: space-between;
  gap: var(--gap-4xl);
}
#hero .img-area {
  max-width: 588px;
  flex: 0 1 auto;
  min-width: 0;
}
#hero .link-list {
  display: flex;
  gap: var(--gap-sm);
}
#hero .link-list li {
  flex: 1;
  position: relative;
}
#hero .link-list .link {
  display: flex;
  align-items: center;
  height: 100%;
  gap: var(--gap-xs);
  padding: var(--pad-md);
  background-color: var(--wh);
  border-radius: var(--r-24);

  transition: background-color var(--dur-fast) var(--ease-out);
}
#hero .link .icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--pad-xs);
  background: var(--bg-prmr-10);
  border-radius: var(--r-full);
}
#hero .link .text {
  display: flex;
  flex-direction: column;
  gap: var(--gap-3xs);
}
#hero .link .text p:nth-child(1) {
  font-size: var(--h-xs);
  color: var(--text-def);
}
#hero .link .text p:nth-child(2) {
  font-size: var(--body-sm);
}
#hero .link .ic-arrow {
  margin-left: auto;
  color: var(--prmr);
}
#hero .link-list li:active .link {
  background-color: #0047d9;
}
@media (hover: hover) {
  #hero .link-list li:hover {
    .link {
      background-color: var(--prmr);
      color: var(--text-inv);
    }
    .text p:nth-child(1) {
      color: var(--text-inv);
    }
    .ic-arrow {
      color: var(--text-inv);
    }
  }
}

/* application */
#application .contents-area {
  display: flex;
  justify-content: center;
}
#application .download-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--gap-sm);
}
#application .download-list a {
  max-width: 190px;
  border-radius: var(--r-12);
  overflow: hidden;
}
#application .download-list .img-zone {
  padding: var(--pad-lg) 10px;
  background: #f8f8f8;
}
#application .download-list .button-zone {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px var(--pad-md);
  background: #1e1e1e;
}
#application .download-list .button-zone p {
  font-size: var(--body-sm);
  font-weight: 600;
  color: var(--wh);
}

/* faq */
#faq .faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}
#faq .faq-list li {
  display: flex;
  align-items: baseline;
  gap: var(--gap-sm);
  padding: var(--pad-lg);
  background: var(--wh);
  border-radius: var(--r-24);
}
#faq .faq-list .row {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--gap-sm);
}
#faq .faq-list .num {
  font-size: var(--body-md);
  font-weight: bold;
  color: var(--prmr);
}
#faq .faq-list .question {
  font-size: var(--body-md);
  font-weight: 700;
  color: var(--text-def);
}
#faq .faq-list .answer {
  font-size: var(--body-sm);
  white-space: pre-line;
}

/* contact */
#contact .contents-area {
  display: flex;
  gap: var(--gap-xl);
  align-items: flex-end;
  margin-bottom: var(--gap-4xl);
}
#contact .contact-form {
  flex: 1;
}
#contact .kakao-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 440px;
}

/* contact form */
.contact-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: var(--gap-lg);
  column-gap: var(--gap-sm);
}
.contact-form .full {
  grid-column: span 2;
}
.contact-form .input-field {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xs);
}
.contact-form .input-field .field-label {
  display: flex;
  align-items: center;
  gap: var(--gap-2xs);
  font-size: var(--h-xs);
  font-weight: bold;
  color: var(--text-def);
}
.contact-form .input-field .badge {
  display: flex;
  padding: 2px 6px;
  border-radius: 6px;
  background: #f3f3f3;
  font-size: var(--c-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-sub);
}
.contact-form .input-field input,
.contact-form .input-field textarea {
  padding: var(--pad-sm) var(--pad-xs);
  border-radius: var(--r-8);
  background: var(--bg-sub);
}
.contact-form .input-field textarea {
  height: 160px;
}
.contact-form .btn {
  height: 80px;
  font-size: var(--body-lg);
}

/* location */
#location {
  position: relative;
  overflow: hidden;
  padding: var(--pad-2xl) 0;
}
#location .width-wrap {
  flex-direction: row;
  justify-content: space-between;
  padding: 0 var(--pad-side);
}
#location .title-area {
  flex: 1;
}
#location .title-area p.time {
  display: none;
}

#location .width-wrap::before,
#location .width-wrap::after {
  position: absolute;
  font-family: "Noto Sans KR";
  font-size: 120px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--prmr-10);
  z-index: -1;
  white-space: nowrap;
}
#location .width-wrap:before {
  content: "MiraeBiz ON";
  top: -106px;
  right: -64px;
  transform: translateX(50%);
}
#location .width-wrap:after {
  content: "Contact us";
  top: 80px;
  left: -266px;
  transform: translateX(-50%);
}
/* data-motion="location-text": common.js에서 뷰포트 진입 시 .is-inview 부여 */
#location[data-motion] .width-wrap::before,
#location[data-motion] .width-wrap::after {
  opacity: 0;
}
#location.is-inview .width-wrap::before {
  animation: moveR 0.45s linear both;
}
#location.is-inview .width-wrap::after {
  animation: moveL 0.45s linear 0.2s both;
}

#location .info-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: var(--gap-4xl);
  font-size: var(--body-md);
}
#location .info-area .address {
  font-size: var(--body-lg);
}
#location .info-area .info {
  display: flex;
  flex-direction: column;
  gap: var(--gap-2xs);
}
#location .info-area .info span {
  display: inline-flex;
  width: 70px;
}

#location .map-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--gap-4xl);
  height: 400px;
  overflow: hidden;
}
.root_daum_roughmap {
  flex-shrink: 0;
}
.root_daum_roughmap .wrap_btn_zoom,
.root_daum_roughmap .wrap_controllers {
  display: none !important;
}

/* animation */

@keyframes moveL {
  0% {
    opacity: 0;
    transform: translateX(-50%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes moveR {
  0% {
    opacity: 0;
    transform: translateX(50%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@media all and (max-width: 1200px) {
  /* hero */
  #hero .img-area {
    max-width: 500px;
  }
  #hero .link-list {
    flex-direction: column;
  }
  /* application */
  #application .download-list {
    grid-template-columns: repeat(3, 1fr);
  }
  /* contact */
  #contact .contact-form {
    grid-template-columns: 1fr;
  }
  #contact .contact-form .full {
    grid-column: auto;
  }
  #contact .kakao-btn {
    flex: 1;
  }
  /* location */
  #location .width-wrap::before,
  #location .width-wrap::after {
    font-size: 110px;
  }
  #location .width-wrap:before {
    top: -46px;
    right: -24px;
  }
  #location .width-wrap:after {
    top: 130px;
    left: -24px;
  }
}

@media all and (max-width: 800px) {
  /* hero */
  #hero .hero-area {
    flex-direction: column;
  }
  #hero .link-list .link {
    border-radius: var(--r-12);
  }
  #hero .img-area {
    align-self: center;
    max-width: 440px;
  }
  /* application */
  #application .download-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  #application .download-list .img-zone {
    padding: 20px 10px;
  }
  #application .download-list .button-zone {
    padding: 10px 14px;
  }
  #application .download-list .button-zone p {
    font-size: 14px;
  }

  /* faq */
  #faq .faq-list {
    gap: 12px;
  }
  #faq .faq-list li {
    flex-direction: column;
    gap: 4px;
  }
  #faq .faq-list .row {
    gap: 12px;
  }
  #faq .faq-list .num {
    font-size: 16px;
  }
  #faq .faq-list .question {
    font-size: 16px;
  }
  #faq .faq-list .answer {
    font-size: 14px;
    white-space: normal;
  }

  /* contact */
  #contact .contents-area {
    flex-direction: column;
    align-items: center;
  }
  #contact .contact-form {
    width: 100%;
    row-gap: 24px;
  }
  .contact-form .input-field {
    gap: 10px;
  }
  .contact-form .input-field .field-label {
    font-size: 16px;
  }
  .contact-form .input-field .badge {
    font-size: 12px;
  }
  .contact-form .input-field input,
  .contact-form .input-field textarea {
    padding: 12px 10px;
  }
  .contact-form .input-field textarea {
    height: 96px;
  }
  .contact-form .btn {
    height: 60px;
    font-size: 18px;
  }

  /* location */
  #location .width-wrap {
    flex-direction: column;
    gap: 20px;
  }
  #location .title-area p.time {
    display: block;
  }
  /* location */
  #location .width-wrap::before,
  #location .width-wrap::after {
    font-size: 90px;
  }
  #location .info-area {
    align-items: flex-end;
    gap: 15px;
    padding-top: 0;
    font-size: 16px;
  }
  #location .info-area .address {
    font-size: 16px;
  }
  #location .info-area .time {
    display: none;
  }
  #location .info-area .info {
    align-items: flex-end;
    gap: 0;
  }
  #location .info-area .info span {
    width: auto;
    margin-right: 4px;
  }

  #location .map-wrap {
    height: 300px;
  }
}
@media all and (max-width: 500px) {
  /* location */
  #location .width-wrap:before {
    right: -324px;
  }
  #location .width-wrap:after {
    left: -144px;
  }
  #location .map-wrap {
    margin-top: 40px;
    height: 200px;
  }
}