/* 메인 */
html,body{ margin:0; padding:0; width:100%; height:100%;}
#wrap,#main {margin:0; padding:0; width:100%; height:100%;}
.section { width:100%; height:100%; position:relative; }


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


#visual {width: 100%;}
#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.25rem;}




#section1 {display: flex; position: relative;}
#section1 > div {height:100%; flex: 1; border-left: 1px #e0e0e0 solid; -webkit-transition:all 0.2s ease-out; transition:all 0.2s ease-out;position: relative;}
#section1 > div:hover * {color: #fff;}
#section1 > div.clinic1:hover {background: url(images/section1_clinic1.jpg) center / cover; }
#section1 > div.clinic2:hover {background: url(images/section1_clinic2.jpg) center / cover;}
#section1 > div.clinic3:hover {background: url(images/section1_clinic3.jpg) center / cover;}
#section1 > div.clinic4:hover {background: url(images/section1_clinic4.jpg) center / cover;}
#section1 > div.clinic5:hover {background: url(images/section1_clinic5.jpg) center / cover;}
#section1 > div > a {display: block; width: 100%; position: absolute; z-index: 1; left:0;  height: 100%;  display: flex; flex-direction: column; justify-content: center; padding-left: 2rem; }
#section1 > div:hover > a {background: url(images/section1_layer.png) center no-repeat;}
#section1 > div h4 {font-size: 1.3rem;}
#section1 > div p {opacity: 0.75;}
#section1 > div span.btn {display: block; margin-top: 3rem; 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;}
#section1 > div:hover h1 {color: #c0f8f9; -webkit-transition:all 0.2s ease-out; transition:all 0.2s ease-out;}
#section1 > div.clinic2:hover h1,#section1 > div.clinic3:hover h1 {color: #4dc5c7;}
#section1 .spelling {width: 100%; height: auto; display: flex;     align-items: flex-end; position: absolute; z-index: 1; bottom: 0; opacity: 0.1;}
#section1 .spelling span {flex: 1; color: #4dc5c7; font-size: 10rem; padding-left: 1rem;}




#section2 {background: url(images/section2_bg.jpg) center / cover;}
#section2 .inner {height: 100%; display: flex; flex-direction: column; justify-content: center;}
#section2 .mark {margin: 0 auto 1rem;}
#section2 .doctors {display: flex; justify-content: center; padding-top: 2rem; background: url(images/section2_inner.png) center 47%  no-repeat;}
#section2 .doctors > div {margin-left: -0.5rem; position: relative;}
#section2 .doctors > div.doctor1 {z-index: 2;}
#section2 .doctors > div.doctor3 {z-index: 1;margin-left: -4rem;}
#section2 .doctors > div.doctor4 {margin-left: -2rem;}
#section2 .doctors > div img {margin-bottom: 0.5rem;}




#section3 {display: flex; flex-direction: column; justify-content: center;}
#section3 .inner {height: 34.5rem; background: url(images/section3_inner.jpg) center no-repeat; color: #fff; display: flex; flex-direction: column; justify-content: center; text-align: center;}



#section3 .root_daum_roughmap {border-radius: 1.5rem;}
#section3 .mapBtn {}
#section3 .mapBtn > a {padding: 0.4rem 1rem; font-size: 0.9rem; color: #fff; display: inline-block;}
a.n_map {background-color: #08a800; margin-right: 0.3rem;}
a.k_map {background-color: #fec044;}
.root_daum_roughmap .wrap_controllers,.root_daum_roughmap .cont,.map_border {display: none;}
#section3 .inlineblock {background-color: #816543;
    border-radius: 3rem;
    text-align: center;
    color: #fff;
    margin-right: 0.5rem;
    margin-bottom: 0.25rem;
}
#section3 .inlineblock.lunch {background-color: #9a8672;}




#section4 {background: url(images/section4_bg.jpg) center / cover; color: #fff; display: flex; align-content: center;}
#section4 .swiper-pagination {top: 2.75rem !important; right: 0 !important; left: auto !important; width: auto; height: 0;}
#section4 .swiper-pagination-bullet {width: auto !important; background: none; position: relative; margin-left: 1rem;}
#section4 .swiper-pagination-bullet::before {content: ""; width: 0.8rem; height: 0.8rem; border-radius: 0.8rem; background-color: #4dc5c7; position: absolute; top: -0.75rem;left: 50%; margin-left: -0.4rem; opacity: 0;}
#section4 .swiper-pagination-bullet-active::before {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 .floor_info {position: absolute; z-index: 100; bottom: 3rem; right: 3rem; display: flex; height: 5.5rem; width: 18rem;}
#section4 .floor_swiper > div > .swiper-slide .floor_info h1 {line-height: 0.8; margin-right: 1.5rem;}
#section4 .floor_swiper > div > .swiper-slide .floor_info h4 {line-height: 1.4;}




#section5 {display: flex; justify-content: flex-end; background: url(images/gra_circle.png) 2rem 0 no-repeat;}
#section5 .cs {width: 42rem; display: flex; flex-direction: column; justify-content: center; padding-right: 5rem;}
#section5 .cs > div {}
#section5 .cs .justify {height: 0.5rem !important;}
#section5 .location {width: 41rem; 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: 100%; display: block; border-radius: 2rem; border: 2px #119c9e solid; color: #119c9e; text-align: center; line-height: 2.5rem;font-weight: 700;}
#section5 a.mapbtn.naver:hover {background-color: #08a800; border-color: #08a800; color: #fff;}
#section5 a.mapbtn.kakao:hover {background-color: #fec044; border-color: #fec044; color: #606060;}

#section5 .bg_type {margin-left: 42rem; margin-top: -14rem;}
#section5 .bg_type h1 {color: #fff; opacity: 0.1; }