@charset "UTF-8";
/* @import url('https://static.hankyung.com/resource/www/game/quiz-economy-weekly/css/quiz-main.css'); */

/* RESET */
body {background-color:#fff}
html,body {-webkit-text-size-adjust:none}
body, button, input, select, option, textarea {color:#222; font-size:15px; letter-spacing:-0.039em; font-family:'Noto Sans KR', 'Helvetica Neue','Apple SD Gothic Neo','AppleGothic','Droid Sans fallback',sans-serif}
body,div,span,em,strong,select,section,article,nav,footer,header,address,caption,figure,figcaption,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,p,textarea,input,button,tr,th,td,table {margin:0; padding:0;box-sizing:border-box}
h1,h2,h3,h4,h5,h6 {font-size:100%}
ol,ul,li {list-style-type:none}
img,fieldset, iframe {border:0 none; vertical-align:top}
img {max-width:100%}
input,button,select,textarea,label {vertical-align:middle; resize:none; outline:none}
input,textarea {-webkit-appearance:none; -webkit-border-radius:0}
input[type='checkbox'] {-webkit-appearance:checkbox}
input[type='radio'] {-webkit-appearance:radio; -webkit-border-radius:10px}
input[type='button'], input[type='submit'], input[type='reset'] {cursor:pointer}
button {border:0 none; background:transparent; cursor:pointer}
i,em,address,optgroup {font-style:normal}
hr {display:none}
table {border-collapse:collapse; border-spacing:0}
header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption {display:block}
legend, .blind {position:absolute; width:1px; height:1px; margin:-1px; padding:0; border:none; overflow:hidden; clip:rect(0 0 0 0); color:transparent}
caption {width:0; height:0; overflow:hidden; color:transparent; text-indent:-9999px}
a {color:#222; text-decoration:none}
a:hover {text-decoration:none}

.inner-scroll {position:relative; overflow-y:hidden; overflow-x:auto; -webkit-overflow-scrolling:touch}
.inner-scroll::-webkit-scrollbar {display:none}

.scroll-box {overflow-y:auto; overflow-x:hidden}
.scroll-box::-webkit-scrollbar {width:4px}
.scroll-box::-webkit-scrollbar-track {margin:5px 0; border-radius:100px; background:#f0f0f0; border:none}
.scroll-box::-webkit-scrollbar-thumb {border-radius:100px; background-color:#006AE1}

/* 파이어폭스에서만 */
@supports (-moz-appearance: none) {
  .scroll-box {padding-right:12px; scrollbar-color:#006AE1 transparent}
}


br.is-mo {display:none}
br.is-pc {display:block}

.wrap.main {display:flex; flex-direction:column; min-height:100dvh; background:linear-gradient(107deg, #EEF6FF 0%, #D5E9FF 100%)}
.wrap.main.video-active {height:100%}
.modal-open {overflow:hidden; width:100%; height:100%}

.btn-basic {display:inline-flex; align-items:center; justify-content:center; min-width:86px; height:32px; padding:0 16px; border-radius:100px; font-size:12px; box-sizing:border-box; background-color:#fff; box-shadow:0px 4px 16px 0px rgba(0, 0, 0, 0.05); transition:all .3s}
.btn-basic:hover {box-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.05), 0px 4px 16px 0px rgba(0, 0, 0, 0.10)}
.btn-basic.type-black {color:#fff; background-color:#121212}
.btn-basic.type-line {border:1px solid #121212}

.btn-home::before {content:''; display:inline-block; width:18px; height:18px; margin-right:6px; background:url('https://static.hankyung.com/resource/www/game/quiz-economy-weekly/img/icon-home.svg') no-repeat center left/contain}
.btn-again .num {font-family:'Helvetica Neue', sans-serif; font-weight:700}
.btn-again .num::before {content:''; display:inline-block; width:16px; height:16px; margin:0 4px; vertical-align:-2px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='16' fill='none'%3E%3Cpath fill='%23CCC' fill-rule='evenodd' d='M8.726 3.424C7.393 1.866 5.17 1.446 3.5 2.874c-1.67 1.426-1.905 3.812-.594 5.5 1.09 1.403 4.39 4.362 5.472 5.32.121.107.182.16.252.182a.336.336 0 0 0 .19 0c.071-.021.132-.075.253-.182 1.082-.958 4.381-3.917 5.472-5.32 1.311-1.688 1.105-4.089-.594-5.5-1.699-1.413-3.893-1.008-5.225.55Z' clip-rule='evenodd'/%3E%3C/svg%3E")}
.btn-again .num.active::before {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='16' fill='none'%3E%3Cpath fill='%23006AE1' fill-rule='evenodd' d='M8.265 3.424c-1.333-1.558-3.556-1.978-5.226-.55-1.67 1.426-1.905 3.812-.594 5.5 1.09 1.403 4.39 4.362 5.472 5.32.121.107.182.16.252.182a.336.336 0 0 0 .19 0c.072-.021.132-.075.253-.182 1.082-.958 4.381-3.917 5.472-5.32 1.311-1.688 1.105-4.089-.594-5.5-1.699-1.413-3.892-1.008-5.225.55Z' clip-rule='evenodd'/%3E%3C/svg%3E")}

.box-type {padding:16px; border-radius:16px; box-sizing:border-box; background-color:#fff; box-shadow:0px 4px 16px 0px rgba(0, 0, 0, 0.05)}

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

.footer {z-index:2; max-width:1200px; width:100%; margin:0 auto; padding:0 0 40px; font-weight:500; font-size:12px; color:#121212; letter-spacing:0; text-align:center}
.footer .desc-txt {margin-bottom:12px; font-weight:400; color:#707070; font-size:12px}
.main .footer {padding:16px 0 40px; border-top:1px solid #C6D5E5}

.intro-video {position:relative; width:100%; max-width:1240px; min-height:77px; margin:0 auto; padding:0 0 20px}
.intro-video .btn-basic {position:absolute; top:20px; left:20px; font-weight:700}
.video-active .intro-video .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:32px; -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -webkit-transform:translate3d(0, 0, 0); -moz-transform:translate3d(0, 0, 0); transition:all .4s}
.video-area video {position: absolute; top:0; left:0; width:100% !important; height:100% !important}
.video-control {z-index:2; position:absolute; bottom:40px; right:20px; display:none; align-items:center; justify-content:center; gap:8px}
.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')}

.logo-area .logo-hk {display:block; width:36px; height:19px; margin-bottom:8px}
.logo-area .desc {margin-top:16px; font-size:14px}
.logo-quiz {display:block}
.logo-quiz img {width:100%; height:100%; object-fit:cover}
.logo-quiz-area {display:flex; align-items:center; gap:8px}
.logo-quiz-area .logo-txt {font-weight:700; font-size:28px}
.main .logo-quiz-area {gap:12px}
.user-wrap .logo-quiz-area .logo-quiz {width:123px; height:36px}
.main .logo-top-area {display:none; position:relative}
.logo-top-area .logo-quiz {width:96px; height:28px}
.logo-top-area .btn-prev {display:block; position:absolute; top:2px; left:6px; width:45px; height:45px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Cpath stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.667' d='m12.5 15-5-5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-size:20px 20px; background-position:center}
/* .col-wrap {position:relative; display:flex; justify-content:flex-end; max-width:1440px; height:calc(100dvh - 94px); margin:0 auto; padding:20px 0 32px 94px; box-sizing:border-box} */
/* .user-wrap {flex:0 0 auto; position:fixed; top:50%; transform:translateY(-50%); left:120px; display:block; width:340px} */
.col-wrap {position:relative; display:flex; justify-content:center; align-items:center; gap:80px; width:100%; max-width:1440px; /*min-height:calc(100% - 162px);*/ margin:0 auto; padding:0px 120px 20px; box-sizing:border-box}
.user-wrap {flex:0 0 auto; width:360px}
.content {flex:0 0 auto; width:calc(100% - 440px)}
.fixed-area .btn-list {opacity:0; visibility:hidden; user-select:none; box-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.05), 0px 4px 16px 0px rgba(0, 0, 0, 0.05), 0px 4px 24px 0px rgba(0, 0, 0, 0.15); background-color:#fff}

.user-wrap .ranking-box {position:relative; margin-top:32px}
.user-wrap .ranking-box.no-data::before {z-index:2; content:'이번 회차는 퀴즈가 발행되지 않아 랭킹이 제공되지 않습니다.'; display:flex; align-items:center; justify-content:center; position:absolute; top:64px; left:4%; width:92%; height:calc(100% - 78px); padding:0 76px; border-radius:8px; color:#fff; font-size:14px; text-align:center; background:rgba(18, 18, 18, 0.85); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-sizing:border-box; word-break:keep-all}
.ranking-box .tab-menu {margin-bottom:16px}
.ranking-box .tab-menu > ul {display:flex; gap:20px}
.ranking-box .tab-menu li button {min-height:29px; padding-bottom:8px; font-weight:400; font-size:14px; box-sizing:border-box}
.ranking-box .tab-menu li:not(.on) button:hover {padding-bottom:7px; border-bottom:1px solid #121212}
.ranking-box .tab-menu li.on {border-bottom:2px solid #121212}
.ranking-box .tab-menu li.on button {padding-bottom:6px; font-weight:700}
.ranking-box .rank-info {margin-top:8px}
.ranking-box .rank-info .rank-desc + .rank-period {margin-top:4px}
.ranking-box .rank-info-txt .rank-desc {color:#585858; font-size:12px; word-break:keep-all}

.tbl-rank {border-bottom:1px solid #ddd}
.tbl-rank .scroll-box {max-height:288px}
.tbl-rank .col-item {display:flex; align-items:center; gap:8px; box-sizing:border-box}
.tbl-rank .col {color:#121212}
.tbl-rank .tbl-body .col.num, .tbl-rank .tbl-body .col.score {flex:0 0 auto; font-weight:700}
.tbl-rank .tbl-head .col.score, .tbl-rank .myscore-area .col.score {padding-right:20px}

.tbl-rank .tbl-body .col-item {padding:8px 0}
.tbl-rank .col.num {width:13%; text-align:center}
.tbl-rank .col.name {width:66%}
.tbl-rank .col.score {width:21%; padding-right:16px; text-align:right; box-sizing:border-box}
.tbl-rank .tbl-head .col {font-size:12px}
.tbl-rank .tbl-body .col {font-size:14px}
.tbl-rank .tbl-body .col.name {color:#1F2937}
.tbl-rank .myscore-area {border-bottom:1px solid #ddd; box-sizing:border-box}
.tbl-rank .myscore-area .col, .tbl-rank .myscore-area .col.name {line-height:1; color:#006AE1}

.newsletter-box {margin-top:24px}
.newsletter-box, .newsletter-box > p {display:flex; align-items:center; gap:12px}
.newsletter-box::before {content:''; flex:0 0 auto; width:40px; height:40px; background:url('https://static.hankyung.com/resource/www/game/quiz-economy-weekly/img/icon-letter.svg') no-repeat center/contain}
.newsletter-box > p {justify-content:space-between; width:calc(100% - 52px); line-height:normal; font-size:14px}
.newsletter-box > p::after {content:''; display:inline-block; width:24px; height:24px; vertical-align:middle; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9 18L15 12L9 6' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size:contain}
.fixed-area .desc-txt {display:block; margin:20px 0; color:#707070; font-size:12px}

.bingo-wrap {padding:20px 0 40px 0; text-align:right} 
.bingo-list {display:inline-flex; flex-wrap:wrap; gap:16px 16px; padding:24px; width:680px; height:680px; border-radius:56px; box-sizing:border-box; background:#F7FAFF; box-shadow:8px 8px 8px 0px #FFF inset, 4px 4px 15px 0px rgba(0, 0, 0, 0.10), 8px 15px 40px 0px rgba(0, 0, 0, 0.05), -8px -8px 8px 0px rgba(97, 117, 139, 0.08) inset}
.bingo-item {position:relative; width:calc(33% - 9px); height:calc(33% - 9px); border-radius:40px}
.bingo-item .quiz-info {display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px; height:100%; transition:all .1s}
.bingo-item .quiz-head {display:flex; align-items:center; gap:6px}
.bingo-item .date {font-size:14px}
.bingo-item .badge {flex:0 0 auto; padding:3px 8px; border-radius:4px; border:1px solid #fff; color:#121212; font-weight:700; line-height:1.3; font-size:12px; vertical-align:middle; background-color:rgba(255, 255, 255, 0.60);; box-sizing:border-box}
.bingo-item .badge.complete {border:1px solid #fff; color:#121212}
.bingo-item .badge.new {border:1px solid #006AE1; color:#fff; background-color:#006AE1}
.bingo-item .badge.new::before {content:'NEW'; display:flex; align-items:center; justify-content:center; color:#fff; line-height:1.3; font-size:12px}
.bingo-item .badge.early {border-color:#55606C; color:#fff; background-color:#55606C}
.bingo-item .badge.coming {width:20px; height:20px; border:none; background-repeat:no-repeat; background-size:contain; background-color:transparent; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='20' fill='none'%3E%3Cpath stroke='%23585858' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M14.936 8.333V6.667a4.167 4.167 0 0 0-8.334 0v1.666m4.167 3.75v1.667M8.102 17.5h5.334c1.4 0 2.1 0 2.635-.273a2.5 2.5 0 0 0 1.092-1.092c.273-.535.273-1.235.273-2.635v-1.167c0-1.4 0-2.1-.273-2.635a2.5 2.5 0 0 0-1.092-1.092c-.535-.273-1.235-.273-2.635-.273H8.102c-1.4 0-2.1 0-2.635.273a2.5 2.5 0 0 0-1.092 1.092c-.273.535-.273 1.235-.273 2.635V13.5c0 1.4 0 2.1.273 2.635a2.5 2.5 0 0 0 1.092 1.092c.535.273 1.235.273 2.635.273Z'/%3E%3C/svg%3E")}
.bingo-item .quiz-title {font-weight:500; font-size:22px}
.bingo-item .hover-area {opacity:0; visibility:hidden; position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; transition:all .3s}
.bingo-item .hover-area .hover-txt {display:flex; align-items:center; justify-content:center; width:100%; height:100%; font-weight:500; font-size:18px;}
.bingo-item .hover-area .hover-txt::after {content:''; display:inline-block; margin-left:2px; width:20px; height:20px; vertical-align:middle; background-size:contain; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='21' fill='none'%3E%3Cpath stroke='%23121212' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m7.5 15.5 5-5-5-5'/%3E%3C/svg%3E")}
.bingo-item.ing .hover-area .hover-txt {color:#006AE1}
.bingo-item.ing .hover-area .hover-txt::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='21' fill='none'%3E%3Cpath stroke='%23006AE1' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m7.5 15.5 5-5-5-5'/%3E%3C/svg%3E")}
.main .bingo-item.ing {border:1px solid #E0E3E7; background:#F7FAFF; box-shadow:16px 16px 16px 0px #FFF inset, -16px -16px 16px 0px rgba(97, 117, 139, 0.08) inset}
.main .bingo-item.complete {box-shadow:16px 16px 16px 0px rgba(255, 255, 255, 0.30) inset, -16px -16px 16px 0px rgba(50, 82, 117, 0.05) inset}
.main .bingo-item.complete .quiz-title {font-size:16px}
.main .bingo-item.ready {background:#E7EBF0 url('https://static.hankyung.com/resource/www/game/bingo/img/icon-ready.svg') no-repeat center/60px 100px}
.main .bingo-item.complete {background:linear-gradient(180deg, #C1E1FF 0%, #72BAFF 100%)}
.main .bingo-item.complete .quiz-info {gap:20px}
.main .bingo-item.complete .quiz-info::after {content:''; display:block; width:74px; height:64px; background:url('https://static.hankyung.com/resource/www/game/bingo/img/icon-catfoot.png?v=2') no-repeat center/contain}
.main .bingo-item.early {background-color:#C0C7D0}
.main .bingo-item.coming {background-color:#E7EBF0}
.main .bingo-item.coming .date {color:#585858}

.main .bingo-wrap.slide-type {overflow:hidden; position:relative; margin-right:-30px; box-sizing:border-box; perspective:1200px; height:900px}
.main .bingo-wrap.slide-type .slide-title {display:block; flex:0 0 auto; width:144px; height:24px; background:url('https://static.hankyung.com/resource/www/game/bingo/img/img-round1.svg') no-repeat center/contain; box-sizing:border-box}
.main .bingo-wrap.slide-type .slide-title.tit2 {background-image:url('https://static.hankyung.com/resource/www/game/bingo/img/img-round2.svg')}
.main .bingo-wrap.slide-type .slide-title.tit3 {background-image:url('https://static.hankyung.com/resource/www/game/bingo/img/img-round3.svg')}
.bingo-control {display:flex; align-items:center; justify-content:center; gap:48px; height:36px; margin-bottom:24px; padding-left:38px}
.bingo-control .slide-arrow {flex:0 0 auto; width:36px; height:36px; background-repeat:no-repeat; background-size:contain; background-position:center}
.bingo-control .btn-prev {background-image:url('https://static.hankyung.com/resource/www/game/bingo/img/icon-arrow-left.svg')}
.bingo-control .btn-next {background-image:url('https://static.hankyung.com/resource/www/game/bingo/img/icon-arrow-right.svg')}
.bingo-slide .slick-list {position:relative; overflow:visible !important}
.bingo-slide.slick-slider .slick-track {position:relative !important; width:100% !important; transform:translate3d(0,0,0) !important}
.bingo-slide .slick-slide {margin:0 32px}
.bingo-slide .slick-slide {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  transform: rotateY(180deg);
  transition: transform 1s;

  position:absolute; top:0; right:0;
  width:100% !important; height:100%
}
.bingo-slide .slick-slide.slick-active {
  transform: rotateY(0deg);
  opacity:1;
}


/* 퀴즈뷰 */
.view .bingo-item.correct .quiz-info, .view .bingo-item.incorrect .quiz-info {cursor:default}
.point-txt {z-index:1; position:relative; font-weight:700; color:#006AE1}
.point-txt::before {content:''; z-index:-1; display:block; position:absolute; bottom:-1px; left:0; width:100%; height:12px; border-radius:1000px; background-color:#CFE6FF}
.color-red {color:#CA3531}
.color-blue {color:#006AE1}
.bg-box {width:100%; margin-bottom:12px; padding:12px; border-radius:12px; background-color:#F5F5F5; box-sizing:border-box; line-height:1.8; font-size:min(max(16px, 1.62vw), 18px); text-align:center; word-break:keep-all}

.view .logo-quiz-area {display:inline-flex; justify-content:center; width:100%; min-height:38px; box-sizing:border-box}
.view .logo-quiz-area .logo-quiz {width:89px; height:26px}
.view .logo-quiz-area .logo-txt {font-size:20px}
.view .btn-basic {min-width:93px; height:37px}
.view .logo-top-area {position:relative; text-align:center}
.cont-head {max-width:1200px; margin:0 auto; padding:24px 0; box-sizing:border-box}
.cont-body {display:flex; gap:80px; max-width:1200px; margin:0 auto; padding:8px 0 64px; box-sizing:border-box}

.score-progress {position:absolute; top:8px; left:0; gap:8px; font-size:14px} 
.score-progress, .score-progress .score-list {display:flex; align-items:center}
.score-progress .score-list {gap:2px; border-radius:4px; border:1px solid #121212; padding:4px; box-sizing:border-box}
.score-progress .score-list li {width:8px; height:12px; background-color:#ccc}
.score-progress .score-list li.on {background-color:#006AE1}
.score-progress .score-list li:first-child {border-radius:2px 0 0 2px}
.score-progress .score-list li.last-on {animation: blink-sequence 1s ease-in-out infinite}
.score-progress .score-num {font-weight:700}
@keyframes blink-sequence {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

.top-info .btn-area {position:absolute; top:0; right:0} 
.btn-replay {padding:8px 20px; border:1px solid #ccc; font-size:14px; box-shadow:none}
.btn-replay::before {content:''; display:inline-block; width:18px; height:18px; margin-right:6px; background-position:center; background-size:contain; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='18' fill='none'%3E%3Cpath stroke='%23121212' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M2.269 7.5s1.504-2.049 2.725-3.271a6.75 6.75 0 1 1-1.712 6.646M2.27 7.5V3m0 4.5h4.5'/%3E%3C/svg%3E");}
.btn-replay.hold {border-color:#ccc; background-color:#f7f7f7; cursor:default}
.btn-replay.hold:hover {box-shadow:none}
.btn-replay.hold::before {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='19' fill='none'%3E%3Cpath stroke='%23585858' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M12.75 8V6.5a3.75 3.75 0 1 0-7.5 0V8M9 11.375v1.5M6.6 16.25h4.8c1.26 0 1.89 0 2.371-.245.424-.216.768-.56.984-.983C15 14.54 15 13.91 15 12.65V11.6c0-1.26 0-1.89-.245-2.371a2.25 2.25 0 0 0-.984-.984C13.291 8 12.662 8 11.4 8H6.6c-1.26 0-1.89 0-2.371.245a2.25 2.25 0 0 0-.984.984C3 9.709 3 10.339 3 11.6v1.05c0 1.26 0 1.89.245 2.371.216.424.56.768.984.984.48.245 1.11.245 2.371.245Z'/%3E%3C/svg%3E")}

.view .bingo-wrap {position:relative; display:flex; flex-wrap:wrap; gap:12px 12px; flex:0 0 auto; width:576px; height:576px; padding:0; box-sizing:border-box}
.view .bingo-cont {display:flex; flex-direction:column; gap:24px; width:544px}
.view .bingo-cont.ready-cont {align-items:center; justify-content:center; gap:12px}
.view .bingo-cont .round {font-size:18px}
.view .bingo-item {width:calc(33% - 8px); height:calc(33% - 8px); border:1px solid #E0E3E7; background:#fff; box-shadow:16px 16px 16px 0px #FFF inset, -16px -16px 16px 0px rgba(97, 117, 139, 0.08) inset; cursor:pointer}
.view .bingo-item .num {display:block; width:30px; height:30px; text-indent:-99999em}
.view .bingo-item:first-child .num {background:url('https://static.hankyung.com/resource/www/game/bingo/img/icon-num1.svg') no-repeat center/contain}
.view .bingo-item:nth-child(2) .num {background:url('https://static.hankyung.com/resource/www/game/bingo/img/icon-num2.svg') no-repeat center/contain}
.view .bingo-item:nth-child(3) .num {background:url('https://static.hankyung.com/resource/www/game/bingo/img/icon-num3.svg') no-repeat center/contain}
.view .bingo-item:nth-child(4) .num {background:url('https://static.hankyung.com/resource/www/game/bingo/img/icon-num4.svg') no-repeat center/contain}
.view .bingo-item:nth-child(5) .num {background:url('https://static.hankyung.com/resource/www/game/bingo/img/icon-num5.svg') no-repeat center/contain}
.view .bingo-item:nth-child(6) .num {background:url('https://static.hankyung.com/resource/www/game/bingo/img/icon-num6.svg') no-repeat center/contain}
.view .bingo-item:nth-child(7) .num {background:url('https://static.hankyung.com/resource/www/game/bingo/img/icon-num7.svg') no-repeat center/contain}
.view .bingo-item:nth-child(8) .num {background:url('https://static.hankyung.com/resource/www/game/bingo/img/icon-num8.svg') no-repeat center/contain}
.view .bingo-item:nth-child(9) .num {background:url('https://static.hankyung.com/resource/www/game/bingo/img/icon-num9.svg') no-repeat center/contain}
.view .bingo-item .quiz-info {width:100%; height:100%}
.view .bingo-item.active {border-color:#585858}
.view .bingo-item.active .num {filter:brightness(0)}
.view .bingo-item.correct {border:none; background-repeat:no-repeat; background-color:#006AE1; box-shadow:16px 16px 16px 0 rgba(255, 255, 255, 0.20) inset, -16px -16px 16px 0 rgba(0, 0, 0, 0.20) inset}
.view .bingo-item.correct .num {width:64px; height:55px; background-image:url('https://static.hankyung.com/resource/www/game/bingo/img/icon-catfoot.png?v=2') !important}
.view .bingo-item.incorrect {border:none; background-repeat:no-repeat; background-color:#CA3531; box-shadow:16px 16px 16px 0 rgba(255, 255, 255, 0.20) inset, -16px -16px 16px 0 rgba(0, 0, 0, 0.20) inset}
.view .bingo-item.incorrect .num {width:44px; height:44px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='45' height='44' fill='none'%3E%3Cpath fill='%23F8CDCD' d='M7.522 43.633c-.692 0-1.303-.244-1.833-.733-.489-.53-.733-1.14-.733-1.833 0-.652.183-1.223.55-1.711L19.622 22 5.628 4.767c-.367-.49-.55-1.06-.55-1.711 0-.774.244-1.406.733-1.895.53-.53 1.182-.794 1.956-.794.977 0 1.731.366 2.26 1.1l12.895 16.378 12.895-16.5c.448-.652 1.12-.978 2.016-.978.734 0 1.365.265 1.895.794.53.489.794 1.1.794 1.833 0 .57-.163 1.08-.489 1.528L25.917 21.94l14.116 17.355c.367.408.55.938.55 1.59a2.92 2.92 0 0 1-.733 1.955c-.489.53-1.161.794-2.017.794-.896 0-1.63-.387-2.2-1.16l-13.077-16.44-12.895 16.5c-.611.734-1.324 1.1-2.139 1.1Z'/%3E%3C/svg%3E") !important}

.bingo-cont .ready-txt {line-height:1.8; font-weight:700; font-size:min(max(20px, 2.54vw), 28px)}
.bingo-cont .ready-txt::after {content:''; display:inline-block; width:32px; height:32px; margin-left:8px; vertical-align:-4px; background:url('https://static.hankyung.com/resource/www/game/bingo/img/icon-foot.svg') no-repeat center/contain}
.bingo-cont > p {line-height:1.8; font-size:min(max(16px, 1.62vw), 18px); text-align:center}

.quiz-desc {position:relative; display:flex; flex-direction:column; gap:8px}
.quiz-desc .btn-area {display:flex; align-items:center; gap:8px}
.quiz-desc .btn-basic {height:36px; padding:10px 16px 10px 32px; border:1px solid #ccc; color:#121212; font-weight:700; font-size:12px; box-shadow:none}
.quiz-desc .btn-hint {background:url('https://static.hankyung.com/resource/www/game/quiz-economy-weekly/img/icon-hint-b.svg') no-repeat 12px center/16px 16px}
.quiz-desc .btn-news {background-repeat:no-repeat; background-size:16px 16px; background-position:12px center; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='16' fill='none'%3E%3Cpath stroke='%23121212' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M14.769 6.167h-4m4-3.5h-12m12 7.166h-4m4 3.5h-12m1.067-2.666h3.2c.373 0 .56 0 .702-.073a.666.666 0 0 0 .292-.291c.072-.143.072-.33.072-.703V6.4c0-.373 0-.56-.072-.703a.667.667 0 0 0-.292-.29c-.142-.074-.329-.074-.702-.074h-3.2c-.374 0-.56 0-.703.073a.667.667 0 0 0-.291.291c-.073.143-.073.33-.073.703v3.2c0 .373 0 .56.073.703a.666.666 0 0 0 .291.291c.143.073.33.073.703.073Z'/%3E%3C/svg%3E")}
.hint-box {display:none; position:relative; padding:16px 40px 16px 16px; border-radius:12px; line-height:1.8; font-weight:400; font-size:16px; background-color:#f5f5f5}
.hint-box .btn-close {position:absolute; top:16px; right:12px; width:22px; height:22px}
.hint-box .btn-close::before {content:''; display:inline-block; width:16px; height:16px; background-size:contain; 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")}
.hint-box.active {display:block}

.quiz-header .quiz-num {display:flex; align-items:center; color:#121212; font-weight:500; font-size:14px}
.quiz-header .quiz-num > .round {flex:0 0 auto; font-weight:500; font-size:14px}
.quiz-header .quiz-num > .round::after {content:''; display:inline-block; width:1px; height:14px; margin:0 8px; vertical-align:-2px; background-color:#ccc}
.quiz-header {display:flex; flex-direction:column; gap:8px}

.ing-progress .time-area {display:flex; align-items:center; gap:8px; margin-top:8px}
.ing-progress .time-area .txt {font-size:16px}
.ing-progress .time-area .sec {line-height:1; font-weight:700; color:#006AE1; font-size:24px}
.ing-progress .time-area .sec::before {content:''; display:inline-block; width:24px; height:24px; margin-right:4px; vertical-align:-2px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' fill='none'%3E%3Cpath stroke='%23006AE1' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M12.769 10v4l2.5 1.5m-2.5-10a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17Zm0 0v-3m-2 0h4m6.329 3.592-1.5-1.5.75.75m-15.908.75 1.5-1.5-.75.75'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-size:contain; background-position:center}
.ing-progress.fast .time-area .sec::before {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' fill='none'%3E%3Cpath stroke='%23CA3531' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M12.769 10v4l2.5 1.5m-2.5-10a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17Zm0 0v-3m-2 0h4m6.329 3.592-1.5-1.5.75.75m-15.908.75 1.5-1.5-.75.75'/%3E%3C/svg%3E");}
.ing-progress.fast .time-area .sec {color:#CA3531}
.ing-progress .progress-area {display:inline-flex; position:relative; width:100%; height:5px; border-radius:100px; overflow:hidden}
.ing-progress .progress-area::after {content:''; position:absolute; top:0; left:0; width:100%; height:5px; border-radius:100px; background-color:#ccc}
.ing-progress .progress-bar {flex:0 0 auto; height:5px; z-index:2; /*animation:showProgressGraph 30s ease-in-out 0s 1 normal forwards; transform-origin:left*/}
.ing-progress .progress-bar .bar {position:relative; z-index:1; width:100%; height:100%; border-radius:100px; background-color:#006AE1}
/* .ing-progress.fast .progress-bar {animation:showProgressGraph 10s ease-in-out 0s 1 normal forwards} */
.ing-progress.fast .progress-bar .bar {background-color:#CA3531}
.ing-progress.stop {margin-bottom:16px}
.ing-progress.stop .time-area .sec::before {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' fill='none'%3E%3Cpath stroke='%23585858' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M12.769 10v4l2.5 1.5m-2.5-10a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17Zm0 0v-3m-2 0h4m6.329 3.592-1.5-1.5.75.75m-15.908.75 1.5-1.5-.75.75'/%3E%3C/svg%3E");}
.ing-progress.stop .time-area .sec {color:#585858}
.ing-progress.stop .progress-bar .bar {background-color:#585858}

.showProgress {animation:showProgressGraph 30s ease-in-out 0s 1 normal forwards; transform-origin:left}
.showProgressFast {animation:showProgressGraph 10s ease-in-out 0s 1 normal forwards; transform-origin:left}
@keyframes showProgressGraph {
	0% {transform:scaleX(1)}
	100% {transform:scaleX(0)}
}

.quiz-questions {line-height:1.8; font-size:18px}
.quiz-questions::before {content:''; display:inline-block; width:16px; height:16px; margin-right:6px; vertical-align:middle; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='16' fill='none'%3E%3Cpath fill='%23121212' d='M13.564 14.758a1.095 1.095 0 0 1-1.522-.222L8.6 9.982a1.099 1.099 0 1 1 1.755-1.324l3.435 4.559c.367.487.266 1.18-.226 1.541Zm-4.795-1.16a6.37 6.37 0 0 1-2.502-.486 6.264 6.264 0 0 1-2.016-1.35 6.281 6.281 0 0 1-1.314-2.07C2.625 8.9 2.47 8.036 2.47 7.1c0-.936.156-1.8.468-2.592a6.081 6.081 0 0 1 1.314-2.052 6.125 6.125 0 0 1 2.016-1.368A6.37 6.37 0 0 1 8.77.602c.912 0 1.752.162 2.52.486a5.93 5.93 0 0 1 1.998 1.368 6.281 6.281 0 0 1 1.314 2.07c.312.78.468 1.638.468 2.574a6.96 6.96 0 0 1-.468 2.574 6.281 6.281 0 0 1-1.314 2.07 5.93 5.93 0 0 1-1.998 1.368c-.768.324-1.608.486-2.52.486Zm0-2.232c.576 0 1.098-.102 1.566-.306.48-.216.894-.516 1.242-.9.348-.396.618-.852.81-1.368.204-.516.306-1.08.306-1.692 0-.612-.102-1.176-.306-1.692a4.133 4.133 0 0 0-.81-1.35 3.41 3.41 0 0 0-1.242-.9 3.693 3.693 0 0 0-1.566-.324c-.564 0-1.086.108-1.566.324-.48.204-.894.498-1.242.882a4.133 4.133 0 0 0-.81 1.35 4.87 4.87 0 0 0-.288 1.71c0 .612.096 1.182.288 1.71.192.516.462.966.81 1.35.348.384.762.684 1.242.9.48.204 1.002.306 1.566.306Z'/%3E%3C/svg%3E")}
.quiz-answer {display:flex; align-items:center; gap:24px; width:100%}
.quiz-answer > .answer-item {flex:0 0 auto; display:flex; align-items:center; justify-content:center; width:calc(50% - 12px); height:260px; border-radius:40px; background-size:72px 72px; background-repeat:no-repeat; background-position:center; background-color:#f3f3f3}
.quiz-answer > .answer-item.correct {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='73' height='72' fill='none'%3E%3Cpath fill='%23999' d='M36.769 71.9c-7.133 0-13.3-1.533-18.5-4.6-5.2-3.067-9.233-7.3-12.1-12.7C3.302 49.2 1.802 43 1.669 36c.133-7 1.633-13.2 4.5-18.6 2.867-5.4 6.9-9.633 12.1-12.7 5.2-3.067 11.367-4.6 18.5-4.6 7.133 0 13.3 1.533 18.5 4.6 5.2 3.067 9.233 7.3 12.1 12.7 2.867 5.4 4.367 11.6 4.5 18.6-.133 7-1.633 13.2-4.5 18.6-2.867 5.4-6.9 9.633-12.1 12.7-5.2 3.067-11.367 4.6-18.5 4.6Zm0-8.5c5.533 0 10.233-1.2 14.1-3.6 3.867-2.467 6.8-5.767 8.8-9.9 2.067-4.133 3.1-8.767 3.1-13.9 0-5.133-1.033-9.767-3.1-13.9-2-4.133-4.933-7.4-8.8-9.8-3.867-2.467-8.567-3.7-14.1-3.7-5.533 0-10.233 1.233-14.1 3.7-3.867 2.4-6.833 5.667-8.9 9.8-2 4.133-3 8.767-3 13.9 0 5.133 1 9.767 3 13.9 2.067 4.133 5.033 7.433 8.9 9.9 3.867 2.4 8.567 3.6 14.1 3.6Z'/%3E%3C/svg%3E")}
/* .wrap.result .feedback-cont.correct .quiz-answer > .answer-item.correct:not(.on):hover,  */
.quiz-answer:not(.result) > .answer-item.correct:not(.on):hover, 
.quiz-answer > .answer-item.correct.on {background-color:#EDF4FC; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='73' height='72' fill='none'%3E%3Cpath fill='%23006AE1' d='M36.769 71.9c-7.133 0-13.3-1.533-18.5-4.6-5.2-3.067-9.233-7.3-12.1-12.7C3.302 49.2 1.802 43 1.669 36c.133-7 1.633-13.2 4.5-18.6 2.867-5.4 6.9-9.633 12.1-12.7 5.2-3.067 11.367-4.6 18.5-4.6 7.133 0 13.3 1.533 18.5 4.6 5.2 3.067 9.233 7.3 12.1 12.7 2.867 5.4 4.367 11.6 4.5 18.6-.133 7-1.633 13.2-4.5 18.6-2.867 5.4-6.9 9.633-12.1 12.7-5.2 3.067-11.367 4.6-18.5 4.6Zm0-8.5c5.533 0 10.233-1.2 14.1-3.6 3.867-2.467 6.8-5.767 8.8-9.9 2.067-4.133 3.1-8.767 3.1-13.9 0-5.133-1.033-9.767-3.1-13.9-2-4.133-4.933-7.4-8.8-9.8-3.867-2.467-8.567-3.7-14.1-3.7-5.533 0-10.233 1.233-14.1 3.7-3.867 2.4-6.833 5.667-8.9 9.8-2 4.133-3 8.767-3 13.9 0 5.133 1 9.767 3 13.9 2.067 4.133 5.033 7.433 8.9 9.9 3.867 2.4 8.567 3.6 14.1 3.6Z'/%3E%3C/svg%3E")}
.quiz-answer > .answer-item.incorrect {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='73' height='72' fill='none'%3E%3Cpath fill='%23999' d='M11.82 71.4c-1.134 0-2.134-.4-3-1.2-.8-.867-1.2-1.867-1.2-3 0-1.067.3-2 .9-2.8L31.62 36 8.72 7.8c-.6-.8-.9-1.733-.9-2.8 0-1.267.4-2.3 1.2-3.1.866-.867 1.933-1.3 3.2-1.3 1.6 0 2.832.6 3.7 1.8l21.1 26.8 21.1-27c.733-1.067 1.833-1.6 3.3-1.6 1.2 0 2.233.433 3.1 1.3.866.8 1.3 1.8 1.3 3 0 .933-.267 1.767-.8 2.5l-23.1 28.5 23.1 28.4c.6.667.9 1.533.9 2.6 0 1.2-.4 2.267-1.2 3.2-.8.867-1.9 1.3-3.3 1.3-1.468 0-2.668-.633-3.6-1.9l-21.4-26.9-21.1 27c-1 1.2-2.168 1.8-3.5 1.8Z'/%3E%3C/svg%3E")}
/* .wrap.result .feedback-cont.correct .quiz-answer > .answer-item.incorrect:hover,  */
.quiz-answer:not(.result) > .answer-item.incorrect:hover, 
.quiz-answer > .answer-item.incorrect.on {background-color:#FAEEEE; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='73' height='72' fill='none'%3E%3Cpath fill='%23CA3531' d='M11.82 71.4c-1.134 0-2.134-.4-3-1.2-.8-.867-1.2-1.867-1.2-3 0-1.067.3-2 .9-2.8L31.62 36 8.72 7.8c-.6-.8-.9-1.733-.9-2.8 0-1.267.4-2.3 1.2-3.1.866-.867 1.933-1.3 3.2-1.3 1.6 0 2.832.6 3.7 1.8l21.1 26.8 21.1-27c.733-1.067 1.833-1.6 3.3-1.6 1.2 0 2.233.433 3.1 1.3.866.8 1.3 1.8 1.3 3 0 .933-.267 1.767-.8 2.5l-23.1 28.5 23.1 28.4c.6.667.9 1.533.9 2.6 0 1.2-.4 2.267-1.2 3.2-.8.867-1.9 1.3-3.3 1.3-1.468 0-2.668-.633-3.6-1.9l-21.4-26.9-21.1 27c-1 1.2-2.168 1.8-3.5 1.8Z'/%3E%3C/svg%3E")}
.quiz-answer.result > .answer-item {cursor:default}

.bingo-cont.feedback-cont {align-items:flex-start}
.bingo-cont.feedback-cont > p {text-align:left}
.feedback-cont .feedback-tit {font-weight:700; font-size:24px}
.feedback-tit::before {content:''; display:inline-block; width:24px; height:24px; margin-right:6px; vertical-align:-2px; background-repeat:no-repeat; background-size:contain; background-position:center}
.correct .feedback-tit {color:#006AE1}
.feedback-cont.correct .feedback-tit::before, .correct .feedback-tit.double::before, .result-area.correct .feedback-tit::after {background-image:url('https://static.hankyung.com/resource/www/game/quiz-economy-weekly/img/icon-correct.svg')}
.incorrect .feedback-tit {color:#CA3531}
.feedback-cont.incorrect .feedback-tit::before, .result-area.incorrect .feedback-tit::after {background-image:url('https://static.hankyung.com/resource/www/game/quiz-economy-weekly/img/icon-incorrect.svg')}
.feedback-cont .btn-basic {width:100%; height:48px; padding:8px 16px; border-radius:8px; color:#fff; font-size:16px; background-color:#121212}
.feedback-cont.incorrect .answer-item {cursor:default}

.last-feedback {display:flex; flex-direction:column; width:100%; padding:24px 0; gap:16px; margin-top:32px; opacity:0; animation:fade-in-container 0.2s ease-out 0.3s forwards}
.last-feedback::before {content:''; display:block; width:100%; height:2px; background-color:#121212; transform:scaleX(0); transform-origin:left; animation:line-grow .3s .5s ease-out forwards}
.last-feedback .result-msg {font-size:min(max(16px, 1.62vw), 18px); line-height:1.8; text-align:center; opacity:0; transform:translateY(8px); animation:text-fade-up 0.2s ease-out .4s forwards}
.last-feedback .btn-basic {opacity:0; transform:translateY(8px); animation:text-fade-up 0.3s ease-out .4s forwards}
@keyframes line-grow {
  from { transform:scaleX(0); opacity:0; }
  to { transform:scaleX(1); opacity:1; }
}
@keyframes text-fade-up {
  from { opacity:0; transform:translateY(8px); }
  to { opacity:1; transform:translateY(0); }
}
@keyframes fade-in-container {
  to { opacity:1; }
}

.layer-pop.end-pop {display:block; opacity:0; border-radius:40px; border:1px solid #E0E3E7; background:rgba(255, 255, 255, 0.90); backdrop-filter:blur(5px); animation:fade-in-container 0.2s ease-out 0.3s forwards}
.layer-pop.end-pop.active {position:absolute}
.layer-pop.end-pop .last-feedback::before, 
.layer-pop.end-pop .last-feedback .result-msg, 
.layer-pop.end-pop .last-feedback .btn-basic {animation:none; opacity:1}
.layer-pop.end-pop .last-feedback {margin:0 40px; padding:0; animation:text-fade-up 0.3s ease-out .4s forwards}
.layer-pop.end-pop .last-feedback::before {display:none}
.layer-pop.end-pop .result-msg {color:#121212; font-weight:700; font-size:16px}
.layer-pop.end-pop .result-msg > strong {display:block; margin-bottom:4px; font-size:32px}
.layer-pop.end-pop .result-msg .correct {color:#006AE1}
.layer-pop.end-pop .result-msg .incorrect {color:#CA3531}
.layer-pop.end-pop .btn-basic {margin-top:20px; height:48px; border-radius:8px; font-size:16px; color:#fff; background-color:#121212}

/* 퀴즈 결과 */
.result-cont {display:block; max-width:580px; width:100%}
.result-area {width:100%; text-align:center}
.result-area .btn-area {display:flex; align-items:center; justify-content:center; gap:8px; margin-top:16px}
.result-area .btn-basic {padding:0 20px; border:1px solid #585858; color:#121212; font-size:14px; box-shadow:none}
.result-area .info-area {font-size:16px}
.result-area .feedback-tit {display:block; line-height:1.8; font-size:32px}
.result-area .feedback-txt {line-height:1.8; font-size:16px}
.result-area.incorrect .feedback-tit::after,
.result-area.correct .feedback-tit::after, .correct .feedback-tit.double::before {content:''; display:inline-block; width:32px; height:32px; margin-left:6px; vertical-align:-3px; background-repeat:no-repeat; background-size:contain; background-position:center}
.correct .feedback-tit.double::before {margin-left:0; margin-right:8px}

.result-list {display:flex; align-items:center; width:100%; margin-top:24px; padding:20px 24px 24px 20px; border-radius:24px; border:1px solid #E0E3E7; box-sizing:border-box; box-shadow:-16px -16px 16px 0 rgba(97, 117, 139, 0.08) inset}
.result-list li {width:25%; padding:0 6px; text-align:center;}
.result-list li + li {border-left:1px solid #ddd}
.result-list .tit, .result-list .txt {display:block}
.result-list .tit {margin-bottom:8px; font-size:14px}
.result-list .txt {font-size:20px}

.answer-list {margin-top:40px}
.answer-list .answer-item + .answer-item {margin-top:40px}
.answer-list .answer-tit {display:flex; line-height:1.8; font-size:18px}
.answer-list .answer-tit::before {content:''; flex:0 0 auto; width:12px; margin-right:6px; margin-top:4px; font-family:'Helvetica Neue', sans-serif; font-weight:700; font-size:14px}
.answer-list .answer-item:first-child .answer-tit::before {content:'1'}
.answer-list .answer-item:nth-child(2) .answer-tit::before {content:'2'}
.answer-list .answer-item:nth-child(3) .answer-tit::before {content:'3'}
.answer-list .answer-item:nth-child(4) .answer-tit::before {content:'4'}
.answer-list .answer-item:nth-child(5) .answer-tit::before {content:'5'}
.answer-list .answer-tit + .myanswer {margin-top:8px}
.answer-list .myanswer {display:flex; align-items:center; padding-left:20px}
.answer-list .myanswer .tit {color:#585858}
.answer-list .myanswer .txt {display:inline-flex; align-items:center; font-weight:700}
.answer-list .myanswer .txt::before {content:''; flex:0 0 auto; width:1px; height:14px; margin:0 8px; background-color:#ccc}
.answer-list .myanswer > span {font-size:14px}
.answer-list .myanswer .answer-x {color:#CA3531}
.answer-list .myanswer .answer-o {color:#006AE1}
.answer-list .myanswer .answer-timeout {color:#121212}
.answer-list .answer-top {display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.answer-list .answer-top .btn-basic {min-width:77px; height:29px; border:1px solid #ccc; font-weight:700; font-size:12px; background:transparent; box-shadow:none}
.answer-list .answer-box .desc {line-height:1.8; font-size:16px}
.answer-list .answer-item .answer {display:flex; align-items:center; justify-content:center; height:25px; padding:0 8px; border-radius:4px; font-weight:700; color:#fff; font-size:12px; box-sizing:border-box}
.answer-list .correct .answer {background-color:#006AE1}
.answer-list .incorrect .answer {background-color:#CA3531}
.answer-list .timeout .answer {background-color:#121212}
.answer-list .answer-box {margin-top:12px; padding:20px; border-radius:12px; box-sizing:border-box; background-color:#f5f5f5}

/* 레이어팝업 */
.layer-pop .btn-close {position:absolute; top:12px; right:12px; 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:24px; border-radius:8px; border:1px solid #121212; box-sizing:border-box; background-color:#fff}
.layer-pop.review-pop .pop-inner {width:420px; text-align:center}
.layer-pop.review-pop .main-txt {font-weight:700; font-size:18px}
.layer-pop.review-pop .main-txt::before {content:''; display:block; width:64px; height:64px; margin:0 auto 16px; padding:5px 0; background:url('https://static.hankyung.com/resource/www/game/bingo/img/icon-ad.png') no-repeat center/contain}
.layer-pop.review-pop .sub-txt {margin-top:4px; font-weight:400; font-size:14px}
.layer-pop.review-pop .btn-basic.type-black {display:flex; align-items:center; gap:7px}
.layer-pop.review-pop .btn-basic.type-black .num {letter-spacing: 0;}
.layer-pop .btn-basic.type-black {width:100%; border-radius:100px; font-size:14px}
.layer-pop .btn-area {margin-top:24px}

.loading-area {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.10)*/ background:linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .95) 25%); backdrop-filter:blur(4px)}
.loading-area .loading-inner {display:flex; align-items:center; justify-content:center; width:100%; height:100%}
.loading-area img {width:140px; height:140px}

@media screen and (min-width:1101px) and (max-width:1440px) {
  .col-wrap, .footer {max-width:100%; min-width:auto}
  .col-wrap {gap:20px; max-width:1200px; margin:0 auto; padding:0px 40px 20px}
  /* .content {width:auto} */
  .bingo-wrap {padding:20px 16px 40px}
  .intro-video {padding:0 20px 20px}
  .intro-video .btn-basic {left:40px}
  .video-control {right:40px}
  .view {padding:0 16px}
  
  /* .bingo-control {padding-left:0} */
  .main .bingo-wrap.slide-type {margin-right:-62px; padding:0}
  .bingo-slide .slick-slide {width:auto !important}
 
 
}
@media screen and (min-width:1101px) and (max-width:1200px) {
  .bingo-control {padding-left:8%}
  .bingo-slide .bingo-list {width:608px}
}

/* 모바일 */
@media screen and (max-width:1100px) {
  .main .footer {padding:16px 0 75px}
  .wrap.main {background:linear-gradient(167deg, #EEF6FF 0%, #D5E9FF 100%)}
  .intro-video, .intro-video video {display:none}
  .col-wrap {display:block; max-width:100%; min-width:auto; padding:24px 16px}
  br.is-mo {display:block}
  br.is-pc {display:none}
  .footer {width:auto; padding:0 0 100px; margin:0 20px; border-top:none}
  .footer .desc-txt {display:block; margin:8px 0 12px; color:#707070; font-size:11px}
  .main .footer {padding-top:0; border-top:none}
  .main .logo-top-area {z-index:3; position:fixed; top:0; left:0; right:0; display:flex; align-items:center; justify-content:center; height:48px; background-color:#121212}
  .logo-top-area + .col-wrap {padding:72px 16px 100px}
  .logo-area .logo-hk {margin-bottom:0}
  .user-wrap {width:100%; margin-bottom:32px; transform:none}
  .user-wrap.sticky {position:fixed; top:0; left:0; padding:20px 20px 0; background:#fff; z-index:2}
  .logo-top-area + .user-wrap.sticky {top:48px}
  .user-wrap.sticky .logo-area {display:none}
  .user-wrap .logo {display:flex; flex-direction:column; gap:8px}
  .user-wrap .logo-quiz-area .logo-quiz {width:123px; height:36px}
  .fixed-area {z-index:9; position:fixed; left:0; bottom:0; width:100%; height:60px; border-radius:20px 20px 0 0; overflow:hidden; background-color:#fff; box-shadow:0px -4px 16px 0px rgba(0, 0, 0, 0.15); transition:all .3s}
  .fixed-area.active {height:100dvh; padding-bottom:56px; border-radius:0; box-shadow:none; overflow-y:auto}
  .user-wrap .ranking-box {display:flex; flex-direction:column; margin-top:0; border:none; border-radius:0; box-shadow:none}
  .fixed-area.active .ranking-box .tab-menu::after {transform:rotate(180deg)}
  .fixed-area .btn-list {opacity:0; position:fixed; bottom:24px; left:50%; border:1px solid #006AE1; color:#006AE1; transform:translateX(-50%); transition:opacity .5s}
  .fixed-area.active .btn-list {opacity:1; visibility:visible}
  /* .fixed-area .mo-layout {position:sticky; top:0; left:0; right:0; background-color:#fff} */
  .user-wrap .ranking-box.no-data::before {top:66px; left:16px; width:calc(100% - 32px); /*height:342px*/}
  .intro-video .btn-basic {left:16px}
  .tbl-rank {display:flex; flex-direction:column; max-height:100%; height:100%; border-top:none}
  .tbl-rank .col.num {width:24px}
  .tbl-rank .col.score {width:60px}
  .tbl-rank .col.name {width:calc(100% - 84px)}
  .tbl-rank .scroll-box {max-height:316px}
  .ranking-box .tbl-body {display:flex; flex-direction:column; height:calc(100% - 15px)}
  .ranking-box .rank-info-txt {width:100%}
  .ranking-box .tab-menu {display:flex; gap:8px; align-items:center; justify-content:space-between; margin-bottom:20px}
  .ranking-box .tab-menu::after {content:''; display:block; flex:0 0 auto; width:24px; height:24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m18 15-6-6-6 6'/%3E%3C/svg%3E")}
  .fixed-area.active .ranking-box .tab-menu::after {transform:rotate(180deg)}
  .ranking-box .rank-info .btn-basic {display:none}

  .tbl-rank.active {max-height:100%; overflow:auto}
  .tbl-rank + .btn-area {display:block}
  
  .content {width:100%}
  .bingo-wrap {padding:0}
  .bingo-list {gap:6px; width:100%; max-width:96vw; height:96vw; border-radius:28px; padding:8px}
  .bingo-item {width:31%; height:32%; flex: 1 1 calc(33.333% - 4px); aspect-ratio: 1 / 1; border-radius:20px}
  .bingo-item .badge.complete {display:none}
  .bingo-item .badge.new {width:18px; height:18px}
  .bingo-item .badge.new::before {content:'N'; line-height:1; font-size:10px}
  .bingo-item .quiz-head {gap:3px}
  .bingo-item .quiz-title, .main .bingo-item.complete .quiz-title {font-size:14px}
  .bingo-item .quiz-title {font-weight:600}
  .bingo-item .quiz-info {gap:4px; pointer-events:none; user-select:none}
  .bingo-item .date {font-size:12px}
  .bingo-item .hover-area {opacity:0; visibility:visible}
  .bingo-item .hover-area .hover-txt {font-weight:600; font-size:14px}
  .bingo-item .hover-area .hover-txt::after {width:16px; height:16px}
  
  .bingo-item:focus .hover-area {opacity:1; visibility:visible}
  .main .bingo-item:focus .quiz-info {display:none}
  .main .bingo-item:not(.coming) {cursor:pointer}
  

  .main .bingo-item.complete {background:linear-gradient(180deg, #C1E1FF 0%, #319BFF 100%);}
  .main .bingo-item.complete .quiz-info {gap:10px}
  .main .bingo-item.complete .quiz-info::after {width:42px; height:36px}
  .main .bingo-item.ready {background-size:28px 48px}



  /* .main .bingo-wrap.slide-type {margin:0 -16px} */
  .main .bingo-wrap.slide-type {height:100%; margin:0 -16px}
  .main .bingo-wrap.slide-type .slide-title {width:108px; height:18px}
  .bingo-slide {padding:0 16px}
  .bingo-slide .slick-slide {margin:0}
  .bingo-slide .slick-list {padding:0 0 116% !important}
  .bingo-control {gap:32px; margin-bottom:16px; padding-left:0}
  .bingo-control .btn-arrow {width:32px; height:32px}



  .point-txt::before {bottom:-4px}
  .view .bingo-wrap {gap:6px; width:100%; max-width:96vw; height:96vw; border-radius:28px; padding:0}
  .view .bingo-cont {width:100%; gap:12px}
  .view .top-info .btn-replay {padding:8px 16px; height:32px; font-size:12px}
  .btn-replay::before {width:16px; height:16px}
  .cont-head {padding:0 16px; border-bottom:1px solid #ccc}
  .cont-body {flex-direction:column-reverse; gap:32px; padding:20px 16px 40px}
  .bingo-cont > p {font-size:16px}
  .bingo-cont .ready-txt::after {width:24px; height:24px; vertical-align:-2px;}
  .view .bingo-wrap {gap:8px; max-width:100%; height:100%}
  .view .logo-quiz-area {min-height:46px; padding:4px 0}
  .view .bingo-item {flex:1 1 calc(33.333% - 6px)}
  .view .bingo-item:not(.correct, .incorrect) .num {width:24px !important; height:24px !important}
  .view .bingo-item:not(.correct, .incorrect) .num {filter:brightness(0.6)}
  .view .bingo-item.correct .num {width:55px; height:48px}
  .view .bingo-item.incorrect .num {width:36px; height:36px}
  .top-info {display:flex; justify-content:space-between; align-items:center; width:100%; padding-bottom:12px}
  .score-progress, .top-info .btn-area {position:relative; top:auto; left:auto; right:auto}
  .score-progress {font-size:12px}
  .score-progress .score-list li {width:6px; height:10px}
  .ing-progress .time-area {justify-content:space-between}
  .ing-progress .time-area .txt {font-size:14px}
  .quiz-answer {gap:16px}
  .quiz-answer > .answer-item {width:calc(50% - 8px); height:auto; flex: 1 1 calc(50% - 8px); aspect-ratio:1 / 1; background-size:56px 56px}
  .feedback-cont .feedback-tit {font-size:20px}
  .result-area .feedback-tit {font-size:24px}
  .result-list {position:relative; flex-wrap:wrap}
  .result-list li {width:50%}
  .result-list li:nth-child(3) {border-left:none}
  .result-list li:first-child, .result-list li:nth-child(2) {border-bottom:1px solid #ddd; padding-bottom:20px}
  .result-list li:nth-child(3), .result-list li:nth-child(4) {padding-top:20px}
  .layer-pop.review-pop .pop-inner {margin:0 16px}

  .newsletter-box {margin:0 16px; padding:12px; border-radius:8px; background-color:#F3F6FA; box-sizing:border-box}
  .newsletter-box::before {width:32px; height:32px}
  .newsletter-box > p {width:calc(100% - 40px); font-size:12px}
  .newsletter-box > p::after {width:16px; height:16px}
  .fixed-area .desc-txt {margin:20px 16px 0; font-size:11px}
  .layer-pop.end-pop {border-radius:20px}
  .layer-pop.end-pop .result-msg > strong {font-size:24px}
}
@media screen and (max-width:720px) {
  .wrap.main {height:100dvh}
  body, button, input, select, option, textarea {font-family:HelveticaNeue, AppleSDGothicNeo-Regular, sans-serif; letter-spacing:normal}
  .user-wrap .ranking-box.no-data::before {top:61px}
  .loading-area img {width:110px; height:110px}
  .bingo-item.early .quiz-head {flex-direction:column}
  .bingo-item .badge.early {padding:2px 5px; font-size:11px}
  .bingo-item .badge.coming {width:16px; height:16px; margin-top:-2px}
}

@media screen and (max-width:345px) {
  br.is-mo {display:none}
  .logo-quiz-area {gap:8px}

}
@media screen and (max-width:320px) {
  .btn-replay::before, .btn-home::before {display:none}
}

/* PC */
@media screen and (min-width:1101px) {
  .wrap.main {padding-top:20px}
  .tbl-rank .myscore-area {min-height:40px}
  .tbl-rank .tbl-body {--scrollbox-height:288px; --myscore-height:40px; height:calc(var(--scrollbox-height) + var(--myscore-height))}
  
  .bingo-item:not(.coming, .early):hover .hover-area {opacity:1; visibility:visible}
  .main .bingo-item:not(.coming, .early):hover .quiz-info {opacity:0; visibility:hidden}

  .view .bingo-item:not(.coming, .early).hover {border-color:#585858}
}

@media screen and (min-width:1920px) {
  .footer {max-width:1520px}
  .col-wrap {max-width:1520px; padding:0}
  .content {width:calc(100% - 460px)}
  .intro-video {max-width:1560px}
  .btn-basic {min-width:106px; height:35px; font-size:14px}
  .box-type {padding:20px 20px 24px}

  .logo-area .logo-hk {width:45px; height:24px; margin-bottom:15px}
  .logo-area .desc {font-size:16px}
  .user-wrap {width:380px}
  .user-wrap .logo-quiz-area .logo-quiz {width:164px; height:48px}
  .main .logo-quiz-area {gap:16px}
  .main .logo-quiz-area .logo-txt {font-size:38px}
  .ranking-box .tab-menu li button {padding-bottom:10px; font-size:16px}
  .ranking-box .tab-menu li.on {border-width:3px}
  .ranking-box .tab-menu li.on button {padding-bottom:7px}
  .tbl-rank .myscore-area {min-height:42px}
  .tbl-rank .tbl-body {--scrollbox-height:420px; --myscore-height:42px;}
  .tbl-rank .scroll-box {max-height:420px}
  .user-wrap .ranking-box.no-data::before {top:68px; height:calc(100% - 82px)}
  
  .ranking-box .rank-info {margin-top:8px; font-size:14px}
  .main .box-type {padding:16px}
  .tbl-rank th {font-size:14px}
  .tbl-rank td {padding:12px 0; font-size:16px}
  /* .ranking-box .rank-info-txt {width:calc(100% - 144px)} */
  .tbl-rank .col.num {width:10%}
  .tbl-rank .tbl-head .col {font-size:14px}
  .tbl-rank .tbl-body .col {font-size:16px}
  .tbl-rank .col.name {width:69%}
  .intro-video .btn-basic {left:20px}
  .bingo-wrap {padding:20px 0 80px 0}
  .bingo-list {width:920px; height:920px}
  .bingo-item .badge {line-height:1.5}
  .bingo-item .quiz-title {font-size:24px}
  .bingo-item .date {font-size:16px}
  .bingo-item .hover-area .hover-txt {font-size:20px}
  .main .bingo-item.complete .quiz-info {gap:24px}
  .main .bingo-item.complete .quiz-title {font-size:20px}
  .main .bingo-item.complete .quiz-info::after {width:92px; height:80px}

  .bingo-control {gap:80px; height:40px; padding-left:95px; box-sizing:border-box}
  .bingo-control .slide-arrow {width:40px; height:40px}
  .main .bingo-wrap.slide-type {height:1100px}
  .main .bingo-wrap.slide-type .slide-title {width:168px; height:28px}
  
}
@media screen and (min-width:1100px) and (max-width:1440px) and (max-height:750px) {
  .wrap.main {height:100%}
}
/* OS dark mode */
/* @media (prefers-color-scheme: dark) {
  @media screen and (max-width:1100px) {
    body, .footer,
    .tbl-rank .col, .tbl-rank .tbl-body .col.name,
    .result-area .btn-basic,
    .answer-list .myanswer .answer-timeout,
    .logo-quiz-area .logo-txt,
    .ranking-box .tab-menu li button, .tbl-rank + .btn-area .btn-more,
    .bingo-item.ing .hover-area .hover-txt,
    .bingo-item .hover-area .hover-txt,
    .quiz-header .quiz-num {color:#fff}
    .wrap.main {background: linear-gradient(167deg, #003572 0%, #002145 100%)}
    .box-type,
    .wrap.view, body {background-color:#000}
    .bg-box, .hint-box,
    .answer-list .answer-box {background-color:#1c1c1e}
    .bingo-list {background-color:#00142B; box-shadow: 8px 8px 8px 0 #001C3B inset, 4px 4px 15px 0 rgba(0, 0, 0, 0.15), 8px 15px 40px 0 rgba(0, 0, 0, 0.20), -8px -8px 8px 0 #000 inset}
    .main .bingo-item.ready {background:#102741 url('https://static.hankyung.com/resource/www/game/bingo/img/icon-ready-dark.svg') no-repeat center/28px 48px} 
    .main .bingo-item.ing {border:none; background-color:#365578; box-shadow:16px 16px 16px 0 rgba(255, 255, 255, 0.10) inset, -16px -16px 16px 0 rgba(0, 0, 0, 0.20) inset}
    .main .bingo-item.complete {background:#004CA1; box-shadow:16px 16px 16px 0 rgba(255, 255, 255, 0.10) inset, -16px -16px 16px 0 rgba(0, 0, 0, 0.20) inset}
    .cont-head.sticky, .tbl-rank .myscore-area {border-color:#323235}
    .user-wrap.sticky {background-color:#121212}
    .ranking-box .rank-info-txt .rank-desc {color:#bdbdbd}

    .color-red,
    .ing-progress.fast .time-area .sec,
    .incorrect .feedback-tit,
    .answer-list .myanswer .answer-x {color:#E0443F}
    .color-blue, .point-txt,
    .tbl-rank .myscore-area .col, .tbl-rank .myscore-area .col.name,
    .fixed-area.active .btn-list,
    .ing-progress .time-area .sec,
    .correct .feedback-tit,
    .answer-list .myanswer .answer-o {color:#3594FF}
    .fixed-area.active .btn-list {border-color:#3594FF; background-color:#000}
    .footer .desc-txt {color:#98ACC2}

    .user-wrap.sticky {background-color:#121212}
    .fixed-area, .fixed-area .mo-layout {background-color:#000}
    .footer .desc-txt,
    .answer-list .myanswer .tit,
    .result-list .tit {color:#bdbdbd}
    .ing-progress .progress-area::after,
    .quiz-answer > .answer-item,
    .feedback-cont .btn-basic,
    .layer-pop .pop-inner,
    .scroll-box::-webkit-scrollbar-track {background-color:#323235}

    .logo-area .logo-hk {background:url('https://static.hankyung.com/resource/common/img/logo/logo-hk-short-w.svg') no-repeat center/contain}
    .logo-area .logo-hk img, .logo-quiz img {display:none}
    .logo-top-area .logo-quiz, .user-wrap .logo-quiz {background:url('https://static.hankyung.com/resource/www/game/quiz-economy-weekly/img/logo-aliceq-w.svg?v=20250701') no-repeat center/contain}
    .btn-basic {border-color:#555; color:#fff; background-color:#1c1c1e}
    
    .ranking-box .tab-menu li.on {border-color:#fff}
    .cont-head, .tbl-rank {border-color:#323235}
    .fixed-area .mo-layout, 
    .score-progress .score-list,
    .result-list li:first-child, .result-list li:nth-child(2),
    .result-list li + li {border-color:#555}
    .score-progress .score-list li.on,
    .ing-progress .progress-bar .bar {background-color:#3594FF}
    .ing-progress.fast .progress-bar .bar {background-color:#E0443F}
    .point-txt::before {background-color:#00244B}

    .view .bingo-item {border-color:#323235; background:#323235; box-shadow:-16px -16px 16px 0 rgba(0, 0, 0, 0.20) inset}
    .view .bingo-item:not(.correct, .incorrect) .num {filter:brightness(1)}
    .view .bingo-item:first-child .num {background-image:url('https://static.hankyung.com/resource/www/game/bingo/img/icon-num1-w.svg')}
    .view .bingo-item:nth-child(2) .num {background-image:url('https://static.hankyung.com/resource/www/game/bingo/img/icon-num2-w.svg')}
    .view .bingo-item:nth-child(3) .num {background-image:url('https://static.hankyung.com/resource/www/game/bingo/img/icon-num3-w.svg')}
    .view .bingo-item:nth-child(4) .num {background-image:url('https://static.hankyung.com/resource/www/game/bingo/img/icon-num4-w.svg')}
    .view .bingo-item:nth-child(5) .num {background-image:url('https://static.hankyung.com/resource/www/game/bingo/img/icon-num5-w.svg')}
    .view .bingo-item:nth-child(6) .num {background-image:url('https://static.hankyung.com/resource/www/game/bingo/img/icon-num6-w.svg')}
    .view .bingo-item:nth-child(7) .num {background-image:url('https://static.hankyung.com/resource/www/game/bingo/img/icon-num7-w.svg')}
    .view .bingo-item:nth-child(8) .num {background-image:url('https://static.hankyung.com/resource/www/game/bingo/img/icon-num8-w.svg')}
    .view .bingo-item:nth-child(9) .num {background-image:url('https://static.hankyung.com/resource/www/game/bingo/img/icon-num9-w.svg')}
    .ing-progress .time-area .sec::before {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='25' fill='none'%3E%3Cpath stroke='%233594FF' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M12 10v4l2.5 1.5M12 5.5a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17Zm0 0v-3m-2 0h4m6.329 3.592-1.5-1.5.75.75m-15.908.75 1.5-1.5-.75.75'/%3E%3C/svg%3E");}
    .ing-progress.fast .time-area .sec::before {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25' height='25' fill='none'%3E%3Cpath stroke='%23E0443F' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M12.769 10v4l2.5 1.5m-2.5-10a8.5 8.5 0 1 0 0 17 8.5 8.5 0 0 0 0-17Zm0 0v-3m-2 0h4m6.329 3.592-1.5-1.5.75.75m-15.908.75 1.5-1.5-.75.75'/%3E%3C/svg%3E");}
    .quiz-answer > .answer-item.correct:hover, 
    .quiz-answer > .answer-item.correct.on {background-color:#002043; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' fill='none'%3E%3Cpath fill='%233594FF' d='M28 55.922c-5.548 0-10.344-1.192-14.389-3.578-4.044-2.385-7.181-5.677-9.41-9.877C1.97 38.267.803 33.444.7 28c.103-5.445 1.27-10.267 3.5-14.467 2.229-4.2 5.366-7.492 9.41-9.877C17.656 1.27 22.452.078 28.001.078c5.547 0 10.344 1.192 14.388 3.578 4.044 2.385 7.182 5.677 9.411 9.877 2.23 4.2 3.397 9.022 3.5 14.467-.103 5.444-1.27 10.267-3.5 14.467-2.23 4.2-5.366 7.492-9.41 9.877-4.045 2.386-8.842 3.578-14.39 3.578Zm0-6.61c4.304 0 7.96-.934 10.967-2.8 3.007-1.92 5.289-4.486 6.844-7.7 1.608-3.216 2.411-6.82 2.411-10.812 0-3.993-.803-7.596-2.41-10.811-1.556-3.215-3.838-5.756-6.845-7.622C35.959 7.648 32.304 6.689 28 6.689c-4.303 0-7.96.96-10.966 2.878-3.008 1.866-5.315 4.407-6.923 7.622C8.556 20.404 7.778 24.007 7.778 28c0 3.993.778 7.596 2.333 10.811 1.608 3.215 3.915 5.782 6.922 7.7 3.008 1.867 6.663 2.8 10.967 2.8Z'/%3E%3C/svg%3E")}
    .quiz-answer > .answer-item.incorrect:hover, 
    .quiz-answer > .answer-item.incorrect.on {background-color:#320E0E; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' fill='none'%3E%3Cpath fill='%23E0443F' d='M8.595 55.533c-.882 0-1.66-.31-2.334-.933-.622-.674-.933-1.452-.933-2.333 0-.83.233-1.556.7-2.178L23.995 28 6.184 6.067c-.467-.623-.7-1.348-.7-2.178 0-.985.31-1.789.933-2.411C7.091.804 7.921.467 8.906.467c1.244 0 2.204.466 2.878 1.4l16.41 20.844 16.412-21c.57-.83 1.426-1.244 2.567-1.244.933 0 1.737.337 2.41 1.01.675.623 1.012 1.4 1.012 2.334 0 .726-.208 1.374-.622 1.945L32.006 27.922l17.967 22.09c.466.518.7 1.192.7 2.021 0 .934-.312 1.763-.934 2.49-.622.673-1.477 1.01-2.566 1.01-1.141 0-2.075-.492-2.8-1.477L27.728 33.133l-16.411 21c-.778.934-1.685 1.4-2.722 1.4Z'/%3E%3C/svg%3E")}
    .quiz-desc .btn-basic {border:1px solid rgba(204, 204, 204, 0.00); background-color:#ddd; filter:invert(1)}
    
    .result-list {border:none; background-color:#323235; box-shadow: -16px -16px 16px 0 rgba(0, 0, 0, 0.20) inset;}
    .answer-list .myanswer .txt::before {background-color:#555}
    .answer-list .answer-top .btn-basic {border:none; background-color:#323235}
    
    .ranking-box .tab-menu::after,
    .btn-replay::before, .btn-home::before,
    .bingo-cont .ready-txt::after,
    .quiz-questions::before,
    .layer-pop .btn-close::before, .hint-box .btn-close::before,
    .bingo-item .hover-area .hover-txt::after {filter:invert(1)}
    .bingo-item.ing .hover-area .hover-txt::after {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='21' fill='none'%3E%3Cpath stroke='%23121212' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m7.5 15.5 5-5-5-5'/%3E%3C/svg%3E"); filter:invert(1)}

    .loading-area {background:linear-gradient(180deg, rgba(0, 0, 0, .5) 0%, rgba(0, 0, 0, .95) 25%)}
    .btn-replay.hold {border:1px solid rgba(204, 204, 204, 0.00); background-color:#1c1c1e}
    .ing-progress.stop .progress-bar .bar {background-color:#bdbdbd}
    .ing-progress.stop .time-area .sec, .main .bingo-item.coming .date {color:#bdbdbd}
    .ing-progress.stop .time-area .sec::before {filter:brightness(2)}

    .main .bingo-item.early {background-color:#202832}
    .main .bingo-item.coming {background-color:#102741}
    .bingo-item .badge.coming {background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' fill='none'%3E%3Cpath stroke='%23BDBDBD' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.2' d='M11.552 7.062V5.728a3.333 3.333 0 0 0-6.666 0v1.334m3.333 3v1.333m-2.133 3h4.266c1.12 0 1.68 0 2.108-.218a2 2 0 0 0 .874-.874c.218-.428.218-.988.218-2.108v-.933c0-1.12 0-1.68-.218-2.108a2 2 0 0 0-.874-.874c-.427-.218-.988-.218-2.108-.218H6.086c-1.12 0-1.68 0-2.108.218a2 2 0 0 0-.874.874c-.218.428-.218.988-.218 2.108v.933c0 1.12 0 1.68.218 2.108a2 2 0 0 0 .874.874c.428.218.988.218 2.108.218Z'/%3E%3C/svg%3E")}
    .bingo-control .btn-prev {background-image:url('https://static.hankyung.com/resource/www/game/bingo/img/icon-arrow-left-d.svg')}
    .bingo-control .btn-next {background-image:url('https://static.hankyung.com/resource/www/game/bingo/img/icon-arrow-right-d.svg')}
    .main .bingo-wrap.slide-type .slide-title {background-image:url('https://static.hankyung.com/resource/www/game/bingo/img/img-round1-d.svg')}
    .main .bingo-wrap.slide-type .slide-title.tit2 {background-image:url('https://static.hankyung.com/resource/www/game/bingo/img/img-round2-d.svg')}
    .main .bingo-wrap.slide-type .slide-title.tit3 {background-image:url('https://static.hankyung.com/resource/www/game/bingo/img/img-round3-d.svg')}
  }
} */


/*===== [2025.09.01] 앱용 화면 only =====*/
@media screen and (max-width: 1100px) {
    [data-env="app"]:has(.wrap.main) {background: #D5E9FF}
    [data-env="app"] .wrap.main {--app-header:60px; min-height:calc(100dvh + var(--app-header)); height:calc(100dvh + var(--app-header))}
    [data-env="app"] .col-wrap {padding-bottom:95px}
    [data-env="app"] .fixed-area:not(.active) {height:80px}
    [data-env="app"] .fixed-area:not(.active) .ranking-box .tab-menu {margin-bottom:40px}    
    [data-env="app"][data-mobile-os="HKAPP_I"] .col-wrap {padding-bottom:115px}
    [data-env="app"][data-mobile-os="HKAPP_I"] .fixed-area:not(.active) {height:100px}
    [data-env="app"][data-mobile-os="HKAPP_I"] .fixed-area:not(.active) .ranking-box .tab-menu {margin-bottom:60px}
    [data-env="app"] .scroll-box {max-height:unset; overflow-y:visible}
    [data-env="app"] .fixed-area.active {padding-bottom:80px}

    [data-env="app"] .top-info {padding-top:24px}
    [data-env="app"] .logo-area .desc {margin-top:0}
}