:root{--ani:cubic-bezier(.32,.94,.6,1)}


::selection {background-color: #d6ebeb;}

.main .xgap3 {--x-gap:3rem;}
.main .xgap4 {--x-gap:4rem;}
.main .xgap5 {--x-gap:5rem;}
.main .xgap7 {--x-gap:7rem;}

.main .ygap3 {--y-gap:3rem;}
.main .ygap4 {--y-gap:4rem;}
.main .ygap5 {--y-gap:5rem;}
.main .ygap7 {--y-gap:7rem;}

.main .max1370 {max-width: 1370px; margin: auto;}


.main .Tit_Deco {color:var(--pointcolor); font-weight: 700; text-transform: uppercase; font-size: 1.125rem; position: relative; padding-right: 6rem; width: fit-content;}
.main .Tit_Deco:after {content:''; width: 4.5625rem; height: .25rem; background-image: linear-gradient(to right, var(--pointcolor), transparent); position: absolute; right:0; top:0; bottom:0; margin: auto;}

.main .Tit_Deco.Wh {color:#fff;}
.main .Tit_Deco.Wh:after {background-image: linear-gradient(to right, #fff, transparent);}

.main .Title {font-size: 3.75rem; font-weight: 700; line-height: 1.2;}
.main .subTitle {font-size: 1.75rem; margin-top: 2.5rem;}

.main .moreBtn {font-weight: 900; border-bottom:3px solid #000; padding-bottom: .1875rem; display: inline-block; transition: .5s;}
.main .moreBtn.Wh {border-color:#fff; color:#fff; font-weight: 600;}
.main .moreBtn:hover {border-color: var(--pointcolor); color:var(--pointcolor); transition: .5s;}
.main .moreBtn.Wh:hover {border-color: #000; color:#000; transition: .5s;}


 

/* mainSlide */
#mainSlide {overflow:hidden;position:relative;width:100%; height: 48.5625rem; /* aspect-ratio: 16/8; */ transition:transform .6s var(--ani)}

#mainSlide .mainSwiper {opacity:0;transform:scale(1.05);width:100%;height:100%;transition:all 2s var(--ani)}
#mainSlide .mainSwiper.on {opacity:1;transform:scale(1)}
#mainSlide .mainSwiper .swiper-slide {height:100%;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:transform .3s}
#mainSlide .mainSwiper .swiper-slide-active {transform:skew(0)}
#mainSlide .bg {position:absolute;left:0;top:0;width:100%;height:100%;background-repeat:no-repeat; background-position: left !important; background-size:cover}

#mainSlide .bg.bg-1 {background-image:url('/img/main/mainSlide01.jpg')}
#mainSlide .bg.bg-2 {background-image:url('/img/main/mainSlide02.jpg')}
#mainSlide .bg.bg-3 {background-image:url('/img/main/mainSlide03.jpg')}
#mainSlide .bg.bg-4 {background-image:url('/img/main/mainSlide04.jpg')}
#mainSlide .bg.bg-5 {background-image:url('/img/main/mainSlide05.jpg')}

#mainSlide .swiper-pagination {bottom:5rem;}
#mainSlide .swiper-pagination-bullet {width: 3.37rem; height: .3125em; border:none; border-radius: 0; background-color: #fff; opacity: 1;}
#mainSlide .swiper-pagination-bullet-active {background-color: var(--pointcolor);}
@media(max-width:768px){
    #mainSlide {height: 100vh;}
	/* #mainSlide .bg {aspect-ratio: 125 / 163;} */
    #mainSlide .bg.bg-1 {background-image:url('/img/main/mainSlide01_m.jpg')}
    #mainSlide .bg.bg-2 {background-image:url('/img/main/mainSlide02_m.jpg')}
	#mainSlide .bg.bg-3 {background-image:url('/img/main/mainSlide03_m.jpg')}
    #mainSlide .bg.bg-4 {background-image:url('/img/main/mainSlide04_m.jpg')}
	#mainSlide .bg.bg-5 {background-image:url('/img/main/mainSlide05_m.jpg')}


    #mainSlide .swiper-pagination {bottom:5rem;}
}



/* youtube */
#youtube .youtubeBox{position:relative;}
#youtube .youtubeBox .youtubeRight{position:absolute;top:0;right: 0;bottom:0;height: 100%;}
/* #youtube .youtubeBox .youtubeRight .swiper{height: 100%; padding-right: 2rem;}
#youtube .youtube_thumb .swiper-slide.swiper-slide-active {opacity: 1;} */

#youtube .play_video{position: relative; overflow: hidden; width: 100%; height: 0; padding-bottom: 56.25%; margin: 0 auto;}
#youtube .play_video iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
#youtube .play_thumb {aspect-ratio:16/4; overflow-y: auto; padding:0 1%;}
#youtube .play_thumb li+li{margin-top:10px}
#youtube .play_thumb .thumb_nail{}


/* #youtube .swiper-slide .img{aspect-ratio: 16 / 9;overflow: hidden;position:relative;top:0;left: 0;}
#youtube .swiper-slide .img img{width: 100%;position:absolute;top:50%;left:50%;transform: translate(-50%,-50%);}
#youtube .swiper-slide > .flex-wrap {align-items: center;height:100%;padding-left: 0;}
#youtube .youtubeRight .swiper-slide .img {width: auto;}
#youtube .youtubeRight .swiper-slide .img img {width: 100%;position: relative;top: 0;left: 0;transform: translate(0,0);}

#youtube .swiper-pagination-progressbar {height: 100%; top: 50%;transform: translateY(-50%);left: auto;right: 0;width: 4px;background: #e5e5e5;}
#youtube .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background: var(--pointcolor);}
*/
@media (max-width:768px){
    #youtube .youtubeBox .youtubeLeft {width: 100%;}
    #youtube .youtubeBox .youtubeRight {position: relative;bottom: auto;height: auto;padding-left: 0;width: 100%;margin-top:1rem;}
    #youtube .play_thumb {min-height: 18.5rem; margin-top: 0; overflow-y: hidden;}
    #youtube .youtubeBox .youtubeRight .scrollBox {display: flex; align-items: center; gap:0 1rem; overflow: hidden; min-width: 768px;}
    #youtube .youtubeBox .youtubeRight::-webkit-scrollbar {height: 5px;} 

    #youtube .play_thumb li {min-width: 29%; width:21rem;}
    #youtube .play_thumb li+li{margin-top:0}
} 
@media (max-width:500px){
    #youtube .play_thumb {min-height: 16rem;}
    #youtube .play_thumb li {min-width: 18%;}
}



/* subject */
#subject {background-color: #eaf8f8; overflow: hidden;}
#subject .BgLogo {position: absolute; right: 0; top:2rem; z-index: 0; width: 23.0625rem;}
#subject .cont_box {position: relative; z-index: 3;}
@media(max-width:500px){
    #subject .BgLogo {top:auto; bottom:5rem; right:-4rem;}
}



/* doctor */
#doctor {background: no-repeat center url('/img/main/doctorBg.jpg'); background-size: cover; position: relative;}
#doctor .Desc {position: relative; /* top:50%; margin: auto; z-index: 3; transform: translateY(50%); */}
/* #doctor .doctorImg {position: absolute; bottom:-7px; z-index: 1;} 
#doctor .doctorL { max-width: 28.5rem; width: 100%; left: 0;}
#doctor .doctorR { max-width: 27.3125rem; width: 100%; right:0;} */
@media(max-width:768px){
    #doctor {background-image: url('/img/main/doctorBg_m.jpg');  aspect-ratio: 10/18; }
    #doctor .Desc {position: absolute; margin: auto; z-index: 3; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 95%;}
}
/* @media (max-width:1100px){
    #doctor .max1370 {padding-bottom: 15em;}
}
@media(max-width:990px){
    #doctor .max1370 {padding-bottom: 0;}
    #doctor .ImgBox {display: flex; align-items: center; justify-content: space-between;}
    #doctor .doctorImg {position: relative; width: 50%;}
}
@media(max-width:500px){
    #doctor .doctorImg {width: 60%; margin-left: -2rem;}
} */



/* special */
#special .slide_flex {display: flex; gap:3rem 1rem}
#special .slideBtn {position: relative; display: flex; align-items: center; gap:0 .5rem; max-width: 144px;}
#special .swiper-button-next, #special .swiper-button-prev {position: relative; width: 4.375rem; height: 4.375rem; top:auto; margin-top: 0;}
#special .swiper-button-next {border: 2px solid var(--pointcolor); right: 0;} 
#special .swiper-button-prev {background-color: var(--pointcolor); left: 0;}
#special .swiper-button-next:after, #special .swiper-button-prev:after {content:'';}
#special .swiper-button-prev img {transform: rotate(180deg); filter: brightness(10);}
#special .slideBtn img {width: 1.8125rem;}

#special .Desc {background-color: rgba(49,49,49,.6); padding: 2rem; color:#fff; width: 100%; position: absolute; bottom:0; left: 0;}

@media(max-width:768px){
    #special .Desc {position: relative;}
}



/* equipment */
#equipment {background: no-repeat center url('/img/main/equipmentBg.jpg'); background-size: cover;}
#equipment ul li {width: fit-content; margin: auto; padding: .5rem 3rem; background: linear-gradient(to right, transparent, rgba(255,255,255,.3), transparent);}
#equipment ul li + li {margin-top: 1rem;}

#equipment .equipmentImg {position: absolute; top:0; margin: auto;}
#equipment .equipmentL {width: 25.4375rem; left: 3rem; bottom:-5rem;} 
#equipment .equipmentR {width: 33.125rem; right: -3rem; bottom:-5rem;} 

@media(max-width:1540px){
    #equipment .equipmentL {width: 23.1875rem;}
    #equipment .equipmentR {width: 29.875rem;}
}
@media(max-width:1340px){
    #equipment .equipmentL {width: 20.1875rem;}
    #equipment .equipmentR {width: 26.875rem;}
}
@media(max-width:1240px){
    #equipment .equipmentL {width: 17.1875rem;}
    #equipment .equipmentR {width: 23.875rem;}
}
@media(max-width:990px){
    #equipment .equipmentBox {display: flex;}
    #equipment .equipmentImg {position: relative; margin-bottom: -4rem;}
    #equipment .equipmentL {}
    #equipment .equipmentR {right:0;}
}
@media(max-width:500px){
    #equipment .equipmentBox {justify-content: center;}
    #equipment .equipmentL {left: 2rem;}
    #equipment .equipmentR {right:3rem; width: 25rem;}
    #equipment ul li {padding: 0.6rem 2rem;}
}





/* info */
#info .box {padding: 2rem 0; border-left:1px solid #a0a0a0;}
#info .box:last-child {border-right:1px solid #a0a0a0;}

#info .mapBox {width:100%; height: 48.4375rem; position: relative;}
#info .root_daum_roughmap, #info .wrap_map {width:100%; height: 48.4375rem;}
#info .mapTit {font-size: 2.5rem; color:#fff; padding: .7rem 1rem; background-color: var(--pointcolor); width: 100%; position: absolute; left:0; bottom:0; z-index: 3;}
@media(max-width:768px){
    #info .flexList {--x-gap:1rem;}
    #info .box {border-right:none; border-left:none;}
    #info .box:last-child {border:none;}
    #info .box:nth-child(-n+2) {border-bottom:1px solid #a0a0a0;}
    #info .box:nth-child(odd) {border-right:1px solid #a0a0a0;}
}



/* footer */
footer {background-color: #000;}
footer .footerList {background-color: #313131; display: flex; align-items: center; justify-content: center; padding: 15px 1rem;}
footer .footerList a {color:#fff; padding: 0 1.5rem; position: relative; font-weight: 600;}
footer .footerList a:after {content:''; height: 100%; width: 1px; background-color: #fff; position: absolute; right:0;}
footer .footerList li:last-child a:after {display: none;}

/* footer .footerLogo {width: 15.1875rem;} */
footer .section_mini p {color:#b5b5b5; letter-spacing: 0; line-height: 1.7;}
footer .section_mini span {font-weight: 800;}
