/* 공통 */
html {font-size: calc(14px + .1vw);}

.top_box {padding-top: 15px; position: relative; padding-left: 10px;}
.top_box .inner_box {position: absolute;}

.top_box .mission_box {background: #604233; padding: 10px 20px; border-radius: 50px; color: #ded2c4; display: inline-block;}
.top_box .mission_box .circle {width: 10px; height: 10px; background: #ded2c4; display: inline-block;}
.top_box .score_box {background: #d75845; padding: 3px 10px; border-radius: 50px; color: #fff; position: relative; top: 8px; display: inline-block;}
.top_box .score_box:last-child {background: #41a2d8;}
.top_box .score_box.one {background: #d75845;}
.top_box .score_box .character img {width: 2.1vw; position: relative; top: 3px;}
.top_box .score_box .text_box {position: relative; top: -5px; display: inline-block}

.top_box .right_box {position: absolute; right: 10px; color: #604233; top: 30px;}
.top_box .right_box a { display: inline-block; line-height: 0em; padding-bottom: 0.5em; background:#bfd4d7; margin-right: 10px; color: #604233; font-weight: bold; font-size: calc(18px + .1vw);}
.top_box .right_box a:last-child {background: #f3988f;}

.game_bg {height: 56vw; position: relative}
.game_bg .game_box {position: relative; top: 55%; transform: translateY(-50%)}
.game_bg .game_box .inner_box {text-align: center;}
.game_bg .game_box .box {display: inline-block; margin: .5vw; width: 40vw;}
.sub_text {position: absolute; top: 60px; left: 30px;}
.sub_text p {color: #604233; font-size: calc(12px + .1vw); line-height: .2em}
.sub_text .circle {width: 8px; height: 8px; background: #604233; display: inline-block; margin-right: 5px;}

/* 스크롤 */
.inner_box::-webkit-scrollbar {width: 12px;}
.inner_box::-webkit-scrollbar-track { background-color:#ffffff;}
.inner_box::-webkit-scrollbar-thumb { background: #775450; border-radius: 10px;}

/* 키보드 */
.keyboard {position: absolute; right: 10px; bottom: 10px; z-index: 9; display: none;}
.keyboard a {width: 100px; display: inline-block;}
.keyboard img {width: 100%;}

/* 변별 게임 */
.byunbyul {background: url(../img/bg/bg_dino.png) center center no-repeat; background-size:cover; }
.byunbyul .left_box .object {width: 30vw; position: relative; left: 0px; top: 0px;}
.byunbyul .left_box .object2 {width: 25vw; position: absolute; left: 5vw; top: 15vw; animation:animatedbang .8s infinite;}
@keyframes animatedbang{0%{transform:translateX(-5vw);} 50%{transform:translateX(10vw);} 100%{transform:translateX(-5vw);}}
.byunbyul .left_box .object2.bottom {top: 28vw;}
.byunbyul .right_box .teacher_box .teacher {width: 8vw; position: relative; left: 0px; top: 0px;}
.byunbyul .right_box .teacher_box .speaker {width: 5vw; position: absolute;}
.byunbyul .right_box .question_box .row {display: block;}
.byunbyul .right_box .question_box a {width: 18vw; height: 18vw; display: inline-block; border: 8px solid #704b9b; margin: .2vw;}
.byunbyul .right_box .question_box .answer {border: 8px solid #e8d05b;}
.byunbyul .right_box .question_box a img {width: 100%; height: 100%; background: #fff;}

/* 폭탄 게임 */
.boom {background: url(../img/bg/bg_land.png) center center no-repeat; background-size:cover;}
.boom .left_box .object {position: relative; left: 2vw; width: 36vw; margin-top: 38px;}
.boom .left_box .object2 {font-size: calc(150px + .1vw); color: #f1e3d6; position: absolute; left: 22vw; top:20vw; transform: translate(-50%,-50%); z-index: 9;}
.boom .right_box .card_box {background: #fff; border-radius: 15px; padding: 20px 10px; position: relative; top: -5vw;}
.boom .right_box .card_box .inner_box {margin: .2vw;}
.boom .right_box .card_box .answer_box {margin-top: -5px;}
.boom .right_box .card_box p {color: #3a4a6d; font-weight: bold; margin: 0px; top:20vw; font-size: calc(14px + .1vw);}
.boom .right_box .card_box .picture_box, .boom .right_box .card_box .button_box  {display: inline-block;}
.boom .right_box .card_box .picture_box img {width: 18vw;}
.boom .right_box .card_box .button_box {position: relative; top:-25px; left: -10px;}
.boom .right_box .card_box .button_box .first img{width: 4vw; margin: .2vw;}
.boom .right_box .card_box .button_box .second img{width: 8.5vw; margin: .2vw;}

/* 도블 게임 */
.doble {background: url(../img/bg/bg_beach.png) center center no-repeat; background-size:cover;}
.doble .game_box {margin-top: 1vw;}
.doble .game_box .box {background: url(../img/round.png) center center no-repeat; background-size: contain; overflow: hidden; position: relative; left: 0px; top: 0px; width: 40vw; height: 40vw;}
.doble .game_box .img_box {width: 40vw; height: 40vw; border-radius: 500px; overflow: hidden; border: 10px solid #604233; padding: 10px; padding-top: 50px}
.doble .game_box img {width: 10vw;}

/* 주사위 게임 */
.dice {background: url(../img/bg/bg_amazon.png) center center no-repeat; background-size:cover; }
.dice .game_box {margin-top: 2vw;}
.dice .board  {background: url(../img/board/board3.png) center center no-repeat; background-size: contain;  margin: 0 auto; position: relative; left: 0px; top: 0px; width: 100%; height: 45vw;}
.dice .board img{border-radius: 500px; width: 7vw; height: 7vw; position: absolute;}
.dice .board .head {width: 5vw; height:5.5vw; height: 5vw; top:11vw; padding: 5px;}
.dice .board .head:first-of-type {left: 9.5vw;}
.dice .board .head:nth-of-type(2) {left: 5vw;}
.dice .board img:nth-of-type(3) {left: 14.75vw; top: 4.75vw;}
.dice .board img:nth-of-type(4) {left: 22vw; top: 1.7vw;}
.dice .board img:nth-of-type(5) {left: 30.5vw; top: .5vw;}
.dice .board img:nth-of-type(6) {left: 37vw; top: 5.5vw;}
.dice .board img:nth-of-type(7) {left: 33vw; top: 13vw;}
.dice .board img:nth-of-type(8) {left: 26vw; top: 18vw;}
.dice .board img:nth-of-type(9) {left: 20vw; top: 24.6vw;}
.dice .board img:nth-of-type(10) {left: 22vw; top: 33vw;}
.dice .board img:nth-of-type(11) {left: 29vw; top: 37.5vw;}
.dice .board img:nth-of-type(12) {left: 37.15vw; top: 37vw;}
.dice .board img:nth-of-type(13) {left: 46vw; top: 34vw;}
.dice .board img:nth-of-type(14) {left: 50.5vw; top: 26vw;}
.dice .board img:nth-of-type(15) {left: 52vw; top: 18vw;}
.dice .board img:nth-of-type(16) {left: 53.5vw; top: 9vw;}
.dice .board img:nth-of-type(17) {left: 60vw; top: 3.5vw;}
.dice .board img:nth-of-type(18) {left: 69.3vw; top: 3.5vw;}
.dice .board img:nth-of-type(19) {left: 75vw; top: 9vw;}
.dice .board img:nth-of-type(20) {left: 75.5vw; top: 17vw;}

/* 결과 */
.final {background: url(../img/bg/bg_universe.png) center center no-repeat; background-size:cover; }
.final .top_box .right_box a {color: #fff;}
.final .game_box  {margin-left: -12vw; margin-top: -5vw}
.final .game_box .trumph {position: relative; z-index: 9; width: 12vw; top: -32vw; left:11vw;}
.final .top_box {padding-top: 7vw;}
.final .top_box .left_box {left: 50%; transform: translateX(-50%);}
.final .left_box .mission_box {background: #fff;  padding: 10px 100px}
.final .left_box .mission_box span {color: #3a4a6d; font-weight: bold;}
.final .left_box .mission_box .circle {background: #dc563a;}
.final .game_box .box {border-radius: 15px; width: 38vw; height: 38vw; overflow: hidden; position: relative; left: 0px; top: 0px; border: 3px solid #fff; margin: 0 25px;}
.final .game_box .box .inner_box {background: #fff;  width: 38vw; height: 39vw; padding: 10px; overflow-y: auto; margin-top: -10px; }
.final .game_box .winner {border: 3px solid #eaad08;}
.final .game_box .score_box {padding: 10px; border-radius: 50px; background: #d75845; color: #fff;}
.final .game_box .box:last-child .score_box {background: #41a2d8;}
.final .game_box .box img {width: 15vw;}
.final .game_box .img_box {margin-top: -15px;}
.final .game_box .img_box div {display: inline-block;}
.final .game_box .img_box p {font-weight: bold; color: #485881; margin: 0px;}

/* 캐릭터 */
#printResult {max-width: 120vw;}
.character_popup .row {margin: 0 auto; text-align: center;}
.character_popup .modal-content .name {margin: 5px;}
.character_popup .box {border: 3px solid #b0847f; border-radius: 15px; display: inline-block; overflow: hidden; margin-top: 15px; display: inline-block; width: 20vw; height: 20vw; margin: .2vw;}
.character_popup .box .inner_box {width: 20vw; height: 20vw; padding: 10px; overflow-y: auto;}
.character_popup a.selected {border: 5px solid #8eb1b6; border-radius: 150px; width: 8vw; height: 8vw; display: inline-block;}
.character_popup a img {width: 6vw; height: 6vw; display: inline-block; margin: .5vw; position: relative; left: 0px; top: 0px;}

/* 캐릭터2 */
.character_popup.two .small_p {font-size: calc(14px + .1vw); margin-top: -1vw;}
.character_popup.two .box {border: 3px solid #b0847f; border-radius: 15px; display: inline-block; overflow: hidden; margin-top: 15px; display: inline-block; height: 25vw; margin: .2vw; display: inline-block}
.character_popup.two .box .inner_box {height: 25vw; padding: 10px; overflow-y: auto;}
.character_popup.two .left_box {width: 21vw;}
.character_popup.two .right_box {width: 30vw;}
.character_popup.two .left_box .inner_box {width: 21vw;}
.character_popup.two .right_box .inner_box {width: 30vw;}

.character_popup.two .left_box a img {width: 10vw; height: 16vw; margin-top: 2em;}
.character_popup.two .left_box .name {margin-top: -.5vw;}
.character_popup.two .left_box .text_box {margin-top: 2vw; border-radius: 50px; background: #7baabc;}
.character_popup.two .left_box .text_box p:first-child {padding-top: 2px;}

.character_popup.two .right_box .inner_box {overflow: auto;}
.character_popup.two .right_box .inner_box div {margin-bottom: 3vw;}
.character_popup.two .right_box .inner_box div:first-child {margin-top: -1vw;}
.character_popup.two .right_box .inner_box div p {background: #492f27; border-radius: 50px; padding: 5px; color: #fff; font-size: calc(14px + .1vw);}
.character_popup.two .right_box div a {display: inline-block; position: relative;}
.character_popup.two .right_box div a span {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-weight: bold; color: #492f28; background: #fff; opacity: 0; z-index: 9;}
.character_popup.two .right_box div a:hover span {opacity: 1;}
.character_popup.two .right_box div a img {height: 3vw; width: auto;}
.character_popup.two .right_box .chracter a img {height: 9vw;}
.character_popup.two .right_box .shoe a img {height: 2vw;}
.character_popup.two .right_box div:nth-of-type(5) a span {margin-left: 2vw; width:30px;}

.character_popup.two .sub_popup {width: 50%;  border-radius: 15px; text-align: center; padding-top: 15px; color: #492f27; font-weight: bold; border:3px solid #b0847f; position: absolute; z-index: 9999; left: 50%; top: 50%; transform: translate(-50%,-50%); background: #fafafa;  box-shadow: 5px 5px 5px 5px rgba(128, 128, 128, 0.3); overflow: hidden;}


/* 프로필 */
.profile_popup {overflow-x: hidden;}
.profile_popup .input-field {margin: 0px; margin-bottom: 10px;}
.profile_popup .title {font-size: calc(14px + .1vw); text-align: left; margin: 0px; margin-left: 15px;}
.profile_popup select option, .profile_popup select {font-size: calc(16px + .1vw); text-align: left; color: #492f27; font-weight: bold;}
.profile_popup select {border-bottom: 3px solid #8eb1b6;}
.profile_popup .row .col.s6 {width: 50%; margin-right: 10px;}
.profile_popup .row .col.s6.age_box {margin-top: 10px; width: 15%;}
.profile_popup .row .col.s6.check_box {width: 30%;}
.profile_popup .check_box {position: relative; left: 0px; top: 0px;}
.profile_popup .container {font-size: calc(14px + .1vw); text-align: left; position: relative; top: 15px;}
.profile_popup .checkmark {position: absolute; top: .8vw; display: block;}

@media (min-width: 1024px){
.game_bg .game_box {top: 50%;}
.top_box .score_box .character img {width: 2.5vw; max-width: 32px;}
.profile_popup .row .col.s6 {width: 39%;}
.profile_popup .row .col.s6.check_box {width: 40%}
.profile_popup .checkmark {top: 9px;}
.popup.modal {margin-left: 0vw;}
.boom .left_box .object2 {font-size: calc(300px + .1vw); top: 16vw; left:24vw;}
.final .game_box  {top: 55%;}
.character_popup.two .left_box {width: 18vw;}
.character_popup.two .right_box {width: 26vw;}
.character_popup.two .left_box .inner_box {width: 18vw;}
.character_popup.two .right_box .inner_box {width: 26vw;}
}

@media (max-width: 1024px){
.top_box .score_box .character img {width: 3vw;}
.top_box .right_box a { display: block; margin-top: 15px;}
.top_box .right_box a:last-child {margin-top: 20px; text-align: center;}	
.boom .left_box .object2 {font-size: calc(150px + .1vw); color: #f1e3d6; position: absolute; left: 23vw; top:18vw; transform: translate(-50%,-50%); z-index: 9;}
.profile_popup .row .col.s6 {width: 36%;}
.profile_popup .row .col.s6.check_box {width: 40%}

}

@media (max-width: 920px){
.top_box .left_box {top: 25px; padding-left: 10px;}
.top_box .mission_box {display: block; text-align: center;}
.sub_text {top: 120px}
.byunbyul .game_box {top: 65%}
.top_box .score_box .character img {width: 3.6vw;}
}

@media (max-width: 768px){
.game_bg {height: 76vw;}
.result {height: 50vw;}
.boom .left_box .object2 {font-size: calc(120px + .1vw);}
.profile_popup .row .col.s6 {width: 39%;}
.profile_popup .row .col.s6.check_box {width: 40%}
.character_popup .box {display: block; margin: 0px; width: 56vw; height: 56vw; margin: 0 auto; margin-bottom: 3vw; }
.character_popup .box .inner_box {width: 56vw; height: 56vw; padding: 10px;}
.character_popup a.selected {width: 20vw; height: 20vw; margin: 1vw; border: 1vw solid #8eb1b6; }
.character_popup a img {width: 15vw; height: 15vw; margin: 1vw;}	
	.top_box .score_box:last-child {padding-top: 3px;}
}

@media (max-width: 667px){
.game_bg {height: 68vw;}
.top_box .score_box .character img {width: 4vw;}
.top_box .score_box .character img {width: 4vw;}
.profile_popup .row .col.s6 {width: 32%;}
.profile_popup .row .col.s6.check_box {width: 45%}

}

@media (max-width: 375px){
.top_box {margin: 0 10px;}
.top_box .inner_box {position: absolute;}
.top_box .left_box {left:50%; transform: translateX(-50%); width: 100%; text-align: center;}
.top_box .right_box {left: 0%; transform: translateX(20%)}
.top_box .right_box a {display: inline-block;}
.top_box .left_box {margin-top: 50px}
.top_box .mission_box .circle {display: none;}

.top_box .score_box .character img {width: 7vw;}

.game_bg {height: 300vw;}
.game_bg .game_box .box {display: block; width: 100%;}
.game_bg .game_box .left_box {margin-bottom: 10vw;}

/* 변별 게임 */
.byunbyul .left_box .object {width: 60vw;}
.byunbyul .left_box .object2 {width: 56vw;left: 8vw; top: 15vw;}
.byunbyul .left_box .object2.bottom {top: 50vw;}
.byunbyul .right_box .teacher_box .teacher {width: 28vw;}
.byunbyul .right_box .teacher_box .speaker {width: 15vw;}
.byunbyul .right_box .question_box a {width: 48vw; height: 48vw;}
.byunbyul .right_box .question_box .answer {width: 48vw; height: 48vw;}

/* 폭탄 게임 */
.boom .left_box .object {width: 86vw;}
/*.boom .right_box .card_box {margin: 10px;}*/
.boom .right_box .card_box {top: 0px;}
.boom .right_box .card_box .inner_box {margin: .2vw;}
.boom .right_box .card_box .picture_box, .boom .right_box .card_box .button_box  {display: block;}
.boom .right_box .card_box .picture_box img {width: 50vw;}
.boom .left_box .object2 {font-size: calc(120px + .1vw); top: 50vw; left: 46vw}
.boom .right_box .card_box .button_box {top: 10px; left: 0px;}
.final .game_box .box {width: 36vw; height: 36vw;}
.final .game_box .box .inner_box {width: 36vw; height: 38vw;}
.boom .right_box .card_box .button_box .first img{width: 12vw;}
.boom .right_box .card_box .button_box .second img{width: 24vw; margin-bottom: 10px;}	

/* 도블 게임 */
.doble {background: url(../img/bg/bg_beach.png) center center no-repeat; background-size:cover;}
.doble .game_box .box {width: 96vw; height: 96vw; margin: 0 auto;}
.doble .game_box .img_box {width: 96vw; height: 96vw;}
.doble .game_box img {width: 25vw;}	
.doble .game_box .img_box {padding: 5vw;}

/* 주사위 게임 */
.dice {height: 120vw;}
.dice .game_box {margin-top: 10vw;}

/* 결과 */
.final {height: 260vw;}
.final .game_box  {margin-left: 0px; margin-top: -15vw; padding: 36px;}
.final .game_box .trumph {width: 25vw; top: 15vw; left:-36vw;}
.final .game_box .box {margin: 0px; width: 100%; height: 96vw; }
.final .game_box .left_box {margin-bottom: 10vw;}
.final .game_box .box .inner_box {width: 100%; height: 97vw;}
.final .game_box .box img {width: 35vw;}
.final .game_box .img_box {margin-top: -15px;}

/* 프로필 */
.profile_popup .row .col.s6 {width: 76%;}
.profile_popup .row .col.s6.check_box {width: 90%; top: -6vw}
.profile_popup .checkmark {top: 2vw}


/* 캐릭터2 */
.character_popup.two .box {display: block; height: 62vw;}
.character_popup.two .box .inner_box {height: 62vw;}
.character_popup.two .left_box {width: 100%; margin-bottom: 3vw;}
.character_popup.two .right_box {width: 100%;}
.character_popup.two .left_box .inner_box {width: 100%}
.character_popup.two .right_box .inner_box {width: 100%}

.character_popup.two .left_box a img {width: 20vw; height: auto; margin-top: 0em;}
.character_popup.two .left_box .name {margin-top: -.5vw;}
.character_popup.two .left_box .text_box {margin-top: 2vw; border-radius: 50px; background: #7baabc;}
.character_popup.two .small_p {margin-top: -2vw}

.character_popup.two .right_box div a img {height: 9vw; width: auto;}
.character_popup.two .right_box .chracter a img {height: 20vw;}
.character_popup.two .right_box .shoe a img {height: 4vw;}
.character_popup.two .right_box .acc a img {height: 10vw;}
.character_popup.two .right_box .acc a:nth-child(2) img {height: 6vw!important;}
.character_popup.two .right_box .acc a:nth-child(3) img {height: 15vw!important;}
.character_popup.two .right_box .acc a:nth-child(4) img {height: 12vw!important;}
.character_popup.two .right_box .acc a:nth-child(5) img {height: 10vw!important;}
.character_popup.two .right_box .acc a:nth-child(6) img {height: 4vw!important;}
.character_popup.two .right_box .acc a:nth-child(7) img {height: 15vw!important;}

.character_popup.two .sub_popup {width: 50%;  border-radius: 15px; text-align: center; padding-top: 15px; color: #492f27; font-weight: bold; border:3px solid #b0847f; position: absolute; z-index: 9999; left: 50%; top: 50%; transform: translate(-50%,-50%); background: #fafafa;  box-shadow: 5px 5px 5px 5px rgba(128, 128, 128, 0.3); overflow: hidden; display: none;}
.sub_text {top: 200px; left: 5px;}
.sub_text p {font-size: calc(12px + .1vw); line-height: 1em; text-align: center;}
.sub_text .circle {display: none}

.byunbyul .game_box   {top: 80%}
}

.hwaldong_title {
	font-size: 1.25rem;
	font-weight: bold;
	color: #614233;
	line-height: 1;
}

.hwaldong_button {
	font-size: 1em;
	font-weight: bold;
	border: 1px solid #614233;
	color: #614233;
	border-radius: 20px;
	padding: 0.4rem 0.8rem;
	background-color: #f6f5f6;
}

.hwaldong_print {
	font-size: 1.5rem;
	font-weight: bold;
	color: #614233;
}

.bingo_choice_cell {
    background-color: #EDEDED;
    border: 1px solid white;
    /*padding: 30px 15px;*/
}

/*
ZUDOG - MODAL
 */

.game_modal_title {
	text-decoration: underline;
	text-underline-position: under;
}

.game_modal_okay {
	background: lightgray;
	width: 100%;
	padding: 1rem;
	color: gray;
}

.game_modal_radio {

}