/* main.module.css */

/* 전체 페이지에 대한 기본 스타일 */
.OPmartContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-style: groove;
  border-width: medium 5px;
  background-color: #ffffff; /* 배경색 */
  padding: 0 1rem;
  width: 60vw; /* 뷰포트 전체 너비를 사용 */
  margin: 0 auto;
  text-align: left;
  box-sizing: border-box;
}

.OPmartHeadline {
  width: 95%;
  font-size: 2.5rem;
  color: #333;
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-weight: 700;
  text-align: center;
}

.OPmartSubScript {
  width: 75%;
  font-size: 1rem;
  color: #000000;
  margin-bottom: 1rem;
  font-weight: 700;
}

.OPmartMainImageContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background-color: #fff;
  width: 90%;
}
.OPmartMainImage {
  width: 60%;
  aspect-ratio: 16 / 9; /* 16:9 비율 */
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 1rem;
  height: auto; /* 세로 크기 자동 조정 */
}

.OPmartSubTitle {
  font-size: 1.5rem;
  color: #152a76;
  margin-bottom: 1rem;
  font-weight: 700;
  text-align: left; /* 왼쪽 정렬 */
  display: block; /* 블록 요소로 설정 */
}

.OPmartHotTitle {
  font-size: 1.5rem;
  color: #152a76;
  margin-bottom: 1rem;
  font-weight: 700;
  text-align: left; /* 왼쪽 정렬 */
  display: block; /* 블록 요소로 설정 */
}

.OPmartParagraph {
  width: 70%;
  font-size: 1rem;
  color: #666;
  margin-bottom: 2rem;
  font-weight: 400;
}

@media (max-width: 1500px) {
  .OPmartContainer {
    width: 65vw; /* 뷰포트 전체 너비를 사용 */
  }
  .OPmartSubScript {
    width: 100%;
  }
  .OPmartParagraph {
    width: 100%;
  }
}
/* 추가적인 스타일을 원하시면 여기에 추가 */
@media (max-width: 1336px) {
  .OPmartContainer {
    width: 70vw; /* 뷰포트 전체 너비를 사용 */
  }
  .OPmartParagraph {
    width: 60vw;
  }
}

@media (max-width: 768px) {
  .OPmartContainer {
    width: 90vw; /* 뷰포트 전체 너비를 사용 */
  }
  .OPmartHeadline {
    font-size: 2rem;
    width: 99vw;
  }
  .OPmartMainImage {
    width: 80%;
  }
}
@media (max-width: 670px) {
  .OPmartHeadline {
    font-size: 1.4rem;
  }
  .OPmartParagraph {
    width: 80vw;
  }
}

@media (max-width: 550px) {
  .OPmartHeadline {
    font-size: 1.2rem;
  }
  .OPmartParagraph {
    font-size: 1.1rem;
  }
  .OPmartMainImage {
    width: 90%;
  }
}

@media (max-width: 600px) {
  .OPmartContainer {
    width: 95vw; /* 뷰포트 전체 너비를 사용 */
  }
}
@media (max-width: 480px) {
  .OPmartContainer {
    width: 100vw; /* 뷰포트 전체 너비를 사용 */
  }

  .OPmartHeadline {
    font-size: 1.1rem;
  }
  .OPmartSubTitle {
    width: 90vw;
  }
  .OPmartHotTitle {
    width: 90vw;
    align-items: center;
  }
  .OPmartParagraph {
    width: 90vw;
  }
  .OPmartMainImage {
    width: 100%;
  }
}

@media (max-width: 420px) {
  .OPmartHeadline {
    font-size: 1rem;
  }
  .OPmartSubTitle {
    font-size: 1.3rem;
  }
}

@media (max-width: 400px) {
  .OPmartHeadline {
    font-size: 0.95rem;
  }
  .OPmartParagraph {
    width: 90vw;
  }
}

@media (max-width: 350px) {
  .OPmartHeadline {
    font-size: 0.9rem;
    font-weight: 700;
  }
  .OPmartSubTitle {
    font-size: 1.1rem; /* 블록 요소로 설정 */
  }
  .OPmartHotTitle {
    font-size: 1.1rem; /* 블록 요소로 설정 */
  }

  .OPmartParagraph {
    font-size: 0.9rem;
  }
}

@media (max-width: 300px) {
  .OPmartHeadline {
    font-size: 0.75rem;
    font-weight: 900;
  }
  .OPmartSubScript {
    font-size: 0.75rem; /* 블록 요소로 설정 */
  }

  .OPmartParagraph {
    font-size: 0.7rem;
  }
}

@media (max-width: 250px) {
  .OPmartHeadline {
    font-size: 0.6rem;
  }
  .OPmartSubScript {
    font-size: 0.63rem; /* 블록 요소로 설정 */
  }
  .OPmartParagraph {
    font-size: 0.6rem;
  }
}