a {
  text-decoration: underline;
}

.body {
  color: #46545b;
  font-family: PT Sans, sans-serif;
  font-size: 18px;
  line-height: 24px;
}

.section {
  background-image: linear-gradient(244.4deg, #ffa205e6, #ef4702d9);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-width: 100%;
  height: auto;
  min-height: 100vh;
  padding-top: 56px;
  padding-bottom: 80px;
  display: flex;
}

.section.section-white {
  background-image: linear-gradient(#ffffff80, #ffffff80);
  padding-top: 56px;
  padding-bottom: 80px;
}

.card {
  grid-row-gap: 112px;
  background-color: #fff;
  border-radius: 16px;
  flex-direction: column;
  text-decoration: none;
  display: flex;
  position: static;
  overflow: hidden;
  box-shadow: 0 2px 16px #46545b26;
}

.card.start-card {
  background-image: url('../images/Start-Test.webp');
  background-position: 100% 100%;
  background-repeat: no-repeat;
  background-size: auto 480px;
  justify-content: flex-start;
  align-items: flex-start;
  width: 848px;
  margin: auto;
  padding: 32px 56px;
  display: flex;
}

.card.question-card {
  grid-row-gap: 32px;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  height: auto;
  padding: 40px;
  display: flex;
  position: relative;
}

.card.challenge-card {
  grid-row-gap: 24px;
  justify-content: space-between;
  align-items: flex-start;
  width: 368px;
  height: auto;
  padding: 24px;
}

.card.description-card {
  grid-row-gap: 48px;
  width: 100%;
  min-width: 100%;
  max-width: 624px;
  padding: 24px 32px 32px;
}

.card.enemy-card.seeker-enemy-card {
  background-image: url('../images/THE-SEEKER.webp');
  background-position: 50% 60%;
  background-repeat: no-repeat;
  background-size: auto 528px;
}

.card.enemy-card.rebel-enemy-card {
  background-image: url('../images/DESTROYER.webp');
  background-position: 50% 60%;
  background-repeat: no-repeat;
  background-size: auto 512px;
}

.card.enemy-card.lover-enemy-card {
  background-image: url('../images/LOVER.webp');
  background-position: 50% 70%;
  background-repeat: no-repeat;
  background-size: auto 488px;
}

.card.enemy-card.creator-enemy-card {
  background-image: url('../images/CREATOR.webp');
  background-position: 50% 80%;
  background-size: auto 536px;
}

.card.enemy-card.ruler-enemy-card {
  background-image: url('../images/RULER.webp');
  background-position: 50% 75%;
  background-repeat: no-repeat;
  background-size: auto 512px;
}

.card.enemy-card.magician-enemy-card {
  background-image: url('../images/MAGICIAN.webp');
  background-position: 50% 65%;
  background-repeat: no-repeat;
  background-size: auto 504px;
}

.card.enemy-card.sage-enemy-card {
  background-image: url('../images/SAGE.webp');
  background-position: 50% 75%;
  background-repeat: no-repeat;
  background-size: auto 512px;
}

.card.enemy-card.fool-enemy-card {
  background-image: url('../images/FOOL.webp');
  background-position: 50% -10%;
  background-size: auto 608px;
}

.card.enemy-card.orphan-enemy-card {
  background-image: url('../images/ORPHAN.webp');
  background-position: 50% 80%;
  background-repeat: no-repeat;
  background-size: auto 512px;
}

.card.enemy-card.warrior-enemy-card {
  background-image: url('../images/WARRIOR.webp');
  background-position: 50% 120%;
  background-size: auto 544px;
}

.card.enemy-card {
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  width: 368px;
  height: 576px;
  padding-top: 24px;
  padding-bottom: 24px;
  display: flex;
}

.card.enemy-card.innocent-enemy-card {
  background-image: url('../images/INNOCENT.webp');
  background-position: 50% 110%;
  background-repeat: no-repeat;
  background-size: auto 544px;
}

.card.enemy-card.caregiver-enemy-card {
  background-image: url('../images/CAREGIVER.webp');
  background-position: 50% 75%;
  background-repeat: no-repeat;
  background-size: auto 496px;
}

.card.dominant-card.rebel-dominant-card {
  background-image: url('../images/DESTROYER.webp');
  background-position: 50% 60%;
  background-repeat: no-repeat;
  background-size: auto 512px;
}

.card.dominant-card {
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  width: 368px;
  height: 576px;
  padding-top: 24px;
  padding-bottom: 24px;
  display: flex;
}

.card.dominant-card.innocent-dominant-card {
  background-image: url('../images/INNOCENT.webp');
  background-position: 50% 110%;
  background-repeat: no-repeat;
  background-size: auto 544px;
}

.card.dominant-card.orphan-dominant-card {
  background-image: url('../images/ORPHAN.webp');
  background-position: 50% 80%;
  background-repeat: no-repeat;
  background-size: auto 512px;
}

.card.dominant-card.warrior-dominant-card {
  background-image: url('../images/WARRIOR.webp');
  background-position: 50% 120%;
  background-size: auto 544px;
}

.card.dominant-card.caregiver-dominant-card {
  background-image: url('../images/CAREGIVER.webp');
  background-position: 50% 75%;
  background-repeat: no-repeat;
  background-size: auto 496px;
}

.card.dominant-card.seeker-dominant-card {
  background-image: url('../images/THE-SEEKER.webp');
  background-position: 50% 60%;
  background-repeat: no-repeat;
  background-size: auto 528px;
}

.card.dominant-card.lover-dominant-card {
  background-image: url('../images/LOVER.webp');
  background-position: 50% 70%;
  background-repeat: no-repeat;
  background-size: auto 488px;
}

.card.dominant-card.creator-dominant-card {
  background-image: url('../images/CREATOR.webp');
  background-position: 50% 80%;
  background-size: auto 536px;
}

.card.dominant-card.ruler-dominant-card {
  background-image: url('../images/RULER.webp');
  background-position: 50% 75%;
  background-repeat: no-repeat;
  background-size: auto 512px;
}

.card.dominant-card.magician-dominant-card {
  background-image: url('../images/MAGICIAN.webp');
  background-position: 50% 65%;
  background-repeat: no-repeat;
  background-size: auto 504px;
}

.card.dominant-card.sage-dominant-card {
  background-image: url('../images/SAGE.webp');
  background-position: 50% 75%;
  background-repeat: no-repeat;
  background-size: auto 512px;
}

.card.dominant-card.fool-dominant-card {
  background-image: url('../images/FOOL.webp');
  background-position: 50% -10%;
  background-size: auto 608px;
}

.card.enemy-description-card {
  grid-row-gap: 0px;
  padding: 24px 32px 32px;
}

.card.pop-up-card {
  grid-row-gap: 32px;
  max-width: 448px;
  padding: 32px 32px 48px;
  position: relative;
}

.card.unique-result-card {
  grid-row-gap: 32px;
  box-shadow: none;
  background-color: #fff3e8;
  width: 752px;
  height: auto;
  padding: 28px 32px 40px;
  position: relative;
}

.card.dominant-share-card {
  border-radius: 8px;
  justify-content: space-between;
  align-items: center;
  width: 218px;
  height: 416px;
  padding-top: 16px;
  padding-bottom: 16px;
}

.card.dominant-share-card.innocent-dominant-share {
  background-image: url('../images/INNOCENT.webp');
  background-position: 50% 30%;
  background-repeat: no-repeat;
  background-size: auto 376px;
}

.card.dominant-share-card.orphan-dominant-share {
  background-image: url('../images/ORPHAN.webp');
  background-position: 50% 30%;
  background-repeat: no-repeat;
  background-size: auto 360px;
}

.card.dominant-share-card.warrior-dominant-share {
  background-image: url('../images/WARRIOR.webp');
  background-position: 50% 30%;
  background-repeat: no-repeat;
  background-size: auto 376px;
}

.card.dominant-share-card.caregiver-dominant-share {
  background-image: url('../images/CAREGIVER.webp');
  background-position: 50% 40%;
  background-repeat: no-repeat;
  background-size: auto 352px;
}

.card.dominant-share-card.seeker-dominant-share {
  background-image: url('../images/THE-SEEKER.webp');
  background-position: 50% 10%;
  background-repeat: no-repeat;
  background-size: auto 376px;
}

.card.dominant-share-card.rebel-dominant-share {
  background-image: url('../images/DESTROYER.webp');
  background-position: 50% 20%;
  background-repeat: no-repeat;
  background-size: auto 360px;
}

.card.dominant-share-card.lover-dominant-share {
  background-image: url('../images/LOVER.webp');
  background-position: 50% 30%;
  background-repeat: no-repeat;
  background-size: auto 344px;
}

.card.dominant-share-card.creator-dominant-share {
  background-image: url('../images/CREATOR.webp');
  background-position: 50% 10%;
  background-repeat: no-repeat;
  background-size: auto 384px;
}

.card.dominant-share-card.ruler-dominant-share {
  background-image: url('../images/RULER.webp');
  background-position: 50% 30%;
  background-repeat: no-repeat;
  background-size: auto 368px;
}

.card.dominant-share-card.magician-dominant-share {
  background-image: url('../images/MAGICIAN.webp');
  background-position: 50% 20%;
  background-repeat: no-repeat;
  background-size: auto 360px;
}

.card.dominant-share-card.sage-dominant-share {
  background-image: url('../images/SAGE.webp');
  background-position: 50% 30%;
  background-repeat: no-repeat;
  background-size: auto 360px;
}

.card.dominant-share-card.fool-dominant-share {
  background-image: url('../images/FOOL.webp');
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: auto 440px;
}

.card.qr-card {
  grid-row-gap: 8px;
  border-radius: 8px;
  justify-content: flex-start;
  align-items: center;
  padding: 16px;
  position: absolute;
  inset: auto 32px 40px auto;
}

.card.share-card {
  grid-row-gap: 48px;
  box-shadow: none;
  background-color: #fff3e8;
  justify-content: flex-start;
  align-items: center;
  width: 752px;
  padding: 32px;
}

.card.start-banner-card {
  grid-row-gap: 56px;
  background-image: url('../images/author.webp');
  background-position: 100%;
  background-repeat: no-repeat;
  background-size: auto 352px;
  justify-content: center;
  align-items: flex-start;
  width: 848px;
  padding: 32px 48px 40px;
}

.h2 {
  color: #46545b;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  font-family: PT Serif, sans-serif;
  font-size: 36px;
  font-weight: 700;
  line-height: 40px;
  text-decoration: none;
}

.h2.center {
  text-align: center;
}

.text-18 {
  color: #46545b;
  font-family: PT Sans, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  text-decoration: none;
}

.text-18.avatar-text {
  color: #46545b4d;
  font-family: PT Sans, sans-serif;
  font-style: italic;
}

.text-18.avatar-text.dark-side-avatar {
  color: #ffffff4d;
}

.text-18.white {
  color: #fffffff2;
}

.text-18.hero-name {
  color: #46545b;
  border: 1px solid #46545b;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 22px;
  line-height: 26px;
}

.text-18.domainant-share-title {
  text-align: center;
  font-family: PT Serif, serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 26px;
}

.text-18.side-text {
  background-color: #fff;
  border-radius: 4px;
  justify-content: flex-start;
  align-items: center;
  margin-right: auto;
  padding: 4px 8px;
  display: flex;
}

.text-18.side-text.dark-side-text {
  color: #fff;
  background-color: #46545b;
}

.text-18.share-result-code {
  font-style: italic;
  font-weight: 400;
}

.text-18.share-result-ex {
  text-align: center;
  font-style: italic;
}

.text-18.center {
  text-align: center;
}

.text-18.alarm-text {
  color: #da2625;
  display: block;
}

.icon-24 {
  object-fit: cover;
}

._48-btn {
  grid-column-gap: 8px;
  color: #fff;
  letter-spacing: 2px;
  text-transform: uppercase;
  background-color: #ff7e00;
  border: 1px solid #ff7e00;
  border-radius: 2px;
  justify-content: center;
  align-items: center;
  width: auto;
  height: 48px;
  margin-left: auto;
  margin-right: auto;
  padding: 12px 24px;
  font-family: PT Sans Caption, sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  transition: background-color .2s, color .2s;
  display: flex;
  overflow: hidden;
}

._48-btn:hover {
  color: #ff7e00;
  background-color: #fff;
}

._48-btn:active {
  color: #ff7e00cc;
}

._48-btn.restart-btn {
  color: #fff;
  background-color: #ff7e0000;
  border-color: #fff;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

._48-btn.restart-btn:hover {
  color: #ff7e00;
  background-color: #fff;
  border-color: #fff;
}

._48-btn.restart-btn:active {
  color: #ff7e00cc;
}

._48-btn.share-btn {
  color: #ff7e00;
  background-color: #fff;
  margin-left: auto;
  margin-right: auto;
}

._48-btn.share-btn:hover {
  color: #fff;
  background-color: #fff0;
  border-color: #fff;
}

._48-btn.share-btn:active {
  color: #fffc;
}

._48-btn.share-btn.share-btn-1 {
  margin-top: 16px;
}

._48-btn.center-btn {
  margin-left: auto;
  margin-right: auto;
}

._48-btn.second-btn {
  color: #ff7e00;
  background-color: #ff7e0000;
}

._48-btn.second-btn:hover {
  color: #fff;
  background-color: #ff7e00;
}

._48-btn.second-btn:active {
  color: #fffc;
}

._48-btn.second-btn.banner-btn {
  margin-left: 0;
}

.text-14 {
  color: #46545b;
  font-size: 14px;
  line-height: 20px;
}

.text-14.white {
  color: #fff;
  display: block;
}

.text-14.diagram-text {
  color: #fff;
  text-align: right;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  margin-right: -24px;
  display: flex;
}

.text-14.diagram-text.innocent-diagram-text {
  justify-content: flex-end;
  align-items: center;
  display: flex;
}

.text-14.diagram-left-text {
  color: #fff;
  text-align: right;
  width: 176px;
}

.text-14.share-result-ex {
  text-align: center;
  font-family: PT Sans, sans-serif;
  font-size: 18px;
  font-style: italic;
  font-weight: 400;
  line-height: 24px;
}

.text-14.text-or-link {
  color: #ff7e00;
}

.v-flex {
  flex-flow: column;
  display: flex;
}

.v-flex.gap-16 {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.v-flex.gap-16.center {
  justify-content: flex-start;
  align-items: center;
}

.v-flex.gap-8 {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: flex-start;
  align-items: flex-start;
}

.v-flex.dominant-card-title-flex, .v-flex.h3-and-sub-flex {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: flex-start;
  align-items: center;
}

.v-flex.dark-side-flex {
  z-index: 2;
  position: relative;
}

.v-flex.dark-side-content {
  z-index: 2;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  color: #fff;
  position: relative;
}

.v-flex.gap-4 {
  grid-column-gap: 4px;
  grid-row-gap: 4px;
}

.v-flex.btn-fex {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: flex-start;
  align-items: flex-start;
  width: 344px;
  margin-left: auto;
  margin-right: auto;
}

.v-flex.gap-24 {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
}

.v-flex.side-flex {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  width: 328px;
}

.v-flex.share-options-flex {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  justify-content: flex-start;
  align-items: center;
}

.v-flex.gap-32 {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
}

.v-flex.flex-text-and-share {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: flex-start;
  align-items: center;
}

.v-flex.share-title-content, .v-flex.start-test-res-flex {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
}

.v-flex.banner-flex {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  max-width: 440px;
}

.v-flex.start-cards-flex {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  display: flex;
}

.h-flex {
  display: flex;
}

.h-flex.gap-8 {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
}

.h-flex.gap-16 {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: wrap;
}

.h-flex.diagram-line {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}

.h-flex.bar-and-text {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  justify-content: flex-start;
  align-items: center;
}

.h-flex.my-hero-result-flex {
  grid-column-gap: 8px;
  grid-row-gap: 0px;
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: center;
  max-width: 560px;
}

.h-flex.dominant-share-flex {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: wrap;
}

.h-flex.sides-flex {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
}

.h-flex.en-share-flex {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: flex-start;
  align-items: center;
}

.h-flex.all-sides-flex {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  width: 100%;
}

.h-flex.rarity-flex {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: flex-start;
  align-items: center;
}

.h-flex.gap-32 {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
}

.h-flex.all-en-share-flex {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-flow: wrap;
}

.h-flex.flex-share-btns {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
}

.start-flex {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 532px;
  display: flex;
}

.question-container {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-flow: column;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: center;
  width: 640px;
  display: none;
}

.h3 {
  color: #46545b;
  font-family: PT Serif, serif;
  font-size: 28px;
  font-weight: 700;
  line-height: 32px;
}

.h3.center {
  text-align: center;
}

.h3.center.white {
  color: #fff;
  padding-left: 0;
}

.h3.white {
  color: #fff;
  padding-left: 32px;
}

.h3.left {
  padding-left: 32px;
}

.h3.h3-result {
  color: #46545b;
}

.h3.rarity-text {
  color: #fff;
  background-color: #ff7e00;
  border-radius: 6px;
  padding: 12px 16px;
}

.result-container {
  grid-column-gap: 64px;
  grid-row-gap: 64px;
  flex-flow: column;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  width: 1136px;
  display: none;
}

.dominant-cards-container {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: wrap;
  justify-content: center;
  align-items: stretch;
  display: flex;
}

.start-test, .questionnaire {
  display: none;
}

.challenge-cards-container {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: wrap;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.avatar {
  border-radius: 32px;
  width: 64px;
  height: 64px;
  box-shadow: 0 2px 16px #46545b33;
}

.avatar.avatar-48 {
  width: 48px;
  height: 48px;
}

.avatar-flex {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: row;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.challenge-container {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-flow: column;
  display: flex;
}

.serif-18 {
  color: #fff;
  font-family: PT Serif, serif;
  font-weight: 700;
}

.serif-18.center {
  text-align: center;
}

.h1 {
  color: #fff;
  font-family: PT Serif, serif;
  font-size: 52px;
  font-weight: 700;
  line-height: 56px;
}

.result, .questionnaire-style, .result-code {
  display: none;
}

.archetype-result {
  display: flex;
  position: relative;
}

.points-in-cards, .hide-dominant-cards, .array, .hide-chalenge {
  display: none;
}

.description-container {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 624px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.block.dark-side-block {
  z-index: 0;
  background-image: linear-gradient(#46545b, #46545b);
  width: 624px;
  height: 520px;
  margin-top: -24px;
  margin-left: -32px;
  margin-right: auto;
  padding-left: 0;
  position: absolute;
}

.hide-description {
  display: none;
}

.diagram-container {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  width: 752px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.diagram-bar {
  background-image: linear-gradient(#fff, #fff);
  border-radius: 2px 4px 4px 2px;
  width: 50%;
  height: 32px;
}

.diagram-bar.innocent-bar {
  width: 50%;
}

.diagram-code {
  display: none;
}

.diagram-bar-container {
  width: 462px;
}

.diagram-pionts, .bars-opacity {
  display: none;
}

.enemy-container {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.enemy-cards-container {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: wrap;
  justify-content: center;
  align-items: flex-start;
  display: flex;
}

.hide-enemy {
  display: none;
}

.enemy-description-container {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  width: 624px;
  display: flex;
}

.hide-enemy-save, .restart {
  display: none;
}

.pop-up-blackout {
  z-index: 100;
  background-color: #0006;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  display: none;
  position: fixed;
  inset: 0% 0% auto;
}

.x-flex {
  background-image: url('../images/x1.svg');
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: auto;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  display: flex;
  position: absolute;
  top: 0;
  right: 0;
}

.x-flex:hover {
  background-image: url('../images/x2.svg');
}

.x-flex:active {
  background-image: url('../images/x3.svg');
}

.link-or {
  color: #ff7e00;
  text-decoration: none;
}

.link-or:hover {
  text-decoration: underline;
}

.link-or:active {
  color: #ff7e00cc;
}

.learn-about-the-method {
  display: none;
}

.start-logo {
  height: 24px;
}

.url-code {
  display: none;
}

.logo-share {
  height: 24px;
  position: static;
  inset: 0% 0% auto auto;
}

.share-result-card-code, .sides-code, .en-code {
  display: none;
}

.qr {
  width: 144px;
}

._32-btn {
  grid-column-gap: 8px;
  color: #fff;
  text-transform: none;
  background-color: #ff7e00;
  border: 1px solid #ff7e00;
  border-radius: 2px;
  justify-content: center;
  align-items: center;
  height: 40px;
  padding: 12px 16px;
  font-family: PT Sans, sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 24px;
  transition: background-color .2s, color .2s;
  display: flex;
  overflow: hidden;
}

._32-btn:hover {
  color: #ff7e00;
  background-color: #fff;
}

._32-btn:active {
  color: #ff7e00cc;
}

._32-btn.random-btn {
  line-height: 24px;
}

.random-code {
  display: none;
}

._40-btn {
  background-color: #ff7e00;
  border: 1px solid #ff7e00;
  border-radius: 2px;
  width: auto;
  height: 40px;
  padding: 8px 16px 9px;
  transition: background-color .15s, color .15s, opacity .15s;
}

._40-btn:hover {
  color: #ff7e00;
  background-color: #ff7e0000;
  border: 1px solid #ff7e00;
}

._40-btn:active {
  color: #ff7e00cc;
}

._40-btn.random-btn {
  justify-content: center;
  align-items: center;
  width: 320px;
  display: flex;
}

.input-code {
  width: 320px;
}

.show-name-code, .copy-code {
  display: none;
}

.share-container {
  grid-column-gap: 48px;
  grid-row-gap: 48px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.copy-card-code {
  display: none;
}

.text-22 {
  color: #46545b;
  font-family: PT Sans, sans-serif;
  font-size: 22px;
  line-height: 26px;
}

.text-22.side-text {
  background-image: linear-gradient(#fff, #fff);
  border-radius: 4px;
  padding: 4px 12px;
}

.text-22.side-text.dark-side-text {
  color: #fff;
  background-image: linear-gradient(#46545b, #46545b);
}

.text-22.avatar-text-22 {
  font-style: italic;
}

.rarity-code {
  display: none;
}

.tg-share {
  background-image: url('../images/telegram-svgrepo-com-1.svg');
  background-position: 0 0;
  background-size: 48px 48px;
  width: 48px;
  height: 48px;
  transition: opacity .2s, opacity .15s;
}

.tg-share:hover {
  background-image: url('../images/telegram-svgrepo-com-2.svg');
}

.tg-share:active {
  opacity: .8;
  background-repeat: no-repeat;
}

.tg-share-code, .user-code {
  display: none;
}

.alarm-block {
  width: 440px;
  display: none;
}

.check-code {
  display: none;
}

.share-btn-wrap {
  margin-left: auto;
  margin-right: auto;
}

.logo-wrap {
  justify-content: flex-end;
  align-items: flex-start;
  width: auto;
  height: auto;
  position: absolute;
  inset: 32px 32px auto auto;
}

@media screen and (max-width: 991px) {
  .section {
    padding-left: 56px;
    padding-right: 56px;
  }

  .card.start-card {
    grid-row-gap: 88px;
    background-position: 420px 120px;
    background-size: auto 448px;
    width: 100%;
    max-width: 656px;
    padding-left: 56px;
    padding-right: 56px;
  }

  .card.start-card.start-banner-card {
    grid-row-gap: 56px;
    background-position: 110%;
    background-size: auto 320px;
  }

  .card.question-card {
    padding-left: 56px;
    padding-right: 56px;
    display: flex;
  }

  .card.dominant-card {
    width: 320px;
  }

  .card.challenge-card {
    width: 432px;
    padding-left: 32px;
    padding-right: 32px;
  }

  .card.description-card {
    max-width: 656px;
  }

  .card.description-card.innocent-description-card {
    max-width: 624px;
  }

  .card.enemy-card {
    width: 320px;
  }

  .card.enemy-description-card {
    padding-right: 48px;
  }

  .card.pop-up-card {
    max-width: 544px;
  }

  .card.unique-result-card {
    width: 720px;
    padding-bottom: 32px;
  }

  .card.dominant-share-card {
    width: 208px;
  }

  .card.share-card {
    width: 720px;
    padding-bottom: 48px;
  }

  .card.start-banner-card {
    background-position: 120%;
    width: 848px;
    max-width: 656px;
  }

  .h2.h2-start-card {
    font-size: 28px;
    line-height: 32px;
  }

  .text-18.dom-sub {
    font-size: 14px;
    line-height: 20px;
  }

  .text-14.diagram-left-text {
    width: 152px;
  }

  .v-flex.side-flex {
    width: 320px;
  }

  .v-flex.banner-flex {
    max-width: 320px;
  }

  .v-flex.start-cards-flex {
    display: flex;
  }

  .h-flex.my-hero-result-flex {
    max-width: 552px;
  }

  .start-flex {
    max-width: 432px;
  }

  .question-container {
    width: 100%;
    max-width: 656px;
    display: none;
  }

  .h3.center.dom-title {
    font-size: 18px;
    line-height: 24px;
  }

  .result-container {
    grid-column-gap: 48px;
    grid-row-gap: 48px;
    width: 100%;
    max-width: 656px;
    display: none;
  }

  .dominant-cards-container {
    justify-content: center;
    align-items: stretch;
  }

  .h1 {
    font-size: 36px;
    line-height: 40px;
  }

  .description-container {
    width: 100%;
  }

  .block.dark-side-block {
    width: 656px;
  }

  .diagram-container {
    width: 100%;
  }

  .diagram-bar-container {
    width: 488px;
  }

  .enemy-description-container {
    width: 100%;
  }

  .pop-up-blackout {
    height: 100vh;
    display: none;
  }

  .share-container {
    width: 100%;
  }

  .alarm-block, .copy-card-block {
    display: none;
  }
}

@media screen and (max-width: 767px) {
  .section {
    padding: 32px 16px 48px;
  }

  .section.section-white {
    padding-top: 32px;
    padding-bottom: 48px;
  }

  .card.start-card {
    background-position: 280px 200px;
    background-size: auto 360px;
    max-width: 448px;
    padding-left: 24px;
    padding-right: 24px;
  }

  .card.start-card.start-banner-card {
    grid-row-gap: 24px;
    background-image: none;
    background-repeat: repeat;
    background-size: auto;
  }

  .card.question-card {
    padding-top: 32px;
    padding-left: 24px;
    padding-right: 24px;
    display: flex;
  }

  .card.dominant-card {
    width: 326px;
    height: 560px;
  }

  .card.challenge-card {
    width: 100%;
    padding-left: 24px;
    padding-right: 20px;
  }

  .card.description-card {
    padding-left: 24px;
    padding-right: 20px;
  }

  .card.enemy-card {
    width: 326px;
    height: 560px;
  }

  .card.enemy-description-card {
    padding-left: 24px;
    padding-right: 20px;
  }

  .card.pop-up-card {
    grid-row-gap: 24px;
    max-width: 448px;
    padding-bottom: 40px;
    padding-left: 24px;
    padding-right: 24px;
  }

  .card.unique-result-card {
    width: 480px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .card.dominant-share-card {
    width: 144px;
    height: 320px;
  }

  .card.dominant-share-card.innocent-dominant-share {
    background-position: 50% 40%;
    background-size: auto 288px;
  }

  .card.dominant-share-card.orphan-dominant-share {
    background-position: 50% 40%;
    background-size: auto 280px;
  }

  .card.dominant-share-card.warrior-dominant-share {
    background-size: auto 288px;
  }

  .card.dominant-share-card.caregiver-dominant-share {
    background-size: auto 280px;
  }

  .card.dominant-share-card.seeker-dominant-share {
    background-position: 50% 20%;
    background-size: auto 288px;
  }

  .card.dominant-share-card.rebel-dominant-share {
    background-size: auto 280px;
  }

  .card.dominant-share-card.lover-dominant-share {
    background-position: 50% 35%;
    background-size: auto 272px;
  }

  .card.dominant-share-card.creator-dominant-share {
    background-position: 50% 30%;
    background-size: auto 288px;
  }

  .card.dominant-share-card.ruler-dominant-share {
    background-position: 50% 35%;
    background-size: auto 280px;
  }

  .card.dominant-share-card.magician-dominant-share {
    background-position: 50% 30%;
    background-size: auto 280px;
  }

  .card.dominant-share-card.sage-dominant-share {
    background-size: auto 288px;
  }

  .card.dominant-share-card.fool-dominant-share {
    background-position: 50% 90%;
    background-size: auto 336px;
  }

  .card.share-card {
    grid-row-gap: 32px;
    justify-content: flex-start;
    align-items: center;
    width: 480px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .card.start-banner-card {
    width: 100%;
    max-width: 448px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 24px;
    padding-right: 24px;
  }

  .h2 {
    font-size: 28px;
    line-height: 32px;
  }

  .text-18.hero-name, .text-18.domainant-share-title {
    font-size: 18px;
    line-height: 24px;
  }

  .text-18.share-result-ex {
    font-size: 14px;
    line-height: 16px;
  }

  ._48-btn {
    letter-spacing: 0;
    text-transform: none;
    border-radius: 4px;
    width: 100%;
    font-family: PT Sans, sans-serif;
    font-weight: 400;
  }

  ._48-btn.share-btn {
    border-color: #fff;
  }

  ._48-btn.second-btn.banner-btn {
    background-color: #fff;
  }

  ._48-btn.second-btn.banner-btn:hover {
    background-color: #ff7e00;
  }

  .text-14.diagram-left-text {
    width: 140px;
  }

  .v-flex.gap-16 {
    width: 100%;
  }

  .v-flex.dominant-card-title-flex {
    grid-column-gap: 0px;
    grid-row-gap: 0px;
  }

  .v-flex.h3-and-sub-flex {
    grid-column-gap: 4px;
    grid-row-gap: 4px;
  }

  .v-flex.btn-fex {
    width: 100%;
  }

  .v-flex.gap-24 {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .v-flex.side-flex {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    width: 100%;
  }

  .v-flex.gap-32 {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }

  .v-flex.flex-text-and-share {
    width: 100%;
  }

  .v-flex.share-title-content {
    justify-content: flex-start;
    align-items: center;
    width: 100%;
  }

  .v-flex.start-test-res-flex {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }

  .v-flex.banner-flex {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
    max-width: 320px;
  }

  .h-flex.my-hero-result-flex {
    max-width: 360px;
  }

  .h-flex.dominant-share-flex, .h-flex.en-share-flex {
    grid-column-gap: 8px;
    grid-row-gap: 8px;
  }

  .h-flex.all-en-share-flex {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
  }

  .h-flex.flex-share-btns {
    flex-flow: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
  }

  .start-flex {
    max-width: 80%;
  }

  .question-container {
    max-width: 448px;
    margin-top: 32px;
    margin-bottom: 48px;
    display: none;
  }

  .h3 {
    letter-spacing: 2px;
    text-transform: uppercase;
    font-family: PT Sans Caption, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
  }

  .h3.h3-result {
    letter-spacing: 0;
    text-transform: none;
    font-family: PT Sans, sans-serif;
  }

  .result-container {
    max-width: 448px;
    margin-top: 32px;
    margin-bottom: 48px;
    display: none;
  }

  .avatar.avatar-result-share {
    width: 48px;
    height: 48px;
  }

  .challenge-container {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }

  .serif-18 {
    font-family: PT Sans, sans-serif;
    font-weight: 400;
  }

  .description-container {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }

  .block.dark-side-block {
    height: 560px;
  }

  .diagram-bar-container {
    width: 274px;
  }

  .enemy-container {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
  }

  .pop-up-blackout {
    width: 100vw;
    height: 100vh;
    padding-left: 16px;
    padding-right: 16px;
    display: none;
    inset: 0% 0% auto;
  }

  .logo-share {
    height: 20px;
  }

  ._40-btn {
    border-radius: 4px;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 48px;
    padding-bottom: 8px;
    display: flex;
  }

  ._40-btn.random-btn, .input-code {
    width: 100%;
  }

  .share-container {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
  }

  .text-22 {
    font-size: 18px;
    line-height: 24px;
  }

  .text-22.side-text {
    padding-left: 8px;
    padding-right: 8px;
  }

  .alarm-block {
    width: 100%;
    display: none;
  }

  .share-btn-wrap {
    width: 100%;
  }

  .logo-wrap {
    right: 16px;
  }
}

@media screen and (max-width: 479px) {
  .section {
    padding-left: 0;
    padding-right: 0;
  }

  .card.start-card {
    background-position: 160px 144%;
    padding-left: 16px;
    padding-right: 16px;
  }

  .card.question-card {
    padding-left: 16px;
    padding-right: 16px;
    display: flex;
  }

  .card.dominant-card {
    width: 328px;
  }

  .card.challenge-card, .card.description-card {
    padding-left: 16px;
    padding-right: 16px;
  }

  .card.enemy-card {
    width: 328px;
  }

  .card.enemy-description-card {
    padding-left: 16px;
    padding-right: 16px;
  }

  .card.pop-up-card {
    grid-row-gap: 16px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .card.unique-result-card {
    width: 100%;
    padding-top: 16px;
  }

  .card.dominant-share-card {
    grid-row-gap: 32px;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    height: 144px;
    padding-left: 16px;
  }

  .card.dominant-share-card.innocent-dominant-share {
    background-position: 45vw -3vh;
    background-size: auto 304px;
  }

  .card.dominant-share-card.orphan-dominant-share {
    background-position: 45vw -2vh;
    background-size: auto 304px;
  }

  .card.dominant-share-card.warrior-dominant-share {
    background-position: 45vw -3vh;
    background-size: auto 304px;
  }

  .card.dominant-share-card.caregiver-dominant-share {
    background-position: 45vw -2vh;
  }

  .card.dominant-share-card.seeker-dominant-share {
    background-position: 42vw -3vh;
    background-size: auto 304px;
  }

  .card.dominant-share-card.rebel-dominant-share {
    background-position: 44vw -2vh;
    background-size: auto 304px;
  }

  .card.dominant-share-card.lover-dominant-share {
    background-position: 45vw -1vh;
    background-size: auto 304px;
  }

  .card.dominant-share-card.creator-dominant-share {
    background-position: 42vw -3vh;
    background-size: auto 320px;
  }

  .card.dominant-share-card.ruler-dominant-share, .card.dominant-share-card.magician-dominant-share {
    background-position: 42vw -2vh;
    background-size: auto 304px;
  }

  .card.dominant-share-card.sage-dominant-share {
    background-position: 44vw -3vw;
    background-size: auto 304px;
  }

  .card.dominant-share-card.fool-dominant-share {
    background-position: 40vw -5vh;
  }

  .card.share-card {
    width: 100%;
  }

  .text-18.domainant-share-title {
    font-size: 18px;
    line-height: 24px;
  }

  .text-18.share-result-ex {
    text-align: left;
  }

  .text-14.diagram-left-text {
    width: 30%;
  }

  .v-flex.h3-and-sub-flex, .v-flex.btn-fex {
    padding-left: 16px;
    padding-right: 16px;
  }

  .v-flex.side-flex {
    width: 100%;
  }

  .v-flex.start-test-res-flex {
    padding-left: 16px;
    padding-right: 16px;
  }

  .h-flex.my-hero-result-flex {
    max-width: 100%;
    margin-top: 48px;
  }

  .h-flex.dominant-share-flex {
    width: 100%;
  }

  .h-flex.rarity-flex {
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .start-flex {
    width: 100%;
    max-width: 100%;
  }

  .question-container {
    display: none;
  }

  .h3.center {
    text-align: center;
  }

  .h3.h3-result {
    font-weight: 700;
  }

  .result-container {
    grid-column-gap: 32px;
    grid-row-gap: 32px;
    max-width: 500px;
    padding-left: 0;
    padding-right: 0;
    display: none;
  }

  .serif-18 {
    text-align: center;
  }

  .h1 {
    text-align: center;
    font-size: 28px;
    line-height: 32px;
  }

  .questionnaire-1 {
    width: 100%;
  }

  .block.dark-side-block {
    height: 720px;
  }

  .diagram-container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .diagram-bar-container {
    width: 200px;
  }

  .pop-up-blackout {
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    padding-left: 0;
    padding-right: 0;
    display: none;
  }

  .alarm-block {
    display: none;
  }

  .share-btn-wrap {
    margin-right: 16px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .logo-wrap {
    inset: 16px auto auto 16px;
  }
}

#w-node-_97d9a799-5d13-f78d-604a-eecc28b60075-c240b7f9 {
  grid-area: span 1 / span 12 / span 1 / span 12;
}