@charset "utf-8";
  html,body{ height: 100%; width: 100%; overflow-x: hidden;}
/* CSS Document */
/*==========3DSOURCE零件库在线版 css==========*/
.banner_20240626{ width: 100%; height: calc(100% - 66px); margin-top: 66px; background: url(../images/online/bg2.jpg)no-repeat center center; background-size: 100% 100%; overflow: hidden; display: flex; align-items: center; min-width: 1366px; position: relative; justify-content: space-between;}
.banner_20240626 .img{ position: absolute;  right: 8%; z-index: 1; max-width: 830px; width: 60%; height: auto;}
.banner_20240626 .text_left_box{position: absolute; left: 10%;  z-index: 2;}
.banner_20240626 .text_left_box .btn{ display: flex; justify-content: flex-start; margin-top: 40px;}
.banner_20240626 .text_left_box .text h1{ font-size: 54px; color: #000; font-weight: bold;}
.banner_20240626 .text_left_box .text h1 i{ font-size: 16px; color: #fff; background: linear-gradient(90deg,#f69257,#f36f29); border-radius: 15px 0 15px 0; padding: 8px 10px; vertical-align: text-top; font-weight: lighter; margin-left: 10px;}
.banner_20240626 .text_left_box .text p{ font-size: 30px; color: #000;}
.banner_20240626 .text_left_box a{ color: #fff; font-size: 20px; width: 298px; height: 64px; border-radius: 10px; background: #f86d22; display: block; line-height: 64px; text-align: center; margin-top: 40px; margin-bottom: 30px; border: 1px solid #f36921; margin-right: 20px;}
.banner_20240626 .text_left_box a i{ width: 20px; height: 14px; display: inline-block;  background: url(../images/index/arrow_white.png)no-repeat center center; margin-left: 40px;}


.banner_20240626 .text_left_box ul{ display: flex; justify-content: space-between; border-top: 1px solid #bbb; padding-top: 40px; margin-top: 140px;}
.banner_20240626 .text_left_box ul li h1{font-size: 36px; font-weight: bold; color: #000;}
.banner_20240626 .text_left_box ul li p{ font-size: 20px; padding:10px 0; font-weight: lighter;}

.produce_box{ width: 100%; background: #fbfbfb; min-width: 1366px;}
.produce_box .produce_menu{ width: 100%; background: #ff803d;}
.produce_box .produce_menu ul{ width: 82%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; cursor: pointer;}
.produce_box .produce_menu ul li{ width: 25%; text-align: center; overflow: visible; position: relative;}
.produce_box .produce_menu ul li img{ padding: 20px 0 10px; height: 36px;}
.produce_box .produce_menu ul li p{ font-size: 20px; color: #fff; padding:  0 0 30px;}
.active2{ background: #f36921;}
.produce_box .produce_menu ul li i{ width: 24px; height: 10px; background: url(../images/online/zhishi.png)no-repeat center center; background-size: 100% 100%; position: absolute; bottom: -10px; display: none;margin-left: -12px;}
.produce_box .produce_menu ul li .active1{ display: inline-block;}

.produce_box1{ width: 82%; margin: 0 auto; }
.produce_box1 .produce_text{display: flex;align-items: center; justify-content: space-between; flex-direction: row; padding: 50px 0; flex-wrap: nowrap; width: 90%; margin: 0 auto;}
.produce_box1 .produce_text p{ max-width: 600px;}
.produce_box1 h2{ font-size: 24px; color: #000; padding-bottom: 10px;}
.produce_box1 p{ font-size: 16px; color: #666; line-height: 28px; padding-bottom: 20px;}

.video_box,.video_box2{ position: fixed; top:0; left: 0; z-index: 1000; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); text-align: center; align-items: center; display: none;}
.video{ width: auto; height: 60%; margin: 0 auto; margin-top: 20px; position: relative;}
.video video{ height: 100%; width: auto;;}
.video .ico_close{ position: absolute; top: -62px; right: -62px; cursor: pointer;}


.produce_box3{ width: 82%; margin: 0 auto;}
.produce_box3 ul{ width: 90%; margin: 0 auto;}
.produce_box3 ul li{ width: 100%; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #ddd; padding: 50px 0;}
.produce_box3 ul li h2{ font-size: 24px; color: #000; padding-bottom: 10px;}
.produce_box3 ul li p{ font-size: 16px; color: #666; line-height: 28px; padding-bottom: 20px;}
.produce_box3 ul li .img{ }
.produce_box3 ul li a{ color: #f86d22; border:1px solid #f86d22; font-size: 16px;   padding: 6px 20px; border-radius: 60px; margin: 20px 0 20px; display: inline-block; font-weight:inherit;}

.produce_box4{ width: 82%; margin: 0 auto; padding: 50px 0;}
.produce_box4 .text{ width:calc(100% - 750px); text-align: left; margin-right: 20px;}
.produce_box4 .text img{ width:90%;}
.produce_box4 h2{ font-size: 24px; color: #000; padding-bottom: 10px;}
.produce_box4 p{ font-size: 16px; color: #666; line-height: 28px; padding-bottom: 20px;}

.online_scroll{ width: 100%; min-width: 1366px; padding-bottom: 120px;}
.online_scroll p{ font-size: 36px; text-align: center; padding: 100px 0 50px;}


.changshang_box{width: 100%; min-width: 1366px; background: #f9f9f9; padding-bottom: 100px;}
.changshang_box h1{ font-size: 36px; text-align: center; padding: 100px 0 50px;}
.changshang_box .text_box{ width: 76%; display: flex; margin: 0 auto; align-items: center; justify-content: space-between; flex-wrap: nowrap;}
.changshang_box .text_box .text{ width: 40%;}
.changshang_box .text_box .text p{ font-size: 16px; line-height: 28px; max-width: 600px; text-align: left; text-align: justify;}
.changshang_box .text_box .text a{ color: #f86d22; border:1px solid #f86d22; font-size: 16px;   padding: 6px 20px; border-radius: 60px; margin: 20px 0 20px; display: inline-block; font-weight:inherit;}
.changshang_box .text_box img{ margin-right: 5%;}



.hotmenu{ width: 100%; margin: 0 auto 30px; min-width: 1366px; padding-bottom: 80px;}
.hotmenu h1{ font-size: 36px; text-align: center; padding: 100px 0 50px;}
.hotmenu ul{ width: 82%; display: grid; grid-template-columns: repeat(auto-fill, 122px); grid-template-rows: 160px;column-gap: 16px; justify-content: space-between; height: 316px; overflow-y: hidden; margin: 0 auto; overflow: hidden;}
.hotmenu ul li{ width: 122px; margin-right: 10px;}
.hotmenu ul li a{ width: 122px; height: auto; display: block; position: relative;;}
.hotmenu ul li a:hover{ margin-top: -6px; transition: 0.1s ease;}
.hotmenu ul li a i{ width: 19px; height: 19px; display: inline-block; background: url(images/HOT.png)no-repeat center center; background-size: 100% 100%; position: absolute; top: 0; right: 8px;}
.hotmenu ul li .img{ width: 120px; height: 120px; border-radius: 4px; border: 1px solid #e9edf4; align-items: center; text-align: center; font-size: 0;}
.hotmenu ul li .img img{ width: 100%; height: auto;}
.hotmenu ul li p{ text-decoration: none; font-size: 14px; text-align: center; color: #171717; padding-bottom: 20px; padding-top: 6px;}



.product_price{ width: 100%; background: url(../images/online/price_bg.jpg)no-repeat center top; background-size: 100% 100%; min-width: 1366px; overflow: hidden;}
.product_price .title{ text-align: center;}
.product_price .title h1{ font-size: 36px ; padding: 90px 0 10px;}
.price_box{width: 84%; display: flex; padding: 70px 8%; align-items:flex-start; justify-content: space-between}
.price_box .img{ width: 50%; display: flex; align-items: center; justify-content: center;}
.price_box .img img{width: 100%; max-width: 558px;}
.price_box .text{ width: 40%; padding: 0 5%;}
.price_box .text ul{ width: 100%; display: flex; flex-direction: column; align-items: flex-start;}
.price_box .text ul li{ display: flex; justify-content: center; align-items: center; margin-bottom: 30px;}
.price_box .text ul li .img1{ border: 1px solid #171717; border-radius: 20px;}
.price_box .text ul li p{ font-size: 24px; padding-left: 40px; font-weight: 400;}


.banben_box{width: 750px; }
.banben_table{width: 750px;margin: 0 auto;border-right: 1px solid #e5e5e5;border-top: 1px solid #e5e5e5;background: #fff; border-radius: 14px; overflow: hidden; }
.banben_table tr th{background: #f7f7f7;color: #000;line-height: 50px;font-size: 16px;border-left: 1px solid #e5e5e5;border-bottom: 1px solid #e5e5e5;font-weight: bold;padding: 8px 16px;}
.banben_table tr td{border-left: 1px solid #e5e5e5;border-bottom: 1px solid #e5e5e5;height: 40px;text-align: center; padding: 8px 16px;}
.banben_table tr td b{ padding: 0 6px;}
.banben_table tr td p{font-size: 16px;color: #444;line-height: 30px;}
.banben_table tr td p span{color: #ff414c;font-size: 18px;}
.banben_table tr td p span b{font-size: 26px;font-weight: normal;}

.guding_box{ width: 100%; height: 100px; background: rgba(0, 0, 0, 0.7);}
.guding_box .box_text{ width: 72%; margin:  0 auto; display: flex; align-items: center; justify-content: space-between;height: 100px;}
.guding_box .box_text h1{ font-size: 30px; color: #fff;}
.guding_box .box_text a{color: #fff; font-size: 20px; width: 298px; height: 64px; border-radius: 10px; background: #f86d22; display: block; line-height: 64px; text-align: center;  border: 1px solid #f36921; margin-right: 20px;}
.guding_box .box_text a i{ width: 20px; height: 14px; display: inline-block;  background: url(../images/index/arrow_white.png)no-repeat center center; margin-left: 40px;}

.fixed_box{ position: fixed; bottom: 0; left: 0; z-index: 999;}




#marquee-box{
	width:100%;
	overflow: hidden;
	height:200px;
  margin-bottom: 20px;
}
#marquee-box2{
	width:100%;
	overflow: hidden;
	height:200px
}
#marquee-con{
	width:500%;
	float:left;
}
#marquee-con2{
	width:500%;
	float:left;
}
#marqueeleft,#marquee-1{
	float:left;
}
#marqueeright,#marquee-2{
	float:left;
}
.marquee-img{
	float:left;
	height:160px;
	width: 160px;
  padding: 10px;
	margin-left:22px;
  border:1px solid #ddd;
  border-radius: 10px;
}

#marqueeright .marquee-img{
	float:left;
  height:160px;
	width: 160px;
  padding: 10px;
	margin-left:22px;
  border:1px solid #ddd;
  border-radius: 10px;
}


.box4{display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; width: 90%; margin: 0 auto; padding: 50px 0;}
.banner_20240626 .text_left_box .wangyebtn{width: 30%; max-width: 190px; min-width: 140px;}
.banner_20240626 .text_left_box .mobilewangyebtn{ display: none;}
@media(max-width:1669px)
{
  .banner_20240626 .img{transform: scale(0.9, 0.9); right: 50px;}
  .banner_20240626 .text_left_box{transform: scale(0.9, 0.9);left: 100px;}
  .banner_video,.banner_video2{ width: 550px;}
  .produce_box1,.produce_box3,.produce_box4{  width: 95%;}
  .produce_box .produce_menu ul{ width: 90%;}
  .guding_box .box_text{transform: scale(0.80, 0.80); width: 95%;}
}
@media(max-width:1500px)
{
  .banner_20240626 .img{transform: scale(0.80, 0.80); right: -30px;}
  .banner_20240626 .text_left_box{transform: scale(0.80, 0.80);left: 50px;}
	.banner_video,.banner_video2{ width: 550px;}
	.produce_box1,.produce_box3,.produce_box4{  width: 95%;}
	.produce_box .produce_menu ul{ width: 90%;}
	.guding_box .box_text{transform: scale(0.80, 0.80); width: 95%;}
}
@media(max-width:1369px)
{
	.banner_20240626 .img{transform: scale(0.5, 0.5); right: -30px;}
	.banner_video,.banner_video2{ width: 500px;}
	.produce_box1,.produce_box3,.produce_box4{  width: 95%;}
	.produce_box .produce_menu ul{ width: 100%;}
	.guding_box .box_text{transform: scale(0.80, 0.80); width: 95%;}

}
@media(max-width:960px)
{
	.banner_20240626{ min-width: 0; height: 500px;}
	.banner_20240626 .text_left_box .text h1{ font-size: 20px; text-indent: 0; padding-top: 30px; white-space: nowrap;}
	.banner_20240626 .text_left_box .text h1 i{ font-size: 12px; border-radius: 6px 0 6px 0; padding: 4px; white-space: nowrap;}
	.banner_20240626 .text_left_box .text p{ font-size: 14px;white-space: nowrap;}
	.banner_20240626 .text_left_box{ left: 15px; height: 500px; width:calc(100% - 30px); top: 0;}
	.banner_20240626 .text_left_box a{ width: 40%; height: 44px; line-height: 44px; font-size: 14px; margin-top: 0; margin-right: 0;}
	.banner_20240626 .text_left_box .btn #add{ width: 60%; margin-right: 20px;}
	.banner_20240626 .text_left_box a:nth-child(2){ width: 148px!important;}
	.banner_20240626 .text_left_box a i{ margin-left: 0; width: 14px; height: 10px; background-size: 100% 100%;}
	.banner_20240626 .text_left_box .btn{ margin-top: 20px; width: 100%;}
	.banner_20240626 .text_left_box ul li h1{ font-size: 18px;}
	.banner_20240626 .text_left_box ul li p{font-size: 12px; font-weight: normal;}
	.banner_20240626 .text_left_box ul{ position: absolute; left: 0; bottom: 0; width: 100%; border-top: none;}
	.banner_20240626 .img{ right: 0; width: 84%; position: absolute; bottom: 50px; left: 8%; max-width: 400px;}
	.produce_box{ min-width: 0;}
	.produce_box .produce_menu ul li img{ height: 14px;}
	.produce_box .produce_menu ul li p{ font-size: 12px; padding: 0 10px 20px;}
	.produce_box .produce_menu ul li{ width: calc(25% - 4px);}
	.produce_box .produce_menu ul li i{ width: 12px; height: 5px; bottom: -5px; margin-left: -6px;}
	.produce_box1 .produce_text{ flex-direction: column; padding: 30px 0;}
	.produce_box1 h2{ font-size: 18px; font-weight: bold;}
	.produce_box1 p{ font-size: 14px;}
	.banner_video, .banner_video2{ width: 100%;}
	.produce_box3 ul li{ flex-direction: column; padding: 30px 0;}
	.produce_box3 ul li h2{ font-size: 18px; font-weight: bold; }
	.produce_box3 ul li p{ font-size: 14px;}
	.produce_box3 ul li .img{ display: none;}
	.produce_box3 ul li .img img{width: 80%;}
	.produce_box3 ul li a{ margin: 0;}
	.produce_box4 .text{ width: 100%; margin-left: 0;}
	.produce_box1, .produce_box3, .produce_box4 .box4{ flex-direction: column; width: calc(100% - 30px); padding: 30px 0;}
	.produce_box4 .text img{ display: none;}
	.produce_box4{ padding: 0 0;}
	.produce_box4 h2{  font-size: 18px; font-weight: bold;}
	.produce_box4 p{ font-size: 14px; }
	.banben_box{ width: 100%;}
	.banben_table{ width: 100%;}
	.banben_table tr th{ font-size: 12px; line-height: 22px;}
	.banben_table tr td{ font-size: 12px; height: 10px;}
	.online_scroll{ min-width: 0; padding-bottom: 50px;}
	.online_scroll p{ font-size: 24px;padding: 50px 0 20px;}
	.marquee-img{ width: 80px!important; height: 80px!important;}
	#marquee-box{ height: 101.5px;}
	#marquee-box2{ height: 101.5px;}
	#marqueeright .marquee-img{ width: 80px; height: 80px;}
	.changshang_box{ min-width: 0; padding-bottom: 50px;}
	.changshang_box h1{ font-size: 24px;padding: 50px 0 30px;}
	.changshang_box .text_box{ width: calc(100% - 30px); flex-direction: column;}
	.changshang_box .text_box .text{ width: 100%;}
	.changshang_box .text_box .text p{ font-size: 14px;}
	.changshang_box .text_box img{ width: 100%;}
	.product_price{ min-width: 0; padding-bottom: ;}
	.product_price .title h1{ font-size: 24px; padding: 50px 0 30px;}
	.price_box{ width: calc(100% - 30px); flex-direction: column; padding: 0; margin: 0 auto;}
	.price_box .img{ width: 70%; margin: 0 auto;}
	.price_box .text{width: 100%; padding: 0;}
	.price_box .text ul{ flex-direction: row; padding: 0; justify-content: space-evenly;}
	.price_box .text ul li{ flex-direction: column;}
	.price_box .text ul li .img1{ border-radius: 8px;width: 48px;}
	.price_box .text ul li .img1 img{ width: 48px;}
	.price_box .text ul li p{ font-size: 14px; padding-left: 0; padding-top: 10px;}
	.hotmenu{ min-width: 0; padding-bottom: 10px;}
	.hotmenu h1{ padding: 50px 0 20px; font-size: 24px;}
	.hotmenu ul{width: calc(100% - 30px); grid-template-columns: repeat(auto-fill, 102px); height: 540px;grid-template-rows:140px;column-gap:8px; display: flex; flex-wrap: wrap; justify-content: center;}
	.fixed_box{ display: none;}
	.hotmenu ul li{ width: 102px; margin-right: 0;}
	.hotmenu ul li a{ width: 102px;}
	.hotmenu ul li p{ padding-bottom: 10px;}
	.hotmenu ul li .img{ width: 80px; height: 80px; padding: 10px;}
	.banner_20240626 .text_left_box .mobilewangyebtn{ display: block;width: 30%; max-width: 190px; min-width: 140px;}
	.banner_20240626 .text_left_box .wangyebtn{ display: none;}
}