@charset "UTF-8";

/* layout */
[data-header="quiz"] .hk-header__inner {border-color:#323235}
[data-header="quiz"] .section__logo .section__title {color:#fff}
[data-category="quiz"] .cont-wrap .aside::before {background:#323235}
[data-category="quiz"] + .ad-bottom {background:#1c1c1e}
[data-category="quiz"] + .ad-bottom + .footer-module,
.footer-infomation, .footer-infomation .item, .footer-infomation .item > a,
.footer-infomation .f-define dt,
.footer-infomation .copyright {color:#fff}
.footer-infomation .item .txt-num {color:#fff !important}
.footer-module > div:first-child > .foot-inner {border-color:#323235}
.footer-infomation .item:not(:last-child)::after, .footer-infomation .hk-family dt::after {background:#323235}

.game-head-wrap {display:flex; gap:4px; justify-content:space-between; align-items:center}
.game-head-wrap .logo-quiz {background:url('https://hkstatic.hankyung.com/resource/www/game/quiz-economy-weekly/img/logo-aliceq-w.svg') no-repeat center/contain}
.profile-area {display:flex; gap:6px; align-items:center}
.profile-area .thumb {border-radius:50%; overflow:hidden}

.game-slide-wrap .slick-dots {position:relative; top:auto; right:auto; justify-content:center; margin-top:18px}
.game-slide-wrap .slick-dots button::before {width:8px; height:8px; background-color:#fff; opacity:0.3}
.game-slide-wrap .slick-dots .slick-active button::before {opacity:1}
.game-slide .slick-slide {width:100%}
.game-slide .slick-cloned {pointer-events:none}

.game-item {position:relative; display:flex; align-items:flex-end; height:100%; box-sizing:border-box; background-repeat:no-repeat; background-size:cover; background-position:center top}
.game-item:not(.open-event) {cursor:pointer}
.game-item:hover {text-decoration:none}
.game-item::before {z-index:1; content:''; display:block; width:100%; position:absolute; left:0; bottom:0; right:0; backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); mask:linear-gradient(to bottom, transparent 0%,black 22%); -webkit-mask:linear-gradient(to bottom, transparent 0%,black 22%); z-index:1}
.game-item::after {content:''; display:block; width:100%; position:absolute; left:0; bottom:0; right:0;background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.60) 100%); z-index:2}
.game-item::before, .game-item::after {height:260px; pointer-events:none}
.game-item .cont-box {opacity:0; transform:translateY(8px); position:relative; width:100%; color:#fff; text-align:center; z-index:4; transition:all .5s}
.game-slide .slick-slide.is-active .cont-box {opacity:1; transform:translateY(0)}

/* .slick-active .game-item .cont-box {opacity:0; animation:show 0.7s ease-in-out .1s forwards} */
@keyframes show {
  from {opacity:0; transform:translateY(8px)}
  to {opacity:1; transform:translateY(0)}
}
.game-item .game-tit {font-weight:700; font-size:28px; letter-spacing:0}
.game-item .game-desc {line-height:1.5; font-size:17px}
.game-item.quiz-news {background-image:url('https://hkstatic.hankyung.com/resource/www/game/main-v2/img/bg-quiznews-v2.jpg')}
.game-item.bingo3 {background-image:url('https://hkstatic.hankyung.com/resource/www/game/main-v2/img/bg-bingo3-v2.jpg')}
.game-item.bingo5 {background-image:url('https://hkstatic.hankyung.com/resource/www/game/main-v2/img/bg-bingo5-v2.jpg')}
.game-item.hkvoca {background-image:url('https://hkstatic.hankyung.com/resource/www/game/main-v2/img/bg-hkvoca-v2.jpg')}
.game-item.crossword-en {background-image:url('https://hkstatic.hankyung.com/resource/www/game/main-v2/img/bg-crossworden-v2.jpg')}
.game-item.quiz-travel {background-image:url('https://hkstatic.hankyung.com/resource/www/game/main-v2/img/bg-travel-v2.jpg')}
.game-item.quiz-charades {background-image:url('https://hkstatic.hankyung.com/resource/www/game/main-v2/img/bg-charades-v2.jpg')}
.game-item.open-event {background-image:url('https://hkstatic.hankyung.com/resource/www/game/main-v2/img/bg-event-v2.jpg')}
.game-item.closed-event {background-image:url('https://hkstatic.hankyung.com/resource/www/game/main-v2/img/bg-event-v2-closed.jpg')}
.game-item .btn-area {display:flex; justify-content:center; align-items:center; gap:8px; margin-top:16px}
.game-item .btn-basic {display:inline-flex; align-items:center; justify-content:center; max-width:160px; width:100%; height:44px; padding:0 18px; border-radius:100px; border:1px solid rgba(255, 255, 255, 0.20); color:#fff; font-size:16px; background:rgba(255, 255, 255, 0.20); box-sizing:border-box}

.ai-desc {color:#bcbcbc; font-size:12px; text-align:center}
.game-cont-wrap .cont-tit {display:block; margin-bottom:20px; font-weight:700; color:#fff}
.date-box + .date-box {margin-top:32px}
.date-box .date {display:flex; align-items:center; gap:6px; margin-bottom:12px; font-weight:400; color:#fff; font-size:14px}
.date-box .date::before {content:''; flex:0 0 auto; width:14px; height:14px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' viewBox='0 0 14 14'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' d='M12.25 5.833H1.75m7.583-4.666V3.5M4.667 1.167V3.5m-.117 9.333h4.9c.98 0 1.47 0 1.845-.19a1.75 1.75 0 0 0 .764-.765c.191-.374.191-.865.191-1.845v-4.9c0-.98 0-1.47-.19-1.844a1.75 1.75 0 0 0-.766-.765c-.374-.19-.864-.19-1.844-.19h-4.9c-.98 0-1.47 0-1.844.19a1.75 1.75 0 0 0-.765.765c-.191.374-.191.864-.191 1.844v4.9c0 .98 0 1.47.19 1.845.169.33.436.597.766.765.374.19.864.19 1.844.19'/%3E%3C/svg%3E")}
.game-list {display:flex; flex-wrap:wrap; align-items:center; gap:16px}

.game-box {position:relative; border-radius:24px; overflow:hidden}
.game-box::before {content:''; display:block; position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%}
.game-box.quiz-news::before {background:linear-gradient(180deg, #727272 0%, #454545 100%)}
.game-box.bingo3::before {background:linear-gradient(180deg, #238CD4 0%, #003961 100%)}
.game-box.bingo5::before {background:linear-gradient(180deg, #584BB5 0%, #2E2667 100%)}
.game-box.hkvoca::before {background:linear-gradient(180deg, #FFC100 0%, #AF6600 100%)}
.game-box.crossword-en::before {background:linear-gradient(180deg, #8F6B49 0%, #442F1C 100%)}
.game-box.quiz-travel::before {background:linear-gradient(180deg, #92D936 0%, #006519 100%)}
.game-box.quiz-charades::before {background:linear-gradient(180deg, #23D4CB 0%, #005461 100%)}

.game-box .game-cont {position:relative; z-index:1; display:flex; flex-direction:column; justify-content:space-between; height:100%}
.game-box .info-area {display:flex; align-items:center; justify-content:space-between; gap:4px; background:rgba(0, 0, 0, 0.15); box-sizing:border-box}
.game-box .state-badge {flex:0 0 auto; color:#fff; font-size:12px}
.game-box .state-badge .complete::after, .game-box .state-badge .rest::after {content:''; display:inline-block; width:12px; height:12px; margin-left:3px; vertical-align:-2px}
.game-box .state-badge .complete::after {background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' viewBox='0 0 12 12'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' d='M10 3 4.5 8.5 2 6'/%3E%3C/svg%3E") no-repeat center/contain}
.game-box .state-badge .rest::after {background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' viewBox='0 0 12 12'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' d='M4.5 9.25h3M3.3 1h5.4c.28 0 .42 0 .527.054a.5.5 0 0 1 .218.219c.055.107.055.247.055.527v1.037c0 .245 0 .367-.028.482a1 1 0 0 1-.12.29c-.061.1-.148.187-.32.36L7.565 5.434c-.198.198-.297.297-.334.411a.5.5 0 0 0 0 .31c.037.114.136.213.334.41L9.03 8.032c.173.173.26.26.322.36a1 1 0 0 1 .12.29c.027.115.027.237.027.482V10.2c0 .28 0 .42-.055.527a.5.5 0 0 1-.218.218C9.12 11 8.98 11 8.7 11H3.3c-.28 0-.42 0-.527-.055a.5.5 0 0 1-.219-.218C2.5 10.62 2.5 10.48 2.5 10.2V9.163c0-.245 0-.367.028-.482a1 1 0 0 1 .12-.29c.061-.1.148-.187.32-.36l1.466-1.465c.198-.198.297-.297.334-.411a.5.5 0 0 0 0-.31c-.037-.114-.136-.213-.334-.41L2.97 3.968c-.173-.173-.26-.26-.322-.36a1 1 0 0 1-.12-.29C2.5 3.204 2.5 3.082 2.5 2.837V1.8c0-.28 0-.42.054-.527a.5.5 0 0 1 .219-.218C2.88 1 3.02 1 3.3 1'/%3E%3C/svg%3E") no-repeat center/contain}
.game-box .state-badge .btn-start {color:#fff}
.game-box .state-badge .btn-start::after {content:''; display:inline-block; width:12px; height:12px; margin-left:3px; vertical-align:-2px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' viewBox='0 0 12 12'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' d='m4.5 9 3-3-3-3'/%3E%3C/svg%3E") no-repeat center/contain}
.game-box .btn-ranking {display:flex; justify-content:center; align-items:center; width:52px; height:28px; padding:0 10px; border-radius:100px; font-size:13px; color:#fff; background:rgba(255, 255, 255, 0.20); box-sizing:border-box}
.game-box .btn-ranking:hover {text-decoration:none}
.game-box .game-tit {display:block; color:#fff; box-sizing:border-box}
.game-box .game-tit:hover {text-decoration:none}
.game-box .game-tit::before {content:''; display:block; width:120px; max-width:100%; height:100px; margin:0 auto 12px; background-repeat:no-repeat; background-size:cover; background-position:center}
.game-box.quiz-news .game-tit::before {background-image:url('https://hkstatic.hankyung.com/resource/www/game/main-v2/img/icon-quiznews.png')}
.game-box.bingo3 .game-tit::before {background-image:url('https://hkstatic.hankyung.com/resource/www/game/main-v2/img/icon-bingo3.png')}
.game-box.bingo5 .game-tit::before {background-image:url('https://hkstatic.hankyung.com/resource/www/game/main-v2/img/icon-bingo5.png')}
.game-box.hkvoca .game-tit::before {background-image:url('https://hkstatic.hankyung.com/resource/www/game/main-v2/img/icon-hkvoca.png'); background-position:center top}
.game-box.crossword-en .game-tit::before {background-image:url('https://hkstatic.hankyung.com/resource/www/game/main-v2/img/icon-crossworden.png')}
.game-box.quiz-travel .game-tit::before {background-image:url('https://hkstatic.hankyung.com/resource/www/game/main-v2/img/icon-travel.png')}
.game-box.quiz-charades .game-tit::before {background-image:url('https://hkstatic.hankyung.com/resource/www/game/main-v2/img/icon-charades.png')}

.newsletter-wrap {display:block; width:100%; padding:16px 20px; border-radius:16px; text-align:center; background:#333; overflow:hidden; box-sizing:border-box}
.newsletter-cont {position:relative; display:inline-block; padding-left:56px; color:#fff; vertical-align:middle; text-align:left}
.newsletter-cont::before {content:''; display:inline-block; position:absolute; top:50%; transform:translateY(-50%); left:0; width:40px; height:40px; vertical-align:middle; background:url('https://hkstatic.hankyung.com/resource/www/game/main-v2/img/icon-newsletter.svg') no-repeat center/contain}
.newsletter-cont .tit {display:block; margin-bottom:2px; font-weight:700; font-size:17px}
.newsletter-cont .txt {font-size:12px}

/* 안내 풀페이지 */
.info-page-wrap {background:#fff}
.info-wrap .layout-inner {max-width:720px; margin:0 auto; text-align:center;}
.info-wrap .top-head {position:relative; display:flex; align-items:center; justify-content:flex-end; height:56px; padding:16px; color:#fff; box-sizing:border-box}
.info-wrap .top-head:has(.btn-prev) {justify-content:space-between;}
.info-wrap .btn-prev {flex:0 0 auto; width:40px; height:40px; margin:-16px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%231a1a1a' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.2' d='m15 18-6-6 6-6'/%3E%3C/svg%3E") no-repeat center/24px 24px}
.info-wrap .page-tit {position:absolute; top:16px; left:50%; transform:translateX(-50%); font-size:17px}
.info-wrap .info-txt {position:relative; display:inline-flex; align-items:center; justify-content:center; padding:20px 32px; border-radius:32px; color:#fff; font-size:17px; background:#000; box-sizing:border-box}
.info-wrap .info-txt::after {content:''; display:block; position:absolute; bottom:-10px; left:50%; width:20px; height:10px; transform:translateX(-50%); background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10' fill='none' viewBox='0 0 20 10'%3E%3Cpath fill='%23000' d='M10 10 0 0h20z'/%3E%3C/svg%3E") no-repeat center/contain}
.info-wrap .info-thumb {display:block; max-width:200px; width:100%; height:212px; margin:20px auto 0}
.info-wrap .info-thumb > img {width:100%; height:100%; object-fit:contain}

/* OS dark mode */
@media (prefers-color-scheme: dark) {
  .info-page-wrap {background:#000}
  .info-wrap .info-txt {background:#fff; color:#000;}
  .info-wrap .info-txt::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10' fill='none' viewBox='0 0 20 10'%3E%3Cpath fill='%23fff' d='M10 10 0 0h20z'/%3E%3C/svg%3E")}
  .info-wrap .btn-prev {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.2' d='m15 18-6-6 6-6'/%3E%3C/svg%3E")}
}

/* 모바일 */
/* @media screen and (max-width:720px) {
    .main .main-contents[data-category="quiz"] {padding-bottom:70px}
    .main:has(.footer-module) .main-contents[data-category="quiz"] {padding-bottom:0}

    .main .ad-box, .main .ad-bottom {background:#1c1c1e}
    .hk-header[data-header="quiz"]::before {background:rgba(28,28,30,.8)}
    .section__gnb__wrap .section__logo__area {border-color:#323235}
    .game-head-wrap {height:60px; box-sizing:border-box}
    .game-head-wrap .logo-quiz {width:100px; height:29px}
    .profile-area .user {display:none}
    .profile-area .thumb {width:32px; height:32px}

    .game-slide-wrap {margin:0 -20px}
    .game-slide-wrap .slick-dots {margin-top:6px}
    .game-slide-wrap .slick-dots button {width:24px; height:20px}
    .game-slide-wrap .slick-cloned * {pointer-events: none !important}
    .game-item {height:455px; padding:24px 20px 20px}
    .game-item::before, .game-item::after {height:226px}
    .game-item::after {background:linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 1) 100%)}
    .game-box {flex:0 0 auto; width:calc(50% - 8px); height:212px}
    .game-box .game-tit {padding:12px 16px; font-weight:700; font-size:17px; white-space:nowrap}
    .game-box .info-area {min-height:52px; padding:12px 12px 12px 16px}
    .game-cont-wrap {margin-top:42px}
    .game-cont-wrap .cont-tit {font-size:20px}
    
    .newsletter-wrap {margin-top:32px}
    .ai-desc {margin-top:16px}
}     
@media screen and (min-width:720px) { 
  .game-item {border-radius:24px}
}
*/

/* 웹 */
/* @media screen and (min-width:1200px) { */
    [data-header="quiz"] .hk-header__inner::before {background:rgba(28,28,30,.8)}
    .hk-header[data-header="quiz"] .promotion-nav a {color:#79ADD4}
    /* 2026 개편 헤더 */
    .hk-header.ver-2026[data-header="quiz"] .hk-header__inner {border-color:#323235}
    .hk-header.ver-2026[data-header="quiz"] .hk-top__logo .img-logo,
    .hk-header.ver-2026[data-header="quiz"] .hk-top__wrap.v-202604 .gnb__btn-allmenu,
    .hk-header.ver-2026[data-header="quiz"] .hk-top__wrap.v-202604 .hk-top__util .btn-total-search::before {filter:invert(1) brightness(10)}
    .hk-header.ver-2026[data-header="quiz"] .header-account-info a,
    .hk-header.ver-2026[data-header="quiz"] .promotion-nav a {color:#fff}

    .game-head-wrap {height:44px; margin-bottom:16px}
    .game-head-wrap .logo-quiz {width:118px; height:34px}
    .profile-area .user {flex:0 0 auto; color:#fff; font-size:15px}
    .profile-area .thumb {width:40px; height:40px}

    .game-slide .slick-slide {width:820px; height:496px; border-radius:24px; overflow:hidden}
    .game-item {border-radius:24px; padding:24px 40px 40px}
    .game-box {flex:0 0 auto; width:calc(25% - 12px); height:230px}
    .game-box .game-tit {padding:16px; font-weight:500; font-size:20px}
    .game-box .info-area {min-height:56px; padding:14px 14px 14px 16px}

    .game-cont-wrap {margin-top:50px}
    .game-cont-wrap .cont-tit {font-size:24px}
    
    .newsletter-wrap {margin-top:48px}
    .ai-desc {margin-top:24px}
/* } */