@charset "utf-8";


/**********************************************************************************************************************/
/* 공통 스타일 */
/**********************************************************************************************************************/
/* 폰트 */
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);

.notosanskr * {
      font-family: 'Noto Sans KR', sans-serif;
}

:root {
      --font-ns: 'Noto Sans KR', sans-serif;
}


/* 공통 */
.wp_solution {}


/* 글쓰기 버튼 */
.wp_solution .btn_list {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      align-items: center;
      gap: 10px;
      margin-top: 30px;
      padding: 0 60px;
}

.wp_solution .btn_list .btn_write {
      width: 84px;
      padding: 5px 10px;
      font-size: 16px;
      font-family: var(--font-ns);
      font-weight: bold;
      border: 2px solid #000;
      border-radius: 5px;
      text-align: center;
      transition: 0.4s;
}

.wp_solution .btn_list .btn_write:hover {
      color: #fff;
      background-color: #FFBE05;
      border: 2px solid #FFBE05;
      transition: 0.4s;
}


/* 페이저 넘버 */
.wp_solution .wp_pg_list {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 60px;
}

.wp_solution .wp_pg_list .wp_pg {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 40px;
      height: 40px;
      font-size: 16px;
      font-family: var(--font-ns);
      font-weight: 400;
      transition: 0.4s;
}

.wp_solution .wp_pg_list .wp_pg_arw {}

.wp_solution .wp_pg_list .wp_pg_arw>i {
      font-weight: bold;
}

.wp_solution .wp_pg_list .wp_pg_num {}

.wp_solution .wp_pg_list .wp_pg_lt {}

.wp_solution .wp_pg_list .wp_pg_rt {}

.wp_solution .wp_pg_list .wp_pg:hover {
      background: #FFBE05;
      border-radius: 50%;
      font-weight: bold;
      transition: 0.4s;
}

.wp_solution .wp_pg_list .wp_pg.on {
      background: #FFBE05;
      border-radius: 50%;
      font-weight: bold;
}

/**********************************************************************************************************************/


/**********************************************************************************************************************/
/* 리스트페이지  */
/**********************************************************************************************************************/
/* 리스트 공통 ======================================================================================= */
.wp_solution #shp_notice_items {
      grid-column-gap: 50px;
      grid-row-gap: 60px;
}

.wp_solution #shp_notice_items .item {
      overflow: hidden;
}

.wp_solution #shp_notice_items .item .item_ir {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: stretch;
      gap: 20px;
}

.wp_solution #shp_notice_items .item .item_ir .img_frame {
      width: 100%;
      overflow: hidden;
}

.wp_solution #shp_notice_items .item .item_ir .img_frame>img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: 0.4s;
}

.wp_solution #shp_notice_items .item .item_ir .img_frame:hover>img {
      transform: scale(1.1);
      transition: 0.4s;
}

.wp_solution #shp_notice_items .item .item_ir .txt_frame {
      text-align: center;
      padding: 0 20px;
}

.wp_solution #shp_notice_items .item .item_ir .txt_frame .noti_tit {
      font-size: 24px;
      font-family: var(--font-ns);
      font-weight: bold;
      margin-bottom: 10px;
}

.wp_solution #shp_notice_items .item .item_ir .txt_frame .noti_des {
      font-size: 18px;
      font-family: var(--font-ns);
}


/**********************************************************************************************************************/


/**********************************************************************************************************************/
/* 뷰페이지 */
/**********************************************************************************************************************/
/* 뷰 공통 ========================================================================================== */
.wp_solution #shp_noti_show {
      display: flex;
      justify-content: center;
      align-items: center;
}

.wp_solution #shp_noti_show .noti_sw_ir {
      width: 60%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      gap: 80px;
}


/* 타이틀 영역 */
.wp_solution #shp_noti_show .noti_sw_ir .tit_box {
      text-align: center;
}

.wp_solution #shp_noti_show .noti_sw_ir .tit_box .tit {
      font-size: 30px;
      font-family: var(--font-ns);
      font-weight: bold;
      margin-bottom: 30px;
}

.wp_solution #shp_noti_show .noti_sw_ir .tit_box .des {
      font-size: 17px;
      font-family: var(--font-ns);
      font-weight: 400;
}


/* 내부 컨텐츠 영역*/
.wp_solution #shp_noti_show .noti_sw_ir .cont_list {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      gap: 40px;
}

.wp_solution #shp_noti_show .noti_sw_ir .cont_list>li {}

.wp_solution #shp_noti_show .noti_sw_ir .cont_list>li>img {}

/* 페이저 영역 */
.wp_solution #shp_noti_show .noti_sw_ir .pager_box {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
}

.wp_solution #shp_noti_show .noti_sw_ir .pager_box .btn_pg_arw {
      color: #DDDDDD;
      font-size: 24px;
      font-family: var(--font-ns);
      font-weight: 500;
      transition: 0.4s;
}

.wp_solution #shp_noti_show .noti_sw_ir .pager_box .btn_pg_arw>i {}

.wp_solution #shp_noti_show .noti_sw_ir .pager_box .btn_pg_arw:hover {
      color: #787878;
      transition: 0.4s;
}


@media (max-width: 1800px) {

      /* 글쓰기 버튼 */
      .wp_solution .btn_list {
        
            padding: 0 10px;
      }
}

@media (max-width: 768px) {
      .wp_solution #shp_noti_show .noti_sw_ir {
            width: 100%;
      }
}

/**********************************************************************************************************************/