@charset "utf-8";

.equipUl { display: flex; flex-wrap: wrap; margin: -12px; }
.equipUl .equipLi { position: relative; padding: 12px; width: 25%; }
.equipUl .equipLi .equipA { display: block; height: 100%; border: 1px solid #d1d1d1; overflow: hidden; }

.equipUl .equipLi .s-check { z-index: 10; position: absolute; top: 17px; right: 17px; font-size: 13px; color: #333; }

.equipUl .equipLi .equipA .top { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; padding: 14px 10px; background-color: #18315f; }
.equipUl .equipLi .equipA .top .top_t1 { width: 100%; font-weight: 600; font-size: 18px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.equipUl .equipLi .equipA .top .top_t2 { min-width: max-content; margin-left: 10px; font-weight: 600; font-size: 16px; color: #fdb913; }
.equipUl .equipLi .equipA .top .top_t2 * { font-weight: inherit; font-size: inherit; color: inherit; }
.equipUl .equipLi .equipA .top .top_t2 p { display: flex; flex-wrap: nowrap; align-items: center; }
.equipUl .equipLi .equipA .top .top_t2 p span { display: inline-block; margin-right: 5px; width: 7px; height: 7px; background-color: #fdb913; border-radius: 50%; }
.equipUl .equipLi .equipA .top .top_t2 p.type2 { color: #ee2c2a; }
.equipUl .equipLi .equipA .top .top_t2 p.type2 span { background-color: #ee2c2a; }

.equipUl .equipLi .equipA .mid .imgbox { position: relative; aspect-ratio: 1/0.84; overflow: hidden; }
.equipUl .equipLi .equipA .mid .imgbox img { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: auto; height: auto; min-width: 100%; min-height: 100%; max-width: 120%; }
.equipUl .equipLi .equipA .mid .imgbox .frame { z-index: 3; display: flex; align-items: center; justify-content: center; text-align: center; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); opacity: 0; transition: opacity 0.3s; }
.equipUl .equipLi .equipA:hover .mid .imgbox .frame { opacity: 1; }
.equipUl .equipLi .equipA .mid .imgbox .frame p { font-weight: 500; font-size: 20px; color: #fff; text-decoration: underline; }

.equipUl .equipLi .equipA .bottom { display: flex; flex-wrap: nowrap; justify-content: space-between; padding: 15px; font-size: 15px; color: #666; line-height: 1.65; }
.equipUl .equipLi .equipA .bottom * { font-size: inherit; color: inherit; line-height: inherit; }
.equipUl .equipLi .equipA .bottom .left { width: 48%; }
.equipUl .equipLi .equipA .bottom .right { width: 48%; }
.equipUl .equipLi .equipA .bottom dl { display: flex; flex-wrap: nowrap; align-items: center; }
.equipUl .equipLi .equipA .bottom dl, .equipUl .equipLi .equipA .bottom dl * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.equipUl .equipLi .equipA .bottom dl dt { margin-right: 5px; min-width: max-content; }
.equipUl .equipLi .equipA .bottom dl dd { font-weight: 500; color: #17305e; }
.equipUl .equipLi .equipA .bottom .right dl { justify-content: right; text-align: right; }

/* eng_ver */
/* .equipUl .equipLi .equipA.eng_ver .top { display: block; width: 100%; }
.equipUl .equipLi .equipA.eng_ver .top .top_t2 { min-width: initial; margin-left: 0; margin-top: 5px; width: 100%; line-height: 1.25; } */


@media (max-width: 1535px) {
    .equipUl { margin: -10px; }
    .equipUl .equipLi { padding: 10px; }

    .equipUl .equipLi .equipA .top { padding: 13px 9px; }
    .equipUl .equipLi .equipA .top .top_t2 p span { margin-right: 4px; width: 6px; height: 6px; }
    
    .equipUl .equipLi .equipA .bottom { padding: 13px; }
}
@media (max-width: 1279px) {
    .equipUl { margin: -9px; }
    .equipUl .equipLi { padding: 9px; }

    .equipUl .equipLi .equipA .top { padding: 12px 8px; }
    .equipUl .equipLi .equipA .top .top_t2 p span { margin-right: 3px; width: 5px; height: 5px; }
    
    .equipUl .equipLi .equipA .bottom { padding: 12px; }
}
@media (max-width: 1023px) {
    .equipUl .equipLi { width: 33.3333%; }

    .equipUl .equipLi .equipA .top { padding: 11px 7px; }
    .equipUl .equipLi .equipA .top .top_t2 p span { width: 4px; height: 4px; }
    
    .equipUl .equipLi .equipA .bottom { display: block; padding: 11px; }
    .equipUl .equipLi .equipA .bottom .left { width: 100%; }
    .equipUl .equipLi .equipA .bottom .right { width: 100%; }
    .equipUl .equipLi .equipA .bottom .right dl { justify-content: initial; text-align: left; }
}
@media (max-width: 767px) {
    .equipUl { margin: initial; justify-content: space-between; }
    .equipUl .equipLi { width: 48%; padding: initial; }
    .equipUl .equipLi:nth-of-type(n + 3) { margin-top: 4%; }
}
@media (max-width: 560px) {
    .equipUl { display: block; }
    .equipUl .equipLi { width: 100%; }
    .equipUl .equipLi:nth-of-type(n + 3) { margin-top: initial; }
    .equipUl .equipLi:nth-of-type(n + 2) { margin-top: 25px; }
}