@charset "UTF-8";

#fire {position: fixed; top: 0; bottom: 0; left: 0; right: 0; background: rgba(162, 0, 0, 0.4); animation: bg 1s infinite;}

@keyframes bg {
  from {background: rgba(162, 0, 0, 0.4);}
  to {background: rgba(0,0,0,0.3);}
}

#fire .fire_popup {position: absolute; z-index: 10; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 950px; max-height: 380px; overflow-y: auto; padding: 30px; border: 1px solid #777; border-radius: 10px; background: #fff;}

#fire .top {display: flex; align-items: center; justify-content: space-between; margin-top: 2%;}
#fire .top h2 {font-weight: 600;}
#fire .top h2 > span {margin-left: 10px;}
#fire .btn_wrap {display: flex; cursor: pointer;}
#fire .notice_btn > button {padding: 8px 10px; border-radius: 5px; font-size: 16px; background: #333; color: #fff;}
#fire .close_btn {position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; background: url(../images/btn_pop_close.png) no-repeat center/ 70%;}

#fire .fire_list {display: flex; column-gap: 2%; flex-wrap: wrap;  width: 100%; text-align: center; margin-top: 20px;}
#fire li {width: 32%; padding: 15px; margin-bottom: 2%; border: 1px solid #777; border-radius: 5px; box-sizing: border-box;}
#fire li >  h3 {padding: 5px 0; background: #666; font-size: 18px; color: #fff; box-sizing: border-box;}
#fire li >  p {display: block; margin-top: 10px; font-size: 16px; font-weight: 600; color: re;}
#fire li p > span {color: red;}