/*自定义swiper里的组件*/
.swiper-container { width: 100%; height: 800px; margin: 0 auto; overflow: hidden; position: relative; min-width: 1200px;} 
.swiper-wrapper { -webkit-transform: translateZ(0); transform: translateZ(0); }
.swiper-slide { width: 1200px; width: auto;}

/*swiperbutton组件*/
.swiper-container:hover .swiper-button-next, .swiper-container:hover .swiper-button-prev { opacity: 1; }
.swiper-container .swiper-button-next, .swiper-container .swiper-button-prev { width: 52px; height: 52px; background: transparent;
    color: #999; display: flex; justify-content: center; align-items: center; opacity: 0;}

.swiper-container .swiper-button-prev { right: 0; left: auto; top: 45%;
    height: 96px; width: 48px; border-top-left-radius: 8px;
    border-bottom-left-radius: 8px; cursor: pointer; border: none; }
.swiper-container .swiper-button-prev:hover { background-color: rgba(0,0,0,.3); }

.swiper-container .swiper-button-next { left: 0; right: auto; top: 45%;
    height: 96px; width: 48px; border-top-right-radius: 8px;
    border-bottom-right-radius: 8px; cursor: pointer; border: none;
}
.swiper-container .swiper-button-next:hover { background-color: rgba(0,0,0,.3); }
        
/*中间内容设置*/
.swiper-container a.banner-link{display: block; height: 100%; width: 100%; cursor: pointer; z-index: 300; position: absolute; top: 0; left: 0;}
.swiper-container .banner-content{ box-sizing:border-box; position: relative; height: 100%; width: 100%; padding-top: 112px;
text-align: center; color: #fff; background-position: center center; background-repeat: no-repeat; background-size: auto 800px;
background-color: #ededed;
}

.banner-txt { z-index: 250; margin: auto; width: 694px; position: relative; transition:all .6s ease; }
.banner-txt h1 { color: #d9d9d9; font-size: 20px; font-weight: 300; opacity:0;}
.banner-txt h2 { color: #fff; font-size: 32px; font-weight: 300; margin-top: 8px; margin-bottom: 8px; opacity:0;}
.banner-txt span { font-weight: 700; }
.banner-txt h3 { color: #fff; font-size: 24px; font-weight: 500; opacity:0;}

.banner-btn-box { margin-top: 29px; display: inline-flex; justify-content: center; position: relative; z-index: 400;  opacity:0;}
.banner-btn-box .banner-btna { border-radius: 50px; border: 1px solid #FFF; 
    display: flex; align-items: center; padding:8px 16px; margin: 0 8px; ;}
.banner-btna .banner-btna-txt { color: #fff; font-size: 14px; font-weight: 400; }
.banner-btna .banner-btna-img { width: 16px; height: 16px; margin-left: 8px;}
.banner-btna:hover { background: rgba(255, 255, 255, 0.2); }
/*定义动作*/
@keyframes  movesw {
    from { transform: translateY(-100%) translateZ(0);}
    to { transform: translateY(0) translateZ(0); }
}
@keyframes  movesw1 {
    from { transform: translateY(-140%) translateZ(0);}
    to { transform: translateY(0) translateZ(0); }
}
@keyframes  movesw2 {
    from { transform: translateY(-330%) translateZ(0);}
    to { transform: translateY(0) translateZ(0); }
}
@keyframes  movesw3 {
    from { transform: translateY(-480%) translateZ(0);}
    to { transform: translateY(0) translateZ(0); }
}
/*设置active*/
.swiper-container .swiper-wrapper .swiper-slide-active .banner-txt h1 { 
    opacity:1;
    animation: movesw .6s linear;
    transition:opacity .6s linear,transform .6s cubic-bezier(.215,.61,.355,1);
}
.swiper-container .swiper-wrapper .swiper-slide-active .banner-txt h2{ 
    opacity:1;
    animation: movesw1 .6s linear;
    transition:opacity .6s linear .1s,transform .6s cubic-bezier(.215,.61,.355,1) .1s;
}
.swiper-container .swiper-wrapper .swiper-slide-active .banner-txt h3{
    opacity:1;
    animation: movesw2 .6s linear;
    transition:opacity .6s linear .2s,transform .6s cubic-bezier(.215,.61,.355,1) .2s;
}

.swiper-container .swiper-wrapper .swiper-slide-active .banner-btn-box{
    opacity:1;
    animation: movesw3 .6s linear;
    transition:opacity .6s linear .3s,transform .6s cubic-bezier(.215,.61,.355,1) .3s;
}

/*第二层设置*/
.ind-swiper-thumbs { width: 220px; height: 110px; overflow: hidden; position: absolute; left: 50%; margin-left: -600px;top: 650px; z-index: 850; cursor: pointer;
   
}
.ind-swiper-thumbs .swiper-wrapper .ind-swiper-img {float: left; width: 30px; height: 40px; 
    justify-content: center; align-items: center; visibility: hidden;}
.ind-swiper-thumbs .swiper-wrapper .ind-swiper-img img { width: 2px; height: 14px; margin: 10px 14px;}

.ind-swiper-thumbs .swiper-wrapper .ind-swiper-txt {float: left;  width: 151px; height: 40px;  
    color: rgba(255, 255, 255, 0.7); font-size: 14px; font-weight: 200; padding-top: 6px; margin-left: 25px; 
}

.ind-swiper-thumbs .swiper-wrapper .swiper-slide-active .ind-swiper-img { visibility:visible; }
.ind-swiper-thumbs .swiper-wrapper .swiper-slide-active .ind-swiper-txt { color: #fff; font-weight: 500;}


/*banner list ul 一层*/
.index-banner-list { display: block; margin: 0; border: 0; }
.index-list { display: flex; flex-wrap: wrap; justify-content: space-evenly;}
.index-list li { position: relative; width: calc(50vw - 24px); height: 696px; background-size: cover; background-position: center;
    background-repeat: no-repeat; margin-top: 16px;
}
.index-list li .index-list-text { max-width: 520px; padding-top: 48px; margin: auto; text-align: center; }
.index-list li .index-list-text h5 { color: #8C8C8C; font-size: 20px; font-weight: 300; }
.index-list li .index-list-text h3 { color: #000000; font-size: 32px; font-weight: 700; margin: 6px auto;}
.index-list li .index-list-text h4 { color: #595959; font-size: 24px; font-weight: 400; }

.index-list-text .index-list-btn { width: 414px; height: 34px; display: inline-flex; justify-content: center; margin-top: 20px;}

.index-list-btn a { color: #000000; font-size: 16px; font-weight: 300; display: inline-flex; align-items: center;}
.index-list-btn a:hover { text-decoration: underline; cursor: pointer;}
.index-list-btn img { width: 16px; height: 16px; margin-right: 10px;}

/*swiper video 一层*/
.index-ban-video { position: relative; margin-top: 96px; height: 720px; }
.swiper-video { position: relative; height: 100%; margin: 0 auto; overflow: hidden;} /*630px*/
.swiper-video .swiper-wrapper { -webkit-transform: translateZ(0); transform: translateZ(0); }
.swiper-video .swiper-wrapper .swiper-slide { width: 1200px; width: auto; height: 720px;}
/*swiperbutton组件*/
.swiper-video .swiper-button-next, .swiper-video .swiper-button-prev { width: 52px; height: 52px; background:transparent; color: #999; border-radius: 50%; display: flex; justify-content: center; align-items: center; }
.swiper-video .swiper-button-prev { left: calc(50% - 570px); right: calc(50% - 570px); left: auto;}
.swiper-video .swiper-button-next { right: calc(50% - 570px); left: calc(50% - 570px); right: auto}
.swiper-video .swiper-button-next:hover, .swiper-video .swiper-button-prev:hover { background-color: rgba(0,0,0,.3); }
/*video设置*/
.swiper-video .video-box { position:relative; width:1200px; height:720px; }
.video-text {position: absolute; top: 0; z-index: 9999; 
    display: flex; flex-direction: column; align-items: center; left: 50%; transform: translateX(-50%); margin-top: 40px;
}
.video-text h2 { color: #fff; font-size: 40px; font-weight: 500; padding-bottom: 4px;}
.video-text h3 { color: #fff; font-size: 40px; font-weight: 500; padding-bottom: 4px; opacity:0;}
.video-text-btn { width: 414px; height: 34px; display: inline-flex; justify-content: center; opacity:0;}
.video-text-btn a { color: #fff; font-size: 16px; font-weight: 300; display: inline-flex; align-items: center;}
.video-text-btn a:hover { text-decoration: underline; cursor: pointer;}
.video-text-btn img { width: 16px; height: 16px; margin-right: 10px;}
/*定义video缓动*/
@keyframes  movetext {
    from { transform: translateY(-100%) translateZ(0);}
    to { transform: translateY(0) translateZ(0); }
}
@keyframes  movetext1 {
    from { transform: translateY(-140%) translateZ(0);}
    to { transform: translateY(0) translateZ(0); }
}
.swiper-video .swiper-wrapper .swiper-slide-active .video-text h3 { opacity:1; animation: movetext .6s ease; }
.swiper-video .swiper-wrapper .swiper-slide-active .video-text .video-text-btn{ opacity:1; animation: movetext1 .6s ease; }

.swiper-video .video-box .video-box-in { position:absolute; top: 0; left: 0; width: 100%; height: 100%; }
.swiper-video .video { width: 100%; height: 100%; object-fit: cover; }
/* video::-webkit-media-controls { display: none !important; } */
/*分页器设置*/
.swiper-pagination{ position: absolute;bottom: 48px;  z-index: 9999; display: flex; flex-direction: row; justify-content: center; }
.swiper-pagination .pagination-item { float: left; width: 16px; padding-bottom: 2px; cursor: pointer; 
    background-color: rgba(255, 255, 255, 0.3);}
.swiper-pagination .pagination-item { margin-left: 0; margin-right: 4px; }
.swiper-pagination .pagination-item.active { background-color:#fff; }


/*底部*/
.index-content { margin-top: 96px;}
.index-content .index-cont { width: 1200px; margin:auto; height: 100%;}
.index-cont .index-cont-txt { max-width: 693px; margin: auto; text-align: center; }
.index-cont .index-cont-txt .text-title { font-size: 40px; line-height: 44px; color: rgba(0,0,0,.85); text-align: center; font-weight: 600; }
.index-cont .index-cont-txt .text-cont { margin-top: 24px; font-size: 18px; line-height: 28px; color: rgba(0,0,0,.65); }

.index-cont .index-cont-list { margin-top: 48px; display: flex; justify-content: space-between; }
.index-cont .index-cont-list li { width: 592px; height: 592px; background-size: cover; background-position: center; background-repeat: no-repeat; 
    position: relative; text-align: center; }
.index-cont .index-cont-list li h6 { margin-top: 48px; font-size: 16px; font-weight: 400; line-height: 20px; color: rgba(0,0,0,.45); }
.index-cont .index-cont-list li h3 { margin-top: 8px; font-size: 32px; font-weight: 600; line-height: 40px; color: rgba(0,0,0,.85); margin-bottom: 16px;}

/*常见问题*/
.index-question { margin-top: 64px; padding: 64px 0; background-color: #f7f9fa; }
.index-question .ind-q-content { width: 1092px; margin: auto; }
.ind-q-content .q-content-list { display: flex; justify-content: space-between; align-items: flex-start; }
.ind-q-content .q-content-list .q-content-list-item { text-align: center; width: 282px; position: relative; }
.ind-q-content .q-content-list .q-content-list-item .icon { display: block; height: 72px; margin: auto; }
.ind-q-content .q-content-list .q-content-list-item .q-content-list-title { font-size: 24px; line-height: 36px; font-weight: 500; 
    color: rgba(0,0,0,.85); margin-top: 16px;
}