.main .about { padding: 120px 0; background: #fff; } .main .about .title { font-size: 34px; text-align: center; margin-bottom: 32px; } .main .about .description { font-size: 16px; color: #505050; text-align: center; line-height: 32px; } .main .about .content { display: flex; justify-content: space-between; margin-top: 80px; } .main .about .content .item { display: flex; flex-direction: column; align-items: center; width: 380px; height: 387px; box-sizing: border-box; border: 1px solid #e8e8e8; padding: 40px 30px; } .main .about .content .item img { display: block; width: 72px; height: 72px; margin-top: 20px; } .main .about .content .item .tip { font-size: 18px; color: #505050; font-weight: bold; margin-top: 32px; } .main .about .content .item .desc { margin-top: 32px; font-size: 16px; color: #505050; line-height: 32px; text-align: center; } .main .profile { background: #f7f7f7; padding: 60px 0; } .main .profile .cover { width: 470px; height: 479px; overflow: hidden; background-color: pink; } .main .profile .cover img { display: block; width: 100%; } .main .profile .content { width: 672px; margin-left: 50px; } .main .profile .content .title { font-size: 34px; } .main .profile .content .subtitle { font-size: 34px; color: #0688d2; margin: 40px 0 16px; } .main .profile .content .subtitle span { font-size: 24px; color: #272727; margin-left: 12px; } .main .profile .content .tags { display: flex; align-items: center; font-size: 0; } .main .profile .content .tags span { font-size: 16px; } .main .profile .content .tags i { display: block; height: 12px; width: 1px; background: #505050; margin: 0 24px; } .main .profile .content .line { width: 100%; height: 1px; background: #e8e8e8; position: relative; margin: 20px 0 40px; } .main .profile .content .line::before { content: ""; display: block; width: 24px; height: 2px; background: #0688d2; position: absolute; left: 0; bottom: 0; } .main .profile .content .description { font-size: 16px; color: #999; line-height: 32px; text-align: justify; } .main .team { padding: 120px 0; background: #fff; } .main .team .title { font-size: 34px; text-align: center; } .main .team .content { margin-top: 80px; } .main .team .content .item { width: 388px; height: 340px; float: left; margin-right: 17px; margin-top: 18px; overflow: hidden; } .main .team .content .item:first-child { position: relative; background: #eff9ff; display: flex; justify-content: center; align-items: center; } .main .team .content .item:first-child .cover { width: 160px; } .main .team .content .item:first-child .cover .line { width: 18px; height: 3px; background: #0688d2; margin: 18px 0 24px; } .main .team .content .item:first-child .cover .tip { font-size: 34px; } .main .team .content .item:first-child .cover .desc { font-size: 16px; color: #999; } .main .team .content .item:nth-child(-n+3) { margin-top: 0; } .main .team .content .item:nth-child(3), .main .team .content .item:nth-child(5), .main .team .content .item:nth-child(8), .main .team .content .item:nth-child(10) { margin-right: 0; } .main .team .content .item:nth-child(5), .main .team .content .item:nth-child(9) { width: 795px; } .main .team .content .item img { display: block; width: 100%; transition: all 0.4s; } .main .team .content .item:hover img { transform: scale(1.2); } .main .development { padding: 100px 0; background: #f7f7f7; } .main .development .title { font-size: 34px; text-align: center; } .main .development .content { position: relative; margin-top: 80px; width: 2px; margin: 0 auto; background: #e8e8e8; } .main .development .content .item { position: relative; width: 2px; margin-top: 60px; } .main .development .content .item::before { content: ""; position: absolute; width: 10px; height: 10px; box-sizing: border-box; border: 1px solid #999999; background: #fff; border-radius: 50%; left: -4px; z-index: 5; top: 32px; } .main .development .content .item:last-child::before { background: #0688d2; border-color: #fff; } .main .development .content .item:last-child .time { border: 1px solid #0688d2; border-left: 0; color: #0688d2; } .main .development .content .item:last-child .node { background: #0688d2; } .main .development .content .item:last-child .node dt, .main .development .content .item:last-child .node .tip, .main .development .content .item:last-child .node .subtip { color: #ffffff; } .main .development .content .item.with-time-left .time { position: absolute; left: -16px; top: 0; transform: translateX(-100%); } .main .development .content .item.with-time-left .node { padding-left: 44px; margin-left: -16px; } .main .development .content .item.with-time-right .time { position: absolute; top: 0; left: 16px; } .main .development .content .item.with-time-right .node { position: relative; transform: translate(-100%); text-align: right; padding-right: 44px; right: -16px; } .main .development .content .item .time { font-size: 34px; color: #505050; white-space: nowrap; padding: 20px 24px; height: 100%; box-sizing: border-box; } .main .development .content .item .time span { font-size: 14px; margin-left: 10px; } .main .development .content .item .node { width: 526px; margin: 0; box-sizing: border-box; padding: 20px 24px; } .main .development .content .item .node dd, .main .development .content .item .node dt { margin-left: 0; } .main .development .content .item .node dt { font-size: 34px; color: #505050; } .main .development .content .item .node dd { font-size: 14px; color: #505050; margin-top: 24px; } .main .development .content .item .node dd .tip { margin-bottom: 8px; } .main .honor { padding: 120px 0; padding-bottom: 0; background: #fff; } .main .honor .title { font-size: 32px; text-align: center; } .main .honor .content { margin-top: 80px; } .main .honor .content .item { width: 288px; height: 330px; float: left; margin-right: 15px; } .main .honor .content .item:nth-child(4n) { margin-right: 0; }