@charset "UTF-8";


.gallery-tab-content {display:none}
.gallery-tab-content.active {display:block}


.wrap-gallery {overflow: hidden;line-height: 1;margin: 100px auto;max-width: 1600px;}
.wrap-gallery .gallery-tab {display: flex;margin-bottom: 40px;padding-top: 5px;margin-left: 10px;} 
.wrap-gallery .gallery-tab > li button {margin-right: 60px;position: relative;font-size: 35px;-webkit-text-stroke: 1px #656565;color: #fff;z-index: 1;font-family: 'Pretendard Black' !important;}
.wrap-gallery .gallery-tab > li.active button {color:#000}
.wrap-gallery .gallery-tab > li.active button:before {content:'';position:absolute;top: -5px;right: -18px;width: 18px;height: 18px;background:#689cc4;z-index: -1;border-radius: 50px;}
 
 
.wrap-gallery .list ul {display:flex;}
.wrap-gallery .list ul.slick-slider {display:block;}
.wrap-gallery .list ul li {width: 100%;margin: 0 10px;}
.wrap-gallery .list .slick-list {overflow:visible}
.wrap-gallery .list .subject {display: block;transition: 0.3s;}
.wrap-gallery .list .subject .thumb {border-radius: 20px;overflow: hidden;height: 250px;border: 1px solid #ededed;position: relative;transition: 0.3s;}
.wrap-gallery .list .subject .thumb img {width:100%;height:100%;object-fit:cover;}
.wrap-gallery .list .subject .cate {position: absolute;left: 0;bottom: 0;z-index: 1;background: #689cc4;color: #fff;padding: 11px 20px 9px;line-height: 1;border-top-right-radius: 15px;font-weight: 500;}
.wrap-gallery .list .subject .con {font-size: 21px;margin-top: 13px;font-weight: bold;color: #494949;word-break: break-all;display: -webkit-box;overflow: hidden;line-height: 1.2;text-overflow: ellipsis;-webkit-box-orient: vertical;-webkit-line-clamp: 2;height: 53px;padding: 0px 10px;text-align: center;}
.wrap-gallery .list .subject .date {float: right;font-size: 15px;color: #5e5a5a;display: none;}

.wrap-gallery .list .subject:hover {transform: translateY(-13px);transition: 0.3s;}
.wrap-gallery .list .subject:hover .thumb {box-shadow: 0px 0px 13px #c6cacd;transition: 0.3s;}


.wrap-gallery .control {display: none;position: absolute;right: 0;bottom: 350px;}
.wrap-gallery .control .prevnext {justify-content: end; position: relative;}
.wrap-gallery .control .prevnext:before {content:'';position:absolute;top: 20px;right: 48px;border-right: 2px solid #d1d1d1;height: 25%;}
.wrap-gallery .control .prevnext button {display: block; opacity: 0.5;transition:0.3s;}
.wrap-gallery .control .prevnext button:hover {transition:0.3s; opacity:1}
.wrap-gallery .slider:not(.empty) + .control {display: flex; justify-content: flex-end;}

.wrap-gallery .more {display:none}


.wrap-gallery .slick-dots {position: absolute;top: -68px;right: 90px;} 
.wrap-gallery .slick-dots li {margin: 0px 6px;padding: 3px;line-height: 0;border: 1px solid #fff;border-radius: 50px;}
.wrap-gallery .slick-dots li button {text-indent: -9999px;width: 12px;height: 12px;background: #b2b2b2;border-radius: 50px;line-height: 0;}
.wrap-gallery .slick-dots li.slick-active {border-color: #03438c;}
.wrap-gallery .slick-dots li.slick-active button {background: #064990;}
 
@media all and (max-width: 1024px){    
        
    .wrap-gallery .slick-dots {top: -65px;right: 100px;}  

}
@media all and (max-width: 768px){

    
    .wrap-gallery .gallery-tab {justify-content:center;margin-left: revert-layer;}
    .wrap-gallery .gallery-tab > li button {font-size: 28px;margin: 0 15px;font-family: 'Pretendard Bold' !important;}
    .wrap-gallery .gallery-tab > li.active button:before {width: 11px;height: 11px;right: -10px;top: -5px;}
    .wrap-gallery .control {bottom: 20px;right: auto;left: 50%;transform: translateX(-50%);border: 1px solid #ececec;border-radius: 50px;box-shadow: 0px 0px 10px #13131329;}
    .wrap-gallery {padding-bottom: 90px;margin-bottom: 60px;}
    .wrap-gallery .slick-dots {display: none !important;}
    .wrap-gallery .slick-arrow {width:45px}
    .wrap-gallery .control .prevnext:before {right: 44px; top: 18px;}
    .wrap-gallery .list .subject .con {padding: 0 10px;font-size: 19px;height: 47px;}

}

@media all and (max-width: 550px){

    .wrap-gallery {padding-bottom: 90px;margin-bottom: 30px;margin-top: 70px;}
    .wrap-gallery .list .subject .cate {font-size: 14px; padding: 8px 15px; border-top-right-radius: 10px;}
    .wrap-gallery .gallery-tab {margin-bottom:20px}
    .wrap-gallery .gallery-tab > li button {font-size: 25px;margin: 0 10px;}
    .wrap-gallery .gallery-tab > li.active button:before {width: 8px;heighT: 8px;top: -3px;right: -7px;}
    
}
