/* 헤더 */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
  padding: 9px 20%;
  border-bottom: 1px solid #dfdfdf;

  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: white;
}

/* 헤더 이미지 */
.headerImg {
  /* 30% */
  width: 14rem;
}

/* 헤더 로그인 */
.loginBtn {
  background-color: #3692ff;
  color: white;
  border-radius: 8px;
  padding: 12px 23px;
  text-align: center;
  align-content: center;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.6rem;
  width: 128px;
  height: 48px;
  white-space: nowrap;
}

/* 상단 배너 */
.contents {
  display: flex;
  flex-direction: column;
  justify-content: end;
  align-items: center;
  width: 100%;
  height: 54rem;
  background-color: #cfe5ff;
}

/* 상단/하단 배너 요소의 박스요소 스타일 적용  */
.contents .content {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

/* content > h2, a 태그 */
.contentText {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 35.7rem;
  height: 26rem;
}

/* 상단/하단 배너 요소의 박스 안 h태그 스타일 적용 */
.contentTitle {
  font-size: 4rem;
  font-weight: 7rem;
  line-height: 140%;
  color: var(--gray700);
  margin-top: 70px;
}

.contentTitle span {
  display: block;
}

/* 배너 요소 안 '구경하러 가기' 버튼 스타일 적용 */
.contentBtn {
  display: flex;
  justify-content: center;
  align-items: center;

  width: 35.7rem;
  height: 5.6rem;

  background-color: var(--blue);
  color: var(--white);
  border-radius: 4rem;

  font-size: 2rem;
  font-weight: 60rem;
  text-decoration: none;
}

/* 배너(contents) 안의 이미지 요소 크기 적용 */
.contentImg {
  width: 74.6rem;
  height: 34rem;
}

/* main 컨텐츠 Display 적용 */
.mainContents {
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* main 요소 안 각 Section 요소  */
.mainContent,
.mainContent_even {
  padding: 5% 30%;
  gap: 5%;
  background-color: #fcfcfc;
  width: 100%;

  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 12px;
}

.mainContent_even {
  flex-direction: row-reverse;
}

/* main 컨텐츠 이미지 요소 크기 적용 */
.mainContentImg {
  width: 50%;
  height: auto;
  object-fit: contain;
}

.imageText {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  flex-wrap: nowrap;
}

/* mainContent 내부의 글자 요소 스타일 적용 */
.imageText h4 {
  color: #3692ff;
  font-weight: 700;
  font-size: 1.125vw;
}

.imageText h2 {
  color: #374151;
  font-weight: 700;
  font-size: 2vw;
  letter-spacing: 2%;
}

.imageText p {
  color: #374151;
  font-weight: 500;
  font-size: 1.5vw;
}

/* footer */
footer {
  background-color: #111827;
  display: flex;
  padding: 2rem 5%;
}

/* footer안의 내부 요소를 감싼 div 스타일 적용 */
.footerContents {
  display: flex;
  justify-content: space-between;
  width: 100%;
  flex-wrap: wrap;
}

/* footer 좌측 content   */
.footerContents span {
  font-weight: 400;
  font-size: 1rem;
  color: #9ca3af;
}

/* footer 중앙 content */
.footerPolicy {
  display: flex;
  gap: 30px;
}

.footerPolicy a {
  font-weight: 400;
  font-size: 1rem;
  color: #9ca3af;
  text-decoration: none;
}

/* footer 우측 content */
.footerSns {
  display: flex;
  gap: 12px;
}

.footerSns a {
  width: 20px;
  height: 20px;
  text-decoration: none;
}

/* 태블릿 사이즈 반응형 구현 */
/* 아이패드 에어를 기준으로 구현하였습니다. (820 x 1180) */
@media (max-width: 1199px) {
  .header {
    padding: 0 24px;
  }

  .contents {
    width: 100%;
    height: 771px;
  }

  .content {
    flex-direction: column;
  }

  .contentText {
    display: flex;
    width: 51.2rem;
    gap: 24px;
  }

  .contentBtn {
    display: flex;
    padding: 16px 124px;
    gap: 10px;
  }

  .contentTitle span {
    display: inline;
  }

  /* 구경하러가기 버튼 감싸는 요소 추가 */
  .contentBtn-container {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .mainContents {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5.2rem;
    margin-top: 2.4rem;
    margin-bottom: 5.4rem;
  }

  .mainContent,
  .mainContent_even {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1199px;
    height: auto;
    padding: 3rem 5%;
  }

  .mainContent_even {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }

  .mainContent_even .imageText {
    text-align: end;
  }

  .mainContentImg {
    width: 100%;
    max-width: 696px;
    height: auto;
    margin-bottom: 24px;
  }

  .imageText {
    width: 100%;
    max-width: 696px;
    gap: 24px;
  }

  .imageText h4 {
    font-size: 1.4rem;
  }

  .imageText h2 {
    font-size: 2.4rem;
  }

  /* 인기 상품을 확인해보세요, 구매를 원하는 상품을 검색하세요, 판매를 원하는 상품을 등록하세요의 줄바꿈이 되지 않아 강제 */
  h2 br {
    display: none;
  }

  .imageText p {
    font-size: 1.6rem;
  }

  .footerContents {
    padding: 32px 104px 64px 104px;
    max-height: 160px;
  }
}

/* 모바일 반응형 구현 */
/* iPhone 12 Pro를 기준으로 구현하였습니다. (390 x 844) */
@media (max-width: 767px) {
  html,
  body {
    width: 100%;
    overflow-x: hidden;
  }

  .header {
    padding: 0 16px;
  }

  .contentImg {
    width: 100%;
    height: auto;
  }

  .contents {
    width: 100%;
    height: 540px;
  }

  .contentTitle {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 3.2rem;
    font-weight: 700;
  }

  .mainContents {
    width: 100%;
    gap: 40px;

    display: flex;
  }

  .mainContent,
  .mainContent_even {
    width: 100%;
  }

  .imageText {
    gap: 16px;
  }

  .footerContents {
    position: relative; /* 기준이 되는 요소 */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 2rem 1rem;
  }

  .footerPolicy {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    width: 181.11px;
  }

  .footerPolicy a {
    font-size: 1.6rem;
    font-family: Arial;
  }

  .footerSns {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .footerSns a img {
    width: 20px;
    height: 20px;
  }

  .footerContents span {
    position: absolute;
    left: 10px;
    top: 60px;
    font-size: 1.6rem;
  }
}