/*
 * 자료실팝업창 
 */

#cmsBox{
  display: none;
  z-index: 10;
/*
  position:absolute;
  top:0px;left:0px;
  top:50%; left: 50%;
  transform: translate(-50%, -50%);
*/
  position: fixed;
  top: 0; left: 0;
  width:1920px;height:1080px;
  width:1280px;height:800px;
  background-color: rgba(0,0,0,0.5); 
  width:100%; height:100%;
}
#cmsBox > div{
  position:absolute;
  top: 83px;
  left: 61px;
  width: 1158px;
  height: 635px;
  background: transparent url('../img/cms/03_main/03_contents/03_3_box01.png') 0% 0% no-repeat padding-box;
  opacity: 1;
} 

#titleCmsBox{
  position: absolute;
  top: 17px; left: 499px;
  width: 136px; height: 36px;

text-align: center;
font: normal normal 800 20px/36px NanumGothic;
letter-spacing: 0px;
color: #000000;
background: transparent url('../img/cms/03_main/03_contents/03_3_box_icon.png') 0% 0% no-repeat padding-box;
opacity: 1;
}
#titleCmsBox::first-letter{
   margin-left: 20px;
}

#btnCloseCmsBox{
  position: absolute;
  top: 15px;20px; right: 20px;
  width: 36px; height: 36px;
  border-radius: 50%;

  width: 41px;21px; height: 41px;21px;
  background-image: url(../img/cms/07_exit/icon_exit.png);
  sbackground-image: none;
  background-color: #fff;
  border-radius: 5px;50%;  
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px;
  border: none;

}

.txtCmsBoxLabel{
position: absolute;
  top: 73px;156px;
  left: 105px;
  width: 60px;
  height: 19px;
  text-align: left;
  font: normal normal 800 16px/19px NanumGothic;
  letter-spacing: 0px;
  color: #000000;
  opacity: 1;
}
#txtCmsBoxLabelCategory{
  left: 44px;105px;
width: 80px;
height: 19px;}
#txtCmsBoxLabelAge{
  left: 225px;286px;
width: 150px;
height: 19px;}
#txtCmsBoxLabelMonth{
  left: 381px;225px;286px;
width: 50px;
height: 19px;}
#txtCmsBoxLabelWeek{
left: 531px;447px;
width: 50px;
height: 19px;}

.btnCmsBoxSelect{
  position: absolute;
top: 103px;186px;
left: 106px;
width: 144px;
height: 55px;
background: transparent url('../img/cms/03_main/03_contents/03_3_box03.png') 0% 0% no-repeat padding-box;
opacity: 1;  
text-align: center;
font: normal normal 800 21px/24px NanumGothic;
letter-spacing: 0px;
color: #000000;
opacity: 1;
}
.btnCmsBoxSelect.on2{color:red;}
#btnCmsBoxSelectCategory{
  left: 45px;106px;
width: 144px;
height: 55px;
background: transparent url('../img/cms/03_main/03_contents/03_3_box03.png') 0% 0% no-repeat padding-box;
background: url('../img/cms/03_main/03_contents/03_3_icon_class_01.png') 16px 6px no-repeat padding-box,
      url('../img/cms/03_main/03_contents/03_3_box03.png') 0% 0% no-repeat padding-box;
background-position:  16px 6px,  0% 0% ;
background-repeat: no-repeat, no-repeat;
}
#btnCmsBoxSelectAge{
  left: 225px;286px;
width: 121px;
height: 55px;
background: transparent url('../img/cms/03_main/03_contents/03_3_box04.png') 0% 0% no-repeat padding-box;
}
#btnCmsBoxSelectMonth{
  left: 382px;225px;286px;
width: 121px;
height: 55px;
background: transparent url('../img/cms/03_main/03_contents/03_3_box04.png') 0% 0% no-repeat padding-box;
}
#btnCmsBoxSelectWeek{
  left: 532px;443px;
width: 121px;
height: 55px;
background: transparent url('../img/cms/03_main/03_contents/03_3_box04.png') 0% 0% no-repeat padding-box;
}

.popCmsBoxSelect{sdisplay: none;}
#popCmsBoxSelectCategory{
  display: flex;
  flex-wrap: wrap;
  position: absolute;
top: 158px;241px;
left: 28px;89px;
width: 366px;
height: 379px;
background: transparent url('../img/cms/03_main/03_contents/03_3_box05.png') 0% 0% no-repeat padding-box;
opacity: 1;  
}

#popCmsBoxSelectCategory > div { padding: 30px; }
.cmsBoxSelectCategory{
  width: 81px;
height: 44px;
background: transparent url('../img/cms/03_main/03_contents/03_3_icon_class_01.png') 0% 0% no-repeat padding-box;
opacity: 1;
margin: 8.5px;
}

#popCmsBoxSelectAge{
  sdisplay: none;
  position: absolute;
  top: 158px;241px;
left: 214px;434px;
width: 173px;
height: 379px;
background: transparent url('../img/cms/03_main/03_contents/03_3_box06.png') 0% 0% no-repeat padding-box;
opacity: 1;
}
#popCmsBoxSelectAge > div { padding: 30px; }

.cmsBoxSelectAge{
margin: 27.5px 10.5px;

width: 100px;64px;
height: 25px;
text-align: center;
font: normal normal 800 22px/25px NanumGothic;
letter-spacing: 0px;
color: #000000;
}


#popCmsBoxSelectMonth{
  display: flex;
  flex-wrap: wrap;
  position: absolute;
top: 158px;241px;
left: 373px;275px;
width: 366px;
height: 379px;
background: transparent url('../img/cms/03_main/03_contents/03_3_box05.png') 0% 0% no-repeat padding-box;
opacity: 1;  
}
#popCmsBoxSelectMonth > div { padding: 30px; }

.cmsBoxSelectMonth{
margin: 27.5px 17.5px;

width: 64px;
height: 25px;
text-align: center;
font: normal normal 800 22px/25px NanumGothic;
letter-spacing: 0px;
color: #000000;
}


#popCmsBoxSelectWeek{
  sdisplay: none;
  position: absolute;
  top: 158px;241px;
left: 513px;373px;434px;
width: 173px;
height: 379px;
background: transparent url('../img/cms/03_main/03_contents/03_3_box06.png') 0% 0% no-repeat padding-box;
opacity: 1;
}
#popCmsBoxSelectWeek > div { padding: 30px; }

.cmsBoxSelectWeek{
margin: 27.5px 17.5px;

width: 64px;
height: 25px;
text-align: center;
font: normal normal 800 22px/25px NanumGothic;
letter-spacing: 0px;
color: #000000;
}

.btnCmsBox{
  position: absolute;
top: 106px;189px;
left: 754px;
width: 133px;
height: 49px;
background: transparent url('../img/cms/03_main/03_contents/03_3_icon_select_off.png') 0% 0% no-repeat padding-box;
opacity: 1;  
text-align: center;
font: normal normal bold 16px/19px NanumGothic;
letter-spacing: 0px;
color: #fff;
}


#btnCmsBoxSelectAll{
left: 693px;754px;
width: 133px;
height: 49px;
background: transparent url('../img/cms/03_main/03_contents/03_3_icon_select_on.png') 0% 0% no-repeat padding-box;
opacity: 1;}
#btnCmsBoxUnselect{
  left: 836px;897px;
width: 133px;
height: 49px;
background: transparent url('../img/cms/03_main/03_contents/03_3_icon_cancel_on.png') 0% 0% no-repeat padding-box;
opacity: 1;}
#btnCmsBoxOpen{
  left: 979px;1040px;
width: 133px;
height: 49px;
background: transparent url('../img/cms/03_main/03_contents/03_3_icon_open_on.png') 0% 0% no-repeat padding-box;
opacity: 1;}
#btnCmsBoxSelectAll::first-letter,
#btnCmsBoxUnselect::first-letter{
   margin-left: 15px;
}

#cmsBoxContentsWrapper{
  position: absolute;
  top: 169px;252px;
  left: 9px;70px;
  width: 1138px;
  height: 454px;
  background: transparent url('../img/cms/03_main/03_contents/03_3_box02.png') 0% 0% no-repeat padding-box;
  opacity: 1;
}

#cmsBoxContents{
  position: absolute;
  top: 10px; left: 10px;
  width: 1118px; height: 434px;
  overflow-y: scroll;
  display: flex;
  flex-wrap: wrap;
}

.cmsContent{
  width: 235px; height: 187px;
  margin: 15px 18.5px;
}
.cmsContent.selected{

}

.cmsContentPreview{
  width: 232px;
  height: 151px;
  background-color: rgba(0,0,0,0.1);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.cmsContent.selected > .cmsContentPreview{
  width: 232px;
  height: 151px;
  sbackground: transparent url('../img/cms/03_main/03_contents/03_3_select.png') center center no-repeat padding-box;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.cmsContent.selected > .cmsContentPreview::after{
  position: relative;
  display:block;
  top: 0; left: 0;
  width: 232px;
  height: 151px;
  content: " ";
  background-image: url('../img/cms/03_main/03_contents/03_3_select.png');
  background-color: rgba(0,0,0,0.5);
  background-position: center center;
  background-repeat: no-repeat;
}
.cmsContentTitle{
  width: 232px;
  height: 36px;
  background-color: rgba(255,255,0,0.5);  
  background: transparent url('../img/cms/03_main/03_contents/03_contents_jpg.png') 3px 3px no-repeat padding-box;
  background-size: 28px 28px;

  font: normal normal normal 17px/36px NanumGothic;
letter-spacing: 0px;
color: #707070;
overflow: hidden;
}
.cmsContentTitle::first-letter {
   margin-left: 36px;
}

.cmsContent.selected > .cmsContentTitle{ color:#000; font-weight: bold; }

.cmsContentTitle.HTML{background-image: url('../img/cms/03_main/03_contents/03_contents_icok.png');}
.cmsContentTitle.SWF{background-image: url('../img/cms/03_main/03_contents/03_contents_jpg.png');}
.cmsContentTitle.MP4{background-image: url('../img/cms/03_main/03_contents/03_contents_jpg.png');}
.cmsContentTitle.MP3{background-image: url('../img/cms/03_main/03_contents/03_contents_mp3.png');}
.cmsContentTitle.PDF{background-image: url('../img/cms/03_main/03_contents/03_contents_pdf.png');}
.cmsContentTitle.IMG,
.cmsContentTitle.JPG,
.cmsContentTitle.PNG{background-image: url('../img/cms/03_main/03_contents/03_contents_jpg.png');}
.cmsContentTitle.ICOK{background-image: url('../img/cms/03_main/03_contents/03_contents_icok.png');}
.cmsContentTitle.TCOK{background-image: url('../img/cms/03_main/03_contents/03_contents_tcok.png');}
.cmsContentTitle.COKTIP{background-image: url('../img/cms/03_main/03_contents/03_contents_coktip.png');}

#popupCMSWindow{
  display: none;
  pointer-events: none;
  position:absolute;
  top:0px;left:0px;
  top:50%; left: 50%;
  transform: translate(-50%, -50%);
  width:1920px;height:1080px;
  width:1280px;height:800px;
  background-color: rgba(0,0,0,0); 
}

#popupCMSWindowWrapper{
  pointer-events: auto;
  position: absolute;
  top: 80px; 1440px; right: 120px;
  width: 472px; height: 676px;
  overflow: visible;
}
#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: bottom 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);
}

#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;
 
}
.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%);
}

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

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

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

#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;
  position:absolute;
  top:0px;left:0px;
  top:50%; left: 50%;
  transform: translate(-50%, -50%);
  width:1920px;height:1080px;
  width:1280px;height:800px;
  background-color: #E6E6E6;rgba(0,0,0,0); 
}
#handoutListWindow{
  position: absolute;
  top:120px;0;left:44px;110px;
  width:1700px; height:1080px;
  width:1192px;height:660px;800px;
  background-color: #e6e6e6;
}
#handoutListTitle{
  position: fixed;
  top:0;
  width:1700px;height: 100px;
  width:1280px;height: 100px;
background-color: transparent;  
}
#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;
top: 58px;
left: 649px;
width: 140px;
height: 55px;
}
button#handoutListDelete.on{
  background-image: url('../img/05_cms/worksheet/icon_exit_on.png');
}
#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; 
top: 58px;
left: 351px;
width: 140px;
height: 55px;
}
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; 
top: 58px;
left: 807px;
width: 55px;
height: 55px;
}
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; 
top: 58px;
left: 874px;
width: 55px;
height: 55px;    
}
button#handoutListDown.on{
  background-image: url('../img/05_cms/worksheet/icon_PgDn_on.png');
}

#handoutList {
  position: absolute;
  top:0;107px; left:0;
  padding-left: 0;181px;
  border:0px solid red;
  width: 1510px; height: 955px;
display: flex;
flex-wrap: wrap;  
border: 1px solid red;
width:1192px;height:660px;800px;
  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: 7px; 14px;24px; 
  background-color: transparent;
  background-color: rgba(255,255,255,0.1);
}
#handoutList.scroll::-webkit-scrollbar-track {
    s-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
    sborder-radius: 6px;
    sbackground-color: rgba(0,0,0,0.1);
}
#handoutList.scroll::-webkit-scrollbar-thumb {
background-clip: padding-box;
    sborder-radius: 6px;
    s-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
    background-color: white; 
    background-color: rgba(255,255,255,0.8);
    border-radius: 6px;
}

.handout{
  sfloat: left;
  margin-right:30px;61px;
  margin: 15px 25px;
  border:0px solid red;
  width: 404px; height: 318px;
  width: 335px; height: 254px;
  background-color: rgba(0,255,0,0);
}
.handout.checked .previewCover{
  background-color: rgba(0,0,0,0.2);
  width: 404px; height: 262px;  
  width: 335px; height: 218px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 117.5px 79.5px;  
  background-image: url('../img/cms/03_main/03_contents/03_3_select.png');
}
.handout .previewCover{
  position: relative;
  top:-218px;-262px; left:0;
  background-color: transparent;
  width: 404px; height: 262px;
  width: 335px; height: 218px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 117.5px 79.5px;    
}
.handout .preview{  
  background-color: #fff;
  width: 404px; height: 262px;
  width: 335px; height: 218px;
  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;  
  width: 335px; height: 218px;
  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:-218px; left:0;
  font-family: 'Jua', sans-serif;
  font-size: 15px;
  line-height: 35px;
  width: 400px; height: 35px;
  width: 335px; 
font: normal normal normal 17px/35px NanumGothic;
letter-spacing: 0px;
color: #707070;

  height: 36px;
  background-color: rgba(255,255,0,0.5);  
  background: transparent url('../img/cms/03_main/03_contents/03_contents_jpg.png') 3px 3px no-repeat padding-box;
  background-size: 28px 28px;

  font: normal normal normal 17px/36px NanumGothic;
letter-spacing: 0px;
color: #707070;
overflow: hidden;

}
.handout .title::first-letter{
   margin-left: 36px;
}

.title.selected{ color:#000; font-weight: bold; }

.handout .title.HTML{background-image: url('../img/cms/in_icon_html_on.png');}
.handout .title.SWF{background-image: url('../img/cms/in_icon_swf_on.png');}
.handout .title.MP4{background-image: url('../img/cms/in_icon_mp4_on.png');}
.handout .title.MP3{background-image: url('../img/cms/in_icon_mp3_on.png');}
.handout .title.PDF{background-image: url('../img/cms/in_icon_pdf_on.png');}
.handout .title.IMG,
.handout .title.JPG,
.handout .title.PNG{background-image: url('../img/cms/in_icon_jpg_on.png');}
.handout .title.ICOK{background-image: url('../img/cms/in_icon_html_on.png');}
.handout .title.TCOK{background-image: url('../img/cms/in_icon_swf_on.png');}
.handout .title.COKTIP{background-image: url('../img/cms/in_icon_CokTip_on.png');}

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