.con_wrapper .nav{display: flex; margin-left: auto;}
.con_wrapper .nav .nav-link{font-size: 0.9rem;}
.con_wrapper .nav-link { color: #575e60; border-radius: 8px 8px 0 0; width: 100px; background: none; border: 1px solid #dee2e6; border-bottom: 0; border-right: 0; position: relative; font-size: 0.9rem; padding: 0.6rem 1rem;}
.con_wrapper .nav-link:last-child { border-right: 1px solid #dee2e6; }
.con_wrapper .nav-link.active { border-top: 2px solid #4285bc; color: #4285bc; border-bottom: 1px solid #ffffff;}
.con_wrapper .nav-link:hover { color: #4285bc; }

.con_wrapper .invention-box { text-align: center; display: inline-block; width: calc(25% - 34px); margin: 0 40px 40px 0; box-shadow: 0 0 10px #cccccc; border-radius: 10px; }
.con_wrapper .invention-box:nth-child(4n) { margin-right: 0; }
.con_wrapper .invention-box .invention-img { height: 180px; width: 100%; overflow: hidden; position: relative; border-top-left-radius: 10px; border-top-right-radius: 10px; background-color: #f8f9fa; }
.con_wrapper .invention-box .invention-img img{ object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -o-transform: translateY(-50%, -50%); -webkit-transform: translateY(-50%, -50%); -moz-transform: translateY(-50%, -50%); -ms-transform: translateY(); width: 100%; height: 100%; transition: opacity 0.3s ease; }
.con_wrapper .invention-box .invention-img img.loading { opacity: 0; }
.con_wrapper .invention-box .invention-img img.loaded { opacity: 1; }
.con_wrapper .invention-box .invention-img img.error { opacity: 1; }
.con_wrapper .invention-box .invention-img .placeholder { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #6c757d; font-size: 0.9rem; text-align: center; }

/* 이미지 로딩 상태 안정화 */
.con_wrapper .invention-box .invention-img {
    min-height: 180px;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.con_wrapper .invention-box .invention-img img {
    will-change: opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.con_wrapper .invention-box .invention-name { font-size: 1.125rem; line-height: 1.4rem; padding: 1rem 1rem .5rem; font-weight: 400; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.con_wrapper .invention-box .inventor { position: relative; font-size: 0.9375rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin:0; padding: 0 1rem 1.125rem; color: #575e60; }

.con_wrapper .inventor-box { text-align: center; display: inline-block; width: calc(25% - 33px); margin: 0 40px 40px 0; box-shadow: 0 0 10px #cccccc; border-radius: 10px; }
.con_wrapper .inventor-box-wrap .inventor-box:nth-child(4n) { margin-right: 0; }
.con_wrapper .inventor-box .inventor-name { text-align: center; font-family: 'SBAggroL'; font-size: 1.3rem; line-height: 1.4rem; margin: .8rem 0; font-weight: 400; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 1rem; }
.con_wrapper .inventor-box .inventor-name span { color: #2b6594; font-weight: 300; display: block; font-size: 1rem; margin-bottom: 1rem; }
.con_wrapper .inventor-box .inventor-year { position: relative; font-size:1.5rem; margin:0; padding: 1rem; color: #e775b0; font-family: 'SBAggroL'; }

.modal-header, .modal-body{position: relative; border: none;}



.modal-header .btn-close {
    position: absolute;
    right: 2rem;
    top: 22%;
    text-indent: -99999px;
}
.modal-header .invention_name {
    font-size: 1.4rem;
    line-height: 1.6rem;
    margin:0 auto;
    margin-top: 2.8rem;
    font-weight: normal;
    color: #444444;
}
.modal-body{margin-top: -rem;}
.modal .container-fluid .row {
    border-top: 2px solid #3c84bc;
    margin: 1.5rem 0;
}
.row{display: flex; flex-wrap: wrap;}
#modalHere>.modal-dialog {
    width: 80%;
    max-width: 780px;
    z-index: 9999;
}
.modal .detail_label, .modal .detail_content {
    border-bottom: 1px solid #cccccc;
    padding: 0.6rem 1.2rem;
    font-size: 0.9375rem;
}
.modal .detail_label {
    background: #f4f4f4;
    color: #6f6f6f;
}



@media (max-width:1500px) {
    .con_wrapper .nav .nav-link{width: 90px; font-size: 0.88rem;}
}

@media (max-width:1200px) {
    .con_wrapper .nav .nav-link{width: 80px; font-size: 0.85rem;}
}

@media screen and (max-width:1399px) and (min-width:1061px) {
    .con_wrapper .invention-box{ width: calc(33.33% - 43px); } 
    .con_wrapper .invention-box:nth-child(4n){ margin-right: 40px; } 
    .con_wrapper .invention-box:nth-child(3n){ margin-right: 0;}
    
}


@media (max-width:1060px) {
    .con_wrapper .invention-box{ width: calc(50% - 23px); } 
    .con_wrapper .invention-box:nth-child(4n){ margin-right: 40px; } 
    .con_wrapper .invention-box:nth-child(2n) { margin-right: 0; }
    .con_wrapper .con-title{display: inline-block;}
    .con_wrapper .nav{margin-top: 20px;}
}

@media (max-width:860px){
    .con_wrapper .nav .nav-link{width: 70px; font-size: 0.8rem;}
}

@media (max-width:700px){
    .con_wrapper .invention-box{ width: 100%; margin-right:0; } 
    .con_wrapper .nav-year { width: 100%; top: 60px; left: 0; flex-wrap: nowrap;} 
    .con_wrapper .con-title { margin-bottom: 3rem; }
}

@media (max-width:650px){
    .con_wrapper .nav .nav-link{width: 60px; font-size: 0.78rem; }
    .con_wrapper .nav-link{padding: 0.6rem 0.5rem;}
    .con_wrapper .con-title .nav{text-align: center;}
}

@media (max-width:550px){
    .con_wrapper .nav .nav-link{width: 50px; font-size: 0.75rem; }
    .con_wrapper .nav-link{padding: 0.6rem 0.2rem;}
}