.hero {
    height: 1120px;
}

.hero .maintitle {
    z-index: 11;
    position: absolute;
    top: px;
    left: 207px
}

.hero .maintitle .PD_img img {
    width: 816px
}

.hero .sub {
    z-index: 14;
    position: absolute;
    top: 310px;
    left: 357px
}

.hero .sub .Area_swiper_box .PD_img {
    width: 505px
}

.hero .top_model {
    z-index: 13;
    position: absolute;
    top: 0px;
    left: 610px;
    width: 610px
}

.hero .top_PD {
    z-index: 15;
    position: absolute;
    top: 440px;
    left: 130px;
    width: 960px
}

.hero .Area_swiper_box .PD_layout li {
    background-color: hsla(0,0%,100%,0)
}

@media screen and (max-width: 767px) {
    .hero {
        height: 122vw;
    }

    .hero .maintitle {
        top: -5vw;
        left: -2vw;
        width: 103%;
    }

    .hero .maintitle .PD_img img {
        width: 100%
    }

    .hero .top_model {
        z-index: 15;
        position: absolute;
        top: 0px;
        left: 0;
        width: 100%
    }

    .hero .Area_swiper_box .PD_img {
        width: 100%;
        margin: 0 0 0 0
    }

    .hero .sub {
        top: 35vw;
        left: 17vw;
        width: 100%
    }

    .hero .sub .Area_swiper_box .PD_img {
        width: 64vw
    }

    .hero .top_PD {
        top: 48vw;
        left: 0vw;
        width: 100%
    }
}