/* header */ .header{position: fixed;left: 0;top: 0;z-index: 9;width: 100%;background: none;color: #fff;transition: 0.5s;} .header .logo img{filter: brightness(0) invert(1);} .header.fixed, .header:hover{background: #ffffff;box-shadow: 0 0 10px 0 rgba(0,0,0,0.08);color: #222c35;} .header.fixed .logo img, .header:hover .logo img{filter: brightness(1) invert(0);} /* banner */ .banner {overflow: hidden;position: relative} .banner .wrap {display: block;height: 0;overflow: hidden;padding-bottom: 56.25%;position: relative;padding-bottom: 53.9%;} .banner .wrap em{position: absolute;left: 0;top: 0;width: 100%;height: 100%;background-position: center;background-repeat: no-repeat;background-size: cover;transform: scale(1.2);transition: 6s linear 2s;} .banner .swiper-slide-active .wrap em,.banner .swiper-slide-duplicate-active .wrap em {transform: scale(1);transition: 6s linear;} .banner .swiper-pagination {bottom: 2.4rem;z-index: 2;width: 100%;} .banner .swiper-pagination .swiper-pagination-bullet {background-color: #fff;color: transparent;font-weight: 700;height: 40px;line-height: 40px;margin: 0 5px;opacity: 1;position: relative;text-align: center;transform: scale(.25);transition: .5s;width: 40px;overflow: hidden;} .banner .swiper-pagination .swiper-pagination-bullet svg {fill: transparent;stroke-width:1px;stroke: #fff;stroke-dasharray: 114;stroke-dashoffset: -114;bottom: 0;left: 0;position: absolute;right: 0;top: 0;z-index: -1} .banner .swiper-pagination .swiper-pagination-bullet-active {background-color: hsla(0,0%,100%,0);color: #fff;transform: scale(1)} .banner .swiper-pagination .swiper-pagination-bullet-active svg {animation: svgani 5s linear forwards} @keyframes svgani {to {stroke-dashoffset: 0}} /* 标题 */ .ititle{text-align: center;padding-bottom: 2.33rem;} .ititle .ch{color: #3a3a3a;line-height: 2.2rem;position: relative;z-index: 2;} .ititle .en{position: absolute;left: 0;top: 0.37rem;width: 100%;line-height: 2.43rem;color: #414141;opacity: 0.0618;text-transform: uppercase;font-family: "montserrat-black";} /* isect1 */ .isect1{padding: 1.93rem 0 2.2rem;} .isect1 .list{display: flex;} .isect1 .list li{width: 30%;margin-right: 5%;position: relative;min-height: 14.2rem;} .isect1 .list li:last-child{margin-right: 0;} .isect1 .list li::before{content: "";width: calc(100% - 3.17rem);height: 14.2rem;position: absolute;left: 0;top: 0;background: #f99f51;z-index: -1;} .isect1 .list .title{line-height: 2.17rem;color: #fff;font-weight: normal;padding: 0 3.17rem 0 1.67rem;} .isect1 .list .btnwrap{position: absolute;right: 3rem;bottom: 1.33rem;z-index: 3;} .isect1 .list .btnwrap .btn{width: 1.13rem;height: 1.13rem;background: #0056a2;cursor: pointer;margin-bottom: 0.3rem;cursor: pointer;} .isect1 .list .btnwrap .btn img{height: 62%;} .isect1 .list .btnwrap .btn:hover{background: #f6ad54;} .isect1 .list .swiper-pagination{left: auto;right: 1.13rem;bottom: 1.57rem;width: auto;z-index: 3;} .isect1 .list .swiper-pagination .swiper-pagination-bullet{width: 0.2rem;height: 0.2rem;background: #d7d7d7;opacity: 1;margin: 0 0 0 0.2rem;} .isect1 .list .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{background: #0056a2;} .isect1 .list .pic{margin-left: 1.67rem;height: 14.13rem;background: url(/uploads/image/teimages/prod_bg.png) no-repeat center;background-size: cover;} .isect1 .list .pic img{max-width: 100%;max-height: 100%;} .isect1 .list .text{margin: -2.1rem 3.63rem 0 0;position: relative;z-index: 2;background: #ffffff;padding: 0.67rem 1.5rem 0 1.8rem;} .isect1 .list .text .tit{color: #303030;line-height: 0.83rem;font-weight: normal;} .isect1 .list .text .desc{color: #959595;line-height: 1.2rem;height: 3.6rem;overflow: hidden;margin: 0.5rem 0 0.67rem;} .isect1 .list .text .more{color: #f99f51;line-height: 0.8rem;text-decoration: underline;} /* isect2 */ .isect2 .content{padding: 2rem 0 3.57rem;} .isect2 .content::before{content: "";width: 50%;height: 100%;background: #f9f9f9;position: absolute;top: 0;right: 0;} .isect2 .tabs{margin-bottom: 2.17rem;color: #333333;font-weight: bold;} .isect2 .tabs .swiper-slide{width: auto;} .isect2 .tabs .icon{width: 1.33rem;margin-right: 0.4rem;filter: brightness(0) invert(0.2);} .isect2 .tabs .active{color: #f6ad54;} .isect2 .tabs .active .icon{filter: brightness(1) invert(0);} .isect2 .container .pic{width: 63.17%;height: 100%;position: absolute;right: 36.8%;top: 0;} .isect2 .container .box{width: 26%;} .isect2 .container .tit{position: relative;margin: 1.67rem 0;} .isect2 .container .tit .num{color: #e6e6e6;font-family: "barlow-regular";line-height: 1;opacity: 0.5;position: absolute;left: 0;top: 50%;transform: translatey(-60%);z-index: -1;} .isect2 .container .tit .t{color: #303030;font-weight: normal;line-height: 1.4rem;} .isect2 .container .tit .line{width: 5.77rem;height: 2px;background: #095ca5;position: relative;} .isect2 .container .tit .line::before{content: "";width: 2.1rem;height: 0.17rem;position: absolute;left: 0;top: 0;background: #095ca5;} .isect2 .container .text{color: #7c7c7c;line-height: 0.8rem;height: 12.8rem;overflow: hidden;margin-bottom: 2.8rem;} .isect2 .container .more a{color: #f99f51;line-height: 0.8rem;position: relative;} .isect2 .container .more a::before{content: "";width: 5rem;height: 1px;background: currentcolor;position: absolute;right: calc(100% 0.3rem);top: 50%;} .isect2 .container .more a:hover{color: #0056a2;} /* isect3 */ .isect3{padding: 2.93rem 0 2.37rem;} .isect3 .w1400{position: relative;} .isect3 .content{padding: 6.87rem 0 3.33rem;background: url(/uploads/image/teimages/isect3_bg.jpg) no-repeat center top;background-size: cover;color: #ffffff;line-height: 2.33;position: relative;} .isect3 .content .icon{position: absolute;right: 16.66%;top: 50%;transform: translatey(-50%);width: 3.9rem;cursor: pointer;} .isect3 .content .icon:hover{transform: translatey(-50%) scale(1.1);} .isect3 .content .text{max-width: 60%;margin-bottom: 1.87rem;} .isect3 .content .text dl{display: flex;} .isect3 .content .text dt{flex-shrink: 0;} .isect3 .content .text dd{flex: 1;} .isect3 .content .picwrap dl{display: flex;} .isect3 .content .picwrap dl img{width: 100%;} .isect3 .content .picwrap dl dt, .isect3 .content .picwrap dl dd{width: 5.33rem;margin-right: 0.67rem;} .isect3 .content .picwrap dl span{display: block;box-shadow: 0.23rem 0.23rem 0.43rem rgba(0, 0, 0, 0.15);overflow: hidden;} .isect3 .content .picwrap dl dt span{margin-bottom: 0.43rem;} .isect3 .content .picwrap dl span:hover img{transform: scale(1.1);} .isect3 .content .videowrap{display: none;} .isect3 .content .videowrap video{width: 100%;} /* isect4 */ .isect4{padding-bottom: 2.67rem;} .isect4 .content{align-items: flex-start;} .isect4 .item{width: 49.3%;} .isect4 .conttop{padding: 0.77rem 0 0 2.67rem;position: relative;margin-bottom: 0.83rem;} .isect4 .conttop::before{content: "";width: calc(100% - 2.67rem);height: calc(100% - 2.67rem);position: absolute;left: 0;top: 0;background: #f99f51;z-index: -1;} .isect4 .title{line-height: 1.4;color: #fff;font-weight: normal;margin: 0 2.67rem 1rem 0;} .isect4 .conttop .pic{padding-bottom: 57.9%;} .isect4 .conttop .text{padding: 0.43rem 3.2rem 1.87rem 0.6rem;background: #f9f9f9;display: flex;} .isect4 .conttop .text .date{flex-shrink: 0;margin-right: 0.9rem;display: flex;flex-direction: column;color: #0056a2;line-height: 1.4;} .isect4 .conttop .text .date span{margin-bottom: 3px;} .isect4 .conttop .text .cont{flex: 1;overflow: hidden;padding-top: 5px;} .isect4 .conttop .text .tit{color: #232323;line-height: 1.4;} .isect4 .conttop .text .desc{color: #7c7c7c;line-height: 0.87rem;height: 1.74rem;} .isect4 .conttop:hover .text .tit{color: #0056a2;} .isect4 dl dd{padding: 1.13rem 0 0.3rem;border-bottom: 1px solid #dddddd;} .isect4 dl .wrap{align-items: flex-start;} .isect4 dl .pic{width: 7.77rem;padding-bottom: 4.9rem;flex-shrink: 0;margin-right: 0.9rem;} .isect4 dl .text{flex: 1;overflow: hidden;line-height: 1.4;} .isect4 dl .tit{color: #232323;font-weight: normal;} .isect4 dl .desc{color: #7c7c7c;line-height: 0.87rem;height: 1.74rem;margin: 0.1rem 0 1.1rem;} .isect4 dl .date{color: #0056a2;} .isect4 dl .wrap:hover .tit{color: #0056a2;} @media screen and (max-width: 1620px){ } @media screen and (max-width: 1480px){ } @media screen and (max-width: 1300px){ } @media screen and (max-width: 1024px){ .isect1 .list .pic{height: 8rem;} .isect1 .list .btnwrap{bottom: 2rem;right: 0;} .isect1 .list .swiper-pagination{bottom: 1rem;} } @media screen and (max-width: 760px){ .banner .swiper-pagination{bottom: 0;} .banner .swiper-pagination .swiper-pagination-bullet svg{display: none;} .banner .swiper-pagination .swiper-pagination-bullet{width: 1rem;height: 1rem;line-height: 1rem;} .ititle{padding-bottom: 0.5rem;} .ititle .en{white-space: nowrap;font-size: 1rem;} .isect1{padding: 1.5rem 0;} .isect1 .list{flex-wrap: wrap;} .isect1 .list li{width: 100%;margin: 0 0 0.5rem;min-height: auto;} .isect1 .list .title{padding: 0 2rem 0 0.8rem;} .isect1 .list .pic{margin-left: 0.8rem;} .isect1 .list .text{margin: -1rem 2rem 0 0;padding: 0.5rem 1rem 0 1rem;} .isect2 .content{padding: 1rem 0;} .isect2 .tabs{margin-bottom: 1rem;} .isect2 .tabs .icon{width: 0.6rem;margin-right: 0.2rem;} .isect2 .container .pic{position: relative;right: 0;padding-bottom: 52%;width: 100%;} .isect2 .container .box{width: 100%;} .isect2 .container .text{height: auto;max-height: 12.8rem;margin-bottom: 1rem;} .isect3{padding: 1.6rem 0 0.6rem;} .isect3 .content{padding: 2rem 0;line-height: 2;} .isect3 .content .icon{right: 5%;top: auto;transform: translatey(0);bottom: 0.5rem;display: block;width: 1.6rem;margin: 0 auto;display: none;} .isect3 .content .icon:hover{transform: translatey(0) scale(1)} .isect3 .content .text{max-width: 100%;margin-bottom: 1rem;} .isect3 .content .videowrap{display: block;margin: 0 0 0.5rem;} .isect4{padding-bottom: 1.5rem;} .isect4 .content{flex-wrap: wrap;} .isect4 .item{width: 100%;margin-bottom: 1rem;} .isect4 .item:last-child{margin-bottom: 0;display: none;} .isect4 .conttop{padding: 0.4rem 0 0 1rem;margin-bottom: 0;} .isect4 .conttop .text{padding: 0.4rem 1rem 1rem 0.6rem;} .isect4 .title{margin-bottom: 0.5rem;} .isect4 dl dd{padding: 0.6rem 0;} .isect4 dl dd:last-child{padding-bottom: 0;border: none;} .isect4 dl .pic{width: 6.6rem;padding-bottom: 4.17rem;margin-right: 0.5rem;} .isect4 dl .desc{margin: 0 0 0.5rem;} } @media screen and (max-width: 468px){ }