@charset "UTF-8";

#main{min-height:100vh; padding:160px 0 200px; background:url(../images/main/main_bg.jpg) no-repeat center / cover;}
#main .main-text .title{color:#fff; font-size:72px; font-weight:600; line-height:1.25;}
#main .main-text .text{margin-top:24px; color:#fff; font-size:18px; line-height:1.55556;}
#main .main-slide-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 100px;
}
#main .main-slide-card {
    position: relative;
    width: 100%;
    aspect-ratio: 464 / 312;
    overflow: hidden;
    background-color: #000; /* Loading fallback */
}
#main .main-slide-card .card-slide-wrapper {
    width: 100%;
    height: 100%;
}
#main .main-slide-card .card-slide-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease-in-out;
    z-index: 0;
}
#main .main-slide-card .card-slide-item.active {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}
#main .main-slide-card .card-slide-item.leaving {
    opacity: 0;
    visibility: visible;
    z-index: 1;
}
#main .main-slide-card .card-slide-item.entering {
    opacity: 1;
    visibility: visible;
    z-index: 2;
}

#main .main-slide-card .card-slide-item a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}
#main .main-slide-card .card-slide-item a .img {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100%;
}
#main .main-slide-card .card-slide-item a .img:before, 
#main .main-slide-card .card-slide-item a .img:after {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    content: '';
    transition: 0.25s ease-in-out;
}
#main .main-slide-card .card-slide-item a .img:before {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.90) 100%);
}
#main .main-slide-card .card-slide-item a .img:after {
    opacity: 0;
    background: linear-gradient(180deg, rgba(106, 191, 75, 0.50) 0%, #6ABF4B 100%);
}
#main .main-slide-card .card-slide-item a:hover .img:before {
    opacity: 0;
}
#main .main-slide-card .card-slide-item a:hover .img:after {
    opacity: 1;
}
#main .main-slide-card .card-slide-item a .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#main .main-slide-card .card-slide-item a .text {
    display: flex;
    position: absolute;
    top: 0; left: 0; z-index: 1;
    width: 100%; height: 100%;
    padding: 24px;
    color: #fff;
    justify-content: flex-end;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}
#main .main-slide-card .card-slide-item a .text span {
    padding: 8px 16px;
    border: 1px solid #E8E8E8;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.42857;
    margin-top: auto; /* 배지를 타이틀 바로 위(하단 그룹)에 배치 */
}
#main .main-slide-card .card-slide-item a .text div {
    display: -webkit-box;
    overflow: hidden;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.5;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    min-height: 60px; /* 2줄 고정 (20px * 1.5 * 2) */
    width: 100%;
}
#main .main-slide-card .card-slide-item a .text p {
    display: -webkit-box;
    opacity: 0;
    overflow: hidden;
    font-size: 16px;
    line-height: 1.5;
    transition: max-height 0.35s ease-in-out, opacity 0.35s ease-in-out;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    max-height: 0; /* 비호버 시 공간 차지 안 함 → 타이틀이 카드 최하단 고정 */
    width: 100%;
}
#main .main-slide-card .card-slide-item a:hover .text p {
    max-height: 48px; /* 16px × 1.5 × 2줄 = 48px — 정확히 2줄만 표시 */
    opacity: 1;
}

#main .main-slide-card .card-dots {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 10;
    display: flex;
    gap: 6px;
}
#main .main-slide-card .card-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.2s ease;
}
#main .main-slide-card .card-dot:hover {
    background-color: rgba(255, 255, 255, 0.8);
}
#main .main-slide-card .card-dot.active {
    background-color: #fff;
}

@media (max-width:1440px){
    #main .main-text .title{font-size:63px;}
}

@media (max-width:1024px){
    #main{display:flex; padding:80px 0; align-items:center;}
    #main .main-text .title{font-size:40px;}
    #main .main-text .text{font-size:18px;}
    #main .main-slide{margin-top:30px;}
    #main .slide-control{margin-top:30px; gap:8px;}
    #main .slide-control button{width:40px; height:40px;}
    #main .slide-control button:before{width:8px; height:12px;}
    #main .main-slide-grid{gap:16px; margin-top:60px;}
    #main .main-slide-card .card-slide-item a .text{padding:16px; gap:8px;}
    #main .main-slide-card .card-slide-item a .text span{font-size:12px; padding:6px 12px;}
    #main .main-slide-card .card-slide-item a .text div{font-size:15px; min-height:45px;}
    #main .main-slide-card .card-slide-item a .text p{font-size:13px;}
    #main .main-slide .slide-progress.swiper-pagination-progressbar{margin-top:30px;}
}

@media (max-width:768px){
    #main .main-text .title{font-size:21px; text-align:center;}
    #main .main-text .text{font-size:13px; text-align:center;}
    #main .slide-control{justify-content:center;}
    #main .main-slide{max-width:480px;}
    #main .main-slide-grid{grid-template-columns:1fr; gap:12px; margin-top:32px; max-width:480px; margin-left:auto; margin-right:auto;}
    #main .main-slide-card .card-slide-item a .text div{font-size:16px; min-height:48px;}
}