@charset "UTF-8";

/* ── CSS Custom Properties ── */
:root {
  --status-bar-height: 0px;
  --safe-area-bottom: 0px;
  --header-height: 49px;
}

.text-area::-webkit-scrollbar {
  -webkit-appearance: none;
}
.text-area::-webkit-scrollbar:vertical {
  width: 11px;
}
.text-area::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  background-clip: padding-box;
  border: 4px solid transparent;
}

/* text-size-adjust: CDN reset.css의 deprecated 'none' 값을 올바른 '100%'로 오버라이드 */
* {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: #fafafc;
}
body.no-scroll {
  overflow: hidden;
}
.wrap {
  height: 100vh;
}
.contents {
  background: #fafafc;
  padding-top: calc(var(--status-bar-height) + var(--header-height));
}
.contents.bg-white {
  background: #fafafc;
}
/* 헤더 없는 페이지 (프로필 생성/수정) */
.wrap .contents.profile-reg-layout {
  padding-top: 0;
}
/* 헤더 있는 profile-reg-layout 페이지 (회원가입 등) */
.wrap .header + .contents.profile-reg-layout {
  padding-top: calc(var(--status-bar-height) + var(--header-height));
}
/* 레이어 팝업 (도시선택, 프로필선택) */
.wrap .contents.layer-contents {
  padding-top: 0;
  padding-bottom: 0;
  box-sizing: border-box;
  width: 100%;
}
/* 메인 페이지 */
.contents.main-contents {
  padding-top: 0;
}
.contents.flex-layout {
  display: flex;
  height: 100%;
}
/* .pad-status: 헤더 없는 페이지에서 status bar 패딩 */
.pad-status {
  padding-top: var(--status-bar-height);
}
img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.blind {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}
.hidden {
  display: none;
}

.fixed {
  position: fixed;
  width: 100%;
  z-index: 10;
}
/*header*/
.header {
  position: fixed;
  top: 0;
  width: 100%;
  text-align: center;
  z-index: 100;
  height: var(--header-height);
  padding-top: var(--status-bar-height);
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: content-box;
  background: #fff;
}
.header.header-hidden {
  transform: translateY(-100%);
}
.header-title {
  font-size: 17px;
  color: #1e1e1f;
  font-weight: 600;
  text-align: center;
}
.header-title-counseling {
  font-size: 18px;
  color: #232323;
  font-weight: 700;
  fontfamily: 'NanumSquare Neo';
  wordwrap: 'break-word';
  text-align: center;
}
.header-title img {
  width: 100px;
}
.main-header {
  background: #fafafc;
}
.main-header.bg-white {
  background: #fafafc;
}
/* /// header button ///*/
.header-btn {
  width: 28px;
  height: 28px;
  position: absolute;
}
.header-btn:before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  /*    background: rgba(255,0,0,0.1)*/
}
.header-btn.left {
  left: 15px;
}
.header-btn.right {
  right: 15px;
}
/*menu*/
.header-btn.menu {
  background: url('../images/header/menu.svg') no-repeat center;
  background-size: 23px;
}
.header-btn.menu:active {
  background: url('../images/header/menu_press.svg') no-repeat center;
  background-size: 23px;
}
.header-btn.back {
  background: url('../images/header/back.svg') no-repeat 1px center;
  background-size: 10px;
}
.header-btn.back:active {
  background: url('../images/header/back_press.svg') no-repeat 1px center;
  background-size: 10px;
}

.header-btn.profile-move {
  background: url('../images/header/profile_move.svg') no-repeat 1px center;
  background-size: 26px;
}
.header-btn.profile-move:active {
  background: url('../images/header/profile_move_press.svg') no-repeat 1px center;
  background-size: 26px;
}
.header-btn.profile {
  background: url('../images/header/profile.svg') no-repeat 1px center;
  background-size: 26px;
}
.header-btn.profile:active {
  background: url('../images/header/profile_press.svg') no-repeat 1px center;
  background-size: 26px;
}
.header-btn.connection {
  background: url('../images/header/plus_profile.svg') no-repeat 1px center;
  background-size: 26px;
}
.header-btn.connection:active {
  background: url('../images/header/plus_profile_press.svg') no-repeat 1px center;
  background-size: 26px;
}

.header-btn.share {
  background: url('../images/header/share.svg') no-repeat right center;
  background-size: 18px;
}
.header-btn.share:active {
  background: url('../images/header/share_press.svg') no-repeat right center;
  background-size: 18px;
}
.header-btn.mypage {
  background: url('../images/header/counseling_mypage.svg') no-repeat right center;
  background-size: 18px;
}
.header-btn.mypage:active {
  background: url('../images/header/counseling_mypage.svg') no-repeat right center;
  background-size: 18px;
}

.header-btn.close {
  background: url('../images/header/close.svg') no-repeat right;
  background-size: 16px;
}
.header-btn.close:active {
  background: url('../images/header/close_press.svg') no-repeat right;
  background-size: 16px;
}
.header-btn.shop.left {
  left: 50px;
}
.header-btn.shop {
  background: url('../images/header/point_shop.svg') no-repeat right;
  background-size: 22px;
}
.header-btn.shop:active {
  background: url('../images/header/point_shop_press.svg') no-repeat right;
  background-size: 22px;
}
.header-btn.counseling-mypage {
  background: url('../images/header/counseling_mypage.svg') no-repeat right;
  background-size: 22px;
}
.header-btn.reload {
  background: url('../images/header/reload.svg') no-repeat right;
  background-size: 26px;
}
/* /// header button ///*/
.profile-reg-layout {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
  min-height: 100%;
}
.profile-reg-layout:not(.common) {
  min-height: calc(100% - var(--safe-area-bottom));
}
.profile-reg-layout.common {
  display: block;
  flex-direction: unset;
}
.profile-reg-layout .wrap-btn-area {
  margin-top: auto;
}

/*관계 프로필 생성*/
.reg-profile-top {
  position: relative;
  clip-path: ellipse(100% 100% at 50% 0%);
  -webkit-clip-path: ellipse(100% 100% at 50% 0%);
}
.reg-profile-top .content-area {
  position: absolute;
  z-index: 0;
  top: 0;
  width: 100%;
}

.step-area {
  padding: 18px 0 23px;
  display: flex;
  justify-content: center;
}
.step-area span {
  width: 8px;
  height: 8px;
  background: #fff;
  opacity: 0.5;
  border-radius: 15px;
  margin: 0 3.5px;
  z-index: 1;
}
.step-area span.active {
  width: 15px;
  opacity: 1;
}

.reg-profile-top h1 {
  font-size: 17px;
  color: #fff;
  z-index: 1;
  position: relative;
  padding: 0 40px;
  line-height: 22px;
  word-break: keep-all;
  text-align: center;
}

.reg-profile-top h1.complete {
  font-size: 24px;
}

.reg-profile-top.modify h1 {
  padding-top: 15px;
}
.reg-profile-top.modify h1 + p {
  text-align: center;
  font-size: 15px;
  color: #fff;
  padding-top: 10px;
}

.reg-profile-content {
  padding: 10px 36px 0;
}
.reg-profile-content .title {
  font-size: 25px;
  color: #464a4e;
  text-align: center;
  line-height: 30px;
  word-break: break-all;
  padding-top: 20px;
}
.reg-profile-content .title span {
  color: #7e459e;
}

.reg-profile-content.personal .title {
  padding-top: 40px;
}
.reg-profile-content .title.complete {
  font-size: 19px;
}
.reg-profile-content .title.complete p {
  font-size: 27px;
}
.reg-profile-content .title.complete .desc {
  margin-top: 20px;
  word-break: break-all;
}
.reg-profile-content .input-area {
  padding: 25px 18px 0;
}

.reg-profile-content .input-area dl {
  margin-bottom: 20px;
}
.reg-profile-content .input-area dt {
  font-size: 12px;
  color: #7e459e;
  font-weight: 600;
  margin-bottom: 10px;
  line-height: 18px;
  word-break: break-all;
}

.reg-profile-content .input-area .check-area {
  margin-top: 10px;
}
.reg-profile-content .tag-relation {
  margin: 20px -18px 0;
}
.tag-relation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.tag-relation .check-relation-tag {
  margin-right: 8px;
}
.check-relation-tag input + label {
  font-size: 12px;
  font-weight: 600;
  border: 1.5px solid #000;
  border-radius: 15px;
  padding: 8px 18px;
  margin-bottom: 7px;
  line-height: inherit;
  min-height: inherit;
}
.check-relation-tag input + label:before {
  display: none;
}

/*연인*/
.tag-relation .type01,
.check-relation-tag .type01 + label {
  border-color: #ff7778;
  color: #ff7778;
}
/*부부*/
.tag-relation .type02,
.check-relation-tag .type02 + label {
  border-color: #f066a0;
  color: #f066a0;
}
/*가족*/
.tag-relation .type03,
.check-relation-tag .type03 + label {
  border-color: #27b67a;
  color: #27b67a;
}
/*친구*/
.tag-relation .type04,
.check-relation-tag .type04 + label {
  border-color: #47b6c4;
  color: #47b6c4;
}
/*사제*/
.tag-relation .type05,
.check-relation-tag .type05 + label {
  border-color: #7d75e1;
  color: #7d75e1;
}
/*원수*/
.tag-relation .type06,
.check-relation-tag .type06 + label {
  border-color: #c95a74;
  color: #c95a74;
}
/*동료*/
.tag-relation .type07,
.check-relation-tag .type07 + label {
  border-color: #af7ded;
  color: #af7ded;
}
.check-relation-tag .type01:checked + label {
  background: #ff7778;
}
.check-relation-tag .type02:checked + label {
  background: #f066a0;
}
.check-relation-tag .type03:checked + label {
  background: #27b67a;
}
.check-relation-tag .type04:checked + label {
  background: #47b6c4;
}
.check-relation-tag .type05:checked + label {
  background: #7d75e1;
}
.check-relation-tag .type06:checked + label {
  background: #c95a74;
}
.check-relation-tag .type07:checked + label {
  background: #af7ded;
}

.check-relation-tag input[type='checkbox']:checked + label {
  color: #fff;
}

.reg-profile-top .img-area {
  display: flex;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}

.reg-profile-top .img-area .character {
  width: 92px;
  height: 130px;
}
.reg-profile-top .img-area .pic {
  width: 95px;
  border: 4px solid #fff;
  border-radius: 100%;
  overflow: hidden;
  margin: 0 5px 20px;
}

.personal.img-area .character {
  width: 100px;
  height: 140px;
}
.personal.img-area .pic {
  margin-bottom: 40px;
}
.icon-x img {
  width: 27px;
  height: 27px;
  margin: 0 15px;
}

.profile-desc {
  margin: 0 15px;
  font-size: 10px;
  color: #7c7f84;
  line-height: 1.5;
  position: relative;
  padding-left: 12px;
}
.profile-desc:before {
  content: '※';
  color: #7e459e;
  font-size: 10px;
  vertical-align: middle;
  display: inline-block;
  position: absolute;
  left: 0;
}

.btn-profile {
  margin: -15px auto;
  z-index: 1;
  position: relative;
}

.btn-pic-add {
  display: block;
  width: 35px;
  height: 35px;
  background: #fff;
  border-radius: 100%;
  font-size: 0;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
  flex: none;
}
.btn-pic-add:after {
  width: 22px;
  height: 19px;
  background: url(../images/icon/icon_camera.svg) no-repeat;
}
.btn-pic-add.edit:after {
  width: 21px;
  height: 21px;
  background: url(../images/icon/icon_edit.svg) no-repeat;
}

/*로그인*/
.login-wrapper {
}

.login-content-area {
  /*  height: 100%;*/
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  background: url(../images/bg_login.png);
  background-size: cover;
}
.login-content-area .help {
  padding: 20px 0 0 14px;
  font-size: 12px;
  color: #fff;
  font-weight: 800;
}
.login-content-area .help a:before {
  content: '';
  width: 24px;
  height: 24px;
  display: inline-block;
  background: url(../images/icon/login_question.svg) no-repeat;
  vertical-align: middle;
  margin-right: 8px;
}
.login-content-area .logo {
  width: 225px;
  margin: 0 auto;
  padding: 119px 40px 49px;
  display: flex;
  flex-direction: column;
}
.login-content-area .logo img {
  max-width: 100%;
}
.login-content-area .logo h1 {
  text-align: center;
  font-size: 15px;
  color: #fff;
  font-weight: 600;
  margin-top: 20px;
}
.login-content-area .input-area {
  width: 250px;
  margin: 0 auto;
  /*display: flex;*/
  /*flex-direction: column;*/
  /*flex: 1;*/
  justify-content: center;
}
.login-content-area .input-area input[type='text'],
.login-content-area .input-area input[type='password'] {
  background: transparent;
  box-shadow: none;
  border: 1px solid #fff;
  margin: 3px 0px;
  color: #fff;
  padding-left: 12px;
  height: 47px;
}
.login-content-area .input-area input[type='text']::placeholder,
.login-content-area .input-area input[type='password']::placeholder {
  color: #fff;
}
.login-content-area .input-area .check-area {
  margin-top: 5px;
}
.login-content-area .input-area input[type='checkbox'] + label {
  color: #fff;
  font-size: 13px;
  font-weight: 400;
  filter: brightness(100);
}

.login-btn-area {
  padding: 20px 0 12px;
}
.btn-login {
  background: #fff;
  color: #8C5BF9;
  font-weight: 600;
  height: auto;
  padding: 15px 0px;
  line-height: normal;
}
.btn-login:active {
  background: #af7ded;
  color: #fff;
}
.login-content-area .input-area .sub-btn-area {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 600;
}
.login-content-area .input-area .sub-btn-area .btn-pw-find {
  opacity: 0.6;
  font-weight: 400;
}

.wrap-sns-btn-area {
  padding: 30px 0;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.wrap-sns-btn-area h2 {
  font-size: 12px;
  color: #fff;
  font-weight: 600;
  margin-bottom: 20px;
}
.wrap-sns-btn-area button {
  width: 50px;
  height: 50px;
  margin: 0 5px;
}
.btn-facebook {
  background: url(../images/icon/sns_f.svg) no-repeat;
}
.btn-twitter {
  background: url(../images/icon/sns_t.svg) no-repeat;
}
.btn-naver {
  background: url(../images/icon/sns_n.svg) no-repeat;
}
.btn-apple {
  background: url(../images/icon/sns_a.svg?v=1) no-repeat;
}
.btn-kakao {
  background: url(../images/icon/sns_k.svg) no-repeat;
}
.btn-facebook:active {
  background: url(../images/icon/sns_f_on.svg) no-repeat;
}
.btn-twitter:active {
  background: url(../images/icon/sns_t_on.svg) no-repeat;
}
.btn-naver:active {
  background: url(../images/icon/sns_n_on.svg) no-repeat;
}
.btn-apple:active {
  background: url(../images/icon/sns_a_on.svg?v=1) no-repeat;
}
.btn-kakao:active {
  background: url(../images/icon/sns_k_on.svg) no-repeat;
}
.powered {
  opacity: 0.7;
  text-align: center;
  margin: 0 auto;
  width: 88px;
  padding: 15px 0;
}

/*회원가입*/
.signup-layout {
  padding: 25px 15px;
}
.signup-input dl {
  margin-bottom: 20px;
}
.signup-input dt {
  color: #464a4e;
  font-size: 14px;
  margin-bottom: 10px;
}
.signup-input dd .error-txt {
  margin-top: 5px;
  text-align: right;
}

.signup-layout .check-area {
  margin-bottom: 15px;
}
.signup-layout .check-area label a {
  color: #7e459e;
  text-decoration: underline;
}

.main-layout .image-wrapper {
  padding: 15px 0;
}

.main-layout .section-counseling{
  padding: 15px 20px;
}

/*main*/
.section-profile {
  padding: 12.5px 20px 10px;
}
.section-profile .profile-area {
  background: url(../images/bg_main_profile.jpg);
  border-radius: 20px;
  background-size: cover;
  display: flex;
  flex-direction: column;
  text-align: center;
  align-items: center;
  justify-content: space-between;
  /*padding-top: 30px;*/
  overflow: hidden;
  margin-bottom: 15px;
}

.icon-profile-add {
  width: 80px;
  height: 80px;
  background: url(../images/profile/main/profile_default.svg) no-repeat;
  position: relative;
  margin-top: 30px;
}
.icon-profile-add:after {
  content: '';
  display: block;
  width: 25px;
  height: 25px;
  background: url(../images/icon/icon_add.svg) no-repeat;
  bottom: 0;
  right: 0;
  position: absolute;
}
.icon-profile-add:active:after {
  background: url(../images/icon/icon_add_on.svg) no-repeat;
}
.section-profile .profile-area .title {
  font-size: 18px;
  color: #fff;
  padding: 16px 0 10px 0;
  line-height: 1.3;
}
.section-profile .profile-area .title strong {
  font-weight: 800;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex: 1;
}

.section-profile .profile-area .profile-info {
  display: flex;
  padding: 20px 0 15px 0;
}

.today-keyword-area {
  padding: 0 20px;
  width: 100%;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}
.today-keyword {
  background: #fff;
  padding: 18px 22px 18px 12px;
  border-radius: 10px;
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.4);
  text-align: left;
}
.today-keyword:after {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: ' ';
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #fff;
  border-width: 10px;
  margin-left: -10px;
}
.today-keyword .txt-area {
  overflow: hidden;
  min-height: 36px;
  display: flex;
  align-items: center;
  margin-left: 45px;
}
.today-keyword .txt-area .tit {
  font-size: 16px;
  font-weight: 800;
  color: #252729;
}
.today-keyword .txt-area .sub {
  font-size: 16px;
  font-weight: 500;
  color: #7c7f84;
  line-height: 18px;
  margin-top: 1px;
}
.today-keyword .txt-area .sub span {
  color: #7e459e;
}

.today-keyword .txt-area:before {
  content: '';
  display: inline-block;
  width: 37px;
  height: 37px;
  background: url(../images/icon/calendar_human.svg) no-repeat;
  position: absolute;
  top: auto;
  left: 30px;
}

.today-keyword .txt-area:after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 13px;
  background: url(../images/icon/icon_link.svg) no-repeat;
  position: absolute;
  top: auto;
  right: 26px;
}

.section-profile .profile-area .sub-area {
  padding: 10px 5px;
  display: flex;
  width: 100%;
  flex-direction: column;
}
.section-profile .profile-area .sub-area.bg {
  background: rgba(149, 68, 196, 0.3);
}

.section-profile .profile-area .sub-area > div {
  color: #edcbff;
  font-size: 15px;
  line-height: 1.3;
  opacity: 0.98;
}
.section-profile .profile-area .sub-area > div strong {
  color: #fff;
  font-weight: 800;
}

.i-description {
  display: flex;
  padding: 5px 0 2px;
  flex-direction: column;
}
.i-description section {
  flex: 1;
  text-align: left;
  color: #7c7f84;
  opacity: 1;
  margin-top: 1px;
  margin-bottom: 1px;
}
.section-profile .profile-area .i-description section .title {
  font-size: 15px;
  font-weight: 800;
  padding: 10px 0;
  word-break: break-all;
}
.section-profile .profile-area .i-description section p {
  font-size: 12px;
  line-height: 1.5;
}
.i-description section .sect {
  font-size: 14px;
  display: flex;
  font-weight: 500;
  line-height: 18px;
  /*padding-left: 26px;*/
  position: relative;
  align-items: center;
}
/*
.i-description section:first-child {
  border-right: 1px solid rgba(255, 255, 255, 0.5);
}
.i-description section:last-child {
  padding-left: 22px;
}
.i-description section:first-child .sect {
  color: #ff7778;
}
.i-description section:last-child .sect {
  color: #7d8bed;
}
*/
.i-description section .sect:before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  /*position: absolute;*/
  left: 1px;
  /*top: -2px;*/
  margin: auto 4px;
  min-width: 18px;
}

.i-description section:nth-child(1) .sect:before {
  background: url(../images/icon/manual_icon_01.svg) no-repeat;
}
.i-description section:nth-child(2) .sect:before {
  background: url(../images/icon/manual_icon_02.svg) no-repeat;
}
.i-description section:nth-child(3) .sect:before {
  background: url(../images/icon/manual_icon_03.svg) no-repeat;
}

.section-profile .profile-area .img-area {
  width: 90px;
  margin: auto;
  min-width: 90px;
  margin-left: 15px;
  margin-right: 10px;
  margin-top: -9px;
}
.section-profile .profile-area .img-area.pic {
  border-radius: 100%;
  border: 4px solid #fff;
  overflow: hidden;
  width: 90px;
  height: 90px;
  margin: auto;
  min-width: 90px;
  margin-left: 15px;
  margin-right: 10px;
  vertical-align: middle;
}
.section-profile .profile-area .title.profile-name {
  font-size: 23px;
  width: 92%;
  display: flex;
  border-bottom: 1px solid rgb(255, 255, 255, 0.5);
}

.section-profile .profile-area .profile-edit {
  width: 22px;
  margin-top: 4px;
  filter: brightness(10);
}

.main-layout .main-section-title {
  font-size: 20px;
  line-height: 30px;
  font-weight: 700;
  display: flex;
  justify-content: space-between;
  padding: 15px 0;
  color: #393A3C;
  align-items: center;
  word-break: break-word;
}
.btn-more {
  width: 21px;
  height: 21px;
  background: url(../images/icon/icon_more.svg) no-repeat;
}
.btn-more:active {
  background: url(../images/icon/icon_more_on.svg) no-repeat;
}
.btn-more-gray {
  width: 18px;
  height: 18px;
  background: url(../images/icon/right.svg) no-repeat;
}

.main-layout .guide-list {
  display: flex;
  text-align: center;
  /*    justify-content: space-between;*/
}

.main-layout .guide-list.profiles.slick-slider {
  flex-direction: column;
}
.main-layout .guide-list li.profile {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
  border-width: 1px;
  border-style: solid;
  border-color: #E6E6E6;
  padding: 5px 10px 12px;
  width: calc((100% / 3) - 6px);
  position: relative;
  margin-right: 4px;
  margin-left: 4px;
}

.main-layout .guide-list li.profile.on {
  border-width: 1.0px;
  border-style: solid;
  border-color: #E6E6E6;
}
.main-layout .guide-list li.on::before {
  content: '';
  width: 14px;
  height: 18px;
  position: absolute;
  background: url(../images/profile/icon/lock.svg) no-repeat;
  left: 4px;
  top: 4px;
}
.main-layout .guide-list li.profile .img-area {
  width: 52px;
  margin: 0 auto;
}
.main-layout .guide-list li.profile .img-area.pic {
  padding: 5px 2px;
  position: relative;
}
.main-layout .guide-list li.profile .img-area.pic img {
  border-radius: 100%;
}
.main-layout .guide-list li.profile .name {
  font-size: 12px;
  color: #7c7f84;
  margin-top: 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
  padding: 1px 0;
  overflow: hidden;
}
.main-layout .guide-list .pic.type:after {
  content: '';
  width: 18px;
  height: 18px;
  position: absolute;
  right: -1px;
  bottom: 5px;
}
.main-layout .guide-list.profiles .dim {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 8px;
  margin: 0px 0px 0px -10px;
  display: flex;
}
.main-layout .guide-list.relation .dim {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 8px;
  display: flex;
}
.main-layout .guide-list.relation li.profile {
  position: relative;
}
.main-layout .guide-list .dim span {
  justify-content: center;
  margin: auto;
  color: white;
  font-size: 30px;
  font-weight: 800;
}

.pic.type-0:after {
  background: url(../images/profile/icon/type_0.svg) no-repeat;
}
.pic.type-1:after {
  background: url(../images/profile/icon/type_1.svg) no-repeat;
}
.pic.type-2:after {
  background: url(../images/profile/icon/type_2.svg) no-repeat;
}
.pic.type-3:after {
  background: url(../images/profile/icon/type_3.svg) no-repeat;
}
.pic.type-4:after {
  background: url(../images/profile/icon/type_4.svg) no-repeat;
}
.section-rel-guide-list {
  padding: 15px 20px;
}
.main-layout .guide-list.relation {
  flex-direction: column;
}
.main-layout .guide-list.relation li:last-child {
  margin-bottom: 5px;
}
.main-layout .guide-list.relation li {
  width: calc(100% - 8px);
  margin-bottom: 15px;
}
.main-layout .guide-list.relation .relation-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 5px;
}
.main-layout .guide-list.relation .img-area {
  margin: 0;
}
.main-layout .guide-list.relation .icon-x {
  width: 11px;
  height: 11px;
  margin-top: 8px 5px;
}
.main-layout .guide-list.relation .txt-area {
  flex: 50% 0 0;
  text-align: left;
  width: 50%;
  margin-left: 12px;
}
.main-layout .guide-list.relation .txt-area .rel-name {
  font-size: 15px;
  color: #464a4e;
  font-weight: 600;
  line-height: 1.2;
}
.main-layout .guide-list.relation .txt-area .name {
  margin-top: 5px;
  white-space: inherit;
}

.main-layout .powered-area {
  background: #f1f2f7;
  border-radius: 20px 20px 0 0;
  margin: 26px -20px 0;
  padding: 11px 0;
}
.main-layout .powered-area img {
  width: 118px;
  margin: 0 auto;
  filter: grayscale(100);
  opacity: 0.5;
}

.main-layout .empty-message {
  position: relative;
  z-index: 0;
  font-size: 14px;
}
.main-layout .empty-message {
  padding: 30px 0;
}

.main-layout .section-profile .empty-message {
  padding: 30px 0;
}

.main-layout .section-rel-guide-list .empty-message {
  padding: 50px 0;
}

/*프로필 세팅*/
.profile-list {
  display: flex;
  flex-direction: column;
}
.profile-list li {
  transition: background 0.2s;
}
.profile-list li .list-content {
  display: flex;
  flex: 1;
  min-height: 61px;
  border-bottom: 1px solid #dedfe3;
  padding: 0 15px;
  align-items: center;
}
.profile-list:not(.relation) li:active {
  /*    background: #E0E1E9;*/
}
.profile-list li .img-area {
  width: 35px;
  flex: none;
  margin-top: 0px;
  position: relative;
}
.profile-list li .img-area.pic {
  margin-top: 0;
}
.profile-list li .img-area.pic img {
  border-radius: 100%;
}
.profile-list li .profile-area {
  flex: 1;
  padding-left: 13px;
}
.profile-list li .profile-area .name {
  font-size: 15px;
  color: #464a4e;
}
.profile-list li .profile-area .date {
  font-size: 11px;
  color: #696c70;
  display: block;
  margin-top: 4px;
}
.profile-list .pic.type:after {
  content: '';
  width: 18px;
  height: 18px;
  position: absolute;
  right: -5px;
  bottom: -2px;
}
.btn-today {
  height: 31px;
  padding: 0 15px;
  border-radius: 15px;
  line-height: 31px;
}
.profile-list .main {
  width: 15px;
  height: 15px;
  display: inline-block;
  background: url(../images/icon/icon_profile_main.svg) no-repeat;
  vertical-align: top;
  margin-left: 5px;
}
.profile-list .lock {
  width: 11px;
  height: 15px;
  display: inline-block;
  background: url(../images/profile/icon/lock.svg) no-repeat;
  vertical-align: top;
  margin-left: 5px;
}
/*
.profile-list li.on .img-area:after {
  content: '';
  width: 18px;
  height: 18px;
  position: absolute;
  background: url(../images/icon/icon_profile_main.svg);
  right: -5px;
  bottom: -2px;
}
*/
.profile-list .relation-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  background: #f0f0f0;
  height: 31.5px;
  transition: background 0.2s;
}
.profile-list .relation-info .rel-name {
  color: #464a4e;
  margin-top: 2px;
}
.relation-info .rel-info {
  display: flex;
}
.relation-info .tag-relation span {
  font-size: 10px;
  font-weight: 600;
  border-width: 1px;
  border-style: solid;
  border-radius: 15px;
  padding: 3px 10px;
  display: inline-block;
  margin-left: 5px;
}

.profile-list .icon-x img {
  width: 17px;
  height: 17px;
}

.profile-swipe {
  overflow: hidden;
}

.profile-swipe .swipe-list {
  position: relative;
}
.profile-swipe .swipe-list:active {
  background: #e0e1e9;
}
.profile-swipe li.open {
  background: #e0e1e9;
}
.profile-swipe li.open .relation-info {
  background: #d8dae3;
}
.profile-swipe .swipe-list .action {
  position: absolute;
  width: 120px;
  height: 100%;
  top: 0;
  border: 0;
  outline: none;
}

.profile-swipe .swipe-list .action:before {
  position: absolute;
  top: 0;
  content: '';
  width: 2000px;
  height: 100%;
}

.profile-swipe .swipe-list .action {
  right: -120px;
}

.profile-swipe .action .btn-area {
  display: flex;
}
.profile-swipe .action button {
  width: 60px;
  height: 60px;
  flex: 1;
  border-radius: 0;
  font-size: 0;
}
.profile-swipe .action button:before {
  content: '';
  display: block;
  margin: 0 auto;
}
.btn-profile-main {
  background: #aca5b2;
}
.btn-profile-main:active {
  background: #aca5b2;
}
.btn-profile-main:before {
  width: 23px;
  height: 23px;
  background: url(../images/icon/icon_main.svg) no-repeat;
  filter: brightness(10);
}

.btn-profile-favorite {
  background: #621c82;
}
.btn-profile-favorite:active {
  background: #621c82;
}
.btn-profile-favorite.is-active:before {
  background: url(../images/icon/icon_favorite_on.svg) no-repeat;
}
.btn-profile-favorite:before {
  width: 23px;
  height: 23px;
  background: url(../images/icon/icon_favorite.svg) no-repeat;
  filter: brightness(10);
}
.btn-profile-edit {
  background: #7f7996;
}Z
.btn-profile-edit:active {
  background: #5e528b;
}
.btn-profile-edit:before {
  width: 23px;
  height: 23px;
  background: url(../images/icon/icon_edit.svg) no-repeat;
  filter: brightness(10);
}
.btn-profile-del {
  background: #ff7778;
}
.btn-profile-del:active {
  background: #f84c58;
}
.btn-profile-del:before {
  width: 22px;
  height: 22px;
  background: url(../images/icon/icon_delete.svg) no-repeat;
  filter: brightness(10);
}

/*태어난도시 선택 레이어*/
.reg-profile-layer .top-area {
  background: url(../images/bg_layer_top.jpg) no-repeat;
  background-size: cover;
}
.reg-profile-layer .top-area .top-cont {
  padding: 0 15px 20px;
}
.reg-profile-layer .top-area .top-cont .tit {
  font-size: 17px;
  color: #fff;
  padding-top: 15px;
  padding-bottom: 13px;
  position: relative;
  display: flex;
  justify-content: space-between;
}

.btn-layer-closed {
  width: 18px;
  height: 18px;
  background: url(../images/icon/x.svg) no-repeat;
}
.btn-layer-closed:active {
  background: url(../images/icon/x_press.svg) no-repeat;
}

.search-country-list li {
  display: flex;
  justify-content: space-between;
  min-height: 61px;
  align-items: center;
  padding: 0 15px;
  border-bottom: 1px solid #dedfe3;
  transition: background 0.2s;
}
.search-country-list li h2 {
  font-size: 15px;
  color: #464a4e;
}
.search-country-list li h3 {
  font-size: 13px;
  color: #96999d;
  text-align: right;
}
.search-country-list li:active {
  background: #e0e1e9;
}

.manual-sub-sect-tab {
  background: url(../images/bg_manual.jpg);
  background-size: cover;
  padding-bottom: 38px;
  height: 83px;
  width: 100vw;
}
.manual-sub-sect-tab.empty {
  background: url(../images/bg_manual_02.jpg);
  background-size: cover;
}

.manual-section .profile-area {
  /*width: 100%;*/
  margin: -38px 10px 0px 10px;
}
.profile-card {
  background: #fff;
  display: flex;
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
}
.profile-card .img-area {
  width: 55px;
  height: 55px;
  flex: none;
  margin-left: 10px;
  align-self: center;
}
.profile-card .img-area.change-icon {
  padding: 7px;
  margin-left: 2px;
}
.profile-card .img-area img {
  border-radius: 100%;
  object-fit: contain;
}
.profile-card .txt-area {
  padding-left: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
  overflow: hidden;
  margin-top: 4px;
}
.profile-card .txt-area .txt-area-ex {
  display: flex;
  margin: 2px 0px 4px 0px;
}
.profile-card.lock .txt-area .lock-icon {
  min-width: 12px;
  background: url(../images/profile/icon/lock.svg) no-repeat;
  margin: auto 2px auto 5px;
  background-repeat: no-repeat;
  height: 16px;
}
.profile-card .txt-area .name {
  font-size: 20px;
  color: #393A3C;
  text-overflow: ellipsis;
  font-weight: 380;
}
.profile-card .txt-area .date {
  color: #808080;
  font-size: 13px;
  margin-top: 4px;
  font-weight: 300;
}
.profile-card.relation .lock {
  flex: 1;
}
.profile-card.relation .lock img {
  width: 13px;
  height: 17px;
  margin: 3px 0px 0px 6px;
}

.transit-profile {
  position: relative;
  width: 100%;
}

.transit-profile .transit-profile-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.transit-profile .transit-profile-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.transit-profile .transit-profile-info {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
}

.transit-profile .transit-profile-info .transit-profile-img {
  padding-top: 40px;
  display: flex;
  align-items: center;
}

.transit-profile .transit-profile-info .transit-profile-img img {
  max-width: 260px;
  max-height: 260px;
}

.transit-profile .transit-profile-detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding-bottom: 40px;
}

.transit-profile .transit-profile-detail .transit-profile-text {
  font-size: 16px;
  color: #ffffff;
  line-height: 24px;
  font-weight: 400;
  margin: 5px;
}

.transit-profile .transit-profile-detail .transit-profile-text.type2 {
  font-size: 22px;
  line-height: 34px;
  width: 80%;
  text-align: center;
}

.transit-profile .transit-profile-detail .transit-profile-text.type2 span {
  font-weight: 800;
}

.transit-profile .transit-profile-detail .transit-profile-btn {
  border: 1px solid #fff;
  border-radius: 50px;
  padding: 8px 12px;
  color: #fff;
  align-items: center;
  display: flex;
  margin-top: 10px;
  font-size: 12px;
}

.need-profile-btn {
  border: 1px solid #8C5BF9;
  border-radius: 50px;
  padding: 8px 12px;
  color: #8C5BF9;
  align-items: center;
  display: flex;
  margin-top: 10px;
  font-size: 12px;
  background: #fff;
}

.transit-title{
  margin-top: 50px;
  padding-bottom: 15px;
  font-size: 20px;
  line-height: 30px;
  color: #393A3C;
  font-weight: 300;
}

.transit-title span{
  font-weight: 600;
}

.transit-random{
  font-size: 12px;
  line-height: 17px;
  color: #393A3C;
  margin: 15px 0px;
}
.transit-random span{
  color: #8C5BF9;
}

.transit-random:before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url(../images/transit/mark.svg) no-repeat;
  vertical-align: middle;
  margin-right: 6px;
}

.profile-menu-item {
  display: flex;
  flex-direction: row;
  border: 1px solid #e6e6e6;
  border-radius: 10px;
  padding: 10px;
  background: #fff;
}
.profile-menu-item .img-area{

  border-radius: 6px;
  border: 1px solid #E6E6E6;
  overflow: hidden;
}
.profile-menu-item .img-area img{
  width: 100px;
  height: 68px;
}

.profile-menu-item .txt-area{
  margin-left: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.profile-menu-item .txt-area .title{
  color: #393A3C;
  font-size: 16px;
  line-height: 22px;
}

.profile-menu-item .txt-area .desc{
  margin-top: 4px;
  color: #808080;
  font-size: 12px;
  line-height: 18px;
}


.section-profile .main-profile {
  padding-bottom: 10px;
}
.section-profile .main-profile .profile-card {
  flex-direction: column;
  padding: 10px 12px 5px;
}
.section-profile .main-profile .profile-card > div {
  display: flex;
}
.section-profile .main-profile .profile-card .condition {
  margin: 5px 0px 0px;
  border-top: 0.5px solid rgb(232, 232, 232, 0.5);
}
.section-profile .main-profile .profile-card .condition div {
  margin: 5px 0px 0px;
  font-size: 13px;
}
.section-profile .main-profile .profile-card .condition .test {
  color: #a445c9;
  padding: 4px 0px;
  word-break: break-all;
  display: flex;
  align-items: center;
}
.section-profile .main-profile .profile-card .condition .score {
  color: #7c7f84;
  display: flex;
}
.section-profile .main-profile .profile-card .condition .score span {
  color: #313436;
  font-weight: 600;
  word-break: break-all;
}
.section-profile .main-profile .profile-card .condition .score::before {
  content: '';
  width: 20px;
  height: 20px;
  margin: 5px;
}
.section-profile .main-profile .profile-card .condition .score p {
  margin: auto;
}
.section-profile .main-profile .profile-card .condition .score.score-0:before {
  background: url(../images/condition/face_0.svg) no-repeat;
}
.section-profile .main-profile .profile-card .condition .score.score-1:before {
  background: url(../images/condition/face_1.svg) no-repeat;
}
.section-profile .main-profile .profile-card .condition .score.score-2:before {
  background: url(../images/condition/face_2.svg) no-repeat;
}
.section-profile .main-profile .profile-card .condition .score.score-3:before {
  background: url(../images/condition/face_3.svg) no-repeat;
}
.section-profile .main-profile .profile-card .condition .test span {
  padding: 6px 6px 6px 5px;
  background: linear-gradient(90deg, #f55e85, #f55e8c, #f5609f, #f462be, #f364e9, #f365f1);
  color: white;
  margin: 0px 14px 0px 0px;
  position: relative;
  border-radius: 4px 1px 1px 4px;
}
.section-profile .main-profile .profile-card .condition .test span:after {
  content: '';
  width: 0px;
  height: 0px;
  border-bottom: 12px solid transparent;
  border-left: 12px solid #f365f1;
  border-top: 12px solid transparent;
  position: absolute;
  right: -12px;
  top: 0px;
}
.section-profile .main-profile .profile-card .img-area {
  width: 70px;
  height: 70px;
  margin-left: 15px;
}
.section-profile .main-profile .profile-card .report {
  margin: 15px 0px 5px;
  padding: 10px;
  text-align: center;
  background: #242240;
  border-radius: 5px;
  font-size: 14px;
  color: #ffe295;
}
.section-profile .main-profile .profile-card .report span {
  margin: auto;
}
.manual-section {
  width: 100vw;
  padding: 0 5px 15px 5px;
  position: relative;
}
.manual-section-desc-img {
  margin-top: 15px;
  border-radius: 8px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
}
.manual-section img.shadow {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
}
.manual-section h1 {
  padding-top: 30px;
  font-size: 17px;
  color: #383a3b;
  font-weight: 400;
  display: flex;
  align-items: center;
}
.manual-section h1.en {
  font-size: 15px;
  font-weight: 600;
  padding-top: 15px;
}
.manual-section h1 ~ h2 {
  font-size: 14px;
  color: #696c70;
  margin-top: 5px;
  line-height: 20px;
  overflow-wrap: break-word;
}
.manual-section h1 button {
  margin-left: 10px;
  margin-bottom: 2px;
}
.btn-help {
  width: 17px;
  height: 17px;
  background: url(../images/icon/icon_question.svg) no-repeat;
}

.manual-type {
  display: flex;
  flex-wrap: wrap;
  padding-top: 17px;
}
.manual-type .frame-card {
  flex: calc(50% - 6px) 0 0;
  background: #fff;
  border-radius: 10px;
  padding: 10px 15px;
  position: relative;
  box-shadow: 3px 5px 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 12px;
}
.manual-type .frame-card:nth-child(2n) {
  margin-left: 12px;
}
.manual-type .frame-card:after {
  content: '';
  display: block;
  position: absolute;
  width: 34px;
  height: 34px;
  background: url(../images/icon/frame.svg) no-repeat;
  top: 0;
  right: 0;
}
.manual-type .frame-card h2 {
  display: flex;
  align-items: center;
  font-size: 15px;
  margin-bottom: 12px;
  word-break: break-all;
}
.manual-type .frame-card h2.type01 {
  color: #ff7f80;
}
.manual-type .frame-card h2.type02 {
  color: #8592ef;
}
.manual-type .frame-card h2.type03 {
  color: #3eb8c4;
}
.manual-type .frame-card h2.type04 {
  color: #bc92f0;
}
.manual-type .frame-card h2.type05 {
  color: #38bf84;
}
.manual-type .frame-card h2 img {
  width: 40px;
  height: 40px;
  margin-right: 6px;
}

.manual-type .frame-card .tit {
  color: #5c6064;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 8px;
  word-break: break-all;
}
.manual-type .frame-card .sub {
  display: flex;
  flex-direction: column;
  color: #94979b;
  font-weight: 600;
  line-height: 1.4;
}
.manual-type .frame-card .sub span {
  word-break: break-all;
}

.empty-message {
  position: fixed;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  top: 0;
  align-items: center;
  font-size: 15px;
  color: #464a4e;
  z-index: -1;
}

.center-card-area {
  display: flex;
  flex-wrap: wrap;
  margin-top: 15px;
  margin-bottom: 30px;
}
.main-center-card-area {
  margin: 15px 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
}
.main-center-card-area img {
}
.main-center-card-area img {
  display: block;
}
.center-card-area .center-card {
  flex: calc((100% / 3) - 8px) 0 0;
  margin-right: 12px;
  padding: 4px;
  background: #fff;
  border-radius: 5px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  box-shadow: 2px 5px 10px rgba(0, 0, 0, 0.2);
}
.center-card-area .center-card:nth-child(3n) {
  margin-right: 0;
}
.center-card-area .center-card .tit {
  font-size: 10px;
  text-align: center;
  font-weight: 600;
  opacity: 0.8;
  padding: 5px 0 3px;
  word-break: break-all;
}

.manual-description {
  font-size: 14px;
  color: #696c70;
  padding: 20px 0 60px;
  white-space: pre-line;
  line-height: 2;
  overflow-wrap: break-word;
}
.manual-description p {
  word-break: break-all;
}

.popup-window.type-desc .text-area b,
.channel-section b,
.manual-description b,
.manual-description span b {
  color: #383a3b;
  font-weight: 600;
  word-break: break-all;
}

.channel-desc {
  font-size: 14px;
  color: #696c70;
  padding: 10px 0 20px;
  line-height: 26px;
  overflow-wrap: anywhere;
}

.btn-top {
  width: 37px;
  height: 37px;
  background: url(../images/icon/top.svg) no-repeat;
  border-radius: 100%;
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.1);
  /*    display: none;*/
}
.card-tab-area {
  margin: 0 -15px;
}
.card-tab-area ul {
  white-space: nowrap;
  /*    overflow-x: auto;*/
}
.card-tab-area ul li {
  display: inline-block;
  margin-right: 2px;
}
.card-tab-area ul li:first-child {
  padding-left: 15px;
}
.card-tab-area ul li .img-area {
  width: 62px;
  height: 62px;
  border-radius: 10px;

  transform: scale(0.9);
  transition: all 0.2s;
  position: relative;
  z-index: 1;
}
.card-tab-area ul li.is-active .img-area {
  transform: scale(1);
  transform-origin: center;
}
.card-tab-area ul li:after {
  content: '';
  display: block;
  width: 58px;
  height: 8px;
  background: url(../images/centerCard/bg_shadow.png);
  background-size: cover;
  margin-left: 2px;
  margin-top: -3px;
  filter: blur(1px);
  z-index: -1;
  transition: all 0.2s;
  opacity: 0;
}
.card-tab-area ul li.is-active:after {
  opacity: 1;
}

.manual-section .battery-info {
  padding: 0 10px;
}
.manual-section .battery-info .img-area {
  width: 180px;
  margin: 40px auto 0;
}
.manual-section .battery-info .tit {
  font-size: 23px;
  text-align: center;
  padding-top: 26px;
  line-height: 1.2;
}
.manual-section .battery-info .tit strong {
  display: block;
  font-size: 24px;
  font-weight: 600;
}
.manual-section .battery-info .tit strong em {
  color: #8826c0;
  font-weight: 800;
}
.manual-section .battery-info .battery-vol {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
  height: 45px;
  background: #fff;
  padding: 4px 8px 4px 4px;
}
.manual-section .battery-info .battery-vol span {
  position: relative;
  display: block;
  height: 100%;
  border-radius: 6px;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#feaa72+0,f3637d+100 */
  background: rgb(254, 170, 114); /* Old browsers */
  background: -webkit-linear-gradient(left, rgba(254, 170, 114, 1) 0%, rgba(243, 99, 125, 1) 100%);
  background: -o-linear-gradient(left, rgba(254, 170, 114, 1) 0%, rgba(243, 99, 125, 1) 100%);
  background: linear-gradient(
      to right,
      rgba(254, 170, 114, 1) 0%,
      rgba(243, 99, 125, 1) 100%
  ); /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feaa72', endColorstr='#f3637d',GradientType=1 ); /* IE6-9 */
}
.manual-section .battery-info .battery-vol span:after {
  content: '';
  display: block;
  position: absolute;
  width: 8px;
  height: 11px;
  background: #f3637d;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 0 2px 2px 0;
}

.data-panel {
  display: flex;
  justify-content: center;
  padding-top: 20px;
  padding-bottom: 30px;
}
.data-panel > div {
  border: 1px solid #414243;
  border-radius: 4px;
  width: 110px;
}
.data-panel.relation > div {
  width: 153px;
}
.data-panel.relation.transit > div:last-child {
  width: 103px;
}
.data-panel > div:first-child {
  margin-right: 40px;
}
.data-panel.relation > div:first-child {
  margin-right: 10px;
}
.data-panel .title {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  line-height: 31px;
  text-align: center;
  border-radius: 3px 3px 0 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding: 0 10px;
}
.data-panel .type01 .title {
  background: #ed4a62;
}
.data-panel .type02 .title {
  background: #343537;
}
.data-panel .type03 .title {
  background: #118e68;
}
.data-panel .type04 .title {
  background: #18599b;
}

.data-panel ul {
  padding: 15px 10px;
}
.data-panel ul li {
  display: flex;
  align-items: center;
  margin-bottom: 13px;
}
.data-panel ul li:last-child {
  margin-bottom: 0;
}
.data-panel ul li .icon-area {
  width: 21px;
  height: 21px;
  min-width: 21px;
}
.data-panel ul li .data {
  text-align: center;
  display: flex;
  flex: 1;
  align-items: center;
}
.data-panel ul li .data span {
  width: 35px;
  font-size: 14px;
  font-weight: 500;
  font-family: 'NanumSquareNeo', 'Noto Sans Japanese', 'NanumSqure' !important;
  display: inline-block;
  color: #242526;
}
.data-panel ul li .data.right {
  margin-left: 13px;
  justify-content: flex-start;
}
.data-panel ul li .data.left {
  margin-right: 13px;
  justify-content: flex-end;
}
.data-panel .type01 .data span,
.data-panel .type03 .data:first-child span,
.data-panel .type04 .data:first-child span {
  color: #d72222;
}

.data-panel .type03 .data.right,
.data-panel .type04 .data.right {
  margin-left: 5px;
}
.data-panel .type03 .data.left,
.data-panel .type04 .data.left {
  margin-right: 5px;
}

.data-panel ul li .data.right:after,
.data-panel ul li .data.left:before {
  content: '';
  display: inline-block;
  width: 9px;
  height: 10px;
  background-repeat: no-repeat;
  background-position: center;
}

.data-panel ul li .data.star:after,
.data-panel ul li .data.star:before {
  width: 10px;
  height: 11px;
}
.data-panel ul li .data.right:after {
  margin-left: 5px;
}
.data-panel ul li .data.left:before {
  margin-right: 5px;
}

.data-panel .type03 .data.right:after,
.data-panel .type04 .data.right:after {
  margin-left: 3px;
}
.data-panel .type03 .data.left:before,
.data-panel .type04 .data.left:before {
  margin-right: 3px;
}

.data-panel .star.red:after,
.data-panel .star.red:before {
  background: url(../images/panel/star_r.svg) no-repeat;
}
.data-panel .star.green:after,
.data-panel .star.green:before {
  background: url(../images/panel/star_g.svg) no-repeat;
}
.data-panel .star.blue:after,
.data-panel .star.blue:before {
  background: url(../images/panel/star_b.svg) no-repeat;
}
.data-panel .star.black:after,
.data-panel .star.black:before {
  background: url(../images/panel/star_bl.svg) no-repeat;
}

.data-panel .up.red:after,
.data-panel .up.red:before {
  background: url(../images/panel/up_r.svg) no-repeat;
}
.data-panel .up.green:after,
.data-panel .up.green:before {
  background: url(../images/panel/up_g.svg) no-repeat;
}
.data-panel .up.blue:after,
.data-panel .up.blue:before {
  background: url(../images/panel/up_b.svg) no-repeat;
}
.data-panel .up.black:after,
.data-panel .up.black:before {
  background: url(../images/panel/up_bl.svg) no-repeat;
}

.data-panel .down.red:after,
.data-panel .down.red:before {
  background: url(../images/panel/down_r.svg) no-repeat;
}
.data-panel .down.green:after,
.data-panel .down.green:before {
  background: url(../images/panel/down_g.svg) no-repeat;
}
.data-panel .down.blue:after,
.data-panel .down.blue:before {
  background: url(../images/panel/down_b.svg) no-repeat;
}
.data-panel .down.black:after,
.data-panel .down.black:before {
  background: url(../images/panel/down_bl.svg) no-repeat;
}

.manual-section h1 .today-date {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: #775f9c;
  background: #c2cfe3;
  padding: 0px 20px;
  border-radius: 13px;
  height: 25px;
  line-height: 25px;
  margin-left: auto;
}
.manual-section h1 .today-date:before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 15px;
  background: url(../images/icon/icon_today.svg) no-repeat;
  vertical-align: middle;
  margin-right: 10px;
}

.manual-section .txt-keyword {
  font-size: 15px;
  color: #7e459e;
  font-weight: 600;
  background: #eee1fb;
  padding: 10px;
  border-radius: 5px;
  text-align: center;
  line-height: 1.5;
}
.manual-section .txt-keyword strong {
  color: #7e459e;
}
.manual-section .gate-desc {
  font-size: 12px;
  color: #7a7d81;
  margin-top: 10px;
  margin-bottom: 23px;
}

.manual-section .card-list {
  display: flex;
  flex-direction: column;
  width: 100%;
}
.manual-section .card-list .card {
  position: relative;
  background: #fff;
  border-radius: 10px;
  padding: 16px;
  margin: 12px 0px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
  overflow-wrap: break-word;
}
.manual-section .card-list:not(.relation-card-list) .card:after {
  content: '';
  display: block;
  position: absolute;
  width: 34px;
  height: 34px;
  background: url(../images/icon/frame.svg) no-repeat;
  top: 0;
  right: 0;
}
.manual-section .card-list .card > .tit {
  font-size: 15px;
  font-weight: 600;
  color: #505050;
  margin-bottom: 20px;
}
.manual-section .card-list .card .tag-area {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 5px;
  color: #696c70;
}
.manual-section .card-list .card .tag-area span {
  margin-right: 3px;
  margin-bottom: 5px;
  display: inline-block;
}
.card-list .card .tag-area span:nth-child(4n-3),
.card-list .card .tag-area div:nth-child(4n-3) span {
  color: #ff7778;
}
.card-list .card .tag-area span:nth-child(4n-2),
.card-list .card .tag-area div:nth-child(4n-2) span {
  color: #7d8bed;
}
.card-list .card .tag-area span:nth-child(4n-1),
.card-list .card .tag-area div:nth-child(4n-1) span {
  color: #4bc5d1;
}
.card-list .card .tag-area span:nth-child(4n),
.card-list .card .tag-area div:nth-child(4n) span {
  color: #27b67a;
}
.card-list .card .desc {
  font-size: 14px;
  color: #696c70;
  line-height: 26px;
  white-space: pre-line;
  font-weight: 400;
  overflow-wrap: anywhere;
}
.profile-card.justnow,
.profile-card.relation {
  padding: 10px;
  flex-direction: column;
}
.profile-card.justnow .justnow-profile,
.profile-card.relation .relation-profile {
  display: flex;
}
.profile-card.justnow .txt-area .name {
  font-size: 17px;
  flex: 1;
}
.profile-card.justnow .justnow-profile {
  padding: 0px 5px;
  flex-direction: column;
}
.justnow-profile .txt-area {
  flex-direction: row;
  justify-content: left;
  padding: 5px 10px;
}
.justnow-profile .txt-area .date {
  white-space: nowrap;
  margin-left: 5px;
  margin-top: 2px;
}
.profile-card.justnow .justnow-info {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #eee;
  padding-top: 5px;
  margin-top: 5px;
}
.profile-card.justnow .justnow-info .set-now:after {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  float: right;
  background: url(../images/icon/icon_refresh.svg) no-repeat;
  margin: 5px 5px 0px 0px;
}
.profile-card.justnow .justnow-info .set-now:after:active {
  background: url(../images/icon/icon_refresh_press.svg) no-repeat;
}
.profile-card.justnow .justnow-date {
  color: #464a4e;
  padding: 6px;
}
.profile-card.justnow .justnow-date span:active {
  background: #c2cfe3;
}

.profile-card.justnow .justnow-date span {
  font-weight: 100;
  padding: 5px 4px;
  letter-spacing: 1.2px;
  margin: 3px 0px 0px;
  border-radius: 4px;
}

.profile-card.justnow .justnow-date span.date {
  font-size: 20px;
  display: block;
}

.profile-card.justnow .justnow-date span.time {
  font-size: 17px;
  color: #7c7f84;
  display: inline-block;
}

.profile-card.justnow .justnow-date span.date:after {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url(../images/icon/icon_calender.svg) no-repeat;
  margin: -5px 0px -2px 5px;
}
.profile-card.justnow .justnow-date span.time:after {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url(../images/icon/icon_dropdown.svg) no-repeat;
  margin: 0px 0px -3px 7px;
}
.profile-card.relation .relation-info {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
  padding-bottom: 5px;
}
.profile-card .relation-info .rel-name {
  font-size: 15px;
  color: #464a4e;
  font-weight: 600;
  padding: 5px 0;
}
.profile-card .relation-info .icon-name-edit {
  width: 16px;
  height: 16px;
  background: url(../images/icon/icon_edit_g.svg) no-repeat;
  vertical-align: middle;
  margin: 0 0 4px 5px;
}
.profile-card .relation-info .icon-name-edit:active {
  background: url(../images/icon/icon_edit.svg) no-repeat;
}
.profile-card .relation-profile {
  padding-top: 15px;
}
.profile-card .relation-profile .profile {
  text-align: center;
  flex: 1;
}
.profile-card .relation-profile .img-area {
  margin: -7px auto 0;
}
.profile-card .relation-profile .img-area img {
  object-fit: contain;
}
.profile-card .relation-profile .img-area.pic {
  padding: 2px;
}
.profile-card .relation-profile .txt-area {
  padding-left: 0;
  margin-top: 7px;
}
.profile-card .relation-profile .txt-area .name {
  font-size: 15px;
  font-weight: 400;
}
.profile-card .relation-profile .txt-area .date {
  font-size: 12px;
  word-break: break-word;
  font-weight: 400;
  line-height: 1.5;
}
.profile-card .relation-profile .icon-x img {
  width: 21px;
  height: 21px;
  margin-top: 18px;
}

.manual-section .relation-card-list {
  padding-top: 15px;
}
.card-list.relation-card-list .card > .tit {
  overflow: hidden;
  margin-bottom: 15px;
  position: relative;
}
.relation-card-list .card > .tit span {
  display: block;
  font-size: 15px;
  padding-top: 4px;
  margin-bottom: 2px;
}
.relation-card-list .card > .tit em {
  font-size: 10px;
  color: #313436;
  display: inline-block;
  border: 1px solid #e5e5e5;
  padding: 3px 13px;
  border-radius: 10px;
  position: absolute;
  right: 0;
  top: 0;
}
.relation-card-list .card > .tit:before {
  content: '';
  display: inline-block;
  width: 40px;
  height: 40px;
  float: left;
  margin-right: 12px;
}
.relation-card-list .card.theme .tit:before {
  background: url(../images/icon/theme_tit_01.svg) no-repeat;
}
.relation-card-list .card.circuit .tit:before {
  background: url(../images/icon/theme_tit_02.svg) no-repeat;
}
.relation-card-list .card.g .tit:before {
  background: url(../images/icon/theme_tit_03.svg) no-repeat;
}

.relation-card-list .card.theme span {
  color: #7d8bed;
}
.relation-card-list .card.circuit span {
  color: #4bc5d1;
}
.relation-card-list .card.g span {
  color: #ff7778;
}

.center-card-layer {
  padding-top: 20px;
}
.btn-center-open {
  height: 38px;
  background: #af7ded;
  width: 100%;
  font-size: 14px;
  line-height: 38px;
}
.btn-center-open:after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 8px;
  background: url(../images/icon/icon_arrow_down.svg) no-repeat;
  background-size: contain;
  margin-left: 6px;
  transition: all 0.2s;
  transform-origin: center;
}
.btn-center-open.on:after {
  transform: rotate(180deg);
  margin-bottom: 1px;
}
.rel-center-area {
  padding: 15px;
  padding-top: 27px;
  border: 2px solid #af7ded;
  border-top: 0;
  margin-top: -5px;
  border-radius: 5px;
  display: none;
}
.rel-center-area h3 {
  font-size: 14px;
  font-weight: 600;
  color: #464a4e;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.rel-center-area .center-card-area {
  margin-top: 5px;
}
.rel-center-area .personal-center {
  display: flex;
}
.rel-center-area .personal-center > div {
  flex: 1;
  width: calc(50% - 7.5px);
}
.rel-center-area .personal-center > div:first-child {
  margin-right: 15px;
}
.rel-center-area .personal-center h3 {
  font-size: 12px;
}
.personal-center .center-card-area {
  margin-bottom: 0px;
}
.personal-center .center-card-area .center-card {
  margin-right: 4px;
  flex: calc((100% / 3) - 4px) 0 0;
  padding: 1px;
}

.channel-section {
  background: #fff;
  border-radius: 10px;
  margin: 12px 0px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
  width: 100%;
}
.channel-section .head {
  padding: 10px 15px;
  font-size: 15px;
  color: #fff;
  font-weight: 600;
  background: #5782d7;
  border-radius: 10px 10px 0 0;
}
.channel-section .head span:first-child:after {
  content: '';
  display: inline-block;
  width: 13px;
  height: 15px;
  background: url(../images/icon/icon_arrow_down.svg) no-repeat;
  background-size: contain;
  transform: rotate(-90deg);
  vertical-align: middle;
  margin-left: 15px;
  margin-right: 4px;
  margin-bottom: 2px;
}
.channel-section section {
  padding: 20px 10px;
  margin: 0 5px;
  overflow-wrap: break-word;
}
.channel-section section + section {
  border-top: 1px solid #eee;
}
.channel-section .title {
  font-size: 15px;
  color: #313436;
  font-weight: 600;
  margin-bottom: 20px;
  position: relative;
}
.channel-section .img-area {
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 20px;
  position: relative;
}
.channel-section .title em {
  font-size: 10px;
  color: #313436;
  display: inline-block;
  border: 1px solid #e5e5e5;
  padding: 3px 13px;
  border-radius: 10px;
  position: absolute;
  right: 0;
  top: 0;
}
.channel-section .desc {
  font-size: 14px;
  font-weight: 400;
  white-space: pre-line;
  color: #696c70;
  line-height: 26px;
}
.channel-section:last-of-type .head {
  background: #34b47e;
}
.manual-type:last-of-type {
  margin-bottom: 30px;
}

.help-description {
  padding: 30px 15px;
  font-size: 15px;
  color: #696c70;
  line-height: 1.8;
  white-space: pre-line;
  word-break: break-all;
}

.manual-section .chart-area {
  display: flex;
  align-items: center;
  flex-direction: column;
  margin-top: 15px;
}
.manual-section .chart-area .chart {
  flex: 1;
}
.manual-section .chart-area.last-child {
  flex-direction: row;
}
.manual-section .chart-area.last-child .chart {
  width: 50%;
}
.manual-section .chart-area h2 {
  font-size: 13px;
  font-weight: 600;
  color: #464a4e;
  margin-bottom: 5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.manual-section .chart-area .chart + .chart {
  margin-left: 10px;
}
/*setting*/

.setting-layout .setting-tit {
  padding: 12px 15px;
  font-size: 13px;
  background: #f0f0f0;
  color: #696c70;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.setting-layout .setting-tit span {
  color: #464a4e;
}
.setting-layout section .row {
  position: relative;
  min-height: 60px;
  padding: 12px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.2s;
  border-bottom: 1px solid #dedfe3;
}
.setting-layout section .row.align-base {
  align-items: baseline;
}
.setting-layout section .row.multi-row {
  flex-direction: column;
  align-items: baseline;
}
.setting-layout section .row.multi-row > div {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
}
.setting-layout section .row .wrap-btn-area {
  padding: 10px 0 16px;
}
.setting-layout .link:not(.not-ico):after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 13px;
  background: url(../images/icon/icon_link.svg) no-repeat;
  position: absolute;
  right: 15px;
}
.setting-layout .link:active {
  background: #e0e1e9;
}
.setting-layout section .tit {
  font-size: 15px;
  color: #464a4e;
  word-break: break-all;
}
.setting-layout section .tit span {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  color: #696c70;
}
.setting-layout .btn-update {
  padding: 8px 14px;
  margin-left: 10px;
  border-radius: 15px;
  font-size: 12px;
  text-transform: uppercase;
}
.setting-layout .account {
  font-size: 15px;
  color: #464a4e;
  font-weight: 600;
  padding: 10px 0;
  flex: 1;
  text-align: right;
}
.setting-layout .account .sns-icon {
  width: 25px;
  height: 25px;
  margin-left: auto;
  margin-top: 10px;
}
.setting-layout .account .sns-icon.twitter {
  background: url(../images/icon/setting_t.svg) no-repeat;
}
.setting-layout .account .sns-icon.kakao {
  background: url(../images/icon/setting_k.svg) no-repeat;
}
.setting-layout .account .sns-icon.facebook {
  background: url(../images/icon/setting_f.svg) no-repeat;
}
.setting-layout .account .sns-icon.naver {
  background: url(../images/icon/setting_n.svg) no-repeat;
}
.setting-layout .account .sns-icon.apple {
  background: url(../images/icon/setting_a.svg?v=1) no-repeat;
}
.setting-layout .account .sns-icon.kakao {
  background: url(../images/icon/setting_k.svg) no-repeat;
}
/*탈퇴하기*/
.withdrawal-layout {
  padding: 25px 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  width: 100%;
}
.withdrawal-layout .title {
  font-size: 15px;
  padding-bottom: 20px;
  color: #464a4e;
  word-break: break-all;
}
.withdrawal-layout .sub-tit {
  color: #696c70;
  font-size: 11px;
  line-height: 1.4;
}
.withdrawal-layout .sub-tit p {
  margin-bottom: 15px;
  word-break: break-all;
}
.withdrawal-layout .sub-tit p.strong {
  color: #f04142;
}
.terms-contents {
  background: #fff;
  white-space: pre-line;
  word-break: keep-all;
  padding: 15px;
  font-size: 11px;
  color: #696c70;
  line-height: 1.6;
  border-radius: 5px;
}

.terms-contents .tit {
  font-size: 12px;
  color: #383838;
}

.withdrawal-layout .terms-contents {
  overflow-y: auto;
  flex: 1;
}

.withdrawal-layout .check-area {
  padding: 20px 0;
}
.withdrawal-layout .wrap-btn-area {
  padding: 0;
}

/*공지사항*/
.setting-layout .notice-list .row {
  min-height: 82px;
}
.setting-layout .notice-list .tit {
  padding-right: 40px;
  line-height: 1.2;
  font-size: 14px;
}

.notice-list .date {
  margin-top: 8px;
  font-size: 11px;
  color: #696c70;
}
.link-detail-content {
  width: 100%;
}
.link-detail-content .tit {
  font-size: 14px;
  line-height: 1.2;
  word-break: keep-all;
  color: #464a4e;
}

.link-detail-content .date {
  font-size: 11px;
  margin-top: 5px;
  font-weight: 400;
  color: #696c70;
}

.link-detail-content .title-area {
  background: #f1f2f7;
  padding: 20px 15px;
  border-bottom: 1px solid #dedfe3;
}
.link-detail-content .content-area {
  padding: 20px 15px;
  white-space: pre-line;
  color: #7a7d81;
  line-height: 1.4;
  background: #fafafc;
}

/*포인트*/
.point-top-area {
  background: url(../images/bg_layer_top.jpg) no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  color: #fff;
  align-items: center;
}
.point-top-area .tit {
  font-size: 17px;
  padding-top: 30px;
}
.point-top-area .point-val {
  font-size: 30px;
  font-weight: 800;
  margin-top: 10px;
  padding-bottom: 50px;
}

.point-list-section {
  padding: 15px;
}
.point-list-section .point-info-card {
  background: #fff;
  display: flex;
  border-radius: 10px;
  padding: 10px 11px;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
  margin-top: -52px;
}
.point-list-section .point-info-card dl {
  flex: 1;
  align-items: center;
  display: flex;
  padding: 7px 0;
}
.point-list-section .point-info-card dl:before {
  content: '';
  display: inline-block;
  width: 40px;
  height: 40px;
  margin-right: 10px;
}
.point-list-section .point-info-card dl.purchase:before {
  background: url(../images/icon/icon_point_purchase.svg) no-repeat;
}
.point-list-section .point-info-card dl.free:before {
  background: url(../images/icon/icon_point_free.svg) no-repeat;
}
.point-list-section .point-info-card dl.gift:before {
  background: url(../images/icon/icon_point_gift.svg) no-repeat;
}
.point-list-section .point-info-card dl.profile:before {
  background: url(../images/icon/icon_point_profile.svg) no-repeat;
}
.point-list-section .point-info-card dl:last-child {
  border-left: 1px solid #eee;
  padding-left: 10px;
}
.point-list-section .point-info-card dl dt {
  font-size: 13px;
  color: #7c7f84;
}
.point-list-section .point-info-card dl dd {
  font-size: 15px;
  color: #464a4e;
  font-weight: 600;
  margin-top: 5px;
}

.point-purchse-list {
  margin-top: 20px;
}
.point-purchse-list li {
  border-radius: 10px 0 0 10px;
  box-shadow: 0px 3px 5px rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
  padding-top: 24%;
  position: relative;
}
.point-purchse-list .coupon-content {
  display: flex;
  flex: 1;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}
.point-purchse-list li .val-info {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;

  background: #fff;
  border-radius: 10px 0 0 10px;
}
.point-purchse-list li .val-info .point {
  font-size: 20px;
  font-weight: 800;
  color: #464a4e;
  padding-left: 10px;
}
.point-purchse-list li .val-info .point:before {
  content: '';
  display: inline-block;
  width: 25px;
  height: 25px;
  background: url(../images/icon/icon_point.svg) no-repeat;
  vertical-align: middle;
  margin-right: 5px;
}
.point-purchse-list li .val-info .price-area {
  text-align: right;
  padding-right: 5px;
}
.point-purchse-list li .val-info .price-area .price {
  font-size: 15px;
  color: #8826c0;
  font-weight: 800;
}
.point-purchse-list li .val-info .price-area .list-price {
  font-size: 12px;
  color: #7c7f84;
  font-weight: 600;
  margin-top: 5px;
  display: block;
}
.point-purchse-list li .purchase-area {
  flex: 27% 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  background: url(../images/bg_coupon.png) no-repeat;
  background-size: cover;
  padding-left: 10px;
}

.point-history-type {
  background: #fff;
  padding: 5px 15px 10px 15px;
}

.point-history-type div {
  border: 1.5px solid #b77bd2;
  padding: 13px 10px;
  border-radius: 6px;
  font-size: 14px;
  color: #696c70;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}

.point-history-type div:after {
  content: '';
  display: inline-block;
  width: 8px;
  height: 13px;
  background: url(../images/icon/icon_link.svg) no-repeat;
  position: absolute;
  top: auto;
  right: 26px;
}

.point-history-top {
  background: url(../images/bg_manual.jpg) no-repeat;
  background-size: cover;
  display: flex;
  color: #fff;
  padding: 24px 0;
}
.point-history-top .point-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-right: 1px solid rgba(255, 255, 255, 0.5);
}
.point-history-top .point-info:last-child {
  border-right: 0px;
}
.point-history-top .point-info .tit {
  font-size: 13px;
  margin-bottom: 5px;
}
.point-history-top .point-info .val {
  font-size: 18px;
  font-weight: 600;
}
.point-history-top + .empty-message {
  position: relative;
  min-height: 300px;
  z-index: 0;
}
.point-history-list li {
  display: flex;
  width: 100%;
  align-items: center;
  padding: 21px 15px;
  border-bottom: 1px solid #dedfe3;
}
.point-history-list li.purchase:before,
.point-history-list li.free:before,
.point-history-list li.gift:before,
.point-history-list li.profile:before {
  content: '';
  display: inline-block;
  width: 40px;
  height: 40px;
  margin-right: 10px;
}
.point-history-list li.purchase:before {
  background: url(../images/icon/icon_point_purchase.svg) no-repeat;
}
.point-history-list li.free:before {
  background: url(../images/icon/icon_point_free.svg) no-repeat;
}
.point-history-list li.gift.send:before {
  background: url(../images/icon/icon_point_gift_send.svg) no-repeat;
}
.point-history-list li.gift.cancel:before {
  background: url(../images/icon/icon_point_gift_cancel.svg) no-repeat;
}
.point-history-list li.gift.receive:before {
  background: url(../images/icon/icon_point_gift_receive.svg) no-repeat;
}
.point-history-list li.gift.expire:before {
  background: url(../images/icon/icon_point_gift_expire.svg) no-repeat;
}
.point-history-list li.gift.reject:before {
  background: url(../images/icon/icon_point_gift_reject.svg) no-repeat;
}
.point-history-list li.profile:before {
  background: url(../images/icon/icon_point_profile.svg) no-repeat;
}

.point-history-list li .txt-area {
  flex: 1;
}
.point-history-list.use li .txt-area {
  padding-right: 10%;
}
.point-history-list li .txt-area .tit {
  font-size: 15px;
  color: #464a4e;
  margin-bottom: 3px;

  line-height: 1.2;
}
.point-history-list li .txt-area .date {
  font-size: 12px;
  color: #696c70;
  margin: 5px 0px;
}
.point-history-list li .point {
  font-size: 20px;
  font-weight: 800;
  color: #464a4e;
}

.section-charge-blind {
  position: fixed;
  width: 100%;
  top: 0;
  height: 100%;
  display: flex;
  justify-content: center;
}
.charge-blind {
  position: fixed;
  width: calc(100% - 30px);
  margin-top: auto;
  bottom: 60px;
  color: #fff;
}

.charge-blind.connection {
  left: 15px;
}

.charge-blind .toast {
  position: relative;
}

.charge-blind .toast::after{
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -8px;
  border-width: 8px;
  border-style: solid;
  border-color: #000000 transparent transparent transparent;
}

.charge-blind .toast p {
  background: #000000;
  display: flex;
  border-radius: 6px;
  padding: 10px 12px;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
  color: #fff;
  font-size: 12px;
  line-height: 18px;
  word-break: break-all;
  position: relative;
  justify-content: center;
  width: 100%;
}

.charge-blind .toast p::after{
  content: '';
  width: 30px;
  height: 15px;
  background: url(../images/icon/icon_popup_x.svg) no-repeat;
  filter: brightness(10);
  align-self: center;
  margin-left: 5px;
  position: absolute;
  right: 0px;
}

.charge-blind p.tit{
  width: 100%;
  background: #FF6D70;
  height: 54px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  margin-top: 20px;
}

.charge-blind .point {
  font-size: 30px;
  font-weight: 800;
  margin-top: 25px;
}
.charge-blind .tit {
  font-size: 16px;
  font-weight: 600;
}
.blind-content {
  /*position: fixed;*/
  width: 100%;
}
.blind-content .target {
  filter: blur(5px);
}

/*popup layer*/

.popup-layer {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
}
.popup-layer .dim {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  left: 0;
  top: 0;
}
.popup-window {
  position: relative;
  z-index: 100;
  padding: 25px 23px;
  background: #fff;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
  width: calc(100% - 60px);
  max-width: 300px;
  border-radius: 10px;
}
.popup-window .popup-title {
  font-size: 16px;
  font-weight: 600;
  color: #464a4e;
  text-align: center;
  margin-bottom: 17px;
  word-break: break-all;
  padding-top: 0px;
}
.popup-window .popup-subtitle {
  font-size: 14px;
  font-weight: 400;
  color: #464a4e;
  text-align: left;
  margin-bottom: 13px;
  line-height: 18px;
  word-break: break-all;
}
.popup-window .popup-contents {
  font-size: 13px;
  font-weight: 400;
  color: #464a4e;
  text-align: left;
  margin-bottom: 13px;
  line-height: 18px;
  word-break: break-all;
}

.popup-window input[type='text'],
.popup-window input[type='password'] {
  height: 35px;
  font-size: 12px;
  color: #383838;
  border: 1.5px solid #d8d8de;
  box-shadow: none;
  line-height: 35px;
}
.popup-window input[type='text']:focus,
.popup-window input[type='password']:focus {
  border-color: #c195d4;
}
.popup-window input[type='text'].error,
.popup-window input[type='password'].error {
  border-color: #fd868e;
}
.password-change-layout .input-area {
  margin-bottom: 10px;
}
.password-change-layout .error-txt {
  color: #f04142;
  font-size: 10px;
  margin-top: 3px;
  text-align: right;
}
.popup-button {
  display: flex;
  margin-top: 20px;
}
.popup-button button {
  flex: 1;
  padding: 10px 0px;
  font-size: 15px;
}
.popup-button button + button {
  margin-left: 10px;
}

.popup-text {
  text-align: center;
  font-size: 14px;
  color: #696c70;
  line-height: 1.6;
}
.popup-text em {
  color: #fb5b56;
}
.popup-text + .input-area {
  margin-top: 10px;
}

.popup-contents .primary-txt {
  padding: 5px 8px 0;
}

.popup-contents p {
  font-size: 13px;
  margin: 5px 0px;
  line-height: 1.3;
  word-break: break-all;
}

.popup-window.type-desc {
  margin-top: 100px;
  padding: 22px 0 22px 22px;
  width: calc(100% - 40px);
  max-width: 320px;
}
.popup-window.type-desc .popup-title {
  text-align: left;
  color: #313436;
  font-size: 17px;
}
.popup-window.type-desc .text-area {
  max-height: 230px;
  overflow-y: scroll;
  font-size: 14px;
  color: #696c70;
  line-height: 1.8;
  white-space: pre-line;
  padding-right: 10px;
  word-break: break-all;
  overflow-x: hidden;
}
.popup-window.type-desc .text-area div {
  word-break: break-all;
}
.popup-close {
  width: 15px;
  height: 15px;
  background: url(../images/icon/icon_popup_x.svg) no-repeat;
  position: absolute;
  right: 13px;
  top: 13px;
}

.contents + .popup-layer {
  display: none;
}

.popup-window.type-img,
.popup-window.type-profile {
  background: transparent;
  padding: calc(var(--status-bar-height, 0px) + 10px) 0 calc(var(--safe-area-bottom, 0px) + 10px);
  width: 100%;
  max-width: 100%;
  border-radius: 0;
  box-shadow: none;
  max-height: 100%;
  margin-bottom: auto;
}
.popup-window.type-img .popup-title,
.popup-window.type-profile .popup-title {
  position: relative;
  text-align: left;
  padding: 0 15px;
  color: #fff;
}
.popup-window.type-img .popup-title .popup-close,
.popup-window.type-profile .popup-title .popup-close {
  top: 6px;
  filter: brightness(10);
  right: 16px;
}
.popup-window.type-img .popup-contents {
  background: #fff;
  padding: 20px 40px;
  height: calc(100vh - var(--status-bar-height, 0px) - var(--safe-area-bottom, 0px) - 80px);
}
.popup-window.type-profile .popup-contents {
  margin: 30px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
}
.popup-contents .reg-profile {
  display: flex;
  flex-direction: column;
}
.popup-contents .reg-profile a {
  width: 100%;
  text-align: center;
  font-size: 15px;
  color: #464a4e;
  padding: 20px 0;
  transition: background 0.2s;
}
.popup-contents .reg-profile a + a {
  border-top: 1px solid #e9e9e9;
}
.popup-contents .reg-profile a:active {
  background: #e0e1e9;
}

.chatbot-popup-layer {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  overflow: hidden;
  align-items: center;
}
.chatbot-popup-layer .dim {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  left: 0;
  top: 0;
}
.chatbot-popup-window {
  position: relative;
  z-index: 100;
  padding: 25px 23px;
  background: #fff;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
  width: calc(100% - 60px);
  max-width: 350px;
  border-radius: 10px;
  overflow: auto;
  max-height: 90%;
}
.chatbot-popup-window .popup-title {
  font-size: 16px;
  font-weight: 600;
  color: #464a4e;
  text-align: center;
  margin-bottom: 17px;
  word-break: break-all;
}

.line-clamp {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}
.line-2 {
  -webkit-line-clamp: 2;
}
.line-3 {
  -webkit-line-clamp: 3;
}
.line-4 {
  -webkit-line-clamp: 4;
}
/*intro*/
.intro-bg-area {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  background: #9141ff;
}
.intro-guide {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
}
.intro-guide .slick-dots {
  position: absolute;
  display: flex;
  width: 100%;
  justify-content: center;
  padding: 15px 0;
}
.intro-guide .slick-dots li button {
  width: 8px;
  height: 8px;
  display: block;
  background: #fff;
  font-size: 0;
  border-radius: 8px;
  opacity: 0.5;
  margin: 0 5px;
}
.intro-guide .slick-dots li.slick-active button {
  opacity: 1;
  width: 15px;
}
.intro-guide .slick-list {
  flex: 1;
}
.intro-guide .slick-track {
  height: 100%;
  overflow-y: scroll;
}
.intro-guide .wrap-intro-contents {
  padding: 40px 15px 20px 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100vw;
  height: 100%;
  justify-content: space-around;
}
.intro-guide .wrap-intro-contents h1 {
  font-size: 23px;
  font-weight: 600;
  padding-bottom: 10px;
  line-height: 1.2;
  color: #ffffff;
  position: relative;
}
.intro-guide .wrap-intro-contents h1.main-title {
  font-size: 25px;
}
/*
.intro-guide .wrap-intro-contents h1:not(.main-title):before,
.intro-guide .wrap-intro-contents h1:not(.main-title):after {
  content: '';
  display: block;
  width: 16px;
  height: 100%;
  background: url(../images/intro/box_intro_title.svg) no-repeat;
  background-size: 16px 100%;
  position: absolute;
  top: -10px;
}
.intro-guide .wrap-intro-contents h1:not(.main-title):before {
  left: -12px;
}
.intro-guide .wrap-intro-contents h1:not(.main-title):after {
  transform: rotate(-180deg);
  right: -12px;
}
*/
.intro-guide .wrap-intro-contents h1.main-title span {
  color: #fff;
}
.intro-guide .intro-title-img {
  width: 164px;
  height: 30px;
  object-fit: contain;
  margin-bottom: 11px;
}
.intro-guide .wrap-intro-contents .sub-desc {
  font-size: 12px;
  line-height: 18px;
  min-height: 66px;
  font-weight: 100;
  display: flex;
  flex-direction: column;
}
.intro-guide .wrap-intro-contents .sub-desc .sub {
  font-size: 10px;
  color: #f5c3d4;
  line-height: 17px;
  margin-top: 5px;
  margin-bottom: 5px;
}
.intro-guide .wrap-intro-contents .img-area {
  max-height: 400px;
  max-width: 280px;
}
.intro-guide .wrap-intro-contents .intro-img {
  /*width: auto;
  max-height: 374px;*/
}
.intro-guide .wrap-intro-contents .main-intro-img {
  width: 283px;
  height: 35.5%;
  max-height: 196px;
  object-fit: contain;
}
.intro-guide .wrap-intro-contents .main-desc {
  display: flex;
  flex-direction: column;
  text-align: left;
  align-self: flex-start;
  padding-left: 15px;
}
.intro-guide .wrap-intro-contents .main-desc dl {
  margin-top: 20px;
  position: relative;
  padding-left: 35px;
}
.intro-guide .wrap-intro-contents .main-desc dl:before {
  content: '';
  display: block;
  width: 25px;
  height: 25px;
  background: url(../images/intro/check.png) no-repeat;
  background-size: 25px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.intro-guide .wrap-intro-contents .main-desc dt {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.2;
  margin-bottom: 5px;
}
.intro-guide .wrap-intro-contents .main-desc dd {
  font-size: 13px;
  line-height: 1.5;
}
.intro-guide .wrap-intro-contents .sub-desc02 + .img-area {
  /*    margin-top: 0;*/
}
.intro-guide .wrap-intro-contents .img-area img {
  object-fit: contain;
}
.intro-guide .bottom-area {
  display: flex;
}
.intro-guide .bottom-area.btn-area {
  padding: 11px 0px;
}
.intro-guide .bottom-area.btn-area .btn-start {
  min-width: 220px;
  height: auto;
  line-height: 30px;
  padding: 5px 10px;
}
.intro-guide .bottom-area input[type='checkbox'] + label {
  min-height: 17px;
  line-height: 17px;
}
.intro-guide .bottom-area input[type='checkbox'] + label:before {
  background: url(../images/icon/icon_checkbox02.svg) no-repeat;
  background-size: 17px;
}
.intro-guide .bottom-area input[type='checkbox']:checked + label::before {
  background: url(../images/icon/icon_checkbox_on.svg) no-repeat;
  background-size: 17px;
}
.intro-guide .bottom-area .btn-skip {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  margin-left: 12px;
}
.intro-guide .bottom-area .btn-skip:after {
  width: 6px;
  height: 11px;
  background: url(../images/icon/icon_skip_arrow.svg) no-repeat;
  background-size: contain;
  margin: 0 0 2px 4px;
}
.intro-guide input[type='checkbox'] + label strong {
  color: #fff;
}
.intro-guide .btn-point {
  background: #ffffff;
}
.intro-guide .btn-point:active {
  background: #ffffff;
}
.intro-guide [class^='btn-'] {
  color: #621c82;
}
/* 가이드 페이지: 헤더가 투명하고 이미지 위에 겹치는 구조 */
.guide-layout > .header {
  top: 0;
}
.guide-layout .header.init {
  background: transparent;
}
.guide-layout .header.init .header-title {
  display: none;
}
.guide-layout .header.init .header-btn {
  filter: brightness(10);
}

.guide-layout .top-area {
  background: #6e1d9e url(../images/guide/bg_guide.jpg) no-repeat;
  background-size: contain;
  font-size: 14px;
  color: #fff;
  line-height: 22px;
  letter-spacing: -0.5px;
}
.guide-layout.guide02 .top-area {
  background: #631c82 url(../images/guide/bg_guide_02.jpg) no-repeat;
  background-size: cover;
  /*    min-height: 965px;*/
}
.guide-layout .top-area h1 {
  font-size: 28px;
  text-align: center;
  padding-top: 90px;
  padding-bottom: 15px;
  position: relative;
  background: url(../images/guide/bg_title.png) no-repeat;
  background-size: contain;
  background-position: bottom;
  margin-bottom: 32px;
}
.guide-layout .top-area p {
  margin-top: 20px;
  padding: 0 15px 0 35px;
  word-break: break-all;
}
.guide-layout .top-area p strong {
  font-weight: 800;
}
.guide-layout .top-area .img-home {
  /*    margin-bottom: -40%;*/
  margin-top: 15px;
}
.guide-layout-content {
  padding: 0 15px 30px;
  background: #1c0c01;
  position: relative;
}
.guide-layout-content:before {
  content: '';
  display: block;
  width: 100%;
  height: 325px;
  position: absolute;
  top: 0;
  left: 0;
  background: -webkit-linear-gradient(top, #1c0c01 0%, #513c16 100%);
  background: -o-linear-gradient(top, #1c0c01 0%, #513c16 100%);
  background: linear-gradient(
      to top,
      #1c0c01 0%,
      #513c16 100%
  ); /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  z-index: 0;
}
.guide-layout-content section {
  position: relative;
  background: #fff;
  padding: 22px 20px 45px;
  border-radius: 5px;
}
.guide-layout-content section + section {
  margin-top: 25px;
}
.guide-layout-content section h1 {
  font-size: 25px;
  font-weight: 800;
  text-align: center;
  color: #252729;
  margin-bottom: 20px;
}
.guide-layout-content section .desc {
  font-size: 14px;
  color: #696c70;
  padding-top: 20px;
  line-height: 22px;
  letter-spacing: -1px;
  word-break: break-all;
}
.guide-layout-content .bottom-logo {
  width: 76px;
  margin: 25px auto 40px;
}
.guide-layout.guide02 .type-list {
  padding: 0 30px 40px 35px;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
}
.guide-layout.guide02 .type-list li {
  /*    float: left;*/
  display: inline-block;
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
}
.guide-layout.guide02 .type-list li:not(:last-child) {
  margin-right: 3%;
}
.guide-layout.guide02 .type-list li .img {
  height: 165px;
}
.guide-layout.guide02 .type-list li .img img {
  object-fit: contain;
  margin: 0 auto;
  width: auto;
}
.guide-layout.guide02 .type-list li .title {
  font-size: 9px;
  color: #6e1d9e;
  line-height: 1;
  text-align: center;
  background: #fff;
  padding: 4px 10px;
  font-weight: 600;
  border-radius: 15px;
  min-width: 55px;
  min-height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.guide-layout.guide02 .type-list li .num {
  font-family: 'NanumSquareNeo, ''Noto Sans Japanese', 'NanumSqure' !important;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  margin-top: 10px;
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.guide-layout.guide02 .type-list li .num span {
  font-size: 30px;
}

.guide-layout.guide02 .type-list + .desc {
  padding-bottom: 70px;
}
.guide-layout.guide02 .guide-layout-content {
  background: #0c0041;
  padding-top: 80px;
}
.guide-layout.guide02 .guide-layout-content:before {
  display: none;
}
.guide-layout.guide02 .guide-layout-content section:not(:last-child) {
  margin-bottom: 100px;
}
.guide-layout.guide02 .guide-layout-content h1 {
  margin-top: 10px;
  font-size: 21px;
  margin-bottom: 0;
}
.guide-layout.guide02 .guide-layout-content h1:after {
  content: '';
  display: block;
  margin: 10px auto;
  width: 28px;
  height: 2px;
  background: currentColor;
}
.guide-layout.guide02 .bottom-area {
  background: url(../images/guide/bg_bottom.jpg) no-repeat;
  background-size: cover;
  padding-bottom: 60px;
}
.guide-layout.guide02 .bottom-area .desc {
  padding: 60px 15px 30px 35px;
  font-size: 14px;
  color: #fff;
  line-height: 22px;
  letter-spacing: -0.5px;
  word-break: keep-all;
}
.guide-layout.guide02 .bottom-area img {
  width: 76px;
  margin: 0 auto;
}

.count {
  font-size: 15px;
  color: rgba(149, 68, 196, 1);
  vertical-align: middle;
  font-weight: normal;
}

.empty-message-sub {
  position: fixed;
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  top: 70px;
  align-items: center;
  font-size: 14px;
  color: #464a4e;
  z-index: -1;
  padding-left: 20px;
  padding-right: 20px;
  font-style: italic;
  color: #94979b;
}
.section-need-profile .slick-dots,
.section-rel-guide-list .slick-dots,
.section-profiles .slick-dots,
.magazine .slick-dots,
.banner .slick-dots {
  display: flex;
  width: 100%;
  justify-content: center;
  padding: 15px 0 15px 0;
}
.section-need-profile .slick-dots li button,
.section-rel-guide-list .slick-dots li button,
.section-profiles .slick-dots li button,
.magazine .slick-dots li button,
.banner .slick-dots li button {
  width: 6px;
  height: 6px;
  display: block;
  background: #CBCBDA;
  font-size: 0;
  border-radius: 8px;
  opacity: 0.5;
  margin: 0 5px;
}
.section-need-profile .slick-dots li.slick-active button,
.section-rel-guide-list .slick-dots li.slick-active button,
.section-profiles .slick-dots li.slick-active button,
.magazine .slick-dots li.slick-active button,
.banner .slick-dots li.slick-active button {
  opacity: 1;
  background: #808080;
}
/*
.relation-group .slider,
.guide-list.profiles .slider,
.magazine .slider,
.banner .slider {
  display: none;
}

.relation-group .slider.slick-initialized,
.guide-list.profiles .slider.slick-initialized,
.magazine .slider.slick-initialized,
.banner .slider.slick-initialized {
  display: block;
}
*/

.main-layout .section-need-profile{
  margin-bottom: 70px;
}

.need-main-profile {
  background: rgb(222, 224, 255);
  position: relative;
  padding: 0px 20px 50px;
}

.need-main-profile .need-main-profile-bg{
  position: absolute;
  right: 0px;
  top: 64px;
  width: 70%;
  max-width: 300px;
}

.need-main-profile .need-main-profile-info{
  display: flex;
  flex-direction: column;
  padding-top: 20px;
}

.need-main-profile .need-main-profile-info div:nth-child(1){
  font-size: 14px;
  line-height: 22px;
  margin-top: 20px;
  font-weight: 300;
}

.need-main-profile .need-main-profile-info div:nth-child(1) span{
  font-weight: 600;
}

.need-main-profile .need-main-profile-info div:nth-child(2){
  margin: 30px 0px;
  font-size: 24px;
  line-height: 36px;
  font-weight: 300;
}

.need-main-profile .need-main-profile-info div:nth-child(2) span{
  font-weight: 600;
}


.section-profile .banner {
  margin: 0 -20px;
}

.section-banner .banners-container {
  display: flex;
  flex-direction: row;
}
.banner-item {
  margin: 2px 5px;
}
.banner-item img {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
}
.profile-guide {
  background: rgb(0, 0, 0, 0.6);
  width: 100vw;
  height: 100vh;
  position: fixed;
  z-index: 1000;
}
.profile-guide img {
  object-fit: contain;
}
.profile-guide .header-btn.close {
  filter: brightness(100);
  margin-top: 40px;
}
.profile-guide .bottom-area {
  position: absolute;
  bottom: 50px;
  width: 100%;
  text-align: center;
  filter: brightness(100);
}

.present-top-area {
  display: flex;
  flex-direction: column;
  position: relative;
  background: url(../images/bg_present_top.jpg);
  background-size: cover;
  height: 83px;
  width: 100vw;
  padding: 0 15px;
  justify-content: center;
  color: #fff;
}

.present-top-area h1 {
  font-size: 13px;
}
.present-top-area strong {
  font-size: 24px;
  font-weight: 800;
  margin-top: 5px;
}
.present-top-area img {
  width: auto;
  height: 95px;
  position: absolute;
  right: 15px;
  top: 12px;
}
.present-layout {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.present-layout .wrap-btn-area {
  margin-top: auto;
}

.present-content-layout {
  /*    padding: 40px 15px 0;*/
}
.present-content-layout .input-wrap:first-child {
  padding-top: 40px;
}
.present-content-layout .input-wrap {
  margin-bottom: 20px;
  padding: 0 15px;
}
.present-content-layout .input-wrap h1 {
  font-size: 16px;
  color: #464a4e;
}
.present-content-layout .input-wrap .sub-tit {
  color: #7e459e;
  font-size: 12px;
  margin: 8px 0;
  display: inline-block;
}
.present-content-layout .input-wrap .sub-tit.latest {
  right: 15px;
  position: absolute;
  text-decoration: underline;
}
.present-content-layout .input-btn-area {
  position: relative;
}
.present-content-layout .input-btn-area .btn-add {
  position: absolute;
  right: 0;
  /*    background: #ada5b2;*/
  background: rgba(91, 75, 102, 0.5);

  /*
    height : 41px;
    top : 1.5px;
    right:1.5px;
*/
  height: 100%;
  top: 0;
  right: 0;
  padding: 0 28px;
  font-size: 13px;
  border-radius: 0 5px 5px 0;
}
.present-content-layout .input-btn-area .btn-add:active {
  background: rgba(91, 75, 102, 0.6);
}
.present-content-layout .input-btn-area .btn-add:disabled {
  color: rgba(255, 255, 255, 0.5);
}
.present-content-layout .input-wrap .error-txt {
  margin-top: 8px;
  text-align: right;
}
.present-user-list {
  border-top: 1px solid #dedfe3;
}
.present-user-list li {
  background: #fff;
  border-bottom: 1px solid #dedfe3;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 22px;
}
.present-user-list dl dt {
  font-size: 15px;
  color: #464a4e;
}
.present-user-list dl dd {
  font-size: 11px;
  color: #696c70;
  margin-top: 7px;
}
.btn-list-del {
  width: 22px;
  height: 22px;
  background: url(../images/icon/icon_list_del.svg) no-repeat;
}
.btn-list-del:active {
  background: url(../images/icon/icon_list_del_on.svg) no-repeat;
}

.present-total-point {
  display: flex;
  justify-content: space-between;
  padding: 40px 15px 20px;
}
.present-total-point dt {
  font-size: 19px;
  font-weight: 600;
  color: #8826c0;
}
.present-total-point dd {
  font-size: 24px;
  font-weight: 800;
  color: #8826c0;
}

.popup-present .top-area {
  padding-bottom: 15px;
}
.popup-present .top-area h1 {
  text-align: center;
  font-size: 15px;
  color: #464a4e;
  font-weight: 600;
  margin-bottom: 15px;
}
.popup-present .top-area p {
  font-size: 13px;
  color: #464a4e;
  line-height: 18px;
}
.popup-present .user-list {
  border-top: 1px solid #dfe0e4;
  border-bottom: 1px solid #dfe0e4;
  margin: 0 -23px;
  padding: 10px 23px;
}
.popup-present .user-list li {
  font-size: 12px;
  color: #696c70;
  line-height: 25px;
}
.popup-present .bottom-area p {
  padding: 12px 0;
  font-size: 11px;
  line-height: 15px;
  color: #f04142;
}
.present-content-layout .desc-area {
  padding: 15px;
}
.present-content-layout .desc {
  color: #7e459e;
  font-size: 11px;
  line-height: 18px;
  letter-spacing: -0.5px;
}
.present-history-list {
  border-top: 1px solid #dedfe3;
}
.present-history-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 15px;
  border-bottom: 1px solid #dedfe3;
}
.present-history-list li dl {
}
.present-history-list li dl dt {
  font-size: 15px;
  color: #464a4e;
  margin-bottom: 5px;
}
.present-history-list li dl .status {
  display: block;
  font-size: 12px;
  color: #464a4e;
  margin-bottom: 4px;
}
.present-history-list li dl .status.wait {
  color: #7e459e;
}
.present-history-list li dl .status.expired {
  color: #ff7778;
}
.present-history-list li dl dd {
  font-size: 12px;
  color: #696c70;
  line-height: 15px;
  display: flex;
  justify-content: space-between;
}
.present-history-list li dl dd span:first-child {
  margin-right: 10px;
}
.present-history-list .right-info {
}
.present-history-list .right-info .point {
  font-size: 20px;
  color: #464a4e;
  font-weight: 800;
  text-align: right;
  margin-bottom: 10px;
}
.present-history-list .right-info > div {
  display: flex;
  flex: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.present-history-list .btn-present {
  font-size: 12px;
  height: 22px;
  border-radius: 10px;
  padding: 0px 10px;
}
.btn-present.accept {
  background: #b658e2;
}
.btn-present.accept:active {
  background: #7c37c4;
}
.present-history-list .right-info .status {
  font-size: 10px;
  color: #313436;
  height: 20px;
  line-height: 18px;
  border: 1px solid #d2d2d4;
  border-radius: 10px;
  display: inline-block;
  vertical-align: middle;
  padding: 0 10px;
  min-width: 70px;
  text-align: center;
  margin-left: 5px;
}

.present-history-list li dd .expired {
  color: #ff7778;
  text-decoration: line-through;
}
.present-history-list li .expired .point {
  color: #ff7778;
  text-decoration: line-through;
}

.relation-chart-sect {
  margin-bottom: 20px;
}
.relation-chart-sect .chart-area {
  /*background: rgba(200, 200, 200, 0.1);
  border-radius: 34px;*/
  margin-top: 10px;
}
.relation-chart-sect h1 {
  justify-content: center;
  margin-bottom: 10px;
}
.relation-chart-sect h2 {
  font-size: 21px;
  justify-content: center;
  color: #12a05f;
  font-weight: 600;
  text-align: center;
  line-height: 25px;
  margin-top: 15px;
  /*margin-bottom: 10px;*/
  white-space: pre-line;
}
.relation-chart-sect .desc {
  font-size: 14px;
  color: #696c70;
  line-height: 22px;
}

.relation-chart-sect .chart-tag,
.share-inner-content .chart-tag {
  margin: 20px 0;
  display: flex;
  flex-wrap: wrap;
}
.share-inner-content .chart-tag {
  margin-bottom: 0;
  margin-top: 20px;
}
.relation-chart-sect .chart-tag span,
.share-inner-content .chart-tag span {
  display: inline-block;
  border: 1px solid #000;
  border-radius: 20px;
  padding: 5px 10px 4px;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 6px;
  margin-right: 4px;
}
.chart-tag span.level_0 {
  border-color: #3758ff;
  color: #3758ff;
}
.chart-tag span.level_1 {
  border-color: #15bc5c;
  color: #15bc5c;
}
.chart-tag span.level_2 {
  border-color: #dc325a;
  color: #dc325a;
}

.relation-chart-sect ~ .sect-line {
  border-top: 1px solid #e1e2e7;
}
.relation-card-list .h1_tit {
  font-size: 21px;
  justify-content: center;
  color: #12a05f !important;
  font-weight: 600;
  text-align: center;
  line-height: 25px;
  padding-top: 10px;
  margin-bottom: 20px;
  word-break: break-all;
  white-space: pre-line;
}
.relation-card-list .relation-section h1 {
  font-size: 15px;
  color: #464a4e;
  font-weight: 600;
  margin-bottom: 12px;
  padding-top: 0px;
}
.relation-card-list .relation-section h1 img {
  width: 25px;
  height: 25px;
  margin-right: 6px;
}
.relation-card-list .relation-section h1 .level_0 {
  color: #3758ff;
}
.relation-card-list .relation-section h1 .level_1 {
  color: #15bc5c;
}
.relation-card-list .relation-section h1 .level_2 {
  color: #dc325a;
}
.relation-card-list .relation-section h1 em {
  margin-left: 5px;
}
.relation-card-list .relation-section h1 em:after {
  content: '';
  display: inline-block;
  width: 62px;
  height: 12.5px;
  background: url(../images/img_level.png) no-repeat;
  background-position: 0 0;
  background-size: 62px 37px;
  vertical-align: middle;
  margin-left: 5px;
}
.relation-card-list .relation-section h1 em.level_0:after {
  background-position: 0 0;
}
.relation-card-list .relation-section h1 em.level_1:after {
  background-position: 0 -12.5px;
}
.relation-card-list .relation-section h1 em.level_2:after {
  background-position: 0 -25px;
}

.relation-card-list .relation-section > .desc {
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 400;
  color: #696c70;
  line-height: 26px;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.relation-card-list .sect-line {
  border-top: 1px solid #e1e2e7;
  margin-bottom: 18px;
}
.relation-card-list .relation-section .card {
  display: flex;
  padding: 0;
  min-height: 122px;
}
.relation-card-list .relation-section .card.center-card {
  display: block;
  padding: 16px;
  min-height: 0;
}
.relation-card-list .relation-section .card.center-card .desc {
  padding: 0;
  line-height: 22px;
}
.relation-card-list .relation-section .card.center-card .title {
  font-size: 15px;
  font-weight: 600;
  color: #313436;
  margin-bottom: 13px;
}
.relation-card-list .relation-section .sect {
  flex: 1;
  padding: 10px 15px 15px;
}
.relation-card-list .relation-section .sect:first-child {
  border-right: 1px solid #ebebeb;
}
.relation-card-list .relation-section .sect .img-area {
  width: 42px;
  height: auto;
  margin-right: 7px;
  min-width: 42px;
}
.relation-card-list .relation-section .sect .img-area img {
  margin-top: -4px;
}
.relation-card-list .relation-section .sect .top {
  display: flex;
  align-items: center;
  margin-bottom: 13px;
  flex: 1;
}
.relation-card-list .relation-section .sect .img-area.pic img {
  border-radius: 100%;
  margin-top: 0;
}
.relation-card-list .relation-section .sect .txt-area {
  padding-top: 5px;
}
.relation-card-list .relation-section .sect .txt-area .name {
  font-size: 15px;
  color: #464a4e;
  word-break: break-all;
}
.relation-card-list .relation-section .sect .txt-area .sub {
  font-size: 13px;
  color: #7c7f84;
  margin-top: 5px;
  line-height: 16px;
  word-break: break-all;
}
.relation-card-list .relation-section .sect .sub-desc {
  font-size: 12px;
  color: #7c7f84;
  line-height: 17px;
  font-weight: 600;
}

.relation-card-list .relation-section .sect .sub-desc p {
  word-break: break-all;
}
.relation-card-list .relation-section .card .desc {
  padding: 15px 15px 15px;
}

.relation-card-list .relation-section .card .desc b {
  font-weight: 600;
}

.share-layout {
  position: relative;
  padding: 0 15px 20px;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.share-layout .bg {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  max-height: 500px;
  overflow: hidden;
}

.share-top-area {
  text-align: center;
  padding-top: 45px;
}

.share-top-area h1 {
  width: 110px;
  margin: 0 auto 12px;
}
.share-top-area h2 {
  color: #fff;
  font-size: 15px;
}
.share-top-area h3 {
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  margin-top: 6px;
}
.share-content {
  background: #d4c1e1;
  border-radius: 5px;
  margin: 24px auto;
  padding: 7px 14px 16px;
  position: relative;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
  max-width: 450px;
}
.share-content .bg-clip {
  background: url(../images/bg_clip.svg) no-repeat;
  width: 96px;
  height: 29px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -10px;
  z-index: 1;
}
.share-inner-bg {
  position: absolute;
  left: 19px;
  top: 20px;
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  background: #fff;
  border-radius: 2.5px;
  transform: rotate(-1deg);
  z-index: 0;
}
.share-inner-content {
  position: relative;
  background: #fff;
  border-radius: 2.5px;
  padding: 11px 11px 14px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
}
.share-inner-content .logo_b {
  width: 41px;
}
.share-inner-content .img-area {
  width: 74px;
  margin: 10px auto;
}
.share-inner-content h1 {
  font-size: 15px;
  color: #363636;
  text-align: center;
  font-weight: 600;
}
.share-inner-content h1 strong {
  display: block;
  font-size: 20px;
  color: #12a05f;
  line-height: 25px;
  margin-top: 5px;
  white-space: pre-line;
}
.share-inner-content h2 {
  text-align: center;
  color: #363636;
  font-size: 13px;
  margin-top: 8px;
}
.share-inner-content .sub-tit {
  font-size: 12px;
  line-height: 17px;
  margin-top: 15px;
  color: #7c7f84;
}

.share-content-table {
  /*
  margin-top: 14px;
  border-top: 1px solid #888;
  border-bottom: 1px solid #888;
*/
  background: #f9fafc;
  margin: 15px -11px -14px;
  border-radius: 0 0 2.5px 2.5px;
  padding: 0 11px 11px;
}
.share-content-table dl {
  display: flex;
}
.share-content-table dl dt {
  background: #faf6fe;
  width: 83px;
  min-height: 76px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.share-content-table dl dt img {
  width: 25px;
  height: 25px;
}
.share-content-table dl dt .title {
  margin-top: 6px;
  font-size: 12px;
  color: #464a4e;
  font-weight: 600;
}
.share-content-table dl:not(:last-child) {
  border-bottom: 1px solid #d8d8d8;
}
.share-content-table dl dd {
  padding: 12px 15px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.share-content-table dl dd .tit {
  font-size: 11px;
  font-weight: 600;
  color: #363636;
  margin-bottom: 4px;
}
.share-content-table dl dd .sub p {
  font-size: 11px;
  color: #747178;
  line-height: 13px;
}

.share-layout .desc {
  text-align: center;
  font-size: 14px;
  color: #8826c0;
  padding-top: 0px;
  padding-bottom: 30px;
}

.share-inner-content .relation-area {
  display: flex;
  justify-content: center;
  align-content: center;
  text-align: center;
  border-bottom: 1px solid #888;
  padding-bottom: 25px;
  margin-bottom: 10px;
  margin-top: 10px;
}
.share-inner-content .relation-area .img-area {
  width: 54px;
}
.share-inner-content .relation-area .icon-x {
  display: flex;
  margin-bottom: 20px;
  align-items: center;
}
.share-inner-content .relation-area .icon-x img {
  width: 21px;
  height: 21px;
}
.share-inner-content .relation-area .txt-area .name {
  font-size: 15px;
  color: #464a4e;
}
.share-inner-content .relation-area .txt-area .sub {
  font-size: 11px;
  color: #7c7f84;
  margin-top: 4px;
}
.share-inner-content .chart-area {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.share-inner-content .chart-area svg {
  max-width: 350px;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.share-inner-content .chart-desc {
  font-size: 13px;
  color: #696c70;
  line-height: 20px;
  padding-bottom: 20px;
  padding-top: 20px;
}
.shape.scale-ext {
  fill-opacity: 1 !important;
  stroke-width: 2px;
}
.shape.scale-ext:first-child {
  fill: #eee1fb;
  stroke: #e9d8fb;
}
.shape.scale-ext:nth-child(2) {
  fill: #e9d8fb;
  stroke: #e3cefa;
}
.shape.scale-ext:nth-child(3) {
  fill: #e3cefa;
  stroke: #dbc4f5;
}
.shape.scale-ext:nth-child(4) {
  fill: #dbc4f5;
  stroke: #d1b7ee;
}
.shape.scale-main {
  fill: url(#my-cool-gradient);
}
.scale {
  fill: transparent !important;
  stroke-width: 0px !important;
}
.shape {
  fill: #a51ff7;
  stroke: #9a41ff;
  stroke-width: 1px;
  fill-opacity: 0.5 !important;
}
.full-width {
  width: 100vw;
}

.share-inner-content .chart-desc {
  font-size: 13px;
  color: #696c70;
  line-height: 20px;
  padding-bottom: 20px;
  padding-top: 20px;
}

.share-content.error-area {
  margin-top: 50px;
}

.share-content.error-area .error-message {
  padding: 83px 0 135px;
}
.share-content.error-area .error-message img {
  width: 54px;
  height: 54px;
  margin: 0 auto;
}
.share-content.error-area .error-message h1 {
  font-size: 17px;
  color: #8826c0;
  margin-top: 25px;
}
.share-content.error-area .error-message h2 {
  font-size: 14px;
  color: #363636;
  font-weight: 600;
}

.share-layout > button {
  margin: auto;
  max-width: 450px;
}
.popup-title.gate {
  margin-left: 30px;
}
.gate-no-icon {
  position: absolute;
  width: 21px;
  height: 21px;
  top: 19px;
  left: 23px;
}
.manual-section .chart-area svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.share-content .relation-area .profile {
  flex: 1;
}
.share-content .manual-type .frame-card:after {
  display: none;
}
.share-content .manual-type .frame-card h2 {
  font-size: 13px;
}
.share-content .manual-type .frame-card h2 img {
  width: 32px;
  height: 32px;
}
.share-content .manual-type .frame-card .tit {
  font-size: 13px;
}
.share-content .manual-type .frame-card .sub {
  font-size: 11px;
}

.chart-area > div.radar {
  width: calc(100vw - 90px);
  height: calc(100vw - 125px);
  max-width: 330px;
  max-height: 300px;
}

.relation-chart-sect .chart-area > div.radar {
  width: calc(100vw - 30px);
  height: calc(100vw - 80px);
}

.desc iu {
  color: #5844ed;
  font-weight: 600;
  word-break: break-word;
}
.desc iu2 {
  color: #1ca385;
  font-weight: 600;
  word-break: break-word;
}

.desc .pre-desc {
  margin-bottom: 18px;
}

.share-content .manual-type .frame-card .sub {
  font-size: 11px;
}

.icon-zoom {
  width: 30px;
  height: 30px;
  background: url(../images/icon/zoom.svg) no-repeat;
  background-size: contain;
}
.icon-zoom:active {
  background: url(../images/icon/zoom_press.svg) no-repeat;
}

.chart-area .chart {
  position: relative;
}
.chart .icon-zoom {
  position: absolute;
  right: -20px;
  top: 20px;
}
.manual-section h1 .icon-zoom {
  margin-left: auto;
}
.zoom-guide {
  width: 100vw;
  text-align: center;
  padding-top: 8px;
  position: absolute;
  z-index: 10;
}

.zoom-guide span {
  background: rgba(0, 0, 0, 0.4);
  text-align: center;
  color: white;
  border-radius: 7px;
  padding: 4px 8px;
  font-size: 10px;
}

.manual-section h2.title-box {
  border: 7px solid #d6d2df;
  color: #696c70;
  padding: 11px;
  margin-top: 15px;
  margin-bottom: 10px;
  position: relative;
}
.manual-section h2.title-box:before,
.manual-section h2.title-box:after {
  content: '';
  display: block;
  width: calc(100% - 50px);
  height: 14px;
  background: #fafafc;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
}
.manual-section h2.title-box:before {
  top: -10px;
}
.manual-section h2.title-box:after {
  bottom: -10px;
}
.react-transform-component {
  height: 100% !important;
}
.present-content-layout .empty-message {
  z-index: 0;
}
.main-banner {
  display: flex;
  flex-direction: column;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 100;
  justify-content: center;
  align-items: center;
  background: rgba(0, 0, 0, 0.6);
}
.main-banner .content {
  margin: 30px;
  vertical-align: middle;
  max-width: 300px;
}
.main-banner img {
  object-fit: contain;
}
.main-banner .header-area {
  margin-bottom: 20px;
}
.main-banner .header-btn.close {
  filter: brightness(100);
}
.main-banner .bottom-area {
  bottom: 50px;
  width: 100%;
  text-align: center;
  filter: brightness(100);
}
.confirm-color {
  color: #3758ff;
  font-weight: 600;
}
.warning-color {
  color: #dc325a;
  font-weight: 600;
}
.sub-tit b {
  font-weight: 600;
}
.title-box b {
  font-weight: 600;
  color: #383a3b;
}

.arrow-box {
  position: relative;
  background: #ffffff;
  padding: 15px 12px;
  border-radius: 8px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
}
.arrow-box:after {
  bottom: 100%;
  left: 50%;
  border: solid transparent;
  content: ' ';
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #ffffff;
  border-width: 12px;
  margin-left: -12px;
}

.relation-chart-sect .arrow-box {
  margin-top: 20px;
}
.relation-box-inner .chart-tag {
  margin-bottom: 0;
  line-height: 1.5;
}
.relation-box-inner .chart-tag span {
  margin-right: 3px;
}

.relation-box-inner dl {
  padding-bottom: 20px;
}
.relation-box-inner dl:last-of-type {
  border-bottom: 1px solid #e9e9e9;
}
.relation-box-inner dl dt {
  font-size: 15px;
  color: #464a4e;
  font-weight: 600;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.relation-box-inner dl dt img {
  width: 25px;
  height: 25px;
  margin-right: 6px;
}
.relation-box-inner dl dd {
  color: #696c70;
  font-size: 14px;
  line-height: 26px;
}

.share-inner-content .relation-box-inner {
  padding: 10px 10px 0px;
}
.share-inner-content .relation-box-inner dl {
  padding-bottom: 20px;
}
.share-inner-content .relation-box-inner dt {
  font-size: 13px;
}
.share-inner-content .relation-box-inner dt img {
  width: 22px;
  height: 22px;
}
.share-inner-content .relation-box-inner dd {
  font-size: 12px;
}
.section-profiles {
  padding: 15px 20px;
}
.section-magazine {
  padding: 15px 20px;
}
.section-snack-content {
  padding: 15px 20px;
}
.magazine-item {
  margin: 0 4px 3px;
  border-radius: 8px;
  overflow: hidden;
  background: white;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
}
.magazine-item div p {
  margin: 8px;
  line-height: 18px;
  font-size: 12px;
  color: #7c7f84;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  display: -webkit-box;
}

.magazine-item div p.subject {
  font-size: 15px;
  color: #464a4e;
  line-height: 18px;
  -webkit-line-clamp: 2;
}
.magazine-item div p:not(.subject) {
  min-height: 54px;
}
.story-item {
  margin: 0 4px 3px;
  border-radius: 8px;
  overflow: hidden;
  background: white;
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
}
.story-item div {
  padding: 15px;
}
.story-item div p {
  margin: 8px;
  line-height: 18px;
  font-size: 11px;
  color: #5b5b5b;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  display: -webkit-box;
}

.story-item div p.subject {
  font-size: 18px;
  color: #000000;
  line-height: 18px;
  -webkit-line-clamp: 2;
}
.section-footer {
  background: white;
}
.footer-wrapper {
  /*text-align: center;*/
}
.footer {
  text-align: left;
  padding: 20px 20px;
  display: inline-block;
}
.footer .company {
  font-size: 12px;
  color: #464a4e;
  margin-bottom: 5px;
}
.footer p {
  font-size: 11px;
  color: #7c7f84;
  line-height: 18px;
}
.footer .agreement {
  padding: 5px 0px;
  color: #464a4e;
  text-decoration: underline;
  font-size: 12px;
}
.footer .agreement:active {
  color: #aa71ff;
}
.gender-container {
  display: flex;
}
.gender {
  text-align: center;
  flex: 1;
  border-radius: 30px;
  border: 2px solid #ba69dc;
  color: #ba69dc;
  padding: 15px;
  margin-right: 10px;
  font-size: 14px;
  font-weight: 400;
}
.gender.active {
  background: #ba69dc;
  color: white;
}

.gender:last-child {
  margin-right: 0px;
}
.profile-group {
  padding: 10px;
  background: white;
  color: #696c70;
}
.profile-list.main .list-content {
  padding: 0 15px 0 12px;
}
.profile-list.main .img-area {
  width: 42px;
  margin-bottom: 5px;
}
.Toastify__toast {
  background: rgba(0, 0, 0, 0.6) !important;
  border-radius: 30px !important;
  color: white !important;
  margin: 20px !important;
  min-height: 52px !important;
  padding: 14px !important;
}
.Toastify__toast-body {
  margin: auto 10px !important;
  flex: 1 1 auto !important;
  font-size: 13px !important;
}
.Toastify__close-button {
  display: none !important;
}
.Toastify__progress-bar {
  border-radius: 15px !important;
  height: 3px !important;
}
.profile-list.profile-swipe.connection li.favorite:before,
.profile-list.profile-swipe.profile li.favorite:before {
  width: 4px;
  content: '';
  height: 4px;
  display: inline-block;
  border-radius: 50%;
  background: #621c82;
  position: absolute;
  margin: 10px;
}
.profile-list.profile-swipe.connection li.favorite:before {
  margin-top: 41.5px;
}
.profile-list.profile-swipe.profile li.main-profile:before {
  width: 4px;
  content: '';
  height: 4px;
  display: inline-block;
  border-radius: 50%;
  background: red;
  position: absolute;
  margin: 10px;
}
.popup-present.latest .user-list {
  border-top: 1px solid #dfe0e4;
  border-bottom: 1px solid #dfe0e4;
  margin: 0 -23px;
  max-height: 222px;
  overflow: scroll;
  padding: 0;
}
.popup-present.latest .user-list li {
  border-bottom: 1px solid #dfe0e4;
  margin: 0 15px;
}
.popup-present.latest .user-list li:last-child {
  border-bottom: 0px;
}
.popup-present.latest .user-list li dt {
  font-size: 14px;
  font-weight: 600;
  color: #464a4e;
  margin: 8px 5px 5px;
  text-align: left;
}
.popup-present.latest .user-list li dd {
  text-align: left;
  color: #909192;
  line-height: 1;
  margin: 0px 5px 10px;
}
.popup-present.latest p {
  font-size: 12px;
}

.popup-present.latest .empty {
  min-height: 100px;
  justify-content: center;
  align-items: center;
  display: flex;
  font-size: 13px;
  font-weight: 400;
  color: #464a4e;
}

.popup-present.latest .wrap-btn-area.popup button {
  margin-top: 15px;
}
.setting-language {
  display: flex;
  height: 100vh;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.justnow-keyword {
  text-align: center;
  margin: 15px 0 15px;
  font-size: 18px;
  color: #7e459e;
  font-weight: 600;
}
.swipe__panel {
  display: none;
}
.swipe__panel.is-active {
  display: flex;
  flex-direction: column;
  padding: 0px 10px;
}

.rmc-picker-item-selected {
  font-size: 19px !important;
  color: #666 !important;
}

.profiles-menus li {
  font-size: 13px;
  padding: 13px 5px;
}

.profiles-menus li:active {
  background: #e0e1e9;
}

.share-popup li {
  font-size: 14px;
  padding: 18px 3px;
}

.share-popup li p {
  font-size: 11px;
  color: #989090;
}

.share-popup li:last-child {
  border-top: 1px solid #c1bfbf;
}

.share-popup li:active {
  background: #e0e1e9;
}
.profile-icon.today img {
  width: 31px;
  height: 31px;
  margin: 0px 10px;
}
.profile-icon.more img {
  height: 18px;
  width: 5px;
  margin: 0px 10px;
  object-fit: fill;
  fill: #eaebed;
}
.share-register-info {
  display: flex;
}
.share-register-info .img-area {
  width: 65px;
  margin-left: 20px;
}
.share-register-info .txt-area {
  margin: auto;
}
.popup-contents strong,
.popup-subtitle strong {
  font-weight: 600;
}
p.share-regist-content {
  margin: 30px 0px;
}

.rmc-picker-popup-item {
  color: #a445c9 !important;
}

.rmc-picker-popup-item.rmc-picker-popup-title {
  color: #464a4e !important;
}
.rmc-picker-content {
  color: #464a4e !important;
}
.rmc-picker-indicator {
  background: #f8e8fd !important;
  z-index: 0 !important;
}
.magazines-header {
  position: fixed;
  width: 100%;
  background: white;
  text-align: center;
  border-bottom: 1px solid #e6e6e6;
}
.magazines-header-container {
  padding: 12px;
  font-size: 13px;
  color: #7c7f84;
}
.magazines-header-item {
  margin: 0px 10px;
  color: #7c7f84;
}
.magazines-header-item.active {
  color: #464a4e;
  font-weight: 600;
}
.magazines-layout {
  margin-top: 37px;
}
.main-layout .magazines {
  display: flex;
  flex-direction: row;
}
.main-layout .magazines div {
  position: relative;
  flex: 1;
}
.main-layout .magazines .dim {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
}
.main-layout .magazines .dim div {
  width: calc(100% - 6px);
  height: calc(100% - 2px);
  background: rgba(0, 0, 0, 0.35);
  border-radius: 8px;
  position: relative;
  left: 3px;
  display: flex;
}
.main-layout .magazines .dim div span {
  justify-content: center;
  margin: auto;
  color: white;
  font-size: 30px;
  font-weight: 800;
}
.transit-indicator {
  margin: auto;
}
.transit-indicator.summary{
  min-width: 84px;
  max-width: 84px;
  height: 84px;
  z-index: 1;
  border: 2px solid #fff;
  border-radius: 100%;
  margin-bottom: 25px;
}

.transit-indicator .indicator {
  display: flex;
  justify-content: center;
  text-align: center;
  position: absolute;
  top: -1px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  align-items: center;
  font-size: 38px;
  font-weight: 700;
  color: #555;
}
.transit-indicator .indicator > div {
  width: 60%;
  height: 60%;
  background: white;
  border-radius: 50%;
  display: flex;
  box-shadow: 1px 1px 0 2px rgba(0, 0, 0, 0.1);
  flex-direction: column;
}
.transit-indicator .indicator div span {
  margin: auto;
}
.text-center {
  text-align: center;
}
.channel-summary {
  margin: 10px 0px;
}
.relation-chart-summary {
}
.relation-chart-summary .chart-area h2 {
  text-align: center;
  margin: 10px 0px 30px;
  font-weight: 100;
}

section .sect-line {
  border-top: 1px solid #e1e2e7;
}
.chart-plus {
  width: 16px;
  height: 16px;
  margin: 0px 5px 35px;
  background: url(../images/icon/icon_plus.svg) no-repeat;
}
.dday-txt {
  margin: 20px 5px;
  font-size: 15px;
}
.keyword-container {
  background: #fff;
  display: flex;
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
  margin: 25px 0px;
  flex-direction: column;
}
.keyword-container .tit {
  text-align: center;
  font-size: 15px;
  margin: 10px;
  color: #464a4e;
  font-weight: 600;
}

.channel-desc.summary {
  z-index: 1;
  color: #464A4E;
  margin: 0px 0px 0px 32px;
  padding: 0px;
  display: flex;
  font-size: 16px;
  flex-direction: column;
  align-self: center;
  line-height: 1.5;
  overflow-wrap: anywhere;
  line-break: anywhere;
}
.channel-desc.summary div {
  margin: 20px auto;
}
.channel-desc.summary div:nth-child(1) {
  font-size: 18px;
}
.channel-desc.summary div:nth-child(2) {
  font-size: 14px;
  margin: 0px;
}
.channel-desc.summary div span{
  font-weight: 600;
}
.today-more {
  text-align: center;
  margin-bottom: 15px;
}
.sect-area {
  margin: 25px 0px 10px;
  display: flex;
}
.sect-area .sect-tit {
  color: #464a4e;
  font-size: 15px;
  font-weight: 100;
  word-break: break-all;
  flex: 1;
  align-self: center;
}
.today-more .detail,
.sect-area .detail {
  padding: 4px 10px;
  background: #aca5b2;
  border-radius: 12px;
  color: white;
  font-size: 12px;
}
.today-more .detail:active,
.sect-area .detail:active {
  background: #7d7982;
}
.today-more .detail:after,
.sect-area .detail:after {
  content: '';
  display: inline-block;
  width: 6px;
  height: 10px;
  background: url(../images/icon/icon_arrow.svg) no-repeat;
  margin: 0 0 -1px 4px;
}
.DayPicker-Day {
  display: table-cell;
  padding: 2px !important;
  border-radius: 0px !important;
  vertical-align: top;
  text-align: right;
  font-size: 12px;
  width: calc(100% / 7);
  color: #7c7f84;
}
.justnow-day {
  height: 45px;
  display: flex;
  position: relative;
  background: #f3f3f5;
}
.popup-layer.calendar:not(.loading)
.DayPicker-Day:not(.DayPicker-Day--today):not(.DayPicker-Day--purchased)
.justnow-day:before {
  content: '';
  width: 12px;
  height: 16px;
  background: url(../images/profile/icon/lock.svg) no-repeat;
  position: absolute;
  bottom: 5px;
  right: 5px;
}
.justnow-day span {
  position: absolute;
  left: 2px;
  top: 2px;
  padding: 4px 2px;
}
.DayPicker-Month {
  width: 100%;
  margin: 0 !important;
}
.DayPicker {
  width: 100%;
}
.DayPicker-Footer {
  text-align: center;
}
.popup-layer.calendar .popup-window {
  width: calc(100% - 20px);
  max-width: 350px;
  overflow: scroll;
  padding: 25px 10px;
}
.popup-layer.calendar .popup-subtitle {
  text-align: center;
  margin: 10px 0px 20px;
  color: #7c7f84;
}
.popup-layer.calendar .popup-warn p {
  margin: 5px 5px 5px 10px;
  color: #7c7f84;
  line-height: 1.5;
  font-size: 13px;
  word-break: break-all;
}
.popup-layer.calendar .popup-warn p:before {
  content: '*';
  position: relative;
  left: -7px;
  top: 2px;
}
.popup-layer.calendar {
  flex-direction: column;
}
.popup-layer.calendar .header-area {
  margin-bottom: 30px;
}
.popup-layer.calendar .header-btn.close {
  filter: brightness(100);
}
.DayPicker-NavButton--next {
  top: 4px !important;
  right: 15px !important;
  background: url(../images/icon/icon_dropdown.svg) !important;
  transform: rotate(-90deg);
}
.DayPicker-NavButton--prev {
  top: 4px !important;
  left: 15px !important;
  background: url(../images/icon/icon_dropdown.svg) !important;
  transform: rotate(90deg);
}
.DayPicker-Caption > div {
  text-align: center;
  background: #f2e1ff;
  padding: 8px 0px;
  color: #464a4e;
}
.DayPicker-Day--today .justnow-day span {
  border-radius: 4px;
  background: #9409dc;
  min-width: 18px;
  color: white;
}
.DayPicker-Day--purchased .justnow-day {
  background: #f2e1ff;
}
.DayPicker-Day--transit .justnow-day {
  background: #d1f6e3;
  border: 2px solid #0bb493;
  margin: -1px;
}
.DayPicker-Day--transit .justnow-day:after {
  content: '';
  width: 0px;
  height: 0px;
  border-bottom: 8px solid transparent;
  border-right: 8px solid #0bb493;
  position: absolute;
  right: -1px;
}
.DayPicker-Day--purchased .justnow-day:before {
  content: '';
  width: 16px;
  height: 16px;
  background: url(../images/icon/icon_calender.svg) no-repeat;
  position: absolute;
  bottom: 4px;
  right: 4px;
}
.manual-type > .title {
  margin-top: 10px;
}
.manual-type .title {
  font-size: 15px;
  font-weight: 600;
  color: #383a3b;
}
.welcome-popup {
  text-align: center;
}
.welcome-popup .title {
  font-size: 15px;
  font-weight: 600;
  margin: 20px 0px;
}
.welcome-popup .notice {
  font-size: 12px;
  margin: 10px 0px;
}
.manual-warn {
  margin-top: 15px;
  color: #383a3b;
}
.today-tit {
  display: flex;
  font-size: 14px;
  padding: 8px 10px;
  color: white;
  background: #9873ea;
}
.today-tit > span {
  flex: 1;
}
.today-tit > span:after {
  content: '';
  width: 25px;
  height: 25px;
  background: url(../images/icon/icon_question.svg) no-repeat;
  margin-left: 10px;
}
.sect-line.transparent {
  border-top: 1px solid transparent;
  margin-bottom: 15px;
}
.section-profile .popup-toast {
  padding: 10px 0px;
}
.section-profile .popup-toast:after {
  content: '';
  width: 0px;
  height: 0px;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #aca5b2;
  position: absolute;
  left: 40px;
}
.section-profile .popup-toast .toast {
  background: #aca5b2;
  display: flex;
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
  color: white;
  font-size: 12px;
  line-height: 1.3;
  word-break: break-all;
}
.section-profile .popup-toast .toast:after {
  content: '';
  width: 30px;
  height: 15px;
  background: url(../images/icon/icon_popup_x.svg) no-repeat;
  filter: brightness(10);
  align-self: center;
  margin-left: 5px;
}
.section-profile .popup-toast.hide-toast {
  opacity: 0;
  padding-top: 0px;
  padding-bottom: 0px;
  height: 0px;
}
.born-time {
  display: flex;
}
.born-time .tit {
  flex: 1;
}
.born-time label {
  display: inline-block;
}
.relation-point {
  text-align: center;
  margin: 15px 0px 0px;
}
.relation-point span {
  background: #d6d5ec;
  padding: 2px 30px;
  border-radius: 3px;
  font-size: 25px;
  font-weight: 600;
}

.personality-top {
  position: relative;
}
.personality-top .btn-layer-closed {
  position: absolute;
  top: calc(var(--status-bar-height, 0px) + 15px);
  right: 15px;
  z-index: 1;
}
.personality-top .content-area {
  height: 100%;
  width: 100%;
  display: flex;
  position: absolute;
  top: 0;
  overflow: hidden;
}
.personality-top .content-area div {
  margin: auto 0 20px;
  color: white;
  padding: 20px 0px 5px 15px;
}
.personality-top .content-area div .title {
  font-size: 26px;
  padding: 40px 0px 15px;
  line-height: 1.3;
}
.personality-top .content-area div .title b {
  font-weight: 600;
}
.personality-top .content-area div .desc {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 15px;
}

.personality-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-evenly;
}
.personality-content .no span {
  font-size: 32px;
  font-weight: 700;
  color: #621c82;
}
.personality-content .no span:before {
  content: '';
  width: 48px;
  height: 48px;
  display: inline-block;
  background: url(../images/share/findjob/icon_question.svg) no-repeat;
  vertical-align: middle;
  margin-right: 8px;
}
.personality-content .question {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  margin-bottom: 20px;
}

.personality-content .answer {
  display: flex;
  width: 100%;
  justify-content: center;
  flex-direction: column;
}
.personality-content .answer .wrapper {
  border-radius: 5px;
  background: white;
  margin: 10px 15px;
  padding: 25px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  box-shadow: 0px 1px 5px 3px rgb(208 201 211 / 50%);
  word-break: break-all;
}
.personality-content .answer .wrapper:active {
  background: #9873ea;
  color: #fff;
}
.personality-content .answer .wrapper.on {
  background: #9873ea;
  color: #fff;
}
.personality-content .answer .wrapper.btn-O div {
  background: url(../images/condition/A_O_normal.svg);
}
.personality-content .answer .wrapper.on.btn-O div {
  background: url(../images/condition/A_O_press.svg);
}
.personality-content .answer .wrapper.btn-O:active div {
  background: url(../images/condition/A_O_press.svg);
}
.personality-content .answer .wrapper.btn-X div {
  background: url(../images/condition/A_X_normal.svg);
}
.personality-content .answer .wrapper.on.btn-X div {
  background: url(../images/condition/A_X_press.svg);
}
.personality-content .answer .wrapper.btn-X:active div {
  background: url(../images/condition/A_X_press.svg);
}
.personality .guide {
  font-size: 15px;
  text-align: center;
  color: #696c70;
  word-break: break-all;
  padding: 0px 10px;
}
.question-bottom {
  display: flex;
  margin: 10px auto;
}
.question-bottom .paging {
  margin: auto 10px;
  color: #696c70;
  font-size: 14px;
}
.question-bottom .paging span {
  font-weight: 600;
  color: #313436;
}
.question-bottom .btn {
  background: url(../images/icon/icon_dropdown.svg) !important;
  width: 20px;
  height: 20px;
}
.question-bottom .btn:disabled {
  filter: grayscale(1) brightness(1.8);
}
.question-bottom .next {
  transform: rotate(-90deg);
}
.question-bottom .prev {
  transform: rotate(90deg);
}
.personality .react-swipeable-view-container {
  height: 100%;
}
.personality .personality-container {
  display: flex;
  padding: 20px;
}
.personality-result .result-summary {
  text-align: center;
}
.personality-result .result-summary .date {
  color: #696c70;
  font-size: 14px;
  margin: 20px 0px 10px;
}
.personality-result .result-summary .tit {
  color: #313436;
  font-size: 22px;
  margin: 5px 0px 10px;
}
.personality-result .result-summary .tit b {
  font-weight: 600;
}
.personality-result .result-graph .result {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  position: absolute;
  top: -41px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  align-items: center;
  line-height: 1.2;
}
.personality-result .result-graph {
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
  padding: 5px 10px;
  margin: 20px 0px;
}
.personality-result .result-graph .result-progress {
  height: 150px;
}
.personality-result .result-graph .result .tit {
  font-size: 16px;
  font-weight: 600;
}
.personality-result .result-graph .result .point {
  font-size: 42px;
  font-weight: 800;
}
.personality-result .result-graph .result .next {
  font-size: 14px;
  color: #313436;
  border-radius: 4px;
  border: 1px solid #dddddd;
  padding: 5px 25px;
  margin-top: 5px;
  position: relative;
}
.personality-result .result-graph .result .next div {
  display: inline;
}
.personality-result .result-graph .result .next span {
  font-size: 18px;
  font-weight: 600;
}
.personality-result .result-graph .result-desc {
  margin: 15px 0px 0px;
  padding: 10px 5px;
  border-top: 0.5px solid rgb(232, 232, 232, 0.5);
  display: flex;
}
.personality-result .result-graph .result-desc .img-area {
  width: 55px;
  flex: none;
  margin: 0 10px 0 0;
  align-self: center;
}
.personality-result .result-graph .result-desc .desc {
  display: flex;
}
.personality-result .result-graph .result-desc .desc p {
  margin: auto;
  color: #696c70;
  font-size: 13px;
  line-height: 1.4;
}
.personality-result .result-detail {
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
  margin: 20px 0px;
  overflow: hidden;
}
.personality-result .result-detail .tit {
  font-size: 16px;
  color: white;
  padding: 10px 0px;
  text-align: center;
}
.personality-result .result-detail.bad .tit {
  background: #ffa913;
}
.personality-result .result-detail.good .tit {
  background: #32a0ff;
}
.personality-result .result-detail .centers {
  padding: 10px 0px;
}
.personality-result .result-detail .center {
  display: flex;
  margin: 20px 15px;
}
.personality-result .result-detail .center .img-area {
  width: 55px;
  height: 55px;
  flex: none;
  margin: 0 15px 0 0;
  position: relative;
}
.personality-result .result-detail .center .desc {
  justify-content: space-between;
  display: flex;
  flex-direction: column;
  color: #696c70;
  font-size: 13px;
  line-height: 1.4;
}
.personality-result .result-detail .center .desc .subject {
  color: #313436;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}
.personality-result .result-detail .warn {
  padding: 10px 0px;
  border-top: 1px solid rgb(232, 232, 232, 0.5);
  margin: 0px 10px;
  font-size: 11px;
  color: #696c70;
}
.personality-result .result-detail .warn b {
  color: #313436;
  font-weight: 600;
}
.personality-result .center .img-area:after {
  content: '';
  width: 24px;
  height: 24px;
  position: absolute;
  right: -8px;
  bottom: 0px;
}
.personality-result .center .img-area.face-0:after {
  background: url(../images/condition/face_0.svg) no-repeat;
}
.personality-result .center .img-area.face-1:after {
  background: url(../images/condition/face_1.svg) no-repeat;
}
.personality-result .center .img-area.face-2:after {
  background: url(../images/condition/face_2.svg) no-repeat;
}
.personality-result .center .img-area.face-3:after {
  background: url(../images/condition/face_3.svg) no-repeat;
}
.result-footer .desc {
  text-align: left;
  color: #696c70;
  font-size: 13px;
  line-height: 1.5;
  margin: 20px 0px 30px;
  word-break: break-all;
}
.personality-result .result-graph .result .next:after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 14px;
  background: url(../images/icon/icon_arrow.svg) no-repeat;
  filter: brightness(0.7);
  position: absolute;
  right: 0px;
  top: calc((100% - 14px) / 2);
}
.result-detail .no-result {
  text-align: center;
  font-size: 14px;
  color: #313436;
  margin: 30px 0px;
  font-weight: 600;
}
.personality-progress {
  height: 3px;
  width: 100%;
  background: #cccccc;
}
.personality-progress div {
  height: 3px;
  background: linear-gradient(to right, #f55e85 0%, #f365f1 100%);
}

.condition-top {
  position: relative;
}
.condition-top .btn-layer-closed {
  position: absolute;
  top: calc(var(--status-bar-height, 0px) + 15px);
  right: 15px;
  z-index: 1;
}
.condition-top .content-area {
  height: 100%;
  width: 100%;
  display: flex;
  position: absolute;
  top: 0;
  overflow: hidden;
}
.condition-top .content-area div {
  margin: auto 0 20px;
  color: white;
  padding: 20px 90px 5px 15px;
}
.condition-top .content-area div .title {
  font-size: 24px;
  padding: 40px 0px 15px;
}
.condition-top .content-area div .title b {
  font-weight: 600;
}
.condition-top .content-area div .desc {
  font-size: 12px;
  line-height: 1.5;
  word-break: break-all;
}
.condition-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-evenly;
}
.condition-content .no span {
  font-size: 32px;
  font-weight: 700;
  color: #621c82;
}
.condition-content .no span:before {
  content: '';
  width: 48px;
  height: 48px;
  display: inline-block;
  background: url(../images/share/findjob/icon_question.svg) no-repeat;
  vertical-align: middle;
  margin-right: 8px;
}
.condition-content .question {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}

.condition-content .answer {
  display: flex;
  width: 100%;
  justify-content: center;
}
.condition-content .answer .wrapper {
  border-radius: 10px;
  background: white;
  margin: 15px 15px;
  padding: 30px;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}
.condition-content .answer .wrapper:active {
  background: #9873ea;
}
.condition-content .answer .wrapper.on {
  background: #9873ea;
}
.condition-content .answer .wrapper div {
  width: 80px;
  height: 80px;
}
.condition-content .answer .wrapper.btn-O div {
  background: url(../images/condition/A_O_normal.svg);
}
.condition-content .answer .wrapper.on.btn-O div {
  background: url(../images/condition/A_O_press.svg);
}
.condition-content .answer .wrapper.btn-O:active div {
  background: url(../images/condition/A_O_press.svg);
}
.condition-content .answer .wrapper.btn-X div {
  background: url(../images/condition/A_X_normal.svg);
}
.condition-content .answer .wrapper.on.btn-X div {
  background: url(../images/condition/A_X_press.svg);
}
.condition-content .answer .wrapper.btn-X:active div {
  background: url(../images/condition/A_X_press.svg);
}
.condition .guide {
  font-size: 15px;
  text-align: center;
  color: #696c70;
}
.question-bottom {
  display: flex;
  margin: 10px auto;
}
.question-bottom .paging {
  margin: auto 10px;
  color: #696c70;
  font-size: 14px;
}
.question-bottom .paging span {
  font-weight: 600;
  color: #313436;
}
.question-bottom .btn {
  background: url(../images/icon/icon_dropdown.svg) !important;
  width: 20px;
  height: 20px;
}
.question-bottom .btn:disabled {
  filter: grayscale(1) brightness(1.8);
}
.question-bottom .next {
  transform: rotate(-90deg);
}
.question-bottom .prev {
  transform: rotate(90deg);
}
.condition .react-swipeable-view-container {
  height: 100%;
}
.condition .condition-container {
  display: flex;
  padding: 20px;
  overflow-x: hidden;
}
.condition-result .result-summary {
  text-align: center;
}
.condition-result .result-summary .date {
  color: #696c70;
  font-size: 14px;
  margin: 20px 0px 10px;
}
.condition-result .result-summary .tit {
  color: #313436;
  font-size: 22px;
  margin: 5px 0px 10px;
}
.condition-result .result-summary .tit b {
  font-weight: 600;
}
.condition-result .result-graph .result {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  position: absolute;
  top: -41px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  align-items: center;
  line-height: 1.2;
  word-break: break-all;
}
.condition-result .result-graph {
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
  padding: 5px 10px;
  margin: 20px 0px;
}
.condition-result .result-graph .result-progress {
  height: 150px;
}
.condition-result .result-graph .result .tit {
  font-size: 16px;
  font-weight: 600;
}
.condition-result .result-graph .result .point {
  font-size: 42px;
  font-weight: 800;
}
.condition-result .result-graph .result .next {
  font-size: 14px;
  color: #313436;
  border-radius: 4px;
  border: 1px solid #dddddd;
  padding: 5px 25px;
  margin-top: 5px;
  position: relative;
  max-width: 200px;
}
.condition-result .result-graph .result .next div {
  display: inline;
  word-break: break-all;
}
.condition-result .result-graph .result .next span {
  font-size: 18px;
  font-weight: 600;
}
.condition-result .result-graph .result-desc {
  margin: 15px 0px 0px;
  padding: 10px 5px;
  border-top: 0.5px solid rgb(232, 232, 232, 0.5);
  display: flex;
}
.condition-result .result-graph .result-desc .img-area {
  width: 55px;
  flex: none;
  margin: 0 10px 0 0;
  align-self: center;
}
.condition-result .result-graph .result-desc .desc {
  display: flex;
}
.condition-result .result-graph .result-desc .desc p {
  margin: auto;
  color: #696c70;
  font-size: 13px;
  line-height: 1.4;
  word-break: break-all;
}
.condition-result .result-detail {
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.2);
  margin: 20px 0px;
  overflow: hidden;
}
.condition-result .result-detail .tit {
  font-size: 16px;
  color: white;
  padding: 10px 0px;
  text-align: center;
  word-break: break-all;
}
.condition-result .result-detail.bad .tit {
  background: #ffa913;
}
.condition-result .result-detail.good .tit {
  background: #32a0ff;
}
.condition-result .result-detail .centers {
  padding: 10px 0px;
}
.condition-result .result-detail .center {
  display: flex;
  margin: 20px 15px;
}
.condition-result .result-detail .center .img-area {
  width: 55px;
  height: 55px;
  flex: none;
  margin: 0 15px 0 0;
  position: relative;
}
.condition-result .result-detail .center .desc {
  justify-content: space-between;
  display: flex;
  flex-direction: column;
  color: #696c70;
  font-size: 13px;
  line-height: 1.4;
}
.condition-result .result-detail .center .desc p {
  word-break: break-all;
}
.condition-result .result-detail .center .desc .subject {
  color: #313436;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
}
.condition-result .result-detail .warn {
  padding: 10px 0px;
  border-top: 1px solid rgb(232, 232, 232, 0.5);
  margin: 0px 10px;
  font-size: 11px;
  color: #696c70;
  word-break: break-all;
}
.condition-result .result-detail .warn b {
  color: #313436;
  font-weight: 600;
}
.condition-result .center .img-area:after {
  content: '';
  width: 24px;
  height: 24px;
  position: absolute;
  right: -8px;
  bottom: 0px;
}
.condition-result .center .img-area.face-0:after {
  background: url(../images/condition/face_0.svg) no-repeat;
}
.condition-result .center .img-area.face-1:after {
  background: url(../images/condition/face_1.svg) no-repeat;
}
.condition-result .center .img-area.face-2:after {
  background: url(../images/condition/face_2.svg) no-repeat;
}
.condition-result .center .img-area.face-3:after {
  background: url(../images/condition/face_3.svg) no-repeat;
}
.condition-result .result-graph .result .next:after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 14px;
  background: url(../images/icon/icon_arrow.svg) no-repeat;
  filter: brightness(0.7);
  position: absolute;
  right: 0px;
  top: calc((100% - 14px) / 2);
}
.result-detail .no-result {
  text-align: center;
  font-size: 14px;
  color: #313436;
  margin: 30px 0px;
  font-weight: 600;
}
.condition-progress {
  height: 3px;
  width: 100%;
  background: #cccccc;
}
.condition-progress div {
  height: 3px;
  background: linear-gradient(to right, #f55e85 0%, #f365f1 100%);
}
.password-container {
  position: relative;
}
.password-container input {
  padding: 0 35px 0px 8px;
}
.password-container .password-hide {
  position: absolute;
  right: 8px;
  top: calc((100% - 25px) / 2);
  width: 25px;
  height: 25px;
}
.password-container .password-hide span:after {
  content: '';
  display: inline-block;
  width: 25px;
  height: 25px;
  background: url(../images/icon/password_hide.svg) no-repeat;
  position: absolute;
  right: 0px;
  top: 0px;
}
.password-container .password-hide span.hide:after {
  background: url(../images/icon/password_hide_off.svg) no-repeat;
}

.password-container .password-hide.white span:after {
  filter: brightness(0) invert(1);
}
.share-container {
  transform: skew(-0.03deg);
}
.snack-container {
  padding: 15px;
  margin: auto;
}
.snack-container h1 {
  text-align: center;
  font-size: 20px;
  line-height: 1.5;
  padding: 20px 0px;
}
.snack-container img {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
  height: auto;
}
.snack-container .content {
  padding: 20px 0px;
}
.snack-container .content span {
  word-break: break-all;
}
.snack-container .content sub-title {
  background: #b75bda;
  padding: 6px 10px;
  border-radius: 8px;
  color: #fff;
  margin-left: 12px;
}
.snack-container .content sub-title:before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 14px;
  background: url(../images/snack/bubble_bg.svg) no-repeat;
  position: absolute;
  left: 15px;
  margin-top: 10px;
}
.snack-container .content sub-title2 {
  background: #e65d69;
  padding: 6px 10px;
  border-radius: 8px;
  color: #fff;
  display: block;
  text-align: center;
}
.snack-container .content sub-title2 {
  background: #e65d69;
  padding: 6px 10px;
  border-radius: 8px;
  color: #fff;
  display: block;
  text-align: center;
}
.snack-container .content sub-title-tag {
  display: block;
  text-align: center;
  font-size: 16px;
  color: #383a3b;
  line-height: 0;
}
.snack-container .content c1 {
  color: #b75bda;
}
.snack-container .content c2 {
  color: #5844ed;
}
.snack-container .content c3 {
  color: #1ca385;
}
.snack-container .content t20 {
  font-size: 20px;
}
.snack-container .content t19 {
  font-size: 19px;
}
.snack-container .content t18 {
  font-size: 18px;
}
.snack-container .content t17 {
  font-size: 17px;
}
.snack-container .content t16 {
  font-size: 16px;
}
.snack-container .content t15 {
  font-size: 15px;
}
.snack-container .content t14 {
  font-size: 14px;
}
.snack-container .content line {
  margin: 20px 0px 0px;
  border-bottom: solid 1px rgb(172, 165, 178);
  display: block;
}
.section-snack .new {
  color: #a445c9;
  margin-left: 5px;
  font-style: italic;
}
.section-snack .free {
  background: url(../images/snack/free_bg.svg) no-repeat;
  padding: 5px 5px 5px 15px;
  color: #fff;
}
.facebook-error {
  font-size: 16px;
  text-align: center;
  color: #383838;
  line-height: 1.5;
  padding: 0px 20px;
}
.facebook-error p {
  text-align: center;
  margin-bottom: 20px;
}
.btn-retry-facebook {
  background: #4373db;
}
.btn-retry-facebook:active {
  background: #365caf;
}
.search {
  display: flex;
  background: #fff;
  border-bottom: 1px solid #dedfe3;
}

.search input {
  border: 0px solid transparent;
  border-radius: 0px;
  background: transparent;
  box-shadow: none;
  height: 35px;
  margin: 10px 5px;
  flex: 1;
}
.search input:focus {
  border: 0px solid transparent;
}
.search .icon {
  width: 22px;
  height: 22px;
  display: inline-block;
  vertical-align: middle;
  margin: auto 5px auto 20px;
}
.search .search-clear {
  width: 14px;
  height: 14px;
  vertical-align: middle;
  margin: auto 5px;
}
.search .search-clear.hide {
  visibility: hidden;
}
.search .search-button {
  height: 30px;
  margin: auto 10px;
  padding: 10px 15px;
  border-radius: 5px;
  background: #621c82;
  color: #fff;
  word-break: keep-all;
}
.search .search-button:active {
  background: #510e70;
}
.relation-info .rel-name span,
.profile-area .name span {
  color: #b75bda;
}
input::-ms-clear,
input::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}
input::-webkit-search-decoration,
input::-webkit-search-cancel-button,
input::-webkit-search-results-button,
input::-webkit-search-results-decoration {
  display: none;
}

.wrap .contents .empty-list {
  display: flex;
  width: 100%;
  min-height: 200px;
  font-size: 15px;
  color: #464a4e;
  flex: 1;
}
.wrap .contents .empty-list div {
  margin: auto;
}
.counseling-banner {
  margin: 5px 0px 20px;
  border-radius: 10px;
  overflow: hidden;
  background: white;
  box-shadow: 0px 0px 5px rgb(0 0 0 / 20%);
}
.chat-bot-banner {
  margin: 5px 0px 5px;
  border-radius: 10px;
  overflow: hidden;
  background: white;
  box-shadow: 0px 0px 5px rgb(0 0 0 / 20%);
}
.profiles-bot-banner {
  overflow: hidden;
  background: white;
}
.rw-conversation-container {
  border-radius: 0px !important;
}
.biorhythm-user {
  font-size: 16px;
  color: #7c7f84;
  margin: 20px 0px 0px 30px;
}
.biorhythm-user::after {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url(../images/icon/icon_dropdown.svg) no-repeat;
  margin: 0px 0px -3px 7px;
}
.biorhythm-user span {
  color: #313131;
  font-size: 18px;
}
.biorhythm-date {
  margin: 10px 20px;
  background: #f1f2f7;
  padding: 12px;
  border-radius: 5px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.biorhythm-date::after {
  content: '';
  width: 20px;
  height: 20px;
  background: url(../images/select-date.svg) no-repeat;
  vertical-align: middle;
}
.biorhythm-dday {
  display: flex;
  justify-content: center;
}
.biorhythm-dday img {
  width: 32px;
  margin-left: 28px;
}
.biorhythm .chart-container {
  margin-top: -30px;
}
.biorhythm-desc {
  display: flex;
  margin: 15px 20px;
  border-radius: 10px;
  position: relative;
}
.biorhythm-desc .info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 30px 10px;
  height: 100%;
  flex: 1;
  min-height: 95px;
}
/*
.biorhythm-desc .info.active::after {
  border-color: #f1f2f7 transparent;
  border-style: solid;
  border-width: 8px 6px 0px 6.5px;
  content: '';
  display: block;
  position: absolute;
  bottom: -7px;
  width: 0;
  z-index: 1;
}

.biorhythm-desc .info.active::before {
  border-color: #e8e8e8 transparent;
  border-style: solid;
  border-width: 8px 6px 0px 6.5px;
  content: '';
  display: block;
  position: absolute;
  bottom: -8px;
  width: 0;
  z-index: 0;
}

.biorhythm-desc .info.active.b-0::after,
.biorhythm-desc .info.active.b-0::before {
  left: calc(100% / 8);
}
.biorhythm-desc .info.active.b-1::after,
.biorhythm-desc .info.active.b-1::before {
  left: calc(100% / 2 - 47px);
}
.biorhythm-desc .info.active.b-2::after,
.biorhythm-desc .info.active.b-2::before {
  left: calc(100% / 4 * 3 - 47px);
}
.biorhythm-desc .info.active.b-3::after,
.biorhythm-desc .info.active.b-3::before {
  left: calc(100% - 47px);
}
*/

.biorhythm-desc .info.active {
  background: #f1f2f7;
  border-radius: 8px;
  border: 1px solid #e8e8e8;
}
.biorhythm-desc .info div {
  font-size: 12px;
  color: #676767;
  line-height: 1.3;
  text-align: center;
  word-break: break-all;
}
.biorhythm-detail {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 0px 20px;
  flex-flow: wrap;
}
.biorhythm-detail > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
}

.biorhythm-detail > div.selected::after {
  border-color: #f1f2f7 transparent;
  border-style: solid;
  border-width: 8px 6px 0px 6.5px;
  content: '';
  display: block;
  position: absolute;
  top: -16px;
  width: 0;
  z-index: 1;
}

.biorhythm-detail > div.selected::before {
  border-color: #e8e8e8 transparent;
  border-style: solid;
  border-width: 8px 6px 0px 6.5px;
  content: '';
  display: block;
  position: absolute;
  top: -15px;
  width: 0;
  z-index: 0;
}

.biorhythm-detail .RCP {
  margin: -10px;
}
.biorhythm-emoticon {
  display: flex;
  justify-content: center;
  text-align: center;
  position: absolute;
  top: -1px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  align-items: center;
}
.biorhythm-emoticon img {
  width: 36px;
  height: 36px;
}
.biorhythm-detail-info {
  font-size: 13px;
  color: #7c7f84;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 20px;
  text-align: center;
}
.biorhythm-detail-info span:nth-child(1) {
  color: #313131;
  font-size: 20px;
  margin-bottom: 3px;
}
.contents.biorhythm {
  height: auto;
  min-height: 100%;
}
.biorhythm-profile-desc {
  padding: 10px;
  color: #5b5b5b;
  font-size: 12px;
  background: white;
  line-height: 1.3;
}
.personality-start {
  padding-left: 25px;
  padding-right: 25px;
  padding-bottom: 25px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.personality-start .title {
  font-size: 26px;
  margin: 40px 0px 20px;
  font-weight: 800;
  line-height: 1.2;
}
.personality-start .desc {
  color: #7c7f84;
  font-size: 14px;
  line-height: 1.4;
}
.personality-start .bg {
  margin: 30px 0px;
  display: flex;
}
.personality-start .bg img {
  object-fit: contain;
  margin: auto;
  max-width: 400px;
}
.personality-start .wrapper {
  border-radius: 5px;
  background: white;
  margin: 15px 0px;
  padding: 17px;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  color: #fff;
}
.personality-start .wrapper.test {
  background: #621c82;
}
.personality-start .wrapper.guide {
  background: #9873ea;
}
.personality-start .wrapper:active {
  background: #9873ea;
  color: #fff;
}
.personality-start .line {
  border-bottom: 1px solid #aaa;
  margin: 10px 0px 20px;
}
.personality-start .warning {
  font-size: 11px;
  line-height: 1.4;
  color: #a0a0a0;
  padding: 10px 0px 30px;
}
.personality-start .warning p {
  word-break: break-all;
}
.personality-guide .header,
.personality-guide .contents {
  background: #9873ea;
  color: white;
}

.personality-guide .header-title {
  color: #fff;
}

.personality-guide .guide-desc {
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
  margin: 25px 10px;
  color: rgba(255, 255, 255, 0.8);
  word-break: break-all;
}
.personality-guide .guide-images {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.personality-guide .guide-images img {
  width: 50%;
  padding: 3px;
  border-radius: 5px;
  object-fit: contain;
}
.guide-warn {
  font-size: 11px;
  line-height: 1.5;
  color: #dacaff;
  margin: 30px 15px 10px;
}
.guide-warn p {
  word-break: break-all;
}
.personality-guide .header-btn.close {
  filter: brightness(100);
}
.personality-result {
  background: #f1f2f7;
}
.personality-result .type {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.personality-result .type .img {
  position: relative;
  width: 170px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.personality-result .type .mbti {
  max-width: 400px;
}
.personality-result .type .img div {
  position: absolute;
  display: flex;
  height: 100%;
  align-items: center;
  padding-bottom: 10px;
  font-size: 38px;
  font-weight: 800;
  color: #8c5bf9;
}
.personality-result .type .tit {
  font-size: 20px;
  font-weight: 800;
  color: #8c5bf9;
  margin: 10px 0px 10px;
}
.personality-result .type .desc {
  font-size: 15px;
  color: #313131;
  margin: 0px 20px 60px;
  line-height: 1.3;
  text-align: center;
  overflow-wrap: anywhere;
}

.personality-result .section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.personality-result .section img {
  width: 100px;
  margin: 10px 0px;
}
.personality-result .section .tit {
  font-size: 20px;
  font-weight: 600;
  border-bottom: 7px solid red;
  height: 22px;
  margin-bottom: 20px;
}
.personality-result .section .method {
  width: 100%;
  margin-bottom: 10px;
}
.personality-result .section .method-tit {
  font-size: 15px;
  font-weight: 700;
  margin: 10px 0px 10px;
}
.personality-result .section .method-desc {
  font-size: 13px;
  color: #5b5b5b;
  display: flex;
  line-height: 1.5;
  padding-left: 10px;
  position: relative;
  overflow-wrap: anywhere;
}
.personality-result .section .method-desc::before {
  content: '';
  color: #5b5b5b;
  background: red;
  width: 4px;
  height: 4px;
  margin: 7px 3px 0px 3px;
  left: -1px;
  position: absolute;
  border-radius: 10px;
}

.personality-result .strength {
  background: #fdf6ff;
}
.personality-result .strength .tit {
  border-bottom: 7px solid #d9c8ff;
}
.personality-result .strength .method-tit {
  color: #8c5bf9;
}
.personality-result .strength .method-desc::before {
  background: #8c5bf9;
}

.personality-result .study {
  background: #eeffee;
}
.personality-result .study .tit {
  border-bottom: 7px solid #b7f9b9;
}
.personality-result .study .method-tit {
  color: #36b161;
}
.personality-result .study .method-desc::before {
  background: #36b161;
}

.personality-result .connectivity {
  background: #f1fbff;
}
.personality-result .connectivity .tit {
  border-bottom: 7px solid #a3e8ff;
}
.personality-result .connectivity .method-tit {
  color: #2d8ff4;
}
.personality-result .connectivity .method-desc::before {
  background: #2d8ff4;
}

.personality-result .company {
  background: #fffdf1;
}
.personality-result .company .tit {
  border-bottom: 7px solid #ffe792;
}
.personality-result .company .method-tit {
  color: #fca033;
}
.personality-result .company .method-desc::before {
  background: #fca033;
}
.personality-result .keywords {
  padding: 35px 15px 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
}
.personality-result .keywords .tit {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 15px;
}
.personality-result .personality-keyword-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.personality-result .keywords .keyword {
  border: 1px solid #9873ea;
  border-radius: 30px;
  color: #9873ea;
  font-size: 13px;
  padding: 5px 8px;
  margin: 2px;
}
.personality-result .keywords .seperate {
  width: 100%;
  margin: 35px 15px 5px;
  border-bottom: 1px solid #f2f2f2;
}
.personality-result .individuals {
  padding: 10px 0px 10px;
  background: #fff;
}
.personality-result .individuals .indi {
  display: flex;
  margin: 25px 20px;
}
.personality-result .individuals .indi .type {
  min-width: 44px;
  max-width: 44px;
  height: 44px;
  margin-right: 15px;
}
.personality-result .individuals .indi .info {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.personality-result .individuals .indi .info .tit {
  color: #313131;
  font-size: 14px;
  line-height: 18px;
  margin-bottom: 5px;
  font-weight: 600;
}
.personality-result .individuals .indi .info .desc {
  color: #5b5b5b;
  font-size: 12px;
  word-break: break-all;
}

.personality-result .simular {
  display: flex;
  padding: 25px;
  background-color: #fff;
  border-top: 50px solid #f1f2f7;
  filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
}
.personality-result .simular .info {
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-around;
}
.personality-result .simular .info .tit {
  font-size: 14px;
  margin-bottom: 10px;
}
.personality-result .simular .info span {
  color: #8c5bf9;
  font-size: 22px;
  font-weight: 800;
  text-transform: uppercase;
  margin-right: 5px;
}

.personality-result .simular .info .group {
  color: #5b5b5b;
  font-size: 12px;
}

.personality-result .simular .info .name {
  color: #000;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
}

.personality-result .simular .info .chat {
  background-color: #9873ea;
  font-size: 15px;
  font-weight: 600;
  width: 100%;
  padding: 20px;
  max-width: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  color: #fff;
  height: 36px;
}

.personality-result .simular img {
  max-width: 133px;
  border-radius: 5px;
}

.personality-result .compare {
  display: flex;
  background-color: #f1f2f7;
  border-top: 50px solid #f1f2f7;
}
.personality-result .compare .compare-section {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #fff;
}
.personality-result .compare .compare-section .tit {
  width: 100%;
  height: 35px;
  text-align: center;
  font-size: 15px;
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.personality-result .compare .compare-section .image {
  height: 120px;
  margin-bottom: 15px;
}
.personality-result .compare .compare-section .image img {
  object-fit: contain;
}

.personality-result .compare .compare-section .type {
  font-size: 28px;
  font-weight: 800;
  margin: 30px 0px 5px;
  text-transform: uppercase;
}
.personality-result .compare .compare-section .name {
  font-size: 14px;
  font-weight: 400;
  margin: 5px 0px 15px;
}
.personality-result .compare .compare-section .desc {
  font-size: 13px;
  margin: 5px 10px 25px;
  text-align: center;
  line-height: 1.5;
  word-break: break-all;
}

.personality-result .compare .compare-section.always {
  background-color: #9873ea;
}
.personality-result .compare .compare-section.never {
  background-color: #5d5d5d;
}
.personality-result .compare .compare-section.always .tit {
  background-color: #794cdd;
}
.personality-result .compare .compare-section.never .tit {
  background-color: #353535;
}
.personality-result > div.date {
  margin: 20px 15px 5px;
  padding: 5px 10px;
  border-bottom: 1px solid #bfc2cf;
  font-size: 13px;
  color: #7c7f84;
}
.personality-result > div.info {
  font-size: 15px;
  color: #7c7f84;
  text-align: center;
  margin: 30px 0px 20px;
}
.personality-result > div.info span {
  font-size: 18px;
  color: #313131;
  font-weight: 600;
}
.personality-result .extra {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}
.personality-result .extra .buttons {
  padding: 20px 20px;
  width: 100%;
  border-radius: 5px;
  text-align: center;
  color: white;
  font-size: 15px;
  margin: 5px 0px;
}
.personality-result .extra .buttons.share {
  background: #621c82;
}
.personality-result .extra .buttons.retry {
  background: #ffffff;
  color: #000;
  filter: drop-shadow(0px 1px 3px rgba(0, 0, 0, 0.15));
}
.personality-result .extra .guide {
  color: #7c7f84;
  margin: 15px 0px 30px;
  border-bottom: 1px solid #7c7f84;
  font-size: 12px;
}
.biorhythm.simply .bio-title {
  color: #464a4e;
  font-size: 14px;
  padding: 14px 15px;
}
.biorhythm.simply .bio-title span {
  font-weight: 600;
}
.biorhythm.simply .biorhythm-dday img {
  width: 32px;
  margin-left: 26px;
}
.biorhythm-detail.simply {
  justify-content: space-evenly;
  margin-bottom: 10px;
}
.biorhythm-simply-info {
  margin: 5px;
  font-weight: 600;
  display: flex;
  align-items: center;
}
.biorhythm-simply-info::before {
  content: '';
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 100%;
}
.biorhythm-detail.simply div:nth-child(1) .biorhythm-simply-info::before {
  background-color: rgb(250, 88, 114);
}
.biorhythm-detail.simply div:nth-child(2) .biorhythm-simply-info::before {
  background-color: rgb(84, 122, 255);
}
.biorhythm-detail.simply div:nth-child(3) .biorhythm-simply-info::before {
  background-color: rgb(255, 170, 38);
}
.biorhythm-detail.simply div:nth-child(4) .biorhythm-simply-info::before {
  background-color: rgb(81, 177, 114);
}
.biorhythm-simply-info span:nth-child(1) {
  padding-left: 10px;
}
.biorhythm-simply-info span:nth-child(2) {
  color: #464a4e;
  margin-left: 5px;
}
.personality-banner {
  margin: 5px 0px 15px;
  border-radius: 10px;
  overflow: hidden;
  background: white;
  box-shadow: 0px 0px 5px rgb(0 0 0 / 20%);
  width: 50%;
}
.personality-banner .personality-title {
  font-size: 13px;
  background-color: #9873ea;
  color: #fff;
  text-align: center;
  padding: 10px 0px 10px;
}
.personality-banner .personality-info {
  font-size: 12px;
  color: #464a4e;
  margin: 10px 0px 5px;
}
.personality-banner .personality-desc {
  font-size: 14px;
  font-weight: 600;
  color: #464a4e;
  margin: 0px 0px 5px;
}
.personality-banner .personality-desc span {
  color: #8c5bf9;
}
.personality-banner .personality-img {
  width: 50%;
  padding: 0px 0px 15px;
  margin: auto;
  max-width: 80px;
}
.personality-banner .personality-img img {
  max-width: 80px;
  max-height: 80px;
  object-fit: contain;
}
.personality-banner .personality-register {
  margin: 15px 20px 20px;
  border: 1px dashed #bcbec4;
  min-height: 65px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
}
.personality-register span {
  width: 30px;
  height: 30px;
  border: 2px solid #bcbec4;
  border-radius: 50%;
  color: #bcbec4;
  font-size: 28px;
}
.personality-banner .personality-title {
  font-size: 13px;
  background-color: #9873ea;
  color: #fff;
  text-align: center;
  padding: 10px 0px 10px;
}
.personality-banner .personality-info {
  font-size: 12px;
  color: #464a4e;
  margin: 10px 0px 5px;
}
.personality-banner .personality-desc {
  font-size: 13px;
  font-weight: 600;
  color: #464a4e;
  margin: 0px 0px 5px;
}
.personality-banner .personality-desc span {
  color: #8c5bf9;
}
.personality-banner .personality-register {
  margin: 15px 20px 20px;
  border: 1px dashed #bcbec4;
  min-height: 65px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
}
.personality-register span {
  width: 30px;
  height: 30px;
  border: 2px solid #bcbec4;
  border-radius: 50%;
  color: #bcbec4;
  font-size: 28px;
}
.personality-desc.report span {
  color: #caa341;
}
.personality-banner .personality-title.report {
  font-size: 13px;
  background-color: #312f69;
  color: #fff;
  text-align: center;
  padding: 10px 0px 10px;
}

.report-prev-title {
  font-size: 21px;
  line-height: 1.5;
  margin: 50px 0px 30px 0px;
  background: linear-gradient(
      92.4deg,
      #ffe8a1 7.1%,
      #fff2cb 39.13%,
      #f1cf78 65.38%,
      #ffe8a1 92.52%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}
.report-prev-title span {
  font-size: 23px;
}

.report-prev-img {
  display: flex;
  justify-content: center;
  position: relative;
}
.report-prev-img .report-info {
  position: absolute;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.report-prev-img .report-info .title {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  margin: 25px auto 5px;
}
.report-prev-img .report-info .tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.report-prev-img .report-info .tags span {
  border: 1px solid #ffe8a1;
  border-radius: 50px;
  color: #ffe8a1;
  font-size: 10px;
  padding: 0px 8px;
  margin: 2px 2px;
}
.report-prev-img .report-info .desc {
  font-size: 12px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: left;
}
.report-prev-img .report-info .desc div {
  padding: 0px 20px;
  line-height: 1.8;
  font-size: 12px;
  word-break: break-all;
}
.report-prev-img img {
  max-width: 320px;
}


.report-desc {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.report-description {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}
.report-description .role {
  max-width: 300px;
  font-size: 11px;
  color: #9795b2;
  line-height: 1.5;
  margin: 17px 0px 30px;
  text-align: left;
  word-break: break-all;
}

.report-description .desc {
  max-width: 300px;
  font-size: 14px;
  margin-bottom: 20px;
  word-break: break-all;
}
.report-description .desc span {
  color: #ffe8a1;
}
.report-description .report-warn {
  word-break: break-all;
  color: #ff9696;
}
.report-desc .share {
  margin: 20px 0px 0px;
  background: #9873ea;
  color: #fff;
  font-size: 15px;
  padding: 10px 45px;
  border-radius: 5px;
}
.chatbot-list {
  padding: 20px;
}
.chatbot-list .my-profile {
  display: flex;
  flex-direction: column;
  margin: 5px 0px 20px;
}
.chatbot-list .my-profile .tit {
  color: #7c7f84;
  font-size: 11px;
  margin-bottom: 10px;
}
.chatbot-list .my-profile .info {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.chatbot-list .my-profile .info img {
  width: 47px;
  border-radius: 100%;
  margin-right: 10px;
}
.chatbot-list .my-profile .info span {
  color: #313131;
  font-size: 14px;
}
.chatbot-list .sub-banner {
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 15px;
}
.chatbot-list .master-list {
  margin: 20px 0px 0px;
}
.chatbot-list .master-list .tit {
  color: #7c7f84;
  font-size: 11px;
  margin-bottom: 5px;
}
.chatbot-list .master-list .master-item {
  display: flex;
  align-items: center;
  padding: 7px 0px;
}
.chatbot-list .master-list .master-item .master-img {
  width: 56px;
  border-radius: 100%;
  margin-right: 10px;
}
.chatbot-list .master-list .master-item .info {
  flex: 1;
}
.chatbot-list .master-list .master-item .info .name {
  color: #313131;
  font-size: 14px;
  font-weight: 600;
}
.chatbot-list .master-list .master-item .info .group {
  color: #5b5b5b;
  font-size: 12px;
  line-height: 1.5;
}
.chatbot-list .master-list .master-item .action {
  width: 28px;
  border-radius: 5px;
  overflow: hidden;
}
.chatbot-event .more {
  padding: 40px 20px 100px;
  background: #036c99;
  color: white;
  position: relative;
}
.chatbot-event .more .tit {
  font-size: 18px;
  font-weight: 600;
}
.chatbot-event .more .desc {
  font-size: 12px;
  padding: 10px 0px 50px;
  color: rgba(255, 255, 255, 0.7);
  word-break: break-all;
}
.chatbot-event .more video {
  width: 100%;
}
.chatbot-event .more::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  border-bottom: 20px solid #000f1b;
  border-left: 50vw solid #000f1b;
  border-right: 50vw solid transparent;
  border-top: 20px solid transparent;
}
.chatbot-event .intro {
  background: #000f1b;
  color: white;
  padding: 40px 20px 40px;
  position: relative;
}
.chatbot-event .intro .tit {
  font-size: 18px;
  font-weight: 600;
}
.chatbot-event .intro .desc {
  font-size: 12px;
  padding: 10px 0px 50px;
  color: rgba(255, 255, 255, 0.7);
  word-break: break-all;
}

.chatbot-event .intro .members-wrapper {
  display: flex;
  justify-content: center;
}
.chatbot-event .intro .members {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}
.chatbot-event .intro .members li {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80px;
  margin-bottom: 20px;
}
.chatbot-event .intro .members img {
  width: 70px;
  height: 70px;
  border-radius: 100%;
  margin-bottom: 10px;
}
.chatbot-event .intro .members span {
  color: #939393;
  font-size: 8px;
  text-align: center;
  min-height: 30px;
}
.chatbot-event .intro::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  border-top: 20px solid transparent;
  border-left: 50vw solid transparent;
  border-right: 50vw solid #10394b;
  border-bottom: 20px solid #10394b;
}
.chatbot-event .preview {
  background: #10394b;
  color: white;
  padding: 40px 20px 40px;
  position: relative;
}
.chatbot-event .preview .tit {
  font-size: 18px;
  font-weight: 600;
}
.chatbot-event .preview .desc {
  font-size: 12px;
  padding: 10px 0px 50px;
  color: rgba(255, 255, 255, 0.7);
  word-break: break-all;
}
.chatbot-event .preview img {
  padding: 0px 20px;
}
.chatbot-event .preview .description {
  font-size: 16px;
  font-size: 16px;
  margin: 40px 30px;
  line-height: 1.5;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  word-break: break-all;
}
.chatbot-event .preview .description span {
  font-weight: 600;
  color: rgba(255, 255, 255, 1);
  word-break: break-all;
}
.chatbot-event .preview::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  border-bottom: 20px solid #051010;
  border-left: 50vw solid #051010;
  border-right: 50vw solid transparent;
  border-top: 20px solid transparent;
}
.chatbot-event .method {
  background: #051010;
  color: white;
  padding: 40px 20px 60px;
}
.chatbot-event .method .tit {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 20px;
}
.chatbot-event .method .desc {
  font-size: 12px;
  padding: 5px 10px;
  color: #a0a0a0;
  word-break: break-all;
  line-height: 1.3;
  letter-spacing: -0.3;
}
.chatbot-event .purchase {
  background: #2ed8cd;
  color: #000000;
  height: 53px;
  width: 100%;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;
  bottom: 0px;
}
.chatbot-event .purchase.completed {
  border-top: 1px solid #2ed8cd;
  background: #0c0c0c;
  color: #2ed8cd;
}
.chatbot-layout.contents {
  background: #ffffff;
}
.chatbot-top {
  position: relative;
}
.chatbot-top .btn-layer-closed {
  position: absolute;
  top: 40px;
  right: 15px;
  z-index: 1;
}
.chatbot-top .content-area {
  height: 100%;
  width: 100%;
  display: flex;
  position: absolute;
  top: 0;
  overflow: hidden;
}
.chatbot-top .content-area div {
  margin: auto 0 20px;
  color: white;
  padding: 20px 0px 5px 15px;
}
.chatbot-top .master-info {
  display: flex;
  margin: -50px 0px 0px 20px;
}
.chatbot-top .master-info img {
  width: 94px;
  border: 2px solid white;
  border-radius: 100%;
}
.chatbot-top .master-info .info {
  margin-left: 10px;
}
.chatbot-top .master-info .info div:nth-child(1) {
  font-size: 15px;
  color: #a3a3a3;
  font-weight: 400;
  margin-bottom: 4px;
}
.chatbot-top .master-info .info div:nth-child(2) {
  font-size: 23px;
  color: #ffffff;
  font-weight: 600;
}
.chatbot-layout.contents .content-area {
  padding: 20px;
  background: #fff;
}
.chatbot-layout.contents .content-area .tit {
  color: #000000;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 12px;
}
.chatbot-layout.contents .content-area .desc {
  font-size: 14px;
  color: #5b5b5b;
  line-height: 1.5;
  margin-bottom: 10px;
}
.chatbot-layout.contents .content-area .master-img {
  margin-bottom: 30px;
}
.chatbot-layout.contents .content-area .lang {
  padding: 10px 0px;
  margin-bottom: 30px;
}
.chatbot-layout.contents .content-area .lang span {
  background: #f2f2f2;
  border-radius: 79px;
  font-size: 14px;
  font-weight: 600;
  color: #212121;
  padding: 10px 30px;
  margin-right: 10px;
}
.chatbot-layout.contents .content-area .warning {
  color: #737373;
  font-size: 12px;
}
.chatbot-layout.contents .content-area .noti li {
  color: #737373;
  font-size: 12px;
  margin: 0px 0px 10px;
  line-height: 1.5;
  word-break: break-all;
}
.chatbot-layout.contents .purchase {
  background: #e15353;
  color: #fff;
  height: 53px;
  width: 100%;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;
  bottom: 0px;
}
.chatbot-layout.contents .purchase.chat {
  background: #8229ab;
}
.float-chatbot {
  position: fixed;
  bottom: 0px;
  right: 0px;
  max-width: 450px;
  max-height: 125px;
  display: flex;
  padding: 0px 20px 30px 20px;
}

.float-chatbot .float-chatbot-container {
  position: relative;
  filter: drop-shadow(2px 2px 4px rgb(0 0 0 / 20%));
}
.float-chatbot .float-chatbot-container .icon-small {
  position: absolute;
  top: 0px;
  right: 0px;
  height: 100%;
}
.float-chatbot .make-small {
  width: 50px;
  height: 50px;
  position: absolute;
  left: 5px;
  top: calc((100% - 50px) / 2 + 5px);
}
.float-chatbot .small-icon {
  object-fit: contain;
  width: auto;
  max-width: 75px;
}
.video-responsive {
  overflow: hidden;
  padding-bottom: 56.25%;
  position: relative;
  height: 0;
}
.video-responsive iframe {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
}
.individual-desc{
  font-size: 15px;
  line-height: 23px;
  margin: 20px 10px;
  color: #686B70;
  line-height: 1.8;
}

.event-bottom-fixed-btn-double-group {
  display: flex;
  justify-content: space-between;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  align-items: center;
  z-index: 10;
  height: 60px;
}

.btn-dd {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
}

.btn-dd.point-color01 {
  background-color: #A8DFF4;
  color: #6737AC !important;
  font-size: 21px;
  font-weight: 900;
}

.btn-dd.point-color02 {
  background-color: #000000;
  color: #fff !important;
  font-size: 21px;
  font-weight: 900;
}

.contents.chapter h1{
  font-size: 22px;
  font-weight: 800;
  line-height: 34px;
  color: #393A3C;
  text-align: center;
  padding: 10px 20px 20px;
}

.contents.chapter img.manual-section-desc-img{
  margin: 20px 0px;
}
.contents.chapter .guide{
  color: #393A3C;
  font-size: 12px;
  margin: 20px 0px 0px;
}

.chapter-title span {
  color: #8C5BF9;
}

.chapter-desc {
  font-size: 14px;
  line-height: 26px;
  color: #696c70;
  margin: 10px 0px 30px;
}

.contents.chapter .guide-list {
  display: flex;
  text-align: center;
  /*    justify-content: space-between;*/
}

.contents.chapter .guide-list.profiles.slick-slider {
  flex-direction: column;
}

.contents.chapter .guide-list li.profile {
  padding: 5px 10px 25px;
  width: calc((100% / 3) - 6px);
  position: relative;
}
.contents.chapter .guide-list li.profile {
  margin-right: 4px;
  margin-left: 4px;
}

.contents.chapter .guide-list li.profile.on {
  position: relative;
}
.contents.chapter .guide-list li.on::before {
  content: '';
  width: 14px;
  height: 18px;
  position: absolute;
  background: url(../images/profile/icon/lock.svg) no-repeat;
  left: 6px;
  top: 6px;
}
.contents.chapter .guide-list li.profile .img-area {
  width: 65px;
  margin: 0 auto;
}
.contents.chapter .guide-list li.profile .img-area.pic {
  padding: 4px 2px;
  position: relative;
}
.contents.chapter .guide-list li.profile .img-area.pic img {
  border-radius: 100%;
}
.contents.chapter .guide-list li.profile .name {
  font-size: 12px;
  color: #7c7f84;
  margin-top: 6px;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.2;
  padding: 1px 0;
  overflow: hidden;
}
.contents.chapter .guide-list .pic.type:after {
  content: '';
  width: 18px;
  height: 18px;
  position: absolute;
  right: -1px;
  bottom: 5px;
}


.contents.chapter .chapter-profiles-title{
  font-size: 20px;
  font-weight: 600;
  color: #393A3C;
  margin: 50px 0px 10px;
}
.contents.chapter .guide-list .img-area img {
  margin: 5px 0px;
}
.contents.chapter .guide-list .name{
  color: #393A3C;
  font-size: 12px;
}

.contents.chapter .more-profiles{
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.contents.chapter .more-profiles .more-profile-count{
  border-radius: 20px;
  border: 1px solid #E6E6E6;
  font-size: 14px;
  color: #393A3C;
  padding: 4px 14px;
  font-weight: 600;
  line-height: 24px;
  margin: 30px 0px 20px;
}

.profile-box {
  border-radius: 8px;
  border: 1px solid #8C5BF9;
  padding: 13px;
  color: #8C5BF9;
  font-size: 14px;
  display: flex;
  justify-content: center;
  margin: 0px 0px 20px;
  font-weight: 400;
}

.contents.chapter .chapter-bottom {
  display: flex;
  justify-content: center;
  height: 64px;
  border-top: 1px solid rgb(222, 222, 229);
  background: rgb(255, 255, 255);
  position: fixed;
  bottom: 0px;
  left: 0px;
  width: 100%;
  flex-direction: row;
  align-items: center;
}

.contents.chapter .chapter-bottom img {
  width: 21px;
  height: 20px;
  object-fit: contain;
  margin: 0px 15px;
}

.contents.chapter .chapter-bottom .chapter-operator{
  flex: 1;
  display: flex;
  justify-content: flex-end;
  margin: 0px 15px;
  color: #DEDEE5;
}

.contents.chapter .chapter-bottom .chapter-operator span{
  color: #1E1E1E;
  font-size: 13px;
}
.contents.chapter .chapter-bottom .chapter-operator .prev{
  margin: 0px 30px 0px 0px;
}
.contents.chapter .chapter-bottom .chapter-operator .next{
  margin: 0px 0px 0px 30px;
}

.contents.chapter .no-profiles{
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  color: #808080;
}
.contents.chapter .gate-type {
  padding-top: 20px;
  color: #696c70;
}

.contents.chapter .gate-type .gate-title{
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 30px;
}

.contents.chapter .gate-type .gate-container{
  margin: 10px 0px 30px;
  font-size: 14px;
  line-height: 26px;
}

.contents.chapter .gate-type .gate-container .title{
  margin-bottom: 20px;
  font-weight: 800;
}

.contents.chapter .gate-type .gate-container .desc{
  font-weight: 400;
}

.contents.chapter .channel-type {
  padding-top: 10px;
  color: #696c70;
}

.contents.chapter .channel-type .channel-container {
  font-size: 14px;
  line-height: 26px;
  padding-bottom: 50px;
  border-bottom: 1px solid #DEDEE5;
  margin-bottom: 50px;
}

.contents.chapter .channel-type .channel-container:last-child{
  border-bottom: 0px;
  margin-bottom: 0px;
}

.contents.chapter .channel-type .channel-container img {
  margin: 0px;
}

.contents.chapter .channel-type .channel-container .title{
  margin-bottom: 20px;
  font-weight: 800;
  padding-top: 30px;
}

.contents.chapter .channel-type .channel-container .desc{
  font-weight: 400;
}

.chapter-type {
  display: flex;
  flex-wrap: wrap;
}

.chapter-type .frame-card {
  flex: calc(50% - 6px) 0 0;
  background: #E7E8EB;
  border-radius: 9px;
  color: #393A3C;
  padding: 0px 12px;
  margin-bottom: 12px;
  flex-direction: column;
  font-size: 14px;
  height: 64px;
  display: flex;
  justify-content: center;
  line-height: 22px;
}

.chapter-type .frame-card h2{
  display: flex;
  flex-direction: row;
  align-items: center;
}

.chapter-type .frame-card:nth-child(2n) {
  margin-left: 12px;
}

.chapter-type .frame-card img {
  width: 26px;
  height: 26px;
  margin-right: 10px;
}

.profile-design .popup-toast {
  position: relative;
}
.profile-design .popup-toast:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -8px;
  border-width: 8px;
  border-style: solid;
  border-color: #aca5b2 transparent transparent transparent;
}
.profile-design .popup-toast .toast {
  background: #aca5b2;
  display: flex;
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
  color: white;
  font-size: 12px;
  line-height: 18px;
  word-break: break-all;
  position: relative;
}
.profile-design .popup-toast .toast:after {
  content: '';
  width: 30px;
  height: 15px;
  background: url(../images/icon/icon_popup_x.svg) no-repeat;
  filter: brightness(10);
  align-self: center;
  margin-left: 5px;
  position: absolute;
  right: 0px;
}
.profile-design .popup-toast.hide-toast {
  opacity: 0;
  padding-top: 0px;
  padding-bottom: 0px;
  height: 0px;
}

.chapter .chapter-recommend .chapter-end-title {
  font-size: 18px;
  line-height: 24px;
}

.chapter .chapter-recommend .item-container {
  padding: 30px 0px 20px;
}

.chapter .chapter-recommend .recommend-item {
  padding: 10px 0px;
}

.chapter .chapter-recommend .recommend-item .recommend-item-container {
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  border: 1px solid #E6E6E6;
}

.chapter .chapter-recommend .recommend-item .recommend-item-container .recommend-item-img-container {
  position: relative;
}

.chapter .chapter-recommend .recommend-item .recommend-item-container .recommend-item-img-container .attach {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 6px 12px;
  border-radius: 15px;
  font-size: 11px;
  font-weight: 800;
}

.chapter .chapter-recommend .recommend-item .recommend-item-container .recommend-item-img-container .attach.purchase {
  border: 1px solid #FF76C0;
  background: #FFD6EC;
  color: #393A3C;
}

.chapter .chapter-recommend .recommend-item .recommend-item-container .recommend-item-img-container .attach.owned {
  border: 1px #70CAFC solid;
  background: #C5EAFF;
  color: #393A3C;
}

.chapter .chapter-recommend .recommend-item .recommend-item-container .recommend-item-img-container .attach.free {
  border: 1px #D689FF solid;
  background: #F1D4FF;
  color: #393A3C;
}

.chapter .chapter-recommend .recommend-item .recommend-item-container .recommend-item-desc {
  padding: 10px 12px;
  min-height: 64px;
  display: flex;
  align-items: center;
  font-size: 14px;
  line-height: 22px;
  color: #393A3C;
  font-weight: 400;
}

.chapter .chapter-recommend .detail-item{
  padding: 9px 0px;
}

.chapter .chapter-recommend .detail-item .detail-item-container{
  display: flex;
}

.chapter .chapter-recommend .detail-item .detail-item-container img{
  max-width: 160px;
}

.chapter .chapter-recommend .detail-item .detail-item-container .detail-item-desc-container{
  display: flex;
  flex-direction: column;
  flex: 1;
  margin-left: 10px;
}

.chapter .chapter-recommend .detail-item .detail-item-container .detail-item-title {
  font-size: 16px;
  font-weight: 400;
  color: #393a3c;
  line-height: 24px;
  flex: 1;
  margin: 5px 0px;
}

.chapter .chapter-recommend .detail-item .detail-item-container .detail-item-subtitle {
  font-size: 12px;
  font-weight: 400;
  color: #808080;
  margin: 8px 0px;
}

.chapter .text01{
  font-size: 20px;
  color: #393A3C;
  font-weight: 700;
  line-height: 30px;
  display: inline-block;
  margin: 10px 0 10px 0;
}

.chapter .text02{
  font-size: 18px;
  color: #393A3C;
  line-height: 24px;
  display: inline-block;
  margin: 10px 0 10px 0;
}

.chapter .text03{
  font-size: 16px;
  color: #393A3C;
}

.share-profile-wrapper{
  background: rgb(26, 35, 48);
}

.share-profile-wrapper .share-profile-info{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}

.share-profile-title-1{
  font-size: 18px;
  line-height: 30px;
  color: rgb(255, 255, 255);
  font-weight: 300;
  margin-top: 20px;
}

.share-profile-title-2{
  font-size: 26px;
  line-height: 36px;
  color: rgb(255, 255, 255);
  font-weight: 600;
  margin: 20px;
  text-align: center;
}

.share-profile-tag{
  background: rgb(255, 255, 255);
  border-radius: 8px;
  padding: 3px 16px;
  font-size: 16px;
  line-height: 28px;
  margin: 6px 0px;
}

.share-profile-img{
  width: 160px;
  margin: 30px 0px;
}
.share-profile-other{
  font-size: 14px;
  line-height: 22px;
  color: rgb(255, 255, 255);
  font-weight: 300;
  margin: 20px;
}

.share-layout .share-desc{
  font-size: 14px;
  color: rgb(105, 108, 112);
  line-height: 26px;
  font-weight: 400;
  margin: 20px 0px;
}

.spacing {
  display: block;
  width: 100%;
  overflow: hidden;
  background: transparent;
  pointer-events: none;

  &.space-20 {
    padding: 10px 0;
  }

  &.space-30 {
    padding: 15px 0;
  }

  &.space-40 {
    padding: 20px 0;
  }

  &.line {
    padding: 10px 0;
    border-bottom: 1px solid #DEDEE5;
  }

  &.line-20 {
    padding: 10px 0;
    border-bottom: 1px solid #DEDEE5;
  }

  &.line-30 {
    padding: 15px 0;
    border-bottom: 1px solid #DEDEE5;
  }
}

/* ══════════════════════════════════════════════════════════════
   Safe Area 불투명 커버 (상단 노치 + 하단 네비게이션 바)
   스크롤 시 콘텐츠가 비쳐보이지 않도록 고정 배경 처리
   ══════════════════════════════════════════════════════════════ */
/* 상단 노치 커버: 헤더 숨김 시에도 노치 영역에 불투명 배경 유지 */
.wrap::before, .wrapper::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--status-bar-height);
  background: #fff;
  z-index: 99;
  pointer-events: none;
}
/* 몰입형 페이지 (로그인, 인트로, 가이드): 노치/하단바 투명 */
.wrap-immersive::before { background: transparent !important; }
.wrap-immersive::after { background: transparent !important; }
/* 노치만 투명 (프로필 생성/수정): 하단바는 흰색 유지 */
.wrap-notch-transparent::before { background: transparent !important; }
/* 하단 safe area 커버: 네비게이션 바 영역에 불투명 배경 */
.wrap::after, .wrapper::after {
  content: '';
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--safe-area-bottom);
  background: #fff;
  z-index: 99;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════
   Bottom Safe Area (Android 네비게이션 바 대응)
   iOS는 env(safe-area-inset-bottom)으로 처리, Android는 --safe-area-bottom 사용
   ══════════════════════════════════════════════════════════════ */

/* ── 1. 하단 고정 바(bar) 요소: bottom:0 + padding-bottom으로 배경을 safe area까지 확장 ── */
/* 배경이 네비게이션 바 영역까지 이어져서 띠배너 느낌 방지 (헤더+노치 일체감과 동일 원리) */
/* !important: report.css, snack.css, counseling/content.css 등이 common.css 이후에 로드되어 덮어쓰기 방지 */
/* 원래 padding-bottom이 있는 요소: calc(원래값 + safe area) */
.bottom-fixed-btn-group { bottom: 0 !important; padding-bottom: calc(13px + var(--safe-area-bottom)) !important; }
.event-bottom-fixed-btn-group { bottom: 0 !important; padding-bottom: calc(13px + var(--safe-area-bottom)) !important; }
.report-purchase { bottom: 0 !important; padding-bottom: calc(10px + var(--safe-area-bottom)) !important; }
.wrap-btn-area.fix-bottom-area { bottom: 0 !important; padding-bottom: calc(15px + var(--safe-area-bottom)) !important; }
.personality .wrap-btn-area { padding-bottom: 15px !important; }
.condition .wrap-btn-area { padding-bottom: 15px !important; }
/* 원래 padding-bottom이 없는 요소 (height 고정이면 box-sizing: content-box) */
.event-bottom-fixed-btn-double-group { bottom: 0 !important; padding-bottom: var(--safe-area-bottom) !important; box-sizing: content-box !important; }
.snack-content-bottom { bottom: 0 !important; padding-bottom: var(--safe-area-bottom) !important; box-sizing: content-box !important; }
.snack-charge-blind { bottom: 0 !important; padding-bottom: var(--safe-area-bottom) !important; }
.contents.chapter .chapter-bottom { bottom: 0 !important; padding-bottom: var(--safe-area-bottom) !important; box-sizing: content-box !important; }
.chatbot-event .purchase { bottom: 0 !important; padding-bottom: var(--safe-area-bottom) !important; box-sizing: content-box !important; }
.chatbot-layout.contents .purchase { bottom: 0 !important; padding-bottom: var(--safe-area-bottom) !important; box-sizing: content-box !important; }

/* ── 1-2. 하단 플로팅 버튼: 위치만 올림 (배경 확장 불필요) ── */
.float-chatbot { bottom: var(--safe-area-bottom) !important; }
.btn-top { bottom: calc(18px + var(--safe-area-bottom)) !important; }
.charge-blind { bottom: calc(60px + var(--safe-area-bottom)) !important; }
/* profile-reg-layout: flex 컨테이너의 min-height를 네비게이션 바 제외 높이로 설정
   → margin-top:auto가 올바르게 동작하여 버튼이 가용 영역 하단에 위치 */
.contents.profile-reg-layout:not(.common) { padding-bottom: 0 !important; }
.wrap .personality.contents { padding-bottom: var(--safe-area-bottom) !important; }
.wrap .condition.contents { padding-bottom: var(--safe-area-bottom) !important; }

/* ── 2. 콘텐츠 영역: 네비게이션 바에 가려지지 않도록 padding-bottom 추가 ── */
.contents { padding-bottom: var(--safe-area-bottom) !important; }
.contents.chapter { padding-bottom: calc(64px + var(--safe-area-bottom)) !important; }
.contents .snack-content { padding-bottom: calc(64px + var(--safe-area-bottom)) !important; }
.contents .snack-content-preview { padding-bottom: calc(64px + var(--safe-area-bottom)) !important; }
.contents .report-layout { padding-bottom: calc(60px + var(--safe-area-bottom)) !important; }

/* ── 3. 레이어 팝업: 팝업 창을 네비게이션 바 위에 배치 ── */
.popup-layer .popup-window { margin-bottom: var(--safe-area-bottom) !important; }
.wrap-layer { height: calc(100% - var(--safe-area-bottom)) !important; }
.wrap-layer .layer-container { max-height: calc(100vh - 100px - var(--safe-area-bottom)) !important; }
.wrap-layer .layer-content { max-height: calc(100vh - 154px - var(--safe-area-bottom)) !important; }
.wrap-layer .bottom-fixed-btn-group { position: sticky !important; bottom: -18px !important; }

/* ── 4. 테스트 결과 페이지 하단 여유 ── */
.personality-result .extra { padding-bottom: calc(20px + var(--safe-area-bottom)) !important; }
.condition-result .result-footer { padding-bottom: calc(20px + var(--safe-area-bottom)) !important; }