/******************************************
# File: base.css
# Author: 오청열
# Date: 2023-05-11
# Description: :기초 css 정의
*********************************************/



/*메인폰트*/
@font-face {
  font-family: "SCDream";
  font-weight: 100;
  font-style: normal;
  src: url("../fonts/SCDream1.otf") format("opentype");
}
@font-face {
  font-family: "SCDream";
  font-weight: 200;
  font-style: normal;
  src: url("../fonts/SCDream2.otf") format("opentype");
}
@font-face {
  font-family: "SCDream";
  font-weight: 300;
  font-style: normal;
  src: url("../fonts/SCDream3.otf") format("opentype");
}
@font-face {
  font-family: "SCDream";
  font-weight: 400;
  font-style: normal;
  src: url("../fonts/SCDream4.otf") format("opentype");
}
@font-face {
  font-family: "SCDream";
  font-weight: 500;
  font-style: normal;
  src: url("../fonts/SCDream5.otf") format("opentype");
}
@font-face {
  font-family: "SCDream";
  font-weight: 600;
  font-style: normal;
  src: url("../fonts/SCDream6.otf") format("opentype");
}
@font-face {
  font-family: "SCDream";
  font-weight: 700;
  font-style: normal;
  src: url("../fonts/SCDream7.otf") format("opentype");
}
@font-face {
  font-family: "SCDream";
  font-weight: 800;
  font-style: normal;
  src: url("../fonts/SCDream8.otf") format("opentype");
}
@font-face {
  font-family: "SCDream";
  font-weight: 900;
  font-style: normal;
  src: url("../fonts/SCDream9.otf") format("opentype");
}


/*서브1폰트*/
@font-face {
  font-family: "Gmarket";
  font-weight: 100;
  font-style: normal;
  src: url("../fonts/GmarketSansLight.otf") format("opentype");
}
@font-face {
  font-family: "Gmarket";
  font-weight: 400;
  font-style: normal;
  src: url("../fonts/GmarketSansMedium.otf") format("opentype");
}
@font-face {
  font-family: "Gmarket";
  font-weight: 900;
  font-style: normal;
  src: url("../fonts/GmarketSansBold.otf") format("opentype");
}



*, *::before, *::after {
  box-sizing: border-box;
  letter-spacing: -0.5px;
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}


body {
  overflow: hidden scroll;
  -webkit-text-size-adjust: none;
    /*아이폰 가로모드로 했을때 글자가 커지는걸 방지*/
  margin: 0;
  font-family: var(--body-font-family);
  font-size: var(--body-font-size);
  font-weight: var(--body-font-weight);
  line-height: var(--body-line-height);
  color: var(--body-color);
  text-align: var(--body-text-align);
  background-color: var(--body-bg);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}


hr {
  margin: 1rem 0;
  color: inherit;
  border: 0;
  border-top: var(--border-width) solid;
  opacity: 0.25;
}

h6, h5, h4, h3, h2, h1 {
  margin-top: 0;
  margin-bottom: 0rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--Fmain-color, inherit);
}


a {
  color: var(--link-color);
  text-decoration: none;
  font-weight: normal;
  display: inline-block;

}


a:not([href]):not([class]), a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}

img {
  /*width: 100%;*/
  width: auto;
  display: inline-block;
}
table caption{font-size: 0; position: absolute; top:-999999999px; line-height: 0; border:0; height: 0; }
table,th,td{line-height: 1.5!important;}
/**************************
form 정의
***************************/

input[type=text]{ height: 50px; border-radius: 10px; font-size: var(--body-font-size); border:1px solid var(--outline-color); padding: 0 20px; background-color: #fff !important; }
input[type=tel]{ height: 50px; border-radius: 10px; font-size: var(--body-font-size); border:1px solid var(--outline-color); padding: 0 20px; width: 100%;}
input[type=email]{ height: 50px; border-radius: 10px; font-size: var(--body-font-size); border:1px solid var(--outline-color); padding: 0 20px; width: 100%;}

select{  height: 50px; border-radius: 10px; font-size: var(--body-font-size); border:1px solid var(--outline-color); padding: 0 50px 0 20px;
background: url(./../images/select-arrow.png)no-repeat right #fff; cursor: pointer;}

select.on {background: url(./../images/select-arrow-on.png)no-repeat right 12px center; }
/* input[type=text].datepicker{ height: 50px; border-radius: 10px; font-size: var(--body-font-size); border:1px solid var(--outline-color); padding: 0 50px 0 20px;  background-color: #fff; background-size: 25px; background-position:right 10px center; } */


textarea{ border:1px solid var(--outline-color); border-radius: 10px; padding:20px}
input[readonly],text-area[readonly]{  background-color: #f9f9f9; color:#555}


/*컬러*/
.red{color:var(--red)}
.blue{color:var(--main-color);}
.skyblue{color:#00f0ff}
.green{color:var(--green);}


.text-overflow{text-overflow: ellipsis;}

/*제이쿼리 ui 캘린더*/
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active {
  border: 0!important;
  text-align: center;
  background: #f6f6f6;
  font-weight: normal;
  border-radius: 100%;
  color: #454545;
  width: 34px;
  height: 34px;
  font-size: 12px;
  line-height: 29px;
}



.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight {
  border: 0!important;
  background: #dbdbdb!important;
  color: #000!important;
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover {
  border: 0!important;
  background: var(--main-color)!important;
  font-weight: normal;
  color: #fff!important;
}


.ui-menu .ui-menu-item  { position: relative; padding: 10px!important; border-bottom:1px solid #eee}

.ui-state-focus, .ui-state-active {background-color: #085de7!important; color:#fff!important}

.ui-widget-content button{
  background-color: #fff!important; font-size: 12px!important;
}

.hidden, .hide{
  position: absolute;
  width: 0;
  height: 0;
  padding: 0;
  margin: -1px;
  border:0;
  overflow: hidden;
  clip:rect(0,0,0,0);
  font-size: 0;
}



/****************************
laout display 정의
******************************/



.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-block {
  display: block !important;
}

.d-grid {
  display: grid !important;
}

.d-inline-grid {
  display: inline-grid !important;
}

.d-table {
  display: table !important;
}

.d-table-row {
  display: table-row !important;
}

.d-table-cell {
  display: table-cell !important;
}

.d-flex {
  display: flex !important;
}

.d-inline-flex {
  display: inline-flex !important;
}

.d-none {
  display: none !important;
}


/******************************
box shadow 정의
****************************/


.shadow {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

.shadow-sm {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important;
}

.shadow-lg {
  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important;
}

.shadow-none {
  box-shadow: none !important;
}

/********************************************
position 정의
**********************************************/

.position-static {
  position: static !important;
}

.position-relative {
  position: relative !important;
}

.position-absolute {
  position: absolute !important;
}

.position-fixed {
  position: fixed !important;
}

.position-sticky {
  position: -webkit-sticky !important;
  position: sticky !important;
}

/*********************************
 translate 정의
 *********************************/
.translate-middle {
  transform: translate(-50%, -50%) !important;
}

.translate-middle-x {
  transform: translateX(-50%) !important;
}

.translate-middle-y {
  transform: translateY(-50%) !important;
}



/**********************************
border 정의
**********************************/

.border {
  border: var(--border-width) var(--border-style) var(--border-color) !important;
}

.border-0 {
  border: 0 !important;
}

.border-top {
  border-top: var(--border-width) var(--border-style) var(--border-color) !important;
}

.border-top-0 {
  border-top: 0 !important;
}

.border-end {
  border-right: var(--border-width) var(--border-style) var(--border-color) !important;
}

.border-end-0 {
  border-right: 0 !important;
}

.border-bottom {
  border-bottom: var(--border-width) var(--border-style) var(--border-color) !important;
}

.border-bottom-0 {
  border-bottom: 0 !important;
}

.border-start {
  border-left: var(--border-width) var(--border-style) var(--border-color) !important;
}

.border-start-0 {
  border-left: 0 !important;
}


.border-1 {
  border-width: 1px !important;
}

.border-2 {
  border-width: 2px !important;
}

.border-3 {
  border-width: 3px !important;
}

.border-4 {
  border-width: 4px !important;
}

.border-5 {
  border-width: 5px !important;
}

/******************************************
width, height 정의
*****************************************/

.w-25 {
  width: 25% !important;
}

.w-50 {
  width: 50% !important;
}

.w-75 {
  width: 75% !important;
}

.w-100 {
  width: 100% !important;
}

.w-auto {
  width: auto !important;
}

.mw-100 {
  max-width: 100% !important;
}

.vw-100 {
  width: 100vw !important;
}

.min-vw-100 {
  min-width: 100vw !important;
}

.h-25 {
  height: 25% !important;
}

.h-50 {
  height: 50% !important;
}

.h-75 {
  height: 75% !important;
}

.h-100 {
  height: 100% !important;
}

.h-auto {
  height: auto !important;
}

.mh-100 {
  max-height: 100% !important;
}

.vh-100 {
  height: 100vh !important;
}

.min-vh-100 {
  min-height: 100vh !important;
}

/***************************************
flex css 정의
****************************************/
.flex-fill {
  flex: 1 1 auto !important;
}

.flex-row {
  flex-direction: row !important;
}

.flex-column {
  flex-direction: column !important;
}

.flex-row-reverse {
  flex-direction: row-reverse !important;
}

.flex-column-reverse {
  flex-direction: column-reverse !important;
}

.flex-grow-0 {
  flex-grow: 0 !important;
}

.flex-grow-1 {
  flex-grow: 1 !important;
}

.flex-shrink-0 {
  flex-shrink: 0 !important;
}

.flex-shrink-1 {
  flex-shrink: 1 !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-nowrap {
  flex-wrap: nowrap !important;
}

.flex-wrap-reverse {
  flex-wrap: wrap-reverse !important;
}

.justify-content-start {
  justify-content: flex-start !important;
}

.justify-content-end {
  justify-content: flex-end !important;
}

.justify-content-center {
  justify-content: center !important;
}

.justify-content-between {
  justify-content: space-between !important;
}

.justify-content-around {
  justify-content: space-around !important;
}

.justify-content-evenly {
  justify-content: space-evenly !important;
}

.align-items-start {
  align-items: flex-start !important;
}

.align-items-end {
  align-items: flex-end !important;
}

.align-items-center {
  align-items: center !important;
}

.align-items-baseline {
  align-items: baseline !important;
}

.align-items-stretch {
  align-items: stretch !important;
}

.align-content-start {
  align-content: flex-start !important;
}

.align-content-end {
  align-content: flex-end !important;
}

.align-content-center {
  align-content: center !important;
}

.align-content-between {
  align-content: space-between !important;
}

.align-content-around {
  align-content: space-around !important;
}

.align-content-stretch {
  align-content: stretch !important;
}

.align-self-auto {
  align-self: auto !important;
}

.align-self-start {
  align-self: flex-start !important;
}

.align-self-end {
  align-self: flex-end !important;
}

.align-self-center {
  align-self: center !important;
}

.align-self-baseline {
  align-self: baseline !important;
}

.align-self-stretch {
  align-self: stretch !important;
}

.order-first {
  order: -1 !important;
}

.order-0 {
  order: 0 !important;
}

.order-1 {
  order: 1 !important;
}

.order-2 {
  order: 2 !important;
}

.order-3 {
  order: 3 !important;
}

.order-4 {
  order: 4 !important;
}

.order-5 {
  order: 5 !important;
}

.order-last {
  order: 6 !important;
}


.gap-0 {
  gap: 0 !important;
}

.gap-1 {
  gap: 0.25rem !important;
}

.gap-2 {
  gap: 0.5rem !important;
}

.gap-3 {
  gap: 1rem !important;
}

.gap-4 {
  gap: 1.5rem !important;
}

.gap-5 {
  gap: 3rem !important;
}

.row-gap-0 {
  row-gap: 0 !important;
}

.row-gap-1 {
  row-gap: 0.25rem !important;
}

.row-gap-2 {
  row-gap: 0.5rem !important;
}

.row-gap-3 {
  row-gap: 1rem !important;
}

.row-gap-4 {
  row-gap: 1.5rem !important;
}

.row-gap-5 {
  row-gap: 3rem !important;
}

.column-gap-0 {
  -moz-column-gap: 0 !important;
  column-gap: 0 !important;
}

.column-gap-1 {
  -moz-column-gap: 0.25rem !important;
  column-gap: 0.25rem !important;
}

.column-gap-2 {
  -moz-column-gap: 0.5rem !important;
  column-gap: 0.5rem !important;
}

.column-gap-3 {
  -moz-column-gap: 1rem !important;
  column-gap: 1rem !important;
}

.column-gap-4 {
  -moz-column-gap: 1.5rem !important;
  column-gap: 1.5rem !important;
}

.column-gap-5 {
  -moz-column-gap: 3rem !important;
  column-gap: 3rem !important;
}

/******************************************
float 정의
*****************************************/
.float-start {
  float: left !important;
}

.float-end {
  float: right !important;
}

.float-none {
  float: none !important;
}


/********************************************
opacity 정의
******************************************/

.opacity-0 {
  opacity: 0 !important;
}

.opacity-25 {
  opacity: 0.25 !important;
}

.opacity-50 {
  opacity: 0.5 !important;
}

.opacity-75 {
  opacity: 0.75 !important;
}

.opacity-100 {
  opacity: 1 !important;
}

/********************************************
overflow 정의
*****************************************/

.overflow-auto {
  overflow: auto !important;
}

.overflow-hidden {
  overflow: hidden !important;
}

.overflow-visible {
  overflow: visible !important;
}

.overflow-scroll {
  overflow: scroll !important;
}

.overflow-x-auto {
  overflow-x: auto !important;
}

.overflow-x-hidden {
  overflow-x: hidden !important;
}

.overflow-x-visible {
  overflow-x: visible !important;
}

.overflow-x-scroll {
  overflow-x: scroll !important;
}

.overflow-y-auto {
  overflow-y: auto !important;
}

.overflow-y-hidden {
  overflow-y: hidden !important;
}

.overflow-y-visible {
  overflow-y: visible !important;
}

.overflow-y-scroll {
  overflow-y: scroll !important;
}

/***********************************
text, font 정의
************************************/

.fs-1 {
  font-size: calc(1.375rem + 1.5vw) !important;
}

.fs-2 {
  font-size: calc(1.325rem + 0.9vw) !important;
}

.fs-3 {
  font-size: calc(1.3rem + 0.6vw) !important;
}

.fs-4 {
  font-size: calc(1.275rem + 0.3vw) !important;
}

.fs-5 {
  font-size: 1.25rem !important;
}

.fs-6 {
  font-size: 1rem !important;
}

.fst-italic {
  font-style: italic !important;
}

.fst-normal {
  font-style: normal !important;
}

.fw-lighter {
  font-weight: lighter !important;
}

.fw-light {
  font-weight: 300 !important;
}

.fw-normal {
  font-weight: 400 !important;
}

.fw-medium {
  font-weight: 500 !important;
}

.fw-semibold {
  font-weight: 600 !important;
}

.fw-bold {
  font-weight: 700 !important;
}

.fw-bolder {
  font-weight: bolder !important;
}

.lh-1 {
  line-height: 1 !important;
}

.lh-sm {
  line-height: 1.25 !important;
}

.lh-base {
  line-height: 1.5 !important;
}

.lh-lg {
  line-height: 2 !important;
}

.text-start {
  text-align: left !important;
}

.text-end {
  text-align: right !important;
}

.text-center {
  text-align: center !important;
}

.text-decoration-none {
  text-decoration: none !important;
}

.text-decoration-underline {
  text-decoration: underline !important;
}

.text-decoration-line-through {
  text-decoration: line-through !important;
}

.text-lowercase {
  text-transform: lowercase !important;
}

.text-uppercase {
  text-transform: uppercase !important;
}

.text-capitalize {
  text-transform: capitalize !important;
}

.text-wrap {
  white-space: normal !important;
}

.text-nowrap {
  white-space: nowrap !important;
}

/***********************************
모달
***********************************/
.modal_pop {
  display: none;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  padding: 2.5rem 2.969vw;
  background-color: rgba(0, 0, 0, 0.5);
  box-sizing: border-box;
  z-index: 99999;

}


.modal_pop.on {
  display: block;
}
.modal_pop_inner {
  overflow-y: auto;
  border-radius: 0.4rem;
  border: 0;
  box-shadow: rgba(0, 0, 0, 0.1) 0.5rem 0.5rem 0.5rem;
  box-sizing: border-box;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) !important;
  padding:0;
  opacity: 0;
  visibility: hidden;

}

.modal_pop.on .modal_pop_inner {
    transform: none;
    opacity: 1;
    visibility: visible;
}

.modal_content{padding:2rem 0 ;}
.modal_width1200{width:1200px;}
.modal_width1000{width:1000px;}
.modal_width800{width:800px;}
.modal_width600{width:600px;}
.modal_alert{max-width:400px; width:100%}
.modal_alert .modal_content{text-align: center; display: flex; align-items: center; justify-content: center;}

.modal_footer{
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: calc(1rem - 0.5rem * .5);
    background-color: var(--body-bg);
    border-top: var(--border-color) solid var(--border-width);
    border-bottom-right-radius: var(--bs-modal-inner-border-radius);
    border-bottom-left-radius: var(--bs-modal-inner-border-radius);
    gap:4px;
}

.modal_footer > button{ width: 100px; height:40px; border-radius: 7px; border:1px solid #bab9b9; font-size: 15px; background-color: #ededed;}
.modal_top_close{float: right;}

#modal-title{
padding:25px 30px; position: relative; color: #fff;
font-size: 20px; font-weight: 500;
background:linear-gradient(to right, #135de2, #6b70db ) #ccc;
display: flex; align-items: center; justify-content: space-between;
}
#modal-title > button{width: 41px; height: 41px;background: url(../../images/ic/ic_modal_close.png)center no-repeat;cursor: pointer;}
.modal_content{background: #fff;padding:32px; word-break: keep-all;}
.modal_content .txt01{font-size: 14px; font-weight: 500; line-height: 24px;}

@media(max-width:1024px){
  .modal_pop .modal_pop_inner{width: 80%;}
}
/***********************************
탭
**********************************/

  /* 전체 ul 조정 */

  .notice_wrap{width: 40%; min-height: 290px;}
  .tab_list > ul{
      position:relative;
      margin:0;
      padding:0;
      list-style:none;
      border-bottom:1px solid #ccc;
      font-family:var(--body-font-family);
      font-size:12px;
      min-width: 500px;
  }

  /* 각 탭 메뉴 float 해제를 위한 가상요소 */
  .tab_list ul:after{
      content:"";
      display:block;
      clear:both;
  }

  /* 각 탭 메뉴 float속성과 border-bottom 의 선을 합치기 위한 마진 -1px */
  .tab_list li{
      float:left;
      margin-bottom:-1px;
  }

  /* 모든 a태그 스타일 지정 */
  .tab_list li a{
      position:relative;
      float:left;
      text-decoration:none;
      border:1px solid #eee;
      border-bottom-color:#ccc;
      background:#fafafa;
      color:#666
  }

  /* 각 탭 메뉴 제목에 대한 스타일 */
  .tab_list li a span{
      display:inline-block;
      padding:6px 25px;
      letter-spacing:-1px;
  }

  /* 각 탭 메뉴 안의 내용 부분의 전체 ul */
  .tab_list li ul{
      width:100%;
      position:absolute;
      top:30px;
      left:0;
      list-style:none;
      margin:0;
      padding:0;
      border: 1px solid #ccc;
      border-top: none;
      padding: 5px;
      box-sizing: border-box;
      min-height: 150px;
  }

  /* 각 내용 float 해제 및 위치값 조절 */
  .tab_list li li{
      float:none;
      position:relative;
      margin-bottom:8px;
      color:#999;
  }

  /* more앞의 요소의 마진값 조절 */
  .tab_list li li:nth-last-child(-n + 2){
      margin-bottom: 5px;
  }

  /* 각 내용 a태그 css */
  .tab_list li li a{
      float:none;
      padding:0;
      margin:0;
      border:0 !important;
      color:#666 !important;
      font-weight:normal;
      letter-spacing:normal;
  }

  /* 각 내용 a태그 스타일 css 조절 */
  .tab_list li li a:hover,
  .tab_list li li a:active,
  .tab_list li li a:focus{
      color:#000 !important;
      text-decoration:underline;
  }

  /* 작성일 우측 정렬 */
  .tab_list li li .time{
      position:absolute;
      top:0;
      right:0;
      color:#767676;
  }

  /* 더보기 정렬 */
  .tab_list li li.more{
      position:absolute;
      top:-20px;
      right:0;
  }

  /* 선택 된 탭 메뉴 박스 스타일 조정 */
  .tab_list li.active a{
      border:1px solid #ccc;
      border-bottom:1px solid #fff;
      margin-top:-1px;
      background:transparent;
      color:#333;
  }

  /* 선택 된 탭 메뉴 글자 스타일 조정 */
  .tab_list li.active a span{
      padding-top:7px;
      font-weight:bold;
  }


/*********************************
닫기
********************************/

.btn-close {
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: 0.25em 0.25em;
  color: #000;
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
  border: 0;
  border-radius: 0.375rem;
  opacity: 0.9;
  cursor: pointer;
}
.btn-close:hover {
  color: #000;
  text-decoration: none;
  opacity: 0.75;
}
.btn-close:focus {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  opacity: 1;
}
.btn-close:disabled, .btn-close.disabled {
  pointer-events: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  opacity: 0.25;
}

.btn-close-white {
  filter: invert(1) grayscale(100%) brightness(200%);
}



/*********************************
box sizing 정의
********************************/
.m0auto { margin: 0 auto;}
.mt0 { margin-top: 0 !important; }
.mt1 { margin-top: 1px !important; }
.mt2 { margin-top: 2px !important; }
.mt3 { margin-top: 3px !important; }
.mt4 { margin-top: 4px !important; }
.mt5 { margin-top: 5px !important; }
.mt6 { margin-top: 6px !important; }
.mt7 { margin-top: 7px !important; }
.mt8 { margin-top: 8px !important; }
.mt9 { margin-top: 9px !important; }
.mt10 { margin-top: 10px !important; }
.mt15 { margin-top: 15px !important; }
.mt20 { margin-top: 20px !important; }
.mt30 { margin-top: 30px !important; }
.mt40 { margin-top: 40px !important; }
.mt50 { margin-top: 50px !important; }
.mt60 { margin-top: 60px !important; }
.mt70 { margin-top: 70px !important; }
.mt80 { margin-top: 80px !important; }
.mt90 { margin-top: 90px !important; }
.mt100 { margin-top: 100px !important; }

.mr0 { margin-right: 0 !important; }
.mr1 { margin-right: 1px !important; }
.mr2 { margin-right: 2px !important; }
.mr3 { margin-right: 3px !important; }
.mr4 { margin-right: 4px !important; }
.mr5 { margin-right: 5px !important; }
.mr6 { margin-right: 6px !important; }
.mr7 { margin-right: 7px !important; }
.mr8 { margin-right: 8px !important; }
.mr9 { margin-right: 9px !important; }
.mr10 { margin-right: 10px !important; }
.mr20 { margin-right: 20px !important; }
.mr30 { margin-right: 30px !important; }
.mr40 { margin-right: 40px !important; }
.mr50 { margin-right: 50px !important; }
.mr60 { margin-right: 60px !important; }
.mr70 { margin-right: 70px !important; }
.mr80 { margin-right: 80px !important; }
.mr90 { margin-right: 90px !important; }
.mr100 { margin-right: 100px !important; }

.ml0 { margin-left: 0 !important; }
.ml1 { margin-left: 1px !important; }
.ml2 { margin-left: 2px !important; }
.ml3 { margin-left: 3px !important; }
.ml4 { margin-left: 4px !important; }
.ml5 { margin-left: 5px !important; }
.ml6 { margin-left: 6px !important; }
.ml7 { margin-left: 7px !important; }
.ml8 { margin-left: 8px !important; }
.ml9 { margin-left: 9px !important; }
.ml10 { margin-left: 10px !important; }
.ml20 { margin-left: 20px !important; }
.ml30 { margin-left: 30px !important; }
.ml40 { margin-left: 40px !important; }
.ml50 { margin-left: 50px !important; }
.ml60 { margin-left: 60px !important; }
.ml70 { margin-left: 70px !important; }
.ml80 { margin-left: 80px !important; }
.ml90 { margin-left: 90px !important; }
.ml100 { margin-left: 100px !important; }

.mb0 { margin-bottom: 0 !important; }
.mb1 { margin-bottom: 1px !important; }
.mb2 { margin-bottom: 2px !important; }
.mb3 { margin-bottom: 3px !important; }
.mb4 { margin-bottom: 4px !important; }
.mb5 { margin-bottom: 5px !important; }
.mb6 { margin-bottom: 6px !important; }
.mb7 { margin-bottom: 7px !important; }
.mb8 { margin-bottom: 8px !important; }
.mb9 { margin-bottom: 9px !important; }
.mb10 { margin-bottom: 10px !important; }
.mb20 { margin-bottom: 20px !important; }
.mb30 { margin-bottom: 30px !important; }
.mb40 { margin-bottom: 40px !important; }
.mb50 { margin-bottom: 50px !important; }
.mb60 { margin-bottom: 60px !important; }
.mb70 { margin-bottom: 70px !important; }
.mb80 { margin-bottom: 80px !important; }
.mb90 { margin-bottom: 90px !important; }
.mb100 { margin-bottom: 100px !important; }

.pt0 { padding-top: 0 !important; }
.pt1 { padding-top: 1px !important; }
.pt2 { padding-top: 2px !important; }
.pt3 { padding-top: 3px !important; }
.pt4 { padding-top: 4px !important; }
.pt5 { padding-top: 5px !important; }
.pt6 { padding-top: 6px !important; }
.pt7 { padding-top: 7px !important; }
.pt8 { padding-top: 8px !important; }
.pt9 { padding-top: 9px !important; }
.pt10 { padding-top: 10px !important; }
.pt20 { padding-top: 20px !important; }
.pt30 { padding-top: 30px !important; }
.pt40 { padding-top: 40px !important; }
.pt50 { padding-top: 50px !important; }
.pt60 { padding-top: 60px !important; }
.pt70 { padding-top: 70px !important; }
.pt80 { padding-top: 80px !important; }
.pt90 { padding-top: 90px !important; }
.pt100 { padding-top: 100px !important; }

.pl0 { padding-left: 0 !important; }
.pl1 { padding-left: 1px !important; }
.pl2 { padding-left: 2px !important; }
.pl3 { padding-left: 3px !important; }
.pl4 { padding-left: 4px !important; }
.pl5 { padding-left: 5px !important; }
.pl6 { padding-left: 6px !important; }
.pl7 { padding-left: 7px !important; }
.pl8 { padding-left: 8px !important; }
.pl9 { padding-left: 9px !important; }
.pl10 { padding-left: 10px !important; }
.pl20 { padding-left: 20px !important; }
.pl30 { padding-left: 30px !important; }
.pl40 { padding-left: 40px !important; }
.pl50 { padding-left: 50px !important; }
.pl60 { padding-left: 60px !important; }
.pl70 { padding-left: 70px !important; }
.pl80 { padding-left: 80px !important; }
.pl90 { padding-left: 90px !important; }
.pl100 { padding-left: 100px !important; }

.pr0 { padding-right: 0 !important; }
.pr1 { padding-right: 1px !important; }
.pr2 { padding-right: 2px !important; }
.pr3 { padding-right: 3px !important; }
.pr4 { padding-right: 4px !important; }
.pr5 { padding-right: 5px !important; }
.pr6 { padding-right: 6px !important; }
.pr7 { padding-right: 7px !important; }
.pr8 { padding-right: 8px !important; }
.pr9 { padding-right: 9px !important; }
.pr10 { padding-right: 10px !important; }
.pr20 { padding-right: 20px !important; }
.pr30 { padding-right: 30px !important; }
.pr40 { padding-right: 40px !important; }
.pr50 { padding-right: 50px !important; }
.pr60 { padding-right: 60px !important; }
.pr70 { padding-right: 70px !important; }
.pr80 { padding-right: 80px !important; }
.pr90 { padding-right: 90px !important; }
.pr100 { padding-right: 100px !important; }

.pb0 { padding-bottom: 0px !important; }
.pb1 { padding-bottom: 1px !important; }
.pb2 { padding-bottom: 2px !important; }
.pb3 { padding-bottom: 3px !important; }
.pb4 { padding-bottom: 4px !important; }
.pb5 { padding-bottom: 5px !important; }
.pb6 { padding-bottom: 6px !important; }
.pb7 { padding-bottom: 7px !important; }
.pb8 { padding-bottom: 8px !important; }
.pb9 { padding-bottom: 9px !important; }
.pb10 { padding-bottom: 10px !important; }
.pb20 { padding-bottom: 20px !important; }
.pb30 { padding-bottom: 30px !important; }
.pb40 { padding-bottom: 40px !important; }
.pb50 { padding-bottom: 50px !important; }
.pb60 { padding-bottom: 60px !important; }
.pb70 { padding-bottom: 70px !important; }
.pb80 { padding-bottom: 80px !important; }
.pb90 { padding-bottom: 90px !important; }
.pb100 { padding-bottom: 100px !important; }

.w10 { width: 10% !important; }
.w20 { width: 20% !important; }
.w30 { width: 30% !important; }
.w40 { width: 40% !important; }
.w45 { width: 45% !important; }
.w50 { width: 50% !important; }
.w60 { width: 60% !important; }
.w65 { width: 65% !important; }
.w70 { width: 70% !important; }
.w80 { width: 80% !important; }
.w90 { width: 90% !important; }
.w100 { width: 100% !important; }

.w1p { width: 1px !important; }
.w2p { width: 2px !important; }
.w3p { width: 3px !important; }
.w4p { width: 4px !important; }
.w5p { width: 5px !important; }
.w6p { width: 6px !important; }
.w7p { width: 7px !important; }
.w8p { width: 8px !important; }
.w9p { width: 9px !important; }
.w10p { width: 10px !important; }
.w20p { width: 20px !important; }
.w30p { width: 30px !important; }
.w40p { width: 40px !important; }
.w50p { width: 50px !important; }
.w60p { width: 60px !important; }
.w70p { width: 70px !important; }
.w80p { width: 80px !important; }
.w90p { width: 90px !important; }
.w100p { width: 100px !important; }
.w150p { width: 150px !important; }
.w200p { width: 200px !important; }
.w250p { width: 250px !important; }
.w300p { width: 300px !important; }
.w350p { width: 350px !important; }
.w400p { width: 400px !important; }
.w450p { width: 450px !important; }
.w500p { width: 500px !important; }
.w550p { width: 550px !important; }
.w600p { width: 600px !important; }
.w650p { width: 650px !important; }
.w700p { width: 700px !important; }
.w750p { width: 750px !important; }
.w800p { width: 800px !important; }
.w850p { width: 850px !important; }
.w900p { width: 900px !important; }
.w950p { width: 950px !important; }
.w1000p { width: 1000px !important; }

.h1p { height: 1px !important; }
.h2p { height: 2px !important; }
.h3p { height: 3px !important; }
.h4p { height: 4px !important; }
.h5p { height: 5px !important; }
.h6p { height: 6px !important; }
.h7p { height: 7px !important; }
.h8p { height: 8px !important; }
.h9p { height: 9px !important; }
.h10p { height: 10px !important; }
.h20p { height: 20px !important; }
.h30p { height: 30px !important; }
.h40p { height: 40px !important; }
.h50p { height: 50px !important; }
.h60p { height: 60px !important; }
.h70p { height: 70px !important; }
.h80p { height: 80px !important; }
.h90p { height: 90px !important; }
.h100p { height: 100px !important; }
.h150p { height: 150px !important; }
.h200p { height: 200px !important; }
.h250p { height: 250px !important; }
.h300p { height: 300px !important; }
.h350p { height: 350px !important; }
.h400p { height: 400px !important; }
.h450p { height: 450px !important; }
.h500p { height: 500px !important; }
.h550p { height: 550px !important; }
.h600p { height: 600px !important; }
.h650p { height: 650px !important; }
.h700p { height: 700px !important; }
.h750p { height: 750px !important; }
.h800p { height: 800px !important; }
.h850p { height: 850px !important; }
.h900p { height: 900px !important; }
.h950p { height: 950px !important; }
.h1000p { height: 1000px !important; }


/********************************
반응형 정의
데스크탑 : 1400px / 1024px
태블릿 : 768px
모바일 :576px / 320px
********************************/
@media(max-width:575.98px){

}
@media(min-width:576px){
  /*모바일사이즈*/
}
@media(max-width:768px){
  /*태블릿사이즈*/
    /*모바일사이즈*/
  .modal_content {
    background: #fff;
    padding: 18px;
}

  #modal-title {
    padding: 15px 20px;
    position: relative;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
  }

  #modal-title > button {
    width: 25px;
    height: 25px;
    background-size: 25px 25px;
}

}
@media(max-width:1024px){
  /*데스크탑사이즈*/
}
@media(max-width:1400px){
  /*데스크탑사이즈*/
}