@charset "utf-8";
/* ======================================================================================================================= */
/* ======================================================= main style ==================================================== */
/* ======================================================================================================================= */


main {position: relative;}

.content:first-of-type {padding-top: 0;}

.main-slide .swiper-slide {position: relative;}
.main-slide .swiper-slide img {width: 100%;}

.main-slide .swiper-pagination {left: 0; bottom: 40px; top: auto !important; width: 100%;}
.main-slide .swiper-pagination-bullet {margin: 0 4px; width: 14px; height: 14px; background: none; border: 1px solid #ccc; opacity: 0.7; transition: all 0.4s ease-in-out;}
.main-slide .swiper-pagination-bullet-active {background: #fff; opacity: 1;}

.main-tit {margin-bottom: 40px; text-align: left;}
.main-tit .sub-tit {font-weight: 600; white-space: pre-line;}
.main-tit .tit {font-weight: 700; white-space: pre-line;letter-spacing: -2px;}
.main-tit .sub {margin-top: 15px; white-space: pre-line;}

/* 서브 공통 안보이게 처리 */
.lifting-area6{display: none;}

/* ===================== Mobile size : 1400px ======================= */

@media screen and (max-width: 1400px){
.main-slide .swiper-pagination {bottom: 30px;}
}


/* ===================== Mobile size : 1200px ======================= */

@media screen and (max-width: 1200px){

}


/* ===================== Mobile size : 1024px ======================= */

@media screen and (max-width: 1024px){

}

/* ===================== Mobile size : 900px ======================= */

@media screen and (max-width: 900px){

}

/* ===================== Mobile size : 769px ======================= */

@media screen and (max-width: 769px){

}

/* ===================== Mobile size : 600px ======================= */

@media screen and (max-width: 600px) {

}

/* ===================== Mobile size : 480px ======================= */

@media screen and (max-width: 480px){
.main-slide .swiper-pagination {bottom: 10px;}
.main-slide .swiper-pagination-bullet {width: 8px; height: 8px;}
}


/* ========================
   main-area1
======================== */
.main-area1 .bg-animation{background: url(../img/main/main_area1_bg.png) center/cover no-repeat;}
#mainScreen .inner{padding: 150px 20px;}

        .section-title {
            text-align: center;
            margin-bottom: 50px;
        }

        .section-title h2 {
            font-size: 34px;
            font-weight: 700;
            margin-bottom: 16px;
            color: #1a4d3e;
            letter-spacing: -0.5px;
        }

        .section-title p {
            font-size: 16px;
            color: #5a7a6e;
        }

        /* 단계 표시 */
        .step-indicator {
            text-align: center;
            margin-bottom: 40px;
            font-size: 15px;
            color: #5a7a6e;
            font-weight: 500;
        }

        /* 질문 카드 */
        .question-card {
            background: white;
            border-radius: 24px;
            padding: 45px;
            box-shadow: 0 4px 30px rgba(26, 77, 62, 0.08);
            margin-bottom: 30px;
            border: 1px solid rgba(204, 225, 216, 0.3);
        }

        .question-card h3 {
            font-size: 23px;
            font-weight: 600;
            margin-bottom: 12px;
            color: #1a4d3e;
            line-height: 1.5;
        }

        .question-note {
            font-size: 14px;
            color: #7a9689;
            margin-bottom: 28px;
        }

        /* 선택 버튼 */
        .option-grid {
            display: grid;
            gap: 14px;
        }

        /* 주제 선택 그리드 (가로 배치) */
        .topic-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 16px;
        }

        .topic-btn {
            background: #f8fdfb;
            border: 2px solid #cce1d8;
            border-radius: 18px;
            padding: 28px 20px;
            font-size: 16px;
            color: #2d5a4a;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            text-align: center;
            position: relative;
            font-weight: 600;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
        }

        .topic-btn:hover {
            border-color: #8fc1b0;
            background: #e8f6f1;
            transform: translateY(-4px);
            box-shadow: 0 8px 24px rgba(140, 193, 176, 0.2);
        }

        .topic-btn.selected {
            border-color: #5a9b84;
            background: linear-gradient(135deg, #cce1d8 0%, #b8d7cb 100%);
            color: #1a4d3e;
            font-weight: 700;
            box-shadow: 0 6px 20px rgba(90, 155, 132, 0.25);
            transform: translateY(-2px);
        }

        .topic-btn.selected::before {
            content: '✓';
            position: absolute;
            top: 12px;
            right: 12px;
            color: #1a4d3e;
            font-weight: bold;
            font-size: 18px;
            background: white;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .topic-icon {
            font-size: 32px;
            margin-bottom: 4px;
        }

        .option-btn {
            background: #f8fdfb;
            border: 2px solid #cce1d8;
            border-radius: 16px;
            padding: 20px 26px;
            font-size: 16px;
            color: #2d5a4a;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            text-align: left;
            position: relative;
            font-weight: 500;
        }

        .option-btn:hover {
            border-color: #8fc1b0;
            background: #e8f6f1;
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(140, 193, 176, 0.15);
        }

        .option-btn.selected {
            border-color: #5a9b84;
            background: linear-gradient(135deg, #cce1d8 0%, #b8d7cb 100%);
            color: #1a4d3e;
            font-weight: 600;
            box-shadow: 0 4px 16px rgba(90, 155, 132, 0.2);
        }

        .option-btn.selected::after {
            content: '✓';
            position: absolute;
            right: 24px;
            top: 50%;
            transform: translateY(-50%);
            color: #1a4d3e;
            font-weight: bold;
            font-size: 20px;
        }

        /* 다음 버튼 */
        .btn-next {
            width: 100%;
            background: linear-gradient(135deg, #5a9b84 0%, #4a8b74 100%);
            color: white;
            border: none;
            border-radius: 16px;
            padding: 20px;
            font-size: 17px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            margin-top: 24px;
            box-shadow: 0 4px 16px rgba(90, 155, 132, 0.25);
        }

        .btn-next:hover {
            background: linear-gradient(135deg, #4a8b74 0%, #3a7b64 100%);
            transform: translateY(-2px);
            box-shadow: 0 8px 24px rgba(90, 155, 132, 0.35);
        }

        .btn-next:disabled {
            background: #d4e5de;
            cursor: not-allowed;
            transform: none;
            box-shadow: none;
            color: #8fa99d;
        }

        /* 결과 화면 */
        .results-container {
            display: flex;
            flex-direction: column;
            gap: 24px;
            margin-bottom: 30px;
        }

        .result-row {
            display: grid;
            gap: 24px;
        }

        .result-row.cols-1 {
            grid-template-columns: 1fr;
        }

        .result-row.cols-2 {
            grid-template-columns: repeat(2, 1fr);
        }

        .result-row.cols-3 {
            grid-template-columns: repeat(3, 1fr);
        }

        .result-card {
            background: white;
            border-radius: 24px;
            padding: 50px 45px;
            box-shadow: 0 4px 30px rgba(26, 77, 62, 0.08);
            text-align: center;
            border: 1px solid rgba(204, 225, 216, 0.3);
            height: 100%;
            display: flex;
            flex-direction: column;
        }

		.topic-badge{-webkit-border-radius: 15px;-moz-border-radius:15px ;border-radius: 15px;color: #333;font-weight: 900;font-size: 18px;padding: 10px;background: #cce1d8;}
        .result-icon {
            font-size: 56px;
            margin-bottom: 24px;
            filter: drop-shadow(0 4px 8px rgba(0,0,0,0.1));
        }

        .result-card h3 {
            font-size: 30px;
            font-weight: 700;
            color: #1a4d3e;
            margin-bottom: 18px;
            line-height: 1.4;
        }

        .result-card p {
            font-size: 17px;
            color: #4a6a5e;
            margin-bottom: 20px;
            line-height: 1.7;
        }

        /* 상담 버튼 */
        .btn-consult {
            display: inline-block;
            background: linear-gradient(135deg, #5a9b84 0%, #4a8b74 100%);
            color: white;
            padding: 20px 60px;
            border-radius: 16px;
            font-size: 18px;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 6px 24px rgba(90, 155, 132, 0.3);
        }

        .btn-consult:hover {
            background: linear-gradient(135deg, #4a8b74 0%, #3a7b64 100%);
            transform: translateY(-3px);
            box-shadow: 0 10px 32px rgba(90, 155, 132, 0.4);
        }

        .btn-reset {
            display: inline-block;
            margin-top: 20px;
            color: #7a9689;
            font-size: 15px;
            text-decoration: none;
            cursor: pointer;
            font-weight: 500;
            transition: color 0.2s;
        }

        .btn-reset:hover {
            color: #4a8b74;
            text-decoration: underline;
        }

        /* 인트로 화면 */
        .intro-screen {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        .intro-content {
            text-align: center;
            z-index: 2;
        }

        .intro-label {
            font-size: 15px;
            color: #5a7a6e;
            font-weight: 600;
            margin-bottom: 20px;
            letter-spacing: 1px;
        }

        .intro-title {
            font-size: 56px;
            font-weight: 900;
            color: #1a4d3e;
            margin-bottom: 24px;
            line-height: 1.3;
            letter-spacing: -1px;
        }

        .intro-subtitle {
            font-size: 20px;
            color: #4a6a5e;
            margin-bottom: 50px;
            font-weight: 500;
        }

        .intro-btn {
            display: inline-block;
            background: #cce1d8;
            color: #333;
            padding: 22px 70px;
            border-radius: 50px;
            font-size: 18px;
            font-weight: 900;
            text-decoration: none;
            cursor: pointer;
            border: none;
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 8px 30px rgba(26, 77, 62, 0.3);
        }

        .intro-btn:hover {
            background: #2d5a4a;
			color: #fff;
            transform: translateY(-4px);
            box-shadow: 0 12px 40px rgba(26, 77, 62, 0.4);
        }

        /* 숨김 처리 */
        .hidden {
            display: none;
        }

        /* 반응형 */
        @media (max-width: 768px) {
            .intro-title {
                font-size: 36px;
            }

            .intro-subtitle {
                font-size: 17px;
            }

            .intro-btn {
                padding: 20px 50px;
                font-size: 17px;
            }

            .intro-bg-shape {
                width: 400px;
                height: 400px;
            }

            .container {
                padding: 40px 16px;
            }

            .section-title h2 {
                font-size: 28px;
            }

            .question-card {
                padding: 32px 24px;
                border-radius: 20px;
            }

            .question-card h3 {
                font-size: 20px;
            }

            .topic-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 12px;
            }

            .topic-btn {
                padding: 24px 16px;
                font-size: 15px;
            }

            .topic-icon {
                font-size: 28px;
            }

            .option-btn {
                padding: 18px 22px;
                font-size: 15px;
                border-radius: 14px;
            }

            /* 모바일에서는 모든 결과 카드 1열 */
            .result-row.cols-2,
            .result-row.cols-3 {
                grid-template-columns: 1fr;
            }

            .result-card {
                padding: 40px 28px;
                border-radius: 20px;
            }

            .result-card h3 {
                font-size: 26px;
            }

            .result-icon {
                font-size: 48px;
            }

            .btn-consult {
                padding: 18px 48px;
                font-size: 17px;
            }
        }
/* ========================
   main-area1
======================== */

/* ========== main-area2 ========== */
.main-area2 {
	overflow: hidden;
}


/* 의사 소개 래퍼 */
.doctor-wrap {
	display: flex;
	align-items: center;
	gap: 60px;
	margin-top: 40px;
}

/* 왼쪽: 이미지 + 회전텍스트 영역 */
.doctor-img-area {
	position: relative;
}

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

/* 원장 이미지 */

.doctor-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 오른쪽: 텍스트 영역 */
.doctor-info {
	flex: 1;
}
.doctor-info .info-text p {
	margin-bottom: 25px;
	line-height: 1.9;
}
.doctor-info .info-text p:last-child {
	margin-bottom: 30px;
}

/* 원장 프로필 */
.doctor-profile {
	margin-top: 30px;
	padding-top: 25px;
	border-top: 1px solid rgba(0,0,0,0.1);
}
.doctor-profile h5 {
	margin-bottom: 15px;
}
.doctor-profile ul {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.doctor-profile ul li {
	font-size: 15px;
	color: #666;
	padding-left: 0;
}

/* ========== 반응형 ========== */
@media screen and (max-width: 1200px) {
	.doctor-img-area {
		width: 450px;
		height: 560px;
	}
	.rotating-text-wrap {
		width: 220px;
		height: 220px;
		left: -40px;
	}
}

@media screen and (max-width: 1024px) {
	.doctor-wrap {
		gap: 40px;
	}
	.doctor-img-area {
		width: 400px;
		height: 500px;
	}
	.rotating-text-wrap {
		width: 200px;
		height: 200px;
		left: -35px;
	}
}

@media screen and (max-width: 769px) {
	.doctor-wrap {
		flex-direction: column;
		gap: 30px;
	}
	.doctor-img-area {
		width: 100%;
		max-width: 350px;
		height: 420px;
		margin: 0 auto;
	}
	.doctor-info{margin-top: 50px;}
	.rotating-text-wrap {
		width: 160px;
		height: 160px;
		left: -80px;
		top: -80px;
	}
	.doctor-info {
		text-align: center;
	}
	.doctor-info .info-text p {
		margin-bottom: 20px;
	}
	.doctor-profile {
		text-align: left;
		max-width: 300px;
		margin: 30px auto 0;
	}
	.doctor-profile ul li {
		font-size: 14px;
	}
}

@media screen and (max-width: 425px) {
	.doctor-img-area {
		max-width: 300px;
		height: 380px;
	}
	.rotating-text-wrap {
		width: 140px;
		height: 140px;
		left: -50px;
		top: -50px;
	}
	.doctor-info .info-text p {
		margin-bottom: 18px;
		line-height: 1.8;
	}
	.doctor-profile ul li {
		font-size: 13px;
	}
}
/* ========== main-area3 ========== */
.main-area3 {background: url(../img/main/main_area3_bg.png) center/cover no-repeat;}

.video-wrap {
	max-width: 1100px;
	margin: 0 auto;
	border-radius: 20px;
	overflow: hidden;
}
.video-wrap video {
	width: 100%;
	display: block;
}

/* ========== 반응형 ========== */
@media screen and (max-width: 769px) {
	.video-wrap {
		border-radius: 15px;
	}
}

@media screen and (max-width: 425px) {
	.video-wrap {
		border-radius: 10px;
	}
}
/* ========== main-area4 ========== */
.main-area4 {
	background-color: #fff;
}

.special-slider-wrap {
	position: relative;
}

/* 네비게이션 버튼 */
.swiper-nav {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-bottom: 25px;
}
.swiper-nav button {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 15px;
	font-weight: 600;
	color: #333;
	display: flex;
	align-items: center;
	gap: 8px;
	transition: color 0.3s;
}
.swiper-nav button:hover {
	color: #334a25;
}
.swiper-nav button span {
	font-size: 10px;
}
.swiper-nav .nav-divider {
	color: #333;
}
.swiper-nav .special-next {
	color: #333;
}
.swiper-nav .special-next:hover {
	color: #334a25;
}
.swiper-nav button.disabled {
	color: #ccc !important;
	cursor: default;
	pointer-events: none;
}

/* 슬라이더 */
.special-swiper.swiper-container {
	overflow: hidden;
}
.special-swiper .swiper-slide {
	height: 380px;
}

/* 카드 스타일 */
.special-card {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 20px;
	overflow: hidden;
}
.special-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s;
}
.special-card:hover img {
	transform: scale(1.05);
}

/* 호버 오버레이 */
.card-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 30px;
	background: linear-gradient(to top, rgba(204, 225, 216, 0.95) 0%, rgba(204, 225, 216, 0.8) 60%, rgba(204, 225, 216, 0) 100%);
	opacity: 0;
	transform: translateY(20px);
	transition: all 0.4s ease;
}
.special-card:hover .card-overlay {
	opacity: 1;
	transform: translateY(0);
}
.special-card:hover img {
	transform: scale(1.05);
}
.card-overlay h5 {
	font-weight: 700;
	color: #222;
	margin-bottom: 10px;
}
.card-overlay p {
	color: #444;
	line-height: 1.6;
}

/* ========== 반응형 ========== */
@media screen and (max-width: 1200px) {
	.special-swiper .swiper-slide {
		height: 340px;
	}
}

@media screen and (max-width: 769px) {
	.special-swiper .swiper-slide {
		height: 300px;
	}
	.card-overlay {
		padding: 20px;
	}
	.card-overlay p {
		font-size: 14px;
	}
}

@media screen and (max-width: 425px) {
	.swiper-nav {
		gap: 10px;		
        justify-content: center;
	}
	.swiper-nav button {
		font-size: 13px;
	}
	.special-swiper .swiper-slide {
		height: 260px;
	}
	.card-overlay {
		padding: 15px;
	}
	.card-overlay h5 {
		font-size: 17px;
	}
	.card-overlay p {
		font-size: 13px;
	}
}
/* ========== main-area5 ========== */
.main-area5 {
	overflow: hidden;
}
.main-area5 .zoom {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* 솔루션 리스트 */
.solution-list {
	gap: 20px;
}
.solution-list > li {
	width: calc(25% - 15px);
}
.solution-list a {
	display: block;
}

/* 솔루션 카드 */
.solution-card {
	background: #fff;
	border-radius: 20px;
	padding: 30px 25px;
	text-align: center;
	box-shadow: 0 5px 20px rgba(0,0,0,0.05);
	transition: transform 0.3s, box-shadow 0.3s;
}
.solution-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.solution-card .eng {
	color: #888;
	font-size: 16px;
	margin-bottom: 5px;
}
.solution-card h4 {
	margin-bottom: 20px;
}
.solution-img {
	border-radius: 15px;
	overflow: hidden;
	margin-bottom: 20px;
}
.solution-img img {
	width: 100%;
	transition: transform 0.3s;
}
.solution-card:hover .solution-img img {
	transform: scale(1.05);
}
.solution-card .desc {
	color: #666;
}

/* ========== 반응형 ========== */
@media screen and (max-width: 1024px) {
	.solution-list > li {
		width: calc(50% - 10px);
	}
	.card-overlay {	opacity: 1;	transform: translateY(0);}
}

@media screen and (max-width: 600px) {
	.solution-list {
		gap: 15px;
	}
	.solution-list > li {
		width: 100%;
	}
	.solution-card {
		padding: 25px 20px;
		border-radius: 15px;
	}
	.solution-card .eng {
		font-size: 14px;
	}
	.solution-img {
		border-radius: 10px;
		margin-bottom: 15px;
	}
}
/* ========== main-area6 ========== */
.main-area6 {
	background-color: #fff;
}

.main-area6 .title p:first-child {
	font-size: 22px;
	color: #666;
	margin-bottom: 10px;
}

/* 카테고리 리스트 */
.category-list {
	justify-content: center;
	gap: 30px 40px;
}
.category-list > li {
	width: calc(25% - 30px);
	text-align: center;
}
.category-list a {
	display: block;
}

/* 원형 아이콘 */
.category-circle {
	width: 180px;
	height: 180px;
	border-radius: 50%;
	margin: 0 auto 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.3s;
}
.category-circle.mint {
	background-color: #cce1d8;
}
.category-circle.peach {
	background-color: #f5cac2;
}
.category-circle img {
	width: 80px;
	height: 80px;
	object-fit: contain;
}
.category-list a:hover .category-circle {
	transform: scale(1.05);
}
.category-list p {
	font-size: 18px;
	font-weight: 500;
	color: #333;
}

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

@media screen and (max-width: 769px) {
	.main-area6 .title p:first-child {
		font-size: 18px;
	}
	.category-list > li {
		width: calc(50% - 15px);
	}
	.category-circle {
		width: 140px;
		height: 140px;
		margin-bottom: 15px;
	}
	.category-circle img {
		width: 60px;
		height: 60px;
	}
	.category-list p {
		font-size: 16px;
	}
}

@media screen and (max-width: 425px) {
	.main-area6 .title p:first-child {
		font-size: 16px;
	}
	.category-list {
		gap: 20px 15px;
	}
	.category-circle {
		width: 120px;
		height: 120px;
	}
	.category-circle img {
		width: 50px;
		height: 50px;
	}
	.category-list p {
		font-size: 15px;
	}
}