/*Content CSS*/
#main_vis {position: relative; z-index: 5; width: 100%; height:calc(100vh - 110px); min-height:827px; display: flex; align-items: center; justify-content: center;
max-height: 970px; padding-bottom: 50px;}
#main_vis_slider {width:100%; position: absolute; top: 0; right: 0; }
#main_vis_slider .main_slide {height: calc(100vh - 110px); min-height:827px; max-height: 970px; z-index: 1;  background-size:cover; background-position:center;  position:relative; background-repeat: no-repeat; display: flex; align-items: center; justify-content: center; outline: none; }
#main_vis_slider .main_slide.img01 { background-image:url('../img/main1.jpg');}
#main_vis_slider .main_slide.img02 { background-image:url('../img/main2.jpg');}
#main_vis_slider .main_slide.img03 { background-image:url('../img/main3.jpg');}


/*main_typo*/
.main_typo_wrap {text-align: left; position: relative; z-index: 2; max-width:1400px; padding:0 50px; width: 100%;}
.main_typo {position: relative; z-index: 1; }
.main_typo h2 {font-size:75px; font-weight:700; color:#fff; line-height: 1.11; font-family: 'Play', sans-serif;  text-shadow: 0 0 20px rgba(10, 84, 69, 0.25);}
.main_typo .flex {display: flex; align-items: center; margin-bottom: 50px; }


/*컨트롤러*/
#main_vis_slider .slick-arrow { cursor: pointer; position:absolute; z-index: 2; border:0; font-size: 0; width: 30px; height: 58px; top: 50%;  transform: translateY(-50%);}
#main_vis_slider .slick-arrow.slick-prev { background:url('../img/prev.png') no-repeat center/contain; left: 80px;}
#main_vis_slider .slick-arrow.slick-next { background:url('../img/next.png') no-repeat center/contain; right: 80px;}
#main_vis_slider .slick-arrow:focus {outline: none; border: none;}

/* dots */
#main_vis .slick-dots { display: flex; justify-content:flex-start; }
#main_vis .slick-dots li {margin-right:25px; }
/* #main_vis .slick-dots li:last-child {margin-right: 0; } */
#main_vis .slick-dots button {transition: all .3s ease; font-size: 20px; background-color: transparent; border:0; position: relative; color: rgba(255, 255, 255, 0.3);
font-weight: 600;}
#main_vis .slick-dots button::before {content: '0';}
#main_vis .slick-dots li.slick-active button { color: rgba(255, 255, 255, 1); }



/* progress */
#main_vis .bar_wr {width:100%; max-width: 292px; height: 2px; background: rgba(255,255,255,.3); position: relative; }
#main_vis .redbar { width:1px; height:2px; opacity: 1; position:absolute; left:0; top:-0; z-index:10; transition-property: width; transition-duration: 5000ms;
transition-timing-function: linear; }
#main_vis .redbar.redbar_active { width:100%; height:100%; opacity: 1; background: #FFF; transition-property: width; transition-duration: 5000ms; transition-timing-function: linear; }
#main_vis .redbar.redbar_remove {width:0px; height:100%; opacity: 1; background: #FFF; transition-property: width; transition-duration: .1s; transition-timing-function: linear;}


/* q_box_wrap */
#q_box_wrap {width:100%; max-width: 1400px; position: absolute; bottom: -110px; display: flex; padding: 0 50px; left: 50%;  transform: translateX(-50%);}
#q_box_wrap .logo { width: calc(100% / 3); background:url("../img/q_box_bg1.jpg") 50%/cover no-repeat; display: flex; align-items: center; justify-content: center;
padding: 30px; height: 250px; }
#q_box_wrap a {text-align: left; display: block; width: calc(100% / 3);padding:40px 45px; line-height: 1;  position: relative; background:url("../img/q_box_bg2.jpg") 50%/cover no-repeat;}
#q_box_wrap a:nth-of-type(2) { background-image:url("../img/q_box_bg3.jpg"); }

/* #q_box_wrap a:last-child::after {display: none;} */
#q_box_wrap .title {position: relative; }
#q_box_wrap .title h3 {font-size: 17px; font-weight: 700; color:rgba(255, 255, 255, 1);  margin-bottom: 15px; transition: all .3s; position: relative; }
#q_box_wrap .title h2 {font-size: 30px; font-weight:700; color:#fff; transition: color .3s; margin-bottom: 65px;}
#q_box_wrap .icon {display: block; position: absolute; right: 45px; bottom:40px;  transition: all .3s;}
#q_box_wrap .icon img { transition: transform .5s;}
#q_box_wrap span img { transition: transform .5s; }


/* hover */
@media screen and (min-width: 641px) {
    #q_box_wrap a:hover .icon img {transform: rotateY(180deg); }
    #q_box_wrap a:hover span img {transform: rotate(90deg); }
}


@media screen and (max-width: 1700px) {
    #main_vis_slider .slick-arrow.slick-prev {left: 30px;}
    #main_vis_slider .slick-arrow.slick-next {right: 30px;}
}


@media screen and (max-width:1400px) {
    #q_box_wrap a {  padding: 40px 30px 40px;}
}

@media screen and (max-width: 1024px) {
    .main_typo_wrap {padding:0 30px; text-align: center;}
    #main_vis, #main_vis_slider .main_slide {min-height: 700px; height: 700px; }

    .main_typo h2 {font-size:60px;  }
    .main_typo .flex {justify-content: center; margin-bottom: 40px; }

    #q_box_wrap {flex-wrap: wrap; bottom: -70px; padding:0 30px;}
    #q_box_wrap .logo {height: auto; }
    #q_box_wrap a {padding: 30px 20px; }
    /* #q_box_wrap a {flex:inherit; width: 50%; padding: 20px; } */
    #q_box_wrap .title h2 {font-size: 25px; margin-bottom: 30px;}
    #q_box_wrap .title h3 {font-size: 15px; margin-bottom: 10px; white-space: nowrap;}
    #q_box_wrap .icon {right: 20px; bottom: 30px; width: 50px;}
    #q_box_wrap span {width: 30px; display: block;}

}

@media screen and (max-width: 640px) {
    #main_vis, #main_vis_slider .main_slide {min-height: 600px; height: 600px; }
    .main_typo_wrap {padding:0 20px; }

    .main_typo h2 {font-size:40px;  }
    .main_typo .flex {flex-direction: column;margin-bottom: 30px; }
    #main_vis .slick-dots {margin-bottom: 30px;}
    #main_vis .slick-dots li:last-child {margin-right: 0; }

    #q_box_wrap {padding:0 20px; bottom: -50px;}
    #q_box_wrap .logo {width: 100%; padding: 15px; }
    #q_box_wrap .logo img { max-height: 30px}
    #q_box_wrap a {padding: 20px; width: 50%; display: flex; align-items: center;}

    #q_box_wrap .title {padding-right: 40px;}
    #q_box_wrap .title h2 {font-size: 17px; margin-bottom: 0;}
    #q_box_wrap .title h3 {font-size: 13px; margin-bottom:5px; letter-spacing: -.4px; white-space: normal; line-height: 1.3;}
    #q_box_wrap .icon {width: 40px; bottom: auto; top: 50%;  transform: translateY(-50%);}
    #q_box_wrap span {display: none;}
}

@media screen and (max-width: 480px) {
    #q_box_wrap a {padding: 15px;}
    #q_box_wrap .title {padding-right: 25px;}
    #q_box_wrap .title h3 {font-size: 11px;}
    #q_box_wrap .icon {width: 30px; right: 10px;}
}