@charset "utf-8";


#mainDeptList { width:100%; height:330px; position:relative; margin:0 auto; z-index:1; }
#mainDeptList .swiper-slide { width:100%; height:100%; display:flex; flex-wrap:wrap; justify-content:space-between; align-content: space-between; }
.mainDeptItem { text-align:center; width:calc(100% / 6 - clamp(5px,1.5vw,25px)); height:calc(100% / 2 - 15px); background-color:var(--bgDeptListItem); }
.mainDeptItem > a { width:100%; height:100%; display:flex; flex-direction:column; justify-content: center; border:5px solid transparent; }
.mainDeptItem > a:hover,
.mainDeptItem > a:focus { border:5px solid #0063dd; }

.mainDeptItem > a > .mdiIcon { height:57px; background-repeat:no-repeat; background-position:center center; }
.mainDeptItem > a > .mdiName { font-size:clamp(17px,1.042vw,20px); font-weight:600; color:var(--fontColor000); padding:2px 0; } /* font-size:clamp(16px,1.5vw,20px); */
.mainDeptItem > a > .mdiName.longStr > span { font-size:0.9em; }
.mainDeptItem > a > .mdiText { font-size:14px; font-weight:600; color:var(--fontColor707070); padding:5px 0 0; }

.mainDeptItem.emptyData { background-color:transparent; visibility:hidden; }


.mainDeptBtn { 
    margin:0; padding:0; width:50px; height:50px; line-height:50px; text-align:center; color:#fff; border:0; background:#2f496a; 
    position:absolute; top:50%; transform: translateY(-50%); z-index:15; font-size:20px; /* transition:all .2s ease-out; */
}
.mainDeptBtn:hover { background:#0064dd; }
.mainDeptLeft { left:-6%;}
.mainDeptRight { right:-6%; }



@media (max-width: 1440px) {
    .mainDeptLeft { left:-5%; }
    .mainDeptRight { right:-5%; }
}





@media (max-width: 767px) {         /* @media (max-width: var(--mobile))  */
    #mainDeptList { height:690px; }
    .mainDeptItem { width:calc(100% / 3 - clamp(5px,1.5vw,25px)); height:calc(100% / 4 - 15px); }
    .mainDeptLeft { left:-15px; }
    .mainDeptRight { right:-15px; }
}

@media (min-width: 768px) and (max-width: 1023px) {     /* @media (min-width: var(--mobile)) and (max-width: var(--tablet))  */
    #mainDeptList { height:510px; }
    .mainDeptItem { width:calc(100% / 4 - clamp(5px,1.5vw,25px)); height:calc(100% / 3 - 15px); }
    .mainDeptLeft { left:-15px; }
    .mainDeptRight { right:-15px; }
}

@media (min-width: 1024px) {        /* @media (min-width: var(--desktop))  */
}