@charset "utf-8";


/*====================
Common
====================*/
.news { margin: 2.5rem auto 7.5rem; width: 70%; max-width: 1024px; }
.news__detail-btn { margin: 2rem auto; }
.news-main a { color:#000 !important; }

.newsDetail{
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.newsDetailTxt{
  margin: 2rem 0;
}

.Blog-detail-img img{
  width: 100%!important;
}

/*====================
Category Buttons
====================*/
.news-cate { margin: 5rem 0; display: flex; align-items: center; gap: 2.5rem; flex-wrap: wrap;}
.news-cate a {
color: #403C3C !important;
padding: 0.5rem 1rem;
border: 1px solid #403C3C;
border-radius: 30px;
font-weight: bold;
display: block;
width: 200px;
text-align: center;
font-size: 1.125rem;
transition: all .5s;
}
.news-cate a:hover { background:#403C3C; color:#fff !important; }
.news-cate a p { line-height:1.5; font-weight:bold; }
.news-cate .webgene-blog { display:flex; align-items:center; gap:2rem; }


.newsDetailCate {
color:#403C3C !important;
padding: 0.25rem 1.5rem;
border: 1px solid #403C3C;
border-radius: 30px;
font-weight:400;
display:block;
}


/*====================
List Layout
====================*/
.news-main .webgene-blog { display:flex; flex-wrap:wrap; gap:2%; }
.news-main .webgene-blog article { width:32%; font-size:clamp(1.5rem, 0.659rem + 0.3vw, 2rem); }
.news-main .webgene-blog article > a { padding:10px 10px 1.5rem; display:flex; flex-direction:column; gap:1rem; }
.news-main .webgene-blog article > a:hover { background:#7070702e; }

.webgene-item-main-image{
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.newsItemTit { font-size:1rem; font-weight:400; color:#000; min-height: 80px}
.newsItemText { display:flex; align-items:baseline; margin:0.5rem 0; gap:0.5rem; font-size:clamp(0.75rem, 0.659vw + 0.3vw, 1rem); color:#707070; }
.newsItem-text { font-size:14px; font-weight:400; color:#707070; }
.newsItemCatewrap { display:flex; gap:1rem; }
.newsItemCate { line-height:1; font-size:clamp(0.75rem, 0.659rem + 0.3vw, 1rem); color:#707070!important; width:fit-content; }
.newsTextWrap { display:flex; flex-direction:column; gap:.25rem; border-bottom:1px solid #000; width:100%; padding-bottom:2rem; }


/*====================
Pagination
====================*/
.webgene-pagination { width:100%; grid-column:1 / 3; }
.webgene-pagination > ul { display:flex; padding:0; justify-content:center; }
.webgene-pagination > ul > li {
display:flex; justify-content:center; align-items:center;
height:40px; width:40px; border-radius: 50px;
margin:30px 10px 0; padding:4px;
list-style:none; border:1px solid #171717;
}
.webgene-pagination > ul > li.selected,
.webgene-pagination > ul > li:hover { background:transparent; border-color:#C3C3C3; }
.webgene-pagination > ul > li a { color:#403C3C !important; padding:0.8rem 1.3rem; }
.webgene-pagination > ul > li.selected a,
.webgene-pagination > ul > li:hover a { color:#403C3C !important; border-color:#403C3C;}


.news-btn{
  margin: 3rem auto;
}


/*====================
Responsive
====================*/
@media (max-width:1200px) {
.webgene-item-main-image { height: 200px; }
}

@media (max-width:1024px) {
.news-cate, .news-cate .webgene-blog { gap:1rem; }
  .webgene-item-main-image { height: 200px; }
}

@media (max-width:960px) {
.news, .news-main { margin-bottom:5rem; }
.news { width:90%; }
.news-cate { flex-wrap:wrap; margin:2.5rem 0; gap: .5rem;}
.news-cate .webgene-blog { flex-wrap:wrap; gap:0.5rem; }
.news-main .webgene-blog { gap:10px 0; }
.news-cate a { padding:0.5rem 1rem;  width: 150px; font-size:1rem;}
.newsDetailImg img { height:240px; }
.newsDetailTxt { font-size:14px; font-weight:500; }
.newsDetail-header p:nth-child(2) { padding:0 1rem; }
  .news-main .webgene-blog article { width:100%; font-size:clamp(1.5rem, 0.659rem + 0.3vw, 2rem); }
  .news-main .webgene-blog article > a {
      display: flex;
      flex-direction: row;
  }
  .webgene-item-main-image{
    width: 140px;
    height: auto;
    object-fit: cover;
  }
  .newsItemTit { min-height: auto}
}