@charset "utf-8";

/* 1. 기본 초기화 (Reset) */
* { box-sizing: border-box; }
html { overflow-y: scroll; }
body { margin: 0; padding: 0; font-size: 14px; color: #000; font-family: 'Pretendard', 'malgun gothic', dotum, sans-serif; }
html, h1, h2, h3, h4, h5, h6, form, fieldset, img { margin: 0; padding: 0; border: 0; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul, nav ul { margin: 0; padding: 0; list-style: none; }
button { cursor: pointer; border: none; background: none; }
input, button, select, textarea { margin: 0; padding: 0; font-family: inherit; }
p { margin: 0; padding: 0; word-break: break-all; }
hr { display: none; }
table { border-spacing: 0; border-collapse: collapse; width: 100%; background-color: transparent; }
a { color: inherit; text-decoration: none; outline: 0; }
img { width: 100%; display: block; }

/* 2. 공통 유틸리티 클래스 */
.red { color: red; }
.blue { color: blue; }
.green { color: #008149; }
.ac { text-align: center; }
.hidden { display: none; }

/* 3. 본문 및 타이틀 스타일 */
h2 { margin: 3% 1%; font-size: 25px; }
h2 p { font-size: 40px; }
h2 em { font-style: normal; font-weight: normal; }
.subtxt, .subtxt2 { margin: 0 2% 3%; color: #505050; font-size: 19px; }
.subtxt2 { text-align: center; }
.cont { display: block; margin: 1em 2.5% 1.5em; text-align: justify; word-break: break-all; font-size: 18px; color: black; line-height: 1.6; }

/* 4. 폼(Form) 요소 스타일 */
.form-control {
    display: inline-block;
    width: 100%;
    height: 45px; /* 높이를 적절하게 고정 */
    padding: 0 12px;
    font-size: 14px;
    line-height: 43px; /* 텍스트 수직 중앙 정렬 */
    color: #555;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    vertical-align: middle;
}

.form-control:focus { border-color: #66afe9; outline: 0; box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6); }

.form-preset table { background: #f4f4f4; border: 20px solid #f4f4f4; table-layout: fixed; }
.form-preset table>tbody>tr>td label { display: inline-block; min-width: 18%; color: #666; font-size: 15px; }

/* 5. 맞춤형 상담 신청 버튼 (요청하신 스타일) */
.btnAc { text-align: center; margin: 30px 0; }
.custom-btn {
    display: inline-block;
    background-color: #4b3e34; /* 이미지 배경색 */
    padding: 18px 45px;
    border-radius: 60px;       /* 둥근 알약 모양 */
    text-decoration: none;
    font-weight: bold;
    font-size: 32px;           /* 모바일 대응을 고려한 기본 크기 */
    line-height: 1.2;
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3);
    transition: all 0.2s ease-in-out;
    border: 1px solid #3d322a;
}
.custom-btn:hover {
    background-color: #5d4d41;
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.4);
}
.yellow-text { color: #d9c0a3; margin-right: 8px; } /* 최저가 무료 */
.white-text { color: #ffffff; }                   /* 상담받기 */


/* 연락처 가로 정렬 및 크기 강제 보정 */
.input-group-justified {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    width: 100% !important; /* 부모 td 안에서 꽉 차게 */
    max-width: none !important; /* 제한 해제 */
}

.input-group-justified .input-group {
    flex: 1 !important; /* 세 칸이 1:1:1 비율로 차지 */
    min-width: 0 !important;
}

.input-group-justified .form-control {
    width: 100% !important; /* 각 입력창이 group 너비에 꽉 맞춤 */
}

/* select 상자 높이가 input과 미세하게 다를 때 보정 */
select.form-control {
    height: 45px;
    -webkit-appearance: none; /* 브라우저 기본 화살표 제거 방지하려면 삭제 가능 */
    background: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E') no-repeat right 12px center;
    background-size: 12px;
    padding-right: 30px;
}

/* 폼 테이블 내부 여백 및 폰트 설정 */
.form-preset table th {
    background-color: #f8f8f8;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    font-weight: bold;
    color: #333;
}
.form-preset table td {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    background-color: #fff;
}

/* 체크박스 정렬 */
.btn-agree {
    margin: 15px 0;
    font-size: 14px;
    color: #666;
}
.btn-agree input {
    vertical-align: middle;
    margin-right: 5px;
}


/* 섹션0 텍스트 위치 잡기 */
.section0 {
    position: relative;
    text-align: center;
}

.text_overlay {
position: absolute; top: 0; left: 0; z-index: 1; word-break: keep-all;
}

.section .img_wrap{ position: absolute; left: 0; right: 0; width: 100%; text-align: center }
.section0 .img_wrap{ top: 15.85vw; width: 100%; }
.section0 .img_wrap .img1{ margin: auto; width: 26.573vw; }

.section0 .text_overlay{ top: 23vw; width: 100%; }
.section0 h2 {font-size: 4vw; font-weight: 300; color: #fff; }
.section0 h1 {font-size: 6.5vw;font-weight: 800;margin: 2vw 0 2.7vw 0;background: linear-gradient(89.72deg, #E1B452 0.12%, #E4B95B 30.52%, #F8ECAA 45.69%, #F1DA8E 60.04%, #EBCD79 70.94%, #E1B553 87.68%, #FBF3B6 99.92%);-webkit-background-clip: text;-webkit-text-fill-color: transparent}
.section0 span { font-size: 3.4vw; font-weight: 700; color: #E3B85A; padding: 7px 15px; border: 1px solid #E3B85A; border-radius: 100px; display: inline-block; }


.section1 { color: #000; text-align: center; position: relative; }
.section1 .img1{ position: absolute; top: 28vw; right: 8vw; width: 10.9vw; z-index: 2; }
.section1 .text_overlay{ top: 15.1vw; width: 100%; }
.section1 h2 { font-size: 5.186vw; font-weight: 700 }
.section1 h1 { font-size: 10.047vw; font-weight: 800; margin: 0 0 2vw 0 }

.section2 { position: relative;}
.section2 .img_wrap{top: 5.87vw; width: 100%;}
.section2 .img_wrap .img1{margin: auto;  width: 89.3vw;}
.section2 .img_wrap .img2{margin: 57.5vw auto 0; width: 89.42vw;}

.section3 { color: #000; text-align: center; position: relative; }
.section3 .text_overlay{ top: 15.1vw; width: 100%; }
.section3 .img1 { margin: auto; width: 7.5vw; }
.section3 h2 { font-size: 4.3vw; font-weight: 400; }
.section3 h1 { font-size: 7vw; font-weight: 800; margin: 0 0 2vw 0 }
.section3 .img_wrap{ top: 59vw; width: 100%; }
.section3 .img_wrap .img2{ margin: auto; width: 77.84vw; }


.section4 { color: #000; text-align: center; position: relative; } 
.section4 .text_overlay{ top: 15.1vw; width: 100%; }
.section4 h1 { color: #fff; text-align: center; font-size: 5.3vw; font-weight: 800;} 
.section4 .graph_wrap{position: absolute; top: 30.1vw; background: rgba(0, 0, 0, 0.5); margin: 6vw 3vw; padding: 5.5vw; color: #fff;}
.section4 .graph_wrap h2{ font-size: 4.27vw; font-weight: 600; margin-bottom: 20px; color: #FFFFFF99;}
.section4 .graph_wrap span{ font-size: 3.2vw; font-weight: 600; width: 100%; display: inline-block; margin: 9px auto 30px;}
.section4 .graph_wrap ul{text-align: left;}
.section4 .graph_wrap ul li{ font-size: 3.75vw; font-weight: 500; color: #FFFFFF99;}
.section4 .graph{position: relative; width: 100%; max-width: 460px; margin: 0 auto;}
.section4 .img_wrap{ top: 28vw; width: 100%; }
.section4 .img_wrap .img2{ margin: 12vw auto 0; width: 89.34vw; }
.section4 svg{position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;}
.section4 .red-line { position: absolute; stroke: red;	stroke-width: 1; fill: none; stroke-dasharray: 400; stroke-dashoffset: 400; opacity: 0; }
circle.red-dot {fill: red; r: 5; }
@keyframes draw {
	0% {
	  stroke-dashoffset: 400;
	  opacity: 1;
	}
	100% {
	  stroke-dashoffset: 0;
	  opacity: 1;
	}
}

.section5 { color: #000; text-align: center; position: relative; } 
.section5 .text_overlay{ top: 18.8vw; width: 100%;}
.section5 h1 { font-size: 7.2vw; font-weight: 900;} 
.section5 h2 { font-size: 5.3vw; font-weight: 700;} 
.section5 .img_wrap{ top: 34.2vw; width: 100%; }
.section5 .img_wrap .img2{ margin: 8vw auto 0; width: 88.84vw; }

.section6 { position: relative; } 
.section6 .img_wrap{ top: 21vw; width: 100%; }
.section6 .img_wrap .img{ margin: auto; width: 89.45vw; }

.section7 { position: relative; text-align: center; } 
.section7 .text_overlay{ top: 15.1vw; width: 100%; }
.section7 h1 { color: #fff; text-align: center; font-size: 4.6vw; font-weight: 800;} 
.section7 .img_wrap{ top: 33.7vw; width: 100%; }
.section7 .img_wrap .img{ margin: auto; width: 89.34vw; }

.section8 { color: #000; text-align: center; position: relative; } 
.section8 .text_overlay{ top: 14vw; width: 100%; }
.section8 h1 { font-size: 8.2vw; font-weight: 900;} 
.section8 h2 { font-size: 6vw; font-weight: 700;} 
.section8 .img_wrap{ top: 50vw; width: 100%; }
.section8 .img_wrap .img2{ margin: 0 auto; width: 83.6vw; }


.section9 .img_wrap{ top: 45.5vw; width: 100%; }
.section9 .img_wrap .img1{ margin: auto; width: 89.3vw; }
.section9 .img_wrap .img2{ margin: 34.8vw auto 0; width: 89.42vw; }
.section9 { color: #000; text-align: center; position: relative; }
.section9 .text_overlay{ top: 15.1vw; width: 100%; }
.section9 h2 { font-size: 4.186vw; font-weight: 700 }
.section9 h1 { font-size: 8.5vw; font-weight: 800; margin: 0 0 2vw 0 }
.section9 dt { font-size: 3.8vw; font-weight: 800; }
.section9 dd { font-size: 3.5vw; font-weight: 700; margin-top: 2vw; }
.section9 .text_overlay.ty2{ top: 96vw; width: 100%; }

.section10{ background: #161616; color: #fff; padding: 7.3vw;}
.section10 h2{ font-size: 4vw; font-weight: 700;}
.section10 h1{ font-size: 6.3vw; font-weight: 800; color: #FFBD4A;}

.section11 {background: #5a493f; display: flex; color: #fff; justify-content: space-evenly; align-items: center; padding: 3vw 0 5vw 0;}
.section11 img{width: 16.977vw; }
.section11 h1{font-size: 3.5vw;}
.section11 h2{font-size: 3.5vw;}
.section11 address{font-size: 2vw;}


/* 6. 푸터(Footer) 스타일 */
#footer {
    color: #000000;
    padding: 40px 20px;
    text-align: center;
    line-height: 1.8;
}
.footer-content p { margin: 5px 0; font-size: 14px; letter-spacing: -0.5px; }
.footer-content strong { font-weight: 600; }

/* 7. 반응형 (Mobile) */
@media screen and (max-width: 414px) {
    .form-control { height: 45px; }
    .custom-btn { font-size: 22px; padding: 12px 30px; } /* 모바일에서 버튼 크기 축소 */
    .form-preset table>tbody>tr>td label { min-width: 11%; font-size: 13px; }

    /* 모바일에서는 사이 간격을 조금 줄여서 칸을 확보 */
    .input-group-justified {
        gap: 4px;
    }

}