.main .banner {
    width: 100%;
    max-height: 800px;
    position: relative;
    overflow: hidden
}

@media screen and (max-width: 1366px) {
    .main .banner {
        max-height: 520px
    }

    .main .banner .swiperbanner-container .swiperbanner-button-prev,
    .main .banner .swiperbanner-container .swiperbanner-button-next {
        width: 35px;
        margin-top: -35px
    }

    .main .banner .swiperbanner-container .swiperbanner-pagination {
        bottom: 62px !important
    }

    .main .banner .next-screen a {
        width: 38px !important
    }

    .main .banner .next-screen a::after {
        width: 38px !important;
        height: 28px !important
    }
}

.main .banner .swiperbanner-container {
    width: 100%;
    height: 100%
}

.main .banner .swiperbanner-container .swiper-slide {
    width: 100%;
    height: 100%
}

.main .banner .swiperbanner-container .swiper-slide .a-father {
    width: 100%;
    height: 100%
}

.main .banner .swiperbanner-container .swiper-slide .a-father .img-box {
    height: 100%
}

.main .banner .swiperbanner-container .swiper-slide .a-father .img-box img {
    width: 100%;
    height: 100%
}

.main .banner .swiperbanner-container .swiperbanner-pagination {
    position: absolute;
    z-index: 999;
    width: 100%;
    bottom: 85px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.main .banner .swiperbanner-container .swiperbanner-pagination .swiper-pagination-bullet {
    border-radius: 0px;
    width: 9px;
    height: 9px;
    background: #fff;
    -webkit-box-shadow: 0px 0px 8px rgba(95, 95, 95, 0.4);
    box-shadow: 0px 0px 8px rgba(95, 95, 95, 0.4);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    opacity: 1;
    margin-left: 5px
}

.main .banner .swiperbanner-container .swiperbanner-pagination .swiper-pagination-bullet-active {
    background: #351017
}

.main .banner .swiperbanner-container .swiperbanner-button-prev,
.main .banner .swiperbanner-container .swiperbanner-button-next {
    position: absolute;
    top: 50%;
    z-index: 999;
    max-width: 49px;
    max-height: 81px;
    margin-top: -50px
}

.main .banner .swiperbanner-container .swiperbanner-button-prev img,
.main .banner .swiperbanner-container .swiperbanner-button-next img {
    max-width: 100%;
    max-height: 100%;
    opacity: .3;
    -webkit-transition: all .6s;
    transition: all .6s
}

.main .banner .swiperbanner-container .swiperbanner-button-prev:hover img,
.main .banner .swiperbanner-container .swiperbanner-button-next:hover img {
    opacity: .8;
    -webkit-transition: all .6s;
    transition: all .6s
}

.main .banner .swiperbanner-container .swiperbanner-button-prev {
    left: 58px;
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg)
}

.main .banner .swiperbanner-container .swiperbanner-button-next {
    right: 58px
}

.main .banner .next-screen {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    position: absolute;
    bottom: 20px;
    z-index: 999
}

.main .banner .next-screen a {
    width: 53px;
    overflow: hidden;
    position: relative
}

.main .banner .next-screen a::after {
    top: 0;
    left: 0;
    -webkit-animation: flashing 1s infinite;
    animation: flashing 1s infinite;
    content: '';
    position: absolute;
    width: 53px;
    background: url("./../images/shansuo1.png");
    height: 39px;
    background-size: 100%
}

.main .banner .next-screen a img {
    -webkit-animation: flashing 1s infinite;
    animation: flashing 1s infinite;
    width: 100%
}

@media screen and (max-width: 1024px) {
    .main .banner .next-screen {
        display: none
    }
}

.main .vision {
    padding: 100px 0 40px 0;
    border-bottom: 1px solid #CFCFCF;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.main .vision .content {
    width: 1000px
}

.main .vision .content .text-top {
    width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background: url("./../images/index11.jpg") no-repeat 100%;
    background-position: right top;
    height: 525px
}

.main .vision .content .text-top .text-box {
    position: relative;
    z-index: 2
}

.main .vision .content .text-top .text-box .text h3 {
    font-size: 30px;
    color: #35323C;
    font-weight: bold;
    margin-bottom: 110px
}

.main .vision .content .text-top .text-box .text p {
    font-size: 16px;
    line-height: 26px;
    color: #505050;
    max-width: 600px;
    letter-spacing: 1.7px
}

@media screen and (max-width: 768px) {
    .main .vision .content .text-top .text-box .text p {
        color: #8B8A8D
    }
}

.main .vision .content .text-top .img-box {
    z-index: 1;
    max-width: 200px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end
}

.main .vision .content .text-top .img-box img {
    display: none;
    max-width: 500%
}

.main .vision .content .text-bottom {
    margin-top: 100px
}

.main .vision .content .text-bottom .text-box {
    position: relative;
    z-index: 2
}

.main .vision .content .text-bottom .text-box .text h3 {
    font-size: 30px;
    color: #35323C;
    font-weight: bold;
    margin-bottom: 100px
}

.main .vision .content .text-bottom .text-box .text p {
    font-size: 16px;
    line-height: 26px;
    color: #505050;
    max-width: 100%;
    letter-spacing: 1.7px
}

@media screen and (max-width: 768px) {
    .main .vision .content .text-bottom .text-box .text p {
        color: #8B8A8D
    }
}

.main .vision .content .text-bottom .img-box {
    -webkit-transform: translateY(-60px);
    transform: translateY(-60px);
    width: 100%;
    position: relative;
    z-index: 1
}

.main .vision .content .text-bottom .img-box img {
    max-width: 100%
}

@media screen and (max-width: 1000px) {
    .main .vision .content {
        width: 100%
    }
}

@media screen and (max-width: 768px) {
    .main .vision {
        padding: .8rem 0
    }

    .main .vision .content {
        width: 100%
    }

    .main .vision .content .text-top {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        width: 100%;
        background-image: url("./../images/index111.png");
        background-position: bottom center;
        background-size: 93%;
        height: auto;
        padding-bottom: 7rem;
    }

    .main .vision .content .text-top .text-box {
        padding: 0 .4rem;
        width: 100%;
    }

    .main .vision .content .text-top .text-box .text h3 {
        font-size: .426667rem;
        margin-bottom: .8rem
    }

    .main .vision .content .text-top .text-box .text p {
        font-size: .32rem;
        letter-spacing: 1px;
        text-align: justify;
        line-height: .64rem;
        max-width: 100%;
    }

    .main .vision .content .text-top .img-box {
        max-width: 100%;
        height: auto;
        overflow: hidden
    }

    .main .vision .content .text-top .img-box img {
        max-width: 100%;
        max-height: 100%
    }

    .main .vision .content .text-bottom {
        margin-top: .8rem
    }

    .main .vision .content .text-bottom .text-box .text {
        padding: 0 .4rem
    }

    .main .vision .content .text-bottom .text-box .text h3 {
        font-size: .426667rem;
        margin-bottom: .8rem
    }

    .main .vision .content .text-bottom .text-box .text p {
        font-size: .32rem;
        line-height: .64rem;
        text-align: justify;
    }

    .main .vision .content .text-bottom .img-box {
        padding: 0 .4rem;
        -webkit-transform: translateY(0px);
        transform: translateY(0px);
        width: 100%;
        position: relative;
        z-index: 1
    }

    .main .vision .content .text-bottom .img-box img {
        max-width: 100%
    }
}

@media screen and (max-width: 1000px) {
    .main .banner .swiperbanner-container .swiperbanner-pagination {
        bottom: .8rem !important
    }

    .main .banner .swiperbanner-container .swiperbanner-pagination .swiper-pagination-bullet {
        width: .10rem;
        height: .10rem;
        margin-left: .05rem
    }

    .main .banner .swiperbanner-container .swiperbanner-button-prev,
    .main .banner .swiperbanner-container .swiperbanner-button-next {
        position: absolute;
        top: 50%;
        z-index: 997;
        max-width: .4rem;
        max-height: .8rem;
        margin-top: -0.4rem
    }

    .main .banner .swiperbanner-container .swiperbanner-button-prev {
        left: .3rem
    }

    .main .banner .swiperbanner-container .swiperbanner-button-next {
        right: .3rem
    }

    .main .banner .next-screen {
        bottom: .213333rem
    }

    .main .banner .next-screen a {
        max-width: .533333rem
    }
}

@-webkit-keyframes flashing {
    0% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
        opacity: .2
    }

    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }

    100% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
        opacity: .2
    }
}

@keyframes flashing {
    0% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
        opacity: .2
    }

    50% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 1
    }

    100% {
        -webkit-transform: scale(0.9);
        transform: scale(0.9);
        opacity: .2
    }
}

/*# sourceMappingURL=index.css.map */