/*banner背景图片动画*/

@-webkit-keyframes scale-bg {

    from {

        -webkit-transform: scale(1.2);

        transform: scale(1.2);

    }

    to {

        -webkit-transform: scale(1);

        transform: scale(1);

    }

}



@keyframes scale-bg {

    from {

        -webkit-transform: scale(1.2);

        transform: scale(1.2);

    }

    to {

        -webkit-transform: scale(1);

        transform: scale(1);

    }

}



/*banner */

.index_main {

    background: #f7f7f7;

}



.index_main .section1 {

    position: relative;

}



.index_main .section1 .index_banner .item {

    background-size: cover;

    -webkit-background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    height: 100vh;

    position: relative;

}



.index_main .section1 .index_banner .item.slick-current .scaleBg {

    visibility: visible;

    -webkit-animation: scale-bg 6s linear forwards;

    animation: scale-bg 6s linear forwards;

}



.index_main .section1 .index_banner .items {

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    z-index: 0;

}



.index_main .section1 .index_banner .items:after {

    content: "";

    display: block;

    width: 100%;

    height: 100%;

    position: absolute;

    left: 0;

    top: 0;

    background: rgba(0, 0, 0, 0.2);

}



.index_main .section1 .index_banner .item .inner .block_txt {

    position: absolute;

    top: 48%;

    right: 10px;

    left: 10px;

    opacity: 0;

    transform: translateY(40px);

    -webkit-transform: translateY(40px);

    -webkit-transition: all 500ms ease;

    transition: all 500ms ease;

}



.index_main .section1 .index_banner .item .inner .block_txttt {

    position: absolute;

    top: 30%;

    right: 10px;

    left: 10px;

    opacity: 0;

    transform: translateY(40%);

    -webkit-transform: translateY(40%);

    -webkit-transition: all 500ms ease;

    transition: all 500ms ease;

}



.index_main .section1 .index_banner .item.active .inner .block_txt {

    opacity: 1;

    -webkit-transform: translateY(0);

    transform: translateY(0);

    -webkit-transition-delay: 100ms;

    transition-delay: 100ms;

}



.index_main .section1 .index_banner .item .inner .block_txt h4 {

    font-size: 30px;

    color: #fff;

    text-align: center;

    font-family: 'COCO';

}



.index_main .section1 .index_banner .item .inner .block_txt h2 {

    color: #fff;

    font-size: 57px;

    font-weight: bold;

    margin-bottom: 20px;

    text-align: center;

    letter-spacing: 5px;

}



.index_main .section1 .index_banner .item .inner .block_txt h2 span {

    color: #f5c920;

    display: inline-block;

    letter-spacing: 5px;

}



.index_main .section1 .index_banner .item .inner .block_txt h3 {

    color: #fff;

    font-size: 22px;

    text-align: center;

    margin-top: 10px;

    letter-spacing: 3px;

}



.index_main .section1 .slick_txt {

    width: 30%;

    height: 100%;

    background-color: transparent;

    transition: all 500ms ease;

    -webkit-transition: all 500ms ease;

    background-repeat: no-repeat;

    position: absolute;

    top: 0;

    font-size: 0;

    outline: none;

    border: 0;

}



.index_main .section1 .left {

    left: 0;

}



.index_main .section1 .right {

    right: 0;

}



.index_main .section1 .slick_txt:hover .slick_arrow {

    opacity: 1;

    visibility: visible;

}



.index_main .section1 .slick_txt .slick_arrow {

    width: 20px;

    height: 36px;

    background-repeat: no-repeat;

    background-position: center;

    margin-top: -18px;

    position: absolute;

    top: 50%;

    cursor: pointer;

    transition: all 500ms ease;

    -webkit-transition: all 500ms ease;

    opacity: 0;

    visibility: hidden;

}



.index_main .section1 .slick_txt .prev {

    background-image: url(../images/ban_prev.png);

    left: 60px;

}



.index_main .section1 .slick_txt .next {

    background-image: url(../images/ban_next.png);

    right: 60px;

}



.index_main .section1 .slick_txt .prev:hover {

    background-image: url(../images/ban_prev_hover.png);

}



.index_main .section1 .slick_txt .next:hover {

    background-image: url(../images/ban_next_hover.png);

}



.index_main .section1 .number {

    position: absolute;

    bottom: 8%;

    left: 50%;

    padding-bottom: 5px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.2);

    display: table;

    padding: 0 20px;

    width: auto;

    text-align: center;

    transform: translateX(-50%);

    -webkit-transform: translateX(-50%);

}



.index_main .section1 .number span {

    font-family: "Myriad Pro", "Microsoft YaHei";

    font-size: 14px;

    color: #fff;

    margin-right: 100px;

    display: inline-block;

    cursor: pointer;

    position: relative;

    transition: all 500ms ease;

    -webkit-transition: all 500ms ease;

}



.index_main .section1 .number span:last-child {

    margin-right: 0;

}



.index_main .section1 .number span:after {

    content: "";

    display: inline-block;

    width: 0;

    height: 2px;

    background: #fff;

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    -webkit-transform: translateX(-50%);

    bottom: -20px;

    opacity: 0;

    visibility: hidden;

    transition: all 500ms ease;

    -webkit-transition: all 500ms ease;

}



.index_main .section1 .number span.active:after {

    width: 100%;

    opacity: 1;

    visibility: visible;

}



.index_main .section2 {

    background: #03223a;

}



.index_main .section2 h3 {

    text-align: center;

}



.index_main .section3 {

    width: 100%;

    height: 100%;

    background: #03223a;

    background-size: 100% 100%;

}



.index_main .section3 h3 {

    text-align: center;

}



.index_main .section4 {

    background: #141526;

}



.index_main .section4 h3 {

}



@media only screen and (max-width: 1600px) {

    .index_main .section1 .index_banner .item .inner .block_txt h4 {

        font-size: 28px;

    }



    .index_main .section1 .index_banner .item .inner .block_txt h2 {

        font-size: 60px;

    }



    .index_main .section1 .index_banner .item .inner .block_txt h3 {

        font-size: 20px;

    }

}



@media only screen and (max-width: 1440px) {

    .index_main .section1 .index_banner .item .inner .block_txt h4 {

        font-size: 24px;

    }



    .index_main .section1 .index_banner .item .inner .block_txt h2 {

        font-size: 40px;

    }



    .index_main .section1 .index_banner .item .inner .block_txt h3 {

        font-size: 18px;

        margin-top: 5px;

    }

}



@media only screen and (max-width: 1366px) {

    .index_main .section1 .index_banner .item .inner .block_txt h4 {

        font-size: 20px;

    }



    .index_main .section1 .index_banner .item .inner .block_txt h2 {

        font-size: 26px;

    }



    .index_main .section1 .index_banner .item .inner .block_txt h3 {

        font-size: 16px;

    }



    .index_main .section1 .index_banner .slick-arrow {

        background-size: auto 30px;

    }

}



@media only screen and (max-width: 1300px) {



}



@media only screen and (max-width: 1199px) {

    .index_main .section1 .index_banner .item .inner .block_txt h4 {

        font-size: 18px;

    }



    .index_main .section1 .index_banner .item .inner .block_txt h2 {

        font-size: 22px;

    }



    .index_main .section1 .index_banner .item .inner .block_txt h3 {

        font-size: 14px;

    }

}



@media only screen and (max-width: 992px) {

    .index_main .section1 .index_banner .item {

        height: 100vh;

    }



    .index_main .section1 .index_banner .item .inner .block_txt {

        left: 0;

        right: 0;

        margin: 0 auto;

        padding: 0 20px;

        top: 42%;

    }



    .index_main .section1 .index_banner .slick-arrow {

        display: none !important;

    }



    .index_main .section1 .index_banner .slick-dots {

        position: absolute;

        bottom: 12px;

    }



    .index_main .section1 .index_banner .slick-dots li {

        width: 12px;

        height: 12px;

        border-radius: 50%;

        border: 2px solid #fff;

    }



    .index_main .section1 .index_banner .slick-dots li button {

        display: none;

    }



    .index_main .section1 .index_banner .slick-dots li.slick-active {

        background: #fff;

    }



    .index_main .section1 .number {

        bottom: 12%;

        display: none;

    }



    .index_main .section1 .number span {

        margin-right: 22px;

    }



    .index_main .section1 .number span:after {

        bottom: -14px;

    }



}



@media only screen and (max-width: 767px) {



}



@media only screen and (max-width: 340px) {



}



@media only screen and (max-width: 320px) {



}