@charset "utf-8";
/* CSS Document */
body {
	background-color: #000;
	color: #FFF;
	font-family: 微软雅黑;
	font-size: 4vw;
	margin: 0;
}
.container {
    display: flex;
    justify-content: center; /* 水平居中 */
	width:100vw;
	position:fixed; 
	top:0; 
	z-index:1000; 
	background-color: rgba(23, 32, 42, 0.5);
	font-weight: bold; 
	font-size:4vw; 
	line-height:7vw;
}
.logo {
	 float:left;
	 padding-top:1vw; 
	 padding-right:1.5vw;
	 }
.logo img {
	width:5vw;
	}
.contact {
	position:fixed;
	top:7vw;
	right:1vw;
	z-index:1000;
}
.contact-icon img{
	width:6vw;
}
.wxqrcode {
	position: fixed;
	z-index: 99;
	top: 8vw;
	right: 8vw;
	width: 15vw !important;
	max-width: none;
	transform: scale(0);
	transform-origin: center;
	opacity: 0;
	-webkit-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
	border-radius: 5%;
}
.dyqrcode {
	position: fixed;
	z-index: 99;
	top: 15vw;
	right: 8vw;
	width: 15vw !important;
	max-width: none;
	transform: scale(0);
	transform-origin: center;
	opacity: 0;
	-webkit-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
	border-radius: 5%;
}
.blqrcode {
	position: fixed;
	z-index: 99;
	top: 22vw;
	right: 8vw;
	width: 15vw !important;
	max-width: none;
	transform: scale(0);
	transform-origin: center;
	opacity: 0;
	-webkit-transition: all .5s ease-in-out;
	-o-transition: all .5s ease-in-out;
	transition: all .5s ease-in-out;
	border-radius: 5%;
}
.ba {
    display: flex;
    justify-content: center; /* 水平居中 */
	background-color:rgba(23, 32, 42, 0.85);
	font-size:16px;
	line-height:30px;
	height:30px;
	width:100%;
}
.batb{
	padding:4px 2px 0 10px;
}
.ba img {
	width:20px;
	height:20px;
}

/* 针对移动设备的样式 */
@media screen and (max-width: 767px) {
	body {
	font-size: 4vw;
}
.container {
	font-size:6vw; 
	line-height:9vw;
}
.logo img {
	width:7vw;
	}
.contact {
	top:9vw;
	right:1vw;
}
.contact-icon img{
	width:12vw;
}
.wxqrcode {
	top: 22.5vh;
	right: 22.5vw;
	width: 55vw !important;
}
.dyqrcode {
	top: 22.5vh;
	right: 22.5vw;
	width: 55vw !important;
}
.blqrcode {
	top: 22.5vh;
	right: 22.5vw;
	width: 55vw !important;
}
.ba {
	font-size:10px;
	line-height:20px;
	height:20px;
}
.batb{
	padding:4px 1px 0 7px;
}
.ba img {
	width:11px;
	height:11px;
}
}

.contact-icon {
	padding-top:1vw;
}
a {
	color: #FFF;
	text-decoration: none;
}
.wx:hover + .wxqrcode {
	transform: scale(1);
	opacity: 1;
}
.dy:hover + .dyqrcode {
	transform: scale(1);
	opacity: 1;
}
.bl:hover + .blqrcode {
	transform: scale(1);
	opacity: 1;
}
.product {
	padding-top:2%;
	}
.product:after {
  content: "";
  display: table;
  clear: both;
}
.product-l {
	width: 94%;
	margin-left:4%;
	background:url(pb.png);
	background-size:cover;
	border-radius:3%;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	}
.product-l:hover {
	background:url(pbh.png);
	background-size:cover;
	}
.product-r {
	width: 94%;
	margin-left:2%;
	background:url(pb.png);
	background-size:cover;
	border-radius:3%;
	-webkit-transition: all 0.5s ease-in-out;
	-o-transition: all 0.5s ease-in-out;
	transition: all 0.5s ease-in-out;
	}
.product-r:hover {
	background:url(pbh.png);
	background-size:cover;
	}
.product1 {
	float: left;
	width: 50%;
    animation: fall 0.6s ease-in-out forwards; /* 应用动画，持续2秒，缓动效果，结束后停留在最后一帧 */
}
.product2 {
	float: left;
	width: 50%;
    animation: fall 0.9s ease-in-out forwards; /* 应用动画，持续2秒，缓动效果，结束后停留在最后一帧 */
}
.product3 {
	float: left;
	width: 50%;
    animation: fall 1.2s ease-in-out forwards; /* 应用动画，持续2秒，缓动效果，结束后停留在最后一帧 */
}
.product4 {
	float: left;
	width: 50%;
    animation: fall 1.5s ease-in-out forwards; /* 应用动画，持续2秒，缓动效果，结束后停留在最后一帧 */
}
.product-img {
	width: 100%;
}
@keyframes fall {
  0% {
    transform: translateY(-6%); /* 从顶部开始 */
    opacity: 0; /* 初始透明度为0 */
  }
  100% {
    transform: translateY(0); /* 移动到原位置 */
    opacity: 1; /* 完全不透明 */
  }
}