@charset "utf-8";

.article-list .inner {
  padding: 80px 0 120px;
  display: flex;
  flex-direction: column;
  gap: 73px;
}

.article-list .cate-list,
.article-list .cate-list .webgene-blog {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px 40px;
}

.article-list .cate-list {
  border-bottom: 1px solid #4B4B4B;
}

.article-list .cate-list>a {
  font-weight: 500;
  font-size: clamp(1rem, 0.667rem + 0.69vw, 1.5rem);
  color: #fff;
  text-align: center;
  transition: .4s ease;
  padding-bottom: 10px;
}

.article-list .cate-list .webgene-item {
  font-weight: 500;
  font-size: clamp(1rem, 0.667rem + 0.69vw, 1.5rem);
  color: #fff;
  transition: .4s ease;
}

.article-list .cate-list .webgene-item a {
  display: block;
  padding-bottom: 10px;
}

.article-list .cate-list a:hover {
  color: #FFF;
  border-bottom: 1px solid #FFF;

}



.article-main .webgene-blog {
  display: flex;
  flex-direction: column;
  gap: 40px;
  align-items: flex-start;
}

.article-main .webgene-item {
  padding-bottom: 21px;
  padding-right: 47px;
  border-bottom: 1px solid #FFF;
  width: 100%;
}

.article-main .webgeneLink {
  display: flex;
  align-items: center;
}

.article-main .webgeneLink .date {
  font-family: var(--font-Italiana);
  font-weight: 400;
  font-size: clamp(1.25rem, 0.793rem + 0.95vw, 1.938rem);
  color: #fff;
  margin-right: 40px;
}

.article-main .webgeneLink .cate {
  font-weight: 500;
  font-size: 14px;
  text-align: center;
  color: #fff;
  padding: 7px 32px;
  border: 1px solid #FFF;
  margin-right: 40px;
}

.article-main .webgeneLink .ItemTit {
  max-width: 900px;
  width: 61%;
  font-weight: 500;
  font-size: clamp(0.875rem, 0.792rem + 0.17vw, 1rem);
  line-height: calc(27/16);
  text-align: left;
  color: #fff;
}

.article-main .webgeneLink .arrow {
  margin-left: auto;
  background: url(/system_panel/uploads/images/20260523022802735002.svg) no-repeat left / contain;
  width: 50px;
  height: 10px;
  transition: var(--default);
}

.article-main .webgene-item:hover .webgeneLink .arrow {
  transform: translateX(20px);
}

.webgene-pagination {
  width: 100%;
}

.webgene-pagination ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 26px;
}

.webgene-pagination ul .number a {
  width: 24px;
  height: 24px;
  font-weight: 500;
  font-size: clamp(1rem, 0.667rem + 0.69vw, 1.5rem);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: var(--default);
}

.webgene-pagination ul .number a:hover {
  color: #575757;
}

.article-detail .inner {
  padding: 80px 0 120px;
}

.article-detail .inner .box {
  background: #f5faff;
  padding: 100px 120px 140px;
}

.article-detail .blogItemText {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #FFF;
  margin-bottom: 40px;
}

.article-detail .column {
  display: flex;
  align-items: center;
  gap: 14px;
}

.article-detail .column .date {
  font-family: var(--font-Italiana);
  font-weight: 400;
  font-size: clamp(1.25rem, 0.418rem + 1.73vw, 2.5rem);
  color: #fff;
}


.article-detail .column .cate {
  font-weight: 500;
  font-size: clamp(0.875rem, 0.75rem + 0.26vw, 1.063rem);
  text-align: center;
  color: #fff;
  padding: 5px 22px;
  border: 1px solid #FFF;
}

.article-detail .blogDetailImg {
  width: 80%;
  margin: 0 auto 40px;

}

.article-detail .inTit01 {
  font-weight: 500;
  font-size: clamp(1rem, 0.834rem + 0.35vw, 1.25rem);
  line-height: calc(34/20);
  color: #fff;
}

.article-detail .txt01 {
  padding: 0 10% 80px;
  margin: 0 auto;
  font-weight: 500;
  font-size: clamp(0.875rem, 0.792rem + 0.17vw, 1rem)a;
  color: #fff;
  border-bottom: 1px solid #FFF;
}

.article-detail .morebtn {
  margin: 80px auto 0;
  display: flex;
  max-width: 192px;
  justify-content: center;
}


@media (max-width: 1400px) {

  .article-main .webgene-item {
    padding-right: 0;
  }

  .article-main .webgeneLink .cate {
    margin-right: 60px;
  }
}

@media (max-width: 1200px) {
  .article-main .webgeneLink {
    display: grid;
    grid-template-areas: "date cate cate"
      "title title arrow";
    grid-template-columns: max-content 1fr;
    gap: 20px 0;
  }

  .article-main .webgeneLink .date {
    grid-area: date;
  }

  .article-main .webgeneLink .cate {
    grid-area: cate;
    margin-right: 0;
    width: fit-content;
  }

  .article-main .webgeneLink .ItemTit {
    grid-area: title;
    width: 80%;
  }

  .article-main .webgeneLink .arrow {
    grid-area: arrow;
  }

}

@media (max-width: 900px) {
  .article-list .inner {
    width: 80%;
  }

  .article-main .webgene-blog {
    grid-template-columns: repeat(2, 1fr);
  }

  .webgene-pagination {
    grid-column: 1/3;
  }

  .article-main .webgeneLink {
    display: flex;
    flex-wrap: wrap;
    gap: 20px 16px;
  }

  .article-list .cate-list>a,
  .article-list .cate-list .webgene-item a {
    padding: 8px 16px;
  }

  .article-list .cate-list,
  .article-list .cate-list .webgene-blog {
    gap: 20px;
  }

  .article-detail .inner .box {
    padding: 100px 40px 140px;
  }
}

@media (max-width: 767px) {

  .article-detail .inner,
  .article-list .inner {
    padding: 80px 0;
    width: 90%;
  }

  .article-detail .inner .box {
    padding: 80px 40px 100px;
  }

  .article-detail .morebtn a {
    padding: 10px 20px;
  }

  .article-main .webgene-blog {
    grid-template-columns: repeat(1, 1fr);
  }

  .webgene-pagination {
    grid-column: 1/2;
  }
}