/*
 * 원아확인팝업창 
 * -2023/4/21 reconnect 
 */

#goldenBell{
  position: absolute;
  top: 15px; left: 100px;;
  border: 0px solid red;
  width: 135.5px;180px; height:46.5px;50px;
  background-image: url(../img/goldenbell_menu.png);
  filter:grayscale(100%);
}
#goldenBell::before{
  content:'';
  position: absolute;
  top:0; left:0; width: 100%; height: 100%;
  font-size: 32px;
  text-align: center;
  line-height: 60px;
  color: white;
  
}
#goldenBell.on{
  background-image: url(../img/goldenbell_menu.png);
  filter:grayscale(0%);
}

#goldenBellScore{
  position: absolute;
  top: 15px; left: 250px;;
  border: 0px solid red;
  width: 100px; height:50px;
  width: 109.5px;100px; height:46.5px;50px;
  background-image: url(../img/goldenbell_menu_point.png);
  filter:grayscale(100%);
}
#goldenBellScore::before{
  content:'';
  position: absolute;
  top:0; left:0; width: 100%; height: 100%;
  font-size: 32px;
  text-align: center;
  line-height: 60px;
  color: white;
}
#goldenBellScore.on{
  background-image: url(../img/goldenbell_menu_point.png);
  filter:grayscale(0%);
}

#popupChildWindow{
  display: none;
  position: absolute;
  top: 300px; left: 500px;
  top:50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 1338.5px; height: 856px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../img/04_child/box.png);
}
.popupWindowTitle{
  text-align: center;
  font-weight: bold;
  font-size: 26px;
  line-height: 80px;67.5px;
  height: 67.5px;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: 1317.5px 1px;
  background-image: url(../img/04_child/line.png)
}
.popupMenuBtn{
  position: absolute;
  left: 1016px;
  width: 266px; height: 96px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
}
#iconExitChildWindow{
  top: 28.5px; left: 1280px;
  width: 21px; height: 21px;
  background-image: url(../img/04_child/icon_exit.png)  
}
#childRefresh{
  top: 108px;
  width: 63px; height: 62.5px;
  background-image: url(../img/04_child/icon_reset.png)
}
#childCount{
  left: 1091px; top: 107.5px;
  width: 210px; height: 63px;
  background-image: url(../img/04_child/icon_count.png);
}
#childCountNum {  
  line-height: 72px;
  font-size: 32px; 
  font-weight: bold;
  text-align: right;
  padding-right: 50px;
}
/*종일반 연령별 원아선택 메뉴버튼*/
#childWindowsAgeSelector{
  position:absolute;
  top: 680px;
  top: 187.5px; 
  top: 200px; 
  right: 55px;50px;
}
#childWindowsAgeSelector > button{
  width: 80px; height: 80px;
  margin-right:5px;
  color: transparent;
  sbackground-color: #cba;
  sborder-radius: 30%;20px;50%;;
  font-size: 22px;
  font-family: 'Jua';
  background-size: 80px 80px;  
}
#childWindowsAgeSelector > button[data-age="5"]{background-image: url(../img/skin_01/age_select_5s_off.png);}
#childWindowsAgeSelector > button[data-age="6"]{background-image: url(../img/skin_01/age_select_6s_off.png);}
#childWindowsAgeSelector > button[data-age="7"]{background-image: url(../img/skin_01/age_select_7s_off.png);}

#childWindowsAgeSelector > button.selected[data-age="5"]{background-image: url(../img/skin_01/age_select_5.png);}
#childWindowsAgeSelector > button.selected[data-age="6"]{background-image: url(../img/skin_01/age_select_6.png);}
#childWindowsAgeSelector > button.selected[data-age="7"]{background-image: url(../img/skin_01/age_select_7.png);}

#childSelectAll.afterSchool{top: 303.5px;;}
#childSend.afterSchool{top: 410px;}
#childTeacherCok.afterSchool{top: 516px;}
#childLogout.afterSchool{top: 622px;}
#childReconnect.afterSchool{top: 728px;}

#childSelectAll{
  top: 187.5px; 
  background-image: url(../img/04_child/icon_AllSelect_off.png);
}
#childSend{
  top: 303.5px; 
  background-image: url(../img/04_child/icon_send_off.png);
  background-image: url(../img/04_child/icon_send_on.png);
}
#childTeacherCok{
  top: 420px; 
  background-image: url(../img/04_child/icon_teacher_off.png);
  background-image: url(../img/04_child/icon_teacher_on.png);
}
#childLogout{
  top: 536px; 
  background-image: url(../img/04_child/icon_LogOut_off.png);  
  background-image: url(../img/04_child/icon_LogOut_on.png);  
}
#childReconnect{
  top: 652px; 
  background-image: url(../img/04_child/icon_reconnect_off.png);  
  background-image: url(../img/04_child/icon_reconnect_on.png);  
}

#childSelectAll:active{background-image: url(../img/04_child/icon_AllSelect_on.png)}
#childSend:active{background-image: url(../img/04_child/icon_send_on.png)}
#childTeacherCok:active{background-image: url(../img/04_child/icon_teacher_on.png)}
#childLogout:active{background-image: url(../img/04_child/icon_LogOut_on.png)}
#childReconnect:active{background-image: url(../img/04_child/icon_reconnect_on.png);}

#childSelectAll.on{background-image: url(../img/04_child/icon_AllSelect_on.png)}
#childSend.on{background-image: url(../img/04_child/icon_send_on.png)}
#childSend.on{
  animation: ani_childSend_on 1s infinite;
}
@keyframes ani_childSend_on {
  0%,100%   {background-image: url(../img/04_child/icon_send_off.png);}
  50%  {background-image: url(../img/04_child/icon_send_on.png);}
}
#childTeacherCok.on{background-image: url(../img/04_child/icon_teacher_on.png)}
#childLogout.on{background-image: url(../img/04_child/icon_LogOut_on.png)}

.popupMenuBtn:not(#childCount):active{transform: translateY(4px);}
.popupMenuBtn.pushed{transform: translateY(4px);}

#childWindowChildList{
  display: flow-root;
  position: absolute;
  top: 88px; left: 40px;
  width: 948px; height: 725px;
  overflow: auto;
}

.childWindowChildFace{
  float: left;
  margin: 10px 15px;
  width: 124px; height: 124px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 124px, 124px;
  background-image: url(https://img1.daumcdn.net/thumb/R720x0.q80/?scode=mtistory2&fname=http%3A%2F%2Fcfile23.uf.tistory.com%2Fimage%2F2250883452DF10A2310C16)
    , url(../img/04_child/kids_box.png);
  border:0px solid rgba(0,0,0,0.1);
  background-color: rgba(0,0,0,0.1);
  border-radius: 29px;
  filter: grayscale(100%);
}

.childWindowChildFace.goldenBell.connected::before{
  position:absolute;
  content:attr(data-before);
  top:0;right:0;
  width: 30px; height:30px;
  border-radius: 50%;
  color: black;
  background-color: gold;
  font-size: 25px;
  line-height: 30px;
  text-align: center;
}

/* .childWindowChildFace > div > .childName */
.connected > div{
  position: relative;
  top: 0;100px;
  width: 124px; height: 124px;28px;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: 124px;
}
.connected.checked > div{background-image: url(../img/04_child/kids_box_check.png);}
.connected.locked > div{background-image: url(../img/04_child/kids_box_lock.png);}
.connected.checked.locked > div{
  background-image: url(../img/04_child/kids_box_check.png), url(../img/04_child/kids_box_lock.png);
}

.childWindowChildFace > div > .childName{
  position: relative;
  top: 100px;
  width: 124px; height: 28px;
  line-height: 28px;
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  color: #ccc;

  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: 124px;;
  background-image:url(../img/04_child/kids_box_shadow.png); 
}
/*.childWindowChildFace > div > .childPhoto{
  position: absolute;
  top: 0px;
  width: 124px; height: 124px;
  border:0px solid red;
  border-radius: 25px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 124px 124px;
  background-image: url(https://image.shutterstock.com/image-photo/little-girl-child-showing-front-260nw-688835749.jpg); 
}*/

.childWindowChildFace.connected{
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 124px, 124px;
  background-image: url(https://en.pimg.jp/007/706/343/1/7706343.jpg)
    ,url(../img/04_child/kids_box.png);
  border:0px solid rgba(0,0,0,0.1);
  background-color: rgba(0,0,0,0.1);
  filter: grayscale(0);
}
.childWindowChildFace.connected > div > .childName{
  color: #fff;
}