.photos-main {
  padding: 50px 0;
}
.photos-list {
  display: flex;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.photos-list.rolling {
  -webkit-animation: rolling 80s linear infinite;
  animation: rolling 80s linear infinite;
}
.photos-list .photo-item {
  max-width: 598px;
  height: 88px;
  margin-right: 60px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-image: -webkit-linear-gradient(45deg,#39B7FF,#3ED5C1);
  border-radius: 114px;
  padding: 19px 40px 16px 20px;
  float: left;
  box-sizing: border-box;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  -webkit-tap-highlight-color: transparent;
    cursor: pointer;
}
.photos-list .photo-item .photo-logo {
  width: 48px;
  height: 48px;
  border: .5px solid #fff200;
  border-radius: 50%;
  background-color: #fff200;
  flex-shrink: 0;
}
.photos-list .photo-item .photo-logo > img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover
}
.photos-list .photo-item .photo-right {
  margin-left: 10px;
  overflow: hidden
}
.photos-list .photo-item .photo-right .photo-right-title {
  display: flex;
  align-items: center;
  font-size: 12px;
  color: hsla(0, 0%, 100%, .6);
  white-space: nowrap;
  max-width: 480px
}
.photos-list .photo-item .photo-right .photo-right-title > span {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}
.photos-list .photo-item .photo-right .photo-right-des {
  max-width: 480px;
  min-height: 28px;
  margin-top: 8px;
  font-size: 16px;
  color: #fff;
  line-height: 28px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis
}
.photos-list .photo-item:hover {
  margin-top: 0;
  background: transparent;
  overflow: inherit
}
.photos-list .photo-item:hover:after {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  background: #fead61;
  border-radius: 114px;
  height: 148px;
  z-index: -1;
  top: -30px;
  left: 0
}
.photos-list .photo-item:hover .photo-logo {
  border: .5px solid #000
}
.photos-list .photo-item:hover .photo-right-title {
  color: rgba(5, 5, 5, .6)
}
.photos-list .photo-item:hover .photo-right-des {
  white-space: normal;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  color: #050505
}
@-webkit-keyframes rolling {
  0% {
    transform: translateX(0)
  }
  to {
    transform: translateX(-110%)
  }
}
@keyframes rolling {
  0% {
    transform: translateX(0)
  }
  to {
    transform: translateX(-110%)
  }
}



.photos-dialog { display: none; width: 90%; max-width: 800px; position:fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 999;}
.photos-dialog .photo-item { padding: 20px; background-image: -webkit-linear-gradient(45deg,#39B7FF,#3ED5C1); border-radius: 20px; overflow: hidden;}
.photos-dialog .photo-logo { width: 40px; height: 40px; position: absolute; left: 20px; top: 20px;}
.photos-dialog .photo-logo img { width: 100%; height: 100%; border-radius: 50%; border: 1px solid #fff200;}
.photos-dialog .photo-right-title { color: #fff; font-size: 14px; margin: 0 0 0 50px; height: 30px; display: flex; align-items: center;}
.photos-dialog .photo-right-des { color: #333; background: #fff; font-size: 16px; margin-top: 20px; padding: 15px; border-radius: 10px; line-height: 1.6em;}
.photos-dialog:after {content: ""; position:fixed;  display: block;  width: 100vw; height: 100vh;  background:rgba(0,0,0,0.9);  z-index:-1;  top:50%;  left:50%; transform: translate(-50%, -50%);}
.photos-dialog .close { text-align: center; padding: 20px;}
.photos-dialog .close img { width: 40px; height: 40px; cursor: pointer;}

/*--自适应--*/
@media screen and (max-width:960px) {
	.photos-list .photo-item { width: 300px; margin-right: 30px; padding: 10px 15px; height: 60px; cursor: pointer; pointer-events: inherit; }
	.photos-list .photo-item .photo-logo { width: 32px; height: 32px;}
	.photos-list .photo-item .photo-right .photo-right-title{ font-size: 12px; margin-top: 4px;}
	.photos-list .photo-item .photo-right .photo-right-des{ font-size: 12px; margin-top: 0px; min-height: 20px; line-height: 1.5em;}
	.photos-list .photo-item:hover:after { height: 100px; top:-20px;}
}