.main {overflow: hidden; max-width: 2560px; margin: auto;}

@media(max-width:768px) {
    .font-30 {font-size: 2.125rem;}
    .font-24 {font-size: 1.75rem;}
    .font-18 {font-size: 1.5rem;}
    .font-16 {font-size: 1.25rem;}
}
/* 버튼 */
a.more {text-decoration: underline; text-underline-offset: 2px; letter-spacing: 0.025rem; width: fit-content;}
a.more img {transition: 0.45s;}
a.more:hover img {transform: translateX(5px);}

/* 타이틀 */
.main .tit h2 {padding-top: 1rem; position: relative;} 
.main .tit h2:after {position: absolute; left: 0; top: 0; width: 3.125rem; height: 5px; background: var(--pointcolor); content: "";}

@media(max-width:768px) {
    .main .tit h2:after {height: 3px; width: 3rem;}
}

/* 가운데 */
.main .tit h2.center:after {left: 50%; transform: translateX(-50%);}

/* 메인슬라이드 */
.main #mainSlide {height: 57rem;}
.main #mainSlide .swiper {height: 100%;}
.main #mainSlide .swiper-slide {position: relative; width: 100%;}

/* 배경 */
.main #mainSlide .swiper-slide .bg {background-position: center; background-size: cover; width: 100%; height: 100%; transform: scale(1.1); transition: 2s;}
.main #mainSlide .swiper-slide.slide01 .bg {background-image: url("/img/main/mainSlide01.jpg");}
.main #mainSlide .swiper-slide.slide02 .bg {background-image: url("/img/main/mainSlide02.jpg");}
.main #mainSlide .swiper-slide.slide03 .bg {background-image: url("/img/main/mainSlide03.jpg");}
.main #mainSlide .swiper-slide.slide04 .bg {background-image: url("/img/main/mainSlide04.jpg");}
.main #mainSlide .swiper-slide.swiper-slide-active .bg {transform: scale(1);}

@media(max-width:768px) {
    .main #mainSlide {height: 70rem;}
    .main #mainSlide .swiper-slide.slide01 .bg {background-image: url("/img/main/mainSlide01_m.jpg");}
    .main #mainSlide .swiper-slide.slide02 .bg {background-image: url("/img/main/mainSlide02_m.jpg"); background-position: 80%;}
    .main #mainSlide .swiper-slide.slide03 .bg {background-image: url("/img/main/mainSlide03_m.jpg"); background-position: 30%;}
    .main #mainSlide .swiper-slide.slide04 .bg {background-image: url("/img/main/mainSlide04_m.jpg");}
}

/* 문구 */
.main #mainSlide .swiper-slide .txt {position: absolute; left: 50%; top: 55%; transform: translate(-50%, -50%); width: 90%; margin: auto; z-index: 1;}
.main #mainSlide .swiper-slide.slide02 .txt,
.main #mainSlide .swiper-slide.slide04 .txt  {top: 50%; left: calc((100% - var(--layoutwidth)) / 2); transform: translateY(-50%);}
 

@media(max-width:1550px) {
    .main #mainSlide .swiper-slide.slide02 .txt,
    .main #mainSlide .swiper-slide.slide04 .txt {left: 5%;}
}

@media(max-width:768px) {
    .main #mainSlide .swiper-slide .txt {top: 50%;}
    .main #mainSlide .swiper-slide.slide02 .txt {top: 30%; text-align: center;}
    .main #mainSlide .swiper-slide.slide03 .txt {top: 30%;}
    .main #mainSlide .swiper-slide.slide04 .txt {top: 30%; text-align: left; color: #fff;}
    .main #mainSlide .swiper-slide.slide04 .txt .point-color {color: #fff0d3 !important;}
    .main #mainSlide .swiper-slide.slide04 .txt .sub-color {color: #ffd9d9 !important;}
}

@media(max-width:500px) {
    .main #mainSlide .swiper-slide.slide02 .txt  {top: 35%;}
}

/* 메인 페이지네이션 */
.main #mainSlide .page-btn-wrap {position: absolute; left: 50%; transform: translateX(-50%); bottom: 6.5rem; z-index: 1; gap: 2rem;}
.main #mainSlide .progress-box {position: relative; width: 232px; height: auto; z-index: 2;}
.main #mainSlide .autoplay-progress {position: absolute; left: 35px; top: 10px; z-index: 3; width: 162px; height: 3px; background-color: rgba(0, 0, 0, 0.3);}
.main #mainSlide .autoplay-progress svg {--progress: 0; position: absolute; left: 0; top: 0; z-index: 11; width: 100%;  height: 3px; stroke-width: 3px; stroke: #000; fill: none; stroke-dashoffset: calc(162 * (1 - var(--progress))); stroke-dasharray: 162; }
.main #mainSlide .swiper-pagination {display: flex; justify-content: space-between; position: static; text-align: left;}
.main #mainSlide .autoplay-btn {cursor: pointer;}
.main #mainSlide .autoplay-btn img.on {display: block;}
.main #mainSlide .autoplay-btn img.off {display: none;}
.main #mainSlide .autoplay-btn.on img.on {display: none;}
.main #mainSlide .autoplay-btn.on img.off {display: block;}

@media(max-width:768px) {
    .main #mainSlide .page-btn-wrap {bottom: 4.5rem;}
    .main #mainSlide .progress-box {width: 160px;}
    .main #mainSlide .autoplay-progress  {width: 100px; top: 5px; left: 30px;}
    .main #mainSlide .autoplay-progress svg {stroke-dashoffset: calc(100 * (1 - var(--progress))); stroke-dasharray: 100; }
    .main #mainSlide .autoplay-btn img {width: 10px;}
}

/* 시그니처 */
.main #signature .tit {width: 29%;}
.main #signature a.more {padding-right: 2rem; width: 100%;}
.main #signature .cont {border-left: 1px solid var(--linecolor); border-right: 1px solid var(--linecolor); position: relative;}
.main #signature .cont:after {position: absolute; left: 50%; top: 0; width: 1px; height: 100%; background: var(--linecolor); content: ""; z-index: 1;}
.main #signature .imgbox {box-sizing: border-box;}
.main #signature .txt {background: #fff; width: 17.625rem; padding: 2.5rem 2.5rem 2.5rem 1rem; position: absolute; left: 0; top: 0;}
.main #signature p.desc {position: absolute; left: 0; top: 0; background-color: rgba(0, 0, 0, 0.4); width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; text-align: center; opacity: 0; transition: 0.45s;}
.main #signature .item:hover p.desc {opacity: 1;}
.main #signature .item.on p.desc {opacity: 1;}

@media(max-width:1440px) {
    .main #signature .tit {width: 24%;}
    .main #signature .width65 {width: 70%;}
}

@media(max-width:1240px) {
    .main #signature a.more {padding-right: 1rem;}
    .main #signature .txt {width: 15rem;  padding: 1.5rem 1.5rem 1.5rem 1rem; font-size: 2rem;}
}

@media(max-width:990px) {
    .main #signature .container {border-left: 1px solid var(--linecolor); border-right: 1px solid var(--linecolor);}
    .main #signature .wrap {display: block;}
    .main #signature .tit {text-align: center; width: 100%; padding-bottom: 0;}
    .main #signature .tit h2.left:after {left: 50%; transform: translateX(-50%);}
    .main #signature .cont {border: none;}
    .main #signature .cont:after {display: none;}
    .main #signature .cont .item {width: 60%;}
    .main #signature .cont .box:nth-child(odd) {display: flex; justify-content: flex-end;}
    .main #signature .txt {top: -4.375rem; font-size: 2.25rem; padding: 2.5rem 2.5rem 2.5rem 1rem; width: 18rem;}
    .main #signature .item p.desc {opacity: 1;}
}

@media(max-width:768px) {
    .main #signature .cont .item {width: 70%;}
}

@media(max-width:500px) {
    .main #signature .cont .item {width: 80%;}
}

@media(max-width:450px) {
    .main #signature .txt {width: 15rem;  padding: 2rem 2rem 2rem 1rem; font-size: 2rem;}
}

@media(max-width:360px) {
    .main #signature .cont .item {width: 100%;}
    .main #signature .txt {width: 14rem; }
}

@media(max-width:280px) {
    .main #signature .txt {width: 10rem; padding: 1.5rem;}
}

/* 의료진 */
#doc {border-top: 1px solid var(--linecolor); overflow: hidden;}
#doc .flexList.cont {border-bottom: 1px solid var(--linecolor); padding: 1rem 0; position: relative;}
#doc .flexList.cont:after {position: absolute; left: calc(50% + 7rem); width: 1px; background: var(--linecolor); content: ""; height: 100%; top: 0; z-index: -1;}
#doc .tit {padding: 3rem 5% 3rem 5rem;}
#doc .bg {width: 90%; height: 100%; padding-bottom: 7.5rem;}
#doc .bg img {height: 100%;}
#doc .img {position: absolute; right: 0; top: 9rem;}
#doc .img img {width: 36.75rem;}
.visible-pc {display: none;}

.main #doc .emblem {position: absolute; top: 30px; right: 0; filter: grayscale(1);}
.main #doc .emblem img {width: 20rem;}

@media(max-width:1550px) {
    #doc .img {top: 6rem;}
}

@media(max-width:1440px) {
    #doc .img img {width: 34rem;}
    #doc .emblem img {width: 15rem;}
}

@media(max-width:1240px) {
    #doc .flexList.cont:after {left:  calc(50% + 2rem);}
    #doc .tit {padding: 3rem 5% 3rem 0;}
    #doc .bg {width: 80%;}
    #doc .img {top: 5rem; right: 5rem;}
    #doc .img img {width: 32rem;}
}

@media(max-width:990px) {
    .main #doc .emblem {top: auto; bottom: 20px;}
    .main #doc .emblem img {width: 20rem;}
    #doc .flexList:after {left: 5%;}
    #doc .bg {width: 100%; padding-bottom: 0;}
    #doc .bg img {width: 100%; aspect-ratio: auto;}
    #doc .tit {width: 90%; margin: 15rem auto; padding: 6.25rem 0;}
    #doc .img {width: 70%; top: 7.5rem; right: 5%;}
    #doc .img img {width: 100%;}
}

@media(max-width:500px) {
    #doc .img {width: 75%;}
   .main #doc .emblem img {width: 15rem;}
}

@media(max-width:440px) {
    #doc br.mo {display: none !important;}
}

@media(max-width:380px) {
    #doc .tit {margin: 8rem auto;}
    #doc .img {top: 5rem;}
}

@media(max-width:320px) {
    #doc p span.sub-color br {display: none !important;}
}

/* 스페셜 */
.main #special {background-image: url("/img/main/special_bg.jpg"); background-size: cover;}
.main #special .box {padding-top: 200px;}
.main #special .pgbox {border-left: 1px solid var(--linecolor); padding-left: 4rem;}

.main #special .tit {padding-left: calc(65% - var(--layoutwidth)  / 2);}
.main #special .tit h2:after {display: none;}

.main #special .imgbox {width: 55%;}
.main #special .txtbox {padding-left: 4rem; padding-top: 6.25rem; width: 45%;}
.main #special .swiper-pagination2 {position: absolute; left: calc(55% + 4rem); bottom: 6.25rem; z-index: 5; text-align: left;}

.main #special .swiper-pagination {position: initial; display: block;}
.main #special .swiper-pagination .swiper-pagination-bullet {margin: 0; width: 100%; opacity: 0.4; height: auto; background: transparent; text-align: left; transition: 0.45s; margin-top: 2.5rem; cursor: pointer; border-radius: 0; width: fit-content; display: block; position: relative;} 
.main #special .swiper-pagination .swiper-pagination-bullet-active {color: var(--pointcolor); opacity: 1;}
.main #special .swiper-pagination .swiper-pagination-bullet::before {position: absolute; left: 0; bottom: 5px; width: 0%; height: 2px; background: var(--pointcolor); content: ""; transition: 0.45s;}
.main #special .swiper-pagination .swiper-pagination-bullet-active::before {width: 100%;}

@media(max-width:1550px) {
    .main #special .box  {padding-top: 130px;}
    .main #special .box.width80 {width: 85%;}
    .main #special .box.width20 {width: 15%;}
    .main #special .tit {padding-left: 5%;} 
    .main #special .pgbox {padding-left: 2rem;}
    .main #special .swiper-pagination {font-size: 2.5rem;}
}

@media(max-width:1240px) {
    .main #special .box.width80 {width: 100%;}
    .main #special .box.width20 {width: 100%;}
    .main #special .swiper {margin-top: 0;}
    .main #special .swiper-wrapper {width: 90%; margin: auto;}
    .main #special .tit {width: 100%;}  
    .main #special .pgbox {padding-left: 0; border-left: 0; border-top: 1px solid var(--linecolor); border-bottom: 1px solid var(--linecolor); margin: 5rem 0 3.5rem;}
    .main #special .imgbox {width: 50%;}
    .main #special .txtbox {padding-right: 5%; width: 45%; padding-top: 4.5rem;}
    .main #special .pgbox .swiper-pagination {display: flex; column-gap: 5rem; row-gap: 2rem; flex-wrap: wrap; justify-content: center; font-size: 3.125rem; padding: 3rem 5% 2rem; }
    .main #special .swiper-pagination .swiper-pagination-bullet {margin-top: 0 !important;}
    .main #special .swiper-pagination2 {left: calc(55% + 4rem); bottom: 2.5rem;}
}

@media(max-width:990px) {
    .main #special {padding-bottom: 100px;}
    .main #special .box  {padding-top: 100px;}
    .main #special .swiper-slide.flex {display: block;}
    .main #special .imgbox {width: 100%;}
    .main #special .imgbox img {width: 90%;}
    .main #special .txtbox {width: 90%; padding-right: 0; padding-left: 0;}
    .main #special .txtbox .hidden-md {display: block !important;}
}

@media(max-width:768px) {
    .main #special {padding-bottom: 80px;}
    .main #special .box  {padding-top: 80px;}
}

@media(max-width:500px) {
    .main #special .pgbox .swiper-pagination {column-gap: 2.5rem;}
}

@media(max-width:375px) {
    .main #special .txtbox p br.hidden-md,
    .main #special .txtbox p br {display: none !important;}
}

/* 이벤트 */
.main #event .cont {border-top: 1px solid var(--linecolor);}
.main #event .cont li {border-bottom: 1px solid var(--linecolor); padding: 2rem calc((100% - var(--layoutwidth)) / 2); transition: 0.45s; cursor: pointer;}
.main #event .cont li:hover {background: var(--sub2color);}
.main #event .cont li .imgbox {width: 22rem;}
.main #event .cont li .txtbox {width: calc(100% - 22rem);}
.main #event .cont li p.en {text-transform: uppercase;}
.main #event .cont li p.date {position: absolute; right: 0; top: 50%; transform: translateY(-50%);}

@media(max-width:1550px) {
    .main #event .cont li {padding: 2rem 5%;}
}

@media(max-width:768px) {
    .main #event .width100.flex {justify-content: center !important; margin-top: 2rem;}
    .main #event .cont li {padding: 3rem 5%;}
    .main #event .cont li p.date {position: initial; transform: none; margin-top: 1rem;}
    .main #event .cont li .txtbox {padding-left: 2.5rem;}
    .main #event .cont li h3 {padding-top: 3px;}
    .main #event .cont li p { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
}

@media(max-width:500px) {
    .main #event .cont li {display: block;}
    .main #event .cont li .imgbox {width: 100%;}
    .main #event .cont li .imgbox img {width: 100%;}
    .main #event .cont li .txtbox {width: 100%; padding-left: 0; padding-top: 2.5rem;}
}

/* 롤링txt */
.rolling-txt {padding: 50px 0 20px;}
.rolling-txt .wrap {display: flex; overflow: hidden;}
.rolling-txt .rolling-list {display: flex; flex-shrink: 0; gap: 1.5rem;}
.rolling-txt .rolling-list .list {font-size: 9.375rem; color: var(--sub2color); display: flex; align-items: center; text-transform: uppercase; opacity: 0.3; line-height: initial;}


@keyframes rolling1 {
	0% { transform: translateX(0); }
	50% { transform: translateX(-100%); }
	50.01% { transform: translateX(100%); }
	100% { transform: translateX(0); }
}

@keyframes rolling2 {
	0% { transform: translateX(0); }
	100% { transform: translateX(-200%); }
}

.rolling-list.original {animation: rolling1 50s linear infinite;}
.rolling-list.clone {animation: rolling2 50s linear infinite;}

/* 공간 */
.main #space {background-image: url("/img/main/space_bg.jpg"); background-position: top 50%; background-repeat: no-repeat;}
.main #space .tit h2:after {display: none;}
.main #space .tit p.point-color {color: #ffe7be !important;}
.main #space .tit a.more {color: #fff;}
.main #space .tit a.more img {-webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);}

#space .swiper-slide {height: 650px; width: auto;}
#space .swiper-slide img {height: 100%;}
#space .swiper-pagination {margin: 2rem auto 0; height: 2px; position: initial; width: 100%;}
#space .swiper-pagination-progressbar {background: var(--light-gray);}
#space .swiper-pagination-progressbar-fill  {background: var(--pointcolor);}
#space .pg {margin-right: calc((100% - var(--layoutwidth)) / 2);}

@media(max-width:1550px) {
    #space .pg {margin-right: 5%;}
}

@media(max-width:1240px) {
    .main #space .tit {width: 55%;}
}

@media(max-width:990px) {
    .main #space .tit-wrap {flex-direction: column;}
    .main #space .tit {width: 100%;}
    .main #space a.more {padding-right: 0;}
}

@media(max-width:768px) {
    #space .swiper-slide  {height: 500px;}
}

@media(max-width:500px) {
    .main #space .tit .flex-between {display: block;}
    #space .swiper-slide  {height: 350px;}
}

@media(max-width:360px) {
    .main #space .tit p br {display: none !important;}
}


/* 포인트 */
#point .bg_wrap {clip: rect(0, auto, auto, 0); position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#point .bg_wrap .bg {position: fixed; display: block; top: 0; left: 0; width: 100%; height: 100vh; background-repeat: no-repeat; background-position: center top; background-size: cover; transform: translateZ(0); will-change: transform; background-image: url("/img/main/point_bg.jpg"); }

.main #point h2 span {display: inline-block;}
.main #point h2 span.line:after {position: absolute; left: -2.5%; top: 50%; transform: translateY(-50%); background: var(--subcolor); width: 0%; content: ""; height: 100%; z-index: -1; transition: 1s; transition-delay: 1s;}
.main #point h2.aos-animate span.line:after {width: 105%;}
.main #point h2:not(.aos-animate) span.line:after {transition-delay: initial;}


@media(max-width:768px) {
    .main #point .bg_wrap .bg { background-image: url("/img/main/point_bg_m.jpg");}
}

@media(max-width:420px) {
    #point p br.visible-xs {display: none !important;}
}

/* 오시는길 */
.wrap_controllers{display: none !important;}
.root_daum_roughmap .cont {display: none !important;}

#location .item {border-bottom: 1px solid var(--linecolor); padding: 2rem 0;}
#location .item:last-child {border-bottom: 0;}
#location .item p.day {width: 8rem; text-align: justify; position: relative; height: 2.125rem; margin-right: 1.5rem;}
#location .item p.day:after {content: ""; display: inline-block; width: 100%; }
#location .item p.point-bg {padding: 0.1rem 1rem; border-radius: 100px; margin-left: 1rem;}
#location .mapbox > div {width: 100%; z-index: 1;}
#location .mapbox .wrap_map {height: 790px !important;}
#location .navbox {position: absolute; left: 0; bottom: 0;}
#location .navbox a {width: 14rem;  padding: 0.8rem; border: 1px solid #f0f0f0;}
#location .navbox a.naver {background: #fff;}
#location .navbox a.kakao {background: #fbe100;}

@media(max-width:990px) {
    #location .cont {display: block;}
    #location .box {width: 100% !important;}
    #location .mapbox .wrap_map {height: 500px !important;}
    #location .item p.day {width: 8.3rem;}
}

@media(max-width:768px) {
    #location .cont {margin-top: 0;}
    #location .item p.day {width: 9.6rem;}
    #location .mapbox .wrap_map {height: 350px !important;}
    #location .navbox a {width: 15rem;}
    #location .navbox a img {transform: scale(0.8);}
}

@media(max-width:420px) {
    #location .item > div.flex {flex-direction: column; align-items: flex-start; row-gap: 0.3rem;}
}