@charset "UTF-8";
@import url(common.css);
@import url(import.css);
/*border 색상 e5e5e5로 맞춰보기
th #f5f6f9
border #e2e4ee
*/
/*
.requestList = 승인요청캠페인
.campaignAdd = 캠페인등록
*/
* {
  scroll-behavior: smooth;
}

body {
  display: flex;
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: #f0f1f5;
}

@media screen and (min-width: 1921px) {
  main .frame-center {
    margin: 0 auto;
  }
}
/*브라우저 윈도우 최소크기*/
@media screen and (max-width: 500px) {
  .popup.vertical {
    min-width: 100%;
  }
}
main.css-before {
  flex: 1;
}
main.css-before .main-header {
  background-color: #e9e9e9;
  padding: 20px 30px 20px 16px;
  border-bottom: 1px solid #ddd;
  width: 100%;
}
main.css-before .main-header h2 {
  font-weight: 500;
  font-size: 17px;
}
main.css-before .main-header.sticky {
  position: fixed;
  z-index: 11;
  background-color: #0d6efd;
  padding: 20px 30px;
  box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.05);
  width: calc(100% - 245px);
}
main.css-before .main-header.sticky + .content {
  padding-top: 66px;
}
main.css-before .main-header + .content {
  position: relative; /*width: calc(100vw - 245px);*/
  height: calc(100vh - 64px);
  overflow: auto;
}
main.css-before .content {
  width: 100%;
  height: 100%;
}
main.css-before .content .tblConditions + .tblResult {
  margin-top: 40px;
}
main.css-before .content .tblConditions tr:hover {
  background: #fff;
}
main.css-before .content .tblResult .tblTotal {
  padding: 15px 0 5px;
}
main.css-before .content .tblResult .tblTotal .total {
  display: inline-block;
  font-weight: 700;
  margin-right: 5px;
  font-size: 15px;
}
main.css-before .content .tblResult .tblTotal .total .count {
  font-weight: 700;
}
main.css-before .frame-center {
  position: relative;
  padding: 40px;
  min-width: 1490px;
  max-width: 1490px;
}
main.css-before .frame-center.form-frame {
  width: 966px;
  min-width: 966px;
}
main.css-before .frame-center.wideWidth {
  max-width: 1490px;
}

/*main*/
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered),
.css-before {
  /*타이틀 히든처리시*/
  /*상세정보 아이콘표시*/
  /*색상표시*/
  /* 간선 */
  /* 지선 */
  /* 좌석 */
  /* 마을 */
  /*모달창 백그라운드 커버*/
  /*datepicker custom*/
  /*-------------------------------------------------------------------
  ## body, header, main
  -------------------------------------------------------------------*/
  /*사이즈조절바*/
  /*-------------------------------------------------------------------
  ## 캠페인등록화면 css
  -------------------------------------------------------------------*/
  /*캠페인등록화면 css*/
  /*캠페인만들기 팝업 스텝부분 수정버튼*/
  /*캠페인만들기/수정 모달창 내 테스트캠페인 토글버튼*/
  /*캠페인정보, 청약리스트 공통사항*/
  /*캠페인정보*/
  /*청약리스트*/
  /*청약리스트 내 개별카드*/
  /*매체/청약 더보기 버튼 외*/
  /*청약 추가/삭제/변경시 팝업창*/
  /*내용간소화*/
  /*캠페인등록 건물정보*/
  /*캠페인 map부분*/
  /*캠페인만들기버튼*/
  /*캠페인 map부분 시도/구군/읍면동 팝업*/
  /*-------------------------------------------------------------------
  ## 소재유형 공통사항 - where? 종료캠페인상세페이지, 캠페인만들기 팝업, 캠페인정보 수정
  -------------------------------------------------------------------*/
  /*종료, 취소, 승인완료, 임시저장 캠페인 내 가로형,세로형 소재정보*/
  /*세로형 소재등록시 템플릿모드*/
  /*-------------------------------------------------------------------
  ## 소재등록 공통사항 - where? 캠페인만들기 소재선택, 소재관리 페이지
  -------------------------------------------------------------------*/
  /*소재리스트*/
  /*소재label*/
  /*소재 체크박스*/
  /*대상매체채널 리스트*/
  /*-------------------------------------------------------------------
  ## 소재등록 공통사항 - where? 소재승인형황, 소재승인현황상세, 소재등록페이지 광고매체 선택시
  -------------------------------------------------------------------*/
  /*광고매체 이미지체크박스 & 상세페이지 매체 선택됨표시*/
  /*소재승인현황 매체승인 카운트표시*/
  /*소재승인현황 제목 앞 썸네일*/
  /*-------------------------------------------------------------------
  ## 캠페인 리포트화면  where? 승인요청, 진행, 종료, 임시저장, 취소 캠페인 페이지
  -------------------------------------------------------------------*/
  /*-------------------------------------------------------------------
  ## 결제부분 공통사항
  -------------------------------------------------------------------*/
  /*환불정보입력*/
  /*정산금액*/
  /*결제 진행중/완료/취소/실패 페이지 공통내용*/
  /*-------------------------------------------------------------------
  ## 리포트 & 대시보드
  -------------------------------------------------------------------*/
  /*매체별 청약정보*/
  /*-------------------------------------------------------------------
  ## 첨부파일부분 공통
  -------------------------------------------------------------------*/
  /*-------------------------------------------------------------------
  ## 게첨사진 공통
  -------------------------------------------------------------------*/
  /*게첨사진 등록*/
  /*게첨이미지 리스트*/
  /*float:left; */
  /*게첨사진추가 버튼*/
  /*-------------------------------------------------------------------
  ## popup
  -------------------------------------------------------------------*/
  /*-------------------------------------------------------------------
  페이지를 찾을수없습니다. & 시스템점검중 페이지 표시
  -------------------------------------------------------------------*/
  /*페이지를 찾을수없습니다.*/
  /*시스템점검중입니다.*/
  /*모달
  .modal-content-zero-padding{
  position: relative;
      display: flex;
      flex-direction: column;
      max-height: 90%;
      margin: 0 1rem;
      padding: 0rem;
      border: 1px solid #e2e8f0;
      border-radius: 0.25rem;
      background: #fff;}


  .modal__content{    
      flex-grow: 1;
      overflow-y: auto;
      overflow-x: hidden;
  }
  */
  /*-------------------------------------------------------------------
  ## root_directory
  -------------------------------------------------------------------*/
  /*.root_directory && .root_location 공통내용*/
  /*하이차트 공통내용*/
  /*차트 햄버거메뉴*/
  /*차트레전드 텍스트*/
  /*swiper*/
  /*-------------------------------------------------------------------
  ## 뷰프로그램에서 제공되는 레이어팝업시 꼭 들어가는 태그들
  1. vfm 
  - 1-1. vfm__overlay
  - 1-2. vfm__container
      - 1-2-1. vfm__content
  -------------------------------------------------------------------*/
  /*-------------------------------------------------------------------
  ## sortable css
  -------------------------------------------------------------------*/
  /*햄버거메뉴*/
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .blind,
.css-before .blind {
  width: 1px;
  height: 1px;
  overflow: hidden;
  font-size: 1px;
  color: transparent;
  position: absolute;
  top: 0;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .ico_explanation,
.css-before .ico_explanation {
  display: inline-block;
  position: relative;
  width: 15px;
  height: 18px;
  margin: 0 0 0 2px;
  background: url(../../static/images/ico/sme_ico.png) no-repeat -250px 0px;
  background-size: 500px 500px;
  vertical-align: middle;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .color-red,
.css-before .color-red {
  color: #ED1C24;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .Color-cyan,
.css-before .Color-cyan {
  color: #009C96;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .color-faintly,
.css-before .color-faintly {
  color: #4C4C4E;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .color-blue,
.css-before .color-blue {
  color: #015FC1;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .color-green,
.css-before .color-green {
  color: #36820D;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .color-orange,
.css-before .color-orange {
  color: #CB860F;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .color-lime,
.css-before .color-lime {
  color: #8DCB0F;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .parentheses,
.css-before .parentheses {
  vertical-align: baseline;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .parentheses::before,
.css-before .parentheses::before {
  display: inline-block;
  content: "(";
  color: #000;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .parentheses::after,
.css-before .parentheses::after {
  display: inline-block;
  content: ")";
  color: #000;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .count, .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .price,
.css-before .count,
.css-before .price {
  color: #ED1C24;
  font-weight: 500;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .point, .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .minimum,
.css-before .point,
.css-before .minimum {
  color: #009C96;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .point,
.css-before .point {
  font-size: 15px;
  font-weight: 700;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .point::after,
.css-before .point::after {
  content: "Point";
  display: inline-block;
  color: #000;
  font-weight: 400;
  margin-left: 2px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .point.save::after,
.css-before .point.save::after {
  content: "Point 적립";
  display: inline-block;
  color: #000;
  font-weight: 400;
  margin-left: 2px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .price,
.css-before .price {
  font-size: 15px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .price .applyPriceInteger,
.css-before .price .applyPriceInteger {
  font-size: 15px;
  font-weight: 700;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .price .applyPricePoint,
.css-before .price .applyPricePoint {
  font-size: 13px;
  font-weight: 500;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .price::after,
.css-before .price::after {
  content: "원";
  display: inline-block;
  color: #000;
  font-weight: 400;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .input-price,
.css-before .input-price {
  text-align: right;
  width: 138px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .additional,
.css-before .additional {
  font-size: 13px;
  color: #4C4C4E;
  line-height: 1.5;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .nav-ico,
.css-before .nav-ico {
  vertical-align: middle;
  width: 22px;
  height: 22px;
  padding: 15px;
  background-color: rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  text-align: center;
  background-size: 22px 22px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .choice .nav-ico,
.css-before .choice .nav-ico {
  background-color: #E4FFFD;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .title-link,
.css-before .title-link {
  cursor: pointer;
  text-decoration: underline;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .title-link-hidden,
.css-before .title-link-hidden {
  cursor: pointer;
  text-decoration: none;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .title-link:hover, .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .title-link-hidden:hover,
.css-before .title-link:hover,
.css-before .title-link-hidden:hover {
  text-decoration: underline;
}
.covered {
  top: 0;
  left: 0;
}

.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .ui-widget,
.css-before .ui-widget {
  box-shadow: 0 3px 0px rgba(0, 0, 0, 0.2);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .kt-logo,
.css-before .kt-logo {
  background-image: url(../images/logo_kt.svg);
  background-repeat: no-repeat;
  background-position: center;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .kt-logo.full,
.css-before .kt-logo.full {
  background-image: url(../images/logo_full.svg);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .login,
.css-before .login {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .login .kt-logo,
.css-before .login .kt-logo {
  height: 54px;
  margin-bottom: 60px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .login .logo::before,
.css-before .login .logo::before {
  transform: scale(1.3);
  margin: -26px 45px 10px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .login ul,
.css-before .login ul {
  width: 400px;
  margin: 0 auto;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .login li,
.css-before .login li {
  margin-bottom: 8px;
  text-align: center;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .login .input,
.css-before .login .input {
  width: 100%;
  height: 54px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .login .btn-basic,
.css-before .login .btn-basic {
  width: 100% !important;
  height: 54px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .login .form-title,
.css-before .login .form-title {
  text-align: left;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .login .form-alert p,
.css-before .login .form-alert p {
  font-size: 13px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .login footer,
.css-before .login footer {
  text-align: center;
  padding: 24px 0;
  color: #888;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .login .logo,
.css-before .login .logo {
  display: flex;
  flex-direction: column;
  text-align: center;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .login .logo::before,
.css-before .login .logo::before {
  content: "PRO";
  display: inline-block;
  width: 34px;
  margin: -10px 0 4px;
  border-radius: 50rem;
  font-size: 10px;
  background-color: #0d6efd;
  color: #fff;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .login .logo.admin::before,
.css-before .login .logo.admin::before {
  content: "Admin";
  width: 38px;
  background-color: #e50019;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .login .logo .hide,
.css-before .login .logo .hide {
  display: none;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .captcha-wrap,
.css-before .captcha-wrap {
  margin: 20px 0;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .captcha-area,
.css-before .captcha-area {
  display: flex;
  margin-bottom: 8px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .captch,
.css-before .captch {
  border: 1px solid #ccc;
  width: 100%;
  background-color: #dbdbdb;
  margin: -1px 0;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .captch-control,
.css-before .captch-control {
  display: flex;
  flex-direction: column;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .captch-control button,
.css-before .captch-control button {
  font-size: 12px;
  margin: -1px 0;
  padding: 2px 10px;
  background-color: #fff;
  border: 1px solid #D1D2D4;
  border-radius: 0;
  padding-left: 30px;
  background-repeat: no-repeat;
  background-position: left 10px center;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .captch-control .refresh,
.css-before .captch-control .refresh {
  background-image: url(../../static/images/ico/refresh.png);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .captch-control .sound,
.css-before .captch-control .sound {
  background-image: url(../../static/images/ico/volume.png);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .verify-wrap,
.css-before .verify-wrap {
  margin: 20px 0;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .verify-area,
.css-before .verify-area {
  display: flex;
  margin: 8px 0;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .verify,
.css-before .verify {
  position: relative;
  flex: 1;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .verify input,
.css-before .verify input {
  padding-right: 40px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .verify .form-txt,
.css-before .verify .form-txt {
  position: absolute;
  right: 0;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .verify-control button,
.css-before .verify-control button {
  width: 120px !important;
  height: 54px;
  margin-left: 8px;
  white-space: nowrap;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .partition-wrap,
.css-before .partition-wrap {
  display: flex;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .partition-v,
.css-before .partition-v {
  flex-direction: column;
  height: 100%;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .partition-h,
.css-before .partition-h {
  width: 100%;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .partition-v .partition,
.css-before .partition-v .partition {
  height: 50%;
  flex: auto;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .partition-h .partition,
.css-before .partition-h .partition {
  width: 50%;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .resize-v,
.css-before .resize-v {
  resize: vertical;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .resize-h,
.css-before .resize-h {
  resize: horizontal;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .resizing-1,
.css-before .resizing-1 {
  overflow: auto;
  min-height: 52px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .resizing-2,
.css-before .resizing-2 {
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .handler-bar,
.css-before .handler-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #dee2e6;
  cursor: row-resize;
  user-select: none; /* disable selection */
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .handler-bar span,
.css-before .handler-bar span {
  display: block;
  width: 16px;
  font-size: 0px;
  background: url(../../static/images/ico/bar-handler.png) center no-repeat;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .partition-h .handler-bar,
.css-before .partition-h .handler-bar {
  cursor: col-resize;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .partition-h .handler-bar span,
.css-before .partition-h .handler-bar span {
  transform: rotate(90deg);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .date span,
.css-before .date span {
  display: inline-block;
  min-width: 65px;
  position: relative;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .date span.dStart::after,
.css-before .date span.dStart::after {
  content: "~";
  display: inline-block;
  width: 10px;
  text-align: right;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .tbl-group .tbl-title .g-h4 + .label::after,
.css-before .tbl-group .tbl-title .g-h4 + .label::after {
  display: inline-block;
  content: "";
  width: 0px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .tblResult .date span.dStart::after,
.css-before .tblResult .date span.dStart::after {
  position: absolute;
  top: 0;
  right: -8px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .userid-AD,
.css-before .userid-AD {
  display: inline-block;
  margin: 4px 0 0;
  color: #666;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .userid-AD::before,
.css-before .userid-AD::before {
  content: "||";
  display: inline-block;
  vertical-align: text-top;
  font-size: 10px;
  color: #999;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .userid-AD .id-AD,
.css-before .userid-AD .id-AD {
  font-size: 11px;
  color: #999;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .dropdown ul,
.css-before .dropdown ul {
  margin-top: 5px;
  border-radius: 3px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .dropdown li,
.css-before .dropdown li {
  text-align: left;
  font-size: 13px;
  cursor: pointer;
  vertical-align: middle;
  line-height: normal;
  white-space: nowrap;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .dropdown .right,
.css-before .dropdown .right {
  right: 0;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .select_wrap,
.css-before .select_wrap {
  position: relative;
  user-select: none;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .select_wrap .default_option,
.css-before .select_wrap .default_option {
  background: #fff;
  border-radius: 5px;
  position: relative;
  cursor: pointer;
}
.default_option:before {
  content: "";
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 1;
  width: 6px;
  height: 6px;
  border: 2px solid;
  border-color: transparent transparent #555555 #555555;
  transform: rotate(-45deg);
}

.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .select_wrap .default_option li,
.css-before .select_wrap .default_option li {
  padding: 10px;
  background-color: #f7f7f7;
  border-radius: 5px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .select_wrap .select_ul,
.css-before .select_wrap .select_ul {
  position: absolute;
  top: 50px;
  left: 0;
  width: 100%;
  max-height: 300px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 5px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  display: none;
  overflow: auto;
  z-index: 1;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .select_wrap .select_ul li,
.css-before .select_wrap .select_ul li {
  padding: 8px 15px;
  cursor: pointer;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .select_wrap .select_ul li:first-child:hover,
.css-before .select_wrap .select_ul li:first-child:hover {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .select_wrap .select_ul li:last-child:hover,
.css-before .select_wrap .select_ul li:last-child:hover {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .select_wrap .select_ul li:hover,
.css-before .select_wrap .select_ul li:hover {
  background: #f7f7f7;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .select_wrap .option,
.css-before .select_wrap .option {
  display: flex;
  align-items: center;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .select_wrap .option .icon,
.css-before .select_wrap .option .icon {
  background-repeat: no-repeat;
  background-position: center;
  width: 18px;
  height: 18px;
  margin-right: 8px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .select_wrap.active .select_ul,
.css-before .select_wrap.active .select_ul {
  display: block;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .select_wrap.active .default_option:before,
.css-before .select_wrap.active .default_option:before {
  top: 25px;
  transform: rotate(-225deg);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd,
.css-before.campaignAdd {
  display: flex;
  position: relative;
  /*소재목록 소재현황,승인현황 height 크기 일정유지*/
  /*사이드 quickMenu*/
  /*//사이드 quickMenu*/
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .main-header,
.css-before.campaignAdd .main-header {
  border-bottom: 3px solid rgba(0, 0, 0, 0.2);
  background: #fff;
  padding: 20px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .panel-group,
.css-before.campaignAdd .panel-group {
  position: relative;
  border-left: 1px solid #ddd;
  box-shadow: 5px 0 10px 0 rgba(122, 169, 166, 0.2);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .panel-wrap,
.css-before.campaignAdd .panel-wrap {
  width: 450px;
  max-width: 450px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .panel-wrap .panel_content,
.css-before.campaignAdd .panel-wrap .panel_content {
  height: 100%;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .panel-wrap .panel_bottom,
.css-before.campaignAdd .panel-wrap .panel_bottom {
  position: relative;
  padding: 20px;
  text-align: center;
  border-top: 3px solid rgba(0, 0, 0, 0.2);
  /*캠페인정보 요약*/
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .panel-wrap .panel_bottom button + button,
.css-before.campaignAdd .panel-wrap .panel_bottom button + button {
  margin-left: 4px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .panel-wrap .panel_bottom .tooltip-wrap,
.css-before.campaignAdd .panel-wrap .panel_bottom .tooltip-wrap {
  display: block;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .panel-wrap .panel_bottom .summary,
.css-before.campaignAdd .panel-wrap .panel_bottom .summary {
  padding-bottom: 20px;
  margin-top: -20px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .panel-wrap .panel_bottom .summary_flip,
.css-before.campaignAdd .panel-wrap .panel_bottom .summary_flip {
  display: block;
  width: 30px;
  height: 20px;
  background: #fff;
  box-shadow: 0 -5px 5px 0px rgba(0, 0, 0, 0.1);
  border-radius: 4px 4px 0px 0;
  position: absolute;
  top: -20px;
  right: 5px;
  z-index: 11;
  cursor: pointer;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .panel-wrap .panel_bottom .summary_flip i,
.css-before.campaignAdd .panel-wrap .panel_bottom .summary_flip i {
  display: block;
  height: 100%;
  color: #fff;
  font-size: 0px;
  background-image: url("../images/ico/ico_material-keyboard-arrow-down-01.png");
  background-position: center;
  background-repeat: no-repeat;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .panel-wrap .panel_bottom .summary_flip.up i,
.css-before.campaignAdd .panel-wrap .panel_bottom .summary_flip.up i {
  transform: rotate(180deg);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .panel-wrap .panel_bottom .summary_content,
.css-before.campaignAdd .panel-wrap .panel_bottom .summary_content {
  background: #fff;
  padding: 20px 0;
  border-bottom: 1px solid #ccc;
  text-align: left;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .panel-wrap .panel_bottom .summary_content .date,
.css-before.campaignAdd .panel-wrap .panel_bottom .summary_content .date {
  cursor: pointer;
  margin-right: 4px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .panel-wrap .panel_bottom .summary .date,
.css-before.campaignAdd .panel-wrap .panel_bottom .summary .date {
  font-weight: 500;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .panel-wrap .panel_bottom .summary .price,
.css-before.campaignAdd .panel-wrap .panel_bottom .summary .price {
  font-size: 22px;
  font-weight: 900;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .panel-wrap .panel_bottom .summary .minimum,
.css-before.campaignAdd .panel-wrap .panel_bottom .summary .minimum {
  color: #4C4C4E;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .panel-wrap-sub,
.css-before.campaignAdd .panel-wrap-sub {
  position: absolute;
  left: 450px;
  height: 100%;
  max-height: 100%;
  box-shadow: 7px 0px 7px 0 rgba(0, 0, 0, 0.2);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .material-wrap, .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .situation-wrap,
.css-before.campaignAdd .material-wrap,
.css-before.campaignAdd .situation-wrap {
  display: flex;
  flex-direction: column;
  min-height: 320px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .material-wrap .info,
.css-before.campaignAdd .material-wrap .info {
  flex: 1;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .material-wrap .situation,
.css-before.campaignAdd .material-wrap .situation {
  border: 0;
  background-color: #f5f5f5;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .wrap_quick.hidden,
.css-before.campaignAdd .wrap_quick.hidden {
  right: -80px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .ui-quickmenu,
.css-before.campaignAdd .ui-quickmenu {
  position: fixed;
  right: 0;
  top: 0px;
  width: 80px;
  height: 100%;
  z-index: 100;
  transition: 0.2s;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .ui-quickmenu.hidden,
.css-before.campaignAdd .ui-quickmenu.hidden {
  right: -81px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .ui-quickmenu.hidden .btn_fold_quick .i_fold,
.css-before.campaignAdd .ui-quickmenu.hidden .btn_fold_quick .i_fold {
  background-position: -555px 0px;
  margin-left: -3px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .ui-quickmenu h2,
.css-before.campaignAdd .ui-quickmenu h2 {
  width: 80px;
  height: 35px;
  line-height: 35px;
  font-size: 12px;
  font-weight: 600;
  color: #000;
  background: #fff;
  border-bottom: 1px solid #eaebed;
  z-index: 1;
  text-align: center;
  z-index: 2;
  margin: 0 auto;
  display: block;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .ui-quickmenu .btn-toggle,
.css-before.campaignAdd .ui-quickmenu .btn-toggle {
  position: absolute;
  overflow: hidden;
  right: 79px;
  top: 36px;
  width: 21px;
  height: 86px;
  z-index: 3;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .ui-quickmenu .btn_fold_quick,
.css-before.campaignAdd .ui-quickmenu .btn_fold_quick {
  position: absolute;
  top: 50%;
  right: 79px;
  width: 24px;
  height: 80px;
  margin-top: -80px; /*border:1px solid #ebebeb;*/
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
  border-right: none;
  background: #fff;
  border-radius: 5px 0 0 5px;
  cursor: pointer;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .ui-quickmenu .btn_fold_quick .i_fold,
.css-before.campaignAdd .ui-quickmenu .btn_fold_quick .i_fold {
  width: 8px;
  height: 12px;
  margin: 0 0 0 3px;
  background: url(../../static/images/ico/sme_ico.png) no-repeat;
  background-position: -542px 0px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .ui-quickmenu-nav,
.css-before.campaignAdd .ui-quickmenu-nav {
  display: block; /*border-left: 1px solid #eaebed;*/
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
  position: absolute;
  right: 0;
  top: 0;
  width: 80px;
  height: 100%;
  background: #fff;
  z-index: 2;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .ui-quickmenu-nav ul,
.css-before.campaignAdd .ui-quickmenu-nav ul {
  border-bottom: 1px solid #eaebed;
  height: 100%;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .ui-quickmenu-nav li,
.css-before.campaignAdd .ui-quickmenu-nav li {
  text-align: center;
  margin: 12px 10px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .ui-quickmenu-nav li:first-child,
.css-before.campaignAdd .ui-quickmenu-nav li:first-child {
  border-top: 0;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .ui-quickmenu-nav li + li,
.css-before.campaignAdd .ui-quickmenu-nav li + li {
  border-top: 1px dashed #ebebeb;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .ui-quickmenu-item,
.css-before.campaignAdd .ui-quickmenu-item {
  display: block;
  position: relative;
  width: 60px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .ui-quickmenu-item:before,
.css-before.campaignAdd .ui-quickmenu-item:before {
  display: block;
  content: "";
  clear: both;
  margin: 12px auto 8px;
  width: 25px;
  height: 25px;
  background-image: url(../../static/images/ico/sme_ico.png);
  background-repeat: no-repeat;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .ui-quickmenu-item.n01:before,
.css-before.campaignAdd .ui-quickmenu-item.n01:before {
  background-position: -30px -483px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .ui-quickmenu-item.n01:hover:before,
.css-before.campaignAdd .ui-quickmenu-item.n01:hover:before {
  background-position: 0 -483px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .ui-quickmenu-item.n02:before,
.css-before.campaignAdd .ui-quickmenu-item.n02:before {
  background-position: -30px -517px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .ui-quickmenu-item.n02:hover:before,
.css-before.campaignAdd .ui-quickmenu-item.n02:hover:before {
  background-position: 0px -517px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .ui-quickmenu-item.n03:before,
.css-before.campaignAdd .ui-quickmenu-item.n03:before {
  background-position: -30px -547px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .ui-quickmenu-item.n03:hover:before,
.css-before.campaignAdd .ui-quickmenu-item.n03:hover:before {
  background-position: 0px -547px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .ui-quickmenu-item.n04:before,
.css-before.campaignAdd .ui-quickmenu-item.n04:before {
  background-position: -30px -577px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .ui-quickmenu-item.n04:hover:before,
.css-before.campaignAdd .ui-quickmenu-item.n04:hover:before {
  background-position: 0px -577px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .ui-quickmenu-item.n05:before,
.css-before.campaignAdd .ui-quickmenu-item.n05:before {
  background-position: -30px -607px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .ui-quickmenu-item.n05:hover:before,
.css-before.campaignAdd .ui-quickmenu-item.n05:hover:before {
  background-position: 0px -607px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .ui-quickmenu-item.n06:before,
.css-before.campaignAdd .ui-quickmenu-item.n06:before {
  background-position: -30px -637px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .ui-quickmenu-item.n06:hover:before,
.css-before.campaignAdd .ui-quickmenu-item.n06:hover:before {
  background-position: 0px -637px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .ui-quickmenu-item.n07:before,
.css-before.campaignAdd .ui-quickmenu-item.n07:before {
  background-position: -30px -665px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .ui-quickmenu-item.n07:hover:before,
.css-before.campaignAdd .ui-quickmenu-item.n07:hover:before {
  background-position: 0px -665px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .ui-quickmenu-item.n08:before,
.css-before.campaignAdd .ui-quickmenu-item.n08:before {
  background-position: -30px -692px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .ui-quickmenu-item.n08:hover:before,
.css-before.campaignAdd .ui-quickmenu-item.n08:hover:before {
  background-position: 0px -692px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .ui-quickmenu-item .tit,
.css-before.campaignAdd .ui-quickmenu-item .tit {
  display: inline-block;
  padding: 0 0 10px;
  font-size: 12px;
  color: #555;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.05em;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .ui-quickmenu-item:hover .tit,
.css-before.campaignAdd .ui-quickmenu-item:hover .tit {
  color: #000;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .hide_txt,
.css-before.campaignAdd .hide_txt {
  display: inline-block !important;
  overflow: hidden !important;
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 1px;
  line-height: 0;
  slideToggle: rect(1px 1px 1px 1px);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .list_gnb .link_gnb .txt_gnb,
.css-before.campaignAdd .list_gnb .link_gnb .txt_gnb {
  font-size: 16px;
  font-family: NotoSans-regular, sans-serif;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd .wrap_main .list_gnb .link_gnb .ico_gnb,
.css-before.campaignAdd .wrap_main .list_gnb .link_gnb .ico_gnb {
  display: none;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd [contenteditable=true]:empty:before,
.css-before.campaignAdd [contenteditable=true]:empty:before {
  line-height: 30px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd + .covered.is-active, .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd + .vfm,
.css-before.campaignAdd + .covered.is-active,
.css-before.campaignAdd + .vfm {
  padding: 50px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd + .covered.is-active .popup-wrap, .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd + .vfm .popup-wrap,
.css-before.campaignAdd + .covered.is-active .popup-wrap,
.css-before.campaignAdd + .vfm .popup-wrap {
  width: fit-content;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd + .covered.is-active .popup-head, .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd + .covered.is-active .popup-content, .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd + .vfm .popup-head, .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd + .vfm .popup-content,
.css-before.campaignAdd + .covered.is-active .popup-head,
.css-before.campaignAdd + .covered.is-active .popup-content,
.css-before.campaignAdd + .vfm .popup-head,
.css-before.campaignAdd + .vfm .popup-content {
  max-height: 1000px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd + .covered.is-active .meterialAD .check.btn-type, .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd + .vfm .meterialAD .check.btn-type,
.css-before.campaignAdd + .covered.is-active .meterialAD .check.btn-type,
.css-before.campaignAdd + .vfm .meterialAD .check.btn-type {
  width: 47%;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd + .covered.is-active .meterialAD .svg-ico, .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd + .vfm .meterialAD .svg-ico,
.css-before.campaignAdd + .covered.is-active .meterialAD .svg-ico,
.css-before.campaignAdd + .vfm .meterialAD .svg-ico {
  min-width: 22px;
  min-height: 22px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd + .covered.is-active .panel-wrap-sub, .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd + .vfm .panel-wrap-sub,
.css-before.campaignAdd + .covered.is-active .panel-wrap-sub,
.css-before.campaignAdd + .vfm .panel-wrap-sub {
  position: relative;
  height: 1000px;
  max-height: 100%;
  min-width: auto;
  background-color: #fff;
  border-radius: 8px;
  margin-left: 20px;
  flex-direction: initial;
  overflow: initial;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .panel-group .close,
.css-before .panel-group .close {
  box-shadow: 7px 0px 7px 0 rgba(0, 0, 0, 0.2);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .panel-wrap.sub,
.css-before .panel-wrap.sub {
  border-left: 1px solid #8d8d8d;
  width: 400px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .panel-wrap.sub .header .sub_txt,
.css-before .panel-wrap.sub .header .sub_txt {
  margin: 8px 0;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .panel-wrap.sub .panel-body section,
.css-before .panel-wrap.sub .panel-body section {
  margin: 20px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .panel-wrap.sub .panel-body section .tbl-group + .tbl-group,
.css-before .panel-wrap.sub .panel-body section .tbl-group + .tbl-group {
  margin-top: 20px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .panel-wrap.sub .panel-body section .tbl td, .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .panel-wrap.sub .panel-body section .tbl th,
.css-before .panel-wrap.sub .panel-body section .tbl td,
.css-before .panel-wrap.sub .panel-body section .tbl th {
  word-break: inherit;
  line-height: normal;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .panel-wrap.sub .panel-body section .bul-list > li,
.css-before .panel-wrap.sub .panel-body section .bul-list > li {
  margin: 2px 0;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .panel-wrap.sub .close,
.css-before .panel-wrap.sub .close {
  position: absolute;
  right: -44px;
  background: #fff;
  width: 44px;
  height: 44px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .panel-wrap.sub .close .btn-close5,
.css-before .panel-wrap.sub .close .btn-close5 {
  position: relative;
  right: auto;
  top: auto;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .panel-wrap.sub b,
.css-before .panel-wrap.sub b {
  color: #000;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd + .covered .popup .step .btn-edit,
.css-before.campaignAdd + .covered .popup .step .btn-edit {
  margin-left: 4px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd + .covered .popup input[type=checkbox].btn_toggle_switch,
.css-before.campaignAdd + .covered .popup input[type=checkbox].btn_toggle_switch {
  width: 40px;
  height: 20px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd + .covered .popup input[type=checkbox].btn_toggle_switch::before,
.css-before.campaignAdd + .covered .popup input[type=checkbox].btn_toggle_switch::before {
  width: 40px;
  height: 20px;
  border-radius: 50rem;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).campaignAdd + .covered .popup input[type=checkbox].btn_toggle_switch::after,
.css-before.campaignAdd + .covered .popup input[type=checkbox].btn_toggle_switch::after {
  top: 5px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .campaign,
.css-before .campaign {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  max-height: 100%;
  overflow: hidden;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .campaign > li,
.css-before .campaign > li {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  max-height: calc(100% - 65px);
  overflow: hidden;
  border-bottom: 3px solid rgba(0, 0, 0, 0.2);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .campaign > li:nth-child(2),
.css-before .campaign > li:nth-child(2) {
  position: relative;
  border-bottom: 0;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .campaign > li:nth-child(2) .cont,
.css-before .campaign > li:nth-child(2) .cont {
  position: relative;
  background-color: #ebebeb;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .campaign > li:nth-child(2) .cont::-webkit-scrollbar,
.css-before .campaign > li:nth-child(2) .cont::-webkit-scrollbar {
  width: 4px;
  height: 3px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .campaign > li > .header,
.css-before .campaign > li > .header {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  margin-bottom: -1px;
  z-index: 1;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .campaign > li > .header > button,
.css-before .campaign > li > .header > button {
  position: absolute;
  top: 20px;
  right: 20px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .campaign > li > .header h3::after,
.css-before .campaign > li > .header h3::after {
  display: inline-block;
  content: "";
  width: 10px;
  height: 10px;
  margin-left: 8px;
  background-image: url("../images/ico/ico_material-keyboard-arrow-down-01.png");
  background-repeat: no-repeat;
  background-position: center;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .campaign > li .cont,
.css-before .campaign > li .cont {
  padding: 10px;
  flex: 1 1 auto;
  overflow-y: auto;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .campaign > li .cont .table,
.css-before .campaign > li .cont .table {
  font-size: 15px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .campaign > li .cont .th,
.css-before .campaign > li .cont .th {
  color: #4C4C4E;
  width: 75px;
  vertical-align: text-top;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .campaign > li .cont .materialType .table,
.css-before .campaign > li .cont .materialType .table {
  font-size: 13px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .campaign .toggle,
.css-before .campaign .toggle {
  flex: 1 1 auto;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .campaign .add,
.css-before .campaign .add {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  text-align: center;
  padding: 20px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .campaignInfo,
.css-before .campaignInfo {
  padding: 0 20px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .campaignInfo > ul > li,
.css-before .campaignInfo > ul > li {
  margin-bottom: 15px;
  padding-bottom: 15px;
  border-bottom: 1px dashed #ddd;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .campaignInfo > ul > li:last-child,
.css-before .campaignInfo > ul > li:last-child {
  border-bottom: 0;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .campaignInfo .title,
.css-before .campaignInfo .title {
  font-size: 16px;
  font-weight: 500;
  padding-bottom: 20px;
  color: #4C4C4E;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .campaignInfo .title .btn-edit,
.css-before .campaignInfo .title .btn-edit {
  margin: 0 0 0 5px;
  align-items: center;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .mediaChannel,
.css-before .mediaChannel {
  background-color: #fff;
  border-radius: 8px;
  border: 2px solid #afafaf;
  margin-bottom: 10px;
  position: relative;
  /*channel-header*/
  /*기본소재 변경 알림창*/
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .mediaChannel.choice,
.css-before .mediaChannel.choice {
  border-color: #0d6efd;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .mediaChannel:last-child,
.css-before .mediaChannel:last-child {
  margin-bottom: 0;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .mediaChannel .header,
.css-before .mediaChannel .header {
  position: relative;
  min-height: 52px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .mediaChannel .header .h-group,
.css-before .mediaChannel .header .h-group {
  padding: 15px;
  width: 100%;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .mediaChannel .header .title .svg-ico,
.css-before .mediaChannel .header .title .svg-ico {
  margin: 0 5px;
  vertical-align: middle;
  width: 22px;
  height: 22px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .mediaChannel .header h4,
.css-before .mediaChannel .header h4 {
  display: inline-block;
  vertical-align: middle;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .mediaChannel .header .title,
.css-before .mediaChannel .header .title {
  padding: 0 60px 0 16px;
  background-image: url(../images/ico/ico_material-keyboard-arrow-down-2.png);
  background-repeat: no-repeat;
  background-position: left center;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .mediaChannel .header .additional,
.css-before .mediaChannel .header .additional {
  margin-top: 10px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .mediaChannel .header .additional span,
.css-before .mediaChannel .header .additional span {
  display: inline-block;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .mediaChannel .header .additional span::after,
.css-before .mediaChannel .header .additional span::after {
  display: inline-block;
  content: "/";
  margin-left: 2px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .mediaChannel .header .additional span:last-child::after,
.css-before .mediaChannel .header .additional span:last-child::after {
  display: none;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .mediaChannel .header .mediaChannel-lnb,
.css-before .mediaChannel .header .mediaChannel-lnb {
  position: absolute;
  top: 13px;
  right: 15px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .mediaChannel-alert,
.css-before .mediaChannel-alert {
  margin-bottom: 10px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .mediaChannel-alert i,
.css-before .mediaChannel-alert i {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 50rem;
  width: 18px;
  height: 18px;
  font-weight: 700;
  margin-right: 4px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .mediaChannel-alert .alert-title,
.css-before .mediaChannel-alert .alert-title {
  position: relative;
  font-weight: 500;
  cursor: pointer;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .mediaChannel-alert .alert-title::after,
.css-before .mediaChannel-alert .alert-title::after {
  display: inline-block;
  position: absolute;
  right: 0;
  content: "";
  width: 10px;
  height: 10px;
  margin-left: 8px;
  background-image: url(../images/ico/ico_material-keyboard-arrow-down-01.png);
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.5;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .mediaChannel-alert .alert-title:hover::after,
.css-before .mediaChannel-alert .alert-title:hover::after {
  opacity: 1;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .mediaChannel-alert .alert-content,
.css-before .mediaChannel-alert .alert-content {
  display: none;
  margin-top: 8px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .mediaChannel-alert .alert-content p > span,
.css-before .mediaChannel-alert .alert-content p > span {
  margin-right: 8px;
  white-space: nowrap;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .mediaChannel-alert .alert-content strong,
.css-before .mediaChannel-alert .alert-content strong {
  color: #000;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .mediaChannel-alert .type-emergency i,
.css-before .mediaChannel-alert .type-emergency i {
  background-color: #842029;
  color: #fff;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .mediaChannel-alert .type-warnning i,
.css-before .mediaChannel-alert .type-warnning i {
  background-color: #664d03;
  color: #fff;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .media-card,
.css-before .media-card {
  margin: 0;
  /*파이어폭스*/
  /*청약리스트 내 소재변경 및 게첨내용*/
  /*청약리스트 내 소재변경시
  .materialType{
      margin: 20px -20px -20px;
      padding: 20px;
      border-top: 1px solid #ccc;
      background: rgba(0,0,0,.01);
  }*/
  /*청약카드 순번, @at-root 순번은 공통으로 사용*/
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .media-card > li,
.css-before .media-card > li {
  padding: 20px;
  border-top: 2px solid #afafaf;
  font-size: 15px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .media-card > li .form.type-fit-col,
.css-before .media-card > li .form.type-fit-col {
  margin: 7px 0;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .media-card > li .form.type-fit-col:last-child,
.css-before .media-card > li .form.type-fit-col:last-child {
  border-top: 1px solid #ccc;
  padding-top: 10px;
  margin-top: 10px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .media-card > li .table,
.css-before .media-card > li .table {
  margin: 7px 0;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .media-card > li .table:last-child,
.css-before .media-card > li .table:last-child {
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  margin: 10px 0 0;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .media-card > li .table:last-child .th, .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .media-card > li .table:last-child .td,
.css-before .media-card > li .table:last-child .th,
.css-before .media-card > li .table:last-child .td {
  vertical-align: text-top;
  padding-top: 10px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .media-card > li .td .minimum,
.css-before .media-card > li .td .minimum {
  font-size: 13px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .media-card > li .td .point,
.css-before .media-card > li .td .point {
  font-weight: 500;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .media-card > li .td .price,
.css-before .media-card > li .td .price {
  display: inline-block;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .media-card > li .td .additional,
.css-before .media-card > li .td .additional {
  margin-left: 5px;
  line-height: 1.2;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .media-card > li .td .additional .extra-item,
.css-before .media-card > li .td .additional .extra-item {
  margin-top: 4px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .media-card > li .td .additional .extra-item li,
.css-before .media-card > li .td .additional .extra-item li {
  line-height: 1.5;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .media-card > li .td .additional .extra-item li::before,
.css-before .media-card > li .td .additional .extra-item li::before {
  content: "+";
  display: inline-block;
  margin-right: 2px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .media-card .media-card .input-group,
.css-before .media-card .media-card .input-group {
  flex: 1;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .media-card .media-card-top,
.css-before .media-card .media-card-top {
  margin: -20px -20px 20px;
  position: relative;
  padding: 5px 15px;
  background-color: rgba(112, 138, 142, 0.1);
  background-color: rgba(145, 179, 185, 0.1);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .media-card .media-card-top .mediaChannel-lnb > li,
.css-before .media-card .media-card-top .mediaChannel-lnb > li {
  margin-left: 0;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .media-card .media-card-top .mediaChannel-lnb > li .svg-ico,
.css-before .media-card .media-card-top .mediaChannel-lnb > li .svg-ico {
  width: 11px;
  height: 11px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .media-card .media-card-top .mediaChannel-lnb > li .material-btn .svg-ico,
.css-before .media-card .media-card-top .mediaChannel-lnb > li .material-btn .svg-ico {
  width: 14px;
  height: 14px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .media-card .media-card-top .mediaChannel-lnb > li .svg-ico-type41,
.css-before .media-card .media-card-top .mediaChannel-lnb > li .svg-ico-type41 {
  background-image: url(../images/svg/copy_708A8E.svg);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .media-card .media-card-top .mediaChannel-lnb > li .svg-ico-type34,
.css-before .media-card .media-card-top .mediaChannel-lnb > li .svg-ico-type34 {
  background-image: url(../images/svg/trash_708A8E.svg);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .media-card .media-card-top .mediaChannel-lnb .btn,
.css-before .media-card .media-card-top .mediaChannel-lnb .btn {
  background-color: rgba(0, 0, 0, 0);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .media-card .media-card-top .mediaChannel-lnb .btn:hover,
.css-before .media-card .media-card-top .mediaChannel-lnb .btn:hover {
  background-color: rgba(0, 0, 0, 0.08);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .media-card .media-card-material,
.css-before .media-card .media-card-material {
  background-image: url(../images/svg/material_708A8E.svg);
  background-size: 16px;
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 18px;
  font-size: 13px;
  display: inline-block;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .media-card .choice,
.css-before .media-card .choice {
  background-color: rgba(0, 200, 209, 0.08);
  border-color: #0d6efd;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .media-card .choice + li,
.css-before .media-card .choice + li {
  border-color: #0d6efd;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .media-card .choice .sequence,
.css-before .media-card .choice .sequence {
  background-color: #0d6efd;
  color: #fff;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .media-card .choice .sequence::before,
.css-before .media-card .choice .sequence::before {
  display: inline-block;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .media-card .collapse-wrap,
.css-before .media-card .collapse-wrap {
  margin: 20px -20px -20px;
  background: rgba(0, 0, 0, 0.01);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .media-card .collapse,
.css-before .media-card .collapse {
  border-top: 1px solid #ccc;
  padding: 2px 10px;
  background: rgba(0, 0, 0, 0.01);
  color: #000;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .media-card .collapse::after,
.css-before .media-card .collapse::after {
  display: inline-block;
  content: "";
  width: 16px;
  height: 16px;
  vertical-align: middle;
  border: 1px solid #ccc;
  border-radius: 50rem;
  background-color: #fff;
  margin: 0 4px;
  background-image: url(../images/ico/ico_material-keyboard-arrow-down-2.png);
  background-repeat: no-repeat;
  background-position: center top 4px;
  transform: rotate(0deg);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .media-card .collapse.is-active::after,
.css-before .media-card .collapse.is-active::after {
  transform: rotate(270deg);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .media-card .collapse-content,
.css-before .media-card .collapse-content {
  padding: 10px 20px;
  background-color: rgba(255, 255, 255, 0.5);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .media-card .collapse-content .th, .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .media-card .collapse-content .td,
.css-before .media-card .collapse-content .th,
.css-before .media-card .collapse-content .td {
  padding: 0 !important;
  font-size: 13px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .media-card .materialType .video,
.css-before .media-card .materialType .video {
  width: 100px !important;
  height: 100px !important;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .media-card .materialType .table,
.css-before .media-card .materialType .table {
  border: 0 !important;
  margin: 0 !important;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .media-card .sequence,
.css-before .media-card .sequence {
  margin-left: -5px;
  margin-top: 1px;
  background-color: #dce1e3;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .media-card .sequence::before,
.css-before .media-card .sequence::before {
  display: none;
  margin-right: 2px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .sequence,
.css-before .sequence {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  padding: 0 5px;
  border-radius: 50rem;
  min-width: 22px;
  background-color: #708a8e;
  color: #fff;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .sequence::before,
.css-before .sequence::before {
  content: "청약";
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .mediaChannel-lnb, .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .more-lnb,
.css-before .mediaChannel-lnb,
.css-before .more-lnb {
  display: flex;
  align-items: center;
  justify-content: end;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .mediaChannel-lnb > li, .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .more-lnb > li,
.css-before .mediaChannel-lnb > li,
.css-before .more-lnb > li {
  margin-left: 5px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .mediaChannel-lnb > li .svg-ico, .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .more-lnb > li .svg-ico,
.css-before .mediaChannel-lnb > li .svg-ico,
.css-before .more-lnb > li .svg-ico {
  min-width: auto;
  min-height: auto;
  width: 14px;
  height: 14px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .mediaChannel-lnb > li .svg-ico-type36, .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .more-lnb > li .svg-ico-type36,
.css-before .mediaChannel-lnb > li .svg-ico-type36,
.css-before .more-lnb > li .svg-ico-type36 {
  background-image: url(../images/svg/add_777777.svg);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .mediaChannel-lnb .dropdown, .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .more-lnb .dropdown,
.css-before .mediaChannel-lnb .dropdown,
.css-before .more-lnb .dropdown {
  display: block;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .mediaChannel-lnb .btn, .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .more-lnb .btn,
.css-before .mediaChannel-lnb .btn,
.css-before .more-lnb .btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50rem;
  background-color: rgba(0, 0, 0, 0.03);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .mediaChannel-lnb .btn:active, .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .more-lnb .btn:active,
.css-before .mediaChannel-lnb .btn:active,
.css-before .more-lnb .btn:active {
  box-shadow: 0 0 0 0.2rem rgba(143, 143, 143, 0.3);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .mediaChannel-lnb .btn.active, .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .more-lnb .btn.active,
.css-before .mediaChannel-lnb .btn.active,
.css-before .more-lnb .btn.active {
  background-color: rgba(0, 0, 0, 0.1);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .mediaChannel-lnb button:hover, .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .more-lnb button:hover,
.css-before .mediaChannel-lnb button:hover,
.css-before .more-lnb button:hover {
  background-color: rgba(0, 0, 0, 0.08);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .ask,
.css-before .ask {
  min-height: 120px;
  width: 380px;
  margin: 0 auto;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .ask p,
.css-before .ask p {
  margin-top: 15px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .ask .mediaName,
.css-before .ask .mediaName {
  font-weight: inherit;
  position: relative;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .ask .mediaName::before,
.css-before .ask .mediaName::before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 3px;
  background-color: #89a2d0;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .ask span,
.css-before .ask span {
  font-weight: inherit;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .channel-selectbox,
.css-before .channel-selectbox {
  width: 100%;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .lite.on,
.css-before .lite.on {
  display: none !important;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .building-img,
.css-before .building-img {
  background-color: #e7e7e7;
  height: 235px;
  border-bottom: 5px solid #e5e5e5;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map_base_layer,
.css-before .map_base_layer {
  filter: brightness(1);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map_filter_gray,
.css-before .map_filter_gray {
  filter: grayscale(100%);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map,
.css-before .map {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map-canvas,
.css-before .map-canvas {
  position: absolute;
  background-size: cover;
  width: 100%;
  height: 100%;
  overflow: auto;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .mapControls,
.css-before .mapControls {
  position: initial;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .mapControls .popup-wrap,
.css-before .mapControls .popup-wrap {
  position: absolute;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .mapControls .popup,
.css-before .mapControls .popup {
  min-width: auto;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.1);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .mapControls .popup-body,
.css-before .mapControls .popup-body {
  padding: 20px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map_btns,
.css-before .map_btns {
  display: flex;
  flex-direction: column;
  align-items: end;
  position: absolute;
  right: 20px;
  z-index: 1;
  /*지도범례*/
  /*유동인구 부분*/
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map_btns.top,
.css-before .map_btns.top {
  top: 20px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map_btns.bottom,
.css-before .map_btns.bottom {
  bottom: 20px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map_btns > li,
.css-before .map_btns > li {
  position: relative;
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map_btns > li > .btn,
.css-before .map_btns > li > .btn {
  width: 42px;
  height: 42px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-bottom-color: #DEDEDF;
  line-height: 1em;
  margin-bottom: -1px !important;
  word-break: break-all;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
  align-items: center;
  justify-content: center;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map_btns > li > .btn span,
.css-before .map_btns > li > .btn span {
  width: 24px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map_btns > li > .btn + .btn,
.css-before .map_btns > li > .btn + .btn {
  margin: 0;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map_btns > li > .btn.choice,
.css-before .map_btns > li > .btn.choice {
  color: #0475F4;
  border-color: #0475F4;
  z-index: 1;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map_btns > li.control-btns .choice,
.css-before .map_btns > li.control-btns .choice {
  color: #fff;
  background-color: #0475F4;
  border-color: #0475F4;
  z-index: 1;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map_btns > li:last-child,
.css-before .map_btns > li:last-child {
  margin-bottom: 0;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map_btns .popup-wrap .tool_close button,
.css-before .map_btns .popup-wrap .tool_close button {
  width: 24px;
  height: 24px;
  padding: 0;
  box-shadow: none;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map_btns .legend_btn.choice,
.css-before .map_btns .legend_btn.choice {
  background-color: #0475F4;
  color: #fff;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map_btns .legend_content,
.css-before .map_btns .legend_content {
  display: none;
  right: 50px;
  top: 0;
  left: auto;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map_btns .legend_content .popup,
.css-before .map_btns .legend_content .popup {
  width: 380px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map_btns .legend_content .popup-content,
.css-before .map_btns .legend_content .popup-content {
  max-height: calc(100vh - 400px); /*overflow-y: auto;*/
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map_btns .legend_content .popup-body .popup-title,
.css-before .map_btns .legend_content .popup-body .popup-title {
  margin: 0 0 15px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map_btns .legend_content .popup-body article + article,
.css-before .map_btns .legend_content .popup-body article + article {
  border-top: 1px solid #ECECEC;
  padding-top: 15px;
  margin-top: 15px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map_btns .legend_content .popup-body article.flex,
.css-before .map_btns .legend_content .popup-body article.flex {
  align-items: center;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map_btns .legend_content .popup-body article.flex .popup-title,
.css-before .map_btns .legend_content .popup-body article.flex .popup-title {
  margin: 0 16px 0 0;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map_btns .legend_content .popup-body .legend_checkboxs li,
.css-before .map_btns .legend_content .popup-body .legend_checkboxs li {
  width: 50%;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map_btns .legend_content .tab-content,
.css-before .map_btns .legend_content .tab-content {
  padding: 5px 0 0;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map_btns .range-step,
.css-before .map_btns .range-step {
  display: flex;
  width: 100%;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map_btns .range-step li,
.css-before .map_btns .range-step li {
  flex: 1;
  text-align: center;
  line-height: normal;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map_btns .range-step li p,
.css-before .map_btns .range-step li p {
  border-top: 4px solid;
  padding: 2px 0;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map_btns .range-step li span,
.css-before .map_btns .range-step li span {
  font-size: 12px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map_btns .range-step li:nth-child(1) p,
.css-before .map_btns .range-step li:nth-child(1) p {
  color: #1877F2;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map_btns .range-step li:nth-child(2) p,
.css-before .map_btns .range-step li:nth-child(2) p {
  color: #32B50B;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map_btns .range-step li:nth-child(3) p,
.css-before .map_btns .range-step li:nth-child(3) p {
  color: #EDAE1C;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map_btns .range-step li:nth-child(4) p,
.css-before .map_btns .range-step li:nth-child(4) p {
  color: #ED7E1C;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map_btns .range-step li:nth-child(5) p,
.css-before .map_btns .range-step li:nth-child(5) p {
  color: #ED1C24;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map_btns .range-step-setting,
.css-before .map_btns .range-step-setting {
  margin-top: 16px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map_btns .range-step-setting .btn-small,
.css-before .map_btns .range-step-setting .btn-small {
  width: auto;
  height: auto;
  font-size: 13px;
  cursor: pointer;
  padding: 0 8px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map_btns .range-step-setting-box,
.css-before .map_btns .range-step-setting-box {
  background-color: #f9f9f9;
  padding: 8px;
  margin-top: 4px;
  display: none;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .btn-make,
.css-before .btn-make {
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  color: #fff;
  width: 120px;
  height: 120px;
  border-radius: 100%;
  line-height: normal;
  border: 2px solid #fff;
  background-color: #0475F4;
  background-image: radial-gradient(circle, #0458f4, #0098ff, #00c0e9, #00dd86, #a8eb12);
  background-size: 300% 300%;
  animation: makeCampaign 6s infinite;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .btn-make span,
.css-before .btn-make span {
  padding: 0;
  font-size: 14px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .btn-make .svg-ico-type10,
.css-before .btn-make .svg-ico-type10 {
  width: 50px;
  height: 50px;
  background-image: url(../../static/images/svg/campaign_FFFFFF.svg);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .btn-make:hover,
.css-before .btn-make:hover {
  box-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}
@keyframes makeCampaign {
  0% {
    background-position: 50% 100%;
    border-color: #fff;
  }
  25% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 50% 0%;
    border-color: transparent;
  }
  75% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 50% 100%;
    border-color: #fff;
  }
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map_region-wrap,
.css-before .map_region-wrap {
  position: absolute;
  bottom: 20px;
  left: 50%;
  z-index: 1;
  transform: translateX(-50%);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map_region-wrap .popup-wrap,
.css-before .map_region-wrap .popup-wrap {
  display: table;
  top: auto;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map_region-wrap .popup,
.css-before .map_region-wrap .popup { /*width: 240px;*/
  min-width: auto;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map_region-wrap .popup-body,
.css-before .map_region-wrap .popup-body {
  padding: 0;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map_region-wrap .popup-body .local-list-wrap,
.css-before .map_region-wrap .popup-body .local-list-wrap {
  border: 0;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map_region-wrap .check.btn-type,
.css-before .map_region-wrap .check.btn-type {
  margin: 0 10px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map_region-wrap .check.btn-type label,
.css-before .map_region-wrap .check.btn-type label {
  background-color: #4c4c4e;
  height: 40px;
  border-radius: 50rem;
  padding: 0 14px;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.16);
  border: 0;
  color: #fff;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map_region-wrap .check.btn-type > input + label span,
.css-before .map_region-wrap .check.btn-type > input + label span {
  display: inline-block;
  font-size: 13px;
  white-space: nowrap;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map_region-wrap .check.btn-type > input + label span::after,
.css-before .map_region-wrap .check.btn-type > input + label span::after {
  content: "OFF";
  margin-left: 4px;
  font-weight: 500;
  color: #999;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map_region-wrap .check.btn-type > input:checked + label span::after,
.css-before .map_region-wrap .check.btn-type > input:checked + label span::after {
  content: "ON";
  margin-left: 4px;
  font-weight: 500;
  color: #0d6efd;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map_region,
.css-before .map_region {
  display: inline-flex;
  align-items: center;
  padding: 0px 14px;
  border-radius: 50rem;
  background-color: #fff;
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.16);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map_region ul,
.css-before .map_region ul {
  display: inline-flex;
  align-items: center;
  height: 40px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map_region li,
.css-before .map_region li {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map_region li::after,
.css-before .map_region li::after {
  content: "";
  display: flex;
  width: 10px;
  height: 40px;
  margin: 0 8px;
  align-items: center;
  background-image: url(../images/svg/map_region_arrow.svg);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map_region li:last-child::after,
.css-before .map_region li:last-child::after {
  display: none;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map_region i + ul,
.css-before .map_region i + ul {
  margin-left: 8px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .filter-wrap,
.css-before .filter-wrap {
  position: relative;
  display: inline-block;
  padding: 10px;
  z-index: 10;
  /*반경버튼*/
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .filter-wrap .popup-wrap,
.css-before .filter-wrap .popup-wrap {
  align-items: baseline;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .filter-wrap .popup,
.css-before .filter-wrap .popup {
  margin: 8px 0 0 !important;
  border-left: 1px solid #ddd;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.16);
  float: left;
  max-height: 680px;
  /*설정한 타겟 색상*/
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .filter-wrap .popup .empty,
.css-before .filter-wrap .popup .empty {
  color: #838383;
  font-size: 16px;
  text-align: center;
  padding: 40px 0;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .filter-wrap .popup .tab-content,
.css-before .filter-wrap .popup .tab-content {
  padding: 15px 0;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .filter-wrap .popup .list-area-wrap th,
.css-before .filter-wrap .popup .list-area-wrap th {
  background: #f4f7f8;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .filter-wrap .popup .tag,
.css-before .filter-wrap .popup .tag {
  background: #f4f7f8;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .filter-wrap .popup-head .popup-title,
.css-before .filter-wrap .popup-head .popup-title {
  margin: 0;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .filter-wrap .popup-head,
.css-before .filter-wrap .popup-head {
  transform-origin: 0 0;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .filter-wrap .scroll,
.css-before .filter-wrap .scroll {
  border-top: 1px solid #e9e9e9;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .filter-wrap .btn-radius,
.css-before .filter-wrap .btn-radius {
  margin: 0 0 0 10px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .filter-wrap .btn-radius label,
.css-before .filter-wrap .btn-radius label {
  min-height: 37px;
  background-color: #0d6efd;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .filter-wrap .btn-radius span,
.css-before .filter-wrap .btn-radius span {
  display: flex !important;
  color: #fff;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .filter-wrap .btn-radius i,
.css-before .filter-wrap .btn-radius i {
  margin: 0 4px 0 0 !important;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .filter-wrap .btn-radius .svg-ico-type47,
.css-before .filter-wrap .btn-radius .svg-ico-type47 {
  background-image: url(../images/svg/radius_FFFFFF.svg);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .filter,
.css-before .filter {
  border-radius: 8px;
  height: 50px;
  line-height: 50px;
  white-space: nowrap;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .filter .dropdown,
.css-before .filter .dropdown {
  cursor: pointer;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .filter .dropdown ul,
.css-before .filter .dropdown ul {
  margin: 0;
  min-width: 150px;
  position: absolute;
  left: 0;
  top: 50px;
  border-radius: 0 8px 8px 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.16);
  overflow: hidden;
  z-index: 11;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .filter .dropdown li,
.css-before .filter .dropdown li {
  border-right: 0;
  border-radius: 0 !important;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .filter .dropdown li:hover,
.css-before .filter .dropdown li:hover {
  background-color: #f8f8f8;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .filter .dropdown .click,
.css-before .filter .dropdown .click {
  display: flex;
  flex-direction: column;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .filter .dropdown .click > button,
.css-before .filter .dropdown .click > button {
  padding: 0 8px;
  height: 100%;
  border-radius: 0 8px 8px 0;
  border-left: 1px solid rgba(0, 0, 0, 0.04);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .filter .dropdown .click > button:hover, .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .filter .dropdown .click > button:focus,
.css-before .filter .dropdown .click > button:hover,
.css-before .filter .dropdown .click > button:focus {
  background: rgba(0, 0, 0, 0.04);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .filter .dropdown .click > button i,
.css-before .filter .dropdown .click > button i {
  margin: 0;
  min-width: 12px;
  min-height: 12px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .filter .collect button .svg-ico,
.css-before .filter .collect button .svg-ico {
  margin-right: 0;
  transform: rotate(90deg);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .filter .collect.is-on .svg-ico-type43,
.css-before .filter .collect.is-on .svg-ico-type43 {
  background-image: url(../images/svg/tune_00B7AE.svg);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .filter button,
.css-before .filter button {
  align-items: center;
  padding: 0 15px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .filter button .svg-ico,
.css-before .filter button .svg-ico {
  margin-right: 8px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .filter button.choice,
.css-before .filter button.choice {
  color: #2A3A61;
  font-weight: 500;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .filter li,
.css-before .filter li {
  display: flex;
  justify-content: space-between;
  position: relative;
  background-color: #fff;
  border-right: 1px solid rgba(0, 0, 0, 0.075);
  font-size: 15px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .filter li:first-child,
.css-before .filter li:first-child {
  border-radius: 8px 0 0 8px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .filter li:last-child,
.css-before .filter li:last-child {
  border-radius: 0 8px 8px 0;
  border-right: 0;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .filtering,
.css-before .filtering { /*max-height: 500px;*/
  overflow-y: auto;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .filtering .btn-ico-type8,
.css-before .filtering .btn-ico-type8 {
  margin: 1px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .filtering + .popup-title,
.css-before .filtering + .popup-title {
  margin-top: 15px !important;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .CoordinatePoints,
.css-before .CoordinatePoints {
  background-color: #f7f7f7;
  padding: 4px;
  border-radius: 4px;
  margin-top: 10px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .popup-body .target-wrap,
.css-before .popup-body .target-wrap {
  margin: 0 -25px -25px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .target-group,
.css-before .target-group {
  border-top: 2px solid #e5e5e5;
  padding: 0 25px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .target-group:first-child,
.css-before .target-group:first-child {
  border-top: 0;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .target-title,
.css-before .target-title {
  display: flex;
  justify-content: space-between;
  width: 100%;
  cursor: pointer;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .target-title h5,
.css-before .target-title h5 {
  display: flex;
  width: 100%;
  align-items: center;
  padding: 20px 0;
  white-space: nowrap;
  font-size: 18px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .target-title h5::before,
.css-before .target-title h5::before {
  content: "";
  display: flex;
  flex: 1;
  order: 2;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .target-title h5::after,
.css-before .target-title h5::after {
  display: inline-block;
  content: "";
  width: 10px;
  height: 10px;
  margin-left: 8px;
  background-image: url(../images/ico/ico_material-keyboard-arrow-down-01.png);
  background-repeat: no-repeat;
  background-position: center;
  filter: opacity(0.6);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .target-title h5 .svg-ico,
.css-before .target-title h5 .svg-ico {
  margin-right: 8px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .target-title:hover h5::after,
.css-before .target-title:hover h5::after {
  filter: opacity(1);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .target-content,
.css-before .target-content {
  padding: 5px 0 25px;
  overflow: hidden;
  min-height: 100px; /*min-height:250px*/
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .target-content .popup-title,
.css-before .target-content .popup-title {
  display: flex;
  align-items: center;
  margin: 0 0 8px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .target-content .popup-title .btn,
.css-before .target-content .popup-title .btn {
  margin-left: 8px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .label-extra,
.css-before .label-extra {
  background-color: rgba(255, 0, 0, 0.02);
  color: #ed1c24;
  font-size: 13px;
  padding: 1px 6px;
  margin: 2px 0;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .extras,
.css-before .extras {
  display: flex;
  flex-wrap: wrap;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .extras p,
.css-before .extras p {
  display: inline-flex;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .extras p::after,
.css-before .extras p::after {
  content: ",";
  display: inline-block;
  margin: 0 2px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .extras p:last-child::after,
.css-before .extras p:last-child::after {
  display: none;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .materialType li,
.css-before .materialType li {
  border-bottom: 1px solid #e9e9e9;
  margin: 8px 0;
  padding-bottom: 8px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .materialType li:last-child,
.css-before .materialType li:last-child {
  border-bottom: 0;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .materialType .title,
.css-before .materialType .title {
  font-size: 15px;
  font-weight: 400;
  margin-bottom: 8px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .materialType .video,
.css-before .materialType .video {
  text-align: center;
  background-color: rgba(0, 0, 0, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .materialType .horizental video,
.css-before .materialType .horizental video {
  width: 100%;
  height: auto;
  margin: 0 auto;
  aspect-ratio: 16/9;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .materialType .horizental img,
.css-before .materialType .horizental img {
  width: 100%;
  aspect-ratio: 16/9;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .materialType .vertical .video,
.css-before .materialType .vertical .video {
  height: 420px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .materialType .vertical video,
.css-before .materialType .vertical video {
  height: 100%;
  width: auto;
  margin: 0 auto;
  aspect-ratio: 9/16;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .materialType .vertical img,
.css-before .materialType .vertical img {
  height: 100%;
  aspect-ratio: 9/16;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .materialType .info,
.css-before .materialType .info {
  flex: 1;
  padding-left: 16px;
  line-height: normal;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .materialType .info > .table,
.css-before .materialType .info > .table {
  width: auto;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .materialType .info > .table > .tr > .th,
.css-before .materialType .info > .table > .tr > .th {
  min-width: 60px;
  width: auto;
  padding-right: 8px;
  white-space: nowrap;
  vertical-align: top;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .materialType .info > .table > .tr > .td,
.css-before .materialType .info > .table > .tr > .td {
  word-break: break-all;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .materialType .info > *,
.css-before .materialType .info > * {
  font-size: 13px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .materialType .player,
.css-before .materialType .player {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .materialType .player::before,
.css-before .materialType .player::before {
  content: "";
  width: 32px;
  height: 32px;
  border: 2px solid #fff;
  border-radius: 50rem;
  opacity: 0.9;
  z-index: 1;
  background-image: url(../images/svg/play-solid-white.svg);
  background-position: left 9px center;
  background-repeat: no-repeat;
  background-size: 12px;
  cursor: pointer;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .materialType .player:hover::before,
.css-before .materialType .player:hover::before {
  opacity: 1;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .campaignInfo .materialType .video,
.css-before .campaignInfo .materialType .video {
  width: 100px;
  height: 100px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .videoArea,
.css-before .videoArea {
  background-color: #fff;
  margin-top: 26px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .videoArea .tbl-style1,
.css-before .videoArea .tbl-style1 {
  border-top: 0;
  margin: 0;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .videoArea .tbl-style1 th, .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .videoArea .tbl-style1 td,
.css-before .videoArea .tbl-style1 th,
.css-before .videoArea .tbl-style1 td {
  padding: 10px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .videoArea .materialType ul,
.css-before .videoArea .materialType ul {
  display: flex;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .videoArea .materialType li,
.css-before .videoArea .materialType li {
  display: flex;
  margin: 0;
  padding: 20px;
  width: 100%;
  background-color: #fff;
  border: 1px solid #eee;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .videoArea .materialType .table,
.css-before .videoArea .materialType .table {
  width: auto;
  font-size: 14px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .videoArea .materialType .th,
.css-before .videoArea .materialType .th {
  padding: 8px;
  color: #7b7b7b;
  white-space: break-spaces !important;
  max-width: 80px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .videoArea .materialType .td,
.css-before .videoArea .materialType .td {
  padding: 8px 0;
  word-break: break-all;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .videoArea .materialType .video, .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .videoArea .materialType .info,
.css-before .videoArea .materialType .video,
.css-before .videoArea .materialType .info {
  flex: 1;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .videoArea-subject,
.css-before .videoArea-subject {
  max-height: 470px;
  border: 3px solid #d7dcdd;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .videoArea-subject .root_directory,
.css-before .videoArea-subject .root_directory {
  /*디렉토리 마지막 or 하위폴더가 없을때*/
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .videoArea-subject .root_directory .leaf a,
.css-before .videoArea-subject .root_directory .leaf a {
  background-image: url(../images/ico/video--.png) !important;
  filter: grayscale(1);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .videoArea-subject .root_directory .leaf.--selected a,
.css-before .videoArea-subject .root_directory .leaf.--selected a {
  background-image: url(../images/ico/video--selected.png) !important;
  filter: grayscale(0);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .templateMode,
.css-before .templateMode {
  background-color: #F9F9F9;
  padding: 15px; /*width: 435px;*/
  width: auto;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .templateMode .form.type-row,
.css-before .templateMode .form.type-row {
  margin: 20px 0;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .templateBox-wrap ul,
.css-before .templateBox-wrap ul {
  display: flex;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .templateBox-wrap li,
.css-before .templateBox-wrap li {
  margin-right: 15px;
  padding-bottom: 0 !important;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .templateBox-wrap li:last-child,
.css-before .templateBox-wrap li:last-child {
  margin-right: 0;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .templateBox-wrap .radio span,
.css-before .templateBox-wrap .radio span {
  display: block;
  text-align: center;
  padding: 0;
  font-size: 15px;
  order: 2;
  margin: 5px 0 23px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .templateBox-wrap label,
.css-before .templateBox-wrap label {
  display: flex;
  flex-direction: column;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .templateBox-wrap input,
.css-before .templateBox-wrap input {
  opacity: 0;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .templateBox-wrap input,
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .templateBox-wrap .radio label:before, .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .templateBox-wrap .radio label:after,
.css-before .templateBox-wrap input,
.css-before .templateBox-wrap .radio label:before,
.css-before .templateBox-wrap .radio label:after {
  left: calc(50% - 10px);
  top: auto;
  bottom: 0;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .templateBox-wrap .radio > input:checked + label:after,
.css-before .templateBox-wrap .radio > input:checked + label:after {
  left: calc(50% - 5px);
  top: auto;
  bottom: 5px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .templateBox-wrap .templateBox,
.css-before .templateBox-wrap .templateBox {
  order: 1;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .templateBox,
.css-before .templateBox {
  display: flex;
  flex-direction: column;
  width: 90px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .templateBox .box,
.css-before .templateBox .box {
  height: 54px;
  border: 1px solid #787878;
  margin: -1px 0 0;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .templateBox .box.choice,
.css-before .templateBox .box.choice {
  background-color: #c5d2df;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .materialFiter,
.css-before .materialFiter {
  border-bottom: 1px solid #ccc;
  padding: 30px 0 10px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .popup .materialList > ul > li,
.css-before .popup .materialList > ul > li {
  padding-bottom: 10px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .popup .array03 > ul,
.css-before .popup .array03 > ul {
  max-width: 900px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .popup .array03 > ul > li,
.css-before .popup .array03 > ul > li {
  width: 33.33%;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .popup .array04 > ul,
.css-before .popup .array04 > ul {
  max-width: 1200px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .popup .array04 > ul > li,
.css-before .popup .array04 > ul > li {
  width: 25%;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .material-wrap .title .label-basic,
.css-before .material-wrap .title .label-basic {
  display: inline-block;
  margin-right: 2px;
  border-radius: 2px;
  font-size: 9px;
  line-height: normal;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .material-wrap, .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .situation-wrap,
.css-before .material-wrap,
.css-before .situation-wrap {
  border: 4px solid transparent;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .material-wrap.selected,
.css-before .material-wrap.selected {
  border: 4px solid #0d6efd;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .material-wrap .check,
.css-before .material-wrap .check {
  position: absolute;
  left: 10px;
  top: 10px;
  margin: 0;
  z-index: 10;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .material-wrap .check input[type=checkbox],
.css-before .material-wrap .check input[type=checkbox] {
  display: none;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .material-wrap .check input:hover + label:before,
.css-before .material-wrap .check input:hover + label:before {
  border-color: transparent;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .material-wrap .check label,
.css-before .material-wrap .check label {
  border-radius: 50rem;
  width: 30px;
  height: 30px;
  overflow: hidden;
  opacity: 0.5;
  cursor: pointer;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .material-wrap .check label::before,
.css-before .material-wrap .check label::before {
  width: 100%;
  height: 100%;
  background-color: #888;
  border-color: #888;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .material-wrap .check label::after,
.css-before .material-wrap .check label::after {
  width: 10px;
  height: 7px;
  background: none;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .material-wrap .check label::after, .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .material-wrap .check input:checked + label:after,
.css-before .material-wrap .check label::after,
.css-before .material-wrap .check input:checked + label:after {
  left: 10px;
  top: 10px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .material-wrap .check input:checked + label:before,
.css-before .material-wrap .check input:checked + label:before {
  border-color: #0d6efd;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .material-wrap .check input:checked + label, .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .material-wrap .check input:hover + label,
.css-before .material-wrap .check input:checked + label,
.css-before .material-wrap .check input:hover + label {
  opacity: 1;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .opponent-list,
.css-before .opponent-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding: 10px 0;
  flex: 1;
  overflow: hidden;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .opponent-list h4,
.css-before .opponent-list h4 {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 10px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .opponent-list ul,
.css-before .opponent-list ul {
  flex: 1;
  overflow: auto;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .meterialAD .check.btn-type,
.css-before .meterialAD .check.btn-type {
  display: block;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .meterialAD .check.btn-type label,
.css-before .meterialAD .check.btn-type label {
  width: 100%;
  min-height: 63px;
  cursor: pointer;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .meterialAD .check.btn-type .svg-ico, .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .meterialAD .check.btn-type-col .svg-ico,
.css-before .meterialAD .check.btn-type .svg-ico,
.css-before .meterialAD .check.btn-type-col .svg-ico {
  width: 22px;
  height: 22px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .meterialAD.chosen .check.btn-type label,
.css-before .meterialAD.chosen .check.btn-type label {
  background-color: #f0f4f5;
  border-color: #e6eced;
  opacity: 1;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .meterialAD.chosen .check.btn-type label span,
.css-before .meterialAD.chosen .check.btn-type label span {
  color: #000;
  word-break: keep-all;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .meterialAD .btn-type-col,
.css-before .meterialAD .btn-type-col {
  display: block;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .meterialAD .btn-type-col label,
.css-before .meterialAD .btn-type-col label {
  width: 100%;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .meterialAD .btn-type-col label span,
.css-before .meterialAD .btn-type-col label span {
  display: flex;
  word-break: break-all;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .stautsDisplay span,
.css-before .stautsDisplay span {
  font-weight: 500;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .stautsDisplay span::after,
.css-before .stautsDisplay span::after {
  content: "/";
  margin: 0 3px;
  color: #666;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .stautsDisplay span:last-child::after,
.css-before .stautsDisplay span:last-child::after {
  content: "";
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .thumbnail-material,
.css-before .thumbnail-material {
  display: inline-block;
  vertical-align: middle;
  margin-right: 3px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .thumbnail-material .materialType .video,
.css-before .thumbnail-material .materialType .video {
  width: 34px;
  height: 34px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .popup .form.meterialAD .form-title,
.css-before .popup .form.meterialAD .form-title {
  margin-bottom: 8px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .popup .form.meterialAD li,
.css-before .popup .form.meterialAD li {
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
  max-width: 480px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .popup .form.meterialAD li:last-child,
.css-before .popup .form.meterialAD li:last-child {
  border: 0;
  margin: 0;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .campaignReport .step,
.css-before .campaignReport .step {
  margin: 0 auto;
  margin-bottom: 40px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .campaignReport .root_directory,
.css-before .campaignReport .root_directory {
  margin-right: -1px;
  z-index: 1;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .campaignReport .root_directory h4,
.css-before .campaignReport .root_directory h4 {
  padding: 12px 0px;
  margin: 0px;
  font-weight: normal;
  font-size: 12px;
  opacity: 0.8;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .campaignReport .root_directory h4 i,
.css-before .campaignReport .root_directory h4 i {
  min-width: 16px;
  min-height: 16px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .campaignReport .root_directory ul + h4,
.css-before .campaignReport .root_directory ul + h4 {
  border-top: 1px solid #ebeff0;
  margin-top: 4px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .campaignReport .root_directory + .tab-wrap,
.css-before .campaignReport .root_directory + .tab-wrap {
  display: flex;
  flex-direction: column;
  /*리포트양식 내 table*/
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .campaignReport .root_directory + .tab-wrap > .tab-nav ul,
.css-before .campaignReport .root_directory + .tab-wrap > .tab-nav ul {
  background-color: #f7f7f7;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .campaignReport .root_directory + .tab-wrap > .tab-nav li,
.css-before .campaignReport .root_directory + .tab-wrap > .tab-nav li {
  width: 16.6666666667%;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .campaignReport .root_directory + .tab-wrap > .tab-nav li:not(.is-selected) a,
.css-before .campaignReport .root_directory + .tab-wrap > .tab-nav li:not(.is-selected) a {
  background-color: transparent;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .campaignReport .root_directory + .tab-wrap .tab-content,
.css-before .campaignReport .root_directory + .tab-wrap .tab-content {
  flex: 1;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .campaignReport .root_directory + .tab-wrap .tab-content th,
.css-before .campaignReport .root_directory + .tab-wrap .tab-content th {
  width: 0%;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .campaignReport .root_directory + .tab-wrap .tab-content tbody th,
.css-before .campaignReport .root_directory + .tab-wrap .tab-content tbody th {
  font-weight: normal;
  text-align: center;
}
@media screen and (max-width: 1320px) {
  .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .campaignReport .report-content .videoArea .materialType ul,
  .css-before .campaignReport .report-content .videoArea .materialType ul {
    flex-direction: column;
  }
  .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .campaignReport .report-content .videoArea .materialType ul li,
  .css-before .campaignReport .report-content .videoArea .materialType ul li {
    width: 100%;
  }
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .btns-wrap,
.css-before .btns-wrap {
  display: flex;
  justify-content: end;
  position: relative;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .btns-wrap button,
.css-before .btns-wrap button {
  margin: 0 2px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .btns-wrap .main-btns,
.css-before .btns-wrap .main-btns {
  display: inline-flex;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .btns-wrap .side-btns-right,
.css-before .btns-wrap .side-btns-right {
  display: inline-flex;
  margin-left: 16px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .btns-wrap.bottom,
.css-before .btns-wrap.bottom {
  margin: 20px 0;
  justify-content: center;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .btns-wrap.bottom button,
.css-before .btns-wrap.bottom button {
  margin: 0 4px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .btns-wrap.bottom .main-btns,
.css-before .btns-wrap.bottom .main-btns {
  display: inline-flex;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .btns-wrap.bottom .side-btns-right,
.css-before .btns-wrap.bottom .side-btns-right {
  display: inline-flex;
  position: absolute;
  right: 0;
  top: 0;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .pay-table td,
.css-before .pay-table td {
  padding: 15px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .pay-table .radio.btn-type label,
.css-before .pay-table .radio.btn-type label {
  min-width: 120px;
  font-size: 14px;
  color: #000;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .pay-table .refund-account,
.css-before .pay-table .refund-account {
  margin-top: 15px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .pay-table .price,
.css-before .pay-table .price {
  color: #000;
  font-size: 18px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .pay-total,
.css-before .pay-total {
  height: 100%;
  padding: 30px;
  margin: 0 auto;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .pay-total li,
.css-before .pay-total li {
  margin-top: 5px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .pay-total .detail-price,
.css-before .pay-total .detail-price {
  padding-bottom: 20px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .pay-total .detail-price + .detail-price,
.css-before .pay-total .detail-price + .detail-price {
  border-top: 1px solid #ccc;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .pay-total .box__option,
.css-before .pay-total .box__option {
  display: flex;
  justify-content: space-between;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .pay-total .text__title,
.css-before .pay-total .text__title {
  font-size: 16px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .pay-total .text__num.minus::before,
.css-before .pay-total .text__num.minus::before {
  content: "-";
  display: inline-block;
  margin-right: 3px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .pay-total .total-price,
.css-before .pay-total .total-price {
  padding-top: 20px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .pay-total .total-price .text__title,
.css-before .pay-total .total-price .text__title {
  font-size: 18px;
  font-weight: 500;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .pay-total .total-price .text__num,
.css-before .pay-total .total-price .text__num {
  font-size: 24px;
  font-weight: 700;
  color: #ED1C24;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .pay-total .btn,
.css-before .pay-total .btn {
  width: 100%;
  height: 60px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .refund-account,
.css-before .refund-account {
  padding: 10px;
  background-color: #f9f9f9;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .refund-account .title,
.css-before .refund-account .title {
  font-weight: 500;
  font-size: 15px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .refund-account .form-container,
.css-before .refund-account .form-container {
  margin-top: 10px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .pay-rounds,
.css-before .pay-rounds {
  height: 200px;
  overflow: auto;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-width: 1px 0;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .pay-rounds li,
.css-before .pay-rounds li {
  display: flex;
  align-items: center;
  padding: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  margin: -1px 0;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .pay-rounds li > span,
.css-before .pay-rounds li > span {
  min-width: 30px;
  color: rgba(0, 0, 0, 0.4);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .pay-rounds li > span::after,
.css-before .pay-rounds li > span::after {
  display: inline-block;
  content: ".";
  margin-left: 1px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .pay-rounds .form-title,
.css-before .pay-rounds .form-title {
  flex-basis: auto !important;
  padding-right: 4px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .pay-rounds li,
.css-before .pay-rounds li {
  background-color: #f7f7f7;
  justify-content: space-between;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .pay-rounds li > span,
.css-before .pay-rounds li > span {
  display: none;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .pay-rounds .target,
.css-before .pay-rounds .target {
  background-color: #f2fbfb;
  border: 1px solid #0d6efd;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .pay-rounds .--start,
.css-before .pay-rounds .--start {
  background-color: #fff;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .pay-rounds .--end,
.css-before .pay-rounds .--end {
  background-color: #fff;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .pay-rounds .target p,
.css-before .pay-rounds .target p {
  font-size: 11px;
  background: #0d6efd;
  color: #fff;
  border-radius: 50rem;
  padding: 0 5px;
  white-space: nowrap;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .pay-rounds .--end + li,
.css-before .pay-rounds .--end + li {
  border-top: 1px solid #0d6efd;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .pay_result,
.css-before .pay_result {
  margin-top: 80px;
  text-align: center;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .pay_result .pay_result_header + .pay_result_body,
.css-before .pay_result .pay_result_header + .pay_result_body {
  margin-top: 30px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .pay_result .tbl-group,
.css-before .pay_result .tbl-group {
  width: 700px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .pay_title,
.css-before .pay_title {
  font-size: 48px;
  font-weight: 700;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .pay_text,
.css-before .pay_text {
  font-size: 22px;
  font-weight: 500;
  color: #4C4C4E;
  line-height: normal;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .pay_text u,
.css-before .pay_text u {
  color: #ED1C24;
  font-weight: 700;
  text-decoration: none;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .report,
.css-before .report {
  flex: 1;
  /*리포트내 내역테이블 탭*/
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .report-header,
.css-before .report-header {
  padding: 20px;
  background-color: #0d6efd;
  color: #fff;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .report-content,
.css-before .report-content {
  /*리포트양식 내 table디자인*/
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .report-content .tbl-group, .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .report-content .tab-wrap,
.css-before .report-content .tbl-group,
.css-before .report-content .tab-wrap {
  margin: 10px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .report-content .tbl-group + .tbl-group,
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .report-content .tbl-group + .tab-wrap,
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .report-content .tbl-group + .chart-group,
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .report-content .tab-wrap + .tab-wrap,
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .report-content .tab-wrap + .tbl-group,
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .report-content .tab-wrap + .chart-group,
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .report-content .chart-group + .chart-group,
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .report-content .chart-group + .tbl-group,
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .report-content .chart-group + .tab-wrap,
.css-before .report-content .tbl-group + .tbl-group,
.css-before .report-content .tbl-group + .tab-wrap,
.css-before .report-content .tbl-group + .chart-group,
.css-before .report-content .tab-wrap + .tab-wrap,
.css-before .report-content .tab-wrap + .tbl-group,
.css-before .report-content .tab-wrap + .chart-group,
.css-before .report-content .chart-group + .chart-group,
.css-before .report-content .chart-group + .tbl-group,
.css-before .report-content .chart-group + .tab-wrap {
  padding-top: 20px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .report-content .tbl-title,
.css-before .report-content .tbl-title {
  border-bottom: 1px solid #444;
  padding-bottom: 10px;
  margin-bottom: 0;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .report-content .tbl,
.css-before .report-content .tbl {
  border-top: 0;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .report-content .tbl.scroll-auto,
.css-before .report-content .tbl.scroll-auto {
  border: 1px solid #E5E5E7;
  border-width: 1px 0;
  background: #ccc;
  overflow: auto;
  max-height: 300px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .report-content .th-01,
.css-before .report-content .th-01 {
  background-color: rgba(45, 124, 189, 0.4);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .report-content .th-02,
.css-before .report-content .th-02 {
  background-color: rgba(45, 143, 189, 0.2);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .report-content .th-03,
.css-before .report-content .th-03 {
  background-color: rgba(45, 148, 189, 0.1);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .report-content + .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .report-content,
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .report-content + .css-before .report-content,
.css-before .report-content + .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .report-content,
.css-before .report-content + .css-before .report-content {
  padding-top: 30px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .report .tbl,
.css-before .report .tbl {
  margin: 0;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .report .tbl table,
.css-before .report .tbl table {
  table-layout: auto;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .report .tbl + .tbl-bottom,
.css-before .report .tbl + .tbl-bottom {
  padding: 5px;
  background: #ebeff0;
  border: 1px solid #e9e9e9;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .report .tab-style1 + .tab-content, .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .report .tab-style1 + .tab-content ~ .tab-content,
.css-before .report .tab-style1 + .tab-content,
.css-before .report .tab-style1 + .tab-content ~ .tab-content {
  padding: 20px 0;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .report .tab-style1 .is-selected a,
.css-before .report .tab-style1 .is-selected a {
  border-top: 1px solid #444;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .report .chart-wrap article,
.css-before .report .chart-wrap article {
  border: 1px solid #eee;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .no-data,
.css-before .no-data {
  font-size: 20px;
  font-weight: 500;
  text-align: center;
  padding: 165px 0 30px;
  opacity: 0.7;
  background: url(../../static/images/etc/no-data.png) no-repeat center top 30px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .targets,
.css-before .targets {
  display: flex;
  flex-wrap: wrap;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .targets p,
.css-before .targets p {
  display: inline-flex;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .targets p::after,
.css-before .targets p::after {
  content: "/";
  display: inline-block;
  margin: 0 4px;
  color: #777;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .targets p:nth-last-of-type(1)::after,
.css-before .targets p:nth-last-of-type(1)::after {
  display: none;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .targets strong,
.css-before .targets strong {
  color: #0d6efd;
  position: relative;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .applyInfo .btn-group button,
.css-before .applyInfo .btn-group button {
  font-size: 15px;
  min-width: 195px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .applyInfo .materialType li,
.css-before .applyInfo .materialType li {
  width: 50%;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .detailView,
.css-before .detailView {
  text-decoration: underline;
  vertical-align: middle;
  color: #777;
  cursor: pointer;
  margin-left: 8px;
  padding-left: 16px;
  background-image: url(../images/svg/page-open_777777.svg);
  background-size: 12px;
  background-repeat: no-repeat;
  background-position: left center;
  opacity: 0.5;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .detailView:hover,
.css-before .detailView:hover {
  text-decoration: underline;
  opacity: 1;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .chart-group .array02 > li,
.css-before .chart-group .array02 > li {
  width: 50%;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .chart-group .array03 > li,
.css-before .chart-group .array03 > li {
  width: 33.33%;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .chart-group .array04 > li,
.css-before .chart-group .array04 > li {
  width: 25%;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .chart-group .array05 > li,
.css-before .chart-group .array05 > li {
  width: 20%;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .chart-group .chart-wrap,
.css-before .chart-group .chart-wrap {
  display: flex;
  flex-wrap: wrap;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .chart-group .chart-wrap > li,
.css-before .chart-group .chart-wrap > li {
  display: flex;
  position: relative;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .chart-group .chart-wrap article,
.css-before .chart-group .chart-wrap article {
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  padding: 20px;
  margin: 10px;
  background-color: #fff;
  flex: 1;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .chart-group .chart-wrap .chart-header,
.css-before .chart-group .chart-wrap .chart-header {
  border-bottom: 1px solid rgb(235, 238, 240);
  align-items: center;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .chart-group .chart-wrap .chart-header h3,
.css-before .chart-group .chart-wrap .chart-header h3 {
  padding-bottom: 10px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .chart-group .chart-wrap .chart-content,
.css-before .chart-group .chart-wrap .chart-content {
  padding-top: 10px;
  display: flex;
  align-items: center;
  flex: 1;
  gap: 20px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .chart-group .chart-wrap .chart-data,
.css-before .chart-group .chart-wrap .chart-data {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-height: 440px;
  height: 100%;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .chart-group .chart-wrap .chart-data .tbl > table,
.css-before .chart-group .chart-wrap .chart-data .tbl > table {
  margin: 0;
  border-collapse: collapse;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .chart-group .chart-wrap .chart-data .tbl tr:hover,
.css-before .chart-group .chart-wrap .chart-data .tbl tr:hover {
  background-color: rgba(0, 0, 0, 0.02);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .chart-group .chart-wrap .chart-data .tbl td,
.css-before .chart-group .chart-wrap .chart-data .tbl td {
  padding: 5px 8px;
  border: 1px solid #cacdd1;
  border-left: 0;
  border-right: 1px solid rgb(235, 238, 240);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .chart-group .chart-wrap .chart-data .tbl td:last-child,
.css-before .chart-group .chart-wrap .chart-data .tbl td:last-child {
  border-right: 0;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .chart-group .chart-wrap .chart-data thead *,
.css-before .chart-group .chart-wrap .chart-data thead * {
  color: #000;
  background-color: #ebeef0;
  padding: 0;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .chart-group .chart-wrap .chart-data thead td,
.css-before .chart-group .chart-wrap .chart-data thead td {
  border-bottom-width: 2px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .chart-group .chart-wrap .chart-data .label,
.css-before .chart-group .chart-wrap .chart-data .label {
  min-width: auto;
  padding: 2px 12px 3px;
  filter: grayscale(0.1) opacity(0.85);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .chart-group .chart-wrap .chart-data.half,
.css-before .chart-group .chart-wrap .chart-data.half {
  max-height: 240px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .chart-group .chart-wrap .chart,
.css-before .chart-group .chart-wrap .chart {
  background-color: #fff;
  width: 100%;
  min-height: 300px;
  min-width: 300px;
  content: "chart";
  display: block;
  display: flex;
  align-items: center;
  flex: 1;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .chart-group .card-group .card-wrap article,
.css-before .chart-group .card-group .card-wrap article {
  margin: 20px 10px 0;
  box-shadow: none;
  border-color: #cacdd1;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .chart-group .card-group .card-wrap article:hover,
.css-before .chart-group .card-group .card-wrap article:hover {
  background-color: rgba(179, 225, 220, 0.2);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .card-group .card-wrap,
.css-before .card-group .card-wrap {
  display: flex;
  flex-wrap: wrap;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .card-group .card-wrap li,
.css-before .card-group .card-wrap li {
  flex: 1;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .card-group .card-wrap article,
.css-before .card-group .card-wrap article {
  border-radius: 8px;
  border: 1px solid #fff;
  padding: 20px;
  margin: 10px;
  background-color: #fff;
  flex: 1;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.02);
  cursor: pointer;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .card-group .card-wrap h3,
.css-before .card-group .card-wrap h3 {
  font-size: 15px;
  font-weight: 700;
  color: #444;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).dashboard,
.css-before.dashboard {
  font-size: 15px;
  /*공지시항*/
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).dashboard .main-header,
.css-before.dashboard .main-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).dashboard .count, .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).dashboard .price,
.css-before.dashboard .count,
.css-before.dashboard .price {
  color: #444;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).dashboard .price,
.css-before.dashboard .price {
  font-size: 22px;
  text-align: right;
  white-space: nowrap;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).dashboard a,
.css-before.dashboard a {
  cursor: pointer;
  color: #444;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).dashboard a:hover,
.css-before.dashboard a:hover {
  text-decoration: underline;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).dashboard .form.type-col .form-title,
.css-before.dashboard .form.type-col .form-title {
  flex-basis: auto;
  padding: 0 6px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).dashboard .date-range button:active,
.css-before.dashboard .date-range button:active {
  background: #326edc;
  border-color: #285ec3;
  color: #fff;
  z-index: 1;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).dashboard .chart-header h3,
.css-before.dashboard .chart-header h3 {
  display: inline-block;
  border-bottom: 1px solid #444;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).dashboard .chart-header h3 + a.svg-ico,
.css-before.dashboard .chart-header h3 + a.svg-ico {
  background-image: url(../images/svg/arrow-up-right-from-square-solid_000000.svg);
  background-size: 16px 16px;
  width: 16px;
  height: 16px;
  margin: 0 0 10px 5px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).dashboard .chart-header .precondition,
.css-before.dashboard .chart-header .precondition {
  margin-top: -10px;
  flex-flow: wrap;
  justify-content: end;
  flex: 1;
  gap: 6px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).dashboard .chart-content, .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).dashboard .card-group,
.css-before.dashboard .chart-content,
.css-before.dashboard .card-group {
  position: relative;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).dashboard .frame-center, .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).dashboard .frame-center.wideWidth,
.css-before.dashboard .frame-center,
.css-before.dashboard .frame-center.wideWidth {
  max-width: 100%;
  min-width: 100%;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).dashboard .Dday,
.css-before.dashboard .Dday {
  white-space: nowrap;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).dashboard .Dday::before,
.css-before.dashboard .Dday::before {
  content: "D-";
  display: inline-block;
  letter-spacing: 0.05rem;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).dashboard .comparison,
.css-before.dashboard .comparison {
  display: inline-flex;
  align-items: center;
  font-weight: bold;
  margin: 0 8px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).dashboard .comparison::after,
.css-before.dashboard .comparison::after {
  display: inline-block;
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 50rem;
  background-color: #ccc;
  background-image: url(../../static/images/svg/arrow-up-solid_FFFFFF.svg);
  background-size: 14px 14px;
  background-repeat: no-repeat;
  background-position: center;
  margin-left: 4px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).dashboard .comparison.rise,
.css-before.dashboard .comparison.rise {
  color: #ed1c24;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).dashboard .comparison.rise::after,
.css-before.dashboard .comparison.rise::after {
  background-color: rgba(255, 0, 0, 0.5);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).dashboard .comparison.fall,
.css-before.dashboard .comparison.fall {
  color: #1c49ed;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).dashboard .comparison.fall::after,
.css-before.dashboard .comparison.fall::after {
  background-color: rgba(0, 48, 255, 0.5);
  transform: rotate(180deg);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).dashboard .tbl,
.css-before.dashboard .tbl {
  flex: 1;
  overflow: auto;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).dashboard .tbl thead,
.css-before.dashboard .tbl thead {
  position: sticky;
  top: -1px;
  z-index: 10;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).dashboard .loading-wrap,
.css-before.dashboard .loading-wrap {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  z-index: 10;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).dashboard .notice-wrap,
.css-before.dashboard .notice-wrap {
  padding: 10px 20px !important;
  background-color: rgba(255, 255, 255, 0.4) !important;
  margin-top: 0 !important;
  flex-direction: row !important;
  overflow: hidden;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).dashboard .notice-wrap h3,
.css-before.dashboard .notice-wrap h3 {
  font-size: 0;
  width: 24px;
  height: 24px;
  background-image: url(../images/svg/bullhorn-solid_49575D.svg);
  background-repeat: no-repeat;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).dashboard .notice-list,
.css-before.dashboard .notice-list {
  width: 100%;
  height: 30px;
  overflow: hidden;
  margin: 0 20px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).dashboard .rolling,
.css-before.dashboard .rolling {
  position: relative;
  width: 100%;
  height: auto;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).dashboard .rolling li,
.css-before.dashboard .rolling li {
  height: 30px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #444;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).dashboard .notice-new,
.css-before.dashboard .notice-new {
  display: inline-block;
  background-color: #ffcf00;
  color: #222;
  font-weight: 500;
  border-radius: 50rem;
  padding: 0 10px;
  margin-right: 10px;
  font-size: 13px;
}
@media screen and (max-width: 1600px) {
  .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).dashboard .frame-center,
  .css-before.dashboard .frame-center {
    width: 100%;
    min-width: 100%;
  }
  .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).dashboard .col.col-2,
  .css-before.dashboard .col.col-2 {
    width: 33.3333%;
  }
  .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).dashboard .col.col-8, .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).dashboard .col.col-4, .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).dashboard .col.col-6,
  .css-before.dashboard .col.col-8,
  .css-before.dashboard .col.col-4,
  .css-before.dashboard .col.col-6 {
    width: 100%;
  }
}
@media screen and (max-width: 1366px) {
  .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).dashboard .col.col-2,
  .css-before.dashboard .col.col-2 {
    width: 33.3333%;
  }
  .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).dashboard .col.col-8, .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).dashboard .col.col-4, .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).dashboard .col.col-6,
  .css-before.dashboard .col.col-8,
  .css-before.dashboard .col.col-4,
  .css-before.dashboard .col.col-6 {
    width: 100%;
  }
  .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).dashboard .chart-group .chart-wrap .chart-content,
  .css-before.dashboard .chart-group .chart-wrap .chart-content {
    flex-direction: column;
  }
}
@media screen and (max-width: 992px) {
  .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).dashboard .col.col-2,
  .css-before.dashboard .col.col-2 {
    width: 50%;
  }
  .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).dashboard .col.col-8, .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).dashboard .col.col-4, .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).dashboard .col.col-6,
  .css-before.dashboard .col.col-8,
  .css-before.dashboard .col.col-4,
  .css-before.dashboard .col.col-6 {
    width: 100%;
  }
}
@media screen and (max-width: 768px) {
  .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered).dashboard .frame-center,
  .css-before.dashboard .frame-center {
    min-width: 620px !important;
  }
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .upload-name li,
.css-before .upload-name li {
  padding-left: 16px;
  background-image: url(../images/svg/paperslideToggle-solid.svg);
  background-size: 12px;
  background-repeat: no-repeat;
  background-position: left center;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .modal-imagesList,
.css-before .modal-imagesList {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .page-photoList,
.css-before .page-photoList {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .page-photo,
.css-before .page-photo {
  position: relative;
  width: 330px;
  display: inline-block;
  padding: 0;
  border-radius: 8px;
  border: 1px solid #ccc;
  overflow: hidden;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .page-photo:hover,
.css-before .page-photo:hover {
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.04);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .page-img,
.css-before .page-img {
  width: 100%;
  line-height: 200px;
  aspect-ratio: 16/9;
  text-align: center;
  color: white;
  background-color: #c4c4c4;
  margin: 0 auto;
  overflow: hidden;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .page-photo.on .page-img,
.css-before .page-photo.on .page-img {
  background-color: black;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  cursor: pointer;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .page-img video,
.css-before .page-img video {
  width: 100%;
  height: 100%;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .page-img img,
.css-before .page-img img {
  height: 100%;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .page-file,
.css-before .page-file {
  width: 100%;
  padding: 20px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .page-file:hover,
.css-before .page-file:hover {
  cursor: pointer;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .page-file > .label,
.css-before .page-file > .label {
  display: block;
  line-height: normal;
  padding: 2px 0;
  text-align: center;
  overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .btn-photo-delete,
.css-before .btn-photo-delete {
  position: absolute;
  color: white;
  text-align: center;
  font-size: 0px;
  width: 28px;
  height: 28px;
  border-radius: 50rem;
  top: 10px;
  right: 10px;
  background-color: #000;
  cursor: pointer;
  display: inline-block;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .btn-photo-delete::before,
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .btn-photo-delete::after,
.css-before .btn-photo-delete::before,
.css-before .btn-photo-delete::after {
  display: inline-block;
  width: 16px;
  height: 2px;
  background-color: #fff;
  content: "";
  top: 13px;
  left: 6px;
  position: absolute;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .btn-photo-delete::after,
.css-before .btn-photo-delete::after {
  transform: rotate(45deg);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .btn-photo-delete::before,
.css-before .btn-photo-delete::before {
  transform: rotate(135deg);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .page-photo.on .btn-photo-delete,
.css-before .page-photo.on .btn-photo-delete {
  display: inline-block;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .btn-photo-download,
.css-before .btn-photo-download {
  position: absolute;
  top: 140px;
  right: 10px;
  cursor: pointer;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .add-area,
.css-before .add-area {
  position: relative;
  min-width: 346px;
  height: 290px;
  display: inline-block;
  padding: 0;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .page-photo-add,
.css-before .page-photo-add {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  border: 2px dashed #c4c4c4;
  background: #f9f9f9;
  border-radius: 8px;
  cursor: pointer;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .page-photo-add:hover,
.css-before .page-photo-add:hover {
  background: #f4f4f4;
  border-color: #b7b7b7;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .btn-add-photo,
.css-before .btn-add-photo {
  display: none;
  position: absolute;
  width: 150px;
  height: 150px;
  top: calc(50% - 75px);
  left: calc(50% - 75px);
  border-radius: 50%;
  color: rgb(100, 100, 100);
  background-color: #919191;
  line-height: 132px;
  font-size: 160px;
  font-weight: 900;
  cursor: pointer;
  text-align: center;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .btn-add-photo::after,
.css-before .btn-add-photo::after {
  content: "+";
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .add-title,
.css-before .add-title {
  width: 100%;
  text-align: center;
  font-size: 20px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .page-photo-add.on .btn-add-photo,
.css-before .page-photo-add.on .btn-add-photo {
  color: white;
  background-color: #2A3A61;
  cursor: pointer;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .page-photo-add.on .btn-add-photo:hover,
.css-before .page-photo-add.on .btn-add-photo:hover {
  background-color: rgb(202, 82, 82);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .popup .tbl th,
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .popup .tbl td,
.css-before .popup .tbl th,
.css-before .popup .tbl td {
  height: 47px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .underPage,
.css-before .underPage {
  height: 100%;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .underPage img,
.css-before .underPage img {
  width: 130px;
  vertical-align: middle;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .underPage h4,
.css-before .underPage h4 {
  font-size: 48px;
  font-weight: 500;
  letter-spacing: -1px;
  margin: 24px 0 32px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .underPage .copyright,
.css-before .underPage .copyright {
  padding: 30px 0;
  color: #999;
  text-align: center;
  font-size: 13px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .underPage .text,
.css-before .underPage .text {
  font-size: 14px;
  color: #666;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .underPage .query,
.css-before .underPage .query {
  font-size: 16px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .underPage .query a[href^="mailto:"],
.css-before .underPage .query a[href^="mailto:"] {
  color: inherit;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .underPage .errorNotice,
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .underPage .notFound,
.css-before .underPage .errorNotice,
.css-before .underPage .notFound {
  text-align: center;
  padding: 40px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .notFound-img img,
.css-before .notFound-img img {
  opacity: 0.75;
  filter: grayscale(0.2);
  width: 80px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .notFound-img .txt,
.css-before .notFound-img .txt {
  font-size: 56px;
  font-weight: 500;
  color: #adbabd;
  line-height: 1;
  margin-left: 8px;
  vertical-align: middle;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .notFound-img .txt::after,
.css-before .notFound-img .txt::after {
  content: ":(";
  display: inline-block;
  margin-left: 5px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .errorNotice-img img:nth-child(1),
.css-before .errorNotice-img img:nth-child(1) {
  margin: -40px -9px 0 0;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .errorNotice-img img:nth-child(2),
.css-before .errorNotice-img img:nth-child(2) {
  filter: grayscale(0.6);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .errorNotice-img img:nth-child(3),
.css-before .errorNotice-img img:nth-child(3) {
  margin: -40px 0 0 -9px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .errorNotice-img .gear,
.css-before .errorNotice-img .gear {
  width: 80px;
  -webkit-animation: 1.8s gear-rotate linear infinite;
  -moz-animation: 1.8s gear-rotate linear infinite;
  animation: 1.8s gear-rotate linear infinite;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .errorNotice-img .gear-reverse,
.css-before .errorNotice-img .gear-reverse {
  width: 70px;
  transform: rotate(30deg);
  -webkit-animation: 1.8s gear-rotate-reverse linear infinite;
  -moz-animation: 1.8s gear-rotate-reverse linear infinite;
  animation: 1.8s gear-rotate-reverse linear infinite;
}
@-webkit-keyframes gear-rotate {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(-180deg);
  }
}
@-moz-keyframes gear-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-180deg);
  }
}
@keyframes gear-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-180deg);
  }
}
@-webkit-keyframes gear-rotate-reverse {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
  }
}
@-moz-keyframes gear-rotate-reverse {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
  }
}
@keyframes gear-rotate-reverse {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
  }
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .root_directory,
.css-before .root_directory {
  width: 240px;
  background: #fff;
  overflow-y: auto;
  padding: 20px;
  border-right: 3px solid #ebeff0;
  /*디렉토리 오픈일때*/
  /*디렉토리 마지막 or 하위폴더가 없을때*/
  /*디렉토리 선택시 색상표시*/
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .root_directory li,
.css-before .root_directory li {
  position: relative;
  cursor: pointer;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .root_directory li > div,
.css-before .root_directory li > div {
  padding: 6px 0;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .root_directory li > div:hover,
.css-before .root_directory li > div:hover {
  background-color: #f9f9f9;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .root_directory li .dep02 li > div,
.css-before .root_directory li .dep02 li > div {
  padding-left: 12px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .root_directory li .dep03 li > div,
.css-before .root_directory li .dep03 li > div {
  padding-left: 24px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .root_directory li .arrow,
.css-before .root_directory li .arrow {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url(../images/svg/dropdown_929292.svg);
  background-repeat: no-repeat;
  background-size: 10px;
  background-position: center;
  transform: rotate(270deg);
  margin-top: 4px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .root_directory li a,
.css-before .root_directory li a {
  padding-left: 20px;
  position: relative;
  background-image: url(../images/ico/folder.png);
  background-repeat: no-repeat; /*background-position: center left;*/
  background-position: top 7px left;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .root_directory li .dir_title,
.css-before .root_directory li .dir_title {
  font-size: 14px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .root_directory .open,
.css-before .root_directory .open {
  /*최상위 디렉토리 오픈시 하위구간 표시*/
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .root_directory .open .arrow,
.css-before .root_directory .open .arrow {
  transform: rotate(0deg);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .root_directory .open a,
.css-before .root_directory .open a {
  background-image: url(../images/ico/folder-open.png) !important;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .root_directory .open + ul a,
.css-before .root_directory .open + ul a {
  background-image: url(../images/ico/folder--child.png);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .root_directory .leaf .arrow,
.css-before .root_directory .leaf .arrow {
  transform: rotate(45deg);
  /* background-image: none; */
  background-position: center left 3px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .root_directory .leaf a,
.css-before .root_directory .leaf a {
  background-image: url(../images/ico/folder--child.png) !important;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .root_directory .leaf.open a,
.css-before .root_directory .leaf.open a {
  background-image: url(../images/ico/folder--selected.png) !important;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .root_directory .--selected a,
.css-before .root_directory .--selected a {
  background-image: url(../images/ico/folder--selected.png) !important;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .root_directory .--selected.open a,
.css-before .root_directory .--selected.open a {
  background-image: url(../images/ico/folder-open--selected.png) !important;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .--selected,
.css-before .--selected {
  background-color: rgba(45, 189, 182, 0.08);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .--selected .dir_title, .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .--selected .dir_count span:first-child, .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .--selected .dir_date span,
.css-before .--selected .dir_title,
.css-before .--selected .dir_count span:first-child,
.css-before .--selected .dir_date span {
  color: #2A3A61;
  font-weight: 500;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .directory-wrap,
.css-before .directory-wrap {
  display: flex;
  justify-content: space-between;
  flex: 1;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .directory-wrap .dir_count span:last-child,
.css-before .directory-wrap .dir_count span:last-child {
  color: #888;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .directory-wrap .dir_count span:last-child::before,
.css-before .directory-wrap .dir_count span:last-child::before {
  content: "/";
  display: inline-block;
  margin: 0 2px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .dir_date span,
.css-before .dir_date span {
  display: block;
  margin-top: -2px;
  font-size: 12px;
  color: #888;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .dir_date span::before,
.css-before .dir_date span::before {
  content: "(";
  display: inline-block;
  margin: 0 2px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .dir_date span::after,
.css-before .dir_date span::after {
  content: ")";
  display: inline-block;
  margin: 0 2px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .highcharts-figure,
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .highcharts-container,
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .highcharts-root,
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .highcharts-data-table table,
.css-before .highcharts-figure,
.css-before .highcharts-container,
.css-before .highcharts-root,
.css-before .highcharts-data-table table {
  width: 100% !important;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .highcharts-exporting-group,
.css-before .highcharts-exporting-group {
  display: none;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .highcharts-legend-item text,
.css-before .highcharts-legend-item text {
  font-weight: normal !important;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .highcharts-title, .css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .highcharts-subtitle,
.css-before .highcharts-title,
.css-before .highcharts-subtitle {
  display: none;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .highcharts-data-table table,
.css-before .highcharts-data-table table {
  font-family: Verdana, sans-serif;
  border-collapse: collapse;
  border: 1px solid #ebebeb;
  margin: 10px auto;
  text-align: center;
  width: 100%;
  max-width: 500px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .highcharts-data-table caption,
.css-before .highcharts-data-table caption {
  padding: 1em 0;
  font-size: 1.2em;
  color: #555;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .highcharts-data-table th,
.css-before .highcharts-data-table th {
  font-weight: 600;
  padding: 0.5em;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .highcharts-data-table td,
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .highcharts-data-table th,
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .highcharts-data-table caption,
.css-before .highcharts-data-table td,
.css-before .highcharts-data-table th,
.css-before .highcharts-data-table caption {
  padding: 0.5em;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .highcharts-data-table thead tr,
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .highcharts-data-table tr:nth-child(even),
.css-before .highcharts-data-table thead tr,
.css-before .highcharts-data-table tr:nth-child(even) {
  background: #f8f8f8;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .highcharts-data-table tr:hover,
.css-before .highcharts-data-table tr:hover {
  background: #f1f7ff;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .swiper,
.css-before .swiper {
  width: 100%;
  height: 100%;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .swiper-slide,
.css-before .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .swiper-slide img,
.css-before .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: pointer;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .campaingn_regist .styled_mapWrap .tool-subfilter,
.css-before .campaingn_regist .styled_mapWrap .tool-subfilter {
  position: relative;
  clear: both;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .map_header .tool-subfilter .btn,
.css-before .map_header .tool-subfilter .btn {
  padding: 6px 15px;
  height: auto;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .vfm--inset,
.css-before .vfm--inset {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .vfm--fixed,
.css-before .vfm--fixed {
  position: fixed;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .vfm--overlay,
.css-before .vfm--overlay {
  background-color: rgba(0, 0, 0, 0.5);
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .vfm--absolute,
.css-before .vfm--absolute {
  position: absolute;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .vfm__container,
.css-before .vfm__container {
  display: flex;
  justify-content: center;
  /* align-items: center; */
  align-items: inherit !important;
  padding: 50px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .vfm__content,
.css-before .vfm__content {
  display: flex;
  align-items: center;
  height: inherit !important;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .sortable td,
.css-before .sortable td {
  position: relative;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .sortable-ico,
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .sortable-ico::before,
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .sortable-ico::after,
.css-before .sortable-ico,
.css-before .sortable-ico::before,
.css-before .sortable-ico::after {
  display: inline-block;
  width: 12px;
  height: 1px;
  background-color: #666;
  content: "";
  position: relative;
  top: -5px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .sortable-ico::before,
.css-before .sortable-ico::before {
  position: absolute;
  left: 0px;
  top: -4px;
}
.css-before ~ :is(.vfm, .modal-baro, #teleport-popup, .covered) .sortable-ico::after,
.css-before .sortable-ico::after {
  position: absolute;
  left: 0px;
  top: 4px;
}

/*-------------------------------------------------------------------
  ## datepicker calendar
-------------------------------------------------------------------*/
.ui-datepicker {
  border: 0;
  padding: 10px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
  font-family: "NotoSans", sans-serif;
}

.ui-widget {
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.15);
}

.ui-widget.ui-widget-content {
  border: 1px solid rgba(0, 0, 0, 0.15);
}

/*년월부분*/
.ui-datepicker .ui-widget-header {
  background-color: #fff;
  border: 0;
}

/*달력 이전&다음 버튼*/
.ui-datepicker .ui-widget-header .ui-icon {
  background-image: url("../images/ico/ico_material-keyboard-arrow-down-01.png");
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}

.ui-datepicker .ui-datepicker-prev span {
  transform: rotate(90deg);
}

.ui-datepicker .ui-datepicker-next span {
  transform: rotate(270deg);
}

.ui-datepicker .ui-state-hover {
  background-color: transparent;
  border: 0;
}

.ui-datepicker .ui-datepicker-prev-hover {
  left: 2px;
  top: 2px;
  background-color: #eee;
}

.ui-datepicker .ui-datepicker-next-hover {
  right: 2px;
  top: 2px;
  background-color: #eee;
}

/*셀렉트박스 년.월*/
.ui-datepicker .ui-datepicker .ui-datepicker-title {
  font-weight: 700;
}

.ui-datepicker .ui-datepicker-title select {
  font-size: 15px;
  font-weight: 700;
  margin: 1px 0;
  text-align: center;
  padding: 0;
  /*background-image: url('../images/ico/ico_material-keyboard-arrow-down-01.png'); background-repeat: no-repeat; background-position: right 5px center;*/
  cursor: pointer;
}

.ui-datepicker .ui-datepicker-title select option {
  font-size: 13px;
  color: #000;
}

.ui-datepicker select.ui-datepicker-year {
  width: 50px;
}

.ui-datepicker select.ui-datepicker-month {
  width: 30px;
}

.ui-datepicker select.ui-datepicker-year:hover,
.ui-datepicker select.ui-datepicker-month:hover {
  color: #2A3A61;
}

/*요일,날짜 table*/
.ui-datepicker table {
  font-size: 13px;
  margin-top: 10px;
}

.ui-datepicker th, .ui-datepicker td {
  padding: 0;
}

.ui-datepicker td {
  border: 1px solid #e9e9e9;
}

.ui-datepicker th span {
  color: #545454;
}

/*day*/
.ui-datepicker .ui-state-disabled {
  background-color: #eee;
}

.ui-datepicker .ui-state-default {
  text-align: center;
  background-color: #fff;
  color: #454545;
  border: 0;
  font-weight: 500;
  padding: 1px 0;
}

.ui-datepicker .ui-state-default:hover {
  background-color: #eee;
}

.ui-datepicker .ui-state-active {
  border: 0;
}

.ui-datepicker .ui-state-highlight {
  background-color: transparent;
  color: #2A3A61;
}

.ui-datepicker .ui-state-active {
  background-color: #007fff;
  color: #fff;
}/*# sourceMappingURL=style.css.map */