@import url("../font/pretendard/pretendard.css");
@font-face {
  font-family: 'YeogiOttaeJalnanGothic';
  font-weight: 100;
  font-style: normal;
  src: url('../font/jalnangothic/JalnanGothic.woff') format('woff');
  font-display: swap;
}

a { color: #333;	text-decoration: none; }
.container { width: 1200px; margin: 0 auto; position: relative; }
.notScroll {overflow: hidden; width: 100%; height: 100vh; touch-action: none;}
.mbr {display: none !important;}

/* Select box 스타일 초기화 */ 
select {
	padding: 0 10px 0 4px;
	background: #fff url('arrow.png') no-repeat 100% 50% !important;
	border-radius: 0px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
  color: inherit;
  font-family: inherit;
}

select option { 
	color: #222;
}

/* IE 에서 Select box 화살표 제거 */ 
select::-ms-expand { display: none; }

/* IE10 이상에서 input box 에 추가된 지우기 버튼 제거 */
input::-ms-clear { display: none; }

/* placeholder 초기화 */
input::-webkit-input-placeholder {
  color: #aaa;
  font-style: normal;
  font-weight:100;
}
input:-ms-input-placeholder {
  color: #aaa;
  font-style: normal;
  font-weight:100;
}
textarea::-webkit-input-placeholder {
  color: #aaa;
  font-style: normal;
  font-weight:100;
}
textarea:-ms-input-placeholder {
  color: #aaa;
  font-style: normal;
  font-weight:100;
}
input::placeholder { font-weight: 400; color:#aaa; }

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	transition: background-color 5000s ease-in-out 0s;
	-webkit-transition: background-color 9999s ease-out;
  -webkit-box-shadow: 0 0 0px 1000px none inset !important;
}

/* header */
header {background: #faf4e8;}
header .container {display:flex; align-items:center;justify-content: space-between;}
header a {display: flex; align-items: center; gap: 15px; padding: 25px 0;}
header a .logo {width: 154px; padding-top: 15px;}
header a .sm {width: 110px;}
header a i {width: 1px; height: 40px; background: #ddd;}

/* section1 */
.sec1 {background: #faf4e8; padding: 60px 0 170px;}
.sec1 .main_wrap {display: flex; justify-content: space-between; align-items: center;}

.sec1 .main_wrap .text_wrap {margin: 0 auto; display: flex; flex-direction: column; align-items: center; position: relative;}
.sec1 .main_wrap .text_wrap .title_wrap {text-align: center; position: relative; margin-bottom: 74px;}
.sec1 .main_wrap .text_wrap .title_wrap img {margin-bottom: 14px;}
.sec1 .main_wrap .text_wrap .title_wrap h2 {font-size: 70px; font-family: 'YeogiOttaeJalnanGothic'; background: #ed7529; color: #fff; border-radius: 100px; padding: 24px 65px 12px; margin-bottom: 26px; display: inline-block;}
.sec1 .main_wrap .text_wrap .title_wrap p {font-size: 30px; font-family: 'YeogiOttaeJalnanGothic'; background: #6b3909; color: #fff; border-radius: 100px; padding: 18px 27px 14px; display: inline-block;}
.sec1 .main_wrap .text_wrap ul {display: flex; flex-direction: column; gap: 30px;}
.sec1 .main_wrap .text_wrap ul li {display: flex; align-items: center; gap: 15px;}
.sec1 .main_wrap .text_wrap ul li .img_wrap {position: relative; width: 80px; height: 80px; border-radius: 100px; background: #f5e6d5; display: flex; align-items: center; justify-content: center;}
.sec1 .main_wrap .text_wrap ul li .img_wrap img {width: 50px;}
.sec1 .main_wrap .text_wrap ul li p {font-size: 26px; font-family: 'YeogiOttaeJalnanGothic';}

.sec1 .form_wrap {background: #fff; border-radius: 30px; padding: 30px 35px 42px; box-sizing: border-box; position: relative; border: 1px solid #512a03;}
.sec1 .form_wrap .button_wrap {display: flex; align-items: center; justify-content: center; width: 100%; gap: 50px; position: relative;}
.sec1 .form_wrap .button_wrap::after {content:""; display: block; width: 1px; height: 48px; background: #d3d3d3; position: absolute; left: 50%; top: 2px; transform: translateX(-50%);}
.sec1 .form_wrap .button_wrap a {display: flex; align-items: end; color: #512a03; gap: -3px;}
.sec1 .form_wrap .button_wrap a.on {color: #ed7529; position: relative;}
.sec1 .form_wrap .button_wrap a.on::after {content:""; display: block; width: 100%; height: 3px; background: #ed7529; position: absolute; left: 0; bottom: -6px;}
.sec1 .form_wrap .button_wrap a img {width: 38px;}
.sec1 .form_wrap .button_wrap a.on img {filter: brightness(0) saturate(100%) invert(56%) sepia(64%) saturate(2079%) hue-rotate(342deg) brightness(95%) contrast(95%);}
.sec1 .form_wrap .button_wrap a p {font-size: 24px; font-family: 'YeogiOttaeJalnanGothic'; white-space: nowrap;}

.sec1 .form_wrap form h2 {font-size: 30px; font-weight: 700; line-height: 1.4; margin-top: 32px; margin-bottom: 122px;}
.sec1 .form_wrap form > img {width: 220px; position: absolute; top: 150px; right: 34px;}

.sec1 .form_wrap form ul {display: flex; flex-direction: column; gap: 10px;}
.sec1 .form_wrap form ul.step2 {display: none;}
.sec1 .form_wrap form.step2on ul.step1 {display: none;}
.sec1 .form_wrap form.step2on ul.step2 {display: flex;}

.sec1 .form_wrap form ul li input {width: 100%; height: 70px; background: #efede9; border-radius: 10px; font-size: 20px; padding-left: 20px; outline: none; border: none; font-family:Pretendard,sans-serif;}
.sec1 .main_wrap .form_wrap form ul li.tel {display: flex; align-items: center; justify-content: space-between; gap: 10px;}
.sec1 .main_wrap .form_wrap form ul li.tel select {height: 70px; background: #efede9 url('arrow.png') no-repeat 100% 50% !important; border-radius: 10px; font-size: 20px; width: 120px; border: none; outline: none; padding-left: 20px; font-family:Pretendard,sans-serif;}

.sec1 .main_wrap .form_wrap form ul li.visit { margin-top: 10px;}
.sec1 .main_wrap .form_wrap form ul li.visit label { display: block; font-size: 20px; color: #636363; font-weight: 500; margin-bottom: 8px; }
.sec1 .main_wrap .form_wrap form ul li.visit .btn-group { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;}

.btn-group { display: flex; gap: 10px; margin-top: 8px; }
.btn-yes-no { flex: 1; padding: 12px 20px; border: 1px solid #ddd; border-radius: 8px; background: #fff; font-size: 16px; color: #333; cursor: pointer; position: relative; z-index: 1; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.btn-yes-no.active { background: #f8d2bb; border: 1px solid #ed7529; color: #ed7529; font-weight: 500; }

.sec1 .form_wrap form .btn_submit {width: 100%; border-radius: 10px; background: #ed7529; color: #fff; height: 70px; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 700; margin-top: 30px;}
.sec1 .form_wrap form .notice {display: flex; align-items: center; gap: 2px; margin-top: 10px;}
.sec1 .form_wrap form .notice img {width: 18px;}
.sec1 .form_wrap form .notice p {font-size: 14px; color: #636363; text-decoration: underline; text-underline-offset: 3px;}

/* section2 */
.sec2 {padding: 100px 0;}
.sec2 .title_wrap {text-align: center; margin-bottom: 60px;}
.sec2 .title_wrap h2 {font-size: 40px; font-family: 'YeogiOttaeJalnanGothic'; color: #6b3906; margin-bottom: 20px;}
.sec2 .title_wrap h2 b {color: #ed7529; font-family: 'YeogiOttaeJalnanGothic';}
.sec2 .title_wrap p {font-size: 22px; line-height: 1.6; color: #636363;}

.sec2 .same {width: 100%; box-shadow: 0 0 8px rgba(0,0,0,0.2); border-radius: 30px; padding: 42px 135px 48px; box-sizing: border-box; margin-bottom: 20px;}
.sec2 .same h3 {font-size: 32px; color: #222; font-weight: 700; margin-bottom: 40px;}
.sec2 .same ul {display: grid; align-items: center; gap: 145px; grid-template-columns: repeat(4, 1fr);}
.sec2 .same ul li {position: relative;}
.sec2 .same ul li::after {content:""; display: block; width: 1px; height: 80px; background: #d3d3d3; margin: 0 70px; position: absolute; right: -160px; top: -10px;}
.sec2 .same ul li:last-child::after {display: none;}
.sec2 .same ul li h4 {font-size: 20px; color: #636363;}
.sec2 .same ul li p {font-size: 28px; color: #222; font-weight: 700; margin-top: 15px; white-space: nowrap;}

.sec2 .plan_wrap {display: grid; align-items: center; justify-content: space-between; grid-template-columns: repeat(3, 1fr); gap: 23px; margin-bottom: 30px;}
.sec2 .plan_wrap > li {border-radius: 30px; box-shadow: 0 0 8px rgba(0,0,0,0.2); padding: 40px 50px 50px;}
.sec2 .plan_wrap > li.yellow {background: #fffef9;}
.sec2 .plan_wrap > li.brown {background: #fffaf9;}
.sec2 .plan_wrap > li.black {background: #fafafa;}
.sec2 .plan_wrap > li h3 {font-size: 32px; font-weight: 700; margin-bottom: 40px;}
.sec2 .plan_wrap > li.yellow h3 {color: #fab028;}
.sec2 .plan_wrap > li.brown h3 {color: #ac4e1b;}
.sec2 .plan_wrap > li.black h3 {color: #222;}
.sec2 .plan_wrap > li ul li::after {content:""; display: block; width: 100%; height: 1px; background: #d3d3d3; margin: 24px 0;}
.sec2 .plan_wrap > li ul li:last-child::after {display: none;}
.sec2 .plan_wrap > li ul li h4 {font-size: 20px; color: #636363; margin-bottom: 15px;}
.sec2 .plan_wrap > li ul li h4 i {position: relative; top: 1px;}
.sec2 .plan_wrap > li ul li p {font-size: 28px; font-weight: 700; color: #222;}

.sec2 .question_card {background: #f8f7f6; width: 100%; border-radius: 30px; padding: 40px 40px; box-sizing: border-box;}
.sec2 .question_card .normal {margin-bottom: 30px;}
.sec2 .question_card div h3 {font-size: 22px; color: #636363; margin-bottom: 12px;}
.sec2 .question_card div h3 i {position: relative; top: 2px;}
.sec2 .question_card div h3 i img {width: 20px;}
.sec2 .question_card div p {font-size: 18px; color: #636363; font-weight: 300; line-height: 1.6; margin-bottom: 6px;}
.sec2 .question_card div small {font-size: 16px; color: #636363; font-weight: 300; line-height: 1.6;}

/* section3 */
.sec3 {background: #faf4e8; padding: 100px 0;}
.sec3 h2 {font-family: 'YeogiOttaeJalnanGothic'; font-size: 40px; color: #6b3906; text-align: center; margin-bottom: 54px;}
.sec3 ul { display: flex; align-items: center; justify-content: center; gap: 20px;}
.sec3 ul li {width: calc((100% - 20px) / 2); background: #fff; border-radius: 30px; box-shadow: 0 0 8px rgba(0,0,0,0.2); padding: 50px 50px 52px; box-sizing: border-box; position: relative;}
.sec3 ul li h3 {font-size: 32px; color: #222; font-weight: 700; margin-bottom: 20px;}
.sec3 ul li p {font-size: 24px; color: #636363; line-height: 1.6; margin-bottom: 30px;}
.sec3 ul li span {font-size: 40px; font-weight: 800; color: #ed7529;}
.sec3 ul li img {width: 180px; position: absolute; right: 30px; bottom: 24px;}

/* section4 */
.sec4 { padding: 100px 0;}
.sec4 .title_wrap { margin-bottom: 72px; text-align: center;}
.sec4 .title_wrap p { font-size: 24px; color: #ed7529; font-weight: 600; margin-bottom: 24px; display: block;}
.sec4 .title_wrap h2 { font-size: 40px; color: #6b3906; line-height: 1.4; font-family: 'YeogiOttaeJalnanGothic';}
.sec4 .content_wrap .content_title {margin-bottom: 60px;}
.sec4 .content_wrap .content_title h3 {text-align: center; font-size: 36px; color: #222; font-weight: 700; margin-bottom: 24px;}
.sec4 .content_wrap .content_title p { font-size: 22px; color: #636363; line-height: 1.6; text-align: center;}

.sec4 ul {display: flex; flex-direction: column; gap: 20px;}
.sec4 ul li { width: 100%; box-shadow: 0 0 8px rgba(0,0,0,0.2); border-radius: 30px; padding: 40px 90px 44px 50px; position: relative; display: flex; align-items: stretch; justify-content: space-between; box-sizing: border-box;}
.sec4 ul li .text_wrap {flex: 1; min-width: 0; display: flex; flex-direction: column;}
.sec4 ul li .text_wrap h4 {font-size: 32px; color: #222; font-weight: 700; margin-bottom: 24px;}
.sec4 ul li .text_wrap .card_list {display: flex; flex-direction: column; gap: 24px; margin: auto 0;}
.sec4 ul li .text_wrap .card_wrap {display: flex; align-items: flex-start; gap: 15px;}
.sec4 ul li .text_wrap .card_wrap > img {width: 20px; flex-shrink: 0; position: relative; top: 10px;}
.sec4 ul li .text_wrap .card_content p { font-size: 25px; color: #222; font-weight: 600; line-height: 1.6;}
.sec4 ul li .text_wrap .card_content span { display: block; font-size: 23px; color: #636363; line-height: 1.4; margin-top: 8px;}
.sec4 ul li .img_wrap {flex-shrink: 0; align-self: center;}
.sec4 ul li .img_wrap img {width: 240px;}

/* section5 */
.sec5 {background: #faf4e8; padding: 100px 0;}
.sec5 .title_wrap {text-align: center; margin-bottom: 66px;}
.sec5 .title_wrap h2 {font-size: 40px; font-family: 'YeogiOttaeJalnanGothic'; color: #6b3906; margin-bottom: 24px;}
.sec5 .title_wrap b {color: #ed7529; font-family: 'YeogiOttaeJalnanGothic';}
.sec5 .title_wrap p {font-size: 22px; color: #636363;}

.sec5 ul {display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;}
.sec5 ul li {background: #fff; border-radius: 30px; box-shadow: 0 0 8px rgba(0,0,0,0.2); padding: 50px 40px; box-sizing: border-box; position: relative; height: 500px;}
.sec5 ul li .text_wrap p {font-size: 24px; color: #636363; margin-bottom: 10px;}
.sec5 ul li .text_wrap h3 {font-size: 28px; color: #222; font-weight: 700; line-height: 1.4; margin-bottom: 8px;}
.sec5 ul li .text_wrap small {font-size: 16px; color: #636363; line-height: 1.4;}
.sec5 ul li img {width: 180px; position: absolute; right: 50px; bottom: 52px;}

/* section6 */
.sec6 {padding: 100px 0;}
.sec6 .container {width: 1142px;}
.sec6 h2 {font-size: 40px; color: #6b3906; font-family: 'YeogiOttaeJalnanGothic'; line-height: 1.6; text-align: center; margin-bottom: 54px;}
.sec6 h2 b {color: #fff; background: #6b3906; font-family: 'YeogiOttaeJalnanGothic'; position: relative;}
.sec6 h2 b::after {content:""; display: block; width: 210px; height: 52px; background: #6b3906; position: absolute; z-index: -1; left: 50%; top: 45%; transform: translate(-50%, -50%);}

.sec6 ul {display: flex; flex-direction: column; gap: 50px;}
.sec6 ul li {display: flex; align-items: center; justify-content: space-between;}
.sec6 ul li:nth-child(2) {flex-direction: row-reverse;}
.sec6 ul li .img_wrap {width: 530px; height: 300px; border-radius: 30px; box-shadow: 0 0 8px rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center;}
.sec6 ul li .img_wrap img { width: 250px;}
.sec6 ul li:nth-child(3) .img_wrap img {width: 400px;}
.sec6 ul li .text_wrap {width: 530px;}
.sec6 ul li .text_wrap h3 {font-size: 32px; color: #222; font-weight: 700; line-height: 1.4; margin-bottom: 10px;}
.sec6 ul li .text_wrap p {font-size: 22px; color: #636363; line-height: 1.6;}
.sec6 ul li .text_wrap span {font-size: 18px; color: #222; font-weight: 600; line-height: 1.6; margin-top: 14px; display: block;}

/* section7 */
.sec7 {background: #e5dcca; color:#333; padding: 50px 0; width:100%;}
.sec7 h3 {margin-bottom: 30px; font-size: 25px; font-weight: 700;}
.sec7 ul li {color:#222; position:relative; font-size: 16px;line-height: 1.4;}
.sec7 p{font-size: 16px; line-height: 1.5; color: #666;}

/* 푸터 */
.footer { background: #fff; box-sizing: border-box; padding: 50px 0;width:100%;}
.footer .f-cont { color: #333; overflow: hidden; }
.footer .f-cont>div p { margin-bottom: 10px; font-size: 15px; }
.footer .f-copy { margin-top: 20px;	color: #333; font-size: 15px; text-align: right;}
.footer .f-copy p {	margin-bottom: 15px; }
.footer .mt { margin-top: 20px; }
.footer .f-logo { position: absolute; top: -15px; right: 0; text-align: right;}
.footer a { color: #222; margin-bottom: 10px; display: inline-block; margin-top: 21px;}