@charset "utf-8";

/*메인슬라이드*/
.main_pg #vis{
    height:100vh;
    margin-bottom: 10px;
    width:100%
}
.main_pg #vis img {width:100%}

.main_pg #vis .sw1 {background: url('../images/vis1Bg.jpg') no-repeat center;height: 100%;background-size: cover;} 
.main_pg #vis .control {position: absolute;left: 50%;bottom: 35px;transform:translateX(-50%);z-index: 9;}
.main_pg #vis .control img {width:30px;cursor:pointer}

.main_pg #vis .sw1 .wrap {width:100%;position:relative;padding-top:calc(60px + 18%)}
.main_pg #vis .sw1 .sw_a, .main_pg #vis .sw1 .visInner {opacity:0;animation:none}
.main_pg #vis .sw1 .visInner {position:relative}
.main_pg #vis .sw1 .sw_a.sw_a4, .main_pg #vis .sw1 .sw_a.sw_a5, .main_pg #vis .sw1 .sw_a.sw_a6 {position:absolute;top:0;left:0}

.main_pg #vis .sw1.on .sw_a1 {animation: vis_ani1 .5s .3s 1 ease forwards;}
.main_pg #vis .sw1.on .sw_a2 {animation: vis_ani1 .5s .7s 1 ease forwards;}
.main_pg #vis .sw1.on .sw_a3 {animation: vis_ani1 .5s 1.1s 1 ease forwards;}
.main_pg #vis .sw1.on .visInner {animation: vis_ani2 .5s 1.5s 1 ease forwards;}
.main_pg #vis .sw1.on .visInner .sw_a4 {animation: vis_ani3 .5s 1.5s 1 ease forwards;}
.main_pg #vis .sw1.on .visInner .sw_a5 {animation: vis_ani3 .5s 1.8s 1 ease forwards;}
.main_pg #vis .sw1.on .visInner .sw_a6 {animation: vis_ani3 .5s 2.1s 1 ease forwards;}

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


.main_pg #vis .sw2 {background: url('../images/vis2Bg.jpg') no-repeat center;height: 100%;background-size: cover;} 
.main_pg #vis .sw2 .wrap {width:100%;position:relative;padding-top:calc(60px + 25%)}
.main_pg #vis .sw2 .sw_a, .main_pg #vis .sw2 .visInner {opacity:0;animation:none}
.main_pg #vis .sw2 .visInner {position:relative}
.main_pg #vis .sw2 .sw_a.sw_a1, .main_pg #vis .sw2 .sw_a.sw_a2, .main_pg #vis .sw2 .sw_a.sw_a3, .main_pg #vis .sw2 .sw_a.sw_a4, .main_pg #vis .sw2 .sw_a.sw_a5 {position:absolute;top:0;left:0}

.main_pg #vis .sw2.on .visInner {animation: vis_ani2 .5s .3s 1 ease forwards;}
.main_pg #vis .sw2.on .sw_a1 {animation: vis_ani2 .5s .3s 1 ease forwards;}
.main_pg #vis .sw2.on .sw_a2 {animation: vis2_ani1 1.5s .3s infinite forwards;}
.main_pg #vis .sw2.on .sw_a3 {animation: vis_ani2 .5s .7s 1 ease forwards;}
.main_pg #vis .sw2.on .sw_a4 {animation: vis_ani2 .5s .9s 1 ease forwards;}
.main_pg #vis .sw2.on .sw_a5 {animation: vis_ani2 .5s 1.1s 1 ease forwards;}
.main_pg #vis .sw2.on .sw_a6 {animation: vis_ani2 .5s 1.3s 1 ease forwards;}
.main_pg #vis .sw2.on .sw_a7 {animation: vis2_ani2 .5s 1.7s 1 ease forwards;}
.main_pg #vis .sw2.on .sw_a8 {animation: vis2_ani2 .5s 2.1s 1 ease forwards;}

@keyframes vis2_ani1 {
    0%,100% {opacity: 0}
    50% {opacity: 1}
}
@keyframes vis2_ani2 {
    0% {transform:translateY(20px);opacity: 0}
    100% {transform:translateY(0);opacity: 1}
}


/*컨텐츠*/
.main_pg .cont1 > a {float:left;width:50%}
.main_pg .cont1 > a img {width:100%}

.main_pg .cont2 {margin-bottom:25px}
.main_pg .cont2 .slider-for .slideWrap img {width:100%}
.main_pg .cont2 .slider-for button {display:none !important}
.main_pg .cont2 .slider-nav .slick-slide img {width:100%}

.main_pg .cont3 {background-color:#f9f9f9}
.main_pg .cont3 img {width:100%}

.main_pg .cont4 > a {float:left;width:50%}
.main_pg .cont4 > a img {width:100%}

.main_pg .cont5 {margin:15px 0}
.main_pg .cont5 .bx-viewport ul li img {width:100%}

.main_pg .cont6 .root_daum_roughmap {width:100%}
.main_pg .cont6 .root_daum_roughmap .wrap_controllers {display:none}
.main_pg .cont6 > img {width:100%}