@charset "utf-8";

/* �⺻ �ʱ�ȭ */
.bbs_main { position: relative; width: 100%; box-sizing: border-box; }
.bbs_main ul, .bbs_main li { list-style: none; padding: 0; margin: 0; }
.cb { clear: both; }
.font-B { font-weight: bold; }

/* ��� Ÿ��Ʋ */
.bbs_main_wrap_tit { position: relative; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #eee; }
.bbs_main_wrap_tit_l { float: left; }
.bbs_main_wrap_tit_l h2 { margin: 0; line-height: 1; }
.bbs_main_wrap_tit_r { float: right; }
.more_btn { border: 1px solid #ddd; background: #fff; color: #888; font-size: 12px; padding: 3px 10px; border-radius: 3px; cursor: pointer; transition: all 0.2s;}
.more_btn:hover { background: #f5f5f5; color: #333; }

/* Swiper �����̳� */
.rb_swiper { position: relative; }
.rb_swiper_inner { overflow: hidden; position: relative; }
.rb_swiper_list { box-sizing: border-box; }

/* ��Ʈ������ �ڽ� */
.portfolio-item-box { position: relative; overflow: hidden; border-radius: 0px; /*box-shadow: 0 4px 10px rgba(0,0,0,0.1); */}
.pf-img-wrap { position: relative; width: 100%; overflow: hidden; }
.skin_list_image { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; display: block; }
.portfolio-item-box:hover .skin_list_image { transform: scale(1.1); }

/* �������� */
.pf-overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background:color-mix(in srgb, var(--rb-main-color) 90%, transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 50px;
    box-sizing: border-box;
    z-index: 10;
}

.pf-overlay2 {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    opacity: .5;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 50px;
    box-sizing: border-box;
    z-index: 10;
    background:

    /* LEFT : 군청 */
    radial-gradient(
        circle at 15% 18%,
        rgba(22,48,120,.55) 0%,
        rgba(22,48,120,0) 45%
    ),

    /* RIGHT : 보라 */
    radial-gradient(
        circle at 85% 15%,
        rgba(110,40,165,.35) 0%,
        rgba(110,40,165,0) 55%
    ),

    /* CENTER : 군청+보라 혼합 */
    radial-gradient(
        ellipse at center,
        rgba(40,32,82,.35) 0%,
        rgba(32,28,74,.48) 55%,
        rgba(22,22,55,.68) 85%,
        rgba(12,12,28,.88) 100%
    )!important;
}




.portfolio-item-box:hover .pf-overlay { opacity: 1; }

/* �������� ���� ������ */
.pf-hover-content { width: 100%; transform: translateY(20px); transition: transform 0.3s ease; }
.portfolio-item-box:hover .pf-hover-content { transform: translateY(0); }

/* ���� (����) */
.pf-subject { color: #fff; font-size: 16px; font-weight: bold; line-height: 1.4; margin-bottom: 5px; word-break: keep-all; /*text-shadow: 0 2px 4px rgba(0,0,0,0.5);*/ }

/* ��ũ �ؽ�Ʈ (����) */
.pf-link-txt { 
    color: #fff; /* ���� �Ķ��� */
    font-size: 13px; 
    margin-top: 5px; 
    word-break: break-all;
    text-decoration: none;
    display: block; /* �߿�: ���̰� ���� */
}

/* --- [�߿�] ������ ��� CSS�� ���� ó�� --- */
.pf-cate, 
.pf-cont, 
.pf-info, 
.icon_abs { 
    display: none !important; 
}

/* ����¡ ��ư */
.rb_swiper_paging_btn { position: absolute; top: -45px; right: 60px; z-index: 50; }
.rb_swiper_paging_btn button { background: #fff; border: 1px solid #ddd; width: 26px; height: 26px; cursor: pointer; border-radius: 3px; padding: 0; margin-left: 3px; display: inline-flex; align-items: center; justify-content: center; }
.rb_swiper_paging_btn button:hover { border-color: #bbb; background-color: #f9f9f9; }
.rb_swiper_paging_btn button img { width: 12px; height: 12px; }
.no_data { text-align: center; color: #888; padding: 50px 0; font-size: 14px; background: #f9f9f9; border-radius: 5px; }

.rb_swiper .rb_swiper_list img {border:0px solid rgba(0,0,0,0.1);}

@media only screen and (max-width:1024px) {


.pf-overlay {padding:20px}



.pf-img-wrap{height:150px  !important}


}