/*Content CSS*/
#main_vis { padding:0; display:block; position: relative; z-index: 5; width: 100%; height:550px; display: flex; align-items: center; 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:550px; 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'); background-position: 70%;}
#main_vis_slider .main_slide.img03 { background-image:url('../img/main3.jpg?v=240108'); background-position: 60%;}

/* main_typo */
.main_typo_wrap{width: 100%; max-width: 1400px; padding: 0 20px; text-align: center;}
.main_typo{ position: relative; top: -15px;}
.main_typo h2{font-size: 52px; font-weight: 800; line-height: 1; letter-spacing: -2.75px; color: #fff; font-family: 'Paybooc';}
.main_typo p{font-size: 18px; font-weight: 400; line-height: 1; letter-spacing: -.63px; margin: 15px 0 30px; color: #fff;}
.more_btn{display: flex; align-items: center; justify-content: space-between; border: solid 1px #fff; width: 100%; height: 40px; color: #fff; padding: 0 20px; position: relative; transition: .3s; max-width: 300px; margin: 0 auto;}
.more_btn span{font-size: 13px; font-weight: 700; font-family: 'Paybooc';}
.more_btn:hover{background-color: #1b56ff; border-color: #1b56ff;}
/* dots */
#main_vis .dots {margin-bottom: 40px;}
#main_vis .slick-dots{display: flex; justify-content: center;}
#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-right: 25px; }
#main_vis .dots .slick-dots li:last-child { margin: 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;}


#nav_area {position: absolute; width: 100%; bottom: 0; left: 0; }
#nav_area .nav_list { background:#fff; box-shadow: 0 0 18px 0 rgba(0, 53, 134, .17); display: flex; }
#nav_area .nav_list li { position:relative; flex: 1;}
#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:20px 10px; background-color: #fff; width: 100%;}
#nav_area .nav_list a .icon {min-height: 29px; line-height: 29px;}
#nav_area .nav_list a .icon img { transition: all .5s; width: 25px;}

#nav_area .nav_list a .arrow { position: relative; z-index: 1; margin-left: 10px;  width:25px; height: 25px; line-height: 22px; display: none;}
#nav_area .nav_list a .arrow img {  transition:all .5s; width: 18px;}
#nav_area .nav_list a .arrow::after { content:""; position:absolute; right:0; top:0; width:25px; height: 25px; border-radius: 50%; background:#f5f5f5; z-index: -1; transition:all .5s; }

#nav_area .nav_list a .txt { margin:8px 0 0;}
#nav_area .nav_list a .txt h2 { font-size: 17px; font-weight: 800; color: #010715; }

@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; }

}