@charset "utf-8";

/* #contentWrap 베이스·반응형은 common.css. 소개는 풀블리드(우측 고정 슬라이더) + 상단 여백 60.
   모바일(<768)은 common(여백30·좌우패딩15) 유지 위해 ≥768만 오버라이드. */
@media (min-width: 768px) {
    #contentWrap {
        padding: 0;
    }
}

#contentWrap .sectionInner {
    padding: 0 40px;
}

#aboutBox {
    display: flex;
    width: 100%;
    margin-top: 30px;
    padding: 0px 40px;
    align-items: flex-start;
    /* sticky 작동을 위해 상단 정렬 */
}

.about {
    width: 50%;
    padding: 40px;
    background-color: #fff;
    border-radius: 30px;
    box-sizing: border-box;
}


/* 내부 콘텐츠 스타일 */
.aboutRow {
    margin-bottom: 80px;
}

.aboutRow h2 {
    font-size: 24px;
    color: #000;
    font-weight: 700;
    margin-bottom: 20px;
    word-break: keep-all;
}

.aboutRow h2 b {
    color: var(--keyColor);
    background-color: #000;
    font-weight: 700;
    padding: 0 5px;
}

.aboutRow .textBox p {
    font-size: 16px;
    line-height: 1.6;
    color: #000;
    font-weight: 400;
    margin-bottom: 20px;
    word-break: keep-all;
}

.service {
    margin-top: 30px;
}

.service .item {
    margin-bottom: 30px;
}

.service .item strong {
    display: block;
    font-size: 20px;
    margin-bottom: 5px;
    color: #000;
}

.service .item p {
    font-size: 16px;
    color: #000;
    font-weight: 400;
    word-break: keep-all;
}

.contactFrom {
    margin-top: 80px;
    padding-top: 60px;
    border-top: 1px solid #e2e2e2;
}

.contactFrom h2 {
    font-size: 28px;
    margin-bottom: 30px;
}

.contactFrom ul li {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contactFrom ul li span {
    font-size: 16px;
    color: #000;
    font-weight: 600;
}

.contactFrom ul li select {
    font-family: 'Pretendard', sans-serif;
    font-size: 16px;
    color: #212121;
    font-weight: 400;
    padding: 10px 40px 10px 15px;
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 380'%3E%3Cpath fill='%23212121' d='M256,246.5c-8.2,0-16.1-3.3-21.9-9.1L152,155.4l21.9-21.9l82.1,82.1l82.1-82.1l21.9,21.9l-82.1,82.1 C272.1,243.3,264.2,246.6,256,246.5z'/%3E%3Crect fill='%23d0d0d0' x='0' y='70' width='20' height='240'/%3E%3C/svg%3E%0A");
    background-size: 30px;
    background-position: 100% 50%;
    background-repeat: no-repeat;
    border: 1px solid #ccc;
    border-radius: 3px;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

.contactFrom ul li select::-ms-expand {
    display: none;
}

.contactFrom ul li textarea {
    width: 100%;
    min-height: 150px;
    font-family: 'Pretendard', sans-serif;
    font-size: 16px;
    color: #000;
    padding: 10px !important;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    box-shadow: none;
    resize: none;
    outline: none;
}

.contactFrom ul li input {
    width: 100%;
    height: 40px;
    padding: 0 16px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    font-size: 15px;
    color: #111827;
    outline: none;
    transition: border-color 0.2s;
}

.contactFrom ul li input:focus {
    border-color: #000;
}

.contactFrom ul li .formTel {
    display: flex;
    align-items: center;
    gap: 10px;
}

.btnSubmit {
    width: 100%;
    height: 50px;
    font-size: 16px;
    font-weight: 600;
    margin-top: 30px;
    background-color: #000;
    color: #ffffff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

/* 우측 고정 영역 (스크롤 시 고정) */
.fixArea {
    width: 50%;
    position: sticky;
    top: 60px;
    /* 헤더 아래에 딱 붙도록 수정 (JS에서 동적 보정) */
    border-radius: 30px;
    overflow: hidden;
    z-index: 10;
}

.fixArea .slider,
.fixArea .slider .slick-list,
.fixArea .slider .slick-track,
.fixArea .slider .slideItem {
    width: 100%;
    height: 100%;
}

.fixArea .slider .slideItem {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.fixArea .slick-dots {
    bottom: 20px;
}

/*
Tablet Device Less than 1023px or greater than 768px
*/
@media all and (min-width:768px) and (max-width:1023px) {
    #contentWrap .sectionInner {
        padding: 0 20px;
    }

    #aboutBox {
        padding: 0px 20px;
        flex-direction: column-reverse;
    }

    .about,
    .fixArea {
        width: 100%;
    }

    .fixArea {
        position: relative !important;
        top: 0 !important;
    }

    .fixArea .slider .slideItem {
        height: 560px !important;
    }
}

/*
Mobile Device Less than 768px
*/
@media all and (max-width:767px) {
    #aboutBox {
        padding: 0px 0px;
        flex-direction: column-reverse;
    }

    .about,
    .fixArea {
        width: 100%;
    }

    .fixArea {
        position: relative !important;
        top: 0 !important;
    }

    .fixArea .slider .slideItem {
        height: 560px !important;
    }

    #contentWrap .sectionInner {
        padding: 0 0px;
    }

    .about {
        padding: 40px 20px;
    }

    .aboutRow {
        margin-bottom: 60px;
    }

}

/* ───────────────────────────────────────────────────────────
   blade @push('styles')에서 이관 (CSS 정리) — 디자이너 시안 외 보강분
   ─────────────────────────────────────────────────────────── */

/* 문의 결과 메시지 (성공/실패) */
#aboutBox .formMsg { margin-bottom: 16px; padding: 12px 14px; border-radius: 8px; font-size: 14px; }
#aboutBox .formMsg--ok { background: #0e2e1f; color: #c8f0d9; border: 1px solid #185c3c; }
#aboutBox .formMsg--err { background: var(--pointBgColor); color: var(--pointColor); border: 1px solid var(--pointBorderColor); }

/* 개인정보 수집 동의 — 마이페이지(#mypageWrap) 체크 스타일 적용: 네이티브 input 숨김 + ::before 커스텀 박스 */
#aboutBox .checkAgree { display: inline-flex; align-items: flex-start; font-size: 14px; color: #333; cursor: pointer; line-height: 1.5; }
#aboutBox .checkAgree input[type="checkbox"] { display: none; }
#aboutBox .checkAgree > span { display: inline-flex; align-items: flex-start; cursor: pointer; }
#aboutBox .checkAgree > span::before {
    content: "";
    width: 20px;
    height: 20px;
    margin-right: 10px;
    flex: 0 0 auto;
    background-color: #fff;
    border: 1px solid #aaa;
    border-radius: 4px;
    display: inline-block;
}
#aboutBox .checkAgree input[type="checkbox"]:checked + span::before {
    background-color: #000;
    border-color: #000;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%233aff00' d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E");
    background-size: 14px auto;
    background-position: center;
    background-repeat: no-repeat;
}
#aboutBox .checkAgree u { text-decoration: underline; cursor: pointer; }

/* 슬라이더 닷 — 이 페이지만 흰색 (common.css가 background-color로 그림). active는 keyColor */
#aboutBox .slick-dots li button:before { background-color: #fff; }
#aboutBox .slick-dots li.slick-active button:before { background-color: var(--keyColor); }