@charset "utf-8";
/* 濡쒖씤?뚮줈 ?€諛섏쓳???덉씠?꾩썐 CSS */

@media (max-width: 1200px) {
    /* 湲곕낯 ?덉씠?꾩썐 而⑦뀒?대꼫 */
    .df-content-wrap, 
    .df-header-spot-inner, 
    .df-lnb-position, 
    .df-footer, 
    #contents,
    #container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
    }

    /* ?ㅻ뜑 濡쒓퀬 ?곸뿭 */
    .df-header-spot-inner {
        flex-direction: column;
        justify-content: center;
        height: auto !important;
        padding: 20px 10px;
    }
    .df-logo {
        margin: 15px 0;
    }
    .df-searchbox {
        position: relative !important;
        right: auto !important;
        margin-top: 10px;
        width: 100%;
        text-align: center;
    }
    
    /* 醫뚯륫 SNS ?꾩씠肄?*/
    .df-header-spot-inner > div:first-child {
        position: relative !important;
        left: auto !important;
        justify-content: center;
        margin-bottom: 10px;
    }

    /* ?섎떒 ?명꽣 ?곸뿭 */
    .df-ft-info, .df-ft-company {
        float: none !important;
        width: 100% !important;
        text-align: center;
        margin-bottom: 20px;
    }
    .df-ft-company p {
        margin-bottom: 5px;
        word-break: keep-all;
    }
    .df-ft-company > div {
        justify-content: center;
    }

    /* ?곹뭹 紐⑸줉 */
    .sct_wrap, .sct {
        width: 100% !important;
    }
    .sct li {
        width: 48% !important;
        margin: 1% !important;
    }
    .sct_img img {
        width: 100% !important;
        height: auto !important;
    }
}

@media (max-width: 768px) {
    /* 紐⑤컮???섍꼍 */
    .sct li {
        width: 100% !important;
        margin: 0 0 20px 0 !important;
    }

    /* ?곷떒 GNB / LNB 媛€濡??ㅽ겕濡??ㅼ??댄봽) UI */
    .df-lnb-category {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }
    .df-lnb-category::-webkit-scrollbar {
        display: none; /* ?щ＼, ?ы뙆由? ?ㅽ럹?????ㅽ겕濡ㅻ컮 ?④? */
    }
    .df-lnb-category {
        -ms-overflow-style: none; /* IE, ?ｌ? */
        scrollbar-width: none; /* ?뚯씠?댄룺??*/
    }
    ul.custom-nav-list {
        display: inline-flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        gap: 20px !important;
        padding: 0 15px !important;
    }
    .custom-nav-item {
        display: inline-block !important;
        white-space: nowrap;
    }

    /* ?ㅻ뜑 ?곷떒 ?좏떥 (濡쒓렇???? ?④? */
    .df-header-top {
        display: none !important;
    }

    /* 硫붿씤 ?€?ㅽ겕由?諛곕꼫 */
    .df-mainslide_wide {
        height: 100vh !important;
        margin-top: -60px; /* ?ㅻ뜑 ?꾨줈 ?щ젮??苑?李④쾶 */
        margin-bottom: 20px !important;
    }
    
    /* 湲곗〈 紐⑤컮???ㅻ뜑 ?⑤뵫 議곗젙 */
    .df-header-spot-inner {
        padding: 10px 0;
    }
}

/* 留덉씠?щ줈 ?좊땲硫붿씠??諛??몃쾭 ?④낵 */
.sct li, .df-prl-item {
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    border-radius: 8px;
    overflow: hidden;
}
.sct li:hover, .df-prl-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

/* ?곹뭹 ?몃꽕???몃줈濡?湲멸쾶 (3:4 鍮꾩쑉) */
.sct_img img, .df-prl-thumb img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}
.sct_img img {
    transition: transform 0.5s ease;
}
.sct li:hover .sct_img img {
    transform: scale(1.05);
}

/* 踰꾪듉 諛??꾩씠肄??몃쾭 */
.df-ft-company a:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* ?대?吏€ 諛?諛섏쓳??蹂댁젙 */
img {
    max-width: 100%;
    height: auto;
}

/* 모바일 상세페이지 전용 스타일 */
@media (max-width: 768px) {
    #sit_pvi { margin: 0 -15px; width: calc(100% + 30px); }
    #sit_pvi_big img { width: 100% !important; height: auto !important; display: block; }
    #sit_pvi_thumb { display: none !important; } /* 모바일에서 썸네일 숨김 */
}



/* PC 상세페이지 전용 스타일 */
@media (min-width: 769px) {
    .mobile-indicator { display: none !important; }
}