/* 发展历程 */ html, body { width: 100%; margin: 0; padding: 0; } .topPic { width: 100%; } .barGs:hover { /* border-bottom: #fff 3px solid; */ padding-bottom: 15px; /* border-right: none; */ } .bodyBox, .bodyBox2 { cursor: pointer; } .barTop { display: flex; width: 90%; height: auto; background-color: #00a587; padding-left: 5%; padding-top: 20px; position: relative; top: -75px; margin-left: 10%; } .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; } @media (max-width: 767px) { .bodyBox, .bodyBox2 { width: 80% !important; margin: 10px auto !important; padding: 10px 0 !important; display: flex !important; } } .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% !important; } .bodyTop { font-size: 40px; display: flex; align-items: center; justify-content: center; padding: 20px 0px; } .bodyTop-subtitle { width: 100%; line-height: 2; font-size: 16px; color: #333; flex-wrap: wrap; padding: 20px 50px; margin: 0 auto; text-align: center; } .bodyBox { width: 70%; margin: 10px auto; padding: 10px 0; display: flex; } .bodyBox2 { width: 70%; padding: 10px 0; margin: 0 auto; display: -webkit-box; background-color: #edeaea; } .bodyBox:hover { box-shadow: 0px 10px 5px #ccc; } .bodyBox2:hover { box-shadow: 0px 10px 5px #ccc; } .bodyBox-year { width: 50%; } .year { font-size: 25px; float: right; margin-right: 20px; } .certer-line { width: 20%; padding-top: 20px; } .yuan { width: 20px; height: 20px; border-radius: 50%; border: #00a587 5px solid; margin: 5px auto; } .xian { width: 2px; height: 100px; background-color: #ccc; margin-left: 9px; margin-top: 10px; } .bodyThing { width: 40%; margin-left: 20px; } .thing1 { color: #00a587; font-size: 20px; display: flex; flex-wrap: wrap; } .thing2 { color: #333; font-size: 16px; font-weight: 300; display: flex; flex-wrap: wrap; } .bodyThing-2 { width: 50%; } .thing3 { color: #00a587; font-size: 20px; width: 97%; text-align: right; } .thing4 { width: 97%; color: #333; font-size: 16px; font-weight: 300; text-align: right; } .bodyBox-year-2 { width: 40%; } .year2 { font-size: 24px; float: left; margin-left: 20px; } .barTop-xiao { width: 100%; background-color: #00a587; box-sizing: border-box; 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%; } .bodyTop-Mini { font-size: 30px; height: 50px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; margin-top: 20px; } .bodyTop-subtitle-Mini { width: 95%; margin: 10px 2.5%; line-height: 1.3; font-size: 14px; color: #333; flex-wrap: wrap; margin: 0 auto; text-align: center; } .bodyBox-year-Mini { width: 30%; } .bodyThing-Mini { width: 60%; margin-left: 20px; } #box { width: 100%; } .borderBottom { width: 0; transition: all 0.3s; height: 3px; background-color: #fff; margin: auto; } .barGs:hover .borderBottom { width: 60px; margin: auto; }