/* header.masthead {
  padding-top: 10rem;
  padding-bottom: calc(10rem - 4.5rem);
  background: linear-gradient(
      to bottom,
      rgba(92, 77, 66, 0.8) 0%,
      rgba(92, 77, 66, 0.8) 100%
    ),
    url("../assets/img/bg-masthead.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: cover;
} */

header.masthead {
  /* padding-top: 10rem;
    padding-bottom: calc(10rem - 4.5rem);
    position: relative;
    overflow: hidden;
    min-height: 635px; */
  padding-top: 13.5rem;
  padding-bottom: calc(10rem - 1.5rem);
  position: relative;
  overflow: hidden;
  min-height: 635px;
}

.masthead-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  z-index: 0;
  object-fit: cover;
}

.masthead-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
  z-index: 1;
}

header.masthead .container {
  position: relative;
  z-index: 2;
}
header.masthead h1,
header.masthead .h1 {
  font-size: 2.25rem;
}


@media (max-width: 1024px) {
  header.masthead p {
    font-size: 22px;
  }
  }

@media (max-width: 767px) {
  header.masthead .bottom {
    font-size: 20px;
  }
 }

@media (min-width: 992px) {
  header.masthead {
    height: 100vh;
    min-height: 40rem;
    padding-top: 4.5rem;
    padding-bottom: 0;
  }
  header.masthead p {
    font-size: 22px;
  }
  header.masthead h1,
  header.masthead .h1 {
    font-size: 3rem;
  }
}
@media (min-width: 1200px) {
  header.masthead h1,
  header.masthead .h1 {
    font-size: 3.5rem;
  }
}

/* 첫 번째 섹션: 비디오 배경 */
.video-section {
  position: relative; /* 자식 요소의 absolute 위치 기준점 */
  width: 100%;
  /* height를 auto로 변경하여 내용(비디오)의 높이에 맞게 자동으로 조절됩니다. */
  height: auto;
  background-color: #000; /* 비디오 로딩 전 검은 배경 */
  overflow: hidden; /* 섹션 밖으로 나가는 요소 숨김 */
}

/* 비디오를 감싸는 래퍼 */
.video-wrap {
  /* absolute 포지션을 제거하여 비디오가 정상적인 문서 흐름에 포함되도록 합니다. */
  /* 이렇게 해야 video-section의 높이가 비디오 높이에 맞춰집니다. */
  width: 100%;
  /* 비디오 하단에 생길 수 있는 불필요한 공백을 제거합니다. */
  line-height: 0;
}

/* 비디오 요소 스타일 */
.video-wrap video {
  width: 100%; /* 너비는 화면에 꽉 차게 설정 */
  height: auto; /* 높이는 원본 비디오 비율에 맞춰 자동으로 설정 */
  display: block; /* 인라인 요소의 기본 여백을 제거하여 레이아웃 깨짐 방지 */
  /* object-fit: cover;를 제거해야 비디오가 잘리지 않고 전체가 보입니다. */
  border: none;
  outline: none;
}

/* 비디오 위에 올라갈 콘텐츠 래퍼 */
.content-container {
  /* 비디오 위에 콘텐츠를 띄우기 위해 absolute 포지션을 유지합니다. */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* 부모인 video-section을 기준으로 높이를 100%로 채웁니다. */
  z-index: 2; /* 비디오보다 앞에 있도록 z-index 설정 */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 50px 0; /* 상하 패딩 추가로 여백 확보 */
}

/* 이미지 스타일 (콘텐츠 예시) */
.content-container img {
  max-width: 90%;
  height: auto;
}
.section-2-btm-txt-box {
  text-align: center;
}
.section-2-btm-txt {
  max-width: 100%;
}

.section-2-btm-txt h2 {
  font-weight: 700;
  font-size: 20px;
  line-height: 190%;
  color: #424242;
  margin-bottom: 22px;
}

.section-2-btm-txt p {
  font-weight: 400;
  font-size: 20px;
  line-height: 190%;
  color: #424242;
}

@media (max-width: 767px) {
	.section-2-btm-txt h2 {
	  font-size: 18px;
	}

	.section-2-btm-txt p {
	  font-size: 18px;
	  word-break: keep-all;
	}
}


.section-2-top-txt {
  font-weight: 700;
  font-size: 46px;
  line-height: 150%;
  color: #212121;
  text-align: start;
}

@media (max-width: 1024px) {
	.section-2-top-txt {
	  text-align: center;
	}
}

@media (max-width: 767px) {
	.section-2-top-txt {
	  font-size: 32px;
	  margin-bottom: 48px;
	}
}

.section-4-btm-txt-box {
  text-align: center;
}
.section-4-btm-txt {
  max-width: 100%;
}

.section-4-btm-txt h2 {
  font-weight: 700;
  font-size: 18px;
  line-height: 190%;
  color: #424242;
  margin-bottom: 22px;
}

.section-4-btm-txt p {
  font-weight: 400;
  font-size: 20px;
  line-height: 190%;
  color: #424242;
}

@media (max-width: 1024px) {
	.section-4-btm-txt p {
	  font-size: 18px;
	}
}

@media (max-width: 767px) {
	.section-4-btm-txt p {
	  word-break: keep-all;
	}
}

.section-4-top-txt {
  font-weight: 700;
  font-size: 46px;
  line-height: 150%;
  color: #212121;
  text-align: start;
}

@media (max-width: 1024px) {
	.section-4-top-txt {
		  text-align: center;
		  margin-bottom: 48px;
	}
}

@media (max-width: 1024px) {
	.section-4-top-txt {
	  font-size: 32px;
	}
}

.masthead-logo img {
  width: 70%;
}

@media (min-width: 768px) {
  .masthead-logo img {
    width: 400px;
  }
}
@media (min-width: 1200px) {
  .masthead-logo img {
    width: auto;
  }
  .section-2-top-txt {
    font-weight: 700;
    font-size: 46px;
    line-height: 150%;
    color: #212121;
  }

  .section-2-btm-txt-box {
    text-align: start;
  }

  .section-2-btm-txt {
/*    max-width: 435px;*/
  }

  .section-4-top-txt {
    font-weight: 700;
    font-size: 46px;
    line-height: 150%;
    color: #212121;
        text-align: start;
  }

  .section-4-btm-txt-box {
    text-align: start;
  }

  .section-4-btm-txt {
/*    max-width: 435px;*/
  }
}

.image-zoom-section {
  position: relative;
  min-height: 150vh; /* 스크롤 공간 확보 */
  background-color: #fff;
}

.image-zoom-container {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.image-zoom {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.1s ease-out;
  will-change: transform, width, height;
}

.image-zoom-mo {
  width: 100%;
}

.value-item {
  margin-bottom: 60px;
}

.value-item:last-child {
  margin-bottom: 0;
}

.value-label {
  display: block;
  font-weight: 500;
  font-size: 14px;
  line-height: 150%;
  color: #FD6C01;
  margin-bottom: 4px;
}

.value-title {
  font-weight: 700;
  font-size: 22px;
  line-height: 150%;
  color: #212121;
  margin-bottom: 16px;
}

@media (max-width: 767px) {
	.value-title {
	  font-size: 20px;
	}
}


.value-desc {
  font-weight: 400;
  font-size: 16px;
  line-height: 180%;
  color: #616161;
  margin: 0;
}

.section-5 {
  position: relative;
  width: 100%;
  overflow: hidden;
  background-color: #fff;
}

.section-5-image-container {
  width: 100%;
  display: flex;
  justify-content: flex-start;
}

.section-5-image {
  width: 100%;
  height: auto;
  display: block;
  will-change: transform;
  transform: translateX(160px);
}

.section-3-pc_only {
  display: none;
}

.section-3-mo_only {
  display: block;
}

@media (min-width: 1024px) {
  .section-3-pc_only {
    display: block;
  }

  .section-3-mo_only {
    display: none;
  }
}

@media (max-width: 1024px) {
  .section-6 .py-18 {
/*    padding: 0 !important;*/
  }
}


.section-7 {
	position: relative;
	background-image: url('https://cdn.weaversmind.com/nordkin/main/section7_bg.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	padding: 150px 0;
	min-height: 567px;
	display: flex;
	align-items: center;
}

.section-7-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.4);
	z-index: 1;
}

.section-7 .container {
	position: relative;
	z-index: 2;
}

.section-7-subtitle {
	font-weight: 400;
	font-size: 14px;
	line-height: 160%;
	color: #9E9E9E;
	margin-bottom: 6px;
}

.section-7-title {
	font-weight: 700;
	font-size: 40px;
	line-height: 150%;
	color: #FFFFFF;
	margin-bottom: 17px;
}

.section-7-desc {
	font-weight: 400;
	font-size: 20px;
	line-height: 190%;
	color: #dadada;
	margin-bottom: 39px;
}

.btn-contact {
	display: inline-block;
	padding: 20px 20px;
	background-color: #FFFFFF;
	font-weight: 700;
	font-size: 20px;
	border-radius: 8px;
	line-height: 150%;
	color: #FD6C01;
	text-decoration: none;
	max-width: 290px;
	width: 100%;
}

.btn-contact:hover {
	background-color: #E5612F;
	color: #FFFFFF;
}

@media (max-width: 991px) {
	.section-7 {
		padding: 80px 0;
		min-height: 500px;
	}

	.section-7-title {
		font-size: 32px;
		margin-bottom: 20px;
        word-break: keep-all;
	}

	.section-7-desc {
		font-size: 18px;
		margin-bottom: 32px;
	}
}


 .section-6 {
  background-color: #fff;
  padding: 120px 0;
}

.section-6-title {
  font-weight: 700;
  font-size: 46px;
  line-height: 150%;
  color: #212121;
  margin-bottom: 0;
}

.section-6-desc {
  font-weight: 400;
  font-size: 20px;
  line-height: 180%;
  color: #616161;
  margin: 0;
  word-break: keep-all;
}

@media (max-width: 1024px) {
  .section-6-title {
    font-size: 32px;
    margin-bottom: 48px;
  }
  
  .section-6-desc {
    font-size: 18px;
	word-break: keep-all;
  }

  .section-6 .row {
    text-align: center;
  }
}