@charset "utf-8";


.card-slide{
    margin: 24px 0 0;

    & > .list{
        display: block !important; overflow: hidden; margin: 0 auto !important;
        
        & .slick-list{margin-left: -29px; /* 보더 짤림 때문에 1px 차이주기 */}

        & .card{float: left; width: 33.333%; margin-left: 30px;}

        & .slick-track:has(.no_result){
            width: auto !important; margin: 0 0 0 29px;
        }
        & .no_result{
            width: 100% !important; border: 1px solid #dbdbdb; border-radius: 15px; padding: 30px 10px; display: flex; align-items: center; justify-content: center;
        }
    }

    @media (width <= 1280px){
        & > .list{
            & .slick-list{margin-left: -20px;}
            & .card{margin-left: 20px;}
        }
    }
}

.card{
    width: calc( (100% - 40px) / 3 ); overflow: hidden; margin-right: 0;
    border: 1px solid #dbdbdb;box-sizing: border-box; border-radius: 15px;
    text-align: left;

    & a{
        position: relative; display: block;
        
        & .image{
            position: relative; display: block; padding: 62.758% 0 0; box-sizing: border-box; overflow: hidden;
            /* &:before{content: ""; position: absolute; z-index: 1; top: 0; left: 0; display: block; width: 100%; height: 100%; background-color: rgba(0,0,0,0.35); opacity: 0; visibility: hidden; transition: all 0.35s;} */

            & img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); width: 100%; height: 100%; object-fit: cover; transition: all 0.3s;}
        }

        /* &:hover .image:before,
        &:focus .image:before{opacity: 1; visibility: visible;} */
        /* &:hover .image img,
        &:focus .image img{transform: translate(-50%, -50%) scale(1.05);} */

        & .tit{
            margin-top: 1rem;
            & .txt{display: inline-block; max-width: 85%; vertical-align: middle; font-size: 1.2rem; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: break-word;}
            & .new{display: inline-block; vertical-align: middle; width: 15px; height: 15px; line-height:15px; border-radius: 50%; margin: 0 5px; background:#e60012; color:#fff; font-size:10px; text-align: center;}
        }

        & .contents{display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 22px; height: 44px;}

        & .date{display: block; font-size: 0.867rem; color: #aaa; letter-spacing: 0.2px; margin-top: 0.6rem;}
    }

    & .con{
        padding: 35px 25px 25px; position: relative;

        & .tit{
            margin-top: 0; font-size: 20px; font-weight: bold; line-height: 1.6rem;
            overflow:hidden; text-overflow: ellipsis; white-space: nowrap;
        }

        & ul.info {
            float: none; display: flex; flex-direction: column; gap: 5px;
            margin-top: 20px;
            & li {
                width: 100%;
                & dl {
                    display: flex; gap: 10px;
                    & dt {width: 90px; font-weight: 600;}
                    & dd {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1;}
                }
            }
        }

        & .mark {
            display: flex; flex-direction: row; gap: 5px; flex-direction: row-reverse; position: absolute; top: -18px; right: 25px; 
            & p {
                background: #222222; color: #fff; padding: 5px 10px; border-radius: 3px;
                &.head {background: var(--primary_color);}
                &.end {background: #777777; color: #cccccc;}
            }
        }

        & > .btn {
            display: block; width: 100%; text-align: center;
            padding: 10px; border-radius: 10px;
            border: 1px solid #dbdbdb; box-sizing: border-box;
            margin-top: 20px; transition: all 200ms linear;
            box-sizing: border-box;
        }

        & .contents {
            margin-top: 20px; font-size: 17px; line-height: 30px;
            -webkit-line-clamp: 3; height: auto;
        }

        & .star {
            gap: 4px; margin-bottom: 20px;

            & img {display: inline; width: 26px; height: auto;}
        }
    }

    &.no_result{width: 100%; text-align: center; padding: 6rem 0; margin: 0;}
    
    &:hover {
        box-shadow: 4px 1px 15px 1px rgba(0,0,0,0.06);
        & a{
            & .image:before {opacity: 1;}
        }
        & .con{
            & > .btn {
                background: var(--primary_color); color: #fff;
                border: 1px solid var(--primary_color);
            }
        }        
    }


    @media all and (max-width:1280px){
        
    }

    @media all and (max-width:1000px){
        
    }

    @media all and (max-width:860px){
        & a{
            & .image {padding: 55.758% 0 0;}
        }
        & .con {
            padding: 30px 20px 20px;

            & .mark {right: 20px;}
            & .tit {font-size: 18px; line-height: 1.6rem;}
            & ul.info {margin-top: 10px; gap: 3px;}
            & > a.btn {margin-top: 10px; padding: 8px;}
        }
    }

    @media all and (max-width:640px){
        & a{
            & .image {padding: 50.758% 0 0;}
        }
        & .con{
            & > a.btn {background: var(--primary_color); color: #fff; border: 0px;}
        }
    }
    @media all and (max-width:460px){
        & a{
            & .tit{
                & .txt{
                    max-width: 80%;
                    & .file{margin: -1px 2px 0;}
                }
                & .txt{max-width: 80%;}
            }
        }
    }
}



.small_tab{
    display: flex; flex-wrap: wrap; gap: 12px !important; margin-top: 24px !important;
    & > li{

        & button{
            width: 100px; line-height: 42px; border-radius: 42px; color: #7d7d7d; box-shadow: inset 0 0 0 1px #dbdbdb; font-size: 20px; font-weight: 700;

            &.on{
                color: #fff; box-shadow: none; background: var(--primary_color);
            }
        }
    }

    @media (width <= 1280px){

    }
    @media (width <= 860px){
        gap: 8px !important;
        & > li{
            & button{
                width: auto; padding: 0 20px; line-height: 36px; font-size: 16px;
            }
        }
    }
    @media (width <= 640px){
        
    }
}