.hero {
    height:285px
}

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

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

.hero .sub {
    z-index: 19;
    position: absolute;
    top: 300px;
    left: 193px
}

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

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

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

.hero .top_PD {
    z-index: 15;
    position: absolute;
    top: 220px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 1220px
}

.hero .top_PD ul {
    height: 486px
}

.hero .Area_swiper {
    overflow: visible
}

.hero .Area_swiper .Area_swiper_box {
    overflow: visible
}

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

    .hero .maintitle {
        top: 0;
        left: 0
    }

    .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 {
        z-index: 92;
        top: 37vw;
        left: 0;
        width: 100%
    }

    .hero .sub .Area_swiper_box .PD_img {
        width: 100%
    }

    .hero .top_PD {
        top: 43vw;
        width: 100%
    }

    .hero .top_PD ul {
        height: 40vw
    }

    .hero .top_PD .PD_layout {
        width: 100%
    }
}