.leaderBox{ border-bottom: 2px solid #e5e5e5; padding: 15px 0; } .leaderBox.b1,.leaderBox.b2{ display: grid; grid-template-columns: 1fr 1fr; row-gap: 18px; } .leaderBox .item_title{ width: 138px; line-height: 26px; background-color: #254fa1; text-align: center; color: #ffffff; font-size: 15px; font-family: sans-serif; } .leaderBox .leader-classify{ display: flex; align-items: flex-start; } .leaderBox .leader-classify .item-con{ width: calc(100% - 138px); display: grid; grid-template-columns: repeat(2,1fr); row-gap: 20px; } .leaderBox.b3 .leader-classify .item-con{ grid-template-columns: repeat(5,1fr); } .leaderBox .leader-classify .news{ height: 26px; font-size: 15px; font-family: sans-serif; text-align: center; margin-top:7px; } .leaderBox .leader-classify .news_title a{ display:block; width:50px; text-align:justify; margin:0 auto; } .leaderBox .leader-classify .news_title a:after{content:'';width: 100%;display: inline-block;overflow: hidden;height: 0;line-height:0;} @media screen and (max-width: 767px){ .leaderBox.b1,.leaderBox.b2{ grid-template-columns: 1fr; } .leaderBox .leader-classify .item-con, .leaderBox.b3 .leader-classify .item-con{ grid-template-columns: repeat(4,1fr); } } @media screen and (max-width: 479px){ .leaderBox .leader-classify .item-con, .leaderBox.b3 .leader-classify .item-con{ grid-template-columns: repeat(3,1fr); } .leaderBox .leader-classify{ flex-direction: column; align-items: flex-start; } .leaderBox .leader-classify .item-con{ width: 100%; margin-top: 15px; } }