@font-face {
    font-family: 'Jalnan';
    src: url('/styles/v2/JalnanOTF.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Baloo';
    src: url('/styles/v2/Baloo-Regular.woff2') format('woff2'),
         url('/styles/v2/Baloo-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Baloo2';
    src: url('/styles/v2/Baloo2-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: 'Baloo2';
    src: url('/styles/v2/Baloo2-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

.study-header-body.is-mobile { display: none; }
#wrapper-learn.is-mobile { top: 0px; height: 100%; }
#wrapper-learn.hide-header { top: 0px; height: 100%; }

.radio input[type="radio"]:not(:checked) + label::after {
    -webkit-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -o-transform: scale(1, 1);
    transform: scale(1, 1);
    background-color: #FFF; 
}
.radio label::after { background-color: #7f5ac8; }

.header { background: rgba(24, 24, 24, 0.77); border-bottom: 1px solid rgba(255, 255, 255, 0.09); }
.header .middle-menus { display: table !important; position: absolute; left: calc(50% - 200px); top: 0px; width: 400px; color: #fff; font-size: 14px; text-align: center; }
.btn-top-menu { display: inline-block; color: #ddd; font-size: 14px; font-weight: 600; padding: 13px 12px; }
.btn-top-menu:hover { background: rgba(255, 255, 255, 0.1); color: #ddd; }
.btn-top-menu i { font-size: 121%; position: relative; }
.btn-top-menu.seperate { border-left: 1px solid rgba(0, 0, 0, 0.4); }
.btn-top-menu .btn-embed.active {color: #6cbb24; font-weight: 600;}
.btn-top-menu .btn-embed:hover {color: #6cbb24; font-weight: 600;}
.header .middle-menus .btn-top-menu { padding: 0px; background: transparent !important; }
.header .middle-menus .btn-top-menu>a { padding: 14px 12px; }
.header .middle-menus .btn-top-menu>a:hover { background: rgba(255, 255, 255, 0.1); }
.header .middle-menus .btn-top-menu>a.active { color: #6cbb24; font-weight: 600; border-bottom: 4px solid; padding-bottom: 10px; }

#match-wrapper { max-width: 840px; width: 100%; }
#wrapper-learn.is-mobile #match-wrapper { height: 100%; }

.match-top { line-height: 1; display: table; width: 100%; color: #fff; text-align: left; margin-bottom: 15px; }
.match-top.mobile { display: none; }
.match-bottom { padding-top: 30px; padding-bottom: 10px; }
#wrapper-learn.is-mobile .match-top.mobile { display: table; margin-bottom: 0px; padding: 0px 16px 6px; height: 70px; }
#wrapper-learn.is-mobile .match-bottom { display: none; padding-top: 8px; }
.page-small .match-top.pc, .is-mobile .match-top.pc { display: none; }
.page-small .match-top, .page-small .match-bottom, .is-mobile .match-top, .is-mobile .match-bottom { padding-left: 6px; padding-right: 6px; }
.match-top>* { display: table-cell; vertical-align: bottom; }

.match-content { width: 100%; position: relative; }
#wrapper-learn.is-mobile .match-content { height: calc(100% - 74px); }
.match-content .match-body { float: left; width: calc(50% - 12px); }
.match-content .match-body.left { margin-right: 12px; }
.match-content .match-body.right { margin-left: 12px; }
#wrapper-learn.is-mobile .match-content .match-body { margin: 0px 6px; height: 100%; width: calc(50% - 9px); }
#wrapper-learn.is-mobile .match-content .match-body.left { margin-right: 3px; }
#wrapper-learn.is-mobile .match-content .match-body.right { margin-left: 3px; }

.match-body { background: #F0F0F0; border-radius: 4px; padding: 24px; overflow: hidden; user-select: none; }
.match-body.disabled { background: rgba(240, 240, 240, 0.6) !important; }
.page-small .match-body, .is-mobile .match-body { padding: 0px; background: transparent !important; }
.match-body .flip-card { width: 100%; height: 96px; margin-bottom: 8px; cursor: pointer; }
#wrapper-learn.is-mobile .match-body .flip-card { height: calc(25% - 5px); margin-bottom: 6px; }
#wrapper-learn.is-mobile .match-body .flip-card:last-child { margin-bottom: 0px; }
.match-body .flip-card.disabled { opacity: 0.6; }
.match-body .flip-card:last-child { margin-bottom: 0px; }
.match-body .flip-card .flip-card-front, .match-body .flip-card .flip-card-back { border-width: 3px; border-color: transparent; box-shadow: none; transition: 0.1s all linear; font-size: 24px; font-weight: 600; padding: 0px 10px; }
.match-body .flip-card.clicked .flip-card-front { border-color: #795BC1; }
.match-body .flip-card.correct .flip-card-front { border-color: #78D024; }
.match-body .flip-card.wrong .flip-card-front { border-color: #C9484D; }
.match-body .flip-card.answer .flip-card-front { border-color: #795BC1; }
.match-body .flip-card.wrong .flip-card-back { background-color: #C9484D; }
#wrapper-learn.is-mobile .match-body .flip-card.clicked .flip-card-front { background: #E2DDEC; }
#wrapper-learn.is-mobile .match-body .flip-card.correct .flip-card-front { background: #F4FFE9; }
#wrapper-learn.is-mobile .match-body .flip-card.wrong .flip-card-front { background: #FFEEF0; }
#wrapper-learn.is-mobile .match-body .flip-card.answer .flip-card-front { background: #E2DDEC; }

.match-body .flip-card .card-score { position: absolute; top: 3px; right: 8px; font-size: 14px; color: #ccc; font-weight: normal; }
.match-body .flip-card .hint { position: absolute; top: 3px; left: 3px; font-size: 24px; color: #ffca28; display: none; }
.match-body .flip-card.hint .hint { display: block; }

.match-body.right .flip-card .flip-card-front { color: #999; }

.card-blind { display: none; position: absolute; z-index: 19; left: 0px; right: 0px; top: 0px; bottom: 0px; }
.card-blind.active { display: block; }

.blink { animation: blink-animation2 1s steps(10, start) infinite; -webkit-animation: blink-animation2 1s steps(10, start) infinite; }
@keyframes blink-animation2 {
    25% { opacity: 0.2; }
    100% { opacity: 1; }
}
@-webkit-keyframes blink-animation2 {
    25% { opacity: 0.2; }
    100% { opacity: 1; }
}
.blink.x2 { animation-iteration-count: 2; }

.hurry-text, .ready-text { display: none; position: absolute; left: 0px; top: calc(50% - 20px); width: 100%; text-align: center; line-height: 1; font-size: 80px; font-weight: 600; color: #fff; transition: 0.3s all linear; z-index: 2; }
.ready-text.active { display: block; left: 100%; opacity: 0; animation: ready-ani 1.666s 1; -webkit-animation: ready-ani 1.666s 1; }
@keyframes ready-ani {
    0% { left: 100%; opacity: 0; }
    20% { left: 0%; opacity: 1; }
    80% { left: 0%; opacity: 1; }
    100% { left: -100%; opacity: 0; }
}
@-webkit-keyframes ready-ani {
    0% { left: 100%; opacity: 0; }
    20% { left: 0%; opacity: 1; }
    80% { left: 0%; opacity: 1; }
    100% { left: -100%; opacity: 0; }
}

.hurry-text { color: #C9484D; top: calc(50% - 63px); }
.hurry-text.active { display: block; left: 100%; opacity: 0; animation: ready-ani 1.5s 1; -webkit-animation: ready-ani 1.5s 1; }


.point-text { display: none; position: absolute; left: calc(50% - 73px); top: calc(50% - 73px); width: 146px; height: 146px; border: 2px solid transparent; border-radius: 146px; background: gray; color: #fff; font-size: 44px; font-weight: 600; line-height: 1; text-align: center; transform: scale(0); opacity: 0; z-index: 2; }
#wrapper-learn.is-mobile .point-text { top: calc(50% - 108px); }
.point-text.plus { background: rgba(120, 208, 36, 0.94); border-color: #66B01F; }
.point-text.minus { background: rgba(201, 72, 77, 0.94); border-color: #A83B3F; }
.point-text.try { background: rgba(121, 91, 193, 0.94); border-color: #6549A8; font-style: italic; }
.point-text.active { display: table; animation: point-ani 1s 1; -webkit-animation: point-ani 1s 1; }

.point-text-end { display: none; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.7); z-index: 2; }
.point-text-end.active { display: table; }

@keyframes point-ani {
    0% { transform: scale(0); opacity: 0; }
    10% { transform: scale(1.2); opacity: 1; }
    15% { transform: scale(1); opacity: 1; }
    85% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0); opacity: 0; }
}
@-webkit-keyframes point-ani {
    0% { transform: scale(0); opacity: 0; }
    10% { transform: scale(1.2); opacity: 1; }
    15% { transform: scale(1); opacity: 1; }
    85% { transform: scale(1); opacity: 1; }
    100% { transform: scale(0); opacity: 0; }
}

.cc-prog .prog-bar { transition: 0.5s all linear; }
.cc-prog .prog-bar.noani { transition: none; }

.flip-card-inner { left: 0%; opacity: 1; }
.flip-card-inner.leftOutNoAni { left: -100%; opacity: 0; }
.flip-card-inner.rightOutNoAni { left: 100%; opacity: 0; }
.flip-card-inner.hideOut { opacity: 0; animation: fade-out-ani 0.4s 1 cubic-bezier(0.22, 0.61, 0.36, 1) normal forwards; -webkit-animation: fade-out-ani 0.4s 1 cubic-bezier(0.22, 0.61, 0.36, 1) normal forwards; }
.flip-card-inner.leftFadeOut { animation: left-fade-out-ani 0.4s 1 cubic-bezier(0.22, 0.61, 0.36, 1) normal forwards; -webkit-animation: left-fade-out-ani 0.4s 1 cubic-bezier(0.22, 0.61, 0.36, 1) normal forwards; }
.flip-card-inner.rightFadeIn { animation: right-fade-in-ani 0.4s 1 cubic-bezier(0.22, 0.61, 0.36, 1) normal forwards; -webkit-animation: right-fade-in-ani 0.4s 1 cubic-bezier(0.22, 0.61, 0.36, 1) normal forwards; }
.flip-card-inner.rightFadeOut { animation: right-fade-out-ani 0.4s 1 cubic-bezier(0.22, 0.61, 0.36, 1) normal forwards; -webkit-animation: right-fade-out-ani 0.4s 1 cubic-bezier(0.22, 0.61, 0.36, 1) normal forwards; }
.flip-card-inner.leftFadeIn { animation: left-fade-in-ani 0.4s 1 cubic-bezier(0.22, 0.61, 0.36, 1) normal forwards; -webkit-animation: left-fade-in-ani 0.4s 1 cubic-bezier(0.22, 0.61, 0.36, 1) normal forwards; }

@keyframes fade-out-ani {
    0% { opacity: 1; }
    100% { opacity: 0; }
}
@-webkit-keyframes fade-out-ani {
    0% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes left-fade-out-ani {
    0% { left: 0%; opacity: 1; }
    100% { left: -100%; opacity: 0; }
}
@-webkit-keyframes left-fade-out-ani {
    0% { left: 0%; opacity: 1; }
    100% { left: -100%; opacity: 0; }
}

@keyframes right-fade-in-ani {
    0% { left: -100%; opacity: 0; }
    100% { left: 0%; opacity: 1; }
}
@-webkit-keyframes right-fade-in-ani {
    0% { left: -100%; opacity: 0; }
    100% { left: 0%; opacity: 1; }
}

@keyframes right-fade-out-ani {
    0% { left: 0%; opacity: 1; }
    100% { left: 100%; opacity: 0; }
}
@-webkit-keyframes right-fade-out-ani {
    0% { left: 0%; opacity: 1; }
    100% { left: 100%; opacity: 0; }
}

@keyframes left-fade-in-ani {
    0% { left: 100%; opacity: 0; }
    100% { left: 0%; opacity: 1; }
}
@-webkit-keyframes left-fade-in-ani {
    0% { left: 100%; opacity: 0; }
    100% { left: 0%; opacity: 1; }
}

.match-meaning-count { position: absolute; right: 4px; bottom: -3px; }
.score-table { border: 1px solid #DBDBDB; border-radius: 4px; }
.score-list { height:240px; }
.score-list .std-score { padding:6px 16px; border-bottom:1px solid #F3F3F3; }
.score-list .std-score.my-score { background:#7f5ac8; color:#fff }
.score-list .std-score .name { font-size:0px; display: flex; min-height: 26px; align-items: center; }
.score-list .std-score .name > * { font-size:14px; }
.score-list .std-score .num { margin: 0px 8px; font-weight: 700; color: #C0C0C0; }
/* .score-list .std-score:not(.hidden):nth-of-type(n + 4) .num { color: #C0C0C0; } */
.score-list .std-score .num.top-rank { color: #78D024; }
.score-list .score { text-align:right; font-size:14px; font-weight: 700; }
.btn-opt-start { font-weight: 700; padding:9px; }

.match-rank-menu { background: #F3F3F3; cursor:pointer; }
.match-rank-menu.active { background: #D1EFAB; }
.match-rank-menu.rank-class { border-radius: 4px 0px 0px 0px; }
.match-rank-menu.rank-all { border-radius: 0px 4px 0px 0px; }

/* 스코어 보드 CSS 시작 */
#wrapper-learn .match-score-board { display: flex; flex-direction: column; margin: 0 auto; max-width: 800px; height: 100%; background: #FFF !important; }
#wrapper-learn .match-score-board .container-top { position: relative; width: 100%; min-height: 50px; background: #FFF; }

#wrapper-learn .match-score-board .container-middle { width: 100%; height: 100%; display:flex; flex-direction: column; background-image: url(/images/v2/match/bg_word_rank.svg); background-repeat: no-repeat; border-radius: 10px; filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.25)); overflow: hidden; overflow-y: auto; }
#wrapper-learn .match-score-board .container-middle::-webkit-scrollbar { width: 5px; height: 3px; }
#wrapper-learn .match-score-board .container-middle::-webkit-scrollbar-thumb { background-color: #369FFF; }
#wrapper-learn .match-score-board .container-middle::-webkit-scrollbar-track { background-color: #D6E7F7; }

#wrapper-learn .match-score-board .container-middle .rank-ranker { width: 100%; display: flex; flex-direction: column; align-items: center;  }
#wrapper-learn .match-score-board .container-middle .rank-other { width: 100%; display: flex; flex-direction: column; align-items: center; background: #FFF; }
#wrapper-learn .match-score-board .container-middle .rank-other > div { max-width: 500px; width: 100%; }

#wrapper-learn .match-score-board .container-middle .completed-body { position: absolute; top: 0; left: 0; }

#wrapper-learn .match-score-board .container-bottom { width: 100%; min-height: 85px; display: flex; justify-content: center; background:#FFF; }

#wrapper-learn .rank-list-container .rank-list { padding-right: 10px; max-width: 100%; width: 100%; height: 100%; /* overflow: hidden; overflow-y: auto; */ }
#wrapper-learn .rank-list-container .rank-list::-webkit-scrollbar { width: 5px; height: 3px; }
#wrapper-learn .rank-list-container .rank-list::-webkit-scrollbar-thumb { background-color: #369FFF; }
#wrapper-learn .rank-list-container .rank-list::-webkit-scrollbar-track { background-color: #D6E7F7; }

#wrapper-learn .rank-list-container .rank-score-tooltip { z-index: 99; padding: 6px; position: absolute; top: -20px; right: 22px; background: #FF8A00; border-radius: 4px; font-size: 13px; line-height: 1; font-weight: 500; user-select: none; }
#wrapper-learn .rank-list-container .rank-score-tooltip:after { z-index: -1; content: ''; position: absolute; bottom: -5px; left: 55px; width: 0; height: 0; border-top: 12px solid #FF8A00; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 0px solid transparent; }

#wrapper-learn .rank-list-container .rank-list .rank-item { display: flex; align-items: center; padding: 5px 20px; border-radius: 5px; border: 1px solid #DBDBDB; background: var(--white, #FFF); color: #333439; }
#wrapper-learn .rank-list-container .rank-list .rank-item.my-score { background-color: #D6E7F7; }
#wrapper-learn .rank-list-container .rank-list .rank-item:not(:first-child) { margin-top: 10px; }
#wrapper-learn .rank-list-container .rank-list .rank-item:last-child { margin-bottom: 10px; }
#wrapper-learn .rank-list-container .rank-list .rank-item .rank { min-width: 40px; font-family:'Baloo'; font-size: 30px; color: #4D4E54; font-weight: 400; }
#wrapper-learn .rank-list-container .rank-list .rank-item .img { margin-left: 3px; min-width: 32px; min-height: 32px; max-width: 32px; max-height: 32px; }
#wrapper-learn .rank-list-container .rank-list .rank-item .img.crown { position: relative; }
#wrapper-learn .rank-list-container .rank-list .rank-item .img.crown::after { content: ""; width: 24px; height: 24px; background-image: url('/images/v3/grammar_scramble/top_rank_crown.svg'); background-size: cover; position: absolute; top: -12px; left: -8px; }
#wrapper-learn .rank-list-container .rank-list .rank-item .name { min-width: 90px; margin-left: 6px; font-size: 14px; font-weight: 700; }
#wrapper-learn .rank-list-container .rank-list .rank-item .score { flex-grow: 1; text-align: right; font-family:'Baloo'; font-size: 18px; font-weight: 400; }

#wrapper-learn .three-podium { width: 100%; min-height: 220px; display: flex; flex-direction: row; align-items: end; }
#wrapper-learn .three-podium .img img { margin-bottom: 5px; width: 37px; height: 37px; border-radius: 50%; border: 2px solid #FFCA41; }
#wrapper-learn .three-podium .name { max-width: 150px; font-size: 14px; font-weight: 700; color: #292929; text-align: center; overflow: hidden; }
#wrapper-learn .three-podium .score { z-index:1; margin-bottom: -2px; padding: 0 4px; min-width: 60px; height: 26px; font-family:'Baloo'; font-size: 18px; color: #1562A3; background: #FFF; border-radius: 5px; text-align: center; }
#wrapper-learn .three-podium .rank-container { display: flex; flex-direction: column; align-items: center; }
#wrapper-learn .three-podium .rank-container:nth-child(2) { min-width: 220px; }

#wrapper-learn .three-podium .rank-1 .img { position: relative; }
#wrapper-learn .three-podium .rank-1 .img::after { content: ""; width: 24px; height: 24px; background-image: url('/images/v3/grammar_scramble/top_rank_crown.svg'); background-size: cover; position: absolute; top: -12px; left: -5px; }

#wrapper-learn .three-podium .rank-1 .podium img { width:90px; height: 93px; }
#wrapper-learn .three-podium .rank-2 .podium img { width:90px; height: 70px; }
#wrapper-learn .three-podium .rank-3 .podium img { width:90px; height: 62px; }

#wrapper-learn .rank-result { min-height: 110px; display: flex; flex-direction: row; align-items: end; }

#wrapper-learn .rank-result .current-rank-score .score-wrapper { min-width: 200px; min-height: 80px; position: relative; }
#wrapper-learn .rank-result .current-rank-score .score-font { font-family:'Baloo'; text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25); letter-spacing: 1.5px; color: #FFF; font-size: 55px; -webkit-text-stroke: 3.5px #7E5AC7; line-height: 1; }
#wrapper-learn .rank-result .current-rank-score .score-font >span { font-family: 'Jalnan'; font-size: 40px; font-weight: 900; }
#wrapper-learn .rank-result .current-rank-score .score-guide { position: absolute; left: 50%; transform: translateX(-50%); top: 50px;  font-size: 14px; color: #7E5AC7; font-weight: 400; }

#wrapper-learn .match-score-board .unit-name { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 75%; word-break: keep-all; }
#wrapper-learn .match-score-board .btn-opt-start { padding: 9px 14px 7px 14px; min-width: 170px; height: 46px; font-family: 'Jalnan'; color: #FFF; font-size: 21px; -webkit-text-stroke: 1.8px #1562A3; cursor: pointer; text-align: center; }

#wrapper-learn .match-score-board .btn-rank-reset-wrapper { position: absolute; bottom: 5px; right: 0; }

#wrapper-learn .rank-type { padding: 0px 3px; display: flex; align-items: center; width: 250px; height: 35px; border-radius: 20px; background: #FFF; }
#wrapper-learn .rank-type .type.selected { color: #FFF; background: #7E5AC7; }
#wrapper-learn .rank-type .type { padding: 4px 15px; width: 125px; height: 30px; border-radius: 20px; cursor: pointer; }

#wrapper-learn .rank-empty { width: 100%; height: 400px; display: flex; align-items: center; justify-content: center; }

#wrapper-learn .btn-blue { z-index: 1; position: relative; border-radius: 10px; border: 2px solid #1562A3; background: #A0D1FF; box-shadow: 5px 5px 10px 0px rgba(255, 255, 255, 0.60) inset, 2px 2px 1px 0px #FFF inset, -5px -5px 5px 0px rgba(21, 98, 163, 0.20) inset, -2px -2px 1px 0px #A0D1FF inset, 0px 2px 4px 0px rgba(0, 0, 0, 0.25); }
#wrapper-learn .btn-blue::before { z-index: -1; content: ""; position: absolute; top: 1px; left: 13px; width: 9px; height: 6.5px; border-radius: 8.5px; background-color: #FFF; filter: blur(0.35px); }
#wrapper-learn .btn-blue::after { z-index: -1; content: ""; position: absolute; bottom: 0; left:0; width: 100%; height: 50%; opacity: 0.3; background: #659ECC; border-radius: 0px 0px 10px 10px; }
/* 스코어 보드 CSS 종료 */