@charset "utf-8";
/* CSS Document */


@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');

/* 공통 */

body {margin: 0; font-family:'Poppins','NanumSquare', Verdana,Open Sans,Dotum,AppleGothic,돋움,Dotum,Helvetica,sans-serif;; background: #e6e6e6; word-break: keep-all}
p {margin:0; padding:0; word-break: keep-all}

/* =======================================
상단 비디오 
======================================= */
/* 기기별 노출 */
.video-pc {display: block;}
.video-mobile {display: none;}

/* 비디오 */
.video-container {position: relative; width: 100%; height: 100vh; overflow: hidden;}
.video-container video {width: 320%; position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; transform: translate(-50%, -50%); object-fit: cover;}

.video-container video.video-pc {
    width: 100%;
    position: absolute;
    top: 0px;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, 0%);
    object-fit: cover;
}
/* 비디오 상단 텍스트 */
.video-text {width:15.625%; position: absolute; top: 20px; right: 20px;  z-index: 99;}
.video-text img {width:100%}


/* ==============================================================================
섹션별 공통
============================================================================== */
section {display: flex; border-top:1px solid #000}
section > div {width:50%; aspect-ratio: 1 / 1; overflow: hidden;}
section > div img {width:100%}
section > div:first-child {border-right:1px solid #000}

/* ===== 텍스트 박스 =====*/
section .txtBox {box-sizing: border-box;}
/* 타이틀 */
section .txtBox .tit {line-height:1; color: #ff7400; font-size: clamp(40px,3.4vw,65px); font-weight: 600; letter-spacing:3.5px;}
/* 텍스트 */
section .txtBox article {margin:clamp(50px,3.9vw,73px) 0 clamp(60px,4.7vw,90px); font-size: clamp(15px,1.3vw,25px); line-height: 1.7;}

/* 영역별 리스트 */
.checkup-list {display: flex; flex-wrap: wrap; gap: 40px 30px; }
.checkup-item {width: 21%; display: flex; flex-direction: column; justify-content: space-between;}
.checkup-item strong {display: block; font-weight: 600; font-size: clamp(14px,1vw,18px); color: #000; margin-bottom: 8px;}
.checkup-item span {display: block; font-size: 12px; color: #ee7300; font-weight:800}



/* ==============================================================================
sec01 - 상단 텍스트 
============================================================================== */
/* 상단 영어 문장 - 'Health is not just the ...' */
.sec01 .txtBox p {width:49%; margin:clamp(40px,3.4vw,65px) auto clamp(35px,2.2vw,42px); }

/* 국어 텍스트 - '건강은 단순히 병이 없는 ...' */
.sec01 .txtBox article {font-size: clamp(11px,2.3vw,21px); text-align: center; letter-spacing: -0.5px; line-height: 1.5;}

/* 하단 이미지 - 헬로웰 클리닉 */
.sec01 .txtBox > img {display:block; width:15%; margin:clamp(30px,3.2%,60px) auto }



/* ==============================================================================
sec02 - 배너 영역 01
============================================================================== */
section.sec02 .txtBox {padding:clamp(110px,13.2vw,290px) clamp(30px,2.7vw,50px) 0; }

/* 하단 리스트 */
section.sec02 .feature-list {display: flex; justify-content: space-between; gap: clamp(30px,3.2vw,60px); }
section.sec02 .feature-list ul {list-style: none; padding: 0; margin: 0; flex: 1;}
section.sec02 .feature-list li {position: relative; padding-left: clamp(20px,1.4vw,25px); margin-bottom: clamp(10px,0.8vw,15px); font-weight: 600; color: #000; font-size: clamp(12px,1.1vw,20px); line-height: 1.6;}
section.sec02 .feature-list li::before {content: ''; position: absolute; left: 0; top: clamp(5px,0.4vw,10px); width: clamp(10px,0.7vw,12px); height: clamp(10px,0.7vw,12px); background: #ff7400; border-radius: 50%;}



/* ==============================================================================
sec03 - 배너 영역 02
============================================================================== */
section.sec03 .txtBox {position: relative;}
section.sec03 .txtBox > div {position:absolute; left:5%; bottom:3%; width:90%;}



/* ==============================================================================
sec04 - 배너 영역 03
============================================================================== */
section.sec04 .txtBox {position: relative;}
section.sec04 .txtBox > div {position:absolute; left:5%; bottom:3%; width:90%;}
section.sec04 .txtBox article {margin:clamp(30px,2.9vw,43px) 0 clamp(50px,2.7vw,70px)}

section.sec04 .checkup-list {width:80%}
section.sec04 .checkup-item {width:40%}

/* 하단 - STEM CELL CENTER */
section.sec04 .btm {display:flex; margin-top:clamp(30px,2.7vw,50px)}
section.sec04 .btm p {font-size: clamp(30px, 2.8vw, 50px);color: #ff7400; font-weight:800; font-weight:600; line-height:1.1}
section.sec04 .btm .checkup-item {margin-left:8%}
section.sec04 .btm .checkup-item strong {font-size:clamp(14px,1.4vw,25px)}



/* ==============================================================================
하단 띠배너
============================================================================== */
section.beltBn {display:block; background:#ff7400; padding:13px 0; border-bottom:1px solid #000; }
section.beltBn .beltWrap { width:100%; aspect-ratio: unset; margin:0 auto; }
section.beltBn .scrolling {display:flex; justify-content:space-between;  width:55%; margin:0 auto;}
section.beltBn .scrolling p:nth-child(n+4) {display:none}

section.beltBn > div:first-child {border:0;}


/* ==============================================================================
푸터
============================================================================== */
footer {background:#000; padding:clamp(60px,7vw,130px) 5% clamp(60px,4vw,90px)}

footer .logo1 {width:21.3%; margin: 0 auto;min-width:220px}
footer .logo1 img {width:100%}

footer .logo2 {width:31.2%; margin: 4% auto 1%; min-width: 200px;}
footer .logo2 img {width:100%}

footer .btm_info_area {width:27.2%; min-width:380px; margin: 0 35.9% 0 auto; }
footer .btm_info_area .btn_info {color: #fff; font-size: clamp(11px,0.69vw,14.6px); line-height: 1.5;}
footer .btm_info_area .tel {display:flex; justify-content:space-between; color: #fff; font-size: clamp(10px,0.765vw,14.8px); line-height: 1.5;padding-top: 15px;}
footer .btm_info_area .tel span.mail { color:#ff7400; margin-right:0;}


/* ==============================================================================
반응형
============================================================================== */
@media (max-width: 1750px) {
/* sec04 - 배너 영역 03 */
section.sec04 .txtBox article {margin: clamp(30px, 2.9vw, 32px) 0 clamp(30px, 0.7vw, 40px);}
section.sec04 .checkup-list {gap: 20px 30px;}

section.beltBn .scrolling {width:70%}


footer .btm_info_area .btn_info,
footer .btm_info_area .tel {margin:0 auto}

}


@media (max-width: 1620px) {
footer .btm_info_area {margin:0 auto;}
}

@media (max-width: 1400px) {
/* sec03 - 배너 영역 02 */
section.sec03 .txtBox > div {width:97%; left:3%}

/* sec04 - 배너 영역 03 */
section.sec04 .btm {margin-top:15px}
section.sec04 .txtBox {padding: 30px clamp(30px, 2.7vw, 50px) 0;}
}

@media (max-width: 1300px) {
/* 공통 */
section .txtBox {padding:clamp(140px,3.2vw,290px) clamp(30px,2.7vw,50px) 0;}
section .txtBox article {margin:clamp(30px,2.9vw,73px) 0 clamp(34px,0.7vw,90px)}

.checkup-item {width:23%}
.checkup-item span {font-size:11px}

/* sec03 - 배너 영역 02 */
section.sec03 .checkup-list {gap: 30px 10px;}

/* sec04 - 배너 영역 03 */
section.sec04 .txtBox {padding:2.8vw clamp(30px,2.7vw,50px) 0}
section.sec04 .txtBox article {margin: 15px 0 20px;}

section.sec04 .checkup-list {gap: 10px 30px;}
section.sec04 .checkup-item {width:45%}
section.sec04 .btm {margin-top: 18px;}

/* 하단 띠배너 */
section.beltBn .scrolling {width:80%}

/* 푸터 */
footer .logo1 {width:32%; margin: 0 auto;}
footer .logo2 {width:32%; margin: 4% auto 1%;}
}


@media (max-width: 1100px) {
section .txtBox {padding:clamp(150px,3.2vw,290px) clamp(30px,2.7vw,50px) 0}
section .txtBox article {font-size: clamp(13px,0.8vw,26px);}
section.sec03 .txtBox {padding: clamp(40px, 2.2vw, 260px) clamp(30px, 2.7vw, 50px) 0}
section.sec04 .txtBox article {margin: 12px 0 16px;}
section.sec04 .checkup-list {width: 90%;}
section.beltBn .scrolling {width:90%}

section.sec03 .checkup-list {gap: 15px 5px}
.checkup-item {width:24%}
}


@media (max-width: 1024px) {

/* 기기별 노출 */
.video-pc {display: none;}
.video-mobile {display: block;}

/* 비디오 
.video-container {height: 85.4vh;}*/

/* 공통 */
section {display:block;}
section > div {width:100%}
section > div:first-child {border:0; border-bottom:1px solid #000}

.checkup-item {width: calc(33.333% - 20px);}
.checkup-item span {font-size:13px;}


section .txtBox {padding: clamp(100px, 3.2vw, 290px) clamp(30px, 2.7vw, 50px) 0;}
section .txtBox .tit {font-size: clamp(32px, 7.4vw, 60px);}
section .txtBox article {font-size: clamp(14px, 2.8vw, 26px);}
section .txtBox article br {display:none}


.sec01 .txtBox p {width:80%}
.sec01 .txtBox > img {width:25%; min-width: 180px; margin:clamp(40px,5.2vw,60px) auto;}

section.sec02 .feature-list li {font-size: clamp(14px,2.3vw,23px)}
section.sec02 .feature-list li::before {top:1.7vw}

section.sec03 .txtBox {aspect-ratio:unset; padding:clamp(110px,13.2vw,290px) clamp(30px, 2.7vw, 50px) clamp(40px, 2.2vw, 260px)}


.checkup-item strong,
section.sec04 .btm .checkup-item strong {font-size:clamp(13px,2.3vw,23px)}
.sec03 {display: flex; flex-direction: column-reverse;}
section.sec03 .txtBox > div,
section.sec04 .txtBox > div {position:unset;width:100%}
section.sec04 .checkup-list {width:100%}

section.sec04 .txtBox {aspect-ratio:unset; padding: clamp(50px, 7.8vw, 77px) clamp(30px, 2.7vw, 50px);}
section.sec04 .txtBox article {margin: clamp(30px, 2.9vw, 43px) 0 clamp(50px, 2.7vw, 70px);}
section.sec04 .checkup-list {gap: 40px 30px;}
section.sec04 .btm {margin-top: clamp(50px, 2.7vw, 50px);}
section.sec04 .btm p {font-size: clamp(30px, 5.4vw, 50px); }

/* 띠배너 */
section.beltBn {padding:8px 0; overflow:hidden; font-size:15px}
section.beltBn .beltWrap {width: 100%; overflow: hidden; position: relative;}
section.beltBn .beltWrap .scrolling {display: inline-block; white-space: nowrap; animation: scroll-left 20s linear infinite; padding-left: 20px; /* ← 왼쪽 여백 지정 */}
section.beltBn .beltWrap .scrolling p {display: inline-block;margin-right: 80px;font-weight: 500;}

/* 푸터 */
footer .logo2 {width:49%; min-width:367px}

/* 키프레임 */
@keyframes scroll-left {
0% {transform: translateX(0);}
100% {transform: translateX(-100%);}
}
}


@media (max-width: 768px) {
html, body {overflow-x: hidden; }
body {width:100%}

.video-text {width: 50%;}

.checkup-item {width: 32%;}
section .txtBox {aspect-ratio:unset; padding: clamp(110px,13.2vw,290px) clamp(30px,2.7vw,50px) clamp(40px,6.2vw,290px) !important}
	section.beltBn {font-size: 14px;}	
	section.sec02 .feature-list {gap: clamp(0px, 3.2vw, 0px);}
}


@media (max-width: 530px){
	
.checkup-item {width: 48%;}
.checkup-item span {font-size: 12px;}
	
section .txtBox article br {display:none}

section.sec02 .feature-list {flex-direction: column;}
section.sec04 .checkup-item {width:90%}
section.sec04 .btm .checkup-item {width: 50%;}

footer .btm_info_area .btn_info,
footer .btm_info_area .btn_info, footer .tel {font-size:10px}

footer .btm_info_area {width:fit-content; min-width:unset;}
footer .logo2 {width:80%; margin-bottom:5%; min-width:unset}
footer .tel {display:block;}
}