@charset "utf-8";


/*====================
Common
====================*/

.news-title{
  position: relative;
  margin: 3rem auto;
  padding-bottom: 2rem;
  border-bottom: #707070 1px solid;
}

.news-title-text{
  position: relative;
  width: fit-content;
  height: fit-content;
  margin: 0 auto;
}
.news-title h1{
  position: relative;
  color: #FFA908;
  font-size: 3rem;
  text-align: center;
  padding: .5rem;
}

.news-title-img{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: -1;
}


.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;
}

.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: #00A109 !important;
padding: 0.5rem 1rem;
background-color: #D2EDD3;
border-radius: 5px;
font-weight: bold;
display: block;
width: 200px;
text-align: center;
font-size: 1.125rem;
transition: all .5s;
}
.news-cate a:hover { background:#00A109; 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:#00A109 !important;
padding: 0.25rem 1.5rem;
border: 1px solid #00A109;
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:100%; font-size:clamp(1.5rem, 0.659rem + 0.3vw, 2rem); }
.news-main .webgene-blog article > a { padding:10px; display:flex;  gap:2rem; border-radius: 10px; }
.news-main .webgene-blog article > a:hover { background:#7070702e; }

.newsCatch img{
  width: 320px;
  height: 180px;
  object-fit: cover;
  border-radius: 10px;
}

.newsItemTit { position: relative; font-size:20px; font-weight:bold; color:#00A109; width: fit-content;}
.newsItemTit:before { 
  content: "";
  position: absolute;
  top: 1rem;
  left: 0;
  width: 100%;
  height: 16px;
  background-color: #FFF72E;
  z-index: -1;
}
.newsItemText { display:flex; align-items:baseline; margin:0.5rem 0; gap:0.5rem; font-size:clamp(0.75rem, 0.659vw + 0.3vw, 1rem); color:#BDBDBD; }
.newsItem-text { font-size:14px; font-weight:400; color:#BDBDBD; }
.newsItemTime { font-size:1rem; font-weight:bold; color:#000;}
.newsDetailTxt{ font-size:1rem; font-weight:bold; color:#000;}
.newsItemCatewrap { display:flex; gap:1rem; }
.newsItemCate { 
  line-height:1; 
  font-size: 14px;
  padding: .25rem 1rem;
  background-color: #D2EDD3;
  border-radius: 5px;
  color:#00A109!important; 
  width:fit-content; 
}

.newsTextWrap { display:flex; flex-direction:column; gap: 1rem; border-bottom:1px solid #D5D5D5; width: auto; padding-bottom:2rem; }

.newsDetail-wrap{
  margin: 0 auto;
  max-width: 960px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 2px solid #000;
  font-weight: 500;
}

.newsDetail-wrap-title{
  color: #00A109;
}

.newsDetail-wrap-title .newsItemText .newsItemTime{
  color: #00A109!important;
}

.newsDetail-wrap-title h2{
  color: #00A109;
  font-size: 1.5rem;
}

/*====================
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;
margin:30px 10px 0; padding:4px;
color: #00A109;
  font-weight: bold;
  font-size: 1.5rem;
}
.webgene-pagination > ul > li.selected,
.webgene-pagination > ul > li a { color:#00A109 !important; padding: .5rem; }
.webgene-pagination > ul > li.selected a,
.webgene-pagination > ul > li:hover a { color:#00A109 !important; border-bottom: 2px solid #00A109;}


.news-btn{
  display: block;
  margin: 3rem auto;
  font-size: 16px;
  font-weight: bold;
  padding: 1rem;
  border: #00A109 2px solid;
  border-radius: 30px;
  color:#00A109!important; 
  width:240px; 
  text-align: center;
}

.news-btn:hover{
  opacity: .5;
}

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

@media (max-width:1024px) {
  .news { width:90%; }
.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-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 1.3rem;  width: 160px;}
.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}
}

@media (max-width:600px) {
.news-main .webgene-blog article > a {
  flex-direction: column;
  width: 80%;
  max-width: 320px;
  margin: 0 auto;
}
.newsCatch img{
  max-width: 400px;
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 10px;
}
}

@media (max-width:414px) {
.news-main .webgene-blog article > a {
  flex-direction: column;
  width: 100%;
  margin: 0 auto;
}