@media ( min-width: 1920px) {
    #visual-img-slide .item .img img{width: 100% !important;}
}

/*비주얼 존*/
#visual2{height: 605px; position: relative; overflow: hidden; }
#visual2 .visual_wrap{height: 100%}
#visual-img-slide{overflow: hidden; position: relative; z-index:0}
/*#visual-img-slide .item{width: calc(100vw - 24rem); height: 100%; overflow: hidden; position: relative; height: 630px }*/
#visual-img-slide .item{width: calc(100vw - 0rem); height: 100%; overflow: hidden; position: relative; height: 605px }
#visual-img-slide .item .img {display: block; width: 100%; height: 100%;}
#visual-img-slide .item .img img{width: auto; height: 100%; transition: all 3s ease; -webkit-transition: all 3s ease; transition-delay: .75s}
#visual-img-slide .item.slick-active .img img{transform: scale(1.04)}
#visual-img-slide .item .refer{position: absolute; left: 55%; top: 12rem; height: 22rem; opacity: 0; transition: 1s; transition-delay: 1.0s; }
#visual-img-slide .item.slick-active .refer {opacity: 1}
#visual-img-slide .item .refer .title{margin-bottom: 2.2rem; font-family: 'NotoB'; font-size: 50px; color:#a41d55; font-weight: 400; /*text-shadow: 0px 2px 1px #00000029;*/ word-break: keep-all}
#visual-img-slide .item .refer .title img{max-width: 100%;}
#visual-img-slide .item .refer .txt{font-size: 2rem; font-weight: 400; color:#a41d55; line-height: 3rem; top:-2rem}
#visual-img-slide .item .refer a{display:block; position: absolute; left: 0; bottom: 0; padding: 1rem; border:1px solid #a41d55; text-align: center; border-radius: 50px; width: 21rem; font-size: 1.6rem; font-weight: 400; color:#fff; z-index: 1;  transition: all 0.3s ease; -webkit-transition: all 0.3s ease;  overflow: hidden;  }
#visual-img-slide .item .refer a:before{content: ''; position: absolute; left: 0; top:0; width: 0%; height: 100%; background: #fff; z-index: -1;  transition: all 0.5s ease; -webkit-transition: all 0.5s ease; }
#visual-img-slide .item .refer a:hover, #visual-img-slide .item .refer a:focus{color:#000; font-weight: 500}
#visual-img-slide .item .refer a:hover:before, #visual-img-slide .item .refer a:focus:before{width: 100%}

#visual2 .arrows > a{ width: 3rem; height: 3rem; border:2px solid #a41d55; position: absolute; z-index: 9; border-radius: 50%; color:#a41d55; transition: all 0.3s ease; -webkit-transition: all 0.3s ease;}
#visual2 .arrows > a i{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
#visual2 .arrows .prev{left: 8.25rem; top: 50%; transform: translateY(-50%); }
#visual2 .arrows .next{right: 8.25rem; top: 50%; transform: translateY(-50%); }
#visual2 .arrows > a:hover, #visual .arrows > a:focus, #visual .arrows > a:active{background: #a41d55; border: transparent; color: #fff}


#visual2 .bar-wrap{position:absolute; left: 50%; bottom:6rem; transform: translateX(-50%); width: calc(100vw - 54rem); height: 1px; background: transparent; border-radius: .5rem; overflow: hidden; z-index: 1; opacity: 1; transition: .3s; transition-delay: 1.5s; }

#visual2 .bar-wrap:before{content: ''; position: absolute; left: 0; width: calc(50% - 60px); top: 0; height: 3px;background: rgba(255,255,255,.2); z-index: 1}
#visual2 .bar-wrap:after{content: ''; position: absolute; right: 0; width: calc(50% - 60px); top: 0; height: 3px;background: rgba(255,255,255,.2); z-index: 1}
#visual2 .pro-bar{width: 100%; height: 100%; background: transparent; position: relative; z-index: 3}
#visual2 .pro-bar:before{content: ''; position: absolute; left: 0; width: 0; top: 0; height: 3px;background: #fff; z-index: 1}
#visual2 .pro-bar:after{content: ''; position: absolute; left: calc(50% + 60px); width: 0; top: 0; height: 3px;background: #fff; z-index: 1}

#visual2 .pro-bar.pro-ani:before{animation-name: proBar; animation-duration: 4s; animation-iteration-count:1; animation-fill-mode: forwards; animation-timing-function:inherit}
#visual2 .pro-bar.pro-ani:after{animation-name: proBar; animation-duration: 4s; animation-iteration-count:1; animation-delay: 4s; animation-fill-mode: forwards; animation-timing-function:inherit}
#visual2 .pro-bar.pro-ani.stop:before, #visual .pro-bar.pro-ani.stop:after{animation-play-state: paused;}

@keyframes bar-wrap{
    0%{opacity: 0}
    100%{opacity: 1}
}

@keyframes proBar{
    0%{width:0;}
    100%{width: calc(50% - 60px);}
}


#visual2 .phause{position: absolute; left: calc(50% + 10px); bottom:4.75rem; transform: translateX(-50%); z-index: 21; color: #fff;  z-index:1}
#visual2 .phause .slick-counter{font-size:1.4rem; color:#000; text-align:center; font-weight:700; color:#fff; display: inline-block; font-family: 'Lato'; z-index:1}
#visual2 .phause .slick-counter span{font-size: 1.4rem; padding: 0 7.5px; position: relative;}
#visual2 .phause .slick-counter span + span{margin-left: 5px;}
#visual2 .phause .slick-counter span + span:before{content: ''; position: absolute; left: -7px; top:50%; transform: translateY(-50%) rotate(-55deg); width:  11px; height: 1px; background: #fff; display: block; }
#visual2 .phause .play{ display: none; z-index:1}
#visual2 .phause a{color:#fff; font-size: 1.4rem; padding: 0 5px}

@media (max-width: 1630px) {
    #visual-img-slide .item{width: calc(100vw - 10rem)}
    #visual .bar-wrap{width: calc(100vw - 38rem)}
}

@media (max-width: 1440px) {
    #visual-img-slide .item{width: calc(100vw - 4rem)}
    #visual .bar-wrap{width: calc(100% - 4rem)}
}


@media (max-width: 1035px) {
    #visual2{height: 500px}
    #visual .arrows {display: none}
    #visual-img-slide .item{height: 500px}
    #visual-img-slide .item .refer{left:50%; top: 50%; transform: translate(-50%, -50%); text-align: center;}
    #visual-img-slide .item .refer a{left: 50%; transform: translateX(-50%);}
    #visual-img-slide .item .refer{width: 80%;}

}

@media (max-width: 768px) {
    #body{margin: 118px auto 60px;}
    #visual2{height: 373px}
    #visual-img-slide .item{height: 373px}
    #visual-img-slide .item .refer{height: 20rem;}
    #visual-img-slide .item .refer .txt{display: none;}
    #visual .bar-wrap{bottom: 4rem}
    #visual .phause{bottom:2.75rem; left: 50%; z-index: 1}
}
@media (max-width:600px){
	#visual-img-slide .item .refer .title.t2{font-size:32px}
}

@media (max-width: 500px) {
    #visual-img-slide .item .refer{width: 70% }
    #visual-img-slide .item .refer .title{font-size: 32px;}
    #visual-img-slide .item .refer .title.t2{font-size:27px}
}