@charset "utf-8";
/* ===================首页样式========================== */
.banner{width: 100%;overflow: hidden;position: relative;}
.banner-image{width: 100%;}
.banner-image img{width: 100%;}
.banner-image img.none-mb{height: calc(100vh - 80px);}
.banner-image img.none-pc-pad{min-height: 400px;}
.banner-cont{position: absolute;z-index: 2;width: 100%;height: 100%;top: 0;left: 0;color: #fff;text-align: center;}
.banner-cont .text{line-height: 1.1;}
.banner-cont .title{line-height: 1.1;letter-spacing: 12px;}
/* -- */
.banner-prev, .banner-next{position: absolute;z-index: 4;width: 100px;height: 100px;border-radius: 50%;background-color: rgba(0, 0, 0, .3);top: 50%;margin-top: -50px;cursor: pointer;transition: all .4s ease;overflow: hidden;}
.banner-prev{left: 60px;}
.banner-next{right: 60px;}
.banner-prev::before, .banner-next::before{content: "";position: absolute;opacity: 0.5;width: 100%;height: 100%;top: 0;left: 0;background-repeat: no-repeat;background-position: center;transition: all .4s ease;}
.banner-prev::before{background-image: url('../images/index/bannerArrL.png');}
.banner-next::before{background-image: url('../images/index/bannerArrR.png');}
.banner-prev:hover, .banner-next:hover{background-color: #000;}
.banner-prev:hover::before, .banner-next:hover::before{opacity: 1;}
/* -- */
.banner .swiper-pagination{bottom: 40px;}
.banner .swiper-pagination-bullet{width: 60px;height: 2px;background: rgba(255, 255, 255, .3);opacity: 1;margin: 0 0 0 10px !important;position: relative;border-radius: 0;}
.banner .swiper-pagination-bullet:first-child{margin-left: 0 !important;}
.banner .swiper-pagination-bullet:before{content: "";width: 0;height: 100%;background: #fff;position: absolute;top: 0;left: 0;}
.banner .swiper-pagination-bullet-active.swiper-pagination-bullet:before{animation: bulletLine 4s linear both .8s;}
.banner .swiper-pagination-bullet-active.oneBullet:before{animation: bulletLine 3.8s linear both 0s;}
@keyframes bulletLine{0%{width: 0;}100%{width: 100%;}}
/* 效果 */
.banner-cont .text, .banner-cont .title{opacity: 0;}
.swiper-slide-active .banner-cont .text{animation: bannerDown 1s ease both .9s;}
.swiper-slide-active .banner-cont .title{animation: bannerUp 1s ease both 1s;}
.oneSlide .banner-cont .text{animation: bannerDown 1s ease both .4s;}
.oneSlide .banner-cont .title{animation: bannerUp 1s ease both .5s;}
@keyframes bannerDown{0%{opacity: 0;transform: translateY(-60px);filter: blur(4px);}100%{opacity: 1;transform: translateY(0);filter: blur(0);}}
@keyframes bannerUp{0%{opacity: 0;transform: translateY(60px);filter: blur(4px);}100%{opacity: 1;transform: translateY(0);filter: blur(0);}}
.section{width: 100%;position: relative;overflow: hidden;}
/* indfa */
.listBox ul{margin-left: -6px;}
.listBox li{width: 160px;height: 450px;margin-left: 6px;position: relative;overflow: hidden;}
.listBox li.active{width: calc(100% - 160px*4 - 6px*5);}
.listBox li img {height: 100%;position: absolute;max-width: none;object-fit: fill;top: 0;left: 50%;right: 0;margin: 0 auto;transform: translateX(-50%);}
/* .listBox li img{width: 100%;} */
/* .listBox li.active img{width: 100%;} */
.listBox li .about .text2{padding-bottom: 30px;}
.listBox li .about .line {background-color: #835f49;width: 60px;height: 2px;margin-bottom: 220px;}
.listBox li .about .indbtn{position: static;display:block;}
.listBox li .about{position: absolute;top: 30px;padding: 0px;color: #fff;left: calc(50% - 15px);}
.listBox li .text3 {opacity: 1;width: 0px;position: absolute;top: 25px;line-height: 32px;left: 60px;transition: all .7s ease;}
.listBox li .text1,.listBox li .text2,.listBox li .line,.listBox li .indbtn{opacity: 0;}
.listBox li.active .text1,.listBox li.active .text2,.listBox li.active .text2,.listBox li.active .line,.listBox li.active .indbtn{opacity: 1;animation: listBoxTetx .7s ease both .4s;}
@keyframes listBoxTetx{0%{opacity: 0;transform: translateY(60px);filter: blur(4px);}100%{opacity: 1;transform: translateY(0);filter: blur(0);}}
/* .listBox li.active img{left: 0px;} */
.listBox li.active .text3{opacity: 0;width: min-content;position: absolute;top: 30px;left: 0px;}
.listBox li.active .about{position: absolute;top: 0px;padding: 60px 50px;color: #fff;width: 100%;height: 100%;left: 0px;}
/*  */
.indbtn{width: 100%;display: flex;justify-content: center;}
.indbtn>div{}
.indbtn .text{color: #835f49;width: max-content;position: relative;padding-bottom: 10px;}
.indbtn .text i{background-image: url(../images/index/indbtn.png);width: 20px;height: 20px;display:inline-block;background-repeat: no-repeat;transform: translateY(5px);margin-left: 10px;}
.indbtn .text::before{content: "";width: 0%;height: 2px;background-color:#835f49;position: absolute;bottom: 0px;transition: all .4s ease;}
.indbtn .text:hover:before{width: 100%;}
/*  */
.indfa{background: #fff;}
.indfa .content {display: flex;justify-content: center;padding-top: 57px;padding-bottom: 57px;}
.indfa .content .text{width: 900px;}
.indfa .indfa-swiper {margin-top: 100px;display: flex;position: relative;z-index: 99;}
.indfa .indfa-swiper>.img{height: 620px;width: 810px;box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.5);overflow: hidden;}
.indfa .indfa-swiper>.img img{height: 620px;width: 100%;}
.indfa .indfa-swiper>.img .swiper-container{height: 100%;}
.indfa .indfa-swiper>.title{padding: 80px 0px;width: 750px;position: absolute;right: 0px;height: 100%;z-index: 999;}
.indfa .indfa-swiper>.title .back{background-color: #835f49;height: 100%;width: 100%;padding-top: 95px;padding-left: 140px;color: #fff;box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.5);}
.indfa .indfa-swiper>.title .back .text1{padding-top: 50px;}
.indfa .indfa-swiper>.title .back .btn{margin-top: 20px;position: relative;}
.indfa .swiper-pagination-bullet {width: 12px;height: 12px;display: inline-block;border-radius: 100%;background: rgba(255, 255, 255, .3);margin-right: 14px;}
.indfa .swiper-pagination{position:static;}
.indfa .swiper-pagination-bullet-active {background: #fff;}
.indfa .swiper-button-next{background-image: url(../images/index/indbtn-bai.png);background-repeat: no-repeat;width: 20px;height: 20px;background-size: 20px;position: absolute;left: 140px;bottom: 3px;top: auto;}
/* indfw */
.indfw{background: #fff;}
.indfw-bg{width: 100%;position: absolute;width: 100%;height: 100%;top: 0;left: 0;}
.indfw .contain{position: relative;z-index: 4;}
.indfw .content {display: flex;justify-content: center;padding-top: 57px;padding-bottom: 57px;}
.indfw .content .text{width: 900px;color: #fff;}
.indfw .indbtn{width: 100%;display: flex;justify-content: center;}
.indfw .indbtn .text{color: #fff;width: max-content;position: relative;padding-bottom: 10px;}
.indfw .indbtn .text i{background-image: url(../images/index/indbtn-bai.png);width: 20px;height: 20px;display:inline-block;background-repeat: no-repeat;transform: translateY(5px);margin-left: 10px;}
.indfw .indbtn .text::before{content: "";width: 0%;height: 2px;background-color: #fff;position: absolute;bottom: 0px;transition: all .4s ease;}
.indfw .indbtn .text:hover:before{width: 100%;}
.indfw .list{margin-top: 50px;border: 20px solid #fff;background-color: #fff;box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.5);}
.indfw .list ul{flex-wrap: nowrap;}
/* indal */
.indal{background: #f8fafd;position: relative;}
.indal .list{display: flex;flex-wrap: wrap;margin-top: 80px;}
.indal .list .list-muen{position: relative;transition: all .4s ease;width: calc(50% - 40px);margin-right: 80px;margin-bottom: 80px;overflow: hidden;box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.3);z-index: 33;}
.indal .list .list-muen img{width:100%;transition: all .6s ease;}
.indal .list .list-muen:hover .back .text1{color: #835f49;}
.indal .list .list-muen:nth-child(2n){margin-right: 0px;}
.indal .list .list-muen:hover{box-shadow: 0px 0px 15px 0px rgba(15, 1, 1, 0.1);}
.indal .list .list-muen:hover img{transform: scale(1.1);}
.indal .list .list-muen:hover .back .indbtn{opacity: 1;}
.indal .list .list-muen .back{position: absolute;bottom: 0px;width: 500px;left: 0px;background-color: #fff;padding: 30px;}
.indal .list .list-muen .back .text1{margin-bottom: 15px;transition: all .4s ease;}
.indal .list .list-muen .back .indbtn{justify-content: flex-start;opacity: 0;transition: all .4s ease;}
/* indzz (common) */
/* indxw */
.indxw{background: #fff;}
.indxw .list{margin-top: 60px;}
.indxw .list li{width: calc(33.333% - (35px/2));margin-right: 26px;box-shadow: 0px 0px 15px 0px rgba(5, 5, 5, 0.1);}
.indxw .list li:nth-child(3n){margin-right: 0px;}
.indxw .list li .text1{padding-bottom: 10px;}
.indxw .list li .text2{padding-bottom: 20px;transition: all .4s ease;}
.indxw .list li .indbtn{justify-content: flex-start;}
.indxw .list li:hover .text2{color: #835f49;}
.indxw .list li>a .img{overflow: hidden;}
.indxw .list li>a .img>img{transition: all .6s ease;width: 100%;height: 325px;}
.indxw .list li>a:hover .img>img{transform: scale(1.1);}
.indxw .list li .content{padding: 30px;}

.indweiy{background: url(../images/index/indfa-bg.jpg)center no-repeat;background-size: cover;width: 100%;position: relative;}
.indfw .commonTitle .bg{color: rgba(255, 255, 255, .1);}
.indzz .commonTitle .bg{color: rgba(255, 255, 255, .1);}
.indzz{background: url(../images/index/indzz-bg.jpg)center no-repeat;background-size: cover;width: 100%;position: relative;}
.indzz .contain{width: 100%;margin: 0px;}
.indzz .back-imgbox{width: 100%;bottom: -10px;}
.indzz .back-imgbox img{width: 100%;}
.indzz .commonTitle .title{color: #fff;}
.indzz .commonTitle  .line{background-color: #fff;}
.indzz .swiper-wrapper {transition-timing-function: linear;margin: 0 auto;}
.indzz .indzz-ltert .btn{display: none;}
.indfa{position: relative;}
.proobf-granule {width: 100%;height: 100%;position: absolute;top: 20%;left: 0px;}

.indal .list .list-muen .btn{position: absolute;display: flex;justify-content: center;align-items: center;top: 0px;left: 0px;width: 100%;height: 100%;}
.indal .list .list-muen .btn div{width: 100px;height: 100px;border-radius: 100%;background-color: #835f49;display: flex;align-items: center;justify-content: center;transition: all .4s ease;opacity: 0;}
.indal .list .list-muen .btn div i{font-size: 30px;color:#fff;}
.indal .list .list-muen .btn div:hover{transform: rotate(-45deg);}
.indal .list .list-muen:hover .btn div{opacity: 1;}

.listBox li img{width: 600px;transition: all .4s ease;}
.listBox li.active img{width: 100%;}

.indal .bg1{position: absolute;top: -200px;left: 0px;}
.indal .bg2{position: absolute;bottom: 0px;right: 0px;}
.indal .bg3{position: absolute;right: 100px;top: 300px;z-index: 1;transition: all .4s linear;}

.indxw{background: url(../images/index/indxw-bg.jpg)center no-repeat;background-size: cover;}
.indxw .list li .content{background-color: #fff;}

.indzz .indzz-ltert .img {height: 360px;max-height: 480px;}
.indzz .indzz-ltert .img>img{object-fit: contain;}

.indzz .back-imgbox {
    width: 100%;
    bottom: 10px;
}
.indfa .indfa-swiper>.title .back{position: relative;}
.indfa .indfa-swiper>.title .back .bg{position: absolute;left: 200px;top: 0px;}




/* -------------------------PC端--------------------------- */
@media all and (max-width:1700px) {
    /* 1600 × (900) */
    .indal .bg3 {right: 0px;top: 150px;}
    
}
@media all and (max-width:1599px) {
    /* 1440 × (700)  */
    .indfa .indfa-swiper>.title {padding: 60px 0px;width: 625px;}
    .indfa .indfa-swiper>.title .back {padding-top: 70px;padding-left: 95px;}
    .indfa .indfa-swiper>.title .back .btn {margin-top: 70px;}
    .indfa .indfa-swiper {margin-top: 80px;}
    .indal .list {margin-top: 60px;}
    .indal .list .list-muen .back {width: 400px;padding: 30px;}
    .indzz .indzz-ltert .swiper-button-next {right: 40%;}
    .indzz .indzz-ltert .swiper-button-prev {left: 40%;}
    .indxw .list li>a .img>img{height: 270px;}
    .indzz .back-imgbox {width: 100%;bottom: 35px}
    .indzz {padding-bottom: 55px;}

}
@media all and (max-width:1439px) {
    /* 1360 */
}
@media all and (max-width:1359px) {
    /* 1280 */
}
@media all and (max-width:1279px) {
    /* 1152 × (700) */
    .indfa .indfa-swiper>.title {padding: 105px 0px;width: 455px;}
    .indfa .indfa-swiper>.title .back {padding-top: 50px;padding-left: 65px;}
    .listBox li.active .about {padding: 20px 35px;}
    .listBox li {width: 100%;}
    .listBox li.active {width: 100%;}
    .listBox li.active .about {padding: 20px 75px;}
    .indfw .list .listBox{width: 100%;}
    .indfw .list ul {flex-wrap: wrap;}
    .listBox li .about .line {margin-bottom: 265px;}
    .indal .list .list-muen {width: calc(50% - 10px);margin-right: 20px;margin-bottom: 20px;}
    .indal .list .list-muen .back {position: static;width: 100%;}
    /* .indal .list .list-muen:nth-child(2n) {transform: translateY(50px);} */
    .indal .indbtn.bot {margin-top: 55px;}
    .indxw .list li>a .img>img{height: 220px;}
    .indzz .back-imgbox {width: 100%;bottom: 50px;}
    .listBox li img{width: 100%;}
    .indfa .indfa-swiper>.img{height: 500px}
    .indfa .indfa-swiper>.img img{height: 500px;}
}
@media all and (max-width:1151px) {
    /* 1024 */
}
/* ------------------------手机端-------------------------- */
@media all and (max-width:1000px) {
    /* 平板设备 720 适配 */
    .indxw .list li>a .img>img {height: 150px;}
}
@media all and (max-width:640px) {
    /* 移动终端以上 360 适配 */
    .banner-prev{display: none;}
    .banner-next{display: none;}
    .indfa .content {padding-top: 25px;padding-bottom: 25px;}
    .indfa .indfa-swiper>.img {height: auto;width: 100%;}
    .indfa .indfa-swiper>.title {width: 100%;position: static;right: auto;height: 100%;padding: 0px 0px;}
    .indfa .indfa-swiper {flex-wrap: wrap;margin-top: 20px;}
    .indfa .indfa-swiper>.title .back {height: 100%;width: 100%;padding:35px;}
    .indfa .indfa-swiper>.title .back .text1 {padding-top: 20px;}
    .indfw .content {padding-top: 20px;padding-bottom: 25px;}
    .indfw .list {margin-top: 15px;border: 5px solid #fff;}
    .listBox li {width: 100%;height: 280px;margin-bottom: 2px;}
    .indfw .list ul {flex-wrap: wrap;}
    .listBox li.active {width: 100%;}
    .listBox li.active .about {padding: 20px 15px;}
    .listBox li .about .text2 {padding-bottom: 15px;}
    .listBox li .about .line {margin-bottom: 125px;}
    .listBox li .text1, .listBox li .text2, .listBox li .line, .listBox li .indbtn {opacity: 1;}
    .listBox li .text3{display: none;}
    .listBox li .about {top: 0px;padding: 20px 15px;left: auto;}
    .indal .list .list-muen {width: 100%;margin-right: 0px;margin-bottom: 20px; box-shadow: 0px 0px 15px 0px rgba(15, 1, 1, 0.1);}
    .indal .list .list-muen .back {position: static;width: 100%;padding: 15px;}
    .indal .list .list-muen .back .indbtn{opacity: 1;}
    .indal .list .list-muen:nth-child(2n) {transform: translateY(0px);}
    .indal .list {margin-top: 25px;}
    .indal .indbtn.bot {margin-top: 15px;}
    .indzz .indzz-ltert .swiper-button-next {right: 30%;}
    .indzz .indzz-ltert .swiper-button-prev {left: 30%;}
    .indxw .list li {width: 100%;margin-right: 0px;margin-bottom: 10px;box-shadow: 0px 0px 15px 0px rgba(15, 1, 1, 0.1);}
    .indxw .list li .text2 {padding-bottom: 10px;}
    .indxw .list li .content{padding: 0px 15px;}
    .indxw .list {margin-top: 25px;}
    .indxw .list li>a .img>img {height: 300px;}
    .indzz .back-imgbox {width: 100%;bottom: 80px;}
    .indfa .indfa-swiper>.img img{height: 320px;}
    .banner-cont .title {line-height: 1.1;letter-spacing: 5px;font-size: 24px;}
    .swiper-slide-active .banner-cont .text{font-size: 18px;}

}
@media all and (min-width:3000px) and (max-width:5000px) {
    /* 1920设计稿 3840分辨率【所有宽度 × (3840÷1920 = 2)】【电脑缩放1920÷3840 = 50%】 */

}

/* -------------------------2k端--------------------------- */
@media all and (min-width:2000px) and (max-width:3000px) {
    /* 1920设计稿 2560分辨率【所有宽度 × (2560÷1920 ≈ 1.5)】【电脑缩放1920÷2560 = 75%】 */
    .indzz .back-imgbox{width: 100%;bottom: -18px;}
    .indzz .back-imgbox img{width: 100%;}
    .indal .bg3 {
        position: absolute;
        right: 390px;
        top: 300px;
        z-index: 1;
        transition: all .4s ease;
    }
}