/* color */
.cfff {color: #fff;}
.caaa{color: #aaa;}
.cbbb{color: #bbb;}
.cccc{color: #ccc;}
.cddd{color: #ddd;}
.ceee{color: #eee;}
.c000 {color: #000;}
.c111 {color: #111;}
.c222 {color: #222;}
.c333 {color: #333;}
.c444 {color: #444;}
.c555 {color: #555;}
.c666 {color: #666;}
.c777 {color: #777;}
.c888 {color: #888;}
.c999 {color: #999;}
.c686868 {color: #686868;}
.c949494 {color: #949494;}
.c979797 {color: #979797;}
.cA9A9A9 {color: #A9A9A9;}
.cEAEAEA {color: #EAEAEA;}

.cF9423A {color: #F9423A;}
.c947070 {color: #947070;}
.c121212 {color: #121212;}
.c1D1D1D {color: #1D1D1D;}
.c1E1E1E {color: #1E1E1E;}
.c262626 {color: #262626;}
.c292929 {color: #292929;}
.c2F2F2F {color: #2F2F2F;}
.c4D4D4D {color: #4D4D4D;}
.c6D6D6D {color: #6D6D6D;}
.c7F7F7F {color: #7F7F7F;}
.c909090 {color: #909090;}
.c959595 {color: #959595;}
.c969696 {color: #969696;}
.cBFBFBF {color: #BFBFBF;}
.cCBCBCB {color: #CBCBCB;}
.cD6D6D6 {color: #D6D6D6;}
.cDBDBDB {color: #DBDBDB;}
.cfff-70 {color: rgba(255, 255, 255, 0.7);}
.cfff-50 {color: rgba(255, 255, 255, 0.5);}

/* background-color */
.bfff {background-color: #fff;}
.bfafafa {background-color: #fafafa;}
.bF3F3F3 {background-color: #F3F3F3;}
.baaa {background-color: #aaa;}
.bbbb {background-color: #bbb;}
.bccc {background-color: #ccc;}
.bddd {background-color: #ddd;}
.beee {background-color: #eee;}
.b000 {background-color: #000;}
.b111 {background-color: #111;}
.b222 {background-color: #222;}
.b333 {background-color: #333;}
.b444 {background-color: #444;}
.b555 {background-color: #555;}
.b666 {background-color: #666;}
.b777 {background-color: #777;}
.b888 {background-color: #888;}
.b999 {background-color: #999;}

.bF9423A {background-color: #F9423A;}
.b947070 {background-color: #947070;}
.b0B0B0B {background-color: #0B0B0B;}
.b121212 {background-color: #121212;}
.b1D1D1D {background-color: #1D1D1D;}
.b1E1E1E {background-color: #1E1E1E;}
.b262626 {background-color: #262626;}
.b292929 {background-color: #292929;}
.b2F2F2F {background-color: #2F2F2F;}
.b4D4D4D {background-color: #4D4D4D;}
.b6D6D6D {background-color: #6D6D6D;}
.b7F7F7F {background-color: #7F7F7F;}
.b909090 {background-color: #909090;}
.b959595 {background-color: #959595;}
.b969696 {background-color: #969696;}
.bBFBFBF {background-color: #BFBFBF;}
.bCBCBCB {background-color: #CBCBCB;}
.bD6D6D6 {background-color: #D6D6D6;}
.bEAEAEA {background-color: #EAEAEA;}

/* gradient */
.gr-1 {background: linear-gradient(#1E1E1E, #000);}
.gr-2 {background: linear-gradient(#000000 50%, #4F1512);}
.gr-3 {background: linear-gradient(#000000 40%, #491311);}
/* .text-gr-1 {
    background: linear-gradient(to right, #E5E362, #7F7E36);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
} */


/* ------------------------------------------------------------------------------- */


/* 컴포넌트 */

.wrap {
    width: 100%;
    max-width: 120rem;
    padding: 0 4rem;
    margin: 0 auto;
}

section {
    overflow: hidden;
}

/* section 공통 패딩 */
.section {
    padding: 15rem 0;
}

/* title 공통 */
.title-area {
    display: flex;
    flex-direction: column;
    /* gap: 2.8rem; */
    margin-bottom: 4.6rem;
    line-height: 1.25;
    letter-spacing: -0.03em;
}
h1.title {
    font-size: 4rem;
    font-weight: 700;
    line-height: 1.15;
}
.title-area .sub-title {
    margin-bottom: 1rem;
}
.title-area .sub-text {
    margin-top: 2.4rem;
}
.title-area .title-img {
    height: 3.2rem;
}
.title-area .title-img img {
    height: 100%;
}

.title-margin {
    margin-bottom: 8rem;
}

.border-dashed {
    background-image: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='40' ry='40' stroke='%23333' stroke-width='4' stroke-dasharray='6%2c 14' stroke-dashoffset='0' stroke-linecap='square'/%3e%3c/svg%3e");
}

.nowrap {
    white-space: nowrap;
}

.dot-list li {
    position: relative;
    display: flex;
    word-break: keep-all;
    /* align-items: center; */
}
.dot-list li::before {
    position: relative;
    content: '';
    min-width: .4rem;
    width: .4rem;
    height: .4rem;
    border-radius: 50%;
    background-color: #fff;
    display: inline-block;
    margin-right: .8rem;
    top: 1.4rem;
}
.dot-list li.no-dot::before {
    opacity: 0;
}
.dot-list li.no-dot.pl0::before {
    display: none;
}

.highlighter {
    position: relative;
    z-index: 1;
}
.highlighter::after {
    position: absolute;
    content: '';
    z-index: -1;
    background-color: #FFE94D;
    width: 100%;
    height: 2rem;
    bottom: 0;
    left: 0;
}

i {
    display: inline-block;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

dialog {
    border: none;
    border-radius: 8px;
    padding: 1rem 2rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

dialog::backdrop {
    background: rgba(0,0,0,0.4);
}

br.pad-ver {
    display: none;
}

br.mb-ver {
    display: none;
}

br.mb-ver2 {
    display: none;
}

.scroll-y {
    overflow-x: hidden;
    overflow-y: auto;
}
.scroll-y::-webkit-scrollbar {
    /* width: .375rem;
    height: .375rem; */
    width: .5rem;
    height: .5rem;
    background-color: transparent;
}
.scroll-y::-webkit-scrollbar-track {
    background-color: transparent;
}
.scroll-y::-webkit-scrollbar-thumb {
    background-color: #D8DCE2;
    border-radius: 1rem;
}
.scroll-y::-webkit-scrollbar-button {
    width: 0;
    height: .75rem;
}

.scroll-x {
    overflow-x: auto;
    overflow-y: hidden;
}
.scroll-x::-webkit-scrollbar {
    width: .6rem;
    height: .6rem;
    background-color: transparent;
}
.scroll-x::-webkit-scrollbar-track {
    background-color: transparent;
}
.scroll-x::-webkit-scrollbar-thumb {
    background-color: #F9423A;
    border-radius: 1rem;
    cursor: pointer;
}
.scroll-x::-webkit-scrollbar-button {
    width: 0;
    height: .75rem;
}

/* 모달 공통 */
.modal-area {
    background: rgba(0, 0, 0, .5);
    width: 100%;
    height: 100%;
    display: none;
    word-break: keep-all;
    z-index: 500;
    top: 0;
    left: 0;
}
.modal-area.active {
    display: block;
}
.modal-area .modal {
    display: none;
}
.modal-area .modal.active {
    display: block;
}
.close-btn {
    cursor: inherit;
}

/* button */
.btn-style-1 {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFE94D;
    color: #441C91;
    border-radius: 4rem;
    width: 22.1rem;
    height: 5.9rem;
    border: .3rem solid #441C91;
    box-shadow: 0 .3rem 0 0 #441C91;
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}
.btn-style-1:hover {
    background-color: #FFF9D0;
}

@media (max-width: 1280px) {

    .section {
        padding: 15rem 0;
    }
    .title-margin {
        margin-bottom: 6rem;
    }
    
    .title-area {
        gap: .4rem;
        margin-bottom: 4rem;
    }
    h1.title {
        font-size: 3.2rem;
    }
    .title-area .sub-title {
        font-size: 2rem;
    }
    .title-area .sub-text {
        font-size: 1.8rem;
    }
    .title-area .title-tag {
        height: 6rem;
    }
    .btn-style-1 {
        font-size: 2rem;
        height: 4.8rem;
        width: 20rem;
    }
}

@media (max-width: 1024px) {
    br.pad-ver {
        display: block;
    }
}

@media (max-width: 768px) {
    .section {
        padding: 10rem 0;
    }
    br.mb-ver {
        display: block;
    }
    .wrap {
        padding: 0 2rem;
    }
    .title-area {
        margin-bottom: 3.4rem;
    }
    h1.title {
        font-size: 1.8rem;
    }
    /* .title-area .sub-title {
        font-size: 1.4rem;
    }
    .title-area .sub-text {
        font-size: 1.2rem;
    } */
    .title-area .title-tag {
        height: 4rem;
    }
    .btn-style-1 {
        font-size: 1.6rem;
        height: 4rem;
        width: 15.5rem;
        border-width: .2rem;
    }
    br.pc-ver {
        display: none;
    }
}

@media (max-width: 370px) {
    br.mb-ver2 {
        display: block;
    }
}

@media (max-width: 768px) {
    .title-area .title-img {
        height: 2.6rem;
    }
}

@media (max-width: 480px) {
    .title-area .title-img {
        height: 2rem;
    }
}


/* ------------------------------------------------------------------------------- */


/* 애니메이션 */
@keyframes bounce1 {
    0%,100% {
        transform: translate(0,-10px);
    }
    50% {
        transform: translate(0, 0%);
    }
}

.bounce1 {
    animation-name: bounce1;
    animation-duration: 2.5s;
    /* animation-delay: 0.2s; */
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes bounce2 {
    0%,100% {
        transform: translate(0,-5%);
    }
    50% {
        transform: translate(0, 0%);
    }
}

.bounce2 {
    animation-name: bounce2;
    animation-duration: 2.5s;
    /* animation-delay: 0.2s; */
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

/* 좌우 */
@keyframes bounce3 {
    0%,100% {
        transform: translate(-10px,0%);
    }
    50% {
        transform: translate(0, 0%);
    }
}

.bounce3 {
    animation-name: bounce3;
    animation-duration: 2.5s;
    /* animation-delay: 0.2s; */
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes add-chart1 {
	100% {
        transform: translateY(0px);
        opacity:1;
    }
}

@keyframes moving1 {
    0% {
        opacity: 0;
        transform: translate(-20px,-20px);
    }
    100% {
        opacity: 1;
        transform: translate(0,0);
    }
}
.moving1 {
    -webkit-animation-name: moving1;
    animation-name: moving1;
}

@keyframes add-round {
	0% {
        transform: scale(0.5);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 0.4;
    }
}
.add-round {
    animation: add-round 0.5s 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) alternate infinite;
}

@keyframes scale {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
.scale {
    -webkit-animation-name: scale;
    animation-name: scale;
}

@keyframes scale2 {
    0% {
        opacity: 0;
        -webkit-transform: scale(.4);
        transform: scale(.4);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}
.scale2 {
    -webkit-animation-name: scale2;
    animation-name: scale2;
}

@keyframes sticker1 {
    0% {
        transform: matrix3d(1, 0, 2, 0.004, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        opacity: 1;
    }
    50% {
        transform: matrix3d(1, 0, 2, -0.004, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}
.sticker1 {
    /* animation: sticker09 2s 0.5s cubic-bezier(0.68, -0.6, 0.32, 1.6) alternate infinite; */
    animation: sticker1 2s cubic-bezier(0.68, -0.6, 0.32, 1.6) alternate infinite;
    opacity: 0;
}

@keyframes sticker1-2 {
    0% {
        transform: matrix3d(1, 0, 1, 0.0015, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        opacity: 1;
    }
    50% {
        transform: matrix3d(1, 0, 1, -0.0015, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
        opacity: 1;
    }
    100% {
        transform: none;
        opacity: 1;
    }
}

.sticker1-2 {
    animation: sticker1-2 2s cubic-bezier(0.68, -0.6, 0.32, 1.6) alternate infinite;
    opacity: 0;
}

@keyframes sticker2 {
    0% {
        transform: scale(0.5);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
    }
}
.sticker2 {
    animation: sticker2 1.3s cubic-bezier(0.32, 0, 0.67, 0) alternate infinite;
    opacity: 0;
}

@keyframes zoom1 {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.05);
    }
}
.zoom1 {
    animation: zoom1 1s cubic-bezier(0.68, -0.6, 0.32, 1.6) alternate infinite;
}

@keyframes zoom2 {
    0% {
        transform: scale(.8);
    }
    100% {
        transform: scale(1.05);
    }
}
.zoom2 {
    animation: zoom2 1s cubic-bezier(0.68, -0.6, 0.32, 1.6) alternate infinite;
}

@keyframes zoom3 {
    0% {
        transform: scale(.9);
    }
    100% {
        transform: scale(1.05);
    }
}
.zoom3 {
    animation: zoom3 1s cubic-bezier(0.68, -0.6, 0.32, 1.6) alternate infinite;
}

@keyframes zoomOut2 {
    0% {
        transform: scale(.9);
        opacity: 0;
    }
    80% {
        transform: scale(1.1);
        /* opacity: 1; */
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
.zoomOut2 {
    animation: zoomOut2 1s ease-in-out;
}

@keyframes zoomOutBounce {
    0% {
        transform: scale(.7) translateY(40px);
        opacity: 0;
    }
    50% {
        transform: scale(1.08) translateY(-10px);
        opacity: 1;
    }
    70% {
        transform: scale(.97) translateY(5px);
    }
    85% {
        transform: scale(1.02) translateY(-3px);
    }
    100% {
        transform: scale(1) translateY(0);
    }
}
.zoomOutBounce {
    animation: zoomOutBounce 1s linear;
}

@keyframes zoomOutRightBounce {
    0% {
        transform: scale(.2) translate(-70%, 80%);
        opacity: 0;
    }

    50% {
        transform: scale(1) translate(0, 0);
        opacity: 1;
    }

    70% {
        transform: scale(1.08) translate(0, 0);
    }

    85% {
        transform: scale(.97) translate(0, 0);
    }

    100% {
        transform: scale(1) translate(0, 0);
        opacity: 1;
    }
}

.zoomOutRightBounce {
    animation: zoomOutRightBounce 1s linear;
}

@keyframes rotate1 {
    0% {
        transform: rotate(0deg);
    }
    10% {
        transform: rotate(15deg);
    }
    20% {
        transform: rotate(-5deg);
    }
    30% {
        transform: rotate(15deg);
    }
    40% {
        transform: rotate(-5deg);
    }
    50% {
        transform: rotate(0deg);
    }
}
.rotate1 {
    animation-name: rotate1;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
}

@keyframes rotate2 {
    0% {
        transform: rotate(0deg);
    }
    10% {
        transform: rotate(5deg);
    }
    20% {
        transform: rotate(-5deg);
    }
    30% {
        transform: rotate(5deg);
    }
    40% {
        transform: rotate(-5deg);
    }
    50% {
        transform: rotate(0deg);
    }
}
.rotate2 {
    animation-name: rotate2;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease;
}

/* 오른쪽으로 무한 스핀 */
@keyframes rotate3-r {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.rotate3-r {
    animation: rotate3-r 5s linear infinite;
}

/* 왼쪽으로 무한 스핀 */
@keyframes rotate3-l {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}
.rotate3-l {
    animation: rotate3-l 5s linear infinite;
}

/* 부드럽게 깜빡이기 */
.fade1 {
  animation: fade1 3s ease-in-out infinite;
}

@keyframes fade1 {
  0% { opacity: 0; }
  50%  { opacity: 1; }
  100% { opacity: 0; }
}

/* 부드러운 트윙클 */
.twinkle1 {
  animation: twinkle1 2s ease-in-out infinite;
  transform-origin: center;
}

@keyframes twinkle1 {
  0%, 100% {
    opacity: 0;
    transform: scale(0.9);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

/* 좌우 흔들림 */
.swing1 {
  display: inline-block;   /* inline 요소면 필수 */
  transform-origin: center;
  animation: swing1 2s ease-in-out infinite;
}

@keyframes swing1 {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(-6deg); }
  40%  { transform: rotate(6deg); }
  60%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

.swing2 {
  display: inline-block;   /* inline 요소면 필수 */
  transform-origin: center;
  animation: swing2 2s ease-in-out infinite;
}

@keyframes swing2 {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(6deg); }
  40%  { transform: rotate(-6deg); }
  60%  { transform: rotate(0deg); }
  100% { transform: rotate(0deg); }
}

/* 폴짝 */
@keyframes jump1 {
  0%,50%   { transform: translateY(0); }
  60%  { transform: translateY(-14px); }
  70%   { transform: translateY(0); }
  80%  { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

.jump1 {
  display: inline-block;
  animation: jump1 2.5s ease-in-out infinite;
}

/* 아래로 떨어지는 애니메이션 */
@keyframes fall {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(0.7);
    opacity: 0;
    filter: blur(1px);
  }

  20% {
    transform: translate(-30px, 20vh) rotate(30deg) scale(0.8);
    opacity: 0.8;
    filter: blur(0.5px);
  }

  40% {
    transform: translate(30px, 40vh) rotate(-20deg) scale(0.9);
    opacity: 1;
    filter: blur(0px);
  }

  60% {
    transform: translate(-20px, 60vh) rotate(40deg) scale(1);
    opacity: 0.9;
    filter: blur(0.3px);
  }

  80% {
    transform: translate(20px, 80vh) rotate(-30deg) scale(1.1);
    opacity: 0.8;
    filter: blur(0.6px);
  }
  /* 거의 바닥 (감속 + 사라짐 시작) */
  85% {
    transform: translate(15px, 85vh) rotate(30deg) scale(0.9);
    opacity: 0.6;
    filter: blur(1px);
  }

  /* 사라지면서 종료 */
  100% {
    transform: translate(0, 110vh) rotate(0deg) scale(0.7);
    opacity: 0;
    filter: blur(2px);
  }
}


/* 좌우로 흔들림 */
@keyframes sway {
  0% {
    transform: translateX(-20px) rotate(-10deg);
  }
  100% {
    transform: translateX(20px) rotate(10deg);
  }
}