@charset "utf-8";

/* common */

body {
  line-height: 1;
  font-size: 16px;
  font-family: "Noto Sans KR", sans-serif;
  color: #323232;
  background-color: #efefef;
}
a:link,
a:visited {
  color: #323232;
  text-decoration: none;
}
a:hover,
a:active {
  color: #323232;
  text-decoration: none;
}
.roboto {
  font-family: "Roboto", sans-serif;
}
.pd-0 {
  padding: 0;
}
.mb-3 {
  margin-bottom: 3rem !important;
}
.mb-4 {
  margin-bottom: 4rem !important;
}

/* HEADER */
.main-header {
  border-bottom: 0;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.fa-bars:before {
  content: none;
}
.nav-btn {
  background: url("../images/icon-nav-btn.png") no-repeat right center;
  background-size: 20px 18px;
}
.navbar-nav.left .nav-link {
  line-height: 24px;
  color: #888;
  font-size: 0.95rem;
  font-size: 0.95rem;
  font-weight: 400;
}
.navbar-nav.left li:nth-child(2) {
  margin-left: 16px !important;
}
.badge-warning {
  background-color: #ff6c58;
  color: #fff;
}
.navbar-badge {
  padding: 0;
  width: 16px;
  height: 16px;
  border-radius: 8px;
  text-align: center;
  line-height: 16px;
}

/* SIDE BAR */
.main-sidebar {
  background-color: #212121;
}
[class*="sidebar-dark"] .brand-link {
  border-bottom: 0;
  padding: 1.3rem 0.5rem 0 0.5rem;
}
.brand-link .brand-image {
  margin: 0 0 0 0.8rem;
  max-height: 39px;
}
.main-sidebar .brand-text img {
  width: 86px;
}
.user-panel {
  border-bottom: 0 !important;
  margin: 32px 0 0 0 !important;
  overflow: visible;
}
.nav-sidebar > .nav-item > .nav-link {
  height: 50px;
  line-height: 50px;
  padding: 0 1rem;
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 0;
}
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active {
  background-color: #fff;
  color: #323232;
  box-shadow: none;
}
.user-panel .image {
  padding-top: 0.13rem;
  padding-left: 0.7rem;
}
.user-panel img {
  width: 2.3rem;
}
.user-panel .info {
  padding: 0 0 0 8px;
  line-height: 34px;
}
.user-panel .info dl {
  color: #fff;
}
.user-panel .info dl dt {
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.5rem;
  letter-spacing: 0.05rem;
}
.user-panel .info dl dd {
  font-size: 0.85rem;
  font-weight: 300;
  line-height: 1.2rem;
  color: #aaa;
  letter-spacing: 0.03rem;
  margin-bottom: 0;
}
[class*="sidebar-dark-"] .sidebar a {
  color: #fff;
}
.nav-treeview {
  margin-top: 0.5rem;
  margin-bottom: 1rem;
}
[class*="sidebar-dark-"] .nav-treeview > .nav-item > .nav-link {
  opacity: 0.4;
  padding: 0.6rem 1rem 0.7rem 1.5rem;
}
[class*="sidebar-dark-"] .nav-treeview > .nav-item > .nav-link.active {
  background: none;
  color: #bbb;
  opacity: 1;
}
[class*="sidebar-dark-"] .nav-treeview > .nav-item > .nav-link.active:hover {
  background-color: #383838;
  color: #fff;
}
.nav-sidebar .nav-link p.title {
  display: inline-block;
  height: 50px;
  line-height: 50px;
}
.fa-tachometer-alt:before {
  content: "";
  display: block;
  width: 26px;
  height: 26px;
  background: url("../images/icon-side-cpwt.png") no-repeat center center;
  background-size: 26px;
  position: absolute;
  top: 50%;
  translate: 0 -50%;
}
.fa-th:before {
  content: "";
  display: block;
  width: 26px;
  height: 26px;
  background: url("../images/icon-side-promo.png") no-repeat center center;
  background-size: 26px;
  position: absolute;
  top: 50%;
  translate: 0 -50%;
}
.nav-sidebar .nav-treeview > .nav-item > .nav-link > .nav-icon {
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  border-radius: 5px;
}
.fa-circle:before {
  content: none;
}
.nav-icon.manual::before {
  content: "";
  display: block;
  width: 26px;
  height: 26px;
  background: url("../images/icon-side-menual.png") no-repeat center center;
  background-size: 26px;
  position: absolute;
  top: 50%;
  translate: 0 -50%;
}
.nav-sidebar .nav-link > .right,
.nav-sidebar .nav-link > p > .right {
  top: 50%;
  margin-top: -8px;
}
.badge-danger {
  display: inline-block;
  width: 40px;
  height: 20px;
  padding: 0;
  line-height: 20px;
  text-align: center;
  background-color: #ff6c58;
  border-radius: 10px;
}
.nav-item.logout {
  margin-top: 40px;
}
.nav-item.logout .fa-th:before {
  content: "";
  display: block;
  width: 26px;
  height: 26px;
  background: url("../images/icon-logout.png") no-repeat center center;
  background-size: 26px;
  position: absolute;
  top: 50%;
  translate: 0 -50%;
}
.nav-item.logout p {
  font-weight: 300;
  color: #aaa;
}

/* CONTENTS */
.content-wrapper {
  background: none;
}
.content-wrapper > .content {
  padding: 0 1.3rem;
}
.card-primary.card-outline {
  border: 0;
  background: none;
  box-shadow: none;
}
.card-header {
  border-bottom: 0;
  padding: 0;
}
.card-title {
  height: 36px;
  line-height: 36px;
  font-size: 1.5rem;
  font-weight: bold;
  padding-left: 2.6rem;
  margin-bottom: 1rem;
}
.cont-tit.cpwt:before {
  content: "";
  display: inline-block;
  width: 31px;
  height: 38px;
  background: url("../images/icon-cpwt-new.png") no-repeat center center;
  position: absolute;
  top: 0;
  left: 0;
  background-size: 31px;
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.15));
}
.card-primary.card-outline {
  margin-bottom: 0;
}
.bg-box {
  background-color: #fff;
  border-radius: 1rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.form-group {
  margin-bottom: 0.5rem;
}
.form-group h4 {
  font-size: 1.2rem;
  margin-bottom: 0;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}
.fa-question-circle {
  position: relative;
  cursor: pointer;
  margin-left: 4px;
}
.fa-question-circle::after {
  display: none;
  content: "";
  width: 450px;
  padding: 1rem 1rem;
  position: absolute;
  top: -3rem;
  left: 24px;
  font-size: 0.9rem;
  line-height: 1rem;
  background-color: #fff;
  border-radius: 8px;
  z-index: 1;
}
.fa-question-circle:hover::after {
  display: block;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.fa-question-circle.product::after {
  content: "제품 또는 브랜드명을 넣어주세요 \A\A ex1 : 나이키, 시스템 옴므, 골든듀, 스와로브스키 \A ex2 : 웨딩 리빙 아이템 제안, 발렌타인데이 연인, 어린이날 선물 ";
  white-space: pre-wrap !important;
}
.fa-question-circle.keyword::after {
  content: "다양한 키워드를 입력해 주세요 \A\A ex1. 시즌 오프, 현대백화점 연출, 고백하는 날, 입학식 \A ex2. 무지개, 구름, 불꽃, 바다, 성공, 하트 \A\A TIP) 키워드에 따라 제목과 본문 내용이 다양해집니다. \A 브랜드 : 나이키, 키워드 : 구름 \A 루이스 제목 : 모든 순간이 / 하늘 위를 걷는 것처럼 / 가볍다.";
  white-space: pre-wrap !important;
}
.fa-question-circle.history::after {
  content: "제품 또는 브랜드 명을 넣어주세요 \A\A ex1 : 나이키, 시스템 옴므, 골든듀, 스와로브스키 \A ex2 : 웨딩, 리빙, 발렌타인데이, 어린이날";
  white-space: pre-wrap !important;
}
.form-group .balloon {
  width: calc(100% - 40%);
  padding: 0.5rem 1rem;
  background-color: #323232;
  position: absolute;
  top: -2rem;
  right: -1rem;
  font-size: 0.9rem;
  line-height: 1.1rem;
  color: #fff;
  border-radius: 8px;
  z-index: 1;
}
.form-group .balloon::after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-bottom: 8px solid transparent;
  border-top: 8px solid transparent;
  border-left: 12px solid transparent;
  border-right: 12px solid #323232;
  position: absolute;
  top: 2rem;
  left: -1.5rem;
}
.form-control {
  border: 0;
  background-color: #f0f0f0;
  font-size: 1rem;
}
.form-control:focus {
  background-color: #f0f0f0;
}
.form-control::-moz-input-placeholder {
  font-size: 1rem;
  line-height: 1.5rem;
}
.form-control::-webkit-input-placeholder {
  font-size: 1rem;
  line-height: 1.5rem;
}
.form-control::-ms-input-placeholder {
  font-size: 1rem;
  line-height: 1.5rem;
}
.form-control-lg::-moz-select-placeholder {
  font-size: 1rem;
  line-height: 1.5rem;
}
.form-control-lg::-webkit-select-placeholder {
  font-size: 1rem;
  line-height: 1.5rem;
}
.form-control-lg::-ms-select-placeholder {
  font-size: 1rem;
  line-height: 1.5rem;
}
.select2-purple {
  font-size: 1rem;
}
.form-group.hidden {
  visibility: hidden;
}
.btn-outline-primary {
  padding: 0.75rem 1rem;
  border: 0;
  background-color: #ff6c58;
  color: #fff;
}
.btn-outline-primary:hover {
  background-color: #ec4129;
}
.btn-secondary {
  padding: 0.75rem 1rem;
  border: 0;
  background-color: #ff6c58 !important;
  color: #fff;
}
.btn-secondary:hover {
  background-color: #ec4129;
}
.notice {
  margin-top: 8px;
}
.notice dl {
  margin-bottom: 0;
}
.notice dl dt {
  margin-bottom: 6px;
  color: #ec4129;
  font-size: 0.9rem;
  font-weight: 400;
}
.notice dl dd {
  font-size: 0.85rem;
  color: #999;
  margin-bottom: 0;
  padding-left: 1rem;
}

/* 결과값 */
.cont-tit.result:before {
  content: "";
  display: inline-block;
  width: 31px;
  height: 36px;
  background: url("../images/icon-result-new.png") no-repeat center center;
  position: absolute;
  top: 0;
  left: 0;
  background-size: 31px;
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.15));
}
.table-responsive {
  overflow: visible;
}
.callout.callout-info {
  border: 0;
}
.ribbon-wrapper {
  top: 0;
  right: 1.5rem;
  text-align: center;
  width: 64px;
  height: 28px;
  font-size: 0.9rem;
  line-height: 28px;
  border-radius: 0 0 8px 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  background-color: #323232;
}
.bg-danger {
  background: none !important;
}
.bg-danger .icon-recomm {
  display: inline-block;
  width: 13px;
  height: 13px;
  background: url("../images/icon-recomm.png") no-repeat center center;
  background-size: 13px;
  margin-right: 3px;
}
.callout {
  padding: 1.5rem;
  border-radius: 1rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  position: relative;
}
.callout h5 {
  font-size: 1.2rem;
  color: #ff6c58;
}
.callout p {
  line-height: 1.3rem;
  color: #444;
  margin-bottom: 1.5rem;
}
.fa-icon {
  margin-right: 0.4rem;
  cursor: pointer;
}
.fa-icon::before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
}
.fa-icon.fa-clone {
  background-image: url("../images/icon-clone.png");
  background-repeat: no-repeat;
  background-size: 18px;
}
.fa-icon.fa-thumbs-up {
  background: url("../images/icon-thumbs-up.png");
  background-repeat: no-repeat;
  background-size: 36px;
}
.fa-icon.fa-thumbs-down {
  background: url("../images/icon-thumbs-down.png");
  background-repeat: no-repeat;
  background-size: 36px;
}
.fa-icon.fa-bookmark {
  background: url("../images/icon-bookmark.png");
  background-repeat: no-repeat;
  background-size: 36px;
}
.result-btn-wrap {
  width: 100%;
  position: relative;
}
.fa-icon.fa-thumbs-up.active {
  background-position: -18px 0;
}
.fa-icon.fa-thumbs-down.active {
  background-position: -18px 0;
}
.fa-icon.fa-bookmark.active {
  background-position: -18px 0;
}
.next-btn {
  display: inline;
  padding: 0.35rem 0.5rem;
  font-style: normal;
  font-size: 0.85rem;
  border: 1px solid #ff6c58;
  color: #ff6c58;
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0, -60%);
  cursor: pointer;
  font-weight: 400;
  border-radius: 1rem;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
}
.next-btn:hover {
  background-color: #ff6c58;
  color: #fff;
}
.next-btn-click {
  display: inline;
  width: 90px;
  padding: 0.35rem 0.5rem;
  font-style: normal;
  font-size: 0.85rem;
  border: 1px solid #f57463;
  color: #f57463;
  box-sizing: border-box;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0, -60%);
  cursor: pointer;
  font-weight: 400;
  border-radius: 1rem;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
}
/* .next-btn-click:hover {background-color:#f57463; color:#fff;} */
.swiper.result-list .slide-cont dl dt {
  font-size: 1.05rem;
  margin-bottom: 12px;
  color: #444;
}
.swiper.result-list .slide-cont dl dd {
  font-size: 0.95rem;
  line-height: 1.3rem;
  color: #666;
}
.swiper-button-next,
.swiper-button-prev {
  width: 11px !important;
  height: 60px !important;
  top: None !important;
  display: block !important;
  top: initial !important;
}
.swiper-pagination-fraction {
  left: initial !important;
}

.swiper.result-list {
  background-color: #f5f5f5;
  border-radius: 10px;
  margin-top: 16px;
}
.swiper.result-list .slide-cont {
  padding: 3rem 1.2rem 2.5rem;
}
.swiper.result-list .slide-cont p {
  font-size: 0.95rem;
  line-height: 1.3rem;
  color: #666;
  margin-bottom: 0.8rem;
}
.swiper-button-next {
  background: url("../images/slider-next.png") no-repeat center center !important;
  background-size: 11px 20px !important;
  position: absolute !important;
  top: 1rem !important;
  left: 3rem !important;
}
.swiper-button-prev {
  background: url("../images/slider-prev.png") no-repeat center center !important;
  background-size: 11px 20px !important;
  position: absolute !important;
  top: 1rem !important;
  left: 1.2rem !important;
}
.swiper-pagination {
  width: 50px !important;
  height: 20px !important;
  position: absolute !important;
  top: 1.1rem !important;
  left: 4.7rem !important;
  color: #999 !important;
  font-weight: 300 !important;
}
.slide-icon-wrap {
  position: absolute !important;
  bottom: 1.2rem !important;
  right: 1.2rem !important;
}
.slide-icon-wrap .fa-icon:last-child {
  margin-right: 0;
}

/* HISTORY */
.cont-tit.time-his::before {
  content: "";
  display: inline-block;
  width: 35px;
  height: 35px;
  background: url("../images/icon-timeline-new.png") no-repeat center center;
  position: absolute;
  top: 0;
  left: 0;
  background-size: 35px;
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.15));
}
.cont-tit.time-wehis::before {
  content: "";
  display: inline-block;
  width: 35px;
  height: 35px;
  background: url("../images/icon-other-new.png") no-repeat center center;
  position: absolute;
  top: 0;
  left: 0;
  background-size: 35px;
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.15));
}
.timeline-wrap {
  margin-bottom: 0.8rem;
  display: none;
}
.timeline-wrap:last-child {
  margin-bottom: 0;
}
.timeline-item {
  padding: 1rem;
  background-color: #f4f4f4;
  border-radius: 0.9rem;
  position: relative;
}
span.time {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 0.9rem;
  color: #aaa;
}
.timeline-header {
  margin-bottom: 0.6rem;
  line-height: 0.8rem;
  display: inline-block;
  white-space: pre-line;
}
.timeline-header:hover {
  cursor: pointer;
}
.timeline-header a {
  font-size: 1.05rem;
  line-height: 0.8rem;
  color: #444;
}
.kw-wrap {
  position: absolute;
  bottom: 1.2rem;
  left: 1.2rem;
}
.kw-tag {
  display: inline-block;
  font-size: 0.9rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid #aaa;
  color: #777;
  font-weight: 400;
  border-radius: 2rem;
  margin-right: 0.3rem;
  text-align: center;
}
.kw-tag.product:hover {
  cursor: pointer;
  color: #444;
}
.kw-tag.keyword:hover {
  cursor: pointer;
  color: #444;
}
.timeline-body {
  margin-bottom: 0.5rem;
  line-height: 1.3rem;
  font-size: 0.95rem;
  color: #666;
  display: inline-block;
  white-space: pre-line;
}
.al-right {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
}
.swiper.timeline-sl {
  margin-top: 0;
}
.swiper.timeline-sl .slide-cont dl dt {
  margin-bottom: 4px;
}

.more-btn-wrap {
  width: 100%;
  text-align: center;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
a.more-btn {
  color: #999;
  font-weight: 400;
  transition: all 0.2s ease;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
}
.more-btn:hover {
  color: #ff6c58;
}

/* FOOTER */
.main-footer {
  font-size: 0.9rem;
}

@media screen and (max-width: 767px) {
  .input-wrap {
    margin-bottom: 1rem;
  }
  .form-group.hidden {
    display: none;
  }
}

.timeline-react {
  margin-bottom: 0.8rem;
}

.timeline-item:hover {
  background-color: #e6e4e4;
  /* cursor: pointer; */
}
.timeline-react:last-child {
  margin-bottom: 0.8rem;
}
a {
  white-space: pre-wrap !important;
}
p {
  font-weight: initial !important;
}
.callout h5 {
  margin-bottom: 1.5rem !important;
}
.tooltip-inner {
  max-width: 400px !important;
}

/* Login Page */
.wrapper.login {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrapper.login .login-box {
  width: 90%;
  max-width: 960px;
  padding: 7rem 1.5rem;
  background-color: #fff;
  border-radius: 30px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  text-align: center;
  margin-top: -2rem;
}
.login-box h2 {
  margin-bottom: 2rem;
}
.login-box h2 img {
  width: 170px;
}
.login-box p {
  margin-bottom: 2rem;
  font-size: 0.9rem;
  line-height: 1.2rem;
  word-break: keep-all;
  color: #777;
}
.form-wrap form input {
  display: block;
  width: 100%;
  max-width: 380px;
  height: 48px;
  margin: 0 auto;
  border-radius: 24px;
  border: 1px solid #ddd;
  box-sizing: border-box;
  padding: 0 1.2rem;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  position: relative;
}
.idpwBox {
  margin-bottom: 2rem;
}
.form-wrap form input::placeholder {
  color: #a9a9a9;
  opacity: 1;
  font-size: 0.95rem;
}
.form-wrap form input:-ms-input-placeholder {
  color: #a9a9a9;
  opacity: 1;
}
.form-wrap form input:focus::-webkit-input-placeholder {
  color: transparent;
}
.form-wrap form input:focus::-moz-placeholder {
  color: transparent;
}
.form-wrap form input:focus:-ms-input-placeholder {
  color: transparent;
}
.form-wrap form input:focus::-ms-input-placeholder {
  color: transparent;
}

input.idform:focus,
input.pwform:focus {
  outline: 0;
  border: 1px solid #ff6c58;
}
span.alert {
  display: block;
  width: 100%;
  max-width: 380px;
  font-size: 0.9rem;
  text-align: left;
  margin: 0 auto 2rem;
  padding: 0 0 0 0.5rem;
  color: #ec4129;
}
span.alert i.fa-exclamation-circle {
  margin-right: 4px;
}
.buttonLogin {
  display: block;
  width: 100%;
  max-width: 380px;
  height: 48px;
  margin: 0 auto;
  border: 0;
  background-color: #dbdbdb;
  color: #fff;
  margin-bottom: 2rem !important;
  border-radius: 24px;
}

.buttonPwdCh {
  display: block;
  width: 100%;
  max-width: 380px;
  height: 48px;
  margin: 0 auto;
  border: 0;
  background-color: #dbdbdb;
  color: #fff;
  margin-bottom: 2rem !important;
  border-radius: 24px;
}
.buttonLoginDisabled {
  background-color: #212121;
  cursor: not-allowed;
}
button.find-account {
  border: 0;
  color: #a9a9a9;
  background: none;
  font-size: 0.95rem;
}
footer {
  width: 100%;
  position: absolute;
  bottom: 1rem;
  left: 0;
  text-align: center;
}
footer p.copyright {
  width: 60%;
  margin: 0 auto;
  color: #999;
  font-size: 0.8rem;
  line-height: 1rem;
}

.react-calendar {
  position: fixed;
  z-index: 999;
}

@media screen and (max-width: 767px) {
  .wrapper.login .login-box {
    padding: 4rem 1.5rem;
  }
}

.tooltip {
  z-index: 2 !important;
}
/* 로딩 모달 */
.modal-loading {
  width: 100%;
  height: 100vh;
  background-color: #000;
  opacity: 0.8;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1038;
  display: flex;
  justify-content: center;
  align-items: center;
}
.load-cont {
  margin-top: -100px;
}
.spinner-wrap {
  display: flex;
  justify-content: center;
  height: 65px;
}
.spinner {
  width: 12px;
  height: 12px;
  animation: spinner-o824ag 1s infinite linear;
}
.spinner div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ff6c58;
  border-radius: 50%;
  animation: spinner-vse6n7 1.25s infinite ease;
}
.spinner div:nth-child(1) {
  --rotation: 90;
}
.spinner div:nth-child(2) {
  --rotation: 180;
}
.spinner div:nth-child(3) {
  --rotation: 270;
}
.spinner div:nth-child(4) {
  --rotation: 360;
}
@keyframes spinner-vse6n7 {
  0%,
  100% {
    transform: rotate(calc(var(--rotation) * 1deg)) translateY(0);
  }

  50% {
    transform: rotate(calc(var(--rotation) * 1deg)) translateY(300%);
  }
}

@keyframes spinner-o824ag {
  to {
    transform: rotate(360deg);
  }
}
.modal-loading dl {
  color: #fff;
  text-align: center;
}
.modal-loading dl dt {
  font-size: 2rem;
  font-weight: 400;
  margin-bottom: 16px;
}
.modal-loading dl dd {
  color: #aaa;
}

.typing {
  /*position: absolute;*/
  display: inline-block;
  animation-name: cursor;
  animation-duration: 0.3s;
  animation-iteration-count: infinite;
}
@keyframes cursor {
  0% {
    border-right: 1px solid #fff;
  }
  50% {
    border-right: 1px solid #000;
  }
  100% {
    border-right: 1px solid #fff;
  }
}

/* Tooltip container */
.tooltips {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltips .tooltiptext {
  visibility: hidden;
  position: absolute;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.6s;
}

.tooltip-top {
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltips:hover .tooltiptext {
  visibility: visible;
}

/* 문의 리스트 페이지 */
.cont-tit.qna:before {
  content: "";
  display: inline-block;
  width: 33px;
  height: 38px;
  background: url("../images/icon-other-qna.png") no-repeat center center;
  position: absolute;
  top: 0;
  left: 0;
  background-size: 33px;
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.15));
}
h4.case-num {
  margin-bottom: 16px;
}
.case-num span {
  margin-right: 16px;
}
.case-num span::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 16px;
  background-color: #ddd;
  margin-left: 20px;
}
.case-num span:last-child::after {
  content: none;
}
.case-num span strong {
  color: #ff6c58;
}

.qna-cont table {
  width: 100%;
  text-align: center;
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
}
.qna-cont table thead {
  width: 100%;
}
.qna-cont table thead tr th {
  padding: 0.7rem 0;
  background-color: #eaeaea;
}
.qna-cont table thead tr th:first-child {
  border-radius: 8px 0 0 8px;
}
.qna-cont table thead tr th:last-child {
  border-radius: 0 8px 8px 0;
}
.qna-cont table tbody tr {
  border-bottom: 1px solid #efefef;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}
.qna-cont table tbody tr:hover {
  background-color: #f5f5f5;
}
.qna-cont table tbody tr td {
  padding: 1rem 0;
}
.qna-cont table tbody tr td.state {
  color: #6d89ed;
}
.qna-cont table tbody tr td.state.unans {
  color: #999;
}
.qna-cont table tbody tr td.title {
  text-align: left;
}
.qna-cont table tbody tr td.title a {
  width: 100%;
}
.qna-cont .page-wrap ul {
  display: flex;
  justify-content: center;
  margin-bottom: 0;
  padding: 0.5rem 0;
}
.qna-cont .page-wrap ul li {
  width: 30px;
  text-align: center;
}
.qna-cont .page-wrap ul li button {
  border: 0;
  background: none;
}
.qna-cont .page-wrap ul li button i {
  color: #bbb;
}
.qna-cont .page-wrap ul li a {
  color: #999;
  display: block;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}
.qna-cont .page-wrap ul li a:hover {
  color: #323232;
}
.qna-cont .page-wrap ul li a.active {
  color: #ff6c58;
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  h4.case-num {
    font-size: 1.1rem;
  }
  .case-num span {
    margin-right: 12px;
  }
  .case-num span::after {
    height: 12px;
    margin-left: 12px;
  }
  h4.case-num span:first-child {
    display: block;
    margin-bottom: 4px;
  }
  h4.case-num span:first-child::after {
    content: none;
  }
  .qna-cont table {
    table-layout: fixed;
    word-break: keep-all;
  }
  .qna-cont table td.title a {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  th.name,
  th.date,
  td.name,
  td.date {
    display: none;
  }
  th.state,
  td.state {
    width: 25%;
  }
  th.title,
  td.title {
    width: 75%;
  }
  .qna-cont table thead tr th.title {
    border-radius: 0 8px 8px 0;
  }
  .qna-cont table tbody tr td.title {
    padding: 1rem 0.5rem !important;
  }
}

/* 문의 작성 페이지 */
.qna-write h4 {
  margin-bottom: 12px;
}
.w-title {
  margin-bottom: 40px;
}
.w-content {
  margin-bottom: 40px;
}
.w-content textarea {
  overflow: hidden;
  resize: none;
  min-height: 200px;
  font-size: 0.95rem;
  margin-bottom: 12px;
}
p.notice {
  margin-bottom: 6px;
  color: #ec4129;
  font-size: 0.9rem;
  font-weight: 400;
}
.qna-file {
  margin-bottom: 16px;
  display: flex;
}
.qna-file h4 {
  margin-right: 12px;
  padding: 0.2rem 0;
}
.qna-file button {
  padding: 0 1rem;
  height: 32px;
  border: 1px solid #323232;
  color: #323232;
  border-radius: 2rem;
  background-color: #fff;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}
.qna-file button:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}
.file-list {
  padding: 0;
  font-size: 0.9rem;
}
.file-list li.file-ext {
  margin-bottom: 8px;
  color: #999;
}
.w-file span {
  display: block;
  color: #666;
  font-size: 0.9rem;
  line-height: 1.1rem;
  margin-bottom: 32px;
}
span.div-line {
  display: block;
  width: 100%;
  height: 1px;
  background-color: #ddd;
  margin-bottom: 32px;
}
.qna-cont .btn-outline-primary {
  width: 20%;
  min-width: 240px;
  margin: 0 auto 16px;
  border-radius: 2rem;
}

/* 문의 내용 확인 페이지 */
.qna-answer-wrap th {
  font-weight: 400;
}
.qna-answer-wrap th.state {
  color: #6d89ed;
}
.qna-answer-wrap th.title {
  text-align: left;
  font-weight: bold;
}
.qna-answer-wrap tr {
  border-bottom: 0 !important;
}
.qna-answer-wrap td {
  text-align: left;
  word-break: keep-all;
  padding: 0 !important;
}
.qna-answer-wrap td:hover {
  background-color: #fff;
}
.qna-answer-wrap div.quest {
  padding: 2rem 2rem 2rem 3rem;
}
.qna-answer-wrap div.answer-box {
  padding: 2rem 2rem 2rem 3rem;
  background-color: #fff1ef;
  border-radius: 8px;
}
div.quest,
div.answer-box {
  position: relative;
}
span.index-icon {
  position: absolute;
  top: 2rem;
  left: 1.5rem;
  font-size: 1.1rem;
  font-weight: bold;
}
span.index-a {
  color: #ff6c58;
}
.answer-box span.date {
  position: absolute;
  top: 2rem;
  right: 2rem;
  color: #999;
  font-size: 0.9rem;
}
.more-q {
  display: block;
  margin: 0 auto;
  margin-top: 16px;
  border: 0;
  background-color: #fff;
  color: #999;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}
.more-q:hover {
  color: #ff6c58;
}
.qna-answer-wrap textarea {
  overflow: hidden;
  resize: none;
  font-size: 0.95rem;
  margin-bottom: 4px;
  margin-top: 8px;
  background-color: #fff;
  border: 1px solid #ddd;
}
.qna-answer-wrap textarea:focus {
  background-color: #fff;
  border: 1px solid #ff6c58;
}
.send-btn-wrap {
  width: 100%;
  display: flex;
}
.more-write-wrap button {
  border: 0;
  background-color: #fff;
  color: #323232;
  font-weight: bold;
}

/* 서비스 이용약관, 개인정보처리방침 */
.tab-menu {
  display: flex;
  justify-content: center;
  padding-left: 1rem;
  margin-bottom: 12px;
}
.tab-menu button {
  min-width: 210px;
  min-height: 44px;
  padding: 0.8rem 0;
  border-radius: 5px;
  text-align: center;
  background-color: #fff;
  color: #999;
  font-weight: bold;
  border: 0;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}
.tab-menu button:hover {
  color: #ff6c58;
  border: 1px solid #ff6c58;
  box-sizing: border-box;
}
.tab-menu button.is-active {
  background-color: #ff6c58;
  color: #fff;
  border: 0;
}
.tab-menu button.use {
  margin-right: 8px;
}
div.policy {
  padding: 0.5rem;
}
.policy-cont dl {
  margin-bottom: 24px;
}
.policy-cont dl dt {
  font-size: 1.1rem;
  font-weight: bold;
  color: #ff6c58;
  margin-bottom: 8px;
}
.policy-cont dl dd {
  font-size: 0.95rem;
  padding-left: 0;
  line-height: 1.3rem;
  color: #656565;
  margin-bottom: 12px;
}
.policy-cont dl dd b {
  color: #323232;
}
.policy-cont dl dd strong {
  color: #323232;
}
.policy-cont dl dd span.indent {
  display: block;
  margin-left: 10px;
}
.policy-cont dl dd table {
  margin: 8px 0 8px 16px;
}
.policy-cont dl dd table tr td {
  padding: 0.2rem 1rem;
  border: 1px solid #777;
  font-size: 0.9rem;
}
.tab-bar-content {
  display: none;
  width: 100%;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
}
.tab-bar-content.is-active {
  display: block;
}

#horizontal-tabs-example .nav-pills {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
}

#horizontal-tabs-example .nav-pills .nav-link {
  padding: 0.5rem 1rem;
}

/* 접속불가 페이지 */
.error-wrap {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}
.error-wrap ul li {
  text-align: center;
}
.error-wrap dl {
  margin-bottom: 48px;
}
.error-wrap dt {
  margin-bottom: 16px;
  color: #ff6c58;
  font-size: 2rem;
}
.error-wrap dt img {
  width: 600px;
}
.error-wrap dd {
  font-size: 1.2rem;
  color: #666;
  font-weight: 300;
}

/* 푸터 */
.main-footer {
  padding: 16px 20px 16px 270px;
  margin-left: 0 !important;
  position: relative;
}
.main-footer ul {
  display: flex;
  position: absolute;
  top: 16px;
  right: 20px;
}
.main-footer ul li a {
  color: #888;
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -o-transition: all 0.3s;
}
.main-footer ul li a:hover {
  color: #323232;
}
.main-footer ul li:first-child {
  margin-right: 10px;
  padding-right: 10px;
  border-right: 1px solid #bbb;
}

/* 사용 동의 모달 */
.modal-agree {
  width: 100%;
  height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
}
.modal-wrap {
  width: 100%;
  height: 100vh;
  position: relative;
}
.bg-black {
  width: 100%;
  height: 100vh;
  background-color: #000;
  opacity: 0.8;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1038;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 720px;
  height: auto;
  padding: 1.5rem;
  background-color: #fff;
  border-radius: 1.5rem;
  z-index: 1039;
}
.modal-box h5 {
  margin-bottom: 16px;
  color: #323232;
}
.modal-box ol {
  padding: 1.5rem;
  padding-inline-start: 2.5rem;
  background-color: #f2f2f2;
  border-radius: 1rem;
  margin-bottom: 16px;
}
.modal-box ol li {
  font-size: 0.85em;
  line-height: 1.2rem;
  color: #666;
  margin-bottom: 1rem;
}
.modal-box ol li:last-child {
  margin-bottom: 0;
}
.agree-btn-wrap {
  display: flex;
  justify-content: center;
}
.agree-btn-wrap button {
  width: 180px;
  padding: 0.8rem 0;
  border: 0;
  color: #fff;
  font-size: 0.9rem;
  border-radius: 2rem;
}
.agree-btn-wrap .disagree {
  margin-right: 10px;
  background-color: #b1b1b1;
}
.agree-btn-wrap .agree {
  background-color: #ff6c58;
}

.agree-ol ol {
  padding: 5px 20px;
}
.agree-ol li {
  font-size: 0.9rem;
}
.agree-span {
  margin: 0.3px 0 -17px;
}
.agree-ol {
  width: 100%;
  height: 300px;
  background-color: #f6f6f6;
}

/* 문의 리스트 페이지 */
.cont-tit.qna:before {
  content: "";
  display: inline-block;
  width: 33px;
  height: 38px;
  background: url("../images/icon-other-qna.png") no-repeat center center;
  position: absolute;
  top: 0;
  left: 0;
  background-size: 33px;
  filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.15));
}
h4.case-num {
  margin-bottom: 16px;
}
.case-num span {
  margin-right: 16px;
}
.case-num span::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 16px;
  background-color: #ddd;
  margin-left: 20px;
}
.case-num span:last-child::after {
  content: none;
}
.case-num span strong {
  color: #ff6c58;
}

.qna-cont table {
  width: 100%;
  text-align: center;
  margin-bottom: 1.25rem;
  font-size: 0.95rem;
}
.qna-cont table thead {
  width: 100%;
}
.qna-cont table thead tr th {
  padding: 0.7rem 0;
  background-color: #eaeaea;
}
.qna-cont table thead tr th:first-child {
  border-radius: 8px 0 0 8px;
}
.qna-cont table thead tr th:last-child {
  border-radius: 0 8px 8px 0;
}
.qna-cont table tbody tr {
  border-bottom: 1px solid #efefef;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}
.qna-cont table tbody tr:hover {
  background-color: #f5f5f5;
}
.qna-cont table tbody tr td {
  padding: 1rem 0;
}
.qna-cont table tbody tr td.state {
  color: #6d89ed;
}
.qna-cont table tbody tr td.state.unans {
  color: #999;
}
.qna-cont table tbody tr td.title {
  text-align: left;
}
.qna-cont table tbody tr td.title a {
  width: 100%;
}
.qna-cont .page-wrap ul {
  display: flex;
  justify-content: center;
  margin-bottom: 0;
  padding: 0.5rem 0;
}
.qna-cont .page-wrap ul li {
  width: 30px;
  text-align: center;
}
.qna-cont .page-wrap ul li button {
  border: 0;
  background: none;
}
.qna-cont .page-wrap ul li button i {
  color: #bbb;
}
.qna-cont .page-wrap ul li a {
  color: #999;
  display: block;
  margin-top: 10px;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}
.qna-cont .page-wrap ul li a:hover {
  color: #323232;
  margin-top: 10px;
}
.qna-cont .page-wrap ul li a.active {
  color: #ff6c58;
  margin-top: 10px;
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  h4.case-num {
    font-size: 1.1rem;
  }
  .case-num span {
    margin-right: 12px;
  }
  .case-num span::after {
    height: 12px;
    margin-left: 12px;
  }
  h4.case-num span:first-child {
    display: block;
    margin-bottom: 4px;
  }
  h4.case-num span:first-child::after {
    content: none;
  }
  .qna-cont table {
    table-layout: fixed;
    word-break: keep-all;
  }
  .qna-cont table td.title a {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  th.name,
  th.date,
  td.name,
  td.date {
    display: none;
  }
  th.state,
  td.state {
    width: 25%;
  }
  th.title,
  td.title {
    width: 75%;
  }
  .qna-cont table thead tr th.title {
    border-radius: 0 8px 8px 0;
  }
  .qna-cont table tbody tr td.title {
    padding: 1rem 0.5rem !important;
  }
}

/* 문의 작성 페이지 */
.qna-write h4 {
  margin-bottom: 12px;
}
.w-title {
  margin-bottom: 40px;
}
.w-content {
  margin-bottom: 40px;
}
.w-content textarea {
  overflow: hidden;
  resize: none;
  min-height: 200px;
  font-size: 0.95rem;
  margin-bottom: 12px;
}
p.notice {
  margin-bottom: 6px;
  color: #ec4129;
  font-size: 0.9rem;
  font-weight: 400;
}
.qna-file {
  margin-bottom: 16px;
  display: flex;
}
.qna-file h4 {
  margin-right: 12px;
  padding: 0.2rem 0;
}
.qna-file button {
  padding: 0 1rem;
  height: 32px;
  border: 1px solid #323232;
  color: #323232;
  border-radius: 2rem;
  background-color: #fff;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}
.qna-file button:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}
.file-list {
  padding: 0;
  font-size: 0.9rem;
}
.file-list li.file-ext {
  margin-bottom: 8px;
  color: #999;
}
.w-file span {
  display: block;
  color: #666;
  font-size: 0.9rem;
  line-height: 1.1rem;
  margin-bottom: 32px;
}
span.div-line {
  display: block;
  width: 100%;
  height: 1px;
  background-color: #ddd;
  margin-bottom: 32px;
}
.qna-cont .btn-outline-primary {
  width: 20%;
  min-width: 240px;
  margin: 0 auto 16px;
  border-radius: 2rem;
}

/* 문의 내용 확인 페이지 */
.qna-answer-wrap th {
  font-weight: 400;
}
.qna-answer-wrap th.state {
  color: #6d89ed;
}
.qna-answer-wrap th.title {
  text-align: left;
  font-weight: bold;
}
.qna-answer-wrap tr {
  border-bottom: 0 !important;
}
.qna-answer-wrap td {
  text-align: left;
  word-break: keep-all;
  padding: 0 !important;
}
.qna-answer-wrap td:hover {
  background-color: #fff;
}
.qna-answer-wrap div.quest {
  padding: 2rem 2rem 2rem 3rem;
}
.qna-answer-wrap div.answer-box {
  padding: 2rem 2rem 2rem 3rem;
  background-color: #fff1ef;
  border-radius: 8px;
}
div.quest,
div.answer-box {
  position: relative;
}
span.index-icon {
  position: absolute;
  top: 2rem;
  left: 1.5rem;
  font-size: 1.1rem;
  font-weight: bold;
}
span.index-a {
  color: #ff6c58;
}
.answer-box span.date {
  position: absolute;
  top: 2rem;
  right: 2rem;
  color: #999;
  font-size: 0.9rem;
}
.more-q {
  display: block;
  margin: 0 auto;
  margin-top: 16px;
  border: 0;
  background-color: #fff;
  color: #999;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
}
.more-q:hover {
  color: #ff6c58;
}
.qna-answer-wrap textarea {
  overflow: hidden;
  resize: none;
  font-size: 0.95rem;
  margin-bottom: 4px;
  margin-top: 8px;
  background-color: #fff;
  border: 1px solid #ddd;
}
.qna-answer-wrap textarea:focus {
  background-color: #fff;
  border: 1px solid #ff6c58;
}
.send-btn-wrap {
  width: 100%;
  display: flex;
}
.more-write-wrap button {
  border: 0;
  background-color: #fff;
  color: #323232;
  font-weight: bold;
}