#top1 { position: relative; width: 100%; height: 23.333333rem; background-color: #828282; background: url(https://xiaoyidushu.oss-cn-zhangjiakou.aliyuncs.com/huiwen/zhaoshang/banner.png); } #top1 h2 { position: absolute; left: 20rem; top: 8.611111rem; font-size: 2.777778rem; color: #333; font-weight: 600; } #top1 h4 { position: absolute; left: 20rem; top: 13.055556rem; font-size: 1.111111rem; color: #333; font-weight: 400; } .about { height: 26.9375rem; background-color: #fff; box-sizing: border-box; padding-top: 3.555556rem; } .about h2 { font-size: 2.222222rem; font-weight: 600; color: #333; margin-bottom: 2.888889rem; } .about-container { display: flex; justify-content: space-between; width: 66.666667rem; } .about-item { width: 10.555556rem; } .about-item .about-item-title { color: #080808; font-size: 1.5rem; margin-top: 1.25rem; margin-bottom: 0.625rem; } .about-item .about-item-heng { width: 1.25rem; height: 0.125rem; background: #fbbc0e; margin-bottom: 0.625rem; } .about-item-content { color: #080808; font-size: 0.875rem; } .cooperation-process { height: 31.666667rem; box-sizing: border-box; background: #f8f9fc; padding-top: 3.75rem; } .cooperation-process h2 { font-size: 2.222222rem; font-weight: 600; color: #333; margin-bottom: 3.6875rem; } .cooperation-container { display: flex; justify-content: space-between; width: 66.666667rem; } .cooperation-item { position: relative; width: 12.5rem; height: 16.666667rem; background-color: #fff; border-radius: 0.625rem; box-shadow: 0 0.0625rem 1.25rem 0 rgba(89, 103, 103, 0.2); } .number { position: absolute; top: 1.875rem; left: -1.25rem; width: 6.25rem; height: 3.875rem; background: url(https://xiaoyidushu.oss-cn-zhangjiakou.aliyuncs.com/huiwen/zhaoshang/tag.png) no-repeat; color: #080808; font-size: 1.5rem; text-align: center; line-height: 3.175rem; } .cooperation-item-title { position: absolute; top: 6.875rem; left: 50%; transform: translateX(-50%); font-size: 1.5rem; color: #080808; } .cooperation-item-content { position: absolute; top: 10.8125rem; margin: 0 1.4375rem; color: #080808; font-size: 0.875rem; } .contact { height: 39.375rem; background-color: #fff; box-sizing: border-box; padding-top: 5rem; } .contact h2 { font-size: 2.222222rem; font-weight: 600; color: #333; margin-bottom: 3.277778rem; } .contact-container { display: flex; justify-content: space-between; width: 66.666667rem; } .contact-item { width: 15rem; height: 20rem; line-height: 35rem; text-align: center; background-size: contain !important; font-size: 1.333333rem; font-weight: 500; color: #fff; margin-right: 2.222222rem; } .contact-item:nth-child(1) { background: url(https://xiaoyidushu.oss-cn-zhangjiakou.aliyuncs.com/huiwen/zhaoshang/qudao.png) no-repeat; } .contact-item:nth-child(2) { background: url(https://xiaoyidushu.oss-cn-zhangjiakou.aliyuncs.com/huiwen/zhaoshang/gongying.png) no-repeat; } .contact-item:nth-child(3) { background: url(https://xiaoyidushu.oss-cn-zhangjiakou.aliyuncs.com/huiwen/zhaoshang/fuwu.png) no-repeat; } .contact-item:nth-child(4) { background: url(https://xiaoyidushu.oss-cn-zhangjiakou.aliyuncs.com/huiwen/zhaoshang/chuangye.png) no-repeat; } @media screen and (max-width: 750px) { html { font-size: 0.5rem; } #pc { display: none; } #mobile { display: block; } #top1 { height: 14.7rem; background: url(https://xiaoyidushu.oss-cn-zhangjiakou.aliyuncs.com/huiwen/zhaoshang/banner2x.png) no-repeat; background-size: contain; } #top1 h2 { top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 28px; } .about { height: auto; padding-bottom: 1rem; } .about-container { display: block; width: 100vw; } .about-item { display: flex; width: 90%; height: 8rem; background-color: #f8f9fc; margin-right: 0; margin-bottom: 1rem; } .about-item img { height: 80%; margin: auto 0; } .about-item-title { font-size: 16px; } .about-item-content { font-weight: 400; font-size: 14px; line-height: 1.5; } .cooperation-process { width: 100vw; height: auto; } .cooperation-container { width: 100vw; flex-direction: column; } .cooperation-item { width: 88%; height: 8.9125rem; margin-left: 2.222222rem; margin-bottom: 2rem; } .number { top: 0.875rem; background-size: contain; } .cooperation-item-title { top: 1.575rem; left: 8.4375rem; } .cooperation-item-content { width: 70%; top: 4.8125rem; left: 5rem; line-height: 1.3; font-size: 14px; font-weight: 400; text-align: left; } .contact-container { width: 90%; flex-wrap: wrap; justify-content: space-evenly; } .contact-item { width: 45%; height: 17rem; margin-right: 0; margin-bottom: 1rem; background-size: 100% 100% !important; line-height: 30rem; } .contact { height: auto; padding-bottom: 2rem; } }