@charset "UTF-8";

.user-rank .name {font-size:14px}
.user-rank .name::before {content:''; display:inline-block; width:16px; height:16px; margin-right:8px; vertical-align:-2px; background:url('https://static.hankyung.com/resource/www/game/quiz-economy-weekly/img/icon-user.svg') no-repeat center/contain}
.inp-wrap .inp-area {padding:0 6px 0 21px; border:1px solid #585858; border-radius:100px; box-sizing:border-box; overflow:hidden}
.inp-wrap.valid .inp-area {border-color:#00A43F}
.inp-wrap.invalid .inp-area {border-color:#EE4C4C}
.inp-wrap.valid .inp-desc {color:#00A43F}
.inp-wrap.invalid .inp-desc {color:#EE4C4C}
.inp-txt {outline:none; border:none; padding:12px 0; box-sizing:border-box; font-size:16px; background:#fff}
.inp-txt::placeholder {font-size:12px}
.inp-txt::-webkit-input-placeholde {font-size:12px}
.inp-txt::-moz-placeholder {font-size:12px}
.inp-txt::-ms-input-placeholder {font-size:12px}
.inp-txt:-ms-input-placeholder {font-size:12px}
.inp-btn {position:relative}
.inp-btn .loading-area {display:block; position:absolute; top:8px; right:8px; width:16px; height:16px; text-align:center; animation:spin 1s linear infinite; background:url('https://static.hankyung.com/resource/www/game/quiz-economy-weekly/img/icon-loading.svg') no-repeat center/contain}
.inp-wrap.loading .btn-basic {padding-right:28px; border-color:#ddd; white-space:nowrap; color:#585858; background-color:#ddd}

/* 레이어팝업 */
.layer-pop .btn-close {position:absolute; top:12px; right:8px; width:30px; height:30px}
.layer-pop .btn-close::before, 
.hint-box .btn-close::before {content:''; display:inline-block; width:18px; height:18px; background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.5 4.5L4.5 13.5M4.5 4.5L13.5 13.5' stroke='%23121212' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");}

.layer-pop {display:none; position:fixed; top:0; left:0; right:0; bottom:0; z-index:9999999; align-items:center; justify-content:center; background: rgba(0, 0, 0, 0.30)}
.layer-pop.active {display:flex}
.layer-pop .pop-inner {position:relative; padding:16px 16px 20px; border-radius:8px; border:1px solid #121212; box-sizing:border-box; background-color:#fff}
.layer-pop .pop-tit {display:block; margin-bottom:24px; font-weight:700; font-size:14px}
.layer-pop .btn-basic.big-type {width:100%; height:40px; font-size:14px}
.layer-pop .btn-basic {display:inline-flex; align-items:center; justify-content:center; min-width:106px; height:35px; padding:0 16px; border-radius:100px; border:1px solid #121212; font-size:14px; box-sizing:border-box; background-color:#fff; transition:all .3s}
.layer-pop .btn-basic:not(.default-type):hover {box-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.05), 0px 4px 16px 0px rgba(0, 0, 0, 0.10)}
.layer-pop .btn-basic.type-black {color:#fff; background-color:#121212}

.layer-pop.edit-pop .pop-inner {max-width:360px; width:100%}
.layer-pop.edit-pop .inp-area {position:relative; display:flex; align-items:center; gap:8px; height:48px}
.layer-pop.edit-pop .inp-wrap {position:relative; padding-bottom:16px}
.layer-pop.edit-pop .inp-wrap .inp-desc {margin-top:5px; padding-left:20px; font-size:12px; box-sizing:border-box}
.layer-pop.edit-pop .inp-wrap .inp-desc.default {color:#585858}
.layer-pop.edit-pop .inp-area .inp-txt {flex:1 1 auto; width:calc(100% - 100px)}
.layer-pop.edit-pop .inp-wrap + .btn-basic {flex:0 0 auto; min-width:77px; font-size:14px}
.layer-pop.edit-pop .edit-cont .user-rank {display:block; margin-bottom:12px}
.layer-pop.edit-pop .btn-basic.big-type {border:none; color:#fff; background-color:#121212}
.layer-pop.edit-pop .btn-basic.default-type {color:#585858; background-color:#ddd; cursor:default}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.modal-open {/*overflow:hidden;*/ width:100%; height:100%}
.game-item {display:flex; align-items:center; justify-content:space-between; gap:32px; padding:24px 32px 24px 40px; border-radius:20px; box-sizing:border-box}
.game-item + .game-item {margin-top:20px}
.game-item.game-top {margin-top:12px; padding:32px 32px 32px 30px; color:#fff; background-color:#121212; box-shadow:0px 2px 4px 0px rgba(0, 0, 0, 0.05), 0px 4px 8px 0px rgba(0, 0, 0, 0.10), 0px 8px 24px 0px rgba(0, 0, 0, 0.06);}
.game-item.game-quiz {background:linear-gradient(93deg, rgba(230, 235, 238, 0.50) 0%, rgba(210, 214, 220, 0.50) 99.42%)}
.game-item.game-bingo {background:linear-gradient(107deg, #EEF6FF 0%, #D5E9FF 100%)}
.game-item.game-initial {background:linear-gradient(93deg, rgba(255, 240, 192, 0.60) 0%, rgba(255, 227, 153, 0.60) 99.42%)}
/* .game-item.game-crossword {background:linear-gradient(93deg, rgba(255, 213, 210, 0.40) 0%, rgba(255, 184, 178, 0.40) 99.42%)} */
.game-item.game-crossword {background:linear-gradient(93deg, #F8F1EA 0%, #F0E4D7 99.42%)}
.game-item .game-tit {font-weight:500; font-size:24px}
.game-item.game-top .game-tit {font-size:27px}
.game-item .game-desc, .game-item .game-date {font-weight:400; font-size:14px}
.game-item .game-desc {margin-top:8px; line-height:1.6}
.game-item .game-date {display:block; margin-top:20px}
.game-item .game-date::before {content:''; display:inline-block; width:14px; height:14px; margin-right:4px; vertical-align:-1px; background:url('https://static.hankyung.com/resource/www/game/main/img/icon-date.svg') no-repeat center left/contain}
.game-item .txt-area {flex:1 1 auto; width:calc(100% - 344px)}
.game-item::before {content:''; display:inline-block; width:120px; height:120px; vertical-align:middle; background-repeat:no-repeat; background-size:contain; background-position:left center}
.game-item.game-top::before {background-image:url('https://hkstatic.hankyung.com/resource/www/game/quiz-economy-weekly/img/logo-aliceq-w.svg')}
.game-item.game-quiz::before {background-image:url('https://static.hankyung.com/resource/www/game/main/img/icon-newsquiz.png')}
.game-item.game-bingo::before {background-image:url('https://static.hankyung.com/resource/www/game/main/img/icon-bingo.png')}
.game-item.game-initial::before {background-image:url('https://static.hankyung.com/resource/www/game/main/img/icon-initial2.png')}
.game-item.game-crossword::before {background-image:url('https://static.hankyung.com/resource/www/game/main/img/icon-crossword3.png')}

.game-item .btn-area {display:flex; flex-direction:column; gap:12px}
.game-item .btn-basic {display:flex; align-items:center; justify-content:center; min-width:160px; height:48px; padding:0 20px; border-radius:100px; font-size:16px; background-color:#fff; box-sizing:border-box}
.game-item .ready-txt {min-width:160px; color:#585858; font-size:16px; text-align:center}

/* 인트로 영상 */
.intro-video {position:relative; width:100%; min-height:37px; margin:0 auto 32px}
.intro-video .btn-basic {position:absolute; top:8px; left:8px; display:flex; align-items:center; justify-content:center; height:37px; padding:0 16px; border-radius:100px; border:1px solid #585858; font-weight:700; font-size:12px; box-sizing:border-box; background-color:#fff}
.intro-video.active .video-area {opacity:1; max-height:800px; padding-bottom:56.25%;}

.video-area {opacity:0; max-height:0; overflow:hidden; position:relative; height:0; padding-bottom:0; border-radius:20px; -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -webkit-transform:translate3d(0, 0, 0); -moz-transform:translate3d(0, 0, 0); transition:all .4s; box-shadow:0px 4px 8px 0px rgba(0, 0, 0, 0.05), 0px 8px 16px 0px rgba(0, 0, 0, 0.05), 0px 16px 24px 0px rgba(0, 0, 0, 0.05)}
.video-area video {position: absolute; top:0; left:0; width:100% !important; height:100% !important}
.video-control {z-index:2; position:absolute; bottom:20px; right:20px; display:none; align-items:center; justify-content:center; gap:8px}
.intro-video.active .video-control {display:flex}
.video-control .btn-control { display:flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background-color:#fff; box-shadow:0px 4px 16px 0px rgba(0, 0, 0, 0.05); vertical-align:middle}
.video-control .btn-control::before {content:''; display:inline-block; width:20px; height:20px; background-repeat:no-reapeat; background-size:contain; background-position:center}
.video-control .btn-control.play::before {background-image:url('https://static.hankyung.com/resource/www/game/main/img/icon-play.svg')}
.video-control .btn-control.pause::before {background-image:url('https://static.hankyung.com/resource/www/game/main/img/icon-pause.svg')}
.video-control .btn-control.muteon::before {background-image:url('https://static.hankyung.com/resource/www/game/main/img/icon-muteon.svg')}
.video-control .btn-control.muteoff::before {background-image:url('https://static.hankyung.com/resource/www/game/main/img/icon-muteoff.svg')}

.notice-area {position:relative; display:flex; align-items:center; gap:16px; margin-bottom:20px; padding:12px 30px 12px 16px; border-radius:100px; background-color:#f0f0f0; box-sizing:border-box}
.notice-area::after {content:''; display:inline-block; position:absolute; top:14px; right:16px; width:16px; height:16px; vertical-align:middle; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23121212' stroke-linecap='round' stroke-linejoin='round' d='m6 12 4-4-4-4'/%3E%3C/svg%3E") no-repeat center/contain}
.notice-area .notice-tit {flex:0 0 auto}
.notice-area .notice-tit, .notice-area .notice-txt {font-size:14px}
.notice-area .notice-tit::before {content:''; display:inline-block; width:16px; height:16px; margin-right:6px; vertical-align:-2px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath stroke='%23121212' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M14.662 5.334v2.667M6.828 3.668h-2.3c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874c-.218.427-.218.987-.218 2.108v.8c0 .62 0 .931.102 1.176.135.327.395.587.721.722.245.102.556.102 1.177.102V12.5c0 .155 0 .232.007.297a1.33 1.33 0 0 0 1.196 1.197c.065.006.142.006.297.006s.232 0 .297-.006a1.33 1.33 0 0 0 1.197-1.197c.006-.065.006-.142.006-.297V9.668h.5c1.178 0 2.618.63 3.73 1.237.648.353.972.53 1.185.504a.63.63 0 0 0 .46-.274c.125-.174.125-.522.125-1.218V3.418c0-.696 0-1.044-.124-1.218a.63.63 0 0 0-.462-.274c-.212-.026-.536.151-1.184.504-1.112.606-2.552 1.238-3.73 1.238'/%3E%3C/svg%3E") no-repeat center/contain}
.notice-area .notice-txt {display:block; width:100%}
.notice-area .notice-txt:hover {text-decoration:underline}

.end-pop.layer-pop .pop-inner {width:480px; padding:24px; border-radius:40px; text-align:center}
.end-pop.layer-pop .pop-tit {margin-bottom:8px}
.end-pop.layer-pop .pop-txt {line-height:1.6}
.end-pop.layer-pop .bg-box {padding:24px 16px; border-radius:24px; background-color:#f5f5f5; box-sizing:border-box;}
.end-pop.layer-pop .bg-box::before {content:''; display:block; width:170px; height:136px; margin:0 auto 8px; background:url('https://static.hankyung.com/resource/www/game/main/img/pop-graphic.png') no-repeat center/contain; margin-bottom:16px;}
.end-pop.layer-pop .bg-box .pop-tit {font-size:24px}
.end-pop.layer-pop .bg-box .pop-txt {font-size:16px}
.end-pop.layer-pop .con-box {margin-top:24px}
.end-pop.layer-pop .con-box .pop-tit, .end-pop.layer-pop .con-box .pop-txt {font-size:16px}
.end-pop.layer-pop .con-box .pop-tit {display:block; font-weight:700}
.end-pop.layer-pop .btn-basic.big-type {height:48px; margin-top:24px; line-height:1; color:#fff; font-size:16px; background-color:#000}

.chk-area {position:relative; display:inline-flex; align-items:center; gap:6px; margin-top:24px; cursor:pointer; user-select:none}
.chk-area input[type="checkbox"] {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.chk-area .inp-label {font-size:14px}
.chk-area .inp-chk {position:relative; display:inline-block; width:20px; height:20px}
.chk-area .inp-chk::after {content:''; display:block; width:20px; height:20px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23ccc' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.2' d='M10 .6a9.4 9.4 0 1 1 0 18.8A9.4 9.4 0 0 1 10 .6'/%3E%3C/svg%3E") no-repeat center/contain}
.chk-area input[type="checkbox"]:checked + .inp-chk::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 20 20'%3E%3Cpath fill='%231a1a1a' d='M10 0c5.523 0 10 4.477 10 10s-4.477 10-10 10S0 15.523 0 10 4.477 0 10 0m4.924 6.576a.6.6 0 0 0-.848 0L8.5 12.152 5.924 9.576a.599.599 0 1 0-.848.848l3 3a.6.6 0 0 0 .848 0l6-6a.6.6 0 0 0 0-.848'/%3E%3C/svg%3E")}


@media screen and (max-width:345px) {
}

@media (prefers-color-scheme: dark) {
}