@charset "utf-8";

.p-fv .inner {
  border-bottom: 1px solid #112203;
}


.scroll-hint-icon {
  top: 0;
  height: 90%;
}

.scroll-hint-icon:before {
  height: 26px;
}

.js-scrollable,
.js-scrollable .scroll-hint-icon-wrap {
  overflow-y: hidden;
}

.blog-item .element,
.blogDetail .element {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 9px;
}

.blog-item .webgeneLink {
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: 100%;
}


.blog-item .news-tit {
  font-weight: 400;
  font-size: clamp(0.75rem, 0.659rem + 0.39vw, 1.125rem);
  line-height: calc(28/18);
  color: #000;
}

.article-list .inner {
  padding: 180px 0 120px;
  display: flex;
  flex-direction: column;
  gap: 80px;
  margin: 0 auto;
  width: 80%;
}

.article-list .cate-list .scroll-area {
  overflow: auto;
  padding-bottom: 20px;
}

.article-list .cate-list .scroll-area,
.article-list .cate-list .webgene-blog {
  display: flex;
  align-items: center;
  gap: 17px;
}

.article-list .cate-list .scroll-area {
  flex-direction: row;
  gap: 20px;
}

.article-list .cate-list a {
  display: flex;
  position: relative;
  white-space: nowrap;
  padding: 10px 20px;
  border-radius: 5px;
  background: #c4c46a;
  border: 1px solid #c4c46a;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
  font-family: var(--main);
  font-weight: 500;
  font-size: clamp(0.875rem, 0.845rem + 0.13vw, 1rem);
  letter-spacing: 0.04em;
  text-align: center;
  color: #000;
  transition: .4s ease;
}

.article-list .cate-list a:hover {
  background: #FFF;
}





.blog-item .date {
  font-weight: 500;
  font-size: clamp(0.875rem, 0.814rem + 0.26vw, 1.125rem);
  text-align: left;
  color: #4a5f13;
}

.blog-item .cate,
.blogDetail .cate {
  padding: 5px 12px;
  border-radius: 50px;
  font-weight: 400;
  font-size: clamp(0.75rem, 0.689rem + 0.26vw, 1rem);
  text-align: center;
  color: #4a5f13;
  background: #e5e5c9;
}

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

.article-main .blog-item {
  background: #fff;
  border: 1px solid #112203;

}

.article-main .webgeneLink {
  padding: 28px;
  transition: var(--default);
}

.article-main .webgeneLink:hover {
  background: #d6dbad;

}

.article-list .cate-list .scroll-area {
  cursor: grab;
  user-select: none;
}

.article-list .cate-list .scroll-area.is-dragging {
  cursor: grabbing;
}

.article-main .date,
.blogDetail .date {
  font-family: var(--eng);
  font-weight: 400;
  font-size: 24px;
  color: #112203;
}

.webgene-pagination {
  margin-top: 40px;
  width: 100%;
  grid-column: 1/4;
}

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

.webgene-pagination ul .number {
  width: 55px;
  aspect-ratio: 1/1;
  font-family: var(--eng);
  font-weight: 400;
  text-align: center;
  font-size: clamp(1.125rem, 0.966rem + 0.65vw, 1.75rem);
  color: #112203;
  border: 1px solid #7B9537;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: .4s ease;
}

.webgene-pagination ul .number.selected {
  background: #7B9537;
}

.webgene-pagination ul .number:hover {
  background: #FFF;
}



.article-detail .element {
  margin-bottom: 0;
}

.article-detail .inner {
  width: 80%;
  margin: 0 auto;
  padding: 180px 0 120px;
  gap: 100px;
}




.article-detail .blogDetail-wrap-title {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 40px;
}

.article-detail .blogDetailTit {
  font-weight: 500;
  font-size: clamp(1.5rem, 1.379rem + 0.52vw, 2rem);
  line-height: calc(40/32);
  color: #000;
}



.article-detail .blogDetailImg {
  margin-bottom: 40px;
}

.article-detail .morebtn {
  margin: 0 auto;
}

.article-detail .morebtn .arrow {
  transform: scaleX(-1);

}




.article-detail .blogDetailTxt {
  font-family: var(--main);
  font-weight: 400;
  font-size: clamp(0.875rem, 0.845rem + 0.13vw, 1rem);
  letter-spacing: 0.04em;
  line-height: 2;
  color: #514327;
  margin-bottom: 80px;
}

.article-detail .blogDetailTxt h2 {
  padding: 1rem .5rem 1rem 1.5rem;
  border-left: 6px solid #514327;
  background-color: #F0F0F0;
  font-size: 20px;
  margin-bottom: 20px;
}

@media screen and (max-width: 1280px) {
  .article-detail .inner {
    width: 70%;
  }
}


@media screen and (max-width: 1023px) {

  .blog-item .webgeneLink .text {
    width: 100%;
  }

  .article-list .inner {
    padding: 80px 0;
    gap: 40px;
  }

  .article-main .webgene-blog {
    gap: 20px;
  }

  .webgene-pagination ul .number {
    width: 40px;
  }

  .article-main .webgeneLink {
    padding: 14px;
  }
}

@media screen and (max-width: 767px) {
  .webgene-pagination ul .number {
    width: 28px;
  }

  .article-list .inner {
    padding: 40px 0 80px;
    gap: 40px;
  }

  .article-list .cate-list a {
    padding: 8px 24px;
  }

  .article-detail .inner {
    width: 90%;
  }
}