.index-page h1, h2, h3, h4, h5, p { margin: 0; padding: 0; } .font72 { font-size: 3.75vw; } .font60 { font-size: 3.125vw; } .font24 { font-size: 1.25vw; } .index-page { width: 100%; } .index-page .banner { position: relative; width: 100%; height: 42.135vw; background: url('../../images/home/banner.png') no-repeat; background-size: 100% 100%; z-index: 3; display: flex; flex-direction: column; justify-content: center; align-items: center; color: #ffffff; } .index-page .banner p { margin-bottom: 0.76vw; letter-spacing: -1.5px; } .index-page .getApp { position: relative; width: 100%; height: 41.67vw; margin-top: -5.73vw; background: url('../../images/home/getApp.png') no-repeat; background-size: 100% 100%; } .index-page .getApp .where { padding-top: 14.58vw; margin-left: 12.5vw; font-size: 3.125vw; color: #242a30; } .index-page .getApp .answer { margin-top: 1.18vw; margin-left: 12.5vw; font-size: 1.25vw; color: #959799; } .index-page .getApp .qrcodebox { display: flex; margin-top: 4.17vw; margin-left: 12.5vw; } .index-page .getApp .qrcodebox .qrcode { width: 9.375vw; height: 9.375vw; margin-right: 2.08vw; } .index-page .getApp .qrcodebox .tobox { display: flex; flex-direction: column; justify-content: space-around; } .index-page .getApp .qrcodebox .tobox .ios { width: 6.98vw; height: 2.08vw; cursor: pointer; } .index-page .take-out { width: 100%; height: 46.67vw; background-color: #fff; } .index-page .take-out .food-title { text-align: center; font-size: 60px; color: #242a30; padding-top: 10.89vw; } .index-page .take-out .food-answer { text-align: center; font-size: 1.25vw; color: #242a30; margin-top: 1.18vw; } .index-page .take-out .take-out-body { margin-top: 1.18vw; height: 21.46vw; display: flex; justify-content: space-between; align-items: center; margin-left: 7.1875vw; margin-right: 12.5vw; } .index-page .take-out .take-out-body .img-box { position: relative; width: 25.781vw; height: 100%; } .index-page .take-out .take-out-body .img-box .take-out-img { position: absolute; width: 21.46vw; height: 21.46vw; } .index-page .take-out .take-out-body .img-box .take-out-people { position: absolute; left: 4.17vw; } .index-page .take-out .take-out-body .img-info { width: 17.5vw; word-break: break-all; } .index-page .take-out .take-out-body .take-out-img-info { position: absolute; left: 5.3125vw; top: 50%; transform: translateY(-50%); } .index-page .take-out .take-out-body .whiteColor { color: #fff; } .index-page .take-out .take-out-body .blueColor { color: #018cff; } .index-page .take-out .take-out-body .grayColor { color: #242a30; } .index-page .take-out .take-out-body .take-out-title { font-size: 3.75vw; text-shadow: 13.5px 23.38px 54px 0px rgba(3, 3, 3, 0.38); font-weight: 500; } .index-page .take-out .take-out-body .about { font-size: 1.25vw; font-weight: 500; width: 15.208vw; letter-spacing: -0.6px; text-shadow: 13.5px 23.38px 54px 0px rgba(3, 3, 3, 0.38); margin-bottom: 1.82vw; } .index-page .take-out .take-out-body p { font-size: 16px; font-weight: 400; letter-spacing: -0.4px; margin-bottom: 2.19vw; } .index-page .take-out .take-out-body .toway { font-size: 14px; font-weight: 700; } .index-page .map { width: 100%; height: 56.25vw; background: url('../../images/home/map.png') no-repeat; background-size: 100% 100%; } .index-page .map h1 { font-size: 3.75vw; font-weight: 400; color: #018cfb; padding-top: 7.708vw; margin-left: 12.448vw; } .index-page .map p { width: 42.71vw; font-size: 1.25vw; font-weight: 500; color: #242a30; line-height: 30px; margin-left: 12.448vw; word-break: break-all; margin-bottom: 3.125vw; margin-top: 1.35vw; } .index-page .map .select { position: relative; width: 17.97vw; margin-left: 12.448vw; } .index-page .map .select .select-btn { position: absolute; width: 100%; height: 2.81vw; background: linear-gradient(270deg, #00a8ff 0%, #008cff 100%); box-shadow: 7.98px 15.01px 32px 0px #d3e1ef; border-radius: 12px; cursor: pointer; text-align: center; line-height: 2.81vw; color: #fff; font-size: 1.25vw; font-weight: 600; z-index: 3; } .index-page .map .select .pull-box { position: absolute; top: 2.81vw; left: 0; width: 100%; height: 15.1vw; background: #ffffff; border-radius: 0 0 12px 10px; overflow: hidden; overflow-y: auto; } .index-page .map .select .pull-box .pull-item { height: 2.55vw; line-height: 2.55vw; padding-left: 2.08vw; border-bottom: 1px solid #f3f5f7; color: #018cff; font-weight: 700; } .index-page .map .select .pull-box .pull-item:last-child { border: none; } @media screen and (max-width: 960px) { .font72 { font-size: 9.6vw; } .font60 { font-size: 8vw; } .font24 { font-size: 3.2vw; } .index-page .banner { height: 89.2vw; background: url('../../images//home/phone/banner-pho.png') no-repeat; background-size: 100% 100%; } }