@charset "utf-8";


/*visual*/
#main_vis {overflow: hidden; position: relative;height: 100vh;}
#main_vis .vis {width: 100%; height: 100vh; overflow: hidden; position: relative; float: left;}
#main_vis .vis .vis_bg {background: url("/resources/img/main/main_vis.jpg")no-repeat center/cover; width: 100%; height: 100vh; position: absolute; transform: scale(1); transition: all .4s ease-in-out;}
#main_vis .vis2 .vis_bg{background: url("/resources/img/main/main_vis2.jpg")no-repeat center/cover;}
#main_vis .vis3 .vis_bg{background: url("/resources/img/main/main_vis3.jpg")no-repeat center/cover;}

#slick_vis2 .slick-active.vis .vis_bg {
    transform: scale(1);
    animation-name: zoomIn;
    animation-duration: 4s;
    animation-fill-mode: forwards;}

#main_vis .vis_txt {position:absolute;top:46%;left: 50%;transform: translate(-50%, -50%);z-index:2;font-family: 'Noto Serif KR'; text-align: center; width: 90%;}
#main_vis .vis_txt .txt1 {color:#fff; font-size:50px; margin-bottom:10px; font-weight:600; text-shadow: 2px 2px 2px #333; }
#main_vis .vis_txt .txt2 {color:#fff; font-size:22px; text-shadow: 2px 2px 2px #333; line-height: 1.7;}

#main_vis .vis_logo_wrap{display: inline-block; width: 100%; box-sizing: border-box; top: 60%; height: max-content !important;}
#main_vis .vis_logo_wrap .vis_logo{text-align: center; display: flex; flex-wrap: wrap; align-items: center;}
#main_vis .vis_logo li{vertical-align: top; width: 24.9%}
#main_vis .vis_logo > li > a{display:block;font-size:17px;color:#fff;text-align:center;}
#main_vis .vis_logo > li > a:hover{color:#fff;}
#main_vis .vis_logo > li > a:hover > span{background-color:#fff;}
#main_vis .vis_logo > li > a > span{display:block;margin:0 auto 15px;width:130px;height:130px;background-color:#fff;background-repeat:no-repeat;background-position:center 0;border-radius:150%;}
#main_vis .vis_logo > li > a > span.icon1{background-image:url(/resources/img/main/icon_mvisual02_1.png);}
#main_vis .vis_logo > li > a > span.icon2{background-image:url(/resources/img/main/icon_mvisual02_2.png);}
#main_vis .vis_logo > li > a > span.icon3{background-image:url(/resources/img/main/icon_mvisual02_3.png);}
#main_vis .vis_logo > li > a > span.icon4{background-image:url(/resources/img/main/icon_mvisual02_4.png);}
#main_vis .vis_logo > li > a > span.icon5{background-image:url(/resources/img/main/icon_mvisual02_5.png);}
#main_vis .vis_logo > li > a > span.icon6{background-image:url(/resources/img/main/icon_mvisual02_6.png);}
#main_vis .vis_logo > li > a:hover > span.icon1{background-image:url(/resources/img/main/icon_mvisual02_1_on.png);}
#main_vis .vis_logo > li > a:hover > span.icon2{background-image:url(/resources/img/main/icon_mvisual02_2_on.png);}
#main_vis .vis_logo > li > a:hover > span.icon3{background-image:url(/resources/img/main/icon_mvisual02_3_on.png);}
#main_vis .vis_logo > li > a:hover > span.icon4{background-image:url(/resources/img/main/icon_mvisual02_4_on.png);}
#main_vis .vis_logo > li > a:hover > span.icon5{background-image:url(/resources/img/main/icon_mvisual02_5_on.png);}
#main_vis .vis_logo > li > a:hover > span.icon6{background-image:url(/resources/img/main/icon_mvisual02_6_on.png);}


#slick_vis1 .slick-active.vis .vis_bg{transform: scale(1); animation-name: zoomIn; animation-duration:4s; animation-fill-mode: forwards;}

#slick_vis1 .vis .vis_bg{ background-size:cover; background-position: center; width:100%; height:100vh; position: absolute; left:0; top:0; transform: scale(1); }

#main_vis .inner { position: absolute; left: 50%; transform: translateX(-50%); z-index: 2; bottom: 0; height: 100vh;}
#main_vis .arw_wrap{position: absolute; bottom: 5%; right: 30px; z-index: 2;width: 130px;  height: 60px; box-sizing: border-box;}
#main_vis .arw_wrap .slick-arrow {width: 60px; height: 60px; background: rgba(255,255,255,0) url("/resources/img/example/main_vis_slick1_arw.png") -37px 21px/150% no-repeat; left: auto; transition: all .2s ease-in-out; position: absolute; border: 0; top: 50%; transform: translateY(-50%); right: 0;border: 1px solid #fff;box-sizing: border-box;}
#main_vis .arw_wrap .slick-prev {left: 0;background: rgba(255,255,255,0) url("/resources/img/example/main_vis_slick1_arw.png") 10px 21px/150% no-repeat;}
#main_vis .arw_wrap .slick-prev:hover {background-color: rgba(255,255,255,.2);}
#main_vis .arw_wrap .slick-next:hover {background-color: rgba(255,255,255,.2);}
#main_vis .arw_wrap .slick-prev:before, #main_vis .arw_wrap .slick-next:before {display: none;}

#main_vis .slick_dots {position: absolute;transform: translateX(-50%);left: 50%;bottom: 40px;}
#main_vis .slick_dots li {margin-right: 15px; display: inline-block;}
#main_vis .slick_dots li:last-child {margin-right: 0;}
#main_vis .slick_dots li a{color: #fff; }
#main_vis .slick_dots .slick-active a{color:#fff; font-size: 18px;}
#main_vis .slick_dots button { padding:0;position: relative; display: inline-block; color:#fff; border:0; box-sizing: border-box; background-color: #fff; opacity: .4; width: 10px; height: 10px; border-radius: 0; text-indent: -99999px;}
#main_vis .slick_dots .slick-active button {opacity: 1;}

/*custom_paging*/
.slider__counter{position: absolute; bottom: 48px; right: 190px; color: #fff; font-size: 35px; letter-spacing: 1px;}




@media screen and (max-width:768px){
    #main_vis .vis_txt{top: 40%;}
    #main_vis .vis_txt .txt1{font-size: 40px;}
    #main_vis .vis_txt .txt2{font-size: 17px;}
    #main_vis .vis_logo_wrap{width: 90%;}
    #main_vis .vis_logo > li > a{font-size: 16px;}
    #main_vis .arw_wrap{display: none;}
    .slider__counter{display: none;}
    #main_vis .arw_wrap .slick-arrow{width: 40px; height: 40px; background: rgba(255,255,255,0) url(/resources/img/example/main_vis_slick1_arw.png) -27px 14px /160% no-repeat;}
    #main_vis .arw_wrap .slick-prev{background: rgba(255,255,255,0) url(/resources/img/example/main_vis_slick1_arw.png) 7px 14px /150% no-repeat;}
    #main_vis .vis_logo_wrap{top: 55%;}
    #main_vis .slick_dots {display: none !important;} 
}
@media screen and (max-width:650px){
    #main_vis .arw_wrap .slick-arrow {display: block;bottom: 0;top: auto;transform: none;}
    #main_vis .vis_logo > li > a > span{width: 110px; height: 110px; background-position: center;}
    #main_vis .vis_txt{top: 35%;}
    #main_vis .vis_logo_wrap{top: 48%;}
    #main_vis .vis_logo li{width: 49.9%; margin-bottom: 5%;}
}
@media screen and (max-width:500px){
    #main_vis .vis_txt .txt2{font-size: 16px;}
    #main_vis .vis_txt::before {top: -32px; right: 20px;}
    #main_vis .vis_txt::after {bottom: -32px; left: 20px;}   
}

@media screen and (max-width:360px){
    #main_vis .vis_txt{top:30%;}
    #main_vis .arw_wrap{bottom: 2%;}
}