/*
 * 자료실팝업창 
 * -묶음전송 기능 추가: pageList/popupMenuSend
 * -2023/4/18 콕+ 자료실 월별/주목록-주제목록/소주제별(#wrapThemeSelectBox2)
 * -2023/9/14 실버콕 자료실 월별/주목록-주제목록/소주제별(#wrapThemeSelectBox3)
 * -2024/1/10 영어 #wrapThemeSelectBox4
 * -2024/1/24 내컴퓨터 이미지 자료 열기 - 화면채우기
 * -2024/1/30 너콕나콕(협동컨텐츠)'groupActivity' 클래스 추가
 * -2024/2/14 너콕나콕 #wrapThemeSelectBox5
 *
 * - 안전콕(월별/주제목록 함께 제공) #month_theme_selecotor #wrapThemeSelectBox6
 * - 놀이콕 #wrapThemeSelectBox7,wrapAgeSelectBoxPlay
 * - 한글콕(한글노래,소중한글) #wrapThemeSelectBox8
 * - 2025/2/6 자료실 컨텐츠목록(thumbnail 아이콘 추가)
 *   
 */

#month_theme_selecotor{
  border:0px solid red;
  margin-left: 200px;  
  padding-left: 60px;
  background-position: 33.5px center;
  background-repeat: no-repeat;
  background-size: 17px 14px;  
  background-image: url(../img/05_cms/icon_month.png); 
}

#scale_menu{
  position:absolute;
  border:1px solid #cca;
  border-radius: 7px;
  top: 5px; right:115px;
  width: 70px; height:70px;
  background-image: url(../img/scale_fit2screen.png);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}
#scale_menu.zoomed{background-image: url(../img/scale_normal.png);}

#pageList{
  display: inline-flex;
  justify-content: center;
  align-content: center;
  position: absolute;
  right: 100px;
  bottom: 0;
  width: 1820px;100%;
  height: 50px;
  border: 0px solid red;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0);
  pointer-events: none;
}
.paperPreviewCover{
  border: 0px solid red;
  width: 60px; height: 30px;
  background-color: rgba(0, 0, 0, 0.2);
  pointer-events: all;
}
.paperPreview{
  width: 100%;height: 100%; margin-right: 5px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: all;
}

#pageList.screenLock{
  width: 100%;
  height: 100%;
  pointer-events: all;  
  background-color: rgba(0, 0, 0, 0.5); 

  height: 100%;
  top: 50%; 
  right: 50%;
  transform: translateX(50%) translateY(-50%);

  justify-content: center;
  flex-wrap: wrap;

}
.screenLock .paperPreviewCover{
  display:none;
  margin: 10px;
  width: 150px;
  height: 100px;
}
.screenLock .paperPreview{
  margin: 10px;
  width: 120px;
  height: 80px;
}

#popupMenuSend{
  position:absolute;
  border:0px solid red;
  bottom: 0px;
  right:0;
  width: 100%;
  height: 100%;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0);
}
#popupMenuSend div{
  display: inline-flex;
  flex-wrap: wrap;
  position:absolute;
  border:0px solid red;
  bottom: 120px;
  right:0;
  width: 200px;
  height: 200px;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0);
}
#popupMenuSend div button{
  margin:5px;
  width:90px; height:90px;
  sbackground-color: gold;
  sborder: 5px solid white;
  font-size:22px;
  scolor: white;
  sborder-radius: 35px;
  color: transparent;
} 
#popupMenuSend div button[data-age="5"]{
  background-image: url(../img/skin_01/icon_send2_select_5.png);
  background-size: contain;  }
#popupMenuSend div button[data-age="6"]{
  background-image: url(../img/skin_01/icon_send2_select_6.png);
  background-size: contain;  }
#popupMenuSend div button[data-age="7"]{
  background-image: url(../img/skin_01/icon_send2_select_7.png);
  background-size: contain;  }
#popupMenuSend div button[data-age="0"]{
  background-image: url(../img/skin_01/icon_send2_select_all.png);
  background-size: contain;  }

#popupCMSWindow{
  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); 
}
#popupCMSWindowWrapper{
  pointer-events: auto;
  position: absolute;
  top: 10px;80px/*default 위치조정!*/; 1440px; right: 120px;
  width: 472px; height: 676px;
  overflow: visible;
}
#popupCMSWindowWrapper.leftHand{left: 120px !important;}
#ftp_file_preview.leftHand{left:475px !important;}

#popupCMSWindowTop,
.cmsFolderTop{
  width: 472px; height: 49px;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: 472px 49px;contain;
  background-image: url(../img/05_cms/box_01.png);
}
#popupCMSWindowBody,
.cmsFolderBody{
  width: 472px; sheight: 49px;
  background-position: 0px center;
  background-repeat: repeat-y;
  background-size: 472px;contain;
  background-image: url(../img/05_cms/box_02.png);
}
#popupCMSWindowBottom,
#subjectFolderBottom,
.cmsFolderBottom {
  width: 472px; height: 49px;
  background-position: top center;
  background-repeat: no-repeat;
  background-size: 472px;contain;
  background-image: url(../img/05_cms/box_03.png);
}
#popupCMSWindow > 
.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: 425px;
  background-image: url(../img/05_cms/in_line.png);
  background-color: transparent;
}
#popupCMSWindowWrapper > 
.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: 425px;
  background-image: url(../img/05_cms/in_line.png);
  background-color: transparent;
}

#folderList{position: absolute;top:0px;width: 100%;}
#contentList{position: absolute;top:0px;width: 100%;}
#titleAge{
  /*
  position: absolute;
  top: 0; left: 11px; 
  */
  margin-left: 11px;
  width: 450px; height: 240px;
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: 450px;contain;
  background-image: url(../img/05_cms/age_5.png);  
}
#titleAge.age4,
#titleAge.age5{
  background-image: url(../img/05_cms/age_5.png);    
}
#titleAge.age6{
  background-image: url(../img/05_cms/age_6.png);    
}
#titleAge.age7{
  background-image: url(../img/05_cms/age_7.png);    
}
#titleAge.age0{
  background-image: url(../img/05_cms/age_other.png);    
}
#titleAge > .closeCMSWindow{
  position: absolute;
  top: 45px; left: 410px;
  width: 35px; height: 35px;
  background-color: rgba(0,0,0,0);
}
.closeCMSWindow:active{transform: translateY(4px);}
/*
 * https://heropy.blog/2018/11/24/css-flexible-box/
 */
#subjectFolder{
  /*  
  position: absolute;
  top: 240px;
  */  
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 20px 30px;
  background-color: rgba(255,0,0,0);
  overflow: show;
}
.subject{
  float: left;
  width: 88.5px; height: 45px;
  margin: 15px 22px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../img/05_cms/sub_01.png);    
}
.subject.disabled{
  pointer-events: none;
  filter: grayscale(100%);
  transform: translateY(0px);
}

/*silver
.subject.disabled:nth-child(15){
  border:0px solid red;
  display:none !important;
  background-image: none !important;
  pointer-events: none;
}
*/

#iconBackContentList,
.monthBox:active,
.subject:active{transform: translateY(4px);}

#contentListTitleIcon{
  height: 45px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../img/05_cms/sub_01.png);  
}
#iconBackContentList{
  position: absolute;
  top: 50px; left: 30px;
  width: 23px; height: 18px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../img/05_cms/icon_back.png); 
}
#iconCloseContentList{
  position: absolute;
  top: 45px; left: 410px;
  width: 21px; height: 21px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../img/05_cms/icon_exit.png); 
}
#wrapMonthBox{
  padding-left: 20px;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center; 

  padding-bottom: 15px;
  background-image: url(../img/05_cms/in_line.png);
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: 407.5px;
}
#wrapAgeSelectBoxPlay,
#wrapAgeSelectBox,#wrapAgeSelectBoxBlock,#wrapAgeSelectBoxCoop,
#wrapThemeSelectBox,#wrapThemeSelectBox2,
#wrapThemeSelectBox3,#wrapThemeSelectBox4,#wrapThemeSelectBox5,#wrapThemeSelectBox6,
#wrapThemeSelectBox7,#wrapThemeSelectBox8{
  display: flex;
  flex-flow: wrap;
  justify-content: center; 
  padding-left: 20px;
  padding-bottom: 15px;
  padding-bottom: 5px !important;
}
#wrapThemeSelectBox6{justify-content: left;}
#wrapThemeSelectBox7{justify-content: left;}
#wrapThemeSelectBox8{justify-content: left;}
#wrapThemeSelectBox2,
#wrapThemeSelectBox3,
#wrapThemeSelectBox4,
#wrapThemeSelectBox5,
#wrapThemeSelectBox6,
#wrapThemeSelectBox7,
#wrapThemeSelectBox8{justify-content: left;}
#wrapThemeSelectBox.collaped,
#wrapThemeSelectBox2.collaped,
#wrapThemeSelectBox3.collaped,
#wrapThemeSelectBox4.collaped,
#wrapThemeSelectBox5.collaped,
#wrapThemeSelectBox6.collaped,
#wrapThemeSelectBox7.collaped,
#wrapThemeSelectBox8.collaped{
  height: 35px;
  overflow: hidden;
}
.ageBox{
  text-align: center;
  line-height: 70px;
  width: 70px; height: 70px;
  border-radius: 50%;
  margin:0 20px;
  sbackground-color: #ccc;
  background-repeat: no-repeat;
  background-position: center center; 
  background-size: contain;
  color: transparent;
}
#ageBox5{background-image: url('../img/05_cms/nuri/age2Box5_off.png');}
#ageBox6{background-image: url('../img/05_cms/nuri/age2Box6_off.png');}
#ageBox7{background-image: url('../img/05_cms/nuri/age2Box7_off.png');}

#ageBox5.curAgeBox{background-image: url('../img/05_cms/nuri/age2Box5.png');}
#ageBox6.curAgeBox{background-image: url('../img/05_cms/nuri/age2Box6.png');}
#ageBox7.curAgeBox{background-image: url('../img/05_cms/nuri/age2Box7.png');}

.curAgeBox{
  color: #fff;
  color: transparent;
  sbackground-color: #f23;
}

.ageBoxBlock{
  text-align: center;
  line-height: 70px;
  width: 70px; height: 70px;
  border-radius: 50%;
  margin:0 20px;
  sbackground-color: #ccc;
  background-repeat: no-repeat;
  background-position: center center; 
  background-size: contain;
  color: transparent;
}
#ageBoxBlock5{background-image: url('../img/05_cms/nuri/age2Box5_off.png');}
#ageBoxBlock6{background-image: url('../img/05_cms/nuri/age2Box6_off.png');}
#ageBoxBlock7{background-image: url('../img/05_cms/nuri/age2Box7_off.png');}

#ageBoxBlock5.curAgeBoxBlock{background-image: url('../img/05_cms/nuri/age2Box5.png');}
#ageBoxBlock6.curAgeBoxBlock{background-image: url('../img/05_cms/nuri/age2Box6.png');}
#ageBoxBlock7.curAgeBoxBlock{background-image: url('../img/05_cms/nuri/age2Box7.png');}

.curAgeBoxBlock{
  color: #fff;
  color: transparent;
  sbackground-color: #f23;
}

.ageBoxPlay{
  text-align: center;
  line-height: 70px;
  width: 70px; height: 70px;
  border-radius: 50%;
  margin:0 20px;
  sbackground-color: #ccc;
  background-repeat: no-repeat;
  background-position: center center; 
  background-size: contain;
  color: transparent;
}

#ageBoxPlay5{background-image: url('../img/05_cms/nuri/age2Box5_off.png');}
#ageBoxPlay6{background-image: url('../img/05_cms/nuri/age2Box6_off.png');}
#ageBoxPlay7{background-image: url('../img/05_cms/nuri/age2Box7_off.png');}

#ageBoxPlay5.curAgeBoxPlay{background-image: url('../img/05_cms/nuri/age2Box5.png');}
#ageBoxPlay6.curAgeBoxPlay{background-image: url('../img/05_cms/nuri/age2Box6.png');}
#ageBoxPlay7.curAgeBoxPlay{background-image: url('../img/05_cms/nuri/age2Box7.png');}

.curAgeBoxPlay{
  color: #fff;
  color: transparent;
  sbackground-color: #f23;
}

.ageBoxCoop{
  text-align: center;
  line-height: 70px;
  width: 70px; height: 70px;
  border-radius: 50%;
  margin:0 20px;
  sbackground-color: #ccc;
  background-repeat: no-repeat;
  background-position: center center; 
  background-size: contain;
  color: transparent;
}
#ageBoxCoop5{background-image: url('../img/05_cms/nuri/coopCanvas_off.png');}
#ageBoxCoop6{background-image: url('../img/05_cms/nuri/coopMulti_off.png');}
#ageBoxCoop7{background-image: url('../img/05_cms/nuri/coopMission_off.png');}

#ageBoxCoop5.curAgeBoxCoop{background-image: url('../img/05_cms/nuri/coopCanvas_on.png');}
#ageBoxCoop6.curAgeBoxCoop{background-image: url('../img/05_cms/nuri/coopMulti_on.png');}
#ageBoxCoop7.curAgeBoxCoop{background-image: url('../img/05_cms/nuri/coopMission_on.png');}

.curAgeBoxCoop{
  color: #fff;
  color: transparent;
  sbackground-color: #f23;
}

#wrapTxtThemeSelector{
  display: flex;
  border: 0px solid red;
  flex-flow: wrap;
  justify-content: space-between; 
}
#themeSelectBoxOpenClose{
  width: 40px; height: 30px;
  margin:10px 20px 0  0;
  border:0px solid red;
  
  background-image: url('../img/05_cms/icon_flip2.png');
  background-repeat: no-repeat;
  background-position: center; 
  background-size: 19px;
}
#themeSelectBoxOpenClose.open{background-image: url('../img/05_cms/icon_flip.png');}
#wrapThemeSelectBox,#wrapThemeSelectBox2,#wrapThemeSelectBox3,#wrapThemeSelectBox4,#wrapThemeSelectBox5,#wrapThemeSelectBox6,
#wrapThemeSelectBox7{
  sposition: relative; stop: -30px;
}
#wrapThemeSelectBox5{
  justify-content: left;
}
.themeBox,.themeBox2,.themeBox3,.themeBox4,.themeBox5,.themeBox6,.themeBox7,.themeBox8{
  border:0px solid red;
  width: 132px;110px; height: 46.5px;36px;
  font-family: 'Noto Sans KR', sans-serif;
  white-space: nowrap;
  font-size: 13px; 
  text-align: center;
  font-weight: bold;
  color: black;
  line-height: 15px;
  margin: 1px 3px;
  padding: 0px;
  background-color: rgba(0,0,0,0);
  border-radius: 3px;
  background-repeat: no-repeat;
  background-position: top left; 
  background-size: 118.5px;110px; 

  display: flex;
  justify-content: center;
  flex-direction: column;  
}

.themeBox3,
.themeBox5{width: 200px;font-size: 16px;}

.themeBox.selected,.themeBox2.selected,.themeBox3.selected,
.themeBox4.selected,.themeBox5.selected,.themeBox6.selected,
.themeBox7.selected,
.themeBox8.selected,
.curThemeBox{
  stext-shadow: 2px 2px 8px #FF0000;
  scolor: #fff;
  sfilter: invert(100%);
  s-webkit-filter: invert(100%);
  background-color: #F9C903; #f53; #34f;
  border-radius: 7px;
}
.themeBox.selected_1,
.themeBox2.selected_1,
.themeBox3.selected_1,
.themeBox4.selected_1,
.themeBox5.selected_1,
.themeBox6.selected_1,
.themeBox7.selected_1,
.themeBox8.selected_1{color: white;background-color: #F9C903 !important; #f53; #34f;}
.themeBox.selected_2,
.themeBox2.selected_2,
.themeBox3.selected_2,
.themeBox4.selected_2,
.themeBox5.selected_2,
.themeBox6.selected_2,
.themeBox7.selected_2,
.themeBox8.selected_2{color: white;background-color: #f53 !important; #34f;}
.themeBox.selected_3,
.themeBox2.selected_3,
.themeBox3.selected_3,
.themeBox4.selected_3,
.themeBox5.selected_3,
.themeBox6.selected_3,
.themeBox7.selected_3,
.themeBox8.selected_3{color: white;background-color: #508CFD !important;}

.themeBox5.selected_1{color: white;background-color: #2EC2F5 !important; #f53; #34f;}
.themeBox5.selected_2{color: white;background-color: #82BF0A !important; #34f;}
.themeBox5.selected_3{color: white;background-color: #FF2A78 !important;}

.themeBox6.selected_1{color: white;background-color: #2EC2F5 !important; #f53; #34f;}
.themeBox6.selected_2{color: white;background-color: #82BF0A !important; #34f;}
.themeBox6.selected_3{color: white;background-color: #FF2A78 !important;}

.themeBox7.selected_1{color: white;background-color: rgb(253,173,11) !important; #f53; #34f;}
.themeBox7.selected_2{color: white;background-color: rgb(239,57,19) !important; #34f;}
.themeBox7.selected_3{color: white;background-color: rgb(39,84,223) !important;}

.themeBox8.selected_1{color: white;background-color: rgb(253,173,11) !important; #f53; #34f;}
.themeBox8.selected_2{color: white;background-color: rgb(239,57,19) !important; #34f;}
.themeBox8.selected_3{color: white;background-color: rgb(39,84,223) !important;}

.monthBox{
  float: left;
  width: 30px; height: 30px;
  margin: 5px 3px;
  
  font-size: 17px;
  line-height: 34px;
  font-weight: bold;
  text-align: center;

  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url(../img/05_cms/month_box_off.png);    
}
.monthBox.selected{
  color: white;
  background-image: url(../img/05_cms/month_box_on.png); 
}
.monthBox.disabled{
  pointer-events: none;
  filter: grayscale(100%) opacity(50%);
}

#txtAgeSelectorPlay,
#txtAgeSelector,#txtAgeSelectorBlock,#txtAgeSelectorCoop,
#txtThemeSelector,
#txtMonthSelector{
  margin:10px 0;
  font-size: 16px;
  padding-left: 60px;
  background-position: 33.5px center;
  background-repeat: no-repeat;
  background-size: 17px 14px;  
  background-image: url(../img/05_cms/icon_month.png); 
}
#txtAgeSelector{background-image: none !important;}

#txtContentList{
  margin-top:20px;
  font-size: 16px;
  padding-left: 60px;
  background-position: 33.5px center;
  background-repeat: no-repeat;
  background-size: 14px 17.5px;  
  background-image: url(../img/05_cms/icon_list.png); 
}

.weekTitle{
  height: 55px;
  padding-left:50.5px;
  line-height: 55px;
  font-size: 20px;
  background-image: url('../img/05_cms/icon_flip.png');
  background-repeat: no-repeat;
  background-position: 412.5px 22px; 
  sbackground-size: 19px 11px;
  background-size: 19px;
}
.weekTitle.open {
  background-image: url('../img/05_cms/icon_flip2.png');
  background-repeat: no-repeat;
  background-position: 412.5px 22px; 
  sbackground-size: 19px 11px;
  background-size: 19px;
}
.weekSeperator{
  border-top: 0px solid #dedede;
  background-image: url('s../img/05_cms/in_box01_shadow.png');
  background-repeat: no-repeat;
  background-position: center top; 
  sbackground-size: 450px 18px;
  background-size: 450px;
}
.weekSeperator > div{
  margin-left:25px;
  width:420px;height:0.5px;
  border-bottom:0.5px solid #dedede;
}

.weekList{border:0px solid blue;
  padding-top:18px;
  width: 472px; height:320px;
  background-image: 
      url('../img/05_cms/in_box01.png'),
      url('../img/05_cms/in_box01_shadow.png'),
      url('../img/05_cms/box_02.png');
  background-repeat: no-repeat,no-repeat,repeat-y;
  background-position: center bottom,center top,center center;
  sbackground-size: 450px 330px, 450px 18px,472px 55px;
  background-size: 450px, 450px, 450px; /*<--472px?*/  
}
.scroll.weekListScroll,
.weekList.scroll{
  margin-left:24px;
  width:424px;height: 250px;
  overflow:scroll;
}

.padding{
  border:0px solid red;
  height: 55.5px;
  padding-top:15px;
}

/* 목록메뉴버튼*/
button{
  background-color: transparent;
  border:none;
  outline:none;
}
button:active{transform: translateY(4px);}

button.btnSelectAll{
  margin-left:36px;
  width: 69px; height: 40.5px;
  background-image: url('../img/05_cms/icon_AllSelect_on.png');
  background-size: 69px;
  background-position: center center;
  background-repeat: no-repeat;
}
button.btnSelectAll.on{
  background-image: url('../img/05_cms/icon_AllSelect_on.png');
}
button.btnCancel{
  margin-left:5px;
  width: 69px; height: 40.5px;
  background-image: url('../img/05_cms/icon_cancel_off.png');
  background-size: 69px;
  background-position: center center;
  background-repeat: no-repeat;
}
button.btnCancel.on{
  background-image: url('../img/05_cms/icon_cancel_on.png');
}
button.btnOpen{
  margin-left:85px;
  width: 157.5px; height: 40.5px;
  background-image: url('../img/05_cms/icon_open_on.png');
  background-size: 157.5px;
  background-position: center center;
  background-repeat: no-repeat;
}
button.btnOpen.on{
  background-image: url('../img/05_cms/icon_open_on.png');
}

#ftp_file_preview:active,
.contentItem:active{transform: translateY(4px);}

/*자료실 파일목록*/
.contents_list{border:0px solid blue;
  margin:0;padding:0;
  background-color:#dedede; 
}
.weekListScroll.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
 */
.weekListScroll.scroll::-webkit-scrollbar { 
  width: 10px; 
  background-color: transparent;
}
.weekListScroll.scroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3); 
    border-radius: 10px;
}
.weekListScroll.scroll::-webkit-scrollbar-thumb {
background-clip: padding-box;
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.5);
    background-color: white; 
}

.contents_list li{
  list-style: none;
  margin-left:0;12px;
  padding-left: 0;
  width: 424px; 100%;
  height:56px;
  display: flex;
  white-space:nowrap;
  background-color: transparent;
}
.contentItem{
  position: relative;/*absolute: 스크롤 안 됨!!!*/
  width: 100%;
  height: 56px;
  background-image: url('../img/05_cms/in_box02_off.png');
  background-size: 407.5px 55px;
  background-repeat: no-repeat;
  background-position: center center;
}
.contentItem.selected{
  background-color: #fff;
  background-image: url('../img/05_cms/icon_check.png'),url('../img/05_cms/in_box02_on.png');
  background-repeat: no-repeat, no-repeat;
  background-size: 29px, 407.5px;
  background-position: 360px 15px, center center;
}

.contentTypeIcon{
  position: absolute;
  top:0; left:0;
  width: 60px; height: 56px;
  /*color: #f7f7f7; font-size: 8px; line-height: 56px;*/  
  background-image: url('../img/05_cms/in_icon_html_on.png');
  background-repeat: no-repeat;
  background-size: 34px 34px;
  background-position: center center;   
}
.contentTypeIcon.HTML{background-image: url('../img/05_cms/in_icon_html_on.png');}
.contentTypeIcon.SWF{background-image: url('../img/05_cms/in_icon_swf_on.png');}
.contentTypeIcon.MP4{background-image: url('../img/05_cms/in_icon_mp4_on.png');}
.contentTypeIcon.MP3{background-image: url('../img/05_cms/in_icon_mp3_on.png');}
.contentTypeIcon.PDF{background-image: url('../img/05_cms/in_icon_pdf_on.png');}
.contentTypeIcon.IMG,
.contentTypeIcon.JPG,
.contentTypeIcon.PNG{background-image: url('../img/05_cms/in_icon_jpg_on.png');}
.contentTypeIcon.ICOK{background-image: url('../img/05_cms/in_icon_html_on.png');}
.contentTypeIcon.TCOK{background-image: url('../img/05_cms/in_icon_swf_on.png');}
.contentTypeIcon.COKTIP{background-image: url('../img/05_cms/in_icon_CokTip_on.png');}
.contentTypeIcon.COKTIPDATA{background-image: url('../img/05_cms/in_icon_CokTipData_on.png');}

/*.contentTypeIcon.GROUP::before{
  content: '협동';
  position: absolute;
  width: 100%; height: 100%;
  font-size:12px;
  text-align: center;
}*/
.contentTypeIcon.GROUP{background-image: none;}
.contentTypeIcon.GROUP::before{
  content: '';
  position: absolute;
  width: 100%; height: 100%;
  font-size:12px;
  text-align: center;
  background-image:url(../img/05_cms/in_icon_coop_on.png);
  background-position: center center;15px 5px;
  background-repeat: no-repeat;
  background-size: 34px 34px;
}

/* thumbnail 아이콘 */
.contentThumbnail{ 
  position: absolute;
  top:8px;3px; left: 55px;
  font-size: 11px;
  line-height: 11px;
}
.contentThumbnail  img{
  width: 60px;75px; height: 40px;50px;
  border: 0px solid red;
  border-radius: 7px 0;
}

/* 페이지 번호*/
.contentInfo{ 
  position: absolute;
  top:10px; left: 123px;135px;61px;
  font-size: 11px;
  line-height: 11px;
}
/* 컨텐츠 제목 */
.contentTitle{ 
  position: absolute;
  top:22.5px; left: 126px;138px;61px;
  font-size: 16px;
  line-height: 16px;
}

/*history*/
.contentTitle.viewed{
  scolor: #999;
  background-image: url(../img/icon_viewed.png);
  background-position:  top right;
  background-size: 15px;
  padding-right:20px;
  background-repeat: no-repeat;  
  filter: opacity(0.5);
}
.contentTitle.sent{
  scolor: #aaa;
  background-image: url(https://cdn1.iconfinder.com/data/icons/science-technology-outline-24-px/24/Body_organ_eye_optical_view_visual-512.png);
  background-image: url(../img/icon_sent.png);
  background-position:  top right;
  background-size: 15px;
  padding-right:20px;
  background-repeat: no-repeat;  
  filter: opacity(0.5);
}

#ftp_file_preview{
  display:none;
  position:absolute;
  top:50px;left:-357px;
  border:1px dotted white; 
  width:357px; height:233px; 
  background-size:contain;
  background: none top left no-repeat;
}
#ftp_file_preview.leftHand{left:475px;}

#webview{
  display: none;
  background-color: transparent;
}

/* handout*/
#popupHandoutListWindow{
  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); 
}
#handoutListWindow{
  pointer-events: all;
  position: absolute;
  top:0px;left:110px;
  width:1700px; height:1080px;
  background-color: #e6e6e6;
}
#handoutListTitle{
  border:0px solid red;
  position: fixed;
  top:0;
  width:1700px;height: 100px;
}
button#handoutListDelete{
  position: absolute;
  top: 20.5px; left: 1394px;
  width:154.5px; height:66px;
  background-image: url('../img/05_cms/worksheet/icon_exit_off.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 154.5px 66px;
}
button#handoutListDelete.on{
  background-image: url('../img/05_cms/worksheet/icon_exit_on.png');
}
button#handoutListSelectAll{
  position: absolute;
  top: 20.5px; left: 1236.5px;
  width:154.5px; height:66px;
  background-image: url('../img/05_cms/worksheet/icon_AllSelect_off.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 154.5px 66px; 
}
button#handoutListSelectAll.on{
  background-image: url('../img/05_cms/worksheet/icon_AllSelect_on.png');
}
button#handoutListUp{
  position: absolute;
  top: 20.5px; left: 1555px;
  width:66px; height:66px;
  background-image: url('../img/05_cms/worksheet/icon_PgUp_off.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 66px 66px; 
}
button#handoutListUp.on{
  background-image: url('../img/05_cms/worksheet/icon_PgUp_on.png');
}
button#handoutListDown{
  position: absolute;
  top: 20.5px; left: 1619.5px;
  width:66px; height:66px;
  background-image: url('../img/05_cms/worksheet/icon_PgDn_off.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 66px 66px;   
}
button#handoutListDown.on{
  background-image: url('../img/05_cms/worksheet/icon_PgDn_on.png');
}

#handoutList {
  position: absolute;
  top:107px; left:0;
  padding-left: 181px;
  border:0px solid red;
  width: 1510px; height: 955px;
  overflow-y: auto;
}
#handoutList.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
 */
#handoutList.scroll::-webkit-scrollbar { 
  width: 24px; 
  background-color: transparent;
}
#handoutList.scroll::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    border-radius: 10px;
}
#handoutList.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; 
}

.handout{
  float: left;
  margin-right:61px;
  border:0px solid red;
  width: 404px; height: 318px;
  background-color: rgba(0,255,0,0);
}
.handout .previewCover{
  position: relative;
  top:-262px; left:0;
  background-color: transparent;
  width: 404px; height: 262px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 117.5px 79.5px;    
}
.handout .preview{  
  background-color: #fff;
  width: 404px; height: 262px;
  background-image: url('../img/05_cms/worksheet/img_loading.gif');
  background-position: center center;
}
.previewCover.selected{
  background-color: rgba(0,0,0,0.2);
  width: 404px; height: 262px;  
  background-image: url('../img/05_cms/worksheet/content_check.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 117.5px 79.5px;  
}

.handout .title{
  position: relative;
  top:-262px; left:0;
  font-family: 'Jua', sans-serif;
  font-size: 15px;
  line-height: 35px;
  width: 400px; height: 35px;
}

.padding{
  border:0px solid red;
  height: 55.5px;
  padding-top:15px;
}