/*
 * 모아보기 팝업창 
 * 아이콕ICOK(HTML) iframe 모아보기
 */
#menu_view:active{transform: translateY(0px);} 
.view_size{
  pointer-events: auto;
  position: relative;
  width: 37.5px;
  height: 37.5px;
  border: 0px solid rgba(255,255,255,0.9);
  border-radius: 5px;
  background-color: transparent;
  background-image: url(../img/03_class/icon_view_off.png);
  background-position: top left;
  background-repeat: no-repeat;
  background-size: 75px;
} 
.view_size:active{transform: translateY(4px);}
.view_size.on{background-image: url(../img/03_class/icon_view_on.png);}

#view_size_1{top:1px; left:0; background-position: top left;}
#view_size_2{top:-37.5px; left:37.5px; background-position: top right;}
#view_size_4{top:-37.5px; left:0; background-position: bottom left;}
#view_size_9{top:-75px; left:37.5px; background-position: bottom right;}

#stampCanvas{  
  display: none;
  pointer-events: none;
  border:5px solid transparent;
}
#padviewMaskCanvas{  
  display: none;
  pointer-events: none;
  border:5px solid transparent;
}
#padviewCanvas{
  display: none;
  pointer-events: all;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-color: white;
}
#padviewCanvas{ /*1130x743*/
  border:5px solid red; /*(padviewWindows.css)#imageCollectList li img*/
}
#padviewCanvas.stampMode{ 
  border:5px solid gold; /*(padviewWindows.css)#imageCollectList li img*/  
}


#popupPadviewWindow{
  display: none;
  pointer-events: none;
  position:absolute;
  top:0px;left:0px;
  top:50%; left: 50%;
  transform: translate(-50%, -50%);
  width:1920px;height:1080px;
  background-color: rgba(0,0,0,0); 
}
#padviewWindow{
  pointer-events: auto;
  position: absolute;
  top:0px;left:110px;
  width:1700px; height:1080px;
  background:#e8e8e8;  
}
#titlePadviewWindow{
  height:91.5px;
  text-align: center;
  font-family: 'Jua', sans-serif;
  font-size: 30px; 
  line-height: 91.5px;
}

#closePadviewWindow{border:0px solid red;
  position: absolute;
  top:20px; left: 1618.5px;
  width: 67px; height: 67px;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url('../img/padview/icon_exit_on.png');
  background-size: 67px 67px;
}
#refreshPadview{border:0px solid red;
  position: absolute;
  top:20px; left: 1554px;
  width: 67px; height: 67px;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url('../img/padview/icon_reset_on.png');
  background-size: 67px 67px;
}
#zoom_padview{border:0px solid red;
  display: none;
  position: absolute;
  top:20px; left: 1618.5px;
  width: 67px; height: 67px;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url('../img/padview/tablet_zoom_out.png');
  background-size: 67px 67px;
}
#stampAllPadview{border:0px solid red;
  position: absolute;
  top:20px; left: 1441.5px;
  width: 114px; height: 67px;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url('../img/padview/icon_all_off.png');
  background-size: 114px 67px;
  pointer-events: none;
}
#stampAllPadview.on{
  pointer-events: auto;
  background-image: url('../img/padview/icon_all_on.png');
}
#closePadviewWindow.leftHand{left: 10px;}
#refreshPadview.leftHand{left: 80px;}
#stampAllPadview.leftHand{left: 150px;}

#scrollPad_down.leftHand{left:10px;}
#scrollPad_up.leftHand{left:10px;}

#scroll_down, .scroll_down {
  position: absolute; 
  top:582px; left:1589.5px; 
  width: 65.5px; height: 65.5px; 
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url(../img/padview/icon_PgDn_off.png);
  background-size: contain;53px; 65.5px 65.5px;
}
#scroll_up, .scroll_up {
  position: absolute; 
  top:511px; left:1589.5px; 
  width: 65.5px; height: 65.5px; 
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url(../img/padview/icon_PgUp_off.png);
  background-size: contain;53px;65.5px 65.5px;
}
#scrollPad_down.actived{background-image: url(../img/padview/icon_PgDn_on.png);}
#scrollPad_up.actived{background-image: url(../img/padview/icon_PgUp_on.png);}

/* 자료실 scroll 과 구분!!! */
#padviewWindow>
.scroll {
  border:0px solid cyan;
  position: absolute;
  top:80px; left: 0;
  width: 1690px;
  height: 1000px; 
  background-color: transparent;
  overflow-y: scroll;
  overflow-x: hidden;
  /*touch-action: pan-y pan-up pan-down;*/
  /*suggested by KBJ*/
  -webkit-touch-action: manipulation;
  touch-action: manipulation;
  sdirection: rtl; /*left side scrollbar*/
  sdirection: ltr;/*right side scrollbar*/
}
/*
 *https://stackoverflow.com/questions/7347532/how-to-position-a-div-scrollbar-on-the-left-hand-side
 */
.scroll.leftHand{sdirection: rtl;}
/*.scroll::-webkit-scrollbar { width: 25px;}
.scroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}
.scroll::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(51,204,51,0.5);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
}
*/
#padviewWindow>
.scroll::-webkit-scrollbar { 
  width: 24px; 
  background-color: transparent;
}
#padviewWindow>
.scroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}
#padviewWindow>
.scroll::-webkit-scrollbar-thumb {
background-clip: padding-box;
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
    background-color: white; 
}
/*
https://stackoverflow.com/questions/21684101/css-vertical-scrollbar-padding-left-right-in-ul-possible
*/
ul{
  list-style: none;
  list-style-position: inside;
  padding-left: 0;  
} 
#imageCollectList li {
  float: left;
  background-image: url('../img/padview/view2.png');
  background-position: center center;
  background-repeat: no-repeat;
  border:0px solid transparent;
}
#imageCollectList li.viewsize_1,
#imageCollectList li.viewsize_1.zoomed {
  width: 1660px; height: 1000px;
  background-size: 1436.5px 969px;
  background-image: url('../img/padview/tablet_1.png');
}
#imageCollectList li.viewsize_2 {
  width: 830px; height: 1000px;
  background-size: 725.5px 492.5px;
  background-image: url('../img/padview/tablet_4.png');
}
#imageCollectList li.viewsize_4 {
  width: 830px; height: 500px;
  background-size: 725.5px 492.5px;
  background-image: url('../img/padview/tablet_4.png');
}
#imageCollectList li.viewsize_9 {
  width: 550px; height: 333px;
  background-size: 476.5px 326px;
  background-image: url('../img/padview/tablet_9.png');
}

#imageCollectList li img,
#imageCollectList li iframe{
  border:5px solid #dedede;
  /*https://stackoverflow.com/questions/12906789/preventing-an-image-from-being-draggable-or-selectable-without-using-js*/
  user-drag: none;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}
#imageCollectList li.selectedPadView img,
#imageCollectList li.selectedPadView iframe {border:5px solid gold;}

/* canvas size: 1660 x 1080 */ 
.viewsize_1 img,
.viewsize_1 iframe{ 
  border:1px solid black;
  width:1262px; height:817.5px;
  margin:62px 246px 58px 200px;
  background-color: #dff2f7;
}
.viewsize_1.zoomed img,
.viewsize_1.zoomed iframe { 
  border:1px solid black;
  width:1262px; height:817.5px;
  margin:12px 246px 58px 200px;
  background-color: #dff2f7;
}
.viewsize_2 img,
.viewsize_2 iframe { 
  border:1px solid black;
  width: 629.5px; height:408px;
  margin:228px 79.5px 218px 101.5px;
  background-color: #dff2f7;
}
.viewsize_4 img,
.viewsize_4 iframe { 
  border:1px solid black;
  width: 629.5px; height:408px; 
  margin:-29px 79.5px 12px 101.5px;
  background-color: #dff2f7;
}
.viewsize_9 img,
.viewsize_9 iframe { 
  border:1px solid black;
  width:407.5px; height:264px;
  margin:-37px 68px 1px 72px;
  background-color: #dff2f7;
}
#imageCollectList li >
.childName {display:block;width:80px;
  padding:5px;padding-left:53px;
  font:bold 12px 굴림,Arial;color:#ffffff;
  background-image: url('../img/padview/tablet_name.png');
  background-size: 85px 27.5px;
  background-repeat: no-repeat;
  background-position: center center; 
}
#imageCollectList li >
.childName.doneChild{color:gold;}
.viewsize_1 .childName{position:relative;top:46px;left:150px;}
.viewsize_1.zoomed .childName{position:relative;top:46px;left:216px;}
.viewsize_2 .childName{position:relative;top:274px;left:50px;}
.viewsize_4 .childName{position:relative;top:25px;left:50px;}
.viewsize_9 .childName{position:relative;top:22px;left:30px;}
.zoomin{ 
  position: relative;
  width: 50px; height: 50px; 
  background-color: rgba(0,0,0,0.5);
  border-radius: 50%;
  background-image: url('../img/padview/tablet_zoom_in.png');
  background-position: center center;
  background-repeat: no-repeat;
  pointer-events: all;
}
.zoomin.zoomed{background-image: url('../img/padview/tablet_zoom_out.png');}
.viewsize_1 .zoomin{display:none; top: 16px; left: 1450px;}
.viewsize_1.zoomed .zoomin{display:block; top: 16px; left: 1450px;}
.viewsize_2 .zoomin{top: 240px; left: 710px;}
.viewsize_4 .zoomin{top: -10px; left: 710px;}
.viewsize_9 .zoomin{top: -30px; left: 460px;}

/*golden bell*/
.golden_bell_o{ 
  position: relative;
  width: 50px; height: 50px; 
  background-color: rgba(0,255,0,0);
  border-radius: 50%;
  background-image: url(../img/goldenbell_o.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  pointer-events: all;
}
.golden_bell_o.zoomed{background-image: url('../img/padview/tablet_zoom_out.png');}
.viewsize_1 .golden_bell_o{ top: -52px; left: 950px;}
.viewsize_1.zoomed .golden_bell_o{display:block; top: 16px; left: 1450px;}
.viewsize_2 .golden_bell_o{top: -220px; left: 410px;}
.viewsize_4 .golden_bell_o{top: -15px; left: 410px;}
.viewsize_9 .golden_bell_o{top: -20px; left: 260px;}

.golden_bell_x{ 
  position: relative;
  width: 50px; height: 50px; 
  background-color: rgba(255,0,0,0);
  border-radius: 50%;
  background-image: url(../img/goldenbell_x.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  pointer-events: all;
}

.golden_bell_x.zoomed{background-image: url('../img/padview/tablet_zoom_out.png');}
.viewsize_1 .golden_bell_x{top: -102px; left: 1050px;}
.viewsize_1.zoomed .golden_bell_x{display:block; top: 16px; left: 1450px;}
.viewsize_2 .golden_bell_x{top: -270px; left: 490px;}
.viewsize_4 .golden_bell_x{top: -66px; left: 500px;}
.viewsize_9 .golden_bell_x{top: -72px; left: 340px;}

.golden_bell_o:active{background-image: url(../img/goldenbell_o_push.png);}
.golden_bell_x:active{background-image: url(../img/goldenbell_x_push.png);}

.golden_bell_o:active,
.golden_bell_x:active{
  transform: translateY(1px);
}

.golden_bell_window{
  position: relative;
  background-color: rgba(0,0,0,0);
  background-size: 30%;
  background-position: center center;
  sbackground-image: url(../img/goldenbell_answer_o.png);
  opacity: 0.9;
  background-repeat: no-repeat;
  pointer-events: none;
  border: 0px solid red;
}
/*골든벤 정답확인 정정가능하게!*/
.golden_bell_window.o{spointer-events: all;background-image: url(../img/goldenbell_answer_o.png);}
.golden_bell_window.x{spointer-events: all;background-image: url(../img/goldenbell_answer_x.png);}

.viewsize_1 .golden_bell_window{
  top:-980px; left:200px;  
  width: 1280px; height: 890px;   
}

.viewsize_2 .golden_bell_window{
  top:-740px; left:100px;  
  width: 640px; height: 460px;   
}

.viewsize_4 .golden_bell_window{
  top:-530px; left:100px;  
  width: 650px; height: 470px;   
}

.viewsize_9 .golden_bell_window{
  top:-400px; left:50px;  
  width: 440px; height: 320px;   
}

#zoomView{
  display: none;
  position:absolute;
  top:0;left:110px;
  width:1700px; height:100%;
  z-index:3;
  background-color: rgba(0,0,0,0.6);
}
#refreshZoomView{
  display: none;
  position: absolute;
  top: 80px; left: 1490px;
  width: 55px; height: 55px; 
  background-color: rgba(0,0,0,0.5);
  border-radius: 50%;
  background-image: url('../img/padview/icon_reset_on.png');
  background-position: center center;
  background-repeat: no-repeat;  
  background-size: 65px;
}
#closeZoomView{
  position: absolute;
  top: 80px; left: 1460px;
  width: 55px; height: 55px; 
  background-color: rgba(0,0,0,0.5);
  border-radius: 50%;
  background-image: url('../img/padview/tablet_zoom_out.png');
  background-position: center center;
  background-repeat: no-repeat;  
}

#padZoomView .childName{position:absolute;top:46px; left:150px;}

#padZoomView{
  position: absolute;
  top: 50px; left: 0px;
  border:0px solid black;
  width: 1660px; height: 1000px;
  background-size: 1436.5px 969px;
  background-image: url('../img/padview/tablet_1.png');
  background-repeat: no-repeat;
  background-position: center center; 
}

#padZoomView img,
#padZoomView iframe { width:1262px; height:817.5px;
  border:1px solid #ccc;
  margin:92px 246px 28px 200px;
  background-color: #dff2f7;
}