.visual {position: relative; width: 100%; height: auto; margin-top: 133px; z-index: 6;}
.visual ul {width: 100%; height: auto;}
.visual ul li {width: 100%; height: auto;}
.visual ul li a {width: 100%; height: auto;}
.visual ul li a img {width: 100%; height: auto;}

.visual .slick-arrow {text-indent: -9999px; transform: translateY(-50%);}
.visual .slick-prev {position: absolute; top: 50%; left: 100px; width: 48px; height: auto; aspect-ratio: 1; background: url(./../img/prev_btn.png) no-repeat 50% 50%; background-size: cover; z-index: 2;}
.visual .slick-next {position: absolute; top: 50%; right: 100px; width: 48px; height: auto; aspect-ratio: 1; background: url(./../img/next_btn.png) no-repeat 50% 50%; background-size: cover; z-index: 2;}
.visual .slick-dots {position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;}
.visual .slick-dots li {width: 10px; height: 10px; aspect-ratio: 1; text-indent: -9999px; border-radius: 100%; background: var(--gray_d9); transition: all .3s;}
.visual .slick-dots li.slick-active {width: 32px; border-radius: 60px; background: var(--wt);}

/* sub_kv */
.sub_kv {width: 100%; height: auto; margin-top: 130px;}
.sub_kv .img-box {width: 100%; height: auto;}
.sub_kv .img-box img {width: 100%; height: auto;}

/* sub_kv2 */
/* gap: 165px; */
/* .sub_kv2 {position: relative; width: 100%; height: calc(100vh - 130px); margin-top: 130px; overflow: hidden; background: var(--wt_f5);} */
.sub_kv2 .container {position: relative;}
/* .sub_kv2:before {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); content: ''; display: block; max-width: 950px; width: 100%; height: auto; aspect-ratio: 950/624; background: url(./../img/tablet_img.png)no-repeat 50% 50%; background-size: cover; z-index: 2;} */
/* .rolling_wrap {display: flex; align-items: center;}
.sub_kv2 ul {display: flex; align-items: center; animation: roll 20s linear infinite; flex: 0 0 auto; width: 100%; height: auto; margin-top: 100px;}
.sub_kv2 ul li {animation: tnb 10s linear alternate infinite; flex: 0 0 auto; width: 100%; height: auto;}
.sub_kv2 ul li .child-box { width: 100%; height: auto;}
.sub_kv2 ul li .child-box img { width: 100%; height: auto;} */

.sub_kv2 .sub_kv_tit {position: absolute; top: 70px; left: 0; display: flex; flex-flow: column; gap: 15px; z-index: 5;}
.sub_kv2 .sub_kv_tit .tit {font-size: 30px; font-weight: 600; line-height: 1; letter-spacing: -0.6px; color: var(--wt);}
.sub_kv2 .sub_kv_tit .tit span {color: var(--wt);}
.sub_kv2 .sub_kv_tit .sub {font-size: 16px; font-weight: 600; line-height: 1; letter-spacing: -0.32px; color: var(--wt);}
.sub_kv2 .sub_kv_tit .mark2 {display: flex; align-items: center; gap: 10px;}
.sub_kv2 .sub_kv_tit .mark2 span {display: flex; align-items: center; justify-content: center; gap: 6px; width: 90px; height: 30px; border: 1px solid var(--wt); border-radius: 16px;}
.sub_kv2 .sub_kv_tit .mark2 span img {width: 22px; height: auto;}
.sub_kv2 .sub_kv_tit .mark2 input {display: none;}
.sub_kv2 .sub_kv_tit .mark2 label {display: flex; align-items: center; justify-content: center; gap: 6px; width: 90px; height: 30px; border: 1.5px solid var(--wt); border-radius: 16px; font-size: 14px; font-weight: bold; letter-spacing: -0.28px; color: var(--wt);}
.sub_kv2 .sub_kv_tit .mark2 label img {width: 22px; height: auto;}
.sub_kv2 .sub_kv_tit .mark2 input:checked + label {background: var(--pr); color: var(--wt);}

/* 롤링 애니메이션 정의 */
@keyframes roll {
 0% {
  transform: translateX(0);
 }
 100% {
  transform: translateX(-100%);
 }
}

@keyframes tnb {
 0% {
  transform: translateY(0);
 }
 50% {
  transform: translateY(10%);
 }
 100% {
  transform: translateY(0);
 }
}