.logo {width: 275px; height: auto; margin: 0 auto 35px;}
.logo img {animation: shake-bottom 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both; width: 100%; height: auto;}
@keyframes shake-bottom {
  0%,
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
  }
  10% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
  20%,
  40%,
  60% {
    -webkit-transform: rotate(-4deg);
            transform: rotate(-4deg);
  }
  30%,
  50%,
  70% {
    -webkit-transform: rotate(4deg);
            transform: rotate(4deg);
  }
  80% {
    -webkit-transform: rotate(-2deg);
            transform: rotate(-2deg);
  }
  90% {
    -webkit-transform: rotate(2deg);
            transform: rotate(2deg);
  }
}

.kv {margin: 35px 0 60px;}
.kv .tit {margin-bottom: 20px; font-size: 50px; font-weight: bold; line-height: 1.3; letter-spacing: -2px; color: var(--black_3); text-align: center;}
.kv .tit span {color: var(--pr);}
.kv .sub {margin-bottom: 35px; text-align: center; font-size: 22px; font-weight: 500; line-height: 1.5; letter-spacing: -0.88px; color: var(--gray_6);}
.kv .kv_box {width: 100%; height: auto; padding: 15px 25px; box-sizing: border-box; background: var(--wt); border-radius: 12px; border-style: solid; border-width: 2px; border-image-source: linear-gradient(109deg, rgba(255, 255, 255, 0.3) 1%, rgba(255, 255, 255, 0.95) 49%, rgba(255, 255, 255, 0.25) 98%); border-image-slice: 1; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.55)), linear-gradient(109deg, rgba(255, 255, 255, 0.3) 1%, rgba(255, 255, 255, 0.95) 49%, rgba(255, 255, 255, 0.25) 98%); background-origin: border-box; background-clip: content-box, border-box; text-align: center;}
.kv .kv_box .kv_tit {margin-bottom: 10px; font-size: 18px; font-weight: 500; line-height: 1.4; letter-spacing: -0.72px; color: var(--black_3);}
.kv .kv_box .kv_tit img {width: 25px; height: auto;}
.kv .kv_box .kv_tit span {font-weight: bold; color: var(--pr);}
.kv .kv_box .kv_sub {display: flex; align-items: center; justify-content: center; gap: 5px; width: 182px; height: 36px; margin: 0 auto 10px; border-radius: 60px; background: var(--black_2); font-size: 16px; font-weight: 500; line-height: 1.4; letter-spacing: -0.64px; color: var(--wt);}
.kv .kv_box .kv_sub span {font-weight: bold; color: var(--yellow);}
.kv .kv_box .kv_txt {font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: -0.48px; color: var(--gray_6);}
.kv .link {display: block; width: 100%; margin-top: 20px; text-align: center; font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: -0.64px; color: var(--gray_9); text-decoration: underline;}

.rolling_box {display: flex; align-items: center; gap: 15px; overflow: hidden; margin-bottom: 60px;}
.rolling_box1 {margin-bottom: 20px;}
.rolling_box2 {}
.rolling_box ul {display: flex; align-items: center; gap: 15px;}
.rolling_box ul li {flex: 0 0 auto; width: 220px; height: auto;}
.rolling_box ul li .img-box {width: 100%; height: auto;}
.rolling_box ul li .img-box img {width: 100%; height: auto;}

.rolling_box1 ul {animation: roll1 20s linear infinite;}
.rolling_box2 ul {animation: roll2 20s linear infinite;}
/* 롤링 애니메이션 정의 */
@keyframes roll1 {
 0% {
  transform: translateX(0);
 }
 100% {
  transform: translateX(-100%);
 }
}
@keyframes roll2 {
 0% {
   transform: translateX(-100%);
  }
  100% {
   transform: translateX(0);
 }
}

.common_btn {display: flex; align-items: center; justify-content: center; flex-flow: column; margin-bottom: 60px;}
.common_btn a {display: flex; align-items: center; justify-content: center; width: 100%; height: 90px; margin-bottom: 10px; background: var(--yellow); border-radius: 12px; font-size: 26px; font-weight: bold; line-height: 1.4; letter-spacing: -1.04px; color: var(--black_3);}
.common_btn button {animation: heartbeat 1.5s ease-in-out infinite both; display: flex; align-items: center; justify-content: center; width: 100%; height: 90px; margin-bottom: 10px; background: var(--yellow); border-radius: 12px; font-size: 26px; font-weight: bold; line-height: 1.4; letter-spacing: -1.04px; color: var(--black_3);}
.common_btn button.cl {flex-flow: column; gap: 3px;}
.common_btn button img {width: 26px; height: auto;}
.common_btn button span {font-size: 16px; font-weight: 500; line-height: 140%; letter-spacing: -4%;}
@keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
.common_btn .description {font-size: 16px; font-weight: 600; line-height: 1.4; letter-spacing: -0.64px; color: var(--gray_9);}

.link_btns {display: flex; align-items: center; justify-content: center; gap: 30px;}
.link_btns a {display: flex; align-items: center; justify-content: center; flex-flow: column; gap: 7px;}
.link_btns a img {width: 50px; height: auto;}
.link_btns a span {font-size: 12px; font-weight: 500; line-height: 1; letter-spacing: -0.48px; color: var(--black_3);}