/* 서브페이지 비주얼 배경 */
div.page_visual_wrap.about_kmooc {background-color:#fff;}
div.page_visual_wrap.about_system {background-color:#fff;}
div.page_visual_wrap.about_bi {padding:60px 0; background-image:url(../image/about_bg_bi.png);}
div[data-role="search"] {padding-top:0;}

/* K-MOOC 소개 공통 */
main.about_kmooc div.big_tab, main.about_system div.big_tab, main.about_bi div.big_tab, main.about_institution div.big_tab {border-top:1px solid #e0e0e0;}

/* about_kmooc */
main.about_kmooc div.kmooc_mean {box-sizing:border-box; position:relative; padding:56px 20px 40px; background:#0036ce; text-align:center;}
main.about_kmooc div.kmooc_mean:before {content:''; position:absolute; top:-50px; right:-50px; width:100px; height:100px; background:#07e872; box-shadow:30px 30px 40px rgba(0,0,0,0.2);}
main.about_kmooc div.box_content {box-sizing:border-box; width:100%; padding:60px; background:#f7f7f7;}
main.about_kmooc div.box_content strong.title {display:block; margin-bottom:15px; font-size:18px; color:#000; font-weight:bold;}
main.about_kmooc div.box_content p.info {font-size:15px; color:#555; line-height:1.4; word-break:keep-all}
main.about_kmooc div.box_content > p.info + strong.title {padding-top:30px;}
main.about_kmooc div.box_content.vision {padding:45px 75px;}
main.about_kmooc div.box_content.activity ul {font-size:0;}
main.about_kmooc div.box_content.activity ul > li {display:inline-block; width:calc(33.3333% - 27px); margin-right:40px; vertical-align:top;}
main.about_kmooc div.box_content.activity ul > li:nth-of-type(3n) {margin-right:0;}
main.about_kmooc div.box_content.activity ul > li > div.desc {padding-top:20px;}
main.about_kmooc div.box_content.activity ul > li > div.image > div.card_img {width:100%; margin-bottom:20px; padding-bottom:66.6666%; background-repeat:no-repeat; background-position:center; background-size:cover;}
main.about_kmooc div.box_content.activity ul > li strong.title {margin-bottom:10px; font-size:18px;}
main.about_kmooc div.box_content.activity ul > li p.info {font-size:15px;}
main.about_kmooc div.box_content.howto {}
main.about_kmooc div.box_content.howto ul {display:flex; flex-wrap:wrap; padding-bottom:14px; font-size:0; }
main.about_kmooc div.box_content.howto ul > li {box-sizing:border-box; position:relative; padding:30px;  width:calc(33.3333% - 10px); min-height:200px; margin-right:10px; margin-bottom:10px; background:#fff;  vertical-align:top; }
main.about_kmooc div.box_content.howto ul > li:after {content:''; box-sizing:border-box; position:absolute; bottom:0; right:0; width:100px; height:100px; background-repeat:no-repeat; background-position:center; }
main.about_kmooc div.box_content.howto ul > li.youth:after {background-image:url(../image/about_ico_recourse_youth.png);}
main.about_kmooc div.box_content.howto ul > li.student:after {background-image:url(../image/about_ico_recourse_student.png);}
main.about_kmooc div.box_content.howto ul > li.normal:after {background-image:url(../image/about_ico_recourse_normal.png);}
main.about_kmooc div.box_content.howto ul > li.career:after {background-image:url(../image/about_ico_recourse_career.png);}
main.about_kmooc div.box_content.howto ul > li.prof:after {background-image:url(../image/about_ico_recourse_prof.png);}
main.about_kmooc div.box_content.howto ul > li.college:after {background-image:url(../image/about_ico_recourse_college.png);}
main.about_kmooc div.box_content.howto ul > li strong.title {margin-bottom:15px; font-size:18px;}
main.about_kmooc div.box_content.howto ul > li p.dot {padding-top:5px; padding-bottom:5px; font-size:15px; color:#555; line-height:1.4; word-break:keep-all;}
main.about_kmooc div.box_content.howto ul > li p.dot:before {top:14px; border-radius:50%;}

/* about BI */
main.about_bi {overflow:hidden;}
main.about_bi div.container {position:relative;}
main.about_bi div.right.bi {position:absolute; right:-54px; top:66px; transition:all 1s;}
main.about_bi h3.page_title {padding:60px 0 40px; font-size:36px; font-weight:bold; color:#000;}
main.about_bi div.page_visual_wrap:after {content:''; display:block; clear:both;}
main.about_bi div.page_visual_wrap > div.container-fluid > div {float:left; width:50%;}
main.about_bi div.page_visual_wrap > div.container-fluid > div.right.bi {padding-top:50px;}
main.about_bi div.box_logo {font-size:0;}
main.about_bi div.box_logo div {display:inline-block; width:50%; height:280px; background-repeat:no-repeat; background-position:center; background-size:auto;}
main.about_bi div.box_logo div.box_gray { background-color:#f5f5f5;}
main.about_bi div.box_logo div.box_blue {background-color:#002475;}
main.about_bi div.box_color {font-size:0;}
main.about_bi div.box_color:after {content:''; display:block; clear:both;}
main.about_bi div.box_color > div {display:inline-block; width:25%; padding-bottom:25.455%;}
main.about_bi div.box_color > div.primary {background:#002475;}
main.about_bi div.box_color > div.secondary {background:#0036ce;}
main.about_bi div.box_color > div.third {background:#07e872;}
main.about_bi div.box_color > div.fourth {background:#f0f6ff;}

/* about institution */
main.about_institution div[data-role="context_list"] > ul.list_wrap {padding:24px 0;margin-left:-12px; margin-right:-12px; font-size:0;}
main.about_institution div[data-role="context_list"] > ul > li {display:inline-block; box-sizing:border-box; width:25%; padding:12px; vertical-align:top;}
main.about_institution div[data-role="context_list"] > ul > li > div.list_item {box-sizing:border-box; border:1px solid #e6e6e6;}
main.about_institution div[data-role="context_list"] > ul > li > div.list_item > div.thumb {box-sizing:border-box; height:160px; padding:0 2rem; background:#fff; border-bottom:1px solid #e6e6e6;}
main.about_institution div[data-role="context_list"] > ul > li > div.list_item > div.thumb > span {box-sizing:border-box; display:block; height:100%; background-repeat:no-repeat; background-position:center; background-size:contain;}
main.about_institution div[data-role="context_list"] > ul > li > div.list_item > div.info {box-sizing:border-box; padding:20px; font-size:0;}
main.about_institution div[data-role="context_list"] > ul > li > div.list_item > div.info > strong {display:block; margin-bottom:15px; font-size:16px; color:#000; font-weight:bold;}
main.about_institution div[data-role="context_list"] > ul > li > div.list_item > div.info > p {width:100%; padding:3px 0;font-size:14px; color:#666; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
main.about_institution div[data-role="context_list"] > ul > li > div.list_item > div.info > p:before {content:''; display:inline-block; width:24px; height:24px; margin-right:10px; background:#f2f2f2; background-repeat:no-repeat; background-position:center; border-radius:50%; vertical-align:middle;}
main.about_institution div[data-role="context_list"] > ul > li > div.list_item > div.info > p.school:before {background-image:url(../image/about_ico_school.png)}
main.about_institution div[data-role="context_list"] > ul > li > div.list_item > div.info > p.date:before {background-image:url(../image/about_ico_date.png)}
main.about_institution div[data-role="context_list"] > ul > li > div.list_item > div.info > p.contact:before {background-image:url(../image/about_ico_contact.png)}

/* 참여기관 검색 */
main.about_institution div[data-role="search"].institution div.search {width:calc(100% - 470px)}

/* about institution detail */
main.about_institution_detail div.insitution_info {box-sizing:border-box; padding:40px 0;}
main.about_institution_detail div.insitution_info div.box_info {font-size:0;}
main.about_institution_detail div.insitution_info div.box_info > div {box-sizing:border-box; display:inline-block; vertical-align:top;}
main.about_institution_detail div.insitution_info div.box_info > div.thumb {width:290px; height:180px; padding:0 2rem; background:#fff;}
main.about_institution_detail div.insitution_info div.box_info > div.thumb > span {display:block; width:100%; height:100%; background-repeat:no-repeat; background-position:center; background-size:contain;}
main.about_institution_detail div.insitution_info div.box_info > div.info {position:relative; width:calc(100% - 290px); padding:10px 0 0 26px;}
main.about_institution_detail div.insitution_info div.box_info > div.info > strong {font-size:26px; color:#fff; font-weight:bold;}
main.about_institution_detail div.insitution_info div.box_info > div.info > p.summary {box-sizing:border-box; padding:18px 0; font-size:0;}
main.about_institution_detail div.insitution_info div.box_info > div.info > p.summary > span {display:inline-block; font-size:14px; color:#fff;}
main.about_institution_detail div.insitution_info div.box_info > div.info > p.summary > span:before {content:''; box-sizing:border-box; display:inline-block; width:28px; height:28px; margin-right:8px; background-image:url(../image/about_ico_school_w.png); background-repeat:no-repeat; background-position:center; border:1px solid #647aab; border-radius:50%; vertical-align:middle; line-height:28px;}
main.about_institution_detail div.insitution_info div.box_info > div.info > p.summary > span.school:before {background-image:url(../image/about_ico_school_w.png);}
main.about_institution_detail div.insitution_info div.box_info > div.info > p.summary > span.date:before {background-image:url(../image/about_ico_date_w.png);}
main.about_institution_detail div.insitution_info div.box_info > div.info > p.summary > span.contact:before {background-image:url(../image/about_ico_contact_w.png);}
main.about_institution_detail div.insitution_info div.box_info > div.info > p.summary > span + span {margin-left:32px;}
main.about_institution_detail div.insitution_info div.box_info > div.info > div.desc {padding-top:18px; border-top:1px solid rgba(255,255,255,0.2); font-size:14px; color:#dddfe8; line-height:1.5;}
main.about_institution_detail div.insitution_info div.box_info > div.info > div.desc p {font-size:14px; color:#dddfe8; line-height:1.5;}
main.about_institution_detail div.insitution_info div.box_info > div.info > div.box_link {position:absolute; top:12px; right:0;}
main.about_institution_detail div.insitution_info div.box_info > div.info > div.box_link > a {position:relative; margin:0 20px; font-size:14px; color:#fff; vertical-align:middle;}
main.about_institution_detail div.insitution_info div.box_info > div.info > div.box_link > a.youtube {padding-right:0;}
main.about_institution_detail div.insitution_info div.box_info > div.info > div.box_link > a > i {display:inline-block; height:15px; background:url(../image/about_ico_home_w.png) no-repeat center; vertical-align:-2px;}
main.about_institution_detail div.insitution_info div.box_info > div.info > div.box_link > a.homepage > i {width:12px; margin-right:9px;}
main.about_institution_detail div.insitution_info div.box_info > div.info > div.box_link > a.facebook > i {width:7px; background-image:url(../image/about_ico_facebook_w.png);}
main.about_institution_detail div.insitution_info div.box_info > div.info > div.box_link > a.insta > i {width:15px; background-image:url(../image/ico_instagram.png);}
main.about_institution_detail div.insitution_info div.box_info > div.info > div.box_link > a.youtube > i {width:20px; background-image:url(../image/about_ico_youtube_w.png);}
main.about_institution_detail div.insitution_info div.box_info > div.info > div.box_link > a ~ a:before {content:''; position:absolute; top:50%; left:-20px; width:1px; height:10px; background:rgba(255,255,255,0.2); transform:translateY(-50%)}
main.about_institution_detail ul.card_list[data-role="program"] {padding-top:20px; font-size:0;}
div[data-role="context_list"][data-tab=all].faq_list ul.card_list[data-role="program"] {border-bottom:1px solid #e5e5e5;}
div[data-role="context_list"][data-tab=all].faq_list ul.card_list[data-role="program"]:last-child {border-bottom:none;}
main.about_institution_detail h4.list_title {margin-top:40px; font-weight:bold; font-size:23px;}
main.about_institution_detail h4.list_title.mt-20 {margin-top:20px;}
main.about_institution_detail h4.list_title.mt-0 {margin-top:0;}

main.about_institution_detail div[data-role="tab_menu"] ul.tab_wrap li {width:calc(100% / 6);}
main.about_institution_detail div[data-role="tab_menu"] ul.tab_wrap li:nth-child(5) {border:none;}
main.about_institution_detail div[data-role="tab_menu"] ul.tab_wrap li:nth-child(n+5) {border-left:0px;border-right:1px solid #e0e0e0; border-top:1px solid #e0e0e0;}

@media screen and (max-width:1199px) {
    main.about_institution_detail div[data-role="tab_menu"] ul.tab_wrap li:nth-child(n+7) {border-top:1px solid #e0e0e0;}
}
/* } 23.03.28 oz15 스타일 수정 */



/* 팝업 */
div.box_popup {display:none; width:100%; height:100vh; position:fixed; left:0; top:0; z-index:200000; background-color:rgba(0,0,0,.5);}
div.box_popup div.popup {overflow:hidden; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:800px; box-shadow:2px 5px 13px rgb(0 0 0 / 20%); border-radius:5px; background:transparent;}
div.box_popup div.popup h2 {box-sizing:border-box; height:60px; padding:0 20px; color:#fff; background:#0036ce; line-height:60px; font-size:18px;}
div.box_popup div.popup h2:after {display:block; content:'' ; clear:both;}
div.box_popup div.popup button.btn_close {float:right; height:60px; line-height:60px; color:#fff;}
div.box_popup div.popup button.btn_close > i {font-size:15px;}
div.box_popup div.popup > div.popup_inner {padding:20px; background:#fff; box-sizing:border-box;}
div.box_popup div.popup > div.popup_inner > div {height:auto; padding:10px; box-sizing:border-box; overflow-y:auto;}
div.box_popup div.popup > div.popup_inner > div::-webkit-scrollbar {width:10px;}
div.box_popup div.popup > div.popup_inner > div::-webkit-scrollbar-thumb {background-color:#cccccc; border-radius: 10px; background-clip: padding-box; border: 2px solid transparent;}
div.box_popup div.popup > div.popup_inner > div::-webkit-scrollbar-track {background-color:initial; border-radius: 10px; box-shadow: inset 0px 0px 5px white;}
div.box_popup div.popup > div.popup_inner div.line {margin:30px 0; height:1px; background:#e5e5e5;}

/* 추가 검색 팝업 */
div.box_popup div.popup.plus_search {width:910px;}
div.box_popup div.popup.plus_search > div.popup_inner > div {height:auto;}
div.box_popup div.popup > div.popup_inner.plus_search {padding-bottom:15px;}
div.box_popup div.popup > div.popup_inner.plus_search > div > div.search {padding:25px 0 30px 25px; background:#e3f0fc; box-sizing:border-box;}
div.box_popup div.popup > div.popup_inner.plus_search > div > div.search > ul > li {margin-bottom:20px;}
div.box_popup div.popup > div.popup_inner.plus_search > div > div.search > ul > li::after {content:''; display:block; clear:both;}
div.box_popup div.popup > div.popup_inner.plus_search > div > div.search > ul > li:last-child {margin-bottom:0;}
div.box_popup div.popup > div.popup_inner.plus_search > div > div.search > ul > li > div {float:left;}
div.box_popup div.popup > div.popup_inner.plus_search > div > div.search > ul > li > div.title { width:170px; box-sizing:border-box; padding-right:15px;}
div.box_popup div.popup > div.popup_inner.plus_search > div > div.search > ul > li > div.title > strong {font-size:15px; font-weight:bold;}
div.box_popup div.popup > div.popup_inner.plus_search > div > div.search > ul > li > div[data-role="radio"] {width:calc(100% - 170px);}
div.box_popup div.popup > div.popup_inner.plus_search > div > div.search > ul > li > div[data-role="radio"]::after {content:''; display:block; clear:both;}
div.box_popup div.popup > div.popup_inner.plus_search > div > div.search > ul > li > div[data-role="radio"].catagory > div {display:inline-block; width:auto; vertical-align:middle;}
div.box_popup div.popup > div.popup_inner.plus_search > div > div.search > ul > li > div[data-role="radio"] > div > label {display:inline-block; margin-right:20px; cursor:pointer; letter-spacing:-0.4px;}
div.box_popup div.popup > div.popup_inner.plus_search > div > div.search > ul > li > div[data-role="radio"] > div {float:left;}
div.box_popup div.popup > div.popup_inner.plus_search > div > div.search > ul > li > div[data-role="radio"] > div > label > span {display:inline-block; width:24px; height:24px; margin-bottom:4px; margin-right:8px; border:8px solid #fff; background:#ccc; border-radius:50%; cursor:pointer; vertical-align:middle; box-sizing:border-box;}
div.box_popup div.popup > div.popup_inner.plus_search > div > div.search > ul > li > div[data-role="radio"] > div > input:checked + label > span {border-color:#0036ce; background:#fff;}
div.box_popup div.popup > div.popup_inner.plus_search > div > div[data-role="button"] {padding:25px 0 0;}
div.box_popup div.popup > div.popup_inner.plus_search > div > div[data-role="button"] > button {font-size:15px; font-weight:bold;}
div.box_popup div.popup > div.popup_inner.plus_search > div > div[data-role="button"] > button.etc_button {margin-right:4px; background:#ebebeb;}

/* 검색창 노출 화면 */
/* 23.03.02 허만우 스타일 수정 { */
header.header {z-index:10;}
/* } 23.03.02 허만우 스타일 수정 */
div.dim {display:none;}
div.dim.on {position:fixed; display:block; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7);}

div[data-role="context_list"] > div.list_header.integrated > strong {font-size:24px; font-weight:bold;}
div[data-role="context_list"] > div.list_header.integrated > span {position:relative; display:inline-block; padding-left:40px; vertical-align:inherit;}
div[data-role="context_list"] > div.list_header.integrated > span:after {content:''; display:inline-block; position:absolute; left:20px; top:-8px; width:1px; height:24px; background:#e5e5e5;}
div[data-role="context_list"] > div.list_header.integrated > span > b {color:#0035dd;}
ul.group_list {padding-top:40px;}
ul.group_list > li {margin-bottom:20px; padding:30px; background:#e3f0fc; box-sizing:border-box;}
ul.group_list > li:last-child {margin-bottom:0;}
ul.group_list > li::after {content:''; display:block; clear:both;}
ul.group_list > li > div {float:left;}
ul.group_list > li > div.image {position:relative; width:25%; height:160px; padding-top:14px; padding-left:14px; background-repeat:no-repeat; background-position:center; background-size:cover; overflow:hidden; box-sizing:border-box;}
ul.group_list > li > div.image 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.group_list > li > div.image button.favorite > i {display:block; width:33px; height:33px; line-height:33px; text-align:center;}
ul.group_list > li > div.image button.favorite > i:before {display:block; width:33px; height:33px; line-height:36px; text-align:center;}
ul.group_list > li > div.image button.favorite.favorite_select {color:#ee137b;}
ul.group_list > li > div.image button.favorite.favorite_select > i:before {content:"\ea10";}
ul.group_list > li > div.text {width:72%; padding-left:30px;}
ul.group_list > li > div.text > strong {display:inline-block; width:100%; margin-bottom:20px; font-size:20px; line-height:26px; word-break:keep-all;}
ul.group_list > li > div.text > p {margin-bottom:20px; line-height:20px; word-break:keep-all; color:rgba(0,0,0,0.8);}
ul.group_list > li > div.text > div.week {margin-bottom:20px;}
ul.group_list > li > div.text > div.week > span {color:rgba(0,0,0,0.8);}
ul.group_list > li > div.text > div.week > span > b {display:inline-block; padding-left:10px; color:#000;}
ul.group_list > li > div.text > div.week > span.total {position:relative; padding-right:30px;}
ul.group_list > li > div.text > div.week > span.total::after {content:''; position:absolute; right:12px; top:4px; display:inline-block; width:1px; height:14px; background:#b6c0ca;}
/* 22.11.17 oz-10 묶음강좌 스타일 수정 { */
ul.group_list > li > div.text > div.tag {display:none;}/* display:none 처리 11-17 */
/* } 22.11.17 oz-10 묶음강좌 스타일 수정 */
ul.group_list > li > div.text > div.tag > span {display:inline-block; padding:5px; font-size:12px; border-radius:2px; background:#fff; color:#808080; box-sizing:border-box;}

ul.notice_list {padding-bottom:40px;}
ul.notice_list > li {display:table; width:100%; font-size:16px; border-bottom:1px solid #e6e6e6; table-layout:fixed; box-sizing:border-box;}
ul.notice_list > li > span {display:table-cell; height:80px; padding:0 20px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; vertical-align:middle; box-sizing:border-box;}
ul.notice_list > li > span.type {position:relative; width:100px; color:#0036ce;}

ul.notice_list > li > span.type.kmooc {width:135px;}
ul.notice_list > li > span.type::after {content:''; position:absolute; right:6px; top:34px; display:inline-block; width:1px; height:15px; background:#e6e6e6;}
ul.notice_list > li > span.title > a {min-width:100%;}
ul.notice_list > li > span.title > i.clip {display:inline-block; width:14px; height:16px; margin-left:10px; background:url(../image/ico_clip.png) no-repeat center; vertical-align:middle;}
ul.notice_list > li > span.date {width:130px; color:rgba(0,0,0,0.8);}

ul.card_list[data-role="program"].vod li.card_item {height:275px;}
ul.card_list[data-role="program"].vod li.card_item > a > div.card_content {height:115px; padding-top:20px;}
ul.card_list[data-role="program"].vod li.card_item > a > div.card_content div.date {margin-bottom:0;}
ul.card_list[data-role="program"].vod li.card_item > a > div.card_img > i {position:absolute; left:50%; top:50%; display:inline-block; width:46px; height:46px; font-size:30px; line-height:46px; text-indent:5px; color:#fff; background:#00A85D; transform:translate(-50%,-50%); text-align:center;}
div.box_popup div.popup.vod {width:540px;}
div.box_popup div.popup.vod > div.popup_inner > div > p {font-size:14px; line-height:24px; text-align:center; word-break:keep-all;}
div.box_popup div.popup.vod > div.popup_inner div.line {margin:25px 0;}
div.box_popup div.popup.vod > div.popup_inner > div > div.email_button {text-align:center;}
div.box_popup div.popup.vod > div.popup_inner > div > div.email_button > button {display:inline-block; width:150px; height:48px; font-size:15px; font-weight:600; line-height:48px; border-radius:4px; background:#ebebeb; text-align:center;}
div.box_popup div.popup.vod > div.popup_inner > div > div.email_button > button.btn_submit {margin-left:4px; background:#0036ce; color:#fff;}

/* 탭 카테고리 */
div[data-role=tabbar] > div > ul {display:table; width:100%; padding:0px; margin:0px; table-layout:fixed; list-style:none;}
div[data-role=tabbar] > div > ul > li {display:table-cell; width:auto; height:67px;}
div[data-role=tabbar] > div > ul > li > button {display:block; width:100%; font-size:16px; font-weight:bold; line-height:66px; border:1px solid #e0e0e0; border-bottom:1px solid #000; border-right:none; text-align:center;}
div[data-role=tabbar] > div > ul > li:last-child > button {border-right:1px solid #e0e0e0;}
div[data-role=tabbar] > div > ul > li.selected > button {border:1px solid #0036ce; color:#fff; background:#0036ce; text-overflow:ellipsis; overflow:hidden; white-space:nowrap;}
div[data-role=tab] > div > h4 {margin:30px 0; font-size:22px; font-weight:500; line-height:24px; text-align:center;}



main.open_list div[data-role="tab_menu"] ul.tab_wrap li {width:275px;}
main.open_list ul.card_list[data-role="program"] {padding-top:20px;}
main.open_list ul.card_list[data-role="program"] li.card_item {height:335px;}
main.open_list ul.card_list[data-role="program"] li.card_item > a > div.card_content {height:175px;}
main.open_list ul.card_list[data-role="program"] li.card_item > a > div.card_content strong.title {height:41px; margin-bottom:12px;}
/* 23.09.06 썸네일비율 스타일 수정 { */
main.open_list ul.card_list[data-role="program"] li.card_item > a > div.card_img small.num {display:inline-block; margin-top:14px; width:28px; height:27px; font-size:12px; font-weight:bold; line-height:24px; text-indent:-4px; background:url(../image/ico_open_num.png) no-repeat center; text-align:center; color:#fff; box-sizing:border-box; vertical-align:top;}
main.open_list ul.card_list[data-role="program"] li.card_item > a > div.card_img small.people {display:inline-block; padding:3px 6px; margin-top:14px; font-size:12px; font-weight:bold; border-radius:2px; background:rgba(195,32,230,0.9); color:#fff; box-sizing:border-box; vertical-align:top;}

/* K-MOOC+ */
main.plus div[data-role="search"].plus div.search {width:calc(100% - 130px);}
main.plus div.page_title_wrap.type_bg strong {display:inline-block; width:100%; margin-bottom:15px; font-size:20px; font-weight:bold; line-height:26px; color:#fff; word-break:keep-all;}
main.plus div.page_title_wrap.type_bg p.text {margin-bottom:25px; font-size:16px; line-height:26px; color:rgba(250,250,250,0.8); word-break:keep-all;}
main.plus ul.card_list[data-role="program"] {margin:20px -12px;}

/* 마이크로러닝 */
main.micro_lern div[data-role="tab"] ul.tab_wrap_micro {position:relative; overflow:hidden; height:60px; white-space:nowrap; font-size:0; border-right:1px solid #e0e0e0;}
main.micro_lern div[data-role="tab"] ul.tab_wrap_micro li {box-sizing:border-box; display:inline-block; width:calc(100% / 2); border-left:1px solid #e0e0e0; font-size:16px; color:#000; font-weight:bold; line-height:60px; text-align:center; cursor:pointer; transition:all 0.3s;}
main.micro_lern div[data-role="tab"] ul.tab_wrap_micro li.active {background:#0035dd; color:#fff;}
main.micro_lern div[data-role="tab"] ul.tab_wrap_micro li:hover {background:#0035dd; color:#fff;}
main.micro_lern div[data-role="tab"] ul.tab_wrap_micro li a {display:block; width:100%; height:100%;}
main.micro_lern div[data-role="search"].micro_lern div.search {width:calc(100% - 130px);}
main.micro_lern div.page_title_wrap.type_bg strong {display:inline-block; width:100%; margin-bottom:15px; font-size:20px; font-weight:bold; line-height:26px; color:#fff; word-break:keep-all;}
main.micro_lern div.page_title_wrap.type_bg p.text {margin-bottom:25px; font-size:16px; line-height:26px; color:rgba(250,250,250,0.8); word-break:keep-all;}
main.micro_lern div.context {padding-bottom:0;}
main.micro_lern div.context div.issue {padding:60px 0 48px; background:#e3f0fc; box-sizing:border-box;}
main.micro_lern div.context div.issue div.title_logo {margin-bottom:30px; text-align:center;}
main.micro_lern div.context div.issue div.item {position:relative;}
/* 22.11.29 oz8 스타일 수정 { */
main.micro_lern div.context div.issue div.item ul {display:flex; flex-wrap:wrap; margin:0 -20px;}
main.micro_lern div.context div.issue div.item ul li {width:auto; margin:0 20px;}
main.micro_lern div.context div.issue div.item ul li > a > div.img {position:relative; width:100%; height:212px; background-repeat:no-repeat; background-position:center; background-size:cover; overflow:hidden; box-sizing:border-box;}
/* } 22.11.29 oz8 스타일 수정 */
main.micro_lern div.context div.issue div.item ul li > a > strong {display:inline-block; width:100%; margin-top:20px; padding:0 10px; font-size:18px; font-weight:bold; line-height:26px; box-sizing:border-box; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
main.micro_lern div.context div.issue div.item div.button {position:absolute; left:0; top:0; width:100%;}
main.micro_lern div.context div.issue div.item div.button > button {display:inline-block; position:absolute; top:90px; width:40px; height:40px; border-radius:40px; background:#fff; text-align:center;}
main.micro_lern div.context div.issue div.item div.button > button.issue_prev {left:-20px;}
main.micro_lern div.context div.issue div.item div.button > button.issue_next {right:-20px;}
main.micro_lern div.context div.issue div.item div.button > button > i {font-size:14px; font-weight:bold;}
main.micro_lern div.footer_banner {display:flex; flex-wrap:wrap; margin:60px 0;}
main.micro_lern div.footer_banner > div.main {position:relative; width:650px; margin-right:30px;}
main.micro_lern div.footer_banner > div.main ul.visual_list {display:inline-block; width:100%; height:100%;}
/* 22.12.07 허만우 스타일 수정 { */
main.micro_lern div.footer_banner > div.main ul.visual_list li.item {display:inline-block; width:100%; height:310px; border-radius:10px; box-sizing:border-box;}
main.micro_lern div.footer_banner > div.main ul.visual_list li.item > a > img {width:100%;}
/* } 22.12.07 허만우 스타일 수정 */
main.micro_lern div.footer_banner > div.main div.box_btn {position:absolute; top:45%; left:0; width:100%; transform:translateY(-50%);}
main.micro_lern div.footer_banner > div.main div.box_btn > button.btn_visual {position:absolute; display:inline-block; width:40px; height:40px; border:1px solid #f1f1f1; border-radius:40px; box-shadow:2px 2px 10px 2px rgba(0,0,0,0.1); background:#fff; text-align:center;}
main.micro_lern div.footer_banner > div.main div.box_btn > button.btn_visual > i {font-size:14px; font-weight:bold; line-height:40px;}
main.micro_lern div.footer_banner > div.main div.box_btn > button.visual_prev {left:-20px;}
main.micro_lern div.footer_banner > div.main div.box_btn > button.visual_next {right:-20px;}
/* 22.12.07 허만우 스타일 수정 { */
main.micro_lern div.footer_banner > div.main div.wrap_dots {position:absolute; bottom:30px; left:50%;}
/* } 22.12.07 허만우 스타일 수정 */
main.micro_lern div.footer_banner > div.main div.wrap_dots > button {float:right;}
main.micro_lern div.footer_banner > div.main div.wrap_dots ul.slick-dots {float:left;}
main.micro_lern div.footer_banner > div.main div.wrap_dots ul.slick-dots:after {content:''; display:block; clear:both; }
main.micro_lern div.footer_banner > div.main div.wrap_dots ul.slick-dots {font-size:0; list-style:none; vertical-align:middle;}
main.micro_lern div.footer_banner > div.main div.wrap_dots ul.slick-dots > li {display:inline-block; margin-right:10px; line-height:19px; vertical-align:bottom; font-size:0; }
main.micro_lern div.footer_banner > div.main div.wrap_dots ul.slick-dots > li > button {width:10px; height:10px; padding:0; background:rgba(0,0,0,0.2); border-radius:50%; cursor:pointer; transition:all 0.3s; transform:rotate(0.001deg); font-size:0;}
main.micro_lern div.footer_banner > div.main div.wrap_dots ul.slick-dots > li.slick-active > button {background:#000;}
main.micro_lern div.footer_banner > div.side {float:right; width:calc(100% - 680px);}
/* 22.12.08 허만우 스타일 수정 { */
main.micro_lern div.footer_banner > div.side > div > a {display:block; height:150px; border-radius:10px; box-sizing:border-box;}
main.micro_lern div.footer_banner > div.side > div > a > p.text {margin-top:20px; font-size:15px; line-height:20px;}
main.micro_lern div.footer_banner > div.side > div > a > p.title > span {vertical-align:middle;}
main.micro_lern div.footer_banner > div.side > div > a > p.title > i {vertical-align:middle;}
main.micro_lern div.footer_banner > div.side > div > a > p.title {font-size:20px; font-weight:bold; line-height:26px;}
main.micro_lern div.footer_banner > div.side > div > a > img {width: 100%; max-width:100%;}
main.micro_lern div.footer_banner > div.side > div.cosera > a {margin-bottom:10px;}
/* } 22.12.08 허만우 스타일 수정 */

@media screen and (max-width:1200px) {
    /* kmooc */
    main.about_kmooc div.box_content.howto ul > li {display:flex; flex-direction:column; padding-bottom:0;}
    main.about_kmooc div.box_content.howto ul > li:after {position:static; display:block; width:100%; background-position:center right 5px;}
    main.about_kmooc div.box_content.howto ul > li > div.box_txt {flex:1;}

    /* 참여기관 about institution */
    main.about_institution div[data-role="context_list"] > ul > li {width:33.3333%;}

    /* 마이크로러닝 */
    /* 22.12.08 허만우 스타일 수정 { */
    main.micro_lern div.footer_banner > div.main {width:100%; margin-right:0; margin-bottom:20px;}
    main.micro_lern div.footer_banner > div.side {width:100%; display:flex; gap:10px;}
    main.micro_lern div.footer_banner > div.side > div {width: 50%;}
    main.micro_lern div.footer_banner > div.side > div > a {height:auto;}
    main.micro_lern div.footer_banner > div.side > div.cosera > a {margin-bottom: 0;}
    /* } 22.12.08 허만우 스타일 수정 */

    /* } 23.03.09 oz15 매치업 소개 스타일 수정 */
    div[data-role="tab_menu"] ul.tab_wrap li:nth-child(6),div[data-role="tab_menu"] ul.tab_wrap li:nth-child(11) {border-left:none !important;}
    main.about_institution_detail div[data-role="tab_menu"] ul.tab_wrap li:first-child {border-left: 1px solid #e0e0e0 !important;}
    main.about_institution_detail div[data-role="tab_menu"] ul.tab_wrap li {border-top: 1px solid #e0e0e0 !important; border-right: 1px solid #e0e0e0 !important;}
}

@media screen and (max-width:1020px) {
    /* 마이크로러닝 */
    /* 22.12.08 허만우 스타일 수정 { */
    main.micro_lern div.footer_banner > div.main ul.visual_list li.item {height:auto;}
    /* } 22.12.08 허만우 스타일 수정 */
}

@media screen and (max-width:1199px) {
    /* about BI */
    main.about_bi div.right.bi {position:static; margin-top:45px;}

    /* 검색결과 */
    ul.group_list > li > div.image {width:100%;}
    /* 23.09.06 썸네일비율 스타일 수정 { */
    ul.group_list > li > div.image {width:100%; height:auto; padding-top:0; padding-bottom:59.86%;}
    /* } 23.09.06 썸네일비율 스타일 수정 */
    ul.group_list > li > div.text {width:100%; padding-left:0; padding-top:30px;}

    /* 마이크로러닝 */
    main.micro_lern div.context div.issue div.item ul {margin:0;}
    main.micro_lern div.footer_banner > div.main ul.visual_list li.item {height:auto;}

    /* 마이크로러닝 상세페이지 */
    main.micro_lern div.context div.issue div.item ul li {margin-right:0; margin:0 20px;}
    main.micro_lern div.context div.issue div.item div.button > button.issue_prev {left:-5px;}
    main.micro_lern div.context div.issue div.item div.button > button.issue_next {right:-5px;}
}

@media screen and (max-width:991px) {
    /* kmooc */
    main.about_kmooc div.kmooc_mean:before {top:-25px; right:-25px; width:50px; height:50px;}
    main.about_kmooc div.box_content {padding:40px;}
    main.about_kmooc div.box_content.howto ul > li p.dot br {display:none;}

    /* about BI */
    /* 2022.12.30 허만우 스타일수정 { */
    main.about_bi div.page_visual_wrap > div.container-fluid > div {width:100%;}
    main.about_bi div.page_visual_wrap > div.container-fluid > div.right.bi {padding-top:20px; margin-bottom:-30px;}
    main.about_bi div.page_visual_wrap p.title br {display:none;}
    /* } 2022.12.30 허만우 스타일수정 */

    /* 강좌 카테고리 */
    /* main.about_institution_detail div[data-role="search"].faq div.search {width:100%;} */

    div.box_popup div.popup {width:90%;}
    div.box_popup div.popup.plus_search {width:90%;}
    /*div.box_popup div.popup > div.popup_inner > div {height:calc(100vh - 220px);}*/
    div.box_popup div.popup > div.popup_inner.vod > div {height:auto;}

    div.box_popup div.popup > div.popup_inner.plus_search > div > div.search > ul > li > div.title {width:100%; margin-bottom:30px;}
    div.box_popup div.popup > div.popup_inner.plus_search > div > div.search > ul > li > div[data-role="radio"] {width:100%;}
    div.box_popup div.popup > div.popup_inner.plus_search > div > div.search > ul > li > div[data-role="radio"] > div {float:left; width:calc(100% / 2); margin-bottom:20px;}
    div.box_popup div.popup > div.popup_inner.plus_search > div > div.search > ul > li > div[data-role="radio"] > div > label {margin-right:0;}
    div.box_popup div.popup > div.popup_inner.plus_search > div > div.search > ul > li > div[data-role="radio"].catagory > div {margin-right:30px;}
    div.box_popup div.popup > div.popup_inner.plus_search > div > div.search > ul > li > div[data-role="radio"].catagory > div:last-child {margin-right:0;}

    /* 교육강좌 리스트 */
    div.title_banner p {width:100%;}

    /* 검색창 노출화면 */
    div[data-role="all_search"] > div.container > div > div.recommend_list > ul > li {width:calc((100% - 5px) / 2); margin-bottom:5px;}
    div[data-role="all_search"] > div.container > div > div.recommend_list > ul > li:nth-of-type(2n) {margin-right:0;}
    div[data-role="all_search"] > div.container > div > div.recommend_list > ul > li:last-child {margin-bottom:0;}
}

@media screen and (max-width:830px) {
    /* kmooc */
    /* main.about_kmooc div.kmooc_mean:before {display:none;} */
}

@media screen and (max-width:768px) {
    /* kmooc */
    main.about_kmooc div.box_content {padding:20px;}
    main.about_kmooc div.box_content p.info br {display:none;}
    main.about_kmooc div.box_content.vision {padding-left:40px; padding-right:40px;}
    main.about_kmooc div.box_content.activity ul > li {width:calc(33.3333% - 14px); margin-right:20px;}
    main.about_kmooc div.box_content.howto ul > li {width:calc(50% - 5px);}
    main.about_kmooc div.box_content.howto ul > li:nth-of-type(3n) {margin-right:10px;}
    main.about_kmooc div.box_content.howto ul > li:nth-of-type(2n) {margin-right:0;}

    /* about BI */
    /* 22.12.30 허만우 스타일 수정 { */
    main.about_bi div.box_logo div {width:100%;}
    main.about_bi div.box_color div {width:100%; padding-bottom:20%;}
    /* } 22.12.30 허만우 스타일 수정 */

    /* 참여기관 about institution */
    main.about_institution div[data-role="context_list"] > ul > li {width:50%;}

    /* 참여기관 검색 */
    /* 22.12.30 허만우 스타일 수정 { */
    main.about_institution div[data-role="search"].institution div.search_wrap div.option { -webkit-box-ordinal-group:0; -ms-flex-order:0; order:0; width:calc(50% - 5px); margin-bottom:6px;}
    main.about_institution div[data-role="search"].institution div.search_wrap div.option select {width:100%;}
    main.about_institution div[data-role="search"].institution div.search_wrap div.search { -webkit-box-ordinal-group:1; -ms-flex-order:1; order:1;}
    main.about_institution div[data-role="search"].institution div.search_wrap button.all { -webkit-box-ordinal-group:2; -ms-flex-order:2; order:2;}
    main.about_institution div[data-role="search"].institution div.search_wrap div.option + div.search {width:calc(100% - 130px); margin-left:0;}
    /* } 22.12.30 허만우 스타일 수정 */

    /* 참여기관 상세 about institution detail */
    main.about_institution_detail div.insitution_info div.box_info > div.thumb {width:100%;}
    main.about_institution_detail div.insitution_info div.box_info > div.info {width:100%; padding:20px 0 0;}
    main.about_institution_detail div.insitution_info div.box_info > div.info > div.box_link {top:20px;}

    /* data-role="program" */
    /* 23.09.06 썸네일비율 스타일 수정 { */
    main.open_list ul.card_list[data-role="program"] li.card_item {height:auto !important;}
    /* } 23.09.06 썸네일비율 스타일 수정 */

    div.box_popup div.popup > div.popup_inner.plus_search > div > div.search > ul > li > div[data-role="radio"] > div {width:100%;}
    div.box_popup div.popup > div.popup_inner.plus_search > div > div.search > ul > li > div[data-role="radio"].catagory > div {width:100%; margin-right:0;}

    /* 검색결과 */
    ul.notice_list > li {display:block; padding:10px 0; font-size:14px;}
    ul.notice_list > li > span {display:inline-block; width:100%; height:auto; padding:6px 10px 6px 10px;}
    ul.notice_list > li > span.title > a {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: block;}
    ul.notice_list > li > span.type {width:100%;}
    ul.notice_list > li > span.type::after {display:none;}
    ul.notice_list > li > span.date {width:100%;}
    ul.notice_list > li > span.type.kmooc {width:100%;}

    /* 공개강좌 */
    main.open_list div[data-role="search"].group button.all {margin-left:0; margin-bottom:5px;}
    /* } 22.01.11 스타일 수정 */

    /* K-MOOC+ */
    main.plus div[data-role="search"].plus div.search {width:100%;}
    /* 22.12.19 허만우 스타일 수정 { */
    main.plus div[data-role="search"] div.search + button.all {width:100%; margin-left:0; margin-bottom:5px;}
    /* } 22.12.19 허만우 스타일 수정 */

    /* 마이크로러닝 */
    main.micro_lern div[data-role="search"].micro_lern div.search {width:100%;}
    main.micro_lern div[data-role="search"] div.search + button.all {width:100%; margin-left:0; margin-bottom:5px;}

    /* 23.01.11 강좌 카테고리 추가 { */
    main.about_institution_detail div[data-role="search"].faq div.search {width:100%; margin-top:5px;}
    main.about_institution_detail div[data-role="search"].faq div.search + button.all {width:100%; margin-left:0; margin-bottom:5px;}
    /* } 23.01.11 강좌 카테고리 추가 */
}

@media screen and (max-width:678px) {
    div.box_popup div.popup.vod {width:90%;}
}

@media screen and (max-width:550px) {
    /* 마이크로러닝 */
    main.micro_lern div.footer_banner > div.main div.box_btn > button.visual_prev {left:-5px;}
    main.micro_lern div.footer_banner > div.main div.box_btn > button.visual_next {right:-5px;}
    /* 22.12.08 허만우 스타일 수정 { */
    main.micro_lern div.footer_banner > div.main {margin-bottom: 10px;}
    main.micro_lern div.footer_banner > div.side {gap:0; flex-direction: column;}
    main.micro_lern div.footer_banner > div.side > div {width: 100%; margin-bottom: 10px;}
    /* } 22.12.08 허만우 스타일 수정 */
    main.micro_lern div[data-role="context_list"] > div.list_header > p.count {float:inherit; margin-bottom:20px;}
    main.micro_lern div[data-role="context_list"] > div.list_header > p.sort {float:inherit;}

    /* K-MOOC 소개 */
    main.about_kmooc div.box_content.activity ul > li {width:100%; margin-bottom:30px;}
    main.about_kmooc div.box_content.activity ul > li:last-child {margin-bottom:0;}

    main.about_kmooc div.box_content.howto ul > li {width: 100%; margin-right: initial;}
    main.about_kmooc div.box_content.howto ul > li:nth-of-type(3n) {margin-right: initial;}
}

@media screen and (max-width:480px) {
    /* 검색창노출화면 */
    div[data-role="all_search"] > div.container > div > div.recommend_list > ul > li {width:100%; margin-right:0;}

    div[data-role=input][data-type=select] > div > span {padding:0 5px; font-size:13px;}

    /* 팝업 */
    div.box_popup div.popup > div.popup_inner > div {height:calc(80vh - 220px);}
    /* 23.01.30 oz10 vod 팝업 스타일 수정 { */
    div.box_popup div.popup > div.popup_inner.vod > div {height:auto;}
    div.box_popup div.popup.vod > div.popup_inner.vod > div > div.email_button > button.btn_submit {margin:0 0 0 4px;}
    div.box_popup div.popup.vod > div.popup_inner.vod > div > div.email_button > button {width:calc(50% - 4px);}
    /* } 23.01.30 oz10 vod 팝업 스타일 수정 */
    div.box_popup div.popup.vod > div.popup_inner > div > div.email_button > button.btn_submit {margin-left:0; margin-top:4px;}

    /* 마이크로러닝 */
    main.micro_lern div.footer_banner > div.side > div.cosera > a {background-image:none;}
    main.micro_lern div.footer_banner > div.side > div.sericeo > a {background-image:none;}
    main.micro_lern div[data-role="context_list"] > div.list_header > p.sort > button {line-height:30px;}
    main.micro_lern div[data-role="context_list"] > div.list_header > p.sort > button + button:before {top:8px;}
}

@media screen and (max-width:460px) {
    /* 참여기관 about institution */
    main.about_institution div[data-role="context_list"] > div.list_header > p.count {font-size:16px;}
    main.about_institution div[data-role="context_list"] > ul > li {width:100%;}

    /* 참여기관 상세 about institution detail */
    main.about_institution_detail div.insitution_info div.box_info > div.info > div.box_link {position:static; margin-top:15px;}
    main.about_institution_detail div.insitution_info div.box_info > div.info > div.box_link > a:nth-of-type(1) {padding-left:0;}
    /* 23.05.10 oz-15 스타일 추가 { */
    main.about_institution_detail div.insitution_info div.box_info > div.info > div.box_link > a.homepage {padding-left:0; margin-left:0;}
    /* } 23.05.10 oz-15 스타일 추가 */
    main.about_institution_detail div.insitution_info div.box_info > div.info > p.summary > span {display:block;}
    main.about_institution_detail div.insitution_info div.box_info > div.info > p.summary > span + span {margin-left:0; margin-top:8px;}
}

@media (max-width:1199px) {
    /* 23.03.16 oz15 스타일 수정 { */
    div[data-role="tab_menu"] ul.tab_wrap li {transition:none;}
    /* } 23.03.16 oz15 스타일 수정 */
}

@media (max-width:769px) {
    /* 마이크로러닝 */
    main.micro_lern div.footer_banner > div.main div.box_btn > button.visual_prev {left:-10px;}
    main.micro_lern div.footer_banner > div.main div.box_btn > button.visual_next {right:-10px;}
}

@media (max-width:420px) {
    /* 마이크로러닝 */
    main.micro_lern div.footer_banner > div.main div.box_btn > button.btn_visual {width:30px; height:30px;}
    main.micro_lern div.footer_banner > div.main div.box_btn > button.btn_visual > i {line-height:30px;}
}

@media (max-width:350px) {
    /* 23.02.28 oz15 스타일 수정 { */
    div.title_banner > strong {font-size:26px;}
    div[data-role="tab_menu"] button.tab_prev {left:10px;}
    div[data-role="tab_menu"] button.tab_next {right:10px;}
    /* } 23.02.28 oz15 스타일 수정 */
}

@media (max-width:321px) {
    /* 검색결과 */
    ul.group_list > li {padding:10px;}

    /* about_kmooc */
    main.about_kmooc div.box_content.vision {padding-left:10px; padding-right:10px;}
    main.about_kmooc div.box_content {padding:10px;}
    main.about_kmooc div.box_content.howto ul > li {width:100%; margin-right:0;}

    /* about BI */
    main.about_bi div.box_logo div {background-size:contain;}
}