/* 기본 리셋 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  font-family: 'Pretendard', sans-serif;
  /* 실제 환경에 맞게 임포트 필요 */
  color: #0D0D0D;
  line-height: 1.4;
  overflow-x: hidden;
}

.wrapper {
  background-color: #0D0D0D;
  /* 필요에 따라 조정 가능 */
}

/* 컨테이너: 최대 너비 1620px로 중앙 정렬 */
.container {
  max-width: 1620px;
  margin: 0 auto;
  padding: 0 20px;
}

.main-subtitle {
  font-size: 16px;
  margin-bottom: 10px;
  color: #fff;
}

.red-box {
  background-color: #FF1000;
  display: inline-block;
  padding: 5px 30px;
  color: #fff;
  font-size: 16px;
  margin-bottom: 10px;
}

/* 헤더 (높이 145px) */
/* ----- 변경/추가된 부분 ----- */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 145px;
  background: transparent;
  /* ✓ 변경: 배경을 투명하게 처리 */
  display: flex;
  align-items: center;
  z-index: 3;
  /* ✓ 추가: 다른 요소보다 위에 있도록 z-index 지정 */
}


/* ----------------------------- */

.header-inner {
  width: 100%;
  display: flex;
  align-items: center;
}

.logoimage {
  width: 50px;
  margin-right: 20px;
}

.logoimage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.logo {
  color: #f9f9f9;
  font-size: 24px;
  font-weight: 300;
  letter-spacing: 0.8px;
}

/* Hero Section: 배경 이미지 전체 화면(100vw) 커버, 높이 70vh */
.hero-section {
  position: relative;
  width: 100vw;
  height: 100vh;
  /* background: url('../image/1.jpeg') no-repeat center center; */
  background-size: cover;
}

/* 추가: 이미지 스타일 */
/* .hero-section .hero-bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
} */
.hero-section .hero-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* 가로세로 비율 유지하며 영역 가득 채우기 */
  z-index: 0;          /* dim-overlay(1), hero-text-container(2)보다 뒤에 */
  pointer-events: none; /* 비디오가 클릭 이벤트를 막지 않도록 */
}


/* .hero-section {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.hero-section .video-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
}

.hero-section .video-bg iframe {
  position: absolute;
  top: 50%; 
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  border: none;
  pointer-events: none; /* 마우스 클릭 투명 처리 */


/* ✓ 추가: 새로운 dim 오버레이 div. 백그라운드 이미지 위에 어둡게 덮기 */
.dim-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 50), rgba(13, 13, 13, 0.0));
  z-index: 1;
}

/* hero-text-container는 dim-overlay보다 위에 나타나야 함 */
.hero-text-container {
  position: absolute;
  top: 30%;
  /* 필요시 위치 조정 */
  left: 50%;
  transform: translate(-50%, 0%);
  text-align: center;
  color: #fff;
  z-index: 2;
  width: 80%;
  /* ✓ 추가: overlay 위에 표시 */
}

/* 첫 번째 텍스트(Subtitle)에 빨간색 박스 배경 */
.red-box {
  background-color: #FF1000;
  display: inline-block;
  padding: 5px 30px 5px 30px;
}

/* HWAIER 타이틀: hero-section 하단에 걸쳐 위치 */
.hwaier-title {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 60%);
  font-size: 259px;
  font-weight: 600;
  margin: 0;
  color: #FF1000;
  z-index: 5;
  letter-spacing: 10px;
}

/* 콘텐츠 Section: 높이 20vh, 중앙 정렬 */
.content-section {
  width: 100%;
  height: 20vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0D0D0D;
  /* 필요에 따라 조정 가능 */
}

.content-inner {
  text-align: center;
}

/* 텍스트 크기 지정 요구사항 */
/* - 첫 번째: subtitle (16px) */
/* - 두 번째: title (48px) */
/* - 세 번째: body-text (24px) */
/* .main-subtitle {
  font-size: 12px;
  margin-bottom: 10px;
  color: #fff;
} */

.main-title {
  font-size: 48px;
  margin-bottom: 10px;
  font-weight: 500;
  color: #fff;
}

.main-text {
  font-size: 20px;
  line-height: 1.5;
  font-weight: 300;
  color: #f5f5f5;
}

/*각 section inner 영역 */

.three-main-subtitle {
  font-size: 12px;
  margin-bottom: 10px;
  color: #f5f5f5;
}

/*three-box-section 영역 */
.body-title {
  font-size: 30px;
  line-height: 1.5;
  font-weight: 400;
  color: #fff;
}

.three-box-section .wrapper {
  background-color: #0D0D0D;
  /* 섹션 전체 배경(원하시면 #131722로 변경 가능) */
  padding: 60px 0;
}

/* 섹션 내부 텍스트 색상 화이트로 지정 */
.three-box-section .container {
  max-width: 1620px;
  /* 질문에서 주신 컨테이너 설정 */
  margin: 0 auto;
  padding: 0 20px;
  color: #fff;
}

/* 붉은색 박스(subtitle) */
/* .three-box-section .red-box {
  background-color: #FF1000;
  display: inline-block;
  padding: 5px 30px;
  color: #fff;
  font-size: 16px;
  margin-bottom: 10px;
} */

/* 큰 제목(body-title) 아래쪽 간격 */
.three-box-section .section-heading {
  margin: 10px 0 25px;
}

.three-box-section .section-box {
  margin: 0px 0 25px;
}


/* 3개 박스를 가로로 나열 */
.three-box-section .three-boxes {
  display: flex;
  gap: 30px;
  /* 박스 간 간격 30px */
  justify-content: space-between;
  /* 가로로 균등 분배 */
}

/* 각 박스 스타일 지정 */
.three-box-section .box {
  flex: 1;
  /* 너비 균일 분배 */
  background-color: #131722;
  padding: 20px;
  border-radius: 4px;
  /* 모서리 살짝 둥글게(선택사항) */
}

/* 박스 내 큰 제목 (기존 .main-title 사용 시) */
.three-box-section .box-title {
  margin-bottom: 15px;
  /* 질문에서 주신 .main-title가 font-size:48px인데,
     박스 내에서는 너무 클 수 있으므로 필요하면 override 가능합니다.
     예) font-size: 24px; */
}

/* 박스 내 본문 텍스트 (기존 .main-text 사용 시) */
.three-box-section .main-text {
  line-height: 1.5;
  /* font-size: 24px; (질문에서 주신 설정과 동일)
     필요 시 조정 가능 */
}

/*image-text-section 영역 */
/* 섹션 전체 컨테이너 배경, 여백, 텍스트 색상 */
/* 상단 영역(top-row): 좌우 2개 div */
.image-text-section .top-row {
  display: flex;
  align-items: center;
  gap: 30px;
  /* 왼쪽, 오른쪽 칸 사이 간격 */
  margin-bottom: 40px;
  /* 아래 3박스와의 간격 */
}


/* 왼쪽 이미지 영역 */
.image-text-section .left-image {
  flex: 1;
  /* 가로 공간 동일 분배 */
}

.image-text-section .left-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* 오른쪽 텍스트 영역 */
.image-body-title {
  font-size: 30px;
  line-height: 1.5;
  font-weight: 400;
  color: #fff;
  margin-bottom: 20px;
}

.image-text-section .right-text {
  flex: 1;
  /* 가로 공간 동일 분배 */
}

/* 하단 영역(bottom-row): 3개의 박스를 가로 배치 */
.image-text-section .bottom-row {
  display: flex;
  gap: 30px;
  /* 박스 사이 간격 */
}

/* 박스 스타일 */
.image-text-section .box {
  flex: 1;
  background-color: #131722;
  /* 어두운 색상 배경 */
  padding: 20px;
  border-radius: 4px;
  /* 모서리 라운딩 (선택사항) */
}

.image-main-text {
  font-size: 24px;
  line-height: 1.5;
  font-weight: 500;
  color: #fff;
  margin-bottom: 10px;
}

/* 전체 영역 */
.purchase-flow-section {
  background-color: #0D0D0D;
  color: #fff;
  padding: 80px 0;
}

.purchase-flow-section .container {
  max-width: 1620px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 중앙 텍스트 */
.purchase-flow-section .centered-text {
  text-align: center;
  margin-bottom: 60px;
}

/* .purchase-flow-section .red-box {
  display: inline-block;
  background-color: #FF1000;
  color: #fff;
  padding: 5px 30px;
  font-size: 16px;
  margin-bottom: 10px;
} */

.purchase-flow-section .main-text {
  font-size: 24px;
  line-height: 1.5;
  font-weight: 400;
  color: #fff;
}

/* 플로우 박스 컨테이너 */
.flow-boxes {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 30px;
  margin-top: 100px;
}

/* 플로우 박스 스타일 - 전체 동일 크기 */
.flow-boxes .box {
  flex: 1 1 calc((100% - 60px) / 3);
  /* gap 30px x 2 */
  background-color: #131722;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 40px;
  box-sizing: border-box;
  height: 250px;
  text-align: left;
}

/* 이미지 박스도 동일하게 (크기 맞춤) */
.flow-boxes .box-3,
.flow-boxes .box-4 {
  padding: 0;
}

.flow-boxes .box .img-wrapper {
  width: 100%;
  height: 100%;
}

.flow-boxes .box .flow-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.num-wrapper {
  width: 60px;
  height: 60px;
  margin-bottom: 20px;
}


/* step image */
.flow-boxes .box .step-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.flow-boxes .box .step-desc {
  margin-bottom: 5px;
}

.flow-boxes .box .step-detail {
  font-size: 20px;
  color: #dcdcdc;
  line-height: 1.5;
}

/* as 영역 */
.section-as {
  background-color: #0D0D0D;
  color: #fff;
  padding: 80px 0;
}

/* 상단 타이틀 영역 */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}

/* .section-header .red-box {
  background-color: #FF1000;
  display: inline-block;
  padding: 5px 30px;
  font-size: 16px;
  margin-bottom: 10px;
} */

.section-header .section-title {
  font-size: 30px;
  line-height: 1.5;
  font-weight: 400;
}

.more-project-button {
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
  padding: 8px 20px;
  cursor: pointer;
  transition: background 0.3s;
}

.more-project-button:hover {
  background: #FF1000;
  border-color: #FF1000;
}

/* 본문 박스 전체 flex */
.content-boxes {
  display: flex;
  gap: 30px;
}

/* 왼쪽 큰 박스 */
.left-big-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* 왼쪽 상단 박스 */
.top-box {
  position: relative;
  flex: 1;
  overflow: hidden;
}

/* 왼쪽 하단 2개 박스 */
.bottom-boxes {
  display: flex;
  gap: 30px;
  flex: 1;
}

.bottom-box {
  position: relative;
  flex: 1;
  overflow: hidden;
}

/* 오른쪽 큰 박스 */
.right-big-box {
  position: relative;
  flex: 1;
  overflow: hidden;
}

/* 이미지 및 dim 효과 */
.box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 이미지 래퍼 */
.image-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
}

.image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}


/* 빨간 아이콘 wrapper */
.icon-wrapper {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 70px;
  height: 70px;
  z-index: 5;
}

.icon-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dim {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 50), rgba(13, 13, 13, 0.0));
  z-index: 1;
}

.as-text {
  position: absolute;
  left: 20px;
  bottom: 20px;
  z-index: 2;
  width: 70%;
}

.as-main-text {
  /* position: absolute;
  bottom: 100px;
  left: 20px; */
  /* z-index: 2; */
  font-size: 20px;
  line-height: 1.4;
}

.as-main-text-step-detail {
  /* position: absolute;
  bottom: 20px;
  left: 20px; */
  /* z-index: 2; */
  font-size: 18px;
  line-height: 1.4;
  color: #dcdcdc;
}

/* ✅ 작은 박스 전용 텍스트 */
.bottom-box-main-text {
  position: absolute;
  bottom: 60px;
  left: 20px;
  z-index: 2;
  font-size: 20px;
  line-height: 1.4;
  max-width: 80%;
}

.bottom-box-step-detail {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 2;
  font-size: 16px;
  line-height: 1.4;
  max-width: 80%;
}

/* ✅ 태블릿 대응 */
/* @media (max-width: 992px) {
  .bottom-box-main-text {
    bottom: 50px;
    font-size: 16px;
    max-width: 85%;
  }

  .bottom-box-step-detail {
    bottom: 15px;
    font-size: 14px;
    max-width: 85%;
  }
} */

/* product */
.product-showcase-section .wrapper {
  background-color: #0D0D0D;
  padding: 80px 0;
}

.product-showcase-section .centered-text {
  margin-bottom: 80px;
  text-align: center;
}

.product-showcase-section .product-boxes {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.product-showcase-section .box {
  flex: 1 1 calc((100% - 60px) / 3);
  display: flex;
  flex-direction: column;
  background-color: #0D0D0D;
}

/* ✅ 비율 유지하도록 수정 */
.product-showcase-section .img-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2;
  /* ✅ 비율 유지 (추천) */
  overflow: hidden;
  flex-shrink: 0;
}

.product-showcase-section .img-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-showcase-section .dim {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgba(0, 0, 0, 50), rgba(13, 13, 13, 0.0));
  z-index: 1;
}

/* ✅ box-bottom */
/* .product-showcase-section .box-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px;
  color: #fff;
  position: relative;
  z-index: 2;
  background: transparent;
} */
.product-showcase-section .box-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  /* height: 100px; */
  padding: 20px 20px 10px 20px;
  color: #fff;
  position: absolute;
  bottom: 20px;
  z-index: 2;
  background: transparent;
}

.product-showcase-section .text-content {
  display: flex;
  flex-direction: column;
  color: #fff;
  /* max-width: calc(100% - 60px); */
  width: 70%;
}

.product-showcase-section .pr-main-text {
  font-size: 20px;
  line-height: 1.4;
  margin-bottom: 5px;
  width: max-content;
}

.product-showcase-section .pr-main-text-step-detail {
  font-size: 18px;
  line-height: 1.4;
  color: #dcdcdc;
  height: 50px;
}

/* .pr-icon-wrapper {
  right: 20px;
  width: 50px;
  height: 50px;
  z-index: 5;
} */

.product-showcase-section .pr-icon-wrapper {
  width: 80px;
  height: 50px;
  flex-shrink: 0;
  z-index: 5;
}

.product-showcase-section .pr-icon-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* .detail-link 스타일 */
.detail-link {
  display: inline-block;
  text-decoration: none;       /* 밑줄 제거 */
  color: #dcdcdc;                 /* 원래 텍스트 색 */
  cursor: pointer;             /* 마우스 커서 변경 */
  transition: color 0.2s ease; /* 부드러운 색 변화 */
  font-size: 16px;
}

/* hover 시 효과 */
.detail-link:hover {
  color: #FF1000;              /* 강조 색으로 변경 */
  /* background-color: rgba(255,16,0,0.1);  // 필요시 배경 살짝 추가 */
}

/* Swiper 기본 스타일 덮어쓰기 & 이미지 꽉 채우기 */
.my-swiper {
  width: 100%;
  padding: 20px 0;
}
.my-swiper .swiper-slide {
  /* slide 사이 간격을 CSS로 제어하려면 아래 margin 조정 */
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px 0;
}
.my-swiper .swiper-slide img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

/* 네비게이션 버튼 위치 조정 (필요시) */
.my-swiper .swiper-button-prev,
.my-swiper .swiper-button-next {
  color: #fff;
  /* 반투명 배경 */
  background: rgba(0, 0, 0, 0.3);
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
}
.my-swiper .swiper-button-prev:hover,
.my-swiper .swiper-button-next:hover {
  background: rgba(255, 16, 0, 0.8);
}

/* 페이지네이션 불투명도 조절 */
.my-swiper .swiper-pagination-bullet {
  opacity: 0.5;
}
.my-swiper .swiper-pagination-bullet-active {
  opacity: 1;
}


.site-notice-section .section-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 120px;
  flex-direction: column;
  text-align: center;
}

.site-notice-section .section-title {
  font-size: 32px;
  color: #fff;
}
.site-notice-section .more-project-button {
  background: transparent;
  border: 1px solid #555;
  color: #fff;
  background-color: #333;
  padding: 40px 60px;
  cursor: pointer;
  transition: background 0.3s ease;
  margin-top: 20px;
}
.site-notice-section .more-project-button:hover {
  background: #FF1000;
  border-color: #FF1000;
}

.site-notice-section .header-button {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}



/* 8) 제목/버튼 영역 */
.site-example-section .section-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 40px;
  flex-direction: column;
  text-align: center;
}
.site-example-section .section-title {
  font-size: 32px;
  color: #fff;
}
.site-example-section .more-project-button {
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
  padding: 8px 20px;
  cursor: pointer;
  transition: background 0.3s ease;
  margin-top: 20px;
}
.site-example-section .more-project-button:hover {
  background: #FF1000;
  border-color: #FF1000;
}



/* Footer 스타일 */
.site-footer {
  background-color: #0D111D;
  /* 약간 밝은 남색톤 */
  padding: 40px 0;
  color: #ddd;
  font-size: 14px;
  font-weight: 300;
}

.site-footer .footer-line {
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  /* 얇은 선 */
  margin-bottom: 15px;
}

.site-footer .footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  /* 줄바꿈 대응 */
}

.site-footer .footer-content p {
  margin: 0;
  line-height: 1.5;
  white-space: wrap;
}

/*  게시판 조정 */
.iframe-outer-wrapper {
  background-color: #0D0D0D;         
  padding: 50px 20px;               
  height: 100%;
}

.iframe-inner-wrapper {
    height: 100%;
  max-width: 1620px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  padding: 20px 20px;
  background-color: #0D0D0D;    

}

iframe{
  overflow: hidden;
  scrollbar-width: none;
}

iframe::-webkit-scrollbar{
  display: none;
}

.iframe-outer-wrapper .notice-title{
  font-size: 32px;
  color: #fff;
  text-align: center;
}
/*  */

/* ---------- max-width: 1200px ---------- */
@media (max-width: 1200px) {
  .hwaier-title {
    font-size: 200px;
  }

  .main-title {
    font-size: 40px;
  }

  .flow-boxes .box {
    flex: 1 1 calc((100% - 30px) / 2);
    /* 2단 */
  }
}

/* ---------- max-width: 1150px ---------- */
@media (max-width: 1150px) {
  .site-example-section .slide {
    width: calc(33.33% - 20px);
    /* 태블릿: 3개 */
  }

  .site-example-section .section-header {
    text-align: center;
  }

  .product-showcase-section .product-boxes {
    flex-direction: column;
  }

  .product-showcase-section .box {
    width: 100%;
  }

  .three-box-section .three-boxes {
    flex-direction: column
  }

  .site-header {
    height: 100px;
  }
  .logo{
    font-size: 20px;
  }
  .image-body-title{
    font-size: 25px;
  }
  .iframe-outer-wrapper .notice-title{
       font-size: 25px;
  }
}

/* ---------- max-width: 992px ---------- */
@media (max-width: 992px) {

  .content-boxes,
  .left-big-box,
  .bottom-boxes {
    flex-direction: column;
  }

  .section-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .more-project-button {
    margin-top: 20px;
  }

  .as-main-text {
    font-size: 20px;
  }

  .as-main-text-step-detail {
    font-size: 16px;
  }

  .site-header {
    height: 80px;
    margin-top: 10px;
  }
}

/* ---------- max-width: 900px ---------- */
@media (max-width: 900px) {
  .hwaier-title {
    font-size: 150px;
  }

  .hero-section {
    height: 60vh;
  }

  .main-title {
    font-size: 25px;
  }

  .main-text {
    font-size: 18px;
  }
  .purchase-flow-section .main-text{
    font-size: 20px;
  }
  .flow-boxes .box .step-detail{
    font-size: 16px;
  }
  .logo{
    font-size: 18px;
  }
}

/* ---------- max-width: 772px ---------- */
@media (max-width: 772px) {
  .more-project-button {
    padding: 4px 12px;
    font-size: 14px;
  }

  .as-main-text {
    font-size: 18px;
    /* (원본 코드에 bottom 속성이 있었으면 여기에 포함) */
  }

  .as-main-text-step-detail {
    font-size: 14px;
    /* (원본 코드에 bottom 속성이 있었으면 여기에 포함) */
  }

  .bottom-boxes .as-main-text {
    bottom: 50px;
    font-size: 14px;
    max-width: 85%;
  }

  .bottom-boxes .as-main-text-step-detail {
    bottom: 15px;
    font-size: 12px;
    max-width: 85%;
  }

  .icon-wrapper {
    width: 50px;
    height: 50px;
  }

  .product-showcase-section .icon-wrapper {
    width: 40px;
    height: 40px;
  }

  .product-showcase-section .box-bottom {
    padding: 15px 15px 10px 15px;
  }

  .site-header {
    height: 70px;
    margin-top: 10px;
  }
}

/* ---------- max-width: 768px ---------- */
@media (max-width: 768px) {
  .hwaier-title {
    font-size: 18vw;
  }

  .main-subtitle,
  .red-box {
    font-size: 12px;
  }

  .hero-section {
    height: 50vh;
  }
  .logoimage {
    width: 40px;
    margin-right: 10px;
  }

  .body-title {
    font-size: 20px;
  }
  .image-text-section .top-row,
  .image-text-section .bottom-row {
    flex-direction: column;
  }

  .purchase-flow-section .body-title {
    font-size: 20px;
  }

  .purchase-flow-section .main-text {
    font-size: 18px;
  }

  .section-header .section-title{
    font-size: 20px;
  }
   .iframe-outer-wrapper .notice-title{
      font-size: 20px;
  }

  .image-body-title{
    font-size: 20px;
  }

  .site-example-section .section-title{
    font-size: 20px;
  }

  .flow-boxes .box {
    flex: 1 1 100%;
  }

  .as-main-text {
    font-size: 16px;
  }

  .as-main-text-step-detail {
    font-size: 14px;
  }

  .site-example-section .slide {
    width: 100%;
  }
  .num-wrapper{
    width: 50px;
    height: 50px;
  }
}

/* ---------- max-width: 500px ---------- */
@media (max-width: 500px) {
  .logo{
    font-size: 16px;
  }
  .site-footer {
    font-size: 14px;
  }

  .main-title {
    font-size: 20px;
  }

  .main-text {
    font-size: 14px;
  }

  .main-subtitle,
  .red-box {
    font-size: 12px;
  }

  .product-showcase-section .pr-main-text {
    font-size: 18px;
    width: 60%;
  }

  .product-showcase-section .pr-main-text-step-detail {
    font-size: 16px;
    width: 80%;
  }
  .icon-wrapper {
    width: 40px;
    height: 40px;
  }

  .product-showcase-section .icon-wrapper {
    width: 15px;
    height: 15px;
  }

  .product-showcase-section .box-bottom {
    padding: 5px;
  }

  .site-header {
    height: 50px;
    margin-top: 10px;
  }
  .detail-link{
    font-size: 12px;
  }
  .num-wrapper{
    width: 40px;
    height: 40px;
  }
}


@media (max-width: 350px) {
  .product-showcase-section .pr-main-text-step-detail {
    font-size: 14px;
    width: 80%;
  }

  .purchase-flow-section .main-text{
    font-size: 18px;
  }
  .flow-boxes .box .step-detail{
    font-size: 14px;
  }
  .icon-wrapper {
    width: 30px;
    height: 30px;
  }
}