@charset "utf-8";

#vis {height:750px}
#vis .swiper-slide {overflow: hidden}
/*.main_wrap {width: 1200px;margin: 0 auto}*/

#vis .wrap {position: relative;width: 1200px;margin: 0 auto}
#vis .sw_a {position: absolute}

/* Slide Control */
#vis.swiper-container .swiper-button-nextVis{
    width:50px;
    height:100px;
    background-image: url(../../img/main/visual/vis_next.png);
    background-size:100%;
    position: absolute;
    right:150px;
    top: 50%;
    transform: translateY(-50%);
    z-index:999;cursor:pointer
}
#vis.swiper-container .swiper-button-prevVis{
    width:50px;
    height:100px;
    background-image: url(../../img/main/visual/vis_prev.png);
    background-size:100%;
    position: absolute;
    left:150px;
    top: 50%;
    transform: translateY(-50%);
    z-index:999;cursor:pointer
}

/*vis1*/
#vis .sw1 {background: url(../../img/main/visual/v1/bg.jpg) no-repeat center;background-size:cover;height:750px}
#vis .sw1 .sw_a1 {top:160px;left:587px;opacity: 0;animation:none}
#vis .sw1 .sw_a2 {top:232px;left:0;opacity: 0;animation:none}
#vis .sw1 .sw_a3 {top:50px;left:230px;opacity: 0;animation:none}
#vis .sw1 .sw_a4 {top:340px;left:0;font-size:20px;color:#444;font-weight:400;opacity: 0;animation:none}
#vis .sw1 .sw_a5 {top:372px;left:0;font-size:20px;color:#444;font-weight:400;opacity: 0;animation:none}
#vis .sw1 .sw_a6 {top:425px;left:0;opacity: 0;animation:none}
#vis .sw1 .sw_a7 {top:425px;left:205px;opacity: 0;animation:none}
#vis .sw1 .sw_a8 {top:425px;left:410px;opacity: 0;animation:none}
#vis .sw1 .sw_a9 {top:425px;left:620px;opacity: 0;animation:none}

#vis .sw1.on .sw_a1 {animation: vis_ani1 .7s .4s 1 ease forwards;}
#vis .sw1.on .sw_a2 {animation: vis_ani1 .7s .8s 1 ease forwards;}
#vis .sw1.on .sw_a3 {animation: vis_ani2 .7s 1.2s 1 ease forwards;}
#vis .sw1.on .sw_a4 {animation: vis_ani3 .7s 1.6s 1 ease forwards;}
#vis .sw1.on .sw_a5 {animation: vis_ani4 .7s 2s 1 ease forwards;}
#vis .sw1.on .sw_a6 {animation: vis_ani5 .7s 2.4s 1 ease forwards;}
#vis .sw1.on .sw_a7 {animation: vis_ani6 .7s 2.7s 1 ease forwards;}
#vis .sw1.on .sw_a8 {animation: vis_ani7 .7s 3s 1 ease forwards;}
#vis .sw1.on .sw_a9 {animation: vis_ani8 .7s 3.3s 1 ease forwards;}


@keyframes vis_ani1 {
    0% {left:-30px;opacity: 0}
    100% {left:0;opacity: 1}
}
@keyframes vis_ani2 {
    0% {opacity: 0}
    100% {opacity: 1}
}
@keyframes vis_ani3 {
    0% {top:370px;opacity: 0}
    100% {top:340px;opacity: 1}
}
@keyframes vis_ani4 {
    0% {top:402px;opacity: 0}
    100% {top:372px;opacity: 1}
}
@keyframes vis_ani5 {
    0% {left:-30px;opacity: 0}
    100% {left:0;opacity: 1}
}
@keyframes vis_ani6 {
    0% {left:175px;opacity: 0}
    100% {left:205px;opacity: 1}
}
@keyframes vis_ani7 {
    0% {left:380px;opacity: 0}
    100% {left:410px;opacity: 1}
}
@keyframes vis_ani8 {
    0% {left:590px;opacity: 0}
    100% {left:620px;opacity: 1}
}


/*vis2*/
#vis .sw2 {background: url(../../img/main/visual/v2/bg.jpg) no-repeat center;background-size:cover;height:750px}
#vis .sw2 .sw_a1 {top:0;left:446px;opacity: 0;animation:none}
#vis .sw2 .sw_dot1 {top:286px;left:479px;opacity: 0;animation:none}
#vis .sw2 .sw_a2 {top:0;left:446px;opacity: 0;animation:none}
#vis .sw2 .sw_a3 {top:272px;left:307px;opacity: 0;animation:none}
#vis .sw2 .sw_dot2 {top:355px;left:535px;opacity: 0;animation:none}
#vis .sw2 .sw_a4 {top:391px;left:385px;opacity: 0;animation:none}
#vis .sw2 .sw_dot3 {top:355px;left:625px;opacity: 0;animation:none}
#vis .sw2 .sw_a5 {top:391px;left:639px;opacity: 0;animation:none}
#vis .sw2 .sw_dot4 {top:286px;left:679px;opacity: 0;animation:none}
#vis .sw2 .sw_a6 {top:272px;left:715px;opacity: 0;animation:none}
#vis .sw2 .sw_a7 {top:495px;left:230px;font-size:50px;color:#00fcff;font-weight:400;opacity: 0;animation:none}
#vis .sw2 .sw_a8 {top:570px;left:185px;font-size:28px;color:#fff;font-weight:400;opacity: 0;animation:none}


#vis .sw2.on .sw_a1 {animation: vis_ani2_1 .7s .4s 1 ease forwards;}
#vis .sw2.on .sw_a3 {animation: vis_ani2_3 .7s 1.2s 1 ease forwards;}
#vis .sw2.on .sw_dot1 {animation: vis_aniDot .7s 1.2s 1 ease forwards;}
#vis .sw2.on .sw_a4 {animation: vis_ani2_4 .7s 1.5s 1 ease forwards;}
#vis .sw2.on .sw_dot2 {animation: vis_aniDot .7s 1.5s 1 ease forwards;}
#vis .sw2.on .sw_a5 {animation: vis_ani2_5 .7s 1.8s 1 ease forwards;}
#vis .sw2.on .sw_dot3 {animation: vis_aniDot .7s 1.8s 1 ease forwards;}
#vis .sw2.on .sw_a6 {animation: vis_ani2_6 .7s 2.1s 1 ease forwards;}
#vis .sw2.on .sw_dot4 {animation: vis_aniDot .7s 2.1s 1 ease forwards;}
#vis .sw2.on .sw_a2 {animation: vis_ani2_2 1.5s 2.4s infinite both}
#vis .sw2.on .sw_a7 {animation: vis_ani2_7 .7s 2.6s 1 ease forwards;}
#vis .sw2.on .sw_a8 {animation: vis_ani2_8 .7s 3s 1 ease forwards;}


@keyframes vis_ani2_1 {
    0% {opacity: 0}
    100% {opacity: 1}
}
@keyframes vis_ani2_2 {
    0%,100% {opacity: 0}
    50% {opacity: 1}
}
@keyframes vis_ani2_3 {
    0% {left:257px;opacity: 0}
    100% {left:307px;opacity: 1}
}
@keyframes vis_ani2_4 {
    0% {left:341px;opacity: 0}
    100% {left:391px;opacity: 1}
}
@keyframes vis_ani2_5 {
    0% {left:689px;opacity: 0}
    100% {left:639px;opacity: 1}
}
@keyframes vis_ani2_6 {
    0% {left:765px;opacity: 0}
    100% {left:715px;opacity: 1}
}
@keyframes vis_ani2_7 {
    0% {top:525px;opacity: 0}
    100% {top:495px;opacity: 1}
}
@keyframes vis_ani2_8 {
    0% {top:600px;opacity: 0}
    100% {top:570px;opacity: 1}
}
@keyframes vis_aniDot {
    0% {opacity: 0}
    100% {opacity: 1}
}

/*치료 바로가기*/
.careBnr {margin-top: -70px;margin-bottom:80px;z-index: 99;position: relative;}
.careBnr .w1200 {background-color:#ffb400;color:#222}
.careBnr .w1200 .Bnr {position:relative;float:left;width:33.333%;padding:20px 30px}
.careBnr .w1200 .Bnr:after {content:'';position:absolute;right:0;top:20px;height:90px;width:1px;background-color:#bc880a}
.careBnr .w1200 .Bnr:last-child::after {display:none}
.careBnr .w1200 .Bnr > a {display:block}
.careBnr .w1200 .Bnr div {display:inline-block;padding-left:15px}
.careBnr .w1200 .Bnr div h3 {font-size:24px;margin: 10px 0 5px 0;}
.careBnr .w1200 .Bnr div p {font-size:14px;line-height: 1.4;}
.careBnr .w1200 .Bnr a img:first-child {vertical-align:top}

/*.careBnr .w1200 .Bnr a:hover img:first-child {animation: skew_ani .5s 0s 2 linear alternate forwards;}

@keyframes skew_ani {
    0% {}
    50% {transform: skewX(5deg);top:17px}
    100% {transform: skewX(-5deg);top:23px}
}*/


.careBnr .w1200 .Bnr a img:last-child {position:absolute;right:30px;top:50%;transform:translateY(-50%);transition:.5s}
.careBnr .w1200 .Bnr a:hover img:last-child {right:15px}

/*카테고리 슬라이드*/
.cateSlide {height:540px;margin-bottom:80px}
.slick-initialized .slick-slide {outline: none}
.cateSlide .slider-for {width:1170px;height:540px;background:url('../../img/main/cate/cateSlideBg.png') no-repeat center center;background-size:cover;z-index:99}
.cateSlide .slider-for .slideWrap > div {float:left}
.cateSlide .slider-for .slideLeft {padding-left:50px;margin-right:40px}
.cateSlide .slider-for .slideLeft img {position:relative;z-index:999}
.cateSlide .slider-for .slideRight {}
.cateSlide .slider-for .slideRight span {display:inline-block;font-size:18px;color:#000;width:138px;height:55px;line-height:55px;text-align:center;margin-bottom: 35px;}
.cateSlide .slider-for .slideRight h3 {padding-left:40px;font-size:24px;color:#222;margin-bottom:12px}
.cateSlide .slider-for .slideRight h4 {padding-left:40px;font-size:18px;font-weight:400;color:#ffb400;padding-left:40px;margin-bottom: 25px;}
.cateSlide .slider-for .slideRight p {padding-left:40px;font-size:14px;color:#666666;width:560px;text-align:justify;line-height:1.5}
.cateSlide .slider-for .slideRight a {position:absolute;right:30px;top:85px;transition:.5s;border:0;}
.cateSlide .slider-for .slideRight a:hover {right:20px}

.cateSlide .slider-nav {bottom:230px;left:550px;z-index:999}
.cateSlide .slider-nav div {cursor:pointer;outline: none;}

.cateSlide .slider-for .slick-prev {left:50px;width:50px;height:50px;background:url('../../img/main/cate/catePrev.jpg') no-repeat center center;background-size:cover;z-index: 9;}
.cateSlide .slider-for .slick-next {left:450px;width:50px;height:50px;background:url('../../img/main/cate/cateNext.jpg') no-repeat center center;background-size:cover}
.cateSlide .slider-for .slick-prev:before, .cateSlide .slider-for .slick-next:before {display:none}


/*갤러리*/
.gallery {margin-bottom:70px}
.gallery .galLeft {float:left; width:805px;}
.gallery .galLeft > div {width:50%;float:left;margin-bottom: 10px;}
.gallery .galLeft .galTitle {padding-right: 12px}
.gallery .galLeft .galTitle h3 {font-size:24px;color:#222;margin-bottom:7px}
.gallery .galLeft .galTitle h4 {font-size:18px;color:#ffb400;margin-bottom:25px}
.gallery .galLeft .galTitle p {font-size:14px;color:#666666;margin-bottom:35px;line-height:1.45;width: 385px;text-align: justify;}
.gallery .galLeft .galTitle a {display:inline-block;width:160px;height:40px;text-align:left;padding-left: 30px;line-height:40px;background-color:#ffb400;color:#222;font-size:14px;transition:.5s}
.gallery .galLeft .galTitle a img {vertical-align:top;padding-top: 13px;padding-left: 8px;transition:.3s}
.gallery .galLeft .galTitle a:hover img {padding-left:15px}
.gallery .galLeft .g1 {width:393px;overflow:hidden}
.gallery .galLeft .g1:hover img {transform:scale(1.05)}
.gallery .galLeft .g2 div {float:left;overflow:hidden;width:192px}
.gallery .galLeft .g2 div:first-child {margin-right:9px}
.gallery .galLeft .g2 div:hover img {transform:scale(1.05)}
.gallery .galLeft div img {transition:.5s}

.gallery .galRight {float:right;width:393px;overflow:hidden}
.gallery .galRight img {transition:.5s}
.gallery .galRight:hover img {transform:scale(1.05)}

/*커뮤니티 바로가기*/
.cmBnr {background-color:#ffb400;}
.cmBnr .w1200 {color:#222}
.cmBnr .w1200 .Bnr {position:relative;float:left;width:33.333%;padding:20px 30px}
.cmBnr .w1200 .Bnr:after {content:'';position:absolute;right:0;top:20px;height:90px;width:1px;background-color:#bc880a}
.cmBnr .w1200 .Bnr:first-child::before {content:'';position:absolute;left:0;top:20px;height:90px;width:1px;background-color:#bc880a}
.cmBnr .w1200 .Bnr > a {display:block}
.cmBnr .w1200 .Bnr > a:hover img:last-child {right:15px}
.cmBnr .w1200 .Bnr div {display:inline-block;padding-left:15px}
.cmBnr .w1200 .Bnr div h3 {font-size:24px;margin: 10px 0 5px 0;}
.cmBnr .w1200 .Bnr div p {font-size:14px;line-height: 1.4;}
.cmBnr .w1200 .Bnr a img:first-child {vertical-align:top}
.cmBnr .w1200 .Bnr a img:last-child {position:absolute;right:30px;top:50%;transform:translateY(-50%);transition:.5s}

/*커뮤니티*/
.cmArea {padding:55px 0 80px;background-color:#fafafa}
.cmArea .cmTop {margin-bottom:20px}
.cmArea .cmTop .cmDoc {float:left}
.cmArea .cmTop .bx-wrapper {position: relative;float:right;width: 590px;}
.cmArea .cmTop .bx-wrapper .bx-controls {position: absolute;top: 50%;transform: translateY(-50%);width: 590px;}
.cmArea .cmTop .bx-wrapper .bx-controls .bx-prev {position: absolute;left: 0;width:20px;height:20px;background:url('../../img/main/cmSlidePrev.png') no-repeat center center;background-size:cover;font-size: 0;}
.cmArea .cmTop .bx-wrapper .bx-controls .bx-next {position: absolute;right: 0;width:20px;height:20px;background:url('../../img/main/cmSlideNext.png') no-repeat center center;background-size:cover;font-size: 0;}

.cmArea .cmMid {margin-bottom:20px}
.cmArea .cmMid > div {float:left;width: 386px;height:300px;margin-right:20px;border:1px solid #e4e4e4;box-sizing:border-box}
.cmArea .cmMid > div.cmTime {margin-right:0}
.cmArea .cmMid .cmNotice {padding:30px;}
.cmArea .cmMid .cmNotice h3 {position:relative;font-size:24px;padding-bottom:15px;line-height:1;border-bottom:1px solid #222}
.cmArea .cmMid .cmNotice h3 img {position:absolute;right:0;top: -10px;transition:.5s}
.cmArea .cmMid .cmNotice h3 a:hover img {right:-8px}

.cmArea .cmMid .cmMap {position:relative}
.cmArea .cmMid .cmMap .wrap_controllers {display:none}
.cmArea .cmMid .cmMap .mapBtn {width:314px;position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index: 99;}
.cmArea .cmMid .cmMap .mapBtn a {position:relative;display:inline-block;width:152px;height:44px;text-align:left;line-height:44px;font-size:15px;background-color:#ffb400;color:#222;float:left;margin-right: 10px;padding-left: 15px;transition:.5s}
.cmArea .cmMid .cmMap .mapBtn a:last-child {margin-right:0}
.cmArea .cmMid .cmMap .mapBtn a i {color: #222;font-size: 20px;margin-left: 5px;position: Absolute;top:11px;right:10px;}
.cmArea .cmMid .cmMap .mapBtn a:hover {background-color:#fff;color:#ffb400}
.cmArea .cmMid .cmMap .mapBtn a:hover i {color:#ffb400}

.cmArea .cmMid .cmTime {padding:30px}
.cmArea .cmMid .cmTime > div:first-child {border-bottom:1px solid #222;padding-bottom:20px;margin-bottom:20px}
.cmArea .cmMid .cmTime > div:first-child img {padding-top:10px}
.cmArea .cmMid .cmTime > div img {float:left;padding-top: 50px;margin-right:25px}
.cmArea .cmMid .cmTime > div div {float:left}
.cmArea .cmMid .cmTime div h3 {font-size:20px;font-weight: 400;}
.cmArea .cmMid .cmTime div h2 {font-size:30px}
.cmArea .cmMid .cmTime div table {padding:5px 0;}
.cmArea .cmMid .cmTime div table tr {font-size:16px;line-height: 1.3;letter-spacing: 0px;}
.cmArea .cmMid .cmTime div table th {display:inline-block;width:72px;margin-right: 15px;text-align: justify;text-align-last: justify;font-weight: 400;}
.cmArea .cmMid .cmTime div p {font-size:14px}

.cmBottom ul.type2 li > img{position: absolute;top:0;left:0; width: 80px; height: 80px;}
.cmBottom ul.type2 li {font-size: 18px; border: solid #e4e4e4 1px;background-color: white;}
.cmBottom ul.type2 li a {display: inline-block; width:100%; height: inherit;padding-top: 12px;
padding-left: 20px;}
.cmBottom ul.type2 li a span {display:block;color:#ffb400;font-size:14px;margin-bottom:5px}
.cmBottom ul.type2 li a > span.more {display: block; position: absolute; width: 25px; height: 25px; line-height: 0;font-size:25px; border: 1px solid #333333; padding-left: 8px;transition: .5s;}
.cmBottom .columnWrap .bx-wrapper {width:890px;float:left;display:inline-block}
.cmBottom .bx-wrapper .type2 li {width:290px !important;height:80px;float: left; margin-right: 10px;}
.cmBottom .columnWrap .bx-wrapper .bx-controls {display:none}
.cmBottom .columnWrap .column_new {position:absolute;top:5px;right:5px;background:url('../../skin/latest/basic_indexCommunicationType2/img/new.gif') no-repeat center center;width:34px;height:30px;}
.cmBottom .columnTitle {position:relative;float: left;margin-right: 10px;}
.cmBottom .columnTitle a {display:block}
.cmBottom span.more.more-right {position:absolute;top: 30px;right: 30px;width:26px;height:26px;background:url('../../img/main/column_arrow.png') no-repeat center center;}