@charset "UTF-8"; 

/* common */
.blind { position: absolute; overflow: hidden; width: 1px; height: 1px; margin: -1px; clip: rect(0, 0, 0, 0);}

/* section 공통 */
.pc { display: block;}
.mo { display: none;}
.section * { font: inherit; color: inherit;}
.font-paperlogy { font-family: 'Paperlogy', serif;}
.fw-700 { font-weight: 700;}
.color-white { color: #fff;}
.color-blue { color: #00D0FF;}
.txt-gradient { background: linear-gradient(180deg, #85E4FA 24.29%, #FFF 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.btn { display: flex; align-items: center; width: 100%; max-width: 156px; padding: 7px 20px; border: 0; line-height: 1.5; cursor: pointer;}
.btn-lg { max-width: 350px; padding: 10px 36px;}
.btn-white { color: #262626; background-color: #fff;}
.btn-black { color: #fff; background-color: #262626;}
.btn-ico { width: 50px; height: 50px; border-radius: 18px; background: url('/img/hospital/arw-right-bk.svg') no-repeat center center / 24px auto #fff;}
.main-ttl { font-family: "Origin Super Condensed", serif; font-size: 200px; letter-spacing: 4px; text-transform: uppercase;}
/* section6 수정 css */
.mainpage .s6_con { --scaleX: 0;}
.mainpage .s6_con h3 { position: relative; height: fit-content;}
.mainpage .s6_con h3::before { content: ''; display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background-color: #00D0FF; transform: scaleX(var(--scaleX));}
.mainpage .s6_con h3 span { border-bottom: unset;}

/* visual 영역 */
.sc-visual { --scaleX: 0; position: relative; height: 100vh; background-color: #000; color: #A3A3A3;}
.sc-visual .txt-area { display: flex; flex-direction: column; align-items: center; gap: 30px; position: absolute; top: 50%; left: 50%; z-index: 5; width: 100%; transform: translate(-50%, -50%); pointer-events: none;}
.sc-visual .sc-ttl { display: flex; margin-top: 80px; padding: 0 min(1.5vw, 30px); align-items: center; text-align: center;}
.sc-visual .txt-box { display: flex; align-items: center; gap: min(2vw, 40px);}
.sc-visual .txt-box + .txt-box::before { content: ''; display: block; width: 70px; height: 1px; margin: 0 min(1.5vw, 30px) 0 min(3.6vw, 70px); background-color: #fff; transform: scaleX(var(--scaleX));}
.sc-visual .sc-ttl .txt { display: block; font-weight: 500; font-size: 90px; text-transform: uppercase;}
.sc-visual .ani-wrap { display: block; overflow: hidden;}
.sc-visual .desc { font-size: 20px; line-height: 1.5; text-align: center; letter-spacing: -0.8px;}
.sc-visual .btn-wrap { width: 100%; max-width: 350px;}
.sc-visual .btn { justify-content: space-between; gap: 10px; max-width: unset; border-radius: 20px; font-weight: 500; font-size: 20px; letter-spacing: -0.8px; pointer-events: all; transition: all .3s;}
.sc-visual .btn:hover { background-color: #00D0FF;}
.sc-visual .btn::after { content: ''; display: block; width: 24px; height: 24px; background: url(/img/hospital/arw-right-bk.svg) no-repeat center center / cover; transition: all .3s ease-in-out;}
.sc-visual .img { display: block; position: absolute; transition: transform .8s ease; will-change: transform;}
.sc-visual .img.img01 { top: calc(50% - 75px); left: calc(50% - 18.6vw); width: 100%; max-width: 400px; aspect-ratio: 1 / 1; transform: translateX(-100%) rotate(0);}
.sc-visual .img.img02 { bottom: 0; right: 0; width: 100%; max-width: 550px; aspect-ratio: 550 / 500; transform: translateY(50px) rotate(0); transform-origin: 100% 0%;}
.sc-visual .img.img01:hover { transform: translateX(-100%) rotate(-4deg);}
.sc-visual .img.img02:hover { transform: translateY(50px) rotate(3deg);}
.sc-visual .scroll-down { position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%);}
.sc-visual .scroll-down .ico { display: block; width: 60px; height: 60px; border: 1px solid #7F7F7F; border-radius: 22px; background: url(/img/hospital/arw-down-w.svg) no-repeat center center / cover rgba(255, 255, 255, 0.1);  animation: scrollDown 1.5s infinite;}

@keyframes scrollDown {
	0% {
        background-position: 0 0;
	}
	30% {
        background-position: 0 5px;
	}
	60% {
        background-position: 0 0;
	}
}

@media screen and (max-width: 1500px) {
    /* visual 영역 */
    .sc-visual .txt-area { gap: 2vw;}
    .sc-visual .sc-ttl { margin-top: 5.3333vw; padding: 0 min(1.5vw, 2vw);}
    .sc-visual .txt-box { gap: min(2vw, 2.6667vw);}
    .sc-visual .txt-box + .txt-box::before { width: 4.6667vw; height: 0.0667vw; margin: 0 min(1.5vw, 2vw) 0 min(3.6vw, 4.6667vw);}
    .sc-visual .sc-ttl .txt { font-size: 6vw;}
    .sc-visual .desc { font-size: 1.3333vw; letter-spacing: -0.0533vw;}
    .sc-visual .btn { gap: 0.6667vw; border-radius: 1.3333vw; font-size: 1.3333vw; letter-spacing: -0.0533vw;}
    .sc-visual .btn::after {  width: 1.6vw; height: 1.6vw;}
    .sc-visual .img.img01 { top: calc(50% - 5vw); left: calc(50% - 18.6vw); max-width: 26.6667vw;}
    .sc-visual .img.img02 { max-width: 36.6667vw; transform: translateY(3.3333vw) rotate(0);}
    .sc-visual .img.img01:hover { transform: translateX(-100%) rotate(-4deg);}
    .sc-visual .img.img02:hover { transform: translateY(3.3333vw) rotate(3deg);}
    .sc-visual .scroll-down { bottom: 3.3333vw;}
    .sc-visual .scroll-down .ico { width: 4vw; height: 4vw; border-radius: 1.4667vw;}
}

@media screen and (max-width: 1200px) {
    /* common */
    .btn { max-width: 13vw; padding: 0.5833vw 1.6667vw;}
    .btn-lg { max-width: 29.1667vw; padding: 0.8333vw 3vw;}
    .btn-ico { width: 4.1667vw; height: 4.1667vw; border-radius: 1.5vw;}
    .main-ttl { font-size: 180px; letter-spacing: 0.3333vw;}

    .sc-visual .btn-wrap { width: 100%; max-width: 29.1667vw;}
}

@media screen and (max-width: 768px) {
    /* common */
    .pc { display: none !important;}
    .mo { display: block;}
    .btn { max-width: 13vw; padding: 0.5833vw 1.6667vw;}
    .btn-lg { max-width: 263px; padding:7px 27px;}
    .btn-ico { width: 50px; height: 50px; border-radius: 18px;}
    .main-ttl { font-size: 86px; letter-spacing: 1.72px;}

    /* visual 영역 */
    .sc-visual { min-height: 100svh; max-height: 100svh;}
    .sc-visual .txt-area { gap: 24px; width: 100%; padding: 0 20px;}
    .sc-visual .sc-ttl { flex-direction: column; gap: 10px; margin-top: 0; padding: 0;}
    .sc-visual .txt-box { gap: 14px;}
    .sc-visual .txt-box + .txt-box::before { content: none;}
    .sc-visual .sc-ttl .txt { font-size: 40px;}
    .sc-visual .desc { font-size: 15px; letter-spacing: -0.6px;}
    .sc-visual .btn-wrap { width: 100%; max-width: 263px;}
    .sc-visual .btn { gap: 37.5px; border-radius: 15px; font-size: 15px; letter-spacing: -0.6px;}
    .sc-visual .btn::after { width: 18px; height: 18px;}
    .sc-visual .img { pointer-events: none;}
    .sc-visual .img.img01 { top: unset; bottom: 0; left: 0; max-width: 200px; transform: translateX(-37px) rotate(0);}
    .sc-visual .img.img02 { bottom: unset; top: 0; max-width: 240px; transform: translate(42px, 0) rotate(0);}
    .sc-visual .scroll-down { display: none;}
}

@media screen and (max-width: 360px) {
    /* visual 영역 */
    .sc-visual .txt-area { gap: 6.6667vw; padding: 0 5.5556vw;}
    .sc-visual .sc-ttl { gap: 2.7778vw;}
    .sc-visual .txt-box { gap: 3.8889vw;}
    .sc-visual .sc-ttl .txt { font-size: 11.1111vw;}
    .sc-visual .desc { font-size: 4.1667vw; letter-spacing: -0.1667vw;}
    .sc-visual .btn { gap: 10.4167vw; border-radius: 4.1667vw; font-size: 4.1667vw; letter-spacing: -0.1667vw;}
    .sc-visual .btn::after { width: 5vw; height: 5vw;}
    .sc-visual .img.img01 { max-width: 55.5556vw; transform: translateX(-10.2778vw) rotate(0);}
    .sc-visual .img.img02 { max-width: 66.6667vw; transform: translate(11.6667vw, 0) rotate(0);}
}