/* 비주얼 */
.wrap-visual .icon {position: relative;}
.wrap-visual .icon::after {content: '';position: absolute;left: 0;top: 0;z-index: 10;width: 100%;height: 100%;background: rgba(0, 0, 0, .25);pointer-events: none;}
.wrap-visual .swiper-slide img {width: 100%;height: 100%;height: 96rem;object-position: center top;object-fit: cover;}
.wrap-visual .text-slider {position: absolute; left: 0; z-index: 20; top: 45%; width: 100%; text-align: center;}
.wrap-visual .text-slider .inner {width: 100%;max-width: 160rem;margin: 0 auto;}
.wrap-visual .slogan .text_1 {display: block; font-family: sm; font-size: 5.8rem; line-height: 1; color: #fff;}
.wrap-visual .slogan .text_2 {padding-top: 2rem; font-family: pr; font-size: 2.2rem; color: #fff;}
.wrap-visual .line {position: absolute; left: 0; bottom: 8.5rem; z-index: 20; width: 100%;}
.wrap-visual .line .inner {display: flex; align-items: center;justify-content: space-between;width: 100%;max-width: 160rem;margin: 0 auto;}
.wrap-visual .progress {position: relative; display: flex; width: calc(100% - 10.5rem);height: .3rem; background: rgba(255,255,255,.2);}
.wrap-visual .progress span {position: absolute; left: 0;top: 0; width: 0%;height: 100%; background: #fff; transition: width 3.5s;border-radius: 0 !important;}
.wrap-visual .progress.on span {width: 100%;}
.wrap-visual .control {display: flex; justify-content: flex-end; align-items: center; flex-shrink: 0; width: 13rem;}
.wrap-visual .control .btn-wrap {display: flex;align-items: center;}
.wrap-visual .control button {text-indent: -9999rem;}
.wrap-visual .control .prev,
.wrap-visual .control .next {width: .7rem; height: 1.2rem;}
.wrap-visual .control .prev {background: url('../images/btn-visual-prev.png') no-repeat center / cover;}
.wrap-visual .control .next {background: url('../images/btn-visual-next.png') no-repeat center / cover;}
.wrap-visual .control .stop,
.wrap-visual .control .play {display: none; width: .6rem; height: 1.2rem;}
.wrap-visual .control .stop.on,
.wrap-visual .control .play.on {display: block;}
.wrap-visual .control .stop {background: url('../images/btn-visual-stop.png') no-repeat center / cover;}
.wrap-visual .control .play {background: url('../images/btn-visual-play.png') no-repeat center / cover;}
.wrap-visual .control .now,
.wrap-visual .control .total {position: relative; top: .1rem; margin: 0 1rem; min-width: 1.76rem;font-family: sm; font-size: 1.2rem; color: #fff;}
.wrap-visual .control .now, .wrap-visual .control .now::before,
.wrap-visual .control .now, .wrap-visual .control .total::before {content: '0';}

@keyframes progressBarAnim {
  from {
    width: 0%;
  }
  to {
    width: 100%;
  }
}

@media screen and (max-width: 1740px) {
	.wrap-visual .text-slider .inner {padding: 0 2rem;}
	.wrap-visual .line .inner {padding: 0 2rem;}
}

@media screen and (max-width: 1100px) {
	.wrap-visual .text-slider .inner {padding: 0 4rem;}
	.wrap-visual .line .inner {padding: 0 4rem;}
}

@media screen and (max-width: 1024px) {
  	.wrap-visual .swiper-slide img  {height: 68rem;}
	.wrap-visual .slogan .text_1 {font-size: 5.2rem;}
  	.wrap-visual .line {bottom: 7rem;}
}

@media screen and (max-width: 768px) {
  	.wrap-visual .swiper-slide img {height: 50rem; opacity: 1 !important;}
  	.wrap-visual .text-slider {left: 50%; top: 50%;transform: translate(-50%,-50%)}
	.wrap-visual .slogan .text_1 {font-size: 4rem;}
  	.wrap-visual .slogan .text_2 {font-size: 2rem;}
  	.wrap-visual .line {bottom: 5.5rem;}
}

@media screen and (max-width: 650px) {
	.wrap-visual .text-slider .inner {padding: 0 2rem;}
	.wrap-visual .line .inner {padding: 0 2rem;}
}

@media screen and (max-width: 500px) {
	.wrap-visual .slogan .text_1 {font-size: 3.6rem;}
  	.wrap-visual .slogan .text_2 {font-size: 1.8rem;}
}