@charset "utf-8";
/*상시교육(공통)*/
.listData{padding:50px 0 120px 0}
.alwaysSlider .slide_wrap{position:relative}
.alwaysSlider .swiper-button-prev,
.alwaysSlider .swiper-button-next{background-image:none;margin-top:0;top:26.5%;z-index:999}
.alwaysSlider .swiper-button-prev{left:-24px;width:48px}
.alwaysSlider .swiper-button-next{right:-24px;width:48px}
.alwaysSlider .cntl img{width:100%}
.alwaysSlider .cntl.disable{opacity:0}
.alwaysSlider .cntl.active{opacity:1}
/*추천콘텐츠*/
.goodClass{margin:50px 0}
.goodClass > div{width:100%;display:table}
.goodClass .thumb{width:50%;display:table-cell;padding-right:20px;vertical-align:top}
.goodClass .thumb a{display:block;height:400px;position:relative;background-position:center center;background-repeat:no-repeat;background-size:cover;border-radius:3px}
.goodClass .thumb span{position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,0.7);color:#fff;line-height:28px;padding:0 10px;border-radius:2px}
.goodClass .thumb span i{margin-right:8px;line-height:0;display:inline-block;vertical-align:text-bottom}
.goodClass .info{width:50%;display:table-cell;padding-left:20px;vertical-align:top}
.goodClass .info li{width:100%;display:inline-block}
.goodClass .part{font-size:16px;color:#767676;margin-bottom:10px}
.goodClass .name a{display:block;font-size:32px;line-height:42px;font-weight:700}
.goodClass .mnp{margin:12px 0;padding-bottom:13px;border-bottom:1px solid #e0e0e0}
.goodClass .mnp span{line-height:28px;display:inline-block}
.goodClass .mnp .state{padding:0 7px;color:#fff;margin-right:6px;border-radius:3px}
.goodClass .mnp .state.ready{background:#ffaf26}
.goodClass .mnp .state.end{background:#ccc}
.goodClass .mnp .state.ing{background:#101010}
.goodClass .mnp .law{background:#ff6b68;color:#fff;padding:0 7px;border-radius:3px;margin-right:6px}
.goodClass .mnp .point{padding-left:20px;display:inline-block;background:url(../../../images/grac/images/icon_star_s.png) no-repeat left center}
.goodClass .mnp .point i{color:#767676}
.goodClass .info .text{padding:50px 0;border-bottom:1px solid #e0e0e0}
.goodClass .info .per{line-height:16px;color:#767676}
.goodClass .info .per i{padding-left:30px;background:url(../../../images/grac/images/icon_person.png) no-repeat left center} 
.goodClass .info .per b{color:#101010;font-weight:700}
.goodClass .info .cnt{min-height:86px;color:#505050;font-size:17px;line-height:29px;text-align:justify;margin-top:22px}
.featuredCnt{margin-top:3px}
.featuredCnt h5{font-size:28px;font-weight:700;line-height:77px}
/*수강 중인 콘텐츠*/
.yearSelect{margin:50px 0}
.yearSelect form{display:inline-block;position:relative}
.yearSelect i.icon{width:24px;height:24px;position:absolute;left:19px;top:50%;transform:translateY(-50%);background:url(../../../images/grac/images/icon_sort_calendar.png)}
.yearSelect select.selectDrop{width:288px;height:72px;padding-left:37px;background-image:url(../../../images/grac/images/icon_black_down_arrow.png)}
.classEnd{margin-top:90px}
.classEnd h5{font-size:28px;font-weight:700;line-height:77px}
.classEnd h5 span{display:inline-block;position:relative}
.classEnd h5 i{width:26px;line-height:26px;text-align:center;position:absolute;right:-26px;top:12px;border-radius:100%;background:linear-gradient(125deg,#4a77ce,#634dd8);color:#fff;font-size:16px}
.classEnd .list > ul{width:103%;display:inline-block}
.classEnd .list > ul > li{width:400px;float:left;margin-right:40px;margin-bottom:80px}
.classEnd .list > ul > li:nth-child(3n){margin-right:0}
.classEnd .moreView{text-align:center;margin-top:37px}
.classEnd .moreView a{width:620px;line-height:78px;display:inline-block;border:1px solid #101010;font-size:16px;font-weight:700}
.classEnd .moreView a img{margin-left:5px}
/*상시교육 상세*/
.detailsData{padding-bottom:120px}
.detailsData .infomation{width:840px;float:left}
.detailsData .video{width:840px;overflow:hidden;border-radius:3px;background:#101010;position:relative}
.detailsData .video iframe{width:100%;height:512px;border:none}
.detailsData .video .recMovie{padding:20px 45px;position:absolute;left:0;bottom:44px;width:100%;background:rgba(0,0,0,0.7)}
.detailsData .video .recMovie .flex-viewport{overflow:hidden}
.detailsData .video .recMovie li{width:180px;background:#212224;color:#fff;border-radius:3px;overflow:hidden;margin-right:10px}
.detailsData .video .recMovie li a{display:block;padding-bottom:14px}
.detailsData .video p.thumb{height:112px;position:relative;background-position:center center;background-repeat:no-repeat;background-size:cover}
.detailsData .video p.thumb span{position:absolute;right:8px;top:8px;line-height:28px;padding:0 8px;color:#fff;border-radius:3px}
.detailsData .video p.thumb span.law{background:#ff6b68}
.detailsData .video p.thumb span.job{background:#1db8ab}
.detailsData .video p.thumb span.free{background:#abacfa}
.detailsData .video p.name{padding:0 14px;height:35px;font-size:16px;color:#fff;line-height:18px;margin:12px 0;display:block;display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-ms-text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.detailsData .video p.info{padding:0 14px}
.detailsData .video p.info span{display:inline-block;padding-left:22px;line-height:16px;font-weight:700;color:#fff}
.detailsData .video p.info span.per{background:url(../../../images/grac/images/icon_application_1.png) no-repeat left center}
.detailsData .video p.info span.point{background:url(../../../images/grac/images/icon_star.png) no-repeat left center;margin-left:20px}
.detailsData .video a.ctrl{padding:15px;position:absolute;top:50%;transform:translateY(-50%)}
.detailsData .video a.ctrl.prev{left:4px}
.detailsData .video a.ctrl.next{right:4px}
.detailsData .video .recMovieMobile{display:none}
.detailsData .infomation .part{font-size:16px;margin:28px 0 13px 0;color:#767676}
.detailsData .infomation li{width:100%;display:inline-block}
.detailsData .infomation .name{font-size:32px;font-weight:700;line-height:40px}
.detailsData .infomation .other{margin:25px 0 15px 0}
.detailsData .infomation dl{display:inline-block;vertical-align:middle}
.detailsData .infomation dt{float:left;margin-right:10px;color:#767676;line-height:34px}
.detailsData .infomation dd{float:left;margin-right:40px;font-weight:700;line-height:34px}
.detailsData .infomation a.pt_btn{background:linear-gradient(90deg,#4e70cf,#5e56d5);color:#fff;font-weight:700;padding:0 15px;display:inline-block;border-radius:3px}
.detailsData .infomation span.point{padding-left:21px;font-weight:700;background:url(../../../images/grac/images/icon_star_s.png) no-repeat left center;line-height:1}
.detailsData .infomation span.point i{font-weight:normal;color:#767676}
.detailsData .infomation span.point.off{background:url(../../../images/grac/images/icon_star_s_off.png) no-repeat left center}
.detailsData .infomation span.mypoint{padding-left:21px;font-weight:700;background:url(../../../images/grac/images/icon_star_s_blue.png) no-repeat left center;line-height:1}
.detailsData .infomation .textCnt{padding:0 20px;line-height:72px;height:72px;overflow:hidden;border-top:1px solid #e0e0e0;border-bottom:1px solid #e0e0e0;background:url(../../../images/grac/images/icon_black_down_arrow.png) no-repeat calc(100% - 20px) calc(100% - 30px);font-size:16px;color:#767676}
.detailsData .infomation .textCnt.on{line-height:1.2;padding:25px 20px;height:auto}
.detailsData .relatedCnt{width:400px;float:right}
.detailsData .relatedCnt h5{font-size:24px;font-weight:700;padding-bottom:28px}
.detailsData .relatedCnt div.roll{width:100%;overflow-x:hidden;overflow-y:auto}
.detailsData .relatedCnt div.roll::-webkit-scrollbar{width:7px}
.detailsData .relatedCnt div.roll::-webkit-scrollbar-track{background:#ccc; border-radius:5px}
.detailsData .relatedCnt div.roll::-webkit-scrollbar-thumb{background:#b7b7b7; border-radius:5px}
.detailsData .relatedCnt div.roll::-webkit-scrollbar-thumb:hover{background:#999; border-radius:5px}
.detailsData .relatedCnt a{display:block;margin-bottom:28px}
.detailsData .relatedCnt ul{width:100%;display:inline-block}
.detailsData .relatedCnt ul li{float:left}
.detailsData .relatedCnt ul li.thumb{width:180px;height:112px;background-position:center center;background-repeat:no-repeat;background-size:cover;border-radius:3px;position:relative}
.detailsData .relatedCnt ul li.thumb span{position:absolute;right:8px;top:8px;line-height:28px;padding:0 8px;color:#fff;border-radius:3px}
.detailsData .relatedCnt ul li.thumb span.law{background:#ff6b68}
.detailsData .relatedCnt ul li.thumb span.job{background:#1db8ab}
.detailsData .relatedCnt ul li.thumb span.free{background:#abacfa}
.detailsData .relatedCnt ul li.info{width:calc(100% - 180px);padding:18px 20px 0 20px}
.detailsData .relatedCnt p.name{font-size:16px;height:38px;line-height:1.2;margin-bottom:20px;font-weight:700;display:block;display:-webkit-box;overflow:hidden;text-overflow:ellipsis;-ms-text-overflow:ellipsis;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.detailsData .relatedCnt ul li.info > div span{display:inline-block;padding-left:22px;line-height:16px;font-weight:700}
.detailsData .relatedCnt span.per{background:url(../../../images/grac/images/icon_application_1.png) no-repeat left center}
.detailsData .relatedCnt span.point{background:url(../../../images/grac/images/icon_star.png) no-repeat left center;margin-left:15px}
/*팝업(수강완료전 평가하기 알림)*/
.evalNotiPopup .popData{width:426px;height:260px;text-align:center}
.evalNotiPopup .popData h5{font-size:22px;font-weight:700;margin:80px 0 40px 0}
.evalNotiPopup .popData a.ok{width:200px;line-height:60px;color:#fff;background:#20bdbe;font-size:18px;font-weight:700;display:inline-block}
/*팝업(수강완료 평가하기)*/
.pointEnterPopup .popData{width:540px;height:342px;text-align:center}
.pointEnterPopup .popData h3{font-size:28px;font-weight:700;margin:60px 0 28px 0}
.pointEnterPopup .popData > div{margin-bottom:60px}
.pointEnterPopup .popData .star{width:49px;height:48px;display:inline-block;background:url(../../../images/grac/images/icon_star_b_off.png) no-repeat;cursor:pointer}
.pointEnterPopup .popData .star.on{background:url(../../../images/grac/images/icon_star_b_blue.png) no-repeat}
.pointEnterPopup .popData button{width:200px;height:60px;font-size:18px;font-weight:700;border-radius:3px;margin:0 8px}
.pointEnterPopup .popData button.cancel{border:1px solid #e0e0e0;background:#fff}
.pointEnterPopup .popData button.confirm{border:1px solid #20bdbe;background:#20bdbe;color:#fff}
@media all and (max-width:1280px){
}
@media all and (max-width:812px){
    /*상시교육(공통)*/
    .eduAlways h5.commSubTitle{display:none}
    .listData{padding:6rem 0 12rem 0}
    .alwaysSlider{padding:0 0 0 4rem}
    .alwaysSlider .swiper-button-prev,
    .alwaysSlider .swiper-button-next{display:none!important}
    .alwaysSlider .galleryListType div.thumb{height:32.4rem;border-radius:0.3rem}
    .alwaysSlider .galleryListType i.part,
    .alwaysSlider .galleryListType a.name,
    .alwaysSlider .galleryListType dl.info{padding:0}
    /*추천콘텐츠*/
    .goodClass{margin:0 0 9rem 0;padding:0}
    .goodClass > div{display:inline-block}
    .goodClass .thumb{width:100%;display:block;padding-right:0}
    .goodClass .thumb a{height:63.4rem;border-radius:0}
    .goodClass .thumb span{position:absolute;right:1.2rem;bottom:1.3rem;line-height:3.8rem;padding:0 1.2rem;border-radius:0.2rem}
    .goodClass .thumb span i{margin-right:1rem;width:1.3rem;height:1.7rem;display:inline-block;background:url(../../../images/grac/images/svg/bt_play.svg) no-repeat;background-size:1.3rem}
    .goodClass .thumb span i img{display:none}
    .goodClass .info{width:100%;display:block;padding-left:0;padding:0 4rem}
    .goodClass .part{font-size:2.6rem;margin-bottom:2.5rem;margin-top:4rem}
    .goodClass .name a{font-size:3.4rem;line-height:4.2rem}
    .goodClass .mnp{margin:0;padding:2.5rem 0 4rem 0}
    .goodClass .mnp span{line-height:3.8rem;font-size:2.2rem}
    .goodClass .mnp .state{padding:0 1rem;margin-right:1.6rem;border-radius:0.3rem}
    .goodClass .mnp .law{padding:0 1rem;border-radius:0.3rem;margin-right:1.6rem}
    .goodClass .mnp .point{padding-left:3.5rem;background:url(../../../images/grac/images/svg/icon_star_s.svg) no-repeat left center;background-size:2.5rem;font-size:2.4rem}
    .goodClass .mnp .point b{font-weight:800}
    .goodClass .info .text{padding:6rem 0 5rem 0}
    .goodClass .info .per{line-height:2.4rem;font-size:2.2rem}
    .goodClass .info .per i{padding-left:4.3rem;background:url(../../../images/grac/images/svg/icon_person.svg) no-repeat left center;background-size:2.5rem} 
    .goodClass .info .per b{color:#101010;font-weight:700}
    .goodClass .info .cnt{min-height:86px;font-size:2.4rem;line-height:4.2rem;margin-top:3rem}
    .featuredCnt{margin-top:0}
    .featuredCnt h5{font-size:3.4rem;line-height:8.5rem}
    .featuredCnt .galleryListType dl.info dd span.point{display:block;float:none}
    /*수강 중인 콘텐츠*/
    .yearSelect{margin:0 0 4rem 0}
    .yearSelect form{width:100%}
    .yearSelect i.icon{width:2.4rem;height:2.4rem;left:2.8rem;background:url(../../../images/grac/images/svg/icon_sort_calendar_mo.svg);background-size:2.4rem}
    .yearSelect select.selectDrop{width:100%;height:8.4rem;padding-left:6rem;background-image:url(../../../images/grac/images/svg/icon_black_down_arrow_m.svg);background-size:2rem}
    .classEnd{margin-top:8rem;padding:0}
    .classEnd h5{font-size:2.8rem;line-height:8.2rem;padding:0 4rem}
    .classEnd h5 i{width:3.4rem;line-height:3.4rem;right:-3.4rem;top:0;font-size:2.2rem}
    .classEnd .list > ul{width:100%}
    .classEnd .list > ul > li{width:100%;margin-right:0;margin-bottom:9rem}
    .classEnd .list > ul > li:last-child{margin-bottom:0}
    .classEnd .moreView{margin-top:11rem;padding:0 4rem}
    .classEnd .moreView a{width:100%;line-height:10rem;font-size:2.4rem}
    .classEnd .moreView a img{display:none}
    /*상시교육 상세*/
    .detailsData{padding:0}
    .detailsData article{padding:0}
    .detailsData .infomation{width:100%}
    .detailsData .video{width:100%;border-radius:0}
    .detailsData .video iframe{height:63.4rem}
    .detailsData .video .recMovie{display:none!important}
    .detailsData .video .recMovieMobile{width:100%;display:block!important;padding:2rem 0 2rem 4rem;white-space:nowrap;overflow:hidden;overflow-x:auto;position:absolute;left:0;bottom:10rem;background:rgba(0,0,0,0.7)}
    .detailsData .video .recMovieMobile li{width:28rem;border-radius:0.3rem;margin-right:2rem}
    .detailsData .video .recMovieMobile li a{padding-bottom:2.2rem}
    .detailsData .video p.thumb{height:17.4rem}
    .detailsData .video p.thumb span{right:1.2rem;top:1.2rem;line-height:3.9rem;padding:0 1.2rem;border-radius:0.3rem;font-size:2.2rem}
    .detailsData .video p.name{padding:0 2rem;height:6rem;font-size:2.4rem;line-height:3rem;margin:1.4rem 0;white-space:normal;font-weight:normal}
    .detailsData .video p.info{padding:0 2rem}
    .detailsData .video p.info span{padding-left:4rem;line-height:2.4rem;font-size:2.4rem;font-weight:normal}
    .detailsData .video p.info span.per{background:url(../../../images/grac/images/svg/icon_application_1.svg) no-repeat left center;background-size:2.4rem}
    .detailsData .video p.info span.point{background:url(../../../images/grac/images/svg/icon_star_s.svg) no-repeat left center;background-size:2.4rem;margin-left:0;float:right}
    .detailsData .infomation > ul{padding:0 4rem 5.5rem 4rem}
    .detailsData .infomation .part{font-size:2.6rem;margin:4rem 0 2.5rem 0}
    .detailsData .infomation .name{font-size:3.4rem;line-height:4.2rem;margin-bottom:2rem}
    .detailsData .infomation .other{margin:0}
    .detailsData .infomation .other dl:first-child{width:100%}
    .detailsData .infomation .other dl:first-child dd{margin-right:0}
    .detailsData .infomation dt{margin-right:1.5rem;line-height:4rem;font-size:2.2rem}
    .detailsData .infomation dd{margin-right:7rem;line-height:4rem;font-size:2.4rem;position:relative}
    .detailsData .infomation a.pt_btn{padding:0 15px;border-radius:0.3rem;font-weight:700;font-size:2.4rem;line-height:7.2rem;padding:0 3.3rem;position:absolute;left:0;white-space:nowrap;top:-1.7rem}
    .detailsData .infomation span.point{padding-left:3.5rem;background:url(../../../images/grac/images/svg/icon_star_s.svg) no-repeat left center;background-size:2.6rem}
    .detailsData .infomation span.point i{font-weight:normal;color:#767676}
    .detailsData .infomation span.point.off{background:url(../../../images/grac/images/svg/icon_star_s_off.svg) no-repeat left center;background-size:2.6rem}
    .detailsData .infomation span.mypoint{padding-left:3.5rem;background:url(../../../images/grac/images/svg/icon_star_s_blue.svg) no-repeat left center;background-size:2.6rem}
    .detailsData .infomation .textCnt{padding:0 4rem;line-height:10.5rem;height:10.5rem;background:url(../../../images/grac/images/svg/icon_black_down_arrow_m.svg) no-repeat calc(100% - 4rem) calc(100% - 4.5rem);font-size:2.4rem;background-size:2rem}
    .detailsData .infomation .textCnt.on{padding:6rem 4rem}
    .detailsData .relatedCnt{width:100%;padding:4rem 4rem 0 4rem}
    .detailsData .relatedCnt h5{display:none}
    .detailsData .relatedCnt div.roll{height:auto!important}
    .detailsData .relatedCnt a{margin-bottom:4rem}
    .detailsData .relatedCnt ul li.thumb{width:19.2rem;height:14.8rem;border-radius:0.3rem}
    .detailsData .relatedCnt ul li.thumb span{right:0;top:0;line-height:3.7rem;padding:0 1rem;border-radius:0.3rem;font-size:2.2rem}
    .detailsData .relatedCnt ul li.info{width:calc(100% - 19.2rem);padding:1rem 0 0 2.4rem}
    .detailsData .relatedCnt p.name{font-size:2.8rem;height:6.4rem;margin-bottom:2.8rem}
    .detailsData .relatedCnt ul li.info > div span{padding-left:4rem;line-height:2.4rem;font-size:2.4rem}
    .detailsData .relatedCnt span.per{background:url(../../../images/grac/images/svg/icon_application_1.svg) no-repeat left center;background-size:2.4rem}
    .detailsData .relatedCnt span.point{background:url(../../../images/grac/images/svg/icon_star_s.svg) no-repeat left center;margin-left:4rem;background-size:2.4rem}
    /*팝업(수강완료전 평가하기 알림)*/
    .evalNotiPopup .popData{width:calc(100% - 8rem);height:33.8rem}
    .evalNotiPopup .popData h5{font-size:3.2rem;margin:8rem 0 6rem 0}
    .evalNotiPopup .popData a.ok{width:81.3%;line-height:8.7rem;font-size:2.8rem}
    /*팝업(수강완료 평가하기)*/
    .pointEnterPopup .popData{width:calc(100% - 8rem);height:auto;padding-bottom:6rem}
    .pointEnterPopup .popData h3{font-size:4.2rem;margin:8rem 0 4rem 0}
    .pointEnterPopup .popData > div{margin-bottom:6rem}
    .pointEnterPopup .popData .star{width:6.5rem;height:6.4rem;background:url(../../../images/grac/images/svg/icon_star_b_off.svg) no-repeat;background-size:6.5rem}
    .pointEnterPopup .popData .star.on{background:url(../../../images/grac/images/svg/icon_star_b_blue.svg) no-repeat;background-size:6.5rem}
    .pointEnterPopup .popData button{width:81.3%;height:8.8rem;font-size:2.8rem;border-radius:0.3rem;margin:0;margin-bottom:2rem}
}