@charset "UTF-8";

:root {
  --section-max-width: 1500px;
  --main-purple: #4e00c9;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  background: #000;
}

body {
  font-family: "Pretendard", "Noto Sans KR", Arial, sans-serif;
  color: #fff;
}

.page-wrap {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  background: #000;
}

.page-section {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  line-height: 0;
  background: #000;
}

.section-inner {
  position: relative;
  width: 100%;
  max-width: var(--section-max-width);
  margin: 0 auto;
  line-height: 0;
}

.section-bg {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 0;
}

/* 보라색 배경 섹션 */
#main-visual,
#bottom-cta {
  background: var(--main-purple);
}

/* 02 브랜드 소개 영상 */
.video-section {
  background: #000;
  padding: 80px 0 95px;
  line-height: 1.4;
}

.video-inner {
  width: 100%;
  max-width: var(--section-max-width);
  margin: 0 auto;
  text-align: center;
}

.video-frame {
  width: 86%;
  max-width: 1280px;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  background: #2a2a2a;
}

.video-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 투명 클릭 영역 */
.hotspot {
  position: absolute;
  z-index: 10;
  display: block;
  background: transparent;
  text-indent: -9999px;
  overflow: hidden;
}

/* 상단 로고 클릭 영역 */
.logo-hotspot {
  top: 2.6%;
  left: 2.3%;
  width: 6.1%;
  height: 4.9%;
}

/* 모바일 */
@media (max-width: 768px) {
  :root {
    --section-max-width: 100%;
  }

  .section-inner,
  .video-inner {
    max-width: 100%;
  }

  .video-section {
    padding: 54px 0 70px;
  }

  .video-frame {
    width: 92%;
  }
}

/* 02 브랜드 소개 영상 */
.video-inner {
  position: relative;
}

.video-frame {
  position: absolute;
  left: 50%;
  top: 18%;
  transform: translateX(-50%);
  width: 86%;
  max-width: 1280px;
  aspect-ratio: 16 / 9;
  margin: 0;
  background: #2a2a2a;
  z-index: 5;
}

.video-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.youtube-hotspot {
  left: 44.5%;
  top: 86.8%;
  width: 11%;
  height: 4%;
  z-index: 20;
}

/* 05 노무 분야 버튼 */
.labor-consult-hotspot {
  left: 29.8%;
  top: 86.3%;
  width: 11%;
  height: 3.8%;
}

.labor-apply-hotspot {
  left: 44.5%;
  top: 86.3%;
  width: 11%;
  height: 3.8%;
}

.labor-guide-hotspot {
  left: 59.1%;
  top: 86.3%;
  width: 11%;
  height: 3.8%;
}

/* 06 법률 분야 버튼 */
.legal-consult-hotspot {
  left: 37.6%;
  top: 86.2%;
  width: 11%;
  height: 3.8%;
}

.legal-guide-hotspot {
  left: 52.1%;
  top: 86.2%;
  width: 11%;
  height: 3.8%;
}

/* 07 성평등 분야 버튼 */
.gender-consult-hotspot {
  left: 37.2%;
  top: 86.2%;
  width: 11%;
  height: 3.8%;
}

.gender-guide-hotspot {
  left: 51.8%;
  top: 86.2%;
  width: 11%;
  height: 3.8%;
}

/* 08 하단 문의 버튼 */
.email-hotspot {
  left: 24.8%;
  top: 58.35%;
  width: 14.2%;
  height: 6%;
}

.kakao-hotspot {
  left: 59%;
  top: 52.1%;
  width: 14%;
  height: 6%;
}

/* 09 푸터 클릭 영역 */
.footer-labor-hotspot {
  left: 35%;
  top: 32%;
  width: 2.3%;
  height: 5%;
}

.footer-legal-hotspot {
  left: 35%;
  top: 45%;
  width: 2.3%;
  height: 5%;
}

.footer-gender-hotspot {
  left: 35%;
  top: 56.7%;
  width: 3.3%;
  height: 5%;
}

.footer-email-hotspot {
  left: 54.5%;
  top: 32%;
  width: 4.9%;
  height: 5%;
}

.footer-kakao-hotspot {
  left: 54.5%;
  top: 45%;
  width: 8.5%;
  height: 5%;
}

.footer-guide-hotspot {
  left: 54.5%;
  top: 56.7%;
  width: 8.5%;
  height: 5%;
}