@charset "utf-8";

/* 새글 스킨 (latest) */
.program-detail-slide {margin: -400px 0 150px;}
.program-detail-slide ul {}
.program-detail-slide ul li {display: flex;}
.program-detail-slide .program-slide-l {width: 100%; max-width: 400px; position: relative; padding: 48px 44px 35px; background-color: #fff;}
.program-detail-slide .program-slide-l .swiper-pagination {bottom: 35px; left: 44px;}
.program-detail-slide .program-slide-l .l-cate {padding: 6px 16px; font-size: 16px; font-weight: 500; border: 1px solid #282828; width: fit-content; margin-bottom: 16px;}
.program-detail-slide .program-slide-l .l-tit {font-size: 32px; font-weight: 900; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.program-detail-slide .program-slide-l .l-date {font-size: 22px; font-weight: 300; margin-top: 10px; padding-bottom: 20px; border-bottom: 1px solid #707070;}

.program-detail-slide .l-more {display: flex; align-items: center; justify-content: center; width: 100%; max-width: 130px; position: relative; overflow: hidden; margin: 22px 0 86px;}
.program-detail-slide .l-more-detail {display: flex; align-items: center; justify-content: space-between; position: relative; padding: 7px 10px; width: 100%;}
.program-detail-slide .l-more-detail p {font-size: 14px;}
.program-detail-slide .l-more-detail .l-more-ico {background-image: url("../../../assets/images/user/about-arrow2.svg");background-repeat: no-repeat; background-size: cover; display: inline-block; width: 12px; height: 3px;}

.program-detail-slide .l-more span {position: absolute; transition: .2s;}
.program-detail-slide .l-more span.top {width: 100%; height: 1px; top: 0; left: 0; right: 100%; background: linear-gradient(45deg, rgba(0,0,0,0.3) 0 60%, #292929 50% 100%);}
.program-detail-slide .l-more span.top::before {content: ''; display: inline-block; width: 60%; height: 1px; top: 0; left: -60%; background: #292929; position: absolute;}
.program-detail-slide .l-more span.right {width: 1px; height: 100%; right: 0; background: #292929;}
.program-detail-slide .l-more span.right::before {content: ''; display: inline-block; width: 1px; height: 100%; top: -100%; left: -0; background: rgba(0,0,0,0.3); position: absolute;}
.program-detail-slide .l-more span.bottom {width: 100%; height: 1px; bottom: 0; left: 0; background: linear-gradient(45deg, rgba(0,0,0,0.3) 0% 40%, #292929 0 100%);}
.program-detail-slide .l-more span.bottom::before {content: ''; display: inline-block; width: 60%; height: 1px; top: 0; right: -60%; background: rgba(0,0,0,0.3); position: absolute;}
.program-detail-slide .l-more span.left {width: 1px; height: 100%; left: 0; background: rgba(0,0,0,0.3);}
.program-detail-slide .l-more span.left::before {content: ''; display: inline-block; width: 1px; height: 100%; bottom: -100%; left: -0; background: #292929; position: absolute;}
.program-detail-slide .l-more img {margin-bottom: 2px;}
.program-detail-slide .l-more:hover span.top {transform: translateX(60%);}
.program-detail-slide .l-more:hover span.right {transform: translateY(100%);}
.program-detail-slide .l-more:hover span.bottom {transform: translateX(-60%);}
.program-detail-slide .l-more:hover span.left {transform: translateY(-100%);}


.program-slide-control {width: 100%;}
.program-slide-control .program-pagination span {font-size: 16px; font-weight: 300;}
.swiper-pagination-bar {width: 100%; max-width: 215px; height: 2px; background: #E4E4E4; transform: translateY(1px); margin-top: 6px;}
.swiper-pagination-bar::before { content: ''; position: absolute; width: 0; height: 2px; background: #292929; transform: translateY(0px); z-index: 1; }
.swiper-pagination-bar.timeBox::before { animation: aniPrgressbar 5s ease-in-out .1s; animation-fill-mode: forwards; }

@keyframes aniPrgressbar {
    from { width: 0; }
    to { width: 100%; }
}

.program-detail-slide .program-slide-r {width: 100%; height: 100%; max-width: 780px; max-height: 440px;}
.program-detail-slide .program-slide-img {position: relative; display: flex; width: 100%; max-width: 780px; max-height: 440px; height: 0; padding-bottom: 56.412%;}
.program-detail-slide .program-slide-img img {width: 100%; height: 100%; object-fit: cover; position: absolute;}

@media screen and (max-width:1280px) {
    .program-detail-slide {margin: -350px 0 90px;}
    .program-detail-slide .program-slide-l {max-width: 40%;}
    .program-detail-slide .program-slide-l .l-tit {font-size: 27px;}
    .program-detail-slide .program-slide-l .l-date {font-size: 19px;}
    .program-detail-slide .l-more {max-width: 115px; margin: 18px 0 68px;}
    .program-detail-slide .l-more-detail {padding: 5px 8px;}
    .swiper-pagination-bar {max-width: 195px;}

    .program-detail-slide .program-slide-r {max-width: 60%;}
    .program-detail-slide .program-slide-img {height: 100%; padding-bottom: unset;}
    .program-detail-slide .program-slide-img img {position: unset; min-height: 398px;}
}

@media screen and (max-width:1000px) {
    #gall_ul {grid-template-columns: repeat(2, 1fr); grid-row-gap: 36px;}
    .program-detail-slide .program-slide-l, .program-detail-slide .program-slide-r {max-width: 50%;}
    .program-detail-slide .l-more {margin-bottom: 40px;}
    .program-detail-slide .program-slide-img {height: 378px;}
    .program-detail-slide .program-slide-img img {min-height: 378px;}
}

@media screen and (max-width:768px) {
    .program-detail-slide {margin: -330px 0 60px;}
    .program-detail-slide ul li {flex-direction: column;}
    .program-detail-slide .program-slide-l, .program-detail-slide .program-slide-r {max-width: 100%;}
    .program-detail-slide .program-slide-l {min-height: 292px; padding: 24px 30px;}
    .program-detail-slide .program-slide-l .l-cate {font-size: 14px;}
    .program-detail-slide .program-slide-l .l-tit {font-size: 24px;}
    .program-detail-slide .program-slide-l .l-date {font-size: 16px; padding-bottom: 14px;}
    .program-detail-slide .l-more {margin: 16px 0 20px;}
    .swiper-pagination-bar {max-width: 185px;}
    .program-slide-control .program-pagination span {font-size: 14px;}

    .program-detail-slide .program-slide-img  {height: 100%; max-height: 278px; min-height: unset;}
    .program-detail-slide .program-slide-img img {max-height: 278px; min-height: unset;}

    #gall_ul {grid-template-columns: repeat(1, 1fr); grid-row-gap: 30px;}
}