/*
 * screen4.css
 */
/* touch scroll 안 됨!!(블록콕/아이콕 터치드래그 안됨 보완했었지)
*{touch-action: none;}
*{touch-action: pan-x,pan-y;}
* - 협동활동 multi-canvas groupActivity
* - 다했어요 알림 -btnDoneAlarm
* - 혼합연령 추가
* - '퍼즐맞춤' 메뉴추가(테스트용)- 지면활동지 jigsaw puzzle 게임변환기능
*/

#childDone{
	position: absolute;
	top: 0; left: 0;
	width: 100%; height: 100%;
	background-color: rgba(0, 0, 0, 0.3);
	background-image:url(../img/padview/tablet_1.png);
	background-size: 77%;
	background-repeat:no-repeat;
	background-position: center center;
	z-index:1;
}
#childDone div {pointer-events: all;}

#closeChildDone{
	position:absolute;
	top: 60px; right:245px;
	width: 80px; height:80px;
	border:0px solid red;
	border-radius:50%;	
	background-image:url(../img/padview/icon_exit_on.png);
	background-size: 90px;
	background-repeat:no-repeat;
	background-position: center center;
}
#closeChildDone:active{
	transform:translateY(5px);
}

#childDoneActivity{
	position:absolute;
	top: 150px; left: 320px;
	width: 1280px; height: 800px;
	background-color: gray;
	border:1px solid #dedede;
	background-size: cover;
}
#childDoneName{
	position:absolute;
	top: 80px; left: 330px;
	width: 300px; height: 60px;
	background-color: rgba(0,0,0,0);
	font-size: 34px;
	line-height: 60px;	
	font-family: 'Jua', sans-serif;
	letter-spacing: 3px;
	color: #666;
}
#childDoneFace{
	position:absolute;
	top: 70px; left:250px;
	width: 70px; height:70px;
	border:0px solid red;
	border-radius:50%;	
	background-color: rgba(0,0,0,0.7);
	background-size: contain;
}

#btnDoneAlarm{
	sdisplay: none;
	position: absolute;
	bottom:20px; right:130px;
	width:83px; height:83px;
	background-repeat: no-repeat;
	background-position: center center;
	background-color: orange;
	background-image:url(../img/btnDoneAlarm.png);
	border-radius:50%;
	z-index: 1;
}

#childDoneCount{
	position: absolute;
	top:-10px; right:-5px;
	width: 30px; height: 30px;
	background-color: rgba(255,0,0,0.8);
	border: 5px solid rgba(0,0,0,0.2);
	border-radius: 50%;
	line-height: 30px;
	font-size:22px;
	color: white;
}

#panelDoneAlarm{
	display: none;
	position: absolute;
	bottom:110px; right:120px;
	width:100px; height:950px;
	border: 0px solid  rgba(255, 255, 255, 0.6);
	border-radius: 100px;
	background-color: rgba(0, 0, 0, 0.1);
	z-index: 1;
}

#panelDoneAlarmChildList{
	position: absolute;
	top: 70px; left: 0;
	height: 810px; width: 95px;
	border: 0px solid red;
	display: flex;
	flex-direction: column-reverse;
	/*하단기준 정렬*/
	overflow: hidden; /*10명씩!*/
	flex-wrap: wrap-reverse;/*10명씩!*/
	align-content: flex-start;	
}

#btnDoneChildPrev,
#btnDoneChildNext{
	position: absolute;
	width: 100px; height: 70px;
	background-repeat: no-repeat;
	background-position: center center;
}
#btnDoneChildNext{
	top:0;
	background-image: url(../img/btn_next_off.png);
}
#btnDoneChildPrev{
	bottom: 0;
	background-image: url(../img/btn_prev_off.png);
}
#btnDoneChildNext.on{background-image: url(../img/btn_next.png);}
#btnDoneChildPrev.on{background-image: url(../img/btn_prev.png);}

.btnDoneChild{
	width: 70px; height: 70px;
	background-color: rgba(255,0,0,0.5);
	border-radius:50%;
	border:0px solid orange;
	pointer-events: all;
	margin: 5px 10px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 70px 70px;
	text-align: center;
}
.btnDoneChild.checked{
	display: none;
	opacity: 0.5;
	border:0px solid gray;
	background-color: rgba(0,0,0,0.5);
}

#groupActivity{
	border:0px solid green;
	width: 1700px;
	height: 1080px;
	position: absolute;
	background-color: rgba(0,0,255,0);

	top:0; left: 110px;
	pointer-events: none;	
	display: flex;
	flex-wrap: wrap;
	align-content:flex-start;
}
#groupActivity_cover{
	position:absolute;
	top:0;left:0;
	width:1700px;height:1080px;
	background-color:rgba(0,0,0,0);
	border:0px solid red;
	background-repeat:no-repeat;
	background-position: center center;
	background-size: 1700px 1080px;
	sbackground-image:url("https://kidscokmini.com/datas/5a/coop/협동그림_명화(투명)_20240220111418.png");
	opacity:0.9;
}

#groupActivity_save{
	position: absolute;
	bottom:37px; right:0;
	width:110px; height:113px;
	background-repeat:no-repeat;
	background-size: contain;
	background-position: center center;
	background-image: url(../img/groupActivity_done.png);
}
#groupActivity_save:active{transform: translateY(3px);}

/*outline 가이드 이미지 레이어*/
#outline{
	position: absolute;
	top:0;left:0;
	width:100%; height:100%;
	border:0px solid red;
	background-color:rgba(1,1,1,0);
	sbackground-image:url("https://kidscokmini.com/datas/7a/silver/협동그림_명화(투명)_20240103173851.png");
	/*outline::before -> background-image: attr(outline);*/
	background-size: 1700px 1080px;
	pointer-events:none;
}

/* 3x3 
.childCanvas{
	border:0px dotted #ddd;
	width: 566px;height: 360px;
	background-color: rgba(0,0,0,0);
	pointer-events: all;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% 100%;
}

.childCanvas:nth-child(2){background-color:rgba(0,0,255,0);}
.childCanvas:nth-child(3){background-color:rgba(0,255,0,0);}
.childCanvas:nth-child(4){background-color:rgba(0,0,255,0);}
.childCanvas:nth-child(5){background-color:rgba(0,0,255,0);}
.childCanvas:nth-child(6){background-color:rgba(0,0,255,0);}
.childCanvas:nth-child(7){background-color:rgba(0,0,255,0);}
.childCanvas:nth-child(8){background-color:rgba(0,0,255,0);}
.childCanvas:nth-child(9){background-color:transparent;pointer-events:none;}

.childCanvas::before{ 
	content:attr(childName);
	position: absolute;
	width: 100px; height:20px;
	background-color: rgba(0,0,0,0.5);
	color: antiquewhite
}

.childCanvas::after{
	content:'';
	position: absolute;
	transform: translateX(-566px);
	width:566px; height:360px;
	border-right: 5px dotted white;
	border-bottom: 5px dotted white;
}

.childCanvas > canvas {
	position: relative;
	top: 0; left: 0;
	width: 566px;height: 360px;
}
*/

/*
1x1 1700x1080
2x2	850 x 540
3x3 width: 566px;height: 360px;
4x3 425 x 360
4x4	width: 425px;height: 270px;	
5x4 340 x 270
5x5 340 x 216
6x5 283 x 216	
6x6 283 x 180	
*/

/* 4x4 */
.childCanvas{
	border:0px dotted #ddd;
	swidth: 425px;sheight: 270px;
	background-color: rgba(0,0,0,0);
	pointer-events: all;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% 100%;
	box-sizing: border-box;
}

/*협동활동 캔버스 크기*/
.childCanvas2x2{width: 850px;height: 540px;}
.childCanvas3x3{width: 566px;height: 360px;}
.childCanvas4x3{width: 425px;height: 360px;}
.childCanvas4x4{width: 425px;height: 270px;}
.childCanvas5x4{width: 340px;height: 270px;}
.childCanvas5x5{width: 340px;height: 216px;}
.childCanvas6x5{width: 283px;height: 216px;}
.childCanvas6x6{width: 283px;height: 180px;}

.childCanvas:nth-child(2){background-color:rgba(0,0,255,0);}
.childCanvas:nth-child(3){background-color:rgba(0,255,0,0);}
.childCanvas:nth-child(4){background-color:rgba(0,0,255,0);}
.childCanvas:nth-child(5){background-color:rgba(0,0,255,0);}
.childCanvas:nth-child(6){background-color:rgba(0,0,255,0);}
.childCanvas:nth-child(7){background-color:rgba(0,0,255,0);}
.childCanvas:nth-child(8){background-color:rgba(0,0,255,0);}
.childCanvas:nth-child(9){background-color:rgba(0,0,255,0);}
.childCanvas:nth-child(10){background-color:rgba(0,0,255,0);}
.childCanvas:nth-child(11){background-color:rgba(0,0,255,0);}
.childCanvas:nth-child(12){background-color:rgba(0,0,255,0);}
.childCanvas:nth-child(13){background-color:rgba(0,0,255,0);}
.childCanvas:nth-child(14){background-color:rgba(0,0,255,0);}
.childCanvas:nth-child(15){background-color:rgba(0,0,255,0);}
.childCanvas:nth-child(16){background-color:rgba(0,0,255,0);}

.childCanvas::before{
	content:attr(childName);
	position: absolute;
	width: 100px; height:20px;
	background-color: rgba(0,0,0,0);
	color: transparent;
}

.childCanvas::after{
	content:'';
	position: absolute;
  transform: translateY(-290px); /*270*2+20*/
	width:425px; height:270px;
	border-right: 5px dotted white;
	border-bottom: 5px dotted white;
	z-index:1;	
	box-sizing: border-box;
}
.childCanvas2x2::after{width: 850px;height: 540px;transform: translateY(-565px); /*270*2+20*/}
.childCanvas3x3::after{width: 566px;height: 360px;transform: translateY(-385px); /*270*2+20*/}
.childCanvas4x3::after{width: 425px;height: 360px;transform: translateY(-385px); /*270*2+20*/}
.childCanvas4x4::after{width: 425px;height: 270px;transform: translateY(-295px); /*270*2+20*/}
.childCanvas5x4::after{width: 340px;height: 270px;transform: translateY(-295px); /*270*2+20*/}
.childCanvas5x5::after{width: 340px;height: 216px;transform: translateY(-241px); /*270*2+20*/}
.childCanvas6x5::after{width: 283px;height: 216px;transform: translateY(-241px); /*270*2+20*/}
.childCanvas6x6::after{width: 283px;height: 180px;transform: translateY(-200px); /*270*2+20*/}

.childCanvas > canvas {
	position: relative;
	top: 0; left: 0;
	width: 425px;height: 270px;
}

.childCanvas2x2 > canvas{width: 850px;height: 540px;}
.childCanvas3x3 > canvas{width: 566px;height: 360px;}
.childCanvas4x3 > canvas{width: 425px;height: 360px;}
.childCanvas4x4 > canvas{width: 425px;height: 270px;}
.childCanvas5x4 > canvas{width: 340px;height: 270px;}
.childCanvas5x5 > canvas{width: 340px;height: 216px;}
.childCanvas6x5 > canvas{width: 283px;height: 216px;}
.childCanvas6x6 > canvas{width: 283px;height: 180px;}

.childCanvas > canvas:nth-child(1) {
	position: relative;
	top: 0; left: 0;
	pointer-events:none;
	display: none; /*지우개용backCanvas*/
}
.childCanvas > canvas:nth-child(2) {
	position: relative;
	top: 0px; left: 0;
}

.childCanvasName{
	position: relative;
	top:-270px; left: 0;
	width: 100px; height:20px;
	background-color: rgba(0,0,0,0.5);
	color: antiquewhite
}

.childCanvas2x2 > .childCanvasName{top:-540px;}
.childCanvas3x3 > .childCanvasName{top:-360px;}
.childCanvas4x3 > .childCanvasName{top:-360px;}
.childCanvas4x4 > .childCanvasName{top:-270px;}
.childCanvas5x4 > .childCanvasName{top:-270px;}
.childCanvas5x5 > .childCanvasName{top:-210px;}
.childCanvas6x5 > .childCanvasName{top:-210px;}
.childCanvas6x6 > .childCanvasName{top:-180px;}
/*}}*/

.print-div{border:0px solid red;
	width:auto;
	height:auto;
	max-width:100%; max-height:100%; 
	bottom: 0;
	left: 0;
	margin: auto;
	overflow: auto;
	position: fixed;
	right: 0;
	top: 0;
	-o-object-fit: contain;
	object-fit: contain;
}

body{
	padding: 0; margin: 0;
    overflow: hidden;
    background-color: #000;

	overscroll-behavior: contain;
/*  text-size-adjust: none; 
  
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
*/}

/*https://stackoverflow.com/questions/29001977/safari-in-ios8-is-scrolling-screen-when-fixed-elements-get-focus*/
html,body{
    -webkit-overflow-scrolling : touch !important;
    overflow: auto !important;
    height: 100% !important;
/*  text-size-adjust: none; 
  -webkit-text-size-adjust: none; 
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
*/}

/*스크롤 새로고침 방지용 --> 새로고침 됨? */
html, body, iframe {
  overscroll-behavior-x: none;
}

/*스크롤 새로고침 방지용 --> 새로고침 됨!! */
html,body {overflow: hidden !important;}
body{-webkit-text-size-adjust: none;}

div:focus{outline: none;}

/* diable text selection */
div{
  -webkit-user-select: none; /* Safari 3.1+ */
  -moz-user-select: none; /* Firefox 2+ */
  -ms-user-select: none; /* IE 10+ */
  user-select: none; /* Standard syntax */
} 

/* 내컴퓨터 */
input[type="file"]#myComputer {
	visibility: hidden;
	width: 0; height: 0;
}

/* 아이콘 버튼 */
.iconBtn{
	position: absolute;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain; 
}

.iconText{
	position: absolute;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover; 
} 

.screenCover{
  position: fixed;absolute; /* prevent screen bouncing!! */
  top:0px;left:0px;
  top:50%; left: 50%;
  transform: translate(-50%, -50%);
  width:1920px;height:1080px;
  background-color: rgba(0,255,0,0);
  pointer-events: auto;   
}

div.screen{
 	position: fixed;absolute; /* prevent screen bouncing!! */
 	/*width: 1280px;100%; height: 800px; 100%;*/
 	width: 1920px;100%; height: 1080px; 100%;
 	/* 화면 중앙 정렬 */
    top:50%; left: 50%;
    transform: translate(-50%, -50%);
    background-size: cover;
 	background-color: rgba(255,255,255,1);
}
div.screenTest{
 	position: fixed;absolute; /* prevent screen bouncing!! */
 	/*width: 1280px;100%; height: 800px; 100%;*/
 	width: 1920px;100%; height: 1080px; 100%;
 	/* 화면 중앙 정렬 */
    top:0; left: 0;
    background-size: cover;
 	background-color: rgba(255,255,255,1);
}
canvas{
	position: absolute;
	top: 0; left: 110px;
	/*width: 1280px; height: 800px;*/
	width: 1700px;1920px; height: 1080px;
	/*left: 0; width: 1920px;*/

}

#sendCanvas,
#padviewCanvas,
#backCanvas,
#backCanvasCopy{}
#myCanvas,
#myCanvasCopy{opacity:0.9;}
/*선생님칠판 touchmove시 유아캔버스 겹쳐짐 방지!!*/
.childCanvas > canvas{opacity:1 !important;}
.childCanvas {background-color: white !important;}

/*{{캔버스  overlay masking filter 테스트!!!*/
#maskCanvas{display:none;pointer-events: none;z-index: 1;}
/*취소!!--협동명화-원화영역 masking guard로 적용하기!
#maskCanvas.groupCanvas{pointer-events:all;}
*/
#maskCanvas:not(.touched){
  background-color: rgba(0,0,0,0);

  animation: blink_ani 2s ease-in forwards;
  animation-iteration-count: infinite;
}
@keyframes blink_ani{
  0%,100% { background-color: rgba(252,182,41,0.5);}
  50% { background-color: rgba(255,0,0,0);}
}
/*}}*/

/* {{ menu.css */	
div.menu { 
	border-radius: 20px; 
	width: 100px; height: 50px;
	font-size: 22px;
	font-family: 'Jua', sans-serif;
	text-align: center;
	line-height: 50px;
	margin: 20px;
	color: #fff;
	background-color: rgba(0,0,0,0.9);
}
.menu.selected{
 	color: gold;
 	background-color: rgba(0,0,0,1);
}
/* }} */

.childFace{ 
 	float: left;
 	border-radius: 50%;
 	width: 50px; height: 50px;
 	line-height: 50px; text-align: center;
 	background-color: rgba(255,0,255,0.1);
}
#childList{
 	display: flow-root;
 	pointer-events:none;
 	position: absolute;
 	top: 90%; left: 0;
 	width: 100%; height: 10%;
}

#webview{
 	display: none;
 	border:0px solid blue;
 	position: absolute;
 	display:inline-flex;
 	top:0px; left: 110px; 
 	width: 1700px;100%; height: 1080px;100%;
}
#video{
 	display: none;
 	border:0px solid blue;
 	position: absolute;
 	sdisplay:inline-flex;
 	top:0px; left: 110px; 
 	width: 1700px;100%; height: 1080px;100%;
 	background-color: rgba(0,0,0,1);
}

#childDoneList{
	display: flex;
 	pointer-events: none;

 	position: absolute;
 	top: 0; left: 0;
 	width: 100%; height: 100%;
 	background-color: rgba(0,0,255,0.0);
}
.childDoneFace{
	pointer-events: auto;

	float: left;

	width: 70px; height: 70px;
	border:1px solid white;
	border-radius: 50%;
	background-color: gold;
	box-shadow: 1px 2px 4px rgba(0, 0, 0, .5)

	font-size:12px;
	line-height: 100px;
	text-align: center;
	text-shadow: 2px 2px 5px #fff;  
}

/* screenLoading_Blanket */
#screenLock{
	display: none;
	z-index: 9999;
 	background-color: rgba(0,64,32,0.2);
}
#screenLoading{
	display: none;
	z-index: 999;
 	pointer-events: none;
 	background-color: rgba(0,0,0,0.5);
}
#screenLoading2{
	display: none;
	z-index: 999;
 	pointer-events: none;
 	background-color: rgba(0,0,0,0.2);
}

/* 0.SPLASH SCREEN */
#screenSplash{z-index: 999;}
#kidscok_bi{
	position: absolute;
	top: 280px;450px;left: 631px;
	width: 594px;658px;height: 287px;120px;
	background-image: url(../img/00_splash/kidscok_bi.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
}

#kidscok_text{
	position: absolute;
	top: 854px;left: 140.5px;
	width: 1639.5px;height: 169.5px;
	background-image: url(../img/00_splash/award.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
}

/* 1.LOGIN SCREEN */
#screenLogin{
	spadding:100px;
	background-color: rgba(255,255,255,1);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url(../img/01_login/00_login_bg.png);
}

#loginBox{
	position: absolute;
	top: 294px; left: 493.5px;
	width: 933px; height: 492px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url(../img/01_login/00_login_box.png);
}

#login_id_off{position: absolute;
	top: 128px;left: 542px;
	width: 35px;height: 24px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url(../img/01_login/00_login_id_off.png);
}
#login_pw_off{position: absolute;
	top: 196px;left: 547px;
	width: 25px;height: 31.5px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url(../img/01_login/00_login_pw_off.png);
}
#login_icon_login_off{position: absolute;
	top: 254.5px;left: 521px;
	width: 330.5px;height: 65px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url(../img/01_login/00_login_icon_login_off.png);
}
#save_check_id{top: 338px;left: 594px;}
#save_check_pw{top: 338px;left: 813.5px;}
.save_check{
	position: absolute;
	width: 57.5px;height: 32.5px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url(../img/01_login/00_login_check_off.png);
}
.save_check.on{
	background-image: url(../img/01_login/00_login_check_on.png);
}

#login_join{position: absolute;
top: 422px;
left: 515.5px;
width: 167px;
height: 33px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url(../img/01_login/00_login_join.png);
}
#login_pw{position: absolute;
	top: 422px;
left: 690px;
width: 167px;
height: 33px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url(../img/01_login/00_login_pw.png);
}

form{}

input[type=text],input[type=password],button#btnLogin{
	position: absolute;
	color: #396;
 	background-color: rgba(0,0,0,0);
 	border: none;
 	border-radius: 50px; 
 	padding: 0;5px 20px;
	width: 250px; height: 50px;
 	font-size: 22px;
	font-family: 'Jua', sans-serif;
	outline: none;
}
#email{top: 115px; left: 590px;}
#pass{top: 186px; left: 590px;}

form > div {margin: 10px 0;}

button#btnLogin {
	top: 254.5px;left: 521px;
	width: 330.5px;height: 65px;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url(../img/01_login/00_login_icon_login_off.png);
}
button#btnLogin.on{background-image: url(../img/01_login/00_login_icon_login_on.png);}
button#btnLogin:active{
	transform: translateY(4px);
	sbackground-image: url(../img/01_login/00_login_icon_login_on.png);
}

div#version{
 	position: absolute;
 	bottom: 0; left: 35%;0;
 	width: 30%;100%; height: 50px;
 	background-color: rgba(0,0,0,0);
 	font-size: 15px;
 	line-height: 50px;
 	font-weight: bold;
 	color: rgba(255,255,255,0.5);
 	text-shadow: 2px 2px 2px rgba(0,0,0,0.3);
	font-family: Helvetica, sans-serif;
	text-align: center;
}

/* 02.Select Class SCREEN */
#screenSelectClass{
	background-image: url(../img/02_select/age_bg.png);
	background-image: url(../img/skin_01/bg.png);
}

#iconLink{
	top: 42.5px;left: 1277.5px;1668px;
	width: 90px;height: 90px;
	background-image: url(../img/pagelink.png);}
#icon_faq{
	top: 42.5px;left: 1407.5px;1668px;
	width: 90px;height: 90px;
	background-image: url(../img/faq_off.png);}
#icon_faq.on{background-image: url(../img/faq_on.png);}
#age_icon_sound{
	top: 42.5px;left: 1537.5px;1668px;
	width: 90px;height: 90px;
	background-image: url(../img/skin_01/age_icon_sound_on.png);}
#age_icon_sound.off{background-image: url(../img/skin_01/age_icon_sound_off.png);}	
#age_icon_end{
	top: 42.5px;left: 1777.5px;1788px;
	width: 90px;height: 90px;
	background-image: url(../img/skin_01/age_icon_end_on.png);}
#age_icon_start{
	top: 893px;899.5px;left: 795.5px;775.5px;
	width: 329.5px;342px;height: 122.5px;119px;
	background-image: url(../img/skin_01/age_icon_start_off.png);
}
#age_icon_start.on{background-image: url(../img/skin_01/age_icon_start_on.png);}

#age_icon_sound:active{transform: translateY(4px);}
#age_icon_end:active{transform: translateY(4px);}
#icon_esc:active{transform: translateY(4px);}
#age_icon_start.on:active{transform: translateY(4px);}

#icon_esc{
	top: 42.5px;left: 1657.5px;1548px;
	width: 90px;height: 90px;
	background-image: url(../img/skin_01/age_house_icon_on.png);}

#text_select_age{
	top: 377px;219px; left: 813px;855.5px;
	width: 299.5px;233px; height: 42.5px;31px;
	background-image: url(../img/skin_01/age_text01.png)
}
#text_select_class{
	top: 377px;219px; left: 813px;855.5px;
	width: 299.5px;233px; height: 42.5px;31px;
	background-image: url(../img/skin_01/age_text02.png)	
}
.ageSelector{
	top: 512.5px;547.5px;418px;
	width: 172.5px;198.5px; height: 172px;198.5px;
}
.ageSelector:active{transform: translateY(4px);}

#age4{left: 377.5px;417px;448px; background-image: url(../img/02_select/age_select_4.png)}
#age5{left: 576.5px;640.5px;657.5px; background-image: url(../img/02_select/age_select_5.png)}
#age6{left: 775.5px;863.5px;866px; background-image: url(../img/02_select/age_select_6.png)}
#age7{left: 974.5px;1087px;1074px; background-image: url(../img/02_select/age_select_7.png)}
#age8{left: 1173px;1310px;1282.5px; background-image: url(../img/02_select/age_select_8.png) !important;}
#age0{left: 1371.5px;1310px;1282.5px; background-image: url(../img/02_select/age_select_other.png)}

.ageSelector2{
	top: 453px;286px;
	width: 69.5px;75.5px; height: 69.5px;75.5px;
}
.ageSelector2:active{transform: translateY(4px);}

#age4s{left: 709.5px;757px; background-image: url(../img/02_select/age_select_4s_off.png)}
#age5s{left: 802.5px;842px; background-image: url(../img/02_select/age_select_5s_off.png)}
#age6s{left: 895.5px;927.5px; background-image: url(../img/02_select/age_select_6s_off.png)}
#age7s{left: 988.5px;1012.5px; background-image: url(../img/02_select/age_select_7s_off.png)}
#age8s{left: 1081.5px;1097.5px; background-image: url(../img/02_select/age_select_8s_on.png)  !important;filter: grayscale(100%)  !important;}
#age0s{left: 1174.5px;1097.5px; background-image: url(../img/02_select/age_select_otherS_off.png)}

#age4s.on{background-image: url(../img/02_select/age_select_4s_on.png);}
#age5s.on{background-image: url(../img/02_select/age_select_5s_on.png);}
#age6s.on{background-image: url(../img/02_select/age_select_6s_on.png);}
#age7s.on{background-image: url(../img/02_select/age_select_7s_on.png);}
#age8s.on{background-image: url(../img/02_select/age_select_8s_on.png) !important;filter: grayscale(0%)  !important}
#age0s.on{background-image: url(../img/02_select/age_select_otherS_on.png);}

.agePage{
	top: 592px;622px;530px;
	width: 59px;39px; height: 97px;78px;
	filter: grayscale(100%);
}
.agePage.on{filter: grayscale(0%);}
.agePage.on:active{transform: translateY(4px);}

#age_page_prev{left: 375px;345px;423.5px; background-image: url(../img/02_select/age_page.png);}
#age_page_next{left: 1486px;1516px;1400.5px; background-image: url(../img/02_select/age_page.png); transform: scaleX(-1);}

#classList{
	display: flex; 
	flex-wrap: wrap;
	sjustify-content: center;
	align-content: stretch;

	position: absolute;
	top: 568.5px;598.5px;400px; left: 430.5px;420.5px;500px;
	width: 1070px;1090px;850px; height: 144px;350px;
	padding-left: 0px;
	background-color: rgba(128,128,128,0);
}
.class{
	margin: 0px 7px 0px 7px;
	width: 335px;345px;343px; height: 134px;144px;140px;
	border:1px solid #dedede;
	border-radius: 70px;
	background-color: rgba(128,222,0,0.9);
	font-family: 'Jua', sans-serif;
	stext-shadow: 1px 1px 3px #ccc;
	font-size: 36px;38px; letter-spacing: 3px;
	line-height: 135px;140px;
	text-align: center;
}
.class:active{transform: translateY(4px);}
.class.on{
	border:1px solid #fff;
	background-color: orange;
	color: white;
	font-weight: bold;
	transform: translateY(4px);
}

/* 03.Class SCREEN */
#screenClass{
 	background-position: center center;
 	background-repeat: no-repeat;
 	background-size: cover;
}

.menuBar{
	position: absolute;
	top: 0;
	width: 110px; height: 1080px;
 	background-position: center center;
 	background-repeat: no-repeat;
 	background-size: cover;
 	background-image: url(../img/03_class/bar.png);

	display: flex;
	flex-direction: column;
}
#menu_bar_01{left: 0px;justify-content: center;}
#menu_bar_02{left: 1810px; justify-content: top;}

#menu_bar_01.locked::after,
#menu_bar_02.locked::after{
	content:'';
	position:absolute;
	top:0; left:0;
	width: 100%; height:100%;
	background-color:rgba(0,0,0,0.5);
}

#menu_bar_01.switched{left: 1810px;}
#menu_bar_02.switched{left: 0;}


.mainMenu{
	position: absolute;
	left: 18px;
	smargin: 5px 22.5px;
	width: 75px; height: 75px;
	background-color: rgba(255,125,0,0.);
 	background-image: url(../img/03_class/icon_send_off.png);
 	background-position: center center;
 	background-repeat: no-repeat;
 	background-size: contain;
}
.mainMenu:active{transform: translateY(4px);}
.mainMenu:hover{cursor: pointer;}
.mainMenuTxt{
	smargin: 0px 22.5px 7px 22.5px;
	position: absolute;
	left: 20px;
	width: 75px; height: 14px;
	font-family: 'Jua', sans-serif;
	font-size: 18px; letter-spacing: 3px;
	line-height: 18px;
	color: #f7f7f7;
	text-shadow: -1px -1px 1px #ccc;
	text-align: center;
	white-space: nowrap;
	
}
.mainMenuTxt.on{color: #000;text-shadow: 0px 0px 0px transparent;}

.mainMenu.hide{opacity: 0; pointer-events: none;}
.mainMenuTxt.hide{opacity: 0; pointer-events: none;}

/*kidscokmini(미니)통합*/
.mainMenu.mini{opacity: 0.5; pointer-events: none;}
.mainMenuTxt.mini{opacity: 0.5; pointer-events: none;}
.view_size.mini{opacity: 0.5; pointer-events: none;}

#menu_faq{top: 20px;background-image: url(../img/faq_off.png);}
#menu_faq+div{top: 105px;}

/*golden bell*/
#menu_golden_bell{top: 120px;background-image: url(../img/faq_off.png);}
#menu_golden_bell+div{top: 205px;}
#menu_golden_bell{
	background-color: rgba(0,0,0,0);
	filter: grayscale(100%);
	border-radius: 15px;
	background-image: url(https://cdn3.iconfinder.com/data/icons/easter-egg-day/256/Golden_Bell_Wiht_Ribbon_Tie.png);}
#menu_golden_bell.on{
	background-color: rgba(128,128,0,0.5);
	filter: grayscale(0%);
}
/*Jigsaw Puzzle*/
#menu_puzzle{top: 125px;background-image: url(../img/faq_off.png);}
#menu_puzzle+div{top: 202px;}
#menu_puzzle{
	background-color: rgba(0,0,0,0);
	filter: grayscale(100%);
	border-radius: 15px;
	background-image: url(https://cdn2.iconfinder.com/data/icons/education-and-learning-43/60/puzzle__solution__teamwork__jigsaw__education-256.png);}
#menu_puzzle.on{
	background-color: rgba(128,128,0,0.5);
	filter: grayscale(0%);
}

/*contextual 메뉴에서 원복!*/
#menu_coktip{top: 280px;display:none;}
#menu_coktip+div{top: 360px;display:none;}
#menu_coktip_data{top: 280px;display:none;}
#menu_coktip_data+div{top: 360px;display:none;}

#menu_coktip.on{top: 280px;display:block;background-image: url(../img/03_class/icon_CokTip_off.png);}
#menu_coktip.on+div{top: 360px;display:block;}
#menu_coktip_data.on{top: 280px;display:block;background-image: url(../img/icon_coktipData_off.png);}
#menu_coktip_data.on+div{top: 360px;display:block;}
#menu_teaching_data{top: 380px;background-image: url(../img/icon_teachingData_off.png);}
#menu_teaching_data+div{top:460px;}
#menu_print{top: 480px;background-image: url(../img/icon_print_off.png);}
#menu_print+div{top:560px;}
#menu_wallpaper{top: 580px; background-image: url(../img/03_class/icon_wallpaper_off.png);}
#menu_wallpaper+div{top: 660px;}
#menu_myComputer{top: 680px;background-image: url(../img/03_class/icon_MyCom_off.png);}
#menu_myComputer+div{top: 760px;}
#menu_switch{top: 780px;background-image: url(../img/03_class/icon_switch_off.png);}
#menu_switch+div{top: 860px;}
#menu_exit{top: 880px; background-image: url(../img/03_class/icon_power_off.png);}
#menu_exit+div{top: 960px;}


#menu_close{top:10px; background-image: url(../img/03_class/icon_close.png);}
#menu_close.back{background-image: url(../img/03_class/icon_back.png);}
#menu_close.none{background-image: none;}

#menu_cms{top: 114px;background-image: url(../img/03_class/icon_study_off.png);}
#menu_cms+div{top: 200px;}
#menu_child{top: 220px;background-image: url(../img/03_class/icon_search_off.png);}
#menu_child+div{top: 300px;}
#menu_view{top: 320px;background-image:none;sbackground-image: url(../img/03_class/icon_view_off.png);}
#menu_view+div{top: 400px;}
#menu_tool{top: 420px;background-image: url(../img/03_class/icon_tool_off.png);}
#menu_tool+div{top: 500px;}
#menu_stamp{top: 520px;background-image: url(../img/03_class/icon_stemp_off.png);}
#menu_stamp+div{top: 600px;}
#menu_teacher{top: 720px;background-image: url(../img/03_class/icon_teacher_off.png);}
#menu_teacher+div{top: 800px;}
#menu_send{top: 820px;background-image: url(../img/03_class/icon_send_off.png);}
#menu_send2{top: 820px;background-image: url(../img/03_class/icon_send2_off.png);}
#menu_send+div{top: 900px;}
#menu_send2+div{top: 900px;}


#menu_wallpaper.on{background-image: url(../img/03_class/icon_wallpaper_on.png);}
#menu_faq.on{background-image: url(../img/faq_on.png);}
#menu_myComputer.on{background-image: url(../img/03_class/icon_MyCom_on.png);}
#menu_switch.on{background-image: url(../img/03_class/icon_switch_on.png);}
#menu_exit.on{background-image: url(../img/03_class/icon_power_on.png);}

#menu_coktip.on{background-image: url(../img/03_class/icon_CokTip_on.png);}
#menu_coktip_data.on{background-image: url(../img/icon_coktipData_on.png);}
#menu_teaching_data.on{background-image: url(../img/icon_teachingData_on.png);}
#menu_print.on{background-image: url(../img/icon_print_on.png);}
#menu_cms.on{background-image: url(../img/03_class/icon_study_on.png);}
#menu_child.on{background-image: url(../img/03_class/icon_search_on.png);}
#menu_view.on{background-image:none;sbackground-image: url(../img/03_class/icon_view_on.png);}
#menu_tool.on{background-image: url(../img/03_class/icon_tool_on.png);}
#menu_stamp.on{background-image: url(../img/03_class/icon_stemp_on.png);}
#menu_teacher.on{background-image: url(../img/03_class/icon_teacher_on.png);}
#menu_send.on{background-image: url(../img/03_class/icon_send_on.png);}
#menu_send2.on{background-image: url(../img/03_class/icon_send2_on.png);}
#menu_send.on{
	animation: ani_send_on 1s infinite;
}
@keyframes ani_send_on {
  0%,100%   {background-image: url(../img/03_class/icon_send_off.png);}
  50%  {background-image: url(../img/03_class/icon_send_on.png);}
}
#menu_print.ready{background-image: url(../img/icon_print_on.png);}
#menu_coktip.ready{display:block;background-image: url(../img/03_class/icon_CokTip_on.png);}
#menu_coktip_data.ready{display:block;background-image: url(../img/icon_coktipData_on.png);}
#menu_teaching_data.ready{background-image: url(../img/icon_teachingData_on.png);}
#menu_coktip.ready+div{display:block;}
#menu_coktip_data.ready+div{display:block;}

/*https://d2.naver.com/helloworld/8540176*/
#menu_page{
	position: absolute;
	top: 930px; left: 5px;
	width:110px; height: 113px;
	background-repeat: no-repeat;
	background-image: url(../img/03_class/icon_page_box.png);
	background-size: contain;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around 
}

#menu_clock{top:610px;background-image: url(../img/mini/mi_icon_emo_off.png);}
#menu_clock+div{top:700px;}
#menu_attention{top:200px;background-image: url(../img/mini/mi_icon_ccr_off.png);}
#menu_clock.on{background-image: url(../img/mini/mi_icon_emo_on.png);}
#menu_attention.on{background-image: url(../img/mini/mi_icon_ccr_on.png);}

#menu_send_group{
	top: 820px;120px;
	border-radius: 15px;
	background-color:#FFDB71;
	background-size: 60px;
}
#menu_send_group+div{top:900px;200px;}
#menu_send_group.on{background-color:#FFFFFF;}
#menu_send_group{background-image: url(../img/icon_group_activity.png);}
#menu_send_group.on{background-image: url(../img/icon_group_activity.png);}

#menu_send.group::before{
	content: '';/*'협동활동';*/
	position: absolute;
	top:0; left:0;
	width: 100%; height: 100%;
	text-align: center;
	line-height: 120px;
	color: #333;
}

/*#menu_faq{position:absolute;}
#menuTxt_faq{position: absolute;}
#menu_coktip{position:absolute;}
#menuTxt_coktip{position:absolute;}
#menu_coktip_data{position:absolute;}
#menuTxt_coktip_data{position:absolute;}
#menu_teaching_data{position:absolute;}
#menuTxt_teaching_data{position:absolute;}
#menu_print{position: absolute;}
#menuTxt_print{position: absolute;}
#menu_wallpaper{position: absolute;}
#menuTxt_wallpaper{position: absolute;}
#menu_myComputer,#menuTxt_myComputer,
#menu_switch,#menuTxt_switch,
#menu_exit,#menuTxt_exit{position: absolute;}

#menu_faq{top:45px;}
#menuTxt_faq{top: 120px;}
#menu_coktip{top:190px;}
#menuTxt_coktip{top:270px;}
#menu_coktip_data{top:300px;}
#menuTxt_coktip_data{top:380px;}
#menu_teaching_data{top:330px;
#menuTxt_teaching_data{top:140px;}
#menu_print{}
#menuTxt_print{}
#menu_wallpaper{}
#menuTxt_wallpaper{}
#menu_myComputer{}
#menuTxt_myComputer{}
#menu_switch{}
#menuTxt_switch{}

#menu_exit{top:930px;}
#menuTxt_exit{top:1010px;}*/



#txtPagingInfo{
	position: relative;
	top: 0; left: -5px;
	background-color: rgba(0,0,0,0);
	width: 90px; height: 40px;
	line-height: 54px;
	text-align: center;
	font-size: 18px;
	color: white;
}
.paging{
	position: relative;
	margin:0 5px;
	width: 31px; height: 58.5px;
	background-size: contain;	
}
.paging:active{transform: translateY(2px);}
#page_prev{
	top: -5px; left: 3px;
	background-image: url(../img/03_class/icon_page_back_on.png);
}
#page_next{
	top: -5px; left: -12px;
	background-image: url(../img/03_class/icon_page_front_on.png);
}
button.paging:disabled{filter: grayscale(100%);}

/* video/audio player */
#myVideo{
	display:none;
	z-index:3;
	position:absolute;
	top:0;left:110px;
	width:1700px;height:1080px;
	border:0px solid red;
	background-color:#000;
}
#myVideo1{position: absolute; top:0;}
#myAudio{
	z-index:20;
	position:absolute;
	bottom:0px;right:110px;
	width:440px;
	background-color:#f7f7f7;
	display:none;
}

#close_audio{
  z-index:21;
  position:absolute;
  bottom:0px;right:110px;
  display: none;
  margin-left:2px;width:70px;30px;height:30px;
  border:0px solid red;
  background-color: #f7f7f7;
}
#close_audio_btn{
  position:absolute;
  bottom:10px;right:20px;
  margin-left:2px;width:48px;30px;height:30px;
  border:0px solid blue;
  background-image:url('../img/close.png');  
  background-position: center center;
  background-repeat: no-repeat;
  background-color: #f7f7f7;
}

#audioPlayPause{
  z-index:21;
  display: none;
  position:absolute;
  bottom:10px; right:508px;
  width:30px;height:30px;
  border:0px solid red;
  background-size:contain;
  background-image:url('../img/play.png');  
  background-image:url('../img/stop.png');  
  background-color: #f7f7f7;
}
#audioPlayPause.play{background-image:url('../img/play.png');}
#audioPlayPause.stop{background-image:url('../img/stop.png');}

#audioMute{
  z-index:21;position:absolute;bottom:10px;0px;right:190px;520px;display: none;
  width:40px;height:30px;border:0px solid red;background-size:contain;
  background-color: transparent;
}
#videoPlayPause{
  z-index:21;position:absolute;bottom:0px;left:110px;display: none;
  width:30px;height:30px;border:0px solid red;background-size:contain;
  background-image:url('img/teacher/screen2/icon-pause-32.png'); 
  background-image:url('img/teacher/screen4/stop.png');   
}

/*GoldenBell*/
#screenGoldenBell{
  background-color: transparent;
  pointer-events: none;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: 80px;
  background-image: url(../img/goldenbell_mode.png);
}

#screenGoldenBell.intro::before{
	content:'';
	position: absolute;
	top: 0; left: 0; width: 100%; height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../img/goldenbell_intro.png);
  animation: goldenbell_ani 3s ease-in forwards;
  animation-iteration-count: 1;
}
@keyframes goldenbell_ani{
    0% { opacity:0;}
    100% { opacity: 1;}
}

#screenGoldenBell.outro::before{
	content:'';
	position: absolute;
	top: 0; left: 0; width: 100%; height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  sbackground-size: cover;
  background-image: url(../img/goldenbell_outro.png);
  animation: goldenbell_outro_ani 3s ease-in forwards;
  animation-iteration-count: 1;
}
@keyframes goldenbell_outro_ani{
    0% { opacity:0.3;}
    100% { opacity: 1;}
}