/* data-role="program" */
[data-title="program_list"] {overflow:hidden; }/* margin 때문에 스크롤 발생해서 추가 */
ul.card_list[data-role="program"] {box-sizing:border-box; display:-ms-flexbox; display:-webkit-box; display:-moz-box; display:flex; -webkit-box-lines:multiple; -moz-flex-wrap:wrap; -ms-flex-wrap:wrap; -webkit-flex-wrap:wrap; flex-wrap:wrap; margin-left:-12px; margin-right:-12px; }
ul.card_list[data-role="program"] li.card_item {box-sizing:border-box; position:relative; width:calc(25% - 24px); height:320px; margin:12px; }
ul.card_list[data-role="program"] li.card_item > a {box-sizing:border-box; position:relative; width:100%; height:100%; display:block; }
ul.card_list[data-role="program"] li.card_item > a > div.card_img {box-sizing:border-box; position:relative; width:100%; height:160px; padding-top:14px; padding-left:14px;background-repeat:no-repeat; background-position:center; background-size:cover; overflow:hidden; }
ul.card_list[data-role="program"] li.card_item > a > div.card_img span.ico_year { position:absolute; display:inline-block; right:-45px; bottom:-45px; width:94px; height:94px; background-color:#ee137b; transform:rotate(45deg);}
ul.card_list[data-role="program"] li.card_item > a > div.card_img span.ico_year i { position:absolute; display:inline-block; width:33px; height:32px; left:0; top:30%; background:url(../images/program_ico_year.png?1) no-repeat center; transform:rotate(-45deg); z-index:2;}
ul.card_list[data-role="program"] li.card_item > a > div.card_img small.class {box-sizing:border-box; display:inline-block; width:58px; height:23px; font-size:12px; color:#fff; line-height:23px; text-align:center; border-radius:2px; }
ul.card_list[data-role="program"] li.card_item > a > div.card_img small + small {margin-left:3px;}
ul.card_list[data-role="program"] li.card_item > a > div.card_img small.class.prev {background:rgba(10,173,99,0.9);}
ul.card_list[data-role="program"] li.card_item > a > div.card_img small.class.ing {background:rgba(8,119,240,0.9);}
ul.card_list[data-role="program"] li.card_item > a > div.card_img small.certificate {box-sizing:border-box; display:inline-block; width:58px; height:23px; padding-left:15px; font-size:12px; color:#fff; line-height:23px; text-align:center; border-radius:2px; background:url(../images/program_ico_certificate.png)no-repeat 5px center rgba(69,69,76,0.9);}
ul.card_list[data-role="program"] li.card_item > a > div.card_content {box-sizing:border-box; height:160px; padding-top:15px; }
ul.card_list[data-role="program"] li.card_item > a > div.card_content strong.title {display:block; display:-webkit-box; width:100%; height:40px; margin-bottom:35px; font-size:16px; color:#000; line-height:1.3; font-weight:700; text-overflow:ellipsis; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; vertical-align:middle;}
ul.card_list[data-role="program"] li.card_item > a > div.card_content div.date {margin-bottom:20px; line-height:20px; }
ul.card_list[data-role="program"] li.card_item > a > div.card_content div.date i.dday {height:20px; margin-right:5px; padding:0 5px; color:#ee137b; font-size:12px; line-height:12px; font-weight:700; font-style:normal; border-radius:2px; border:1px solid #ee137b; }
ul.card_list[data-role="program"] li.card_item > a > div.card_content div.date span {color:#808080; font-size:14px; }
ul.card_list[data-role="program"] li.card_item > a > div.card_content > span.tag {display:inline-block; padding:5px 8px; background:#f2f2f2; border-radius:2px; color:#808080; font-size:12px; }
ul.card_list[data-role="program"] li.card_item > a > div.card_content > span.tag+span.tag {margin-left:3px; }

ul.card_list[data-role="program"] li.card_item > a > div.card_cover {display:none; box-sizing:border-box; position:absolute; left:0; top:0; width:100%; height:100%; padding:20px 20px; background:rgba(0,0,0,0.8); color:#fff; z-index:2;  box-shadow:3px 15px 20px 0px #8080804d; }
ul.card_list[data-role="program"] li.card_item > a > div.card_cover ul.info {}
ul.card_list[data-role="program"] li.card_item > a > div.card_cover ul.info > li {width:100%; display:table; padding-bottom:30px; }
ul.card_list[data-role="program"] li.card_item > a > div.card_cover ul.info > li span.icon {display:table-cell; width:40px;vertical-align:top; }
ul.card_list[data-role="program"] li.card_item > a > div.card_cover ul.info > li span.icon i.icon {display:block; width:40px; height:40px; background:url(../images/program_ico_operate_01.png)no-repeat center #00A85D; }
ul.card_list[data-role="program"] li.card_item > a > div.card_cover ul.info > li.week span.icon i.icon {background-image:url(../images/program_ico_operate_02.png);}
ul.card_list[data-role="program"] li.card_item > a > div.card_cover ul.info > li.time span.icon i.icon {background-image:url(../images/program_ico_operate_03.png);}
ul.card_list[data-role="program"] li.card_item > a > div.card_cover ul.info > li.plus span.icon i.icon {background-image:url(../images/program_ico_plus.png);}
ul.card_list[data-role="program"] li.card_item > a > div.card_cover ul.info > li.like span.icon i.icon {background-image:url(../images/program_ico_like.png);}
ul.card_list[data-role="program"] li.card_item > a > div.card_cover ul.info > li p {display:table-cell; padding-left:10px; vertical-align:top; }
ul.card_list[data-role="program"] li.card_item > a > div.card_cover ul.info > li p span.info {display:block; padding-bottom:10px; font-size:12px; color:rgba(255,255,255,0.6); }
ul.card_list[data-role="program"] li.card_item > a > div.card_cover ul.info > li p strong {display:block; font-size:16px; font-weight:700; color:#fff; line-height:20px; word-break:keep-all; }
ul.card_list[data-role="program"] li.card_item > a > div.card_cover ul.info > li p strong > span {display:block; font-size:16px; font-weight:normal; color:#fff; word-break:keep-all; }

ul.card_list[data-role="program"] li.card_item button.favorite {position:absolute; top:10px; right:12px; width:33px; height:33px; line-height:33px; font-size:22px; color:#fff; text-align:center; border-radius:50%; background:rgba(0,0,0,0.2); }
ul.card_list[data-role="program"] li.card_item button.favorite > i {display:block; width:33px; height:33px; line-height:33px; text-align:center;}
ul.card_list[data-role="program"] li.card_item button.favorite > i:before {display:block; width:33px; height:33px; line-height:36px; text-align:center;}
ul.card_list[data-role="program"] li.card_item button.favorite.favorite_select {color:#ee137b;}
ul.card_list[data-role="program"] li.card_item button.favorite.favorite_select > i:before {content:"\ea10";}

div.program ul.card_list {box-sizing:border-box; margin-left:-12px; margin-right:-12px; }
/*div.program ul.card_list li.card_item {box-sizing:border-box; position:relative; width:255px; height:320px; margin:0 12px; }*/
div.program ul.card_list li.card_item > a {box-sizing:border-box; position:relative; width:100%; height:100%; display:block; }
div.program ul.card_list li.card_item > a > div.card_img {box-sizing:border-box; position:relative; width:100%; height:160px; padding-top:14px; padding-left:14px;background-repeat:no-repeat; background-position:center; background-size:cover; overflow:hidden; }
div.program ul.card_list li.card_item > a > div.card_img span.ico_year { position:absolute; display:inline-block; right:-45px; bottom:-45px; width:94px; height:94px; background-color:#0036ce; transform:rotate(45deg);}
div.program ul.card_list li.card_item > a > div.card_img span.ico_year i { position:absolute; display:inline-block; width:33px; height:32px; left:0; top:30%; background:url(../images/program_ico_year.png?1) no-repeat center; transform:rotate(-45deg); z-index:2;}
div.program ul.card_list li.card_item > a > div.card_img small.class {box-sizing:border-box; display:inline-block; width:58px; height:23px; font-size:12px; color:#fff; line-height:23px; text-align:center; border-radius:2px; }
/* 23.08.01 스타일 추가 { */
div.program ul.card_list li.card_item > a > div.card_img small.class.prev {background:rgba(0,182,98,0.9);}
div.program ul.card_list li.card_item > a > div.card_img small.class.ing {background:rgba(8,119,240,0.9);}
div.program ul.card_list li.card_item > a > div.card_img small.class.end {background:rgba(126,129,140,0.9);}
div.program ul.card_list li.card_item > a > div.card_img small.class.audit {background:rgba(140,42,108,0.9);}
/* } 23.08.01 스타일 추가 */
div.program ul.card_list li.card_item > a > div.card_img small.certificate {box-sizing:border-box; display:inline-block; width:58px; height:23px; padding-left:15px; font-size:12px; color:#fff; line-height:23px; text-align:center; border-radius:2px; background:url(../images/program_ico_certificate.png)no-repeat 5px center rgba(69,69,76,0.9);}
div.program ul.card_list li.card_item > a > div.card_content {box-sizing:border-box; height:160px; padding-top:15px; }
/* 23.07.10 스타일 수정 { */
div.program ul.card_list li.card_item > a > div.card_content strong.title {display:block; display:-webkit-box; width:100%; height:40px; margin-bottom:13px; font-size:16px; color:#000; line-height:1.3; font-weight:700; text-overflow:ellipsis; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; vertical-align:middle;}
div.program ul.card_list li.card_item > a > div.card_content p.name {min-height:14px; margin-bottom:7px; font-size:14px; line-height:14px; font-weight:bold; color:#555;}
div.program ul.card_list li.card_item > a > div.card_content p.institution {min-height:14px; margin-bottom:9px; font-size:14px; line-height:14px; color:#808080; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
div.program ul.card_list li.card_item > a > div.card_content p.institution + div.date { margin-bottom:6px;}
/* } 23.07.10 스타일 수정 */
div.program ul.card_list li.card_item > a > div.card_content strong.title.micro {margin-bottom:15px;}
div.program ul.card_list li.card_item > a > div.card_content div.date {margin-bottom:20px; line-height:20px; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical;}
div.program ul.card_list li.card_item > a > div.card_content div.date i.dday {height:20px; padding:0 5px; color:#ee137b; font-size:12px; line-height:12px; font-weight:700; font-style:normal; border-radius:2px; border:1px solid #ee137b; }
div.program ul.card_list li.card_item > a > div.card_content div.date span {color:#808080; font-size:14px;}
/* 23.01.06 태그 스타일 수정 { */
div.program ul.card_list li.card_item > a > div.card_content div.tag_wrap {display: flex; gap: 4px; flex-wrap: wrap; height:22px; width:100%; overflow:hidden;}
div.program ul.card_list li.card_item > a > div.card_content div.tag_wrap span.tag {display:inline-block; padding:5px 8px; background:#f2f2f2; border-radius:2px; color:#808080; font-size:12px; }
/* } 23.01.06 태그 스타일 수정 */

div.program ul.card_list li.card_item button.favorite {position:absolute; top:10px; right:12px; width:33px; height:33px; line-height:33px; font-size:22px; color:#fff; text-align:center; border-radius:50%; background:rgba(0,0,0,0.2); }
div.program ul.card_list li.card_item button.favorite > i {display:block; width:33px; height:33px; line-height:33px; text-align:center;}
div.program ul.card_list li.card_item button.favorite > i:before {display:block; width:33px; height:33px; line-height:36px; text-align:center;}
div.program ul.card_list li.card_item button.favorite.favorite_select {color:#ee137b;}
div.program ul.card_list li.card_item button.favorite.favorite_select > i:before {content:"\ea10";}
div.program button.program_prev {position:absolute; left:-20px; top:125px; transform:translateY(-40px); width:40px; height:40px; border:1px solid #f1f1f1; border-radius:50%; background:#fff; font-size:14px; color:#000; font-size:14px; box-shadow:3px 5px 5px 0px #8080804d; z-index: 1;}
div.program button.program_next {position:absolute; right:-20px; top:125px; transform:translateY(-40px); width:40px; height:40px; border:1px solid #f1f1f1; border-radius:50%; background:#fff; font-size:14px; color:#000; font-size:14px; box-shadow:3px 5px 5px 0px #8080804d; }

div.breadcrumb > div.container > a.share {float:right; display:inline-block; width:41px; height:41px; margin:9px 0;}
div.breadcrumb > div.container > a.share > i {display:inline-block; width:100%; height:100%; background:url(../images/ico_basic_view_01_1.png) no-repeat center;}


main.micro_lern div[data-role="context_list"] {overflow-y:hidden;}
main.micro_lern div[data-role='tab_menu'] {padding-top:0; border-bottom:1px solid #e0e0e0;}
main.micro_lern div.program ul.card_list li.card_item > a > div.card_img small.num {margin-top:0;}
main.micro_lern div.footer_banner > div.main div.box_btn > button.btn_visual {display:none;}