body{
  background:#f2f6ff url(/images/headerbg.jpg) no-repeat center 52px;
}
body.nobg{
  background:#f7f8fc;
}
.header_hall{
  width:1200px;
  margin:0 auto;
  position:relative;
  padding:0;
  background:none;
  height:64px;
  display:flex;
  align-items:center;
}
.dialogue-box>div.view-goldCoin>i{
  display:none;
}
.dialogue-box>div.view-goldCoin:hover>i{
  display:block;
}
.banner{
  width:1200px;
  height:350px;
  margin:0 auto;
  border-radius:10px 10px 0 0;
  background:url(../images/bg.jpg) no-repeat center center;
  background-size:1200px auto;
  box-sizing: border-box;
  padding:24px;
  
}
.eh-logo{
  display:flex;
  gap:16px;
}
.eh-logo-box{
  background:#d63815;
  color:#fff;
  display:flex;
  box-sizing:border-box;
  padding:6px;
  width:80px;
  height:80px;
  border-radius:8px;
  font-size:22px;
  font-weight:bold;
}
.eh-logo-box.shortName {
  font-size: 26px;
  line-height: 31px;
  text-align: center; 
}
.eh-logo-box>div{
  display:flex;
  justify-content:center;
  align-items:center;
  overflow: hidden;
  width:68px;
  height:68px;
}
.eh-name h1,.eh-name h2{
  color:#fff;
  font-size:32px;
  font-weight:bold;
  letter-spacing:1px;
  text-shadow:0 0 4px rgba(200,0,0,1);
}
.eh-name p{
  display:flex;
  gap:10px;
  align-items:center;
  background:linear-gradient(to right top,#fff,#febe98);
  width:84px;
  border-radius:4px;
  padding:2px 10px;
  line-height:21px;
}
.eh-name p::before{
  content:"";
  display: block;
  width:16px;
  height:16px;
  background:url(../images/eh-ico01.png) no-repeat;
  background-size:100% auto;
}
.eh-info{
  display:flex;
  gap:24px;
  margin-top:24px;
}
.eh-carousel{
  width:466px;
  height:185px;
  overflow: hidden;
  position: relative;
}
.eh-carousel p{
  font-size:40px;
  font-style: italic;
  color:#672b09;
  font-weight:bold;
}
.eh-carousel span{
  font-size:16px;
  color:#531616;
}
.eh-carousel em{
  display:block;
  font-size:14px;
}
.eh-carousel .swiper-slide{
  background:url(../images/eh-ico02.png) no-repeat right center;
  background-size:auto 185px;
  box-sizing: border-box;
  padding:24px;
}
.eh-info-box{
  width:calc(100% - 490px);
  display:flex;
  box-sizing: border-box;
  padding:16px;
  flex-wrap: wrap;
  background:hsla(0, 0%, 100%, .88);
  border-radius:8px;
  gap:16px;
}
.eh-info-box>div{
  width:calc(65% - 16px);
  display:flex;
  align-items:center;
}
.eh-info-box>div:nth-child(1),.eh-info-box>div:nth-child(3){
  width:calc(35% - 16px);
  display:flex;
  align-items:center;
}
.eh-info-box span{
  display: flex;
  width:36px;
  height:36px;
  background:linear-gradient(to right bottom,#ff8d45,#da611b);
  border-radius:8px;
  justify-content: center;
  align-items:center;
  margin-right:16px;
}
.eh-info-box span::before{
  content:"";
  display: block;
  width:28px;
  height:28px;
}
.eh-icon01::before{
  background:url(../images/eh-ico05.png)no-repeat center center;
  background-size:100%;
}
.eh-icon02::before{
  background:url(../images/eh-ico06.png)no-repeat center center;
  background-size:100%;
}
.eh-icon03::before{
  background:url(../images/eh-ico03.png)no-repeat center center;
  background-size:100%;
}
.eh-icon04::before{
  background:url(../images/eh-ico04.png)no-repeat center center;
  background-size:100%;
}
.eh-info-box em{
  display: block;
}
.eh-info-box p{
  width:calc(100% - 52px);
  white-space: nowrap;
  text-overflow:ellipsis;
  overflow: hidden;
}
.eh-info-box a{
  color: #0189ff;
  text-decoration: underline;
  text-underline-position: under;
}
.eh-content{
  width:1200px;
  margin:-24px auto 0 auto;
  position:relative;
  z-index:1;
  display:flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding:0 24px;
  /* background:linear-gradient(to bottom,#ffd5bb,#f5f5f5); */
  min-height:600px;
}

.eh-sidebar-box{
  background:#fff;
  border-radius:8px;
  box-sizing: border-box;
  padding:20px;
  width:340px;
}
.eh-sidebar-box h3,.eh-company-info h2,.eh-pro-item h2{
  font-size:18px;
  color:#333;
  font-weight:bold;
}
.eh-sidebar-list{
  display:flex;
  flex-wrap: wrap;
  gap:12px;
  box-sizing: border-box;
  padding-top:16px;
}
.eh-sidebar-list li{
  background:#f7eedd;
  color:#804e22;
  height:38px;
  line-height:38px;
  border-radius:5px;
  box-sizing: border-box;
  padding:0 16px;
}
.contact-person{
  margin-top:20px;
}
.contact-person.uspend{
  position:fixed;
  left:50%;
  top:0px;
  z-index:1;
  transform:translateX(236px);
}
.contact-person>div{
  box-sizing: border-box;
  padding-top:16px;
  display:flex;
  gap:16px;
  align-items: center;
}
.contact-person em{
  display: block;
}
.contact-person em.tel{
  white-space: nowrap;
  text-overflow:ellipsis;
  overflow: hidden;
  color:#0189ff;
  font-size:16px;
  box-sizing: border-box;
  padding-top:10px;
}
.eh-company-info,.eh-pro-item,.breadcrumb,.product-detail-title{
  background:#fff;
  width:788px;
  box-sizing: border-box;
  border-radius:8px;
  margin-bottom:20px;
  padding:20px;
}
.eh-company-info h2{
  margin-bottom:16px;
}
.eh-company-txt{
  height:200px;
  overflow: hidden;
  line-height:25px;
  position: relative;
}
.eh-company-txt.show{
  height:auto;
}
.eh-company-txt span,.eh-pro-box>p{
  float: left;
  width: 200px;
  height: 200px;
  box-shadow: 0 3px 20px 0 rgba(50,123,249,.06);
  margin-right: 18px;
  border-radius: 6px;
  overflow: hidden;
  display:flex;
  justify-content:center;
  align-items: center;
  background:#f5f5f5;
}
.eh-company-txt img{
  max-width:200px;
  max-height:200px;
  transition:all .4s;
}
.eh-company-txt span:hover img{
  transform: scale(1.1);
}
.eh-company-txt em{
  padding-left: 40px;
  background-image: linear-gradient(90deg, hsla(0, 0%, 100%, 0) 0, #fff 50%, #fff);
  cursor: pointer;
  color:#327bf9;
  position:absolute;
  z-index:1;
  right:0;
  bottom:0
}
.eh-company-txt.show em{
  position: static;
  padding-left:5px;
}
.eh-pro-box{
  box-sizing: border-box;
  display:flex;
  gap:16px;
}
.eh-pro-box>a{
  height:140px;
  width:140px;
  float:none;
  display: block;
  margin-right:0;
  overflow: hidden;
}
.eh-pro-box>a img{
  max-width:140px;
  max-height:140px;
  transition:all .4s;
}
.eh-pro-box>a:hover img{
  transform: scale(1.1)
}
.eh-pro-box>dl{
  width: calc(100% - 216px);
}
.eh-pro-box dt{
  display:flex;
  flex-wrap:wrap;
  gap:10px 24px;
  margin-bottom:10px;
}
.eh-pro-box dt a:hover{
  color: #327bf9;
  text-decoration: underline;
  text-underline-position: under;
}
.eh-pro-box dd{
  padding-left:24px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.eh-pro-box dd p{
  display: flex;
  align-items:center;
}
.eh-pro-box dd p em{
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
  display:block;
  color:#804e22;
  flex:1;
}
.eh-pro-box dd p em.price{
  color:#f00;
}

.eh-pro-box dd span{
  color:#999;
}
.eh-footer{
  background:#262d38;
  color:#f1f1f1;
  text-align:center;
  padding:12px 0;
  box-sizing: border-box;
}
#tolink{
  display:none;
}
.pageList{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
}
.listbox .pageList{
  margin-bottom:0;
}
.pageList>a{
  display: block;
  background:#fff;
  border:solid 1px #eee;
  border-radius:4px;
  box-sizing: border-box;
  padding:5px 16px;
}
.pageList>a:hover{
  background:#fff;
  border-color:#0189ff;
  color:#0189ff;
}
.pageList>a.curr{
  background:#327bf9;
  color:#fff;
  border-color:#327bf9;
}
/*  */
.box{
  clear: both;
  width: 1200px;
  margin: 0 auto;
}
.list{
  box-sizing: border-box;
  padding:20px;
  background:#fff;
  position: relative;
  z-index: 10;
  margin: -80px auto 20px auto;
  border-radius:8px;
  box-shadow: 0 2px 10px rgba(184,189,199,.2)
}
.search{
	width:618px;
	height:40px;
	background:#fff;
  border:solid 2px #327bf9;
  border-radius:20px;
	display:flex;
	box-sizing: border-box;
	padding-left:3px;
  margin-left:25px;
}

.search-box{
 display:flex;
 gap:8px 30px;
 align-items:center;
 flex-wrap: wrap;
}
.search-box>a{
  height:40px;
  box-sizing: border-box;
  padding:0 24px;
  border-radius:20px;
  background:linear-gradient(90deg,#327bf9,#5c98ff);
  color:#fff;
  display:flex;
  align-items:center;
 
}
.search-box>a::before{
  content:"";
  display: block;
  width:18px;
  height:18px;
  background:url(../images/publish.png) no-repeat;
  background-size:100% 100%;
  margin-right:8px;
}
.search-box>a:hover{
  opacity:.8;
}
.searchBtn{
	display:inline-block;
	width:80px;
	height:34px;
	border:none;
	cursor: pointer;
	overflow: hidden;
  background:#327bf9;
  border-radius:17px;
  color:#fff;
  font-size:16px;
  line-height:34px;
  text-align:center;
  margin:1px 1px 0 0;
}
.searchBtn:hover{
	opacity:.8;
}
.searchInput{
	background:none;
	box-sizing: border-box;
	height:36px;
	line-height:36px;
	padding:0 10px;
	font-size:14px;
	color:#333;
	flex:1;
  border:none;
}
.searchInput::placeholder{
	color:#aaa;
}
.search-tags{
  display:flex;
  align-items:center;
  gap:10px;
  box-sizing: border-box;
  padding:0 0 16px 25px;
  margin:18px 0 12px 0;
  border-bottom:solid 1px #eee;
}
.search-tags::before{
  content:"";
  display: block;
  width:48px;
  height:24px;
  background:url(../images/hot.gif) no-repeat;
  background-size:100%;
  transform: translateY(-2px);
}
.search-tags span{
 box-sizing: border-box;
 padding:0 10px;
 height:26px;
 line-height:26px;
 border-radius:13px;
 cursor: pointer;
}
.search-tags span:hover{
  background: #e6f4ff;
  color: #327bf9;
}
.listtit{
  color:#333;
  font-size:18px;
  margin-bottom:20px;
  position: relative;
  font-weight:700;
  width:100%;
  display:flex;
  gap:24px;
}
.listtit a.active{
  position: relative;
  color:#327bf9;
}
.suspend .listtit{
  width:auto;
  margin:0 188px 14px 0;
}
.listtit a.active::after{
  position:absolute;
  z-index:1;
  left:20px;
  bottom:-8px;
  content:"";
  display: block;
  width:30px;
  height:3px;
  background: #327bf9;
  border-radius:3px;
}
.listtit a:hover{
  color:#333;
  opacity:.8;
}

.listinfo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; font-size: 16px; color: #333; margin-top: 24px; border-top: dashed 1px #e5e5e5; padding-top: 16px; }
.listinfo div span{
  color:#fe3306;
  font-weight:bold;
  padding:0 8px;
}
/*  */
.company-item{
  display:flex;
  align-items: start;
  gap:16px;
  box-sizing: border-box;
  border:solid 1px #f2e5d5;
  background:#fff url(../images/item-bg.png) no-repeat center top;
  background-size: 100% auto;
  border-radius:12px;
  overflow: hidden;
  box-sizing: border-box;
  padding:20px;
  transition:all .3s;
  position: relative;
  margin-bottom:16px;
}
.company-item::before{
  content:"";
  display:block;
  position:absolute;
  z-index:1;
  left:0;
  top:0;
  width:60px;
  height:60px;
  background:url(../images/company-recomend-ico.png) no-repeat;
  background-size: cover;
}
.company-item:hover{
  box-shadow: 0 3px 9px #a9b0c14d;
}
.company-item-logo{
  width:88px;
  height:88px;
  background:#4c79bd99;
  color:#fff;
  font-size:24px;
  border-radius:10px;
  overflow: hidden;
  box-sizing: border-box;
  padding:10px;
}
.company-item-logo>span{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap: wrap;
  width:68px;
  height:68px;
  text-align:center;
  overflow: hidden;
  line-height:28px;
  letter-spacing:1px;
  font-weight:bold;
}
.company-item-logo>span.six{
  font-size:21px;
}
.company-item-title{
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:16px;
}
.company-item-title h2 a{
  font-size:18px;
  font-weight:bold;
  color:#644417;
}
.company-item-title>span{
  width:82px;
  height:20px;
  background:url(../images/company-item-ico.png) no-repeat;
  background-size:cover;
}
.msgonline,.chatonline{
  background: linear-gradient(to left top, #327bf9, #0189ff);
  color:#fff;
  width:97px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  gap:5px;
  position:absolute;
  right:20px;
  top:24px;
  z-index:1;
  user-select: none;
  cursor: pointer;
}
.chatonline{
  top:64px;
  background: linear-gradient(to left top,#ff552a,#ff552a);
}
.msgonline::before,.chatonline::before{
  content:"";
  display:block;
  width:16px;
  height:16px;
  background:url(../images/contactonlineico_press.png) no-repeat;
  background-size:100%;
}
.msgonline::before{
  background:url(../images/leavemsg-icon.png) no-repeat;
  background-size:100%;
}
.msgonline:hover::before,.chatonline:hover::before{
  animation: ctoean .4s infinite;
}
@keyframes ctoean {
  0%{transform: translateX(0px);}
  50%{transform: translateX(-2px);}
  100%{transform: translateX(0px);}
}
.chatonline:hover{
  background: linear-gradient(to left top,#f01d1d, #ff7b3d);
}
.msgonline:hover{
   background: linear-gradient(to left top, #425aff, #2fb5ec);
}
.company-item-merito{
  display: flex;
  flex-wrap: wrap;
  gap:8px;
  width:800px;
  align-items: center;
  margin-bottom:16px;
}
.company-item-merito>Span{
  background: #f4f4f4;
  border-radius: 2px;
  color: #666;
  font-size: 12px;
  height: 24px;
  padding: 0 8px;
  font-weight:normal;
  line-height:24px;
  border-radius:2px;
  letter-spacing:1px;
}
.company-item-info{
  display:flex;
  margin-bottom:16px;
  align-items:center;
  gap:24px;
}
.company-item-info>p{
  display:flex;
  align-items:center;
  gap:5px;
}
.company-item-info em{
  color:#999;
}
.company-item-info strong{
  color:#333;
  font-weight: normal;
}
.company-item-info i{
 display: block;
 width:13px;
 height:14px;
 background:url(../images/address-icon.png) no-repeat;
 background-size: cover;
}
.company-item-products{
  display:flex;
  align-items:center;
  gap:15px;
}
.company-item-products>p{
  width:102px;
  height:102px;
  box-sizing: border-box;
  border:1px solid #eef2f8;
  display:flex;
  justify-content:center;
  align-items:center;
  overflow: hidden;
}
.company-item-products img{
  max-width:100%;
  max-height:100%;
  transition:all .4s;
}
.company-item-products>p:hover img{
  transform: scale(1.1);
}
.listbox{
  min-height:602px;
}
/*  */
/* topbar */
.topbar{
	height:52px;
	line-height:52px;
	background:#f2f6ff;
	color:#333;
}
.topbar .box{
	display: flex;
	justify-content: space-between;
}
.topbarLeft a,.topbarRight a{
	color:#333;
	margin:0 10px;
}
.topbarLeft span{
	cursor:pointer;
}
.topbarLeft a:hover,.topbarLeft a.link1,.topbarLeft span:hover,.topbarRight a:hover{
	color:#327bf9;
}
.topbarLeft a.link1:hover{
	color:#327bf9;
}
.mask{
	position:fixed;
	z-index:98;
	width:100%;
	height:100%;
	left:0;
	top:0;
	background: rgba(0,0,0,.68);
}
.sotopbar{
	background:#fff;
	color:#333;
}
.sotopbar .topbarLeft a,.sotopbar .topbarRight a{
	color:#333;
}
.sotopbar .topbarLeft a:hover,.sotopbar .topbarLeft a.link1,.sotopbar .topbarLeft span:hover,.sotopbar .topbarRight a:hover{
	color:#0189ff;
}
/* topbar end*/
/* header */
.header{
	height:268px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color:#fff;
	font-size:16px;
	position:relative;
	z-index:9;
  background:none;
}
.header h1{
	display:inline-block;
}
.header h1 a{
	display: block;
	width: 562px;
	height:112px;
	background-position:0 0;
	overflow: hidden;
	transition:all .4s;
}
.header h1 a:hover{
	transform:translateY(-5px);
}
.slogan{
  display:flex;
  justify-content:center;
  gap:40px;
  box-sizing: border-box;
  padding:12px 0 10px 0;
  margin-bottom:60px;
  color:#808eaf;
  font-size:15px;
}
.slogan p{
  box-sizing: border-box;
  background:url(/images/slogan-icon.png) no-repeat left center;
  padding-left:25px;
}
.header h1 a{
	background:url(/images/logo.png) no-repeat;
}
/*  */
/* sidebar */
.sidebar{
  position:fixed;
  z-index:11;
  top:50%;
  left:50%;
  width:60px;
  background:#fff;
  border-radius:30px;
  margin-left:620px;
  box-sizing: border-box;
  padding:10px 4px;
  gap:8px;
  display:flex;
  transform: translateY(-50%);
  flex-direction:column;
  justify-content:center;
  align-items: center;
  box-shadow:0 3px 20px rgba(28,91,255,.04);
}
.sidebar dl{
  display:none;
  position:absolute;
  z-index:1;
  top:0;
  right:68px;
  background:#fff;
  border-radius:8px;
  text-align:center;
  color:#999;
  width:160px;
  box-sizing: border-box;
  padding:16px 0;
  transform:translateY(-35%);
}
.sidebar dl::after{
  position:absolute;
  z-index:1;
  content:"";
  display: block;
  top:46%;
  right:-6px;
  width:12px;
  height:12px;
  background:#fff;
  transform:rotate(45deg) ;
}
.sidebar i{
  display: block;
  width:22px;
  height:22px;
}
.customer i{
  background:url(/images/kf-icon.png) no-repeat center center;
  background-size:22px 22px;
}
.official i{
  background:url(/images/gzh-icon.png) no-repeat center center;
  background-size:22px 22px;
}
.center i{
  background:url(/images/wd-icon.png) no-repeat center center;
  background-size:22px 22px;
}
.backtop i{
  background:url(/images/db-icon.png) no-repeat center center;
  background-size:22px 22px;
}
.linkwebsite i{
  background:url(/images/ai-icon.png) no-repeat center center;
  background-size:22px 22px;
}
.recharge i { background: url(/images/cz-icon.png) no-repeat center center; background-size: 22px 22px; }
.linkwebsite{
  position:relative;
}
.linkwebsite>em{
  position:absolute;
  z-index:1;
  right:40px;
  top:0px;
  height:17px;
  line-height:17px;
  box-sizing: border-box;
  padding:0 6px;
  border-radius:5px 5px 0 5px;
  background:linear-gradient(to right bottom,#28a4ff,#f905a8);
  color:#fff;
  width:60px;
  font-size:12px;
}
.backtop{
  display:none;
}
.show .backtop{
  display: flex;
}
.sidebar>div{
  position: relative;
}
.sidebar p,.sidebar a{
  display:flex;
  width:52px;
  flex-direction:column;
  justify-content:center;
  align-items: center;
  background:#fff;
  border-radius:12px;
  box-sizing: border-box;
  padding:4px;
  cursor: pointer;
}
.sidebar p:hover,.sidebar a:hover{
  background:#f6f8ff;
}
.sidebar>div:hover dl{
  display: block;
}
.sidebar dd{
  margin-top:5px;
}
.layui-flow-more{
  width:100%;
  text-align:center;
}
.layui-flow-more a cite{
  background:#fff;
  color:#999;
}
/* 联系企业 */
#contact-layer{
  position:fixed;
  z-index:999;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,.6);
  display:none;
}
#contact-layer.show{
  display:flex;
  justify-content:center;
  align-items:center;
}
#contact-layer .contact-box,.showbuy .contact-buy-box,.showsale .contact-sale-box{
  width:750px;
  height:400px;
  box-sizing: border-box;
  border-radius:16px;
  background:#dae5ff url(../images/layer-bg.png) no-repeat center top;
  background-size: 100% auto;
  padding:20px;
  position: relative;
}
#contact-layer .contact-box::before{
  position:absolute;
  z-index:1;
  left:50px;
  top:-20px;
  content:"";
  display: block;
  width:95px;
  height:120px;
  background:url(../images/contact-layer-icon1.png) no-repeat;
}

#contact-layer .contact-title{
  height:80px;
  display:flex;
  box-sizing: border-box;
  padding:0 0 0 150px;
  justify-content:space-between;
  align-items: start;
  font-size:18px;
  color:#134292;
}
#contact-layer .contact-title span{
  display: block;
}
#contact-layer .contact-title em{
  padding:0 5px;
  color:#333;
  font-weight:bold;
}
#contact-layer .contact-title i{
  display: block;
  width:30px;
  height:30px;
  background:url(../images/colseinfo.png) no-repeat center center;
  cursor: pointer;
  opacity:.6;
  transition:all .4s;
}
#contact-layer .contact-title i:hover{
  transform: rotate(-180deg);
}
#contact-layer .contact-content{
  background:#fff;
  border-radius:16px;
  box-shadow: 0 0 8px rgba(0,0,0,.1);
  box-sizing: border-box;
  padding:25px 20px 20px 20px;
  display:flex;
  justify-content:center;
  gap:32px;
}
#contact-layer .contact-item{
  width:300px;
  height:235px;
  border-radius:12px;
  box-sizing: border-box;
  padding:58px 30px 20px 30px;
  position: relative;
}
#contact-layer .buy{
  background-image: linear-gradient(to bottom,#dae5ff, #f0f4ff);
  border:solid 1px #dae5ff;
}
#contact-layer .buy::before{
  position:absolute;
  z-index:1;
  top:-10px;
  left:20px;
  content:"";
  display: block;
  background:url(../images/contact-layer-icon2.png) no-repeat;
  width:69px;
  height:60px;
  background-size:100% auto;
}
#contact-layer .sale::before{
  position:absolute;
  z-index:1;
  top:-10px;
  left:20px;
  content:"";
  display: block;
  background:url(../images/contact-layer-icon3.png) no-repeat;
  width:69px;
  height:60px;
  background-size:100% auto;
}
#contact-layer .sale{
   background-image: linear-gradient(to bottom,#ecdefe, #f7f3ff);
   border:solid 1px #ecdefe;
}
#contact-layer .contact-item h2{
  font-size:18px;
  color:#333;
  font-weight:bold;
  box-sizing: border-box;
  padding:12px 0;
}
#contact-layer .contact-item span{
  display: block;
  width:135px;
  height: 40px;
  margin:16px auto 0 auto ;
  text-align:center;
  line-height:40px;
  color:#fff;
  border-radius:4px;
  cursor: pointer;
  user-select: none;
}
#contact-layer .contact-item span:hover{
  opacity:.8;
}
#contact-layer .contact-item span.contact-buy-btn{
  background:linear-gradient(to right bottom,#28a4ff,#327bf9);
}
#contact-layer .contact-item span.contact-sale-btn{
  background:linear-gradient(to right bottom,#ad79ec,#a16be3);
}
.contact-buy-box,.contact-sale-box{
  display:none;
}
.showbuy .contact-buy-box,.showsale .contact-sale-box{
 display:block;
 height:505px;
}
.showbuy .contact-box,.showsale .contact-box{
  display:none;
}
#contact-layer.showbuy .contact-title,#contact-layer.showsale .contact-title{
  padding:0;
  justify-content: space-between;
  height:40px;
}
#contact-layer .contact-form{
 background:#fff;
 border-radius:16px;
 box-shadow: 0 0 8px rgba(0,0,0,.1);
 box-sizing: border-box;
 padding:16px;
}
.contact-form-tips{
  display:flex;
  gap:24px;
  align-items:center;
}
.contact-form-tips::before{
  content:"";
  display:block;
  width:50px;
  height:50px;
  background:#e8efff url(../images/contact-layer-icon1.png) no-repeat 4px 4px;
  background-size:48px auto;
  box-sizing: border-box;
  border:solid 1px #dae2f6;
  border-radius:25px;
}
.contact-form-tips>div{
  background:#eaf2fe;
  height:40px;
  line-height:40px;
  border-radius:5px;
  padding:0 16px;
  box-sizing: border-box;
  color:#327bf9;
  font-weight:bold;
  position: relative;
  letter-spacing:1px;
}
.contact-form-tips>div::before{
  position: absolute;
  top: 50%;
  left: -10px;
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-bottom: 10px solid #0000;
  border-right: 10px solid #eaf2fe;
  border-top: 10px solid #0000;
  transform: translateY(-50%);
}
.contact-form .layui-form{
  padding:8px 0 0 0;
  display:flex;
  gap:5px 20px;
  flex-wrap: wrap;
}
.contact-form .layui-form-item{
  display:flex;
  flex-direction: column;
  width:calc(33.33% - 14px);
  margin-bottom: 0;
}
.contact-form .layui-form-label{
  float:none;
  width:100%;
  text-align:left;
  font-weight:bold;
  padding:8px 0;
}
.contact-form .layui-form-label i{
  color:#f00;
  padding-left:3px;
}
.contact-form .layui-input-block{
  margin-left:0;
  position: relative;
}
.contact-form .widthauto{
  width:100%;
}
.contact-form .layui-form-mid{
  float:none;
  position:absolute;
  z-index:1;
  right:0px;
  top:0px;
}
.contact-form .widthauto .layui-input{
  padding-right:60px;
}
.contact-form .layui-input:focus{
  border-color:#327bf9 !important;
}
.contact-form .layui-input::placeholder{
  color:#bbb !important;
}
.contact-bottom-tips{
  color:#999;
  font-size:12px;
  margin:10px 0 10px 0;
}
.contact-bottom-tips dt{
  margin-bottom:5px;
  color:#666;
  font-size:14px;
}
.contact-submit{
  text-align:center;
  margin-bottom: 4px;
}
.contact-submit a{
  width:280px;
  height:40px;
  line-height:40px;
  text-align:center;
  background:linear-gradient(to right bottom,#28a4ff,#327bf9);
  display:inline-block;
  border-radius:8px;
  color:#fff;
  font-size:16px;
  letter-spacing:2px;
  opacity:.8;
}
.contact-submit a:hover{
  opacity:1;
}
.contact-form .agreement{
  text-align:center;
  color:#666;
  font-size:12px;
}
.contact-form .agreement a{
  color:#327bf9;
  text-decoration: underline;
  text-underline-position:under;
}
.getcode-buy,.getcode-sale{
  color:#0189ff;
  cursor: pointer;
  user-select: none;
}
.getcode-buy.disabled,.getcode-sale.disabled{
  color:#999;
  cursor: no-drop;
}
.breadcrumb{
  display:flex;
  gap:5px;
}
.breadcrumb>a{
  color:#999;
  flex-direction: row;
  align-items:center;
}
.breadcrumb>a::after{
  display:inline-block;
  content:"/";
  color:#ccc;
  margin-left: 5px;
}
.breadcrumb>span{
  flex:1;
  white-space: nowrap;
  text-overflow:ellipsis;
  overflow: hidden;
}
.product-detail-title h1{
  font-size:22px;
  font-weight:bold;
  margin-bottom:12px;
  line-height:28px;

}
.product-detail-title .img{
  display:flex;
  justify-content:center;
  align-items:center;
  width:360px;
  height:360px;
  box-sizing: border-box;
  padding:10px;
  border:solid 1px #eee;
}
.product-detail-title .img img{
  max-width:100%;
  max-height:100%;
}
.flex_box{
  display:flex;
  gap:20px;
}
.parameters{
  flex:1;
}
.parameters ul{
 background:#fffbfb;
 border:dashed 1px #f9e7e7;
 box-sizing: border-box;
 padding:16px 16px 0 16px;
}
.parameters ul li,.parameters>p{
  display:flex;
  gap:10px;
  line-height:22px;
  margin-bottom:10px;
}
.parameters>p{
  margin:10px 0 0 0;
}
.parameters li em,.parameters>p em{
  color:#999;
}
.parameters>p em{
  min-width:98px;
  text-align: right;
}
.parameters li span,.parameters>p span{
  flex:1;
}
.parameters .price{
  color:#f00;
  font-size:16px;
}
.product-detail-main,.product-hot{
  background:#fff;
  border-radius:8px;
  overflow: hidden;
  box-sizing: border-box;
  padding:24px;
  width:788px;
  margin-bottom:20px;
}

.product-detail-tag h3{
  box-sizing: border-box;
  color:#333;
  font-size:24px;
  font-weight:bold;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-bottom:24px;
}
.product-detail-tag h3::before,.product-detail-tag h3::after{
  content:"";
  display:block;
  width:58px;
  height:24px;
  background:url(../images/tagbg-left.png) no-repeat;
  background-size:100%;
  opacity:.3;
  pointer-events: none;
}
.product-detail-tag h3::after{
  transform:scaleX(-1)
}
.product-detail-container{
  text-align:left;
  font-size:14px;
}
.product-detail-container img{
  max-width:100%;
  max-height:100%;
  vertical-align: bottom;
}
.product-hot h3{
  font-size:20px;
  font-weight:550;
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:16px;
}
.product-hot h3::before{
  content:"";
  display: block;
  width:5px;
  height:18px;
  background:#f60;
  border-radius:5px;
}
.product-hot ul{
  display:flex;
  gap:20px;
  flex-wrap: wrap;
}
.product-hot ul li{
  width:233px;
  height:264px;
  overflow: hidden;
}
.product-hot li span{
  display:flex;
  width:233px;
  height:233px;
  box-sizing: border-box;
  border:solid 1px #eee;
  justify-content:center;
  align-items:center;
  overflow: hidden;
  padding:5px;
}
.product-hot li img{
  max-width:100%;
  max-height:100%;
  transition:all .4s;
}
.product-hot li img:hover{
  transform:scale(.98);
}
.product-hot li em{
  height:30px;
  line-height:30px;
  display: block;
  white-space: nowrap;
  text-overflow:ellipsis;
  overflow: hidden;
}