@charset 'utf-8';

@font-face {
	font-family: 'Rix밝은굴림';
	font-style: normal;
	font-weight: bold;
	src: url('/tms_asset/fonts/RixBGulimB.woff');
}
@font-face {
	font-family: 'Rix밝은굴림';
	font-style: normal;
	font-weight: normal;
	src: url('/tms_asset/fonts/RixBGulimB.woff');
}

html, body {
	padding: 0;
	margin: 0;
}

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

}

.container {
	width:1280px; height:800px;
	overflow: hidden;
}

ul.stars {
	width:100%;
	height:100%;
	margin: 0;
	padding: 0;
}

ul.stars > li.star {
	position:absolute;
	display:block;
	list-style:none;
	margin:0;
	width:3px;
	height:3px;
	border-radius: 50%;
	background: radial-gradient(ellipse at center, rgb(159,214,255) 0%, rgb(14,13,36) 100%);

	-webkit-animation:blink 1.5s ease-in-out infinite alternate;
  -moz-animation:blink 1.5s ease-in-out infinite alternate;
  animation:blink 1.5s ease-in-out infinite alternate;
}

ul.stars > li.star:nth-child(1) {
	top:700px;
	left:50px;
}
ul.stars > li.star:nth-child(2) {
	top:600px;
	left:60px;
}
ul.stars > li.star:nth-child(3) {
	top:700px;
	left:250px;
}
ul.stars > li.star:nth-child(4) {
	top:560px;
	left:256px;
	width:8px;
	height:8px;
}
ul.stars > li.star:nth-child(5) {
	top:200px;
	left:50px;
}
ul.stars > li.star:nth-child(6) {
	top:200px;
	left:900px;
}
ul.stars > li.star:nth-child(7) {
	top:313px;
	left:1002px;
}
ul.stars > li.star:nth-child(8) {
	top:500px;
	left:1000px;
}
ul.stars > li.star:nth-child(9) {
	top:400px;
	left:50px;
}
ul.stars > li.star:nth-child(10) {
	top:500px;
	left:50px;
}
ul.stars > li.star:nth-child(11) {
	top:700px;
	left:800px;
}
ul.stars > li.star:nth-child(12) {
	top:750px;
	left:700px;
}
ul.stars > li.star:nth-child(13) {
	top:700px;
	left:600px;
}
ul.stars > li.star:nth-child(14) {
	top:740px;
	left:850px;
}
ul.stars > li.star:nth-child(15) {
	top:768px;
	left:50px;
}
ul.stars > li.star:nth-child(16) {
	top:458px;
	left:1001px;
	width:5px;
	height:5px;
}
ul.stars > li.star:nth-child(17) {
	top:300px;
	left:170px;
}
ul.stars > li.star:nth-child(18) {
	top:450px;
	left:1050px;
}

.bg_board {
	width:1280px; height:800px;
	top: -300px;

	/* -webkit-transform-origin: 50% 0%;
	-webkit-transition:all 0.5s 1s;
	-webkit-transform:top(0);
	-webkit-transform:scale(0.0);
	-moz-transform-origin: 50% 0%;
	-moz-transition:all 0.5s 1s;
	-webkit-transform:top(0);
	-moz-transform:scale(0.0);
	transform-origin: 50% 0%;
	transition:all 0.5s 1s;
	transform:top(0);
	transform:scale(0.0); */
}

#content_area {
	width: 100%;
	height: 100%;
}

#deco01 {
	left:433px;
	top:0px;
	transition: top 2s .5s;
}

#btn_pause {
	top: 16px;
	left: 40px;
}

#btn_help {
	top: 16px;
	left: 1160px;
}

#title01 {
	z-index: 1;
}

.buttons {
	z-index: 2;
}

#stage {
	padding: 0px;
	right: 140px; top: 16px; min-width: 220px; height: 84px;
	text-align: center;
	z-index: 2;
}
.stage_bg {
	position: absolute;
	height: 84px;
	min-width: 33px;
}
#stage_bg_l {
	left:0;
	background: url('/tms_asset/images/stage_bg_l.png') no-repeat;
}
#stage_bg_r {
	right:0;
	background: url('/tms_asset/images/stage_bg_r.png') no-repeat;
}
#stage_bg_m {
	margin: auto;
	right:33px; left:33px;
	background: url('/tms_asset/images/stage_bg_m.png') repeat-x;
}
#stage>img {
	position: relative;
	margin-top: 17px;

}

#timerarea {
	top: 16px;
	left: 142px;
	width:204px; height:84px;
	background: url('/tms_asset/images/timerarea.png') no-repeat;
	z-index: 2;
}
#watch {
	top: 6px;
	left:18px;
	width:58px;
	height:68px;
	background: url('/tms_asset/images/watch.png') no-repeat;
}
#second-hand {
	top: 18px;left: 19px;
	width:20px; height:27px;
	-webkit-transform:rotate(180deg);
	-moz-transform:rotate(180deg);
	transform:rotate(180deg);
	-webkit-transform-origin: 50% 75%;
	-moz-transform-origin: 50% 75%;
	transform-origin: 50% 75%;
}

#remains {
	left: 0px;	top:  0px;
	width:180px; height:80px;
	font-family: 'Rix밝은굴림', sans-serif;
	position: absolute;
	color: #333333;
	font-size: 40px;
	font-weight: bold;
	text-align: right;
	line-height: 87px;
	letter-spacing: -2px;
}

#remains::after {
	content: '초';
	font-size: 35px;
}


#success { z-index:1000; }

#obj_1 { left:26px; top:290px; }/*우주선*/
#obj_2 { left:18px; top:456px; }/*왼쪽별*/
#obj_3 { left:-22px; top:572px; z-index:0;}/*반가려진 0*/
#obj_4 { left:20px; top:602px; }/*숫자8*/
#obj_5 { left:925px; top:650px; }/*숫자2*/
#obj_6 { left:1078px; top:562px; }/*나누기*/
#obj_7 { left:980px; top:560px; }/*더하기*/
#obj_8 { left:1007px; top:480px; }/*더하기_핑크*/
#obj_9 { left:1202px; top:540px; z-index:10; }/*곱하기*/
#obj_10{ left:1031px; top:430px; }/*빼기*/
#obj_11{ left:1130px; top:350px; width:150px;}/*어린왕자*/
#obj_12{ left:1130px; top:290px; }/*오른쪽별*/

/* 시작, 도움말 팝업 화면 */
#finish {
    font-family: 'Rix밝은굴림', sans-serif;
    font-weight: bold;
    font-size: 60px;
    text-align: center;
    width: 100%;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
    padding-top: 387px;
	color: #e03733;
	z-index: 100;
}

/* 시작, 도움말 팝업 화면 */
#start,
#start2 {
	width: 1280px;
	height: 800px;
	top: 0;
	left: 0;
	z-index: 5;
	/* display:none; */
}

#start2 {
	background-color:rgba(0,0,0,0.3);
	display: none;
}
#fi1,#fi2,#fi3 {
	margin: auto;
	top:0;bottom:0;left:0;right:0;
	width:250px; height:269px;
}
#fi2,#fi3 {
	display: none;
}


#bg {
	width: 1280px;
	height: 800px;
	top: 0;
	left: 0;
}


/* 시작, 도움말 팝업 화면 끝 */


#cnvs {
	position: absolute;
	top:274px;
	width:1280px;
	height: 400px;
	/* border:1px solid red; */
}

.emptyPiece {
	/* border: 1px solid #c5c543; */
    width: 1280px;
    height: 400px;
    top: 274px;
    left: 0px;
}

.pic {
	-webkit-transform-origin: 50% 50%;
	-moz-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
	/* border:1px solid red; */
}

.pic img {
	max-width: 100%;
	max-height: 100%;
}

.pic.blink{
	-webkit-animation:blink 1.5s ease-in-out infinite alternate;
  -moz-animation:blink 1.5s ease-in-out infinite alternate;
  animation:blink 1.5s ease-in-out infinite alternate;
}

@-webkit-keyframes blink{
    0% {opacity: .2;}
    100% {opacity: 1;}
}
@-moz-keyframes blink{
    0% {opacity: 0.2;}
    100% {opacity: 1;}
}
@keyframes blink{
    0% {opacity: .2;}
    100% {opacity: 1;}
}

#__msgbox {
	position: absolute;
    top: 400px;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 400px;
    height: 80px;
    background: rgba(255, 255, 255, 0.85);
    line-height: 80px;
    text-align: center;
    font-weight: bold;
    color: #e03733;
    font-size: 20px;
    border: 10px solid white;
    border-radius: 45px;
}

#finish {
    font-family: 'Rix밝은굴림', sans-serif;
    font-weight: bold;
    font-size: 60px;
    text-align: center;
    width: 100%;
    height: 100%;
    display: table-cell;
    vertical-align: middle;
    padding-top: 387px;
	color: #e03733;
	z-index: 100;
}

.shake {
	animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) infinite both;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	perspective: 1000px;
}

@keyframes shake {
	10%, 90% {
		transform: translate3d(-1px, 0, 0);
	}

	20%, 80% {
		transform: translate3d(2px, 0, 0);
	}

	30%, 50%, 70% {
		transform: translate3d(-4px, 0, 0);
	}

	40%, 60% {
		transform: translate3d(4px, 0, 0);
	}
}
@keyframes shake2 {
	10%, 90% {
		transform: translate3d(-1px, -1px, 0);
	}

	20%, 80% {
		transform: translate3d(2px, 2px, 0);
	}

	30%, 50%, 70% {
		transform: translate3d(-4px, -4px, 0);
	}

	40%, 60% {
		transform: translate3d(4px, 4px, 0);
	}
}

#starbg {
	opacity: 0;
	animation: star 6s 5s infinite forwards;
	width:1276px;
}

@keyframes star {
	0% {
		opacity: 0;
		filter:hue-rotate(0deg);
	}

	50% {
		opacity: 1;

	}

	100% {
		opacity: 0;
		filter:hue-rotate(360deg);
	}

}

#p2 {
	filter : hue-rotate(200deg);
}
#p4 {
	filter : hue-rotate(200deg);
}
#p12 {
	filter : hue-rotate(100deg);
}