@charset "UTF-8";

/* EVENT  */
.eventWrap.evtFullType .evtTitWrap .logo.logo_fr {top:0; padding: 45px 0 0;}
.eventWrap.evtFullType .evtTitWrap .logo.logo_fr .fr_inner{right:30px;}
.eventWrap.evtFullType .evtTitWrap .logo.logo_fr .fr_inner .logoVisang{margin:0;}
.eventWrap.evtFullType .icoEvtEnd{top:300px;}

.eventWrap .inner{width:1110px;}
.evtTop{background: linear-gradient(180deg, #593BD9 0%, #8678FF 100%);}
.evtTitWrap{background:url('/resources/images/event/2026/event260617/evt01_bg.png') no-repeat center top;}
.evtTitWrap .inner{width:1280px;}
.evtTitWrap .vivacorn{position:absolute; top:95px; right:30px;}
.evtTitWrap .item1{margin-top:314px;}

.evtCont01 {}
.evtCont01 .inner{padding:77px 0 64px; text-align:center;max-width:1110px;}
.evtCont01 .inner h2{margin:0 auto;}

.gacha-container {
    position:relative;
    margin:20px auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 2. 흔들림의 중심축을 바닥(bottom)으로 잡아주는 핵심 상자 */
.gacha-machine {
    position: relative;background:url('/resources/images/event/2026/event260617/machine_body.png') no-repeat center center;z-index:3;
    width: 559px;
    height: 834px;
    transform-origin: bottom center;
    transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    padding:131px 0 0 20px;
}

/* 머신 외곽 일러스트 레이어 (캡슐들을 위에 덮어씌울 투명 PNG 권장) */
.machine-body {
    position: absolute;
    top: 130px;
    left: 20px;
    width: 482px;
    height: 340px;
    z-index: 20;
    pointer-events: none; /* 마우스 클릭이 캡슐이나 버튼에 방해 안 되게 차단 */
}

/* 3. 내부 캡슐들을 가두는 유리구 영역 */
.capsule-stage {
    position:relative;
    width: 482px;
    height: 337px;
    overflow: hidden;
    clip-path: circle(57.9% at 50% 50%);
    z-index: 1;    /* 머신 이미지 뒤쪽에 배치 */
}

/* 4. 개별 캡슐 공통 속성 */
.capsule {
    position: absolute;
    border-radius: 50%;
    transition: transform 0.4s ease-out, bottom 0.4s ease-out, left 0.4s ease-out;
}

/* 초기 캡슐 무작위 위치 및 색상 배치 */
.cap1 {width:117px;height:119px; left: 77px; top: 23px; background:url('/resources/images/event/2026/event260617/ball1.png') no-repeat center center;z-index:14; }
.cap2 {width:103px;height:107px; left: 147px; top: 88px; background:url('/resources/images/event/2026/event260617/ball2.png') no-repeat center center;z-index:15; }
.cap3 {width:126px;height:130px; right: 44px; top: 95px;background:url('/resources/images/event/2026/event260617/ball3.png') no-repeat center center;z-index:5; }
.cap4 {width:137px;height:140px; left: 7px; top: 85px;background:url('/resources/images/event/2026/event260617/ball4.png') no-repeat center center;  }
.cap5 {width:116px;height:117px; right: 103px; bottom: 55px; background:url('/resources/images/event/2026/event260617/ball5.png') no-repeat center center; z-index:4; }
.cap6 {width:123px;height:129px; left: 153px; bottom: -36px; background:url('/resources/images/event/2026/event260617/ball6.png') no-repeat center center; z-index:3; }
.cap7 {width:151px;height:151px; left: 164px; bottom: 40px; background:url('/resources/images/event/2026/event260617/ball7.png') no-repeat center center; z-index:3;}
.cap8 {width:133px;height:135px; right: 53px; bottom: -33px; background:url('/resources/images/event/2026/event260617/ball8.png') no-repeat center center; z-index:1;}
.cap9 {width:127px;height:129px; left: 53px; bottom: -28px; background:url('/resources/images/event/2026/event260617/ball9.png') no-repeat center center; z-index:3;}
.cap10 {width:124px;height:127px; left: 209px; top: 119px; background:url('/resources/images/event/2026/event260617/ball10.png') no-repeat center center;  z-index:0;}
.cap11 {width:139px;height:140px; left: -4px; bottom: 25px; background:url('/resources/images/event/2026/event260617/ball11.png') no-repeat center center;  z-index:2;}
.cap12 {width:116px;height:120px; right: 126px; bottom: -28px; background:url('/resources/images/event/2026/event260617/ball12.png') no-repeat center center; z-index:0; }
.cap13 {width:131px;height:133px; right: -3px; bottom: 41px; background:url('/resources/images/event/2026/event260617/ball13.png') no-repeat center center;  }
.cap14 {width:137px;height:140px; left: 84px; bottom: 57px; background:url('/resources/images/event/2026/event260617/ball14.png') no-repeat center center;z-index:1  }
.cap15 {width:102px;height:105px; left: 136px; bottom: -4px; background:url('/resources/images/event/2026/event260617/ball15.png') no-repeat center center; z-index:0;  }
.claw { position: absolute;width:111px;height:127px; right:52px; top:-18px; background:url('/resources/images/event/2026/event260617/ic_claw.png') no-repeat center center;transform-origin: top center;z-index:15;}
/* ===================================================
   ★ ANIMATION CLASSES (자바스크립트로 제어)
====================================================== */

/* 머신 본체 진동 상태 */
#gacha-machine{display:none}
#gachaMachine.is-shaking {
    animation: machineShake 0.4s ease-in-out infinite;
}

/* 캡슐 불규칙 바운스 상태 (서로 엇박자가 나도록 duration/delay 분산) */
.gacha-machine.is-shaking .capsule {
    animation: bounceCapsule 0.6s linear infinite alternate;
}
.gacha-machine.is-shaking .claw {
    animation: clawSwing 0.6s ease-in-out infinite alternate;
}
.gacha-machine.is-shaking .cap1  { animation-delay: 0.03s; animation-duration: 0.52s; }
.gacha-machine.is-shaking .cap2  { animation-delay: 0.15s; animation-duration: 0.64s; }
.gacha-machine.is-shaking .cap3  { animation-delay: 0.22s; animation-duration: 0.48s; }
.gacha-machine.is-shaking .cap4  { animation-delay: 0.08s; animation-duration: 0.58s; }
.gacha-machine.is-shaking .cap5  { animation-delay: 0.31s; animation-duration: 0.66s; }
.gacha-machine.is-shaking .cap6  { animation-delay: 0.11s; animation-duration: 0.50s; }
.gacha-machine.is-shaking .cap7  { animation-delay: 0.26s; animation-duration: 0.61s; }
.gacha-machine.is-shaking .cap8  { animation-delay: 0.05s; animation-duration: 0.55s; }
.gacha-machine.is-shaking .cap9  { animation-delay: 0.19s; animation-duration: 0.45s; }
.gacha-machine.is-shaking .cap10 { animation-delay: 0.28s; animation-duration: 0.63s; }
.gacha-machine.is-shaking .cap11 { animation-delay: 0.02s; animation-duration: 0.51s; }
.gacha-machine.is-shaking .cap12 { animation-delay: 0.14s; animation-duration: 0.59s; }
.gacha-machine.is-shaking .cap13 { animation-delay: 0.25s; animation-duration: 0.47s; }
.gacha-machine.is-shaking .cap14 { animation-delay: 0.07s; animation-duration: 0.56s; }
.gacha-machine.is-shaking .cap15 { animation-delay: 0.33s; animation-duration: 0.68s; }

/* ===================================================
   ★ KEYFRAMES (물리 모션 정의)
====================================================== */

/* 머신 본체 좌우 격렬한 쉐이킹 */
@keyframes machineShake {
    0% { transform: rotate(0deg) translateX(0); }
    25% { transform: rotate(-1deg) translateX(-2px); }
    75% { transform: rotate(1deg) translateX(2px); }
    100% { transform: rotate(0deg) translateX(0); }
}

/* 내부 캡슐들의 공중 점프 반동 및 회전 */
@keyframes bounceCapsule {
    0% {
        transform: translateY(0) translateX(0) rotate(0deg);
    }
    25% {
        /* 가속도가 붙어 솟구칠 때 좌우 흔들림 분산 */
        transform: translateY(-15px) translateX(-5px) rotate(-5deg);
    }
    75% {
        /* 정점 찍고 회전 극대화 */
        transform: translateY(10px) translateX(10px) rotate(20deg);
    }
    100% {
        transform: translateY(5px) translateX(0) rotate(5deg);
    }
}
@keyframes clawSwing {
    0% {
        transform: rotate(-10deg);
    }
    100% {
        transform: rotate(12deg);
    }
}

/* 작동 버튼 스타일 */
.btn-gacha {
    margin:47px auto 0;
    padding: 27px 11px 36px;width:648px;height:158px;

    background: url(/resources/images/event/2026/event260617/btn_gacha.png) no-repeat right center;
    cursor: pointer;
}
.btn-gacha:hover,.btn-gacha:active {background: url(/resources/images/event/2026/event260617/btn_gacha_hover.png) no-repeat center center;

}
.btn-gacha span{display:block;height:61px;background:url(/resources/images/event/2026/event260617/txt_gacha.png) no-repeat center center;}
.btn-gacha p{margin-top:5px; font-family:'Paperlogy'; font-size: 24px;font-weight: 500;color: #431616;}
.btn-gacha p em{font:inherit;}

.txt_nocoin{margin-top:22px;font-size:26px;text-align:center;color:#c8c8c8;}

.btn_login_coin{margin:30px auto 0;display:block;width:638px;height:139px;background:url(/resources/images/event/2026/event260617/btn_login_coin.png) no-repeat center center;}

.popResult{display:none;z-index:1001;}
.popResult .popbody{padding:40px 50px 30px;position:relative;width:498px;height:659px;background:url(/resources/images/event/2026/event260617/pop_result_bg.png) no-repeat center center;}
.popResult .popbody .btn_close{position:absolute;right:-10px;top:0;transform:translate(100%,-26px);width:24px;height:24px;background:url(/resources/images/event/2026/event260617/btn_close.png) no-repeat center center;}
.popResult .popbody .lucky{height:69px;background:url(/resources/images/event/2026/event260617/txt_lucky.png) no-repeat center center;}
.popResult .popbody .gachaGift{margin:9px auto 0;text-align:center;}
.popResult .popbody .txtResult{text-align:center;color:#fff;font-family:'Paperlogy';font-size:26px;line-height:1.4;font-weight:400;}
.popResult .popbody .txtResult span{font:inherit;display:block;text-align:center;font-weight:700;}
.popResult .popbody .btn_info{margin:20px auto 0;display:block;width:308px;height:76px;background:url(/resources/images/event/2026/event260617/btn_info_result.png) no-repeat center center;cursor:pointer;}
.popResult .popbody ul{margin-top:13px;}
.popResult .popbody ul li{font-size:16px;font-weight:300;line-height:1.5;color:#a4a4a4;text-align:center;}

.popGacha{display:none;position:fixed;left:0;right:0;top:0;bottom:0;align-items: center;justify-content: center;z-index:1000;background:rgba(11,11,11,0.8);}
.popGacha.ing{display:flex;}

.popGacha .gacha-container{position:relative;width:1280px;height:834px;overflow:hidden;}
.popGacha .gacha-container:after{content:'';position:absolute;top:0;width:100%;height:100%;background:url(/resources/images/event/2026/event260617/backlight.png) no-repeat center top;}
.glitter{position:absolute;}
.glitter img{width:100%;}
.glitter.st1{left:400px;top:96px;width:70px;height:72px;}
.glitter.st2{left:320px;top:580px;width:46px;height:48px;}
.glitter.st3{right:257px;top:300px;width:98px;height:102px;}
.glitter.st4{right:200px;top:640px;width:70px;height:72px;}
.glitter.st5{left:15px;top:470px;width:41px;height:42px;}
.glitter.st6{right:70px;top:475px;width:67px;height:109px;}
.glitter.st7{left:180px;top:199px;width:67px;height:109px;}
.glitter.show {display:block;
    animation: twinkleSoft 1.2s ease-in-out infinite alternate;
}
.glitter.show.st1{animation-delay: 200ms;animation-duration: 1s;}
.glitter.show.st2{animation-delay: 150ms;animation-duration: 0.68s;}
.glitter.show.st3{animation-delay: 150ms;animation-duration: 0.68s;}
.glitter.show.st4{animation-delay: 180ms;animation-duration: 1.5s;}
.glitter.show.st6{animation-delay: 200ms;animation-duration: 0.8s;}
@keyframes twinkleSoft {
    0% {
        opacity: 0.3;
        transform: scale(0.8);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}


.manual{margin:115px auto 0;text-align:center;}
.manual h3{margin-bottom:40px;height:124px;background:url(/resources/images/event/2026/event260617/subTit01.png) no-repeat center center;}
.evtCont02{background:#AFC9FF url(/resources/images/event/2026/event260617/cont02_bg.png) no-repeat center top;}
.evtCont02 .inner{position:relative;padding:90px 0; width:1200px;text-align:center;}
.evtCont02 h3{font-family:'Paperlogy';color:#141A56;font-weight:700;font-size:46px;line-height:1.3;}
.evtCont02 p.c_gray{margin-top:-8px;font-family:'Paperlogy';font-size:26px;color:#777676;line-height:1.5;}
.evtCont02 h3 span{display:block;font-size:32px;color:inherit;font-weight:400;}
.evtCont02 .tab{margin:50px auto 0;display:flex;flex-wrap:nowrap;gap:52px;align-items: center;justify-content: center;max-width:1100px;}
.evtCont02 .tab li{position:relative;}
.evtCont02 .tab li .bubble{display:none;position:absolute;right:-76px;top:-64px;z-index:10;}
.evtCont02 .tab li:last-child .bubble{right:-40px;}
.evtCont02 .tab li a{width:330px;height:330px;display:block;background:#fff;box-shadow: 2px 4px 14px 0px #19144580;border-radius:50%;}
.evtCont02 .tab li:hover a,.evtCont02 .tab li.on a{background: linear-gradient(180deg, #FFFFFF 0%, #C2C7FF 100%);box-shadow: 2px 21px 15px 0px #1914452B;}
.evtCont02 .tab li:hover a:before,.evtCont02 .tab li.on a:before{content:'';position:absolute;left:0;top:0;width:100%;height:100%;border-radius:50%;border:3px solid #5584e8;box-sizing: border-box;z-index:1;}
.evtCont02 .tab li:hover .bubble,.evtCont02 .tab li.on .bubble{display:block;}
.evtCont02 [class^="answer"]{margin:72px auto 0;max-width:1100px;padding-top:70px;border-top:1px solid #E5E5E5;}
.evtCont02 .answer01{padding-top:0;border-top:none;}
.evtCont02 [class^="answer"] .dataview{margin:42px auto 0;display:flex;flex-wrap:nowrap;gap:38px;justify-content: center;}
.evtCont02 [class^="answer"] .dataview li{}
.evtCont02 [class^="answer"] .dataview li a{position:relative;display:block;box-shadow: 3px 3px 0px 0px #00000040;border-radius:10px;overflow:hidden;}
.evtCont02 [class^="answer"] .dataview li a:before{content:'';position:absolute;left:0;top:0;width:100%;height:100%;border: 1px solid #FFFFFFB2;border-radius:10px;box-sizing:border-box;}
.evtCont02 [class^="answer"] .dataview li:hover a{box-shadow: 2px 11px 15px 0px #1914452B;}
.evtCont02 [class^="answer"] .dataview li:hover a:before{border: 3px solid #FDF1B1;}
.cardcoupon{margin:70px auto 0;text-align:center;}
.couponImg{margin:45px auto 0;width:1050px;height:570px;background:url(/resources/images/event/2026/event260617/cardimg.png) no-repeat center center;}
.cardcoupon .btn_couponDown{margin:16px auto 0;display:block;width:503px;height:110px;background:url(/resources/images/event/2026/event260617/btn_couponDown.png) no-repeat center center;}
.cardcoupon p{margin-top:12px;text-align:center;font-size:26px;color:#3c3c3c;font-weight:300;line-height:1.5;}

.popCoupon{display:none;position:absolute;left:50%;bottom:125px;transform:translate(-50%,-50%);z-index:100;}
.popCoupon .popbody{position:relative;padding:25px 47px;width:535px;height:304px;background:#EFEFEF;border-radius:20px;}
.popCoupon .popbody .ico_gift{margin:0 auto;width:64px;height:64px;border-radius:32px;background:#fff;box-shadow: 0px 1px 14px 0px #0000001F;}
.popCoupon .popbody .btn_close{position:absolute;right:0px;top:0;transform:translate(100%,-100%);width:24px;height:24px;background:url(/resources/images/event/2026/event260617/btn_close.png) no-repeat center center;}
.popCoupon .popbody h3{margin-top:20px;text-align:center;font-size:28px;font-weight:700;font-family: 'Paperlogy';color:#222222;}
.popCoupon .popbody h3 span{display:inline;font:inherit;color:#816FEF;}
.popCoupon .copyNum{margin:28px auto 0;padding:10px 15px 10px 18px;display:flex;flex-wrap:nowrap;gap:16px;align-items:center;justify-content:space-between;background:#dbf4ff;border-radius:20px;border:1px dashed #735EF0;}
.popCoupon .copyNum p{font-size:21px;font-weight:600;color:#222;}
.popCoupon .copyNum .btn_copy{background:#816FEF;border-radius:15px;text-align:center;width:88px;height:35px;font-size:18px;font-weight:600;color:#fff;line-height:35px;}
.popCoupon .copyNum .btn_copy span{display:inline-block;margin-right:5px;width:18px;height:19px;background:url(/resources/images/event/2026/event260617/btn_copy.png) no-repeat center center;vertical-align: middle;}
.popCoupon .flex{margin-top:12px;display:flex;flex-wrap: nowrap;justify-content: space-between;align-items: center;}
.popCoupon .flex a{font-size:18px;font-weight:700;color:#484848;border-bottom:2px solid #484848;}
.popCoupon .flex span{font-size:13px;color:#707070;}


.evtCont03{background:#8578FE url(/resources/images/event/2026/event260617/cont03_bg.png) no-repeat center top;}
.evtCont03 .inner{padding:100px 0; width:1110px;text-align:center;}
.evtCont03 .inner h5{font-size:32px;color:#FFE3F1;line-height:1.4;}
.evtCont03 .inner h5 span{display:block;font:inherit;font-weight:600;}
.evtCont03 .inner dl{margin:30px auto 35px;display:flex;flex-wrap:nowrap;gap:20px;justify-content: center;align-items: center;}
.evtCont03 .inner dl dt{width:280px;height:73px;border-radius:36px;background:#4536D4;text-align:center;color:#FEE8A4;font-family: 'Paperlogy';font-size:32px;line-height:73px;font-weight:700;}
.evtCont03 .inner dl dd{font-family: 'Paperlogy';font-weight:700;font-size:46px;color:#4536D4;}
.evtCont03 .inner p{margin-top:20px;text-align:center;font-size:26px;color:#3c3c3c;line-height:1.5;}



.eventWrap .evtFooterWrap{background:#565656;}
.eventWrap .evtFooterWrap .inner{padding:60px 0; width:1100px;}
.eventWrap .evtFooterWrap p{font-family: 'Paperlogy';font-size:24px; color:#fff; line-height:1.5; font-weight:700;}
.eventWrap .evtFooterWrap ul{margin-top:30px;}
.eventWrap .evtFooterWrap ul li{position:relative; padding-left:20px; font-size:18px; color:#fff; line-height:1.5; font-weight:300; letter-spacing:-0.03em;}
.eventWrap .evtFooterWrap ul li:before{content:''; position:absolute; left:5px; top:10px; width:4px; height:4px; background:#fff; border-radius:50%;}
.eventWrap .evtFooterWrap ul li+li{margin-top:2px;}
.eventWrap .evtFooterWrap ul li:last-child{text-indent: -20px;}
.eventWrap .evtFooterWrap ul li:last-child:before{content:none;}



/* */
#eventPopWrap .eventPop .titWrap .tit{color:#ff8025;letter-spacing:-0.04em;}
#eventPopWrap .popTblWrap table td.txt{color:#393d49;font-weight:400;}
#eventPopWrap .popTblWrap .btnZipCode{border-radius:5px;font-size:13px;font-weight:500;}
#eventPopWrap .popTblWrap input[type="text"]::placeholder{color:#b1b2ba;}
#eventPopWrap .eventPop .formMulti .txt{color:#888888;font-weight:400;}
#eventPopWrap ._txt{position:relative; margin-top:3px;padding-left:10px; font-size:12px; color:#b1b2ba; font-weight: 300; line-height: 1;}
#eventPopWrap ._txt.mt13{margin-top:13px;}
#eventPopWrap ._txt:before{content:'*'; position:absolute; left:0; top:3px;}
#eventPopWrap .popInfoWrap{padding:30px 38px 50px;}
#eventPopWrap .popInfoWrap .btnWrap{margin-top:25px;}
#eventPopWrap .popInfoWrap .agreeForm .chk label{font-weight:300;}
#eventPopWrap .evtFormTxt{width:90px; height:26px; background:url(/resources/images/event/2021/379/applyTxt.png) no-repeat left top;}
#eventPopWrap .infoTxt{font-size:14px; color:#abadb5;}
.popInfoWrap .agreeForm p{font-size:14px;font-weight:300;color:#4a4f5f;letter-spacing:-0.045em;}
.popInfoWrap .agreeForm input[type="radio"] {appearance: none;-webkit-appearance: none;display: none;}
.popInfoWrap .agreeForm input[type="radio"] + label {position: relative; display: inline-block; padding-left: 30px; font-weight: 500; color: #4a4f5f; letter-spacing: -0.045em;}
.popInfoWrap .agreeForm input[type="radio"] + label:before {content: ''; position: absolute; left: 0; top: 50%; margin-top: -10px; width: 20px; height: 20px; background: url('/resources/images/educourse/ico_checkbox.png') no-repeat center top;}
.popInfoWrap .agreeForm input[type="radio"]:checked + label:before {background-position-y: 100%;}
.popInfoWrap .agreeForm .chk + .chk {margin-left: 30px;}
#eventPopWrap .eventPop.pop_type02 .popTblWrap table th h3{font-size: 16px;font-weight: 600;color: #191919;}