@import url("common.css");
body {font-size: 14px; font-weight: 100; min-width: 1600px;}
.layui-container {width: 1230px;padding-left: 15px; padding-right: 15px;}


/* 首页 */
.main-box {width: 1600px; padding-left: 20px; padding-right: 20px; margin-left: auto; margin-right: auto;}

.banner .swiper-slide {display: flex; justify-content: center;}
.banner .swiper-slide a {width: 100%; display: block;}
.banner .swiper-slide a img {width: 100%;}
.banner .layui-container {position: absolute; z-index: 999; width: 1200px;left: 50%;margin-left: -600px; height: 50px; top: 50%;margin-top: -25px;}
.banner-prev, .banner-next {z-index: 99999; position: absolute; top: 50%; margin-top: -20px; display: inline-flex; color: #fff; width: 50px; height: 50px; justify-content: center; align-items: center;background-color: rgba(0,0,0,0.3); }
.banner-prev i, .banner-next i {font-size: 28px;color: #999;}
.banner-prev:hover, .banner-next:hover {background-color: rgba(0,0,0,0.5);}
.banner-next {right: 0;}

.header {display: flex; justify-content: space-between; background-color: #EBF0F4;}
.biaoyu {display: flex; align-items: center;width: 400px; justify-content: center; font-size: 16px; font-weight: bold; padding-left: 20px;}
.header nav {flex: 1; display: flex; align-items: center; margin-left: 40px; margin-right: 40px; justify-content: space-around;}
.header nav a {display: flex; justify-content: center; font-size: 18px; font-weight: 400; height: 60%; align-items: center; white-space: nowrap;}
.header nav a:hover {border-bottom: 2px solid var(--activeColor);}
.toolbar {display: flex; align-items: center;padding-right: 20px;}
.shop {margin-left: 20px;width: 177px; height: 55px; }
.shop a {color: #fff;background: url(../images/shop.png) center no-repeat; text-align: center; color: #fff; line-height: 53px; font-size: 18px; display: block;}

.chanpin-leibie {margin-top: 80px; }
.chanpin-leibie .t {display: flex; justify-content: space-between;}
.desc {font-size: 20px; margin-top: 15px; color: #888;}
.procate.left {margin-right: 40px; width: 479px;}
.procate.left >a {display: flex; justify-content: space-between; align-items: center; font-size: 24px; border-bottom: 2px solid #868686;padding-bottom: 25px;padding-top: 25px;}
.procate.left >a p { font-size: 18px; line-height: normal; display: none;}
.procate.left >a >span {display: flex; background-color: #868686; width: 36px; height: 36px; border-radius: 100%; flex-shrink: 0; align-items: center; justify-content: center; color: #fff;}
.procate.left >a:hover {color: var(--activeColor); border-color: var(--activeColor);}
.procate.left >a:hover >span {background-color: var(--activeColor);}

.procate.left >a.active {color: var(--activeColor); border-color: var(--activeColor);}
.procate.left >a.active >span {background-color: var(--activeColor);}

.procate-slide >.right >a {display: none;}
.procate-slide >.right >a.active {display: flex;}

.tuijian-block {background: url(../images/index_pro_bg.jpg) center no-repeat; background-size: cover; margin-top: 80px; padding-top: 60px; padding-bottom: 60px;}
.tuijian-block .t {display: flex; justify-content: space-between; border-bottom: 3px solid #999; padding-bottom: 20px; align-items: center;}
.tuijian-block .t >span {font-size: 26px; font-weight: 600; display: flex; align-items: center; color: var(--activeColor);}
.tuijian-block .t >span >img {margin-right: 10px;}

.telbox {display: flex; align-items: center;}
.telbox span {margin-right: 6px; font-size: 24px;}
.telbox div {font-size: 18px; line-height: 1.4;}
.telbox div p {font-size: 26px; font-weight: 600;}

.pro-lists {gap: 20px; margin-top: 30px;}
.pro-lists a {display: block; background: #fff;}
.pro-lists a >.img {display: block; aspect-ratio: 4/3;}
.pro-lists a >.img >img {width: 100%; height: 100%; object-fit: contain;}
.pro-lists a >p {background-color: #f9f9f9; text-align: center;padding: 15px 0; font-size: 18px;}
.pro-lists a:hover >p {background-color: var(--activeColor); color: #fff;}

.about-block {background: url(../images/index_about_left_bg.jpg) left bottom no-repeat; padding-top: 80px;}
.about-nb-block {background: url(../images/index_about_img.jpg) right top no-repeat;}
.about-block .t-name {font-size: 24px;}
.about-block .com-name {font-size: 36px; font-weight: 600; line-height: normal; margin-top: 20px;}
.about-block .enname {font-size: 24px; color: #999;}
.about-block .about-info {margin-top: 20px; font-size: 16px; width: clamp(600px,50%,700px); }
.about-block .about-info p {text-indent: 2em; margin-bottom: 15px;}
.about-block .number-box {margin-top: 40px; height: 316px; width: clamp(600px,50%,700px);}
.about-block .number-box ul {display: flex; height: 100%; align-items: center;}
.about-block .number-box ul li {width: 25%; color: #fff; font-size: 13px; font-weight: 500;}
.about-block .number-box ul li p {font-size: 48px; font-weight: 600;}
.about-block .number-box ul li p span {font-size: 20px; font-weight: 100;}

.news-block {margin-top: 80px;}
.news-block .t {display: flex; align-items: center; justify-content: space-between;}
.news-box {margin-top: 40px;}
.news-box .img >a {display: block; aspect-ratio: 16/9;}
.news-box .img >a >img {width: 100%; height: 100%; object-fit: cover;}
.news-box .left {width: 45%;}
.news-box .right {flex: 1; border-left: 3px solid #eee;}
.news-box .left .info {display: flex; align-items: center; margin-top: 15px;}
.news-box .left .info .date {display: block; width: 100px; text-align: center; font-size: 20px; line-height: normal; border-right: 3px solid #ddd;}
.news-box .left .info .date p {font-size: 48px; font-weight: 500;}
.news-box .left .info .title-con {flex: 1; margin-left: 20px;}
.news-box .left .info .title-con h3 {font-size: 20px;}
.news-box .left .info .title-con p {color: #999;}

.news-subnav {display: flex;}
.news-subnav li {border-left: 1px solid #ddd; line-height: 15px; font-size: 20px;padding-left: 50px; margin-right: 50px; font-weight: 500;}
.news-subnav li:nth-child(1) {border-left: none; padding-left: 0;}

.news-item {display: flex; justify-content: space-between; align-items: center; margin-top: 35px; border-bottom: 1px solid #ddd; padding-bottom: 35px;}
.news-item .date {width: 100px; text-align: center;font-size: 20px; line-height: normal;}
.news-item .date p {font-size: 48px; font-weight: 500;}
.news-item .left {flex: 1;}
.news-item .left p {color: #999;}
.news-item h3 {font-size: 20px;}

.lianxi-block {background: url(../images/zixun_bg.jpg) center no-repeat; background-size: cover; margin-top: 60px; padding-top: 60px; padding-bottom: 60px;}
.lianxi-block .main-box {display: flex; justify-content: space-between;}
.lianxi-block .main-box >.left {width: 700px; color: #fff;}
.lianxi-block .main-box >.right {flex: 1; margin-left: 200px;}
.lianxi-block .main-box >.left .font-48 {font-weight: 600; box-shadow: inset 0px -10px 0px #2487C0; line-height: normal; display: inline-block;}
.lianxi-block .main-box >.left >p {font-size: 20px; margin-top: 20px;}
.zixun-tel {margin-top: 60px; display: flex;}
.zixun-tel .zixun {margin-right: 40px;}

#form-liuyan .left {width: 50%;}
#form-liuyan .right {width: 50%;}
#form-liuyan input {width: 100%; border: none; background-color: rgba(255,255,255,0.8); height: 50px;padding: 0 15px; color: #000;}
#form-liuyan textarea {width: 100%; border: none; background-color: rgba(255,255,255,0.8); height: 130px;padding: 15px; color: #000;}
#form-liuyan button {background-color: #fff; width: 100%; height: 60px; border: none; font-size: 18px;}

.footer {background-color: #0B0B0B; color: #fff; padding-top: 40px;}
/*.footer .layui-container {display: flex;}*/
.footer .main-box .left {width: 25%;}
.footer .main-box .mid {flex:1;margin-left: 30px;}
.footer .main-box .right {width: 30%;}
.footer .main-box .left .font-36 {font-weight: 600; line-height: normal; letter-spacing: 10px;}
.footer .main-box .left .font-22 {font-weight: 500; line-height: normal;}
.footer .left .yewu {color: #aaa;}
.footer .left .more {color: #fff; background-color: var(--activeColor); display: inline-block; width: 160px; text-align: center; height: 50px; line-height: 50px; border-radius: 8px;}
.footer .left .more:hover {opacity: 0.9;}

.footer .fnav {border-left: 1px solid #333; margin-right: 20px; font-size: 13px;}
.footer .fnav a {display: block; color: #aaa; line-height: 3;}
.footer .fnav a:before {content: '—'; color: #333; margin-right: 10px;}

.footer .t {font-size: 24px;}
.footer .t span {display: block; width: 50px; height: 3px; background-color: var(--activeColor);}

.flianxi {color: #aaa;}
.flianxi li {margin-bottom: 12px;line-height: 32px;}
.flianxi li:nth-child(1) {background: url(../images/footer_lianxi_bg.png) 0px 0px no-repeat; padding-left: 35px;}
.flianxi li:nth-child(2) {background: url(../images/footer_lianxi_bg.png) 0px -50px no-repeat; padding-left: 35px;}
.flianxi li:nth-child(3) {background: url(../images/footer_lianxi_bg.png) 0px -103px no-repeat; padding-left: 35px;}
.flianxi li:nth-child(4) {background: url(../images/footer_lianxi_bg.png) 0px -152px no-repeat; padding-left: 35px;}

.copyrights {color: #aaa;padding-top: 10px; padding-bottom: 15px;}
.copyrights a {color: #aaa;}

.nybanner {display: flex; justify-content: center; margin-bottom: 40px;}
.nybanner img {width: 100%;}

.subnav {display: flex; justify-content: space-between; gap: 40px;}
.subnav >a {display: inline-block; background-color: #eee; width: 25%; line-height: 50px; text-align: center; border-radius: 8px; font-size: 16px;}
.subnav >a:hover {background-color: var(--activeColor); color: #fff;}
#gsjj {background-image: linear-gradient(to bottom,#f9f9f9,#ffffff); margin-top: 40px; padding-top: 60px;}
.gsjj {background: url(../images/about_img.jpg) right center no-repeat;padding-bottom: 100px;}
.title {font-size: 30px; font-weight: 500; }
.title span {display: block;background-color: var(--activeColor); height: 3px; width: 60px;}
.gsjj-box {width: clamp(800px, 40%, 900px); background-color: #FCFCFA; box-shadow: 0px 5px 15px rgba(0,0,0,0.1); padding: 50px; border-radius: 15px; font-size: 17px; margin-top: 40px; line-height: 2;}

#gslc {background-color: #FCFCFA; margin-top: 50px; display: flex;}
.gslc-info {width: 700px; padding: 50px;}
.gslc-txt {margin-top: 40px;font-size: 18px; line-height: 2.5;}

#qywh {margin-top: 50px;}
.qywh-box {margin-top: 30px; display: flex; align-items: start;}
.qywh-txt {font-size: 18px; line-height: 2.5; padding: 10px 40px; border-left: 3px solid #ddd; margin-left: 50px;}

#jqsj {background: url(../images/shijing_bg.jpg) center bottom no-repeat; background-size: cover;padding-top: 60px; padding-bottom: 60px;}
#jqsj .title {text-align: center;}
#jqsj .title span {margin-left: auto; margin-right: auto;}
#jqsj p.font-18 {text-align: center;margin-top: 15px; color: #999;}

.jqsj-box {display: flex; margin-top: 50px;}
.jqsj-txt {background-color: #fff; margin-right: 30px; padding: 30px 40px; border-radius: 15px; font-size: 16px; box-shadow: 0px -10px 15px rgba(0,0,0,0.05); flex: 1;}
.jqsj-img {width: 760px;}
.jqsj-img img {width: 100%; height: 100%; object-fit: cover;}

.lxwm-t {text-align: center; font-size: 24px;}
.lxwm-t p {font-size: 16px; color: #999; line-height: normal;}

.lxwm-list {margin-top: 60px; display: flex; justify-content: space-between;}
.lxwm-list >li {text-align: center; width: 20%;}
.lxwm-list >li >p {margin-top: 10px;}

.lxwm-liuyan {background-color: #f5f5f5; margin-top: 60px; padding-top: 50px; padding-bottom: 50px;}
.liuyan-form {margin-top: 50px;}
.lxwm-liuyan-input {gap: 30px; display: flex;}
.lxwm-liuyan-input > div {width: 50%;}
.liuyan-form .content {margin-top: 30px;}
.liuyan-form input {box-shadow: -1px -1px 3px rgba(0,0,0,0.1);}
.liuyan-form textarea {box-shadow: -1px -1px 3px rgba(0,0,0,0.1);}
.liuyan-form button {box-shadow: 1px 1px 1px rgba(0,0,0,0.1);}

.gsdz-block {margin-top: 60px;}
.gsdz-block .map {margin-top: 40px; margin-bottom: 60px; }
.gsdz-block .map img {width: 100%; }

.xwdt-item {background-color: #fff; border: 1px solid #ddd; border-top: none; padding: 25px; display: flex; transition: all 0.5s;}
.xwdt-item .img {aspect-ratio: 16/11; width: 200px; margin-right: 20px;}
.xwdt-item .img img {width: 100%; height: 100%; object-fit: cover;}
.xwdt-item .zxdt-info {flex: 1; position: relative;}
.xwdt-item .zxdt-info h3 {font-weight: normal;line-height: normal;}
.xwdt-item .zxdt-info p {font-size: 14px; color: #666;}
.xwdt-item .zxdt-info .date {font-size: 13px; color: #888;}
.xwdt-item .zxdt-info span {position: absolute;background-color: #f5f5f5; display: inline-flex; width: 30px; height: 30px; justify-content: center; align-items: center; border-radius: 50%; color: #888; right: 0; bottom: 0;}
.xwdt-item:hover .zxdt-info h3 a {color: var(--activeColor);}
.xwdt-item:hover .zxdt-info span {background-color: var(--activeColor);}
.xwdt-item:hover .zxdt-info span a {color: #fff;}
.xwdt-item:hover {transform: scale(1.01); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);}

.subnav {justify-content: center;}

.hyxw-block {margin-top: 40px;}
.news-t {font-size: 32px; font-weight: 600; }
.news-t span {display: block;width: 60px; height: 3px; background-color: var(--activeColor);}
.hyxw-box {display: flex; gap: 30px; margin-top: 30px;}
.hyxw-box .item {width: 33.33333%;}
.hyxw-box .item .img {display: block; aspect-ratio: 16/9;}
.hyxw-box .item .img img {width: 100%; height: 100%; object-fit: cover;}
.hyxw-box .item h3 {margin-top: 10px;}
.hyxw-box .item .date {color: #999;}
.hyxw-box .item p {color: #666;}
.hyxw-box .item .more {display: inline-block; border: 1px solid #ccc; line-height: 40px; padding: 0 30px; border-radius: 26px; margin-top: 15px;}
.hyxw-box .item .more:hover {border-color: var(--activeColor); background-color: var(--activeColor); color: #fff;}

.xwdt-block {background-color: #f5f5f5; margin-top: 60px; padding-top: 50px; padding-bottom: 50px;}
.xwdt-block .t {text-align: center; font-size: 32px; font-weight: 600;margin-bottom: 30px;}