@charset "utf-8";
/**
 * sub02 전용 스타일 (sub0201 등)
 * - sub-inner-full: 화면 100% 전체 영역
 * - sub-inner-max1600: 1600px 영역 가운데
 */

/* 서브 본문 레이아웃 옵션: 100% 전체 화면 (.sub-inner 기본값 덮어씀) */
/* 내부 스크롤 방지: 문서 전체만 스크롤되도록, 뷰포트 고정 높이 해제 */
html:has(.sub-inner.sub-inner-full) {
    height: auto !important;
    min-height: 100%;
    overflow-x: hidden;
}

body:has(.sub-inner.sub-inner-full) {
    overflow: visible !important;
    min-height: 100%;
}

#wrapper:has(.sub-inner.sub-inner-full),
#container_wr:has(.sub-inner.sub-inner-full),
#container:has(.sub-inner.sub-inner-full) {
    height: auto !important;
    min-height: 0;
    overflow: visible !important;
}

/* 패딩 사용 시 내부 스크롤 발생 → 상단 간격만 margin으로 적용 */
/* overflow를 주지 않음: overflow-x: hidden만 넣어도 CSS 규칙상 overflow-y가 auto로 바뀌어 내부 스크롤 생김 */
.sub-inner.sub-inner-full {
    width: 100% !important;
    max-width: none !important;
    margin: 80px 0 0 0 !important;
    padding: 0 !important;
    box-sizing: border-box;
    min-height: 0;
}

.sub-inner.sub-inner-full #contents.sub02 {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow: visible;
}

/* PC: 모든 이미지 가로 100% (화면 전체 폭) */
.sub-inner.sub-inner-full #contents.sub02 img {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    height: auto;
    vertical-align: top;
    box-sizing: border-box;
}

/* 발생할 수 있는 문제점 섹션 (이미지 3개) */
#contents.sub02 .sub02-problem {
    padding: 0 0px 0px;
    box-sizing: border-box;
}

/* 제목·캡션: 화면에 미표시 */
#contents.sub02 .sub02-problem-tit,
#contents.sub02 .sub02-problem-caption {
    display: none !important;
}

#contents.sub02 .sub02-problem-tit {
    font-size: 24px;
    font-weight: 600;
    color: #1a1a1a;
    text-align: center;
    margin: 0 0 40px;
    letter-spacing: -0.02em;
}

#contents.sub02 .sub02-problem-list {
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}

#contents.sub02 .sub02-problem-item {
    margin-bottom: 0px;
}

#contents.sub02 .sub02-problem-item:last-child {
    margin-bottom: 0;
}

#contents.sub02 .sub02-problem-img {
    width: 100%;
    margin-bottom: 0px;
}

/* PC: 콘텐츠 이미지 가로 100% (필요 시 작게 쓰는 곳은 별도 클래스로 지정) */
#contents.sub02 .sub02-problem-img img {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    height: auto;
    margin-left: 0;
    margin-right: 0;
    box-sizing: border-box;
}

#contents.sub02 .sub02-problem-caption {
    font-size: 16px;
    color: #3e3e3e;
    margin: 0;
    padding: 12px 16px;
    background-color: #f5f5f5;
    border-radius: 4px;
}

/* sub02 CTA 버튼 공통: include(ds-sub02-cta-btn) 사용 페이지 모두 동일 크기/정렬 */
.sub02-cta {
    padding: 40px 20px 60px;
    text-align: center;
}

.sub02-cta .sub02-cta-inner {
    margin: 0;
}

.sub02-cta .sub02-cta-btn {
    display: inline-block;
    line-height: 0;
    position: relative;
    transition: transform 0.25s ease;
    padding: 0 48px 36px 0;
    box-sizing: content-box;
}

/* 모바일 전용 CTA 버튼(id 사용) 패딩 제거 */
#ds-sub02-cta-mobile-btn {
    padding: 0;
    box-sizing: border-box;
}

.sub02-cta .sub02-cta-btn:hover {
    transform: translateY(-8px);
}

.sub02-cta .sub02-cta-btn-default {
    display: block;
}

.sub02-cta .sub02-cta-btn-default img {
    display: block;
    max-width: 100%;
    height: auto;
    vertical-align: top;
}

.sub02-cta .sub02-cta-btn-over {
    position: absolute;
    right: 0;
    bottom: 0;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
    z-index: 1;
}

.sub02-cta .sub02-cta-btn:hover .sub02-cta-btn-over {
    opacity: 1;
}

.sub02-cta .sub02-cta-btn-over img {
    display: block;
    max-width: 100%;
    height: auto;
    vertical-align: top;
}

/* sub0701 전용: 버튼 영역을 상단 이미지와 275px 겹치게 (PC 기준) */
.sub02-cta.sub02-sub0701-cta {
    margin-top: -275px;
    position: relative;
    z-index: 2;
}

#contents.sub02 .sub02-pc:has(.sub02-sub0701) {
    overflow: visible;
}

/* sub0701 모바일: CTA를 두 번째 이미지 하단과 겹치게, 크기 90%, margin-top 보정 */
@media (max-width: 768px) {
    #contents.sub02 .sub02-mobile:has(.sub02-sub0701-cta) {
        overflow: visible;
    }

    .sub02-cta.sub02-sub0701-cta .sub02-cta-inner {
        transform: scale(0.9);
        transform-origin: center top;
    }

    .sub02-cta.sub02-sub0701-cta .sub02-cta-btn {
        margin: 0 auto;
        padding: 0;
    }

    /* 모바일 전용 margin-top 값 (-215px) */
    .sub02-cta.sub02-sub0701-cta {
        margin-top: -215px;
    }
}

/* sub0402 등: 레진 CTA 버튼 -300px 겹침 적용 */
.sub02-cta.sub02-cta-overlap-300 {
    margin-top: -300px;
    position: relative;
    z-index: 2;
}

/* sub0502 등: CTA 버튼 겹침 클래스 (PC에서만 -275px 적용) */
.sub02-cta.sub02-cta-overlap-200 {
    margin-top: 0;
    position: relative;
    z-index: 2;
}

@media (min-width: 769px) {
    .sub02-cta.sub02-cta-overlap-200 {
        margin-top: -275px;
    }
}

#contents.sub02 .sub02-pc:has(.sub02-cta-overlap-300) {
    overflow: visible;
}

#contents.sub02 .sub02-pc:has(.sub02-cta-overlap-200) {
    overflow: visible;
}

/* sub02-cta-overlap-300 모바일용 margin-top 보정 */
@media (max-width: 768px) {
    .sub02-cta.sub02-cta-overlap-300 {
        margin-top: -225px;
    }

    .sub02-cta.sub02-cta-overlap-200 {
        margin-top: -250px;
    }
}

/* sub0402 등 이미지 없음: 빈 공간 플레이스홀더 */
#contents.sub02 .sub02-problem-img-empty {
    min-height: 280px;
    background-color: #f9f9f9;
    display: flex;
    align-items: center;
    justify-content: center;
}

#contents.sub02 .sub02-problem-img-empty .empty-placeholder {
    display: block;
    width: 100%;
    min-height: 280px;
}

/* 서브 본문 레이아웃 옵션: 1600px 영역(가운데) */
.sub-inner.sub-inner-max1600 {
    max-width: 1600px;
    padding: 0;
}

.sub-inner.sub-inner-max1600 #contents.sub02 {
    width: 100%;
    margin: 0;
    padding: 0;
}

.sub-inner.sub-inner-max1600 #contents.sub02 img {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: top;
}

/* PC 전용 영역: 모바일에서 숨김 / 모바일: .sub-inner-full 상단 여백 40px */
@media (max-width: 768px) {
    #contents.sub02 .sub02-pc {
        display: none !important;
    }

    .sub-inner.sub-inner-full {
        margin-top: 40px !important;
    }
}

/* 980px 이하: 레이아웃이 980px로 넓어지는 현상 방지 (모바일/태블릿 최적화) */
@media (max-width: 980px) {

    .sub-inner.sub-inner-full,
    .sub-inner.sub-inner-full #contents.sub02,
    .sub-inner.sub-inner-full #contents.sub02 .sub02-problem-list {
        max-width: 100% !important;
        min-width: 0 !important;
        width: 100% !important;
        box-sizing: border-box;
    }
}

/* 모바일 전용 영역: PC에서 숨김 (추가 시 사용) */
@media (min-width: 769px) {
    #contents.sub02 .sub02-mobile {
        display: none !important;
    }
}