/*Content CSS*/
#main_vis { padding:0; display:block; position: relative; z-index: 5; width: 100%; height:100vh; min-height:900px; max-height: 1080px; display: flex; align-items: flex-end; justify-content: center; }
#main_vis_slider {width: 100%; height: 100%; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#main_vis_slider .main_slide {height: 100vh; min-height: 900px; max-height: 1080px; position: relative; z-index: 1;  background: 50% / cover no-repeat; display: flex; align-items: center; justify-content: center;}
#main_vis_slider .main_slide.img01 { background-image:url('../img/main1.jpg?v=240108');}
#main_vis_slider .main_slide.img02 { background-image:url('../img/main2.jpg?v=240108');}
#main_vis_slider .main_slide.img03 { background-image:url('../img/main3.jpg?v=240108');}

/* main_typo */
.main_typo_wrap{width: 100%; max-width: 1400px; padding: 0 50px;}
.main_typo h2{font-size: 110px; font-weight: 800; line-height: 1; letter-spacing: -2.75px; color: #fff; font-family: 'Paybooc';}
.main_typo p{font-size: 25px; font-weight: 400; line-height: 1; letter-spacing: -.63px; margin: 45px 0 60px; color: #fff;}
.more_btn{display: flex; align-items: center; justify-content: space-between; border: solid 1px #fff; width: 200px; height: 50px; color: #fff; padding: 0 20px; position: relative; transition: .3s;}
.more_btn span{font-size: 15px; font-weight: 700; font-family: 'Paybooc';}
.more_btn:hover{background-color: #1b56ff; border-color: #1b56ff;}
/* dots */
#main_vis .dots { position: absolute; top:50%; transform:translateY(-50%); right:85px; z-index: 5; }
#main_vis .dots button { display: block; width: 8px; height: 8px; border-radius: 50%; background:#fff; outline: none; transition: all .2s; border:0; position:relative; z-index: 1; font-size: 0;}
#main_vis .dots button::before { content:""; position:absolute; left:-8px; top:-8px; width:24px; height:24px; background:#1b56ff; opacity: 0.3; transition:all .3s; border-radius: 50%; z-index: -1; opacity: 0; }
#main_vis .dots .slick-dots li{ margin-bottom: 25px; }
#main_vis .dots .slick-dots li:last-child { margin-bottom: 0; }
#main_vis .dots .slick-active button { background:#1b56ff; }
#main_vis .dots .slick-active button::before { opacity: 0.3; }

#main_vis .arrows { cursor: pointer; transition: all 0.3s; position:absolute; z-index: 10; opacity: 1; left:95px; top: 50%; transform: translateY(-50%);border:0; font-size: 0;}
#main_vis .slick-arrow{display: block;}
#main_vis .slick-arrow.slick-prev { background:url('../img/prev.png') no-repeat left center; content: 'prev'; padding-left: 20px; }
#main_vis .slick-arrow.slick-prev::before {content: 'prev';color:#fff; font-size: 13px; font-weight: 300; text-transform: uppercase; }
#main_vis .slick-arrow.slick-next { background:url('../img/next.png') no-repeat left center; padding-left: 20px; margin-top: 24px;}
#main_vis .slick-arrow.slick-next::before { content: 'next'; color:#fff;  font-size: 13px; font-weight: 300;
text-transform: uppercase; }
#main_vis .slick-arrow:focus {outline: none; border: none;}


#vis_scroll{ position:absolute; right:85px; bottom:73px; z-index: 2;  animation:ani 1.4s infinite ease; cursor: pointer; }

@keyframes ani {
    0%{bottom:100px;}
    50%{bottom: 90px;}
    100% {bottom:100px;}
}

#nav_area {margin-top: 145px;}
#nav_area .nav_list { background:#fff; box-shadow: 0 0 32px 0 rgba(0, 53, 134, .17); display: flex; }
#nav_area .nav_list li { position:relative; width:25%; }
#nav_area .nav_list li:nth-child(1){display: flex; align-items: center; justify-content: center;}
#nav_area .nav_list li::after { content:""; position:absolute; right:-1px; top:0; height: 100%; width:1px; z-index: 1; background:#ddd; }
#nav_area .nav_list a { position:relative; display: block;  padding:55px 50px 50px; height: 250px;  background-color: #fff;}
#nav_area .nav_list a .icon {min-height: 47px; line-height: 47px;}
#nav_area .nav_list a .icon img { transition: all .5s; }
#nav_area .nav_list a .arrow { position:absolute; right:40px; top:55px; z-index: 1; }
#nav_area .nav_list a .arrow img { position:relative; top:12px; left:-28px; transition:all .5s; }
#nav_area .nav_list a .arrow::after { content:""; position:absolute; right:0; top:0; width:44px; height: 44px; border-radius: 50%; background:#f5f5f5; z-index: -1; transition:all .5s; }

#nav_area .nav_list a .txt { margin:30px 0 0; }
#nav_area .nav_list a .txt h2 { font-size: 22px; font-weight: 800; color: #010715; }
#nav_area .nav_list a .txt p { font-size: 16px; font-weight: 400; color: #666; letter-spacing: -0.4px; margin:12px 0 0; }

@media screen and (min-width: 1024px) {
    #nav_area .nav_list a:hover .icon img { transform: rotateY(180deg); }
    #nav_area .nav_list a:hover .arrow img { left:-7px; }

}