.Index {
    width:100%;
    margin:0;
    position:relative;
    font-size:0;
    overflow:hidden;
}
.BannerBox {
    padding-bottom:46%;
    position:relative;
}
.BannerBox > div {
    width:800%;
    height:100%;
    left:0;
    position:absolute;
    z-index:1;
    transition:0.75s;
}
.BannerBox > div > div {
    width:12.5%;
    height:100%;
    display:inline-block;
    background-size:110% 100%;
    background-repeat:no-repeat;
    background-position-x:50%;
    background-position-y:50%;
    transition:0.3s;
}
.BannerBox > div > div:nth-child(1) {
    background-image:url(../../Image/IndexBanner1.jpg);
}
.BannerBox > div > div:nth-child(2) {
    background-image:url(../../Image/IndexBanner2.jpg);
}
.BannerBox > div > div:nth-child(3) {
    background-image:url(../../Image/IndexBanner3.jpg);
}
.BannerBox > div > div:nth-child(4) {
    background-image:url(../../Image/IndexBanner4.jpg);
}
.BannerBox > div > div:nth-child(5) {
    background-image:url(../../Image/IndexBanner5.jpg);
}
.BannerBox p {
    width:50px;
    height:50px;
    top:calc(50% - 25px);
    margin:0;
    position:absolute;
    background-color:rgba(180,180,180,0.25);
    color:#848484;
    line-height:45px;
    font-size:40px;
    border-radius:100px;
    cursor:pointer;
    z-index:2;
    opacity:0.5;
    transition:0.3s;
}
.BannerBox p:hover {
    opacity:1;
}
.BannerBox p:nth-child(2) {
    left:10px;
}
.BannerBox p:nth-child(3) {
    right:10px;
}
.BannerBox span {
    bottom:10%;
    position:absolute;
    font-size:50px;
    color:#a7a8ac;
    z-index:1;
    transform:rotate(90deg) scaleY(2);
}

.Index1 {
    width:100%;
    margin:50px 0;
    position:relative;
    font-size:0;
}
.Index1 li {
    width:16%;
    margin:0.5% 0;
    margin-right:0.5%;
    padding-top:7%;
    position:relative;
    display:inline-block;
    background-size:100% calc(100% - 40px);
    background-repeat:no-repeat;
    cursor:pointer;
}
.Index1 li:nth-child(1), .Index1 li:nth-last-child(1) {
    width:25%;
    margin:0.5% 0;
}
.Index1 li:nth-child(1) {
    margin-right:0.5%;
    background-image:url(../../Image/IndexImg1.jpg);
}
.Index1 li:nth-child(2) {
    background-image:url(../../Image/IndexImg2.jpg);
}
.Index1 li:nth-child(3) {
    background-image:url(../../Image/IndexImg3.jpg);
}
.Index1 li:nth-child(4) {
    background-image:url(../../Image/IndexImg4.jpg);
}
.Index1 li:nth-child(5) {
    background-image:url(../../Image/IndexImg5.jpg);
}
.Index1 li p {
    margin:0;
    padding-top:20px;
    position:relative;
    font-size:14px;
    line-height:20px;
    color:#666666;
    overflow:hidden;
}
.Index1 li p::after {
    content:"<";
    width:10px;
    top:0px;
    right:0;
    left:0;
    margin:auto;
    position:absolute;
    display:block;
    color:#a6a6a6;
    transform:rotate(-90deg) scale(0.75,2);
    transition:0.5s;
}
.Index1 li:hover p::after {
    top:5px;
}

@media screen and (max-width: 1000px) {
    .Index1 li, .Index1 li:nth-child(1), .Index1 li:nth-last-child(1) {
        width:19.6%;
    }
}
@media screen and (max-width: 850px) {
    .BannerBox {
        padding-bottom: 60%;
    }
    .BannerBox > div > div {
        background-size: 150% 100%;
    }
    .BannerBox span {
        display:none;
    }

    .Index1 li, .Index1 li:nth-child(1), .Index1 li:nth-last-child(1) {
        width:50%;
        padding-top:20%;
        margin:10px 0;
    }
}
@media screen and (max-width: 550px) {
    .Index1 li {
        width:100%;
        padding-top:33%;
        margin:10px 0;
    }
    .Index1 li:nth-child(1), .Index1 li:nth-last-child(1) {
        width:100%;
        padding-top:33%;
        margin:10px 0;
    }
}