.wrap-visual { box-sizing:border-box; position:relative; z-index:1; height: 100%;border-radius:16px;overflow:hidden;}
.wrap-visual .slider { position:relative; z-index:1; height: 100%;} 
.wrap-visual .slick-list, .wrap-visual .slick-track, .wrap-visual .slick-list li, .wrap-visual .slider li:before {height: 100% !important;}
.wrap-visual .slider li { position:relative; text-align:center; } 
.wrap-visual .slider li:before { content:""; position:absolute; top:0; left:0px; width:100%; height:750px; z-index:2;background: linear-gradient(180deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.4) 30%, rgba(0, 0, 0, 0) 100%);} 
.wrap-visual .slider li img { display:inline-block; max-width:none; width:100%; height:100%; object-fit: cover;} 
.edit .wrap-visual .slider li img { height: auto; } 
.visual-util { position: absolute; left: 0px; top: 10%; opacity: 1; text-align: center; width: 100% !important; z-index: 10; } 
.visual-util .visual-text { margin: 0 auto;width: 60%;letter-spacing: -1px;color: #fff;   } 
.visual-util .visual-text .big { font-family: hufs; line-height: 1.4; font-size: 40px; letter-spacing: -1px;text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);text-transform: uppercase;} 
.visual-util .visual-text .small  {display: -webkit-box;height: 60px;overflow: hidden;text-overflow: ellipsis;word-break: keep-all;white-space: normal;-webkit-line-clamp: 2;-webkit-box-orient: vertical;margin-top: 10px;padding: 0;font-family: 'Pretendard';font-size: 18px;font-weight: 300;letter-spacing: 0.5px;line-height: 1.5;text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);}
.visual-control {margin-top: 20px;font-size: 0;} 
.visual-control .state,
.visual-control .button { display: inline-block; vertical-align: middle; } 
.visual-control .state .now,
.visual-control .state .total { position: relative; display: inline-block; width: 18px; font-family: 'Play Bold'; font-size: 14px; color: #fff; vertical-align: middle; } 
.visual-control .state .now::before,
.visual-control .state .total::before { content: '0'; } 
.visual-control .state .progress { position: relative; display: inline-block;margin: 0 8px;width: 80px; height: 2px; background: rgba(255, 255, 255, .5); vertical-align: middle; } 
.visual-control .state .progress::after { content: ""; position: absolute; width: 0px; height: 2px; left: 0px; background: rgb(255, 255, 255); transition: width; } 
.visual-control .state .progress.on::after { width: 100%; transition: width 3s; } 
.visual-control .button {font-size: 0;top: 50px;} 
.visual-control .button button { display: inline-block; text-indent: -99999px; vertical-align: middle; } 

.visual-control .button .prev,
.visual-control .button .next {transition: transform .5s;width:35px;height: 35px;margin-top: 10px;z-index: 99;} 
.visual-control .button .prev {background: url('../images/btn-visual-prev.png') no-repeat center; left: 50px; position: absolute; } 
.visual-control .button .next {background: url('../images/btn-visual-next.png') no-repeat center;right: 50px;position: absolute;} 
.visual-control .button .prev:hover {transform: translateX(-10px);} 
.visual-control .button .next:hover {transform: translateX(10px);} 

.visual-control .button .stop,
.visual-control .button .play { display: none; width: 7px; height: 9px; margin-left: 8px; } 
.visual-control .button .stop.on,
.visual-control .button .play.on { display: inline-block } 
.visual-control .button .stop { background: url('../images/btn-visual-stop.png') no-repeat center; } 
.visual-control .button .play { background: url('../images/btn-visual-play.png') no-repeat center; } 
.visual-link { display: none; } 
.visual-link-copy {opacity: 0;margin-top: 30px;transition: opacity .35s;} 
.visual-link-copy.on { opacity: 1; } 
.visual-link-copy a { display: inline-flex;justify-content: center;align-items: center;height: 50px; padding: 0 20px; border: 1px solid #fff;font-size: 16px;color: #fefefe !important;transition: background-color 0.2s;} 
.visual-link-copy a:hover {background: #fff !important;border-color: #fff !important; color: #000 !important;}
.visual-link-copy span::after { content: ''; position: relative; top: -2px; display: inline-block; width: 10px; height: 10px; margin-left: 15px; background: url('../images/btn-visual-more.png') no-repeat center; vertical-align: middle;}
.visual-link-copy a:hover span::after {filter: invert(1);}

@media all and (max-width: 1400px){
    .visual-util { left: 0; opacity: 1; } 
}

@media all and (max-width: 1450px){
    .visual-util .visual-text .big { font-size: 38px; } 
    .visual-util .visual-text .small {padding-top: 5px; font-size: 18px; } 
    .visual-link-copy { margin-top: 25px; } 
    .visual-link-copy a { font-size: 15px; font-weight: 200; } 
}
@media all and (max-width: 1000px){
    .visual-util .visual-text .big { font-size: 30px; } 
    .visual-util .visual-text .small { padding-top: 5px; font-size: 18px; height: 52px; width: 95%; line-height: 1.25; margin: 0px auto; } 
    .visual-control .button .prev,
    .visual-control .button .next { top: 50%; } 
    .visual-control {margin-top: 10px;font-size: 0;} 
}
@media all and (max-width: 660px){
    .visual-util .visual-text {width: 80%;}
    .visual-util {padding: 0px; } 
    .wrap-visual .slider li img { max-height: 100%; } 
    .visual-control .button .prev {left: 30px;} 
    .visual-control .button .next {right: 30px;} 
}
