@charset "utf-8";

/* 메인 페이지 */

/* 비주얼 배너 */
/* [3차 추가] 배너마다 배경색을 다르게 (PC·모바일 공통)
   인디케이터(.visual__page)가 .slide 밖에 있어 .slide 에 배경을 주면 그 줄만 색이 남는다
   -> .visual 자체 색을 바꾸고, 어느 배너인지는 js 가 bg0/bg1 클래스로 알려준다 */
.visual { background: #F7F5EF; position: relative; overflow: hidden; }   /* 1번 배너 */
.visual.bg1 { background: #EFF7F6; }                                     /* 2번 배너 */
.visual .slide { display: none; cursor: pointer; }
.visual .slide.on { display: block; }
.visual .inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; min-height: 420px; padding-top: 40px; padding-bottom: 60px; }
.visual .txt h2 { font-size: 34px; font-weight: 700; color: var(--green); letter-spacing: -1px; }
.visual .txt h2 small { display: block; font-size: 19px; margin-top: 4px; }
.visual .txt h3 { margin-top: 20px; font-size: 16px; font-weight: 500; color: #333; line-height: 1.7; }
.visual .more { display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; padding: 11px 24px; background: var(--green); color: #fff; font-size: 14px; font-weight: 600; border-radius: 22px; }
.visual .img img { width: 340px; height: auto; }
.visual__page { display: flex; justify-content: center; gap: 8px; padding-bottom: 24px; }
.visual__page button { width: 10px; height: 10px; border-radius: 5px; background: #cfcfcf; }
.visual__page button.on { width: 26px; background: var(--green); }

/* 상담 접수 */
.cs { padding: 60px 0 70px; }

/* 추천 상품 */
.product { background: var(--mint-bg); padding: 56px 0 64px; }
.product .list { display: flex; flex-wrap: wrap; gap: 20px; }
.product .list > li { width: calc(33.333% - 14px); background: #fff; border: 1px solid #e6efee; border-radius: 12px; transition: border-color .2s, box-shadow .2s; }
.product .list > li:hover { border-color: var(--mint); box-shadow: 0 6px 18px rgba(0,0,0,.06); }
.product .list > li > a { display: block; padding: 24px 26px 28px; height: 100%; }
.product .cate { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #777; }
.product .cate img { width: 22px; height: 22px; }
.product .list h2 { margin: 14px 0 12px; font-size: 18px; font-weight: 700; color: var(--green); line-height: 1.4; }
.product .list p { font-size: 14px; color: #666; }

@media screen and (max-width: 1024px) {
    .visual .txt h2 { font-size: 28px; }
    .visual .img img { width: 260px; }
    .product .list > li { width: calc(50% - 10px); }
}

@media screen and (max-width: 767px) {
    .visual .inner { flex-direction: column-reverse; text-align: center; min-height: 0; padding-top: 28px; padding-bottom: 36px; gap: 20px; }
    .visual .txt h2 { font-size: 23px; }
    .visual .txt h2 small { font-size: 15px; }
    .visual .txt h3 { font-size: 14px; margin-top: 14px; }
    .visual .img img { width: 200px; }
    .cs { padding: 40px 0 46px; }
    .product { padding: 38px 0 44px; }
    .product .list { gap: 12px; }
    .product .list > li { width: 100%; }
    .product .list > li > a { padding: 18px 20px 22px; }
}