@charset "utf-8";

/* 비주얼 */
.wrap-visual {position: relative; height:49rem; z-index: 0;}
.wrap-visual .visual-slide .area {padding: 0 3rem;}
.wrap-visual .visual-slide li {position: relative;}
.wrap-visual .visual-slide a {display: block;}
.wrap-visual .visual-slide img {position: relative;left: 50%;display: block;max-width: none;max-height: 94rem;height: 100%;transform: translate(-50%,0);}
.wrap-visual .slogan {position: absolute; right: 0; bottom: 12.5rem; width: 100%; text-align: right; display:none;}
.wrap-visual .slogan strong {font-family: ppm; font-size: 4rem; color: #fff;}
.wrap-visual .slogan p {padding-top: 1.3rem; font-family: ppr; font-size: 2rem; color: #fff;}

.wrap-visual .visual-util {position: absolute;bottom: 2.5rem;z-index: 1;width: 100%;}
.wrap-visual .visual-util .area {padding: 0 2.5rem;}
.wrap-visual .visual-util .row {display: flex;align-items: center; gap: 0.5rem;}
.wrap-visual .visual-util .row .state{background:#fff; border-radius: 2rem; padding: 0.4rem 0; width:9.5rem; text-align: center;}
.wrap-visual .visual-util .row .state .now{color:#256ef4;}
.wrap-visual .state .now,
.wrap-visual .state .slash,
.wrap-visual .state .total {font-size: 1.5rem;color: #33363d;}
.wrap-visual .state .now.under10::before,
.wrap-visual .state .total.under10::before {content: '0';}
.wrap-visual .state .slash {margin: 0 .5rem;}
.wrap-visual .control {display: flex; gap: 0.5rem;}
.wrap-visual .control button {text-indent: -9999rem;background-repeat: no-repeat;background-position: center;background-color: #fff;width: 4rem;height: 4rem;border-radius: 100%;display: block;}
.wrap-visual .control .prev,
.wrap-visual .control .next {}
.wrap-visual .control .prev {background-image: url('../images/btn-visual-prev.png');}
.wrap-visual .control .next {background-image: url('../images/btn-visual-next.png');}
.wrap-visual .control .stop,
.wrap-visual .control .play {display: none;}
.wrap-visual .control .stop.on,
.wrap-visual .control .play.on {display: block;}
.wrap-visual .control .stop {background-image: url('../images/btn-visual-stop.png');}
.wrap-visual .control .play {background-image: url('../images/btn-visual-play.png');}

@media screen and (max-width: 1280px) {
	.wrap-visual{max-width: 100%; height:auto; margin-bottom:2rem;}
	.wrap-visual .visual-slide li img{width:100%;left: unset;transform: none;}
}

@media screen and (max-width: 767px) {
	.wrap-visual .visual-util .row{justify-content: center;}
}