@charset "utf-8";

/* visual */
.mainVis {height: 970rem; min-height: 450rem; background: var(--black); color: #fff; overflow: hidden;}
.mainVis .inr{ position: absolute; inset: var(--header-height) 0 10.8%; display: flex; justify-content: space-between; align-items: center; z-index: 1; }
.mainVis .swiper-slide {position: relative;}
.mainVis .swiper-slide::before { content: ''; position: absolute; inset: 0; background: var(--black) no-repeat 50% / cover; z-index: -1; }
.mainVis .s1::before{ background-image: url('/images/main/visual01.jpg'); }
.mainVis .s2::before{ background-image: url('/images/main/visual02.jpg'); }
.mainVis_txt h2 {font-size: var(--fs55); font-family: var(--font-noto); font-weight: 600; line-height: 1.4; letter-spacing: -1.5rem; margin-bottom: 30rem; color: var(--white);}
.mainVis_txt p {font-size: var(--fs18); font-weight: 200; color: var(--white); }
.mainVis_control {display: inline-flex; align-items: center; font-size: 15rem; font-weight: 600; }
.mainVis__btn{ flex-shrink: 0; position: relative; width: 70rem; height: 70rem; border-radius: 50%; }
.mainVis__btn::before{ content: ''; position: absolute; inset: 0; border: 3rem solid color-mix(in srgb, currentColor 20%, #0000); border-radius: 50%; }
.mainVis__btn::after{ content: ''; position: absolute; inset: 0; margin: auto; width: 8rem; height: 10rem; background: currentColor; }
.mainVis__btn.isPlay::after{ clip-path: polygon(0 100%, 0 0, 3rem 0, 3rem 100%, 5rem 100%, 5rem 0, 100% 0, 100% 100%); }
.mainVis__btn:not(.isPlay)::after{ clip-path: polygon(0 100%, 0 0, 100% 50%); }
.mainVis__circle{ --progress: 0; position: absolute; inset: 0; width: 70rem; height: 70rem; stroke-width: 3rem; stroke: #fff; fill: none; stroke-dashoffset: 0; stroke-dasharray: 0; transform: rotate(-90deg); }
.aniPlay .mainVis__circle{ stroke-dashoffset: calc(var(--totalLength) * (1 - var(--progress))); stroke-dasharray: var(--totalLength); }
.mainVis__pager{ margin-left: 25rem; font-weight: 500; }
.mainVis__slash{ margin: 0 13rem 0 9rem; font-size: 10rem; }
.mainVis .swiper-pagination-current,
.mainVis .swiper-pagination-total{ display: inline-block; width: 1ch; }
.mainVis .swiper-pagination-total{ opacity: .5; }
.mainVis_scroll {position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; align-items: center; flex-direction: column; gap: 10rem; z-index: 20;}
.mainVis_scroll .scroll_txt {display: inline-block; font-size: 13rem; font-weight: 400; letter-spacing: -0.05rem; color: #fff; transition: all 0.4s ease-in-out;}
.mainVis_scroll .scroll_txt em {animation: scroll_txt 2s ease-in-out 0s infinite;}
.mainVis_scroll .scroll_icon {position: relative; width: 3rem; height: 50rem; background: rgba(255, 255, 255, 0.12); transition: all 0.4s ease-in-out; overflow: hidden;}
.mainVis_scroll .scroll_icon span {position: absolute; display: block; width: 3rem; height: 3rem; background: #fff; top: 3rem; left: 50%; transform: translateX(-50%); animation: scroll_ani 2s ease-in-out infinite; transition: all 0.4s ease-in-out;}
.mainVis_scroll .scroll_txt em:nth-child(1){animation-delay: 1s;}
.mainVis_scroll .scroll_txt em:nth-child(2){animation-delay: 1.04s;}
.mainVis_scroll .scroll_txt em:nth-child(3){animation-delay: 1.08s;}
.mainVis_scroll .scroll_txt em:nth-child(4){animation-delay: 1.12s;}
.mainVis_scroll .scroll_txt em:nth-child(5){animation-delay: 1.16s;}
.mainVis_scroll .scroll_txt em:nth-child(6){animation-delay: 1.2s;}
.mainVis_scroll .scroll_txt em:nth-child(7){animation-delay: 1.24s;}
.mainVis_scroll .scroll_txt em:nth-child(8){animation-delay: 1.28s;}
.mainVis_scroll .scroll_txt em:nth-child(9){animation-delay: 1.32s;}
.mainVis_scroll .scroll_txt em:nth-child(10){animation-delay: 1.36s;}
.mainVis_scroll .scroll_txt em:nth-child(11){animation-delay: 1.4s;}
@keyframes scroll_ani {
	0% {top:-10rem; opacity:0;}
	10% {top:-10rem; opacity:1;}
	30% {top:-10rem;opacity:1;}
	80% {top:40rem;opacity:1;}
	100% {top:40rem;opacity:0;}
}
@keyframes scroll_txt {
    0% { opacity: 0;transform: translateY(-50%) rotateX(90deg)}
    20%,80% { opacity: 1; transform: translateY(0) rotateX(0) }
    100% { opacity: 0; transform: translateY(50%) rotateX(-90deg)}
}
@media (prefers-reduced-motion: no-preference){
    .mainVis .swiper-slide-active::before{ animation: slide_bg 4s both; }
	@keyframes slide_bg{
		0%{ transform: scale(1.05); }
		100%{ transform: scale(1); }
	}
	.mVis_txt > *{ opacity: 0; animation: visual_txt .8s .3s both; }
	.mVis_txt > *:nth-child(2){ animation-delay: .6s; }
	.mVis_txt > *:nth-child(3){ animation-delay: .9s; }
	@keyframes visual_txt{
		0%{ transform: translateX(40rem); opacity: 0; }
		100%{ transform: translateX(0); opacity: 1; }
	}
}
@media(max-width:767px){
	.mainVis .inr {flex-direction: column; gap: 40rem; justify-content: center; align-items: flex-start;}
}

/* common - 공통 */
.mainTitle {}
.mainTitle h2 {font-size: var(--fs42); line-height: 1.2; font-family: var(--font-noto); font-weight: 700;}
.mainTitle h2 span {display: block; font-weight: 500;}
.mainTitle p {font-size: var(--fs18); color: #666; line-height: 1.7; margin-top: 30rem;}
.mainTitle small {display: block; font-size: var(--fs17); font-weight: 600; letter-spacing: 1.5rem; margin-bottom: 22rem;}

/* mainAbout - 병원소개 */
.mainAbout {padding: 130rem 0; overflow-x: hidden;}
.mainAbout__top {display: flex; justify-content: space-between; margin-bottom: 40rem;}
.mainAbout__top .mainTitle small {color: var(--primary);}
.mainAbout__btn {display: flex; gap: 23rem; align-items: center;}
.mainAbout__btn svg {width: 62rem; cursor: pointer;}
.mainAbout__btn .prev__svg {opacity: 0.3;}
.mainAbout__swiper {/*clip-path: inset(0 -100vw 0 0);*/ overflow: inherit; padding-bottom: 60rem;}
.mainAbout__swiper .swiper-slide {border-radius: 5rem; overflow: hidden;width: auto !important; height: 400rem;}
.mainAbout__swiper .swiper-slide img {height: 100%; max-height: 100%;}
.mainAbout__scroll {position: absolute; top: inherit; bottom: 0; left: 0; width: 100%; height: 4rem; z-index: 50; background: #e4e6ea; border-radius: 10rem;}
.mainAbout__scroll .swiper-scrollbar-drag {background: var(--primary) !important; border-radius: 10rem;}

/* mainDoctor - 의료진소개 */
.mainDoctor {padding: 120rem 0 0; background: #f4f6fa url(/images/main/sec2_bg.png) no-repeat; background-size: cover; background-position: 50%;}
.mainDoctor__top .mainTitle {text-align: center;}
.mainDoctor__top {display: flex; align-items: center; justify-content: space-between;  margin-bottom: 50rem;}
.mainDoctor__top .arrow {z-index: 10; display: flex; align-items: center; justify-content: center; width: 76rem; height: 76rem; border-radius: 50%; border: 2rem solid #ddd; cursor: pointer; transition:all 0.2s ease-out 0s}
.mainDoctor__top .arrow svg {position: relative; width: 20rem; fill: #d4d6da; transition:all 0.2s ease-out 0s}
.mainDoctor__top .arrow svg::before {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 76rem; height: 76rem; border-radius: 50%; border: 2rem solid #e5e5e5; cursor: pointer;}
.mainDoctor__top .arrow:hover {border-color: var(--secondary);}
.mainDoctor__top .arrow:hover svg {fill: var(--secondary);}
.mainDoctor__box {display: flex; align-items: flex-end; }
.mainDoctor__box .doc__img {position: relative; width: 50%; text-align: center;}
.mainDoctor__box .doc__img::before {content: ''; position: absolute; top: 15%; left: 0; width: 330rem; height: 310rem; background: url(/images/common/symbol.svg) no-repeat; background-size: contain; opacity: 0.1; z-index: -1;}
.mainDoctor__box .doc__img img {vertical-align: middle;  width: 100%; max-width: 450rem;}
.mainDoctor__box .doc__info {width: 50%; margin-left: 50rem; padding-bottom: 50rem;}
.mainDoctor__box .doc__info h3 {display: flex; align-items: center; gap: 20rem; font-size: var(--fs35); font-weight: 700;  font-family: var(--font-noto); margin-bottom: 25rem;}
.mainDoctor__box .doc__info h3 span {display: inline-block; font-size: var(--fs20); font-weight: 500; margin-top: 5rem; }
.mainDoctor__box .doc__info dl {width: 100%; padding: 25rem 10rem;  margin: 0; box-sizing: border-box; border-top: 2rem solid #111; border-bottom: 2rem solid #111;}
.mainDoctor__box .doc__info dt {font-size: var(--fs20); font-weight: 600; margin-bottom: 15rem;}
.mainDoctor__box .doc__info dd+dd {margin-top: 8rem;}
.mainDoctor__box .doc__info dd {position: relative; padding-left: 15rem; margin-left: 0; font-size: var(--fs18); color: #666; line-height: 1.7;}
.mainDoctor__box .doc__info dd::before {content: ''; position: absolute; top: 13rem; left: 0; width: 4rem; height: 4rem; background: #c5c5c5;}

/* mainSubject - 진료과목 */
.mainSubject { padding: 120rem 0; background: #10315b url(/images/main/sec3_bg.jpg) no-repeat; background-size: cover; background-position: 50% 50%;}
.mainSubject .mainTitle {text-align: center; color: var(--white); margin-bottom: 50rem;}
.mainSubject .mainTitle small {color: var(--secondary); font-weight: 500; margin-bottom: 15rem}
.mainSubject__list li {display: grid; gap: 25rem; grid-template-columns: repeat(2,1fr);}
.mainSubject__list li+li {margin-top: 30rem;}
.mainSubject__list li:nth-child(2) .info {grid-area: 1;}
.mainSubject__list .info {position: relative; display: flex; flex-direction: column; justify-content: center; border-radius: 12rem; padding: 50rem 20rem; overflow: hidden; background: #fff; text-align: center; }
.mainSubject__list .info small {color: var(--primary); font-size: 16rem; letter-spacing: -0.5rem; font-weight: 500; font-style: italic;}
.mainSubject__list .info h3 {font-size: var(--fs30);font-weight: 700; font-family: var(--font-noto); margin: 10rem 0 20rem;}
.mainSubject__list .info p {font-size: var(--fs17); line-height: 1.7; color: #666;}
.mainSubject__list .info:hover .hover {opacity:1;transition:all 0.5s ease-out 0s }
.mainSubject__list .img {border-radius: 15rem; overflow: hidden; }
.mainSubject__list .img img {width: 100%; height: 100%; max-width: 100%; object-fit: cover;}
.mainSubject__list .hover {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: flex; align-items: center; justify-content: center; width: 110%; height: 110%; background: rgba(0, 0, 0, 0.7);opacity: 0; }
.mainSubject__list .hover p {display: flex; align-items: center; justify-content: center; width: 120rem; height: 120rem; border-radius: 50%; background: var(--primary); color: #fff; font-size: 15rem; font-weight: 300; }

/* mainLocation - 오시는길 */
.mainLocation {display: grid; align-items: center; grid-template-columns: repeat(2,1fr);}
.mainLocation__info {padding: 0 80rem 0 260rem; }
.mainLocation .mainTitle {margin-bottom: 40rem;}
.mainLocation .mainTitle small {color: var(--primary);}
.mainLocation .mainTitle h2 {font-size: var(--fs45); font-style: italic; }
.mainLocation .cs__cont li {display: flex; padding: 25rem 20rem; border-top: 1rem solid #e5e5e5;}
.mainLocation .cs__cont li:last-child {border-bottom: 1rem solid #e5e5e5;}
.mainLocation .cs__cont li p {position: relative; font-style: italic; font-weight: 600; width: 140rem; padding-left: 20rem;}
.mainLocation .cs__cont li p::before {content: ''; position: absolute; top: 6rem; left: 0; width: 5rem; height: 8rem; background: url(/images/common/icon_slash.svg) no-repeat;}
.mainLocation .cs__cont li dl {margin: 0;}
.mainLocation .cs__cont li dd {font-style: italic; color: #444;}
.mainLocation .cs__cont li dd+dd {margin-top: 10rem;}
.mainLocation .cs__cont {margin-bottom: 25rem;}
.mainLocation .cs__list  .red {color: #c51917; font-weight: 400;}
.mainLocation .cs__list em {display: block; font-weight: 300;}
.mainLocation .cs__list em+em {margin-top: 8rem;}
.mainLocation__map .root_daum_roughmap {width: 100%; }
.mainLocation__map .root_daum_roughmap .wrap_map {height: 800rem;}
.mainLocation__map .root_daum_roughmap .wrap_controllers{display: none;}
.mainLocation .tab__menu {display: flex; justify-content: flex-end; align-items: center; gap: 8rem; margin-top: 25rem;}
.mainLocation .tab__menu li {display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 15rem; width: 165rem; height: 52rem; border: 1rem solid #e4e6ea;}
.mainLocation .tab__menu li.on {background: #10315b; color: #fff; border-color:#10315b;}
.mainLocation .tab__box {height: 100%;}
.mainLocation .tab__cont {position: relative; display: block; overflow: hidden; opacity: 0; height: 0; pointer-events: none;}
.mainLocation .tab__cont.on { opacity: 1; height: auto; pointer-events: all;}
.mainLocation .tab__cont .roughmap {width: 100%; height: 800rem; background: #ddd;}
.mainLocation .tab__cont .roughmap img {width: 100%; height: 100%; max-width: 100%; object-fit: cover;}

@media(max-width: 1500px){
	.mainLocation__info {padding: 0 70rem 0 70rem;}
}
@media(max-width: 1280px){
	.mainLocation__info {padding: 0 40rem 0 40rem;}
}
@media(max-width:1080px){
	.mainLocation { grid-template-columns: repeat(1,1fr);}
	.mainLocation__info {padding: 60rem 0; margin: 0 auto; max-width: calc(var(--inr) * 1rem); width: calc(var(--inr-width) * 100%);}
	.mainLocation__map .root_daum_roughmap .wrap_map {height: 500rem;}
	.mainLocation .tab__cont .roughmap {height: inherit;}
}

@media(max-width:767px){
	/* 공통 */
	.mo_hide {display: none;}
	.mainTitle small {margin-bottom: 10rem;}
	.mainTitle p {margin-top: 20rem;}
	/* 병원소개 */
	.mainAbout {padding: 70rem 0;}
	.mainAbout__top {flex-direction: column; gap: 30rem;}
	.mainAbout__btn {align-self: flex-end;}
	.mainAbout__btn svg {width: 50rem;}
	.mainAbout__swiper {padding-bottom: 30rem;}
	.mainAbout__swiper .swiper-slide {width: 100% !important; height: 300rem}
	.mainAbout__swiper .swiper-slide img {width: 100%; object-fit: cover;}
	/* 의료진 */
	.mainDoctor {padding: 70rem 0;}
	.mainDoctor__top {margin-bottom: 30rem; justify-content: center;}
	.mainDoctor__box {flex-direction: column;}
	.mainDoctor__box .doc__img {width: 100%;}
	.mainDoctor__box .doc__img img {max-width: 300rem;}
	.mainDoctor__box .doc__info {width: 100%; margin-left: 0;}
	.mainDoctor__box .doc__info h3 {gap: 10rem; margin-bottom: 0; padding: 20rem 10rem; border-top: 2rem solid #111}
	.mainDoctor__box .doc__info dl {padding: 20rem 10rem; border-top: 1rem dotted #c5c5c5; margin: 0;}
	.mainDoctor__box .doc__info dt {margin-bottom: 10rem;}
	.mainDoctor__top .arrow {display: none;}
	/* 진료과목 */
	.mainSubject {padding: 70rem 0;}
	.mainSubject .mainTitle {margin-bottom: 40rem;}
	.mainSubject__list li {gap: 15rem; grid-template-columns: repeat(1,1fr);}
	.mainSubject__list .img {border-radius: 10rem;}
	.mainSubject__list .info {border-radius: 8rem; padding: 40rem 20rem;}
	.mainSubject__list li:nth-child(2) .info {grid-area:auto;}

	.mainSubject__list li+li { padding-top: 30rem; border-top: 1rem dotted rgba(255, 255, 255, 0.3);}
	/* 오시는 길 */
	.mainLocation .mainTitle {margin-bottom: 30rem;}
	.mainLocation .cs__list li {padding: 20rem 0;}
	.mainLocation .cs__list li p {width: 100rem;}
}

/* Quick */
.quick__menu {display: block; position: fixed; bottom: 50rem; right: 50rem; width: 155rem; height: 155rem; border-radius: 50%; background: #03c75a; opacity: 0; visibility: hidden; transition: all 0.4s ease-in-out; z-index: 50;}
.quick__menu.fix {right:50rem; opacity: 1; visibility: visible;}
.quick__menu span {font-size: 15rem; text-align: center; line-height: 1.3; color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.quick__menu img.naver {width:auto; height:15px;}
.quick__menu img.spin {position: absolute; top: 50%; left: 50%; width: 135rem; transform: translate(-50%,-50%); animation: rotate 7s linear infinite; transform-origin: 50% 50%;}

@keyframes rotate{
    100% {
        transform: translate(-50%,-50%) rotate(360deg);
    }
}

@media(max-width: 767px){
	.quick__menu {width: 280rem; height: 60rem; border-radius: 30rem; left: 50%; right: auto; bottom: 20rem; transform: translateX(-50%);}
	.quick__menu span {width: 100%; font-size: 16rem; font-weight:bold;}
	.quick__menu span br {display: none;}
	.quick__menu img.spin {display: none;}
}