.menu a:first-child {
    background-color: #01b1ea;
    color: #E5E4DF;
}

@keyframes banner-swipe {
    0% {
        left: 0;
    }

    10% {
        left: 0;
    }

    20% {
        left: -1190px;
    }

    30% {
        left: -1190px;
    }

    40% {
        left: -2380px;
    }

    50% {
        left: -2380px;
    }

    60% {
        left: -3570px;
    }

    70% {
        left: -3570px;
    }

    80% {
        left: -4760px;
    }

    90% {
        left: -4760px;
    }

    100% {
        left: -5950px;
    }
}

.banner {
    margin: 0 auto;
    height: 400px;
    margin-bottom: 2em;
    position: relative;
    overflow: hidden;
    border-radius: 0.5em;
}

.banner-img-list {
    left: 0px;
    width: 7140px;
    display: block;
    position: absolute;
    animation: banner-swipe 30s infinite;
    display: flex;
    transition: all 1s;
}

.banner-img-list li {
    position: relative;
}

.banner a {
    position: absolute;
    cursor: pointer;
    display: block;
    width: 24px;
    height: 20px;
    z-index: 8;
    bottom: 2%;
}

.banner-point-1 {
    left: 88%;
}

.banner-point-2 {
    left: 90%;
}

.banner-point-3 {
    left: 92%;
}

.banner-point-4 {
    left: 94%;
}

.banner-point-5 {
    left: 96%;
}

.banner a:hover>.point {
    background-color: #01b1ea;
    border: #e2d8d2 3px solid;
    box-shadow: 1px 1px 1px grey; 
}

.banner-point-1:hover~.banner-img-list {
    animation: none;
    left: 0px; 
}

.banner-point-2:hover~.banner-img-list {
    animation: none;
    left: -1190px; 
}

.banner-point-3:hover~.banner-img-list {
    animation: none;
    left: -2380px;
}

.banner-point-4:hover~.banner-img-list {
    animation: none;
    left: -3570px;
}

.banner-point-5:hover~.banner-img-list {
    animation: none;
    left: -4760px;
}

.banner-title0,
.banner-title1 {
    z-index: 8;
    position: absolute;
    font-size: 2em;
    font-family: 'Open Sans Condensed';
    left: 725px;
    padding: 1em;
    border-radius: 0.2em;
}

.banner-title0 {
    top: 75px;
    background: #01b1ea;
    color: whitesmoke;
}

.banner-title1 {
    top: 145px;
    background: #01b0ea71;
    color: whitesmoke;
}



/* 主体文章布局 */
main {
    margin: 0 auto;
    border-bottom: thick double #bbb;
    display: flex;
    padding: 0 0 2em 0;
    justify-content: space-between;
}


.main-right1-title {
    color: #008eda;
    font-family: 'Open Sans Condensed';
   
    line-height: 1.2em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
    font-size: 26px;
}

.main-right1>ul>li {
    width: 260px;
    height: 76px;
    background-color: #01b1ea;
    padding: 20px;
    margin: 0px 0px 4px 0px;
    border-radius: 4px;
    display: flex;
}

.main-right1>ul>li>img {
    width: 74px;
    height: 74px;
    border: #dcdbd7 solid 1px;
    margin-right: 15px;
}

.main-right1-title {
    font-size: 18px;
    margin-bottom: 1em;
}

.main-right1 li .news-title {
    color: whitesmoke;
    font-style: italic;
    font-weight: normal;
    margin: 0 0 1em 0;
}

.main-right1 li .news-text {
    color: white;
}

/* 主体-左侧文章布局  */
.main-left1 {
    margin: 0 2em 0 0;
}

.main-left1-title,
.main-left2-title,
.imgfooter-title {
    color: #008eda;
    font-family: 'Open Sans Condensed';
   
    line-height: 1.2em;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
    font-size: 26px;
}

.main-left1-subtitle,
.main-left2-subtitle {
    font-size: 12px;
    line-height: 18px;
    color: #008edaa8;
    font-family: Georgia, "Times New Roman", Times, serif;
    margin-bottom: 1em;
    text-transform: none;
    font-style: italic;
    font-weight: normal;
}

.main-left1 section {
    margin-bottom: 3em;
}

.main-left2 {
    margin-top: 3em;
    border-top: 1px solid #bbb;
    padding-top: 3em;
    display: flex;
}

.main-left2-title {
    font-size: 18px;
}

.main-left2a {
    width: 50%;
}

.main-left2b {
    width: 50%;
}

.main-left2 li::before,
.main-left1 span {
    font-family: sans-serif;
    color: #008eda;
    content: '●';
    margin-right: 3px;
}

.imgfooter {
    margin: 1em auto 2em auto;
    position: relative;
    overflow: hidden;
    height: 350px;
}

.imgfooter-title {
    margin: 0 0 0.5em 0.5em;
}

.imgfooter-imglist {
    left: 0px;
    display: flex;
    width: 5950px;
    position: absolute;
    animation: imgfooter-swipe 30s infinite;
    transition: all 1s;
}

.imgfooter-imglist li {
    margin: 6px;
    padding: 12px;
    background-color: #dedfe1d5;
    border: 1px #fff solid;
    color: #01b1ea;
    border-radius: 6px;
}

.imgfooter-imglist li:hover {
    cursor: pointer;
    background-color: #01b1ea;
    color: white;
}

.imgfooter-imglist div {
    margin: 6px 0 0 0;
    text-align: center;
    font-size: 15px;
}

.imgfooter a {
    position: absolute;
    cursor: pointer;
    display: block;
    width: 24px;
    height: 20px;
    z-index: 8;
    top: 2%;
}

.point {
    margin: 4px 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #e2d8d2;
    border: #b3ae9c 3px solid;
    font-size: 0px;
}

.imgfooter-point-1 {
    left: 90%;
}

.imgfooter-point-2 {
    left: 92%;
}

.imgfooter-point-3 {
    left: 94%;
}

.imgfooter-point-4 {
    left: 96%;
}

.imgfooter a:hover>.point {
    background-color: #01b1ea;
    border: #e2d8d2 3px solid;
    box-shadow: 1px 1px 1px grey; 
}

.imgfooter-point-1:hover~.imgfooter-imglist {
    animation: none;
    left: 0px;

}

.imgfooter-point-2:hover~.imgfooter-imglist {
    animation: none;
    left: -1190px;

}

.imgfooter-point-3:hover~.imgfooter-imglist {
    animation: none;
    left: -2380px;

}

.imgfooter-point-4:hover~.imgfooter-imglist {
    animation: none;
    left: -3570px;

}

@keyframes imgfooter-swipe {
    0% {
        left: 0;
    }

    16% {
        left: 0;
    }

    28% {
        left: -1190px;
    }

    40% {
        left: -1190px;
    }

    52% {
        left: -2380px;
    }

    64% {
        left: -2380px;
    }

    76% {
        left: -3570px;
    }

    88% {
        left: -3570px;
    }

    100% {
        left: -4760px;
    }
}