@charset "UTF-8";

html, body, .container {
	width:1280px;
	height:800px;
	overflow:hidden;
	margin:0px;
	padding:0px;
}

div, img {
	position:absolute;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-touch-callout:none;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
}

.container {
	position:relative;
}

/* .objects, { width:100%; height:100%; } */

.button {
	cursor:pointer;
	z-index: 100;
}

#btn_reset {
	top: 15px;
	right: 20px;
}

#btn_answer {
	right:25px;
	bottom:26px;
}

#tipbox {
	background-color: rgba(88, 92, 97,0.9);
}

#obj_train { left:50px; top:522px; }


#content_area {
    top: 0px;
    left: 0px;
    width: 1280px;
    height: 800px;
    /* border: 1px solid red; */
}

#content_area_l {
    top: 165px;
    left: 88px;
    width: 645px;
    height: 518px;
    /* border: 1px solid red; */
}

#content_area_r {
    top: 165px;
    left: 766px;
    width: 444px;
    height: 518px;
    /* border: 1px solid red; */
}

/* 좌측 영역 */
#input_bg1{
	top: 44px;
    left: 0px;
    position: absolute;
    height: 129px;
    width: 300px;
    border: 7px solid #e6425d;
    border-radius: 40px;
	background: white;
	text-align: center;
	z-index: 10;
	white-space: nowrap;
	white-space: pre;
}
#input_bg2{
	top: 44px;
    left: 330px;
    position: absolute;
    height: 129px;
    width: 300px;
    border: 7px solid #e6425d;
    border-radius: 40px;
	background: white;
	text-align: center;
	z-index: 10;
	white-space: nowrap;
	white-space: pre;
}
#input_bg3{
	top:377px; left:0px;position:absolute;
	width:630px;
	height:129px;
	border: 7px solid #e6425d;
    border-radius: 40px;
	background: white;
	text-align: center;
	z-index: 9;
}

/* #obj1{top:24px; left: 17px;position:absolute;}
#obj2{top:24px; left:115px;position:absolute;}
#obj3{top:24px; left:212px;position:absolute;}

#obj4{top:24px; left: 17px;position:absolute;}
#obj5{top:24px; left:115px;position:absolute;}
#obj6{top:24px; left:212px;position:absolute;} */

#input_bg1 img, #input_bg2 img {
	position: relative;
	border:0px solid red;
	width:90px;
	top:17px;
}

.num {
	font-family: 'Baloo', cursive;
	font-size: 100px;
	color:#0dacbc;
	width: 121px;
    height: 121px;
    text-align: center;
    line-height: 121px;
}

#input_obj2{top:67px; left:356px;position:absolute;}

#arrow_l{top:210px; left:159px;position:absolute;}
#arrow_r{top:210px; left:326px;position:absolute;}


/* 우측 영역 */
#number_box1{top:24px; left: 28px;position:absolute; width:121px; height:121px; background: url('number_box.png') no-repeat;}
#number_box2{top:24px; left:163px;position:absolute; width:121px; height:121px; background: url('number_box.png') no-repeat;}
#number_box3{top:24px; left:297px;position:absolute; width:121px; height:121px; background: url('number_box.png') no-repeat;}

#number1 {top:225px; right:93px;position:absolute;font-family: 'Baloo Paaji','Nanum Gothic Bold',sans-serif;font-size:80px;font-weight: normal; letter-spacing: 30px;}
#number2 {top:160px; right:93px;position:absolute;font-family: 'Baloo Paaji','Nanum Gothic Bold',sans-serif;font-size:80px;font-weight: normal; letter-spacing: 30px;}
#number3 {top:23px; left:297px;position:absolute;}

#red_dot{top:0px; left:0px;position:absolute;}

#answer_box1{top:195px; left: 37px;position:absolute; width:141px; height:141px; background: url('answer_box.png') no-repeat;}
#answer_box2{top:195px; left:260px;position:absolute; width:141px; height:141px; background: url('answer_box.png') no-repeat;}
#answer_box3{top:383px; left:147px;position:absolute; width:141px; height:141px; background: url('answer_box.png') no-repeat;}

#arrow_s_l{top:329px; left:155px;position:absolute;}
#arrow_s_r{top:329px; left:228px;position:absolute;}

.etr_input {
	font-family: 'Baloo Paaji', 'Nanum Gothic', sans-serif;
	width: 142px;
	height: 103px;
	/* background: url(input_bg01.png)  no-repeat 49% 49%; */
	font-size: 55px;
	text-align: center;
	line-height: 103px;
	cursor:pointer;

	color:#880015;
}

.input_active {
	-webkit-animation:input_blink 1.5s steps(1,end) infinite;
	-moz-animation:input_blink 1.5s steps(1,end) infinite;
	animation:input_blink 1.5s steps(1,end) infinite;
}

.etr_input.selected {
	/* filter:sepia(1); */
	background: url(input_bg03.png)  no-repeat 49% 49%;
	color:#e44817;
}

.etr_input.selected.input_active {
	-webkit-animation: none;
	-moz-animation: none;
	animation: none;
}

.etr_input {
	font-family: 'SM태명조', sans-serif !important;
    font-weight: bold !important;
    font-size: 50px !important;
    line-height: 66px !important;
}

@-webkit-keyframes input_blink {
	0%  { background-image: url(input_bg01.png); }
	50% { background-image: url(input_bg02.png); }
}
@-moz-keyframes input_blink {
	0%  { background-image: url(input_bg01.png); }
	50% { background-image: url(input_bg02.png); }
}
@keyframes input_blink {
	0%  { background-image: url(input_bg01.png); }
	50% { background-image: url(input_bg02.png); }
}

@-webkit-keyframes input_blink2 {
	0%  { background-image: url(input_bg01.png); }
	50% { background-image: url(input_bg03.png); }
}
@-moz-keyframes input_blink2 {
	0%  { background-image: url(input_bg01.png); }
	50% { background-image: url(input_bg03.png); }
}
@keyframes input_blink2 {
	0%  { background-image: url(input_bg01.png); }
	50% { background-image: url(input_bg03.png); }
}

.etr_operation {
	/* font-family: 'Baloo Paaji', 'Nanum Gothic', sans-serif; */
	/* font-size: 60px; */
	/* line-height: 103px; */
	/* text-align: center; */
	/* color: rgb(161, 116, 254); */
	width: 32px;
	padding-top:38px;
}

#etrKeyPad {
	-webkit-transform-origin:50% 0%;
	-moz-transform-origin:50% 0%;
	transform-origin:50% 0%;
}

#desc {
    font-family: 'Rix밝은굴림', 'SM태명조','Nanum Gothic Bold', 'Baloo Tammudu','ConcertOne', sans-serif;
    font-weight: bold;
    padding: 10px;
    top: 32px;
    left: 30px;
    width: 800px;
    height: 30px;
    color: #565252;
    font-size: 36px;
    line-height: 36px;
    text-align: left;
}

#qusnum {
	font-family: 'Rix밝은굴림', 'SM태명조','Nanum Gothic Bold', 'Baloo Tammudu','ConcertOne', sans-serif;
    font-weight: bold;
    font-size: 250px;
    top: 290px;
    left: 153px;
    width: 360px;
    height: 340px;
    text-align: center;
    line-height: 340px;
}

.kornum {
	font-family: 'Rix밝은굴림', 'SM태명조','Nanum Gothic Bold', 'Baloo Tammudu','ConcertOne', sans-serif;
    font-weight: bold;
	font-size: 90px;
	line-height: 115px;
	text-align: center;
	color:white;
	background-image: url('square_w.png');
	cursor:pointer;
}

.kornum.select {
	color:#ff4aa9;
	background-image: url('square_y.png');
}

.box {
	/* border : 1px solid red; */
	top: 310px;
	left: 63px;
	width: 180px;
	height: 146px;
	z-index: 11;
}

.dbox {
	/* border : 1px solid red; */
	top: 544px;
	left: 63px;
	width: 180px;
	height: 229px;
	z-index: 9;
}

.ucoin {
	-webkit-filter : sepia(1) hue-rotate(290deg) drop-shadow(0px 0px 1px rgba(0,0,0,1)) !important;
	-moz-filter : sepia(1) hue-rotate(290deg) drop-shadow(0px 0px 1px rgba(0,0,0,1)) !important;
	filter : sepia(1) hue-rotate(290deg) drop-shadow(0px 0px 1px rgba(0,0,0,1)) !important;
}

.coin1000 { top:  10px; width: 60px; cursor: pointer; }
.coin100  { top:  10px; width: 49px; cursor: pointer; }
.coin10   { top:  65px; width: 39px; cursor: pointer; }
.coin1    { top: 110px; width: 31px; cursor: pointer; }

.coin {
	-webkit-filter:drop-shadow(0px 0px 1px rgba(0,0,0,0.5));
	-moz-filter:drop-shadow(0px 0px 1px rgba(0,0,0,0.5));
	filter:drop-shadow(0px 0px 1px rgba(0,0,0,0.5));
}