@charset "utf-8";
/* 새글 스킨 (latest) */

.wb_news{ display: flex; justify-content: flex-start; flex-flow: row wrap; align-items: center;}
.wb_news > div{ width: 32%;  margin: 0 0 25px; }

.wb_news > div:nth-child(1), 
.wb_news > div:nth-child(2) {

    margin-right: 2%;
}

.wb_news > div a{ display: block; position: relative; border: 1px solid #d7d7d7; background: var(--w-color); border-radius: 15px; padding: 30px; transition: all .3s; }
.wb_news > div a span{ color: #999; font-weight: 500; }
.wb_news > div a h3{ font-size: 20px; line-height: 1.4; font-weight: 600; min-height: 55px; margin: 25px 0; color: var(--font-m-color);  overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; word-wrap:break-word}
.wb_news > div a p{ font-size: 16px; color: var(--font-s-color); margin: 0 0 15px; }
.wb_news > div a em{ width: 45px; height: 45px; background-color: var(--main-color); border-radius: 100%; display: flex; align-items: center; justify-content: center; position: absolute; right: 25px; bottom: 25px; }
.wb_news > div a em i{font-size: 24px; color: var(--w-color); }

.wb_news > div a:hover{background-color: var(--main-color);}
.wb_news > div a:hover h3, .wb_news > div a:hover span, .wb_news > div a:hover p{color: var(--w-color);}


@media(max-width: 1280px){
  .wb_news > div a{ padding: 25px; min-height: 176px;}
  .wb_news > div a h3{ font-size: 18px; min-height: unset; margin: 15px 0;}
  .wb_news > div a p{ font-size: 14px; margin: 0 0 10px;}
  .wb_news > div a em{ width: 35px; height: 35px; }
  .wb_news > div a em i{ font-size: 20px;}
}


@media(max-width: 1080px){
  .wb_news > div a{ padding: 25px; min-height: unset;}
  .wb_news > div a h3{ font-size: 17px; margin: 15px 0; -webkit-line-clamp:1;}
  .wb_news > div a p{ width: 80%;}
  .wb_news > div a span{ font-size: 13px;}
  .wb_news > div a em{ width: 35px; height: 35px; }
  .wb_news > div a em i{ font-size: 20px;}
}

@media(max-width: 880px){
  .wb_news > div{ width: 47%; margin: 3% 0 0;}
  .wb_news > div:nth-child(1), .wb_news > div:nth-child(2){ margin-right: 3%;}
}

@media(max-width: 680px){
  .wb_news > div a{ padding: 8%;}
  .wb_news > div a h3{ font-size: 16px; margin: 10px 0;}
  .wb_news > div a p{ font-size: 13px; margin: 0 0 5px;}
  .wb_news > div a em{ width: 26px; height: 26px; right: 7%; bottom: 10%;}
  .wb_news > div a em i{ font-size: 14px; }
}

@media(max-width: 480px){
  .wb_news > div a h3{ font-size: 14px; margin: 10px 0;}
  .wb_news > div a p{ font-size: 11px; margin: 0 0 5px;}
  .wb_news > div a span{ font-size: 10px;}
  .wb_news > div a em{ width: 26px; height: 26px; right: 7%; bottom: 10%;}
  .wb_news > div a em i{ font-size: 11px; }
}