@charset "UTF-8";

/*메인슬라이드*/
.main_pg #vis {height: 750px;width:100%}
.main_pg #vis .swiper-slide {overflow: hidden;width:100% !important}

.main_pg #vis .swiper-button-prev,
.main_pg #vis .swiper-button-next {
    -webkit-transition: opacity .3s;
    -moz-transition: opacity .3s;
    -o-transition: opacity .3s;
    transition: opacity .3s
}
.main_pg #vis .swiper-button-prev {background-image: url(../../img/slide_arrow1.png);left: 175px;opacity:.5;width: 75px;height: 75px;border-radius: 55px;background-color: #000;margin-top:-37px;transition: .3s}
.main_pg #vis .swiper-button-next {background-image: url(../../img/slide_arrow2.png);right: 175px;opacity:.5;width: 75px;height: 75px;border-radius: 55px;background-color: #000;margin-top:-37px;transition: .3s}
.main_pg #vis .swiper-button-prev:hover,
.main_pg #vis .swiper-button-next:hover {opacity: .8}

@media screen and (max-width:1690px){
    .main_pg #vis .swiper-button-prev { left: calc(50% - 600px);right:auto;margin-top: 130px;width: 40px;height: 40px;background-size: 14px 23px}
    .main_pg #vis .swiper-button-next { left: calc(50% - 550px);right:auto;margin-top: 130px;width: 40px;height: 40px;background-size: 14px 23px}
}

.main_pg #vis .wrap {position: relative;width: 1210px;margin: 0 auto}
.main_pg #vis .sw_a {position: absolute}
.main_pg #vis .sw1 {background: url(../../img/main/vis/01/bg.jpg) no-repeat center;height: 750px}
.main_pg #vis .sw1 .sw_a1 {top:0;right:0;opacity: 0;animation:none}
.main_pg #vis .sw1 .sw_a2 {top:90px;left:99px;opacity: 0;animation:none}
.main_pg #vis .sw1 .sw_a3 {top:168px;left:57px;opacity: 0;animation:none}
.main_pg #vis .sw1 .sw_a4 {top:284px;left:0;opacity: 0;animation:none}
.main_pg #vis .sw1 .sw_a5 {top:284px;left:242px;opacity: 0;animation:none}
.main_pg #vis .sw1 .sw_a6 {top:284px;left:508px;opacity: 0;animation:none}
.main_pg #vis .sw1 .sw_a7 {top:564px;left:121px;opacity: 0;animation:none}
.main_pg #vis .sw1 .sw_a8 {top:599px;left:143px;display:block;height:1px;width:477px;background:#132041;opacity: 0;animation:none}

.main_pg #vis .sw1.on .sw_a1 {animation: vis_ani1 .5s .3s 1 ease forwards;}
.main_pg #vis .sw1.on .sw_a2 {animation: vis_ani2 .5s .7s 1 ease forwards;}
.main_pg #vis .sw1.on .sw_a3 {animation: vis_ani2 .5s 1.1s 1 ease forwards;}
.main_pg #vis .sw1.on .sw_a4 {animation: vis_ani3 .5s 1.5s 1 ease forwards;}
.main_pg #vis .sw1.on .sw_a5 {animation: vis_ani3 .5s 1.7s 1 ease forwards;}
.main_pg #vis .sw1.on .sw_a6 {animation: vis_ani3 .5s 1.9s 1 ease forwards;}
.main_pg #vis .sw1.on .sw_a7 {animation: vis_ani1 .5s 2.3s 1 ease forwards;}
.main_pg #vis .sw1.on .sw_a8 {animation: vis_ani4 .7s 2.8s 1 ease forwards;}

@keyframes vis_ani1 {
    0% {opacity: 0}
    100% {opacity: 1}
}
@keyframes vis_ani2 {
    0% {transform:translateY(30px);opacity: 0}
    100% {transform:translateY(0);opacity: 1}
}
@keyframes vis_ani3 {
    0% {transform:translateX(-20px);opacity: 0}
    100% {transform:translateY(0);opacity: 1}
}
@keyframes vis_ani4 {
    0% {width:0;opacity: 0}
    100% {width:477px;opacity: 1}
}

.main_pg #vis .sw2 {background: url(../../img/main/vis/02/bg.jpg) no-repeat center;height: 750px}
.main_pg #vis .sw2 .sw_a1 {top:0;right:185px;opacity: 0;animation:none}
.main_pg #vis .sw2 .sw_a2 {top:267px;right:31px;opacity: 0;animation:none}
.main_pg #vis .sw2 .sw_a2_1 {top:267px;right:31px;opacity: 0;animation:none}
.main_pg #vis .sw2 .sw_a3 {top:381px;right:121px;opacity: 0;animation:none}
.main_pg #vis .sw2 .sw_a4 {top:450px;right:26px;opacity: 0;animation:none}
.main_pg #vis .sw2 .sw_a5 {top:599px;right:26px;opacity: 0;animation:none}

.main_pg #vis .sw2.on .sw_a1 {animation: vis_ani2_1 .7s .3s 1 ease forwards;}
.main_pg #vis .sw2.on .sw_a2 {animation: vis_ani2_2 .5s 1s 1 ease forwards;}
.main_pg #vis .sw2.on .sw_a2_1 {animation: vis_ani2_3 1.2s 1.4s infinite forwards;}
.main_pg #vis .sw2.on .sw_a3 {animation: vis_ani2_2 .5s 1.4s 1 ease forwards;}
.main_pg #vis .sw2.on .sw_a4 {animation: vis_ani2_2 .5s 1.7s 1 ease forwards;}
.main_pg #vis .sw2.on .sw_a5 {animation: vis_ani2_2 .5s 2s 1 ease forwards;}

@keyframes vis_ani2_1 {
    0% {transform:translateX(50px);opacity: 0}
    100% {transform:translateX(0);opacity: 1}
}
@keyframes vis_ani2_2 {
    0% {transform:translateY(-30px);opacity: 0}
    100% {transform:translateY(0);opacity: 1}
}
@keyframes vis_ani2_3 {
    0%,100 {opacity: 0.2}
    50% {opacity: 1}
}

/*의료진*/
.main_pg .staffArea {width: 100%;margin: 80px auto;}
.main_pg .staffArea div.innerWrap {display: flex;}
.main_pg .staffArea{position: relative;margin: 0 0 80px;padding-bottom:60px}
.main_pg .staffArea::after{
    content: '  ';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height:415px;
    background-color: #eff3ff;
}
.main_pg .staffArea div.innerWrap{
    position: relative;
    width: inherit;
    height: inherit;
}
.main_pg .staffArea div.innerWrap .outProfile{
    display: none;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 10;
}
.main_pg .staffArea div.innerWrap .outProfile.on{
    display: block;
    -webkit-animation: fade-in-right 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000).1s both;
	        animation: fade-in-right 0.5s cubic-bezier(0.390, 0.575, 0.565, 1.000).1s both;
}
.main_pg .staffArea div.innerWrap .outProfile.index01{
    right: -80px;
    bottom:-60px;
}

.main_pg .staffArea #staffAreaSlide{
    width: 100%;
    /*height: 679px;*/
    background-image: url('../../img/main/staffAreaSlideBg.jpg');
    background-position: center;
    background-repeat: no-repeat;
}
.main_pg .staffArea #staffAreaSlide .swiper-wrapper {margin-bottom: 20px;}
.main_pg .staffArea #staffAreaSlide .swiper-slide{
    width: 100%;
    height: inherit;
}
.main_pg .staffArea #staffAreaSlide .swiper-slide .header{
    width: 100%;
    /*height: 280px;*/
    padding-top: 80px;
}
.main_pg .staffArea #staffAreaSlide .swiper-slide .header > img{
    margin-bottom: 20px;
}
.main_pg .staffArea #staffAreaSlide .swiper-slide .header > h3{
    font-size:38px;
    font-weight: 300;
    color: #111111;
}
.main_pg .staffArea #staffAreaSlide .swiper-slide .header > h3 > b{
    font-weight: 500;
}
.main_pg .staffArea #staffAreaSlide .swiper-slide .contents{
    position: relative;
    width:750px;
    margin-bottom: 35px;
}
.main_pg .staffArea #staffAreaSlide .swiper-slide .contents > .profile{
    position: absolute;
    right: 0;
    bottom: 0;
}
.main_pg .staffArea #staffAreaSlide .swiper-slide .contents > h4{
    width:100%;
    font-size: 28px;
    font-weight:400; 
    color: #111111;
    border-bottom: solid #222222 1px;
    margin:50px 0 20px;
}
.main_pg .staffArea #staffAreaSlide .swiper-slide .contents > h4 > b{
    font-size: 42px;
    font-weight: 600;
    color: #637bf9;
}

.main_pg .staffArea #staffAreaSlide .swiper-slide .contents > table{
    width:100%;
    height: 100px;
    border-spacing: 1px;
    font-size: 16px;
    color: #222222;
    margin: 20px 0 0;
}
.main_pg .staffArea #staffAreaSlide .swiper-slide .contents > table > thead th{
    width: 88px;
    height: 35px;
    background-color: #c5c5c5;
}
.main_pg .staffArea #staffAreaSlide .swiper-slide .contents > table > tbody td{
    height:50px;
    font-weight: 500;
    text-align: center;
    background-color: #ffffff;
}
.main_pg .staffArea #staffAreaSlide .swiper-slide .contents > table > tbody td:first-child {width:155px}

.main_pg .staffArea #staffAreaSlide .swiper-slide .contents > table > tbody td span {
    display:block;
    font-size:14px;
}
.main_pg .staffArea #staffAreaSlide .swiper-slide .contents > table > tbody td.holiday{
    color: #ec5757;
}
.main_pg .staffArea #staffAreaSlide .swiper-slide .contents > table > tbody td.surgery{
    color: #4169e1;
}
.main_pg .staffArea #staffAreaSlide .swiper-slide .contents > .buttonArea {
    position: absolute;
    right: 0;
    top: 0;
}
.main_pg .staffArea #staffAreaSlide .swiper-slide .contents > .buttonArea a {
    background-color: #4169e1;
    color: #fff;
    display: block;
    width: 160px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    font-size: 18px;
}

.main_pg .staffArea #staffAreaSlide .control{
    position: absolute;
    bottom:0;
    left:0;
    width: 80px;
    height: 40px;
}

.main_pg .staffArea #staffAreaSlide .control .staffAreaSlider-button-next,
.main_pg .staffArea #staffAreaSlide .control .staffAreaSlider-button-prev{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    position: absolute;
    top: 0;
    margin-top: 0;
    background:none;
}
.main_pg .staffArea #staffAreaSlide .control .staffAreaSlider-button-next:after,
.main_pg .staffArea #staffAreaSlide .control .staffAreaSlider-button-prev:after {display:none}
.main_pg .staffArea #staffAreaSlide .control .staffAreaSlider-button-next{right:1px;}
.main_pg .staffArea #staffAreaSlide .control .staffAreaSlider-button-prev{left: 0;}


/*커뮤니티*/
.specialArea {padding:0 0 80px;}
.innerHeader h3 {margin-bottom:15px}
.innerHeader h4 {font-size:20px;text-align:center;color:#666;margin-bottom:35px;font-weight:400}
.specialArea ul{
    width:372px;
    height:740px;
    float:left;
}
.specialArea ul li{
    width:100%;
    height:360px;
}
.specialArea ul li:first-child{
    margin-bottom: 20px;
}
.specialArea ul > a{
    display: block;
    overflow: hidden;
}
.specialArea ul a li{
    position: relative;
    padding-top:260px;
    padding-left:30px;
    /*background-color: gray;*/
    transition:1.5s;
}
.specialArea ul > a:hover li{
    text-align: center; 
    padding-left:0px;
}
.specialArea ul a li div.cover{
    position: absolute;
    top:0px;
    left: 0px;
    width: inherit;
    height: inherit;
/*    background-color: #adadac26; 이미지 자체에 적용 되어 있음. */
}
.specialArea ul a li > img.nomalImg, 
.specialArea ul a li > img.hoverImg{
    position: absolute;
    top: 0px;
    left: 0px;
    width:390px;
    height:410px;
    width: inherit;
    height: inherit;
    z-index: -1;
    transition: .5s;
}
.specialArea ul a li > img.hoverImg, 
.specialArea ul > a:hover li div.cover, .specialArea ul a:hover li > img.nomalImg{
    opacity: 0;
/*    transition-delay:0.6s; */
}
.specialArea ul a li > h4.hoverText, 
.specialArea ul a:hover li > h4.nomalText{
    display: none;
}
.specialArea ul a:hover li > h4.hoverText{
    display: block;
}
.specialArea ul a:hover li > img.hoverImg{
    opacity: 1;
}
.specialArea ul a li > h3, .specialArea ul a li > h4{
    color:white;
}
.specialArea ul a li > h3{
    font-size:34px;
}
.specialArea ul a li > h4{
    font-size:18px;
}
.specialArea ul a li div.box{
    position: absolute;
    top:175px;
    right:0px;
    width:80px;
    height: 80px;
    font-size: 14px;
    text-align: center;
    letter-spacing: 1px;
    background-color: #4169e1;
    padding:13px;
    transition:.5s;
}
.specialArea ul a:hover li div.box{
    opacity: 0;
    right:0px;
    right:309px;
}
.specialArea ul a:hover li div.box > p{
    color:white;
}
.specialArea ul a:hover li div.box > span.arrow,
.specialArea ul a:hover li div.box > span.arrow::before,
.specialArea ul a:hover li div.box > span.arrow::after{
    background: white;
}
.specialArea ul a li div.box > span.arrow{
    position: absolute;
    top:70px;
    right:20px;
    width: 40px;
    height: 1px;
    display: block;
    -webkit-transition:.5s;
    transition:.5s;
}
.specialArea ul li div.box > span.arrow::before{
    content: '';
    display: block;
    height: 1px;
    background: black;
}
.specialArea ul li div.box > span.arrow::after{
    content: '';
    display: block;
    position: absolute;
    top: -3px;
    right: 0;
    width: 8px;
    height: 1px;
    background: black;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.specialArea div.center{
    position: relative;
    float:left;
    width:372px;
    height:740px;
    text-align: center;
    margin: 0 20px;
    overflow:hidden;
}

.specialArea div.center .swiper-pagination-bullets {position:absolute;bottom:40px;z-index:9;}
.specialArea div.center .swiper-pagination-bullets span {background:#bfbfbf;opacity:1}
.specialArea div.center .swiper-pagination-bullets span.swiper-pagination-bullet-active {background:#4169e1;width:20px;border-radius: 20px;}



/*병원소개 배너*/
.hosArea > ul > li {float:left;position:relative;width:25%;overflow:hidden}
.hosArea > ul > li a {display:block}
.hosArea > ul > li a > img {width:100%;transition:.5s}
.hosArea > ul > li a:hover > img {transform:scale(1.1)}
.hosArea > ul > li a:hover .hosText span {transform:rotate(90deg)}
.hosArea > ul > li a .hosText {position:absolute;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);text-align:center}
.hosArea > ul > li a .hosText > img {margin:0 auto 15px}
.hosArea > ul > li a .hosText h6 {font-size:14px;color:#fff;font-weight:300}
.hosArea > ul > li a .hosText h3 {font-size:30px;color:#fff;font-weight:500;margin:12px auto 50px;line-height: 1;}
.hosArea > ul > li a .hosText span {display:block;width:40px;height:40px;border:1px solid #fff;line-height:40px;font-size: 30px;margin: 0 auto;color: #fff;font-weight: 300;transition:.5s}

/*365 영역*/
#Area365 {height:600px}
#Area365 .swiper-slide {overflow: hidden}
#Area365 .wrap {position: relative;width:1200px;margin: 0 auto}
#Area365 .sw_a {position: absolute}

#Area365 .swiper-slide .left365 {width:260px;position:absolute;left:0;top:80px;text-align:center}
#Area365 .swiper-slide .left365 h2 {color:#fff;font-size:80px;font-weight:bold;margin:30px auto 25px}
#Area365 .swiper-slide .left365 p {color:#fff;font-size:28px;font-weight:400;line-height: 1.3;}

#Area365 .swiper-slide .right365 {width:890px;position:absolute;right:0;top:80px;text-align:center}
#Area365 .swiper-slide .right365 h3 {font-size:32px;color:#111;font-weight:bold;margin-bottom:20px}
#Area365 .swiper-slide .right365 p {font-size:22px;color:#111;font-weight:400}
#Area365 .swiper-slide .right365 div img {float:left;margin-right:15px}
#Area365 .swiper-slide .right365 div img:last-child {margin-right:0}

#Area365 .sw1 {background: url(../../img/main/cmSlide_bg1.jpg) no-repeat center;background-size:cover;height:600px}
#Area365 .sw1 .sw_a1 {top:130px;left:42px;opacity:0;animation:none}
#Area365 .sw1 .sw_a2 {top:130px;left:315px;opacity: 0;animation:none}
#Area365 .sw1 .sw_a3 {top:130px;left:588px;opacity: 0;animation:none}

#Area365 .sw1.on .sw_a1 {animation: vis365_ani1 .7s .4s 1 ease forwards;}
#Area365 .sw1.on .sw_a2 {animation:vis365_ani2 .7s .7s 1 ease forwards;}
#Area365 .sw1.on .sw_a3 {animation: vis365_ani3 .7s 1s 1 ease forwards;}

@keyframes vis365_ani1 {
    0% {left:0px;opacity: 0}
    100% {left:42px;opacity: 1}
}
@keyframes vis365_ani2 {
    0% {left:275px;opacity: 0}
    100% {left:315px;opacity: 1}
}
@keyframes vis365_ani3 {
    0% {left:548px;opacity: 0}
    100% {left:588px;opacity: 1}
}


#Area365 .sw2 {background: url(../../img/main/cmSlide_bg2.jpg) no-repeat center;background-size:cover;height:600px}
#Area365 .sw2 .sw_a1 {top:130px;left:42px;opacity:0;animation:none}
#Area365 .sw2 .sw_a2 {top:130px;left:315px;opacity: 0;animation:none}
#Area365 .sw2 .sw_a3 {top:130px;left:588px;opacity: 0;animation:none}
#Area365 .sw2 .sw_a4 {top:385px;left:42px;opacity: 0;animation:none}

#Area365 .sw2.on .sw_a1 {animation: vis365_ani3_1 .7s .4s 1 ease forwards;}
#Area365 .sw2.on .sw_a2 {animation: vis365_ani3_1 .7s .7s 1 ease forwards;}
#Area365 .sw2.on .sw_a3 {animation: vis365_ani3_1 .7s 1s 1 ease forwards;}
#Area365 .sw2.on .sw_a4 {animation: vis365_ani3_2 .7s 1.4s 1 ease forwards;}

@keyframes vis365_ani3_1 {
    0% {opacity: 0}
    100% {opacity: 1}
}
@keyframes vis365_ani3_2 {
    0% {top:425px;opacity: 0}
    100% {top:385px;opacity: 1}
}

#Area365 .swiper-pagination-bullet {position:relative;width: 260px;height: 45px;line-height:30px; display: block;background-color:rgba(0,0,0,0);border: 2px solid #fff;color: #fff;font-size: 20px; text-align: left;border-radius:0;opacity: 1;margin-bottom: 10px;box-sizing: border-box;padding: 6px 0 0 15px;bottom:80px;left:50%;margin-left:-600px}
#Area365 .swiper-pagination-bullet:after {content:'';background:url('../../img/main/cmSlide_arrow1.png') no-repeat center center;background-size:cover;width:26px;height:9px;position:absolute;right:15px;top:14px}
#Area365 .swiper-pagination-bullet-active, #Area365 .swiper-pagination-bullet:hover {background-color:#fff;color:#111;}
#Area365 .swiper-pagination-bullet-active:after, #Area365 .swiper-pagination-bullet:hover::after {background:url('../../img/main/cmSlide_arrow2.png') no-repeat center center;}


/*인포메이션*/
.infoArea {padding:80px 0 0}
.infoArea .w1200 > h3 {margin:0 auto 20px}
.infoArea .w1200 > h5 {font-size:17px;color:#333;text-align:center;margin-bottom:50px;line-height:1;font-weight: 400;}

.infoArea .infoWrap .mapWrap {position:relative}
.infoArea .infoWrap .mapWrap .wrap_controllers, .infoArea .infoWrap .mapWrap .wrap_btn_zoom {display:none}
.infoArea .infoWrap .mapWrap .mapNaver {position:absolute;left:20px;top:80px;z-index: 9;}
.infoArea .infoWrap .mapWrap .mapKakao {position:absolute;left:20px;top:138px;z-index: 9;}
.infoArea .mapInner {position:absolute;top:80px;right:28px;z-index:99;width:420px;height:300px;background:rgba(255,255,255,0.88);border:3px solid #2973d5;padding:40px 30px;box-sizing:border-box; box-shadow: 5px 5px 5px rgba(0,0,0,0.1);}
.infoArea .mapInner .mapInner1 {border-bottom:1px dashed #dedede;padding-bottom: 30px;margin-bottom: 30px;}
.infoArea .mapInner > div > img {float:left; padding-top: 8px;}
.infoArea .mapInner > div > div {display:inine-block;float:left;padding-left: 20px;box-sizing: border-box;}
.infoArea .mapInner .mapInner1 h3 {font-size:22px;color:#222;margin-bottom:15px; line-height: 1.4;font-weight: 400;}
.infoArea .mapInner .mapInner1 h5 {font-size:15px;color:#555;font-weight: 500;}
.infoArea .mapInner .mapInner2 h4 {font-size:16px;color:#222;margin-bottom:10px;}

/*sns정보*/
.bottomCm {padding:50px 0 80px}
.bottomCm .w1200 > div {float:left;width:285px;height:320px;margin-right:20px;}
.bottomCm .w1200 > div:last-child {margin-right:0}

.bottomCm .w1200 > div.btTime {background-color:#f7f7f7;padding:20px 22px;box-sizing:border-box;text-align: center;}
.bottomCm .w1200 > div.btTime img {margin:0 auto 11px}
.bottomCm .w1200 > div.btTime h3 {font-size:24px;color:#222;font-weight:400}
.bottomCm .w1200 > div.btTime .timeTable {margin-top:15px}
.bottomCm .timeTable .timeWrap {letter-spacing:0}
.bottomCm .timeTable .timeWrap.w50 {display:inline-block;width:49%}
.bottomCm .timeTable .timeWrap h5 {display:block;background-color:#2e9def;color:#fff;font-size:17px;text-align:center;height:30px;line-height:30px;font-weight:400}
.bottomCm .timeTable .timeWrap div {background-color:#fff;text-align: center; padding:8px 0;}
.bottomCm .timeTable .timeWrap div p {position:relative;font-size:17px;color: #222;}
.bottomCm .timeTable .timeWrap div p span {font-size:14px; margin-right: 5px;}
.bottomCm .timeTable .timeWrap div .line {display:inline-block;height:10px;width:1px;background-color:#555;margin:5px auto 3px}


.bottomCm .btKakao {background:url('../../img/main/btKakaoBg.png') no-repeat center center;background-size:cover;text-align:center;padding:20px 22px}
.bottomCm .btKakao img {margin:0 auto 8px}
.bottomCm .btKakao h3 {font-size:24px;color:#3a1d20;font-weight:400}
.bottomCm .btKakao p {background-color:#3a1d20;color:#fff;height:30px;line-height:30px;margin-top:15px;font-size:17px;letter-spacing: -0.5px;}

.bottomCm .btBlog {background:url('../../img/main/btBlogBg.png') no-repeat center center;background-size:cover;text-align:center;padding:20px 22px}
.bottomCm .btBlog img {margin:0 auto 8px}
.bottomCm .btBlog h3 {font-size:24px;color:#fff;font-weight:400}
.bottomCm .btBlog p {background-color:#fff;color:#222;height:30px;line-height:30px;margin-top:15px;font-size:17px;letter-spacing: -0.5px;}

.bottomCm .btYou {background:url('../../img/main/btYouBg.jpg') no-repeat center center;background-size:cover;text-align:center;padding:20px 22px}
.bottomCm .btYou img {margin:0 auto 8px}
.bottomCm .btYou h3 {font-size:24px;color:#fff;font-weight:400}
.bottomCm .btYou p {background-color:#fff;color:#222;height:30px;line-height:30px;margin-top:15px;font-size:17px;letter-spacing: -0.5px;}