/*
 * 만2세 자료실팝업창 
 */

#cmsBoxAge2{
  display: 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.5); 
}

/*#cmsBoxAge2 > div*/
#cmsAge2Folder{
  position:absolute;
  top: 0px;
  left: 110px;
  width: 1700px;
  height: 1050px;
top: 114px;
left: 631px;
width: 1168px;
height: 720px;

  background: transparent url('../img/skin_age2/cms/popup_subject.webp') 0% 0% no-repeat padding-box; 
  opacity: 1;
  background-size: contain;
}  
#btnBackCmsBoxAge2{
  position: absolute;
  top: 65px;
  left: 37px;
  width: 35px;
  height: 35px;
  background-image: url(../img/skin_age2/cms/icon_back.png);
  background-repeat: no-repeat;
  background-position: center;  
  background-size: contain;
}

#btnClosecmsBoxAge2Folder{
  position: absolute;
  top: 80px;
  left: 1090px;
  width: 35px;
  height: 35px;
  background-image: url(../img/skin_age2/cms/btn_close.png);
  background-repeat: no-repeat;
  background-position: center;  
}

.subjectAge2{
  position: absolute;
  top: 118px;
  width: 284px;
  height: 284px;
  sbackground-image: url(../img/skin_age2/cms/icon_sub_01.webp);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
} 
.subjectAge2:active{transform: translateY(5px);}

.subjectAge2[data-seq="0"]{left: 47px;background-image: url(../img/skin_age2/cms/icon_sub_01.webp);}  
.subjectAge2[data-seq="1"]{left: 310px;background-image: url(../img/skin_age2/cms/icon_sub_02.webp);} 
.subjectAge2[data-seq="2"]{left: 573px;background-image: url(../img/skin_age2/cms/icon_sub_03.webp);} 
.subjectAge2[data-seq="3"]{left: 836px;background-image: url(../img/skin_age2/cms/icon_sub_04.webp);}  
.subjectAge2[data-seq="4"]{top: 402px;left: 177px;background-image: url(../img/skin_age2/cms/icon_sub_05.webp);}  
.subjectAge2[data-seq="5"]{top: 402px;left: 442px;background-image: url(../img/skin_age2/cms/icon_sub_06.webp);}  
.subjectAge2[data-seq="6"]{top: 402px;left: 707px;background-image: url(../img/skin_age2/cms/icon_sub_07.webp);} 


/*#cmsBoxAge2 > div*/
#cmsAge2Content{
  display: none;
  position: absolute;
  top: 140px;
  left: 600px;
  width: 1168px;
  height: 720px;
  background-image: url('../img/skin_age2/cms/popup.png');
  background-position: center center;
  background-repeat: no-repeat;
} 


#titleCmsBoxAge2{
  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;
  opacity: 1;
}

#titleCmsBoxAge2::first-letter{
   margin-left: 20px;
}

#btnClosecmsBoxAge2{
  position: absolute;
  top: 63px;
  left: 1105px;
  width: 35px;
  height: 35px;
  background-image: url(../img/skin_age2/cms/btn_close.png);
  background-repeat: no-repeat;
  background-position: center;
}

.txtCmsBoxAge2Label{
  position: absolute;
  top: 130px;
  left: 294px;
  width: 67px;
  height: 28px;
  background-image: url(../img/skin_age2/cms/txt_age.png);
  background-repeat: no-repeat;
  background-position: center;  
}
#txtCmsBoxAge2LabelCategory{
  top: 130px;left: 84px;
  width: 106px;height: 28px;
  background-image: url(../img/skin_age2/cms/txt_subject.png);}
#txtCmsBoxAge2LabelMonth{
  top: 130px;left: 586px;
  width: 65px;height: 28px;
  background-image: url(../img/skin_age2/cms/txt_month.png);}

#txtCmsBoxAge2LabelWeek{left: 381px;447px;width: 50px;height: 19px;}


.btnCmsBoxAge2Select{
  position: absolute;
  top: 165px;
  left: 222px;
  width: 210px;
  height: 62px;  
  
  background: transparent url('../img4pad/03_main/03_contents/03_3_box03.png') 0% 0% no-repeat padding-box;
  text-align: left;
  font: normal normal 800 21px/24px NanumGothic;
  letter-spacing: 0px;
  color: #000000;
}
.btnCmsBoxAge2Select::first-letter{margin-left: 15px;}

.btnCmsBoxAge2Select.on2{scolor:red;}

/*
#btnCmsBoxAge2SelectCategory{
  top: 165px;
  left: 69px;
  width: 136px;
  height: 62px;
  sbackground: transparent url('../img/skin_age2/cms/select_subject.png') 0% 0% no-repeat padding-box;
  background-image: url('../img/skin_age2/cms/sub_01.png');  
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}
*/

#btnCmsBoxAge2SelectCategory{
  top: 165px;
  left: 69px;
  width: 136px;
  height: 62px;
  background-image: url('../img/skin_age2/cms/sub_01.png');  
  background-repeat: no-repeat;
  background-position: 7px 7px;
  background-size: 98px 49px;
  background-color: #E4EDEF;
  border-radius: 20px;
}

#btnCmsBoxAge2SelectCategory::before{
  content:'';
  position: absolute;
  top: 0;left: 0;width: 100%; height: 100%;

top: 28px;left: 110px;
width: 17px;height: 9px;
stransform: matrix(-1, 0, 0, -1, 0, 0);
sbackground: #CECECE 0% 0% no-repeat padding-box;
background-image: url('../img/btn_prev_off.png');
background-size: contain;  
background-repeat: no-repeat;
}

#btnCmsBoxAge2SelectAge{
  top: 165px;
  left: 222px;
  width: 210px;
  height: 62px; 
  background: transparent url('../img/skin_age2/cms/select_age.png') 0% 0% no-repeat padding-box;
}
#btnCmsBoxAge2SelectAge::before{
  content:'';
  position: absolute;
  top: 0;left: 0;width: 100%; height: 100%;

top: 28px;left: 183px;
width: 17px;height: 9px;
stransform: matrix(-1, 0, 0, -1, 0, 0);
sbackground: #CECECE 0% 0% no-repeat padding-box;
background-image: url('../img/btn_prev_off.png');
background-size: contain;  
background-repeat: no-repeat;
}

#btnCmsBoxAge2SelectMonth{
  top: 165px;
  left: 449px;
  width: 339px;
  height: 62px; 
  background: transparent url('../img/skin_age2/cms/select_month.png') 0% 0% no-repeat padding-box;
}
#btnCmsBoxAge2SelectMonth::before{
  content:'';
  position: absolute;
  top: 0;left: 0;width: 100%; height: 100%;

top: 26px;left: 310px;
width: 17px;height: 9px;
stransform: matrix(-1, 0, 0, -1, 0, 0);
sbackground: #CECECE 0% 0% no-repeat padding-box;
background-image: url('../img/btn_prev_off.png');
background-size: contain;  
background-repeat: no-repeat;
}

#btnCmsBoxAge2SelectWeek{
  left: 1582px;443px;
  width: 121px;
  height: 55px;
  background: transparent url('../img4pad/03_main/03_contents/03_3_box04.png') 0% 0% no-repeat padding-box;
}

#popCmsBoxAge2SelectWrapper{display: none;
  position: absolute;
  top: 0;left: 0;width: 100%;height: 100%;
  background-color: rgba(125, 0, 0, .0);
}
.popCmsBoxAge2Select{sdisplay: none;}

#popCmsBoxAge2SelectCategory{
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  top: 228px;158px;241px;
  left: 69px;48px;89px;
  width: 136px;155px;196px;
  height: 509px;
  sbackground: transparent url('../img4pad/03_main/03_contents/03_3_box05.png') 0% 0% no-repeat padding-box;
  opacity: 1;  
  
  background-color: #fff;
  border-radius: 25px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

#popCmsBoxAge2SelectCategory > div { padding: 20px; }
.cmsBoxAge2SelectCategory{
  width: 98px;140px;
  height: 49px;62px;
  background-image: url('../img/skin_age2/cms/sub_01.webp');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 98px 49px;contain;
  margin: 8.5px 0;
}
.cmsBoxAge2SelectCategory.selected{transform: scale(1.2);}


#popCmsBoxAge2SelectAge{
  sdisplay: flex;
  sflex-wrap: wrap;
  position: absolute;
  top: 228px;158px;241px;
  left: 222px;220px;275px;
  width: 210px;213px;
  height: 279px;
  sbackground: transparent url('../img4pad/03_main/03_contents/03_3_box06.png') 0% 0% no-repeat padding-box;
  background-size: 233px 379px;

  background-color: #fff;
  border-radius: 25px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
#popCmsBoxAge2SelectAge > div { padding: 30px; }

.cmsBoxAge2SelectAge{
  margin: 10px 1.5px;
  width: 122px;
  height: 25px;
  text-align: left;
  font: normal normal 800 21px/24px NanumGothic;
  letter-spacing: 0px;
  color: #000000;
}
.cmsBoxAge2SelectAge.selected{color: red;}

#popCmsBoxAge2SelectMonth{
  display: flex;
  flex-wrap: wrap;
  position: absolute;
  top: 228px;158px;241px;
  left: 449px;434px;275px;
  width: 339px;366px;
  height: 579px;
  sbackground: transparent url('../img4pad/03_main/03_contents/03_3_box05.png') 0% 0% no-repeat padding-box;
  opacity: 1;  

  background-color: #fff;
  border-radius: 25px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
#popCmsBoxAge2SelectMonth > div { padding: 30px; }

.cmsBoxAge2SelectMonth{
  margin: 10px 17.5px;
  width: 366px;
  height: 25px;
  text-align: left;
  font: normal normal 800 21px/24px NanumGothic;
  letter-spacing: 0px;
  color: #000000;
}
.cmsBoxAge2SelectMonth.selected{color: red;}

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

.cmsBoxAge2SelectWeek{
  margin: 27.5px 17.5px;

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

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


#btnCmsBoxAge2SelectAll{
  top: 130px;
  left: 811px;
  width: 125px;
  height: 45px; 
  background: transparent url('../img/skin_age2/cms/btn_all.png') 0% 0% no-repeat padding-box;}
#btnCmsBoxAge2SelectAll:active{background-image: url('../img/skin_age2/cms/btn_all_push.png') }
#btnCmsBoxAge2Unselect{
  top: 182px;
  left: 811px;
  width: 125px;
  height: 45px;
  
  background: transparent url('../img/skin_age2/cms/btn_cancel.png') 0% 0% no-repeat padding-box;
  opacity: 1;}
#btnCmsBoxAge2Unselect:active{background-image: url('../img/skin_age2/cms/btn_cancel_push.png') }
#btnCmsBoxAge2Open{
  top: 130px;
  left: 949px;
  width: 151px;
  height: 97px;
  background: transparent url('../img/skin_age2/cms/btn_open.png') 0% 0% no-repeat padding-box;
  opacity: 1;  
}
#btnCmsBoxAge2Open:active{background-image: url('../img/skin_age2/cms/btn_open_push.png') }
#btnCmsBoxAge2SelectAll::first-letter,
#btnCmsBoxAge2Unselect::first-letter{
   margin-left: 15px;
}

#cmsBoxAge2ContentsWrapper{
  border:0px solid red;
  position: absolute;
  top: 252px;left: 15px;
  width: 1137px;height: 454px;  
  background: transparent url('../img/skin_age2/cms/popup_list_box.png') 0% 0% no-repeat padding-box;
  opacity: 1;
}

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

#cmsBoxAge2Contents {
  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
 */
#cmsBoxAge2Contents::-webkit-scrollbar { 
  width: 10px; 
  background-color: transparent;
}
#cmsBoxAge2Contents::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,0.3); 
    border-radius: 10px;
}
#cmsBoxAge2Contents::-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; 
}

.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('../img4pad/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('../img4pad/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('../img4pad/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('../img4pad/03_main/03_contents/03_contents_icok.png');}
.cmsContentTitle.SWF{background-image: url('../img4pad/03_main/03_contents/03_contents_jpg.png');}
.cmsContentTitle.MP4{background-image: url('../img4pad/03_main/03_contents/03_contents_jpg.png');}
.cmsContentTitle.MP3{background-image: url('../img4pad/03_main/03_contents/03_contents_mp3.png');}
.cmsContentTitle.PDF{background-image: url('../img4pad/03_main/03_contents/03_contents_pdf.png');}
.cmsContentTitle.IMG,
.cmsContentTitle.JPG,
.cmsContentTitle.PNG{background-image: url('../img4pad/03_main/03_contents/03_contents_jpg.png');}
.cmsContentTitle.ICOK{background-image: url('../img4pad/03_main/03_contents/03_contents_icok.png');}
.cmsContentTitle.TCOK{background-image: url('../img4pad/03_main/03_contents/03_contents_tcok.png');}
.cmsContentTitle.COKTIP{background-image: url('../img4pad/03_main/03_contents/03_contents_coktip.png');}