#crumb { background: #f8f9fa; } .con .nav_tit { font-weight: 600; text-align: center; color: #2b2b2b; line-height: 1; } .con .nav_tit::after { content: ""; display: block; width: 60px; height: 2px; margin: auto; margin-top: 18px; background: #d0121b; } .con .nav_mes { font-weight: 400; text-align: center; color: #2b2b2b; margin-top: 20px; } .con .page1 { background: #f8f9fa; padding: 30px 0 40px 0; } .con .page1 .main { display: flex; margin-top: 40px } .con .page1 .main .list { flex: 0 0 calc((100% - 80px) / 3); margin-right: 40px; background-color: #fff; } .con .page1 .main .list .image { width: 100%; padding-top: 42%; height: 0; overflow: hidden; position: relative; } .con .page1 .main .list .image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .con .page1 .main .list .info { width: 74%; margin: auto; margin-top: -40px; position: relative; z-index: 2; background: rgba(255, 255, 255, 0.9); padding: 16px 30px 28px 30px; } .con .page1 .main .list .info .tit { font-weight: 400; text-align: left; color: #dd0006; line-height: 1; } .con .page1 .main .list .info .subTit { font-weight: 400; text-align: left; color: #666666; margin-top: 20px; } .con .page1 .main .list .info .mes { margin-top: 34px; font-size: 14px; font-weight: 400; text-align: left; color: #dd0006; padding-bottom: 10px; border-bottom: 1px solid #dd0006; } .con .page1 .main .list:nth-child(3n) { margin-right: 0; } .con .page2 { background: #fff; padding: 40px 0; } .con .page2 .main { display: flex; } .con .page2 .main .main_l { flex: 0 0 410px; } .con .page2 .main .main_l .image { max-width: 295px; margin-top: 40px; } .con .page2 .main .main_l .image img { width: 100%; } .con .page2 .main .main_l .tit { font-weight: 600; text-align: left; color: #d0111b; letter-spacing: 0.9px; margin-top: 40px; } .con .page2 .main .main_l .mes { margin-top: 20px; font-weight: 400; text-align: left; color: #666666; line-height: 2; letter-spacing: 1.35px; } .con .page2 .main .main_r { flex: 1; position: relative; } .con .page2 .main .main_r img { width: 100%; } .con .page2 .main .main_r img:not(:first-child) { position: absolute; top: 0; left: 0; width: 100%; z-index: 2; } .con .page3 { width: 100%; padding: 40px 0; background: url(/static/cn/img/corporateCulture_page3_bg.jpg) no-repeat; background-size: cover; } .con .page3 .tit { font-weight: 600; text-align: left; color: #d0111b; letter-spacing: 0.9px; } .con .page3 .subTit { margin-top: 16px; font-weight: 400; text-align: left; color: #666666; letter-spacing: 1.35px; } .con .page3 .main { display: flex; justify-content: space-between; } .con .page3 .main .main_l { flex: 0 0 38.19%; position: relative; } .con .page3 .main .main_l img { width: 100%; } .con .page3 .main .main_l img:not(:first-child) { position: absolute; width: 100%; top: 0; left: 0; } .con .page3 .main .main_r { flex: 1; margin-left: 6.9%; position: relative; text-align: right; } .con .page3 .main .main_r img { width: 100%; } .con .page3 .main .main_r img:not(:first-child) { position: absolute; width: 100%; top: 0; left: 0; } @media only screen and (max-width: 1440px) { .con .page2 .main .main_l .image { max-width: 200px; } } @media only screen and (max-width: 768px) { .con .page1 { padding: 20px 0 20px; } .con .nav_tit::after { margin-top: 10px; } .con .page2{ padding: 40px 0; } .con .page1 .main { margin-top: 20px; flex-wrap: wrap; } .con .page1 .main .list .info { width: 90%; padding: 20px; margin-top: -20px; } .con .page1 .main .list .info .mes { margin-top: 20px; } .con .page1 .main .list { flex: 0 0 100%; margin-right: 0; margin-bottom: 20px; } .con .page2 .main .main_l { flex: 0 0 100%; } .con .page2 .main .main_l .image { max-width: 160px; margin-top: 0; } .con .page3 { padding: 40px 0; } .con .page3 .subTit { margin-top: 10px; } .con .page3 .main { flex-wrap: wrap; } .con .page3 .main .main_r, .con .page3 .main .main_l { flex: 0 0 100%; } .con .page3 .main .main_r { margin: 20px 0 0 0; } }