@charset "UTF-8";
.banner { position: relative; width: 100%; height: 100vh; overflow: hidden; }
.banner .text { display: flex; align-items: center; height: 50%; padding-left: 5%; }
.banner .text h1 { font-size: 3rem; font-family: "Alimama_ShuHeiTi_Bold"; line-height: 1.3; color: #000; }
.banner .text h1 span { color: #48c0fc; }
.banner .imgbox { width: 100%; height: 50%; }
.banner .imgbox .img-mask { position: absolute; right: 0; bottom: 0; width: 95%; height: 67vh; -webkit-mask-image: url('../images/banner_mask.png'); -webkit-mask-repeat: no-repeat; -webkit-mask-position: right bottom; -webkit-mask-size: 145%; }
.banner .imgbox .img-mask figure { position: absolute; right: 0; bottom: 0; width: 151%; }
.banner .imgbox .img-mask figure img { position: relative; right: -25%; width: 100%; }
.main1 { padding-top: 5.625rem; padding-bottom: 2.8125rem; text-align: center; }
.main1 .tip { padding-bottom: 0.3125rem; font-size: 0.875rem; line-height: 1.1; color: #000; }
.main1 .title { font-size: 1.75rem; font-family: "Alimama_ShuHeiTi_Bold"; line-height: 1.3; color: #000; }
.main1 .imgbox { position: relative; padding-top: 18.71%; padding-bottom: 8.47%; }
.main1 .imgbox .main1_pic01 { width: 39.12%; margin: 0 auto; }
.main1 .imgbox .main1_pic02 { position: absolute; top: 2.54%; left: 20.28%; width: 18.36%; }
.main1 .imgbox .main1_pic03 { position: absolute; left: 0; bottom: 6.21%; width: 20.9%; }
.main1 .imgbox .main1_pic04 { position: absolute; top: 22.38%; left: 74.36%; width: 16.38%; }
.main3 { position: relative; height: 100vh; background: url('../images/main4_bg.jpg') center/cover no-repeat fixed; }
.main3 .msgbox { position: absolute; top: 30%; left: 0; right: 0; text-align: right; }
.main3 .msgbox img { width: 2.1875rem; margin-bottom: 0.3125rem; }
.main3 .msgbox p { font-size: 1.75rem; font-family: "Alimama_ShuHeiTi_Bold"; line-height: 1.3; color: #000; }
.main4 { padding-top: 5.625rem; padding-bottom: 2.8125rem; text-align: center; overflow: hidden; }
.main4 img { width: 3.125rem; margin-bottom: 0.3125rem; }
.main4 .title { font-size: 1.75rem; font-family: "Alimama_ShuHeiTi_Bold"; line-height: 1.3; color: #000; }
.main4 .word { padding-left: .5rem; font-size: 9.5rem; font-family: "Alimama_ShuHeiTi_Bold"; line-height: 1.4; color: #48c0fc; white-space: nowrap; }
@media (min-width: 768px) {
    .main4 .word { padding-left: 4rem; font-size: 12.5rem; }
}
@media (min-width: 1024px) {
    .banner .text { height: 100vh; padding-left: 13.125%; }
    .banner .text h1 { font-size: 6rem; }
    .banner .imgbox { position: absolute; right: 0; bottom: 0; z-index: -1; width: 100%; height: 100%; }
    .banner .imgbox .img-mask { width: 50%; height: 100%; -webkit-mask-size: 100%; }
    .banner .imgbox .img-mask figure { width: 100%; }
    .banner .imgbox .img-mask figure img { right: 0; }
    .main1 { padding-top: 11.25rem; padding-bottom: 5.625rem; }
    .main1 .tip { padding-bottom: 0.625rem; font-size: 1.375rem; }
    .main1 .title { font-size: 3.5rem; }
    .main3 .msgbox img { width: 4.375rem; }
    .main3 .msgbox p { font-size: 3.5rem; }
    .main4 { padding-top: 11.25rem; padding-bottom: 5.625rem; }
    .main4 img { width: 6.25rem; }
    .main4 .title { font-size: 3.5rem; }
    .main4 .word { padding-left: 8rem; font-size: 25rem; }
}
@media (min-width: 1200px) {
    
}
@media (min-width: 1440px) {
    
}
@media (min-width: 1920px) {
    
}