/* 荣誉资质 */ body { margin: 0; padding: 0; height: 100%; } .barGs:hover { /* border-bottom: #fff 3px solid; */ padding-bottom: 15px; /* border-right: none; */ } .barTop { display: flex; width: 87%; height: auto; background-color: #00a587; padding-left: 5%; padding-top: 20px; position: relative; top: -75px; margin-left: 13%; } .barTop2 { position: absolute; left: -10px; width: 100%; } .barName { width: 30%; height: 100%; line-height: 2; margin-left: 30px; } .barHeadline { font-size: 40px; font-weight: bold; color: #fff; line-height: 1.6; } .barHeadline2 { font-size: 30px; color: #fff; padding-bottom: 20px; } .barSize { width: 200px; height: 30px; position: absolute; display: flex; right: 0; margin-top: 20px; } .barSize img { width: 20px; height: 20px; } .barMap { font-size: 14px; color: #fff; } .bar { margin-top: 50px; display: flex; /* width: 600px; */ height: 30px; position: absolute; right: 0; top: 30px; } .barGs { line-height: 40px; /* display: flex; justify-content: center; text-align: center; */ margin: 0 20px; height: 40px; color: #fff; font-size: 15px; /* border-right: #e2e2e2 2px solid; */ } .body { margin: 20px auto; width: 100%; max-width: 1500px; } .bodyTop { width: 100%; font-size: 40px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #ccc; padding: 20px 0; } .bodyPicBox { width: 100%; display: flex; float: left; flex-wrap: wrap; margin: 50px 0; } .bodyBox { margin: 55px 2.5%; width: 20%; transition: all 1s; cursor: pointer; height: 200px; background: #f2f2f2; display: flex; justify-content: center; align-items: center; flex-direction: column; overflow: hidden; } .bodyBox:hover.bodyBox > img { transform: scale(1.1); } .topPic { width: 70%; height: 150px; object-fit: contain; transition: all 1s; } .bodyPic { width: 20%; margin: 25px 25px 5%; height: 70%; } .PicName { color: #999; font-size: 16px; display: flex; width: 100%; padding: 10px; align-items: center; justify-content: center; background-color: #f2f2f2; z-index: 99; } .bodyBox:hover .PicName { color: #fff; background-color: #d94444; } .bodyBox:hover .bodyPic { width: 270px; height: 220px; margin: 15px 15px 10px; } .barTop-xiao { width: 100%; background-color: #00a587; padding: 20px 30px; } .barName-Mini { color: #fff; /*font-size: 700;*/ font-size: 30px; border-bottom: #ccc 1px solid; padding-left: 30px; } .bar-Mini { display: flex; margin: 20px 0px; } .barGs-Mini { line-height: 20px; display: flex; justify-content: center; text-align: center; width: 70px; height: 20px; color: #fff; border-right: #e2e2e2 2px solid; } .barGs-sm { line-height: 20px; display: flex; justify-content: center; text-align: center; width: 90px; height: 20px; color: #fff; border-right: #e2e2e2 2px solid; } .body-Mini { width: 100%; height: 350px; cursor: pointer; } .bodyBox-Mini:hover .PicName-Mini { color: #fff; background-color: #d94444; } .bodyTop-Mini { font-size: 30px; height: 50px; display: flex; align-items: center; justify-content: center; padding: 20px; margin-top: 20px; } .bodyPicBox-Mini { width: 90%; margin: 10px 5%; display: flex; float: left; flex-wrap: wrap; margin-top: 50px; } .bodyPic-Mini { width: 100%; height: 150px; object-fit: contain; transition: 0.4s; } .bodyBox-Mini { width: 40%; margin: 10px 5%; height: 300px; } .PicName-Mini { color: #999; font-size: 16px; display: flex; width: 100%; height: 60px; align-items: center; justify-content: center; background-color: #f2f2f2; transition: 0.4s; } .borderBottom { width: 0; transition: all 0.3s; height: 3px; background-color: #fff; margin: auto; } .barGs:hover .borderBottom { width: 60px; margin: auto; } #Picture_to_view { display: none; width: 100%; height: 1000px; background-color: #000; color: #f2f2f2; position: fixed; z-index: 1000; top: 0; } #hide { position: absolute; padding: 10px 20px; align-items: center; font-size: xx-large; font-weight: 700; top: 20px; right: 20px; cursor: pointer; } .HimgBox { width: 60%; margin: 5% 20%; height: 600px; position: relative; } .HimgBox>img { position: absolute; height: 100%; width: 100%; object-fit: contain; }