body {
  margin: 0;
}

img {
  width: 100%;
}
a {
text-decoration: none;
color: inherit;
cursor: pointer;
}


.certificate-web{
  width: 100%;
  background: #f6f6f6;
}
.main-certificate{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 114px;
  padding-bottom: 146px;
}
.main-certificate .certi-title{
font-size: 40px;
font-family: Microsoft YaHei, Microsoft YaHei-Bold;
font-weight: 700;
text-align: left;
color: #000000;
line-height: 34px;
}
.main-certificate .certi-intro{
  font-size: 16px;
font-family: Microsoft YaHei, Microsoft YaHei-Light;
font-weight: 300;
text-align: center;
color: #343434;
line-height: 34px;
margin-top: 34px;
margin-bottom: 72px;
}
.certi-details{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap:40px ;
}
.certi-box{
  width: 370px;
height: 451px;
background: #ffffff;
box-shadow: 10px 10px 20px 0px rgba(222,222,222,0.16); 
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.5s ease;

}
.certi-box:hover {
  transform: rotate(5deg);
}
.certi-pic{
  width: 370px;
height: 260px;
  display: flex;
  justify-content: center;
}
.certi-pic img{
  width: auto;
  height: 260px;
  transition: filter 0.3s ease;
}
.certi-box:hover .certi-pic img {
  filter: grayscale(100%);
}
.certi-text{
  width: 270px;
height: 56px;
font-size: 18px;
font-family: Source Han Sans CN, Source Han Sans CN-Bold;
font-weight: 700;
text-align: center;
color: #333333;
line-height: 36px;
margin-top: 28px;
}
.certi-download{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 32px;
}
.down-link{
  display: flex;
  justify-content: center;
  align-items: center;
}
.link-zi{
  font-size: 16px;
font-family: PingFang SC, PingFang SC-Medium;
font-weight: 500;
text-align: left;
color: #979797;
}
/* 按钮颜色变化效果 */
.link-zi a {
  transition: color 0.3s ease;
}

.link-zi a:hover {
  color: #555555;
}
.link-icon{
width: 3px;
}
.down-line{
  width: 90px;
height: 0px;
border: 1px solid #8e8e8e;
margin-top: 6.5px;
}
/* 响应式媒体查询 */
@media (max-width: 1200px) {

}

@media (max-width: 992px) {}

@media (max-width: 768px) {}

@media (max-width: 370px) {
  .certi-box{
    width: 100%;
  }
}