/*
 *  child5.css 
 *  divGroupCanvas/groupCanvas (GroupActivity,그룹활동용 캔버스 추가) 
 *  groupActivityFrame
 *  captureCamera
 *
 *  - 2024/02/07 btn_camera, brush-size-slider
 *  - 2025/03/26 maskCanvas 추가
 *  - 2025/04/03 groupMaskCanvas 추가
 *  - 2025/04/30 undo/redo
 */
/* 공통 */
*{touch-action: none;}
body{
  padding: 0; margin: 0;
  overflow: hidden;
  background-color: #000;
  font-family: 'Jua', sans-serif;
  pointer-events: none;
}

#captureCamera{
  background-color:rgba(0,0,0,0.5);
  background-image:url('../img/child/screen2/btn_camera.png');
}

#close_captureCamera{
  position: absolute;
  top:40px; right:50px;
  width: 120px; height: 120px;
  background-image:url('../img/child/screen2/btn_close.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-color: transparent;
  outline: none;
  border: none;
}

#btnCamera{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50% ,-50%);
  width: 600px; height: 400px;
  background-image:url('../img/child/screen2/btn_camera_pop.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: transparent;
  outline: none;
  border: none;
}

#screenGoldenBell{
  pointer-events: none;
  background-color: transparent;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: 60px;
  background-image: url(../img/goldenbell_mode.png);
  z-index: 999;/*screenFocus=999*/
}

#screenGoldenBell.answer_o::before{
  content:'';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  sbackground-size: contain;
  background-image: url(../img/goldenbell_answer_o.png);
}
#screenGoldenBell.answer_x::before{
  content:'';
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  sbackground-size: contain;
  background-image: url(../img/goldenbell_answer_x.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;}
}


/*mobie touch gesture ux*/
body, .screen, div{touch-action:  none;}

.screen{pointer-events: auto;}

body {
  overscroll-behavior: contain;
}

/*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;
}

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

/*html {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}*/

div.screen{
  border: 0px solid blue;
  position: absolute;
  top: 0; left: 0;
  width: 1280px; height: 800px;
  background-color: rgba(255,255,255,1);

  position:fixed;absolute; /* screen bouncing */
  top:50%; left: 50%;
  transform: translate(-50%, -50%);
  background-position: center center;
  background-repeat: no-repeat; 
  background-size: 1280px;
}

/* disable text selection */
div{
  -webkit-user-select: none;  
  -moz-user-select: none;    
  -ms-user-select: none;      
  user-select: none;
}

/* 화면 리사징시에 안보이다 나타나는 테두리 제거 */
button:focus,
div:focus{outline: none;}
button{border:none;}

.screen{display: none;}
#screenLogo{background-image: url(../img/screen_logo.png);}
/*
#screenClassList{background-image: url(../img/child/screen1/loading_background_1.png);}
*/
#screenClassList{
  background-image: url(../img/child/screen0/bgSelectClass.png);
  background-image: url(../img/skin_01_class/age_bg.png);
}
#screenChildList{
  background-image: url(../img/child/screen1/background2_080319.png);
}

/*계절별 스킨*/
#screenClassList.winter{background-image: url(../img/skin_child/bg_class_winter.png);}
#screenClassList.spring{background-image: url(../img/skin_child/bg_class_spring.png);}
#screenClassList.summer{background-image: url(../img/skin_child/bg_class_summer.png);}
#screenClassList.fall{background-image: url(../img/skin_child/bg_class_fall.png);}

#screenChildList.winter{background-image: url(../img/skin_child/bg_child_winter.png);}
#screenChildList.spring{background-image: url(../img/skin_child/bg_child_spring.png);}
#screenChildList.summer{background-image: url(../img/skin_child/bg_child_summer.png);}
#screenChildList.fall{background-image: url(../img/skin_child/bg_child_fall.png);}

/*월별스킨*/
#screenClassList.skin_mm_01{background-image: url(../img/skin_child/bg_class_01m.png);}
#screenClassList.skin_mm_02{background-image: url(../img/skin_child/bg_class_02m.png);}
#screenClassList.skin_mm_03{background-image: url(../img/skin_child/bg_class_03m.png);}
#screenClassList.skin_mm_04{background-image: url(../img/skin_child/bg_class_04m.png);}
#screenClassList.skin_mm_05{background-image: url(../img/skin_child/bg_class_05m.png);}
#screenClassList.skin_mm_06{background-image: url(../img/skin_child/bg_class_06m.png);}
#screenClassList.skin_mm_07{background-image: url(../img/skin_child/bg_class_07m.png);}
#screenClassList.skin_mm_08{background-image: url(../img/skin_child/bg_class_08m.png);}
#screenClassList.skin_mm_09{background-image: url(../img/skin_child/bg_class_09m.png);}
#screenClassList.skin_mm_10{background-image: url(../img/skin_child/bg_class_10m.png);}
#screenClassList.skin_mm_11{background-image: url(../img/skin_child/bg_class_11m.png);}
#screenClassList.skin_mm_12{background-image: url(../img/skin_child/bg_class_12m.png);}

#screenChildList.skin_mm_01{background-image: url(../img/skin_child/bg_child_01m.png);}
#screenChildList.skin_mm_02{background-image: url(../img/skin_child/bg_child_02m.png);}
#screenChildList.skin_mm_03{background-image: url(../img/skin_child/bg_child_03m.png);}
#screenChildList.skin_mm_04{background-image: url(../img/skin_child/bg_child_04m.png);}
#screenChildList.skin_mm_05{background-image: url(../img/skin_child/bg_child_05m.png);}
#screenChildList.skin_mm_06{background-image: url(../img/skin_child/bg_child_06m.png);}
#screenChildList.skin_mm_07{background-image: url(../img/skin_child/bg_child_07m.png);}
#screenChildList.skin_mm_08{background-image: url(../img/skin_child/bg_child_08m.png);}
#screenChildList.skin_mm_09{background-image: url(../img/skin_child/bg_child_09m.png);}
#screenChildList.skin_mm_10{background-image: url(../img/skin_child/bg_child_10m.png);}
#screenChildList.skin_mm_11{background-image: url(../img/skin_child/bg_child_11m.png);}
#screenChildList.skin_mm_12{background-image: url(../img/skin_child/bg_child_12m.png);}

#screenClass{}

/*필기인식 테스트용*/
#screenClass.goodJob::before{
  content:attr(data-before);/*https://stackoverflow.com/questions/10495243/how-change-content-value-of-pseudo-before-element-by-javascript*/
  text-align: center;
  position:absolute;
  top:0; left:0; width:100%; height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-color: rgba(0,0,0,0);
  z-index:1;
  background-image:url(../img/08_stamp/encourage_12.png);
  background-image:url(../img/08_stamp/good_05.png);
  pointer-events: none;
}

/* screenLogin */
#screenLogin{background-image: url(../img/screen_child.png);}

/* screenBlanket */
#screenBlanket{
  display: none;
  pointer-events: none;
  background-color: rgba(0,64,32,0.3);
}
#screenBlanket.locked{pointer-events: auto;}
#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.5);
}
#screenFocus{
  background-color: rgba(0,0,0,0.5);
  sbackground-image: url(../img/screen_focus.png);  
  background-image: url(../img/focusmode_2024.png); 
  background-size: 371px;
  z-index: 999; 
}
#screenFullScreen{
  filter: opacity(0.1);
  background-color: rgba(0,0,0,0.1);
  background-image: url(https://cdn2.iconfinder.com/data/icons/css-vol-2/24/maximize-alt-256.png);
  background-size: 256px;
  background-repeat: no-repeat;
  background-position: center; 
  z-index: 999; 
}
#screenCanvasMenu{
  background-color: rgba(0,0,0,0.05);
  z-index: 999; 
}
#screenCanvas{
  background-color: rgba(0,0,0,0.2);
  background-position: bottom left;
  background-repeat: no-repeat;
  background-size: 15%;
  background-image: url(../img/annotating.png);    
  animation: bg_ani 2s infinite;
}
@keyframes bg_ani {
    0%,100% {opacity: 0.1;}
    50% {opacity: 1;}
}

/* 반목록 화면(screenClassList) */
#schoolCode,
#schoolName{
  position: absolute;
  top: 100px; width: 100%;
  top: 60px;
  width: 270px; height: 58px;
  border: 0px solid red;
  text-align: center;
  font-size: 40px;
  line-height: 200px;

  top: 17px; left: 240px;490px;
  width: 800px;300px; height: 185px;
  background-color: rgba(0,0,0,0);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 300px 185px;
  background-image: url(../img/skin_01_class/nameplate_icon.png); 
  pointer-events: none;   
}
#schoolCode{
  display: none;
}
#schoolName{pointer-events: auto;}
#inputSchoolCode{
  pointer-events: auto;
  border:none; outline: none;
  width: 270px; height: 60px;
  font-size: 25px;
  text-align: center;
  background-color: rgba(255,0,0,0.1);
  border-radius: 30px;
}
/*
  //http://jsfiddle.net/mfirdaus/rU8se/
  //http://jsfiddle.net/L6d0p4jo/
*/
#classList {
  position: absolute;
  top:50%; left: 50%;
  stransform: translate(-50%, -50%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 1000px;
border:0px solid red;
top: 272px;200px; left: 125px;0px;
width: 1280px; height: 600px; 
overflow-y: scroll;

top: 272px; height: 272px;80px;
width: 1030px;
overflow: hidden;
background-color: rgba(0,0,0,0);

} 
.classRoom {
  cursor: pointer; /* iOS */
  margin: 20px 15px;
  width:  135px;
  height: 165px; 
  background-color: rgba(0,0,0,0);
  
  border:0px solid red;
  margin: 0px 25px;
  width: 277px;279px;
  height: 271px;273px;
  background: transparent url('../img/child/screen0/box01.png') 0% 0% no-repeat padding-box;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 277px 271px;
  background-image: url(../img/skin_01_class/box01.png); 
}
.classRoom:active{transform: translateY(4px);}

.teacherPhoto{
  position: relative;
  top: 0px; left: 0px;
  width: 135px; height: 145px;
  border: 0px solid red;
  border-radius: 10px;
  background-position: center center;
  background-repeat: no-repeat; 
  background-image: url('../img/child/screen1/frame_on.png'), 
    url(http://www.esamo.co.kr/files/attach/images/291136/564/314/ee52fb1d97f40370dd1d7fc9a61c7482.jpg);
  background-size: 135px 145px, 115px 125px;
  background-color: rgba(0,0,0,0);

border:0px solid red;
border-radius: 0px;
top: 19px;
left: 21px;
width: 228px;
height: 182px;
background: transparent url('../img/child/screen0/box02_1.png') 0% 0% no-repeat padding-box;
background-size: 228px 182px;
  }

.className{
  position: relative;
  top: 33px; 
  border:0px solid red;
  width: 100%;135px; height: 20px;
  text-align: center;
  font-size: 22px;
}
.btnClassList{
  position: absolute;
  top: 50%;
  stransform: translateY( -50%);
  width: 73px; height: 73px;
  border:none; outline:none;
  background:transparent;
  background-position: center;
  background-repeat:no-repeat;
}
#btnClassListPrev{ left:20px; background-image: none;url(../img/child/screen1/arrow_left_off.png);}
#btnClassListNext{ right:20px; background-image: none;url(../img/child/screen1/arrow_right_off.png);}
#btnClassListPrev.on{background-image: url(../img/child/screen1/arrow_left_off.png);}
#btnClassListNext.on{background-image: url(../img/child/screen1/arrow_right_off.png);}
#btnClassListPrev:active,
#btnClassListNext:active{transform: translateY(0px);}
#btnClassListPrev.on:active,
#btnClassListNext.on:active{transform: translateY(4px);}

#btnGoHome{
  position: absolute;
  top: 51px; left: 1158px;
  width: 77px; height: 77px;
  background: transparent url('../img/child/screen0/btnBack.png') 0% 0% no-repeat padding-box;
  background-image: url(../img/skin_01_class/Backward_icon_on.png);
}
#btnRefresh{
  position: absolute;
  top: 50px; left: 1058px;
  width:73px;height:73px;
  border:none; outline:none;
  background:transparent;
  background-position: center;
  background-repeat:no-repeat;
  background-image: url(../img/child/screen1/exit_off.png);
  
  top: 51px;
  width: 77px; height: 77px;
  background: transparent url('../img/child/screen0/btnRefresh.png') 0% 0% no-repeat padding-box;
  background-image: url(../img/skin_01_class/Refresh_icon_on.png);
}
#btnHelp{
  display: none;
  position: absolute;
  top: 52px;left: 59px;
  width: 77px;height: 78px;
  background: transparent url('../img/child/screen0/btnHelp.png') 0% 0% no-repeat padding-box;
}


/* 원아목록 화면(screenClassList) */ 
#className{
  position: absolute;
  top: 100px; width: 100%;
  text-align: center;
  font-size: 48px;

  font-size: 40px;
  line-height: 200px;

  top: 17px; left: 240px;490px;
  width: 800px;300px; height: 185px;
  background-color: rgba(0,0,0,0);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 300px 185px;
  background-image: url(../img/skin_01_class/nameplate_icon.png); 
  pointer-events: none;   
}

.btnChildList,
.btnClassList{
  position: absolute;
  top: 358px;50%;
  stransform: translateY( -50%);
  width: 61px;73px; height: 100px;73px;
  border:none; outline:none;
  background:transparent;
  background-position: center;
  background-repeat:no-repeat;
}
#btnClassListPrev,
#btnChildListPrev{ left:29px; background-image: none;url(../img/skin_01_class/icon_page_back_on.png);none;url(../img/child/screen1/arrow_left_off.png);}
#btnClassListNext,
#btnChildListNext{ right:29px; background-image: none;url(../img/skin_01_class/icon_page_front_on.png);none;url(../img/child/screen1/arrow_right_off.png);}
#btnChildListPrev.on{background-image: url(../img/child/screen1/arrow_left_off.png);}
#btnChildListNext.on{background-image: url(../img/child/screen1/arrow_right_off.png);}
#btnClassListPrev.on,
#btnChildListPrev.on{background-image: url(../img/skin_01_class/icon_page_back_on.png);}
#btnClassListNext.on,
#btnChildListNext.on{background-image: url(../img/skin_01_class/icon_page_front_on.png);}

#btnClassListPrev:active,
#btnClassListNext:active,
#btnChildListPrev:active,
#btnChildListNext:active{transform: translateY(0px);}
#btnClassListPrev:active,
#btnClassListNext:active,
#btnChildListPrev.on:active,
#btnChildListNext.on:active{transform: translateY(4px);}

#btnGoBack{
  position: absolute;
  top: 51px; right: 45px;
  width:77px;height:77px;
  border:none; outline:none;
  background:transparent;
  background-position: center;
  background-repeat:no-repeat;
  background-image: url(../img/child/screen1/exit_off.png);
  background-image: url(../img/skin_01_child/exit_icon_on.png);
}

#childList {
  position: absolute;
  top:50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-wrap: wrap;

  width: 1000px;
} 
.child {
  cursor: pointer; /*iOS*/
  margin: 10px 15px;
  width:  135px;
  height: 165px; 
  background-color: rgba(0,0,0,0);
}
.child:active{transform: translateY(4px);}

.childPhoto{
  position: relative;
  top: 0px; left: 0px;
  width: 135px; height: 145px;
  border: 0px solid red;
  border-radius: 10px;
  background-position: center center;
  background-repeat: no-repeat; 
  background-image: url('../img/child/screen1/frame_border_20160411.png'), 
    url(http://www.esamo.co.kr/files/attach/images/291136/564/314/ee52fb1d97f40370dd1d7fc9a61c7482.jpg);
  background-image: url('../img/skin_01_child/Frame.png'), 
    url('../img/skin_01_child/photo.png');
  background-size: 135px 145px, 115px 125px;
  background-color: rgba(0,0,0,0);
}
.childName{
  position: relative;
  top: 0px; 
  width: 135px; height: 20px;
  text-align: center;
  font-size: 20px;
}


/* 수업화면(screenClass) */
#msgBox{
  display: none;
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0,0,0,0.3);
}
#msgBox>div{
  position: absolute;
  top:50%; left: 50%;
  transform: translate(-50%, -50%);
  background-color: rgba(255,255,255,0.8);
  border:1px solid rgba(0,0,0,0.2);
  box-shadow: 3px 3px 3px rgba(0,0,0,0.4);
  font-size: 14px;
  line-height: 30px;
  border-radius: 15px;
  padding: 5px 10px;
}
canvas,#divGroupCanvas{
  position:absolute;
  left: 75px; top: 28.5px;
  width: 1130px; height: 743px;
  background-color: transparent;
}
#groupActivityFrame{
  display: none;
  pointer-events: none;
  position:absolute;
  left: 75px; top: 28.5px;
  width: 1130px; height: 743px;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
#groupActivityFrameMask{
  display: none;
  pointer-events: none;
  position:absolute;
  left: 75px; top: 28.5px;
  width: 1130px; height: 743px;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
#btnGroupActivity{
  z-index: 1;
  pointer-events: auto;
  position: absolute;
  top: 20px; right: 20px;
  width: 114px; height: 103px;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url(../img/child/btnGroupActivity.png);
  pointer-events: auto;

  position: absolute;
  top: 15px; right: 10px;
  width: 132px; height: 76px;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url(../img/child/btn_done_off.png);  
  pointer-events: none;
} 

#btnGroupActivity.ready{background-image: url(../img/child/btn_done.png);
    pointer-events: auto;}
#btnGroupActivity.done{background-image: url(../img/child/btn_done_push.png);
  pointer-events: none;}

/*{{'다했어요'버튼*/
#btnDone{
  position: absolute;
  top: 45px; right: 80px;
  width: 132px; height: 76px;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url(../img/child/btn_done_off.png);
  pointer-events: none;
} 
#btnDone.ready{background-image: url(../img/child/btn_done.png);
    pointer-events: auto;}
#btnDone.done{background-image: url(../img/child/btn_done_push.png);
  pointer-events: none;}
#btnDone::before{
  content: '';
  position: absolute;
  width: 100%; height: 100%;
  font-size: 22px;
  line-height: 210px;
  text-align: center;
  color: white;
}
#btnDone:active{background-image: url(../img/child/btn_done_push.png);}
/*}}*/

#backCanvas{}
#myCanvas{
  border-top: 1px solid #dedede;
  border-bottom: 1px solid #dedede;
}
#padviewCanvas{pointer-events: none;}
#teacherCanvas{display: none;pointer-events: none;}
#maskCanvas{pointer-events: none;}

/*{{캔버스  overlay masking filter 테스트!!!*/
#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);}
}
/*}}*/

#divGroupCanvas{
  background-color:#666;
  display: none;
}
#divGroupCanvas.done{pointer-events: none;}
#divGroupCanvas.done > canvas{opacity: 0.1;}

#overviewGroupCanvas{
  position: absolute;
  top: 50%; left: 30px;
  transform: translateY(-50%);
  width: 300px; height: 200px;
  background-color: white;  
  background-size: 300px 200px;cover;
}
#overviewGroupCanvas div,
#guideFrame{
  position: absolute;
  top: 33%; left: 33%;
  width: 33%; height: 33%;

  top: 0; left: 0;
  width: 50px; height: 33.33px;/*6x6*/
  width: 50px; height: 40px;/*6x5*/
  width: 60px; height: 40px;/*5x5*/
  width: 60px; height: 50px;/*5x4*/
  width: 75px; height: 50px;/*4x4*/
  width: 75px; height: 66.6px;/*4x3*/
  width: 100px; height: 66.66px;/*3x3*/
  width: 150px; height: 100px;/*2x2*/

  border:5px dotted red;
  box-sizing: border-box;
}

#overviewGroupCanvas.childCanvas2x2 div{width: 150px; height: 100px;}
#overviewGroupCanvas.childCanvas3x3 div{width: 100px; height: 66.66px;}
#overviewGroupCanvas.childCanvas4x3 div{width: 75px; height: 66.6px;}
#overviewGroupCanvas.childCanvas4x4 div{width: 75px; height: 50px;}
#overviewGroupCanvas.childCanvas5x4 div{width: 60px; height: 50px;}
#overviewGroupCanvas.childCanvas5x5 div{width: 60px; height: 40px;}
#overviewGroupCanvas.childCanvas6x5 div{width: 50px; height: 40px;}
#overviewGroupCanvas.childCanvas6x6 div{width: 50px; height: 33.33px;}


#groupCanvas,
#groupMaskCanvas,
#groupBackCanvas,
#groupSendCanvas{
  top: 50%; left: 60%;
  transform: translate(-50%, -50%);
  border:10px solid black;
  width: 600px; height: 500px;
  background-color: #fff;
  background-repeat: no-repeat;
}
#groupMaskCanvas{pointer-events: none;background-color: transparent;}
#groupCanvas.childCanvas2x2{background-size: 1300px 826px;}
#groupCanvas.childCanvas3x3{background-size: 1800px 1146px;600px 382px;}
#groupCanvas.childCanvas4x3{background-size: 2400px 1524px;600px 508px;}
#groupCanvas.childCanvas4x4{background-size: 2400px 1272px; 600px 381px;}
#groupCanvas.childCanvas5x4{background-size: 3000px 1904px; 600px 476px;}
#groupCanvas.childCanvas5x5{background-size: 3000px 2700px; 600px 540px;}
#groupCanvas.childCanvas6x5{background-size: 3600px 2285px; 600px 457px;}
#groupCanvas.childCanvas6x6{background-size: 3600px 2292px; 600px 382px;}

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

#webview{
  border: 0px solid green;
  position: absolute;
  display:inline-flex;
  top:0; left: 0; 
  width: 100%; height: 100%;
  pointer-events: auto;
  z-index: 1;
}
#webview.canvas{
  border: 1px solid green;
  left: 75px; top: 28.5px;
  width: 1130px; height: 743px;
  pointer-events: none;
}

div#version{
  z-index: 2;
  position: absolute; 
  bottom: 0; left: 0;
  width: 1280px; height: 30px;
  padding-top: 30px;
  background-color: rgba(0,0,0,0);
  font-size: 15px;
  font-weight: bold;
  color: rgba(255,255,255,0.8);
  text-shadow: 2px 2px 2px rgba(0,0,0,0.3);
  font-family: Helvetica, sans-serif;
  text-align: center;
  background-color: rgba(0,0,0,0);
}

/* 좌우 메뉴바 */
.menubar{
  display: flex;
    flex-direction: column;
    flex-wrap: wrap;
  justify-content:center;

  position: absolute;
  top:0;
  width: 75px; height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-color: rgba(0,0,0,0);
  pointer-events: none;
}
.menubar > div, .menubar > button {pointer-events: auto;}
#menubarLeft{
  left: 0;
  background-image: url(../img/child/screen2/bg_bar_left.png);
  border:0px solid red;
}
#menubarRight{
  right: 0;
  background-image: url(../img/child/screen2/bg_bar_right.png);
}

#photo_frame{
  align-items: center;
  margin-left: 3px; margin-top: 0px;
  width: 67px; height: 67px;
  background-image: url(../img/child/screen2/photo_frame_off.png);
  background-size:67px 67px;
  background-color: transparent; 
  background-repeat: no-repeat;
}
#photo_frame.disconnected{
  animation: ani_photo_frame 1s infinite;
}
@keyframes ani_photo_frame {
  0%,100%   {background-image: url(../img/child/screen2/photo_frame_off.png);}
  50%  {background-image: url(../img/child/screen2/photo_frame_on.png);}
}

#photo{
  margin-top: 10px; margin-left: 11px;
  width: 45px; height: 47px;
  border-radius: 5px;
}
#child_name{margin-top:5px;text-align:center;}
#text_page{
  height:16px;
  font:italic normal 14px/14px Helvetica;
  text-align:center;
  color:#799c64; 
  white-space:nowrap;
}
    
button.tool {
  margin-left:7px;
  margin-top:6px;
  width:59px;height:59px;

  border: 0px solid red;
  outline: none;
  background-color: rgba(0,0,0,0.0);
  background-position: center;
  background-repeat: no-repeat;
} 

button.stamp{
width: 72px; height: 72px;
margin: 2px 0;
border: 0px solid red;
outline: none;
background-position: center center;
background-repeat: no-repeat;
background-color: rgba(0,0,0,0.0);
background-size: 70%;
filter: grayscale(100%);
}
button:active{transform: translateY(4px);}

#pagination{
  background-color: rgba(0,0,0,0);
  text-align: center;
  align-items: center;
}
#pagination > button{
  border: none;outline: none;
  width: 27px; height: 42px;
  sbackground-position: center center;
  background-repeat: no-repeat;     
  background-color: rgba(0,0,0,0);
}

#btn_prev{background-position: left center; background-image: url(../img/child/screen2/page_prev.png);}
#btn_next{background-position: right center; background-image: url(../img/child/screen2/page_next.png);}

#btn_prev.groupActivity,
#btn_next.groupActivity{
  pointer-events: none;
  filter: sepia(100%);
}

#btn_stamp{
  margin-left:7px;margin-top:10px;75px;width:59px;height:59px;
  background-image:url('img/child/screen2/icon_select_stamp2_off.png');
}
#btn_stamp.groupActivity,
#btn_stamp:disabled{pointer-events: none;
  background-image:url('../img/child/screen2/icon_select_stamp2_locked.png') !important;}
#btn_camera{
  background-image:url('../img/child/screen2/icon_select_camera2_3_on.png');
  background-size: contain;
  filter: grayscale(0%);
}
#btn_camera:disabled{pointer-events: none;
  filter: grayscale(100%);
}

#btn_pencil{
  background-image:url('img/child/screen2/아이콘_연필_off.png');}
#btn_markerpen{
  background-image:url('img/child/screen2/아이콘_형광펜_off.png');}
#btn_brush{
  background-image:url('img/child/screen2/아이콘_붓_off.png');}
#btn_spray{
  background-image:url('img/child/screen2/icon_select_spray_off.png');}
#btn_crayon{
  background-image:url('img/child/screen2/아이콘_크레파스_off.png');}
#btn_eraser{
  background-image:url('img/child/screen2/아이콘_지우개_off.png');}

#btn_size0{
  margin-top:30px;margin-left:10px;
  width:54px;height:25px;
  background-size: 8px;
  background-position: center 12px;
  background-image: url(../img/child/screen2/icon_brushsize_01_off.png);
}
#btn_size1{
  smargin-top:30px;
  margin-left:10px;
  width:54px;height:25px;
  background-image: url(../img/child/screen2/icon_brushsize_01_off.png);
}
#btn_size2{
  margin-left:10px;width:54px;
  height:35px;
  background-image: url(../img/child/screen2/icon_brushsize_02_off.png);
}
#btn_size3{
  margin-left:10px;
  width:54px;height:51px;
  background-image: url(../img/child/screen2/icon_brushsize_03_off.png);
}
#btn_size4{
  margin-left:10px;
  width:54px;height:54px;
  background-image: url(../img/child/screen2/icon_brushsize_04_off.png);
}
#btn_size5{
  display:none;
  margin-left:10px;
  width:54px;height:54px;
  background-image: url(../img/child/screen2/icon_brushsize_05_off.png);
}

#brush-size-slider{
  width: 59px; height: 160px; margin: 10px 0 10px 10px;
  z-index: 999; 
}

/*
 * https://www.w3schools.com/howto/howto_js_rangeslider.asp
 * https://stackoverflow.com/questions/15935837/how-to-display-a-range-input-slider-vertically
 */
input[type=range][orient=vertical] {
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
  width: 160px; 
  height: 37.5px;
  smargin: 0;
  background-color: transparent;
  background-image: url('../img/07_tool/tool_bar.png');
  background-size: 160px 37.5px;
  background-position: 5px center;
  background-repeat: no-repeat;
  outline: none;

  /*https://stackoverflow.com/questions/15935837/how-to-display-a-range-input-slider-vertically*/
  writing-mode: vertical-lr;
  direction: ltr;rtl;
  /*!*/appearance: slider-vertical;
  /*https://stackoverflow.com/questions/43272190/input-type-range-not-working-on-mobile-devices-when-rotated*/
  /*!*/-webkit-appearance: slider-vertical;
  width: 16px;
  vertical-align: bottom;

  width: 37.5px; height: 160px;
  smargin: 10px 0 0 18px;
  border: 0px solid red;
  background-image: url('../img/07_tool/tool_bar2.png');
  background-size: 37.5px 160px;
  background-position: center center;
  background-color: rgba(0, 0, 0, 0);
  stouch-action: auto;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 56px;
  height: 56px;
  background: url('../img/07_tool/tool_brush_max.png') center center no-repeat;
  background-size: 44px 44px;
  pointer-events: auto;
  stouch-action: auto;
  z-index: 999;
}

#panel_stamp{ top: 16px;}
.panel_brushcolor{
  position:absolute;
  margin-left:0px;
  margin-top:15px;
  width:75px;
  overflow:hidden;
}
.btn_brush_color{
  border: none;outline: none;
  width:55px;height:36px;
  margin-top:10px;
  margin-left:20px;
  background-repeat: no-repeat;
  background-color: rgba(0,0,0,0);
}

#statmp_01{background-image: url(../img/child/stamp/category/weather_off.png);}
#statmp_02{background-image: url(../img/child/stamp/category/plant_off.png);}
#statmp_03{background-image: url(../img/child/stamp/category/animal_off.png);}
#statmp_04{background-image: url(../img/child/stamp/category/sky_off.png);}
#statmp_05{background-image: url(../img/child/stamp/category/shape_off.png);}
#statmp_06{background-image: url(../img/child/stamp/category/pattern_off.png);}
#statmp_07{background-image: url(../img/child/stamp/category/emotion_off.png);}
#statmp_08{background-image: url(../img/child/stamp/category/craft_off.png);} 
#statmp_09{background-image: url(../img/child/stamp/category/character_off.png);} 
#statmp_01.on{background-image: url(../img/child/stamp/category/weather_on.png);}
#statmp_02.on{background-image: url(../img/child/stamp/category/plant_on.png);}
#statmp_03.on{background-image: url(../img/child/stamp/category/animal_on.png);}
#statmp_04.on{background-image: url(../img/child/stamp/category/sky_on.png);}
#statmp_05.on{background-image: url(../img/child/stamp/category/shape_on.png);}
#statmp_06.on{background-image: url(../img/child/stamp/category/pattern_on.png);}
#statmp_07.on{background-image: url(../img/child/stamp/category/emotion_on.png);}
#statmp_08.on{background-image: url(../img/child/stamp/category/craft_on.png);} 
#statmp_09.on{background-image: url(../img/child/stamp/category/character_on.png);}

#statmp_01{background-image: url(../img/child/stamp/brush_point/brush2_big_01.png);}
#statmp_02{background-image: url(../img/child/stamp/brush_point/brush2_big_11.png);}
#statmp_03{background-image: url(../img/child/stamp/brush_point/brush2_big_21.png);}
#statmp_04{background-image: url(../img/child/stamp/brush_point/brush2_big_31.png);}
#statmp_05{background-image: url(../img/child/stamp/brush_point/brush2_big_41.png);}
#statmp_06{background-image: url(../img/child/stamp/brush_point/brush2_big_51.png);}
#statmp_07{background-image: url(../img/child/stamp/brush_point/brush2_big_61.png);}
#statmp_08{background-image: url(../img/child/stamp/brush_point/brush2_big_71.png);} 
#statmp_09{background-image: url(../img/child/stamp/brush_point/brush2_big_81.png);} 
#statmp_01.on{background-image: url(../img/child/stamp/brush_point/brush2_big_01.png);}
#statmp_02.on{background-image: url(../img/child/stamp/brush_point/brush2_big_11.png)}
#statmp_03.on{background-image: url(../img/child/stamp/brush_point/brush2_big_21.png)}
#statmp_04.on{background-image: url(../img/child/stamp/brush_point/brush2_big_31.png)}
#statmp_05.on{background-image: url(../img/child/stamp/brush_point/brush2_big_41.png)}
#statmp_06.on{background-image: url(../img/child/stamp/brush_point/brush2_big_51.png)}
#statmp_07.on{background-image: url(../img/child/stamp/brush_point/brush2_big_61.png)}
#statmp_08.on{background-image: url(../img/child/stamp/brush_point/brush2_big_71.png)} 
#statmp_09.on{background-image: url(../img/child/stamp/brush_point/brush2_big_81.png)} 

/*
 * https://www.w3schools.com/howto/howto_js_rangeslider.asp
 */
/*
#stamp-size-slider{
  position: absolute;
  sleft:1330px;
  right: 50px;top:50px;
}

input[type=range] {
  -webkit-appearance: none;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
  width: 160px; 
  height: 37.5px;
  margin: 0;
  border: none;
  background-color: transparent;
  background-image: url('../img/07_tool/tool_bar.png');
  background-size: 160px 37.5px;
  background-position: 5px center;
  background-repeat: no-repeat;
  outline: none;
  float:left;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 56px;
  height: 56px;
  background: url('../img/07_tool/tool_brush_max.png') center center no-repeat;
  background-size: 44px 44px;
}
*/

/*스탬프펜*/
#popup_stamp_panel{
  display: none;
  position: absolute;
  top: 120px;100px; left: 943px;
  top: 70px; 
  width: 250px; height: 443px;
  width: 250px; height: 690px;
  background-image: url(../img/child/stamp/box2.png);
  sbackground-color: #cca;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 250px 690px;
  z-index: 5;
}
.stamp_size_selector{
  border: 0px solid #dedede;
  width: 74px; height: 74px;
  position: absolute;
  background-image: url(../img/child/stamp/box_s.png);
  background-repeat: no-repeat;
  background-position: center center;
  sbackground-size: cover;
  sbackground-color: gold;
  border: none;outline: none;
  background-color: rgba(0,0,0,0);
}
#stamp_size_large{
  top:19px; left: 24px;14px;
  background-image: url(../img/child/stamp/stamp2_size_b_off.png);
}
#stamp_size_medium{
  top:19px; left: 108px;88px; width: 64px;
  background-image: url(../img/child/stamp/stamp2_size_n_off.png);
}
#stamp_size_small{
  top:19px; left: 175px;162px; width: 44px;
  background-image: url(../img/child/stamp/stamp2_size_s_off.png);
}
#stamp_size_small.selected{background-image: url(../img/child/stamp/stamp2_size_s_on.png);}
#stamp_size_medium.selected{background-image: url(../img/child/stamp/stamp2_size_n_on.png);}
#stamp_size_large.selected{background-image: url(../img/child/stamp/stamp2_size_b_on.png);}

#stamp_btn_panel{
  position: absolute;
  top: 100px;
  sbackground-color: rgba(0,0,0,0);
  padding-left: 10px;
}
.stamp_btn{
  border: none;outline: none;
  width: 82px; height: 82px;
  margin: 15px;
  sborder-radius: 50%;
  sbackground-color: orange;
  background-image: url(../img/child/stamp/brush_small.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 72px 72px;
  background-color: rgba(0,0,0,0);
}
.stamp_btn.stampSize_s{background-image: url(../img/child/stamp/brush_small.png);}
.stamp_btn.stampSize_n{background-image: url(../img/child/stamp/brush_normal.png);}
.stamp_btn.stampSize_b{background-image: url(../img/child/stamp/brush_big.png);}
#stamp_status{
  display: none;
  position: absolute;
  top: 36px; left: 1102px;
  pointer-events: none;
  width: 82px; height: 82px;
  background-image: url(../img/child/stamp/brush_small.png);
  background-repeat: no-repeat;
  background-position: center center; 
  background-size: cover;
  z-index: 5;     
}
#stamp_status.small{ background-size:82px; }
#stamp_status.normal{ background-size:110px; }
#stamp_status.big{ background-size:145px; } 

#undo{
  position: absolute;
  top: 0; left: 0;
  width: 35px;height: 35px;
  background-color: rgba(0, 0, 0, 0);
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url(https://cdn4.iconfinder.com/data/icons/controls-add-on-colored/48/JD-32-256.png);
  background-size: contain;
  filter: grayScale(100%);
}
#undolist{
  position: absolute;
  top: 0px; right: 20px;
  width: 35px;height: 35px;
  text-align: center;
  line-height:45px;
  font-family: 'jua';
  font-size: 18px; color: rgba(0,0,0,0.5);
  background-color: rgba(0, 0, 0, 0);    
}
#redo{
  position: absolute;
  top: 0; right: 0;
  width: 35px;height: 35px;
  background-color: rgba(0, 0, 0, 0.);  
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url(https://cdn4.iconfinder.com/data/icons/controls-add-on-colored/48/JD-32-256.png);
  background-size: contain;
  transform: scaleX(-1);
  filter: grayScale(100%);
}
#undo.ready{filter: grayScale(0%);}
#redo.ready{filter: grayScale(0%);}

#undo:active{transform:  translateY(7px);}
#redo:active{transform:  scaleX(-1) translateY(7px);}