@charset "utf-8";

#content {position: relative}
.subtit {padding-bottom: 80px;}
/*#cnt {position: relative; top: 0; left: 0;}*/
/*
#bg{position:fixed;top:0;left:0;width:auto;height:auto;min-width:100%;min-height:100%;z-index:-10;}

#bg iframe{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
*/

.video-background {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -1;
   pointer-events: none;
   overflow: hidden;
}
.video-background iframe {
   width: 100vw;
   height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
   min-height: 100vh;
   min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}
.log_menu{position: absolute; left: calc(50% - 640px); top: -20px; font-size: 14px;}


#header, #header .logo, #header #gnb ul li, #cnt5 .program ul li a, #cnt1 ul .doc1 a, #cnt1 ul .doc2 a, #cnt1 ul .doc3 a {transition: 0.3s all}
#cnt1 ul li a {transition: 0.1s all}
/*#cnt2 ul li a {transition: 0.2s all}*/

#header {position: fixed; display: block; width: 100%; height: 70px; margin-top: 38px; z-index: 100}
#header .logo {display: block; left: 0; width: 243px; height: 53px; margin: 0}
#header #gnb {right: 0; position: absolute; top: 17px; right: 0; font-weight: 300; z-index: 101}
#header #gnb ul li {float: left; margin-left: 34px; font-size: 18px; color: #fff}
#header #gnb ul li a:hover, #header #gnb ul li a:focus {color: #25efd9}

#header.on {background: rgba(21, 31, 65, 0.83); margin-top: 0; }
#header.on .logo {transform: scale(0.8); margin-top: 10px;}
#header.on #gnb ul li {color: #fff}

.visual-desc {margin:0 0 0 7em;}
.main-visual{width: 1300px;}
.main-visual .swiper-slide{height: 100vh; display: flex; align-items: center;}
.swiper-button-prev{background:url(../images/main-ctrl.png) left center; width:64px; height:97px; left:calc(50% - 640px); right:auto; top:42%;}
.swiper-button-next{background:url(../images/main-ctrl.png) right center; width:64px; height:97px; right:calc(50% - 640px); top:42%;}
.swiper-pagination-bullet{width:9px; height:9px; border:2px solid #fff; background:transparent; opacity:1;transition: width .5s; border-radius:10px;}
.swiper-pagination-bullet-active{background:#fff; width:25px; border-radius:10px;}
.main-visual>.swiper-pagination-bullets{bottom:20px;}


.visual-desc *{text-shadow: 0 0 24px rgba(33,33,33,.5)}
.bg_bk {background: rgba(0, 0, 0, 0.6)}
/* ---------cnt1---------- */

#cnt1 .area{padding-top: 150px;}
#cnt1 ul {position: relative; width:776px; margin: 0 auto; }
#cnt1 ul > li{float: left; width: 368px; height: 508px; margin:10px;}
#cnt1 ul li a {display: block; width: 100%; height: 100%; background: red no-repeat 0 0;}
#cnt1 ul .doc1 a {background: url("../images/doctor01.jpg") no-repeat 0 0; left: 0; }
#cnt1 ul .doc2 a {background: url("../images/doctor02.jpg") no-repeat 0 0; left: 50%; }
#cnt1 ul .doc3 a {background: url("../images/doctor04_jangsy.jpg") no-repeat 0 0; right: 0;}
#cnt1 ul .doc1 a:hover {background-image: url("../images/doctor01_on.jpg")}
#cnt1 ul .doc2 a:hover {background-image: url("../images/doctor02_on.jpg")}
#cnt1 ul .doc3 a:hover {background-image: url("../images/doctor04_on_jangsy.jpg")}


#cnt2 {}
#cnt2 .area{padding-top: 150px;}
#cnt2 ul {position: relative; width: 1248px; height: 431px; margin: 0 auto}
#cnt2 ul li a {position: absolute; right: 0; display: block; width: 260px; height: 366px; margin: 35.5px 26px}
#cnt2 ul li span {display: block; font-size: 30px; font-weight: 300; text-align: center; line-height: 36px}
#cnt2 ul .list1 a {left: 52px; background: url("../images/equip01.png") no-repeat 0 0}
#cnt2 ul .list2 a {left: 329px; background: url("../images/equip02.png") no-repeat 0 0; }
#cnt2 ul .list3 a {right: 329px; background: url("../images/equip03.png") no-repeat 0 0; }
#cnt2 ul .list4 a {right: 52px; background: url("../images/equip04.png") no-repeat 0 0; }
#cnt2 ul .list1 span {padding-top: 286px;}
#cnt2 ul .list2 span {padding-top: 36px;}
#cnt2 ul .list3 span {padding-top: 46px;}
#cnt2 ul .list4 span {padding-top: 265px;}

#cnt2 ul li a:hover span , #cnt2 ul li a:focus span {display: none}
#cnt2 ul li a:hover , #cnt2 ul li a:focus {padding: 35.5px 26px; z-index: 1; margin: 0}
#cnt2 ul .list1 a:hover, #cnt2 ul .list1 a:focus {background: url("../images/equip01_hover.png") no-repeat 0 0}
#cnt2 ul .list2 a:hover, #cnt2 ul .list2 a:focus {background: url("../images/equip02_hover.png") no-repeat 0 0}
#cnt2 ul .list3 a:hover, #cnt2 ul .list3 a:focus {background: url("../images/equip03_hover_220523.png") no-repeat 0 0}
#cnt2 ul .list4 a:hover, #cnt2 ul .list4 a:focus {background: url("../images/equip04_hover.png") no-repeat 0 0}

#cnt3 {padding-top: 50px;}
#cnt3 .area{}
#cnt3 .step{padding: 0 0 3em;}
.step_tit {width: 1036px; height: 36px; margin: 58px auto 18px}
#cnt3 .safe {display: block; margin: 0 auto; width: 962px; height: 256px;}
#cnt3 ul li p {font-size: 28px; font-weight: 200; margin-left: 10px; margin-top: 20px;}
#cnt3 .step {width: 1036px; margin: 0 auto}
#cnt3 ul li {width: 332px; height: 290px; float: left; margin: 0 20px 73px 0;}
#cnt3 ul li:nth-child(3n){
    margin-right: 0;
}

#cnt3 .step1, #cnt3 .step4, #cnt3 ul li ul .step7 {margin-left: 0;}
#cnt3 li div {display: block; width: 322px; height: 227px; box-sizing: border-box; border: 5px solid transparent;}
#cnt3 .step1 div {background: url("../images/clean01.jpg") no-repeat 0 0}
#cnt3 .step2 div {background: url("../images/clean02.jpg") no-repeat 0 0; }
#cnt3 .step3 div {background: url("../images/clean03.jpg") no-repeat 0 0; }
#cnt3 .step4 div {background: url("../images/clean04.jpg") no-repeat 0 0; }
#cnt3 .step5 div {background: url("../images/clean05.jpg") no-repeat 0 0; }
#cnt3 .step6 div {background: url("../images/clean06.jpg") no-repeat 0 0; }
#cnt3 .step7 div {background: url("../images/clean07.jpg") no-repeat 0 0; }
#cnt3 .step8 div {background: url("../images/clean08.jpg") no-repeat 0 0; }
#cnt3 .step9 div {background: url("../images/clean09.jpg") no-repeat 0 0; }
/* --- on 클래스 추가시 gif --- */
#cnt3 .step1.on div.stepbg {background: url("../images/gif_row/clean_01.gif") no-repeat 0 0}
#cnt3 .step2.on div.stepbg {background: url("../images/gif_row/clean_02.gif") no-repeat 0 0; }
#cnt3 .step3.on div.stepbg {background: url("../images/gif_row/clean_03.gif") no-repeat 0 0; }
#cnt3 .step4.on div.stepbg {background: url("../images/gif_row/clean_04.gif") no-repeat 0 0; }
#cnt3 .step5.on div.stepbg {background: url("../images/gif_row/clean_05.gif") no-repeat 0 0; }
#cnt3 .step6.on div.stepbg {background: url("../images/gif_row/clean_06.gif") no-repeat 0 0; }
#cnt3 .step7.on div.stepbg {background: url("../images/gif_row/clean_07.gif") no-repeat 0 0; }
#cnt3 .step8.on div.stepbg {background: url("../images/gif_row/clean_08.gif") no-repeat 0 0; }
#cnt3 .step9.on div.stepbg {background: url("../images/gif_row/clean_09.gif") no-repeat 0 0; }

#cnt3 li.on div {border: 5px solid #00de33 }
#cnt3 .step1.on div {background: url("../images/clean01.jpg") no-repeat 0 0}
#cnt3 li.on p{color: #00de33; font-weight: bold;}

#cnt3 > ul > li {display: block; width: 1021px; margin: 0 auto; height: 285px; background: red}
#cnt3 ul li ul li.on p {margin-top: 0px; font-weight: 500; color: #00de33}

/*cnt4*/
.point-list{
    list-style: none; padding: 0;
}
.point-list li{display: inline-block; margin:0 13px 0 0}
.point-list li:last-child{margin:0;}

/*#cnt4 .title, #cnt5 .title, #cnt6 .title, #cnt7 {margin-top: 385px;}*/
#cnt2,#cnt4,#cnt5{padding: 120px 0;}
#cnt5 .program ul li {float: left}
#cnt5 .program ul li a {display: block; border-right: 1px solid #000; width: 321px; height: 420px;}
#cnt5 .program ul .pro1 a {background: url("../images/cnt5_pro01.png") no-repeat 50% 40px;}
#cnt5 .program ul .pro2 a {background: url("../images/cnt5_pro02.png") no-repeat 50% 40px;}
#cnt5 .program ul .pro3 a {background: url("../images/cnt5_pro03.png") no-repeat 50% 40px;}
#cnt5 .program ul .pro4 a {background: url("../images/cnt5_pro04.png") no-repeat 50% 40px; border-right: none}
#cnt5 .program ul li a:hover, #cnt5 .program ul li a:focus {background-position: 50% 0px}

#cnt6 {padding: 50px 0;}
#cnt6 .subtit{padding-bottom: 30px;}
#cnt6 .interiorView{width:900px;}
#cnt6 .interiorThumb{width:900px; margin-top:12px}
.interiorThumb .swiper-slide{opacity: 0.4;}
.interiorThumb .swiper-slide-thumb-active{opacity:1;}

#cnt7 {background:rgba(0, 0, 0, 0.6) url("../images/bg_blur.png") no-repeat 100% 50%; padding: 120px 0;}
#cnt7 .left {float: left; margin-left: 70px;}
#cnt7 .right {float: right; margin-right: 70px;}
#cnt7 .map {margin: 45px 0 58px}
#cnt7 .proj {margin-bottom: 58px}

/*#cnt5 .program ul li a:hover, #cnt5 .program ul li a:focus {background: url("../images/cnt5_hover_pro01.jpg") no-repeat 0 0; width: 1292px; height: 818px;}*/


#footer{
    background:#535353;
    padding: 0 0 80px;
}
#footer .foot-top { width:100%; max-width:1010px; margin:0 auto; padding-bottom:40px; }
#footer .foot-top a { display:inline-block; height:24px; line-height:54px; }
#footer .area{width: ;}
#footer .area h1{width:33.3333%; float:left;}
#footer .area h1 a{width:66%; float:right; height: 113px; background: url(../images/foot-logo.png)left top no-repeat; text-indent: -9999em; margin-top:1.8em}
#footer .area > div{width: 66.6666%; float:left; line-height: 1.8;}

.quick_wrap{position: fixed; right:30px; bottom:20%;}
.quick_wrap li{width:165px;  height: 62px; transition:0.3s;}
.quick_wrap li:hover{ }
.quick_wrap li:hover a{width:180px;}
.quick_wrap li a{text-indent:-9999em; display: block; width: 76px; height: 100%; background: url(../images/quick_menu_new.png)right 0; float: right;}
.quick_wrap li a{text-indent:-9999em; display: block;}
.quick_wrap li:nth-child(1) a{background-position: right 0; display:none; }
.quick_wrap li:nth-child(2) a{background-position: right -62px}
.quick_wrap li:nth-child(3) a{background-position: right -124px}
.quick_wrap li:nth-child(4) a{background-position: right -186px}
.quick_wrap li:nth-child(5) a{background-position: right -248px}
.quick_wrap li:nth-child(6) a{background-position: right -310px}
.quick_wrap li:last-child a{background-position: right -372px}



#map{height: 205px;}
#map .iw_inner h3{color: #333;}
#map .iw_inner a{font-size: 15px;}

.main{min-height:600px;}
.main .xm{padding-top:180px;}