@charset "utf-8";

/* 비주얼 */
.wrap-visual {position: relative; overflow: hidden; z-index:0;}
.wrap-visual .visual-slide .area {max-width: 128rem; margin:0 auto; padding: 0 3rem;}
.wrap-visual .visual-slide li {position: relative;overflow: hidden; height:52rem;}
.wrap-visual .visual-slide a {display: block;}
.wrap-visual .visual-slide img {position: relative; object-fit: cover; display: block; width:100%; max-width: none; height: 100%;}
.wrap-visual .slogan {position: absolute;right: 0;top: 13.5rem;width: 100%;text-align: left;padding-left: 10rem;}
.wrap-visual .slogan strong {font-size: 5.5rem;color:var(--krds-white);line-height: 1.3;text-shadow: 0.2rem 0.2rem 0.2rem rgba(0,0,0,.3);}
.wrap-visual .slogan p {font-size: 2rem; color:var(--krds-white);}

.wrap-visual .visual-util {position: absolute;bottom: 0;z-index: 1;width: 100%;}
.wrap-visual .visual-util .area {margin:0 auto; display: inline-block; float: right; padding: 2rem 5rem; background:var(--krds-white);}
.wrap-visual .visual-util .row {display: flex; justify-content: flex-end; align-items: center;}
.wrap-visual .state{display: flex;align-items: center;gap: 1rem; position: relative;}
.wrap-visual .state:after{content:'';width: 100%;position: absolute;bottom: -2rem;height: 0.2rem;background: var(--krds-black);}
.wrap-visual .state .now,
.wrap-visual .state .slash,
.wrap-visual .state .total {font-size: 1.6rem; color: var(--krds-black);}
.wrap-visual .state .now.under10::before,
.wrap-visual .state .total.under10::before {content: '0';}
.wrap-visual .state .slash {font-size: 1.2rem; color: var(--krds-gray-40)}
.wrap-visual .state .now{width:2rem;}
.wrap-visual .state .total{color: var(--krds-gray-41);}

.wrap-visual .state button {display: block; text-indent: -9999rem;}
.wrap-visual .state .prev,
.wrap-visual .state .next {width:3rem; height: 1.6rem;}
.wrap-visual .state .prev {background: url('../images/btn-visual-prev.png') no-repeat center;}
.wrap-visual .state .next {background: url('../images/btn-visual-next.png') no-repeat center;}

.wrap-visual .control {display: flex; margin-left: 5rem;}
.wrap-visual .control button {display: block; text-indent: -9999rem;}
.wrap-visual .control .prev,
.wrap-visual .control .next {width:3rem; height: 1.6rem;}
.wrap-visual .control .prev {background: url('../images/btn-visual-prev.png') no-repeat center;}
.wrap-visual .control .next {background: url('../images/btn-visual-next.png') no-repeat center;}
.wrap-visual .control .stop,
.wrap-visual .control .play {display: none; width: 1rem; height: 1.4rem; margin: 0 2.5rem;}
.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;}
.wrap-visual .control .play {background: url('../images/btn-visual-play.png') no-repeat center;}

@media screen and (max-width: 1024px) {
	.wrap-visual .slogan{top: 9rem; padding-left: 5rem;}
	.wrap-visual .visual-util{text-align:center;}
	.wrap-visual .visual-util .area{text-align:center; float:inherit;}

}

@media screen and (max-width: 767px) {
	.wrap-visual .slogan{padding-left: 2rem;}
	.wrap-visual .slogan p{font-size:var(--krds-fz-xl);}
	.wrap-visual .slogan strong{font-size:var(--krds-ft-big);}
	.wrap-visual .visual-slide .area{padding: 0;}
	.wrap-visual .visual-slide li{height:50rem;}
	
	.wrap-visual .visual-util{text-align:left; padding-left:2.5rem;}
	.wrap-visual .visual-util .area{padding: 1rem 3rem; background:var(--krds-white);}
}