@charset "UTF-8";
/*=============================
반응형 변수
==============================*/
/*=============================
변수값 선언
==============================*/
:root {
  --nuxt-devtools-safe-area-top: env(safe-area-inset-top, 0px);
  --nuxt-devtools-safe-area-right: env(safe-area-inset-right, 0px);
  --nuxt-devtools-safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --nuxt-devtools-safe-area-left: env(safe-area-inset-left, 0px);
  --byme-header-font: notokr-medium, sans-serif;
  --byme-main-font: notokr-regular, sans-serif;
  --byme-font-color: #5c6166;
  --byme-body-background-color: #ffffff;
  --byme-color-primary: #2962ff;
  --byme-color-second: #03278a;
  --byme-color-point: #506fe4;
  --byme-color-border: #e7edf5;
  --byme-color-datepicker: #438eff;
  --byme-post-header-title-font-size: 2.6em;
  --byme-view-title-font-size: 2em;
  --byme-title-font-size: 1.65em;
  --byme-sub-title-font-size: 1.45em;
  --byme-section-title-font-size: 1.35em;
  --byme-section-sub-title-font-size: 1.125em;
  --byme-x-large-font-size: 1.5em;
  --byme-large-font-size: 1.4em;
  --byme-medium-font-size: 1.15em;
  --byme-small-font-size: 0.875em;
  --byme-x-small-font-size: 0.75em;
  --byme-section-vertical-padding: 2rem;
  --byme-section-inner-vertical-padding: 1.5rem;
  --byme-outer-padding: 2rem;
  --byme-outer-deep-padding: 5rem;
  --byme-title-margin-bottom: 20px;
  --byme-sub-title-margin-bottom: 10px;
  --byme-section-title-margin-bottom: 15px;
  --byme-section-sub-title-margin-bottom: 10px;
}

@media (max-width: 1024px) {
  :root {
    --byme-outer-padding: 1.5rem;
    --byme-outer-deep-padding: 3.75rem;
  }
}
@media (max-width: 767px) {
  :root {
    --byme-post-header-title-font-size: 2rem;
    --byme-outer-padding: 1.6rem;
    --byme-outer-deep-padding: 4rem;
  }
}
@media (max-width: 479px) {
  :root {
    --byme-post-header-title-font-size: calc(2.6em * 0.6);
    --byme-view-title-font-size: calc(2em * 0.6);
    --byme-title-font-size: calc(1.7em * 0.7);
    --byme-sub-title-font-size: calc(1.45em * 0.9);
    --byme-section-title-font-size: calc(1.35em * 0.9);
    --byme-section-sub-title-font-size: calc(1.125em * 0.9);
    --byme-x-large-font-size: calc(1.5em * 0.8);
    --byme-large-font-size: calc(1.4em * 0.9);
    --byme-medium-font-size: calc(1.15em * 0.9);
    --byme-section-vertical-padding: calc(2rem * 0.8);
    --byme-section-inner-vertical-padding: calc(1.5rem * 0.8);
    --byme-outer-padding: calc(2em * 0.5);
    --byme-outer-deep-padding: calc(5em * 0.5);
  }
}
/*=============================
body
==============================*/
html {
  font-size: 62.5%;
}

body {
  font-family: var(--byme-main-font);
  color: var(--byme-font-color);
  font-size: 1.6rem;
  background-color: var(--byme-body-background-color);
  line-height: 1.5;
  letter-spacing: -0.025rem;
}

@media (max-width: 1024px) {
  body {
    font-size: 1.6rem;
  }
}
@media (max-width: 767px) {
  body {
    font-size: 1.5rem;
  }
}
@media (max-width: 479px) {
  body {
    font-size: 1.4rem;
  }
}
/*=============================
mobile 기기 대응
==============================*/
.safe-area-padding {
  padding-top: var(--nuxt-devtools-safe-area-top);
  padding-right: var(--nuxt-devtools-safe-area-right);
  padding-bottom: var(--nuxt-devtools-safe-area-bottom);
  padding-left: var(--nuxt-devtools-safe-area-left);
}

/*=============================
heading fonts setup
==============================*/
h1, h2, h3, h4, h5, h6 {
  color: #000;
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.75rem;
}

h4 {
  font-size: 1.5rem;
}

h5 {
  font-size: 1.25rem;
}

h6 {
  font-size: 1rem;
}

@media (max-width: 767px) {
  h1 {
    font-size: 2rem;
  }
  h2 {
    font-size: 1.75rem;
  }
  h3 {
    font-size: 1.5rem;
  }
  h4 {
    font-size: 1.25rem;
  }
  h5 {
    font-size: 1rem;
  }
  h6 {
    font-size: 0.875rem;
  }
}
/*=============================
폰트 클래스 
==============================*/
.main-font {
  font-family: "notokr-regular", sans-serif;
}

.number-font {
  font-family: "RobotoCondensedRegular", sans-serif;
}

.english-font {
  font-family: "OutfitRegular", sans-serif;
}

.font-color {
  color: #5c6166;
}

.primary-color {
  color: #2962ff;
}

.second-color {
  color: #03278a;
}

.point-color {
  color: #506fe4;
}

.black-color {
  color: #000000;
}

.white-color {
  color: #FFFFFF;
}

/*=============================
배경 클래스 
==============================*/
.bg-body {
  background: #ffffff;
}

.bg-primary {
  background: #2962ff;
}

.bg-second {
  background: #03278a;
}

.bg-point {
  background: #506fe4;
}

.bg-black {
  background: #000000;
}

.bg-white {
  background: #FFFFFF;
}

.bg-gray {
  background: #ececec;
}

.bg-ecru {
  background: #E8E8D6;
}

/*=============================
flex 정렬박스
==============================*/
.column-list-box {
  display: flex;
  flex-direction: column;
  padding: 0px;
  border-width: 0;
  border-color: transparent;
  overflow: hidden;
  margin: 0;
}

.row-list-box {
  display: flex;
  flex-direction: row;
  padding: 0px;
  border-width: 0;
  border-color: transparent;
  flex-wrap: wrap;
  width: 100%;
  overflow: hidden;
  margin: 0;
}

.row-list-line {
  display: flex;
  flex-direction: row;
  padding: 0px;
  border-width: 0;
  border-color: transparent;
  max-width: 100%;
  gap: 10px;
}

/*=============================
특수 영역
==============================*/
.ellipsis-line {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*=============================
박스 STYLE
==============================*/
/* 공통 */
input.input_width1, select.input_width1, .select-container.input_width1 {
  width: 2ch;
}
input.input_width2, select.input_width2, .select-container.input_width2 {
  width: 4ch;
}
input.input_width3, select.input_width3, .select-container.input_width3 {
  width: 6ch;
}
input.input_width4, select.input_width4, .select-container.input_width4 {
  width: 8ch;
}
input.input_width5, select.input_width5, .select-container.input_width5 {
  width: 10ch;
}
input.input_width6, select.input_width6, .select-container.input_width6 {
  width: 12ch;
}
input.input_width7, select.input_width7, .select-container.input_width7 {
  width: 14ch;
}
input.input_width8, select.input_width8, .select-container.input_width8 {
  width: 16ch;
}
input.input_width9, select.input_width9, .select-container.input_width9 {
  width: 18ch;
}
input.input_width10, select.input_width10, .select-container.input_width10 {
  width: 100px;
}
input.input_width20, select.input_width20, .select-container.input_width20 {
  width: 200px;
}
input.input_width30, select.input_width30, .select-container.input_width30 {
  width: 300px;
}
input.input_width40, select.input_width40, .select-container.input_width40 {
  width: 400px;
}
input.input_width50, select.input_width50, .select-container.input_width50 {
  width: 500px;
}
input.input_width60, select.input_width60, .select-container.input_width60 {
  width: 600px;
}
input.input_width70, select.input_width70, .select-container.input_width70 {
  width: 700px;
}
input.input_width80, select.input_width80, .select-container.input_width80 {
  width: 800px;
}
input.input_width90, select.input_width90, .select-container.input_width90 {
  width: 900px;
}
input.input_width100, select.input_width100, .select-container.input_width100 {
  width: 1000px;
}
input.input_width0, select.input_width0, .select-container.input_width0 {
  display: none;
}

form .form-title {
  display: block;
  margin-bottom: 5px;
}

input, select {
  padding: 3px 9px;
  border-width: 1px;
  border-style: solid;
  border-color: #dedede;
  vertical-align: middle;
  box-sizing: border-box;
  height: 27px;
  max-width: 100%;
  line-height: 1em;
  background: #fff;
}

select {
  margin: 0;
  margin-right: 5px;
}

input[type=text] {
  margin: 0px 5px 5px 0;
}

input[type=checkbox], input[type=radio] {
  width: 16px;
  height: 16px;
  margin-right: 3px;
}

input[type=file] {
  padding: 0;
  border: 0;
}

textarea {
  padding: 3px 9px;
  border-width: 1px;
  border-style: solid;
  border-color: #dedede;
  width: 900px;
  max-width: 100%;
  min-height: 200px;
  line-height: 1.5em;
  background: #fff;
}

input::-moz-placeholder, textarea::-moz-placeholder {
  color: #acacac;
  font-size: var(--byme-small-font-size);
}

input::placeholder, textarea::placeholder {
  color: #acacac;
  font-size: var(--byme-small-font-size);
}

.policy_box {
  padding: 20px;
  border-width: 1px;
  border-style: solid;
  border-color: #dedede;
  width: 100%;
  height: auto;
  font-size: 0.9em;
  line-height: 1.5em;
  text-align: left;
  border-radius: 0.25em;
  word-break: keep-all;
  white-space: normal;
}
.policy_box p {
  font-size: 1.2rem;
}

.policy_scrollbox {
  padding: 15px;
  border-width: 1px;
  border-style: solid;
  border-color: #dedede;
  width: 100%;
  height: 150px;
  font-size: 0.9em;
  line-height: 1.5em;
  text-align: left;
  overflow-y: scroll;
  border-radius: 0.25em;
}
.policy_scrollbox p {
  font-size: 1.2rem;
}
.policy_scrollbox::-webkit-scrollbar {
  width: 8px;
}
.policy_scrollbox::-webkit-scrollbar-thumb {
  background-color: #abb9d4;
  border-radius: 6px;
}
.policy_scrollbox::-webkit-scrollbar-track {
  background-color: #ebedfc;
}
.policy_scrollbox::-webkit-scrollbar-thumb:hover {
  background-color: #aaa;
}

.form-group {
  margin-top: 12px;
  margin-bottom: 12px;
  display: block;
}

input, select, textarea, button, .policy_box, .policy_scrollbox, .form-group a .form-group label {
  margin-bottom: 5px;
}

@media all and (max-width: 767px) {
  textarea {
    width: 100%;
  }
  input.tbl_width100, select.tbl_width100, .select-container.tbl_width100 {
    width: 100%;
  }
}
/* 기본 폼 - 유저페이지 */
.basic_form input, .basic_form select {
  box-sizing: border-box;
  width: 100%;
  height: 44px;
  background: none;
  background-color: #fff;
  border: 2px solid #e8ebed;
  border-radius: 5px;
  box-shadow: none;
  color: #999;
  font-size: var(--byme-small-font-size);
  padding: 6px 12px;
}
.basic_form .select-container {
  position: relative;
  display: inline-block;
  min-width: 100px;
  margin-right: 5px;
}
.basic_form .select-container select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  padding-right: 30px;
  width: 100%;
}
.basic_form .select-container:after {
  content: "\f107";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #aab6c5;
  transition: transform 0.3s ease;
  z-index: 1;
}
.basic_form input[type=checkbox], .basic_form input[type=radio] {
  width: 19px;
  height: 19px;
}
.basic_form textarea, .basic_form .policy_box, .basic_form .policy_scrollbox {
  border: 2px solid #e8ebed;
  background-color: transparent;
  border-radius: 5px;
}
.basic_form .form-group {
  margin-bottom: 22px;
  margin-top: 22px;
}
.basic_form .msg:empty {
  margin-bottom: 0px;
}
.basic_form .msg {
  margin-bottom: 5px;
}

/* 멤버 폼 - 회원전용 페이지, 회원가입, 로그인 등 */
.member_form {
  position: relative;
  margin-bottom: 30px;
}
.member_form input, .member_form select {
  padding: 0 20px;
  border-width: 0;
  border-style: solid;
  border-color: transparent;
  vertical-align: middle;
  box-sizing: border-box;
  width: 100%;
  height: 58px;
  border-radius: 10px;
  background: #F7F7F7;
  transition: all 0.2s linear;
}
.member_form select {
  font-weight: 400;
  position: relative;
  z-index: 1;
}
.member_form input[type=checkbox], .member_form input[type=radio] {
  width: 16px;
  height: 16px;
  margin-right: 3px;
  margin-top: 0;
}
.member_form input[type=file] {
  padding: 0;
  border: 0;
}
.member_form textarea, .member_form .policy_box, .member_form .policy_scrollbox {
  border-color: #ced4da;
  border-radius: 10px;
}
.member_form input, .member_form select, .member_form textarea, .member_form .policy_box, .member_form .policy_scrollbox, .member_form button, .member_form a {
  margin-bottom: 18px;
}
.member_form .form-group {
  margin-bottom: 22px;
  margin-top: 22px;
}
.member_form .msg:empty {
  margin-bottom: 0px;
}
.member_form .msg {
  margin: 0px 10px 25px;
  font-size: var(--byme-small-font-size);
  color: #0068bf;
}
.member_form button {
  height: 50px;
}

@media all and (max-width: 767px) {
  .member_form input, .member_form select {
    width: 100%;
  }
}
/* basic 검색폼 */
.search_form {
  position: relative;
}
.search_form .input-box-control {
  display: block;
  width: 100%;
  height: calc(2.25em + 2px);
  padding: 0.375em 0.75em;
  line-height: 1.5;
  border: 1px solid #f5f3b8;
  border-radius: 50px;
  padding: 10px 20px;
  margin-left: -1px;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.search_form .btn-submit {
  position: absolute;
  right: 0;
  top: 0;
  height: 38px;
  width: 38px;
  border-radius: 50px;
  border: 0;
  padding: 0;
  text-align: center;
  line-height: 38px;
  z-index: 5;
  cursor: pointer;
}

@media screen and (max-width: 767px) {
  .search_form {
    justify-content: center;
  }
  .search_form .input-group {
    width: 100%;
    max-width: 800px;
  }
}
/*=============================
형태
==============================*/
/* 원형 */
.circle-shape {
  border-radius: 100%;
}

/* 원형 */
.scround-shape {
  border-radius: 0.95em;
}

/*=============================
 체크박스,라디오 버튼 STYLE
==============================*/
label {
  position: relative;
  cursor: pointer;
}

/* 체크박스 */
label.basic-checkbox {
  padding-left: 25px;
  margin: 3px 25px 3px 0;
}
label.basic-checkbox > input[type=checkbox] {
  display: none;
}
label.basic-checkbox span:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 19px;
  height: 19px;
  border: 2px solid #e7edf5;
  background-color: transparent;
  transition: background-color 0.3s ease;
}
label.basic-checkbox input[type=checkbox]:checked ~ span:before {
  background: #e7edf5;
  border-width: 3px;
  border-color: #e7edf5;
}
label.basic-checkbox span:after {
  content: "";
  position: absolute;
  left: 7px;
  top: 0;
  width: 7px;
  height: 13px;
  transform: scale(0) rotate(45deg);
  border: solid #6d7480;
  border-width: 0 2px 2px 0;
  transition: transform 0.3s ease;
}
label.basic-checkbox input[type=checkbox]:checked ~ span:after {
  display: block;
  left: 7px;
  transform: scale(1) rotate(45deg);
}

/* 체크박스 - 스위치버튼 */
.switch-checkbox-container {
  width: 60px;
  text-align: center;
  padding: 0 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.switch-checkbox-container > input[type=checkbox] {
  display: none;
}
.switch-checkbox-container .switch_label {
  position: relative;
  cursor: pointer;
  display: inline-block;
  width: 50px;
  height: 19px;
  background: #fff;
  border: 2px solid #9fa2a8;
  border-radius: 20px;
  transition: 0.2s;
}
.switch-checkbox-container .switch_label:hover span {
  background: #2962ff;
}
.switch-checkbox-container .switch_label span {
  position: absolute;
  top: 1px;
  left: 3px;
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 14px;
  background: #9fa2a8;
  transition: 0.2s;
}
.switch-checkbox-container input[type=checkbox]:checked + .switch_label {
  background: #2962ff;
  border: 2px solid #2962ff;
}
.switch-checkbox-container input[type=checkbox]:checked + .switch_label:hover span {
  background: #9fa2a8;
}
.switch-checkbox-container input[type=checkbox]:checked + .switch_label span {
  left: 30px;
  background: #fff;
  box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.1254901961);
}

/* 이미지 체크박스 버튼 */
.image-checkbox {
  position: relative;
  display: inline-block;
}
.image-checkbox input[type=checkbox] {
  display: none;
}
.image-checkbox img {
  display: block;
  cursor: pointer;
  transition: all 0.3s ease;
  max-width: 100%;
  height: auto;
  border-radius: 50%;
  box-shadow: none;
}
.image-checkbox img:hover {
  box-shadow: 0 0 0 4px var(--byme-color-primary);
}
.image-checkbox input[type=checkbox]:checked + img {
  box-shadow: 0 0 0 4px var(--byme-color-second);
}

/* 라디오 버튼 */
label.basic-radio {
  padding-left: 25px;
  margin: 3px 25px 3px 0;
}
label.basic-radio > input[type=radio] {
  display: none;
}
label.basic-radio span:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 19px;
  height: 19px;
  border: 2px solid #e7edf5;
  border-radius: 50%;
  background-color: transparent;
  transition: background-color 0.3s ease;
}
label.basic-radio input[type=radio]:checked ~ span:before {
  background: #e7edf5;
  border-width: 3px;
  border-color: #e7edf5;
}
label.basic-radio span:after {
  content: "";
  position: absolute;
  left: 3px;
  top: 3px;
  transform: scale(0);
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background-color: #6d7480;
  transition: transform 0.3s ease;
}
label.basic-radio input[type=radio]:checked ~ span:after {
  transform: scale(1);
}

/* 이미지 라디오 버튼 */
.image-radio {
  position: relative;
  display: inline-block;
}
.image-radio input[type=radio] {
  display: none;
}
.image-radio img {
  display: block;
  cursor: pointer;
  transition: all 0.3s ease;
  max-width: 100%;
  height: auto;
  border-radius: 50%;
  box-shadow: none;
}
.image-radio img:hover {
  box-shadow: 0 0 0 4px var(--byme-color-primary);
}
.image-radio input[type=radio]:checked + img {
  box-shadow: 0 0 0 4px var(--byme-color-second);
}

/* all-check 버튼 */
label.all-checkbox {
  padding: 0 0 0 17px;
}
label.all-checkbox > input[type=checkbox] {
  display: none;
}
label.all-checkbox span:before {
  content: "";
  position: absolute;
  left: 1px;
  top: 3px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background-color: #e7edf5;
  transition: background-color 0.3s ease;
}
label.all-checkbox input[type=checkbox]:checked ~ span:before {
  background: #6d7480;
}
label.all-checkbox span:after {
  content: "\f00c";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 3px;
  top: 0;
  color: #aab6c5;
  transition: transform 0.3s ease;
}
label.all-checkbox input[type=checkbox]:checked ~ span:after {
  color: #fff;
  left: 3px;
}

/* 파일첨부 */
label.basic-file {
  display: inline-block;
  padding: 15px 30px;
  border-width: 0;
  border-style: solid;
  border-color: transparent;
  width: 300px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin: 3px 25px 3px 0;
}
label.basic-file > input[type=file] {
  display: none;
}
label.basic-file .file-info {
  display: flex;
  flex-direction: row;
  padding: 0;
  border-width: 0;
  border-color: transparent;
  justify-content: center;
  align-items: center;
  gap: 10px;
  position: absolute;
  left: 0;
  top: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  z-index: 1;
}
label.basic-file .file-button {
  flex: 0 0 auto;
  background-color: #e7edf5;
  color: #6d7480;
  border-radius: 7px;
  padding: 10px 20px;
  text-align: center;
}
label.basic-file .file-name {
  flex: 1 1 auto;
  color: #000;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 중앙정렬 */
label.cbox {
  margin: 0;
}
label.cbox span:before {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
label.cbox span:after {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(0) rotate(45deg);
}
label.cbox input[type=checkbox]:checked ~ span:after {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) scale(1) rotate(45deg);
}

/*=============================
툴팁 STYLE
==============================*/
/* 기본 스타일 */
*[data-tooltip] {
  position: relative;
  display: inline-block;
  padding: 0;
  border-width: 0;
  border-style: solid;
  border-color: transparent;
  cursor: pointer;
}

*[data-tooltip]::after, *[data-tooltip]::before {
  content: "";
  position: absolute;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}

*[data-tooltip]::after {
  content: attr(data-tooltip);
  bottom: calc(100% + 9px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

*[data-tooltip]::before {
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #333;
  bottom: calc(100% + 1px);
  left: 50%;
  transform: translateX(-50%);
}

*:hover[data-tooltip]::after, *:hover[data-tooltip]::before {
  opacity: 1;
  visibility: visible;
}

/* 버튼 스타일 */
.btn-area a[data-tooltip]::after {
  background-color: #333;
  color: #fff;
  padding: 5px 15px;
  border-radius: 8px;
  font-size: var(--byme-small-font-size);
  white-space: nowrap;
}
.btn-area a[data-tooltip]::before {
  border-top: 8px solid #333;
}

/* 텍스트 스타일 */
.tooltip-area span[data-tooltip]::after {
  width: 100%;
  max-width: 350px;
  background-color: #333;
  color: #fff;
  padding: 5px 15px;
  border-radius: 8px;
  font-size: var(--byme-small-font-size);
  white-space: wrap;
}
.tooltip-area span[data-tooltip]::before {
  border-top: 8px solid #333;
}

/*=============================
버튼영역 STYLE
==============================*/
/*영역 버튼 공통 */
.btn-area {
  margin: 0;
}
.btn-area li {
  display: inline-block;
  padding: 0;
  border-width: 0;
  border-style: solid;
  border-color: transparent;
}
.btn-area li.left {
  text-align: left;
}
.btn-area li.right {
  text-align: right;
}
.btn-area li.center {
  text-align: center;
}
.btn-area.left {
  display: flex;
  flex-direction: row;
  padding: 0;
  border-width: 0;
  border-color: transparent;
  justify-content: flex-start;
  width: 100%;
}
.btn-area.right {
  display: flex;
  flex-direction: row;
  padding: 0;
  border-width: 0;
  border-color: transparent;
  justify-content: flex-end;
  width: 100%;
}
.btn-area.center {
  display: flex;
  flex-direction: row;
  padding: 0;
  border-width: 0;
  border-color: transparent;
  justify-content: center;
  width: 100%;
}

.btn-area a, .btn-area select, .btn-area input, .btn-area button {
  display: inline-flex;
  flex-direction: row;
  padding: 0 10px;
  border-width: 0;
  border-color: transparent;
  justify-content: center;
  align-items: center;
  letter-spacing: -1px;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.5s ease;
  margin-left: 3px;
  margin-bottom: 5px;
  font-size: 0.9em;
}

/* 영역 아이콘 버튼*/
.btn-area i {
  font-size: 0.8em;
}
.btn-area .icon-right-btn i {
  margin-left: 5px;
}
.btn-area .icon-left-btn i {
  margin-right: 5px;
}

/*=============================
버튼 STYLE
==============================*/
/*기본버튼 설정*/
button {
  border: 0;
}

.basic-shadow-btn, .filter-btn, .filter-adm-btn,
.input-adm-search-btn, .input-adm-i-btn, .input-adm-plain-btn, .input-plain-btn {
  text-decoration: none;
  cursor: pointer;
  transition: all 0.5s ease;
}

.basic-shadow-btn {
  min-width: 100px;
  max-height: 70px;
  min-height: 45px;
  color: #ffffff;
  background: #1C8694;
  border-radius: 70em;
  margin-right: 5px;
  font-size: 0.9em;
}
.basic-shadow-btn:hover, .basic-shadow-btn:hover:after {
  color: #ffffff;
  background: #24ACBF !important;
  box-shadow: 0px 3px 15px 0px rgba(20, 95, 105, 0.78);
}
.basic-shadow-btn:after, .basic-shadow-btn:hover:after {
  transition: all 0.2s linear;
}

.basic-myzone-btn {
  min-width: 80px;
  max-height: 70px;
  min-height: 35px;
  background-size: 200% auto;
  background-image: linear-gradient(to right, #00C4FF 0%, #30A2FF 51%, #054579 100%);
  color: #fff;
  border-radius: 5px;
  border-radius: 5px;
  margin-right: 5px;
  font-size: 0.85em;
}
.basic-myzone-btn:hover {
  background-position: right center;
  color: #fff;
}

@media (max-width: 767px) {
  .basic-shadow-btn {
    min-height: 30px;
    min-width: 60px;
  }
}
/*키워드 구름 버튼*/
.filter-adm-btn {
  display: inline-block;
  padding: 2px 15px;
  border-radius: 70em;
  margin-right: 5px;
  background-color: #fff5f8;
  color: #f1416c;
  font-size: 0.9em;
}
.filter-adm-btn:hover {
  background-color: #f1416c;
  color: #fff5f8;
}
.filter-adm-btn.active {
  background-color: #f1416c;
  color: #fff5f8;
}

.filter-btn {
  display: inline-block;
  padding: 5px 20px;
  border-radius: 80em;
  margin-right: 8px;
  background-color: rgba(13, 153, 255, 0.1333333333);
  color: #0d99ff;
  font-size: 0.9em;
}
.filter-btn:hover {
  background-color: #0d99ff;
  color: #fff;
}
.filter-btn.active {
  background-color: #0d99ff;
  color: #fff;
}

/* 로그인 버튼 */
.login-adm-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 58px;
  border: 0;
  background-color: #2962ff;
  color: #fff;
  transition: all 0.5s ease;
  font-size: var(--byme-section-title-font-size);
}
.login-adm-btn:hover, .login-adm-btn.active {
  background-color: #03278a;
  color: #fff;
  border: 0;
}

.point-adm-btn {
  min-width: 70px;
  max-height: 70px;
  min-height: 45px;
  background-color: rgba(80, 111, 228, 0.1);
  color: #0068bf;
  border-radius: 5px;
}
.point-adm-btn:hover {
  background-color: #506fe4;
  color: #fff;
}
.point-adm-btn.active {
  background-color: #506fe4;
  color: #fff;
}

.point-long-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 58px;
  border-radius: 5px;
  background-color: rgba(80, 111, 228, 0.1);
  color: #0068bf;
  transition: all 0.5s ease;
  font-size: 0.85em;
  font-weight: 700;
}
.point-long-btn:hover, .point-long-btn.active {
  background-color: #506fe4;
  color: #fff;
}

.point-reverse-long-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 58px;
  border: 0;
  background-color: #03278a;
  color: #fff;
  transition: all 0.5s ease;
  font-size: 0.85em;
}
.point-reverse-long-btn:hover, .point-reverse-long-btn.active {
  background-color: #2962ff;
  color: #fff;
  border: 0;
}

.point-shadow-btn {
  color: #ffffff;
  background: #506fe4;
}
.point-shadow-btn:hover, .point-shadow-btn:hover:after {
  color: #ffffff;
  background: rgba(80, 111, 228, 0.5) !important;
  box-shadow: 0px 3px 15px 0px rgba(80, 111, 228, 0.78);
}
.point-shadow-btn:after, .point-shadow-btn:hover:after {
  transition: all 0.2s linear;
}

.input-adm-search-btn {
  min-width: 40px;
  max-height: 27px;
  min-height: 27px;
  background-size: 200% auto;
  background-image: linear-gradient(to right, #aaaece 0%, #8898b3 51%, #212529 100%);
  color: #fff;
  border-radius: 5px;
  border-radius: 0px;
  margin-left: -4px;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  border: 0;
  transition: all 0.5s ease;
}
.input-adm-search-btn:hover {
  background-position: right center;
  color: #fff;
}

.input-adm-i-btn {
  max-width: 27px;
  min-width: 27px;
  max-height: 27px;
  min-height: 27px;
  background-size: 200% auto;
  background-image: linear-gradient(to right, #aaaece 0%, #8898b3 51%, #212529 100%);
  color: #fff;
  border-radius: 5px;
}
.input-adm-i-btn:hover {
  background-position: right center;
  color: #fff;
}

.input-adm-plain-btn {
  min-width: 50px;
  min-height: 27px;
  background-color: #f5f5f7;
  color: #555;
  border-radius: 3px;
}
.input-adm-plain-btn:hover {
  background-color: #dae0e5;
  color: #222;
}
.input-adm-plain-btn.active {
  background-color: #dae0e5;
  color: #222;
}

.input-plain-btn, input.input-plain-btn {
  background-color: transparent;
  color: #acaeb0;
  border: 1px solid #acaeb0;
  border-radius: 5px;
  font-size: 0.8em;
}
.input-plain-btn:hover, input.input-plain-btn:hover {
  background-color: transparent;
  color: #222;
  border-color: #222;
}
.input-plain-btn.active, input.input-plain-btn.active {
  background-color: transparent;
  color: #222;
  border-color: #222;
}

.blackbtn {
  background-color: transparent;
  color: #7E8299;
}
.blackbtn:hover {
  background-color: transparent;
  color: #222;
}
.blackbtn.active {
  background-color: transparent;
  color: #222;
}

.redbtn {
  background-color: #ffdede;
  color: #FF5E5E;
}
.redbtn:hover {
  background-color: #FF5E5E;
  color: #fff;
}
.redbtn.active {
  background-color: #FF5E5E;
  color: #fff;
}

.bluebtn {
  background-color: rgba(13, 153, 255, 0.1333333333);
  color: #0d99ff;
}
.bluebtn:hover {
  background-color: #0d99ff;
  color: #fff;
}
.bluebtn.active {
  background-color: #0d99ff;
  color: #fff;
}

.greenbtn {
  background-color: #003300;
  color: #fff;
}
.greenbtn:hover {
  background-color: #1b5e20;
  color: #fff;
}
.greenbtn.active {
  background-color: #1b5e20;
  color: #fff;
}

.yellowbtn {
  background-color: rgba(251, 188, 11, 0.1333333333);
  color: #fbbc0b;
}
.yellowbtn:hover {
  background-color: #fbbc0b;
  color: #fff;
}
.yellowbtn.active {
  background-color: #fbbc0b;
  color: #fff;
}

.graybadgebtn {
  background-color: #F9F9F9;
  color: #7E8299;
}
.graybadgebtn:hover {
  background-color: #7E8299;
  color: #F9F9F9;
}
.graybadgebtn.active {
  background-color: #7E8299;
  color: #F9F9F9;
}

.greenbadgebtn {
  background-color: #e1fbe2;
  color: #4caf50;
}
.greenbadgebtn:hover {
  background-color: #4caf50;
  color: #e1fbe2;
}
.greenbadgebtn.active {
  background-color: #4caf50;
  color: #e1fbe2;
}

.yellowbadgebtn {
  background-color: #fff8dd;
  color: #ffc700;
}
.yellowbadgebtn:hover {
  background-color: #ffc700;
  color: #fff8dd;
}
.yellowbadgebtn.active {
  background-color: #ffc700;
  color: #fff8dd;
}

.redbadgebtn {
  background-color: #fff5f8;
  color: #f1416c;
}
.redbadgebtn:hover {
  background-color: #f1416c;
  color: #fff5f8;
}
.redbadgebtn.active {
  background-color: #f1416c;
  color: #fff5f8;
}

.bluebadgebtn {
  background-color: #f1faff;
  color: #009ef7;
}
.bluebadgebtn:hover {
  background-color: #009ef7;
  color: #f1faff;
}
.bluebadgebtn.active {
  background-color: #009ef7;
  color: #f1faff;
}

.orangebadgebtn {
  background-color: #ffe3db;
  color: #fd7e14;
}
.orangebadgebtn:hover {
  background-color: #fd7e14;
  color: #ffe3db;
}
.orangebadgebtn.active {
  background-color: #fd7e14;
  color: #ffe3db;
}

.graybadge {
  color: #7E8299;
  background-color: #F9F9F9;
}

.greenbadge {
  color: #50cd89;
  background-color: #e8fff3;
}

.yellowbadge {
  color: #ffc700;
  background-color: #fff8dd;
}

.redbadge {
  color: #f1416c;
  background-color: #fff5f8;
}

.bluebadge {
  color: #009ef7;
  background-color: #f1faff;
}

.orangebadge {
  color: #fd7e14;
  background-color: #ffe3db;
}

.cyan-gradient-badge {
  color: #fff;
  background: linear-gradient(45deg, #72c2ff, #86f0ff) !important;
}

.shadow-green-btn {
  color: #ffffff;
  background: #1cc88a;
}
.shadow-green-btn:hover, .shadow-green-btn:hover:after {
  color: #ffffff;
  background: #17a673 !important;
  box-shadow: 0px 3px 15px 0px rgba(62, 208, 156, 0.78);
}
.shadow-green-btn:after, .shadow-green-btn:hover:after {
  transition: all 0.2s linear;
}

.shadow-transparent-btn {
  color: #ffffff;
  background: rgba(0, 0, 0, 0.7);
  padding: 10px 25px;
  height: 70px;
  width: 100%;
  max-width: 400px;
  border-radius: 10px;
  font-size: 1.55em;
  font-weight: 600;
}
.shadow-transparent-btn:hover, .shadow-transparent-btn:hover:after {
  color: #ffffff;
  background: rgba(0, 0, 0, 0.9) !important;
  box-shadow: 0px 3px 15px 0px rgba(0, 0, 0, 0.78);
}
.shadow-transparent-btn:after, .shadow-transparent-btn:hover:after {
  transition: all 0.2s linear;
}

.i-circle-btn, .btn-area .i-circle-btn, .i-circle-adm-btn, .btn-area .i-circle-adm-btn {
  min-width: 23px;
  min-height: 23px;
  padding: 5px;
  border-radius: 100%;
}

.i-square-btn, .btn-area .i-square-btn, .i-square-adm-btn, .btn-area .i-square-adm-btn {
  min-width: 23px;
  min-height: 23px;
  padding: 5px;
}

/*애니메인션 효과*/
.toBottomFromTop-animate:hover i {
  animation: toBottomFromTop 0.5s forwards;
}

.toLeftFromRight-animate:hover i {
  animation: toLeftFromRight 0.5s forwards;
}

.toRightFromLeft-animate:hover i {
  animation: toRightFromLeft 0.5s forwards;
}

/*=============================
아이콘 버튼 STYLE - i-btn
==============================*/
button.i-btn {
  position: relative;
}

button.i-btn:after {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* datepicker 버튼 */
/* clear 버튼 */
button.clear-btn:after {
  content: "\f00d";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

/* now date 버튼 */
button.nowdate-btn:after {
  content: "\f783";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

/* now time 버튼 */
button.nowtime-btn:after {
  content: "\f017";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

/* reset 버튼 */
button.reset-btn:after {
  content: "\f1da";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

/* 정렬 버튼 */
a.order-icon, a.numerical-order-icon {
  text-decoration: none;
  margin-left: 15px;
}

.order-icon, .numerical-order-icon {
  position: relative;
}
.order-icon::before, .numerical-order-icon::before {
  content: "\f0dc";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: -12px;
}

.order-icon.order-desc::before {
  content: "\f882";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: -15px;
}
.order-icon.order-asc::before {
  content: "\f15d";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: -15px;
}

.numerical-order-icon.order-desc::before {
  content: "\f887";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: -15px;
}
.numerical-order-icon.order-asc::before {
  content: "\f162";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: -15px;
}

/*=============================
모달창 STYLE
==============================*/
#customAlert {
  z-index: 999999;
}
#customAlert.alert {
  display: none;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #222;
  font-size: 1.4rem;
  background-color: #DEDBCD;
  border-radius: 15px;
  width: 350px;
  height: 196px;
  padding: 40px;
  min-width: auto;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
#customAlert.alert.visible {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#customAlert.alert button {
  margin-top: 20px;
  background-color: rgba(165, 161, 143, 0.3);
  padding: 7px 15px;
  min-width: 120px;
  border: none;
  font-size: 1.35rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
#customAlert.alert button:hover {
  background-color: rgba(165, 161, 143, 0.8);
  color: #fff;
}

@media (max-width: 479px) {
  #customAlert.alert {
    width: 80%;
    max-width: 260px;
    height: 150px;
    padding: 20px;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    font-size: 1.3rem;
  }
  #customAlert.alert button {
    padding: 5px 10px;
    min-width: 70px;
    border: none;
    font-size: 1.25rem;
  }
}
/*=============================
텍스트 언더라인 모션
==============================*/
.post-title {
  color: #242424;
}
.post-title.bold-underline a {
  background-size: 0 2px;
}
.post-title.bold-underline:hover a {
  background-size: 100% 2px;
}
.post-title:hover a {
  background-size: 100% 1px;
}
.post-title a, .post-title .title-ex {
  color: inherit;
  display: inline;
  padding-bottom: 0;
  transition: background-size 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
  background-image: linear-gradient(to bottom, currentColor 0%, currentColor 98%);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: left 100%;
}

/*=============================
SNS 공유박스
==============================*/
.social-share-box {
  display: flex;
  flex-direction: row;
  padding: 0;
  border-width: 0;
  border-color: transparent;
  justify-content: center;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
  max-width: 100%;
}
.social-share-box li img {
  width: 18px;
}
.social-share-box a {
  display: flex;
  flex-direction: row;
  padding: 0;
  border-width: 0;
  border-color: transparent;
  justify-content: center;
  align-items: center;
  width: 35px;
  height: 35px;
  font-size: 1em;
  color: #fff;
  background-color: #2962ff;
  border-radius: var(--border-radius-xs);
  transition: all 0.5s ease;
}
.social-share-box a.fb {
  background-color: #1559c2;
  color: #FFF;
}
.social-share-box a.fb:hover {
  background-color: #0b2f66;
  color: #F9F9F9;
}
.social-share-box a.fb.active {
  background-color: #0b2f66;
  color: #F9F9F9;
}
.social-share-box a.twitter {
  background-color: #1ea9e9;
  color: #FFF;
}
.social-share-box a.twitter:hover {
  background-color: #0e6993;
  color: #F9F9F9;
}
.social-share-box a.twitter.active {
  background-color: #0e6993;
  color: #F9F9F9;
}
.social-share-box a.yu {
  background-color: #ed1d25;
  color: #FFF;
}
.social-share-box a.yu:hover {
  background-color: #980c11;
  color: #F9F9F9;
}
.social-share-box a.yu.active {
  background-color: #980c11;
  color: #F9F9F9;
}
.social-share-box a.dr {
  background-color: #f65e97;
  color: #FFF;
}
.social-share-box a.dr:hover {
  background-color: #e10d5c;
  color: #F9F9F9;
}
.social-share-box a.dr.active {
  background-color: #e10d5c;
  color: #F9F9F9;
}
.social-share-box a.dw {
  background-color: #ff6b10;
  color: #FFF;
}
.social-share-box a.dw:hover {
  background-color: #a94000;
  color: #F9F9F9;
}
.social-share-box a.dw.active {
  background-color: #a94000;
  color: #F9F9F9;
}
.social-share-box a.blog {
  background-color: #43ce13;
  color: #FFF;
}
.social-share-box a.blog:hover {
  background-color: #25710a;
  color: #F9F9F9;
}
.social-share-box a.blog.active {
  background-color: #25710a;
  color: #F9F9F9;
}
.social-share-box .social-share-box.layout-2 a {
  color: #7a7e83;
  background-color: transparent;
  border: 1px solid #cccccc;
}

/*=============================
탭 메뉴
==============================*/
.basic_tab {
  font-size: 0;
  border-bottom: 6px solid #f0f0f0;
  padding: 0 30px 0;
  margin-bottom: 10px;
}
.basic_tab button {
  display: inline-block;
  padding: 15px 20px;
  border-width: 0;
  border-style: solid;
  border-color: transparent;
  text-align: center;
  box-sizing: border-box;
  width: 100px;
  background-color: #fafafa;
  border-radius: 10px 10px 0 0;
  margin-right: 5px;
  margin-bottom: 0px;
  outline: none;
  cursor: pointer;
  margin-left: -1px;
  font-size: var(--byme-small-font-size);
  color: #666;
  position: relative;
  z-index: 1;
}
.basic_tab button:hover {
  background-color: #f0f0f0;
}
.basic_tab button.active {
  background-color: #f0f0f0;
  font-weight: 600;
  color: #000;
  z-index: 2;
  margin-bottom: -1px;
}

/*=============================
  리스트 스타일
==============================*/
.list-row {
  display: flex;
  flex-direction: row;
  padding: 0;
  border-width: 0;
  border-color: transparent;
}

.list-grow {
  display: flex;
  flex-direction: row;
  padding: 0;
  border-width: 0;
  border-color: transparent;
  width: 100%;
  margin: 5px 0 20px;
}

@media (max-width: 479px) {
  .list-grow {
    flex-direction: column;
  }
}
.list-row, .list-grow {
  box-sizing: border-box;
}
.list-row .w5, .list-grow .w5 {
  width: 5%;
}
.list-row .w10, .list-grow .w10 {
  width: 10%;
}
.list-row .w15, .list-grow .w15 {
  width: 15%;
}
.list-row .w20, .list-grow .w20 {
  width: 20%;
}
.list-row .w25, .list-grow .w25 {
  width: 25%;
}
.list-row .w30, .list-grow .w30 {
  width: 30%;
}
.list-row .w35, .list-grow .w35 {
  width: 35%;
}
.list-row .w40, .list-grow .w40 {
  width: 40%;
}
.list-row .w45, .list-grow .w45 {
  width: 45%;
}
.list-row .w50, .list-grow .w50 {
  width: 50%;
}
.list-row .w55, .list-grow .w55 {
  width: 55%;
}
.list-row .w60, .list-grow .w60 {
  width: 60%;
}
.list-row .w65, .list-grow .w65 {
  width: 65%;
}
.list-row .w70, .list-grow .w70 {
  width: 70%;
}
.list-row .w75, .list-grow .w75 {
  width: 75%;
}
.list-row .w80, .list-grow .w80 {
  width: 80%;
}
.list-row .w85, .list-grow .w85 {
  width: 85%;
}
.list-row .w90, .list-grow .w90 {
  width: 90%;
}
.list-row .w95, .list-grow .w95 {
  width: 95%;
}
.list-row .w100, .list-grow .w100 {
  width: 100%;
}
.list-row .g5, .list-grow .g5 {
  flex-grow: 5;
}
.list-row .g10, .list-grow .g10 {
  flex-grow: 10;
}
.list-row .g15, .list-grow .g15 {
  flex-grow: 15;
}
.list-row .g20, .list-grow .g20 {
  flex-grow: 20;
}
.list-row .g25, .list-grow .g25 {
  flex-grow: 25;
}
.list-row .g30, .list-grow .g30 {
  flex-grow: 30;
}
.list-row .g35, .list-grow .g35 {
  flex-grow: 35;
}
.list-row .g40, .list-grow .g40 {
  flex-grow: 40;
}
.list-row .g45, .list-grow .g45 {
  flex-grow: 45;
}
.list-row .g50, .list-grow .g50 {
  flex-grow: 50;
}
.list-row .g55, .list-grow .g55 {
  flex-grow: 55;
}
.list-row .g60, .list-grow .g60 {
  flex-grow: 60;
}
.list-row .g65, .list-grow .g65 {
  flex-grow: 65;
}
.list-row .g70, .list-grow .g70 {
  flex-grow: 70;
}
.list-row .g75, .list-grow .g75 {
  flex-grow: 75;
}
.list-row .g80, .list-grow .g80 {
  flex-grow: 80;
}
.list-row .g85, .list-grow .g85 {
  flex-grow: 85;
}
.list-row .g90, .list-grow .g90 {
  flex-grow: 90;
}
.list-row .g95, .list-grow .g95 {
  flex-grow: 95;
}
.list-row .g100, .list-grow .g100 {
  flex-grow: 100;
}
.list-row .wp100, .list-grow .wp100 {
  width: 100px;
}
.list-row .wp150, .list-grow .wp150 {
  width: 150px;
}
.list-row .wp200, .list-grow .wp200 {
  width: 200px;
}
.list-row .tcenter, .list-grow .tcenter {
  text-align: center;
}
.list-row .tright, .list-grow .tright {
  text-align: right;
}
.list-row .tleft, .list-grow .tleft {
  text-align: left;
}
.list-row .tcenter, .list-grow .tcenter {
  text-align: center;
  align-items: center;
}
.list-row .tright, .list-grow .tright {
  text-align: right;
  align-items: end;
}
.list-row .tleft, .list-grow .tleft {
  text-align: left;
  align-items: start;
}
.list-row .jstart, .list-grow .jstart {
  justify-content: start;
}
.list-row .jcenter, .list-grow .jcenter {
  justify-content: center;
}
.list-row .jend, .list-grow .jend {
  justify-content: end;
}
.list-row > div, .list-grow > div {
  justify-content: center;
  align-items: center;
}

.list-row {
  font-size: 1em;
}
.list-row > div.right-hole {
  border-right: 1px solid transparent !important;
}
.list-row > div.left-hole {
  border-left: 1px solid transparent !important;
}
.list-row p {
  padding: 0;
  margin: 0;
  vertical-align: middle;
}
.list-row p a {
  color: #333;
}
.list-row .num {
  color: #000;
}
.list-row .title {
  color: #000;
}
.list-row .title:hover {
  color: #222;
}
.list-row .date {
  font-size: var(--byme-small-font-size);
  color: #aaa;
}
.list-row .badge {
  display: inline-block;
  padding: 5px;
  border-width: 0;
  border-style: solid;
  border-color: transparent;
}
.list-row a.order-desc,
.list-row a.order-asc {
  color: #0068bf;
}
.list-row span {
  font-size: var(--byme-small-font-size);
}
.list-row em {
  font-size: var(--byme-small-font-size);
  color: #DC143C;
}
.list-row img {
  max-width: 100%;
}
.list-row img.thumb {
  max-width: 150px;
}

/*리스트 타입 - 1*/
.list-style01 > .list-row:first-of-type > div {
  border-top: 1px solid #e7edf5;
}
.list-style01 > .list-row > div {
  border-right: 1px solid #e7edf5;
  border-bottom: 1px solid #e7edf5;
}
.list-style01 > .list-row > div:first-of-type {
  border-left: 1px solid #e7edf5;
}

.list-style01 {
  width: 100%;
  min-width: 300px;
  color: #555;
  margin-bottom: 20px;
}
.list-style01 .list-row {
  flex-wrap: nowrap;
  text-align: center;
}
.list-style01 .list-row.top-bar div {
  background: #f7fafd;
  color: #222;
  font-size: 1.1em;
}
.list-style01 .list-row.list-bar:hover {
  background-color: #f1f5f9;
}
.list-style01 .list-row > div {
  display: flex;
  flex-direction: column;
  padding: 10px;
  word-break: break-all;
  line-height: 1.5em;
}

/*뷰 타입 - 1*/
.view-style01 > .list-row:first-of-type > div {
  border-top: 1px solid #e7edf5;
}
.view-style01 > .list-row > div {
  border-right: 1px solid #e7edf5;
  border-bottom: 1px solid #e7edf5;
}
.view-style01 > .list-row > div:first-of-type {
  border-left: 1px solid #e7edf5;
}

.view-style01 {
  width: 100%;
  min-width: 300px;
  margin-bottom: 20px;
}
.view-style01 .list-row {
  flex-wrap: nowrap;
  text-align: center;
}
.view-style01 .list-row .titcol {
  background: #f7fafd;
  color: #222;
  justify-content: center;
}
.view-style01 .list-row .contcol {
  text-align: justify;
}
.view-style01 .list-row > div {
  display: flex;
  flex-direction: row;
  padding: 15px;
  justify-content: flex-start;
  word-break: break-all;
  line-height: 1.5em;
}
.view-style01 .list-row > div p {
  padding: 0;
  margin: 0 0 5px 0;
  vertical-align: middle;
}

@media (max-width: 767px) {
  .view-style01 {
    border-left: 0;
  }
  .view-style01 .list-row > div {
    border-right: 0;
  }
  .view-style01 .list-row > div:first-of-type {
    border-left: 0;
  }
}
/*리스트 타입 - 2*/
.list-style02 {
  width: 100%;
  min-width: 300px;
  font-size: 1em;
  color: #555;
  margin-bottom: 20px;
}
.list-style02.topline {
  border-top: 1px solid #ddd;
}
.list-style02 .list-row {
  flex-wrap: wrap;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid #ddd;
  padding: 15px 10px;
}
.list-style02 .list-row.top-bar {
  border-bottom: 0;
  top: -1px;
}
.list-style02 .list-row.top-bar > div {
  background: #ddd;
  color: #222;
  box-sizing: border-box;
}
.list-style02 .list-row.list-bar:hover {
  background-color: #f6f5f6;
  transition: 1s;
}
.list-style02 .list-row > div {
  margin: 0;
  line-height: 1.7em;
  border-radius: 5px;
  box-sizing: border-box;
}
.list-style02 .list-row > div p {
  padding: 0;
  margin: 0 0 5px 0;
  vertical-align: middle;
}
.list-style02 .list-row .num {
  color: #222;
}
.list-style02 .list-row .title {
  color: #222;
  font-weight: 700;
}
.list-style02 .list-row .title:hover {
  color: #222;
}
.list-style02 .list-row .name {
  color: #222;
  font-weight: 700;
}
.list-style02 .list-row .date {
  color: #6d6d6d;
}
.list-style02 .list-row .description {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.list-style02 .list-row p a {
  color: #333;
}
.list-style02 .list-row p a.order-desc {
  color: #0068bf;
}
.list-style02 .list-row p a.order-asc {
  color: #0068bf;
}
.list-style02 .list-row span {
  font-weight: normal;
  margin-right: 15px;
}
.list-style02 .list-row em {
  color: #DC143C;
}
.list-style02 .list-row img {
  max-width: 100%;
}

/*뷰 타입 - 2*/
.view-style02 {
  width: 100%;
  min-width: 300px;
  margin-bottom: 20px;
  vertical-align: top;
  padding: 20px;
}
.view-style02 .list-row {
  flex-wrap: wrap;
  text-align: center;
  vertical-align: middle;
  padding: 15px 10px;
}
.view-style02 .list-row.topline {
  border-top: 1px solid #ddd;
  padding-top: 30px;
}
.view-style02 .list-row.bottomline {
  border-bottom: 1px solid #ddd;
  padding-bottom: 30px;
}
.view-style02 .list-row .title {
  font-size: var(--byme-section-title-font-size);
  color: #222;
  font-weight: 700;
  line-height: 2em;
}
.view-style02 .list-row .title:hover {
  color: #222;
}
.view-style02 .list-row .subtitle {
  font-size: var(--byme-section-sub-title-font-size);
  line-height: 1.3em;
  color: #222;
  font-weight: bold;
}
.view-style02 .list-row .name {
  color: #222;
  font-weight: 700;
}
.view-style02 .list-row .date {
  font-size: var(--byme-small-font-size);
  color: #6d6d6d;
}
.view-style02 .list-row .num {
  font-size: 1.1em;
  color: #333;
  font-weight: bold;
}
.view-style02 .list-row .titcol {
  background: #f8f8f8;
  text-align: center;
  font-size: 1.1em;
  font-weight: bold;
}
.view-style02 .list-row .contcol {
  text-align: justify;
}
.view-style02 .list-row p {
  padding: 0;
  margin: 0;
  vertical-align: middle;
  font-size: 1.1em;
  line-height: 1.5em;
}
.view-style02 .list-row p a {
  color: #333;
}
.view-style02 .list-row span {
  margin-right: 15px;
}
.view-style02 .list-row em {
  font-size: var(--byme-small-font-size);
  color: #DC143C;
}
.view-style02 .list-row input[type=checkbox], .view-style02 .list-row input[type=radio] {
  margin-left: 10px;
  vertical-align: middle;
}
.view-style02 .list-row img {
  max-width: 100%;
}
.view-style02 .list-row img.thumb {
  max-width: 150px;
}

/*   감추기 설정 */
@media (max-width: 1024px) {
  .list-row.hidden_tbl, .list-row > div.hidden_tbl {
    display: none !important;
  }
  .list-row > div.tbl-right-hole {
    border-right: 1px solid transparent !important;
  }
  .list-row > div.tbl-left-hole {
    border-left: 1px solid transparent !important;
  }
  .list-row.tbl-top-line, .list-row > div.tbl-top-line {
    border-top: 1px solid #e7edf5 !important;
  }
}
@media (max-width: 767px) {
  .list-row.hidden_wmb, .list-row > div.hidden_wmb {
    display: none !important;
  }
  .list-row > div.wmb-right-hole {
    border-right: 1px solid transparent !important;
  }
  .list-row > div.wmb-left-hole {
    border-left: 1px solid transparent !important;
  }
  .list-row.wmb-top-line, .list-row > div.wmb-top-line {
    border-top: 1px solid #e7edf5 !important;
  }
}
@media (max-width: 479px) {
  .list-row.hidden_mb, .list-row > div.hidden_mb {
    display: none !important;
  }
  .list-row > div.mb-right-hole {
    border-right: 1px solid transparent !important;
  }
  .list-row > div.mb-left-hole {
    border-left: 1px solid transparent !important;
  }
  .list-row.mb-top-line, .list-row > div.mb-top-line {
    border-top: 1px solid #e7edf5 !important;
  }
}
/* 보이기 설정 */
@media (min-width: 1025px) {
  .list-row.show_tbl, .list-row > div.show_tbl {
    display: none !important;
  }
}
@media (min-width: 768px) {
  .list-row.show_wmb, .list-row > div.show_wmb {
    display: none !important;
  }
}
@media (min-width: 480px) {
  .list-row.show_mb, .list-row > div.show_mb {
    display: none !important;
  }
}
.list-grow .list-grow__area {
  display: flex;
  flex-direction: row;
  padding: 10px 0;
  border-width: 0;
  border-color: transparent;
  justify-items: center;
  align-items: center;
}
.list-grow .list-grow__area div {
  padding: 3px 0;
  vertical-align: middle;
}
.list-grow .list-grow__area.left {
  display: flex;
  flex-direction: row;
  padding: 0;
  border-width: 0;
  border-color: transparent;
  justify-content: flex-start;
}
.list-grow .list-grow__area.right {
  display: flex;
  flex-direction: row;
  padding: 0;
  border-width: 0;
  border-color: transparent;
  justify-content: flex-end;
}
.list-grow .list-grow__area.center {
  display: flex;
  flex-direction: row;
  padding: 0;
  border-width: 0;
  border-color: transparent;
  justify-content: center;
}

@media (max-width: 479px) {
  .list-grow .list-grow__area {
    width: 100%;
  }
}
/*테이블*/
.table_basic {
  width: 100%;
  min-width: 300px;
  margin-top: 5px;
}
.table_basic th,
.table_basic td {
  text-align: center;
}
.table_basic th {
  font-weight: bold;
  line-height: 1.5em;
  border: 1px solid #dedede;
  padding: 6px 10px;
  background: #f3f3f3;
}
.table_basic td {
  line-height: 1.5em;
  border: 1px solid #dedede;
  padding: 4px 10px;
  word-wrap: break-word;
}
.table_basic td p {
  font-weight: bold;
  color: #000;
  line-height: 1.5;
  margin: 7px 0;
}

table .ltbl {
  text-align: left;
}

table .rtbl {
  text-align: right;
}

table .ctbl {
  text-align: center;
}

/*=============================
paging STYLE
==============================*/
.gr_paging {
  font-size: 1.5rem;
  display: flex;
  padding: 20px 0;
  text-align: center;
}
.gr_paging a {
  width: 30px;
  height: 30px;
  line-height: 30px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  position: relative;
  display: inline-block;
  padding: 0;
  margin: 0 5px;
  text-align: center;
  z-index: 1;
}
.gr_paging a:after {
  opacity: 0.35;
  background: linear-gradient(317.37deg, #000 2.76%, rgb(154, 163, 164) 63.36%);
  border-radius: 50%;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  z-index: -1;
  transition: all 0.5s ease;
}
.gr_paging a:hover, .gr_paging a.active {
  color: #fff;
  text-decoration: none;
}
.gr_paging a:hover:after, .gr_paging a.active:after {
  opacity: 1;
}
.gr_paging a i {
  line-height: 32px;
}
@media (max-width: 1024px) {
  .gr_paging a {
    width: 28.5px;
    height: 28.5px;
    line-height: 28.5px;
    font-size: 0.95em;
  }
  .gr_paging a i {
    line-height: 28.5px;
  }
}
@media (max-width: 479px) {
  .gr_paging a {
    width: 25.65px;
    height: 25.65px;
    line-height: 25.65px;
    font-size: var(--byme-small-font-size);
  }
  .gr_paging a i {
    line-height: 25.65px;
  }
}
.gr_paging a {
  font-family: "RobotoCondensedRegular", sans-serif;
}

.gr_paging2 {
  display: flex;
  padding: 20px 0;
  text-align: center;
}
.gr_paging2 a {
  width: 30px;
  height: 30px;
  line-height: 30px;
  border: 1px solid #ccc;
  border-radius: 3px;
  color: #333;
  position: relative;
  display: inline-block;
  padding: 0;
  margin: 0 5px;
  text-align: center;
  z-index: 1;
}
.gr_paging2 a:after {
  opacity: 0.35;
  background: linear-gradient(317.37deg, #fff 2.76%, #333 63.36%);
  border-radius: 3px;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  z-index: -1;
  transition: all 0.5s ease;
}
.gr_paging2 a:hover, .gr_paging2 a.active {
  color: #fff;
  text-decoration: none;
}
.gr_paging2 a:hover:after, .gr_paging2 a.active:after {
  opacity: 1;
}
.gr_paging2 a i {
  line-height: 32px;
}
@media (max-width: 1024px) {
  .gr_paging2 a {
    width: 28.5px;
    height: 28.5px;
    line-height: 28.5px;
    font-size: 0.95em;
  }
  .gr_paging2 a i {
    line-height: 28.5px;
  }
}
@media (max-width: 479px) {
  .gr_paging2 a {
    width: 25.65px;
    height: 25.65px;
    line-height: 25.65px;
    font-size: var(--byme-small-font-size);
  }
  .gr_paging2 a i {
    line-height: 25.65px;
  }
}
.gr_paging2 a {
  font-family: "RobotoCondensedRegular", sans-serif;
}

.gr_paging3 {
  display: flex;
  padding: 20px 0;
  text-align: center;
}
.gr_paging3 a {
  width: 44px;
  height: 44px;
  line-height: 44px;
  border: 0;
  border-radius: 50%;
  color: #2B2D37;
  background: #F8F8F8;
  position: relative;
  display: inline-block;
  padding: 0;
  margin: 0 5px;
  text-align: center;
  z-index: 1;
  transition: all 0.5s ease;
}
.gr_paging3 a:hover, .gr_paging3 a.active {
  color: #fff;
  text-decoration: none;
  background: #FABC3D;
}
.gr_paging3 a i {
  line-height: 32px;
}
@media (max-width: 1024px) {
  .gr_paging3 a {
    width: 41.8px;
    height: 41.8px;
    line-height: 41.8px;
    font-size: 0.95em;
  }
  .gr_paging3 a i {
    line-height: 41.8px;
  }
}
@media (max-width: 479px) {
  .gr_paging3 a {
    width: 37.62px;
    height: 37.62px;
    line-height: 37.62px;
    font-size: var(--byme-small-font-size);
  }
  .gr_paging3 a i {
    line-height: 37.62px;
  }
}
.gr_paging3 a {
  font-family: "RobotoCondensedRegular", sans-serif;
}

.gr_paging.paging_center, .gr_paging2.paging_center, .gr_paging3.paging_center {
  justify-content: center;
}

@media (max-width: 479px) {
  .gr_paging, .gr_paging2, .gr_paging3 {
    align-items: center;
    justify-content: center;
  }
}
/*=============================
 별점
==============================*/
.star-rating {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  font-size: 0.8125em;
}
.star-rating li {
  margin-right: 5px;
}
.star-rating li i.checked {
  color: #f5c415;
}
.star-rating li:last-child {
  margin-right: 0;
}
.star-rating .rating-count {
  color: #8d8d8d;
}

/*=============================
comment STYLE
==============================*/
/* 댓글 */
.comment_basic {
  margin: 60px 0;
  font-size: 1em;
}
.comment_basic .comment_title {
  width: auto;
  margin-bottom: 10px;
  line-height: 1.5em;
}
.comment_basic .comment_title .section-title {
  font-size: var(--byme-section-title-font-size);
}
.comment_basic .comment_title .counter {
  color: #919193;
  font-size: var(--byme-small-font-size);
  width: auto;
  padding-top: 3px;
  margin-left: 15px;
}
.comment_basic .comment_title .counter .cmt_counter {
  color: #1919ee;
  font-weight: 900;
}
.comment_basic .comment_write {
  background: #F7F7F7;
  padding: 35px 40px;
  border-radius: 14px;
  margin-bottom: 50px;
}
.comment_basic .comment_write .login span {
  display: inline-block;
  padding: 0;
  border-width: 0;
  border-style: solid;
  border-color: transparent;
  text-align: center;
  padding-left: 4px;
  font-size: 0.8em;
  color: #e57b38;
  line-height: 30px;
}
.comment_basic .comment_write input {
  background: #fff;
  height: 58px;
  border-radius: 5px;
  display: block;
  float: left;
  border: 1px solid #fff;
  width: 49%;
  font-size: var(--byme-section-title-font-size);
  padding: 0 20px;
}
.comment_basic .comment_write textarea {
  width: 100%;
  height: 138px;
  max-height: 300px;
  min-height: 138px;
  background: #fff;
  border-radius: 5px;
  display: block;
  float: left;
  border: 1px solid #fff;
  resize: vertical;
  font-size: 1em;
  margin-top: 2%;
  padding: 20px;
}
.comment_basic .comment_write input::-moz-placeholder, .comment_basic .comment_write textarea::-moz-placeholder {
  color: #aaa;
}
.comment_basic .comment_write input::placeholder, .comment_basic .comment_write textarea::placeholder {
  color: #aaa;
}
.comment_basic .submit-comment, .comment_basic .submit-edit {
  height: 48px;
  line-height: 48px;
  min-width: 154px;
  border-radius: 7px;
  font-size: 1em;
  padding: 0 13px;
  margin-top: 10px;
  transition: all 0.2s linear;
}
.comment_basic .load-more-comments {
  height: 48px;
  line-height: 48px;
  min-width: 154px;
  border-radius: 7px;
  font-size: 1em;
  padding: 0 13px;
  margin-top: 10px;
  transition: all 0.2s linear;
  display: block;
}
.comment_basic .load-more-comments:hover {
  transition: all 0.2s linear;
}
.comment_basic .comment_tab {
  font-size: 0;
  border-bottom: 6px solid #f0f0f0;
  padding: 0 30px 0;
  margin-bottom: 10px;
}
.comment_basic .comment_tab button {
  display: inline-block;
  padding: 15px 20px;
  border-width: 0;
  border-style: solid;
  border-color: transparent;
  text-align: center;
  box-sizing: border-box;
  width: 100px;
  background-color: #fafafa;
  border-radius: 10px 10px 0 0;
  margin-right: 5px;
  margin-bottom: 0px;
  outline: none;
  cursor: pointer;
  margin-left: -1px;
  font-size: var(--byme-small-font-size);
  color: #666;
  position: relative;
  z-index: 1;
}
.comment_basic .comment_tab button:hover {
  background-color: #f0f0f0;
}
.comment_basic .comment_tab button.active {
  background-color: #f0f0f0;
  font-weight: 600;
  color: #000;
  z-index: 2;
  margin-bottom: -1px;
}
.comment_basic .comment_list {
  position: relative;
  margin-bottom: 5px;
  border-top: 0;
  padding: 25px 15px;
}
.comment_basic .comment_list a {
  color: #666;
}
.comment_basic .comment_list .title_line {
  padding: 0 10px;
  position: relative;
  margin-bottom: 10px;
}
.comment_basic .comment_list .title_line ul {
  display: inline-block;
  padding: 0;
  border-width: 0;
  border-style: solid;
  border-color: transparent;
}
.comment_basic .comment_list .title_line ul li {
  display: inline-block;
  padding: 0;
  border-width: 0;
  border-style: solid;
  border-color: transparent;
  position: relative;
}
.comment_basic .comment_list .title_line .comment_btn {
  position: absolute;
  right: 10px;
  top: 0;
  font-size: var(--byme-small-font-size);
}
.comment_basic .comment_list .title_line .comment_btn li {
  margin-left: 5px;
}
.comment_basic .comment_list .title_line .comment_btn i {
  font-weight: 400;
}
.comment_basic .comment_list .title_line strong {
  display: inline-block;
  padding: 0;
  border-width: 0;
  border-style: solid;
  border-color: transparent;
  font-size: 1em;
  color: #33363b;
  font-weight: 600;
}
.comment_basic .comment_list .title_line span {
  display: inline-block;
  padding: 0 0 0 20px;
  border-width: 0;
  border-style: solid;
  border-color: transparent;
  font-size: var(--byme-small-font-size);
  color: #c6c5c5;
}
.comment_basic .comment_list .content_line {
  background: rgba(233, 233, 233, 0.44);
  border-radius: 0 20px 20px 20px;
  padding: 28px 36px;
}
.comment_basic .comment_list .content_line > span {
  line-height: 1.5em;
  width: 100%;
  display: block;
}
.comment_basic .comment_list .good {
  display: inline-block;
  padding: 0;
  border-width: 0;
  border-style: solid;
  border-color: transparent;
}
.comment_basic .comment_list .good :hover {
  text-decoration: none;
  color: #999;
}
.comment_basic .comment_list .good span {
  color: #DC143C;
  padding-left: 3px;
}
.comment_basic .comment_list .good span :hover {
  text-decoration: none;
  color: #999;
}
.comment_basic .comment_list textarea {
  width: 100%;
  height: 100%;
  margin-bottom: 10px;
}

@media (max-width: 479px) {
  .comment_basic .comment_write .button,
  .comment_basic .load-more-comments {
    width: 100%;
  }
  .comment_basic .comment_list .content_line > span {
    line-height: 1.5em;
    width: 100%;
    display: block;
  }
  .comment_basic .comment_list .good {
    position: relative;
    display: block;
  }
}
/*=============================
 토글 클래스
==============================*/
.hidden-section {
  opacity: 0;
  visibility: hidden;
}
.hidden-section.open-section {
  opacity: 1;
  visibility: visible;
}

.remove-section {
  display: none;
}
.remove-section.open-section {
  display: block;
}

/*=============================
팝업 STYLE
==============================*/
.popup_layer img {
  position: relative;
  max-width: 100%;
}

/*=============================
에디터 editor
==============================*/
.editor-area {
  font-size: 1em;
  line-height: 1.5;
  text-align: justify;
  word-break: break-word;
  overflow-wrap: break-word;
}
.editor-area img, .editor-area video, .editor-area iframe {
  display: block;
  margin: 10px 0;
  max-width: 100%;
  height: auto !important;
  -o-object-fit: contain;
     object-fit: contain;
}

@media (max-width: 767px) {
  .editor-area img, .editor-area video, .editor-area iframe {
    margin: 8px 0;
  }
}
@media (max-width: 479px) {
  .editor-area img, .editor-area video, .editor-area iframe {
    margin: 6px 0;
  }
}
/*=============================
에디터 ck-editor
==============================*/
.ck.ck-editor {
  max-width: 100%;
}

.ck-editor__editable {
  height: 400px;
  min-height: 300px;
}
.ck-editor__editable p {
  line-height: 1.5em;
}
.ck-editor__editable h2 {
  font-size: var(--byme-section-title-font-size);
}
.ck-editor__editable h3 {
  font-size: 2em;
}
.ck-editor__editable h4 {
  font-size: 2.5em;
}

.ck-source-editing-area {
  height: 400px;
  min-height: 300px;
  font-size: 1em;
  color: #222;
}

/*ck-editor 섹션*/
.ck-e {
  line-height: 1.8em;
}
.ck-e p {
  margin-bottom: 10px;
}
.ck-e .text-tiny {
  font-size: 0.7em;
}
.ck-e .text-small {
  font-size: 0.85em;
}
.ck-e .text-big {
  font-size: 1.4em;
}
.ck-e .text-huge {
  font-size: 1.8em;
}
.ck-e h2 {
  font-size: var(--byme-section-title-font-size);
}
.ck-e h3 {
  font-size: 2em;
}
.ck-e h4 {
  font-size: 2.5em;
}

.ck.ck-editor__editable_inline {
  font-family: var(--byme-main-font);
}

.ck-powered-by {
  display: none !important;
}

/*=============================
첨부파일
==============================*/
#file_list {
  display: block;
  margin: 5px 0;
}
#file_list a {
  margin-right: 15px;
  color: #717386;
}
#file_list a:hover {
  margin-right: 10px;
  color: #000000;
}

.file-list {
  display: flex;
  flex-direction: column;
}
.file-list li {
  margin: 5px 0;
}
.file-list li a {
  color: var(--byme-color-primary);
}
.file-list li a:hover {
  color: #000000;
}

/*=============================
이미지 멀티업로드 STYLE
==============================*/
#image_preview {
  position: relative;
  width: 750px;
  max-width: 100%;
  margin-right: 5px;
}

#multiImg_zone {
  width: 100%;
  height: auto;
  min-height: 150px;
  padding: 10px;
  border: 2px dashed #717386;
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  transition: border-color 0.15s linear;
}
#multiImg_zone:hover {
  background-size: 30px 30px;
  background-image: linear-gradient(-45deg, #F6F6F6 25%, transparent 25%, transparent 50%, #F6F6F6 50%, #F6F6F6 75%, transparent 75%, transparent);
  animation: stripes 2s linear infinite;
}
#multiImg_zone:empty:before {
  content: "\f382";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #999;
  font-size: 4em;
  position: absolute;
  left: 50%;
  top: calc(50% - 20px);
  transform: translate(-50%, -50%);
}
#multiImg_zone:empty:after {
  content: attr(data-placeholder);
  color: #999;
  font-size: 0.9em;
  position: absolute;
  left: 50%;
  top: calc(50% + 20px);
  transform: translate(-50%, -50%);
}

/*=============================
map STYLE
==============================*/
.kakao-map #map {
  width: 100%;
  height: 540px;
  border-radius: 0 15px 0 15px;
}

.map_info {
  position: relative;
  margin-top: 50px;
}
.map_info .map_info_box {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  padding: 1.5rem;
  border-radius: 0 15px 0 15px;
  margin: 1rem 0;
  background-color: #fae9cd;
  font-size: 1.1em;
  color: #725c4b;
  line-height: 1.5em;
  text-align: left;
}
.map_info .map_info_box::before {
  content: "";
  position: absolute;
  left: 0;
  top: -0.75em;
  display: block;
  border: 1px solid #fae9cd;
  border-right-color: transparent;
  border-left-color: transparent;
  border-top-color: transparent;
  margin: -1rem 0 0 2rem;
}

@media only screen and (max-width: 767px) {
  .kakao-map #map {
    height: 400px;
    border-radius: 0 5px 0 5px;
  }
  .map_info .map_info_box {
    border-radius: 0 5px 0 5px;
  }
}
@media only screen and (max-width: 479px) {
  .kakao-map #map {
    height: 300px;
  }
}
/*=============================
datepicker STYLE
==============================*/
.datepicker {
  box-sizing: border-box;
  width: 130px;
}

.datetimepicker {
  box-sizing: border-box;
  width: 160px;
}

.daterange {
  box-sizing: border-box;
  width: 200px;
}

.datepicker-line {
  display: flex;
  flex-direction: row;
  padding: 0;
  border-width: 0;
  border-color: transparent;
  position: relative;
  margin-right: 5px;
}
.datepicker-line input, .datepicker-line select, .datepicker-line textarea, .datepicker-line button {
  margin-right: 2px;
}
.datepicker-line button {
  box-sizing: border-box;
  width: 27px;
  height: 27px;
}

.datepicker-input {
  position: relative;
  display: inline-block;
  padding: 0;
  border-width: 0;
  border-style: solid;
  border-color: transparent;
}

.datepicker-input:after {
  content: "\f073";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  right: 10px;
  color: #999;
  font-size: 14px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

#ui-datepicker-div {
  box-sizing: border-box;
  width: 300px;
  z-index: 9999 !important;
  background: #fff;
}

.ui-widget.ui-widget-content {
  border: 0;
}

.ui-datepicker {
  font-family: "notokr-regular", sans-serif;
  font-size: 14px;
  padding: 0;
  box-shadow: 1px 0 0 #eff2f7, -1px 0 0 #eff2f7, 0 1px 0 #eff2f7, 0 -1px 0 #eff2f7, 0 3px 13px rgba(0, 0, 0, 0.08);
}
.ui-datepicker .ui-datepicker-header {
  position: relative;
  text-align: center;
  width: 100%;
  padding: 10px;
  background-color: #1d3557;
  border: 1px solid #1d3557;
  border-bottom: 0;
  border-radius: 3px 3px 0 0;
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-title {
  font-weight: bold;
  line-height: 15px;
  color: #f1faee;
  display: flex;
  flex-direction: row;
  padding: 0;
  border-width: 0;
  border-color: transparent;
  justify-content: center;
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-title select {
  min-width: 65px;
  width: auto;
  margin: 0 5px;
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-title .ui-datepicker-month {
  margin-right: 5px;
  order: 1;
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-title .ui-datepicker-year,
.ui-datepicker .ui-datepicker-header .ui-datepicker-title .ui-datepicker-month {
  box-sizing: border-box;
  height: 24px;
  font-family: "notokr-regular", sans-serif;
  font-size: 0.9em;
  padding: 0 9px;
  border: 1px solid #dedede;
  background: #ffffff;
  vertical-align: middle;
}
.ui-datepicker .ui-datepicker-header .ui-datepicker-title .ui-datepicker-calendar {
  padding: 10px;
  border: 1px solid #ededed;
  border-top: 0 none;
  background: #f3fbea;
}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span,
.ui-datepicker .ui-datepicker-prev:hover span,
.ui-datepicker .ui-datepicker-next:hover span {
  visibility: hidden;
}
.ui-datepicker .ui-datepicker-prev::before,
.ui-datepicker .ui-datepicker-next::before {
  font-size: var(--byme-section-title-font-size);
  position: absolute;
  top: 50%;
  color: #f1faee;
  visibility: visible;
}
.ui-datepicker .ui-datepicker-prev::before {
  content: "\f104";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  left: 15px;
}
.ui-datepicker .ui-datepicker-next::before {
  content: "\f105";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  right: 15px;
}
.ui-datepicker .ui-datepicker-prev:hover::before,
.ui-datepicker .ui-datepicker-next:hover::before {
  color: #fff;
}
.ui-datepicker .ui-datepicker-prev.ui-state-hover,
.ui-datepicker .ui-datepicker-next.ui-state-hover {
  border: 0;
  background: transparent;
  font-weight: 600;
}
.ui-datepicker table {
  width: 100%;
}
.ui-datepicker thead {
  background-color: #1d3557;
}
.ui-datepicker .ui-datepicker-calendar th,
.ui-datepicker .ui-datepicker-calendar td {
  width: 25px;
  height: 30px;
  line-height: 20px;
  text-align: center;
  font-size: 1em;
  color: #666;
  padding: 5px;
}
.ui-datepicker .ui-datepicker-calendar th span {
  color: #f1faee;
}
.ui-datepicker .ui-datepicker-calendar td {
  background: #fff;
  vertical-align: middle;
}
.ui-datepicker .ui-datepicker-calendar td a {
  color: #626262;
  text-align: center;
  border: 0;
  border-radius: 3px;
  background: transparent;
  padding: 5px;
}
.ui-datepicker .ui-datepicker-calendar td a:hover {
  text-decoration: none;
  color: #f1faee;
  background: #e63946;
}
.ui-datepicker .ui-datepicker-calendar thead th:first-child {
  color: #626262 !important;
}
.ui-datepicker .ui-datepicker-calendar .ui-datepicker-week-end {
  color: #626262;
}
.ui-datepicker .ui-datepicker-calendar .ui-datepicker-week-end a {
  color: #626262;
}
.ui-datepicker .ui-datepicker-calendar tbody tr td:first-child a {
  color: #f28482 !important;
}
.ui-datepicker .ui-datepicker-today a {
  background: #a8dadc !important;
  color: #fff !important;
}
.ui-datepicker .ui-datepicker-current-day a {
  background: #e63946 !important;
  color: #fff !important;
}
.ui-datepicker .ui-datepicker-calendar a.first-active,
.ui-datepicker .ui-datepicker-calendar a.sec-active {
  border: 1px solid #003eff;
  background: #007fff;
  font-weight: normal;
  color: #fff;
}
.ui-datepicker .ui-datepicker-buttonpane {
  border: 0;
  background: #457b9d;
  display: flex;
  justify-content: space-around;
  padding: 8px 0;
}
.ui-datepicker .ui-datepicker-buttonpane button {
  font-family: "notokr-regular", sans-serif;
  font-size: 0.8em;
  font-weight: normal;
  border: 0;
  border-radius: 5px;
  color: #222;
  background-color: #a8dadc;
  opacity: 1;
  padding: 3px 15px;
}
.ui-datepicker .ui-datepicker-buttonpane button:hover {
  background: #f1faee;
}

/* dateRangePicker 스타일 */
.datepicker.form-control {
  cursor: pointer;
}

.daterangepicker {
  padding: 10px;
  margin-top: 15px;
  border: 1px solid #efefef;
  box-shadow: 0 12px 26px 0 rgba(178, 178, 178, 0.13);
  border-radius: 2px;
}
.daterangepicker:before {
  border-bottom: 7px solid #efefef;
  z-index: 9;
}
.daterangepicker .input-mini {
  width: 100%;
  height: 42px;
  border: 1px solid #efefef;
  border-radius: 0px;
  color: #a4a4a4;
  line-height: 42px;
  display: block;
  margin: 0 0 5px 0;
  padding: 0 6px 0 28px;
}
.daterangepicker .input-mini.active {
  border: 1px solid #e3e3e3;
  border-radius: 0px;
}
.daterangepicker .daterangepicker_input i {
  position: absolute;
  left: 8px;
  top: 14px;
  font-size: 0.9em;
}
.daterangepicker table {
  font-size: 14px;
}
.daterangepicker .ranges {
  display: none;
}
.daterangepicker .calendar-title {
  margin: 5px 0;
  color: #b5bec4;
  font-weight: 500;
  font-size: 14px;
  text-transform: uppercase;
}
.daterangepicker td.start-date, .daterangepicker td.end-date, .daterangepicker td.available:hover {
  background: #d8ba8e !important;
  color: #fff;
}
.daterangepicker td.in-range {
  background: #edcb9a;
  color: #fff;
}
.daterangepicker .calendar-table td.disabled, .daterangepicker option.disabled {
  color: #e3e3e3;
}
.daterangepicker .calendar th {
  font-weight: 500;
  text-transform: uppercase;
  line-height: 40px;
}
.daterangepicker td.start-date {
  border-radius: 20px 0 0 20px;
}
.daterangepicker td.end-date {
  border-radius: 0 20px 20px 0;
}

/* Flatpickr 스타일 - Korea 스타일로 변경 */
.flatpickr-calendar {
  background: 0 0;
  opacity: 0;
  display: none;
  text-align: center;
  visibility: hidden;
  padding: 0;
  animation: none;
  direction: ltr;
  border: 0;
  font-size: 14px;
  line-height: 24px;
  border-radius: 5px;
  position: absolute;
  box-sizing: border-box;
  width: 307.875px;
  touch-action: manipulation;
  background: #fff;
  box-shadow: 1px 0 0 #eff2f7, -1px 0 0 #eff2f7, 0 1px 0 #eff2f7, 0 -1px 0 #eff2f7, 0 3px 13px rgba(0, 0, 0, 0.08);
}
.flatpickr-calendar.inline .flatpickr-rContainer {
  display: block;
  width: 100%;
}
.flatpickr-calendar.inline .flatpickr-rContainer .flatpickr-days {
  width: 100%;
  border: 1px solid #eff2f7;
  border-top: none;
  border-radius: 0 0 5px 5px;
}
.flatpickr-calendar.inline .flatpickr-rContainer .flatpickr-days .dayContainer {
  width: 100%;
  max-width: 100%;
  min-width: 100%;
}
.flatpickr-calendar.inline .flatpickr-rContainer .flatpickr-days .dayContainer .flatpickr-day {
  max-width: 100%;
  border-radius: 4px;
}
.flatpickr-calendar::after, .flatpickr-calendar::before {
  position: absolute;
  left: 22px;
  width: 0;
  height: 0;
  display: block;
  pointer-events: none;
  border: solid transparent;
  content: "";
}
.flatpickr-calendar.arrowRight::after, .flatpickr-calendar.arrowRight::before, .flatpickr-calendar.rightMost::after, .flatpickr-calendar.rightMost::before {
  left: auto;
  right: 22px;
}
.flatpickr-calendar.arrowCenter::after, .flatpickr-calendar.arrowCenter::before {
  left: 50%;
  right: 50%;
}
.flatpickr-calendar::before {
  border-width: 5px;
  margin: 0 -5px;
}
.flatpickr-calendar::after {
  border-width: 4px;
  margin: 0 -4px;
}
.flatpickr-calendar.arrowTop::after, .flatpickr-calendar.arrowTop::before {
  bottom: 100%;
}
.flatpickr-calendar.arrowTop::before {
  border-bottom-color: #438eff;
}
.flatpickr-calendar.arrowTop::after {
  border-bottom-color: #438eff;
}
.flatpickr-calendar.arrowBottom::after, .flatpickr-calendar.arrowBottom::before {
  top: 100%;
}
.flatpickr-calendar.arrowBottom::before {
  border-top-color: #438eff;
}
.flatpickr-calendar.arrowBottom::after {
  border-top-color: #438eff;
}

.flatpickr-months {
  display: flex;
  background-color: #438eff;
  border-radius: 5px 5px 0 0;
}
.flatpickr-months .flatpickr-month {
  background: 0 0;
  color: rgba(255, 255, 255, 0.9);
  fill: rgba(255, 255, 255, 0.9);
}
.flatpickr-months .flatpickr-next-month,
.flatpickr-months .flatpickr-prev-month {
  color: rgba(255, 255, 255, 0.9);
  fill: rgba(255, 255, 255, 0.9);
}
.flatpickr-months .flatpickr-next-month.flatpickr-disabled, .flatpickr-months .flatpickr-prev-month.flatpickr-disabled {
  display: none;
}
.flatpickr-months .flatpickr-next-month i,
.flatpickr-months .flatpickr-prev-month i {
  position: relative;
}
.flatpickr-months .flatpickr-next-month:hover,
.flatpickr-months .flatpickr-prev-month:hover {
  color: #959ea9;
}
.flatpickr-months .flatpickr-next-month:hover svg,
.flatpickr-months .flatpickr-prev-month:hover svg {
  fill: rgba(255, 255, 255, 0.9);
}
.flatpickr-months .flatpickr-next-month svg,
.flatpickr-months .flatpickr-prev-month svg {
  width: 14px;
  height: 14px;
}
.flatpickr-months .flatpickr-next-month svg path,
.flatpickr-months .flatpickr-prev-month svg path {
  transition: fill 0.1s;
  fill: inherit;
}

.flatpickr-current-month {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  font-size: 100%;
  line-height: inherit;
  font-weight: 300;
  color: inherit;
}
.flatpickr-current-month input.cur-year {
  font-weight: 600;
}
.flatpickr-current-month input.cur-year:focus {
  outline: 0;
}
.flatpickr-current-month input.cur-year[disabled],
.flatpickr-current-month input.cur-year[disabled]:hover {
  font-size: 100%;
  color: rgba(255, 255, 255, 0.9);
  background: 0 0;
  pointer-events: none;
}
.flatpickr-current-month .numInputWrapper {
  order: 1;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
  font-weight: 600;
  order: 2;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:active, .flatpickr-current-month .flatpickr-monthDropdown-months:focus {
  outline: 0;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background-color: transparent;
}
.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month {
  background-color: transparent;
  outline: 0;
  padding: 0;
  color: rgba(0, 0, 0, 0.8);
}

.flatpickr-weekdays {
  width: 100%;
  height: 36px;
  background-color: #438eff;
  text-align: center;
  overflow: hidden;
  border-bottom: 1px solid #eff2f7;
}

span.flatpickr-weekday {
  cursor: default;
  font-size: 90%;
  background: #438eff;
  color: #fff;
  font-weight: 500;
}

.flatpickr-day {
  background: 0 0;
  border: 1px solid transparent;
  border-radius: 150px;
  color: #141821;
  font-weight: 400;
}
.flatpickr-day:focus, .flatpickr-day:hover {
  background-color: rgba(239, 242, 247, 0.7);
}
.flatpickr-day.inRange, .flatpickr-day.nextMonthDay.inRange, .flatpickr-day.nextMonthDay.today.inRange, .flatpickr-day.nextMonthDay:focus, .flatpickr-day.nextMonthDay:hover, .flatpickr-day.prevMonthDay.inRange, .flatpickr-day.prevMonthDay.today.inRange, .flatpickr-day.prevMonthDay:focus, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.today.inRange, .flatpickr-day:focus, .flatpickr-day:hover {
  cursor: pointer;
  outline: 0;
  background-color: #eff2f7;
  border-color: #eff2f7;
}
.flatpickr-day.today {
  border-color: #438eff;
  background-color: rgba(67, 142, 255, 0.1);
}
.flatpickr-day.today:focus, .flatpickr-day.today:hover {
  border-color: #438eff;
  background-color: rgba(67, 142, 255, 0.15);
  color: #141821;
}
.flatpickr-day.endRange, .flatpickr-day.endRange.inRange, .flatpickr-day.endRange.nextMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.endRange:focus, .flatpickr-day.endRange:hover, .flatpickr-day.selected, .flatpickr-day.selected.inRange, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.selected:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange, .flatpickr-day.startRange.inRange, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.startRange:focus, .flatpickr-day.startRange:hover {
  background: #438eff;
  color: #fff;
  border-color: #438eff;
}
.flatpickr-day.endRange.startRange, .flatpickr-day.selected.startRange, .flatpickr-day.startRange.startRange {
  border-radius: 50px 0 0 50px;
}
.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)) {
  box-shadow: -10px 0 0 #438eff;
}
.flatpickr-day.endRange.startRange .endRange, .flatpickr-day.selected.startRange .endRange, .flatpickr-day.startRange.startRange .endRange {
  border-radius: 50px;
}
.flatpickr-day.endRange.endRange, .flatpickr-day.selected.endRange, .flatpickr-day.startRange.endRange {
  border-radius: 0 50px 50px 0;
}
.flatpickr-day.inRange {
  border-radius: 0;
  box-shadow: -5px 0 0 #eff2f7, 5px 0 0 #eff2f7;
}
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover {
  color: rgba(20, 24, 33, 0.3);
  background: 0 0;
  border-color: transparent;
  cursor: default;
}
.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover {
  cursor: not-allowed;
  color: rgba(20, 24, 33, 0.3);
}
.flatpickr-day.week.selected {
  border-radius: 0;
  box-shadow: -5px 0 0 #438eff, 5px 0 0 #438eff;
}
.flatpickr-day.hidden {
  visibility: hidden;
}

.rangremode .flatpickr-day {
  margin-top: 1px;
}