@charset "UTF-8";
@media (orientation: landscape) and (pointer: coarse) {
  html {
    font-size: 14px;
  }
}
body.hong4 {
  /****** header-component ******/
  /* header-list */
  /* header-list-snb */
  /* nav */
  /* detail-select-swiper */
  /* payback-wrap */
  /* best-wrap */
  /****** footer-component ******/
  /* footer-list */
  /* footer-top */
  /* footer-center */
  /* footer-bottom */
  /* menu-footer */
  /* swiper-main-banner */
  /* common-banner */
  /* location-wrap */
  /* filter-list */
  /* category-section */
  /* list-wrap */
  /* profile */
}
body.hong4 .header {
  position: relative;
}
body.hong4 .header.all-menu,
body.hong4 .header.all-menu .header-top {
  background: #f6f6f6;
}
body.hong4 .header-top {
  position: relative;
  top: auto;
  border-bottom: none;
}
@media screen and (max-width: 719px) {
  body.hong4 .header-top {
    height: 50px;
    padding: 0px 16px 0 12px;
  }
}
body.hong4 .header.default .header-list li {
  color: var(--h-color-fff);
}
body.hong4 .header.ver2 .header-top,
body.hong4 .header.default .header-top {
  background: var(--h-main-color);
}
body.hong4 .header + .bg {
  display: none;
  position: fixed;
  width: 100%;
  height: 100vh;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 20;
  cursor: pointer;
}
body.hong4 .top-banner {
  width: 100%;
  height: 65px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  color: #4e008e;
  font-weight: bold;
  background: url(/hong4/_img/header/top-banner.png) no-repeat center/cover;
}
body.hong4 .top-banner2 {
  width: 100%;
  height: 88px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  color: #ffffff;
  font-weight: bold;
  background: linear-gradient(50deg, #46149c, #4a75be);
}
body.hong4 .top-banner2 .img_coins {
  width: 56px;
}
body.hong4 .top-banner2 .i-close {
  position: absolute;
  width: 12px;
  height: 12px;
  right: 12px;
  top: 12px;
  cursor: pointer;
  background: url(/hong3/img/common/popup_close.png) no-repeat center/cover;
}
body.hong4 .top-banner2 > div {
  line-height: 24px;
  font-weight: normal;
}
body.hong4 .top-banner2 > div > b {
  font-weight: bold;
}
body.hong4 .top-banner2 > div .highlight {
  color: #fff01c;
}
@media screen and (max-width: 719px) {
  body.hong4 .top-banner {
    height: 50px;
  }
  body.hong4 .top-banner2 {
    position: fixed;
    bottom: 54px;
    left: 0;
    top: auto;
    z-index: 9;
    height: 82px;
    background: linear-gradient(118deg, #46149c, #4a75be);
    justify-content: flex-start;
    padding: 0 20px;
  }
  body.hong4 .top-banner2 .img_coins {
    width: 48px;
  }
  body.hong4 .top-banner2 > div {
    line-height: 22px;
  }
  body.hong4 .top-banner2 .i-close {
    width: 10px;
    height: 10px;
    right: 12px;
    top: 12px;
  }
}
body.hong4 .top-banner > span {
  font-size: 1rem;
}
body.hong4 .top-banner > p {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--h-color-fff);
  background: var(--h-main-color);
  font-size: 0.875rem;
  padding: 7px 12px;
  border-radius: 15px;
}
body.hong4 .request-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #da4841;
  color: var(--h-color-fff);
  height: 70px;
  font-size: 1.125rem;
  font-weight: bold;
}
body.hong4 .request-banner.user.pc {
  display: flex;
}
body.hong4 .request-banner.user.mobile {
  display: none;
}
body.hong4 .request-banner.user {
  background: #1ab8be;
}
body.hong4 .request-banner.user img {
  width: 24px;
  margin-right: 10px;
}
body.hong4 .header .i-info {
  width: 24px;
  height: 24px;
  margin-right: 16px;
}
body.hong4 .top-banner .i-arrow-right-w {
  width: 7px;
  height: 12px;
}
body.hong4 .css .request-banner .i-arrow-right-w {
  margin-left: 8px;
  width: 7px;
  height: 13px;
  margin-top: 2px;
}
@media screen and (max-width: 719px) {
  body.hong4 .request-banner {
    height: 50px;
  }
  body.hong4 .request-banner.user.pc {
    display: none;
  }
  body.hong4 .request-banner.user.mobile {
    display: flex;
  }
  body.hong4 .request-banner.user img {
    width: 20px;
    margin-right: 8px;
  }
  body.hong4 .header .i-info {
    width: 20px;
    height: 20px;
    margin-right: 12px;
  }
  body.hong4 .request-banner .i-arrow-right-w {
    margin-left: 6px;
    width: 5px;
    height: 9px;
    margin-top: 2px;
  }
}
@media screen and (max-width: 719px) {
  body.hong4 .top-banner > p {
    padding: 7px 9px;
    gap: 6px;
  }
  body.hong4 .top-banner .i-arrow-right-w {
    width: 5px;
    height: 9px;
  }
}
body.hong4 .top-banner .i-close {
  position: absolute;
  width: 14px;
  height: 14px;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}
body.hong4 .header .logo {
  cursor: pointer;
  background: none;
  width: auto;
  height: auto;
  margin-top: 0;
  color: inherit;
  text-indent: 0;
}
body.hong4 .header .logo .link-text {
  font-size: 1.375rem;
  padding-right: 12px;
  font-weight: bold;
}
@media screen and (max-width: 719px) {
  body.hong4 .header .logo > a {
    display: none;
  }
  body.hong4 .header .logo .link-text {
    font-size: 1.2857rem;
    padding-right: 8px;
    display: block;
  }
}
body.hong4 .header .logo > a > img {
  width: 44px;
  height: 38px;
}
body.hong4 .header.default .logo > a > img {
  width: 156px;
  height: 38px;
}
body.hong4 .header.default .logo > a > img.logo-ver1,
body.hong4 .header .logo > a > img.logo-ver2,
body.hong4 .header.ver2 .logo > a > img {
  display: none;
}
body.hong4 .header.ver2 .logo > a > img.logo-ver2,
body.hong4 .header.default .logo > a > img.logo-default {
  display: inline-block;
}
body.hong4 .header .i-question {
  display: none;
  width: 16px;
  height: 16px;
}
body.hong4 .header .header-top > a,
body.hong4 .header.ver2 .header-top > a {
  display: none;
}
@media screen and (max-width: 719px) {
  body.hong4 .header.ver2 .i-question {
    display: inline-block;
    cursor: pointer;
    margin: 0;
  }
}
body.hong4 .header .state {
  padding: 5px 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
body.hong4 .header .state h4 {
  font-size: 1.375rem;
  padding-right: 12px;
}
@media screen and (max-width: 719px) {
  body.hong4 .header .state h4 {
    font-size: 1.2857rem;
    padding-right: 8px;
  }
}
body.hong4 .header .state .i-arrow,
body.hong4 .header .state .i-arrow.on {
  width: 18px;
  height: 12px;
  display: inline-block;
  margin-top: 3px;
}
body.hong4 .header.ver2 .state .i-arrow {
  background: url(/hong4/_img/header/i-arrow-down-fff.png) no-repeat;
}
body.hong4 .header.ver2 .state .i-arrow.on {
  background: url(/hong4/_img/header/i-arrow-up-fff.png) no-repeat;
}
@media screen and (max-width: 719px) {
  body.hong4 .header .state .i-arrow,
  body.hong4 .header .state .i-arrow.on {
    width: 12px;
    height: 8px;
  }
}
body.hong4 .header .i-search {
  width: 16px;
  height: 16px;
  margin-left: 4px;
  margin-right: 8px;
}
body.hong4 .header.ver2 .i-search,
body.hong4 .header.default .i-search {
  background: url(/hong4/_img/header/i-search-fff.png) no-repeat;
}
body.hong4 .header-list {
  margin-top: 0;
}
body.hong4 .header-list:not(.snb) {
  margin-right: 8px;
}
@media screen and (max-width: 719px) {
  body.hong4 .header-list:not(.snb) {
    display: none;
  }
}
body.hong4 .header-list li {
  padding: 0 8px;
  position: relative;
}
body.hong4 .header-list li::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 12px;
  background: var(--h-color-e9e);
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
body.hong4 .header.ver2 .header-list li::before,
body.hong4 .header.default .header-list li::before {
  background: #865fdf;
}
body.hong4 .header.ver2 .header-list li::after,
body.hong4 .header.default .header-list li::after {
  content: none;
}
body.hong4 .header-list li:last-child::before {
  display: none;
}
body.hong4 .header-list li.active {
  color: var(--h-main-color);
  font-weight: bold;
}
body.hong4 .header-list.snb {
  background: #f7f7fa;
  border: 1px solid var(--h-color-e9e);
  border-radius: 4px;
  color: var(--h-color-222);
  display: flex;
}
body.hong4 .header-list.snb.category {
  background: var(--h-color-fff);
  border-color: #ececec;
}
body.hong4 .header-list.snb.category li {
  border-color: #ececec;
}
body.hong4 .header.all-menu .header-list.snb {
  background: var(--h-color-fff);
  border-color: #ececec;
}
@media screen and (max-width: 719px) {
  body.hong4 .header-list.snb.category {
    background: none;
  }
  body.hong4 .header-list.snb {
    background: none;
    border: none;
  }
  body.hong4 .header.ver2 .header-list.snb {
    display: none;
  }
  body.hong4 .header.all-menu .header-list.snb {
    background: none;
  }
}
body.hong4 .header.default .header-list.snb {
  border: none;
  background: none;
  border-radius: 0;
}
body.hong4 .header.default .header-list.snb li:first-child {
  border-radius: 4px 0 0 4px;
}
body.hong4 .header.default .header-list.snb li:last-child {
  border-radius: 0 4px 4px 0;
}
body.hong4 .header.default .header-list.snb li {
  background: var(--h-color-fff);
}
body.hong4 .header-list.snb li {
  padding: 0;
  border-right: 1px solid var(--h-color-e9e);
  font-size: 0.875rem;
  line-height: 1;
}
@media screen and (max-width: 719px) {
  body.hong4 .header-list.snb li {
    border-right: none;
  }
}
body.hong4 .header-list.snb li:last-child {
  border-right: none;
}
body.hong4 .header-list.snb li::before {
  display: none;
}
body.hong4 .header-list.snb li a {
  display: block;
  padding: 7px var(--h-padding-12);
  height: 100%;
}
@media screen and (max-width: 719px) {
  body.hong4 .header-list.snb li a {
    font-size: 1.0714rem;
    padding: 7px 10px;
    font-weight: bold;
  }
}
body.hong4 .header-list.snb .event-box {
  position: relative;
}
body.hong4 .header-list.snb .event-box.new > a::after {
  content: "";
  position: absolute;
  right: 7px;
  top: 9px;
  width: 4px;
  height: 4px;
  background: #ff0000;
  border-radius: 50%;
}
@media screen and (max-width: 719px) {
  body.hong4 .header-list.snb .event-box::after {
    content: "";
    display: inline-block;
    position: absolute;
    left: 100%;
    top: 50%;
    width: 1px;
    height: 11px;
    background: var(--h-color-ddd);
    transform: translateY(-50%);
  }
  body.hong4 .header-list.snb .event-box.new > a::after {
    content: "";
    position: absolute;
    right: 5px;
    top: 9px;
    width: 4px;
    height: 4px;
    background: #ff0000;
    border-radius: 50%;
  }
}
body.hong4 .header-list.snb .i-alarm {
  position: relative;
  width: 15px;
  height: 15px;
}
body.hong4 .header-list.snb .alarm-box.new .i-alarm::after {
  content: "";
  position: absolute;
  right: -4px;
  top: 2px;
  width: 4px;
  height: 4px;
  background: #ff0000;
  border-radius: 50%;
}
@media screen and (max-width: 719px) {
  body.hong4 .header-list.snb .i-alarm {
    background: url(/hong4/_img/header/i-alarm2.png) no-repeat;
  }
}
body.hong4 .header .aside {
  display: none;
  position: absolute;
  left: 20px;
  top: 100%;
  width: 400px;
  border-radius: 0 0 8px 8px;
  background: #f3f4f7;
  box-shadow: 0px -1px 1px -1px rgba(0, 0, 0, 0.24);
  color: var(--h-color-222);
}
@media screen and (max-width: 719px) {
  body.hong4 .header .aside {
    left: 0;
    width: 100%;
    border-radius: 0;
    box-shadow: 0px -1px 0px 0px #e3e7ed;
  }
}
body.hong4 .header .aside ul {
  padding: 20px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body.hong4 .header .aside ul li:not(.setting) {
  width: calc((100% - 8px) / 2);
  height: 50px;
  background: var(--h-color-fff);
  border-radius: 4px;
  border: 1px solid #e0e2e6;
}
@media screen and (max-width: 719px) {
  body.hong4 .header .aside ul li:not(.setting) {
    height: 40px;
  }
}
body.hong4 .header .aside ul li:not(.setting).active {
  background: var(--h-main-color);
  color: var(--h-color-fff);
}
body.hong4 .header .aside ul li:not(.setting).active h5 {
  font-weight: bold;
}
body.hong4 .header .aside ul li.setting {
  width: calc((100% - 8px) / 2);
  height: 50px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  font-size: 0.875rem;
}
@media screen and (max-width: 719px) {
  body.hong4 .header .aside ul li.setting {
    height: 40px;
    font-size: 0.928rem;
  }
}
body.hong4 .header .aside ul li:not(.setting) > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--h-padding-16);
  height: 100%;
}
@media screen and (max-width: 719px) {
  body.hong4 .header .aside ul li:not(.setting) > a {
    padding: 0 var(--h-padding-12);
  }
}
body.hong4 .header .aside ul li:not(.setting) > a > i:first-child {
  width: 24px;
  margin-right: 4px;
}
body.hong4 .header .aside ul li.active:not(.setting) > a > i:first-child,
body.hong4 .header .aside ul li.active:not(.setting) > a > i.i-menu-home.on {
  filter: brightness(10);
}
body.hong4 .header .aside ul li > a > h5 {
  flex: 1 0 auto;
}
@media screen and (max-width: 719px) {
  body.hong4 .header .aside ul li > a > h5 {
    font-size: 1rem;
  }
}
body.hong4 .header .aside ul li .i-menu-home,
body.hong4 .header .aside ul li .i-menu-home.on {
  width: 16px;
  height: 14px;
  background-size: 16px 14px !important;
}
body.hong4 .header .aside ul li .i-menu-logo {
  height: 22px;
  background-size: 24px 21px !important;
}
body.hong4 .header .aside ul li .i-menu-call {
  height: 16px;
  background-size: 16px 16px !important;
}
body.hong4 .header .aside ul li .i-menu-cafe {
  height: 20px;
  background-size: 18px 20px !important;
}
body.hong4 .header .aside ul li .i-menu-naver {
  height: 20px;
  background-size: 18px 18px !important;
}
body.hong4 .header .aside ul li .i-menu-chat {
  height: 16px;
  background-size: 15px 16px !important;
}
body.hong4 .header .aside ul li .i-menu-video {
  height: 12px;
  background-size: 15px 12px !important;
}
body.hong4 .header .aside ul li .i-menu-visit {
  height: 18px;
  background-size: 13px 18px !important;
}
body.hong4 .header .aside ul li .i-menu-item {
  height: 17px;
  background-size: 16px 17px !important;
}
body.hong4 .header .aside ul li .i-menu-class {
  height: 15px;
  background-size: 18px 15px !important;
}
body.hong4 .header .aside .i-menu-setting {
  width: 16px;
  height: 16px;
  background-size: 16px 16px;
  margin-right: 6px;
}
@media screen and (max-width: 719px) {
  body.hong4 .header .aside ul li .i-menu-home,
  body.hong4 .header .aside ul li .i-menu-home.on {
    width: 14px;
    height: 12px;
    background-size: 14px 12px !important;
  }
  body.hong4 .header .aside ul li:not(.setting) > a > i:first-child {
    width: 18px;
  }
  body.hong4 .header .aside ul li .i-menu-logo {
    height: 16px;
    background-size: 18px 16px !important;
  }
  body.hong4 .header .aside ul li .i-menu-call {
    height: 13px;
    background-size: 13px 13px !important;
  }
  body.hong4 .header .aside ul li .i-menu-cafe {
    height: 13px;
    background-size: 12px 13px !important;
  }
  body.hong4 .header .aside ul li .i-menu-naver {
    height: 13px;
    background-size: 13px 13px !important;
  }
  body.hong4 .header .aside ul li .i-menu-chat {
    height: 11px;
    background-size: 10px 11px !important;
  }
  body.hong4 .header .aside ul li .i-menu-video {
    height: 8px;
    background-size: 10px 8px !important;
  }
  body.hong4 .header .aside ul li .i-menu-visit {
    height: 14px;
    background-size: 10px 14px !important;
  }
  body.hong4 .header .aside ul li .i-menu-item {
    height: 12px;
    background-size: 11px 12px !important;
  }
  body.hong4 .header .aside ul li .i-menu-class {
    height: 11px;
    background-size: 13px 11px !important;
  }
  body.hong4 .header .aside .i-menu-setting {
    width: 14px;
    height: 14px;
    background-size: 14px 14px;
    margin-right: 4px;
  }
}
body.hong4 .nav {
  padding: 20px;
  border-bottom: 1px solid var(--h-color-e9e);
  height: 80px;
}
@media screen and (max-width: 719px) {
  body.hong4 .nav {
    display: none;
    padding: 0 16px;
    height: 50px;
    border-bottom: none;
  }
  body.hong4 .wrapper.profile .header {
    display: none;
  }
  body.hong4 .wrapper.profile .nav {
    display: flex;
    color: var(--h-color-fff);
    background: var(--h-main-color);
    font-size: 1.214rem;
  }
}
body.hong4 .nav > p {
  display: flex;
  align-items: center;
}
@media screen and (max-width: 719px) {
  body.hong4 .nav > p {
    font-weight: bold;
  }
}
body.hong4 .nav > p:last-child {
  cursor: pointer;
}
body.hong4 .nav .i-back {
  width: 34px;
  height: 28px;
  margin-right: 10px;
  margin-top: 1px;
}
body.hong4 .nav .nav-mobile {
  display: none;
  font-size: 1rem;
}
@media screen and (max-width: 719px) {
  body.hong4 .wrapper.profile .nav .nav-mobile,
  body.hong4 .wrapper.home-on .nav .nav-mobile {
    display: block;
  }
  body.hong4 .wrapper.profile .nav .i-back {
    width: 8px;
    height: 12px;
    background: url(/hong4/_img/header/i-arrow-left.png) no-repeat;
  }
}
body.hong4 .nav .i-service {
  width: 16px;
  height: 14px;
  margin-right: 8px;
  padding: 0;
}
body.hong4 .nav .search-btn {
  display: flex;
  align-items: center;
  font-size: 1rem;
  line-height: 18px;
  color: #6335b4;
  background: url(/hong4/img/common/search.png) no-repeat right top 1px/16px 16px;
  padding-right: 26px;
}
@media screen and (max-width: 719px) {
  body.hong4 .nav .search-btn {
    color: var(--h-color-fff);
    font-weight: normal;
    background: url(/hong4/img/common/search_w.png) no-repeat top 1px right/16px 16px;
  }
}
body.hong4 .list-img img {
  width: auto;
  height: 100%;
}
body.hong4 .detail-select-container {
  padding: 15px 28px 15px 20px;
  background: #f3f4f7;
  position: relative;
  border-top: 1px solid #e3e7ed;
  border-bottom: 1px solid #e3e7ed;
}
body.hong4 .detail-select-container.swiper-on::before {
  content: "";
  width: 31px;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  background: #f3f4f7;
  z-index: 2;
  filter: blur(3px);
}
body.hong4 .detail-select-container.swiper-on::after {
  content: "";
  width: 6px;
  height: 12px;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: url(/hong4/_img/main/i-arrow-full-right.png) no-repeat center/cover;
  z-index: 3;
}
@media screen and (max-width: 719px) {
  body.hong4 .detail-select-container {
    padding: 13px 25px 13px 11px;
  }
  body.hong4 .detail-select-container.swiper-on::after {
    width: 4px;
    height: 8px;
  }
}
body.hong4 .swiper-container.detail-select-swiper {
  overflow: hidden;
}
body.hong4 .detail-select-swiper li.swiper-slide {
  width: auto;
  padding: 12px 30px 14px 12px;
  border: 1px solid #e3e7ed;
  border-radius: 4px;
  background: url(/hong4/_img/main/i-list-arrow-down.png) no-repeat right 12px center/10px 6px var(--h-color-fff);
  margin-right: 8px;
  cursor: pointer;
}
@media screen and (max-width: 719px) {
  body.hong4 .detail-select-swiper li.swiper-slide {
    padding: 7.5px 23px 8.5px 10px;
    background-size: 7px 4px;
  }
}
body.hong4 .detail-select-swiper li.swiper-slide:last-child {
  margin-right: 0;
}
body.hong4 .detail-select-swiper li.swiper-slide.active {
  border-color: var(--h-color-222);
  font-weight: bold;
}
body.hong4 .detail-select-swiper li.swiper-slide.refresh {
  padding: 0;
  width: 44px;
  height: 44px;
  background: url(/hong4/_img/main/i-refresh.png) no-repeat center/20px 20px var(--h-color-fff);
  border-color: var(--h-color-222);
}
@media screen and (max-width: 719px) {
  body.hong4 .detail-select-swiper li.swiper-slide.refresh {
    width: 32px;
    height: 32px;
    background: url(/hong4/_img/main/i-refresh.png) no-repeat center/14px 14px var(--h-color-fff);
  }
}
body.hong4 .payback-wrap {
  padding: 20px !important;
  text-align: center;
}
body.hong4 .payback-wrap > .payback-img {
  width: 100%;
  border-radius: 8px;
}
body.hong4 .payback-wrap > .payback-coin-img {
  width: 136px;
  height: 184px;
  margin-top: 18px;
  margin-bottom: 24px;
}
body.hong4 .payback-wrap > .event100-img {
  width: 143px;
  height: 150px;
  margin-top: 18px;
  margin-bottom: 24px;
}
body.hong4 .payback-wrap > h1 {
  font-size: 2.25rem;
  font-weight: bold;
  margin-bottom: 20px;
}
body.hong4 .payback-wrap > p {
  font-size: 1.25rem;
  color: var(--h-color-888);
  margin-bottom: 13px;
}
@media screen and (max-width: 719px) {
  body.hong4 .payback-wrap {
    padding: 16px !important;
  }
  body.hong4 .payback-wrap > .payback-img {
    border-radius: 6px;
  }
  body.hong4 .payback-wrap > .payback-coin-img {
    width: 74px;
    height: 100px;
    margin-top: 13px;
    margin-bottom: 12px;
  }
  body.hong4 .payback-wrap > .event100-img {
    width: 90px;
    height: 90px;
    margin-top: 13px;
    margin-bottom: 12px;
  }
  body.hong4 .payback-wrap > h1 {
    font-size: 1.571rem;
    margin-bottom: 10px;
  }
  body.hong4 .payback-wrap > p {
    font-size: 1rem;
  }
}
body.hong4 .payback-null,
body.hong4 .item-list-null {
  background: var(--h-color-fff);
  text-align: center;
  padding: 80px 0 140px;
  color: var(--h-color-888);
}
body.hong4 .payback-null > .i-list-review-null,
body.hong4 .item-list-null > .i-list-review-null {
  width: 28px;
  height: 28px;
  margin-bottom: 10px;
}
body.hong4 .payback-null > p {
  font-size: 1.125rem;
  color: var(--h-color-888);
}
@media screen and (max-width: 719px) {
  body.hong4 .payback-null {
    padding: 70px 0;
  }
  body.hong4 .payback-null > .i-list-review-null {
    width: 24px;
    height: 24px;
  }
  body.hong4 .payback-null > p {
    font-size: 1rem;
  }
}
body.hong4 .best-wrap {
  width: 100%;
  background: #f5f5f5;
  padding: 36px 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #e3e7ed;
}
body.hong4 .best-wrap .i-best {
  width: 28px;
  height: 28px;
  margin-right: 10px;
}
body.hong4 .best-wrap > h1 {
  font-size: 1.5rem;
  margin-right: 14px;
  font-weight: bold;
}
body.hong4 .best-wrap > p {
  font-size: 0.875rem;
  padding: 7px 44px 9px 42px;
  border-radius: 18px;
  border: 1px solid var(--h-color-e9e);
  background: var(--h-color-fff);
}
@media screen and (max-width: 719px) {
  body.hong4 .best-wrap {
    padding: 20px 0 !important;
    flex-direction: column;
  }
  body.hong4 .best-wrap .i-best,
  body.hong4 .best-wrap > h1 {
    margin-right: 0;
  }
  body.hong4 .best-wrap .i-best {
    width: 20px;
    height: 20px;
    margin-bottom: 6px;
  }
  body.hong4 .best-wrap > h1 {
    font-size: 1.357rem;
    margin-bottom: 10px;
  }
  body.hong4 .best-wrap > p {
    font-size: 0.857rem;
    padding: 0;
    background: none;
    border: none;
  }
  body.hong4 .best-wrap > p::before {
    content: "[";
    margin-right: 2px;
  }
  body.hong4 .best-wrap > p::after {
    content: "]";
    margin-left: 2px;
  }
}
body.hong4 .footer-list li {
  padding: 0 var(--h-padding-12);
  position: relative;
}
body.hong4 .footer-list li:first-child {
  padding-left: 0;
}
body.hong4 .footer-list li:last-child {
  padding-right: 0;
}
body.hong4 .footer-list li::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 12px;
  background: var(--h-color-ccc);
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
body.hong4 .footer-list li::after {
  content: none;
}
body.hong4 .footer-list li:last-child::before {
  display: none;
}
body.hong4 .footer-list .i-facebook {
  padding-left: 23px;
  background-size: 14px 14px;
  background-position: left center;
}
body.hong4 .footer-list .i-instagram {
  padding-left: 23px;
  background-size: 16px 16px;
  background-position: center left;
}
body.hong4 .footer-list .i-blog {
  padding-left: 48px;
  background-size: 42px 8px;
  background-position: center left;
}
body.hong4 .footer-top {
  padding: 0 20px;
  margin-top: 0 !important;
}
body.hong4 .footer-top_m {
  padding: 0 var(--h-padding-16);
}
body.hong4 .footer-top_m .i-arrow-t,
body.hong4 .footer-top_m .i-arrow-b {
  background-position: right center;
  background-size: 9px 5px;
}
body.hong4 .footer-top_m .i-arrow-t {
  padding-right: 13px;
}
body.hong4 .footer-top_m .i-arrow-b {
  padding-right: 18px;
}
body.hong4 .footer-center .footer-center_t {
  line-height: 24px;
  border-bottom: 1px solid #e5e4e9;
  padding-bottom: var(--h-padding-16);
}
@media (orientation: portrait) and (max-width: 719px) {
  body.hong4 .footer-center .footer-center_t {
    line-height: 18px;
    padding-bottom: var(--h-padding-12);
  }
}
body.hong4 .footer-center .footer-center_f {
  padding-top: var(--h-padding-16);
  color: #666666;
  line-height: 18px;
  font-size: 0.74rem;
  letter-spacing: -0.33px;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.hong4 .footer-center .footer-center_f {
    padding-top: var(--h-padding-12);
  }
}
body.hong4 .footer-center_m {
  flex-direction: column;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.hong4 .footer-center_m {
    padding: var(--h-padding-12) var(--h-padding-16);
  }
}
body.hong4 .footer-center .footer-bottom_m {
  padding-top: var(--h-padding-12);
}
@media screen and (max-width: 719px) {
  body.hong4 .footer-center .footer-bottom_m {
    padding-bottom: 52px;
  }
}
body.hong4 .footer-bottom_m a {
  position: relative;
  padding: 0 6px;
}
body.hong4 .footer-bottom_m a:first-child {
  padding-left: 0;
}
body.hong4 .footer-bottom_m a:last-child {
  padding-right: 0;
}
body.hong4 .footer-bottom_m a:first-child::after {
  display: inline-block;
  content: "·";
  position: absolute;
  right: -6px;
  padding: 0px 4px;
}
body.hong4 .menu-footer {
  display: flex;
  justify-content: center;
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 12;
}
body.hong4 .footer-fix {
  display: flex;
  width: 100%;
  height: 64px;
  top: initial;
  bottom: 0;
  z-index: 25;
  font-size: 0.786rem;
  border-top: 1px solid rgba(0, 0, 0, 0.1490196078);
  border-bottom: none;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(3px);
          backdrop-filter: blur(3px);
  padding: 0;
  position: static;
  padding: 0 10px;
}
@media screen and (max-width: 719px) {
  body.hong4 .footer-fix {
    height: 54px;
  }
}
body.hong4 .footer-fix ul,
body.hong4 .footer-fix ul li,
body.hong4 .footer-fix ul li:not(.footer-home) a {
  width: 100%;
  height: 100%;
}
body.hong4 .footer-fix ul li:not(.footer-home) a {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 60%;
  margin: 0 auto;
}
body.hong4 .footer-fix ul li h4 {
  font-size: 0.856rem;
}
@media screen and (max-width: 719px) {
  body.hong4 .footer-fix ul li h4 {
    font-size: 0.786rem;
  }
}
body.hong4 .footer-fix ul li:nth-child(1) img {
  width: 24px;
}
@media screen and (max-width: 719px) {
  body.hong4 .footer-fix ul li:nth-child(1) img {
    width: 18px;
  }
}
body.hong4 .footer-fix ul li:nth-child(2) img {
  width: 29px;
}
@media screen and (max-width: 719px) {
  body.hong4 .footer-fix ul li:nth-child(2) img {
    width: 22px;
  }
}
body.hong4 .footer-fix ul li:nth-child(4) img {
  width: 26px;
}
@media screen and (max-width: 719px) {
  body.hong4 .footer-fix ul li:nth-child(4) img {
    width: 20px;
  }
}
body.hong4 .footer-fix ul li:nth-child(5) img {
  width: 26px;
}
@media screen and (max-width: 719px) {
  body.hong4 .footer-fix ul li:nth-child(5) img {
    width: 20px;
  }
}
body.hong4 .footer-home {
  position: relative;
}
body.hong4 .footer-home .radius-border {
  width: 68px;
  height: 68px;
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translate(-50%);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.1490196078);
  clip: rect(0px, 60px, 20px, 0px);
}
@media screen and (max-width: 719px) {
  body.hong4 .footer-home .radius-border {
    width: 57px;
    height: 57px;
    clip: rect(0px, 60px, 10px, 0px);
  }
}
body.hong4 .footer-home > a {
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 68px;
  height: 68px;
  display: block;
  border-radius: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 719px) {
  body.hong4 .footer-home > a {
    width: 56px;
    height: 57px;
  }
}
body.hong4 .swiper-main-banner-container {
  position: relative;
}
body.hong4 .swiper-main-banner-container.category .swiper-slide {
  position: relative;
  overflow: hidden;
}
body.hong4 .swiper-main-banner-container.category .swiper-slide::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 50%;
  background: linear-gradient(rgba(34, 34, 34, 0), #000);
  opacity: 50%;
}
body.hong4 .swiper-main-banner-container.category .swiper-slide::after {
  content: "";
  position: absolute;
  left: 16px;
  top: 16px;
  border-radius: 4px;
  color: var(--h-color-fff);
  font-size: 16px;
  font-weight: bold;
  padding: 7px 11px 7px;
  white-space: pre;
  text-align: center;
  line-height: 19px;
  display: flex;
  align-items: center;
}
body.hong4 .swiper-main-banner-container.category .swiper-slide .text {
  position: absolute;
  left: 0;
  bottom: 20px;
  width: 100%;
  color: var(--h-color-fff);
  padding: 0 16px;
  display: flex;
  justify-content: space-between;
  font-size: 22px;
}
body.hong4 .swiper-main-banner-container.category .swiper-slide .text .locate {
  display: flex;
  gap: 8px;
  align-items: center;
}
body.hong4 .swiper-main-banner-container.category .swiper-slide .text .locate img {
  width: 16px;
  height: 19px;
}
body.hong4 .swiper-main-banner-container.category .swiper-slide .text .locate img.title-class {
  width: 21px;
  height: 18px;
}
body.hong4 .swiper-main-banner-container.category .swiper-slide .text .name span {
  font-weight: bold;
}
@media screen and (max-width: 719px) {
  body.hong4 .swiper-main-banner-container.category {
    padding-left: 10px;
  }
  body.hong4 .swiper-main-banner-container.category .swiper-slide::after {
    font-size: 12px;
    padding: 6px 8px 6px;
    line-height: 14px;
    left: 8px;
    top: 8px;
  }
  body.hong4 .swiper-main-banner-container.category .swiper-slide .text {
    bottom: 12px;
    padding: 0 10px;
    font-size: 14px;
  }
  body.hong4 .swiper-main-banner-container.category .swiper-slide .text .locate img {
    width: 10px;
    height: 12px;
  }
  body.hong4 .swiper-main-banner-container.category .swiper-slide .text .locate img.title-class {
    width: 15px;
    height: 13px;
  }
}
body.hong4 .swiper-main-banner-container.category.goods-service .locate {
  display: none;
}
body.hong4 .swiper-main-banner-container.category.goods-service .text {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  line-height: 23px;
}
@media screen and (max-width: 719px) {
  body.hong4 .swiper-main-banner-container.category.goods-service .text {
    line-height: 15px;
  }
}
body.hong4 .swiper-main-banner {
  overflow: hidden;
}
body.hong4 .swiper-main-banner .swiper-slide {
  max-width: 84.052%;
  align-items: center;
  border-radius: 8px;
  overflow: hidden;
}
body.hong4 .swiper-main-banner {
  position: relative;
}
body.hong4 .swiper-main-banner .swiper-button-next {
  right: 6px;
}
body.hong4 .swiper-main-banner .swiper-button-prev {
  left: 6px;
}
body.hong4 .swiper-main-banner .swiper-button-next,
body.hong4 .swiper-main-banner .swiper-button-prev {
  top: 50%;
  z-index: 6;
}
body.hong4 .swiper-main-banner .swiper-button-next::after,
body.hong4 .swiper-main-banner .swiper-button-prev::after {
  height: 18px;
  background-size: auto 18px;
}
@media screen and (max-width: 719px) {
  body.hong4 .swiper-main-banner .swiper-slide {
    max-width: calc(100% - 40px);
    align-items: center;
    border-radius: 8px;
    overflow: hidden;
  }
  body.hong4 .swiper-main-banner .swiper-button-next,
  body.hong4 .swiper-main-banner .swiper-button-prev {
    display: none;
  }
}
body.hong4 .swiper-main-banner .swiper-slide > a {
  display: block;
  width: 100%;
}
body.hong4 .swiper-main-banner .swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
body.hong4 .swiper-main-banner-container .swiper-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  position: static;
  left: auto;
  bottom: auto;
  height: 8px;
  margin-top: 19px;
  margin-bottom: 19px;
}
body.hong4 .swiper-main-banner-container .swiper-pagination .swiper-pagination-bullet {
  margin: 0 5px !important;
  width: 6px;
  height: 6px;
  background: #ddd;
  opacity: 1;
  transition: all 0.5s;
}
@media screen and (max-width: 719px) {
  body.hong4 .swiper-main-banner-container .swiper-pagination {
    position: static;
    left: auto;
    bottom: auto;
    height: 6px;
    margin-top: 13px;
    margin-bottom: 13px;
  }
  body.hong4 .swiper-main-banner-container .swiper-pagination .swiper-pagination-bullet {
    width: 4px;
    height: 4px;
    margin: 0 4px !important;
  }
}
body.hong4 .swiper-main-banner-container .swiper-pagination .swiper-pagination-bullet-active {
  width: 8px;
  height: 8px;
  background: var(--h-list-btn-color);
}
@media screen and (max-width: 719px) {
  body.hong4 .swiper-main-banner-container .swiper-pagination .swiper-pagination-bullet-active {
    width: 6px;
    height: 6px;
  }
}
body.hong4 .common-banner-container {
  padding: 30px;
  position: relative;
}
body.hong4 .common-banner-container > img {
  width: 100%;
  border-radius: 8px;
}
body.hong4 .common-banner-text {
  position: absolute;
  left: 62px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--h-color-fff);
  font-size: 1.375rem;
  line-height: 35px;
}
body.hong4 .common-banner-text > h3 {
  color: #feb02a;
  font-size: 1.75rem;
  font-weight: bold;
  margin-bottom: 5px;
}
@media screen and (max-width: 719px) {
  body.hong4 .common-banner-container {
    padding: 16px;
  }
  body.hong4 .common-banner-text {
    left: 36px;
    line-height: 18px;
    font-size: 1rem;
  }
  body.hong4 .common-banner-text > h3 {
    font-size: 1.1428rem;
    margin-bottom: 7px;
  }
}
body.hong4 .location-wrap {
  width: 100%;
  padding: 0 160px 77px;
}
body.hong4 .location-mobile-header {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 50px;
  line-height: 50px;
  color: var(--h-color-fff);
  padding: 0 16px;
  background: var(--h-main-color);
  font-size: 1.214rem;
  font-weight: bold;
  justify-content: space-between;
  align-items: center;
}
body.hong4 .location-mobile-header > .i-location-exit {
  width: 14px;
  height: 14px;
  cursor: pointer;
}
@media screen and (max-width: 719px) {
  body.hong4 .location-wrap {
    padding: 50px 0;
  }
  body.hong4 .location-mobile-header {
    display: flex;
  }
}
body.hong4 .location-container {
  width: 100%;
  border-right: 1px solid var(--h-color-e9e);
  border-left: 1px solid var(--h-color-e9e);
  padding: 20px 16px;
  min-height: calc(100vh - 228px);
}
@media screen and (max-width: 719px) {
  body.hong4 .location-container {
    font-size: 1rem;
  }
}
body.hong4 .location-inner {
  width: 100%;
  display: flex;
}
body.hong4 .location-tab-wrap {
  background: #f5f5f5;
  width: 120px;
}
body.hong4 .location-tab-wrap > li {
  font-weight: bold;
  height: 50px;
  line-height: 50px;
  padding: 0 10px 0 16px;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
}
body.hong4 .location-tab-wrap > li > span {
  font-size: 0.75rem;
  font-weight: normal;
  pointer-events: none;
  margin-top: 2px;
}
body.hong4 .location-detail-wrap {
  width: calc(100% - 100px);
  position: relative;
}
body.hong4 .location-detail-wrap::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-top: 1px solid var(--h-color-e9e);
  border-right: 1px solid var(--h-color-e9e);
  border-bottom: 1px solid var(--h-color-e9e);
}
@media screen and (max-width: 719px) {
  body.hong4 .location-detail-wrap::before {
    border-right: none;
  }
}
body.hong4 .location-tab-container {
  display: none;
  height: 100%;
}
body.hong4 .location-tab-container > li {
  height: 50px;
  line-height: 50px;
  padding: 0 12px;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
}
body.hong4 .location-tab-container > li:not(:first-child)::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  background: var(--h-color-e9e);
}
body.hong4 .location-tab-wrap > li.active,
body.hong4 .location-tab-container > li.active {
  background: #1ab8be;
  font-weight: bold;
  color: var(--h-color-fff);
}
body.hong4 .location-tab-container > li.active::before,
body.hong4 .location-tab-container > li.active + li::before {
  display: none;
}
body.hong4 .location-tab-container > li > span {
  font-size: 0.75rem;
  pointer-events: none;
  margin-top: 2px;
}
@media screen and (max-width: 719px) {
  body.hong4 .location-tab-container > li > span {
    margin-left: 4px;
  }
}
body.hong4 .location-refresh {
  font-size: 0.875rem;
  width: 100%;
  border: 1px solid var(--h-color-e9e);
  border-radius: 4px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  margin-top: 32px;
}
body.hong4 .location-refresh > .i-popup-refresh {
  width: 14px;
  height: 14px;
}
body.hong4 .location-submit-box {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 77px;
  line-height: 77px;
  padding: 10px 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  background: var(--h-color-fff);
  max-width: 718px;
}
body.hong4 .location-submit-box > button {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--h-main-color);
  color: var(--h-color-fff);
  font-weight: bold;
  border-radius: 4px;
  font-size: 1.25rem;
  cursor: pointer;
}
@media screen and (max-width: 719px) {
  body.hong4 .location-refresh > .i-popup-refresh {
    width: 10px;
    height: 10px;
  }
  body.hong4 .location-submit-box {
    height: 70px;
    line-height: 70px;
    padding: 10px;
  }
  body.hong4 .location-submit-box > button {
    font-size: 1rem;
  }
}
body.hong4 .filter-list-container {
  width: 100%;
  height: 48px;
  line-height: 48px;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  background: #f3f4f7;
  border-top: 1px solid #e3e7ed;
  border-bottom: 1px solid #e3e7ed;
}
body.hong4 .filter-list-container.flex-end {
  justify-content: flex-end;
}
body.hong4 .filter-list-container > div {
  display: flex;
  font-size: 0.875rem;
  align-items: center;
  cursor: pointer;
}
body.hong4 .filter-list-container .filter-class-box,
body.hong4 .filter-list-container .filter-location-box {
  padding-right: 20px;
  background: url(/hong4/_img/main/i-arrow-bot-locate.svg) no-repeat right 51%/12px 7px;
}
body.hong4 .filter-list-container .filter-location-box .i-location {
  width: 13px;
  height: 15px;
  margin-right: 6px;
  padding: 0;
}
@media screen and (max-width: 719px) {
  body.hong4 .filter-list-container > div {
    font-size: 1rem;
  }
  body.hong4 .filter-list-container .filter-class-box,
  body.hong4 .filter-list-container .filter-location-box {
    font-size: 1rem;
  }
  body.hong4 .filter-list-container .filter-location-box .i-location {
    width: 11px;
    height: 13px;
  }
  body.hong4 .filter-list-container .filter-class-box,
  body.hong4 .filter-list-container .filter-location-box {
    background-size: 10px 7px;
  }
}
body.hong4 .filter-list-container .filter-select-box .i-filter {
  width: 14px;
  height: 12px;
  margin-right: 10px;
}
@media screen and (max-width: 719px) {
  body.hong4 .filter-list-container .filter-select-box .i-filter {
    margin-right: 6px;
  }
}
body.hong4 .category-button-section {
  width: 100%;
  padding: 18px 20px 15px;
  background: #f3f4f7;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  margin-bottom: 20px;
  background: linear-gradient(90deg, #eddbff, #dfffe8);
}
body.hong4 .category-button-container {
  width: 100%;
  gap: 10px;
  margin-bottom: 16px;
  justify-content: space-between;
}
body.hong4 .category-button-container > li {
  width: calc((100% - 40px) / 5);
  position: relative;
}
body.hong4 .category-button-container > li::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background: #4b5984;
  border-radius: 0 0 6px 6px;
  opacity: 0.06;
}
@media screen and (max-width: 719px) {
  body.hong4 .category-button-section {
    margin-bottom: 16px;
  }
  body.hong4 .category-button-container {
    gap: 6px;
    margin-bottom: 12px;
  }
  body.hong4 .category-button-container > li {
    width: calc((100% - 16px) / 5);
    position: relative;
  }
  body.hong4 .category-button-container > li::after {
    height: 6px;
  }
}
body.hong4 .category-button-container > li > a {
  display: flex;
  align-items: center;
  background: var(--h-color-fff);
  border-radius: 6px;
  height: 64px;
  padding-left: 20px;
  position: relative;
  padding-bottom: 5px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}
body.hong4 .category-button-container > li > a > img.all {
  width: 36px;
  height: 30px;
}
body.hong4 .category-button-container > li > a > img.tarot {
  width: 34px;
  height: 31px;
}
body.hong4 .category-button-container > li > a > img.saju {
  width: 32px;
  height: 32px;
}
body.hong4 .category-button-container > li > a > img.divination {
  width: 30px;
  height: 30px;
}
body.hong4 .category-button-container > li > a > img.review {
  width: 32px;
  height: 33px;
}
body.hong4 .category-button-container > li > a > h5 {
  font-weight: bold;
  margin-left: 14px;
  font-size: 1.25rem;
}
@media screen and (max-width: 719px) {
  body.hong4 .category-button-section {
    padding: 12px 12px 9px;
  }
  body.hong4 .category-button-container > li > a {
    height: 72px;
    flex-direction: column;
    justify-content: flex-end;
    padding-left: 0;
  }
  body.hong4 .category-button-container > li > a > h5 {
    margin-left: 0;
    font-size: 1.0714rem;
    margin-top: 8px;
    margin-bottom: 12px;
  }
  body.hong4 .category-button-container > li > a > img.all {
    width: 24px;
    height: 20px;
  }
  body.hong4 .category-button-container > li > a > img.tarot {
    width: 22px;
    height: 20px;
  }
  body.hong4 .category-button-container > li > a > img.saju {
    width: 21px;
    height: 21px;
  }
  body.hong4 .category-button-container > li > a > img.divination {
    width: 21px;
    height: 21px;
  }
  body.hong4 .category-button-container > li > a > img.review {
    width: 22px;
    height: 23px;
  }
}
body.hong4 .tab-container.naver,
body.hong4 .tab-container.shop,
body.hong4 .tab-container.goods-service,
body.hong4 .tab-container.goods-class {
  display: block !important;
}
body.hong4 .tab-container.goods-service.img-type .list-item-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  background: var(--h-color-fff);
  padding: 16px 20px;
}
body.hong4 .tab-container.goods-service.img-type .list-item-container .category-service-li {
  border: none;
  padding: 0;
  margin-bottom: 24px;
}
body.hong4 .tab-container.goods-service.img-type .list-item-container .category-service-li a {
  display: block;
  width: 100%;
}
body.hong4 .tab-container.goods-service.img-type .list-item-container .category-service-li a h1 {
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 12px;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
body.hong4 .tab-container.goods-service.img-type .list-item-container .category-service-li a .thumbnail {
  width: 100%;
  max-width: 332px;
  max-height: 212px;
  margin-bottom: 8px;
  border-radius: 3px;
  overflow: hidden;
}
body.hong4 .tab-container.goods-service.img-type .list-item-container .category-service-li a .thumbnail img {
  width: 100%;
  height: 100%;
}
body.hong4 .tab-container.goods-service.img-type .list-item-container .category-service-li a .text p {
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 4px;
}
body.hong4 .tab-container.goods-service.img-type .list-item-container .category-service-li a .text .info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
body.hong4 .tab-container.goods-service.img-type .list-item-container .category-service-li a .text .info .assess {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
}
body.hong4 .tab-container.goods-service.img-type .list-item-container .category-service-li a .text .info .won {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}
body.hong4 .tab-container.goods-service.img-type .list-item-container .category-service-li a .text .info .won img {
  width: 14px;
  height: 14px;
}
body.hong4 .tab-container.goods-service.img-type .list-item-container .category-service-li a .text .info .review {
  display: flex;
  align-items: center;
  gap: 4px;
}
body.hong4 .tab-container.goods-service.img-type .list-item-container .category-service-li a .text .info .review img {
  width: 14px;
  height: 14px;
}
body.hong4 .tab-container.goods-service.img-type .list-item-container .category-service-li a .text .info .review .f-666 {
  font-weight: normal;
}
body.hong4 .tab-container.goods-service.img-type .list-item-container .category-service-li a .text .info .grade {
  display: flex;
  align-items: center;
  gap: 4px;
}
body.hong4 .tab-container.goods-service.img-type .list-item-container .category-service-li a .text .info .grade img {
  width: 13px;
  height: 13px;
}
body.hong4 .tab-container.goods-service.img-type .list-item-container .category-service-li a .text .info .grade .f-666 {
  font-weight: normal;
}
body.hong4 .tab-container.goods-service.img-type .list-item-container .list-item-line {
  display: none;
}
@media screen and (max-width: 719px) {
  body.hong4 .tab-container.goods-service.img-type .list-item-container {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 14px 0;
  }
  body.hong4 .tab-container.goods-service.img-type .list-item-container .category-service-li {
    margin-bottom: 0;
    padding: 0 16px;
  }
  body.hong4 .tab-container.goods-service.img-type .list-item-container .category-service-li a h1 {
    font-size: 15px;
    line-height: 20px;
    margin-bottom: 10px;
    -webkit-line-clamp: 2;
  }
  body.hong4 .tab-container.goods-service.img-type .list-item-container .category-service-li a .thumbnail {
    width: 100%;
    max-width: inherit;
    max-height: inherit;
  }
  body.hong4 .tab-container.goods-service.img-type .list-item-container .category-service-li a .text p {
    margin-bottom: 8px;
  }
  body.hong4 .tab-container.goods-service.img-type .list-item-container .list-item-line {
    display: block;
    width: 100%;
    height: 8px;
    background: #f5f5f5;
    border-top: 1px solid #e9e9e9;
    border-bottom: 1px solid #e9e9e9;
    margin: 14px 0;
  }
}
body.hong4 .category-button-section.shop {
  position: relative;
  background: none;
  border-bottom: none;
  padding: 0;
  padding-bottom: 24px;
  margin-bottom: 1px;
}
@media screen and (max-width: 719px) {
  body.hong4 .category-button-section.shop {
    padding-bottom: 18px;
  }
}
body.hong4 .category-button-section.shop.fold .clip ~ li {
  display: none;
}
body.hong4 .category-button-section.shop .more-button {
  position: absolute;
  right: 20px;
  bottom: 2px;
  width: 128px;
  height: 23px;
}
body.hong4 .category-button-section.shop .more-button .more-button-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: rotateX(180deg);
  cursor: pointer;
  z-index: 3;
}
body.hong4 .category-button-section.shop .more-button .more-button-bg::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: #f3f4f7;
  border: 1px solid #e3e7ed;
  border-bottom: none;
  border-radius: 7px 7px 0 0;
  transform: perspective(7px) rotateX(2deg);
  background: linear-gradient(38deg, #eddbff -62%, #dfffe8 42%);
}
body.hong4 .category-button-section.shop .more-button .text {
  position: absolute;
  left: 50%;
  top: -4px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  cursor: pointer;
  justify-content: center;
  width: 100%;
  z-index: 6;
}
body.hong4 .category-button-section.shop .more-button .text span {
  margin-right: 8px;
}
body.hong4 .category-button-section.shop .more-button .text span.fold {
  display: none;
}
body.hong4 .category-button-section.shop .more-button .text img {
  width: 12px;
  height: 7px;
}
body.hong4 .category-button-section.shop .more-button .text img.fold {
  display: none;
}
@media screen and (max-width: 719px) {
  body.hong4 .category-button-section.shop .more-button .text span {
    font-size: 11px;
  }
  body.hong4 .category-button-section.shop .more-button .text img {
    width: 7px;
    height: 4px;
  }
}
@media screen and (max-width: 719px) {
  body.hong4 .category-button-section.shop .more-button {
    width: 68px;
    height: 18px;
    bottom: 1px;
  }
  body.hong4 .category-button-section.shop .more-button .more-button-bg::before {
    transform: perspective(7px) rotateX(3deg);
  }
}
body.hong4 .category-button-section.shop .category-button-container {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 0;
  padding: 20px 16px 24px;
  background: #f3f4f7;
  border-bottom: 1px solid #e3e7ed;
  background: linear-gradient(90deg, #eddbff, #dfffe8);
}
body.hong4 .category-button-section.shop .category-button-container li {
  width: 100%;
}
body.hong4 .category-button-section.shop .category-button-container li a {
  height: 96px;
  padding-left: 0;
  flex-direction: column;
  justify-content: flex-end;
}
body.hong4 .category-button-section.shop .category-button-container li a img.all {
  width: 38px;
  height: 32px;
}
body.hong4 .category-button-section.shop .category-button-container li a img.tarot {
  width: 36px;
  height: 32px;
}
body.hong4 .category-button-section.shop .category-button-container li a img.saju {
  width: 32px;
  height: 32px;
}
body.hong4 .category-button-section.shop .category-button-container li a img.divination {
  width: 32px;
  height: 32px;
}
body.hong4 .category-button-section.shop .category-button-container li a img.review {
  width: 34px;
  height: 36px;
}
@media screen and (max-width: 719px) {
  body.hong4 .category-button-section.shop .category-button-container li a img.all {
    width: 24px;
    height: 20px;
  }
  body.hong4 .category-button-section.shop .category-button-container li a img.tarot {
    width: 22px;
    height: 20px;
  }
  body.hong4 .category-button-section.shop .category-button-container li a img.saju {
    width: 21px;
    height: 21px;
    margin-left: 1px;
  }
  body.hong4 .category-button-section.shop .category-button-container li a img.divination {
    width: 21px;
    height: 21px;
  }
  body.hong4 .category-button-section.shop .category-button-container li a img.review {
    width: 22px;
    height: 23px;
  }
}
body.hong4 .category-button-section.shop .category-button-container li .region {
  height: 50px;
}
@media screen and (max-width: 719px) {
  body.hong4 .category-button-section.shop .category-button-container li a {
    height: 72px;
  }
  body.hong4 .category-button-section.shop .category-button-container li .region {
    height: 40px;
  }
}
body.hong4 .category-button-section.shop .category-button-container .cafe {
  grid-column: 1/3;
}
body.hong4 .category-button-section.shop .category-button-container .cafe a {
  height: 50px;
  flex-direction: row;
  gap: 8px;
  justify-content: center;
}
body.hong4 .category-button-section.shop .category-button-container .cafe a img {
  width: 31px;
  height: 21px;
}
body.hong4 .category-button-section.shop .category-button-container .cafe a img span {
  font-size: 16px;
  color: var(--h-color-444);
}
@media screen and (max-width: 719px) {
  body.hong4 .category-button-section.shop .category-button-container .cafe a img {
    width: 24px;
    height: 16px;
    margin-top: 4px;
  }
}
body.hong4 .category-button-section.shop .category-button-container .cafe a h5 {
  margin-bottom: 0;
}
@media screen and (max-width: 719px) {
  body.hong4 .category-button-section.shop .category-button-container .cafe a {
    height: 40px;
    gap: 6px;
  }
}
@media screen and (max-width: 719px) {
  body.hong4 .category-button-section.shop .category-button-container {
    gap: 6px;
    padding: 12px 12px 14px;
  }
}
body.hong4 .category-button-section.shop h5 {
  font-size: 18px;
  margin-left: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 0;
  margin-bottom: 14px;
}
body.hong4 .category-button-section.shop h5 span {
  font-weight: normal;
  font-size: 16px;
}
@media screen and (max-width: 719px) {
  body.hong4 .category-button-section.shop h5 {
    gap: 2px;
    font-size: 1.0714rem;
    margin-bottom: 10px;
  }
  body.hong4 .category-button-section.shop h5 span {
    font-size: 14px;
  }
}
body.hong4 .category-button-section.shop img + h5 {
  margin-top: 10px;
  margin-bottom: 15px;
}
@media screen and (max-width: 719px) {
  body.hong4 .category-button-section.shop img + h5 {
    margin-top: 8px;
    margin-bottom: 12px;
  }
}
body.hong4 .category-button-section.goods-service {
  padding: 20px 16px 24px;
}
body.hong4 .category-button-section.goods-service .category-button-container {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 0;
}
@media screen and (max-width: 719px) {
  body.hong4 .category-button-section.goods-service .category-button-container {
    gap: 6px;
  }
}
body.hong4 .category-button-section.goods-service .category-button-container li {
  width: 100%;
}
body.hong4 .category-button-section.goods-service .category-button-container li a {
  height: 96px;
  padding-left: 0;
  flex-direction: column;
  justify-content: flex-end;
}
body.hong4 .category-button-section.goods-service .category-button-container li a img.all {
  width: 38px;
  height: 32px;
}
body.hong4 .category-button-section.goods-service .category-button-container li a img.category-candle {
  width: 27px;
  height: 34px;
}
body.hong4 .category-button-section.goods-service .category-button-container li a img.category-amulet {
  width: 29px;
  height: 34px;
}
body.hong4 .category-button-section.goods-service .category-button-container li a img.category-pray {
  width: 34px;
  height: 32px;
}
body.hong4 .category-button-section.goods-service .category-button-container li a img.category-star {
  width: 32px;
  height: 32px;
}
body.hong4 .category-button-section.goods-service .category-button-container li a img.category-naming {
  width: 26px;
  height: 32px;
}
body.hong4 .category-button-section.goods-service .category-button-container li a img.category-changing {
  width: 35px;
  height: 34px;
}
body.hong4 .category-button-section.goods-service .category-button-container li a img.category-date {
  width: 32px;
  height: 29px;
  margin-bottom: 3px;
}
body.hong4 .category-button-section.goods-service .category-button-container li a img.category-geo {
  width: 32px;
  height: 32px;
}
body.hong4 .category-button-section.goods-service .category-button-container li a img.review {
  width: 34px;
  height: 36px;
}
@media screen and (max-width: 719px) {
  body.hong4 .category-button-section.goods-service .category-button-container li a img.all {
    width: 24px;
    height: 20px;
  }
  body.hong4 .category-button-section.goods-service .category-button-container li a img.category-candle {
    width: 18px;
    height: 23px;
  }
  body.hong4 .category-button-section.goods-service .category-button-container li a img.category-amulet {
    width: 19px;
    height: 22px;
  }
  body.hong4 .category-button-section.goods-service .category-button-container li a img.category-pray {
    width: 22px;
    height: 21px;
  }
  body.hong4 .category-button-section.goods-service .category-button-container li a img.category-star {
    width: 23px;
    height: 23px;
  }
  body.hong4 .category-button-section.goods-service .category-button-container li a img.category-naming {
    width: 18px;
    height: 22px;
  }
  body.hong4 .category-button-section.goods-service .category-button-container li a img.category-changing {
    width: 23px;
    height: 22px;
  }
  body.hong4 .category-button-section.goods-service .category-button-container li a img.category-date {
    width: 21px;
    height: 19px;
  }
  body.hong4 .category-button-section.goods-service .category-button-container li a img.category-geo {
    width: 23px;
    height: 23px;
  }
  body.hong4 .category-button-section.goods-service .category-button-container li a img.review {
    width: 22px;
    height: 23px;
  }
}
@media screen and (max-width: 719px) {
  body.hong4 .category-button-section.goods-service .category-button-container li a .category-naming + h5 {
    font-size: 13px;
  }
}
@media screen and (max-width: 719px) {
  body.hong4 .category-button-section.goods-service .category-button-container li a {
    height: 72px;
  }
}
body.hong4 .category-button-section.goods-service h5 {
  font-size: 18px;
  margin-left: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  margin-bottom: 15px;
}
@media screen and (max-width: 719px) {
  body.hong4 .category-button-section.goods-service h5 {
    gap: 2px;
    font-size: 1.0714rem;
    margin-top: 8px;
    margin-bottom: 12px;
  }
  body.hong4 .category-button-section.goods-service h5 span {
    font-size: 14px;
  }
}
@media screen and (max-width: 719px) {
  body.hong4 .category-button-section.goods-service {
    padding: 12px 12px 14px;
  }
}
body.hong4 .category-button-section.goods-class {
  padding: 20px 16px 24px;
}
body.hong4 .category-button-section.goods-class .category-button-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 0;
}
@media screen and (max-width: 719px) {
  body.hong4 .category-button-section.goods-class .category-button-container {
    gap: 6px;
  }
}
body.hong4 .category-button-section.goods-class .category-button-container li {
  width: 100%;
}
body.hong4 .category-button-section.goods-class .category-button-container li a {
  height: 96px;
  padding-left: 0;
  flex-direction: column;
  justify-content: flex-end;
}
body.hong4 .category-button-section.goods-class .category-button-container li a img.all {
  width: 38px;
  height: 32px;
}
body.hong4 .category-button-section.goods-class .category-button-container li a img.category-call-class {
  width: 32px;
  height: 29px;
}
body.hong4 .category-button-section.goods-class .category-button-container li a img.category-visit-class {
  width: 43px;
  height: 30px;
}
body.hong4 .category-button-section.goods-class .category-button-container li a img.review {
  width: 34px;
  height: 36px;
}
@media screen and (max-width: 719px) {
  body.hong4 .category-button-section.goods-class .category-button-container li a img.all {
    width: 24px;
    height: 20px;
  }
  body.hong4 .category-button-section.goods-class .category-button-container li a img.category-call-class {
    width: 20px;
    height: 18px;
  }
  body.hong4 .category-button-section.goods-class .category-button-container li a img.category-visit-class {
    width: 29px;
    height: 19.5px;
  }
  body.hong4 .category-button-section.goods-class .category-button-container li a img.review {
    width: 22px;
    height: 23px;
  }
}
@media screen and (max-width: 719px) {
  body.hong4 .category-button-section.goods-class .category-button-container li a {
    height: 72px;
  }
}
body.hong4 .category-button-section.goods-class h5 {
  font-size: 18px;
  margin-left: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  margin-bottom: 15px;
}
@media screen and (max-width: 719px) {
  body.hong4 .category-button-section.goods-class h5 {
    gap: 2px;
    font-size: 1.0714rem;
    margin-top: 8px;
    margin-bottom: 12px;
  }
  body.hong4 .category-button-section.goods-class h5 span {
    font-size: 14px;
  }
}
@media screen and (max-width: 719px) {
  body.hong4 .category-button-section.goods-class {
    padding: 12px 12px 14px;
  }
}
body.hong4 .category-button-section.goods-cafe {
  padding: 20px 16px 24px;
}
body.hong4 .category-button-section.goods-cafe .category-button-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 0;
}
@media screen and (max-width: 719px) {
  body.hong4 .category-button-section.goods-cafe .category-button-container {
    gap: 6px;
  }
}
body.hong4 .category-button-section.goods-cafe .category-button-container li {
  width: 100%;
}
body.hong4 .category-button-section.goods-cafe .category-button-container li a {
  height: 96px;
  padding-left: 0;
  flex-direction: column;
  justify-content: flex-end;
}
body.hong4 .category-button-section.goods-cafe .category-button-container li a img.cafe-visit {
  width: 29px;
  height: 31px;
}
body.hong4 .category-button-section.goods-cafe .category-button-container li a img.category-cafe-class {
  width: 38px;
  height: 28px;
}
body.hong4 .category-button-section.goods-cafe .category-button-container li a img.category-cafe-notice {
  width: 30px;
  height: 29px;
}
body.hong4 .category-button-section.goods-cafe .category-button-container li a img.category-goods {
  width: 30px;
  height: 30px;
}
@media screen and (max-width: 719px) {
  body.hong4 .category-button-section.goods-cafe .category-button-container li a img.cafe-visit {
    width: 20px;
    height: 21px;
  }
  body.hong4 .category-button-section.goods-cafe .category-button-container li a img.category-cafe-class {
    width: 28px;
    height: 20px;
  }
  body.hong4 .category-button-section.goods-cafe .category-button-container li a img.category-cafe-notice {
    width: 20px;
    height: 19px;
  }
  body.hong4 .category-button-section.goods-cafe .category-button-container li a img.category-goods {
    width: 22px;
    height: 22px;
  }
}
@media screen and (max-width: 719px) {
  body.hong4 .category-button-section.goods-cafe .category-button-container li a {
    height: 72px;
  }
}
body.hong4 .category-button-section.goods-cafe h5 {
  font-size: 18px;
  margin-left: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  margin-bottom: 15px;
}
@media screen and (max-width: 719px) {
  body.hong4 .category-button-section.goods-cafe h5 {
    gap: 2px;
    font-size: 1.0714rem;
    margin-top: 8px;
    margin-bottom: 12px;
  }
  body.hong4 .category-button-section.goods-cafe h5 span {
    font-size: 14px;
  }
}
@media screen and (max-width: 719px) {
  body.hong4 .category-button-section.goods-cafe {
    padding: 12px 12px 14px;
  }
}
body.hong4 .common-sub-title {
  font-size: 22px;
  line-height: 33px;
  font-weight: bold;
  color: var(--h-color-222);
  padding: 0 20px;
  margin-bottom: 13px;
}
@media screen and (max-width: 719px) {
  body.hong4 .common-sub-title {
    font-size: 18px;
    margin-bottom: 11px;
    line-height: 27px;
    padding: 0 16px;
  }
}
body.hong4 .common-recommend {
  padding: 0 20px;
}
body.hong4 .common-recommend .common-sub-title {
  padding: 0;
}
body.hong4 .common-recommend .common-sub-title.recommend-sort-type {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
body.hong4 .common-recommend .common-sub-title.recommend-sort-type > .d-flex {
  gap: 8px;
}
body.hong4 .common-recommend .common-sub-title.recommend-sort-type > .d-flex img {
  width: 26px;
  height: 22px;
  cursor: pointer;
}
@media screen and (max-width: 719px) {
  body.hong4 .common-recommend .common-sub-title.recommend-sort-type > .d-flex {
    gap: 6px;
  }
  body.hong4 .common-recommend .common-sub-title.recommend-sort-type > .d-flex img {
    width: 24px;
    height: 20px;
  }
}
body.hong4 .common-recommend .common-recommend-swiper {
  padding-bottom: 20px;
  border-bottom: 1px solid #e9e9e9;
}
body.hong4 .common-recommend .common-recommend-swiper .swiper-wrapper .swiper-slide {
  padding: 3px 12px 5px;
  line-height: 24px;
  width: auto;
  font-size: 16px;
  color: var(--h-color-222);
  border-radius: 4px;
  border: 1px solid #e3e7ed;
  background: #f8f8f8;
  cursor: pointer;
  margin-right: 8px;
}
body.hong4 .common-recommend .common-recommend-swiper .swiper-wrapper .swiper-slide.active {
  background: var(--h-main-color);
  color: var(--h-color-fff);
  font-weight: bold;
}
body.hong4 .common-recommend .common-recommend-swiper .swiper-wrapper li.swiper-slide:last-of-type {
  margin-right: 0;
}
body.hong4 .common-recommend .common-recommend-swiper .swiper-wrapper li:not(.swiper-slide) {
  flex: 1 0 auto;
}
@media screen and (max-width: 719px) {
  body.hong4 .common-recommend .common-recommend-swiper .swiper-wrapper .swiper-slide {
    padding: 2px 10px 3px;
    line-height: 19px;
    border-radius: 2px;
    font-size: 13px;
  }
}
body.hong4 .common-recommend .common-recommend-swiper .swiper-wrapper.day li.swiper-slide:nth-of-type(8) {
  margin-right: 0;
}
@media screen and (max-width: 719px) {
  body.hong4 .common-recommend .common-recommend-swiper .swiper-wrapper.day .swiper-slide {
    margin-right: 4px;
    padding: 2px 0 3px;
    width: calc((100% - 28px) / 8);
    text-align: center;
  }
}
@media screen and (max-width: 719px) {
  body.hong4 .common-recommend .common-recommend-swiper {
    padding-bottom: 15px;
  }
}
@media screen and (max-width: 719px) {
  body.hong4 .common-recommend {
    padding: 0 16px;
  }
}
body.hong4 .refresh-more {
  padding: 12px 20px 24px;
  background: var(--h-color-fff);
}
body.hong4 .refresh-more .refresh-more-btn {
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  border: 1px solid var(--h-color-ddd);
  border-radius: 4px;
  cursor: pointer;
}
body.hong4 .refresh-more .refresh-more-btn h5 {
  font-weight: bold;
}
body.hong4 .refresh-more .refresh-more-btn img {
  width: 16px;
  height: 16px;
  margin-top: 1px;
}
body.hong4 .refresh-more .refresh-more-btn span {
  font-size: 12px;
  font-weight: normal;
}
body.hong4 .refresh-more .line {
  width: 100%;
  height: 1px;
  background: #e9e9e9;
  margin-top: 28px;
}
@media screen and (max-width: 719px) {
  body.hong4 .refresh-more {
    padding: 14px 16px 20px;
  }
  body.hong4 .refresh-more .refresh-more-btn {
    height: 38px;
  }
  body.hong4 .refresh-more .refresh-more-btn img {
    width: 14px;
    height: 14px;
  }
  body.hong4 .refresh-more .refresh-more-btn h5 {
    font-size: 13px;
  }
  body.hong4 .refresh-more .refresh-more-btn span {
    font-size: 10px;
  }
  body.hong4 .refresh-more .line {
    margin-top: 20px;
  }
}
body.hong4 .common-new .line {
  width: 100%;
  height: 1px;
  background: #e9e9e9;
  margin-top: 28px;
}
body.hong4 .common-new .common-new-swiper {
  padding: 0 20px;
}
body.hong4 .common-new .common-new-swiper .swiper-slide {
  width: auto;
  margin-right: 12px;
  width: 154px;
}
body.hong4 .common-new .common-new-swiper .swiper-slide .list-img {
  width: 154px;
  height: 108px;
}
body.hong4 .common-new .common-new-swiper .swiper-slide .list-img img {
  width: 100%;
}
body.hong4 .common-new .common-new-swiper .swiper-slide .list-text {
  line-height: 20px;
  margin-top: 8px;
}
body.hong4 .common-new .common-new-swiper .swiper-slide .list-text h5 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  font-weight: bold;
}
body.hong4 .common-new .common-new-swiper .swiper-slide .list-text p {
  margin-top: 4px;
  display: flex;
  align-items: center;
}
body.hong4 .common-new .common-new-swiper .swiper-slide .list-text p span {
  font-size: 13px;
}
body.hong4 .common-new .common-new-swiper .swiper-slide .list-text p .f-666 {
  font-size: 12px;
}
body.hong4 .common-new .common-new-swiper .swiper-slide .list-text p i {
  width: 14px;
  height: 14px;
  margin-right: 6px;
}
body.hong4 .common-new .common-new-swiper .swiper-slide .list-text .class-count {
  margin-top: 0;
}
@media screen and (max-width: 719px) {
  body.hong4 .common-new .common-new-swiper {
    padding: 0;
    padding-left: 16px;
  }
  body.hong4 .common-new .common-new-swiper .line {
    width: calc(100% - 16px);
  }
}
body.hong4 .common-live-connect .common-sub-title {
  margin-top: 24px;
}
body.hong4 .common-live-connect .line {
  width: 100%;
  height: 1px;
  background: #e9e9e9;
  margin-top: 28px;
}
body.hong4 .common-live-connect .common-live-connect-swiper {
  padding: 0 20px;
}
body.hong4 .common-live-connect .common-live-connect-swiper .swiper-slide {
  width: auto;
  margin-right: 12px;
  width: 154px;
}
body.hong4 .common-live-connect .common-live-connect-swiper .swiper-slide .list-img {
  width: 154px;
  height: 108px;
}
body.hong4 .common-live-connect .common-live-connect-swiper .swiper-slide .list-img img {
  width: 100%;
}
body.hong4 .common-live-connect .common-live-connect-swiper .swiper-slide .list-text {
  line-height: 20px;
  margin-top: 8px;
}
body.hong4 .common-live-connect .common-live-connect-swiper .swiper-slide .list-text h5 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  font-weight: bold;
}
body.hong4 .common-live-connect .common-live-connect-swiper .swiper-slide .list-text p {
  margin-top: 4px;
  display: flex;
  align-items: center;
}
body.hong4 .common-live-connect .common-live-connect-swiper .swiper-slide .list-text p span {
  font-size: 13px;
  flex: 1 0 auto;
}
body.hong4 .common-live-connect .common-live-connect-swiper .swiper-slide .list-text p .f666 {
  font-size: 12px;
}
body.hong4 .common-live-connect .common-live-connect-swiper .swiper-slide .list-text p .live-state {
  font-size: 11px;
  display: inline-block;
  background: var(--h-main-color);
  color: var(--h-color-fff);
  border-radius: 2px;
  text-align: center;
  font-weight: bold;
  line-height: 18px;
  flex: inherit;
  padding: 1px 4px 2px;
}
body.hong4 .common-live-connect .common-live-connect-swiper .swiper-slide .list-text p .live-state.ing {
  background: #1ab8be;
}
body.hong4 .common-live-connect .common-live-connect-swiper .swiper-slide .list-text p .live-state.bell {
  background: #c1c1c1;
}
@media screen and (max-width: 719px) {
  body.hong4 .common-live-connect .common-live-connect-swiper .swiper-slide .list-text p .f666 {
    font-size: 11px;
  }
  body.hong4 .common-live-connect .common-live-connect-swiper .swiper-slide .list-text p .live-state {
    font-size: 10px;
  }
}
body.hong4 .common-live-connect .common-live-connect-swiper .swiper-slide .list-text p i {
  width: 14px;
  height: 14px;
  margin-right: 6px;
}
@media screen and (max-width: 719px) {
  body.hong4 .common-live-connect .common-live-connect-swiper {
    padding: 0;
    padding-left: 16px;
  }
  body.hong4 .common-live-connect .common-live-connect-swiper .line {
    width: calc(100% - 16px);
  }
}
body.hong4 .common-review {
  margin-bottom: 80px;
}
body.hong4 .common-review .common-sub-title {
  margin-top: 24px;
}
body.hong4 .common-review .common-review-swiper {
  padding: 0 20px;
}
body.hong4 .common-review .common-review-swiper .swiper-slide {
  width: 250px;
  margin-right: 12px;
  border: 1px solid #e3e7ed;
  border-radius: 6px;
  cursor: pointer;
}
body.hong4 .common-review .common-review-swiper .swiper-slide .review-top {
  text-align: left;
  background: #f3f4f7;
  border-bottom: 1px solid #e3e7ed;
  padding: 11px 11px 16px;
}
body.hong4 .common-review .common-review-swiper .swiper-slide .review-top h5 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  font-size: 15px;
  font-weight: bold;
  line-height: 21px;
  margin-bottom: 5px;
}
body.hong4 .common-review .common-review-swiper .swiper-slide .review-top .star-set {
  display: flex;
  line-height: 19px;
}
body.hong4 .common-review .common-review-swiper .swiper-slide .review-top .star-set > span:not(.i-star) {
  font-size: 13px;
  margin-right: 6px;
}
body.hong4 .common-review .common-review-swiper .swiper-slide .review-top .star-set .i-star {
  background-size: 12px 12px;
  padding-left: 15px;
}
body.hong4 .common-review .common-review-swiper .swiper-slide .review-bot {
  padding: 10px 10px 0px;
}
body.hong4 .common-review .common-review-swiper .swiper-slide .review-bot .comment {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  line-height: 22px;
  font-size: 14px;
  height: 132px;
}
body.hong4 .common-review .common-review-swiper .swiper-slide .review-bot .more-btn {
  margin-top: 14px;
  border-top: 1px solid #f1f1f1;
  display: block;
  width: 100%;
  height: 33px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}
body.hong4 .common-review .common-review-swiper .swiper-slide .review-bot .more-btn span {
  font-size: 12px;
  font-weight: bold;
}
body.hong4 .common-review .common-review-swiper .swiper-slide .review-bot .more-btn img {
  width: 4px;
  height: 7px;
  margin-left: 6px;
}
@media screen and (max-width: 719px) {
  body.hong4 .common-review .common-review-swiper {
    padding: 0;
    padding-left: 16px;
  }
}
@media screen and (max-width: 719px) {
  body.hong4 .common-live-connect .common-sub-title {
    margin-top: 20px;
  }
  body.hong4 .common-review .common-sub-title {
    margin-top: 20px;
  }
}
body.hong4 .cafe-notice .swiper-cafe-notice-pagination {
  position: static;
  margin-top: 8px;
}
body.hong4 .cafe-notice .swiper-cafe-notice-pagination .swiper-pagination-bullet {
  margin: 0 5px !important;
  width: 6px;
  height: 6px;
  background: #ddd;
  opacity: 1;
}
body.hong4 .cafe-notice .swiper-cafe-notice-pagination .swiper-pagination-bullet-active {
  background: var(--h-color-222);
}
body.hong4 .cafe-notice .line {
  width: 100%;
  height: 1px;
  background: #e9e9e9;
  margin-top: 20px;
}
body.hong4 .posting-container .best-posting-button {
  padding: 0 var(--h-padding-12);
  background: var(--h-color-fff);
  border-radius: 2px;
  height: 35px;
}
body.hong4 .posting-container .best-posting-button > span {
  font-size: 0.875rem;
}
body.hong4 .posting-container > p {
  width: calc(100% - 143.38px);
  margin-left: 12px;
  padding-right: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: initial;
}
@media screen and (max-width: 719px) {
  body.hong4 .posting-container .best-posting-button {
    padding: 0 7px;
  }
  body.hong4 .posting-container > p {
    width: calc(100% - 105.22px);
  }
}
body.hong4 .posting-container .i-posting-star {
  width: 14px;
  height: 14px;
  margin-right: 8px;
}
body.hong4 .posting-container .i-arrow-right {
  width: 8px;
  height: 14px;
  margin-top: 2px;
}
@media screen and (max-width: 719px) {
  body.hong4 .posting-container .best-posting-button {
    height: 24px;
  }
  body.hong4 .posting-container .i-posting-star {
    width: 10px;
    height: 10px;
    margin-right: 6px;
  }
  body.hong4 .posting-container .best-posting-button > span {
    font-size: 0.785rem;
  }
  body.hong4 .posting-container > p {
    margin-left: 9px;
  }
  body.hong4 .posting-container .i-arrow-right {
    width: 4px;
    height: 7px;
  }
}
body.hong4 .list-wrap.ver2 {
  position: sticky;
  left: 0;
  top: -1px;
  z-index: 5;
  background: var(--h-color-fff);
}
body.hong4 .list-wrap.ver2 + div:not(.common-banner-container, .profile-tab-wrap, .regular-wrap),
body.hong4 .list-wrap.ver2 + section {
  padding-top: 22px;
}
@media screen and (max-width: 719px) {
  body.hong4 .list-wrap.ver2 + div:not(.common-banner-container, .profile-tab-wrap, .regular-wrap),
  body.hong4 .list-wrap.ver2 + section {
    padding-top: 15px;
  }
}
body.hong4 .list-wrap .list-tab {
  display: flex;
  width: 100%;
  text-align: center;
  font-size: 18px;
  padding: 0 20px;
  border-bottom: 1px solid var(--h-color-e9e);
}
body.hong4 .list-wrap .list-tab.floating {
  position: sticky;
  left: 0;
  top: 0;
  z-index: 5;
  background: #ffffff;
}
@media screen and (max-width: 719px) {
  body.hong4 .list-wrap .list-tab {
    font-size: 16px;
    padding: 0 16px;
  }
}
body.hong4 .list-wrap .list-tab li {
  flex: 1 0 auto;
  padding: 22px 0;
  position: relative;
  cursor: pointer;
  font-weight: 500;
}
@media screen and (max-width: 719px) {
  body.hong4 .list-wrap .list-tab li {
    padding: 17px 0;
  }
}
body.hong4 .list-wrap .list-tab li.active {
  font-weight: bold;
  color: var(--h-list-btn-color);
}
body.hong4 .list-wrap .list-tab li.active::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 3px;
  background: var(--h-list-btn-color);
  border-radius: 1.5px;
  z-index: 2;
}
body.hong4 .list-wrap.list-swiper-container .list-tab li.active::after {
  bottom: 1px;
}
body.hong4 .tab-wrap {
  width: 100%;
  background: var(--h-color-fff);
}
body.hong4 .tab-wrap .tab-container {
  display: none;
  background: #f5f5f5;
}
body.hong4 .tab-wrap .tab-container > h1 {
  background: var(--h-color-fff);
  padding: 24px 20px 0;
  font-size: 1.12rem;
  font-weight: bold;
  display: inline-block;
  width: 100%;
  color: var(--h-main-color);
}
body.hong4 .tab-wrap .list-item-container .list-item {
  width: 100%;
  background: var(--h-color-fff);
  border-bottom: 1px solid var(--h-color-e9e);
  border-top: 1px solid var(--h-color-e9e);
  margin-bottom: 6px;
  padding: 24px 20px 0;
  position: relative;
}
body.hong4 .tab-wrap .list-item-container .list-item.attend::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2;
}
body.hong4 .tab-wrap .list-item-container .list-item.attend .attend-coin {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  border-radius: 4px;
  z-index: 3;
  background: var(--h-color-fff);
  font-size: 1.125rem;
  font-weight: bold;
}
@media screen and (max-width: 719px) {
  body.hong4 .tab-wrap .tab-container > h1 {
    padding: 24px 16px 0;
  }
  body.hong4 .tab-wrap .list-item-container .list-item {
    padding: 20px 16px 0;
  }
  body.hong4 .tab-wrap .list-item-container .list-item.attend::after {
    width: 158px;
    height: 34px;
    line-height: 34px;
    font-size: 1rem;
  }
  body.hong4 .tab-wrap .list-item-container .list-item.attend .attend-coin {
    height: 34px;
    line-height: 34px;
    width: 158px;
  }
}
body.hong4 .tab-wrap .list-item-container .list-item:first-child {
  border-top: none;
}
body.hong4 .tab-wrap .list-item-container .list-item:last-child {
  margin-bottom: 0;
  border-bottom: none;
}
body.hong4 .tab-wrap .list-item-container .list-item.visit-counsel {
  padding: 20px;
}
body.hong4 .tab-wrap .list-item-container .list-item.visit-counsel > h1 {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 16px;
  line-height: 26px;
}
body.hong4 .tab-wrap .list-item-container .list-item.visit-counsel .list-item-content {
  border-bottom: none;
}
body.hong4 .tab-wrap .list-item-container .list-item.visit-counsel .list-item-name {
  font-size: 1.125rem;
}
body.hong4 .tab-wrap .list-item-container .list-item.visit-counsel .list-item-count {
  font-size: 16px;
}
body.hong4 .tab-wrap .list-item-container .list-item.visit-counsel .list-item-count {
  margin-right: 25px;
}
@media screen and (max-width: 719px) {
  body.hong4 .tab-wrap .list-item-container .list-item.visit-counsel {
    padding: 16px;
  }
  body.hong4 .tab-wrap .list-item-container .list-item.visit-counsel > h1 {
    font-size: 1.07rem;
    line-height: 20px;
    margin-bottom: 13px;
  }
  body.hong4 .tab-wrap .list-item-container .list-item.visit-counsel .list-item-name {
    font-size: 1.142rem;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    width: calc(100% - 15px);
    line-height: 20px;
  }
  body.hong4 .tab-wrap .list-item-container .list-item.visit-counsel .list-item-count {
    font-size: 14px;
    position: absolute;
    right: 0;
    top: 26px;
  }
  body.hong4 .tab-wrap .list-item-container .list-item.visit-counsel .list-item-count {
    margin-right: 0;
  }
}
body.hong4 .tab-wrap .list-item-container .list-item.visit-counsel .list-item-info {
  width: 100%;
  gap: 0;
  font-size: 0.875rem;
}
body.hong4 .tab-wrap .list-item-container .list-item.visit-counsel .list-item-info > .list-item-column {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
}
body.hong4 .tab-wrap .list-item-container .list-item.visit-counsel .list-item-info > .list-item-column:nth-child(2) {
  border-bottom: 1px solid var(--h-color-e9e);
  gap: 20px;
}
body.hong4 .tab-wrap .list-item-container .list-item.visit-counsel .list-item-info > div:last-child {
  margin-top: 10px;
  gap: 16px;
}
body.hong4 .tab-wrap .list-item-container .list-item.visit-counsel .list-item-info > .list-item-column > p {
  display: flex;
  align-items: center;
}
body.hong4 .tab-wrap .list-item-container .list-item.visit-counsel .list-item-info > .list-item-column > p.mobile-pos-loctaion {
  width: calc(100% - 100px);
  justify-content: flex-end;
}
body.hong4 .tab-wrap .list-item-container .list-item.visit-counsel .list-item-info > .list-item-column > p.mobile-pos-loctaion .f-666 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
body.hong4 .tab-wrap .list-item-container .list-item.visit-counsel .list-item-info .list-item-price {
  font-size: 1rem;
}
@media screen and (max-width: 719px) {
  body.hong4 .tab-wrap .list-item-container .list-item.visit-counsel .list-item-info {
    font-size: 1rem;
  }
  body.hong4 .tab-wrap .list-item-container .list-item.visit-counsel .list-item-info .list-item-price {
    font-size: 13px;
  }
  body.hong4 .tab-wrap .list-item-container .list-item.visit-counsel .list-item-info > .list-item-column > p.mobile-pos-loctaion {
    width: auto;
    justify-content: flex-start;
    line-height: 24px;
    height: 14px;
    font-size: 12px;
  }
  body.hong4 .tab-wrap .list-item-container .list-item.visit-counsel .list-item-info {
    height: 100%;
    justify-content: space-between;
  }
  body.hong4 .tab-wrap .list-item-container .list-item.visit-counsel .list-item-info > .list-item-column > p:first-child {
    width: 100%;
  }
  body.hong4 .tab-wrap .list-item-container .list-item.visit-counsel .list-item-info > .list-item-column > .mobile-pos-partner {
    position: absolute;
    right: 0;
    top: 26px;
  }
  body.hong4 .tab-wrap .list-item-container .list-item.visit-counsel .list-item-info > .list-item-column > .mobile-pos-loctaion {
    position: absolute;
    left: 0;
    top: 24px;
    width: 100%;
  }
  body.hong4 .tab-wrap .list-item-container .list-item.visit-counsel .list-item-info > .list-item-column {
    position: relative;
    padding-bottom: 0;
  }
  body.hong4 .tab-wrap .list-item-container .list-item.visit-counsel .list-item-info > .list-item-column:nth-child(2) {
    border-bottom: none;
    align-items: flex-start;
    margin-top: 6px;
    flex: 1 0 auto;
  }
  body.hong4 .tab-wrap .list-item-container .list-item.visit-counsel .list-item-info > div:last-child {
    background: #f5f5f5;
    border-radius: 4px;
    height: 33px;
    line-height: 33px;
    padding: 0 10px;
    font-size: 12px;
    gap: 10px;
  }
  body.hong4 .tab-wrap .list-item-container .list-item.visit-counsel .list-item-info > div:last-child > p {
    display: flex;
    align-items: center;
  }
}
@media screen and (max-width: 400px) {
  body.hong4 .tab-wrap .list-item-container .list-item.visit-counsel .list-item-info > div:last-child {
    gap: 5px;
  }
}
body.hong4 .tab-wrap .list-item-container .list-item.visit-counsel .i-location2,
body.hong4 .tab-wrap .list-item-container .list-item.visit-counsel .i-location3 {
  width: 15px;
  height: 17px;
  margin-right: 6px;
  flex: 0 0 15px;
}
body.hong4 .tab-wrap .list-item-container .list-item-inner-top {
  display: flex;
  gap: 20px;
  height: 108px;
  position: relative;
}
body.hong4 .tab-wrap .list-item-container .list-item-inner-top .list-link,
body.hong4 .sale-product-ul .sale-product-list .list-link,
body.hong4 .contents-youtube .swiper-slide .list-link,
body.hong4 .tab-wrap .list-item-container .list-item > .list-link {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
@media screen and (max-width: 719px) {
  body.hong4 .tab-wrap .list-item-container .list-item.visit-counsel .i-location2,
  body.hong4 .tab-wrap .list-item-container .list-item.visit-counsel .i-location3 {
    width: 13px;
    height: 14px;
    flex: 0 0 13px;
  }
  body.hong4 .tab-wrap .list-item-container .list-item-inner-top {
    gap: 16px;
  }
}
body.hong4 .tab-wrap .list-item-container .list-img {
  display: inline-block;
  position: relative;
  width: 21.38%;
  min-width: 154px;
  border-radius: 6px;
  overflow: hidden;
  margin-right: 0;
}
@media screen and (max-width: 719px) {
  body.hong4 .tab-wrap .list-item-container .list-img {
    border-radius: 4px;
  }
}
body.hong4 .tab-wrap .list-item-container .list-img::after,
body.hong4 .profile-tab-wrap .profile-img::after {
  content: "";
  position: absolute;
  color: var(--h-color-fff);
  border-radius: 2px;
  font-size: 0.758rem;
  font-weight: bold;
  top: 6px;
  left: 6px;
  padding: 6px 6px 5px 6px;
  white-space: pre;
  text-align: center;
  line-height: 1.18;
  border-radius: 4px;
}
body.hong4 .tab-wrap .list-item-container .list-img.goods-service::after {
  white-space: inherit;
}
body.hong4 .profile-tab-wrap .profile-img::after {
  font-size: 0.8125rem;
}
@media screen and (max-width: 719px) {
  body.hong4 .profile-tab-wrap .profile-img::after {
    font-size: 1rem;
  }
}
body.hong4 .profile-tab-wrap .profile-img::after {
  top: 10px;
  left: 10px;
}
body.hong4 .call-tarot::after {
  content: var(--h-call-tarot) !important;
  white-space: pre !important;
}
body.hong4 .call-fortune::after {
  content: var(--h-call-fortune) !important;
  white-space: pre !important;
}
body.hong4 .call-saju::after {
  content: var(--h-call-saju) !important;
  white-space: pre !important;
}
body.hong4 .chat-tarot::after {
  content: var(--h-chat-tarot) !important;
  white-space: pre !important;
}
body.hong4 .chat-fortune::after {
  content: var(--h-chat-fortune) !important;
  white-space: pre !important;
}
body.hong4 .chat-saju::after {
  content: var(--h-chat-saju) !important;
  white-space: pre !important;
}
body.hong4 .video-tarot::after {
  content: var(--h-video-tarot) !important;
  white-space: pre !important;
}
body.hong4 .video-fortune::after {
  content: var(--h-video-fortune) !important;
  white-space: pre !important;
}
body.hong4 .video-saju::after {
  content: var(--h-video-saju) !important;
  white-space: pre !important;
}
body.hong4 .shop-tarot::after {
  content: var(--h-shop-tarot) !important;
  white-space: pre !important;
}
body.hong4 .shop-fortune::after {
  content: var(--h-shop-fortune) !important;
  white-space: pre !important;
}
body.hong4 .shop-saju::after {
  content: var(--h-shop-saju) !important;
  white-space: pre !important;
}
body.hong4 .visit-cafe::after {
  content: var(--h-cafe-visit) !important;
  white-space: pre !important;
}
body.hong4 .cafe-visit::after {
  content: var(--h-cafe-visit) !important;
  white-space: pre !important;
}
body.hong4 .cafe-class::after {
  content: var(--h-cafe-class) !important;
  white-space: pre !important;
}
body.hong4 .class-call::after {
  content: var(--h-class-call) !important;
  white-space: pre !important;
}
body.hong4 .class-visit::after {
  content: var(--h-class-visit) !important;
  white-space: pre !important;
}
body.hong4 .text-naming::after {
  content: var(--h-text-naming) !important;
  white-space: pre !important;
}
body.hong4 .text-rename::after {
  content: var(--h-text-rename) !important;
  white-space: pre !important;
}
body.hong4 .text-valuename::after {
  content: var(--h-text-valuename) !important;
  white-space: pre !important;
}
body.hong4 .text-shopname::after {
  content: var(--h-text-shopname) !important;
  white-space: pre !important;
}
body.hong4 .text-chosedate::after {
  content: var(--h-text-chosedate) !important;
  white-space: pre !important;
}
body.hong4 .text-topography::after {
  content: var(--h-text-topography) !important;
  white-space: pre !important;
}
body.hong4 .goods-amulet::after {
  content: var(--h-goods-amulet) !important;
  white-space: pre !important;
}
body.hong4 .goods-pray::after {
  content: var(--h-goods-pray) !important;
  white-space: pre !important;
}
body.hong4 .goods-candle::after {
  content: var(--h-goods-candle) !important;
  white-space: pre !important;
}
body.hong4 .goods-pray-candle::after {
  content: var(--h-goods-pray-candle) !important;
  white-space: pre !important;
}
body.hong4 .goods-lantern::after {
  content: var(--h-goods-lantern) !important;
  white-space: pre !important;
}
body.hong4 .goods-pray-source::after {
  content: var(--h-goods-pray-source) !important;
  white-space: pre !important;
}
body.hong4 .goods-renaming::after {
  content: var(--h-goods-renaming) !important;
  white-space: pre !important;
}
body.hong4 .goods-tarot-saju::after {
  content: var(--h-goods-tarot-saju) !important;
  white-space: pre !important;
}
body.hong4 .goods-choosedate::after {
  content: var(--h-goods-choosedate) !important;
  white-space: pre !important;
}
body.hong4 .goods-topography::after {
  content: var(--h-goods-topography) !important;
  white-space: pre !important;
}
body.hong4 .goods-naming::after {
  content: var(--h-goods-naming) !important;
  white-space: pre !important;
}
body.hong4 .goods-fortune-item::after {
  content: var(--h-goods-fortune-item) !important;
  white-space: pre !important;
}
body.hong4 .goods-release::after {
  content: var(--h-goods-release) !important;
  white-space: pre !important;
}
body.hong4 .goods-amulet-pray::after {
  content: var(--h-goods-amulet-pray) !important;
  white-space: pre !important;
}
body.hong4 .goods-pray-candle-source::after {
  content: var(--h-goods-pray-candle-source) !important;
  white-space: pre !important;
}
body.hong4 .goods-samjaepuri::after {
  content: var(--h-goods-samjaepuri) !important;
  white-space: pre !important;
}
body.hong4 .goods-salpuri::after {
  content: var(--h-goods-salpuri) !important;
  white-space: pre !important;
}
body.hong4 .goods-devout::after {
  content: var(--h-goods-devout) !important;
  white-space: pre !important;
}
body.hong4 .goods-amulet-lantern::after {
  content: var(--h-goods-amulet-lantern) !important;
  white-space: pre !important;
}
body.hong4 .goods-lantern-pray::after {
  content: var(--h-goods-lantern-pray) !important;
  white-space: pre !important;
}
body.hong4 .goods-prevent-misfortune::after {
  content: var(--h-goods-prevent-misfortune) !important;
  white-space: pre !important;
}
body.hong4 .goods-prevent-samjae::after {
  content: var(--h-goods-prevent-samjae) !important;
  white-space: pre !important;
}
body.hong4 .goods-prevent-government::after {
  content: var(--h-goods-prevent-government) !important;
  white-space: pre !important;
}
body.hong4 .goods-three-pray::after {
  content: var(--h-goods-three-pray) !important;
  white-space: pre !important;
}
body.hong4 .goods-astrological::after {
  content: var(--h-goods-astrological) !important;
  white-space: pre !important;
}
body.hong4 .goods-i-lantern::after {
  content: var(--h-goods-i-lantern) !important;
  white-space: pre !important;
}
body.hong4 .goods-gemstone::after {
  content: var(--h-goods-gemstone) !important;
  white-space: pre !important;
}
body.hong4 .goods-crystal-gemstone::after {
  content: var(--h-goods-crystal-gemstone) !important;
  white-space: pre !important;
}
body.hong4 .goods-samjaepuri-prevent-misfortune::after {
  content: var(--h-goods-samjaepuri-prevent-misfortune) !important;
  white-space: pre !important;
}
body.hong4 .goods-amulet-candle-pray::after {
  content: var(--h-goods-amulet-candle-pray) !important;
  white-space: pre !important;
}
body.hong4 .goods-tarot-card::after {
  content: var(--h-goods-tarot-card) !important;
  white-space: pre !important;
}
body.hong4 .goods-visits-academy::after {
  content: var(--h-goods-visits-academy) !important;
  white-space: pre !important;
}
body.hong4 .goods-candle-pray::after {
  content: var(--h-goods-candle-pray) !important;
  white-space: pre !important;
}
body.hong4 .goods-amulet-pray::after {
  content: var(--h-goods-amulet-pray) !important;
  white-space: pre !important;
}
body.hong4 .goods-gemstone-bracelet::after {
  content: var(--h-goods-gemstone-bracelet) !important;
  white-space: pre !important;
}
body.hong4 .goods-candle-source::after {
  content: var(--h-goods-candle-source) !important;
  white-space: pre !important;
}
body.hong4 .goods-prevent-flood::after {
  content: var(--h-goods-prevent-flood) !important;
  white-space: pre !important;
}
body.hong4 .name-naming::after {
  content: "작명" !important;
  white-space: pre !important;
  max-width: none !important;
}
body.hong4 .name-renaming::after {
  content: "개명" !important;
  white-space: pre !important;
  max-width: none !important;
}
body.hong4 .name-valuename::after {
  content: "감명" !important;
  white-space: pre !important;
  max-width: none !important;
}
body.hong4 .name-shopname::after {
  content: "상호" !important;
  white-space: pre !important;
  max-width: none !important;
}
body.hong4 .name-choosedate::after {
  content: "택일" !important;
  white-space: pre !important;
  max-width: none !important;
}
body.hong4 .name-topography::after {
  content: "풍수\a지리" !important;
  white-space: pre !important;
  max-width: none !important;
}
body.hong4 .class-online::after {
  content: "전화\a클래스" !important;
  white-space: pre !important;
  max-width: none !important;
}
body.hong4 .class-offline::after {
  content: "대면\a클래스" !important;
  white-space: pre !important;
  max-width: none !important;
}
body.hong4 .cate-tarot::after {
  background: var(--h-main-color) !important;
}
body.hong4 .cate-saju::after {
  background: #d67a00 !important;
}
body.hong4 .cate-fortune::after {
  background: #c21129 !important;
}
body.hong4 .goods-service::after {
  background: #15885d !important;
}
body.hong4 .goods-name::after {
  background: rgba(0, 0, 0, 0.7019607843) !important;
}
body.hong4 .goods-class::after {
  background: #2d71ac !important;
}
body.hong4 .cate-cafe::after {
  background: #6687e9 !important;
}
body.hong4 .bg-tarot {
  background: var(--h-hong-profile-bg-tarot) !important;
}
body.hong4 .bg-saju {
  background: var(--h-hong-profile-bg-saju) !important;
}
body.hong4 .bg-fortune {
  background: var(--h-hong-profile-bg-fortune) !important;
}
body.hong4 .bg-tarot,
body.hong4 .bg-saju,
body.hong4 .bg-fortune {
  background-size: cover !important;
}
body.hong4 .tab-wrap .list-item-container .list-img img {
  width: auto;
  height: 100%;
  display: block;
}
body.hong4 .tab-wrap .list-item-container .list-item-content {
  width: 100%;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid var(--h-color-e9e);
}
@media screen and (max-width: 719px) {
  body.hong4 .tab-wrap .list-item-container .list-item-content {
    flex-direction: column;
    border-bottom: none;
  }
}
body.hong4 .tab-wrap .list-item-container .list-item-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
@media screen and (max-width: 719px) {
  body.hong4 .tab-wrap .list-item-container .list-item-info {
    gap: 1px;
  }
}
body.hong4 .tab-wrap .list-item-container .list-item-info > p {
  display: flex;
  align-items: center;
}
body.hong4 .tab-wrap .list-item-container .list-item-info > p:nth-child(1) {
  height: 29px;
}
body.hong4 .tab-wrap .list-item-container .list-item-info > p:nth-child(1) > img {
  width: 22px;
  margin-right: 6px;
}
body.hong4 .tab-wrap .list-item-container .list-item-info > p:nth-child(2) {
  height: 24px;
}
body.hong4 .tab-wrap .list-item-container .list-item-info > p:nth-child(3) {
  height: 24px;
  margin-top: 10px;
}
@media screen and (max-width: 719px) {
  body.hong4 .tab-wrap .list-item-container .list-item-info > p:nth-child(1) {
    height: 21px;
  }
  body.hong4 .tab-wrap .list-item-container .list-item-info > p:nth-child(1) > img {
    width: 17px;
    margin-right: 4px;
  }
  body.hong4 .tab-wrap .list-item-container .list-item-info > p:nth-child(2) {
    height: 17px;
  }
  body.hong4 .tab-wrap .list-item-container .list-item-info > p:nth-child(3) {
    height: 17px;
    margin-top: 6px;
  }
}
body.hong4 .tab-wrap .list-item-container .list-item-name {
  font-size: 1.25rem;
}
@media screen and (max-width: 719px) {
  body.hong4 .tab-wrap .list-item-container .list-item-name {
    font-size: 1.142rem;
  }
}
body.hong4 .tab-wrap .list-item-container .list-item-tag {
  margin-right: 8px;
  color: var(--h-color-999);
  position: relative;
  z-index: 1;
}
body.hong4 .tab-wrap .list-item-container .list-item-tag.active {
  color: #c41e1e;
  font-weight: bold;
}
body.hong4 .tab-wrap .list-item-container .i-list-won {
  width: 18px;
  height: 18px;
  margin-right: 6px;
  transform: translateY(1px);
}
@media screen and (max-width: 719px) {
  body.hong4 .tab-wrap .list-item-container .i-list-won {
    width: 14px;
    height: 14px;
    transform: translateY(0);
  }
}
body.hong4 .tab-wrap .list-item-container .list-item-price + span {
  margin-left: 6px;
  font-size: 0.875rem;
  margin-top: 1px;
  color: var(--h-color-666);
}
@media screen and (max-width: 719px) {
  body.hong4 .tab-wrap .list-item-container .list-item-price + span {
    font-size: 0.785rem;
  }
}
body.hong4 .tab-wrap .list-item-container .item-btn {
  display: inline-block;
  width: 180px;
  height: 60px;
  border-radius: 4px;
  color: var(--h-color-fff);
  text-align: center;
  font-size: 1.125rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  position: relative;
  z-index: 1;
}
body.hong4 .tab-wrap .list-item-container .item-btn.item-pos-btn {
  background: var(--h-list-btn-color);
}
body.hong4 .tab-wrap .list-item-container .item-btn.item-bell-btn {
  background: #c1c1c1;
}
body.hong4 .tab-wrap .list-item-container .item-btn.item-ing-btn {
  background: #1ab8be;
}
body.hong4 .tab-wrap .list-item-container .item-btn > span {
  margin-bottom: 2px;
}
body.hong4 .tab-wrap .list-item-container .i-list-call,
body.hong4 .tab-wrap .list-item-container .i-list-calling {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  margin-top: 1px;
}
body.hong4 .tab-wrap .list-item-container .i-list-bell {
  width: 16px;
  height: 17px;
  margin-right: 8px;
  margin-top: 1px;
}
@media screen and (max-width: 719px) {
  body.hong4 .tab-wrap .list-item-container .item-btn {
    font-size: 1rem;
    width: 100%;
    height: 36px;
    margin-top: 9px;
  }
  body.hong4 .tab-wrap .list-item-container .i-list-call,
  body.hong4 .tab-wrap .list-item-container .i-list-calling {
    width: 12px;
    height: 12px;
    margin-right: 4px;
  }
  body.hong4 .tab-wrap .list-item-container .i-list-bell {
    width: 11.5px;
    height: 12px;
    margin-right: 5.1px;
  }
}
body.hong4 .tab-wrap .list-item-container .i-list-chat {
  width: 17px;
  height: 18px;
  margin-right: 10px;
  margin-top: 1px;
}
body.hong4 .tab-wrap .list-item-container .i-list-chatting {
  width: 22px;
  height: 22px;
  margin-right: 10px;
  margin-top: 1px;
}
body.hong4 .tab-wrap .list-item-container .i-list-video {
  width: 18px;
  height: 13px;
  margin-right: 8px;
  margin-top: 1px;
}
body.hong4 .tab-wrap .list-item-container .i-list-videocall {
  width: 29px;
  height: 13px;
  margin-right: 8px;
  margin-top: 1px;
}
@media screen and (max-width: 719px) {
  body.hong4 .tab-wrap .list-item-container .i-list-chat {
    width: 11px;
    height: 12px;
    margin-right: 8px;
  }
  body.hong4 .tab-wrap .list-item-container .i-list-chatting {
    width: 13px;
    height: 13px;
    margin-right: 6px;
  }
  body.hong4 .tab-wrap .list-item-container .i-list-video {
    width: 12px;
    height: 9px;
    margin-right: 6px;
  }
  body.hong4 .tab-wrap .list-item-container .i-list-videocall {
    width: 20px;
    height: 9px;
    margin-right: 6px;
  }
}
body.hong4 .tab-wrap .list-item-container .list-item-inner-bot {
  padding: 14px 0;
  display: flex;
  justify-content: space-between;
  font-size: 0.875rem;
  cursor: pointer;
}
body.hong4 .tab-wrap .list-item-container .list-item-inner-bot p {
  display: flex;
  align-items: center;
}
body.hong4 .tab-wrap .list-item-container .list-item-inner-bot p > .i-list-partner + span,
body.hong4 .tab-wrap .list-item-container .list-item-inner-bot p > .i-list-rookie + span {
  margin-right: 6px;
}
@media screen and (max-width: 719px) {
  body.hong4 .tab-wrap .list-item-container .list-item-inner-bot {
    font-size: 0.9285rem;
    padding: 14px 0 15px;
  }
  body.hong4 .tab-wrap .list-item-container .list-item-inner-bot p > .i-list-partner + span,
  body.hong4 .tab-wrap .list-item-container .list-item-inner-bot p > .i-list-rookie + span {
    margin-right: 10px;
  }
}
body.hong4 .tab-wrap .list-item-container .list-item-inner-bot .list-recent {
  display: flex;
  gap: 12px;
  align-items: center;
}
body.hong4 .tab-wrap .list-item-container .list-item-inner-bot .list-recent > p:first-child,
body.hong4 .tab-wrap .list-item-container .list-item-inner-bot .list-recent > p > span:last-child {
  color: var(--h-color-666);
}
body.hong4 .tab-wrap .list-item-container .list-item-inner-bot .list-recent > p > span:last-child {
  margin-left: 4px;
}
body.hong4 .tab-wrap .list-item-container .list-item-inner-bot .list-grade {
  display: flex;
  gap: 10px;
  align-items: center;
}
@media screen and (max-width: 374px) {
  body.hong4 .tab-wrap .list-item-container .list-item-inner-bot .list-grade {
    gap: 7px;
  }
}
body.hong4 .tab-wrap .list-item-container .list-item-inner-bot .list-grade > p {
  display: flex;
  gap: 6px;
}
body.hong4 .tab-wrap .list-item-container .list-item-inner-bot .list-grade .list-grade-line {
  width: 1px;
  height: 16px;
  background: #f1f1f1;
}
body.hong4 .tab-wrap .list-item-container .list-item-inner-bot .list-grade > p > .i-grade,
body.hong4 .tab-wrap .list-item-container .list-item-inner-bot .list-grade > p > .i-grade.on,
body.hong4 .tab-wrap .list-item-container .list-item-inner-bot .list-grade > p > .i-review,
body.hong4 .tab-wrap .list-item-container .list-item-inner-bot .list-grade > p > .i-review.on,
body.hong4 .tab-wrap .list-item-container .list-item-inner-bot .list-grade > p > .i-consult,
body.hong4 .tab-wrap .list-item-container .list-item-inner-bot .list-grade > p > .i-consult.on {
  width: 18px;
  height: 18px;
  padding: 0;
}
@media screen and (max-width: 719px) {
  body.hong4 .tab-wrap .list-item-container .list-item-inner-bot .list-grade > p {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  body.hong4 .tab-wrap .list-item-container .list-item-inner-bot .list-grade .list-grade-line {
    height: 29px;
  }
  body.hong4 .tab-wrap .list-item-container .list-item-inner-bot .list-grade > p > .i-grade,
  body.hong4 .tab-wrap .list-item-container .list-item-inner-bot .list-grade > p > .i-grade.on,
  body.hong4 .tab-wrap .list-item-container .list-item-inner-bot .list-grade > p > .i-review,
  body.hong4 .tab-wrap .list-item-container .list-item-inner-bot .list-grade > p > .i-review.on,
  body.hong4 .tab-wrap .list-item-container .list-item-inner-bot .list-grade > p > .i-consult,
  body.hong4 .tab-wrap .list-item-container .list-item-inner-bot .list-grade > p > .i-consult.on {
    width: 16px;
    height: 16px;
  }
}
body.hong4 .tab-wrap .list-item-container .i-list-partner,
body.hong4 .tab-wrap .list-item-container .i-list-rookie {
  width: 18px;
  height: 18px;
  margin-right: 6px;
}
body.hong4 .tab-wrap .list-item-container .i-list-review {
  width: 14px;
  height: 14px;
  margin-right: 6px;
  margin-top: 1px;
}
body.hong4 .tab-wrap .list-item-container .i-list-star {
  width: 14px;
  height: 14px;
  margin-right: 6px;
  margin-left: 2px;
}
body.hong4 .tab-wrap .list-item-container .i-list-arrow-down {
  width: 12px;
  height: 7px;
  margin-left: 2px;
}
body.hong4 .tab-wrap .list-item-container .i-list-arrow-top {
  width: 12px;
  height: 7px;
  margin-left: 2px;
}
@media screen and (max-width: 719px) {
  body.hong4 .tab-wrap .list-item-container .list-item-inner-bot .list-recent {
    gap: 8px;
  }
  body.hong4 .tab-wrap .list-item-container .i-list-partner,
  body.hong4 .tab-wrap .list-item-container .i-list-rookie {
    width: 14px;
    height: 14px;
    margin-right: 4px;
  }
  body.hong4 .tab-wrap .list-item-container .i-list-review {
    width: 11px;
    height: 11px;
    margin-right: 4px;
  }
  body.hong4 .tab-wrap .list-item-container .list-item-info .d-flex.align-center .f-666 {
    font-size: 11px;
    margin-left: 4px;
  }
  body.hong4 .tab-wrap .list-item-container .i-list-star {
    width: 12px;
    height: 12px;
    margin-right: 4px;
  }
  body.hong4 .tab-wrap .list-item-container .i-list-arrow-down {
    width: 9px;
    height: 5px;
  }
  body.hong4 .tab-wrap .list-item-container .i-list-arrow-top {
    width: 9px;
    height: 5px;
  }
}
body.hong4 .tab-wrap .list-item-container .list-item-comment {
  display: none;
}
body.hong4 .tab-wrap .list-item-container .list-item-comment .comment-inner-container {
  border-top: 1px solid var(--h-color-e9e);
  border-bottom: 1px solid var(--h-color-e9e);
  padding: 22px 0 24px;
}
@media screen and (max-width: 719px) {
  body.hong4 .tab-wrap .list-item-container .list-item-comment .comment-inner-container {
    padding: 16px 0;
  }
}
body.hong4 .tab-wrap .list-item-container .comment-inner-container > a {
  display: flex;
  align-items: center;
}
body.hong4 .tab-wrap .list-item-container .comment-inner-container .comment-text {
  width: calc(100% - 110px);
  margin-top: 0;
  line-height: inherit;
  word-break: inherit;
  margin-right: 10px;
}
body.hong4 .tab-wrap .list-item-container .comment-inner-container .comment-text > span {
  display: inline-block;
  position: relative;
  padding-left: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 100%;
  line-height: 30px;
}
@media screen and (max-width: 719px) {
  body.hong4 .tab-wrap .list-item-container .comment-inner-container .comment-text {
    width: calc(100% - 90px);
  }
  body.hong4 .tab-wrap .list-item-container .comment-inner-container .comment-text > span {
    line-height: 26px;
    font-size: 0.9285rem;
  }
}
body.hong4 .tab-wrap .list-item-container .comment-inner-container .comment-text > span::before {
  content: "·";
  position: absolute;
  left: 0;
}
body.hong4 .tab-wrap .list-item-container .comment-inner-container .comment-count {
  width: 18px;
  height: 18px;
  line-height: 17px;
  border-radius: 50%;
  color: var(--h-color-fff);
  text-align: center;
  font-size: 0.6875rem;
  flex: none;
}
@media screen and (max-width: 719px) {
  body.hong4 .tab-wrap .list-item-container .comment-inner-container .comment-count {
    width: 16px;
    height: 16px;
    line-height: 15px;
    transform: scale(0.9);
  }
}
body.hong4 .tab-wrap .list-item-container .comment-inner-container .comment-count.has-comment {
  background: var(--h-color-ccc);
}
body.hong4 .tab-wrap .list-item-container .comment-inner-container .comment-user {
  font-size: 0.875rem;
  color: var(--h-color-999);
  flex: 1 0 auto;
  display: flex;
  justify-content: flex-end;
  line-height: 30px;
}
body.hong4 .tab-wrap .list-item-container .comment-inner-container .comment-user > span {
  max-width: 62px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media screen and (max-width: 719px) {
  body.hong4 .tab-wrap .list-item-container .comment-inner-container .comment-user {
    font-size: 0.785rem;
    line-height: 26px;
  }
  body.hong4 .tab-wrap .list-item-container .comment-inner-container .comment-user > span {
    max-width: 48.5px;
  }
}
body.hong4 .tab-wrap .list-item-container .list-item-comment .comment-more {
  cursor: pointer;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  padding: 12px 0 12px;
  justify-content: center;
  font-weight: bold;
}
body.hong4 .tab-wrap .list-item-container .list-item-comment .comment-more .i-arrow-right {
  width: 5px;
  height: 9px;
  margin-left: 6px;
}
body.hong4 .tab-wrap .list-item-container .comment-inner-container .comment-review-null {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 0.9375rem;
  color: #707070;
}
body.hong4 .tab-wrap .list-item-container .comment-inner-container .i-list-review-null {
  width: 36px;
  height: 36px;
  margin-bottom: 12px;
}
@media screen and (max-width: 719px) {
  body.hong4 .tab-wrap .list-item-container .comment-inner-container .comment-review-null {
    padding: 14px 0;
    font-size: 0.8571rem;
  }
  body.hong4 .tab-wrap .list-item-container .comment-inner-container .i-list-review-null {
    width: 24px;
    height: 24px;
    margin-bottom: 8px;
  }
  body.hong4 .tab-wrap .list-item-container .list-item-comment .comment-more {
    font-size: 0.857rem;
  }
  body.hong4 .tab-wrap .list-item-container .list-item-comment .comment-more .i-arrow-right {
    width: 4px;
    height: 7px;
  }
}
body.hong4 .list-wrap.list-swiper-container {
  padding: 0 20px 0 20px;
  overflow: hidden;
  background: transparent;
}
@media screen and (max-width: 719px) {
  body.hong4 .list-wrap.list-swiper-container {
    padding: 0 16px;
  }
}
body.hong4 .list-wrap.list-swiper-container.swiper-on {
  padding: 0 40px 0 16px;
}
body.hong4 .list-wrap.list-swiper-container .list-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc(100% - 5px);
  background: var(--h-color-fff);
}
body.hong4 .list-wrap.list-swiper-container .list-border {
  position: absolute;
  left: 0;
  top: calc(100% - 6px);
  width: 100%;
  height: 1px;
  background-color: var(--h-color-e9e);
}
body.hong4 .list-wrap.list-swiper-container .list-line {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% - 6px);
  width: 60px;
  height: 1px;
  z-index: 3;
  background: var(--h-color-e9e);
  -webkit-mask-image: linear-gradient(270deg, black 12%, transparent);
}
body.hong4 .list-wrap.list-swiper-container.swiper-on .list-line {
  display: block;
}
body.hong4 .list-wrap.list-swiper-container.swiper-on::before {
  content: "";
  width: 44px;
  height: calc(100% - 7px);
  position: absolute;
  right: 4px;
  top: 0;
  background: var(--h-color-fff);
  z-index: 2;
  filter: blur(3px);
}
body.hong4 .list-wrap.list-swiper-container.swiper-on::after {
  content: "";
  width: 6px;
  height: 12px;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: url(/hong4/_img/main/i-arrow-full-right.png) no-repeat center/cover;
  z-index: 3;
}
body.hong4 .list-wrap.list-swiper-container .list-swiper li {
  padding: 19px 22px 22px;
  width: auto;
  height: auto;
  margin-bottom: 3px;
}
@media screen and (max-width: 719px) {
  body.hong4 .list-wrap.list-swiper-container .list-swiper li {
    padding: 17px 13px;
  }
  body.hong4 .wrapper.profile .list-wrap.list-swiper-container .list-swiper li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    padding: 9px 14px 11px;
  }
}
body.hong4 .list-wrap.list-swiper-container .list-tab {
  border-bottom: none;
  padding: 0;
}
body.hong4 .wrapper .space-fixed {
  margin-top: -5px;
}
body.hong4 .wrapper.profile {
  padding-bottom: 77px;
}
@media screen and (max-width: 719px) {
  body.hong4 .wrapper.profile {
    padding-bottom: 70px;
  }
}
body.hong4 .wrapper.profile .space-fixed {
  margin-top: -5px;
}
body.hong4 .wrapper.profile .list-wrap .list-tab {
  font-size: 18px;
}
@media screen and (max-width: 719px) {
  body.hong4 .wrapper.profile .list-wrap .list-tab {
    font-size: 15px;
  }
}
body.hong4 .wrapper.profile .list-wrap .list-tab li.active::after {
  height: 3px;
  border-radius: 2.5px;
  bottom: 1px;
}
@media screen and (max-width: 719px) {
  body.hong4 .wrapper.profile .list-wrap .list-tab li.active::after {
    height: 3px;
    bottom: 1px;
  }
}
body.hong4 .wrapper.profile .list-wrap .list-tab li > span {
  font-size: 0.75rem;
  margin-left: 4px;
  pointer-events: none;
  vertical-align: middle;
}
body.hong4 .profile-tab-wrap .profile-info {
  display: flex;
  padding: 30px 20px;
  gap: 20px;
  border-bottom: 1px solid var(--h-color-e9e);
  background: #f7f7fa;
}
@media screen and (max-width: 719px) {
  body.hong4 .profile-tab-wrap .profile-info:not(.swiper-on) .profile-detail-top {
    margin-top: 0;
  }
}
body.hong4 .profile-tab-wrap .profile-info .profile-swiper-container {
  position: relative;
}
body.hong4 .profile-tab-wrap .profile-info .profile-swiper-container .swiper-pagination {
  bottom: -16px;
}
body.hong4 .profile-tab-wrap .profile-info .profile-swiper-container .swiper-pagination .swiper-pagination-bullet {
  width: 4px;
  height: 4px;
  margin: 0 3px;
}
body.hong4 .profile-tab-wrap .profile-info .profile-swiper-container .swiper-pagination .swiper-pagination-bullet-active {
  background: var(--h-list-btn-color);
}
body.hong4 .profile-tab-wrap .profile-info .profile-swiper-container .swiper-profile {
  width: 276px;
  height: 176px;
  border-radius: 8px;
  overflow: hidden;
  isolation: isolate;
}
@media screen and (max-width: 719px) {
  body.hong4 .profile-tab-wrap .profile-info {
    flex-direction: column;
    padding: 16px 16px 12px;
  }
  body.hong4 .profile-tab-wrap .profile-info .profile-swiper-container .swiper-profile {
    width: 100%;
    height: auto;
    aspect-ratio: 328/210;
  }
}
body.hong4 .profile-tab-wrap .profile-info .profile-swiper-container .swiper-profile .swiper-button-prev,
body.hong4 .profile-tab-wrap .profile-info .profile-swiper-container .swiper-profile .swiper-button-next {
  display: none;
  margin-top: 0;
}
@media screen and (max-width: 719px) {
  body.hong4 .profile-tab-wrap .profile-info .profile-swiper-container .swiper-profile .swiper-button-prev,
  body.hong4 .profile-tab-wrap .profile-info .profile-swiper-container .swiper-profile .swiper-button-next {
    display: flex;
  }
}
body.hong4 .profile-tab-wrap .profile-info .profile-swiper-container .profile-img {
  position: relative;
  width: 100%;
  height: 100%;
}
body.hong4 .profile-tab-wrap .profile-info .profile-img > img {
  display: block;
  height: 100%;
  margin: 0 auto;
  width: auto;
}
body.hong4 .profile-tab-wrap .profile-class-info {
  background: var(--h-color-fff);
  font-size: 18px;
}
body.hong4 .profile-tab-wrap .profile-class-info .profile-class-type {
  display: flex;
  align-items: center;
  height: 58px;
  border-bottom: 1px solid var(--h-color-e9e);
}
body.hong4 .profile-tab-wrap .profile-class-info .profile-class-type > div {
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  position: relative;
}
body.hong4 .profile-tab-wrap .profile-class-info img {
  width: 20px;
}
body.hong4 .profile-tab-wrap .profile-class-info img.alone {
  width: 13px;
}
body.hong4 .profile-tab-wrap .profile-class-info .profile-class-type > div:first-child::after {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  content: "";
  width: 1px;
  height: 20px;
  background: var(--h-color-ddd);
}
body.hong4 .profile-tab-wrap .profile-class-info .profile-class-count {
  padding: 20px;
  border-bottom: 1px solid var(--h-color-e9e);
}
body.hong4 .profile-tab-wrap .profile-class-info .profile-class-count .f-red {
  color: #da4841;
}
body.hong4 .profile-tab-wrap .profile-class-info .profile-class-count > p {
  text-align: center;
  font-size: 16px;
}
body.hong4 .profile-tab-wrap .profile-class-count .profile-class-count-progress {
  border-radius: 4px;
  width: 100%;
  height: 8px;
  background: var(--h-color-eee);
  position: relative;
  overflow: hidden;
  margin: 20px 0 18px;
}
body.hong4 .profile-tab-wrap .profile-class-count .profile-class-count-progress .profile-class-count-bar-bar {
  width: 50%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: var(--h-main-color);
  border-radius: 4px;
}
body.hong4 .profile-tab-wrap .profile-class-count .profile-class-count-progress .profile-class-count-bar-bar .profile-class-count-bar-spot {
  width: 4px;
  height: 4px;
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  background: var(--h-color-fff);
  border-radius: 50%;
}
@media screen and (max-width: 719px) {
  body.hong4 .profile-tab-wrap .profile-class-info {
    font-size: 14px;
  }
  body.hong4 .profile-tab-wrap .profile-class-info img {
    width: 14px;
  }
  body.hong4 .profile-tab-wrap .profile-class-info img.alone {
    width: 10px;
  }
  body.hong4 .profile-tab-wrap .profile-class-info .profile-class-type {
    height: 44px;
  }
  body.hong4 .profile-tab-wrap .profile-class-info .profile-class-type > div {
    gap: 6px;
  }
  body.hong4 .profile-tab-wrap .profile-class-info .profile-class-count {
    padding: 16px;
  }
  body.hong4 .profile-tab-wrap .profile-class-info .profile-class-count > p {
    font-size: 12px;
  }
  body.hong4 .profile-tab-wrap .profile-class-count .profile-class-count-progress {
    margin: 16px 0;
  }
}
body.hong4 .profile-tab-wrap .profile-detail {
  width: calc(100% - 296px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
body.hong4 .profile-tab-wrap .profile-detail-top {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--h-color-e9e);
}
body.hong4 .profile-tab-wrap .profile-name {
  font-size: 1.75rem;
  font-weight: bold;
}
body.hong4 .profile-tab-wrap .profile-name.visit {
  font-size: 1.4375rem;
  word-break: keep-all;
  line-height: 34px;
}
body.hong4 .profile-tab-wrap .profile-number {
  font-size: 1.25rem;
}
@media screen and (max-width: 719px) {
  body.hong4 .profile-tab-wrap .profile-name.visit {
    line-height: 30px;
  }
  body.hong4 .profile-tab-wrap .profile-detail {
    width: 100%;
    align-items: center;
  }
  body.hong4 .profile-tab-wrap .profile-detail-top {
    width: 100%;
    text-align: center;
    margin-top: 16px;
    padding-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  body.hong4 .profile-tab-wrap .profile-name {
    font-size: 1.428rem;
  }
  body.hong4 .profile-tab-wrap .profile-number {
    font-size: 1rem;
  }
}
body.hong4 .profile-tab-wrap .profile-detail-bot {
  margin-top: 16px;
  display: flex;
  align-items: center;
}
body.hong4 .profile-tab-wrap .profile-detail-bot > p {
  display: flex;
  align-items: center;
}
body.hong4 .profile-tab-wrap .profile-detail-bot > p:not(:last-child)::after {
  content: "";
  width: 1px;
  height: 12px;
  background: var(--h-color-ddd);
  margin: 0 10px;
}
body.hong4 .profile-tab-wrap .profile-detail-bot > p > .i-list-won,
body.hong4 .profile-tab-wrap .profile-detail-bot > p > .i-list-partner,
body.hong4 .profile-tab-wrap .profile-detail-bot > p > .i-list-rookie {
  width: 18px;
  height: 18px;
  margin-right: 6px;
}
body.hong4 .profile-tab-wrap .profile-detail-bot > p > .i-share-btn {
  width: 20px;
  height: 20px;
  cursor: pointer;
}
body.hong4 .profile-tab-wrap .profile-detail-bot > p > span:nth-of-type(1) {
  margin-right: 6px;
}
body.hong4 .profile-tab-wrap .profile-detail-bot > p > .call-second {
  font-size: 0.875rem;
  color: var(--h-color-888);
}
@media screen and (max-width: 719px) {
  body.hong4 .profile-tab-wrap .profile-detail-bot > p > .call-second {
    font-size: 0.7857rem;
    margin-left: 4px;
    margin-top: 2px;
  }
}
@media screen and (max-width: 719px) {
  body.hong4 .profile-tab-wrap .profile-detail-bot {
    margin-top: 12px;
  }
  body.hong4 .profile-tab-wrap .profile-detail-bot > p:not(:last-child)::after {
    margin: 0 8px;
  }
  body.hong4 .profile-tab-wrap .profile-detail-bot > p .call-price {
    font-size: 1.142rem;
  }
  body.hong4 .profile-tab-wrap .profile-detail-bot > p > .i-list-won,
  body.hong4 .profile-tab-wrap .profile-detail-bot > p > .i-list-partner,
  body.hong4 .profile-tab-wrap .profile-detail-bot > p > .i-share-btn {
    width: 16px;
    height: 16px;
  }
  body.hong4 .profile-tab-wrap .profile-detail-bot > p > span:nth-of-type(1) {
    margin-right: 0;
  }
}
body.hong4 .profile-tab-wrap .profile-player {
  border-bottom: 1px solid var(--h-color-e9e);
  width: 100%;
  height: 80px;
  background: var(--h-color-fff);
  padding: 0px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px;
}
body.hong4 .profile-tab-wrap .profile-player > p {
  display: flex;
  align-items: center;
  gap: 12px;
}
@media screen and (max-width: 719px) {
  body.hong4 .profile-tab-wrap .profile-player {
    padding: 0 16px;
    gap: 10px;
    height: 56px;
  }
  body.hong4 .profile-tab-wrap .profile-player > p {
    font-size: 1rem;
  }
}
body.hong4 .profile-tab-wrap .profile-player .range-box {
  flex: 1 0 auto;
  height: 30px;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
}
body.hong4 .profile-tab-wrap .profile-player .range-bar {
  width: 100%;
  height: 3px;
  background: var(--h-color-e9e);
  position: relative;
  border-radius: 1.5px;
}
body.hong4 .profile-tab-wrap .profile-player .range-bar.move-range {
  position: absolute;
  width: calc(100% - 60px);
}
@media screen and (max-width: 719px) {
  body.hong4 .profile-tab-wrap .profile-player .range-bar.move-range {
    width: calc(100% - 40px);
  }
}
body.hong4 .profile-tab-wrap .profile-player .range-bar > .range-time {
  position: absolute;
  left: -100%;
  width: 100%;
  height: 3px;
  background: var(--h-color-222);
}
body.hong4 .profile-tab-wrap .profile-player .range-bar > .range-time > .play-time {
  width: 60px;
  height: 27px;
  line-height: 27px;
  border-radius: 13.5px;
  border: 1.2px solid var(--h-color-222);
  text-align: center;
  background: var(--h-color-fff);
  font-size: 0.875rem;
  transform: translateY(-50%);
  cursor: pointer;
  font-weight: bold;
  position: absolute;
  left: 100%;
  top: 50%;
}
body.hong4 .profile-tab-wrap .profile-player .i-sound {
  width: 30px;
  height: 22px;
}
body.hong4 .profile-tab-wrap .profile-player .i-player-play,
body.hong4 .profile-tab-wrap .profile-player .i-player-stop,
body.hong4 .profile-tab-wrap .profile-player .i-player-rewind {
  width: 40px;
  height: 40px;
  cursor: pointer;
}
@media screen and (max-width: 719px) {
  body.hong4 .profile-tab-wrap .profile-player .range-bar,
  body.hong4 .profile-tab-wrap .profile-player .range-bar > .range-time {
    height: 2px;
  }
  body.hong4 .profile-tab-wrap .profile-player .i-sound {
    width: 18px;
    height: 13px;
  }
  body.hong4 .profile-tab-wrap .profile-player .range-bar > .range-time > .play-time {
    width: 40px;
    height: 19px;
    line-height: 17px;
    border-radius: 9px;
    font-size: 0.714rem;
  }
  body.hong4 .profile-tab-wrap .profile-player .i-player-play,
  body.hong4 .profile-tab-wrap .profile-player .i-player-stop,
  body.hong4 .profile-tab-wrap .profile-player .i-player-rewind {
    width: 26px;
    height: 26px;
  }
}
body.hong4 .profile-tab-wrap .profile-recent {
  background: var(--h-color-fff);
  border-bottom: 1px solid var(--h-color-e9e);
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  padding: 0 20px;
}
body.hong4 .profile-tab-wrap .profile-recent .recent-month {
  display: flex;
  align-items: center;
  gap: 16px;
}
body.hong4 .profile-tab-wrap .profile-recent .recent-month > p {
  display: flex;
  align-items: center;
}
body.hong4 .profile-tab-wrap .profile-recent .recent-month > p > span {
  font-size: 1rem;
}
body.hong4 .profile-tab-wrap .profile-recent .recent-month > p > span:last-child {
  font-size: 0.875rem;
  margin-left: 4px;
  color: var(--h-color-666);
}
body.hong4 .profile-tab-wrap .profile-recent .recent-month .i-list-review,
body.hong4 .profile-tab-wrap .profile-recent .recent-month .i-list-star {
  width: 18px;
  height: 18px;
  margin-right: 6px;
}
body.hong4 .profile-tab-wrap .profile-recent .recent-more {
  font-size: 0.928rem;
  cursor: pointer;
  display: flex;
  align-items: center;
}
body.hong4 .profile-tab-wrap .profile-recent .recent-more .i-arrow-right {
  width: 6px;
  height: 10px;
  margin-left: 8px;
}
@media screen and (max-width: 719px) {
  body.hong4 .profile-tab-wrap .profile-recent {
    padding: 0 16px;
  }
  body.hong4 .profile-tab-wrap .profile-recent .recent-month {
    gap: 10px;
  }
  body.hong4 .profile-tab-wrap .profile-recent .recent-month > p:first-child {
    font-weight: bold;
    margin-right: 4px;
  }
  body.hong4 .profile-tab-wrap .profile-recent .recent-month > p > span:last-child {
    font-size: 0.857rem;
  }
  body.hong4 .profile-tab-wrap .profile-recent .recent-month .i-list-review,
  body.hong4 .profile-tab-wrap .profile-recent .recent-month .i-list-star {
    width: 11px;
    height: 11px;
    margin-right: 5px;
  }
  body.hong4 .profile-tab-wrap .profile-recent .recent-more .i-arrow-right {
    width: 4px;
    height: 7px;
    margin-left: 6px;
  }
}
body.hong4 .profile-tab-wrap .profile-tag-style {
  width: 100%;
  height: 52px;
  background: #f7f7fa;
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 20px;
  cursor: pointer;
  border-bottom: 1px solid #e9e9e9;
}
@media screen and (max-width: 719px) {
  body.hong4 .profile-tab-wrap .profile-tag-style {
    padding: 15px 16px;
    gap: 12px;
    font-size: 1rem;
    flex-wrap: wrap;
    height: auto;
    border-bottom: 1px solid #f1f1f1;
  }
}
body.hong4 .profile-tab-wrap .sale-product {
  padding: 24px 20px 32px;
  background: var(--h-color-fff);
  border-bottom: 1px solid var(--h-color-e9e);
}
@media screen and (max-width: 719px) {
  body.hong4 .profile-tab-wrap .sale-product {
    padding: 20px 16px 30px;
    border-bottom: none;
  }
}
body.hong4 .profile-tab-wrap .sale-product > h1 {
  font-size: 1.125rem;
  font-weight: bold;
  margin-bottom: 17px;
}
body.hong4 .profile-tab-wrap .sale-product > h1 > span {
  font-size: 0.875rem;
}
body.hong4 .profile-tab-wrap .sale-product .sale-product-ul {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
body.hong4 .profile-tab-wrap .sale-product .sale-product-ul .sale-product-list {
  display: flex;
  gap: 16px;
  height: 108px;
  position: relative;
}
body.hong4 .profile-tab-wrap .list-img {
  display: inline-block;
  position: relative;
  width: 21.38%;
  min-width: 154px;
  border-radius: 8px;
  overflow: hidden;
  margin-right: 0;
}
@media screen and (max-width: 719px) {
  body.hong4 .profile-tab-wrap .sale-product .sale-product-ul .sale-product-list {
    height: 59px;
    gap: 13px;
  }
  body.hong4 .profile-tab-wrap .sale-product .sale-product-ul {
    gap: 12px;
  }
  body.hong4 .profile-tab-wrap .list-img {
    width: 42.77%;
    max-width: 93px;
    min-width: auto;
    border-radius: 4px;
  }
}
body.hong4 .profile-tab-wrap .list-img > img {
  width: auto;
  height: 100%;
  display: block;
}
body.hong4 .profile-tab-wrap .list-img::after {
  content: "";
  position: absolute;
  color: var(--h-color-fff);
  border-radius: 4px;
  font-size: 0.758rem;
  font-weight: bold;
  top: 6px;
  left: 6px;
  padding: 5px 6px;
  text-align: center;
  line-height: 1.18;
}
body.hong4 .profile-info-img::after {
  content: "";
  font-size: 14px;
  line-height: 1.18;
  white-space: inherit;
}
body.hong4 .profile-tab-wrap .sale-product .list-item-content {
  width: calc(100% - 170px);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media screen and (max-width: 719px) {
  body.hong4 .profile-tab-wrap .list-img::after {
    border-radius: 2px;
    padding: 3px 4px;
    min-width: auto;
    font-size: 10px;
    font-weight: normal;
    top: 3px;
    left: 4px;
  }
  body.hong4 .profile-tab-wrap .sale-product .list-item-content {
    width: calc(100% - 106px);
    gap: 6px;
  }
}
body.hong4 .profile-tab-wrap .sale-product .list-item-content > p {
  display: flex;
  align-items: center;
  gap: 8px;
}
body.hong4 .profile-tab-wrap .sale-product .list-item-content .i-list-won {
  width: 20px;
  height: 20px;
}
body.hong4 .profile-tab-wrap .sale-product .list-item-content .list-item-price {
  font-size: 1.125rem;
}
body.hong4 .profile-tab-wrap .sale-product .list-item-info {
  display: flex;
  justify-content: space-between;
}
body.hong4 .profile-tab-wrap .list-item-info .list-item-name {
  font-size: 1.25rem;
  line-height: 26px;
}
body.hong4 .profile-tab-wrap .sale-product .list-item-info .list-item-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 65%;
}
@media screen and (max-width: 719px) {
  body.hong4 .profile-tab-wrap .list-item-info .list-item-name {
    line-height: 18px;
  }
  body.hong4 .profile-tab-wrap .sale-product .list-item-content > p {
    font-size: 0.857rem;
    gap: 6px;
  }
  body.hong4 .profile-tab-wrap .sale-product .list-item-content .i-list-won {
    width: 14px;
    height: 14px;
  }
  body.hong4 .profile-tab-wrap .sale-product .list-item-content .list-item-price {
    font-size: 0.9285rem;
  }
  body.hong4 .profile-tab-wrap .sale-product .list-item-info .list-item-name {
    font-size: 1.0714rem;
  }
}
body.hong4 .profile-tab-wrap .sale-product .list-item-info .current-state {
  font-size: 0.75rem;
  padding: 6px;
  border: 1px solid;
  border-radius: 2px;
  font-weight: bold;
}
body.hong4 .profile-tab-wrap .sale-product .list-item-info .current-state.current-pos {
  color: var(--h-main-color);
  border-color: #ad93e9;
}
body.hong4 .profile-tab-wrap .sale-product .list-item-info .current-state.current-abs {
  color: var(--h-color-888);
  border-color: #acacac;
}
body.hong4 .profile-tab-wrap .sale-product .list-item-info .current-state.current-act {
  color: #1ab8be;
  border-color: #1ab8be;
}
body.hong4 .profile-common-more-btn,
body.hong4 .common-more-btn {
  width: 100%;
  height: 44px;
  font-size: 0.875rem;
  text-align: center;
  border-radius: 4px;
  border: 1px solid var(--h-color-ddd);
  background: var(--h-color-fff);
  cursor: pointer;
  margin-top: 24px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--h-body-font-family);
  color: var(--h-color-222);
}
body.hong4 .profile-common-more-btn .i-arrow-right,
body.hong4 .common-more-btn .i-arrow-right {
  width: 5px;
  height: 9px;
  margin-left: 8px;
}
body.hong4 .profile-common-more-btn .i-arrow-top,
body.hong4 .profile-common-more-btn .i-arrow-bot,
body.hong4 .common-more-btn .i-arrow-top,
body.hong4 .common-more-btn .i-arrow-bot {
  width: 9px;
  height: 5px;
  margin-left: 8px;
}
@media screen and (max-width: 719px) {
  body.hong4 .profile-tab-wrap .sale-product .list-item-info .current-state {
    padding: 4px;
  }
  body.hong4 .profile-common-more-btn,
  body.hong4 .common-more-btn {
    margin-top: 16px;
    height: 30px;
  }
  body.hong4 .profile-common-more-btn .i-arrow-right,
  body.hong4 .common-more-btn .i-arrow-right {
    width: 4px;
    height: 7px;
    margin-left: 6px;
  }
}
body.hong4 .profile-tab-wrap .service-container {
  margin-top: 6px;
}
body.hong4 .profile-tab-wrap .service-container h1 {
  font-size: 1.125rem;
  margin-bottom: 16px;
  font-weight: bold;
}
body.hong4 .profile-tab-wrap .service-container .service-inner-common {
  padding: 24px 20px 32px;
  background: var(--h-color-fff);
  margin-bottom: 6px;
  border-top: 1px solid var(--h-color-e9e);
  border-bottom: 1px solid var(--h-color-e9e);
  line-height: 20px;
}
body.hong4 .profile-tab-wrap .service-container.mt0 .service-inner-common {
  border-top: none;
}
body.hong4 .profile-tab-wrap .service-container .service-inner-common:last-child {
  margin-bottom: 0;
}
@media screen and (max-width: 719px) {
  body.hong4 .profile-tab-wrap .service-container h1 {
    margin-bottom: 15px;
  }
  body.hong4 .profile-tab-wrap .service-container .service-inner-common {
    padding: 20px 16px 30px;
  }
}
body.hong4 .profile-tab-wrap .service-container .service-inner-common:last-child {
  border-bottom: none;
}
body.hong4 .profile-tab-wrap .service-container .service-notice .service-notice-inner {
  padding: 0 114px;
  background: #f5f5f5;
  border-radius: 8px;
}
body.hong4 .profile-tab-wrap .service-container .service-notice .service-notice-con {
  padding: 32px 24px;
  background: var(--h-color-eee);
}
body.hong4 .profile-tab-wrap .service-container .service-notice .service-notice-con > p {
  line-height: 26px;
  margin-bottom: 24px;
}
body.hong4 .profile-tab-wrap .service-container .service-notice .service-notice-con .service-notice-img-box {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
}
@media screen and (max-width: 719px) {
  body.hong4 .profile-tab-wrap .service-container .service-notice .service-notice-inner {
    padding: 0;
    background: none;
  }
  body.hong4 .profile-tab-wrap .service-container .service-notice .service-notice-con {
    display: flex;
    flex-direction: column;
    padding: 0;
    background: none;
  }
  body.hong4 .profile-tab-wrap .service-container .service-notice .service-notice-con > p {
    order: 2;
    margin-bottom: 0;
    background: #f5f5f5;
    border-radius: 6px;
    padding: 14px;
  }
  body.hong4 .profile-tab-wrap .service-container .service-notice .service-notice-con .service-notice-img-box {
    order: 1;
    margin-bottom: 16px;
  }
}
body.hong4 .profile-tab-wrap .service-container .service-notice .service-notice-con .service-notice-img-box > img {
  width: 100%;
  display: block;
  margin: 0 auto;
  -o-object-fit: cover;
     object-fit: cover;
}
body.hong4 .profile-tab-wrap .service-container .basic-info .basic-info-inner {
  padding: 16px;
  border: 1px solid var(--h-color-e9e);
  border-radius: 6px;
  font-size: 1rem;
}
body.hong4 .profile-tab-wrap .service-container .basic-info .basic-info-inner > p {
  line-height: 28px;
}
body.hong4 .profile-tab-wrap .service-container .basic-info .basic-info-inner > p::before {
  content: "·";
  padding-right: 7px;
}
@media screen and (max-width: 719px) {
  body.hong4 .profile-tab-wrap .service-container .basic-info .basic-info-inner {
    padding: 14px;
  }
  body.hong4 .profile-tab-wrap .service-container .basic-info .basic-info-inner > p {
    line-height: 24px;
  }
}
body.hong4 .profile-tab-wrap .service-container .service-detail .service-detail-bg {
  width: 100%;
  border-radius: 8px;
  background: #f5f5f5;
  padding: 65px 115px 65px;
  overflow: hidden;
  position: relative;
}
@media screen and (max-width: 719px) {
  body.hong4 .profile-tab-wrap .service-container .service-detail .service-detail-bg {
    padding: 0;
    background: none;
  }
}
body.hong4 .profile-tab-wrap .service-container .service-detail-con {
  width: 100%;
  line-height: 20px;
}
body.hong4 .profile-tab-wrap .service-container .service-detail-con > img {
  width: 100%;
}
body.hong4 .profile-tab-wrap .service-container .service-detail-bg.fold .service-detail-con {
  max-height: 600px;
  overflow: hidden;
  position: relative;
}
body.hong4 .profile-tab-wrap .service-container .service-detail-bg.fold .detail-swiper-container {
  display: none;
}
body.hong4 .profile-tab-wrap .service-container .service-detail-bg.fold .service-detail-con::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 296px;
  background: linear-gradient(to bottom, rgba(245, 245, 245, 0), #f5f5f5);
}
body.hong4 .profile-tab-wrap .service-container .service-detail-bg.fold .service-detail-con.under::after {
  content: none;
}
@media screen and (max-width: 719px) {
  body.hong4 .profile-tab-wrap .service-container .service-detail-bg.fold .service-detail-con::after {
    background: linear-gradient(to bottom, rgba(245, 245, 245, 0), #ffffff);
  }
}
body.hong4 .profile-tab-wrap .service-container .detail-swiper-container {
  margin-top: 30px;
  padding-bottom: 20px;
  border-radius: 6px;
  position: relative;
}
body.hong4 .profile-tab-wrap .service-container .detail-swiper-container img {
  width: 100%;
  height: 100%;
}
body.hong4 .profile-tab-wrap .service-container .detail-swiper-container .swiper-button-next,
body.hong4 .profile-tab-wrap .service-container .detail-swiper-container .swiper-button-prev {
  margin-top: 0;
}
body.hong4 .profile-tab-wrap .service-container .detail-swiper-container .swiper-button-next::after,
body.hong4 .profile-tab-wrap .service-container .detail-swiper-container .swiper-button-prev::after {
  height: 100%;
}
body.hong4 .profile-tab-wrap .service-container .detail-swiper-container .swiper-button-next {
  right: 20px;
}
body.hong4 .profile-tab-wrap .service-container .detail-swiper-container .swiper-button-prev {
  left: 20px;
}
@media screen and (max-width: 719px) {
  body.hong4 .profile-tab-wrap .service-container .detail-swiper-container .swiper-button-next {
    right: 12px;
  }
  body.hong4 .profile-tab-wrap .service-container .detail-swiper-container .swiper-button-prev {
    left: 12px;
  }
}
body.hong4 .profile-tab-wrap .service-container .detail-swiper-container .detail-swiper-pagination {
  width: 100%;
}
body.hong4 .profile-tab-wrap .service-container .detail-swiper-container .detail-swiper-pagination .swiper-pagination-bullet {
  width: 6px;
  height: 6px;
  margin: 0 4px;
}
body.hong4 .profile-tab-wrap .service-container .detail-swiper-container .detail-swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--h-main-color);
}
body.hong4 .profile-tab-wrap .service-container .service-detail-close-btn {
  width: 100%;
  height: 56px;
  border-radius: 4px;
  background: #1ab8be;
  color: var(--h-color-fff);
  font-size: 1.25rem;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 32px;
}
body.hong4 .profile-tab-wrap .service-container .service-detail-bg .i-arrow-fff {
  width: 16px;
  height: 11px;
  margin-left: 12px;
  background: url(/hong4/_img/header/i-arrow-up-fff.png) no-repeat;
}
body.hong4 .profile-tab-wrap .service-container .service-detail-bg.fold .i-arrow-fff {
  background: url(/hong4/_img/header/i-arrow-down-fff.png) no-repeat;
}
body.hong4 .profile-tab-wrap .service-container .service-review .review-satisfy {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 0;
  background: #f3f3f3;
  border: 1px solid var(--h-color-e9e);
  border-radius: 4px;
}
body.hong4 .profile-tab-wrap .service-container .service-review .i-review-list {
  width: 16px;
  height: 16px;
  margin-right: 8px;
}
body.hong4 .profile-tab-wrap .service-container .service-review .review-box-li {
  padding: 20px 0;
  border-bottom: 1px solid #f1f1f1;
}
@media screen and (max-width: 719px) {
  body.hong4 .profile-tab-wrap .service-container .service-detail-close-btn {
    height: 44px;
    font-size: 1rem;
  }
  body.hong4 .profile-tab-wrap .service-container .service-detail-bg .i-arrow-fff {
    width: 12px;
    height: 8px;
  }
  body.hong4 .profile-tab-wrap .service-container .service-review .review-satisfy {
    padding: 10px 0;
    font-size: 1rem;
  }
  body.hong4 .profile-tab-wrap .service-container .service-review .i-review-list {
    width: 10.4px;
    height: 10.4px;
  }
  body.hong4 .profile-tab-wrap .service-container .service-review .review-box-li {
    padding: 16px 0;
  }
}
body.hong4 .profile-tab-wrap .service-container .service-review .review-box-li:last-child {
  border-bottom: none;
}
body.hong4 .profile-tab-wrap .service-container .service-review .review-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  text-align: inherit;
  padding: 0;
  background: none;
  max-height: none;
  border-bottom: none;
}
body.hong4 .profile-tab-wrap .service-container .service-review .review-pers {
  display: flex;
  align-items: center;
}
body.hong4 .profile-tab-wrap .service-container .service-review .review-pers-name {
  font-weight: bold;
  margin-right: 10px;
}
body.hong4 .profile-tab-wrap .service-container .service-review .review-star-box {
  display: flex;
  align-items: center;
  gap: 2px;
}
body.hong4 .profile-tab-wrap .service-container .service-review .i-star-point-full,
body.hong4 .profile-tab-wrap .service-container .service-review .i-star-point-half,
body.hong4 .profile-tab-wrap .service-container .service-review .i-star-point {
  width: 15px;
  height: 15px;
}
body.hong4 .profile-tab-wrap .service-container .service-review .reivew-date {
  font-size: 0.875rem;
  color: var(--h-color-999);
}
body.hong4 .profile-tab-wrap .service-container .service-review .review-bot > p {
  line-height: 26px;
  color: var(--h-color-444);
  padding-right: 20px;
}
@media screen and (max-width: 719px) {
  body.hong4 .profile-tab-wrap .service-container .service-review .review-pers-name {
    margin-right: 8px;
  }
  body.hong4 .profile-tab-wrap .service-container .service-review .i-star-point-full,
  body.hong4 .profile-tab-wrap .service-container .service-review .i-star-point-half,
  body.hong4 .profile-tab-wrap .service-container .service-review .i-star-point {
    width: 12px;
    height: 12px;
  }
  body.hong4 .profile-tab-wrap .service-container .service-review .reivew-date {
    font-size: 0.785rem;
  }
  body.hong4 .profile-tab-wrap .service-container .service-review .review-bot > p {
    font-size: 1rem;
    line-height: 22px;
  }
}
body.hong4 .profile-tab-wrap .service-container .service-faq .faq-box-li {
  display: none;
}
body.hong4 .profile-tab-wrap .service-container .service-faq.active .faq-box-li {
  display: block;
}
body.hong4 .profile-tab-wrap .service-container .service-faq .faq-box-li:nth-child(1),
body.hong4 .profile-tab-wrap .service-container .service-faq .faq-box-li:nth-child(2),
body.hong4 .profile-tab-wrap .service-container .service-faq .faq-box-li:nth-child(3) {
  display: block;
}
body.hong4 .profile-tab-wrap .service-container .service-faq .faq-box-li > p {
  line-height: 26px;
  position: relative;
  cursor: pointer;
  box-shadow: 0px -1px 0 0px var(--h-color-e9e);
  padding: 14px 30px 14px 20px;
  word-break: keep-all;
}
@media screen and (max-width: 719px) {
  body.hong4 .profile-tab-wrap .service-container .service-faq .faq-box-li > p {
    font-size: 1rem;
  }
}
body.hong4 .profile-tab-wrap .service-container .service-faq .faq-box-li > p.active {
  font-weight: bold;
}
body.hong4 .profile-tab-wrap .service-container .service-faq .i-faq {
  width: 14px;
  height: 14px;
  margin-right: 8px;
  position: absolute;
  left: 0;
  top: 20px;
}
body.hong4 .profile-tab-wrap .service-container .service-faq .i-arrow-faq {
  width: 12px;
  height: 7px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background: url(/hong4/_img/main/i-arrow-bot.png) no-repeat;
}
body.hong4 .profile-tab-wrap .service-container .service-faq .faq-box-li > p.active .i-arrow-faq {
  background: url(/hong4/_img/main/i-arrow-top.png) no-repeat;
}
body.hong4 .profile-tab-wrap .service-container .service-faq .faq-answer {
  display: none;
  border-top: 1px solid var(--h-color-e9e);
  border-bottom: 1px solid var(--h-color-e9e);
  padding: 14px;
  background: #f5f5f5;
  line-height: 26px;
}
@media screen and (max-width: 719px) {
  body.hong4 .profile-tab-wrap .service-container .service-faq .faq-answer {
    font-size: 1rem;
    line-height: 22px;
    padding: 14px 13px 16px 18px;
  }
}
body.hong4 .profile-tab-wrap .service-container .service-faq .profile-common-more-btn {
  margin-top: 20px;
}
body.hong4 .profile-tab-wrap .service-container .service-faq .i-arrow-bot {
  width: 9px;
  height: 5px;
  margin-left: 8px;
  background: url(/hong4/_img/main/i-arrow-bot.png) no-repeat;
}
body.hong4 .profile-tab-wrap .service-container .service-faq.active .i-arrow-bot {
  background: url(/hong4/_img/main/i-arrow-top.png) no-repeat;
}
body.hong4 .profile-footer {
  font-size: 1.125rem;
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  background: var(--h-color-fff);
  width: 100%;
  max-width: 718px;
  height: 77px;
  border-top: 1px solid rgba(0, 0, 0, 0.15);
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  z-index: 6;
}
body.hong4 .profile-footer > .like-box {
  font-weight: bold;
  width: 120px;
  height: 100%;
  background: var(--h-color-fff);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--h-color-e9e);
  cursor: pointer;
}
body.hong4 .profile-footer > input[type=checkbox] {
  display: none;
}
body.hong4 .profile-footer .like-box .i-like {
  width: 20px;
  height: 18px;
  margin-right: 8px;
  background: url(/hong4/_img/main/i-like.png) no-repeat;
  padding: 0;
}
@media screen and (max-width: 719px) {
  body.hong4 .profile-footer {
    height: 70px;
    padding: 10px;
    gap: 8px;
  }
  body.hong4 .profile-footer > .like-box {
    width: 60px;
    flex-direction: column;
    font-size: 0.857rem;
    gap: 4px;
  }
  body.hong4 .profile-footer .like-box .i-like {
    margin-right: 0;
    width: 16px;
    height: 14px;
  }
}
body.hong4 .profile-footer input[type=checkbox]:checked + .like-box > .i-like {
  background: url(/hong4/_img/main/i-like-on.png) no-repeat;
}
body.hong4 .profile-footer > .consul-box {
  font-weight: bold;
  color: var(--h-color-fff);
  font-size: 1.25rem;
  width: calc(100% - 130px);
  height: 100%;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  gap: 8px;
  cursor: pointer;
}
body.hong4 .profile-footer > .consul-box.payback {
  gap: 0;
}
body.hong4 .profile-footer > .consul-box > .payback-coin.special {
  margin-left: 12px;
  padding: 3px 16px 5px 32px;
  background-size: 11px 12px;
  background-position: left 13px center;
}
@media screen and (max-width: 719px) {
  body.hong4 .profile-footer > .consul-box {
    width: calc(100% - 60px);
  }
}
body.hong4 .profile-footer > .consul-box.chat {
  width: 200px;
}
body.hong4 .profile-footer > .consul-box.chat + .consul-box {
  width: calc(100% - 330px);
}
@media screen and (max-width: 719px) {
  body.hong4 .profile-footer > .consul-box.chat {
    width: 100px;
  }
  body.hong4 .profile-footer > .consul-box.chat + .consul-box {
    width: calc(100% - 170px);
  }
  body.hong4 .profile-footer > .consul-box.payback {
    flex-direction: row;
  }
  body.hong4 .profile-footer > .consul-box > .payback-coin.special {
    margin-left: 6px;
    padding: 3px 6px 5px 18px;
    background-size: 8px 9px;
    background-position: left 6px center;
    margin-top: 4px;
  }
  body.hong4 .profile-footer > .consul-box > .payback-coin.special span {
    font-size: 10px;
  }
}
body.hong4 .profile-footer > .consul-box > span {
  font-size: 0.875rem;
  font-weight: normal;
}
body.hong4 .profile-footer > .consul-box.pos {
  background: var(--h-main-color);
}
body.hong4 .profile-footer > .consul-box.fin {
  background: #c1c1c1;
}
body.hong4 .profile-footer > .consul-box.bell {
  background: #c1c1c1;
}
body.hong4 .profile-footer > .consul-box.ing {
  background: #1ab8be;
}
body.hong4 .profile-footer > .consul-box .i-list-bell {
  width: 21px;
  height: 22px;
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}
@media screen and (max-width: 719px) {
  body.hong4 .profile-footer > .consul-box {
    flex-direction: column;
    font-size: 1.142rem;
    gap: 4px;
  }
  body.hong4 .profile-footer > .consul-box .i-list-bell {
    width: 18px;
    height: 19px;
  }
}
body.hong4 .i-review.i-review-16 {
  background: url(../img/listIcon/listReview.png) center left/16px 16px no-repeat;
}
@media screen and (max-width: 719px) {
  body.hong4 .i-review.i-review-16 {
    background: url(../img/listIcon/listReview.png) center left/13px 13px no-repeat;
  }
}
body.hong4 .review.renewal .review-body .starwja > p > span {
  color: var(--h-color-666);
}
body.hong4 .review.renewal .review-body .starwja > p > span > b {
  color: var(--h-color-222);
  margin-left: 2px;
}
body.hong4 .i-star.i-star-17 {
  margin-right: 2px;
}
@media screen and (max-width: 719px) {
  body.hong4 .review.renewal .review-body .starwja > p > span > b {
    margin-left: 0;
    margin-right: 4px;
  }
  body.hong4 .i-star.i-star-17 {
    margin-right: 0;
  }
}
body.hong4 .review.renewal .review-body .title,
body.hong4 .blur-container .title {
  margin-top: 24px;
}
@media screen and (max-width: 719px) {
  body.hong4 .review.renewal .review-body .title,
  body.hong4 .blur-container .title {
    margin-top: 20px;
  }
}
body.hong4 .review.renewal .review-body {
  padding-top: 0;
}
body.hong4 .review-body .i-arrow-r {
  background: url(../img/common/arrowRight.png) right 60%/5px 9px no-repeat;
  padding-right: 12px;
}
body.hong4 .title .i-question {
  background: url(../img/common/question_y.png) no-repeat;
  background-size: 100%;
}
body.hong4 .bar-div .detail-link .i-arrow-t {
  background: url(../img/common/arrowTop.png) right center/12px 7px no-repeat;
}
body.hong4 .bar-div .detail-link .i-arrow-b {
  background: url(../img/common/arrowBottom.png) right center/12px 7px no-repeat;
}
@media screen and (max-width: 719px) {
  body.hong4 .bar-div .detail-link .i-arrow-t {
    background: url(../img/common/arrowTop.png) right center/8px 5px no-repeat;
  }
  body.hong4 .bar-div .detail-link .i-arrow-b {
    background: url(../img/common/arrowBottom.png) right center/8px 5px no-repeat;
  }
  body.hong4 .bar-div .detail-link .i-arrow-t,
  body.hong4 .bar-div .detail-link .i-arrow-b {
    padding-right: 14px;
  }
}
body.hong4 .profile-review .comment-img {
  padding: 0 143px;
}
body.hong4 .profile-review .comment-img .comment-bg {
  padding: 0 67px;
}
@media screen and (max-width: 719px) {
  body.hong4 .profile-review .comment-img .comment-bg {
    padding: 0;
    background: none;
  }
  body.hong4 .profile-review .comment-img {
    padding: 0 59px;
  }
}
body.hong4 .qna,
body.hong4 .post,
body.hong4 .review.renewal {
  background: var(--h-color-fff);
}
body.hong4 .profile-question li::before {
  border-radius: 2px;
}
body.hong4 .post-list .photo > img {
  width: 100%;
  height: 100%;
}
body.hong4 .post-list .list-info-num > span {
  order: 1;
}
body.hong4 .post .post-list .post-content .comment {
  color: var(--h-color-666);
}
body.hong4 .post .profile-notice_img > img {
  width: 100%;
}
body.hong4 .post .color-text_b {
  color: var(--h-color-222);
}
body.hong4 .i-close.post-dl {
  background: url(../img/common/close_btn.png) no-repeat left 9px center;
  background-size: 9px 9px;
  font-size: 13px;
}
@media screen and (max-width: 719px) {
  body.hong4 .i-close.post-dl {
    background: url(../img/common/close_btn.png) no-repeat left 6px top 5px;
    background-size: 7px 7px;
    font-size: 12px;
  }
}
body.hong4 .payback-coin {
  margin-left: 10px;
  position: relative;
  top: -1px;
}
body.hong4 .payback-coin.special {
  font-size: 11px;
  line-height: 16px;
  padding: 6px 9px 6px 26px;
  border-radius: 13px;
  background-size: 10px 11px;
  background-position: left 10px center;
}
body.hong4 .popup-bg .consult .postpaid-text b {
  color: var(--h-main-color);
}
@media screen and (max-width: 719px) {
  body.hong4 .popup-bg .popup-center .i-call {
    background: none;
    padding: 0;
    font-size: 1.0714rem;
  }
  body.hong4 .popup-bg .popup-center .call-number {
    font-size: 1rem;
  }
  body.hong4 .payback-coin {
    margin-left: 6px;
    padding-left: 19px;
  }
  body.hong4 .payback-coin.special {
    font-size: 10px;
    line-height: 13px;
    padding: 4px 3px 4px 15px;
    background-size: 8px 9px;
    background-position: left 6px center;
  }
  body.hong4 .payback-coin.special > span {
    display: inline-block;
    transform: scale(0.9);
  }
}
body.hong4 .popup-bg .popup-center .f-bold span {
  font-weight: normal;
  font-size: 16px;
  margin-top: 0;
}
@media screen and (max-width: 719px) {
  body.hong4 .popup-bg .popup-center .f-bold span {
    font-size: 12px;
  }
}
body.hong4 .popup-bg .popup-center .i-arrow-r.add-coin {
  background-position: right center;
  font-weight: bold;
}
body.hong4 .footer-chat {
  padding: 10px 20px;
  position: fixed;
  height: 77px;
}
body.hong4 .footer-chat.old-f-chat {
  padding: 0;
  height: 60px;
}
body.hong4 .inner-body .check-box {
  margin-top: 20px;
}
body.hong4 .header-list.snb .event-box {
  color: var(--h-color-222) !important;
}
@media screen and (max-width: 719px) {
  body.hong4 .inner-body .check-box {
    margin-top: 14px;
  }
  body.hong4 .wrapper.chat-wrap .header.ver2,
  body.hong4 .wrapper.zoom-wrap .header.ver2,
  body.hong4 .wrapper.chat-wrap .header.default,
  body.hong4 .wrapper.zoom-wrap .header.default {
    display: none;
  }
  body.hong4 .wrapper.chat-wrap .nav,
  body.hong4 .wrapper.zoom-wrap .nav,
  body.hong4 .wrapper.chat-wrap .nav,
  body.hong4 .wrapper.zoom-wrap .nav {
    display: flex;
    color: var(--h-color-fff);
    background: var(--h-main-color);
    font-size: 1.214rem;
  }
  body.hong4 .wrapper.chat-wrap .nav .i-back,
  body.hong4 .wrapper.zoom-wrap .nav .i-back {
    width: 8px;
    height: 12px;
    background: url(/hong4/_img/header/i-arrow-left.png) no-repeat;
  }
  body.hong4 .wrapper.chat-wrap .nav:not(.search-nav, .mymenu-nav) > p:last-child {
    display: none;
  }
}
body.hong4 .wrapper.chat-wrap .detail-wrap {
  padding-bottom: 77px;
}
body.hong4 .list-item .loc-inner .loc-tx > li img {
  height: 100%;
}
body.hong4 .pro-info-box {
  width: 100%;
  padding: 0 121px;
  background: #f5f5f5;
  border-radius: 8px;
}
body.hong4 .pro-info-inner {
  padding: 40px 50px;
  background: var(--h-color-eee);
  line-height: 28px;
}
body.hong4 .list-item .loc-tx {
  margin-bottom: 16px;
}
body.hong4 .service-notice > p,
body.hong4 .refund-info > p {
  line-height: 28px;
  padding-left: 14px;
  position: relative;
}
body.hong4 .service-notice > p::before,
body.hong4 .refund-info > p::before {
  content: "·";
  position: absolute;
  left: 2px;
  top: 0;
}
body.hong4 .service-notice.none > p::before,
body.hong4 .refund-info.none > p::before {
  content: none;
}
@media screen and (max-width: 719px) {
  body.hong4 .pro-info-box {
    padding: 14px 14px 18px;
    border-radius: 6px;
  }
  body.hong4 .pro-info-inner {
    padding: 0;
    background: none;
  }
  body.hong4 .service-notice > p,
  body.hong4 .refund-info > p {
    line-height: 22px;
  }
}
body.hong4 .share-info.ver2 > span {
  font-size: 0.75rem;
}
body.hong4 .share-info.ver2 > span > b {
  font-weight: bold;
  font-size: 1.125rem;
}
body.hong4 .text-nowrap {
  font-size: 1rem;
  line-height: 23px;
  font-weight: bold;
  text-align: left;
  padding: 0 10px;
}
body.hong4 .text-nowrap > p {
  padding: 0;
}
body.hong4 .text-nowrap > p::after {
  content: none;
}
body.hong4 .text-nowrap > span {
  color: var(--h-color-888);
  font-size: 0.875rem;
  font-weight: normal;
}
body.hong4 .zoom-box .inner-top {
  flex-direction: column;
  line-height: 26px;
  justify-content: center;
  align-items: center;
  background: #f3f4f7;
}
body.hong4 .inner-body .cs-time-select {
  padding: 30px 0;
  border-bottom: 1px solid var(--h-color-e9e);
}
body.hong4 .zoom-box .inner-body {
  padding-top: 12px;
  min-height: calc(100vh - 251px);
}
body.hong4 .zoom-box.inner-body {
  padding: 12px 16px 24px !important;
  min-height: calc(100vh - 251px);
}
@media screen and (max-width: 719px) {
  body.hong4 .inner-body .cs-time-select {
    padding: 20px 16px;
  }
  body.hong4 .zoom-box .inner-body {
    min-height: 100%;
    padding: 0;
  }
  body.hong4 .zoom-box .inner-top {
    line-height: 22px;
  }
  body.hong4 .zoom-box.inner-body {
    padding: 0 !important;
    min-height: 100%;
  }
}
body.hong4 .zoom-box .zoom-state {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--h-color-e9e);
}
body.hong4 .zoom-box .zoom-state .zoom-img {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-right: 20px;
  background: #b89d78;
  overflow: hidden;
  position: relative;
}
body.hong4 .zoom-box .zoom-state .zoom-img.icon {
  background: var(--h-color-fff);
  border: 1px solid #e1e1e1;
}
body.hong4 .zoom-box .zoom-state .zoom-img.icon > img {
  width: 32px;
  height: 24px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
body.hong4 .zoom-box .zoom-state .d-flex {
  align-items: center;
}
body.hong4 .zoom-box .zoom-state .zoom-img > img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
body.hong4 .zoom-box .zoom-state h3 {
  font-weight: bold;
}
body.hong4 .zoom-box .zoom-state .zoom-btn {
  font-size: 0.9375rem;
  color: var(--h-color-fff);
  background: var(--h-main-color);
  border-radius: 2px;
  padding: 8px 10px;
  font-weight: bold;
}
@media screen and (max-width: 719px) {
  body.hong4 .zoom-box .zoom-state {
    padding: 10px 16px;
  }
  body.hong4 .zoom-box .zoom-state .zoom-img {
    width: 60px;
    height: 60px;
  }
  body.hong4 .zoom-box .zoom-state .zoom-img.icon > img {
    width: 24px;
    height: 18px;
  }
  body.hong4 .zoom-box .zoom-state .zoom-btn {
    font-size: 0.857rem;
    padding: 6px 9px;
  }
}
body.hong4 .search-wrap {
  padding: 0;
}
body.hong4 .search-wrap .search-header {
  padding: 0 20px;
  border-bottom: 1px solid var(--h-color-888);
  height: 63px;
  display: flex;
  align-items: center;
}
body.hong4 .search-wrap .search-header > form {
  width: 100%;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap .search-header {
    padding: 0 16px;
    height: 50px;
  }
}
body.hong4 .search-header .search-input {
  color: var(--h-color-222);
  padding-right: 16px;
}
body.hong4 .search-header .btn_search span,
body.hong4 .search-inputbox .btn_search span {
  display: block;
  width: 22px;
  height: 22px;
  background: url(/hong4/_img/main/i-search.svg) no-repeat center/22px 22px;
  cursor: pointer;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-header .btn_search span {
    width: 18px;
    height: 18px;
    background-size: 18px 18px;
  }
}
body.hong4 .search-wrap .search-main {
  background: #f5f5f5;
}
body.hong4 .search-inner-common {
  padding: 24px 20px 32px;
  border-top: 1px solid var(--h-color-e9e);
  border-bottom: 1px solid var(--h-color-e9e);
  background: var(--h-color-fff);
  margin-bottom: 6px;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-inner-common {
    padding: 20px 16px 34px;
  }
}
body.hong4 .search-inner-common:first-child {
  border-top: none;
}
body.hong4 .search-inner-common:last-child {
  margin-bottom: 0;
  border-bottom: none;
}
body.hong4 .recent-search-box > h1,
body.hong4 .search-inner-header > h1 {
  font-size: 1.125rem;
  font-weight: bold;
}
body.hong4 .recent-search-box > h1 {
  margin-bottom: 16px;
}
body.hong4 .search-inner-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
@media screen and (max-width: 719px) {
  body.hong4 .recent-search-box > h1,
  body.hong4 .search-inner-header > h1 {
    font-size: 1rem;
  }
  body.hong4 .recent-search-box > h1 {
    margin-bottom: 13px;
  }
  body.hong4 .search-inner-header {
    margin-bottom: 8px;
  }
}
body.hong4 .recent-search-box .no-recent {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 0 8px;
  gap: 8px;
  color: var(--h-color-999);
  font-size: 1.125rem;
}
@media screen and (max-width: 719px) {
  body.hong4 .recent-search-box .no-recent {
    padding: 10px 0 0;
  }
}
body.hong4 .search-wrap .recent-search-box .i-history {
  width: 20px;
  height: 17px;
}
body.hong4 .search-inner-refresh-box {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--h-color-666);
}
body.hong4 .search-inner-refresh-box > span {
  font-size: 0.875rem;
}
body.hong4 .search-inner-refresh-box > button {
  border: 1px solid #e3e7ed;
  background: var(--h-color-fff);
  border-radius: 4px;
  width: 28px;
  height: 28px;
  background: url(/hong4/_img/main/i-refresh.png) no-repeat center/13px 13px;
  cursor: pointer;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-inner-refresh-box > button {
    width: 24px;
    height: 24px;
    background-size: 12px 12px;
    border-radius: 2px;
  }
}
body.hong4 .con-style-check-box,
body.hong4 .con-field-check-box {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body.hong4 .con-style-check-button > a > input[type=checkbox],
body.hong4 .con-field-check-button > input[type=checkbox] {
  display: none;
}
body.hong4 .con-style-check-button > a > input[type=checkbox]:checked + label,
body.hong4 .con-field-check-button > input[type=checkbox]:checked + label {
  background: var(--h-main-color);
  color: var(--h-color-fff);
  display: inline-flex;
  align-items: center;
}
body.hong4 .con-style-check-button label,
body.hong4 .con-field-check-button label {
  display: inline-block;
  height: 40px;
  line-height: 40px;
  padding: 0 12px;
  font-size: 0.875rem;
  border: 1px solid #e3e7ed;
  background: var(--h-color-fff);
  border-radius: 4px;
  cursor: pointer;
}
@media screen and (max-width: 719px) {
  body.hong4 .con-style-check-button label,
  body.hong4 .con-field-check-button label {
    padding: 0 11px;
    height: 32px;
    line-height: 30px;
    font-size: 1rem;
  }
}
body.hong4 .wrapper.search-page .nav {
  display: none;
}
@media screen and (max-width: 719px) {
  body.hong4 .wrapper.search-page .nav {
    display: flex;
    color: var(--h-color-fff);
    background: var(--h-main-color);
    font-size: 1.214rem;
  }
  body.hong4 .wrapper.search-page .nav .i-back {
    width: 8px;
    height: 12px;
    background: url(/hong4/_img/header/i-arrow-left.png) no-repeat;
  }
  body.hong4 .wrapper.search-page .header {
    display: none;
  }
}
body.hong4 .recent-button-box {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body.hong4 .recent-button-box > li {
  display: inline-flex;
  height: 40px;
  line-height: 40px;
  font-size: 0.875rem;
  border: 1px solid #e3e7ed;
  background: var(--h-color-fff);
  border-radius: 4px;
  cursor: pointer;
  align-items: center;
  gap: 4px;
  position: relative;
}
body.hong4 .recent-button-box > li > a {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 30px 0 12px;
}
body.hong4 .recent-button-box > li > .i-recent-exit {
  position: absolute;
  top: 50%;
  right: 0px;
  width: 10px;
  height: 10px;
  box-sizing: content-box;
  padding: 11px;
  background-size: 10px 10px !important;
  background-position: center center;
  transform: translateY(-50%);
}
@media screen and (max-width: 719px) {
  body.hong4 .recent-button-box > li {
    height: 32px;
    line-height: 32px;
    font-size: 1rem;
    gap: 4px;
  }
  body.hong4 .recent-button-box > li > a {
    padding: 0 27px 0 11px;
  }
  body.hong4 .recent-button-box > li > .i-recent-exit {
    width: 8px;
    height: 8px;
    background-size: 8px 8px !important;
  }
}
body.hong4 .search-header .search-inputbox .inputbox {
  margin-right: 16px;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-header .search-inputbox .inputbox {
    margin-right: 12px;
  }
}
body.hong4 .no-recent-result > h1 {
  font-size: 1.125rem;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--h-color-e9e);
}
body.hong4 .no-recent-result > h1 > b {
  font-weight: bold;
  color: var(--h-main-color);
}
body.hong4 .no-recent-result > div {
  padding-top: 20px;
}
body.hong4 .no-recent-result > div > h3 {
  font-size: 1.25rem;
  margin-bottom: 16px;
}
body.hong4 .no-recent-result > div > p {
  line-height: 28px;
  color: var(--h-color-888);
}
@media screen and (max-width: 719px) {
  body.hong4 .no-recent-result > h1 {
    padding-bottom: 15px;
  }
  body.hong4 .no-recent-result > div {
    padding-top: 15px;
  }
  body.hong4 .no-recent-result > div > h3 {
    font-size: 1.142rem;
  }
  body.hong4 .no-recent-result > div > p {
    font-size: 0.9285rem;
    line-height: 22px;
  }
}
body.hong4 .search-wrap > .search-keyword,
body.hong4 .search-wrap .recent-result-box > .search-keyword {
  padding: 0 20px;
  min-height: calc(100vh - 383px);
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap > .search-keyword,
  body.hong4 .search-wrap .recent-result-box > .search-keyword {
    padding: 0 16px;
    min-height: calc(100vh - 189px);
  }
}
body.hong4 .search-main > .recent-result-box {
  background: var(--h-color-fff);
}
body.hong4 .search-main .recent-result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}
body.hong4 .search-main .recent-result-header > h1 {
  font-size: 1.125rem;
}
body.hong4 .search-main .recent-result-header > h1 > b {
  font-weight: bold;
  color: var(--h-main-color);
}
body.hong4 .search-main .recent-result-header .search-filter-box select {
  padding: 5px 40px 7px 16px;
  border-radius: 2px;
  border: 1px solid #e3e7ed;
  font-size: 1rem;
  font-family: var(--h-body-font-family);
  background: url(/hong4/_img/footer/arrow-bottom.png) no-repeat right 16px center/12px 7px;
  color: var(--h-color-222);
}
body.hong4 .search-main .result-title-common {
  padding: 11px 20px 12px 20px;
  font-size: 0.875rem;
  background: #f3f4f7;
  border-top: 1px solid #e3e7ed;
  border-bottom: 1px solid #e3e7ed;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-main .recent-result-header {
    padding: 8px 16px;
  }
  body.hong4 .search-main .recent-result-header .search-filter-box select {
    padding: 3px 23px 4px 10px;
    font-size: 0.9285rem;
    background: url(/hong4/_img/footer/arrow-bottom.png) no-repeat right 10px center/7px 4px;
  }
  body.hong4 .search-main .result-title-common {
    padding: 8px 16px;
  }
}
body.hong4 .search-main .search-result-none {
  padding: 48px 0;
  text-align: center;
  background: var(--h-color-fff);
}
body.hong4 .search-main .search-result-none .i-search-none {
  width: 28px;
  height: 28px;
}
body.hong4 .search-main .search-result-none > p {
  color: var(--h-color-888);
  margin-top: 8px;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-main .search-result-none {
    padding: 40px 0;
  }
  body.hong4 .search-main .search-result-none .i-search-none {
    width: 24px;
    height: 24px;
  }
}
body.hong4 .inputbox .search-tag {
  width: 53px;
  padding: 9px 0;
  font-weight: bold;
  background: #f3f3f3;
  border: 1px solid #d8d8d8;
  border-radius: 4px;
  margin-right: 12px;
  text-align: center;
}
body.hong4 .inputbox .search-tag + #MainKeyword {
  width: calc(100% - 93px);
}
@media screen and (max-width: 719px) {
  body.hong4 .inputbox .search-tag {
    width: 45px;
    padding: 6px 0;
    margin-right: 10px;
  }
  body.hong4 .inputbox .search-tag + #MainKeyword {
    width: calc(100% - 79px);
  }
}
body.hong4 .search-wrap #list {
  background: #f5f5f5;
}
body.hong4 .search-wrap #list .list-item-inner {
  height: auto;
  padding: 26px 30px 24px;
  border-top: 1px solid #e9e9e9;
}
body.hong4 .search-wrap #list .list-item-inner:last-child {
  margin-bottom: 0;
  border-bottom: 0;
}
body.hong4 .search-wrap #list .list-item-inner .counsel-style.grid,
body.hong4 .list-item-inner .counsel-style.grid {
  display: grid;
  grid-template-columns: 82px calc(100% - 82px);
  height: auto;
  border: 0;
  padding: 0;
  line-height: 44px;
  border-top: 1px solid #e9e9e9 !important;
}
body.hong4 .list-item-inner .counsel-style.grid.bt0 {
  border-top: none !important;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap #list .list-item-inner .counsel-style.grid,
  body.hong4 .list-item-inner .counsel-style.grid {
    line-height: 30px;
  }
}
body.hong4 .search-wrap #list .list-item-inner .counsel-style.grid > div,
body.hong4 .list-item-inner .counsel-style.grid > div {
  border-bottom: 1px solid #f1f1f1;
  border-right: 1px solid #f1f1f1;
  font-size: 0.875rem;
}
body.hong4 .search-wrap #list .list-item-inner .counsel-style.grid > div:nth-child(odd),
body.hong4 .list-item-inner .counsel-style.grid > div:nth-child(odd) {
  color: var(--h-color-999);
}
body.hong4 .search-wrap #list .list-item-inner .counsel-style.grid > div:nth-child(even),
body.hong4 .list-item-inner .counsel-style.grid > div:nth-child(even) {
  border-right: 0;
  padding-left: 10px;
}
body.hong4 .search-wrap #list .list-item-inner .counsel-style.grid .active {
  background: #ffe600;
  padding: 1px 3px;
}
body.hong4 .search-wrap #list .list-item-inner .comment {
  padding-top: 16px;
  line-height: 26px;
  font-size: 1rem;
  word-break: break-all;
}
body.hong4 .search-wrap #list .list-item-inner .comment-img {
  padding-top: 16px;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap #list .list-item-inner {
    padding: 24px 16px;
  }
  body.hong4 .search-wrap #list .list-item-inner .counsel-style.grid {
    line-height: 31px;
  }
  body.hong4 .search-wrap #list .list-item-inner .comment {
    padding-top: 12px;
    line-height: 22px;
  }
  body.hong4 .search-wrap #list .list-item-inner .comment-img {
    padding-top: 12px;
  }
}
body.hong4 .regular-header {
  background: var(--h-color-fff);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px 15px;
  position: relative;
  height: 61px;
}
@media screen and (max-width: 719px) {
  body.hong4 .regular-header {
    height: 51px;
  }
}
body.hong4 .regular-header::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 40px);
  height: 1px;
  background: var(--h-color-e9e);
  z-index: 1;
}
@media screen and (max-width: 719px) {
  body.hong4 .regular-header::after {
    width: calc(100% - 32px);
  }
}
body.hong4 .regular-filter-box select,
body.hong4 .regular-filter-box .filter-box {
  padding: 5px 40px 7px 16px;
  border-radius: 2px;
  border: 1px solid #e3e7ed;
  font-size: 1rem;
  font-family: var(--h-body-font-family);
  background: url(/hong4/_img/footer/arrow-bottom.png) no-repeat right 16px center/12px 7px;
  color: var(--h-color-222);
}
body.hong4 .regular-filter-box .filter-box {
  line-height: 24px;
  cursor: pointer;
}
body.hong4 .regular-filter-box .filter-box.active {
  border-color: var(--h-color-222);
  font-weight: bold;
}
body.hong4 .regular-pos-box {
  font-size: 0.9285rem;
}
body.hong4 .regular-pos-box input[type=checkbox] {
  display: none;
}
body.hong4 .regular-pos-box label {
  padding-left: 26px;
  cursor: pointer;
  position: relative;
}
body.hong4 .regular-pos-box label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 2px;
  border: 1px solid var(--h-color-ddd);
}
body.hong4 .regular-pos-box input:checked + label:before {
  background: url(/hong4/_img/main/i-checked.png) no-repeat center/10px 8px;
}
body.hong4 .regular-wrap .list-item i.i-list-delete {
  position: absolute;
  right: 18px;
  top: 12px;
  width: 16px;
  height: 16px;
  cursor: pointer;
  z-index: 2;
  padding: 10px;
  background-size: 16px 16px !important;
  background-position: center;
}
body.hong4 .regular-wrap .list-item .ellipsis {
  position: absolute;
  right: 11px;
  top: 8px;
  width: 4px;
  padding: 4px 9px;
  box-sizing: content-box;
  z-index: 2;
}
body.hong4 .regular-wrap .list-item .list-item-inner-top i.i-list-delete {
  top: -5px;
  right: -2px;
}
@media screen and (max-width: 719px) {
  body.hong4 .regular-pos-box label::before {
    width: 16px;
    height: 16px;
  }
  body.hong4 .regular-pos-box input:checked + label:before {
    background-size: 9px 7px;
  }
  body.hong4 .regular-filter-box select {
    padding: 4px 23px 5px 10px;
    font-size: 0.9285rem;
    background: url(/hong4/_img/footer/arrow-bottom.png) no-repeat right 10px center/7px 4px;
  }
  body.hong4 .regular-filter-box .filter-box {
    padding: 0 23px 0 10px;
    font-size: 0.9285rem;
    background: url(/hong4/_img/footer/arrow-bottom.png) no-repeat right 10px center/7px 4px;
  }
  body.hong4 .regular-wrap .list-item i.i-list-delete {
    width: 14px;
    height: 14px;
    right: 13px;
    top: 10px;
    background-size: 14px 14px !important;
  }
  body.hong4 .regular-wrap .list-item .list-item-inner-top i.i-list-delete {
    right: -3px;
    top: -5px;
  }
  body.hong4 .regular-wrap .list-item .ellipsis {
    right: 9px;
    top: 6px;
    width: 3px;
    padding: 2px 7px;
  }
}
body.hong4 .mypage-wrap + footer > .footer-top,
body.hong4 .profile-wrap + footer > .footer-top {
  margin-top: 0;
}
body.hong4 .recruit-banner img {
  width: 100%;
}
body.hong4 .mypage-wrap.recruit {
  border-top: none;
}
body.hong4 .mypage-wrap.recruit .linebar {
  height: auto;
}
body.hong4 .contents-wrap {
  overflow: hidden;
}
body.hong4 .contents-wrap .contents-header {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f7;
  border-bottom: 1px solid #e3e7ed;
  gap: 8px;
  height: 80px;
}
@media screen and (max-width: 719px) {
  body.hong4 .contents-wrap .contents-header {
    height: 60px;
  }
}
body.hong4 .contents-wrap .contents-main {
  padding-top: 24px;
}
body.hong4 .contents-wrap .contents-section,
body.hong4 .contents-wrap .contents-column,
body.hong4 .contents-wrap .contents-sns .title-wrap {
  padding: 0 20px;
}
body.hong4 .contents-wrap .contents-section {
  display: flex;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 40px;
}
body.hong4 .contents-wrap .contents-section > div {
  width: calc((100% - 32px) / 2);
}
body.hong4 .contents-wrap .i-contents,
body.hong4 .contents-wrap .i-short-tarot,
body.hong4 .contents-wrap .i-column,
body.hong4 .contents-wrap .i-gift {
  width: 24px;
  height: 24px;
}
@media screen and (max-width: 719px) {
  body.hong4 .contents-wrap .contents-main {
    padding-top: 18px;
  }
  body.hong4 .contents-wrap .contents-section,
  body.hong4 .contents-wrap .contents-column,
  body.hong4 .contents-wrap .contents-sns .title-wrap {
    padding: 0 16px;
  }
  body.hong4 .contents-wrap .contents-section {
    flex-direction: column;
  }
  body.hong4 .contents-wrap .contents-section > div {
    width: 100%;
  }
  body.hong4 .contents-wrap .i-contents,
  body.hong4 .contents-wrap .i-short-tarot,
  body.hong4 .contents-wrap .i-column,
  body.hong4 .contents-wrap .i-gift {
    width: 18px;
    height: 18px;
  }
}
body.hong4 .contents-wrap .contents-common-title {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--h-color-888);
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
body.hong4 .contents-wrap .contents-common-title > h3 {
  font-size: 1.125rem;
  font-weight: bold;
}
@media screen and (max-width: 719px) {
  body.hong4 .contents-wrap .contents-common-title {
    padding-bottom: 10px;
    margin-bottom: 16px;
  }
  body.hong4 .contents-wrap .contents-common-title > h3 {
    font-size: 1.0714rem;
  }
}
body.hong4 .contents-wrap .contents-common-title span {
  font-size: 0.875rem;
}
body.hong4 .contents-wrap .contents-common-title i.i-arrow-right {
  width: 5px;
  height: 9px;
}
body.hong4 .contents-wrap .contents-posting-ul,
body.hong4 .contents-wrap .contents-tarot-ul {
  display: flex;
  flex-direction: column;
  gap: 14px;
  line-height: 18px;
}
@media screen and (max-width: 719px) {
  body.hong4 .contents-wrap .contents-tarot-ul {
    width: calc(100% - 80px);
  }
  body.hong4 .contents-wrap .contents-posting-ul,
  body.hong4 .contents-wrap .contents-tarot-ul {
    font-size: 1.0714rem;
    gap: 12px;
  }
}
body.hong4 .contents-wrap .contents-posting-ul .i-profile-best {
  width: 40px;
  height: 18px;
}
body.hong4 .contents-wrap .contents-posting-ul > li > a,
body.hong4 .contents-wrap .contents-tarot-ul > li > a {
  display: flex;
  align-items: center;
  gap: 12px;
}
@media screen and (max-width: 719px) {
  body.hong4 .contents-wrap .contents-posting-ul .i-profile-best {
    width: 27px;
    height: 12px;
  }
  body.hong4 .contents-wrap .contents-posting-ul > li > a,
  body.hong4 .contents-wrap .contents-tarot-ul > li > a {
    gap: 8px;
  }
  body.hong4 .contents-wrap .contents-tarot-ul > li:nth-child(4),
  body.hong4 .contents-wrap .contents-tarot-ul > li:nth-child(5) {
    display: none;
  }
}
body.hong4 .contents-wrap .contents-posting-ul > li > a > span,
body.hong4 .contents-wrap .contents-tarot-ul > li > a > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.hong4 .contents-wrap .contents-posting-ul > li > a > i,
body.hong4 .contents-wrap .contents-tarot-ul > li > a > b {
  flex: none;
}
body.hong4 .contents-wrap .contents-tarot-img {
  display: none;
}
body.hong4 .contents-wrap .contents-tarot-img > img {
  width: 100%;
}
@media screen and (max-width: 719px) {
  body.hong4 .contents-wrap .contents-tarot-ul > li > a > span::before {
    content: "·";
    margin-right: 5px;
  }
  body.hong4 .contents-wrap .contents-tarot-ul > li > a > b {
    display: none;
  }
  body.hong4 .contents-wrap .contents-tarot-img {
    display: block;
    width: 64px;
    height: 59px;
    flex: none;
  }
  body.hong4 .contents-wrap .contents-tarot-box {
    display: flex;
    align-items: center;
    gap: 16px;
  }
}
body.hong4 .contents-wrap .contents-column-interview {
  width: 100%;
  background: #f3f4f7;
  border-radius: 4px;
  padding: 18px 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  position: relative;
}
body.hong4 .contents-wrap .contents-column-interview h3 {
  font-size: 1rem;
  font-weight: bold;
  margin-right: 8px;
  flex: 0 0 91px;
}
body.hong4 .contents-wrap .contents-column-interview span {
  margin-right: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.hong4 .contents-wrap .contents-column-interview .i-arrow-right {
  width: 5px;
  height: 9px;
  position: absolute;
  right: 16px;
  top: auto;
}
body.hong4 .contents-wrap .contents-column-interview .i-interview {
  width: 36px;
  height: 30px;
  margin-right: 16px;
  flex: 0 0 36px;
}
@media screen and (max-width: 719px) {
  body.hong4 .contents-wrap .contents-column-interview {
    padding: 18px 16px 18px 13px;
  }
  body.hong4 .contents-wrap .contents-column-interview .i-interview {
    width: 40px;
    height: 34px;
    margin-right: 12px;
    flex: 0 0 40px;
  }
  body.hong4 .contents-wrap .contents-column-interview h3 {
    flex: 0 0 79px;
  }
}
body.hong4 .minute-list {
  padding: 0;
  margin-bottom: 40px;
}
body.hong4 .minute-list .post-list-inner {
  padding: 16px 0;
  align-items: center;
}
@media screen and (max-width: 719px) {
  body.hong4 .minute-list .post-list {
    height: 88px;
  }
  body.hong4 .minute-list .post-list-inner > .d-flex {
    height: 100%;
  }
}
body.hong4 .minute-list .post-content .data span {
  color: var(--h-color-666);
}
body.hong4 .list-img.circle img {
  width: auto;
  height: 96%;
}
body.hong4 .post-list-inner .title,
body.hong4 .minute-list .post-content p,
body.hong4 .minute-list .post-content .title {
  height: auto;
}
body.hong4 .post-list-inner .title {
  color: var(--h-color-666);
}
body.hong4 .post-list .post-content .text-sort {
  color: var(--h-color-222);
}
body.hong4 .minute-list .comment {
  border-color: #e3e7ed;
  background: #f3f4f7;
  min-width: 64px;
  padding: 13px 0;
  font-size: 0.875rem;
  height: 62px;
}
@media screen and (max-width: 719px) {
  body.hong4 .minute-list .list-img.circle {
    width: 60px;
  }
  body.hong4 .minute-list .comment {
    height: 50px;
    min-width: 46px;
    font-size: 0.785rem;
    padding: 10px 0;
  }
}
body.hong4 .color-text_b {
  color: var(--h-main-color);
}
body.hong4 .sns-swiper-container {
  padding: 0 20px;
}
body.hong4 .sns-swiper-container .swiper-wrapper {
  display: flex;
  flex-direction: column;
}
body.hong4 .sns-swiper-container .swiper-slide {
  display: flex;
  align-items: center;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--h-color-e9e);
  position: relative;
}
body.hong4 .sns-swiper-container .swiper-slide:last-child {
  margin-bottom: 0;
  border-bottom: none;
}
body.hong4 .sns-swiper-container .swiper-slide > a {
  display: flex;
  align-items: center;
}
body.hong4 .sns-swiper-container .swiper-img {
  width: 172px;
  height: 96px;
  margin-right: 20px;
  flex: 0 0 172px;
  position: relative;
}
body.hong4 .sns-swiper-container .swiper-img > img {
  width: 100%;
  height: 100%;
}
body.hong4 .sns-swiper-container .swiper-img .video-timer {
  position: absolute;
  right: 4px;
  bottom: 4px;
  padding: 2px 3px;
  background: #03081b;
  color: var(--h-color-fff);
  font-size: 0.625rem;
  border-radius: 1px;
  letter-spacing: normal;
}
@media screen and (max-width: 719px) {
  body.hong4 .sns-swiper-container:not(.all-sns) .swiper-slide {
    border-bottom: none;
    width: auto;
  }
  body.hong4 .sns-swiper-container:not(.all-sns) .swiper-img {
    width: 158px;
    height: 88px;
    margin-right: 0;
    flex: none;
  }
  body.hong4 .sns-swiper-container:not(.all-sns) .swiper-img .video-timer {
    right: 2px;
    bottom: 2px;
  }
}
body.hong4 .sns-swiper-container.all-sns .swiper-slide .video-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
@media screen and (max-width: 719px) {
  body.hong4 .sns-swiper-container.all-sns .swiper-slide {
    align-items: flex-start;
    padding-bottom: 10px;
    margin-bottom: 10px;
  }
  body.hong4 .sns-swiper-container.all-sns .swiper-slide .video-info {
    flex-direction: column;
    width: calc(100% - 172px);
    justify-content: inherit;
    align-items: flex-start;
  }
  body.hong4 .sns-swiper-container.all-sns .swiper-slide p {
    width: 100%;
    flex: 0 0 100%;
    margin-right: 0;
    font-size: 1rem;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    height: 72px;
  }
  body.hong4 .sns-swiper-container.all-sns .swiper-img {
    width: 158px;
    height: 88px;
    flex: 0 0 158px;
    margin-right: 14px;
  }
}
body.hong4 .sns-swiper-container .swiper-slide p {
  font-size: 0.875rem;
  color: var(--h-color-333);
  width: 380px;
  line-height: 24px;
  flex: 0 0 380px;
  margin-right: 30px;
}
body.hong4 .sns-swiper-container .swiper-slide span {
  font-size: 0.875rem;
  color: var(--h-color-999);
  flex: 0 0 calc(100% - 602px);
  text-align: right;
}
@media screen and (max-width: 719px) {
  body.hong4 .sns-swiper-container:not(.all-sns) .swiper-wrapper {
    flex-direction: row;
  }
  body.hong4 .sns-swiper-container:not(.all-sns) .swiper-slide p,
  body.hong4 .sns-swiper-container:not(.all-sns) .swiper-slide span {
    display: none;
  }
}
body.hong4 .memberinfo-wrap {
  border-top: none;
  background: var(--h-color-fff);
}
body.hong4 .memberinfo-wrap .info-section {
  background: #f3f4f7;
  padding: 27px 0;
}
@media screen and (max-width: 719px) {
  body.hong4 .memberinfo-wrap .info-section {
    padding: 20px 16px;
  }
}
body.hong4 .memberinfo-wrap .info-section .post-info {
  margin: 0;
}
body.hong4 .memberinfo-wrap .info-section .post-info > p {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
body.hong4 .memberinfo-wrap .append-items:last-child {
  border-bottom: none;
}
body.hong4 .memberinfo-wrap .i-review.on {
  width: 24px;
  height: 24px;
}
body.hong4 .memberinfo-wrap .post-info .search-header {
  margin-top: 20px;
  padding: 9px 16px 7px;
}
@media screen and (max-width: 719px) {
  body.hong4 .memberinfo-wrap .post-info .search-header {
    margin-top: 14px;
    padding: 11px 16px;
  }
}
body.hong4 .memberinfo-wrap .post-list .post-content .title .text-sort {
  font-weight: bold;
}
body.hong4 .memberinfo-wrap .post-list-inner .title {
  height: auto;
  line-height: normal;
  align-items: center;
}
body.hong4 .memberinfo-wrap .post-list-inner .title > span {
  color: var(--h-color-666);
  font-size: 0.875rem;
}
body.hong4 .memberinfo-wrap .post-list .post-content .title .text-sort {
  margin-right: 8px;
}
body.hong4 .memberinfo-wrap .event-end-message > img {
  width: 28px;
  height: auto;
  margin-bottom: 0;
}
body.hong4 .memberinfo-wrap .post-detail-wrap .post-list {
  background: #f3f4f7;
}
body.hong4 .memberinfo-wrap .profile-notice_img > img {
  width: 100%;
}
body.hong4 .memberinfo-wrap .post-counselor {
  background: none;
  padding: 17px 20px 16px;
}
body.hong4 .memberinfo-wrap .write-btn {
  background: var(--h-main-color);
}
body.hong4 .memberinfo-wrap .post-counselor .d-flex-b-c {
  font-size: 0.875rem;
  margin-top: 10px;
}
body.hong4 .memberinfo-wrap .post-counselor .d-flex-b-c > div {
  color: var(--h-color-666);
  padding-right: 20px;
  background: url(/hong4/_img/main/i-arrow-bot.png) no-repeat right center/12px 7px;
  cursor: pointer;
}
body.hong4 .memberinfo-wrap .post-counselor .d-flex-b-c > div.open {
  background: url(/hong4/_img/main/i-arrow-top.png) no-repeat right 0px center/12px 7px;
}
body.hong4 .memberinfo-wrap .post-line {
  width: calc(100% - 40px);
  height: 1px;
  background: var(--h-color-e9e);
  margin: 0 auto;
}
body.hong4 .memberinfo-wrap .profile-tab-wrap .sale-product {
  padding-top: 16px;
}
body.hong4 .all-menu-wrap .all-menu-top,
body.hong4 .all-menu-wrap .all-menu-bot,
body.hong4 .all-menu-wrap .partner-banner {
  padding: 0 20px;
}
body.hong4 .all-menu-wrap .all-menu-top {
  background: #f6f6f6;
  padding-bottom: 20px;
  border-bottom: 1px solid #ececec;
}
@media screen and (max-width: 719px) {
  body.hong4 .all-menu-wrap .all-menu-top,
  body.hong4 .all-menu-wrap .all-menu-bot,
  body.hong4 .all-menu-wrap .partner-banner {
    padding: 0 10px;
  }
  body.hong4 .all-menu-wrap .all-menu-top {
    padding-bottom: 13px;
  }
}
body.hong4 .all-menu-wrap .all-menu-bot {
  padding-top: 20px;
}
@media screen and (max-width: 719px) {
  body.hong4 .all-menu-wrap .all-menu-bot {
    padding-top: 14px;
  }
}
body.hong4 .all-menu-wrap .all-menu-bot > .d-flex {
  margin-bottom: 12px;
}
body.hong4 .all-menu-wrap .all-menu-bot > .d-flex:last-child {
  margin-bottom: 0;
}
body.hong4 .all-menu-wrap .common-box {
  border-radius: 6px;
  background: var(--h-color-fff);
  border: 1px solid #ececec;
  position: relative;
  width: 100%;
  padding: 17px 14px 22px;
  cursor: pointer;
  height: 99px;
}
body.hong4 .all-menu-wrap .common-box::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  border-radius: 0 0 5px 5px;
  background: #f9f9f9;
  width: 100%;
  height: 8px;
}
body.hong4 .all-menu-wrap .i-new-cate {
  width: 20px;
  height: 20px;
}
@media screen and (max-width: 719px) {
  body.hong4 .all-menu-wrap .common-box {
    padding: 15px 13px 18px;
    height: 80px;
  }
  body.hong4 .all-menu-wrap .common-box::after {
    height: 6px;
  }
  body.hong4 .all-menu-wrap .i-new-cate {
    width: 14px;
    height: 14px;
  }
}
body.hong4 .all-menu-wrap .common-box h1 {
  font-family: "rixrak-sans-pro", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 1.5rem;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
body.hong4 .all-menu-wrap .common-box h1 > span {
  font-family: var(--h-body-font-family);
  font-weight: normal;
  font-size: 1.0625rem;
}
body.hong4 .all-menu-wrap .common-box p {
  font-size: 1.0625rem;
  line-height: 24px;
}
body.hong4 .all-menu-wrap .common-box p > b {
  font-size: 1.25rem;
  margin-right: 3px;
  margin-top: 1px;
}
@media screen and (max-width: 719px) {
  body.hong4 .all-menu-wrap .common-box h1 > span {
    font-size: 12px;
  }
  body.hong4 .all-menu-wrap .common-box h1 {
    font-size: 1.125rem;
    gap: 5px;
  }
  body.hong4 .all-menu-wrap .common-box p {
    line-height: 16px;
    font-size: 0.9285rem;
  }
}
body.hong4 .all-menu-wrap .d-flex.menu-two {
  width: 100%;
  justify-content: space-between;
  gap: 12px;
}
body.hong4 .all-menu-wrap .d-flex.menu-two > div {
  width: calc((100% - 12px) / 2);
}
@media screen and (max-width: 719px) {
  body.hong4 .all-menu-wrap .d-flex.menu-two {
    gap: 10px;
  }
}
body.hong4 .all-menu-wrap .d-flex.flex-column {
  flex-direction: column;
  gap: 12px;
}
body.hong4 .all-menu-wrap .common-box.call,
body.hong4 .all-menu-wrap .common-box.chat {
  height: 204px;
}
body.hong4 .all-menu-wrap .common-box.call {
  background: #d8e4ff;
  border-color: #cddbfb;
}
body.hong4 .all-menu-wrap .common-box.chat {
  background: #ede8ff;
  border-color: #e5defc;
}
body.hong4 .all-menu-wrap .common-box.call > p,
body.hong4 .all-menu-wrap .common-box.chat > p {
  line-height: 28px;
}
body.hong4 .all-menu-wrap .common-box.chat p {
  letter-spacing: 1px;
}
@media screen and (max-width: 719px) {
  body.hong4 .all-menu-wrap .common-box.call,
  body.hong4 .all-menu-wrap .common-box.chat {
    height: 166px;
  }
  body.hong4 .all-menu-wrap .common-box.call > p,
  body.hong4 .all-menu-wrap .common-box.chat > p {
    line-height: 16px;
  }
}
body.hong4 .all-menu-wrap .common-box::before {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 50%;
  transform: translateY(50%);
}
body.hong4 .all-menu-wrap .common-box.call::before {
  right: 14px;
  bottom: 4px;
  transform: none;
  width: 132px;
  height: 160px;
  background: url(/hong4/_img/main/category-call.png) no-repeat center/cover;
  pointer-events: none;
}
body.hong4 .all-menu-wrap .common-box.chat::before {
  right: 14px;
  bottom: 24px;
  transform: none;
  width: 112px;
  height: 152px;
  background: url(/hong4/_img/main/category-chat.png) no-repeat center/cover;
  pointer-events: none;
}
body.hong4 .all-menu-wrap .common-box.chat-call::before {
  width: 70px;
  height: 42px;
  background: url(/hong4/_img/main/category-chatcall.png) no-repeat center/cover;
}
body.hong4 .all-menu-wrap .common-box.video-call::before {
  width: 46px;
  height: 54px;
  background: url(/hong4/_img/main/category-videocall.png) no-repeat center/cover;
}
body.hong4 .all-menu-wrap .common-box.visiting::before {
  width: 47px;
  height: 53px;
  background: url(/hong4/_img/main/category-visiting.png) no-repeat center/cover;
}
body.hong4 .all-menu-wrap .common-box.cafe::before {
  width: 53px;
  height: 40px;
  background: url(/hong4/_img/main/category-cafe.png) no-repeat center/cover;
}
body.hong4 .all-menu-wrap .common-box.goods::before {
  width: 40px;
  height: 50px;
  background: url(/hong4/_img/main/category-goods.png) no-repeat center/cover;
}
body.hong4 .all-menu-wrap .common-box.naver::before {
  width: 50px;
  height: 55px;
  background: url(/hong4/_img/main/category-naver.png) no-repeat center/cover;
}
body.hong4 .all-menu-wrap .common-box.service::before {
  width: 56px;
  height: 43px;
  background: url(/hong4/_img/main/category-service.png) no-repeat center/cover;
  image-rendering: pixelated;
}
body.hong4 .all-menu-wrap .common-box.class::before {
  width: 62px;
  height: 44px;
  background: url(/hong4/_img/main/category-class.png) no-repeat center/cover;
}
body.hong4 .all-menu-wrap .common-box.event::before {
  width: 60px;
  height: 58px;
  background: url(/hong4/_img/main/category-event.png) no-repeat center/cover;
}
body.hong4 .all-menu-wrap .common-box.review::before {
  width: 51px;
  height: 44px;
  background: url(/hong4/_img/main/category-review.png) no-repeat center/cover;
}
body.hong4 .all-menu-wrap .common-box.contents::before {
  width: 46px;
  height: 46px;
  background: url(/hong4/_img/main/category-contents.png) no-repeat center/cover;
}
body.hong4 .all-menu-wrap .common-box.cs::before {
  width: 41px;
  height: 44px;
  background: url(/hong4/_img/main/category-cs.png) no-repeat center/cover;
}
body.hong4 .all-menu-wrap .common-box.success::before {
  width: 44px;
  height: 41px;
  background: url(/hong4/_img/main/category-success.png) no-repeat center/cover;
}
@media screen and (max-width: 719px) {
  body.hong4 .all-menu-wrap .common-box.call::before {
    width: 94px;
    height: 114px;
    right: 0;
    bottom: 6px;
  }
  body.hong4 .all-menu-wrap .common-box.chat::before {
    width: 78px;
    height: 106px;
    right: 12px;
    bottom: 10px;
  }
  body.hong4 .all-menu-wrap .common-box.chat-call::before {
    width: 41px;
    height: 25px;
    bottom: auto;
    top: 11px;
    transform: none;
  }
  body.hong4 .all-menu-wrap .common-box.video-call::before {
    width: 37px;
    height: 42px;
  }
  body.hong4 .all-menu-wrap .common-box.visiting::before {
    width: 36px;
    height: 41px;
  }
  body.hong4 .all-menu-wrap .common-box.cafe::before {
    width: 32px;
    height: 24px;
    top: 14px;
    bottom: auto;
    transform: none;
  }
  body.hong4 .all-menu-wrap .common-box.goods::before {
    width: 24px;
    height: 30px;
    top: 10px;
    bottom: auto;
    transform: none;
  }
  body.hong4 .all-menu-wrap .common-box.naver::before {
    width: 37px;
    height: 41px;
  }
  body.hong4 .all-menu-wrap .common-box.service::before {
    width: 31px;
    height: 24px;
    top: 13px;
    bottom: auto;
    transform: none;
  }
  body.hong4 .all-menu-wrap .common-box.class::before {
    width: 37px;
    height: 26px;
    top: 14px;
    bottom: auto;
    transform: none;
  }
  body.hong4 .all-menu-wrap .common-box.event::before {
    width: 41px;
    height: 39px;
    top: 11px;
    bottom: auto;
    transform: none;
  }
  body.hong4 .all-menu-wrap .common-box.review::before {
    width: 34px;
    height: 30px;
    top: 13px;
    bottom: auto;
    transform: none;
  }
  body.hong4 .all-menu-wrap .common-box.contents::before {
    width: 24px;
    height: 24px;
    top: 10px;
    bottom: auto;
    transform: none;
  }
  body.hong4 .all-menu-wrap .common-box.cs::before {
    width: 25px;
    height: 27px;
    top: 10px;
    bottom: auto;
    transform: none;
  }
  body.hong4 .all-menu-wrap .common-box.success::before {
    width: 30px;
    height: 28px;
    top: 10px;
    bottom: auto;
    transform: none;
  }
}
body.hong4 .all-menu-wrap .common-box.call::after {
  background: #d2e0ff;
}
body.hong4 .all-menu-wrap .common-box.chat::after {
  background: #e9e4ff;
}
body.hong4 .all-menu-wrap .common-box.call > h1,
body.hong4 .all-menu-wrap .common-box.chat > h1 {
  margin-bottom: 10px;
}
body.hong4 .all-menu-wrap .common-box.call p,
body.hong4 .all-menu-wrap .common-box.chat p {
  font-size: 1.25rem;
}
body.hong4 .all-menu-wrap .common-box.visiting {
  padding-right: 85px;
  margin: 13px 0;
}
body.hong4 .all-menu-wrap .common-box.cafe {
  padding-right: 75px;
  word-break: keep-all;
  margin-top: 13px;
}
body.hong4 .all-menu-wrap .common-box.goods {
  padding-right: 75px;
  word-break: keep-all;
  margin-top: 13px;
}
body.hong4 .all-menu-wrap .common-box.naver {
  padding-right: 75px;
  word-break: keep-all;
  margin-top: 13px;
}
@media screen and (max-width: 719px) {
  body.hong4 .all-menu-wrap .common-box.call p,
  body.hong4 .all-menu-wrap .common-box.chat p {
    font-size: 12px;
  }
  body.hong4 .all-menu-wrap .common-box.visiting {
    padding-right: 62px;
    margin: 11px 0;
  }
  body.hong4 .all-menu-wrap .common-box.cafe {
    margin-top: 11px;
  }
  body.hong4 .all-menu-wrap .common-box.goods {
    margin-top: 11px;
  }
  body.hong4 .all-menu-wrap .common-box.naver {
    padding-right: 60px;
    margin-top: 11px;
  }
}
body.hong4 .all-menu-wrap .common-box.service,
body.hong4 .all-menu-wrap .common-box.contents {
  padding-right: 72px;
}
@media screen and (max-width: 719px) {
  body.hong4 .all-menu-wrap .common-box.video-call {
    padding-right: 60px;
  }
  body.hong4 .all-menu-wrap .common-box.service,
  body.hong4 .all-menu-wrap .common-box.contents,
  body.hong4 .all-menu-wrap .common-box.cafe,
  body.hong4 .all-menu-wrap .common-box.goods {
    padding-right: 11px;
  }
}
body.hong4 .all-menu-wrap .common-box.visiting > h1,
body.hong4 .all-menu-wrap .common-box.service > h1,
body.hong4 .all-menu-wrap .common-box.contents > h1,
body.hong4 .all-menu-wrap .common-box.class > h1,
body.hong4 .all-menu-wrap .common-box.cafe > h1,
body.hong4 .all-menu-wrap .common-box.goods > h1 {
  margin-bottom: 12px;
}
body.hong4 .all-menu-wrap .common-box.naver > h1 {
  margin-bottom: 8px;
}
body.hong4 .all-menu-wrap .visiting-swiper .swiper-wrapper,
body.hong4 .all-menu-wrap .service-product-swiper .swiper-wrapper,
body.hong4 .all-menu-wrap .contents-swiper .swiper-wrapper,
body.hong4 .all-menu-wrap .hongcafe-hongdae-swiper .swiper-wrapper {
  gap: 6px;
}
body.hong4 .all-menu-wrap .visiting-swiper .swiper-slide,
body.hong4 .all-menu-wrap .service-product-swiper .swiper-slide,
body.hong4 .all-menu-wrap .contents-swiper .swiper-slide,
body.hong4 .all-menu-wrap .hongcafe-hongdae-swiper .swiper-slide {
  width: auto;
  background: #e9eeff;
  font-size: 0.75rem;
  border-radius: 12px;
  overflow: hidden;
}
body.hong4 .all-menu-wrap .visiting-swiper .swiper-slide > a,
body.hong4 .all-menu-wrap .service-product-swiper .swiper-slide > a,
body.hong4 .all-menu-wrap .contents-swiper .swiper-slide > a,
body.hong4 .all-menu-wrap .hongcafe-hongdae-swiper .swiper-slide > a {
  display: block;
  padding: 5px 10px;
}
@media screen and (max-width: 719px) {
  body.hong4 .all-menu-wrap .visiting-swiper .swiper-slide,
  body.hong4 .all-menu-wrap .service-product-swiper .swiper-slide,
  body.hong4 .all-menu-wrap .contents-swiper .swiper-slide,
  body.hong4 .all-menu-wrap .hongcafe-hongdae-swiper .swiper-slide {
    font-size: 0.785rem;
  }
  body.hong4 .all-menu-wrap .visiting-swiper .swiper-slide > a,
  body.hong4 .all-menu-wrap .service-product-swiper .swiper-slide > a,
  body.hong4 .all-menu-wrap .contents-swiper .swiper-slide > a,
  body.hong4 .all-menu-wrap .hongcafe-hongdae-swiper .swiper-slide > a {
    padding: 5px 8px;
  }
}
body.hong4 .all-menu-wrap .category-banner-container {
  width: 100%;
  padding: 0 20px;
  display: block;
  margin: 25px 0;
}
body.hong4 .all-menu-wrap .category-banner-container > img {
  width: 100%;
}
body.hong4 .all-menu-wrap .category-banner-container > img.mobile {
  display: none;
}
@media screen and (max-width: 719px) {
  body.hong4 .all-menu-wrap .category-banner-container {
    padding: 0 10px;
    margin: 25px 0 60px;
  }
  body.hong4 .all-menu-wrap .category-banner-container > img.pc {
    display: none;
  }
  body.hong4 .all-menu-wrap .category-banner-container > img.mobile {
    display: block;
  }
}
body.hong4 .minute-wrap {
  padding: 0 20px;
}
body.hong4 .minute-wrap .minute-list .post-list:first-child {
  margin-top: 0;
}
body.hong4 .minute-wrap .minute-img img {
  width: 100%;
}
@media screen and (max-width: 719px) {
  body.hong4 .minute-wrap {
    padding: 0 16px;
  }
}
@media screen and (max-width: 719px) {
  body.hong4 .post-detail-wrap .minute-tarot-img {
    width: 100%;
    height: auto;
  }
}
body.hong4 .post-detail-wrap .profile-notice_con.result {
  background: #8863a8;
}
@media screen and (max-width: 719px) {
  body.hong4 .post-detail-wrap .profile-notice_con.result {
    margin: 0;
  }
}
body.hong4 .post-detail-wrap .profile-notice_con.result .detail-title {
  display: none;
}
@media screen and (max-width: 719px) {
  body.hong4 .post-detail-wrap .profile-notice_con.result .detail-title {
    display: block;
    line-height: 22px;
  }
}
body.hong4 .memberinfo-wrap .post-detail-wrap .column-content-text img {
  width: 100%;
}
@media screen and (max-width: 719px) {
  body.hong4 .memberinfo-wrap .post-detail-wrap .column-content-text {
    padding: 0;
  }
  body.hong4 .memberinfo-wrap .post-detail-wrap .column-content-text .intv {
    padding: 20px 16px;
  }
}
body.hong4 .memberinfo-wrap .contents-wrap .sub-tab.sns-tab {
  padding: 0 20px;
  margin-top: 32px;
}
body.hong4 .memberinfo-wrap .contents-wrap .contents-sns {
  padding-top: 20px;
}
body.hong4 .memberinfo-wrap .contents-wrap .sub-tab.sns-tab ul li a b,
body.hong4 .memberinfo-wrap .contents-wrap .sub-tab.sns-tab ul li a.active {
  font-weight: normal;
}
body.hong4 .memberinfo-wrap .contents-wrap .sub-tab.sns-tab ul li a.active b {
  font-weight: bold;
}
body.hong4 .memberinfo-wrap .post-detail-wrap .post_bg.minute.tarot-minute {
  padding-top: 30px;
}
@media screen and (max-width: 719px) {
  body.hong4 .memberinfo-wrap .post-detail-wrap .post_bg.minute.tarot-minute {
    padding-top: 0;
  }
}
body.hong4 .memberinfo-wrap .post-detail-wrap .post_bg.border-n {
  border-top: none;
}
@media screen and (max-width: 719px) {
  body.hong4 .memberinfo-wrap .contents-wrap .sub-tab.sns-tab {
    height: 54px;
    line-height: 20px;
  }
  body.hong4 .memberinfo-wrap .contents-wrap .sub-tab.sns-tab ul li a b {
    display: block;
  }
  body.hong4 .memberinfo-wrap .contents-wrap .sub-tab.sns-tab ul li a {
    line-height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
body.hong4 .memberinfo-wrap .youtube-detail {
  padding: 23px 20px 32px;
}
body.hong4 .memberinfo-wrap .youtube-detail .youtube-date {
  color: var(--h-color-999);
  margin-bottom: 10px;
}
body.hong4 .memberinfo-wrap .youtube-detail .youtube-title {
  font-size: 1.125rem;
}
body.hong4 .memberinfo-wrap .youtube-detail .youtube-text {
  color: var(--h-main-color);
  margin-bottom: 30px;
}
body.hong4 .memberinfo-wrap .youtube-detail .ytb-p {
  font-size: 0.875rem;
  line-height: 22px;
}
@media screen and (max-width: 719px) {
  body.hong4 .memberinfo-wrap .youtube-detail .youtube-date {
    font-size: 0.857rem;
  }
  body.hong4 .memberinfo-wrap .youtube-detail .youtube-title {
    font-size: 1rem;
  }
  body.hong4 .memberinfo-wrap .youtube-detail .youtube-text {
    margin-bottom: 20px;
  }
  body.hong4 .memberinfo-wrap .youtube-detail .ytb-p {
    font-size: 1rem;
  }
}
body.hong4 .memberinfo-wrap .contents-wrap .instagram-detail {
  padding: 24px 20px;
}
body.hong4 .memberinfo-wrap .contents-wrap .instagram-detail .hongsta-listwp img {
  width: 100%;
}
body.hong4 .memberinfo-wrap .contents-wrap .instagram-detail .hongsta-listwp .hongsta-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
@media screen and (max-width: 719px) {
  body.hong4 .memberinfo-wrap .contents-wrap .instagram-detail .hongsta-listwp .hongsta-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 5px;
  }
}
body.hong4 .contents-wrap .evnet-wrap {
  padding: 32px 160px;
}
body.hong4 .contents-wrap .evnet-wrap li {
  margin-bottom: 16px;
}
body.hong4 .contents-wrap .evnet-wrap a {
  display: block;
}
body.hong4 .contents-wrap .evnet-wrap img {
  width: 100%;
}
@media screen and (max-width: 719px) {
  body.hong4 .contents-wrap .evnet-wrap {
    padding: 20px 16px;
  }
  body.hong4 .contents-wrap .evnet-wrap li {
    margin-bottom: 20px;
  }
}
body.hong4 .event-wrap .event-detail img {
  width: 100%;
  -o-object-fit: initial;
     object-fit: initial;
}
body.hong4 .header.ver2 .header-list li.active,
body.hong4 .header.default .header-list li.active {
  color: var(--h-color-fff);
  font-weight: bold;
}
body.hong4 .wrapper.menu-on .nav > p:last-child {
  display: flex;
}
body.hong4 .mypage-wrap.login-wrapper .user-login,
body.hong4 .mypage-wrap .user-login {
  background: #f3f4f7;
  border-top: none;
}
body.hong4 .mypage-wrap.login-wrapper .user-login-inner {
  width: auto;
  padding: 0 20px;
}
@media screen and (max-width: 719px) {
  body.hong4 .mypage-wrap .user-login {
    height: 60px;
  }
  body.hong4 .mypage-wrap.login-wrapper .user-login-inner {
    padding: 0 16px;
  }
  body.hong4 .inner-body .benefit-set > a {
    padding: 13px 12px;
  }
  body.hong4 .wrapper.menu-on .nav > p:first-child {
    display: flex !important;
  }
}
body.hong4 .mypage-wrap.login-wrapper .user-login-inner .btn {
  width: 120px;
  height: 44px;
  line-height: 44px;
  margin-left: 12px;
  border-radius: 2px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
body.hong4 .mypage-wrap.login-wrapper .btn_div .login_btn {
  background: var(--h-main-color);
  border: none;
  color: var(--h-color-fff);
}
body.hong4 .mypage-wrap.login-wrapper .i-login {
  width: 16px;
  height: 16px;
}
@media screen and (max-width: 719px) {
  body.hong4 .mypage-wrap.login-wrapper .user-login-inner .btn {
    width: 79px;
    height: 28px;
    line-height: 28px;
    margin-left: 8px;
    gap: 6px;
    font-size: 0.9285rem;
  }
  body.hong4 .mypage-wrap.login-wrapper .i-login {
    width: 12px;
    height: 12px;
  }
}
body.hong4 .mypage-wrap.login-wrapper .btn_div .sign_btn {
  background: #1ab8be;
}
body.hong4 .mypage-wrap:not(.consult):not(.cs-faq) .inner-body {
  padding-top: 24px;
}
@media screen and (max-width: 719px) {
  body.hong4 .mypage-wrap:not(.consult):not(.cs-faq) .inner-body {
    padding-top: 20px;
  }
}
body.hong4 .mypage-wrap .inner-body.main {
  padding: 0;
}
body.hong4 .mypage-wrap.login-wrapper .inner-body .notice {
  padding: 20px 16px;
  border-bottom: none;
}
@media screen and (max-width: 719px) {
  body.hong4 .mypage-wrap.login-wrapper .inner-body .notice {
    padding: 16px;
  }
}
body.hong4 .mypage-wrap.login-wrapper .inner-body .benefit-set {
  padding: 0 16px 20px;
  height: 76px;
}
body.hong4 .mypage-wrap.login-wrapper .inner-body .login-line {
  width: calc(100% - 32px);
  height: 1px;
  background: var(--h-color-e9e);
  margin: 0 auto;
}
body.hong4 .mypage-wrap.login-wrapper .mypage-grid {
  padding: 20px 16px 32px;
  height: 290px;
}
body.hong4 .mypage-wrap.login-wrapper .mypage-grid ul {
  grid-template-rows: 1fr 1fr 1fr;
}
body.hong4 .mypage-wrap.login-wrapper .mypage-grid ul li {
  border-radius: 4px;
  border-color: #e4ece5;
  background: #eef6f0;
}
body.hong4 .mypage-wrap.login-wrapper .mypage-grid ul li.new-tag::after {
  top: 4px;
  right: 4px;
}
body.hong4 .mypage-wrap.login-wrapper .mypage-grid ul li:nth-child(n+5) {
  border-color: #e3e9ec;
  background: #eef3f6;
}
body.hong4 .mypage-wrap.login-wrapper .mypage-grid ul li:nth-child(n+9) {
  border-color: #eee6ec;
  background: #f3f1f1;
}
body.hong4 .mypage-wrap.login-wrapper .mypage-grid ul li:nth-child(n+13) {
  border-color: #eeeee3;
  background: #f8f8ed;
}
body.hong4 .mypage-wrap.login-wrapper .mypage-grid ul li a {
  font-size: 0.938rem;
  font-weight: 500;
}
@media screen and (max-width: 719px) {
  body.hong4 .mypage-wrap.login-wrapper .mypage-grid ul li a {
    font-size: 0.9rem;
  }
}
body.hong4 .mypage-wrap.login-wrapper .inner-body .benefit-set > a {
  background: #f9f9f9;
  border-color: #f1f1f1;
  border-radius: 4px;
}
body.hong4 .mypage-wrap.login-wrapper .inner-body .benefit-set .i-benefit {
  font-weight: bold;
}
body.hong4 .mypage-wrap.login-wrapper .inner-body .benefit-set .i-arrow-r {
  background: none;
  padding-right: 0;
}
body.hong4 .mypage-wrap.login-wrapper .i-logout {
  width: 17px;
  height: 14px;
  margin-right: 8px;
}
@media screen and (max-width: 719px) {
  body.hong4 .mypage-wrap.login-wrapper .i-logout {
    width: 15px;
    height: 12px;
  }
}
body.hong4 .mypage-wrap.login-wrapper .user-info {
  width: 100%;
  height: 135px;
  background: #f3f4f7;
  border-bottom: 1px solid var(--h-color-e9e);
}
@media screen and (max-width: 719px) {
  body.hong4 .mypage-wrap.login-wrapper .user-info {
    height: 105px;
  }
}
body.hong4 .mypage-wrap.login-wrapper .user-info {
  display: flex;
  align-items: center;
  position: relative;
}
body.hong4 .mypage-wrap.login-wrapper .user-info::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 100%;
  background: #e3e7ed;
}
body.hong4 .mypage-wrap.login-wrapper .user-info > * {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 50%;
  gap: 10px;
}
body.hong4 .mypage-wrap.login-wrapper .user-info > * > p:first-child {
  font-size: 0.875rem;
}
body.hong4 .mypage-wrap.login-wrapper .user-info > * > .f-bold {
  font-size: 1.25rem;
}
body.hong4 .mypage-wrap .user-common-box {
  padding: 7px 16px 8px;
  border: 1px solid var(--h-color-999);
  background: var(--h-color-fff);
  border-radius: 16px;
  display: flex;
  align-items: center;
  margin-top: 4px;
  gap: 6px;
  font-size: 0.875rem;
}
@media screen and (max-width: 719px) {
  body.hong4 .mypage-wrap .user-common-box {
    padding: 5px 12px 7px;
  }
}
body.hong4 .mypage-wrap .i-setting-s,
body.hong4 .mypage-wrap .i-coin-s {
  width: 16px;
  height: 16px;
  margin-top: 1px;
}
body.hong4 .mypage-wrap .i-arrow-right {
  width: 5px;
  height: 9px;
}
@media screen and (max-width: 719px) {
  body.hong4 .mypage-wrap.login-wrapper .user-info > * > p:first-child {
    font-size: 0.714rem;
  }
  body.hong4 .mypage-wrap.login-wrapper .user-info > * > .f-bold {
    font-size: 1.142rem;
  }
  body.hong4 .mypage-wrap .i-setting-s,
  body.hong4 .mypage-wrap .i-coin-s {
    width: 12px;
    height: 12px;
  }
  body.hong4 .mypage-wrap .i-arrow-right {
    width: 4px;
    height: 7px;
  }
}
body.hong4 .mypage-wrap .inner-top.column {
  background: #f3f4f7;
  border-top: none;
}
body.hong4 .none-message > img {
  width: 28px;
  height: 28px;
  margin-bottom: 8px;
}
body.hong4 .mypage-wrap.consul-history .inner-body {
  padding-top: 24px;
}
@media screen and (max-width: 719px) {
  body.hong4 .none-message > img {
    width: 24px;
    height: 24px;
  }
}
body.hong4 .mypage-wrap.item .list-consult-ul .cut-line {
  align-items: center;
}
body.hong4 .mypage-wrap.item .list-consult-ul .cut-line .f-bold {
  flex: none;
}
body.hong4 .mypage-wrap.item .list-consult-ul .i-arrow-r {
  padding-right: 23px;
  background-position: right top 1px;
}
@media screen and (max-width: 719px) {
  body.hong4 .mypage-wrap.item .list-consult-ul .i-arrow-r {
    background-position: right top 2px;
  }
}
body.hong4 .mypage-wrap.detail .profile-info-img_s img,
body.hong4 .mypage-wrap.detail .profile-info-img img {
  -o-object-fit: cover;
     object-fit: cover;
}
body.hong4 .mypage-wrap.detail .class-list-btn a {
  font-weight: normal;
}
body.hong4 .mypage-wrap.detail .class-list-btn a .i-arrow-r {
  padding-right: 12px;
  background-size: 6px 10px;
  background-position: right top 3px;
}
@media screen and (max-width: 719px) {
  body.hong4 .mypage-wrap.detail .class-list-btn a .i-arrow-r {
    background-size: 5px 9px;
    background-position: right top 3px;
  }
}
body.hong4 .mypage-wrap.coin .user-login {
  border-top: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}
body.hong4 .mypage-wrap.coin .user-coin {
  font-size: 0.875rem;
}
body.hong4 .mypage-wrap.coin .user-coin > p {
  display: flex;
  align-items: center;
  gap: 8px;
}
body.hong4 .mypage-wrap.coin .user-coin b {
  font-size: 1.25rem;
}
body.hong4 .mypage-wrap .list-coin-ul .list-body .left > span {
  color: var(--h-color-999);
}
body.hong4 .mypage-wrap .list-coin-ul .list-body .center > p:last-child {
  color: var(--h-color-666);
}
body.hong4 .mypage-wrap.coin .i-charge-coin {
  width: 24px;
  height: 24px;
}
@media screen and (max-width: 719px) {
  body.hong4 .mypage-wrap.coin .i-charge-coin {
    width: 18px;
    height: 18px;
  }
}
body.hong4 .mypage-wrap.coin .coin-charge-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: normal;
  font-size: 1rem;
}
body.hong4 .mypage-wrap.item .zoom-box .inner-body {
  padding: 12px 16px 24px;
}
@media screen and (max-width: 719px) {
  body.hong4 .mypage-wrap.item .zoom-box .inner-body {
    padding: 0;
  }
}
body.hong4 nav.nav .i-arrow-right {
  width: 5px;
  height: 9px;
  margin-left: 6px;
}
body.hong4 .main-tab .count {
  color: var(--h-color-222);
  font-size: 0.75rem;
  vertical-align: middle;
  margin-bottom: 4px;
}
body.hong4 .main-tab ul li a.active {
  font-weight: bold;
}
body.hong4 .main-tab ul li a.active .count {
  color: var(--h-main-color);
}
body.hong4 .none-message .message {
  color: var(--h-color-888);
}
@media screen and (max-width: 719px) {
  body.hong4 nav.nav .review-policy {
    font-size: 0.857rem;
  }
  body.hong4 nav.nav .review-policy .i-arrow-right {
    background: url(/hong4/_img/main/i-arrow-right-w.png) no-repeat center/5px 9px;
  }
}
body.hong4 button.btn.white {
  font-family: var(--h-body-font-family);
}
body.hong4 button.photo-delete {
  margin-top: 20px;
}
body.hong4 .i-photo-delete {
  background: url(/hong4/_img/main/i-photo-delete.png) center left/17px 18px no-repeat;
  padding-left: 26px;
}
body.hong4 .review-write-inner dt {
  background: url(/hong4/_img/main/num1.png) left 2px/20px 20px no-repeat;
}
body.hong4 .review-write-inner dt.numb2 {
  background: url(/hong4/_img/main/num2.png) left 2px/20px 20px no-repeat;
}
body.hong4 .review-write-inner dt.numb3 {
  background: url(/hong4/_img/main/num3.png) left 2px/20px 20px no-repeat;
}
body.hong4 .review-write-inner dt.numb4 {
  background: url(/hong4/_img/main/num4.png) left 2px/20px 20px no-repeat;
}
body.hong4 .review-write-inner dt.numb5 {
  background: url(/hong4/_img/main/num5.png) left 2px/20px 20px no-repeat;
}
@media screen and (max-width: 719px) {
  body.hong4 .review-write-inner dt {
    background-size: 16px 16px;
  }
  body.hong4 .review-write-inner dt.numb2 {
    background-size: 16px 16px;
  }
  body.hong4 .review-write-inner dt.numb3 {
    background-size: 16px 16px;
  }
  body.hong4 .review-write-inner dt.numb4 {
    background-size: 16px 16px;
  }
  body.hong4 .review-write-inner dt.numb5 {
    background-size: 16px 16px;
  }
}
body.hong4 .review-policy input[type=checkbox]:checked + label {
  background-image: url(../img/common/check_on.png);
}
body.hong4 .review-policy label.checkbox {
  height: 22px;
}
body.hong4 .review-policy label u {
  padding-bottom: 2px;
  border-bottom: 1px solid var(--h-color-666);
}
body.hong4 .footer-fix.old-footer {
  height: 77px;
  padding: 10px 20px;
  position: fixed;
}
body.hong4 .profile-wrap .info-section {
  background: #f3f4f7;
}
body.hong4 .profile-wrap .info-section.write-review {
  padding: 0 160px;
  justify-content: flex-start;
}
@media screen and (max-width: 719px) {
  body.hong4 .profile-wrap .info-section.write-review {
    padding: 0;
  }
}
body.hong4 .profile-wrap .review-management {
  padding: 16px;
  background: #f5f5f5;
  border-radius: 8px;
  margin-top: 24px;
  line-height: 24px;
}
body.hong4 .profile-wrap .review-management > h3 {
  font-weight: bold;
  margin-bottom: 7px;
}
body.hong4 .profile-wrap .review-management > p {
  font-size: 0.875rem;
}
body.hong4 .profile-wrap .review-management > .text {
  margin-bottom: 10px;
}
body.hong4 .profile-wrap .review-management .p-dot {
  padding-left: 12px;
  position: relative;
}
body.hong4 .profile-wrap .review-management .p-dot::before {
  position: absolute;
  left: 0;
  top: 0;
  content: "·";
}
body.hong4 .i-like_cnt {
  background: url(../img/listIcon/it_like_cnt.png) left 1px/14px 12px no-repeat;
  padding-left: 20px;
}
body.hong4 .counsel-style.cut-line > p:first-child::after {
  display: inline-block;
  content: "";
  position: absolute;
  width: 1px;
  height: 12px;
  background: #ccc;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  left: auto;
}
body.hong4 .review-cs-in .counselor-info-con:nth-child(2) .info-con {
  width: 125px;
  text-align: right;
  white-space: pre;
  text-overflow: ellipsis;
  overflow: hidden;
}
@media screen and (max-width: 719px) {
  body.hong4 .review-cs-in .counselor-info-con:nth-child(2) .info-con {
    display: block;
  }
  body.hong4 .counselor-info-con .cs-number {
    margin-left: 6px;
  }
}
body.hong4 .mypage-wrap,
body.hong4 .main-tab {
  border-top: none;
}
body.hong4 .main-tab .count {
  display: inline-block;
}
body.hong4 .mypage-wrap.payment.alarm .inner-body {
  padding-top: 6px;
}
body.hong4 .mypage-wrap.payment.alarm .inner-body .common-more-btn {
  width: calc(100% - 10px);
  margin: 24px auto;
}
@media screen and (max-width: 719px) {
  body.hong4 .mypage-wrap.payment.alarm .inner-body {
    padding-top: 10px;
  }
  body.hong4 .mypage-wrap.payment.alarm .inner-body .common-more-btn {
    width: calc(100% - 32px);
    color: var(--h-color-222);
  }
}
body.hong4 .mypage-wrap .service-grid {
  gap: 9px;
}
body.hong4 .mypage-wrap .service-grid > a {
  border: 1px solid #e3e7ed;
  border-radius: 4px;
}
body.hong4 .mypage-wrap .service-grid .grid-a {
  border-right: none;
}
body.hong4 .mypage-wrap.payment.service.mobile .inner-body {
  padding-top: 0;
}
body.hong4 .mypage-wrap.payment.service.mobile .inner-body .service-top {
  background: #f3f4f7;
}
body.hong4 .mypage-wrap.payment.service.mobile .inner-body .service-body {
  padding: 21px 16px;
}
body.hong4 .mypage-wrap.videoinfo .i-video-info {
  width: 24px;
  height: 24px;
}
@media screen and (max-width: 719px) {
  body.hong4 .mypage-wrap.videoinfo .i-video-info {
    width: 18px;
    height: 18px;
  }
}
body.hong4 .mypage-wrap.videoinfo .user-login-inner {
  justify-content: center;
}
body.hong4 .mypage-wrap.videoinfo .user-login-inner .video-call-info {
  display: flex;
  align-items: center;
  gap: 8px;
}
body.hong4 .mypage-wrap.videoinfo .inner-body {
  padding: 24px 16px;
}
body.hong4 .mypage-wrap.videoinfo .inner-body .videocall-common-box {
  margin-bottom: 32px;
}
body.hong4 .mypage-wrap.videoinfo .inner-body .videocall-common-box > h3 {
  font-weight: bold;
  margin-bottom: 10px;
}
body.hong4 .mypage-wrap.videoinfo .inner-body .videocall-common-box > p {
  padding-left: 24px;
  position: relative;
  line-height: 28px;
}
@media screen and (max-width: 719px) {
  body.hong4 .mypage-wrap.videoinfo .inner-body {
    padding: 30px 16px;
  }
  body.hong4 .mypage-wrap.videoinfo .inner-body .videocall-common-box > p {
    line-height: 24px;
    padding-left: 20px;
  }
}
body.hong4 .mypage-wrap.videoinfo .inner-body .videocall-common-box.ul-box > p {
  padding-left: 15px;
}
body.hong4 .mypage-wrap.videoinfo .inner-body .videocall-common-box.ol-box > p::before,
body.hong4 .mypage-wrap.videoinfo .inner-body .videocall-common-box.ul-box > p::before {
  position: absolute;
  left: 0;
  top: 0;
}
body.hong4 .mypage-wrap.videoinfo .inner-body .videocall-common-box.ol-box > p:nth-of-type(1)::before {
  content: "①";
}
body.hong4 .mypage-wrap.videoinfo .inner-body .videocall-common-box.ol-box > p:nth-of-type(2)::before {
  content: "②";
}
body.hong4 .mypage-wrap.videoinfo .inner-body .videocall-common-box.ol-box > p:nth-of-type(3)::before {
  content: "③";
}
body.hong4 .mypage-wrap.videoinfo .inner-body .videocall-common-box.ol-box > p:nth-of-type(4)::before {
  content: "④";
}
body.hong4 .mypage-wrap.videoinfo .inner-body .videocall-common-box.ol-box > p:nth-of-type(5)::before {
  content: "⑤";
}
body.hong4 .mypage-wrap.videoinfo .inner-body .videocall-common-box.ul-box > p::before {
  content: "·";
}
body.hong4 .mypage-wrap.consult .inner-body > .my-header .on-off-check .check-set {
  align-items: center;
  justify-content: space-between;
}
@media screen and (max-width: 365px) {
  body.hong4 .mypage-wrap.consult .inner-body > .my-header .on-off-check .check-set {
    gap: 4px;
    padding: 16px 12px;
  }
}
body.hong4 .mypage-wrap.consult .inner-body > .my-header .on-off-check .switch-btn {
  margin-left: 0;
}
body.hong4 .mypage-wrap.consult .inner-body > .my-header .on-off-check .switch-btn label {
  position: static;
  transform: none;
}
body.hong4 .mypage-wrap.consult .inner-body > .my-header .my-info,
body.hong4 .mypage-wrap.consult .inner-body > .my-header .on-off-check {
  background: #f3f4f7;
}
body.hong4 .mypage-wrap.consult .inner-body > .my-header .my-info .level {
  display: flex;
  align-items: center;
}
body.hong4 .mypage-wrap.consult .inner-body .level .i-arrow-r {
  background-position: right top 2.5px;
}
body.hong4 .mypage-wrap.my-item .list-img img {
  -o-object-fit: cover;
     object-fit: cover;
}
body.hong4 .mypage-wrap.my-item .list-content .status {
  font-size: 1rem;
  color: var(--h-color-222);
}
body.hong4 .mypage-wrap.my-item .list-content .status > span {
  color: var(--h-main-color);
  font-size: 1rem;
}
body.hong4 .mypage-wrap.my-item .list-content .item-number > span {
  position: relative;
  padding-left: 6px;
  margin-left: 6px;
}
body.hong4 .mypage-wrap.my-item .list-content .item-number span {
  font-size: 1rem;
}
body.hong4 .mypage-wrap.my-item .list-content .item-number > span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 12px;
  background: #ccc;
  transform: translateY(-50%);
}
body.hong4 .mypage-wrap.chat-consult .list-item-ul .list-content .coin {
  font-size: 1rem;
}
body.hong4 .mypage-wrap.item .list-item-ul .list-content .coin .f666 {
  font-size: 0.875rem;
  margin-left: 4px;
}
body.hong4 .mypage-wrap.item .list-item-ul .list-content .coin > span:not(.n-flex) {
  display: flex;
  align-items: center;
}
body.hong4 .mypage-wrap.chat-consult .list-item-ul .list-content .coin .i-list-won {
  width: 18px;
  height: 18px;
  margin-right: 8px;
}
body.hong4 .mypage-wrap.item .list-item-ul .list-content {
  justify-content: flex-start;
  padding-top: 2px;
}
body.hong4 .mypage-wrap.chat-consult .list-item-ul li:first-child {
  padding-top: 0;
}
body.hong4 .mypage-wrap.item.consult .i-price-info {
  width: 24px;
  height: 24px;
}
@media screen and (max-width: 719px) {
  body.hong4 .mypage-wrap.item.consult .i-price-info {
    width: 18px;
    height: 18px;
  }
}
body.hong4 .mypage-wrap.item.consult .inner-top.column .item-info > p {
  display: flex;
  align-items: center;
  gap: 8px;
}
body.hong4 .mypage-wrap.consult .inner-body .number-set {
  font-size: 1rem;
}
body.hong4 .mypage-wrap.consult .inner-body .number-set .point {
  line-height: 28px;
}
body.hong4 .mypage-wrap.cs-faq .inner-top {
  border-top: none;
  background: #f3f4f7;
}
body.hong4 .mypage-wrap.cs-faq .list-img > img {
  -o-object-fit: cover;
     object-fit: cover;
}
body.hong4 .mypage-wrap.cs-faq.profile {
  border-top: none;
}
body.hong4 .input-wp .txt-input {
  border-color: var(--h-color-222) !important;
}
body.hong4 .input-wp .txt-input.b-c-dddddd {
  border-color: #dddddd !important;
}
body.hong4 .input-wp .txt-input.b-c-dddddd:active,
body.hong4 .input-wp .txt-input.b-c-dddddd:focus {
  border-color: #222222 !important;
}
body.hong4 .mypage-wrap.item-add.class .input-wp .txt-input {
  border-color: var(--h-color-ddd) !important;
}
body.hong4 .mypage-wrap.cs-faq.cs-notice .inner-body img {
  width: 100%;
}
body.hong4 .mypage-wrap.review.qna .info-section {
  border-top: none;
  background: #f3f4f7;
  border-bottom: 1px solid var(--h-color-e9e);
}
body.hong4 .popup-bg .popup-center .list-img.tag-none img {
  height: 95%;
  width: auto;
}
body.hong4 .review.renewal .review-body .i-question:hover::after {
  padding: 8px 12px 11px;
  line-height: 22px;
}
body.hong4 .color-text_g,
body.hong4 .profile-review .call-info > p {
  color: var(--h-color-666);
}
body.hong4 .post-list li:last-child {
  border-bottom: none;
}
body.hong4 .list-item .loc-inner .loc-tx > li img {
  margin-right: 6px;
}
body.hong4 .popup-bg .popup-center .share-info.ver2 > p {
  line-height: 26px;
  padding: 18px 0;
  font-size: 0.875rem;
}
body.hong4 .popup-bg .popup-center .share-info.ver2 > p > b {
  font-size: 1.125rem;
}
body.hong4 .popup-bg .popup-center .share-info.ver2 {
  height: auto;
}
body.hong4 .btn-set button .i-share,
body.hong4 .btn-set button .i-like {
  background-position: left center;
}
body.hong4 .p0 {
  padding: 0 !important;
}
body.hong4 .pb0 {
  padding-bottom: 0 !important;
}
body.hong4 .pb70 {
  padding-bottom: 70px !important;
}
body.hong4 .pb77 {
  padding-bottom: 77px !important;
}
body.hong4 .pt0 {
  padding-top: 0 !important;
}
body.hong4 .plr0 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.hong4 .plr16 {
  padding-left: 16px !important;
  padding-right: 16px !important;
}
body.hong4 .pt14 {
  padding-top: 14px !important;
}
body.hong4 .pt24 {
  padding-top: 24px !important;
}
@media screen and (max-width: 719px) {
  body.hong4 .m-pt-16 {
    padding-top: 16px !important;
  }
}
body.hong4 .bri0 {
  border-radius: 0 !important;
}
body.hong4 .menu-list li a {
  padding: 20px 16px;
}
body.hong4 .inner-body.main.pb .menu-list {
  padding-bottom: 80px;
}
@media screen and (max-width: 719px) {
  body.hong4 .inner-body.main.pb .menu-list {
    padding-bottom: 20px;
  }
}
body.hong4 .mypage-wrap.item .list-consult-ul .content {
  color: var(--h-color-666);
}
body.hong4 .class-list-btn a,
body.hong4 .class .list-item.class-list .class-list-btn a {
  height: 40px;
}
body.hong4 .ml12 {
  margin-left: 10px !important;
}
body.hong4 .mu-min-h {
  min-height: calc(100vh - 228px);
}
@media screen and (max-width: 719px) {
  body.hong4 .mu-min-h {
    min-height: calc(100vh - 127px);
  }
}
body.hong4 .pt30 {
  padding-top: 30px !important;
}
body.hong4 .pb50 {
  padding-bottom: 50px !important;
}
body.hong4 .pb80 {
  padding-bottom: 80px !important;
}
@media screen and (max-width: 719px) {
  body.hong4 .pb80 {
    padding-bottom: 50px !important;
  }
}
body.hong4 .mb80 {
  margin-bottom: 80px !important;
}
body.hong4 .pb160 {
  padding-bottom: 160px !important;
}
body.hong4 .mt0 {
  margin-top: 0 !important;
}
@media screen and (max-width: 719px) {
  body.hong4 .m-mt20 {
    margin-top: 20px !important;
  }
}
body.hong4 .ml0 {
  margin-left: 0 !important;
}
body.hong4 .mb0 {
  margin-bottom: 0 !important;
}
body.hong4 .mt24 {
  margin-top: 24px !important;
}
body.hong4 .mb24 {
  margin-bottom: 24px !important;
}
body.hong4 .mt1 {
  margin-top: 1px;
}
body.hong4 .mt4 {
  margin-top: 4px;
}
body.hong4 .mt10 {
  margin-top: 10px;
}
body.hong4 .mb10 {
  margin-bottom: 10px;
}
body.hong4 .mr6 {
  margin-right: 6px !important;
}
body.hong4 .bgff {
  background: var(--h-color-fff) !important;
}
body.hong4 .bgf5 {
  background: #f5f5f5 !important;
}
body.hong4 .f666 {
  color: #666 !important;
}
body.hong4 .fw500 {
  font-weight: 500;
}
body.hong4 .fs16 {
  font-size: 16px;
}
body.hong4 .l-h12 {
  line-height: 12px;
}
body.hong4 .l-h20 {
  line-height: 20px;
}
body.hong4 .mypage-wrap .list-coin-ul .list-body .left {
  line-height: 1.9;
}
@media screen and (max-width: 719px) {
  body.hong4 .popup-bg .popup-center .share-info.ver2 > p {
    padding: 16px 0;
  }
  body.hong4 .mypage-wrap .list-coin-ul .list-body {
    font-size: 0.9285rem;
    min-height: 76px;
  }
  body.hong4 .mypage-wrap .list-coin-ul .list-body .left,
  body.hong4 .mypage-wrap .list-coin-ul .list-body .center,
  body.hong4 .mypage-wrap .list-coin-ul .list-body .right {
    line-height: 1.71;
  }
  body.hong4 .mypage-wrap .list-coin-ul .list-body .f1 {
    font-size: 1.0714rem;
  }
}
body.hong4 .mypage-wrap.coin .inner-detail {
  padding: 24px 16px;
  padding-bottom: 50px;
}
body.hong4 .review-policy {
  font-size: 1rem;
  line-height: 29px;
}
@media screen and (max-width: 719px) {
  body.hong4 .review-policy {
    font-size: 12px;
    line-height: 17px;
  }
}
body.hong4 .review-policy .i-arrow-right {
  width: 7px !important;
  height: 12px !important;
}
@media screen and (max-width: 719px) {
  body.hong4 .review-policy .i-arrow-right {
    width: 5px !important;
    height: 9px !important;
    margin-left: 4px !important;
  }
}
body.hong4 .counselor-info-con .info-con {
  font-size: 0.75rem;
}
@media screen and (max-width: 719px) {
  body.hong4 .counselor-info-con .info-con {
    font-size: 0.857rem;
  }
}
body.hong4 .mypage-wrap.item .list-consult-ul.qna .list-body {
  align-items: center;
  padding: 16px 0;
}
@media screen and (max-width: 719px) {
  body.hong4 .mypage-wrap.item .list-consult-ul.qna .list-body {
    align-items: center;
    padding: 16px 0 20px;
  }
}
body.hong4 .mypage-wrap.item .list-consult-ul .data span {
  margin-left: 5px;
}
body.hong4 .list-consult-ul.qna.answer .comment-answer {
  margin: 16px 0 0 0;
}
body.hong4 .mypage-wrap.item .answer .list-consult-ul.answer .list-body {
  align-items: flex-start;
}
body.hong4 .mypage-wrap.alarm .list-item .text-sort {
  margin-top: 8px;
  color: var(--h-color-666);
}
@media screen and (max-width: 719px) {
  body.hong4 .mypage-wrap.alarm .list-item .text-sort {
    margin-top: 6px;
  }
}
body.hong4 .reserve-con .reserve-set {
  line-height: 23px;
}
body.hong4 .reserve-con .reserve-set::before,
body.hong4 .reserve-con .reserve-set::after {
  top: 50%;
}
body.hong4 .btn-set .i-arrow-r {
  padding-right: 15px;
  background-size: 6px 11px;
}
body.hong4 .list-board-ul li:first-child {
  color: var(--h-color-666);
}
body.hong4 .list-board-ul li:first-child .num {
  font-weight: normal;
}
body.hong4 .common-more-btn .i-arrow-bot {
  margin-top: 1px;
}
body.hong4 .profile-review .list-item-inner .star-set {
  margin-left: 8px;
}
body.hong4 .pb32 {
  padding-bottom: 32px !important;
}
body.hong4 .mypage-wrap.recruit .main-tab ul li a {
  font-size: 1rem;
  line-height: 55px;
}
@media screen and (max-width: 719px) {
  body.hong4 .mypage-wrap.recruit .main-tab ul li a {
    font-size: 1.214rem;
  }
}
body.hong4 .guide-box.consult .type li:nth-child(2) {
  background: url(/hong4/_img/main/i-chatcall.png) no-repeat center bottom 25px/29px 28px var(--h-color-fff);
}
body.hong4 .guide-box.consult .type li:nth-child(3) {
  background: url(/hong4/_img/main/i-videocall.png) no-repeat center bottom 27px/32px 22px var(--h-color-fff);
}
@media screen and (max-width: 719px) {
  body.hong4 .guide-box.consult .type li:nth-child(2),
  body.hong4 .guide-box.consult .type li:nth-child(3) {
    height: 92px !important;
  }
  body.hong4 .guide-box.consult .type li:nth-child(2) {
    background: url(/hong4/_img/main/i-chatcall.png) no-repeat center bottom 19px/29px 28px var(--h-color-fff);
  }
  body.hong4 .guide-box.consult .type li:nth-child(3) {
    background: url(/hong4/_img/main/i-videocall.png) no-repeat center bottom 24px/32px 22px var(--h-color-fff);
  }
}
body.hong4 .flex50 {
  flex: 50% !important;
}
body.hong4 .text-box {
  padding-bottom: 0;
}
body.hong4 .profile-wrap .review.renewal .review-top .review-body p:first-child {
  font-size: 1rem !important;
}
body.hong4 .review-text-inner .f-bolder.f000.f-s44 {
  margin-right: 2px;
}
body.hong4 .review-text-inner .review-middle-text {
  margin: 12px 0 20px;
  font-size: 1.0714rem !important;
}
body.hong4 .review-text-renewal .review-text-inner {
  width: calc(50% - 6px);
  flex: 0 0 calc(50% - 6px);
}
@media screen and (max-width: 719px) {
  body.hong4 .review-common-btn {
    height: 34px;
    line-height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  body.hong4 .review-common-btn > .i-arrow-r {
    background-position: right top 13px;
  }
  body.hong4 .i-write.circle.i-renewal {
    background: url(../img/common/review_wirte_blue.png) center left/14px 14px no-repeat, url(../img/common/arrow_right_b.png) right 57%/5px 9px no-repeat;
    padding: 0 14px 0 20px;
  }
  body.hong4 .review-text-inner .review-common-btn .i-renewal,
  body.hong4 .coin-gift-text {
    font-size: 0.9285rem !important;
  }
  body.hong4 .coin-gift-text {
    margin-top: 14px;
  }
  body.hong4 .profile-wrap .review.renewal .review-top.review-text-renewal .review-body {
    padding: 22.5px 0 14px;
  }
  body.hong4 .review.renewal .review-body .title {
    font-size: 1rem;
  }
  body.hong4 .review.renewal .main-tab ul li a {
    font-size: 1.0714rem;
  }
  body.hong4 .review.renewal .profile-review .i-option {
    font-size: 0.785rem;
  }
  body.hong4 .review-text-inner .review-middle-text {
    margin: 12px 0 16px;
  }
}
body.hong4 .info-section {
  font-size: 1.0714rem;
}
@media screen and (max-width: 719px) {
  body.hong4 .main-tab ul li a.active::after {
    height: 3px;
  }
  body.hong4 .label-text {
    font-size: 1.0714rem;
    text-indent: 6px;
  }
  body.hong4 .inner-top .item-info .cut-line {
    font-size: 1.0714rem;
  }
  body.hong4 .inner-top .i-coin_p {
    font-size: 1.0714rem;
  }
  body.hong4 .inner-body .cs-payment .f-bold,
  body.hong4 .inner-body .cs-time-select .f-bold {
    font-size: 1.214rem;
  }
  body.hong4 .inner-body .cs-payment .gray,
  body.hong4 .inner-body .cs-time-select .gray {
    font-size: 1.0714rem;
  }
  body.hong4 .i-coin_charge {
    font-size: 1.0714rem;
    background: url(../img/common/coin.png) center left/13px 14px no-repeat, url(../img/common/arrowRight.png) right 50%/5px 9px no-repeat;
  }
  body.hong4 .minute-list .post-content .title {
    font-size: 1.0714rem;
  }
  body.hong4 .post-list .post-content .text-sort {
    font-size: 0.9285rem;
    margin-bottom: 2px;
  }
  body.hong4 .post-info .search-header .search-input {
    font-size: 1rem !important;
  }
  body.hong4 .checkbox {
    font-size: 0.9285rem;
  }
  body.hong4 .post-list .post-content .text-sort {
    font-size: 1.0714rem;
  }
  body.hong4 .post-list .list-info-num,
  body.hong4 .post-list .counsel-info {
    font-size: 0.9285rem;
  }
  body.hong4 .post-list .list-info-num {
    margin-bottom: 4px;
  }
  body.hong4 .post-list .photo {
    width: 60px;
    height: 60px;
    min-width: 60px;
  }
  body.hong4 .post-list li .post-list-inner .post-content {
    min-height: 60px;
    height: 60px;
    padding: 0;
  }
  body.hong4 .post-list li {
    height: 88px;
  }
  body.hong4 .minute-list .post-list-inner {
    padding: 10px 0;
  }
  body.hong4 .minute-list.minute-tarot .post-content-ver2 {
    padding: 10px 0;
  }
}
body.hong4 .mr6 {
  margin-right: 6px !important;
}
body.hong4 .mypage-wrap.login-wrapper .inner-body .benefit-set .i-benefit,
body.hong4 .mypage-wrap.login-wrapper .inner-body .benefit-set .i-arrow-r,
body.hong4 .mypage-wrap.login-wrapper .inner-body .benefit-set > a {
  font-size: 1.0714rem;
}
@media screen and (max-width: 719px) {
  body.hong4 .mypage-wrap.login-wrapper .inner-body .benefit-set {
    padding: 0 16px 16px;
  }
  body.hong4 .mypage-wrap.login-wrapper .mypage-grid {
    padding: 16px 16px 20px;
  }
  body.hong4 .detail-grid > div {
    font-size: 15px;
  }
  body.hong4 .class-list-btn a,
  body.hong4 .class .list-item.class-list .class-list-btn a {
    font-size: 1rem;
  }
  body.hong4 .like-btn p {
    font-size: 16px;
    font-weight: normal;
  }
  body.hong4 .mypage-wrap.item .list-consult-ul.qna .text-sort {
    margin-top: 8px;
  }
  body.hong4 .mypage-wrap.item .list-consult-ul.qna .text-sort.cont {
    margin: 6px 0 12px;
  }
  body.hong4 .mypage-wrap .service-grid .grid-a p {
    font-size: 1rem;
  }
  body.hong4 .mypage-wrap.consult .main-tab ul li a {
    font-size: 1.142rem;
  }
  body.hong4 .mypage-wrap.consult .inner-body .my-info-inner .cut-line {
    font-size: 1.0714rem;
  }
  body.hong4 .mypage-wrap.consult .inner-body .level .i-arrow-r {
    font-size: 13px;
  }
  body.hong4 .mypage-wrap.consult .inner-body .on-off-check .check-set {
    font-size: 1.0714rem;
  }
  body.hong4 .mypage-wrap.consult .inner .j-call-item > p.f-bold,
  body.hong4 .mypage-wrap.consult .inner .j-buy-item > p.f-bold,
  body.hong4 .mypage-wrap.consult .inner p.f-bold,
  body.hong4 .mypage-wrap.consult .inner .reserve-con > p.f-bold {
    font-size: 1.0714rem;
  }
  body.hong4 .inner-top.column:not(.h80) {
    height: 60px;
  }
  body.hong4 .mypage-wrap.consult .price-select {
    color: var(--h-color-222);
  }
  body.hong4 .mypage-wrap.cs-faq .inner-top {
    border-bottom-color: #e3e7ed;
  }
  body.hong4 .box-select {
    font-size: 1rem;
  }
  body.hong4 .mypage-wrap.cs-notice .input-wp .tts {
    font-size: 1rem;
  }
  body.hong4 .mypage-wrap.review .profile-review .profile-review .call-info {
    padding: 10px 0 12px;
  }
}
body.hong4 .flex-center {
  display: flex;
  align-items: center;
}
body.hong4 .mypage-wrap.status .status-detail + .status-detail {
  padding-top: 0;
}
body.hong4 .mypage-wrap.status .status-detail + .status-detail::before {
  content: none;
}
body.hong4 .profile-wrap.hongtoon.renewal .hong-photo > a > img {
  width: 100%;
  height: 100%;
}
body.hong4 .review-write-inner .sel > option {
  font-size: 1rem !important;
}
body.hong4 .list-consult-ul.qna.answer .comment-question {
  word-break: break-all;
}
body.hong4 .bar-div.renewal {
  border-radius: 0;
}
body.hong4 .text-sort {
  height: 15px;
}
body.hong4 .i-style {
  padding: 0 14.5px;
}
body.hong4 .review.renewal .review-body .starwja {
  margin-bottom: 0;
}
@media screen and (max-width: 719px) {
  body.hong4 {
    /* 애정 */
    /* 재물 */
    /* 결혼 */
    /* 짝사랑 */
    /* 사업 */
    /* 가족 */
    /* 궁합 */
    /* 취업 */
    /* 건강 */
    /* 이별 */
    /* 진로 */
    /* 고민 */
    /* 재회 */
    /* 시험 */
    /* 이사 */
    /* 속마음 */
    /* 합격 */
    /* 꿈해몽 */
    /* 인간관계 */
  }
  body.hong4 .review.renewal .review-body .starwja {
    margin-bottom: 0;
  }
  body.hong4 .i-style.love {
    background-size: 18px 16px;
  }
  body.hong4 .i-style.money {
    background-size: 18px 15px;
  }
  body.hong4 .i-style.marriage {
    background-size: 18px 20px;
  }
  body.hong4 .i-style.sidelove {
    background-size: 16px 20px;
  }
  body.hong4 .i-style.buisiness {
    background-size: 16px 16px;
  }
  body.hong4 .i-style.family {
    background-size: 18px 17px;
  }
  body.hong4 .i-style.relationship {
    background-size: 18px 18px;
  }
  body.hong4 .i-style.recruit {
    background-size: 16px 20px;
  }
  body.hong4 .i-style.healty {
    background-size: 16px 18px;
  }
  body.hong4 .i-style.failure {
    background-size: 18px 16px;
  }
  body.hong4 .i-style.path {
    background-size: 18px 18px;
  }
  body.hong4 .i-style.worry {
    background-size: 18px 18px;
  }
  body.hong4 .i-style.reunion {
    background-size: 18px 17px;
  }
  body.hong4 .i-style.test {
    background-size: 16px 16px;
  }
  body.hong4 .i-style.move {
    background-size: 18px 12px;
  }
  body.hong4 .i-style.mind {
    background-size: 18px 18px;
  }
  body.hong4 .i-style.pass {
    background-size: 18px 15px;
  }
  body.hong4 .i-style.dream {
    background-size: 18px 18px;
  }
  body.hong4 .i-style.people {
    background-size: 18px 14px;
  }
}
body.hong4 .head-chat .i-close-chat {
  background-position: right center;
  background-size: 9px 9px;
  padding-right: 16px;
}
body.hong4 .head-chat .i-back-chat {
  background-position: right center;
  background-size: 13px 14px;
  padding-right: 24px;
}
body.hong4 .chat-close {
  margin-left: 20px;
}
@media screen and (max-width: 719px) {
  body.hong4 .head-chat .i-close-chat {
    background-size: 8px 8px;
    padding-right: 14px;
  }
  body.hong4 .head-chat .i-back-chat {
    background-position: right center;
    background-size: 13px 14px;
    padding-right: 24px;
  }
}
body.hong4 .i-best.ver1 {
  width: 48px;
  height: 20px;
  display: block;
  margin-left: 10px;
  background-position: center;
  background-size: cover;
}
body.hong4 .popup-bg.active {
  display: block !important;
}
body.hong4 .nav .i-question {
  display: none;
}
@media screen and (max-width: 719px) {
  body.hong4 .nav .i-question {
    display: block;
  }
}
body.hong4 .tab-wrap > .all {
  background: #f5f5f5;
}
body.hong4 .date-form button {
  color: var(--h-color-222);
}
@media screen and (max-width: 719px) {
  body.hong4 .review.renewal .review-body .i-question:hover::after {
    height: auto;
    width: auto;
  }
}
body.hong4 .wrapper.head-none .category-banner {
  display: none;
}
body.hong4 .login-btn {
  height: auto;
  font-family: var(--h-body-font-family);
  font-size: 1rem;
}
body.hong4 .login-btn.join {
  padding: 11.5px;
}
body.hong4 .login-btn.login {
  padding: 11.5px;
}
body.hong4 .profile-review .call-info {
  padding: 12px 0;
}
body.hong4 .profile-info-img > img {
  width: auto;
}
body.hong4 .review-cs {
  border-bottom: none;
}
body.hong4 .tab-wrap .list-item-container .list-item-inner-bot .list-recent > .review-none,
body.hong4 .tab-wrap .list-item-container .list-item-inner-bot .list-recent > .review-none > .i-is {
  height: 100%;
  line-height: 18px;
}
body.hong4 .tab-wrap .list-item-container .list-item-inner-bot .list-recent > .review-none > .i-is {
  background-position: left center;
}
body.hong4 .search-more-btn {
  width: calc(100% - 40px);
  margin: 0 auto 80px;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-more-btn {
    width: calc(100% - 32px);
    margin: 0 auto 80px;
  }
}
body.hong4 .list-info-num {
  color: var(--h-color-666);
}
body.hong4 #like-cnt {
  color: var(--h-color-222);
}
body.hong4 .header-policy-btn {
  font-size: 1rem;
}
@media screen and (max-width: 719px) {
  body.hong4 .header-policy-btn {
    font-size: 12px;
  }
}
body.hong4 .level::before {
  height: 21px;
  line-height: 19px;
}
body.hong4 .i-arrow-b.bs95 {
  background-size: 9px 5px;
  background-position: right center;
}
body.hong4 .popup-bg .popup-center .time-check.radio-4 .radio-box {
  margin-right: 15.5px;
  display: flex;
}
body.hong4 .mypage-wrap.faq > .inner-detail {
  min-height: calc(100vh - 584px);
}
@media screen and (max-width: 719px) {
  body.hong4 .mypage-wrap.faq > .inner-detail {
    min-height: calc(100vh - 306px);
  }
}
body.hong4 .box-select {
  font-size: 1rem;
}
body.hong4 .popup-bg.old-popup .popup-center .i-call {
  background: url(../img/listIcon/listCall.png) center left/18px 18px no-repeat;
  padding-left: 24px;
  font-size: 1rem;
}
body.hong4 .footer-btn_r .payback-coin {
  position: absolute !important;
  top: auto !important;
}
body.hong4 .interval-line {
  width: 100%;
  height: 6px;
  background: #f5f5f5;
  border-top: 1px solid #e9e9e9;
  border-bottom: 1px solid #e9e9e9;
}
body.hong4 .btn-list.ver2.pos-cen a .i-arrow-l {
  background-position: left center;
}
body.hong4 .btn-list.ver2.pos-cen a .i-arrow-r {
  background-position: right center;
}
body.hong4 .list-item-inner + .list-item-inner {
  padding-top: 20px;
}
@media screen and (max-width: 719px) {
  body.hong4 .mypage-wrap.payment.service.mobile {
    min-height: calc(100vh - 139px) !important;
  }
}
body.hong4 #cm_counsel_field2,
body.hong4 #cm_counsel_field3,
body.hong4 #cm_style2,
body.hong4 #cm_style3 {
  margin-top: -22px;
}
body.hong4 .post-detail-wrap .post-list .post-content .title {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 23px;
}
@media screen and (max-width: 719px) {
  body.hong4 .post-detail-wrap .post-list .post-content .title {
    height: 17px;
  }
}
@media screen and (max-width: 719px) {
  body.hong4 .mypage-wrap.alarm.upd4,
  body.hong4 .mypage-wrap.item.qna.upd4,
  body.hong4 .mypage-wrap.review.qna.upd4 {
    min-height: calc(100vh - 139px);
  }
}
body.hong4 .mypage-wrap.alarm.upd4 > .sub-tab,
body.hong4 .mypage-wrap.qna.upd4 > .sub-tab {
  margin-top: 30px;
  padding: 0 20px;
}
body.hong4 .mypage-wrap.alarm.upd4 .inner-body.w100,
body.hong4 .mypage-wrap.alarm.upd4 .inner-detail.w100 {
  border: none;
}
body.hong4 .mypage-wrap.alarm.upd4 .common-more-btn {
  width: calc(100% - 40px) !important;
}
body.hong4 .mypage-wrap.alarm.upd4 .alarm-remove {
  border-bottom: 1px solid #e3e7ed;
  display: flex;
  justify-content: flex-end;
  padding: 8px 0px 14px;
  width: calc(100% - 40px);
  margin: 0 auto;
}
body.hong4 .mypage-wrap.alarm.upd4 .alarm-remove .alarm-remove-btn {
  width: 110px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 12px;
  border: 1px solid #e3e7ed;
  border-radius: 2px;
  cursor: pointer;
  gap: 6px;
}
body.hong4 .mypage-wrap.alarm.upd4 .alarm-remove .alarm-remove-btn > img {
  width: 16px;
}
body.hong4 .mypage-wrap.alarm.upd4 .alarm-remove .alarm-remove-btn > span {
  margin-bottom: 2px;
}
@media screen and (max-width: 719px) {
  body.hong4 .mypage-wrap.alarm.upd4 > .sub-tab,
  body.hong4 .mypage-wrap.qna.upd4 > .sub-tab {
    margin-top: 16px;
    padding: 0 16px;
  }
  body.hong4 .mypage-wrap.alarm.upd4 .common-more-btn {
    width: calc(100% - 32px) !important;
  }
  body.hong4 .mypage-wrap.alarm.upd4 .alarm-remove {
    padding: 6px 0px 12px;
    width: calc(100% - 32px);
  }
  body.hong4 .mypage-wrap.alarm.upd4 .alarm-remove .alarm-remove-btn {
    width: 88px;
    height: 30px;
    padding: 5px 8px;
  }
  body.hong4 .mypage-wrap.alarm.upd4 .alarm-remove .alarm-remove-btn > img {
    width: 14px;
  }
  body.hong4 .mypage-wrap.alarm.upd4 .alarm-remove .alarm-remove-btn > span {
    font-size: 13px;
  }
}
body.hong4 .mypage-wrap.alarm.upd4 .tab-container .list-item {
  padding: 24px 20px 0;
}
body.hong4 .mypage-wrap.alarm.upd4 .tab-container .list-img {
  height: 100%;
}
@media screen and (max-width: 719px) {
  body.hong4 .mypage-wrap.alarm.upd4 .tab-container .list-item {
    padding: 24px 16px 0;
  }
  body.hong4 .mypage-wrap.alarm.upd4 .inner-body {
    padding-bottom: 50px;
  }
}
body.hong4 .mypage-wrap.oper-time.upd4 .inner-top.column {
  height: 141px;
}
body.hong4 .mypage-wrap.oper-time.upd4 .inner-body {
  height: calc(100vh - 292px);
}
body.hong4 .mypage-wrap.oper-time.upd4 .inner-body .set-oper-time .grid-b {
  margin-top: 0;
  margin-bottom: 80px;
  grid-template-columns: 34% 66%;
}
@media screen and (max-width: 719px) {
  body.hong4 .mypage-wrap.oper-time.upd4 .inner-body .set-oper-time .grid-b {
    grid-template-columns: 30% 70%;
  }
}
body.hong4 .mypage-wrap.oper-time.upd4 .switch-box {
  display: flex;
  align-items: center;
}
body.hong4 .mypage-wrap.oper-time.upd4 .switch-btn {
  width: 76px;
  margin-right: 10px;
  margin-left: 0;
}
body.hong4 .mypage-wrap.oper-time.upd4 .switch-btn label {
  width: 76px;
  height: 32px;
}
body.hong4 .mypage-wrap.oper-time.upd4 .switch-btn label span {
  width: 20px;
  height: 20px;
}
body.hong4 .mypage-wrap.oper-time.upd4 .switch-btn label:before {
  font-size: 0.875rem;
}
body.hong4 .mypage-wrap.oper-time.upd4 .switch-btn input[type=checkbox]:checked + label span {
  transform: translate(44px, -50%);
}
body.hong4 .mypage-wrap.oper-time.upd4 .oper-time-box {
  gap: 10px;
  display: flex;
  align-items: center;
}
body.hong4 .mypage-wrap.oper-time.upd4 .oper-time-select {
  padding: 2px 33px 4px 12px;
  border-radius: 2px;
  border: 1px solid #e3e7ed;
  font-size: 1rem;
  font-family: var(--h-body-font-family);
  background: url(/hong4/_img/footer/arrow-bottom.png) no-repeat right 10px top 52%/12px 7px;
  color: var(--h-color-222);
  height: 32px;
}
body.hong4 .mypage-wrap.oper-time.upd4 .add-btn-box {
  flex: 1 0 auto;
  display: flex;
  justify-content: flex-end;
}
body.hong4 .mypage-wrap.oper-time.upd4 .add-btn,
body.hong4 .mypage-wrap.oper-time.upd4 .remove-btn {
  border-radius: 2px;
  color: var(--h-color-fff);
  font-size: 14px;
  background: var(--h-main-color);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0 9px;
  margin-left: 2px;
  height: 32px;
  cursor: pointer;
  font-weight: bold;
}
body.hong4 .mypage-wrap.oper-time.upd4 .remove-btn {
  background: #da4841;
}
@media screen and (max-width: 719px) {
  body.hong4 .mypage-wrap.oper-time.upd4 .oper-time-select {
    background: url(/hong4/_img/footer/arrow-bottom.png) no-repeat right 10px top 52%/7px 4px;
    padding: 3px 25px 4px 10px;
  }
  body.hong4 .mypage-wrap.oper-time.upd4 .inner-top.column {
    height: 126px;
  }
  body.hong4 .mypage-wrap.oper-time.upd4 .switch-btn label {
    width: 64px;
    height: 26px;
  }
  body.hong4 .mypage-wrap.oper-time.upd4 .switch-btn label:before {
    font-size: 0.714rem;
  }
  body.hong4 .mypage-wrap.oper-time.upd4 .switch-btn label span {
    width: 16px;
    height: 16px;
  }
  body.hong4 .mypage-wrap.oper-time.upd4 .switch-btn input[type=checkbox]:checked + label span {
    transform: translate(38px, -50%);
  }
}
body.hong4 .profile-oper-time {
  padding: 24px 20px;
  background: var(--h-color-fff);
  border-bottom: 1px solid #f1f1f1;
}
body.hong4 .profile-oper-time .fix-oper-time {
  display: flex;
  margin-left: 16px;
}
body.hong4 .profile-oper-time .fix-oper-time > div::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 14px;
  background: var(--h-color-ddd);
  margin: 0 12px;
}
body.hong4 .profile-oper-time .fix-oper-time > div:last-child:after {
  content: none;
}
body.hong4 .profile-oper-time .fix-oper-time > div {
  display: flex;
  align-items: center;
}
body.hong4 .profile-oper-time .fix-oper-time img {
  width: 16px;
  margin-right: 8px;
}
body.hong4 .profile-oper-time p {
  margin-top: 13px;
  font-size: 14px;
}
body.hong4 .profile-oper-time p u {
  color: #1ab8be;
  text-decoration: underline;
}
@media screen and (max-width: 719px) {
  body.hong4 .profile-oper-time {
    padding: 17px 16px;
  }
  body.hong4 .profile-oper-time .fix-oper-time {
    margin-left: 12px;
    font-size: 13px;
  }
  body.hong4 .profile-oper-time .fix-oper-time img {
    width: 12px;
    margin-right: 6px;
  }
  body.hong4 .profile-oper-time p {
    margin-top: 10px;
    font-size: 12px;
  }
}
body.hong4 .mypage-wrap.review.qna.upd4 .notice {
  border-top: 1px solid #e3e7ed;
  padding: 12px 0 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  font-size: 16px;
}
body.hong4 .mypage-wrap.review.qna.upd4 .notice > img {
  width: 31px;
  transform: translateY(3px);
}
body.hong4 .mypage-wrap.review.qna.upd4 .info-section .chat-qna-info {
  padding: 20px 20px 0;
}
body.hong4 .mypage-wrap.review.qna.upd4 .info-section .chat-qna-info .switch-btn {
  top: 58px;
}
@media screen and (max-width: 719px) {
  body.hong4 .mypage-wrap.review.qna.upd4 .notice {
    font-size: 14px;
    margin-top: 12px;
    padding: 11px 0 13px;
  }
  body.hong4 .mypage-wrap.review.qna.upd4 .notice > img {
    width: 27px;
  }
  body.hong4 .mypage-wrap.review.qna.upd4 .info-section .chat-qna-info .switch-btn {
    top: 50px;
  }
}
body.hong4 .tab-wrap.regular-wrap.upd4 .regular-filter-box {
  display: flex;
  align-items: center;
  gap: 16px;
}
body.hong4 .tab-wrap.regular-wrap.upd4 .regular-delete {
  flex: 0 0 auto;
}
body.hong4 .tab-wrap.regular-wrap.upd4 .regular-header {
  padding: 15px 20px;
  height: 66px;
}
body.hong4 .tab-wrap.regular-wrap.upd4 .regular-delete .regular-delete-btn {
  width: 110px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 12px;
  border: 1px solid #e3e7ed;
  border-radius: 2px;
  cursor: pointer;
  gap: 6px;
}
body.hong4 .tab-wrap.regular-wrap.upd4 .regular-delete .regular-delete-btn > img {
  width: 16px;
}
body.hong4 .tab-wrap.regular-wrap.upd4 .regular-delete .regular-delete-btn > span {
  margin-bottom: 2px;
}
body.hong4 .tab-wrap.regular-wrap.upd4 .regular-pos-box label {
  padding-right: 26px;
  padding-left: 0;
}
body.hong4 .tab-wrap.regular-wrap.upd4 .regular-pos-box label::before {
  right: 0;
  left: auto;
}
@media screen and (max-width: 719px) {
  body.hong4 .tab-wrap.regular-wrap.upd4 .regular-delete .regular-delete-btn {
    width: 90px;
    height: 30px;
    padding: 5px 8px;
  }
  body.hong4 .tab-wrap.regular-wrap.upd4 .regular-delete .regular-delete-btn > img {
    width: 14px;
  }
  body.hong4 .tab-wrap.regular-wrap.upd4 .regular-delete .regular-delete-btn > span {
    font-size: 13px;
  }
  body.hong4 .tab-wrap.regular-wrap.upd4 .regular-header {
    height: 50px;
    padding: 12px 16px;
  }
}
body.hong4 .chat-qna-wrap.upd4 {
  min-height: calc(100vh - 457px);
}
body.hong4 .chat-qna-wrap.upd4 .list-inner .list-img > img {
  width: 100%;
  height: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
body.hong4 .chat-qna-wrap.upd4 .greeting {
  padding: 16px;
  line-height: 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  position: relative;
}
body.hong4 .chat-qna-wrap.upd4 .greeting::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 32px);
  height: 1px;
  background: #f1f1f1;
}
body.hong4 .chat-qna-wrap.upd4 .greeting .button {
  width: 124px;
  height: 32px;
  border-radius: 2px;
  background: var(--h-main-color);
  display: flex;
  align-items: center;
  padding: 5px 12px 7px;
  gap: 8px;
  color: var(--h-color-fff);
  font-weight: bold;
}
body.hong4 .chat-qna-wrap.upd4 .greeting .button .write {
  width: 12px;
}
body.hong4 .chat-qna-wrap.upd4 .greeting .button .arrow {
  width: 5px;
  margin-top: 2px;
}
@media screen and (max-width: 719px) {
  body.hong4 .chat-qna-wrap.upd4 {
    min-height: calc(100vh - 189px);
  }
  body.hong4 .chat-qna-wrap.upd4 .greeting {
    font-size: 12px;
    padding: 12px 16px;
    line-height: 18px;
  }
  body.hong4 .chat-qna-wrap.upd4 .greeting .button {
    font-size: 11px;
    width: 92px;
    height: 24px;
    padding: 3px 8px 5px;
    gap: 4px;
  }
  body.hong4 .chat-qna-wrap.upd4 .greeting .button .write {
    width: 10px;
  }
  body.hong4 .chat-qna-wrap.upd4 .greeting .button .arrow {
    width: 4px;
    margin-top: 1px;
    margin-left: 2px;
  }
}
body.hong4 .chat-qna-wrap.upd4 .counselor-info-con > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 24px;
}
body.hong4 .chat-qna-wrap.upd4 .counselor-info-con .nick-name {
  font-weight: bold;
  color: var(--h-color-222);
}
body.hong4 .chat-qna-wrap.upd4 .counselor-info-con .bracket {
  font-weight: normal;
  font-size: 14px;
}
body.hong4 .chat-qna-wrap.upd4 .counselor-info-con .bracket > .fred {
  font-weight: bold;
}
body.hong4 .chat-qna-wrap.upd4 .counselor-info-con .time {
  font-size: 14px;
  color: var(--h-color-999);
}
body.hong4 .chat-qna-wrap.upd4 .writable-list.class-chat .counselor-info-con .txt {
  font-size: 14px;
  line-height: 24px;
}
@media screen and (max-width: 719px) {
  body.hong4 .chat-qna-wrap.upd4 .counselor-info-con .time,
  body.hong4 .chat-qna-wrap.upd4 .counselor-info-con .bracket {
    font-size: 12px;
  }
  body.hong4 .chat-qna-wrap.upd4 .writable-list.class-chat .counselor-info-con .txt {
    line-height: 17px;
    -webkit-line-clamp: 2;
  }
}
body.hong4 .sub-tab ul li a,
body.hong4 .sub-tab ul li a {
  background: #f3f4f7;
}
body.hong4 .sub-tab ul li a.active,
body.hong4 .sub-tab ul li a.active {
  background: var(--h-color-fff);
}
body.hong4 .switch-btn label span {
  background: #e80037;
}
body.hong4 .info-section .chat-qna-info .txt {
  color: var(--h-color-222);
}
@media screen and (max-width: 719px) {
  body.hong4 .tab-wrap.regular-wrap.upd4 {
    min-height: calc(100vh - 191px);
  }
}
body.hong4 .mypage-wrap.item .list-item-ul li .btn-set a span {
  font-weight: bold;
}
body.hong4 .mypage-wrap.item-add.class .radio .label-text.d-flex {
  display: flex;
}
body.hong4 .mypage-wrap.item-add.class .radio.stock_class input[name*=stock-radio]:checked ~ .nb-text .radio-hidden-text,
body.hong4 .mypage-wrap.item-add.class .radio.number_class input[name*=number-radio]:checked ~ .nb-text .radio-hidden-text {
  display: block;
}
body.hong4 .mypage-wrap.item-add.class .radio-hidden-text {
  display: none;
}
body.hong4 .mypage-wrap.item-add.class .radio.date_class > .d-flex-b-c {
  margin-top: 20px;
  justify-content: flex-start;
  align-items: baseline;
  gap: 29px;
}
body.hong4 .mypage-wrap.item-add.class .radio.date_class .date-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body.hong4 .mypage-wrap.item-add.class .radio.date_class .date-container .start-date,
body.hong4 .mypage-wrap.item-add.class .radio.date_class .date-container .end-date {
  display: flex;
  align-items: center;
  gap: 12px;
}
body.hong4 .mypage-wrap.item-add.class .radio.date_class .date-container .date-box {
  width: 158px;
  height: 42px;
  line-height: 42px;
  padding: 0px 36px 0px 16px;
  background: url(../img/listIcon/calendar.png) no-repeat right 16px center/16px 17px #fff;
  border-radius: 4px;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 3px;
}
body.hong4 .mypage-wrap.item-add.class .method {
  margin-top: 12px;
}
body.hong4 .mypage-wrap.item-add.class .method .text {
  font-size: 16px;
}
body.hong4 .mypage-wrap.item-add.class select {
  height: 40px;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 6px 12px;
  font-size: 16px;
  background: url("../img/common/arrowBottom.png") right 12px center/12px 7px no-repeat;
  color: var(--h-color-222);
}
body.hong4 .mypage-wrap.item-add.class .class-select > div {
  align-items: center;
}
body.hong4 .mypage-wrap.item-add.class .class-select input[type=number] {
  margin-left: 24px;
}
body.hong4 .mypage-wrap.item-add.class .class-select input {
  padding: 12px 0;
  width: 76px;
}
body.hong4 .mypage-wrap.item-add.class .class-select > div select {
  margin-left: 16px;
}
body.hong4 .mypage-wrap.item-add.class .stt.period {
  margin-bottom: 28px;
}
body.hong4 .mypage-wrap.item-add.class .radio.number-of-class {
  display: flex;
  align-items: center;
  gap: 24px;
}
body.hong4 .mypage-wrap.item-add.class .radio.number-of-class label:nth-child(2) {
  margin-top: 0;
}
body.hong4 .mypage-wrap.item-add.class .number-of-class > p label {
  margin-top: 18px;
  font-weight: normal;
  font-size: 16px;
  height: auto;
  line-height: inherit;
  display: flex;
  align-items: center;
}
body.hong4 .mypage-wrap.item-add.class .number-of-class input[type=checkbox]:checked + label {
  background-image: url(../img/common/check_on.png);
}
body.hong4 .mypage-wrap.item-add.class .number-of-class > p input {
  width: 54px;
  height: 32px;
  border: 1px solid #ddd;
  margin: 0 8px 0 16px;
  text-align: center;
  font-weight: bold;
  font-size: 1rem;
}
body.hong4 .mypage-wrap.item-add.class .mdf-class .number-set .point {
  font-size: 16px;
  line-height: 30px;
  margin-bottom: 0;
}
body.hong4 .mypage-wrap.item-add.class .checkbox-div.address > label {
  color: var(--h-color-222);
  font-size: 16px;
  height: 22px;
  line-height: 21px;
}
body.hong4 .mypage-wrap.item-add.class .checkbox {
  background-size: 22px 22px;
  padding-left: 32px;
}
body.hong4 .mypage-wrap.item-add.class .i-plus-o {
  background-position: left center;
}
body.hong4 .mypage-wrap.item-add.class .privacy {
  width: 100%;
  height: auto;
  border-radius: 8px;
  background: #f5f5f5;
  margin-top: 24px;
  padding: 16px;
  font-size: 13px;
  line-height: 22px;
}
body.hong4 .mypage-wrap.item-add.class .privacy .title {
  font-size: 14px;
  font-weight: bold;
}
body.hong4 .mypage-wrap.item-add.class .inner-body .radio-span {
  top: 6px;
}
@media screen and (max-width: 719px) {
  body.hong4 .mypage-wrap.item-add.class .radio.date_class > .d-flex-b-c {
    gap: 20px;
  }
  body.hong4 .mypage-wrap.item-add.class .radio.date_class .date-container {
    gap: 6px;
  }
  body.hong4 .mypage-wrap.item-add.class .radio.date_class .date-container .start-date,
  body.hong4 .mypage-wrap.item-add.class .radio.date_class .date-container .end-date {
    gap: 10px;
  }
  body.hong4 .mypage-wrap.item-add.class .radio.date_class .date-container .date-box {
    width: 127px;
    height: 34px;
    padding: 0 34px 0 14px;
    background: url(../img/listIcon/calendar.png) no-repeat right 8px center/13px 14px #fff;
  }
  body.hong4 .mypage-wrap.item-add.class .method .text {
    font-size: 14px;
  }
  body.hong4 .mypage-wrap.item-add.class select {
    height: 34px;
  }
  body.hong4 .mypage-wrap.item-add.class .class-select input {
    padding: 9px 0;
    width: 60px;
  }
}
body.hong4 .mypage-wrap.item.class-status {
  min-height: calc(100vh - 391px);
}
body.hong4 .mypage-wrap.item.class-status .list-item-ul li:first-child {
  border-top: 0;
}
body.hong4 .mypage-wrap.item.class-status .list-item-ul .btn-set a:first-child {
  display: block;
}
@media screen and (max-width: 719px) {
  body.hong4 .mypage-wrap.item.class-status {
    min-height: calc(100vh - 139px);
  }
}
body.hong4 .mypage-wrap.item.class-status .list-item-ul .list-content {
  gap: 4px;
}
body.hong4 .mypage-wrap.item.class-status .list-item-ul .status {
  margin-top: 2px;
}
body.hong4 .mypage-wrap.item.class-status .list-item-ul .status,
body.hong4 .mypage-wrap.item.class-status .list-item-ul .text-sort {
  height: 20px;
  line-height: 20px;
}
body.hong4 .mypage-wrap.item.class-status .inner {
  padding: 24px 16px;
}
body.hong4 .mypage-wrap.item.class-status .inner > p.f-bold {
  line-height: 22px;
}
body.hong4 .mypage-wrap.item.class-status .inner-body {
  min-height: calc(100vh - 480px);
}
body.hong4 .mypage-wrap.item.class-status .class-status-ul {
  border-top: 1px solid var(--h-color-222);
  margin-top: 12px;
  display: flex;
  flex-direction: column-reverse;
}
body.hong4 .mypage-wrap.item.class-status .class-status-ul li {
  border-bottom: 1px solid var(--h-color-e9e);
  padding: 11px 21px 11px 16px;
  position: relative;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
body.hong4 .mypage-wrap.item.class-status .class-status-ul li::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 5px;
  height: 9px;
  transform: translateY(-50%);
  background: url(/hong4/_img/main/arrow-right-black.svg) no-repeat;
  background-size: 5px 9px;
}
body.hong4 .mypage-wrap.item.class-status .class-status-ul li .list-count {
  margin-right: 20px;
}
body.hong4 .mypage-wrap.item.class-status .class-status-ul li .class-student-name {
  flex: 1 0 auto;
}
body.hong4 .mypage-wrap.item.class-status .class-status-ul li .chat-btn {
  width: 71px;
  height: 26px;
  color: var(--h-color-fff);
  background: var(--h-main-color);
  font-size: 12px;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
}
body.hong4 .mypage-wrap.item.class-status .class-status-ul li .chat-btn.active::after {
  content: "";
  position: absolute;
  right: 2px;
  top: 2px;
  width: 4px;
  height: 4px;
  background: #00ffc2;
  border-radius: 50%;
}
@media screen and (max-width: 719px) {
  body.hong4 .mypage-wrap.item.class-status .inner > p.f-bold {
    font-size: 15px;
    line-height: 20px;
  }
  body.hong4 .mypage-wrap.item.class-status .class-status-ul {
    margin-top: 7px;
  }
  body.hong4 .mypage-wrap.item.class-status .class-status-ul li {
    height: 40px;
  }
  body.hong4 .mypage-wrap.item.class-status .class-status-ul li::after {
    width: 4px;
    height: 7px;
    background-size: 4px 7px;
  }
  body.hong4 .mypage-wrap.item.class-status .class-status-ul li .chat-btn {
    width: 64px;
    height: 24px;
    font-size: 11px;
  }
  body.hong4 .mypage-wrap.item.class-status .class-status-ul li .chat-btn.active::after {
    right: 3px;
    top: 3px;
  }
}
body.hong4 .mypage-wrap.detail.class.class-status .detail-class-grid {
  margin-top: 24px;
  margin-bottom: 33px;
}
body.hong4 .mypage-wrap.detail.class.class-status .class-relay-text {
  border-radius: 4px;
  margin-top: 16px;
}
@media screen and (max-width: 719px) {
  body.hong4 .mypage-wrap.detail.class.class-status .detail-class-grid {
    margin-top: 20px;
    margin-bottom: 28px;
  }
  body.hong4 .mypage-wrap.detail.class.class-status .class-relay-text {
    margin-top: 13px;
  }
  body.hong4 .mypage-wrap.consult.item.status .btn-set .i-arrow-r,
  body.hong4 .mypage-wrap.item.class-status .btn-set .i-arrow-r {
    padding-right: 12px;
    background-size: 5px 10px;
  }
}
@media screen and (max-width: 719px) {
  body.hong4 .main-tab ul li a.active::after {
    bottom: -2px;
  }
}
body.hong4 .writable-review.renewal .writable-list ul li .payback-coin.special {
  color: var(--h-color-fff);
  background: url("/hong4/img/common/payback_coin.png") no-repeat left 8px center/9px 10px var(--h-main-color);
  padding: 3px 8px 4px 21px;
  border-radius: 2px;
  width: 81px;
  border: none;
  display: inline-flex;
  align-items: center;
  max-width: none;
  font-size: 12px;
  font-weight: normal;
  margin-left: 8px;
}
@media screen and (max-width: 719px) {
  body.hong4 .writable-review.renewal .writable-list ul li .payback-coin.special {
    font-size: 10px;
    padding: 1px 6px 2px 16px;
    width: 65px;
    background-size: 7px 8px;
    background-position: left 6px center;
  }
}
body.hong4 .status.ing .user-ing-top {
  width: 100%;
  padding: 24px 16px 23px;
  background: #eeeff2;
  border-bottom: 1px solid #e3e7ed;
}
body.hong4 .status.ing .user-ing-profile {
  width: 120px;
  height: 120px;
  margin: 0 auto;
  position: relative;
}
body.hong4 .status.ing .user-ing-profile .profile {
  width: 100%;
}
body.hong4 .status.ing .user-ing-profile .like {
  width: 54px;
  position: absolute;
  right: -22px;
  bottom: -12px;
}
body.hong4 .status.ing .user-ing-top > p {
  font-size: 24px;
  line-height: 36px;
  margin-top: 12px;
  text-align: center;
}
body.hong4 .status.ing .user-ing-bot {
  padding: 4px 16px 0;
}
body.hong4 .grid-b .grid-col2 {
  grid-column: auto/span 2;
}
body.hong4 .grid-b .memo-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #faf9f6;
  color: var(--h-color-666);
  border-right: 1px solid #e9e9e9;
  padding-right: 16px;
}
body.hong4 .grid-b .memo-title i.ic-memo {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url(/hong4/_img/main/ic_memo.svg) no-repeat center/20px 20px;
  cursor: pointer;
}
body.hong4 .grid-b .memo {
  line-height: 25px;
  padding: 10px 16px 12px;
}
body.hong4 .grid-b .not-memo {
  color: var(--h-color-ccc);
}
body.hong4 .grid-b .like-box {
  padding-right: 16px;
}
body.hong4 .grid-b .like-box img {
  width: 20px;
  display: block;
}
body.hong4 .grid-b .block span {
  flex: 1 0 auto;
}
body.hong4 .grid-b .block .block-btn {
  width: auto;
  height: auto;
  padding: 2px 8px 4px;
  line-height: 20px;
  border-radius: 2px;
  color: var(--h-color-fff);
  font-size: 14px;
  font-weight: bold;
  background: #da4841;
  margin-left: 10px;
}
@media screen and (max-width: 719px) {
  body.hong4 .grid-b .memo-title {
    padding-right: 10px;
  }
  body.hong4 .grid-b .memo-title i.ic-memo {
    width: 18px;
    height: 18px;
    background-size: 18px 18px;
  }
  body.hong4 .grid-b .memo {
    line-height: 22px;
  }
  body.hong4 .grid-b .like-box {
    padding-right: 10px;
  }
  body.hong4 .grid-b .like-box img {
    width: 18px;
  }
  body.hong4 .grid-b .block .block-btn {
    padding: 2px 4px 2px;
    font-size: 12px;
    line-height: 18px;
    margin-left: 8px;
  }
}
body.hong4 .status.ing .vip-btn {
  width: 61px;
  height: 26px;
  border-radius: 2px;
  display: inline-block;
  background: url(/hong4/_img/main/vip-crown.svg) no-repeat center left 7px/14px 10px, url(/hong4/_img/main/vip-line.svg) no-repeat center right 8px/27px 11px #222 !important;
  margin-left: 8px;
}
body.hong4 .mypage-wrap.status .status.regular .grid-b {
  margin-bottom: 0;
}
body.hong4 .delete-container {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}
body.hong4 .delete-container .delete-all {
  padding: 10px 12px 9px;
  border: 1px solid #e9e9e9;
  border-radius: 2px;
  display: block;
  font-size: 15px;
}
body.hong4 .delete-container .delete-all img {
  width: 13px;
}
@media screen and (max-width: 719px) {
  body.hong4 .mypage-wrap.status .status.regular .inner-body {
    padding-top: 11px;
  }
  body.hong4 .delete-container {
    margin-bottom: 12px;
  }
  body.hong4 .delete-container .delete-all {
    padding: 8px 8px 7px;
    font-size: 13px;
  }
  body.hong4 .delete-container .delete-all img {
    width: 11px;
  }
}
body.hong4 .popup-bg.memo-popup .popup-center {
  padding: 20px 16px 30px;
}
body.hong4 .popup-bg.memo-popup .popup-center > p {
  margin-bottom: 12px;
  text-align: left;
}
body.hong4 .popup-bg.memo-popup .memo-textarea {
  width: 100%;
  height: 200px;
  border-radius: 4px;
  border: 1px solid var(--h-color-ddd);
  padding: 10px 12px;
}
body.hong4 .popup-bg.memo-popup .memo-textarea textarea {
  width: 100%;
  height: 100%;
  resize: none;
  font-size: 16px;
  line-height: 24px;
}
@media screen and (max-width: 719px) {
  body.hong4 .popup-bg.memo-popup .popup-center > p {
    margin-bottom: 10px;
  }
  body.hong4 .popup-bg.memo-popup .memo-textarea {
    padding: 7px 11px;
  }
  body.hong4 .popup-bg.memo-popup .memo-textarea textarea {
    font-size: 14px;
    line-height: 22px;
  }
}
body.hong4 .theme-banner {
  padding: 0 20px;
}
body.hong4 .theme-banner h1.category {
  font-family: "rixrak-sans-pro", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 22px;
  line-height: 31px;
  margin-bottom: 12px;
  margin-top: 20px;
  padding-left: 14px;
}
body.hong4 .theme-banner h1:not(.category) {
  font-size: 20px;
  line-height: 29px;
  margin-bottom: 12px;
  font-weight: bold;
}
body.hong4 .theme-banner .hr {
  width: 100%;
  height: 1px;
  background: #e9e9e9;
  margin-top: 20px;
  margin-bottom: 16px;
}
body.hong4 .theme-banner a {
  display: block;
}
body.hong4 .theme-banner img {
  width: 100%;
  display: block;
}
body.hong4 .theme-banner .mobile {
  display: none;
}
body.hong4 .theme-banner .pc {
  display: block;
}
body.hong4 .theme-banner .swiper-slide {
  max-width: 74%;
  margin-right: 12px;
  border: 1px solid #e5e8ee;
  border-radius: 6px;
  overflow: hidden;
}
@media screen and (max-width: 719px) {
  body.hong4 .theme-banner {
    padding: 0 12px;
  }
  body.hong4 .theme-banner.mb24 {
    margin-bottom: 16px !important;
  }
  body.hong4 .theme-banner h1.category {
    font-size: 16px;
    line-height: 23px;
    margin-bottom: 6px;
    margin-top: 16px;
    padding-left: 12px;
  }
  body.hong4 .theme-banner h1:not(.category) {
    font-size: 15px;
    line-height: 21px;
    margin-bottom: 7px;
  }
  body.hong4 .theme-banner .hr {
    margin-top: 14px;
    margin-bottom: 10px;
  }
  body.hong4 .theme-banner .mobile {
    display: block;
  }
  body.hong4 .theme-banner .pc {
    display: none;
  }
  body.hong4 .theme-banner .swiper-slide {
    max-width: 89%;
    margin-right: 8px;
  }
}
body.hong4 .theme-wrap .list-item-bg {
  background: var(--h-color-fff);
  min-height: calc(100vh - 549px);
}
body.hong4 .theme-wrap .list-item-bg .list-item-container {
  background: #f5f5f5;
}
body.hong4 .theme-wrap .inner-top {
  padding: 28px 0;
  background: #f3f4f7;
}
body.hong4 .theme-wrap .inner-top .item-info img {
  width: 30px;
  margin-right: 8px;
}
body.hong4 .theme-wrap .theme-header {
  padding: 16px 20px;
  border-bottom: 1px solid #e9e9e9;
  background: var(--h-color-fff);
}
body.hong4 .theme-wrap .theme-header ul {
  display: flex;
  align-items: center;
  gap: 8px;
}
body.hong4 .theme-wrap .theme-header ul li {
  padding: 12px 30px 14px 12px;
  border: 1px solid #e3e7ed;
  border-radius: 4px;
  background: url(/hong4/_img/main/i-list-arrow-down.png) no-repeat right 12px center/10px 6px var(--h-color-fff);
  cursor: pointer;
}
body.hong4 .theme-wrap .theme-header ul li.active {
  border-color: var(--h-color-222);
  font-weight: bold;
}
body.hong4 .theme-wrap .theme-header.ver2 {
  background: linear-gradient(90deg, #eddbff, #dfffe8);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  margin-top: 20px;
}
@media screen and (max-width: 719px) {
  body.hong4 .theme-wrap .theme-header.ver2 {
    margin-top: 14px;
  }
}
body.hong4 .theme-wrap .theme-header.ver2 ul {
  gap: 0;
}
body.hong4 .theme-wrap .theme-header.ver2 ul li {
  margin-right: 8px;
}
body.hong4 .theme-wrap .theme-filter {
  padding: 16px 20px;
  justify-content: flex-end;
  height: 52px;
}
@media screen and (max-width: 719px) {
  body.hong4 .theme-wrap .theme-filter {
    padding: 10px 16px;
    height: 37px;
  }
}
body.hong4 .theme-wrap .theme-filter .regular-pos-box label {
  padding-right: 26px;
  padding-left: 0;
}
body.hong4 .theme-wrap .theme-filter .regular-pos-box label::before {
  right: 0;
  left: auto;
}
body.hong4 .theme-wrap .list-item-info {
  position: relative;
}
body.hong4 .theme-wrap .list-item .like-count {
  display: flex;
  align-items: center;
  padding: 4px 7px;
  font-size: 12px;
  font-weight: bold;
  border: 1px solid #e9e9e9;
  border-radius: 11px;
  background: var(--h-color-fff);
}
body.hong4 .theme-wrap .list-item .like-count img {
  width: 12px;
  margin-right: 4px;
}
@media screen and (max-width: 719px) {
  body.hong4 .theme-wrap .list-item-bg {
    min-height: calc(100vh - 260px);
  }
  body.hong4 .theme-wrap .inner-top {
    padding: 20px 0;
  }
  body.hong4 .theme-wrap .item-info img {
    width: 26px;
    margin-right: 6px;
  }
  body.hong4 .theme-wrap .theme-header {
    padding: 13px 11.5px;
  }
  body.hong4 .theme-wrap .theme-header ul li {
    font-size: 13px;
    padding: 7.5px 23px 8.5px 10px;
    background-size: 7px 4px;
  }
  body.hong4 .theme-wrap .list-item .like-count {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 2px 5px;
    border-radius: 8px;
    font-size: 10px;
  }
  body.hong4 .theme-wrap .list-item .like-count img {
    width: 9px;
    margin-right: 3px;
  }
}
body.hong4 .list-item-container .list-item.recommend {
  padding: 20px;
  background: #fefff7;
}
body.hong4 .list-item-container .list-item.recommend > h1 {
  font-size: 20px;
  font-weight: bold;
  line-height: 29px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
}
body.hong4 .list-item-container .list-item.recommend > h1 > img {
  width: 48px;
  margin-bottom: 5px;
}
body.hong4 .list-item-container .list-item.recommend .list-item-content {
  border-bottom: none;
}
body.hong4 .list-item-container .list-item.recommend .list-item-info {
  width: 100%;
}
body.hong4 .list-item-container .list-item.recommend .list-item-detail {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 17px;
  padding-top: 12px;
  border-top: 1px solid #e9e9e9;
}
body.hong4 .list-item-container .list-item.recommend .list-item-detail > p {
  display: flex;
  align-items: center;
}
body.hong4 .list-item-container .list-item.recommend .list-item-detail .list-recent {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 14px;
}
body.hong4 .list-item-container .list-item.recommend .list-item-detail .list-recent p {
  display: flex;
  align-items: center;
}
body.hong4 .list-item-container .list-item.recommend .list-item-detail .list-recent p > span:last-child {
  margin-left: 4px;
  color: var(--h-color-666);
  font-size: 11px;
}
@media screen and (max-width: 719px) {
  body.hong4 .list-item-container .list-item.recommend {
    padding: 16px;
  }
  body.hong4 .list-item-container .list-item.recommend > h1 {
    font-size: 15px;
    line-height: 21px;
    flex-direction: column;
    align-items: flex-start;
  }
  body.hong4 .list-item-container .list-item.recommend > h1 > img {
    width: 40px;
    margin-bottom: 4px;
  }
  body.hong4 .list-item-container .list-item.recommend .list-item-detail {
    margin-top: 6px;
    padding-top: 0;
    border-top: none;
    flex-direction: column;
    align-items: flex-start;
  }
  body.hong4 .list-item-container .list-item.recommend .list-item-detail .list-recent {
    width: 100%;
    background: #f5f4ea;
    border-radius: 4px;
    height: 33px;
    line-height: 33px;
    padding: 0 10px;
    border: 1px solid #eceee4;
    font-size: 12px;
    gap: 5px;
    margin-top: 9px;
  }
}
@media screen and (max-width: 719px) {
  body.hong4 .category-button-section.shop.fold + .theme-banner {
    margin-top: 0;
  }
}
body.hong4 .naver-book {
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;
  font-weight: normal;
  font-size: 16px;
  line-height: 24px;
}
body.hong4 .naver-book .naver-calendar {
  width: 18px;
  height: 17px;
}
body.hong4 .naver-book .arrow {
  width: 6px;
  height: 10px;
  margin-top: 2px;
}
@media screen and (max-width: 719px) {
  body.hong4 .naver-book {
    font-size: 13px;
    gap: 6px;
  }
  body.hong4 .naver-calendar {
    width: 16px;
    height: 15px;
  }
  body.hong4 .arrow {
    width: 5px;
    height: 9px;
  }
}
body.hong4 .number-set.none > p {
  padding-left: 15px;
}
body.hong4 .naver-pay {
  width: 54px !important;
  height: 19px !important;
}
body.hong4 .toss-pay {
  width: 94px !important;
  height: 18px !important;
  margin-bottom: -1px;
}
body.hong4 .kakao-pay {
  width: 45px !important;
  height: 18px !important;
  margin-bottom: -3px;
}
@media screen and (max-width: 719px) {
  body.hong4 .naver-pay {
    width: 45px;
    height: 16px;
  }
  body.hong4 .toss-pay {
    width: 78px;
    height: 15px;
  }
}
body.hong4 .cafe-notice-list li {
  margin-bottom: 12px;
}
@media screen and (max-width: 719px) {
  body.hong4 .cafe-notice-list li {
    margin-bottom: 10px;
  }
}
body.hong4 .checkbox-div.column {
  justify-content: flex-start;
  gap: 20px;
}
body.hong4 .checkbox-div.column li {
  width: 25px;
  height: 60px;
}
body.hong4 .checkbox-div.column li label {
  padding-left: 0 !important;
  padding-right: 0 !important;
  background-position: center bottom;
  text-align: center;
  padding-bottom: 52px;
  font-size: 20px;
  color: #222;
}
@media screen and (max-width: 719px) {
  body.hong4 .checkbox-div.column li label {
    font-size: 16px;
    padding-bottom: 46px;
  }
}
body.hong4 .counselor-info-con .info-con.text-sort {
  display: -webkit-box;
}
body.hong4 .list-reserv .itm .time {
  padding: 12px 5px;
  font-weight: bold;
}
body.hong4 .list-reserv-week .itm .time {
  font-weight: bold;
}
body.hong4 .list-reserv .itm .status {
  margin-bottom: 6px;
}
body.hong4 .list-reserv-week .itm .list-body i.blt.chk {
  background: transparent;
}
body.hong4 .list-reserv-week .itm .list-body i.blt.chk::after {
  width: 100%;
  height: 100%;
  background: url(/hong4/_img/main/red-circle-chk.svg) no-repeat center/cover;
  left: 0;
  top: 0;
  margin: 0;
  border: none;
  transform: none;
}
body.hong4 .list-reserv-week .itm .list-body i.blt.dis::after {
  background: url(/hong4/_img/main/red-circle-chk.svg-disabled.svg) no-repeat center/cover;
}
body.hong4 .hit-banner {
  display: block;
  padding: 0 30px;
}
body.hong4 .hit-banner img {
  width: 100%;
}
@media screen and (max-width: 719px) {
  body.hong4 .hit-banner {
    padding: 0 10px;
  }
}
body.hong4 .info-box {
  width: 100%;
  background: #f3f4f7;
}
body.hong4 .info-box .hit-info {
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: center;
  justify-content: center;
  margin-bottom: 16px;
}
@media screen and (max-width: 719px) {
  body.hong4 .info-box .hit-info {
    gap: 12px;
  }
}
body.hong4 .info-box .hit-info img {
  width: 25px;
}
@media screen and (max-width: 719px) {
  body.hong4 .info-box .hit-info img {
    width: 16px;
  }
}
@media screen and (max-width: 719px) {
  body.hong4 .info-box .btn.mint {
    height: 38px;
    line-height: 38px;
    font-size: 14px;
  }
  body.hong4 .info-box .btn.mint .i-write.circle {
    background: url(../img/common/review_write.png) center left/15px 15px no-repeat, url(../img/common/arrowRight_s_w.png) right center/5px 9px no-repeat;
  }
}
body.hong4 .regular-header.hit {
  padding-top: 15px;
}
@media screen and (max-width: 719px) {
  body.hong4 .regular-header.hit {
    padding: 12px 16px;
    height: auto;
  }
}
body.hong4 .writable-list.hit {
  margin: 0 20px;
  padding-bottom: 50px;
}
@media screen and (max-width: 719px) {
  body.hong4 .writable-list.hit {
    margin: 0 16px;
  }
}
body.hong4 .writable-list.hit h1 {
  margin-top: 20px;
  line-height: 24px;
  font-weight: bold;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
@media screen and (max-width: 719px) {
  body.hong4 .writable-list.hit h1 {
    margin-top: 16px;
    line-height: 20px;
  }
}
body.hong4 .writable-list.hit .list-inner {
  padding: 12px 0 20px;
}
@media screen and (max-width: 719px) {
  body.hong4 .writable-list.hit .list-inner {
    padding: 9px 0 16px;
  }
}
body.hong4 .writable-list.hit .info.hit {
  font-size: 14px;
  line-height: 24px;
  margin-top: 4px;
}
@media screen and (max-width: 719px) {
  body.hong4 .writable-list.hit .info.hit {
    font-size: 12px;
  }
}
body.hong4 .writable-list.hit .info.hit span {
  margin-right: 10px;
  color: #666666;
}
body.hong4 .writable-list.hit .info.hit span b {
  color: #222222;
}
body.hong4 .review-write-inner dt.hit {
  background: url(/hong4/_img/main/i_question.svg) left 2px/20px 20px no-repeat;
}
@media screen and (max-width: 719px) {
  body.hong4 .review-write-inner dt.hit {
    background: url(/hong4/_img/main/i_question.svg) left 2px/16px 16px no-repeat;
  }
}
body.hong4 .txt-input.hit {
  border-bottom-color: #dddddd !important;
}
body.hong4 .review-write-inner.hit {
  padding: 0 0 77px;
}
@media screen and (max-width: 719px) {
  body.hong4 .review-write-inner.hit {
    margin: 0;
    padding: 0 0 23px;
  }
}
body.hong4 .review-write-inner.hit .btn.hit {
  height: 40px;
  line-height: 39px;
}
@media screen and (max-width: 719px) {
  body.hong4 .review-write-inner.hit .btn.hit {
    height: 32px;
    line-height: 32px;
  }
}
body.hong4 .review-write-inner.hit .btn.hit span {
  padding-bottom: 1px;
}
@media screen and (max-width: 719px) {
  body.hong4 .review-write-inner.hit .btn.hit span {
    font-size: 14px;
  }
}
body.hong4 .review-write-inner.hit .review-management {
  border-radius: 0;
  border-top: 1px solid #e9e9e9;
}
body.hong4 .hit-field {
  display: flex;
  justify-content: space-between;
}
body.hong4 .hit-field > * {
  display: flex;
  align-items: center;
  gap: 8px;
}
body.hong4 .hit-field li {
  display: inline-flex;
  align-items: center;
  height: 35px;
  padding: 0 12px;
  font-size: 1rem;
  border-radius: 4px;
  cursor: pointer;
  background: var(--h-main-color);
  color: var(--h-color-fff);
  font-weight: bold;
}
@media screen and (max-width: 719px) {
  body.hong4 .hit-field li {
    height: 32px;
  }
}
body.hong4 .hit-field img {
  width: 12px;
}
@media screen and (max-width: 719px) {
  body.hong4 .hit-field img {
    width: 10px;
  }
}
body.hong4 .post-detail-wrap.hit .write-btn {
  background: var(--h-main-color);
}
@media screen and (max-width: 719px) {
  body.hong4 .post-detail-wrap.hit .post-list {
    height: auto;
    min-height: auto;
    padding: 0;
  }
}
body.hong4 .post-detail-wrap.hit .post-content {
  height: auto;
}
@media screen and (max-width: 719px) {
  body.hong4 .post-detail-wrap.hit .post-content {
    padding: 16px 16px 18px;
  }
}
body.hong4 .post-detail-wrap.hit .post-content > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  line-height: 24px;
  color: #999999;
  margin-top: 8px;
}
@media screen and (max-width: 719px) {
  body.hong4 .post-detail-wrap.hit .post-content > div {
    margin-top: 2px;
  }
}
body.hong4 .post-detail-wrap.hit .post-content .title {
  -webkit-line-clamp: 2;
  height: auto;
  line-height: 24px;
}
@media screen and (max-width: 719px) {
  body.hong4 .post-detail-wrap.hit .post-content .title {
    line-height: 22px;
    padding-bottom: 4px;
  }
}
body.hong4 .post-detail-wrap.hit .post-content .title .info.hit span {
  margin-right: 10px;
  color: #666666;
}
body.hong4 .post-detail-wrap.hit .profile-notice_con {
  padding: 40px 45px;
}
@media screen and (max-width: 719px) {
  body.hong4 .post-detail-wrap.hit .profile-notice_con {
    padding: 20px 16px;
  }
}
body.hong4 .success-post-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #e9e9e9;
  margin-bottom: 40px;
  font-size: 16px;
  line-height: 24px;
}
@media screen and (max-width: 719px) {
  body.hong4 .success-post-info {
    padding: 10px 0;
    line-height: 20px;
    font-size: 14px;
    margin-bottom: 30px;
  }
}
body.hong4 .success-post-info .line {
  display: inline-block;
  width: 1px;
  height: 12px;
  background: #dddddd;
}
@media screen and (max-width: 719px) {
  body.hong4 .success-post-info .line {
    height: 10px;
  }
}
body.hong4 .success-post-info .nick {
  color: #666666;
}
body.hong4 .success-post-info .date {
  font-size: 14px;
  line-height: 20px;
  color: #999999;
}
@media screen and (max-width: 719px) {
  body.hong4 .success-post-info .date {
    font-size: 12px;
    line-height: 17px;
  }
}
body.hong4 .post-sub-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 20px;
  line-height: 28px;
  font-family: "rixrak-sans-pro", sans-serif;
  font-weight: normal;
}
@media screen and (max-width: 719px) {
  body.hong4 .post-sub-title {
    gap: 8px;
    font-size: 16px;
    line-height: 23px;
  }
}
body.hong4 .post-sub-title > img {
  display: block;
  width: 16px;
}
@media screen and (max-width: 719px) {
  body.hong4 .post-sub-title > img {
    width: 12px;
  }
}
body.hong4 .post-title {
  font-family: "rixrak-sans-pro", sans-serif;
  font-size: 40px;
  font-weight: bold;
  line-height: 55px;
  text-align: center;
  margin: 8px 0 16px;
}
@media screen and (max-width: 719px) {
  body.hong4 .post-title {
    font-size: 32px;
    line-height: 44px;
    margin: 8px 0 14px;
  }
}
body.hong4 .post-type {
  text-align: center;
}
body.hong4 .post-type .pill {
  font-weight: bold;
  color: #ffffff;
  padding: 4px 12px;
  background: var(--h-main-color);
  border-radius: 16px;
  display: inline-block;
  line-height: 24px;
  margin: 0 auto;
}
@media screen and (max-width: 719px) {
  body.hong4 .post-type .pill {
    padding: 0 7px;
    line-height: 22px;
  }
}
body.hong4 .post-type h1 {
  margin-top: 4px;
  font-size: 30px;
  margin-bottom: 20px;
  line-height: 44px;
}
@media screen and (max-width: 719px) {
  body.hong4 .post-type h1 {
    font-size: 22px;
    line-height: 32px;
    margin-bottom: 14px;
  }
}
body.hong4 .post-img,
body.hong4 .post-img img {
  width: 100%;
}
body.hong4 .post.ul {
  margin-top: 20px;
  background: none;
}
body.hong4 .post.ul li {
  padding-top: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #dddddd;
}
@media screen and (max-width: 719px) {
  body.hong4 .post.ul li {
    padding-bottom: 20px;
    padding-top: 20px;
  }
}
body.hong4 .post.ul li:first-child {
  padding-top: 0;
}
body.hong4 .post.ul li:last-child {
  border-bottom: 0;
}
body.hong4 .post.ul .post.question {
  background: none;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-weight: bold;
  font-size: 18px;
  line-height: 27px;
  margin-bottom: 7px;
}
@media screen and (max-width: 719px) {
  body.hong4 .post.ul .post.question {
    font-size: 16px;
  }
}
body.hong4 .post.ul .post.question img {
  width: 20px;
  margin-top: 4px;
}
body.hong4 .post.ul .post.answer {
  background: none;
  padding-left: 28px;
  line-height: 23px;
}
body.hong4 .post.ul .post.list {
  background: none;
  margin-top: 15px;
  display: flex;
  gap: 12px;
}
body.hong4 .post.ul .post.list .list-img {
  width: 120px;
  min-width: auto;
  margin-right: 0;
}
@media screen and (max-width: 719px) {
  body.hong4 .post.ul .post.list .list-img {
    width: 93px;
  }
}
body.hong4 .post.ul .post.list .list-img img {
  width: 100%;
  position: static;
  transform: none;
}
body.hong4 .post.ul .post.list .list-img::after {
  font-size: 11px;
  border-radius: 4px;
  padding: 4px 5px;
  left: 4px;
  top: 4px;
  line-height: 13px;
}
@media screen and (max-width: 719px) {
  body.hong4 .post.ul .post.list .list-img::after {
    font-size: 9px;
    line-height: 11px;
  }
}
body.hong4 .post.ul .post.list .list-item-content {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.hong4 .post.ul .post.list .list-item-content > p {
  display: flex;
  align-items: center;
}
body.hong4 .post.ul .post.list .list-item-content > p .i-list-won {
  width: 16px;
  height: 16px;
  margin-right: 6px;
}
@media screen and (max-width: 719px) {
  body.hong4 .post.ul .post.list .list-item-content > p .i-list-won {
    width: 14px;
    height: 14px;
  }
}
body.hong4 .post.ul .post.list .list-item-content > p .list-item-price {
  font-size: 14px;
  margin-right: 4px;
}
@media screen and (max-width: 719px) {
  body.hong4 .post.ul .post.list .list-item-content > p .list-item-price {
    font-size: 12px;
    margin-right: 3px;
  }
}
body.hong4 .post.ul .post.list .list-item-content > p .f-666 {
  font-size: 13px;
}
@media screen and (max-width: 719px) {
  body.hong4 .post.ul .post.list .list-item-content > p .f-666 {
    font-size: 11px;
  }
}
body.hong4 .post.ul .post.list .list-item-content .list-item-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
body.hong4 .post.ul .post.list .list-item-content .list-item-info .current-state {
  font-size: 0.75rem;
  padding: 6px;
  border: 1px solid;
  border-radius: 2px;
  font-weight: bold;
  background: #ffffff;
}
@media screen and (max-width: 719px) {
  body.hong4 .post.ul .post.list .list-item-content .list-item-info .current-state {
    font-size: 10px;
    padding: 3px 4px;
  }
}
body.hong4 .post.ul .post.list .list-item-content .list-item-info .current-state.current-pos {
  color: var(--h-main-color);
  border-color: #ad93e9;
}
body.hong4 .post.ul .post.list .list-item-content .list-item-info .current-state.current-act {
  color: #1ab8be;
  border-color: #1ab8be;
}
body.hong4 .post.ul .post.list .list-item-content .list-item-info .current-state.current-abs {
  color: var(--h-color-888);
  border-color: #acacac;
}
@media screen and (max-width: 719px) {
  body.hong4 #calendar-list .calendar-bx {
    margin-top: 20px;
  }
}
body.hong4 .fav-banner {
  padding: 20px 20px 0;
  background: #ffffff;
}
body.hong4 .fav-banner .fav-banner-inner {
  background: #f3ecfe;
  border: 1px solid #eee4fe;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  padding: 8px 0;
  max-height: 40px;
}
@media screen and (max-width: 719px) {
  body.hong4 .fav-banner .fav-banner-inner {
    max-height: 30px;
    font-size: 12px;
  }
}
body.hong4 .fav-banner .new {
  font-size: 12px;
  color: #ffffff;
  font-weight: bold;
  background: #d32f2f;
  border-radius: 10px;
  padding: 3px 7px;
  margin-right: 10px;
}
@media screen and (max-width: 719px) {
  body.hong4 .fav-banner .new {
    font-size: 10px;
    padding: 3px 6px;
  }
}
body.hong4 .fav-banner img {
  display: inline-block;
  width: 36px;
  margin: 0 4px 0 7px;
  transform: translateY(-7px);
}
@media screen and (max-width: 719px) {
  body.hong4 .fav-banner img {
    width: 30px;
    margin: 0 2px 0 4px;
    transform: translateY(-6px);
  }
}
body.hong4 .naver-info {
  margin-top: 10px;
  padding: 0 20px;
}
@media screen and (max-width: 719px) {
  body.hong4 .naver-info {
    margin-top: 0;
    padding: 0 10px;
  }
}
body.hong4 .naver-info .naver-info-banner {
  width: 100%;
  background: #1dbf2e;
  border-radius: 4px;
  padding: 20px;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
}
@media screen and (max-width: 719px) {
  body.hong4 .naver-info .naver-info-banner {
    padding: 16px;
  }
}
body.hong4 .naver-info .naver-info-banner > div {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 5px;
}
@media screen and (max-width: 719px) {
  body.hong4 .naver-info .naver-info-banner > div {
    gap: 8px;
    margin-bottom: 4px;
  }
}
body.hong4 .naver-info .naver-info-banner img {
  width: 27px;
}
@media screen and (max-width: 719px) {
  body.hong4 .naver-info .naver-info-banner img {
    width: 20px;
  }
}
body.hong4 .naver-info .naver-info-banner h1 {
  font-size: 24px;
  line-height: 36px;
}
@media screen and (max-width: 719px) {
  body.hong4 .naver-info .naver-info-banner h1 {
    font-size: 18px;
    line-height: 27px;
  }
}
body.hong4 .naver-info .naver-info-banner p {
  font-size: 20px;
  line-height: 29px;
}
@media screen and (max-width: 719px) {
  body.hong4 .naver-info .naver-info-banner p {
    font-size: 14px;
    line-height: 20px;
  }
}
body.hong4 .naver-info > .naver-info-more {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 16px 0 25px;
  justify-content: center;
}
@media screen and (max-width: 719px) {
  body.hong4 .naver-info > .naver-info-more {
    gap: 6px;
    margin: 14px 0;
  }
}
body.hong4 .naver-info > .naver-info-more p {
  font-size: 16px;
}
@media screen and (max-width: 719px) {
  body.hong4 .naver-info > .naver-info-more p {
    font-size: 14px;
  }
}
body.hong4 .naver-info > .naver-info-more img {
  width: 16px;
  margin-top: 2px;
}
@media screen and (max-width: 719px) {
  body.hong4 .naver-info > .naver-info-more img {
    width: 13px;
    margin-top: 0;
  }
}
body.hong4 .list-img.none::after {
  content: none !important;
}
body.hong4 .tab-wrap .tab-container.naver .list-item-info {
  justify-content: space-between;
}
body.hong4 .tab-wrap .tab-container.naver .list-item.visit-counsel > h1 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
@media screen and (max-width: 719px) {
  body.hong4 .tab-wrap .tab-container.naver .list-item.visit-counsel > h1 {
    font-size: 16px;
  }
}
body.hong4 .tab-wrap .tab-container.naver .list-item-info > .list-item-column:nth-child(1) {
  align-items: flex-start;
  flex: 1 0 auto;
  line-height: 24px;
  padding: 0 !important;
  color: #777777;
  font-size: 16px;
}
@media screen and (max-width: 719px) {
  body.hong4 .tab-wrap .tab-container.naver .list-item-info > .list-item-column:nth-child(1) {
    font-size: 14px;
    line-height: 20px;
  }
}
body.hong4 .tab-wrap .tab-container.naver .list-item-info > .list-item-column:nth-child(1) p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
@media screen and (max-width: 719px) {
  body.hong4 .tab-wrap .tab-container.naver .list-item-info > .list-item-column:nth-child(1) p {
    -webkit-line-clamp: 4;
  }
}
body.hong4 .tab-wrap .tab-container.naver .list-item-info > .list-item-column:nth-child(2) {
  justify-content: flex-end;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  align-items: center !important;
  border-bottom: none !important;
}
@media screen and (max-width: 719px) {
  body.hong4 .tab-wrap .tab-container.naver .list-item-info > .list-item-column:nth-child(2) {
    justify-content: flex-start;
    font-size: 13px !important;
    height: auto !important;
    background: none !important;
    border-radius: 0 !important;
    line-height: 19px !important;
  }
}
body.hong4 #item_list.chat li:not(:first-child) > a {
  padding-top: 20px;
}
@media screen and (max-width: 719px) {
  body.hong4 #item_list.chat li:not(:first-child) > a {
    padding-top: 16px;
  }
}
body.hong4 #item_list.chat li:not(:last-child) {
  border-bottom: 1px solid #e9e9e9;
}
body.hong4 #item_list.chat li:not(:last-child) > a {
  padding-bottom: 20px;
}
@media screen and (max-width: 719px) {
  body.hong4 #item_list.chat li:not(:last-child) > a {
    padding-bottom: 16px;
  }
}
body.hong4 #item_list.chat li > a {
  display: block;
}
body.hong4 #item_list.chat li > a > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}
body.hong4 #item_list.chat li .ing {
  font-size: 14px;
  line-height: 20px;
  padding: 3px 6px;
  background: #da4841;
  border-radius: 2px;
  color: #ffffff;
  margin-right: 8px;
}
@media screen and (max-width: 719px) {
  body.hong4 #item_list.chat li .ing {
    font-size: 12px;
    padding: 1px 4px;
  }
}
body.hong4 #item_list.chat li .f-999 {
  font-size: 14px;
}
@media screen and (max-width: 719px) {
  body.hong4 #item_list.chat li .f-999 {
    font-size: 12px;
  }
}
body.hong4 #item_list.chat li p {
  font-size: 14px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
body.hong4 .written-review.profile-review .review-cs-in .counselor-info-con .info-con {
  top: 50%;
  transform: translateY(-50%);
}
body.hong4 .qna-arrow-icon {
  background: url(/hong4/_img/main/ic_qna.svg) left center/14px 14px no-repeat, url(/hong4/_img/main/i-arrow-right.png) no-repeat right center/7px 12px !important;
}
body.hong4 .switch-section {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  padding: 20px 30px;
  text-align: left;
  background: #ffffff;
  border-bottom: 1px solid #e9e9e9;
}
@media screen and (max-width: 719px) {
  body.hong4 .switch-section {
    padding: 20px 16px;
  }
}
body.hong4 .switch-section h3 {
  display: flex;
  align-items: center;
  font-size: 1.125rem;
  font-weight: bold;
  margin-bottom: 5px;
  line-height: 32px;
}
@media screen and (max-width: 719px) {
  body.hong4 .switch-section h3 {
    font-size: 14px;
    line-height: 26px;
    margin-bottom: 6px;
  }
}
body.hong4 .switch-section h3 .i-question {
  display: block;
  width: 20px;
  height: 20px;
  background: url(../img/common/question_y.png) no-repeat center/cover;
}
@media screen and (max-width: 719px) {
  body.hong4 .switch-section h3 .i-question {
    width: 16px;
    height: 16px;
  }
}
body.hong4 .switch-section .desc {
  font-size: 0.875rem;
  line-height: 20px;
  margin-bottom: 8px;
}
@media screen and (max-width: 719px) {
  body.hong4 .switch-section .desc {
    font-size: 14px;
    line-height: 22px;
    margin-bottom: 6px;
  }
}
body.hong4 .switch-section .desc:last-of-type {
  margin-bottom: 0;
}
@media screen and (max-width: 719px) {
  body.hong4 .switch-section .desc:last-of-type {
    font-size: 12px;
  }
}
body.hong4 .switch-section .switch-btn {
  position: absolute;
  right: 30px;
  top: 20px;
}
body.hong4 .switch-section .switch-btn label {
  top: 0;
  transform: none;
}
body.hong4 .comment-info-container {
  padding: 20px 16px;
  background: #f3f4f7;
  text-align: center;
  line-height: 26px;
  font-size: 16px;
  color: var(--h-color-222);
}
@media screen and (max-width: 719px) {
  body.hong4 .comment-info-container {
    font-size: 14px;
    line-height: 22px;
  }
}
body.hong4 .sale-price {
  text-decoration: line-through;
  color: #999;
  font-size: 16px;
  font-weight: normal;
}
@media screen and (max-width: 719px) {
  body.hong4 .sale-price {
    font-size: 13px;
  }
}
body.hong4 .theme-banner.ver2 {
  padding: 0;
}
body.hong4 .theme-banner.ver2 .title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding-left: 20px;
}
@media screen and (max-width: 719px) {
  body.hong4 .theme-banner.ver2 .title {
    gap: 8px;
    margin-bottom: 10px;
    padding-left: 12px;
  }
}
body.hong4 .theme-banner.ver2 .title > img {
  width: 19px;
}
@media screen and (max-width: 719px) {
  body.hong4 .theme-banner.ver2 .title > img {
    width: 14px;
  }
}
body.hong4 .theme-banner.ver2 .title > h1 {
  margin-bottom: 0;
}
body.hong4 .theme-banner.ver2 .swiper-slide {
  width: auto;
  position: relative;
  display: block;
  font-family: "rixrak-sans-pro", sans-serif;
  font-weight: normal;
  line-height: 26px;
  font-size: 16px;
  text-align: left !important;
}
body.hong4 .theme-banner.ver2 .swiper-slide:first-child {
  margin-left: 20px;
}
@media screen and (max-width: 719px) {
  body.hong4 .theme-banner.ver2 .swiper-slide:first-child {
    margin-left: 12px;
  }
}
body.hong4 .theme-banner.ver2 .swiper-slide:last-child {
  margin-right: 20px;
}
@media screen and (max-width: 719px) {
  body.hong4 .theme-banner.ver2 .swiper-slide:last-child {
    margin-right: 12px;
  }
}
@media screen and (max-width: 719px) {
  body.hong4 .theme-banner.ver2 .swiper-slide {
    font-size: 12px;
    line-height: 18px;
  }
}
body.hong4 .theme-banner.ver2 .swiper-slide > a {
  display: block;
  padding: 11px 16px 13px;
  letter-spacing: 0.3px;
}
@media screen and (max-width: 719px) {
  body.hong4 .theme-banner.ver2 .swiper-slide > a {
    padding: 11px 15px 13px;
  }
}
body.hong4 .theme-banner.ver2 .swiper-slide::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 6px;
}
@media screen and (max-width: 719px) {
  body.hong4 .theme-banner.ver2 .swiper-slide::after {
    height: 4px;
  }
}
body.hong4 .theme-banner.ver2 .swiper-slide.purple {
  background: #f9f9ff;
  border: 1px solid #ececff;
}
body.hong4 .theme-banner.ver2 .swiper-slide.purple::after {
  background: #ddddf2;
}
body.hong4 .theme-banner.ver2 .swiper-slide.active.purple {
  border-color: #9069d5;
  font-weight: bold;
  color: #6335b4;
}
body.hong4 .theme-banner.ver2 .swiper-slide.active.purple::after {
  background: #9069d5;
}
body.hong4 .theme-banner.ver2 .swiper-slide.green {
  background: #f5fcf8;
  border: 1px solid #ececff;
}
body.hong4 .theme-banner.ver2 .swiper-slide.green::after {
  background: #d2e5de;
}
body.hong4 .theme-banner.ver2 .swiper-slide.active.green {
  border-color: #00af79;
  font-weight: bold;
  color: #029f7a;
}
body.hong4 .theme-banner.ver2 .swiper-slide.active.green::after {
  background: #00af79;
}
body.hong4 .filter-container {
  width: 100%;
  padding: 14px 20px 20px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
@media screen and (max-width: 719px) {
  body.hong4 .filter-container {
    padding: 14px 16px 16px;
    gap: 14px;
  }
}
body.hong4 .input-field {
  border: 1px solid #e3e7ed;
  background: #ffffff;
  border-radius: 2px;
}
@media screen and (max-width: 719px) {
  body.hong4 .input-field {
    border-radius: 4px;
  }
}
body.hong4 .input-field.filter {
  padding: 5px 7px;
  font-size: 16px;
  line-height: 24px;
  background: url(/hong4/_img/footer/arrow-bottom.png) no-repeat right 16px center/12px 7px #ffffff;
  cursor: pointer;
}
@media screen and (max-width: 719px) {
  body.hong4 .input-field.filter {
    padding: 4px 7px;
    font-size: 13px;
    line-height: 19px;
    background-size: 7px 4px;
    background-position: right 11px center;
  }
}
body.hong4 .input-field.active {
  border-color: #222222;
  font-weight: bold;
}
body.hong4 .input-field.search {
  padding: 11px 16px;
  border-radius: 4px;
}
@media screen and (max-width: 719px) {
  body.hong4 .input-field.search {
    padding: 10px 13px;
  }
}
body.hong4 .input-field.search > input {
  width: 100%;
  font-size: 16px;
  color: #222222;
  font-weight: bold;
}
@media screen and (max-width: 719px) {
  body.hong4 .input-field.search > input {
    font-size: 14px;
  }
}
body.hong4 .input-field.search > input::-moz-placeholder {
  color: #cccccc;
  font-weight: normal;
}
body.hong4 .input-field.search > input::placeholder {
  color: #cccccc;
  font-weight: normal;
}
body.hong4 .input-field.search > .btn_search {
  display: block;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  background: url(/hong4/_img/main/i-search.svg) no-repeat center/20px 20px #ffffff;
  font-size: 0;
  margin-left: 12px;
  cursor: pointer;
}
@media screen and (max-width: 719px) {
  body.hong4 .input-field.search > .btn_search {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    background-size: 18px 18px;
  }
}
body.hong4 .success-item {
  width: 100%;
  padding: 24px 20px 20px;
  background: #ffffff;
}
@media screen and (max-width: 719px) {
  body.hong4 .success-item {
    padding: 20px 16px 16px;
  }
}
body.hong4 .success-item .success-item-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 8px;
}
@media screen and (max-width: 719px) {
  body.hong4 .success-item .success-item-top {
    align-items: center;
    margin-bottom: 6px;
  }
}
body.hong4 .success-item .success-item-top span {
  color: #999999;
  font-size: 14px;
  line-height: 20px;
}
@media screen and (max-width: 719px) {
  body.hong4 .success-item .success-item-top span {
    font-size: 12px;
    line-height: 17px;
  }
}
body.hong4 .success-item h3 {
  font-size: 16px;
  color: #222222;
  font-weight: bold;
  line-height: 24px;
}
@media screen and (max-width: 719px) {
  body.hong4 .success-item h3 {
    font-size: 14px;
    line-height: 20px;
  }
}
body.hong4 .success-item h4 {
  display: flex;
  align-items: center;
}
body.hong4 .success-item p {
  line-height: 24px;
  font-size: 16px;
  margin-bottom: 20px;
}
@media screen and (max-width: 719px) {
  body.hong4 .success-item p {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 16px;
  }
}
body.hong4 .success-item .success-item-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 16px;
  border-radius: 2px;
  background: #f6f6f6;
  font-size: 14px;
  margin-bottom: 16px;
}
@media screen and (max-width: 719px) {
  body.hong4 .success-item .success-item-info {
    padding: 10px 12px;
    font-size: 12px;
    margin-bottom: 12px;
  }
}
body.hong4 .success-item .success-item-info > .d-flex {
  gap: 18px;
}
@media screen and (max-width: 719px) {
  body.hong4 .success-item .success-item-info > .d-flex {
    gap: 16px;
  }
}
body.hong4 .success-item .success-item-profile {
  display: flex;
  align-items: center;
  background: url(/hong4/_img/main/i-arrow-right.png) no-repeat right center/7px 12px;
}
@media screen and (max-width: 719px) {
  body.hong4 .success-item .success-item-profile {
    background-size: 5px 9px;
  }
}
body.hong4 .success-item .success-item-profile .profile-img {
  width: 60px;
  height: 42px;
  border-radius: 5px;
  overflow: hidden;
  margin-right: 12px;
}
@media screen and (max-width: 719px) {
  body.hong4 .success-item .success-item-profile .profile-img {
    width: 50px;
    height: 35px;
    border-radius: 3px;
  }
}
body.hong4 .success-item .success-item-profile .profile-img > img {
  height: 100%;
}
body.hong4 .success-item .success-item-profile i {
  display: inline-block;
  width: 1px;
  height: 13px;
  background: #dddddd;
  margin: 0 8px;
}
@media screen and (max-width: 719px) {
  body.hong4 .success-item .success-item-profile i {
    height: 9px;
  }
}
body.hong4 .none-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 68px 0;
  gap: 8px;
}
@media screen and (max-width: 719px) {
  body.hong4 .none-box {
    padding: 100px 0;
  }
}
body.hong4 .none-box > img {
  display: block;
  width: 28px;
  height: 28px;
}
@media screen and (max-width: 719px) {
  body.hong4 .none-box > img {
    width: 24px;
    height: 24px;
  }
}
body.hong4 .none-box > p {
  font-size: 16px;
  line-height: 24px;
  color: #888888;
}
@media screen and (max-width: 719px) {
  body.hong4 .none-box > p {
    font-size: 14px;
    line-height: 20px;
  }
}
body.hong4 .agreement-box {
  width: 100%;
  background: #f5f5f5;
  border-top: 1px solid #e9e9e9;
  padding: 20px 15px 40px;
}
@media screen and (max-width: 719px) {
  body.hong4 .agreement-box {
    padding: 20px 16px 31px;
  }
}
body.hong4 .agreement-box .agreement-input {
  position: relative;
  padding-left: 26px;
  margin-bottom: 7px;
}
body.hong4 .agreement-box .agreement-input > label {
  display: block;
  font-weight: bold;
  color: #222222;
  line-height: 20px;
  font-size: 14px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
@media screen and (max-width: 719px) {
  body.hong4 .agreement-box .agreement-input > label {
    font-size: 12px;
  }
}
body.hong4 .agreement-box .agreement-input > label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 2px;
  border: 1px solid var(--h-color-ddd);
  background: #ffffff;
}
body.hong4 .agreement-box .agreement-input > input {
  display: none;
}
body.hong4 .agreement-box .agreement-input > input:checked + label::before {
  background: url(/hong4/_img/main/i-checked.png) no-repeat center/10px 8px #ffffff;
}
body.hong4 .agreement-box > p {
  padding-left: 26px;
  font-size: 14px;
  line-height: 22px;
  color: #666666;
}
@media screen and (max-width: 719px) {
  body.hong4 .agreement-box > p {
    font-size: 12px;
    line-height: 20px;
  }
}
body.hong4 .agreement-box .toggle-details-box {
  margin-top: 14px;
  padding-left: 26px;
}
@media screen and (max-width: 719px) {
  body.hong4 .agreement-box .toggle-details-box {
    margin-top: 12px;
  }
}
body.hong4 .agreement-box .toggle-details-box .toggle-details {
  padding: 10px 0;
  display: block;
  width: 100%;
  line-height: 20px;
  font-size: 14px;
  font-weight: bold;
  color: #222222;
  border-bottom: 1px solid #cccccc;
  background: url("../img/common/arrowBottom.png") no-repeat right center/12px 7px;
}
@media screen and (max-width: 719px) {
  body.hong4 .agreement-box .toggle-details-box .toggle-details {
    padding: 8px 0;
    font-size: 12px;
  }
}
body.hong4 .agreement-box .toggle-details-box .toggle-details.visible {
  background: url("../img/common/arrowTop.png") no-repeat right center/12px 7px;
}
body.hong4 .agreement-box .details {
  padding-left: 26px;
}
body.hong4 .agreement-box .details .details-row {
  position: relative;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #cccccc;
  font-size: 14px;
  line-height: 22px;
}
@media screen and (max-width: 719px) {
  body.hong4 .agreement-box .details .details-row {
    font-size: 12px;
    line-height: 18px;
  }
}
body.hong4 .agreement-box .details .details-row .details-title {
  flex: 0 0 110px;
  padding: 12px 12px 14px 0;
  color: #222222;
  font-weight: bold;
}
@media screen and (max-width: 719px) {
  body.hong4 .agreement-box .details .details-row .details-title {
    flex: 0 0 93px;
    padding: 8px 10px 8px 0;
  }
}
body.hong4 .agreement-box .details .details-row .details-title::after {
  content: "";
  position: absolute;
  left: 110px;
  top: 0;
  width: 1px;
  height: 100%;
  background: #cccccc;
}
@media screen and (max-width: 719px) {
  body.hong4 .agreement-box .details .details-row .details-title::after {
    left: 93px;
  }
}
body.hong4 .agreement-box .details .details-row .details-desc {
  color: #666666;
  padding: 12px 0 12px 15px;
}
@media screen and (max-width: 719px) {
  body.hong4 .agreement-box .details .details-row .details-desc {
    padding: 8px 0 8px 10px;
  }
}
body.hong4 .success-post-header {
  width: 100%;
  max-width: 452px;
  margin: 0 auto;
  padding: 18px 0 20px;
}
@media screen and (max-width: 719px) {
  body.hong4 .success-post-header {
    padding: 16px;
    max-width: 100%;
  }
}
body.hong4 .success-post-header img {
  width: 100px;
  height: 64px;
  border-radius: 5px;
  -o-object-fit: cover;
     object-fit: cover;
  flex: 0 0 100px;
}
@media screen and (max-width: 719px) {
  body.hong4 .success-post-header img {
    width: 94px;
    flex: 0 0 94px;
    height: 60px;
  }
}
body.hong4 .success-post-header .success-item-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 16px;
  border-radius: 2px;
  background: #f6f6f6;
  font-size: 14px;
}
@media screen and (max-width: 719px) {
  body.hong4 .success-post-header .success-item-info {
    padding: 10px 12px;
    font-size: 12px;
  }
}
body.hong4 .success-post-header .success-item-info > .d-flex {
  gap: 18px;
}
@media screen and (max-width: 719px) {
  body.hong4 .success-post-header .success-item-info > .d-flex {
    gap: 16px;
  }
}
body.hong4 .current-state {
  font-size: 0.75rem;
  padding: 6px;
  border: 1px solid;
  border-radius: 2px;
  font-weight: bold;
}
@media screen and (max-width: 719px) {
  body.hong4 .current-state {
    padding: 4px;
  }
}
body.hong4 .current-state.current-pos {
  color: var(--h-main-color);
  border-color: #ad93e9;
}
body.hong4 .current-state.current-abs {
  color: var(--h-color-888);
  border-color: #acacac;
}
body.hong4 .current-state.current-act {
  color: #1ab8be;
  border-color: #1ab8be;
}
body.hong4 .success-write-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: #ffffff;
  padding: 20px;
  margin-bottom: 24px;
  border: 1px solid #e3e7ed;
  border-radius: 6px;
  text-align: left;
  font-weight: normal;
  font-size: 16px;
}
@media screen and (max-width: 719px) {
  body.hong4 .success-write-header {
    flex-direction: column;
    padding: 17px;
    font-size: 14px;
    text-align: center;
    margin-bottom: 20px;
  }
}
body.hong4 .success-write-banner {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding: 16px 0 20px;
  background: linear-gradient(90deg, #eddbff, #dfffe8);
  overflow: hidden;
}
@media screen and (max-width: 719px) {
  body.hong4 .success-write-banner {
    padding: 15px 0 18px;
  }
}
body.hong4 .success-write-banner .title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  margin-bottom: 16px;
}
@media screen and (max-width: 719px) {
  body.hong4 .success-write-banner .title {
    padding: 0 16px;
  }
}
body.hong4 .success-write-banner .title > .d-flex {
  font-size: 16px;
  align-items: center;
  gap: 8px;
  line-height: 24px;
}
@media screen and (max-width: 719px) {
  body.hong4 .success-write-banner .title > .d-flex {
    font-size: 14px;
    gap: 6px;
    line-height: 20px;
  }
}
body.hong4 .success-write-banner .title > .d-flex > img {
  width: 16px;
  height: 18px;
}
@media screen and (max-width: 719px) {
  body.hong4 .success-write-banner .title > .d-flex > img {
    width: 14px;
    height: 16px;
  }
}
body.hong4 .success-write-banner .title .comment-more {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 20px;
  font-size: 14px;
  font-weight: normal;
}
@media screen and (max-width: 719px) {
  body.hong4 .success-write-banner .title .comment-more {
    line-height: 17px;
    font-size: 12px;
    gap: 6px;
  }
}
body.hong4 .success-write-banner .title .comment-more > .i-arrow-right {
  width: 5px;
  height: 9px;
}
@media screen and (max-width: 719px) {
  body.hong4 .success-write-banner .title .comment-more > .i-arrow-right {
    width: 4px;
    height: 7px;
  }
}
body.hong4 .successSwiper {
  padding-top: 1px;
  padding-left: 30px;
}
@media screen and (max-width: 719px) {
  body.hong4 .successSwiper {
    padding-left: 16px;
  }
}
body.hong4 .successSwiper .swiper-wrapper {
  height: auto;
}
body.hong4 .successSwiper .swiper-slide {
  height: auto;
  padding: 13px 16px 16px;
  background: #ffffff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
  border-radius: 6px;
  width: 92%;
  max-width: 529px;
  margin-right: 12px;
}
body.hong4 .successSwiper .swiper-slide:last-child {
  margin-right: 30px;
}
@media screen and (max-width: 719px) {
  body.hong4 .successSwiper .swiper-slide:last-child {
    margin-right: 16px;
  }
}
body.hong4 .successSwiper .swiper-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  position: static;
  width: 100%;
  height: 8px;
  margin-top: 21px;
}
@media screen and (max-width: 719px) {
  body.hong4 .successSwiper .swiper-pagination {
    margin-to: 18px;
    height: 6px;
  }
}
body.hong4 .successSwiper .swiper-pagination > .swiper-pagination-bullet {
  margin: 0 5px !important;
  width: 6px;
  height: 6px;
  background: rgba(0, 0, 0, 0.15);
  opacity: 1;
  transition: all 0.5s;
}
@media screen and (max-width: 719px) {
  body.hong4 .successSwiper .swiper-pagination > .swiper-pagination-bullet {
    margin: 0 3px !important;
    width: 4px;
    height: 4px;
  }
}
body.hong4 .successSwiper .swiper-pagination > .swiper-pagination-bullet-active {
  width: 8px;
  height: 8px;
  background: #222222;
}
@media screen and (max-width: 719px) {
  body.hong4 .successSwiper .swiper-pagination > .swiper-pagination-bullet-active {
    width: 6px;
    height: 6px;
  }
}
body.hong4 .success-write-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 24px;
  line-height: 24px;
  border-radius: 16px;
  border: 1px solid #e3e7ed;
  background: #ffffff;
}
@media screen and (max-width: 719px) {
  body.hong4 .success-write-button {
    padding: 4px 20px;
    line-height: 20px;
    gap: 6px;
    border-radius: 14.5px;
  }
}
body.hong4 .success-write-button > img {
  width: 16px !important;
  height: 16px !important;
  margin-top: 1px;
}
@media screen and (max-width: 719px) {
  body.hong4 .success-write-button > img {
    width: 13px !important;
    height: 13px !important;
  }
}
body.hong4 .success-write-content {
  padding-top: 24px;
}
@media screen and (max-width: 719px) {
  body.hong4 .success-write-content {
    padding-top: 20px;
  }
}
body.hong4 .success-write-content h5 {
  font-size: 16px;
  font-weight: bold;
}
@media screen and (max-width: 719px) {
  body.hong4 .success-write-content h5 {
    font-size: 14px;
  }
}
body.hong4 .success-write-content i {
  display: inline-block;
  width: 1px;
  height: 13px;
  background: #dddddd;
  margin: 0 8px;
}
@media screen and (max-width: 719px) {
  body.hong4 .success-write-content i {
    height: 9px;
  }
}
body.hong4 .success-write-content .user-info {
  display: block;
  font-size: 16px;
  color: #cccccc;
  border-bottom: 1px solid #dddddd;
  padding: 8px 0;
  background: url(/hong4/_img/main/i-arrow-right.png) no-repeat right center/7px 12px;
  line-height: 24px;
  margin-bottom: 20px;
}
@media screen and (max-width: 719px) {
  body.hong4 .success-write-content .user-info {
    line-height: 20px;
    padding: 9px 0 9px;
    background-size: 5px 9px;
    margin-bottom: 12px;
    font-size: 14px;
  }
}
body.hong4 .success-write-content .profile-img {
  width: 60px;
  height: 42px;
  border-radius: 5px;
  overflow: hidden;
  margin-right: 12px;
}
body.hong4 .success-write-content .profile-img img {
  height: 100%;
}
body.hong4 .success-benefit {
  padding-top: 24px;
}
body.hong4 .success-benefit h5 {
  text-align: center;
  font-size: 16px;
  line-height: 24px;
  font-weight: bold;
  margin-bottom: 16px;
}
@media screen and (max-width: 719px) {
  body.hong4 .success-benefit h5 {
    font-size: 14px;
    margin-bottom: 12px;
    line-height: 20px;
  }
}
body.hong4 .success-benefit .row-container {
  border-top: 1px solid #222;
}
body.hong4 .success-benefit .row {
  display: flex;
  align-items: center;
  font-size: 16px;
  line-height: 24px;
  border-bottom: 1px solid #e9e9e9;
}
@media screen and (max-width: 719px) {
  body.hong4 .success-benefit .row {
    font-size: 14px;
    line-height: 20px;
  }
}
body.hong4 .success-benefit .row-title {
  width: 50%;
  min-width: 185px;
  padding: 12px 0;
  border-right: 1px solid #e9e9e9;
}
@media screen and (max-width: 719px) {
  body.hong4 .success-benefit .row-title {
    min-width: 160px;
    padding: 10px 0;
  }
}
body.hong4 .success-benefit .row-desc {
  width: 50%;
  padding: 12px 0 12px 16px;
}
@media screen and (max-width: 719px) {
  body.hong4 .success-benefit .row-desc {
    padding: 10px 0 10px 16px;
  }
}
body.hong4 .success-type-radio {
  display: flex;
  align-items: center;
  border-radius: 4px;
  background: #f1f1f1;
  line-height: 24px;
}
@media screen and (max-width: 719px) {
  body.hong4 .success-type-radio {
    line-height: 20px;
  }
}
body.hong4 .success-type-radio > input {
  display: none;
}
body.hong4 .success-type-radio > input:checked + label {
  background: #6335b4;
  color: #ffffff;
}
body.hong4 .success-type-radio label {
  width: 100%;
  padding: 6px;
  border-radius: 4px;
  text-align: center;
  transition: all 0.3s;
  cursor: pointer;
}
body.hong4 .success-tooltip {
  position: relative;
}
body.hong4 .success-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 0;
  top: -34px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  line-height: 17px;
  background: #1ab8be;
  padding: 3px 12px 4px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: normal;
}
@media screen and (max-width: 719px) {
  body.hong4 .success-tooltip::after {
    line-height: 16px;
    padding: 2px 10px 4px;
    font-size: 11px;
    border-radius: 11px;
    top: -31px;
  }
}
body.hong4 .success-tooltip::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 15px;
  border: 7px solid;
  border-color: #1ab8be transparent transparent transparent;
  transform: scaleX(0.8);
}
@media screen and (max-width: 719px) {
  body.hong4 .success-tooltip::before {
    border: 6px solid;
    border-color: #1ab8be transparent transparent transparent;
    top: -9px;
    left: 13px;
    transform: scaleX(0.7);
  }
}
body.hong4 .success-list .radio-btn {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(/hong4/_img/main/i-check-circle.png) no-repeat center/cover;
  cursor: pointer;
  flex: 0 0 24px;
  pointer-events: none;
}
@media screen and (max-width: 719px) {
  body.hong4 .success-list .radio-btn {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
  }
}
body.hong4 .success-list input[type=radio]:checked + div > label.radio-btn {
  background: url(/hong4/_img/main/i-check-on.png) no-repeat center/cover;
}
body.hong4 .hongaca {
  position: absolute;
  left: 50%;
  bottom: 6px;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 5px 14px;
  border-radius: 4px;
  background: rgba(92, 125, 232, 0.8);
  font-size: 11px;
  line-height: 16px;
  font-family: "rixrak-sans-pro", sans-serif;
  font-weight: bold;
  color: #ffffff;
  white-space: nowrap;
}
body.hong4 .hongaca > img {
  display: block;
  width: 9px;
}
body.hong4 .hongaca.banner {
  position: static;
  left: auto;
  bottom: auto;
  transform: none;
  width: 100%;
  background: #728bef;
  font-size: 22px;
  line-height: 31px;
  padding: 18px;
  margin-bottom: 20px;
  gap: 10px;
}
@media screen and (max-width: 719px) {
  body.hong4 .hongaca.banner {
    gap: 6px;
    padding: 11px;
    font-size: 15px;
    line-height: 21px;
  }
}
body.hong4 .hongaca.banner > img {
  width: 16px;
}
@media screen and (max-width: 719px) {
  body.hong4 .hongaca.banner > img {
    width: 11px;
  }
}
body.hong4 .my-coin-confirm {
  border: 1px solid #e9e9e9;
  border-radius: 8px;
  overflow: hidden;
}
body.hong4 .my-coin-confirm .in-top {
  display: flex;
  align-items: center;
  height: 89px;
}
body.hong4 .my-coin-confirm .in-top > h5, body.hong4 .my-coin-confirm .in-top > .f-column {
  flex: 0 0 50%;
  text-align: center;
}
body.hong4 .my-coin-confirm .in-top.login {
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
@media screen and (max-width: 719px) {
  body.hong4 .my-coin-confirm .in-top {
    height: 76px;
  }
}
body.hong4 .my-coin-confirm .in-top .line {
  width: 1px;
  height: 26px;
  background: #e9e9e9;
  flex: 0 0 auto;
}
@media screen and (max-width: 719px) {
  body.hong4 .my-coin-confirm .in-top .line {
    height: 24px;
  }
}
body.hong4 .my-coin-confirm .in-bot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 50px;
  background: #f9f9f9;
  gap: 8px;
  padding: 13px;
  font-weight: bold;
  border-top: 1px solid #e9e9e9;
}
@media screen and (max-width: 719px) {
  body.hong4 .my-coin-confirm .in-bot {
    height: 46px;
    gap: 6px;
  }
}
body.hong4 .my-coin-confirm .in-bot .coin {
  width: 15px;
}
@media screen and (max-width: 719px) {
  body.hong4 .my-coin-confirm .in-bot .coin {
    width: 13px;
    margin-right: 2px;
    margin-top: 1px;
  }
}
body.hong4 .my-coin-confirm .in-bot .arrow {
  width: 7px;
  margin-top: 2px;
}
@media screen and (max-width: 719px) {
  body.hong4 .my-coin-confirm .in-bot .arrow {
    width: 5px;
    margin-top: 1px;
  }
}
body.hong4 .chat-greeting {
  padding-bottom: 24px;
  margin-bottom: 20px;
  line-height: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  position: relative;
}
@media screen and (max-width: 719px) {
  body.hong4 .chat-greeting {
    padding-bottom: 12px;
  }
}
body.hong4 .chat-greeting::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 1px;
  background: #f1f1f1;
}
body.hong4 .chat-greeting .button {
  width: 124px;
  height: 32px;
  border-radius: 2px;
  background: var(--h-main-color);
  display: flex;
  align-items: center;
  padding: 5px 12px 7px;
  gap: 8px;
  color: var(--h-color-fff);
  font-weight: bold;
  font-size: 14px;
}
@media screen and (max-width: 719px) {
  body.hong4 .chat-greeting .button {
    font-size: 11px;
    width: 92px;
    height: 24px;
    padding: 3px 8px 5px;
    gap: 4px;
  }
}
body.hong4 .chat-greeting .write {
  width: 12px;
}
@media screen and (max-width: 719px) {
  body.hong4 .chat-greeting .write {
    width: 10px;
  }
}
body.hong4 .chat-greeting .arrow {
  width: 5px;
}
@media screen and (max-width: 719px) {
  body.hong4 .chat-greeting .arrow {
    width: 4px;
    margin-top: 1px;
    margin-left: 2px;
  }
}
body.hong4 .main_banner-list_btn {
  position: absolute;
  right: 58px;
  bottom: 8.5px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  font-family: "rixrak-sans-pro", sans-serif;
  font-size: 12px;
  font-weight: bold;
  border-radius: 4px;
  color: #ffffff;
  background: #8b9edb;
  cursor: pointer;
  letter-spacing: 0.24px;
}
@media screen and (max-width: 719px) {
  body.hong4 .main_banner-list_btn {
    right: 20px;
    bottom: 7px;
    gap: 4px;
    padding: 3px 6px;
    font-size: 9px;
    letter-spacing: 0.18px;
  }
}
body.hong4 .main_banner-list_btn img {
  display: block;
  width: 9px;
}
@media screen and (max-width: 719px) {
  body.hong4 .main_banner-list_btn img {
    width: 6px;
  }
}
body.hong4 .recent_con-container {
  display: flex;
  justify-content: center;
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 64px;
  z-index: 10;
}
@media screen and (max-width: 719px) {
  body.hong4 .recent_con-container {
    bottom: 54px;
  }
}
body.hong4 .recent_con-container .recent_con-inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 718px;
  height: 80px;
  background: rgba(246, 245, 255, 0.8);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  padding: 0 20px;
}
@media screen and (max-width: 719px) {
  body.hong4 .recent_con-container .recent_con-inner {
    height: 71px;
    padding: 0 12px;
  }
}
body.hong4 .recent_con-container .recent_con-inner button {
  position: absolute;
  right: 20px;
  top: -42px;
  display: block;
  width: 32px;
  height: 32px;
  cursor: pointer;
  background: none;
}
@media screen and (max-width: 719px) {
  body.hong4 .recent_con-container .recent_con-inner button {
    width: 24px;
    height: 24px;
    right: 12px;
    top: -30px;
  }
}
body.hong4 .recent_con-container .recent_con-inner button img {
  display: block;
  width: 100%;
  height: 100%;
}
body.hong4 .recent_con-container .recent_con-inner::before {
  content: "";
  position: absolute;
  top: -60px;
  left: 0;
  width: 100%;
  height: 60px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), #000000);
  opacity: 0.15;
  pointer-events: none;
}
@media screen and (max-width: 719px) {
  body.hong4 .recent_con-container .recent_con-inner::before {
    height: 40px;
    top: -40px;
  }
}
body.hong4 .recent_con-container .list-img {
  width: 80px;
  min-width: auto;
  height: 56px;
  margin-right: 0;
}
@media screen and (max-width: 719px) {
  body.hong4 .recent_con-container .list-img {
    width: 60px;
    height: 42px;
  }
}
body.hong4 .recent_con-container .list-img img {
  height: 89%;
}
body.hong4 .recent_con-container .recent_con-text h5 {
  font-size: 16px;
  line-height: 24px;
  font-weight: bold;
  color: #222222;
}
@media screen and (max-width: 719px) {
  body.hong4 .recent_con-container .recent_con-text h5 {
    font-size: 15px;
    line-height: 22px;
  }
}
body.hong4 .recent_con-container .recent_con-text p {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  line-height: 20px;
  color: #222222;
}
@media screen and (max-width: 719px) {
  body.hong4 .recent_con-container .recent_con-text p {
    font-size: 13px;
    line-height: 19px;
  }
}
body.hong4 .recent_con-container .recent_con-text .line {
  display: inline-block;
  width: 1px;
  height: 12px;
  background: #d0cfe3;
  margin: 0 3px;
}
body.hong4 .recent_con-container .recent_con-call_btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 6px;
  background: #6335b4;
  color: #ffffff;
  font-size: 14px;
  line-height: 20px;
}
body.hong4 .recent_con-container .recent_con-call_btn.purple {
  background: #6335b4;
}
body.hong4 .recent_con-container .recent_con-call_btn.green {
  background: #00af79;
}
@media screen and (max-width: 719px) {
  body.hong4 .recent_con-container .recent_con-call_btn {
    gap: 6px;
    padding: 4px 10px 5px;
    font-size: 13px;
    line-height: 19px;
  }
}
body.hong4 .recent_con-container .recent_con-call_btn img {
  display: block;
  width: 5px;
  height: 9px;
}
@media screen and (max-width: 719px) {
  body.hong4 .recent_con-container .recent_con-call_btn img {
    width: 4px;
    height: 8px;
  }
}
body.hong4 .search-wrap.combine {
  min-height: auto;
  padding-bottom: 20px;
}
body.hong4 .search-wrap.combine .tab-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 62px;
  padding: 0 20px;
  color: #222222;
  line-height: 26px;
  font-size: 18px;
  border-bottom: 1px solid #e3e7ed;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .tab-list {
    height: 50px;
    padding: 0 16px;
    font-size: 16px;
    line-height: 24px;
  }
}
body.hong4 .search-wrap.combine .tab-list li {
  position: relative;
  width: 33.3333333333%;
  height: 100%;
}
body.hong4 .search-wrap.combine .tab-list .active {
  color: #6335b4;
  font-weight: bold;
  line-height: 27px;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .tab-list .active {
    line-height: 24px;
  }
}
body.hong4 .search-wrap.combine .tab-list .active::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1.5px;
  width: 100%;
  height: 3px;
  border-radius: 1.5px;
  background: #6335b4;
}
body.hong4 .search-wrap.combine .tab-list a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
body.hong4 .search-wrap.combine .search-area {
  width: 100%;
  padding: 32px 20px;
  background: #f6f7f8;
  border-bottom: 1px solid #e9e9e9;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .search-area {
    padding: 20px 16px;
  }
}
body.hong4 .search-wrap.combine .search-area .search-inputbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border: 1px solid #dddddd;
  border-radius: 6px;
  background: #ffffff;
  padding: 13px 16px;
  cursor: pointer;
}
body.hong4 .search-wrap.combine .search-area .search-inputbox.active {
  border-color: #222222;
}
body.hong4 .search-wrap.combine .search-area .search-inputbox.active span {
  font-weight: bold;
  color: #222222;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .search-area .search-inputbox {
    gap: 10px;
    padding: 8px 13px;
  }
}
body.hong4 .search-wrap.combine .search-area .search-inputbox .btn_search {
  display: block;
  width: 24px;
  height: 24px;
  background: url(/hong4/_img/main/ic-search.svg) no-repeat center/cover;
  flex: 0 0 24px;
  cursor: pointer;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .search-area .search-inputbox .btn_search {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
  }
}
body.hong4 .search-wrap.combine .search-area .search-inputbox .btn_search span {
  display: inline;
  width: auto;
  height: auto;
  background: none;
}
body.hong4 .search-wrap.combine .search-area .inputbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-size: 20px;
  color: #aaaaaa;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .search-area .inputbox {
    font-size: 16px;
  }
}
body.hong4 .search-wrap.combine .search-main {
  background: #ffffff;
}
body.hong4 .search-wrap.combine .search-main section .section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 20px 0;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .search-main section .section-header {
    padding: 20px 16px 0;
  }
}
body.hong4 .search-wrap.combine .search-main section .section-header h3 {
  font-size: 18px;
  line-height: 27px;
  font-weight: bold;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .search-main section .section-header h3 {
    font-size: 15px;
    line-height: 22px;
  }
}
body.hong4 .search-wrap.combine .search-main section .section-header .delete-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: #777777;
  font-size: 14px;
  line-height: 20px;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .search-main section .section-header .delete-btn {
    gap: 6px;
    font-size: 12px;
    line-height: 17px;
  }
}
body.hong4 .search-wrap.combine .search-main section .section-header .delete-btn .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border: 1px solid #e9e9e9;
  border-radius: 2px;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .search-main section .section-header .delete-btn .icon {
    width: 16px;
    height: 16px;
  }
}
body.hong4 .search-wrap.combine .search-main section .section-header .delete-btn .icon img {
  display: block;
  width: 8px;
  height: 8px;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .search-main section .section-header .delete-btn .icon img {
    width: 6px;
    height: 6px;
  }
}
body.hong4 .search-wrap.combine .search-main section .section-content .recent-none {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 45px 0 65px 0;
  font-size: 16px;
  line-height: 24px;
  color: #bbbbbb;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .search-main section .section-content .recent-none {
    padding: 30px 0 50px 0;
    font-size: 14px;
    line-height: 20px;
  }
}
body.hong4 .search-wrap.combine .search-main section .section-content .recent-none img {
  display: block;
  width: 18px;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .search-main section .section-content .recent-none img {
    width: 15px;
  }
}
body.hong4 .search-wrap.combine .search-main section .section-content .recent-list {
  padding: 11px 20px 40px;
}
body.hong4 .search-wrap.combine .search-main section .section-content .recent-list li {
  height: 44px;
  line-height: 44px;
  font-size: 18px;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .search-main section .section-content .recent-list li {
    height: 32px;
    line-height: 32px;
    font-size: 14px;
  }
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .search-main section .section-content .recent-list li a {
    padding: 0 24px 0 11px;
  }
}
body.hong4 .search-wrap.combine .search-main section .section-content .recent-list li span {
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
body.hong4 .search-wrap.combine .search-main section .section-content .recent-list li .i-recent-exit {
  width: 12px;
  height: 12px;
  padding: 12px;
  top: 52%;
  background: url(/hong4/_img/main/i-delete.svg) no-repeat center/cover;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .search-main section .section-content .recent-list li .i-recent-exit {
    width: 8px;
    height: 8px;
    padding: 8px;
  }
}
body.hong4 .search-wrap.combine .search-main section .section-content .frequent-counselor-list {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 11px 20px 40px;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .search-main section .section-content .frequent-counselor-list {
    gap: 11px;
    padding: 10px 16px 17px;
  }
}
body.hong4 .search-wrap.combine .search-main section .section-content .frequent-counselor-list .frequent-counselor-item {
  width: calc((100% - 24px) / 2);
  flex: 0 0 calc((100% - 24px) / 2);
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .search-main section .section-content .frequent-counselor-list .frequent-counselor-item {
    width: calc((100% - 22px) / 3);
    flex: 0 0 calc((100% - 22px) / 3);
    margin-bottom: 13px;
  }
}
body.hong4 .search-wrap.combine .search-main section .section-content .frequent-counselor-list .frequent-counselor-item a {
  display: flex;
  gap: 16px;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .search-main section .section-content .frequent-counselor-list .frequent-counselor-item a {
    flex-direction: column;
    gap: 6px;
  }
}
body.hong4 .search-wrap.combine .search-main section .section-content .frequent-counselor-list .frequent-counselor-item .profile {
  width: 154px;
  height: 108px;
  border-radius: 6px;
  overflow: hidden;
  flex: 0 0 154px;
  aspect-ratio: 154/108;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .search-main section .section-content .frequent-counselor-list .frequent-counselor-item .profile {
    width: 100%;
    height: auto;
    border-radius: 4px;
    flex: 0 0 100%;
  }
}
body.hong4 .search-wrap.combine .search-main section .section-content .frequent-counselor-list .frequent-counselor-item .profile.tarot {
  background: url(/hong4/_img/main/bg_tarot.jpg) no-repeat center/cover;
}
body.hong4 .search-wrap.combine .search-main section .section-content .frequent-counselor-list .frequent-counselor-item .profile.saju {
  background: url(/hong4/_img/main/bg_saju.jpg) no-repeat center/cover;
}
body.hong4 .search-wrap.combine .search-main section .section-content .frequent-counselor-list .frequent-counselor-item .profile.fortune {
  background: url(/hong4/_img/main/bg_fortune.png) no-repeat center/cover;
}
body.hong4 .search-wrap.combine .search-main section .section-content .frequent-counselor-list .frequent-counselor-item .profile img {
  height: 100%;
  display: block;
}
body.hong4 .search-wrap.combine .search-main section .section-content .frequent-counselor-list .frequent-counselor-item .info .text {
  display: flex;
  align-items: center;
  gap: 5px;
  line-height: 25px;
  font-size: 17px;
  margin-bottom: 8px;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .search-main section .section-content .frequent-counselor-list .frequent-counselor-item .info .text {
    line-height: 18px;
    font-size: 12px;
    margin-bottom: 6px;
  }
}
body.hong4 .search-wrap.combine .search-main section .section-content .frequent-counselor-list .frequent-counselor-item .info .text .counselor-type {
  flex: 0 0 auto;
}
body.hong4 .search-wrap.combine .search-main section .section-content .frequent-counselor-list .frequent-counselor-item .info .text .counselor-name {
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
body.hong4 .search-wrap.combine .search-main section .section-content .frequent-counselor-list .frequent-counselor-item .info .status {
  font-family: var(--h-body-font-family);
  padding: 2px 6px 4px;
  font-size: 12px;
  font-weight: bold;
  line-height: 18px;
  color: #ffffff;
  border-radius: 4px;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .search-main section .section-content .frequent-counselor-list .frequent-counselor-item .info .status {
    padding: 1px 4px 2px;
    font-size: 10px;
    line-height: 15px;
    border-radius: 2px;
  }
}
body.hong4 .search-wrap.combine .search-main section .section-content .frequent-counselor-list .frequent-counselor-item .info .status.pos {
  background: #6335b4;
}
body.hong4 .search-wrap.combine .search-main section .section-content .frequent-counselor-list .frequent-counselor-item .info .status.ing {
  background: #1ab8be;
}
body.hong4 .search-wrap.combine .search-main section .section-content .most-sale-list {
  padding: 15px 0 40px 24px;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .search-main section .section-content .most-sale-list {
    padding: 10px 0 30px 16px;
  }
}
body.hong4 .search-wrap.combine .search-main section .section-content .counselor-field-list,
body.hong4 .search-wrap.combine .search-main section .section-content .counselor-style-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 15px 20px 20px;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .search-main section .section-content .counselor-field-list,
  body.hong4 .search-wrap.combine .search-main section .section-content .counselor-style-list {
    padding: 10px 16px 16px;
  }
}
body.hong4 .search-wrap.combine .search-main section .section-content .counselor-field-list .counselor-field-item,
body.hong4 .search-wrap.combine .search-main section .section-content .counselor-field-list .counselor-style-item,
body.hong4 .search-wrap.combine .search-main section .section-content .counselor-style-list .counselor-field-item,
body.hong4 .search-wrap.combine .search-main section .section-content .counselor-style-list .counselor-style-item {
  border: 1px solid #e9e9e9;
  font-size: 18px;
  line-height: 26px;
  border-radius: 4px;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .search-main section .section-content .counselor-field-list .counselor-field-item,
  body.hong4 .search-wrap.combine .search-main section .section-content .counselor-field-list .counselor-style-item,
  body.hong4 .search-wrap.combine .search-main section .section-content .counselor-style-list .counselor-field-item,
  body.hong4 .search-wrap.combine .search-main section .section-content .counselor-style-list .counselor-style-item {
    font-size: 14px;
    line-height: 20px;
  }
}
body.hong4 .search-wrap.combine .search-main section .section-content .counselor-field-list .counselor-field-item a,
body.hong4 .search-wrap.combine .search-main section .section-content .counselor-field-list .counselor-style-item a,
body.hong4 .search-wrap.combine .search-main section .section-content .counselor-style-list .counselor-field-item a,
body.hong4 .search-wrap.combine .search-main section .section-content .counselor-style-list .counselor-style-item a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px 9px;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .search-main section .section-content .counselor-field-list .counselor-field-item a,
  body.hong4 .search-wrap.combine .search-main section .section-content .counselor-field-list .counselor-style-item a,
  body.hong4 .search-wrap.combine .search-main section .section-content .counselor-style-list .counselor-field-item a,
  body.hong4 .search-wrap.combine .search-main section .section-content .counselor-style-list .counselor-style-item a {
    gap: 6px;
    padding: 6px 11px;
  }
}
body.hong4 .search-wrap.combine .search-main section .section-content .counselor-field-list .counselor-field-item img,
body.hong4 .search-wrap.combine .search-main section .section-content .counselor-field-list .counselor-style-item img,
body.hong4 .search-wrap.combine .search-main section .section-content .counselor-style-list .counselor-field-item img,
body.hong4 .search-wrap.combine .search-main section .section-content .counselor-style-list .counselor-style-item img {
  display: block;
  width: 18px;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .search-main section .section-content .counselor-field-list .counselor-field-item img,
  body.hong4 .search-wrap.combine .search-main section .section-content .counselor-field-list .counselor-style-item img,
  body.hong4 .search-wrap.combine .search-main section .section-content .counselor-style-list .counselor-field-item img,
  body.hong4 .search-wrap.combine .search-main section .section-content .counselor-style-list .counselor-style-item img {
    width: 14px;
  }
}
body.hong4 .search-wrap.combine .search-main section .section-content .counselor-field-flip,
body.hong4 .search-wrap.combine .search-main section .section-content .counselor-style-flip {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 40px;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .search-main section .section-content .counselor-field-flip,
  body.hong4 .search-wrap.combine .search-main section .section-content .counselor-style-flip {
    margin-bottom: 30px;
  }
}
body.hong4 .search-wrap.combine .search-main section .section-content .counselor-field-flip button,
body.hong4 .search-wrap.combine .search-main section .section-content .counselor-style-flip button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 166px;
  height: 32px;
  border-radius: 16px;
  background: #f7f7f7;
  border: 1px solid #e9e9e9;
  cursor: pointer;
  z-index: 2;
  color: #222222;
  font-family: var(--h-body-font-family);
  font-size: 16px;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .search-main section .section-content .counselor-field-flip button,
  body.hong4 .search-wrap.combine .search-main section .section-content .counselor-style-flip button {
    gap: 6px;
    width: 123px;
    height: 23px;
    border-radius: 12px;
    font-size: 12px;
  }
}
body.hong4 .search-wrap.combine .search-main section .section-content .counselor-field-flip button img,
body.hong4 .search-wrap.combine .search-main section .section-content .counselor-style-flip button img {
  display: block;
  width: 9px;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .search-main section .section-content .counselor-field-flip button img,
  body.hong4 .search-wrap.combine .search-main section .section-content .counselor-style-flip button img {
    width: 7px;
  }
}
body.hong4 .search-wrap.combine .search-main section .section-content .counselor-field-flip::before,
body.hong4 .search-wrap.combine .search-main section .section-content .counselor-style-flip::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background: #e9e9e9;
  z-index: 1;
}
body.hong4 .search-wrap.combine .search-main .no-recent-result {
  padding-bottom: 40px;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .search-main .no-recent-result {
    padding-bottom: 30px;
  }
}
body.hong4 .search-wrap.combine .search-main .no-recent-result h1 {
  font-size: 18px;
  line-height: 27px;
  padding-bottom: 11px;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .search-main .no-recent-result h1 {
    font-size: 15px;
    line-height: 22px;
    padding-bottom: 8px;
  }
}
body.hong4 .search-wrap.combine .search-main .no-recent-result h3 {
  font-size: 18px;
  margin-bottom: 12px;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .search-main .no-recent-result h3 {
    font-size: 16px;
    margin-bottom: 8px;
  }
}
body.hong4 .search-wrap.combine .search-main .no-recent-result p {
  color: #999999;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .search-main .no-recent-result p {
    font-size: 12px;
    line-height: 20px;
  }
}
body.hong4 .search-wrap.combine .search-main .recent-result-header {
  align-items: flex-end;
  padding: 13px 20px;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .search-main .recent-result-header {
    padding: 11px 16px;
  }
}
body.hong4 .search-wrap.combine .search-main .recent-result-header h1 {
  line-height: 27px;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .search-main .recent-result-header h1 {
    font-size: 15px;
    line-height: 22px;
  }
}
body.hong4 .search-wrap.combine .search-main .recent-result-header .search-filter-box {
  max-width: 175px;
  margin-bottom: 2px;
  line-height: 24px;
  padding: 6px 40px 8px 16px;
  border-radius: 4px;
  border: 1px solid #e3e7ed;
  font-size: 1rem;
  background: url(/hong4/_img/footer/arrow-bottom.png) no-repeat right 16px center/12px 7px;
  color: var(--h-color-222);
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .search-main .recent-result-header .search-filter-box {
    max-width: 130px;
    margin-bottom: 3px;
    line-height: 19px;
    padding: 4px 23px 5px 10px;
    border-radius: 3px;
    font-size: 13px;
    background-size: 7px 4px;
    background-position: right 10px center;
  }
}
body.hong4 .search-wrap.combine .search-main .recent-result-header .search-filter-box.active {
  font-weight: bold;
  border-color: #222222;
}
body.hong4 .search-wrap.combine .search-main .result-title-common {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
body.hong4 .search-wrap.combine .search-main .standby-status-box {
  font-size: 14px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .search-main .standby-status-box {
    font-size: 12px;
  }
}
body.hong4 .search-wrap.combine .search-main .standby-status-box input {
  display: none;
}
body.hong4 .search-wrap.combine .search-main .standby-status-box input:checked + label::before {
  background: url(/hong4/_img/main/i-checked.png) no-repeat center/10px 8px #ffffff;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .search-main .standby-status-box input:checked + label::before {
    background-size: 9px 7px;
  }
}
body.hong4 .search-wrap.combine .search-main .standby-status-box label {
  position: relative;
  padding-left: 26px;
  cursor: pointer;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .search-main .standby-status-box label {
    padding-left: 22px;
  }
}
body.hong4 .search-wrap.combine .search-main .standby-status-box label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  border-radius: 2px;
  border: 1px solid var(--h-color-ddd);
  background: #ffffff;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .search-main .standby-status-box label::before {
    width: 16px;
    height: 16px;
  }
}
body.hong4 .search-wrap.combine .search-main .mark {
  display: inline-block;
  background: #ffe600;
}
body.hong4 .search-wrap.combine .search-main .tab-wrap {
  padding-bottom: 26px;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .search-main .tab-wrap {
    padding-bottom: 16px;
  }
}
body.hong4 .search-wrap.combine .search-main.review .tab-wrap {
  padding-bottom: 0;
}
body.hong4 .search-wrap.combine .search-main.review .counsel-style .active {
  background: #ffe600;
  padding: 1px 3px;
}
body.hong4 .search-wrap.combine .search-main.review h1 {
  font-size: 18px;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .search-main.review h1 {
    font-size: 15px;
  }
}
body.hong4 .search-wrap.combine .search-main.review .recent-result-header {
  padding: 24px 20px 0;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .search-main.review .recent-result-header {
    padding: 20px 16px 0;
  }
}
body.hong4 .search-wrap.combine .search-main.review .recent-result-header .d-flex-b-c {
  width: 100%;
  border-bottom: 1px solid #e9e9e9;
  padding-bottom: 15px;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .search-main.review .recent-result-header .d-flex-b-c {
    padding-bottom: 8px;
  }
}
body.hong4 .search-wrap.combine .search-main.review .sort-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  line-height: 21px;
  color: #222222;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .search-main.review .sort-filter {
    gap: 10px;
    font-size: 13px;
    line-height: 19px;
  }
}
body.hong4 .search-wrap.combine .search-main.review .sort-filter select {
  padding: 5px 16px 5px 5px;
  font-size: 15px;
  line-height: 21px;
  background: url(/hong4/_img/main/i-sort.svg) no-repeat center right/8px 14px;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .search-main.review .sort-filter select {
    padding: 4px 17px 4px 4px;
    font-size: 13px;
    line-height: 19px;
    background: url(/hong4/_img/main/i-sort.svg) no-repeat center right/7px 12px;
  }
}
body.hong4 .search-wrap.combine .search-main.review .sort-filter select:focus {
  outline: none;
  border: 0;
}
body.hong4 .search-wrap.combine .search-main.review .sort-filter img {
  display: block;
  width: 8px;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .search-main.review .sort-filter img {
    width: 7px;
  }
}
body.hong4 .search-wrap.combine .search-main.review .filter-section {
  padding: 0 20px;
  overflow: hidden;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .search-main.review .filter-section {
    padding: 0 16px;
  }
}
body.hong4 .search-wrap.combine .search-main.review .search-filter-swiper {
  position: relative;
  padding: 16px 0;
  border-bottom: 1px solid #e9e9e9;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .search-main.review .search-filter-swiper {
    padding: 10px 0;
  }
}
body.hong4 .search-wrap.combine .search-main.review .search-filter {
  display: flex;
  align-items: center;
}
body.hong4 .search-wrap.combine .search-main.review .search-filter li {
  width: auto;
  flex: 0 0 auto;
  line-height: 24px;
  padding: 7px 30px 7px 12px;
  border-radius: 4px;
  border: 1px solid #e9e9e9;
  font-size: 16px;
  background: url(/hong4/_img/footer/arrow-bottom.png) no-repeat right 12px top 17px/10px 6px;
  color: var(--h-color-222);
  cursor: pointer;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .search-main.review .search-filter li {
    line-height: 19px;
    padding: 4px 23px 5px 10px;
    font-size: 13px;
    background-size: 7px 4px;
    background-position: right 10px center;
  }
}
body.hong4 .search-wrap.combine .search-main.review .search-filter li[data-tab=all] {
  max-width: 180px;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .search-main.review .search-filter li[data-tab=all] {
    max-width: 150px;
  }
}
body.hong4 .search-wrap.combine .search-main.review .search-filter li[data-tab=pg] {
  max-width: 130px;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .search-main.review .search-filter li[data-tab=pg] {
    max-width: 105px;
  }
}
body.hong4 .search-wrap.combine .search-main.review .search-filter li[data-tab=type] {
  max-width: 150px;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .search-main.review .search-filter li[data-tab=type] {
    max-width: 120px;
  }
}
body.hong4 .search-wrap.combine .search-main.review .search-filter li[data-tab=style] {
  max-width: 210px;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-wrap.combine .search-main.review .search-filter li[data-tab=style] {
    max-width: 170px;
  }
}
body.hong4 .search-wrap.combine .search-main.review .search-filter li.active {
  border-color: #222222;
  font-weight: bold;
}
body.hong4 .search-wrap.combine .search-main.review .search-filter li.disabled {
  background-image: url(/hong4/_img/main/ar-down-ccc.svg);
  color: #cccccc;
  border-color: #e9e9e9;
  pointer-events: none;
}
body.hong4 .inner-content {
  width: 100%;
  max-width: 400px;
  min-height: calc(100dvh - 144px);
  margin: 0 auto;
  border-left: 1px solid #e9e9e9;
  border-right: 1px solid #e9e9e9;
  background: #ffffff;
}
@media screen and (max-width: 719px) {
  body.hong4 .inner-content {
    max-width: 100%;
    min-height: calc(100dvh - 104px);
  }
}
body.hong4 .qa-section {
  padding: 0 16px;
}
body.hong4 .qa-section aside {
  margin-bottom: 32px;
}
@media screen and (max-width: 719px) {
  body.hong4 .qa-section aside {
    margin-bottom: 30px;
  }
}
body.hong4 .qa-section aside:last-child {
  margin-bottom: 0;
}
body.hong4 .qa-section h3 {
  font-size: 16px;
  font-weight: bold;
  line-height: 24px;
  margin-bottom: 8px;
}
@media screen and (max-width: 719px) {
  body.hong4 .qa-section h3 {
    font-size: 14px;
    line-height: 20px;
  }
}
body.hong4 .qa-section .answer {
  font-size: 16px;
  line-height: 25px;
  padding-left: 18px;
}
@media screen and (max-width: 719px) {
  body.hong4 .qa-section .answer {
    font-size: 14px;
    line-height: 22px;
    padding-left: 14px;
  }
}
body.hong4 .qa-section .answer hr {
  margin: 12px 0;
  border-color: #e9e9e9;
}
@media screen and (max-width: 719px) {
  body.hong4 .qa-section .answer hr {
    margin: 10px 0;
  }
}
body.hong4 .qa-section .answer .example {
  display: flex;
  gap: 8px;
}
@media screen and (max-width: 719px) {
  body.hong4 .qa-section .answer .example {
    gap: 6px;
  }
}
body.hong4 .qa-section .answer .example .label {
  flex: 0 0 auto;
}
body.hong4 .table-section {
  padding: 0 16px;
}
body.hong4 .table-section table {
  width: 100%;
  border-collapse: collapse;
}
body.hong4 .table-section table th,
body.hong4 .table-section table td {
  border: 1px solid #e9e9e9;
}
body.hong4 .table-section table.align-center th,
body.hong4 .table-section table.align-center td {
  text-align: center !important;
}
body.hong4 .table-section thead th {
  width: 50%;
  padding: 12px;
  background-color: #f5f5f5;
  border-top: 1px solid #e9e9e9;
  border-bottom: 1px solid #e9e9e9;
  font-weight: bold;
  font-size: 14px;
}
@media screen and (max-width: 719px) {
  body.hong4 .table-section thead th {
    padding: 10px;
    font-size: 12px;
  }
}
body.hong4 .table-section thead th:first-child {
  border-right: 1px solid #e9e9e9;
}
body.hong4 .table-section tbody td {
  width: 50%;
  padding: 12px 16px;
  border-bottom: 1px solid #e9e9e9;
  font-size: 14px;
}
@media screen and (max-width: 719px) {
  body.hong4 .table-section tbody td {
    padding: 10px 16px;
    font-size: 12px;
  }
}
body.hong4 .table-section tbody td:first-child {
  vertical-align: middle;
  border-right: 1px solid #e9e9e9;
}
body.hong4 .table-section tbody td:last-child {
  text-align: right;
}
body.hong4 .table-section tbody td b {
  font-weight: bold;
}
body.hong4 .table-section tbody td p {
  line-height: 20px;
}
@media screen and (max-width: 719px) {
  body.hong4 .table-section tbody td p {
    line-height: 18px;
  }
}
body.hong4 .table-section .align-center {
  text-align: center;
}
body.hong4 .table-section .align-right {
  text-align: right;
}
body.hong4 .dot-section {
  padding: 0 16px;
  line-height: 28px;
  font-size: 16px;
}
@media screen and (max-width: 719px) {
  body.hong4 .dot-section {
    line-height: 22px;
    font-size: 14px;
  }
}
body.hong4 .dot-section ul {
  position: relative;
  padding-left: 18px;
}
@media screen and (max-width: 719px) {
  body.hong4 .dot-section ul {
    padding-left: 14px;
  }
}
body.hong4 .dot-section li::before {
  content: "·";
  display: inline-block;
  position: absolute;
  left: 5px;
  font-size: 16px;
  color: #222;
}
@media screen and (max-width: 719px) {
  body.hong4 .dot-section li::before {
    left: 4px;
    font-size: 14px;
  }
}
body.hong4 .btn-section {
  padding: 0 16px;
}
body.hong4 .grid-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
@media screen and (max-width: 719px) {
  body.hong4 .grid-table {
    font-size: 14px;
  }
}
body.hong4 .grid-table th,
body.hong4 .grid-table td {
  border: 1px solid #e9e9e9;
  padding: 14px 16px;
}
@media screen and (max-width: 719px) {
  body.hong4 .grid-table th,
  body.hong4 .grid-table td {
    padding: 13px 16px;
  }
}
body.hong4 .grid-table td b {
  font-weight: bold;
}
body.hong4 .grid-table .align-center {
  text-align: center !important;
}
body.hong4 .grid-table .align-right {
  text-align: right !important;
}
body.hong4 .list-coupon-ul.ver2 .used .coupon-item {
  color: #999999;
}
body.hong4 .list-coupon-ul.ver2 .used .coupon-title {
  color: #999999;
}
body.hong4 .list-coupon-ul.ver2 .used .coupon-title b {
  color: #999999;
}
body.hong4 .list-coupon-ul.ver2 .used .coupon-title .due {
  background: #cccccc;
}
body.hong4 .list-coupon-ul.ver2 .used .coupon-detail {
  color: #999999;
}
body.hong4 .list-coupon-ul.ver2 .used .coupon-pay-btn {
  filter: grayscale(0.7);
}
body.hong4 .list-coupon-ul.ver2 .coupon-item {
  width: 100%;
  font-size: 1rem;
  height: auto;
}
body.hong4 .list-coupon-ul.ver2 .coupon-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3px;
}
@media screen and (max-width: 719px) {
  body.hong4 .list-coupon-ul.ver2 .coupon-title {
    margin-bottom: 2px;
  }
}
body.hong4 .list-coupon-ul.ver2 .coupon-title b {
  font-size: 18px;
  font-weight: bold;
  color: #222222;
}
@media screen and (max-width: 719px) {
  body.hong4 .list-coupon-ul.ver2 .coupon-title b {
    font-size: 16px;
  }
}
body.hong4 .list-coupon-ul.ver2 .coupon-title .due {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 24px;
  font-size: 14px;
  font-weight: normal;
  line-height: 24px;
  color: #ffffff;
  background: #da4841;
  border-radius: 2px;
}
@media screen and (max-width: 719px) {
  body.hong4 .list-coupon-ul.ver2 .coupon-title .due {
    width: 55px;
    height: 22px;
    font-size: 12px;
    line-height: 17px;
  }
}
body.hong4 .list-coupon-ul.ver2 .coupon-detail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 42px;
  height: 42px;
  gap: 10px;
}
body.hong4 .list-coupon-ul.ver2 .coupon-detail .c_info {
  font-size: 14px;
  line-height: 21px;
  color: #666666;
  height: 100%;
}
@media screen and (max-width: 719px) {
  body.hong4 .list-coupon-ul.ver2 .coupon-detail .c_info {
    font-size: 12px;
    line-height: 17px;
  }
}
body.hong4 .list-coupon-ul.ver2 .coupon-detail .c_date {
  text-align: right;
  font-size: 14px;
  line-height: 20px;
  flex: 0 0 auto;
}
@media screen and (max-width: 719px) {
  body.hong4 .list-coupon-ul.ver2 .coupon-detail .c_date {
    font-size: 12px;
    line-height: 17px;
  }
}
body.hong4 .list-coupon-ul.ver2 .coupon-detail .c_date .c_date-text {
  font-size: 12px;
  line-height: 17px;
  color: #666666;
}
@media screen and (max-width: 719px) {
  body.hong4 .list-coupon-ul.ver2 .coupon-detail .c_date .c_date-text {
    font-size: 10px;
    line-height: 15px;
  }
}
body.hong4 .list-coupon-ul.ver2 .c_usable {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px;
  font-size: 14px;
  line-height: 20px;
  color: #ffffff;
  border-radius: 4px;
  background: #1ab8be;
  margin-top: 16px;
}
@media screen and (max-width: 719px) {
  body.hong4 .list-coupon-ul.ver2 .c_usable {
    gap: 6px;
    padding: 7px;
    font-size: 12px;
    line-height: 17px;
    margin-top: 12px;
  }
}
body.hong4 .list-coupon-ul.ver2 .c_usable img {
  display: block;
  width: 6px;
  height: auto;
  min-width: auto;
  margin: 1px 0 0;
}
@media screen and (max-width: 719px) {
  body.hong4 .list-coupon-ul.ver2 .c_usable img {
    width: 5px;
    margin: 0;
  }
}
body.hong4 .contents-category {
  padding: 20px 0 24px;
  background: #f9f9f9;
  border-bottom: 1px solid #eeeeee;
}
@media screen and (max-width: 719px) {
  body.hong4 .contents-category {
    padding: 16px 16px 20px;
  }
}
body.hong4 .contents-category ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  margin-bottom: 24px;
}
@media screen and (max-width: 719px) {
  body.hong4 .contents-category ul {
    max-width: 100%;
    margin-bottom: 20px;
    gap: 6px;
  }
}
body.hong4 .contents-category ul li {
  display: flex;
  align-items: center;
  width: calc((100% - 12px) / 2);
  height: 48px;
  border-radius: 4px;
  border: 1px solid #ececec;
  padding: 0 12px 0 14px;
  background: #ffffff;
}
@media screen and (max-width: 719px) {
  body.hong4 .contents-category ul li {
    width: calc((100% - 8px) / 2);
    height: 40px;
    padding: 0 9px;
  }
}
body.hong4 .contents-category ul li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}
body.hong4 .contents-category ul li a .d-flex {
  gap: 10px;
  align-items: center;
}
body.hong4 .contents-category ul li a img {
  display: block;
}
body.hong4 .contents-category ul li a h3 {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
}
@media screen and (max-width: 719px) {
  body.hong4 .contents-category ul li a h3 {
    font-size: 14px;
    line-height: 20px;
  }
}
body.hong4 .contents-category .banner {
  display: block;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}
@media screen and (max-width: 719px) {
  body.hong4 .contents-category .banner {
    max-width: 100%;
  }
}
body.hong4 .contents-category .banner img {
  display: block;
  width: 100%;
}
body.hong4 .contents-lists {
  padding-bottom: 36px;
}
@media screen and (max-width: 719px) {
  body.hong4 .contents-lists {
    padding-top: 0;
    padding-bottom: 30px;
  }
}
body.hong4 .contents-lists section {
  padding: 20px 20px;
}
@media screen and (max-width: 719px) {
  body.hong4 .contents-lists section {
    padding: 20px 16px;
  }
}
body.hong4 .counsel_theme-list {
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media screen and (max-width: 719px) {
  body.hong4 .counsel_theme-list {
    padding: 20px 16px;
    gap: 10px;
  }
}
body.hong4 .counsel_theme-list li {
  position: relative;
  width: 100%;
  height: 52px;
  padding: 0 16px 6px;
  font-size: 16px;
  line-height: 23px;
  font-family: "rixrak-sans-pro", sans-serif;
  background: #f9f9ff;
  border: 1px solid #ececff;
  border-radius: 4px;
  overflow: hidden;
}
@media screen and (max-width: 719px) {
  body.hong4 .counsel_theme-list li {
    height: 43px;
    padding: 0 11px 4px;
    font-size: 13px;
    line-height: 18px;
  }
}
body.hong4 .counsel_theme-list li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}
body.hong4 .counsel_theme-list li.purple {
  background: #f9f9ff;
  border: 1px solid #ececff;
}
body.hong4 .counsel_theme-list li.purple::after {
  background: #ddddf2;
}
body.hong4 .counsel_theme-list li.green {
  background: #f5fcf8;
  border: 1px solid #dff3ea;
}
body.hong4 .counsel_theme-list li.green::after {
  background: #d2e5de;
}
body.hong4 .counsel_theme-list li::after {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  content: "";
  width: 100%;
  height: 6px;
  background: #ddddf2;
}
@media screen and (max-width: 719px) {
  body.hong4 .counsel_theme-list li::after {
    height: 4px;
  }
}
body.hong4 .common-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  margin-bottom: 60px;
}
@media screen and (max-width: 719px) {
  body.hong4 .common-pagination {
    padding: 0 16px;
  }
}
body.hong4 .common-pagination .pagination-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 80px;
  height: 40px;
  border-radius: 4px;
  border: 1px solid #e9e9e9;
  font-size: 14px;
  line-height: 20px;
  font-weight: bold;
}
@media screen and (max-width: 719px) {
  body.hong4 .common-pagination .pagination-btn {
    gap: 6px;
    width: 61px;
    height: 37px;
    font-size: 13px;
    line-height: 19px;
  }
}
body.hong4 .common-pagination.disabled {
  border-color: #e9e9e9;
  color: #cccccc;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}
body.hong4 .common-pagination img {
  display: block;
  width: 7px;
}
@media screen and (max-width: 719px) {
  body.hong4 .common-pagination img {
    width: 5px;
  }
}
body.hong4 .common-pagination .page {
  display: flex;
  align-items: center;
  gap: 4px;
}
body.hong4 .common-pagination .page .current-page {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 2px;
  border: 1px solid #e9e9e9;
  background: #ffffff;
  color: #222222;
  font-size: 16px;
  font-weight: bold;
  line-height: 24px;
  text-align: center;
}
@media screen and (max-width: 719px) {
  body.hong4 .common-pagination .page .current-page {
    width: 26px;
    height: 26px;
    font-size: 14px;
    line-height: 20px;
  }
}

body.hong4 {
  /* hong 4.0 */
}
body.hong4 #event_popup .popup-div.main .popup-btn .btn-main-pp.active {
  background: var(--h-color-222);
}
@media screen and (max-width: 719px) {
  body.hong4 .statis .i-star {
    padding-left: 14px;
  }
}
body.hong4 .popup-div .i-question {
  background: url(../img/common/question_y.png) no-repeat;
  background-size: 100%;
}
@media screen and (max-width: 719px) {
  body.hong4 .popup-div .i-question {
    margin-left: 4px;
  }
}
body.hong4 .slide-popup {
  background: var(--h-color-fff);
  height: 100dvh;
}
body.hong4 .slide-popup .wrapper {
  max-width: 720px !important;
  margin: 0 auto !important;
  border-right: 1px solid #e9e9e9 !important;
  border-left: 1px solid #e9e9e9 !important;
  line-height: 1 !important;
  height: auto !important;
  min-height: 100% !important;
}
body.hong4 .popup-wrapper {
  margin: 0 auto;
  max-width: 720px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 50px 0;
  background: var(--h-color-fff);
  color: var(--h-color-000);
  font-size: 1rem;
}
body.hong4 .popup-open {
  flex: 0 0 calc((100% - 20px) / 3);
  border: 1px solid var(--h-main-color);
  display: inline-block;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px 10px;
  font-size: 0.8rem;
}
body.hong4 .popup-bg,
body.hong4 .popup-bg .bg {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
body.hong4 .popup-bg {
  display: none;
  z-index: 9;
  font-size: 1rem;
  z-index: 11111;
}
body.hong4 .popup-bg[data-show="true"] {
  display: block;
}
body.hong4 .popup-bg.pink .btn.active,
body.hong4 .popup-bg.pink .popup-btn.active,
body.hong4 .popup-bg.pink input[type=checkbox]:checked + label {
  background: #f33e76 !important;
}
body.hong4 .popup-bg.pink .check-list input[type=radio]:checked + label {
  color: #f33e76;
}
body.hong4 .popup-bg.pink .check-list input[type=radio]:checked ~ label.radio-btn,
body.hong4 .popup-bg.pink .check-list input[type=checkbox]:checked ~ label.radio-btn {
  background: url(/publish/img/popup/check-on-pink.svg) no-repeat center/cover;
}
body.hong4.pg .popup-bg.pink .check-list input[type=radio]:checked + label {
  color: #f33e76;
}
body.hong4 .popup-bg .bg {
  background: rgba(0, 0, 0, 0.5019607843);
  z-index: 1;
}
body.hong4 .popup-bg .popup-box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  z-index: 10;
  background: var(--h-color-fff);
  text-align: center;
  border-radius: 10px;
  overflow: hidden;
}
body.hong4 .popup-bg .popup-div.main .swiper img {
  width: 100%;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.hong4 .popup-bg .popup-box {
    width: 328px;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.hong4 .popup-bg .popup-box {
    width: 328px;
  }
  body.hong4 .popup-bg .popup-box.scroll {
    height: calc(100% - 40px);
  }
}
body.hong4 .popup-bg .popup-top {
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding: 0 16px;
  color: var(--h-color-555);
  background: var(--h-color-e9e);
  text-align: left;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.hong4 .popup-bg .popup-top h2 {
    font-size: 0.9285rem;
  }
}
body.hong4 .popup-bg .popup-bottom {
  width: 100%;
  display: block;
}
body.hong4 .popup-bg .popup-bottom.d-flex {
  display: flex;
}
body.hong4 .popup-bg .popup-bottom.extend {
  padding: 0;
}
@media (orientation: landscape) and (pointer: coarse) {
  body.hong4 .popup-bg .popup-box.scroll .popup-bottom {
    height: calc(100% - 44px);
    overflow: auto;
  }
}
body.hong4 .popup-bg .popup-bottom .popup-inner-top {
  padding: 30px 0;
  line-height: 28px;
  width: 100%;
}
body.hong4 .popup-bg .popup-bottom.extend .popup-inner-top {
  padding: 16px 0;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.hong4 .popup-bg .popup-bottom .popup-inner-top {
    line-height: 24px;
  }
}
body.hong4 .popup-bg .popup-bottom .popup-inner-bottom {
  display: flex;
  gap: 12px;
  width: 100%;
}
@media screen and (max-width: 719px) {
  body.hong4 .popup-bg .popup-bottom .popup-inner-bottom {
    font-size: 1.0714rem;
  }
}
body.hong4 .popup-bg .popup-bottom.extend .popup-inner-top .popup-inner-box-top,
body.hong4 .popup-bg .popup-bottom.extend .popup-inner-top .popup-inner-box-bottom {
  padding: 0 16px;
  text-align: left;
}
body.hong4 .popup-bg .popup-bottom.extend .extend-radio-wrap {
  margin-top: 14px;
  display: flex;
  gap: 30px;
}
body.hong4 .popup-bg .popup-bottom.extend .popup-inner-bottom {
  padding: 0 16px 16px;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.hong4 .popup-bg .popup-bottom.extend .extend-radio-wrap {
    gap: 20px;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.hong4 .popup-bg .popup-bottom.extend .extend-radio-wrap {
    gap: 20px;
  }
}
body.hong4 .popup-bg .popup-bottom.extend .extend-radio-wrap input[name=extend-time] {
  display: none;
}
body.hong4 .popup-bg .popup-bottom.extend .extend-radio-wrap input[name=extend-time]:checked + .extend-time::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--h-color-222);
}
body.hong4 .popup-bg .popup-bottom.extend .extend-radio-wrap .extend-time {
  position: relative;
  padding-left: 35px;
  cursor: pointer;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.hong4 .popup-bg .popup-bottom.extend .extend-radio-wrap .extend-time {
    padding-left: 30px;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.hong4 .popup-bg .popup-bottom.extend .extend-radio-wrap .extend-time {
    padding-left: 30px;
  }
}
body.hong4 .popup-bg .popup-bottom.extend .extend-radio-wrap .extend-time::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border: 1px solid var(--h-color-ddd);
  border-radius: 50%;
}
body.hong4 .popup-bg .popup-bottom.extend .extend-coin-wrap {
  display: flex;
  justify-content: space-between;
  text-align: center;
  margin-top: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--h-color-e9e);
  font-weight: bold;
}
body.hong4 .popup-bg .popup-bottom.extend .extend-coin-wrap > .extend-coin-box {
  width: 50%;
}
body.hong4 .popup-bg .popup-bottom.extend .extend-coin-wrap > .extend-coin-box > h1 {
  font-size: 1.75rem;
  line-height: normal;
}
body.hong4 .popup-bg .popup-bottom.extend .extend-coin-wrap > .popup-vertical-line {
  width: 1px;
  height: 68px;
  background: var(--h-color-e9e);
}
body.hong4 .popup-bottom .popup-inner-bottom .popup-btn {
  display: inline-block;
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-weight: bold;
  border-radius: 4px;
  color: var(--h-color-fff);
  margin: 0;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.hong4 .popup-bottom .popup-inner-bottom .popup-btn {
    height: 46px;
    line-height: 46px;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.hong4 .popup-bottom .popup-inner-bottom .popup-btn {
    height: 46px;
    line-height: 46px;
  }
}
body.hong4 .popup-bg .popup-bottom .popup-line {
  width: 100%;
  height: 1px;
  margin: 16px 0;
  background: var(--h-color-e9e);
}
body.hong4 .popup-bg .popup-bottom.extend .popup-line {
  width: 100%;
  height: 6px;
  background: #f5f5f5;
  border-top: 1px solid var(--h-color-e9e);
  border-bottom: 1px solid var(--h-color-e9e);
}
body.hong4 .popup-bottom .popup-inner-bottom .popup-btn,
body.hong4 .popup-bottom .popup-inner-bottom .popup-btn.close {
  background: #c1c1c1;
}
body.hong4 .popup-bottom .popup-inner-bottom .popup-btn.active {
  background: var(--h-main-color);
}
body.hong4 .popup-bottom .popup-inner-bottom .popup-btn.report {
  background: #da4841;
}
body.hong4 .screen-alert {
  display: none;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.hong4 .screen-alert {
    display: block;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.hong4 .screen-alert {
    display: block;
  }
}
body.hong4 .more-popup .popup-box {
  left: auto;
  right: 0;
  top: auto;
  bottom: 48px;
  transform: none;
  border-radius: 10px 10px 0 0px;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.hong4 .more-popup .popup-box {
    top: auto;
    right: auto;
    left: 50%;
    bottom: 0;
    width: 100%;
    transform: translateX(-50%);
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.hong4 .more-popup .popup-box {
    top: auto;
    right: auto;
    left: 50%;
    bottom: 0;
    width: 360px;
    transform: translateX(-50%);
  }
}
body.hong4 .more-popup .popup-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
body.hong4 .more-popup.chat-popup .popup-top {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
body.hong4 .more-popup .exit-box {
  cursor: pointer;
}
body.hong4 .more-popup .exit-box span {
  font-size: 0.875rem;
  margin-right: 8px;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.hong4 .more-popup .exit-box span {
    font-size: 0.75rem;
    margin-right: 6px;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.hong4 .more-popup .exit-box span {
    font-size: 0.75rem;
    margin-right: 6px;
  }
}
body.hong4 .more-popup .exit-box i,
body.hong4 .more-popup .personal i {
  display: inline-block;
  cursor: pointer;
}
body.hong4 .more-popup .exit-box .i-exit-b {
  width: 10px;
  height: 10px;
  background-size: cover;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.hong4 .more-popup .exit-box .i-exit-b {
    width: 8px;
    height: 8px;
    background-size: cover;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.hong4 .more-popup .exit-box .i-exit-b {
    width: 8px;
    height: 8px;
    background-size: cover;
  }
}
body.hong4 .more-popup .popup-bottom .popup-inner-top {
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (orientation: landscape) and (pointer: coarse) {
  body.hong4 .more-popup .popup-bottom .popup-inner-top {
    gap: 10px;
  }
}
body.hong4 .chat-popup .popup-bottom .popup-inner-top {
  height: calc(100vh - 246px);
  overflow: auto;
  margin: 0 0 0 -3px;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.hong4 .chat-popup .popup-bottom .popup-inner-top {
    height: calc(100vh - 160px);
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.hong4 .chat-popup .popup-bottom .popup-inner-top {
    height: calc(100vh - 134px);
  }
}
body.hong4 .more-popup.chat-popup .popup-bottom .popup-inner-bottom {
  padding: 14px 16px 14px;
  height: 70px;
  background: var(--h-color-eee);
  align-items: center;
  gap: 16px;
}
body.hong4 .chat-popup .popup-bottom .popup-inner-top::-webkit-scrollbar {
  width: 5px;
  background: var(--h-color-e9e);
}
body.hong4 .chat-popup .popup-bottom .popup-inner-top::-webkit-scrollbar-thumb {
  background: #c2c2c2;
  border-radius: 3px;
}
body.hong4 .chat-popup .popup-bottom {
  padding: 0;
}
body.hong4 .more-popup.chat-popup .popup-bottom .popup-inner-top {
  padding: 16px 27px 16px 30px;
  font-size: 0.9375rem;
  text-align: left;
  position: relative;
}
body.hong4 .more-popup.chat-popup .popup-bottom .writing {
  display: block;
  position: absolute;
  left: 16px;
  bottom: 85px;
  width: 70px;
  height: 32px;
  background: var(--h-agora-chat-writing) center/cover;
  z-index: 99;
}
body.hong4 .more-popup.chat-popup .popup-bottom .popup-inner-top .my-chat,
body.hong4 .more-popup.chat-popup .popup-bottom .popup-inner-top .opponent-chat {
  display: flex;
  position: relative;
}
body.hong4 .more-popup.chat-popup .popup-bottom .popup-inner-top .my-chat {
  gap: 8px;
}
body.hong4 .more-popup.chat-popup .popup-bottom .popup-inner-top .opponent-chat {
  flex-wrap: wrap;
}
body.hong4 .more-popup.chat-popup .popup-bottom .popup-inner-top .read-chk {
  color: var(--h-main-color);
}
body.hong4 .more-popup.chat-popup .popup-bottom .popup-inner-top .read-chk.read {
  color: var(--h-color-999);
}
body.hong4 .more-popup.chat-popup .popup-bottom .popup-inner-top .chat-text {
  padding: 12px;
  position: relative;
  line-height: 21px;
}
body.hong4 .more-popup.chat-popup .popup-bottom .popup-inner-top .chat-text,
body.hong4 .more-popup.chat-popup .popup-bottom .popup-inner-top .chat-img,
body.hong4 .more-popup.chat-popup .popup-bottom .popup-inner-top .chat-file {
  max-width: 286px;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.hong4 .more-popup.chat-popup .popup-bottom .popup-inner-top .chat-text,
  body.hong4 .more-popup.chat-popup .popup-bottom .popup-inner-top .chat-img,
  body.hong4 .more-popup.chat-popup .popup-bottom .popup-inner-top .chat-file {
    max-width: 250px;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.hong4 .more-popup.chat-popup .popup-bottom .popup-inner-top .chat-text,
  body.hong4 .more-popup.chat-popup .popup-bottom .popup-inner-top .chat-img,
  body.hong4 .more-popup.chat-popup .popup-bottom .popup-inner-top .chat-file {
    max-width: 250px;
  }
}
body.hong4 .more-popup.chat-popup .popup-bottom .popup-inner-top .my-chat .chat-text {
  background: #7f5bc8;
  color: var(--h-color-fff);
  border-radius: 4px 0 4px 4px;
}
body.hong4 .more-popup.chat-popup .popup-bottom .popup-inner-top .my-chat .chat-text::after {
  width: 11px;
  height: 10px;
  content: "";
  position: absolute;
  left: calc(100% - 1px);
  top: 0;
  background: var(--h-agora-my-chat-corner) center/cover;
}
body.hong4 .more-popup.chat-popup .popup-bottom .popup-inner-top .opponent-chat .opponent-box {
  display: flex;
  gap: 8px;
  width: 100%;
}
body.hong4 .more-popup.chat-popup .popup-bottom .popup-inner-top .opponent-chat .chat-text {
  background: var(--h-color-e9e);
  border-radius: 0 4px 4px 4px;
  order: 1;
}
body.hong4 .more-popup.chat-popup .popup-bottom .popup-inner-top .opponent-chat .chat-text::after {
  width: 11px;
  height: 10px;
  content: "";
  position: absolute;
  right: calc(100% - 1px);
  top: 0;
  background: var(--h-agora-opponent-chat-corner) center/cover;
}
body.hong4 .more-popup.chat-popup .popup-bottom .popup-inner-top .chat-img {
  width: 154px;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
}
body.hong4 .more-popup.chat-popup .popup-bottom .popup-inner-top .chat-img img {
  width: 100%;
  display: block;
}
body.hong4 .more-popup.chat-popup .popup-bottom .popup-inner-top .chat-file {
  padding: 10px 14px;
  background: #e6f2ff;
  border-radius: 4px;
  line-height: 20px;
}
body.hong4 .chat-popup .popup-bottom .popup-inner-top .save-button,
body.hong4 .chat-popup .popup-bottom .popup-inner-top .close-button {
  width: 166px;
  height: 36px;
  line-height: 36px;
  background: var(--h-main-color);
  margin-top: 10px;
  color: var(--h-color-fff);
  text-align: center;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
  margin-right: 10px;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.hong4 .chat-popup .popup-bottom .popup-inner-top .save-button,
  body.hong4 .chat-popup .popup-bottom .popup-inner-top .close-button {
    height: 30px;
    line-height: 30px;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.hong4 .chat-popup .popup-bottom .popup-inner-top .save-button,
  body.hong4 .chat-popup .popup-bottom .popup-inner-top .close-button {
    height: 30px;
    line-height: 30px;
  }
}
body.hong4 .chat-popup .popup-bottom .popup-inner-top .button-box .close-button,
body.hong4 .chat-popup .popup-bottom .popup-inner-top .button-box .save-button {
  width: 78px;
}
body.hong4 .chat-popup .popup-bottom .popup-inner-top .button-box .close-button {
  background: #c1c1c1;
}
body.hong4 .more-popup.chat-popup .popup-bottom .popup-inner-top .my-chat {
  justify-content: flex-end;
}
body.hong4 .more-popup.chat-popup .popup-bottom .popup-inner-top .chat-state {
  font-size: 0.6875rem;
  display: flex;
  flex-direction: column;
  line-height: 18px;
  color: var(--h-color-999);
}
body.hong4 .more-popup.chat-popup .popup-bottom .popup-inner-top .my-chat .chat-state {
  align-items: flex-end;
  justify-content: flex-end;
}
body.hong4 .more-popup.chat-popup .popup-bottom .popup-inner-top .opponent-chat .chat-state {
  align-items: flex-start;
  order: 2;
  justify-content: flex-end;
}
body.hong4 .more-popup.chat-popup .popup-bottom .popup-inner-top .opponent-name {
  font-size: 0.8125rem;
  margin-bottom: 2px;
  flex: 0 0 100%;
}
body.hong4 .more-popup.chat-popup .popup-box.client .opponent-chat {
  padding-left: 54px;
}
body.hong4 .more-popup.chat-popup .popup-box.client .opponent-chat .opponent-img {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 0;
  top: 5px;
  border-radius: 50%;
  background: #b89d78;
  z-index: 9;
}
body.hong4 .more-popup.chat-popup i {
  display: inline-block;
  cursor: pointer;
}
body.hong4 .more-popup.chat-popup .i-clip {
  width: 21px;
  height: 24px;
  background-position: center;
}
body.hong4 .more-popup.chat-popup .i-input {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
}
body.hong4 .more-popup.chat-popup .chat-input-box {
  position: relative;
  width: calc(100% - 37px);
}
body.hong4 .more-popup.chat-popup .chat-input-box input {
  width: 100%;
  height: 42px;
  border-radius: 21px;
  padding-left: 20px;
  padding-right: 40px;
  font-size: 0.9375rem;
  border: 1px solid var(--h-color-ddd);
  font-family: var(--h-body-font-family);
}
body.hong4 .more-popup .personal {
  display: flex;
  justify-content: space-between;
  padding: 0 5px;
}
body.hong4 .more-popup .personal h3 {
  flex: 1 0 auto;
  text-align: left;
  padding-left: 10px;
}
body.hong4 .more-popup .personal .i-mic-on-b {
  width: 20px;
  height: 18px;
  background-size: 17px 18px !important;
  background-position: center;
}
body.hong4 .more-popup .personal .i-mic-off-b {
  width: 20px;
  height: 18px;
  background-size: cover;
}
body.hong4 .more-popup .popup-bottom .popup-inner-bottom {
  padding: 0 0 16px;
}
body.hong4 .screen-share-popup {
  display: none;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.hong4 .screen-share-popup {
    display: none !important;
  }
}
body.hong4 .screen-share-popup .popup-bottom .popup-inner-top {
  max-height: calc(100vh - 246px);
  overflow: auto;
  padding: 0 0 0 7px;
  margin: 20px 0px 20px -7px;
}
body.hong4 .screen-share-popup .popup-inner-top::-webkit-scrollbar {
  width: 5px;
  background: var(--h-color-e9e);
}
body.hong4 .screen-share-popup .popup-inner-top::-webkit-scrollbar-thumb {
  background: #c2c2c2;
  border-radius: 3px;
}
body.hong4 .screen-share-popup .popup-inner-top h1 {
  font-size: 1.25rem;
}
body.hong4 .screen-share-popup .popup-inner-top .screen-box {
  padding: 0 86px;
  display: flex;
  justify-content: center;
}
body.hong4 .screen-share-popup .popup-inner-top .screen-box input {
  display: none;
}
body.hong4 .screen-share-popup .popup-inner-top .screen-box input:checked + label > .screen-img::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7019607843);
}
body.hong4 .screen-share-popup .popup-inner-top .screen-box input:checked + label > .screen-img::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background: var(--h-agora-screen-check-icon) center/cover;
}
body.hong4 .screen-share-popup .popup-inner-top .screen-box label {
  display: block;
  cursor: pointer;
}
body.hong4 .screen-share-popup .popup-inner-top .screen-box label .screen-img {
  width: 216px;
  height: 144px;
  position: relative;
}
body.hong4 .screen-share-popup .popup-inner-top .screen-box span {
  font-weight: bold;
  margin-top: 4px;
  display: inline-block;
}
body.hong4 .screen-share-popup .popup-bottom {
  padding: 0;
}
body.hong4 .screen-share-popup .popup-bottom .popup-inner-bottom {
  padding: 16px;
}
body.hong4 .screen-share-popup .screen-img1 {
  background: var(--h-agora-screen-test-img) center/cover;
}
body.hong4 .screen-share-popup .screen-img2 {
  background: var(--h-agora-my-screen-camera-on) center/cover;
}
body.hong4 .screen-share-popup .screen-img3 {
  background: var(--h-agora-counselor-screen-camera-on) center/cover;
}
body.hong4 .capture-popup .screen-img {
  width: 368px;
  height: 207px;
  margin-bottom: 10px;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.hong4 .capture-popup .screen-img {
    width: 170px;
    height: 300px;
    margin: 0 auto 10px;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.hong4 .capture-popup .screen-img {
    width: 170px;
    height: 300px;
    margin: 0 auto 10px;
  }
}
body.hong4 .report-radio-wrap {
  display: none;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 10px;
}
body.hong4 .capture-popup.report .report-radio-wrap {
  display: flex;
}
body.hong4 .report-radio-wrap .report-radio {
  text-align: left;
}
body.hong4 .report-radio-wrap .report-radio input {
  display: none;
}
body.hong4 .report-radio-wrap .report-radio > label {
  position: relative;
  padding-left: 30px;
}
body.hong4 .report-radio-wrap .report-radio > label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: 1px solid var(--h-color-ddd);
  border-radius: 50%;
}
body.hong4 .report-radio-wrap .report-radio input[name=report]:checked + label::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--h-color-222);
}
@media (orientation: portrait) and (max-width: 719px) {
  body.hong4 .capture-popup.report .popup-inner-top {
    flex-direction: row;
    padding: 20px 0;
  }
  body.hong4 .capture-popup.report .popup-inner-top .screen-img {
    margin: 0 0 10px;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.hong4 .capture-popup.report .popup-inner-top {
    flex-direction: row;
  }
}
body.hong4 .more-popup.setting-popup .popup-bottom .popup-inner-top {
  padding: 20px 0 16px;
}
body.hong4 .more-popup.setting-popup .popup-bottom .popup-inner-bottom {
  padding: 0;
  text-align: center;
  margin-top: 30px;
}
body.hong4 .setting-popup .setting-wrap-button {
  width: 100%;
  height: 48px;
  line-height: 48px;
  text-align: center;
  color: var(--h-color-555);
  display: flex;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.hong4 .setting-popup .setting-wrap-button {
    height: 38px;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.hong4 .setting-popup .setting-wrap-button {
    height: 38px;
  }
}
body.hong4 .setting-popup .setting-wrap-button button {
  width: 100%;
  height: 100%;
  cursor: pointer;
  font-family: var(--h-body-font-family);
  background: #f1f1f1;
  border: 1px solid transparent;
  border-radius: 2px;
}
body.hong4 .setting-popup .setting-wrap-button button#screen-wrap {
  display: none;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.hong4 .setting-popup .setting-wrap-button button#screen-wrap {
    display: block;
  }
  body.hong4 .setting-popup .setting-wrap-button button {
    width: 50%;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.hong4 .setting-popup .setting-wrap-button button#screen-wrap {
    display: block;
  }
  body.hong4 .setting-popup .setting-wrap-button button {
    width: 50%;
  }
}
body.hong4 .setting-popup .setting-wrap-button button.active {
  border: 1px solid var(--h-color-222);
  background: var(--h-color-fff);
  font-weight: bold;
}
body.hong4 .setting-popup .setting-common-wrap {
  text-align: left;
}
body.hong4 .setting-popup .setting-common-wrap {
  display: none;
}
body.hong4 .setting-popup .setting-common-wrap.wrap-on {
  display: block;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.hong4 .setting-popup .screen-wrap {
    overflow: auto;
    max-height: calc(100vh - 218px);
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.hong4 .setting-popup .screen-wrap {
    overflow: auto;
    max-height: calc(100vh - 168px);
  }
}
body.hong4 .setting-popup .screen-set-inner-container {
  display: flex;
  flex-direction: column;
  padding-bottom: 16px;
  border-bottom: 1px solid #f1f1f1;
  margin-bottom: 10px;
}
body.hong4 .screen-set-inner-container:nth-child(3) {
  padding: 0;
  border: none;
  margin-bottom: 10px;
}
body.hong4 .setting-popup .screen-set-inner-container > p {
  margin-bottom: 8px;
  font-size: 0.875rem;
}
body.hong4 .setting-popup .screen-set-inner-container > p .f-bold {
  font-size: 1rem;
}
body.hong4 .setting-popup .screen-set-inner-container .screen-set-row {
  display: flex;
  gap: 24px;
}
body.hong4 .setting-popup .screen-set-inner-container input {
  display: none;
}
body.hong4 .setting-popup .screen-set-inner-container input[name=screen-set-box]:checked + label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5019607843);
  z-index: 3;
}
body.hong4 .setting-popup .screen-set-inner-container input[name=screen-set-box]:checked + label::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  background: var(--h-agora-screen-check-icon) center/cover;
  z-index: 4;
}
body.hong4 .setting-popup .screen-set-inner-container .screen-set-box {
  overflow: hidden;
  position: relative;
  display: block;
  width: calc((100% - 72px) / 4);
  min-height: 76px;
  background: var(--h-color-bbb);
  border-radius: 2px;
  aspect-ratio: 60/71;
  cursor: pointer;
}
body.hong4 .setting-popup .screen-set-inner-container .screen-set-box span {
  display: block;
  position: absolute;
  width: 30%;
  min-height: 23px;
  aspect-ratio: 18/23;
  border-radius: 1px;
  background: var(--h-color-fff);
}
body.hong4 .setting-popup .screen-set-inner-container .screen-set-box.screen-left-top span {
  left: 5px;
  top: 5px;
}
body.hong4 .setting-popup .screen-set-inner-container .screen-set-box.screen-right-top span {
  right: 5px;
  top: 5px;
}
body.hong4 .setting-popup .screen-set-inner-container .screen-set-box.screen-right-bot span {
  right: 5px;
  bottom: 5px;
}
body.hong4 .setting-popup .screen-set-inner-container .screen-set-box.screen-left-bot span {
  left: 5px;
  bottom: 5px;
}
body.hong4 .setting-popup .screen-set-inner-container .screen-set-box.screen-middle-line span {
  width: 100%;
  height: 3px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  aspect-ratio: auto;
  min-height: auto;
}
body.hong4 .setting-popup .video-set-outer-container select {
  width: 100%;
  height: 50px;
  margin-top: 8px;
  border: 1px solid #e5e4e9;
  border-radius: 4px;
  padding: 13px 30px 13px 12px;
  font-size: 1rem;
  color: var(--h-color-222);
  background: var(--h-agora-select-arrow-bot) right 16px center/14px 8px;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  font-family: var(--h-body-font-family);
}
@media (orientation: portrait) and (max-width: 719px) {
  body.hong4 .setting-popup .video-set-outer-container select {
    height: 46px;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.hong4 .setting-popup .video-set-outer-container select {
    height: 46px;
  }
}
body.hong4 .setting-popup .video-set-inner-container {
  padding-bottom: 10px;
  margin-bottom: 10px;
}
body.hong4 .setting-popup .video-set-inner-container:nth-child(2) {
  padding-bottom: 16px;
}
body.hong4 .setting-popup .video-set-outer-container select option {
  color: var(--h-color-222);
}
@media (orientation: portrait) and (max-width: 719px) {
  body.hong4 .setting-popup .video-wrap {
    overflow: auto;
    max-height: calc(100vh - 218px);
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.hong4 .setting-popup .video-wrap {
    overflow: auto;
    max-height: calc(100vh - 168px);
  }
}
body.hong4 .popup-bg.hong-popup .popup-top {
  height: 44px;
  line-height: 44px;
}
body.hong4 .hong-popup .check-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
body.hong4 .hong-popup .check-list:last-child {
  margin-bottom: 0;
}
body.hong4 .hong-popup .check-list > a {
  height: auto;
  line-height: inherit;
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}
body.hong4 .hong-popup .check-list input[type=radio] {
  display: none;
}
body.hong4 .hong-popup .check-list label:not(.radio-btn) {
  padding-left: 10px;
  flex: 1 0 auto;
  text-align: left;
  cursor: pointer;
}
body.hong4 .hong-popup .check-list input[type=radio]:checked + label {
  color: var(--h-list-btn-color);
  font-weight: bold;
}
body.hong4 .hong-popup .check-list .radio-btn {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(/hong4/_img/main/i-check-circle.png) no-repeat center/cover;
  cursor: pointer;
}
body.hong4 .hong-popup .check-list input[type=radio]:checked ~ label.radio-btn,
body.hong4 .hong-popup .check-list input[type=checkbox]:checked ~ label.radio-btn {
  background: url(/hong4/_img/main/i-check-on.png) no-repeat center/cover;
}
@media screen and (max-width: 719px) {
  body.hong4 .hong-popup .check-list a {
    line-height: 24px;
  }
  body.hong4 .popup-bg.hong-popup .popup-top {
    height: 40px;
    line-height: 40px;
  }
  body.hong4 .popup-bg.hong-popup:not(.hong-alert):not(.hong-more-popup) .popup-box,
  body.hong4 .popup-bg.hong-popup.hong-style-popup .popup-box {
    width: 100%;
    left: auto;
    top: auto;
    bottom: 0;
    transform: none;
    border-radius: 10px 10px 0 0;
  }
  body.hong4 #style_popup.left2right .popup-box,
  body.hong4 #counsel_popup.left2right .popup-box {
    left: -100%;
  }
  body.hong4 .popup-bg.hong-popup:not(.hong-alert):not(.hong-more-popup) .popup-bottom .popup-inner-top {
    padding: 20px 0;
  }
  body.hong4 .hong-popup .check-list {
    font-size: 1.0714rem;
  }
  body.hong4 .hong-popup .check-list .radio-btn {
    width: 18px;
    height: 18px;
  }
}
body.hong4 .hong-popup.hong-more-popup .popup-bottom,
body.hong4 .hong-popup.hong-more-popup .popup-bottom > .popup-inner-top {
  padding: 0;
}
body.hong4 .hong-popup.hong-more-popup .popup-inner-top > .popup-inner-box-top {
  padding: 30px 16px;
  border-bottom: 1px solid #e3e7ed;
}
body.hong4 .hong-popup.hong-more-popup .popup-inner-top > .popup-inner-box-top > p:last-child {
  font-size: 0.875rem;
}
@media screen and (max-width: 719px) {
  body.hong4 .hong-popup.hong-more-popup .popup-inner-top > .popup-inner-box-top {
    padding: 20px 16px;
  }
}
body.hong4 .hong-popup.hong-more-popup .popup-inner-top > .popup-inner-box-line {
  width: 100%;
  height: 1px;
  background: #f1f1f1;
  padding: 0 16px;
}
body.hong4 .hong-popup.hong-more-popup .popup-inner-top > .popup-inner-box-bottom {
  padding: 20px 16px;
}
body.hong4 .hong-popup.hong-more-popup .popup-inner-bottom {
  padding: 0 16px 16px;
}
body.hong4 .hong-popup.hong-more-popup .popup-inner-box-bottom {
  background: #f3f4f7;
}
body.hong4 .hong-popup.hong-more-popup .popup-inner-box-bottom ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body.hong4 .hong-popup.hong-more-popup .popup-inner-box-bottom ul li {
  width: calc((100% - 8px) / 2);
  height: 50px;
  background: var(--h-color-fff);
  border-radius: 4px;
  border: 1px solid #eaecf3;
}
body.hong4 .hong-popup.hong-more-popup .popup-inner-box-bottom ul li.active {
  background: #1ab8be;
  color: var(--h-color-fff);
}
body.hong4 .hong-popup.hong-more-popup .popup-inner-box-bottom ul li.active h5 {
  font-weight: bold;
}
body.hong4 .hong-popup.hong-more-popup .popup-inner-box-bottom ul li:nth-child(2) {
  border: none;
  background: none;
}
body.hong4 .hong-popup.hong-more-popup .popup-inner-box-bottom ul li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--h-padding-16);
  height: 100%;
}
body.hong4 .hong-popup.hong-more-popup .popup-inner-box-bottom ul li > a > .i-menu-home,
body.hong4 .hong-popup.hong-more-popup .popup-inner-box-bottom ul li > a > .i-menu-home.on {
  width: 16px;
  height: 14px;
  background-size: 16px 14px !important;
}
body.hong4 .hong-popup.hong-more-popup .popup-inner-box-bottom ul li > a > .i-check-fff {
  width: 20px;
  height: 20px;
  background-size: 20px 20px !important;
}
body.hong4 .hong-popup.hong-more-popup .popup-inner-box-bottom ul li > a > h5 {
  flex: 1 0 auto;
  text-align: left;
}
body.hong4 .hong-popup.hong-more-popup .popup-inner-box-bottom .i-popup-refresh {
  width: 14px;
  height: 14px;
  margin-right: 6px;
  margin-top: 1px;
}
body.hong4 .hong-popup.hong-more-popup .popup-inner-box-bottom .popup-refresh {
  cursor: pointer;
  padding-top: 20px;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 719px) {
  body.hong4 .hong-popup.hong-more-popup .popup-inner-box-bottom ul li {
    height: 40px;
  }
  body.hong4 .hong-popup.hong-more-popup .popup-inner-box-bottom ul li > a > h5 {
    font-size: 0.928rem;
  }
  body.hong4 .hong-popup.hong-more-popup .popup-inner-box-bottom ul li > a > .i-menu-home,
  body.hong4 .hong-popup.hong-more-popup .popup-inner-box-bottom ul li > a > .i-menu-home.on {
    width: 14px;
    height: 12px;
    background-size: 14px 12px !important;
  }
  body.hong4 .hong-popup.hong-more-popup .popup-inner-box-bottom ul li > a > .i-check-fff {
    width: 16px;
    height: 16px;
    background-size: 16px 16px !important;
  }
  body.hong4 .hong-popup.hong-more-popup .popup-inner-box-bottom .i-popup-refresh {
    width: 12px;
    height: 12px;
  }
  body.hong4 .hong-popup.hong-more-popup .popup-inner-box-bottom .popup-refresh {
    font-size: 0.857rem;
  }
}
body.hong4 .hong-popup.hong-more-popup.hong-style-popup .popup-inner-box-top {
  padding: 30px 16px 0;
  border-bottom: none;
}
body.hong4 .hong-popup.hong-more-popup.hong-style-popup .popup-inner-box-top > p {
  margin-bottom: 30px;
}
@media screen and (max-width: 719px) {
  body.hong4 .hong-popup.hong-more-popup.hong-style-popup .popup-inner-box-top {
    padding: 20px 16px 0;
  }
  body.hong4 .hong-popup.hong-more-popup.hong-style-popup .popup-inner-box-top > p {
    margin-bottom: 20px;
  }
}
body.hong4 .hong-popup.hong-more-popup.hong-style-popup .popup-inner-box-bottom {
  padding: 0px 16px 30px;
  background: none;
  position: relative;
}
body.hong4 .hong-popup.hong-more-popup.hong-style-popup .popup-inner-box-bottom.checked::after {
  content: "최대 3개까지 선택이 가능합니다.";
  position: absolute;
  left: 50%;
  bottom: 12px;
  width: calc(100% - 32px);
  height: 44px;
  background: #222;
  border-radius: 4px;
  color: #fff;
  transform: translateX(-50%);
  opacity: 0.9;
  display: flex;
  justify-content: center;
  align-items: center;
}
body.hong4 .hong-popup.hong-more-popup.hong-style-popup .popup-inner-box-bottom.count2.checked::after {
  content: "최대 2개까지 선택이 가능합니다.";
}
body.hong4 .hong-popup.hong-more-popup.hong-style-popup .popup-inner-box-bottom.count1.checked::after {
  content: "최대 1개까지 선택이 가능합니다.";
}
@media screen and (max-width: 719px) {
  body.hong4 .hong-popup.hong-more-popup.hong-style-popup .popup-inner-box-bottom {
    padding: 0px 16px 24px;
  }
  body.hong4 .hong-popup.hong-more-popup.hong-style-popup .popup-inner-box-bottom.checked::after {
    height: 40px;
    line-height: 40px;
  }
}
body.hong4 .hong-popup.hong-more-popup.hong-style-popup .popup-inner-line,
body.hong4 .popup-inner-line {
  width: 100%;
  height: 1px;
  background: #f1f1f1;
  margin: 12px 0;
}
body.hong4 .hong-popup.hong-more-popup.hong-style-popup input[type=checkbox] {
  display: none;
}
body.hong4 .hong-popup.hong-more-popup.hong-style-popup input[type=checkbox] + label {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 12px;
  font-size: 0.875rem;
  border: 1px solid #e3e7ed;
  background: var(--h-color-fff);
  border-radius: 4px;
  cursor: pointer;
}
body.hong4 .hong-popup.hong-more-popup.hong-style-popup .popup-inner-box-bottom.checked input[type=checkbox] + label {
  pointer-events: none;
}
body.hong4 .hong-popup.hong-more-popup.hong-style-popup input[type=checkbox]:checked + label {
  background: var(--h-main-color);
  color: var(--h-color-fff);
  font-weight: bold;
}
body.hong4 .hong-popup.hong-more-popup.hong-style-popup .popup-check-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
@media screen and (max-width: 719px) {
  body.hong4 .hong-popup.hong-more-popup.hong-style-popup input[type=checkbox] + label {
    padding: 0 11px;
    height: 32px;
    line-height: 32px;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
  }
}
body.hong4 .popup-bg.greeting-popup .popup-center {
  padding: 16px;
  text-align: left;
}
body.hong4 .popup-bg.greeting-popup .popup-center .greeting-notice {
  color: var(--h-main-color);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--h-color-e9e);
}
body.hong4 .popup-bg.greeting-popup .popup-center .d-flex {
  gap: 8px;
  margin-top: 16px;
  margin-bottom: 12px;
}
body.hong4 .popup-bg.greeting-popup .popup-center .d-flex img {
  width: 16px;
}
body.hong4 .popup-bg.greeting-popup .popup-center .greeting-textarea {
  width: 100%;
  height: 200px;
  border-radius: 4px;
  border: 1px solid var(--h-color-ddd);
  padding: 10px 12px;
}
body.hong4 .popup-bg.greeting-popup .popup-center .greeting-textarea textarea {
  width: 100%;
  height: 100%;
  resize: none;
  font-size: 16px;
  line-height: 24px;
}
@media screen and (max-width: 719px) {
  body.hong4 .popup-bg.greeting-popup .popup-center {
    padding-top: 12px;
  }
  body.hong4 .popup-bg.greeting-popup .popup-center .greeting-notice {
    padding-bottom: 12px;
  }
  body.hong4 .popup-bg.greeting-popup .popup-center .d-flex {
    margin-top: 12px;
    margin-bottom: 8px;
  }
  body.hong4 .popup-bg.greeting-popup .popup-center .greeting-textarea {
    padding: 7px 11px;
  }
  body.hong4 .popup-bg.greeting-popup .popup-center .greeting-textarea textarea {
    font-size: 14px;
    line-height: 22px;
  }
}
body.hong4 .head-chat.upd4 {
  background: var(--h-main-color);
}
body.hong4 .footer-chat.upd4 {
  height: 70px;
}
@media screen and (max-width: 719px) {
  body.hong4 .head-chat.upd4 {
    padding: 0;
  }
  body.hong4 .footer-chat.upd4 {
    height: 60px;
  }
  body.hong4 .text-ing {
    bottom: 80px;
  }
}
body.hong4 .popup-bg .popup-center .i-call {
  font-size: 14px;
}
body.hong4 .popup-table-box {
  padding: 0 16px;
}
body.hong4 .popup-table-box .popup-table {
  border: 1px solid #e9e9e9;
}
body.hong4 .popup-table-box .popup-tr {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e9e9e9;
}
body.hong4 .popup-table-box .popup-tr:last-child {
  border-bottom: 0;
}
body.hong4 .popup-table-box .popup-td {
  padding: 11px 12px;
  font-size: 14px;
  line-height: 20px;
}
@media screen and (max-width: 719px) {
  body.hong4 .popup-table-box .popup-td {
    padding: 10px 16px;
  }
}
body.hong4 .popup-table-box .popup-left {
  width: 100px;
  flex: 0 0 100px;
  text-align: center;
  color: #666666;
  background: #f5f5f5;
  border-right: 1px solid #e9e9e9;
}
@media screen and (max-width: 719px) {
  body.hong4 .popup-table-box .popup-left {
    width: 110px;
    flex: 0 0 110px;
  }
}
body.hong4 .popup-table-box .popup-right {
  flex: 1 0 auto;
  font-weight: bold;
  color: #222222;
  text-align: left;
}
body.hong4 .chatalk-popup h3 {
  font-size: 16px;
  line-height: 24px;
  font-weight: bold;
  margin-bottom: 16px;
  text-align: center;
}
body.hong4 .chatalk-popup .et {
  border-top: 1px solid #e9e9e9;
  border-bottom: 1px solid #e9e9e9;
  padding: 16px 0;
  font-size: 14px;
  line-height: 24px;
  color: #222222;
}
body.hong4 .chatalk-popup .info {
  position: relative;
  margin-top: 12px;
  padding-left: 14px;
  text-align: left;
}
body.hong4 .chatalk-popup .info::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 10px;
  height: 10px;
  background: url(/hong4/_img/main/chat-popup-info.svg) no-repeat center/cover;
}
body.hong4 .chatalk-popup .info h5 {
  font-size: 12px;
  line-height: 18px;
  margin-bottom: 3px;
  color: #222222;
  font-weight: bold;
}
body.hong4 .chatalk-popup .info p {
  font-size: 13px;
  color: #888888;
  line-height: 20px;
}
body.hong4 .banner-list_popup .popup-wrap {
  position: relative;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  height: 100%;
  z-index: 5;
}
body.hong4 .banner-list_popup .popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 80px;
  padding: 0 24px 0 20px;
  color: #ffffff;
}
@media screen and (max-width: 719px) {
  body.hong4 .banner-list_popup .popup-header {
    height: 50px;
    padding: 0 20px 0 16px;
  }
}
body.hong4 .banner-list_popup .popup-header h1 {
  font-size: 22px;
  font-weight: bold;
}
@media screen and (max-width: 719px) {
  body.hong4 .banner-list_popup .popup-header h1 {
    font-size: 17px;
  }
}
body.hong4 .banner-list_popup .popup-header button {
  width: 24px;
  height: 24px;
  background: none;
  cursor: pointer;
  padding: 0;
}
@media screen and (max-width: 719px) {
  body.hong4 .banner-list_popup .popup-header button {
    width: 14px;
    height: 14px;
  }
}
body.hong4 .banner-list_popup .popup-header img {
  display: block;
  width: 100%;
  height: 100%;
}
body.hong4 .banner-list_popup .popup-main {
  width: 100%;
  height: calc(100% - 80px);
  padding: 0 67px 67px;
  overflow-y: auto;
}
@media screen and (max-width: 719px) {
  body.hong4 .banner-list_popup .popup-main {
    height: calc(100% - 50px);
    padding: 0 20px 20px;
  }
}
@media (pointer: fine) and (hover: hover) {
  body.hong4 .banner-list_popup .popup-main::-webkit-scrollbar {
    width: 14px;
    height: 14px;
  }
  body.hong4 .banner-list_popup .popup-main::-webkit-scrollbar-thumb {
    outline: none;
    border-radius: 10px;
    border: 4px solid transparent;
    box-shadow: inset 6px 6px 0 rgba(211, 211, 211, 0.15);
  }
  body.hong4 .banner-list_popup .popup-main::-webkit-scrollbar-thumb:hover {
    border: 4px solid transparent;
    box-shadow: inset 6px 6px 0 rgba(211, 211, 211, 0.3);
  }
  body.hong4 .banner-list_popup .popup-main::-webkit-scrollbar-track {
    box-shadow: none;
    background-color: transparent;
  }
}
body.hong4 .banner-list_popup .banner_list-bg {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: #000000;
}
body.hong4 .banner-list_popup .main_banner-popup_ul {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
body.hong4 .banner-list_popup .main_banner-popup_ul li {
  position: relative;
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
}
body.hong4 .banner-list_popup .main_banner-popup_ul li a {
  display: block;
}
body.hong4 .banner-list_popup .main_banner-popup_ul img {
  display: block;
  width: 100%;
}
body.hong4 .banner-list_popup .main_banner-popup_ul .con-pos {
  display: block;
  position: absolute;
  right: 12px;
  bottom: 11px;
  width: 112px;
  height: 36px;
}
@media screen and (max-width: 719px) {
  body.hong4 .banner-list_popup .main_banner-popup_ul .con-pos {
    right: 8px;
    bottom: 8px;
    width: 76px;
    height: 24px;
  }
}
body.hong4 .search-page .popup-close {
  padding: 6px;
  background: none;
  cursor: pointer;
}
body.hong4 .search-page .popup-close img {
  display: block;
  width: 12px;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-page .popup-close img {
    width: 10px;
  }
}
body.hong4 .popup-inner-bottom.type2 .popup-btn.refresh {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: 120px;
  flex: 0 0 120px;
  background: #c1c1c1;
}
@media screen and (max-width: 719px) {
  body.hong4 .popup-inner-bottom.type2 .popup-btn.refresh {
    min-width: 94px;
    width: 28%;
    flex: 0 0 28%;
  }
}
body.hong4 .popup-inner-bottom.type2 .popup-btn.refresh img {
  display: block;
  width: 14px;
}
@media screen and (max-width: 719px) {
  body.hong4 .popup-inner-bottom.type2 .popup-btn.refresh img {
    width: 12px;
  }
}
body.hong4 .search-popup {
  position: fixed;
  width: 100%;
  max-width: 718px;
  height: 100%;
  left: 50%;
  top: 0;
  z-index: 5;
  transform: translateX(-50%);
  background: #ffffff;
}
body.hong4 .search-popup .search-header {
  padding: 32px 20px;
  background: #f6f7f8;
  border-bottom: 1px solid #e9e9e9;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-popup .search-header {
    padding: 20px 16px;
  }
}
body.hong4 .search-popup .search-box {
  width: 100%;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #222222;
  border-radius: 6px;
  background: #ffffff;
  padding-left: 8px;
  padding-right: 12px;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-popup .search-box {
    height: 42px;
    padding-left: 7px;
    padding-right: 9px;
  }
}
body.hong4 .search-popup .search-box .back {
  background: none;
  padding: 8px;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-popup .search-box .back {
    padding: 6px;
  }
}
body.hong4 .search-popup .search-box .back img {
  display: block;
  width: 16px;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-popup .search-box .back img {
    width: 14px;
  }
}
body.hong4 .search-popup .search-box .clear {
  padding: 4px;
  cursor: pointer;
  background: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
body.hong4 .search-popup .search-box .clear img {
  display: block;
  width: 24px;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-popup .search-box .clear img {
    width: 20px;
  }
}
body.hong4 .search-popup .search-box .search {
  padding: 4px;
  cursor: pointer;
  background: none;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
body.hong4 .search-popup .search-box .search img {
  display: block;
  width: 24px;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-popup .search-box .search img {
    width: 18px;
  }
}
body.hong4 .search-popup .search-input-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  margin-right: 4px;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-popup .search-input-box {
    margin-right: 2px;
  }
}
body.hong4 .search-popup .search-input-box input {
  width: 100%;
  height: 100%;
  font-size: 20px;
  font-weight: bold;
  line-height: 29px;
  color: #222222;
  font-family: var(--h-body-font-family);
}
@media screen and (max-width: 719px) {
  body.hong4 .search-popup .search-input-box input {
    font-size: 16px;
    line-height: 24px;
  }
}
body.hong4 .search-popup .search-list {
  width: 100%;
  padding: 24px 12px 104px 20px;
  max-height: calc(100vh - 121px);
  overflow-y: auto;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-popup .search-list {
    padding: 21px 10px 86px 16px;
    max-height: calc(100vh - 82px);
  }
}
body.hong4 .search-popup .search-list .search-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin: 30px 0;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-popup .search-list .search-item {
    margin: 24px 0;
  }
}
body.hong4 .search-popup .search-list .search-item:first-child {
  margin: 0 !important;
}
body.hong4 .search-popup .search-list .search-item .link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-popup .search-list .search-item .link {
    gap: 8px;
  }
}
body.hong4 .search-popup .search-list .search-item .link span {
  color: #666666;
  font-size: 20px;
  line-height: 29px;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-popup .search-list .search-item .link span {
    font-size: 16px;
    line-height: 24px;
  }
}
body.hong4 .search-popup .search-list .search-item .link b {
  color: #222222;
  font-size: 20px;
  font-weight: bold;
  line-height: 29px;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-popup .search-list .search-item .link b {
    font-size: 16px;
    line-height: 24px;
  }
}
body.hong4 .search-popup .search-list .search-item.text .link img {
  display: block;
  width: 24px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-popup .search-list .search-item.text .link img {
    width: 20px;
  }
}
body.hong4 .search-popup .search-list .search-item.profile {
  margin: 20px 0;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-popup .search-list .search-item.profile {
    margin: 18px 0;
  }
}
body.hong4 .search-popup .search-list .search-item.profile .link {
  gap: 16px;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-popup .search-list .search-item.profile .link {
    gap: 14px;
  }
}
body.hong4 .search-popup .search-list .search-item.profile .link .profile-img {
  position: relative;
  width: 136px;
  flex: 0 0 136px;
  height: 95px;
  border-radius: 6px;
  overflow: hidden;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-popup .search-list .search-item.profile .link .profile-img {
    width: 94px;
    flex: 0 0 94px;
    height: 60px;
    border-radius: 4px;
  }
}
body.hong4 .search-popup .search-list .search-item.profile .link .profile-img.tarot {
  background: url(/hong4/_img/main/bg_tarot.jpg) no-repeat center/cover;
}
body.hong4 .search-popup .search-list .search-item.profile .link .profile-img.tarot::before {
  content: "타로";
  position: absolute;
  left: 6px;
  top: 6px;
  border-radius: 2px;
  font-size: 11px;
  font-weight: bold;
  line-height: 17px;
  padding: 3px 5px;
  color: #ffffff;
  background: #4e008e;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-popup .search-list .search-item.profile .link .profile-img.tarot::before {
    left: 4px;
    top: 4px;
    font-size: 8px;
    line-height: 13px;
    padding: 3px 5px;
  }
}
body.hong4 .search-popup .search-list .search-item.profile .link .profile-img.saju {
  background: url(/hong4/_img/main/bg_saju.jpg) no-repeat center/cover;
}
body.hong4 .search-popup .search-list .search-item.profile .link .profile-img.saju::before {
  content: "사주";
  position: absolute;
  left: 6px;
  top: 6px;
  border-radius: 2px;
  font-size: 11px;
  font-weight: bold;
  line-height: 17px;
  padding: 3px 5px;
  color: #ffffff;
  background: #d67a00;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-popup .search-list .search-item.profile .link .profile-img.saju::before {
    left: 4px;
    top: 4px;
    font-size: 8px;
    line-height: 13px;
    padding: 3px 5px;
  }
}
body.hong4 .search-popup .search-list .search-item.profile .link .profile-img.fortune {
  background: url(/hong4/_img/main/bg_fortune.png) no-repeat center/cover;
}
body.hong4 .search-popup .search-list .search-item.profile .link .profile-img.fortune::before {
  content: "신점";
  position: absolute;
  left: 6px;
  top: 6px;
  border-radius: 2px;
  font-size: 11px;
  font-weight: bold;
  line-height: 17px;
  padding: 3px 5px;
  color: #ffffff;
  background: #c21129;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-popup .search-list .search-item.profile .link .profile-img.fortune::before {
    left: 4px;
    top: 4px;
    font-size: 8px;
    line-height: 13px;
    padding: 3px 5px;
  }
}
body.hong4 .search-popup .search-list .search-item.profile .link .profile-img img {
  display: block;
  height: 100%;
}
body.hong4 .search-popup .search-list .search-item .keyword {
  cursor: pointer;
  background: none;
  padding: 8px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
body.hong4 .search-popup .search-list .search-item .keyword img {
  display: block;
  width: 12px;
}
@media screen and (max-width: 719px) {
  body.hong4 .search-popup .search-list .search-item .keyword img {
    width: 8px;
  }
}
body.hong4 .onboard-popup {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  width: 100%;
  height: 100dvh;
  left: 0;
  top: 0;
  z-index: 99999;
  background: #222222;
}
body.hong4 .onboard-popup .onboard-container {
  position: relative;
  max-width: 66%;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 719px) {
  body.hong4 .onboard-popup .onboard-container {
    max-width: 100%;
    height: 100%;
  }
}
body.hong4 .onboard-popup .swiper-container {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
body.hong4 .onboard-popup .swiper-wrapper {
  align-items: center;
}
@media screen and (max-width: 719px) {
  body.hong4 .onboard-popup .swiper-wrapper {
    height: auto;
  }
}
body.hong4 .onboard-popup .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  max-width: 100%;
  border: 0;
  border-radius: 0;
}
@media screen and (max-width: 719px) {
  body.hong4 .onboard-popup .swiper-slide {
    align-items: flex-start;
  }
}
body.hong4 .onboard-popup .swiper-slide img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
@media screen and (max-width: 719px) {
  body.hong4 .onboard-popup .swiper-slide img {
    -o-object-position: top;
       object-position: top;
  }
}
body.hong4 .onboard-popup .swiper-pagination {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 24px 0;
}
@media screen and (max-width: 719px) {
  body.hong4 .onboard-popup .swiper-pagination {
    position: absolute;
    margin: 0;
    bottom: 13px;
  }
}
body.hong4 .onboard-popup .swiper-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: #d6cceb;
  margin: 0 5px;
  transition: all 0.5s;
  opacity: 1;
}
@media screen and (max-width: 719px) {
  body.hong4 .onboard-popup .swiper-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
  }
}
body.hong4 .onboard-popup .swiper-pagination .swiper-pagination-bullet-active {
  width: 13px;
  height: 13px;
  background: #6335b4;
}
@media screen and (max-width: 719px) {
  body.hong4 .onboard-popup .swiper-pagination .swiper-pagination-bullet-active {
    width: 9px;
    height: 9px;
  }
}
body.hong4 .onboard-popup .onboard-login {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 37px 16px 16px;
  border-radius: 12px;
  border: 1px solid #707070;
  background: #ffffff;
  height: auto;
}
body.hong4 .onboard-popup .onboard-login .onboard-coin {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  max-width: 306px;
}
body.hong4 .onboard-popup .onboard-login .onboard-coin img {
  display: block;
  width: 100%;
}
body.hong4 .onboard-popup .onboard-login .text {
  font-size: 24px;
  line-height: 35px;
  margin-bottom: 40px;
}
body.hong4 .onboard-popup .onboard-login .text b {
  font-size: 24px;
  line-height: 35px;
  font-weight: bold;
  color: #6335b4;
}
body.hong4 .onboard-popup .onboard-login .text span {
  font-size: 24px;
  line-height: 35px;
  color: #222222;
}
body.hong4 .onboard-popup .onboard-login .buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  font-weight: bold;
  font-size: 20px;
  line-height: 29px;
}
body.hong4 .onboard-popup .onboard-login .buttons .active {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  color: #ffffff;
  border-radius: 4px;
  background: #6335b4;
}
body.hong4 .onboard-popup .onboard-login .buttons .login {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 56px;
  color: #6335b4;
  border: 1px solid #6335b4;
  border-radius: 4px;
  background: #ffffff;
}
body.hong4 .onboard-popup .img-link1 {
  display: block;
  position: absolute;
  left: 22.6%;
  top: 61%;
  width: 55%;
  height: 56px;
  border-radius: 7px;
  opacity: 0.5;
}
body.hong4 .onboard-popup .img-link2 {
  display: block;
  position: absolute;
  left: 28%;
  top: 72.5%;
  width: 44%;
  height: 45px;
  border-radius: 7px;
  opacity: 0.5;
}
body.hong4 .onboard-popup .onboard-close {
  position: absolute;
  right: 0;
  bottom: 9px;
  width: 88px;
  height: 40px;
  line-height: 40px;
  border-radius: 20px;
  font-size: 18px;
  cursor: pointer;
  z-index: 9;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #000000;
}
@media screen and (max-width: 719px) {
  body.hong4 .onboard-popup .onboard-close {
    width: 60px;
    height: 24px;
    line-height: 24px;
    border-radius: 14px;
    font-size: 12px;
    gap: 4px;
    bottom: 5px;
  }
}
body.hong4 .onboard-popup .onboard-close img {
  display: block;
  width: 12px;
}
@media screen and (max-width: 719px) {
  body.hong4 .onboard-popup .onboard-close img {
    width: 8px;
  }
}
body.hong4 .popup-inner-top-tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 20px;
}
body.hong4 .popup-inner-top-tab li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc((100% - 24px) / 4);
  height: 36px;
  flex: 0 0 calc((100% - 24px) / 4);
  border-radius: 4px;
  background: #f6f7f8;
  border: 1px solid #e9e9e9;
  color: #222222;
  font-size: 14px;
  line-height: 20px;
  cursor: pointer;
}
body.hong4 .popup-inner-top-tab li.active {
  background: #6335b4;
  border-color: #6335b4;
  color: #ffffff;
  font-weight: bold;
}
body.hong4 .popup-inner-top-tab li.disabled {
  background-color: #ffffff;
  color: #cccccc;
  border-color: #e9e9e9;
  pointer-events: none;
}
body.hong4 .check-list-tab-list {
  display: none;
}
body.hong4 .check-list-tab-list.type2 {
  justify-content: space-between;
  align-items: stretch;
  gap: 16px;
}
body.hong4 .check-list-tab-list.type2 .col {
  width: 100%;
  flex: 1;
}
body.hong4 .check-list-tab-list.type2 .line {
  width: 1px;
  background: #f1f1f1;
}
body.hong4 .consult-popup,
body.hong4 .full-popup {
  position: fixed;
  width: 100%;
  max-width: 718px;
  height: 100%;
  left: 50%;
  top: 0;
  z-index: 5;
  transform: translateX(-50%);
  background: #ffffff;
}
body.hong4 .consult-popup.green header,
body.hong4 .full-popup.green header {
  background: #00af79;
}
body.hong4 .consult-popup.green .promo,
body.hong4 .full-popup.green .promo {
  color: #00af79 !important;
}
body.hong4 .consult-popup.green .btn.active,
body.hong4 .full-popup.green .btn.active {
  background: #00af79;
}
@media screen and (max-width: 719px) {
  body.hong4 .consult-popup,
  body.hong4 .full-popup {
    z-index: 20;
  }
}
body.hong4 .consult-popup header,
body.hong4 .full-popup header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 80px;
  background: #6335b4;
  color: #ffffff;
  padding: 0 20px;
}
@media screen and (max-width: 719px) {
  body.hong4 .consult-popup header,
  body.hong4 .full-popup header {
    height: 50px;
    padding: 0 16px;
  }
}
body.hong4 .consult-popup header h3,
body.hong4 .full-popup header h3 {
  font-size: 22px;
  font-weight: bold;
  line-height: 33px;
}
@media screen and (max-width: 719px) {
  body.hong4 .consult-popup header h3,
  body.hong4 .full-popup header h3 {
    font-size: 17px;
    line-height: 25px;
  }
}
body.hong4 .consult-popup header a,
body.hong4 .full-popup header a {
  display: block;
  width: 18px;
  height: 18px;
}
@media screen and (max-width: 719px) {
  body.hong4 .consult-popup header a,
  body.hong4 .full-popup header a {
    width: 14px;
    height: 14px;
  }
}
body.hong4 .consult-popup header a img,
body.hong4 .full-popup header a img {
  display: block;
  width: 100%;
  height: 100%;
}
body.hong4 .consult-popup main,
body.hong4 .full-popup main {
  height: calc(100% - 80px);
  padding-bottom: 64px;
}
@media screen and (max-width: 719px) {
  body.hong4 .consult-popup main,
  body.hong4 .full-popup main {
    height: calc(100% - 50px);
    padding-bottom: 0;
  }
}
body.hong4 .consult-popup main .info-box,
body.hong4 .full-popup main .info-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 80px;
  background: #f3f4f7;
  border-bottom: 1px solid #e3e7ed;
}
@media screen and (max-width: 719px) {
  body.hong4 .consult-popup main .info-box,
  body.hong4 .full-popup main .info-box {
    padding: 0 16px;
    height: 56px;
  }
}
body.hong4 .consult-popup main .info-box-inner,
body.hong4 .full-popup main .info-box-inner {
  width: 100%;
  max-width: 400px;
  display: flex;
  align-items: center;
  gap: 12px;
}
@media screen and (max-width: 719px) {
  body.hong4 .consult-popup main .info-box-inner,
  body.hong4 .full-popup main .info-box-inner {
    max-width: 100%;
    gap: 10px;
  }
}
body.hong4 .consult-popup main .info-box-inner .con-img,
body.hong4 .full-popup main .info-box-inner .con-img {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  overflow: hidden;
}
@media screen and (max-width: 719px) {
  body.hong4 .consult-popup main .info-box-inner .con-img,
  body.hong4 .full-popup main .info-box-inner .con-img {
    width: 40px;
    height: 40px;
  }
}
body.hong4 .consult-popup main .info-box-inner .con-img.tarot,
body.hong4 .full-popup main .info-box-inner .con-img.tarot {
  background: url(/hong4/_img/main/bg_tarot.jpg) no-repeat center/cover;
}
body.hong4 .consult-popup main .info-box-inner .con-img.saju,
body.hong4 .full-popup main .info-box-inner .con-img.saju {
  background: url(/hong4/_img/main/bg_saju.jpg) no-repeat center/cover;
}
body.hong4 .consult-popup main .info-box-inner .con-img.fortune,
body.hong4 .full-popup main .info-box-inner .con-img.fortune {
  background: url(/hong4/_img/main/bg_fortune.png) no-repeat center/cover;
}
body.hong4 .consult-popup main .info-box-inner .con-img img,
body.hong4 .full-popup main .info-box-inner .con-img img {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: auto;
  height: 96%;
}
body.hong4 .consult-popup main .info-box-inner .info-text,
body.hong4 .full-popup main .info-box-inner .info-text {
  font-size: 16px;
  line-height: 24px;
}
@media screen and (max-width: 719px) {
  body.hong4 .consult-popup main .info-box-inner .info-text,
  body.hong4 .full-popup main .info-box-inner .info-text {
    font-size: 14px;
    line-height: 24px;
  }
}
body.hong4 .consult-popup main .info-box-inner .line,
body.hong4 .full-popup main .info-box-inner .line {
  width: 1px;
  height: 12px;
  margin: 0 5px;
  background: #dddddd;
}
@media screen and (max-width: 719px) {
  body.hong4 .consult-popup main .info-box-inner .line,
  body.hong4 .full-popup main .info-box-inner .line {
    height: 10px;
    margin: 0 3px;
  }
}
body.hong4 .consult-popup main .content-box,
body.hong4 .full-popup main .content-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: calc(100% - 80px);
}
@media screen and (max-width: 719px) {
  body.hong4 .consult-popup main .content-box,
  body.hong4 .full-popup main .content-box {
    height: calc(100% - 56px);
  }
}
body.hong4 .consult-popup main .content-box .content-inner,
body.hong4 .full-popup main .content-box .content-inner {
  width: 100%;
  max-width: 400px;
  height: 100%;
  border-right: 1px solid #e9e9e9;
  border-left: 1px solid #e9e9e9;
}
@media screen and (max-width: 719px) {
  body.hong4 .consult-popup main .content-box .content-inner,
  body.hong4 .full-popup main .content-box .content-inner {
    max-width: 100%;
    border: 0;
  }
}
body.hong4 .consult-popup main .content-box .content-inner .coin-btn,
body.hong4 .full-popup main .content-box .content-inner .coin-btn {
  width: 107px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #d8c566;
  background: #ffe770;
  border-radius: 4px;
  font-size: 14px;
}
@media screen and (max-width: 719px) {
  body.hong4 .consult-popup main .content-box .content-inner .coin-btn,
  body.hong4 .full-popup main .content-box .content-inner .coin-btn {
    width: 90px;
    height: 30px;
    font-size: 12px;
  }
}
body.hong4 .consult-popup main .content-box .content-inner .coin-btn img,
body.hong4 .full-popup main .content-box .content-inner .coin-btn img {
  display: block;
}
body.hong4 .consult-popup main .content-box .content-inner .coin-btn .coin,
body.hong4 .full-popup main .content-box .content-inner .coin-btn .coin {
  width: 16px;
}
@media screen and (max-width: 719px) {
  body.hong4 .consult-popup main .content-box .content-inner .coin-btn .coin,
  body.hong4 .full-popup main .content-box .content-inner .coin-btn .coin {
    width: 14px;
  }
}
body.hong4 .consult-popup main .content-box .content-inner .coin-btn .arrow,
body.hong4 .full-popup main .content-box .content-inner .coin-btn .arrow {
  width: 5px;
}
@media screen and (max-width: 719px) {
  body.hong4 .consult-popup main .content-box .content-inner .coin-btn .arrow,
  body.hong4 .full-popup main .content-box .content-inner .coin-btn .arrow {
    width: 4px;
  }
}
body.hong4 .consult-popup main .content-box .content-inner .grid-b,
body.hong4 .full-popup main .content-box .content-inner .grid-b {
  margin-bottom: 24px;
}
@media screen and (max-width: 719px) {
  body.hong4 .consult-popup main .content-box .content-inner .grid-b,
  body.hong4 .full-popup main .content-box .content-inner .grid-b {
    margin-bottom: 20px;
  }
}
body.hong4 .consult-popup main .content-box .content-inner .grid-b > div, body.hong4 .consult-popup main .content-box .content-inner .grid-b > a,
body.hong4 .full-popup main .content-box .content-inner .grid-b > div,
body.hong4 .full-popup main .content-box .content-inner .grid-b > a {
  font-size: 14px;
  line-height: 37px;
  text-align: left;
  padding: 0 10px 0 16px;
  color: #222222;
}
@media screen and (max-width: 719px) {
  body.hong4 .consult-popup main .content-box .content-inner .grid-b > div, body.hong4 .consult-popup main .content-box .content-inner .grid-b > a,
  body.hong4 .full-popup main .content-box .content-inner .grid-b > div,
  body.hong4 .full-popup main .content-box .content-inner .grid-b > a {
    font-size: 12px;
    line-height: 31px;
    padding: 0 8px 0 12px;
  }
}
body.hong4 .consult-popup main .content-box .content-inner .grid-b .g-bg,
body.hong4 .full-popup main .content-box .content-inner .grid-b .g-bg {
  background: #f3f4f7;
}
body.hong4 .consult-popup main .content-box .content-inner .grid-b img,
body.hong4 .full-popup main .content-box .content-inner .grid-b img {
  display: block;
}
body.hong4 .consult-popup main .content-box .content-inner .grid-b .coupon,
body.hong4 .full-popup main .content-box .content-inner .grid-b .coupon {
  width: 19px;
}
@media screen and (max-width: 719px) {
  body.hong4 .consult-popup main .content-box .content-inner .grid-b .coupon,
  body.hong4 .full-popup main .content-box .content-inner .grid-b .coupon {
    width: 17px;
  }
}
body.hong4 .consult-popup main .content-box .content-inner .grid-b .arrow2,
body.hong4 .consult-popup main .content-box .content-inner .grid-b .check2,
body.hong4 .full-popup main .content-box .content-inner .grid-b .arrow2,
body.hong4 .full-popup main .content-box .content-inner .grid-b .check2 {
  width: 12px;
}
@media screen and (max-width: 719px) {
  body.hong4 .consult-popup main .content-box .content-inner .grid-b .arrow2,
  body.hong4 .consult-popup main .content-box .content-inner .grid-b .check2,
  body.hong4 .full-popup main .content-box .content-inner .grid-b .arrow2,
  body.hong4 .full-popup main .content-box .content-inner .grid-b .check2 {
    width: 10px;
  }
}
body.hong4 .consult-popup main .content-box .content-inner .promo,
body.hong4 .full-popup main .content-box .content-inner .promo {
  height: 20px;
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
  font-size: 12px;
  color: #6335b4;
  border-radius: 10px;
  background: #ffffff;
  padding: 4px 8px;
  margin-right: 8px;
}
@media screen and (max-width: 719px) {
  body.hong4 .consult-popup main .content-box .content-inner .promo,
  body.hong4 .full-popup main .content-box .content-inner .promo {
    height: 18px;
    font-size: 10px;
    border-radius: 9px;
    padding: 4px 7px;
  }
}
body.hong4 .consult-popup main .content-box .content-inner .promo img,
body.hong4 .full-popup main .content-box .content-inner .promo img {
  display: block;
  width: 11px;
}
@media screen and (max-width: 719px) {
  body.hong4 .consult-popup main .content-box .content-inner .promo img,
  body.hong4 .full-popup main .content-box .content-inner .promo img {
    width: 9px;
  }
}
body.hong4 .consult-popup main .content-box .login-btn,
body.hong4 .full-popup main .content-box .login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-width: auto;
  height: 77px;
  font-size: 16px;
  font-weight: bold;
  color: #222222;
  line-height: 24px;
  border: 1px solid #e3e7ed;
  background: rgba(243, 244, 247, 0.77);
  padding: 0;
  margin: 0;
  border-radius: 0;
}
@media screen and (max-width: 719px) {
  body.hong4 .consult-popup main .content-box .login-btn,
  body.hong4 .full-popup main .content-box .login-btn {
    gap: 6px;
    height: 65px;
    font-size: 14px;
    line-height: 20px;
  }
}
body.hong4 .consult-popup main .content-box .login-btn img,
body.hong4 .full-popup main .content-box .login-btn img {
  display: block;
  width: 7px;
  margin-top: 2px;
}
@media screen and (max-width: 719px) {
  body.hong4 .consult-popup main .content-box .login-btn img,
  body.hong4 .full-popup main .content-box .login-btn img {
    width: 6px;
  }
}
body.hong4 .coupon-popup .coupon-info {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  background: #f3f4f7;
  font-size: 16px;
  line-height: 24px;
  color: #222222;
  border-bottom: 1px solid #e3e7ed;
}
@media screen and (max-width: 719px) {
  body.hong4 .coupon-popup .coupon-info {
    height: 44px;
    font-size: 14px;
    line-height: 20px;
  }
}
body.hong4 .coupon-popup .coupon-ul {
  padding: 2px 16px;
  max-height: 466px;
  overflow: auto;
}
@media screen and (max-width: 719px) {
  body.hong4 .coupon-popup .coupon-ul {
    padding: 4px 16px;
    max-height: 384px;
  }
}
body.hong4 .coupon-popup .coupon-ul::-webkit-scrollbar {
  width: 5px;
}
@media screen and (max-width: 719px) {
  body.hong4 .coupon-popup .coupon-ul::-webkit-scrollbar {
    width: 3px;
  }
}
body.hong4 .coupon-popup .coupon-ul::-webkit-scrollbar-thumb {
  background: #c2c2c2;
  border-radius: 3px;
}
body.hong4 .coupon-popup .coupon-ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #e9e9e9;
}
@media screen and (max-width: 719px) {
  body.hong4 .coupon-popup .coupon-ul li {
    padding: 12px 0;
  }
}
body.hong4 .coupon-popup .coupon-ul li:last-child {
  border-bottom: 0;
}
body.hong4 .coupon-popup .coupon-ul li .coupon-list {
  width: 100%;
  text-align: left;
  cursor: pointer;
}
body.hong4 .coupon-popup .coupon-ul li .coupon-list h5 {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 7px;
  line-height: 27px;
  color: #222222;
}
@media screen and (max-width: 719px) {
  body.hong4 .coupon-popup .coupon-ul li .coupon-list h5 {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 2px;
    line-height: 24px;
  }
}
body.hong4 .coupon-popup .coupon-ul li .coupon-list p {
  font-size: 14px;
  line-height: 22px;
  color: #666666;
}
@media screen and (max-width: 719px) {
  body.hong4 .coupon-popup .coupon-ul li .coupon-list p {
    font-size: 12px;
    line-height: 18px;
  }
}
body.hong4 .coupon-popup .coupon-ul li input[type=chekbox] {
  display: none;
}
body.hong4 .coupon-popup .coupon-ul li .check-btn {
  flex: 0 0 24px;
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url(/hong4/_img/main/i-check-circle.png) no-repeat center/cover;
  cursor: pointer;
}
@media screen and (max-width: 719px) {
  body.hong4 .coupon-popup .coupon-ul li .check-btn {
    flex: 0 0 18px;
    display: inline-block;
    width: 18px;
    height: 18px;
  }
}
body.hong4 .coupon-popup .popup-bottom {
  padding: 16px;
  border-top: 1px solid #e9e9e9;
}
@media screen and (max-width: 719px) {
  body.hong4 .coupon-popup .popup-bottom {
    padding: 10px;
  }
}
body.hong4 .coupon-popup .popup-bottom .btn {
  height: 50px;
  line-height: 50px;
}
@media screen and (max-width: 719px) {
  body.hong4 .coupon-popup .popup-bottom .btn {
    height: 40px;
    line-height: 40px;
  }
}
body.hong4 .consult-popup.purple .btn.active {
  background: #6335b4;
}
body.hong4 .consult-popup.purple input[type=checkbox]:checked ~ label.check-btn {
  background: url(/hong4/_img/main/i-check-on.png) no-repeat center/cover;
}
body.hong4 .consult-popup.green .btn.active {
  background: #00af79;
}
body.hong4 .consult-popup.green input[type=checkbox]:checked ~ label.check-btn {
  background: url(/hong4/_img/main/i-check-on-green.svg) no-repeat center/cover;
}

body.agora {
  /* agora */
  /* agora-loading ver1 */
  /* agora-user */
  /*  header .time-box .all-time,
   header .time-box .remain-time {
    opacity: 0.8;
  } */
  /* @media screen and (max-width: 837px) {
     .wrapper main .my-screen-container .alert-box .alert {
      font-size: 0.85rem;
    }
  } */
  /* agora-loading ver2 */
  /* @media screen and (max-width: 419px) {
     .wrapper footer#mobile {
      padding: 0 15px;
    }
  } */
}
body.agora .wrapper .exit-box {
  position: absolute;
  right: 24px;
  top: 18px;
  border-radius: 18px;
  width: 82px;
  height: 36px;
  color: var(--h-color-fff);
  opacity: 0.8;
  border: 1px solid var(--h-color-fff);
  padding: 0 16px;
  cursor: pointer;
}
body.agora .wrapper .j-exit-box {
  position: absolute;
  right: 24px;
  top: 18px;
  border-radius: 18px;
  width: 82px;
  height: 36px;
  color: var(--h-color-fff);
  opacity: 0.8;
  border: 1px solid var(--h-color-fff);
  padding: 0 16px;
  cursor: pointer;
}
body.agora .wrapper .exit-box .i-exit {
  display: block;
  width: 12px;
  height: 12px;
  position: absolute;
  right: 16px;
  top: 52%;
  transform: translateY(-50%);
}
body.agora .wrapper .j-exit-box .i-exit {
  display: block;
  width: 12px;
  height: 12px;
  position: absolute;
  right: 16px;
  top: 52%;
  transform: translateY(-50%);
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora .wrapper .exit-box {
    width: 40px;
    height: auto;
    top: 18px;
    right: 10px;
    border: none;
    padding: 0;
    font-size: 1rem;
  }
  body.agora .wrapper .exit-box .i-exit {
    right: 0;
    width: 10px;
    height: 10px;
    background-size: cover;
    top: 54%;
  }
  body.agora .wrapper .j-exit-box {
    width: 40px;
    height: auto;
    top: 18px;
    right: 10px;
    border: none;
    padding: 0;
    font-size: 1rem;
  }
  body.agora .wrapper .j-exit-box .i-exit {
    right: 0;
    width: 10px;
    height: 10px;
    background-size: cover;
    top: 54%;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .wrapper .exit-box {
    width: 40px;
    height: auto;
    top: 18px;
    right: 30px;
    border: none;
    padding: 0;
    font-size: 1rem;
  }
  body.agora .wrapper .exit-box .i-exit {
    right: 0;
    width: 10px;
    height: 10px;
    background-size: cover;
    top: 54%;
  }
  body.agora .wrapper .j-exit-box {
    width: 40px;
    height: auto;
    top: 18px;
    right: 30px;
    border: none;
    padding: 0;
    font-size: 1rem;
  }
  body.agora .wrapper .j-exit-box .i-exit {
    right: 0;
    width: 10px;
    height: 10px;
    background-size: cover;
    top: 54%;
  }
}
body.agora .wrapper.loading .connect-container {
  width: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora .wrapper.loading .connect-container {
    width: 300px;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .wrapper.loading .connect-container {
    width: 100%;
    padding: 0 20px;
  }
}
body.agora .wrapper.loading .prepare-text {
  font-size: 1.25rem;
  letter-spacing: -0.4px;
}
body.agora .wrapper.loading .prepare-text .counselor {
  font-size: 2.25rem;
  letter-spacing: -0.72px;
  margin-bottom: 13px;
}
body.agora .wrapper.loading .guide-text {
  color: var(--h-color-888);
  font-size: 1.125rem;
  line-height: 1.75rem;
  letter-spacing: -0.36px;
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .wrapper.loading .prepare-text {
    font-size: 1.142rem;
  }
  body.agora .wrapper.loading .prepare-text .counselor {
    font-size: 1.875rem;
  }
  body.agora .wrapper.loading .guide-text {
    font-size: 1rem;
  }
}
body.agora .loading-container.ver1 {
  width: 200px;
  height: 200px;
  background: var(--h-color-000);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 48px 0;
}
body.agora .loading-container.ver1 .circle-container {
  width: 120px;
  height: 120px;
  position: relative;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora .loading-container.ver1 {
    width: 180px;
    height: 180px;
    margin: 50px 0;
    background: var(--h-color-111);
  }
  body.agora .loading-container.ver1 .circle-container {
    width: 100px;
    height: 100px;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .loading-container.ver1 {
    width: 140px;
    height: 140px;
    margin: 20px 0;
    background: var(--h-color-111);
  }
  body.agora .loading-container.ver1 .circle-container {
    width: 78px;
    height: 78px;
  }
}
body.agora .loading-container.ver1 .circle-loading {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-sizing: border-box;
  border: 10px solid #272727;
  border-top: 10px solid #ffd500;
  animation: spin 1s linear infinite;
  position: relative;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora .loading-container.ver1 .circle-loading {
    border: 10px solid #333;
    border-top: 10px solid #ffd500;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .loading-container.ver1 .circle-loading {
    border: 10px solid #333;
    border-top: 10px solid #ffd500;
  }
}
body.agora .loading-container.ver1 .circle-loading::before,
body.agora .loading-container.ver1 .circle-loading::after {
  content: "";
  display: block;
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ffd500;
  top: 5.5px;
}
body.agora .loading-container.ver1 .circle-loading::before {
  left: 6.5px;
}
body.agora .loading-container.ver1 .circle-loading::after {
  right: 6.5px;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora .loading-container.ver1 .circle-loading::before,
  body.agora .loading-container.ver1 .circle-loading::after {
    top: 2.8px;
  }
  body.agora .loading-container.ver1 .circle-loading::before {
    left: 3.6px;
  }
  body.agora .loading-container.ver1 .circle-loading::after {
    right: 3.6px;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .loading-container.ver1 .circle-loading::before,
  body.agora .loading-container.ver1 .circle-loading::after {
    top: -0.5px;
  }
  body.agora .loading-container.ver1 .circle-loading::before {
    left: 0.5px;
  }
  body.agora .loading-container.ver1 .circle-loading::after {
    right: -0.5px;
  }
}
body.agora .loading-container.ver1 .circle-container > span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 1.625rem;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
body.agora .wrapper header {
  width: 100%;
  height: 72px;
  background: var(--h-color-000);
  padding: 0 130px 0 24px;
  position: relative;
}
@media screen and (max-width: 979px) {
  body.agora .wrapper header {
    padding: 0 120px 0 24px;
  }
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora .wrapper header {
    height: 50px;
    padding: 0 10px;
    background: rgba(0, 0, 0, 0.8);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .wrapper header {
    height: 50px;
    padding: 0 30px;
    justify-content: flex-start;
    background: rgba(0, 0, 0, 0.8);
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99;
  }
}
body.agora header .counselor-box .counselor-img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 16px;
  background: var(--h-agora-counselor-profile) center/cover #b89d78;
}
body.agora header .counselor-box.video-profile .counselor-img {
  background: var(--h-agora-counselor-video-profile-opacity) center/cover;
}
body.agora header .counselor-box.video-profile.active .counselor-img {
  background: var(--h-agora-counselor-video-profile) center/cover;
}
body.agora header .counselor-box .counselor-name {
  font-weight: bold;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora header .counselor-box .counselor-img {
    width: 36px;
    height: 36px;
    margin-right: 12px;
  }
  body.agora header .counselor-box .counselor-name {
    font-size: 1.142rem;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora header .counselor-box .counselor-img {
    width: 36px;
    height: 36px;
    margin-right: 12px;
  }
  body.agora header .counselor-box .counselor-name {
    font-size: 1.142rem;
  }
}
body.agora header .counselor-box.mic-off .i-mic-off-opacity {
  margin-left: 8px;
  width: 24px;
  height: 24px;
  display: inline-block;
  background-size: cover;
  margin-top: 2px;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora header .counselor-box.mic-off .i-mic-off-opacity {
    width: 20px;
    height: 20px;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora header .counselor-box.mic-off .i-mic-off-opacity {
    width: 20px;
    height: 20px;
  }
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora header .time-box {
    position: absolute;
    left: inherit;
    top: 64px;
    z-index: 9;
    width: 100%;
    padding: 0 10px;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora header .time-box {
    position: static;
    left: auto;
    top: auto;
    z-index: 9;
    margin-left: 8px;
    margin-top: 1px;
    width: auto;
    padding: 0;
  }
}
body.agora header .time-box .all-time,
body.agora header .time-box .remain-time,
body.agora header .time-box .consult-start {
  gap: 6px;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora header .time-box .all-time,
  body.agora header .time-box .remain-time,
  body.agora header .time-box .consult-start {
    font-size: 1rem;
  }
}
@media (orientation: portrait) and (max-width: 370px) {
  body.agora header .time-box .all-time,
  body.agora header .time-box .remain-time,
  body.agora header .time-box .consult-start {
    font-size: 0.9rem;
  }
}
@media (orientation: portrait) and (max-width: 350px) {
  body.agora header .time-box .all-time,
  body.agora header .time-box .remain-time,
  body.agora header .time-box .consult-start {
    font-size: 0.85rem;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora header .time-box .all-time,
  body.agora header .time-box .remain-time,
  body.agora header .time-box .consult-start {
    font-size: 1rem;
  }
}
body.agora header .time-box .extend-time {
  gap: 5px;
}
body.agora header .time-box .extend-time,
body.agora header .time-box .consult-start {
  padding: 10px 16px;
  background: var(--h-color-222);
  border-radius: 18px;
  cursor: pointer;
  margin-left: 40px;
}
body.agora header .time-box .extend-time {
  display: none;
}
body.agora header .time-box .consult-start {
  display: flex;
}
body.agora header .time-box .consult-start span {
  opacity: 0.5;
}
body.agora header .time-box .consult-start.active span {
  opacity: 1;
}
@media screen and (max-width: 979px) {
  body.agora header .time-box .extend-time,
  body.agora header .time-box .consult-start {
    margin-left: 10px;
  }
}
body.agora header .time-box.time-count .extend-time {
  display: flex;
  font-weight: bold;
}
body.agora header .time-box.time-count .extend-time > span {
  transform: translateY(-1px);
}
body.agora header .time-box.time-count .consult-start {
  display: none;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora header .time-box.time-count .extend-time,
  body.agora header .time-box .consult-start {
    padding: 6px 9px;
    border-radius: 13px;
    background: rgba(2, 2, 2, 0.4);
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
  }
  body.agora header .time-box.time-count .extend-time > span {
    transform: translateY(0px);
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora header .time-box.time-count .extend-time,
  body.agora header .time-box .consult-start {
    padding: 6px 9px;
    background: rgba(0, 0, 0, 0.4);
    position: static;
    right: 0;
    top: 0;
    transform: translateY(0);
  }
  body.agora header .time-box.time-count .extend-time > span {
    transform: translateY(0px);
  }
}
body.agora header .time-box .all-time::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 12px;
  opacity: 0.3;
  background: var(--h-color-fff);
  margin: 0 8px;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora header .time-box .all-time::after {
    margin: 0 4px;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora header .time-box .all-time::after {
    margin: 0 7px 0 5px;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora header .time-box .all-time::before {
    content: "";
    display: inline-block;
    width: 1px;
    height: 12px;
    opacity: 0.3;
    background: var(--h-color-fff);
    margin: 0 8px;
  }
}
body.agora header .time-box .i-clock {
  display: inline-block;
  width: 14px;
  height: 14px;
  background-size: cover;
  background-position: center;
  padding: 0;
}
body.agora header .time-box .i-clock-yel,
body.agora header .time-box .i-play-opacity,
body.agora header .time-box .i-play {
  display: inline-block;
  width: 16px;
  height: 16px;
  background-size: cover;
  background-position: center;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora header .time-box .i-clock-yel,
  body.agora header .time-box .i-play-opacity,
  body.agora header .time-box .i-play {
    width: 14px;
    height: 14px;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora header .time-box .i-clock-yel,
  body.agora header .time-box .i-play-opacity,
  body.agora header .time-box .i-play {
    width: 14px;
    height: 14px;
  }
}
body.agora .wrapper main {
  width: 100%;
  height: calc(100% - 120px);
  position: relative;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora .wrapper main {
    height: 100%;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .wrapper main {
    height: 100%;
  }
}
body.agora .wrapper main .counselor-screen.camera-on {
  background: var(--h-agora-counselor-screen-camera-on) center/cover !important;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora .wrapper main .counselor-screen.camera-on {
    background: var(--h-agora-counselor-screen-camera-on) center/cover !important;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .wrapper main .counselor-screen.camera-on {
    background: var(--h-agora-counselor-screen-camera-on) center/cover !important;
  }
}
body.agora .wrapper main .counselor-screen-container {
  width: calc(100% - 400px);
  height: 100%;
  background: #191919;
}
@media screen and (max-width: 837px) {
  body.agora .wrapper main .counselor-screen-container {
    width: 438px;
  }
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora .wrapper main .counselor-screen-container {
    width: 100%;
    background: var(--h-color-222);
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .wrapper main .counselor-screen-container {
    width: 100%;
    background: var(--h-color-222);
  }
}
body.agora .wrapper main .counselor-screen-container.landscape {
  padding: 52px 0;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora .wrapper main .counselor-screen-container.landscape {
    padding: 0;
  }
  body.agora .wrapper.mobile.split main .counselor-screen-container {
    height: 50%;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .wrapper main .counselor-screen-container.landscape {
    padding: 0;
  }
  body.agora .wrapper.mobile.split main .counselor-screen-container {
    width: 50%;
    height: 100%;
  }
}
body.agora .wrapper main .counselor-screen-container.share-fin {
  padding: 0 105px;
  position: relative;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora .wrapper main .counselor-screen-container.share-fin {
    padding: 108px 0 58px 0;
    z-index: 9999;
    background: var(--h-color-000);
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .wrapper main .counselor-screen-container.share-fin {
    padding: 0 74px;
    z-index: 9999;
    background: var(--h-color-000);
  }
}
body.agora .wrapper main .counselor-screen-container.share-fin::before {
  content: "";
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5019607843);
  z-index: 1350;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  pointer-events: none;
}
body.agora .wrapper main .counselor-screen-container .share-fin-container {
  display: none;
}
body.agora .wrapper main .counselor-screen-container.share-fin .share-fin-container {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--h-agora-screen-test-img) center/cover;
  position: relative;
  z-index: 1370;
}
body.agora .wrapper main .counselor-screen-container.share-fin .share-fin-container .share-fin-header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 72px;
  background: var(--h-color-000);
  z-index: 1400;
  padding: 0 24px;
}
body.agora .wrapper main .counselor-screen-container.share-fin .share-fin-container .share-fin-header > .d-flex {
  align-items: center;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora .wrapper main .counselor-screen-container.share-fin .share-fin-container .share-fin-header {
    height: 50px;
    background: var(--h-color-222);
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .wrapper main .counselor-screen-container.share-fin .share-fin-container .share-fin-header {
    height: 50px;
    background: var(--h-color-222);
  }
}
body.agora .wrapper main .counselor-screen-container.share-fin .share-fin-container .share-fin-header .i-screen-share {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin-right: 12px;
}
body.agora .wrapper main .counselor-screen-container.share-fin .share-fin-container .share-fin-header .share-fin-button-box {
  display: flex;
  align-items: center;
  gap: 16px;
  font-weight: bold;
}
body.agora .wrapper main .counselor-screen-container.share-fin .share-fin-container .share-fin-header .share-fin-button-box .share-fin-button {
  padding: 7px 16px;
  background: var(--h-color-222);
  border-radius: 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora .wrapper main .counselor-screen-container.share-fin .share-fin-container .share-fin-header .share-fin-button-box .share-fin-button.img-switch {
    display: none;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .wrapper main .counselor-screen-container.share-fin .share-fin-container .share-fin-header .share-fin-button-box .share-fin-button.img-switch {
    display: none;
  }
}
body.agora .wrapper main .counselor-screen-container.share-fin .share-fin-container .share-fin-header .share-fin-button-box .share-fin-button i {
  display: inline-block;
}
body.agora .wrapper main .counselor-screen-container.share-fin .share-fin-container .share-fin-button .i-img-switch {
  width: 19px;
  height: 15px;
}
body.agora .wrapper main .counselor-screen-container.share-fin .share-fin-container .share-fin-button .i-stop {
  width: 16px;
  height: 16px;
}
body.agora .wrapper main .counselor-screen-container .counselor-screen {
  width: 438px;
  height: 100%;
  background: #090909;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora .wrapper main .counselor-screen-container .counselor-screen {
    width: 100%;
    background: var(--h-color-222);
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .wrapper main .counselor-screen-container .counselor-screen {
    width: 100%;
    background: var(--h-color-222);
  }
}
body.agora .wrapper main .counselor-screen-container.landscape .counselor-screen {
  width: 100%;
  height: 100%;
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .wrapper main .counselor-screen-container.landscape .counselor-screen {
    height: 100%;
  }
}
body.agora .wrapper main .counselor-screen-container .counselor-screen h1 {
  margin-top: 24px;
  font-size: 1.25rem;
}
body.agora .wrapper main .counselor-screen .counselor-camera {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
body.agora .wrapper main .counselor-screen.camera-off .counselor-camera {
  display: flex;
}
body.agora .wrapper main .counselor-screen.camera-off .counselor-camera > img {
  max-width: 138px;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora .wrapper main .counselor-screen.camera-off .counselor-camera > img {
    width: 113px;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .wrapper main .counselor-screen.camera-off .counselor-camera > img {
    width: 100px;
  }
}
body.agora .wrapper main .counselor-screen .counselor-camera > span {
  margin-top: 20px;
  font-size: 1.25rem;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora .wrapper main .counselor-screen .counselor-camera > span {
    margin-top: 12px;
    font-size: 1rem;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .wrapper main .counselor-screen .counselor-camera > span {
    margin-top: 16px;
    font-size: 1rem;
  }
}
body.agora .wrapper main .my-screen-container {
  width: 400px;
  height: 100%;
  background: #212121;
  padding: 32px 16px;
}
@media screen and (max-width: 837px) {
  body.agora .wrapper main .my-screen-container {
    width: calc(100% - 438px);
  }
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora .wrapper main .my-screen-container {
    width: auto;
    height: auto;
    position: absolute;
    left: 0;
    bottom: 60px;
    background: none;
    padding: 20px 10px;
  }
  body.agora .wrapper.mobile.right-top main .my-screen-container {
    left: auto;
    right: 0;
  }
  body.agora .wrapper.mobile.left-bot main .my-screen-container {
    top: 75px;
    bottom: auto;
  }
  body.agora .wrapper.mobile.right-bot main .my-screen-container {
    left: auto;
    right: 0;
    top: 75px;
    bottom: auto;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .wrapper main .my-screen-container {
    width: auto;
    height: auto;
    position: absolute;
    left: 0;
    bottom: 0;
    background: none;
    padding: 20px 30px;
  }
  body.agora .wrapper.mobile.right-top main .my-screen-container {
    left: auto;
    right: 0;
  }
  body.agora .wrapper.mobile.left-bot main .my-screen-container {
    top: 40px;
    bottom: auto;
  }
  body.agora .wrapper.mobile.right-bot main .my-screen-container {
    left: auto;
    right: 0;
    top: 40px;
    bottom: auto;
  }
}
body.agora .wrapper main .my-screen-container .my-screen-box {
  width: 100%;
  height: 320px;
  z-index: 99;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora .wrapper.mobile.full main .my-screen-container .my-screen-box {
    display: none;
  }
  body.agora .wrapper main .my-screen-container .my-screen-box {
    width: 90px;
    height: 160px;
    position: fixed;
    left: 10px;
    top: 92px;
  }
  body.agora .wrapper.mobile.split main .my-screen-container .my-screen-box {
    width: 100%;
    height: 50%;
    left: 0;
    top: 50%;
    z-index: 1;
  }
  body.agora .wrapper.mobile.right-top main .my-screen-container .my-screen-box {
    left: auto;
    right: 10px;
  }
  body.agora .wrapper.mobile.left-bot main .my-screen-container .my-screen-box {
    top: auto;
    bottom: 80px;
  }
  body.agora .wrapper.mobile.right-bot main .my-screen-container .my-screen-box {
    top: auto;
    left: auto;
    right: 10px;
    bottom: 80px;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .wrapper.mobile.full main .my-screen-container .my-screen-box {
    display: none;
  }
  body.agora .wrapper main .my-screen-container .my-screen-box {
    width: 90px;
    height: 160px;
    position: fixed;
    left: 30px;
    top: 60px;
  }
  body.agora .wrapper.mobile.split main .my-screen-container .my-screen-box {
    width: 50%;
    height: 100%;
    left: auto;
    right: 0;
    top: 0;
    z-index: 1;
  }
  body.agora .wrapper.mobile.right-top main .my-screen-container .my-screen-box {
    left: auto;
    right: 10px;
  }
  body.agora .wrapper.mobile.left-bot main .my-screen-container .my-screen-box {
    top: auto;
    bottom: 10px;
  }
  body.agora .wrapper.mobile.right-bot main .my-screen-container .my-screen-box {
    top: auto;
    left: auto;
    right: 10px;
    bottom: 10px;
  }
}
body.agora .wrapper main .my-screen-box .my-camera {
  width: 180px;
  height: 100%;
  border-radius: 2px;
  background: var(--h-color-eee);
  color: var(--h-color-555);
  text-align: center;
}
body.agora .wrapper main .my-screen-box .my-camera > img {
  max-width: 133px;
  height: auto;
}
body.agora .wrapper main .my-screen-box .my-camera.camera-on {
  background: var(--h-agora-my-screen-camera-on) center/cover;
}
body.agora .wrapper main .my-screen-box .my-camera.camera-on > img,
body.agora .wrapper main .my-screen-box .my-camera.camera-on > span {
  display: none !important;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora .wrapper main .my-screen-box .my-camera {
    width: 100%;
  }
  body.agora .wrapper main .my-screen-box .my-camera > img {
    width: 67px;
    height: 58px;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .wrapper main .my-screen-box .my-camera {
    width: 100%;
  }
  body.agora .wrapper main .my-screen-box .my-camera > img {
    width: 67px;
    height: 58px;
  }
}
body.agora .wrapper main .my-screen-box .my-camera > span {
  margin-top: 7px;
}
body.agora .wrapper main .my-screen-box .my-camera > span.mobile {
  display: none;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora .wrapper main .my-screen-box .my-camera > span.pc {
    display: none;
  }
  body.agora .wrapper main .my-screen-box .my-camera > span.mobile {
    display: inline;
  }
  body.agora .wrapper main .my-screen-box .my-camera > span {
    margin-top: 13px;
    width: 50px;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .wrapper main .my-screen-box .my-camera > span.pc {
    display: none;
  }
  body.agora .wrapper main .my-screen-box .my-camera > span.mobile {
    display: inline;
  }
  body.agora .wrapper main .my-screen-box .my-camera > span {
    margin-top: 13px;
    width: 50px;
  }
}
body.agora .wrapper main .my-screen-box .my-camera.mic-off i.i-mic-off-opacity {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 28px;
  height: 28px;
  background-size: cover;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora .wrapper main .my-screen-box .my-camera.mic-off i.i-mic-off-opacity {
    right: 4px;
    bottom: 4px;
    width: 20px;
    height: 20px;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .wrapper main .my-screen-box .my-camera.mic-off i.i-mic-off-opacity {
    right: 4px;
    bottom: 4px;
    width: 20px;
    height: 20px;
  }
}
body.agora .wrapper main .my-screen-container .user-name {
  margin: 12px 0 33px;
  text-align: center;
  font-size: 1.5rem;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora .wrapper main .my-screen-container .user-name {
    display: none;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .wrapper main .my-screen-container .user-name {
    display: none;
  }
}
body.agora .wrapper main .my-screen-container .alert-box {
  width: 100%;
  height: auto;
  max-height: calc(100% - 389px);
  gap: 4px;
  overflow-y: auto;
  flex-direction: column;
}
body.agora .wrapper main .my-screen-container .alert-box::-webkit-scrollbar {
  width: 0px;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora .wrapper main .my-screen-container .alert-box {
    max-height: 128px;
    align-items: flex-start;
    position: relative;
    z-index: 99;
  }
  body.agora .wrapper.mobile.right-top main .my-screen-container .alert-box {
    align-items: flex-end;
  }
  body.agora .wrapper.mobile.right-bot main .my-screen-container .alert-box {
    align-items: flex-end;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .wrapper main .my-screen-container .alert-box {
    max-height: 68px;
    align-items: flex-start;
    position: relative;
    z-index: 99;
  }
  body.agora .wrapper.mobile.right-top main .my-screen-container .alert-box {
    align-items: flex-end;
  }
  body.agora .wrapper.mobile.right-bot main .my-screen-container .alert-box {
    align-items: flex-end;
  }
}
body.agora .wrapper main .my-screen-container .alert-box .alert {
  width: 100%;
  height: auto;
  line-height: 21px;
  background: #141414;
  border-radius: 4px;
  font-size: 0.9375rem;
  padding: 10px 9px 10px 35px;
  position: relative;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora .wrapper main .my-screen-container .alert-box .alert {
    line-height: 24px;
    padding: 4px 9px 4px 28px;
    background: rgba(0, 0, 0, 0.5019607843);
    border-radius: 2px;
    width: auto;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .wrapper main .my-screen-container .alert-box .alert {
    line-height: 24px;
    padding: 4px 9px 4px 28px;
    background: rgba(0, 0, 0, 0.5019607843);
    border-radius: 2px;
    width: auto;
  }
}
body.agora .wrapper main .my-screen-container .alert-box .alert::before {
  content: "";
  display: inline-block;
  background: var(--h-agora-icon-bell);
  width: 11px;
  height: 12px;
  position: absolute;
  left: 12px;
  top: 15px;
  background-size: cover;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora .wrapper main .my-screen-container .alert-box .alert::before {
    top: 11px;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .wrapper main .my-screen-container .alert-box .alert::before {
    top: 11px;
  }
}
body.agora .wrapper main .my-screen-container .alert-box .alert.consult-start::before {
  width: 14px;
  height: 14px;
  top: 15px;
  background: var(--h-agora-consult-start-alert) center/cover;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora .wrapper main .my-screen-container .alert-box .alert.consult-start::before {
    width: 12px;
    height: 12px;
    left: 10px;
    top: 8px;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .wrapper main .my-screen-container .alert-box .alert.consult-start::before {
    width: 12px;
    height: 12px;
    left: 10px;
    top: 8px;
  }
}
body.agora .wrapper main .my-screen-container .alert-box .alert > span,
body.agora .wrapper main .my-screen-container .alert-box .alert > p {
  opacity: 0.8;
  letter-spacing: -0.8px;
}
body.agora .loading-element {
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
body.agora .counselor-screen.loading .loading-element {
  display: flex;
}
body.agora .loading-container.ver2 {
  width: 115px;
  height: 110px;
  position: relative;
}
body.agora .loading-container.ver2 .roate-loading {
  width: 110px;
  height: 110px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
body.agora .loading-container.ver2 .roate-loading .loading-bar {
  transform-origin: 55px 55px;
  animation: spinner 1.5s ease-in infinite;
}
body.agora .loading-container.ver2 .roate-loading .loading-bar::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 50px;
  width: 10px;
  height: 19px;
  border-radius: 10px;
  background: #333;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora .loading-container.ver2 {
    width: 92px;
    height: 96px;
  }
  body.agora .loading-container.ver2 .roate-loading {
    width: 92px;
    height: 92px;
  }
  body.agora .loading-container.ver2 .roate-loading .loading-bar {
    transform-origin: 46px 46px;
  }
  body.agora .loading-container.ver2 .roate-loading .loading-bar::after {
    left: 41px;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .loading-container.ver2 {
    width: 80px;
    height: 84px;
  }
  body.agora .loading-container.ver2 .roate-loading {
    width: 80px;
    height: 80px;
  }
  body.agora .loading-container.ver2 .roate-loading .loading-bar {
    transform-origin: 40px 40px;
  }
  body.agora .loading-container.ver2 .roate-loading .loading-bar::after {
    left: 35px;
  }
}
body.agora .loading-container.ver2 .roate-loading .loading-bar.active::after {
  background: #fff;
}
body.agora .loading-container.ver2 .roate-loading .loading-bar:nth-child(1) {
  transform: rotate(0deg);
  animation-delay: -1.35s;
}
body.agora .loading-container.ver2 .roate-loading .loading-bar:nth-child(2) {
  transform: rotate(36deg);
  animation-delay: -1.2s;
}
body.agora .loading-container.ver2 .roate-loading .loading-bar:nth-child(3) {
  transform: rotate(72deg);
  animation-delay: -1.05s;
}
body.agora .loading-container.ver2 .roate-loading .loading-bar:nth-child(4) {
  transform: rotate(108deg);
  animation-delay: -0.9s;
}
body.agora .loading-container.ver2 .roate-loading .loading-bar:nth-child(5) {
  transform: rotate(144deg);
  animation-delay: -0.75s;
}
body.agora .loading-container.ver2 .roate-loading .loading-bar:nth-child(6) {
  transform: rotate(180deg);
  animation-delay: -0.6s;
}
body.agora .loading-container.ver2 .roate-loading .loading-bar:nth-child(7) {
  transform: rotate(216deg);
  animation-delay: -0.45s;
}
body.agora .loading-container.ver2 .roate-loading .loading-bar:nth-child(8) {
  transform: rotate(252deg);
  animation-delay: -0.3s;
}
body.agora .loading-container.ver2 .roate-loading .loading-bar:nth-child(9) {
  transform: rotate(288deg);
  animation-delay: -0.15s;
}
body.agora .loading-container.ver2 .roate-loading .loading-bar:nth-child(10) {
  transform: rotate(324deg);
  animation-delay: 0s;
}
body.agora .loading-container.ver2 span {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 1.625rem;
}
@keyframes spinner {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
body.agora .counselor-screen > .bg {
  display: none;
}
body.agora .counselor-screen.share-loading > .bg {
  content: "";
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  background: rgba(0, 0, 0, 0.5019607843);
  width: 100%;
  z-index: 1300;
}
body.agora .share-loading-element {
  display: none;
  flex-direction: column;
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 1500;
}
body.agora .counselor-screen.share-loading .share-loading-element {
  display: flex;
}
body.agora .share-loading-element .share-loading-button {
  font-weight: bold;
  width: 240px;
  height: 50px;
  line-height: 50px;
  background: var(--h-color-222);
  color: var(--h-color-fff);
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
}
body.agora .share-loading-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body.agora .share-loading-container > p {
  font-size: 1.25rem;
}
body.agora .share-loading-box {
  display: flex;
  justify-content: center;
  gap: 11px;
}
body.agora .share-loading-dot {
  width: 8px;
  height: 8px;
  background: var(--h-color-fff);
  border-radius: 50%;
  animation: dot 1.5s infinite linear alternate;
  opacity: 0.4;
}
body.agora .share-loading-dot:nth-child(1) {
  animation-delay: 0;
}
body.agora .share-loading-dot:nth-child(2) {
  animation-delay: 0.75s;
}
body.agora .share-loading-dot:nth-child(3) {
  animation-delay: 1.5s;
}
@keyframes dot {
  0% {
    opacity: 1;
  }
  50%, 100% {
    opacity: 0.4;
  }
}
body.agora .wrapper footer {
  width: 100%;
  height: 48px;
  background: var(--h-color-000);
  padding: 0 24px;
  position: relative;
  color: var(--h-color-ccc);
}
body.agora .wrapper footer#mobile {
  height: 70px;
  color: var(--h-color-fff);
  background: none;
  display: none;
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 99;
}
@media screen and (max-width: 979px) {
  body.agora .wrapper footer#pc {
    justify-content: flex-start;
  }
}
@media screen and (max-width: 819px) {
  body.agora .wrapper footer#pc {
    padding: 0 10px;
  }
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora .wrapper footer#pc {
    display: none;
  }
  body.agora .wrapper footer#mobile {
    display: flex;
    padding: 0 30px;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .wrapper footer#pc {
    display: none;
  }
  body.agora .wrapper footer#mobile {
    display: flex;
    padding: 0 30px;
  }
  body.agora .wrapper.mobile.right-top footer#mobile {
    left: 0;
    right: auto;
  }
  body.agora .wrapper.mobile.right-bot footer#mobile {
    left: 0;
    right: auto;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .wrapper footer#mobile {
    display: flex;
    left: auto;
    bottom: auto;
    right: 16px;
    top: 50px;
    width: 70px;
    padding: 0;
    height: auto;
  }
}
body.agora .wrapper footer#pc .list-item-container {
  gap: 32px;
}
@media screen and (max-width: 979px) {
  body.agora .wrapper footer#pc .list-item-container {
    gap: 18px;
  }
}
@media screen and (max-width: 819px) {
  body.agora .wrapper footer#pc .list-item-container {
    gap: 10px;
  }
}
body.agora .wrapper footer#mobile .list-item-container {
  width: 100%;
  justify-content: space-between;
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .wrapper footer#mobile .list-item-container {
    flex-direction: column;
    height: 100%;
    padding: 20px 0;
    gap: 24px;
  }
}
body.agora .wrapper footer .list-item-container > li {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  position: relative;
}
body.agora .wrapper footer#mobile .list-item-container > li {
  flex-direction: column;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora .wrapper footer#mobile .list-item-container > li {
    height: 41px;
    justify-content: space-between;
  }
}
body.agora .wrapper footer#mobile .list-item-container > li .more-container {
  display: none;
  position: absolute;
  right: -5px;
  bottom: 50px;
  width: 180px;
  height: auto;
  background: var(--h-color-fff);
  z-index: 1200;
  border-radius: 6px;
  color: var(--h-color-222);
  flex-direction: column;
  padding: 12px;
  font-size: 1rem;
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .wrapper footer#mobile .list-item-container > li .more-container {
    right: -10px;
  }
  body.agora .wrapper.mobile.right-top footer#mobile .list-item-container > li .more-container,
  body.agora .wrapper.mobile.right-bot footer#mobile .list-item-container > li .more-container {
    right: auto;
    left: -5px;
  }
}
body.agora .wrapper footer#mobile .list-item-container > li.landscape-fixed.active .more-container {
  display: flex;
  cursor: auto;
}
body.agora .wrapper footer#mobile .list-item-container > li .more-container > li {
  width: 100%;
  height: 37px;
  display: flex;
  align-items: center;
  position: relative;
  gap: 12px;
  cursor: pointer;
}
body.agora .wrapper footer#mobile .list-item-container > li.landscape-fixed .bg {
  display: none;
}
body.agora .wrapper footer#mobile .list-item-container > li.landscape-fixed.active .bg {
  display: block;
  content: "";
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5019607843);
  z-index: 999;
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .wrapper footer#mobile .list-item-container > li.landscape-fixed {
    position: fixed;
    left: inherit;
    bottom: 20px;
  }
}
body.agora .wrapper footer .list-item-container i,
body.agora .wrapper footer .i-setting-box i,
body.agora .wrapper footer#mobile .landscape-fixed i {
  display: inline-block;
}
body.agora .wrapper footer .list-item-container i {
  background-size: cover;
}
body.agora .wrapper footer .list-item-container .i-cam-on {
  width: 18px;
  height: 12px;
}
body.agora .wrapper footer .list-item-container .i-cam-off {
  width: 18px;
  height: 16.6px;
}
body.agora .wrapper footer#mobile .list-item-container .i-cam-on {
  width: 19.6px;
  height: 18px;
}
body.agora .wrapper footer#mobile .list-item-container .i-cam-off {
  width: 19.6px;
  height: 18px;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora .wrapper footer#mobile .list-item-container .i-cam-on {
    width: 25.2px;
    height: 21.6px;
  }
  body.agora .wrapper footer#mobile .list-item-container .i-cam-off {
    width: 25.2px;
    height: 21.6px;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .wrapper footer#mobile .list-item-container .i-cam-on {
    width: 25.2px;
    height: 18px;
  }
  body.agora .wrapper footer#mobile .list-item-container .i-cam-off {
    width: 25.2px;
    height: 21.6px;
  }
}
body.agora .wrapper footer .list-item-container .i-mic-on {
  width: 17px;
  height: 18px;
}
body.agora .wrapper footer .list-item-container .i-mic-off {
  width: 17px;
  height: 16.1px;
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .wrapper footer .list-item-container .i-mic-on {
    width: 20.4px;
    height: 21.6px;
  }
  body.agora .wrapper footer .list-item-container .i-mic-off {
    width: 22.8px;
    height: 21.6px;
  }
}
body.agora .wrapper footer#mobile .list-item-container .i-mic-on {
  width: 20.4px;
  height: 21.6px;
}
body.agora .wrapper footer#mobile .list-item-container .i-mic-off {
  width: 22.8px;
  height: 21.6px;
}
body.agora .wrapper footer .list-item-container .i-switch {
  width: 17px;
  height: 17px;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora .wrapper footer .list-item-container .i-switch {
    width: 22.8px;
    height: 22.8px;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .wrapper footer .list-item-container .i-switch {
    width: 22.8px;
    height: 22.8px;
  }
}
body.agora .wrapper footer .list-item-container .i-manage {
  width: 18px;
  height: 15px;
}
body.agora .wrapper footer .list-item-container .i-screen-share {
  width: 16px;
  height: 16px;
}
body.agora .wrapper footer .list-item-container .i-capture {
  width: 18px;
  height: 18px;
}
body.agora .wrapper footer .list-item-container .i-chat {
  width: 18px;
  height: 17px;
  padding: 0;
}
body.agora .wrapper footer#mobile .landscape-fixed .i-manage-b {
  width: 16px;
  height: 14px;
}
body.agora .wrapper footer#mobile .landscape-fixed .i-screen-share-b {
  width: 14px;
  height: 14px;
}
body.agora .wrapper footer#mobile .landscape-fixed .i-capture-b {
  width: 18px;
  height: 18px;
}
body.agora .wrapper footer#mobile .landscape-fixed .i-chat-b {
  width: 17px;
  height: 16px;
}
body.agora .wrapper footer#mobile .landscape-fixed .i-setting-b {
  width: 17px;
  height: 17px;
}
body.agora .wrapper footer#mobile .landscape-fixed .i-switch-b {
  width: 17px;
  height: 17px;
}
body.agora .wrapper footer#pc .list-item-container .chat-count,
body.agora .wrapper footer#mobile .landscape-fixed .chat-count {
  display: block;
  min-width: 20px;
  min-height: 20px;
  line-height: 20px;
  background: #c41e1e;
  text-align: center;
  font-size: 0.6875rem;
  font-weight: bold;
  padding: 0px 5px;
  border-radius: min(50%, 10px);
  color: var(--h-color-fff);
}
body.agora .wrapper footer#mobile .landscape-fixed .chat-count {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
@media screen and (max-width: 819px) {
  body.agora .wrapper footer#pc .list-item-container .chat-count {
    position: absolute;
    left: 100%;
    top: -7px;
  }
}
body.agora .wrapper footer .list-item-container .i-more {
  width: 28.6px;
  height: 8.4px;
  margin-top: 6px;
  position: relative;
}
body.agora .wrapper footer .list-item-container > li.landscape-fixed.active .i-more {
  z-index: 9999;
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .wrapper footer .list-item-container .i-more {
    margin-bottom: 6px;
  }
}
body.agora .wrapper footer .list-item-container .i-more.new::after {
  content: "";
  display: block;
  position: absolute;
  left: 100%;
  top: 90%;
  width: 14px;
  height: 14px;
  background: var(--h-agora-footer-new-icon) #ff0000;
  border-radius: 50%;
  background-position: center;
  background-size: 6px 6px;
}
body.agora .wrapper footer .i-setting {
  width: 16px;
  height: 16px;
  background-size: cover;
}
body.agora .wrapper footer .list-item-container > li.landscape-fixed.active span {
  position: relative;
  z-index: 9999;
}
body.agora .wrapper footer .list-item-container > li > span,
body.agora .wrapper footer .i-setting-box span {
  font-size: 0.875rem;
}
body.agora .wrapper footer .i-setting-box {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
@media screen and (max-width: 819px) {
  body.agora .wrapper footer .i-setting-box {
    right: 10px;
  }
}
body.agora .wrapper main .my-screen-box .my-camera {
  position: relative;
}
body.agora .wrapper main .my-screen-box .my-camera.mic-off i.i-mic-off-opacity {
  z-index: 9999;
}

body.agora {
  /* all css popup */
  /* agora */
}
body.agora .popup-wrapper {
  margin: 0 auto;
  max-width: 720px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 50px 0;
  background: var(--h-color-fff);
  color: var(--h-color-000);
  font-size: 1rem;
}
body.agora .popup-open {
  flex: 0 0 calc((100% - 20px) / 3);
  border: 1px solid var(--h-main-color);
  display: inline-block;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 15px 10px;
  font-size: 0.8rem;
}
body.agora .popup-bg,
body.agora .popup-bg .bg {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
body.agora .popup-bg {
  display: none;
  z-index: 9;
  font-size: 1rem;
  z-index: 11111;
  color: var(--h-color-222);
}
body.agora .popup-bg .bg {
  background: rgba(0, 0, 0, 0.5019607843);
  z-index: 1;
}
body.agora .popup-bg .popup-box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  z-index: 10;
  background: var(--h-color-fff);
  text-align: center;
  border-radius: 10px;
  overflow: hidden;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora .popup-bg .popup-box {
    width: 328px;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .popup-bg .popup-box {
    width: 328px;
  }
  body.agora .popup-bg .popup-box.scroll {
    height: calc(100% - 40px);
  }
}
body.agora .popup-bg .popup-top {
  width: 100%;
  height: 40px;
  line-height: 40px;
  padding: 0 16px;
  color: var(--h-color-555);
  background: var(--h-color-e9e);
  text-align: left;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora .popup-bg .popup-top h2 {
    font-size: 0.9285rem;
  }
}
body.agora .popup-bg .popup-bottom {
  width: 100%;
  padding: 0 16px;
  display: block;
}
body.agora .popup-bg .popup-bottom.extend {
  padding: 0;
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .popup-bg .popup-box.scroll .popup-bottom {
    height: calc(100% - 44px);
    overflow: auto;
  }
}
body.agora .popup-bg .popup-bottom .popup-inner-top {
  padding: 30px 0;
  line-height: 28px;
  width: 100%;
}
body.agora .popup-bg .popup-bottom.extend .popup-inner-top {
  padding: 16px 0;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora .popup-bg .popup-bottom .popup-inner-top {
    line-height: 24px;
  }
}
body.agora .popup-bg .popup-bottom .popup-inner-bottom {
  padding: 0 0 16px;
  display: flex;
  gap: 12px;
  width: 100%;
}
body.agora .popup-bg .popup-bottom.extend .popup-inner-top .popup-inner-box-top,
body.agora .popup-bg .popup-bottom.extend .popup-inner-top .popup-inner-box-bottom {
  padding: 0 16px;
  text-align: left;
}
body.agora .popup-bg .popup-bottom.extend .extend-radio-wrap {
  margin-top: 14px;
  display: flex;
  gap: 30px;
}
body.agora .popup-bg .popup-bottom.extend .popup-inner-bottom {
  padding: 0 16px 16px;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora .popup-bg .popup-bottom.extend .extend-radio-wrap {
    gap: 20px;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .popup-bg .popup-bottom.extend .extend-radio-wrap {
    gap: 20px;
  }
}
body.agora .popup-bg .popup-bottom.extend .extend-radio-wrap input[name=extend-time] {
  display: none;
}
body.agora .popup-bg .popup-bottom.extend .extend-radio-wrap input[name=extend-time]:checked + .extend-time::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--h-color-222);
}
body.agora .popup-bg .popup-bottom.extend .extend-radio-wrap .extend-time {
  position: relative;
  padding-left: 35px;
  cursor: pointer;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora .popup-bg .popup-bottom.extend .extend-radio-wrap .extend-time {
    padding-left: 30px;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .popup-bg .popup-bottom.extend .extend-radio-wrap .extend-time {
    padding-left: 30px;
  }
}
body.agora .popup-bg .popup-bottom.extend .extend-radio-wrap .extend-time::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border: 1px solid var(--h-color-ddd);
  border-radius: 50%;
}
body.agora .popup-bg .popup-bottom.extend .extend-coin-wrap {
  display: flex;
  justify-content: space-between;
  text-align: center;
  margin-top: 16px;
  padding: 16px 0;
  border-top: 1px solid var(--h-color-e9e);
  font-weight: bold;
}
body.agora .popup-bg .popup-bottom.extend .extend-coin-wrap > .extend-coin-box {
  width: 50%;
}
body.agora .popup-bg .popup-bottom.extend .extend-coin-wrap > .extend-coin-box > h1 {
  font-size: 1.75rem;
  line-height: normal;
}
body.agora .popup-bg .popup-bottom.extend .extend-coin-wrap > .popup-vertical-line {
  width: 1px;
  height: 68px;
  background: var(--h-color-e9e);
}
body.agora .popup-bottom .popup-inner-bottom .popup-btn {
  display: inline-block;
  width: 100%;
  height: 50px;
  line-height: 50px;
  font-weight: bold;
  border-radius: 4px;
  color: var(--h-color-fff);
  margin: 0;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora .popup-bottom .popup-inner-bottom .popup-btn {
    height: 46px;
    line-height: 46px;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .popup-bottom .popup-inner-bottom .popup-btn {
    height: 46px;
    line-height: 46px;
  }
}
body.agora .popup-bg .popup-bottom .popup-line {
  width: 100%;
  height: 1px;
  margin: 16px 0;
  background: var(--h-color-e9e);
}
body.agora .popup-bg .popup-bottom.extend .popup-line {
  width: 100%;
  height: 6px;
  background: #f5f5f5;
  border-top: 1px solid var(--h-color-e9e);
  border-bottom: 1px solid var(--h-color-e9e);
}
body.agora .popup-bottom .popup-inner-bottom .popup-btn,
body.agora .popup-bottom .popup-inner-bottom .popup-btn.close {
  background: #c1c1c1;
}
body.agora .popup-bottom .popup-inner-bottom .popup-btn.active {
  background: var(--h-main-color);
}
body.agora .popup-bottom .popup-inner-bottom .popup-btn.report {
  background: #da4841;
}
body.agora .screen-alert {
  display: none;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora .screen-alert {
    display: block;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .screen-alert {
    display: block;
  }
}
body.agora .more-popup .popup-box {
  left: auto;
  right: 0;
  top: auto;
  bottom: 48px;
  transform: none;
  border-radius: 10px 10px 0 0px;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora .more-popup .popup-box {
    top: auto;
    right: auto;
    left: 50%;
    bottom: 0;
    width: 100%;
    transform: translateX(-50%);
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .more-popup .popup-box {
    top: auto;
    right: auto;
    left: 50%;
    bottom: 0;
    width: 360px;
    transform: translateX(-50%);
  }
}
body.agora .more-popup .popup-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
body.agora .more-popup.chat-popup .popup-top {
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
body.agora .more-popup .exit-box {
  cursor: pointer;
}
body.agora .exit-box {
  font-weight: 400;
}
body.agora .more-popup .exit-box span {
  font-size: 0.875rem;
  margin-right: 4px;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora .more-popup .exit-box span {
    font-size: 0.75rem;
    margin-right: 6px;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .more-popup .exit-box span {
    font-size: 0.75rem;
    margin-right: 6px;
  }
}
body.agora .more-popup .exit-box i,
body.agora .more-popup .personal i {
  display: inline-block;
  cursor: pointer;
}
body.agora .more-popup .exit-box .i-exit-b {
  width: 10px;
  height: 10px;
  background-size: cover;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora .more-popup .exit-box .i-exit-b {
    width: 8px;
    height: 8px;
    background-size: cover;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .more-popup .exit-box .i-exit-b {
    width: 8px;
    height: 8px;
    background-size: cover;
  }
}
body.agora .more-popup .popup-bottom .popup-inner-top {
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .more-popup .popup-bottom .popup-inner-top {
    gap: 10px;
  }
}
body.agora .chat-popup .popup-bottom .popup-inner-top {
  max-height: calc(100vh - 246px);
  overflow: auto;
  margin: 0 0 0 -3px;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora .chat-popup .popup-bottom .popup-inner-top {
    max-height: calc(100vh - 160px);
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .chat-popup .popup-bottom .popup-inner-top {
    max-height: calc(100vh - 134px);
  }
}
body.agora .more-popup.chat-popup .popup-bottom .popup-inner-bottom {
  padding: 14px 16px 14px;
  height: 70px;
  background: var(--h-color-eee);
  align-items: center;
  gap: 16px;
}
body.agora .chat-popup .popup-bottom .popup-inner-top::-webkit-scrollbar {
  width: 5px;
  background: var(--h-color-e9e);
}
body.agora .chat-popup .popup-bottom .popup-inner-top::-webkit-scrollbar-thumb {
  background: #c2c2c2;
  border-radius: 3px;
}
body.agora .chat-popup .popup-bottom {
  padding: 0;
}
body.agora .more-popup.chat-popup .popup-bottom .popup-inner-top {
  padding: 16px 27px 16px 30px;
  font-size: 0.9375rem;
  text-align: left;
  position: relative;
}
body.agora .more-popup.chat-popup .popup-bottom .writing {
  display: block;
  position: absolute;
  left: 16px;
  bottom: 85px;
  width: 70px;
  height: 32px;
  background: var(--h-agora-chat-writing) center/cover;
  z-index: 99;
}
body.agora .more-popup.chat-popup .popup-bottom .popup-inner-top .my-chat,
body.agora .more-popup.chat-popup .popup-bottom .popup-inner-top .opponent-chat {
  display: flex;
  position: relative;
}
body.agora .more-popup.chat-popup .popup-bottom .popup-inner-top .my-chat {
  gap: 8px;
}
body.agora .more-popup.chat-popup .popup-bottom .popup-inner-top .opponent-chat {
  flex-wrap: wrap;
}
body.agora .more-popup.chat-popup .popup-bottom .popup-inner-top .read-chk {
  color: var(--h-main-color);
}
body.agora .more-popup.chat-popup .popup-bottom .popup-inner-top .read-chk.read {
  color: var(--h-color-999);
}
body.agora .more-popup.chat-popup .popup-bottom .popup-inner-top .chat-text {
  padding: 12px;
  position: relative;
  line-height: 21px;
}
body.agora .more-popup.chat-popup .popup-bottom .popup-inner-top .chat-text,
body.agora .more-popup.chat-popup .popup-bottom .popup-inner-top .chat-img,
body.agora .more-popup.chat-popup .popup-bottom .popup-inner-top .chat-file {
  max-width: 286px;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora .more-popup.chat-popup .popup-bottom .popup-inner-top .chat-text,
  body.agora .more-popup.chat-popup .popup-bottom .popup-inner-top .chat-img,
  body.agora .more-popup.chat-popup .popup-bottom .popup-inner-top .chat-file {
    max-width: 250px;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .more-popup.chat-popup .popup-bottom .popup-inner-top .chat-text,
  body.agora .more-popup.chat-popup .popup-bottom .popup-inner-top .chat-img,
  body.agora .more-popup.chat-popup .popup-bottom .popup-inner-top .chat-file {
    max-width: 250px;
  }
}
body.agora .more-popup.chat-popup .popup-bottom .popup-inner-top .my-chat .chat-text {
  background: #7f5bc8;
  color: var(--h-color-fff);
  border-radius: 4px 0 4px 4px;
}
body.agora .more-popup.chat-popup .popup-bottom .popup-inner-top .my-chat .chat-text::after {
  width: 11px;
  height: 10px;
  content: "";
  position: absolute;
  left: calc(100% - 1px);
  top: 0;
  background: var(--h-agora-my-chat-corner) center/cover;
}
body.agora .more-popup.chat-popup .popup-bottom .popup-inner-top .opponent-chat .opponent-box {
  display: flex;
  gap: 8px;
  width: 100%;
}
body.agora .more-popup.chat-popup .popup-bottom .popup-inner-top .opponent-chat .chat-text {
  background: var(--h-color-e9e);
  border-radius: 0 4px 4px 4px;
  order: 1;
}
body.agora .more-popup.chat-popup .popup-bottom .popup-inner-top .opponent-chat .chat-text::after {
  width: 11px;
  height: 10px;
  content: "";
  position: absolute;
  right: calc(100% - 1px);
  top: 0;
  background: var(--h-agora-opponent-chat-corner) center/cover;
}
body.agora .more-popup.chat-popup .popup-bottom .popup-inner-top .chat-img {
  width: 154px;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
}
body.agora .more-popup.chat-popup .popup-bottom .popup-inner-top .chat-img img {
  width: 100%;
  display: block;
}
body.agora .more-popup.chat-popup .popup-bottom .popup-inner-top .chat-file {
  padding: 10px 14px;
  background: #e6f2ff;
  border-radius: 4px;
  line-height: 20px;
}
body.agora .chat-popup .popup-bottom .popup-inner-top .save-button,
body.agora .chat-popup .popup-bottom .popup-inner-top .close-button {
  width: 166px;
  height: 36px;
  line-height: 36px;
  background: var(--h-main-color);
  margin-top: 10px;
  color: var(--h-color-fff);
  text-align: center;
  border-radius: 4px;
  cursor: pointer;
  display: inline-block;
  margin-right: 10px;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora .chat-popup .popup-bottom .popup-inner-top .save-button,
  body.agora .chat-popup .popup-bottom .popup-inner-top .close-button {
    height: 30px;
    line-height: 30px;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .chat-popup .popup-bottom .popup-inner-top .save-button,
  body.agora .chat-popup .popup-bottom .popup-inner-top .close-button {
    height: 30px;
    line-height: 30px;
  }
}
body.agora .chat-popup .popup-bottom .popup-inner-top .button-box .close-button,
body.agora .chat-popup .popup-bottom .popup-inner-top .button-box .save-button {
  width: 78px;
}
body.agora .chat-popup .popup-bottom .popup-inner-top .button-box .close-button {
  background: #c1c1c1;
}
body.agora .more-popup.chat-popup .popup-bottom .popup-inner-top .my-chat {
  justify-content: flex-end;
  flex-wrap: wrap;
}
body.agora .more-popup.chat-popup .popup-bottom .popup-inner-top .my-chat .my-chat-box {
  display: flex;
  gap: 8px;
  width: 100%;
  justify-content: flex-end;
}
body.agora .more-popup.chat-popup .popup-bottom .popup-inner-top .my-chat .save-button {
  margin-right: 0;
}
body.agora .more-popup.chat-popup .popup-bottom .popup-inner-top .chat-state {
  font-size: 0.6875rem;
  display: flex;
  flex-direction: column;
  line-height: 18px;
  color: var(--h-color-999);
}
body.agora .more-popup.chat-popup .popup-bottom .popup-inner-top .my-chat .chat-state {
  align-items: flex-end;
  justify-content: flex-end;
}
body.agora .more-popup.chat-popup .popup-bottom .popup-inner-top .opponent-chat .chat-state {
  align-items: flex-start;
  order: 2;
  justify-content: flex-end;
}
body.agora .more-popup.chat-popup .popup-bottom .popup-inner-top .opponent-name {
  font-size: 0.8125rem;
  margin-bottom: 2px;
  flex: 0 0 100%;
}
body.agora .more-popup.chat-popup .popup-box.client .opponent-chat {
  padding-left: 54px;
}
body.agora .more-popup.chat-popup .popup-box.client .opponent-chat .opponent-img {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 0;
  top: 5px;
  border-radius: 50%;
  background: #b89d78;
  z-index: 9;
}
body.agora .more-popup.chat-popup .popup-box.client .opponent-chat .opponent-img img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
body.agora .more-popup.chat-popup i {
  display: inline-block;
  cursor: pointer;
}
body.agora .more-popup.chat-popup .i-clip {
  width: 21px;
  height: 24px;
  background-position: center;
}
body.agora .more-popup.chat-popup .i-input {
  width: 30px;
  height: 30px;
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
}
body.agora .more-popup.chat-popup .chat-input-box {
  position: relative;
  width: calc(100% - 37px);
}
body.agora .more-popup.chat-popup .chat-input-box input {
  width: 100%;
  height: 42px;
  border-radius: 21px;
  padding-left: 20px;
  padding-right: 40px;
  font-size: 0.9375rem;
  border: 1px solid var(--h-color-ddd);
  font-family: var(--h-body-font-family);
}
body.agora .more-popup .personal {
  display: flex;
  justify-content: space-between;
  padding: 0 5px;
}
body.agora .more-popup .personal h3 {
  flex: 1 0 auto;
  text-align: left;
  padding-left: 10px;
}
body.agora .more-popup .personal .i-mic-on-b {
  width: 20px;
  height: 18px;
  background-size: 17px 18px !important;
  background-position: center;
}
body.agora .more-popup .personal .i-mic-off-b {
  width: 20px;
  height: 18px;
  background-size: cover;
}
body.agora .more-popup .popup-bottom .popup-inner-bottom {
  padding: 0 0 16px;
}
body.agora .screen-share-popup {
  display: none;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora .screen-share-popup {
    display: none !important;
  }
}
body.agora .screen-share-popup .popup-bottom .popup-inner-top {
  max-height: calc(100vh - 246px);
  overflow: auto;
  padding: 0 0 0 7px;
  margin: 20px 0px 20px -7px;
}
body.agora .screen-share-popup .popup-inner-top::-webkit-scrollbar {
  width: 5px;
  background: var(--h-color-e9e);
}
body.agora .screen-share-popup .popup-inner-top::-webkit-scrollbar-thumb {
  background: #c2c2c2;
  border-radius: 3px;
}
body.agora .screen-share-popup .popup-inner-top h1 {
  font-size: 1.25rem;
}
body.agora .screen-share-popup .popup-inner-top .screen-box {
  padding: 0 86px;
  display: flex;
  justify-content: center;
}
body.agora .screen-share-popup .popup-inner-top .screen-box input {
  display: none;
}
body.agora .screen-share-popup .popup-inner-top .screen-box input:checked + label > .screen-img::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7019607843);
}
body.agora .screen-share-popup .popup-inner-top .screen-box input:checked + label > .screen-img::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  background: var(--h-agora-screen-check-icon) center/cover;
}
body.agora .screen-share-popup .popup-inner-top .screen-box label {
  display: block;
  cursor: pointer;
}
body.agora .screen-share-popup .popup-inner-top .screen-box label .screen-img {
  width: 216px;
  height: 144px;
  position: relative;
}
body.agora .screen-share-popup .popup-inner-top .screen-box span {
  font-weight: bold;
  margin-top: 4px;
  display: inline-block;
}
body.agora .screen-share-popup .popup-bottom {
  padding: 0;
}
body.agora .screen-share-popup .popup-bottom .popup-inner-bottom {
  padding: 16px;
}
body.agora .screen-share-popup .screen-img1 {
  background: var(--h-agora-screen-test-img) center/cover;
}
body.agora .screen-share-popup .screen-img2 {
  background: var(--h-agora-my-screen-camera-on) center/cover;
}
body.agora .screen-share-popup .screen-img3 {
  background: var(--h-agora-counselor-screen-camera-on) center/cover;
}
body.agora .capture-popup .screen-img {
  width: 368px;
  height: 207px;
  margin-bottom: 10px;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora .capture-popup .screen-img {
    width: 170px;
    height: 300px;
    margin: 0 auto 10px;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .capture-popup .screen-img {
    width: 170px;
    height: 300px;
    margin: 0 auto 10px;
  }
}
body.agora .report-radio-wrap {
  display: none;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 10px;
}
body.agora .capture-popup.report .report-radio-wrap {
  display: flex;
}
body.agora .report-radio-wrap .report-radio {
  text-align: left;
}
body.agora .report-radio-wrap .report-radio input {
  display: none;
}
body.agora .report-radio-wrap .report-radio > label {
  position: relative;
  padding-left: 30px;
}
body.agora .report-radio-wrap .report-radio > label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: 1px solid var(--h-color-ddd);
  border-radius: 50%;
}
body.agora .report-radio-wrap .report-radio input[name=report]:checked + label::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--h-color-222);
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora .capture-popup.report .popup-inner-top {
    flex-direction: row;
    padding: 20px 0;
  }
  body.agora .capture-popup.report .popup-inner-top .screen-img {
    margin: 0 0 10px;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .capture-popup.report .popup-inner-top {
    flex-direction: row;
  }
}
body.agora .more-popup.setting-popup .popup-bottom .popup-inner-top {
  padding: 20px 0 16px;
}
body.agora .more-popup.setting-popup .popup-bottom .popup-inner-bottom {
  padding: 0;
  text-align: center;
  margin-top: 30px;
}
body.agora .setting-popup .setting-wrap-button {
  width: 100%;
  height: 48px;
  line-height: 48px;
  text-align: center;
  color: var(--h-color-555);
  display: flex;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora .setting-popup .setting-wrap-button {
    height: 38px;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .setting-popup .setting-wrap-button {
    height: 38px;
  }
}
body.agora .setting-popup .setting-wrap-button button {
  width: 100%;
  height: 100%;
  cursor: pointer;
  font-family: var(--h-body-font-family);
  background: #f1f1f1;
  border: 1px solid transparent;
  border-radius: 2px;
}
body.agora .setting-popup .setting-wrap-button button#screen-wrap {
  display: none;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora .setting-popup .setting-wrap-button button#screen-wrap {
    display: block;
  }
  body.agora .setting-popup .setting-wrap-button button {
    width: 50%;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .setting-popup .setting-wrap-button button#screen-wrap {
    display: block;
  }
  body.agora .setting-popup .setting-wrap-button button {
    width: 50%;
  }
}
body.agora .setting-popup .setting-wrap-button button.active {
  border: 1px solid var(--h-color-222);
  background: var(--h-color-fff);
  font-weight: bold;
}
body.agora .setting-popup .setting-common-wrap {
  text-align: left;
}
body.agora .setting-popup .setting-common-wrap {
  display: none;
}
body.agora .setting-popup .setting-common-wrap.wrap-on {
  display: block;
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora .setting-popup .screen-wrap {
    overflow: auto;
    max-height: calc(100vh - 218px);
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .setting-popup .screen-wrap {
    overflow: auto;
    max-height: calc(100vh - 168px);
  }
}
body.agora .setting-popup .screen-set-inner-container {
  display: flex;
  flex-direction: column;
  padding-bottom: 16px;
  border-bottom: 1px solid #f1f1f1;
  margin-bottom: 10px;
}
body.agora .screen-set-inner-container:nth-child(3) {
  padding: 0;
  border: none;
  margin-bottom: 10px;
}
body.agora .setting-popup .screen-set-inner-container > p {
  margin-bottom: 8px;
  font-size: 0.875rem;
}
body.agora .setting-popup .screen-set-inner-container > p .f-bold {
  font-size: 1rem;
}
body.agora .setting-popup .screen-set-inner-container .screen-set-row {
  display: flex;
  gap: 24px;
}
body.agora .setting-popup .screen-set-inner-container input {
  display: none;
}
body.agora .setting-popup .screen-set-inner-container input[name=screen-set-box]:checked + label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5019607843);
  z-index: 3;
}
body.agora .setting-popup .screen-set-inner-container input[name=screen-set-box]:checked + label::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 22px;
  background: var(--h-agora-screen-check-icon) center/cover;
  z-index: 4;
}
body.agora .setting-popup .screen-set-inner-container .screen-set-box {
  overflow: hidden;
  position: relative;
  display: block;
  width: calc((100% - 72px) / 4);
  min-height: 76px;
  background: var(--h-color-bbb);
  border-radius: 2px;
  aspect-ratio: 60/71;
  cursor: pointer;
}
body.agora .setting-popup .screen-set-inner-container .screen-set-box span {
  display: block;
  position: absolute;
  width: 30%;
  min-height: 23px;
  aspect-ratio: 18/23;
  border-radius: 1px;
  background: var(--h-color-fff);
}
body.agora .setting-popup .screen-set-inner-container .screen-set-box.screen-left-top span {
  left: 5px;
  top: 5px;
}
body.agora .setting-popup .screen-set-inner-container .screen-set-box.screen-right-top span {
  right: 5px;
  top: 5px;
}
body.agora .setting-popup .screen-set-inner-container .screen-set-box.screen-right-bot span {
  right: 5px;
  bottom: 5px;
}
body.agora .setting-popup .screen-set-inner-container .screen-set-box.screen-left-bot span {
  left: 5px;
  bottom: 5px;
}
body.agora .setting-popup .screen-set-inner-container .screen-set-box.screen-middle-line span {
  width: 100%;
  height: 3px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  aspect-ratio: auto;
  min-height: auto;
}
body.agora .setting-popup .video-set-outer-container select {
  width: 100%;
  height: 50px;
  margin-top: 8px;
  border: 1px solid #e5e4e9;
  border-radius: 4px;
  padding: 13px 30px 13px 12px;
  font-size: 1rem;
  color: var(--h-color-222);
  background: var(--h-agora-select-arrow-bot) right 16px center/14px 8px;
  -moz-appearance: none;
       appearance: none;
  -webkit-appearance: none;
  font-family: var(--h-body-font-family);
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora .setting-popup .video-set-outer-container select {
    height: 46px;
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .setting-popup .video-set-outer-container select {
    height: 46px;
  }
}
body.agora .setting-popup .video-set-inner-container {
  padding-bottom: 10px;
  margin-bottom: 10px;
}
body.agora .setting-popup .video-set-inner-container:nth-child(2) {
  padding-bottom: 16px;
}
body.agora .setting-popup .video-set-outer-container select option {
  color: var(--h-color-222);
}
@media (orientation: portrait) and (max-width: 719px) {
  body.agora .setting-popup .video-wrap {
    overflow: auto;
    max-height: calc(100vh - 218px);
  }
}
@media (orientation: landscape) and (pointer: coarse) {
  body.agora .setting-popup .video-wrap {
    overflow: auto;
    max-height: calc(100vh - 168px);
  }
}

body.pg .aside ul li:not(.setting) .i-menu-home.on {
  background: url(/hong4/_img/pg/i_home_222.svg) no-repeat;
}
body.pg .aside ul li.active .i-menu-home.on {
  background: url(/hong4/_img/pg/i_home_fff.svg) no-repeat;
}
body.pg .list-item.purple {
  --h-list-btn-color: #6335b4;
}
body.pg .list-item.green {
  --h-list-btn-color: #00af79;
}
body.pg .list-item.purple .i-list-rookie,
body.pg .profile-info.purple .i-list-rookie {
  background: url(/hong4/_img/pg/i_new_pu.svg) no-repeat;
}
body.pg .list-item.purple .i-list-partner,
body.pg .profile-info.purple .i-list-partner {
  background: url(/hong4/_img/pg/i_partner_pu.svg) no-repeat;
}
body.pg .list-item.green .i-list-rookie,
body.pg .profile-info.green .i-list-rookie {
  background: url(/hong4/_img/pg/i_new_gr.svg) no-repeat;
}
body.pg .list-item.green .i-list-partner,
body.pg .profile-info.green .i-list-partner {
  background: url(/hong4/_img/pg/i_partner_gr.svg) no-repeat;
}
body.pg .list-item.purple .i-grade.on {
  background: url(/hong4/_img/pg/i_grade.svg) no-repeat;
}
body.pg .list-item.purple .i-review.on {
  background: url(/hong4/_img/pg/i_review.svg) no-repeat;
}
body.pg .list-item.purple .i-consult.on {
  background: url(/hong4/_img/pg/i_consult.svg) no-repeat;
}
body.pg .list-item.green .i-grade.on {
  background: url(/hong4/_img/pg/i_grade_gr.svg) no-repeat;
}
body.pg .list-item.green .i-review.on {
  background: url(/hong4/_img/pg/i_review_gr.svg) no-repeat;
}
body.pg .list-item.green .i-consult.on {
  background: url(/hong4/_img/pg/i_consult_gr.svg) no-repeat;
}
body.pg .header-list.snb,
body.pg .header.all-menu .header-list.snb {
  background: none;
  border: none;
  border-radius: 0;
  align-items: center;
}
body.pg .header-list.snb li.event-box a {
  font-size: 20px;
  padding: 0;
  font-weight: bold;
  border: none;
  margin-right: 12px;
}
@media screen and (max-width: 719px) {
  body.pg .header-list.snb li.event-box a {
    font-size: 14px;
    margin-right: 10px;
  }
}
body.pg .header-list.snb li.event-box.new a::after {
  top: 1px;
}
body.pg .header-list.snb li.event-box::after {
  content: "";
  display: inline-block;
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 12px;
  background: #cbd2e9;
}
body.pg .header-list.snb li.alarm-box a {
  display: flex;
  align-items: center;
  padding: 0;
  margin-left: 12px;
}
@media screen and (max-width: 719px) {
  body.pg .header-list.snb li.alarm-box a {
    margin-left: 10px;
  }
}
body.pg .header-list.snb .i-alarm {
  width: 22px;
  height: 22px;
}
@media screen and (max-width: 719px) {
  body.pg .header-list.snb .i-alarm {
    width: 16px;
    height: 16px;
  }
}
body.pg .header .aside {
  background: linear-gradient(148deg, #eddbff, #dfffe8);
}
body.pg .header .aside .aside-title {
  padding: 0 16px;
  margin-top: 16px;
}
@media screen and (max-width: 719px) {
  body.pg .header .aside .aside-title {
    margin-top: 14px;
  }
}
body.pg .header .aside .aside-title h4 {
  font-size: 1rem;
  line-height: 24px;
  font-weight: bold;
  color: #222222;
}
@media screen and (max-width: 719px) {
  body.pg .header .aside .aside-title h4 {
    line-height: 20px;
  }
}
body.pg .header .aside .aside-line {
  width: calc(100% - 32px);
  height: 1px;
  background: rgba(0, 0, 0, 0.06);
  margin: 0 auto;
}
body.pg .header .aside ul {
  gap: 10px;
}
@media screen and (max-width: 719px) {
  body.pg .header .aside ul {
    padding-top: 15px;
    padding-bottom: 15px;
  }
}
body.pg .header .aside ul li.setting {
  width: calc((100% - 10px) / 2);
  height: 44px;
}
@media screen and (max-width: 719px) {
  body.pg .header .aside ul li.setting {
    height: 36px;
  }
}
body.pg .header .aside ul li.setting .i-arrow-right {
  width: 5px;
  height: 9px;
  margin-left: 8px;
}
@media screen and (max-width: 719px) {
  body.pg .header .aside ul li.setting .i-arrow-right {
    width: 4px;
    height: 7px;
    margin-left: 6px;
  }
}
body.pg .header .aside ul li:not(.setting) {
  width: calc((100% - 10px) / 2);
  height: 44px;
  border: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
@media screen and (max-width: 719px) {
  body.pg .header .aside ul li:not(.setting) {
    height: 36px;
  }
}
body.pg .header .aside ul li:not(.setting).active.purple {
  background: #6335b4;
}
body.pg .header .aside ul li:not(.setting).active.green {
  background: #00af79;
}
body.pg .header.ver2 .header-top,
body.pg .header.default .header-top {
  background: var(--h-list-btn-color);
}
body.pg .header.ver2 .i-question {
  display: inline-block;
  cursor: pointer;
  width: 28px;
  height: 28px;
}
@media screen and (max-width: 719px) {
  body.pg .header.ver2 .i-question {
    width: 18px;
    height: 18px;
  }
}
body.pg .switch-channel-container {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  flex: 1 0 auto;
  height: 100%;
  font-family: "rixrak-sans-pro", sans-serif;
  font-size: 16px;
  color: var(--h-list-btn-color);
}
@media screen and (max-width: 719px) {
  body.pg .switch-channel-container {
    font-size: 13px;
  }
}
body.pg .switch-channel-container.ver2 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 208px;
  height: 40px;
  padding: 2px;
  border-radius: 7px;
  background: var(--h-color-fff);
}
@media screen and (max-width: 719px) {
  body.pg .switch-channel-container.ver2 {
    width: 90px;
    height: 28px;
    border-radius: 4px;
    padding: 1px;
  }
}
body.pg .switch-channel-container.ver2 > a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 100%;
  border-radius: 6px;
  font-weight: bold;
}
@media screen and (max-width: 719px) {
  body.pg .switch-channel-container.ver2 > a {
    border-radius: 3px;
  }
}
body.pg .switch-channel-container.ver2 .active {
  color: var(--h-color-fff);
  background: var(--h-list-btn-color);
}
body.pg .switch-channel-container.ver2 .tooltip-green {
  top: calc(100% + 10px);
}
body.pg .switch-channel-container.on-tooltip .tooltip-close {
  width: 285px;
  height: 40px;
  position: absolute;
  display: none;
  left: -38px;
  bottom: -116px;
}
@media screen and (max-width: 719px) {
  body.pg .switch-channel-container.on-tooltip .tooltip-close {
    width: 197px;
    height: 32px;
    left: -50px;
    bottom: -100px;
  }
}
body.pg .switch-channel-container.on-tooltip .tooltip-close .tooltip-close-btn {
  position: absolute;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid #222;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
}
@media screen and (max-width: 719px) {
  body.pg .switch-channel-container.on-tooltip .tooltip-close .tooltip-close-btn {
    width: 24px;
    height: 24px;
    bottom: -98px;
  }
}
body.pg .switch-channel-container.on-tooltip .tooltip-close .tooltip-close-btn::before, body.pg .switch-channel-container.on-tooltip .tooltip-close .tooltip-close-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 17px;
  height: 2px;
  background: #222;
  border-radius: 2px;
}
@media screen and (max-width: 719px) {
  body.pg .switch-channel-container.on-tooltip .tooltip-close .tooltip-close-btn::before, body.pg .switch-channel-container.on-tooltip .tooltip-close .tooltip-close-btn::after {
    width: 12px;
    height: 1px;
  }
}
body.pg .switch-channel-container.on-tooltip .tooltip-close .tooltip-close-btn::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
body.pg .switch-channel-container.on-tooltip .tooltip-close .tooltip-close-btn::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}
body.pg .switch-channel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 208px;
  height: 100%;
  color: #333333;
  z-index: 99;
}
@media screen and (max-width: 719px) {
  body.pg .switch-channel {
    width: 96px;
  }
}
body.pg .switch-channel > a, body.pg .switch-channel > span {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 40px;
  padding-bottom: 1px;
  font-weight: bold;
}
@media screen and (max-width: 719px) {
  body.pg .switch-channel > a, body.pg .switch-channel > span {
    height: 28px;
    padding-bottom: 0;
  }
}
body.pg .switch-channel .active {
  color: var(--h-color-fff);
}
body.pg .switch-channel.purple.pc {
  display: flex;
  background: url(/hong4/_img/pg/toggle_purple_pc.svg) no-repeat center/contain;
}
@media screen and (max-width: 719px) {
  body.pg .switch-channel.purple.pc {
    display: none;
  }
}
body.pg .switch-channel.purple.mo {
  display: none;
  background: url(/hong4/_img/pg/toggle_purple_m.svg) no-repeat center/contain;
}
@media screen and (max-width: 719px) {
  body.pg .switch-channel.purple.mo {
    display: flex;
  }
}
body.pg .switch-channel.green.pc {
  display: flex;
  background: url(/hong4/_img/pg/toggle_green_pc.svg) no-repeat center/contain;
}
@media screen and (max-width: 719px) {
  body.pg .switch-channel.green.pc {
    display: none;
  }
}
body.pg .switch-channel.green.mo {
  display: none;
  background: url(/hong4/_img/pg/toggle_green_m.svg) no-repeat center/contain;
}
@media screen and (max-width: 719px) {
  body.pg .switch-channel.green.mo {
    display: flex;
  }
}
body.pg .tooltip-green {
  display: none;
  position: absolute;
  left: 0;
  top: calc(100% - 10px);
  width: 240px;
  background: #efefef;
  border: 1px solid rgba(173, 174, 174, 0.5);
  border-radius: 5px;
  padding: 11px;
  line-height: 22px;
  font-family: var(--h-body-font-family);
  font-size: 14px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  color: #333333;
}
body.pg .tooltip-green.ver2 {
  width: 285px;
  display: none;
  flex-direction: column;
  gap: 8px;
  animation: none;
  left: 50%;
  transform: translateX(-50%);
  border-color: #222;
  border-radius: 7px;
  background: linear-gradient(90deg, #eddbff, #dfffe8);
}
@media screen and (max-width: 719px) {
  body.pg .tooltip-green.ver2 {
    width: 197px;
  }
}
body.pg .tooltip-green.ver2 > div {
  display: flex;
  align-items: center;
  gap: 8px;
}
@media screen and (max-width: 719px) {
  body.pg .tooltip-green.ver2 > div {
    gap: 4px;
  }
}
body.pg .tooltip-green.ver2 > div > img {
  width: 48px;
}
@media screen and (max-width: 719px) {
  body.pg .tooltip-green.ver2 > div > img {
    width: 38px;
  }
}
body.pg .tooltip-green.ver2 > div > span {
  color: #444444;
  font-size: 14px;
}
@media screen and (max-width: 719px) {
  body.pg .tooltip-green.ver2 > div > span {
    font-size: 11px;
  }
}
body.pg .tooltip-green.ver2 > div > p {
  color: #222222;
  font-size: 16px;
}
@media screen and (max-width: 719px) {
  body.pg .tooltip-green.ver2 > div > p {
    font-size: 13px;
  }
}
body.pg .tooltip-green.ver2::before {
  left: 50%;
  right: auto;
  transform: scaleX(0.85) translateX(-50%) rotate(45deg);
  bottom: calc(100% - 7px);
  width: 16px;
  height: 16px;
  border-color: #222;
  background: linear-gradient(74deg, #eddbff -40%, #dfffe8 167%);
}
@media screen and (max-width: 719px) {
  body.pg .tooltip-green {
    width: 213px;
    left: -60px;
    top: calc(100% - 3px);
    padding: 9px;
    line-height: 18px;
    font-size: 12px;
  }
}
body.pg .tooltip-green::before {
  content: "";
  position: absolute;
  right: 78px;
  bottom: calc(100% - 4px);
  width: 9px;
  height: 9px;
  background: #efefef;
  border-top: 1px solid rgba(173, 174, 174, 0.5);
  border-left: 1px solid rgba(173, 174, 174, 0.5);
  transform: scaleX(0.9) rotate(45deg);
}
@media screen and (max-width: 719px) {
  body.pg .tooltip-green::before {
    right: 76px;
    bottom: calc(100% - 2px);
    width: 6px;
    height: 6px;
    transform: scaleX(0.8) rotate(45deg);
  }
}
@keyframes tollTipFade {
  0% {
    opacity: 1;
  }
  100% {
    display: none;
    opacity: 0;
  }
}
body.pg .tooltip-box {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  left: 0;
  top: -80px;
  width: 100%;
  height: calc(100% + 35px);
  background: rgba(0, 0, 0, 0.9);
  z-index: 999;
  padding: 20px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  color: #dddddd;
}
@media screen and (max-width: 719px) {
  body.pg .tooltip-box {
    top: -50px;
    height: calc(100% + 19px);
    padding: 11px 20px 20px;
  }
}
body.pg .tooltip-box .tooltip-top {
  font-size: 16px;
  line-height: 27px;
}
@media screen and (max-width: 719px) {
  body.pg .tooltip-box .tooltip-top {
    font-size: 13px;
    line-height: 20px;
  }
}
body.pg .tooltip-box .tooltip-top .tooltip-img {
  display: flex;
  justify-content: center;
  font-family: "rixrak-sans-pro", sans-serif;
}
body.pg .tooltip-box .tooltip-top .tooltip-img .tooltip-img-box {
  position: relative;
}
body.pg .tooltip-box .tooltip-top .tooltip-img .tooltip-img-box::after {
  content: "";
  position: absolute;
  left: calc(100% + 11px);
  top: 11px;
  width: 40px;
  height: 37px;
  background: url(/hong4/_img/pg/i_guide_gr.svg) no-repeat center/cover;
}
@media screen and (max-width: 719px) {
  body.pg .tooltip-box .tooltip-top .tooltip-img .tooltip-img-box::after {
    left: calc(100% + 9px);
    top: 4px;
    width: 30px;
    height: 28px;
  }
}
body.pg .tooltip-box .tooltip-top .tooltip-img .tooltip-img-box .tooltip-img-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--h-color-fff);
  border-radius: 10px;
  padding: 5px;
  box-sizing: content-box;
}
@media screen and (max-width: 719px) {
  body.pg .tooltip-box .tooltip-top .tooltip-img .tooltip-img-box .tooltip-img-bg {
    border-radius: 6px;
    padding: 4px;
  }
}
body.pg .tooltip-box .tooltip-top .tooltip-text {
  margin-top: 28px;
  text-align: center;
}
@media screen and (max-width: 719px) {
  body.pg .tooltip-box .tooltip-top .tooltip-text {
    margin-top: 22px;
    font-size: 1rem;
  }
}
body.pg .tooltip-box .tooltip-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-size: 1rem;
}
@media screen and (max-width: 719px) {
  body.pg .tooltip-box .tooltip-bottom {
    font-size: 0.875rem;
  }
}
body.pg .tooltip-box .tooltip-bottom .tooltip-again,
body.pg .tooltip-box .tooltip-bottom .tooltip-close {
  display: flex;
  align-items: center;
  gap: 12px;
}
@media screen and (max-width: 719px) {
  body.pg .tooltip-box .tooltip-bottom .tooltip-again,
  body.pg .tooltip-box .tooltip-bottom .tooltip-close {
    gap: 6px;
  }
}
body.pg .tooltip-box .tooltip-bottom .tooltip-again > img {
  width: 20px;
}
@media screen and (max-width: 719px) {
  body.pg .tooltip-box .tooltip-bottom .tooltip-again > img {
    width: 16px;
  }
}
body.pg .tooltip-box .tooltip-bottom .tooltip-close > img {
  width: 12px;
}
@media screen and (max-width: 719px) {
  body.pg .tooltip-box .tooltip-bottom .tooltip-close > img {
    width: 8px;
  }
}
body.pg .detail-select-container {
  padding: 14px 28px 14px 20px;
  border-color: rgba(0, 0, 0, 0.04);
  background: linear-gradient(90deg, #eddbff, #dfffe8);
}
@media screen and (max-width: 719px) {
  body.pg .detail-select-container {
    padding: 11px 25px 11px 10px;
  }
}
body.pg .detail-select-container .detail-select-swiper {
  padding: 1px;
}
body.pg .detail-select-container.swiper-on::before {
  background: #dfffe8;
}
body.pg .detail-select-container .detail-select-swiper li.swiper-slide {
  padding: 13px 30px 15px 12px;
  border: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}
@media screen and (max-width: 719px) {
  body.pg .detail-select-container .detail-select-swiper li.swiper-slide {
    padding: 9px 23px 9px 10px;
  }
}
body.pg .detail-select-container .detail-select-swiper li.swiper-slide.refresh, body.pg .detail-select-container .detail-select-swiper li.swiper-slide.active {
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
}
body.pg .hong-popup51.hong-popup.hong-more-popup .popup-inner-box-bottom ul li:nth-child(2) {
  background: var(--h-color-fff);
  border: 1px solid #eaecf3;
}
body.pg .hong-popup51.hong-popup.hong-more-popup .popup-inner-box-bottom ul li:nth-child(2).active {
  background: #1ab8be;
  color: var(--h-color-fff);
}
body.pg .hong-popup51 .popup-bottom .popup-line {
  margin-top: 20px;
  margin-bottom: 20px;
}
@media screen and (max-width: 719px) {
  body.pg .hong-popup51 .popup-bottom .popup-line {
    margin-top: 15px;
    margin-bottom: 15px;
  }
}
body.pg .hong-popup51 .popup-text {
  margin-bottom: 12px;
}
@media screen and (max-width: 719px) {
  body.pg .hong-popup51 .popup-text {
    margin-bottom: 8px;
  }
}
body.pg .hong-popup51 .popup-text h4 {
  font-size: 1rem;
  line-height: 1rem;
  font-weight: bold;
  text-align: left;
}
body.pg .hong-popup .check-list input[type=radio]:checked ~ i {
  color: var(--h-list-btn-color);
  font-weight: bold;
}
body.pg .hong-popup .check-list input[type=radio]:checked ~ label,
body.pg .hong-popup .check-list input[type=checkbox]:checked ~ label {
  color: var(--h-list-btn-color);
  font-weight: bold;
}
body.pg .popup-bottom .popup-inner-bottom .popup-btn.active {
  background: var(--h-list-btn-color);
}
body.pg .hong-popup.hong-more-popup.hong-style-popup input[type=checkbox]:checked + label {
  background: var(--h-list-btn-color);
}
body.pg .wrapper.profile .header.ver2,
body.pg .wrapper.chat-wrap .header.ver2,
body.pg .wrapper.search-page .header.ver2 {
  display: none;
}
body.pg .wrapper.profile .nav,
body.pg .wrapper.chat-wrap .nav,
body.pg .wrapper.search-page .nav {
  display: flex;
  color: var(--h-color-fff);
  background: var(--h-list-btn-color);
  font-size: 22px;
}
@media screen and (max-width: 719px) {
  body.pg .wrapper.profile .nav,
  body.pg .wrapper.chat-wrap .nav,
  body.pg .wrapper.search-page .nav {
    font-size: 17px;
  }
}
body.pg .wrapper.profile .nav > p,
body.pg .wrapper.chat-wrap .nav > p,
body.pg .wrapper.search-page .nav > p {
  font-weight: bold;
  line-height: 32px;
  padding-right: 41px;
}
@media screen and (max-width: 719px) {
  body.pg .wrapper.profile .nav > p,
  body.pg .wrapper.chat-wrap .nav > p,
  body.pg .wrapper.search-page .nav > p {
    line-height: 25px;
    padding-right: 9px;
  }
}
body.pg .wrapper.profile .nav .i-question,
body.pg .wrapper.chat-wrap .nav .i-question,
body.pg .wrapper.search-page .nav .i-question {
  cursor: pointer;
  width: 28px;
  height: 28px;
}
@media screen and (max-width: 719px) {
  body.pg .wrapper.profile .nav .i-question,
  body.pg .wrapper.chat-wrap .nav .i-question,
  body.pg .wrapper.search-page .nav .i-question {
    width: 18px;
    height: 18px;
  }
}
body.pg .wrapper.profile .nav .i-back,
body.pg .wrapper.chat-wrap .nav .i-back,
body.pg .wrapper.search-page .nav .i-back {
  width: 12px;
  height: 18px;
  background: url(/hong4/_img/header/i-arrow-left.png) no-repeat;
  margin-top: 2px;
  margin-right: 16px;
}
@media screen and (max-width: 719px) {
  body.pg .wrapper.profile .nav .i-back,
  body.pg .wrapper.chat-wrap .nav .i-back,
  body.pg .wrapper.search-page .nav .i-back {
    width: 8px;
    height: 12px;
    margin-bottom: 0;
    margin-top: 0;
    margin-right: 8px;
  }
}
body.pg .wrapper.profile .nav .i-close,
body.pg .wrapper.chat-wrap .nav .i-close,
body.pg .wrapper.search-page .nav .i-close {
  display: block;
  width: 18px;
  height: 18px;
  background: none;
}
@media screen and (max-width: 719px) {
  body.pg .wrapper.profile .nav .i-close,
  body.pg .wrapper.chat-wrap .nav .i-close,
  body.pg .wrapper.search-page .nav .i-close {
    width: 14px;
    height: 14px;
  }
}
body.pg .wrapper.profile .nav .nav-mobile,
body.pg .wrapper.chat-wrap .nav .nav-mobile,
body.pg .wrapper.search-page .nav .nav-mobile {
  display: block;
  font-size: 20px;
}
@media screen and (max-width: 719px) {
  body.pg .wrapper.profile .nav .nav-mobile,
  body.pg .wrapper.chat-wrap .nav .nav-mobile,
  body.pg .wrapper.search-page .nav .nav-mobile {
    font-size: 14px;
  }
}
body.pg .wrapper.profile .nav .search-btn,
body.pg .wrapper.chat-wrap .nav .search-btn,
body.pg .wrapper.search-page .nav .search-btn {
  color: var(--h-color-fff);
  font-weight: normal;
  background: url(/hong4/img/common/search_w.png) no-repeat top 1px right/16px 16px;
}
body.pg .profile-footer > .consul-box.pos {
  background: var(--h-list-btn-color);
}
body.pg .tab-wrap .tab-container > h1 {
  color: var(--h-list-btn-color);
}
body.pg .main-tab ul li a.active {
  color: var(--h-list-btn-color);
}
body.pg .main-tab ul li a.active::after {
  background: var(--h-list-btn-color);
}
body.pg .profile-question li.wait::before {
  background: var(--h-list-btn-color);
}
body.pg .write-btn {
  background: var(--h-list-btn-color);
  font-family: var(--h-body-font-family);
}
body.pg .btn.active {
  background: var(--h-list-btn-color);
}
body.pg .popup-bg .popup-center .call-btn {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  padding: 15px;
}
@media screen and (max-width: 719px) {
  body.pg .popup-bg .popup-center .call-btn .i-call {
    display: inline-block;
    padding-left: 21px;
    background: url(../img/listIcon/listCall.png) center left/15px 15px no-repeat;
  }
}
@media screen and (max-width: 719px) {
  body.pg .popup-bg .popup-center .call-btn .i-call .call-number {
    font-size: 13px;
  }
}
body.pg .popup-bg .popup-center .call-btn span {
  line-height: initial;
}
body.pg .payback-coin {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px !important;
  border-radius: 20px;
  padding: 4px 9px 4px 20px;
  background: url(../img/common/payback_coin.png) no-repeat left 9px center/8px 9px;
  top: 0;
}
@media screen and (max-width: 719px) {
  body.pg .payback-coin {
    font-size: 11px !important;
    padding: 4px 6px 4px 16px;
    font-size: 8px;
    background: url(../img/common/payback_coin.png) no-repeat left 7px center/7px 9px;
  }
}
@media screen and (max-width: 719px) {
  body.pg .footer-fix.old-footer,
  body.pg .footer-chat {
    height: 70px;
    padding: 10px;
  }
}
body.pg .footer-btn_r.active {
  background: var(--h-list-btn-color);
}
body.pg .all-menu-wrap .d-flex.menu-two.f-column > div {
  width: 100%;
  cursor: auto;
}
body.pg .all-menu-wrap .common-box.call,
body.pg .all-menu-wrap .common-box.chat {
  height: auto;
  padding: 24px 14px 24px;
  background: #eeeeee;
  border-color: #e6e6e6;
}
@media screen and (max-width: 719px) {
  body.pg .all-menu-wrap .common-box.call,
  body.pg .all-menu-wrap .common-box.chat {
    padding: 21px 13px 21px;
  }
}
body.pg .all-menu-wrap .common-box.call::before,
body.pg .all-menu-wrap .common-box.chat::before {
  z-index: 3;
}
body.pg .all-menu-wrap .common-box.call::after,
body.pg .all-menu-wrap .common-box.chat::after {
  background-color: #e9e9e9;
}
body.pg .all-menu-wrap .common-box.call .menu-title,
body.pg .all-menu-wrap .common-box.chat .menu-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}
@media screen and (max-width: 719px) {
  body.pg .all-menu-wrap .common-box.call .menu-title,
  body.pg .all-menu-wrap .common-box.chat .menu-title {
    gap: 8px;
    margin-bottom: 9px;
  }
}
body.pg .all-menu-wrap .common-box.call .menu-title h1,
body.pg .all-menu-wrap .common-box.chat .menu-title h1 {
  margin-bottom: 0;
}
@media screen and (max-width: 719px) {
  body.pg .all-menu-wrap .common-box.call .menu-title h1,
  body.pg .all-menu-wrap .common-box.chat .menu-title h1 {
    font-size: 18px;
  }
}
@media screen and (max-width: 719px) {
  body.pg .all-menu-wrap .common-box.call .menu-title p,
  body.pg .all-menu-wrap .common-box.chat .menu-title p {
    font-size: 13px;
  }
}
body.pg .all-menu-wrap .common-box.call .menu-button-container,
body.pg .all-menu-wrap .common-box.chat .menu-button-container {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--h-color-fff);
}
@media screen and (max-width: 719px) {
  body.pg .all-menu-wrap .common-box.call .menu-button-container,
  body.pg .all-menu-wrap .common-box.chat .menu-button-container {
    padding-right: 47px;
    gap: 10px;
  }
}
body.pg .all-menu-wrap .common-box.call .menu-button-container .menu-button,
body.pg .all-menu-wrap .common-box.chat .menu-button-container .menu-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  position: relative;
  width: 262px;
  padding: 11px 0 20px;
  border-radius: 8px;
  overflow: hidden;
  font-family: "rixrak-sans-pro", sans-serif;
}
@media screen and (max-width: 719px) {
  body.pg .all-menu-wrap .common-box.call .menu-button-container .menu-button,
  body.pg .all-menu-wrap .common-box.chat .menu-button-container .menu-button {
    width: 50%;
    height: 85px;
    flex-direction: column;
    justify-content: center;
    padding: 0 16px;
    gap: 4px;
    flex: 1 0 auto;
  }
}
body.pg .all-menu-wrap .common-box.call .menu-button-container .menu-button h2,
body.pg .all-menu-wrap .common-box.chat .menu-button-container .menu-button h2 {
  font-size: 24px;
  font-weight: bold;
  line-height: 34px;
}
@media screen and (max-width: 719px) {
  body.pg .all-menu-wrap .common-box.call .menu-button-container .menu-button h2,
  body.pg .all-menu-wrap .common-box.chat .menu-button-container .menu-button h2 {
    font-size: 20px;
    line-height: 23px;
  }
}
body.pg .all-menu-wrap .common-box.call .menu-button-container .menu-button.purple .menu-button-text .menu-button-text-img,
body.pg .all-menu-wrap .common-box.chat .menu-button-container .menu-button.purple .menu-button-text .menu-button-text-img {
  width: 78px;
}
@media screen and (max-width: 719px) {
  body.pg .all-menu-wrap .common-box.call .menu-button-container .menu-button.purple .menu-button-text .menu-button-text-img,
  body.pg .all-menu-wrap .common-box.chat .menu-button-container .menu-button.purple .menu-button-text .menu-button-text-img {
    width: 64px;
  }
}
body.pg .all-menu-wrap .common-box.call .menu-button-container .menu-button.green .menu-button-text .menu-button-text-img,
body.pg .all-menu-wrap .common-box.chat .menu-button-container .menu-button.green .menu-button-text .menu-button-text-img {
  width: 130px;
}
@media screen and (max-width: 719px) {
  body.pg .all-menu-wrap .common-box.call .menu-button-container .menu-button.green .menu-button-text .menu-button-text-img,
  body.pg .all-menu-wrap .common-box.chat .menu-button-container .menu-button.green .menu-button-text .menu-button-text-img {
    width: 102px;
  }
}
body.pg .all-menu-wrap .common-box.call .menu-button-container .menu-button .menu-button-text,
body.pg .all-menu-wrap .common-box.chat .menu-button-container .menu-button .menu-button-text {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  line-height: 24px;
  text-align: center;
}
@media screen and (max-width: 719px) {
  body.pg .all-menu-wrap .common-box.call .menu-button-container .menu-button .menu-button-text,
  body.pg .all-menu-wrap .common-box.chat .menu-button-container .menu-button .menu-button-text {
    font-size: 12px;
    line-height: 17px;
    gap: 2px;
    flex-direction: column;
  }
}
body.pg .all-menu-wrap .common-box.call .menu-button-container .menu-button .menu-button-text p,
body.pg .all-menu-wrap .common-box.chat .menu-button-container .menu-button .menu-button-text p {
  font-size: 18px;
  letter-spacing: initial;
}
@media screen and (max-width: 719px) {
  body.pg .all-menu-wrap .common-box.call .menu-button-container .menu-button .menu-button-text p,
  body.pg .all-menu-wrap .common-box.chat .menu-button-container .menu-button .menu-button-text p {
    font-size: 14px;
  }
}
body.pg .all-menu-wrap .common-box.call .menu-button-container .menu-button .menu-button-text .menu-button-text-img,
body.pg .all-menu-wrap .common-box.chat .menu-button-container .menu-button .menu-button-text .menu-button-text-img {
  margin-top: 2px;
}
body.pg .all-menu-wrap .common-box.call .menu-button-container .menu-button .menu-button-text .menu-button-arrow,
body.pg .all-menu-wrap .common-box.chat .menu-button-container .menu-button .menu-button-text .menu-button-arrow {
  width: 64px;
}
@media screen and (max-width: 719px) {
  body.pg .all-menu-wrap .common-box.call .menu-button-container .menu-button .menu-button-text .menu-button-arrow,
  body.pg .all-menu-wrap .common-box.chat .menu-button-container .menu-button .menu-button-text .menu-button-arrow {
    width: 46px;
  }
}
body.pg .all-menu-wrap .common-box.call .menu-button-container .menu-button .menu-button-text .br,
body.pg .all-menu-wrap .common-box.chat .menu-button-container .menu-button .menu-button-text .br {
  display: inline;
}
@media screen and (max-width: 719px) {
  body.pg .all-menu-wrap .common-box.call .menu-button-container .menu-button .menu-button-text .br,
  body.pg .all-menu-wrap .common-box.chat .menu-button-container .menu-button .menu-button-text .br {
    display: block;
  }
}
body.pg .all-menu-wrap .common-box.call .menu-button-container .menu-button::after,
body.pg .all-menu-wrap .common-box.chat .menu-button-container .menu-button::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 8px;
}
body.pg .all-menu-wrap .common-box.call .menu-button-container .menu-button.purple,
body.pg .all-menu-wrap .common-box.chat .menu-button-container .menu-button.purple {
  background: #7748d6;
}
body.pg .all-menu-wrap .common-box.call .menu-button-container .menu-button.purple::after,
body.pg .all-menu-wrap .common-box.chat .menu-button-container .menu-button.purple::after {
  background: #693cc4;
}
body.pg .all-menu-wrap .common-box.call .menu-button-container .menu-button.purple .menu-button-text,
body.pg .all-menu-wrap .common-box.chat .menu-button-container .menu-button.purple .menu-button-text {
  color: #dac5ff;
}
body.pg .all-menu-wrap .common-box.call .menu-button-container .menu-button.green,
body.pg .all-menu-wrap .common-box.chat .menu-button-container .menu-button.green {
  background: #00af79;
}
body.pg .all-menu-wrap .common-box.call .menu-button-container .menu-button.green::after,
body.pg .all-menu-wrap .common-box.chat .menu-button-container .menu-button.green::after {
  background: #0ea173;
}
body.pg .all-menu-wrap .common-box.call .menu-button-container .menu-button.green .menu-button-text,
body.pg .all-menu-wrap .common-box.chat .menu-button-container .menu-button.green .menu-button-text {
  color: #b8ffc6;
}
body.pg .all-menu-wrap .common-box.call::before {
  right: 24px;
  width: 112px;
  height: 136px;
}
@media screen and (max-width: 719px) {
  body.pg .all-menu-wrap .common-box.call::before {
    width: 78px;
    height: 92px;
    right: 2px;
  }
}
body.pg .all-menu-wrap .common-box.chat::before {
  right: 24px;
  width: 89px;
  height: 120px;
}
@media screen and (max-width: 719px) {
  body.pg .all-menu-wrap .common-box.chat::before {
    width: 65px;
    height: 88px;
    right: 10px;
  }
}
body.pg .counselor-info-con .cs-name {
  display: flex;
  align-items: center;
}
body.pg .badge {
  display: inline-block;
  width: 36px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: var(--h-color-fff);
  margin-left: 8px;
  font-size: 12px;
  border-radius: 15px;
}
body.pg .badge.ver2 {
  font-family: "rixrak-sans-pro", sans-serif;
  font-size: 14px;
  font-weight: bold;
  line-height: 20px;
  width: 40px;
  height: 24px;
  border-radius: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 719px) {
  body.pg .badge.ver2 {
    font-size: 11px;
    line-height: 16px;
    width: 32px;
    height: 20px;
  }
}
@media screen and (max-width: 719px) {
  body.pg .badge {
    width: 28px;
    height: 16px;
    line-height: 16px;
    font-size: 10px;
    margin-left: 6px;
  }
}
body.pg .badge.purple {
  background: #6335b4;
}
body.pg .badge.green {
  background: #00af79;
}
body.pg .search-wrap {
  min-height: calc(100vh - 160px);
}
@media screen and (max-width: 719px) {
  body.pg .search-wrap {
    min-height: calc(100vh - 140px);
  }
}
body.pg .search-wrap .search-keyword {
  min-height: auto;
}
body.pg .header-policy-btn {
  color: var(--h-color-fff);
  background: url("../img/common/arrowRight_s_w.png") right top 75%/7px 12px no-repeat;
}
@media screen and (max-width: 719px) {
  body.pg .header-policy-btn {
    background: url("../img/common/arrowRight_s_w.png") right top 55%/5px 9px no-repeat;
  }
}
body.pg .review-policy .i-arrow-right {
  background: url(/hong4/_img/main/i-arrow-right-w.png) no-repeat center/7px 12px;
}
@media screen and (max-width: 719px) {
  body.pg .review-policy .i-arrow-right {
    background: url(/hong4/_img/main/i-arrow-right-w.png) no-repeat center/5px 9px;
  }
}
body.pg .list-item.non-coin .i-arrow-r {
  display: none;
}
body.pg .review-write-inner.renewal select {
  margin: 0 !important;
}
body.pg .level.green::before {
  content: "그린";
  background: #00af79;
  border: 1px solid #00af79;
  color: var(--h-color-fff);
}
body.pg .level.purple::before {
  content: "퍼플";
  background: #6335b4;
  border: 1px solid #6335b4;
  color: var(--h-color-fff);
}
body.pg .grid-b .bg-green {
  background: #f6fff9;
}
body.pg .grid-b .color-green {
  color: #029f7a;
}
body.pg .grid-b .bg-purple {
  background: #fcf9ff;
}
body.pg .grid-b .color-purple {
  color: #6335b4;
}
body.pg .popup-img-container {
  width: 100%;
  padding: 24px 72px;
  background: #e9e9e9;
}
@media screen and (max-width: 719px) {
  body.pg .popup-img-container {
    padding: 20px 64px;
  }
}
body.pg .popup-img-container img {
  display: block;
  width: 100%;
}

body.pg.purple .i-list-partner {
  background: url(/hong4/_img/pg/i_partner_pu.svg) no-repeat;
}
body.pg.purple .i-question {
  background: url(/hong4/_img/pg/i_question.svg) no-repeat;
}
body.pg.purple .title .i-question,
body.pg.purple .i-question.coin-info-popup-btn,
body.pg.purple .i-question.zero60-info-popup-btn {
  background: url(../img/common/question_y.png) no-repeat;
  background-size: 100%;
}
body.pg.purple .i-best {
  background: url(/hong4/_img/pg/i_best.svg) no-repeat;
}

body.pg.green {
  --h-list-btn-color: #00af79;
}
body.pg.green .i-list-partner {
  background: url(/hong4/_img/pg/i_partner_gr.svg) no-repeat;
}
body.pg.green .i-list-rookie {
  background: url(/hong4/_img/pg/i_new_gr.svg) no-repeat;
}
body.pg.green .i-question {
  background: url(/hong4/_img/pg/i_question_gr.svg) no-repeat;
}
body.pg.green .i-grade.on {
  background: url(/hong4/_img/pg/i_grade_gr.svg) no-repeat;
}
body.pg.green .i-review.on {
  background: url(/hong4/_img/pg/i_review_gr.svg) no-repeat;
}
body.pg.green .i-consult.on {
  background: url(/hong4/_img/pg/i_consult_gr.svg) no-repeat;
}
body.pg.green .title .i-question,
body.pg.green .i-question.coin-info-popup-btn,
body.pg.green .i-question.zero60-info-popup-btn {
  background: url(../img/common/question_y.png) no-repeat;
  background-size: 100%;
}
body.pg.green .i-best {
  background: url(/hong4/_img/pg/i_best_gr.svg) no-repeat;
}
body.pg.green .hong-popup .check-list input[type=radio]:checked ~ label.radio-btn {
  background: url(/hong4/_img/pg/i_check_gr.svg) no-repeat center/cover;
}

/* 나만의 점 스토리 */
body.hong4 .success-write-banner.divination-write-banner {
  background-image: linear-gradient(118deg, #ffd4e1, #fffcce 97%);
  padding: 19px 0;
}
body.hong4 .success-write-banner.divination-write-banner .title {
  padding: 0 20px;
}
body.hong4 .success-write-banner.divination-write-banner .successSwiper {
  padding-left: 20px;
}
body.hong4 .success-write-banner.divination-write-banner .award-text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  font-family: "rixrak-sans-pro", sans-serif;
}
body.hong4 .success-write-banner.divination-write-banner .award-text img {
  display: block;
  width: 9px;
}
body.hong4 .success-write-banner.divination-write-banner .award-text p {
  font-size: 12px;
  line-height: 17px;
  font-weight: bold;
  margin-bottom: 0 !important;
}
body.hong4 .successSwiper .swiper-slide:last-child {
  margin-right: 20px;
}
body.hong4 .success-write-banner.divination-write-banner .title .tab-btn {
  position: relative;
  display: flex;
  border-radius: 4px;
  background-color: #fff;
  border: solid 1px #d8386a;
  overflow: hidden;
}
body.hong4 .success-write-banner.divination-write-banner .title .tab-btn button {
  all: unset;
  width: 100%;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 21px;
  border-radius: 4px;
  background-color: #fff;
  cursor: pointer;
}
body.hong4 .success-write-banner.divination-write-banner .title .tab-btn span {
  font-weight: normal;
}
body.hong4 .success-write-banner.divination-write-banner .title .tab-btn .active {
  position: relative;
  background-color: #f33e76;
  color: #fff;
}
body.hong4 .success-write-banner.divination-write-banner .title .tab-btn .active::after {
  display: block;
  content: "";
  position: absolute;
  top: -1px;
  width: calc(100% + 2px);
  height: 36px;
  border-radius: 4px;
  border: solid 1px #d8386a;
  background-color: #f33e76;
  z-index: 0;
}
body.hong4 .success-write-banner.divination-write-banner .title .tab-btn .active span {
  z-index: 2;
  font-weight: bold;
  color: #fff;
}
body.hong4 .success-write-banner.divination-write-banner .title .sel {
  background: url(../img/common/arrowBottom.png) 89% 54%/9px 5px no-repeat #fff;
  display: inline-block;
  /* width: 120px; */
  height: 34px;
  /* padding: 0 0 0 12px; */
  padding: 0 29px 0 12px;
  font-size: 15px;
  line-height: 21px;
  max-width: 120px;
  letter-spacing: -0.35px;
  color: #222;
  border-radius: 4px;
  border: solid 1px rgba(0, 0, 0, 0.08);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  cursor: pointer;
}
body.hong4 .success-write-banner.divination-write-banner .swiper-slide {
  padding: 24px 20px 20px;
}
body.hong4 .success-write-banner.divination-write-banner .success-item p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
body.hong4 .success-write-banner.divination-write-banner .success-item .award-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 12px;
}
body.hong4 .success-write-banner.divination-write-banner .success-item .award-box > div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
body.hong4 .success-write-banner.divination-write-banner .success-item .award-box.fame-box > div {
  gap: 6px;
}
body.hong4 .success-write-banner.divination-write-banner .success-item .award-box .arward-line {
  flex: 1 0 auto;
  justify-content: flex-start;
  gap: 0;
}
body.hong4 .success-write-banner.divination-write-banner .success-item .award-box .arward-line.right {
  justify-content: flex-end;
}
body.hong4 .success-write-banner.divination-write-banner .success-item .award-box img {
  display: block;
}
body.hong4 .success-write-banner.divination-write-banner .success-item .award-box p {
  font-family: "rixrak-sans-pro", sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: bold;
  margin-bottom: 1px;
}
body.hong4 .success-write-banner.divination-write-banner .successSwiper .swiper-pagination {
  margin-top: 18px;
  height: 10px;
}
body.hong4 .success-write-banner.divination-write-banner.success {
  background-image: linear-gradient(90deg, #eddbff, #dfffe8);
}
body.hong4 .success-write-banner.divination-write-banner.success .title .tab-btn {
  border-color: #4c2c85;
}
body.hong4 .success-write-banner.divination-write-banner.success .title .tab-btn .active {
  position: relative;
  background-color: #f33e76;
  color: #fff;
}
body.hong4 .success-write-banner.divination-write-banner.success .title .tab-btn .active::after {
  border-color: #4c2c85;
  background-color: #6335b4;
}

@media (max-width: 719px) {
  body.hong4 .success-write-banner.divination-write-banner {
    padding: 17px 0 15px;
  }
}
@media (max-width: 719px) {
  body.hong4 .success-write-banner.divination-write-banner .title {
    padding: 0 16px;
  }
}
@media (max-width: 719px) {
  body.hong4 .success-write-banner.divination-write-banner .successSwiper {
    padding-left: 16px;
  }
  body.hong4 .successSwiper .swiper-slide:last-child {
    margin-right: 16px;
  }
}
@media (max-width: 719px) {
  body.hong4 .success-write-banner.divination-write-banner .title {
    margin-bottom: 13px;
  }
}
@media (max-width: 719px) {
  body.hong4 .success-write-banner.divination-write-banner .title .tab-btn button {
    height: 28px;
    font-size: 13px;
    line-height: 19px;
  }
}
@media (max-width: 719px) {
  body.hong4 .success-write-banner.divination-write-banner .title .tab-btn .active::after {
    height: 30px;
  }
}
@media (max-width: 719px) {
  body.hong4 .success-write-banner.divination-write-banner .title .sel {
    background: url(../img/common/arrowBottom.png) 89% 54%/9px 5px no-repeat #fff;
    background-size: 7px 4px;
    background-position: 92% 54%;
    /* padding: 0 0 0 10px;
    width: 101px; */
    max-width: 101px;
    padding: 0 23px 0 10px;
    height: 28px;
    font-size: 13px;
    line-height: 19px;
  }
}
@media (max-width: 719px) {
  body.hong4 .success-write-banner.divination-write-banner .swiper-slide {
    padding: 20px 16px 16px;
  }
}
@media (max-width: 719px) {
  body.hong4 .success-write-banner.divination-write-banner .success-item p {
    -webkit-line-clamp: 3;
  }
}
@media (max-width: 719px) {
  body.hong4 .success-write-banner.divination-write-banner .success-item .award-box {
    gap: 16px;
    margin-bottom: 8px;
  }
}
@media (max-width: 719px) {
  body.hong4 .success-write-banner.divination-write-banner .success-item .award-box > div {
    gap: 6px;
  }
}
@media (max-width: 719px) {
  body.hong4 .success-write-banner.divination-write-banner .success-item .award-box p {
    font-size: 12px;
    line-height: 17px;
  }
}
.success-write-banner.divination-write-banner .swiper-pagination.ver2 {
  transform: translate3d(0, 0, 0) !important;
}
.success-write-banner.divination-write-banner .swiper-pagination.ver2 .swiper-pagination-bullet.swiper-pagination-bullet-active {
  transform: unset;
}

@media (max-width: 719px) {
  body.hong4 .success-write-banner.divination-write-banner .successSwiper .swiper-pagination {
    margin-top: 12px;
    height: 7px;
  }
}
body.hong4 .success-item.ver2 {
  padding: 20px;
}
body.hong4 .success-item.ver2 p {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
body.hong4 .success-item.ver2 .success-item-info {
  padding: 12px 16px;
  line-height: 20px;
}

@media (max-width: 719px) {
  body.hong4 .success-item.ver2 {
    padding: 20px 16px 16px;
  }
}
@media (max-width: 719px) {
  body.hong4 .success-item.ver2 .success-item-info {
    padding: 7px 12px;
    line-height: 18px;
  }
}
.profile-wrap.ver2 .profile-img {
  width: 117px;
  height: 80px;
  border-radius: 4px;
  overflow: hidden;
}
.profile-wrap.ver2 .profile-img + div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1 0 auto;
}
.profile-wrap.ver2 .profile-img img {
  height: 100%;
}

@media (max-width: 719px) {
  .profile-wrap.ver2 .profile-img {
    width: 102px;
    height: 70px;
  }
}
body.hong4 .success-list input[type=radio]:checked + div label.radio-btn {
  background: url(/publish/img/list/ic-radio-check-pink.svg) no-repeat center/cover;
}
body.hong4 .info-box.ver2 {
  background-color: #f5f5f5;
}
body.hong4 .post-detail-wrap.ver2 .post-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #e9e9e9;
  padding-bottom: 12px;
}
body.hong4 .post-detail-wrap.ver2 .post-writer {
  font-size: 16px;
  line-height: 24px;
  color: #666;
}
body.hong4 .post-detail-wrap.ver2 .post-writer > span:first-child {
  font-weight: bold;
  color: #222;
}
body.hong4 .post-detail-wrap.ver2 .post-writer > span::after {
  content: "";
  display: inline-block;
  margin: 0 8px;
  width: 2px;
  height: 12px;
  background-color: #ddd;
}
body.hong4 .post-detail-wrap.ver2 .post-writer > span:last-child::after {
  display: none;
}
body.hong4 .post-detail-wrap.ver2 .post-award {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "rixrak-sans-pro", sans-serif;
}
body.hong4 .post-detail-wrap.ver2 .post-award img {
  display: block;
  width: 9px;
}
body.hong4 .post-detail-wrap.ver2 .post-award p {
  font-size: 13px;
  line-height: 18px;
  font-weight: bold;
}
body.hong4 .post-detail-wrap.ver2 .post-type .pill {
  padding: 6px 16px 7px;
  margin-top: 32px;
  font-size: 20px;
  line-height: 29px;
  border-radius: 50px;
  background-color: #f33e76;
}
body.hong4 .post-detail-wrap.ver2 .post-type h1 {
  padding-bottom: 32px;
  margin-top: 12px;
  margin-bottom: 20px;
  font-size: 28px;
  line-height: 40px;
  border-bottom: 1px solid #ddd;
}

@media (max-width: 719px) {
  body.hong4 .post-detail-wrap.ver2 .post-meta {
    padding-bottom: 10px;
  }
}
@media (max-width: 719px) {
  body.hong4 .post-detail-wrap.ver2 .post-writer {
    font-size: 14px;
    line-height: 20px;
  }
}
@media (max-width: 719px) {
  body.hong4 .post-detail-wrap.ver2 .post-writer > span::after {
    margin: 0 5px;
    height: 8px;
  }
}
@media (max-width: 719px) {
  body.hong4 .post-detail-wrap.ver2 .post-award {
    gap: 6px;
  }
}
@media (max-width: 719px) {
  body.hong4 .post-detail-wrap.ver2 .post-award img {
    width: 8px;
  }
}
@media (max-width: 719px) {
  body.hong4 .post-detail-wrap.ver2 .post-award p {
    font-size: 11px;
    line-height: 16px;
  }
}
@media (max-width: 719px) {
  body.hong4 .post-detail-wrap.ver2 .post-type .pill {
    margin-top: 30px;
    font-size: 18px;
    line-height: 27px;
    padding: 6px 17px 7px;
  }
}
@media (max-width: 719px) {
  body.hong4 .post-detail-wrap.ver2 .post-type h1 {
    padding-bottom: 30px;
    margin-top: 10px;
    font-size: 26px;
    line-height: 37px;
  }
}
.shareverif-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  padding: 40px 30px 2px;
}
.shareverif-box .shareverif {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.shareverif-box .shareverif p {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
}
.shareverif-box .shareverif > div:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.shareverif-box .shareverif > div:first-child p {
  font-size: 17px;
  line-height: 25px;
  font-weight: bold;
}
.shareverif-box .link {
  font-size: 13px;
  line-height: 19px;
  color: #3f73db;
  margin-top: 6px;
}
.shareverif-box .share-info {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px 16px;
  margin-top: 12px;
  font-size: 14px;
  line-height: 20px;
  border-radius: 4px;
  background-color: #f6f6f6;
}
.shareverif-box .shareverif.ver2 .img-link {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  overflow: hidden;
}
.shareverif-box .shareverif.ver2 .link {
  margin: 0;
}

@media (max-width: 719px) {
  .shareverif-box {
    gap: 30px;
    padding: 30px 16px 10px;
  }
}
@media (max-width: 719px) {
  .shareverif-box .shareverif > div:first-child p {
    font-size: 15px;
    line-height: 22px;
  }
}
@media (max-width: 719px) {
  .shareverif-box .link {
    font-size: 11px;
    line-height: 16px;
  }
}
@media (max-width: 719px) {
  .shareverif-box .share-info {
    gap: 16px;
    padding: 7px 12px;
    margin-top: 10px;
    font-size: 12px;
    line-height: 18px;
  }
}
@media (max-width: 719px) {
  .shareverif-box .shareverif.ver2 .img-link {
    gap: 10px;
    margin-top: 8px;
  }
}
.inner-wrap {
  padding: 24px 0 50px;
  width: 400px;
  min-height: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  border-left: 1px solid #e9e9e9;
  border-right: 1px solid #e9e9e9;
  flex: 1 0 auto;
}
.inner-wrap.ver2 {
  padding-top: 0;
}
.inner-wrap.ver2 .sns-input-box,
.inner-wrap.ver2 .img-capture-box {
  padding-top: 32px;
}
.inner-wrap.ver2 .img-capture-box img {
  height: 64px;
}
.inner-wrap.ver2 .sns-input-box:first-child,
.inner-wrap.ver2 .img-capture-box:first-child {
  padding-top: 24px;
}

@media (max-width: 719px) {
  .inner-wrap {
    padding: 20px 0 50px;
    width: 100%;
  }
}
@media (max-width: 719px) {
  .inner-wrap.ver2 .sns-input-box,
  .inner-wrap.ver2 .img-capture-box {
    padding-top: 30px;
  }
  .inner-wrap.ver2 .img-capture-box img {
    height: 60px;
  }
}
@media (max-width: 719px) {
  .inner-wrap.ver2 .sns-input-box:first-child,
  .inner-wrap.ver2 .img-capture-box:first-child {
    padding-top: 20px;
  }
}
.oper-policy-box .policy-title {
  font-size: 18px;
  line-height: 27px;
  font-weight: bold;
}
.oper-policy-box .policy-title:not(:first-child) {
  margin-top: 32px;
}
.oper-policy-box .policy-text-box {
  padding-left: 18px;
  margin-top: 7px;
  font-size: 16px;
  line-height: 25px;
  color: #555;
}
.oper-policy-box .mark-box p {
  position: relative;
  padding-left: 13px;
}
.oper-policy-box .mark-box p::after {
  content: "·";
  display: block;
  position: absolute;
  left: 0;
  top: 1px;
}
.oper-policy-box .table-box table {
  font-size: 14px;
  line-height: 20px;
  border-top: 1px solid #e9e9e9;
}
.oper-policy-box .table-box th {
  padding: 8px 0;
  width: 34.5%;
  text-align: center;
  color: #555;
  background-color: #f5f5f5;
  border-bottom: 1px solid #e9e9e9;
  border-right: 1px solid #e9e9e9;
  vertical-align: middle;
}
.oper-policy-box .table-box td {
  width: 65.5%;
  border-bottom: 1px solid #e9e9e9;
  vertical-align: middle;
  text-align: right;
}

@media (max-width: 719px) {
  .oper-policy-box .policy-title {
    font-size: 16px;
    line-height: 24px;
  }
}
@media (max-width: 719px) {
  .oper-policy-box .policy-title:not(:first-child) {
    margin-top: 30px;
  }
}
@media (max-width: 719px) {
  .oper-policy-box .policy-text-box {
    margin-top: 6px;
    font-size: 14px;
    line-height: 21px;
  }
}
@media (max-width: 719px) {
  .oper-policy-box .mark-box p {
    padding-left: 12px;
  }
}
@media (max-width: 719px) {
  .oper-policy-box .table-box table {
    font-size: 12px;
    line-height: 17px;
  }
}
@media (max-width: 719px) {
  .oper-policy-box .table-box th {
    padding: 6px 0;
    width: 36.8%;
  }
}
@media (max-width: 719px) {
  .oper-policy-box .table-box td {
    width: 63.2%;
  }
}
.content-wrap.ver2 .award-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 20px;
  margin: 0 auto;
  width: 100%;
}
.content-wrap.ver2 .award-box div {
  display: flex;
  align-items: center;
}
.content-wrap.ver2 .award-box p {
  margin-bottom: 0;
  font-family: "rixrak-sans-pro", sans-serif;
  font-size: 14px;
  line-height: 20px;
  font-weight: bold;
}

@media (max-width: 719px) {
  .content-wrap.ver2 .award-box {
    padding-bottom: 16px;
  }
}
@media (max-width: 719px) {
  .content-wrap.ver2 .award-box p {
    font-size: 12px;
    line-height: 17px;
  }
}
.arward-line {
  position: relative;
}
.arward-line.right {
  justify-content: flex-end;
}
.arward-line div {
  display: block !important;
  align-items: unset !important;
}
.arward-line .line {
  width: 100%;
  height: 1px;
  background-color: #f1f1f1;
}
.arward-line .points {
  width: 7px;
  height: 7px;
  z-index: 1;
  background: url(/publish/img/list/img_awardlinepoint.svg) no-repeat center/cover;
}

@media (max-width: 719px) {
  .arward-line .points {
    width: 5px;
    height: 5px;
  }
}
@media (max-width: 719px) {
  body.hong4 .success-write-content.ver2 .profile-img {
    width: 50px;
    height: 35px;
  }
}
.__mgt-policy {
  padding: 24px 16px 50px;
  background: #f5f5f5;
  line-height: 24px;
}
.__mgt-policy > h3 {
  font-weight: bold;
  margin-bottom: 8px;
}
.__mgt-policy > .text {
  margin-bottom: 12px;
}
.__mgt-policy .p-dot {
  padding-left: 11px;
  position: relative;
  line-height: 24px;
}
.__mgt-policy .p-dot::before {
  position: absolute;
  left: 0;
  top: 0;
  content: "·";
}
.__mgt-policy p {
  font-size: 14px;
  line-height: 22px;
  color: #666;
}

@media (max-width: 719px) {
  .__mgt-policy {
    padding: 20px 16px 50px;
    line-height: 20px;
  }
}
@media (max-width: 719px) {
  .__mgt-policy > h3 {
    margin-bottom: 6px;
  }
}
@media (max-width: 719px) {
  .__mgt-policy .p-dot {
    padding-left: 9px;
    line-height: 18px;
  }
}
@media (max-width: 719px) {
  .__mgt-policy p {
    font-size: 12px;
    line-height: 18px;
  }
}
body.hong4 .hit-field.ver2 li {
  background-color: #f33e76;
}

@media (max-width: 719px) {
  body.hong4 .hit-field.ver2 li {
    padding: 0 11px;
  }
}
.success-write-content.ver2 dl {
  margin-top: 44px;
}
.success-write-content.ver2 dl:first-child {
  margin-top: 46px;
}
.success-write-content.ver2 dl dd p {
  letter-spacing: -0.48px;
}
.success-write-content.ver2 dl dd .custom-select {
  position: relative;
  width: 100%;
}
.success-write-content.ver2 dl dd .select-box {
  padding: 9px 30px 10px 12px;
  margin-top: 19px;
  width: 100%;
  font-size: 16px;
  line-height: 24px;
  border-radius: 4px;
  border: solid 1px #ddd;
  background: url(/publish/img/button/ic-arrow-down.svg) #fff no-repeat right 12px center/12px 7px;
  box-sizing: border-box;
  word-wrap: break-word;
  white-space: normal;
  cursor: pointer;
  color: #999;
  cursor: pointer;
}
.success-write-content.ver2 dl dd .select-box.active {
  border-color: #222;
  color: #222;
}
.success-write-content.ver2 dl dd .option-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-top: none;
  max-height: 0;
  overflow: hidden;
  z-index: 10;
}
.success-write-content.ver2 dl dd .custom-select.open .option-list {
  display: block;
  max-height: 200px;
  overflow-y: auto;
}
.success-write-content.ver2 dl dd .option-list li {
  padding: 10px 12px;
  line-height: 1.4;
  cursor: pointer;
}
.success-write-content.ver2 dl dd .option-list li:hover {
  background-color: #f0f0f0;
}

@media (max-width: 719px) {
  .success-write-content.ver2 dl {
    margin-top: 40px;
  }
  .success-write-content.ver2 dl:first-child {
    margin-top: 30px;
  }
}
@media (max-width: 719px) {
  .success-write-content.ver2 dl dd .select-box {
    padding: 7px 28px 7px 11px;
    margin-top: 9px;
    font-size: 14px;
    line-height: 20px;
    background-size: 9px 5px;
    background-position: right 11px center;
  }
}
@media (max-width: 719px) {
  .success-write-content.ver2 dl dd .custom-select.open .option-list {
    max-height: 130px;
  }
}
.add-qna-box textarea {
  width: 100%;
  height: 144px;
  padding: 12px;
  font-size: 16px;
  line-height: 24px;
  border-radius: 4px;
  border: solid 1px #ddd;
  background-color: #fff;
  resize: none;
}
.add-qna-box img {
  display: block;
}
.add-qna-box button {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  cursor: pointer;
}
.add-qna-box button.add {
  border-radius: 4px;
  border: solid 1px #ddd;
  background-color: #fff;
  height: 40px;
  font-weight: bold;
  cursor: pointer;
}
.add-qna-box button.del {
  padding: 1px 7px;
  font-size: 12px;
  line-height: 18px;
  font-weight: bold;
  border-radius: 3px;
  background-color: #da4841;
  color: #fff;
  cursor: pointer;
}

@media (max-width: 719px) {
  .add-qna-box textarea {
    height: 104px;
    font-size: 14px;
    line-height: 20px;
  }
}
@media (max-width: 719px) {
  .add-qna-box button {
    gap: 6px;
  }
}
@media (max-width: 719px) {
  .add-qna-box button.add {
    height: 34px;
  }
}
@media (max-width: 719px) {
  .add-qna-box button.del {
    padding: 1px 6px;
    font-size: 11px;
    line-height: 17px;
  }
}
.guide-wrap .success-write-content.ver2 {
  padding: 104px 0 130px;
  background-color: #f1f1f1;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
  position: relative;
  /*max-height: 100vh;
  overflow: auto; */
}
.guide-wrap .success-write-content.ver2 .inner-wrap {
  padding: 24px 16px 32px;
  border: 1px solid #ededed;
  background-color: #fff;
}
.guide-wrap .success-write-content.ver2 dl dd {
  position: relative;
}
.guide-wrap .success-write-content.ver2 .inner-wrap dl dd p {
  letter-spacing: -0.8px;
}
.guide-wrap .success-write-content.ver2 .inner-wrap textarea {
  letter-spacing: -0.8px;
  overflow: hidden;
}
.guide-wrap .guide-box-bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 719px;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  /* 텍스트 선택 방지 */
  -webkit-user-drag: none;
}
.guide-wrap .guide-box .guide {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  padding-top: 22px;
  width: 400px;
  height: 56px;
  font-size: 15px;
  line-height: 22px;
  font-weight: bold;
  background: url(/publish/img/pg/img-textbox-bg.png) no-repeat center/cover;
  z-index: 1;
}
.guide-wrap .guide-box .guide1 {
  top: 28px;
}
.guide-wrap .guide-box .guide2 {
  bottom: -60px;
}
.guide-wrap .guide-box .guide3 {
  top: 28px;
}

@media (max-width: 719px) {
  .guide-wrap .success-write-content.ver2 {
    padding: 66px 16px 122px;
  }
}
@media (max-width: 719px) {
  .guide-wrap .success-write-content.ver2 .inner-wrap {
    padding: 20px 16px 30px;
  }
}
@media (max-width: 719px) {
  .guide-wrap .success-write-content.ver2 .inner-wrap textarea {
    min-height: 121px;
    max-height: 180px;
    height: auto;
  }
}
@media (max-width: 719px) {
  .guide-wrap .guide-box .guide {
    padding-top: 0;
    align-items: center;
    width: 100%;
    height: 46px;
    font-size: 13px;
    line-height: 19px;
    border-radius: 3px;
    background-color: #ceff43;
    background-size: contain;
  }
}
@media (max-width: 361px) {
  .guide-wrap .guide-box .guide {
    align-items: flex-start;
    padding-top: 17px;
    min-width: 328px;
    background: url(/publish/img/pg/img-textbox-bg.png) no-repeat center/cover;
  }
}
@media (max-width: 719px) {
  .guide-wrap .guide-box .guide::before {
    content: "";
    display: block;
    width: 28px;
    height: 16px;
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background: url(/publish/img/pg/img-text-box-triangle.svg) no-repeat center/cover;
  }
}
@media (max-width: 361px) {
  .guide-wrap .guide-box .guide::before {
    display: none;
  }
}
@media (max-width: 719px) {
  .guide-wrap .guide-box .guide1 {
    top: 32px;
  }
}
@media (max-width: 719px) {
  .guide-wrap .guide-box .guide2 {
    bottom: -60px;
  }
}
@media (max-width: 719px) {
  .guide-wrap .guide-box .guide3 {
    top: 31px;
  }
}
.button-box {
  display: flex;
  align-items: center;
  gap: 12px;
}
.button-box button {
  all: unset;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 40px;
  font-size: 16px;
  line-height: 24px;
  font-weight: bold;
  border-radius: 4px;
  border: solid 1px #ddd;
  background-color: #fff;
  box-sizing: border-box;
  cursor: pointer;
}
.button-box button:disabled {
  font-weight: normal;
}

@media (max-width: 719px) {
  .button-box {
    gap: 10px;
  }
}
@media (max-width: 719px) {
  .button-box button {
    gap: 6px;
    height: 36px;
    font-size: 14px;
    line-height: 20px;
  }
}
.sns-input-box .sns-input-tit {
  font-size: 16px;
  line-height: 24px;
  font-weight: bold;
}
.sns-input-box .sns-input-tit:not(:first-child) {
  margin-top: 32px;
}
.sns-input-box .sel {
  padding: 10px 16px;
  margin-top: 12px;
  width: 100%;
  font-size: 18px;
  line-height: 26px;
  border-radius: 4px;
  border: solid 1px #ddd;
  background: url(/publish/img/button/ic-arrow-down.svg) #fff no-repeat right 12px center/12px 7px;
  cursor: pointer;
}
.sns-input-box .input {
  padding-bottom: 10px;
  margin-top: 8px;
  width: 100%;
  font-size: 18px;
  line-height: 26px;
  border-bottom: 1px solid #ddd;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
}

@media (max-width: 719px) {
  .sns-input-box .sns-input-tit {
    font-size: 14px;
    line-height: 20px;
  }
}
@media (max-width: 719px) {
  .sns-input-box .sns-input-tit:not(:first-child) {
    margin-top: 30px;
  }
}
@media (max-width: 719px) {
  .sns-input-box .sel {
    padding: 7px 11px;
    margin-top: 8px;
    font-size: 16px;
    line-height: 24px;
    background-size: 9px 5px;
  }
}
@media (max-width: 719px) {
  .sns-input-box .input {
    padding-bottom: 6px;
    font-size: 16px;
    line-height: 24px;
  }
}
.img-capture-box > div {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}
.img-capture-box > div:first-child {
  margin-top: 0;
}
.img-capture-box .file {
  display: flex;
  align-items: center;
  width: calc(100% - 108px);
}
.img-capture-box p {
  font-size: 13px;
  line-height: 19px;
}
.img-capture-box .file-loca {
  width: -moz-fit-content;
  width: fit-content;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  word-break: break-all;
}

@media (max-width: 719px) {
  .img-capture-box > div {
    gap: 10px;
    margin-top: 10px;
  }
}
@media (max-width: 719px) {
  .img-capture-box .file {
    width: calc(100% - 98px);
  }
}
@media (max-width: 719px) {
  .img-capture-box p {
    font-size: 11px;
    line-height: 16px;
  }
}
@media (max-width: 719px) {
  .img-capture-box p {
    font-size: 11px;
    line-height: 16px;
  }
}
body.hong4 .filter-container.ver2 {
  padding: 20px;
}
body.hong4 .filter-container.ver3 {
  padding: 16px 20px 20px;
}
body.hong4 .post-detail-wrap.hit.ver2 .post.ul .post.answer {
  line-height: 24px;
}
body.hong4 .post-detail-wrap.hit.ver2 .post-comment {
  padding: 32px 0 0;
}
body.hong4 .post-detail-wrap.hit.ver2 .post-comment .comment-div li {
  min-height: unset;
}
body.hong4 .post-detail-wrap.hit.ver2 .post-comment .comment-div li:first-child {
  border-top: 0;
  padding-top: 24px;
}
body.hong4 .post-detail-wrap.hit.ver2 .comment-text {
  margin-top: 8px;
  line-height: 25px;
}
body.hong4 .success-write-content.ver2 {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1 0 auto;
}
body.hong4 .success-write-content.ver2 .inner-wrap {
  flex: 1 0 auto;
}
body.hong4 .nav.__guide-page {
  position: fixed;
  width: 100%;
  max-width: 718px;
  z-index: 2;
  border-bottom: 0;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  -webkit-user-drag: none;
}

@media (max-width: 719px) {
  body.hong4 .filter-container.ver2 {
    padding: 20px 16px;
  }
}
@media (max-width: 719px) {
  body.hong4 .filter-container.ver3 {
    padding: 20px 16px;
  }
}
@media (max-width: 719px) {
  body.hong4 .post-detail-wrap.hit.ver2 .post.ul .post.question {
    line-height: 24px;
    margin-bottom: 6px;
  }
  body.hong4 .post-detail-wrap.hit.ver2 .post.ul .post.answer {
    line-height: 20px;
  }
}
@media (max-width: 719px) {
  body.hong4 .post-detail-wrap.hit.ver2 .post-comment {
    padding: 30px 0 0;
  }
}
@media (max-width: 719px) {
  body.hong4 .post-detail-wrap.hit.ver2 .post-comment .comment-div li:first-child {
    padding-top: 20px;
  }
}
@media (max-width: 719px) {
  body.hong4 .post-detail-wrap.hit.ver2 .comment-text {
    margin-top: 8px;
    line-height: 22px;
  }
}
.popup-guide.ver1 {
  position: absolute;
  z-index: 99;
  top: -80px;
  width: 100%;
}
@media (max-width: 719px) {
  .popup-guide.ver1 {
    top: -50px;
  }
}

body.hong4 nav.nav .write-guide-btn {
  font-size: 1rem;
  line-height: 29px;
}
body.hong4 nav.nav .write-guide-btn .i-arrow-right {
  width: 7px;
  height: 12px;
  background: url(/hong4/_img/main/i-arrow-right-w.png) no-repeat center/7px 12px;
}
@media screen and (max-width: 719px) {
  body.hong4 nav.nav .write-guide-btn .i-arrow-right {
    width: 5px;
    height: 9px;
    background: url(/hong4/_img/main/i-arrow-right-w.png) no-repeat center/5px 9px;
  }
}

.divination-name {
  gap: 8px;
}
.divination-name.num {
  gap: 0;
}

/* //나만의 점 스토리 */



.counselorCate input[type='radio']:checked + span {
  position: relative;
}
.counselorCate input[type='radio']:checked + span::after {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #222;
  border-radius: 100%;
}
.counselor-bank .bankSel.active {
  font-weight: bold;
  border: 1px solid #6335b4;
  background-color: #6335b4;
  color: #fff;
}
.counselor-bank label > input[type='radio']:checked + [data-section='bankpop-btn'] {
  border-color: #222222;
  font-weight: bold;
}
@media (max-width: 719px) {
  .counselorCate input[type='radio']:checked + span::after {
    width: 10px;
    height: 10px;
  }
}

#join_btn {
  color: #FFF!important;
}

#join_btn:disabled { 
  background: #c1c1c1;
  border-color: #c1c1c1;
}

.recpatcha_box {
  background: #f9f9f9;
  border: 1px solid #d3d3d3;
  border-radius: 3px;
  overflow: hidden;
}
#g-recaptcha > div { 
  width: 298px!important;
  height: 72px!important;
  overflow: hidden;
  margin: 0 auto;
}
#g-recaptcha iframe {
  margin: -2px 0 0 -2px;
}


/* 개인정보처리방침 */
.policy-wrap {
  padding: 20px 20px 50px;
  line-height: 1.6;
  .inner {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  section {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .title {
    font-size: 18px;
    font-weight: 700;
  }
  .t1 {
    font-size: 16px;
    font-weight: 600;
  }
  .tt {
    font-size: 18px;
    font-weight: 700;
    border-bottom: 1px solid #bdbdbd;
    padding-bottom: 12px;
    margin-top: 6px;
  }
  .con1 {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 14px;
    font-weight: 400;
  }
  ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    background: #f5f5f5;
    border: 1px solid #e9e9e9;
    font-size: 13px;
    color: #666;
  }
  .table-wrap {
    width: 100%;
    overflow-y: auto;
  }
  table {
    width: 100%;
    min-width: 590px;
    font-size: 13px;
    color: #444;
    border-left: 1px solid #e9e9e9;
    border-top: 1px solid #e9e9e9;
    th {
      background: #f5f5f5;
      text-align: left;
    }
    th, td {
      padding: 10px 16px;
      border-right: 1px solid #e9e9e9;
      border-bottom: 1px solid #e9e9e9;
    }
  }
  em {
    font-size: 13px;
    padding: 0 16px;
    color: #666;
  }
  @media (max-width: 719px) {
    .inner {
      gap: 15px;
    }
    section {
      gap: 8px;
    }
    ul {
      gap: 6px;
      padding: 10px 12px;
    }
    .tt {
      padding-bottom: 8px;
      margin-top: 0;
    }
  }
}
#summai_agreement,
#policy_area,
#privacy_content,
.agreeContent,
.popup-div {
  .policy-wrap {
    padding: 0 6px;
    .inner {
      gap: 16px;
    }
    section {
      gap: 8px;
    }
    .title {
      font-size: 16px;
    }
    .tt {
      font-size: 16px;
      margin-top: 0;
      padding-bottom: 8px;
    }
    .t1 {
      font-size: 14px;
    }
    ul {
      background: #FFF;
      padding: 12px 16px;
      gap: 6px;
    }
    table {
      th {
        background: #d9d9d9;
      }
      td {
        background: #FFF;
      }
    }
  }
}

@media (max-width: 719px) {
  #vip-popup {  
      .inner-body {
        min-height: calc(100dvh - 50px);
      }
  }
}


.digit-wrapper {
    display: inline-block;
    width: 8px;
    height: 20px;
    overflow: hidden;
    position: relative;
    border-radius: 4px;
}

.digit-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
}

.digit {
    height: 20px;
    line-height: 20px;
}