*{margin: 0; padding: 0;}
html, body, #app {height: 100%; width: 100%; color: #212427; font-family: Arial;}
#app{overflow-y: auto;}
a{text-decoration: none; color: #666666;}
a:hover{color: #E60012;}
img{display: block;}
.width{width: 1280px; margin: 0 auto; min-width: 1280px;}
.bg-grey{background: #F9F9F9;}

a.danger{display: inline-block; height: 50px; line-height: 50px; padding: 0 25px; background: #E60012; color: #ffffff; border-radius: 5px; font-weight: bold;}
a.danger:hover{background: rgba(230, 0, 18, 0.9);}
a.plain{display: inline-block; height: 50px; line-height: 50px; padding: 0 25px; border: 1px solid #989898; color: #989898; border-radius: 5px; box-sizing: border-box;}
a.plain:hover{border-color: #E60012; background: #E60012; color: #FFFFFF;}
a.mr20{margin-right: 20px;}

.transition{transition: all 0.3s; -moz-transition: all 0.3s; -webkit-transition: all 0.3s; -o-transition: all 0.3s;}
.hid-one{overflow:hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow:ellipsis;}
.hid-two{overflow:hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical;}
.hid-three{overflow:hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical;}

header{position: fixed; left: 0; top: 0; right: 0; z-index: 9; background: #ffffff;}
.header_blank{height: 60px;}
.header{display: flex; justify-content: space-between; align-items: center;}
.header .logo img{height: 32px;}
.header .logo .black{display: block;}
.header .logo .white{display: none;}
.header .navbar{display: flex;}
.header a{color: #000000;}
.header .menu{display: flex; position: relative;}
.header .menu .item{padding: 0 16px; height: 60px; line-height: 60px;}
.header .menu .item i{margin-left: 10px;}
.header .menu .item:hover i{transform: rotate(180deg);}
.header .menu .item .one{display: inline-block;}
.header .menu .active{color: #000000;}
.header .search{height: 60px; display: flex; align-items: center; cursor: pointer; color: #000000;}
.header .search i{font-size: 22px; padding: 0 15px;}

.sub-menu{position: absolute; left: 0; top: 60px; width: 720px; background: #ffffff; border-radius: 5px; box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2); color: #212427; line-height: normal; display: none;}
.sub-menu .tit{padding: 20px; color: #989898; border-bottom: 1px solid #EEEEEE; display: flex; justify-content: space-between;}
.sub-menu .tit span{margin-right: 40px; cursor: pointer;}
.sub-menu .tit .current{font-weight: bold; color: #212427;}
.sub-menu .pro-con{padding: 15px 0 0 15px; display: flex; flex-wrap: wrap; justify-content: space-between;}
.sub-menu .pro-con .li{padding: 5px; display: flex; margin-bottom: 15px; margin-right: 15px; border-radius: 5px; width: 327px;}
.sub-menu .pro-con .li .pic{width: 70px; height: 70px; border-radius: 5px; overflow: hidden;}
.sub-menu .pro-con .li .con{flex: 1; padding-left: 15px;}
.sub-menu .pro-con .li .con .name{color: #212427;}
.sub-menu .pro-con .li .con .desc{color: #989898; font-size: 14px; padding-top: 6px;}
.sub-menu .pro-con .li:hover{background: #F7F7F7;}
.sub-menu .library{padding: 20px;}
.sub-menu .library .con{display: flex; overflow: hidden; padding-bottom: 15px;}
.sub-menu .library .con .pic{width: 80px; height: 80px; margin-right: 20px; border-radius: 5px; overflow: hidden;}
.sub-menu .library .desc{color: #989898; padding-bottom: 10px;}
.sub-menu .library a.more{color: #E60012; text-decoration: underline;}

.sub-menu .shop-con{padding: 15px 0 15px 15px; display: flex; align-items: center; flex-wrap: wrap;}
.sub-menu .shop-con .li{width: 200px; display: flex; align-items: center; padding: 15px 10px; margin-right: 15px; border-radius: 5px;}
.sub-menu .shop-con .li .icon{width: 24px; height: 24px;}
.sub-menu .shop-con .li .name{padding-left: 15px; color: #212427;}
.sub-menu .shop-con .li:hover{background: #F7F7F7;}
.sub-menu .ins-con{padding: 25px 20px;}
.sub-menu .ins-con .desc{color: #989898; line-height: 20px; padding-top: 20px; margin-bottom: 30px;}
.sub-menu .ins-con .more{color: #E60012; text-decoration: underline;}
.sub-menu .service-con{padding: 12px; display: flex; flex-wrap: wrap;}
.sub-menu .service-con .li{margin: 12px; width: 324px;}
.sub-menu .service-con .li .name{font-weight: bold; padding-top: 10px; line-height: 20px; color: #212427;}
.sub-menu .service-con .li .desc{color: #989898; font-size: 14px; line-height: 18px; height: 54px; padding-top: 10px; margin-bottom: 10px;}
.sub-menu .service-con .li .more{color: #E60012; font-size: 14px; text-decoration: underline;}

.home{color: #ffffff; background: none;}
.home a{color: #ffffff;}
.home .menu .active{color: #ffffff;}
.shadow{box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.2);}
.home .logo .black{display: none;}
.home .logo .white{display: block;}
.home .search{color: #FFFFFF;}

.search-box .v-modal{opacity: 1; background: rgba(0, 0, 0, 0.9);}
.search-box .tit{color: #6E6E6E; padding-top: 30px; width: 960px; margin: 0 auto;}
.search-box .el-dialog{background: #ffffff; box-shadow: none;}
.search-box .el-dialog .el-dialog__header{display: none;}
.search-box .search-form{display: flex; border-bottom: 1px solid #BCBCBC; align-items: center; width: 960px; margin: 0 auto 100px;}
.search-box .search-form .el-input__inner{background: none; border: none; padding-left: 0; color: #212427;}
.search-box .search-form .el-button{background: none; padding: 0; border: none;}
.search-box .search-form .icon{font-size: 30px; color: #3B3B3B;}

.banner{width: 100%; min-width: 1280px;}
.banner .swiper-container{width: 100%; height: 100%;}
.banner .swiper-container img{width: 100%;}
.banner .item{position: relative;}
.banner .item .con{position: absolute; left: 50%; margin-left: -640px; top: 0; bottom: 0; color: #ffffff; display: flex; align-items: center;}
.banner .item .name{font-size: 40px; width: 630px;}
.banner .item .desc{color: #989898; padding: 30px 0; width: 620px;}
.banner .swiper-container-horizontal>.swiper-pagination-bullets{bottom: 20px;}
.banner .swiper-pagination-bullet{width: 10px; height: 10px; background: #666666; opacity: 1;}
.banner .swiper-pagination-bullet-active{background: #E60012;}

.inside{display: flex; justify-content: space-between; align-items: center; padding-top: 80px; padding-bottom: 100px;}
.inside .text{width: 560px;}
.inside .text .name{font-weight: bold; font-size: 36px; line-height: 60px;}
.inside .text .desc{color: #989898; line-height: 30px; padding-top: 20px;}
.inside .text .btn{padding-top: 30px;}
.inside .text .btn .el-button--primary{background-color: #E60012; border-color: #E60012; font-size: 16px;}
.el-button--danger{background-color: #E60012; border-color: #E60012; font-size: 16px;}
.el-button--default{border-color: #CCCCCC; color: #989898; font-size: 16px;}
.el-button--default:hover{border-color: rgba(230, 0, 18, 0.1); color: rgba(230, 0, 18, 0.8); background: rgba(230, 0, 18, 0.1);}
.inside .pic{width: 600px; height: 400px;}
.inside .item{display: flex; color: #989898; font-size: 14px; margin-top: 20px;}
.inside .item i{margin-right: 10px; color: #000000; font-size: 20px;}

.inside .search{padding: 30px 0; width: 100%; flex: 1;}
.inside .search .name{font-size: 36px; font-weight: bold; text-align: center;}
.inside .search .desc{color: #989898; padding-top: 26px; padding-bottom: 32px; text-align: center;}
.inside .search .form{box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2); border-radius: 5px; overflow: hidden; width: 726px; margin: 0 auto;}
.inside .search .form .el-input{font-size: 16px;}
.inside .search .form .el-input__inner{height: 60px; line-height: 60px;}
.inside .search .form .el-input__inner:focus{border-color: rgba(230, 0, 18, 0.5);}
.inside .search .form .el-button--default{border: none;}
.inside .search .form .el-button--default:hover{background: none;}
.inside .search .form .icon{font-size: 20px;}
.inside .search .form .el-input__suffix{right: 1px;}
.inside .search .form .el-button.is-round{padding: 19px; margin-top: 1px;}

.title{display: flex; align-items: center; justify-content: space-between; padding-bottom: 50px;}
.title h1{font-size: 30px;}
.title h3{color: #989898; font-weight: normal; font-size: 16px; padding-top: 10px;}
.title .btns .btn{display: inline-block; height: 50px; line-height: 50px; padding: 0 18px; border: 1px solid #989898; color: #989898; border-radius: 5px; margin-left: 20px;}
.title .btns .btn:hover{background: #E60012; border-color: #E60012; color: #ffffff;}
.title.center{justify-content: center; text-align: center;}

.intro{margin-top: 60px;}
.intro .content{display: flex; flex-wrap: wrap; margin: 0 -9px;}
.intro .item{width: 306px; background: #F7F7F7; height: 280px; margin: 9px;}
.intro .item .icon{width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; margin: 50px auto 0;}
.intro .item .icon i{font-size: 70px;}
.intro .item .name{font-size: 18px; font-weight: bold; padding-top: 20px; text-align: center;}
.intro .item .desc{text-align: center; color: #989898; font-size: 14px; margin: 0 auto; padding-top: 10px; line-height: 18px;}

.intro-three{padding-bottom: 60px;}
.intro-three .content{margin: 0 -20px;}
.intro-three .item{width: 400px; margin: 20px;}

.intro-left .item{padding: 50px 28px; box-sizing: border-box; height: auto;}
.intro-left .item .icon{margin: 0;}
.intro-left .item .name{text-align: left;}
.intro-left .item .desc{text-align: left; padding-top: 20px;}

.product{margin-top: 70px; padding-top: 100px;}
.product .content{display: flex; flex-wrap: wrap; margin: 0 -14px; padding-bottom: 76px;}
.product .item{width: 299px; margin: 0 14px 28px 14px; border-radius: 5px; overflow-x: hidden; background: #FFFFFF;}
.product .item .pic{width: 299px; height: 299px;}
.product .item .name{font-weight: bold; margin: 20px 20px 0 20px; height: 30px; line-height: 30px; color: #212427;}
.product .item .desc{font-size: 14px; color: #989898; height: 40px; line-height: 20px; margin: 0 20px 20px 20px;}
.product .item:hover{box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.15);}
.product .more{width: 299px; margin: 0 14px 28px 14px; background: #E9E9E9; border-radius: 5px; position: relative;}
.product .more .desc{padding: 48px 30px; font-size: 30px; line-height: 36px;}
.product .more .btn{display: block; margin: 34px; width: 232px; position: absolute; left: 0; bottom: 0; border: 1px solid #212427; text-align: center; height: 50px; line-height: 50px; color: #212427; border-radius: 5px;}
.product .more .btn:hover{border-color: #E60012; background: #E60012; color: #FFFFFF;}

.industry{min-width: 1280px; padding-top: 100px;}
.industry .content{}
.industry .swiper-wrapper{padding-bottom: 100px;}
.industry .swiper-slide{width: auto;}
.industry .item{width: 306px; background: #F9F9F9; border-radius: 5px; overflow: hidden; text-align: center; display: block;}
.industry .item .pic{width: 306px; height: 262px;}
.industry .item .name{font-weight: bold; margin: 20px 20px 0 20px; height: 30px; line-height: 30px; color: #212427;}
.industry .item .desc{font-size: 14px; color: #989898; height: 40px; line-height: 20px; margin: 0 20px 20px 20px;}
.industry .item:hover{box-shadow: 0px 0px 15px 0px rgba(0,0,0,0.15);}
.industry .swiper-button{position: relative; display: flex; align-items: center;}
.industry .swiper-button-next, .industry .swiper-button-prev{position: relative; background: none; width: 32px; height: 32px; border-radius: 22px; border: 3px solid #212427; display: flex; align-items: center; justify-content: center; margin: auto auto auto 30px; left: auto; right: auto; z-index: 8;}
.industry .swiper-button i{font-size: 24px; font-weight: bold;}

.service .title{justify-content: center; text-align: center;}
.service .el-tabs__item{font-size: 18px; font-weight: bold; padding: 0 0 15px 0; width: 200px; text-align: center; height: auto; line-height: normal;}
.service .el-tabs__item.is-active{font-size: 18px; font-weight: bold; color: #E60012;}
.service .el-tabs__item:hover{color: #E60012;}
.service .el-tabs__active-bar{background-color: #E60012;}
.service .content{padding-bottom: 100px;}
.service .content .el-tabs__nav-prev{display: none;}
.service .content .el-tabs__nav-next{display: none;}
.service .con{display: flex; flex-wrap: wrap; margin: 0 -9px;}
.service .con .item{width: 306px; background: #F7F7F7; height: 280px; margin: 9px;}
.service .con .item .icon{width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; margin: 50px auto 0;}
.service .con .item .icon i{font-size: 70px;}
.service .con .item .name{font-size: 18px; font-weight: bold; padding-top: 20px; text-align: center; color: #212427;}
.service .con .item .desc{text-align: center; color: #989898; font-size: 14px; margin: 0 auto; padding-top: 10px; line-height: 18px;}

.service .total{background: #000000; color: #FFFFFF;}
.service .total .width{height: 260px; display: flex; align-items: center; justify-content: space-between;}
.service .total .item{display: flex; align-items: center;}
.service .total .item .icon{display: flex; align-items: center; justify-content: center; width: 90px; height: 90px; border-radius: 45px;}
.service .total .item .icon i{font-size: 48px; color: #FFFFFF;}
.service .total .item .icon1{background: #E57373;}
.service .total .item .icon2{background: #BA68C8;}
.service .total .item .icon3{background: #4FC3F7;}
.service .total .item .text{width: 236px; padding-left: 20px;}
.service .total .item .name{font-weight: bold; line-height: 30px;}
.service .total .item .desc{font-size: 14px; color: #989898; line-height: 18px;}

/*选项库*/
.service .tit{font-size: 18px; color: #212427; font-weight: bold; padding-top: 20px;}
.service .library{display: flex; flex-wrap: wrap; margin: 0 -10px; padding: 0 10px 20px;}
.service .library .item{width: 300px; margin: 20px 10px; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1); border-radius: 5px; overflow: hidden;}
.service .library .item:hover{box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.2);}
.service .library .item .pic{width: 300px; height: 200px;}
.service .library .item .name{margin: 15px 20px 5px 20px; height: 30px; line-height: 30px; font-weight: bold; font-size: 18px; color: #000000;}
.service .library .item .desc{font-size: 14px; color: #989898; height: 60px; line-height: 20px; margin: 0 20px 15px 20px;}
.service .library .item .btns{margin: 0 20px 25px 20px; display: flex;}
.service .library .item .btns .btn{width: 46px; height: 46px; display: flex; justify-content: center; align-items: center; margin-right: 15px; border-radius: 23px;}
.service .library .item .btns .btn i{font-size: 20px; color: #ffffff;}
.service .library .item .btns .purple{background: #6B4BF9;}
.service .library .item .btns .green{background: #FF3ED299;}

.customer{padding-top: 100px;}
.customer .content{}
.customer .swiper-wrapper{padding-bottom: 100px;}
.customer .swiper-slide{width: auto;}
.customer .item{width: 340px; padding: 50px 30px 35px 30px; background: #F7F7F7; border-radius: 5px; overflow: hidden; text-align: center;}
.customer .item .pic{width: 100px; height: 100px; margin: 0 auto; border-radius: 50px;}
.customer .item .company{font-weight: bold; font-size: 18px; margin-top: 20px; height: 30px; line-height: 30px;}
.customer .item .name{margin-top: 10px; color: #989898; font-size: 14px;}
.customer .item .desc{font-size: 14px; color: #212427; height: 120px; line-height: 20px; margin-top: 20px;}
.customer .item .el-rate__icon{font-size: 25px;}
.customer .swiper-button{position: relative; display: flex; align-items: center;}
.customer .swiper-button-next, .customer .swiper-button-prev{position: relative; background: none; width: 32px; height: 32px; border-radius: 22px; border: 3px solid #212427; display: flex; align-items: center; justify-content: center; margin: auto auto auto 30px; left: auto; right: auto; z-index: 8;}
.customer .swiper-button i{font-size: 24px; font-weight: bold;}

.problem .el-collapse{border: none;}
.problem .el-collapse-item__header{font-size: 18px; color: #212427; font-weight: bold; border-bottom: none;}
.problem .el-collapse-item__wrap{border-bottom: none; border-top: 1px solid #CCCCCC;}
.problem .el-collapse-item__content{padding-top: 20px;}
.problem .el-collapse-item__arrow{color: #212427; font-weight: bold;}
.problem .item{border: 1px solid #989898; padding: 20px 50px; margin-bottom: 20px;}
.problem .text{font-size: 16px; color: #999999; line-height: 20px;}

.news{padding-top: 80px;}
.news .content{display: flex; justify-content: space-between;}
.news .content a{color: #212427;}
.news .big{width: 630px;}
.news .big .pic{width: 630px; height: 316px; margin-bottom: 20px;}
.news .name{font-weight: bold; height: 26px; line-height: 26px; margin-bottom: 5px;}
.news .desc{font-size: 14px; color: #999999; height: 40px; line-height: 20px;}
.news .time{color: #999999; padding-top: 10px; display: flex; align-items: center; justify-content: space-between;}
.news .small{width: 568px;}
.news .small .item{padding: 20px 0; border-top: 1px solid #CCCCCC; display: flex; align-items: center;}
.news .small .item:first-child{padding-top: 0; border-top: none;}
.news .small .pic{width: 220px; height: 120px;}
.news .small .text{width: 0; flex: 1; padding-left: 20px;}
.news .small .desc{height: 48px; line-height: 16px;}

.footer_blank{height: 100px;}
footer{background: #000000; padding-top: 100px; color: #FFFFFF; position: relative;}
footer::before{content: ""; position: absolute; left: 0; top: 75px; background: url("../images/logo-first.png") no-repeat; width: 240px; height: 128px;}
footer::after{content: ""; position: absolute; right: 0; bottom: 90px; background: url("../images/logo-last.png") no-repeat; width: 240px; height: 120px;}
footer .ftop{display: flex; align-items: center; justify-content: space-between; padding-bottom: 40px; border-bottom: 1px solid #212427; position: relative; z-index: 2;}
footer .ftop .text{font-size: 30px; line-height: 36px; color: #ffffff; font-weight: bold;}
footer .ftop .btn{border: 1px solid #989898; color: #989898; height: 50px; line-height: 50px; padding: 0 50px; border-radius: 5px;}
footer .ftop .btn:hover{border-color: #E60012; background: #E60012; color: #FFFFFF;}
footer .menu{padding-top: 50px; padding-bottom: 80px; display: flex; justify-content: space-between;}
footer .menu .item{width: fit-content;}
footer .menu .item a{display: block; color: #989898;}
footer .menu .item a:hover{color: #FFFFFF;}
footer .menu .item .tit{font-size: 18px; font-weight: bold; color: #ffffff; margin-bottom: 30px;}
footer .menu .item .li{margin-bottom: 20px;}
footer .menu .item:last-child{padding-right: 0;}
footer .menu .item .text{margin-bottom: 10px;}
footer .copyright{padding: 20px 0; border-top: 1px solid #212427; color: #333333;}

.position{padding: 25px 0; color: #666666; border-bottom: 1px solid #E5E5E5;}
.position a{color: #212427;}
.position a:hover{color: #E60012;}
.position .line{padding: 0 10px; color: #212427;}
.position .house{font-size: 20px; color: #212427;}

.about{padding-top: 100px;}
.about .content{display: flex; align-items: center; justify-content: space-between;}
.about .text{width: 580px;}
.about .text .name{font-size: 36px; line-height: 48px; font-weight: bold;}
.about .text .desc{padding-top: 15px; line-height: 24px;}
.about .information{padding-top: 50px; display: flex;}
.about .information .item{width: 50%;}
.about .information .item .tit{font-weight: bold; font-size: 18px; padding-bottom: 12px;}
.about .information .item .li{color: #989898; padding: 10px 0; display: flex; align-items: center;}
.about .information .item .li i{margin-right: 10px;}
.about .information .item a.li:hover{color: #DF0614;}
.about .text .office{padding-top: 50px; font-size: 18px; font-weight: bold;}
.about .text .address{color: #989898; padding-top: 20px;}
.about .more{padding-top: 60px;}
.about .more a{color: #DF0614; text-decoration: underline;}

.about-structural .content{padding-bottom: 100px;}
.about-structural .con{padding-top: 60px;}
.about-structural .con .li{display: flex; padding-bottom: 40px;}
.about-structural .con .li i{font-size: 25px; color: #E60012;}
.about-structural .con .li span{color: #989898; padding-left: 20px; line-height: 20px; font-size: 14px;}

.about-sample .content{padding-bottom: 100px;}
.about-sample .text .desc{padding-top: 30px; line-height: 24px; color: #989898;}

.pro-home .item{padding-top: 80px; padding-bottom: 100px;}
.pro-home .tit{padding-bottom: 20px; border-bottom: 1px solid #CCCCCC;}
.pro-home .tit .name{font-size: 24px; font-weight: bold;}
.pro-home .tit .desc{padding-top: 20px; display: flex; align-items: center; justify-content: space-between; color: #989898;}
.pro-home .con{position: relative;}
.pro-home .swiper-wrapper{padding: 50px 10px;}
.pro-home .swiper-slide{width: auto;}
.pro-home .li{width: 300px; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1); border-radius: 5px; overflow: hidden; display: block;}
.pro-home .li:hover{box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.2);}
.pro-home .li .pic{width: 300px; height: 300px;}
.pro-home .li .name{margin: 15px 20px 5px 20px; height: 30px; line-height: 30px; font-weight: bold; font-size: 18px; color: #000000;}
.pro-home .li .desc{font-size: 14px; color: #989898; height: 20px; line-height: 20px; margin: 0 20px 25px 20px;}
.pro-home .swiper-button-next, .pro-home .swiper-button-prev{background: none; width: 32px; height: 32px; border-radius: 22px; border: 3px solid #212427; display: flex; align-items: center; justify-content: center; z-index: 8;}
.pro-home .swiper-button-prev{left: -75px;}
.pro-home .swiper-button-next{right: -75px;}
.pro-home .swiper-button-next i, .pro-home .swiper-button-prev i{font-size: 24px; font-weight: bold;}
.pro-home .swiper-pagination-bullet{height: 3px; width: 40px; background: #CCCCCC; border-radius: 2px;}
.pro-home .swiper-pagination-bullet-active{background: #000000;}

.why{padding-top: 60px;}
.why .slide{padding-bottom: 100px;}
.why .slide .item{display: flex; justify-content: space-between; background: #F9F9F9; padding-left: 80px; padding-right: 60px;}
.why .slide .item .text{width: 450px;}
.why .slide .item .text .name{font-size: 36px; line-height: 48px; font-weight: bold; padding-top: 75px;}
.why .slide .item .text .desc{color: #989898; padding-top: 15px; line-height: 1.5;}
.why .slide .item .pic{width: 645px; height: 436px;}
.why .slide .swiper-button{position: absolute; left: 50px; bottom: 75px; display: flex; align-items: center;}
.why .slide .swiper-button-next, .why .slide .swiper-button-prev{position: relative; background: none; width: 26px; height: 26px; border-radius: 16px; border: 2px solid #212427; display: flex; align-items: center; justify-content: center; margin: auto auto auto 30px; left: auto; right: auto; z-index: 8;}
.why .slide .swiper-button i{font-size: 18px; font-weight: bold;}
.why .case{padding-bottom: 100px;}
.why .case .swiper-wrapper{padding-bottom: 10px;}
.why .case .swiper-slide{width: auto;}
.why .case .item{width: 306px; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1); overflow: hidden; border-radius: 5px;}
.why .case .item .pic{width: 306px; height: 280px;}
.why .case .item .name{font-weight: bold; margin: 20px; height: 20px; line-height: 20px;}
.why .case .item .desc{font-size: 14px; color: #E60012; margin: 0 20px; padding-bottom: 20px;}
.why .case .item .desc span{text-decoration: underline;}

.industry-home{display: flex; flex-wrap: wrap; margin: 0 -14px; padding-top: 80px;}
.industry-home .item{width: 190px; height: 135px; padding-top: 55px; background: #F9F9F9; border-radius: 5px; margin: 0 14px 28px;}
.industry-home .item .icon{width: 48px; height: 48px; margin: 0 auto; display: block;}
.industry-home .item .name{font-weight: bold; padding-top: 28px; text-align: center; color: #212427;}
.industry-home .item:hover{background: none; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);}

.industry-jump{padding-top: 72px;}

.library-home{padding-top: 60px;}
.library-home .el-menu--horizontal>.el-menu-item{padding: 0 60px 15px; height: auto; line-height: normal; font-size: 18px; color: #212427;}
.library-home .el-menu--horizontal>.el-menu-item.is-active{color: #E60012; border-color: #E60012; font-weight: bold;}
.library-home .content{padding-top: 60px;}
.library-list{display: flex; flex-wrap: wrap; margin: 0 -13px; border-bottom: 1px solid #CCCCCC; padding-bottom: 20px;}
.library-list .item{width: 300px; margin: 0 13px 50px; box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1); border-radius: 5px;}
.library-list .item:hover{box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.2);}
.library-list .item .pic{width: 300px; height: 200px;}
.library-list .item .name{margin: 15px 20px 5px 20px; height: 30px; line-height: 30px; font-weight: bold; font-size: 18px; color: #000000;}
.library-list .item .desc{font-size: 14px; color: #989898; height: 60px; line-height: 20px; margin: 0 20px 15px 20px;}
.library-list .item .btns{margin: 0 20px 25px 20px; display: flex;}
.library-list .item .btns .btn{width: 46px; height: 46px; display: flex; justify-content: center; align-items: center; margin-right: 15px; border-radius: 23px;}
.library-list .item .btns .btn i{font-size: 20px; color: #ffffff;}
.library-list .item .btns .purple{background: #6B4BF9;}
.library-list .item .btns .green{background: #3ED299;}

.cat-list{padding-top: 60px; display: flex; flex-wrap: wrap; margin: 0 -13px;}
.cat-list .item{box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1); border-radius: 5px; width: 250px; padding: 40px 25px 30px 25px; margin: 0 13px 40px;}
.cat-list .item .tit{display: flex; align-items: center; font-weight: bold; padding-bottom: 30px; border-bottom: 1px solid #CCCCCC;}
.cat-list .item .tit .icon{width: 48px; height: 48px;}
.cat-list .item .tit .name{font-size: 18px; font-weight: bold; padding-left: 20px; color: #212427;}
.cat-list .item .desc{color: #989898; line-height: 20px; height: 100px; padding-top: 15px;}
.cat-list .item .more{color: #DF0614; font-size: 14px; text-decoration: underline;}

.problem-list .tit{font-size: 30px; font-weight: bold; padding-bottom: 35px;}
.problem-list .content{border: 1px solid #CCCCCC; border-bottom: none;}
.problem-list .content .item{display: block; padding: 45px 50px; font-weight: bold; color: #212427; border-bottom: 1px solid #CCCCCC;}
.problem-list .content .item:hover{color: #DF0614; background: #F7F7F7;}

.search-result{padding-top: 45px; display: flex; justify-content: space-between;}
.search-result .problem-list{width: 950px;}
.news-rec{width: 292px;}
.news-rec .tit{font-weight: bold; padding-bottom: 10px; border-bottom: 1px solid #CCCCCC;}
.news-rec .con{padding-top: 15px; padding-bottom: 30px;}
.news-rec .con .item{margin-bottom: 15px; font-size: 14px; display: block; height: 16px; line-height: 16px;}
.news-rec .con .item span{padding-left: 6px;}

.news-home{padding-top: 60px;}
.news-home .tit{font-size: 30px; font-weight: bold; padding-bottom: 35px;}
.news-home .item{display: flex; align-items: center; margin-bottom: 40px;}
.news-home .item .pic{width: 270px; height: 148px;}
.news-home .item .con{flex: 1; width: 0; padding-left: 48px;}
.news-home .item .con .name{font-weight: bold; height: 26px; line-height: 26px; margin-bottom: 5px; color: #212427;}
.news-home .item .con .desc{height: 60px; line-height: 20px; color: #999999;}
.news-home .item .con .time{font-size: 14px; color: #999999; padding-top: 30px;}
.news-home .item:hover .con .name{color: #DF0614;}

.news-detail{padding-top: 80px; padding-bottom: 60px; display: flex; justify-content: space-between;}
.news-detail .text{width: 900px; padding: 30px; border: 1px solid #CCCCCC;}
.news-detail .name{font-size: 30px; color: #222222; font-weight: bold;}
.news-detail .time{color: #999999; padding: 15px 0;}
.news-detail .content{color: #666666; padding-top: 30px; border-top: 1px solid #ECECEC; line-height: 1.5;}
.news-detail .content img{max-width: 100%;}
.news-detail .content table{width: 100% !important; border-style: solid; border-color: #f2f2f2; border-width: 1px; border-collapse: collapse;}
.news-detail .content table td{border-style: solid; border-color: #f2f2f2; border-width: 1px; border-collapse: collapse; padding: 5px 10px;}

.design .content{display: flex; flex-wrap: wrap; justify-content: space-between;}
.design .content .item{width: fit-content; margin-bottom: 40px;}

.packaging{height: 801px; background-repeat: no-repeat; background-position: center; background-image: url("../images/packaging-1.jpg");}
.packaging .content{display: flex; height: 801px; align-items: center;}
.packaging .content .text{height: fit-content; width: 550px;}
.packaging .content .text .name{font-size: 36px; line-height: 48px; font-weight: bold;}
.packaging .content .text .con{padding-top: 50px;}
.packaging .content .text .con .li{display: flex; padding-bottom: 40px;}
.packaging .content .text .con .li i{font-size: 25px; color: #E60012;}
.packaging .content .text .con .li span{color: #222222; padding-left: 20px; line-height: 20px; font-size: 14px;}
.packaging-two{background-image: url("../images/packaging-2.png");}
.packaging-two .content{justify-content: right;}
.packaging-three{background-image: url("../images/packaging-3.png");}
.packaging-three .content .text .name{color: #ffffff;}
.packaging-three .content .text .con .li span{color: #999999;}

.sample{padding-top: 80px; padding-bottom: 80px;}
.sample .content{display: flex; flex-wrap: wrap; justify-content: space-between;}
.sample .item{width: 300px;}
.sample .item:hover{box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1); border-radius: 5px; overflow: hidden;}
.sample .item .pic{width: 300px; height: 300px;}
.sample .item .name{margin: 15px 20px 5px 20px; height: 30px; line-height: 30px; font-weight: bold; font-size: 18px;}
.sample .item .desc{font-size: 14px; color: #989898; line-height: 20px; margin: 0 20px 20px;}

.pages{border-top: 1px solid #CCCCCC; padding-top: 30px; display: flex; justify-content: right;}
.pages .select{display: flex; align-items: center; display: none;}
.pages .select .label{padding-right: 10px; font-size: 16px; color: #212427;}
.pages .el-pagination a{display: block;}
.pages .el-pagination .btn-next, .pages .el-pagination .btn-prev{margin: 0;}
.pages .el-pagination.is-background .el-pager li:not(.disabled):hover{color: #E60012;}
.pages .el-pagination.is-background .el-pager li:not(.disabled).active{background-color: #E60012; color: #ffffff;}
.pages .el-pagination.is-background .el-pager li:not(.disabled).active a{color: #ffffff;}

.quick{border-top: 1px solid #ECECEC; padding-top: 30px; display: flex; justify-content: space-between;}
.clear{clear: both;}
.inspiration{padding-top: 70px;}
.inspiration .menu{width: 298px; border: 1px solid #CCCCCC; border-top: none; float: left; margin-bottom: 40px;}
.inspiration .menu .el-collapse{border: none;}
.inspiration .menu .el-collapse-item:last-child{margin-bottom: 0;}
.inspiration .menu .el-collapse-item__header{border-top: 1px solid #CCCCCC; border-bottom: none; padding: 0 10px 0 20px; font-size: 16px; color: #000000; font-weight: bold;}
.inspiration .menu .el-collapse-item__header a{display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #000000; flex: 1;}
.inspiration .menu .el-collapse-item__content{border-left: 1px solid #ECECEC; border-right: 1px solid #ECECEC; padding: 0 20px 10px; font-size: 14px;}
.inspiration .menu .el-collapse-item__wrap{border: none;}
.inspiration .menu .item{display: block; color: #989898; padding: 10px 12px; border-radius: 5px;}
.inspiration .menu .item:hover{background: #F6F6F6;}
.inspiration .menu .active{color: #ffffff; background: #E60012;}
.inspiration .menu .active:hover{color: #ffffff; background: #E60012;}

.inspiration .content{width: 976px; display: flex; flex-wrap: wrap; float: right;}
.inspiration .content .item{width: 224px; margin: 0 0 40px 20px;}
.inspiration .content .item .pic{width: 224px; height: 224px;}
.inspiration .content .item .desc{color: #989898; text-align: center; line-height: 1.5; padding-bottom: 8px;}
.inspiration .content .item .name{color: #000000; text-align: center; font-weight: bold; line-height: 1.5;}

.quotation{padding-top: 60px; padding-bottom: 100px;}
.quotation .content{display: flex; justify-content: space-between;}
.quotation .text{width: 466px;}
.quotation .text .name{font-weight: bold; font-size: 36px; line-height: 48px;}
.quotation .text .desc{color: #989898; line-height: 1.5; padding-top: 20px; padding-bottom: 30px;}
.quotation .text .question{background: #ffffff; box-shadow: 0px 4px 20px 0px rgba(0,0,0,0.1); border-radius: 5px; padding: 40px;}
.quotation .text .question .tit{font-size: 18px; font-weight: bold;}
.quotation .text .question .item{font-size: 14px; color: #989898; text-decoration: underline; margin-top: 20px; display: block;}
.quotation .text .question .item:hover{color: #DF0614;}
.quotation .text .more{color: #989898; padding-top: 40px;}
.quotation .text .more a{color: #DF0614; text-decoration: underline;}

.quotation .form{width: 620px; box-shadow: 0px 4px 20px 0px rgba(0,0,0,0.1); border-radius: 6px; background: #ffffff;}
.quotation .form .name{text-align: center; font-size: 30px; font-weight: bold; padding-top: 40px;}
.quotation .form .desc{text-align: center; color: #989898; line-height: 1.5; padding: 20px 0;}
.quotation .form .desc a{color: #DF0614; text-decoration: underline;}
.quotation .form .con{border-top: 1px solid #EEEEEE; padding: 20px 30px;}
.quotation .form .con .tit{font-weight: bold; padding-bottom: 20px;}
.quotation .form .con .red{color: #E60012;}
.quotation .form .con .el-form-item__label{color: #212427; padding: 0;}
.quotation .form .con .el-form-item__label::before{display: none;}
.quotation .form .con .el-input__inner:focus{border-color: #CCCCCC;}
.quotation .form .con .el-textarea__inner:focus{border-color: #CCCCCC;}
.quotation .form .btn{text-align: center; padding-bottom: 60px;}
.quotation .annex{margin-bottom: 20px;}
.quotation .annex .upload{border: 1px solid #ECECEC; border-radius: 5px; width: 140px; height: 140px; display: flex; justify-content: center; align-items: center;}
.quotation .annex .pic{width: 140px; height: 140px; display: block;}
.quotation .annex .icon{font-size: 40px; font-weight: bold; color: #ECECEC;}
.quotation .annex .slot{width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #3ED299;}
.quotation .annex .slot i{font-size: 36px; color: #3ED299;}

.product-detail{padding-top: 60px; padding-bottom: 60px;}
.product-detail .box{display: flex; justify-content: space-between;}
.product-detail .box .piclist{width: 600px;}
.product-detail .box .piclist .big{border: 1px solid #ECECEC; height: 598px; overflow: hidden;}
.product-detail .box .piclist .big img{width: 100%;}
.product-detail .box .small{width: 100%; padding-top: 16px;}
.product-detail .box .small .swiper-slide{width: auto;}
.product-detail .box .small .item{border: 1px solid #ECECEC; width: 88px; height: 88px;}
.product-detail .box .small img{width: 88px; height: 88px;}
.product-detail .box .small .active{position: relative;}
.product-detail .box .small .active::after{content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(34, 34, 34, 0.8);}
.product-detail .box .con{width: 620px;}
.product-detail .box .con .tit{font-size: 30px; padding-bottom: 15px;}
.product-detail .box .con .desc{color: #989898; padding-bottom: 20px; border-bottom: 1px solid #CCCCCC;}
.product-detail .box .con .code{color: #989898; padding-bottom: 10px;}
.product-detail .box .con .el-form-item{margin-bottom: 18px;}
.product-detail .box .con .el-input__inner:focus{border-color: #222222;}
.product-detail .box .con .el-form--label-top .el-form-item__label{padding-bottom: 0;}
.product-detail .box .con .el-form--label-top .el-form-item__label::before{display: none;}
.product-detail .box .con .el-form--label-top .el-form-item__label .label{color: #222222;}
.product-detail .box .con .el-form--label-top .el-form-item__label .label span{color: #E60012;}
.product-detail .box .con .el-tag{margin-right: 12px; font-size: 14px; height: 38px; line-height: 38px; padding: 0 15px;}
.product-detail .box .con .el-tag--dark.el-tag--info{background-color: #EDEDED; border-color: #EDEDED; color: #212427;}
.product-detail .box .con .el-tag--dark.el-tag--success{background-color: #222222; border-color: #222222;}
.el-select-dropdown__item.selected{background-color: #EDEDED; color: #000000;}
.product-detail .box .con .el-button--danger{font-size: 14px; text-transform: uppercase;}
.product-detail .box .con .price{padding-top: 20px; border-top: 1px solid #CCCCCC; margin-top: 12px;}
.product-detail .box .con .price .label{color: #222222; font-weight: bold; padding-bottom: 16px;}
.product-detail .box .con .price .el-button--primary{background: #E60012;}
.product-detail .content{padding-top: 60px; color: #666666; line-height: 22px;}
.product-detail .content .el-tabs__active-bar{background-color: #E60012;}
.product-detail .content .el-tabs__nav-wrap::after{background-color: #CCCCCC; height: 1px;}
.product-detail .content .el-tabs__item{height: 48px; line-height: 48px; color: #212427; font-size: 16px; box-sizing: inherit; padding: 0; width: 210px; text-align: center;}
.product-detail .content .el-tabs__item.is-active{color: #E60012; font-weight: bold;}

.product-detail .rich-text{line-height: 2;}
.product-detail .rich-text table{width: 100% !important; border-style: solid; border-color: #f2f2f2; border-width: 1px; border-collapse: collapse;}
.product-detail .rich-text table td{border-style: solid; border-color: #f2f2f2; border-width: 1px; border-collapse: collapse; padding: 5px 10px;}

.consultation .el-dialog__header{position: relative; padding: 30px 30px 10px 30px;}
.consultation .el-dialog__header::after{content: ""; position: absolute; left: 30px; right: 30px; bottom: 0; border-bottom: 1px solid #ECECEC;}
.consultation .el-dialog__headerbtn{top: 30px; right: 30px; font-size: 20px;}
.consultation .el-dialog__headerbtn .el-dialog__close{color: #222222;}
.consultation .el-dialog__headerbtn .el-dialog__close:hover{color: #E60012;}
.consultation .el-dialog__body{padding: 30px;}
.consultation .goods-info{display: flex;}
.consultation .goods-info .pic{width: 140px; height: 140px;}
.consultation .goods-info .con{flex: 1; padding-left: 20px;}
.consultation .goods-info .con .tit{font-size: 18px; font-weight: bold; color: #212427;}
.consultation .goods-info .con .code{color: #999999; padding-top: 10px;}
.consultation .goods-info .con .name{color: #000000; padding-top: 10px;}
.consultation .goods-info .con .desc{color: #999999; padding-top: 5px;}
.consultation .goods-info .text{padding-left: 50px; text-align: center;}
.consultation .goods-info .text .name{font-size: 16px; color: #222222;}
.consultation .goods-info .text .desc{color: #999999; padding-top: 20px;}
.consultation .form{}
.consultation .form .annex{margin-top: 20px;}
.consultation .form .annex .upload{border: 1px solid #ECECEC; border-radius: 5px; width: 140px; height: 140px; display: flex; justify-content: center; align-items: center;}
.consultation .form .annex .pic{width: 140px; height: 140px; display: block;}
.consultation .form .annex .icon{font-size: 40px; font-weight: bold; color: #ECECEC;}
.consultation .form .annex .slot{width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #3ED299;}
.consultation .form .annex .slot i{font-size: 36px; color: #3ED299;}
.consultation .form .tit{padding-top: 40px; padding-bottom: 20px; border-bottom: 1px solid #ECECEC; font-size: 24px; color: #222222;}
.consultation .form .el-form{padding-top: 20px;}
.consultation .form .el-form-item{margin-bottom: 25px;}
.consultation .form .el-input__inner{border-radius: 0;}
.consultation .form .el-input__inner:focus{border-color: #222222;}
.consultation .form .el-form-item__label{padding-bottom: 0;}
.consultation .form .el-form-item__label::before{display: none;}
.consultation .form .el-form-item__label .label{color: #222222;}
.consultation .form .el-form-item__label .label span{color: #E60012;}
.consultation .btn{width: 180px; padding-top: 20px; padding-bottom: 20px; margin: 0 auto;}
.consultation .btn .el-button--primary{background-color: #E60012; border-color: #E60012; width: 100%; font-size: 16px;}

.submission{font-size: 16px; line-height: 1.5; color: #999999;}
.submission .tit{color: #222222; font-weight: bold; padding-bottom: 8px;}
.submission .desc{color: #222222; padding-top: 50px; padding-bottom: 20px;}

.product-rec{padding-top: 100px;}
.product-rec .tit{font-size: 24px; font-weight: bold; padding-bottom: 30px;}
.product-rec .swiper-wrapper{padding-bottom: 60px;}
.product-rec .swiper-slide{width: auto;}
.product-rec .swiper-slide .item{width: 240px;}
.product-rec .swiper-slide .item .pic{width: 240px; height: 240px;}
.product-rec .swiper-slide .item .name{margin: 20px; height: 20px; line-height: 20px; text-align: center;}
.product-rec .swiper-pagination-bullet{height: 3px; width: 40px; background: #CCCCCC; border-radius: 2px;}
.product-rec .swiper-pagination-bullet-active{background: #000000;}

.order-process{color: #212427; padding-top: 50px;}
.order-process .con{display: flex; justify-content: space-between;}
.order-process .con .item{width: 292px; background: #F7F7F7; border-radius: 5px; padding-top: 60px; padding-bottom: 20px; text-align: center;}
.order-process .con .item .icon{width: fit-content; height: 68px; display: block; margin: 0 auto;}
.order-process .con .item .name{padding-top: 20px; padding-bottom: 15px; font-weight: bold; color: #212427;}
.order-process .con .item .desc{padding: 0 25px; line-height: 1.5; font-size: 14px; color: #989898;}

.attribute .el-menu--horizontal>.el-menu-item{padding: 0 60px 15px; height: auto; line-height: normal; font-size: 18px; color: #212427;}
.attribute .el-menu--horizontal>.el-menu-item.is-active{color: #E60012; border-color: #E60012; font-weight: bold;}

.evaluate{padding-top: 80px;}
.evaluate .content{padding-bottom: 70px;}
.evaluate .swiper-wrapper{padding-bottom: 60px;}
.evaluate .swiper-slide{width: auto;}
.evaluate .swiper-slide .item{width: 370px; background: #ffffff; border: 1px solid #CCCCCC; padding: 30px;}
.evaluate .swiper-slide .item .name{padding-top: 10px; font-size: 20px; font-weight: bold; color: #212427;}
.evaluate .swiper-slide .item .desc{font-size: 14px; color: #989898; padding-bottom: 15px; padding-top: 8px; border-bottom: 1px solid #CCCCCC;}
.evaluate .swiper-slide .item .text{color: #212427; font-size: 14px; line-height: 1.5; padding-top: 10px; height: 94px;}
.evaluate .swiper-slide .item .other{padding-top: 20px; display: flex; align-items: center; justify-content: space-between;}
.evaluate .swiper-slide .item .other .icon{height: 32px; border-radius: 16px;}
.evaluate .swiper-slide .item .other .el-rate__icon{font-size: 20px;}
.evaluate .swiper-pagination-bullet{height: 3px; width: 40px; background: #CCCCCC; border-radius: 2px;}
.evaluate .swiper-pagination-bullet-active{background: #000000;}

.link-pro{padding-top: 30px;}
.link-pro .name{font-weight: bold; font-size: 18px;}
.link-pro .text{padding-top: 15px;}
.link-pro .text a{display: inline-block; height: 34px; line-height: 34px; padding: 0 15px; border: 1px solid #CCCCCC; color: #989898; font-size: 14px; margin-right: 10px; margin-bottom: 15px;}
.link-pro .text a:hover{color: #E60012; border-color: #E60012;}

.option-list{padding-top: 40px;}
.option-list .item{margin-bottom: 80px; border-bottom: 1px solid #CCCCCC;}
.option-list .item:last-child{margin-bottom: 0; border-bottom: none;}
.option-list .item .tit{font-size: 18px; color: #212427; font-weight: bold; padding-bottom: 30px;}
.option-list .item .sub-tit{font-size: 18px; color: #212427; font-weight: bold; padding-bottom: 30px;}
.option-list .item .con{display: flex; flex-wrap: wrap;}
.option-list .item .con .li{width: 300px; margin: 0 10px 40px;}
.option-list .item .con .li .pic{width: 100%; height: 300px;}
.option-list .item .con .li .name{padding: 20px 20px 10px; height: 30px; line-height: 30px; font-weight: bold; color: #000000;}
.option-list .item .con .li .code{padding: 0 20px 20px; font-size: 14px; color: #989898;}
.option-list .item .con .li:hover{box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1); border-radius: 5px;}

.error .content{padding: 100px 0; display: flex; justify-content: space-between; align-items: center;}
.error .content .text{width: 600px;}
.error .content .tit{font-size: 36px; font-weight: bold; color: #212427; padding-bottom: 20px;}
.error .content .desc{color: #989898; line-height: 1.7;}
.error .content .btn{padding-top: 50px;}
.error .content .pic .icon{display: block; margin: 0 auto 36px;}