div.join_list > article.bits + article.bits {margin-top: 100px;}
div.join_list > article.bits > p.dot { color: #222; font-size: 1.71rem; font-weight: 500; line-height: 130%; }
div.join_list > article.bits > div.company_list {margin-bottom: 24px;}
div.join_list > article.bits > div.company_list > ul { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 20px; }
div.join_list > article.bits > div.company_list > ul > li { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: calc((100% - 100px) / 6); aspect-ratio: 1 / 1; border-radius: 10px; border: 1px solid #D9D9D9; background: #FFF; box-sizing: border-box; }
div.join_list > article.bits > div.company_list > ul > li > span { color: #222; font-size: 1.125rem; font-weight: 600; line-height: 100%; letter-spacing: 0.5px; text-align: center; }
div.join_list > article.bits > div.company_list > ul > li > div.hover_box { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 8px; padding: 39px 50px; width: 100%; height: 100%; border-radius: 8px; background: rgba(0, 0, 0, 0.80); opacity: 0; transition: all 0.3s ease; box-sizing: border-box; }
div.join_list > article.bits > div.company_list > ul > li > img {width: 50%;}
div.join_list > article.bits > div.company_list > ul > li > div.hover_box:hover { opacity: 1; transition: all 0.3s ease; }
div.join_list > article.bits > div.company_list > ul > li > div.hover_box > div.txt-box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
div.join_list > article.bits > div.company_list > ul > li > div.hover_box > div.txt-box > strong { color: #FFF; text-align: center; font-size: 1rem; font-weight: 600; line-height: 100%; letter-spacing: 0.5px; }
div.join_list > article.bits > div.company_list > ul > li > div.hover_box > div.txt-box > p { color: #D8D8D8; text-align: center; font-size: 1rem; font-weight: 400; line-height: 100%; letter-spacing: 0.5px; }
div.join_list > article.bits > div.company_list > ul > li > div.hover_box > a { display: flex; height: 40px; padding: 8px 20px; justify-content: center; align-items: center; gap: 10px; align-self: stretch; border-radius: 8px; background: #FFF; box-sizing: border-box; }


div.join_list > article.bits > div.company_list.participation > ul {gap: 20px 10px;}
div.join_list > article.bits > div.company_list.participation > ul > li {  width: calc((100% - 380px) / 5); gap: 20px; padding: 30px; }
div.join_list > article.bits > div.company_list.participation > ul > li > span { font-size: 1.29rem; }
div.join_list > article.bits > div.company_list.participation > ul > li > div.hover_box {padding: 30px;}


@media (max-width:1400px) {
    div.join_list > article.bits > div.company_list.participation > ul > li {  width: calc((100% - 298px) / 4); gap: 20px; padding: 30px; }
    
}


@media (max-width:1250px) {
    div.join_list > article.bits > div.company_list > ul { gap: 25px 35px; }
    div.join_list > article.bits > div.company_list > ul > li {  width: calc((50% - 22px)); }
}

@media (max-width:991px) {
    div.join_list > article.bits > div.company_list > ul { gap: 25px 35px; }
    div.join_list > article.bits > div.company_list > ul > li {  width: calc(100%); }
    div.join_list > article.bits > div.company_list.participation > ul > li {  width: calc(50% - 70px); gap: 20px; padding: 30px; }

}

@media (max-width:768px) {

}

@media (max-width:480px) {
    
}