/*Content CSS*/
#main_vis_wrap {margin-top: 90px; position: relative;}
#main_vis_wrap .slider_img {background:url("/img/main/bg01.jpg") 50% 50% no-repeat;background-size:cover; height: calc(100vh - 90px); min-height: 837px;width:100%;overflow:hidden; }
#main_vis_wrap .slide2 {background-image:url("/img/main/bg02.jpg");}
#main_vis_wrap .slide3 {background-image:url("/img/main/bg03.jpg");}
#main_vis_wrap .slide4 {background-image:url("/img/main/bg04.jpg");}
#main_vis_wrap .slide5 {background-image:url("/img/main/bg05.jpg");}


/*페이지넘버*/
#main_vis_wrap { color:#fff; display: flex; flex-direction: row; justify-content: center;}
#main_vis_wrap  .number{font-size:17px; font-weight:700; color:#fff; font-family: 'NanumSquare',sans-serif;}
#main_vis_wrap .number_last{font-size:17px; font-weight:700; color:#fff; font-family: 'NanumSquare',sans-serif;}
#main_vis_wrap  .number::after {content: '/';  display: inline-block; margin:0 10px;}
#main_vis_wrap .number::before, #main_vis_wrap .number_last::before {content: '0';}

/*메인타이포*/
.main_typo_wrap {position: absolute; top:0; left: 0; width: 100%; height: 100%; display: flex; align-items: center;  padding-bottom: 80px;}
.main_typo {position: relative; width:1300px; text-align: center;margin:0 auto; padding:145px; position: relative; z-index: 1; }
.main_typo img {position: absolute; left:50%; transform:translateX(-50%);  z-index: -1; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none;  -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-drag: none;}
.main_typo h2 {font-size:45px; font-weight: 300; color:#fff; font-family: 'NanumSquare',sans-serif; word-break: keep-all;}
.main_typo h1 {font-size:56px; font-weight: 700; color:#fff; font-family: 'NanumSquare',sans-serif; margin-top:35px; word-break: keep-all;}
.main_typo img.top {top: 0; }
.main_typo img.btm {bottom: 0; }


/*progress*/
.slide-progress { width:380px; height: 3px; background: rgba(255,255,255,1); margin: 24px 0 0 0; position: relative; }
.slide-progress div { position: absolute; top: 0; left: 0; height:3px; max-width: 100%; width:0; background: #2ba8bb;}

/* m_controller (컨트롤러 부모객체 )*/
.m_controller {position: absolute;  bottom: 80px; left: 0; width: 100%;}
.m_controller > div {display: flex; align-items: center; flex-direction: column; width: 1300px; margin:0 auto; }
.m_num_wr {position: relative; width: 140px; display: flex; justify-content: center; align-items: center;}
.m_num_wr #m_nav {position: absolute; width: 100%; left:0; height: 100%; top:-2px; border:0px solid red; display: flex; justify-content: space-between;
align-items: center;}
.m_num_wr #m_nav button {border:0; background: transparent; box-shadow: none; color:#fff; font-size:13px; outline: none; font-family: 'Nanum Gothic', sans-serif;}

/* dots */
/* .m_dots {display: flex; align-items: center; position: absolute; border:0px solid red; bottom:60px; left:0;}
.m_dots button {width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.4); margin-right: 12px; outline: none; transition: all .2s ease;}
.m_dots button:last-child {margin-right: 0;}
.m_dots button.active {width: 12px; height: 12px; background: rgba(255,255,255,.9);} */

/*마우스*/
#vis_scroll { width: 13px ;height: 132px; position: absolute; top:42%; left: 88px; z-index: 2; animation:ani 1.3s infinite linear; cursor: pointer; display: block;}
@keyframes ani {
    0%{transform: translateY(0);}
    50%{transform: translateY(-15px);}
    100% {transform: translateY(0);}
}




@media screen and (max-width:1700px) {

}

@media screen and (max-width:1300px) {
    .main_typo {width: 100%; padding: 145px 80px; }
    .m_controller > div {width: 100%; }
    #vis_scroll {left: 60px;}


}

@media screen and (max-width: 1024px) {
    #main_vis_wrap {margin-top: 0; }
    #main_vis_wrap .slider_img {height:720px; min-height: auto; }
    #vis_scroll {display: none; }


    .main_typo  {text-align: center; padding:110px 80px;}
    .main_typo h2 {font-size:25px ;}
    .main_typo h1 {font-size:40px ; margin-top: 20px ; line-height: 60px;}
    .main_typo img {height: 80px;}
    .main_typo_wrap {padding-bottom: 60px;}

    .m_controller {bottom: 60px;}
    .slide-progress {width: 300px;}


}

@media screen and (max-width: 960px) {
}

@media screen and (max-width: 640px) {
    #main_vis_wrap .slider_img {height:650px; }
    .main_typo {width: 100%; padding: 95px 30px; }

    .main_typo_wrap {padding-bottom: 40px; }
    .main_typo h2 {font-size:18px ;}
    .main_typo h1 {font-size:30px ; line-height: 45px;}
    .main_typo img {height: 70px;}


}

@media screen and (max-width: 480px) {

}

@media screen and (max-width: 375px) {
    .main_typo {padding: 95px 15px; }
    .slide-progress {width: 250px;}
}