/* 
 * Define Custom Sheets
 * Template Name : hira-nonepay-ui
 * Author : Da-eun Ryu
 * File : less
 */
/************************************************
 * 공통 스타일 시트
 ************************************************/
/* 
 * Define Custom variables
 * Template Name : hira-nonepay-ui
 * Author : Da-eun Ryu
 * File : less
 */
/************************************************
 * Color System
 ************************************************/
/************************************************
 * Body
 ************************************************/
/************************************************
 * Font
 ************************************************/
/************************************************
 * Components
 ************************************************/
/************************************************
 * Input
 ************************************************/
/************************************************
 * Selection
 ************************************************/
/************************************************
 * Button
 ************************************************/
/************************************************
 * Form
 ************************************************/
/************************************************
 * Table
 ************************************************/
/************************************************
 * Tab
 ************************************************/
/************************************************
* Modal
************************************************/
/************************************************
 * Calendar
 ************************************************/
/* Calendar Root */
/* Header */
/* Content header */
/* Other month */
/* Dates */
/* Footer */
/************************************************
 * 본고딕 (Noto Sans KR)
 ************************************************/
@font-face {
  font-family: "Noto Sans KR";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local("Noto Sans KR Light"), local("Noto Sans KR-Light"), url("fonts/NotoSansKR/NotoSansKR-Light.woff2") format("woff2"), url("fonts/NotoSansKR/NotoSansKR-Light.woff") format("woff"), url("fonts/NotoSansKR/NotoSansKR-Light.otf") format("opentype");
}
@font-face {
  font-family: "Noto Sans KR";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local("Noto Sans KR Regular"), local("Noto Sans KR-Regular"), url("fonts/NotoSansKR/NotoSansKR-Regular.woff2") format("woff2"), url("fonts/NotoSansKR/NotoSansKR-Regular.woff") format("woff"), url("fonts/NotoSansKR/NotoSansKR-Regular.otf") format("opentype");
}
@font-face {
  font-family: "Noto Sans KR";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: local("Noto Sans KR Medium"), local("Noto Sans KR-Medium"), url("fonts/NotoSansKR/NotoSansKR-Medium.woff2") format("woff2"), url("fonts/NotoSansKR/NotoSansKR-Medium.woff") format("woff"), url("fonts/NotoSansKR/NotoSansKR-Medium.otf") format("opentype");
}
@font-face {
  font-family: "Noto Sans KR";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local("Noto Sans KR Bold"), local("Noto Sans KR-Bold"), url("fonts/NotoSansKR/NotoSansKR-Bold.woff2") format("woff2"), url("fonts/NotoSansKR/NotoSansKR-Bold.woff") format("woff"), url("fonts/NotoSansKR/NotoSansKR-Bold.otf") format("opentype");
}
/* 
 * Define Common Class
 * Template Name : hira-nonepay-ui
 * Author : Da-eun Ryu
 * File : less
 */
/* 팔레트
 ************************************************/
.bg-primary {
  background-color: #3a83db !important;
}
.bg-secondary {
  background-color: #3a99db !important;
}
.bg-success {
  background-color: #0c9c54 !important;
}
.bg-info {
  background-color: #1491ee !important;
}
.bg-warning {
  background-color: #ffc31f !important;
}
.bg-danger {
  background-color: #e12828 !important;
}
.bg-dark {
  background-color: #212d3e !important;
}
.bg-gray {
  background-color: #58606b !important;
}
.bg-lightblue {
  background-color: #ebf3ff !important;
}
.bg-blue {
  background-color: #1491ee !important;
}
.bg-indigo {
  background-color: #11477a !important;
}
.bg-purple {
  background-color: #322987 !important;
}
.bg-pink {
  background-color: #eda4cf !important;
}
.bg-red {
  background-color: #e12828 !important;
}
.bg-orange {
  background-color: #ffa200 !important;
}
.bg-yellow {
  background-color: #ffc31f !important;
}
.bg-green {
  background-color: #0c9c54 !important;
}
.bg-teal {
  background-color: #098ea5 !important;
}
.bg-cyan {
  background-color: #5bcbbd !important;
}
.bg-white {
  background-color: #ffffff !important;
}
.bg-light {
  background-color: #c7cacd !important;
}
.bg-lighter {
  background-color: #fafafa !important;
}
.bg-black {
  background-color: #000000 !important;
}
.bg-transparent {
  background-color: transparent !important;
}
.bg-opacity {
  opacity: 0.35;
}
.bg-primary-dim {
  background-color: #ecf3f7 !important;
}
.bg-secondary-dim {
  background-color: #eff5f8 !important;
}
.bg-success-dim {
  background-color: #000 !important;
}
.bg-info-dim {
  background-color: #ebf3ff !important;
}
.bg-warning-dim {
  background-color: #000 !important;
}
.bg-danger-dim {
  background-color: #000 !important;
}
.bg-gray-100 {
  background-color: #f8f8f8 !important;
}
.bg-gray-200 {
  background-color: #e4e5e7 !important;
}
.bg-gray-300 {
  background-color: #dbdcde !important;
}
.bg-gray-400 {
  background-color: #cdcdd1 !important;
}
.bg-gray-500 {
  background-color: #a9a9a9 !important;
}
.bg-gray-600 {
  background-color: #999999 !important;
}
.bg-gray-700 {
  background-color: #797979 !important;
}
.bg-gray-800 {
  background-color: #4c4c4d !important;
}
.bg-gray-900 {
  background-color: #333333 !important;
}
.pattern {
  background-image: radial-gradient(rgba(255, 255, 255, 0.2) 1px, transparent 0px);
  background-position: -3px -3px;
  background-size: 3px 3px;
}
.text-primary {
  color: #3a83db !important;
}
.text-secondary {
  color: #3a99db !important;
}
.text-info {
  color: #1491ee !important;
}
.text-success {
  color: #0c9c54 !important;
}
.text-danger {
  color: #e12828 !important;
}
.text-warning {
  color: #ffc31f !important;
}
.text-dark {
  color: #212d3e !important;
}
.text-gray {
  color: #58606b !important;
}
.text-body {
  color: #000000 !important;
}
.text-base {
  color: #333333 !important;
}
.text-soft {
  color: #b5b5b5 !important;
}
.text-black {
  color: #000000 !important;
}
.text-black-50 {
  color: rgba(0, 0, 0, 0.5) !important;
}
.text-light {
  color: #c7cacd !important;
}
.text-lighter {
  color: #fafafa !important;
}
.text-white {
  color: #ffffff !important;
}
.text-blue {
  color: #1491ee !important;
}
.text-indigo {
  color: #11477a !important;
}
.text-purple {
  color: #322987 !important;
}
.text-pink {
  color: #eda4cf !important;
}
.text-red {
  color: #e12828 !important;
}
.text-orange {
  color: #ffa200 !important;
}
.text-yellow {
  color: #ffc31f !important;
}
.text-green {
  color: #0c9c54 !important;
}
.text-teal {
  color: #098ea5 !important;
}
.text-cyan {
  color: #5bcbbd !important;
}
.text-transparent {
  color: transparent !important;
}
.text-primary-dim {
  color: #ecf3f7 !important;
}
.text-secondary-dim {
  color: #eff5f8 !important;
}
.text-success-dim {
  color: #000 !important;
}
.text-info-dim {
  color: #ebf3ff !important;
}
.text-warning-dim {
  color: #000 !important;
}
.text-danger-dim {
  color: #000 !important;
}
.text-gray-100 {
  color: #f8f8f8 !important;
}
.text-gray-200 {
  color: #e4e5e7 !important;
}
.text-gray-300 {
  color: #dbdcde !important;
}
.text-gray-400 {
  color: #cdcdd1 !important;
}
.text-gray-500 {
  color: #a9a9a9 !important;
}
.text-gray-600 {
  color: #999999 !important;
}
.text-gray-700 {
  color: #797979 !important;
}
.text-gray-800 {
  color: #4c4c4d !important;
}
.text-gray-900 {
  color: #333333 !important;
}
.text-blue-700 {
  color: #1491ee !important;
  font-weight: 700;
  font-size: 10px;
}
/************************************************
 * 바디
 ************************************************/
html,
body {
  font-size: 14px;
}
.body {
  background-color: #fafafa;
}
a {
  background-color: transparent;
  color: #3a83db;
  padding: 0px;
  margin: 0px;
  text-decoration: underline;
}
.linkOutput {
  background-color: transparent;
  color: #3a83db;
  padding: 0px;
  margin: 0px;
  text-decoration: underline;
}
.cl-control a {
  text-decoration: none;
  color: inherit;
}
p {
  margin: 0px;
  padding: 0px;
  line-height: 1.2;
}
/************************************************
 * 타이포그래피
 ************************************************/
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  color: #000000;
  font-family: "NanumBarunGothic", "Noto Sans KR", "Spoqa Han Sans Neo", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", "돋움", "Dotum", sans-serif;
  font-weight: 700;
  letter-spacing: -0.07em;
}
h1 .cl-text,
h2 .cl-text,
h3 .cl-text,
h4 .cl-text,
h5 .cl-text,
h6 .cl-text,
.h1 .cl-text,
.h2 .cl-text,
.h3 .cl-text,
.h4 .cl-text,
.h5 .cl-text,
.h6 .cl-text {
  line-height: 1;
}
h6 .cl-text,
.h6 .cl-text {
  line-height: 1.2;
}
h1,
.h1 {
  font-size: 40px;
}
h2,
.h2 {
  font-size: 32px;
}
h3,
.h3 {
  font-size: 24px;
}
h4,
.h4 {
  font-size: 22px;
}
h5,
.h5 {
  font-size: 18px;
}
h6,
.h6 {
  font-size: 16px;
}
.fs-base {
  font-size: 14px !important;
}
.fs-lg {
  font-size: 17px !important;
}
.fs-md {
  font-size: 15px !important;
}
.fs-sm {
  font-size: 13px !important;
}
.fs-16 {
  font-size: 16px !important;
}
.fs-18 {
  font-size: 18px !important;
}
.ff-base {
  font-family: "NanumBarunGothic", "Noto Sans KR", "Spoqa Han Sans Neo", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", "돋움", "Dotum", sans-serif !important;
}
.ff-italic {
  font-style: italic !important;
}
.fw-light {
  font-weight: 400;
}
.fw-normal {
  font-weight: 400 !important;
}
.fw-medium {
  font-weight: 500;
}
.fw-bold {
  font-weight: 700;
}
.text-left {
  text-align: left !important;
}
.text-center {
  text-align: center !important;
}
.text-right {
  text-align: right !important;
}
.align-top {
  vertical-align: top !important;
}
.align-middle {
  vertical-align: middle !important;
}
.align-bottom {
  vertical-align: bottom !important;
}
.align-text-top {
  vertical-align: text-top !important;
}
.align-text-bottom {
  vertical-align: text-bottom !important;
}
.lcap,
.text-lowercase {
  text-transform: lowercase !important;
}
.ucap,
.text-uppercase {
  text-transform: uppercase !important;
}
.ccap,
.text-capitalize {
  text-transform: capitalize !important;
}
.underline,
.text-underline {
  text-decoration: underline !important;
}
/************************************************
 * 유틸리티
 ************************************************/
.border {
  border: 1px solid #cdcdd1 !important;
}
.border-top {
  border-top: 1px solid #cdcdd1 !important;
}
.border-bottom {
  border-bottom: 1px solid #cdcdd1 !important;
}
.border-left {
  border-left: 1px solid #cdcdd1 !important;
}
.border-right {
  border-right: 1px solid #cdcdd1 !important;
}
.border-0 {
  border: none !important;
}
.border-top-0 {
  border-top: none !important;
}
.border-bottom-0 {
  border-bottom: none !important;
}
.border-left-0 {
  border-left: none !important;
}
.border-right-0 {
  border-right: none !important;
}
.border-primary {
  border-color: #3a83db !important;
}
.border-secondary {
  border-color: #3a99db !important;
}
.border-success {
  border-color: #0c9c54 !important;
}
.border-info {
  border-color: #1491ee !important;
}
.border-warning {
  border-color: #ffc31f !important;
}
.border-danger {
  border-color: #e12828 !important;
}
.border-dark {
  border-color: #212d3e !important;
}
.border-gray {
  border-color: #58606b !important;
}
.border-blue {
  border-color: #1491ee !important;
}
.border-indigo {
  border-color: #11477a !important;
}
.border-purple {
  border-color: #322987 !important;
}
.border-pink {
  border-color: #eda4cf !important;
}
.border-orange {
  border-color: #ffa200 !important;
}
.border-teal {
  border-color: #098ea5 !important;
}
.border-cyan {
  border-color: #5bcbbd !important;
}
.border-white {
  border-color: #ffffff !important;
}
.border-light {
  border-color: #c7cacd !important;
}
.border-lighter {
  border-color: #fafafa !important;
}
.border-black {
  border-color: #000000 !important;
}
.border-transparent {
  border-color: transparent !important;
}
.border-soft {
  border-color: #e7e7e7 !important;
}
.border-gray-100 {
  border-color: #f8f8f8 !important;
}
.border-gray-200 {
  border-color: #e4e5e7 !important;
}
.border-gray-300 {
  border-color: #dbdcde !important;
}
.border-gray-400 {
  border-color: #cdcdd1 !important;
}
.border-gray-500 {
  border-color: #a9a9a9 !important;
}
.border-gray-600 {
  border-color: #999999 !important;
}
.border-gray-700 {
  border-color: #797979 !important;
}
.border-gray-800 {
  border-color: #4c4c4d !important;
}
.border-gray-900 {
  border-color: #333333 !important;
}
.dashed {
  border: 1px solid #cdcdd1;
  border-style: dashed;
}
.rounded {
  border-radius: 8px !important;
}
.rounded-top {
  border-top-left-radius: 8px !important;
  border-top-right-radius: 8px !important;
}
.rounded-top-0 {
  border-top-left-radius: 0px !important;
  border-top-right-radius: 0px !important;
}
.rounded-bottom {
  border-bottom-left-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
}
.rounded-bottom-0 {
  border-bottom-left-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}
.rounded-left {
  border-top-left-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
}
.rounded-left-0 {
  border-top-left-radius: 0px !important;
  border-bottom-left-radius: 0px !important;
}
.rounded-right {
  border-top-right-radius: 8px !important;
  border-bottom-right-radius: 8px !important;
}
.rounded-right-0 {
  border-top-right-radius: 0px !important;
  border-bottom-right-radius: 0px !important;
}
.rounded-circle {
  border-radius: 9999px !important;
}
.rounded-pill {
  border-radius: 10px !important;
}
.rounded-0 {
  border-radius: 0px !important;
}
.rounded-sm {
  border-radius: 4px !important;
}
.rounded-10 {
  border-radius: 10px !important;
}
.rounded-lg {
  border-radius: 20px !important;
}
.box-shadow {
  box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.08);
}
.box-shadow-0 {
  box-shadow: none !important;
}
.m-0 {
  margin: 0px !important;
}
.m-1 {
  margin: 4px !important;
}
.m-2 {
  margin: 8px !important;
}
.m-3 {
  margin: 12px !important;
}
.m-4 {
  margin: 16px !important;
}
.m-5 {
  margin: 20px !important;
}
.m-gs {
  margin: 18px !important;
}
.ml-0 {
  margin-left: 0px !important;
}
.ml-1 {
  margin-left: 4px !important;
}
.ml-2 {
  margin-left: 8px !important;
}
.ml-3 {
  margin-left: 12px !important;
}
.ml-4 {
  margin-left: 16px !important;
}
.ml-5 {
  margin-left: 20px !important;
}
.ml-gs {
  margin-left: 18px !important;
}
.mr-0 {
  margin-right: 0px !important;
}
.mr-1 {
  margin-right: 4px !important;
}
.mr-2 {
  margin-right: 8px !important;
}
.mr-3 {
  margin-right: 12px !important;
}
.mr-4 {
  margin-right: 16px !important;
}
.mr-5 {
  margin-right: 20px !important;
}
.mr-gs {
  margin-right: 18px !important;
}
.mt-0 {
  margin-top: 0px !important;
}
.mt-1 {
  margin-top: 4px !important;
}
.mt-2 {
  margin-top: 8px !important;
}
.mt-3 {
  margin-top: 12px !important;
}
.mt-4 {
  margin-top: 16px !important;
}
.mt-5 {
  margin-top: 20px !important;
}
.mt-gs {
  margin-top: 18px !important;
}
.mb-0 {
  margin-bottom: 0px !important;
}
.mb-1 {
  margin-bottom: 4px !important;
}
.mb-2 {
  margin-bottom: 8px !important;
}
.mb-3 {
  margin-bottom: 12px !important;
}
.mb-4 {
  margin-bottom: 16px !important;
}
.mb-5 {
  margin-bottom: 20px !important;
}
.mb-gs {
  margin-bottom: 18px !important;
}
.p-0 {
  padding: 0px !important;
}
.p-1 {
  padding: 4px !important;
}
.p-2 {
  padding: 8px !important;
}
.p-3 {
  padding: 12px !important;
}
.p-4 {
  padding: 16px !important;
}
.p-5 {
  padding: 20px !important;
}
.p-gs {
  padding: 18px !important;
}
.pl-0 {
  padding-left: 0px !important;
}
.pl-1 {
  padding-left: 4px !important;
}
.pl-2 {
  padding-left: 8px !important;
}
.pl-3 {
  padding-left: 12px !important;
}
.pl-4 {
  padding-left: 16px !important;
}
.pl-5 {
  padding-left: 20px !important;
}
.pl-gs {
  padding-left: 18px !important;
}
.pr-0 {
  padding-right: 0px !important;
}
.pr-1 {
  padding-right: 4px !important;
}
.pr-2 {
  padding-right: 8px !important;
}
.pr-3 {
  padding-right: 12px !important;
}
.pr-4 {
  padding-right: 16px !important;
}
.pr-5 {
  padding-right: 20px !important;
}
.pr-gs {
  padding-right: 18px !important;
}
.pt-0 {
  padding-top: 0px !important;
}
.pt-1 {
  padding-top: 4px !important;
}
.pt-2 {
  padding-top: 8px !important;
}
.pt-3 {
  padding-top: 12px !important;
}
.pt-4 {
  padding-top: 16px !important;
}
.pt-5 {
  padding-top: 20px !important;
}
.pt-gs {
  padding-top: 18px !important;
}
.pb-0 {
  padding-bottom: 0px !important;
}
.pb-1 {
  padding-bottom: 4px !important;
}
.pb-2 {
  padding-bottom: 8px !important;
}
.pb-3 {
  padding-bottom: 12px !important;
}
.pb-4 {
  padding-bottom: 16px !important;
}
.pb-5 {
  padding-bottom: 20px !important;
}
.pb-gs {
  padding-bottom: 18px !important;
}
.cursor-default {
  cursor: default;
}
.cursor-pointer {
  cursor: pointer;
}
.cursor-move {
  cursor: move;
}
.cursor-text {
  cursor: text;
}
.cursor-wait {
  cursor: wait;
}
.cursor-help {
  cursor: help;
}
/************************************************
 * 공통 화면 스타일 시트
 ************************************************/
.cl-container.header {
  background-image: linear-gradient(90deg, #f5f5f5, #11477a, #11477a, #11477a);
}
.cl-container.header .cl-button.btn-logo {
  color: black;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.06em;
  padding-left: 8px;
  background-color: transparent;
  border: none;
}
.cl-container.header .cl-button.btn-logo:before {
  content: "";
  position: absolute;
  left: 43px;
  top: calc(50% - 22px);
  width: 1px;
  height: 47px;
  background-color: rgba(255, 255, 255, 0.2);
}
.cl-container.header .cl-button.btn-logo .cl-text {
  line-height: 1;
  padding-left: 15px !important;
}
.cl-container.header .cl-button.btn-logo .cl-icon {
  width: 29px;
  height: 43px;
}
.cl-container.header .grpGnb .cl-button {
  background-color: transparent;
  border: none;
  border-radius: 0;
  color: #ffffff;
  /* 내비게이션 바 아이템 - 선택됨 */
}
.cl-container.header .grpGnb .cl-button .cl-text {
  padding: 0px 0px 20px 0px !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  letter-spacing: -0.06em !important;
}
.cl-container.header .grpGnb .cl-button.cl-selected {
  background-color: #00E1FF;
  box-shadow: inset 0px -4px 0px 0px #ffc31f;
  color: #ffc31f;
}
.cl-container.header .grpGnb .cl-button:not(.cl-disabled):not(.cl-selected):hover,
.cl-container.header .grpGnb .cl-button:not(.cl-disabled).cl-hover {
  background-color: rgba(0, 255, 255, 0.1);
  box-shadow: inset 0px -4px 0px 0px #ffc31f;
  color: #ffc31f;
}
.cl-container.header .grpGnb .cl-button.cl-focus {
  background-color: transparent;
  box-shadow: inset 0px -4px 0px 0px #ffc31f;
  color: #ffc31f;
}
.cl-container.header .grpGnb .cl-button.check {
  background-color: transparent;
  box-shadow: inset 0px -4px 0px 0px #ffc31f;
  color: #ffc31f;
}
.cl-container.header .cl-navigationbar {
  background-color: transparent;
  border: none;
  color: #ffffff;
  outline: none !important;
}
.cl-container.header .cl-navigationbar .cl-navigationbar-bar {
  margin: 0px auto 0px 0px;
  outline: none !important;
}
.cl-container.header .cl-navigationbar .cl-navigationbar-bar .cl-navigationbar-item {
  padding: 0px 0px 20px 0px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.06em;
}
.cl-container.header .cl-navigationbar .cl-navigationbar-bar .cl-navigationbar-item:not(.cl-disabled):not(.cl-selected):hover,
.cl-container.header .cl-navigationbar .cl-navigationbar-bar .cl-navigationbar-item:not(.cl-disabled).cl-hover {
  background-color: transparent;
  box-shadow: inset 0px -4px 0px 0px #ffc31f;
  color: #ffc31f;
}
.cl-container.header .cl-navigationbar .cl-navigationbar-bar .cl-navigationbar-item.cl-selected {
  background-color: transparent;
  box-shadow: inset 0px -4px 0px 0px #ffc31f;
  color: #ffc31f;
}
.cl-container.footer .cl-output {
  color: #888888;
  font-weight: 300;
  font-size: 15px;
  letter-spacing: -0.02em;
}
/**
 * 태블릿일때
 */
@media (min-width: 1023px) and (max-width: 1280px) {
  .cl-container.header .cl-button.btn-logo {
    color: black;
    font-size: 16px;
  }
  .cl-container.header .cl-button.btn-logo:before {
    content: "";
    position: absolute;
    left: 43px;
    top: calc(50% - 22px);
    width: 1px;
    height: 47px;
    background-color: rgba(255, 255, 255, 0.2);
  }
  .cl-container.header .cl-button.btn-logo .cl-icon {
    width: 29px;
    height: 43px;
  }
  .cl-container.header .grpGnb .cl-button {
    background-color: transparent;
    border: none;
    border-radius: 0;
    color: #ffffff;
  }
  .cl-container.header .grpGnb .cl-button .cl-text {
    padding: 0px 0px 0px 0px !important;
    font-size: 25px !important;
    font-weight: 500 !important;
    word-break: keep-all;
    white-space: pre-wrap;
    text-align: center !important;
    line-height: 1.5 !important;
  }
  .cl-container.header .grpGnb .cl-button.check {
    background-color: transparent;
    box-shadow: inset 0px -4px 0px 0px #ffc31f;
    color: #ffc31f;
  }
  .cl-container.header .cl-navigationbar .cl-navigationbar-bar .cl-navigationbar-item {
    padding: 0px 0px 0px 0px !important;
    font-size: 16px;
    padding: 0px;
    text-align: center;
  }
  .cl-container.header .cl-navigationbar .cl-navigationbar-bar .cl-navigationbar-item .cl-text {
    word-break: keep-all;
    white-space: pre-wrap;
    text-align: center !important;
  }
}
/**
 * 태블릿1일때
 */
@media (min-width: 750px) and (max-width: 1023px) {
  .cl-container.header .cl-button.btn-logo {
    color: black;
    font-size: 16px;
  }
  .cl-container.header .cl-button.btn-logo:before {
    content: "";
    position: absolute;
    left: 43px;
    top: calc(50% - 22px);
    width: 1px;
    height: 47px;
    background-color: rgba(255, 255, 255, 0.2);
  }
  .cl-container.header .cl-button.btn-logo .cl-icon {
    width: 29px;
    height: 43px;
  }
  .cl-container.header .grpGnb .cl-button {
    background-color: transparent;
    border: none;
    border-radius: 0;
    color: #ffffff;
  }
  .cl-container.header .grpGnb .cl-button .cl-text {
    padding: 0px 0px 0px 0px !important;
    font-size: 25px !important;
    font-weight: 500 !important;
    word-break: keep-all;
    white-space: pre-wrap;
    text-align: center !important;
    line-height: 1.5 !important;
  }
  .cl-container.header .grpGnb .cl-button.check {
    background-color: transparent;
    box-shadow: inset 0px -4px 0px 0px #ffc31f;
    color: #ffc31f;
  }
  .cl-container.header .cl-navigationbar .cl-navigationbar-bar .cl-navigationbar-item {
    padding: 0px 0px 0px 0px !important;
    font-size: 16px;
    padding: 0px;
    text-align: center;
  }
  .cl-container.header .cl-navigationbar .cl-navigationbar-bar .cl-navigationbar-item .cl-text {
    word-break: keep-all;
    white-space: pre-wrap;
    text-align: center !important;
  }
}
/**
 * 모바일일때
 */
@media (max-width: 749px) {
  .cl-container.header {
    background: #11477a !important;
  }
  .cl-container.header .cl-container.logo-wrap {
    background-color: #ffffff;
  }
  .cl-container.header .cl-button.btn-logo {
    color: #000000;
    font-size: 18px;
    text-align: center !important;
  }
  .cl-container.header .cl-button.btn-logo:before {
    content: "";
    top: calc(50% - 9px);
    height: 18px;
    background-color: transparent;
  }
  .cl-container.header .cl-button.btn-logo .cl-icon {
    width: 17px;
    height: 23px;
  }
  .cl-container.header .cl-button.btn-logo .cl-text {
    padding-left: 10px !important;
  }
  .cl-container.header .grpGnb .cl-button {
    background-color: transparent;
    border: none;
    border-radius: 0;
    color: #ffffff;
  }
  .cl-container.header .grpGnb .cl-button .cl-text {
    padding: 0px 0px 0px 0px !important;
    font-size: 18px !important;
    font-weight: 500 !important;
    word-break: keep-all;
    white-space: pre-wrap;
    text-align: center !important;
    line-height: 1.5 !important;
  }
  .cl-container.header .grpGnb .cl-button:not(.cl-disabled):not(.cl-selected):hover,
  .cl-container.header .grpGnb .cl-button:not(.cl-disabled).cl-hover {
    box-shadow: none !important;
  }
  .cl-container.header .grpGnb .cl-button.cl-selected {
    box-shadow: none !important;
  }
  .cl-container.header .grpGnb .cl-button.check {
    box-shadow: none !important;
  }
  .cl-container.header .cl-navigationbar .cl-navigationbar-bar {
    margin: 0px auto;
  }
  .cl-container.header .cl-navigationbar .cl-navigationbar-bar .cl-navigationbar-item {
    font-weight: 500;
    font-size: 13px;
    padding: 0px;
    text-align: center;
  }
  .cl-container.header .cl-navigationbar .cl-navigationbar-bar .cl-navigationbar-item .cl-text {
    word-break: keep-all;
    white-space: pre-wrap;
  }
  .cl-container.header .cl-navigationbar .cl-navigationbar-bar .cl-navigationbar-item:not(.cl-disabled):not(.cl-selected):hover,
  .cl-container.header .cl-navigationbar .cl-navigationbar-bar .cl-navigationbar-item:not(.cl-disabled).cl-hover {
    box-shadow: none;
  }
  .cl-container.header .cl-navigationbar .cl-navigationbar-bar .cl-navigationbar-item.cl-selected {
    box-shadow: none;
  }
}
.cl-container.quickGrp {
  position: fixed !important;
  width: 100% !important;
  height: 30px !important;
}
body > .cl-container {
  overflow: hidden !important;
}
/************************************************
 * 팝업화면 닫기 버튼 그룹
 ************************************************/
.cl-container.botton-btn {
  background-color: #ffffff;
  border-top: 1px solid #e7e7e7;
}
/************************************************
 * 탭 버튼
 ************************************************/
.cl-container.tab-btns {
  background-image: none;
  background-repeat: no-repeat;
  background-size: 228px 1px;
  background-position: right bottom;
}
.cl-container.tab-btns .cl-button {
  border-color: #b5b6b7;
  border-radius: 0px;
  color: #000000;
  font-size: 18px;
  padding: 0px 20px;
}
.cl-container.tab-btns .cl-button.cl-selected {
  background-color: #14326a;
  border-color: #14326a;
  box-shadow: 6px 8px 30px 0px rgba(20, 50, 106, 0.3);
  color: #ffffff;
  font-weight: 700;
}
/************************************************
 * 비급여진료비 바로가기 서비스
 ************************************************/
.cl-container.service {
  background-image: url("images/controls/image/bg_blue.png");
  background-position: left top;
  background-repeat: no-repeat;
  background-size: auto 460px;
}
.cl-container.service .cl-output.h1 {
  font-size: 54px;
  font-weight: 700;
  color: #ffffff;
  text-align: center;
}
.cl-container.service .cl-output.subtxt {
  color: #b8cfe8;
  font-weight: 400;
  font-size: 18px;
  text-align: center;
}
.cl-container.service .cl-output.subtxt .cl-text {
  line-height: 28px;
}
.cl-container.service .cl-container.card {
  border: 2px solid #2882bb;
  border-radius: 20px;
  box-shadow: 0px 0px 27px 0px rgba(4, 26, 41, 0.15);
}
.cl-container.service .cl-container.card .cl-container.img-wrap {
  border-radius: 20px 20px 0px 0px;
}
.cl-container.service .cl-container.card .cl-output.tit {
  font-size: 26px;
  font-weight: 700;
  color: #000000;
  text-align: center;
}
.cl-container.service .cl-container.card .cl-output.tit .cl-text {
  line-height: 32px;
}
.cl-container.service .cl-output.copyright {
  color: #888888;
  font-weight: 400;
  font-size: 15px;
  text-align: center;
}
.cl-container.service .cl-output.copyright .cl-text {
  line-height: 21px;
}
/************************************************
 * 비급여진료비용조회
 ************************************************/
.cl-container.info-box .cl-output.align-top {
  background-image: url("images/controls/image/ico_info_box.png");
  background-position: left center;
  padding-left: 77px;
}
.cl-container.filter-dtl .cl-container.tit-box {
  border-bottom: 2px solid #000000;
}
.cl-container.filter-dtl .cl-tree.filter-result {
  border: 1px solid #cdcdd1;
}
.cl-container.filter-dtl .cl-tree.filter-result .cl-tree-item {
  background-repeat: no-repeat;
  background-position: calc(100% - 15px) center;
  color: #333333;
  height: 45px;
  padding: 0px;
}
.cl-container.filter-dtl .cl-tree.filter-result .cl-tree-item .cl-text {
  padding: 0px 0px 0px 4px;
}
.cl-container.filter-dtl .cl-tree.filter-result .cl-tree-item .cl-text .soundonly {
  display: none;
}
.cl-container.filter-dtl .cl-tree.filter-result .cl-tree-item .cl-tree-itemicon,
.cl-container.filter-dtl .cl-tree.filter-result .cl-tree-item .cl-tree-treeicon {
  background-image: none;
  width: 0px;
}
.cl-container.filter-dtl .cl-tree.filter-result .cl-tree-item .cl-checkbox {
  background-image: url("images/controls/checkbox/ico_check.png");
  background-size: 20px;
  width: 20px;
}
.cl-container.filter-dtl .cl-tree.filter-result .cl-tree-item .cl-checkbox.cl-checked {
  background-image: url("images/controls/checkbox/ico_check_on.png");
}
.cl-container.filter-dtl .cl-tree.filter-result .cl-tree-item.cl-folder.cl-expanded {
  background-image: url("images/controls/tree/ico_btn_expanded.png");
}
.cl-container.filter-dtl .cl-tree.filter-result .cl-tree-item.cl-folder.cl-collapsed {
  background-image: url("images/controls/tree/ico_btn_collapsed.png");
  border-bottom: 1px solid #cccccc;
}
.cl-container.filter-dtl .cl-tree.filter-result .cl-tree-item.tree-item-level-1 {
  background-color: #033b6f;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
}
.cl-container.filter-dtl .cl-tree.filter-result .cl-tree-item.tree-item-level-1 .cl-badge.Y {
  background-image: url("images/controls/tree/ico_help.png");
  background-repeat: no-repeat;
  color: transparent;
  font-size: 0px;
  width: 16px;
  height: 16px;
  margin-right: 40px;
}
.cl-container.filter-dtl .cl-tree.filter-result .cl-tree-item.tree-item-level-1 .cl-badge.Y:hover {
  background-image: url("images/controls/button/ico_btn_q_on.png");
}
.cl-container.filter-dtl .cl-tree.filter-result .cl-tree-item.tree-item-level-1:hover,
.cl-container.filter-dtl .cl-tree.filter-result .cl-tree-item.tree-item-level-1.cl-selected {
  background-color: #033b6f !important;
  color: #ffffff !important;
}
.cl-container.filter-dtl .cl-tree.filter-result .cl-tree-item.tree-item-level-1 .cl-checkbox {
  background-image: none;
  width: 0px;
}
.cl-container.filter-dtl .cl-tree.filter-result .cl-tree-item.tree-item-level-1 .cl-text {
  padding: 0px 0px 0px 15px;
}
.cl-container.filter-dtl .cl-tree.filter-result .cl-tree-item.tree-item-level-1.cl-folder.cl-expanded {
  background-image: url("images/controls/tree/ico_btn_lvl1_expanded.png");
}
.cl-container.filter-dtl .cl-tree.filter-result .cl-tree-item.tree-item-level-1.cl-folder.cl-collapsed {
  background-image: url("images/controls/tree/ico_btn_lvl1_collapsed.png");
}
.cl-container.filter-dtl .cl-tree.filter-result .cl-tree-item.tree-item-level-2 {
  border-bottom: 1px solid #cccccc;
}
.cl-container.filter-dtl .cl-tree.filter-result .cl-tree-item.tree-item-level-2 .cl-badge.Y {
  background-image: url("images/controls/tree/ico_help.png");
  background-repeat: no-repeat;
  color: transparent;
  font-size: 0px;
  width: 16px;
  height: 16px;
  margin-right: 40px;
}
.cl-container.filter-dtl .cl-tree.filter-result .cl-tree-item.tree-item-level-2 .cl-badge.Y:hover {
  background-image: url("images/controls/button/ico_btn_q_on.png");
}
.cl-container.filter-dtl .cl-tree.filter-result .cl-tree-item.tree-item-level-2:hover,
.cl-container.filter-dtl .cl-tree.filter-result .cl-tree-item.tree-item-level-2.cl-selected {
  background-color: transparent !important;
  color: #333333 !important;
}
.cl-container.filter-dtl .cl-tree.filter-result .cl-tree-item.tree-item-level-2 + .sub-items {
  background-color: #f6f6f6;
  padding: 8px 0px;
  border-bottom: 1px solid #cccccc;
}
.cl-container.filter-dtl .cl-tree.filter-result .cl-tree-item.tree-item-level-3 {
  height: auto;
  padding: 2px 0px;
}
.cl-container.filter-dtl .cl-tree.filter-result .cl-tree-item.tree-item-level-3 .cl-badge.Y {
  background-image: url("images/controls/tree/ico_help.png");
  background-repeat: no-repeat;
  color: transparent;
  font-size: 0px;
  width: 16px;
  height: 16px;
  margin-right: 40px;
}
.cl-container.filter-dtl .cl-tree.filter-result .cl-tree-item.tree-item-level-3 .cl-badge.Y:hover {
  background-image: url("images/controls/button/ico_btn_q_on.png");
}
.cl-container.filter-dtl .cl-tree.filter-result .cl-tree-item.tree-item-level-3:hover,
.cl-container.filter-dtl .cl-tree.filter-result .cl-tree-item.tree-item-level-3.cl-selected {
  background-color: transparent !important;
  color: #333333 !important;
}
.cl-container.filter-dtl .cl-tree.filter-result .cl-tree-item.tree-item-level-4 {
  height: auto;
  padding: 2px 0px;
}
.cl-container.filter-dtl .cl-tree.filter-result .cl-tree-item.tree-item-level-4 .cl-text {
  font-size: 12px;
}
.cl-container.filter-dtl .cl-tree.filter-result .cl-tree-item.tree-item-level-4 .cl-badge {
  background-image: url("images/controls/tree/ico_help.png");
  background-repeat: no-repeat;
  color: transparent;
  font-size: 0px;
  width: 16px;
  height: 16px;
  margin-right: 40px;
}
.cl-container.filter-dtl .cl-tree.filter-result .cl-tree-item.tree-item-level-4 .cl-badge:hover {
  background-image: url("images/controls/button/ico_btn_q_on.png");
}
.cl-container.filter-dtl .cl-tree.filter-result .cl-tree-item.tree-item-level-4:hover,
.cl-container.filter-dtl .cl-tree.filter-result .cl-tree-item.tree-item-level-4.cl-selected {
  background-color: transparent !important;
  color: #333333 !important;
}
@media (min-width: 1024px) and (max-width: 1280px) {
  .cl-container.tab-btns {
    background-image: none;
  }
  .cl-container.tab-btns .cl-button {
    padding: 0px 20px;
  }
  .cl-container.service .cl-output.h1 {
    font-size: 40px;
  }
  .cl-container.service .cl-container.card .cl-container.img-wrap {
    border-radius: 20px;
  }
  .cl-container.service .cl-container.card .cl-output.tit {
    font-size: 22px;
    text-align: left;
  }
}
@media (max-width: 1024px) {
  .cl-container.tab-btns {
    background-image: none;
  }
  .cl-container.tab-btns .cl-button {
    padding: 0px 5px;
  }
  .cl-container.service .cl-output.h1 {
    font-size: 24px;
  }
  .cl-container.service .cl-output.subtxt {
    font-size: 14px;
  }
  .cl-container.service .cl-output.subtxt .cl-text {
    line-height: 20px;
  }
  .cl-container.service .cl-container.card {
    border-color: #8ba6b7;
    box-shadow: none;
  }
  .cl-container.service .cl-container.card .cl-container.img-wrap {
    border-radius: 20px;
  }
  .cl-container.service .cl-container.card .cl-output.tit {
    font-size: 18px;
    text-align: left;
  }
  .cl-container.service .cl-container.card .cl-output.tit .cl-text {
    line-height: 24px;
  }
  .cl-container.info-box .cl-output.align-top {
    background-image: none;
    padding-left: 0px;
  }
}
/************************
 * 이용 가이드
 ************************/
.buttonGray {
  background-color: gray;
  color: white;
  font-size: 13px;
  padding-left: 5px;
  padding-top: 2px;
  padding-right: 5px;
  padding-bottom: 2px;
  border-radius: 6px;
}
.cl-output.step01 .cl-text {
  padding-left: 5px;
}
.cl-output.step01 .cl-text:before {
  content: "1";
  color: white;
  position: relative;
  display: inline-block;
  text-align: center;
  width: 20px;
  height: 20px;
  right: 5px;
  top: 1px;
  border-radius: 20px;
  background-color: #ffa300;
}
.cl-output.step02 .cl-text {
  padding-left: 5px;
}
.cl-output.step02 .cl-text:before {
  content: "2";
  color: white;
  position: relative;
  display: inline-block;
  text-align: center;
  top: 1px;
  width: 20px;
  height: 20px;
  right: 5px;
  border-radius: 20px;
  background-color: #ffa300;
}
.cl-output.step03 .cl-text {
  padding-left: 5px;
}
.cl-output.step03 .cl-text:before {
  content: "3";
  color: white;
  position: relative;
  display: inline-block;
  text-align: center;
  width: 20px;
  top: 1px;
  height: 20px;
  right: 5px;
  border-radius: 20px;
  background-color: #ffa300;
}
/************************************************
 * 커스텀 스타일 시트
 ************************************************/
/************************************************
 * 탭 버튼
 ************************************************/
.cl-htmlsnippet,
.cl-output {
  overflow: visible !important;
}
.cl-output.hiddenInfo {
  height: 0px !important;
  overflow: hidden !important;
}
.cl-embeddedpage.imgSample {
  background-image: url("images/controls/map/map.png");
  background-position: 100% 100%;
  background-size: auto;
}
.cl-container.xScrollGuide {
  opacity: 100;
  background: url("images/controls/grid/scrollGuide.png") center 20px no-repeat rgba(0, 0, 0, 0.4);
  background-size: 250px auto;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 15px;
  z-index: 3;
}
.cl-output.badge {
  background-color: #797979;
  border-radius: 3px;
  color: #ffffff;
  padding: 0px 3px;
  font-size: 11px;
  text-align: center;
}
.cl-output.btn-swipe-down {
  background-image: url("images/controls/button/ico_btn_down.png");
  background-size: 16px 9px;
  background-position: calc(100% - 15px) center;
}
.cl-output.btn-swipe-open {
  background-image: url("images/controls/button/ico_btn_open.png");
  background-size: 16px 9px;
  background-position: calc(100% - 15px) center;
}
/************************************************
 * 버튼 유틸
 ************************************************/
.cl-button.btn-round {
  border-radius: 9999px !important;
}
.cl-button.btn-square {
  border-radius: 0px !important;
}
.cl-button.btn-sm {
  font-size: 13px;
}
.cl-button.btn-md {
  font-size: 15px;
}
.cl-button.btn-lg {
  font-size: 17px;
}
.cl-container.btn-group.border-bottom {
  border-color: #e7e7e7 !important;
}
/************************************************
 * 기능 버튼
 ************************************************/
.cl-button.btn-scroll {
  background-color: #969696;
  background-image: url("images/controls/button/ico_btn_totop.png");
  background-size: 50%;
  border: none;
}
.cl-button.btn-scroll:not(.cl-disabled):hover,
.cl-button.btn-scroll:focus,
.cl-button.btn-scroll.cl-focus,
.cl-button.btn-scroll:not(.cl-disabled).cl-activated,
.cl-button.btn-scroll:not(.cl-disabled):active {
  background-color: #969696;
}
.cl-button.btn-swipe {
  background-position: calc(100% - 15px) center;
  background-size: 16px 9px;
  background-color: #1491ee;
  border: none;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  text-align: left;
  padding: 0px 15px;
}
.cl-button.btn-swipe.down {
  background-image: url("images/controls/button/ico_btn_down.png");
}
.cl-button.btn-swipe.open {
  background-image: url("images/controls/button/ico_btn_open.png");
}
.cl-button.btn-swipe:not(.cl-disabled):hover,
.cl-button.btn-swipe:focus,
.cl-button.btn-swipe.cl-focus,
.cl-button.btn-swipe:not(.cl-disabled).cl-activated,
.cl-button.btn-swipe:not(.cl-disabled):active {
  background-color: #1491ee;
  color: #ffffff;
}
/************************************************
 * 투명 버튼
 ************************************************/
.cl-button.btn-transparent {
  background-color: transparent;
  border: none;
  border-radius: 0px;
}
.cl-button.btn-transparent:not(.cl-disabled):hover {
  background-color: transparent;
}
.cl-button.btn-transparent:focus,
.cl-button.btn-transparent.cl-focus {
  background-color: transparent;
}
.cl-button.btn-transparent:not(.cl-disabled).cl-activated,
.cl-button.btn-transparent:not(.cl-disabled):active {
  background-color: transparent;
}
/************************************************
 * 색상 버튼
 ************************************************/
.cl-button.btn-primary {
  background-color: #3a83db;
  border-color: #3a83db;
  color: #ffffff;
}
.cl-button.btn-primary:not(.cl-disabled):hover {
  background-color: #34659f;
  border-color: #34659f;
  color: #ffffff;
}
.cl-button.btn-primary:focus,
.cl-button.btn-primary.cl-focus {
  background-color: #34659f;
  border-color: #34659f;
  color: #ffffff;
}
.cl-button.btn-primary:not(.cl-disabled).cl-activated,
.cl-button.btn-primary:not(.cl-disabled):active {
  background-color: #34659f;
  border-color: #34659f;
  color: #ffffff;
}
.cl-button.btn-primary.cl-disabled {
  background-color: #f8f8f8;
  border-color: #cdcdd1;
  color: #999999;
}
.cl-button.btn-secondary {
  background-color: #58606b;
  border-color: #58606b;
  color: #ffffff;
}
.cl-button.btn-secondary:not(.cl-disabled):hover {
  background-color: #212d3e;
  border-color: #212d3e;
  color: #ffffff;
}
.cl-button.btn-secondary:focus,
.cl-button.btn-secondary.cl-focus {
  background-color: #212d3e;
  border-color: #212d3e;
  color: #ffffff;
}
.cl-button.btn-secondary:not(.cl-disabled).cl-activated,
.cl-button.btn-secondary:not(.cl-disabled):active {
  background-color: #212d3e;
  border-color: #212d3e;
  color: #ffffff;
}
.cl-button.btn-secondary.cl-disabled {
  background-color: #f8f8f8;
  border-color: #cdcdd1;
  color: #999999;
}
.cl-button.btn-dark {
  background-color: #4c4c4d;
  border-color: #4c4c4d;
  color: #ffffff;
}
.cl-button.btn-dark:not(.cl-disabled):hover {
  background-color: #212d3e;
  border-color: #212d3e;
  color: #ffffff;
}
.cl-button.btn-dark:focus,
.cl-button.btn-dark.cl-focus {
  background-color: #212d3e;
  border-color: #212d3e;
  color: #ffffff;
}
.cl-button.btn-dark:not(.cl-disabled).cl-activated,
.cl-button.btn-dark:not(.cl-disabled):active {
  background-color: #212d3e;
  border-color: #212d3e;
  color: #ffffff;
}
.cl-button.btn-dark.cl-disabled {
  background-color: #f8f8f8;
  border-color: #cdcdd1;
  color: #999999;
}
.cl-button.btn-blue {
  background-color: #004b91;
  border-color: #004b91;
  color: #ffffff;
}
.cl-button.btn-blue:not(.cl-disabled):hover {
  background-color: #004b91;
  border-color: #004b91;
  color: #ffffff;
}
.cl-button.btn-blue:focus,
.cl-button.btn-blue.cl-focus {
  background-color: #004b91;
  border-color: #004b91;
  color: #ffffff;
}
.cl-button.btn-blue:not(.cl-disabled).cl-activated,
.cl-button.btn-blue:not(.cl-disabled):active {
  background-color: #004b91;
  border-color: #212d3e;
  color: #ffffff;
}
.cl-button.btn-blue.cl-disabled {
  background-color: #f8f8f8;
  border-color: #cdcdd1;
  color: #999999;
}
/************************************************
 * 아웃라인 버튼
 ************************************************/
.cl-button.btn-outline-primary {
  background-color: #ffffff;
  border-color: #3a83db;
  border-radius: 9999px;
  color: #3a83db;
  font-size: 13px;
  font-weight: 500;
}
.cl-button.btn-outline-primary:not(.cl-disabled):hover {
  background-color: #3a83db;
  border-color: #3a83db;
  color: #ffffff;
}
.cl-button.btn-outline-primary:focus,
.cl-button.btn-outline-primary.cl-focus {
  background-color: #3a83db;
  border-color: #3a83db;
  color: #ffffff;
}
.cl-button.btn-outline-primary:not(.cl-disabled).cl-activated,
.cl-button.btn-outline-primary:not(.cl-disabled):active {
  background-color: #3a83db;
  border-color: #3a83db;
  color: #ffffff;
}
.cl-button.btn-outline-primary.cl-disabled {
  background-color: #f8f8f8;
  border-color: #cdcdd1;
  color: #999999;
}
.cl-button.btn-outline-light {
  background-color: #ffffff;
  border-color: #ababab;
  color: #ababab;
}
.cl-button.btn-outline-light:not(.cl-disabled):hover {
  background-color: #e4e5e7;
  border-color: #ababab;
  color: #ffffff;
}
.cl-button.btn-outline-light:focus,
.cl-button.btn-outline-light.cl-focus {
  background-color: #e4e5e7;
  border-color: #ababab;
  color: #ffffff;
}
.cl-button.btn-outline-light:not(.cl-disabled).cl-activated,
.cl-button.btn-outline-light:not(.cl-disabled):active {
  background-color: #e4e5e7;
  border-color: #ababab;
  color: #ffffff;
}
.cl-button.btn-outline-light.cl-disabled {
  background-color: #f8f8f8;
  border-color: #cdcdd1;
  color: #999999;
}
.cl-button.btn-outline-lighter {
  background-color: #ffffff;
  border-color: #c2c5c7;
  border-radius: 9999px;
  color: #555555;
  font-size: 13px;
}
.cl-button.btn-outline-lighter:not(.cl-disabled):hover {
  background-color: #f8f8f8;
  border-color: #969696;
  color: #555555;
}
.cl-button.btn-outline-lighter:focus,
.cl-button.btn-outline-lighter.cl-focus {
  background-color: #f8f8f8;
  border-color: #969696;
  color: #555555;
}
.cl-button.btn-outline-lighter:not(.cl-disabled).cl-activated,
.cl-button.btn-outline-lighter:not(.cl-disabled):active {
  background-color: #f8f8f8;
  border-color: #969696;
  color: #555555;
}
.cl-button.btn-outline-lighter.cl-disabled {
  background-color: #f8f8f8;
  border-color: #cdcdd1;
  color: #999999;
}
.cl-button.btn-outline-white {
  background-color: #ffffff;
  border-color: #e4e5e7;
  color: #000000;
}
.cl-button.btn-outline-white:not(.cl-disabled):hover {
  background-color: #ffffff;
  border-color: #58606b;
  color: #000000;
}
.cl-button.btn-outline-white:focus,
.cl-button.btn-outline-white.cl-focus {
  background-color: #ffffff;
  border-color: #58606b;
  color: #000000;
}
.cl-button.btn-outline-white:not(.cl-disabled).cl-activated,
.cl-button.btn-outline-white:not(.cl-disabled):active {
  background-color: #ffffff;
  border-color: #58606b;
  color: #000000;
}
.cl-button.btn-outline-white.cl-disabled {
  background-color: #f8f8f8;
  border-color: #cdcdd1;
  color: #999999;
}
.cl-button.btn-map {
  background: url("images/controls/button/ico_btn_location.png") calc(100% - 8px) no-repeat #fff;
  background-size: 15px;
  border: #0083e4 solid 1px;
  border-radius: 8px;
  line-height: 24px;
  padding: 0 25px 0 6px;
  font-size: 14px;
}
.cl-button.btn-map:not(.cl-disabled):hover {
  background: url("images/controls/button/ico_btn_location.png") calc(100% - 8px) no-repeat #fff;
  background-size: 15px;
  border: #0083e4 solid 1px;
}
.cl-button.btn-map:focus,
.cl-button.btn-map.cl-focus {
  background: url("images/controls/button/ico_btn_location.png") calc(100% - 8px) no-repeat #fff;
  background-size: 15px;
  border: #0083e4 solid 1px;
}
.cl-button.btn-map:not(.cl-disabled).cl-activated,
.cl-button.btn-map:not(.cl-disabled):active {
  background: url("images/controls/button/ico_btn_location.png") calc(100% - 8px) no-repeat #fff;
  background-size: 15px;
  border: #0083e4 solid 1px;
}
.cl-button.btn-map.cl-disabled {
  background-color: #f8f8f8;
  border-color: #cdcdd1;
  color: #999999;
}
.cl-button.btn-map-link {
  background: url("images/controls/button/ico_btn_link_c.png") calc(100% - 8px) no-repeat #fff;
  background-size: 15px;
  border: #0083e4 solid 1px;
  border-radius: 8px;
  line-height: 24px;
  padding: 0 25px 0 6px;
  font-size: 14px;
}
.cl-button.btn-map-link:not(.cl-disabled):hover {
  background: url("images/controls/button/ico_btn_link_c.png") calc(100% - 8px) no-repeat #fff;
  background-size: 15px;
  border: #0083e4 solid 1px;
}
.cl-button.btn-map-link:focus,
.cl-button.btn-map-link.cl-focus {
  background: url("images/controls/button/ico_btn_link_c.png") calc(100% - 8px) no-repeat #fff;
  background-size: 15px;
  border: #0083e4 solid 1px;
}
.cl-button.btn-map-link:not(.cl-disabled).cl-activated,
.cl-button.btn-map-link:not(.cl-disabled):active {
  background: url("images/controls/button/ico_btn_link_c.png") calc(100% - 8px) no-repeat #fff;
  background-size: 15px;
  border: #0083e4 solid 1px;
}
.cl-button.btn-map-link.cl-disabled {
  background-color: #f8f8f8;
  border-color: #cdcdd1;
  color: #999999;
}
.cl-button.btn-map-zoomin {
  background-image: url("images/controls/button/ico_btn_mapZoomIn.png");
  background-size: 16px !important;
  border: #cccccc solid 1px;
  border-radius: 0;
  background-position: 50% 50%;
  background-size: auto;
}
.cl-button.btn-map-zoomin:not(.cl-disabled):hover {
  background-image: url("images/controls/button/ico_btn_mapZoomIn.png");
  background-size: 16px !important;
  border: #cccccc solid 1px;
  border-radius: 0;
  background-position: 50% 50%;
  background-size: auto;
}
.cl-button.btn-map-zoomin:focus,
.cl-button.btn-map-zoomin.cl-focus {
  background-image: url("images/controls/button/ico_btn_mapZoomIn.png");
  background-size: 16px !important;
  border: #cccccc solid 1px;
  border-radius: 0;
  background-position: 50% 50%;
  background-size: auto;
}
.cl-button.btn-map-zoomin:not(.cl-disabled).cl-activated,
.cl-button.btn-map-zoomin:not(.cl-disabled):active {
  background-image: url("images/controls/button/ico_btn_mapZoomIn.png");
  background-size: 16px !important;
  border: #cccccc solid 1px;
  border-radius: 0;
  background-position: 50% 50%;
  background-size: auto;
}
.cl-button.btn-map-zoomin.cl-disabled {
  background-color: #f8f8f8;
  border-color: #cdcdd1;
  color: #999999;
}
.cl-button.btn-map-zoomout {
  background-image: url("images/controls/button/ico_btn_mapZoomOut.png");
  background-size: 16px !important;
  border: #cccccc solid 1px;
  border-radius: 0;
  background-position: 50% 50%;
  background-size: auto;
}
.cl-button.btn-map-zoomout:not(.cl-disabled):hover {
  background-image: url("images/controls/button/ico_btn_mapZoomOut.png");
  background-size: 16px !important;
  border: #cccccc solid 1px;
  border-radius: 0;
  background-position: 50% 50%;
  background-size: auto;
}
.cl-button.btn-map-zoomout:focus,
.cl-button.btn-map-zoomout.cl-focus {
  background-image: url("images/controls/button/ico_btn_mapZoomOut.png");
  background-size: 16px !important;
  border: #cccccc solid 1px;
  border-radius: 0;
  background-position: 50% 50%;
  background-size: auto;
}
.cl-button.btn-map-zoomout:not(.cl-disabled).cl-activated,
.cl-button.btn-map-zoomout:not(.cl-disabled):active {
  background-image: url("images/controls/button/ico_btn_mapZoomOut.png");
  background-size: 16px !important;
  border: #cccccc solid 1px;
  border-radius: 0;
  background-position: 50% 50%;
  background-size: auto;
}
.cl-button.btn-map-zoomout.cl-disabled {
  background-color: #f8f8f8;
  border-color: #cdcdd1;
  color: #999999;
}
/************************************************
 * 아이콘 버튼
 ************************************************/
.cl-button.btn-i.cl-icon-align-left .cl-icon {
  margin-right: 5px;
}
.cl-button.btn-i.cl-icon-align-right .cl-icon {
  margin-left: 5px;
}
.cl-button.btn-i.cl-icon-align-top .cl-icon {
  margin-bottom: 5px;
}
.cl-button.btn-i.cl-icon-align-bottom .cl-icon {
  margin-top: 5px;
}
.cl-button.btn-i-reset {
  background-image: url("images/controls/button/ico_btn_reset.png");
}
.cl-button.btn-i-reset2 {
  background-image: url("images/controls/button/ico_btn_reset.png");
  background-position: right;
}
.cl-button.btn-i-question {
  background-image: url("images/controls/button/ico_btn_q_01.png") !important;
}
.cl-button.btn-i-question:not(.cl-disabled):hover,
.cl-button.btn-i-question:focus,
.cl-button.btn-i-question.cl-focus,
.cl-button.btn-i-question:not(.cl-disabled).cl-activated,
.cl-button.btn-i-question:not(.cl-disabled):active {
  background-image: url("images/controls/button/ico_btn_q_on.png");
}
.cl-button.btn-i-help .cl-icon {
  background-image: url("images/controls/button/ico_btn_help.png") !important;
  margin-right: 3px !important;
}
.cl-button.btn-i-link .cl-icon {
  background-image: url("images/controls/button/ico_btn_link.png") !important;
  width: 17px;
  height: 11px;
}
.cl-button.btn-i-download .cl-icon {
  background-image: url("images/controls/button/ico_btn_download.png") !important;
  width: 12px;
  height: 13px;
}
.cl-button.btn-i-more .cl-icon {
  background-image: url("images/controls/button/ico_btn_more.png") !important;
  width: 17px;
  height: 11px;
}
.cl-button.btn-i-close .cl-icon {
  background-image: url("images/controls/button/ico_btn_close.png") !important;
  width: 11px;
  height: 11px;
}
.btn_file {
  border: #c8c8c8 solid 1px;
  border-radius: 3px;
  padding: 0 26px 0 11px;
  line-height: 28px;
  background-color: #fff;
  background-image: url("images/controls/button/down.png");
  background-position: calc(100% - 11px) center;
  font-size: 15px;
}
.btn_file:hover {
  border-color: #969696;
  background-color: #f8f8f8;
}
/************************************************
 * 일반 카드 
 ************************************************/
.cl-container.card {
  background-color: #ffffff;
  border: 1px solid #dbdcde;
}
.cl-container.card .cl-output.bar {
  background-color: #e6e6e8;
}
.cl-container.card .cl-formlayout-vertical-separator.bar {
  background-color: transparent;
  background-image: linear-gradient(#e4e5e7, #e4e5e7);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1px 80px;
}
.cl-container.card .cl-container.icon-bg {
  background-color: #f6f6f6;
}
.cl-container.card.card-shady {
  box-shadow: 5px 5px 0px 0px #f3f3f3;
}
.cl-container.card.card-shady .cl-output.dot-txt {
  color: #666666;
  font-size: 14px;
  font-weight: 400;
}
.cl-container.card.card-shady .cl-output.dot-txt .cl-text:before {
  content: "";
  background-color: #707070;
}
.cl-container.card .cl-container.card-footer {
  background-color: #f7f7f7;
}
.cl-image.imageShady {
  box-shadow: 5px 8px 11px 0px #e1e1e1;
}
.cl-container.card-pill {
  background-color: #ecf3f7;
  border: none;
  border-radius: 20px;
}
/************************************************
 * 지시문 (안내사항 등)
 ************************************************/
.cl-container.info-box {
  background-color: #ffffff;
  border: 2px solid #dae3e8;
  border-radius: 10px;
}
.cl-container.info-box:before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  width: 162px;
  height: 50px;
  border: 2px solid #173665;
  border-width: 2px 0px 0px 2px;
  border-radius: 10px 0px 0px 0px;
}
.cl-container.info-box .cl-output {
  color: #555555;
  font-size: 16px;
  font-weight: 400;
}
.cl-container.info-box .cl-output .cl-text {
  line-height: 22px;
}
.cl-container.info-box .cl-output.info-title {
  color: #000000;
  font-size: 22px;
  font-family: "NanumBarunGothic", "Noto Sans KR", "Spoqa Han Sans Neo", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", "돋움", "Dotum", sans-serif;
  font-weight: 700;
  letter-spacing: -0.07em;
}
.cl-container.info-box .cl-output.info-title .cl-text {
  line-height: 1.2;
}
.cl-container.info-box .cl-output.info-label {
  font-weight: 400;
}
.cl-container.info-box .cl-output.info-value {
  color: #000000;
  font-size: 16px;
  font-weight: 700;
}
.cl-container.info-box .cl-output.info-value.underline {
  color: #1D91E7;
  text-decoration: underline;
}
.cl-container.info-box .cl-output.info-value.underline:hover {
  cursor: pointer;
}
/************************************************
 * 판넬
 ************************************************/
.cl-container.panel-box-shadow {
  box-shadow: 4px 0px 6px 0px rgba(0, 0, 0, 0.12);
}
.cl-container.panel2 {
  background-image: linear-gradient(90deg, #f5f5f5, #f1f1f1);
  background-repeat: no-repeat;
  background-position: 100% bottom;
  background-size: 100% 8px;
  background-color: #ffffff;
  border-bottom: 1px solid #d8d8d8;
}
.cl-container.panel {
  background-image: linear-gradient(90deg, #f5f5f5, #f1f1f1);
  background-repeat: no-repeat;
  background-position: 100% bottom;
  background-size: 100% 8px;
  background-color: #ffffff;
  border-bottom: 1px solid #d8d8d8;
  box-shadow: 4px 0px 6px 0px rgba(0, 0, 0, 0.12);
}
.cl-container.panel .border-bottom {
  border-color: #ececec !important;
}
.cl-container.panel .border-bottom2 {
  border-color: #1491ee !important;
  border-bottom: 2px solid;
}
.cl-container.panel .cl-container.filter .cl-button {
  background-color: #f8f8f8;
  border-color: #f8f8f8;
  color: #000000;
  font-size: 13px;
  letter-spacing: -0.065em;
}
.cl-container.panel .cl-container.filter .cl-button .cl-icon {
  width: 58px;
  height: 36px;
  background-size: auto;
  background-position: center top;
  margin-bottom: 6px;
}
.cl-container.panel .cl-container.filter .cl-button.selected,
.cl-container.panel .cl-container.filter .cl-button:not(.cl-disabled):hover,
.cl-container.panel .cl-container.filter .cl-button:focus,
.cl-container.panel .cl-container.filter .cl-button.cl-focus,
.cl-container.panel .cl-container.filter .cl-button:not(.cl-disabled).cl-activated,
.cl-container.panel .cl-container.filter .cl-button:not(.cl-disabled):active {
  background-color: #e6effe;
}
.cl-container.panel .cl-container.filter .cl-button.cl-disabled {
  background-color: #f8f8f8;
  border-color: #f8f8f8;
  color: #828282;
}
.cl-container.panel .cl-container.filter .cl-button.f-01 .cl-icon {
  background-image: url("images/controls/button/ico_item_01.png") !important;
}
.cl-container.panel .cl-container.filter .cl-button.f-01.cl-disabled .cl-icon {
  background-image: url("images/controls/button/ico_item_01_off.png") !important;
}
.cl-container.panel .cl-container.filter .cl-button.f-02 .cl-icon {
  background-image: url("images/controls/button/ico_item_02.png") !important;
}
.cl-container.panel .cl-container.filter .cl-button.f-02.cl-disabled .cl-icon {
  background-image: url("images/controls/button/ico_item_02_off.png") !important;
}
.cl-container.panel .cl-container.filter .cl-button.f-03 .cl-icon {
  background-image: url("images/controls/button/ico_item_03.png") !important;
}
.cl-container.panel .cl-container.filter .cl-button.f-03.cl-disabled .cl-icon {
  background-image: url("images/controls/button/ico_item_03_off.png") !important;
}
.cl-container.panel .cl-container.filter .cl-button.f-04 .cl-icon {
  background-image: url("images/controls/button/ico_item_04.png") !important;
}
.cl-container.panel .cl-container.filter .cl-button.f-04.cl-disabled .cl-icon {
  background-image: url("images/controls/button/ico_item_04_off.png") !important;
}
.cl-container.panel .cl-container.filter .cl-button.f-05 .cl-icon {
  background-image: url("images/controls/button/ico_item_05.png") !important;
}
.cl-container.panel .cl-container.filter .cl-button.f-05.cl-disabled .cl-icon {
  background-image: url("images/controls/button/ico_item_05_off.png") !important;
}
.cl-container.panel .cl-container.filter .cl-button.f-06 .cl-icon {
  background-image: url("images/controls/button/ico_item_06.png") !important;
}
.cl-container.panel .cl-container.filter .cl-button.f-06.cl-disabled .cl-icon {
  background-image: url("images/controls/button/ico_item_06_off.png") !important;
}
.cl-container.panel .cl-container.filter .cl-button.f-07 .cl-icon {
  background-image: url("images/controls/button/ico_item_07.png") !important;
}
.cl-container.panel .cl-container.filter .cl-button.f-07.cl-disabled .cl-icon {
  background-image: url("images/controls/button/ico_item_07_off.png") !important;
}
.cl-container.panel .cl-container.filter .cl-button.f-08 .cl-icon {
  background-image: url("images/controls/button/ico_item_08.png") !important;
}
.cl-container.panel .cl-container.filter .cl-button.f-08.cl-disabled .cl-icon {
  background-image: url("images/controls/button/ico_item_08_off.png") !important;
}
.cl-container.panel .cl-container.filter .cl-button.f-09 .cl-icon {
  background-image: url("images/controls/button/ico_item_09.png") !important;
}
.cl-container.panel .cl-container.filter .cl-button.f-09.cl-disabled .cl-icon {
  background-image: url("images/controls/button/ico_item_09_off.png") !important;
}
.cl-container.panel .cl-container.filter .cl-button.f-10 .cl-icon {
  background-image: url("images/controls/button/ico_item_10.png") !important;
}
.cl-container.panel .cl-container.filter .cl-button.f-10.cl-disabled .cl-icon {
  background-image: url("images/controls/button/ico_item_10_off.png") !important;
}
.cl-container.panel .cl-container.filter .cl-button.f-11 .cl-icon {
  background-image: url("images/controls/button/ico_item_11.png") !important;
}
.cl-container.panel .cl-container.filter .cl-button.f-11.cl-disabled .cl-icon {
  background-image: url("images/controls/button/ico_item_11_off.png") !important;
}
.cl-container.panel .cl-container.filter .cl-button.f-12 .cl-icon {
  background-image: url("images/controls/button/ico_item_12.png") !important;
}
.cl-container.panel .cl-container.filter .cl-button.f-12.cl-disabled .cl-icon {
  background-image: url("images/controls/button/ico_item_12_off.png") !important;
}
.cl-container.panel .cl-container.filter .cl-button.f-13 .cl-icon {
  background-image: url("images/controls/button/ico_item_13.png") !important;
}
.cl-container.panel .cl-container.filter .cl-button.f-13.cl-disabled .cl-icon {
  background-image: url("images/controls/button/ico_item_13_off.png") !important;
}
.cl-container.panel .cl-container.filter .cl-button.f-14 .cl-icon {
  background-image: url("images/controls/button/ico_item_14.png") !important;
}
.cl-container.panel .cl-container.filter .cl-button.f-14.cl-disabled .cl-icon {
  background-image: url("images/controls/button/ico_item_14_off.png") !important;
}
.cl-container.panel .cl-container.filter .cl-button.f-15 .cl-icon {
  background-image: url("images/controls/button/ico_item_15.png") !important;
}
.cl-container.panel .cl-container.filter .cl-button.f-15.cl-disabled .cl-icon {
  background-image: url("images/controls/button/ico_item_15_off.png") !important;
}
.cl-container.panel .cl-container.filter .cl-button.f-16 .cl-icon {
  background-image: url("images/controls/button/ico_item_16.png") !important;
}
.cl-container.panel .cl-container.filter .cl-button.f-16.cl-disabled .cl-icon {
  background-image: url("images/controls/button/ico_item_16_off.png") !important;
}
.cl-container.panel .cl-container.filter .cl-button.f-17 .cl-icon {
  background-image: url("images/controls/button/ico_item_17.png") !important;
}
.cl-container.panel .cl-container.filter .cl-button.f-17.cl-disabled .cl-icon {
  background-image: url("images/controls/button/ico_item_17_off.png") !important;
}
.cl-container.panel .cl-container.filter .cl-button.f-18 .cl-icon {
  background-image: url("images/controls/button/ico_item_18.png") !important;
}
.cl-container.panel .cl-container.filter .cl-button.f-18.cl-disabled .cl-icon {
  background-image: url("images/controls/button/ico_item_18_off.png") !important;
}
.cl-container.panel .cl-container.filter .cl-button.f-19 .cl-icon {
  background-image: url("images/controls/button/ico_item_19.png") !important;
}
.cl-container.panel .cl-container.filter .cl-button.f-19.cl-disabled .cl-icon {
  background-image: url("images/controls/button/ico_item_19_off.png") !important;
}
.cl-container.panel .cl-container.filter .cl-button.f-20 .cl-icon {
  background-image: url("images/controls/button/ico_item_20.png") !important;
}
.cl-container.panel .cl-container.filter .cl-button.f-20.cl-disabled .cl-icon {
  background-image: url("images/controls/button/ico_item_20_off.png") !important;
}
.cl-container.panel .cl-button.btn-gray {
  background-color: #58606b;
  border-color: #2c3643;
  box-shadow: 4px 4px 8px 0px rgba(0, 0, 0, 0.12);
  color: #ffffff;
  letter-spacing: -0.06em;
}
.cl-container.panel .cl-button.btn-gray.cl-icon-align-right .cl-text {
  padding-right: 12px !important;
}
.cl-container.panel .cl-button.btn-gray.cl-icon-align-bottom .cl-text {
  padding-bottom: 10px !important;
}
.cl-container.panel .cl-button.btn-gray .cl-text {
  padding-bottom: 2px !important;
  white-space: normal;
  word-break: keep-all;
}
.cl-container.panel .cl-button.btn-gray .cl-text:before {
  content: "";
  position: relative;
  display: inline-block;
  top: 2px;
  width: 19px;
  height: 15px;
  margin-right: 8px;
  background-image: url("images/controls/button/ico_btn_folder.png");
  background-repeat: no-repeat;
}
.cl-container.panel .cl-button.btn-gray:not(.cl-disabled):hover,
.cl-container.panel .cl-button.btn-gray:focus,
.cl-container.panel .cl-button.btn-gray.cl-focus,
.cl-container.panel .cl-button.btn-gray:not(.cl-disabled).cl-activated,
.cl-container.panel .cl-button.btn-gray:not(.cl-disabled):active {
  background-color: #ffffff;
  border-color: #5991fd;
  color: #3167d0;
}
.cl-container.panel .cl-button.btn-gray:not(.cl-disabled):hover .cl-text:before,
.cl-container.panel .cl-button.btn-gray:focus .cl-text:before,
.cl-container.panel .cl-button.btn-gray.cl-focus .cl-text:before,
.cl-container.panel .cl-button.btn-gray:not(.cl-disabled).cl-activated .cl-text:before,
.cl-container.panel .cl-button.btn-gray:not(.cl-disabled):active .cl-text:before {
  content: "";
  background-image: url("images/controls/button/ico_btn_folder_on.png");
}
.cl-container.panel .cl-button.btn-gray:not(.cl-disabled):hover .cl-icon,
.cl-container.panel .cl-button.btn-gray:focus .cl-icon,
.cl-container.panel .cl-button.btn-gray.cl-focus .cl-icon,
.cl-container.panel .cl-button.btn-gray:not(.cl-disabled).cl-activated .cl-icon,
.cl-container.panel .cl-button.btn-gray:not(.cl-disabled):active .cl-icon {
  background-image: url("images/controls/button/ico_btn_link_b.png") !important;
}
.cl-container.panel .cl-button.btn-gray.cl-disabled {
  background-color: #f8f8f8;
  border-color: #f8f8f8;
  color: #828282;
}
.cl-container.panel .cl-button.btn-gray.cl-disabled .cl-text:before {
  content: "";
  background-image: url("images/controls/button/ico_btn_folder_off.png");
}
.cl-container.panel .cl-button.btn-gray.cl-disabled .cl-icon {
  background-image: url("images/controls/button/ico_btn_link_off.png") !important;
}
@media (min-width : 1024px) {
  .cl-container.panel {
    background-image: linear-gradient(90deg, #f5f5f5, #f1f1f1);
    background-repeat: no-repeat;
    background-position: 100% bottom;
    background-size: 100% 0px;
    background-color: #ffffff;
    border-bottom: 1px solid #d8d8d8;
    box-shadow: 4px 0px 6px 0px rgba(0, 0, 0, 0.12);
  }
}
@media (min-width: 1024px) and (max-width: 1280px) {
  .cl-container.card-pill .h6 .cl-text {
    line-height: 1.5;
  }
  .cl-container.panel .cl-button.btn-gray .cl-text {
    padding-top: 19px !important;
  }
  .cl-container.panel .cl-button.btn-gray .cl-text:before {
    content: "";
    position: absolute;
    top: calc(50% - 38px);
    left: calc(50% - 10px);
    margin: 0px;
  }
}
@media (max-width: 1024px) {
  .cl-container.card-pill .h6 .cl-text {
    line-height: 1.5;
  }
}
/************************************************
 * 공통 스타일 시트
 ************************************************/
/************************************************
 * 팝업화면 주소, 전화번호 폼
 ************************************************/
.cl-container.form-info .cl-output.address-label {
  background-image: url("images/controls/output/ico_info_address.png");
  color: #000000;
  font-size: 16px;
  font-weight: 400;
  padding-left: 20px;
  line-height: 1;
}
.cl-container.form-info .cl-output.tel-label {
  background-image: url("images/controls/output/ico_info_tel.png");
  color: #000000;
  font-size: 16px;
  font-weight: 400;
  padding-left: 20px;
  line-height: 1;
}
/************************************************
 * 기본 폼
 ************************************************/
.cl-container.form-basic {
  background-color: #ffffff;
  border: 1px solid #cdcdd1;
  border-top-color: #787878;
  border-width: 1px 0px;
}
.cl-container.form-basic .cl-output.label {
  font-weight: 500;
  font-size: 18px;
  text-align: center;
}
.cl-container.form-basic .cl-output.label.require .cl-text:after {
  content: "*";
  position: absolute;
  display: inline-block;
  color: #e12828;
  margin-left: 2px;
  font-size: 15px;
  height: auto;
  line-height: 1;
}
.cl-container .cl-layout-wrap.form-list:not(.cl-first-row) > .cl-embeddedapp {
  border-top: 1px solid #dbdcde;
}
/* 그리드 */
.cl-grid.grd-white {
  font: 400 14px "NanumBarunGothic", "Noto Sans KR", "Spoqa Han Sans Neo", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", "돋움", "Dotum", sans-serif;
  background-color: #ffffff;
  border: 1px solid #e7e7e7;
  border-top-color: #e7e7e7;
  border-width: 1px 0px;
  border-radius: 0px;
  color: #000000;
  min-height: 85px;
  /* 그리드 헤더 */
  /* 그리드 푸터 */
  /* 그리드 헤더 외곽 영역 */
  /* 그리드 디테일 외곽 영역 */
  /* 그리드 푸터 외곽 영역 */
  /* 왼쪽 틀고정된 그리드의 스타일 */
  /* 오른쪽 틀고정된 그리드의 스타일 */
  /* 스플릿 상단 그리드 래퍼 */
  /* 스플릿 하단 그리드 래퍼 */
  /* noDataMessage 보여질 때 해당 텍스트영역 스타일 */
}
.cl-grid.grd-white.cl-disabled {
  background-color: #f8f8f8;
  border-color: #cdcdd1;
  color: #999999;
}
.cl-grid.grd-white .cl-grid-header {
  background-image: none;
  background-color: #f7f8fa;
  /* 그리드 헤더 셀 */
  /* 
		@deprecated (header의 sortColumnName속성)
		그리드 헤더 셀 소트 인디케이터 
		*/
  /* 그리드 헤더 셀 필터 인디케이터 */
  /* 그리드 헤더 셀이 소트가능 한 셀일 때 스타일 */
}
.cl-grid.grd-white .cl-grid-header .cl-grid-cell {
  color: #000000;
  font-weight: 500;
  font-size: 16px;
  /* 그리드 헤더 셀에 임베딩 된 컨트롤 */
}
.cl-grid.grd-white .cl-grid-header .cl-sort {
  /* 그리드 헤더 셀 소트 인디케이터 - 소트 가능 */
  /* 그리드 헤더 셀 소트 인디케이터 - 오름차순 정렬됨 */
  /* 그리드 헤더 셀 소트 인디케이터 - 내림차순 정렬됨 */
}
.cl-grid.grd-white .cl-grid-header .cl-filter {
  /* 그리드 헤더 셀 필터 인디케이터에 마우스가 호버되었을 때 스타일 */
  /* 그리드 헤더 셀 필터 인디케이터 - 필터되었을 때 스타일 */
}
.cl-grid.grd-white .cl-grid-header .cl-sortable-cell {
  /* 그리드 헤더 셀 소트 인디케이터 */
  /* 그리드 헤더 셀 소트 인디케이터 - 오름차순 정렬됨  */
  /* 그리드 헤더 셀 소트 인디케이터 - 내림차순 정렬됨  */
}
.cl-grid.grd-white .cl-grid-header .cl-sortable-cell .cl-sort {
  /* 그리드 헤더 셀 소트 인디케이터 - 소트 가능한 아이콘 */
  /* 그리드 헤더 셀 소트 인디케이터 - 소트 우선 순위 영역*/
}
.cl-grid.grd-white .cl-grid-header .cl-sortable-cell.cl-sort-asc {
  /* 그리드 헤더 셀 소트 인디케이터 - 오름차순 아이콘 */
}
.cl-grid.grd-white .cl-grid-header .cl-sortable-cell.cl-sort-desc {
  /* 그리드 헤더 셀 소트 인디케이터 - 내림차순 아이콘 */
}
.cl-grid.grd-white .cl-grid-footer {
  border-top: 1px solid #e7e7e7;
}
.cl-grid.grd-white .cl-grid-header {
  /* 디테일에 스크롤이 생길시 우측에 생기는 빈 영역 */
}
.cl-grid.grd-white .cl-grid-header .cl-blank {
  background-color: #f1f1f1;
}
.cl-grid.grd-white .cl-grid-detail {
  /* 디테일에 스크롤이 생길시 우측하단에 생기는 빈 영역 */
}
.cl-grid.grd-white .cl-grid-detail .cl-blank {
  background-color: #f1f1f1;
}
.cl-grid.grd-white .cl-grid-footer {
  /* 디테일에 스크롤이 생길시 우측에 생기는 빈 영역 */
}
.cl-grid.grd-white .cl-grid-footer .cl-blank {
  background-color: #f1f1f1;
}
.cl-grid.grd-white.cl-leftsplit {
  /* 스플릿 시 좌측 그리드 래퍼 */
}
.cl-grid.grd-white.cl-rightsplit {
  /* 스플릿 시 우측 그리드 래퍼 */
}
.cl-grid.grd-white .cl-grid-topsplit {
  border-bottom: double 3px #333;
}
.cl-grid.grd-white .cl-grid-bottomsplit {
  border-top: double 3px #333;
}
.cl-grid.grd-white .cl-nodatamsg {
  background-image: url("images/controls/grid/ico_nodata.png");
  background-repeat: no-repeat;
  background-position: center calc(50% - 27px);
  color: #666666;
  font-weight: 400;
  font-size: 16px;
  padding-top: 26px;
  vertical-align: middle;
}
/* 그리드 필터 사용시 필터 다이얼로그가 펼쳐지는 영역 스타일*/
.cl-gridfilter {
  /* 필터 다이얼로그 뒤에 비활성화 영역을 표현하기 위해 덮히는 막 */
  /* 필터 다이얼로그 */
}
.cl-gridfilter .cl-filterdlg {
  /* 필터 다이얼로그 - 타이틀 영역 */
  /* 필터 다이얼로그 - 필터 찾기 영역 */
  /* 필터 다이얼로그 - 필터 아이템 리스트 영역 */
  /* 필터 다이얼로그 - 하단에 버튼 영역 */
}
.cl-gridfilter .cl-filterdlg .cl-filterdlg-header {
  /* 필터 다이얼로그 - 타이틀 영역의 글자 스타일 */
  /* 필터 다이얼로그 - 타이틀 영역의 닫기 버튼 스타일 */
}
.cl-gridfilter .cl-filterdlg .cl-filterdlg-itemlist {
  /* 필터 다이얼로그 - 필터 아이템 리스트 영역의 아이템 스타일 */
}
.cl-gridfilter .cl-filterdlg .cl-filterdlg-itemlist .cl-filterdlg-item {
  /* 필터 다이얼로그 - 아이템 체크박스 스타일 */
  /* 필터 다이얼로그 - 아이템 체크박스가 체크되었을 때의 스타일 */
  /* 필터 다이얼로그 - 아이템 글자 스타일 */
}
.cl-gridfilter .cl-filterdlg .cl-filterdlg-buttons {
  /* 필터 다이얼로그 - 하단에 버튼 영역의 버튼 스타일 */
}
.cl-gridfilter .cl-filterdlg .cl-filterdlg-buttons .cl-button {
  /* 필터 다이얼로그 - 버튼 영역의 확인 버튼 스타일 */
  /* 필터 다이얼로그 - 버튼 영역의 취소 버튼 스타일 */
}
/* 행 스타일 */
.cl-grid-row {
  /* 보기 모드의 로우 */
  /* 홀수 로우 */
  /* 짝수 로우 */
  /* 추가된 로우 */
  /* 수정된 로우 */
  /* 삭제된 로우 */
  /* 추가 후 삭제된 로우*/
  /* 선택된 로우 - 보기 모드 */
  /* 편집중인 로우 */
  /* 체크된 로우 */
  /* 행 그룹시 그룹의 헤더 */
  /* 행 그룹시 그룹의 푸터 */
}
.cl-grid-row.cl-inserted {
  background-color: rgba(16, 112, 255, 0.065);
  color: #000000;
}
.cl-grid-row.cl-inserted .cl-default-cell,
.cl-grid-row.cl-inserted .cl-inputbox,
.cl-grid-row.cl-inserted .cl-output,
.cl-grid-row.cl-inserted .cl-maskeditor,
.cl-grid-row.cl-inserted .cl-numbereditor,
.cl-grid-row.cl-inserted .cl-dateinput,
.cl-grid-row.cl-inserted .cl-button,
.cl-grid-row.cl-inserted .cl-textarea,
.cl-grid-row.cl-inserted .cl-combobox,
.cl-grid-row.cl-inserted .cl-treecell,
.cl-grid-row.cl-inserted .cl-fileinput,
.cl-grid-row.cl-inserted .cl-searchinput {
  font-weight: 400;
}
.cl-grid-row.cl-modified {
  background-color: rgba(21, 155, 52, 0.12);
  color: #000000;
}
.cl-grid-row.cl-modified .cl-default-cell,
.cl-grid-row.cl-modified .cl-inputbox,
.cl-grid-row.cl-modified .cl-output,
.cl-grid-row.cl-modified .cl-maskeditor,
.cl-grid-row.cl-modified .cl-numbereditor,
.cl-grid-row.cl-modified .cl-dateinput,
.cl-grid-row.cl-modified .cl-button,
.cl-grid-row.cl-modified .cl-textarea,
.cl-grid-row.cl-modified .cl-combobox,
.cl-grid-row.cl-modified .cl-treecell,
.cl-grid-row.cl-modified .cl-fileinput,
.cl-grid-row.cl-modified .cl-searchinput {
  font-weight: 400;
}
.cl-grid-row.cl-deleted {
  background-color: rgba(238, 39, 40, 0.06);
  color: #000000;
}
.cl-grid-row.cl-deleted .cl-default-cell,
.cl-grid-row.cl-deleted .cl-inputbox,
.cl-grid-row.cl-deleted .cl-output,
.cl-grid-row.cl-deleted .cl-maskeditor,
.cl-grid-row.cl-deleted .cl-numbereditor,
.cl-grid-row.cl-deleted .cl-dateinput,
.cl-grid-row.cl-deleted .cl-button,
.cl-grid-row.cl-deleted .cl-textarea,
.cl-grid-row.cl-deleted .cl-combobox,
.cl-grid-row.cl-deleted .cl-treecell,
.cl-grid-row.cl-deleted .cl-fileinput,
.cl-grid-row.cl-deleted .cl-searchinput {
  color: #000000;
  font-style: normal;
}
.cl-grid-row.cl-nullified {
  background-color: rgba(238, 39, 40, 0.06);
  color: #000000;
}
.cl-grid-row.cl-nullified .cl-default-cell,
.cl-grid-row.cl-nullified .cl-inputbox,
.cl-grid-row.cl-nullified .cl-output,
.cl-grid-row.cl-nullified .cl-maskeditor,
.cl-grid-row.cl-nullified .cl-numbereditor,
.cl-grid-row.cl-nullified .cl-dateinput,
.cl-grid-row.cl-nullified .cl-button,
.cl-grid-row.cl-nullified .cl-textarea,
.cl-grid-row.cl-nullified .cl-combobox,
.cl-grid-row.cl-nullified .cl-treecell,
.cl-grid-row.cl-nullified .cl-fileinput,
.cl-grid-row.cl-nullified .cl-searchinput {
  color: #000000;
  font-style: normal;
}
.cl-grid-row.cl-selected {
  background-color: rgba(254, 207, 38, 0.14);
  color: #000000;
  /* 포커스 셀 */
}
.cl-grid-row.cl-editing {
  background-color: rgba(254, 207, 38, 0.14);
  color: #000000;
}
/* 모든 셀 스타일 */
.cl-grid-cell {
  border-right: 1px solid #e7e7e7;
  border-bottom: 1px solid #e7e7e7;
  /* columnType=checkbox, columnType=rowindex와 같이 그리드에서 기본 제공하는 컬럼 */
  /* 셀에 포함된 컨트롤 */
  /* 그룹 펼침/접힘 버튼 */
}
.cl-grid-cell:last-child {
  border-right: none;
}
.cl-grid-cell .cl-builtin {
  /* columnType=checkbox */
  /* columnType=rowindex */
}
.cl-grid-cell .cl-builtin.cl-checkbox .cl-checkbox-icon {
  margin: 0px;
}
.cl-grid-cell .cl-control {
  font-size: 16px;
}
.cl-grid-cell .cl-control.cl-output .cl-text {
  padding: 0px 10px;
  line-height: 1.2em;
}
.cl-grid-cell .cl-expander {
  /* 그룹 접혀짐 버튼 */
  /* 그룹 펼쳐짐 버튼 */
}
/* Grid 기본 셀 스타일 */
/* btn reset 스타일  */
.btn_reset:hover {
  border-color: #0958aa;
  background-color: #0958aa;
  color: #fff;
  background-image: url("custom/images/controls/button/reset_on.png");
}
/* btn reset 스타일  */
.btn_select {
  border: #3a83db solid 1px;
  border-radius: 12.5px;
  padding: 0 14px;
  line-height: 23px;
  color: #3a83db;
  font-weight: 500;
  font-size: 13px;
}
.cl-vscrollbar {
  background-color: transparent;
  width: 5px;
}
.cl-vscrollbar .cl-arrow-up,
.cl-vscrollbar .cl-arrow-down {
  background-image: none;
  width: 0px;
  height: 0px;
}
.cl-vscrollbar .cl-track {
  top: 0px;
  bottom: 0px;
  width: 5px;
  right: 0px;
}
.cl-vscrollbar .cl-track .cl-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}
.cl-hscrollbar {
  background-color: transparent;
  height: 5px;
}
.cl-hscrollbar .cl-arrow-left,
.cl-hscrollbar .cl-arrow-right {
  background-image: none;
  width: 0px;
  height: 0px;
}
.cl-hscrollbar .cl-track {
  left: 0px;
  right: 0px;
  height: 5px;
}
.cl-hscrollbar .cl-track .cl-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}
/************************************************
 * 토글 버튼
 ************************************************/
.cl-checkbox.panel-toggle {
  background-color: #ffffff;
}
.cl-checkbox.panel-toggle .cl-checkbox-field {
  width: 100%;
  height: 100%;
}
.cl-checkbox.panel-toggle .cl-checkbox-icon {
  background-image: url("images/controls/checkbox/ico_lnb_open.png");
  width: 100%;
  height: 100%;
  margin: 0px;
}
.cl-checkbox.panel-toggle.cl-checked .cl-checkbox-icon {
  background-image: url("images/controls/checkbox/ico_lnb_close.png");
}
.cl-checkbox.panel-toggle.shady {
  box-shadow: 2px 0px 4px 0px rgba(0, 0, 0, 0.12);
}
.cl-checkbox.map-toggle {
  background-color: #ffffff;
  border-radius: 100px 0px 0px 100px;
  border: 1px solid #dbdcde;
}
.cl-checkbox.map-toggle .cl-checkbox-field {
  width: 100%;
  height: 100%;
}
.cl-checkbox.map-toggle .cl-checkbox-icon {
  background-image: url("images/controls/button/ico_btn_next.png");
  width: 100%;
  height: 100%;
  margin: 0px;
  margin-left: 2px;
  outline: none;
}
.cl-checkbox.map-toggle.cl-checked .cl-checkbox-icon {
  background-image: url("images/controls/button/ico_btn_prev.png");
  outline: none;
}
.cl-checkbox.map-toggle.shady {
  box-shadow: 2px 0px 4px 0px rgba(0, 0, 0, 0.12);
}
/************************************************
 * 스위치 버튼
 ************************************************/
.cl-radiobutton.switch {
  background-color: #eff5f8;
  border-radius: 4px;
  box-shadow: inset 0px 0px 0px 1px #e2e9ed;
  text-align: center;
}
.cl-radiobutton.switch .cl-radiobutton-item {
  border-radius: 4px;
  color: #787d86;
  font-weight: 700;
  font-size: 15px;
  padding-bottom: 2px;
}
.cl-radiobutton.switch .cl-radiobutton-item .cl-radiobutton-field {
  width: 100%;
  height: 100%;
}
.cl-radiobutton.switch .cl-radiobutton-item .cl-radiobutton-field .cl-text:focus {
  outline: none;
}
.cl-radiobutton.switch .cl-radiobutton-item.cl-selected {
  background-color: #3a83db;
  color: #ffffff;
}
/************************************************
 * 정렬 콤보
 ************************************************/
.cl-combobox.sortable .cl-combobox-button {
  background-image: url("images/controls/combobox/ico_btn_sort.png");
  background-size: auto;
  width: 28px;
}
/************************************************
 * 중복 선택 버튼
 ************************************************/
.cl-checkboxgroup.check-button .cl-checkbox {
  height: 35px !important;
  border-radius: 5px;
  background-color: #f8f8f8;
  text-align: center !important;
}
.cl-checkboxgroup.check-button .cl-checkbox.cl-checked {
  background-color: #e6effe;
}
.cl-checkboxgroup.check-button .cl-checkbox .cl-checkbox-field {
  width: 100%;
  height: 100%;
}
.cl-checkboxgroup.check-button .cl-checkbox .cl-checkbox-field .cl-text:focus {
  outline: none;
}
.cl-radiobutton.check-buttonT2 .cl-radiobutton-item {
  height: 36px !important;
  border-radius: 5px;
  text-align: center !important;
  background-color: #f8f8f8;
  color: #797979;
  font-weight: 700;
  font-size: 15px;
  /* 내부 아이템 요소 */
  /* 선택된 라디오아이템 아이콘 스타일 */
}
.cl-radiobutton.check-buttonT2 .cl-radiobutton-item .cl-radiobutton-field {
  width: 100%;
}
.cl-radiobutton.check-buttonT2 .cl-radiobutton-item.cl-selected {
  background-color: #3a83db;
}
.cl-radiobutton.check-buttonT2 .cl-radiobutton-item.cl-selected .cl-text {
  color: white;
}
.cl-radiobutton.check-buttonT2 .cl-radiobutton-item.cl-selected .cl-text:focus {
  outline: none;
}
/************************************************
 * 개행label 리스트박스
 ************************************************/
.cl-listbox.pre-wrap {
  border: none !important;
  border-bottom: 1px solid #e7e7e7 !important;
  color: #666666;
  font-weight: 400;
  font-size: 16px;
  padding-top: 16px;
  vertical-align: middle;
}
.cl-listbox.pre-wrap.noData {
  background-image: url("images/controls/listbox/ico_noMessage.png");
  background-repeat: no-repeat;
  background-position: center calc(50% - 27px);
}
.cl-listbox.pre-wrap .cl-listbox-list .cl-listbox-item {
  border-top: 1px solid #e7e7e7 !important;
  min-height: 70px;
}
.cl-listbox.pre-wrap .cl-listbox-list .cl-listbox-item.cl-selected {
  background-color: #E5EFFD;
}
.cl-listbox.pre-wrap .cl-listbox-list .cl-listbox-item.cl-selected .cl-text {
  color: #000000;
}
.cl-listbox.pre-wrap .cl-listbox-list .cl-listbox-item .cl-text {
  padding-left: 10px;
}
.cl-listbox.pre-wrap .cl-listbox-list .cl-listbox-item .cl-text span.txt-addressNm {
  font-size: 16px;
  font-weight: 700;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  white-space: break-spaces;
}
.cl-listbox.pre-wrap .cl-listbox-list .cl-listbox-item .cl-text span.txt-address {
  color: #555555;
  font-size: 13px;
  font-weight: 400;
  padding-left: 13px;
  background-image: url("images/controls/listbox/ico_list_home.png");
  background-repeat: no-repeat;
  background-position: left center;
}
/************************************************
 * 탭 폴더
 ************************************************/
.cl-tabfolder.tfCn .cl-tabfolder-header.cl-top {
  border-bottom: 1px solid #3a83db;
}
.cl-tabfolder.tfCn .cl-tabfolder-header.cl-top .cl-tabfolder-item {
  color: #787d86;
  font-weight: 700;
  font-size: 15px;
  background-color: #EFF5F8;
  margin-right: 5px;
  border: 1px solid #E2E9ED;
  border-bottom: 0px;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}
.cl-tabfolder.tfCn .cl-tabfolder-header.cl-top .cl-tabfolder-item.cl-selected {
  background-color: #3a83db;
  color: #ffffff;
}
.cl-tabfolder.tfCn .cl-tabfolder-header.cl-top .cl-tabfolder-item .cl-text {
  text-align: center;
}
/************************************************
 * 타이포그래피 유틸
 ************************************************/
.cl-output.require .cl-text:after {
  content: "*";
  color: #e12828;
  margin-left: 3px;
}
/************************************************
 * 캡션 텍스트
 ************************************************/
.cl-output.caption {
  color: #666666;
  font-weight: 400;
  letter-spacing: -0.05em;
}
.cl-output.caption2 {
  color: #666666;
  font-weight: 400;
  background-color: #f8f8f8;
  padding-left: 10px;
  letter-spacing: -0.05em;
}
/************************************************
 * 아이콘 텍스트
 ************************************************/
.cl-output.help-txt {
  background-image: url("images/controls/button/ico_btn_help.png");
  padding-left: 24px;
  line-height: 1;
}
.cl-output.file-txt {
  background-image: url("images/controls/output/ico_file.png");
  font-weight: 500;
  font-size: 16px;
  padding-left: 18px;
  line-height: 1;
}
.cl-output.info-txt {
  background-image: url("images/controls/output/ico_info.png");
  font-weight: 500;
  font-size: 16px;
  padding-left: 35px;
  line-height: 1;
}
.cl-output.happy-txt {
  background-image: url("images/controls/output/ico_happy.png");
  color: #000000;
  font-size: 16px;
  font-weight: 400;
  padding-left: 26px;
  line-height: 1;
}
.cl-embeddedapp.table-txt {
  background-image: url("images/controls/output/ico_txt_04.png");
  background-repeat: no-repeat;
  background-position: left calc(50% + 0px);
  padding-left: 22px;
  padding-top: 7px;
}
.cl-output.table-txt {
  background-image: url("images/controls/output/ico_txt_04.png");
  background-repeat: no-repeat;
  background-position: left calc(100% - 3px);
  padding-left: 22px;
  padding-top: 7px;
  vertical-align: bottom;
}
.cl-output.table-txt .cl-text {
  font-size: 16px;
  font-weight: 400 14px "NanumBarunGothic", "Noto Sans KR", "Spoqa Han Sans Neo", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", "돋움", "Dotum", sans-serif;
}
.cl-output.address-txt {
  background-image: url("images/controls/output/ico_info_address.png");
  color: #000000;
  font-size: 16px;
  font-weight: 400;
  padding-left: 26px;
  line-height: 1;
}
.cl-output.tel-txt {
  background-image: url("images/controls/output/ico_info_tel.png");
  color: #000000;
  font-size: 16px;
  font-weight: 400;
  padding-left: 26px;
  line-height: 1;
}
/************************************************
 * 도트 텍스트
 ************************************************/
.cl-output.ref-txt {
  color: #808080;
  font-weight: 400;
}
.cl-output.ref-txt .cl-text:before {
  content: "";
  position: relative;
  display: inline-block;
  left: 0px;
  top: -3px;
  margin-right: 5px;
  width: 3px;
  height: 3px;
  background-color: #ffc31f;
}
.cl-output.dot-tit {
  color: #000000;
  font-size: 17px;
  font-weight: 500;
}
.cl-output.dot-tit .cl-text:before {
  content: "";
  position: relative;
  display: inline-block;
  left: 0px;
  top: -4px;
  margin-right: 7px;
  width: 6px;
  height: 6px;
  background-image: url("images/controls/output/ico_dot_01.png");
  background-repeat: no-repeat;
  background-position: left;
}
.cl-output.dot-tit-02 {
  color: #000000;
  font-size: 16px;
  font-weight: 500;
}
.cl-output.dot-tit-02 .cl-text:before {
  content: "";
  position: relative;
  display: inline-block;
  left: 0px;
  top: -4px;
  margin-right: 7px;
  width: 6px;
  height: 6px;
  background-image: url("images/controls/output/ico_blt_pop.png");
  background-repeat: no-repeat;
  background-position: left;
}
.cl-output.dot-tit-03 {
  color: #000000;
  font-size: 20px;
  font-weight: 700;
}
.cl-output.dot-tit-03 .cl-text:before {
  content: "";
  position: relative;
  display: inline-block;
  left: 0px;
  top: -4px;
  margin-right: 7px;
  width: 6px;
  height: 6px;
  background-image: url("images/controls/output/ico_blt_pop.png");
  background-repeat: no-repeat;
  background-position: left;
}
.cl-output.blt-txt {
  color: #666666;
  font-weight: 400;
}
.cl-output.blt-txt .cl-text:before {
  content: "";
  position: relative;
  display: inline-block;
  left: 0px;
  top: -3px;
  margin-right: 5px;
  width: 3px;
  height: 3px;
  background-color: #707070;
  border-radius: 9999px;
}
.cl-output.blt-pop {
  color: #666666;
  font-size: 17px;
  font-weight: 500;
}
.cl-output.blt-pop .cl-text:before {
  content: "";
  position: relative;
  display: inline-block;
  left: 0px;
  top: -4px;
  margin-right: 7px;
  width: 6px;
  height: 6px;
  background-image: url("images/controls/output/ico_dot_01.png");
  background-repeat: no-repeat;
  background-position: left;
}
/************************************************
 * 리스트 텍스트
 ************************************************/
.cl-htmlsnippet.list-txt:before {
  content: "";
  position: absolute;
  display: block;
  top: 12px;
  left: 0px;
  width: 5px;
  height: 2px;
  background-color: #707070;
}
.cl-htmlsnippet.list-txt p {
  padding-left: 8px;
}
.cl-htmlsnippet.blt-txt ul,
.cl-htmlsnippet.blt-txt li {
  margin: 0px;
  padding: 0px;
}
.cl-htmlsnippet.blt-txt ul {
  list-style: none;
}
.cl-htmlsnippet.blt-txt ul > li {
  color: #666666;
  position: relative;
  padding: 0px 0px 0px 5px !important;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 22px;
  text-align: left !important;
}
.cl-htmlsnippet.blt-txt ul > li:before {
  content: "";
  position: absolute;
  left: 0px;
  top: 8px;
  width: 3px;
  height: 3px;
  background-color: #707070;
}
.cl-htmlsnippet.blt-txt ul > li:not(:first-child) {
  margin-top: 6px;
}
.cl-htmlsnippet.blt-txt2 ul,
.cl-htmlsnippet.blt-txt2 li {
  margin: 10px 10px;
  padding: 0px;
}
.cl-htmlsnippet.blt-txt2 ul {
  list-style: none;
}
.cl-htmlsnippet.blt-txt2 ul > li {
  color: black;
  font-size: 16px !important;
  position: relative;
  padding: 0px 0px 0px 5px !important;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 22px;
  text-align: left !important;
}
.cl-htmlsnippet.blt-txt2 ul > li:before {
  content: "";
  position: absolute;
  left: 0px;
  top: 8px;
  width: 3px;
  height: 3px;
  background-color: #707070;
}
.cl-htmlsnippet.blt-txt2 ul > li:not(:first-child) {
  margin-top: 6px;
}
.cl-htmlsnippet.blt-txt3 ul,
.cl-htmlsnippet.blt-txt3 li {
  margin: 5px 5px;
  padding: 0px;
}
.cl-htmlsnippet.blt-txt3 ul {
  list-style: none;
}
.cl-htmlsnippet.blt-txt3 ul > li {
  color: black;
  font-size: 16px !important;
  position: relative;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 22px;
  text-align: left !important;
}
.cl-htmlsnippet.blt-txt3 ul > li:not(:first-child) {
  margin-top: 6px;
}
.cl-output.ico-location {
  color: #797979;
  font-size: 13px;
}
.cl-output.ico-location .cl-text:before {
  content: "";
  position: relative;
  display: inline-block;
  width: 9px;
  height: 11px;
  top: calc(50% - 12px);
  background-image: url("images/controls/output/ico_location.png");
  background-repeat: no-repeat;
  margin-right: 2px;
}
.cl-container.satisfaction-info .cl-output.contact-nm {
  font-size: 16px;
  font-weight: 400;
  color: black;
}
.cl-container.satisfaction-info .cl-output.contact-nm .cl-text:after {
  content: '';
  position: absolute;
  top: 6px;
  right: 0;
  width: 1px;
  height: 14px;
  background-color: #cfcfcf;
}
.cl-container.satisfaction-info .cl-output.contact-fnm {
  font-size: 16px;
  font-weight: 400;
  color: black;
}
.cl-container.satisfaction-info .cl-output.contact-fnm .cl-text:after {
  content: '';
  position: absolute;
  top: 6px;
  right: 0;
  width: 1px;
  height: 14px;
  background-color: #cfcfcf;
}
@media (min-width: 1024px) {
  .cl-container.satisfaction-info .cl-output.contact-nm {
    font-size: 16px;
    font-weight: 400;
    color: black;
  }
  .cl-container.satisfaction-info .cl-output.contact-nm .cl-text {
    padding-left: 40px;
    padding-right: 10px;
  }
  .cl-container.satisfaction-info .cl-output.contact-nm .cl-text:after {
    content: '';
    position: absolute;
    top: 6px;
    right: 0;
    width: 1px;
    height: 14px;
    background-color: #cfcfcf;
  }
  .cl-container.satisfaction-info .cl-output.contact-fnm {
    font-size: 16px;
    font-weight: 400;
    color: black;
  }
  .cl-container.satisfaction-info .cl-output.contact-fnm .cl-text {
    padding-right: 10px;
  }
  .cl-container.satisfaction-info .cl-output.contact-fnm .cl-text:after {
    content: '';
    position: absolute;
    top: 6px;
    right: 0;
    width: 1px;
    height: 14px;
    background-color: #cfcfcf;
  }
}
.cl-radiobutton.filter {
  font-size: 13px;
  text-align: center;
  font-weight: 400;
  /* 라디오버튼 focus 스타일 */
}
.cl-radiobutton.filter .cl-radiobutton-item {
  background-color: #f8f8f8;
  border-color: #f8f8f8;
  border-spacing: 5px;
  /* 아이콘 정렬을 설정 */
}
.cl-radiobutton.filter .cl-radiobutton-item.default {
  height: 82px !important;
}
.cl-radiobutton.filter .cl-radiobutton-item.default .cl-radiobutton-field {
  width: 100%;
  height: 100%;
}
.cl-radiobutton.filter .cl-radiobutton-item.tablet {
  height: 95px !important;
}
.cl-radiobutton.filter .cl-radiobutton-item.tablet .cl-radiobutton-field {
  width: 100%;
  height: 100%;
  min-height: 95px !important;
}
.cl-radiobutton.filter .cl-radiobutton-item.mobile {
  height: 85px !important;
}
.cl-radiobutton.filter .cl-radiobutton-item.mobile .cl-radiobutton-field {
  width: 100%;
  height: 100%;
}
.cl-radiobutton.filter .cl-radiobutton-item .cl-text {
  padding-top: 0px;
  white-space: pre-wrap !important;
  word-break: break-all;
  line-height: 1.2;
}
.cl-radiobutton.filter .cl-radiobutton-item .cl-icon-wrapper {
  vertical-align: bottom;
}
.cl-radiobutton.filter .cl-radiobutton-item.cl-selected,
.cl-radiobutton.filter .cl-radiobutton-item:not(.cl-disabled):hover,
.cl-radiobutton.filter .cl-radiobutton-item:focus,
.cl-radiobutton.filter .cl-radiobutton-item.cl-focus,
.cl-radiobutton.filter .cl-radiobutton-item.focus,
.cl-radiobutton.filter .cl-radiobutton-item:not(.cl-disabled).cl-activated,
.cl-radiobutton.filter .cl-radiobutton-item:not(.cl-disabled):active {
  background-color: #e6effe;
}
.cl-radiobutton.filter .cl-radiobutton-item.cl-disabled .cl-radiobutton-icon {
  width: 100%;
  height: 100% !important;
  background-size: auto;
  margin-top: 16px;
}
.cl-radiobutton.filter .cl-radiobutton-item.cl-disabled .cl-radiobutton-icon.f-01 {
  background-image: url("images/controls/button/ico_item_01_off.png") !important;
  background-size: auto;
  margin-bottom: -6px;
}
.cl-radiobutton.filter .cl-radiobutton-item.cl-disabled .cl-radiobutton-icon.f-02 {
  background-image: url("images/controls/button/ico_item_02_off.png") !important;
  background-size: auto;
  margin-bottom: -6px;
}
.cl-radiobutton.filter .cl-radiobutton-item.cl-disabled .cl-radiobutton-icon.f-03 {
  background-image: url("images/controls/button/ico_item_03_off.png") !important;
  background-size: auto;
  margin-bottom: -6px;
}
.cl-radiobutton.filter .cl-radiobutton-item.cl-disabled .cl-radiobutton-icon.f-04 {
  background-image: url("images/controls/button/ico_item_04_off.png") !important;
  background-size: auto;
  margin-bottom: -6px;
}
.cl-radiobutton.filter .cl-radiobutton-item.cl-disabled .cl-radiobutton-icon.f-05 {
  background-image: url("images/controls/button/ico_item_05_off.png") !important;
  background-size: auto;
  margin-bottom: -6px;
}
.cl-radiobutton.filter .cl-radiobutton-item.cl-disabled .cl-radiobutton-icon.f-06 {
  background-image: url("images/controls/button/ico_item_06_off.png") !important;
  background-size: auto;
  margin-bottom: -6px;
}
.cl-radiobutton.filter .cl-radiobutton-item.cl-disabled .cl-radiobutton-icon.f-07 {
  background-image: url("images/controls/button/ico_item_07_off.png") !important;
  background-size: auto;
  margin-bottom: -6px;
}
.cl-radiobutton.filter .cl-radiobutton-item.cl-disabled .cl-radiobutton-icon.f-08 {
  background-image: url("images/controls/button/ico_item_08_off.png") !important;
  background-size: auto;
  margin-bottom: -6px;
}
.cl-radiobutton.filter .cl-radiobutton-item.cl-disabled .cl-radiobutton-icon.f-09 {
  background-image: url("images/controls/button/ico_item_09_off.png") !important;
  background-size: auto;
  margin-bottom: -6px;
}
.cl-radiobutton.filter .cl-radiobutton-item.cl-disabled .cl-radiobutton-icon.f-10 {
  background-image: url("images/controls/button/ico_item_10_off.png") !important;
  background-size: auto;
  margin-bottom: -6px;
}
.cl-radiobutton.filter .cl-radiobutton-item.cl-disabled .cl-radiobutton-icon.f-11 {
  background-image: url("images/controls/button/ico_item_11_off.png") !important;
  background-size: auto;
  margin-bottom: -6px;
}
.cl-radiobutton.filter .cl-radiobutton-item.cl-disabled .cl-radiobutton-icon.f-12 {
  background-image: url("images/controls/button/ico_item_12_off.png") !important;
  background-size: auto;
  margin-bottom: -6px;
}
.cl-radiobutton.filter .cl-radiobutton-item.cl-disabled .cl-radiobutton-icon.f-13 {
  background-image: url("images/controls/button/ico_item_13_off.png") !important;
  background-size: auto;
  margin-bottom: -6px;
}
.cl-radiobutton.filter .cl-radiobutton-item.cl-disabled .cl-radiobutton-icon.f-14 {
  background-image: url("images/controls/button/ico_item_14_off.png") !important;
  background-size: auto;
  margin-bottom: -6px;
}
.cl-radiobutton.filter .cl-radiobutton-item.cl-disabled .cl-radiobutton-icon.f-15 {
  background-image: url("images/controls/button/ico_item_15_off.png") !important;
  background-size: auto;
  margin-bottom: -6px;
}
.cl-radiobutton.filter .cl-radiobutton-item.cl-disabled .cl-radiobutton-icon.f-16 {
  background-image: url("images/controls/button/ico_item_16_off.png") !important;
  background-size: auto;
  margin-bottom: -6px;
}
.cl-radiobutton.filter .cl-radiobutton-item.cl-disabled .cl-radiobutton-icon.f-17 {
  background-image: url("images/controls/button/ico_item_17_off.png") !important;
  background-size: auto;
  margin-bottom: -6px;
}
.cl-radiobutton.filter .cl-radiobutton-item.cl-disabled .cl-radiobutton-icon.f-18 {
  background-image: url("images/controls/button/ico_item_18_off.png") !important;
  background-size: auto;
  margin-bottom: -6px;
}
.cl-radiobutton.filter .cl-radiobutton-item.cl-disabled .cl-radiobutton-icon.f-19 {
  background-image: url("images/controls/button/ico_item_19_off.png") !important;
  background-size: auto;
  margin-bottom: -6px;
}
.cl-radiobutton.filter .cl-radiobutton-item.cl-disabled .cl-radiobutton-icon.f-20 {
  background-image: url("images/controls/button/ico_item_20_off.png") !important;
  background-size: auto;
  margin-bottom: -6px;
}
.cl-radiobutton.filter .cl-radiobutton-item .cl-radiobutton-icon {
  width: 100%;
  height: 100% !important;
  background-size: auto;
  margin-top: 16px;
}
.cl-radiobutton.filter .cl-radiobutton-item .cl-radiobutton-icon.f-01 {
  background-image: url("images/controls/button/ico_item_01.png") !important;
  background-size: auto;
  margin-bottom: -6px;
}
.cl-radiobutton.filter .cl-radiobutton-item .cl-radiobutton-icon.f-02 {
  background-image: url("images/controls/button/ico_item_02.png") !important;
  background-size: auto;
  margin-bottom: -6px;
}
.cl-radiobutton.filter .cl-radiobutton-item .cl-radiobutton-icon.f-02.cl-disabled {
  background-image: url("images/controls/button/ico_item_02_off.png") !important;
}
.cl-radiobutton.filter .cl-radiobutton-item .cl-radiobutton-icon.f-03 {
  background-image: url("images/controls/button/ico_item_03.png") !important;
  background-size: auto;
  margin-bottom: -6px;
}
.cl-radiobutton.filter .cl-radiobutton-item .cl-radiobutton-icon.f-03.cl-disabled {
  background-image: url("images/controls/button/ico_item_03_off.png") !important;
}
.cl-radiobutton.filter .cl-radiobutton-item .cl-radiobutton-icon.f-04 {
  background-image: url("images/controls/button/ico_item_04.png") !important;
  background-size: auto;
  margin-bottom: -6px;
}
.cl-radiobutton.filter .cl-radiobutton-item .cl-radiobutton-icon.f-04.cl-disabled {
  background-image: url("images/controls/button/ico_item_04_off.png") !important;
}
.cl-radiobutton.filter .cl-radiobutton-item .cl-radiobutton-icon.f-05 {
  background-image: url("images/controls/button/ico_item_05.png") !important;
  background-size: auto;
  margin-bottom: -6px;
}
.cl-radiobutton.filter .cl-radiobutton-item .cl-radiobutton-icon.f-05.cl-disabled {
  background-image: url("images/controls/button/ico_item_05_off.png") !important;
}
.cl-radiobutton.filter .cl-radiobutton-item .cl-radiobutton-icon.f-06 {
  background-image: url("images/controls/button/ico_item_06.png") !important;
  background-size: auto;
  margin-bottom: -6px;
}
.cl-radiobutton.filter .cl-radiobutton-item .cl-radiobutton-icon.f-06.cl-disabled {
  background-image: url("images/controls/button/ico_item_06_off.png") !important;
}
.cl-radiobutton.filter .cl-radiobutton-item .cl-radiobutton-icon.f-07 {
  background-image: url("images/controls/button/ico_item_07.png") !important;
  background-size: auto;
  margin-bottom: -6px;
}
.cl-radiobutton.filter .cl-radiobutton-item .cl-radiobutton-icon.f-07.cl-disabled {
  background-image: url("images/controls/button/ico_item_07_off.png") !important;
}
.cl-radiobutton.filter .cl-radiobutton-item .cl-radiobutton-icon.f-08 {
  background-image: url("images/controls/button/ico_item_08.png") !important;
  background-size: auto;
  margin-bottom: -6px;
}
.cl-radiobutton.filter .cl-radiobutton-item .cl-radiobutton-icon.f-08.cl-disabled {
  background-image: url("images/controls/button/ico_item_08_off.png") !important;
}
.cl-radiobutton.filter .cl-radiobutton-item .cl-radiobutton-icon.f-09 {
  background-image: url("images/controls/button/ico_item_09.png") !important;
  background-size: auto;
  margin-bottom: -6px;
}
.cl-radiobutton.filter .cl-radiobutton-item .cl-radiobutton-icon.f-09.cl-disabled {
  background-image: url("images/controls/button/ico_item_09_off.png") !important;
}
.cl-radiobutton.filter .cl-radiobutton-item .cl-radiobutton-icon.f-10 {
  background-image: url("images/controls/button/ico_item_10.png") !important;
  background-size: auto;
  margin-bottom: -6px;
}
.cl-radiobutton.filter .cl-radiobutton-item .cl-radiobutton-icon.f-10.cl-disabled {
  background-image: url("images/controls/button/ico_item_10_off.png") !important;
}
.cl-radiobutton.filter .cl-radiobutton-item .cl-radiobutton-icon.f-11 {
  background-image: url("images/controls/button/ico_item_11.png") !important;
  background-size: auto;
  margin-bottom: -6px;
}
.cl-radiobutton.filter .cl-radiobutton-item .cl-radiobutton-icon.f-11.cl-disabled {
  background-image: url("images/controls/button/ico_item_11_off.png") !important;
}
.cl-radiobutton.filter .cl-radiobutton-item .cl-radiobutton-icon.f-12 {
  background-image: url("images/controls/button/ico_item_12.png") !important;
  background-size: auto;
  margin-bottom: -6px;
}
.cl-radiobutton.filter .cl-radiobutton-item .cl-radiobutton-icon.f-12.cl-disabled {
  background-image: url("images/controls/button/ico_item_12_off.png") !important;
}
.cl-radiobutton.filter .cl-radiobutton-item .cl-radiobutton-icon.f-13 {
  background-image: url("images/controls/button/ico_item_13.png") !important;
  background-size: auto;
  margin-bottom: -6px;
}
.cl-radiobutton.filter .cl-radiobutton-item .cl-radiobutton-icon.f-13.cl-disabled {
  background-image: url("images/controls/button/ico_item_13_off.png") !important;
}
.cl-radiobutton.filter .cl-radiobutton-item .cl-radiobutton-icon.f-14 {
  background-image: url("images/controls/button/ico_item_14.png") !important;
  background-size: auto;
  margin-bottom: -6px;
}
.cl-radiobutton.filter .cl-radiobutton-item .cl-radiobutton-icon.f-14.cl-disabled {
  background-image: url("images/controls/button/ico_item_14_off.png") !important;
}
.cl-radiobutton.filter .cl-radiobutton-item .cl-radiobutton-icon.f-15 {
  background-image: url("images/controls/button/ico_item_15.png") !important;
  background-size: auto;
  margin-bottom: -6px;
}
.cl-radiobutton.filter .cl-radiobutton-item .cl-radiobutton-icon.f-15.cl-disabled {
  background-image: url("images/controls/button/ico_item_15_off.png") !important;
}
.cl-radiobutton.filter .cl-radiobutton-item .cl-radiobutton-icon.f-16 {
  background-image: url("images/controls/button/ico_item_16.png") !important;
  background-size: auto;
  margin-bottom: -6px;
}
.cl-radiobutton.filter .cl-radiobutton-item .cl-radiobutton-icon.f-16.cl-disabled {
  background-image: url("images/controls/button/ico_item_16_off.png") !important;
}
.cl-radiobutton.filter .cl-radiobutton-item .cl-radiobutton-icon.f-17 {
  background-image: url("images/controls/button/ico_item_17.png") !important;
  background-size: auto;
  margin-bottom: -6px;
}
.cl-radiobutton.filter .cl-radiobutton-item .cl-radiobutton-icon.f-17.cl-disabled {
  background-image: url("images/controls/button/ico_item_17_off.png") !important;
}
.cl-radiobutton.filter .cl-radiobutton-item .cl-radiobutton-icon.f-18 {
  background-image: url("images/controls/button/ico_item_18.png") !important;
  background-size: auto;
  margin-bottom: -6px;
}
.cl-radiobutton.filter .cl-radiobutton-item .cl-radiobutton-icon.f-18.cl-disabled {
  background-image: url("images/controls/button/ico_item_18_off.png") !important;
}
.cl-radiobutton.filter .cl-radiobutton-item .cl-radiobutton-icon.f-19 {
  background-image: url("images/controls/button/ico_item_19.png") !important;
  background-size: auto;
  margin-bottom: -6px;
}
.cl-radiobutton.filter .cl-radiobutton-item .cl-radiobutton-icon.f-19.cl-disabled {
  background-image: url("images/controls/button/ico_item_19_off.png") !important;
}
.cl-radiobutton.filter .cl-radiobutton-item .cl-radiobutton-icon.f-20 {
  background-image: url("images/controls/button/ico_item_20.png") !important;
  background-size: auto;
  margin-bottom: -6px;
}
.cl-radiobutton.filter .cl-radiobutton-item .cl-radiobutton-icon.f-20.cl-disabled {
  background-image: url("images/controls/button/ico_item_20_off.png") !important;
}
.cl-radiobutton.filter:focus .cl-radiobutton-item .cl-radiobutton-icon:focus,
.cl-radiobutton.filter.cl-focus .cl-radiobutton-item .cl-radiobutton-icon:focus,
.cl-radiobutton.filter:focus .cl-radiobutton-item .cl-radiobutton-icon.cl-focus,
.cl-radiobutton.filter.cl-focus .cl-radiobutton-item .cl-radiobutton-icon.cl-focus {
  outline: none;
}
.cl-output.rotate-45 {
  transform: rotate(-45deg);
}