@charset "utf-8";

/*========================================================================================================================================= */
/*================================================================ common ================================================================= */
/*========================================================================================================================================= */

/*section:last-of-type {padding-bottom: 120px;}*/
main {overflow: hidden;}

/* .link {position: absolute; top: -120px; left: 0;} */
.res-bg{padding: 120px 0 !important;}
.title-num{display: flex;  padding-top: 5px; margin: 0 auto 10px; background: #7fcef4; color: #fff; font-size: 30px; width: 60px; height: 60px; align-items: center; justify-content: center; font-family: 'NanumSquare',san-serif; font-weight: 700; transform: skew(-0.1deg); border-radius: 50%;}

.stick ul.flex li h6{background: #7fcef4; color: #fff; padding: 10px;  font-weight: 700; transform: skew(-0.1deg);}
.stick ul.flex li:nth-child(2n) h6{background: #006a65;}



/* 미들 타이틀 (작은 타이틀) */
.middle-title {text-align: center; margin-bottom: 40px;} 
.middle-title p {font-weight: 400; white-space: pre-line; margin-top: 20px;}
.middle-title h3,
.middle-title h4 {line-height: 1.4; font-weight: 900; transform: skew(-0.1deg); white-space: pre-line;} 
.middle-title h5,
.middle-title h6 {font-weight: 700; transform: skew(-0.1deg); white-space: pre-line;} 
.middle-title > span.num::before {font-weight: 400; transform: skew(-0.1deg); margin: 0 auto 20px;} 


/* 테이블 스타일 */
.table-wrap {text-align: center;}
.table-wrap .middle-title h4 {display: inline-block; padding: 12px 20px 8px; background-color: #7fcef4; color: #fff;}
.table-wrap table {width: 100%; white-space: pre-line;}
.table-wrap table tr, .table-wrap table th, .table-wrap table td {font-size: 18px; padding: 15px 10px; border: 1px solid #eee; vertical-align: middle;}
.table-wrap table thead tr, .table-wrap table tbody tr th {background: #f5f5f5; font-weight: 600;}
.table-wrap .imp-icon img{max-width: 50px; margin-bottom: 10px;}


/* 사진 들어간 테이블 */
.photo-table table {text-align: center; width: 100%;}
.photo-table table tr, .photo-table table tr td {padding: 15px 10px; border: 1px solid #ccc; vertical-align: middle;}
.photo-table table td {white-space: pre-line;}
.photo-table table thead tr:first-of-type td, .photo-table table thead tr {border: none;}
.photo-table table thead tr:first-of-type td {padding: 0;}
.photo-table table thead tr:last-of-type td {background: #7fcef4; color: #fff; font-weight: 600; font-size: 20px;}
.photo-table table thead tr:first-of-type td:not(:first-child) {border: 1px solid #ccc; border-bottom: none;}


/* 숫자 리스트 */
.num-list .num {position: relative; margin-bottom: 30px; padding-left: 50px; text-align: left; /* display: flex; align-items: center; */}
.num-list .num:last-child {margin-bottom: 0;}
.num-list .num::before {position: absolute; display: flex; align-items: center; justify-content: center; left: 0; top: 0px; width: 35px; height: 35px; font-size: 20px;}
.num-list .num:nth-child(2n)::before {background-color: #00635e;}
.num-list.middle .num::before {top: 50%; transform: translateY(-50%);}


/* 이미지 테두리 리스트 */
.line-list img {border: 1px solid #ccc;}


/* 원형 이미지 테두리 리스트 */
.circle-list img {border-radius: 50%; border: 1px solid #ccc;}


/* 파란 선 들어간 네모 박스 */
.line-box li > div {position: relative; padding: 30px 20px 30px 30px; border: 1px solid #eee;}
.line-box li > div::after {content: ''; display: block; width: 10px; height: 100%; position: absolute; left: 0; top: 0; background-color: #7fcef4;}
.line-box h5 {margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #eee; font-weight: 500;}
.line-box p {white-space: pre-line;}


/* 사진+텍스트 들어간 기본 스타일 */
.basic-box {display: flex; align-items: center; justify-content: flex-start; margin-top: 40px;}
.basic-box:first-of-type {margin-top: 0;}
.basic-box li:first-child {flex: 1;}
.basic-box li:last-child {margin-left: 30px; flex: 1;}
.basic-box li h3 {margin: 0 0 15px; font-weight: 600; white-space: pre-line; font-weight: 800; transform: skew(-0.1deg);}
.basic-box li h5 {margin: 0 0 15px; font-weight: 600; white-space: pre-line; font-weight: 800; transform: skew(-0.1deg);}
.basic-box li.num h5 {margin: 20px 0 15px;}
.basic-box li p {white-space: pre-line;}
.basic-box.line li h5 {position: relative; padding-bottom: 10px;}
.basic-box.line li h5::before {position: absolute; content: ''; left: 0; bottom: 0; width: 50px; height: 2px; background: #274c8d;}


/* 원 안에 아이콘 없는 박스 */
.circle-box > div > div {border-radius: 50%; background-color: #f5f5f5;}
.circle-box:nth-child(2n-1) > div > div {background-color: #ebf4f2;}
.circle-box > div > div::after {content: ''; display: block; padding-bottom: 100%;}
.circle-box p {position: absolute; width: 100%; height: auto; bottom: 50%; transform: translate(0, 50%); text-align: center; white-space: pre-line;}
.circle-box h5 {position: absolute; white-space: pre-line; text-align: center; bottom: 50%; transform:translateY(50%); display: inline-block; width: 100%;	}
/* .circle-box span{font-size: 24px; font-weight: bold;} */


/* 원 안에 아이콘 들어간 리스트 */
.circle-icon > li > div > div {border-radius: 50%; border: 2px solid #f5f5f5; width: 100%; height: 100%;}
.circle-icon > li:nth-child(2n-1) > div > div {border: 2px solid #d9dfee;}
.circle-icon > li > div > div::after {content: ''; display: block; padding-bottom: 100%;}
.circle-icon > li > div > div > div {position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: center; top: 50%; transform: translate(-50%, -50%); left: 50%; height: 50%; width: 100%;}
.circle-icon p {margin-top: 15px; line-height: 1.4;}


/* 둥근 모서리를 가진 배경색 타이틀 */
.radius-tit {display: inline-block; padding: 8px 42px; margin: 0 auto; border-radius: 40px; background: linear-gradient(to right, #1f3d74, #4067aa); color: #fff;}


/* 자세히 보기 버튼 */
.detail-btn a {position: relative; display: inline-block; margin-top: 20px; padding: 12px 30px; border: 1px solid #333; font-size: 15px; font-weight: 700; transition: 0.4s ease-in-out;}
.detail-btn a::before {content: ""; position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: #327cbd; transition: 0.4s ease-in-out; z-index: -1;}
.detail-btn a:hover::before {width: 100%;}
.detail-btn a:hover {color: #fff; border: 1px solid #327cbd;}


/* ul.flex 배경색 설명글 */
.brief-ex .img img {width: 100%;}
.brief-ex .ex {color: #fff; background: #838383;}
.brief-ex > li:last-child .ex {background: #cfaa7a;}


/*================================================================ 1500px 이하 ================================================================= */
@media screen and (max-width:1500px) {

}

/*================================================================ 1200px 이하 ================================================================= */
@media screen and (max-width:1200px) {
#wrapper {margin-top: 0;}

}

/*================================================================ 1025px 이하 ================================================================= */
@media screen and (max-width:1025px) {

}

/*================================================================ 900px 이하 ================================================================= */
@media screen and (max-width:900px) {
/* 테이블 스타일 */
.table-scroll {position: relative; overflow-x: scroll; overflow-y: hidden; max-width: 100%;}
.table-scroll table {position: relative;}
.table-scroll::-webkit-scrollbar {width: 12px;}
.table-scroll::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); border-radius: 5px; background-color: rgba(220, 220, 220, 0.3);}
.table-scroll::-webkit-scrollbar-thumb {background-clip: padding-box; border-radius: 5px; background-color: #516371; border: 2px solid transparent;}
.table-wrap table {min-width: 900px;}
.table-wrap table tr, .table-wrap table th, .table-wrap table td {font-size: 15px;}
}

/*================================================================ 769px 이하 ================================================================= */
@media screen and (max-width:769px) {

.res-bg{padding: 80px 0 !important;}

/* 숫자 스타일 */
.num::before {margin: 10px auto 0; width: 40px; height: 40px;}
.num-list .num::before {margin: 0 10px 0 0;}


/* 사진 들어간 테이블 */
.photo-table table td {font-size: 15px;}
.photo-table table thead tr:last-of-type td {font-size: 18px;}


/* 사진+텍스트 들어간 기본 스타일 */
.basic-box {display: block; text-align: left;}
.basic-box:not(:first-of-type) {margin-top: 40px;}
.basic-box li:last-child {margin-left: 0; margin-top: 20px;}
.basic-box li h5 {margin: 20px 0 10px !important;}
.basic-box li img {border-radius: 20px; max-width: 500px; width: 100%;}
.basic-box.line li h5::before {left: 50%; transform: translateX(-50%);}


/* 파란 선 들어간 네모 박스 */
.line-box li::after {width: 8px;}
.line-box li > div {height: auto !important;}
}

/*================================================================ 600px 이하 ================================================================= */
@media screen and (max-width:600px) {

}

/*================================================================ 425px 이하 ================================================================= */
@media screen and (max-width:425px) {
#wrapper {margin-top: 0;}

/* .link {top: -60px;} */
.res-bg{padding: 50px 0 !important;}
.stick .flex > li > div.m10{margin: 5px;}
.title-num{font-size: 20px; width: 45px; height: 45px;}


/* 숫자 스타일 */
.num::before {width: 35px; height: 35px; font-size: 17px; margin: 0 auto;}
.num-list .num {display: flex; align-items: center; margin-bottom: 0; padding-left: 40px;}
.num-list .num:not(:first-child) {margin-top: 20px;}
.num-list .num::before {width: 30px; height: 30px; margin: 0 auto; font-size: 16px;}


/* 미들 타이틀 (작은 타이틀) */
.middle-title{margin-bottom: 20px;}
.middle-title p{margin-top: 10px;}
.middle-title > span.num::before {margin: 0 auto 10px;}


/* 사진+텍스트 들어간 기본 스타일 */
.basic-box li img {border-radius: 10px;}
.basic-box li h5 {margin: 15px 0 10px !important; line-height: 1.4;}


/* 원 안에 아이콘 없는 박스 */
.circle-box > div {margin: 5px !important;}
.circle-box h5 {font-size: 15px;}


/* 파란 선 들어간 네모 박스 */
.line-box li::after {width: 5px;}
.line-box li > div {padding: 25px 20px 30px 25px;}
.line-box li h5 {padding-bottom: 5px; margin-bottom: 10px;}


/* 테이블 스타일 */
.table-wrap table {min-width: 700px;}
.table-wrap table tr, .table-wrap table th, .table-wrap table td {font-size: 12px;}
.table-wrap .imp-icon img{max-width: 30px; margin-bottom: 5px;}


/* 사진 들어간 테이블 */
.photo-table table td {font-size: 12px;}
.photo-table table tr, .photo-table table tr td {padding: 10px 5px;}
.photo-table table thead tr:last-of-type td {font-size: 15px;}


/* 둥근 모서리를 가진 배경색 타이틀 */
.radius-tit {padding: 6px 32px;}
}


/*========================================================================================================================================= */
/*================================================================ common ================================================================= */
/*========================================================================================================================================= */



/*========================================================================================================================================= */
/*================================================================ banner ================================================================= */
/*========================================================================================================================================= */
	

/* common */
.banner-bg {padding: 180px 0 150px;}
.banner-bg h2 {position: relative; color: #333; text-align: center; z-index: 1;}
.banner-bg p {color: #333; text-align: center; font-size: 20px; letter-spacing: 0.1em;}


/* about */
.about-bg.banner-bg .bg-animation {background: url(../img/sub/about_bg.jpg) bottom/cover no-repeat;}
.sub11_bg.banner-bg .bg-animation{background: url(../img/sub/sub12_bg.png) bottom/cover no-repeat;}
.sub12_bg.banner-bg .bg-animation{background: url(../img/sub/sub11_bg.png) center/cover no-repeat;}
.sub21_bg.banner-bg .bg-animation{background: url(../img/sub/sub21_bg.png) bottom/cover no-repeat;}
.sub31_bg.banner-bg .bg-animation{background: url(../img/sub/sub31_bg.png) bottom/cover no-repeat;}
.sub32_bg.banner-bg .bg-animation{background: url(../img/sub/sub32_bg.png) bottom/cover no-repeat;}
.sub41_bg.banner-bg .bg-animation{background: url(../img/sub/sub41_bg.png) bottom/cover no-repeat;}
.sub42_bg.banner-bg .bg-animation{background: url(../img/sub/sub42_bg.png) bottom/cover no-repeat;}
.sub43_bg.banner-bg .bg-animation{background: url(../img/sub/sub43_bg.png) bottom/cover no-repeat;}
.sub44_bg.banner-bg .bg-animation{background: url(../img/sub/sub44_bg.png) bottom/cover no-repeat;}
.sub51_bg.banner-bg .bg-animation{background: url(../img/sub/sub51_bg.png) bottom/cover no-repeat;}
.sub61_bg.banner-bg .bg-animation{background: url(../img/sub/sub61_bg.png) bottom/cover no-repeat;}



/*================================================================ 1500px 이하 ================================================================= */
@media screen and (max-width:1500px) {

}

/*================================================================ 1200px 이하 ================================================================= */
@media screen and (max-width:1200px) {
.banner-bg{padding: 160px 0;}
}

/*================================================================ 1025px 이하 ================================================================= */
@media screen and (max-width:1025px) {

}

/*================================================================ 900px 이하 ================================================================= */
@media screen and (max-width:900px) {

}

/*================================================================ 769px 이하 ================================================================= */
@media screen and (max-width:769px) {
.banner-bg{padding: 150px 0 100px;}
.banner-bg p {font-size: 17px;}
}

/*================================================================ 600px 이하 ================================================================= */
@media screen and (max-width:600px) {

}

/*================================================================ 425px 이하 ================================================================= */
@media screen and (max-width:425px) {
.banner-bg{padding: 130px 0 70px;}
.banner-bg h2 {font-size: 30px;}
.banner-bg p {font-size: 14px;}
}


/*========================================================================================================================================= */
/*================================================================ banner ================================================================= */
/*========================================================================================================================================= */


/* ========== lifting-area1 ========== */
.lifting-area1 {background-color: #fff;}
.lifting-area1 .title p:first-child {font-size: 22px; color: #666; margin-bottom: 10px;}

/* 인트로 텍스트 */
.intro-text {text-align: center; margin-bottom: 30px;}
.intro-text .point-color {font-size: 24px; margin-bottom: 10px;}

/* 이미지 래퍼 */
.intro-img-wrap {position: relative; max-width: 1200px; margin: 0 auto;}

/* 회전 텍스트 */
.lifting-area1 .rotating-text-wrap {position: absolute; left: -80px; top: -80px; width: 200px; height: 200px; z-index: 2;}
.lifting-area1 .rotating-text-svg {width: 100%; height: 100%; animation: rotateTextLifting 20s linear infinite;}
.lifting-area1 .rotating-text-path {font-size: 16px; font-weight: 900; fill: #80a79f; letter-spacing: 3px;}
@keyframes rotateTextLifting {from {transform: rotate(0deg);} to {transform: rotate(360deg);}}

/* 이미지 */
.intro-img {position: relative; background: #cce1d8; border-radius: 30px; overflow: hidden;}
.intro-img img {width: 100%; display: block;}

/* 타이틀 (이미지 안) */
.intro-title {position: absolute;left: 5%;bottom: 50px;	width: 90%;z-index: 1;}    
.intro-title h2 {font-size: 80px; color: #fff; line-height: 1.1;text-align: left;}
.intro-title h2.right{text-align: right;}
/* ========== 반응형 ========== */
@media screen and (max-width: 1200px) {
.intro-title h2 {font-size: 65px;}
.lifting-area1 .rotating-text-wrap {width: 170px; height: 170px; left: -40px; top: -20px;}
}

@media screen and (max-width: 1024px) {
.intro-title {left: 40px; bottom: 40px;}
.intro-title h2 {font-size: 55px;}
.lifting-area1 .rotating-text-wrap {width: 150px; height: 150px; left: -30px; top: -20px;}
}

@media screen and (max-width: 769px) {
.lifting-area1 .title p:first-child {font-size: 18px;}
.intro-text .point-color {font-size: 18px;}
.intro-title {left: 30px; bottom: 30px;}
.intro-title h2 {font-size: 45px;}
.intro-img {border-radius: 20px;}
.lifting-area1 .rotating-text-wrap {width: 130px; height: 130px; left: -20px; top: -20px;}
}

@media screen and (max-width: 425px) {
.lifting-area1 .title p:first-child {font-size: 16px;}
.intro-text .point-color {font-size: 16px;}
.intro-title {left: 20px; bottom: 20px;}
.intro-title h2 {font-size: 32px;}
.intro-img {border-radius: 15px;}
.lifting-area1 .rotating-text-wrap {width: 100px; height: 100px; left: -50px; top: -50px;}
}

/* ========== lifting-area2 ========== */
.lifting-area2 {background-color: #fff;}

/* 솔루션 리스트 */
.body-solution-list {gap: 30px; justify-content: center;}
.body-solution-list > li {width: calc(25% - 23px); text-align: center;}
.body-solution-list .solution-circle {width: 100%; border-radius: 50%; overflow: hidden; margin-bottom: 25px;}
.body-solution-list .solution-circle img {width: 100%; height: 100%; object-fit: cover;}
.body-solution-list h5 {margin-bottom: 10px;}
.body-solution-list p {color: #666;}

/* 버튼 */
.btn-wrap {text-align: center; margin-top: 50px;}
.btn-review {display: inline-block; padding: 18px 50px; background: #cce1d8; letter-spacing: 2px; border-radius: 50px; font-size: 16px; font-weight: 600; color: #333; transition: all 0.3s;}
.btn-review:hover {background: #80a79f; color: #fff;}

/* ========== 반응형 ========== */
@media screen and (max-width: 1024px) {
.body-solution-list {gap: 25px;}
.body-solution-list > li {width: calc(25% - 19px);}
}

@media screen and (max-width: 769px) {
.body-solution-list {gap: 20px; margin-top: 40px;}
.body-solution-list > li {width: calc(50% - 10px);}
.body-solution-list .solution-circle {margin-bottom: 20px;}
.btn-wrap {margin-top: 40px;}
.btn-review {padding: 15px 40px; font-size: 15px;}
}

@media screen and (max-width: 425px) {
.body-solution-list {gap: 15px; margin-top: 30px;}
.body-solution-list > li {width: calc(50% - 8px);}
.body-solution-list .solution-circle {margin-bottom: 15px;}
.body-solution-list h5 {font-size: 17px;}
.body-solution-list p {font-size: 13px;}
.btn-wrap {margin-top: 30px;}
.btn-review {padding: 12px 30px; font-size: 14px;}
}

/* ========== lifting-area3 ========== */
.lifting-area3.bg-gray {background-color: #f6f9f8; overflow: hidden;}

/* 추천 래퍼 */
.recommend-wrap {position: relative; max-width: 1000px; margin: 0 auto; padding: 0 20px;}
.recommend-wrap h4 {text-align: center; margin-bottom: 30px;}

/* 왼쪽 배경 텍스트 */
.recommend-wrap::before {content: 'SEUL BEAUTY FOR YOU'; white-space: pre; position: absolute; left: -300px; top: -100px; font-family: 'Playfair Display', serif; font-size: 70px; font-weight: 600; color: rgba(255,255,255,0.9); line-height: 1.1; pointer-events: none;}

/* 오른쪽 배경 텍스트 */
.recommend-wrap::after {content: 'SEUL CLINIC'; white-space: pre; position: absolute; right: -300px; bottom: -100px;  font-family: 'Playfair Display', serif; font-size: 70px; font-weight: 600; color: rgba(180,200,190,0.5); line-height: 1.1; text-align: right; pointer-events: none;}

/* 리스트 */
.recommend-list li {padding: 20px 30px; margin-bottom: 10px; text-align: center;}
.recommend-list li:last-child {margin-bottom: 0;}
.recommend-list li.mint {background: #cce1d8;}
.recommend-list li.peach {background: #f5cac2;}
.recommend-list li p {font-size: 22px; font-weight: 500; color: #333;}

/* ========== 반응형 ========== */
@media screen and (max-width: 1400px) {
.recommend-wrap::before {left: -300px; font-size: 60px;}
.recommend-wrap::after {right: -230px; font-size: 60px;}
}

@media screen and (max-width: 1200px) {
.recommend-wrap::before {left: -250px; font-size: 50px;}
.recommend-wrap::after {right: -180px; font-size: 50px;}
}

@media screen and (max-width: 1024px) {
.recommend-wrap::before {left: -200px; font-size: 40px;}
.recommend-wrap::after {right: -140px; font-size: 40px;}
.recommend-list li {padding: 18px 25px;}
.recommend-list li p {font-size: 16px;}
}

@media screen and (max-width: 769px) {
.recommend-wrap::before, .recommend-wrap::after {display: none;}
.recommend-wrap {max-width: 100%;padding: 0;}
.recommend-wrap h4 {margin-bottom: 20px;}
.recommend-list li {padding: 15px 20px;}
.recommend-list li p {font-size: 15px;}
}

@media screen and (max-width: 425px) {
.recommend-list li {padding: 12px 15px;}
.recommend-list li p {font-size: 14px;}
}
/* ========== lifting-area4 ========== */
.lifting-area4 {background: url(../img/sub/lifting_area4.png) center/cover no-repeat;}

/* 래퍼 */
.toned-wrap {gap: 80px;}

/* 왼쪽 이미지 */
.toned-img {position: relative; width: 45%;}.toned-img img {position: relative; z-index: 1; width: 100%; display: block;}

/* 오른쪽 텍스트 */
.toned-info {flex: 1;}
.toned-info h3 {font-size: 50px; margin-bottom: 10px;}
.toned-info h4 {margin-bottom: 30px;}

/* 리스트 */
.toned-list li { padding: 15px 25px; margin-bottom: 10px; border-left: 4px solid #80a79f;}
.toned-list li:nth-child(odd){background: #cce1d8;}
.toned-list li:nth-child(even){background: #dfedea;}

.toned-list li:last-child {margin-bottom: 0;}
.toned-list li p {font-size: 24px; font-weight: 500; color: #333;}


/* ========== 반응형 ========== */
@media screen and (max-width: 1200px) {
.toned-wrap {gap: 60px;}
.toned-info h3 {font-size: 45px;}
}

@media screen and (max-width: 1024px) {
.toned-wrap {gap: 40px;}
.toned-img {width: 40%;}
.toned-info h3 {font-size: 40px;}
.toned-list li {padding: 12px 20px;}
.toned-list li p {font-size: 16px;}
}

@media screen and (max-width: 769px) {
.toned-wrap {flex-direction: column; gap: 40px;}
.toned-img {width: 80%; max-width: 400px; margin: 0 auto;}
.toned-info {text-align: center;}
.toned-info h3 {font-size: 35px;}
.toned-info h4 {margin-bottom: 25px;}
.toned-list li {border-left: none; border-top: 3px solid #334a25; text-align: center;}
.lifting-area4::after {display: none;}
}

@media screen and (max-width: 425px) {
.toned-img {width: 90%;}
.toned-info h3 {font-size: 30px;}
.toned-list li {padding: 12px 15px;}
.toned-list li p {font-size: 15px;}
}
/* ========== lifting-area5 ========== */
.lifting-area5 {background-color: #f5f5f5;}

/* 리스트 */
.why-list {gap: 20px;}
.why-list > li {width: calc(25% - 15px); text-align: center;}
.why-img {width: 100%; overflow: hidden; margin-bottom: 25px;}
.why-img img {width: 100%; height: 100%;}
.why-list h5 {margin-bottom: 10px;}
.why-list p {color: #666; line-height: 1.6;}

/* ========== 반응형 ========== */
@media screen and (max-width: 1024px) {
.why-list {gap: 15px;}
.why-list > li {width: calc(25% - 12px);}
.why-img {margin-bottom: 20px;}
}

@media screen and (max-width: 769px) {
.why-list {gap: 20px; margin-top: 40px;}
.why-list > li {width: calc(50% - 10px);}
.why-img {margin-bottom: 15px;}
}

@media screen and (max-width: 425px) {
.why-list {gap: 15px; margin-top: 30px;}
.why-list > li {width: calc(50% - 8px);}
.why-list h5 {font-size: 17px;}
.why-list p {font-size: 13px;}
}
/* ========== lifting-area6 ========== */
.lifting-area6 {overflow: hidden;}
.lifting-area6 .zoom {background-size: cover; background-position: center; background-repeat: no-repeat;}

/* 버튼 */
.lifting-area6 .btn-wrap {text-align: center; margin-top: 40px;}
.btn-more {display: inline-block; padding: 18px 80px; background: #fff; border: 1px solid #ddd; border-radius: 50px; font-size: 16px; font-weight: 600; color: #333; transition: all 0.3s;}
.btn-more:hover {background: #80a79f; border-color: #80a79f; color: #fff;}

/* ========== 반응형 ========== */
@media screen and (max-width: 769px) {
.lifting-area6 .btn-wrap {margin-top: 30px;}
.btn-more {padding: 15px 60px; font-size: 15px;}
}

@media screen and (max-width: 425px) {
.btn-more {padding: 12px 50px; font-size: 14px;}
}
/* ========== face-area1 ========== */
.face-area1 {overflow: hidden;}
.face-area1 .zoom {background-size: cover; background-position: center; background-repeat: no-repeat;}

/* 프로그램 박스 */
.program-box {text-align: center; margin-top: 50px;}
.program-num {margin-bottom: 15px;}
.program-num span {display: inline-block; width: 50px; height: 50px; line-height: 50px; background: #cce1d8; color: #333; font-size: 18px; font-weight: 600; border-radius: 5px;}
.program-num span::after {content: ''; display: block; transform: rotate(-45deg);}
.program-box h5 {margin-bottom: 10px;}
.program-box > h4 {margin-bottom: 15px;}
.program-box > p {color: #666; margin-bottom: 40px;}

/* 실 리스트 */
.thread-list {gap: 30px; justify-content: center; max-width: 1100px; margin: 0 auto;}
.thread-list > li {width: calc(25% - 23px); text-align: center;}
.thread-circle {width: 100%;  border-radius: 50%; overflow: hidden; margin-bottom: 20px; background: #fff; border: 1px solid #eee;}
.thread-circle img {width: 100%; height: 100%;}
.thread-list h5 {margin-bottom: 8px;}
.thread-list p {color: #666;}

/* 버튼 */
.btn-wrap {text-align: center; margin-top: 50px;}
.btn-review {display: inline-block; padding: 18px 50px; background: #cce1d8; border-radius: 50px; font-size: 16px; font-weight: 600; color: #333; transition: all 0.3s;}
.btn-review:hover {background: #80a79f; color: #fff;}

/* ========== 반응형 ========== */
@media screen and (max-width: 1024px) {
.thread-list {gap: 20px;}
.thread-list > li {width: calc(25% - 15px);}
}

@media screen and (max-width: 769px) {
.program-box {margin-top: 40px;}
.program-num span {width: 45px; height: 45px; line-height: 45px; font-size: 16px;}
.thread-list {gap: 15px;}
.thread-list > li {width: calc(50% - 8px);}
.thread-circle {margin-bottom: 15px;}
.btn-wrap {margin-top: 40px;}
.btn-review {padding: 15px 40px; font-size: 15px;}
}

@media screen and (max-width: 425px) {
.program-num span {width: 40px; height: 40px; line-height: 40px; font-size: 14px;}
.thread-list {gap: 12px;}
.thread-list h5 {font-size: 17px;}
.thread-list p {font-size: 14px;}
.btn-review {padding: 12px 30px; font-size: 14px;}
}
/* ========== face-area2 ========== */

/* 비교 테이블 */
.compare-table {max-width: 900px; margin: 40px auto 0;}
.compare-table table {width: 100%; border-collapse: collapse;}
.compare-table th, .compare-table td {padding: 18px 20px; text-align: center; font-size: 20px;}
.compare-table th.pdo {background: #a0a0a0; color: #fff; width: 35%;}
.compare-table th.vs {background: #fff; color: #333; font-weight: 600; width: 30%; border: 1px solid #ddd; border-top: none;}
.compare-table th.pcl {background: #cce1d8; color: #333; width: 35%;}
.compare-table tbody tr:nth-child(odd) td {background: #f5f5f5;}
.compare-table tbody tr:nth-child(even) td {background: #fff;}
.compare-table tbody td.center {background: #f9f9f9 !important; color: #666; font-weight: 500; border-left: 1px solid #ddd; border-right: 1px solid #ddd;}

/* ========== 반응형 ========== */
@media screen and (max-width: 769px) {
.compare-table {margin-top: 30px;}
.compare-table th, .compare-table td {padding: 15px 10px; font-size: 14px;}
}

@media screen and (max-width: 425px) {
.compare-table th, .compare-table td {padding: 12px 8px; font-size: 13px;}
}
/* ========== face-area3 ========== */
.face-area3  {background: url(../img/sub/face_area3_bg.png) right bottom no-repeat;}

/* 비교 이미지 */
.compare-img {max-width: 800px; margin: 0 auto; gap: 10px;}
.compare-item {width: calc(50% - 5px); text-align: center;}
.compare-item img {width: 100%;}
.compare-item p {padding: 15px; background: #ddd; font-weight: 700;}
.compare-item:last-child p {background: #facfc4;}

/* ========== 반응형 ========== */
@media screen and (max-width: 769px) {
.compare-img {margin-top: 30px;}
.compare-item p {padding: 12px; font-size: 15px;}
}

@media screen and (max-width: 425px) {
.compare-item p {padding: 10px; font-size: 14px;}
}
/* ========== face-area4 ========== */
.face-area4 {overflow: hidden;}
.face-area4 .zoom {background-size: cover; background-position: center; background-repeat: no-repeat;}

/* 스텝 리스트 (thread-list 재사용) */
.step-list {gap: 30px; justify-content: center; max-width: 1200px; margin: 40px auto 0;}
.step-list > li {width: calc(25% - 23px); text-align: center;}
.step-circle {width: 100%; aspect-ratio: 1/1; border-radius: 50%; overflow: hidden; margin-bottom: 20px;}
.step-circle img {width: 100%; height: 100%; }
.step-list h5 {margin-bottom: 10px;}
.step-list p {color: #666; line-height: 1.6;}

/* ========== 반응형 ========== */
@media screen and (max-width: 1024px) {
.step-list {gap: 20px;}
.step-list > li {width: calc(25% - 15px);}
}

@media screen and (max-width: 769px) {
.step-list {gap: 20px; margin-top: 30px;}
.step-list > li {width: calc(50% - 10px);}
.step-circle {margin-bottom: 15px;}
}

@media screen and (max-width: 425px) {
.step-list {gap: 15px;}
.step-list h5 {font-size: 17px;}
.step-list p {font-size: 13px;}
}
/* ========== face-area5 ========== */
.face-area5 {background-color: #fff;}

/* Cog 이미지 */
.cog-img {max-width: 1000px; margin: 0 auto ; gap: 30px;}
.cog-item {width: calc(50% - 15px); text-align: center;}
.cog-item img {width: 100%; border-radius: 15px; margin-bottom: 20px;}
.cog-item p {line-height: 1.7;}

/* ========== 반응형 ========== */
@media screen and (max-width: 769px) {
.cog-img {flex-direction: column; gap: 30px; margin-top: 30px;}
.cog-item {width: 100%;}
.cog-item img {border-radius: 10px; margin-bottom: 15px;}
}

@media screen and (max-width: 425px) {
}
/* ========== face-area6 ========== */
.face-area6 {overflow: hidden;}
.face-area6 .zoom {background-size: cover; background-position: center; background-repeat: no-repeat;}

/* 프로그램 박스 타입2 */
.program-box.type2 {margin-top: 0;}
.program-num.peach span {background: #f5cac2;}

/* Before After */
.before-after {max-width: 700px; margin: 40px auto 0; gap: 30px; justify-content: center;}
.ba-item {width: calc(50% - 15px); text-align: center;}
.ba-circle {width: 100%; aspect-ratio: 1/1; border-radius: 50%; overflow: hidden; margin-bottom: 15px;}
.ba-circle img {width: 100%; height: 100%; object-fit: cover;}

/* 설명 */
.ba-desc {text-align: center; margin-top: 40px;}
.ba-desc > p:first-child {line-height: 1.8;}
.ba-desc .notice {margin-top: 20px; padding-top: 20px; border-top: 1px solid #ddd; font-size: 15px;}

/* 다크 버튼 */
.btn-review.dark {background: #666; color: #fff;}
.btn-review.dark:hover {background: #80a79f;}

/* ========== 반응형 ========== */
@media screen and (max-width: 769px) {
.before-after {gap: 20px; margin-top: 30px;}
.ba-item {width: calc(50% - 10px);}
.ba-circle {margin-bottom: 12px;}
.ba-desc {margin-top: 30px;}
.ba-desc .notice {margin-top: 15px; padding-top: 15px; font-size: 14px;}
}

@media screen and (max-width: 425px) {
.before-after {gap: 15px;}

}

/* ========== nose-area1 ========== */

/* 특징 리스트 */
.nose-feature-list {margin-top: 50px;}
.feature-item {display: flex; align-items: center;margin-bottom: 30px;gap:50px}
.feature-item:last-child {margin-bottom: 0;}
.feature-item.reverse {flex-direction: row-reverse;}

/* 이미지 */
.feature-img {width: 50%; min-height: 250px; display: flex; align-items: center; justify-content: center; padding: 30px;}


/* 정보 */
.feature-info {width: 50%;}
.feature-info h4 {margin-bottom: 20px;}
.feature-info p {color: #666; line-height: 1.8;}

/* ========== 반응형 ========== */
@media screen and (max-width: 1024px) {
.feature-item {gap: 30px;}
.feature-img {min-height: 220px; padding: 25px;}
.feature-info {padding: 30px;}
}

@media screen and (max-width: 769px) {
.nose-feature-list {margin-top: 0;}
.feature-item, .feature-item.reverse {flex-direction: column; gap: 0;}
.feature-img {width: 100%; min-height: 200px; padding: 20px;}
.feature-info {width: 100%; padding: 25px; text-align: center;}
.feature-info h4 {margin-bottom: 15px;}
}

@media screen and (max-width: 425px) {
.feature-item {border-radius: 15px; margin-bottom: 20px;}
.feature-img {min-height: 180px; padding: 15px;}
.feature-img img {max-height: 160px;}
.feature-info {padding: 20px;}
.feature-info p {font-size: 14px;}
}
/* ========== sjaw page ========== */
.sjaw_list{background: url(../img/sub/sjaw_bg.png) center/cover no-repeat;}
.sjaw_list .inner{max-width: 1200px;}
.sjaw_list ul li{width: calc(50% - 20px);margin:10px;padding: 50px 20px;text-align: center;font-size: 20px;font-weight: 600;border: 1px solid #999;-webkit-border-radius: 30px;-moz-border-radius: 30px;border-radius:30px ;}
.sjaw_bg .bg-animation{background: url(../img/sub/detail_sjaw_01.png) center/cover no-repeat;}
.sjaw_bg .title{color: #fff;}

@media screen and (max-width: 425px) {
.sjaw_list ul li{font-size: 16px;}
}

/* ========== detail-care ========== */
.detail-care {background-color: #fff;}

/* 케어 리스트 */
.care-list {gap: 20px;}
.care-list > li {width: calc(33.333% - 14px); padding: 50px 30px; border-radius: 20px; text-align: center;}
.care-list > li.mint {background: #cce1d8;}
.care-list > li.peach {background: #f5cac2;}
.care-icon {margin-bottom: 25px;}
.care-icon img {width: 80px; height: 80px; object-fit: contain;}
.care-list p {font-size: 17px; line-height: 1.6; color: #333;}

/* ========== 반응형 ========== */
@media screen and (max-width: 1024px) {
.care-list > li {padding: 40px 25px;}
.care-icon img {width: 70px; height: 70px;}
}

@media screen and (max-width: 769px) {
.care-list {margin-top: 40px; gap: 15px;}
.care-list > li {width: calc(33.333% - 10px); padding: 30px 15px; border-radius: 15px;}
.care-icon {margin-bottom: 20px;}
.care-icon img {width: 60px; height: 60px;}
.care-list p {font-size: 15px;}
}

@media screen and (max-width: 600px) {
.care-list {flex-direction: column; gap: 15px;}
.care-list > li {width: 100%; padding: 30px 20px;}
}
/* ========== scar-area1 ========== */
.scar-area1 {background-color: #fff; overflow: hidden;}

/* 래퍼 */
.scar-wrap {gap: 80px;}

/* 왼쪽 이미지 */
.scar-img-wrap {position: relative; width: 45%;}
.scar-img {overflow: hidden;}
.scar-img img {width: 100%; display: block;}

/* 오른쪽 텍스트 */
.scar-info {flex: 1;}
.scar-info h3 {margin-bottom: 25px; line-height: 1.4;}
.scar-info p {color: #666; line-height: 1.8; margin-bottom: 30px;}
.scar-info h4 {font-size: 40px;}

/* ========== 반응형 ========== */
@media screen and (max-width: 1200px) {
.scar-wrap {gap: 60px;}
.scar-info h4 {font-size: 35px;}
}

@media screen and (max-width: 1024px) {
.scar-wrap {gap: 40px;}
.scar-img-wrap {width: 40%;}
.scar-info h4 {font-size: 30px;}
}

@media screen and (max-width: 769px) {
.scar-wrap {flex-direction: column; gap: 40px;}
.scar-img-wrap {width: 80%; max-width: 400px; margin: 0 auto;}
.scar-info {text-align: center;}
.scar-info h3 {margin-bottom: 20px;}
.scar-info p {margin-bottom: 25px;}
.scar-info h4 {font-size: 28px;}
}

@media screen and (max-width: 425px) {
.scar-img-wrap {width: 90%;}
.scar-info h4 {font-size: 24px;}
.scar-info p {font-size: 14px;}
}

/* ========== info-area1 ========== */

/* 소개 텍스트 */
.intro-text {text-align: center; }

/* 하이라이트 */
.intro-highlight {max-width: 800px; margin: 40px auto; padding: 20px 30px; background: #cce1d8; border-radius: 5px; text-align: center;}

/* 이미지 리스트 */
.intro-img-list {gap: 20px; margin-top: 40px;}
.intro-img-list > li {width: calc(33.333% - 14px);}
.intro-img-list img {width: 100%; display: block;}

/* ========== 반응형 ========== */
@media screen and (max-width: 1024px) {
.intro-text p {font-size: 16px;}
.intro-highlight {padding: 18px 25px;}
.intro-highlight p {font-size: 15px;}
}

@media screen and (max-width: 769px) {
.intro-text {margin-top: 30px;}
.intro-highlight {margin: 30px auto; padding: 15px 20px;}
.intro-img-list {gap: 15px; margin-top: 30px;}
}

@media screen and (max-width: 600px) {
.intro-img-list {flex-direction: column; gap: 15px;}
.intro-img-list > li {width: 100%;}
}

@media screen and (max-width: 425px) {
}
/* ========== info-area2 ========== */
.info-area2 {background-color: #fff; padding-bottom: 0;}
.info-area2 .inner {padding-bottom: 50px;}

/* 진료시간 섹션 */
.info-area2 {background: url(../img/sub/infro_bg.png) center/cover no-repeat;}

/* 진료시간 박스 */
.time-box {max-width: 700px; margin: 0 auto; background: #fff; border-radius: 10px; padding: 40px 50px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);}
.time-box dl {display: flex; justify-content: space-around; align-items: center; padding: 12px 0; border-bottom: 1px solid #eee;}
.time-box dl:last-of-type {border-bottom: none;}
.time-box dt {font-size: 25px; font-weight: 600; color: #333; letter-spacing: 2px;}
.time-box dd {font-size: 25px; font-weight: 500; color: #333;}
.time-box .notice {margin-top: 20px; padding-top: 20px; border-top: 1px solid #ddd; font-size:22px; color: #999; text-align: center;}

/* ========== 반응형 ========== */
@media screen and (max-width: 769px) {
.info-area2 .inner {padding-bottom: 40px;}
.time-section {padding: 50px 20px;}
.time-box {padding: 30px 25px;}
.time-box dt, .time-box dd {font-size: 17px;}
.time-box dl {padding: 10px 0;}
}

@media screen and (max-width: 425px) {
.time-section {padding: 40px 15px;}
.time-box {padding: 25px 20px;}
.time-box dt, .time-box dd {font-size: 16px;}
.time-box dt {letter-spacing: 1px;}
.time-box .notice {font-size: 13px;}
}