@charset "UTF-8";
:root,
[data-bs-theme=light] {
  --breakpoint-sm: 360px;
  --breakpoint-md: 1024px;
  --breakpoint-lg: 1280px;
  --side-padding: 1.25rem;
  --logo-color: #595857;
  --header-h: 64px;
  --header-lg-h: 144px;
  --footer-bg: var(--bs-gray-100);
  --table-font-size: 0.9375rem;
  --table-color: var(--bs-gray-800);
  --table-bg: var(--bs-body-bg);
  --table-border-color: var(--bs-gray-200);
  --table-border-top-color: var(--bs-gray-700);
  --table-th-bg: var(--bs-gray-100);
  --table-hover-color: var(--bs-table-hover-color);
  --table-hover-bg: var(--bs-table-hover-bg);
  --container-main-padding-y: 3rem;
  --container-main-padding-x: var(--side-padding);
  --loader-color: #0064F0;
  --loader-color-rgb: 0, 100, 240;
}
@media (min-width: 1024px) {
  :root,
  [data-bs-theme=light] {
    --side-padding: 2.25rem;
  }
}

[data-bs-theme=dark] {
  color-scheme: dark;
  --logo-color: #595857;
  --footer-bg: var(--bs-gray-100);
  --table-color: var(--bs-gray-800);
  --table-bg: var(--bs-body-bg);
  --table-border-color: var(--bs-gray-200);
  --table-border-top-color: var(--bs-gray-700);
  --table-th-bg: var(--bs-white);
  --table-hover-color: var(--bs-table-hover-color);
  --table-hover-bg: var(--bs-table-hover-bg);
  --loader-color: #0064F0;
  --loader-color-rgb: 0, 100, 240;
  --swiper-pagination-bullet-inactive-color: var(--bs-black);
  --swiper-pagination-bullet-inactive-opacity: .5;
}

html,
body {
  min-width: 360px;
}

body {
  background-color: var(--bs-gray-100);
}
@media (max-width: 1023px) {
  body:has(#gnb.show) {
    height: 100vh;
    overflow: hidden;
  }
}

.wrap {
  overflow: hidden;
  padding-top: var(--header-h);
  background-color: var(--bs-body-bg);
}
@media (min-width: 1024px) {
  .wrap {
    padding-top: var(--header-lg-h);
  }
}

.container-main {
  width: 100%;
  padding: var(--container-main-padding-y) var(--container-main-padding-x);
  background-color: var(--bs-body-bg);
}
.container-main:has(> .location-wrap) {
  padding-top: 1.5rem;
}
@media (min-width: 1024px) {
  .container-main {
    --container-main-padding-y: 4.375rem;
    max-width: unset;
  }
}
@media (max-width: 1023px) {
  .container-main-fluid-sm {
    margin-left: calc(var(--container-main-padding-x) * -1);
    margin-right: calc(var(--container-main-padding-x) * -1);
  }
}
.container-main > [class*=container] {
  padding-left: 0;
  padding-right: 0;
}

.main-px-0 {
  padding-left: 0;
  padding-right: 0;
}

.main-px {
  padding-left: var(--container-main-padding-x);
  padding-right: var(--container-main-padding-x);
}

@media (min-width: 1024px) {
  .main-px-md-0 {
    padding-left: 0;
    padding-right: 0;
  }
  .main-px-md {
    padding-left: var(--container-main-padding-x);
    padding-right: var(--container-main-padding-x);
  }
}
@media (min-width: 1280px) {
  .main-px-lg-0 {
    padding-left: 0;
    padding-right: 0;
  }
  .main-px-lg {
    padding-left: var(--container-main-padding-x);
    padding-right: var(--container-main-padding-x);
  }
}
.location-wrap {
  margin-bottom: 3.75rem;
}
.location-wrap .icon-home {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.location-wrap .icon-home {
  --icon-box-width: 16px;
  --icon-box-height: 16px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.location-wrap .icon-home::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_home2.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}
[data-bs-theme=dark] .location-wrap .icon-home::before {
  filter: brightness(0) invert(1);
}
.location-wrap .breadcrumb {
  margin-bottom: 0;
}
.location-wrap .breadcrumb-item {
  display: flex;
  align-items: center;
}
.location-wrap .breadcrumb-item:not(:first-child) > a {
  color: var(--bs-gray-700);
  font-size: 0.8125rem;
  line-height: 1rem;
  text-decoration: none;
}
.location-wrap .breadcrumb-item:not(:first-child) > a:hover, .location-wrap .breadcrumb-item:not(:first-child) > a.show {
  color: var(--bs-gray-800);
}
.location-wrap .breadcrumb-item:not(:first-child) > a:hover::after, .location-wrap .breadcrumb-item:not(:first-child) > a.show::after {
  color: var(--bs-gray-700);
}
.location-wrap .breadcrumb-item:nth-child(3) > a::after {
  content: "\f13a";
  color: var(--bs-gray-400);
  font-size: 1rem;
}
.location-wrap .help-btn-box .btn-help {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.125rem;
}
.location-wrap .help-btn-box .btn-help i {
  --bi-color: inherit;
}

.page-title, .content-title {
  --title-color: var(--bs-gray-800);
  --title-font-size: 2rem;
  --title-font-weight: 700;
  --title-line-height: 1;
  --desc-color: var(--bs-gray-600);
  --title-margin-bottom: 2.25rem;
  line-height: var(--title-line-height);
  margin-bottom: var(--title-margin-bottom);
}
.page-title, .content-title,
.page-title .title,
.content-title .title {
  color: var(--title-color);
  font-size: var(--title-font-size);
  font-weight: var(--title-font-weight);
}
.page-title .title, .content-title .title {
  margin-bottom: 0;
}
.page-title .desc, .content-title .desc {
  margin-top: 0.25rem;
  color: var(--desc-color);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5rem;
}
@media (max-width: 1023px) {
  .container-main .page-title:not(.content-title, .section-main-title), .container-main .content-title:not(.content-title, .section-main-title) {
    display: none;
  }
}

.content-title {
  --title-margin-bottom: 1rem;
  --title-font-size: 1.5rem;
}
@media (max-width: 1023px) {
  .content-title {
    --title-font-size: 1.25rem;
    display: block;
  }
}

.btn-bottom-group {
  --btn-gap: .625rem;
  margin-top: 2.25rem;
  gap: var(--btn-gap);
}
.btn-bottom-group > div {
  display: flex;
  flex: 1;
  gap: var(--btn-gap);
}
.btn-bottom-group:has(.btn-group-left + .btn-group-right .btn:only-child) {
  flex-direction: row !important;
}
.btn-bottom-group .btn-group-right:only-child {
  flex-direction: row !important;
}
.btn-bottom-group .btn-group-right:only-child:has(.btn:nth-child(3)) {
  flex-direction: column !important;
}
@media (min-width: 1024px) {
  .btn-bottom-group > div {
    flex: none;
  }
  .btn-bottom-group .btn-group-right {
    margin-left: auto;
  }
}
.btn-bottom-group + .section {
  --section-lg-margin-top: 2.25rem;
  margin-top: var(--section-lg-margin-top);
}
@media (min-width: 1024px) {
  .btn-bottom-group + .section {
    --section-lg-margin-top: 3.75rem;
  }
}

.search-area.panel {
  --panel-padding-x: 0;
  row-gap: 1.5rem;
}
.search-area .search-btn-group {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
@media (min-width: 1024px) {
  .search-area .search-btn-group {
    padding-left: 2.25rem;
    padding-right: 2.25rem;
    flex-wrap: wrap;
  }
}
.search-area .pc-title {
  padding-left: 2.25rem;
  padding-top: 0.75rem;
  white-space: nowrap;
}

.section + .section {
  margin-top: 2.25rem;
}

.section-lg + .section-lg {
  margin-top: 3.75rem;
}

.grid-table + .tab-wrap {
  margin-top: 3.75rem;
}
.tab-wrap .content-title {
  --title-margin-bottom: 1rem;
}
.tab-wrap .table {
  margin-bottom: 0;
}

.tab-btns {
  --nav-link-height: 48px;
}
@media (max-width: 1023px) {
  .tab-btns {
    overflow-x: auto;
  }
}
.tab-btns .nav-link {
  height: var(--nav-link-height);
}
.tab-btns.nav-pills {
  margin-bottom: 1.875rem;
}
.tab-btns.nav-pills:not(.nav-fill) {
  gap: 0.75rem;
}
.tab-btns.nav-fill {
  border-top: 1px solid var(--bs-nav-pills-border-color);
  border-bottom: 1px solid var(--bs-nav-pills-border-color);
  border-radius: var(--bs-nav-pills-border-radius);
}
.tab-btns.nav-fill .nav-item .nav-link {
  margin: -0.0625rem 0;
  border-top-color: transparent;
  border-bottom-color: transparent;
  border-right-color: transparent;
}
.tab-btns.nav-fill .nav-item .nav-link:not(.active) {
  border-radius: 0;
}
.tab-btns.nav-fill .nav-item:has(.active) + .nav-item .nav-link:not(.active) {
  border-left-color: transparent;
}
.tab-btns.nav-fill .nav-item:first-child .nav-link:not(.active) {
  border-radius: var(--bs-nav-pills-border-radius) 0 0 var(--bs-nav-pills-border-radius);
}
.tab-btns.nav-fill .nav-item:last-child .nav-link:not(.active) {
  border-radius: 0 var(--bs-nav-pills-border-radius) var(--bs-nav-pills-border-radius) 0;
  border-right-color: var(--bs-nav-pills-border-color);
}
.tab-btns.nav-rounded {
  --bs-nav-pills-border-radius: 50rem;
}
.tab-btns.nav-outline {
  --bs-nav-pills-color: var(--bs-gray-800);
  --bs-nav-pills-border-color: var(--bs-gray-200);
  --bs-nav-pills-bg: transparent;
  --bs-nav-pills-link-active-color: var(--bs-primary);
  --bs-nav-pills-link-active-border-color: var(--bs-primary);
  --bs-nav-pills-link-active-bg: var(--bs-nav-pills-bg);
  --bs-nav-pills-link-padding-x: 1.5rem;
}
.tab-btns.nav-outline .nav-link {
  font-weight: 500;
  background: var(--bs-nav-pills-bg);
}
.tab-btns.nav.tab-underline {
  flex-wrap: nowrap;
  gap: 0;
  margin-bottom: 1.25rem;
  margin-left: calc(var(--bs-gutter-x) * -0.5);
  margin-right: calc(var(--bs-gutter-x) * -0.5);
  border-bottom: 1px solid var(--bs-border-color);
}
.tab-btns.nav.tab-underline .nav-item {
  flex: 1 1 auto;
}
.tab-btns.nav.tab-underline .nav-link {
  width: 100%;
  white-space: nowrap;
  padding-left: calc(var(--bs-nav-link-padding-x) * 0.5);
  padding-right: calc(var(--bs-nav-link-padding-x) * 0.5);
}
.tab-btns:not(.tab-underline) .nav-link:not(:focus, :focus-visible) {
  box-shadow: 0 0.375rem 0.5rem rgba(32, 36, 84, 0.08);
}
.tab-btns.nav-item-lg {
  --nav-link-height: 56px;
}

.page-link-list {
  --page-link-padding-x: 1.25rem;
  --page-link-margin-top: 2.25rem;
  padding: 0 var(--page-link-padding-x);
  margin-top: var(--page-link-margin-top);
  border-radius: var(--bs-border-radius-xl);
  border: 1px solid var(--bs-border-color);
}
.page-link-list .page-link-item {
  padding: 0.6875rem 0;
}
.page-link-list .page-link-item + .page-link-item {
  border-top: 1px solid var(--bs-border-color);
}
.page-link-list .page-link-subtit {
  color: var(--bs-gray-600);
  font-weight: 600;
  white-space: nowrap;
}
.page-link-list .vr {
  --vr-margin-left: .75rem;
  --vr-margin-right: 0;
  --prefixvr-h: .75rem;
  margin: 0 var(--vr-margin-right) 0 var(--vr-margin-left);
}
@media (min-width: 1280px) {
  .page-link-list {
    --page-link-padding-x: 2.25rem;
    --page-link-margin-top: 4.375rem;
  }
  .page-link-list .vr {
    --vr-margin-left: 1.5rem;
    --vr-margin-right: .8125rem;
  }
}

.sample-code {
  height: 25rem;
  padding: 0 0.5rem 0 0;
  overflow-y: auto;
  font-size: 1rem;
  line-height: 1.5rem;
  word-break: break-word;
}
.sample-code.h-200 {
  height: 12.5rem;
}

.scrollbar::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}

.scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--bs-gray-400);
  border-radius: 0.3125rem;
}

.scrollbar::-webkit-scrollbar-track {
  background-color: transparent;
}

label:has(> input:focus, > input:focus-visible) {
  box-shadow: var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) var(--bs-focus-ring-blur, 0) var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}

.editor-wrap {
  width: 100%;
  min-height: 500px;
  height: 500px;
}
.editor-wrap textarea {
  width: 100%;
  height: 100%;
  border: 0;
}

.se-contents,
.se-contents p,
.se-contents p span {
  font-family: var(--bs-font-sans-serif) !important;
}

.info-text {
  color: var(--bs-gray-600);
}

.form-file .form-file-input:focus-visible + .btn {
  background-color: var(--bs-btn-hover-bg);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), 0.5);
}

.bbs-view {
  --bbs-margin-top: 2rem;
  --bbs-title-padding-right: 0;
}
.bbs-view .bbs-detail {
  margin-top: var(--bbs-margin);
}
.bbs-view .bbs-title {
  font-size: 1.5rem;
  word-break: break-all;
}
.bbs-view .bbs-title:has(+ .badge-group) {
  padding-right: var(--bbs-title-padding-right);
}
.bbs-view .bbs-contents {
  font-size: 1.125rem;
}
.bbs-view .bbs-contents:not(:has(.se-contents)),
.bbs-view .bbs-contents .se-contents {
  width: 100%;
  max-width: 100%;
  overflow: auto;
  padding-bottom: 0.5rem;
}
.bbs-view .bbs-contents:not(:has(.se-contents))::-webkit-scrollbar,
.bbs-view .bbs-contents .se-contents::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.bbs-view .bbs-contents:not(:has(.se-contents))::-webkit-scrollbar-thumb,
.bbs-view .bbs-contents .se-contents::-webkit-scrollbar-thumb {
  background-color: var(--bs-gray-300);
}
.bbs-view .bbs-contents:not(:has(.se-contents))::-webkit-scrollbar-track,
.bbs-view .bbs-contents .se-contents::-webkit-scrollbar-track {
  background-color: transparent;
}
@media (max-width: 1023px) {
  .bbs-view .badge-group {
    position: unset !important;
  }
}
@media (min-width: 1024px) {
  .bbs-view {
    --bbs-margin: 2.25rem;
    --bbs-title-padding-right: 14.375rem;
  }
  .bbs-view li {
    row-gap: 0.375rem;
  }
}

.bbs-subtext {
  --bbs-subtext-width: 100%;
  --bbs-subtext-gap: .625rem;
  padding: 0;
  margin-bottom: 0.75rem;
  gap: var(--bbs-subtext-gap);
}
.bbs-subtext li {
  width: var(--bbs-subtext-width);
  gap: var(--bbs-subtext-gap);
  list-style-type: none;
}
@media (min-width: 1024px) {
  .bbs-subtext {
    --bbs-subtext-width: auto;
  }
  .bbs-subtext .vr {
    height: 0.75rem;
  }
}

hr.hr {
  --hr-margin-y: 2rem;
  margin: var(--hr-margin-y) 0;
  border-color: var(--bs-gray-400);
}
@media (min-width: 1280px) {
  hr.hr {
    --hr-margin-y: 2.25rem;
  }
}

.gray-box {
  --gray-box-bg: var(--bs-gray-110);
  --gray-box-radius: 1rem;
  background-color: var(--gray-box-bg);
  border-radius: var(--gray-box-radius);
}

.blue-box {
  --blue-box-bg: var(--bs-blue-110);
  --blue-padding-x: 2.5rem;
  --blue-padding-y: 1rem;
  --blue-margin-bottom: 2.25rem;
  --blue-box-radius: 1rem;
  padding: var(--blue-padding-y) var(--blue-padding-x);
  margin-bottom: var(--blue-margin-bottom);
  background-color: #e7f5ff;
  border-radius: var(--blue-box-radius);
}
@media (min-width: 1024px) {
  .blue-box {
    --blue-padding-x: 1.5rem;
    --blue-margin-bottom: 3.75rem;
  }
}

.comment-box {
  --gray-box-padding-x: 1.5rem;
  --gray-box-padding-y: 1.25rem;
  --comment-box-margin-top: 2.25rem;
  padding: var(--gray-box-padding-y) var(--gray-box-padding-x);
  margin-top: var(--comment-box-margin-top);
}
.comment-box .info-text {
  height: 1rem;
  margin-top: 0.375rem;
  font-size: 0.875rem;
}
@media (min-width: 1280px) {
  .comment-box {
    --gray-box-padding-y: 2.25rem;
    --gray-box-padding-x: 2.25rem;
    --comment-box-margin-top: 3.75rem;
  }
  .comment-box .flex-grow-1 {
    align-items: flex-start;
  }
  .comment-box .btn-comment-submit {
    flex-shrink: 0;
    width: 4.75rem;
    height: 5rem;
    margin-bottom: 1.375rem;
  }
}

.comment-list {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.comment-list li:last-child hr {
  display: none;
}
.comment-list .comment-contetns {
  margin: 0.5rem 0 0.75rem;
  color: var(--bs-gray-700);
}
.comment-list .comment-contetns .form-control[contenteditable=true] {
  height: 5rem;
  overflow-y: auto;
}
.comment-list .vr {
  height: 0.75rem;
  margin: 0 0.625rem;
  opacity: 0.1;
}
.comment-list hr {
  opacity: 0.1;
}
.comment-list .btn-box {
  margin-top: 0.75rem;
}
@media (max-width: 1279px) {
  .comment-list .btn-box:has(.info-text) {
    position: relative;
    padding-top: 1.5rem;
  }
  .comment-list .btn-box:has(.info-text) .info-text {
    position: absolute;
    top: 0;
    right: 0;
  }
}
.comment-list + .comment-more {
  margin-top: 2rem;
}

.survey-title {
  font-size: 1.5rem;
}

.survey-group {
  --survey-item-gap: 0.75rem;
  gap: var(--survey-item-gap);
  margin-bottom: var(--survey-item-gap);
}
.survey-group label.btn-form-check.btn-icon {
  --bs-btn-padding-y: .6875rem;
  --bs-btn-padding-x: 1.25rem;
  --bs-btn-border-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
}
.survey-group label.btn-form-check.btn-icon .form-check-label {
  width: 5rem;
  line-height: 32px;
  margin-left: 0.375rem;
  display: inline-block;
}
.survey-group label.btn-form-check.btn-icon:has(:checked) {
  border-color: var(--bs-gray-navy);
}
@media (min-width: 1280px) {
  .survey-group {
    margin-bottom: 0;
  }
}

.scroll-x-group {
  --scroll-group-margin-top: .25rem;
  --scroll-group-margin-bottom: 0;
  --scroll-group-margin-x: -1.25rem;
  --scroll-group-padding: 1.25rem;
  margin: var(--scroll-group-margin-top) var(--scroll-group-margin-x) var(--scroll-group-margin-bottom);
}
.scroll-x-group .overflow-x-auto {
  gap: 0.75rem;
  padding: 0 var(--scroll-group-padding);
}
.scroll-x-group .overflow-x-auto:not(.scrollbar)::-webkit-scrollbar {
  display: none;
}
.scroll-x-group .w-max {
  min-width: 100%;
  width: -moz-max-content;
  width: max-content;
}
.scroll-x-group .btn.rounded-5.active {
  font-weight: 700;
}
@media (min-width: 1280px) {
  .scroll-x-group {
    --scroll-group-padding: 0;
    --scroll-group-margin-x: 0;
    --scroll-group-margin-bottom: 1.5rem;
  }
}

.icon-favorite-group .icon-favorite {
  --bs-btn-padding-x: .1875rem --bs-btn-padding-y: .1875rem ;
}

.vr-list .vr {
  margin: 0 0.125rem 0 0.375rem;
  --bs-vr-h: .75rem;
}

.grid-table th {
  white-space: nowrap;
}
.grid-table td {
  vertical-align: middle;
}

.badge-primary {
  --bs-badge-color: var(--bs-primary);
  --bs-badge-bg: var(--bs-light);
}
.badge-secondary {
  --bs-badge-color: var(--bs-secondary);
  --bs-badge-bg: var(--bs-light);
}
.badge-secondary-fill {
  --bs-badge-color: var(--bs-white);
  --bs-badge-bg: var(--bs-secondary);
}
.badge-gray {
  --bs-badge-color: var(--bs-gray-700);
  --bs-badge-bg: var(--bs-light);
}
.badge-gray-outline {
  --bs-badge-color: var(--bs-gray-600);
  --bs-badge-bg: transparent;
  border: 1px solid var(--bs-gray-400);
}
.badge-dark-outline {
  --bs-badge-color: var(--bs-gray-700);
  --bs-badge-bg: transparent;
  border: 1px solid var(--bs-gray-700);
}
.badge-blue {
  --bs-badge-color: var(--bs-primary);
  --bs-badge-bg: #e8f4ff;
}
.badge-blue-fill {
  --bs-badge-color: var(--bs-white);
  --bs-badge-bg: var(--bs-blue);
}
.badge-blue-outline {
  --bs-badge-color: var(--bs-primary);
  --bs-badge-bg: transparent;
  border: 1px solid var(--bs-primary);
}
.badge-red {
  --bs-badge-color: var(--bs-red);
  --bs-badge-bg: #fceded;
}
.badge-red-fill {
  --bs-badge-color: var(--bs-white);
  --bs-badge-bg: var(--bs-red);
}
.badge-green {
  --bs-badge-color: var(--bs-green);
  --bs-badge-bg: #f1f7f2;
}
.badge-green-fill {
  --bs-badge-color: var(--bs-white);
  --bs-badge-bg: var(--bs-green);
}
.badge-purple {
  --bs-badge-color: var(--bs-purple);
  --bs-badge-bg: #f7f5fc;
}
.badge-purple-fill {
  --bs-badge-color: var(--bs-white);
  --bs-badge-bg: var(--bs-purple);
}
.badge-tag {
  --bs-badge-color: var(--bs-gray-600);
  --bs-badge-font-size: .9375rem;
  --bs-badge-padding-x: 0;
  --bs-badge-padding-y: .125rem;
  white-space: nowrap;
  line-height: 1.25rem;
  border: 0;
}
.badge-tag-fill {
  --bs-badge-color: var(--bs-white);
  --bs-badge-bg: #e0e0e0;
}
.badge-tag-fill-invert {
  --bs-badge-color: var(--bs-gray-700);
  --bs-badge-bg: #ebebeb;
}
.badge-sm {
  --bs-badge-padding-x: .5rem;
  --bs-badge-padding-y: .1875rem;
  --bs-badge-font-size: .9375rem;
}
.badge-lg {
  --bs-badge-padding-x: .0069rem;
  --bs-badge-padding-y: .75rem;
  --bs-badge-border-radius: 1.25rem;
  min-width: 4.625rem;
}
.badge-xl {
  --bs-badge-padding-x: 1.1875rem;
  --bs-badge-padding-y: .75rem;
  --bs-badge-border-radius: 1.75rem;
  --bs-badge-font-size: 1rem;
  display: inline-flex;
  align-items: center;
  margin: 0 0.25rem;
}
@media (min-width: 1280) {
  .badge-xl {
    --bs-badge-padding-y: 1.1875rem;
  }
}
.badge-group {
  gap: 0.375rem;
}

.panel {
  --panel-padding-y: 1.25rem;
  --panel-padding-x: 1.25rem;
  --panel-bg: transparent;
  --panel-border-width: var(--bs-border-width);
  --panel-border-style: var(--bs-border-style);
  --panel-border-color: transparent;
  --panel-border-radius: calc(var(--bs-border-radius) * 2);
  --panel-box-shadow: unset;
  padding: var(--panel-padding-y) var(--panel-padding-x);
  border: var(--panel-border-width) var(--panel-border-style) var(--panel-border-color);
  border-radius: var(--panel-border-radius);
  background: var(--panel-bg);
  box-shadow: var(--panel-box-shadow);
}
@media (min-width: 1280px) {
  .panel {
    --panel-padding-y: 1.5rem;
    --panel-padding-x: 2.25rem;
  }
}

.panel-gray {
  --panel-padding-y: 1.5rem;
  --panel-padding-x: 2.25rem;
  --panel-border-radius: var(--bs-border-radius-xl);
  --panel-bg: var(--bs-gray-110);
  padding-right: 1rem;
}
@media (max-width: 1279px) {
  .panel-gray {
    --panel-padding-y: 1.25rem;
    --panel-padding-x: 1.25rem;
    padding-right: var(--panel-padding-x);
  }
}
.panel + .panel {
  margin-top: 1rem;
}
.panel.panel-outline {
  --panel-padding-y: 1.5rem;
  --panel-border-color: var(--bs-gray-200);
}
@media (min-width: 1024px) {
  .panel.panel-outline {
    --panel-padding-y: 2.25rem;
    --panel-padding-x: 2.25rem;
  }
}
.panel.panel-outline-sm {
  --panel-padding-y: 1.25rem;
}
@media (min-width: 1024px) {
  .panel.panel-outline-sm {
    --panel-padding-y: 2rem;
  }
}
@media (min-width: 1024px) {
  .panel.panel-outline-md {
    --panel-padding-y: 2.25rem;
    --panel-padding-x: 2.25rem;
    --panel-border-color: var(--bs-gray-200);
  }
}

.btn-group.switch {
  --switch-group-bg: var(--bs-gray-100);
  --switch-group-border-color: var(--bs-gray-200);
  --switch-btn-color: var(--bs-gray-700);
  --switch-btn-bg: var(--switch-group-bg);
  --switch-btn-radius: var(--bs-border-radius-pill);
  --switch-btn-active-color: var(--bs-white);
  --switch-btn-active-bg: var(--bs-primary);
  --switch-btn-active-width: 0;
  display: flex;
  position: relative;
  border: 1px solid var(--switch-group-border-color);
  border-radius: var(--switch-btn-radius);
  background: var(--switch-group-bg);
}
.btn-group.switch::after {
  content: "";
  width: var(--switch-btn-active-width);
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: var(--switch-btn-radius);
  background: var(--switch-btn-active-bg);
  transition: left 0.2s, width 0.2s;
}
.btn-group.switch:has(.active:not(:first-child))::after {
  left: calc(100% - var(--switch-btn-active-width));
}
.btn-group.switch .btn-switch {
  --bs-btn-padding-x: 1rem;
  --bs-btn-color: var(--switch-btn-color);
  --bs-btn-border-color: transparent;
  --bs-btn-bg: transparent;
  --bs-btn-hover-color: var(--switch-btn-color);
  --bs-btn-hover-bg: transparent;
  --bs-btn-active-color: var(--bs-white);
  --bs-btn-active-bg: transparent;
  white-space: nowrap;
  border-color: var(--bs-btn-border-color) !important;
}

.pagination {
  margin-top: 0.5rem;
}
.pagination .page-link {
  --bs-pagination-padding-x: 0;
  text-align: center;
  width: 36px;
}

.is-loading {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1090;
}
.is-loading::before {
  content: "";
  opacity: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.35);
}
.is-loading.is-shadow::before {
  opacity: 1;
}
.is-loading::after {
  content: "";
  font-size: 0.625rem;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  position: relative;
  text-indent: -9999rem;
  animation: loading-spin 1.2s infinite ease;
}

@keyframes loading-rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes loading-spin {
  0%, 100% {
    box-shadow: 0rem -2.6rem 0rem 0.15rem var(--loader-color), 1.8rem -1.8rem 0 0rem rgba(var(--loader-color-rgb), 0.2), 2.5rem 0rem 0 0rem rgba(var(--loader-color-rgb), 0.2), 1.75rem 1.75rem 0 0rem rgba(var(--loader-color-rgb), 0.2), 0rem 2.5rem 0 0rem rgba(var(--loader-color-rgb), 0.2), -1.8rem 1.8rem 0 0rem rgba(var(--loader-color-rgb), 0.2), -2.6rem 0rem 0 0rem rgba(var(--loader-color-rgb), 0.5), -1.8rem -1.8rem 0 0rem rgba(var(--loader-color-rgb), 0.7);
  }
  12.5% {
    box-shadow: 0rem -2.6rem 0rem 0rem rgba(var(--loader-color-rgb), 0.7), 1.8rem -1.8rem 0 0.15rem var(--loader-color), 2.5rem 0rem 0 0rem rgba(var(--loader-color-rgb), 0.2), 1.75rem 1.75rem 0 0rem rgba(var(--loader-color-rgb), 0.2), 0rem 2.5rem 0 0rem rgba(var(--loader-color-rgb), 0.2), -1.8rem 1.8rem 0 0rem rgba(var(--loader-color-rgb), 0.2), -2.6rem 0rem 0 0rem rgba(var(--loader-color-rgb), 0.2), -1.8rem -1.8rem 0 0rem rgba(var(--loader-color-rgb), 0.5);
  }
  25% {
    box-shadow: 0rem -2.6rem 0rem 0rem rgba(var(--loader-color-rgb), 0.5), 1.8rem -1.8rem 0 0rem rgba(var(--loader-color-rgb), 0.7), 2.5rem 0rem 0 0.15rem var(--loader-color), 1.75rem 1.75rem 0 0rem rgba(var(--loader-color-rgb), 0.2), 0rem 2.5rem 0 0rem rgba(var(--loader-color-rgb), 0.2), -1.8rem 1.8rem 0 0rem rgba(var(--loader-color-rgb), 0.2), -2.6rem 0rem 0 0rem rgba(var(--loader-color-rgb), 0.2), -1.8rem -1.8rem 0 0rem rgba(var(--loader-color-rgb), 0.2);
  }
  37.5% {
    box-shadow: 0rem -2.6rem 0rem 0rem rgba(var(--loader-color-rgb), 0.2), 1.8rem -1.8rem 0 0rem rgba(var(--loader-color-rgb), 0.5), 2.5rem 0rem 0 0rem rgba(var(--loader-color-rgb), 0.7), 1.75rem 1.75rem 0 0.15rem var(--loader-color), 0rem 2.5rem 0 0rem rgba(var(--loader-color-rgb), 0.2), -1.8rem 1.8rem 0 0rem rgba(var(--loader-color-rgb), 0.2), -2.6rem 0rem 0 0rem rgba(var(--loader-color-rgb), 0.2), -1.8rem -1.8rem 0 0rem rgba(var(--loader-color-rgb), 0.2);
  }
  50% {
    box-shadow: 0rem -2.6rem 0rem 0rem rgba(var(--loader-color-rgb), 0.2), 1.8rem -1.8rem 0 0rem rgba(var(--loader-color-rgb), 0.2), 2.5rem 0rem 0 0rem rgba(var(--loader-color-rgb), 0.5), 1.75rem 1.75rem 0 0rem rgba(var(--loader-color-rgb), 0.7), 0rem 2.5rem 0 0.15rem var(--loader-color), -1.8rem 1.8rem 0 0rem rgba(var(--loader-color-rgb), 0.2), -2.6rem 0rem 0 0rem rgba(var(--loader-color-rgb), 0.2), -1.8rem -1.8rem 0 0rem rgba(var(--loader-color-rgb), 0.2);
  }
  62.5% {
    box-shadow: 0rem -2.6rem 0rem 0rem rgba(var(--loader-color-rgb), 0.2), 1.8rem -1.8rem 0 0rem rgba(var(--loader-color-rgb), 0.2), 2.5rem 0rem 0 0rem rgba(var(--loader-color-rgb), 0.2), 1.75rem 1.75rem 0 0rem rgba(var(--loader-color-rgb), 0.5), 0rem 2.5rem 0 0rem rgba(var(--loader-color-rgb), 0.7), -1.8rem 1.8rem 0 0.15rem var(--loader-color), -2.6rem 0rem 0 0rem rgba(var(--loader-color-rgb), 0.2), -1.8rem -1.8rem 0 0rem rgba(var(--loader-color-rgb), 0.2);
  }
  75% {
    box-shadow: 0rem -2.6rem 0rem 0rem rgba(var(--loader-color-rgb), 0.2), 1.8rem -1.8rem 0 0rem rgba(var(--loader-color-rgb), 0.2), 2.5rem 0rem 0 0rem rgba(var(--loader-color-rgb), 0.2), 1.75rem 1.75rem 0 0rem rgba(var(--loader-color-rgb), 0.2), 0rem 2.5rem 0 0rem rgba(var(--loader-color-rgb), 0.5), -1.8rem 1.8rem 0 0rem rgba(var(--loader-color-rgb), 0.7), -2.6rem 0rem 0 0.15rem var(--loader-color), -1.8rem -1.8rem 0 0rem rgba(var(--loader-color-rgb), 0.2);
  }
  87.5% {
    box-shadow: 0rem -2.6rem 0rem 0rem rgba(var(--loader-color-rgb), 0.2), 1.8rem -1.8rem 0 0rem rgba(var(--loader-color-rgb), 0.2), 2.5rem 0rem 0 0rem rgba(var(--loader-color-rgb), 0.2), 1.75rem 1.75rem 0 0rem rgba(var(--loader-color-rgb), 0.2), 0rem 2.5rem 0 0rem rgba(var(--loader-color-rgb), 0.2), -1.8rem 1.8rem 0 0rem rgba(var(--loader-color-rgb), 0.5), -2.6rem 0rem 0 0rem rgba(var(--loader-color-rgb), 0.7), -1.8rem -1.8rem 0 0.15rem var(--loader-color);
  }
}
.file-control-box {
  margin-top: 2.25rem;
}
.file-control-box.iframe-file-control-box {
  margin-top: 0;
}
.file-control-box.iframe-file-control-box .file-control-btns .btn-outline-light {
  --bs-btn-bg: var(--bs-white);
  --bs-btn-hover-bg: var(--bs-btn-bg);
  --bs-btn-active-bg: var(--bs-btn-bg);
}
.file-control-box .file-control-btns {
  display: none;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}
.file-control-box .file-control-btns .btn-accsstype {
  display: none;
}
.file-control-box .file-control-btns.control-btns-bottom {
  justify-content: flex-end;
  margin-bottom: 0;
  margin-top: 1rem;
}
.file-control-box.upload .file-control-btns.type-upload {
  display: flex;
}
.file-control-box.download .file-control-btns.type-download {
  display: flex;
}
.file-control-box.update .file-control-btns.type-update {
  display: flex;
}
.file-control-box.option2 .file-control-btns.type-upload .btn-accsstype, .file-control-box.option3 .file-control-btns.type-upload .btn-accsstype {
  display: inline-block;
}
.file-control-box .file-control-body {
  border-top: 1px solid var(--bs-gray-700);
  border-bottom: 1px solid var(--bs-gray-200);
  background-color: var(--bs-white);
}
.file-control-box .file-control {
  width: 100%;
}
.file-control-box .uppy-Dashboard-dropFilesHereHint {
  display: none;
}
@media (min-width: 1024px) {
  .file-control-box .uppy-Dashboard-dropFilesHereHint {
    display: flex;
  }
}

.include-file-control {
  margin-top: 2.25rem;
}

.iframe-file-control {
  --iframe-min-height: 174px;
  --iframe-height: max-content;
  width: 100%;
  min-height: var(--iframe-min-height);
  height: var(--iframe-height);
}

.skip-btn-box {
  top: -110%;
  z-index: 1100;
}
.skip-btn-box:has(.btn-skip:focus) {
  top: 0;
}

.radial-bar-container {
  width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.radial-list {
  margin-top: 1.25rem;
  row-gap: 1rem;
}
@media (min-width: 1024px) {
  .radial-list {
    row-gap: 1.875rem;
  }
}
.radial-list .list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (min-width: 1024px) {
  .radial-list .list-item:first-child {
    padding-right: 1.875rem;
  }
  .radial-list .list-item:last-child {
    text-align: right;
    padding-left: 1.875rem;
  }
}
.radial-list .list-item [class*=item-] {
  line-height: 1rem;
}
.radial-list .list-item .item-name {
  color: var(--bs-gray-600);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}
.radial-list .list-item .item-name::before {
  content: "";
  min-width: 0.5rem;
  min-height: 0.5rem;
  border-radius: 0.125rem;
  background-color: var(--radial-color-chip);
}
.radial-list .list-item .item-count {
  color: var(--bs-gray-800);
  font-size: 1.125rem;
  font-weight: 700;
}
@media (min-width: 1024px) {
  .radial-list .list-item .item-count {
    font-size: 1.5rem;
  }
}

.data-step-list {
  gap: 2.25rem;
}
.data-step-list .panel {
  --panel-padding-y: 1.5rem;
  --panel-padding-x: 1.5rem;
  padding-top: 3rem;
}
@media (min-width: 1024px) {
  .data-step-list {
    --panel-padding-y: 3rem;
    --panel-padding-x: 2.5rem;
  }
}
.data-step-list .step-box {
  position: relative;
  display: inline-block;
  padding: 0.625rem 0.75rem;
  margin-top: -4.125rem;
  border-radius: 1.125rem;
  background-color: var(--bs-primary);
  color: var(--bs-white);
  font-weight: 700;
  line-height: 1em;
}
.data-step-list .step-box:after {
  width: 0;
  height: 0;
  position: absolute;
  bottom: -0.4375rem;
  left: calc(50% - 0.375rem);
  border-top: 0.5rem solid var(--bs-primary);
  border-left: 0.375rem solid transparent;
  border-right: 0.375rem solid transparent;
  content: "";
}

.privacy-labeling-list {
  --privacy-gap: .625rem;
  --privacy-width: calc(33.333% - .4166rem);
  gap: var(--privacy-gap);
}
.privacy-labeling-list li {
  width: var(--privacy-width);
}
@media (min-width: 1024px) {
  .privacy-labeling-list {
    --privacy-gap: 1rem;
    --privacy-width: calc(16.8% - 1rem);
  }
}
.privacy-labeling-list .privacy-labeling {
  --privacy-padding-x: .25rem;
  --privacy-padding-y: 1.5rem;
  letter-spacing: -1px;
  padding: var(--privacy-padding-y) var(--privacy-padding-x);
}
@media (min-width: 1024px) {
  .privacy-labeling-list .privacy-labeling {
    --privacy-padding-y: 2rem;
  }
}

.btn-privacy-anchor {
  text-decoration: none;
}
.btn-privacy-anchor:hover, .btn-privacy-anchor:focus {
  text-decoration: underline;
  color: var(--bs-body-color);
  font-weight: 700;
}

.privacy-list {
  --privacy-margin-top: 2.25rem;
  margin-top: var(--privacy-margin-top);
}
.privacy-list li {
  margin-bottom: 2.25rem;
}
@media (min-width: 1024px) {
  .privacy-list {
    --privacy-margin-top: 3.75rem;
  }
}

.data-search-head {
  position: relative;
  z-index: 1000;
}
.data-search-box {
  overflow: hidden;
  width: 100%;
  min-height: 3.625rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0 1.25rem;
  border: 2px solid var(--bs-primary);
  border-radius: 6.1875rem;
  background: var(--bs-white);
}
.data-search-box-select {
  min-width: 35%;
  padding-left: 0;
  padding-right: 1.5rem;
  border: 0;
  background-color: inherit;
  background-position: right 0.25rem center;
}
.data-search-box-input {
  flex: 1 0 65%;
  position: relative;
}
.data-search-box-input::before {
  content: "";
  min-width: 1px;
  height: 1rem;
  background-color: var(--bs-gray-200);
}
.data-search-box-input input.form-control {
  --bs-border-width: 0;
  padding-right: 0;
  background-color: inherit;
}
.data-search-box-input .btn-data-search {
  --bs-btn-padding-x: .5rem;
  --bs-btn-padding-y: .5rem;
}
.data-search-box-input .btn-data-search .icon-search {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.data-search-box-input .btn-data-search .icon-search {
  --icon-box-width: 24px;
  --icon-box-height: 24px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.data-search-box-input .btn-data-search .icon-search::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_search2.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}
.data-search .search-keyword-wrap {
  overflow: hidden;
  width: 100%;
  max-height: 0;
  position: absolute;
  top: 100%;
  left: 0;
  filter: drop-shadow(0px 16px 16px rgba(0, 0, 0, 0.08));
  transition: all 0.3s ease-in-out;
}
.data-search .search-keyword-wrap .panel.search-keyword-group {
  --panel-padding-x: 1.25rem;
  --panel-padding-y: 1.5rem;
  --panel-border-color: var(--bs-border-color);
  width: 100%;
  padding: 2.5rem 1.25rem 1.5rem 1.25rem;
  position: relative;
  border: 1px solid var(--bs-border-color);
}
.data-search .search-keyword-wrap .panel.search-keyword-group .btn-search-keyword-close {
  --bs-btn-padding-x: 0;
  --bs-btn-padding-y: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0.5rem;
  right: 1.25rem;
}
@media (max-width: 1023px) {
  .data-search .search-keyword-wrap .search-keyword-group .search-item:first-child {
    padding-bottom: 0;
    border: 0;
  }
}
.data-search-head.show .search-keyword-wrap {
  max-height: 80vh;
  top: calc(100% + 4px);
}
.data-search-result-desc {
  color: var(--bs-gray-800);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 2.25rem;
  text-align: center;
  margin-top: 2.25rem;
}
.data-search-content {
  margin-top: 2.25rem;
}
@media (min-width: 1024px) {
  .data-search-filter {
    max-width: 270px;
    padding-right: 1.125rem;
  }
}
.data-search-filter-contents {
  margin-bottom: 2.25rem;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
}
@media (min-width: 1024px) {
  .data-search-filter-contents {
    overflow: unset;
    border: none;
  }
}
.data-search-filter-contents .btn-search-filter {
  --bs-btn-font-size: 1.125rem;
  --bs-btn-font-weight: 700;
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-padding-y: 1.125rem;
  --bs-btn-border-width: 0;
  --bs-btn-bg: var(--bs-gray-110);
  --bs-btn-hover-bg: var(--bs-btn-bg);
  --bs-btn-active-bg: var(--bs-btn-bg);
  --bs-btn-border-radius: var(--bs-border-radius-lg);
}
.data-search-filter-contents .btn-search-filter.collapsed i {
  transform: scaleY(-1);
}
.data-search-filter-title {
  height: 41px;
  border-bottom: 1px solid var(--bs-secondary);
}
.data-search-filter-title .btn {
  --bs-btn-color: var(--bs-gray-700);
}
.data-search-filter-title .btn i.icon-reset {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.data-search-filter-title .btn i.icon-reset {
  --icon-box-width: 16px;
  --icon-box-height: 16px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.data-search-filter-title .btn i.icon-reset::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_reset_gray.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}
.data-search-filter-body {
  padding: 1.5rem;
}
@media (min-width: 1024px) {
  .data-search-filter-body {
    padding: 1.25rem 0 0 0;
  }
}
.data-search-filter-body.collapsing, .data-search-filter-body.collapse.show {
  border-top: 1px solid var(--bs-border-color);
}
.data-search-filter-body ul > li {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--bs-border-color);
}
.data-search-filter-body ul > li,
.data-search-filter-body ul > li form {
  gap: 0.75rem;
}
.data-search-filter-body ul > li:first-child {
  padding-top: 0;
}
.data-search-filter-body ul > li h4 {
  font-weight: 700;
  margin-bottom: 0;
}
.data-search-filter-body ul > li .input-keyword-reserach {
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
}
.data-search-filter-body ul > li .input-keyword-reserach input.form-control {
  padding-right: 2.375rem;
}
.data-search-filter-body ul > li .input-keyword-reserach .btn-keyword-research {
  --bs-btn-padding-x: .3438rem;
  --bs-btn-padding-y: .3438rem;
  position: absolute;
  top: 0;
  right: 0;
}
.data-search-filter-body ul > li .input-keyword-reserach .btn-keyword-research .icon-search {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.data-search-filter-body ul > li .input-keyword-reserach .btn-keyword-research .icon-search {
  --icon-box-width: 24px;
  --icon-box-height: 24px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.data-search-filter-body ul > li .input-keyword-reserach .btn-keyword-research .icon-search::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_search2.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}
@media (max-width: 1023px) {
  .data-search-result-tabs {
    overflow-x: auto;
  }
}
@media (min-width: 1024px) {
  .data-search-result-tabs {
    padding-bottom: 3.75rem;
  }
}
@media (min-width: 1024px) {
  .data-search-result-view {
    padding-left: 1.125rem;
  }
}
.data-search-result-view-type {
  display: flex;
}
@media (max-width: 1023px) {
  .data-search-result-view-type {
    justify-content: flex-end;
    margin-top: 1.875rem;
  }
}
.data-search-result-view-type .btn-group-result-view-type {
  justify-content: flex-end;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--bs-secondary);
}
@media (min-width: 1024px) {
  .data-search-result-view-type .btn-group-result-view-type {
    gap: 1rem;
  }
}
.data-search-result-view-type .btn-group-result-view-type .form-check {
  color: var(--bs-gray-700);
}
.data-search-result-view-type .btn-group-result-view-type .form-check-label {
  width: 100%;
  height: 1.5rem;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
@media (min-width: 1024px) {
  .data-search-result-view-type .btn-group-result-view-type .form-check-label {
    height: calc(41px - 0.5rem - 1px);
  }
}
.data-search-result-view-type .btn-group-result-view-type .form-check-input:checked + .form-check-label {
  color: var(--bs-gray-800);
  text-decoration: underline;
}
.data-search-result-list-count {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}
.data-search-result-list li.list-item {
  padding: 2.25rem 0;
  border-bottom: 1px solid var(--bs-border-color);
}
.data-search-result-list-count + .list-items > li.list-item:first-child {
  padding-top: 0;
}
.data-search-result-list .data-search-result-item {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.data-search-result-list .data-search-result-item .result-item-header {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 1rem;
}
.data-search-result-list .data-search-result-item .result-item-header .result-item-title {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 2.25rem;
  flex: 1 1 auto;
}
.data-search-result-list .data-search-result-item .result-item-header-btns {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.data-search-result-list .data-search-result-item .result-item-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.data-search-result-list .data-search-result-item .result-item-body-desc, .data-search-result-list .data-search-result-item .result-item-body-detail-info {
  color: var(--bs-gray-700);
}
.data-search-result-list .data-search-result-item .result-item-body-desc {
  line-height: 1.5rem;
}
.data-search-result-list .data-search-result-item .result-item-body-detail-info {
  line-height: 1.25rem;
}
.data-search-result-list .data-search-result-item .result-item-body-detail-info > span:not(:first-child) {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-left: 0.25rem;
}
.data-search-result-list .data-search-result-item .result-item-body-detail-info > span:not(:first-child)::before {
  content: "";
  width: 1px;
  height: 0.75em;
  background-color: var(--bs-gray-200);
}
.data-search-result-list .data-search-result-item .result-item-body label.btn-preview-data {
  --bs-btn-padding-x: 0;
  display: flex;
  align-items: center;
  gap: 0.3125rem;
}
.data-search-result-list .data-search-result-item .result-item-body label.btn-preview-data i {
  font-size: 0.875rem;
}
.data-search-result-list .data-search-result-item .result-item-body-preview-data {
  --panel-padding-x: 1rem;
  --panel-padding-y: .5rem;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.625rem;
  max-height: 4.15rem;
}
.data-search-result-list .data-search-result-item .result-item-body:has(.preview-collpase-control:checked) label.btn-preview-data i {
  transform: scaleY(-1);
}
.data-search-result-list .data-search-result-item .result-item-body:has(.preview-collpase-control:checked) .result-item-body-preview-data {
  overflow: auto;
  max-height: 400px;
  -webkit-line-clamp: unset;
}
.data-search-result-list[data-list-type=board] li.list-item {
  padding: 1.5rem 0;
}
.data-search-result-list[data-list-type=board] .result-item-header {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
}

.accordion-body-inner .se-contents p[style*="margin: 16px"]:first-child {
  margin-top: 8px !important;
}
.accordion-body-inner .se-contents p[style*="margin: 16px"]:last-child {
  margin-bottom: 8px !important;
}

.panel-intro-info {
  --panel-padding-x: 1.5rem;
  --panel-padding-y: 1rem;
  color: var(--bs-gray-800);
  line-height: 24px;
  gap: 1.25rem;
  margin-bottom: 3.75rem;
  background-color: #e7f5ff;
}
.panel-intro-info img {
  width: 55px;
  height: auto;
}
@media (min-width: 1024px) {
  .panel-intro-info {
    --panel-padding-x: 2.5rem;
  }
}

.panel-intro-diagram {
  --panel-padding-x: 0;
  --panel-padding-y: 0;
}
@media (min-width: 1024px) {
  .panel-intro-diagram {
    --panel-padding-x: 2.25rem;
    --panel-padding-y: 3rem;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
  }
}

@media (min-width: 1024px) {
  .intro-diagram-type {
    flex-direction: column;
    gap: 78px;
  }
}
.intro-diagram-type .diagram-type {
  padding-bottom: 46px;
}
@media (min-width: 1024px) {
  .intro-diagram-type .diagram-type {
    padding-top: 80px;
    padding-bottom: 0;
    margin-right: 46px;
    background-image: url(/safezone/static/images/img_intro_2.svg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 72px;
  }
  .intro-diagram-type .diagram-type:first-child {
    order: 13;
  }
}
.intro-diagram-type .diagram-type .diagram-type-name {
  color: var(--bs-gray-700);
  font-weight: 700;
  line-height: 1.5rem;
  white-space: nowrap;
  padding: 0.5rem 1.3125rem;
  border: 3px solid var(--bs-gray-600);
  border-radius: 50rem;
  background-color: var(--bs-gray-100);
}
@media (min-width: 1024px) {
  .intro-diagram-type .diagram-type .diagram-type-name {
    padding-left: 1.5625rem;
    padding-right: 1.5625rem;
  }
}
.intro-diagram-type .diagram-type ul {
  color: var(--bs-gray-700);
  padding-left: 1.5rem;
  margin-top: 0.75rem;
  margin-bottom: 0;
}
.intro-diagram-type .diagram-type ul li {
  color: inherit;
  line-height: 1.5rem;
}
.intro-diagram-type .diagram-type ul li::marker {
  color: inherit;
}
.intro-diagram-type .diagram-type i {
  color: var(--bs-gray-800);
  width: 46px;
  height: 46px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  bottom: 0;
  left: 50%;
  margin-left: -23px;
}
@media (min-width: 1024px) {
  .intro-diagram-type .diagram-type i {
    top: 80px;
    bottom: unset;
    left: unset;
    right: -46px;
  }
}

.intro-diagram-steps {
  --diagram-circle-size: 11.25rem;
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .intro-diagram-steps {
    flex: 1;
    align-items: center;
    flex-direction: row;
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
    padding-left: 2.25rem;
  }
}
.intro-diagram-steps li.diagram-step {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
@media (min-width: 1024px) {
  .intro-diagram-steps li.diagram-step {
    height: 100%;
  }
}
.intro-diagram-steps li.diagram-step .diagram-circle {
  width: var(--diagram-circle-size);
  height: var(--diagram-circle-size);
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid transparent;
  border-radius: 50%;
  background-color: var(--bs-primary);
}
@media (min-width: 1024px) {
  .intro-diagram-steps li.diagram-step .diagram-circle {
    --diagram-circle-size: 13.125rem;
  }
}
.intro-diagram-steps li.diagram-step .diagram-circle .diagram-title {
  color: #fff;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.6875rem;
  text-align: center;
}
@media (min-width: 1024px) {
  .intro-diagram-steps li.diagram-step .diagram-circle .diagram-title {
    font-size: 1.5rem;
    line-height: 2.25rem;
  }
}
.intro-diagram-steps li.diagram-step .diagram-descriptions {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.intro-diagram-steps li.diagram-step .diagram-descriptions .diagram-desc {
  color: var(--bs-gray-700);
  font-size: 0.9375rem;
  line-height: 1.125rem;
  white-space: nowrap;
  width: 50%;
  padding-top: 0.375rem;
  position: absolute;
  border-top: 2px dotted var(--bs-primary);
}
@media (min-width: 1024px) {
  .intro-diagram-steps li.diagram-step .diagram-descriptions .diagram-desc {
    display: flex;
    align-items: flex-end;
    padding-top: unset;
    padding-left: 0.375rem;
    border-top: unset;
    border-left: 2px dotted var(--bs-primary);
  }
}
.intro-diagram-steps li.diagram-step .diagram-descriptions .diagram-desc::before {
  content: "";
  width: 16px;
  height: 16px;
  position: absolute;
  top: 0;
  margin-top: -9px;
  border: 1px solid var(--bs-primary);
  border-radius: 50%;
  background-color: var(--bs-primary);
  box-shadow: inset 0 0 0 4px var(--bs-white);
}
@media (min-width: 1024px) {
  .intro-diagram-steps li.diagram-step .diagram-descriptions .diagram-desc::before {
    left: 0;
    margin-left: -9px;
  }
}
.intro-diagram-steps li.diagram-step .diagram-descriptions .diagram-desc.start-bottom {
  left: 0;
}
.intro-diagram-steps li.diagram-step .diagram-descriptions .diagram-desc.start-bottom::before {
  right: 0;
  margin-right: -9px;
}
@media (min-width: 1024px) {
  .intro-diagram-steps li.diagram-step .diagram-descriptions .diagram-desc.start-bottom {
    left: unset;
    bottom: 0;
  }
}
.intro-diagram-steps li.diagram-step .diagram-descriptions .diagram-desc.end-top {
  text-align: right;
  right: 0;
}
.intro-diagram-steps li.diagram-step .diagram-descriptions .diagram-desc.end-top::before {
  right: unset;
  left: 0;
  margin-left: -9px;
}
@media (min-width: 1024px) {
  .intro-diagram-steps li.diagram-step .diagram-descriptions .diagram-desc.end-top {
    text-align: left;
    align-items: flex-start;
  }
  .intro-diagram-steps li.diagram-step .diagram-descriptions .diagram-desc.end-top::before {
    top: unset;
    bottom: 0;
    margin-top: unset;
    margin-bottom: -9px;
  }
}
.intro-diagram-steps li.diagram-step .diagram-descriptions .diagram-desc[class*=top-], .intro-diagram-steps li.diagram-step .diagram-descriptions .diagram-desc[class*=bottom-] {
  width: calc(50% - 50px);
  top: 14.5px;
}
@media (min-width: 1024px) {
  .intro-diagram-steps li.diagram-step .diagram-descriptions .diagram-desc[class*=top-], .intro-diagram-steps li.diagram-step .diagram-descriptions .diagram-desc[class*=bottom-] {
    left: 13.5px;
    height: calc(50% - 54px);
  }
}
.intro-diagram-steps li.diagram-step .diagram-descriptions .diagram-desc[class*=middle-] {
  width: calc(50% - 90px);
  top: 90.5px;
}
@media (min-width: 1024px) {
  .intro-diagram-steps li.diagram-step .diagram-descriptions .diagram-desc[class*=middle-] {
    left: 113.5px;
    height: calc(50% - 106px);
  }
}
.intro-diagram-steps li.diagram-step .diagram-descriptions .diagram-desc[class*=bottom-] {
  top: 163px;
}
@media (min-width: 1024px) {
  .intro-diagram-steps li.diagram-step .diagram-descriptions .diagram-desc[class*=bottom-] {
    left: 195.5px;
  }
}
@media (min-width: 1024px) {
  .intro-diagram-steps li.diagram-step .diagram-descriptions .diagram-desc[class*=top-], .intro-diagram-steps li.diagram-step .diagram-descriptions .diagram-desc[class*=middle-], .intro-diagram-steps li.diagram-step .diagram-descriptions .diagram-desc[class*=bottom-] {
    width: -moz-max-content;
    width: max-content;
    top: unset;
  }
}
.intro-diagram-steps li.diagram-step:not(:first-child) {
  margin-top: -1.875rem;
}
@media (min-width: 1024px) {
  .intro-diagram-steps li.diagram-step:not(:first-child) {
    margin-top: unset;
    margin-left: -1.875rem;
  }
}
.intro-diagram-steps li.diagram-step:nth-child(odd) .diagram-circle {
  mix-blend-mode: darken;
}
.intro-diagram-steps li.diagram-step:nth-child(even) .diagram-circle {
  border-color: #05c;
  background-color: rgba(255, 255, 255, 0.8);
}
.intro-diagram-steps li.diagram-step:nth-child(even) .diagram-circle .diagram-title {
  color: var(--bs-primary);
}

.panel-service-guide {
  --panel-padding-x: 1.5rem;
}
.panel-service-guide .btn-quick-guide {
  margin-bottom: 1.5rem;
}
@media (min-width: 1024px) {
  .panel-service-guide .btn-quick-guide {
    margin-bottom: 2.25rem;
  }
}

.service-guide-steps {
  counter-reset: steps;
}
@media (min-width: 1024px) {
  .service-guide-steps {
    display: flex;
    justify-content: center;
    gap: 2.25rem;
  }
}
.service-guide-steps-item {
  counter-increment: steps;
  display: flex;
  flex-direction: column;
}
.service-guide-steps-item:not(:last-child) {
  margin-bottom: 2.25rem;
}
@media (min-width: 1024px) {
  .service-guide-steps-item {
    min-width: 16rem;
    max-width: 16rem;
    margin-bottom: 0 !important;
  }
}
.service-guide-steps-item .item-bg-title {
  color: var(--bs-white);
  font-weight: 600;
  width: 100%;
  height: 3.625rem;
  position: relative;
  border-radius: 1rem 1rem 0 0;
  background-color: #666;
}
.service-guide-steps-item .item-bg-title::before {
  content: counter(steps);
  color: var(--bs-black);
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 0.625rem;
  border-radius: 50%;
  background-color: var(--bs-white);
}
.service-guide-steps-item .item-bg-title::after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  right: -0.625rem;
  top: 50%;
  margin-top: -0.5rem;
  border-left: 0.625rem solid #666;
  border-top: 0.5rem solid transparent;
  border-bottom: 0.5rem solid transparent;
}
.service-guide-steps-item .item-bg-title > span {
  width: 1.75rem;
  height: 1.75rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 0.625rem;
}
.service-guide-steps-item .panel {
  --panel-bg: var(--bs-white);
  --panel-border-color: #ccc;
  flex: 1;
  border-radius: 0 0 1rem 1rem;
}
.service-guide-steps-item .panel ul {
  padding-left: 1rem;
  list-style-type: disc;
}
.service-guide-steps-item .panel ul li {
  line-height: 1.5rem;
}
.service-guide-steps-item .panel ul li:not(:last-child) {
  margin-bottom: 8px;
}

[data-bs-theme=dark] .panel {
  --panel-border-color: var(--bs-white);
  --panel-box-shadow: unset;
}

.icon-empty {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: var(--bs-red);
}

.icon-roundbox {
  --roundbox-bg: rgba(0, 100, 240, 0.1);
  --roundbox-size: 2.5rem;
  --roundbox-opacity: 0.1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: var(--roundbox-size);
  height: var(--roundbox-size);
  background-color: var(--roundbox-bg);
}
.icon-roundbox.bg-gray {
  --roundbox-bg: rgba(161, 170, 180, 0.1);
}

.icon-write {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  vertical-align: top;
}
.icon-write {
  --icon-box-width: 16px;
  --icon-box-height: 16px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-write::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_write.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}

.icon-file {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-file {
  --icon-box-width: 24px;
  --icon-box-height: 24px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-file::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_file.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}

.icon-file-sm {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-file-sm {
  --icon-box-width: 20px;
  --icon-box-height: 20px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-file-sm::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_file.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}

.icon-notice {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-notice {
  --icon-box-width: 24px;
  --icon-box-height: 24px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-notice::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_notice.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}

.icon-upload {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-upload {
  --icon-box-width: 16px;
  --icon-box-height: 16px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-upload::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_file.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}

.icon-lock {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-lock {
  --icon-box-width: 16px;
  --icon-box-height: 16px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-lock::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_lock_1.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}

.icon-unlock {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-unlock {
  --icon-box-width: 16px;
  --icon-box-height: 16px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-unlock::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_unlock.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}

.icon-submit {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-submit {
  --icon-box-width: 16px;
  --icon-box-height: 16px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-submit::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_submit.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}

.icon-receipt {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-receipt {
  --icon-box-width: 16px;
  --icon-box-height: 16px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-receipt::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_receipt.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}

.icon-date {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-date {
  --icon-box-width: 16px;
  --icon-box-height: 16px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-date::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_date.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}

.icon-survey-1 {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-survey-1 {
  --icon-box-width: 32px;
  --icon-box-height: 32px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-survey-1::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_survey_1.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}

.icon-survey-2 {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-survey-2 {
  --icon-box-width: 32px;
  --icon-box-height: 32px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-survey-2::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_survey_2.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}

.icon-survey-3 {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-survey-3 {
  --icon-box-width: 32px;
  --icon-box-height: 32px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-survey-3::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_survey_3.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}

.icon-survey-4 {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-survey-4 {
  --icon-box-width: 32px;
  --icon-box-height: 32px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-survey-4::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_survey_4.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}

.icon-survey-5 {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-survey-5 {
  --icon-box-width: 32px;
  --icon-box-height: 32px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-survey-5::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_survey_5.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}

.icon-card-chart {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-card-chart {
  --icon-box-width: 24px;
  --icon-box-height: 24px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-card-chart::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_card_chart.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}

.icon-favorite {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-favorite {
  --icon-box-width: 24px;
  --icon-box-height: 24px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-favorite::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_heart_empty.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}
.icon-favorite.on {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-favorite.on {
  --icon-box-width: 24px;
  --icon-box-height: 24px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-favorite.on::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_heart.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}

.icon-card-view {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-card-view {
  --icon-box-width: 20px;
  --icon-box-height: 20px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-card-view::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_eye.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}
[data-bs-theme=dark] .icon-card-view::before {
  filter: brightness(0) invert(1);
}

.icon-card-download {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-card-download {
  --icon-box-width: 20px;
  --icon-box-height: 20px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-card-download::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_card_download.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}
[data-bs-theme=dark] .icon-card-download::before {
  filter: brightness(0) invert(1);
}

.icon-card-like {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-card-like {
  --icon-box-width: 20px;
  --icon-box-height: 20px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-card-like::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_card_like.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}
[data-bs-theme=dark] .icon-card-like::before {
  filter: brightness(0) invert(1);
}

.icon-like {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-like {
  --icon-box-width: 20px;
  --icon-box-height: 20px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-like::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_thumb_off.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}
.icon-like.on {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-like.on {
  --icon-box-width: 20px;
  --icon-box-height: 20px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-like.on::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_thumb_on.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}

.on .icon-favorite {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.on .icon-favorite {
  --icon-box-width: 24px;
  --icon-box-height: 24px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.on .icon-favorite::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_heart.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}
.on .icon-like {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.on .icon-like {
  --icon-box-width: 20px;
  --icon-box-height: 20px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.on .icon-like::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_thumb_on.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}

.icon-search-lg {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-search-lg {
  --icon-box-width: 24px;
  --icon-box-height: 24px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-search-lg::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_search2.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}

.icon-arrow {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-arrow {
  --icon-box-width: 16px;
  --icon-box-height: 16px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-arrow::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_arrow_right_dark.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}
[data-bs-theme=dark] .icon-arrow::before {
  filter: brightness(0) invert(1);
}

.icon-mypage {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-mypage {
  --icon-box-width: 20px;
  --icon-box-height: 20px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-mypage::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_mypage.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}
[data-bs-theme=dark] .icon-mypage::before {
  filter: brightness(0) invert(1);
}

.icon-cloud {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-cloud {
  --icon-box-width: 64px;
  --icon-box-height: 64px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-cloud::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_cloud.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}

.icon-tel {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-tel {
  --icon-box-width: 40px;
  --icon-box-height: 40px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-tel::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_tel.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}

.icon-guide-01 {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-guide-01 {
  --icon-box-width: 32px;
  --icon-box-height: 32px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-guide-01::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_guide_01.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}

.icon-guide-02 {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-guide-02 {
  --icon-box-width: 32px;
  --icon-box-height: 32px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-guide-02::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_guide_02.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}

.icon-guide-03 {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-guide-03 {
  --icon-box-width: 32px;
  --icon-box-height: 32px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-guide-03::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_guide_03.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}

.icon-privacy {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-privacy {
  --icon-box-width: 64px;
  --icon-box-height: 64px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-privacy::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_privacy.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}

.icon-privacy-lg-1 {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-privacy-lg-1 {
  --icon-box-width: 64px;
  --icon-box-height: 64px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-privacy-lg-1::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_privacy_1.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}
@media (min-width: 1024px) {
  .icon-privacy-lg-1 {
    --icon-box-width: 100px;
    --icon-box-height: 100px;
  }
}

.icon-privacy-lg-2 {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-privacy-lg-2 {
  --icon-box-width: 64px;
  --icon-box-height: 64px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-privacy-lg-2::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_privacy_2.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}
@media (min-width: 1024px) {
  .icon-privacy-lg-2 {
    --icon-box-width: 100px;
    --icon-box-height: 100px;
  }
}

.icon-privacy-lg-3 {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-privacy-lg-3 {
  --icon-box-width: 64px;
  --icon-box-height: 64px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-privacy-lg-3::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_privacy_3.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}
@media (min-width: 1024px) {
  .icon-privacy-lg-3 {
    --icon-box-width: 100px;
    --icon-box-height: 100px;
  }
}

.icon-privacy-lg-4 {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-privacy-lg-4 {
  --icon-box-width: 64px;
  --icon-box-height: 64px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-privacy-lg-4::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_privacy_4.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}
@media (min-width: 1024px) {
  .icon-privacy-lg-4 {
    --icon-box-width: 100px;
    --icon-box-height: 100px;
  }
}

.icon-privacy-lg-5 {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-privacy-lg-5 {
  --icon-box-width: 64px;
  --icon-box-height: 64px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-privacy-lg-5::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_privacy_5.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}
@media (min-width: 1024px) {
  .icon-privacy-lg-5 {
    --icon-box-width: 100px;
    --icon-box-height: 100px;
  }
}

.icon-privacy-lg-6 {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-privacy-lg-6 {
  --icon-box-width: 64px;
  --icon-box-height: 64px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-privacy-lg-6::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_privacy_6.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}
@media (min-width: 1024px) {
  .icon-privacy-lg-6 {
    --icon-box-width: 100px;
    --icon-box-height: 100px;
  }
}

.icon-privacy-lg-7 {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-privacy-lg-7 {
  --icon-box-width: 64px;
  --icon-box-height: 64px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-privacy-lg-7::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_privacy_7.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}
@media (min-width: 1024px) {
  .icon-privacy-lg-7 {
    --icon-box-width: 100px;
    --icon-box-height: 100px;
  }
}

.icon-privacy-lg-8 {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-privacy-lg-8 {
  --icon-box-width: 64px;
  --icon-box-height: 64px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-privacy-lg-8::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_privacy_8.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}
@media (min-width: 1024px) {
  .icon-privacy-lg-8 {
    --icon-box-width: 100px;
    --icon-box-height: 100px;
  }
}

.icon-privacy-lg-9 {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-privacy-lg-9 {
  --icon-box-width: 64px;
  --icon-box-height: 64px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-privacy-lg-9::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_privacy_9.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}
@media (min-width: 1024px) {
  .icon-privacy-lg-9 {
    --icon-box-width: 100px;
    --icon-box-height: 100px;
  }
}

.icon-privacy-lg-10 {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-privacy-lg-10 {
  --icon-box-width: 64px;
  --icon-box-height: 64px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-privacy-lg-10::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_privacy_10.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}
@media (min-width: 1024px) {
  .icon-privacy-lg-10 {
    --icon-box-width: 100px;
    --icon-box-height: 100px;
  }
}

.icon-privacy-lg-11 {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-privacy-lg-11 {
  --icon-box-width: 64px;
  --icon-box-height: 64px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-privacy-lg-11::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_privacy_11.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}
@media (min-width: 1024px) {
  .icon-privacy-lg-11 {
    --icon-box-width: 100px;
    --icon-box-height: 100px;
  }
}

.icon-privacy-lg-12 {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-privacy-lg-12 {
  --icon-box-width: 64px;
  --icon-box-height: 64px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-privacy-lg-12::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_privacy_12.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}
@media (min-width: 1024px) {
  .icon-privacy-lg-12 {
    --icon-box-width: 100px;
    --icon-box-height: 100px;
  }
}

.icon-privacy-lg-13 {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-privacy-lg-13 {
  --icon-box-width: 64px;
  --icon-box-height: 64px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-privacy-lg-13::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_privacy_13.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}
@media (min-width: 1024px) {
  .icon-privacy-lg-13 {
    --icon-box-width: 100px;
    --icon-box-height: 100px;
  }
}

.icon-privacy-1 {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-privacy-1 {
  --icon-box-width: 36px;
  --icon-box-height: 36px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-privacy-1::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_privacy_1.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}

.icon-privacy-2 {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-privacy-2 {
  --icon-box-width: 36px;
  --icon-box-height: 36px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-privacy-2::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_privacy_2.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}

.icon-privacy-3 {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-privacy-3 {
  --icon-box-width: 36px;
  --icon-box-height: 36px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-privacy-3::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_privacy_3.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}

.icon-privacy-4 {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-privacy-4 {
  --icon-box-width: 36px;
  --icon-box-height: 36px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-privacy-4::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_privacy_4.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}

.icon-privacy-5 {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-privacy-5 {
  --icon-box-width: 36px;
  --icon-box-height: 36px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-privacy-5::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_privacy_5.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}

.icon-privacy-6 {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-privacy-6 {
  --icon-box-width: 36px;
  --icon-box-height: 36px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-privacy-6::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_privacy_6.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}

.icon-privacy-7 {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-privacy-7 {
  --icon-box-width: 36px;
  --icon-box-height: 36px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-privacy-7::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_privacy_7.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}

.icon-privacy-8 {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-privacy-8 {
  --icon-box-width: 36px;
  --icon-box-height: 36px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-privacy-8::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_privacy_8.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}

.icon-privacy-9 {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-privacy-9 {
  --icon-box-width: 36px;
  --icon-box-height: 36px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-privacy-9::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_privacy_9.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}

.icon-privacy-10 {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-privacy-10 {
  --icon-box-width: 36px;
  --icon-box-height: 36px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-privacy-10::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_privacy_10.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}

.icon-privacy-11 {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-privacy-11 {
  --icon-box-width: 36px;
  --icon-box-height: 36px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-privacy-11::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_privacy_11.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}

.icon-privacy-12 {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-privacy-12 {
  --icon-box-width: 36px;
  --icon-box-height: 36px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-privacy-12::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_privacy_12.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}

.icon-privacy-13 {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-privacy-13 {
  --icon-box-width: 36px;
  --icon-box-height: 36px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-privacy-13::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_privacy_13.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}

.grid-group {
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
}
.grid-group form {
  margin-bottom: 0;
}
.grid-search.panel {
  --panel-bg: var(--bs-gray-110);
}
[data-bs-theme=dark] .grid-search.panel {
  --panel-bg: var(--bs-white);
}
.grid-search,
.grid-search .row {
  --bs-gutter-x: .5rem;
}
.grid-search > .row {
  --bs-gutter-y: 1.5rem;
}
@media (min-width: 1024px) {
  .grid-search > .row {
    --bs-gutter-y: .5rem;
  }
}
.grid-data {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.grid-data-header .total-desc {
  color: var(--bs-gray-800);
  font-size: 1.25rem;
  font-weight: 700;
}
.grid-data-header .total-desc .value {
  color: var(--bs-primary);
}
@media (max-width: 1023px) {
  .grid-data-table table.table {
    display: block;
    border-top: 1px solid var(--bs-border-color);
  }
  .grid-data-table table.table thead {
    display: none;
  }
  .grid-data-table table.table tbody {
    display: flex;
    flex-direction: column;
    padding: 0 0.5rem;
  }
  .grid-data-table table.table tbody tr {
    display: flex;
    flex-wrap: wrap;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    border-bottom: 1px solid var(--bs-border-color);
  }
  .grid-data-table table.table tbody td {
    flex: 1 0 100%;
    display: flex;
    line-height: 1.5rem;
    min-width: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom-color: transparent;
  }
  .grid-data-table table.table tbody td.td-auto {
    flex: 0 0 auto;
  }
  .grid-data-table table.table tbody td.td-auto + .td-auto {
    padding-left: 0;
  }
}
@media (min-width: 1024px) {
  .grid-data-table table.table th, .grid-data-table table.table td {
    vertical-align: middle;
    height: 56px;
    padding: 0.5rem 0.625rem;
  }
  .grid-data-table table.table thead th {
    text-align: center;
    border-width: 1px;
    border-style: solid;
    border-color: transparent;
    background-color: var(--table-th-bg);
  }
  .grid-data-table table.table thead th:first-child {
    border-radius: var(--bs-border-radius-lg) 0 0 var(--bs-border-radius-lg);
  }
  .grid-data-table table.table thead th:last-child {
    border-radius: 0 var(--bs-border-radius-lg) var(--bs-border-radius-lg) 0;
  }
  .grid-data-table table.table tbody td {
    word-break: break-word;
  }
}
.grid-data-table table.table-fixed {
  table-layout: fixed;
}
.grid-data-pager {
  display: flex;
  justify-content: center;
}
.grid-data-pager > ul {
  margin-bottom: 0;
}
.grid-table {
  --bs-table-color: var(--table-color);
  --bs-table-bg: var(--table-bg);
  --bs-table-border-color: var(--table-border-color);
  --bs-table-hover-color: var(--table-hover-color);
  --bs-table-hover-bg: var(--table-hover-bg);
  --table-cell-padding-y: 0.5rem;
  --table-cell-padding-x: 1rem;
  border-top: 1px solid var(--table-border-top-color);
}
.grid-table:has(.g-tr) {
  padding: 0 var(--table-cell-padding-x);
}
@media (min-width: 1024px) {
  .grid-table {
    --table-font-size: 1rem;
  }
}
.grid-table .g-tr {
  --bs-gutter-x: calc(var(--table-cell-padding-x) * 2);
}
.grid-table .g-th, .grid-table table.table th, .grid-table .g-td, .grid-table table.table td {
  color: var(--table-color);
  font-size: var(--table-font-size);
  line-height: 1rem;
  min-height: 56px;
  display: flex;
  align-items: center;
  padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
  border-bottom: 1px solid var(--table-border-color);
  word-break: break-all;
}
.grid-table .g-th:has(.editor-wrap), .grid-table table.table th:has(.editor-wrap), .grid-table .g-td:has(.editor-wrap), .grid-table table.table td:has(.editor-wrap) {
  --table-cell-padding-y:0;
  --table-cell-padding-x:0;
}
.grid-table .g-th, .grid-table table.table th {
  font-weight: 600;
  letter-spacing: -0.0313rem;
  background-color: var(--table-th-bg);
}
.grid-table .g-th .icon-empty, .grid-table table.table th .icon-empty {
  margin-left: 0.25rem;
  margin-top: -1rem;
}
.grid-table table.table {
  --table-cell-padding-y: 1.25rem;
}
.grid-table table.table th {
  text-align: center;
}
.grid-table table.table th,
.grid-table table.table td {
  display: table-cell;
  border-left: 1px solid var(--bs-border-color);
  word-break: break-all;
}
.grid-table table.table th:first-child,
.grid-table table.table td:first-child {
  border-left: 0;
}
.grid-table table.table th.form-padding,
.grid-table table.table td.form-padding {
  padding: 0.5rem;
}
@media (max-width: 1023px) {
  .grid-table table.table th.m-hidden,
  .grid-table table.table td.m-hidden {
    display: none;
  }
  .grid-table table.table th.m-hidden:first-child + th, .grid-table table.table th.m-hidden:first-child + td,
  .grid-table table.table td.m-hidden:first-child + th,
  .grid-table table.table td.m-hidden:first-child + td {
    border-left: 0;
  }
}

.label-input {
  font-weight: 600;
  line-height: 1;
  width: 100%;
  padding: 0.75rem 0;
  margin: 0;
}
@media (max-width: 1023px) {
  .col-12 .label-input {
    padding-top: 0;
  }
}

@media (min-width: 1024px) {
  .row:has(.form-control-lg) .label-input {
    padding-top: 1rem;
  }
}

.grid-data-table .value-type {
  color: var(--bs-gray-600);
  font-weight: 600;
}
@media (max-width: 1023px) {
  .grid-data-table .value-type {
    display: inline-flex;
    margin-bottom: 0.5rem;
  }
}
@media (max-width: 1023px) {
  .grid-data-table .value-has-key {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-top: 0.5rem;
  }
  .grid-data-table .value-has-key .data-key {
    font-weight: 600;
  }
  .grid-data-table .value-has-key .vr {
    --bs-vr-h: .625rem;
  }
  .grid-data-table .value-has-key:has(.data-value:empty) {
    display: none;
  }
}
@media (max-width: 1023px) {
  .grid-data-table td:not(:has(.value-has-key)) + td:has(.value-has-key) .value-has-key {
    margin-top: 1rem;
  }
}
.grid-data-table .btn-grid-title {
  display: inline-block;
  max-width: 100%;
  font-weight: bold;
  text-decoration: none;
}
.grid-data-table .btn-grid-title:hover {
  color: var(--bs-primary);
  text-decoration: underline;
}

.change-pw-box .default-pw-box:has(.btn[aria-expanded=true]) {
  display: none !important;
}
.change-pw-box .collapsing {
  transition: none;
}

#header {
  --heder-padding-x: var(--side-padding);
  padding-left: var(--heder-padding-x);
  padding-right: var(--heder-padding-x);
  border-bottom: 1px solid var(--bs-border-color);
  background-color: var(--bs-body-bg);
}
@media (min-width: 1024px) {
  #header {
    --heder-padding-x: 0;
  }
}
#header .header-logo-control {
  height: var(--header-h);
}
@media (min-width: 1024px) {
  #header .header-logo-control {
    height: calc(var(--header-lg-h) - (var(--header-h) + 1px));
  }
}
#header .header-control {
  margin-left: -0.75rem;
}
#header .header-control .btn-header-control {
  text-overflow: ellipsis;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.wrap.home #header .header-control .btn-header-control {
  display: none;
}
@media (min-width: 1024px) {
  #header .header-control .btn-header-control {
    display: none;
  }
}
#header .header-control .btn-header-control .icon-back {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
#header .header-control .btn-header-control .page-title, #header .header-control .btn-header-control .content-title {
  font-size: 1.125rem;
  font-weight: 700;
}
#header .header-control .btn-logo {
  --bs-btn-padding-y: 0;
  --bs-btn-padding-x: 0;
  --bs-btn-color: var(--logo-color);
  display: none;
  align-items: center;
  gap: 0.1875rem;
}
.wrap.home #header .header-control .btn-logo {
  display: flex;
}
@media (min-width: 1024px) {
  #header .header-control .btn-logo {
    display: flex;
    gap: 0.5rem;
  }
}
#header .header-control .btn-logo .icon-logo {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
#header .header-control .btn-logo .icon-logo {
  --icon-box-width: 164px;
  --icon-box-height: 40px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
#header .header-control .btn-logo .icon-logo::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_logo_new.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}
[data-bs-theme=dark] #header .header-control .btn-logo .icon-logo::before {
  background-image: url(../images/icons/icon_logo_new_dark.svg);
}
@media (min-width: 1024px) {
  #header .header-control .btn-logo .icon-logo {
    --icon-box-width: 197px;
    --icon-box-height: 48px;
  }
}
#header .header-btns {
  gap: 0.75rem;
}
@media (min-width: 1024px) {
  #header .header-btns {
    gap: 0.5rem;
  }
  #header .header-btns .header-user-control::before {
    content: "/";
    color: var(--bs-gray-700);
    font-weight: 500;
    padding-right: 2px;
  }
}
#header .header-btns .btn {
  --bs-btn-padding-y: 0;
  --bs-btn-padding-x: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.2rem;
}
@media (min-width: 1024px) {
  #header .header-btns .btn {
    --bs-btn-color: var(--bs-gray-800);
    --bs-btn-font-size: 1.0625rem;
    --bs-btn-font-weight: 700;
    --bs-btn-padding-x: .75rem;
    --bs-btn-padding-y: .5rem;
    width: unset;
    height: unset;
  }
}
#header .header-btns .btn [class*=fa] {
  font-size: 1.125rem;
}
#header .header-btns .btn.user-name {
  min-width: 0;
  gap: 0;
}
#header .header-btns .btn.user-name .icon-mypage {
  margin-right: 0.5rem;
}
.wrap.home #header .header-btns .btn-home {
  display: none;
}
#header .header-btns .icon-home {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
#header .header-btns .icon-home {
  --icon-box-width: 24px;
  --icon-box-height: 24px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
#header .header-btns .icon-home::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_home2.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}
[data-bs-theme=dark] #header .header-btns .icon-home::before {
  filter: brightness(0) invert(1);
}
#header .header-btns .icon-search {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
#header .header-btns .icon-search {
  --icon-box-width: 24px;
  --icon-box-height: 24px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
#header .header-btns .icon-search::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_search2.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}
[data-bs-theme=dark] #header .header-btns .icon-search::before {
  filter: brightness(0) invert(1);
}
@media (min-width: 1024px) {
  #header .header-btns .icon-search {
    --icon-box-width: 20px;
    --icon-box-height: 20px;
  }
}
#header .header-btns .icon-menu {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
#header .header-btns .icon-menu {
  --icon-box-width: 24px;
  --icon-box-height: 24px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
#header .header-btns .icon-menu::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_menu2.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}
[data-bs-theme=dark] #header .header-btns .icon-menu::before {
  filter: brightness(0) invert(1);
}
#header .header-btns .icon-login {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
#header .header-btns .icon-login {
  --icon-box-width: 20px;
  --icon-box-height: 20px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
#header .header-btns .icon-login::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_login.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}
[data-bs-theme=dark] #header .header-btns .icon-login::before {
  filter: brightness(0) invert(1);
}
#header .header-btns .icon-logout {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
#header .header-btns .icon-logout {
  --icon-box-width: 20px;
  --icon-box-height: 20px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
#header .header-btns .icon-logout::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_logout.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}
[data-bs-theme=dark] #header .header-btns .icon-logout::before {
  filter: brightness(0) invert(1);
}
#header .header-btns .icon-join {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
#header .header-btns .icon-join {
  --icon-box-width: 20px;
  --icon-box-height: 20px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
#header .header-btns .icon-join::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_join.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}
[data-bs-theme=dark] #header .header-btns .icon-join::before {
  filter: brightness(0) invert(1);
}
#header .header-nav {
  --bs-navbar-padding-y: 0;
  background-color: var(--bs-body-bg);
}
@media (min-width: 1024px) {
  #header .header-nav {
    height: var(--header-h);
    border-top: 1px solid var(--bs-border-color);
  }
}
#header .header-nav:has(.collapsing, .collapse.show) {
  border-top: 1px solid var(--bs-border-color);
}
#header .header-nav .navbar-nav {
  --bs-nav-link-color: var(--bs-gray-800);
  --bs-nav-link-font-size: 1.1875rem;
  --bs-nav-link-font-weight: 700;
  --nav-gap: 0;
  gap: var(--nav-gap);
  border-bottom: 1px solid var(--bs-gray-200);
}
@media (min-width: 1024px) {
  #header .header-nav .navbar-nav {
    --nav-gap: 1rem;
    border-bottom: 0;
  }
}
#header .header-nav .navbar-nav .nav-link {
  --bs-nav-link-padding-y: 1.5625rem;
  --bs-nav-link-padding-x: 1.25rem;
  --nav-link-color: var(--bs-primary);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  line-height: 1.375rem;
}
#header .header-nav .navbar-nav .nav-link.show {
  color: var(--nav-link-color);
}
#header .header-nav .navbar-nav .nav-link.show ::after {
  color: var(--bs-navbar-active-color);
}
@media (min-width: 1024px) {
  #header .header-nav .navbar-nav .nav-link {
    --bs-nav-link-padding-y: 0;
    --nav-link-color: inherit;
    height: calc(var(--header-h) - 1px);
  }
  #header .header-nav .navbar-nav .nav-link:hover {
    background-color: var(--bs-gray-200);
  }
}
#header .header-nav .navbar-nav .dropdown-menu {
  --dropdown-margin-x: 1.25rem;
  --dropdown-margin-top: 0;
  --dropdown-margin-bottom: 1rem;
  --dropdown-padding-top: .5rem;
  --bs-dropdown-border-color: var(--bs-gray-200);
  --bs-dropdown-border-width: var(--bs-border-width) 0 0 0;
  --bs-dropdown-border-radius: 0;
  padding-top: var(--dropdown-padding-top);
  margin: var(--dropdown-margin-top) var(--dropdown-margin-x) var(--dropdown-margin-bottom);
  border-style: solid;
  border-width: var(--bs-dropdown-border-width);
  border-color: var(--bs-dropdown-border-color);
}
@media (min-width: 1024px) {
  #header .header-nav .navbar-nav .dropdown-menu {
    --dropdown-margin-x: 0;
    --dropdown-margin-top: .5rem;
    --bs-dropdown-border-width: var(--bs-border-width);
    --bs-dropdown-border-radius: var(--bs-border-radius);
  }
}
#header .header-nav .navbar-nav .dropdown-menu .dropdown-item {
  --bs-dropdown-item-padding-y: 1.125rem;
  --bs-dropdown-item-padding-x: .625rem;
  border-radius: 8px;
  font-size: 1.0625rem;
}
#header .header-nav .navbar-nav .dropdown-menu .dropdown-item[href*=null] {
  opacity: 0.5;
  pointer-events: none;
}
#header .header-nav .navbar-nav .dropdown-menu .dropdown-item:hover {
  color: var(--bs-white);
  background-color: var(--bs-primary);
}
@media (max-width: 1023px) {
  #header .header-nav .navbar-nav .dropdown-menu .dropdown-item:active, #header .header-nav .navbar-nav .dropdown-menu .dropdown-item:hover {
    --bs-dropdown-link-active-color: color: var(--bs-navbar-active-color);
    --bs-dropdown-link-active-bg: #cdd7e4;
  }
}
@media (min-width: 1024px) {
  #header .header-nav .navbar-nav .dropdown-menu .dropdown-item {
    --bs-dropdown-item-padding-y: 0.5rem;
    --bs-dropdown-item-padding-x: 1rem;
    border-radius: 0;
  }
}
@media (max-width: 1023px) {
  #header .header-nav .navbar-nav {
    width: 100%;
  }
  #header .header-nav .navbar-nav .nav-item {
    border-top: 1px solid var(--bs-gray-200);
  }
}
@media (max-width: 1023px) {
  #header .gnb-wrap {
    --gnb-header-padding-x: 1.25rem;
    --gnb-header-padding-y: 1rem;
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 110%;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: var(--bs-white);
    z-index: 1100;
    transition: left 0.35s ease;
  }
  #header .gnb-wrap.show {
    --header-h: max-content;
    left: 0;
  }
  #header .gnb-wrap .header-logo-control {
    flex: 0;
  }
  #header .gnb-wrap .header-logo-control .header-control {
    padding: var(--gnb-header-padding-y) var(--gnb-header-padding-x);
  }
  #header .gnb-wrap .header-logo-control .header-btns {
    padding: var(--gnb-header-padding-y) var(--gnb-header-padding-x);
  }
  #header .gnb-wrap .header-logo-control .header-btns .btn {
    --bs-btn-font-size: 1.0625rem;
    width: unset;
    height: 2.5rem;
  }
  #header .gnb-wrap .navbar.header-nav {
    overflow: hidden;
    flex: 1 0;
    justify-content: flex-start;
    align-items: flex-start;
  }
  #header .gnb-wrap .navbar.header-nav > .container,
  #header .gnb-wrap .navbar.header-nav .navbar-nav {
    height: 100%;
  }
  #header .gnb-wrap .navbar.header-nav .navbar-nav {
    overflow-y: auto;
  }
}
@media (min-width: 1024px) {
  #header .gnb-wrap {
    display: block !important;
  }
}

.search-wrap {
  position: fixed;
  width: 100%;
  background-color: var(--bs-white);
  z-index: 1100;
  box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.08);
  overflow: hidden;
}
@media (max-width: 1023px) {
  .search-wrap {
    display: block;
    top: 0;
    height: 100%;
    left: 101%;
    transition: left 0.35s ease;
  }
  .search-wrap.show {
    left: 0;
    height: 100%;
    overflow: visible;
  }
}
@media (min-width: 1024px) {
  .search-wrap {
    top: var(--header-lg-h);
    max-height: 0;
    transition: max-height 0.35s ease;
  }
  .search-wrap.show {
    max-height: 39.375rem;
  }
}
.search-wrap .container {
  --search-padding-top: var(--header-h);
  --search-padding-bottom: 2rem;
  --search-padding-x: 1.25rem;
  position: relative;
  max-width: calc(43.75rem + var(--search-padding-x) * 2);
  margin: 0 auto;
  padding: var(--search-padding-top) var(--search-padding-x) var(--search-padding-bottom);
}
@media (min-width: 1024px) {
  .search-wrap .container {
    --search-padding-top: 5rem;
    --search-padding-bottom: 5rem;
    --search-padding-x: 1.25rem;
  }
}
.search-wrap .form-search-box {
  --form-padding: 1.3125rem .75rem 1.0625rem;
  --form-font-size: 1.125rem;
  align-items: center;
  border-bottom: 2px solid var(--bs-gray-200);
}
.search-wrap .form-search-box .form-control-search {
  display: block;
  width: 100%;
  padding: 1.125rem 0;
  border: 0;
  font-size: var(--form-font-size);
  font-weight: 500;
  line-height: 1em;
}
.search-wrap .form-search-box .form-control-search::-moz-placeholder {
  color: var(--bs-gray-800);
}
.search-wrap .form-search-box .form-control-search::placeholder {
  color: var(--bs-gray-800);
}
.search-wrap .form-search-box:focus {
  box-shadow: 0 0 0 0.25rem rgba(0, 100, 240, 0.25);
}
.search-wrap .form-search-box .btn {
  flex-shrink: 0;
  margin-left: 1.5rem;
  padding: 0;
}
@media (min-width: 1024px) {
  .search-wrap .form-search-box {
    --form-padding: 1.3125rem .75rem 1.0625rem;
    --form-font-size: 1.25rem;
  }
}

.search-keyword-group {
  --search-item-gap: 0;
  overflow: hidden;
  gap: var(--search-item-gap);
}
.search-keyword-wrap .search-keyword-group {
  background-color: var(--bs-white);
}
.search-keyword-group .search-title {
  --search-title-size: 1.125rem;
}
.search-keyword-group .search-title .title {
  font-size: var(--search-title-size);
}
.search-keyword-group .search-item {
  flex: 1;
  width: 100%;
  min-width: 0;
}
.search-keyword-group .search-item .search-title h2.title {
  color: var(--bs-secondary);
}
@media (max-width: 1023px) {
  .search-keyword-group .search-item:first-child {
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--bs-gray-200);
  }
}
.search-keyword-group .icon-del {
  padding: 0;
  width: 30px;
  height: 30px;
}
.search-keyword-group .icon-del::before {
  --bs-btn-color: var(--bs-gray-700);
  content: "\f00d";
  font-size: 0.875rem;
  font-family: "Font Awesome 6 Pro";
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 1024px) {
  .search-keyword-group {
    --search-item-gap: 5rem;
  }
}
.search-keyword-group .search-list {
  margin: 0 -0.3125rem;
}
.search-keyword-group ol.search-list {
  counter-reset: search-ranking;
}
.search-keyword-group ol.search-list li::before {
  counter-increment: search-ranking;
  content: counter(search-ranking);
  display: inline-block;
  padding: 0.125rem 0.1875rem 0 0.3125rem;
  font-weight: 700;
  color: var(--bs-primary);
  font-size: 1rem;
}
.search-keyword-group .btn-search-item {
  --bs-btn-padding-x: .3125rem;
  --bs-btn-padding-y: .3125rem;
  --bs-btn-color: var(--bs-gray-700);
  --bs-btn-font-size: 1.125rem;
  text-align: left;
}
@media (min-width: 1024px) {
  .search-keyword-group .btn-toggle-close {
    --btn-close-top: 2.5rem;
    --btn-close-right: calc(-4.375rem - var(--btn-close-size));
  }
}

.btn-toggle-close {
  --bs-btn-padding-x: .5rem;
  --bs-btn-padding-y: .5rem;
  --btn-close-size: 2.5rem;
  --btn-close-top: .625rem;
  --btn-close-right: .625rem;
  position: absolute;
  top: var(--btn-close-top);
  right: var(--btn-close-right);
  width: var(--btn-close-size);
  height: var(--btn-close-size);
}
.btn-toggle-close i.fa-xmark {
  font-size: 1.25rem;
}

#footer {
  --footer-padding-x: var(--side-padding);
  padding-left: var(--footer-padding-x);
  padding-right: var(--footer-padding-x);
  padding-bottom: 1.4375rem;
  background-color: var(--footer-bg);
}
@media (min-width: 1280px) {
  #footer {
    --footer-padding-x: 0;
  }
}
#footer > [class*=container] {
  padding-left: 0;
  padding-right: 0;
}
#footer .footer-top {
  display: flex;
  justify-content: center;
  margin-left: calc(var(--footer-padding-x) * -1);
  margin-right: calc(var(--footer-padding-x) * -1);
  border-top: 1px solid var(--bs-gray-200);
  border-bottom: 1px solid var(--bs-gray-200);
  background-color: var(--bs-body-bg);
}
#footer .footer-top .btn-family-site {
  --bs-btn-padding-y: 1.1875rem;
  --bs-btn-padding-x: 1.4375rem;
  width: 100%;
}
@media (min-width: 1280px) {
  #footer .footer-top .btn-family-site {
    --bs-btn-border-color: var(--bs-gray-200);
    --bs-btn-hover-border-color: var(--bs-gray-200);
    width: 212px;
    margin-top: -1px;
    margin-bottom: -1px;
  }
}
#footer .footer-body {
  padding-top: 1.4375rem;
}
@media (min-width: 1280px) {
  #footer .footer-body {
    padding-top: 2.5rem;
  }
}
#footer .footer-body .footer-logo {
  gap: 0.5rem;
}
#footer .footer-body .footer-logo .icon-logo {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
#footer .footer-body .footer-logo .icon-logo {
  --icon-box-width: 136px;
  --icon-box-height: 32px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
#footer .footer-body .footer-logo .icon-logo::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_logo_new.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}
[data-bs-theme=dark] #footer .footer-body .footer-logo .icon-logo::before {
  background-image: url(../images/icons/icon_logo_new_dark.svg);
}
@media (min-width: 1024px) {
  #footer .footer-body .footer-logo .icon-logo {
    --icon-box-width: 197px;
    --icon-box-height: 48px;
  }
}
#footer .footer-body .footer-information {
  margin-top: 1.875rem;
}
@media (min-width: 1280px) {
  #footer .footer-body .footer-information {
    margin-top: 2.5rem;
  }
}
#footer .footer-body .footer-information address {
  font-size: inherit;
  font-weight: 400;
  margin-bottom: 12px;
}
@media (min-width: 1280px) {
  #footer .footer-body .footer-information address {
    font-size: 1.0625rem;
  }
}
#footer .footer-body .footer-information .btn {
  --bs-btn-color: var(--bs-gray-800);
  --bs-btn-font-size: 1.0625rem;
  --bs-btn-font-weight: 700;
  --bs-btn-padding-y: .4375rem;
  --bs-btn-padding-x: 0;
}
#footer .footer-body .footer-information .infomation-tel a {
  --bs-btn-padding-y: .4375rem;
  text-align: left;
}
#footer .footer-body .footer-information .btn-location {
  --bs-btn-font-size: .9375rem;
  --bs-btn-line-height: 1;
  text-align: left;
}
@media (max-width: 1279px) {
  #footer .footer-body .footer-information .btn-location {
    margin-top: 0.875rem;
  }
}
#footer .footer-body .footer-information .btn-location i {
  font-size: 0.625rem;
  transform: translateY(-1px);
}
#footer .footer-body .footer-link-banner {
  margin-top: 1.25rem;
  padding-top: 0.9375rem;
  border-top: 1px solid var(--bs-gray-200);
}
@media (min-width: 1280px) {
  #footer .footer-body .footer-link-banner {
    margin-top: 2rem;
  }
}
#footer .footer-body .footer-link-banner .footer-links {
  gap: 1rem;
}
@media (max-width: 1279px) {
  #footer .footer-body .footer-link-banner .footer-links {
    gap: 1.5rem;
  }
}
#footer .footer-body .footer-link-banner .footer-links .btn-footer-link {
  --bs-btn-padding-y: .6875rem;
  --bs-btn-padding-x: .1875rem;
}
#footer .footer-body .footer-link-banner .copyright {
  color: var(--bs-gray-600);
  font-size: 0.9375rem;
}
@media (max-width: 1279px) {
  #footer .footer-body .footer-link-banner .copyright {
    margin-top: 1.5rem;
  }
}
#footer .footer-body .footer-link-banner .footer-banner {
  max-height: 2.375rem;
}
@media (max-width: 1279px) {
  #footer .footer-body .footer-link-banner .footer-banner {
    margin-top: 2rem;
  }
}

#content:has(.login) {
  --container-main-padding-y: 2.5rem;
}
@media (min-width: 1024px) {
  #content:has(.login) {
    --container-main-padding-y: 5.25rem;
  }
}

.login .login-wrap {
  --panel-padding-y: 1.5rem;
  --panel-padding-x: 1.5rem;
  border: var(--bs-border-width) var(--bs-border-style) var(--bs-gray-200);
}
.login .login-body {
  margin-top: 2.25rem;
}
@media (min-width: 1024px) {
  .login {
    max-width: 640px;
  }
  .login .login-wrap {
    --panel-padding-y: 3.125rem;
    --panel-padding-x: 5rem;
  }
}
.login-input,
.login-input form {
  gap: 0.75rem;
}
.login-input-box .form-control {
  height: 56px;
}
.login-control {
  margin-top: 0.75rem;
}
.login-control .btn-login-submit {
  --bs-btn-font-size: 1.125rem;
  --bs-btn-font-weight: 700;
  --bs-btn-line-height: 1;
  --bs-btn-padding-y: 1.375rem;
}
.login-control .user-search {
  margin-top: 0.875rem;
}
.login-control .user-search .btn-user-search {
  --bs-btn-color: var(--bs-gray-800);
  --bs-btn-padding-x: .4375rem;
}
.login-control .user-search .vr {
  max-height: 1rem;
  align-self: unset;
}
.login-social {
  gap: 0.75rem;
}
.login-social .btn-social-login {
  --bs-btn-color: var(--bs-gray-800);
  --bs-btn-font-weight: 600;
  --bs-btn-padding-y: 1.125rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
}
.login-social .btn-social-login i.icon-naver {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.login-social .btn-social-login i.icon-naver {
  --icon-box-width: 16px;
  --icon-box-height: 16px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.login-social .btn-social-login i.icon-naver::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_naver.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}
.login-social .btn-social-login i.icon-kakao {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.login-social .btn-social-login i.icon-kakao {
  --icon-box-width: 16px;
  --icon-box-height: 16px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.login-social .btn-social-login i.icon-kakao::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_kakao.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}
@media (max-width: 1023px) {
  .login-join .btn-join {
    margin-top: 12px;
  }
}
.login-text-box {
  padding-left: 1.25rem;
  margin-bottom: 0;
  line-height: 1.5rem;
  color: var(--bs-gray-600);
}
.login-text-box::before {
  content: "※";
  margin-left: -1.25rem;
}
.login .tab-wrap .tab-btns {
  margin-bottom: 2.25rem;
}
.login .nav-link-outline {
  padding: 0.875rem 1.5rem;
}
.login .nav-link-outline.active {
  background-color: var(--bs-white);
  border-color: var(--bs-blue);
  color: var(--bs-blue);
  font-weight: 700;
}

.join-step,
.request-step,
.service-step,
.export-step {
  --step-font-size: 1.125rem;
  --step-font-weight: 600;
  --step-font-color: var(--bs-gray-600);
  --step-active-font-color: var(--bs-gray-800);
  --step-end-font-color: var(--bs-blue);
  --icon-box-size: 48px;
  --icon-box-bg-color: var(--bs-gray-400);
  --icon-box-active-bg-color: var(--bs-blue);
  --icon-box-end-bg-color: rgba(0, 100, 240, 0.1);
  display: flex;
  justify-content: center;
  padding-left: 0;
  margin: 3.75rem 0;
  list-style: none;
  gap: 3.75rem;
}
.join-step > li,
.request-step > li,
.service-step > li,
.export-step > li {
  display: flex;
  align-items: center;
  font-size: var(--step-font-size);
  font-weight: var(--step-font-weight);
  color: var(--step-font-color);
  position: relative;
}
.join-step > li .d-flex,
.request-step > li .d-flex,
.service-step > li .d-flex,
.export-step > li .d-flex {
  gap: 0.625rem;
}
.join-step > li i.icon,
.request-step > li i.icon,
.service-step > li i.icon,
.export-step > li i.icon {
  display: inline-block;
  flex-shrink: 0;
  width: var(--icon-box-size) !important;
  height: var(--icon-box-size) !important;
  border-radius: 50%;
  background-color: var(--icon-box-bg-color);
}
.join-step > li.active,
.request-step > li.active,
.service-step > li.active,
.export-step > li.active {
  color: var(--step-active-font-color);
}
.join-step > li.active .icon,
.request-step > li.active .icon,
.service-step > li.active .icon,
.export-step > li.active .icon {
  background-color: var(--icon-box-active-bg-color);
}
.join-step > li.end,
.request-step > li.end,
.service-step > li.end,
.export-step > li.end {
  color: var(--step-end-font-color);
}
.join-step > li.end .icon,
.request-step > li.end .icon,
.service-step > li.end .icon,
.export-step > li.end .icon {
  background-color: var(--icon-box-end-bg-color);
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.join-step > li.end .icon,
.request-step > li.end .icon,
.service-step > li.end .icon,
.export-step > li.end .icon {
  --icon-box-width: 16px;
  --icon-box-height: 16px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.join-step > li.end .icon::before,
.request-step > li.end .icon::before,
.service-step > li.end .icon::before,
.export-step > li.end .icon::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_step_end.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}
.join-step > li .dot-bg,
.request-step > li .dot-bg,
.service-step > li .dot-bg,
.export-step > li .dot-bg {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  position: absolute;
  top: 24px;
  right: -2.4375rem;
  margin-top: -2.5px;
}
.join-step > li .dot-bg::before, .join-step > li .dot-bg::after,
.request-step > li .dot-bg::before,
.request-step > li .dot-bg::after,
.service-step > li .dot-bg::before,
.service-step > li .dot-bg::after,
.export-step > li .dot-bg::before,
.export-step > li .dot-bg::after {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--bs-gray-200);
}
@media (max-width: 1023px) {
  .join-step,
  .request-step,
  .service-step,
  .export-step {
    margin-top: 0;
  }
  .join-step li .step-name,
  .request-step li .step-name,
  .service-step li .step-name,
  .export-step li .step-name {
    width: 100%;
    font-size: 1rem;
  }
}
.join-step .join-step01 .icon,
.request-step .join-step01 .icon,
.service-step .join-step01 .icon,
.export-step .join-step01 .icon {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.join-step .join-step01 .icon,
.request-step .join-step01 .icon,
.service-step .join-step01 .icon,
.export-step .join-step01 .icon {
  --icon-box-width: 24px;
  --icon-box-height: 24px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.join-step .join-step01 .icon::before,
.request-step .join-step01 .icon::before,
.service-step .join-step01 .icon::before,
.export-step .join-step01 .icon::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_step01.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}
.join-step .join-step02 .icon,
.request-step .join-step02 .icon,
.service-step .join-step02 .icon,
.export-step .join-step02 .icon {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.join-step .join-step02 .icon,
.request-step .join-step02 .icon,
.service-step .join-step02 .icon,
.export-step .join-step02 .icon {
  --icon-box-width: 24px;
  --icon-box-height: 24px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.join-step .join-step02 .icon::before,
.request-step .join-step02 .icon::before,
.service-step .join-step02 .icon::before,
.export-step .join-step02 .icon::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_step02.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}
.join-step .join-step03 .icon,
.request-step .join-step03 .icon,
.service-step .join-step03 .icon,
.export-step .join-step03 .icon {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.join-step .join-step03 .icon,
.request-step .join-step03 .icon,
.service-step .join-step03 .icon,
.export-step .join-step03 .icon {
  --icon-box-width: 24px;
  --icon-box-height: 24px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.join-step .join-step03 .icon::before,
.request-step .join-step03 .icon::before,
.service-step .join-step03 .icon::before,
.export-step .join-step03 .icon::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_step03.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}
.join-step .request-step01 .icon,
.request-step .request-step01 .icon,
.service-step .request-step01 .icon,
.export-step .request-step01 .icon {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.join-step .request-step01 .icon,
.request-step .request-step01 .icon,
.service-step .request-step01 .icon,
.export-step .request-step01 .icon {
  --icon-box-width: 24px;
  --icon-box-height: 24px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.join-step .request-step01 .icon::before,
.request-step .request-step01 .icon::before,
.service-step .request-step01 .icon::before,
.export-step .request-step01 .icon::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_request_step01.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}
.join-step .request-step02 .icon,
.request-step .request-step02 .icon,
.service-step .request-step02 .icon,
.export-step .request-step02 .icon {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.join-step .request-step02 .icon,
.request-step .request-step02 .icon,
.service-step .request-step02 .icon,
.export-step .request-step02 .icon {
  --icon-box-width: 24px;
  --icon-box-height: 24px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.join-step .request-step02 .icon::before,
.request-step .request-step02 .icon::before,
.service-step .request-step02 .icon::before,
.export-step .request-step02 .icon::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_request_step02.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}
.join-step .request-step03 .icon,
.request-step .request-step03 .icon,
.service-step .request-step03 .icon,
.export-step .request-step03 .icon {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.join-step .request-step03 .icon,
.request-step .request-step03 .icon,
.service-step .request-step03 .icon,
.export-step .request-step03 .icon {
  --icon-box-width: 24px;
  --icon-box-height: 24px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.join-step .request-step03 .icon::before,
.request-step .request-step03 .icon::before,
.service-step .request-step03 .icon::before,
.export-step .request-step03 .icon::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_request_step03.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}
.join-step .request-step04 .icon,
.request-step .request-step04 .icon,
.service-step .request-step04 .icon,
.export-step .request-step04 .icon {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.join-step .request-step04 .icon,
.request-step .request-step04 .icon,
.service-step .request-step04 .icon,
.export-step .request-step04 .icon {
  --icon-box-width: 24px;
  --icon-box-height: 24px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.join-step .request-step04 .icon::before,
.request-step .request-step04 .icon::before,
.service-step .request-step04 .icon::before,
.export-step .request-step04 .icon::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_request_step04.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}
.join-step .service-step01 .icon,
.request-step .service-step01 .icon,
.service-step .service-step01 .icon,
.export-step .service-step01 .icon {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.join-step .service-step01 .icon,
.request-step .service-step01 .icon,
.service-step .service-step01 .icon,
.export-step .service-step01 .icon {
  --icon-box-width: 24px;
  --icon-box-height: 24px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.join-step .service-step01 .icon::before,
.request-step .service-step01 .icon::before,
.service-step .service-step01 .icon::before,
.export-step .service-step01 .icon::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_service_step01.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}
.join-step .service-step02 .icon,
.request-step .service-step02 .icon,
.service-step .service-step02 .icon,
.export-step .service-step02 .icon {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.join-step .service-step02 .icon,
.request-step .service-step02 .icon,
.service-step .service-step02 .icon,
.export-step .service-step02 .icon {
  --icon-box-width: 24px;
  --icon-box-height: 24px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.join-step .service-step02 .icon::before,
.request-step .service-step02 .icon::before,
.service-step .service-step02 .icon::before,
.export-step .service-step02 .icon::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_service_step02.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}
.join-step .export-step01 .icon,
.request-step .export-step01 .icon,
.service-step .export-step01 .icon,
.export-step .export-step01 .icon {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.join-step .export-step01 .icon,
.request-step .export-step01 .icon,
.service-step .export-step01 .icon,
.export-step .export-step01 .icon {
  --icon-box-width: 24px;
  --icon-box-height: 24px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.join-step .export-step01 .icon::before,
.request-step .export-step01 .icon::before,
.service-step .export-step01 .icon::before,
.export-step .export-step01 .icon::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_export_step01.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}
.join-step .export-step02 .icon,
.request-step .export-step02 .icon,
.service-step .export-step02 .icon,
.export-step .export-step02 .icon {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.join-step .export-step02 .icon,
.request-step .export-step02 .icon,
.service-step .export-step02 .icon,
.export-step .export-step02 .icon {
  --icon-box-width: 24px;
  --icon-box-height: 24px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.join-step .export-step02 .icon::before,
.request-step .export-step02 .icon::before,
.service-step .export-step02 .icon::before,
.export-step .export-step02 .icon::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_export_step02.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}
.join-step .export-step03 .icon,
.request-step .export-step03 .icon,
.service-step .export-step03 .icon,
.export-step .export-step03 .icon {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.join-step .export-step03 .icon,
.request-step .export-step03 .icon,
.service-step .export-step03 .icon,
.export-step .export-step03 .icon {
  --icon-box-width: 24px;
  --icon-box-height: 24px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.join-step .export-step03 .icon::before,
.request-step .export-step03 .icon::before,
.service-step .export-step03 .icon::before,
.export-step .export-step03 .icon::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_export_step03.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}
.join-step .export-step04 .icon,
.request-step .export-step04 .icon,
.service-step .export-step04 .icon,
.export-step .export-step04 .icon {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.join-step .export-step04 .icon,
.request-step .export-step04 .icon,
.service-step .export-step04 .icon,
.export-step .export-step04 .icon {
  --icon-box-width: 24px;
  --icon-box-height: 24px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.join-step .export-step04 .icon::before,
.request-step .export-step04 .icon::before,
.service-step .export-step04 .icon::before,
.export-step .export-step04 .icon::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_export_step04.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}

.terms-wrap .terms-header {
  gap: 0.5rem;
  align-items: flex-start;
}
.terms-wrap .btn-terms {
  --bs-btn-padding-x: 0;
  --bs-btn-padding-y: 0;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
}
.terms-wrap .btn-terms::before {
  font-family: "Font Awesome 6 Pro";
  content: "\f078";
  color: var(--bs-gray-400);
  font-size: 1.25rem;
}
.terms-wrap .btn-terms[aria-expanded=true]::before {
  content: "\f077";
  color: var(--bs-gray-800);
}
.terms-wrap .gray-box {
  --panel-padding-y: 1rem;
  --panel-padding-x: 1rem;
  padding: var(--panel-padding-y) var(--panel-padding-y);
}
.terms-wrap .sample-code {
  --sample-code-height: 18rem;
  height: var(--sample-code-height);
}
@media (min-width: 1024px) {
  .terms-wrap .gray-box {
    --panel-padding-y: 1.5rem;
    --panel-padding-x: 1.5rem;
  }
  .terms-wrap .sample-code {
    --sample-code-height: 7.5rem;
  }
}

.icon-circle-lg {
  --circle-lg-size: 4rem;
  width: var(--circle-lg-size) !important;
  height: var(--circle-lg-size) !important;
  border-radius: 50%;
  background-color: var(--bs-white);
}
.icon-circle-lg.icon-mobile {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-circle-lg.icon-mobile {
  --icon-box-width: 36px;
  --icon-box-height: 36px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-circle-lg.icon-mobile::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_mobile.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}
.icon-circle-lg.icon-ipin {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.icon-circle-lg.icon-ipin {
  --icon-box-width: 36px;
  --icon-box-height: 36px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.icon-circle-lg.icon-ipin::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_ipin.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}

.panel.crtfd-box {
  --panel-padding-y: 2rem;
  --panel-padding-x: 2rem;
  --panel-flex-gap: 1.5rem;
  --panel-flex-direction: column;
  padding: var(--panel-padding-y) var(--panel-padding-x);
}
.panel.crtfd-box > .d-flex {
  gap: var(--panel-flex-gap);
  flex-direction: var(--panel-flex-direction);
  margin-bottom: 0;
}
@media (min-width: 1024px) {
  .panel.crtfd-box {
    --panel-padding-y: 2.5rem;
    --panel-padding-x: 2.5rem;
  }
  .panel.crtfd-box > .d-flex {
    --panel-flex-gap: 2.25rem;
    --panel-flex-direction: row;
  }
}

.category-list-tabs {
  margin-bottom: 1.25rem;
}
@media (min-width: 1024px) {
  .category-list-tabs {
    margin-bottom: 2.25rem;
  }
}
.category-list-depth.panel {
  --panel-padding-y: 0;
  --panel-padding-x: 0;
  --panel-border-radius: 0;
}
@media (min-width: 1024px) {
  .category-list-depth.panel {
    --panel-padding-y: .75rem;
    --panel-border-radius: 1rem;
    min-width: 240px;
    padding-top: var(--panel-padding-y);
  }
}
.category-list-depth.panel:has(ul#leftTabList:empty) {
  display: none;
}
.category-list-depth.panel .nav {
  --bs-nav-link-padding-y: .75rem;
  --bs-nav-link-padding-x: .25rem;
  --bs-nav-link-font-weight: 600;
  --bs-nav-link-hover-color: var(--bs-link-hover-color);
  --bs-nav-underline-link-active-color: var(--bs-link-hover-color);
  --bs-nav-underline-active-border-color: var(--bs-link-hover-color);
  width: -moz-max-content;
  width: max-content;
  padding: 0 1.25rem;
}
@media (min-width: 1024px) {
  .category-list-depth.panel .nav {
    --bs-nav-link-padding-y: 1.0625rem;
    --bs-nav-link-padding-x: 1.25rem;
    --bs-nav-underline-gap: 0;
    --bs-nav-underline-border-width: 0;
    width: 100%;
    padding: 0;
  }
}
@media (min-width: 1024px) {
  .category-list-depth.panel .nav .nav-item .nav-link {
    width: 100%;
    padding-left: var(--bs-nav-link-padding-x);
    padding-right: var(--bs-nav-link-padding-x);
  }
}
.category-list .search-area {
  --panel-border-radius: 0;
  --panel-bg: var(--bs-gray-100);
  margin-left: calc(var(--bs-gutter-x) * -0.5);
  margin-right: calc(var(--bs-gutter-x) * -0.5);
}
@media (min-width: 1024px) {
  .category-list .search-area {
    --panel-border-radius: 1rem;
    margin-left: unset;
    margin-right: unset;
  }
}
.category-list .search-area .search-btn-group .btn-form-check:has(input:focus, input:focus-visible) {
  box-shadow: var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) var(--bs-focus-ring-blur, 0) var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}
.category-list .search-area .btn-category-search {
  margin-top: 1.5rem;
}
.category-list-body {
  padding-top: 2rem;
}
@media (max-width: 1023px) {
  .category-list-body {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}
.category-list-body .switch-btn-toggle .btn.active {
  display: none;
}
.category-list-order {
  display: none;
  justify-content: end;
  align-items: center;
  gap: 0.375rem;
  margin-top: 2.25rem;
  margin-bottom: 0.5rem;
}
.category-list-order .btn-link {
  --bs-btn-color: var(--bs-gray-700);
  --bs-btn-active-color: var(--bs-gray-800);
  --bs-btn-padding-y: .3125rem;
  --bs-btn-padding-x: .3125rem;
  text-decoration: none;
}
.category-list-order .btn-link.active, .category-list-order .btn-link:active {
  text-decoration: underline;
}
.category-list:has(.category-view-type .type-list.active) .category-list-order {
  display: flex;
}
.category-list .category-view-map {
  --panel-padding-y: 0;
  --panel-padding-x: 0;
  height: 640px;
  max-height: 640px;
  margin-top: 2.25rem;
}
@media (min-width: 1024px) {
  .category-list .category-view-map {
    height: 720px;
    max-height: 720px;
  }
}
.category-list .category-view-map .map-svg {
  min-width: 820px;
  width: 100%;
  min-height: 700px;
  height: 100%;
}
.category-list .category-view-map .map-svg g.svg-wrap {
  transform: translate(2.5rem);
}
.category-list .category-view-map .map-svg .circle {
  fill: #0064F0;
}
.category-list .category-view-map .map-svg .link {
  fill: none;
  stroke: #CBD1DC;
  stroke-width: 1px;
}
.category-list .category-view-map .map-svg .map-link {
  text-decoration: none;
}
.category-list .category-view-map .map-svg .map-link .rect {
  fill: #fff;
  stroke: #20212C;
  stroke-width: 1px;
}
.category-list .category-view-map .map-svg .map-link .text {
  font-size: 0.875rem;
  fill: #20212C;
}
.category-list .category-view-map .map-svg .map-link:hover .rect {
  fill: #0064F0;
  stroke: #0064F0;
}
.category-list .category-view-map .map-svg .map-link:hover .text {
  fill: #fff;
}

.card-list {
  row-gap: 1.5rem;
}
.card-list .card.item-card {
  --bs-card-spacer-y: 1.5rem;
  --bs-card-spacer-x: 1.5rem;
  --bs-card-border-color: var(--bs-gray-200);
  --bs-card-border-radius: 1.5rem;
  --bs-card-inner-border-radius: var(--bs-card-border-radius);
  --bs-card-cap-padding-y: .75rem;
  --bs-card-title-spacer-y: 0;
}
.card-list .card.item-card .card-body .card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}
.card-list .card.item-card .card-body .card-top .badge {
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.card-list .card.item-card .card-body .card-top .card-icon-favorite {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.card-list .card.item-card .card-body .card-subtitle {
  margin-top: 1rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.card-list .card.item-card .card-body .card-title.btn-card-link {
  --bs-btn-padding-x: .625rem;
  --bs-btn-padding-y: .5rem;
  --bs-btn-font-size: 1.25rem;
  --bs-btn-font-weight: 600;
  max-height: calc(3em + var(--bs-btn-padding-y) * 2);
  margin-left: -0.6875rem;
  text-align: left;
  line-height: 1.5;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
@media (min-width: 1024px) {
  .card-list .card.item-card .card-body .card-title.btn-card-link {
    height: calc(3em + var(--bs-btn-padding-y) * 2);
  }
}
.card-list .card.item-card .card-body .card-keyword {
  margin-top: 0.375rem;
  white-space: normal;
  /*
  display: flex;
  gap: 0 .5rem;
  flex-wrap: wrap;
  max-height: max-content;
  */
}
.card-list .card.item-card .card-body .card-keyword span {
  padding-right: 6px;
}
@media (min-width: 1024px) {
  .card-list .card.item-card .card-body .card-keyword {
    max-height: 1.75rem;
    min-height: 1.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.2s;
  }
  .card-list .card.item-card .card-body .card-keyword:hover, .card-list .card.item-card .card-body .card-keyword:focus {
    max-height: 10vh;
    white-space: normal;
  }
}
.card-list .card.item-card .card-body .card-bottom {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 1rem;
  padding-top: 1.5rem;
}
.card-list .card.item-card .card-body .card-bottom .card-info-count {
  color: var(--bs-gray-600);
  display: flex;
  align-items: center;
  gap: 0.125rem;
}
.card-list .card.item-card .card-body .card-chart {
  --chart-height: 9.625rem;
  display: flex;
  align-items: center;
  height: var(--chart-height);
  margin-top: 1rem;
}
@media (min-width: 1024px) {
  .card-list .card.item-card .card-body .card-chart {
    --chart-height: 7.1875rem;
  }
}

.category-pagination {
  display: flex;
  justify-content: center;
}
@media (max-width: 1023px) {
  .category-pagination {
    margin-left: -1.25rem;
    margin-right: -1.25rem;
  }
}

.wrap.home .container-main {
  padding-top: 1.25rem;
}

.section-main {
  --section-main-padding-y: 3.75rem;
  --swiper-btn-size: 2.25rem;
  --swiepr-btn-color: var(--bs-secondary);
  --swiper-btn-bg: var(--bs-gray-100);
  --swiper-btn-icon-color: var(--bs-white);
  --swiper-btn-autoplay-bg: var(--bs-secondary);
  padding-bottom: var(--section-main-padding-y);
  display: flex;
  flex-direction: column;
  gap: var(--section-main-padding-y);
}
@media (min-width: 1024px) {
  .section-main {
    --section-main-padding-y: 5.625rem;
  }
}
.section-main:not(:first-child) {
  padding-top: var(--section-main-padding-y);
}
.section-main .main-text-box {
  --main-title-size: 1.5rem;
  --main-title-color: var(--bs-body-color);
  --main-title-lh: 1.5em;
  --main-text-size: 1rem;
  --main-text-color: var(--bs-gray-700);
  --main-text-lh: 1.5em;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.section-main .main-text-box .title {
  max-height: calc(var(--main-title-lh) * 2);
  font-size: var(--main-title-size);
  color: var(--main-title-color);
  line-height: var(--main-title-lh);
  font-weight: 700;
  letter-spacing: -0.07em;
  overflow: hidden;
}
.section-main .main-text-box .text {
  max-height: calc(var(--main-text-lh) * 2);
  font-size: var(--main-text-size);
  color: var(--main-text-color);
  line-height: var(--main-text-lh);
  overflow: hidden;
}
@media (min-width: 1024px) {
  .section-main .main-text-box {
    --main-title-size: 3rem;
    --main-title-lh: 1.5;
    --main-text-size: 1.1875rem;
    --main-text-lh: 1.7;
  }
}
.section-main .visual-wrap {
  --visual-height: 23.875rem;
  --visual-margin-bottom: 2rem;
  margin-bottom: var(--visual-margin-bottom);
}
.section-main .visual-wrap .swiper-wrapper {
  height: var(--visual-height);
}
.section-main .visual-wrap .swiper-option {
  margin-top: 2rem;
}
.section-main .visual-wrap .visual-item {
  --visual-padding-top: 0;
  --visual-item-height: 21.25rem;
  --visual-direction: column;
  --visual-gap: 1rem;
  --visual-img-width: 100%;
  --visual-img-height: 14.75rem;
  --visual-text-br: block;
  display: flex;
  flex-direction: var(--visual-direction);
  gap: var(--visual-gap);
  height: var(--visual-item-height);
  text-decoration: none;
  background-repeat: no-repeat;
  background-position: 100% 100%;
  background-size: contain;
}
.section-main .visual-wrap .visual-item:focus {
  box-shadow: inset var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) var(--bs-focus-ring-blur, 0) var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}
.section-main .visual-wrap .visual-item .main-text-box {
  padding-top: var(--visual-padding-top);
  width: 100%;
}
.section-main .visual-wrap .visual-item .main-text-box .title {
  transform: translateX(6.25rem);
  transition: transform 0.7s;
  transition-delay: 0.2s;
  opacity: 0;
}
.section-main .visual-wrap .visual-item .main-text-box .text {
  transform: translateX(6.25rem);
  transition: transform 0.7s;
  transition-delay: 0.5s;
  opacity: 0;
}
.section-main .visual-wrap .visual-item .main-text-box .text br {
  display: var(--visual-text-br);
}
.section-main .visual-wrap .visual-item .img-box {
  height: var(--visual-img-height);
  flex-shrink: 0;
}
.section-main .visual-wrap .visual-item .img-box img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
@media (min-width: 1024px) {
  .section-main .visual-wrap .visual-item {
    --visual-padding-top: 1.75rem;
    --visual-margin-bottom: .625rem;
    --visual-direction: row;
    --visual-gap: 2.25rem;
    --visual-img-width: 30rem;
    --visual-img-height: 21.25rem;
    --visual-text-br: none;
  }
}
.section-main .visual-wrap .swiper-slide-active .main-text-box .title,
.section-main .visual-wrap .swiper-slide-active .main-text-box .text {
  transform: translateX(0);
  opacity: 1;
}
@media (min-width: 1024px) {
  .section-main .visual-wrap {
    --visual-height: 20rem;
    --visual-margin-bottom: 1.25rem;
  }
}
.section-main .swiper-option {
  display: flex;
  align-items: center;
  justify-content: center;
}
.section-main .swiper-option .swiper-pagination-custom {
  position: unset;
  display: inline-flex;
  width: auto;
  gap: 0.625rem;
  margin-right: 1.25rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--bs-gray-600);
}
.section-main .swiper-option .swiper-pagination-custom .current-page {
  padding-left: 0;
  color: var(--bs-secondary);
  font-weight: 700;
}
.section-main .swiper-option .swiper-pagination-bullets {
  --swiper-pagination-bullet-height: .5rem;
  --swiper-pagination-bullet-width: .5rem;
  --swiper-pagination-bullet-inactive-color: var(--bs-gray-400);
}
.section-main .swiper-option .swiper-pagination-bullets .swiper-pagination-bullet {
  border-radius: calc(var(--swiper-pagination-bullet-height) / 2);
  opacity: 1;
  transition: width 0.4s;
}
.section-main .swiper-option .swiper-pagination-bullets .swiper-pagination-bullet-active {
  --swiper-pagination-bullet-width: 1.25rem;
  --swiper-pagination-color: var(--bs-primary);
}
.section-main .swiper-option .btn {
  --bs-btn-padding-x: .625rem;
  --bs-btn-padding-y: 0;
  --bs-btn-border-width: 0;
  position: unset;
  width: var(--swiper-btn-size);
  height: var(--swiper-btn-size);
  margin: 0;
  background-color: var(--swiper-btn-bg);
  border-radius: 50%;
}
.section-main .swiper-option .swiper-btns {
  display: flex;
  gap: 0.5rem;
}
.section-main .swiper-option .swiper-btns .btn {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.section-main .swiper-option .swiper-btns .btn:after {
  display: none;
}
.section-main .swiper-option .swiper-btns .btn {
  --icon-box-width: var(--swiper-btn-size);
  --icon-box-height: var(--swiper-btn-size);
  --icon-width: 1rem;
  --icon-height: 1rem;
  --icon-bg-size: auto 0.8125rem;
}
.section-main .swiper-option .swiper-btns .btn::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_arrow_left.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}
[data-bs-theme=dark] .section-main .swiper-option .swiper-btns .btn::before {
  filter: brightness(0) invert(1);
}
.section-main .swiper-option .swiper-btns .btn.swiper-button-disabled {
  opacity: 1;
}
.section-main .swiper-option .swiper-btns .btn.swiper-button-disabled::before {
  opacity: 0.5;
}
.section-main .swiper-option .swiper-btns .btn.swiper-button-next::before {
  transform: rotate(-180deg) translateX(-1px);
  transform-origin: 50%;
}
.section-main .swiper-option .swiper-autoplay-btns {
  display: inline-flex;
  margin-left: 0.75rem;
  z-index: 1;
}
.section-main .swiper-option .swiper-autoplay-btns .btn {
  --swiper-btn-bg: var(--swiper-btn-autoplay-bg);
  display: none;
}
.section-main .swiper-option .swiper-autoplay-btns .btn.on {
  display: block;
}
.section-main .swiper-option .swiper-autoplay-btns .btn.swiper-button-play::before {
  content: "\f04b";
  font-family: "Font Awesome 6 Pro";
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-size: 0.625rem;
  font-weight: 600;
  color: var(--swiper-btn-icon-color);
  margin-top: -0.125rem;
}
.section-main .swiper-option .swiper-autoplay-btns .btn.swiper-button-pause::before {
  content: "";
  display: inline-block;
  height: 0.625rem;
  width: 0.5rem;
  border-left: 2px solid var(--swiper-btn-icon-color);
  border-right: 2px solid var(--swiper-btn-icon-color);
}
@media (min-width: 1024px) {
  .section-main .swiper-option {
    position: absolute;
    left: 0;
    bottom: 1.75rem;
  }
}
.section-main .main-search {
  --search-padding-y: .75rem;
  --search-padding-left: 1rem;
  --search-padding-right: 1.5rem;
  --search-margin-bottom: 1.5rem;
  --search-gap: .625rem;
  --search-direction: column;
  --search-bg: var(--bs-primary);
  position: relative;
  display: flex;
  gap: var(--search-gap);
  flex-direction: var(--search-direction);
  padding: var(--search-padding-y) var(--search-padding-right) var(--search-padding-y) var(--search-padding-left);
  margin-bottom: var(--search-margin-bottom);
  border-radius: 1rem;
  background-color: var(--bs-primary);
}
@media (min-width: 1024px) {
  .section-main .main-search {
    --search-padding-y: 1.5rem;
    --search-padding-left: 2rem;
    --search-padding-right: 2rem;
    --search-direction: row;
    --search-gap: 1.625rem;
  }
}
.section-main .form-search-wrap {
  --search-box-height: 3.25rem;
  --search-box-padding-x: 1.375rem;
  --search-box-margin-bottom: 2rem;
  --search-box-radius: calc(var(--search-box-height) / 2);
  --search-font-size: 1rem;
  width: 100%;
  margin-bottom: var(--search-box-margin-bottom);
}
.section-main .form-search-wrap .form-search-box {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: var(--search-box-height);
  padding: 0 var(--search-box-padding-x);
  border: 2px solid var(--bs-primary);
  border-radius: var(--search-box-radius);
  background-color: var(--bs-white);
  overflow: hidden;
}
.section-main .form-search-wrap .form-search-box .btn-search {
  padding: 0.3125rem;
}
.section-main .form-search-wrap .form-search-box .btn-search:focus-within {
  box-shadow: 0 0 0 0.25rem rgba(0, 100, 240, 0.25);
}
.section-main .form-search-wrap .form-search-box .form-control-search {
  width: 100%;
  border: 0;
  font-size: var(--search-font-size);
  font-weight: 500;
  background-color: inherit;
}
.section-main .form-search-wrap .form-search-box .form-control-search:focus {
  outline: 0;
}
.section-main .form-search-wrap .form-search-box:has(.form-control-search:focus) {
  box-shadow: 0 0 0 0.25rem rgba(0, 100, 240, 0.25);
}
@media (min-width: 1024px) {
  .section-main .form-search-wrap {
    --search-box-margin-bottom: 0;
    --search-box-height: 4rem;
    --search-font-size: 1.25rem;
  }
  .section-main .form-search-wrap .icon-search-lg {
    width: var(--icon-box-width);
    height: var(--icon-box-height);
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }
  .section-main .form-search-wrap .icon-search-lg {
    --icon-box-width: 32px;
    --icon-box-height: 32px;
    --icon-width: var(--icon-box-width);
    --icon-height: var(--icon-box-height);
    --icon-bg-size: contain;
  }
  .section-main .form-search-wrap .icon-search-lg::before {
    content: "";
    font-size: 0;
    width: var(--icon-width);
    height: var(--icon-height);
    background-image: url(../images/icons/icon_search2.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: var(--icon-bg-size);
    transition: all 0.2s ease-in-out;
  }
}
.section-main .keyword-ranking-box {
  --keyword-width: 100%;
  width: var(--keyword-width);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.section-main .keyword-ranking-box .rankingSwiper {
  max-height: 2.375rem;
}
.section-main .keyword-ranking-box .ranking-list {
  width: 100%;
  min-width: 0;
  border-radius: 1rem;
  order: -1;
}
.section-main .keyword-ranking-box .ranking-list ol {
  counter-reset: keyword-ranking;
  padding-bottom: 0.5rem;
  margin-bottom: 0;
}
.section-main .keyword-ranking-box .btn-keyword {
  --bs-btn-padding-x: .5rem;
  --bs-btn-padding-y: .5625rem;
  --bs-btn-font-size: 1.125rem;
  --bs-btn-font-weight: 700;
  --bs-btn-color: var(--bs-white);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-active-color: var(--bs-white);
  --btn-num-color: var(--bs-white);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-align: left;
  border-radius: 0.5rem;
  line-height: 1.25rem;
}
.section-main .keyword-ranking-box .btn-keyword::before {
  counter-increment: keyword-ranking;
  content: counter(keyword-ranking);
  flex-shrink: 0;
  display: inline-block;
  width: 1.5rem;
  text-align: center;
  color: var(--btn-num-color);
  font-size: 1.25rem;
}
.section-main .keyword-ranking-box .btn-keyword span {
  display: block;
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.section-main .keyword-ranking-box .btn-keyword:focus-visible span {
  text-decoration: underline;
}
.section-main .keyword-ranking-box .swiper-option {
  position: unset;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.section-main .keyword-ranking-box .swiper-option .btn-ranking-open {
  --bs-btn-color: var(--bs-white);
  --bs-btn-active-color: var(--bs-white);
  --bs-btn-active-border-color: var(--bs-white);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-border-color: var(--bs-white);
  --bs-btn-padding-x: 0;
  --bs-btn-padding-y: 0;
  --swiper-btn-size: 1.5rem;
  --swiper-btn-bg: transparent;
  --bs-btn-border-width: 1px;
  --bs-btn-border-color: var(--bs-white);
  --bs-focus-ring-color: rgba(255, 255, 255, .5);
  flex-shrink: 0;
}
.section-main .keyword-ranking-box .swiper-option .btn-ranking-open > i {
  font-size: 0.875rem;
  font-weight: 600;
}
.section-main .keyword-ranking-box .swiper-option .swiper-autoplay-btns {
  margin-left: 0;
  z-index: 0;
}
.section-main .keyword-ranking-box .swiper-option .swiper-autoplay-btns .btn {
  --swiper-btn-size: 1.5rem;
  --swiper-btn-bg: transparent;
  --bs-btn-padding-x: 0;
  --bs-btn-padding-y: 0;
  --bs-focus-ring-color: rgba(255, 255, 255, .5);
  border: 1px solid var(--bs-white);
}
.section-main .keyword-ranking-box.open {
  --open-btn-content: "";
  --open-swiper-margin-top: -0.4375rem;
  --open-swiper-width: 100%;
  --open-swiper-left: 0;
}
.section-main .keyword-ranking-box.open .rankingSwiper {
  position: absolute;
  top: 0;
  left: var(--open-swiper-left);
  width: var(--open-swiper-width);
  max-height: 37.5rem;
  padding: 1rem;
  border-radius: 1rem;
  background-color: var(--bs-white);
  border: 2px solid var(--bs-primary);
}
.section-main .keyword-ranking-box.open ol.swiper-wrapper {
  flex-direction: column;
  margin-top: var(--open-swiper-margin-top);
  margin-left: var(--open-swiper-margin-left);
}
.section-main .keyword-ranking-box.open .btn-outline-light {
  display: block !important;
}
.section-main .keyword-ranking-box.open .btn-keyword {
  --bs-btn-color: var(--bs-gray-800);
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: var(--bs-primary);
  --bs-btn-active-color: var(--bs-white);
  --bs-btn-active-bg: var(--bs-primary);
  --btn-num-color: var(--bs-primary);
}
.section-main .keyword-ranking-box.open .btn-keyword:hover::before, .section-main .keyword-ranking-box.open .btn-keyword:focus-visible::before, .section-main .keyword-ranking-box.open .btn-keyword:active::before {
  color: var(--bs-white);
}
.section-main .keyword-ranking-box.open .btn-keyword:focus-visible {
  --bs-btn-color: var(--bs-gray-800);
}
@media (min-width: 1024px) {
  .section-main .keyword-ranking-box.open {
    --open-swiper-margin-top: 0;
    --open-swiper-width: 13.9375rem;
    --open-swiper-left: -0.9375rem;
  }
}
@media (min-width: 1024px) {
  .section-main .keyword-ranking-box {
    --keyword-width: 15rem;
    position: relative;
  }
}
.section-main .main-category-list {
  --category-gap: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--category-gap);
}
.section-main .main-category-list li {
  width: calc(50% - 0.5rem);
}
@media (min-width: 1024px) {
  .section-main .main-category-list li {
    flex: 1;
  }
}
.section-main .main-category-list .btn-category,
.section-main .main-link-list .btn-category {
  --bs-btn-padding-y: 1rem;
  --bs-btn-padding-x: 0;
  --bs-btn-padding-right: 0;
  --bs-btn-border-radius: 1rem;
  --btn-height: 9rem;
  --bs-btn-font-size: 1rem;
  --category-btn-align: center;
  --category-btn-v-align: center;
  --category-icon-size: 3.5rem;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: var(--category-btn-align);
  justify-content: var(--category-btn-v-align);
  gap: 1rem;
  width: 100%;
  height: var(--btn-height);
  padding-right: var(--bs-btn-padding-right);
  border-color: transparent;
  text-align: left;
  color: var(--bs-body-color);
  font-weight: 600;
  line-height: 1.5rem;
}
.section-main .main-category-list .btn-category::before,
.section-main .main-link-list .btn-category::before {
  flex-shrink: 0;
  display: inline-block;
  width: var(--category-icon-size);
  height: var(--category-icon-size);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: contain;
  filter: drop-shadow(0 0 0.9375rem rgba(0, 0, 0, 0.3));
  content: "";
}
@media (min-width: 1024px) {
  .section-main .main-category-list .btn-category::before,
  .section-main .main-link-list .btn-category::before {
    position: absolute;
    right: var(--bs-btn-padding-y);
    bottom: var(--bs-btn-padding-y);
  }
}
.section-main .main-category-list .btn-category.category-01,
.section-main .main-link-list .btn-category.category-01 {
  background-color: #e7f5ff;
  background-image: url("/static/images/main/bg_banner01.svg");
  border-color: transparent;
  background-position: right bottom;
  background-repeat: no-repeat;
}
.section-main .main-category-list .btn-category.category-01::before,
.section-main .main-link-list .btn-category.category-01::before {
  background-image: url("/static/images/main/icon_edu_01.svg");
}
.section-main .main-category-list .btn-category.category-02,
.section-main .main-link-list .btn-category.category-02 {
  background-color: #edeeff;
  background-image: url("/static/images/main/bg_banner02.svg");
  border-color: transparent;
  background-position: right bottom;
  background-repeat: no-repeat;
}
.section-main .main-category-list .btn-category.category-02::before,
.section-main .main-link-list .btn-category.category-02::before {
  background-image: url("/static/images/main/icon_edu_02.svg");
}
.section-main .main-category-list .btn-category.category-03,
.section-main .main-link-list .btn-category.category-03 {
  background-color: var(--bs-gray-100);
  background-image: url("/static/images/main/bg_banner03.svg");
  border-color: transparent;
  background-position: right bottom;
  background-repeat: no-repeat;
}
.section-main .main-category-list .btn-category.category-03::before,
.section-main .main-link-list .btn-category.category-03::before {
  background-image: url("/static/images/main/icon_edu_03.svg");
}
.section-main .main-category-list .btn-category.category-04,
.section-main .main-link-list .btn-category.category-04 {
  background-color: var(--bs-white);
  background-image: url("/static/images/main/bg_banner03.svg");
  border-color: var(--bs-gray-200);
  background-position: right bottom;
  background-repeat: no-repeat;
}
.section-main .main-category-list .btn-category.category-04::before,
.section-main .main-link-list .btn-category.category-04::before {
  background-image: url("/static/images/main/icon_edu_04_old.svg");
}
.section-main .main-category-list .btn-category.category-04::before,
.section-main .main-link-list .btn-category.category-04::before {
  width: 6.375rem;
  height: 6.375rem;
}
.section-main .main-category-list .btn-category.link-01,
.section-main .main-link-list .btn-category.link-01 {
  background-color: #fef6e3;
  background-image: url("/static/images/main/bg_banner01.svg");
  border-color: transparent;
  background-position: right bottom;
  background-repeat: no-repeat;
}
.section-main .main-category-list .btn-category.link-01::before,
.section-main .main-link-list .btn-category.link-01::before {
  background-image: url("/static/images/main/icon_main_link_01.svg");
}
.section-main .main-category-list .btn-category.link-01::before,
.section-main .main-link-list .btn-category.link-01::before {
  width: 6.5rem;
  height: 5.375rem;
}
.section-main .main-category-list .btn-category.link-02,
.section-main .main-link-list .btn-category.link-02 {
  background-color: #ffeae9;
  background-image: url("/static/images/main/bg_banner02.svg");
  border-color: transparent;
  background-position: right bottom;
  background-repeat: no-repeat;
}
.section-main .main-category-list .btn-category.link-02::before,
.section-main .main-link-list .btn-category.link-02::before {
  background-image: url("/static/images/main/icon_main_link_02.svg");
}
.section-main .main-category-list .btn-category.link-02::before,
.section-main .main-link-list .btn-category.link-02::before {
  width: 5.3125rem;
  height: 5.375rem;
}
.section-main .main-category-list .btn-category.link-03,
.section-main .main-link-list .btn-category.link-03 {
  background-color: #effed3;
  background-image: url("/static/images/main/bg_banner02.svg");
  border-color: transparent;
  background-position: right bottom;
  background-repeat: no-repeat;
}
.section-main .main-category-list .btn-category.link-03::before,
.section-main .main-link-list .btn-category.link-03::before {
  background-image: url("/static/images/main/icon_main_link_03.svg");
}
.section-main .main-category-list .btn-category.link-03::before,
.section-main .main-link-list .btn-category.link-03::before {
  width: 6.5rem;
  height: 5.375rem;
}
.section-main .main-category-list .btn-category.link-04,
.section-main .main-link-list .btn-category.link-04 {
  background-color: #feecf8;
  background-image: url("/static/images/main/bg_banner03.svg");
  border-color: transparent;
  background-position: right bottom;
  background-repeat: no-repeat;
}
.section-main .main-category-list .btn-category.link-04::before,
.section-main .main-link-list .btn-category.link-04::before {
  background-image: url("/static/images/main/icon_main_link_04.svg");
}
.section-main .main-category-list .btn-category.link-04::before,
.section-main .main-link-list .btn-category.link-04::before {
  width: 5.9375rem;
  height: 6.25rem;
  bottom: 0.5rem;
}
.section-main .main-category-list .btn-category.link-05,
.section-main .main-link-list .btn-category.link-05 {
  background-color: #efe6ff;
  background-image: url("/static/images/main/bg_banner02.svg");
  border-color: transparent;
  background-position: right bottom;
  background-repeat: no-repeat;
}
.section-main .main-category-list .btn-category.link-05::before,
.section-main .main-link-list .btn-category.link-05::before {
  background-image: url("/static/images/main/icon_main_link_05.svg");
}
.section-main .main-category-list .btn-category.link-05::before,
.section-main .main-link-list .btn-category.link-05::before {
  width: 6.125rem;
  height: 6.1875rem;
  bottom: 0.75rem;
}
@media (min-width: 1024px) {
  .section-main .main-category-list .btn-category,
  .section-main .main-link-list .btn-category {
    --btn-height: 8.125rem;
    --bs-btn-padding-x: 2rem;
    --bs-btn-padding-right: 1.5rem;
    --bs-btn-font-size: 1.125rem;
    --category-icon-size: 5rem;
    --category-btn-align: flex-start;
    --category-btn-v-align: flex-start;
  }
  .section-main .main-category-list .btn-category.category-04::before,
  .section-main .main-link-list .btn-category.category-04::before {
    --category-icon-size: 6.375rem;
  }
}
.section-main .main-link-list {
  --swiper-btn-size: 3rem;
  --swiper-prev-btn-posiiton: 1rem;
  --swiper-next-btn-posiiton: 1rem;
  position: relative;
}
.section-main .main-link-list .swiper-option {
  position: unset;
}
.section-main .main-link-list .swiper-option .swiper-btns .btn {
  position: absolute;
  top: calc(50% - var(--swiper-btn-size) / 2);
  --swiper-btn-bg: var(--bs-white);
  box-shadow: 0 0.25rem 1rem 0 rgba(0, 0, 0, 0.16);
}
.section-main .main-link-list .swiper-option .swiper-btns .btn.swiper-button-prev {
  left: var(--swiper-prev-btn-posiiton);
}
.section-main .main-link-list .swiper-option .swiper-btns .btn.swiper-button-next {
  right: var(--swiper-next-btn-posiiton);
}
.section-main .main-link-list .swiper-option .swiper-btns .btn.swiper-button-disabled {
  display: none;
}
.section-main .main-link-list .swiper-option .swiper-btns .btn::before {
  --swiper-btn-icon-size: 1.25rem;
  --swiper-btn-icon-bg-size: 1rem;
}
.section-main .main-link-list .swiper-option .swiper-btns .btn::after {
  display: none;
}
.section-main .main-link-list .swiper-option .swiper-pagination {
  position: unset;
  margin-top: 1.25rem;
}
@media (min-width: 1024px) {
  .section-main .main-link-list {
    --swiper-data-width: 100%;
    --swiper-prev-btn-posiiton: calc(var(--swiper-btn-size) / -2);
    --swiper-next-btn-posiiton: calc(var(--swiper-btn-size) / -2);
  }
  .section-main .main-link-list .swiper-btns {
    display: flex;
  }
  .section-main .main-link-list .swiper-pagination {
    display: none;
  }
}
.section-main.main-svg-bg {
  background-color: #e1ebff;
}
@media (min-width: 1024px) {
  .section-main.main-svg-bg {
    position: relative;
    background-image: url(/safezone/static/images/main/bg_circle.svg), url(/safezone/static/images/main/bg_bar.svg);
    background-repeat: no-repeat;
    background-position: right top, right 30px bottom -100px;
  }
  .section-main.main-svg-bg::before {
    content: "";
    width: 312px;
    height: 318px;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -159px;
    background-image: url(/safezone/static/images/main/bg_circle.svg);
    background-repeat: no-repeat;
    background-position: left center;
    transform: rotate(180deg);
  }
}
.section-main-title {
  --title-font-size: 1.5rem;
  --title-line-height: 2.25rem;
}
@media (min-width: 1024px) {
  .section-main-title {
    --title-font-size: 2rem;
    --title-line-height: 3rem;
  }
}
.section-main .main-content-title {
  --title-font-size: 1.375rem;
  --title-margin-bottom: 1.25rem;
}
.section-main .underline-bold {
  display: inline-flex;
  position: relative;
}
.section-main .underline-bold::before {
  content: "";
  width: 100%;
  height: 1rem;
  position: absolute;
  top: 0.83em;
  left: 0;
  background-color: var(--bs-yellow);
}
@media (min-width: 1024px) {
  .section-main .underline-bold::before {
    height: 1.25rem;
  }
}
@media (min-width: 1024px) {
  .section-main .main-data-count {
    gap: 5rem;
  }
}
.section-main .main-data-count .data-count {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.section-main .main-data-count .data-count .count-title {
  white-space: nowrap;
}
@media (min-width: 1024px) {
  .section-main .main-data-count .data-count .count-title {
    color: var(--bs-gray-600);
    font-size: 1.25rem;
  }
}
.section-main .main-data-count .data-count .count-item {
  color: var(--bs-gray-800);
  font-size: 1.125rem;
  font-weight: 700;
  white-space: nowrap;
  display: flex;
  align-items: center;
}
@media (min-width: 1024px) {
  .section-main .main-data-count .data-count .count-item {
    font-size: 2rem;
    font-weight: 600;
  }
}
.section-main .section-cloud-slider > .row {
  gap: 3.75rem;
}
@media (min-width: 1024px) {
  .section-main .section-cloud-slider > .row {
    gap: unset;
  }
  .section-main .section-cloud-slider > .row .column-word-cloud {
    padding-right: 1.875rem;
  }
  .section-main .section-cloud-slider > .row .column-word-cloud .panel.main-word-cloud {
    --panel-border-color: transparent;
    --panel-bg: var(--bs-white);
  }
  .section-main .section-cloud-slider > .row .data-chart-slider {
    padding-left: 1.875rem;
  }
}
.section-main .data-chart-slider-control {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1rem;
}
.section-main .data-chart-slider-control .btn-slider-pause {
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  border: 0;
  border-radius: 50%;
  background-color: var(--bs-primary);
}
.section-main .data-chart-slider-control .btn-slider-pause::before, .section-main .data-chart-slider-control .btn-slider-pause::after {
  content: "";
  transition: all 0.2s;
}
.section-main .data-chart-slider-control .btn-slider-pause.start::before, .section-main .data-chart-slider-control .btn-slider-pause.start::after {
  width: 0.125rem;
  height: 0.5rem;
  border-radius: 1px;
  background-color: var(--bs-white);
}
.section-main .data-chart-slider-control .btn-slider-pause.pause::before {
  width: 0;
  height: 0;
  margin-left: 0.125rem;
  border-top: 5px solid transparent;
  border-left: 8px solid var(--bs-white);
  border-bottom: 5px solid transparent;
  border-radius: 2px;
}
.section-main .data-chart-slider-control .btn-slider-pause.pause::after {
  display: none;
}
.section-main .data-chart-slider-pager.swiper-pagination {
  width: unset;
  position: unset;
  bottom: unset;
  top: unset;
  left: unset;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
}
.section-main .data-chart-slider-pager.swiper-pagination .swiper-pagination-bullet {
  margin: 0;
  border-radius: 1rem;
  transition: width 0.5s;
}
.section-main .data-chart-slider-pager.swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  width: 1.25rem;
}
.section-main .main-data-chart {
  --panel-bg: var(--bs-white);
}
.section-main .main-data-chart .edu-info-item-name {
  font-size: 1.125rem;
}
.section-main .main-data-chart .edu-info-item .info-item-wrap {
  margin-top: 1.25rem;
}
@media (min-width: 1024px) {
  .section-main .main-data-chart .edu-info-item .info-item-wrap .edu-info-radial {
    position: relative;
  }
  .section-main .main-data-chart .edu-info-item .info-item-wrap .edu-info-radial .radial-list {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
  }
  .section-main .main-data-chart .edu-info-item .info-item-wrap .edu-info-radial .radial-list .list-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .section-main .main-data-chart .edu-info-item .info-item-wrap .edu-info-radial .radial-list .list-item .item-count {
    padding-left: 0.875rem;
  }
  .section-main .main-data-chart .edu-info-item .info-item-wrap .edu-info-radial .radial-list .list-item:nth-child(even) {
    align-items: flex-end;
  }
  .section-main .main-data-chart .edu-info-item .info-item-wrap .edu-info-radial .radial-list .list-item:nth-child(even) .item-name {
    flex-direction: row-reverse;
  }
  .section-main .main-data-chart .edu-info-item .info-item-wrap .edu-info-radial .radial-list .list-item:nth-child(even) .item-count {
    padding-left: unset;
    padding-right: 0.875rem;
  }
}
.section-main .section-main3-title {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.375rem;
}
.section-main .section-main3-title .data-tab-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}
.section-main .section-main3-title .data-tab-box .scroll-x-group {
  --scroll-group-margin-top: 0;
  width: calc(100% + 2.5rem);
}
.section-main .section-main3-title .data-tab-box .nav-pills {
  flex-wrap: nowrap;
  margin-bottom: 0;
  white-space: nowrap;
  padding: 0 1.25rem 0.5rem;
  overflow-x: auto;
}
.section-main .section-main3-title .data-tab-box .nav-pills::-webkit-scrollbar {
  display: none;
}
@media (min-width: 1024px) {
  .section-main .section-main3-title .data-tab-box .nav-pills {
    padding: 0;
    overflow-x: visible;
  }
}
@media (min-width: 1024px) {
  .section-main .section-main3-title {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .section-main .section-main3-title .data-tab-box {
    flex-direction: row;
    align-items: center;
  }
}
.section-main .swiper-data-wrap {
  --swiper-data-width: 18.75rem;
  --swiper-btn-size: 3rem;
  --swiper-prev-btn-posiiton: 1rem;
  --swiper-next-btn-posiiton: 1rem;
  position: relative;
  margin-top: 2rem;
}
.section-main .swiper-data-wrap .swiper-slide {
  padding: 0 0.375rem;
  display: flex;
  justify-content: center;
}
.section-main .swiper-data-wrap .swiper-slide .main-card {
  width: var(--swiper-data-width);
}
@media (min-width: 1024px) {
  .section-main .swiper-data-wrap .swiper-slide {
    padding: 0;
  }
}
.section-main .swiper-data-wrap .swiper-option {
  position: unset;
}
.section-main .swiper-data-wrap .swiper-option .swiper-btns .btn {
  position: absolute;
  top: calc(50% - var(--swiper-btn-size) / 2);
  --swiper-btn-bg: var(--bs-white);
  box-shadow: 0 0.25rem 1rem 0 rgba(0, 0, 0, 0.16);
}
.section-main .swiper-data-wrap .swiper-option .swiper-btns .btn.swiper-button-prev {
  left: var(--swiper-prev-btn-posiiton);
}
.section-main .swiper-data-wrap .swiper-option .swiper-btns .btn.swiper-button-next {
  right: var(--swiper-next-btn-posiiton);
}
.section-main .swiper-data-wrap .swiper-option .swiper-btns .btn.swiper-button-disabled {
  display: none;
}
.section-main .swiper-data-wrap .swiper-option .swiper-btns .btn::before {
  --swiper-btn-icon-size: 1.25rem;
  --swiper-btn-icon-bg-size: 1rem;
}
.section-main .swiper-data-wrap .swiper-option .swiper-btns .btn::after {
  display: none;
}
.section-main .swiper-data-wrap .swiper-option .swiper-pagination {
  position: unset;
  margin-top: 1.25rem;
}
@media (max-width: 1023px) {
  .section-main .swiper-data-wrap {
    margin: 0 -1.25rem;
    padding: 0 1.25rem;
  }
  .section-main .swiper-data-wrap .swiper {
    overflow: visible;
  }
}
@media (min-width: 1024px) {
  .section-main .swiper-data-wrap {
    --swiper-data-width: 100%;
    --swiper-prev-btn-posiiton: calc(var(--swiper-btn-size) / -2);
    --swiper-next-btn-posiiton: calc(var(--swiper-btn-size) / -2);
  }
  .section-main .swiper-data-wrap .swiper-btns {
    display: flex;
  }
  .section-main .swiper-data-wrap .swiper-pagination {
    display: none;
  }
}
.section-main .main-card {
  --card-padding-x: 24px;
  --card-padding-top: 18px;
  --card-padding-bottom: 32px;
  --card-type-color: var(--bs-primary);
  padding: var(--card-padding-top) var(--card-padding-x) var(--card-padding-bottom);
  border-radius: 1rem;
  border: 1px solid var(--bs-gray-200);
  border-top: 4px solid var(--card-type-color);
  background-color: var(--bs-white);
}
.section-main .main-card.type02 {
  --card-type-color: var(--bs-success);
}
.section-main .main-card.type03 {
  --card-type-color: var(--bs-purple);
}
.section-main .main-card .card-title {
  --card-title-pd: .625rem;
  display: block;
  padding: var(--card-title-pd);
  margin: 0 -0.625rem 0.875rem;
}
.section-main .main-card .card-title .title {
  --card-title-lh: 1.75rem;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  height: calc(var(--card-title-lh) * 2);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--card-type-color);
  text-align: left;
  line-height: var(--card-title-lh);
}
.section-main .main-card .card-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  gap: 0.75rem;
}
.section-main .main-card .card-top .badge {
  max-width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.section-main .main-card .card-top .card-icon-favorite {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
@media (min-width: 1280px) {
  .section-main .main-card .card-top .messege-box .popover {
    top: 50%;
    left: unset;
    right: calc(100% + 8px);
    transform: translateY(-50%);
  }
  .section-main .main-card .card-top .messege-box .popover .popover-arrow {
    position: absolute;
    top: 50%;
    left: auto;
    right: calc(-1 * (var(--bs-popover-arrow-height)) - var(--bs-popover-border-width));
    transform: translateY(-50%);
    width: var(--bs-popover-arrow-height);
    height: var(--bs-popover-arrow-width);
  }
  .section-main .main-card .card-top .messege-box .popover .popover-arrow::before {
    right: 0;
    border-width: calc(var(--bs-popover-arrow-width) * 0.5) 0 calc(var(--bs-popover-arrow-width) * 0.5) var(--bs-popover-arrow-height);
    border-left-color: var(--bs-popover-arrow-border);
    border-bottom-color: transparent;
  }
  .section-main .main-card .card-top .messege-box .popover .popover-arrow::after {
    right: var(--bs-popover-border-width);
    border-left-color: var(--bs-popover-bg);
    border-width: calc(var(--bs-popover-arrow-width) * 0.5) 0 calc(var(--bs-popover-arrow-width) * 0.5) var(--bs-popover-arrow-height);
    border-bottom-color: transparent;
  }
}
.section-main .main-card .card-chart {
  --card-chart-h: 9.875rem;
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--card-chart-h);
}
@media (min-width: 1280px) {
  .section-main .main-card .card-chart {
    --card-chart-h: 8.75rem;
  }
}
.section-main .btn-more {
  display: inline-flex;
  gap: 0.375rem;
  margin-right: -0.625rem;
  white-space: nowrap;
}
.section-main .main-notice-wrap {
  --swiper-banner-height: 23.625rem;
  --swiper-banner-bottom: .75rem;
  --inner-margin: 0;
  margin-top: 2rem;
}
.section-main .main-notice-wrap .swiper-banner-wrap {
  height: var(--swiper-banner-height);
  margin-bottom: var(--swiper-banner-bottom);
  border-radius: 1rem;
  overflow: hidden;
}
.section-main .main-notice-wrap .swiper-banner-wrap .bannerSwiper {
  height: 100%;
  margin-right: var(--inner-margin);
  border-radius: 16px;
  overflow: hidden;
}
.section-main .main-notice-wrap .swiper-banner-wrap .bannerSwiper .btn-banner:focus, .section-main .main-notice-wrap .swiper-banner-wrap .bannerSwiper .btn-banner:focus-visible {
  box-shadow: inset var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) var(--bs-focus-ring-blur, 0) var(--bs-focus-ring-width) var(--bs-focus-ring-color);
}
.section-main .main-notice-wrap .main-board {
  position: relative;
  margin-left: var(--inner-margin);
}
.section-main .main-notice-wrap .main-board:first-child {
  margin-bottom: 2.5rem;
}
.section-main .main-notice-wrap .main-board .main-title-h3 {
  margin-bottom: 1.25rem;
  font-size: 1.375rem;
  line-height: 1.5rem;
  font-weight: 700;
}
.section-main .main-notice-wrap .main-board .main-board-list li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0;
  white-space: nowrap;
}
.section-main .main-notice-wrap .main-board .main-board-list li .btn-link {
  font-weight: 500;
  width: 100%;
  margin-left: -0.6875rem;
  text-decoration: none;
  text-align: left;
  text-overflow: ellipsis;
  overflow: hidden;
}
.section-main .main-notice-wrap .main-board .main-board-list li .btn-link:hover {
  text-decoration: underline;
}
.section-main .main-notice-wrap .main-board .main-board-list li .icon-file {
  flex-shrink: 0;
}
.section-main .main-notice-wrap .main-board .main-board-list li .date {
  flex-shrink: 0;
  color: var(--bs-gray-600);
}
@media (min-width: 1024px) {
  .section-main .main-notice-wrap .main-board .main-board-list {
    height: 7.5rem;
  }
}
.section-main .main-notice-wrap .main-board .btn-more {
  position: absolute;
  right: 0;
  top: -0.1875rem;
}
@media (min-width: 1024px) {
  .section-main .main-notice-wrap {
    --swiper-banner-height: 23rem;
    --swiper-banner-bottom: 0;
    --inner-margin: 1.125rem;
  }
}
.section-main .swiper-banner-wrap {
  --banner-btn-padding-x: 1.5rem;
  --banner-btn-padding-y: 2rem;
  --banner-img-size: 6.875rem;
}
.section-main .swiper-banner-wrap .btn-banner {
  position: relative;
  width: 100%;
  height: 100%;
  padding: var(--banner-btn-padding-y) var(--banner-btn-padding-x);
  text-align: left;
  border-radius: 1rem;
}
.section-main .swiper-banner-wrap .btn-banner .main-text-box {
  --main-title-size: 1.5rem;
  --main-text-size: 1rem;
  --main-text-lh: 1.5;
}
.section-main .swiper-banner-wrap .btn-banner .main-text-box .title,
.section-main .swiper-banner-wrap .btn-banner .main-text-box .text {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.section-main .swiper-banner-wrap .btn-banner .main-text-box .btn-more {
  margin-top: -0.6875rem;
  margin-left: -0.6875rem;
}
.section-main .swiper-banner-wrap .btn-banner .img-box {
  position: absolute;
  bottom: 5.25rem;
  right: var(--banner-btn-padding-x);
  width: var(--banner-img-size);
  height: var(--banner-img-size);
}
.section-main .swiper-banner-wrap .btn-banner .img-box img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.section-main .swiper-banner-wrap .swiper-option {
  position: absolute;
  left: var(--banner-btn-padding-x);
  bottom: var(--banner-btn-padding-y);
}
@media (min-width: 1024px) {
  .section-main .swiper-banner-wrap {
    --banner-btn-padding-x: 2.25rem;
    --banner-btn-padding-y: 2.25rem;
    --banner-img-size: 10rem;
  }
  .section-main .swiper-banner-wrap .btn-banner .img-box {
    bottom: var(--banner-btn-padding-y);
  }
}
.section-main .main-etc-contents .btn-etc-box {
  --bs-btn-padding-x: 1.5rem;
  --bs-btn-padding-y: 2.25rem;
  --etc-btn-height: 10rem;
  --bs-btn-border-radius: 1rem;
  width: 100%;
  text-align: left;
  height: var(--etc-btn-height);
  background-position: calc(100% - var(--bs-btn-padding-x)) calc(100% - var(--bs-btn-padding-y));
  background-size: 3.625rem 3.625rem;
  background-repeat: no-repeat;
}
.section-main .main-etc-contents .btn-etc-box .main-text-box {
  --main-title-size: 1.375rem;
  --main-title-lh: 1em;
  --main-text-size: 1rem;
  --main-text-lh: 1em;
}
.section-main .main-etc-contents .btn-etc-box.etc-info {
  background-color: #e7f5ff;
  background-image: url(/safezone/static/images/main/icon_help_01.svg);
}
.section-main .main-etc-contents .btn-etc-box.etc-guide {
  background-color: #edeeff;
  background-image: url(/safezone/static/images/main/icon_help_02.svg);
}
.section-main .main-etc-contents .btn-etc-box.etc-faq {
  background-color: #f1f3f5;
  background-image: url(/safezone/static/images/main/icon_help_03.svg);
}

[data-bs-theme=dark] .section-main.main-svg-bg {
  background-color: var(--bs-white);
}
[data-bs-theme=dark] .section-main .main-search {
  --search-bg: transparent;
}
[data-bs-theme=dark] .section-main .main-search .form-search-wrap .form-control-search {
  background-color: transparent;
}
[data-bs-theme=dark] .section-main .visual-wrap {
  --swiper-btn-bg: var(--bs-gray-200);
  --swiepr-btn-color: var(--bs-primary);
}
[data-bs-theme=dark] .section-main .visual-wrap .main-text-box {
  --main-text-color: var(--bs-gray-700);
}
[data-bs-theme=dark] .section-main .main-category-list .btn-category {
  border: 1px solid var(--bs-black);
  background-color: transparent;
}
[data-bs-theme=dark] .section-main .section-cloud-slider .panel {
  --panel-bg: var(--bs-body-bg);
  --panel-border-color: var(--bs-black) !important;
}
[data-bs-theme=dark] .section-main .main-etc-contents .btn-etc-box {
  border: 1px solid var(--bs-black);
  background-color: transparent;
}

.error-wrap {
  --error-title-size: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100%;
  padding: var(--header-h) 1.25rem;
  background-color: var(--bs-white);
}
.error-wrap .error-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 3.75rem;
  text-align: center;
}
.error-wrap .error-inner .error-title {
  margin-bottom: 1.5rem;
  font-size: var(--error-title-size);
  font-weight: 700;
}
.error-wrap .error-inner .icon {
  margin-bottom: 2.5rem;
}
.error-wrap .error-inner .icon.icon-alert-issue {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  filter: drop-shadow(0 0.625rem 0.9375rem rgba(98, 110, 126, 0.15));
}
.error-wrap .error-inner .icon.icon-alert-issue {
  --icon-box-width: 80px;
  --icon-box-height: 80px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.error-wrap .error-inner .icon.icon-alert-issue::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_alert_issue_lg.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}
.error-wrap .error-inner .icon.icon-setting {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  filter: drop-shadow(0.5313rem 0.5313rem 1.0625rem rgba(207, 229, 255, 0.75));
}
.error-wrap .error-inner .icon.icon-setting {
  --icon-box-width: 110px;
  --icon-box-height: 90px;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.error-wrap .error-inner .icon.icon-setting::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_setting.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}
.error-wrap .error-inner .error-desc {
  font-size: 1.125rem;
  font-weight: 500;
  color: var(--bs-gray-600);
  line-height: 1.5;
  word-break: keep-all;
}
.error-wrap .btn-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 0.625rem;
}
@media (min-width: 1024px) {
  .error-wrap {
    --error-title-size: 2rem;
  }
  .error-wrap .btn-box {
    flex-direction: row;
  }
}

@media (max-width: 1023px) {
  .w-sm-100 {
    width: 100% !important;
  }
}

@media (min-width: 1024px) {
  .w-lg-100 {
    width: 100% !important;
  }
}

html:has(.guide),
body:has(.guide) {
  height: 100%;
  background-color: var(--bs-white);
}

.guide {
  background-color: var(--bs-body-bg);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.guide.wrap {
  padding-top: 0;
}
.guide #header {
  display: none !important;
}
.guide .guide-header {
  width: 100%;
  height: 4.6875rem;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99;
  border-bottom: 0.0625rem solid var(--bs-gray-500);
  background-color: var(--bs-white);
}
.guide .guide-header h1.navbar-brand {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}
.guide .guide-header h1.navbar-brand a.btn {
  --bs-btn-font-weight: 600;
  font-size: 26px;
}
.guide .guide-header h1.navbar-brand a.btn .icon-logo {
  width: var(--icon-box-width);
  height: var(--icon-box-height);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.guide .guide-header h1.navbar-brand a.btn .icon-logo {
  --icon-box-width: 2.25rem;
  --icon-box-height: 2.25rem;
  --icon-width: var(--icon-box-width);
  --icon-height: var(--icon-box-height);
  --icon-bg-size: contain;
}
.guide .guide-header h1.navbar-brand a.btn .icon-logo::before {
  content: "";
  font-size: 0;
  width: var(--icon-width);
  height: var(--icon-height);
  background-image: url(../images/icons/icon_logo.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: var(--icon-bg-size);
  transition: all 0.2s ease-in-out;
}
.guide .guide-header .guide-search-box button {
  word-break: keep-all;
}
.guide .guide-body {
  padding-top: 4.6875rem;
}
.guide .guide-lnb, .guide .guide-contents {
  overflow: auto;
}
.guide .guide-lnb {
  padding-top: 18px;
  padding-bottom: 18px;
  padding-left: 8px;
  padding-right: 18px;
}
.guide .guide-lnb .btn-toggle {
  --bs-btn-padding-y: 5px;
  --bs-btn-hover-color: var(--bs-primary);
  --bs-btn-active-color: var(--bs-primary);
  text-align: left;
  position: relative;
}
.guide .guide-lnb .btn-toggle::before {
  content: "";
  width: 0;
  height: 0.125rem;
  position: absolute;
  bottom: 0;
  left: var(--bs-btn-padding-x);
  background-color: var(--bs-primary);
  z-index: 1;
  transition: width 0.2s;
}
.guide .guide-lnb .btn-toggle.active::before {
  width: calc(100% - var(--bs-btn-padding-x) * 2);
}
.guide .guide-lnb > .nav > .btn-toggle {
  --bs-btn-font-weight: bold;
}
.guide .guide-lnb > .nav > .btn-toggle + .btn-toggle {
  margin-top: 8px;
}
.guide .guide-lnb > .nav .nav {
  margin-bottom: 8px;
}
.guide .guide-lnb > .nav .nav .btn-toggle {
  --bs-btn-font-size: 12px;
}
.guide .guide-contents {
  padding: 24px 30px;
}
.guide .guide-contents section.guide-content {
  padding-bottom: 24px;
}
.guide .guide-contents section.guide-content:not(:first-child) {
  padding-top: 24px;
}
.guide .guide-contents section.guide-content > h2 {
  font-size: 30px;
  margin-bottom: 16px;
}
.guide .guide-contents section.guide-content + section.guide-content {
  border-top: 0.0625rem solid var(--bs-border-color);
}
.guide .panel-code {
  --panel-padding-y: 0;
  --panel-padding-x: 0;
  --panel-border-color: var(--bs-gray-500);
  --panel-border-radius: 0;
}
.guide .panel-code .box-code {
  position: relative;
  border-top: 0.0625rem solid var(--panel-border-color);
  background: var(--bs-gray-100);
}
.guide .panel-code .box-code .btn-code-copy {
  --bs-btn-bg: var(--bs-white);
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
}
.guide .panel-code .box-code code.hljs {
  background: transparent;
}
.guide .badge {
  --bs-badge-padding-x: 8px;
  --bs-badge-padding-y: 4px;
  --bs-badge-font-size: 12px;
  --bs-badge-border-radiu: 3px;
}

@media (max-width: 79.9375rem) {
  #sampleGrid {
    margin-left: -30px;
    margin-right: -30px;
  }
}
#sampleGrid .box-grid-desc .grid-desc-line, #sampleGrid .container-main .row [class*=col]:first-child .gutter-desc .grid-desc-line {
  height: 0.0625rem;
  border-top: 0.0625rem solid var(--bs-gray-700);
  flex-grow: 1;
  position: relative;
}
#sampleGrid .box-grid-desc .grid-desc-line::before, #sampleGrid .container-main .row [class*=col]:first-child .gutter-desc .grid-desc-line::before, #sampleGrid .box-grid-desc .grid-desc-line::after, #sampleGrid .container-main .row [class*=col]:first-child .gutter-desc .grid-desc-line::after {
  content: "";
  width: 0.4375rem;
  height: 0.4375rem;
  position: absolute;
  top: 0;
  left: 0;
  margin-top: -0.25rem;
  margin-left: 0.125rem;
  border-width: 0.0625rem 0 0 0.0625rem;
  border-style: solid;
  border-color: var(--bs-gray-700) transparent transparent var(--bs-gray-700);
  transform: rotate(-45deg);
}
#sampleGrid .box-grid-desc .grid-desc-line::after, #sampleGrid .container-main .row [class*=col]:first-child .gutter-desc .grid-desc-line::after {
  left: unset;
  right: 0;
  margin-left: unset;
  margin-right: 0.125rem;
  transform: rotate(45deg) scaleX(-1);
}
#sampleGrid .container-main {
  --container-main-padding-y: 0;
  position: relative;
  border-top: 0.0625rem solid rgba(0, 0, 0, 0.5);
  border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.5);
}
#sampleGrid .container-main::before, #sampleGrid .container-main::after {
  content: "1.25rem";
  font-size: 10px;
  width: 20px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  background-color: rgba(255, 0, 0, 0.16);
  border-right: 0.125rem dotted #ff0000;
}
@media (min-width: 80rem) {
  #sampleGrid .container-main::before, #sampleGrid .container-main::after {
    content: "2.25rem";
    font-size: 12px;
    width: 36px;
  }
}
#sampleGrid .container-main::after {
  left: unset;
  right: 0;
  border-right: unset;
  border-left: 0.125rem dotted #ff0000;
}
#sampleGrid .container-main .row [class*=col] {
  display: flex;
  justify-content: center;
  align-items: center;
}
#sampleGrid .container-main .row [class*=col]:first-child {
  position: relative;
}
#sampleGrid .container-main .row [class*=col]:first-child .gutter-desc {
  --gutter-x: 16px;
  width: var(--gutter-x);
  gap: 0.125rem;
  position: absolute;
  top: 60%;
  left: calc(100% - var(--gutter-x) * 0.5);
}
@media (min-width: 80rem) {
  #sampleGrid .container-main .row [class*=col]:first-child .gutter-desc {
    --gutter-x: 24px;
    top: 50%;
    transform: translateY(-50%);
  }
}
#sampleGrid .container-main .row [class*=col]:first-child .gutter-desc .desc::before {
  content: "1rem";
  font-size: 10px;
}
@media (min-width: 80rem) {
  #sampleGrid .container-main .row [class*=col]:first-child .gutter-desc .desc::before {
    content: "1.5rem";
    font-size: 12px;
  }
}
#sampleGrid .container-main .row [class*=col] p.desc {
  font-size: 12px;
  background: var(--bs-gray-200);
}

#colors .card-color span {
  font-size: 12px;
}
#colors .card-color .chip {
  width: 6.25rem;
  height: 6.25rem;
  background-color: var(--chip-color);
}
#colors .card-color .hex {
  font-size: 18px;
  font-weight: 500;
}

#typo .typo-table thead th:not(:first-child),
#typo .typo-table tbody td:not(:first-child) {
  text-align: center;
}
#typo .typo-table thead th {
  color: #999;
  font-size: 16px;
  font-weight: normal;
  padding-top: 0;
}
#typo .typo-table tbody td {
  color: #16171d;
  vertical-align: baseline;
  border: unset;
}
#typo .typo-table tbody td:nth-child(2) {
  text-align: left;
}

@media print {
  body {
    font-size: 0.75rem;
  }
  body,
  body * {
    -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
  }
  .print-page-new {
    -moz-column-break-before: page !important;
         break-before: page !important;
  }
  .wrap.guide {
    height: auto;
  }
  .wrap.guide .guide-header {
    height: 100vh;
    position: static;
    border-bottom: none;
  }
  .wrap.guide .guide-header .container-fluid .navbar-brand a {
    font-size: 40px;
  }
  .wrap.guide .guide-header .container-fluid .navbar-brand a .icon-logo {
    --icon-box-width: 2.5rem;
    --icon-box-height: 2.5rem;
  }
  .wrap.guide .guide-header .container-fluid .guide-header-control h3 {
    font-size: 30px;
  }
  .wrap.guide .guide-body {
    padding-top: 0;
  }
  .wrap.guide .guide-body .guide-contents .guide-content {
    -moz-column-break-before: page;
         break-before: page;
    border-top: none;
  }
  .wrap.guide .guide-body .guide-contents .guide-content > h2 {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--bs-secondary);
  }
  .wrap.guide .guide-body .guide-contents #sampleGrid.contents, .wrap.guide .guide-body .guide-contents #sampleGrid.contents .box-grid-desc:last-child, .wrap.guide .guide-body .guide-contents #sampleGrid.contents .container-main .row [class*=col]:first-child .gutter-desc:last-child {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  .wrap.guide .guide-body .guide-contents #colors .contents .row.mt-5 {
    margin-top: 2.25rem !important;
  }
  .wrap.guide .guide-body .guide-contents #colors .card-color .chip {
    width: 5rem;
    height: 5rem;
  }
  .wrap.guide .guide-body .guide-contents #card .card-list .col-12.list-item {
    width: 33.33333333% !important;
  }
  .wrap.guide .guide-body .guide-contents .col-print-12 {
    width: 100%;
  }
  .wrap.guide .guide-body .guide-contents .mt-print-5 {
    margin-top: 3rem !important;
  }
  .wrap.guide .guide-body.h-100,
  .wrap.guide .guide-body .guide-contents.h-100 {
    height: auto !important;
  }
}/*# sourceMappingURL=index.css.map */