@charset "utf-8";

.Mlayout {
/*    max-width: 1480px;*/
    max-width: 1500px;
    margin: 0 auto;
}

.main-section {
    position: relative;
    width: 100%;
    padding-bottom: 80px;
}

.p_22,
.p_11 {
    width: 100%;
}

.gridster {
    width: 100% !important;
    margin: 0 auto;
    box-sizing: border-box;
    overflow: hidden;
    margin-top: 40px;
}

.portlet {
    height: 345px;
    box-sizing: border-box;
    position: relative;
    background: #fff;
}

div[name="enface::jobMasterPlan_2x2"] .Title, div[name="enface::newCourse_1x1"] .Title{
    margin-top: -6px;
}

div[name="enface::newCourse_1x1"] .recommed-slider{
    margin-top:41px
}
/*
.portlet.p_22 {
    height: 720px;
}
*/
.more {
    width: 22px;
    height: 22px;
    display: block;
    text-align: center;
    line-height: 1.3;
    padding-left: 1px;
    top: 5px;
    position: relative;
}

.more:hover {
    transform: rotate(90deg);
    transition: .3s;
}

/* 이어서 학습하기 */
.My-learn {
    position: relative;
    padding: 30px 0;
    display: none;
}

.My-learn .My-title {
    margin-bottom: 15px;
    color: #333;
    font-size: 15px;
    display: flex;
    align-items: center;
    color: #333;
    font-weight: bold;
}

.My-learn .My-title p {
    font-size: 15px;
}

.learn-video {
    display: flex;
    flex-wrap: nowrap;
    position: relative;
    align-items: center;
}

.video {
    display: flex;
    flex-wrap: nowrap;
    position: relative;
    width: 29%;
}

.video:not(:nth-last-child(1)) {
    margin-right: 20px;
}

.video .video-img {
    display: inline-block;
    width: 145px;
    height: 85px;
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    margin-right: 15px;
}

.video .video-img::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    left: 0;
    top: 0;
    display: none;
}

.video .video-img::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 24px;
    height: 24px;
    background: url(../images/main/video-play.png) no-repeat;
    z-index: 1;
    display: none;
}

.video .video-img:hover::after {
    display: block;
}

.video .video-img:hover::before {
    display: block;
}

.video .video-img img {
    width: 100%;
    height: 100%;
}

.video-txt {
    width: calc(100% - 165px);
}

.video-txt > p {
    font-size: 15px;
    font-weight: bold;
    color: #333;
    line-height: 1.3;
    margin-bottom: 20px;
    height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
}

.card-progress {
    font-size: 14px;
    color: #6c7380;
    display: flex;
    flex: 1;
    align-items: center;
}

.card-progress b {
    color: #2f3237;
    font-size: 13px;
}

.card-progress span {
    color: #6B7280;
    font-weight: 400;
    font-size: 13px;
}

.card-progress p {
    font-weight: bold;
    font-size: 13px;
}

/* 메인 슬라이더 */
.main-slider {
    height: 420px;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.main-txt {
    position: absolute;
    top: 0;
    width: 1000px;
    left: 40%;
    transform: translate(-40%, -50%);
    top: 40%;
    /*    left: 35%;*/
    /*    transform: translate(-35%,-40%);*/
}

.main-btn {
    position: absolute;
    z-index: 1;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -40%);
    max-width: 1440px;
    width: 1440px;
}

.main-pagination {
    z-index: 99;
    position: relative;
}

.main-btn > button {
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    background-position: center center;
}

.main-btn .main-button-next {
    right: 0px;
    background-image: url(../images/main/ico-Wnext.svg);
    position: absolute;
}

.main-btn .main-button-prev {
    left: 0;
    background-image: url(../images/main/ico-Wprev.svg);
    position: absolute;
}

.main-pagination .swiper-pagination-bullet {
    background: #A9A9A9;
    width: 16px;
    height: 15px;
    opacity: 1;
}

.main-pagination .swiper-pagination-bullet-active {
    background: #336BFA;
    width: 48px;
    height: 15px;
    border-radius: 10px;
    position: relative;
}

.tp-section {
    background: #fff;
    border-bottom: 0;
    position: relative;
    overflow: hidden;
}

/*
.tp-section > .layout {
    padding: 0 10px;
    position: relative;
    overflow: visible;
}
*/
.tp-section .main-slider .swiper-slide a {
    height: 100%;
    display: block;
    position: relative;
}

.tp-section .main-slider .swiper-slide a b {
    color: #fff;
    background: #31363A;
    padding: 2px 20px;
    border-radius: 15px;
    font-size: 14px;
    margin-bottom: 10px;
    display: inline-block;
}

.tp-section .main-slider .swiper-slide a h3 p {
    font-size: 50px;
    font-weight: bold;
    line-height: 1.2;
    color: #255BE4;
    margin-bottom: 10px;
}

.tp-section .main-slider .swiper-slide a p {
    font-size: 25px;
    color: #464646;
    line-height: 1.3;
}

.pagination-wrap {
    position: absolute;
    width: 1200px;
    margin: 0 auto;
    height: 20px;
    z-index: 2;
    bottom: 18%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

.pagination-wrap .swiper-pagination-bullets.swiper-pagination-horizontal {
    width: auto;
    bottom: 0;
    display: flex;
    position: relative;
}

.pagination-wrap .main-btn_pause {
    background-image: url(../images/main/Event-stop.svg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;
    width: 20px;
    height: 14px;
    z-index: 4;
    cursor: pointer;
}

.pagination-wrap .main-btn_pause.on {
    background-image: url(../images/main/Event-start.svg);
    background-repeat: no-repeat;
}

.tp-section .main-slider .swiper-slide > div {
    width: 100%;
    height: 100%;
    position: relative;
}

.tp-section .main-slider .swiper-slide {
    background-size: 100% 100%;
    position: relative;
}

.Main-bg {
    height: 420px;
    overflow: hidden;
    width: 100%;
    padding-bottom: 100%;
}

.Main-bg iframe,
.Main-bg video {
    width: 100%;
}

.Main-bg iframe {
    height: calc(100vh - 280px);
}

.Main-bg img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 메인 배너 모바일 */
.mo-only {
    display: none;
}

.title-wrap {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    position: relative;
    align-items: flex-start;
    margin-bottom: 25px;
}

.title-wrap ul {
    margin-left: auto;
    display: flex;
    flex-wrap: nowrap;
    position: relative;
    top: -3px;
}

.title-wrap ul li:not(:nth-last-child(1)) {
    margin-right: 10px;
}

.Title {
    font-size: 28px;
    font-weight: bold;
    display: block;
    margin-bottom: 35px;
    color: #333;
}

.Title span {
    color: #6B7280;
    font-size: 25px;
    font-weight: bold;
}

/* step 추천 과정 */
.List-slider {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.rc-img {
    border-radius: 10px;
    overflow: hidden;
}

.List-slider .rc-img {
    width: 100%;
    height: 115px;
    position: relative;
    overflow: hidden;
}

.List-slider .rc-img > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.List-slider.banner .rc-img {
    width: 100%;
    height: 290px;
    background: #F3F3F3;
    position: relative;
    overflow: hidden;
}

.List-slider.banner .rc-img img {
    width: 100%;
    height: 100%;
    position: relative;
}

.list-txt {
    margin-top: 10px;
}

.list-txt p {
    display: inline-block;
    margin: 15px 0;
    font-size: 18px;
    font-weight: bold;
    line-height: 1.4;
    color: #333;
    height: 52px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
}

.list-row2 p {
    margin-bottom: 15px;
}

.list-row2 b {
    color: #6B7280;
    font-size: 14px;
    position: absolute;
    bottom: 0;
}

.list-txt p > span {
    font-weight: bold;
    display: inline-block;
}

.list-txt > span {
    font-size: 13px;
    margin-top: 10px;
    display: block;
    color: #222222;
    font-weight: bold;
}

.list-txt span b {
    font-size: 13px;
    color: #222;
}

.List-btn {
    position: absolute;
    right: 0;
    top: 2px;
    width: 50px;
    height: 30px;
}

.List-btn div {
    position: absolute;
    top: 0px;
    width: 30px;
    height: 15px;
    cursor: pointer;
}

.recommed-slider .swiper-slide {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* 또는 고정값 예: 280px */
}

.List-btn .recommed-button-prev,
.List-btn .recom02-button-prev,
.List-btn .swiper-button-prev,
.List-btn .month-button-prev,
.List-btn .Rtime-button-prev,
.List-btn .banner-button-prev,
.List-btn .meta-button-prev,
.List-btn .master-button-prev {
    left: 0;
    top: 0;
    background-image: url(../images/main/ico-prev.svg);
    background-repeat: no-repeat;
    background-position: center center;
}

.List-btn .recommed-button-next,
.List-btn .recom02-button-next,
.List-btn .swiper-button-next,
.List-btn .month-button-next,
.List-btn .Rtime-button-next,
.List-btn .banner-button-next,
.List-btn .meta-button-next,
.List-btn .master-button-next {
    right: 0;
    top: 0;
    background-image: url(../images/main/ico-next.svg);
    background-repeat: no-repeat;
    background-position: center right;
}

/* 맞춤 과정  */
.recommed-slider a {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

.recommed-slider {
    height: 720px;
}

.recommed-slider a .rc-img {
    width: 300px;
    height: 185px;
    margin-right: 25px;
}

.recommed-slider a b {
    font-size: 14px;
    color: #6B7280;
    margin-right: 5px;
}

.list-txt .Mrc-list {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 14px;
    font-weight: bold;
}

.free {
    color: #317ABE !important;
    border: none !important;
    background: #F0F5FA;
}

.fee {
    color: #F05252;
    background: #FDF2F2;
    border: none !important;
}

.recommed-slider .list-txt {
    width: calc(100% - 275px);
}

/*실시간 인기 과정*/
.List-slider.Rtime-slider .rc-img {
    height: 185px;
    width: 100%;
    position: relative;
}

.Ranking .swiper-slide .rc-img::after {
    content: attr(data-rank);
    position: absolute;
    width: 36px;
    height: 36px;
    background: #ffff;
    z-index: 99;
    border-radius: 100%;
    left: 15px;
    top: 15px;
    font-size: 25px;
    font-weight: bold;
    color: #333;
    text-align: center;
    line-height: 1.4;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
}

.item-view {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    position: relative;
    margin-top: 4px;
    justify-content: flex-start;
    padding-top: 10px;
}

.item-view li:not(:nth-last-child(1)) {
    margin-right: 10px;
    padding-right: 10px;
}

.item-view li {
    color: #6B7280;
    position: relative;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
}

.item-view li:nth-child(2) {
    margin-left: 5px;
}

.view,
.sft {
    color: #6B7280 !important;
    font-size: 14px !important;
}

.item-view li:nth-child(1)::after {
    content: "";
    position: absolute;
    width: 1.5px;
    height: 90%;
    background: #E5E7EB;
    right: -7px;
    top: 0;
}

.item-view li:nth-child(2)::after {
    display: none;
}

.item-view li.sft img {
    top: -2px;
    position: relative;
    margin: 0 5px;
}

.view {
    position: relative;
}

.view img {
    margin-right: 5px;
}

.Mitem-view .view span {
    font-size: 14px;
    margin-left: 10px;
    display: block;
    color: #111827;
}

.sft span {
    margin-left: 7px;
    color: #111827;
}

/* 이달의 맞춤과정 */
.month-slider {
    position: relative;
}

.List-slider.month-slider .rc-img {
    height: 185px;
}

.month-list {
    position: relative;
    width: 100%;
    height: 100%;
}

.month-rcList {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

.month-rcList .Mrc-list {
    margin-right: 10px;
}

.month-rcList span b {
    color: #6B7280;
    margin-right: 5px;
    position: relative;
}

.month-rcList span {
    color: #111827;
    font-weight: bold;
    font-size: 14px;
}

.month-list > li {
    width: calc((100% / 2) - 8px);
    margin-right: 15px;
    margin-bottom: 30px;
}

.month-list > li:nth-child(n + 3) {
    margin-bottom: 0;
}

.month-list > li:nth-child(2n) {
    margin-right: 0;
}

.month-list > li a {
    display: flex;
    width: 100%;
    position: relative;
}

.month-list > li a .month-img {
    margin-right: 15px;
    width: 165px;
    height: 103px;
}

.month-list > li a .month-img img {
    width: 100%;
    height: 100%;
}

.month-txt {
    width: calc(100% - 180px);
}

.month-txt p {
    font-size: 14px;
    height: 39px;
    color: #222222;
    margin-bottom: 5px;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
}

.month-txt p > span {
    font-weight: bold;
    display: inline-block;
}

.month-txt > span {
    font-size: 13px;
    margin-top: 7px;
    display: block;
    color: #222222;
}

.month-txt .rc-list > li {
    font-size: 12px;
}

/* 공지사항 */
.Mtab-btn {
    display: flex;
    flex-wrap: nowrap;
    position: relative;
    margin-bottom: 15px;
}

.Mtab-btn li:not(:nth-last-child(1)) {
    margin-right: 15px;
}

.Mtab-cont > div {
    display: none;
}

.Mtab-cont > div.on {
    display: block;
}

.pl-tit {
    font-size: 15px;
    font-weight: bold;
    color: #4C4C4C;
    position: relative;
    padding: 5px 15px;
    background: #F0F5FA;
    color: #317ABE;
    border-radius: 20px;
}

.Mtab-btn > li a.on p {
    color: #fff;
    font-weight: bold;
    z-index: 1;
    background: #317ABE;
}

.Notice-list {
    display: block;
    position: relative;
    width: 100%;
}

.Notice-list > li {
    display: inline-flex;
    align-items: center;
    width: 100%;
    padding: 7px 0;
}

.Notice-list > li a {
    width: 80%;
    display: inline-flex;
}

.Notice-list > li a p {
    display: inline-block;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
    font-weight: 400;
    font-size: 16px;
    color: #222222;
    position: relative;
    z-index: 1;
}

.Notice-list > li a p::after {
    content: "";
    position: absolute;
    width: 0;
    height: 30%;
    background: #a8cbe5;
    bottom: 3px;
    left: 0;
    z-index: -1;
}

.Notice-list02 > li a p::after,
.period-list > li a p::after {
    left: 72px;
}

.period-list.Notice-list > li:not(:nth-last-child(1)) {
    margin-bottom: 0;
}

.Notice-list03 > li a p::after {
    left: 45px;
}

.years > li a p::after {
    left: 50px;
}

.Notice-list > li a p span {
    font-weight: bold;
    margin-right: 5px;
    color: #222222;
    border-radius: 5px;
}

.Notice-list > li a:hover p::after {
    width: 100%;
    transition: width .4s;
}

.Notice-list > li b {
    margin-left: auto;
    font-size: 14px;
    color: #333333;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/*
.Notice-list > li:not(:nth-last-child(1)) {
    margin-bottom: 8px;
}
*/
.Notice-list02.Notice-list > li a p span {
    border-radius: 5px;
}

.New {
    position: relative;
    width: 15px;
    height: 15px;
    display: inline-block;
    background-image: url(../images/common/ico-new.svg);
    background-repeat: no-repeat;
    background-position: center center;
    top: 2px;
}

/* step 위키 */
/* SNS */
.snsWrap {
    height: 220px;
    overflow: hidden;
    overflow-y: auto;
    padding-right: 10px;
}

.snsWrap::-webkit-scrollbar {
    width: 5px;
}

.snsWrap::-webkit-scrollbar-thumb {
    background: #2760F0;
    border-radius: 10px;
}

.snsWrap::-webkit-scrollbar-track {
    background: #fff;
}

.sns-list {
    position: relative;
    width: 100%;
    margin-bottom: 10px;
    padding-top: 5px;
    display: block;
}

.sns-list > a > p {
    font-size: 14px;
    font-weight: 400;
    color: #222222;
    display: flex;
    align-items: center;
    width: 100%;
}

.sns-list a > p span {
    margin-right: 5px;
    margin-left: 5px;
    padding-top: 0;
    font-weight: bold;
    color: #222222;
}

.sns-list > p {
    display: inline-block;
    font-size: 14px;
    color: #6B7280;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    word-break: break-all;
}

.Youtube-list a {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}

.youtube-txt {
    width: calc(100% - 85px);
    margin-left: auto;
}

.Youtube-list:not(:nth-last-child(1)) {
    margin-bottom: 20px;
}

.youtube-txt p {
    font-size: 14px;
    color: #000;
    font-weight: bold;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
}

.youtube-txt span {
    font-size: 14px;
    line-height: 1.2;
    color: #565656;
}

.Thum-img {
    width: 70px;
    height: 70px;
    position: relative;
    display: block;
    border-radius: 50%;
    overflow: hidden;
}

.Thum-img img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* stepup */
.stp-up > ul > li:not(:nth-last-child(1)) {
    margin-bottom: 10px;
}

.Stepup-img {
    width: 100%;
    position: relative;
}

.Stepup-img > img {
    width: 100%;
}

.Stepup-txt {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
}

.Stepup-txt p {
    font-size: 15px;
    font-weight: bold;
    color: #222222;
    position: relative;
    margin-right: 15px;
}

.Stepup-txt p::after {
    content: "";
    position: absolute;
    right: -8px;
    top: 5px;
    width: 1.2px;
    height: 50%;
    background: #222222;
}

.Stepup-txt b {
    font-size: 13px;
    color: #222222;
    font-weight: 500;
    position: relative;
    top: -1px;
}

/* event */
.event-img {
    width: 100%;
    position: relative;
    height: 215px;
    overflow: hidden;
}

.event-img img {
    width: 100%;
    height: 100%;
}

.step_up .img_box {
    width: 100%;
    height: 185px;
    border: 0;
    background: #eee;
    border-radius: 5px;
}

.event.step_up .img_box {
    background: #fff;
}

.event {
    overflow: hidden;
}

.event-ctrl {
    position: relative;
    width: calc(100% - 110px);
    top: 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 12px;
    padding-right: 10px;
}

button[disabled] {
    display: none;
}

button {
    display: inline-block;
}

#evPrev {
    background-image: url(../images/main/ico-prev.svg);
    width: 12px;
    height: 19px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

#evNext {
    background-image: url(../images/main/ico-next.svg);
    width: 12px;
    height: 19px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

#evPause {
    font-size: 21px;
    position: relative;
    width: 22px;
    height: 22px;
    top: 1px;
    text-align: center;
    background-image: url(../images/main/evPause.png);
    background-repeat: no-repeat;
    background-position: center center;
}

#evPlay {
    position: relative;
    top: -4px;
    width: 22px;
    height: 22px;
    text-align: center;
}

#evPlay::after {
    content: "▶";
    position: absolute;
    left: 5px;
    top: 8px;
}

#evPage {
    font-size: 17px;
    font-weight: bold;
}

#evPage span {
    color: #6B7280;
    font-weight: 400;
    font-size: 15px;
}

/* 숏폼 */
.short .img_box {
    width: 100%;
    height: 200px;
    border-radius: 20px;
    overflow: hidden;
    border: 0;
    background: none;
}

.video-more:hover {
    transform: rotate(180deg);
    transition: .3s;
}

.recommed-slider .swiper-wrapper {
    position: relative !important;
}

.short .Mitem-view {
    position: absolute;
    bottom: 0;
}

.short .Mitem-view li::after {
    content: none;
}

/* 포틀릿 */
.status {
    padding: 5px 8px;
    display: inline-block;
    border-radius: 5px;
}

.status.Wait {
    background: #FDF2F2;
    color: #F05252;
    border: 1px solid #FDF2F2;
}

.status.Complete {
    background: #EFEFEF;
    color: #222;
    border: 1px solid #EFEFEF;
}

.status.receipt {
    background: #F0F5FA;
    color: #317ABE;
    border: 1px solid #F0F5FA;
}

.Notice-info {
    display: flex;
    width: 162px;
    justify-content: flex-end;
}

.Notice-list > li .Notice-info b {
    margin-left: 10px;
    display: block;
}

.pay-info {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 500;
    justify-content: flex-end;
    color: #326BFA;
    width: 0px;
}

.pay-info span {
    margin-left: 3px;
}

.price-Notice.Notice-list {
    overflow: hidden;
}

.price-Notice.Notice-list li a {
    width: calc(100% - 162px);
    margin-right: 15px;
}

.price-Notice.Notice-list li a p::after {
    left: 72px;
}

.title-2row ul li {
    align-items: flex-start;
    padding: 3px 0;
}

.title-2row ul li a {
    flex-wrap: wrap;
}

.title-2row ul li a > span {
    display: block;
    width: 100%;
    font-size: 14px;
    color: #666666;
}

.title-2row .Notice-list {
    height: 235px;
    overflow-y: auto;
}

.title-2row .Notice-list::-webkit-scrollbar,
.custom_course ul::-webkit-scrollbar {
    width: 7px;
}

.title-2row .Notice-list::-webkit-scrollbar-thumb,
.custom_course ul::-webkit-scrollbar-thumb {
    background: #eee;
    border-radius: 10px;
}

.title-2row .Notice-list::-webkit-scrollbar-track,
.custom_course ul::-webkit-scrollbar-track {
    background: #fff;
}

.pl_70 {
    padding-left: 70px;
}

.auto-list .Notice-info {
    width: auto;
    margin-left: 20px;
}

.auto-list li a {
    flex: 1;
    width: 50%;
}

.tab-tbl th,
.tab-tbl td {
    padding: 7.5px;
    font-size: 15px;
}

.scroll-tbl {
    overflow-x: auto;
}

.scroll-tbl .tbl {
    overflow-x: auto;
    width: 850px;
}

.Notice-time span {
    width: 50px;
    display: inline-block;
    text-align: end;
}

.Notice-list > li b.Notice-time {
    color: #656565;
    font-weight: bold;
}

.Notice-list > li b.Notice-time span {
    color: #858A8D;
    font-weight: 400;
}

.custom_course ul {
    width: 100%;
    padding-right: 10px;
    height: 290px;
    overflow-y: auto;
}

.custom_course ul li a {
    display: block;
    position: relative;
}

.custom_course ul li:not(:nth-last-child(1)) {
    margin-bottom: 20px;
}

.custom_course ul li a .img-wrap {
    width: 100%;
    height: 165px;
    background: #eee;
    border-radius: 5px;
}

.custom_course ul li a .cc_txt {
    margin-top: 15px;
}

.custom_course ul li a .cc_txt > p {
    font-size: 15px;
    font-weight: bold;
    line-height: 1.3;
    height: 42px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-all;
}

.cc_innerTxt {
    display: flex;
    flex-wrap: nowrap;
    margin-top: 6px;
}

.cc_innerTxt > span {
    padding: 5px 6px 3px;
    font-size: 13px;
    display: inline-block;
    border-radius: 10px;
    font-weight: bold;
}

.cc_innerTxt p {
    font-size: 14px;
    margin-left: 5px;
    color: #6B7280;
}

.cc_innerTxt p span {
    margin-left: 5px;
    color: #333;
}

.Notice-list li a .lock {
    position: relative;
    top: 3.5px;
}

.pbt-cont {
    border: 1px solid #EBEBEB;
    border-radius: 10px;
}

.pbt-cont dl {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    position: relative;
}

.company.Notice-list02 > li a p::after {
    left: 50px;
}

.years.Notice-list02 li {
    margin-bottom: 0;
}

.pbt-cont dl:not(:nth-last-child(1)) {
    border-bottom: 1px solid #EBEBEB;
}

.pbt-cont dl dt {
    width: 115px;
    font-size: 15px;
    font-weight: bold;
    color: #333;
    padding: 20px 15px;
    border-right: 1px solid #F7F6F7;
    overflow: hidden;
}

.pbt-cont dl dd {
    width: calc(100% - 115px);
    font-size: 15px;
    line-height: 1.3;
    color: #333;
    font-weight: 400;
    padding: 20px 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 40px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
}

.pbt-cont.No-data {
    background: #F7F6F7;
    height: 265px;
    display: block;
    text-align: center;
}

.pbt-cont.No-data img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.date-head {
    display: flex;
    align-items: center;
    background: #F0F5FA;
    padding: 7px;
    border-radius: 5px;
}

.date-btn-wrap {
    position: absolute;
    top: 3px;
    right: 35px;
    width: 50px;
}

.date-btn-wrap button#prev {
    background: url(../images/main/ico-prev.svg) no-repeat center center;
    width: 15px;
    height: 19px;
    left: 0;
    position: absolute;
}

.date-btn-wrap button#next {
    background: url(../images/main/ico-next.svg) no-repeat center center;
    width: 15px;
    height: 19px;
    right: 0;
    position: absolute;
}

.date-head input[type="text"] {
    border: none;
    background: transparent;
    width: auto;
    height: auto;
    text-align: center;
    color: #317ABE;
    font-weight: bold;
    margin: 0 auto;
    padding: 0;
}

.dateList {
    height: 200px;
    overflow-y: auto;
}

.date-row {
    display: flex;
    align-items: center;
}

.date-row:not(:nth-last-child(1)) {
    margin-bottom: 5px;
}

.dateList {
    margin-top: 10px;
}

.date-row .dateTime {
    margin-right: 20px;
    color: #333;
    font-weight: 300;
}

.date-row p {
    flex: 1;
    padding-right: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
}

.date-row .dateName {
    margin: 0 30px;
    color: #777;
}

.dateStatus.pending {
    color: #777777;
}

.dateStatus.approved {
    color: #4884BB;
}

.dateStatus.rejected {
    color: #F05252;
}

.ListWrap ul li a {
    display: flex;
    align-items: center;
}

.ListWrap ul li a i {
    width: 76px;
    height: 76px;
    border-radius: 10px;
    background: #F7F6F7;
    position: relative;
}

.ListWrap ul li a i img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.ListWrap ul li:not(:nth-last-child(1)) {
    margin-bottom: 20px;
}

.ListWrap ul li a .List_cont {
    margin-left: 20px;
}

.ListWrap ul li a .List_cont > span {
    font-size: 17px;
    color: #555;
    margin-bottom: 5px;
    display: block;
}

.ListWrap ul li a .List_cont p {
    font-size: 21px;
    font-weight: bold;
    color: #111827;
}

.ListWrap ul li a .List_cont p span {
    margin-left: 5px;
}

.ListCal2 ul li a i {
    width: 123px;
    height: 123px;
}

.sm-pbt-cont dl dt,
.sm-pbt-cont dl dd {
    padding: 7px 10px;
}

.sm-pbt-cont dl dd {
    height: 35px;
    font-size: 14px;
}

.sm-pbt-cont dl dd p {
    font-size: 13px;
    text-align: start;
}

.sm-pbt-cont dl dd ul {
    display: flex;
    align-items: center;
}

.sm-pbt-cont dl dd ul li p {
    margin-right: 5px;
}

.pbtTeam p {
    color: #317ABE;
}

.teamPbt dl dt,
.teamPbt dl dd {
    padding: 10px 10px;
}

.sm-pbt-cont dl dd {
    height: 31px;
}

.Pbtcourse .pbt-cont.No-data {
    height: 280px;
}

.pbt-btn {
    position: absolute;
}

.Pbt-wrap {
    position: relative;
    height: 100%;
    width: 100%;
}

.Pbtcourse {
    width: 95%;
    margin: 0 auto;
}

.pbt-button-prev {
    position: absolute;
    left: -5px;
    width: 30px;
    height: 30px;
    background: url(../images/main/ico-pbt-prev.svg) #F0F5FA no-repeat center;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99;
    border-radius: 100%;
    border: 1px solid #317ABE;
    cursor: pointer;
}

.pbt-button-next {
    position: absolute;
    background: url(../images/main/ico-pbt-next.svg) #F0F5FA no-repeat 11px center;
    padding: 5px;
    width: 30px;
    height: 30px;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99;
    border-radius: 100%;
    border: 1px solid #317ABE;
    cursor: pointer;
}

.Spbt-cont dl dd {
    height: auto;
    -webkit-line-clamp: 2;
    word-break: break-all;
}

.As-wrap ul {
    display: flex;
    flex-wrap: wrap;
    position: relative;
}

.As-wrap ul li {
    width: calc((100% / 2) - 10px);
    margin-right: 20px;
}

.As-wrap ul li:nth-child(2n) {
    margin-right: 0;
}

.As-wrap ul li:not(:nth-child(n + 3)) {
    margin-bottom: 20px;
}

.As-wrap ul li a {
    display: block;
    padding: 25px;
    border: 1px solid #EEEEEF;
    border-radius: 5px;
}

.As-wrap ul li a:hover {
    border-color: #2760F0;
}

.As-title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin: 5px 0;
}

.As-num {
    color: #777;
}

.As-num span {
    color: #333;
    font-size: 20px;
    font-weight: bold;
    margin-right: 5px;
}

.Date-wrap {
    display: flex;
    flex-wrap: nowrap;
}

.Date-wrap .cal-box > p {
    font-size: 18px;
    font-weight: bold;
    color: #222;
}

.Date-wrap .calendar {
    width: 320px;
}

.Date-wrap .ui-widget.ui-widget-content {
    width: 100%;
    border: 0;
    background: #fff;
}

.Date-wrap .ui-widget-header {
    background: #fff;
    border: none;
}

.Date-wrap .ui-state-default,
.ui-widget-content .ui-state-default {
    border: none !important;
    background: #fff !important;
}

.Date-wrap table thead th {
    background: #fff;
}

.Date-wrap .ui-datepicker .ui-datepicker-title {
    text-align: center;
    display: block;
}

.Date-wrap .ui-datepicker table {
    border-top: 0;
}

.Date-wrap .ui-datepicker-week-end {
    color: red;
}

.Date-wrap .ui-state-active,
.Date-wrap .ui-widget-content .ui-state-active {
    background: transparent !important;
    color: #4884BB !important;
    outline: 1px solid #4884BB !important;
    border-radius: 100%;
}

.Date-wrap .ui-datepicker td a {
    height: 33px;
    width: 33px;
    margin: 0 auto;
    line-height: 1.4
}

.Date-wrap .ui-datepicker .ui-datepicker-next,
.Date-wrap .ui-datepicker .ui-datepicker-prev {
    background: none;
    border: 0;
    background-repeat: no-repeat;
    background-position: center center;
}

.Date-wrap .ui-datepicker .ui-datepicker-prev {
    background-image: url(../images/main/cal-prev.svg);
}

.Date-wrap .ui-datepicker .ui-datepicker-next span,
.Date-wrap .ui-datepicker .ui-datepicker-prev span {
    background-image: none;
}

.Date-wrap .ui-datepicker .ui-datepicker-next {
    background-image: url(../images/main/cal-next.svg);
}

.Date-wrap .ui-state-highlight,
.Date-wrap .ui-widget-content .ui-state-highlight {
    color: #4884BB !important;
}

.cal-box {
    width: calc(100% - 320px);
    padding-left: 20px;
    padding-top: 10px;
}

.cal-box ul {
    margin-top: 10px;
    height: 210px;
    overflow-y: auto;
}

.cal-box ul li a {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    padding: 5px;
}

.cal-box ul li a p {
    color: #777;
    width: calc(100% - 115px);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
}

.cal-box ul li a b {
    width: 115px;
    color: #333;
}

.pbt-title span {
    padding: 3px 5px;
    color: #fff;
    border-radius: 5px;
    margin-right: 5px;
}

.pbt-title span.receipt {
    background: orange;
}

.pbt-title span.progress {
    background: #2760F0;
}

.por_scroll {
    max-height: 240px;
    overflow-y: auto;
}

.por_scroll .tbl tbody {}

.por_scroll .tbl thead {
    position: sticky;
    top: 0;
}

@media (max-width:1500px) {
    .short .Mitem-view {
        position: relative;
    }

    .short .Mitem-view {
        text-align: center;
    }

    .main-section {
        padding-bottom: 0;
    }

    .main-btn {
        max-width: 100%;
        width: 100%;
    }

    .main-slider .layout {
        padding: 0 !important;
        width: 950px;
    }

    .pagination-wrap {
        width: 100%;
        padding: 0 165px;
    }

    .portlet-my {
        /*
        position: relative !important;
        overflow: hidden;
*/
        margin-top: 50px;
    }

    .portlet-my:nth-child(1) {
        margin-top: 0;
    }

    #EnviewContentArea {
        width: 100% !important;
        height: 100% !important;
        /*
        display: flex;
        flex-wrap: wrap;
*/
    }

    .portlet {
        width: 100%;
        height: auto;
    }

    .Mlayout {
        max-width: 100%;
        padding: 30px 15px;
    }

    .skill {
        margin-top: 0;
    }

    .portlet.p_22 {
        width: 100%;
    }

    .swiper-wrapper {
        width: 100% !important;
    }

    .recommed-slider {
        height: 400px;
    }

    .month-slider {
        height: 300px;
    }

    .recommed-slider a,
    .month-slider a {
        display: block;
    }

    .recommed-slider a .rc-img {
        margin-right: 0;
        width: 100%;
    }

    .recommed-slider .list-txt {
        width: 100%;
    }

    .w5 {
        width: 50%;
    }

    .List-slider.banner .rc-img {
        height: 200px;
    }

    .skill {
        margin-top: 0 !important;
    }

    .w5.pr {
        padding-right: 50px;
    }

    .w5.pl {
        padding-left: 50px;
    }

    .list-row2 b {
        position: relative;
    }

    .sns-list {
        margin-bottom: 15px;
    }

    .sns-list ul {
        max-height: 95px;
        height: auto;
    }

    .video-more {
        margin-left: auto;
    }

    .price-Notice.Notice-list li a {
        width: calc(100% - 162px);
    }

    .cal_22 {
        width: 50%;
    }

    .main-txt {
        width: 100%;
        padding: 0 175px;
    }

    .main-slider {
        height: 365px;
    }
}

@media (max-width:1200px) {
    .video {
        width: 30%;
    }

    .video:not(:nth-last-child(1)) {
        margin-right: 10px;
    }

    .video-txt > p {
        margin-bottom: 10px;
    }

    .card-progress {
        display: block;
    }

    .video .video-img {
        height: 100px;
    }

    .card-progress span.ml_10 {
        margin-left: 0;
    }

    .My-learn {
        padding: 0;
        margin: 20px 0;
    }

    .Title {
        margin-bottom: 20px;
    }

    .Title span {
        font-size: 30px;
    }

    .Date-wrap .calendar {
        width: 280px;
    }

    .cal-box {
        width: calc(100% - 280px);
        padding-left: 10px;
    }

    .cal-box ul li a b,
    .cal-box ul li a p {
        font-size: 14px;
    }

    .cal-box ul li a b {
        width: 100px;
    }

    .cal-box ul li a p {
        width: calc(100% - 100px);
    }
}

@media (max-width:1024px) {
    .video-more {
        position: absolute;
        top: -39px;
        right: 0;
        width: 23px;
        height: 23px;
    }

    .video .video-img {
        width: 100%;
        height: 150px;
    }

    .video {
        display: block;
    }

    .learn-video .video {
        width: calc(100% / 3);
    }

    .video-txt {
        width: 100%;
    }

    .Mlayout {
        padding: 0 15px;
    }

    .portlet-my {
        margin-top: 50px !important;
    }

    .main-slider {
        height: 250px;
    }

    .main-txt {
        padding: 0 25px;
    }

    .Title {
        margin-bottom: 25px;
        font-size: 24px;
    }

    .Title span {
        font-size: 25px;
    }

    .List-btn div {
        height: 20px;
    }

    .recommed-slider {
        height: 380px;
    }

    .main-slider .layout,
    .pagination-wrap {
        width: 100%;
        max-width: 100%;
        padding: 0 20px !important;
    }

    .list-txt p {
        font-size: 16px;
        height: 45px;
    }

    .tp-section .main-slider .swiper-slide a h3 p {
        font-size: 25px;
    }

    .pagination-wrap {
        bottom: 10%;
    }

    .main-btn {
        display: none;
    }

    .main-section {
        padding-bottom: 0px;
    }

    .Notice-list > li {
        padding: 3px 0;
    }

    .Mtab-btn li:not(:nth-last-child(1)) {
        margin-right: 10px;
    }

    .pl-tit {
        font-size: 15px;
    }

    .video-txt > p {
        font-size: 14px;
        height: 38px;
        margin-bottom: 5px;
    }

    .Date-wrap {
        display: block;
    }

    .Date-wrap .calendar {
        width: 100%;
    }

    .cal-box {
        width: 100%;
    }

    .Date-wrap .ui-datepicker td a {
        line-height: 1.6;
    }

    .cal_22 {
        width: 100%;
    }

    .Date-wrap .ui-datepicker .ui-datepicker-title {
        font-size: 20px;
        line-height: 1.2;
        margin-bottom: 5px;
    }
}

@media (max-width:780px) {
    .w5.pr {
        padding-right: 25px;
    }

    .w5.pl {
        padding-left: 25px;
    }

    .Title,
    .Title span {
        font-size: 25px;
    }

    .sns-list ul {
        max-height: 100px;
    }

    .portlet-my {
        margin-top: 50px !important;
    }

    .portle-Mtab li a p.pl-tit {
        font-size: 14px;
    }

    .scroll-tbl .tbl_responsed ul li:nth-child(n+4) {
        display: none;
    }

    .mo-only {
        display: block;
    }

    .mo-only iframe {
        height: 405px;
    }

    .mo-only a {
        display: block;
        width: 100%;
        height: 435px;
    }

    .pc-only {
        display: none;
    }

    .main-slider-mo {
        max-height: 435px;
    }

    .mo-only .mo-img {
        width: 100%;
        height: 100%;
        position: relative;
        background: #eee;
    }

    .mo-img img {
        position: relative;
        left: 50%;
        transform: translateX(-50%);
        object-fit: cover;
        width: 100%;
        height: 100%;
    }

    .main-slider-mo .swiper-slide a .main-txt h3 > p {
        font-size: 30px;
        font-weight: 600;
        line-height: 1.3;
        color: #255BE4;
        margin-bottom: 10px;
        word-break: break-all;
    }

    .main-slider-mo .swiper-slide a .main-txt b {
        color: #fff;
        background: #31363A;
        padding: 2px 20px;
        border-radius: 15px;
        font-size: 14px;
        margin-bottom: 10px;
        display: inline-block;
    }

    .main-slider-mo .swiper-slide a .main-txt > p {
        font-size: 15px;
        color: #464646;
        line-height: 1.4;
        word-break: break-all;
    }
    
    .main-txt{
        top:25px;
        left:0;
        transform:translate(0)
    }
}

@media (max-width:639px) {
    .tp-section .main-slider .swiper-slide a h3 {
        font-size: 20px;
    }

    .tp-section .main-slider .swiper-slide a p {
        font-size: 15px;
    }

    #EnviewContentArea .portlet-my:nth-child(1) {
        margin-top: 20px !important;
    }

    .recommed-slider {
        height: 400px;
    }

    .month-slider {
        height: 335px;
    }

    .list-txt p {
        margin: 10px 0;
    }

    .list-txt .Mrc-list {
        margin-top: 5px;
    }

    .portlet-my {
        margin-top: 24px !important;
        padding: 0;
    }

    .Title {
        font-size: 20px;
        margin-bottom: 20px;
    }

    .Title span {
        font-size: 20px;
    }

    .title-wrap {
        margin-bottom: 15px;
    }

    .List-slider.Rtime-slider .rc-img,
    .recommed-slider a .rc-img,
    .List-slider.month-slider .rc-img {
        height: 230px;
    }

    .List-slider.banner .rc-img {
        height: 170px;
    }

    .pl-tit {
        font-size: 14px;
    }

    .Notice-list > li {
        padding: 4px 0;
    }

    .w5 {
        width: 100%;
    }

    .main-section {
        padding-bottom: 20px;
    }

    .Notice-list > li a p {
        font-size: 14px;
    }

    .Notice-list > li b {
        font-size: 13px;
    }

    .sns-list ul {
        max-height: 105px;
        height: auto;
    }

    .Mtab-btn li:not(:nth-last-child(1)) {
        margin-right: 10px;
    }

    .w5.pr,
    .w5.pl {
        padding: 0;
    }

    .learn-video .video {
        width: calc(100% / 2);
    }

/*    .learn-video .video:nth-last-of-type(1) {*/
/*        display: none;*/
/*    }*/

    .Mtab-btn {
        flex-wrap: wrap;
        margin-bottom: 10px;
    }

    .Mtab-btn li {
        margin-bottom: 10px;
    }

    .title-2row ul li {
        display: block;
    }

    .price-Notice.Notice-list li a {
        width: 100%;
        margin-right: 0;
    }

    .price-Notice.Notice-list > li a p {
        display: flex;
        flex-wrap: wrap;
        padding-top: 20px;
    }

    .price-Notice.Notice-list > li a p span {
        font-size: 13px;
    }

    .title-2row ul li a > span.pl_70 {
        padding-left: 0;
        margin-top: 5px;
    }

    .Notice-info {
        width: auto;
        justify-content: flex-start;
    }

    .Notice-time span {
        width: 40px;
    }

    .mo-img img {
        width: 100%;
        height: 100%;
    }
}

@media (max-width:500px) {
    .period-list.Notice-list > li a {
        width: 70%;
    }
    
     .MainPopup .swiper-slide {
        height: auto;
    }
    
}

.rg-header-renderer span {
    font-weight: bold;
    height: 100%;
    font-size: 14px;
    display: block;
    position: relative;
    padding: 5px 0;
}

.rg-renderer a {
    height: 100%;
    font-size: 14px;
    display: block;
    padding: 8px 0;
    cursor: pointer;
}

#defaultGrid thead th {
    background: #f7f7f7;
}

.rg-body table {
    border-top: 0;
}

.rg-header-renderer {
    border-bottom: 1px solid #ddd;
}

.rg-alternate-row {
    background: #fff !important;
}

.rg-checkbar-cell div {
    top: 7px;
    position: relative;
}

.rg-checkbar-cell div input[type="checkbox"] {
    cursor: pointer;
}

.rg-checkbar-head {
    border-bottom: 0;
}

.rg-rowbarcontainer .rg-table {
    border-top: 0;
}

.rg-empty-grid span {
    font-size: 20px;
}

.layoutGridster {
    position: relative;
    width: 100% !important;
    overflow: hidden;
    transition: 0.4s;
    display: flex;
    flex-wrap: wrap;
}

@media (max-width: 1500px) {
    [data-sizex="1"] {
        width: 50%;
    }

    [data-sizex="2"],
    [data-sizex="4"] {
        width: 100%;
    }

    .portlet-my {
        height: auto;
        position: initial;
        margin-top: 50px;
    }

    .portlet {
        position: relative;
    }

    .layoutGridster {
        height: 100% !important;
    }
}

@media (max-width: 639px) {
    [data-sizex="1"] {
        width: 100%;
    }
}

@media (max-width: 450px){
    .Notice-list > li a{
        width: 75%;
    }
    
    .tp-section{
        margin-top: -9px;
    }
    
}