@charset "UTF-8";
.ab-banner { position: relative; width: 100%; height: 100vh; overflow: hidden; }
.ab-banner .bg img { position: absolute; top: 0; left: 0; z-index: 1; width: 100vw; height: 100%; object-fit: cover; }
.ab-banner .text { position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 10; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.ab-banner .text h1 { font-size: 3rem; font-family: "Alimama_ShuHeiTi_Bold"; line-height: 1.3; color: #fff; }
.ab-main1 { position: relative; width: 100%; height: 100vh; overflow: hidden; }
.ab-main1 .text { display: flex; align-items: center; height: 50%; padding-left: 5%; padding-right: 5%; }
.ab-main1 .text p { font-size: 0.875rem; line-height: 1.5; color: #000; }
.ab-main1 .imgbox { width: 100%; height: 50%; }
.ab-main1 .imgbox .img-mask { position: absolute; right: 0; bottom: 0; width: 100%; height: 50%; -webkit-mask-image: url('../images/main3_icon01.png'); -webkit-mask-repeat: no-repeat; -webkit-mask-position: right bottom; -webkit-mask-size: 100%; }
.ab-main1 .imgbox .img-mask figure { position: absolute; right: 0; bottom: 0; width: 225%; background-repeat: no-repeat; background-position: center center; background-size: cover; }
.ab-main1 .imgbox .img-mask figure img { position: relative; right: -25%; width: 100%; }
.ab-main2 { position: relative; width: 100%; height: 30vh; padding-left: 5%; padding-right: 5%; overflow: hidden; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; background-color: #e6e6e6; }
.ab-main2 p { font-size: 0.9375rem; line-height: 1.5; color: #000; }
.ab-main3 h2 { padding-top: 12vh; padding-bottom: 12vh; font-size: 1.75rem; font-family: "Alimama_ShuHeiTi_Bold"; line-height: 1.3; text-align: center; color: #000; }
.ab-main3 h2 span { color: #48c0fc; }
.ab-main3 .main ul li { display: flex; flex-direction: column; align-items: center; }
.ab-main3 .main ul li .txt { padding-top: 2.8125rem; padding-bottom: 2.8125rem; font-size: 0.9375rem; font-weight: bold; }
@media (min-width: 768px) {
    
}
@media (min-width: 1024px) {
    .ab-banner .text h1 { font-size: 6rem; }
    .ab-main1 .text { width: 41%; height: 100vh; padding-right: 0; }
    .ab-main1 .text p { padding-bottom: 0.625rem; font-size: 1.375rem; }
    .ab-main1 .imgbox { position: absolute; right: 0; bottom: 0; z-index: -1; width: 100%; height: 100%; }
    .ab-main1 .imgbox .img-mask { width: 59%; height: 100%; -webkit-mask-position: left bottom; -webkit-mask-size: 119%; }
    .ab-main1 .imgbox .img-mask figure { width: 255%; }
    .ab-main3 h2 { font-size: 3.5rem; }
    .ab-main3 .main ul { display: flex; justify-content: space-between; }
}
@media (min-width: 1200px) {
    .ab-main1 .text { max-width: 35%; }
}
@media (min-width: 1440px) {
    
}
@media (min-width: 1920px) {
    
}