.banner { display: block; position: relative; font-size: 0; height: 800px; background: #004be2; } .banner .bg { width: 100%; height: auto; } .banner .content { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width: 795px; width: 100%; } .banner .content .bannerTitle { text-align: center; padding-bottom: 4px; padding-top: 16px; position: relative; } .banner .content .bannerTitle p { font-size: 58px; line-height: calc(98/58); color: #fff; font-weight: bold; } .banner .content .bannerTitle i { font-size: 58px; line-height: calc(84/58); font-weight: bold; color: #fff; font-style: normal; } .banner .content .bannerTitle span { display: block; background: url(../images/bannerImg2.png) no-repeat center; font-size: 28px; line-height: calc(48/28); color: #fff; letter-spacing: 22px; margin-top: 42px; } .banner .content .bannerTitle .leftTop { position: absolute; top: 0; left: 0; } .banner .content .bannerTitle .rightBottom { position: absolute; right: 0; bottom: 0; } .banner .content .bannerTitle .rightBottom img { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .banner .content .btn { width: 240px; line-height: 54px; background-color: #ffffff; border-radius: 27px; color: #0042ff; font-size: 16px; letter-spacing: 1px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; margin: 0 auto; margin-top: 56px; } .banner .content .btn img { margin-right: 12px; } @media (max-width: 1340px) { .banner { height: 560px; } .banner .bg { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .banner .content .bannerTitle p { font-size: 40px; } .banner .content .bannerTitle i { font-size: 60px; } } @media (max-width: 996px) { .banner { height: 400px; } .banner .content { width: auto; } .banner .content .bannerTitle { padding: 15px 70px 15px; } .banner .content .bannerTitle .leftTop img, .banner .content .bannerTitle .rightBottom img { width: 50%; } .banner .content .bannerTitle p { font-size: 4vw; } .banner .content .bannerTitle i { font-size: 4.5vw; white-space: nowrap; margin-top: 20px; display: block; } .banner .content .bannerTitle span { font-size: 3vw; letter-spacing: 5px; background: url(../images/bannerImg2.png) no-repeat center; background-size: 100% auto; margin-top: 20px; } .banner .content .btn { width: 200px; line-height: 35px; margin-top: 30px; font-size: 14px; } } @media (max-width: 750px) { .banner { height: 450px; } .banner .content { width: 90%; top: 55%; } .banner .content .bannerTitle { padding: 15px 0; } .banner .content .bannerTitle p { font-size: 5vw; } .banner .content .bannerTitle i { font-size: 7vw; margin-top: 0; line-height: 2; } .banner .content .bannerTitle span { width: 80%; margin: 0 auto; font-size: 4.5vw; letter-spacing: 0; } }