@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");


* { margin: 0px; padding: 0px; -webkit-overflow-scrolling : touch; outline: 0 none !important; font-family: sans-serif; }
html { /* opacity: 0; */ }
html, body {
	display: inline-block; width: 100%; height: auto;
	margin: 0px; padding: 0px;
	font-size: 14px;
	font-family: "Pretendard", sans-serif;
}

body { 
	position: relative;
	-webkit-overflow-scrolling: touch; float: left;
	overflow-x: hidden; 
}

.slow {
	transition: all 100ms ease-in-out;
	-webkit-transition: all 100ms ease-in-out;
	-moz-transition: all 100ms ease-in-out;
}



::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {display: block; height: 0px; background: #efefef; }
::-webkit-scrollbar {width: 0px; height: 0px; border: 3px solid #fff; }
::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {display: block; height: 0px; background: #efefef; }
::-webkit-scrollbar-track {background: #efefef; -webkit-border-radius: 0px; border-radius:0px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.2); }
::-webkit-scrollbar-thumb {height: 0px; width: 0px; background: rgba(0,0,0,.2); -webkit-border-radius: 0pxborder-radius: 0px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.1); }


.base { position: relative; display: inline-block; float: left; box-sizing: border-box; }

main{
	left: 50%;
	width: 100%; max-width: 720px; height: auto;


    -webkit-transform: translate(-50%, 0%);
    -ms-transform: translate(-50%, 0%);
    transform: translate(-50%, 0%);

	overflow: hidden; 

}
section, article { width: 100%; height: auto; }
img.sectionBg{ width: 100%; height: auto;}

.tester { background-color: #000; opacity: 0.5; }




.game_none { display: none; }

.step_01 {  width: calc((720 / 720) * 100vw); height: calc((1280 / 720) * 100vw); }
.step_01 img { width: 100%; height: 100%; }
.step_01 input.nickname {
	position: absolute; top: calc((958 / 720) * 100vw); left: calc((194 / 720) * 100vw);
	width: calc((354 / 720) * 100vw); height: calc((30 / 720) * 100vw);
	font-size: calc((22 / 720) * 100vw); 
	letter-spacing: calc((-0.2 / 720) * 100vw);
	color: #fff;  font-weight: bold;
	background-color: #00000000;
	border: 0px;
	z-index: 10;
}

.step_01 button.btn_nick_name {
	position: absolute; top: calc((1085 / 720) * 100vw); left: calc((92 / 720) * 100vw);
	width: calc((546 / 720) * 100vw); height: calc((102 / 720) * 100vw);
	background-color: #00000000;
	cursor: pointer;
	border: 0px;
	z-index: 10;
}


@media (min-width: 720px) { 
	.step_01 { width: 720px; height: 1280px; }


	.step_01 input.nickname {
		top: 958px; left: 194px;
		width: 345px; height: 30px;
		font-size: 22px; 
		letter-spacing: -0.2px;
	}

	.step_01 button.btn_nick_name {
		top: 1085px; left: 92px;
		width: 546px; height: 102px;
	}


}






.step_02 { width: calc((720 / 720) * 100vw); height: calc((1280 / 720) * 100vw); }
.step_02 img { width: auto; height: auto; }


@media (min-width: 720px) { 
	.step_02 { width: 720px; height: 1280px; }


}

html, body {
  overscroll-behavior: none;
}


.image-container {
	width: 100%;
	height: calc((1280 / 720) * 100vw);
	overflow: hidden;   /* 스크롤 제거 */
	position: relative;
	border: 0px solid #ccc;
	background: #000;   /* 이미지 비율 안 맞을 때 배경 */

	  touch-action: auto;         /* 터치 스크롤 기본동작 끔 (우리는 드래그만) */
}

.image-container .image-wrapper img {
  position: absolute;
  top: 0; left: 0;

  user-select: none;
  -webkit-user-drag: none;
  cursor: grab;

}

/* .image-container img:active { cursor: grabbing; } */


  
@media (min-width: 720px) { 
	.image-container { height: 1280px; }
}


.image-wrapper {
  position: absolute;
  top: 0;
  left: 0;
}

.image-wrapper img {
  display: block;
}

.hotspot {
  position: absolute;
  width: 80px; height: 80px;   /* 원하는 크기 */
  /* background: rgba(255,0,0,0.3); */ /* 디버깅용 */
  border: none;
}


.image-wrapper img { pointer-events: none; }
.hotspot { pointer-events: auto; }
.image-container { touch-action: auto; cursor: grab; }




.check.on { 
	background-image: url(../images/game/check_img.png); 
}

.check {
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}




.check_01 {
    left: calc((60 / 720) * 100vw); top: calc((548 / 720) * 100vw);
    width: calc((138 / 720) * 100vw); height: calc((160 / 720) * 100vw);
}


.check_02 {
    left: calc((10 / 720) * 100vw); top: calc((945 / 720) * 100vw);
    width: calc((410 / 720) * 100vw); height: calc((355 / 720) * 100vw);
}



.check_03 {
    left: calc((375 / 720) * 100vw); top: calc((490 / 720) * 100vw);
    width: calc((110 / 720) * 100vw); height: calc((130 / 720) * 100vw);
}


.check_04 {
    left: calc((705 / 720) * 100vw); top: calc((715 / 720) * 100vw);
    width: calc((120 / 720) * 100vw); height: calc((115 / 720) * 100vw);
}



.check_05 {
    left: calc((960 / 720) * 100vw); top: calc((480 / 720) * 100vw);
    width: calc((90 / 720) * 100vw); height: calc((70 / 720) * 100vw);
}

.check_06 {
    left: calc((1634 / 720) * 100vw); top: calc((570 / 720) * 100vw);
    width: calc((90 / 720) * 100vw); height: calc((90 / 720) * 100vw);
}


.check_07 {
    left: calc((1795 / 720) * 100vw); top: calc((680 / 720) * 100vw);
    width: calc((140 / 720) * 100vw); height: calc((180 / 720) * 100vw);
}

.check_08 {
    left: calc((1850 / 720) * 100vw); top: calc((380 / 720) * 100vw);
    width: calc((70 / 720) * 100vw); height: calc((70 / 720) * 100vw);
}

.check_09 {
    left: calc((2190 / 720) * 100vw); top: calc((660 / 720) * 100vw);
    width: calc((160 / 720) * 100vw); height: calc((140 / 720) * 100vw);
}


.check_10 {
    left: calc((2075 / 720) * 100vw); top: calc((805 / 720) * 100vw);
    width: calc((310 / 720) * 100vw); height: calc((380 / 720) * 100vw);
}


@media (min-width: 720px) { 
	.check_01 {
		left: 60px; top: 548px;
        width: 138px; height: 160px;
	}

	.check_02 {
        left: 10px; top: 945px;
        width: 410px; height: 355px;
	}

	.check_03 {
        left: 375px; top: 490px;
        width: 110px; height: 130px;
	}

	.check_04 {
        left: 705px; top: 715px;
        width: 120px; height: 115px;
	}

	.check_05 {
        left: 960px; top: 480px;
        width: 90px; height: 70px;

	}

	.check_06 {
        left: 1634px; top: 570px;
        width: 90px; height: 90px;
    }


	.check_07 {
        left: 1795px; top: 680px;
        width: 140px; height: 180px;
    }


	.check_08 {
		left: 1850px; top: 380px;
        width: 70px; height: 70px;
    }


	.check_09 {
        left: 2190px; top: 660px;
        width: 160px; height: 140px;
    }

	.check_10 {
		left: 2075px; top: 805px;
        width: 310px; height: 380px;
    }

}


.hotspot2 {
  position: absolute;
  width: 80px; height: 80px;   /* 원하는 크기 */
  /* background: rgba(255,255,0,0.3); */ /* 디버깅용 */
  border: none;
}



.wrong.on { 
	background-image: url(../images/game/wrong_img.png); 
}

.wrong {
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}


.wrong_01 {
    left: calc((360 / 720) * 100vw); top: calc((312 / 720) * 100vw);
    width: calc((60 / 720) * 100vw); height: calc((70 / 720) * 100vw);
}

.wrong_02 {
    left: calc((550 / 720) * 100vw); top: calc((304 / 720) * 100vw);
    width: calc((68 / 720) * 100vw); height: calc((70 / 720) * 100vw);
}


.wrong_03 {
    left: calc((700 / 720) * 100vw); top: calc((336 / 720) * 100vw);
    width: calc((144 / 720) * 100vw); height: calc((112 / 720) * 100vw);
}


.wrong_04 {
    left: calc((540 / 720) * 100vw); top: calc((492 / 720) * 100vw);
    width: calc((164 / 720) * 100vw); height: calc((136 / 720) * 100vw);
}


.wrong_05 {
    left: calc((226 / 720) * 100vw); top: calc((662 / 720) * 100vw);
    width: calc((380 / 720) * 100vw); height: calc((268 / 720) * 100vw);
}


.wrong_06 {
    left: calc((461 / 720) * 100vw); top: calc((959 / 720) * 100vw);
    width: calc((110 / 720) * 100vw); height: calc((60 / 720) * 100vw);
}


.wrong_07 {
    left: calc((600 / 720) * 100vw); top: calc((1014 / 720) * 100vw);
    width: calc((90 / 720) * 100vw); height: calc((82 / 720) * 100vw);
}

.wrong_08 {
    left: calc((750 / 720) * 100vw); top: calc((883 / 720) * 100vw);
    width: calc((220 / 720) * 100vw); height: calc((180 / 720) * 100vw);
}

.wrong_09 {
    left: calc((836 / 720) * 100vw); top: calc((796 / 720) * 100vw);
    width: calc((38 / 720) * 100vw); height: calc((46 / 720) * 100vw);
}

.wrong_10 {
    left: calc((960 / 720) * 100vw); top: calc((826 / 720) * 100vw);
    width: calc((32 / 720) * 100vw); height: calc((52 / 720) * 100vw);
}


.wrong_11 {
    left: calc((1000 / 720) * 100vw); top: calc((602 / 720) * 100vw);
    width: calc((84 / 720) * 100vw); height: calc((78 / 720) * 100vw);
}

.wrong_12 {
    left: calc((1047 / 720) * 100vw); top: calc((808 / 720) * 100vw);
    width: calc((60 / 720) * 100vw); height: calc((42 / 720) * 100vw);
}
	

.wrong_13 {
    left: calc((1397 / 720) * 100vw); top: calc((266 / 720) * 100vw);
    width: calc((80 / 720) * 100vw); height: calc((56 / 720) * 100vw);
}
	

.wrong_14 {
    left: calc((1360 / 720) * 100vw); top: calc((764 / 720) * 100vw);
    width: calc((82 / 720) * 100vw); height: calc((40 / 720) * 100vw);
}

.wrong_15 {
    left: calc((1220 / 720) * 100vw); top: calc((463 / 720) * 100vw);
    width: calc((376 / 720) * 100vw); height: calc((270 / 720) * 100vw);
}
	

.wrong_16 {
    left: calc((1537 / 720) * 100vw); top: calc((336 / 720) * 100vw);
    width: calc((100 / 720) * 100vw); height: calc((56 / 720) * 100vw);
}

.wrong_17 {
    left: calc((1640 / 720) * 100vw); top: calc((744 / 720) * 100vw);
    width: calc((152 / 720) * 100vw); height: calc((150 / 720) * 100vw);
}

.wrong_18 {
    left: calc((1592 / 720) * 100vw); top: calc((926 / 720) * 100vw);
    width: calc((58 / 720) * 100vw); height: calc((100 / 720) * 100vw);
}


.wrong_19 {
    left: calc((1960 / 720) * 100vw); top: calc((344 / 720) * 100vw);
    width: calc((92 / 720) * 100vw); height: calc((130 / 720) * 100vw);
}


.wrong_20 {
    left: calc((1892 / 720) * 100vw); top: calc((936 / 720) * 100vw);
    width: calc((98 / 720) * 100vw); height: calc((80 / 720) * 100vw);
}

.wrong_21 {
    left: calc((2194 / 720) * 100vw); top: calc((174 / 720) * 100vw);
    width: calc((52 / 720) * 100vw); height: calc((48 / 720) * 100vw);
}


.wrong_22 {
    left: calc((1594 / 720) * 100vw); top: calc((94 / 720) * 100vw);
    width: calc((132 / 720) * 100vw); height: calc((88 / 720) * 100vw);
}


.wrong_23 {
    left: calc((1712 / 720) * 100vw); top: calc((1086 / 720) * 100vw);
    width: calc((98 / 720) * 100vw); height: calc((80 / 720) * 100vw);
}

.wrong_24 {
    left: calc((1902 / 720) * 100vw); top: calc((1052 / 720) * 100vw);
    width: calc((88 / 720) * 100vw); height: calc((66 / 720) * 100vw);
}


.wrong_25 {
    left: calc((2002 / 720) * 100vw); top: calc((1026 / 720) * 100vw);
    width: calc((68 / 720) * 100vw); height: calc((80 / 720) * 100vw);
}


@media (min-width: 720px) { 
	.wrong_01 {
		left: 360px; top: 312px;
        width: 60px; height: 70px;
	}
	.wrong_02 {
        left: 550px; top: 304px;
        width: 68px; height: 70px;
	}
	.wrong_03 {
		left: 700px; top: 336px;
        width: 144px; height: 112px;
	}

	.wrong_04 {
		left: 540px; top: 492px;
        width: 164px; height: 136px;
	}

	.wrong_05 {
		left: 226px; top: 662px;
        width: 380px; height: 268px;
	}
	
	.wrong_06 {
        left: 461px; top: 959px;
        width: 110px; height: 60px;
	}

	.wrong_07 {
        left: 600px; top: 1014px;
        width: 90px; height: 82px;
	}
	

	.wrong_08 {
		left: 750px; top: 883px;
        width: 220px; height: 180px;
	}
	

	.wrong_09 {
        left: 836px; top: 796px;
        width: 38px; height: 46px
	}

	.wrong_10 {
        left: 960px; top: 826px;
        width: 32px; height: 52px;
	}
	
	.wrong_11 {
		left: 1000px; top: 602px;
        width: 84px; height: 78px;
	}
	
	
	.wrong_12 {
        left: 1047px; top: 808px;
        width: 60px; height: 42px;
	}
	
	
	.wrong_13 {
        left: 1397px; top: 266px;
        width: 80px; height: 56px;
	}
	
	
	.wrong_14 {
        left: 1360px; top: 764px;
        width: 82px; height: 40px;
	}
	
	
	.wrong_15 {       
		left: 1220px; top: 463px;
        width: 376px; height: 270px;
	}
	
	
	
	.wrong_16 {       
		left: 1537px; top: 336px;
        width: 100px; height: 56px;
	}
	
	.wrong_17 {       
		left: 1640px; top: 744px;
        width: 152px; height: 150px;
	}
	
	
	.wrong_18 {       
        left: 1592px; top: 926px;
        width: 58px; height: 100px;
	}
	
	
	.wrong_19 {       
        left: 1960px; top: 344px;
        width: 92px; height: 130px;
	}
	

	.wrong_20 {
        left: 1892px; top: 936px;
        width: 98px; height: 80px;
	}
	


	.wrong_21 {
        left: 2194px; top: 174px;
        width: 52px; height: 48px;
	}
	
	.wrong_22 {
        left: 1594px; top: 94px;
        width: 132px; height: 88px;
	}
	
	.wrong_23 {
        left: 1712px; top: 1086px;
        width: 98px; height: 80px;
	}
	
	.wrong_24 {
		left: 1902px; top: 1052px;
        width: 88px; height: 66px;
	}
	
	.wrong_25 {
        left: 2002px; top: 1026px;
        width: 68px; height: 80px;
	}
	
}











.img_list {
	position: absolute; top: calc((52 / 720) * 100vw); left: calc((30 / 720) * 100vw);
	width: calc((654 / 720) * 100vw); height: calc((81 / 720) * 100vw);
	z-index: 100;

	background-image: url(../images/game/list_box.png);
	background-size: 100%;
	background-position: center center;
	background-repeat: no-repeat;

	display: flex;
	gap: calc((5 / 720) * 100vw);
    align-items: center;
	padding: 0px calc((45 / 720) * 100vw);
}

@media (min-width: 720px) { 

	.img_list {
		top: 52px; left: 30px;
		width: 654px; height: 81px;

		gap: 5px;
		padding: 0px 45px;
	}
}

.img_list .img_list_item:nth-child(1) img{ background-image: url(../images/game/item_off_01.png); }
.img_list .img_list_item:nth-child(2) img{ background-image: url(../images/game/item_off_02.png); }
.img_list .img_list_item:nth-child(3) img{ background-image: url(../images/game/item_off_03.png); }
.img_list .img_list_item:nth-child(4) img{ background-image: url(../images/game/item_off_04.png); }
.img_list .img_list_item:nth-child(5) img{ background-image: url(../images/game/item_off_05.png); }
.img_list .img_list_item:nth-child(6) img{ background-image: url(../images/game/item_off_06.png); }
.img_list .img_list_item:nth-child(7) img{ background-image: url(../images/game/item_off_07.png); }
.img_list .img_list_item:nth-child(8) img{ background-image: url(../images/game/item_off_08.png); }
.img_list .img_list_item:nth-child(9) img{ background-image: url(../images/game/item_off_09.png); }
.img_list .img_list_item:nth-child(10) img{ background-image: url(../images/game/item_off_10.png); }




.img_list .img_list_item.on:nth-child(1) img{ background-image: url(../images/game/item_on_01.png); }
.img_list .img_list_item.on:nth-child(2) img{ background-image: url(../images/game/item_on_02.png); }
.img_list .img_list_item.on:nth-child(3) img{ background-image: url(../images/game/item_on_03.png); }
.img_list .img_list_item.on:nth-child(4) img{ background-image: url(../images/game/item_on_04.png); }
.img_list .img_list_item.on:nth-child(5) img{ background-image: url(../images/game/item_on_05.png); }
.img_list .img_list_item.on:nth-child(6) img{ background-image: url(../images/game/item_on_06.png); }
.img_list .img_list_item.on:nth-child(7) img{ background-image: url(../images/game/item_on_07.png); }
.img_list .img_list_item.on:nth-child(8) img{ background-image: url(../images/game/item_on_08.png); }
.img_list .img_list_item.on:nth-child(9) img{ background-image: url(../images/game/item_on_09.png); }
.img_list .img_list_item.on:nth-child(10) img{ background-image: url(../images/game/item_on_10.png); }



/* 화면에는 안보이지만 미리 로드 */
.preload {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  background: url(../images/game/item_on_01.png),
              url(../images/game/item_on_02.png),
              url(../images/game/item_on_03.png),
              url(../images/game/item_on_04.png),
              url(../images/game/item_on_05.png),
              url(../images/game/item_on_06.png),
              url(../images/game/item_on_07.png),
              url(../images/game/item_on_08.png),
              url(../images/game/item_on_09.png),
              url(../images/game/item_on_10.png),
			  url(../images/game/item_off_01.png),
              url(../images/game/item_off_02.png),
              url(../images/game/item_off_03.png),
              url(../images/game/item_off_04.png),
              url(../images/game/item_off_05.png),
              url(../images/game/item_off_06.png),
              url(../images/game/item_off_07.png),
              url(../images/game/item_off_08.png),
              url(../images/game/item_off_09.png),
              url(../images/game/item_off_10.png),
              url(../images/game/sound-on.png),
              url(../images/game/sound-off.png),
              url(../images/game/game02.jpg),
              url(../images/game/wrong_img.png),
              url(../images/game/check_img.png);
}





.img_list .img_list_item {
	width: 10%; height: auto;
}

.img_list .img_list_item img { 
	max-width: 100%;
	width: fit-content; height: auto; 
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}








.time_box {
	position: absolute; top: calc((1140 / 720) * 100vw); left: calc((486 / 720) * 100vw);
	width: calc((195 / 720) * 100vw); height: calc((83 / 720) * 100vw);
	z-index: 100;

}

.time_box img {
	width: 100%; height: auto;
	background-image: url(../images/game/time_box_01.png);

	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}
.time_box img.on { background-image: url(../images/game/time_box_02.png); }

.timestamp_txt {
	position: absolute; top: calc((37 / 720) * 100vw); left: calc((78 / 720) * 100vw);
	line-height: 1;
	font-size: calc((32 / 720) * 100vw); color: #fff;
	font-weight: bold;
}
.timestamp_txt.on { color: #fff600; }

@media (min-width: 720px) { 

	.time_box {
		top: 1140px; left: 486px;
		width: 195px; height: 83px;
	}


	.timestamp_txt {
		position: absolute; top: 37px; left: 78px;
		font-size: 32px; color: #fff;
		font-weight: bold;
	}

}


#sound_full_bg{ display: none; }

.sound_box {
	position: absolute; top: calc((1150 / 720) * 100vw); left: calc((40 / 720) * 100vw);
	width: calc((79 / 720) * 100vw); height: calc((79 / 720) * 100vw);
	z-index: 100;
}

.sound_box img.on { background-image: url(../images/game/sound-on.png); }
.sound_box img.off { background-image: url(../images/game/sound-off.png); }
.sound_box img {
	width: 100%; height: 100%; 

	cursor: pointer;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;

}

@media (min-width: 720px) { 

	.sound_box {
		top: 1150px; left: 40px;
		width: 79px; height: 79px;
	}



}



.start_box {
	position: absolute; top: calc((0 / 720) * 100vw); left: calc((0 / 720) * 100vw);
	width: 100%; height: 100%;
	z-index: 99;

}

.start_box .start_btn_bg {
	position: absolute; top: calc((0 / 720) * 100vw); left: calc((0 / 720) * 100vw);
	width: 100%; height: 100%;
	background-color: #000;
	opacity: 0.5;
	z-index: 1;
}



.start_box .start_btn_img {
	position: absolute; top: 50%; left: 50%;
	width: calc((561 / 720) * 100vw); height: calc((252 / 720) * 100vw);

    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

	cursor: pointer;

	z-index: 2;
}

.start_box .game_info {
	position: absolute; top: calc(50% + (calc(105 / 720) * 100vw)); left: 50%;
	width: calc((555 / 720) * 100vw); height: calc((45 / 720) * 100vw);

    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

	cursor: pointer;

	z-index: 2;
}


@media (min-width: 720px) { 
	.start_box .start_btn_img {
		width: 561px; height: 252px;
	}

	.start_box .game_info {
		top: calc(50% + 105px);
		width: 555px; height: 45px;
	}



}





.success_txt {
	position: absolute; top: calc((900 / 720) * 100vw); left: calc((120 / 720) * 100vw);
	width: calc((480 / 720) * 100vw); height: calc((82 / 720) * 100vw);
}

.success_txt .success_txt_area_01 {
	width: 100%; height: calc((32 / 720) * 100vw); line-height: calc((32 / 720) * 100vw);
	display: flex;
    justify-content: center;
    align-items: center;	
}

.success_txt .success_txt_area_01 img { width: auto; height: calc((32 / 720) * 100vw); }
.success_txt .success_txt_area_01 .success_nickname_txt { 
	margin-left: calc((12 / 720) * 100vw); height: calc((32 / 720) * 100vw); line-height: calc((32 / 720) * 100vw);
	color: #fff; font-size: calc((30 / 720) * 100vw); font-weight: bold; 
}



.success_txt .success_txt_area_02 {
	width: 100%; height: calc((30 / 720) * 100vw); line-height: calc((30 / 720) * 100vw);
	display: flex;
    justify-content: center;
    align-items: center;	
	margin-top: calc((15 / 720) * 100vw);
}

.success_txt .success_txt_area_02 .img_sec { width: auto; height: calc((27 / 720) * 100vw); }
.success_txt .success_txt_area_02 .img_rank { width: auto; height: calc((29 / 720) * 100vw); margin-left: calc((25 / 720) * 100vw); }
.success_txt .success_txt_area_02 .success_sec,
.success_txt .success_txt_area_02 .success_rank { 
	margin-left: calc((12 / 720) * 100vw); height: calc((30 / 720) * 100vw); line-height: calc((30 / 720) * 100vw);
	color: #fff; font-size: calc((30 / 720) * 100vw); font-weight: bold; 
}



.failure_txt {
	position: absolute; top: calc((840 / 720) * 100vw); left: calc((120 / 720) * 100vw);
	width: calc((480 / 720) * 100vw); height: calc((34 / 720) * 100vw);
}

.failure_txt .failure_txt_area_01 {
	width: 100%; height: calc((34 / 720) * 100vw); line-height: calc((34 / 720) * 100vw);
	display: flex;
    justify-content: center;
    align-items: center;	
}


.failure_txt .failure_txt_area_01 .failure_nickname_txt { 
	margin-left: calc((12 / 720) * 100vw); height: calc((34 / 720) * 100vw); line-height: calc((34 / 720) * 100vw);
	color: #fff; font-size: calc((34 / 720) * 100vw); font-weight: bold; 
}



.success_btn {
	position: absolute; top: calc((1085 / 720) * 100vw); left: calc((92 / 720) * 100vw);
	width: calc((546 / 720) * 100vw); height: calc((102 / 720) * 100vw);
	cursor: pointer;
}

.failure_btn {
	position: absolute; top: calc((1085 / 720) * 100vw); left: calc((92 / 720) * 100vw);
	width: calc((546 / 720) * 100vw); height: calc((102 / 720) * 100vw);
	cursor: pointer;
}


@media (min-width: 720px) { 
	.success_txt {
		top: 900px; left: 120px;
		width: 480px; height: 82px;
	}

	.success_txt .success_txt_area_01 {
		height: 32px; line-height: 32px;
	}

	.success_txt .success_txt_area_01 img { height: 32px; }
	.success_txt .success_txt_area_01 .success_nickname_txt { 
		margin-left: 12px; height: 32px; line-height: 32px;
		font-size: 30px; 
	}



	.success_txt .success_txt_area_02 {
		height: 30px; line-height: 30px;
		margin-top: 15px;
	}

	.success_txt .success_txt_area_02 .img_sec { height: 27px; }
	.success_txt .success_txt_area_02 .img_rank {  height: 29px; margin-left: 25px; }
	.success_txt .success_txt_area_02 .success_sec,
	.success_txt .success_txt_area_02 .success_rank { 
		margin-left: 12px; height: 30px; line-height: 30px;
		font-size: 30px; 
	}



	.failure_txt {
		top: 840px; left: 120px;
		width: 480px; height: 34px;
	}

	.failure_txt .failure_txt_area_01 {
		height: 34px; line-height: 34px;
	}


	.failure_txt .failure_txt_area_01 .failure_nickname_txt { 
		margin-left: 12px; height: 34px; line-height: 34px;
		font-size: 34px;
	}



	.success_btn {
		top: 1085px; left: 92px;
		width: 546px; height: 102px;
	}

	.failure_btn {
		top: 1085px; left: 92px;
		width: 546px; height: 102px;
	}

}





.step_03 {  width: calc((720 / 720) * 100vw); height: calc((1280 / 720) * 100vw); }
.step_03 img { width: 100%; height: 100%; }



@media (min-width: 720px) { 
	.step_03 { width: 720px; height: 1280px; }

}






.step_04 {  width: calc((720 / 720) * 100vw); height: calc((1280 / 720) * 100vw); }
.step_04 img { width: 100%; height: 100%; }
.step_04 input.user_name {
	position: absolute; top: calc((682 / 720) * 100vw); left: calc((190 / 720) * 100vw);
	width: calc((354 / 720) * 100vw); height: calc((35 / 720) * 100vw);
	font-size: calc((32 / 720) * 100vw); 
	letter-spacing: calc((-0.2 / 720) * 100vw);
	color: #fff;  font-weight: bold; text-align: center;
	background-color: #00000000;
	border: 0px;
	z-index: 10;
}

.step_04 input.user_phone {
	position: absolute; top: calc((846 / 720) * 100vw); left: calc((190 / 720) * 100vw);
	width: calc((354 / 720) * 100vw); height: calc((35 / 720) * 100vw);
	font-size: calc((32 / 720) * 100vw); 
	letter-spacing: calc((-0.2 / 720) * 100vw);
	color: #fff;  font-weight: bold; text-align: center;
	background-color: #00000000;
	border: 0px;
	z-index: 10;
}


.step_04 input.check_box {
	cursor: pointer;

	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;


	position: absolute; top: calc((945 / 720) * 100vw); left: calc((431 / 720) * 100vw);
	width: calc((42 / 720) * 100vw); height: calc((42 / 720) * 100vw);
	color: #fff;  font-weight: bold; text-align: center;
	background-color: #00000000;
	border: 0px;
	z-index: 10;
}

.step_04 input.check_box[type="checkbox"]:checked:after {
  content: "✔";
  height: calc((42 / 720) * 100vw); line-height: calc((42 / 720) * 100vw);
  color: white;
  display: block;
  text-align: center;
  font-size: calc((32 / 720) * 100vw);;
}


.step_04 button.btn_ok {
	position: absolute; top: calc((1085 / 720) * 100vw); left: calc((92 / 720) * 100vw);
	width: calc((546 / 720) * 100vw); height: calc((102 / 720) * 100vw);
	background-color: #00000000;
	cursor: pointer;
	border: 0px;
	z-index: 10;
}



.step_04 button.btn_agree {
	position: absolute; top: calc((945 / 720) * 100vw); left: calc((239 / 720) * 100vw);
	width: calc((180 / 720) * 100vw); height: calc((42 / 720) * 100vw);
	background-color: #00000000;
	cursor: pointer;
	border: 0px;
	z-index: 10;
}




@media (min-width: 720px) { 
	.step_04 { width: 720px; height: 1280px; }

	.step_04 input.user_name {
		top: 682px; left: 190px;
		width: 345px; height: 35px;
		font-size: 32px; 
		letter-spacing: -0.2px;
	}

	.step_04 input.user_phone {
		top: 846px; left: 190px;
		width: 345px; height: 35px;
		font-size: 32px; 
		letter-spacing: -0.2px;
	}

	.step_04 button.btn_ok {
		top: 1085px; left: 92px;
		width: 546px; height: 102px;
	}

	.step_04 button.btn_agree {
		top: 945px; left: 239px;
		width: 180px; height: 42px;
	}


	.step_04 input.check_box {
		top: 945px; left: 431px;
		width: 42px; height: 42px;
	}


	.step_04 input.check_box[type="checkbox"]:checked:after {
	  content: "✔";
	  height: 42px; line-height: 42px;
	  font-size: 32px;
	}

}


.agree_pop {
	display: none;
	position: absolute; top: 0px; left: 0px;
	width: 100%; height: 100%;
	z-index: 9999;
}

.agree_pop .agree_pop_bg {
	position: fixed; top: 0px; left: 0px; 
	width: 100%; height: 100%;
	z-index: 1;
	background-color: #000;
	opacity: 0.6;

}


.agree_pop .agree_pop_img_box {
	width: 100%; height: 100%;
}
.agree_pop .agree_pop_img_box > div {
	position: absolute; top: 50%; left: 50%;
	width: calc((600 / 720) * 100vw); height: calc((587 / 720) * 100vw);



    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);

	z-index: 2;

}


.agree_pop .agree_pop_img_box .agree_pop_img { width: 100%; height: 100%; }

.agree_pop .agree_pop_img_box .btn_pop_close {
	position: absolute; top: calc((34 / 720) * 100vw); left: calc((518 / 720) * 100vw);
	width: calc((32 / 720) * 100vw); height: calc((32 / 720) * 100vw);
	border: 0px; background-color: #00000000;
	cursor: pointer;

}

.agree_pop .agree_pop_img_box .btn_pop_ok {
	position: absolute; top: calc((471 / 720) * 100vw); left: calc((98 / 720) * 100vw);
	width: calc((406 / 720) * 100vw); height: calc((83 / 720) * 100vw);
	border: 0px; background-color: #00000000;
	cursor: pointer;

}






@media (min-width: 720px) { 
	.agree_pop {
		width: 100%; height: 100%;
	}

	.agree_pop .agree_pop_img_box > div {
		width: 600px; height: 587px;
	}



	.agree_pop .agree_pop_img_box .btn_pop_close {
		position: absolute; top: 34px; left: 518px;
		width: 32px; height: 32px;

	}

	.agree_pop .agree_pop_img_box .btn_pop_ok {
		position: absolute; top: 471px; left: 98px;
		width: 406px; height: 83px;
	}


}







.step_05 {  width: calc((720 / 720) * 100vw); height: calc((1280 / 720) * 100vw); }
.step_05 img { width: 100%; height: 100%; }

.step_05 button.btn_restart {
	position: absolute; top: calc((1085 / 720) * 100vw); left: calc((92 / 720) * 100vw);
	width: calc((546 / 720) * 100vw); height: calc((102 / 720) * 100vw);
	background-color: #00000000;
	cursor: pointer;
	border: 0px;
	z-index: 10;
}



.step_05 button.btn_s_f{
	position: absolute; top: calc((942 / 720) * 100vw); left: calc((169 / 720) * 100vw);
	width: calc((64 / 720) * 100vw); height: calc((64 / 720) * 100vw);
	background-color: #00000000;
	cursor: pointer;
	border: 0px;
	z-index: 10;
}

.step_05 button.btn_s_x{
	position: absolute; top: calc((942 / 720) * 100vw); left: calc((275 / 720) * 100vw);
	width: calc((64 / 720) * 100vw); height: calc((64 / 720) * 100vw);
	background-color: #00000000;
	cursor: pointer;
	border: 0px;
	z-index: 10;
}
.step_05 button.btn_s_k{
	position: absolute; top: calc((942 / 720) * 100vw); left: calc((382 / 720) * 100vw);
	width: calc((64 / 720) * 100vw); height: calc((64 / 720) * 100vw);
	background-color: #00000000;
	cursor: pointer;
	border: 0px;
	z-index: 10;
}
.step_05 button.btn_s_l{
	position: absolute; top: calc((942 / 720) * 100vw); left: calc((488 / 720) * 100vw);
	width: calc((64 / 720) * 100vw); height: calc((64 / 720) * 100vw);
	background-color: #00000000;
	cursor: pointer;
	border: 0px;
	z-index: 10;
}




@media (min-width: 720px) { 
	.step_05 { width: 720px; height: 1280px; }

	.step_05 button.btn_restart {
		top: 1085px; left: 92px;
		width: 546px; height: 102px;
	}
	.step_05 button.btn_s_f {
        top: 942px; left: 169px;
        width: 64px; height: 64px;
	}
	.step_05 button.btn_s_x {
        top: 942px; left: 275px;
        width: 64px; height: 64px;
	}

	.step_05 button.btn_s_k {
        top: 942px; left: 382px;
        width: 64px; height: 64px;
	}

	.step_05 button.btn_s_l {
        top: 942px; left: 488px;
        width: 64px; height: 64px;
	}


}


#success_box, #failure_box { display: none; }



.start_txt_box {
	position: absolute; top: calc((737 / 720) * 100vw); left: calc((218 / 720) * 100vw);
	width: calc((285 / 720) * 100vw); height: calc((36 / 720) * 100vw); line-height: calc((36 / 720) * 100vw);
	display: flex;
    justify-content: center;
    align-items: center;	
}

.start_txt_box img {
	width: auto; height: calc((30 / 720) * 100vw);
	vertical-align: middle;
}

.start_txt_box .start_txt {
	width: auto; height: calc((30 / 720) * 100vw); line-height: calc((28 / 720) * 100vw);
	margin-left: calc((8 / 720) * 100vw); margin-right: calc((3 / 720) * 100vw);
	font-size: calc((36 / 720) * 100vw); color: #fff36a; 
	font-weight: bold;
}





@media (min-width: 720px) { 
	.start_txt_box {
		top: 737px; left: 218px;
		width: 285px; height: 36px; line-height: 36px;
	}

	.start_txt_box img {
		 height: 30px;
	}

	.start_txt_box .start_txt {
		height: 30px; line-height: 28px;
		margin-left: 8px; margin-right: 3px;
		font-size: 36px; 
	}


}