html, body { height: 100%; min-height: 100%; } .intro #downloadWrap.wrap { position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: #f9f9f9; z-index: 99999; display: flex; height: 100%; } .intro #downloadWrap.wrap .container { display: flex; width: 100%; height: 100%; flex-direction: column; padding: 40px 20px 24px; box-sizing: border-box; max-width: 480px; margin: auto; max-height: 813px; } .intro #downloadWrap.wrap .intro_header { text-align: center; } .intro #downloadWrap.wrap .intro_header .tit { font-size: 24px; line-height: 33px; color: #000; font-weight: 500; } .intro #downloadWrap.wrap .intro_header .desc { font-size: 14px; line-height: 21px; color: #666; margin-top: 8px; } .intro #downloadWrap.wrap .intro_container { position: relative; flex: 1; text-align: center; display: flex; flex-direction: column; justify-content: center; } .intro #downloadWrap.wrap .intro_container .link_download { display: block; width: 280px; margin: 0 auto; line-height: 56px; color: #fff; background-color: #ff6600; font-size: 15px; border-radius: 10px; text-decoration: none; } .intro #downloadWrap.wrap .intro_container .link_web { display: block; text-decoration: underline; color: #666; font-size: 12px; line-height: 22px; margin-top: 12px; } .intro #downloadWrap.wrap .intro_container .img_phone { width: 248px; height: 300px; background: url("/resources/mobile/img/main/img_phone02.png") no-repeat 0 0; background-size: cover; margin: 0 auto; overflow: hidden; } .intro #downloadWrap.wrap .intro_footer { position: relative; } .intro #downloadWrap.wrap .intro_footer .area_text .label { display: inline-block; background-color: #333; font-size: 12px; line-height: 16px; width: 41px; text-align: center; color: #fff; border-radius: 10px; font-weight: normal; } .intro #downloadWrap.wrap .intro_footer .area_text .desc { margin-top: 8px; font-size: 15px; line-height: 24px; color: #000; } .intro #downloadWrap.wrap .intro_footer .area_text .emph { font-weight: 600; font-style: normal; } .intro #downloadWrap.wrap .intro_footer .img_coupon { position: absolute; right: 0; bottom: 0; } @media (max-width: 320px) { .intro #downloadWrap.wrap .img_phone, .intro #downloadWrap.wrap .img_coupon { display: none; } } @media (max-height: 640px) { .intro #downloadWrap.wrap .intro_container .img_phone { width: 216px; height: 260px; } } @media (min-height: 641px) and (max-height: 811px) { .intro #downloadWrap.wrap .intro_container .img_phone { width: 216px; height: 260px; } } .intro .intro_container .eventBox { width: 100%; padding: 0 20px 23px; color: #555; text-align: center; box-sizing: border-box; font-size: 14px; line-height: 21px; } .intro_container .eventBox img { display: inline-block; width: 51px; }