body { background-color: #f8f9fc; } .banner { height: 26.25rem; background: url(https://xiaoyidushu.oss-cn-zhangjiakou.aliyuncs.com/huiwen/hardWare/banner-2.png) repeat center; background-size: 100% 26.25rem; text-align: center; line-height: 26.25rem; font-size: 50px; color: #fff; font-weight: 600; } .branch-title-box { position: relative; height: 11.6875rem; padding-top: 4.625rem; background-color: #fff; } .branch-title-number { position: absolute; top: 2.5rem; left: 17.5rem; width: 9.25rem; height: 5.25rem; } .branch-title { font-size: 2.222222rem; font-weight: 600; color: #333; margin-bottom: 1.875rem; } .branch-explain { display: inline-block; width: 52.666667rem; font-size: 1.111111rem; font-weight: 400; } .branch-main { display: flex; justify-content: center; width: 66.666667rem; padding: 3.75rem 0 0 0; background-color: #f8f9fc; display: flex; flex-wrap: wrap; margin: 0 auto; } .machine-item { display: flex; width: 32.222222rem; height: 15rem; background-color: #fff; margin-bottom: 1.875rem; text-align: left; } .branch-main .machine-item:nth-child(2n + 1) { margin-right: 2.222222rem; } .machine-item-img { width: 15.555556rem; height: 15rem; } .machine-item-img img { width: 100%; height: 100%; } .machine-item-content div:nth-child(1) { margin: 2.0625rem 0 1.875rem 0; font-size: 1.111111rem; font-weight: 600; color: #333; } .machine-item-content div:nth-child(n + 2) { margin-bottom: 0.625rem; font-size: 0.777778rem; color: #888; } .advantage { display: flex; flex-wrap: wrap; justify-content: space-between; width: 66.666667rem; margin-right: 0 !important; } .advantage-bottom { height: 20.25rem !important; } .advantage-item { display: flex; flex-direction: column; align-items: center; width: 18.888889rem; height: 11.888889rem; margin-top: 3.333333rem; text-align: center; } .advantage-item:nth-child(3n + 3) { margin-right: 0 !important; } .advantage-item img { width: 4.444444rem; height: 5.166667rem; margin-bottom: 1.875rem; } .advantage-item-title { display: inline-block; font-size: 20px; color: #333; margin-bottom: 1.4375rem; } .advantage-item-content { color: #888; font-size: 14px; } .population { width: 66.666667rem; height: 15rem; box-sizing: border-box; background-color: #fff; line-height: 16.875rem; margin: 0 auto; margin-top: 6.25rem; padding: 0 3.333333rem; box-shadow: 0 2px 30px 0 rgba(104, 104, 104, 0.07); margin-bottom: 3.8125rem; } .exhibition { display: inline-block; height: 100%; line-height: 15rem; font-size: 20px; color: #333; } .zhanshi { float: right; width: 38.5rem; height: 9.333333rem; margin-top: 2.833333rem; } .category-top { width: 66.666667rem; margin: 0 auto; } .category { width: 75rem; } .category-title { color: #333; font-size: 1.875rem; margin-bottom: 1.75rem; background-color: #f8f9fc; } .category-box { display: flex; justify-content: space-between; width: 66.666667rem; } .category-item { display: flex; flex-direction: column; text-align: left; width: 21.111111rem; height: 29.444444rem; background-color: #fff; } .category-title { font-size: 1.666667rem; margin-top: 3.75rem; } .category-item img { width: 100%; height: 16.111111rem; } .category-item span { font-size: 1.111111rem; font-weight: 600; color: rgba(51, 51, 51, 1); margin-left: 1.875rem; } .category-item p { margin-top: 2.222222rem; font-size: 0.777778rem; font-weight: 400; color: rgba(136, 136, 136, 1); line-height: 1.666667rem; margin-left: 1.875rem; } .shebei { display: flex; width: 66.666667rem; height: 15rem; background-color: #fff; } .shebei img { width: 15.555556rem; height: 15rem; } .shebei-introduce { display: flex; flex-direction: column; } .shebei-introduce h3 { font-size: 20px; font-weight: 600; color: rgba(51, 51, 51, 1); margin-top: 2.0625rem; margin-bottom: 1.875rem; } .shebei-introduce div { width: 47.777778rem; height: 8.333333rem; font-size: 0.777778rem; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: rgba(136, 136, 136, 1); line-height: 1.666667rem; } .advantage-item-fenlei2 { margin-left: 0 !important; } .advantage-width { width: 66.666667rem; } .shebei-top { margin-top: 3.6875rem !important; } .content { width: 15.555556rem; } @media screen and (max-width: 750px) { html { font-size: 0.5rem; } #pc { display: none; } #mobile { display: block; } .banner { height: 13.9375rem; line-height: 13.9375rem; font-size: 3.125rem; } .branch-explain { width: 90vw; font-size: 1.5rem; color: #888; } .branch-main { width: 100vw; } .machine-item { width: 90vw; height: auto; } .branch-main .machine-item:nth-child(2n + 1) { margin-right: 0; } .machine-item-content { text-align: left; } .category-top { width: 100vw; } .advantage { justify-content: space-around; height: auto; } .advantage-item { width: 43vw; height: 18rem; margin: 0; } .population { width: 100vw; height: 20rem; text-align: center; padding: 0; box-sizing: border-box; line-height: 0.001rem; } .population h1 { height: 6rem; line-height: 6rem; } .zhanshi { float: none; width: 90vw; margin-left: 0; margin-top: 0; } .branch-title-box { height: 16.6875rem; } .category { width: 100vw; } .category-box { display: block; width: 100%; } .category-item { width: 27.75rem; height: 13.25rem; flex-direction: row; margin-bottom: 1.875rem; } .category-item img { width: 40%; height: 12.125rem; } .category-item p { margin-top: 1rem; line-height: normal; font-size: 0.875rem; } .shebei { width: 90vw; height: 12.125rem; margin-bottom: 2.5rem; } .shebei img { width: 40%; height: auto; } .shebei-introduce { margin: 0; } .shebei-introduce h3 { font-size: 1.25rem; margin-top: 1rem; margin-bottom: 1rem; } .shebei-introduce div { line-height: normal; font-size: 0.875rem; } .advantage-bottom { height: auto !important; } .advantage-item { height: 19rem; margin-bottom: 1.875rem; } .advantage { width: 100vw; } .shebei-introduce { width: 56%; box-sizing: border-box; } .shebei-introduce div { width: 105%; } }