@charset "utf-8";

/************************************************************************
visual
************************************************************************/
/* visual */
.wrap-visual{position:relative;}
.wrap-visual .visual-title{display:none;}

/* slider in text */
.wrap-visual .visual-slide .swiper-slide{height: 89rem;}
.wrap-visual .visual-slide .swiper-slide img{width:100%; height:100%; object-fit: cover;}
.wrap-visual .visual-slide .swiper-slide .subject{display:none;}

/* control */
.wrap-visual .visual-util{position: absolute;bottom: 8rem;z-index: 10;width: 100%;text-align: center;}
.wrap-visual .visual-util .area{display:inline-block; background: rgba(0, 0, 0, 0.5); padding: 0.5rem 2.5rem; border-radius: 5rem;}
.wrap-visual .visual-util .row{display: flex;align-items: center;justify-content: center;gap: 2rem;}

/* dotted */ 
.wrap-visual .visual-util .row .paging{display: flex;gap: 0.5rem;}
.wrap-visual .visual-util .row .paging span{opacity:1;padding: 0.5rem;display: flex;align-items: center;justify-content: center;background: transparent;border: 1px solid transparent;width: auto;height: auto;}
.wrap-visual .visual-util .row .paging span:before{content:'';width: 0.5rem;height: 0.5rem;display: block;background: #fff;border-radius: 100%;position: relative;z-index: 1000;}
.wrap-visual .visual-util .row .paging span.swiper-pagination-bullet-active{border: 1px solid #fff;}

/* icon counter */
.wrap-visual .visual-util .row .counter{}
.wrap-visual .visual-util .row .counter span{color:#fff;}
.wrap-visual .visual-util .row .counter .slash:before{content:'/';}

/* icon setting */
.wrap-visual .visual-util .row .control{display: flex;align-items: center;gap: 1rem;}

.wrap-visual .visual-util .control-button{display: flex;gap:0rem;}
.wrap-visual .visual-util .control-button button{background-color:#fff; display: block;text-indent: -9999px;}
.wrap-visual .visual-util .control-button  .p-s button{display:none;}
.wrap-visual .visual-util .control-button  .p-s button.on{display:block;}
.wrap-visual .visual-util .control-button button{width: 2rem;height: 2rem; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; mask-size: contain; mask-repeat: no-repeat;}
.wrap-visual .visual-util .control-button button.prev{-webkit-mask-image: url(./../../images/icon/arrow_back.svg); mask-image: url(./../../images/icon/arrow_back.svg);}
.wrap-visual .visual-util .control-button button.next{-webkit-mask-image: url(./../../images/icon/arrow_forward.svg); mask-image: url(./../../images/icon/arrow_forward.svg);}
.wrap-visual .visual-util .control-button button.stop{-webkit-mask-image: url(./../../images/icon/pause.svg); mask-image: url(./../../images/icon/pause.svg);}
.wrap-visual .visual-util .control-button button.play{-webkit-mask-image: url(./../../images/icon/play.svg); mask-image: url(./../../images/icon/play.svg);}

@media screen and (max-width:1600px) {
  .wrap-visual .visual-slide .swiper-slide{height:70rem;}
}

@media screen and (max-width:1023px) {
  .wrap-visual .visual-slide .swiper-slide{height:58rem;}
}

@media screen and (max-width:767px) {
  .wrap-visual .visual-slide .swiper-slide{height:42rem;}
}