.indexProduct {
    width: 100%;
    height: auto;
    overflow: hidden;
    background-color: #f4faff;
    padding:100px 0;
}
.indexTitle{
    width:100%;
    height:auto;overflow:hidden;
    text-align:center;
}
    .indexTitle h2 {
        width: 100%;
        height: 40px;overflow:hidden;
        line-height: 40px;
        color: #000;
        font-size: 30px;
        font-weight: bold;
    }
    .indexTitle h3 {
        width: 94%;
        height: auto;overflow:hidden;
        line-height: 25px;
        color: #999;
        font-size: 14px;
        margin:0 auto;
    }
.indexProductList{
    width:100%;
    height:auto;overflow:hidden;
}
.indexProductList li{
    width:33.33%;float:left;
    margin:10px 0px 20px 0px;
    position:relative;
    height:350px;overflow:hidden;
    text-align:center;
}
    .indexProductList li div{
        width:84%;
        height:50px;line-height:50px;
        background:rgba(35,95,165,0.5);
        position:absolute;
        bottom:30px;
        left:8%;
        border-radius:25px;
        text-align:center;
        font-size:16px;
        color:#fff;
        transition:all 0.5s;
    }
    .indexProductList li div a{color:#fff;}

    .indexProductList li img {
        width: 94%;
        height: 280px;
        border-radius: 20px;
        box-shadow: 0 0 10px #ccc;
        transition: all 0.5s;
        margin-top:10px;
    }
    .indexProductList li:hover div{
        background: rgba(35,95,165,0.8);
    }
    .indexProductList li:hover img {
        box-shadow: 0 0 10px #8bb9ef;
        margin-top: 20px;
    }

.indexAbout {
    width: 100%;
    height: auto;
    overflow: hidden;
    background-color: #235fa5;
    background-image:url(../Images/IndexAboutBg.jpg);
    background-position:center;
    padding:100px 0;
}
.indexAboutPic{
    width:47%;float:left;
    margin-right:3%;
}
.indexAboutPic img{
    width:100%;
    border-radius:20px;
}
.indexAboutContent{
    width:50%;float:left;
}
.indexAboutContent h2{
    width:100%;
    height:40px;line-height:40px;
    color:#fff;
    font-size:30px;
    font-weight:bold;
}
.indexAboutContent h3{
    width:100%;
    height:auto;overflow:hidden;
    line-height:25px;
    color:#fff;
    font-size:14px;
    margin:30px auto;
}
    .indexAboutContent a {
        display: inline-block;
        padding: 5px 30px;
        background-color: #f4faff;
        color:#235fa5;
        border-radius:20px;
        transition:all 0.5s;
    }
        .indexAboutContent a:hover {
            background-color: #76abe8;
            color: #fff;
        }

.indexAboutList li{
    width:24%;float:left;
    color:#fff;
    margin-left:1%;
    text-align:center;
}
    .indexAboutList li div {
        width: 80px;
        height: 80px;
        background-color: #76abe8;
        border-radius:20px;
        transition:all 0.5s;
        margin:0 auto;
    }
.indexAboutList li h2{
     width: 100%;
    display:inline-block;
    line-height:25px;
    padding-top:10px;
    font-size:16px;
}
.indexAboutList li:hover div{
    border-radius:30px;
}

.indexNews{
    width:100%;
    height:auto;overflow:hidden;
}
.indexNews li{
    width:26%;
    display:inline-block;
    margin:10px 1% 20px 1%;
    padding:20px 2%;
    border-radius:10px;
    border:1px solid #eee;
    box-shadow:0 0 10px #ccc;
    transition:all 0.5s;
    height:auto;overflow:hidden;
}
.indexNews li:hover{
    box-shadow:0 0 10px #76abe8;
    margin:0 1% 30px 1%;
}
.indexNews li h2{
    width:100%;
    height:50px;overflow:hidden;
    line-height:25px;
    font-size:18px;
    border-bottom:1px solid #f2f2f2;
    margin-bottom:10px;
    padding-bottom:5px;
}
.indexNews li h3{
    width:100%;
    height:60px;line-height:20px;overflow:hidden;
    font-size:12px;
    color:#999;
}
.indexNews li div{
    width:100%;
    text-align:right;
}
.indexNews li div span{
    padding:5px 10px;
    border:1px solid #034582;
    border-radius:20px;
    font-size:12px;
    color:#034582;
    transition:all 0.5s;
}
.indexNews li div span:hover{
    background-color:#034582;
    color:#fff;
}

.indexMore{
    width:100%;
    text-align:center;
    line-height:20px;
}
.indexMore a{
    display:inline-block;
    padding:10px 40px;
    background-color:#235fa5;
    border-radius:30px;
    color:#fff;
    margin:10px 0;
    transition:all 0.5s;
}
    .indexMore a:hover{
        background-color:#76abe8;
        box-shadow:0 0 10px #93b9e5;
    }

@media(max-width:720px){

    .indexProductList{
        width:100%;
        height:auto;overflow:hidden;
    }
    .indexProductList li{
        width:100%;
        height:310px;
    }
        .indexProductList li div{
            bottom:10px;
        }

        .indexProductList li img {
            height: 260px;
        }

    .indexAbout {
        width: 100%;
        height: auto;
        overflow: hidden;
        background-color: #235fa5;
        background-image:url(../Images/IndexAboutBg.jpg);
        background-position:center;
        padding:40px 0;
    }
    .indexAboutPic{
        width:100%;float:left;
        margin-right:0;
        margin-bottom:20px;
    }
    .indexAboutContent{
        width:100%;float:left;
    }
    .indexAboutContent h2{
        width:100%;
        height:30px;line-height:30px;
        color:#fff;
        font-size:30px;
        font-weight:bold;
    }
    .indexAboutContent h3{
        margin:20px auto;
    }

    .indexAboutList li{
        width:48%;float:left;
        color:#fff;
        margin-left:1%;
        margin-bottom:10px;
    }

    .indexAboutList li h2{
        font-size:14px;
        padding-top:0;
        height:60px;overflow:hidden;
        line-height:20px;
    }

    .indexNews li{
        width:92%;
        display:inline-block;
        margin:10px 1% 20px 1%;
        padding:20px 2%;
        border-radius:10px;
        border:1px solid #eee;
        box-shadow:0 0 10px #ccc;
        transition:all 0.5s;
        height:auto;overflow:hidden;
    }
    .indexNews li h2{
        width:100%;
        height:50px;overflow:hidden;
        line-height:25px;
        font-size:16px;
        border-bottom:1px solid #f2f2f2;
        margin-bottom:10px;
    }
    .indexNews li h3{
        width:100%;
        height:60px;line-height:20px;overflow:hidden;
        font-size:12px;
        color:#999;
    }
    .indexNews li div{
        width:100%;
        text-align:right;
        margin-top:10px;
    }
    .indexNews li div span{
        padding:5px 10px;
        border:1px solid #034582;
        border-radius:20px;
        font-size:12px;
        color:#034582;
        transition:all 0.5s;
    }
}