.swiper-container {
    height: auto;

}

.swiper-container img {
    width: 100%;
    background: no-repeat top center;
}

#banner {
    width: 100%;
}

.news {
    padding-top: 30px;
    height: 650px;
}

.news .nav .left .title {
    font-size: 36px;
    font-weight: bold;
}

.news .nav .left .subtitle {
    font-size: 12px;
    margin-top: 5px;
    color: #999999;
}

.news .nav .right {
    width: 180px;
}

.news .nav .right div {
    color: #999999;
    font-size: 16px;
    cursor: pointer;
}

.news .nav .right .active {
    color: #3664AF;
}

.news .nav .right .active::before {
    content: '';
    width: 66px;
    height: 2px;
    background: #3664AF;
    position: absolute;
    left: 0;
    bottom: -5px;
}

.news .content {
    height: 446px;
    margin-top: 40px;
    position: relative;
}

.news .content .line-box {
    position: absolute;
    right: 0;
    width: 700px;
    height: 446px;
    border: 1px solid #F5F5F5;
    padding-left: 126px;
    padding-right: 42px;
}

.news .content .line-box .line {
    height: 87px;
    align-items: center;
}

.news .content .line-box .line .time div {
    text-align: center;
}

.news .content .line-box .line .right {
    margin-left: 32px;
}

.news .content .line-box .line .right .title {
    font-size: 18px;
    font-weight: bold;
}

.news .content .line-box .line .right .notice {
    font-size: 13px;
    margin-top: 16px;
    line-height: 22px;
    color: #333333;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}

.news .content .line-box .border {
    background: #F5F5F5;
    height: 2px;
}

.news .content .line-box .border::before {
    content: '';
    width: 56px;
    height: 2px;
    background: #3664AF;
    position: absolute;
    left: 0;
    bottom: 0px;
}

.news .content .images {
    position: absolute;
    left: 0;
    /*top: 10px;*/
    width: 578px;
    height: 446px;
    background: #999;
    z-index: 2;
}

.news .content .images .time {
    text-align: center;
    position: absolute;
    width: 120px;
    height: 80px;
    background: #3664AF;
    right: 0;
    flex-direction: column;
    color: #fff;
    top: 0;
}

.news .content .images .title-box {
    position: absolute;
    width: 100%;
    height: 107px;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    bottom: 0;
    padding: 15px 24px;
}

.news .content .images .title-box .left {
    width: 70%;
}

.news .content .images .title-box .title {
    font-size: 18px;
    font-weight: bold;
}

.news .content .images .title-box .subtitle {
    font-size: 13px;
    line-height: 22px;
    margin-top: 8px;
}

.news .content .images .title-box .button {
    width: 100px;
    height: 32px;
    border: 1px solid #FFFFFF;
    font-size: 14px;
    cursor: pointer;
}

.project {
    height: 700px;
    background: #230404;
    padding-top: 60px;
    padding-bottom: 60px;
    background: url('./../static/gcalbg.jpg');
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

.project {
    padding: 50px 0;
}

.project .title- {
    width: 600px;
    font-size: 36px;
}

.project .title- .name {
    flex-direction: column;
}

.project .title- .name::before {
    content: 'Enterprise honor';
    font-size: 12px;
    color: #fff;
    position: absolute;
    bottom: -20px;
}

.project .title- .line {
    width: 200px;
    height: 2px;
    background: #fff;
}


.project .menus .item {
    width: 300px;
    height: 60px;
    cursor: pointer;
    padding: 0 24px;
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 14px;
    margin-bottom: 12px;
}

.project .menus .item div:nth-child(1) {
    font-size: 30px;
}

.project .menus .active {
    background: #fff;
    color: #3664AF;
}

.project .swipers {
    width: 1200px;
    flex-direction: column;
}

.swiper-slide {}

.project .swipers .title {
    color: #fff;
    font-size: 16px;
    text-align: center;
    margin-top: 32px;
}

.project .swipers .subtitle {
    font-size: 12px;
    color: #fff;
    width: 600px;
    margin-top: 20px;
}

.project .swipers .button {
    width: 100px;
    height: 32px;
    border: 1px solid #FFFFFF;
    font-size: 14px;
    cursor: pointer;
    color: #fff;
    margin-top: 24px;
}

.project .titles {
    position: absolute;
    right: 0;
    top: 0;
    color: #fff;
}

.honor {
    padding: 50px  0 80px 0;
}

.honor .title {
    width: 600px;
    font-size: 36px;
}

.honor .title .name {
    flex-direction: column;
}

.honor .title .name::before {
    content: 'Enterprise honor';
    font-size: 12px;
    color: #999;
    position: absolute;
    bottom: -20px;
}

.honor .title .line {
    width: 200px;
    height: 2px;
    background: #3664AF;
}


.honor .button {
    width: 100px;
    height: 32px;
    border: 1px solid #3664AF;
    font-size: 14px;
    cursor: pointer;
    color: #3664AF;
    margin-top: 50px;
}

.swiper-container-honor {
    width: 1200px;
    margin-top: 60px;
    overflow: hidden;
}

.swiper-container-honor .swiper-slide {
    /* width: 249px; */
}

.swiper-container-honor .swiper-slide img {
    width: 100%;
    height: 169px;
}

.swiper-container-honor .swiper-slide .t {
    font-size: 14px;
    margin-top: 16px;
}


.super {
    padding: 0;
    height: 680px;
    background: #5D82BE;
    background: url('./../static/spln.jpg');
}

.super video{
    width: 100%;
    height: 515px;
}
.super .title {
    width: 600px;
    font-size: 36px;
}

.super .title .name {
    flex-direction: column;
    color: #fff;
}

.super .title .name::before {
    white-space: nowrap;
    content: 'Supervision performance';
    font-size: 12px;
    color: #fff;
    position: absolute;
    bottom: -10px;
}

.super .title .line {
    width: 200px;
    height: 2px;
    background: #fff;
}

.super .honor-swiper{
    margin-top: 40px;
}

.super .button {
    width: 100px;
    height: 32px;
    border: 1px solid #fff;
    font-size: 14px;
    cursor: pointer;
    color: #fff;
    margin-top: 50px;
}

.super .list {
    width: 100%;
    padding-top: 40px;
}

.super .items {
    width: 380px;
}

.super .items .topbg {
    width: 100%;
    height: 160px;
}

.super .items .topbg img {
    width: 100%;
    height: 100%;
}

.super .items .topbg .tag {
    position: absolute;
    width: 110px;
    height: 32px;
    background: rgba(0, 0, 0, 0.5);
    font-size: 14px;
    color: #fff;
    left: 0;
    top: 0;
    z-index: 2;
}

.super .items .line {
    font-size: 14px;
    margin-top: 16px;
    color: #fff;
}


.link .title .name::before {
    white-space: nowrap;
    content: 'Friend link';
    font-size: 12px;
    position: absolute;
    bottom: -20px;
}

.link .friendline {
    border: 1px solid #D8D8D8;
    width: 100%;
    margin-top: 60px;
}

.link .friendline .links {
    flex: 1;
    height: 100px;
    border-right: 1px solid #D8D8D8;
    font-size: 14px;
    color: #999;
}

.link .friendline .links img {
    width: 28px;
    height: 28px;
}

.link .friendline .links:last-child {
    border-radius: none;
}

.birsthDay {
    position: absolute;
    bottom: 5px;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 20;
    padding: 4px 0;
    width: 100%;
}

.birsthDay .left{
    animation: 20s wordsLoop linear infinite normal;
    color: #fff;
    font-size: 14px;
}
.birsthDay .right{
    color: red;
    cursor: pointer;
}

@keyframes wordsLoop {
    0% {
        transform: translateX(200px);
        -webkit-transform: translateX(200px);
    }

    100% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
    }
}

@-webkit-keyframes wordsLoop {
    0% {
        transform: translateX(200px);
        -webkit-transform: translateX(200px);
    }

    100% {
        transform: translateX(-100%);
        -webkit-transform: translateX(-100%);
    }
}