@charset "utf-8";
/* ============= media ============= */
/* news */
.media .news{
  width: 1094px;
  margin: 0 auto;
  padding: 50px 0 80px;
}
.media .news .title_area{}
.media .news .title_area .date{
  font-size: 25px; color: #989898; font-weight: 500;
}
.media .news .title_area .title{
  font-size: 45px; font-weight: 500;
}

.media .news .colorbox{
  margin: 47px 0 0;
}
.media .news .colorbox .tab_contents{
  display: flex; flex-wrap: wrap; justify-content: space-between;
}
.media .news .colorbox .tab_content{
  width: 530px;
  height: 530px;
  margin-bottom: 13px;
  transition: all 0.3s;
}
.media .news .colorbox .tab_content:nth-child(even){
  margin-right: 0;
}
.media .news .colorbox .tab_content.tab_content1{
  color: #fff;
  background-color: #333;
  border-radius: 0 270px 270px 270px;
}
.media .news .colorbox .tab_content.tab_content1:hover{border-radius: 0;}
.media .news .colorbox .tab_content.tab_content2{
  background-color: #EEEDEB;
}
.media .news .colorbox .tab_content.tab_content3{
  color: #fff;
  background-color: #D50E62;
  border-radius: 0;
}
.media .news .colorbox .tab_content.tab_content3:hover{border-radius: 0 0 270px 0;}
.media .news .colorbox .tab_content.tab_content4{
  background-color: #F7CFE0;
  border-radius: 270px;
}
.media .news .colorbox .tab_content.tab_content4:hover{border-radius: 270px 0 270px 270px;}

.media .news .colorbox .tab_content .link{
  display: block;
  padding: 26px 164px 176px 34px;
}
.media .news .colorbox .tab_content .category{
  font-size: 13px;
}
.media .news .colorbox .tab_content .txt_box{
  margin-top: 70px;
}
.media .news .colorbox .tab_content .txt_box p::after{
  content: '';
  display: block;
  width: 143px;
  height: 1px;
  margin: 21px 0;
}
.media .news .colorbox .tab_content.tab_content1 .txt_box p::after,
.media .news .colorbox .tab_content.tab_content3 .txt_box p::after{
  background-color: #ffffff;
}
.media .news .colorbox .tab_content.tab_content2 .txt_box p::after,
.media .news .colorbox .tab_content.tab_content4 .txt_box p::after{
  background-color: #707070;
}
.media .news .colorbox .tab_content .txt_box p:last-child::after{display: none;}

.media .news .colorbox .tab_content .title{
  line-height: 1.5; font-size: 25px; font-weight: 800;
}
.media .news .colorbox .tab_content .txt{
  line-height: 1.5; font-size: 13px;
}

.media .news .colorbox .mb_tab_btn{
  display: none;
}

/* news list */
.news_list_Area{
  width: 1134px;
  margin: 0 auto;
  padding-bottom: 100px;
}
.news_list{
  display: flex; flex-wrap: wrap; justify-content: space-between;
}
.news_list li{
  width: 560px; height: auto;
  margin-bottom: 56px;
  cursor: pointer;
}
.news_list .img_box{
  width: 100%; height: 265px;
  border-radius: 15px;
  overflow: hidden;
}
.news_list .img_box img{
  width: 100%; height: 100%;
  object-fit: cover;
}
.news_list .text_box{
  margin-top: 13px;
}
.news_list .category_area{
  display: flex; align-items: center;
}
.news_list .category_area .category{
  font-size: 15px; color: #D50E62;
}
.news_list .category_area .date{
  font-size: 15px; color: #ACACAC;
  margin-left: 10px;
}
.news_list .text_box .title{
  font-size: 17px; color: #2E2E2E; font-weight: bold;
  margin-top: 6px;
}
.news_list .text_box .text{
  line-height: 1.8; font-size: 15px; color: #2E2E2E;
  margin-top: 15px;
}


@media(max-width: 1350px) {
  /* ============= media ============= */
  /* news */
  .media .news{
    width: calc(100vw * (1094 / 1350));
    padding: calc(100vw * (50 / 1350)) 0 calc(100vw * (80 / 1350));
  }
  .media .news .title_area .date{
    font-size: calc(100vw * (25 / 1350));
  }
  .media .news .title_area .title{
    font-size: calc(100vw * (45 / 1350));
  }

  .media .news .colorbox{
    margin: calc(100vw * (47 / 1350)) 0 0;
  }
  .media .news .colorbox .tab_content{
    width: calc(100vw * (530 / 1350));
    height: calc(100vw * (530 / 1350));
    margin-bottom: calc(100vw * (13 / 1350));
  }
  
  .media .news .colorbox .tab_content .link{
    padding: calc(100vw * (26 / 1350)) calc(100vw * (164 / 1350)) calc(100vw * (176 / 1350)) calc(100vw * (34 / 1350));
  }
  .media .news .colorbox .tab_content .category{
    font-size: calc(100vw * (13 / 1350));
  }
  .media .news .colorbox .tab_content .txt_box{
    margin-top: calc(100vw * (70 / 1350));
  }
  .media .news .colorbox .tab_content .txt_box p::after{
    width: calc(100vw * (143 / 1350));
    margin: calc(100vw * (21 / 1350)) 0;
  }

  .media .news .colorbox .tab_content .title{
    font-size: calc(100vw * (25 / 1350));
  }
  .media .news .colorbox .tab_content .txt{
    font-size: calc(100vw * (13 / 1350));
  }

  /* news list */
  .news_list_Area{
    width: calc(100vw * (1134 / 1350));
    padding-bottom: calc(100vw * (100 / 1350));
  }
  .news_list li{
    width: calc(100vw * (560 / 1350));
    margin-bottom: calc(100vw * (56 / 1350));
  }
  .news_list .img_box{
    height: calc(100vw * (265 / 1350));
  }
  .news_list .text_box{
    margin-top: calc(100vw * (13 / 1350));
  }
  .news_list .category_area .category{
    font-size: calc(100vw * (15 / 1350));
  }
  .news_list .category_area .date{
    font-size: calc(100vw * (15 / 1350));
    margin-left: calc(100vw * (10 / 1350));
  }
  .news_list .text_box .title{
    font-size: calc(100vw * (17 / 1350));
    margin-top: calc(100vw * (6 / 1350));
  }
  .news_list .text_box .text{
    font-size: calc(100vw * (15 / 1350));
    margin-top: calc(100vw * (15 / 1350));
  }

}

@media(max-width: 1024px) {
  /* ============= media ============= */
  /* news */
  .media .news{
    width: calc(100vw * (398 / 428));
    padding: calc(100vw * (50 / 428)) 0 calc(100vw * (80 / 428));
  }
  .media .news .title_area{}
  .media .news .title_area .date{
    font-size: calc(100vw * (22 / 428));
  }
  .media .news .title_area .title{
    font-size: calc(100vw * (34 / 428));
  }

  .media .news .colorbox{
    width: 100%;
    margin: calc(100vw * (32 / 428)) auto 0;
  }
  .media .news .colorbox .tab_contents{
    display: flex;flex-wrap: wrap;
  }

  .media .news .colorbox .tab_content{
    width: 100%;
    height: calc(100vw * (398 / 428));
    margin-bottom: 0;
    transition: none;display: none;
  }
  .media .news .colorbox .tab_content.active{
    display: block;
  }

  .media .news .colorbox .tab_content .link{
    display: block;
    padding: calc(100vw * (22 / 428)) calc(100vw * (106 / 428)) calc(100vw * (146 / 428)) calc(100vw * (29 / 428));
  }
  .media .news .colorbox .tab_content .category{
    font-size: calc(100vw * (16 / 428));
  }
  .media .news .colorbox .tab_content .txt_box{
    margin-top: calc(100vw * (70 / 428));
  }
  .media .news .colorbox .tab_content .txt_box p::after{
    width: calc(100vw * (124 / 428));
    margin: calc(100vw * (19.5 / 428)) 0;
  }

  .media .news .colorbox .tab_content .title{
    font-size: calc(100vw * (21 / 428));
  }
  .media .news .colorbox .tab_content .txt{
    font-size: calc(100vw * (13 / 428));
  }

  /*탭버튼 - 모바일*/
  .media .news .colorbox .mb_tab_btn{
    display: block;
    margin-top: calc(100vw * (13 / 428));
  }
  .media .news .colorbox .mb_tab_btn .tab_btn_list{
    display: flex;
    height: calc(100vw * (36 / 428));
  }
  .media .news .colorbox .mb_tab_btn .list{
    width: 25%; height: 100%;
  }
  .media .news .colorbox .mb_tab_btn .list.mb_tab_content1{background-color: #333;}
  .media .news .colorbox .mb_tab_btn .list.mb_tab_content2{background-color: #EEEDEB;}
  .media .news .colorbox .mb_tab_btn .list.mb_tab_content3{background-color: #D50E62;}
  .media .news .colorbox .mb_tab_btn .list.mb_tab_content4{background-color: #F7CFE0;}


  /* news list */
  .news_list_Area{
    width: calc(100vw * (389 / 428));
    padding-bottom: calc(100vw * (80 / 428));
  }
  .news_list li{
    width: 100%;
    margin-bottom: calc(100vw * (45 / 428));
  }
  .news_list .img_box{
    height: calc(100vw * (203 / 428));
  }
  .news_list .text_box{
    margin-top: calc(100vw * (23 / 428));
    padding: 0 calc(100vw * (17 / 428));
  }
  .news_list .category_area .category{
    font-size: calc(100vw * (15 / 428));
  }
  .news_list .category_area .date{
    font-size: calc(100vw * (15 / 428));
    margin-left: calc(100vw * (10 / 428));
  }
  .news_list .text_box .title{
    font-size: calc(100vw * (17 / 428));
    margin-top: calc(100vw * (6 / 428));
  }
  .news_list .text_box .text{
    font-size: calc(100vw * (15 / 428));
    margin-top: calc(100vw * (15 / 428));
  }
}