@charset "UTF-8";
@import url(fonts.css);

:root {
    --white: #fff;
    --error: #EC3444;
    --orange: #FF5C00;
    --line : #7E5253;
    --black-4 : #444;
}

/* reset */
* {margin:0;padding:0;box-sizing: border-box;-webkit-box-sizing: border-box; -moz-box-sizing: border-box;}
html, body {width:100vw; overflow-x: hidden; -webkit-text-size-adjust: none; -ms-user-select: none; -moz-user-select: -moz-none; -webkit-user-select: none; -khtml-user-select: none; user-select:none;}
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, legend, input, textarea, radio, select, p, button {margin:0; padding:0}
body, th, td, button, input, select, textarea { font-family: 'Ok',AppleSDGothicNeo-Regular,"Helvetica Neue",Roboto,Helvetica, Arial, sans-serif; font-size:16px; color:#333; font-weight:normal; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
a {color: inherit; text-decoration: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1); -webkit-tap-highlight-color: transparent;}
a:hover, a:active, a:focus {text-decoration: none; outline: 0;}
table {border-collapse:collapse; border-spacing:0;}
caption, legend {overflow:hidden; width:0; height:0; text-indent:-9999em; line-height:0; font-size:0}
img {display: block; border: 0; vertical-align: top;}
input, select, textarea {vertical-align: middle;}
select { -webkit-appearance: none; -moz-appearance: none;appearance: none; }
select::-ms-expand { display:none; }
ul, ol, li {list-style: none;}
button {background: none; border: none; box-sizing: border-box; cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1); -webkit-tap-highlight-color: transparent;}
em, address {font-style:normal}
input {padding: 16px 0;}
textarea {border: 1px solid #ccc; padding: 4px 16px;}
i {background-repeat: no-repeat; background-position: center; display: inline-block; vertical-align: top;}
table { border-collapse: collapse; border-spacing: 0; width: 100%;}
caption {overflow: hidden;width: 0;height: 0;font-size: 0; line-height: 0;}
th, td { vertical-align: middle;}

.text-left {text-align: left !important;}
.text-center {text-align: center;}
.text-right {text-align: right;}

.flex-center {display: flex; align-items: center;}


.no-drag {-ms-user-select: none; -moz-user-select: -moz-none; -webkit-user-select: none; -khtml-user-select: none; user-select:none;}
.sr-only {
    position: absolute;
    z-index: -100;
    width: 1px; /* width나 height 중에 하나라도 0으로 주면 display: none 처럼 스크린 리더가 읽어주지 않아서 1px로 설정 */
    height: 1px;
    overflow: hidden; /* 1x1을 벗어난 영역 자르기 */
    opacity: 0; /* 투명도를 0으로 */
}


.color-red {color: #F38181;}
.color-blue {color: #47B5FF;}
.color-green {color: #76BA99;}

.bgChange {animation: bgChangeEffect 400ms 2 alternate;}
.blink {animation: blinkingEffect 200ms 5 alternate;}
.vibration {animation: vibrationEffect 100ms infinite;}

.zoom {animation: zoomEffect 500ms 2 alternate;}
.btn-arr {display: block; width: 24px; height: 24px; background: url(../img/arr_left.png) no-repeat; background-size: 100% auto; font-size: 0;}

/* 같은 그림 찾기 */
.header {position: fixed;height: 56px;display: flex;align-items: center;width: 100%;padding: 0 24px;z-index: 10;justify-content: space-between;}
.header .right {display: flex;gap: 4px;}
.game-cm-intro {position: absolute;width: 100vw;height: 100vh;background: rgb(130,184,228);background: linear-gradient(180deg, rgba(130,184,228,1) 0%, rgba(150,198,234,1) 100%);overflow: hidden;}
.game-cm-intro .intro-container {position: relative;top: 56px;height: calc(100vh - 56px);}
.game-cm-intro .intro-container .center {position: relative;padding-top: 15%;display: flex;flex-direction: column;align-items: center;gap: 30px;z-index: 2;}
.game-cm-intro .intro-container .title {width: 320px;}
.game-cm-intro .intro-container .title img {width: 100%;}
.game-cm-intro .intro-container .btn-start {display: block;background: url(../img/cm/btn_start.png) no-repeat;width: 260px;height: 80px;background-size: 100% auto;font-size: 0;}
.game-cm-intro .intro-container .img {position: absolute;left: 0;right: 0;bottom: 0;background: url(../img/cm/intro.png) center bottom no-repeat;background-size: 100% auto;height: 100%;}

.game-cm-intro .cloud1, .game-cm .cloud1 {background: url(../img/cm/cloud1.png) no-repeat;background-size: 100% auto;width: 116px;height: 80px;position: absolute;top: 30%;left: -40px;}
.game-cm-intro .cloud2, .game-cm .cloud2 {background: url(../img/cm/cloud1.png) no-repeat;background-size: 100% auto;width: 116px;height: 80px;position: absolute;top: 22%;right: -40px;}
.game-cm-intro .cloud3, .game-cm .cloud3 {background: url(../img/cm/cloud2.png) no-repeat;background-size: 100% auto;width: 142px;height: 104px;position: absolute;top: 5%;left: -25px;}
.game-cm-intro .cloud4, .game-cm .cloud4 {background: url(../img/cm/cloud2.png) no-repeat;background-size: 100% auto;width: 142px;height: 104px;position: absolute;top: -28px;right: -30px;}

.data-line .profile {position: relative;background: url(../img/cm/profile.png) no-repeat;background-size: 100% auto;width: 40px;height: 40px;border-radius: 40px;}
.data-line .profile::before {content: '';position: absolute;width: 100%;height: 100%;border-radius: 100%;border: 2px solid var(--line);box-sizing: border-box;}
.data-line .score {width: 172px;height: 46px;background: url(../img/img_score.png) no-repeat;background-size: 100% auto;font-size: 22px;line-height: 24px;font-weight: 600;color: var(--line);display: flex;align-items: center;padding: 4px 0 0 25px;justify-content: center;}
.data-line .stage {width: 172px;height: 46px;background: url(../img/img_stage.png) no-repeat;background-size: 100% auto;font-size: 22px;line-height: 24px;font-weight: 600;color: var(--line);display: flex;align-items: center;padding: 4px 0 0 25px;justify-content: center;}

/* .i-point {width: 24px; height: 24px; background: url(../img/cm/point.png) no-repeat; background-size: 100%;}
.i-stage {width: 24px; height: 24px; background: url(../img/cm/stage.png) no-repeat; background-size: 100%;}
.i-name {width: 24px; height: 24px; background: url(../img/cm/name.png) no-repeat; background-size: 100%;}
.i-score {width: 24px; height: 24px; background: url(../img/mole/ico_score.png) no-repeat; background-size: 100%;} */

.game-cm-intro .grass1, .game-cm .grass1 {position: absolute; right: -60px; bottom: 30px; background: url(../img/cm/grass1.png) no-repeat; background-size: 100% auto; width: 184px; height: 94px; z-index: 2;}
.game-cm-intro .grass2, .game-cm .grass2 {position: absolute; left: -60px; bottom: 30px; background: url(../img/cm/grass2.png) no-repeat; background-size: 100% auto; width: 184px; height: 94px; z-index: 2;}
.game-cm-intro .grass3, .game-cm .grass3 {position: absolute; background: url(../img/cm/bg_grass.png) no-repeat; background-size: 100% auto; position: absolute; left: 0; right: 0; bottom: 0; height: 52px; z-index: 3;}

.game-cm {display: flex;flex-direction: column;align-items: center;width: 100vw; height: 100vh; background: #9BC171;}
.game-cm .cloud1 {top: 8px;}
.game-cm .cloud2 {top: 22px;}
.game-container .data-line {display: flex;gap: 20px;padding: 0 16px;align-items: center;justify-content: center;position: relative; min-height: 46px;}
.game-container .profile {width: 54px;height: 54px;}
.top {position: relative; padding: 56px 0 0;width: 100%;height: 246px;background: #82B8E4;}
.time-form {position: relative;z-index: 4;padding: 0 16px;display: flex;gap: 8px;}
.time {position: relative; color: var(--line);background: url(../img/cm/timer.png) no-repeat;width: 56px;height: 65px;background-size: 100% auto;font-size: 24px; line-height: 28px; font-weight: 600;}
.time strong {display: inline-block; width: 35px; text-align: center; position: absolute; top: 25px; left: 10px;}
.bar-form {position: relative; top: 16px; background: #FFEDAA; border-radius: 40px; border: 2.5px solid var(--line); width: calc(100% - 65px); height: 40px; padding: 6px; box-sizing: border-box;}
.bar {overflow: hidden; height: 24px; background: #fff; border: 2px solid var(--line); background-size: 100% auto; border-radius: 40px;}
.bar span {height: 20px; background-color: #EE8685; display: block; width: 100%; transition: width 1s linear;}
.game-cm .game {display: flex;justify-content: center;align-items: center;width: 100%;max-width: 646px; max-height: 646px; padding: 8px 16px 16px;}
.game-cm .game::after {content: '';display: block;padding-bottom: 100%;}
.game-cm .game-board {position: relative;display: flex;flex-wrap: wrap;left: 0;width: 100%; height: calc(100vh - 254px);gap: 5px;}
.card {position: relative;width: calc(25% - 4px);height: calc(25% - 4px); background: #FFFFFF; border-radius: 14px; border: 1px solid var(--line); box-shadow: inset 0px -5px 0 #ECE4CC;}
.card-back, .card-front {position: absolute;width: 100%;height: 100%;background-repeat: no-repeat;background-position: center center;backface-visibility: hidden;transition: transform 500ms;}
.card-front {transform: rotateY(-180deg);background-size: 100%;}
.card-back {transform: rotateY(0deg);background-image: url(../img/cm/back.png);background-size: 55px;}
.stage-clear {position: fixed; z-index: 10; top: 50%;left: 50%;transform: translate(-50%, -50%);display: none;width: 360px;height: 452px;background-image: url(../img/cm/clear2.png);background-size: 100% auto;background-repeat: no-repeat;background-position: center center;animation: movingEffect 130ms 10 alternate;}
.modal {display: none;letter-spacing: -0.04em;}
.modal-layer {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 10;background: rgba(0, 0, 0, 0.5);}
.modal-content {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);display: flex;flex-flow: column;justify-content: center;align-items: center;font-family: 'Ok'; width: 300px;padding: 24px 16px;z-index: 9999;border-radius: 30px;background: #FFF2CD;color: var(--line);font-size: 20px; line-height: 26px;}
.modal-content::before {content: '';position: absolute;top: -65px;background: url(../img/cm/txt_gameover.png) no-repeat;background-size: 100% auto;width: 275px;height: 48px;}
.modal.clear .modal-content::before {background: url(../img/mole/txt_gameclear.png) no-repeat;background-size: 100% auto;}
.modal-content-title { text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.modal-content-result {font-size: 24px; line-height: 28px;}
.modal-content-stage {margin: 10px 0 24px; width: 172px;height: 46px;background: url(../img/img_stage.png);background-size: 100% auto;font-size: 22px;line-height: 24px;font-weight: 600;color: var(--line);display: flex;align-items: center;padding: 4px 0 0 25px;justify-content: center;}
.modal-content-score {margin: 10px 0 24px; width: 140px;height: 46px;background: url(../img/img_score.png);background-size: 100% auto;font-size: 22px;line-height: 24px;font-weight: 600;color: var(--line);display: flex;align-items: center;padding: 4px 0 0 25px;justify-content: center;}
.show {display: block;}
.button-form {margin: 24px 0 10px; display: flex; gap: 10px; justify-content: center;}
.btn-reset {width: 127px;height: 46px;background: url(../img/btn_reset.png) no-repeat;background-size: 100% auto;text-indent: -9999px;font-size: 0;}
.btn-close {width: 127px;height: 46px;background: url(../img/btn_close.png) no-repeat;background-size: 100% auto;text-indent: -9999px;font-size: 0;}
.btn-share {width: 264px;height: 46px;background: url(../img/btn_share.png) no-repeat;background-size: 100% auto;text-indent: -9999px;font-size: 0;}

.matched + .card-front::before {content: '';background: url(../img/cm/1234.png) no-repeat;background-size: 100% auto;position: absolute;top: 10px;left: 50%;width: 80px; height: 24px;animation: glow 1s ease;transform: none;margin-left: -40px;}


/* 두더지 잡기 */
.game-mole {display: flex;flex-direction: column;align-items: center;width: 100vw; height: 100vh; background: #EDD698;}
.game-mole-intro {position: absolute;width: 100vw;height: 100vh;background: #82B8E4;overflow: hidden;}
.game-mole-intro .intro-container {position: relative;top: 56px;height: calc(100vh - 56px);}
.game-mole-intro .intro-container .center {position: relative;padding-top: 10px;display: flex;flex-direction: column;align-items: center;gap: 30px;z-index: 2;}
.game-mole-intro .intro-container .title {width: 320px;}
.game-mole-intro .intro-container .title img {width: 100%;}
.game-mole-intro .intro-container .btn-start {display: block;background: url(../img/mole/btn_start.png) no-repeat;width: 260px;height: 80px;background-size: 100% auto;font-size: 0;}
.game-mole-intro .intro-container .img {position: absolute;left: 0;right: 0;bottom: 0;background: url(../img/mole/intro.png) center bottom no-repeat;background-size: 100% auto;height: 100%; z-index: 1;}

.game-mole-intro .cloud1 {background: url(../img/mole/cloud.png) no-repeat;background-size: 100% auto;width: 205px;height: 42px;position: absolute;top: 42%;left: -20px; opacity: 0.5;}
.game-mole-intro .cloud2 {background: url(../img/mole/cloud.png) no-repeat;background-size: 100% auto;width: 205px;height: 42px;position: absolute;top: 53%;right: 5px; opacity: 0.5;}
.game-mole-intro .cloud3 {background: url(../img/mole/cloud.png) no-repeat;background-size: 100% auto;width: 205px;height: 42px;position: absolute;top: 7%;left: -85px; opacity: 0.5;}
.game-mole-intro .cloud4 {background: url(../img/mole/cloud.png) no-repeat;background-size: 100% auto;width: 205px;height: 42px;position: absolute;top: 0px;right: -135px; opacity: 0.5;}

.game-mole .cloudgrass {width: 100%; position: absolute; bottom: 0;}
.game-mole .cloudgrass img {width: 100%;}
.game-mole .grass {width: 100%; position: absolute; left: 0; bottom: 0;}
.game-mole .grass img {width: 100%;}

.game-mole .top {height: 260px;border-bottom: 2px solid var(--line);margin-top: -8px;}
.game-mole .game {background: url(../img/mole/bg2.png);background-size: 280px 200px;display: grid;grid-template-columns: repeat(3, 102px);gap: 10px;justify-content: center;width: 100%;height: calc(100% - 260px - 12%);padding: 10px 0 40px 0;}
.hole {position: relative;width: 102px;height: 110px;overflow: hidden; background: no-repeat url(../img/mole/hole.png);background-position: center bottom;background-size: 100% auto;}
.hole::after {content: ''; position: absolute; left: 11px; bottom: 1px; width: 80px; height: 34px; background: url(../img/mole/hole2.png) no-repeat; background-size: 100% auto;}
.hole > .mole {position: absolute;bottom: 10px; left: 1px; display: block;width: 100px; height: 100px; transition: 0.3s ease-out; animation: shake 0.5s; animation-iteration-count: infinite;}
.game-mole .game .catch::before {content: '';display: block;position: absolute;top: 0;left: 50%;width: 100px;height: 80px;background: url(../img/mole/catch.png) center no-repeat;background-size: 100% auto;transform: translateX(-50%);z-index: 5;transition: 0.3s;}
.score {display: flex;align-items: baseline;justify-content: center;color: #7E5253;gap: 10px;font-weight: 600;}
.score::before {content: ''; background: url(../img/mole/score.png) no-repeat; background-size: 100% auto; width: 194px; height: 106px; position: absolute;}
.start-btn {display: none;padding: 10px 20px;font-size: 20px;font-weight: bold;margin: 20px 0 30px 0;border: none;color: #333;border: 1px solid #333;border-radius: 20px;}
.point-box {margin: 30px auto 0 auto;text-align: center;border-radius: 20px;}
.score > p {position: relative; top: 22px;}
#player-score {font-size: 36px;}
#player-score2 {font-size: 22px;}

.finalEnding {display: block;}
.hole:nth-child(1) .mole {background: url(../img/mole/1.png) no-repeat; background-size: auto 100%; background-position: center;}
.hole:nth-child(2) .mole {background: url(../img/mole/2.png) no-repeat; background-size: auto 100%; background-position: center;}
.hole:nth-child(3) .mole {background: url(../img/mole/3.png) no-repeat; background-size: auto 100%; background-position: center;}
.hole:nth-child(4) .mole {background: url(../img/mole/4.png) no-repeat; background-size: auto 100%; background-position: center;}
.hole:nth-child(5) .mole {background: url(../img/mole/5.png) no-repeat; background-size: auto 100%; background-position: center;}
.hole:nth-child(6) .mole {background: url(../img/mole/6.png) no-repeat; background-size: auto 100%; background-position: center;}
.hole:nth-child(7) .mole {background: url(../img/mole/7.png) no-repeat; background-size: auto 100%; background-position: center;}
.hole:nth-child(8) .mole {background: url(../img/mole/8.png) no-repeat; background-size: auto 100%; background-position: center;}
.hole:nth-child(9) .mole {background: url(../img/mole/9.png) no-repeat; background-size: auto 100%; background-position: center;}

.fever-mode {position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 250px;height: 172px;background: url(../img/mole/speedup.png) no-repeat;background-size: 100% auto;z-index: 10;}

/* mbti 테스트 */
.game-mbti * {font-family: 'Hakgyo'; font-size: 23px;}
.game-mbti-intro {position: absolute;width: 100vw;height: 100vh;background: #E2EFB7 url(../img/mbti/bg_intro.png) center 56px no-repeat;background-size: 100% auto; overflow: hidden;}
.game-mbti-intro .intro-container {position: relative;top: 56px;height: calc(100vh - 56px);}
.game-mbti-intro .intro-container .center {position: relative;padding-top: 20px;display: flex;flex-direction: column;align-items: center;gap: 30px;z-index: 2;}
.game-mbti-intro .intro-container .title {width: 320px;}
.game-mbti-intro .intro-container .title img {width: 100%;}
.game-mbti-intro .intro-container .btn-start {display: block;background: url(../img/mbti/btn_start.png) no-repeat;width: 260px;height: 80px;background-size: 100% auto;font-size: 0;}
.game-mbti-intro .intro-container .img {position: absolute;left: 0;right: 0;bottom: 0;background: url(../img/mbti/intro.png) center bottom no-repeat;background-size: 100% auto;height: 100%;}
.game-mbti.game-container {background: #E2EFB7 url(../img/mbti/bg.png) center bottom no-repeat; background-size: 100% auto; height: 100vh; padding-top: 56px;}
.game-mbti .quiz {display: flex; justify-items: center;}
.game-mbti .question-wrap {width: 340px; height: 174px; background: url(../img/mbti/question.png) no-repeat; background-size: 100% auto; position: relative; margin: 0 auto; word-break: keep-all;}
.game-mbti .question-wrap .question {position: absolute; font-size: 29px; line-height: 34px; color: #57534C; font-weight: bold; letter-spacing: 1px; top: 80px; left: 35px; width: 268px;}
.game-mbti .btn-container {display: flex; flex-direction: column; gap: 20px; align-items: center; justify-content: center; height: calc(100vh - 240px - 90px);}
.game-mbti .btn-container button {width: 330px; height: 64px; color: #393939; transition: ease-in 0.3s;}
.game-mbti .btn-container button:nth-child(1) {background: url(../img/mbti/answer_01.png) no-repeat; background-size: 100% auto;}
.game-mbti .btn-container button:nth-child(2) {background: url(../img/mbti/answer_02.png) no-repeat; background-size: 100% auto;}
.game-mbti .btn-container button:nth-child(3) {background: url(../img/mbti/answer_03.png) no-repeat; background-size: 100% auto;}
.game-mbti .btn-container button:nth-child(4) {background: url(../img/mbti/answer_04.png) no-repeat; background-size: 100% auto;}
.game-mbti .btn-container button:nth-child(1).selected {background: url(../img/mbti/answer_01_on.png) no-repeat; background-size: 100% auto;}
.game-mbti .btn-container button:nth-child(2).selected {background: url(../img/mbti/answer_02_on.png) no-repeat; background-size: 100% auto;}
.game-mbti .btn-container button:nth-child(3).selected {background: url(../img/mbti/answer_03_on.png) no-repeat; background-size: 100% auto;}
.game-mbti .btn-container button:nth-child(4).selected {background: url(../img/mbti/answer_04_on.png) no-repeat; background-size: 100% auto;}
.game-mbti .btn-next {width: 150px; height: 60px; background: url(../img/mbti/btn_next.png) no-repeat; background-size: 100% auto; font-size: 0; position: absolute; left: 50%; bottom: 40px; margin-left: -75px;}
.game-mbti .btn-next.off {background: url(../img/mbti/btn_next_off.png) no-repeat; background-size: 100% auto; pointer-events: none;}
.hidden {display: none !important;}
#result-container {position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center;}
#result {display: flex; flex-direction: column; align-items: center;}
.mbti-character {font-size: 20px; line-height: 28px; color: #57534C; margin-top: 12px;}
.mbti-type {font-size: 48px; line-height: 50px; color: #57534C; letter-spacing: 3px;}
.mbti-img {width: 170px; height: 170px; position: relative; top: 20px;}
.mbti-img img {width: 100%; height: 100%;}
.mbti-desc {font-size: 22px; word-break: keep-all; line-height: 30px; color: #3F484A; width: 330px; height: 270px; padding: 0 16px; background: url(../img/mbti/bg_desc.png) no-repeat; background-size: 100% auto; display: flex; align-items: center; justify-content: center;}
.btn-retry {width: 140px; height: 46px; background: url(../img/mbti/btn_retry.png) no-repeat; background-size: 100% auto; font-size: 0;}
.btn-save {width: 140px; height: 46px; background: url(../img/mbti/btn_save.png) no-repeat; background-size: 100% auto; font-size: 0;}
.btn-share-mbti {width: 140px; height: 46px; background: url(../img/mbti/btn_share.png) no-repeat; background-size: 100% auto; font-size: 0;}

/* 틀린 그림 찾기 */
.game-check-intro {position: absolute;width: 100vw;height: 100vh;background: #FEEECD url(../img/check/bg_intro.png) repeat;background-size: 120px auto; overflow: hidden;}
.game-check-intro .intro-container {position: relative;top: 56px;height: calc(100vh - 56px);}
.game-check-intro .intro-container .center {position: relative;padding-top: 20px;display: flex;flex-direction: column;align-items: center;gap: 30px;z-index: 2;}
.game-check-intro .intro-container .title {width: 320px;}
.game-check-intro .intro-container .title img {width: 100%;}
.game-check-intro .intro-container .btn-start {display: block;background: url(../img/check/btn_start.png) no-repeat;width: 260px;height: 80px;background-size: 100% auto;font-size: 0;}
.game-check-intro .intro-container .img {position: absolute;left: 0;right: 0;bottom: 0;background: url(../img/check/intro.png) center bottom no-repeat;background-size: 100% auto;height: 100%;}
.game-check .top {background: #FEEECD url(../img/check/bg_intro.png) repeat; background-size: 120px auto; height: auto;}
.game-check .info {padding: 16px 24px; font-size: 14px; text-align: center; color: #5d5d6d; font-weight: 300;}
.game-check .info span {font-weight: 600; font-size: 16px; color: #ff6a69;}
.game-container.game-check {background: #feeecd;}
.game-check .game {display: flex; justify-content: center;}
.game-check .question {display: none;}
.game-check .question .game-wrap {display: flex; gap: 10px; align-items: center;}
.game-check .question .game-wrap > div {position: relative;}
.game-check .question .game-wrap > div img {width: 300px; height: 300px;}
.game-check .question .ck {display: none; position:absolute;width: 55px;height: 55px;border: 5px solid #f00;border-radius:50%;z-index: 5;pointer-events: auto;}
.game-check .question .ck.show {display: block !important; visibility: visible !important;}
.click-area {position: absolute; z-index: 15; background: transparent; /* 투명하게 설정 */}
.game-check .time {display: none;}
.game-check .bar-form {width: 100%; top: 0; border: 2px solid var(--line); height: 14px; padding: 2px;}
.game-check .bar {height: 6px;border: 1px solid var(--line);}
.game-check .bar span {height: 6px;}

.question-01 .ck1 {top: 15px;left: 17px;}
.question-01 .ck2 {top: 15px;left: 148px;}
.question-01 .ck3 {top: 64px;left: 212px;}
.question-01 .ck4 {top: 184px;left: 9px;}
.question-01 .ck5 {top: 210px;left: 95px;}

.question-02 .ck1 {top: 10px;left: 123px;}
.question-02 .ck2 {top: 164px;left: 44px;}
.question-02 .ck3 {top: 133px;left: 99px;}
.question-02 .ck4 {top: 170px;left: 160px;}
.question-02 .ck5 {top: 214px;left: 202px;}

.question-03 .ck1 {top: 53px;left: 174px;}
.question-03 .ck2 {top: 118px;left: 196px;}
.question-03 .ck3 {top: 134px;left: 24px;}
.question-03 .ck4 {top: 203px;left: 4px;}
.question-03 .ck5 {top: 210px;left: 238px;}

.question-04 .ck1 {top: 223px;left: 36px;}
.question-04 .ck2 {top: 94px;left: 76px;}
.question-04 .ck3 {top: 145px;left: 96px;}
.question-04 .ck4 {top: 50px;left: 190px;}
.question-04 .ck5 {top: 104px;left: 230px;}

.question-05 .ck1 {top: 201px;left: 62px;}
.question-05 .ck2 {top: 95px;left: 87px;}
.question-05 .ck3 {top: 0px;left: 136px;}
.question-05 .ck4 {top: 140px;left: 241px;}
.question-05 .ck5 {top: 238px;left: 227px;}

.question-06 .ck1 {top: 146px;left: 33px;}
.question-06 .ck2 {top: 153px;left: 122px;}
.question-06 .ck3 {top: 0px;left: 244px;}
.question-06 .ck4 {top: 102px;left: 233px;}
.question-06 .ck5 {top: 205px;left: 108px;}


.landscape-message { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.8); color: white; padding: 20px; border-radius: 10px; text-align: center; z-index: 10; }
.portrait .landscape-message {display: block;}
.game-check .bottom {display: flex; align-items: center; justify-content: space-between;height: calc(100vh - 314px); min-height: 50px;}
.hearts {display: flex; gap: 2px;}
.heart {display: block; width: 30px; height: 30px; background: url(../img/check/heart.png) no-repeat; background-size: 30px auto; font-size: 0;}
.heart.disabled {opacity: 0.3;}
.game-check .data-line {gap: 10px;}
.game-check .data-line.left {gap: 14px;}
.data-line .items {display: flex; gap: 10px;}
.game-container.game-check .profile {width: 36px; height: 36px;}
.btn-mag {display: block; font-size: 0; background: url(../img/check/btn_mag.png) no-repeat; background-size: 40px auto; width: 40px; height: 40px;}
.btn-timer {display: block; font-size: 0; background: url(../img/check/btn_timer.png) no-repeat; background-size: 40px auto; width: 40px; height: 40px;}
.data-line .items button{ opacity: 1; pointer-events: auto; transition: opacity 0.3s ease;}
.data-line .items button.disabled {opacity: 0.5; pointer-events: none;}
.blink {animation: blink-animation 0.4s step-start infinite;}

/* 다른 색깔 찾기 */
.game-dc-intro {position: absolute;width: 100vw;height: 100vh;background: #FDE6D4 linear-gradient(180deg, #F9C1CC 0.5%, #F9C1CC 4%, #FFF1D7 56%); overflow: hidden;}
.game-dc-intro .intro-container {position: relative;top: 56px;height: calc(100vh - 56px);}
.game-dc-intro .intro-container .center {position: relative;padding-top: 20px;display: flex;flex-direction: column;align-items: center;gap: 30px;z-index: 2;}
.game-dc-intro .intro-container .title {width: 320px;}
.game-dc-intro .intro-container .title img {width: 100%;}
.game-dc-intro .intro-container .btn-start {display: block;background: url(../img/dc/btn_start.png) no-repeat;width: 260px;height: 80px;background-size: 260px 80px;font-size: 0;}
.game-dc-intro .intro-container .img {position: absolute;left: 0;right: 0;bottom: 0;background: url(../img/dc/intro.png) center bottom no-repeat;background-size: 100% auto;height: 100%;}
.game-dc {display: flex;flex-direction: column;align-items: center;width: 100vw;height: 100vh;}
.game-dc .top {background: none; height: 200px;}
.game-dc.game-container {background: #FDE6D4 linear-gradient(180deg, #F9C1CC 0.5%, #F9C1CC 4%, #FFF1D7 56%); height: 100vh;}
.game-dc.game-container::before {content: ''; position: absolute; width: 100vw; height: 100vh; background: url(../img/dc/bg.png) center bottom no-repeat; background-size: 100% auto; }
.game-dc .game {position: relative; display: flex;justify-content: center;align-items: center;width: calc(100% - 32px);max-width: 646px;max-height: 646px;background: #fff;border: 2px solid;border-radius: 16px;/* overflow: hidden; */padding: 1px;}
.game-dc .game::after {content: ''; display: block; padding-bottom: 100%;}
.game-dc .palette {position: relative;display: flex;flex-wrap: wrap;left: 0;width: 100%;height: 100%;border-radius: 20px;overflow: hidden;}
.game-dc .palette-item {padding: 2px; border-radius: 3px;background-clip: content-box;cursor: pointer;}
.game-dc-intro .cloud1 {background: url(../img/mole/cloud.png) no-repeat;background-size: 100%;width: 205px;height: 42px;position: absolute;top: 40%;left: -20px;opacity: 0.7;}
.game-dc-intro .cloud2 {background: url(../img/mole/cloud.png) no-repeat;background-size: 100%;width: 205px;height: 42px;position: absolute;top: 27%;right: 5px;opacity: 0.7;}
.game-dc-intro .cloud3 {background: url(../img/mole/cloud.png) no-repeat;background-size: 100%;width: 205px;height: 42px;position: absolute;top: 7%;left: -85px; opacity: 0.7;}
.game-dc-intro .cloud4 {background: url(../img/mole/cloud.png) no-repeat;background-size: 100%;width: 205px;height: 42px;position: absolute;top: 0px;right: -135px; opacity: 0.7;}

/* 벽돌깨기 */
.game-brick-intro {position: absolute;width: 100vw;height: 100vh;background: #BBEDE3 url(../img/brick/intro2.png) center 56px no-repeat; background-size: 100% auto; overflow: hidden;}
.game-brick-intro .intro-container {position: relative;top: 56px;height: calc(100vh - 56px);}
.game-brick-intro .intro-container .center {position: relative;padding-top: 35px;display: flex;flex-direction: column;align-items: center;gap: 60px;z-index: 2;}
.game-brick-intro .intro-container .title {width: 320px;}
.game-brick-intro .intro-container .title img {width: 100%;}
.game-brick-intro .intro-container .btn-start {display: block;background: url(../img/brick/btn_start.png) no-repeat;width: 260px;height: 80px;background-size: 100% auto;font-size: 0;}
.game-brick-intro .intro-container .img {position: absolute;left: 0;right: 0;bottom: 0;background: url(../img/brick/intro.png) center bottom no-repeat;background-size: 100% auto;height: 100%;}
.game-brick {display: flex;flex-direction: column;align-items: center;width: 100vw;height: 100vh; background: #BBEDE3 url(../img/brick/bg.png) bottom center no-repeat; background-size: 100% auto; padding-top: 56px;}
.game-brick #gameCanvas {margin-top: 10px;}


/* 바다를 지켜라 */
.game-bird-intro {width: 100vw; height: 100vh; background: url(../img/bird/underwater2.png) repeat-x; background-size: auto 100%;}
.game-bird-intro .title {position: relative; bottom: -30px; width: 180px; height: 130px; margin: 0 auto;}
.game-bird-intro .title img {width: 100%;}
.game-bird-intro .center {position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh;}
.game-bird-intro .logo-ok {width: 104px; height: 32px;}
.game-bird-intro .logo-ok img {width: 100%;}
.game-bird-intro .btn-form {display: flex; gap: 10px; margin-top: 20px;}
.game-bird-intro .btn-form button {width: 138px; height: 54px; font-size: 0;}
.game-bird-intro .btn-start {background: url(../img/bird/btn_start.png) no-repeat; background-size: 100% auto;}
.game-bird-intro .btn-rank {background: url(../img/bird/btn_rank.png) no-repeat; background-size: 100% auto;}
.game-bird-intro .desc {width: calc(100% - 60px); color: #60300E; padding: 30px 24px; border: 2px solid var(--line); border-radius: 30px; background: #FFF2CD;}
.game-bird-intro .desc p {margin: 0 auto 20px; background: url(../img/bird/howtoplay_title.png) no-repeat; background-size: 100% auto; width: 78px; height: 24px; font-size: 0;}
.game-bird-intro .desc li {position: relative; padding-left: 10px; word-break: keep-all;}
.game-bird-intro .desc li::before {content: '·'; position: absolute; left: 0;}
.game-bird-intro .desc li + li {margin-top: 10px;}
.game-bird-intro .img {position: absolute; z-index: 1; bottom: 0; left: 50%; transform: translateX(-50%); width: 260px; height: 185px; background: url(../img/bird/img.png) no-repeat; background-size: 100% auto;}
.game-bird-intro .img2 {position: absolute; top: 0; left: 0; width: 360px; height: 390px; background: url(../img/bird/effect.png) no-repeat; background-size: 100% auto;}
.game-bird-intro .img3 {position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 295px; height: 192px; background: url(../img/bird/img_top.png) no-repeat; background-size: 100% auto;}
.game-bird-intro .img4 {position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 416px; height: 150px; background: url(../img/bird/img_bottom.png) no-repeat; background-size: 100% auto;}


.game-bird {background: url(../img/bird/underwater.png) repeat-x; background-size: auto 100%;}
.game-bird::before, .game-bird-intro::before {content: ''; position: absolute; top: 30%; left: 0; right: 0; height: 300px; background: url(../img/bird/bg.png) repeat-x; background-size: auto 100%;}
.game-bird canvas {position: relative; display: block; margin: auto;}

.game-bird .pipe {animation: pipeMove 0.5s ease-in-out infinite; /* 수정: 애니메이션 속도 및 반복 설정 */}
.game-bird .collision-effect {animation: collisionFlash 0.2s 2;}
.game-bird .top-form {position: absolute; left: 0; right: 0; z-index: 4;}
.game-bird .health-form {position: relative;padding: 30px 16px 16px;display: flex;gap: 8px;}
.game-bird .okman {position: relative; color: var(--line);background: url(../img/bird/img_hp.png) no-repeat;width: 48px;height: 48px;background-size: 100% auto;font-size: 24px; line-height: 28px; font-weight: 600;}
.game-bird .health-bar {position: relative; background: #FFEDAA; border-radius: 40px; border: 2.5px solid var(--line); width: calc(100% - 48px); height: 40px; padding: 6px; box-sizing: border-box;}
.game-bird .health-bar-inner {overflow: hidden; height: 24px; background: #fff; border: 2px solid var(--line); background-size: 100% auto; border-radius: 40px;}
.game-bird .health-inner {height: 20px; background-color: #FD5C25; display: block; width: 100%; transition: width 1s linear;}

.game-bird .status-bar { text-align: center; color: #60300E; font-weight: bold;}
.game-bird .status-bar .point {font-size: 16px; margin-bottom: 5px;}
.game-bird .status-bar .point p {font-size: 50px; font-weight: bold; color: #FFF8EB; -webkit-text-stroke: 2px #60300E; font-family: 'Hakgyo'; margin-bottom: 2px;}
.game-bird .btn-retry {font-size: 0; width: 180px; height: 46px; background: url(../img/bird/btn_retry.png) no-repeat; background-size: 100% auto;}
.game-bird .btn-point {font-size: 0; width: 180px; height: 46px; background: url(../img/bird/btn_point.png) no-repeat; background-size: 100% auto;}
.game-bird .point-box {padding-top: 55px; font-size: 40px; line-height: 48px; width: 216px; height: 122px; background: url(../img/bird/point.png) no-repeat; background-size: 100% auto;}
.game-bird .btn-form {display: flex; flex-direction: column; gap: 10px; margin-top: 32px;}
.game-bird .modal-content {font-size: 26px; line-height: 28px; font-weight: 600;}

/* 추가된 스타일 */
.game-bird .countdown-container { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1000; display: flex; justify-content: center; align-items: center; }
.game-bird .countdown-img { width: auto; height: 44px; animation: zoomEffect 500ms 1 alternate; }

.hidden {display: none !important;}

@keyframes zoomEffect {0% {transform: scale(1);}100% {transform: scale(1.2);}}
@keyframes pipeMove {0% {transform: translateX(0px); /* 수정: 좌우 움직임으로 변경 */}25% {transform: translateX(40px); /* 수정: 좌우 움직임으로 변경 */}50% {transform: translateX(0px); /* 수정: 좌우 움직임으로 변경 */}75% {transform: translateX(-40px); /* 수정: 좌우 움직임으로 변경 */}100% {transform: translateX(0px); /* 수정: 좌우 움직임으로 변경 */}}
@keyframes collisionFlash {0% { opacity: 1; }50% { opacity: 0.3; }100% { opacity: 1; }}


/* 랭킹 */
.ranking-container * {font-family: 'Pretendard'; font-weight: 600;}
.ranking-container {background: #333; height: 100vh; padding-top: 56px;}
.ranking-form .top {padding: 0; background: none; height: 222px;}
.rank-wrap li {position: absolute; padding: 8px 0 0; text-align: center; width: calc(33% - 16px);height: 130px;border-radius: 16px;border: 2px solid var(--black-4); display: flex; flex-direction: column; align-items: center; gap: 4px;}
.rank-wrap .ranking-position {position: absolute; left: 50%; top: -34px; transform: translateX(-50%); width: 64px; height: 42px; font-size: 0; position: absolute;}
.rank-wrap .rank-01 {background: #FFE6A3; top: 40px; left: 50%; transform: translateX(-50%);}
.rank-wrap .rank-02 {background: #E7E7E7; top: 80px; left: 16px;}
.rank-wrap .rank-03 {background: #FFE1B8; top: 80px; right: 16px;}
.rank-wrap .rank-01 .ranking-position {background: url(../img/rank_01.png) center no-repeat; background-size: 100% auto;}
.rank-wrap .rank-02 .ranking-position {background: url(../img/rank_02.png) center no-repeat; background-size: 100% auto;}
.rank-wrap .rank-03 .ranking-position {background: url(../img/rank_03.png) center no-repeat; background-size: 100% auto;}
.ranking-container .ranking-profile {width: 50px; height: 50px; border-radius: 50%; background: #fff; border: 2px solid var(--black-4);}
.ranking-container .ranking-name {font-size: 20px;}
.ranking-container .ranking-score {width: 110px;height: 32px;border-radius: 40px;background: #FBEDC3;border: 2px solid var(--line);font-size: 16px;line-height: 20px;font-weight: 600;color: var(--line);display: flex;align-items: center;gap: 4px;padding: 0 4px;letter-spacing: -0.5px;align-content: center;}
.ranking-container .ranking-score i {width: 18px; height: 18px;}
.ranking-container .ranking-score * {font-family: 'Ok'; letter-spacing: -0.5px;}
.ranking-container .ranking-list {padding: 16px 16px 34px; display: flex; gap: 16px; flex-direction: column; height: calc(100vh - 56px - 222px - 100px - 60px - 60px); overflow-y: auto; position: relative;}
.ranking-item.user::before {content: ''; position: absolute; top: -40px; left: 0; right: 0; height: 40px; background:  linear-gradient(180deg, rgba(51, 51, 51, 0) 0%, rgba(51, 51, 51, 0.5) 30%, #333 60%, #333 100%);}
.ranking-item {color: #fff; display: flex; align-items: center; height: 40px; gap: 10px; position: relative;}
.ranking-item .ranking-position {font-size: 24px; width: 60px; height: 100%;line-height: 40px; text-align: center;}
.ranking-item .ranking-profile {width: 34px; height: 34px;}
.ranking-item .ranking-score {position: absolute; right: 16px;}
.ranking-item.user {margin: 0 16px 16px; position: relative;}
.btn-arr-w {display: block; width: 24px; height: 24px; background: url(../img/arr_w.png) no-repeat; background-size: 24px 24px; font-size: 0;}

.ranking-form {display: none;}
.ranking-form.active {display: block;}

.ranking-container .game-tabs-container {position: relative; overflow: hidden;}
.ranking-container .game-tabs {display: flex;transition: transform 0.3s ease;width: 300%;}
.ranking-container .game-tab {flex: none;width: 100vw;text-align: center;padding: 20px 0;font-size: 1.2em;color: #fff;}

.ranking-container .arrow {position: absolute; top: 50%; transform: translateY(-50%); cursor: pointer; display: block; width: 30px; height: 30px; border-radius: 50%; background: #fff url(../img/arr_left.png) no-repeat; background-size: 30px auto; font-size: 0; z-index: 10;}
.ranking-container .arrow.left {left: 20px;}
.ranking-container .arrow.right {right: 20px; transform: translateY(-50%) rotate(180deg);}
.ranking-container .btn-form {text-align: center; margin-top: 30px;}
.ranking-container .btn-game {background: #FF5300; color: #fff; font-size: 16px; line-height: 24px; width: 180px; height: 40px; border-radius: 40px;}
.arr-w {display: inline-block; transform: rotate(180deg); width: 24px; height: 24px; background: url(../img/arr_w.png) no-repeat; background-size: 24px 24px; font-size: 0;}

/* 다운로드 */
.down-container .header {background: #fff068;}
.down-container .container {padding: 56px 16px; background: #fff068;}
.down-container * {font-family: 'Pretendard';}
.down-container .font-container {max-width: 800px; margin: 0 auto;}
.down-container .text-form {background: url(../img/txt_down.png) no-repeat; background-size: 100% auto; font-size: 0; width: 302px; height: 145px; margin: 0 auto 40px;}
.down-container .form {display: none; background: #fff; padding: 16px;}
.down-container .form.on {display: block;}
.down-container .tab {position: relative; margin: 30px 0 0; display: flex; justify-content: center; align-items: flex-end; gap: 10px;}
.down-container .tab li {font-size: 20px; font-weight: 600; text-align: center; flex: 1; height: 44px;display: table; position: relative;}
.down-container .tab li a {transition: ease-in-out 0.3s; word-break: keep-all; display: table-cell; vertical-align: middle; border-top-left-radius: 14px; border-top-right-radius: 14px; color: #fff; position: relative;}

.down-container .tab li:nth-child(1) a {background-color: #009688;}
.down-container .tab li:nth-child(2) a {background-color: #FF9800;}
.down-container .tab li:nth-child(1).on a {background-color: #009688;}
.down-container .tab li:nth-child(2).on a {background-color: #03a9f4;}
.down-container .tab li:nth-child(1).on a {background-color: #FF5722;}
.down-container .tab li:nth-child(2).on a {background-color: #03a9f4;}
.down-container .tab li a:active {transform: scale(0.95);}

.down-container div.list + div.list {margin-top: 40px;}
.down-container .list img {width: 100%;}
.down-container .list .txt-s {text-align: right; margin-top: 10px; font-size: 12px; color: #888;}
.down-container .right-edit {border: none; height: 200px; padding: 16px; overflow-y: auto; font-size: 20px; color: #555; line-height: 28px; outline: 0;}
.down-container .small-text {font-size: 14px; margin: 8px 0 8px 10px;}
.down-container .bul-text {font-size: 22px; line-height: 28px; padding-left: 12px; position: relative;}
.down-container .bul-text::before {content: ''; width: 4px; height: 4px; border-radius: 50%; background-color: #ff3d75; position: absolute; left: 0; top: 11px;}
.down-container .form-c .bul-text {color: #FF3D75;}
.down-container .form-g .bul-text {color: #FFA800;}
.down-container .form-d .bul-text {color: #34ABFF;}
.down-container .form-c .bul-text::before {background-color: #FF3D75;}
.down-container .form-g .bul-text::before {background-color: #FFA800;}
.down-container .form-d .bul-text::before {background-color: #34ABFF;}
.down-container .box-edit {border: 2px solid; overflow: hidden; height: 200px; border-radius: 12px; position: relative;}
.down-container .form-c .box-edit {border-color: #FF3D75;}
.down-container .form-g .box-edit {border-color: #FFA800;}
.down-container .form-d .box-edit {border-color: #34ABFF;}
.down-container .btn-control {display: flex; gap: 16px; height: 70px; justify-content: center; margin: 40px 0;}
.down-container .text-box {border-top: 1px dashed #ccc; padding: 24px 0; color: #777;}
.down-container .text-box p {font-size: 16px; font-weight: 600; color: #555;}
.down-container .text-box p + p {font-size: 14px; margin: 16px 0 8px; color: #777;}
.down-container .text-box ul li {font-size: 14px; line-height: 20px; padding-left: 8px; position: relative;}
.down-container .text-box ul li::before {content: ''; position: absolute; left: 0; top: 7px; width: 3px; height: 3px; border-radius: 50%; background-color: #777;}
.down-container .text-box ul li + li {margin-top: 8px;}
.down-container ul.motion-list {display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px;}
.down-container ul.motion-list li {width: 100%; text-align: center;}
.down-container ul.motion-list li img {border-radius: 16px;background: #D9D9D9;max-width: 500px;height: 200px;object-fit: cover;object-position: -5px -87px;margin: 0 auto;}
.down-container .motion-button {margin: 8px 0 0;color: #333;font-weight: 600;display: flex;align-items: center;justify-content: space-between;max-width: 500px;margin: 8px auto 0;}
.down-container .btn-form {display: flex; gap: 16px; margin: 16px 0; height: 30px;}
.down-container .book-bottom .btn-form {display: flex; gap: 16px; margin: 24px 0 0; height: auto; justify-content: center;}
.btn-font-ttf, .btn-orange {flex: 1; background-color: #FF5722; color: #fff; border-radius: 12px;}
.btn-font-otf {flex: 1; background-color: #FF9800; color: #fff; border-radius: 12px;}
.btn-gray {background-color: #65656f; color: #fff; border-radius: 12px; padding: 8px 12px;}
.btn-font a {font-size: 0; width: 100px; height: 100px; position: fixed; bottom: 16px; right: 16px; background: url(../img/btn_font.png) no-repeat; background-size: 100% auto; animation: shake 2s ease-out infinite;}

.font-c {font-family: 'okchan';}
.font-d {font-family: 'okddung';}
.font-g {font-family: 'okgung';}

@keyframes blink-animation {50% {opacity: 0;}100% {opacity: 1;}}
@keyframes shake {0% { transform: translate(0, 0px) }25% { transform: translate(0, 5px)}50% {transform: translate(0, 0px)}75% {transform: translate(0, 10px)}}
@keyframes zoomEffect {to {font-size: 18px;font-weight: 700;}}
@keyframes bgChangeEffect {from {background-color: #FFF;}to {background-color: #DEA5A4;}}
@keyframes blinkingEffect {from {opacity: 0;}to {opacity: 1;}}
@keyframes movingEffect {from {transform: translate(-50%, -50%) scale(0.8)}to {transform: translate(-50%, -50%) scale(1.0)}}
@keyframes vibrationEffect {0% { left: 0; }25% { left: -2px; }50% { left: 2px; }75% { left: -2px; }100% { left: 0; }}
@keyframes glow {0% { box-shadow: 0 0 5px #FFD700; }50% { box-shadow: 0 0 20px #FFD700; }100% { box-shadow: 0 0 5px #FFD700; }}
@keyframes movetrain {0% { transform: translate(200px, -120px) }100% { transform: translate(0, 0)}}

@media screen and (min-width: 768px) {
    .intro-container {max-width: 800px; margin: 0 auto;}
}