/* ========================================
   데스크탑 서브페이지 공통 CSS
   회사소개, 서비스소개 등 .sub 클래스 페이지 공통
   ======================================== */

/* 헤더 로고 */
.sub .logos {
  top: 40px;
  left: calc(50% - 550px);
  width: 160px;
  height: 24px;
  position: absolute;
  aspect-ratio: 6.75;
  background-image: url(/img/website/figma/img/group.png);
  background-size: 100% 100%;
}

.sub .vector {
  position: absolute;
  width: 2.55%;
  height: 17.11%;
  top: 3.08%;
  left: 17.80%;
}

.sub .img {
  position: absolute;
  width: 4.41%;
  height: 74.37%;
  top: 23.40%;
  left: 16.86%;
}

/* 헤더 구분선 */
.sub .line {
  top: 99px;
  left: 0;
  position: absolute;
  width: 100%;
  height: 1px;
  object-fit: cover;
}

/* 네비게이션 */
.sub .navbar {
  position: absolute;
  top: 41px;
  left: calc(50% - 270px);
  width: 548px;
  height: 22px;
  display: flex;
  gap: 20px;
}

.sub .navbar a {
  text-decoration: none;
  display: block;
}

.sub .navbar a:hover {
  opacity: 0.7;
}

/* 네비 - 비활성 메뉴 */
.sub .div {
  width: 120px;
  height: 22px;
  font-family: "Pretendard-SemiBold", Helvetica;
  font-weight: 600;
  color: #222222;
  font-size: 20px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

/* 네비 - 활성 메뉴 (주황색) */
.sub .text-wrapper-2 {
  width: 120px;
  height: 22px;
  font-family: "Pretendard-SemiBold", Helvetica;
  font-weight: 600;
  color: #eb5f14;
  font-size: 20px;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  white-space: nowrap;
}

/* 헤더 아이콘 - 검색 */
.sub .group-2 {
  position: absolute;
  top: 37px;
  left: calc(50% + 526px);
  width: 24px;
  height: 29px;
  display: flex;
  flex-direction: column;
  gap: 0.3px;
}

.sub .vector-2,
.sub .vector-3 {
  /* 검색 아이콘 벡터 기본 스타일 */
}

.sub .group-2 .vector-2 {
  margin-left: 11.6px;
  width: 5.84px;
  height: 6.52px;
}

.sub .group-2 .vector-3 {
  width: 23.67px;
  height: 21.9px;
}

/* 헤더 아이콘 - 메뉴 */
.sub .group-3 {
  position: absolute;
  top: 37px;
  left: calc(50% + 485px);
  width: 26px;
  height: 29px;
}

.sub .group-3 .vector-4,
.sub .vector-4 {
  position: absolute;
  top: 1px;
  left: 0;
  width: 15px;
  height: 28px;
}

.sub .group-3 .vector-5,
.sub .vector-5 {
  position: absolute;
  top: 0;
  left: 1px;
  width: 19px;
  height: 14px;
}

.sub .group-3 .vector-6,
.sub .vector-6 {
  position: absolute;
  top: 10px;
  left: 15px;
  width: 11px;
  height: 10px;
}

.sub .group-3 .vector-7,
.sub .vector-7 {
  position: absolute;
  top: 14px;
  left: 1px;
  width: 19px;
  height: 14px;
}

/* 상단 배경 영역 */
.sub .intersect {
  position: absolute;
  top: 100px;
  left: 0;
  width: 100%;
  height: 320px;
  background-color: #eb5f14;
}

/* 페이지 타이틀 그룹 */
.sub .group {
  position: absolute;
  top: 176px;
  display: flex;
  flex-direction: column;
  gap: 35px;
}

.sub .text-wrapper-3 {
  font-family: "Pretendard-Regular", Helvetica;
  font-weight: 400;
  color: #ffffff;
  font-size: 55px;
  text-align: center;
  letter-spacing: 0;
  line-height: 78.0px;
  white-space: nowrap;
}

.sub .p {
  font-family: "Pretendard-Regular", Helvetica;
  font-weight: 400;
  color: #ffebe1;
  font-size: 18px;
  text-align: center;
  letter-spacing: 0;
  line-height: 28.0px;
}

/* ========================================
   푸터 공통
   ======================================== */

/* 푸터 컨테이너 */
.sub .group-4 {
  position: absolute;
  left: 0;
  bottom: 100px;
  height: 209px;
}

/* 푸터 로고 */
.sub .logos-2 {
  width: 150px;
  height: 22px;
  position: absolute;
  left: calc(50% - 550px);
  aspect-ratio: 6.75;
  background-size: 100% 100%;
}

/* 푸터 주소 */
.sub .element {
  position: absolute;
  left: calc(50% - 549px);
  font-family: "Pretendard-Regular", Helvetica;
  font-weight: 400;
  color: transparent;
  font-size: 14px;
  letter-spacing: 0;
  line-height: 23px;
  font-style: normal;
}

.sub .span {
  color: #777777;
}

.sub .text-wrapper-4 {
  color: #222222;
}

/* 푸터 면책조항 박스 */
.sub .group-5 {
  position: absolute;
  left: calc(50% + 251px);
  width: 302px;
  height: 100px;
}

.sub .rectangle {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 300px;
  height: 100px;
  background-color: #f9f9f9;
  border-radius: 10px;
}

/* 푸터 구분선 */
.sub .line-2 {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  object-fit: cover;
}
