

/*********** List *************/
.company_list{display: flex; flex-wrap:wrap; gap:30px; padding: 30px 0 0; border-top: 2px solid var(--black);}
.company_list .list{position: relative; width:calc((100% - 150px)/6);}
.company_list .list::before{content:''; display: block; width: 100%; height: 100%; box-sizing:border-box; border:1px solid var(--border); position: absolute; left: 0; top:0; z-index: -1;}
.company_list .list .checkbox{display: inline-block; position:absolute; left:5px; top:5px; z-index: 2;}
.company_list .list a{display: block;}
.company_list .list a dl{}
.company_list .list a dl dt{aspect-ratio:240/190; overflow: hidden; position: relative;}
.company_list .list a dl dt h4{color:var(--light); opacity: 0.8; position: absolute; left: 0; top:50%; text-align:center; width: 100%; line-height: 120%; transform:translateY(-50%); box-sizing:border-box; padding: 0 15px; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block;}
.company_list .list a dl dt img{display: block; width: 100%; height: 100%; object-fit:cover;}
.company_list .list a dl dd{text-align:center; padding: 20px 10px; box-sizing:border-box;}
.company_list .list a dl dd h4{color:var(--black);}

/* 가상 요소로 호버용 테두리 하나 더 생성 */
.company_list .list::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border: 2px solid var(--main); /* 포인트 컬러 */
    opacity: 0;
    transform: scale(1.05);
    transition: all 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.company_list .list:hover::after {
    opacity: 1;
    transform: scale(1); /* 밖에서 안으로 조여지는 효과 */
}


/* 팝업 */
.popup_bg {width:100%; height:100%; position:fixed; top:0; left:0; background:rgba(0,0,0,0.8); z-index:999999; opacity:0; visibility:hidden; transition:all 0.3s linear}
.company_popup {width:100%; height:100%; position:fixed; top:0; left:0; z-index:99999999; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; opacity: 0; visibility: hidden; pointer-events: none; transition: all .3s ease; flex-direction: column;}
.company_popup.active {opacity: 1; visibility: visible; pointer-events: auto; transition: all .3s ease;}
.company_popup .popup_in{max-width:1050px; width: 90%; border-radius:var(--borderR15); overflow: hidden; position: relative; z-index:9999991;} 
.company_popup .popup_h {padding: 30px 120px 30px 50px; background:var(--main); position: relative; box-sizing:border-box;}
.company_popup .popup_h h4{font-weight: 600; color:var(--white); line-height: 150%;}
.company_popup .popup_h .catname{display: inline-block; font-weight: 300;}
.company_popup .popup_h .close {cursor:pointer; display: block; position: absolute; right: 50px; top:50%; transform:translateY(-50%);}
.company_popup .popup_h .close::before {content:'\e5cd'; font-size:40px; line-height:1; display:block; font-family:var(--icon); color:var(--white); font-weight:300;}
.company_popup .popup_img {box-sizing:border-box; padding: 50px; overflow: hidden; background:var(--white); text-align:center;}
.company_popup .popup_img img {max-width:100% !important; height: auto !important;}
.company_popup .popup_img::after{content:''; display: block; clear: both;}

.popup_bg.active {opacity:1; visibility:visible;}

body.noScroll{overflow: hidden;}


/*******************************************************************************
    @media  1300px              
*******************************************************************************/
@media all and (max-width:1300px){


/*********** List *************/
.company_list .list{width:calc((100% - 90px)/4);}


}
/*******************************************************************************
    @media  ~980px              
*******************************************************************************/
@media all and (max-width:980px){


/*********** List *************/
.company_list{gap:20px; padding: 20px 0 0;}
.company_list .list{width:calc((100% - 40px)/3);}


/* 팝업 */
.company_popup .popup_h {padding: 20px 90px 20px 30px;}
.company_popup .popup_h .close {right: 30px;}
.company_popup .popup_img {padding: 30px;}


}
/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){


/*********** List *************/
.company_list{gap:10px; padding: 10px 0 0;}
.company_list .list{width:calc((100% - 10px)/2);}


/* 팝업 */
.company_popup .popup_in{border-radius:var(--borderR10);} 
.company_popup .popup_h {padding: 15px 50px 15px 20px;}
.company_popup .popup_h .close {right: 15px;}
.company_popup .popup_h .close::before {font-size:24px;}
.company_popup .popup_img {padding: 20px;}
.company_popup .popup_h h4{line-height: 145%; font-size:1.111rem;}

}