@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.cc_search_ccsubmit {
  cursor: pointer;
}
.dn_list {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  row-gap: 44px;
  margin: 0 -13px;
}
.dn_list::before {
  content: '';
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, .6);
  border-radius: 8px;
  /* transition: opacity .4s ease-in-out; */
  opacity: 0;
  z-index: -1;
}
.dn_list::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
  z-index: -1;
  transition: opacity .4s ease-in-out;
  --uib-size: 32px;
  --uib-color: #1255ab;
  --uib-speed: .9s;
  --uib-stroke: 4px;
  --mask-size: calc(var(--uib-size) / 2 - var(--uib-stroke));
  height: var(--uib-size);
  width: var(--uib-size);
  -webkit-mask: radial-gradient(circle var(--mask-size), transparent 99%, #000 100%);
  mask: radial-gradient(circle var(--mask-size), transparent 99%, #000 100%);
  background-image: conic-gradient(transparent 25%, var(--uib-color));
  animation: spin calc(var(--uib-speed)) linear infinite;
  border-radius: 50%;
}
.loading {
  min-height: 200px;
}
.dn_list.loading::before, .dn_list.loading::after {
  opacity: 1;
  z-index: 100;
}
.dn_item {
  width: 33.333%;
  box-sizing: border-box;
  padding: 0 13px;
}
.dn_item a {
  position: relative;
  display: block;
  padding: 14px 12px;
}
.dn_item a::before {
  content: '';
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #F2F3F9;
  z-index: -1;
}
.dn_item a::after {
  content: '';
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: linear-gradient(330deg, #003CA6 -22%, #04A1E5 79%);
  transition: opacity .4s ease-in-out;
  z-index: -1;
}
.dn_item a:hover::after {
  opacity: 1;
}
.dn_image {
  width: 100%;
  aspect-ratio: 338 / 399;
}
.dn_image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  vertical-align: middle;
}
.dn_intro {
  padding: 20px 0 10px;
}
.dn_title {
  font-size: 18px;
  line-height: 1.22;
  font-family: 'Poppins bold';
  color: #030844;
  transition: color .4s ease-in-out;
  margin-bottom: 4px;
  overflow: hidden;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.dn_item a:hover .dn_title {
  color: #fff;
}
.dn_date {
  display: flex;
  color: #aaa;
  font-size: 14px;
  line-height: 1.5;
  column-gap: 4px;
  transition: color .4s ease-in-out;
}
.dn_item a:hover .dn_date {
  color: #fff;
}
.nodata {
  margin: 40px 0;
  width: 100%;
  text-align: center;
  color: #999;
  line-height: 1.75;
  font-size: 24px;
}

@media screen and (max-width: 576px) {
  .dn_item {
    width: 100%;
  }
}