.bkt { height: auto; overflow: hidden; margin-top: 80px; } .bkt span { display: block; float: left; margin-right: 15px; color: #555; } .bkt span:nth-child(1) { font-size: 3rem; font-family: en; font-family: Arial, Helvetica, sans-serif; line-height: 70px; font-weight: 800; color: #002553; } .bkt span:nth-child(2) { font-size: 1.5rem; line-height: 80px; font-weight: bold; } .hbox { height: auto; overflow: hidden; margin: 30px 0 80px 0; } .hp { width: 25%; height: 500px; float: left; } .hp a { display: block; margin: 20px; height: calc(100% - 40px); background: #fff; overflow: hidden; } .hp a img { display: block; width: calc(100% - 100px); height: 300px; margin: 50px auto 40px auto; object-fit: contain; } .hp a span { display: block; text-align: center; font-size: 1.1rem; } .hp a:hover { -moz-box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); -webkit-box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); } @media screen and (max-width: 1680px) { .bkt { margin-top: 60px; } .bkt span:nth-child(1) { font-size: 2.5rem; } .bkt span:nth-child(2) { font-size: 1.2rem; } .hbox { margin: 20px 0 60px 0; } .hp { height: 460px; } .hp a img { width: calc(100% - 80px); height: 280px; margin: 40px auto 30px auto; } } @media screen and (max-width: 1440px) { .hp { height: 400px; } .hp a { margin: 15px; height: calc(100% - 30px); } .hp a img { width: calc(100% - 60px); height: 260px; margin: 30px auto 20px auto; } .hp a:hover { -moz-box-shadow: 0 0 15px rgba(0, 0, 0, 0.15); -webkit-box-shadow: 0 0 15px rgba(0, 0, 0, 0.15); box-shadow: 0 0 15px rgba(0, 0, 0, 0.15); } } @media screen and (max-width: 1280px) { .hp { height: 360px; } .hp a img { height: 240px; } }