@charset "UTF-8";

/* font */
@font-face {
  font-family:'pretendard';
  font-weight: 700;
  font-display: swap;
  src: url('https://hangame-images.toastoven.net/hangame/event/20260422_hangamestore/font/Pretendard-Bold.woff2') format('woff2'),
  url('https://hangame-images.toastoven.net/hangame/event/20260422_hangamestore/font/Pretendard-Bold.woff') format('woff');
}
@font-face {
  font-family:'pretendard';
  font-weight: 400;
  font-display: swap;
  src: url('https://hangame-images.toastoven.net/hangame/event/20260422_hangamestore/font/Pretendard-Regular.woff2') format('woff2'),
  url('https://hangame-images.toastoven.net/hangame/event/20260422_hangamestore/font/Pretendard-Regular.woff') format('woff');
}

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,p,table,th,td,form,fieldset,legend,input,select,textarea,button,article,aside,dialog,header,section,footer,nav,figure,main{margin:0;padding:0}
body,input,select,textarea,button,a{font-family:'pretendard',-apple-system, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif}
article,aside,dialog,header,section,footer,nav,figure,main{display:block}
html,body{height:100%;-webkit-text-size-adjust:none;-ms-text-size-adjust:none}
body{min-height:100%;background:#000}
div{-webkit-box-sizing:border-box;box-sizing:border-box}
ul,ol,li{list-style:none}
table{border-spacing:0;table-layout:fixed}
input,button,select{border:0;border-radius:0;background-color:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none}
input::-ms-clear{display:none}
input:focus{outline:0}
input::-webkit-input-placeholder{font-size:14px;line-height:20px;color:rgba(0,0,0,0.38)}
input::-moz-placeholder{font-size:14px;line-height:20px;color:rgba(0,0,0,0.38)}
input:-ms-input-placeholder{font-size:14px;line-height:20px;color:rgba(0,0,0,0.38)}
input::-ms-input-placeholder{font-size:14px;line-height:20px;color:rgba(0,0,0,0.38)}
input::placeholder{font-size:14px;line-height:20px;color:rgba(0,0,0,0.38)}
input::-webkit-input-placeholder{font-size:14px;line-height:20px;color:rgba(0,0,0,0.38)}
input:-ms-input-placeholder{font-size:14px;line-height:20px;color:rgba(0,0,0,0.38)}
img,fieldset{border:0;vertical-align:top}
img{user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none}
em,address{font-style:normal}
a{color:#242424;text-decoration:none;cursor:pointer}
a,button,input,label,img{-webkit-user-select:none;-ms-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none}
button{white-space:nowrap;cursor:pointer}
button::-moz-focus-inner{padding:0;border:0}
::-webkit-file-upload-button{cursor:pointer}
hr{display:none}
button,button:active,button:focus,button:hover,
a,a:active,a:focus,a:hover{text-decoration:none;-webkit-tap-highlight-color:transparent}
.blind,caption span,legend{overflow:hidden;position:absolute;width:1px;height:1px;margin:-1px;padding:0;clip:rect(0,0,0,0)}
:root{--scrollbar-width: 0px}
.wrap{overflow-x:hidden;position:relative;min-width:360px;max-width:1024px;min-height:100vh;margin:0 auto;background:#111033}

.header{display:flex;justify-content:space-between;align-items:center;position:fixed;top:0;right:0;left:0;z-index:30;box-sizing:border-box;max-width:1024px;height:52px;margin:0 auto;padding:0 16px;background:rgba(0,0,0,0);transition:background 0.3s ease}
.header.scroll{background:rgba(13, 8, 69, 0.85);transition:background 0.3s ease}
.header .logo_area{display:flex;align-items:center;font-size:0}
.header .logo{display:flex;align-items:center}
.header .logo .link_logo{display:inline-block;position:relative;height:100%}
.header .logo .link_logo::before{position:absolute;top:-8px;left:-8px;width:29px;height:28px;padding:8px;content:''}
.header .logo_hangamestore{display:inline-block;width:28px;height:28px;background:url(https://hangame-images.toastoven.net/hangame/event/20260422_hangamestore/img/logo_hangamestore.png) no-repeat center;background-size:cover}
.header .header_title{display:inline-block;width:84px;height:15px;margin-left:8px;background:url(https://hangame-images.toastoven.net/hangame/event/20260422_hangamestore/img/header_title.png) no-repeat center;background-size:84px auto}
.header .menu_area .btn_menu{position:relative;width:24px;height:24px;background:url(https://hangame-images.toastoven.net/hangame/event/20260422_hangamestore/img/btn_menu.png) no-repeat;background-size:24px 24px}
.header .menu_area .btn_menu::before{display:inline-block;position:absolute;top:-10px;left:-10px;width:24px;height:24px;padding:10px;content:''}
.ico_red_dot{display:inline-block;position:absolute;top:-3px;right:-6px;width:5px;height:5px;background:#FF3B30;border-radius:999px}

/* 햄버거 메뉴 */
.backdrop{z-index:35;position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.60);filter:alpha(opacity=60);backdrop-filter:blur(1px);-webkit-backdrop-filter:blur(1px);transform:translateZ(0);overflow-y:auto;opacity:0;visibility:hidden;transition:.3s}
.side_menu{position:fixed;top:0;right:0;width:100%;max-width:338px;height:100vh;height:100dvh;background:#1C1B6C;z-index:40;transform:translateX(100%);transition:.35s cubic-bezier(0.4,0,0.2,1);display:flex;flex-direction:column}
.side_menu .menu_top{display:flex;padding-top: 52px;flex-shrink:0}
.side_menu .btn_close{position:absolute;z-index: 1;top:14px;right:14px;width:24px;height:24px;border:none;background:none;cursor:pointer}
.side_menu .btn_close::before, .side_menu .btn_close::after{content:"";position:absolute;top:50%;left:50%;width:18px;height:2px;background:#fff;transform-origin:center}
.side_menu .btn_close::before{transform:translate(-50%,-50%) rotate(45deg)}
.side_menu .btn_close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.side_menu .menu_content{flex:1;position:relative;padding:32px;background-color:#3E3BB4;display:flex;align-items:flex-end}
body.is-open,body.is-modal-open{overflow:hidden;padding-right:var(--scrollbar-width)}
body.is-open .header{left:calc(-1 * var(--scrollbar-width))}
body.is-open .backdrop{opacity:1;visibility:visible}
body.is-open .side_menu{transform:translateX(0)}
.side_menu .menu_user{color:#fff}
.side_menu .user_name{font-size:12px;color:#ccc}
.side_menu .user_name em{overflow:hidden;position:relative;top:-1px;display:inline-block;max-width:240px;text-overflow:ellipsis;white-space:nowrap;margin-right:2px;font-size:16px;font-weight:600;font-style:normal;color:#fff;vertical-align:middle}
.side_menu .user_message{font-size:16px;color:#D8DAF0}
.side_menu .user_message a{font-weight:600;color:#fff;text-decoration:underline}
.side_menu .menu_list{flex:1;min-height:0;overflow-y:auto}
.side_menu .menu_list li{padding:12px 32px 0 32px}
.side_menu .menu_list a{display:flex;justify-content:space-between;align-items:center;color:#fff;padding:20px 20px 20px 0;text-decoration:none;font-size:16px}
.side_menu .menu_list .arrow{width:7px;height:7px;border-top:1.5px solid rgba(255, 255, 255, 0.2);border-right:1.5px solid rgba(255, 255, 255, 0.2);transform:rotate(45deg)}
.side_menu .menu_list li:hover .arrow{border-color:#B5BAE0}
.side_menu .menu_list .txt_hangame_youtube{width:89px;height:15px;background:url(https://hangame-images.toastoven.net/hangame/event/20260422_hangamestore/img/txt_hangame_youtube.png) no-repeat center;background-size:100% auto;font-size:0}
.side_menu .menu_list .txt_hangame_store{position:relative;width:91px;height:18px;background:url(https://hangame-images.toastoven.net/hangame/event/20260422_hangamestore/img/txt_hangame_store.png) no-repeat center;background-size:100% auto;font-size:0}
.side_menu .menu_list .txt_hangame_store .ico_red_dot{top:-2px;right:-10px}
.side_menu .menu_list .txt_hangame_portal{width:76px;height:18px;background:url(https://hangame-images.toastoven.net/hangame/event/20260422_hangamestore/img/txt_hangame_portal.png) no-repeat center;background-size:100% auto;font-size:0}
.side_menu .menu_list .txt_hangame_cscenter{width:58px;height:18px;background:url(https://hangame-images.toastoven.net/hangame/event/20260422_hangamestore/img/txt_hangame_cscenter.png) no-repeat center;background-size:100% auto;font-size:0}
.side_menu .menu_footer{padding:20px 16px;flex-shrink:0}
.side_menu .menu_footer button{position:relative;width:100%;height:58px;background:#3E3BB4;border:none;border-radius:4px;font-size:0}
.side_menu .menu_footer .btn_logout::after{content:'';position:absolute;top:50%;left:50%;width:58px;height:18px;background:url(https://hangame-images.toastoven.net/hangame/event/20260422_hangamestore/img/txt_logout.png) no-repeat center;background-size: 100% auto;transform:translate(-50%, -50%)}
.side_menu .menu_footer .btn_logout{background-color: rgba(62, 59, 180, 0.5);color:rgba(138, 144, 200, 1)}
.side_menu .menu_footer .btn_login::after{content:'';position:absolute;top:50%;left:50%;width:44px;height:18px;background:url(https://hangame-images.toastoven.net/hangame/event/20260422_hangamestore/img/txt_login.png) no-repeat center;background-size: 100% auto;transform:translate(-50%, -50%)}
.side_menu .menu_footer .btn_login{background-color: #3E3BB4;color:#fff}

.winner_banner{position:absolute;top:52px;right:0;left:0;z-index:10;background:rgba(5, 5, 29, 0.5)}
.winner_banner .winner_wrap{overflow:hidden}
.winner_banner .winner_list{display:flex;flex-wrap:nowrap;width:max-content !important;white-space:nowrap;transition-timing-function:linear !important;will-change:transform;transform:translate3d(0,0,0)}
.winner_banner .winner_list .winner_item{flex-shrink:0;width:auto !important;margin-left:14px;padding:11px 0 9px 0;font-size:13px;font-weight:400;line-height:16px;color:#B5B5B5}
.winner_banner .winner_list .winner_item .txt_prize{font-weight:700}

.section{position:relative;margin:0 auto}
.section .img_wrap img{display:block;width:100%}
.section_main{height:806px;background-color:#0A095D}
.section_main::before{position:absolute;top:0;left:50%;z-index:0;width:768px;height:831px;background:url(https://hangame-images.toastoven.net/hangame/event/20260422_hangamestore/img/bg.png) no-repeat;transform:translateX(-50%);content:''}
.section_main .bg_gradient{position:absolute;top:0;left:50%;z-index:1;width:184px;height:100%;transform:translateX(-50%)}
.section_main .bg_gradient.left{margin-left:-293px;background:linear-gradient(90deg, #0A095D 29.57%, rgba(10, 9, 93, 0) 84.78%)}
.section_main .bg_gradient.right{margin-left:293px;background:linear-gradient(270deg, #0A095D 29.57%, rgba(10, 9, 93, 0) 84.78%)}
.section_main .date_info{position:absolute;top:283px;left:50%;z-index:5;text-align:center;transform:translateX(-50%)}
.section_main .date_info img{width:100px;height:auto}

/* title motion */
.title_motion_wrap{overflow:hidden;position:relative;z-index:10;width:100%;margin-bottom:20px;padding-top:105px;text-align:center}
.title_motion_wrap .title_motion{display:flex;justify-content:center}
.title_motion_wrap .title_motion img{display:block;width:auto}
.title_motion_wrap .title_motion.motion_1{margin-right:10px;transform:translateX(-100%);animation:slideFromLeft 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards}
.title_motion_wrap .title_motion.motion_2{margin-top:-8px;margin-left:7px;transform:translateX(100%);animation:slideFromRight 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards}
/* slideFromLeft */
@keyframes slideFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}

/* slideFromRight */
@keyframes slideFromRight {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}

/* card motion */
.card_motion_wrap{padding-top:53px}
.card_motion{position:absolute;left:50%;width:500px;height:320px;transform:translateX(-50%)}
.card_motion.center_motion{z-index:1}
.card_motion .card{display:flex;justify-content:center;align-items:center;position:absolute;top:50%;left:50%;width:230px;transform:rotateY(0deg);transform-origin:center;transition:transform 0.8s ease;transform-style:preserve-3d}
.card_motion .card .front,.card_motion .card .back{position:absolute;width:100%;height:100%;background-image:url(https://hangame-images.toastoven.net/hangame/event/20260422_hangamestore/img/card.png);background-repeat:no-repeat;background-size:480px auto}
.card_motion .card .front{height:330px;background-position:-245px -5px}
.card_motion .card .back{height:331px;background-position:-5px -5px}
.card_motion .card.center{top:calc(50% - 1px);left:calc(50% + 3px)}
.card_motion .card.center::before{position:absolute;top:50%;left:50%;z-index:0;width:359px;height:474px;background: url(https://hangame-images.toastoven.net/hangame/event/20260422_hangamestore/img/card_blur_deco.png) no-repeat center;background-size:cover;opacity:0;transform:translate(-50%, -50%);content:''}
.card_motion .card.center.spin::before{animation:showDeco 0.3s ease-out 0.6s forwards}
/* showDeco(카드 뒤 blur deco) */
@keyframes showDeco {
  0% {opacity:0;transform:translate(-50%, -50%) scale(0.8)}
  100% {opacity:1;transform:translate(-50%, -50%) scale(1)}
}
.card_motion .card.center{z-index:3;transform:translate(-50%, -50%) scale(1);transition:none;perspective:1000px;transform-style:flat}
.card_motion .card.center .card_inner{position:relative;width:100%;height:330px;transform:rotateY(0deg);transition:transform 0.7s cubic-bezier(0.55, 0, 1, 0.45);transform-style:preserve-3d}
.card_motion .card.center .card_inner .front,
.card_motion .card.center .card_inner .back{position:absolute;width:100%;height:100%;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.card_motion .card.center .card_inner .back{transform:rotateY(0deg)}
.card_motion .card.center .card_inner .front{z-index:2;transform:rotateY(180deg)}
.card_motion .card.center.spin .card_inner{transform:rotateY(180deg)}
.card_motion .card.center.spin{animation:spinCardScale 0.7s ease-in-out}
/* spinCardScale (.card.center 회전 시 스케일 변동) */
@keyframes spinCardScale {
  0% {
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.3);
  }
  100% {
    transform: translate(-50%, -50%) scale(1);
  }
}
.card_motion .card.left,
.card_motion .card.right{z-index:0;height:331px;background-image:url(https://hangame-images.toastoven.net/hangame/event/20260422_hangamestore/img/card.png);background-repeat:no-repeat;background-position:-5px -5px;background-size:480px auto;opacity:0;transform:translate(-50%, -50%) scale(1)}
.card_motion .left_enter{animation:leftEnter 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;transition:none}
@keyframes leftEnter {
  0% {
    opacity: 1;
    transform: perspective(1000px) translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 1;
    transform:perspective(1000px) translate(calc(-50% - 139px), calc(-60% - 59px)) skew(32deg, -34deg) rotateX(-5deg) rotateY(36deg) scale(0.55);
  }
}
.card_motion .right_enter{animation:rightEnter 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;transition:none}
@keyframes rightEnter {
  0% {
    opacity: 1;
    transform: perspective(1000px) translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 1;
    transform: perspective(1000px) translate(calc(-50% + 149px), calc(-50% + 84px)) skew(-26deg, 15deg) rotateX(-12deg) rotateY(-45deg) scale(0.6)
  }
}
.card_motion .btn_draw{position:absolute;right:0;bottom:34px;left:0;width:180px;height:57px;margin:0 auto;background:url(https://hangame-images.toastoven.net/hangame/event/20260422_hangamestore/img/btn_free_draw.png) no-repeat;background-size:180px 57px;opacity:0;pointer-events:none}
.card_motion .card.center.spin .btn_draw{animation:btnShow 0.3s ease-in-out 0.8s forwards, btnPulse 1.5s ease-in-out 1.1s infinite;pointer-events:auto}
/* btnShow */
@keyframes btnShow {
  0% {opacity:0}
  100% {opacity:1}
}
/* btnPulse */
@keyframes btnPulse {
  0%, 100% {transform:scale(1)}
  50% {transform:scale(1.05)}
}

/* section_reward */
.section_reward{height:244px;background-color:#111033}
.section_reward .img_wrap{position:absolute;top:-80px;right:0;left:0;width:308px;height:304px;margin:0 auto}

/* section_notice */
.section_notice{box-sizing:border-box;max-width:390px;padding:0 24px}
.section_notice .img_wrap{width:120px;height:20px}
.notice_list{margin-top:16px;padding-left:6px}
.notice_list .notice_item{position:relative;padding-left:12px;font-size:12px;font-weight:400;line-height:22px;color:#D8DAF0}
.notice_list .notice_item.point{color:#FF8066}
.notice_list .notice_item::before{position:absolute;top:8px;left:0;width:4px;height:4px;border-radius:50%;background-color:#D8DAF0;content:''}
.notice_list .notice_item.point::before{background-color:#FF8066}
.notice_list .notice_item + .notice_item{margin-top:6px}

/* section_question */
.section_faq{box-sizing:border-box;max-width:390px;padding:0 24px 40px}
.section_faq .img_wrap{width:109px;height:20px}

/* faq_list */
.faq_list{margin-top:16px}
.faq_list .faq_item{padding:2px 0 2px 26px}
.faq_list .faq_item + .faq_item{margin-top:12px}
.faq_list .faq_item .faq_question{position:relative;font-size:12px;font-weight:700;line-height:18px;color:#D8DAF0}
.faq_list .faq_item .faq_answer{position:relative;margin-top:8px;font-size:12px;font-weight:700;line-height:18px;color:#fff}
.faq_list .faq_item .mark{display:inline-block;position:absolute;top:0;left:-26px;width:18px;height:18px;margin-right:8px;border-radius:100%;font-size:12px;font-weight:700;line-height:18px;text-align:center}
.faq_list .faq_item .faq_question .mark{background:#444E80;color:#D8DAF0}
.faq_list .faq_item .faq_answer .mark{background:#006FFF;color:#D8DAF0}


/* section_banner */
.section_banner{margin-top:40px}
.section_banner .banner_wrap{position:relative;width:100%;max-width:1024px;height:102px;margin:0 auto}
.section_banner .banner_wrap::before,
.section_banner .banner_wrap::after{position:absolute;top:0;width:50%;height:100%;content:''}
.section_banner .banner_wrap::before{left:0;background-color:var(--bg-left)}
.section_banner .banner_wrap::after{right:0;background-color:var(--bg-right)}
.section_banner .banner_wrap img{display:block;position:absolute;top:0;left:50%;width:766px;z-index:1;transform:translateX(-50%)}
.section_banner.floating{position:fixed;bottom:0;left:0;right:0;z-index:100}

/* footer */
.footer{padding:15px 0}
.footer .copy{font-size:12px;font-weight:400;line-height:40px;color:#A7A5AC;text-align:center}

/* dimmed */
.dimmed{display:none;position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100vh;height:100dvh;z-index:50;background-color:rgba(0,0,0,0.60);filter:alpha(opacity=60)}

/* ly_wrap */
.ly_wrap{position:fixed;top:50%;left:50%;z-index:100;-ms-transform:translate(-50%, -50%);-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%);-webkit-text-size-adjust:100%;text-size-adjust:100%}
.ly_wrap .ly_inner{width:320px;margin:0 auto;font-size:0;text-align:center}
.ly_wrap .btn_gift_confirm{position:absolute;bottom:0px;left:50%;z-index:2;width:100%;height:68px;transform: translateX(-50%)}
.ly_wrap .btn_confirm{position:absolute;bottom:0;left:50%;z-index:2;width:100%;height:68px;transform: translateX(-50%)}
.ly_wrap.ly_done .ly_inner{margin: -12px -12px 0 0}
.ly_wrap.ly_done .ly_inner .btn_gift_confirm{bottom: 37px}
.ly_wrap.ly_done .btn_close{position: absolute;top:-12px;right:-12px;width:60px;height:60px}
.ly_wrap.ly_congraution .ly_inner{height:470px;background:url(https://hangame-images.toastoven.net/hangame/event/20260422_hangamestore/img/popup_1_v3.png) no-repeat center;background-size:100% auto}
.ly_wrap.ly_congraution_done .ly_inner{height:414px;background:url(https://hangame-images.toastoven.net/hangame/event/20260422_hangamestore/img/popup_2_v4.png) no-repeat center;background-size:100% auto}
.ly_wrap.ly_done .ly_inner{height:279px;background:url(https://hangame-images.toastoven.net/hangame/event/20260422_hangamestore/img/popup_3.png) no-repeat center;background-size:100% auto}
.ly_wrap.ly_alert01 .ly_inner{height:232px;background:url(https://hangame-images.toastoven.net/hangame/event/20260422_hangamestore/img/popup_4.png) no-repeat center;background-size:100% auto}
.ly_wrap.ly_alert02 .ly_inner{height:264px;background:url(https://hangame-images.toastoven.net/hangame/event/20260422_hangamestore/img/popup_5.png) no-repeat center;background-size:100% auto}
.ly_wrap.ly_alert03 .ly_inner{height:264px;background:url(https://hangame-images.toastoven.net/hangame/event/20260422_hangamestore/img/popup_6.png) no-repeat center;background-size:100% auto}
.box_lottie{position:absolute;z-index:1;top:36%;left:50%;width:200%;height:200%;transform:translate(-50%, -50%)}

@media (orientation: landscape) and (max-height: 500px) {
  .ly_wrap.ly_congraution,
  .ly_wrap.ly_congraution_done {
    top:0;
    transform:translateX(-50%);
    max-height:100vh;
    max-height:100dvh;
    overflow-x:hidden;
    overflow-y:auto;
    -webkit-overflow-scrolling: touch;
  }
  .ly_wrap.ly_congraution .ly_inner,
  .ly_wrap.ly_congraution_done .ly_inner {
    position:relative;
    overflow:hidden;
  }
}
@media (max-height: 700px) {
  .ly_wrap.ly_congraution_done {
    top: calc(50% - 51px);
  }
}

@media (min-width: 1024px) {
  .header{z-index:60}
}