@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:23px; left:27px;position:absolute;}
#number2{top:23px; left:162px;position:absolute;}
#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;
}

@-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;
}

#qusnum1,#qusnum2,#op,#eq {
	font-family: MathJax_Main,'Rix밝은굴림', sans-serif;
    font-weight: bold;
    font-size: 62px;
    text-align: center;
}

/* mathjax 폰트 제거 */
/* #qusnum1 .mn,#qusnum2 .mn,#input_ans .mn, .mfrac .mn {
	font-family: 'Rix밝은굴림', sans-serif!important;
	font-size:0.80em!important;
} */

.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');
}

.ribox {
	background-image:url('dotted_gray.png');
	background-repeat: no-repeat;
	background-position: 100% center;
}
.ribox:last-child {
	background-image: none;
}

.ribox.selected, .cbox.selected, .tribox.selected {
	background-color: rgba(255,209,60,0.6);
}