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

#main .section .inner {position:relative; height: 100%;}

.view {font-size: 0.63rem; background-image: url(images/view.gif); background-repeat: no-repeat; background-position: right center; padding-right: 2rem; -webkit-transition:all 0.2s ease-out; transition:all 0.2s ease-out;}
.view:hover {letter-spacing: 0.3rem;}

.orangebox {border: 1px #f9a346 solid; color: #f9a346; padding: 0.5rem 1rem; line-height: 1; display: inline-block;}
.orangebox .view {background-image: url(images/view_orange.gif);}
.orangebox:hover {background-color: #f9a346; color: #fff;}
.orangebox:hover .view {background-image: url(images/view_white.gif); }


#visual {width: 100%; height: 100%; text-align: center; color: #fff;}
#visual .swiper {width: 100%; height: 100%;}
#visual .swiper-slide {width: 100%; height: 100%; background-position: center; background-size: cover; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: center;}
#visual .swiper-slide .inner {width: 100%; height: 100%;}
#visual .swiper-slide p.typeline {opacity: 0.5;}
#visual .visual1 {background-image: url(images/main_sl1.jpg);}
#visual .visual2 {background-image: url(images/main_sl2.jpg);}
#visual .visual3 {background-image: url(images/main_sl3.jpg);}
#visual .visual4 {background-image: url(images/main_sl4.jpg);}

#visual .visual1 .counting {display: flex; justify-content: center; align-items: center;}
#visual .visual1 .counting > div {padding: 0 3rem;}
#visual .visual1 .counting > div.border {border-right: 1px rgba(255,255,255,0.3) solid;}


.scroll-downs {
  position: absolute;
  right: 0;
  bottom: 3.5rem;
  left: 0;
  margin: auto;
  z-index: 1;
  width :34px;
  height: 55px;
}
.mousey {
  width: 3px;
  padding: 10px 15px;
  height: 35px;
  border: 2px solid #fff;
  border-radius: 25px;
  opacity: 0.75;
  box-sizing: content-box;
}
.scroller {
  width: 3px;
  height: 10px;
  border-radius: 25%;
  background-color: #fff;
  animation-name: scroll;
  animation-duration: 2.2s;
  animation-timing-function: cubic-bezier(.15,.41,.69,.94);
  animation-iteration-count: infinite;
}
.scroll-downs p.typeline {font-size: 0.5rem; line-height: 1.3; margin-top: 5px;}
@keyframes scroll {
  0% { opacity: 0; }
  10% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(15px); opacity: 0;}
}

.swiper-pagination {bottom: 1rem !important;}
.swiper-pagination-bullet-active {background-color: #ffa03b !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;}



#section1 { margin: 5rem 0;}
#section1 .clinicbox > div {width: 31.8333%;  margin-left: 1.5%; margin-top: 1rem; padding-left: 2.45rem; background-position: 90% 80%; background-repeat: no-repeat; float: left; -webkit-transition:all 0.2s ease-out; transition:all 0.2s ease-out;}
#section1 .clinicbox > div:hover {transform: translateY(-5px);}
#section1 .clinicbox > div a {display: block; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;}
#section1 .clinicbox .clinic1,#section1 .clinicbox .clinic4 {margin-left: 0;}
#section1 .clinicbox .clinic1 {background-color: #ffb43d; background-image: url(images/main_clinic1.png); height: 350px;}
#section1 .clinicbox .clinic2 {background-color: #f9a363; background-image: url(images/main_clinic2.png); height: 350px;}
#section1 .clinicbox .clinic3 {background-color: #efb87d; background-image: url(images/main_clinic3.png); height: 350px;}
#section1 .clinicbox .clinic4 {background-color: #fdecc2; background-image: url(images/main_clinic4.png); height: 300px; width: 48.5%;}
#section1 .clinicbox .clinic5 {background-color: #fde8d9; background-image: url(images/main_clinic5.png); height: 300px; width: 48.5%;}

#section1 .clinicbox > div.c_white .view {background-image: url(images/view_white.gif);}
#section1 .clinicbox > div:hover .view {letter-spacing: 0.3rem;}



#section2 { background: url(images/main_facility.jpg) center; background-size: cover; padding: 4rem 0;}

#section3 {height: 700px;}
#section3 .inner {display: flex;}
#section3 .inner > div {flex: 1; padding-top: 4rem; }
#section3 .inner .about { position: relative;  z-index: 1;}
#section3 .inner .about > img {position: absolute; bottom: 0; right: -2rem; width: auto;}
#section3 .inner .gallery {}
#section3 .inner .gallery > div {width: 600px; float: right;}
#section3 .inner .gallery .swiper {}
#section3 .inner .gallery .swiper img {width: 100%;}

#section3 .bg {width: 100%; height: 100%; display: flex; position: absolute; top: 0; z-index: -1;}
#section3 .bg > div {flex: 1; height: 100%;}
#section3 .bg .gallery {background: url(images/main_gallery_bg.jpg);}



#section4 {padding: 3rem 0; background: url(images/main_community_bg.png) 1rem 1rem #f8b361 no-repeat; }
#section4 .col1 span {display: inline-block;}
#section4 .col2 {border-left: 1px rgba(255,255,255,0.3) solid; padding-left: 2rem;}
#section4 .col2 a.view_board {border: 1px #fff solid; width: 46px; height: 46px; line-height: 44px; display: block; font-size: 1rem; text-align: center; float: right;}
#section4 .col2 a.view_board:hover {background-color: #fff; color: #f9a363;}
#section4 .col2 .col1 {padding: 1.5em;}
#section4 .col2 .col1 .output_box {width: 100%; line-height: 1.8; font-size: 0.9rem !important; display: inline; }
#section4 .col2 .col1 .output_box .bd_out1 {width: 100%; text-overflow: ellipsis; overflow: hidden; }
.board_output_1_tr,.board_output_4_tr {display: flex;}
.board_output_1_tr > td,
.board_output_4_tr > td {flex: auto;}
.board_output_1_tr td:nth-child(1),
.board_output_4_tr td:nth-child(1) {width: 1%;}
.board_output_1_tr td:nth-child(2),
.board_output_4_tr td:nth-child(2) {width: 60%;}
.board_output_1_tr td:nth-child(3),
.board_output_4_tr td:nth-child(3) {width: 39%;}


#section5 {}
.root_daum_roughmap {width: 100%; height: 400px; overflow: hidden;}