.elementor-83 .elementor-element.elementor-element-5e43b76{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:170px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-83 .elementor-element.elementor-element-5e43b76:not(.elementor-motion-effects-element-type-background), .elementor-83 .elementor-element.elementor-element-5e43b76 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;background-image:url("https://tmc26.mycafe24.com/wp-content/uploads/2026/02/tmc_main_1920_1400.jpg");background-position:top center;background-repeat:no-repeat;background-size:auto;}.elementor-83 .elementor-element.elementor-element-c35c54e{--display:flex;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-83 .elementor-element.elementor-element-d778117{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-raven-heading .raven-heading-title, .elementor-widget-raven-heading .raven-heading-title-inner{color:var( --e-global-color-primary );-webkit-text-fill-color:var( --e-global-color-primary );}.elementor-widget-raven-heading .raven-heading, .elementor-widget-raven-heading .raven-heading a{font-family:var( --e-global-typography-primary-font-family ), Sans-serif;font-size:var( --e-global-typography-primary-font-size );font-weight:var( --e-global-typography-primary-font-weight );line-height:var( --e-global-typography-primary-line-height );}.elementor-83 .elementor-element.elementor-element-3aa3880 .raven-heading-title, .elementor-83 .elementor-element.elementor-element-3aa3880 .raven-heading-title-inner{color:#FFFFFF;-webkit-text-fill-color:initial;}.elementor-83 .elementor-element.elementor-element-3aa3880 .raven-heading, .elementor-83 .elementor-element.elementor-element-3aa3880 .raven-heading a{font-family:"Forum", Sans-serif;font-size:35px;font-weight:400;line-height:43px;}.elementor-83 .elementor-element.elementor-element-6449d73{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:flex-end;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-83 .elementor-element.elementor-element-622993b .raven-heading-title, .elementor-83 .elementor-element.elementor-element-622993b .raven-heading-title-inner{color:#FFFFFF;-webkit-text-fill-color:initial;}.elementor-83 .elementor-element.elementor-element-622993b .raven-heading, .elementor-83 .elementor-element.elementor-element-622993b .raven-heading a{font-family:"Song Myung", Sans-serif;font-size:100px;font-weight:400;line-height:100px;}.elementor-83 .elementor-element.elementor-element-ff8a8da{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:40px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}@media(min-width:777px){.elementor-83 .elementor-element.elementor-element-c35c54e{--content-width:1320px;}}@media(max-width:1366px){.elementor-83 .elementor-element.elementor-element-5e43b76:not(.elementor-motion-effects-element-type-background), .elementor-83 .elementor-element.elementor-element-5e43b76 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-size:cover;}.elementor-83 .elementor-element.elementor-element-c35c54e{--padding-top:0px;--padding-bottom:0px;--padding-left:20px;--padding-right:20px;}.elementor-widget-raven-heading .raven-heading, .elementor-widget-raven-heading .raven-heading a{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}}@media(max-width:1200px){.elementor-83 .elementor-element.elementor-element-5e43b76{--padding-top:100px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-widget-raven-heading .raven-heading, .elementor-widget-raven-heading .raven-heading a{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-83 .elementor-element.elementor-element-3aa3880 > .elementor-widget-container{padding:0px 0px 20px 0px;}.elementor-83 .elementor-element.elementor-element-6449d73{--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;}.elementor-83 .elementor-element.elementor-element-ff8a8da{--padding-top:40px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}@media(max-width:776px){.elementor-83 .elementor-element.elementor-element-5e43b76{--padding-top:100px;--padding-bottom:50px;--padding-left:0px;--padding-right:0px;}.elementor-83 .elementor-element.elementor-element-c35c54e{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-83 .elementor-element.elementor-element-d778117{--gap:20px 20px;--row-gap:20px;--column-gap:20px;}.elementor-widget-raven-heading .raven-heading, .elementor-widget-raven-heading .raven-heading a{font-size:var( --e-global-typography-primary-font-size );line-height:var( --e-global-typography-primary-line-height );}.elementor-83 .elementor-element.elementor-element-6449d73{--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:space-between;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-83 .elementor-element.elementor-element-622993b > .elementor-widget-container{padding:20px 0px 20px 0px;}.elementor-83 .elementor-element.elementor-element-622993b .raven-heading, .elementor-83 .elementor-element.elementor-element-622993b .raven-heading a{font-size:50px;line-height:50px;}.elementor-83 .elementor-element.elementor-element-ff8a8da{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}}/* Start custom CSS for raven-heading, class: .elementor-element-3aa3880 */.mbz h1{
    margin-bottom: 0px;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-fb6c40f */.main_pro_box{
    display:flex;
    border:1px solid #444444;
    border-radius:5px;
    align-items:center;
    justify-content: center;
    width:112px;
}
.main_pro_box p{
    font-size:16px;
    color:#ddd;
    margin: 0;
}

.main_pro_box:hover{
    cursor: pointer;
    background: #fff;
    border:1px solid #fff;
}

.main_pro_box:hover p{
    color:#5f5f5f;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-fc998dd */.main_pro_box2{
    display:flex;
    border:1px solid #000;
    border-radius:5px;
    align-items:center;
    justify-content: center;
    width:112px;
}
.main_pro_box2 p{
    font-size:16px;
    color:#fff;
    margin: 0;
}

@media(max-width:1200px){
    .main_pro_box2{
        display: none;
    }
}/* End custom CSS */
/* Start custom CSS for shortcode, class: .elementor-element-2f79cf6 *//* 1. 기본 설정 및 그리드 */

#kboard-default-latest .prod-grid {
    display: flex !important;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
    min-height: 650px;
    flex-wrap: wrap;
}

#kboard-default-latest .prod-card {
    flex: 1;
    max-width: 420px;
    text-decoration: none;
    transition: all 0.4s ease;
    opacity: 0.8; /* 0에서 0.8로 변경 (기본값) */
    will-change: transform, opacity;
}

/* 2. PC용 애니메이션  */

@media (min-width: 1201px) {

    @keyframes spreadLeft {
        0% { opacity: 0; transform: translateX(120%) scale(0.8); filter: blur(5px); }
        100% { opacity: 0.8; transform: translateX(0) scale(1); filter: blur(0); }
    }

    @keyframes spreadRight {
        0% { opacity: 0; transform: translateX(-120%) scale(0.8); filter: blur(5px); }
        100% { opacity: 0.8; transform: translateX(0) scale(1); filter: blur(0); }
    }

    @keyframes spreadCenter {
        0% { opacity: 0; transform: scale(0.8); filter: blur(5px); }
        100% { opacity: 0.8; transform: scale(1); filter: blur(0); }
    }

    .product-kboard-list .prod-card {
        animation-duration: 1.5s;
        animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
        animation-fill-mode: forwards;

    }

    .product-kboard-list .prod-card:nth-child(1) { animation-name: spreadLeft; animation-delay: 0.6s; }
    .product-kboard-list .prod-card:nth-child(2) { animation-name: spreadCenter; animation-delay: 0.2s; }
    .product-kboard-list .prod-card:nth-child(3) { animation-name: spreadRight; animation-delay: 0.6s; }

}



/* 3. 모바일용 애니메이션 (1200px 이하) */

@media (max-width:1200px) {

    @keyframes fadeInUp {

        0% {
            opacity: 0;
            transform: translateY(30px);
        }

        100% {
            opacity: 0.8;
            transform: translateY(0);
        }

    }

    /* 부모 컨테이너 수정 */
    #kboard-default-latest .prod-grid {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: 400px !important; /* 내용이 없어도 최소한의 높이 확보 */
        gap: 40px !important;
        padding: 20px 20px 80px 20px !important; /* 하단 푸터 여백 확실히 확보 */

    }

    /* 각 카드 설정 - 애니메이션 실행 명령 추가 */
    #kboard-default-latest .prod-card {
        opacity: 0; /* 초기 상태 */
        position: relative !important;
        display: block !important;
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;

        /* 애니메이션 실행 속성 필수 */
        animation-name: fadeInUp !important;
        animation-duration: 0.8s !important;
        animation-timing-function: ease-out !important;
        animation-fill-mode: forwards !important;

    }

    /* 지연 시간 (기존 유지) */
    .product-kboard-list .prod-card:nth-child(1) { animation-delay: 0.2s !important; }
    .product-kboard-list .prod-card:nth-child(2) { animation-delay: 0.4s !important; }
    .product-kboard-list .prod-card:nth-child(3) { animation-delay: 0.6s !important; }

    /* 이미지 박스 높이 자동화 */
    #kboard-default-latest .prod-img-box {
        height: auto !important;
        min-height: 250px !important; /* 이미지 영역 최소 높이 */
        padding: 20px !important;
    }

    #kboard-default-latest .prod-card:hover .prod-img-box {
        height: auto !important;
    }

}

/* 1201px부터 1267px 사이 리스트(그리드) 깨짐 방지 */

@media screen and (min-width: 1201px) and (max-width: 1267px) {
    /* 1. 전체 그리드 간격 축소 */
    #kboard-default-latest .prod-grid {
        gap: 15px !important; /* 기존 30px에서 15px로 줄여 공간 확보 */
        justify-content: center !important;
        padding: 0 10px !important;
    }

    /* 2. 카드 너비 유연하게 조정 */
    #kboard-default-latest .prod-card {
        flex: 1 1 calc(33.333% - 15px) !important; /* 3단 배열 유지 */
        max-width: 380px !important; /* 카드가 너무 커서 삐져나가지 않게 제한 */
    }

    /* 3. 이미지 박스 높이 조정 (공간 확보) */
    #kboard-default-latest .prod-img-box {
        height: 320px !important; /* 좁은 화면에 맞춰 이미지 높이 살짝 축소 */
        padding: 20px !important;
    }

    /* 4. 호버 시 확대 높이도 함께 조정 */
    #kboard-default-latest .prod-card:hover .prod-img-box {
        height: 350px !important;
    }

    /* 5. 텍스트 크기 미세 조정 */
    #kboard-default-latest .prod-title {
        font-size: 24px !important; /* 30px은 너무 커서 줄바꿈될 수 있음 */
    }

}

/* 4. 기타 스타일 (공통) */
#kboard-default-latest .prod-img-box {
    border: 1px solid #333;
    border-radius: 20px;
    padding: 30px;
    height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
    margin-bottom: 20px;
    transition: height 0.5s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s, box-shadow 0.4s;
    overflow: hidden;

}

#kboard-default-latest .prod-img-box img {
    max-width: 100%;    /* 박스 너비를 넘지 않게 함 */
    max-height: 100%;   /* 박스 높이를 넘지 않게 함 */
    object-fit: contain; /* 비율을 유지하면서 박스 안에 쏙 들어가게 함 */
    width: auto;
    height: auto;
}
#kboard-default-latest .prod-card:hover {
    opacity: 1 !important; /* 애니메이션 fill-mode를 이기기 위해 !important 권장 */
    transition: opacity 0.3s ease;
}
#kboard-default-latest .prod-card:hover .prod-img-box {
    height: 440px;
    border-color: #777;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

#kboard-default-latest .prod-title {
    font-size: 30px !important;
    text-align: center;
    transition: transform 0.4s ease;
    display: block;
}

#kboard-default-latest .prod-card:hover .prod-title {
    transform: scale(1.1); /* 떨림 방지를 위해 배율을 살짝 줄였습니다 */
}/* End custom CSS */
/* Start JX Custom Fonts CSS *//* End JX Custom Fonts CSS */
/* Start JX Custom Fonts CSS *//* End JX Custom Fonts CSS */