.bat-banner[data-v-4d1e4c33],.home-content[data-v-4d1e4c33] {
    background-color: var(--white-bg)
}

.bat-banner[data-v-4d1e4c33] {
    color: var(--font-main-color)
}

.home-content[data-v-4d1e4c33] {
    padding: 70px 0 40px
}

.banner-des[data-v-4d1e4c33] {
    font-weight: 400;
    margin: 30px 0
}

.banner-left>img[data-v-4d1e4c33] {
    margin-bottom: 26px
}

.banner-btn[data-v-4d1e4c33] {
    height: 62px;
    display: flex;
    align-items: center;
    margin-bottom: 40px
}

.banner-share[data-v-4d1e4c33] {
    background-color: #f77452;
    color: var(--font-white-color);
    font-size: 18px;
    font-weight: 700;
    width: 260px;
    height: 56px;
    border-radius: 56px;
    transition: all .3s
}

.banner-share span[data-v-4d1e4c33] {
    margin-left: 13px;
    cursor: pointer
}

.banner-share[data-v-4d1e4c33]:hover {
    width: 280px;
    height: 60px
}

.banner-dld[data-v-4d1e4c33] {
    font-weight: 700
}

.banner-dld a[data-v-4d1e4c33] {
    text-decoration: underline
}

.banner-right[data-v-4d1e4c33] {
    position: relative
}

.banner-right img[data-v-4d1e4c33],.banner-left h1[data-v-4d1e4c33] {
    transition: all .3s
}

.banner-web[data-v-4d1e4c33] {
    font-weight: 400;
    font-size: 12px;
    margin-left: 22px
}

.banner-web a[data-v-4d1e4c33] {
    margin-left: 10px;
    text-decoration: none
}

.home-detail[data-v-4d1e4c33] {
    width: 1200px
}

.home-content[data-v-4d1e4c33] {
    color: var(--font-main-color)
}

.detaile-title[data-v-4d1e4c33] {
    text-align: center;
    margin-bottom: 63px
}

.detaile-title h1[data-v-4d1e4c33] {
    font-size: 40px
}

.detaile-title p[data-v-4d1e4c33] {
    font-size: 18px;
    font-weight: 400;
    margin-top: 30px
}

img.banner-img-2[data-v-4d1e4c33] {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1s
}

img.banner-img-1[data-v-4d1e4c33] {
    opacity: 1;
    transition: opacity 1s
}

.banner-right:hover>img.banner-img-2[data-v-4d1e4c33] {
    opacity: 1
}

.banner-right:hover>img.banner-img-1[data-v-4d1e4c33] {
    opacity: 0
}

@media screen and (min-width: 1000px) {
    .bat-grid[data-v-4d1e4c33] {
        display:grid;
        grid-template-columns: auto auto auto;
        grid-gap: 40px 50px
    }

    .bat-grid>div[data-v-4d1e4c33] {
        background-color: #fffc;
        text-align: center;
        padding: 30px;
        font-size: 30px;
        transition: all .3s;
        color: var(--font-main-color)
    }

    .bat-grid>div[data-v-4d1e4c33]:hover {
        transform: scale(1.06);
        box-shadow: 0 18px 30px 6px #9696965c
    }

    .bat-grid>div h4[data-v-4d1e4c33] {
        font-size: 24px;
        margin-top: 25px
    }

    .bat-grid>div img[data-v-4d1e4c33] {
        height: 200px
    }

    p.bat-grid-des[data-v-4d1e4c33] {
        margin-top: 20px;
        font-size: 14px;
        height: 72px
    }

    .bat-grid-subtitle[data-v-4d1e4c33] {
        margin-top: 20px
    }

    .bat-grid-subtitle>span[data-v-4d1e4c33] {
        background-color: #e8f3ff;
        color: var(--theme-color);
        font-size: 12px;
        font-weight: 700;
        padding: 6px 12px;
        border-radius: 4px
    }

    .bat-grid-more[data-v-4d1e4c33] {
        margin-top: 40px;
        color: var(--theme-color)
    }

    .bat-grid-more a[data-v-4d1e4c33] {
        background-color: #fff;
        border: 1px solid #f77452;
        font-size: 14px;
        padding: 10px 25px;
        border-radius: 40px
    }

    .bat-grid>div:hover>.bat-grid-more>a[data-v-4d1e4c33] {
        background-color: #f77452;
        color: var(--font-white-color)
    }

    .fc-box[data-v-4d1e4c33] {
        display: grid;
        grid-template-columns: auto auto auto auto;
        grid-gap: 80px;
        box-shadow: 0 0 11px 1px #f5f5f5;
        padding: 15px;
        margin-top: 40px;
        color: var(--theme-color)
    }

    .m-left[data-v-4d1e4c33] {
        display: flex;
        align-items: center;
        justify-content: flex-start
    }

    .fc-item-ctn[data-v-4d1e4c33] {
        padding-left: 16px
    }

    .fc-item-ctn p[data-v-4d1e4c33] {
        margin-top: 6px;
        font-size: 14px
    }

    .fc-items>img[data-v-4d1e4c33] {
        width: 80px
    }

    .bat-grid>div:hover>.bat-grid-more>button[data-v-4d1e4c33] {
        background-color: #007eff;
        color: #fff
    }
}

@media screen and (min-width: 1720px) {
    .mobile[data-v-4d1e4c33] {
        display:none!important
    }

    .bat-home[data-v-4d1e4c33] {
        display: flex;
        align-items: center;
        justify-content: center
    }

    .bat-c[data-v-4d1e4c33] {
        width: 100%
    }

    .banner-left h1[data-v-4d1e4c33] {
        font-size: 56px
    }

    .banner-des[data-v-4d1e4c33] {
        font-size: 22px
    }

    .bat-banner[data-v-4d1e4c33] {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 50px
    }
}

@media screen and (min-width: 1480px) and (max-width: 14719px) {
    .mobile[data-v-4d1e4c33] {
        display:none!important
    }

    .banner-left h1[data-v-4d1e4c33] {
        font-size: 46px
    }

    .banner-right img[data-v-4d1e4c33] {
        width: 810px
    }

    .banner-des[data-v-4d1e4c33] {
        font-size: 20px
    }

    .bat-banner[data-v-4d1e4c33] {
        display: flex;
        align-items: center;
        /*justify-content: flex-end;*/
        padding: 0 0 0  10vw
    }
}

@media screen and (min-width: 1260px) and (max-width: 1479px) {
    .mobile[data-v-4d1e4c33] {
        display:none!important
    }

    .banner-left h1[data-v-4d1e4c33] {
        font-size: 36px
    }

    .banner-right img[data-v-4d1e4c33] {
        width: 51vw;
    }

    .bat-banner[data-v-4d1e4c33] {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 0 50px
    }
}

@media screen and (min-width: 1000px) and (max-width: 1259px) {
    .mobile[data-v-4d1e4c33] {
        display:none!important
    }

    .banner-right[data-v-4d1e4c33] {
        height: 365px;
        overflow: hidden
    }

    .banner-left h1[data-v-4d1e4c33] {
        font-size: 22px
    }

    .banner-des[data-v-4d1e4c33] {
        margin: 15px 0
    }

    .banner-des p[data-v-4d1e4c33] {
        font-size: 14px
    }

    .banner-left>img[data-v-4d1e4c33] {
        margin-bottom: 16px
    }

    .banner-btn[data-v-4d1e4c33] {
        margin-bottom: 20px
    }

    .banner-right img[data-v-4d1e4c33] {
        width: 610px;
        position: absolute;
        padding: 10px;
        top: 0;
        left: 0
    }

    .bat-banner[data-v-4d1e4c33] {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 0 50px
    }

    .bm-jt[data-v-4d1e4c33] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 10;
        padding: 10px
    }

    .bm-jt-left[data-v-4d1e4c33],.bm-jt-right[data-v-4d1e4c33] {
        background-color: #1f2d3d1c;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        color: var(--theme-color)
    }

    .bm-jt-left>div[data-v-4d1e4c33],.bm-jt-right>div[data-v-4d1e4c33] {
        width: 24px;
        height: 24px
    }

    .bm-jt-left>div[data-v-4d1e4c33] {
        transform: rotate(-90deg)
    }

    .bm-jt-right>div[data-v-4d1e4c33] {
        transform: rotate(90deg)
    }

    .l-hid[data-v-4d1e4c33] {
        opacity: 0
    }
}

@media screen and (max-width: 999px) {
    .bat-home[data-v-4d1e4c33] {
        background-color:var(--white-bg)
    }

    .banner-right[data-v-4d1e4c33] {
        height: 365px;
        overflow: hidden
    }

    .m-bnr-btn[data-v-4d1e4c33] {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .mb-banner-txt[data-v-4d1e4c33] {
        text-align: center
    }

    .mb-banner-txt h1[data-v-4d1e4c33] {
        padding: 10px 0 10px
    }

    .mb-banner-txt h4[data-v-4d1e4c33] {
        font-weight: 500;
        font-size: 1em
    }

    .mb-banner-txt p[data-v-4d1e4c33] {
        font-size: .94em
    }

    .banner-right[data-v-4d1e4c33] {
        position: relative;
        width: 100%;
        padding: 5px
    }

    .banner-right>img[data-v-4d1e4c33] {
        width: 100%;
        position: absolute;
        padding: 10px;
        top: 0;
        left: 0
    }

    .banner-btn[data-v-4d1e4c33] {
        margin-bottom: 16px
    }

    .mb-dlds[data-v-4d1e4c33] {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 50px;
        font-weight: 700
    }

    .mb-dlds a[data-v-4d1e4c33] {
        background-color: #e7e8e9;
        padding: 13px;
        border-radius: 50px
    }

    .mb-dlds>a[data-v-4d1e4c33]:nth-child(2) {
        margin: 0 10px
    }

    .home-content[data-v-4d1e4c33] {
        padding: 35px 0 20px
    }

    .detaile-title[data-v-4d1e4c33] {
        margin-bottom: 20px
    }

    .bat-grid[data-v-4d1e4c33],.mb-fc-box[data-v-4d1e4c33] {
        padding: 0px
    }

    .bat-grid>div[data-v-4d1e4c33] {
        text-align: center;
        box-shadow: 0 6px 12px #9696965c;
        padding: 15px 30px 15px 15px;
        margin-top: 30px
    }

    .bat-grid>div[data-v-4d1e4c33]:nth-child(1) {
        margin-top: 0
    }

    .bat-grid>div img[data-v-4d1e4c33] {
        width: 42%
    }

    .bat-grid-subtitle[data-v-4d1e4c33] {
        margin-top: 20px
    }

    .bat-grid-subtitle>span[data-v-4d1e4c33] {
        background-color: #e8f3ff;
        color: var(--theme-color);
        font-size: 12px;
        font-weight: 700;
        padding: 6px 12px;
        border-radius: 4px
    }

    .bat-grid>div h4[data-v-4d1e4c33] {
        font-size: 20px;
        margin-top: 20px
    }

    p.bat-grid-des[data-v-4d1e4c33] {
        margin-top: 20px;
        font-size: 14px
    }

    .bat-grid-more[data-v-4d1e4c33] {
        margin: 30px 0 20px;
        color: var(--theme-color)
    }

    .bat-grid-more a[data-v-4d1e4c33] {
        background-color: #fff;
        border: 1px solid #f77452;
        font-size: 14px;
        padding: 10px 25px;
        border-radius: 40px
    }

    .fc-box[data-v-4d1e4c33] {
        display: grid;
        grid-template-columns: auto auto;
        grid-gap: 14px;
        box-shadow: 0 6px 12px #9696965c;
        padding: 15px;
        margin-top: 1px;
        color: var(--theme-color)
    }

    .m-left[data-v-4d1e4c33] {
        display: flex;
        align-items: center;
        justify-content: flex-start
    }

    .fc-item-ctn[data-v-4d1e4c33] {
        padding-left: 16px
    }

    .fc-item-ctn p[data-v-4d1e4c33] {
        margin-top: 3px;
        font-size: .7em
    }

    .fc-items>img[data-v-4d1e4c33] {
        width: 38px
    }

    .bm-jt[data-v-4d1e4c33] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 10;
        padding: 10px
    }

    .bm-jt-left[data-v-4d1e4c33],.bm-jt-right[data-v-4d1e4c33] {
        background-color: #1f2d3d1c;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        color: var(--theme-color)
    }

    .bm-jt-left>div[data-v-4d1e4c33],.bm-jt-right>div[data-v-4d1e4c33] {
        width: 24px;
        height: 24px
    }

    .bm-jt-left>div[data-v-4d1e4c33] {
        transform: rotate(-90deg)
    }

    .bm-jt-right>div[data-v-4d1e4c33] {
        transform: rotate(90deg)
    }

    .l-hid[data-v-4d1e4c33] {
        opacity: 0
    }
}