/* 메인 */
.section { width:100%; position:relative; float: left;}

#main .section .inner {position:relative;}


#visual {width: 100%; height: 38.5rem;}
#visual .swiper {width: 100%; height: 100%;}
#visual .swiper-slide {width: 100%; height: 100%; background-position: center; background-size: cover; }
#visual .swiper-slide .inner2 {height: 100%; display: flex; flex-direction: column; justify-content: center;}
#visual .swiper-slide h3 {font-size: 1.3rem;}
#visual .swiper-slide h1 {position: relative; display: inline-block;}
#visual .swiper-slide h1 span.cj {position: absolute; top: 4.5rem; font-size: 1.75rem; right: 0.5rem;}
#visual .visual1 {background-image: url(images/visual1.jpg);}
#visual .visual2 {background-image: url(images/visual2.jpg);}
#visual .visual3 {background-image: url(images/visual3.jpg);}
#visual .visual4 {background-image: url(images/visual4.jpg);}

#visual .swiper-pagination {position: absolute !important; bottom: 2rem !important; top: auto !important; pointer-events: all !important;}
#visual .swiper-pagination-bullet {width: 0.9rem !important; height: 0.9rem !important; background-color: #333 !important; opacity: 0.7 !important; border-radius: 0.9rem !important; -webkit-transition:all 0.2s ease-out; transition:all 0.2s ease-out; pointer-events: all !important;}
#visual .swiper-pagination-bullet-active {width: 2rem !important; background-color: #fff !important; opacity: 1 !important;}


/* .swiper-button-next,.swiper-button-prev {opacity: 0.3; -webkit-transition:all 0.2s ease-out; transition:all 0.2s ease-out;}
.swiper-button-next {right: 1.5rem !important;}
.swiper-button-prev {left: 1.5rem !important;}
.swiper-button-next:hover,.swiper-button-prev:hover {opacity: 1;} */



.link {}
.link:hover {letter-spacing: 0.15rem;}




#section1 {display: grid; grid-template-columns: 1fr 1fr; position: relative;}
#section1 > div {height:13.5rem; border-left: 1px #e0e0e0 solid; -webkit-transition:all 0.2s ease-out; transition:all 0.2s ease-out;position: relative; background-size: contain !important;}
#section1 > div.clinic1 {background: url(images/section1_clinic1.jpg) center bottom no-repeat; }
#section1 > div.clinic2 {background: url(images/section1_clinic2.jpg) center bottom no-repeat;}
#section1 > div.clinic3 {background: url(images/section1_clinic3.jpg) center bottom no-repeat;}
#section1 > div.clinic4 {background: url(images/section1_clinic4.jpg) center bottom no-repeat;}
#section1 > div.clinic5 {background: url(images/section1_clinic5.jpg) center bottom no-repeat;}
#section1 > div.clinic6 {background: url(images/section1_clinic6.jpg) center bottom no-repeat;}
#section1 > div.clinic7 {background: url(images/section1_clinic7.jpg) center bottom no-repeat;}
#section1 > div.clinic8 {background: url(images/section1_clinic8.jpg) center bottom no-repeat;}
#section1 > div:nth-child(odd) {border-left: 0;}
#section1 > div:hover {background-color: #119c9e; }
#section1 > div:hover h2 {color: #fff;}
#section1 > div > a {display: block; width: 100%; position: absolute; z-index: 1; left:0;  height: 100%;  display: flex; flex-direction: column; justify-content: flex-start; padding: 1.75rem 1.5rem; }
#section1 > div:hover > a {background: url(images/section1_layer.png) center no-repeat;}
#section1 > div span.btn {display: block; margin-top: 0.5rem; font-weight: 700; -webkit-transition:all 0.2s ease-out; transition:all 0.2s ease-out;position: relative;}
#section1 > div:hover span.btn {letter-spacing: 0.25rem; color: #fff;}



#section2 {background: url(images/section2_bg.jpg) center / cover; height: 35rem;}
#section2 .inner {height: 100%; display: flex; flex-direction: column; justify-content: flex-end;}
#section2 .mark {margin: 0 auto 1rem;}
#section2 .doctors {display: flex; justify-content: center; padding-top: 4.5rem;}
#section2 .doctors > div { position: relative;}
#section2 .doctors > div.doctor1 {z-index: 2; margin-left: -2rem;}
#section2 .doctors > div.doctor2 {margin-left: -1.5rem;}
#section2 .doctors > div.doctor3 {z-index: 1;margin-left: -4.25rem;}
#section2 .doctors > div.doctor4 {margin-left: -3rem;}
#section2 .doctors > div img {zoom: 0.7;}




#section3 {background: url(images/section3_bg.jpg) center / cover; height: 35rem; color: #fff; display: flex; flex-direction: column; justify-content: center; text-align: center;}




#section4 {background: url(images/section4_bg.jpg) center top no-repeat; background-size: contain !important; padding-bottom: 10rem;}
#section4 .inner {padding-top: 5rem;}
#section4 .swiper-pagination {position: relative; width: auto; height: auto; display: flex; justify-content: center; margin-top: 1.5rem;}
#section4 .swiper-pagination-bullet {width: auto !important; height: auto !important; background: none; position: relative; padding: 0 1rem; opacity: 0.5;}
#section4 .swiper-pagination-bullet::before {content: ""; width: 0.8rem; height: 0.8rem; border-radius: 0.8rem; background-color: #4dc5c7; position: absolute; top: 3.5rem;left: 50%; margin-left: -0.4rem; opacity: 0;}
#section4 .swiper-pagination-bullet-active {opacity: 1;}
#section4 .swiper-pagination-bullet-active::before {opacity:1;}
#section4 .swiper-pagination-bullet span {font-size: 1rem; display: block; margin-top: 2rem; line-height: 1.5; opacity: 0; position: absolute; width: 10rem; left: 50%; margin-left: -5rem;}
#section4 .swiper-pagination-bullet-active span {opacity: 1;}
#section4 .swiper-button-next,#section4 .swiper-button-prev {color: #fff;}

#section4 .floor_swiper {overflow: hidden;}
#section4 .floor_swiper > div > .swiper-slide {position: relative;}
#section4 .floor_swiper > div > .swiper-slide img {width: 100%;}





#section5 {  padding-bottom: 5rem;}
#section5 .title {background-color: #4dc5c7; padding: 4rem 1.5rem 2rem;}
#section5 .cs {width: 100%; background: url(images/gra_circle.png) -4rem -5rem no-repeat; display: flex; flex-direction: column; justify-content: center; padding-top: 2rem;}
#section5 .cs > div {}
#section5 .cs .justify {height: 0.5rem !important;}
#section5 .location {width: 100%; height: 100%; background-color: #4dc5c7; display: flex; flex-direction: column; justify-content: center; position: relative;}
#section5 .location .root_daum_roughmap {height: 100%;}
.root_daum_roughmap .wrap_map {height: 100%;}

#section5 hr {width: 100%; height: 1px; border: 0; background-color: #e0e0e0; margin: 1.5rem 0;}

#section5 p.reference {text-indent: -0.75rem; margin-left: 0.75rem;}
#section5 a.mapbtn {width: auto; padding: 0 1.5rem; display: inline-block; border-radius: 2rem; text-align: center; line-height: 2.5rem;font-weight: 700;  }
#section5 a.mapbtn.naver {border: 1px #08a800 solid; color: #08a800;margin-right: 0.5rem;}
#section5 a.mapbtn.kakao {border: 1px #3396ff solid; color: #3396ff;}



@media only screen and (max-width:640px) {
    .root_daum_roughmap {height: 70.3125vw; zoom: 0.618;}
    #section2 .doctors > div img {zoom: 0.425;}
    #section4 .swiper-button-next,#section4 .swiper-button-prev {zoom: 0.618;}
}