.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; color: #242a30; } .index-page .getApp .answer { margin-top: 1.18vw; margin-left: 12.5vw; 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; color: #242a30; padding-top: 10.89vw; } .index-page .take-out .food-answer { text-align: center; 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 { display: none; 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: 5.21vw; } .index-page .take-out .blueColor { color: #018cff; } .index-page .take-out .grayColor { color: #242a30; } .index-page .take-out .whiteColor { color: #fff; } .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.56vw; } .index-page .take-out .take-out-body p { font-size: 16px; font-weight: 400; letter-spacing: -0.4px; margin-bottom: 1.82vw; } .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 { display: none; 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; } .index-page .getApp .app { display: none; } .index-page .take-out .take-out-imgs, .index-page .take-out .swiper { display: none; } .index-page .every { display: none; } .index-page .maph5 { display: none; } .index-page .footer-full { display: none; } @media screen and (max-width: 960px) { /* 750 */ .font100 { font-size: 13.33vw; } .font72 { font-size: 9.6vw; } .font60 { font-size: 8vw; } .font48 { font-size: 6.4vw; } .font36 { font-size: 4.8vw; } .font24 { font-size: 3.2vw; } .footer-page { display: none; } .index-page .banner { height: 89.2vw; background: url('../../images//home/phone/banner-pho.png') no-repeat; background-size: 100% 100%; } .index-page .getApp { height: 66.67vw; background: url('../../images//home/phone/getApp.png') no-repeat; background-size: 100% 100%; } .index-page .getApp .whereapp { width: 53.33vw; word-break: break-all; } .index-page .getApp .where, .index-page .getApp .answer { margin-left: 4vw; color: #242a30; } .index-page .getApp .where { padding-top: 5.33vw; } .index-page .getApp .answer { margin-top: 3.73vw; } .index-page .getApp .qrcodebox { margin-left: 4vw; } .index-page .getApp .qrcodebox .qrcode { width: 18.67vw; height: 18.67vw; } .index-page .getApp .qrcodebox .tobox .ios { width: 33.33vw; height: 8.27vw; } .index-page .getApp .app { position: absolute; display: block; bottom: 0; right: 0; width: 39.6vw; height: 59.87vw; } .index-page .take-out { position: relative; height: auto; } .index-page .take-out .food-title { margin-left: 4vw; text-align: left; } .index-page .take-out .food-answer { margin-left: 4vw; text-align: left; } .index-page .take-out .take-out-body { display: none; } .index-page .take-out .take-out-imgs { display: block; position: relative; } .index-page .take-out .take-out-imgs .take-out-img { position: absolute; width: 50.67vw; height: 50.67vw; top: 4vw; right: 16.53vw; } .index-page .take-out .take-out-imgs .take-out-people { right: 6.4vw; } .index-page .take-out .swiper { display: block; margin-top: 44.27vw; margin-left: 4vw; } .index-page .take-out .swiper .img-info { width: 55.33vw; padding-bottom: 8vw; word-break: break-all; } .index-page .take-out .swiper .img-info .about { margin-top: 2.4vw; } .index-page .take-out .swiper .img-info .grayColor { color: #282828; } .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction { bottom: 0; } .index-page .every { display: block; padding: 9.33vw 8.8vw 7.33vw 4vw; background: #f7f7f7; } .index-page .every .title { font-family: NexaBold, NexaBold-Regular; font-weight: 400; color: #282828; letter-spacing: -2.4px; margin-bottom: 2.67vw; } .index-page .every .content { color: #282828; letter-spacing: -0.24px; word-break: break-all; font-weight: 400; font-family: EuclidSquare, EuclidSquare-Regular; } .index-page .map { display: none; } .index-page .maph5 { display: block; width: 100%; } .index-page .maph5 .head-maph5 { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 12.4vw; background: #3a9ff2; color: #ffffff; font-family: Gilroy, Gilroy-Bold; font-weight: 700; padding-left: 3.73vw; padding-right: 4vw; box-sizing: border-box; } .index-page .maph5 .head-maph5 .select { display: flex; justify-content: center; align-items: center; width: 9.07vw; height: 9.07vw; border: 0.53vw solid #ffffff; border-radius: 1.6vw; } .index-page .maph5 .head-maph5 .select .open { width: 2.27vw; height: 1.47vw; } .index-page .maph5 .map-bg { width: 100%; height: 90.67vw; padding-top: 6.4vw; background: url('../../images/home/phone/map-bg-pho.png') no-repeat; background-size: 100% 100%; } .index-page .maph5 .map-bg .map-img { width: 88.4vw; height: 42.27vw; margin: 0 auto; background: url('../../images/home/phone/map-pho.png') no-repeat; background-size: 100% 100%; } .index-page .footer-full { display: block; position: static; } .index-page .footer-full .header { width: 100%; height: 15.73vw; background: #008cff; display: flex; align-items: center; justify-content: space-between; padding: 0 4vw; } .index-page .footer-full .header .logo { width: 26.8vw; height: 7.73vw; } .index-page .footer-full .header .close { width: 4.66vw; height: 4.66vw; } .index-page .footer-full .title { font-size: 4.8vw; font-family: NexaBold, NexaBold-Regular; font-weight: 400; text-align: justifyLeft; color: #242a30; line-height: 9.6vw; } .index-page .footer-full .link { font-size: 3.73vw; font-family: NexaBold, NexaBold-Regular; font-weight: 400; text-align: justifyLeft; color: #97a5b0; line-height: 7.46vw; } }