/* color */
.color1{color: #9433ff!important;}
.color2{color: #1375d1!important;}
.color3{color: #006e46!important;}
.color4{color: #cb5500!important;}
.color5{color: #e7068b!important;}

/* align */
.alignCenter{text-align: center;}
.alignLeft{text-align: left;}
.alignRight{text-align: right;}


/* checkBox */
.checkBox1 input[type=checkbox]{display: none;}
.checkBox1 label .customChkBox{display: inline-block; width: 16px; height: 16px; border: 1px solid #d2d2d2; border-radius: 2px;  box-sizing: border-box;  vertical-align: middle; margin-right: 8px; line-height: 1.2em;}
.checkBox1 label .customChkBox img{width: 100%; height: 100%; display: none;}
.checkBox1 input[type=checkbox]:checked + label .customChkBox{border: none;}
.checkBox1 input[type=checkbox]:checked + label .customChkBox img{display: inline-block;}
.checkBox1 label{font-size: 1rem; color: #484848; font-family: PretendardL, sans-serif; margin-left: 4px;}
.checkBox2 input[type=checkbox]{display: none;}
.checkBox2 label .customChkBox{display: inline-block; width: 14px; height: 14px; border: 1px solid #d2d2d2; border-radius: 2px;  box-sizing: border-box;  vertical-align: top; margin-right: 4px; line-height: 1.2em;}
.checkBox2 label .customChkBox img{width: 100%; height: 100%; display: none;}
.checkBox2 input[type=checkbox]:checked + label .customChkBox{border: none;}
.checkBox2 input[type=checkbox]:checked + label .customChkBox img{display: inline-block;}
.checkBox2 label{font-size: 1rem; color: #767676; font-family: PretendardL, sans-serif; margin-left: 4px;}
.checkBox2 label .title{display: inline-block; max-width: calc(100% - 45px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.checkBox2 label .count{color: #939393; margin-left: 4px; vertical-align: top;}

/* inputTextType */
.inputTextType1{position: relative; margin-bottom: 8px;}
.inputTextType1 input[type=text]{border: 1px solid #e4e4e4; background-color: #fff; border-radius: 4px; padding: 0 88px 0 12px; width: 100%; height: 42px; box-sizing: border-box; font-size: 1rem; color: #707070;}
.inputTextType1 a{position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 1rem; line-height: 2em;}

/* selectBox */
.customSelectBox{position: relative; width: 100%; margin-bottom: 8px;}
.customSelectBox .customSelect label{display: block; width: 100%; padding: 0 15px; box-sizing: border-box; font-size: 1rem; color: #5b5b5b; line-height: 40px; border-radius: 4px; border: 1px solid #d7d7d7; background: #ffffff; position: relative;}
.customSelectBox .customSelect label::after{content: ""; display: block; width: 12px; height: 12px; background: #ffffff url(../../../image/arrow/select.png) no-repeat center center; background-size: 12px; position: absolute; right: 12px; top: 50%; transform: translateY(-50%);}
.customSelectBox.on .customSelect label{border-color: #6435d9;}
.customSelectBox .customSelect select{display: none;}
.customSelectBox .customSelectOpt{display: none;overflow: hidden; border-radius: 4px; border: 1px solid #6435d9; position: absolute; left: 0; top: calc(100% - 1px); width: 100%; box-sizing: border-box; background-color: #ffffff; z-index: 1;}
.customSelectBox .customSelectOpt li a{display: block; width: 100%; line-height: 40px; padding: 0 15px; box-sizing: border-box; font-size: 1rem; color: #5b5b5b;}
.customSelectBox .customSelectOpt li a:hover{background-color: #f2f2f2; color: #000000;}

/* Btn */
.btnType1{display: inline-block; border-radius: 4px; padding: 6px 24px 6px 12px; color: #ffffff; font-family: PretendardM, sans-serif; font-size: 1rem; background: #4b0aec url(../../../image/arrow/right2.png) no-repeat right 12px center; background-size: 5px auto; image-rendering: -webkit-optimize-contrast;}
.btnType2{display: block; border-radius: 4px; text-align: center; color: #fff; background-color: #4b0aeb; font-size: 1.12rem; line-height: 1.2em; box-sizing: border-box; padding: 10px 20px;}
.btnType3{display: block; border-radius: 4px; text-align: center; color: #fff; background-color: #313131; font-size: 1.12rem; line-height: 1.2em; box-sizing: border-box; padding: 10px 20px;}
.btnType4{display: block; line-height: 48px; background-color: #f5f5f5; font-size: 1rem; color: #5c5c5c; text-align: center; border-radius: 6px; margin-top: 12px;}
.btnType4 img{width: 13px; vertical-align: middle; margin-left: 4px;}
.btnType4 .blackText{color: #000000;}
.btnType5{display: inline-block; border-radius: 4px; text-align: center; color: #fff; background-color: #313131; font-size: 1.12rem; line-height: 2.4em; box-sizing: border-box; padding: 0 24px;}
.btnType6{display: block; border-radius: 4px; text-align: center; color: #fff; background-color: #4b0aeb; font-size: 1.12rem; line-height: 1.2em; box-sizing: border-box; padding: 0 20px;}
.btnType7{display: inline-block; border: 1px solid #c5c5c5; border-radius: 4px; position: relative;}
.btnType7.on{border-color: #7c75ff;}
.btnType7 .btn{display: block; padding: 9px 9px 5px;}
.btnType7 img{max-width: 16px; max-height: 17px;}
.btnType7 .onImg{display: none;}
.btnType7.on .offImg{display: none;}
.btnType7.on .onImg{display: block;}
.btnType7 .addtext{position: absolute; right: 2px; top: -12px; transform: translateY(-100%); font-family: PretendardL, sans-serif; font-size: 0.87rem; color: #ffffff; padding: 8px 12px; background-color: #736bff; border-radius: 8px; white-space: nowrap; display: none;}
.btnType7.on .addtext{display: block;}
.btnType7 .addtext::after{content: ""; display: block; width: 0px; height: 0px; position: absolute; right: 0; bottom: -6px; border-top:8px solid transparent; border-bottom:8px solid transparent; border-right: 8px solid #736bff; border-left: 8px solid  none;}
.btnType7 .addtext .close img{width: 12px; margin-left: 2px; vertical-align: bottom;}
.btnType8{display: inline-block; min-width: 120px; border-radius: 6px; text-align: center; color: #fff; background-color: #4b0aeb; font-size: 1.12rem; line-height: 2.4em; box-sizing: border-box; padding: 0 24px;}
.btnType9{display: inline-block; border-radius: 4px; padding: 6px 12px 6px 24px; color: #ffffff; font-family: PretendardM, sans-serif; font-size: 1rem; background: #4b0aec url(../../../image/arrow/left5.png) no-repeat left 13px center; background-size: 5px auto; image-rendering: -webkit-optimize-contrast;}
.btnType10{display: inline-block; border: 1px solid #c5c5c5; border-radius: 4px; position: relative; padding: 6px 12px 6px 12px; color: #474747; font-family: PretendardM, sans-serif; font-size: 1rem;}

.downloadBtn{display: inline-block; border: 1px solid #c5c5c5; border-radius: 4px; padding: 6px 32px 6px 12px; color: #474747; font-family: PretendardM, sans-serif; font-size: 1rem; background: url(../../../image/icon/icon_download.png) no-repeat right 12px center; background-size: 14px auto;}
.urlBtn{display: inline-block; border: 1px solid #c5c5c5; border-radius: 4px; padding: 6px 32px 6px 12px; color: #474747; font-family: PretendardM, sans-serif; font-size: 1rem; background: url(../../../image/icon/icon_url.png) no-repeat right 12px center; background-size: 12px auto;}
.infoBtn{display: inline-block; border: 1px solid #c5c5c5; border-radius: 4px; padding: 6px 32px 6px 12px; color: #474747; font-family: PretendardM, sans-serif; font-size: 1rem; background: url(../../../image/icon/icon_info.png) no-repeat right 12px center; background-size: 14px auto;}
.reviewBtn{display: inline-block; border: 1px solid #c5c5c5; border-radius: 4px; padding: 6px 32px 6px 12px; color: #474747; font-family: PretendardM, sans-serif; font-size: 1rem; background: url(../../../image/icon/icon_memo.png) no-repeat right 12px center; background-size: 14px auto;}
.warningBtn{display: inline-block; border: 1px solid #c5c5c5; border-radius: 4px; padding: 6px 32px 6px 12px; color: #474747; font-family: PretendardM, sans-serif; font-size: 1rem; background: url(../../../image/icon/icon_warning.png) no-repeat right 12px center; background-size: 14px auto;}
.printBtn{display: inline-block; border: 1px solid #c5c5c5; border-radius: 4px; padding: 6px 32px 6px 12px; color: #474747; font-family: PretendardM, sans-serif; font-size: 1rem; background: url(../../../image/icon/icon_print.png) no-repeat right 12px center; background-size: 14px auto;}
.continueBtn{display: inline-block; border: 1px solid #c5c5c5; border-radius: 4px; padding: 6px 32px 6px 12px; color: #474747; font-family: PretendardM, sans-serif; font-size: 1rem; background: url(../../../image/icon/icon_continue.png) no-repeat right 12px center; background-size: 14px auto;}
.updateBtn{display: inline-block; font-family: PretendardL,sans-serif; font-size: 0.87rem; color: #707171; padding-left: 14px; background: url(../../../image/icon/icon_update.png) no-repeat left top 2px; background-size: 12px; line-height: 1.2em;}
.updateBtn2{display: inline-block;border: 1px solid #c5c5c5;border-radius: 4px;padding: 6px 32px 6px 12px; color: #474747;font-family: PretendardM, sans-serif;font-size: 1rem; background: #fff url(../../../image/icon/icon_update2.png) no-repeat right 12px center/14px auto; margin: 0 2px;}
.deleteBtn{display: inline-block; font-family: PretendardL,sans-serif; font-size: 0.87rem; color: #707171; padding-left: 12px; background: url(../../../image/icon/icon_delete.png) no-repeat left top 3px; background-size: 11px; line-height: 1.2em;}
.deleteBtn2{display: inline-block;border: 1px solid #c5c5c5;border-radius: 4px;padding: 6px 32px 6px 12px; color: #474747;font-family: PretendardM, sans-serif;font-size: 1rem; background: #fff url(../../../image/icon/icon_delete3.png) no-repeat right 12px center/11px auto; margin: 0 2px;}
.resetBtn{display: inline-block; border-radius: 4px; font-family: PretendardL,sans-serif; font-size: 0.87rem; color: #fff; background: #6435d9 url(../../../image/icon/icon_reset.png) no-repeat left 8px top 7px; padding: 6px 8px 6px 28px; background-size: 15px; line-height: 1.2em;}
.updateSettingBtn{display: inline-block!important; padding: 0 8px; text-align: center;}
.updateSettingBtn img{width: 4px;}
.info{display: inline-block; color: #246ab2;; font-family: PretendardM, sans-serif; font-size: 1rem; width: 2000px; text-align: right;}


@media screen and (max-width:640px){
    .btnType7 .btn{display: inline-block; padding: 8px 7px 4px;}
    .downloadBtn{padding: 6px 24px 6px 6px; background-position: right 6px center;}
    .urlBtn{padding: 6px 24px 6px 6px; background-position: right 6px center;}
    .infoBtn{padding: 6px 24px 6px 6px; background-position: right 6px center;}
    .warningBtn{padding: 6px 24px 6px 6px; background-position: right 6px center;}
    .printBtn{padding: 6px 24px 6px 6px; background-position: right 6px center;}
    .continueBtn{padding: 6px 24px 6px 6px; background-position: right 6px center;}
    .updateBtn{background-position: left top 1px;}
    .deleteBtn{background-position: left top 3px; background-size: 8px; padding-left: 10px;}
    .resetBtn{background-position: left 8px top 6px; background-size: 14px;}
    .prevBtn{padding: 6px 24px 6px 6px; background-position: right 6px center;}
    .nextBtn{padding: 6px 24px 6px 6px; background-position: right 6px center;}
}

/* textType1 */
.textType1{display: inline-block; font-size: 0.87rem; color: #049a46; background-color: #e0f3e8; padding: 2px 4px; border-radius: 2px; margin-right: 6px; margin-bottom: 6px; vertical-align: top; line-height: 1.1em; margin: 0 6px; vertical-align: text-top;}
.textType2{display: inline-block; font-size: 0.87rem; color: #736bff; background-color: #ece8f6; padding: 2px 4px; border-radius: 2px; margin-right: 6px; margin-bottom: 6px; vertical-align: top; line-height: 1.1em; margin: 0 6px; vertical-align: text-top;}
.textType3{display: inline-block; font-size: 0.95rem; color: #049a46; background-color: #e0f3e8; padding: 4px 6px; border-radius: 2px; margin-right: 6px; margin-bottom: 6px; vertical-align: top; line-height: 1.1em; margin: 4px 2px; vertical-align: text-top;}

/* tableType */
.tableType1{width: 100%; min-width: 460px;}
.tableType1{border-top: 1px solid #8c8c8c;}
.tableType1 th{height: 45px; background-color: #f5f5f5; border-right: 1px solid #dddddd; border-bottom: 1px solid #dddddd;  border-left: 1px solid #dddddd; font-size: 1.06rem; color: #222222; text-align: center; vertical-align: middle; word-break: keep-all;}
.tableType1 th:first-child{border-left: 0;}
.tableType1 th:last-child{border-right: 0;}
.tableType1 td{height: 50px; text-align: center; color: #767676; font-size: 1rem; border-right: 1px solid #dddddd; border-bottom: 1px solid #dddddd; border-left: 1px solid #dddddd; vertical-align: middle;}
.tableType1 td:first-child{border-left: 0;}
.tableType1 td:last-child{border-right: 0;}

/* sildeDownBox */
.slideDownBoxW{margin-bottom: 20px;}
.slideDownBox{margin-bottom: 8px;}
.slideDownBox a{display: block; width: 100%; padding: 0 15px; box-sizing: border-box; font-size: 1rem; color: #5b5b5b; line-height: 40px; border-radius: 4px; border: 1px solid #d7d7d7; background: #ffffff; position: relative;}
.slideDownBox a::after{content: ""; display: block; width: 12px; height: 12px; background: #ffffff url(../../../image/arrow/select.png) no-repeat center center; background-size: 12px; position: absolute; right: 12px; top: 50%; transform: translateY(-50%);}
.slideDownBox.on a{border-color: #6435d9;}
.slideDownBox .optionBox{display: none; overflow: hidden; border-radius: 4px; border: 1px solid #d7d7d7; width: 100%; box-sizing: border-box; background-color: #ffffff; z-index: 1; position: relative; top: -1px; padding: 20px 12px;}
.slideDownBox.on .optionBox{border-color: #6435d9;}
@media screen and (max-width:640px){
    .slideDownBox .optionBox{padding: 16px 12px;}
}

/* slickOptionList */
.slickOptionList{width: 100%; box-sizing: border-box;}
.slickOptionList .slick-slide li{margin-bottom: 8px;}
.slickOptionList .slick-dots{display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 8px 0 0;}
.slickOptionList .slick-dots li{margin-right: 8px; margin-bottom: 0;}
.slickOptionList .slick-dots li:last-child{ margin-right: 0px;}
.slickOptionList .slick-dots .dot{display: block; background-color: #c5d0dc; border-radius: 50%; width: 10px; height: 10px; border: none; cursor: pointer;}
.slickOptionList .slick-dots li.slick-active .dot{background-color: #2d2d2d;}
@media screen and (max-width:640px){
    .slickOptionList .slick-dots{margin: 4px 0 0;}
    .slickOptionList .slick-dots .dot{width: 8px; height: 8px;}
}

/* radioType */
.radioType1{display: inline-block; margin-bottom: 4px;}
.radioType1 input[type=radio]{display: none;}
.radioType1 label{margin-right: 16px;}
.radioType1 label .radioBtn{display: inline-block; width: 16px; height: 16px; border-radius: 50%; border: 5px solid #cccccc; background-color: #fff; box-sizing: border-box;vertical-align: bottom;}
.radioType1 input[type=radio]:checked + label{color: #6435d9;}
.radioType1 input[type=radio]:checked + label .radioBtn{border-color: #6435d9;}

.radioType2 input[type=radio]{display: none;}
.radioType2 label .customRadioBox{display: inline-block; width: 16px; height: 16px; border: 1px solid #d2d2d2; border-radius: 2px;  box-sizing: border-box;  vertical-align: middle; margin-right: 8px; line-height: 1.2em;}
.radioType2 label .customRadioBox img{width: 100%; height: 100%; display: none;}
.radioType2 input[type=radio]:checked + label .customRadioBox{border: none;}
.radioType2 input[type=radio]:checked + label .customRadioBox img{display: inline-block;}
.radioType2 label{font-size: 1rem; color: #484848; font-family: PretendardL, sans-serif; margin-left: 4px;}

/* mySearchBoxW */
.mySearchBoxW{border: 1px solid #6435d9; border-radius: 4px; overflow: hidden;}
.mySearchBoxW input[type=text]{width: calc(100% - 45px); height: 40px; border: none; padding: 12px; box-sizing: border-box; font-size: 1rem; color: #646464; font-family: Pretendard, sans-serif;}
.mySearchBoxW input[type=text]::placeholder{font-size: 1rem; color: #646464; font-family: Pretendard, sans-serif;}
.mySearchBoxW a{display: inline-block; width: 40px; height: 40px; border-left: 1px solid #6435d9; text-align: center; line-height: 40px;}
.mySearchBoxW a img{width: 50%; vertical-align: middle;}

/* progress */
.progressW{display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; margin-bottom: 8px;}
.progressW .progress{width: 100%; margin-right: 12px;}/*max-width: 360px;*/
.progressW .progressInfo{display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-bottom: 2px; vertical-align: top;}
.progressW .now{color: #626262; font-size: 0.87rem;}
.progressW .total{color: #8e8e8e; font-size: 0.87rem;}
.progressW .totalTime{color: #8e8e8e; font-size: 0.87rem;}
.progressW .progressTrack{background-color: #d2d2d2; border-radius: 12px; height: 8px; width: 100%; }
.progressW .progressTrack .progressBar{background-color: #6435d9; height: 100%; width: 20%; border-radius: 12px;}
.progressW .percent{color: #6435d9; font-size: 1rem;}

/* summary */
.summary{padding: 8px 0;  margin-bottom: 4px;}
.summary p{color: #828282; font-family: PretendardL, sans-serif; font-size: 1rem; line-height: 1.3em;}
.summary2{margin-bottom: 12px;}
.summary2 p{color: #828282; font-family: PretendardL, sans-serif; font-size: 1.06rem; line-height: 1.3em;}
@media screen and (max-width:640px){
    .summary2{margin-bottom: 8px;}
}
/* limitText - summary 최대 높이 지정 및 더보기 버튼 */
.limitText{position: relative; overflow: hidden;}
.limitText p{max-height: 70px;}
.limitText.on p{max-height: none;}
.limitText .moreText{display: none; width: 100%; color: #8e8e8e; font-size: 0.87rem; text-align: center; background: linear-gradient(0deg, rgba(255,255,255,1) 50%, rgba(255,255,255,0.5) 100%); position: absolute; left: 0; bottom: 0; padding: 12px 0 5px;}
.limitText.on .moreText{display: block; position: relative; padding-top: 5px;}
.limitText .moreText img{width: 10px; vertical-align: middle; margin-right: 4px; transition: all 0.5s;}
.limitText.on .moreText img{transform: rotateZ(180deg);}
.limitText p.is-truncated{max-height: none; height: auto;}
.limitText p.is-truncated + .moreText{display: block;}
@media screen and (max-width:640px){
    .limitText p{max-height: 60px;}
    .limitText1 p{max-height: 78px;}
}

/* infoBoxW */
.infoBoxW1{background-color: #f4f4f4; padding: 20px 20px 10px; box-sizing: border-box; border-radius: 6px; margin-bottom: 5px;}
.infoBoxW1.path .boxTitle2 a{display: block; height: 56px; line-height: 56px; font-size: 1.23rem; color: #000000; font-family: PretendardM, sans-serif; padding: 0 12px; position: relative; border: 1px solid #dedede; border-left: 0; border-right: 0;}
.infoBoxW1.path .boxTitle2 a::after{content: ""; display: block; width: 16px; height: 12px; background: url(../../../image/arrow/down2.png) no-repeat center center; background-size: 100% auto; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); transition: all 0.5s;}
.infoBoxW1.path .listType5{display: none;}
.infoBoxW1.path .attention3{display: none;}
.infoBoxW1.path.open .listType5{display: block;}
.infoBoxW1.path.open .attention3{display: block;}
.infoBoxW1.path.open .boxTitle2 a::after{transform:translateY(-50%) rotateZ(180deg);}
.infoBoxW2{background-color: #f4f4f4; padding: 20px 20px 10px; box-sizing: border-box; border-radius: 6px; margin-bottom: 25px;}
.infoBoxW2 .videoBox{ width: 100%; height: 570px; margin-bottom: 16px; position: relative;}
.infoBoxW2 .videoBox video {width: 100%; height: 100%; border-radius: 5px; object-fit: fill; vertical-align: top;}
@media (min-width:768px) and (max-width:1024px){
	.infoBoxW2 .videoBox{height: 570px;}
}

@media (min-width:0) and (max-width:767px){
    .infoBoxW2 .videoBox{width: 100%; height: auto;}
}


/* boxTitle */
.boxTitle1{font-family: PretendardM, sans-serif; color: #000000; font-size: 1.2em; line-height: 1.2em; margin-bottom: 20px;}
.boxTitle2{font-family: PretendardM, sans-serif; color: #6435d9; font-size: 1.2em; line-height: 1.2em; margin-bottom: 20px; }
.boxTitle3{font-family: PretendardM, sans-serif; color: #000000; font-size: 1.12rem; line-height: 1.2em; margin-bottom: 20px; position: relative; padding-left: 20px;}
.boxTitle3::before{content: ""; display: block; width: 14px; height: 14px; background: url(../../../image/icon/listIcon1.png) no-repeat center; position: absolute; left: 0; top: 0.14em; background-size: cover;}

/* listType */
.listType1 li{display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-lines: multiple; -ms-flex-wrap: wrap; flex-wrap: wrap; font-size: 1.06rem; color: #797979;}
.listType1 li span{margin-bottom: 8px;}
.listType1 .listHead{color: #000000; font-size: 1.06rem; margin-right: 12px;}
.listType2 {margin-top: 16px;}
.listType2 li{display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-lines: multiple; -ms-flex-wrap: wrap; flex-wrap: wrap; font-size: 1rem; color: #636363;}
.listType2 li span{margin-bottom: 8px; line-height: 1.35em;}
.listType2 .listHead{display: inline-block; padding: 4px 12px; background-color: #4c4c4c; color: #ffffff; border-radius: 12px; font-size: 0.87rem; margin-right: 8px; line-height: 1em;}
.listType3{display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-lines: multiple; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.listType3 li{font-size: 1.06rem; color: #272727; margin-right: 16px;}
.listType3 li span{font-family: PretendardL, sans-serif; margin-bottom: 8px;}
.listType3 .listHead{font-family: Pretendard, sans-serif; color: #787878; margin-right: 6px;}
.listType3 .count{color: #7f7f7f; margin-left: 2px;}

/* 직업직무교육과정 */
.listType4>li{border-bottom: 1px solid #e2e2e2; margin-bottom: 16px; padding-bottom: 8px;}
.listType4>li:last-child{border-bottom: 0; margin-bottom: 0; padding-bottom: 0;}
.listType5>li{font-family: Pretendard, sans-serif; font-size: 1.1rem; color: #626262; position: relative; line-height: 1.3em; padding-left: 12px; margin-bottom: 6px;}
.listType5>li::before{content: ""; display: block; width: 4px; height: 4px; background-color: #6a6a6a; position: absolute; left: 0; top: 0.5em;}
.listType5 p{margin-bottom: 10px;}
.listType5 .title{color: #626262; margin-bottom: 6px;}

/* listTitle */
.listTitle1{font-size: 1.12rem; color: #000000; position: relative; padding-left: 20px; line-height: 1.2em; margin-bottom: 8px;}
.listTitle1::before{content: ""; display: block; width: 14px; height: 14px; background: url(../../../image/icon/listIcon1.png) no-repeat center; position: absolute; left: 0; top: 0.14em; background-size: cover;}

/* attention */
.attention{font-size: 1rem; color: #8f8f8f; line-height: 1.2em; font-family: PretendardL, sans-serif; position: relative; padding-left: 12px; box-sizing: border-box;}
.attention::before{content: "※"; display: inline-block; margin-right: 4px; font-size: 1em; position: absolute; left: 0; top: 0;}
.attention2{font-size: 0.87rem; color: #057c5f; line-height: 1.2em; font-family: PretendardL, sans-serif; text-align: center;}
.attention2::before{content: "※"; display: inline-block; margin-right: 4px; font-size: 1em;}
.attention3{font-size: 1.1rem; color: #e66700; line-height: 1.3em; font-family: Pretendard, sans-serif; position: relative; padding-left: 12px; margin-bottom: 10px;}
.attention3::before{content: "※"; display: block; position: absolute; left: 0; top: 0; color: inherit;}

/* paging */
.pagingW{display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;}
.pagingW ul{display: -webkit-box; display: -ms-flexbox; display: flex;}
.pagingW a{display: block; width: 28px; height: 28px; border-radius: 4px; border: 1px solid #dddddd; text-align: center; line-height: 28px; color: #666565; font-family: PretendardL, sans-serif; margin: 0 2px;}
.pagingW li.on a{background-color: #efecf5; border-color: #efecf5;}
.pagingW a img{height: 12px; vertical-align: middle; margin-bottom: 2px;}
@media screen and (max-width:350px){
    .pagingW a{margin: 0 1px;}
}

/* VideoSwiper */
.VideoSwiper{overflow: visible!important;}
.VideoSwiper li{width: 200px; margin-right: 16px;}
.VideoSwiper .videoCover{display: block; width: 100%; height: 120px; margin-bottom: 16px; border-radius: 8px; overflow: hidden; position: relative; box-sizing: border-box; border: 1px solid #ddd; flex-shrink: 0;}
.VideoSwiper .videoCover::after{content: ""; display: block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.15); position: absolute; left: 0; top: 0;}
.VideoSwiper .videoCover img{width: 100%; height: 100%;}
.VideoSwiper .videoCover .playlectures{position: absolute; right: 0; top: 0; background-color: rgba(0, 0, 0, 0.49); color: #fff; font-size: 0.87rem; padding: 4px 8px; z-index: 1;}
.VideoSwiper .videoCover .playTime{position: absolute; height: 16px; line-height: 16px; right: 8px; top: 8px; color: #ffffff; font-size: 0.87rem; padding-left: 20px; background: url(../../../image/icon/vod_timeIcon.png) no-repeat left center; background-size: 16px; z-index: 1;}
.VideoSwiper .videoCover .playBtn{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 32px; height: 32px; z-index: 1;}
.VideoSwiper .videoCover .playBtn img{width: 100%; height: 100%;}
.VideoSwiper .major{display: block; font-size: 1rem; margin-bottom: 8px; font-family: PretendardM, sans-serif;}
.VideoSwiper .title{display: block; font-size: 1.18rem; font-family: PretendardM, sans-serif; color: #000000; margin-bottom: 7px; width: 100%; line-height: 1.2em; word-break: keep-all; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;}
.VideoSwiper .title img{max-width: 23px; max-height: 19px; vertical-align: bottom;}
.VideoSwiper .lecturer{display: block; font-size: 1.06rem; color: #626262; font-family: PretendardL, sans-serif;}
.VideoSwiper .lecturer span{display: inline-block;  position: relative; padding-right: 0.5em; margin-right: 0.5em; line-height: 1.1em; vertical-align: bottom;}
.VideoSwiper .lecturer span::after{content: ""; display: block; width: 1px; height: 0.8em; background-color: #b7b7b7; position: absolute; right: 0px; top: 3px;}
.VideoSwiper .lecturer span:last-child{padding-right: 0; margin-right: 0;}
.VideoSwiper .lecturer span:last-child::after{display: none;}
.VideoSwiper .lecturer .university{max-width: calc(100% - 55px); white-space: nowrap; overflow:hidden; text-overflow: ellipsis;}
@media screen and (max-width:640px){
    .VideoSwiper li{width: 156px; margin-right: 8px;}
    .VideoSwiper .videoCover{height: 100px;}
    .VideoSwiper .lecturer span{padding-right: 0.4em; margin-right: 0.4em;}
}



/* VideoList */
.VideoList li{position: relative;}
.VideoList .videoCover{display: block; width: 200px;  height: 120px; border-radius: 8px; overflow: hidden; position: relative; box-sizing: border-box; border: 1px solid #ddd; flex-shrink: 0;}
.VideoList .videoCover::after{content: ""; display: block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.15); position: absolute; left: 0; top: 0;}
.VideoList .videoCover img{width: 100%; height: 100%;}
.VideoList .videoCover .playlectures{position: absolute; right: 0; top: 0; background-color: rgba(0, 0, 0, 0.49); color: #fff; font-size: 0.87rem; padding: 4px 8px; z-index: 1;}
.VideoList .videoCover .playTime{position: absolute; height: 16px; line-height: 16px; right: 8px; top: 8px; color: #ffffff; font-size: 0.87rem; padding-left: 20px; background: url(../../../image/icon/vod_timeIcon.png) no-repeat left center; background-size: 16px; z-index: 1;}
.VideoList .videoCover .playBtn{position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 32px; height: 32px; z-index: 1;}
.VideoList .videoCover .playBtn img{width: 100%; height: 100%;}
/* .VideoList .videoInfo{padding: 4px 0;} */
.VideoList .major{display: block; font-size: 1rem; margin-bottom: 8px; font-family: PretendardM, sans-serif;}
.VideoList .title{display: block; font-size: 1.18rem; font-family: PretendardM, sans-serif; color: #000000; margin-bottom: 7px; width: 100%; line-height: 1.2em;}
.VideoList .title img{max-height: 17px; margin-left: 4px; position: relative; top: 2px;}
.VideoList .title2{display: block; font-size: 1.18rem; font-family: PretendardM, sans-serif; color: #000000; margin-bottom: 7px; width: 100%; line-height: 1.2em; padding-right: 40px; box-sizing: border-box;}
.VideoList .title2 img{max-width: 17px; max-height: 16px; margin-left: 4px; position: relative; top: 2px;}
.VideoList .lecturer{display: block; font-size: 1.06rem; color: #626262; font-family: PretendardL, sans-serif; margin-bottom: 2px;}
.VideoList .lecturer::after{content: ""; display: block; clear: both;}
.VideoList .lecturer span{display: inline-block;  position: relative; padding-right: 0.5em; margin-right: 0.5em; line-height: 1.15em; vertical-align: bottom; float: left;}
.VideoList .lecturer span::after{content: ""; display: block; width: 1px; height: 0.8em; background-color: #b7b7b7; position: absolute; right: 0px; top: 3px;}
.VideoList .lecturer span:last-child{padding-right: 0; margin-right: 0;}
.VideoList .lecturer span:last-child::after{display: none;}
.VideoList .clipInfo{display: block;}
.VideoList .clipInfo span{display: inline-block; margin-top: 2px;}
.VideoList .clipInfo .start{font-size: 0.87rem; font-family: PretendardL, sans-serif; color: #636161; padding-left: 18px; background: url(../../../image/icon/icon_time2.png) no-repeat left top 1px; background-size: 15px; margin-right: 8px; line-height: 1.25em;}
.VideoList .clipInfo .running{font-size: 0.87rem; font-family: PretendardL, sans-serif; color: #636161; padding-left: 19px; background: url(../../../image/icon/icon_video.png) no-repeat left center;background-size: 16px; line-height: 1.25em;}
.VideoList .clipInfo .finish{font-size: 0.87rem; font-family: PretendardL, sans-serif; color: #714fc7; padding-left: 18px; background: url(../../../image/icon/icon_check.png) no-repeat left top;background-size: 15px; line-height: 1.25em;}
.VideoList .videoListMoreBtn{display: block; line-height: 48px; background-color: #f5f5f5; font-size: 1rem; color: #5c5c5c; text-align: center; border-radius: 6px;}
.VideoList .videoListMoreBtn img{width: 13px; vertical-align: middle; margin-left: 4px;}
.VideoList .videoListMoreBtn .blackText{color: #000000;}
.VideoList .dataBtnW{display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-lines: multiple; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.VideoList .dataBtnW li{margin-right: 8px; margin-bottom: 8px;}
.VideoList .dataBtnW li:last-child{margin-right: 0;}
.VideoList .videoBtnW{position: absolute; right: 0; top: 0; width: auto!important; display: -webkit-box; display: -ms-flexbox; display: flex; background-color: #ffffff;}
.VideoList .videoBtnW li{margin-left: 4px;}
.VideoList .videoBtnW li:first-child{margin-left: 0px;}
.VideoList .videoSettingBtn{display: inline-block!important; padding: 0 8px; text-align: center;}
.VideoList .videoSettingBtn img{width: 4px;}
.VideoList .shareBtn img{width: 13px;}
@media screen and (max-width:640px){
    .VideoList .videoCover{height: 100px;}
    .VideoList .videoCover .playTime{top: 4px;}
    .VideoList .lecturer span{padding-right: 0.4em; margin-right: 0.4em;}
    .VideoList .dataBtnW li{margin-right: 4px; margin-bottom: 4px;}
}


/* popup */
.popupW{position: relative; z-index: 13;}
.popupW .blackBg{display: none; position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.64); -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0);}
.popup{display: block; position: fixed; bottom: -100%; left: 0; right: 0; background-color: #ffffff; border-top-left-radius: 20px; border-top-right-radius: 20px; padding: 24px 0 30px; max-height: calc(100vh - 48px); z-index: 13;  -webkit-backface-visibility: hidden; -webkit-transform: translateZ(0);}
.popup .popupClose{display: block; text-align: center; margin-bottom: 16px;}
.popup .popupClose img{width: 40px;}
.popup .popupTit{text-align: center; font-size: 1.2rem; color: #2d2d2d; font-family: PretendardM, sans-serif; margin-bottom: 20px;}
.popup .popupCont{padding: 0 20px; max-height: calc(100vh - 180px); overflow: auto;}
.popup .popupList{margin-bottom: 20px;}
.popup .popupList > li{padding: 12px 20px; border-bottom: 1px solid #dddddd;}
.popup .popupList > li:first-child{border-top: 1px solid #dddddd;}
.popup .popupList > li > a{display: block; color: #3e3d3d; font-size: 1.12rem; font-family: PretendardL, sans-serif; padding: 8px 0;}
.popup .popupList > li.move > a{background: url(../../../image/icon/icon_move.png) no-repeat left top 9px; background-size: 17px; padding-left: 24px; box-sizing: border-box;}
.popup .popupList > li.memo > a{background: url(../../../image/icon/icon_memo.png) no-repeat left top 7px; background-size: 15px; padding-left: 24px; box-sizing: border-box;}
.popup .popupList > li.delete > a{background: url(../../../image/icon/icon_delete2.png) no-repeat left  top 8px; background-size: 13px; padding-left: 24px; box-sizing: border-box;}
.popup .popupList > li.move.on > a{background-image: url(../../../image/icon/icon_move_on.png);}
.popup .popupList > li.memo.on > a{background-image: url(../../../image/icon/icon_memo_on.png);}
.popup .popupList > li.delete.on > a{background-image: url(../../../image/icon/icon_delete2_on.png);}
.popup .popupList > li.on > a{color: #6435d9;}
.popup .popupList > li .popupListCont{display: none;}
.popup .popupList > li.on .popupListCont{display: block;}
.popup .popupList > li .popupListCont fieldset{min-inline-size: 0;}
.popup .popupList2{margin-bottom: 20px;}
.popup .popupList2 > li  a{display: block; padding: 20px 20px; border-top: 1px solid #dddddd; color: #3e3d3d; font-size: 1.12rem; font-family: PretendardL, sans-serif;}
.popup .popupList2 > li .popupListCont{display: none; padding: 16px 20px;}
.popup .popupList2 > li.on  a{border-bottom: 1px solid #dddddd;}
.popup .popupList2 > li.on .popupListCont{display: block;}
.popup .popupList2 > li .popupListCont fieldset{min-inline-size: 0;}
.popup .popupList2 > li .submitBtn a{padding: 0px 0px;}
.popup .popupList2 > li .cancleBtn a{padding: 0px 0px;}

.popup .topicList{margin-top: 4px; margin-bottom: 12px;}
.popup .topicList li{margin-bottom: 12px;}
.popup .topicList .slick-dots{display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin:  0 0 8px;}
.popup .topicList .slick-dots li{margin-right: 8px; margin-bottom: 0;}
.popup .topicList .slick-dots li:last-child{ margin-right: 0px;}
.popup .topicList .slick-dots .dot{display: block; background-color: #c5d0dc; border-radius: 50%; width: 10px; height: 10px; border: none; cursor: pointer;}
.popup .topicList .slick-dots li.slick-active .dot{background-color: #2d2d2d;}
.popup .moveListW{background-color: #f1f1f1; border-radius: 12px; padding: 16px;}
.popup .moveListW .moveList{padding: 0 12px;}
.popup .moveListW .moveList li{margin-bottom: 12px;}
.popup .moveListW .moveList li a{color: #3d3d3d; font-size: 1rem; font-family: PretendardL, sans-serif;}
.popup .moveListW .moveList li a .count{color: #989797;}
.popup .moveListW .moveList li.on a{color: #6435d9;}
.popup .moveListW .moveList li.on a .count{color: #6435d9;}
.popup input[type=text]{border: 1px solid #d6d6d6; font-size: 1rem; font-family: PretendardL, sans-serif; color: #838383; padding: 0 12px; box-sizing: border-box; border-radius: 4px; box-sizing: border-box; width: 100%; height: 40px; margin-bottom: 12px;}
.popup input[type=text]::placeholder{font-size: 1rem; font-family: PretendardL, sans-serif; color: #838383;}
.popup input[type=text]:focus{border-color: #6435d9;}
.popup input[type=email]{border: 1px solid #d6d6d6; font-size: 1rem; font-family: PretendardL, sans-serif; color: #838383; padding: 0 12px; box-sizing: border-box; border-radius: 4px; box-sizing: border-box; width: 100%; height: 40px; margin-bottom: 12px;}
.popup input[type=email]::placeholder{font-size: 1rem; font-family: PretendardL, sans-serif; color: #838383;}
.popup input[type=email]:focus{border-color: #6435d9;}
.popup .textLength{display: block; font-size: 1rem; color: #3c3b3b; text-align: right; margin-bottom: 8px;}
.popup .textArea{width: 100%; height: 100px; border: 1px solid #d6d6d6; border-radius: 4px; padding: 16px 12px; box-sizing: border-box; margin-bottom: 12px; resize: none; font-size: 1rem; font-family: PretendardL, sans-serif; color: #838383;}
.popup .textArea:focus-visible{border-color: #6435d9; outline: none;}
.popup .textArea::placeholder{font-size: 1rem; font-family: PretendardL, sans-serif; color: #838383;}
.popup label{display: inline-block; font-size: 1.1rem; color: #3e3d3d; font-family: PretendardL, sans-serif; margin-bottom: 8px;}
.popup .deleteList{background-color: #f1f1f1; color: #ff6f6f; text-align: center; border-radius: 12px; padding: 20px; margin-bottom: 12px; font-size: 1rem;}
.popup .phonenum{display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 12px;}
.popup .phonenum input{margin-bottom: 0; text-align: center; width: 30%;}
.popup .BtnW{display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;}
.popup .BtnW li{width: calc(50% - 4px);}
.popup .BtnC li{width: calc(100% - 4px);}
.popup .BtnW li a{display: block; color: #ffffff; font-size: 1rem; text-align: center; background-color: #414141; border-radius: 8px; line-height: 36px;}
.popup .BtnW li.submitBtn a{background-color: #4b0aec;}
.popup .listBtnW{display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;}
.popup .listBtnW li{width: calc(50% - 4px);}
.popup .listBtnW li a{display: block; color: #ffffff; font-size: 1rem; text-align: center; background-color: #414141; border-radius: 8px; line-height: 36px;}
.popup .listBtnW li a.popupSubmit {background-color: #4b0aec;}
.popup .popupCancle{display: block; color: #ffffff; font-size: 1.06rem; text-align: center; background-color: #414141; border-radius: 8px; line-height: 44px; font-family: PretendardM, sans-serif;}

@media screen and (max-width:640px){
    .popup .topicList .slick-dots{margin: 0 0 4px;}
    .popup .topicList .slick-dots .dot{width: 8px; height: 8px;}
}