#main_vis{width: 100%; height: 100vh; min-height: 900px; max-height: 1080px; background: url('../img/main1.jpg') 50% / cover no-repeat; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;}
.main_inner{width: 100%; max-width: 1400px; padding: 0 50px; display: flex; align-items: center; justify-content: space-between; margin-top: 45px;}
/* font-style */
.main_inner .fs_51{font-family: 'KotraBold', 'Pretendard'; font-size: 51px; line-height: 90px; color: #fff;}
.main_inner .fs_51 span{font-size: 35px;}
.main_inner .fs_40{font-size: 40px; font-weight: 700; color: #fff; line-height: 1;}
.main_inner .fs_18{font-size: 18px; font-weight: 300; color: rgba(255,255,255,.9); line-height: 30px;}

.main_inner .tit{flex-shrink: 0; position: relative; top: 8px;}
.main_inner .tit::before{content: ''; display: block; width: 41px; height: 40px; background: url('../img/squ_icon.png') 50% / cover no-repeat; position: absolute; top: -9px; left: 1.5px;}
.main_inner .tit h2 {position: relative; z-index: 1; letter-spacing: 1.2px;}
.main_inner .tit h2 + h2{position: absolute; width: 100%; color: rgba(255,255,255,.1); top: 7px; left: 8px; -webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none; z-index: 0;}

.main_list{width: 701px; display: flex; flex-wrap: wrap;}
.main_list > li{width: 50%; display: flex; cursor: pointer;}
.main_list > li{ min-height: 300px; padding: 42px 42px 30px; background-color: rgba(0,0,0,.5); transition: .3s; display: flex; flex-direction: column;}
/* .main_list > li::before{content: '';display: block; width: 100%; height: 100%; background-color: rgba(27, 219, 225,.2); opacity: 0; position: absolute; top: 0; left: 0;}
.main_list > li:hover::before{opacity: 1;} */
.main_list > li:hover{background-color: rgba(27, 219, 225,.2);}
.main_list > li h3{margin-bottom: 20px;}
.main_list > li span{font-family: 'Roboto'; font-size: 18px; font-weight: 400; line-height: 1; color: #fff; display: inline-block;margin-right: 7px; text-transform:uppercase;}
.main_list > li i{display: inline-block; width: 8px; height: 13px; background: url('../img/main_arrow.png') 50% / cover no-repeat; }
.main_list > li:nth-child(odd){ border-right: solid 1px rgba(255,255,255,.3);}
.main_list > li:nth-child(-n+2){ border-bottom: solid 1px rgba(255,255,255,.3);}

.dot_list{margin-top: 40px; align-self: flex-end; min-width: 83px;}
.dot_list li{position: relative; padding-left: 16px; margin-bottom: 10px;}
.dot_list li::before{content: ''; display: block; width: 5px; height: 5px; background-color: rgba(255,255,255,.9); position: absolute; top: 12px; left: 0; border-radius: 50%; }
.dot_list li:last-child{margin-bottom: 0;}
.scroll{position: absolute; bottom: 47px; right: 55px; animation:ani 1s infinite;}
.scroll a{ display: flex; flex-direction: column; align-items: center;}
.scroll span{font-size: 16px; font-weight: 500; color: #fff; writing-mode: tb-rl; letter-spacing: .6px; margin-bottom: 10px; display: inline-block;}
@keyframes ani{
            0%{bottom: 47px;}
            50%{bottom: 57px;}
            100% {bottom: 47px;}
         }