@charset "utf-8";

/* ===================首页样式========================== */

.banner-lun {position: relative;}

.banner-lun > img{width: 100%;}

.banner-lun .content{position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;display: flex;align-items: center;}

.banner-control{position: absolute;width: 100%;left: 0;bottom: 80px;z-index: 3;color: #fff;}

.banner-control .contain{align-items: center;}

.banner-control .this{font-size: 17px;color: #c01f24;margin-left: 15px;}

.banner-control .leng{font-size: 14px;line-height: 15px;}

.banner-control span{font-size: 14px;color: #c01f24;margin: 0px 5px 0px 7px;}

.banner-control .line{width: 170px;height: 3px;background: rgba(255, 255, 255, .3);position: relative;}

.banner-control .line::after{content: "";position: absolute;width: 0;height: 100%;background: #c01f24;}

.banner-control .line.on::after{animation: bannerLine 4.6s linear both;}

.banner-control .line.one.on::after{animation: bannerLine 3.6s linear both;}

@keyframes bannerLine{0%{width: 0;}100%{width: 100%;}}

.banner-btn {position: absolute;z-index: 4;left: 0px;width: 100%;bottom: 80px;}

.banner-btn .contain{display: flex;justify-content: flex-end;}

.banner-btn .btn{color: #fff;font-size: 55px;transform: rotate(-90deg);animation: backTop .6s linear infinite alternate;}

@keyframes backTop{0%{transform:translateY(0px)rotate(-90deg);}100%{transform:translateY(10px)rotate(-90deg);}}

.banner-lun .content .name{opacity: 0;}

.banner-lun .content .title{opacity: 0;}

.banner-lun .content .IndBtn{opacity: 0;}

.swiper-slide-active .banner-lun .content .name{animation: bannerRun 1s ease both .9s;}

.swiper-slide-active .banner-lun .content .title{animation: bannerRun 1s ease both 1s;}

.swiper-slide-active .banner-lun .content .IndBtn{animation: bannerRun 1s ease both 1.1s;}

@keyframes bannerRun{0%{opacity: 0;transform: translateX(280px);filter: blur(4px);}100%{opacity: 1;transform: translateX(0);filter: blur(0);}}

.banner-code {position: absolute;bottom: 150px;left: 0px;width: 100%;z-index: 6;pointer-events: none;}
.banner-code .contain{width:100%;padding: 0 20px}
.banner-code-list {flex-direction: column;align-items:flex-end}

.banner-code-list .li{width: 34px;height: 34px;display: flex;justify-content: center;align-items: center;transition: all .4s ease;border-radius: 100px;background-color: #ffffff;color:#c01f24;font-size: 14px;margin-bottom: 9px;position:relative;pointer-events: auto;cursor: pointer;}

.banner-code-list .li:last-child{margin-bottom: 0px;}
.banner-code-list .li .imgs{display:none;width:140px;height:140px;position:absolute;right:40px;top:50%;margin-top:-70px;padding: 10px;background: #fff;border-radius: 10px;}
.banner-code-list .li .imgs img{width:100%;height:100%}
.banner-code-list .li:hover {color: #fff;background-color: #c01f24;}
.banner-code-list .li:hover .imgs{display:block}


.indcp {background-color: #fff;padding: 0px 160px;}

.indcp-list {display: flex;flex-direction: column;align-items: center;justify-content: center;height: 155px;}

.indcp-list .img{height: 55px;display: flex;align-items: center;}

.indcp-list .img img{max-height: 100%;}

.indcp-list .title{color: #7b7e86;}

.indcp-list:hover .title{color: #c01f24;}



.indpc {background: url(../images/index/indpc_bg.jpg) center no-repeat;background-size: cover;}

.indpc-svp .swiper-slide{height:auto}
.indpc-cont .cont-l{width: 50%;padding-right: 12px;height:740px}

.indpc-cont .cont-r{width: 50%;padding-left: 12px;display: flex;flex-direction: column;justify-content: space-between;}

.indpc-muen {background-color: #fff;width: 100%;height: 100%;position: relative;display: block;}

.indpc-muen .show{position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;padding: 35px;}

.indpc-muen:hover .show .title{color: #c01f24;}

.indpc-muen .img{height: 100%;width: 100%;display: flex;justify-content: center;align-items: center;padding: 30px;padding-top: 120px;}

.indpc-muen .img img{max-height: 220px;min-height: 200px;transition: all .4s ease;}
.indpc-cont .cont-l .indpc-muen .img img{max-height: 400px;}
.indpc-muen:hover .img img{transform: scale(1.04);}

.indpc-cont .cont-r .top,.indpc-cont .cont-r .bottom{height: calc(100%/2 - 12px);}

.indpc-cont .cont-r .img{padding-top: 80px;}

.indpc-list {margin-right: -24px;height: 100%;}

.indpc-list .list{width: calc(100%/2 - 24px);margin-right: 24px;}

.indpc-page {display: flex;justify-content: center;align-items: center;height: 20px;}


.swiper-pagination-bullet {width: 6px;height: 6px;background: #c5c6c7;opacity: 1;margin: 0px 20px;transition: all .4s ease;position: relative;}

.swiper-pagination-bullet::before {content: "";position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 20px;height: 20px;border: 2px solid #c01f24;border-radius: 100px;opacity: 0;transition: all .4s ease;}

.swiper-pagination-bullet-active {background: #c01f24;}

.swiper-pagination-bullet-active.swiper-pagination-bullet::before{opacity: 1;}



.cPa1{clip-path: polygon(85% 0, 100% 30%, 100% 100%, 0 100%, 0 0);}



.IndBtn {width: 145px;height: 40px;display: flex;justify-content: center;align-items: center;background-color: #c01f24;transition: all .4s ease;}

.IndBtn:hover {background-color: #c01f24;color: #fff;}



.IndBtn2 {width: 145px;height: 40px;display: flex;justify-content: center;align-items: center;background-color: #c01f24;position: relative;transition: all .4s ease;}

.IndBtn2::before{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);content: "";width: 141px;height: 36px;background-color: #fff;clip-path: polygon(85% 0, 100% 30%, 100% 100%, 0 100%, 0 0);transition: all .4s ease;}

.IndBtn2 span {position: relative;z-index: 3;}

.IndBtn2:hover{background-color: #c01f24;color: #fff;}

.IndBtn2:hover::before{background-color: #c01f24;}



.indfp {position: relative;}

.indfp > img{width: 100%;height: 100%;}

.indfp .content{position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;}

.indfp-cont {width: 550px;}

.indfp-cont .video{align-items: center;}

.indfp-cont .video span{margin-right: 12px;}

.indfp-list {position: absolute;bottom: 0px;left: 0px;width: 100%;border-top: 1px solid rgba(157, 91, 56, .2);}

.indfp-list .list{padding: 44px 40px;align-items: center;border-right: 1px solid rgba(157, 91, 56, .2);width: calc(100%/4);transition: all .4s ease;}

.indfp-list .list:last-child{border-right: 0px solid rgba(157, 91, 56, .2);}

.indfp-list .list .img{width: 45px;}

.indfp-list .list .img img{width: 100%;}

.indfp-list .list .cont{width: calc(100% - 45px);padding-left: 20px;}

.indfp-list .list .cont .hit span{margin-right: 10px;}

.indfp-list .list:hover {background-color: #c01f24;}



.indus-cont .cont-l{width: 70%;}

.indus-cont .cont-r{width: 30%;padding-left: 75px;padding-top: 120px;}

.indus-list {margin-right: -30px;margin-bottom: -30px;padding-bottom: 120px;}

.indus-list .list {width: calc(100%/2 - 30px);margin-right: 30px;margin-bottom: 30px;box-shadow: 0px 32px 33.12px 12.88px rgba(67, 67, 67, 0.06);padding: 30px 35px 38px 35px;position: relative;}

.indus-list .list .line{width: 28px;height: 2px;background-color: #c01f24;}

.indus-list .list .hit{align-items: center;justify-content: space-between;}

.indus-list .list img.bg{position: absolute;top: 0px;left: 0px;width: 100%;height: 100%;opacity: 0;transition: all .4s ease;}

.indus-list .list > div{position: relative;z-index: 2;}

.indus-list .list .text{color: #7f7f7f;}

.indus-list .list:hover {background-color: #000;}

.indus-list .list:hover img.bg{opacity: .5;}

.indus-list .list:hover .title{color: #fff;}

.indus-list .list:hover .text{color: #fff;}

.indus-list .list:nth-child(2) {transform: translateY(120px);}

.indus-list .list:nth-child(4) {transform: translateY(120px);}



.swiper-btn a{width: 45px;height: 45px;display: flex;align-items: center;justify-content: center;border: 2px solid #5d6066;font-size: 18px;transition: all .4s ease;}

.swiper-btn.next a{transform: rotate(180deg);}

.swiper-btn a:hover {background-color: #c01f24;color: #fff;border: 2px solid #c01f24;}



.indpe-cont {justify-content: space-between;align-items: center;}

.indpe-cont .cont-r .swiper-btn.next{margin-left: 10px;}

.indpe-svp {padding-left: calc((100% - 1400px) / 2);}

.indpe-svp .swiper-container {padding-right: 350px;}

.indpe-lun {position: relative;display: block;overflow: hidden;}

.indpe-lun > img{width: 100%;height: 560px;transition: all .4s ease;}

.indpe-lun:hover > img{transform: scale(1.04);}

.indpe-lun .show{position: absolute;bottom: 0px;left: 0px;width: 100%;height: 40%;background-image: linear-gradient(to top,rgba(0,0,0,1),rgba(0,0,0,0));padding: 0px 30px;padding-bottom: 60px;display: flex;flex-direction: column;justify-content: flex-end;z-index: 2;}

.indpe-lun .show .hit {align-items: center;}

.indpe-lun .show .hit .line{width: 50px;height: 3px;background-color: #fff;margin-right: 15px;}



.indns-cont {justify-content: space-between;align-items: center;}

.indns-muen .cont-l{width: 43%;}

.indns-muen .cont-r{width: 57%;padding-left: 115px;}

.indns-lun {background-color: #f8f9fb;display: block;}

.indns-lun .img{height: 340px;overflow: hidden;}

.indns-lun .img img{width: 100%;height: 100%;transition: all .4s ease;}

.indns-lun:hover .img img{transform: scale(1.04);}

.indns-lun .cont{padding: 35px 55px;}

.indns-lun .cont .title{color: #292929;}

.indns-lun:hover .cont .title{color: #c01f24;}

.indns-list {border-block: 1px solid #ededed;padding: 40px 0px;}

.indns-list .list .title{color: #292929;}

.indns-list .list:hover .title{color: #c01f24;}

.indns-list .list {margin-bottom: 60px;display: block;width: 100%;}

.indns-list .list:last-child {margin-bottom: 0px;}



.indar {background-color: #242424;}

.indar-cont .cont-l{width: 500px;padding-left: calc((100% - 1400px) / 2);padding-top: 60px;position: relative;z-index: 3;}

.indar-cont .cont-r{width: calc(100% - 500px);position: relative;}

.indar-muen {height: 470px;overflow-y: auto;}

.indar-muen::-webkit-scrollbar {width: 2px;}

.indar-muen::-webkit-scrollbar-thumb {background: #c01f24;}

.indar-muen::-webkit-scrollbar-track {background: #f1f1f1;}

.indar-muen a{padding: 16px 20px;display: flex;width: 100%;position: relative;}

.indar-muen a::before{content: "";position: absolute;left: 0px;top: 50%;transform: translateY(-50%);width: 2px;height: 0%;background-color: #c01f24;transition: all .4s ease;}

.indar-muen a.active::before{height: 100%;}

.indar-lun img{width: 100%;height: 100%;min-height: 745px;}

.indar-Chemistry {position: absolute;left: 0px;top: 0px;z-index: 3;width: 635px;height: 100%;background-color: rgba(255, 255, 255, .9);padding: 75px 90px;}

.indar-Chemistry-btn {justify-content: flex-end;}

.indar-Chemistry-btn .swiper-btn.next{margin-left: 10px;}

.indar-Chemistry .muen{display: none;}

.indar-Chemistry .muen.active{display: block;animation: indar-Chemistry .4s ease;}

@keyframes indar-Chemistry {0%{opacity: 0;}100%{opacity: 1;}}

.indar-Chemistry .muen .title{color: #2b2c2e;}

.indar-cont .cont-l .IndTitle .title{word-wrap: normal;width: max-content;}













/* -------------------------PC端--------------------------- */

@media all and (max-width:1700px) {

    /* 1600 × (900) */

}



@media all and (max-width:1590px) {

    /* 1440 × (700)  */

    .indcp {padding: 0px 65px;}

    .indcp-list {height: 130px;}

    /* .indpc-cont .cont-l {height: 660px;} */

    .indfp-list .list {padding: 40px 35px;}

    .indpe-svp {padding-left: calc((100% - 1200px) / 2);}

    .indpe-svp .swiper-container {padding-right: 250px;}

    .indpe-lun > img{height: 450px;}

    .indns-muen .cont-r {padding-left: 90px;}

    .indns-lun .cont {padding: 35px 45px;}

    .indar-cont .cont-l {width: 400px;padding-left: calc((100% - 1200px) / 2);padding-top: 20px;}

    .indar-cont .cont-r {width: calc(100% - 400px);}

    .indar-Chemistry {width: 560px;padding: 60px 70px;}

    .indar-lun img {min-height: 620px;}

    .indpe-lun .show {padding-bottom: 20px;}
    .indpc-muen .img img{max-height: 200px;min-height: 170px;}
    .indpc-cont .cont-l {height: 660px;}
}



@media all and (max-width:1430px) {

    /* 1360 */

}



@media all and (max-width:1350px) {

    /* 1280 */

}



@media all and (max-width:1270px) {

    /* 1152 × (700) */

    .banner-code {display: none;}

    .banner-btn {bottom: 20px;}

    .banner-control {bottom: 25px;}

    .indfp {height: 600px;}

    .indpe-svp {padding: 0px 4%;}

    .indpe-svp .swiper-container {padding-right: 0px;}
    .indpc-muen .img img {max-height: 130px;min-height: 124px;}
}



/* ------------------------平板端-------------------------- */

@media all and (max-width:1100px) {

    /* 1024 横屏 */

}



@media all and (max-width:1000px) {

    /* 720 竖屏 */

    .banner-lun > img {min-height: 400px;}

    .banner-btn {display: none;}

    .banner-control .line {width: 130px;}

    .banner-control .this {font-size: 14px;margin-left: 10px;}

    .banner-control .leng {font-size: 12px;line-height: 11px;}

    .indcp {padding: 0px 4%;}

    .indcp-list {height: 110px;}

    .indpc-cont .cont-l {width: 100%;height: auto;padding-right: 0px;}

    .indpc-cont .cont-r {width: 100%;padding-left: 0px;margin-top: 10px;}

    .indpc-muen .show {padding: 10px;}

    .indpc-cont .cont-r .top, .indpc-cont .cont-r .bottom {height: calc(100%/2 - 5px);}

    .indpc-list {margin-right: -10px;}

    .indpc-list .list {width: calc(100%/2 - 10px);margin-right: 10px;}

    .indpc-muen .img {padding: 10px;padding-top: 50px;}
    .indpc-muen .img img {min-height: auto;}

    .indpc-cont .cont-r .img {padding-top: 45px;}

    .indfp-cont {width: 100%;}

    .indfp-list .list {padding: 15px;border-right: 0px solid rgba(255, 255, 255, .2);width: calc(100%/2);}

    .indus-cont .cont-l {width: 100%;}

    .indus-cont .cont-r {width: 100%;padding-left: 0px;padding-top: 0px;margin-top: 15px;}

    .indus-list {margin-right: 0px;margin-bottom: -15px;padding-bottom: 0px;}

    .indus-list .list {width: 100%;margin-right: 0px;margin-bottom: 15px;padding: 15px;}

    .indus-list .list:nth-child(2) {transform: translateY(0px);}

    .indus-list .list:nth-child(4) {transform: translateY(0px);}

    .swiper-btn a {width: 40px;height: 40px;font-size: 16px;border: 1px solid #5d6066;line-height: 1;}

    .indpe-lun > img {height: 470px;}

    .indpe-lun .show {padding: 0px 20px;padding-bottom: 30px;}

    .indns-muen .cont-l {width: 100%;}

    .indns-muen .cont-r {width: 100%;padding-left: 0px;margin-top: 15px;}

    .indns-lun .img {height: 195px;}

    .indns-lun .cont {padding: 15px;}

    .indns-list {padding: 15px 0px;}

    .indns-list .list {margin-bottom: 20px;}

    .indar-cont .cont-l{width: 100%;padding: 0px 4%;}

    .indar-cont .cont-r {width: 100%;margin-top: 15px;}

    .indar-Chemistry {width: 100%;padding: 15px;}

    .indar-lun img {min-height: 420px;}

    .indar-muen a {padding: 10px;width: auto;justify-content: center;align-items: center;text-align: center;font-size: 12px;}

    .indar-muen {height: auto;overflow-y: hidden;overflow-x: auto;padding-bottom: 10px;}

    .indar-muen > div{display: flex;}

    .indar-muen::-webkit-scrollbar {width: auto;height: 2px;}

    .indar-muen::-webkit-scrollbar-thumb {background: #c01f24;}

    .indar-muen::-webkit-scrollbar-track {background: #f1f1f1;}

    .indar-muen a::before{display: none;}

    .indar-muen a.active{color: #c01f24;}

    .indar-Chemistry .muen .img{margin-top: 15px;}

}



/* ------------------------手机端-------------------------- */

@media all and (max-width:680px) {

    /* 移动终端 360 适配 */

    .indcp-list .img {height: 35px;}

    .indcp-list {height: 80px;}

    .banner-lun .content .title {font-size: 22px;}

    .IndBtn {width: 100px;height: 35px;}

    .IndBtn2 {width: 100px;height: 35px;}

    .IndBtn2::before {width: 98px;height: 32px;}

    .swiper-pagination-bullet {margin: 0px 15px;}

    .swiper-pagination-bullet::before {width: 18px;height: 18px;border: 1px solid #c01f24;}

    .swiper-btn a {width: 35px;height: 35px;font-size: 14px;}

    .indfp-list .list {padding: 10px;width: 100%;}

    .indfp-list .list .img {width: 25px;}

    .indfp-list .list .cont {width: calc(100% - 25px);padding-left: 10px;}

    .indfp-list .list .cont .hit {font-size: 12px;}

    .indfp-list .list .cont .hit span {font-size: 16px;}

    .indus-list .list .hit .icon {height: 25px;width: 25px;}

    .indus-list .list {box-shadow: 0px 0px 6px 2px rgba(67, 67, 67, 0.06);}

    .indus-list .list .line {display: none;}
    .indpc-cont .cont-l{height:288px;}
    .indpc-cont .cont-l .indpc-muen .img img {max-height: 210px;}
    .indpc-muen .img {padding-top: 30px;}
    .indpc-cont .cont-r .top, .indpc-cont .cont-r .bottom{height:200px}
    .indpc-cont .cont-r .bottom{margin-top:10px}
    .indpc-muen .img img {max-height: 100%;}
}