@charset "UTF-8";

html { scroll-behavior: smooth; }

body { font-family: 'SUIT', AppleSDGothicNeo, "Apple SD Gothic Neo", "Apple SD 고딕 Neo", "Microsoft NeoGothic", Verdana, Arial, sans-serif; letter-spacing: -0.05rem; color: #222222; }
body {  background: linear-gradient(180deg, #050505 0%, #AC48B1 60.75%); }

.only-aos, .only-iso { display: none; }

.bg-01 { background-color: var(--bg-01) !important; }
.bg-02 { background-color: var(--main-02) !important; }
.bg-03 { background-color: var(--f-01) !important; }
.bg-04 { background-color: rgba(0, 0, 0, 0.57) !important;; }

.p-lr-0 { padding: 0 0 !important; }
.p-lr-2 { padding: 0 2rem !important; }
.p-t-2 { padding: 4rem 0 0 0 !important; }
.p-t-1 { padding: 2rem 0 0 0 !important; }
.p-l-1 { padding-left: 1rem !important; }
.p-l-2 { padding-left: 2rem !important; }
.p-l-3 { padding-left: 3rem !important; }
.f-w-900 { font-weight: 900 !important; }
.flex-ai-fs { align-items: flex-start !important; }
.grid-d { display: grid !important; grid-template-columns: 2fr 1fr !important;}
.lh-1 { line-height: 1.1 !important; display: inline-block; }
.lh-2 { line-height: 1.2 !important; display: inline-block; }
.lh-3 { line-height: 1.3 !important; display: inline-block; }
.w-10 { width: 10% !important; }
.w-20 { width: 20% !important; }
.w-30 { width: 30% !important; }
.w-40 { width: 40% !important; }
.w-50 { width: 50% !important; }
.w-60 { width: 60% !important; }
.w-70 { width: 70% !important; }
.w-100 { width: 100% !important; }
.v-v-h { visibility: hidden; }

.wrap, .section { position: relative; width: 100%; height: 100%; }
.container { position: relative; max-width: 72.5rem; scroll-behavior: smooth; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; margin: 0 auto; }

.section.carousel { background-color: rgba(0, 0, 0, 0.57); }
.section.start .container { background-color: transparent; padding: 0 4.5rem; }
.section.prize .container { padding: 0 4.5rem; }
.section.event.top { margin-top: 4.5rem; }
.section.event { margin-bottom: 4.5rem;  }
.section.event .container { padding: 0 4.5rem; }
.section.event .container .event-group { border-radius: 5.4rem; overflow: hidden; background-color: #fff; }

.section.start .kv { height: 35rem; width: 100%; position: relative; }
.section.start .kv .kv-draw { width: 27rem; height: 35rem; position: relative; }
.kv-draw > div { position: absolute; left: 50%; transform: translateX(-50%);  }
.kv-draw .d-circle { width: 84%; top: 0; }
.kv-draw .d-canvas {  top: .5%;  width: 83%; height: 64%;} /* width: 22.4rem; height: 22.4rem   */
.kv-draw .d-canvas canvas { width: 100%; aspect-ratio: 1 / 1; display: block; }


.kv-draw .d-ball-01 { width: 25%; bottom: 0; left: 5%; }
.kv-draw .d-box { bottom: 0; width: 70%; }
.kv-draw .d-jog { width: 20%; bottom: 27%; }
.kv-draw .d-hole { width: 44%; bottom: 2%; }
.kv-draw .d-ball-02 { width: 25%; bottom: -6%; left: 65%; }
.kv-draw .d-shiny.p-01 { width: 7%;  left: 5%; top: 14%;  }
.kv-draw .d-shiny.p-02 { width: 7%;  left: 95%; top: 58%; }
.kv-draw .d-shiny.p-03 { width: 7%;  left: 216%; top: 40.5%; }

.kv-draw .d-shiny.p-01 { animation: twinkle 1.5s infinite ease-in-out;  }
.kv-draw .d-shiny.p-02 { animation: twinkle 2.5s infinite ease-in-out;  }
.kv-draw .d-shiny.p-03 { animation: twinkle 1.4s infinite ease-in-out;  }

.section.start .kv .kv-title { width: 35.5rem; height: 35rem; position: relative; overflow: hidden; }
.section.start .kv .kv-title img { width: 100%; height: 100%; object-fit: cover; display: block; }
.section.start .kv { display: flex; flex-direction: row; justify-content: center; align-items: center; }

.section.prize .p-group { padding: 5rem 0; display: flex; gap: 5rem; flex-direction: column; align-items: center; }
.section.prize .p-group h2 { font-size: 4rem; color: #fff; font-weight: 700; width: 100%; text-align: center; }
.section.prize .p-group h2 span { font-size: 5.5rem; font-weight: 900; }
.section.prize .p-group .p-box-list { display: flex; flex-direction: row; flex-wrap: wrap;  align-items: center; justify-content: center; gap: 6rem 3.5rem; }
.section.prize .p-group .p-box-list .p-box { width: 18rem; height: 25rem; position: relative; }
.section.prize .p-group .p-box-list .p-box .ball { width: 6.5rem; height: 6.5rem; border-radius: 6.5rem; overflow: hidden; position: absolute; left: 50%; transform: translateX(-50%); top: -11%; }
.section.prize .p-group .p-box-list .p-box .main { height: 20rem; width: 100%; overflow: hidden;  border-top-left-radius: 4.4rem; border-top-right-radius: 4.4rem; }
.section.prize .p-group .p-box-list .p-box .main img { width: 100%; height: 100%; object-fit: cover; display: block; }
.section.prize .p-group .p-box-list .p-box .title { background-color: #818181; color: #fff; font-size: 1.8rem; font-weight: 700; width: 100%; height: 5.4rem; display: flex; align-items: center; justify-content: center;     line-height: 1.2; text-align: center; }

.btn-start-group { padding: 6rem 0; width: 100%; display: flex; flex-direction: column; gap: 2.4rem; align-items: center; }
.btn-start-group button { width: 45rem !important; }

.section.carousel .c-group { position: relative; width: 100%; padding: 3rem 0 6rem; display: flex; flex-direction: column; gap: 3rem; align-items: center; }
.section.carousel .c-group h4 { font-size: 3rem; font-weight: 900; color: #fff; }
.drawSwiper { width: 55.6rem; height: 32.3rem; }
.drawSwiper .swiper-slide { pointer-events: auto; }
.section.carousel .c-group .swiper-slide img { border-radius: 1rem; overflow: hidden; display: block; width: 100%; height: 100%; object-fit: cover; }
.draw-button-next, .draw-button-prev { cursor: pointer; }
.draw-button-next { background-image: url('../images/lucky/icon_next.png'); background-size: contain; background-repeat: no-repeat; background-position: center; width: 2rem; height: 2rem; position: absolute; right: 7%; top: 50%; }
.draw-button-prev { background-image: url('../images/lucky/icon_prev.png'); background-size: contain; background-repeat: no-repeat; background-position: center; width: 2rem; height: 2rem; position: absolute; left: 7%; top: 50%; }

.btn-group { position: relative; width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: row; gap: 2rem; padding: 4.4rem 6.6rem 6.8rem;  }
.btn-group.column { flex-direction: column; overflow: hidden;}
.btn-group.semi {  padding: 0; display: grid; grid-template-columns: 1fr 20rem;  }
.section.event .btn-group { padding-top: 0 !important; }
.btn { transition: 0.3s; overflow: hidden; position: relative; }
.shiny { position: absolute; width: 20rem; height: 50rem; top: -30rem; left: -20rem; transform: rotate(45deg); background: rgba(255, 255, 255, 0.5); transition: 0.3s; }
.btn:hover .shiny { top: -10rem; left: 60rem; }

.btn.submit { position: relative; width: 100%; height: 10rem; display: flex; align-items: center; justify-content: center; background-color: var(--main-03); color: var(--white); font-size: 3rem; font-weight: 800; border-radius: 2.4rem; box-shadow: rgba(0, 0, 0, 0.15) 2.4px 2.4px 3.2px; text-shadow: 1px 1px 1px black; }

.btn.view { position: relative; width: 100%; height: 10rem; display: flex; align-items: center; justify-content: center; background-color: #F1F1F1; color: var(--black); font-size: 3rem; font-weight: 800; border-radius: 2.4rem;  }

.btn.close { position: relative; width: 100%; height: 10rem; display: flex; align-items: center; justify-content: center; background-color: #F1F1F1; color: var(--black); font-size: 3rem; font-weight: 800; border-radius: 2.4rem;  }

.btn.view .prize-view ul { cursor:pointer; display: flex; flex-direction: row; justify-content: center; }
.btn.view .prize-view ul li { display: flex; justify-content: center; align-items: center; font-weight: 800; font-size: 3rem; }
.btn.view .prize-view .icon { width: 6.3rem; }
.btn.view .prize-view .arrow { width: 1.5rem; margin-left: 1rem; transition: .4s; }

/** button start **/
.pushable { position: relative; border: none; background: transparent; padding: 0; cursor: pointer; outline-offset: 4px; transition: filter 250ms;  font-family: "S-CoreDream-3Light", sans-serif; height: 8rem; width: 30rem; }
.pushable .shadow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 3rem; background: hsl(0deg 0% 0% / 0.25); will-change: transform; transform: translateY(.2rem); transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1); }
.edge { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 3rem;
    background: linear-gradient(
            to left,
            hsl(340deg 100% 16%) 0%,
            hsl(340deg 100% 32%) 8%,
            hsl(340deg 100% 32%) 92%,
            hsl(340deg 100% 16%) 100%
    );
}
.pushable .front { display: block; position: relative; padding: 1.2rem 2.2rem; border-radius: 3rem; font-size: 3.5rem; color: white; background: #FA3C55; will-change: transform; transform: translateY(-0.4rem); transition: transform 600ms cubic-bezier(0.3, 0.7, 0.4, 1); border: .2rem solid #FA3C55; font-weight: 900; }

.pushable.l-b .front { font-size: 2.2rem; line-height: 1; }

.pushable:hover { filter: brightness(110%); }
.pushable:hover .front { transform: translateY(-.6rem); transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5); }
.pushable:active .front { transform: translateY(-.2rem); transition: transform 34ms; }
.pushable:hover .shadow { transform: translateY(.4rem); transition: transform 250ms cubic-bezier(0.3, 0.7, 0.4, 1.5); }
.pushable:active .shadow { transform: translateY(.1rem); transition: transform 34ms; }
.pushable:focus:not(:focus-visible) { outline: none; }

.pushable.white { width: 15rem; }
.pushable.white .edge {
    background: linear-gradient(
            to left,
            hsl(0, 0%, 55%) 0%,
            hsl(0, 0%, 84%) 8%,
            hsl(0, 0%, 84%) 92%,
            hsl(0, 0%, 55%) 100%
    );
}
.pushable.white .front {
    color: #353535; background: linear-gradient(90deg, #E0E0E0 0%, #8F8F8F 100%); border: 0 solid #666;
}
.pushable.pink { width: 15rem; }
.pushable.pink .edge {
    background: linear-gradient(
            to left,
            hsl(305, 100%, 16%) 0%,
            hsl(305 100% 32%) 8%,
            hsl(305 100% 32%) 92%,
            hsl(305 100% 16%) 100%
    );
}
.pushable.pink .front {
    color: #fff; background: linear-gradient(90deg, #F643FF 0%, #942899 100%); border: 0 solid #666;
}

/** button end **/

.container .logo { margin-top: 6.4rem; margin-bottom: 7rem;  width: 100%; display: flex; justify-content: center; align-items: center; }
.container .logo img { width: 12.6rem; }

.container .home { position: absolute; top: 4.4rem; left: 3.7rem; }
.container .home img { width: 6.4rem; }

.agree .container { background: var(--f-01); padding: 4rem 5rem; display: flex; gap: 2rem; flex-direction: column; justify-content: flex-start; }
.agree .container { color: #fff; }
.agree .container h3 { font-size: 3rem; font-weight: 700; color: var(--main-02); }
.agree .container h4 { font-size: 2rem; font-weight: 700; margin-bottom: 1.5rem; }
.agree .container ul { display: flex; flex-direction: column; justify-content: flex-start; gap: 1rem; }
.agree .container ul li { color: #fff; font-weight: 400; font-size: 2rem; letter-spacing: 0; line-height: 140%; position: relative; margin-left: 1.5rem; }
.agree .container ul li::before{ display : block; content : ''; position : absolute; top : 1.3rem; left : -1.3rem; width : .5rem; height : .5rem; background-color : #fff; border-radius: 100%;  }

.app-link .container { padding: 4rem 6rem; gap: 4rem; background-color: var(--f-02); }
.app-link .container h2 { font-size: 4rem; color: var(--white); text-align: center; line-height: 120%; }
.app-link .container .link-group { display: flex; flex-direction: row; gap: 2rem;  }
.app-link .container .link-group a { width: 29rem; }

.footer { position: relative; background: var(--white); }
.footer .container { background-color: #ffffff; padding: 2rem 5rem 3rem; text-align: center; gap: 1rem; border-top: 1px solid #DDDDDD; }
.footer .container .privacy { font-size: 2.4rem; font-weight: 700; color: #666666; display: flex; width: 100%; }
.footer .container .privacy a { font-weight: bold; }
.footer .container .privacy > div { flex: 1; position: relative; }
.footer .container .privacy div:first-child::after { content: ''; position: absolute; right: 0; top: .8rem; width: 1px; height: 2rem; background-color: #dddddd; }
.footer .container div { font-size: 2rem; font-weight: 300; color: #666666; }
.footer .container div span { margin: 0 1rem; }

.footer .container .copy { font-size: 1.6rem; font-weight: 500; color: #000000; }

@media (max-width: 724.98px) {
    .container { width: 100%; }
    .agree .container h4,
    .agree .container ul li { font-size: 2.5rem; }
}

.l-popup, .l-popup .l-container, .l-popup .l-container .l-title, .l-popup .l-container .l-content, .l-popup .l-container .l-desc { position: relative; }
.l-popup { color: #fff; margin: 4.5rem auto; width: 65rem; min-height: 30rem; background: linear-gradient(180deg, #050505 0%, #AC48B1 120.17%); border-radius: 5.3rem; overflow: hidden; }

.l-popup .l-container { padding: 7rem 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 6rem; }
.l-popup .l-container .l-title { padding: 0 8rem; width: 100%; text-align: center; }
.l-popup .l-container .l-title h2 { font-size: 4rem; font-weight: 800;  }
.l-popup .l-container .l-content { padding: 0 7.5rem; width: 100%; }
.l-popup .l-container .l-content .l-box { width: 100%; padding: 6rem 4rem; border-radius: 4rem; background-color: #fff; color: #000; position: relative; overflow: hidden; }

.l-popup .l-container .l-content .l-box .l-input-group { display: flex; flex-direction: column; gap: 2rem; margin-bottom: 6rem; }
.l-popup .l-container .l-content .l-box .l-input-group .l-input { display: flex; flex-direction: column; gap: 1rem; }
.l-popup .l-container .l-content .l-box .l-input-group .l-input h3 { font-size: 3rem; font-weight: 800; text-align: center; position: relative; }
.l-popup .l-container .l-content .l-box .l-input-group .l-input h3 span { position: absolute; right: 7.5%; font-weight: 300; bottom: -81%;  }
.l-popup .l-container .l-content .l-box .l-input-group .l-input input { width: 100%; height: 8rem; background: rgba(217, 217, 217, 0.39); border: 0; text-align: center; font-size: 3.5rem; font-weight: 700; }
.l-popup .l-container .l-content .l-box .l-input-group .l-input input::placeholder { font-size: 2.5rem; font-weight: 400; }

.l-popup .l-container .l-content .l-box .l-input-group .l-input .l-i-box { display: flex; flex-direction: row; gap: 2rem; background: rgba(217, 217, 217, 0.39);  }
.l-popup .l-container .l-content .l-box .l-input-group .l-input .l-i-box input { width: 70%; background: transparent; }
.l-popup .l-container .l-content .l-box .l-input-group .l-input .l-i-box button { width: 30%; height: 8rem; border-radius: 1.5rem; background-color: transparent; font-size: 2.7rem; font-weight: 800; }

.l-btn-group { position: relative; width: 100%; height: 6.8rem; display: flex; flex-direction: row;  gap: 1.7rem; font-size: 2.5rem; font-weight: 800; }
.l-btn-group button { flex: 1; border-radius: 1.5rem; }
.l-btn-group .cancel { background-color: #D9D9D9; color: #000;  }
.l-btn-group .submit { background-color: #F643FF; color: #fff; }

.l-btn-group.type01, .l-btn-group.type02 { padding: 0 6rem; }
.l-btn-group.type02 .submit { flex: 2; }
.l-btn-group.type03 { padding: 0 6rem; width: 100%; }

.l-popup .l-container .l-content .f-b-g { display: grid; grid-template-columns: 3rem 1fr 11rem; flex-direction: row; gap:1rem; font-weight: 600; font-size: 2rem; justify-content: flex-start; align-items: center; margin-top: 1rem; }
@media (max-width: 724.98px) {
    .l-popup .l-container .l-content .f-b-g { grid-template-columns: 4rem 1fr 11rem; }
}
@media (max-width: 499.98px) {
    .l-popup .l-container .l-content .f-b-g { grid-template-columns: 4.5rem 1fr 11rem; }
}
.l-popup .l-container .l-content .f-b-g a { font-weight: 400; }
.l-popup .l-container .l-content .f-b-g label { cursor: pointer; }
.l-popup .l-container .l-content .f-b-g .chk-desc { color: #000; font-size: 2rem; font-style: normal; font-weight: 400; letter-spacing: -0.78px; margin-right: 2rem; }

.l-popup .l-container .l-draw { position: relative;  }
.l-popup .l-container .l-draw .kv-draw { width: 37rem; height: 48rem; position: relative; }
.l-popup .l-container .l-content .l-box .l-notice{ text-align: center; font-size: 2.5rem; font-weight: 800; line-height: 1.3; margin-bottom: 6rem; }

.l-popup .l-container .l-start-box { display: flex; flex-direction: column; gap: 6rem; width: 100%; }
.l-popup .l-container .l-result-box { display: flex; flex-direction: column; gap: 3.3rem; width: 100%; margin-top: 5rem; }

.l-popup .l-container .l-result-box .l-box { padding: 0; overflow: visible; background: transparent; }
.l-popup .l-container .l-result-box .l-box .l-number { position: absolute; top: -18%; left: 7%; width: 15rem; height: 15rem; overflow: hidden; border-radius: 15rem;  }
.l-popup .l-container .l-result-box .l-box .l-prize { width: 50rem; height: 30rem; overflow: hidden; border-radius: 4rem; display: flex;
    flex-direction: column; justify-content: center; align-items: center; gap: 1rem; }
.l-popup .l-container .l-result-box .l-box .l-prize.small { height: 20rem; }
.l-popup .l-container .l-result-box .l-box .l-prize.x-small { height: 10rem; }
.l-popup .l-container .l-result-box .l-box .l-prize img { width: 100%; height: 100%; object-fit: cover; display: block; }

.l-popup .l-container .l-result-box .l-box .l-prize h4 { font-size: 4.5rem; font-weight: 800; color: #fff; text-align: center; }
.l-popup .l-container .l-result-box .l-box .l-prize h3 { font-size: 4rem; font-weight: 200; color: #fff; text-align: center; }

.l-popup .l-container .l-result-box .l-box .l-prize p { font-size: 3rem; font-weight: 400; color: #fff; }

.l-popup .l-container .l-result-box .l-box .l-prize .prizeSwiper { width: 55.6rem; height: 32.3rem; background-color: #fff;  }
.l-popup .l-container .l-result-box .l-box .l-prize .prizeSwiper .swiper-slide { pointer-events: auto; }
.l-popup .l-container .l-result-box .l-box .l-prize .prizeSwiper .swiper-slide img { border-radius: 1rem; overflow: hidden; display: block; width: 100%; height: 100%; object-fit: cover; }

.l-popup .l-container .l-result-box .sw-s-b { display: flex; flex-direction: column; width: 50rem; }
.l-popup .l-container .l-result-box .sw-s-b .p-img { width: 100%; height: 10rem; overflow: hidden; }
.l-popup .l-container .l-result-box .sw-s-b .l-input-group { margin-bottom: 0; }
.l-popup .l-container .l-result-box .sw-s-b .p-input { width: 100%; position: relative; padding: 0 3.5rem !important; }
.l-popup .l-container .l-result-box .sw-s-b .p-input .l-i-box { gap: 0 !important; }
.l-popup .l-container .l-result-box .sw-s-b .p-input input { font-size: 2.2rem !important; }
.l-popup .l-container .l-result-box .sw-s-b .p-btn { width: 100%; padding: 2.6rem 3.5rem 0; position: relative; text-align: right; }
.l-popup .l-container .l-result-box .sw-s-b .p-btn button { position: relative; font-size: 2rem; font-weight: 800; color: #fff; background-color: #414141; border-radius: .6rem; width: 20rem; height: 5rem; }

.prizeSwiper .prize-swiper-pagination { position: absolute; left: 3.4rem !important; bottom: 5rem !important; }
.prizeSwiper .swiper-pagination-bullet { width: 2rem; height: 2rem; background: #D9D9D9; opacity: 1; }
.prizeSwiper .swiper-pagination-bullet-active { width: 2rem; height: 2rem; border-radius: 2rem; background: #797575;  }

.circle-button-next, .circle-button-prev { cursor: pointer; }
.circle-button-next { background-image: url('../images/lucky/icon_circle_next.png'); background-size: contain; background-repeat: no-repeat; background-position: center; width: 4rem; height: 4rem; position: absolute; right: -11%; top: 50%;  transform: translateY(-50%); z-index: 3; }
.circle-button-prev { background-image: url('../images/lucky/icon_circle_prev.png'); background-size: contain; background-repeat: no-repeat; background-position: center; width: 4rem; height: 4rem; position: absolute; left: -11%; top: 50%; transform: translateY(-50%); z-index: 3; }

.l-popup .l-container .l-desc { width: 100%; padding: 0 5rem; font-size: 2.5rem; font-weight: 300; letter-spacing: 1.1; }
.l-popup .l-container .l-result-box .l-desc { font-size: 2.1rem; padding: 0 2rem; }

.l-popup .l-container .l-result-box .l-title h3 { font-size: 3rem; font-weight: 400; }
.l-popup .l-container .l-result-box .l-title h2 { font-size: 4rem; font-weight: 800; margin-bottom: 6rem; }
.l-popup .l-container .l-result-box .l-box .l-prize .prize-box { width: 100%; height: 32.3rem; background-color: #fff; }

.checkbox { display: flex; align-items: center; justify-content: center; cursor: pointer; }
.checkbox:hover .checkbox__check { background: #ff475425; }
.checkbox__input { width: 0; height: 0; opacity: 0; }
.checkbox__input:checked + .checkbox__check { background:  #FA3C55; stroke-dashoffset: 0; }
.checkbox__check { border: 1px solid #999;  stroke: #f9f9f9; stroke-dasharray: 25; stroke-dashoffset: 25; stroke-linecap: round; stroke-width: 0.2rem; border-radius: 0.2rem; fill: none; transition: background 0.4s, stroke-dashoffset 0.6s; width: 2rem; height: 2rem; }

.wrap .btn-start { position: fixed; right: 2.5rem; bottom: 33rem; width:13rem; z-index: 100; -webkit-animation:bounce-in-top 1s 1s both; animation:bounce-in-top 1s 1s both; }
.wrap .btn-lucky { position: fixed; right: 2.5rem; bottom: 18rem; width:13rem; z-index: 100; -webkit-animation:bounce-in-top 1s .8s both;animation:bounce-in-top 1s .8s both; }
.wrap .btn-lucky-my { position: fixed; right: 2.5rem; bottom: 3rem; width:13rem; z-index: 100; -webkit-animation:bounce-in-top 1s .6s both;animation:bounce-in-top 1s .6s both; }

/* kv shiny */
@keyframes twinkle { 0%, 100% { opacity: 1; transform: scale(.5); filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.6)); } 50% { opacity: 0.6; transform: scale(1.15); filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.9)); } }

/* logo */
@-webkit-keyframes scale-in-center{0%{-webkit-transform:scale(0);transform:scale(0);opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}@keyframes scale-in-center{0%{-webkit-transform:scale(0);transform:scale(0);opacity:1}100%{-webkit-transform:scale(1);transform:scale(1);opacity:1}}

/* kv title */
@-webkit-keyframes bounce-in-top{0%{-webkit-transform:translateY(-500px);transform:translateY(-500px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}38%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1}55%{-webkit-transform:translateY(-65px);transform:translateY(-65px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}72%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}81%{-webkit-transform:translateY(-28px);transform:translateY(-28px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}90%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}95%{-webkit-transform:translateY(-8px);transform:translateY(-8px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}@keyframes bounce-in-top{0%{-webkit-transform:translateY(-500px);transform:translateY(-500px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}38%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out;opacity:1}55%{-webkit-transform:translateY(-65px);transform:translateY(-65px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}72%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}81%{-webkit-transform:translateY(-28px);transform:translateY(-28px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}90%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}95%{-webkit-transform:translateY(-8px);transform:translateY(-8px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:translateY(0);transform:translateY(0);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}}

/* skeleton image */
.skeleton {
    background: linear-gradient(
            90deg,
            rgba(200, 200, 200, 0.01) 25%,
            rgba(200, 200, 200, 0.1) 50%,
            rgba(200, 200, 200, 0.01) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-loading 2.5s infinite ease-in-out;
    border-radius:5rem;
}

.skeleton-box { width: 100%; height: 100%; }
.skeleton-box-square { width: 100%;  padding-top: 100%; position: relative; border-radius: 0 !important; }
.skeleton-box-rectangle { width: 100%;  padding-top: 56.25%; position: relative; border-radius: 0 !important; }
.skeleton-text { width: 100%; height: 6rem; margin-top: 1rem; border-radius: 2rem; }

@keyframes skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
/* skeleton image */