@charset "utf-8";

.wrap_visual {position: relative;}
.wrap_visual::after {content: '';position: absolute;left: 0;top: 31rem;width: 100%;height: 96rem;background: url(../images/bg-visual.png) no-repeat center / 100% 100%;pointer-events: none;}
.wrap_visual::before {content: '';position: absolute;left: 9.5rem;bottom: 5rem;transform: translateY(0);width: .9rem;height: 14rem;background: url(../images/img-scroll-down.png) no-repeat center / contain;opacity: .5;animation: scrollDown 2.2s infinite linear;z-index: 1;}

.wrap_visual .visual-zone {position: relative;max-width: 180rem;margin: 0 auto;  -webkit-mask-image: url(../images/img-visual-mask.png);-webkit-mask-repeat: no-repeat;-webkit-mask-position: top center;-webkit-mask-size: 100% 100%;mask-image: url(../images/img-visual-mask.png); mask-repeat: no-repeat;mask-position: top center;mask-size: 100% 100%;z-index: 1;}
.wrap_visual,
.wrap_visual .swiper-wrapper {height: 75rem !important;}
.wrap_visual .swiper-slide {position: relative;display:inline-block;height: 100%;vertical-align: top;}
.wrap_visual .swiper-slide::before {  content: ""; position: absolute;left: 0;bottom: 0;width: 100%;height: 33%; background: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0));pointer-events: none; z-index: 2;}
.wrap_visual .swiper-slide::after {content:"";position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: rgba(0,0,0,.2);z-index: 3;}
.wrap_visual .swiper-slide > a:first-child {pointer-events: none;}
.wrap_visual .text-wrap {position: absolute;left: 13rem;top: 11rem;padding-right: 25%;color: #fff;;z-index: 4;}
.wrap_visual .text_1 {margin-bottom: .7rem;font-size: 2.2rem;font-family: pl;color: #fff;line-height: 1.5;}
.wrap_visual .text_2 {display: block;font-size: 4.6rem;font-family: pb;}
.wrap_visual .icon{height: 75rem;text-align: center;}
.wrap_visual .icon img {width: 100%;height: 100%;object-fit: cover;object-position: center;}


@keyframes scrollDown {
	50% {opacity: 1;transform: translateY(1.5rem);}
} 

@media screen and (max-width:1840px){
	.wrap_visual {padding: 0 4rem;}
	.wrap_visual .visual-zone {border-radius: 6rem 6rem 0 0;overflow: hidden;}
	.wrap_visual::before {left: 5rem;bottom: 3rem;}
}
@media screen and (max-width:1600px){
	.wrap_visual,
	.wrap_visual .swiper-wrapper{height:70rem !important;}
	.wrap_visual .icon {height: 70rem;}
	.wrap_visual::after {top: 25rem;}
	.wrap_visual .text-wrap {left: 8.5vw;}
}
@media screen and (max-width:1400px){
	.wrap_visual,
	.wrap_visual .swiper-wrapper{height: 60rem !important;}
	.wrap_visual .icon {height: 60rem;}
	.wrap_visual::after {top: 20rem;}
}

@media screen and (max-width:1200px){
	.wrap_visual,
	.wrap_visual .swiper-wrapper{height: 49rem !important;}
	.wrap_visual .icon {height: 49rem;}
	.wrap_visual .text-wrap {left: 7.6vw;}
	.wrap_visual::after {top: 17rem;height: 85rem;}
}

@media screen and (max-width:1024px){
	.wrap_visual,
	.wrap_visual .swiper-wrapper{height: 39rem !important;}
	.wrap_visual .icon {height: 39rem;}
	.wrap_visual .text-wrap {top: 5.8rem}
	.wrap_visual .text_1 {line-height: 1.3;}
	.wrap_visual .text_2 {font-size: 3.6rem;}
	.wrap_visual::before {height:12rem;}
	/* .wrap_visual::before {display: none;} */
	.wrap_visual::after {top: 13.5rem;height: 77rem;}
}

@media screen and (max-width:768px){
	.wrap_visual {padding: 0 2rem;}
	.wrap_visual,
	.wrap_visual .swiper-wrapper{height: 33rem !important;}
	.wrap_visual .visual-zone {-webkit-mask-image: url(../images/img-visual-mask-mobile.png);mask-image: url(../images/img-visual-mask-mobile.png);}
	.wrap_visual .icon {height: 33rem;}
	.wrap_visual .text-wrap {top: 5.3rem;}
	.wrap_visual .text_1 {margin-bottom: .5rem;font-size: 1.4rem;}
	.wrap_visual .text_2 {font-size: 2.2rem;}
	.wrap_visual::after {height: 365%;background-position: bottom -7rem center;}
	.wrap_visual::before {left:7%; bottom:1rem; height:9rem;}
}

/*콘트롤*/
.wrap_visual .item-wrap {position:absolute;bottom: 6.5rem;left: 13.8rem;width: 100%;max-width: 160rem;z-index: 1000;}
.wrap_visual .control{display:flex;align-items:center;justify-content:center;}
.wrap_visual button{display:block;cursor:pointer;text-indent:-9999px;}
.wrap_visual .control .now {display: inline-block;min-width: 1.64rem;font-size: 1.2rem;color: #fff;font-family: pbl;}
.wrap_visual .control .total {display: inline-block;min-width: 1.64rem;;font-size: 1.2rem;color: #fff;font-family: pbl;}
.wrap_visual .control .now::before {content: '0';}
.wrap_visual .control .total::before {content: '0';}
.wrap_visual .control .paging {position: relative;width: 100%;height: .3rem;display: block;margin-right:4rem;background: rgba(255,255,255,.2);}
.wrap_visual .control .paging .swiper-pagination-bullet {position: absolute;left: 0;top: 0;width: 0;height: 100%;background: transparent;border-radius: 0;}
.wrap_visual .control .paging .swiper-pagination-bullet-active {background: #fff;animation: progress 8s ease-in-out;}
.wrap_visual .control .pannel{display:flex;align-items:center;}
.wrap_visual .control button.play,
.wrap_visual .control button.stop{display:none;width:1.6rem;height:1.6rem;margin: 0 .4rem;}
.wrap_visual .control button.on{display:block;}
.wrap_visual .control button.play{background:url(../images/ic-play.png) no-repeat center / .7rem;}
.wrap_visual .control button.stop{background:url(../images/ic-stop.png) no-repeat center / .6rem;}
.wrap_visual .control button.prev,
.wrap_visual .control button.next{width:1.6rem;height:1.6rem;}
.wrap_visual .control button.prev{background:url(../images/ic-prev.png) no-repeat left center / .7rem;}
.wrap_visual .control button.next{background:url(../images/ic-next.png) no-repeat right center / .7rem;}

@keyframes progress {
	100% {width: 100%;}
} 

@media screen and (max-width:1840px){
	.wrap_visual .item-wrap {width: 80vw;left: 7.3vw}
}

@media screen and (max-width:1600px){
	.wrap_visual .item-wrap {bottom: 6rem;}
	.wrap_visual .item-wrap.long {bottom: 19.5rem}
}



@media screen and (max-width:1024px){
	.wrap_visual .item-wrap {bottom: 2.8rem;}
}

@media screen and (max-width:768px){
	.wrap_visual .item-wrap {width: 74vw;left: 12.5vw;} 
	
}

@media screen and (max-width:500px){
	.wrap_visual .item-wrap {width: 71vw;left: 14vw;} 
	
}